@charset "UTF-8";
/* width */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar:horizontal {
  height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 15px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #afafaf;
  border-radius: 15px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #696969;
}

*, ::after, ::before {
  box-sizing: border-box;
}

/* Edge 12-18 */

::-moz-placeholder {
  color: #aaa;
}

::placeholder {
  color: #aaa;
}

body {
  margin: 0px;
  background-color: #ffffff;
  font-size: 14px;
  font-family: Arial, Helvetica, 黑體-繁, 微軟正黑體, sans-serif;
}

span.required {
  color: red;
}

/* Textarea */
textarea.outline {
  outline: none;
  border: 0;
}

/* Input */
.t-input {
  position: relative;
  min-height: 32px;
  background: white;
  width: 100%;
  outline: none;
  border-radius: 4px;
}
.t-input:not(.is-range):not([type=datetime]) {
  border: 1px solid #aaaaaa;
}
.t-input.active {
  border: 1px solid rgb(53, 94, 234);
}
.t-input[right] > span {
  text-align: right;
}
.t-input span {
  z-index: 1;
  padding: 0 2px;
  position: relative;
  display: block;
  line-height: 2;
}
.t-input span.placeholder {
  color: #aaa;
}
.t-input input {
  z-index: 2;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border: none;
  background: rgba(0, 0, 0, 0);
  width: inherit;
  outline: none;
  line-height: 2;
}
.t-input textarea {
  z-index: 2;
  display: block;
  border: none;
  background: rgba(0, 0, 0, 0);
  width: inherit;
  outline: none;
  line-height: 1.2;
  field-sizing: content;
  resize: vertical;
  min-height: 30px;
}

.t-input.radio, .t-input.checkbox {
  border: none !important;
  min-height:initial;
}

.t-input.file {
  border: none !important;
}

.t-input.file ~ img {
  width: 20px;
}

.t-input:not([number]) {
  word-break: break-all;
}
.t-input[is-table] {
  background: transparent !important;
}
.t-input[is-table][disabled] {
  background: transparent !important;
}
.t-input[data-disabled], .fuzzySelect[data-disabled], .t-input.disabled, .fuzzySelect.disabled {
  background: rgb(226, 226, 226) !important;
  cursor: auto;
}

.t-input.radio.disabled, .t-input.checkbox.disabled {
  background: none !important;;
}

.t-input[is-checked] {
  background: rgb(255, 242, 204);
}
.t-input[is-error] {
  border: 1px solid red;
  background: rgba(255, 0, 0, 0.1);
}
.t-input[border-none] {
  border: none !important;
  border-radius: 0 !important;
}
.t-input.is-range {
  display: flex;
}
.t-input.is-range .from {
  width: 100%;
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  position: relative;
}
.t-input.is-range .to {
  width: 100%;
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  position: relative;
}
.t-input.is-range .labelTo {
  width: 10%;
  text-align: center;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  input[type=text], input[type=date], input[type=datetime-local] {
    min-height: 30px;
    -webkit-appearance: none;
    border-radius: 4px;
    border: 1.5px solid #aaaaaa;
    /*background: #fff;*/
    outline: none;
  }
  input[type=text]:focus, input[type=date]:focus, input[type=datetime-local]:focus {
    border: 1.5px solid rgb(53, 94, 234);
  }
  input[type=text]::-moz-placeholder, input[type=date]::-moz-placeholder, input[type=datetime-local]::-moz-placeholder {
    color: #aaaaaa;
  }
  input[type=text]::placeholder, input[type=date]::placeholder, input[type=datetime-local]::placeholder {
    color: #aaaaaa;
  }
  input[type=checkbox],
  input[type=radio] {
    --active: #355eea;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #355eea;
    --background: #fff;
    --disabled: #efefef;
    --disabled-inner: #afafaf;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 15px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
  }
  input[type=checkbox]::after,
  input[type=radio]::after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
  }
  input[type=checkbox]:checked,
  input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  input[type=checkbox]:disabled,
  input[type=radio]:disabled {
    --b: var(--disabled);
    opacity: 0.9;
  }
  input[type=checkbox]:disabled:checked,
  input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  input[type=checkbox]:hover:not(:checked):not(:disabled),
  input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  input[type=checkbox]:focus,
  input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  input[type=checkbox]:not(.switch),
  input[type=radio]:not(.switch) {
    width: 15px;
  }
  input[type=checkbox]:not(.switch)::after,
  input[type=radio]:not(.switch)::after {
    opacity: var(--o, 0);
  }
  input[type=checkbox]:not(.switch):checked,
  input[type=radio]:not(.switch):checked {
    --o: 1;
  }
  input[type=checkbox] + label,
  input[type=radio] + label {
    font-size: 14px;
    line-height: 15px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }
  input[type=checkbox]:not(.switch) {
    border-radius: 4px;
  }
  input[type=checkbox]:not(.switch)::after {
    width: 5px;
    height: 9px;
    border: 1.5px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 4px;
    top: 1px;
    rotate: 43deg;
  }
  input[type=checkbox].switch {
    width: 35px;
    border-radius: 11px;
  }
  input[type=checkbox].switch::after {
    left: 0px;
    top: 0px;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }
  input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 20.3px;
  }
  input[type=checkbox].switch:disabled:not(:checked)::after {
    opacity: 0.6;
  }
  input[type=radio] {
    border-radius: 50%;
  }
  input[type=radio]:checked {
    --s: .5;
  }
}
/* Button */
button {
  margin: 0 2px;
  background-color: rgb(53, 94, 234);
  color: white;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  border-width: 1px;
  border-color: transparent;
  padding: 2px 7px;
  cursor: pointer;
}
button.icon {
  background-color: transparent;
  border-radius: 99px;
}
button.icon:hover {
  background-color: rgba(170, 170, 170, 0.2);
}
button:not(.icon) {
  line-height: 1.5;
}
button a {
  text-decoration: none;
  color: white;
}
button:hover {
  background-color: rgba(53, 94, 234, 0.9);
}
button[text] {
  background: transparent;
  color: black;
}
button[text]:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
button.outline {
  background-color: white;
  color: #aaaaaa;
  border: 1px solid #aaaaaa;
}
button.outline:hover {
  background-color: rgba(170, 170, 170, 0.2);
}
button[data-icon=add]::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(255, 255, 255)" d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>');
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
}
button[data-icon=add].outline::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(170, 170, 170)" d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>');
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 0;
}
button[data-icon=delete]::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(255, 255, 255)" d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>');
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
}
button[data-icon=action]::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"/></svg>');
  width: 3px;
  height: 3px;
  display: inline-block;
  padding-top: 4px;
}
button[data-icon=delete-item]::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(170, 170, 170)" d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>');
  width: 10px;
  height: 10px;
  display: inline-block;
}
button[data-icon=close]::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>');
  width: 15px;
  height: 15px;
  display: inline-block;
}
button[data-icon=copy]::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(255, 255, 255)" d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>');
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
}
button[data-icon=import]::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(255, 255, 255)" d="M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z"/></svg>');
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
}
button[data-icon=back]::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(255, 255, 255)" d="M177.5 414c-8.8 3.8-19 2-26-4.6l-144-136C2.7 268.9 0 262.6 0 256s2.7-12.9 7.5-17.4l144-136c7-6.6 17.2-8.4 26-4.6s14.5 12.5 14.5 22l0 72 288 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-288 0 0 72c0 9.6-5.7 18.2-14.5 22z"/></svg>');
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
}
button[data-icon=save]::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(255, 255, 255)" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>');
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
}
button[data-icon=search]::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>');
  width: 10px;
  height: 10px;
  display: inline-block;
}
button[data-icon=set-default] {
  height: -moz-min-content;
  height: min-content;
  width: -moz-min-content;
  width: min-content;
  padding: 3px 3px 0 3px;
}
button[data-icon=set-default]::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(170, 170, 170)" d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>');
  width: 14px;
  height: 14px;
  display: inline-block;
}

/* Pagination */
.pagination {
  display: grid;
  align-content: center;
  justify-items: center;
  margin-top: 8px;
}
@media (min-width: 576px) {
  .pagination {
    grid-template-columns: 0 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .pagination {
    grid-template-columns: 0 1fr 1fr;
  }
}
@media (min-width: 992px) {
  .pagination {
    grid-template-columns: 0 1fr 1fr;
  }
}
@media (min-width: 1200px) {
  .pagination {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pagination-main {
  align-self: center;
  display: inline-flex;
  cursor: pointer;
}
.pagination-main-link {
  color: rgb(53, 94, 234);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  float: left;
  padding: 4px 10px;
  text-decoration: none;
  border-width: 1px 1px 1px 0;
  border-color: #aaaaaa;
  border-style: solid;
}
.pagination-main-link:hover {
  background-color: #ddd;
}
.pagination-main-link.active {
  background-color: rgb(53, 94, 234);
  color: white;
}
.pagination-main-link.disabled {
  cursor: auto;
  color: rgb(226, 226, 226);
}
.pagination-main-link.disabled:hover {
  background-color: white;
}
.pagination-main-link:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left-width: 1px;
}
.pagination-main-link:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination-selection {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.pagination-selection-showEntries, .pagination-selection-nowPage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  -moz-column-gap: 5px;
       column-gap: 5px;
}
.pagination-selection-showEntries span, .pagination-selection-nowPage span {
  color: #888;
}
.pagination-selection-columnSetting {
  align-self: center;
}
.pagination-selection-columnSetting span {
  color: #888;
}

/* Select */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  select {
    background-color: transparent;
    font-size: 14px;
    outline: none;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 0px;
    border: 1.5px solid #aaaaaa;
    border-radius: 4px;
    background-color: white;
    outline: none;
  }
  select:focus {
    border: 1.5px solid rgb(53, 94, 234);
  }
}
/* Table - Query */
.table-actionButtons {
  margin-bottom: 10px;
}
.table-title {
  display: flex;
  justify-content: space-between;
  margin: 0 0 5px 7px;
}
.table-title span {
  margin-right: 20px;
}
.table-main {
  overflow: auto;
}
.table-main table {
  min-width: 100%;
  width: -moz-max-content;
  width: max-content;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  overflow: auto;
}
.table-main table thead th {
  background-color: #e9e9e9;
  text-align: center;
  font-weight: 600;
  position: sticky;
  top: 0;
  padding: 2px 5px;
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-color: #efefef;
}
.table-main table thead th > .headerContainer {
  display: flex;
  justify-content: center;
}
.table-main table thead th:first-child {
  border-left: 1px solid #efefef;
}
.table-main table thead th.freeze-column {
  z-index: 10;
}
.table-main table thead th:not(.freeze-column) {
  z-index: 9;
}
.table-main table thead th.copy > .headerContainer::after {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>');
  position: relative;
  top: 2px;
  left: 5px;
  display: inline-block;
  width: 12px;
  height: 12px;
}
.table-main table thead th .checkbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.table-main table thead th .checkbox input[type=checkbox] {
  justify-self: flex-end;
}
.table-main table thead th .checkbox label {
  justify-self: flex-start;
}
.table-main table thead th span {
  white-space: pre-wrap;
  display: flex;
  justify-content: center;
}
.table-main table thead th span > .column-remark::after {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(158, 158, 158)" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>');
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: 3px;
  top: 2px;
}
.table-main table thead th span.required {
  color: red;
}
.table-main table thead th .resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.table-main table thead th .resizer:hover {
  border-right: 2px solid #aaaaaa;
}
.table-main table tbody {
  background-color: white;
}
.table-main table tbody tr:last-child td {
  border-bottom: 1px solid #efefef;
}
.table-main table tbody tr td {
  line-height: 1.7;
  background-color: white;
  padding: 0 4px;
  text-align: center;
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-color: #efefef;
}
.table-main table tbody tr td:first-child {
  border-left: 1px solid #efefef;
}
.table-main table tbody tr td.freeze-column {
  position: sticky;
}
.table-main table tbody tr td[link] > span {
  cursor: pointer;
  color: rgb(29, 114, 226);
}
.table-main table tbody tr td[link] > span:hover {
  text-decoration: underline;
}
.table-main table tbody tr td .search {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table-main table tbody tr td .search .searchInput {
  flex-grow: 1;
}
.table-main table tbody tr td .search .searchButton {
  padding: 2px 5px;
  height: -moz-min-content;
  height: min-content;
  width: -moz-min-content;
  width: min-content;
}
.table-main table tbody tr td:not(.number) {
  max-width: 200px;
  word-wrap: break-word;
}
.table-main table tbody tr td.item.copy::after {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>');
  position: relative;
  top: 2px;
  left: 5px;
  display: inline-block;
  width: 12px;
  height: 12px;
}
.table-main table tbody tr td.is-edit {
  cursor: pointer;
  background-color: rgb(229, 247, 229);
}
.table-main table tbody tr td.is-edit .t-input, .table-main table tbody tr td.is-edit .fuzzySelect {
  border: none;
  border-radius: 0;
  background: transparent;
}
.table-main table tbody tr td.copy.checked {
  background-color: rgb(255, 233, 205);
}
.table-main table tbody tr td.disabled {
  background-color: rgb(255, 255, 255);
}
.table-main table tbody tr td.copy {
  background-color: rgb(255, 224, 206);
}
.table-main table tbody tr td.checked {
  background-color: rgb(255, 242, 204);
}
.table-main table tbody tr td[numeric] {
  text-align: right;
}
.table-main table tbody tr td span {
  white-space: pre-wrap;
}
.table-main table tbody tr td textarea {
  width: 100%;
}
.table-main table tbody tr td .checkbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.table-main table tbody tr td .checkbox input[type=checkbox] {
  justify-self: flex-end;
}
.table-main table tbody tr td .checkbox label {
  justify-self: flex-start;
}
.table-main table tfoot {
  display: none;
}
ul.actionButtonMenu {
  width: -moz-max-content;
  width: max-content;
  padding: 0;
  background: white;
  position: absolute;
  z-index: 10;
  border: 1px solid rgba(53, 94, 234, 0.5);
  border-radius: 6px;
  list-style: none;
  display: none;
  margin: 0 10px
}
ul.actionButtonMenu.active{
  display: block;
}
ul.actionButtonMenu li {
  cursor: pointer;
  text-align: left;
  padding: 2px 10px;
  border-bottom: 1px solid #eee;
  border-radius: 6px;
}
ul.actionButtonMenu li:hover {
  background-color: #eee;
}

/* Search */
.search-outline {
  position: relative;
  cursor: pointer;
  background-color: white;
  display: flex;
  width: 100%;
  line-height: 2;
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  align-content: center;
}
.search-outline.active + .search-slide {
  display: block;
}
.search-outline-content {
  display: flex;
  width: 100%;
}
.search-outline-content-prefix {
  min-width: 60px;
  align-content: center;
}
.search-outline-content-prefix span {
  color: #ddd;
  margin-left: 5px;
}
.search-outline-content-prefix::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(100, 100, 100)" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>');
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  position: relative;
  top: 2px;
}
.search-outline-content-items {
  display: flex;
  flex-wrap: wrap;
}
.search-outline-content-items-item {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  margin: 5px;
  line-height: 1.5;
}
.search-outline-content-items-item-label {
  padding: 0 5px;
  background: #6C767D;
  color: white;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  align-content: center;
}
.search-outline-content-items-item-value {
  padding: 0 5px;
  background: #0085FC;
  color: white;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  align-content: center;
}
.search-outline-content-items-item-value-delete {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(255, 255, 255)" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>');
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
  top: 1px;
}
.search-slide {
  display: none;
  z-index: 10;
  width: inherit;
  position: relative;
  height: 100px;
  max-height: 250px;
  text-align: left;
  padding: 0 5px;
  overflow-y: auto;
  height: -moz-max-content;
  height: max-content;
  background-color: white;
  border: 1px solid #aaaaaa;
  border-radius: 4px;
}
.search-slide-content {
  padding: 10px 0;
  display: grid;
  grid-template-rows: max-content max-content;
  row-gap: 10px;
}
.search-slide-content-actions {
  padding-left: 42px;
}
.search-slide-items {
  display: flex;
  flex-direction: column;
  row-gap: 7px;
  max-height: 150px;
  overflow: auto;
}
.search-slide-item {
  display: grid;
  grid-template-columns: max-content 1fr 3fr;
  -moz-column-gap: 10px;
       column-gap: 10px;
  padding: 0 20px;
}
.search-slide-item-action {
  width: 100%;
  align-self: center;
}
.search-slide-item-keySelect select {
  width: 100%;
  border: 1px solid #ddd;
}
.search-slide-item-valueSelect {
  align-self: center;
}
.search-slide-item-valueSelect select {
  width: 100%;
  border: 1px solid #ddd;
}

/* Breadcrumb */
.breadcrumb {
  padding: 0;
  font-size: 12px;
  background: none;
  box-shadow: none;
  display: flex;
  list-style: none;
  gap: 10px;
  align-items: flex-end;
}
.breadcrumb-item:not(:first-child)::before {
  content: ">";
  display: inline-block;
  position: relative;
  right: 5px;
}
.breadcrumb-item a {
  text-decoration: none;
}
.breadcrumb-item a[data-url] {
  color: rgb(53, 94, 234);
  cursor: pointer;
}

/* Top */
.top {
  cursor: pointer;
  position: fixed;
  bottom: 1%;
  right: 1%;
}
.top::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>');
  rotate: 270deg;
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  left: -2px;
  top: 1px;
}

/* Menu */
.menu {
  position: relative;
  display: none;
  flex-direction: column;
  height: 100vh;
  width: 220px;
  border-right: 1px solid rgba(53, 94, 234, 0.5);
}
.menu.active {
  display: flex;
}
.menu-header {
  display: grid;
  grid-template-columns: 1fr max-content;
  text-align: center;
  padding: 7px 0;
  align-items: center;
}
.menu-header-text {
  justify-self: center;
  font-size: 14px;
  font-weight: 600;
}
.menu-header-collapse {
  justify-self: flex-end;
}
.menu-header-collapse::after {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 4px;
  padding-right: 5px;
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(100, 100, 100)" d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z"/></svg>');
}
.menu-body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  overflow-y: auto;
  overflow-x: hidden;
  flex-grow: 1;
  font-size: 14px;
}
.menu-body-list {
  list-style-type: none;
  padding: 0;
}
.menu-body-list-item {
  display: flex;
  padding: 10px;
  cursor: pointer;
  justify-content: space-between;
  position: relative;
}
.menu-body-list-item:hover {
  background: #dfdfdf;
}
.menu-body-list-item div.dropdownIcon::after {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(138, 136, 136)" d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>');
  display: inline-block;
  width: 10px;
  height: 10px;
}
.menu-body-list-item-children {
  display: none;
  padding: 0;
  word-break: break-all;
}
.menu-body-list-item-child {
  padding: 5px 20px;
  cursor: pointer;
}
.menu-body-list-item-child.active {
  background-color: rgb(53, 94, 234);
  color: white;
}
.menu-body-list-item-child:hover {
  background: #dfdfdf;
  color: black;
}
.menu-body-list-item-child:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.menu-body-list-item.active + .menu-body-list-item-children {
  display: block;
}
.menu-footer {
  display: grid;
  grid-template-rows: max-content max-content max-content;
}
.menu-footer-user {
  border-bottom: 1px solid #ccc;
}
.menu-footer-user span.userText {
  position: relative;
  top: 7px;
  left: 16px;
  background-color: #ffffff;
  z-index: 10;
  color: #777;
}
.menu-footer-user .divider {
  border-top: 1px solid #ccc;
}
.menu-footer-user-body {
  padding: 12px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-footer-user-body-account {
  display: flex;
}
.menu-footer-user-body-account-text {
  margin-left: 5px;
  display: flex;
  flex-direction: column;
}
.menu-footer-user-body-account-text span {
  font-weight: bold;
}
.menu-footer-user-body-account-text span span {
  font-weight: normal;
}
.menu-footer-user-body-account::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(53, 94, 234)" d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z"/></svg>');
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
}
.menu-footer-user-body div.setting {
  position: relative;
  display: inline-block;
}
.menu-footer-user-body div.setting.active .setting-dropdownMenu {
  display: block;
}
.menu-footer-user-body div.setting-icon {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(151, 151, 151)" d="M0 128C0 92.7 28.7 64 64 64H256h48 16H576c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H320 304 256 64c-35.3 0-64-28.7-64-64V128zm320 0V384H576V128H320zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1h73.6l8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276H141l19-42.8zM448 164c11 0 20 9 20 20v4h44 16c11 0 20 9 20 20s-9 20-20 20h-2l-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45H448 376c-11 0-20-9-20-20s9-20 20-20h52v-4c0-11 9-20 20-20z"/></svg>');
  cursor: pointer;
  width: 30px;
  height: 30px;
}
.menu-footer-user-body div.setting-dropdownMenu {
  border: 1px solid rgba(53, 94, 234, 0.5);
  border-radius: 4px;
  min-width: 160px;
  position: absolute;
  bottom: 100%;
  right: 0%;
  background-color: white;
  z-index: 2;
  display: none;
}
.menu-footer-user-body div.setting-dropdownMenu a {
  cursor: pointer;
  text-decoration: none;
  display: block;
  padding: 10px;
}
.menu-footer-user-body div.setting-dropdownMenu a:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.menu-footer-user-body div.setting-dropdownMenu a:hover {
  background-color: #eee;
}
.menu-footer-action {
  text-align: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
  display: flex;
}
.menu-footer-action div {
  cursor: pointer;
  height: 30px;
  border-left: 1px solid #ccc;
  display: flex;
  justify-content: center;
  width: 70%;
}
.menu-footer-action div:last-child {
  background: #D6E8FF;
  width: 30%;
}
.menu-footer-action div span {
  align-self: center;
}
.menu-footer-action div span.logout::after {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"/></svg>');
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  top: 2px;
  left: 4px;
}
.menu-footer-copyright {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Login */
.login {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 450px;
  border-width: 0;
  border-radius: 10px;
  background-color: white;
  display: grid;
  grid-template-rows: 1fr 2fr;
  align-content: center;
  justify-items: center;
}
.login-top {
  align-self: center;
}
.login-top-text {
  font-size: 20px;
}
.login-center {
  width: 100%;
}
.login-center-form {
  padding: 0 25px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  justify-content: center;
  align-items: center;
}
.login-center-form div {
  width: 100%;
  display: grid;
  align-content: center;
  grid-template-columns: 1fr 1fr 1fr;
}
.login-center-form div:not(.login-center-form-verification) {
  grid-template-columns: 1fr 3fr;
}
.login-center-form div div:not(.verificationScreen) {
  background: #eee;
  font-weight: bold;
  border-width: 1.5px 0 1.5px 1.5px;
  border-color: #aaaaaa;
  border-style: solid;
  border-radius: 4px 0 0 4px;
  padding: 5px 7px;
}
.login-center-form div div.verificationScreen {
  background: #aaa;
  margin-left: 5px;
}
.login-center-form div input {
  border-width: 1.5px;
  border-color: #aaaaaa;
  border-style: solid;
  border-radius: 0 4px 4px 0;
  line-height: 2;
}
.login-center-form button#loginBtn {
  width: 120px;
  line-height: 2.3;
}
.login-center-form a#forgetPassword {
  color: #bbb;
}

/* Min Menu */
.minMenu {
  position: relative;
  display: none;
  flex-direction: column;
  height: 100vh;
  width: 50px;
  border-right: 1px solid rgba(53, 94, 234, 0.5);
  align-content: center;
  font-size: 14px;
}
.minMenu.active {
  display: flex;
}
.minMenu-header {
  padding: 10px 0;
  text-align: center;
}
.minMenu-header-collapse {
  cursor: pointer;
  display: inline-block;
  width: 15px;
  height: 15px;
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(100, 100, 100)" d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"/></svg>');
}
.minMenu-body {
  flex-grow: 1;
}
.minMenu-body-list {
  list-style-type: none;
  padding: 0;
}
.minMenu-body-list-item {
  display: flex;
  padding: 0px 10px;
  cursor: pointer;
  justify-content: center;
  position: relative;
}
.minMenu-body-list-item:hover {
  background: #dfdfdf;
}
.minMenu-body-list-item-children {
  display: none;
  padding: 0;
  position: absolute;
  top: 0;
  left: 100%;
  width: -moz-max-content;
  width: max-content;
  z-index: 100;
  background: white;
  border: 1px solid rgba(53, 94, 234, 0.5);
  border-radius: 4px;
}
.minMenu-body-list-item-child {
  padding: 5px 20px;
  cursor: pointer;
}
.minMenu-body-list-item-child:hover {
  background: #dfdfdf;
}
.minMenu-body-list-item-child:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.minMenu-body-list-item-child-head {
  padding: 5px 20px;
  font-weight: 600;
  background-color: rgb(53, 94, 234);
  color: white;
}
.minMenu-body-list-item.active .minMenu-body-list-item-children {
  display: block;
}
.minMenu-body-list-item span {
  line-height: 3;
}

/* Alert */
.alert {
  z-index: 99999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.alert-container {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid rgba(170, 170, 170, 0.6);
  border-radius: 4px;
  background-color: white;
  width: 500px;
  height: -moz-max-content;
  height: max-content;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  padding: 10px;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.alert-container-type {
  font-size: 20px;
  font-weight: bold;
}
.alert-container-type[data-type=warning] {
  color: #3d4ddf;
}
.alert-container-type[data-type=success] {
  color: #17df32;
}
.alert-container-type[data-type=error] {
  color: #d3381d;
}
.alert-container-text {
  width: 100%;
  max-height: 85vh;
  overflow: auto;
}
.alert-container-action button {
  width: 80px;
  line-height: 2;
}
.alert-container-action button.no {
  background: #ddd;
  color: #777;
}

/* Fuzzy Select */
.fuzzySelect {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  background-color: white;
  font-size: 14px;
  min-height: 30px;
  outline: none;
  font-size: 14px;
  cursor: pointer;
  border: 1.5px solid #aaaaaa;
  border-radius: 4px;
  outline: none;
  width: 100%;
}
.fuzzySelect.active > .fuzzySelect-dropdown {
  z-index: 100;
}
.fuzzySelect[border-none] {
  border: none !important;
  border-radius: 0 !important;
}
.fuzzySelect[is-table] {
  background-color: transparent !important;
}
.fuzzySelect[is-table][disabled] {
  background: transparent !important;
}
.fuzzySelect[disabled] {
  background: rgb(226, 226, 226) !important;
  cursor: auto;
}
.fuzzySelect[is-edit] {
  background: rgba(94, 177, 255, 0.2);
}
.fuzzySelect[is-error] {
  border: 1px solid red;
  background: rgba(255, 0, 0, 0.1);
}
.close-button {
  position: absolute;
  left: calc(100% - 40px);
  top: calc(50% - 8px);
  font-size: 12px;
  cursor: pointer;
  display: none; /* 初始隐藏 */
}
.fuzzySelect.showX .close-button {
  display: inline-block; /* 显示 X 符号 */
}
.fuzzySelect:not([disabled])::after {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(138, 136, 136)" d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>');
  display: inline-block;
  position: absolute;
  left: calc(100% - 15px);
  top: calc(50% - 6px);
  width: 10px;
  height: 10px;
}
.fuzzySelect-dropdown {
  z-index: 100;
  width: -moz-max-content;
  width: max-content;
  padding: 2px;
  border-radius: 4px;
  border: solid 1.5px #aaaaaa;
  display: block;
  margin: -1.5px;
  position: absolute;
  background: white;
}
.fuzzySelect-dropdown-search {
  width: 100%;
  display: block;
  margin-bottom: 5px;
}
.fuzzySelect-dropdown-list {
  max-height: 250px;
  padding: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}
.fuzzySelect-dropdown-list div.optionSingle.checked {
  background: rgb(53, 94, 234);
  color: white;
}
.fuzzySelect-dropdown-list div.optionSingle.checked span.del {
  float: right;
  margin-right: 10px;
  position: relative;
  top: 2px;
  cursor: pointer;
}
.fuzzySelect-dropdown-list div {
  border-radius: 4px;
}
.fuzzySelect-dropdown-list div:not(.fuzzySelect-dropdown-list-allSelector) {
  padding: 5px;
}
.fuzzySelect-dropdown-list div:hover {
  background-color: rgb(53, 94, 234);
  color: white;
}
.fuzzySelect-dropdown-list-allSelector {
  border-bottom: 1px solid #ccc;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  padding: 5px;
}
.fuzzySelect .labelContainer {
  width: 100%;
  margin-right: 20px;
}
.fuzzySelect .labelContainer span.optionLabelSingle {
  line-height: 2.1;
  padding: 0 3px;
}
.fuzzySelect .labelContainer span.optionLabel, .fuzzySelect .labelContainer span.optionLabelSingle:has(span.del) {
  line-height: 1.5;
  color: white;
  background-color: rgb(53, 94, 234);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin: 2px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  white-space: nowrap;
}
.fuzzySelect .labelContainer span.optionLabel span.del, .fuzzySelect .labelContainer span.optionLabelSingle span.del {
  margin-left: 10px;
  position: relative;
  top: -1px;
}
.fuzzySelect .labelContainer span.optionLabel span.del:hover, .fuzzySelect .labelContainer span.optionLabelSingle span.del:hover {
  color: #e98484;
}

.errorMessage {
  display: block;
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  color: #fc3c3c;
}

/* Form */
.form {
  width: 100%;
  display: grid;
  grid-template-rows: max-content max-content;
  row-gap: 10px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.form:not(.active) {
  row-gap: 0;
}
.form:not(.active) > .form-title span::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(138, 136, 136)" d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>');
  margin: 0 10px;
  display: inline-block;
  position: relative;
  top: -2px;
  width: 15px;
  width: 15px;
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.form.active > .form-content, .form-table {
  display: grid;
}
.form.active > .form-table {
  display: block;
}
.form-title {
  padding: 5px;
}
.form-title span {
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
}
.form-title span::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(138, 136, 136)" d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>');
  margin: 0 10px;
  display: inline-block;
  position: relative;
  top: 2px;
  width: 15px;
  width: 15px;
  transform: rotate(0);
  transition: transform 0.3s ease;
}
.form-row {
  float: right;
  padding: 5px;
}
.form-content, .form-table {
  display: none;
  row-gap: 10px;
  -moz-column-gap: 10px;
       column-gap: 10px;
  padding: 0 10px 10px 10px;
}
.form-content[data-row='1'], .form-table[data-row='1'] {
  grid-template-columns: 1fr;
}
.form-content[data-row='2'], .form-table[data-row='2'] {
  grid-template-columns: 1fr 1fr;
}
.form-content[data-row='3'], .form-table[data-row='3'] {
  grid-template-columns: 1fr 1fr 1fr;
}
.form-content-item, .form-table-item {
  display: grid;
  grid-template-columns: 140px 10fr 0.4fr max-content;
  align-items: center;
  -moz-column-gap: 3px;
       column-gap: 3px;
}
.form-content-item-title, .form-table-item-title {
  justify-self: flex-end;
  text-align: right;
  word-wrap: break-word;
}
.form-content-item .max-length.overflow, .form-table-item .max-length.overflow {
  color: red;
}
.form-table {
  display: none;
  padding: 0 10px 10px 10px;
}

/* Select Dialog */
.selectDialog, .dialog {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.selectDialog-container, .dialog-container {
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid rgba(170, 170, 170, 0.6);
  border-radius: 4px;
  background-color: white;
  padding: 15px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.selectDialog-container[size=full], .dialog-container[size=full] {
  width: 100vw;
  height: 100vh;
}
.selectDialog-container[size=large], .dialog-container[size=large] {
  width: 90vw;
  height: 90vh;
}
.selectDialog-container[size=small], .dialog-container[size=small] {
  width: 30vw;
  height: 30vh;
}
.selectDialog-container-title, .dialog-container-title {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}
.selectDialog-container-confirmButton, .dialog-container-confirmButton {
  width: 60px;
}

/* Column Setting */
.columnSetting {
  display: flex;
  -moz-column-gap: 10px;
       column-gap: 10px;
  width: 50vw;
}
.columnSetting-left, .columnSetting-right {
  background: white;
  flex-grow: 1;
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.columnSetting-left-header, .columnSetting-right-header {
  display: flex;
  align-items: center;
  background-color: #e9e9e9;
  padding-left: 5px;
  line-height: 1.5;
}
.columnSetting-left-header input[type=checkbox], .columnSetting-right-header input[type=checkbox] {
  margin-right: 5px;
}
.columnSetting-left-content, .columnSetting-right-content {
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
.columnSetting-left-content > ul, .columnSetting-right-content > ul {
  width: 100%;
  margin-top: 5px;
  padding: 0 5px;
  list-style: none;
}
.columnSetting-left-content > ul > li, .columnSetting-right-content > ul > li {
  display: flex;
  line-height: 1;
  text-align: left;
  padding: 4px 0;
}
.columnSetting-left-content > ul > li > input[type=checkbox], .columnSetting-right-content > ul > li > input[type=checkbox] {
  margin-right: 5px;
}
.columnSetting-left-content > ul > li > input[type=checkbox][disabled=true], .columnSetting-right-content > ul > li > input[type=checkbox][disabled=true] {
  cursor: auto;
}
.columnSetting-left-content > ul > li > input[type=checkbox][disabled=true] + span, .columnSetting-right-content > ul > li > input[type=checkbox][disabled=true] + span {
  color: rgb(100, 100, 100);
}
.columnSetting-left-content > ul > li > span, .columnSetting-right-content > ul > li > span {
  flex-grow: 1;
}
.columnSetting-left-content > ul > li > .dropBtn, .columnSetting-right-content > ul > li > .dropBtn, .columnSetting-right-content > ul > li > span {
  cursor: move;
}
.columnSetting-left-content > ul > li > .dropBtn::after, .columnSetting-right-content > ul > li > .dropBtn::after {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(190, 190, 190)" d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>');
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
}
.columnSetting-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 10px;
}
.columnSetting-center > button {
  width: 50px;
}

.dragging {
  opacity: 0.5;
  transform: scale(1.05);
}

.placeholder {
  background-color: #e0e0e0;
  border: 2px dashed #aaa;
}

.newTab {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  padding: 0 20px;
  background: #ffffff;
}

/* Loading */
.loading {
  display: block;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.loading-container {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid rgba(170, 170, 170, 0.6);
  border-radius: 4px;
  background-color: white;
  width: 300px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.loading-container-icon {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="rgb(82, 82, 82)" d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z"/></svg>');
  width: 50px;
  height: 50px;
  animation: spin 0.9s ease-out infinite;
}
.loading-container h1 {
  color: rgb(82, 82, 82);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.buttonList {
  padding: 5px;
  background-color: #D6E8FF;
  border-radius: 5px;
}
.buttonList-prefix {
  margin-right: 7px;
  margin-left: 5px;
}

/* Identify Code */
.code {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  border-radius: 3px;
  box-shadow: 0 0 1px #e0e0e0;
  transition: all 0.15s;
  cursor: pointer;
}
.code:hover {
  background-color: #f5f5f5;
  box-shadow: 0 2px 5px #e0e0e0;
}
.code:active {
  box-shadow: 0 0 1px #9e9e9e;
}
.code canvas {
  display: inline-block;
  height: 45px;
  border: 1px solid #ddd;
  vertical-align: middle;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Query Layout */
.queryPage {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
/* Add Layout */
.addPage {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  padding: 10px 0;
}
.addPage-container {
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
.addPage-block {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
.addPage-block-title span {
  font-size: 20px;
  font-weight: 500;
}

.page {
  display: flex;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}
.page-body {
  flex-grow: 1;
  display: grid;
  grid-template-rows: 3% 97%;
  overflow-y: auto;
  overflow-x: hidden;
}
.page-body-breadcrumb {
  min-height: 17px;
  padding: 0 20px;
}
.page-body-content {
  padding: 10px 20px;
}
.page-body-content nav.menu.active {
  background: red;
}