@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;0,6..12,1000;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700;1,6..12,800;1,6..12,900;1,6..12,1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Expletus+Sans:ital,wght@0,400..700;1,400..700&display=swap");
h1, h2, h3, h4, h5, h6, input, button, textarea, select, p, blockquote, th, td, pre, address, li, dt, dd {
  font-size: 100%;
  -webkit-text-size-adjust: none;
}

header, section, footer, aside, nav, main, article, figure {
  display: block;
  padding: 0;
  margin: 0;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-decoration: none;
  cursor: pointer;
}

a:hover, a:active {
  color: #60C6FF;
  text-decoration: none;
}

a:not([target*=_blank]) {
  transition: all 0.3s ease;
}

a:not([target*=_blank]):hover {
  opacity: 0.7;
}

button {
  cursor: pointer;
  transition: all 0.3s ease;
}
button:hover {
  opacity: 0.7;
}

p {
  line-height: 1.6;
  letter-spacing: inherit;
  word-wrap: break-word;
  word-break: break-word;
  margin-bottom: 15px;
}

p:empty {
  display: none !important;
}

body, html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  overflow-x: auto;
}

.wrapper {
  overflow: hidden;
}

.inner {
  max-width: 1170px;
  margin: 0 auto;
}

*, ::after, ::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 14px;
  line-height: 1.5;
  color: #ccc;
  -webkit-text-size-adjust: none;
  background: #000;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}

a {
  color: #ccc;
  text-decoration: none;
}

table {
  border-collapse: separate;
}

.tbl-fix {
  table-layout: fixed;
}

img {
  max-width: 100%;
}

input, button, textarea, select {
  font-size: 14px;
}

select {
  border: none;
  outline: none;
  color: #c2c2c2;
  border-bottom: 1px solid #6d6d6d;
  background: url(../images/angle-down-solid.svg) no-repeat top 9px right/8px auto;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;
  min-width: 80px;
  cursor: pointer;
}
select option {
  background: #000;
}
select::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
select::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
select::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}

input {
  border: none;
  outline: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid #6d6d6d;
  color: #c2c2c2;
  font-family: "Nunito Sans", sans-serif;
}

input[type=file] {
  border-bottom: none;
}

input[type=hidden] {
  display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  caret-color: #fff;
  transition: background-color 600000s ease-in-out 0s;
  background: transparent;
  -webkit-text-fill-color: #fff;
}

input[name=date] {
  padding: 0 0 2px 0;
  color: #ccc;
  font-size: 13px;
  border: none;
  outline: none;
  width: 100%;
  border-bottom: 1px solid #6d6d6d;
  background: url(../images/calendar-day-solid.svg) no-repeat bottom 4px right/16px auto;
  height: 24px;
}

textarea {
  outline: none;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #2b2b2b;
  padding: 5px;
  color: #c2c2c2;
  max-width: 100%;
}
textarea.form-control {
  min-height: 100px;
}
textarea::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
textarea::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}

.df {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.no-wrap {
  flex-wrap: nowrap;
}

.d-grid {
  display: grid;
  gap: 15px;
}

.jc-c {
  justify-content: center;
}

.jc-fs {
  justify-content: flex-start;
}

.jc-fn {
  justify-content: flex-end;
}

.ai-c {
  align-items: center;
}

.ai-n {
  align-items: flex-end;
}

.ai-fs {
  align-items: flex-start;
}

.flexd-c {
  flex-direction: column;
}

.fl-r {
  float: right;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-vrl {
  writing-mode: vertical-rl;
}

.text-vlr {
  writing-mode: vertical-lr;
}

.text-htb {
  writing-mode: horizontal-tb;
}

.vt-middle {
  vertical-align: middle;
}

.txt-red {
  color: #E94434 !important;
}

.bold {
  font-weight: bold;
}

.img-circle {
  border-radius: 50%;
}

.txt-cl-dark-blue {
  color: #60C6FF;
}

.highlight-red {
  color: #E94434 !important;
}

.highlight-green {
  color: #008b00;
}

.disabled-tag {
  opacity: 0.5 !important;
}

.ovf-auto {
  overflow: auto;
}
.ovf-auto::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.ovf-auto::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.ovf-auto::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}

.ml-auto {
  margin-left: auto;
}

.dl-table {
  display: table;
}

.mr20 {
  margin-right: 20px;
}

.txt-blue {
  color: #60C6FF;
}

.loading__dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  margin: 0.5rem;
  animation: loading 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes loading {
  0%, 100% {
    transform: translatey(-7px);
    background-color: #ededed;
  }
  50% {
    transform: translatey(7px);
    background-color: #434343;
  }
}
.loading div:nth-child(1) {
  animation-delay: 0.3s;
}

.loading div:nth-child(2) {
  animation-delay: 0.6s;
}

.loading div:nth-child(3) {
  animation-delay: 0.9s;
}

header.header {
  position: fixed;
  top: 0;
  left: 250px;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px 0;
  z-index: 10012;
  transition: all 0.5s ease;
}
header.header.active {
  background: #000;
  padding: 8px 30px;
  border-bottom: 1px solid #2b2b2b;
}
header.header.header-full {
  left: 0;
}

.header-right {
  display: flex;
  align-items: center;
}
.header-right .hd-txt {
  color: #fff;
  margin-right: 15px;
  margin-bottom: 0;
  padding-top: 4px;
}
.header-right .hd-box-switch {
  margin-right: 15px;
  position: relative;
  cursor: pointer;
}
.header-right .hd-box-switch:hover .tooltiptext {
  visibility: visible;
}
.header-right .hd-box-switch .tooltiptext {
  visibility: hidden;
  width: 120px;
  background: #1E1E1E;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: calc(100% + 10px);
}
.header-right .hd-box-switch .tooltiptext::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  right: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #1E1E1E;
  border-right: 0;
}
.header-right .hd-switch-theme {
  width: 20px;
  height: 23px;
}
.header-right .hd-switch-theme span {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.header-right .hd-switch-theme .icon01 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23fff'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.header-right .hd-switch-theme .icon02 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.149' height='22.15' viewBox='0 0 22.149 22.15'%3E%3Cpath id='icon-light-mode' d='M-3567.931-12.729V-15.97a.81.81,0,0,1,.81-.811.811.811,0,0,1,.811.811v3.241a.811.811,0,0,1-.811.811A.81.81,0,0,1-3567.931-12.729Zm7.687-1.972-2.292-2.292a.809.809,0,0,1,0-1.146.809.809,0,0,1,1.146,0l2.292,2.291a.811.811,0,0,1,0,1.147.81.81,0,0,1-.573.237A.807.807,0,0,1-3560.244-14.7Zm-14.516-.382a.809.809,0,0,1,0-1.146l2.292-2.292a.812.812,0,0,1,1.146,0,.812.812,0,0,1,0,1.147l-2.292,2.291a.808.808,0,0,1-.573.238A.806.806,0,0,1-3574.76-15.083Zm3.453-7.64a4.591,4.591,0,0,1,4.592-4.592,4.592,4.592,0,0,1,4.592,4.592,4.592,4.592,0,0,1-4.592,4.593A4.592,4.592,0,0,1-3571.307-22.723Zm11.479.811a.81.81,0,0,1-.81-.811.81.81,0,0,1,.81-.81h3.242a.81.81,0,0,1,.81.81.81.81,0,0,1-.81.811Zm-17.287,0a.81.81,0,0,1-.81-.811.81.81,0,0,1,.81-.81h3.242a.81.81,0,0,1,.81.81.81.81,0,0,1-.81.811Zm4.646-5.013-2.292-2.291a.81.81,0,0,1,0-1.147.811.811,0,0,1,1.146,0l2.292,2.292a.811.811,0,0,1,0,1.146.808.808,0,0,1-.573.238A.808.808,0,0,1-3572.469-26.925Zm9.932-.382a.811.811,0,0,1,0-1.146l2.292-2.292a.809.809,0,0,1,1.146,0,.81.81,0,0,1,0,1.146l-2.292,2.292a.806.806,0,0,1-.573.238A.808.808,0,0,1-3562.537-27.307Zm-5.395-2.709v-3.242a.81.81,0,0,1,.81-.81.81.81,0,0,1,.811.81v3.242a.81.81,0,0,1-.811.81A.81.81,0,0,1-3567.931-30.016Z' transform='translate(3577.925 34.068)' fill='%23a7a7a7'/%3E%3C/svg%3E%0A") no-repeat center/contain;
}
.header-right .hd-box-bell {
  margin-right: 25px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.header-right .hd-box-bell .h_dot {
  position: absolute;
  top: -4px;
  left: calc(100% - 8px);
  padding: 2px 2px 1px;
  border-radius: 4px;
  background: #b00020;
  font-size: 9px;
  color: #fff;
  line-height: 1;
  border: 1px solid #000;
  min-width: 16px;
  text-align: center;
}
.header-right .hd-box-bell .hd-icon-notification {
  width: 20px;
  height: 21px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23fff'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.header-right .hd-box-bell .dropdown-menu-notification {
  position: absolute;
  top: calc(100% + 10px);
  width: 445px;
  right: -27px;
  background: #333;
  border-radius: 6px;
  z-index: 1006;
}
.header-right .hd-box-bell .dropdown-menu-notification::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 30px;
  top: -6px;
  z-index: 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #333;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-header {
  padding: 10px;
  border-bottom: 1px solid #4c4c4c;
  font-weight: bold;
  font-size: 17px;
  color: #fff;
  display: flex;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-header .sum {
  background: #B60000;
  color: #ffffff;
  padding: 2px 6px 0;
  border-radius: 4px;
  margin-left: 10px;
  margin-top: 3px;
  font-weight: normal;
  font-size: 70%;
  height: 20px;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-header .filter-notice {
  margin-left: auto;
  margin-right: 0px;
  display: flex;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-header .filter-notice .btnSelectionPlan {
  padding-top: 0px;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-header .filter {
  position: relative;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-header .filter-list {
  position: absolute;
  top: 30px;
  right: 0;
  background: #272727;
  border-radius: 6px;
  height: auto;
  width: 120px;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-header .filter-list li {
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-header .filter-list li.active, .header-right .hd-box-bell .dropdown-menu-notification .popover-header .filter-list li:hover {
  background: #6d6d6d;
  color: #fff;
}
.header-right .hd-box-bell .dropdown-menu-notification .message-data .box-info {
  font-weight: 500;
  color: #fff;
}
.header-right .hd-box-bell .dropdown-menu-notification ul {
  overflow: auto;
  height: 60vh;
}
.header-right .hd-box-bell .dropdown-menu-notification ul::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.header-right .hd-box-bell .dropdown-menu-notification ul::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.header-right .hd-box-bell .dropdown-menu-notification ul::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
.header-right .hd-box-bell .dropdown-menu-notification ul::-webkit-scrollbar-thumb {
  background-color: #1a1a1a;
}
.header-right .hd-box-bell .dropdown-menu-notification ul li:not(:last-child) {
  border-bottom: 1px solid #4c4c4c;
}
.header-right .hd-box-bell .dropdown-menu-notification ul li .data {
  padding: 10px;
  display: block;
}
.header-right .hd-box-bell .dropdown-menu-notification ul li .data:hover {
  color: inherit;
  opacity: 1;
  background: #6d6d6d;
  color: #fff;
}
.header-right .hd-box-bell .dropdown-menu-notification .small-info {
  margin-top: 10px;
  font-size: 11px;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-footer {
  position: relative;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-footer a {
  border-top: 1px solid #4c4c4c;
  text-align: center;
  display: block;
  padding: 10px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  color: #60c6ff;
  font-size: 12px;
  font-weight: 500;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-footer a:hover {
  opacity: 1;
  color: inherit;
  background: #a8a8a8;
  color: #000;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-footer .clear-notice {
  background: #ccc;
  color: #000;
  padding: 4px 6px 0;
  border-radius: 4px;
  margin-left: auto;
  font-weight: normal;
  font-size: 70%;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
}
.header-right .hd-box-bell .dropdown-menu-notification .popover-footer .clear-notice:hover {
  background: #a8a8a8;
}
.header-right .hd-user {
  position: relative;
  cursor: pointer;
}
.header-right .hd-user .hd-icon-moon {
  width: 30px;
  height: 30px;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #a7a7a7;
}
.header-right .hd-user .gr-user-info {
  position: absolute;
  top: calc(100% + 10px);
  width: 210px;
  right: -20px;
  background: #333;
  padding: 15px;
  border-radius: 6px;
  z-index: 1005;
}
.header-right .hd-user .gr-user-info::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 30px;
  top: -6px;
  z-index: 0;
  width: 0;
  height: 0;
  border-left: 6px solid rgba(0, 0, 0, 0);
  border-right: 6px solid rgba(0, 0, 0, 0);
  border-bottom: 6px solid #333;
}
.header-right .hd-user .gr-user-info.box-chart-open {
  width: auto;
}
.header-right .hd-user .gr-user-info figure {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto 8px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.15);
}
.header-right .hd-user .gr-user-info .user-name {
  text-align: center;
}
.header-right .hd-user .gr-user-info .btn-sign-out {
  margin: 15px auto 0;
  width: 100%;
}
.header-right .hd-user .gr-user-info .btn-sign-out i {
  margin-right: 8px;
}
.header-right .hd-user .gr-user-info .nav-right-ct {
  margin-bottom: 0;
  margin-right: 15px;
  max-height: calc(100vh - 110px);
}
.header-right .hd-user .gr-user-info .nav-right-ct li {
  padding-right: 21px;
  white-space: nowrap;
}
.header-right .hd-user .gr-user-info .iconHideChart {
  position: absolute;
  top: 15px;
  right: 10px;
}
.header-right .document {
  margin-right: 15px;
  padding: 1px 12px 2px;
  background: #232b3e;
  border-radius: 4px;
}
.header-right .document .icon {
  width: 15px;
  display: block;
  margin-right: 6px;
  line-height: 0;
  color: #fff;
}
.header-right .document:hover {
  color: #fff;
}

/********************************
Menu Toogle
********************************/
.hamburger-btn {
  width: 66px;
  position: relative;
  cursor: pointer;
}
.hamburger-btn .button-toggle {
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: inherit;
}
.hamburger-btn .button-toggle #menu_btn {
  color: #fff;
  font-size: 13px;
  text-align: center;
  line-height: 1;
  letter-spacing: 0px;
}

.menu_toggle {
  transition: 0.6s;
  transform: translateX(0);
}
.menu_toggle.active {
  pointer-events: auto;
  transform: translateX(-120%);
}
.menu_toggle ul li {
  position: relative;
  overflow: hidden;
}

#nav-icon {
  width: 26px;
  height: 18px;
  position: relative;
  margin: 0 auto 0px;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}
#nav-icon span {
  background-color: #fff;
  display: block;
  position: absolute;
  height: 2px;
  border-radius: 6px;
  width: 100%;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
#nav-icon span:nth-child(1) {
  top: 0;
}
#nav-icon span:nth-child(2) {
  top: 8px;
}
#nav-icon span:nth-child(3) {
  top: 16px;
}
#nav-icon.open span:nth-child(2) {
  width: 80%;
}
#nav-icon.open span:nth-child(3) {
  width: 60%;
}

@media screen and (max-width: 1024px) {
  .menu_toggle nav > ul > li {
    border-bottom: 1px solid #2b2b2b;
  }
}
.LightMode header .header-right .hd-box-bell .hd-icon-notification {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23a7a7a7'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z'/%3E%3C/svg%3E");
}
.LightMode header .header-right .document {
  background: #7b8cb4;
  color: #fff;
}

aside {
  width: 250px;
  background: #161616;
  position: fixed;
  left: 0;
  top: 0;
  height: calc(100vh - 60px);
  padding: 30px 20px;
  z-index: 10010;
  overflow: auto;
}
aside::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
aside::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
aside::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
aside .logo {
  width: 200px;
  margin-bottom: 18px;
  cursor: pointer;
}
aside nav li {
  position: relative;
  z-index: 0;
}
aside nav li i {
  margin-right: 10px;
  font-size: 14px;
  width: 16px;
  text-align: center;
}
aside nav li p#menu-377 i, aside nav li p#menu-1480 i {
  font-size: 15px;
}
aside nav > ul > li > a::before, aside nav > ul > li > .title::before {
  left: 0;
  top: 8px;
}
aside nav > ul > li.submenu ul {
  display: none;
}
aside nav > ul > li.submenu ul.active {
  display: block;
}
aside nav > ul > li.submenu .title::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 15px;
  right: 0;
  width: 11px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23919191'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E") no-repeat top/contain;
  transition: all 0.3s ease;
  transform: rotate(180deg);
}
aside nav > ul > li.submenu .title.active::after {
  transform: rotate(0);
}
aside nav > ul > li.submenu .title.active::after, aside nav > ul > li.submenu .title:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23fff'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E");
}
aside nav > ul > li.submenu .menu-monthly .title::after {
  content: none;
}
aside nav > ul > li.submenu ul li a.active::before, aside nav > ul > li.submenu ul li a:hover::before {
  background: #fff;
}
aside nav > ul > li.submenu > ul > li > a, aside nav > ul > li.submenu > ul > li > .title {
  padding-left: 31px;
}
aside nav > ul > li.submenu > ul > li > a::before, aside nav > ul > li.submenu > ul > li > .title::before {
  left: 14px;
}
aside nav > ul > li.submenu > ul > li a::before, aside nav > ul > li.submenu > ul > li .title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 16px;
  width: 4px;
  height: 4px;
  background: #919191;
  border-radius: 50%;
}
aside nav > ul > li.submenu > ul > li > ul > li > a, aside nav > ul > li.submenu > ul > li > ul > li > .title {
  padding-left: 42px;
}
aside nav > ul > li.submenu > ul > li > ul > li > a::before, aside nav > ul > li.submenu > ul > li > ul > li > .title::before {
  left: 28px;
}
aside nav > ul > li.submenu > ul > li > ul > li > ul > li > a, aside nav > ul > li.submenu > ul > li > ul > li > ul > li > .title {
  padding-left: 62px;
}
aside nav > ul > li.submenu > ul > li > ul > li > ul > li > a::before, aside nav > ul > li.submenu > ul > li > ul > li > ul > li > .title::before {
  left: 46px;
}
aside nav > ul > li.submenu > ul > li > ul > li > ul > li > ul > li > a, aside nav > ul > li.submenu > ul > li > ul > li > ul > li > ul > li > .title {
  padding-left: 82px;
}
aside nav > ul > li.submenu > ul > li > ul > li > ul > li > ul > li > a::before, aside nav > ul > li.submenu > ul > li > ul > li > ul > li > ul > li > .title::before {
  left: 64px;
}
aside nav .title {
  margin-bottom: 0;
}
aside nav a, aside nav .title {
  color: #919191;
  line-height: 1.5;
  font-weight: 500;
  display: block;
  padding: 9px 11px 10px 0;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  cursor: pointer;
}
aside nav a.active, aside nav .title.active {
  color: #fff;
}
aside nav a:hover, aside nav .title:hover {
  color: #fff;
  opacity: 1 !important;
}

.left-menu-dashboard-bottom {
  top: auto;
  left: 0;
  bottom: 0;
  height: 60px;
  padding: 0 20px;
}
.left-menu-dashboard-bottom a {
  display: flex;
}
.left-menu-dashboard-bottom img {
  width: 15px;
  margin-right: 13px;
  margin-left: 2px;
}
.left-menu-dashboard-bottom i {
  padding-top: 3px;
  padding-left: 3px;
  margin-right: 13px;
}

.centralized-option-filter {
  width: 234px;
  background: rgba(0, 0, 0, 0.9);
  position: fixed;
  left: 8px;
  top: 115px;
  z-index: 10011;
  overflow: initial;
  padding: 12px 15px 15px;
  border: 1px solid #2b2b2b;
  border-radius: 6px;
  box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.1);
}
.centralized-option-filter::before {
  content: "";
  position: absolute;
  top: 7px;
  right: -9px;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 8px solid rgba(0, 0, 0, 0);
  border-bottom: 8px solid rgba(0, 0, 0, 0);
  border-left: 8px solid #666;
  border-right: 0;
}
.centralized-option-filter .aside-button-close {
  border: none;
  margin-left: auto;
  display: table;
  width: 12px;
  height: 12px;
  background: url(../images/close.png) no-repeat 0 0/contain;
}
.centralized-option-filter .filter-tooltip-title {
  color: #fff;
  font-weight: bold;
  padding-bottom: 3px;
  font-size: 16px;
  border-bottom: 1px solid #2b2b2b;
}
.centralized-option-filter .aside_filter {
  max-height: calc(100vh - 235px);
  overflow: auto;
}
.centralized-option-filter .aside_filter::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.centralized-option-filter .aside_filter::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.centralized-option-filter .aside_filter::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
.centralized-option-filter .aside_filter .info {
  font-size: 12px;
  line-height: 1.3;
  color: #60c6ff;
  border-bottom: 1px solid #2b2b2b;
  padding: 5px 0 3px;
  margin-bottom: 0;
}
.centralized-option-filter .aside_filter .info .ttl {
  margin-right: 5px;
  color: #ccc;
}
.centralized-option-filter .aside_filter .info .txt-value {
  color: #60c6ff;
}
.centralized-option-filter .aside_filter .info .list {
  margin-top: 1px;
}
.centralized-option-filter .aside_filter .info .list li {
  position: relative;
  padding-left: 18px;
}
.centralized-option-filter .aside_filter .info .list li:not(:last-child) {
  margin-bottom: 2px;
}
.centralized-option-filter .aside_filter .info .list li::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 10px;
  top: 5px;
  width: 3px;
  height: 3px;
  background: #60c6ff;
}
.centralized-option-filter .aside_filter .info .list .note {
  background: #292929;
  padding: 5px 8px;
  border-radius: 4px;
  margin-bottom: 2px;
  width: calc(100% - 10px);
  margin-left: 10px;
}
.centralized-option-filter .aside_filter .info .info {
  margin-left: 8px;
  margin-right: 8px;
}
.centralized-option-filter .aside_filter .info .info:last-child {
  border-bottom: none;
}
.centralized-option-filter .aside_filter .info .info .ttl {
  position: relative;
  z-index: 0;
  padding-left: 10px;
  color: #60c6ff;
}
.centralized-option-filter .aside_filter .info .info .ttl::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 7px;
  left: 0;
  width: 6px;
  height: 1px;
  background: #60c6ff;
}
.centralized-option-filter .aside_filter .info .info .ttl.ttl-order {
  padding-left: 0;
}
.centralized-option-filter .aside_filter .info .info .ttl.ttl-order::before {
  content: none;
}
.centralized-option-filter .aside_filter .info .info .ttl .ttl-name {
  color: #ccc;
}
.centralized-option-filter .aside_filter .info-multiple .ttl {
  display: block;
  margin-right: 0;
}

@media screen and (max-width: 1024px) {
  header.header {
    left: 0;
  }
  aside {
    padding-top: 80px;
  }
  .menu_toggle {
    transform: translate(0, 0);
    width: auto;
    left: 0;
    right: 0;
  }
  .menu_toggle.active {
    transform: translate(0, -120%);
    height: 100% !important;
  }
  .menu_toggle .logo {
    margin-left: auto;
    margin-right: auto;
  }
}
.wrapper-login .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: url(../images/bg-login.png) no-repeat center/cover;
  padding: 30px 30px;
}

.content-confim-login {
  background: #161616;
}
.content-confim-login h2 {
  color: #E94434;
}
.content-confim-login .btn-confim-login {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.wp-login-session input:-webkit-autofill,
.wp-login-session input:-webkit-autofill:hover,
.wp-login-session input:-webkit-autofill:focus,
.wp-login-session input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #161616 inset;
  box-shadow: 0 0 0 30px #161616 inset;
}

.box-session {
  text-align: center;
}
.box-session h2 {
  font-size: 26px;
  padding-bottom: 10px;
  margin-bottom: 13px;
  border-bottom: 1px solid #333;
  font-weight: bold;
  line-height: 1;
}

.content-login {
  width: 100%;
  max-width: 450px;
  height: 490px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px 45px;
  background: rgba(16, 16, 16, 0.55);
  border-radius: 10px;
  animation: zoom-in 0.5s forwards cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
.content-login .text-error-password {
  color: #ccc;
}

#cboxContent .content-login {
  border-radius: 0;
  background: #161616;
  animation: none;
  max-width: none;
}

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.login-item1 {
  width: 100%;
}

.gr-logo-login {
  text-align: center;
  margin-bottom: 45px;
}

.logo-login {
  width: 50px;
  margin: 0 auto 8px;
  animation: opacity-shown 3.2s forwards;
}

.logo-login-ttl {
  color: #EB222B;
  font-size: 26px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Expletus Sans", cursive;
}

.ttl-animation02 {
  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
.ttl-animation02 span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}
.ttl-animation02 span:nth-child(1) {
  animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(2) {
  animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(3) {
  animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(4) {
  animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(5) {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(6) {
  animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(7) {
  animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(8) {
  animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(9) {
  animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(10) {
  animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(11) {
  animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(12) {
  animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(13) {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(14) {
  animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(15) {
  animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(16) {
  animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(17) {
  animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(18) {
  animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(19) {
  animation: fade-in 0.8s 1.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(20) {
  animation: fade-in 0.8s 2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(21) {
  animation: fade-in 0.8s 2.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(22) {
  animation: fade-in 0.8s 2.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(23) {
  animation: fade-in 0.8s 2.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(24) {
  animation: fade-in 0.8s 2.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(25) {
  animation: fade-in 0.8s 2.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(26) {
  animation: fade-in 0.8s 2.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(27) {
  animation: fade-in 0.8s 2.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(28) {
  animation: fade-in 0.8s 2.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(29) {
  animation: fade-in 0.8s 2.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(30) {
  animation: fade-in 0.8s 3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(31) {
  animation: fade-in 0.8s 3.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(32) {
  animation: fade-in 0.8s 3.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(33) {
  animation: fade-in 0.8s 3.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(34) {
  animation: fade-in 0.8s 3.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(35) {
  animation: fade-in 0.8s 3.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(36) {
  animation: fade-in 0.8s 3.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(37) {
  animation: fade-in 0.8s 3.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(38) {
  animation: fade-in 0.8s 3.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(39) {
  animation: fade-in 0.8s 3.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(40) {
  animation: fade-in 0.8s 4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(41) {
  animation: fade-in 0.8s 4.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(42) {
  animation: fade-in 0.8s 4.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(43) {
  animation: fade-in 0.8s 4.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(44) {
  animation: fade-in 0.8s 4.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(45) {
  animation: fade-in 0.8s 4.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(46) {
  animation: fade-in 0.8s 4.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(47) {
  animation: fade-in 0.8s 4.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(48) {
  animation: fade-in 0.8s 4.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(49) {
  animation: fade-in 0.8s 4.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(50) {
  animation: fade-in 0.8s 5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(51) {
  animation: fade-in 0.8s 5.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(52) {
  animation: fade-in 0.8s 5.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(53) {
  animation: fade-in 0.8s 5.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(54) {
  animation: fade-in 0.8s 5.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(55) {
  animation: fade-in 0.8s 5.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(56) {
  animation: fade-in 0.8s 5.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(57) {
  animation: fade-in 0.8s 5.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(58) {
  animation: fade-in 0.8s 5.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(59) {
  animation: fade-in 0.8s 5.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(60) {
  animation: fade-in 0.8s 6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(61) {
  animation: fade-in 0.8s 6.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(62) {
  animation: fade-in 0.8s 6.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(63) {
  animation: fade-in 0.8s 6.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(64) {
  animation: fade-in 0.8s 6.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(65) {
  animation: fade-in 0.8s 6.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(66) {
  animation: fade-in 0.8s 6.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(67) {
  animation: fade-in 0.8s 6.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(68) {
  animation: fade-in 0.8s 6.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(69) {
  animation: fade-in 0.8s 6.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(70) {
  animation: fade-in 0.8s 7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(71) {
  animation: fade-in 0.8s 7.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(72) {
  animation: fade-in 0.8s 7.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(73) {
  animation: fade-in 0.8s 7.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(74) {
  animation: fade-in 0.8s 7.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(75) {
  animation: fade-in 0.8s 7.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(76) {
  animation: fade-in 0.8s 7.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(77) {
  animation: fade-in 0.8s 7.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(78) {
  animation: fade-in 0.8s 7.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(79) {
  animation: fade-in 0.8s 7.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(80) {
  animation: fade-in 0.8s 8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(81) {
  animation: fade-in 0.8s 8.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(82) {
  animation: fade-in 0.8s 8.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(83) {
  animation: fade-in 0.8s 8.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(84) {
  animation: fade-in 0.8s 8.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(85) {
  animation: fade-in 0.8s 8.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(86) {
  animation: fade-in 0.8s 8.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(87) {
  animation: fade-in 0.8s 8.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(88) {
  animation: fade-in 0.8s 8.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(89) {
  animation: fade-in 0.8s 8.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(90) {
  animation: fade-in 0.8s 9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(91) {
  animation: fade-in 0.8s 9.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(92) {
  animation: fade-in 0.8s 9.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(93) {
  animation: fade-in 0.8s 9.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(94) {
  animation: fade-in 0.8s 9.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(95) {
  animation: fade-in 0.8s 9.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(96) {
  animation: fade-in 0.8s 9.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(97) {
  animation: fade-in 0.8s 9.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(98) {
  animation: fade-in 0.8s 9.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(99) {
  animation: fade-in 0.8s 9.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(100) {
  animation: fade-in 0.8s 10s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(101) {
  animation: fade-in 0.8s 10.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(102) {
  animation: fade-in 0.8s 10.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(103) {
  animation: fade-in 0.8s 10.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(104) {
  animation: fade-in 0.8s 10.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(105) {
  animation: fade-in 0.8s 10.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(106) {
  animation: fade-in 0.8s 10.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(107) {
  animation: fade-in 0.8s 10.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(108) {
  animation: fade-in 0.8s 10.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(109) {
  animation: fade-in 0.8s 10.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(110) {
  animation: fade-in 0.8s 11s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(111) {
  animation: fade-in 0.8s 11.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(112) {
  animation: fade-in 0.8s 11.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(113) {
  animation: fade-in 0.8s 11.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(114) {
  animation: fade-in 0.8s 11.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(115) {
  animation: fade-in 0.8s 11.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(116) {
  animation: fade-in 0.8s 11.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(117) {
  animation: fade-in 0.8s 11.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(118) {
  animation: fade-in 0.8s 11.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(119) {
  animation: fade-in 0.8s 11.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(120) {
  animation: fade-in 0.8s 12s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(121) {
  animation: fade-in 0.8s 12.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(122) {
  animation: fade-in 0.8s 12.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(123) {
  animation: fade-in 0.8s 12.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(124) {
  animation: fade-in 0.8s 12.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(125) {
  animation: fade-in 0.8s 12.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(126) {
  animation: fade-in 0.8s 12.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(127) {
  animation: fade-in 0.8s 12.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(128) {
  animation: fade-in 0.8s 12.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(129) {
  animation: fade-in 0.8s 12.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(130) {
  animation: fade-in 0.8s 13s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(131) {
  animation: fade-in 0.8s 13.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(132) {
  animation: fade-in 0.8s 13.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(133) {
  animation: fade-in 0.8s 13.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(134) {
  animation: fade-in 0.8s 13.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(135) {
  animation: fade-in 0.8s 13.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(136) {
  animation: fade-in 0.8s 13.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(137) {
  animation: fade-in 0.8s 13.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(138) {
  animation: fade-in 0.8s 13.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(139) {
  animation: fade-in 0.8s 13.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(140) {
  animation: fade-in 0.8s 14s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(141) {
  animation: fade-in 0.8s 14.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(142) {
  animation: fade-in 0.8s 14.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(143) {
  animation: fade-in 0.8s 14.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(144) {
  animation: fade-in 0.8s 14.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(145) {
  animation: fade-in 0.8s 14.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(146) {
  animation: fade-in 0.8s 14.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(147) {
  animation: fade-in 0.8s 14.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(148) {
  animation: fade-in 0.8s 14.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(149) {
  animation: fade-in 0.8s 14.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(150) {
  animation: fade-in 0.8s 15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(151) {
  animation: fade-in 0.8s 15.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(152) {
  animation: fade-in 0.8s 15.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(153) {
  animation: fade-in 0.8s 15.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(154) {
  animation: fade-in 0.8s 15.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(155) {
  animation: fade-in 0.8s 15.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(156) {
  animation: fade-in 0.8s 15.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(157) {
  animation: fade-in 0.8s 15.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(158) {
  animation: fade-in 0.8s 15.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(159) {
  animation: fade-in 0.8s 15.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(160) {
  animation: fade-in 0.8s 16s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(161) {
  animation: fade-in 0.8s 16.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(162) {
  animation: fade-in 0.8s 16.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(163) {
  animation: fade-in 0.8s 16.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(164) {
  animation: fade-in 0.8s 16.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(165) {
  animation: fade-in 0.8s 16.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(166) {
  animation: fade-in 0.8s 16.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(167) {
  animation: fade-in 0.8s 16.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(168) {
  animation: fade-in 0.8s 16.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(169) {
  animation: fade-in 0.8s 16.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(170) {
  animation: fade-in 0.8s 17s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(171) {
  animation: fade-in 0.8s 17.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(172) {
  animation: fade-in 0.8s 17.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(173) {
  animation: fade-in 0.8s 17.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(174) {
  animation: fade-in 0.8s 17.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(175) {
  animation: fade-in 0.8s 17.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(176) {
  animation: fade-in 0.8s 17.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(177) {
  animation: fade-in 0.8s 17.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(178) {
  animation: fade-in 0.8s 17.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(179) {
  animation: fade-in 0.8s 17.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(180) {
  animation: fade-in 0.8s 18s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(181) {
  animation: fade-in 0.8s 18.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(182) {
  animation: fade-in 0.8s 18.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(183) {
  animation: fade-in 0.8s 18.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(184) {
  animation: fade-in 0.8s 18.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(185) {
  animation: fade-in 0.8s 18.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(186) {
  animation: fade-in 0.8s 18.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(187) {
  animation: fade-in 0.8s 18.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(188) {
  animation: fade-in 0.8s 18.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(189) {
  animation: fade-in 0.8s 18.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(190) {
  animation: fade-in 0.8s 19s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(191) {
  animation: fade-in 0.8s 19.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(192) {
  animation: fade-in 0.8s 19.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(193) {
  animation: fade-in 0.8s 19.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(194) {
  animation: fade-in 0.8s 19.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(195) {
  animation: fade-in 0.8s 19.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(196) {
  animation: fade-in 0.8s 19.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(197) {
  animation: fade-in 0.8s 19.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(198) {
  animation: fade-in 0.8s 19.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(199) {
  animation: fade-in 0.8s 19.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation02 span:nth-child(200) {
  animation: fade-in 0.8s 20s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.login-field {
  padding: 0 0 24px 0;
  position: relative;
  animation: opacity-shown 3.2s forwards;
}
.login-field:nth-of-type(2)::before {
  content: "";
  position: absolute;
  z-index: -1;
  position: absolute;
  top: 10px;
  color: #000;
}
.login-field.pb0 {
  padding-bottom: 0;
}

@keyframes opacity-shown {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.login-input {
  border: none;
  fill: none;
  border-bottom: 1px solid #444444;
  padding: 0 10px 6px 0;
  width: 100%;
  transition: 0.2s;
  color: #fff;
}
.login-input:focus, .login-input:active {
  background: none;
  appearance: none;
  -webkit-appearance: none;
}
.login-input:active, .login-input:focus, .login-input:hover {
  outline: none;
}
.login-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #D1D1D1;
  opacity: 1; /* Firefox */
}
.login-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #D1D1D1;
}
.login-input::-ms-input-placeholder { /* Microsoft Edge */
  color: #D1D1D1;
}

.login-submit {
  background: #a8a8a8;
  font-size: 14px;
  margin: 45px auto 0;
  padding: 8px 10px 7px;
  border-radius: 26px;
  border: none;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  overflow: hidden;
  width: 170px;
  color: #101010;
  cursor: pointer;
  transition: 0.2s;
  text-align: center;
  animation: fade-backgroud 4s forwards;
}
.login-submit:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: #e6e6e6;
  transition: all 0.3s ease;
}
.login-submit:hover {
  opacity: 1;
}
.login-submit:hover:after {
  left: 0;
  width: 100%;
}
.login-submit.btn-change-pass {
  width: 190px;
}

@keyframes fade-backgroud {
  0% {
    background-color: #333;
  }
  100% {
    background-color: #a8a8a8;
  }
}
.button-icon {
  font-size: 24px;
  margin-left: auto;
  color: #101010;
}

.icon-eye {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 13px;
  cursor: pointer;
  background: url(../images/eye-regular.svg) no-repeat center/14px auto;
}
.icon-eye.active {
  background-image: url(../images/eye-slash-regular.svg);
  background-size: 16px auto;
}

.forgot-password, .login-btn-back {
  cursor: pointer;
  animation: opacity-shown 3.2s forwards;
}

.login-error {
  padding: 5px 13px 5px 28px;
  border-radius: 2px;
  background: rgba(168, 168, 168, 0.1);
  margin-bottom: 25px;
  position: relative;
  font-size: 12px;
  color: #E94434;
}
.login-error .icon {
  position: absolute;
  top: 4px;
  left: 8px;
}

.login-success {
  padding: 5px 13px 5px 28px;
  border-radius: 2px;
  background: rgba(168, 168, 168, 0.1);
  margin-bottom: 25px;
  position: relative;
  font-size: 12px;
  color: #38974b;
}

.login-btn-back {
  margin-top: 25px;
  cursor: pointer;
  text-align: center;
}

.login-ttl-forgot {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20px;
}

.lg-txt-forgot {
  color: #fff;
  font-weight: 300;
}

.logo-forgot {
  margin-bottom: 25px;
}

.lg-txt-forgot {
  margin-bottom: 15px;
}

.box-session .icon-logout-extend {
  cursor: pointer;
  float: right;
}

main {
  min-height: 100vh;
  padding: 70px 30px 25px;
  margin-left: auto;
  width: calc(100% - 250px);
  transition: all 0.5s ease;
  position: relative;
}
main.active {
  width: 100%;
}
main.mainToTop {
  padding-bottom: 65px;
}

@media screen and (max-width: 1024px) {
  main {
    width: 100%;
  }
}
.sp-only {
  display: none;
}

.pc-only {
  display: block;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

.col-01 {
  width: 100%;
}

.col-02 {
  width: 49%;
}

.col-w2 {
  width: 50%;
}

.cm-col-1 {
  width: 8.3333333333%;
}

.cm-col-2 {
  width: 16.6666666667%;
}

.cm-col-3 {
  width: 25%;
}

.cm-col-4 {
  width: 33.3333333333%;
}

.cm-col-5 {
  width: 41.6666666667%;
}

.cm-col-6 {
  width: 50%;
}

.cm-col-7 {
  width: 58.3333333333%;
}

.cm-col-8 {
  width: 66.6666666667%;
}

.cm-col-9 {
  width: 75%;
}

.cm-col-10 {
  width: 83.3333333333%;
}

.cm-col-11 {
  width: 91.6666666667%;
}

.cm-col-12 {
  width: 100%;
}

.w-200 {
  width: 200px;
}

.w-250 {
  width: 250px;
}

.w-50 {
  width: 50px;
}

.w-150 {
  width: 150px;
}

.w-80 {
  width: 80px;
}

.w-max750 {
  max-width: 750px;
}

.container {
  margin-bottom: 20px;
}

.hidden {
  display: none !important;
}

.btn-right {
  margin-left: auto;
}

.col-contain {
  margin-left: -15px;
  margin-right: -15px;
}

.txt-green {
  color: #008b00;
  font-weight: 600;
}

.proportion-img {
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.proportion-img .col-beforeImg-6, .proportion-img .col-afterImg-6 {
  width: calc(50% - 5px);
}
.proportion-img .col-beforeImg-6 span, .proportion-img .col-afterImg-6 span {
  display: block;
}
.proportion-img [class*=col-] {
  padding: 12px 12px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
}
.proportion-img [class*=col-] .tag-hidden {
  margin-bottom: 10px;
  display: block;
}
.proportion-img .img-name {
  width: 100%;
  background: #002443;
  font-weight: bold;
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 6px;
}

.proportion-btn {
  position: relative;
}

.btn-link-download {
  position: absolute;
  left: 0;
  top: 0;
}

/*-----------*/
.block-top {
  justify-content: flex-start;
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: 30px;
}
.block-top .box-item {
  width: calc(20% - 16px);
  margin-bottom: 20px;
  margin: 8px;
  background: #161616;
  padding: 14px 15px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.block-top .box-item:first-child .box-icon {
  background: #17A2B8;
}
.block-top .box-item:nth-child(2) .box-icon {
  background: #006271;
}
.block-top .box-item:nth-child(3) .box-icon {
  background: #006749;
}
.block-top .box-item:nth-child(4) .box-icon {
  background: #006749;
}
.block-top .box-item:nth-child(5) .box-icon {
  background: #002443;
}
.block-top .box-item .box-ttl {
  position: relative;
}
.block-top .box-item .number {
  font-size: 25px;
  line-height: 1;
  color: #fff;
  margin-top: 5px;
  margin-bottom: 0;
  font-weight: bold;
}
.block-top .box-item .ttl {
  font-size: 14px;
  color: #919191;
  margin-bottom: 10px;
  padding-bottom: 3px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  z-index: 0;
  width: 100%;
}
.block-top .box-item .ttl::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(100% - 44px);
  height: 1px;
  background: #2b2b2b;
  bottom: 0;
  left: 0;
  right: 0;
}
.block-top .box-item .info {
  font-size: 13px;
  margin-bottom: 0;
  font-weight: normal;
}
.block-top .box-item .box-icon {
  position: absolute;
  top: -2px;
  right: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #fff;
}
.block-top .box-item .box-icon img {
  max-width: 16px;
  max-height: 16px;
  object-fit: cover;
}
.block-top .box-item.box-last .number {
  font-size: 30px;
  text-align: center;
}
.block-top .box-item .sum, .block-top .box-item .carat {
  text-align: center;
  width: 50%;
  padding-left: 5px;
}
.block-top .box-item .carat {
  border-left: 1px solid #2b2b2b;
}

@media screen and (max-width: 1800px) {
  .block-top .box-item {
    width: calc(33.3333333333% - 16px);
  }
}
@media screen and (max-width: 1200px) {
  .block-top .box-item {
    width: calc(50% - 16px);
  }
  .block-top .box-item .number {
    font-size: 30px;
  }
  .block-top .box-item .ttl {
    font-size: 16px;
  }
}
@media screen and (max-width: 900px) {
  .block-top .box-item {
    width: 100%;
  }
}
/* date time */
input[name=datetimes] {
  padding: 0 0 2px 0;
  width: 100%;
  background: url(../images/calendar-day-solid.svg) no-repeat bottom 4px right/16px auto;
  height: 24px;
}

body .daterangepicker {
  background-color: #333;
  border-color: #333;
}
body .daterangepicker::before, body .daterangepicker::after {
  border-bottom-color: #333;
}
body .daterangepicker .drp-buttons {
  border-top-color: #4c4c4c;
}
body .daterangepicker .ranges li.active {
  background-color: #17A2B8;
}
body .daterangepicker .ranges li.active:hover {
  background-color: #17A2B8;
}
body .daterangepicker .ranges li:hover {
  background-color: #6d6d6d;
}
body .daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left-color: #4c4c4c;
}
body .daterangepicker .calendar-table {
  border: none;
  background-color: #333;
}
body .daterangepicker .calendar-table .next span, body .daterangepicker .calendar-table .prev span {
  border-color: #fff;
}
body .daterangepicker th.available:hover, body .daterangepicker td.available:hover {
  background-color: #6d6d6d;
}
body .daterangepicker td.off, body .daterangepicker td.off.in-range, body .daterangepicker td.off.start-date, body .daterangepicker td.off.end-date {
  background-color: transparent;
  color: #fff;
}
body .daterangepicker td.active, body .daterangepicker td.active:hover, body .daterangepicker td.active.in-range {
  background-color: #17A2B8;
}
body .daterangepicker td.in-range {
  background-color: #e6fcff;
}
body .daterangepicker select.monthselect, body .daterangepicker select.yearselect {
  color: #fff;
}
body .daterangepicker .drp-buttons .btn {
  background: #161616;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
body .daterangepicker .drp-buttons .btn.applyBtn {
  background-color: #17A2B8;
}
body .daterangepicker .drp-buttons .btn:hover {
  opacity: 0.7;
}
body .daterangepicker select.hourselect, body .daterangepicker select.minuteselect, body .daterangepicker select.secondselect, body .daterangepicker select.ampmselect {
  background: url(../images/angle-down-solid.svg) no-repeat top 9px right/8px auto;
  border: none;
  border-bottom: 1px solid #6d6d6d;
  width: 60px;
  min-width: auto;
}
body .daterangepicker .calendar-time {
  padding-right: 8px;
}

/* end date time */
.box-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.ttl-datetimes {
  display: inline-block;
  width: 50%;
  max-width: 240px;
  line-height: 1;
}

.title-01 {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}
.title-01 .small {
  font-size: 70%;
}

.title-02 {
  font-size: 22px;
  color: #fff;
  margin-bottom: 33px;
}

.ttl-year {
  width: 100%;
  max-width: 240px;
}
.ttl-year select, .ttl-year .vsb-main {
  width: 100%;
}

canvas:hover {
  cursor: pointer;
}

.block01 .group-btn {
  margin-left: auto;
  display: table;
}
.block01 .group-btn button {
  background: transparent;
  border: none;
  margin: 5px 5px 2px;
  font-weight: 500;
  color: #ccc;
  position: relative;
  z-index: 0;
}
.block01 .group-btn button.active::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 2px;
  background: #008b00;
  bottom: -2px;
  left: 0;
  right: 0;
}
.block01 .note-chart-line {
  margin-bottom: 1vw;
}
.block01 .note-chart-line .txt {
  margin-right: 15px;
  display: inline-block;
  color: #ccc;
}
.block01 .note-chart-line .number {
  display: inline-block;
  margin-left: 10px;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}
.block01 .box02, .block01 .box03 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.block01 .box-top {
  margin-bottom: 15px;
}
.block01 .box-top.box-top-btn .cm-button {
  margin-left: 10px;
}
.block01 .box-top .box-left-select .vsb-main:not(:last-child) {
  margin-right: 6px;
}
.block01 .cm-parent div.box-left-select {
  margin-right: 10px;
}
.block01 .cm-parent {
  margin-bottom: 35px;
}

.cm-parent {
  position: relative;
}
.cm-parent .box-left-select:not(:last-child) {
  margin-right: 15px;
}

.box-error-chart {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  max-height: 200px;
  border-radius: 6px;
  background: #B00020;
  color: #fff;
  padding: 15px;
  font-size: 16px;
}

.chart-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px;
  border-radius: 6px;
  background: #B00020;
  color: #fff;
  width: 50%;
  text-align: center;
}

@media screen and (max-width: 1700px) {
  .block01 .cm-parent {
    width: 100%;
  }
  .block01 .box01 {
    margin-bottom: 30px;
  }
}
.cm-page.page .vsb-main {
  width: 80px;
}
.cm-page [class*=select-all] {
  margin-right: 15px;
  width: 80px;
}
.cm-page [class*=select-all] ~ .vsb-main {
  margin-right: 15px;
}
.cm-page.wp-gridblock .gr-search {
  width: 31.5%;
}
.cm-page.no-button .select-action {
  margin-right: 0;
}
.cm-page.gr-select {
  max-width: 400px;
  width: 100%;
}
.cm-page > div:last-child {
  margin-right: 0;
}

.tabs {
  justify-content: flex-start;
  margin-bottom: 15px;
}
.tabs a {
  display: block;
  padding-bottom: 2px;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  z-index: 0;
  color: #ccc;
  height: 100%;
  text-transform: capitalize;
}
.tabs li {
  margin-right: 15px;
}
.tabs li.active a {
  color: #60C6FF;
}
.tabs li.active a::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #60C6FF;
}
.tabs li.active a:hover {
  opacity: 1;
  cursor: pointer;
}
.tabs li:last-child a {
  margin-right: 0;
}
.tabs .tab-total-number {
  background: rgb(170, 74, 1);
  padding: 3px 5px 3px;
  border-radius: 4px;
  display: inline-block;
  margin-left: 8px;
  line-height: 1;
  font-size: 12px;
  position: relative;
  top: -13px;
  color: #fff;
}
.tabs .tab-total-number::after {
  background: rgb(170, 74, 1);
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -1px;
  left: -7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.tab_content .gr-radiobox label {
  margin-bottom: 10px;
}
.tab_content .gr-radiobox.label_mb0 label {
  margin-bottom: 0;
}
.tab_content .detail-change-password .item {
  display: grid;
  grid-template-columns: 30% auto;
}
.tab_content .detail-change-password .item:last-child {
  margin-bottom: 0;
}
.tab_content .detail-change-password .cm-button {
  margin-top: 30px;
}
.tab_content .detail-change-password .error-file {
  margin-top: 3px;
}

.tab-ontop {
  position: relative;
  z-index: 0;
}
.tab-ontop::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #2b2b2b;
}
.tab-ontop li {
  position: relative;
  margin-right: 3px;
  border-radius: 6px 6px 0 0;
  border-bottom: none;
  background: #161616;
  min-width: 100px;
}
.tab-ontop li:last-child {
  margin-right: 0;
}
.tab-ontop li a {
  padding: 3px 15px;
}
.tab-ontop li.active {
  background: #121829;
}
.tab-ontop li.active a {
  color: #fff;
}
.tab-ontop li.active a::before {
  content: none;
}

.box-search {
  margin-bottom: 20px;
}
.box-search .box-left {
  width: calc(63% - 15px);
  justify-content: flex-start;
  align-items: flex-end;
}
.box-search .box-left > div:not(:last-child) {
  margin-right: 15px;
}
.box-search .box-left .select-all01 ~ .vsb-main {
  width: calc(50% - 125px);
}
.box-search .box-left .b-date {
  position: relative;
  z-index: 0;
  width: 25%;
  margin-right: 15px;
}
.box-search .box-left .btn-search {
  width: 110px;
}
.box-search .box-right {
  width: 37%;
  justify-content: flex-end;
}
.box-search.home-option .box-left {
  width: calc(100% - 395px);
}
.box-search.home-option .box-left .select-all01 ~ .vsb-main {
  max-width: 225px;
}
.box-search.home-option .box-right {
  width: 385px;
}
.box-search.home-option .gr-button > div:not(:last-child) {
  margin-right: 15px;
}

.gr-btn.gr-btn-big .cm-button {
  width: 140px;
}
.gr-btn .cm-button {
  width: 120px;
}
.gr-btn .cm-button:not(:last-child) {
  margin-right: 15px;
}
.gr-btn .cm-button.excel {
  width: 200px;
}
.gr-btn .btn-big {
  width: 190px;
}

.cm-button {
  display: table;
}
.cm-button.active a {
  background: #17a2b8;
}
.cm-button.active a:hover::after {
  background: rgba(255, 255, 255, 0.3);
}
.cm-button.btn-medium a {
  min-width: 130px;
}
.cm-button a {
  display: block;
  background: #a8a8a8;
  padding: 3px 6px;
  border-radius: 40px;
  text-align: center;
  color: #000;
  font-weight: 700;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-width: 110px;
}
.cm-button a:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  background: #e6e6e6;
  transition: all 0.3s ease;
}
.cm-button a:hover {
  opacity: 1;
}
.cm-button a:hover:after {
  left: 0;
  width: 100%;
}
.cm-button.bg1 a {
  background: #60C6FF;
}
.cm-button.bg1 a:hover::after {
  background: rgba(255, 255, 255, 0.1);
}
.cm-button.btn-right {
  margin-left: auto;
}
.cm-button .icon {
  display: inline-block;
  margin-right: 6px;
}

.btn-center {
  margin-left: auto;
  margin-right: auto;
}

.action-group {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.action-group .btn-extend a {
  background: #60c6ff;
}
.action-group .btn {
  padding: 2px 18px;
  border-radius: 40px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.action-group .btn.primary {
  background: #60c6ff;
  color: #000;
}
.action-group .btn.primary:hover {
  background: #3bb8ff;
}
.action-group .btn.danger-outline {
  background: transparent;
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
}
.action-group .btn.danger-outline:hover {
  background: rgba(255, 77, 79, 0.1);
}

@media screen and (max-width: 1650px) {
  .box-search.home-option .box-left {
    width: 100%;
    margin-bottom: 20px;
  }
  .box-search.home-option .box-right {
    width: 100%;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 1520px) {
  .box-search.home-option .box-left, .box-search.home-option .box-right {
    width: 100%;
  }
  .box-search.home-option .box-left {
    margin-bottom: 20px;
  }
  .box-search.home-option .box-right {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 1300px) {
  .box-search.home-option .gr-button {
    margin-top: 15px;
    width: 100%;
  }
}
@media screen and (max-width: 1279px) {
  .box-search.md-w100 .box-left, .box-search.md-w100 .box-right {
    width: 100%;
  }
  .box-search .box-left {
    max-width: none;
    margin-bottom: 20px;
  }
  .box-search .box-right {
    max-width: 430px;
    justify-content: flex-start;
  }
  .analysis-comparisions-detail.box-search .box-left {
    width: calc(76% - 15px);
    margin-bottom: 0;
  }
  .analysis-comparisions-detail.box-search .box-right {
    width: 25%;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 1170px) {
  .analysis-comparisions-detail.box-search .box-left, .analysis-comparisions-detail.box-search .box-right {
    width: 100%;
    max-width: none;
  }
  .analysis-comparisions-detail.box-search .box-left {
    margin-bottom: 15px;
  }
  .analysis-comparisions-detail.box-search .box-right {
    justify-content: start;
  }
  .box-search.home-option .box-left .select-all01 ~ .vsb-main {
    max-width: 175px;
  }
}
.icon-toggle {
  border: 2px solid #ccc;
  border-radius: 3px;
  position: relative;
  z-index: 0;
  top: 2px;
  display: inline-block;
  margin-right: 10px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.icon-toggle::before, .icon-toggle::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translate(-50%);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.icon-toggle::before {
  top: calc(50% - 1px);
  width: 6px;
  height: 2px;
  background: #ccc;
}
.icon-toggle::after {
  width: 2px;
  height: 6px;
  background: #ccc;
  left: 50%;
  top: calc(50% - 3px);
}
.icon-toggle.active::after {
  transform: translate(-50%) rotate(90deg);
}

.table {
  text-align: left;
  min-width: 100%;
  color: #ccc;
}
.table .w-ttl01 {
  width: 155px;
}
.table .main-stone-row {
  border: none !important;
}
.table .row-planning-main {
  background: #121829;
}
.table .row-planning-main.active {
  background: #121829;
  font-weight: initial;
}
.table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}
.table thead th {
  border-top: 1px solid #2b2b2b;
}
.table thead th.group-processing {
  background: #14213d;
}
.table thead tr:not(:first-child) th {
  border-top: none;
}
.table tbody .fisrt-border-processing {
  border-left: 1px solid #6d6d6d;
}
.table tbody .last-border-processing {
  border-right: 1px solid #6d6d6d;
}
.table th {
  background-color: #2b2b2b;
  color: #fff;
  text-align: left;
}
.table th.text-center {
  text-align: center;
}
.table th.bg-none {
  background: none;
}
.table th.text-right {
  text-align: right;
}
.table th.fix-title {
  padding-left: 10px;
}
.table th, .table td {
  border-bottom: 1px solid #2b2b2b;
  padding: 6px 5px 6px 5px;
  vertical-align: middle;
}
.table th.txt-blue, .table td.txt-blue {
  color: #60C6FF;
}
.table th.no-border-bottom, .table td.no-border-bottom {
  border-bottom: none;
}
.table th.border-left, .table td.border-left {
  border-left: 1px solid #2b2b2b;
}
.table td.fix-title .planning-shape-proportion {
  padding-left: 5px;
}
.table td.fix-title .planning-shape-proportion::before {
  left: 5px;
}
.table td.fix-title .planning-shape-proportion:hover::before {
  width: calc(100% - 5px);
}
.table td.fix-title .planning-shape-proportion.planning-highlight:hover::before {
  width: calc(100% - 10px);
}
.table .th-bg-blue th {
  background: #121829;
  border-right: 1px solid #2b2b2b;
}
.table a {
  color: #60C6FF;
  position: relative;
  z-index: 0;
}
.table a::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #60C6FF;
  transition: all 0.3s ease;
}
.table a:hover {
  color: #60C6FF;
  opacity: 1;
}
.table a:hover::before {
  width: 100%;
}
.table a.no-line::before {
  content: none;
}
.table a.icon-galaxy {
  position: relative;
  top: -2px;
}
.table a.icon-galaxy::before {
  content: none;
}
.table a.icon-galaxy:hover {
  opacity: 0.7;
}
.table a.icon-media {
  position: relative;
  top: 1px;
}
.table a.icon-media::before {
  content: none;
}
.table a.icon-media:hover {
  opacity: 0.7;
}
.table tr {
  transition: all 0.2s ease;
}
.table tr.shown {
  background: #121829;
}
.table tr.shown.active {
  background-color: #121829;
}
.table tr.shown .icon-toggle::after {
  transform: translate(-50%) rotate(90deg);
}
.table tr.shown + tr > td {
  padding: 0;
}
.table tr.shown + tr > td table thead th {
  border-top: none;
  padding-top: 5px !important;
}
.table tr.shown + tr > td th {
  background: none;
}
.table tr.shown + tr > td td {
  background: rgba(255, 255, 255, 0.1);
}
.table tr.tr-row-disabled {
  background: repeating-linear-gradient(-45deg, #777, #777 2px, #555 2px, #555 9px);
}
.table tr.tr-row-disabled .item-img-comment .number {
  border-color: #555;
}
.table tr.tr-row-disabled.active {
  background: repeating-linear-gradient(-45deg, #777, #777 2px, #555 2px, #555 9px);
}
.table tr.checkedReplan:not([class*=row-planning-main]) {
  background: #333;
}
.table tr.checkedRejected.row-planning-main {
  background: repeating-linear-gradient(-45deg, #71423e, #71423e 2px, #333 2px, #333 9px);
}
.table tr.checkedRejected:not([class*=row-planning-main]) {
  opacity: 0.5;
}
.table tr.row-parent td {
  font-weight: bold;
  background: #121829;
}
.table tr.active {
  background: #4c4c4c;
  font-weight: 600;
}
.table tr.active .item-img-comment .number {
  border-color: #4c4c4c;
}
.table tr.active td.column-sum {
  background: #4c4c4c;
}
.table tr.row-disabled-part {
  opacity: 0.8;
}
.table tr.row-disabled-part .column-part-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.table tr.row-disabled-part .column-part-name .danger-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
  cursor: default;
  flex: 0 0 auto;
}
.table tr.row-disabled-part .column-part-name .danger-dot .tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  min-width: 190px;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #141b26;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: 0.16s ease;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
.table tr.row-disabled-part .column-part-name .danger-dot .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #141b26;
}
.table tr.row-disabled-part .column-part-name .danger-dot:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.table tr.row-disabled-part td {
  position: relative;
}
.table tr.row-disabled-part td::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px; /* Độ dày của đường kẻ */
  background: #fff;
  box-shadow: 0 0 1px rgba(220, 38, 38, 0.45);
  z-index: 10; /* Đảm bảo nằm trên nội dung chữ */
  pointer-events: none; /* Giúp vẫn click được vào các phần tử bên dưới */
}
.table table tr:last-child td {
  border-bottom: none;
}
.table.vt-td-middle td {
  vertical-align: middle;
}
.table.border-bnone td {
  border-bottom: none;
}
.table.tbl-ttl-w150 tr td:first-child {
  width: 150px;
}
.table.tb-shipment-invoice tr td:first-child {
  width: inherit;
}
.table.table-100 {
  width: 100% !important;
}
.table.table-current-stock tr td:first-child {
  width: 145px;
}
.table.table-current-stock tr td:nth-child(19) {
  width: 250px;
}
.table.table-current-stock tr td:nth-child(21) {
  width: 100px;
}
.table.table-sawing-report tr th:first-child {
  width: 250px;
}
.table.table-pending tr td:first-child {
  width: 65px;
}
.table.table-planning tr th:nth-child(2) {
  width: 100px;
}
.table.table-planning tr th:nth-child(3) {
  width: 200px;
}
.table.table-planning .row-planning-main {
  color: #fff;
}
.table.tbl-stone tr th:first-child {
  width: 54%;
}
.table.tbl-stone tr th:nth-child(3) {
  width: 150px;
}
.table.table-healthy {
  width: 100%;
}
.table.table-healthy .th-bg-blue th:first-child, .table.table-healthy .th-bg-blue th:nth-child(2), .table.table-healthy .th-bg-blue th:nth-child(3) {
  border-right: none;
}
.table.table-healthy .th-bg-blue th:nth-child(4) {
  border-left: 1px solid #2b2b2b;
}
.table.table-healthy .th-bg-blue th:first-child, .table.table-healthy .th-bg-blue th:nth-child(2) {
  width: 250px;
}
.table.table-healthy .th-bg-blue th:nth-child(5) {
  width: 160px;
}
.table.table-healthy .th-bg-blue th:last-child {
  width: 10px;
}
.table.w-th01 th:first-child {
  width: 260px;
}
.table.w-th01 td:first-child {
  width: 240px;
}
.table.table-propotion thead th.text-center {
  text-align: center;
}
.table.th-proportion td:first-child {
  width: 60%;
}
.table.table-th-colum {
  border-collapse: collapse;
}
.table.table-th-colum td {
  border-top: 1px solid #2b2b2b;
}
.table td.td-order-name {
  vertical-align: middle;
}
.table td.td-order-name .order-name {
  line-height: 1.3;
  border: 1px dashed #438bca;
  display: inline-block;
  padding: 2px 8px 0;
  border-radius: 3px;
  line-height: 1.3;
  transition: all 0.3s ease;
  cursor: pointer;
}
.table td.td-order-name .order-name:hover {
  opacity: 0.7;
}
.table td.td-order-name .order-name.active {
  background: #19a1fb;
  border: 1px solid #19a1fb;
  color: #fff;
}
.table td.td-order-name .order-name.active:hover {
  opacity: 1;
}
.table td.td-order-name .order-name.put-by-approver {
  border: 2px solid #438bca !important;
}
.table td.td-order-name .cm-box-tooltip.red .order-name {
  border-color: #E94434;
}
.table td.td-order-name .order-number {
  background: #a8a8a8;
  color: #000;
  height: 22px;
  margin-left: 4px;
  text-align: center;
  border-radius: 3px;
  position: relative;
  padding: 2px 4px 0;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.table td.td-order-name .order-number:hover {
  opacity: 0.7;
}
.table td.td-order-name .gr-order-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: 400;
}
.table td.td-order-name .gr-add-order-list {
  position: relative;
  margin-left: 4px;
}
.table td.td-order-name .gr-add-order-list .btn-add {
  position: relative;
  z-index: 0;
  width: 21px;
  height: 21px;
  border: 1px dashed #6d6d6d;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Crect y='3' width='7' height='1' style='fill: %236d6d6d; stroke-width: 0px;'/%3E%3Crect x='3' width='1' height='7' style='fill: %236d6d6d; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat center/7px auto;
}
.table td.td-order-name .gr-add-order-list .btn-add:hover {
  opacity: 0.7;
}
.table td.td-order-name .gr-add-order-list .top {
  position: relative;
}
.table td.td-order-name .gr-add-order-list .top .btn-apply {
  position: absolute;
  top: 2px;
  right: 5px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  background: #ccc;
  color: #000;
  transition: all 0.3s ease;
}
.table td.td-order-name .gr-add-order-list .top .btn-apply:hover {
  opacity: 0.7;
}
.table td.td-order-name .gr-add-order-list .list {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(100% + 2px);
  white-space: nowrap;
  background: #161616;
  border-radius: 2px;
  font-size: 13px;
  display: none;
  padding: 5px 0;
}
.table td.td-order-name .gr-add-order-list .list .ttl {
  margin-bottom: 2px;
  padding: 0 58px 3px 10px;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #4c4c4c;
}
.table td.td-order-name .gr-add-order-list .list ul {
  max-height: 450px;
}
.table td.td-order-name .gr-add-order-list .list li {
  padding: 4px 10px 3px;
  cursor: pointer;
  transition: all 0.3s ease;
  line-height: 1.4;
}
.table td.td-order-name .gr-add-order-list .list li:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.table td.td-order-name .gr-add-order-list.active .list {
  display: block;
}
.table td.td-order-name .gr-add-order-list .gr-radiobox .checkmark {
  width: 14px;
  height: 14px;
  top: 1px;
}
.table td.td-order-name .gr-add-order-list .gr-radiobox label {
  padding-left: 20px;
}
.table .header-compile {
  cursor: pointer;
}
.table .ttl-toggle-ov {
  transition: all 0.3s ease;
  cursor: pointer;
}
.table .ttl-toggle-ov:hover {
  background: #121829;
}
.table .tbl-img {
  width: 60px;
  height: 47px;
  background: #ccc;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table .tbl-img img {
  max-height: 100%;
}
.table .dropdown-priority {
  width: 100%;
  min-width: auto;
}
.table .gr-video {
  display: flex;
}
.table .gr-video .item-img {
  max-width: 38px;
  max-height: 22px;
  min-width: 16px;
}
.table .gr-video .item-img:not(:last-child) {
  margin-right: 8px;
}
.table .gr-video .item-img img {
  max-height: 100%;
}
.table .tbl-icon-view-v360, .table .file-video {
  font-size: 20px;
  color: #FFCC85;
  line-height: 1.2;
}
.table .tbl-icon-view-v360 a, .table .file-video a {
  font-size: 20px;
  color: #FFCC85;
  line-height: 1;
}
.table .tbl-icon-view-v360 a::before, .table .file-video a::before {
  content: none;
}
.table .cm-button a {
  color: #000;
}
.table .item-img-comment {
  display: flex;
  cursor: pointer;
}
.table .item-img-comment .icon {
  margin-left: 6px;
  position: relative;
}
.table .item-img-comment .number {
  position: absolute;
  top: -6px;
  left: calc(100% - 8px);
  padding: 2px 2px 1px;
  border-radius: 4px;
  background: #b00020;
  font-size: 11px;
  color: #fff;
  line-height: 1;
  border: 2px solid #000;
  min-width: 18px;
  text-align: center;
}
.table .item-img-comment i {
  font-size: 18px;
  line-height: 1;
}
.table .item-img-comment .text-comment {
  margin-left: 30px;
}
.table .badge-number {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background-color: #008b00;
  padding: 4px 3px 3px;
  font-weight: 700;
  color: #fff;
  margin: 0 auto;
}
.table .img-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto;
}
.table .ctl-sku {
  padding-top: 8px;
}
.table .ctl-weight {
  padding-top: 9px;
}
.table .txt-type i {
  margin-right: 5px;
}
.table .twoAwhite-check {
  color: #60c6ff;
}
.table .cm-warrning {
  display: inline-flex;
  margin-left: 5px;
  color: #fff;
  width: 2px;
}
.table .tbl-box-instructions {
  position: relative;
  z-index: 0;
  padding-left: 45px;
}
.table .tbl-box-instructions::before, .table .tbl-box-instructions::after {
  content: "";
  position: absolute;
  z-index: -1;
}
.table .tbl-box-instructions::before {
  top: -7px;
  left: 26px;
  width: 10px;
  height: 17px;
  border-left: 1px solid #6d6d6d;
  border-bottom: 1px solid #6d6d6d;
}
.table .tbl-box-instructions::after {
  left: 35px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6d6d6d;
}

.table-order-proportion {
  width: 1900px;
}

.tab_content .gr-add-order-list .gr-radiobox label {
  margin-bottom: 0;
}

.dataTables_scrollHead {
  z-index: 0;
}

.dataTables_scrollHeadInner {
  min-width: 100%;
}

.block-table-stone .dataTables_scrollHeadInner {
  width: 100% !important;
}
.block-table-stone .tbl-stone {
  width: 100% !important;
}

.cm-box-tooltip {
  margin: 2px 4px 2px;
  position: relative;
}
.cm-box-tooltip .content-tooltip {
  position: absolute;
  z-index: 2;
  top: calc(100% + 1px);
  left: 0;
  width: 250px;
  background: #121829;
  padding: 6px 10px 6px;
  color: #fff;
  font-size: 12px;
  border-radius: 6px;
  display: none;
}
.cm-box-tooltip .content-tooltip .icon {
  position: absolute;
  z-index: 3;
  color: #E94434;
  top: 4px;
  right: 6px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}
.cm-box-tooltip .content-tooltip .icon:hover {
  opacity: 0.7;
}
.cm-box-tooltip .content-tooltip .list .txt {
  position: relative;
  z-index: 0;
  padding-left: 10px;
  margin-bottom: 3px;
  color: #60C6FF;
}
.cm-box-tooltip .content-tooltip .list .txt::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  background: #d1d1d1;
}
.cm-box-tooltip .content-tooltip .list .txt:last-child {
  margin-bottom: 0;
}
.cm-box-tooltip .content-tooltip .list .txt.line {
  padding-bottom: 5px;
}
.cm-box-tooltip .content-tooltip .list .txt.line::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: -10px;
  right: -10px;
  height: 1px;
  background: #4c4c4c;
}
.cm-box-tooltip .content-tooltip .list .partName {
  color: #ccc;
}
.cm-box-tooltip .content-tooltip .note {
  background: #292929;
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.cm-box-tooltip:hover .content-tooltip {
  display: block;
}

.dataTables-view-pager {
  display: flex;
  justify-content: space-between;
}

.dataTables_info {
  margin-top: 10px;
}

.dataTables_paginate {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.dataTables_paginate > span {
  display: flex;
}

.dataTables-sum-page {
  color: #60C6FF;
  font-weight: bold;
}

.paginate_button {
  padding: 1px 10px 0;
  height: 24px;
  border-radius: 4px;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 5px 5px 0;
  color: #ccc;
  cursor: pointer;
  font-weight: bold;
}
.paginate_button:hover {
  background-color: #ccc;
  color: #757575;
  opacity: 1 !important;
}
.paginate_button + .ellipsis {
  display: inline-flex;
  align-items: center;
}
.paginate_button.previous, .paginate_button.next {
  color: transparent;
  width: 26px;
  text-indent: -999px;
}
.paginate_button.current {
  background-color: #ccc;
  color: #757575;
}
.paginate_button.previous {
  background: url(../images/angle-left-solid.svg) no-repeat top calc(50% + 1px) center #333;
}
.paginate_button.previous:hover {
  background-color: #ccc;
  opacity: 1;
}
.paginate_button.next {
  background: url(../images/angle-right-solid.svg) no-repeat top 50% center #333;
  margin-right: 0;
}
.paginate_button.next:hover {
  background-color: #ccc;
  opacity: 1;
}
.paginate_button.disabled {
  cursor: not-allowed;
  background-color: #ccc;
  opacity: 1;
}

.pagination li {
  display: inline-block;
}

.view-pager {
  align-items: center;
}

.total_stone {
  margin-top: 10px;
}

.dataTables_scrollBody::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.dataTables_scrollBody::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}

.dt-scroll-body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.dt-scroll-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.dt-scroll-body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}

input.icon-rtl, input.form-control {
  padding: 0 0 2px 0;
  color: #fff;
  font-size: 12px;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
  width: 100%;
  border-bottom: 1px solid #6d6d6d;
}

input.icon-rtl {
  padding-right: 25px;
  background: url(../images/magnifying-glass-solid.svg) no-repeat right 5px bottom 5px/12px auto;
}

@media screen and (max-width: 1170px) {
  .table {
    width: 1000px;
  }
  .table.tbl-stone {
    width: 100%;
  }
  .box-dialog .table {
    width: 100%;
  }
  .box-dialog .col-02 {
    width: 100%;
  }
  .box-dialog .tbl-stone-information:first-child .table tr:last-child th, .box-dialog .tbl-stone-information:first-child .table tr:last-child td {
    border-bottom: none;
  }
}
.table-note {
  margin-top: 15px;
}
.table-note li {
  width: 25%;
  margin-bottom: 10px;
}
.table-note .highlight {
  color: #60c6ff;
  font-weight: bold;
}

.bg-highlight {
  background: #2b2b2b;
}

/* to top */
.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.totop {
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  position: fixed;
  z-index: 11;
  bottom: 15px;
  right: 15px;
}
.totop.active {
  opacity: 1;
  visibility: visible;
}
.totop .icon {
  border-radius: 50%;
  background: #333;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 0;
}
.totop .icon::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(50% + 2px);
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 8px;
  height: 8px;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.menu-tutorials {
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  position: fixed;
  z-index: 11;
  bottom: 20px;
  right: 85px;
}
.menu-tutorials.active {
  opacity: 1;
  visibility: visible;
}
.menu-tutorials .icon {
  border-radius: 50%;
  background: #333;
  width: 48px;
  height: 48px;
  position: relative;
  z-index: 0;
}
.menu-tutorials .icon img {
  width: 24px;
  margin-left: 12px;
  margin-top: 12px;
}

@media screen and (min-width: 769px) {
  .menu-tutorials:hover .icon {
    opacity: 0.9;
    animation-name: bounce;
  }
}
@media screen and (min-width: 769px) {
  .totop:hover .icon {
    opacity: 0.9;
    animation-name: bounce;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
/*-----------*/
.mb0 {
  margin-bottom: 0 !important;
}

.mb15 {
  margin-bottom: 15px;
}

.mb10 {
  margin-bottom: 10px;
}

.mr0 {
  margin-right: 0 !important;
}

.mt15 {
  margin-top: 15px;
}

.box-toolbar {
  margin-bottom: 15px;
  align-items: flex-end;
  position: relative;
  width: 100%;
}
.box-toolbar.cs-w01 .box-left {
  width: calc(55% - 15px);
}
.box-toolbar.cs-w01 .box-right {
  width: 45%;
}
.box-toolbar.cs-w02 .box-left {
  width: calc(100% - 95px);
}
.box-toolbar.cs-w03 .box-left {
  width: calc(57% - 15px);
}
.box-toolbar.cs-w03 .box-right {
  width: 43%;
}
.box-toolbar.w-60-40 .box-left {
  width: 60%;
}
.box-toolbar.w-60-40 .box-right {
  width: 40%;
}
.box-toolbar .select-all03 {
  width: 62%;
}
.box-toolbar .select-all03 ~ .vsb-main {
  width: 100%;
}
.box-toolbar .box-left {
  align-items: center;
}
.box-toolbar .box-left.box01 {
  align-items: flex-end;
}
.box-toolbar .box-left > div {
  margin-right: 15px;
}
.box-toolbar .box-right {
  justify-content: flex-end;
  align-items: flex-end;
}
.box-toolbar .box-right > div:not(:last-child) {
  margin-right: 15px;
}
.box-toolbar .gr-search {
  width: calc(38% - 50px);
  margin-right: 15px;
  max-width: 200px;
  min-width: 200px;
}
.box-toolbar .not-fillter .gr-search {
  width: 100%;
  max-width: 255px;
}
.box-toolbar.summary-sawnpart {
  margin-bottom: 15px;
  width: auto;
}
.box-toolbar .item {
  border-radius: 6px;
  border: 1px solid #121829;
  overflow: hidden;
  width: calc(33.3333333333% - 10px);
}
.box-toolbar .item .ttl-name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 0;
  padding: 3px 6px;
  background: #121829;
  line-height: 1.5;
  text-align: center;
}
.box-toolbar .item .ttl-name .number {
  float: right;
}
.box-toolbar .item .heading01 {
  display: flex;
  flex-wrap: wrap;
  padding: 6px;
}
.box-toolbar .item .heading01.hdcol02 .txt {
  width: 50%;
}
.box-toolbar .item .heading01 .txt {
  display: block;
  width: 33.3333333333%;
  margin-right: 0;
  text-align: center;
}
.box-toolbar .item .heading01 .txt:not(:last-child) {
  border-right: 1px solid #121829;
}
.box-toolbar .item .heading01 .number {
  margin-left: 0;
  display: block;
  line-height: 1.2;
}

.page-centralized .box-toolbar .box-left {
  width: 540px;
}
.page-centralized .box-toolbar .box-right {
  width: calc(100% - 540px);
}
.page-centralized .box-toolbar .select-action {
  z-index: auto;
}
.page-centralized .icon-export {
  cursor: pointer;
  transition: all 0.3s ease;
}
.page-centralized .icon-export:hover {
  color: #17a2b8;
}

@media screen and (max-width: 1700px) {
  .tab_box02 .box-toolbar .item {
    width: calc(50% - 8px);
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .tab_box02 .box-toolbar .item:nth-child(2n+2) {
    margin-right: 0;
  }
}
@media screen and (min-width: 1500px) and (max-width: 1700px) {
  .box-toolbar.planning-rough-toolbar .box-left {
    width: 40%;
    max-width: none;
  }
  .box-toolbar.planning-rough-toolbar .box-left.box01 .gr-search {
    max-width: none;
    width: 255px;
  }
  .box-toolbar.planning-rough-toolbar .box-right {
    width: 60%;
    padding-top: 10px;
  }
  .box-toolbar.planning-rough-toolbar .box-right .cm-page {
    width: 100%;
  }
  .box-toolbar.planning-rough-toolbar .box-right .select-all04 ~ .vsb-main {
    max-width: none;
  }
  .box-toolbar.full-screen01 .box-left, .box-toolbar.full-screen01 .box-right {
    width: 100%;
  }
  .box-toolbar.full-screen01 .box-right {
    justify-content: flex-start;
  }
  .box-toolbar .select-all03 ~ .vsb-main {
    width: 100%;
    margin-top: 15px;
  }
  .box-toolbar .box-left {
    width: 100%;
  }
  .box-toolbar .box-left .gr-search {
    max-width: 307px;
  }
  .box-toolbar .box-right .item03, .box-toolbar .box-right .cm-page.one-btn {
    max-width: none;
  }
  .box-toolbar .box-right .item03, .box-toolbar .box-right .wp-gridblock {
    margin-top: 15px;
  }
  .box-toolbar .box-right .item03.one-btn {
    width: auto;
    margin-top: auto;
  }
  .box-toolbar div.box-filter {
    position: relative;
  }
  .box-toolbar div.box-filter .gr-ct-filter {
    width: calc(100vw - 300px);
    left: 0;
    right: auto;
    max-width: none;
  }
  .box-toolbar div.box-filter .gr-ct-filter.list-item {
    max-width: 300px;
    height: auto;
  }
  .page-centralized .box-toolbar .box-left .gr-search {
    width: 255px;
  }
}
@media screen and (max-width: 1500px) {
  .box-toolbar.planning-rough-toolbar .box-left {
    width: 100%;
    max-width: none;
  }
  .box-toolbar.planning-rough-toolbar .box-left.box01 .gr-search {
    max-width: none;
    width: 255px;
  }
  .box-toolbar.planning-rough-toolbar .box-right {
    width: 100%;
    padding-top: 10px;
  }
  .box-toolbar.planning-rough-toolbar .box-right .cm-page {
    width: 100%;
    justify-content: start;
  }
  .box-toolbar.planning-rough-toolbar .box-right .select-all04 ~ .vsb-main {
    max-width: none;
  }
  .box-toolbar .item {
    width: calc(50% - 10px);
  }
  .page-centralized .box-toolbar .box-left, .page-centralized .box-toolbar .box-right, .page-centralized .box-toolbar .select-action {
    width: 100%;
  }
  .page-centralized .box-toolbar .select-action:not(:last-child) {
    margin-bottom: 10px;
  }
  .page-centralized .box-toolbar .box-right {
    margin-top: 15px;
  }
  .page-centralized .box-toolbar .box-right .cm-page {
    justify-content: flex-start;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1740px) {
  .box-toolbar.cs-w03 .box-left {
    width: calc(48% - 15px);
  }
  .box-toolbar.cs-w03 .box-right {
    width: 52%;
  }
  .box-toolbar.no-ttl .box-left {
    padding-top: 0;
  }
  .box-toolbar.box-small .box-left {
    width: 60%;
  }
  .box-toolbar.box-small .box-right {
    width: 40%;
  }
  .box-toolbar .box-left {
    padding-top: 6px;
    width: 38%;
  }
  .box-toolbar .box-left.not-fillter {
    padding-top: 0;
  }
  .box-toolbar .box-left .txt {
    margin-right: 10px;
  }
  .box-toolbar .box-left .number {
    margin-left: 7px;
    font-size: 13px;
  }
  .box-toolbar .gr-search {
    width: calc(36% - 50px);
    min-width: 138px;
  }
  .box-toolbar.box-toolbar-order-completion .box-left, .box-toolbar.box-toolbar-order-completion .box-right {
    width: auto;
  }
  .box-toolbar.box-toolbar-order-completion .gr-search {
    width: auto;
  }
}
@media screen and (max-width: 1279px) {
  .box-toolbar.cs-w01 .box-left {
    width: 100%;
    max-width: none;
  }
  .box-toolbar.cs-w01 .box-left.box01 .gr-search {
    max-width: none;
    width: calc(100% - 35px);
    margin-right: 0;
  }
  .box-toolbar.cs-w01 .box-right {
    width: 100%;
  }
  .box-toolbar.cs-w01 .box-right .select-all04 ~ .vsb-main {
    max-width: none;
  }
  .box-toolbar.toolbar-sort .filter-sort {
    margin-bottom: 15px;
  }
  .box-toolbar.toolbar-sort .btn-batch-lookup {
    margin-top: 0;
  }
  .box-toolbar .btn-batch-lookup {
    margin-top: 15px;
  }
  .box-toolbar .select-all03 ~ .vsb-main {
    width: 100%;
    margin-top: 15px;
  }
  .box-toolbar .box-left .gr-search {
    max-width: 307px;
  }
  .box-toolbar .box-right {
    justify-content: flex-start;
    margin-top: 15px;
  }
  .box-toolbar .box-right .item03, .box-toolbar .box-right .cm-page.one-btn {
    max-width: none;
  }
  .box-toolbar .box-right .item03, .box-toolbar .box-right .wp-gridblock {
    margin-top: 15px;
  }
  .box-toolbar div.box-filter {
    position: relative;
  }
  .box-toolbar div.box-filter .gr-ct-filter {
    width: calc(100vw - 300px);
    left: 0;
    right: auto;
    max-width: none;
  }
  .box-toolbar div.box-filter .gr-ct-filter.list-item {
    max-width: 300px;
    height: auto;
  }
  .page-centralized .box-toolbar .box-left, .page-centralized .box-toolbar .box-right, .page-centralized .box-toolbar .select-action {
    width: 100%;
  }
  .page-centralized .box-toolbar .select-action {
    margin-right: 0;
  }
  .page-centralized .box-toolbar .select-action:not(:last-child) {
    margin-bottom: 10px;
  }
  .page-planning-rough .box-toolbar.cs-w01 .box-left.box01 .gr-search {
    width: 300px;
    margin-right: 15px;
  }
}
@media screen and (max-width: 1170px) {
  .box-toolbar.summary-sawnpart .item {
    width: 100%;
    margin-bottom: 15px;
  }
  .tab_box02 .box-toolbar .item {
    width: 100%;
    margin-right: 0;
  }
  .tab_box07 .heading01 {
    width: 100%;
  }
  .tab_box07 .heading01 .txt {
    margin-top: 10px;
  }
}
.heading01 {
  color: #ccc;
  font-weight: 500;
  margin-bottom: 0;
}
.heading01 .txt {
  display: inline-block;
}
.heading01 .txt:not(:last-child) {
  margin-right: 13px;
}
.heading01 .number {
  margin-left: 10px;
  color: #60C6FF;
  font-size: 15px;
}

input[name=search] {
  padding: 3px 0 2px 0;
  width: 100%;
  border: 1px solid #6d6d6d;
  border-radius: 50px;
  padding-right: 25px;
  padding-left: 15px;
  background: url(../images/magnifying-glass-solid.svg) no-repeat right 13px center/12px auto;
}

.tab_content .box-chart > select {
  margin-right: 15px;
}
.tab_content .box-chart > div:not(:last-child) {
  margin-right: 15px;
}
.tab_content .box-chart .ttl-datetimes {
  width: auto;
  min-width: 190px;
}

.box-filter {
  margin-right: 15px;
  padding-top: 2px;
  height: 26px;
}
.box-filter .filter {
  position: relative;
  z-index: 4;
  font-size: 20px;
  line-height: 1;
  transition: all 0.3s ease;
  cursor: pointer;
}
.box-filter .filter:hover {
  opacity: 0.7;
}
.box-filter .filter.active {
  color: #60C6FF;
  width: 24px;
  height: 21px;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2360c6ff; %7D .cls-2 %7B fill: %23b60000; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-2' d='m13.5,7c-2.49,0-4.5,2.01-4.5,4.5s2.01,4.5,4.5,4.5,4.5-2.01,4.5-4.5-2.01-4.5-4.5-4.5Zm1.85,5.65c.19.19.19.51,0,.71-.19.19-.51.19-.71,0l-1.15-1.15-1.15,1.15c-.19.19-.51.19-.71,0-.19-.19-.19-.51,0-.71l1.15-1.15-1.15-1.15c-.19-.19-.19-.51,0-.71.19-.19.51-.19.71,0l1.15,1.15,1.15-1.15c.19-.19.51-.19.71,0,.19.19.19.51,0,.71l-1.15,1.15,1.15,1.15Z'/%3E%3Cpath class='cls-1' d='m.12.72c.21-.44.64-.72,1.13-.72h13.5c.48,0,.92.28,1.13.72.21.44.14.95-.16,1.33l-3.33,4.07c-2.51.52-4.39,2.73-4.39,5.39,0,.86.2,1.67.55,2.39-.05-.02-.1-.06-.15-.09l-2-1.5c-.25-.19-.4-.48-.4-.8v-2.47L.28,2.04C-.02,1.67-.09,1.15.12.72Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.box-filter .gr-ct-filter {
  position: absolute;
  top: calc(100% + 6px);
  max-width: 95%;
  left: 0;
  z-index: 100;
  color: #ccc;
  background: #161616;
  padding: 10px;
  border-radius: 6px;
  display: none;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5);
}
.box-filter .gr-ct-filter.active {
  display: block;
}
.box-filter .gr-ct-filter.list-item {
  padding: 0;
  width: 200px;
}
.box-filter .gr-ct-filter.list-item .list {
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.box-filter .gr-ct-filter.list-item .list:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.box-filter .gr-ct-filter.list-item .list.active, .box-filter .gr-ct-filter.list-item .list:hover, .box-filter .gr-ct-filter.list-item .list:active, .box-filter .gr-ct-filter.list-item .list:focus {
  background-color: rgba(255, 255, 255, 0.2);
}
.box-filter .gr-ct-filter .gr-wp-filter::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.box-filter .gr-ct-filter .gr-wp-filter::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.box-filter .gr-ct-filter .gr-wp-filter::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
.box-filter .gr-ct-filter .gr-wp-filter ::-webkit-scrollbar-thumb {
  background-color: #161616;
}
.box-filter .gr-ct-filter .gr-wp-filter.filter-scroll {
  max-height: 500px;
  overflow: auto;
}
.box-filter .gr-ct-filter .filter-col02 {
  width: calc(50% - 6px);
}
.box-filter .gr-ct-filter .filter-col02.filter-full {
  width: 100%;
}
.box-filter.filter-right .gr-ct-filter {
  left: auto;
  right: 0;
}
.box-filter .content-filter .block > div {
  margin-bottom: 12px;
}
.box-filter .content-filter .block > div:last-child {
  margin-bottom: 0;
}
.box-filter .content-filter .filter-item {
  margin-bottom: 8px;
}
.box-filter .content-filter .filter-item:not(:last-child) {
  margin-right: 8px;
}
.box-filter .content-filter .filter-item input[type=checkbox] {
  display: none;
}
.box-filter .content-filter .filter-item .label-filter {
  padding: 2px 7px 1px;
  border-radius: 4px;
  line-height: 1.3;
  transition: all 0.3s ease;
  border: 1px solid #444;
  display: inline-block;
}
.box-filter .content-filter .filter-item .label-filter:hover {
  border-color: #19A1FB;
}
.box-filter .content-filter .filter-item .label-filter.active {
  border-color: #19A1FB;
  background: #19A1FB;
  color: #fff;
}
.box-filter .content-filter .ttl-sub {
  margin-bottom: 10px;
  margin-right: 10px;
  color: #fff;
}
.box-filter .content-filter .ttl {
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 10px;
}
.box-filter .content-filter .bg-filter {
  padding: 7px 10px 2px;
  border-radius: 6px;
  background: #222;
}
.box-filter .content-filter .bg-filter.pb {
  padding-bottom: 10px;
}
.box-filter .content-filter .filter-advanced-search-textbox {
  display: flex;
  flex-wrap: wrap;
}
.box-filter .content-filter .filter-advanced-search-textbox.filter-box-all-shape {
  width: 110px;
  padding-bottom: 7px;
}
.box-filter .content-filter .filter-advanced-search-textbox.filter-box-all-shape .filter-item {
  margin-bottom: 0;
}
.box-filter .content-filter .filter-advanced-search-textbox.filter-box-all-shape .filter-item .label-filter {
  color: #fff;
}
.box-filter .content-filter .filter-advanced-search-textbox.filter-box-textbox {
  width: calc(100% - 240px);
  margin-left: 0px;
}
.box-filter .content-filter .filter-advanced-search-textbox.filter-shape-batch {
  width: 135px;
  padding-bottom: 10px;
}
.box-filter .content-filter .block-filter:not(:last-child) {
  margin-right: 15px;
}
.box-filter .content-filter .block-filter:not(:last-child) input[name=date] {
  height: 18px;
  background-size: 12px auto;
}
.box-filter .content-filter .block-filter .label-filter-title {
  display: block;
  color: #fff;
}
.box-filter .content-filter .block-filter .box-filterTypeColorYehuda {
  position: relative;
  z-index: 3;
  width: 180px;
}
.box-filter .content-filter .componentWrapper > .title {
  margin-bottom: 8px;
  color: #fff;
  font-weight: bold;
}
.box-filter .content-filter .componentWrapper > .title.title-shape-selected {
  padding-bottom: 5px;
  border-bottom: 1px solid #444;
}
.box-filter .content-filter .componentWrapper .content-sub {
  display: flex;
  flex-wrap: wrap;
}
.box-filter .content-filter .componentWrapper .content-sub > div:not(:last-child) {
  margin-right: 8px;
}
.box-filter .content-filter .componentWrapper .content-sub .shape {
  width: 109px;
  min-width: 74px;
  text-align: center;
  display: flex;
  align-items: center;
  border: 1px solid #444;
  padding: 5px 5px;
  transition: all 0.3s ease;
  border-radius: 4px;
  background: #161616;
  cursor: pointer;
  margin-bottom: 8px;
}
.box-filter .content-filter .componentWrapper .content-sub .shape:not(:last-child) {
  margin-right: 8px;
}
.box-filter .content-filter .componentWrapper .content-sub .shape span {
  margin-left: 5px;
  display: block;
}
.box-filter .content-filter .componentWrapper .content-sub .shape img {
  width: 24px;
}
.box-filter .content-filter .componentWrapper .content-sub .shape.shape-selected {
  border-color: #19a1fb;
}
.box-filter .content-filter .componentWrapper .content-sub .shape.shape-selected span {
  color: #19a1fb;
}
.box-filter .content-filter .componentWrapper .content-sub .shape:hover {
  border-color: #19a1fb;
}
.box-filter .content-filter .componentWrapper .tilte {
  font-weight: 500;
}
.box-filter .content-filter .componentWrapper .item-list-option .name {
  color: #fff;
  font-weight: bold;
}
.box-filter .content-filter input:checked {
  accent-color: #60C6FF;
  opacity: 1 !important;
}
.box-filter .footer-advanced-search {
  display: flex;
  justify-content: flex-end;
}
.box-filter .footer-advanced-search .cm-button {
  margin-top: 10px;
}
.box-filter .footer-advanced-search .cm-button:not(:last-child) {
  margin-right: 10px;
}
.box-filter.apply-comment-option {
  position: relative;
  width: 80px;
  margin-right: 0;
  cursor: pointer;
}
.box-filter.apply-comment-option .gr-ct-filter.list-item {
  top: 100%;
  max-width: none;
  width: 100%;
}
.box-filter.filter-tab-burgundy .content-filter .filter-advanced-search-textbox.filter-box-textbox {
  width: calc(100% - 366px);
}

.centralized-option-filter .ttl {
  font-weight: bold;
  color: #e94434;
}
.centralized-option-filter .aside_filter .info .list-order li {
  padding-left: 17px;
}
.centralized-option-filter .aside_filter .info .list-order li::before {
  background: #ccc;
  left: 9px;
}
.centralized-option-filter .aside_filter .info .list-order li .or-ttl {
  color: #ccc;
}
.centralized-option-filter .aside_filter .info .list-order .note {
  margin-left: 8px;
}

.planning-rough-toolbar .box-filter .content-filter .filter-advanced-search-textbox.filter-box-textbox {
  width: calc(100% - 122px);
}

@media screen and (min-width: 1280px) {
  .page-centralized .box-filter .gr-ct-filter {
    min-width: 978px;
  }
  .box-filter .gr-ct-filter.filterApproved {
    min-width: 1000px;
  }
  .box-filter.filter-tab-burgundy .gr-ct-filter.filterApproved {
    min-width: 1148px;
  }
  .planning-rough-toolbar .box-filter .gr-ct-filter {
    min-width: 570px;
  }
}
.DarkMode .box-filter.apply-comment-option .gr-ct-filter.list-item {
  background: #333;
}

.section-filter {
  position: relative;
  z-index: 3;
}
.section-filter:hover .filter-tooltip {
  display: block;
}
.section-filter .filter-tooltip {
  position: absolute;
  z-index: 2;
  top: calc(100% + 6px);
  left: 0;
  width: 250px;
  background: #121829;
  padding: 6px 10px 1px;
  color: #fff;
  font-size: 12px;
  border-radius: 6px;
  display: none;
}
.section-filter .filter-tooltip .info {
  line-height: 1.3;
  color: #60c6ff;
  margin-bottom: 3px;
}
.section-filter .filter-tooltip .info .ttl {
  margin-right: 5px;
  color: #ccc;
}

input[type=checkbox] {
  position: relative;
  z-index: 0;
  top: 3px;
  height: 16px;
  width: 16px;
  background-color: #ccc;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 5px;
  outline: 0;
  border: 1px solid #ccc;
  place-content: center;
  -webkit-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
input[type=checkbox]:checked {
  border-color: #60C6FF;
}
input[type=checkbox]:checked::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") no-repeat center #60C6FF;
  z-index: 3;
}

.gr-gridblock .box {
  width: 29px;
  height: 25px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-right: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.gr-gridblock .box.active {
  background: #60C6FF;
}
.gr-gridblock .box:hover {
  opacity: 0.7;
}
.gr-gridblock .box:last-child span {
  transform: rotate(90deg);
}
.gr-gridblock span {
  display: block;
  position: relative;
  z-index: 0;
  width: 15px;
  height: 3px;
  background: #000;
}
.gr-gridblock span::before, .gr-gridblock span::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background: #000;
}
.gr-gridblock span::before {
  top: -5px;
}
.gr-gridblock span::after {
  bottom: -5px;
}

.cm-btn-create {
  background: #002443;
  color: #fff !important;
}
.cm-btn-create:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}
.cm-btn-create:hover:after {
  left: 0;
  width: 100%;
}

.cm-block .block {
  border-radius: 6px;
  background: #161616;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 0;
}
.cm-block .block::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: url(../images/icon-bg.png) no-repeat center/contain;
  top: 0;
  right: 0;
  width: 62px;
  height: 62px;
}
.cm-block .block .btn-save {
  margin-left: auto;
}
.cm-block .block select option {
  background: #161616;
}
.cm-block .title-style {
  font-size: 16px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #2b2b2b;
  position: relative;
}
.cm-block .btn-create-role {
  display: table;
  margin-left: auto;
  margin-right: 50px;
  position: relative;
  z-index: 0;
  margin-bottom: 15px;
  padding: 5px 15px 4px;
  border-radius: 50px;
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  cursor: pointer;
}
.cm-block .block-detail {
  color: #D1D1D1;
}
.cm-block .block-detail .item {
  display: flex;
}
.cm-block .block-detail .ttl {
  width: 85px;
}
.cm-block .block-detail .txt-box {
  width: calc(100% - 85px);
}
.cm-block .block-detail .txt-box input {
  border-color: #2b2b2b;
}
.cm-block .vsb-menu {
  background: #333;
}
.cm-block .vsb-js-search-zone {
  background: #333;
}

.content-employee .cm-block .title-style {
  margin-bottom: 15px;
}

@media screen and (max-width: 1910px) {
  .cm-block .gr-stock-header .box-left {
    width: 100%;
  }
  .cm-block .gr-stock-header .box-right {
    width: 100%;
    margin-top: 10px;
  }
  .cm-block .gr-stock-header .box-reportrange {
    width: calc(100% - 196px);
    margin-right: 0;
  }
}
@media screen and (max-width: 1170px) {
  .cm-block .block {
    width: 100%;
  }
  .cm-block .block:not(:last-child) {
    margin-bottom: 30px;
  }
}
.btn-save {
  width: 110px;
}

#fileUpload {
  border: none;
}

input[type=file]::file-selector-button {
  margin-right: 10px;
  border: none;
  background: #ccc;
  padding: 3px 8px;
  border-radius: 40px;
  color: #000;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
}

input[type=file]::file-selector-button:hover {
  opacity: 0.7;
}

.gr-stock-header {
  margin-bottom: 15px;
}
.gr-stock-header .gr-search {
  margin-right: 15px;
}
.gr-stock-header input[name=search] {
  width: 180px;
}
.gr-stock-header .gr-btn .cm-button {
  width: 100px;
}
.gr-stock-header .page {
  margin-left: 15px;
}

.box-reportrange {
  margin-right: 15px;
  width: 200px;
}

.content-healthy .content {
  align-items: flex-end;
  position: relative;
}
.content-healthy .gr-btn {
  position: relative;
  z-index: 0;
}
.content-healthy .block01 .b-left {
  align-items: center;
}
.content-healthy .block01 .group-btn {
  margin-left: 0;
}
.content-healthy .tab-summary .block01 .b-left {
  width: auto;
}

@media screen and (min-width: 1280px) and (max-width: 1740px) {
  .content-invoice-tracking .tab-progress-report .box-toolbar .b-left, .content-invoice-tracking .tab-progress-report .box-toolbar .box-right {
    width: 100%;
  }
  .content-invoice-tracking .tab-progress-report .box-toolbar .b-left {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 1600px) {
  .content-invoice-tracking .content .gr-btn {
    width: 100%;
    margin-top: 15px;
    justify-content: flex-start;
  }
  .content-healthy .block01 .analysis-top .b-right {
    margin-top: 15px;
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  .content-healthy .block01 .b-left {
    width: 100%;
    justify-content: flex-start;
  }
  .content-healthy .block01 .b-left + .gr-btn {
    margin-top: 15px;
  }
  .content-analysis .tab_box05 .gr-btn {
    margin-top: 15px;
  }
  .content-analysis .clarity-change {
    font-weight: bold;
    color: #60c6ff;
  }
  .content-analysis .clarity-title {
    margin-right: 20px;
  }
  .content-invoice-tracking .tab-progress-report .box-toolbar .gr-search {
    width: 100%;
    max-width: 300px;
    margin-top: 15px;
  }
  .content-invoice-tracking .content .gr-btn {
    width: auto;
  }
}
@media screen and (min-width: 751px) and (max-width: 1400px) {
  .content-invoice-tracking .tab-progress-report .box-multiselect {
    width: calc(33% - 15px);
  }
}
@media screen and (max-width: 1279px) {
  .content-healthy .block01 .analysis-top .gr-radiobox {
    margin-top: 15px;
    width: 100%;
    justify-content: flex-start;
  }
}
.box-multiselect {
  position: relative;
  margin-right: 15px;
  width: 180px;
}
.box-multiselect:nth-child(1) {
  z-index: 3;
}
.box-multiselect:nth-child(2) {
  z-index: 2;
}
.box-multiselect.w-lag-220 {
  width: 220px;
}
.box-multiselect.w100 .box-select {
  width: 100%;
}
.box-multiselect.w100 .vsb-main {
  width: 100%;
}
.box-multiselect .vsb-main {
  display: block;
}

.box-multiselect-big {
  width: 368px;
}

.box-select-w100 select {
  width: 100%;
}

@media screen and (max-width: 1400px) {
  .box-multiselect-big {
    width: 368px;
  }
}
@media screen and (max-width: 1170px) {
  .content-healthy .box-reportrange {
    width: calc(50% - 15px);
  }
  .content-healthy .box-multiselect {
    width: calc(25% - 8px);
  }
  .content-healthy .box-multiselect.last {
    margin-right: 0;
  }
  .content-healthy .gr-btn {
    margin-top: 15px;
  }
  .content-analysis .tab_box03 .box-multiselect {
    width: auto;
  }
}
@media screen and (max-width: 1170px) {
  .manufacturing-production .gr-btn {
    margin-top: 0;
  }
}
@media screen and (max-width: 1400px) {
  .manufacturing-production .box-toolbar .gr-btn {
    margin-top: 10px;
    width: 100%;
    justify-content: flex-start;
  }
}
.icon-nav-right {
  position: fixed;
  top: 146px;
  right: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  z-index: 10002;
  background: #121829;
  cursor: pointer;
  writing-mode: vertical-rl;
  color: #ccc;
  padding: 10px 2px 10px;
  border: 1px solid #2b2b2b;
  border-right: none;
  letter-spacing: 0.05em;
}
.icon-nav-right .icon {
  display: inline-block;
  width: 8px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='10' viewBox='0 0 320 512' fill='%23757575'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E") no-repeat center/8px auto;
  transition: all 0.2s ease;
}
.icon-nav-right .txt {
  display: inline-block;
  margin-top: 8px;
}
.icon-nav-right.icon-nav-right-order {
  top: 300px;
  z-index: 10000;
}
.icon-nav-right.active {
  padding: 10px 1px 9px 3px;
  background-color: #17a2b8;
  border-color: transparent;
  color: #fff;
}
.icon-nav-right.active .icon {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='10' viewBox='0 0 320 512' fill='%23fff'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
}
.icon-nav-right.active .txt {
  display: none;
}

.nav-right {
  position: fixed;
  right: 0;
  z-index: 10001;
  top: 177px;
  bottom: 74px;
  width: 435px;
  background: #292929;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  overflow: hidden;
  transform: translateX(120%);
  transition: all 0.5s ease;
}
.nav-right.active {
  transform: translateX(0);
}
.nav-right.nav-right-order {
  top: 331px;
  z-index: 10000;
  width: 530px;
}
.nav-right.nav-right-order .box-planSelected .or-detail {
  padding-left: 16px;
}
.nav-right.nav-right-order .box-planSelected .or-detail .item-order:not(:last-child) {
  margin-bottom: 6px;
}
.nav-right.nav-right-order .box-planSelected .planSelect-content-toggle {
  font-size: 12px;
}
.nav-right.nav-right-order .box-planSelected .planSelect-content-toggle .txt {
  margin-bottom: 4px;
  line-height: 1.4;
}
.nav-right.nav-right-order .box-planSelected .planSelect-content-toggle .txt::before {
  top: 6px;
}
.nav-right.nav-right-order .box-planSelected .content {
  padding-top: 6px;
  position: relative;
}
.nav-right.nav-right-order .box-planSelected .or-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 265px;
}
.nav-right.nav-right-order .box-planSelected .or-box .ttl {
  display: block;
  font-weight: bold;
  text-align: center;
  font-size: 12px;
  margin-right: 0;
  width: 76px;
  padding-left: 0;
  font-size: 15px;
}
.nav-right.nav-right-order .box-planSelected .or-box .ttl::before {
  content: none;
}
.nav-right.nav-right-order .box-planSelected .or-box .ttl.column-wip.active {
  color: #60c6ff;
}
.nav-right.nav-right-order .box-planSelected .title-order {
  padding-left: 10px;
  padding-right: 10px;
  align-items: flex-start;
  justify-content: space-between;
  background: #121829;
}
.nav-right.nav-right-order .box-planSelected .title-order .or-name {
  width: calc(100% - 205px);
  display: block;
  padding-top: 2px;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-right.nav-right-order .box-planSelected .customer-name {
  background-color: transparent;
  color: #fff;
  margin-bottom: 5px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
}
.nav-right.nav-right-order .box-planSelected .customer-name .ic {
  font-size: 11px;
  margin-right: 6px;
  position: relative;
  top: -1px;
  line-height: 0;
  color: #60C6FF;
}
.nav-right.nav-right-order .box-planSelected .customer-name .name {
  width: calc(100% - 235px);
  cursor: pointer;
  transition: all 0.3s ease;
}
.nav-right.nav-right-order .box-planSelected .customer-name .name:hover {
  color: #60C6FF;
}
.nav-right.nav-right-order .box-planSelected .customer-name .ttl-value {
  display: flex;
  width: 230px;
}
.nav-right.nav-right-order .box-planSelected .customer-name .ttl-value .ttl {
  width: 76px;
  text-align: center;
}
.nav-right.nav-right-order .box-planSelected .customer-name .ttl-value1 {
  display: flex;
  width: 260px;
}
.nav-right.nav-right-order .box-planSelected .customer-name .ttl-value1 .ttl1 {
  width: 120px;
  text-align: center;
}
.nav-right.nav-right-order .box-planSelected .customer-name .ttl-value1 .ttl2 {
  width: 90px;
  text-align: center;
}
.nav-right.nav-right-order .gr-nav-right-content {
  padding-bottom: 12px;
}
.nav-right.nav-right-order .or-note {
  background: #292929;
  padding: 5px 10px;
  border-radius: 4px;
}
.nav-right.nav-right-order .planSelect-content-toggle .stone-part {
  padding-bottom: 0;
  margin-bottom: 0;
  border: none;
}
.nav-right.nav-right-order .planSelect-content-toggle .txt {
  margin-bottom: 5px;
  margin-top: 0;
}
.nav-right::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #60C6FF;
}
.nav-right .gr-nav-right-content {
  position: relative;
  z-index: 0;
  height: 100%;
  padding: 12px 12px 70px;
}
.nav-right .gr-nav-right-content.no-caption {
  padding-bottom: 17px;
}
.nav-right .nav-content {
  height: 100%;
  overflow: auto;
}
.nav-right .nav-content::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.nav-right .nav-content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.nav-right .nav-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
.nav-right .nav-content::-webkit-scrollbar-thumb {
  background-color: #1a1a1a;
}
.nav-right .nav-content .tabs li .sum {
  padding: 2px 5px 1px;
  border-radius: 4px;
  display: inline-block;
  margin-left: 4px;
  background: rgba(204, 204, 204, 0.15);
  line-height: 1;
  font-size: 11px;
  position: relative;
  top: -1px;
}
.nav-right .nav-content .tabs li.active .sum {
  background: rgba(0, 158, 246, 0.2);
}
.nav-right .nav-title {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  line-height: 1.3;
  border-bottom: 1px solid #6d6d6d;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 20px;
  position: relative;
}
.nav-right .nav-title:first-child, .nav-right .nav-title.ttl-first {
  margin-top: 0;
}
.nav-right .nav-title .icon {
  position: relative;
  top: -1px;
  z-index: 0;
  margin-left: 15px;
  background: #000;
  padding: 2px 10px 1px;
  border-radius: 4px;
}
.nav-right .nav-title .icon::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid #000;
}
.nav-right .nav-title .icon-down {
  position: absolute;
  z-index: -1;
  right: 10px;
}
.nav-right .nav-title .gr-icon {
  padding-right: 30px;
}
.nav-right .nav-title [class*=icon] {
  cursor: pointer;
  transition: all 0.3s ease;
}
.nav-right .nav-title [class*=icon]:hover {
  opacity: 0.7;
}
.nav-right .nav-title .arrow {
  display: inline-block;
  margin: 0 8px;
  font-size: 11px;
  line-height: 19px;
}
.nav-right .nav-title.mly-menu-sub {
  color: #60c6ff;
  border-color: rgba(255, 255, 255, 0.1);
}
.nav-right .nav-title .icon-list {
  margin-right: 3px;
}
.nav-right .nav-title.active .icon-down i {
  transform: rotate(180deg) translateY(1px);
}
.nav-right .icon-export {
  cursor: pointer;
  color: #17A2B8;
}
.nav-right .tabs a {
  font-size: 14px;
}
.nav-right .tabs li {
  margin-right: 12px;
}
.nav-right .nav-tab-content {
  height: calc(100% - 120px);
}
.nav-right .nav-tab-content.logbookV360Aset {
  height: calc(100% - 44px);
}

.icon-nav-right.icon-nav-right-home {
  top: 215px;
}

.nav-right.nav-right-home {
  top: 247px;
}

.nav-footer {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
}
.nav-footer li {
  position: relative;
  z-index: 0;
  padding-left: 17px;
  width: calc(33.3333333333% - 4px);
  margin-right: 6px;
}
.nav-footer li:nth-child(3n) {
  margin-right: 0;
}
.nav-footer li::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: calc(50% - 6px);
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.nav-footer .nav-white::before {
  background: #ccc;
}
.nav-footer .nav-blue {
  color: #60C6FF;
}
.nav-footer .nav-blue::before {
  background: #60C6FF;
}
.nav-footer .nav-green {
  color: #008b00;
}
.nav-footer .nav-green::before {
  background: #008b00;
}
.nav-footer .nav-red {
  color: #E94434;
}
.nav-footer .nav-red::before {
  background: #E94434;
}
.nav-footer .nav-orange {
  color: #EF6C00;
}
.nav-footer .nav-orange::before {
  background: #EF6C00;
}
.nav-footer .nav-yellow {
  color: #f7ba08;
}
.nav-footer .nav-yellow::before {
  background: #f7ba08;
}

.page-planning-rough .nav-right {
  bottom: 117px;
}

.box-planSelected {
  margin-bottom: 10px;
}
.box-planSelected .ttl-toggle {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  padding: 5px 80px 4px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 0;
  border-bottom: 1px solid #242424;
}
.box-planSelected .ttl-toggle .icon, .box-planSelected .ttl-toggle .icon-export, .box-planSelected .ttl-toggle .icon-list {
  position: absolute;
  z-index: -1;
}
.box-planSelected .ttl-toggle .icon {
  right: 10px;
  color: #b5b5b5;
}
.box-planSelected .ttl-toggle.active {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-color: rgba(255, 255, 255, 0.2);
}
.box-planSelected .ttl-toggle.active .icon {
  transform: rotate(180deg) translateY(1px);
  color: #b5b5b5;
}
.box-planSelected .ttl-toggle:hover {
  opacity: 0.7;
}
.box-planSelected .ttl-toggle .icon-export {
  right: 30px;
}
.box-planSelected .ttl-toggle .icon-list {
  top: 6px;
  right: 53px;
}
.box-planSelected .ttl-toggle .ttl {
  display: flex;
  position: relative;
  z-index: 0;
  padding-left: 13px;
}
.box-planSelected .ttl-toggle .ttl:not(:last-child) {
  margin-right: 10px;
}
.box-planSelected .ttl-toggle .ttl::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.box-planSelected .ttl-toggle .ttl.no-legend {
  padding-left: 0;
}
.box-planSelected .ttl-toggle .history-approved::before {
  background: #008b00;
}
.box-planSelected .ttl-toggle .history-urgent::before {
  background: #f7ba08;
}
.box-planSelected .ttl-toggle .history-comment::before {
  background: #ccc;
}
.box-planSelected .ttl-toggle .history-replan::before {
  background: #ef6c00;
}
.box-planSelected .ttl-toggle .history-reject::before {
  background: #E94434;
}
.box-planSelected .ttl-toggle .date {
  display: inline-block;
  background: #b5b5b5;
  color: #1E1E1E;
  font-weight: 700;
  border-radius: 0 2px 2px 0;
  padding: 2px 10px 0.05em;
  margin-right: 8px;
  line-height: 1;
  font-size: 90%;
}
.box-planSelected .ttl-toggle .date.ac-name {
  width: 78px;
  padding-bottom: 0.18em;
}
.box-planSelected .content {
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.planSelect-content-toggle {
  font-size: 13px;
}
.planSelect-content-toggle:not(:last-child) {
  margin-bottom: 25px;
}
.planSelect-content-toggle .stone-part {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.planSelect-content-toggle .title-category {
  line-height: 1;
}
.planSelect-content-toggle .ttl-stone-part {
  background: #b5b5b5;
  color: #1e1e1e;
  font-weight: bold;
  padding: 3px 8px 2px;
  margin-bottom: 10px;
  border-radius: 2px;
}
.planSelect-content-toggle .ttl-stone-part .icon {
  line-height: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.planSelect-content-toggle .ttl-stone-part .icon:hover {
  opacity: 0.7;
}
.planSelect-content-toggle .tr-main-blue {
  color: #60C6FF;
}
.planSelect-content-toggle .tr-main-blue a {
  color: #60C6FF;
}
.planSelect-content-toggle .tr-main-red {
  color: #E94434;
}
.planSelect-content-toggle .tr-main-red a {
  color: #E94434;
}
.planSelect-content-toggle .tr-main-green {
  color: #008b00;
}
.planSelect-content-toggle .tr-main-green a {
  color: #008b00;
}
.planSelect-content-toggle .tr-main-orange {
  color: #EF6C00;
}
.planSelect-content-toggle .tr-main-orange a {
  color: #EF6C00;
}
.planSelect-content-toggle .tr-main-yellow {
  color: #f7ba08;
}
.planSelect-content-toggle .tr-main-yellow a {
  color: #f7ba08;
}
.planSelect-content-toggle .tr-main {
  font-weight: 500;
}
.planSelect-content-toggle .tr-main .by {
  margin-left: 5px;
  float: right;
}
.planSelect-content-toggle .txt {
  position: relative;
  z-index: 0;
  padding-left: 10px;
  margin-top: 5px;
  margin-bottom: 0;
}
.planSelect-content-toggle .txt::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  background: #D1D1D1;
}
.planSelect-content-toggle .txt .partName {
  margin-right: 10px;
}
.planSelect-content-toggle .txt .partName .icon-arrown {
  margin: 0 3px;
  font-size: 11px;
  color: #E94434;
}
.planSelect-content-toggle .txt2 {
  margin-top: 5px;
}
.planSelect-content-toggle .txt2 span {
  display: block;
}
.planSelect-content-toggle .txt2.box-quality-rate {
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
}
.planSelect-content-toggle .txt2.box-quality-rate .ttl-quality {
  width: 46px;
}
.planSelect-content-toggle .txt2.box-quality-rate .part-txt {
  width: calc(100% - 51px);
  color: #60C6FF;
  font-weight: bold;
}
.planSelect-content-toggle .b-note {
  padding: 5px 10px;
  background: #292929;
  border-radius: 4px;
}
.planSelect-content-toggle .btn-queue {
  margin-left: auto;
  display: table;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  cursor: pointer;
  margin-top: 5px;
}
.planSelect-content-toggle .btn-queue a {
  min-width: 95px;
}

.planSelect-urgent .stone-part {
  padding-bottom: 6px;
}

.planSelected-content-history .planSelect-content-toggle {
  margin-bottom: 0;
}

.planSelected-content.planSelect-content-toggle {
  margin-bottom: 0;
}

.btn-batch {
  margin-right: 15px;
}

.txt-filtered-pending {
  color: #e94434;
}
.txt-filtered-pending .icon {
  margin-left: 2px;
  position: relative;
  top: 1px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.txt-filtered-pending .icon:hover {
  color: #e94434;
}
.txt-filtered-pending .txt-ft {
  color: #60c6ff;
}

/* Rounded*/
.tbl-switch {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 14px;
  vertical-align: middle;
  margin-left: 5px;
  margin-top: -2px;
}
.tbl-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.icon-round {
  border-radius: 12px;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #fff;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  margin-bottom: 0px;
}
.icon-round:before {
  content: "";
  position: absolute;
  z-index: -1;
  z-index: 1;
  height: 8px;
  width: 8px;
  left: 2px;
  bottom: 2px;
  border-radius: 50%;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.ttl-animation {
  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
.ttl-animation span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}
.ttl-animation span:nth-child(1) {
  animation: fade-in 0.8s 0.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(2) {
  animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(3) {
  animation: fade-in 0.8s 0.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(4) {
  animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(5) {
  animation: fade-in 0.8s 0.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(6) {
  animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(7) {
  animation: fade-in 0.8s 0.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(8) {
  animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(9) {
  animation: fade-in 0.8s 0.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(10) {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(11) {
  animation: fade-in 0.8s 0.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(12) {
  animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(13) {
  animation: fade-in 0.8s 0.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(14) {
  animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(15) {
  animation: fade-in 0.8s 0.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(16) {
  animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(17) {
  animation: fade-in 0.8s 0.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(18) {
  animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(19) {
  animation: fade-in 0.8s 0.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(20) {
  animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(21) {
  animation: fade-in 0.8s 1.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(22) {
  animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(23) {
  animation: fade-in 0.8s 1.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(24) {
  animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(25) {
  animation: fade-in 0.8s 1.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(26) {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(27) {
  animation: fade-in 0.8s 1.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(28) {
  animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(29) {
  animation: fade-in 0.8s 1.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(30) {
  animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(31) {
  animation: fade-in 0.8s 1.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(32) {
  animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(33) {
  animation: fade-in 0.8s 1.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(34) {
  animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(35) {
  animation: fade-in 0.8s 1.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(36) {
  animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(37) {
  animation: fade-in 0.8s 1.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(38) {
  animation: fade-in 0.8s 1.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(39) {
  animation: fade-in 0.8s 1.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(40) {
  animation: fade-in 0.8s 2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(41) {
  animation: fade-in 0.8s 2.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(42) {
  animation: fade-in 0.8s 2.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(43) {
  animation: fade-in 0.8s 2.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(44) {
  animation: fade-in 0.8s 2.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(45) {
  animation: fade-in 0.8s 2.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(46) {
  animation: fade-in 0.8s 2.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(47) {
  animation: fade-in 0.8s 2.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(48) {
  animation: fade-in 0.8s 2.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(49) {
  animation: fade-in 0.8s 2.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(50) {
  animation: fade-in 0.8s 2.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(51) {
  animation: fade-in 0.8s 2.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(52) {
  animation: fade-in 0.8s 2.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(53) {
  animation: fade-in 0.8s 2.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(54) {
  animation: fade-in 0.8s 2.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(55) {
  animation: fade-in 0.8s 2.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(56) {
  animation: fade-in 0.8s 2.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(57) {
  animation: fade-in 0.8s 2.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(58) {
  animation: fade-in 0.8s 2.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(59) {
  animation: fade-in 0.8s 2.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(60) {
  animation: fade-in 0.8s 3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(61) {
  animation: fade-in 0.8s 3.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(62) {
  animation: fade-in 0.8s 3.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(63) {
  animation: fade-in 0.8s 3.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(64) {
  animation: fade-in 0.8s 3.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(65) {
  animation: fade-in 0.8s 3.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(66) {
  animation: fade-in 0.8s 3.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(67) {
  animation: fade-in 0.8s 3.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(68) {
  animation: fade-in 0.8s 3.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(69) {
  animation: fade-in 0.8s 3.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(70) {
  animation: fade-in 0.8s 3.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(71) {
  animation: fade-in 0.8s 3.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(72) {
  animation: fade-in 0.8s 3.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(73) {
  animation: fade-in 0.8s 3.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(74) {
  animation: fade-in 0.8s 3.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(75) {
  animation: fade-in 0.8s 3.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(76) {
  animation: fade-in 0.8s 3.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(77) {
  animation: fade-in 0.8s 3.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(78) {
  animation: fade-in 0.8s 3.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(79) {
  animation: fade-in 0.8s 3.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(80) {
  animation: fade-in 0.8s 4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(81) {
  animation: fade-in 0.8s 4.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(82) {
  animation: fade-in 0.8s 4.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(83) {
  animation: fade-in 0.8s 4.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(84) {
  animation: fade-in 0.8s 4.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(85) {
  animation: fade-in 0.8s 4.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(86) {
  animation: fade-in 0.8s 4.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(87) {
  animation: fade-in 0.8s 4.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(88) {
  animation: fade-in 0.8s 4.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(89) {
  animation: fade-in 0.8s 4.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(90) {
  animation: fade-in 0.8s 4.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(91) {
  animation: fade-in 0.8s 4.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(92) {
  animation: fade-in 0.8s 4.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(93) {
  animation: fade-in 0.8s 4.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(94) {
  animation: fade-in 0.8s 4.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(95) {
  animation: fade-in 0.8s 4.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(96) {
  animation: fade-in 0.8s 4.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(97) {
  animation: fade-in 0.8s 4.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(98) {
  animation: fade-in 0.8s 4.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(99) {
  animation: fade-in 0.8s 4.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(100) {
  animation: fade-in 0.8s 5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(101) {
  animation: fade-in 0.8s 5.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(102) {
  animation: fade-in 0.8s 5.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(103) {
  animation: fade-in 0.8s 5.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(104) {
  animation: fade-in 0.8s 5.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(105) {
  animation: fade-in 0.8s 5.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(106) {
  animation: fade-in 0.8s 5.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(107) {
  animation: fade-in 0.8s 5.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(108) {
  animation: fade-in 0.8s 5.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(109) {
  animation: fade-in 0.8s 5.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(110) {
  animation: fade-in 0.8s 5.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(111) {
  animation: fade-in 0.8s 5.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(112) {
  animation: fade-in 0.8s 5.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(113) {
  animation: fade-in 0.8s 5.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(114) {
  animation: fade-in 0.8s 5.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(115) {
  animation: fade-in 0.8s 5.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(116) {
  animation: fade-in 0.8s 5.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(117) {
  animation: fade-in 0.8s 5.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(118) {
  animation: fade-in 0.8s 5.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(119) {
  animation: fade-in 0.8s 5.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(120) {
  animation: fade-in 0.8s 6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(121) {
  animation: fade-in 0.8s 6.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(122) {
  animation: fade-in 0.8s 6.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(123) {
  animation: fade-in 0.8s 6.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(124) {
  animation: fade-in 0.8s 6.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(125) {
  animation: fade-in 0.8s 6.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(126) {
  animation: fade-in 0.8s 6.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(127) {
  animation: fade-in 0.8s 6.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(128) {
  animation: fade-in 0.8s 6.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(129) {
  animation: fade-in 0.8s 6.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(130) {
  animation: fade-in 0.8s 6.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(131) {
  animation: fade-in 0.8s 6.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(132) {
  animation: fade-in 0.8s 6.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(133) {
  animation: fade-in 0.8s 6.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(134) {
  animation: fade-in 0.8s 6.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(135) {
  animation: fade-in 0.8s 6.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(136) {
  animation: fade-in 0.8s 6.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(137) {
  animation: fade-in 0.8s 6.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(138) {
  animation: fade-in 0.8s 6.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(139) {
  animation: fade-in 0.8s 6.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(140) {
  animation: fade-in 0.8s 7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(141) {
  animation: fade-in 0.8s 7.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(142) {
  animation: fade-in 0.8s 7.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(143) {
  animation: fade-in 0.8s 7.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(144) {
  animation: fade-in 0.8s 7.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(145) {
  animation: fade-in 0.8s 7.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(146) {
  animation: fade-in 0.8s 7.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(147) {
  animation: fade-in 0.8s 7.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(148) {
  animation: fade-in 0.8s 7.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(149) {
  animation: fade-in 0.8s 7.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(150) {
  animation: fade-in 0.8s 7.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(151) {
  animation: fade-in 0.8s 7.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(152) {
  animation: fade-in 0.8s 7.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(153) {
  animation: fade-in 0.8s 7.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(154) {
  animation: fade-in 0.8s 7.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(155) {
  animation: fade-in 0.8s 7.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(156) {
  animation: fade-in 0.8s 7.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(157) {
  animation: fade-in 0.8s 7.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(158) {
  animation: fade-in 0.8s 7.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(159) {
  animation: fade-in 0.8s 7.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(160) {
  animation: fade-in 0.8s 8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(161) {
  animation: fade-in 0.8s 8.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(162) {
  animation: fade-in 0.8s 8.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(163) {
  animation: fade-in 0.8s 8.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(164) {
  animation: fade-in 0.8s 8.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(165) {
  animation: fade-in 0.8s 8.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(166) {
  animation: fade-in 0.8s 8.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(167) {
  animation: fade-in 0.8s 8.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(168) {
  animation: fade-in 0.8s 8.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(169) {
  animation: fade-in 0.8s 8.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(170) {
  animation: fade-in 0.8s 8.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(171) {
  animation: fade-in 0.8s 8.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(172) {
  animation: fade-in 0.8s 8.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(173) {
  animation: fade-in 0.8s 8.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(174) {
  animation: fade-in 0.8s 8.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(175) {
  animation: fade-in 0.8s 8.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(176) {
  animation: fade-in 0.8s 8.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(177) {
  animation: fade-in 0.8s 8.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(178) {
  animation: fade-in 0.8s 8.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(179) {
  animation: fade-in 0.8s 8.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(180) {
  animation: fade-in 0.8s 9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(181) {
  animation: fade-in 0.8s 9.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(182) {
  animation: fade-in 0.8s 9.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(183) {
  animation: fade-in 0.8s 9.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(184) {
  animation: fade-in 0.8s 9.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(185) {
  animation: fade-in 0.8s 9.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(186) {
  animation: fade-in 0.8s 9.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(187) {
  animation: fade-in 0.8s 9.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(188) {
  animation: fade-in 0.8s 9.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(189) {
  animation: fade-in 0.8s 9.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(190) {
  animation: fade-in 0.8s 9.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(191) {
  animation: fade-in 0.8s 9.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(192) {
  animation: fade-in 0.8s 9.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(193) {
  animation: fade-in 0.8s 9.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(194) {
  animation: fade-in 0.8s 9.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(195) {
  animation: fade-in 0.8s 9.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(196) {
  animation: fade-in 0.8s 9.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(197) {
  animation: fade-in 0.8s 9.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(198) {
  animation: fade-in 0.8s 9.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(199) {
  animation: fade-in 0.8s 9.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(200) {
  animation: fade-in 0.8s 10s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(201) {
  animation: fade-in 0.8s 10.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(202) {
  animation: fade-in 0.8s 10.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(203) {
  animation: fade-in 0.8s 10.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(204) {
  animation: fade-in 0.8s 10.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(205) {
  animation: fade-in 0.8s 10.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(206) {
  animation: fade-in 0.8s 10.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(207) {
  animation: fade-in 0.8s 10.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(208) {
  animation: fade-in 0.8s 10.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(209) {
  animation: fade-in 0.8s 10.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(210) {
  animation: fade-in 0.8s 10.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(211) {
  animation: fade-in 0.8s 10.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(212) {
  animation: fade-in 0.8s 10.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(213) {
  animation: fade-in 0.8s 10.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(214) {
  animation: fade-in 0.8s 10.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(215) {
  animation: fade-in 0.8s 10.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(216) {
  animation: fade-in 0.8s 10.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(217) {
  animation: fade-in 0.8s 10.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(218) {
  animation: fade-in 0.8s 10.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(219) {
  animation: fade-in 0.8s 10.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(220) {
  animation: fade-in 0.8s 11s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(221) {
  animation: fade-in 0.8s 11.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(222) {
  animation: fade-in 0.8s 11.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(223) {
  animation: fade-in 0.8s 11.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(224) {
  animation: fade-in 0.8s 11.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(225) {
  animation: fade-in 0.8s 11.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(226) {
  animation: fade-in 0.8s 11.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(227) {
  animation: fade-in 0.8s 11.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(228) {
  animation: fade-in 0.8s 11.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(229) {
  animation: fade-in 0.8s 11.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(230) {
  animation: fade-in 0.8s 11.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(231) {
  animation: fade-in 0.8s 11.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(232) {
  animation: fade-in 0.8s 11.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(233) {
  animation: fade-in 0.8s 11.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(234) {
  animation: fade-in 0.8s 11.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(235) {
  animation: fade-in 0.8s 11.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(236) {
  animation: fade-in 0.8s 11.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(237) {
  animation: fade-in 0.8s 11.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(238) {
  animation: fade-in 0.8s 11.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(239) {
  animation: fade-in 0.8s 11.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(240) {
  animation: fade-in 0.8s 12s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(241) {
  animation: fade-in 0.8s 12.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(242) {
  animation: fade-in 0.8s 12.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(243) {
  animation: fade-in 0.8s 12.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(244) {
  animation: fade-in 0.8s 12.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(245) {
  animation: fade-in 0.8s 12.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(246) {
  animation: fade-in 0.8s 12.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(247) {
  animation: fade-in 0.8s 12.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(248) {
  animation: fade-in 0.8s 12.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(249) {
  animation: fade-in 0.8s 12.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(250) {
  animation: fade-in 0.8s 12.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(251) {
  animation: fade-in 0.8s 12.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(252) {
  animation: fade-in 0.8s 12.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(253) {
  animation: fade-in 0.8s 12.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(254) {
  animation: fade-in 0.8s 12.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(255) {
  animation: fade-in 0.8s 12.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(256) {
  animation: fade-in 0.8s 12.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(257) {
  animation: fade-in 0.8s 12.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(258) {
  animation: fade-in 0.8s 12.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(259) {
  animation: fade-in 0.8s 12.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(260) {
  animation: fade-in 0.8s 13s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(261) {
  animation: fade-in 0.8s 13.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(262) {
  animation: fade-in 0.8s 13.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(263) {
  animation: fade-in 0.8s 13.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(264) {
  animation: fade-in 0.8s 13.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(265) {
  animation: fade-in 0.8s 13.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(266) {
  animation: fade-in 0.8s 13.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(267) {
  animation: fade-in 0.8s 13.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(268) {
  animation: fade-in 0.8s 13.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(269) {
  animation: fade-in 0.8s 13.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(270) {
  animation: fade-in 0.8s 13.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(271) {
  animation: fade-in 0.8s 13.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(272) {
  animation: fade-in 0.8s 13.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(273) {
  animation: fade-in 0.8s 13.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(274) {
  animation: fade-in 0.8s 13.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(275) {
  animation: fade-in 0.8s 13.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(276) {
  animation: fade-in 0.8s 13.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(277) {
  animation: fade-in 0.8s 13.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(278) {
  animation: fade-in 0.8s 13.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(279) {
  animation: fade-in 0.8s 13.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(280) {
  animation: fade-in 0.8s 14s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(281) {
  animation: fade-in 0.8s 14.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(282) {
  animation: fade-in 0.8s 14.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(283) {
  animation: fade-in 0.8s 14.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(284) {
  animation: fade-in 0.8s 14.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(285) {
  animation: fade-in 0.8s 14.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(286) {
  animation: fade-in 0.8s 14.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(287) {
  animation: fade-in 0.8s 14.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(288) {
  animation: fade-in 0.8s 14.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(289) {
  animation: fade-in 0.8s 14.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(290) {
  animation: fade-in 0.8s 14.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(291) {
  animation: fade-in 0.8s 14.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(292) {
  animation: fade-in 0.8s 14.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(293) {
  animation: fade-in 0.8s 14.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(294) {
  animation: fade-in 0.8s 14.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(295) {
  animation: fade-in 0.8s 14.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(296) {
  animation: fade-in 0.8s 14.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(297) {
  animation: fade-in 0.8s 14.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(298) {
  animation: fade-in 0.8s 14.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(299) {
  animation: fade-in 0.8s 14.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(300) {
  animation: fade-in 0.8s 15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(301) {
  animation: fade-in 0.8s 15.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(302) {
  animation: fade-in 0.8s 15.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(303) {
  animation: fade-in 0.8s 15.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(304) {
  animation: fade-in 0.8s 15.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(305) {
  animation: fade-in 0.8s 15.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(306) {
  animation: fade-in 0.8s 15.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(307) {
  animation: fade-in 0.8s 15.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(308) {
  animation: fade-in 0.8s 15.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(309) {
  animation: fade-in 0.8s 15.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(310) {
  animation: fade-in 0.8s 15.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(311) {
  animation: fade-in 0.8s 15.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(312) {
  animation: fade-in 0.8s 15.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(313) {
  animation: fade-in 0.8s 15.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(314) {
  animation: fade-in 0.8s 15.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(315) {
  animation: fade-in 0.8s 15.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(316) {
  animation: fade-in 0.8s 15.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(317) {
  animation: fade-in 0.8s 15.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(318) {
  animation: fade-in 0.8s 15.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(319) {
  animation: fade-in 0.8s 15.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(320) {
  animation: fade-in 0.8s 16s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(321) {
  animation: fade-in 0.8s 16.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(322) {
  animation: fade-in 0.8s 16.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(323) {
  animation: fade-in 0.8s 16.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(324) {
  animation: fade-in 0.8s 16.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(325) {
  animation: fade-in 0.8s 16.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(326) {
  animation: fade-in 0.8s 16.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(327) {
  animation: fade-in 0.8s 16.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(328) {
  animation: fade-in 0.8s 16.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(329) {
  animation: fade-in 0.8s 16.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(330) {
  animation: fade-in 0.8s 16.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(331) {
  animation: fade-in 0.8s 16.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(332) {
  animation: fade-in 0.8s 16.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(333) {
  animation: fade-in 0.8s 16.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(334) {
  animation: fade-in 0.8s 16.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(335) {
  animation: fade-in 0.8s 16.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(336) {
  animation: fade-in 0.8s 16.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(337) {
  animation: fade-in 0.8s 16.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(338) {
  animation: fade-in 0.8s 16.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(339) {
  animation: fade-in 0.8s 16.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(340) {
  animation: fade-in 0.8s 17s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(341) {
  animation: fade-in 0.8s 17.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(342) {
  animation: fade-in 0.8s 17.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(343) {
  animation: fade-in 0.8s 17.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(344) {
  animation: fade-in 0.8s 17.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(345) {
  animation: fade-in 0.8s 17.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(346) {
  animation: fade-in 0.8s 17.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(347) {
  animation: fade-in 0.8s 17.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(348) {
  animation: fade-in 0.8s 17.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(349) {
  animation: fade-in 0.8s 17.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(350) {
  animation: fade-in 0.8s 17.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(351) {
  animation: fade-in 0.8s 17.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(352) {
  animation: fade-in 0.8s 17.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(353) {
  animation: fade-in 0.8s 17.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(354) {
  animation: fade-in 0.8s 17.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(355) {
  animation: fade-in 0.8s 17.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(356) {
  animation: fade-in 0.8s 17.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(357) {
  animation: fade-in 0.8s 17.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(358) {
  animation: fade-in 0.8s 17.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(359) {
  animation: fade-in 0.8s 17.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(360) {
  animation: fade-in 0.8s 18s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(361) {
  animation: fade-in 0.8s 18.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(362) {
  animation: fade-in 0.8s 18.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(363) {
  animation: fade-in 0.8s 18.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(364) {
  animation: fade-in 0.8s 18.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(365) {
  animation: fade-in 0.8s 18.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(366) {
  animation: fade-in 0.8s 18.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(367) {
  animation: fade-in 0.8s 18.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(368) {
  animation: fade-in 0.8s 18.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(369) {
  animation: fade-in 0.8s 18.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(370) {
  animation: fade-in 0.8s 18.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(371) {
  animation: fade-in 0.8s 18.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(372) {
  animation: fade-in 0.8s 18.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(373) {
  animation: fade-in 0.8s 18.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(374) {
  animation: fade-in 0.8s 18.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(375) {
  animation: fade-in 0.8s 18.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(376) {
  animation: fade-in 0.8s 18.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(377) {
  animation: fade-in 0.8s 18.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(378) {
  animation: fade-in 0.8s 18.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(379) {
  animation: fade-in 0.8s 18.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(380) {
  animation: fade-in 0.8s 19s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(381) {
  animation: fade-in 0.8s 19.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(382) {
  animation: fade-in 0.8s 19.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(383) {
  animation: fade-in 0.8s 19.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(384) {
  animation: fade-in 0.8s 19.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(385) {
  animation: fade-in 0.8s 19.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(386) {
  animation: fade-in 0.8s 19.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(387) {
  animation: fade-in 0.8s 19.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(388) {
  animation: fade-in 0.8s 19.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(389) {
  animation: fade-in 0.8s 19.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(390) {
  animation: fade-in 0.8s 19.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(391) {
  animation: fade-in 0.8s 19.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(392) {
  animation: fade-in 0.8s 19.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(393) {
  animation: fade-in 0.8s 19.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(394) {
  animation: fade-in 0.8s 19.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(395) {
  animation: fade-in 0.8s 19.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(396) {
  animation: fade-in 0.8s 19.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(397) {
  animation: fade-in 0.8s 19.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(398) {
  animation: fade-in 0.8s 19.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(399) {
  animation: fade-in 0.8s 19.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(400) {
  animation: fade-in 0.8s 20s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(401) {
  animation: fade-in 0.8s 20.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(402) {
  animation: fade-in 0.8s 20.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(403) {
  animation: fade-in 0.8s 20.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(404) {
  animation: fade-in 0.8s 20.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(405) {
  animation: fade-in 0.8s 20.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(406) {
  animation: fade-in 0.8s 20.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(407) {
  animation: fade-in 0.8s 20.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(408) {
  animation: fade-in 0.8s 20.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(409) {
  animation: fade-in 0.8s 20.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(410) {
  animation: fade-in 0.8s 20.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(411) {
  animation: fade-in 0.8s 20.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(412) {
  animation: fade-in 0.8s 20.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(413) {
  animation: fade-in 0.8s 20.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(414) {
  animation: fade-in 0.8s 20.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(415) {
  animation: fade-in 0.8s 20.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(416) {
  animation: fade-in 0.8s 20.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(417) {
  animation: fade-in 0.8s 20.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(418) {
  animation: fade-in 0.8s 20.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(419) {
  animation: fade-in 0.8s 20.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(420) {
  animation: fade-in 0.8s 21s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(421) {
  animation: fade-in 0.8s 21.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(422) {
  animation: fade-in 0.8s 21.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(423) {
  animation: fade-in 0.8s 21.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(424) {
  animation: fade-in 0.8s 21.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(425) {
  animation: fade-in 0.8s 21.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(426) {
  animation: fade-in 0.8s 21.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(427) {
  animation: fade-in 0.8s 21.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(428) {
  animation: fade-in 0.8s 21.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(429) {
  animation: fade-in 0.8s 21.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(430) {
  animation: fade-in 0.8s 21.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(431) {
  animation: fade-in 0.8s 21.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(432) {
  animation: fade-in 0.8s 21.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(433) {
  animation: fade-in 0.8s 21.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(434) {
  animation: fade-in 0.8s 21.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(435) {
  animation: fade-in 0.8s 21.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(436) {
  animation: fade-in 0.8s 21.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(437) {
  animation: fade-in 0.8s 21.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(438) {
  animation: fade-in 0.8s 21.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(439) {
  animation: fade-in 0.8s 21.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(440) {
  animation: fade-in 0.8s 22s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(441) {
  animation: fade-in 0.8s 22.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(442) {
  animation: fade-in 0.8s 22.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(443) {
  animation: fade-in 0.8s 22.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(444) {
  animation: fade-in 0.8s 22.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(445) {
  animation: fade-in 0.8s 22.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(446) {
  animation: fade-in 0.8s 22.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(447) {
  animation: fade-in 0.8s 22.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(448) {
  animation: fade-in 0.8s 22.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(449) {
  animation: fade-in 0.8s 22.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(450) {
  animation: fade-in 0.8s 22.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(451) {
  animation: fade-in 0.8s 22.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(452) {
  animation: fade-in 0.8s 22.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(453) {
  animation: fade-in 0.8s 22.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(454) {
  animation: fade-in 0.8s 22.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(455) {
  animation: fade-in 0.8s 22.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(456) {
  animation: fade-in 0.8s 22.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(457) {
  animation: fade-in 0.8s 22.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(458) {
  animation: fade-in 0.8s 22.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(459) {
  animation: fade-in 0.8s 22.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(460) {
  animation: fade-in 0.8s 23s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(461) {
  animation: fade-in 0.8s 23.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(462) {
  animation: fade-in 0.8s 23.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(463) {
  animation: fade-in 0.8s 23.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(464) {
  animation: fade-in 0.8s 23.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(465) {
  animation: fade-in 0.8s 23.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(466) {
  animation: fade-in 0.8s 23.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(467) {
  animation: fade-in 0.8s 23.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(468) {
  animation: fade-in 0.8s 23.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(469) {
  animation: fade-in 0.8s 23.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(470) {
  animation: fade-in 0.8s 23.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(471) {
  animation: fade-in 0.8s 23.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(472) {
  animation: fade-in 0.8s 23.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(473) {
  animation: fade-in 0.8s 23.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(474) {
  animation: fade-in 0.8s 23.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(475) {
  animation: fade-in 0.8s 23.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(476) {
  animation: fade-in 0.8s 23.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(477) {
  animation: fade-in 0.8s 23.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(478) {
  animation: fade-in 0.8s 23.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(479) {
  animation: fade-in 0.8s 23.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(480) {
  animation: fade-in 0.8s 24s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(481) {
  animation: fade-in 0.8s 24.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(482) {
  animation: fade-in 0.8s 24.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(483) {
  animation: fade-in 0.8s 24.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(484) {
  animation: fade-in 0.8s 24.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(485) {
  animation: fade-in 0.8s 24.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(486) {
  animation: fade-in 0.8s 24.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(487) {
  animation: fade-in 0.8s 24.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(488) {
  animation: fade-in 0.8s 24.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(489) {
  animation: fade-in 0.8s 24.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(490) {
  animation: fade-in 0.8s 24.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(491) {
  animation: fade-in 0.8s 24.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(492) {
  animation: fade-in 0.8s 24.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(493) {
  animation: fade-in 0.8s 24.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(494) {
  animation: fade-in 0.8s 24.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(495) {
  animation: fade-in 0.8s 24.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(496) {
  animation: fade-in 0.8s 24.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(497) {
  animation: fade-in 0.8s 24.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(498) {
  animation: fade-in 0.8s 24.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(499) {
  animation: fade-in 0.8s 24.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.ttl-animation span:nth-child(500) {
  animation: fade-in 0.8s 25s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes scale {
  100% {
    transform: scale(1);
  }
}
@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
.vsb-main button {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  background: transparent !important;
  border: none;
  text-overflow: ellipsis;
  color: #ccc;
  cursor: pointer;
  padding-right: 35px;
  margin-bottom: 0;
  padding-bottom: 2px;
  border-bottom: 1px solid #6d6d6d;
  height: 100%;
  text-align: left;
}
.vsb-main button .caret {
  content: "";
  position: absolute;
  z-index: -1;
  z-index: 0;
  top: 7px;
  right: 0;
  width: 8px;
  height: 6px;
  background: url(../images/angle-down-solid.svg) no-repeat center right/8px auto;
  border: none;
}
.vsb-main button .caret span {
  position: absolute;
  right: 20px;
  bottom: -8px;
  color: #717171;
}
.vsb-main button:hover {
  opacity: 1;
}

.gr-ct-filter .vsb-menu {
  background: #333 !important;
}
.gr-ct-filter select option {
  background: #333;
}

.vsb-menu ul::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.vsb-menu ul::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.vsb-menu ul::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
.vsb-menu:not(.multi) li.active {
  margin-left: 0 !important;
}
.vsb-menu:not(.multi) li.active::before {
  content: none !important;
}
.vsb-menu .multi {
  max-width: 550px !important;
}
.vsb-menu .multi li {
  position: relative;
  padding: 6px 12px 6px 34px !important;
}
.vsb-menu .multi li:not(.grouped-option)::before {
  height: 16px;
  width: 16px;
  background-color: #A7A7A7;
  border-radius: 4px !important;
  margin-top: 2px !important;
  position: relative;
  outline: 0;
  border: none !important;
  place-content: center;
  -webkit-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.vsb-menu .multi li:not(.grouped-option).active::after {
  width: 16px !important;
  height: 16px !important;
  margin-left: -22px !important;
  margin-top: 2px !important;
  position: relative;
  border-radius: 4px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") no-repeat center #60C6FF;
  z-index: 3;
  transform: none !important;
  border: none !important;
}

.cm-gr-simple .gr-title {
  text-align: center;
  font-weight: bold;
  padding-bottom: 10px;
}
.cm-gr-simple .gr-title li {
  width: 20%;
}

.simple-item {
  border-top: 1px solid #2b2b2b;
}
.simple-item .simple-title {
  cursor: pointer;
  align-items: center;
  transition: all 0.3s ease;
  position: relative;
  z-index: 0;
}
.simple-item .simple-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #fff;
  opacity: 0.1;
  visibility: hidden;
}
.simple-item .simple-title:hover {
  padding-left: 20px;
}
.simple-item .simple-title:hover::before {
  visibility: visible;
}
.simple-item .simple-title.active .icon-toggle::after {
  transform: translate(-50%) rotate(90deg);
}
.simple-item .icon-edit {
  margin: 0 auto;
}
.simple-item .sub-item {
  width: 20%;
  padding: 6px 15px;
  text-align: center;
}
.simple-item .sub-item:first-child {
  text-align: left;
}
.simple-item .s-status {
  width: 100px;
  display: inline-block;
  background: #2b2b2b;
  border-radius: 4px;
  padding: 2px 0;
  color: #fff;
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
}
.simple-item .s-status.active {
  background: #002443;
}
.simple-item .simple-gr-sub {
  text-align: center;
  display: none;
}
.simple-item .simple-gr-sub.active {
  display: block;
}
.simple-item .simple-gr-sub .item {
  padding: 10px 0;
  display: grid;
  grid-template-columns: auto 40%;
}
.simple-item .simple-gr-sub .item .col:first-child {
  text-align: left;
  padding-left: 61px;
  position: relative;
  z-index: 0;
}
.simple-item .simple-gr-sub .item .col:first-child::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: #ccc;
}
.simple-item .simple-gr-sub .item.lv0 .col:first-child::before {
  left: 41px;
}
.simple-item .simple-gr-sub .item.lv1 .col:first-child {
  text-align: left;
  padding-left: 81px;
}
.simple-item .simple-gr-sub .item.lv1 .col:first-child::before {
  left: 61px;
}
.simple-item .simple-gr-sub .item.lv2 .col:first-child {
  text-align: left;
  padding-left: 101px;
}
.simple-item .simple-gr-sub .item.lv2 .col:first-child::before {
  left: 81px;
}
.simple-item .simple-gr-sub .item.lv3 .col:first-child {
  text-align: left;
  padding-left: 121px;
}
.simple-item .simple-gr-sub .item.lv3 .col:first-child::before {
  left: 101px;
}
.simple-item .simple-gr-sub .sub-status {
  display: inline-block;
  background: #60C6FF;
}

.icon-edit {
  border-radius: 4px;
  border: 1px solid rgba(204, 204, 204, 0.05);
  background: rgba(204, 204, 204, 0.1);
  width: 26px;
  height: 26px;
  line-height: 26px;
  position: relative;
  z-index: 0;
  text-align: center;
}
.icon-edit > a {
  display: block;
  color: #ccc;
}
.icon-edit > a:hover {
  opacity: 1;
}
.icon-edit i {
  transition: all 0.3s ease;
}
.icon-edit:hover i {
  transform: rotate(10deg);
}

.pulse {
  animation: pulse both 500ms infinite;
}

@keyframes pulse {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@media screen and (max-width: 1024px) {
  .simple-item .sub-item {
    display: flex;
    width: 17.5%;
  }
  .simple-item .sub-item:first-child {
    width: 30%;
  }
  .simple-item .simple-gr-sub .item {
    grid-template-columns: auto 35%;
  }
  .icon-toggle {
    flex-shrink: 0;
  }
}
.gr-role {
  display: grid;
  grid-template-columns: 150px auto;
}
.gr-role .col:first-child {
  font-weight: 500;
  color: #fff;
}
.gr-role input.form-control {
  border-color: #2b2b2b;
}

.role-title, .role-item {
  display: grid;
  grid-template-columns: 105px 25px auto;
}

.menumanagement-title, .menumanagement-item {
  display: grid;
  grid-template-columns: 105px 25px 500px 25px calc(100% - 655px);
}
.menumanagement-title .input-link, .menumanagement-item .input-link {
  width: calc(100% - 10px);
}

.role-title {
  margin-top: 5px;
  text-align: center;
  border-top: 1px solid #3c3c3c;
  border-bottom: 1px solid #3c3c3c;
  background-color: #1a1a1a;
  color: #fff;
}
.role-title .ttl {
  padding: 10px 20px;
  font-weight: 500;
}
.role-title .ttl:first-child {
  text-align: left;
}

.role-item {
  padding: 10px 0;
  border-bottom: 1px solid #3c3c3c;
}
.role-item.lv0 .txt {
  padding-left: 20px;
}
.role-item.lv0 .txt::before {
  left: 0;
}
.role-item.lv1 .txt {
  padding-left: 40px;
}
.role-item.lv1 .txt::before {
  left: 20px;
}
.role-item.lv2 .txt {
  padding-left: 60px;
}
.role-item.lv2 .txt::before {
  left: 40px;
}
.role-item.lv3 .txt {
  padding-left: 80px;
}
.role-item.lv3 .txt::before {
  left: 60px;
}
.role-item .txt {
  text-align: left;
  position: relative;
  z-index: 0;
}
.role-item .txt::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: #ccc;
}
.role-item .icon-check {
  text-align: center;
}

.gr-role-btn {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  margin-top: 20px;
}

.role-btn {
  width: 55px;
  padding: 5px;
  margin: 5px;
  color: #000;
  text-align: center;
  font-size: 16px;
  line-height: 1;
  font-weight: normal;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  border-radius: 50px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  z-index: 0;
}
.role-btn:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  transition: all 0.3s ease;
}

.cm-btn-default {
  background: #a8a8a8;
}
.cm-btn-default:after {
  background: #e6e6e6;
}
.cm-btn-default:hover {
  opacity: 1;
}
.cm-btn-default:hover:after {
  left: 0;
  width: 100%;
}

.employee-gr-title {
  display: grid;
  grid-template-columns: 350px auto 80px;
  margin-bottom: 15px;
  gap: 0 15px;
  padding-right: 50px;
}
.employee-gr-title .box-multiselect {
  width: 100%;
}
.employee-gr-title .gr-search {
  max-width: 255px;
}

.icon-zom {
  margin-right: 5px;
}

.ttl-popup-detail {
  cursor: pointer;
}
.ttl-popup-detail a::before {
  content: none;
}
.ttl-popup-detail a i {
  transition: all 0.3s ease;
}
.ttl-popup-detail a:hover i {
  transform: rotate(-15deg);
}

/* modal */
#cboxLoadedContent {
  -webkit-text-size-adjust: none;
}
#cboxLoadedContent::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
#cboxLoadedContent::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#cboxLoadedContent::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}

#cboxClose {
  transition: all 0.3s ease;
}
#cboxClose:hover {
  opacity: 0.7;
}

.modal-dialog {
  background: #161616;
  border-radius: 6px;
}
.modal-dialog .block:not(:last-child) {
  margin-bottom: 30px;
}
.modal-dialog .icon-save {
  font-size: 16px;
  margin-left: 20px;
  color: #60C6FF;
  display: inline-block;
  position: relative;
  bottom: -4px;
  line-height: 0;
  margin-left: auto;
  cursor: pointer;
  transition: all 0.3s ease;
}
.modal-dialog .icon-save:hover {
  opacity: 0.7;
}

.modal-title {
  font-size: 18px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2b2b2b;
}

.ttl-style {
  margin-bottom: 20px;
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
  padding: 3px 14px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  display: flex;
}
.ttl-style::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 2px;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
}

.ttl-style2 {
  padding: 10px;
  border-radius: 6px;
  background-color: #2b2b2b;
  margin-bottom: 25px;
  color: #fff;
  font-size: 15px;
}

.ttl-style3 {
  background: #121829;
  color: #fff;
  margin: -20px -20px 20px;
  color: #fff;
  padding: 10px 15px;
  border-radius: 6px 6px 0 0;
  font-size: 16px;
}
.ttl-style3 .icon {
  margin-right: 8px;
}

.cm-form .item {
  display: grid;
  grid-template-columns: 160px auto;
}
.cm-form .item:not(:last-child) {
  margin-bottom: 12px;
}
.cm-form .item .ttl {
  color: #fff;
  font-weight: 500;
}
.cm-form input {
  border-bottom: 1px solid #2b2b2b;
  color: #ccc;
}

.wp-modal {
  display: none;
}

.wp-sitemap .block {
  padding: 50px 50px 40px;
}

.content-sitemap {
  display: grid;
  grid-template-columns: 49% 49%;
  justify-content: space-between;
}
.content-sitemap .lv2 > li > .item-sitemap {
  padding-left: 30px;
}
.content-sitemap .lv3 > li > .item-sitemap {
  padding-left: 60px;
}
.content-sitemap .lv4 > li > .item-sitemap {
  padding-left: 90px;
}
.content-sitemap .item-sitemap {
  display: grid;
  grid-template-columns: 28px auto 28px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #2b2b2b;
  margin-bottom: 10px;
}
.content-sitemap .item-sitemap > span {
  padding-top: 3px;
  padding-right: 10px;
}
.content-sitemap .item-sitemap > i {
  font-size: 16px;
  text-align: right;
  margin-right: 12px;
}

@media screen and (max-width: 1200px) {
  .content-sitemap {
    grid-template-columns: 100%;
  }
}
.daily-option01 {
  margin-bottom: 15px;
}
.daily-option01 .box-left {
  display: grid;
  grid-template-columns: 240px auto;
  align-items: center;
  gap: 10px;
}
.daily-option01.daily-option-full .box-left {
  display: flex;
}
.daily-option01.daily-option-full .box-left .ttl-datetimes {
  min-width: 200px;
}

@media screen and (min-width: 1701px) and (max-width: 1800px) {
  .daily-option01 .box-left {
    grid-template-columns: 200px auto;
  }
}
@media screen and (max-width: 1000px) {
  .daily-option01.daily-option-full .box-left, .daily-option01.daily-option-full .box-approval {
    width: 100%;
  }
  .daily-option01.daily-option-full .box-approval {
    margin-top: 15px;
  }
}
.box-approval {
  display: grid;
  grid-template-columns: 30px 30px 30px 30px 30px 120px;
  gap: 10px;
}
.box-approval.chart-three-icon {
  grid-template-columns: 30px 30px 30px 120px;
}
.box-approval.no-button {
  grid-template-columns: 30px 30px 30px 30px 30px;
}
.box-approval.no-button.chart-three-icon {
  grid-template-columns: 30px 30px 30px;
}
.box-approval.no-hidden-chart {
  grid-template-columns: 30px 30px 30px 30px 120px;
}
.box-approval .cm-btn {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
  height: 27px;
  padding: 2px;
  background: #333;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.box-approval .cm-btn:hover {
  opacity: 0.6;
}
.box-approval .cm-btn.active {
  background: #002443;
}
.box-approval .cm-btn.cm-btn-fullScreen {
  font-size: 14px;
}
.box-approval .cm-btn.btn-eye {
  font-size: 15px;
}

.modalDetail .ttl-stone {
  font-size: 20px;
}
.modalDetail .ttl {
  font-size: 15px;
  color: #fff;
}

.stone-detail-header {
  display: flex;
  padding: 7px 10px;
  border-radius: 6px;
  background-color: #2b2b2b;
  margin-bottom: 15px;
  color: #fff;
  font-size: 15px;
}

.stone-detail-header.supplier-info {
  margin-bottom: 5px;
}

.stone-detail-header.planning-info {
  margin-bottom: 5px;
}

.div-stone-table-header {
  width: 260px;
}

.div-stone-table-value {
  width: calc(100% - 280px);
}

.artical-wp-sub {
  margin-bottom: 30px;
}

.block-stone {
  display: grid;
  grid-template-columns: 100%;
  background: #333;
  margin-bottom: 10px;
  border-radius: 6px;
  padding: 7px 10px;
}
.block-stone .ttl {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #6d6d6d;
  font-size: 15px;
}
.block-stone .ttl.txt-green {
  color: #008b00;
}
.block-stone .item {
  padding: 2px 0;
  display: flex;
  flex-wrap: wrap;
}
.block-stone .item:nth-child(2) {
  color: #60c6ff;
}
.block-stone .item .ttl-sub {
  width: 80px;
}
.block-stone .item .txt {
  width: calc(100% - 80px);
}
.block-stone .item .txt.txt-blue {
  color: #60C6FF;
}

.ovf-h {
  overflow: hidden;
}

.ovf-a {
  overflow: auto;
}

.stone-picture-group-detail, .stone-picture-group-detail-model {
  display: grid;
  justify-content: space-between;
  gap: 13px 10px;
  grid-template-columns: calc(16.6666666667% - 10px) calc(16.6666666667% - 10px) calc(16.6666666667% - 10px) calc(16.6666666667% - 10px) calc(16.6666666667% - 10px) calc(16.6666666667% - 10px);
}
.stone-picture-group-detail .show-detail, .stone-picture-group-detail-model .show-detail {
  padding: 14px 5px 10px;
  background: #333;
  border-radius: 6px;
  border: 2px solid #333;
  cursor: pointer;
}
.stone-picture-group-detail .show-detail.active, .stone-picture-group-detail-model .show-detail.active {
  border-color: #60C6FF;
}
.stone-picture-group-detail .ttl-name, .stone-picture-group-detail-model .ttl-name {
  margin-bottom: 0;
  margin-top: 5px;
  color: #fff;
}

.stone-picture-group-detail.stone-accident-pictures {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.stone-picture-group-detail.stone-accident-pictures .show-detail {
  padding-top: 10px;
  width: 7.1428571429%;
}
.stone-picture-group-detail.stone-accident-pictures .show-detail a {
  height: 100%;
}

.img-diamond {
  height: 432px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-diamond img {
  max-height: 100%;
  border-radius: 17px;
}

@media screen and (max-width: 1700px) {
  .stone-picture-group-detail.stone-accident-pictures .show-detail {
    width: calc(12.5% - 9px);
  }
  .stone-picture-group-detail.stone-accident-pictures .pic-stone .img {
    height: 100%;
  }
}
@media screen and (max-width: 1170px) {
  .img-diamond {
    height: 100%;
  }
}
.display-image-product-information {
  position: relative;
}

.content_picture {
  border: 2px solid #2b2b2b;
  border-radius: 6px;
  overflow: hidden;
}
.content_picture .picture-top {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 6px 10px 5px;
}
.content_picture .picture-top a {
  color: #fff;
}
.content_picture .picture-info {
  margin-left: auto;
}
.content_picture .picture-info > a {
  display: inline-block;
  font-size: 16px;
}
.content_picture .picture-info > a:not(:last-child) {
  margin-right: 10px;
}
.content_picture .picture-info > a:hover {
  opacity: 1;
}
.content_picture .box-picture {
  padding: 20px 10px;
}

@media screen and (max-width: 1170px) {
  .content_picture {
    margin-bottom: 15px;
  }
  .content_picture .box-picture {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dialog-preview-stone-picture .gr-btn .cm-button {
    width: 100%;
    margin-right: 0;
    margin-top: 15px;
  }
  .dialog-preview-stone-picture .slider-nav {
    margin-top: 15px;
    padding: 0 20px;
  }
  .dialog-preview-stone-picture .pic-stone {
    margin: 0 4px;
    border-radius: 6px;
    overflow: hidden;
  }
  .dialog-preview-stone-picture .pic-stone.slick-current {
    color: #fff;
  }
  .dialog-preview-stone-picture .pic-stone.slick-current .img {
    border: 2px solid #60c6ff;
  }
  .dialog-preview-stone-picture .pic-stone .ttl-name {
    margin-top: 5px;
    margin-bottom: 0;
    text-align: center;
    font-size: 13px;
  }
  .dialog-preview-stone-picture .pic-stone .img {
    width: 100%;
    height: 18vw;
    max-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ccc;
    border-radius: 6px;
    overflow: hidden;
  }
  .dialog-preview-stone-picture .pic-stone .img img {
    max-height: 100%;
  }
}
.show-detail .ttl-name {
  width: 100%;
  text-align: center;
}
.show-detail a {
  display: block;
}
.show-detail .img {
  width: 93px;
  height: 80px;
  display: flex;
  margin: 0 auto;
}
.show-detail .img img {
  border-radius: 6px;
}
.show-detail .img .img-card {
  max-height: 100%;
}

@media screen and (max-width: 1600px) {
  .stone-picture-group-detail, .stone-picture-group-detail-model {
    grid-template-columns: calc(25% - 10px) calc(25% - 10px) calc(25% - 10px) calc(25% - 10px);
  }
}
@media screen and (max-width: 1400px) {
  .show-detail .ttl-name {
    font-size: 13px;
  }
}
@media screen and (max-width: 1000px) {
  .stone-picture-group-detail, .stone-picture-group-detail-model {
    grid-template-columns: 1fr 1fr;
  }
}
.stone-picture-content {
  margin-bottom: 30px;
}
.stone-picture-content.last {
  margin-bottom: 0;
}
.stone-picture-content .splide__arrow svg {
  fill: #9E9E9E;
}
.stone-picture-content .artical-body .splide {
  padding: 0;
}
.stone-picture-content .date-user > div i {
  margin-right: 2px;
}
.stone-picture-content .date-user > div {
  margin-right: 15px;
}

.thumbnail-slider-splide {
  margin-top: 10px;
}
.thumbnail-slider-splide li {
  padding: 10px;
}
.thumbnail-slider-splide li .thumbnail-background {
  border-radius: 6px;
  margin-bottom: 5px;
}

.colorbox-idx-popup01 {
  margin-bottom: 15px;
}
.colorbox-idx-popup01 .box-select ~ .vsb-main {
  width: 80px;
}
.colorbox-idx-popup01 .box-select option {
  background: #161616;
}
.colorbox-idx-popup01 .box-detail > div {
  margin-right: 15px;
}

.idx-artical-table tr th {
  background: none;
}
.idx-artical-table .tbl-projected tr:first-child th {
  border-top: none;
}

.box-dialog {
  margin-bottom: 30px;
}
.box-dialog.last {
  margin-bottom: 0;
}

.tbPropotion-Header {
  background-color: #2b2b2b;
}
.tbPropotion-Header td {
  color: #fff;
}

.gr-btn-product {
  margin-top: 15px;
}
.gr-btn-product .btn-block {
  color: #60C6FF;
  transition: all 0.3s ease;
}
.gr-btn-product .btn-block:not(:last-child) {
  margin-right: 15px;
}
.gr-btn-product .btn-block:hover {
  opacity: 0.7;
}

.table-import-info {
  border-top: 1px solid #2b2b2b;
}
.table-import-info tr:not(:last-child) th {
  border-color: #4c4c4c;
}

.stImport-Header {
  color: #fff;
  padding-bottom: 5px;
  border-bottom: 1px solid #2b2b2b;
  font-weight: bold;
}

.stepDetail-content > div:not(:last-child) {
  margin-bottom: 30px;
}

.stImport-box .form-control {
  width: 100%;
  color: #fff;
  padding: 10px;
}
.stImport-box .cm-button {
  width: 100px;
  margin-top: 15px;
}

.box-step-procedure {
  background: #333;
  padding: 15px;
  border-radius: 6px;
  width: 20%;
}
.box-step-procedure ol li {
  padding: 1px 30px 17px 0;
  position: relative;
  z-index: 0;
  cursor: pointer;
}
.box-step-procedure ol li::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 8px;
  width: 4px;
  height: 100%;
  background: #C5C5C5;
  z-index: -2;
}
.box-step-procedure ol li:first-child::after {
  top: 40px;
  height: calc(100% - 40px);
}
.box-step-procedure ol li:last-child {
  padding-bottom: 3px;
}
.box-step-procedure ol li:last-child::after {
  bottom: 0;
  height: calc(100% - 20px);
}
.box-step-procedure ol li .steps-sub-title {
  padding-left: 10px;
  min-height: 17px;
  font-size: 13px;
}
.box-step-procedure ol li .steps-sub-title .subtitle-02 {
  margin-left: 10px;
}
.box-step-procedure ol li.steps-completed::after {
  background-color: #008b00;
}
.box-step-procedure ol li.steps-completed .name {
  background: #111827;
  color: #fff;
}
.box-step-procedure ol li.steps-completed .name:before {
  background-color: #008b00;
}
.box-step-procedure ol li.steps-completed.active .name {
  color: #60c6ff;
}
.box-step-procedure ol li.steps-completed.steps-current .name:before {
  background-color: #e94434;
}
.box-step-procedure ol li.steps-completed.steps-current::after {
  background-color: #e94434;
}
.box-step-procedure ol li.step-package-tracking .date {
  font-size: 12px;
  color: #ccc;
  font-weight: normal;
}
.box-step-procedure ol li .name {
  font-size: 15px;
  display: block;
  padding: 8px 10px;
  font-weight: 500;
  color: #000;
  background: #C5C5C5;
  border-radius: 6px;
  position: relative;
  z-index: 0;
}
.box-step-procedure ol li .name::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(50% - 10px);
  right: -30px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") no-repeat center/10px #C5C5C5;
}

.stepDetail-content {
  width: 78%;
}

@media screen and (max-width: 1170px) {
  .box-step-procedure {
    padding: 10px;
    width: 23%;
  }
  .stepDetail-content {
    width: 75%;
  }
}
.form-inline-col2 {
  padding: 30px 0 15px;
}

.wp-shipment {
  align-items: flex-start;
}

.txtShipmentError {
  margin: 5px 0;
  color: #E94434;
}

.shipment-button-delete {
  border: none;
  background: transparent;
  color: #E94434;
  font-size: 18px;
}

.container-shipment {
  grid-template-columns: 112px auto 50px auto 250px 250px;
}
.container-shipment .ttl-tbl {
  color: #fff;
}
.container-shipment .input-group input {
  width: 100%;
}

.note-shipment {
  width: 100%;
}

.top-control-upload {
  margin-right: 15px;
  height: 27px;
  width: 250px;
}
.top-control-upload .control-fileupload {
  height: 100%;
  padding-top: 4px;
}
.top-control-upload .control-fileupload::after {
  top: 0;
  font-weight: 700;
  padding: 3px 6px;
  line-height: 1.5;
  width: 110px;
  height: 100%;
}
.top-control-upload .control-fileupload .label-input-file {
  width: calc(100% - 120px);
}

.control-fileupload {
  display: block;
  padding-top: 1px;
  position: relative;
  z-index: 0;
  cursor: pointer;
  font-weight: 500;
  min-width: 170px;
}
.control-fileupload::after {
  padding: 3px 10px;
  border-radius: 40px;
  text-align: center;
  border-radius: 50px;
  content: "Browse";
  position: absolute;
  z-index: 1;
  line-height: 1;
  top: 2px;
  right: 2px;
  background: #a8a8a8;
  color: #000;
}
.control-fileupload input[type=file] {
  display: block;
  right: 1px;
  top: 1px;
  height: 100%;
  opacity: 0;
  width: 100%;
  position: absolute;
  overflow: hidden;
  z-index: 2;
  cursor: pointer;
}
.control-fileupload .label-input-file {
  width: calc(100% - 80px);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input.ip-limit-number, input.line-limit-color {
  width: calc(100% - 130px);
  border-bottom: none;
}

.ip-limit-number {
  border-bottom: none;
}

.box-kpi .form-group:not(:last-child) {
  margin-bottom: 15px;
}
.box-kpi label {
  color: #fff;
}
.box-kpi .gr-btn {
  margin-top: 20px;
}
.box-kpi .box-multiselect {
  width: calc(100% - 130px);
}
.box-kpi .group-number {
  width: calc(100% - 130px);
}
.box-kpi .group-number input {
  width: 100%;
}
.box-kpi .form-update-scaife .group-number {
  width: calc(100% - 190px);
}
.box-kpi.b-carats-replacement .group-number {
  width: calc(100% - 190px);
}
.box-kpi.b-carats-replacement .group-number input {
  width: 100%;
}
.box-kpi.b-carats-replacement .box-multiselect {
  width: calc(100% - 190px);
}

.slider-widget .splide--nav > .splide__slider > .splide__track > .splide__list > .splide__slide.is-active, .slider-widget .splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
  border: 2px solid #60C6FF;
}
.slider-widget .splide--nav > .splide__slider > .splide__track > .splide__list > .splide__slide, .slider-widget .splide--nav > .splide__track > .splide__list > .splide__slide {
  border: 2px solid #444;
}

.display-image li img {
  max-height: 100%;
  width: auto !important;
  max-height: 100%;
  border-radius: 17px;
  margin: 0 auto;
  display: block;
}

.img-table img {
  border-radius: 6px;
  width: 30px;
  height: 30px;
  object-fit: cover;
}

.list-tone-finished-vertical {
  display: flex;
}
.list-tone-finished-vertical .ttl, .list-tone-finished-vertical .tbl-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px 5px;
}
.list-tone-finished-vertical .ttl {
  background-color: #2b2b2b;
  color: #fff;
  width: 130px;
  height: 42px;
  border-top: 1px solid #4c4c4c;
}
.list-tone-finished-vertical .tbl-item {
  width: 200px;
  height: 42px;
  border-top: 1px solid #2b2b2b;
}
.list-tone-finished-vertical .row-tbl-img {
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
}
.list-tone-finished-vertical img {
  max-height: 100%;
}
.list-tone-finished-vertical .thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 51;
}

.overlay {
  display: block;
  position: relative;
}
.overlay:hover .hover-box {
  opacity: 0.55;
}
.overlay .hover-box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 50;
  height: 45px;
  line-height: 45px;
  width: 100%;
  margin: -22.5px -50%;
  text-align: center;
  transition: all 0.5s ease;
  opacity: 0.75;
  transform: scale(1);
  cursor: pointer;
}
.overlay .play-icon {
  background: url(../img/icon/play-button.png) no-repeat center;
}

.detail-StoneModal .cm-button {
  width: 100px;
}

.btn-legend-matched {
  margin-top: -1px;
  background-color: #00BE17;
  border-color: #00BE17;
  color: #fff;
}

.btn-legend-matched:hover {
  background-color: #00BE17;
  border-color: #00BE17;
  color: #fff;
}

.btn-legend-not-found {
  margin-top: -1px;
  background-color: #E94434;
  border-color: #E94434;
  color: #fff;
}

.btn-legend-not-found:hover {
  background-color: #E94434;
  border-color: #E94434;
  color: #fff;
}

.box-urgent-01 {
  width: 60%;
  padding-right: 15px;
  line-height: 1;
}

.box-urgent-02 {
  margin-right: 15px;
  line-height: 1;
}

.box-urgent-03 {
  margin-left: auto;
}

.wp-box-urgent {
  align-items: center;
  margin-bottom: 10px;
}

.note-color {
  margin-top: 20px;
  position: absolute;
  bottom: 30px;
}
.note-color [class*=color] {
  position: relative;
  z-index: 0;
  padding-left: 18px;
}
.note-color [class*=color]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 2px;
}
.note-color [class*=color]:not(:last-child) {
  margin-right: 15px;
}
.note-color .color1::before {
  background: #008b00;
}
.note-color .color2::before {
  background: #E94434;
}
.note-color .color3::before {
  background: #60c6ff;
}
.note-color .color4::before {
  background: #008b00;
}
.note-color .color5::before {
  background: #f57c00;
}
.note-color .color6::before {
  background: #E94434;
}
.note-color .color7::before {
  background: #d19d00;
}
.note-color .color8::before {
  background: #0b2545;
}
.note-color .color9::before {
  background: #38974b;
}
.note-color .color10::before {
  background: #AA4A01;
}
.note-color .color11::before {
  background: #7E0906;
}
.note-color .color12::before {
  background: #047857;
}
.note-color .color13::before {
  background: repeating-linear-gradient(-45deg, #71423e, #71423e 2px, #333 2px, #333 5px);
}

.row-planning-good {
  color: #008b00;
  margin-bottom: 0px !important;
}

.row-planning-bad {
  color: #E94434;
  margin-bottom: 0px !important;
}

.has-comment {
  color: #60C6FF;
}

.daterangepicker {
  z-index: 20001 !important;
}

.modalComment {
  min-height: 300px;
}
.modalComment h6 {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}

.dts_label {
  display: none !important;
}

.modalComment-note {
  margin-top: 15px;
}

.txt-comment {
  display: block;
}

.modalComment-box:not(:last-child) {
  margin-top: 10px;
}
.modalComment-box .comment-content {
  background: #002443;
  border-radius: 4px;
  padding: 7px 12px;
  color: #fff;
}
.modalComment-box.box2 .comment-content {
  background: #333;
}
.modalComment-box .date {
  margin-left: 4px;
}
.modalComment-box .comment-user, .modalComment-box .comment-date {
  font-size: 12px;
  font-weight: 500;
  color: #ccc;
}

.select-action {
  position: relative;
  z-index: 2;
  width: 190px;
  margin-right: 15px;
  background: url(../images/angle-down-solid.svg) no-repeat center right 4px/8px auto;
  border-bottom: 1px solid #6d6d6d;
  padding-top: 4px;
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.select-action ul {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 100%;
  white-space: nowrap;
  z-index: 2;
  background: #161616;
  border-radius: 6px;
  overflow: hidden;
}
.select-action li {
  display: block;
  padding: 3px 10px;
  position: relative;
}
.select-action li:hover {
  color: inherit;
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.2);
}
.select-action li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.select-action li.arrow-up {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23ccc'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E") no-repeat right 10px center/8px auto;
}
.select-action li.arrow-up:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.select-action li.arrow-down {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23ccc'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M169.4 470.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 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") no-repeat right 10px center/8px auto;
}
.select-action li.arrow-down:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.select-action li i {
  position: absolute;
  right: 5px;
  top: 6px;
}
.select-action .firts {
  display: block;
}

.btnSelectionPlan {
  margin-right: 15px;
  padding-top: 4px;
}
.btnSelectionPlan.hidden + .select-action {
  width: calc(100% - 125px);
}
.btnSelectionPlan + .select-action {
  width: calc(100% - 230px);
}
.btnSelectionPlan .icon {
  cursor: pointer;
  transition: all 0.3s ease;
}
.btnSelectionPlan .icon:hover {
  color: #E94434;
}

@media screen and (min-width: 1280px) {
  .select-action {
    max-width: 190px;
  }
}
@media screen and (max-width: 1279px) {
  .btnSelectionPlan {
    margin-right: 2px;
  }
  .btnSelectionPlan.hidden + .select-action {
    width: 100%;
    margin-right: 0;
  }
  .btnSelectionPlan + .select-action {
    width: 100%;
    margin-right: 0;
  }
  .btnSelectionPlan ~ .gr-btn.one-btn {
    margin-top: 15px;
    width: 100%;
  }
}
.slider.round {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='18' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath opacity='1' fill='%23fff' d='M384 128c70.7 0 128 57.3 128 128s-57.3 128-128 128H192c-70.7 0-128-57.3-128-128s57.3-128 128-128H384zM576 256c0-106-86-192-192-192H192C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192zM192 352a96 96 0 1 0 0-192 96 96 0 1 0 0 192z'/%3E%3C/svg%3E") no-repeat center/contain;
  position: absolute;
  cursor: pointer;
  top: -3px;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: 0.4s;
  transition: all 0.4s ease;
}
.slider.round:active, .slider.round:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='18' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath opacity='1' fill='%23fff' d='M192 64C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192s-86-192-192-192H192zm192 96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z'/%3E%3C/svg%3E");
}

label.switch {
  margin-left: 5px;
  position: relative;
  display: inline-block;
  width: 21px;
  height: 18px;
  vertical-align: middle;
}
label.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
label.switch input[type=checkbox]:checked + .slider.round {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='18' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath opacity='1' fill='%23fff' d='M192 64C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192s-86-192-192-192H192zm192 96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z'/%3E%3C/svg%3E");
}

.box-ExpectedExport {
  margin-bottom: 20px;
}
.box-ExpectedExport span {
  width: 103px;
  margin-right: 15px;
}
.box-ExpectedExport input[name=date] {
  width: calc(100% - 118px);
  max-width: 200px;
}

.tab-production-ttl .group-btn, .tab-production-ttl .ttl-datetimes {
  margin-right: 15px;
}

.gr-radiobox label {
  display: block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.gr-radiobox label:not(:last-child) {
  margin-right: 15px;
}
.gr-radiobox label:hover input ~ .checkmark {
  border-color: #60c6ff;
}
.gr-radiobox label input {
  position: absolute;
  opacity: 0;
  right: 0;
  cursor: pointer;
}
.gr-radiobox label input:checked ~ .checkmark {
  border-color: #60c6ff;
}
.gr-radiobox label input:checked ~ .checkmark:after {
  display: block;
  transform: scale(1);
  opacity: 1;
}
.gr-radiobox .checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 16px;
  width: 16px;
  border: 1px solid #ccc;
  border-radius: 50%;
}
.gr-radiobox .checkmark:after {
  content: "";
  position: absolute;
  opacity: 0;
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #60C6FF;
  transform: scale(0);
  transition: all 0.3s ease;
}
.gr-radiobox.jc-c label {
  margin-left: 8px;
  margin-right: 8px;
}

.gr-chart-checkbox .item-checkbox:not(:last-child) {
  margin-right: 15px;
}
.gr-chart-checkbox .item-checkbox label {
  padding-left: 3px;
}

@media screen and (max-width: 1700px) {
  .gr-chart-checkbox {
    margin-top: 15px;
    width: 100%;
  }
}
.tbl-production thead tr:first-child th:nth-child(2) {
  border-right: 1px solid #4c4c4c;
}
.tbl-production thead tr:first-child th:nth-child(3), .tbl-production thead tr:first-child th:nth-child(4) {
  border-bottom: 1px solid #4c4c4c;
}
.tbl-production thead tr:first-child th:nth-child(3) {
  border-right: 1px solid #4c4c4c;
}
.tbl-production tbody tr[role=row] {
  background: rgba(255, 255, 255, 0.1);
}

.box-totalFinished {
  background-color: #008b00;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.box-totalUntouch {
  background-color: #7d7d7d;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.gr-order-item {
  padding-bottom: 15px;
}
.gr-order-item .item {
  width: 12.5%;
  padding: 10px 15px;
  border-radius: 6px;
}
.gr-order-item .item:nth-child(odd) {
  background: #2b2b2b;
}
.gr-order-item .item:nth-child(even) {
  text-align: center;
}
.gr-order-item .item:last-child label {
  display: inline-block;
}
.gr-order-item .item:last-child input[type=checkbox] {
  margin-left: 5px;
}

.box-orderCompletion {
  padding: 15px 0;
  margin-bottom: 30px;
  border-top: 1px solid #2b2b2b;
  border-bottom: 1px solid #2b2b2b;
}

.tbl-order-sum {
  padding-bottom: 15px;
}

.tbl-border-td-top tr:first-child td {
  border-top: 1px solid #2b2b2b;
}

.tbl-order-list {
  padding-top: 15px;
}

.block-detil {
  color: #D1D1D1;
}
.block-detil .item {
  display: flex;
}
.block-detil .item.last-list:not(:last-child) {
  margin-bottom: 15px;
}
.block-detil .item.last-list .cm-button {
  width: 100%;
  max-width: 110px;
  margin-left: auto;
}
.block-detil .item .box-icon {
  color: #161616;
  display: flex;
  justify-content: center;
}
.block-detil .item .box-icon .icon-delete-file {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 27px;
}
.block-detil .ttl {
  width: 85px;
}
.block-detil .txt-box {
  width: calc(100% - 85px);
}
.block-detil .txt-box input {
  border-color: #2b2b2b;
}

.gr-tb-current-stock .add-comment {
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
  top: 1px;
}
.gr-tb-current-stock .add-comment .number {
  position: absolute;
  top: -10px;
  left: calc(100% - 8px);
  padding: 2px 2px 1px;
  border-radius: 4px;
  background: #B00020;
  font-size: 9px;
  color: #fff;
  line-height: 1;
  border: 2px solid #121829;
  min-width: 16px;
  text-align: center;
}
.gr-tb-current-stock .add-comment i {
  font-size: 17px;
}
.gr-tb-current-stock .row-planning-main .add-comment .number {
  top: -7px;
}
.gr-tb-current-stock .add-new {
  font-size: 17px;
  line-height: 0;
  position: relative;
  top: 1px;
}
.gr-tb-current-stock .check-Replan {
  position: relative;
  top: -1px;
}
.gr-tb-current-stock .check-Replan input[type=checkbox] {
  width: 15px;
  height: 15px;
  margin-right: 10px;
}

.main-stone-comment {
  color: #60C6FF;
}

.APIUpdated {
  font-size: 12px;
  margin-top: 15px;
  margin-left: auto;
}

.box-add-centralized .box-detial {
  margin-bottom: 15px;
}
.box-add-centralized .box-detial .item {
  width: 16.6666666667%;
}
.box-add-centralized .box-detial .item:not(:last-child) {
  padding-right: 15px;
}
.box-add-centralized .box-detial .form-value {
  font-weight: bold;
  color: #fff;
}
.box-add-centralized .gr-btn {
  margin-top: 20px;
}

.fa-circle-minus {
  cursor: pointer;
}
.fa-circle-minus.icon-deselect {
  color: #E94434;
  font-size: 18px;
}

.approve-icon-copy {
  cursor: pointer;
  font-size: 16px;
}

.approve-popup > i {
  transition: all 0.3s ease;
}
.approve-popup > i:hover {
  opacity: 0.6;
}
.approve-popup > i:not(:last-child) {
  margin-right: 10px;
}

.titlePlanConfirm {
  margin-bottom: 20px;
}

.modelYehudaDetail .gr-btn {
  margin-top: 20px;
}

.file-deleted {
  color: #E94434;
  text-decoration: line-through;
}

.docPreview {
  width: 100%;
  height: calc(100vh - 325px);
  margin-bottom: 15px;
}

.stock-footer {
  margin-top: 15px;
}

.tr-row-part-A {
  color: #8A8B8A !important;
}

.tbl-manufacturing table tr th {
  text-align: center;
  border-left: 1px solid #4c4c4c;
}
.tbl-manufacturing table tr:first-child th {
  border-bottom: 1px solid #4c4c4c;
}
.tbl-manufacturing table tr:first-child th:first-child {
  border-left: none;
}
.tbl-manufacturing table tr th:first-child {
  border-left: none;
}
.tbl-manufacturing table tr.separate th, .tbl-manufacturing table tr.separate td {
  background: #121829;
  padding-top: 0;
  padding-bottom: 5px;
}
.tbl-manufacturing table tr.active.row-parent td {
  background: #121829;
}
.tbl-manufacturing table tr td.stock-select-col {
  background-color: #161616;
}
.tbl-manufacturing table tr th.active, .tbl-manufacturing table tr td.active {
  background-color: #2b2b2b;
}
.tbl-manufacturing table tr th.separate, .tbl-manufacturing table tr td.separate {
  background: #121829;
}

.column-sum {
  background: #161616;
}

.my-legend-chart-lab-grown, .my-legend-chart {
  padding-left: 30px;
}

.my-legend-chart-lab-grown {
  margin-top: 15px;
}
.my-legend-chart-lab-grown input[type=checkbox] {
  width: 15px;
  height: 15px;
  border-radius: 4px;
}
.my-legend-chart-lab-grown input[type=checkbox]:checked::before {
  content: none;
}
.my-legend-chart-lab-grown .checkbox {
  font-size: 12px;
  color: #A7A7A7;
}
.my-legend-chart-lab-grown .checkbox.active {
  text-decoration: line-through;
}
.my-legend-chart-lab-grown .checkbox:not(:last-child) {
  margin-right: 15px;
}
.my-legend-chart-lab-grown .checkbox input:focus {
  box-shadow: none !important;
}
.my-legend-chart-lab-grown .checkbox:first-child input {
  background-color: #2195F2;
  border-color: #2195F2 !important;
}
.my-legend-chart-lab-grown .checkbox:first-child input:focus {
  border-color: #2195F2 !important;
}
.my-legend-chart-lab-grown .checkbox:nth-child(2) input {
  background-color: #F34336;
  border-color: #F34336 !important;
}
.my-legend-chart-lab-grown .checkbox:nth-child(2) input:focus {
  border-color: #F34336 !important;
}

.title-chart-name {
  font-size: 20px;
  font-weight: 700;
}

.box-heatmapchart .axisYTitle, .box-heatmapchart .axisXTitle {
  font-size: 15px;
}
.box-heatmapchart .axisYTitle {
  width: 30px;
  padding-right: 5px;
  border-right: 1px solid #2b2b2b;
  margin-right: 5px;
}
.box-heatmapchart .axisXTitle {
  padding-top: 5px;
  border-top: 1px solid #2b2b2b;
  width: calc(100% - 29px);
  margin-left: auto;
}
.box-heatmapchart .b-chart {
  width: calc(100% - 40px);
}

.lablel-legend-chart {
  margin-right: 15px;
  font-size: 12px;
  color: #A7A7A7;
}
.lablel-legend-chart span {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  margin-right: 5px;
  display: inline-block;
  position: relative;
  top: 3px;
}

.my-legend-chart {
  margin-top: 15px;
}

.modalMessageBox .gr-btn {
  margin-top: 25px;
}

.titleMessageBox {
  font-size: 20px;
  margin-bottom: 10px;
}
.titleMessageBox .ttl01 {
  padding-right: 15px;
  margin-right: 15px;
  border-right: 1px solid #ccc;
}
.titleMessageBox .stone-color {
  margin-left: 8px;
  display: inline-block;
  color: #60C6FF;
  font-weight: 700;
}

table .progress {
  position: relative;
  z-index: 0;
}
table .progress .progress-bar {
  position: absolute;
  overflow: hidden;
  background-color: #002443;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  border-radius: 6px;
}
table .progress .number {
  padding: 0 4px;
}
table .progress .status {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
}
table tr.txt-average td {
  font-weight: 700;
  font-size: 15px;
  color: #60C6FF;
}

.gr-btn-top-bottom button {
  border: none;
  outline: none;
  background: transparent;
  font-size: 22px;
  color: #6d6d6d;
  line-height: 0;
}
.gr-btn-top-bottom button:not(:last-child) {
  margin-right: 5px;
}

.stone-info-footer {
  position: absolute;
  left: 0;
  bottom: 3px;
}

.position-r {
  position: relative;
}

.diamond-type-laboratory-grown .stone-detail-header {
  background-color: #E94434;
}

#cboxOverlay {
  opacity: 0.6 !important;
}

.box-planner-by p:last-child {
  margin-bottom: 0;
}

.btn-import {
  padding: 3px 33px 3px 10px;
  background: #17A2B8;
  border-radius: 40px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
.btn-import:hover {
  opacity: 0.7;
}
.btn-import .icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

main .box-invoice-tracking-year {
  width: 380px;
}

.imgPop-avatar {
  height: 100%;
  text-align: center;
}
.imgPop-avatar figure {
  height: calc(100% - 45px);
}
.imgPop-avatar .img {
  border-radius: 6px;
  max-height: 100%;
}
.imgPop-avatar .name-avatar {
  font-size: 18px;
  font-weight: 500;
}

.stock-dialogPreview .stock-header-search {
  margin-bottom: 15px;
}
.stock-dialogPreview .box-bottom {
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #2b2b2b;
}
.stock-dialogPreview .box-total .txt {
  display: block;
  padding-left: 15px;
  position: relative;
  z-index: 0;
  font-weight: 500;
}
.stock-dialogPreview .box-total .txt::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 8px;
  height: 8px;
  background: #ccc;
  border-radius: 2px;
  transform: rotate(45deg);
  left: 0;
  top: calc(50% - 5px);
}
.stock-dialogPreview .box-total .txt:not(:last-child) {
  margin-right: 25px;
}
.stock-dialogPreview .box-total .txt .number {
  margin-left: 5px;
  color: #60C6FF;
  font-weight: bold;
}
.stock-dialogPreview .left-panel {
  width: 180px;
}
.stock-dialogPreview .left-panel .vsb-main {
  width: 100%;
}

#colorbox .vsb-js-search-zone {
  background: #333;
}
#colorbox .vsb-menu {
  background: #333;
}
#colorbox .vsb-menu ::-webkit-scrollbar-thumb {
  background-color: #161616;
}
#colorbox.no-scroll {
  overflow: visible !important;
}
#colorbox.no-scroll #cboxWrapper {
  overflow: visible;
}
#colorbox.no-scroll #cboxLoadedContent {
  overflow: visible !important;
}

.fancybox__container {
  z-index: 20020 !important;
}

#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  top: 20px !important;
  right: 20px !important;
}

#cboxContent {
  padding: 20px;
  border-radius: 6px;
}

.title-h2 {
  margin-bottom: 15px;
  padding-right: 15px;
  font-size: 18px;
  padding-bottom: 5px;
  border-bottom: 1px solid #2b2b2b;
  font-weight: bold;
}
.title-h2 .small {
  font-size: 80%;
}

.title-h2-02 {
  padding: 7px 10px;
  border-radius: 6px;
  background-color: #002443;
  margin-bottom: 25px;
  font-size: 15px;
  color: #fff;
}

.h2-logo {
  line-height: 1;
  font-size: 15px;
}

.container-gemex {
  display: grid;
  grid-template-columns: calc(25% - 6px) calc(25% - 6px) calc(25% - 6px) calc(25% - 6px);
  gap: 8px;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.container-gemex:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.container-gemex .item-gemex {
  border: 1px solid #333;
  border-radius: 6px;
  display: flex;
  overflow: hidden;
}
.container-gemex .item-gemex .form-title {
  width: 140px;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-gemex .item-gemex .form-value {
  width: calc(100% - 140px);
  padding: 7px 20px;
}

@media screen and (max-width: 1400px) {
  .container-gemex {
    grid-template-columns: calc(33.3333333333% - 6px) calc(33.3333333333% - 6px) calc(33.3333333333% - 6px);
    gap: 9px;
  }
}
@media screen and (max-width: 1170px) {
  .container-gemex {
    grid-template-columns: calc(50% - 4px) calc(50% - 4px);
    gap: 8px;
  }
}
.txt-more {
  color: #60C6FF;
  cursor: pointer;
}

.content-monthlyreport .gr-chart-checkbox {
  padding-bottom: 15px;
}
.content-monthlyreport .gr-chart-checkbox .item-checkbox {
  margin-bottom: 10px;
}
.content-monthlyreport .content {
  margin-bottom: 15px;
}
.content-monthlyreport .content-table {
  margin-bottom: 40px;
}

.monthly-import-table {
  margin-top: 30px;
}

.ulChartDefine {
  height: calc(100% - 240px);
  overflow: auto;
}
.ulChartDefine::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.ulChartDefine::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.ulChartDefine::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
.ulChartDefine li {
  padding-right: 10px;
}
.ulChartDefine li a {
  position: relative;
  z-index: 0;
}
.ulChartDefine li a:hover {
  color: #60c6ff;
  opacity: 1;
}
.ulChartDefine li a.active {
  color: #60c6ff;
}
.ulChartDefine li:not(:last-child) {
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.icon-pin-hide .icon {
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.7;
}
.icon-pin-hide .icon:hover {
  color: #60c6ff;
  opacity: 1;
}
.icon-pin-hide .icon.active {
  color: #60c6ff;
  opacity: 1;
}
.icon-pin-hide .icon-hide {
  font-size: 10px;
  position: relative;
  top: -1px;
  margin-left: 4px;
}

.nav-right-ct {
  max-height: 128px;
  overflow: auto;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  padding: 0 10px;
  border-radius: 6px;
}
.nav-right-ct::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.nav-right-ct::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.nav-right-ct::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
.nav-right-ct li {
  position: relative;
  padding: 5px 0;
  transition: all 0.3s ease;
  cursor: pointer;
}
.nav-right-ct li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-right-ct li:hover {
  color: #60c6ff;
}
.nav-right-ct li .txt-pin.active {
  color: #60c6ff;
}
.nav-right-ct .icon {
  top: 11px;
  right: 0;
  position: absolute;
  font-size: 10px;
  line-height: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}
.nav-right-ct .icon:hover {
  color: #60c6ff;
}
.nav-right-ct.nav-hide .icon {
  color: #60c6ff;
}

.nav-pin .icon {
  width: 12px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.07 13.77'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2360c6ff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m6.42,9.28H2.34c-.26,0-.5-.12-.65-.33-.15-.21-.19-.48-.11-.72l.02-.07c.31-.92.92-1.67,1.7-2.17l3.12,3.3ZM3.14,2.1h.74l-.11,1.46,5.41,5.72h1.14c.26,0,.5-.12.65-.33.15-.21.19-.47.11-.72l-.02-.07c-.34-1.03-1.07-1.87-1.98-2.36l-.28-3.7h.74c.44,0,.8-.36.8-.8s-.36-.8-.8-.8H3.14c-.44,0-.8.36-.8.8s.36.8.8.8Zm2.39,10.37c0,.44.36.8.8.8s.8-.36.8-.8v-2.39h-1.6v2.39Zm7.38,1.16c.2-.19.21-.51.02-.71L.86.16C.67-.04.36-.05.16.14c-.2.19-.21.51-.02.71l12.07,12.77c.1.1.23.16.36.16.12,0,.25-.04.34-.14Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.nav-pin .icon:hover {
  opacity: 0.7;
}

.nav-right-monthly .gr-btn {
  bottom: 17px;
  position: absolute;
  right: 12px;
}

.wp-list-stone {
  width: 100%;
}
.wp-list-stone > div:first-child {
  padding-right: 15px;
  word-wrap: break-word;
}
.wp-list-stone .btn-Preview {
  margin-bottom: 20px;
}

.smart-OTP input {
  width: 100%;
}

.title-chart {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
}

.mr-chart-import-export:not(:last-child) {
  margin-bottom: 30px;
}

.weeklyReport-table a i {
  margin-right: 10px;
}

.b-status, .stt-progress {
  padding: 1px 5px 0;
  border-radius: 4px;
  text-align: center;
  margin: 0 auto;
}

.b-status {
  width: 120px;
}

.btn-primary {
  color: #60c6ff;
  background: rgba(96, 198, 255, 0.2);
}

.btn-info {
  color: #F57C00;
  background: rgba(245, 124, 0, 0.2);
}

.btn-success {
  color: #008b00;
  background: rgba(0, 139, 0, 0.2);
}

.btn-danger {
  color: #E94434;
  background: rgba(182, 0, 0, 0.2);
}

.btn-copy {
  margin-left: 10px;
}

.boderDetailWeekly {
  padding: 6px 10px;
  border: 1px solid #2b2b2b;
  border-radius: 6px;
  margin-bottom: 0;
}

.stt-progress {
  width: 130px;
  display: block;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 1px;
}

.box-progress-danger {
  color: #B60000;
  background: rgba(182, 0, 0, 0.2);
}

.box-progress-warning {
  background-color: #c79121;
}

.box-progress-success {
  background-color: #739e73;
}

.cm-icon-action > div {
  padding-bottom: 1px;
  width: 24px;
  height: 22px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(204, 204, 204, 0.05);
  background: rgba(204, 204, 204, 0.1);
}
.cm-icon-action > div:hover {
  background: rgba(204, 204, 204, 0.5);
}
.cm-icon-action > div:not(:last-child) {
  margin-right: 6px;
}
.cm-icon-action > div:first-child {
  border-color: #1d2743;
  background: #121829;
  color: #ccc;
}
.cm-icon-action > div:first-child:hover {
  border-color: #4b64ac;
  background: #4b64ac;
}
.cm-icon-action > div i {
  line-height: 0;
}

.content-scaife-management {
  margin-top: 25px;
}

.box-ancholink {
  margin-bottom: 15px;
}
.box-ancholink .button-acl a {
  display: block;
  padding: 5px 10px 5px;
  background: #002443;
  border-radius: 6px;
  margin: 5px;
  min-width: 90px;
  text-align: center;
}
.box-ancholink .button-acl a:hover {
  color: inherit;
}

.table-plan-selected {
  font-size: 13px;
}

.popup-proportion-top .box {
  padding-right: 20px;
  padding-bottom: 15px;
  width: 20%;
}
.popup-proportion-top .box-multiselect {
  width: calc(100% - 105px);
  margin-right: 0;
  position: unset;
  z-index: auto;
  padding-top: 4px;
}
.popup-proportion-top .box-multiselect input[type=text] {
  width: 100%;
}
.popup-proportion-top .box-multiselect.b-input {
  padding-top: 0;
}
.popup-proportion-top .vsb-main button {
  line-height: 1;
}
.popup-proportion-top .vsb-main .caret {
  top: 4px;
}

.popup-proportion-detail .ttl {
  width: 105px;
  margin-bottom: 0;
  color: #fff;
  font-weight: bold;
}
.popup-proportion-detail .table .number-edit {
  width: 100px;
}
.popup-proportion-detail .cm-button {
  margin-top: 15px;
}

.table .number-edit {
  display: inline-block;
  border-bottom: none;
  text-align: right;
  margin-right: 10px;
  width: 80px;
}
.table .number-edit-style2 {
  width: 100%;
  text-align: right;
  border-color: #2b2b2b;
}
.table .text-center .number-edit-style2 {
  text-align: center;
}
.table .icon-edit-value {
  font-size: 11px;
  padding-top: 3px;
  opacity: 0.5;
}

.table-td-noborder td {
  border-bottom: none;
}

.w-160 {
  width: 160px;
}

@media screen and (max-width: 1700px) {
  .popup-proportion-top .box {
    width: 33%;
  }
}
@media screen and (max-width: 1400px) {
  .popup-proportion-top .box {
    width: 50%;
  }
}
.program-specification .box-multiselect {
  position: unset;
  padding-top: 4px;
}
.program-specification .vsb-main button {
  line-height: 1;
}
.program-specification .vsb-main .caret {
  top: 4px;
}
.program-specification .program-search {
  margin-right: 0;
  margin-bottom: 15px;
}

.cm-select-title {
  margin-bottom: 5px;
}
.cm-select-title .item {
  margin-right: 20px;
  margin-bottom: 15px;
}
.cm-select-title .item label {
  margin-right: 10px;
  display: inline-block;
  color: #fff;
  font-weight: bold;
}
.cm-select-title .item .box-multiselect {
  margin-right: 0;
  width: 150px;
  z-index: auto;
}

@media screen and (max-width: 1700px) {
  .program-specification .program-search {
    margin-left: 0;
  }
}
.container-chart-fullScreen .block01 .cm-parent {
  margin-bottom: 0;
}

.calendar.calendar-pt {
  padding-top: 60px;
}
.calendar.fc a:hover {
  color: inherit;
}
.calendar.fc a:focus, .calendar.fc a:visited {
  color: inherit;
}
.calendar.fc.fc-theme-standard th, .calendar.fc.fc-theme-standard td {
  border-color: #000;
}
.calendar.fc.fc-theme-standard .fc-popover {
  background: #111828;
  border: none;
}
.calendar.fc.fc-theme-standard .fc-scrollgrid {
  border: none;
}
.calendar.fc .fc-daygrid-event {
  margin-top: 0;
  padding: 0 6px 4px;
}
.calendar.fc .fc-highlight {
  background: rgba(255, 255, 255, 0.3);
}
.calendar.fc .fc-multimonth-daygrid {
  background: #161616;
}
.calendar.fc th.fc-col-header-cell {
  background: #121829;
  padding: 5px;
  pointer-events: none;
}
.calendar.fc .fc-daygrid-day-number {
  pointer-events: none;
}
.calendar.fc .fc-toolbar-title {
  font-weight: bold;
}
.calendar.fc .fc-header-toolbar {
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2b2b2b;
}
.calendar.fc .fc-header-toolbar .fc-button {
  text-transform: capitalize;
  line-height: 1.2;
}
.calendar.fc .fc-header-toolbar .fc-today-button {
  opacity: 1;
}
.calendar.fc .fc-header-toolbar .fc-today-button:hover {
  background: #2b2b2b;
  border-color: #2b2b2b;
}
.calendar.fc .fc-header-toolbar .fc-today-button:disabled {
  background: #2b2b2b;
  border-color: #2b2b2b;
  cursor: not-allowed;
}
.calendar.fc .fc-button {
  padding: 6px 10px 4px;
}
.calendar.fc .fc-button.fc-next-button, .calendar.fc .fc-button.fc-prev-button {
  padding-top: 4px;
  padding-bottom: 6px;
}
.calendar.fc .fc-button .fc-icon {
  font-size: 14px;
}
.calendar.fc .fc-multimonth {
  border: none;
  margin-left: -10px;
  margin-right: -10px;
}
.calendar.fc .fc-multimonth-multicol .fc-multimonth-month {
  padding: 0px 10px 10px;
}
.calendar.fc .fc-cell-shaded, .calendar.fc .fc-day-disabled {
  background: rgba(255, 255, 255, 0.02);
}
.calendar.fc .fc-event-title {
  color: transparent;
  line-height: 0;
}
.calendar.fc .fc-event-time, .calendar.fc .fc-event-title {
  padding: 0 0 0 10px;
  position: relative;
}
.calendar.fc .fc-event-title, .calendar.fc .fc-event-title .txt {
  display: block;
}
.calendar.fc .fc-event-title .txt {
  line-height: 1.2;
  color: #fff;
  border-bottom: 1px solid #AD8A74;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar.fc .fc-event-main .icon-list-even {
  position: absolute;
  top: 4px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #AD8A74;
}
.calendar.fc .fc-multimonth-title {
  padding: 12px 0;
}
.calendar.fc.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start), .calendar.fc.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end) {
  border-radius: 3px;
}
.calendar.fc .fc-button-primary {
  background-color: transparent;
  border-color: #2b2b2b;
}
.calendar.fc .fc-button-primary:not(:disabled).fc-button-active, .calendar.fc .fc-button-primary:not(:disabled):active {
  background: #2b2b2b;
  border-color: #2b2b2b;
}
.calendar.fc .fc-button-primary:not(:disabled).fc-button-active:focus, .calendar.fc .fc-button-primary:not(:disabled):active:focus {
  box-shadow: none;
}
.calendar.fc .fc-button-primary:focus {
  box-shadow: none;
}
.calendar.fc .fc-day-sat .fc-daygrid-day-top a, .calendar.fc .fc-day-sun .fc-daygrid-day-top a {
  color: #ca6924;
}
.calendar.fc .fc-daygrid-day.fc-day-today {
  background: none;
}
.calendar.fc .fc-daygrid-day-number {
  width: 26px;
  height: 26px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar.fc .fc-day-today .fc-daygrid-day-frame {
  border-top: 2px solid #60c6ff;
}
.calendar.fc .fc-day-today .fc-daygrid-day-top .fc-daygrid-day-number {
  color: #60c6ff;
  font-weight: bold;
}
.calendar.fc .fc-daygrid-day-frame {
  padding: 5px;
}
.calendar.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
  margin-bottom: 3px;
}
.calendar.fc .fc-scrollgrid-section {
  background: #161616;
}
.calendar.fc .fc-day-other {
  background: rgba(255, 255, 255, 0.05);
}
.calendar.fc .fc-timegrid-event .fc-event-main {
  padding: 1px 2px 0;
}
.calendar.fc .fc-timegrid-col.fc-day-today {
  background: rgba(94, 80, 63, 0.45);
}
.calendar.fc .fc-timegrid-event-harness > .fc-timegrid-event {
  inset: 1px;
}
.calendar.fc div.rydiam-event {
  position: absolute !important;
  width: 5px;
  height: 5px;
  background: #60c6ff;
  visibility: visible !important;
  left: auto !important;
  right: 15px !important;
  border-radius: 50%;
}
.calendar.fc .fc-timegrid-more-link {
  color: #000;
}
.calendar.fc .fc-timegrid-more-link:hover, .calendar.fc .fc-timegrid-more-link:focus {
  color: #000;
}
.calendar.fc .fc-multimonth-daygrid-table .fc-daygrid-day-events .fc-daygrid-event-harness a, .calendar.fc .fc-multimonth-daygrid-table .fc-daygrid-day-events .fc-daygrid-day-bottom a {
  display: none;
}
.calendar.fc .fc-timegrid-event-harness-inset .fc-timegrid-event, .calendar.fc .fc-timegrid-event.fc-event-mirror, .calendar.fc .fc-timegrid-more-link {
  box-shadow: none;
}
.calendar.fc .fc-more-popover .fc-popover-body {
  max-height: 300px;
  overflow: auto;
}
.calendar.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.calendar.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.calendar.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
.calendar.fc .fc-toolbar input[name=datetimes] {
  width: 120px;
}
.calendar.fc .active-this-month {
  color: #60c6ff;
}
.calendar.fc .fc-listWeek-view::-webkit-scrollbar-track, .calendar.fc .fc-listDay-view::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.calendar.fc .fc-listWeek-view::-webkit-scrollbar, .calendar.fc .fc-listDay-view::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.calendar.fc .fc-listWeek-view::-webkit-scrollbar-thumb, .calendar.fc .fc-listDay-view::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
.calendar.fc .fc-listWeek-view, .calendar.fc .fc-listDay-view {
  overflow: auto !important;
}
.calendar.fc .fc-listWeek-view .fc-list-day-cushion, .calendar.fc .fc-listDay-view .fc-list-day-cushion {
  background: #121829;
}
.calendar.fc .fc-listWeek-view.fc-list, .calendar.fc .fc-listDay-view.fc-list {
  border: 1px solid #2b2b2b;
  border-radius: 4px;
}
.calendar.fc .fc-listWeek-view .fc-list-event:hover td, .calendar.fc .fc-listDay-view .fc-list-event:hover td {
  background: #4c4c4c;
  cursor: pointer;
}
.calendar.fc .fc-listWeek-view .fc-list-event .fc-list-event-title a:hover, .calendar.fc .fc-listDay-view .fc-list-event .fc-list-event-title a:hover {
  opacity: 1;
}
.calendar.fc .fc-list-sticky .fc-list-day > * {
  z-index: 1;
}
.calendar .fc-header-toolbar {
  transition: all 0.5s ease;
}
.calendar .fc-header-toolbar.cl-fixed {
  position: fixed;
  top: 47px;
  left: 250px;
  right: 0;
  z-index: 10;
  background: #000;
  padding: 3px 30px;
}
.calendar .fc-header-toolbar.active {
  left: 0;
}
.calendar .fc-toolbar-chunk {
  display: flex;
  align-items: flex-end;
}

.calendar-tab-day {
  margin-bottom: 0;
}
.calendar-tab-day li {
  margin-right: 20px;
  margin-bottom: 15px;
}
.calendar-tab-day li .number {
  padding: 4px 7px 3px;
  border-radius: 4px;
  display: inline-block;
  margin-left: 8px;
  background: rgba(204, 204, 204, 0.15);
  line-height: 1;
  font-size: 12px;
  position: relative;
  top: -4px;
}
.calendar-tab-day li .number::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -3px;
  left: -4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(204, 204, 204, 0.15);
}
.calendar-tab-day li.active .number {
  background: rgba(0, 158, 246, 0.2);
}
.calendar-tab-day li.active .number::after {
  background: rgba(0, 158, 246, 0.2);
}
.calendar-tab-day li.active a::before {
  height: 1px;
  background: #60c6ff;
}
.calendar-tab-day li a {
  font-size: 14px;
  padding-bottom: 3px;
}

.calender-search {
  width: 200px;
  display: inline-block;
}

@media screen and (max-width: 1280px) {
  .calendar.fc .fc-toolbar-title {
    font-size: 18px;
  }
  .calendar.fc .fc-header-toolbar {
    align-items: flex-start;
  }
  .calendar.fc .fc-header-toolbar .fc-toolbar-chunk:first-child {
    width: 290px;
  }
  .calendar.fc .fc-header-toolbar .fc-toolbar-chunk .calender-search {
    width: 264px;
    margin-left: 0;
    margin-top: 10px;
  }
}
@media screen and (max-width: 1024px) {
  .calendar .fc-header-toolbar.cl-fixed {
    padding: 10px 30px;
    top: 43px;
    left: 0;
  }
}
.rydiam-cal-event input, .rydiam-cal-event .vsb-main button, .rydiam-cal-content-event input, .rydiam-cal-content-event .vsb-main button {
  border-color: #2b2b2b;
}

.rydiam-cal-event {
  margin-bottom: 15px;
}
.rydiam-cal-event .popup-cal-event-title h3 {
  margin-right: 15px;
}
.rydiam-cal-event .popup-cal-event-title .box-multiselect {
  margin-right: 15px;
}
.rydiam-cal-event .ry-title {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

.rydiam-cal-content-event > div:not(:last-child) {
  margin-bottom: 15px;
}
.rydiam-cal-content-event > div.title {
  margin-bottom: 5px;
}
.rydiam-cal-content-event div.cm-button-option {
  margin-bottom: 7px;
}
.rydiam-cal-content-event label, .rydiam-cal-content-event .txt-bold {
  display: block;
}
.rydiam-cal-content-event .col-title input {
  width: 100%;
}
.rydiam-cal-content-event .col-title .exported-date {
  width: 100px;
}
.rydiam-cal-content-event .col-title label, .rydiam-cal-content-event .col-title .txt-bold, .rydiam-cal-content-event .col label, .rydiam-cal-content-event .col .txt-bold {
  color: #fff;
  font-weight: bold;
}
.rydiam-cal-content-event .col-title label.title-text-area, .rydiam-cal-content-event .col-title .txt-bold.title-text-area, .rydiam-cal-content-event .col label.title-text-area, .rydiam-cal-content-event .col .txt-bold.title-text-area {
  margin-bottom: 5px;
}
.rydiam-cal-content-event .item {
  grid-template-columns: calc(34% - 8px) calc(33% - 8px) calc(33% - 8px);
}
.rydiam-cal-content-event .item.item-all-day .col {
  width: calc(100% - 65px);
}
.rydiam-cal-content-event .item.item-all-day .col .vsb-main {
  width: 100%;
  max-width: none;
}
.rydiam-cal-content-event .item.item-all-day .col .vsb-main > button {
  max-width: none !important;
}
.rydiam-cal-content-event .item.item-all-day .box-all-day {
  width: 50px;
  margin-left: auto;
}
.rydiam-cal-content-event .item .ttl-datetimes {
  width: 100%;
  max-width: none;
}
.rydiam-cal-content-event .item .col select {
  width: 100%;
}
.rydiam-cal-content-event .item .col .vsb-main {
  width: 100%;
}
.rydiam-cal-content-event .item .col input[type=text] {
  width: 100%;
}
.rydiam-cal-content-event .item-col3 {
  grid-template-columns: calc(50% - 75px) calc(50% - 75px) 120px;
}
.rydiam-cal-content-event .item-col3 input {
  width: 100%;
}
.rydiam-cal-content-event .ttl-description {
  margin-bottom: 5px;
  color: #fff;
  font-weight: bold;
}
.rydiam-cal-content-event textarea {
  width: 100%;
  min-height: 130px;
}
.rydiam-cal-content-event .box-attachment {
  grid-template-columns: 100px calc(100% - 115px);
  margin-bottom: 10px;
}
.rydiam-cal-content-event .box-attachment .ttl-attachment {
  line-height: 1.4;
  color: #fff;
  font-weight: bold;
}
.rydiam-cal-content-event .ttl-all-day {
  margin-bottom: 5px;
  color: #fff;
  font-weight: bold;
}

.box02-attachment {
  margin-top: 15px;
}

.rydiam-cal-event-icon.cm-icon-action > div {
  width: 26px;
  height: 24px;
  font-size: 14px;
}
.rydiam-cal-event-icon.cm-icon-action > div:first-child {
  border-color: rgba(204, 204, 204, 0.05);
  background: rgba(204, 204, 204, 0.1);
  color: inherit;
}
.rydiam-cal-event-icon.cm-icon-action > div:first-child:hover {
  background: rgba(204, 204, 204, 0.5);
}

.box-see-event .item.item-all-day input[type=text] {
  width: 100%;
}

.cm-button-option {
  margin-bottom: 7px;
}
.cm-button-option .button-option {
  margin-bottom: 8px;
}
.cm-button-option .button-option:not(:last-child) {
  margin-right: 8px;
}
.cm-button-option .button-option input[type=checkbox] {
  display: none;
}
.cm-button-option .button-option label {
  padding: 1px 5px 0;
  border-radius: 4px;
  line-height: 1.3;
  transition: all 0.3s ease;
  border: 1px solid #444;
  display: inline-block;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.cm-button-option .button-option label:hover {
  border-color: #19A1FB;
}
.cm-button-option .button-option label.active {
  border-color: #19A1FB;
  background: #19A1FB;
  color: #fff;
}

.section-calendar-filter {
  position: fixed;
  bottom: 20px;
  right: 85px;
  z-index: 12;
  transition: all 0.3s ease;
}
.section-calendar-filter.filter-totop {
  right: 65px;
  bottom: 15px;
}
.section-calendar-filter .calendar-filter-icon {
  position: relative;
  z-index: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  background: #002443;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
.section-calendar-filter .calendar-filter-icon::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all 0.6s ease;
  background: #00549c;
  border-radius: 50% 50% 0 0;
  transform: translateY(100%) scaleY(0.5);
}
.section-calendar-filter .calendar-filter-icon.active:before, .section-calendar-filter .calendar-filter-icon:hover:before {
  border-radius: 0;
  transform: translateY(0) scaleY(1);
}
.section-calendar-filter .calendar-filter-icon.active:hover:before {
  background: #002443;
}

.section-calendar-filter .gr-calendar-filter {
  position: absolute;
  bottom: calc(100% + 5px);
  width: 200px;
  right: 0;
  background: #000;
  border-radius: 6px;
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.section-calendar-filter .gr-calendar-filter.active {
  display: block;
}
.section-calendar-filter .gr-calendar-filter .list {
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 0;
}
.section-calendar-filter .gr-calendar-filter .list::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(50% - 6px);
  right: 10px;
  width: 10px;
  height: 11px;
  background: url(../images/check-solid.svg) center/contain;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.section-calendar-filter .gr-calendar-filter .list.active::after, .section-calendar-filter .gr-calendar-filter .list:hover::after {
  opacity: 1;
  visibility: visible;
}
.section-calendar-filter .gr-calendar-filter .list:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.section-calendar-filter .gr-calendar-filter .list i {
  margin-right: 5px;
  width: 17px;
}

.btn-toggle-on-off {
  padding: 0;
  position: relative;
  border: none;
  height: 16px;
  width: 40px;
  border-radius: 14px;
  background: #bdc1c8;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.btn-toggle-on-off:focus {
  outline: none;
}
.btn-toggle-on-off:focus.active {
  outline: none;
}
.btn-toggle-on-off > .handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 14px;
  background: #fff;
  transition: left 0.25s;
}

.btn-toggle-on-off.active {
  background-color: #008b00;
  transition: background-color 0.25s;
}
.btn-toggle-on-off.active > .handle {
  left: 26px;
  transition: left 0.25s;
}
.btn-toggle-on-off.active:before {
  opacity: 0.5;
}
.btn-toggle-on-off.active:after {
  opacity: 1;
}

.btn-toggle-on-off.focus {
  outline: none;
}

.btn-toggle-on-off.focus.active {
  outline: none;
}

.calendar-info-footer {
  position: fixed;
  left: 280px;
  bottom: 0;
  background: #000;
  padding: 6px 8px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  transition: all 0.5s ease;
  z-index: 10;
}
.calendar-info-footer.open {
  left: 30px;
}
.calendar-info-footer .col-md-2:not(:last-child) {
  margin-right: 15px;
}
.calendar-info-footer .col-md-2 .icon {
  font-size: 13px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-right: 5px;
  color: #fff;
  position: relative;
  top: 2px;
}
.calendar-info-footer .col-md-2 .icon-leave {
  background: #b60000;
}
.calendar-info-footer .col-md-2 .icon-ot {
  background: #119B99;
}
.calendar-info-footer .col-md-2 .icon-birthday {
  background: #ff5d8f;
}
.calendar-info-footer .col-md-2 .icon-holiday {
  background: #19a1fb;
}
.calendar-info-footer .col-md-2 .icon-private {
  background: #52433E;
}
.calendar-info-footer .col-md-2 .icon-notice {
  background: #fca311;
}

@media screen and (max-width: 1600px) {
  .calendar.fc .fc-daygrid-day-number {
    width: 26px;
    height: auto;
    padding: 1px 4px;
  }
}
@media screen and (max-width: 1024px) {
  .calendar-info-footer {
    left: 30px;
  }
}
.cm-legend .info > div:not(:last-child) {
  margin-right: 15px;
}
.cm-legend .icon {
  height: 15px;
  width: 15px;
  position: relative;
  top: 2px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 4px;
}
.cm-legend .icon-completed {
  background-color: #008b00;
}
.cm-legend .icon-pending {
  background-color: #F57C00;
}
.cm-legend .icon-new {
  background-color: #ccc;
}
.cm-legend .icon-achieved {
  background: #008b00;
}
.cm-legend .icon-not-achieved {
  background: #B60000;
}
.cm-legend .txt {
  color: #A7A7A7;
}

.icon-list-detailday {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #19a1fb;
  margin-right: 5px;
  border-radius: 50%;
  position: relative;
  top: -2px;
}

.info-machine {
  color: #60c6ff;
}

.table_stock_detail th {
  text-align: left !important;
}

.table-detailday tr {
  cursor: pointer;
  transition: all 0.3s ease;
}
.table-detailday tr:hover {
  background: rgba(0, 158, 246, 0.1);
}

.tab-event-detail {
  margin-bottom: 15px;
}

.form-code-calendar {
  font-size: 13px;
  display: inline-block;
  padding-right: 10px;
}

.img-logo-form {
  display: inline-block;
  width: 100px;
  margin-right: 10px;
}

.box-related-approvals {
  margin-top: 15px;
  border: 1px solid #2b2b2b;
  border-radius: 6px;
}
.box-related-approvals .style-ttl {
  padding-bottom: 3px;
  border-bottom: 1px solid #2b2b2b;
}
.box-related-approvals .style-ttl p {
  margin-bottom: 0;
}
.box-related-approvals .item {
  text-align: center;
}
.box-related-approvals .item:not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}
.box-related-approvals .item .img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  background: #fff;
}
.box-related-approvals .item .img ~ p {
  margin-bottom: 0;
  margin-top: 2px;
  font-size: 12px;
}
.box-related-approvals .ttl {
  font-weight: bold;
  padding-bottom: 6px;
  border-bottom: 1px solid #2b2b2b;
  margin-bottom: 0;
  padding: 6px 10px;
}

.ct-related > div, .b-approvals > div {
  padding: 10px 10px 0;
}

.ct-related {
  width: 68%;
}

.b-approvals {
  width: 32%;
  border-left: 1px solid #2b2b2b;
}

.form-div-content:not(:last-child) {
  margin-bottom: 5px;
}
.form-div-content .form-title {
  font-weight: bold;
  color: #fff;
}
.form-div-content .form-content {
  margin-left: 10px;
  display: inline-block;
}

.overlay-smart-otp {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #161616;
  z-index: 2;
  border-radius: 6px;
}
.overlay-smart-otp .form-group input {
  width: 100%;
}

.tab-monthlyreport:not(:last-child) {
  margin-bottom: 65px;
}
.tab-monthlyreport .form-div-content {
  flex-wrap: wrap;
}
.tab-monthlyreport .form-div-content .form-title, .tab-monthlyreport .form-div-content .form-content {
  width: 100%;
}

@media screen and (max-width: 1060px) {
  .tab-monthlyreport .b-left {
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 15px;
  }
}
.tab_content_chart {
  position: relative;
}
.tab_content_chart .block01 .group-btn {
  margin-left: 0;
}
.tab_content_chart .ttl-datetimes {
  width: 240px;
}
.tab_content_chart .b-left > div {
  margin-right: 15px;
}

.footer-colorbox {
  margin-top: 15px;
  padding-top: 9px;
  border-top: 1px solid #2b2b2b;
}

.monthly-menuChart {
  margin-bottom: 32px;
}

.monthly-ttl-item {
  margin: 5px;
  padding: 5px;
  text-align: center;
  border: 1px solid #2b2b2b;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.monthly-ttl-item:hover {
  background: #002443;
  border-color: #002443;
  color: #fff;
}
.monthly-ttl-item.slick-click {
  background: #002443;
  border-color: #002443;
  color: #fff;
}

.btn-slick {
  position: absolute;
  background: #000;
  border: none;
  outline: none;
  color: #6d6d6d;
  padding: 5px 8px;
  height: 100%;
  border-radius: 2px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  border-radius: 4px;
}
.btn-slick:hover {
  opacity: 1;
  color: #fff;
  background: #161616;
}
.btn-slick::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100px;
  top: -1px;
  bottom: 0;
  background: #000;
}

.slick-prev {
  left: 0;
}
.slick-prev::before {
  left: 0;
  -webkit-mask-image: linear-gradient(to left, transparent 0, transparent 51px, #000 77px, #000 100%);
  mask-image: linear-gradient(to left, transparent 0, transparent 51px, #000 77px, #000 100%);
}

.slick-next {
  right: 0;
}
.slick-next::before {
  left: auto;
  right: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 51px, #000 77px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, transparent 51px, #000 77px, #000 100%);
}

.divImagePropotion {
  line-height: 0;
}

#colorbox .btn-slick::before {
  background: #161616;
}
#colorbox .slick-prev::before {
  -webkit-mask-image: linear-gradient(to left, transparent 0, transparent 51px, #161616 77px, #161616 100%);
  mask-image: linear-gradient(to left, transparent 0, transparent 51px, #161616 77px, #161616 100%);
}
#colorbox .slick-next::before {
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 51px, #161616 77px, #161616 100%);
  mask-image: linear-gradient(to right, transparent 0, transparent 51px, #161616 77px, #161616 100%);
}

.page-accident-logbook .b-left > div.gr-radiobox {
  margin-top: 0;
}
.page-accident-logbook .b-left > div.gr-radiobox label {
  margin-top: 8px;
}

.pr-information-pic {
  width: 20px;
  height: 20px;
}
.pr-information-pic a {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2b2b2b;
  border-radius: 3px;
  overflow: hidden;
}

.detail-info-img {
  max-width: 1100px;
  margin: 0 auto;
}
.detail-info-img .col-02 {
  position: relative;
  line-height: 0;
  width: calc(50% - 15px);
  max-width: 530px;
  margin-bottom: 35px;
}
.detail-info-img .col-02:nth-child(2) {
  margin-right: 0;
}
.detail-info-img .col-02::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  height: 35px;
  z-index: 1;
  bottom: -35px;
}
.detail-info-img .col-02::before {
  position: absolute;
  bottom: -35px;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  z-index: 2;
  text-align: center;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
}
.detail-info-img .col-02:first-child::before {
  content: "Before";
}
.detail-info-img .col-02:nth-child(2)::before {
  content: "After";
}
.detail-info-img .col-01 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table td.dr-priority {
  padding-left: 0;
}
.table td.dr-priority select {
  text-align: center;
}

.detail-change-password .item {
  margin-bottom: 20px;
}
.detail-change-password .item .txt {
  position: relative;
}
.detail-change-password .error-file {
  color: #e94434;
  float: right;
  font-size: 13px;
}
.detail-change-password .error-file .icon {
  margin-right: 5px;
}

.content-p-specification-video .box-video {
  margin-top: 30px;
}
.content-p-specification-video .box-video .item {
  width: calc(33.3333333333% - 15px);
  border-radius: 6px;
  overflow: hidden;
}

@media screen and (max-width: 1024px) {
  .content-p-specification-video .box-video .item {
    width: 100%;
  }
  .content-p-specification-video .box-video .item:not(:last-child) {
    margin-bottom: 25px;
  }
}
.btn-link-download {
  margin-top: 15px;
}

.box-v360-quality {
  margin-left: -10px;
}
.box-v360-quality .item {
  padding: 0 10px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box-v360-quality .item .img {
  width: 100%;
  margin-bottom: 5px;
  position: relative;
  overflow: hidden;
}
.box-v360-quality .item .img .a-img {
  display: block;
  width: 100%;
}
.box-v360-quality .item .img .a-img img {
  height: 100%;
  object-fit: cover;
}
.box-v360-quality .item .img .box-view {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
}
.box-v360-quality .item .img .ttl-date {
  position: absolute;
  top: 5px;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  padding: 2px 10px 0;
  border-radius: 4px 0 0 4px;
  font-size: 13px;
  z-index: 2;
}
.box-v360-quality .item .img .btn-actions {
  position: absolute;
  bottom: -16%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
  align-items: flex-end;
  font-size: 12px;
}
.box-v360-quality .item .img .btn-detail {
  background: rgba(255, 255, 255, 0.3);
  padding: 4px 8px 4px;
  border-radius: 4px;
  z-index: 2;
  width: 65px;
  text-align: center;
  cursor: pointer;
  color: #111;
  font-weight: bold;
  border: 1px solid rgba(145, 145, 145, 0.45);
  letter-spacing: 0.03em;
  transition: box-shadow 0.2s, background 0.2s, transform 0.2s, color 0.2s;
  display: none;
}
.box-v360-quality .item .img .btn-detail:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.box-v360-quality .item .img .btn-report {
  background: rgba(255, 255, 255, 0.3);
  padding: 4px 8px 4px;
  border-radius: 4px;
  z-index: 2;
  width: 65px;
  text-align: center;
  cursor: pointer;
  color: #111;
  font-weight: bold;
  border: 1px solid rgba(145, 145, 145, 0.45);
  letter-spacing: 0.03em;
  transition: all 0.3s ease;
  display: none;
}
.box-v360-quality .item .img .btn-report:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.box-v360-quality .item .img .btn-measure {
  background: rgba(255, 255, 255, 0.3);
  padding: 4px 8px 4px;
  border-radius: 4px;
  z-index: 2;
  width: 65px;
  text-align: center;
  cursor: pointer;
  color: #111;
  font-weight: bold;
  border: 1px solid rgba(145, 145, 145, 0.45);
  letter-spacing: 0.03em;
  transition: box-shadow 0.2s, background 0.2s, transform 0.2s, color 0.2s;
  display: none;
}
.box-v360-quality .item .img .btn-measure:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.box-v360-quality .item .img .btn {
  width: 28px;
  height: 28px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.box-v360-quality .item .img .btn:not(:last-child) {
  margin-bottom: 5px;
}
.box-v360-quality .item .img .btn:hover {
  opacity: 0.7;
}
.box-v360-quality .item .img .btn a:hover {
  color: #fff;
  opacity: 1;
}
.box-v360-quality .item .title {
  color: #60c6ff;
  white-space: initial;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 5px;
}
@supports (-webkit-line-clamp: 2) {
  .box-v360-quality .item .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 45px;
  }
}
.box-v360-quality .item .title:hover {
  opacity: 0.7;
}
.box-v360-quality .item .stone-comment {
  margin-top: 10px;
  display: flex;
  background: #292929;
  padding: 5px 10px;
  border-radius: 4px;
  min-height: 31px;
}
.box-v360-quality .item .stone-comment.noComment {
  background: transparent;
}
.box-v360-quality .box-evalution {
  border: 1px solid #2b2b2b;
  border-radius: 4px;
  overflow: hidden;
}
.box-v360-quality .box-evalution .btn {
  width: 33.3333333333%;
  padding: 2px 5px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.box-v360-quality .box-evalution .btn:not(:last-child) {
  border-right: 1px solid #2b2b2b;
}
.box-v360-quality .box-evalution .btn.active {
  color: #fff;
}
.box-v360-quality .box-evalution .btn.active .icon {
  background: rgba(255, 255, 255, 0.2);
}
.box-v360-quality .box-evalution .btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.box-v360-quality .box-evalution .btn .icon {
  margin-left: 5px;
  background: rgba(255, 255, 255, 0.15);
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 11px;
  position: relative;
  top: -1px;
  padding-top: 1px;
  border-radius: 50%;
  text-align: center;
}
.box-v360-quality .box-evalution .btn-good.active {
  background: rgba(0, 139, 0, 0.2);
  color: #008b00;
}
.box-v360-quality .box-evalution .btn-ok.active {
  background: rgba(25, 161, 251, 0.2);
  color: #19a1fb;
}
.box-v360-quality .box-evalution .btn-reject.active {
  background: rgba(233, 68, 52, 0.2);
  color: #e94434;
}
.box-v360-quality .box-evalution .btn-R.active {
  background: rgba(233, 68, 52, 0.2);
  color: #e94434;
}
.box-v360-quality .box-evalution-clarity {
  font-weight: bold;
}
.box-v360-quality .box-evalution-clarity .btn {
  width: 100%/4;
}

.V360-quality-sum .txt {
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0 10px;
  border-radius: 4px;
  background: #161616;
}
.V360-quality-sum .txt:hover {
  opacity: 0.7;
}
.V360-quality-sum .txt:not(:last-child) {
  margin-right: 5px;
}
.V360-quality-sum .txt.active {
  background: rgba(25, 161, 251, 0.2);
}

.col-completionRate {
  cursor: pointer;
}

@media screen and (min-width: 1921px) and (max-width: 2559px) {
  .box-v360-quality .item {
    width: 16.6666666667%;
  }
}
@media screen and (min-width: 1441px) and (max-width: 1680px) {
  .box-v360-quality .item {
    width: 25%;
  }
}
@media screen and (max-width: 1440px) {
  .box-v360-quality .item {
    width: 33.3333333333%;
  }
}
.section:not(:last-child) {
  margin-bottom: 35px;
}

.table-line-title thead tr:not(:first-child) th {
  border-top: 1px solid #444;
}

.cm-box-info {
  border: 1px solid #2b2b2b;
  padding: 10px 10px;
  margin-top: 5px;
}

.shipping-content {
  margin-bottom: 20px;
  margin-left: -10px;
  margin-right: -10px;
}
.shipping-content .col-content {
  padding: 0 10px;
  margin-bottom: 20px;
}

@media screen and (max-width: 1600px) {
  .shipping-content .col-content {
    width: 50%;
  }
}
@media screen and (max-width: 1170px) {
  .shipping-content .col-content {
    width: 50%;
  }
  .shipping-content .col-content .table {
    width: 100%;
  }
}
.content-program-reference .content01 {
  width: 20%;
}
.content-program-reference .content02 {
  width: 80%;
  padding-left: 15px;
}
.content-program-reference .content02 .box-info {
  width: calc(50% - 8px);
}
.content-program-reference .box-total {
  padding: 5px 10px;
  border-radius: 4px;
  background: #121829;
  margin-top: 15px;
}
.content-program-reference .box-total .number {
  margin-left: 8px;
  font-weight: bold;
}

.program-reference-img {
  padding-right: 15px;
  height: calc(100% - 46px);
}
.program-reference-img .item {
  border: 1px solid #333;
  border-radius: 6px;
  overflow: hidden;
}
.program-reference-img .item:not(:last-child) {
  margin-bottom: 10px;
}
.program-reference-img .item .title, .program-reference-img .item .img {
  cursor: pointer;
  transition: all 0.3s ease;
}
.program-reference-img .item .img {
  padding: 0 8px;
  width: 50%;
}
.program-reference-img .item .img a {
  display: block;
  position: relative;
}
.program-reference-img .item .img a .icon-zoom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: all 0.3s ease;
}
.program-reference-img .item .img a .icon-zoom img {
  width: 25px;
}
.program-reference-img .item .img a:hover .icon-zoom {
  opacity: 1;
  height: 100%;
}
.program-reference-img .item .gr-img {
  padding: 15px 5px;
}
.program-reference-img .item .title {
  background: #333;
  padding: 6px 10px;
}
.program-reference-img .item .title:hover {
  opacity: 0.5;
}
.program-reference-img .item.active {
  border-color: #14213d;
}
.program-reference-img .item.active .title {
  background: #14213d;
  color: #fff;
}

.program-reference-3d {
  overflow: hidden;
}

.f__m__h.question .f__m__h__ttl i {
  margin-right: 8px;
}

.f__cm .f__m__f .f__btn[data-al=true] {
  background: #a8a8a8 !important;
  color: #111 !important;
}

@media screen and (min-width: 1171px) and (max-width: 1800px) {
  .content-program-reference .content01 {
    width: 25%;
  }
  .content-program-reference .content02 {
    width: 75%;
  }
}
@media screen and (max-width: 1170px) {
  .content-program-reference {
    margin-top: 15px;
  }
  .content-program-reference .content01 {
    width: 100%;
    margin-bottom: 15px;
  }
  .content-program-reference .box-total {
    margin-top: 15px;
  }
  .program-reference-img {
    display: flex;
  }
  .program-reference-img .item {
    width: 225px;
    margin-bottom: 15px;
    flex-shrink: 0;
    overflow: unset;
  }
  .program-reference-img .item:not(:last-child) {
    margin-right: 10px;
    margin-bottom: 15px;
  }
  .program-reference-img .item .img {
    width: 100px;
  }
  .program-reference-img .item .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .content-program-reference .content02 {
    padding-left: 0;
    width: 100%;
  }
  .program-reference-table .table {
    width: auto;
  }
}
.fancybox__container.fancyLight {
  --fancybox-bg: rgba(255, 255, 255, 0.98);
}
.fancybox__container.fancyLight .fancybox__caption {
  color: #111;
}

.plan-clara {
  display: flex;
  align-items: center;
}

.img-clara {
  margin-left: 8px;
  line-height: 0;
  border: 1px dotted #6d6d6d;
  padding: 4px 5px;
}
.img-clara img {
  width: 52px;
}

.a-block a {
  display: block;
  margin-top: 2px;
}

.content-profile {
  width: 100%;
  border: 1px solid #2b2b2b;
  padding: 25px;
  border-radius: 4px;
}
.content-profile.content-profile-w50 {
  max-width: 805px;
}
.content-profile .img-profile {
  width: 100px;
  height: 150px;
}
.content-profile .img-profile img {
  max-height: 100%;
  border-radius: 4px;
}
.content-profile .profile-from {
  width: calc(100% - 120px);
}
.content-profile .profile-from .item {
  width: 49%;
  border-bottom: 1px solid #2b2b2b;
  display: flex;
  padding: 12px 0;
}
.content-profile .profile-from .ttl {
  width: 160px;
  color: #fff;
}
.content-profile .profile-from .txt {
  width: calc(100% - 160px);
}

.email-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  cursor: pointer;
  border-radius: 50px;
  padding: 3px 4px 2px;
  transition: all 0.3s ease;
  margin-left: 15px;
  line-height: 1.3;
}
.email-btn:hover {
  opacity: 0.7;
}
.email-btn i {
  position: relative;
  top: 1px;
  margin-right: 7px;
  font-size: 12px;
}

.email-confirm {
  border: 1px solid rgba(56, 151, 75, 0.3);
  color: #38974b;
  border-radius: 2px;
  padding: 3px 2px 2px 10px;
  display: flex;
  justify-content: space-between;
}
.email-confirm:hover {
  opacity: 1;
  cursor: auto;
}
.email-confirm i {
  line-height: 0;
  position: relative;
  top: -0.5px;
}

.email-not-confirm {
  background: #a8a8a8;
  color: #000;
  font-weight: 500;
}

@media screen and (max-width: 1440px) {
  .content-profile .profile-from .ttl {
    width: 125px;
  }
  .content-profile .profile-from .txt {
    width: calc(100% - 125px);
  }
}
@media screen and (max-width: 1279px) {
  .content-profile .profile-from .item {
    display: block;
  }
  .content-profile .profile-from .ttl, .content-profile .profile-from .txt {
    width: 100%;
  }
  .content-profile .profile-from .ttl {
    padding-bottom: 5px;
  }
}
@media screen and (max-width: 1000px) {
  .content-profile .profile-from .item {
    display: block;
  }
  .content-profile .profile-from .ttl, .content-profile .profile-from .txt {
    width: 100%;
  }
  .content-profile .profile-from .ttl {
    padding-bottom: 5px;
  }
  .content-profile .profile-from .txt {
    display: block;
  }
  .email-btn {
    display: block;
    margin-left: 0;
    margin-top: 10px;
    text-align: center;
  }
}
.page-stoneExport {
  padding-top: 15px;
}
.page-stoneExport .logo {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: #eb222b;
  cursor: pointer;
  padding-bottom: 25px;
}
.page-stoneExport .logo img {
  max-width: 100%;
}
.page-stoneExport .logo .icon-logo {
  width: 35px;
  height: 35px;
  margin-right: 5px;
}

.menu-new {
  margin-left: 5px;
  font-size: 10px;
  padding: 3px 5px;
  display: inline-block;
  border-radius: 2px;
  line-height: 1;
  color: #fff;
  font-weight: bold;
  background: #82060f;
  position: relative;
  top: -1px;
}

.facet-content .box-shape {
  width: 70%;
}
.facet-content .box-shape-side {
  width: 30%;
}
.facet-content .box {
  border-bottom: 1px solid #2b2b2b;
}
.facet-content .box2 {
  padding-top: 12px;
}
.facet-content .box3 {
  padding-top: 12px;
  padding-bottom: 10px;
}
.facet-content .title {
  font-weight: 500;
  margin-bottom: 8px;
  color: #fff;
}
.facet-content .box-detail {
  margin-top: 15px;
}
.facet-content .fc-name {
  width: 100%;
}
.facet-content .facet-item {
  margin-bottom: 10px;
  overflow: hidden;
}
.facet-content .detail-mistake-total {
  width: 70%;
  border: 1px dashed #2b2b2b;
  padding: 15px;
}
.facet-content .detail-mistake-total .item-total {
  margin-bottom: 35px;
}
.facet-content .detail-mistake-total .item-total .ttl {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  padding-bottom: 5px;
  margin-bottom: 15px;
  border-bottom: 1px solid #2b2b2b;
}
.facet-content .detail-mistake-total .item-total .ttl .first-letter {
  color: #009EF6;
}
.facet-content .detail-mistake-total .item-total .ttl .number {
  text-align: right;
  width: 150px;
  font-size: 14px;
}
.facet-content .detail-mistake-total .item-total .ttl .txt {
  width: calc(100% - 150px);
}
.facet-content .detail-mistake-total .total-amount {
  text-align: right;
}
.facet-content .detail-mistake-total .total-amount .number {
  margin-left: 35px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.facet-content .content-sub {
  display: flex;
  flex-wrap: wrap;
}
.facet-content .content-sub > div:not(:last-child) {
  margin-right: 8px;
}
.facet-content .content-sub .shape {
  width: 112px;
  min-width: 74px;
  text-align: center;
  display: flex;
  align-items: center;
  border: 1px solid #444;
  padding: 5px 5px;
  transition: all 0.3s ease;
  border-radius: 4px;
  background: #161616;
  cursor: pointer;
  margin-bottom: 15px;
}
.facet-content .content-sub .shape:not(:last-child) {
  margin-right: 12px;
}
.facet-content .content-sub .shape span {
  margin-left: 5px;
  display: block;
}
.facet-content .content-sub .shape img {
  width: 24px;
}
.facet-content .content-sub .shape.shape-selected {
  border-color: #19a1fb;
}
.facet-content .content-sub .shape.shape-selected span {
  color: #19a1fb;
}
.facet-content .content-sub .shape:hover {
  border-color: #19a1fb;
}
.facet-content .btn-option {
  margin: 5px;
  padding: 2px 7px 1px;
  border-radius: 4px;
  line-height: 1.3;
  transition: all 0.3s ease;
  border: 1px solid #444;
  display: inline-block;
  cursor: pointer;
}
.facet-content .btn-option:hover {
  border-color: #19a1fb;
}
.facet-content .btn-option.active {
  border-color: #19a1fb;
  background: #19a1fb;
  color: #fff;
}
.facet-content .btn-option.defined {
  color: #008b00;
  border-color: #008b00;
  font-weight: bold;
}
.facet-content .cm-detail-button {
  margin-left: -5px;
  margin-right: -5px;
}
.facet-content .cm-button-facet {
  position: relative;
  z-index: 0;
  margin-left: -7px;
  margin-right: -7px;
}
.facet-content .cm-button-facet .item {
  padding: 5px 7px;
  margin-bottom: 10px;
  position: relative;
  z-index: 0;
}
.facet-content .cm-button-facet .item::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 20px;
  width: 100%;
  height: 1px;
  background: #333;
}
.facet-content .cm-button-facet .item::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -5px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
}
.facet-content .cm-button-facet .item:last-child::before {
  content: none;
}
.facet-content .cm-button-facet .item.active::after {
  background: #19a1fb;
}
.facet-content .cm-button-facet .item.active .btn-number {
  background: #19a1fb;
  color: #fff;
}
.facet-content .cm-button-facet .item.active .btn-number::before {
  border-top-color: #19a1fb;
}
.facet-content .cm-button-facet .item.defined::after {
  background: #008b00;
}
.facet-content .cm-button-facet .item.defined .btn-number {
  color: #008b00;
  border: 1.5px solid #008b00;
  background: transparent;
  font-weight: bold;
}
.facet-content .cm-button-facet .item.defined .btn-number::before {
  border-top-color: #008b00;
}
.facet-content .cm-button-facet .btn-number {
  padding-top: 1px;
  background: #333;
  border-radius: 4px;
  width: 25px;
  height: 25px;
  margin-bottom: 7px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
}
.facet-content .cm-button-facet .btn-number::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  border-top: 3px solid #333;
  border-bottom: 0;
}
.facet-content .detail-picture-mistake {
  width: 28%;
  max-width: 430px;
}

@media screen and (max-width: 1600px) {
  .facet-content .detail-picture-mistake, .facet-content .detail-mistake-total {
    width: 100%;
  }
  .facet-content .detail-picture-mistake {
    margin: 0 auto 30px;
  }
}
.page-realtime main {
  padding-bottom: 15px;
  height: 100vh;
  overflow: hidden;
}
.page-realtime .realtime-date {
  transition: all 0.3s ease;
  padding: 0.3vw 0.3vw 0.3vw;
  border-radius: 2px;
  text-align: center;
  font-weight: bold;
  width: 10%;
  font-size: 1.25vw;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.page-realtime .realtime-date .date {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 0.156vw;
}

.box-realtime {
  margin: -0.3vw;
}
.box-realtime .realtime-item {
  width: calc(14.2857142857% - 0.6vw);
  margin: 0.3vw;
  border-radius: 4px;
}
.box-realtime .realtime-item .rt-title {
  background: #232B3E;
  padding: 0 0.5vw;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 4px 4px 0 0;
}
.box-realtime .realtime-item .rt-title .txt {
  display: inline-block;
  width: calc(100% - 5.5vw);
  margin-top: 0.15vw;
}
.box-realtime .realtime-item .rt-title .txt .vsb-menu {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6);
}
.box-realtime .realtime-item .rt-title .txt .vsb-menu li {
  font-size: 12px;
}
.box-realtime .realtime-item .rt-title .txt .vsb-main {
  max-width: 100%;
  min-width: 0;
}
.box-realtime .realtime-item .rt-title .txt .vsb-main button {
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  font-size: 0.729vw;
}
.box-realtime .realtime-item .rt-title .txt .vsb-main button .caret {
  top: calc(50% - 3px);
}
.box-realtime .realtime-item .rt-title .txt .title-style {
  display: inline-block;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  font-size: 0.729vw;
}
.box-realtime .realtime-item .rt-title .vsb-main .title {
  text-transform: uppercase;
  color: #fff;
  border: 0;
}
.box-realtime .realtime-item .rt-title .vsb-main button {
  border: 0;
  padding-right: 10px;
}
.box-realtime .realtime-item .rt-title .vsb-menu {
  background: #fff;
}
.box-realtime .realtime-item .rt-title .vsb-menu ul {
  color: #111;
}
.box-realtime .realtime-item .rt-title .vsb-menu li:hover, .box-realtime .realtime-item .rt-title .vsb-menu li.active {
  background-color: rgba(0, 0, 0, 0.2);
  color: #111;
}
.box-realtime .realtime-item .rt-title .vsb-menu li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.box-realtime .realtime-item .gr-staff .staff {
  color: #00C2FF;
  font-weight: bold;
  position: relative;
  z-index: 0;
  font-size: 0.9vw;
}
.box-realtime .realtime-item .gr-staff .staff:not(:nth-child(2n)) {
  padding-right: 0.4vw;
  margin-right: 0.4vw;
}
.box-realtime .realtime-item .gr-staff .staff:not(:nth-child(2n))::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(50% - 7px);
  right: 0;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.2);
}
.box-realtime .realtime-item .gr-staff .staff:nth-child(2) {
  color: #FC6B5D;
}
.box-realtime .realtime-item .gr-staff .staff .number {
  position: relative;
  top: 1px;
}
.box-realtime .realtime-item .gr-staff .staff i {
  font-size: 0.7vw;
}
.box-realtime .realtime-item .content {
  background: #fff;
  color: #111;
  border-radius: 0 0 4px 4px;
}
.box-realtime .realtime-item .box1 {
  padding: 0.5vw 0.5vw 0;
}
.box-realtime .realtime-item .box1 .item {
  width: calc(33.3333333333% - 2px);
  border: 1px solid rgba(111, 66, 193, 0.4);
  text-align: center;
  border-radius: 2px;
}
.box-realtime .realtime-item .box1 .item:first-child .ttl {
  background: rgba(111, 66, 193, 0.3);
}
.box-realtime .realtime-item .box1 .item:nth-child(2) {
  border-color: #A3CAE3;
}
.box-realtime .realtime-item .box1 .item:nth-child(2) .ttl {
  background: #D1ECFE;
}
.box-realtime .realtime-item .box1 .item:nth-child(3) {
  border-color: rgba(0, 0, 0, 0.25);
}
.box-realtime .realtime-item .box1 .item:nth-child(3) .ttl {
  background: rgba(0, 0, 0, 0.1);
}
.box-realtime .realtime-item .box1 .item .ttl {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.65vw;
  line-height: 1.4;
  padding-top: 0.1vw;
  padding-bottom: 0.1vw;
}
.box-realtime .realtime-item .box1 .item .number {
  font-weight: bold;
  padding-top: 0.1vw;
  padding-bottom: 0.1vw;
  font-size: 0.95vw;
  line-height: 1.35;
}
.box-realtime .realtime-item .box2 {
  padding: 0.2vw 0.5vw;
  height: 5.365vw;
  align-items: center;
}
.box-realtime .realtime-item .box2 .box-left {
  width: 32%;
  display: flex;
  align-items: center;
  padding-bottom: 0.5vw;
  max-height: 100%;
}
.box-realtime .realtime-item .box2 .box-right {
  width: 66%;
  padding-top: 0.24vw;
}
.box-realtime .realtime-item .box2 .sum {
  font-size: 0.75vw;
  font-weight: 800;
  background: rgba(0, 109, 181, 0.1);
  padding: 0.14vw 0.3vw;
  border-radius: 2px;
  line-height: 1.3;
}
.box-realtime .realtime-item .box2 .sum .number {
  font-size: 0.95vw;
  line-height: 1;
  font-weight: bold;
  color: #006DB5;
  position: relative;
  top: 0.05vw;
}
.box-realtime .realtime-item .box2 li {
  font-weight: 600;
  font-size: 0.65vw;
  padding-top: 0.2vw;
  padding-bottom: 0.15vw;
  position: relative;
  z-index: 0;
  padding-left: 0.8vw;
  padding-right: 0.3vw;
  line-height: 1;
}
.box-realtime .realtime-item .box2 li::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 0.5vw;
  height: 0.5vw;
  top: 0.3vw;
  left: 0;
  background: #F8B652;
  border-radius: 2px;
}
.box-realtime .realtime-item .box2 li .number {
  font-weight: bold;
  font-size: 0.75vw;
}
.box-realtime .realtime-item .box2 li:not(:last-child) {
  border-bottom: 1px solid #D2D2D2;
}
.box-realtime .realtime-item .box2 li:nth-child(2)::before {
  background: #438BCA;
}
.box-realtime .realtime-item .box2 li:nth-child(3)::before {
  background: #FF6E60;
}
.box-realtime .realtime-item .box3 {
  font-size: 0.8vw;
  font-weight: bold;
  background: rgba(0, 197, 93, 0.1);
  padding: 0.1vw 0.5vw 0;
  text-transform: uppercase;
}
.box-realtime .realtime-item .box3 .number {
  font-size: 1.302vw;
  font-weight: 800;
  color: #00C55D;
}
.box-realtime[class*=box-view-] .realtime-item .box1 .item .ttl {
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-realtime[class*=box-view-] .realtime-item .box1 .item .number {
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-realtime[class*=box-view-] .realtime-item .box2 .box-left {
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-realtime[class*=box-view-] .realtime-item .box2 .box-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.box-realtime[class*=box-view-] .realtime-item .gr-staff .staff:not(:nth-child(2n))::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  height: 70%;
}
.box-realtime.box-view-1-1 .realtime-item {
  width: calc(50% - 0.6vw);
}
.box-realtime.box-view-1-1 .realtime-item .rt-title {
  padding: 0.5vw 10px;
}
.box-realtime.box-view-1-1 .realtime-item .rt-title .txt {
  margin-top: 2px;
  width: calc(100% - 12.5vw);
}
.box-realtime.box-view-1-1 .realtime-item .rt-title .txt button, .box-realtime.box-view-1-1 .realtime-item .rt-title .txt .title-style {
  font-size: 2.2vw;
  line-height: 1.2;
}
.box-realtime.box-view-1-1 .realtime-item .rt-title .txt .title-style {
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
}
.box-realtime.box-view-1-1 .realtime-item .rt-title .vsb-menu li {
  font-size: 1.7vw;
}
.box-realtime.box-view-1-1 .realtime-item .rt-title .vsb-main button {
  padding-right: 2vw;
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
}
.box-realtime.box-view-1-1 .realtime-item .rt-title .vsb-main button .caret {
  background-size: contain;
  top: calc(50% - 0.7vw);
  width: 1.4vw;
  height: 1.4vw;
}
.box-realtime.box-view-1-1 .realtime-item .gr-staff .staff {
  font-size: 2vw;
}
.box-realtime.box-view-1-1 .realtime-item .gr-staff .staff:not(:nth-child(2n)) {
  padding-right: 1vw;
  margin-right: 1vw;
}
.box-realtime.box-view-1-1 .realtime-item .gr-staff .staff i {
  font-size: 1.6vw;
}
.box-realtime.box-view-1-1 .realtime-item .box1 {
  padding: 0.5vw 0.5vw 0;
  min-height: 115px;
}
.box-realtime.box-view-1-1 .realtime-item .box1 .item {
  width: calc(33.3333333333% - 0.2vw);
}
.box-realtime.box-view-1-1 .realtime-item .box1 .item .ttl {
  padding: 0.8vh 0 0.5vh;
  font-size: 1.8vw;
  min-height: 37px;
  height: 8.5vh;
}
.box-realtime.box-view-1-1 .realtime-item .box1 .item .number {
  font-size: 2.5vw;
  height: calc(100% - 8.5vh);
  max-height: calc(100% - 37px);
}
.box-realtime.box-view-1-1 .realtime-item .box2 {
  padding: 0 0.5vw 0;
  height: 42.2vh;
}
.box-realtime.box-view-1-1 .realtime-item .box2 .box-left {
  width: 42%;
  padding-bottom: 0.5vw;
}
.box-realtime.box-view-1-1 .realtime-item .box2 .box-right {
  width: 55%;
  padding-top: 2.7vh;
}
.box-realtime.box-view-1-1 .realtime-item .box2 .sum {
  font-size: 2.5vw;
  padding: 0.4vh 0.3vw 0.4vh 0.5vw;
  height: 4.5vw;
}
.box-realtime.box-view-1-1 .realtime-item .box2 .sum .number {
  font-size: 3.4vw;
}
.box-realtime.box-view-1-1 .realtime-item .box2 li {
  font-size: 2.2vw;
  padding-top: 2vh;
  padding-bottom: 1.7vh;
  padding-left: 2vw;
}
.box-realtime.box-view-1-1 .realtime-item .box2 li::before {
  top: calc(50% - 0.7vw);
  width: 1.4vw;
  height: 1.4vw;
}
.box-realtime.box-view-1-1 .realtime-item .box2 li .number {
  font-size: 2.8vw;
}
.box-realtime.box-view-1-1 .realtime-item .box3 {
  font-size: 3vw;
  padding: 0.5vw 1vw 0;
  line-height: 1;
}
.box-realtime.box-view-1-1 .realtime-item .box3 .number {
  font-size: 5vw;
}
.box-realtime.box-view-2-2 .realtime-item {
  width: calc(50% - 0.6vw);
}
.box-realtime.box-view-2-2 .realtime-item .rt-title {
  padding: 0.5vh 10px;
}
.box-realtime.box-view-2-2 .realtime-item .rt-title .txt {
  margin-top: 2px;
  width: calc(100% - 8vw);
}
.box-realtime.box-view-2-2 .realtime-item .rt-title .txt button, .box-realtime.box-view-2-2 .realtime-item .rt-title .txt .title-style {
  font-size: 1.4vw;
  line-height: 1.2;
}
.box-realtime.box-view-2-2 .realtime-item .rt-title .txt .title-style {
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
}
.box-realtime.box-view-2-2 .realtime-item .rt-title .vsb-menu li {
  font-size: 1vw;
}
.box-realtime.box-view-2-2 .realtime-item .rt-title .vsb-main button {
  padding-right: 2vw;
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
}
.box-realtime.box-view-2-2 .realtime-item .rt-title .vsb-main button .caret {
  background-size: contain;
  top: calc(50% - 0.5vw);
  width: 1vw;
  height: 1vw;
}
.box-realtime.box-view-2-2 .realtime-item .gr-staff .staff {
  font-size: 1.4vw;
}
.box-realtime.box-view-2-2 .realtime-item .gr-staff .staff:not(:nth-child(2n)) {
  padding-right: 0.6vw;
  margin-right: 0.6vw;
}
.box-realtime.box-view-2-2 .realtime-item .gr-staff .staff i {
  font-size: 1.1vw;
}
.box-realtime.box-view-2-2 .realtime-item .box1 {
  padding: 0.5vw 0.5vw 0;
}
.box-realtime.box-view-2-2 .realtime-item .box1 .item {
  width: calc(33.3333333333% - 0.2vw);
}
.box-realtime.box-view-2-2 .realtime-item .box1 .item .ttl {
  padding: 0.5vh 0 0.3vh;
  font-size: 1.2vw;
  height: 4.4vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-realtime.box-view-2-2 .realtime-item .box1 .item .number {
  font-size: 1.4vw;
  line-height: 1.3;
  height: calc(100% - 4.4vh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5vh 0 0.15vh;
}
.box-realtime.box-view-2-2 .realtime-item .box2 {
  padding: 0 0.5vw 0;
  height: 9.1vw;
}
.box-realtime.box-view-2-2 .realtime-item .box2 .box-left {
  width: 18%;
  padding-bottom: 0.4vw;
}
.box-realtime.box-view-2-2 .realtime-item .box2 .box-right {
  width: 80%;
  padding-top: 1.2vh;
}
.box-realtime.box-view-2-2 .realtime-item .box2 .sum {
  font-size: 1.2vw;
  padding: 0.2vh 6px 0.2vh 0.5vw;
  height: 2.1vw;
}
.box-realtime.box-view-2-2 .realtime-item .box2 .sum .number {
  font-size: 1.6vw;
}
.box-realtime.box-view-2-2 .realtime-item .box2 li {
  font-size: 1vw;
  padding-top: 0.7vh;
  padding-bottom: 0.55vh;
  padding-left: 1.4vw;
}
.box-realtime.box-view-2-2 .realtime-item .box2 li::before {
  top: calc(50% - 0.35vw);
  width: 0.7vw;
  height: 0.7vw;
}
.box-realtime.box-view-2-2 .realtime-item .box2 li .number {
  font-size: 1.3vw;
}
.box-realtime.box-view-2-2 .realtime-item .box3 {
  font-size: 1.4vw;
  padding: 0.2vw 0.7vw 0;
  line-height: 1;
}
.box-realtime.box-view-2-2 .realtime-item .box3 .number {
  font-size: 2vw;
}
.box-realtime.box-view-3-3 .realtime-item {
  width: calc(33.3333333333% - 0.6vw);
}
.box-realtime.box-view-3-3 .realtime-item .rt-title .txt {
  margin-top: 2px;
  width: calc(100% - 6.5vw);
}
.box-realtime.box-view-3-3 .realtime-item .rt-title .txt button, .box-realtime.box-view-3-3 .realtime-item .rt-title .txt .title-style {
  font-size: 1vw;
  line-height: 1.2;
}
.box-realtime.box-view-3-3 .realtime-item .rt-title .txt .title-style {
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
}
.box-realtime.box-view-3-3 .realtime-item .rt-title .vsb-menu li {
  font-size: 0.8vw;
}
.box-realtime.box-view-3-3 .realtime-item .rt-title .vsb-main button {
  padding-right: 1.2vw;
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
}
.box-realtime.box-view-3-3 .realtime-item .rt-title .vsb-main button .caret {
  background-size: contain;
  top: calc(50% - 0.4vw);
  width: 0.8vw;
  height: 0.8vw;
}
.box-realtime.box-view-3-3 .realtime-item .gr-staff .staff {
  font-size: 1vw;
}
.box-realtime.box-view-3-3 .realtime-item .gr-staff .staff:not(:nth-child(2n)) {
  padding-right: 0.6vw;
  margin-right: 0.6vw;
}
.box-realtime.box-view-3-3 .realtime-item .gr-staff .staff i {
  font-size: 0.8vw;
}
.box-realtime.box-view-3-3 .realtime-item .box1 .item {
  width: calc(33.3333333333% - 0.2vw);
}
.box-realtime.box-view-3-3 .realtime-item .box1 .item .ttl {
  padding: 0.2vh 0 0.2vh;
  font-size: 0.8vw;
  height: 2.4vh;
}
.box-realtime.box-view-3-3 .realtime-item .box1 .item .number {
  font-size: 1vw;
  line-height: 1.3;
  padding: 1px 0 0;
  height: calc(100% - 2.4vh);
}
.box-realtime.box-view-3-3 .realtime-item .box2 {
  padding: 0 0.5vw 0 0.2vw;
  height: 5.9vw;
}
.box-realtime.box-view-3-3 .realtime-item .box2 .box-left {
  width: 18%;
  padding-bottom: 0.4vw;
}
.box-realtime.box-view-3-3 .realtime-item .box2 .box-right {
  width: 81%;
  padding-top: 0.3vw;
}
.box-realtime.box-view-3-3 .realtime-item .box2 .sum {
  font-size: 0.9vw;
  padding: 0.25vh 0.3vw 0.2vh 0.5vw;
  height: 1.4vw;
  line-height: 1;
}
.box-realtime.box-view-3-3 .realtime-item .box2 .sum .number {
  font-size: 1.1vw;
}
.box-realtime.box-view-3-3 .realtime-item .box2 li {
  font-size: 0.8vw;
  padding-top: 0.35vh;
  padding-bottom: 0.35vh;
  padding-left: 1vw;
}
.box-realtime.box-view-3-3 .realtime-item .box2 li::before {
  top: calc(50% - 0.35vw);
  width: 0.7vw;
  height: 0.7vw;
}
.box-realtime.box-view-3-3 .realtime-item .box2 li .number {
  font-size: 0.9vw;
}
.box-realtime.box-view-3-3 .realtime-item .box3 {
  font-size: 1vw;
  padding: 0.2vw 0.6vw 0;
  line-height: 1;
}
.box-realtime.box-view-3-3 .realtime-item .box3 .number {
  font-size: 1.4vw;
}
.box-realtime.box-view-3-2 .realtime-item {
  width: calc(33.3333333333% - 0.6vw);
}
.box-realtime.box-view-3-2 .realtime-item .rt-title {
  padding: 0.5vh 10px;
}
.box-realtime.box-view-3-2 .realtime-item .rt-title .txt {
  margin-top: 2px;
  width: calc(100% - 7.5vw);
}
.box-realtime.box-view-3-2 .realtime-item .rt-title .txt button, .box-realtime.box-view-3-2 .realtime-item .rt-title .txt .title-style {
  font-size: 1.3vw;
  line-height: 1.2;
}
.box-realtime.box-view-3-2 .realtime-item .rt-title .txt .title-style {
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
}
.box-realtime.box-view-3-2 .realtime-item .rt-title .vsb-menu li {
  font-size: 1.1vw;
}
.box-realtime.box-view-3-2 .realtime-item .rt-title .vsb-main button {
  padding-right: 1.2vw;
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
}
.box-realtime.box-view-3-2 .realtime-item .rt-title .vsb-main button .caret {
  background-size: contain;
  top: calc(50% - 0.4vw);
  width: 0.8vw;
  height: 0.8vw;
}
.box-realtime.box-view-3-2 .realtime-item .gr-staff .staff {
  font-size: 1.3vw;
}
.box-realtime.box-view-3-2 .realtime-item .gr-staff .staff:not(:nth-child(2n)) {
  padding-right: 0.6vw;
  margin-right: 0.6vw;
}
.box-realtime.box-view-3-2 .realtime-item .gr-staff .staff i {
  font-size: 1vw;
}
.box-realtime.box-view-3-2 .realtime-item .box1 {
  padding: 0.5vw 0.5vw 0.2vw;
}
.box-realtime.box-view-3-2 .realtime-item .box1 .item {
  width: calc(33.3333333333% - 0.2vw);
}
.box-realtime.box-view-3-2 .realtime-item .box1 .item .ttl {
  padding: 0.4vh 0 0.2vh;
  font-size: 1vw;
  height: 3.5vh;
}
.box-realtime.box-view-3-2 .realtime-item .box1 .item .number {
  font-size: 1.4vw;
  line-height: 1.2;
  height: calc(100% - 3.5vh);
  padding-top: 0.3vh;
}
.box-realtime.box-view-3-2 .realtime-item .box2 {
  padding: 0 0.6vw 0 0.3vw;
  height: 9.365vw;
}
.box-realtime.box-view-3-2 .realtime-item .box2 .box-left {
  width: 29%;
  padding-bottom: 0.6vw;
}
.box-realtime.box-view-3-2 .realtime-item .box2 .box-right {
  padding-top: 0.45vw;
  width: 69%;
}
.box-realtime.box-view-3-2 .realtime-item .box2 .sum {
  font-size: 1.3vw;
  padding: 0.7vh 6px 0.6vh 0.5vw;
  line-height: 1;
  height: 2.3vw;
}
.box-realtime.box-view-3-2 .realtime-item .box2 .sum .number {
  font-size: 1.7vw;
}
.box-realtime.box-view-3-2 .realtime-item .box2 li {
  font-size: 1.1vw;
  padding-top: 0.6vh;
  padding-bottom: 0.6vh;
  padding-left: 1vw;
}
.box-realtime.box-view-3-2 .realtime-item .box2 li::before {
  top: calc(50% - 0.4vw);
  width: 0.7vw;
  height: 0.7vw;
}
.box-realtime.box-view-3-2 .realtime-item .box2 li .number {
  font-size: 1.4vw;
}
.box-realtime.box-view-3-2 .realtime-item .box3 {
  font-size: 1.4vw;
  padding: 0.2vw 0.7vw 0.1vw;
  line-height: 1;
}
.box-realtime.box-view-3-2 .realtime-item .box3 .number {
  font-size: 2.2vw;
}
.box-realtime.box-view-4-3 .realtime-item {
  width: calc(25% - 0.6vw);
}
.box-realtime.box-view-4-3 .realtime-item .rt-title {
  padding: 0 0.5vw;
}
.box-realtime.box-view-4-3 .realtime-item .rt-title .txt {
  margin-top: 0.1vw;
  width: calc(100% - 6.5vw);
}
.box-realtime.box-view-4-3 .realtime-item .rt-title .txt button, .box-realtime.box-view-4-3 .realtime-item .rt-title .txt .title-style {
  font-size: 1vw;
  line-height: 1.2;
}
.box-realtime.box-view-4-3 .realtime-item .rt-title .txt .title-style {
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
}
.box-realtime.box-view-4-3 .realtime-item .rt-title .vsb-menu li {
  font-size: 0.8vw;
}
.box-realtime.box-view-4-3 .realtime-item .rt-title .vsb-main button {
  padding-right: 1.2vw;
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
}
.box-realtime.box-view-4-3 .realtime-item .rt-title .vsb-main button .caret {
  background-size: contain;
  top: calc(50% - 0.4vw);
  width: 0.8vw;
  height: 0.8vw;
}
.box-realtime.box-view-4-3 .realtime-item .gr-staff .staff {
  font-size: 1vw;
}
.box-realtime.box-view-4-3 .realtime-item .gr-staff .staff:not(:nth-child(2n)) {
  padding-right: 0.6vw;
  margin-right: 0.6vw;
}
.box-realtime.box-view-4-3 .realtime-item .gr-staff .staff i {
  font-size: 0.8vw;
}
.box-realtime.box-view-4-3 .realtime-item .box1 .item {
  width: calc(33.3333333333% - 0.2vw);
}
.box-realtime.box-view-4-3 .realtime-item .box1 .item .ttl {
  padding: 0.2vh 0 0.2vh;
  font-size: 0.8vw;
  height: 2.4vh;
}
.box-realtime.box-view-4-3 .realtime-item .box1 .item .number {
  font-size: 1vw;
  line-height: 1.3;
  height: calc(100% - 2.4vh);
  padding: 2px 0 0;
}
.box-realtime.box-view-4-3 .realtime-item .box2 {
  height: 5.9vw;
}
.box-realtime.box-view-4-3 .realtime-item .box2 .box-left {
  width: 24%;
}
.box-realtime.box-view-4-3 .realtime-item .box2 .box-right {
  width: 74%;
}
.box-realtime.box-view-4-3 .realtime-item .box2 .sum {
  font-size: 0.9vw;
  padding: 0.3vh 0.3vw 0.3vh 0.5vw;
  line-height: 1;
  height: 1.4vw;
}
.box-realtime.box-view-4-3 .realtime-item .box2 .sum .number {
  font-size: 1.1vw;
}
.box-realtime.box-view-4-3 .realtime-item .box2 li {
  font-size: 0.8vw;
  padding-top: 0.35vh;
  padding-bottom: 0.35vh;
  padding-left: 1vw;
}
.box-realtime.box-view-4-3 .realtime-item .box2 li::before {
  top: calc(50% - 0.35vw);
  width: 0.7vw;
  height: 0.7vw;
}
.box-realtime.box-view-4-3 .realtime-item .box2 li .number {
  font-size: 0.9vw;
}
.box-realtime.box-view-4-3 .realtime-item .box3 {
  font-size: 1vw;
  padding: 0.2vw 0.7vw 0;
  line-height: 1;
}
.box-realtime.box-view-4-3 .realtime-item .box3 .number {
  font-size: 1.4vw;
}

.header-realtime {
  margin-bottom: 0.7vw;
}
.header-realtime ul {
  margin: -0.25vw;
  width: 90%;
}
.header-realtime ul li {
  width: calc(14.2857142857% - 0.5vw);
  margin: 0.25vw;
  border: 1px solid #002443;
  border-radius: 2px;
  text-align: center;
  font-size: 16px;
}
.header-realtime ul li .ttl, .header-realtime ul li .number {
  display: block;
  color: #fff;
}
.header-realtime ul li .ttl {
  background: #002443;
  font-size: 0.9vw;
  padding: 0.2vw 0.5vw;
}
.header-realtime ul li .date {
  font-size: 12px;
  background: #000;
  display: block;
  background: rgba(255, 255, 255, 0.2);
}
.header-realtime ul li .number {
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.823vw;
  line-height: 1;
  padding: 0.6vw 0.5vw 0.5vw;
}

.realtime-fixed-option {
  position: fixed;
  top: 12px;
  right: 30px;
  z-index: 12;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: flex;
}

.realtime-ic-fixed {
  position: relative;
  z-index: 0;
  width: 35px;
  height: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  background: #002443;
  line-height: 0;
  overflow: hidden;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.realtime-ic-fixed::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all 0.6s ease;
  background: #00549c;
  border-radius: 50% 50% 0 0;
  transform: translateY(100%) scaleY(0.5);
}
.realtime-ic-fixed:hover::before {
  border-radius: 0;
  -webkit-transform: translateY(0) scaleY(1);
  transform: translateY(0) scaleY(1);
}
.realtime-ic-fixed:not(:last-child) {
  margin-right: 10px;
}
.realtime-ic-fixed a {
  color: #fff;
}
.realtime-ic-fixed a:hover {
  opacity: 1;
}
.realtime-ic-fixed.ttl-screen {
  margin-right: 0;
}

.ttl-screen img {
  width: 18px;
}

.realtime-list-screen {
  position: absolute;
  top: calc(100% + 5px);
  width: 90px;
  right: 0;
  background: #161616;
  border-radius: 6px;
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.realtime-list-screen .list {
  padding: 3px 10px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: relative;
  z-index: 0;
  color: #fff;
}
.realtime-list-screen .list::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(50% - 6px);
  right: 10px;
  width: 10px;
  height: 11px;
  background: url(../images/check-solid.svg) center/contain;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.realtime-list-screen .list.active::before {
  opacity: 1;
  visibility: visible;
}
.realtime-list-screen .list:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.realtime-list-screen .list:hover::before {
  opacity: 1;
  visibility: visible;
}
.realtime-list-screen.active {
  display: block;
}

@media screen and (max-width: 1400px) {
  .box-realtime.box-view-1-1 .realtime-item .box1 {
    min-height: 0;
  }
  .box-realtime .realtime-item .box3 {
    font-size: 0.75vw;
  }
  .box-realtime .realtime-item .box3 .number {
    font-size: 1.2vw;
  }
}
.ShipmentDetail .box-step-procedure {
  width: 100%;
  padding-right: 25px;
  border-radius: 0;
}
.ShipmentDetail .box-step-procedure ol li {
  padding-right: 45px;
}
.ShipmentDetail .box-step-procedure ol li .name::before {
  content: none;
}
.ShipmentDetail .box-step-procedure ol li .name .icon {
  position: absolute;
  z-index: -1;
  top: calc(50% - 20px);
  right: -55px;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
.ShipmentDetail .box-step-procedure ol li.steps-completed::after {
  background-color: #224195;
}
.ShipmentDetail .box-step-shipment {
  width: 30%;
  position: relative;
  padding-bottom: 27px;
  border-radius: 6px;
  overflow: hidden;
}
.ShipmentDetail .note-all-time {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
}
.ShipmentDetail .note-all-time {
  bottom: 0;
}
.ShipmentDetail .package-detail {
  width: calc(70% - 20px);
  height: auto;
}

.ShipmentDetailIncoming .table-child-incoming {
  table-layout: fixed;
}
.ShipmentDetailIncoming .box-step-procedure ol li:last-child::after {
  bottom: 0;
  height: calc(100% - 54px);
}

.note-all-time {
  text-align: center;
  background: #224195;
  padding: 3px 5px;
  z-index: 1;
  color: #fff;
}

.notification-shipment {
  padding: 6px 10px;
  background: #aa4a01;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
}
.notification-shipment.noti-success {
  background: #008b00;
}
.notification-shipment .icon {
  margin-right: 10px;
}

.shipment-attachment .title {
  font-size: 16px;
  color: #fff;
  margin-bottom: 15px;
}
.shipment-attachment .item-attachment:not(:last-child) {
  margin-bottom: 10px;
}
.shipment-attachment a {
  color: #60c6ff;
  position: relative;
  z-index: 0;
}
.shipment-attachment a::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #60c6ff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.shipment-attachment a:hover::before {
  width: 100%;
}

.email-to {
  display: inline-block;
  border: 1px solid #2b2b2b;
  border-radius: 4px;
  padding: 3px 8px;
  margin-right: 10px;
  margin-bottom: 5px;
}
.email-to .icon {
  color: #e94434;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  top: 1px;
}
.email-to .icon:hover {
  opacity: 0.7;
}

.email-send {
  display: inline-block;
  margin-right: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
  position: relative;
  z-index: 0;
}
.email-send::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -5px;
  right: -5px;
  top: -1px;
  bottom: -2px;
  border: 1px solid #2b2b2b;
  border-radius: 2px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.email-send .btn-remove {
  position: absolute;
  right: 0;
  top: 1px;
  bottom: 0;
  z-index: 1;
  width: 36px;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 208.03'%3E%3Cpath d='M416.49,0H151.25c-.12,0-.23,0-.36,0h-30.89c-40,0-33-1.01-62.69,30.02C57.31,30.03.55,93.79,0,104c0,0,0-.07,0,0,0,.07,0,0,0,0,.55,10.22,58.31,73.97,58.31,73.97,27.69,32.03,22.69,30.03,61.69,30.03h30.89c.12,0,.24,0,.36,0h265.24q63.51,0,63.51-64.93v-78.13Q480,0,416.49,0Z' style='fill: %23811517; stroke-width: 0px;'/%3E%3Cg%3E%3Cpath id='x' d='M315.5,47.38l-96.64,99.74c-2.73,2.82-2.37,7.73.81,10.98l1.86,1.9c3.17,3.25,7.96,3.6,10.69.79l96.64-99.74c2.73-2.82,2.37-7.73-.81-10.98l-1.86-1.9c-3.17-3.25-7.96-3.6-10.69-.79Z' style='fill: %23fff; stroke-width: 0px;'/%3E%3Cpath id='x-2' data-name='x' d='M315.5,160.79l-96.64-99.74c-2.73-2.82-2.37-7.73.81-10.98l1.86-1.9c3.17-3.25,7.96-3.6,10.69-.79l96.64,99.74c2.73,2.82,2.37,7.73-.81,10.98l-1.86,1.9c-3.17,3.25-7.96,3.6-10.69.79Z' style='fill: %23fff; stroke-width: 0px;'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}
.email-send:hover::before, .email-send:hover .btn-remove {
  opacity: 1;
  visibility: visible;
}

.parent-email-to {
  border-bottom: 1px solid #2b2b2b;
}
.parent-email-to input {
  border: none;
  padding: 0px 0 6px;
  height: 35px;
}

.b-add-shipment-top .col-title {
  margin-right: 15px;
}
.b-add-shipment-top .box-left {
  width: calc(100% - 475px);
}
.b-add-shipment-top .box-right {
  width: 475px;
}
.b-add-shipment-top .cm-button {
  width: 230px;
}
.b-add-shipment-top .cm-button:not(:last-child) {
  margin-right: 15px;
}

@media screen and (max-width: 1000px) {
  .b-add-shipment-top .box-left, .b-add-shipment-top .box-right {
    width: 100%;
  }
  .b-add-shipment-top .box-right {
    justify-content: flex-start;
    margin-left: -8px;
    margin-right: -8px;
    margin-top: 8px;
  }
  .b-add-shipment-top .box-right .cm-button {
    margin: 8px;
  }
}
.td-color {
  padding-right: 0 !important;
}

.td-clarity {
  padding-left: 0 !important;
}

.number-last-approved {
  background: #38974b;
  border-radius: 4px;
  display: inline-block;
  line-height: 1;
  font-size: 12px;
  position: relative;
  top: 5px;
  color: #fff;
  left: 0px;
  writing-mode: vertical-rl;
  width: 26px;
  padding: 6px 7px 5px 0;
}
.number-last-approved::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 9px;
  top: -6px;
  width: 0;
  height: 0;
  border-left: 5px solid rgba(0, 0, 0, 0);
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 6px solid #38974b;
}

.advisorInfomationDetail [class*=col-] {
  background: #101010;
  padding: 20px;
  border-radius: 4px;
}
.advisorInfomationDetail .col-02 {
  width: calc(50% - 10px);
}
.advisorInfomationDetail .title-ct-advisor {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  background: #000;
  padding: 5px 10px;
  margin-bottom: 15px;
  position: relative;
  z-index: 0;
}
.advisorInfomationDetail .title-ct-advisor::before, .advisorInfomationDetail .title-ct-advisor::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
}
.advisorInfomationDetail .title-ct-advisor::before {
  left: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #101010;
  border-right: 0;
}
.advisorInfomationDetail .title-ct-advisor::after {
  right: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #101010;
  border-left: 0;
}
.advisorInfomationDetail .box-bottom {
  margin-top: 20px;
}

@media screen and (max-width: 1170px) {
  .advisorInfomationDetail .col-02 {
    width: 100%;
    margin-bottom: 20px;
  }
  .advisorInfomationDetail .box-bottom {
    margin-top: 0;
  }
  .advisorInfomationDetail [class*=col-] {
    padding: 15px;
  }
  .advisorInfomationDetail .table {
    width: 100%;
  }
  .advisorInfomationDetail .table tr td:nth-child(3) {
    width: auto;
  }
  .advisorInfomationDetail .table .w-250 {
    width: 160px;
  }
  .advisorInfomationDetail .table .w-150 {
    width: 100px;
  }
  .advisorInfomationDetail .table .w-80 {
    width: 60px;
  }
}
.modelPreviewMail .col-title, .modalComment .col-title {
  display: flex;
  flex-wrap: wrap;
}
.modelPreviewMail .col-title:not(:last-child), .modalComment .col-title:not(:last-child) {
  margin-bottom: 10px;
}
.modelPreviewMail .col-title .title, .modalComment .col-title .title {
  width: 60px;
  font-weight: bold;
  color: #fff;
}
.modelPreviewMail .col-title .parent-email-to, .modalComment .col-title .parent-email-to {
  width: calc(100% - 60px);
}
.modelPreviewMail .col-title .note-send-mail, .modalComment .col-title .note-send-mail {
  margin-bottom: 10px;
}
.modelPreviewMail .col-title .note-shipment, .modalComment .col-title .note-shipment {
  min-height: 70px;
}

.title-send-mail {
  margin-bottom: 20px;
}
.title-send-mail .col-title .title {
  padding-top: 4px;
}

.error-txt-email {
  color: #e94434;
  text-align: left;
  display: block;
  width: 100%;
}

.text-link {
  color: #60C6FF;
  position: relative;
  z-index: 0;
}
.text-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #60C6FF;
  transition: all 0.3s ease;
}
.text-link:hover {
  color: #60C6FF;
  opacity: 1;
}

.planning-shape-proportion {
  position: relative;
  z-index: 0;
  cursor: pointer;
}
.planning-shape-proportion::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #60C6FF;
  transition: all 0.3s ease;
}
.planning-shape-proportion:hover::before {
  width: 100%;
}

.comment-send-mail {
  position: relative;
  display: flex;
  margin-top: 15px;
}
.comment-send-mail .icon-paper {
  padding-top: 6px;
  line-height: 1;
  margin-right: 10px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.comment-send-mail .icon-paper:hover {
  color: #60C6FF;
}
.comment-send-mail .icon {
  position: absolute;
  top: -1px;
  right: 0px;
  width: 20px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.comment-send-mail .icon:hover {
  color: #60C6FF;
}
.comment-send-mail .ip-comment {
  width: 100%;
}

.detail-comment {
  padding: 15px 10px;
  background: #000;
  border-radius: 4px;
  position: relative;
}
.detail-comment .modalComment-box {
  width: calc(100% - 36px);
}
.detail-comment .comment-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.detail-comment .comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #ccc;
}
.detail-comment .item-comment {
  display: flex;
  margin-top: 10px;
}
.detail-comment .item-comment:first-child {
  margin-top: 0;
}
.detail-comment .item-comment.comment-one-person {
  margin-top: 5px;
}

.order-detail .ttl-item {
  position: relative;
  z-index: 0;
  padding-left: 12px;
  color: #fff;
  font-weight: 500;
}
.order-detail .ttl-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60C6FF;
  left: 0;
  top: 7px;
}
.order-detail .ttl-item:not(:last-child) {
  margin-right: 20px;
}
.order-detail .ttl-item .t-ttl {
  color: #ccc;
}
.order-detail .item-customer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  font-size: 15px;
  color: #111;
  font-weight: bold;
  writing-mode: vertical-lr;
  padding: 2px 2px;
  background: #a7a7a7;
  width: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px 0 0 4px;
}
.order-detail .item-customer::before {
  content: none;
}
.order-detail .item-customer .icon {
  font-size: 14px;
  transform: rotate(90deg);
  margin-left: 2px;
  margin-bottom: 5px;
}
.order-detail .item-customer-popup {
  margin-right: 20px;
  font-weight: 500;
  color: #fff;
}
.order-detail .item-customer-popup .icon {
  position: relative;
  top: -2px;
  font-size: 14px;
  color: #60C6FF;
  margin-right: 6px;
}

.order-content-item {
  border: 1px solid #2b2b2b;
  border-radius: 4px;
  position: relative;
  padding: 10px 10px 10px 40px;
}
.order-content-item:not(:last-child) {
  margin-bottom: 20px;
}
.order-content-item .order:not(:last-child) {
  margin-bottom: 10px;
}
.order-content-item .more {
  text-align: center;
}

.order-top-title {
  background: #121829;
  padding: 9px;
  position: relative;
  border-radius: 4px 4px 0 0;
}
.order-top-title .box-top {
  position: absolute;
  right: 15px;
  top: 0;
  z-index: 2;
}
.order-top-title .box-top .box-total {
  margin-right: 4px;
}
.order-top-title .box-top .box-total .item {
  padding-right: 12px;
  display: flex;
}
.order-top-title .box-top .box-total .item .ttl {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  padding: 1px 8px;
  border-radius: 0 0 4px 4px;
  margin-right: 6px;
  color: #fff;
  font-weight: bold;
}
.order-top-title .box-top .box-total .item .nb {
  width: 26px;
  padding-top: 2px;
}
.order-top-title .box-top .box-total .item .date {
  width: 83px;
}
.order-top-title .box-top .box-total .item .status {
  width: calc(100% - 70px);
}
.order-top-title .box-top .box-total .item:last-child {
  padding-right: 6px;
  width: 185px;
}
.order-top-title .or-name {
  font-size: 16px;
  font-weight: bold;
  color: #60C6FF;
  padding-left: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cpath fill='%2360C6FF' fill-rule='evenodd' d='M5.5 1a.5.5 0 0 0-.477.65l.11.35H3.5a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-1.632l.11-.35A.5.5 0 0 0 10.5 1zm.68 1h3.64l-.313 1H6.493zM11 7H5V6h6zm0 2.5H5v-1h6zM5 12h4v-1H5z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat left -3px top 3px/16px auto;
}
.order-top-title .box1 {
  padding-left: 30px;
}
.order-top-title .box3 {
  padding-left: 18px;
}
.order-top-title .box2 {
  margin-top: 5px;
  padding-left: 18px;
}
.order-top-title .box2 .ttl-item {
  width: 183px;
}
.order-top-title .order-list {
  width: 275px;
}
.order-top-title .order-list.custom-width {
  width: 325px;
}
.order-top-title .box-parameter {
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 12px 5px;
  border-radius: 2px;
  margin-top: 5px;
}
.order-top-title .box-edit {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 2px 2px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: none;
  cursor: pointer;
  color: #fff;
}
.order-top-title .box-edit:hover {
  background: #4b64ac;
}
.order-top-title .table-order th, .order-top-title .table-order td {
  padding: 1px 6px;
  vertical-align: top;
}
.order-top-title .note {
  padding: 6px 12px 5px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-radius: 2px;
  min-height: 32px;
}

.order-process {
  border-radius: 0 0 4px 4px;
}
.order-process .step {
  display: flex;
  position: relative;
  z-index: 1;
  height: 30px;
}
.order-process .step::before, .order-process .step::after {
  content: "";
  position: absolute;
  z-index: -1;
}
.order-process .step::before {
  top: calc(50% - 15.5px);
  right: -15px;
  width: 31px;
  height: 31px;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37.98 36.98'%3E%3Cg id='Group_1' data-name='Group 1'%3E%3Crect id='bg-nb' x='5.83' y='4.83' width='27.32' height='27.32' rx='2' ry='2' transform='translate(-7.37 19.2) rotate(-45)' style='fill: %23a4a4a4; stroke-width: 0px;'/%3E%3Crect id='bg-nb-2' x='4.83' y='4.83' width='27.32' height='27.32' rx='2' ry='2' transform='translate(-7.66 18.49) rotate(-45)' style='fill: %23121829; stroke-width: 0px;'/%3E%3C/g%3E%3C/svg%3E") no-repeat right/contain;
  transition: all 0.3s ease;
}
.order-process .step::after {
  z-index: -2;
  top: calc(50% - 0.5px);
  right: -50%;
  width: 50%;
  height: 1px;
  background: #bbbbbb;
}
.order-process .step .ttl {
  padding: 4px 4px 1px 4px;
}
.order-process .item-process {
  padding-right: 14px;
  margin: 3px 5px 3px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  min-width: 129px;
}
.order-process .item-process .number {
  background: #A7A7A7;
  color: #000;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  width: 21px;
  height: 100%;
  border-radius: 4px 0 0 4px;
}
.order-process .item-process .ttl {
  width: calc(100% - 21px);
  position: relative;
  z-index: 0;
  background: #121829;
  transition: all 0.3s ease;
}
.order-process .item-process .ttl::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -5px;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  background: #A7A7A7;
  border-radius: 50%;
}
.order-process .item-process .pieces {
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.71 8.57'%3E%3Cpath d='M7.71.29l1.71,2.29-4.57,5.71L.29,2.57,2.01.29h5.71ZM.29,2.57h9.14M3.14,2.57l1.71,5.71M6.57,2.57l-1.71,5.71' style='fill: none; stroke: %23ccc; stroke-linecap: round; stroke-linejoin: round; stroke-width: .57px;'/%3E%3Cpath d='M2.01.29l1.14,2.29L4.86.29l1.71,2.29L7.71.29' style='fill: none; stroke: %23ccc; stroke-linecap: round; stroke-linejoin: round; stroke-width: .57px;'/%3E%3C/svg%3E") no-repeat left center/16px auto;
  padding-left: 20px;
  color: #fff;
  display: table;
  margin: 10px auto 0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 0;
  font-weight: bold;
}
.order-process .item-process .pieces::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10px;
  left: calc(50% - 1px);
  height: 8px;
  border-right: 1px dashed #7d7d7d;
}
.order-process .item-process .pieces .number-percent {
  padding-left: 5px;
  position: relative;
  z-index: 0;
}
.order-process .item-process .pieces .number-percent::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: #ccc;
}
.order-process .item-process:hover .ttl {
  background: #002443;
}
.order-process .item-process:hover .pieces {
  color: #60C6FF;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.71 8.57'%3E%3Cpath d='M7.71.29l1.71,2.29-4.57,5.71L.29,2.57,2.01.29h5.71ZM.29,2.57h9.14M3.14,2.57l1.71,5.71M6.57,2.57l-1.71,5.71' style='fill: none; stroke: %2360C6FF; stroke-linecap: round; stroke-linejoin: round; stroke-width: .57px;'/%3E%3Cpath d='M2.01.29l1.14,2.29L4.86.29l1.71,2.29L7.71.29' style='fill: none; stroke: %2360C6FF; stroke-linecap: round; stroke-linejoin: round; stroke-width: .57px;'/%3E%3C/svg%3E");
}
.order-process .item-process:hover .step::before {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37.98 36.98'%3E%3Cg id='Group_1' data-name='Group 1'%3E%3Crect id='bg-nb' x='5.83' y='4.83' width='27.32' height='27.32' rx='2' ry='2' transform='translate(-7.37 19.2) rotate(-45)' style='fill: %23a4a4a4; stroke-width: 0px;'/%3E%3Crect id='bg-nb-2' x='4.83' y='4.83' width='27.32' height='27.32' rx='2' ry='2' transform='translate(-7.66 18.49) rotate(-45)' style='fill: %23002443; stroke-width: 0px;'/%3E%3C/g%3E%3C/svg%3E");
}
.order-process .item-process:last-child {
  margin-right: 0;
}
.order-process [class*=boxStep] {
  padding: 3px 2px 2px 6px;
}
.order-process .line-progress {
  width: calc(100% - 6px);
  height: 8px;
  background: #ccc;
  color: #000;
  position: relative;
  margin-top: 17px;
  margin-bottom: 3px;
  border-radius: 2px;
}
.order-process .line-progress .progress-number {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
}
.order-process .line-progress .progress-number.one-number {
  left: 0;
  transform: translateX(0);
}
.order-process .line-progress .line-progress-finish {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  height: 100%;
  background: #ccc;
  width: 50%;
  border-radius: 2px;
}
.order-process .line-progress .line-progress-finish.very-poor {
  background: #e52e30;
}
.order-process .line-progress .line-progress-finish.poor {
  background: #f18030;
}
.order-process .line-progress .line-progress-finish.fair {
  background: #fed434;
}
.order-process .line-progress .line-progress-finish.normal {
  background: #82b73c;
}
.order-process .line-progress .line-progress-finish.good {
  background: #31b94c;
}
.order-process .boxStep1 {
  width: 247px;
  background: #495B67;
  border-radius: 0 0 0 4px;
}
.order-process .boxStep1 .item-process:nth-child(4) {
  min-width: 130px;
}
.order-process .boxStep2 {
  width: 695px;
  background: #1A3C53;
}
.order-process .boxStep3 {
  width: calc(100% - 942px);
  background: #3C6161;
  border-radius: 0 0 4px 0;
}
.order-process .boxStep3 .item-process:last-child .step::after {
  content: none;
}
.order-process .child-category-order {
  position: absolute;
  top: 32px;
  width: 155px;
  background: #121829;
  padding: 2px 5px 2px 5px;
  border-radius: 4px;
}
.order-process .child-category-order .item1 {
  width: 45px;
}
.order-process .child-category-order .item2 {
  width: calc(100% - 50px);
}
.order-process .child-category-order .child-ttl {
  color: #ccc;
}
.order-process .child-category-order .child-txt {
  color: #60C6FF;
}

@-webkit-keyframes flash {
  0% {
    opacity: 1;
    color: #B00020;
  }
  50% {
    opacity: 0.5;
    color: #fff;
  }
  100% {
    opacity: 1;
    color: #B00020;
  }
}
@keyframes flash {
  0% {
    opacity: 1;
    color: #B00020;
  }
  50% {
    opacity: 0.5;
    color: #fff;
  }
  100% {
    opacity: 1;
    color: #B00020;
  }
}
@supports (-ms-box-sizing: border-box) {
  [class*=gallery-thumb] {
    padding-left: 2px;
    padding-right: 2px;
  }
}
@media screen and (max-width: 1910px) {
  .order-process .boxStep1, .order-process .boxStep2, .order-process .boxStep3 {
    width: 100%;
  }
  .order-process .boxStep1 {
    border-radius: 0;
  }
  .order-process .boxStep3 {
    border-radius: 0 0 4px 4px;
  }
  .order-process .item-process {
    width: calc(20% - 18px);
    min-width: 170px;
  }
  .order-process .step::after {
    right: -40px;
    width: 40px;
  }
  .order-process .item-process:last-child .step::after {
    content: none;
  }
}
.planning-highlight {
  padding: 2px 5px 1px;
  border: 1px dashed #e94434;
}

.section-calendar-addnew {
  position: fixed;
  bottom: 20px;
  right: 130px;
  z-index: 12;
  transition: all 0.3s ease;
}
.section-calendar-addnew .calendar-addnew-icon {
  position: relative;
  z-index: 0;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  background: #002443;
  overflow: hidden;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
.section-calendar-addnew .calendar-addnew-icon:hover {
  background: #00549c;
}
.section-calendar-addnew.filter-totop {
  right: 115px;
  bottom: 15px;
}
.section-calendar-addnew .gr-calendar-addnew {
  position: absolute;
  bottom: calc(100% + 5px);
  right: 0;
  background: #121829;
  border-radius: 6px;
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.section-calendar-addnew .gr-calendar-addnew.active {
  display: block;
}
.section-calendar-addnew .gr-calendar-addnew .list {
  padding: 3px 10px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: relative;
  z-index: 0;
  white-space: nowrap;
}
.section-calendar-addnew .gr-calendar-addnew .list:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.section-calendar-addnew .gr-calendar-addnew .list:hover {
  background-color: #002443;
  color: #fff;
}

.order-detail-box .ttl-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60c6ff;
  left: 0;
  top: 10px;
}
.order-detail-box .item-customer {
  margin-right: 20px;
  font-size: 18px;
  color: #ccc;
}
.order-detail-box .title-order .icon {
  font-size: 16px;
}

.txt-filtered-order {
  margin-top: 5px;
}
.txt-filtered-order .txt-ft {
  color: #60C6FF;
}
.txt-filtered-order .icon {
  cursor: pointer;
}

#colorbox .icon-send-mail {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px 0 0 3px;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.79 8.29'%3E%3Cpath d='M8.09,7h-1.59c-.14,0-.26-.05-.36-.14-.1-.1-.14-.21-.14-.36,0-.14.05-.26.14-.36.1-.1.21-.14.36-.14h1.59l-.45-.45c-.09-.09-.14-.21-.14-.34s.05-.26.15-.36c.09-.09.21-.14.35-.14s.26.05.35.14l1.3,1.3s.08.09.1.16c.03.06.04.13.04.19s-.01.13-.04.19c-.02.06-.06.11-.1.16l-1.3,1.3c-.09.09-.21.14-.34.14s-.26-.04-.36-.14c-.09-.09-.14-.21-.14-.35s.05-.26.14-.35l.44-.45ZM1,7c-.27,0-.51-.1-.71-.29-.2-.2-.29-.43-.29-.71V1C0,.73.1.49.29.29.49.1.73,0,1,0h6.5c.28,0,.51.1.71.29.2.2.29.43.29.71v2.04c0,.13-.05.25-.15.35s-.22.15-.35.15c-.14,0-.26-.05-.36-.14-.1-.1-.14-.21-.14-.36v-1.34l-3.3,2.3L1,1.71v4.29h3.54c.14,0,.26.05.36.14s.14.21.14.36c0,.14-.05.26-.14.36-.1.1-.21.14-.36.14H1ZM1.72,1l2.47,1.78,2.55-1.78H1.72ZM1,6V1v5Z' style='fill: %23fff; stroke-width: 0px;'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top 6px left 5px;
  background-size: 16px auto;
}
#colorbox .icon-send-mail:hover {
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.79 8.29'%3E%3Cpath d='M8.09,7h-1.59c-.14,0-.26-.05-.36-.14-.1-.1-.14-.21-.14-.36,0-.14.05-.26.14-.36.1-.1.21-.14.36-.14h1.59l-.45-.45c-.09-.09-.14-.21-.14-.34s.05-.26.15-.36c.09-.09.21-.14.35-.14s.26.05.35.14l1.3,1.3s.08.09.1.16c.03.06.04.13.04.19s-.01.13-.04.19c-.02.06-.06.11-.1.16l-1.3,1.3c-.09.09-.21.14-.34.14s-.26-.04-.36-.14c-.09-.09-.14-.21-.14-.35s.05-.26.14-.35l.44-.45ZM1,7c-.27,0-.51-.1-.71-.29-.2-.2-.29-.43-.29-.71V1C0,.73.1.49.29.29.49.1.73,0,1,0h6.5c.28,0,.51.1.71.29.2.2.29.43.29.71v2.04c0,.13-.05.25-.15.35s-.22.15-.35.15c-.14,0-.26-.05-.36-.14-.1-.1-.14-.21-.14-.36v-1.34l-3.3,2.3L1,1.71v4.29h3.54c.14,0,.26.05.36.14s.14.21.14.36c0,.14-.05.26-.14.36-.1.1-.21.14-.36.14H1ZM1.72,1l2.47,1.78,2.55-1.78H1.72ZM1,6V1v5Z' style='fill: %2360c6ff; stroke-width: 0px;'/%3E%3C/svg%3E");
}
#colorbox .icon-send-mail.close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23fff'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath 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 160z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top 5px center;
  background-size: 8px auto;
  top: 85px;
  right: 0;
  background-color: #333;
}
#colorbox .icon-send-mail.close:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%2360c6ff'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath 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 160z'/%3E%3C/svg%3E");
}

@keyframes toRightFromLeft {
  39% {
    transform: translate(50%, -100%);
  }
  40% {
    opacity: 0;
    transform: translate(-50%, 100%);
  }
  61% {
    opacity: 1;
  }
}
.modalNewOrder .modalDetail .ttl {
  font-size: 14px;
  color: #fff;
  font-weight: normal;
}
.modalNewOrder .tab_container {
  position: relative;
}
.modalNewOrder .cm-new-order .col {
  width: calc(50% - 11.25px);
  margin-right: 15px;
}
.modalNewOrder .cm-new-order .col:nth-child(2n) {
  margin-right: 0;
}
.modalNewOrder .cm-new-order .col:not(:last-child) {
  margin-bottom: 15px;
}
.modalNewOrder .cm-new-order .col.col-full {
  width: 100%;
  margin-right: 0;
}
.modalNewOrder .cm-new-order .col.frist {
  margin-bottom: 15px;
}
.modalNewOrder .cm-new-order .col input {
  width: 100%;
  border-color: #2b2b2b;
}
.modalNewOrder .cm-new-order .col input[name=datetimes] {
  height: 23px;
}
.modalNewOrder .cm-new-order .col input[type=radio] {
  width: auto;
}
.modalNewOrder .cm-new-order .col .vsb-main {
  width: 100%;
  min-width: auto;
}
.modalNewOrder .cm-new-order .col .vsb-main button {
  border-color: #2b2b2b;
  height: 21px;
  padding-right: 40px;
}
.modalNewOrder .cm-new-order .col .vsb-js-search-zone input {
  border-color: grey;
  width: calc(100% - 20px);
}
.modalNewOrder .cm-new-order .col .ttl {
  display: block;
  width: 125px;
}
.modalNewOrder .cm-new-order .col .b-txt {
  width: calc(100% - 130px);
}
.modalNewOrder .cm-new-order .col .ttl-datetimes {
  display: block;
  width: 100%;
  max-width: none;
}
.modalNewOrder .cm-new-order .col .col2 {
  width: calc(50% - 14px);
}
.modalNewOrder .cm-new-order .col .multiple {
  width: calc(100% - 100px);
}
.modalNewOrder .cm-new-order .col .col-from {
  position: relative;
}
.modalNewOrder .cm-new-order .col .col-from::before {
  content: "";
  position: absolute;
  z-index: -1;
  z-index: 1;
  top: calc(50% - 5px);
  right: -19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%236D6D6D'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M438.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.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") no-repeat center/10px auto;
  width: 10px;
  height: 10px;
}
.modalNewOrder .cm-new-order .col .textarea {
  width: 100%;
  min-height: 70px;
  height: calc(100vh - 698px);
}
.modalNewOrder .new-order-multiple {
  background: #000;
  border-radius: 4px;
  padding: 15px 27px 18px 27px;
  position: relative;
  margin-left: 6px;
}
.modalNewOrder .new-order-multiple:not(:last-child) {
  margin-bottom: 10px;
}
.modalNewOrder .new-order-multiple .or-number {
  position: absolute;
  z-index: 2;
  left: -6px;
  color: #000;
  font-weight: bold;
  padding: 5px 5px;
  min-width: 22px;
  line-height: 1;
  text-align: center;
}
.modalNewOrder .new-order-multiple .or-number::before, .modalNewOrder .new-order-multiple .or-number::after {
  content: "";
  position: absolute;
  z-index: -1;
}
.modalNewOrder .new-order-multiple .or-number::before {
  background: #A7A7A7;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 2px 2px 0;
}
.modalNewOrder .new-order-multiple .or-number::after {
  z-index: -2;
  left: 0;
  width: 6px;
  height: 6px;
  bottom: -6px;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 143'%3E%3Cpolygon points='168 143 0 0 168 0 168 143' style='fill: %23555; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat top/contain;
}
.modalNewOrder .new-order-multiple .or-delete {
  position: absolute;
  color: #E94434;
  top: 4px;
  right: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.modalNewOrder .new-order-multiple .or-delete:hover {
  opacity: 0.7;
}
.modalNewOrder .detail-order {
  position: relative;
}
.modalNewOrder .detail-order.order-send-mail .new-order-box, .modalNewOrder .detail-order.order-send-mail .title-send-mail {
  width: calc(50% - 5px);
}
.modalNewOrder .detail-order.order-send-mail .title-send-mail {
  background: #000;
  padding: 10px;
  border-radius: 4px;
}
.modalNewOrder .detail-order .new-order-box {
  padding: 10px;
  border: 1px solid #2b2b2b;
  border-radius: 4px;
  width: calc(70% - 20px);
}
.modalNewOrder .detail-order .new-table-order {
  width: 30%;
  overflow: auto;
}
.modalNewOrder .detail-order .new-table-order::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.modalNewOrder .detail-order .new-table-order::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.modalNewOrder .detail-order .new-table-order::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
.modalNewOrder .detail-order .new-table-order.add-pd {
  padding-right: 6px;
}
.modalNewOrder .gr-btn {
  margin-top: 15px;
}
.modalNewOrder .content-order-multiple .col {
  display: flex;
  width: calc(33.3333333333% - 11.25px);
}
.modalNewOrder .content-order-multiple .col:nth-child(2n) {
  margin-right: 15px;
}
.modalNewOrder .content-order-multiple .col:nth-child(3n) {
  margin-right: 0;
}
.modalNewOrder .content-order-multiple .col.col-full {
  width: 100%;
}
.modalNewOrder .content-order-multiple .col .textarea {
  height: auto;
}
.modalNewOrder .content-order-multiple .col.col-ttl-long .ttl {
  width: 120px;
}
.modalNewOrder .content-order-multiple .col.col-ttl-long .b-txt {
  width: calc(100% - 120px);
}
.modalNewOrder .content-order-multiple.multiple-customer-name {
  margin-bottom: 15px;
}
.modalNewOrder .content-order-multiple.multiple-customer-name .ttl {
  width: 50px;
}
.modalNewOrder .content-order-multiple.multiple-customer-name .content {
  width: calc(100% - 500px);
}
.modalNewOrder .content-order-multiple.multiple-customer-name .col-full {
  width: calc(100% - 130px);
  margin-bottom: 0;
}

.cm-popup-send-mail {
  display: flex;
  justify-content: space-between;
}
.cm-popup-send-mail .cm-send-mail-chat {
  width: calc(50% - 8px);
}
.cm-popup-send-mail .txt-comment {
  width: calc(100% - 15px);
}
.cm-popup-send-mail .icon-delete {
  color: #E94434;
  cursor: pointer;
}
.cm-popup-send-mail .gr-box-left {
  width: 100%;
}
.cm-popup-send-mail .gr-box-left.has-view-sendmail {
  width: calc(50% - 8px);
}

.cm-send-mail-chat {
  margin-bottom: 0;
}
.cm-send-mail-chat .col-title {
  margin-bottom: 15px;
}
.cm-send-mail-chat .col-title .title {
  padding-top: 0;
  color: #fff;
  width: 90px;
  height: 44px;
  border: 1px solid #2b2b2b;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.cm-send-mail-chat .col-title .info-email-to {
  width: calc(100% - 100px);
  border-bottom: 1px solid #2b2b2b;
}
.cm-send-mail-chat .col-title .info-email-to input {
  width: 100%;
  border: none;
}
.cm-send-mail-chat .col-title:last-child {
  margin-bottom: 0;
}
.cm-send-mail-chat .error-txt-email {
  margin-top: 2px;
  margin-left: 100px;
}
.cm-send-mail-chat .textarea-mail textarea {
  min-height: 243px;
}
.cm-send-mail-chat .title-email {
  margin-right: 40px;
  font-weight: 600;
  color: #fff;
}
.cm-send-mail-chat .title-subject {
  margin-right: 10px;
  font-weight: 600;
  color: #fff;
}
.cm-send-mail-chat .mail-ttl-note {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #fff;
}
.cm-send-mail-chat .textarea-mail {
  line-height: 0;
  width: 100%;
}

.footer-colorbox-send-mail {
  margin-top: 10px;
}
.footer-colorbox-send-mail .comment-send-mail {
  background: #333;
  padding: 11px 10px 10px;
  border-radius: 4px;
  margin-top: 0;
  width: 100%;
}
.footer-colorbox-send-mail .comment-send-mail.has-view-sendmail {
  width: calc(50% - 8px);
}
.footer-colorbox-send-mail .comment-send-mail .icon {
  top: 12px;
  right: 9px;
}
.footer-colorbox-send-mail .comment-send-mail .note-shipment {
  border-color: #6d6d6d;
  border-radius: 6px;
  padding-right: 28px;
  width: calc(100% - 50px);
}
.footer-colorbox-send-mail .comment-send-mail .note-shipment::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.footer-colorbox-send-mail .gr-btn-send-mail {
  border-radius: 4px;
  align-items: flex-end;
  height: 96px;
  width: calc(50% - 8px);
}

.detail-new-order-multiple {
  overflow: auto;
  height: calc(90vh - 215px);
}
.detail-new-order-multiple::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.detail-new-order-multiple::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.detail-new-order-multiple::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}

@media screen and (max-width: 1400px) {
  .modalNewOrder .gr-radiobox label:not(:last-child) {
    margin-right: 10px;
  }
}
.planning-uploadfile {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #219ebc;
  border: 1px dashed #219ebc;
  border-radius: 4px;
  padding: 10px 20px;
  background: #fff;
  display: none;
}

.disabled-div {
  cursor: not-allowed;
  opacity: 0.7;
}

.disabled-label:hover {
  cursor: not-allowed;
  border-color: #444 !important;
}

.disabled-input:hover {
  cursor: not-allowed;
}

.b-cursor {
  cursor: pointer;
}

.b-hover {
  transition: all 0.3s ease;
}
.b-hover:hover {
  opacity: 0.7;
}

.txt-one-line-more {
  width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.b-line-height {
  line-height: 0;
}

.div-KeepStone.title-h2 {
  padding-right: 0;
}
.div-KeepStone .name {
  width: 125px;
}
.div-KeepStone .content-item {
  width: calc(100% - 125px);
}
.div-KeepStone .ttl-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60c6ff;
  left: 0;
  top: 10px;
}
.div-KeepStone .ttl-item {
  position: relative;
  z-index: 0;
  padding-left: 12px;
  margin-left: 15px;
}

.box-fileupload {
  border: 1px dashed #2b2b2b;
  border-radius: 3.2px;
  padding: 15px 15px 15px;
  position: relative;
}

.control-fileupload-style2 {
  display: block;
  min-width: 170px;
  text-align: center;
  position: relative;
  z-index: 0;
  color: #A7A7A7;
}
.control-fileupload-style2 input[type=file] {
  display: none;
  overflow: hidden;
  cursor: pointer;
}
.control-fileupload-style2 .txt-small {
  color: #ccc;
  font-weight: bold;
  transition: all 0.3s ease;
}
.control-fileupload-style2 .txt-small:hover {
  text-decoration: underline;
}
.control-fileupload-style2 .label-input-file {
  cursor: pointer;
}

.form-uploadfile {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #17A2B8;
  border: 1px dashed #17A2B8;
  border-radius: 4px;
  padding: 10px 20px;
  background: #fff;
  display: none;
}

.upload-name-file .name-file {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  margin-top: 5px;
  background: #000;
  border-radius: 3.2px;
}
.upload-name-file .name-file:not(:last-child) {
  margin-right: 5px;
}
.upload-name-file .name-file.error {
  background: rgba(219, 0, 0, 0.1);
  color: #E94434;
}
.upload-name-file .name-file.error .icon-trash {
  border-left-color: #E94434;
}
.upload-name-file .icon-trash {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid #2b2b2b;
  font-size: 13px;
  line-height: 1;
  transition: all 0.3s ease;
  cursor: pointer;
}
.upload-name-file .icon-trash:hover {
  color: #E94434;
}
.upload-name-file a {
  transition: all 0.3s ease;
  cursor: pointer;
  color: #60C6FF;
  text-decoration: none;
}

.file-error {
  margin-top: 5px;
  color: #E94434;
  padding: 5px 10px;
  background: #fdecea;
  display: inline-flex;
  align-items: flex-start;
  border-radius: 3.2px;
}
.file-error a {
  color: #E94434;
}
.file-error i {
  flex-shrink: 0;
}

.popup-upload.box-fileupload {
  padding: 8px;
}
.popup-upload .upload-name-file a {
  line-height: 1.2;
}
.popup-upload .form-uploadfile {
  padding: 2px 12px;
}

.modalNewOrder .content-order-multiple .box-fileupload {
  width: 100%;
}
.modalNewOrder .content-order-multiple .upload-name-file .name-file {
  background: #161616;
}

.rydiam-cal-content-event .control-fileupload-style2 label {
  display: inline-block;
}

.popup-taskProfile .task-content-popup .ttl-status {
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 5px;
}
.popup-taskProfile .task-content-popup .task-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
}

.add-sell-invoice-model .modalDetail .error-file {
  color: #e94434;
}

.info-invoice {
  padding-bottom: 15px;
}
.info-invoice .table.w-th01 th:first-child {
  width: 150px;
}

.info-invoice th {
  background: none;
}

.detail-invoice .icon-filter {
  margin-left: 5px;
  margin-right: 5px;
  color: #808080;
}
.detail-invoice .detail-invoice-stone {
  background: #000;
  border-radius: 4px;
  margin-bottom: 10px;
}
.detail-invoice .detail-invoice-stone .stone-step {
  writing-mode: vertical-lr;
  text-align: center;
}
.detail-invoice .detail-invoice-stone .stone-step span {
  height: 100%;
  display: block;
  border: 1px solid #2b2b2b;
  border-top: none;
}
.detail-invoice .detail-invoice-stone .stone-info {
  text-align: center;
}
.detail-invoice .detail-invoice-stone .header-stone {
  border-bottom: 1px solid #2b2b2b;
  padding: 5px;
}
.detail-invoice .detail-invoice-stone .bold-info {
  font-weight: 700;
}
.detail-invoice .V360-quality-sum .txt {
  background: #232323;
}
.detail-invoice .V360-quality-sum .number-filter {
  margin-left: 5px;
  font-size: 15px;
}

.notice-content {
  position: fixed;
  left: 250px;
  bottom: 0;
  width: 100%;
  z-index: 100000;
  font-size: 13px;
  background-color: #c2dbd1;
  padding: 10px;
  color: #111;
  line-height: 1.38;
  transition: 0.6s;
  padding-bottom: 5px;
}
.notice-content .btxt {
  display: flex;
}
.notice-content .btxt i {
  margin-right: 8px;
  font-size: 18px;
  position: relative;
  top: -2px;
}
.notice-content .content {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.notice-content .cm-button a {
  min-width: 60px;
  font-weight: normal;
  padding: 3px 6px 1px 6px;
}

.notice-content-full {
  left: 0;
  transition: 0.6s;
}

.iconShare:hover {
  cursor: pointer;
  color: #60c6ff;
}

.img-bongden {
  transition: filter 0.2s;
  cursor: pointer;
  margin-left: 5px;
  width: 24px;
  height: 24px;
}

.img-bongden:hover {
  filter: brightness(0) saturate(100%) invert(64%) sepia(98%) saturate(747%) hue-rotate(1deg) brightness(102%) contrast(101%);
}

.LightMode .img-bongden:hover {
  filter: brightness(0) saturate(100%) invert(64%) sepia(98%) saturate(747%) hue-rotate(1deg) brightness(68%) contrast(100%);
}

.filter-row {
  font-size: 12px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  opacity: 0.5;
  cursor: pointer;
  justify-content: flex-start !important;
}

.popup-filter {
  position: absolute;
  z-index: 10000;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 2px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 0.5rem;
}
.popup-filter .text-filter-wrapper {
  width: 245px;
}
.popup-filter .info-text {
  color: #777;
}
.popup-filter .filter-input {
  width: 100%;
  background-color: #fff;
  color: #686868;
  font-size: 1rem;
  border-radius: 4px !important;
  border: 1px solid #c3c3c3;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
}
.popup-filter .filter-input::placeholder {
  color: #adadad;
}
.popup-filter .filter-input:focus {
  border-color: #30918a !important;
  box-shadow: inset 0 0 2px #3aafa6 !important;
  outline: none;
}
.popup-filter .clear-btn {
  font-size: 12px;
  color: #cd0529;
  cursor: pointer;
  margin-top: 5px;
  text-align: right;
}
.popup-filter .clear-btn:hover {
  text-decoration: underline;
}
.popup-filter .tags {
  display: block;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  max-height: 400px;
  overflow: auto;
  margin-top: 5px;
}
.popup-filter .tags .tag {
  background: #e8f0fe;
  color: #333;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  display: block;
  align-items: center;
  display: block;
  width: fit-content;
  margin-bottom: 5px;
}
.popup-filter .tags .tag:last-child {
  margin-bottom: 0;
}
.popup-filter .tags .tag span {
  margin-left: 10px;
  cursor: pointer;
  color: #555;
}
.popup-filter .tags .tag span:hover {
  color: #222;
}
.popup-filter .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1000;
}
.popup-filter .dropdown div {
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.popup-filter .dropdown div:hover {
  background-color: #f1f3f4;
}
.popup-filter .number-range-wrapper {
  display: flex;
  flex-direction: row; /* chính là dòng quan trọng */
  width: 230px;
}
.popup-filter .number-range-wrapper label {
  color: #686868;
  font-weight: bold;
  margin-bottom: 0.25rem;
  display: block;
  font-size: 1rem;
}
.popup-filter .number-range-wrapper span {
  color: #a4a4a4;
  margin-top: 32px;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.popup-filter .number-range-wrapper input[type=number], .popup-filter .number-range-wrapper .min-input, .popup-filter .number-range-wrapper .max-input {
  height: 30px;
  width: 100%;
  background-color: #fff;
  color: #686868;
  line-height: 14px;
  font-size: 1rem;
  border-radius: 4px !important;
  border: 1px solid #c3c3c3;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.popup-filter .number-range-wrapper input[type=number]::placeholder, .popup-filter .number-range-wrapper .min-input::placeholder, .popup-filter .number-range-wrapper .max-input::placeholder {
  color: #adadad;
  font-size: 14px;
}
.popup-filter .number-range-wrapper input[type=number]:focus, .popup-filter .number-range-wrapper .min-input:focus, .popup-filter .number-range-wrapper .max-input:focus {
  border-color: #30918a !important;
  box-shadow: inset 0 0 2px #3aafa6 !important;
  outline: none;
}
.popup-filter .checkbox-filter-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: max-content;
  max-height: calc(100vh - 380px);
  overflow: auto;
}
.popup-filter .checkbox-filter-wrapper .checkbox-item label {
  display: flex;
  gap: 2px;
  cursor: pointer;
  color: #111;
}
.popup-filter .checkbox-filter-wrapper .checkbox-item input[type=checkbox] {
  padding: 6px 6px;
  border: 1px solid #868686;
  border-radius: 2px;
  outline: none;
  margin-top: 2px;
  background: #fff;
  top: 0;
  height: 18px;
  width: 18px;
}
.popup-filter .date-filter-wrapper {
  width: 170px;
}
.popup-filter .date-filter-wrapper input {
  width: 100%;
  color: #111;
}

.no-result-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  padding: 30px;
  border-radius: 10px;
  display: none;
}

.no-result-overlay .button-clear-filters a {
  background: #a8a8a8;
  padding: 3px 10px;
  border-radius: 40px;
  text-align: center;
  color: #000;
  font-weight: 700;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-width: 110px;
}

.LightMode .no-result-overlay .button-clear-filters a {
  background: #415073;
  color: #fff;
  font-weight: 500;
}

.popup-wip-detail {
  position: absolute;
  z-index: 10000;
  background: #272727;
  border: 1px solid #4b4b4b;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 10px;
}
.popup-wip-detail .planSelect-content-toggle .txt {
  display: flex;
}
.popup-wip-detail .stone-value {
  color: #60c6ff;
  margin-left: auto;
  padding-left: 10px;
}

.wip-detail:hover {
  color: #60c6ff;
  cursor: pointer;
}

.dt-skeleton {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(100deg, #2b2f36 40%, #3a3f47 50%, #2b2f36 60%);
  background-size: 200% 100%;
  animation: dtShimmer 1.2s ease-in-out infinite;
}

@keyframes dtShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
table.dataTable tbody {
  transition: opacity 0.15s ease;
}

table.dataTable.dt-loading tbody {
  opacity: 0.85;
}

.block-table.skeleton {
  padding: 14px 12px;
  border-radius: 6px;
  overflow: hidden;
}
.block-table.skeleton .skeleton-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.block-table.skeleton .skeleton-cell {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(100deg, #2b2f36 40%, #3a3f47 50%, #2b2f36 60%);
  background-size: 200% 100%;
  animation: dtShimmer 1.2s ease-in-out infinite;
}

.block-table-wrapper {
  position: relative;
}
.block-table-wrapper .content-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  border-radius: 6px;
}
.block-table-wrapper .content-overlay .loading-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.block-table-wrapper.loading {
  min-height: calc(100vh - 250px);
}
.block-table-wrapper.loading .content-overlay {
  opacity: 1;
  pointer-events: auto;
  z-index: 99;
}

.dt-scroll-body.loading {
  opacity: 0.5;
  pointer-events: none;
}
.dt-scroll-body.loading .loading-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
}

.document-management {
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #0C0C0C;
}
.document-management input, .document-management button, .document-management textarea, .document-management select {
  font-size: 13px;
}
.document-management a {
  color: #0C0C0C;
}
.document-management input {
  border-color: #999;
  color: #0C0C0C;
}
.document-management input[type=checkbox] {
  background-color: transparent;
  border-color: #999;
  overflow: unset;
}
.document-management input[type=checkbox]:focus {
  box-shadow: 0 0 0 3px rgba(69, 98, 167, 0.2);
  border-color: #0077b6;
}
.document-management input[type=checkbox]:checked {
  border-color: #0077b6;
}
.document-management input[type=checkbox]:checked::before {
  background-color: #0077b6;
}
.document-management .tabs {
  margin-bottom: 8px;
}
.document-management .tabs.tab-ontop li {
  background-color: #959595;
}
.document-management .tabs.tab-ontop li.tab-active {
  background-color: #7b8cb4;
}
.document-management .tabs.tab-ontop li a {
  color: #fff;
}
.document-management .tabs li {
  margin-right: 5px;
}
.document-management .tabs li a {
  padding-left: 10px;
  padding-right: 10px;
  overflow: hidden;
}
.document-management .tabs li a::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0077b6;
  transition: all 0.3s ease;
}
.document-management .tabs li a::before {
  height: 1px;
}
.document-management .tabs li.active a {
  color: #0077b6;
}
.document-management .tabs li.active a::before {
  background: #0077b6;
}
.document-management .tabs li.active a::after {
  left: 0;
}
.document-management .tabs a {
  padding-bottom: 5px;
  font-size: 14px;
}
.document-management .cm-table input[type=checkbox] {
  top: 1px;
}
.document-management .cm-table .b-file-name .tb-icon-file + .ttl {
  width: calc(100% - 86px);
}
.document-management .ovf-auto::-webkit-scrollbar, .document-management .dataTables_scrollBody::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.document-management .content-confim-login {
  background: #fff;
}
.document-management .content-confim-login h2 {
  border-color: #a7a7a7;
}
.document-management .box-modalShareLink {
  margin-bottom: 15px;
}
.document-management .box-modalShareLink input {
  width: calc(100% - 20px);
  margin-right: 6px;
}
.document-management .box-modalShareLink .icon {
  color: #999;
  cursor: pointer;
}
.document-management .header-right a {
  color: #fff;
}
.document-management .header-right .hd-box-bell .dropdown-menu-notification {
  background: #4f5565;
  top: calc(100% + 15px);
}
.document-management .header-right .hd-box-bell .dropdown-menu-notification::before {
  border-bottom: 6px solid #4f5565;
}
.document-management .header-right .hd-box-bell .dropdown-menu-notification .popover-header {
  border-color: rgba(0, 0, 0, 0.3);
  font-size: 15px;
}
.document-management .header-right .hd-box-bell .dropdown-menu-notification .popover-header .clear-notice {
  padding: 3px 6px 0;
}
.document-management .header-right .hd-box-bell .dropdown-menu-notification .popover-header .clear-notice:hover {
  background: #a8a8a8;
}
.document-management .header-right .hd-box-bell .dropdown-menu-notification ul li:not(:last-child) {
  border-color: rgba(0, 0, 0, 0.3);
}
.document-management .header-right .hd-box-bell .dropdown-menu-notification ul li a:hover {
  background: rgba(0, 0, 0, 0.3);
}
.document-management .header-right .hd-box-bell .dropdown-menu-notification ul li .message-data .comment {
  font-size: 12px;
}
.document-management .header-right .hd-box-bell .dropdown-menu-notification .popover-footer a {
  border-color: rgba(0, 0, 0, 0.3);
}
.document-management .header-right .hd-box-bell .dropdown-menu-notification .popover-footer a:hover {
  background: rgba(0, 0, 0, 0.3);
  color: #60c6ff;
}
.document-management .header-right .hd-user .gr-user-info {
  background: #4f5565;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  width: 170px;
  right: -15px;
}
.document-management .header-right .hd-user .gr-user-info::before {
  border-bottom: 6px solid #4f5565;
  right: 23px;
}
.document-management .header-right .hd-user .gr-user-info figure {
  border: 5px solid rgba(35, 43, 62, 0.35);
}
.document-management .header-right .hd-user .gr-user-info .user-name {
  color: #fff;
}
.document-management select option {
  background: #fff;
}
.document-management .vsb-menu li {
  color: #0C0C0C;
}
.document-management .vsb-menu li:not(:last-child) {
  border-color: #ccc;
}
.document-management .vsb-menu li:hover, .document-management .vsb-menu li.active {
  color: #0C0C0C;
}
.document-management .vsb-menu .multi li:not(.grouped-option)::before, .document-management .vsb-menu .multi li:not(.grouped-option)::after {
  top: 6px;
  left: 34px;
  position: absolute;
}
.document-management .vsb-menu .multi li:not(.grouped-option)::before {
  background-color: transparent;
  border: 1px solid #999 !important;
  border-color: #999;
}
.document-management .vsb-menu .multi li:not(.grouped-option).active::after {
  background-color: #0077b6;
}
.document-management .vsb-main button {
  border-color: #999;
  color: #0C0C0C;
}
.document-management .vsb-js-search-zone {
  background: #fff;
}
.document-management .vsb-js-search-zone input {
  color: #0C0C0C;
}
.document-management .vsb-main .title {
  color: #111 !important;
}
.document-management .vsb-menu {
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
}
.document-management .vsb-menu ul {
  color: #111;
}
.document-management .vsb-menu ul::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #c2c2c2;
}
.document-management .vsb-menu ul::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.document-management .vsb-menu ul::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #777777;
}
.document-management .vsb-menu li:hover, .document-management .vsb-menu li.active {
  color: #111;
  background: #c5d5ef;
}
.document-management .vsb-menu li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.document-management #cboxContent, .document-management #colorbox .vsb-menu, .document-management #colorbox .vsb-js-search-zone {
  background: #fff;
  color: #0C0C0C;
}
.document-management #cboxContent input, .document-management #colorbox .vsb-menu input, .document-management #colorbox .vsb-js-search-zone input {
  color: #0C0C0C;
}
.document-management #cboxContent.light-background-login {
  background: #161616;
}
.document-management #cboxContent.light-background-login .content-login input {
  color: #ccc;
}
.document-management #cboxContent.light-background-login .content-login input:-webkit-autofill,
.document-management #cboxContent.light-background-login .content-login input:-webkit-autofill:hover,
.document-management #cboxContent.light-background-login .content-login input:-webkit-autofill:focus,
.document-management #cboxContent.light-background-login .content-login input:-webkit-autofill:active {
  caret-color: #fff;
  -webkit-text-fill-color: #fff;
}
.document-management .e-dlg-container {
  z-index: 20001 !important;
}
.document-management .footer-colorbox {
  border-color: #a7a7a7;
}
.document-management .f__m {
  background-color: #fff;
}
.document-management .f__m__h {
  background: #526d82 !important;
}
.document-management .f__m__h.question {
  background: #526d82 !important;
}
.document-management .f__btn {
  padding: 4px 6px 2px 6px;
}
.document-management .f__btn[data-evt=tr] {
  background: #999 !important;
  font-weight: 500 !important;
}
.document-management .f__btn[data-evt=ccl] {
  background: #219ebc !important;
  color: #fff !important;
  font-weight: 500 !important;
}
.document-management input[name=search] {
  color: #0C0C0C;
}
.document-management .table thead {
  background: #fff;
}
.document-management .title-h2 {
  border-color: #a7a7a7;
}
.document-management .table {
  color: #0C0C0C;
}
.document-management .table th {
  background-color: #7b8cb4;
  border-color: #7b8cb4;
  font-weight: 500;
}
.document-management .table td {
  border-color: #a7a7a7;
}
.document-management .table tr.active {
  background: rgba(123, 140, 180, 0.3);
  font-weight: 600;
}
.document-management .cm-table input[type=checkbox] {
  margin-right: 8px;
}
.document-management .cm-table .icon-file {
  width: 18px;
  height: 18px;
  display: inline-block;
  line-height: 1;
  margin-right: 4px;
}
.document-management .cm-table .icon-file + label {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: calc(100% - 47px);
}
.document-management .cm-table .tb-icon-file + .ttl {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  width: calc(100% - 22px);
  top: 4px;
  position: relative;
}
.document-management .breadcrumb-list-modal {
  display: flex;
  margin-top: 5px;
  margin-bottom: 15px;
}
.document-management .breadcrumb-list-modal li {
  position: relative;
  z-index: 0;
}
.document-management .breadcrumb-list-modal li:not(:last-child) {
  padding-right: 15px;
  margin-right: 5px;
}
.document-management .document-sidebar-move {
  position: relative;
  height: auto;
  top: auto;
  width: auto;
}
.document-management .document-sidebar-move .document-sidebar-content {
  padding: 0 0 0 5px;
  height: auto;
}
.document-management .sidebar-main {
  padding-left: 4px;
  margin-left: -4px;
  height: calc(100% - 175px);
}
.document-management .bold {
  font-weight: 700;
}
.document-management .dataTables-sum-page {
  font-weight: 700;
  color: #0077b6;
}
.document-management .paginate_button {
  background-color: #ccc;
  padding-top: 2px;
  color: #111;
  font-weight: 500;
}
.document-management .paginate_button.current {
  background: #526d82;
  color: #fff;
}
.document-management .paginate_button.previous, .document-management .paginate_button.next {
  color: transparent;
  text-indent: -99999px;
}
.document-management .ip-add-file-name {
  color: #0077b6;
  font-weight: 500;
}
.document-management .gr-add-file-name {
  max-width: 770px;
  width: 100%;
  position: relative;
  gap: 10px;
}
.document-management .gr-add-file-name .icon-edit-file {
  top: 2px;
  right: 96px;
  position: absolute;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  transition: all 0.3s ease;
}
.document-management .gr-add-file-name .icon-edit-file:hover {
  opacity: 0.6;
}
.document-management .gr-add-file-name.custom-file-name {
  max-width: 865px;
}
.document-management .gr-add-file-name.custom-file-name .status-file {
  cursor: pointer;
}
.document-management .gr-add-file-name .status-file {
  padding: 3px 8px 2px !important;
}
.document-management .not-fill-error {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  color: #cf000f;
  font-size: 13px;
}
.document-management .not-fill-error i {
  margin-right: 5px;
  position: relative;
  top: -1px;
}
.document-management .sum-select .icon-close {
  display: inline-block;
  margin-left: 5px;
  transition: all 0.3s ease;
  color: #eb222b;
  font-size: 13px;
  cursor: pointer;
  position: relative;
  top: 1px;
}
.document-management .sum-select .icon-close:hover {
  opacity: 0.6;
}
.document-management .popup-modalWorkFlow .document-detail {
  padding: 0;
}
.document-management .txt-textarea {
  width: 100%;
}
.document-management textarea {
  border-color: #a7a7a7;
  color: #0c0c0c;
  width: 100%;
  border-radius: 4px;
}
.document-management .popup-modalWorkFlowApproval .document-detail {
  padding: 0;
}
.document-management .popup-modalWorkFlowApproval .title-workflow {
  font-weight: bold;
  font-size: 15px;
}
.document-management .popup-modalWorkFlowApproval.view-ai-overview {
  width: 50%;
}
.document-management .popup-modalWorkFlowApproval.view-ai-overview .document-detail {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 5px;
  border-radius: 4px;
  height: calc(100% - 34px);
}
.document-management .panel-view-workflow {
  margin-bottom: 20px;
}
.document-management .box-edit-version {
  margin-top: 20px;
}
.document-management .box-edit-version .box .col {
  width: calc(25% - 5px);
  padding: 8px;
  border-radius: 4px;
}
.document-management .box-edit-version .box .col input {
  width: 100%;
  text-align: right;
}
.document-management .box-edit-version .box:not(.box1) {
  margin-bottom: 5px;
}
.document-management .box-edit-version .col-bg {
  background: rgba(0, 119, 182, 0.2);
  font-weight: bold;
}
.document-management .box-edit-version .col-bg2 {
  background: #111;
  color: #fff;
  font-weight: bold;
}
.document-management .box-edit-version .col-bg3 {
  background: #219ebc;
  color: #fff;
  font-weight: bold;
}
.document-management .doc-box-actions > div {
  color: #999;
}
.document-management .doc-box-actions > div a {
  color: #999;
}
.document-management .doc-box-actions > div a::before {
  content: normal;
}
.document-management .doc-box-actions > div:not(:last-child) {
  margin-right: 2px;
}
.document-management .doc-box-actions .icon-action, .document-management .doc-box-actions .document-dropdown-option {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
}
.document-management .doc-box-actions .icon-action a, .document-management .doc-box-actions .document-dropdown-option a {
  transition: all 0.3s ease;
}
.document-management .doc-box-actions .icon-action:hover, .document-management .doc-box-actions .icon-action.active, .document-management .doc-box-actions .document-dropdown-option:hover, .document-management .doc-box-actions .document-dropdown-option.active {
  color: #0077b6;
  background: #ccc;
}
.document-management .doc-box-actions .icon-action:hover a, .document-management .doc-box-actions .icon-action.active a, .document-management .doc-box-actions .document-dropdown-option:hover a, .document-management .doc-box-actions .document-dropdown-option.active a {
  color: #0077b6;
}
.document-management .doc-box-actions .document-dropdown-option {
  display: flex;
  align-items: center;
  justify-content: center;
}
.document-management .icon-version {
  color: #0077b6;
  background: rgba(69, 98, 167, 0.1);
  padding: 1px 8px;
  border-radius: 4px;
  position: relative;
  top: -2px;
}
.document-management .gr-dr-remove {
  margin-top: 5px;
}
.document-management .gr-dr-remove .dr-remove {
  padding: 1px 8px 2px;
  border-radius: 4px;
  font-size: 11px;
  color: #cf000f;
  background: rgba(207, 0, 15, 0.15);
  width: 65px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.document-management .gr-dr-remove .txt-all {
  font-weight: 500;
}
.document-management .tag-name {
  display: inline-block;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 2px 8px 0px 8px;
  margin-right: 5px;
  margin-bottom: 3px;
  background-color: #efefef;
}
.document-management #divTagName {
  border-bottom: 1px solid #999;
}
.document-management #txtTagName {
  margin-top: 1px;
}
.document-container {
  background: #F2F3F5;
  color: #0C0C0C;
}
.document-header {
  background: #232B3E;
  padding: 0 15px 0 14px;
  height: 51px;
}
.document-header h2 {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  color: #EB222B;
  cursor: pointer;
}
.document-h2-logo .logo {
  display: block;
  width: 35px;
  margin-right: 5px;
}
.document-sidebar {
  position: absolute;
  left: 0;
  top: 51px;
  z-index: 10;
  width: 360px;
  height: calc(100vh - 51px);
}
.document-sidebar-content {
  padding: 8px 0 15px 20px;
  height: calc(100% - 51px);
}
.document-sidebar .title-sidebar {
  margin-top: 12px;
  margin-bottom: 8px;
  padding: 4px 15px;
  font-weight: 500;
  font-size: 14px;
  position: relative;
  z-index: 0;
  background: #526D82;
  color: #fff;
  overflow: hidden;
}
.document-sidebar .title-sidebar::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 15px solid rgba(0, 0, 0, 0);
  border-bottom: 15px solid rgba(0, 0, 0, 0);
  border-right: 15px solid #f2f3f5;
  border-left: 0;
  top: 0;
  right: 0;
}
.document-sidebar .mn-icon {
  position: relative;
  top: 2px;
  width: 11px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23222'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M0 48C0 21.5 21.5 0 48 0l0 48V441.4l130.1-92.9c8.3-6 19.6-6 27.9 0L336 441.4V48H48V0H336c26.5 0 48 21.5 48 48V488c0 9-5 17.2-13 21.3s-17.6 3.4-24.9-1.8L192 397.5 37.9 507.5c-7.3 5.2-16.9 5.9-24.9 1.8S0 497 0 488V48z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.document-sidebar ul {
  min-width: 240px;
}
.document-sidebar ul li {
  position: relative;
}
.document-sidebar ul li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 1px;
  height: 100%;
  border-left: 1px dotted #7a7a7a;
}
.document-sidebar ul li.active > a, .document-sidebar ul li.active > .title {
  color: #0077b6;
  font-weight: 500;
}
.document-sidebar ul li.active > a .mn-icon, .document-sidebar ul li.active > .title .mn-icon {
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 511.95'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23a5e0ff; %7D .cls-1, .cls-2 %7B stroke-width: 0px; %7D .cls-2 %7B fill: %230077b6; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='28 34 28 478 192 364 353 478 353 27 28 27 28 34'/%3E%3Cpath class='cls-2' d='M0,48C0,21.5,21.5,0,48,0v441.4l130.1-92.9c8.3-6,19.6-6,27.9,0l130,92.9V48H48V0h288c26.5,0,48,21.5,48,48v440c0,9-5,17.2-13,21.3s-17.6,3.4-24.9-1.8l-154.1-110-154.1,110c-7.3,5.2-16.9,5.9-24.9,1.8s-13-12.3-13-21.3V48Z'/%3E%3C/svg%3E");
}
.document-sidebar ul li.active-line > a::before, .document-sidebar ul li.active-line > .title::before {
  border-color: #4297ff;
}
.document-sidebar ul li ul {
  padding-left: 20px;
}
.document-sidebar ul li.submenu.open > .mn-icon-toggle::after {
  transform: rotate(90deg);
}
.document-sidebar ul li.submenu.open > ul {
  display: block;
}
.document-sidebar ul li.submenu.open > .title {
  position: relative;
}
.document-sidebar ul li.submenu.open > .title::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 20px;
  width: 1px;
  height: calc(100% - 8px);
  border-left: 1px dotted #7A7A7A;
}
.document-sidebar ul li.submenu > ul {
  display: none;
}
.document-sidebar ul li .mn-icon-toggle {
  position: absolute;
  left: -4px;
  top: 5px;
  width: 9px;
  height: 9px;
  background: #f2f3f5;
  border: 1px solid #7A7A7A;
  z-index: 1;
  transition: all 0.3s ease;
  cursor: pointer;
}
.document-sidebar ul li .mn-icon-toggle::before, .document-sidebar ul li .mn-icon-toggle::after {
  content: "";
  position: absolute;
  background: #7A7A7A;
  transition: all 0.3s ease;
}
.document-sidebar ul li .mn-icon-toggle::before {
  width: 5px;
  height: 1px;
  top: 3px;
  left: 1px;
}
.document-sidebar ul li .mn-icon-toggle::after {
  height: 5px;
  width: 1px;
  top: 1px;
  left: 3px;
}
.document-sidebar ul li a, .document-sidebar ul li .title {
  display: grid;
  grid-template-columns: 17px auto;
  padding-left: 15px;
  padding-bottom: 8px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}
.document-sidebar ul li a::before, .document-sidebar ul li .title::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 2px;
  width: 10px;
  border-top: 1px dotted #7A7A7A;
}
.document-sidebar ul li a:hover, .document-sidebar ul li .title:hover {
  opacity: 0.6;
}
.document-sidebar .sidebar-title {
  margin-top: 10px;
  margin-bottom: 15px;
  padding-bottom: 2px;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  font-weight: 500;
}
.document-sidebar ul.sidebar-admin-tool li::before {
  content: none;
}
.document-sidebar ul.sidebar-admin-tool li.active a .mn-icon {
  background: transparent;
  color: #0077b6;
}
.document-sidebar ul.sidebar-admin-tool li a {
  padding-left: 0;
}
.document-sidebar ul.sidebar-admin-tool li a::before {
  content: none;
}
.document-sidebar ul.sidebar-admin-tool li.menu03 .mn-icon {
  font-size: 14px;
}
.document-sidebar ul.sidebar-admin-tool .mn-icon {
  background: transparent;
  top: auto;
  height: auto;
  color: #333;
}
.document-sidebar ul.sidebar-admin-tool .mn-icon.icon-workflow {
  width: 80px;
}
.document-sidebar ul.sidebar-admin-tool .mn-icon.icon-workflow i {
  margin-right: 7px;
}
.document-main-content {
  padding: 12px 0 0 20px;
  margin-left: auto;
  width: calc(100% - 360px);
  height: calc(100vh - 51px);
}
.document-main-content.doc-content-option2 .document-detail {
  height: calc(100% - 40px);
}
.document-main-content.doc-content-option3 .document-detail {
  height: 100%;
}
.document-main-content.doc-content-option4 .document-detail {
  height: calc(100% - 62px);
}
.document-main-content .tb-report-workflow .icon-toggle {
  border-color: #666;
  border-width: 1px;
}
.document-main-content .tb-report-workflow .icon-toggle::before, .document-main-content .tb-report-workflow .icon-toggle::after {
  background: #666;
}
.document-main-content .tb-report-workflow th, .document-main-content .tb-report-workflow td {
  vertical-align: middle;
}
.document-main-content .tb-report-workflow th {
  padding-top: 0;
  background: none;
  color: #0077b6;
  border-bottom: none;
  border-top: none;
}
.document-main-content .tb-report-workflow tr.shown + tr > td th {
  padding-top: 8px;
}
.document-main-content .tb-report-workflow tr.shown + tr > td td {
  background: #e5e5e5;
}
.document-main-content .tb-report-workflow tbody tr {
  transition: all 0.3s ease;
  cursor: pointer;
}
.document-main-content .tb-report-workflow tbody tr:hover {
  background: rgba(123, 140, 180, 0.3);
}
.document-main-content .tb-icon-file {
  width: 18px;
  height: 18px;
  display: inline-block;
  line-height: 1;
  position: relative;
  top: 0;
  margin-right: 4px;
}
.document-main-content .doc-file-menu .folder-action {
  transition: all 0.3s ease;
  cursor: pointer;
}
.document-main-content .doc-file-menu .folder-action .icon {
  margin-right: 5px;
  color: #333;
  transition: all 0.3s ease;
  font-size: 14px;
}
.document-main-content .doc-file-menu .folder-action .icon02 {
  font-size: 15px;
}
.document-main-content .doc-file-menu .folder-action .icon04 {
  width: 24px;
  height: 14px;
  line-height: 0;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 71.1 41.21'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23333; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M43.55,38.42c-.76,2.17-1.85,2.79-4.14,2.34-1.96-.38-3.91-.77-5.86-1.16-.49-.1-.84-.08-1.24.39-1.41,1.67-3.97,1.57-5.37-.13-.16-.2-.44-.42-.67-.42-1.92-.02-3.17-.9-3.78-2.72-.02-.07-.08-.12-.12-.18-2.79-.07-4.34-1.25-4.7-3.64-1.32-.25-2.31-1.03-2.93-2.23-.65-1.27-.45-2.49.33-3.68-1.68-2.09-3.04-4.51-5.91-5.36-.05.07-.15.2-.25.33-.1.14-.2.27-.34.47-2.85-1.8-5.67-3.59-8.58-5.43C3.59,11.34,7.16,5.7,10.77,0c2.88,1.82,5.72,3.62,8.59,5.44-.23.39-.43.72-.62,1.05,1.73,1.37,3.57,2.33,5.85,2.26,1.41-.04,2.82.13,4.23.16.24,0,.5-.17.74-.3.37-.21.69-.54,1.09-.65,2.24-.63,4.51-1.17,6.74-1.84.93-.28,1.77-.1,2.64.08,2.76.56,5.52,1.14,8.28,1.7,1.41.29,2.78.29,4.05-.59.51-.35,1.1-.61,1.69-.93-.22-.49-.41-.93-.64-1.45,3.07-1.42,6.11-2.84,9.22-4.28,2.84,6.12,5.65,12.16,8.48,18.26-3.1,1.44-6.13,2.84-9.19,4.27-.18-.31-.33-.57-.54-.92-.53.3-1.08.52-1.52.87-1.45,1.19-2.86,2.42-4.27,3.66-.16.14-.29.46-.25.67.36,2.36-.9,4.13-3.25,4.5-.14.02-.29.03-.24.03-.44.92-.75,1.78-1.24,2.53-.51.79-1.38,1.11-2.31,1.25-.19.03-.45.18-.52.34-.89,2.07-1.77,2.58-4.02,2.32-.07,0-.14,0-.21.02ZM17.61,8.24c-2.47,3.9-4.89,7.72-7.4,11.69,3.08.9,4.55,3.54,6.43,5.79,1.18-.74,2.18-1.83,3.71-1.72,1.52.12,2.55.94,3.16,2.36,1.31-1.09,2.7-1.42,4.16-.57,1.5.87,1.97,2.26,1.66,3.91,2.24.73,3,1.94,2.75,4.24-.02.18.12.45.28.58.82.68,1.27,1.54,1.27,2.59,0,.4.14.53.53.61,1.91.36,3.81.75,5.72,1.13.28.06.64.16.85.04.32-.18.57-.52.76-.84.03-.05-.35-.45-.59-.54-.7-.27-1.43-.45-2.14-.7-.26-.09-.64-.23-.71-.44-.12-.34-.17-.82-.03-1.13.21-.47.7-.53,1.2-.37,1.66.53,3.33,1.06,5,1.57.7.21,1.31-.03,1.53-.59.27-.69-.13-.98-.69-1.26-2.1-1.06-4.19-2.16-6.28-3.26-.76-.4-.98-1.06-.53-1.59.44-.54.97-.43,1.51-.15,2.48,1.29,4.96,2.58,7.43,3.87.92.48,1.68.3,2.17-.55.41-.7.16-1.35-.72-1.93-1.72-1.14-3.44-2.29-5.16-3.44-.69-.46-.87-.99-.54-1.52.34-.55.94-.61,1.66-.14,1.36.89,2.7,1.83,4.08,2.69.8.5,1.65.93,2.53,1.28,1.1.44,2.29-.4,2.17-1.57-.05-.52-.4-1.1-.78-1.47-2.41-2.28-4.86-4.5-7.3-6.73-.35-.32-.68-.72-1.1-.9-2.42-1.06-4.7-2.37-6.72-4.06-.92-.76-1.71-.86-2.65-.32-.37.21-.69.53-.99.84-.73.75-1.42,1.54-2.16,2.28-1.93,1.92-4.78,2.41-7.21,1.26-1.42-.67-1.69-1.76-.73-3,1.21-1.56,2.42-3.11,3.62-4.67.14-.18.26-.38.43-.64-1.51-.07-2.92-.13-4.32-.2-1.3-.07-2.55-.28-3.65-1.08-.67-.48-1.4-.87-2.18-1.34ZM60.58,20.41c-1.91-4.1-3.77-8.13-5.67-12.21-.63.34-1.24.6-1.77.97-1.62,1.12-3.4,1.03-5.19.69-2.24-.42-4.49-.84-6.7-1.41-1.95-.51-3.81-.49-5.68.25-.56.22-1.16.4-1.76.46-1.98.21-3.32,1.26-4.42,2.89-1.24,1.82-2.67,3.51-4.03,5.26,1.53.8,3.49.51,4.78-.72.51-.48,1.02-.99,1.45-1.54,1.06-1.37,2.4-2.28,4.08-2.75.7-.2,1.23-.18,1.81.3,2.49,2.05,5.16,3.82,8.19,4.97.93.35,1.9.6,2.84.9.92.29,1.13,1.11.45,1.8-.08.08-.14.16-.23.25,1.79,1.65,3.55,3.26,5.31,4.87,2.22-1.6,3.95-3.8,6.54-4.98ZM27.57,28.68c-.32-.41-.55-.87-.91-1.15-.53-.4-1.14-.26-1.61.16-1.75,1.57-3.49,3.16-5.22,4.76-.09.08-.15.27-.13.39.12.76.61,1.27,1.25,1.61.58.3,1.14.12,1.6-.33,1.46-1.43,2.92-2.86,4.36-4.31.26-.26.38-.64.66-1.12ZM26.07,37.54c.39-.22.85-.35,1.15-.66.91-.94,1.77-1.93,2.62-2.92.46-.54.42-1.29-.04-1.79-.48-.52-1.2-.66-1.77-.2-1.11.89-2.19,1.84-3.25,2.8-.51.46-.52,1.09-.27,1.68.26.63.78.97,1.55,1.09ZM18.28,30.88c.14-.06.51-.13.75-.34.77-.67,1.52-1.36,2.22-2.1.55-.58.53-1.36.04-1.92-.5-.58-1.22-.7-1.9-.25-.81.53-1.59,1.12-2.38,1.68-.59.42-.75,1.01-.55,1.67.21.69.98,1.26,1.82,1.26ZM28.46,38.52c.48.66,1.09.8,1.72.58.86-.3,1.23-1.08,1.41-1.9.13-.58-.22-1.01-.81-1.26-.76.84-1.52,1.69-2.31,2.58Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.document-main-content .doc-file-menu .folder-action .icon-move {
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 448'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23333; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M448,64h-160c-10.1,0-19.6-4.7-25.6-12.8l-19.2-25.6C231.1,9.5,212.1,0,192,0H64C28.7,0,0,28.7,0,64v320c0,35.3,28.7,64,64,64h384c35.3,0,64-28.7,64-64V128c0-35.3-28.7-64-64-64ZM386.37,274.78l-97.15,97.15c-7.59,7.59-19.92,7.59-27.51,0s-7.59-19.92,0-27.51l63.94-64h-186.22c-10.75,0-19.43-8.68-19.43-19.43s8.68-19.43,19.43-19.43h186.28l-64.06-64c-7.59-7.59-7.59-19.92,0-27.51,7.59-7.59,19.92-7.59,27.51,0l97.15,97.15c7.59,7.59,7.59,19.92,0,27.51l.06.06Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.document-main-content .doc-file-menu .folder-action:not(:last-child) {
  margin-right: 10px;
}
.document-main-content .doc-file-menu .folder-action:hover, .document-main-content .doc-file-menu .folder-action.active {
  color: #0077b6;
}
.document-main-content .doc-file-menu .folder-action:hover .icon, .document-main-content .doc-file-menu .folder-action.active .icon {
  color: #0077b6;
}
.document-main-content .doc-file-menu .folder-action:hover .icon04, .document-main-content .doc-file-menu .folder-action.active .icon04 {
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 71.1 41.21'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230077b6; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M43.55,38.42c-.76,2.17-1.85,2.79-4.14,2.34-1.96-.38-3.91-.77-5.86-1.16-.49-.1-.84-.08-1.24.39-1.41,1.67-3.97,1.57-5.37-.13-.16-.2-.44-.42-.67-.42-1.92-.02-3.17-.9-3.78-2.72-.02-.07-.08-.12-.12-.18-2.79-.07-4.34-1.25-4.7-3.64-1.32-.25-2.31-1.03-2.93-2.23-.65-1.27-.45-2.49.33-3.68-1.68-2.09-3.04-4.51-5.91-5.36-.05.07-.15.2-.25.33-.1.14-.2.27-.34.47-2.85-1.8-5.67-3.59-8.58-5.43C3.59,11.34,7.16,5.7,10.77,0c2.88,1.82,5.72,3.62,8.59,5.44-.23.39-.43.72-.62,1.05,1.73,1.37,3.57,2.33,5.85,2.26,1.41-.04,2.82.13,4.23.16.24,0,.5-.17.74-.3.37-.21.69-.54,1.09-.65,2.24-.63,4.51-1.17,6.74-1.84.93-.28,1.77-.1,2.64.08,2.76.56,5.52,1.14,8.28,1.7,1.41.29,2.78.29,4.05-.59.51-.35,1.1-.61,1.69-.93-.22-.49-.41-.93-.64-1.45,3.07-1.42,6.11-2.84,9.22-4.28,2.84,6.12,5.65,12.16,8.48,18.26-3.1,1.44-6.13,2.84-9.19,4.27-.18-.31-.33-.57-.54-.92-.53.3-1.08.52-1.52.87-1.45,1.19-2.86,2.42-4.27,3.66-.16.14-.29.46-.25.67.36,2.36-.9,4.13-3.25,4.5-.14.02-.29.03-.24.03-.44.92-.75,1.78-1.24,2.53-.51.79-1.38,1.11-2.31,1.25-.19.03-.45.18-.52.34-.89,2.07-1.77,2.58-4.02,2.32-.07,0-.14,0-.21.02ZM17.61,8.24c-2.47,3.9-4.89,7.72-7.4,11.69,3.08.9,4.55,3.54,6.43,5.79,1.18-.74,2.18-1.83,3.71-1.72,1.52.12,2.55.94,3.16,2.36,1.31-1.09,2.7-1.42,4.16-.57,1.5.87,1.97,2.26,1.66,3.91,2.24.73,3,1.94,2.75,4.24-.02.18.12.45.28.58.82.68,1.27,1.54,1.27,2.59,0,.4.14.53.53.61,1.91.36,3.81.75,5.72,1.13.28.06.64.16.85.04.32-.18.57-.52.76-.84.03-.05-.35-.45-.59-.54-.7-.27-1.43-.45-2.14-.7-.26-.09-.64-.23-.71-.44-.12-.34-.17-.82-.03-1.13.21-.47.7-.53,1.2-.37,1.66.53,3.33,1.06,5,1.57.7.21,1.31-.03,1.53-.59.27-.69-.13-.98-.69-1.26-2.1-1.06-4.19-2.16-6.28-3.26-.76-.4-.98-1.06-.53-1.59.44-.54.97-.43,1.51-.15,2.48,1.29,4.96,2.58,7.43,3.87.92.48,1.68.3,2.17-.55.41-.7.16-1.35-.72-1.93-1.72-1.14-3.44-2.29-5.16-3.44-.69-.46-.87-.99-.54-1.52.34-.55.94-.61,1.66-.14,1.36.89,2.7,1.83,4.08,2.69.8.5,1.65.93,2.53,1.28,1.1.44,2.29-.4,2.17-1.57-.05-.52-.4-1.1-.78-1.47-2.41-2.28-4.86-4.5-7.3-6.73-.35-.32-.68-.72-1.1-.9-2.42-1.06-4.7-2.37-6.72-4.06-.92-.76-1.71-.86-2.65-.32-.37.21-.69.53-.99.84-.73.75-1.42,1.54-2.16,2.28-1.93,1.92-4.78,2.41-7.21,1.26-1.42-.67-1.69-1.76-.73-3,1.21-1.56,2.42-3.11,3.62-4.67.14-.18.26-.38.43-.64-1.51-.07-2.92-.13-4.32-.2-1.3-.07-2.55-.28-3.65-1.08-.67-.48-1.4-.87-2.18-1.34ZM60.58,20.41c-1.91-4.1-3.77-8.13-5.67-12.21-.63.34-1.24.6-1.77.97-1.62,1.12-3.4,1.03-5.19.69-2.24-.42-4.49-.84-6.7-1.41-1.95-.51-3.81-.49-5.68.25-.56.22-1.16.4-1.76.46-1.98.21-3.32,1.26-4.42,2.89-1.24,1.82-2.67,3.51-4.03,5.26,1.53.8,3.49.51,4.78-.72.51-.48,1.02-.99,1.45-1.54,1.06-1.37,2.4-2.28,4.08-2.75.7-.2,1.23-.18,1.81.3,2.49,2.05,5.16,3.82,8.19,4.97.93.35,1.9.6,2.84.9.92.29,1.13,1.11.45,1.8-.08.08-.14.16-.23.25,1.79,1.65,3.55,3.26,5.31,4.87,2.22-1.6,3.95-3.8,6.54-4.98ZM27.57,28.68c-.32-.41-.55-.87-.91-1.15-.53-.4-1.14-.26-1.61.16-1.75,1.57-3.49,3.16-5.22,4.76-.09.08-.15.27-.13.39.12.76.61,1.27,1.25,1.61.58.3,1.14.12,1.6-.33,1.46-1.43,2.92-2.86,4.36-4.31.26-.26.38-.64.66-1.12ZM26.07,37.54c.39-.22.85-.35,1.15-.66.91-.94,1.77-1.93,2.62-2.92.46-.54.42-1.29-.04-1.79-.48-.52-1.2-.66-1.77-.2-1.11.89-2.19,1.84-3.25,2.8-.51.46-.52,1.09-.27,1.68.26.63.78.97,1.55,1.09ZM18.28,30.88c.14-.06.51-.13.75-.34.77-.67,1.52-1.36,2.22-2.1.55-.58.53-1.36.04-1.92-.5-.58-1.22-.7-1.9-.25-.81.53-1.59,1.12-2.38,1.68-.59.42-.75,1.01-.55,1.67.21.69.98,1.26,1.82,1.26ZM28.46,38.52c.48.66,1.09.8,1.72.58.86-.3,1.23-1.08,1.41-1.9.13-.58-.22-1.01-.81-1.26-.76.84-1.52,1.69-2.31,2.58Z'/%3E%3C/svg%3E");
}
.document-main-content .doc-file-menu .folder-action:hover .icon-move, .document-main-content .doc-file-menu .folder-action.active .icon-move {
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 448'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230077b6; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M448,64h-160c-10.1,0-19.6-4.7-25.6-12.8l-19.2-25.6C231.1,9.5,212.1,0,192,0H64C28.7,0,0,28.7,0,64v320c0,35.3,28.7,64,64,64h384c35.3,0,64-28.7,64-64V128c0-35.3-28.7-64-64-64ZM386.37,274.78l-97.15,97.15c-7.59,7.59-19.92,7.59-27.51,0s-7.59-19.92,0-27.51l63.94-64h-186.22c-10.75,0-19.43-8.68-19.43-19.43s8.68-19.43,19.43-19.43h186.28l-64.06-64c-7.59-7.59-7.59-19.92,0-27.51,7.59-7.59,19.92-7.59,27.51,0l97.15,97.15c7.59,7.59,7.59,19.92,0,27.51l.06.06Z'/%3E%3C/svg%3E");
}
.document-main-content .doc-file-menu .folder-action .option-class {
  min-width: 140px;
}
.document-main-content .doc-upload-search > div:not(:last-child) {
  margin-right: 12px;
}
.document-main-content .doc-upload-search .sum-select {
  padding-top: 4px;
}
.document-main-content .gr-button-upload {
  background: #219ebc;
  color: #fff;
  border-radius: 4px;
  width: 140px;
  position: relative;
}
.document-main-content .gr-button-upload .button {
  height: 100%;
}
.document-main-content .gr-button-upload .button-upload {
  height: 100%;
  width: calc(100% - 32px);
  padding: 4px 4px 2px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
}
.document-main-content .gr-button-upload .button-upload i {
  margin-right: 8px;
  transition: all 0.3s ease;
}
.document-main-content .gr-button-upload .button-upload:hover {
  letter-spacing: 0.1em;
}
.document-main-content .gr-button-upload .icon-arrown-upload {
  height: 100%;
  width: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23fff'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath 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'/%3E%3C/svg%3E") no-repeat center/11px auto;
  transition: all 0.3s ease;
  cursor: pointer;
}
.document-main-content .gr-button-upload .icon-arrown-upload.active {
  transform: rotate(-180deg);
}
.document-main-content .gr-button-upload .icon-arrown-upload:hover {
  opacity: 0.6;
}
.document-main-content .doc-search {
  width: 250px;
  margin: 0px 15px 10px 0px;
}
.document-main-content .doc-search input[name=search] {
  background: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve' fill = '%23999999'%3E%3Cpath d='M700,733.3c-8.5,0-17.1-3.3-23.6-9.8L554,601c-53,42.5-118.4,65.6-187.3,65.6c-80.1,0-155.5-31.2-212.1-87.9 c-56.7-56.7-87.9-132-87.9-212.1s31.2-155.5,87.9-212.1c56.7-56.7,132-87.9,212.1-87.9s155.5,31.2,212.1,87.9 c56.7,56.7,87.9,132,87.9,212.1c0,68.9-23.1,134.2-65.5,187.2l122.4,122.6c13,13,13,34.1,0,47.1C717.1,730.1,708.5,733.3,700,733.3z M366.7,133.3C238,133.3,133.3,238,133.3,366.7C133.3,495.3,238,600,366.7,600C495.3,600,600,495.3,600,366.7 C600,238,495.3,133.3,366.7,133.3z M502.3,419c-18.4,0-33.3-14.9-33.3-33.3c0-73.5-59.8-133.3-133.3-133.3 c-18.4,0-33.3-14.9-33.3-33.3s14.9-33.3,33.3-33.3c110.3,0,200,89.7,200,200C535.7,404.1,520.7,419,502.3,419z'/%3E%3C/svg%3E") no-repeat right 8px center/16px auto #fff;
  padding-left: 8px;
  border: 1px solid #BCC3D5;
  border-radius: 4px;
  color: initial;
}
.document-main-content .doc-search.searchadmintool {
  margin-bottom: 12px;
}
.document-main-content .breadcrumb-list {
  display: flex;
  margin-top: 5px;
  margin-bottom: 10px;
  position: relative;
  z-index: 5;
}
.document-main-content .breadcrumb-list > li {
  position: relative;
  z-index: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.document-main-content .breadcrumb-list > li:not(:last-child) {
  padding-right: 15px;
  margin-right: 5px;
}
.document-main-content .breadcrumb-list > li:not(:last-child)::before {
  content: "";
  position: absolute;
  right: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23999999'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M278.6 233.4c12.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 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.document-main-content .breadcrumb-list > li:hover {
  opacity: 0.6;
}
.document-main-content .breadcrumb-list > li.active {
  color: #0077b6;
  font-weight: 500;
}
.document-main-content .breadcrumb-list > li.first::before {
  content: none;
}
.document-main-content .breadcrumb-list > li.more-list-dropdown:hover {
  opacity: 1;
}
.document-main-content .breadcrumb-list > li.more-list-dropdown .option-class {
  width: 270px;
}
.document-main-content .breadcrumb-list > li.more-list-dropdown .cm-doc-dropdown.doc-dropdown-sort > ul {
  left: -64px;
  transform: translate(0);
}
.document-main-content .breadcrumb-list > li.more-list-dropdown .cm-doc-dropdown.doc-dropdown-sort > ul li.lastRow {
  border: none;
}
.document-top {
  padding-right: 15px;
  z-index: 6;
}
.document-top2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.document-top2 .sum-select {
  margin-right: 15px;
  margin-top: 4px;
  margin-bottom: 10px;
}
.document-detail {
  background: #fff;
  padding: 15px 7px 15px;
  height: calc(100% - 66px);
  position: relative;
}
.document-detail.docdetailAdmintool {
  height: calc(100% - 39px);
}
.document-detail.docdetailAdmintoolPersonal {
  height: calc(100% - 73px);
}
.document-detail .gr-title-file {
  color: #0077b6;
  margin-bottom: 5px;
  padding-bottom: 5px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}
.document-detail .gr-title-file .item {
  padding-left: 6px;
  padding-right: 6px;
}
.document-detail .gr-title-file .item .icon-sort {
  display: inline-block;
  width: 8px;
  height: 8px;
  transition: all 0.3s ease;
}
.document-detail .gr-title-file .item .icon-sort.icon-up-sort {
  background: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 320.1 192.1' style='enable-background:new 0 0 320.1 192.1;' xml:space='preserve' fill='%230077b6'%3E%3Cpath d='M182.7,9.4c-12.5-12.5-32.8-12.5-45.3,0l-128,128c-9.2,9.2-11.9,22.9-6.9,34.9s16.6,19.8,29.6,19.8h256 c12.9,0,24.6-7.8,29.6-19.8s2.2-25.7-6.9-34.9l-128-128L182.7,9.4z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.document-detail .gr-title-file .item .icon-sort.icon-down-sort {
  background: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 320.1 192.1' style='enable-background:new 0 0 320.1 192.1;' xml:space='preserve' fill='%230077b6'%3E%3Cpath d='M182.7,9.4c-12.5-12.5-32.8-12.5-45.3,0l-128,128c-9.2,9.2-11.9,22.9-6.9,34.9s16.6,19.8,29.6,19.8h256 c12.9,0,24.6-7.8,29.6-19.8s2.2-25.7-6.9-34.9l-128-128L182.7,9.4z'/%3E%3C/svg%3E") no-repeat center/contain;
  transform: rotate(-180deg);
}
.document-detail .gr-title-file .item01 {
  width: calc(80% - 630px);
}
.document-detail .gr-title-file .item02 {
  width: 180px;
}
.document-detail .gr-title-file .item03 {
  width: 120px;
}
.document-detail .gr-title-file .item04 {
  width: 150px;
}
.document-detail .gr-title-file .item05 {
  width: 20%;
}
.document-detail .gr-title-file .item06 {
  width: 180px;
}
.document-detail .gr-title-file .doc-filter {
  color: #0c0c0c;
  line-height: 1;
  cursor: pointer;
  padding-left: 22px;
  padding-bottom: 1px;
  transition: all 0.3s ease;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 5.25C16.2029 5.25 16.3972 5.33222 16.5384 5.47789L20.5384 9.60289C20.8268 9.90025 20.8195 10.3751 20.5221 10.6634C20.2247 10.9518 19.7499 10.9445 19.4616 10.6471L16.75 7.8508L16.75 18C16.75 18.4142 16.4142 18.75 16 18.75C15.5858 18.75 15.25 18.4142 15.25 18L15.25 7.8508L12.5384 10.6471C12.2501 10.9445 11.7753 10.9518 11.4779 10.6634C11.1805 10.3751 11.1732 9.90025 11.4616 9.60289L15.4616 5.47789C15.6028 5.33222 15.7971 5.25 16 5.25ZM8 5.25C8.41421 5.25 8.75 5.58579 8.75 6L8.75 16.1492L11.4616 13.3529C11.7499 13.0555 12.2247 13.0482 12.5221 13.3366C12.8195 13.6249 12.8268 14.0997 12.5384 14.3971L8.53843 18.5221C8.39717 18.6678 8.20291 18.75 8 18.75C7.79709 18.75 7.60283 18.6678 7.46158 18.5221L3.46158 14.3971C3.17322 14.0997 3.18053 13.6249 3.47789 13.3366C3.77526 13.0482 4.25007 13.0555 4.53843 13.3529L7.25 16.1492L7.25 6C7.25 5.58579 7.58579 5.25 8 5.25Z' fill='%23999'/%3E%3C/svg%3E") no-repeat top -3px left/20px auto;
}
.document-detail .gr-title-file .doc-filter:hover, .document-detail .gr-title-file .doc-filter.active {
  color: #0077b6;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 5.25C16.2029 5.25 16.3972 5.33222 16.5384 5.47789L20.5384 9.60289C20.8268 9.90025 20.8195 10.3751 20.5221 10.6634C20.2247 10.9518 19.7499 10.9445 19.4616 10.6471L16.75 7.8508L16.75 18C16.75 18.4142 16.4142 18.75 16 18.75C15.5858 18.75 15.25 18.4142 15.25 18L15.25 7.8508L12.5384 10.6471C12.2501 10.9445 11.7753 10.9518 11.4779 10.6634C11.1805 10.3751 11.1732 9.90025 11.4616 9.60289L15.4616 5.47789C15.6028 5.33222 15.7971 5.25 16 5.25ZM8 5.25C8.41421 5.25 8.75 5.58579 8.75 6L8.75 16.1492L11.4616 13.3529C11.7499 13.0555 12.2247 13.0482 12.5221 13.3366C12.8195 13.6249 12.8268 14.0997 12.5384 14.3971L8.53843 18.5221C8.39717 18.6678 8.20291 18.75 8 18.75C7.79709 18.75 7.60283 18.6678 7.46158 18.5221L3.46158 14.3971C3.17322 14.0997 3.18053 13.6249 3.47789 13.3366C3.77526 13.0482 4.25007 13.0555 4.53843 13.3529L7.25 16.1492L7.25 6C7.25 5.58579 7.58579 5.25 8 5.25Z' fill='%230077b6'/%3E%3C/svg%3E");
}
.document-detail .gr-title-file .list-change {
  width: 17px;
  height: 17px;
  cursor: pointer;
}
.document-detail .gr-title-file .list-change:first-child {
  padding-bottom: 1px;
}
.document-detail .gr-title-file .list-change.list01 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23999999'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z'/%3E%3C/svg%3E") no-repeat top center/17px auto;
}
.document-detail .gr-title-file .list-change.list01.active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%230077b6'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z'/%3E%3C/svg%3E");
}
.document-detail .gr-title-file .list-change.list02 {
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23999999; fill-rule: evenodd; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M685.71,0h-114.29c-63.11,0-114.29,51.17-114.29,114.29v114.29c0,63.11,51.17,114.29,114.29,114.29h114.29c63.11,0,114.29-51.17,114.29-114.29v-114.29c0-63.11-51.17-114.29-114.29-114.29h0ZM685.71,457.14h-114.29c-63.11,0-114.29,51.17-114.29,114.29v114.29c0,63.11,51.17,114.29,114.29,114.29h114.29c63.11,0,114.29-51.17,114.29-114.29v-114.29c0-63.11-51.17-114.29-114.29-114.29h0ZM228.57,457.14h-114.29c-63.11,0-114.29,51.17-114.29,114.29v114.29c0,63.11,51.17,114.29,114.29,114.29h114.29c63.11,0,114.29-51.17,114.29-114.29v-114.29c0-63.11-51.17-114.29-114.29-114.29h0ZM228.57,0h-114.29C51.17,0,0,51.17,0,114.29v114.29c0,63.11,51.17,114.29,114.29,114.29h114.29c63.11,0,114.29-51.17,114.29-114.29v-114.29C342.86,51.17,291.69,0,228.57,0h0Z'/%3E%3C/svg%3E") no-repeat left/16px auto;
}
.document-detail .gr-title-file .list-change.list02.active {
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230077b6; fill-rule: evenodd; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M685.71,0h-114.29c-63.11,0-114.29,51.17-114.29,114.29v114.29c0,63.11,51.17,114.29,114.29,114.29h114.29c63.11,0,114.29-51.17,114.29-114.29v-114.29c0-63.11-51.17-114.29-114.29-114.29h0ZM685.71,457.14h-114.29c-63.11,0-114.29,51.17-114.29,114.29v114.29c0,63.11,51.17,114.29,114.29,114.29h114.29c63.11,0,114.29-51.17,114.29-114.29v-114.29c0-63.11-51.17-114.29-114.29-114.29h0ZM228.57,457.14h-114.29c-63.11,0-114.29,51.17-114.29,114.29v114.29c0,63.11,51.17,114.29,114.29,114.29h114.29c63.11,0,114.29-51.17,114.29-114.29v-114.29c0-63.11-51.17-114.29-114.29-114.29h0ZM228.57,0h-114.29C51.17,0,0,51.17,0,114.29v114.29c0,63.11,51.17,114.29,114.29,114.29h114.29c63.11,0,114.29-51.17,114.29-114.29v-114.29C342.86,51.17,291.69,0,228.57,0h0Z'/%3E%3C/svg%3E");
}
.document-detail .gr-title-file .doc-option > div:not(:last-child) {
  margin-right: 10px;
}
.document-detail .note-color {
  margin-top: 15px;
}
.document-detail .note-color .color-in-progress::before {
  background: #19B5FE;
}
.document-detail .note-color .color-pending::before {
  background: #CA6924;
}
.document-detail .note-color .color-approved::before {
  background: #26A65B;
}
.document-detail .note-color .color-rejected::before {
  background: #CF000F;
}
.document-detail-folder .title-folder {
  font-size: 16px;
  max-width: 770px;
}
.document-detail-folder .title-folder.title-file {
  margin-bottom: 20px;
  max-width: none;
}
.document-detail-folder .title-folder.title-file input[type=text] {
  width: 100%;
  padding-right: 16px;
}
.document-detail-folder .title-folder input[type=text] {
  width: calc(100% - 22px);
  max-width: 750px;
}
.document-detail-folder .title-folder .icon {
  color: #7A7A7A;
  margin-right: 5px;
}
.document-detail-folder .title-folder .status-file {
  position: relative;
  top: -1px;
  padding: 1px 8px 2px;
  border-radius: 4px;
  font-size: 11px;
  background: #ececec;
  margin-left: 8px;
}
.document-detail-folder .title-folder .status-file.version-file {
  color: #0077b6;
  background: rgba(69, 98, 167, 0.1);
}
.document-detail-folder .title-folder .icon-econtract {
  font-size: 11px;
  color: #0077b6;
  margin-left: 10px;
}
.document-detail-folder p.title-folder {
  max-width: none;
  width: calc(100% - 140px);
  position: relative;
  padding-left: 20px;
}
.document-detail-folder p.title-folder .icon {
  position: absolute;
  left: 0;
  top: 0;
}
.document-detail-folder p.title-folder .icon.icon-folder {
  width: 16px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.document-detail-folder .audit-log-editFile {
  margin-top: 25px;
}
.document-detail-folder .folder-col2 .item-folder {
  margin-bottom: 20px;
}
.document-detail-folder .item-folder:not(:last-child) {
  margin-bottom: 10px;
}
.document-detail-folder .item-folder .title {
  color: #0077b6;
  font-weight: 600;
  margin-bottom: 3px;
  background: #fff;
}
.document-detail-folder .item-folder .title.title-location {
  max-width: 770px;
}
.document-detail-folder .item-folder .title.title-location .icon {
  cursor: pointer;
  transition: all 0.3s ease;
}
.document-detail-folder .item-folder .title.title-location .icon:hover {
  opacity: 0.7;
}
.document-detail-folder .item-folder .box-txt .vsb-main {
  width: 100%;
  max-width: 770px;
}
.document-detail-folder .item-folder .box-txt .vsb-main button {
  max-width: 770px !important;
}
.document-detail-folder .item-folder .box-txt > input[type=text], .document-detail-folder .item-folder .box-txt > input[type=number] {
  width: 100%;
  max-width: 770px;
}
.document-detail-folder .item-folder .txt-permissions .department-code {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.document-detail-folder .item-folder .txt-permissions .department-code:hover .icon {
  visibility: visible;
  opacity: 1;
}
.document-detail-folder .item-folder .txt-permissions .department-code .icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-size: 10px;
  background: #ae1f19;
  border-radius: 50%;
  right: 0;
  top: 0;
  color: #fff;
  transition: all 0.2s ease;
  visibility: hidden;
  opacity: 0;
}
.document-detail-folder .item-folder .txt-permissions .gr-dr-remove {
  max-width: 770px;
}
.document-detail-folder .item-folder .gr-dr-remove {
  margin-top: 5px;
}
.document-detail-folder .item-folder .gr-dr-remove input:focus {
  box-shadow: none;
}
.document-detail-folder .item-folder .gr-dr-remove .txt-all {
  font-weight: 500;
}
.document-detail-folder .item-folder .gr-dr-remove .dr-remove {
  padding: 1px 8px 2px;
  border-radius: 4px;
  font-size: 11px;
  color: #CF000F;
  background: rgba(207, 0, 15, 0.15);
  width: 65px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.document-detail-folder .item-folder .gr-dr-remove .dr-remove:hover {
  opacity: 0.7;
}
.document-detail-folder .detail-audit-log .column, .document-detail-folder .audit-item .column {
  width: 33.3333333333%;
  max-width: 300px;
}
.document-detail-folder .audit-item {
  border-bottom: 1px solid #CCC;
  padding-bottom: 7px;
  padding-top: 7px;
}
.document-detail-folder .detail-audit-log {
  margin-top: 10px;
}
.document-detail .audit-log-title {
  margin-bottom: 15px;
}
.document-detail .audit-log-search > div:not(:last-child) {
  margin-right: 15px;
}
.document-detail .audit-log-search .audit-log-select .vsb-menu li {
  font-size: 13px;
}
.document-detail .ct-item-large {
  margin-left: -8px;
  margin-right: -8px;
}
.document-detail .ct-item-large .item {
  width: calc(12.5% - 16px);
  margin: 0 8px 20px;
  cursor: pointer;
}
.document-detail .ct-item-large .box-text .ttl {
  text-align: center;
}
@supports (-webkit-line-clamp: 2) {
  .document-detail .ct-item-large .box-text .ttl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
.document-detail .ct-item-large .gr-images {
  padding: 10px 10px 10px;
  border-radius: 6px;
  margin-bottom: 0;
  height: 151px;
  position: relative;
  transition: all 0.3s ease;
}
.document-detail .ct-item-large .gr-images .doc-action-viewlarge {
  position: absolute;
  bottom: 0;
  right: 10px;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
.document-detail .ct-item-large .gr-images:hover {
  background: #f2f2f2;
}
.document-detail .ct-item-large .gr-images:hover .doc-action-viewlarge {
  bottom: 10px;
  opacity: 1;
  visibility: visible;
}
.document-detail .ct-item-large .gr-images:hover .doc-action-viewlarge .document-dropdown-option .icon, .document-detail .ct-item-large .gr-images:hover .icon-share-file {
  margin-bottom: 6px;
}
.document-detail .ct-item-large .gr-images:hover .doc-icon-check input[type=checkbox] {
  opacity: 1;
  visibility: visible;
}
.document-detail .ct-item-large .gr-images .doc-icon-check {
  position: absolute;
  left: 9px;
  top: 5px;
}
.document-detail .ct-item-large .gr-images .doc-icon-check input[type=checkbox] {
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
.document-detail .ct-item-large .gr-images .doc-icon-check input[type=checkbox]:checked {
  opacity: 1;
  visibility: visible;
}
.document-detail .ct-item-large .gr-images .img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.document-detail .ct-item-large .gr-images .img img {
  max-height: 100%;
  max-width: 102px;
}
.document-detail .ct-item-large .icon-upload-file, .document-detail .ct-item-large .doc-action-viewlarge .document-dropdown-option .icon, .document-detail .ct-item-large .icon-share-file {
  width: 28px;
  height: 28px;
  background: #ccc;
  border-radius: 4px;
  font-size: 15px;
  transition: all 0.3s ease;
}
.document-detail .ct-item-large .icon-upload-file a, .document-detail .ct-item-large .doc-action-viewlarge .document-dropdown-option .icon a, .document-detail .ct-item-large .icon-share-file a {
  transition: all 0.3s ease;
  line-height: 1;
}
.document-detail .ct-item-large .icon-upload-file:hover, .document-detail .ct-item-large .icon-upload-file.active, .document-detail .ct-item-large .doc-action-viewlarge .document-dropdown-option .icon:hover, .document-detail .ct-item-large .doc-action-viewlarge .document-dropdown-option .icon.active, .document-detail .ct-item-large .icon-share-file:hover, .document-detail .ct-item-large .icon-share-file.active {
  color: #0077b6;
}
.document-detail .ct-item-large .icon-upload-file:hover a, .document-detail .ct-item-large .icon-upload-file.active a, .document-detail .ct-item-large .doc-action-viewlarge .document-dropdown-option .icon:hover a, .document-detail .ct-item-large .doc-action-viewlarge .document-dropdown-option .icon.active a, .document-detail .ct-item-large .icon-share-file:hover a, .document-detail .ct-item-large .icon-share-file.active a {
  color: #0077b6;
}
.document-detail .ct-item-large .icon-version {
  position: absolute;
  top: 6px;
  right: 10px;
  margin-left: 0;
}
.document-detail .ct-item-large .icon-version.icon-status {
  right: 60px;
  width: 86px;
  text-align: center;
}
.document-detail .ct-item-large .gr-stt-version.noVersion .icon-status {
  right: 10px;
}
.document-detail .ct-item-large .doc-action-viewlarge .document-dropdown-option .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -8px;
}
.document-detail .detail-uploadfile {
  border: 1px dashed #707070;
  padding: 10px;
  margin-bottom: 20px;
  min-height: 100px;
  cursor: pointer;
}
.document-detail .document-h3 {
  color: #0077b6;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.5);
  padding-bottom: 10px;
}
.document-detail .document-auditLog .gr-title-file .item-audit01 {
  width: 20%;
}
.document-detail .document-auditLog .gr-title-file .item-audit02 {
  width: 20%;
}
.document-detail .document-auditLog .gr-title-file .item-audit03 {
  width: 60%;
}
.document-detail .document-auditLog .detail-content .column-audit01 {
  width: 20%;
}
.document-detail .document-auditLog .detail-content .column-audit02 {
  width: 20%;
}
.document-detail .document-auditLog .detail-content .column-audit03 {
  width: 60%;
}
.document-detail .doc-content-workFlow {
  width: 49%;
}
.document-detail .doc-content-workFlow h3 {
  color: #0077b6;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 15px;
}
.document-detail .doc-content-workFlow h3.view-ai-overview {
  margin-bottom: 7px;
}
.document-detail .doc-content-workFlow.oneBoxApproval {
  width: 100%;
}
.document-detail .doc-content-workFlow .workflow-item {
  padding-right: 5px;
}
.document-detail .doc-content-workFlow.view-ai-overview .related-content, .document-detail .doc-content-workFlow.view-ai-overview .approval-content {
  height: calc(100vh - 380px);
}
.document-detail .folder-col2 .doc-content-workFlow {
  width: calc(50% - 5px);
}
.document-detail .workflow-item:not(:last-child) {
  margin-bottom: 10px;
}
.document-detail .workflow-item .img {
  width: 55px;
  height: 60px;
  overflow: hidden;
}
.document-detail .workflow-item .img img {
  max-height: 100%;
  max-width: 50px;
}
.document-detail .workflow-item .box-txt {
  width: calc(100% - 55px);
  padding-top: 6px;
}
.document-detail .workflow-item .box-txt .employee-code {
  margin-bottom: 5px;
  font-weight: 500;
}
.document-detail .workflow-item .wf-username {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: relative;
}
.document-detail .workflow-item .wf-username:not(:last-child) {
  margin-bottom: 10px;
}
.document-detail .workflow-item .wf-username.active {
  background: rgba(0, 0, 0, 0.1);
}
.document-detail .workflow-item .wf-username .icon-delect {
  position: absolute;
  top: 6px;
  right: 8px;
  color: #CF000F;
  cursor: pointer;
  transition: all 0.3s ease;
}
.document-detail .workflow-item .wf-username .icon-delect:hover {
  opacity: 0.6;
}
.document-detail .workflow-item .note {
  margin-top: 10px;
}
.document-detail .workflow-item.wf-item-content {
  height: 266px;
}
.document-detail .wf-dropdown {
  width: 100%;
}
.document-detail .wf-dropdown .vsb-main {
  width: 100%;
  max-width: 100%;
}
.document-detail .wf-dropdown .vsb-main button {
  max-width: 100% !important;
}
.document-detail .document-workFlow-approvals textarea {
  margin-top: 10px;
}
.document-detail .box-stt-time .doc-status {
  width: 90px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 5px;
  text-align: center;
  margin-left: auto;
  margin-bottom: 5px;
  font-size: 12px;
}
.document-detail .box-stt-time .doc-status.bg-01 {
  background: rgba(38, 166, 91, 0.1);
  color: #26A65B;
}
.document-detail .box-stt-time .doc-status.bg-02 {
  background: rgba(207, 0, 15, 0.15);
  color: #CF000F;
}
.document-detail .box-stt-time .doc-time {
  font-size: 12px;
  color: #7A7A7A;
}
.document-detail .list-column li {
  position: relative;
  padding-left: 12px;
}
.document-detail .list-column li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #999;
}
.document-detail .list-column li.active {
  color: #0077b6;
}
.document-detail .list-column li.active::before {
  background: #0077b6;
}
.document-detail .list-column li.activeReject {
  color: #CF000F;
}
.document-detail .list-column li.activeReject::before {
  background: #CF000F;
}
.document-detail .document-workFlow-dashboardReports .gr-title-file .it-das-report01 {
  width: 5%;
}
.document-detail .document-workFlow-dashboardReports .gr-title-file .it-das-report02 {
  width: 20%;
}
.document-detail .document-workFlow-dashboardReports .gr-title-file .it-das-report03 {
  width: 25%;
}
.document-detail .document-workFlow-dashboardReports .gr-title-file .it-das-report04 {
  width: 18%;
}
.document-detail .document-workFlow-dashboardReports .gr-title-file .it-das-report05 {
  width: 20%;
}
.document-detail .document-workFlow-dashboardReports .gr-title-file .it-das-report06 {
  width: 12%;
}
.document-detail .document-workFlow-dashboardReports .detail-content .ct-item:first-child {
  border-top: 1px solid #ccc;
}
.document-detail .document-workFlow-dashboardReports .detail-content .cl-das-report01 {
  width: 5%;
}
.document-detail .document-workFlow-dashboardReports .detail-content .cl-das-report02 {
  width: 20%;
}
.document-detail .document-workFlow-dashboardReports .detail-content .cl-das-report03 {
  width: 25%;
}
.document-detail .document-workFlow-dashboardReports .detail-content .cl-das-report04 {
  width: 18%;
}
.document-detail .document-workFlow-dashboardReports .detail-content .cl-das-report05 {
  width: 20%;
}
.document-detail .document-workFlow-dashboardReports .detail-content .cl-das-report06 {
  width: 12%;
}
.document-detail .doc-line-progress {
  width: 100%;
  height: 21px;
  position: relative;
}
.document-detail .doc-line-progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: #d9d9d9;
  border-radius: 20px;
}
.document-detail .doc-line-progress .line-progress-finish {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 20px;
  height: 6px;
}
.document-detail .doc-line-progress .line-progress-finish.class-percent .number {
  left: 0;
  transform: none;
}
.document-detail .doc-line-progress .number {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
}
.document-detail .permission-item.pm-item-content {
  height: 95px;
  max-width: 770px;
}
.document-detail .permission-item .box-txt {
  padding-top: 6px;
}
.document-detail .permission-item .box-txt .employee-code {
  font-weight: 500;
  width: calc(100% - 21px);
}
.document-detail .permission-item .box-txt input[type=checkbox] {
  top: 1px;
}
.document-detail .permission-item .box-txt input[type=checkbox]:focus {
  box-shadow: none;
}
.document-detail .permission-item .wf-username .icon-delect {
  color: #cf000f;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.document-detail .box-add-recipients .check-box {
  margin-top: 15px;
}
.document-detail .box-add-recipients .select-email {
  margin-top: 15px;
}
.document-detail .box-add-recipients .select-email .vsb-main {
  width: 100%;
  max-width: 490px;
}
.document-detail .box-add-recipients .add-email {
  margin-top: 15px;
  max-width: 490px;
}
.document-detail .box-add-recipients .add-email .name, .document-detail .box-add-recipients .add-email .email {
  width: calc(50% - 29px);
  display: block;
}
.document-detail .box-add-recipients .add-email .name input, .document-detail .box-add-recipients .add-email .email input {
  width: 100%;
}
.document-detail .box-add-recipients .add-email .name {
  margin-right: 10px;
}
.document-detail .box-add-recipients .add-email .icon-add {
  margin-left: 5px;
  cursor: pointer;
}
.document-detail .box-add-recipients .permission-item.pm-item-content {
  margin-top: 15px;
  max-width: 500px;
}
.document-detail .box-add-recipients .permission-item.pm-item-content .box-txt .icon {
  cursor: pointer;
  color: #cf000f;
  transition: all 0.3s ease;
}
.document-detail .box-add-recipients .permission-item.pm-item-content .box-txt .icon:hover {
  opacity: 0.6;
}
.document-text-uploadfile {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #219ebc;
  border: 1px dashed #219ebc;
  border-radius: 4px;
  padding: 10px 20px;
  background: #fff;
}
.document-text-uploadfile .icon {
  display: block;
  text-align: center;
  font-size: 30px;
  line-height: 1.2;
}
.document-container-right {
  height: calc(100% - 25px);
  padding: 0 8px;
}
.document-container-right.container-h100 {
  height: 100%;
}
.document-detail-viewLarge .gr-title-file {
  color: #0C0C0C;
  padding-left: 0;
  padding-right: 0;
}
.document-bottom-container {
  position: absolute;
  right: 15px;
  left: 15px;
  bottom: 10px;
}
.document-bottom-container .doc-export-report a {
  color: #0077b6;
}
.document-detail-folder {
  position: relative;
}
.document-detail-folder .gr-icon-folder-detail {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.document-detail-folder .gr-icon-folder-detail li {
  width: 28px;
  height: 28px;
  background: #ECECEC;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.document-detail-folder .gr-icon-folder-detail li a {
  transition: all 0.3s ease;
}
.document-detail-folder .gr-icon-folder-detail li:not(:last-child) {
  margin-right: 8px;
}
.document-detail-folder .gr-icon-folder-detail li:hover {
  color: #0077b6;
}
.document-detail-folder .gr-icon-folder-detail li:hover a {
  color: #0077b6;
}
.document-detail-folder.detail-addnewform .folder-col2 .item-folder {
  width: calc(50% - 8px);
  max-width: none;
}
.document-detail-folder.detail-addnewform .doc-content-workFlow {
  width: 100%;
}
.document-detail-folder.detail-addnewform .title-folder {
  width: calc(50% - 15px);
}
.document-detail-folder.detail-addnewform .title-folder .gr-add-file-name {
  max-width: none;
}
.document-detail-folder.detail-addnewform .title-folder .gr-add-file-name .ip-add-file-name {
  max-width: none;
}
.document-detail-folder.detail-addnewform .title-folder .icon-edit-file {
  right: 0;
}

@keyframes fadeIn {
  from {
    color: transparent;
  }
  to {
    color: #0077b6;
  }
}
.animation {
  -webkit-animation: fadeIn 0.3s ease-in-out;
  -moz-animation: fadeIn 0.3s ease-in-out;
  -o-animation: fadeIn 0.3s ease-in-out;
  animation: fadeIn 0.3s ease-in-out;
}

.detail-content .column {
  width: 20%;
  position: relative;
  padding: 8px 6px 6px 6px;
}
.detail-content .column .icon-file {
  width: 18px;
  height: 18px;
  display: inline-block;
  line-height: 1;
}
.detail-content .column .icon-file input[type=checkbox] {
  top: 2px;
}
.detail-content .column .icon-file + label {
  width: calc(100% - 85px);
  display: inline-block;
}
.detail-content .column .icon-file + label .txt-ct {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.detail-content .column .icon-file + label .txt-ct i {
  line-height: 0;
  margin-left: 5px;
}
.detail-content .column .icon-file + label .name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-content .column label {
  position: relative;
  top: -2px;
}
.detail-content .column .icon-status {
  display: inline-block;
  text-align: center;
  width: 86px;
}
.detail-content .column01 {
  width: calc(80% - 630px);
  padding: 0;
}
.detail-content .column01 .icon-input {
  padding: 8px 2px 6px 6px;
}
.detail-content .column01 .icon-input input[type=checkbox] {
  top: 2px;
}
.detail-content .column01 .b-txt {
  padding: 8px 6px 6px 0;
  width: calc(100% - 29px);
}
.detail-content .column02 {
  width: 180px;
}
.detail-content .column03 {
  width: 120px;
}
.detail-content .column04 {
  width: 150px;
}
.detail-content .column05 {
  width: 20%;
}
.detail-content .column06 {
  width: 180px;
}
.detail-content .ct-item {
  transition: all 0.3s ease;
  border-bottom: 1px solid #CCC;
  position: relative;
  align-items: center;
  cursor: pointer;
}
.detail-content .ct-item:hover {
  background: rgba(123, 140, 180, 0.3);
}
.detail-content .ct-item .icon-stt {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 5px;
  font-size: 10px;
  background: rgba(38, 166, 91, 0.2);
  color: #26A65B;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 2px 2px;
}

@media screen and (max-width: 1600px) {
  .document-detail .gr-title-file .item01 {
    width: calc(85% - 455px);
  }
  .document-detail .gr-title-file .item02 {
    width: 150px;
  }
  .document-detail .gr-title-file .item03 {
    width: 85px;
  }
  .document-detail .gr-title-file .item04 {
    width: 100px;
  }
  .document-detail .gr-title-file .item05 {
    width: 15%;
  }
  .document-detail .gr-title-file .item06 {
    width: 120px;
  }
  .detail-content .column01 {
    width: calc(85% - 460px);
  }
  .detail-content .column02 {
    width: 150px;
  }
  .detail-content .column03 {
    width: 85px;
  }
  .detail-content .column04 {
    width: 100px;
  }
  .detail-content .column05 {
    width: 15%;
  }
  .detail-content .column06 {
    width: 125px;
  }
}
@media screen and (max-width: 1400px) {
  .document-management .not-fill-error {
    display: block;
    margin-left: 0;
    width: 100%;
    margin-top: 5px;
  }
  .document-detail .ct-item-large .item {
    width: calc(16.6% - 16px);
  }
}
@media screen and (max-width: 1170px) {
  .document-sidebar {
    width: 290px;
  }
  .document-main-content {
    width: calc(100% - 290px);
  }
  .document-main-content .breadcrumb-list li {
    display: none;
  }
  .document-main-content .breadcrumb-list li:first-child, .document-main-content .breadcrumb-list li:last-child {
    display: inline-block;
  }
  .document-detail-view {
    width: 824px;
  }
  .document-detail .gr-title-file .item01 {
    width: calc(85% - 445px);
  }
  .document-detail .gr-title-file .item02 {
    width: 145px;
  }
  .document-detail .gr-title-file .item03 {
    width: 85px;
  }
  .document-detail .gr-title-file .item04 {
    width: 100px;
  }
  .document-detail .gr-title-file .item05 {
    width: 15%;
  }
  .document-detail .gr-title-file .item06 {
    width: 115px;
  }
  .detail-content .column01 {
    width: calc(85% - 445px);
  }
  .detail-content .column02 {
    width: 135px;
  }
  .detail-content .column03 {
    width: 85px;
  }
  .detail-content .column04 {
    width: 100px;
  }
  .detail-content .column05 {
    width: 15%;
  }
  .document-bottom-container .doc-export-report {
    width: 100%;
  }
  .document-bottom-container .doc-sum-all-file {
    width: 100%;
  }
  .document-bottom-container .doc-txt-blue {
    display: block;
  }
  .document-container-right {
    height: calc(100% - 65px);
  }
  .document-detail {
    height: calc(100% - 66px);
  }
}
@media screen and (max-width: 1000px) {
  .document-bottom-container {
    right: 10px;
    left: 10px;
  }
  .document-main-content {
    padding: 12px 0 0 12px;
  }
  .document-main-content .doc-upload-search, .document-main-content .doc-search {
    width: 100%;
  }
  .doc-upload-search {
    margin: 5px 0 10px;
  }
  .document-detail {
    height: calc(100% - 104px);
  }
}
.doc-icon-time {
  margin-right: 3px;
}

.document-dropdown-option {
  position: relative;
}
.document-dropdown-option .icon {
  width: 12px;
  display: block;
  cursor: pointer;
  transition: all 0.3s ease;
}
.document-dropdown-option .icon:hover {
  color: #0077b6;
}
.document-dropdown-option > ul li.dropdownLiDisabled {
  cursor: not-allowed;
  color: #888;
}
.document-dropdown-option > ul li.dropdownLiDisabled:hover {
  color: #888;
  padding-left: 0;
}
.document-dropdown-option > ul li.dropdownLiDisabled:hover::before {
  content: none;
}

.cm-doc-dropdown {
  position: relative;
}
.cm-doc-dropdown.document-dropdown-option > ul {
  left: auto;
  right: -5px;
  width: 120px;
}
.cm-doc-dropdown.doc-dropdown-sort > ul {
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
}
.cm-doc-dropdown > ul {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 6;
  width: 220px;
  background: #fff;
  color: initial;
  padding: 1px 10px 2px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: none;
}
.cm-doc-dropdown > ul.active {
  display: block;
}
.cm-doc-dropdown > ul li {
  padding: 4px 0;
  position: relative;
  z-index: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}
.cm-doc-dropdown > ul li::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0077b6;
  transition: all 0.3s ease;
}
.cm-doc-dropdown > ul li:not(:last-child) {
  border-bottom: 1px solid #CCC;
}
.cm-doc-dropdown > ul li:hover, .cm-doc-dropdown > ul li.active {
  color: #0077b6;
  padding-left: 10px;
}
.cm-doc-dropdown > ul li:hover::before, .cm-doc-dropdown > ul li.active::before {
  left: 0;
}

.doc-txt-blue {
  color: #0077b6;
}

.folder-col2 .item-folder {
  width: calc(50% - 8px);
  max-width: 377px;
}
.folder-col2 .item-folder:not(:last-child) {
  margin-right: 15px;
}

.doc-gr-button {
  margin-top: 15px;
}
.doc-gr-button > div:not(:last-child) {
  margin-right: 12px;
}

.doc-button {
  width: 110px;
  padding: 4px;
  background: #219ebc;
  color: #fff;
  border-radius: 4px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
}
.doc-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
  display: block;
  width: 100%;
  padding: 100%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  transition: box-shadow 0.5s ease-out;
  z-index: -1;
}
.doc-button:hover {
  letter-spacing: 0.05em;
}
.doc-button:hover::before {
  box-shadow: inset 0 0 0 15em rgba(255, 255, 255, 0.4);
}
.doc-button.button-grey {
  background: #999;
}
.doc-button.button-orange {
  background: #CA6924;
}
.doc-button.button-red {
  background: #CF000F;
}
.doc-button.button-green {
  background: #26a65b;
}
.doc-button.button-black {
  background: #000;
}
.doc-button.button-disabled {
  cursor: not-allowed;
}
.doc-button.button-disabled::before {
  box-shadow: inset 0 0 0 15em rgba(255, 255, 255, 0.4);
}
.doc-button.button-disabled:hover {
  letter-spacing: 0;
}

.detail-more {
  display: none;
}

.btn-read-more {
  color: #0077b6;
  cursor: pointer;
}

.doc-dropdown-workflow {
  margin-bottom: 15px;
}
.doc-dropdown-workflow .title {
  margin-right: 10px;
  font-weight: 500;
}
.doc-dropdown-workflow .vsb-main {
  width: 170px;
}
.doc-dropdown-workflow .doc-button {
  width: 85px;
  padding: 2px;
}
.doc-dropdown-workflow .select-filter {
  margin-right: 15px;
}

.folder-pin .icon {
  width: 12px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.07 13.77'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23111111; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m6.42,9.28H2.34c-.26,0-.5-.12-.65-.33-.15-.21-.19-.48-.11-.72l.02-.07c.31-.92.92-1.67,1.7-2.17l3.12,3.3ZM3.14,2.1h.74l-.11,1.46,5.41,5.72h1.14c.26,0,.5-.12.65-.33.15-.21.19-.47.11-.72l-.02-.07c-.34-1.03-1.07-1.87-1.98-2.36l-.28-3.7h.74c.44,0,.8-.36.8-.8s-.36-.8-.8-.8H3.14c-.44,0-.8.36-.8.8s.36.8.8.8Zm2.39,10.37c0,.44.36.8.8.8s.8-.36.8-.8v-2.39h-1.6v2.39Zm7.38,1.16c.2-.19.21-.51.02-.71L.86.16C.67-.04.36-.05.16.14c-.2.19-.21.51-.02.71l12.07,12.77c.1.1.23.16.36.16.12,0,.25-.04.34-.14Z'/%3E%3C/svg%3E") no-repeat top 2px center/contain;
}
.folder-pin .icon:hover {
  opacity: 0.7;
}

/* Ripple Animation */
.button-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.button-ripple-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.button-ripple.is-active .button-ripple-animation {
  -webkit-animation: ripple 0.4s ease-in;
  animation: ripple 0.4s ease-in;
}

#documenteditor_titlebar {
  height: 36px;
  line-height: 26px;
  width: 100%;
  font-family: inherit;
}

#documenteditorView_titlebar {
  height: 36px;
  line-height: 26px;
  width: 100%;
  font-size: 12px;
  padding-left: 15px;
  padding-right: 10px;
  font-family: inherit;
}

#documenteditor_title_contentEditor {
  height: 26px;
  max-width: 85%;
  width: auto;
  overflow: hidden;
  display: inline-block;
  padding-left: 4px;
  padding-right: 4px;
  margin: 5px;
}

.single-line {
  cursor: text !important;
  outline: none;
}

.single-line:hover {
  border-color: #e4e4e4 !important;
}

[contenteditable=true].single-line {
  white-space: nowrap;
  border-color: #e4e4e4 !important;
}

[contenteditable=true].single-line * {
  white-space: nowrap;
}

.content-workflow {
  display: flex;
  gap: 15px;
  width: 100%;
}

.icon-doc-preview {
  position: relative;
  float: right;
  font-size: medium;
  cursor: pointer;
  margin-left: 10px;
  background: #a7a7a7;
  color: white;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  align-items: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-doc-preview.active {
  background: #002443;
}
.icon-doc-preview:hover {
  opacity: 0.8;
  background: #002443;
}

.docPreview {
  height: 100%;
  margin-bottom: 0px;
}

.dropdown-language {
  position: absolute;
  top: 36px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  z-index: 20002;
  font-size: 14px;
  color: #111;
}
.dropdown-language::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
}
.dropdown-language li {
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid #ccc;
}
.dropdown-language li:hover {
  background: #c5d5ef;
}

.title-preview-document {
  font-weight: bold;
  font-size: 15px;
}

.summarize-document .summarize-document-content {
  width: 100%;
  height: calc(100vh - 270px);
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 5px;
  border-radius: 4px;
}
.summarize-document .summarize-document-content textarea {
  width: 100%;
  height: 100%;
  border: none;
  resize: none;
  outline: none;
  scrollbar-width: thin;
}

@media screen and (min-width: 2000px) and (max-width: 2560px) {
  .summarize-document .summarize-document-content {
    height: calc(100vh - 310px);
  }
  .document-management .popup-modalWorkFlowApproval.view-ai-overview .document-detail {
    height: calc(100% - 35px);
  }
  .document-detail .doc-content-workFlow.view-ai-overview .related-content, .document-detail .doc-content-workFlow.view-ai-overview .approval-content {
    height: calc(100vh - 420px);
  }
}
@keyframes ripple {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}
@font-face {
  font-family: "Segoe UI";
  src: url("../webfonts/SegoeUI-LightItalic.woff2") format("woff2"), url("../webfonts/SegoeUI-LightItalic.woff") format("woff"), url("../webfonts/SegoeUI-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI";
  src: url("../webfonts/SegoeUI-SemiboldItalic.woff2") format("woff2"), url("../webfonts/SegoeUI-SemiboldItalic.woff") format("woff"), url("../webfonts/SegoeUI-SemiboldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI";
  src: url("../webfonts/SegoeUIBlack-Italic.woff2") format("woff2"), url("../webfonts/SegoeUIBlack-Italic.woff") format("woff"), url("../webfonts/SegoeUIBlack-Italic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI Semilight";
  src: url("../webfonts/SegoeUI-SemilightItalic.woff2") format("woff2"), url("../webfonts/SegoeUI-SemilightItalic.woff") format("woff"), url("../webfonts/SegoeUI-SemilightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI";
  src: url("../webfonts/SegoeUI-Bold.woff2") format("woff2"), url("../webfonts/SegoeUI-Bold.woff") format("woff"), url("../webfonts/SegoeUI-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI";
  src: url("../webfonts/SegoeUI.woff2") format("woff2"), url("../webfonts/SegoeUI.woff") format("woff"), url("../webfonts/SegoeUI.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI";
  src: url("../webfonts/SegoeUI-Italic.woff2") format("woff2"), url("../webfonts/SegoeUI-Italic.woff") format("woff"), url("../webfonts/SegoeUI-Italic.ttf") format("truetype"), url("../webfonts/SegoeUI-Italic.svg#SegoeUI-Italic") format("svg");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI";
  src: url("../webfonts/SegoeUI-Light.woff2") format("woff2"), url("../webfonts/SegoeUI-Light.woff") format("woff"), url("../webfonts/SegoeUI-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI";
  src: url("../webfonts/SegoeUIBlack.woff2") format("woff2"), url("../webfonts/SegoeUIBlack.woff") format("woff"), url("../webfonts/SegoeUIBlack.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI Semilight";
  src: url("../webfonts/SegoeUI-Semilight.woff2") format("woff2"), url("../webfonts/SegoeUI-Semilight.woff") format("woff"), url("../webfonts/SegoeUI-Semilight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI";
  src: url("../webfonts/SegoeUI-BoldItalic.woff2") format("woff2"), url("../webfonts/SegoeUI-BoldItalic.woff") format("woff"), url("../webfonts/SegoeUI-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI";
  src: url("../webfonts/SegoeUI-Semibold.woff2") format("woff2"), url("../webfonts/SegoeUI-Semibold.woff") format("woff"), url("../webfonts/SegoeUI-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.task-ovf-auto {
  overflow: auto;
}
.task-ovf-auto::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #ccc;
}
.task-ovf-auto::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.task-ovf-auto::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #6d6d6d;
}

.main-task {
  background: #fff;
  color: #111;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
}
.main-task.task-dashboard {
  background: #232B3E;
}
.main-task .table {
  color: #111;
}
.main-task .table th,
.main-task .table td {
  border-color: #a7a7a7;
}
.main-task .table th {
  background: #232b3e;
}
.main-task .table a {
  color: #009ef6;
}
.main-task input {
  color: #111;
  font-family: "Segoe UI", Arial, sans-serif;
  border-bottom-color: #BDBDBD;
  padding-bottom: 3px;
}
.main-task input::-ms-input-placeholder {
  /* Edge 12-18 */
  color: #a8a8a8;
}
.main-task input::placeholder {
  color: #a8a8a8;
}
.main-task input[type=checkbox] {
  width: 18px;
  height: 18px;
  background: #fff;
  border-color: #999999;
  border-radius: 50%;
  top: 0;
}
.main-task input[type=checkbox]:focus {
  box-shadow: none;
}
.main-task input[type=checkbox]:checked {
  border-color: #009ef6;
}
.main-task input[type=checkbox]:checked::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5.715' viewBox='0 0 8 5.715'%3E%3Cpath id='check-solid_1_' data-name='check-solid (1)' d='M7.758,96.192a.572.572,0,0,1,0,.809l-4.571,4.571a.572.572,0,0,1-.809,0L.092,99.287A.572.572,0,0,1,.9,98.478l1.882,1.88,4.167-4.166a.572.572,0,0,1,.809,0Z' transform='translate(0.075 -96.025)' fill='%23fff'/%3E%3C/svg%3E") no-repeat center #009ef6;
  z-index: 3;
}
.main-task input[name=search] {
  border-radius: 4px;
  border-color: #a7a7a7;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16.001' viewBox='0 0 16 16.001'%3E%3Cpath id='search-alt-2-svgrepo-com' d='M81.9,82.6a.8.8,0,0,1-.566-.235L78.4,79.426a7.193,7.193,0,1,1,1.133-1.133l2.938,2.942A.8.8,0,0,1,81.9,82.6Zm-8-14.4a5.6,5.6,0,1,0,5.6,5.6A5.608,5.608,0,0,0,73.9,68.2Zm4,6.4a.8.8,0,0,1-.8-.8,3.2,3.2,0,0,0-3.2-3.2.8.8,0,0,1,0-1.6,4.8,4.8,0,0,1,4.8,4.8A.8.8,0,0,1,77.9,74.6Z' transform='translate(-66.7 -66.6)' opacity='0.4'/%3E%3C/svg%3E%0A");
  background-size: 16px 16px;
  background-position: right 10px center;
}
.main-task select {
  color: #111;
  border-color: #bdbdbd;
}
.main-task select option {
  background: #fff;
}
.main-task textarea {
  border-color: #a7a7a7;
  color: #111;
}
.main-task .vsb-main button {
  border-bottom-color: #BDBDBD;
}
.main-task .vsb-menu {
  background: #fff;
}
.main-task .vsb-menu ul {
  color: #111;
}
.main-task .vsb-menu li {
  font-size: 13px;
  transition: all 0.3s ease;
}
.main-task .vsb-menu li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.main-task .vsb-menu li:hover, .main-task .vsb-menu li.active {
  color: #009ef6;
  background: rgba(59, 157, 189, 0.1);
}
.main-task .vsb-menu .multi li {
  font-size: 13px;
}
.main-task .vsb-menu .multi li:not(.grouped-option)::before {
  background-color: transparent;
  border: 1px solid #ccc !important;
}
.main-task .vsb-menu .multi li.active {
  color: #111;
}
.main-task .vsb-menu .multi li.active::after {
  background-color: #3b9dbd;
}
.main-task .vsb-js-search-zone {
  background: #fff;
}
.main-task #cboxContent {
  background: #fff;
}
.main-task .e-control,
.main-task .e-css {
  font-family: "Segoe UI", Arial, sans-serif;
}
.main-task .e-dropdown-popup {
  margin-top: 4px;
}
.main-task .e-dropdown-popup ul {
  font-size: 13px;
  padding: 4px 10px;
}
.main-task .e-dropdown-popup ul .e-item:not(:last-child) {
  border-bottom: 1px solid #ccc;
}
.main-task .daterangepicker {
  background-color: #fff;
  border-color: #ccc;
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.2);
}
.main-task .daterangepicker::before, .main-task .daterangepicker::after {
  border-bottom-color: #ccc;
}
.main-task .daterangepicker .drp-buttons {
  border-top-color: #ccc;
}
.main-task .daterangepicker .ranges li.active {
  background-color: #3b9dbd;
}
.main-task .daterangepicker .ranges li.active:hover {
  background-color: #3b9dbd;
}
.main-task .daterangepicker .ranges li:hover {
  background-color: #ccc;
}
.main-task .daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left-color: #ccc;
}
.main-task .daterangepicker .calendar-table {
  background-color: #fff;
}
.main-task .daterangepicker .calendar-table .next span,
.main-task .daterangepicker .calendar-table .prev span {
  border-color: #111;
}
.main-task .daterangepicker th.available:hover,
.main-task .daterangepicker td.available:hover {
  background-color: #ccc;
}
.main-task .daterangepicker td.off, .main-task .daterangepicker td.off.in-range, .main-task .daterangepicker td.off.start-date, .main-task .daterangepicker td.off.end-date {
  background-color: transparent;
  color: #afafaf;
}
.main-task .daterangepicker td.active, .main-task .daterangepicker td.active:hover, .main-task .daterangepicker td.active.in-range {
  background-color: #3b9dbd;
}
.main-task .daterangepicker td.in-range {
  background-color: #e6fcff;
}
.main-task .daterangepicker select.monthselect, .main-task .daterangepicker select.yearselect {
  color: #111;
}
.main-task .daterangepicker .drp-buttons .btn {
  background: #a7a7a7;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
.main-task .daterangepicker .drp-buttons .btn.applyBtn {
  background-color: #3b9dbd;
}
.main-task .daterangepicker .drp-buttons .btn:hover {
  opacity: 0.7;
}
.main-task .daterangepicker select.hourselect,
.main-task .daterangepicker select.minuteselect,
.main-task .daterangepicker select.secondselect,
.main-task .daterangepicker select.ampmselect {
  border-color: #bdbdbd;
}
.main-task .tabs a {
  color: #111;
}
.main-task .tabs li.active a {
  color: #3b9dbd;
}
.main-task .tabs li.active a::before {
  background: #3b9dbd;
}
.main-task .calendar.fc.fc-theme-standard th,
.main-task .calendar.fc.fc-theme-standard td {
  border-color: #fff;
}
.main-task .calendar.fc.fc-theme-standard .fc-popover {
  background: #fff;
  border: 1px solid #a7a7a7;
}
.main-task .calendar.fc .fc-highlight {
  background: rgba(0, 0, 0, 0.1);
}
.main-task .calendar.fc .fc-multimonth-daygrid {
  background: #e8ebef;
}
.main-task .calendar.fc th.fc-col-header-cell {
  background: #415a77;
}
.main-task .calendar.fc th.fc-col-header-cell a {
  color: #fff;
}
.main-task .calendar.fc .fc-header-toolbar {
  border-bottom: 1px solid #a7a7a7;
}
.main-task .calendar.fc .fc-header-toolbar .fc-today-button:hover {
  background: rgba(0, 0, 0, 0.2);
  border-color: #a7a7a7;
}
.main-task .calendar.fc .fc-header-toolbar .fc-today-button:disabled {
  background: rgba(0, 0, 0, 0.2);
  border-color: #a7a7a7;
}
.main-task .calendar.fc .fc-cell-shaded,
.main-task .calendar.fc .fc-day-disabled {
  background: rgba(0, 0, 0, 0.05);
}
.main-task .calendar.fc .fc-button-primary {
  border-color: #ccc;
  color: #111;
}
.main-task .calendar.fc .fc-button-primary:not(:disabled).fc-button-active, .main-task .calendar.fc .fc-button-primary:not(:disabled):active {
  background: rgba(0, 0, 0, 0.2);
  border-color: #a7a7a7;
}
.main-task .calendar.fc .fc-multimonth-daygrid-table .fc-day-sat .fc-daygrid-day-top a,
.main-task .calendar.fc .fc-multimonth-daygrid-table .fc-day-sun .fc-daygrid-day-top a {
  color: #e5780b;
}
.main-task .calendar.fc .fc-daygrid-day.fc-day-today {
  background: none;
}
.main-task .calendar.fc .fc-scrollgrid-section {
  background: #e8ebef;
}
.main-task .calendar.fc .fc-day-other {
  background: rgba(0, 0, 0, 0.1);
}
.main-task .calendar.fc .fc-timegrid-col.fc-day-today {
  background: rgba(94, 80, 63, 0.15);
}
.main-task .calendar.fc .fc-event-title .txt {
  color: #111;
}
.main-task .calendar.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #c2c2c2;
}
.main-task .calendar.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.main-task .calendar.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #777777;
}
.main-task .calendar.fc div.rydiam-event {
  background: #0f72b3;
}
.main-task .calendar.fc .fc-day-today .fc-daygrid-day-top .fc-daygrid-day-number {
  color: #0f72b3;
}
.main-task .calendar.fc .fc-day-today .fc-daygrid-day-frame {
  border-color: #0f72b3;
}
.main-task .calendar.fc .active-this-month {
  color: #0f72b3;
}
.main-task .calendar.fc .fc-listWeek-view .fc-list-event:hover td,
.main-task .calendar.fc .fc-listDay-view .fc-list-event:hover td {
  background: #e5e5e5;
}
.main-task .calendar.fc .fc-timegrid-more-link {
  background: #b7b7b7;
}
.main-task .calendar.fc .fc-daygrid-day-number {
  color: #111;
}
.main-task .calendar.fc .fc-button {
  padding: 2px 10px 4px;
}
.main-task .calendar.fc .fc-toolbar-title {
  line-height: 1;
}
.main-task .calendar .fc-header-toolbar.cl-fixed {
  background: #fff;
}
.main-task .calendar .fc-list-day-text,
.main-task .calendar .fc-list-day-side-text {
  color: #111;
}
.main-task .calendar .fc-listWeek-view.fc-list,
.main-task .calendar .fc-listDay-view.fc-list {
  border-color: #ccc;
}
.main-task .calendar-info-footer {
  background: #fff;
  left: 216px;
}
.main-task .calendar-info-footer .col-md-2 .icon-leave {
  background: #AE1F19;
}
.main-task .calendar-info-footer .col-md-2 .icon-birthday {
  background: #f26a8d;
}
.main-task .calendar-info-footer .col-md-2 .icon-notice {
  background: #E66424;
}
.main-task .calendar-info-footer .col-md-2 .icon-private {
  background: #8E6E51;
}
.main-task .calendar-tab-day li .number {
  padding-top: 2px;
  background: rgba(204, 204, 204, 0.7);
}
.main-task .calendar-tab-day li .number::after {
  background: rgba(204, 204, 204, 0.7);
}
.main-task .calendar-tab-day li.active .number {
  background: rgba(59, 157, 189, 0.2);
}
.main-task .calendar-tab-day li.active .number::after {
  background: rgba(59, 157, 189, 0.2);
}
.main-task .rydiam-cal-event input,
.main-task .rydiam-cal-event .vsb-main button,
.main-task .rydiam-cal-content-event input,
.main-task .rydiam-cal-content-event .vsb-main button {
  border-color: #a7a7a7;
  color: #111;
}
.main-task .rydiam-cal-content-event .col-title label,
.main-task .rydiam-cal-content-event .col label {
  color: #111;
}
.main-task .rydiam-cal-content-event .ttl-description {
  color: #111;
}
.main-task .rydiam-cal-content-event .box-attachment {
  margin-bottom: 10px;
}
.main-task .rydiam-cal-content-event .box-attachment .ttl-attachment {
  color: #111;
}
.main-task .rydiam-cal-content-event .ttl-all-day {
  color: #111;
}
.main-task .rydiam-cal-event .ry-title {
  color: #111;
}
.main-task .cm-icon-action > div {
  background: rgba(204, 204, 204, 0.4);
  border-color: rgba(204, 204, 204, 0.5);
}
.main-task .cm-icon-action > div:hover {
  background: rgba(204, 204, 204, 0.7);
}
.main-task .cm-icon-action > div:first-child {
  border-color: rgba(0, 158, 246, 0.15);
  background: rgba(0, 158, 246, 0.15);
  color: #222b3d;
}
.main-task .rydiam-cal-event-icon.cm-icon-action > div:first-child {
  background: rgba(204, 204, 204, 0.4);
  border-color: rgba(204, 204, 204, 0.5);
  color: inherit;
}
.main-task .rydiam-cal-event-icon.cm-icon-action > div:first-child:hover {
  background: rgba(204, 204, 204, 0.7);
}
.main-task .section-calendar-filter .gr-calendar-filter {
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.main-task .section-calendar-filter .gr-calendar-filter .list:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.main-task .section-calendar-filter .calendar-filter-icon::before {
  background: #4d5f88;
}
.main-task .section-calendar-addnew .gr-calendar-addnew {
  background: #4d5f88;
}
.main-task .section-calendar-addnew .gr-calendar-addnew .list {
  color: #fff;
}
.main-task .section-calendar-addnew .gr-calendar-addnew .list:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.main-task .section-calendar-addnew .calendar-addnew-icon {
  transition: all 0.3s ease;
}
.main-task .section-calendar-addnew .calendar-addnew-icon:hover {
  background: #415a77;
}
.main-task .title-h2 {
  border-color: #a7a7a7;
}
.main-task .tab-event-detail input {
  border-color: #a7a7a7;
}
.main-task .table-detailday tr:hover {
  background: rgba(59, 157, 189, 0.1);
}
.main-task .vsb-main button {
  color: #111;
  font-size: 13px;
  padding-bottom: 0;
}
.main-task .vsb-main button .caret {
  top: 6px;
}
.main-task .gr-radiobox label input:checked ~ .checkmark {
  border-color: #3b9dbd;
}
.main-task .gr-radiobox label:hover input ~ .checkmark {
  border-color: #3b9dbd;
}
.main-task .gr-radiobox .checkmark::after {
  background: #3b9dbd;
}
.main-task .footer-colorbox {
  border-color: #a7a7a7;
}
.main-task .block-top .box-item {
  background: transparent;
  border: 1px solid #e5e5e5;
}
.main-task .block-top .box-item .number {
  color: #111;
}
.main-task .block-top .box-item .ttl {
  color: #888;
}
.main-task .block-top .box-item .ttl::before {
  background: #e5e5e5;
}
.main-task .block-top .box-item .carat {
  border-color: #e5e5e5;
}
.main-task .title-01 {
  color: #111;
  font-weight: 600;
}
.main-task .box-approval .cm-btn {
  border: 1px solid #e5e5e5;
  background-color: transparent;
  color: #111;
  border-radius: 4px;
  height: 28px;
}
.main-task .box-approval .cm-btn.active {
  background: rgba(59, 157, 189, 0.3);
  border-color: rgba(59, 157, 189, 0.3);
}
.main-task .cm-button a {
  border-radius: 4px;
  background: #222B3E;
  color: #fff;
  font-weight: 400;
  padding: 3px 6px 5px;
}
.main-task .cm-button a:hover::after {
  background: #415073;
}
.main-task .paginate_button {
  border: 1px solid #e3e3e3;
  background-color: transparent;
  color: #111;
  padding-top: 0;
  padding-bottom: 2px;
}
.main-task .paginate_button.current {
  background-color: #3b9dbd;
  color: #fff;
  border-color: #3b9dbd;
}
.main-task .block01 .group-btn button {
  color: #111;
}
.main-task .block01 .note-chart-line .txt {
  color: #111;
}
.main-task .block01 .note-chart-line .number {
  color: #111;
}
.main-task .dataTables-sum-page {
  color: #009ef6;
}
.main-task .box-approval {
  align-items: flex-end;
}
.main-task .icon-toggle {
  border-color: #999;
}
.main-task .icon-toggle::before, .main-task .icon-toggle::after {
  background: #999;
}

.header input[name=search] {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16.001'%3E%3Cpath id='search-alt-2-svgrepo-com' d='M81.9,82.6a.8.8,0,0,1-.566-.235L78.4,79.426a7.193,7.193,0,1,1,1.133-1.133l2.938,2.942A.8.8,0,0,1,81.9,82.6Zm-8-14.4a5.6,5.6,0,1,0,5.6,5.6A5.608,5.608,0,0,0,73.9,68.2Zm4,6.4a.8.8,0,0,1-.8-.8,3.2,3.2,0,0,0-3.2-3.2.8.8,0,0,1,0-1.6,4.8,4.8,0,0,1,4.8,4.8A.8.8,0,0,1,77.9,74.6Z' transform='translate(-66.7 -66.6)' opacity='0.4'/%3E%3C/svg%3E%0A") no-repeat center right 9px/16px auto;
  transition: all 0.3s ease;
}
.header input[name=search]:focus {
  background-color: #fff;
}
.header-task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fcfaf8;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1001;
  padding: 6px 15px;
  border-bottom: 1px solid #ccc;
}
.header-task .hd-create {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='icon' transform='translate(-83 -27)'%3E%3Ccircle id='Ellipse_1' data-name='Ellipse 1' cx='9' cy='9' r='9' transform='translate(83 27)' fill='%23232b3e'/%3E%3Cg id='_' data-name='+' transform='translate(87 31)'%3E%3Crect id='_2' data-name='+' width='2' height='10' transform='translate(4)' fill='%23fff'/%3E%3Crect id='_3' data-name='+' width='2' height='10' transform='translate(10 4) rotate(90)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center left 11px;
  padding: 3px 10px 4px 35px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.header-task .list-create {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100px;
  background: #fff;
  border-radius: 2px;
  padding: 0 10px;
  display: none;
  animation: DropDownSlide 0.3s both;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.header-task .list-create li {
  display: flex;
  cursor: pointer;
  padding: 6px 0 6px;
}
.header-task .list-create li:not(:last-child) {
  border-bottom: 1px solid #ccc;
}
.header-task .list-create li .icon {
  display: inline-block;
  width: 16px;
  height: 20px;
  margin-right: 4px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: left top 1px;
  background-size: contain;
  transition: all 0.3s ease;
}
.header-task .list-create li .icon.icon1 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg id='icon-create1' transform='translate(-88 -60)'%3E%3Cg id='Ellipse_11' data-name='Ellipse 11' transform='translate(88 60)' fill='none' stroke='%238b8b8b' stroke-width='1'%3E%3Ccircle cx='8' cy='8' r='8' stroke='none'/%3E%3Ccircle cx='8' cy='8' r='7.5' fill='none'/%3E%3C/g%3E%3Cpath id='check-solid_2_' data-name='check-solid (2)' d='M7.758,96.192a.572.572,0,0,1,0,.809l-4.571,4.571a.572.572,0,0,1-.809,0L.092,99.287A.572.572,0,0,1,.9,98.478l1.882,1.88,4.167-4.166a.572.572,0,0,1,.809,0Z' transform='translate(92.075 -31.025)' fill='%238b8b8b'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.header-task .list-create li .icon.icon2 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15.996' viewBox='0 0 16 15.996'%3E%3Cg id='icon-create2' transform='translate(-88 -58.002)'%3E%3Cpath id='icon-project' d='M8.281,0a4.7,4.7,0,0,1,.461.358Q10.5,2.1,12.249,3.856a.776.776,0,0,1,.254.61c-.012.318,0,.636,0,.952a.624.624,0,1,1-1.248,0V5h-.181c-.578,0-1.157,0-1.735,0A1.873,1.873,0,0,1,7.5,3.161c0-.629,0-1.26,0-1.913H1.972a.644.644,0,0,0-.72.724v12.06a.643.643,0,0,0,.713.715H4.683a.622.622,0,0,1,.624.562.634.634,0,0,1-.487.672.8.8,0,0,1-.17.014c-.927,0-1.855,0-2.782,0A1.866,1.866,0,0,1,0,14.131V1.9A1.874,1.874,0,0,1,1.509.033.712.712,0,0,0,1.594,0H8.281Zm2.025,3.749L8.754,2.2c0,.318-.017.655.005.99a.6.6,0,0,0,.607.56c.316.009.634,0,.94,0ZM16,9.154a4.709,4.709,0,0,1-.371.471c-1.649,1.656-3.314,3.3-4.951,4.965a3.836,3.836,0,0,1-2.256,1.188c-.344.05-.684.131-1.025.2a.626.626,0,0,1-.779-.756c.095-.49.187-.978.291-1.466a3.089,3.089,0,0,1,.86-1.58q2.684-2.682,5.367-5.365a.617.617,0,0,1,.939,0c.572.569,1.145,1.138,1.711,1.714A2.053,2.053,0,0,1,16,8.842v.313ZM13.591,8.113c-.033.04-.06.077-.093.11-1.571,1.573-3.136,3.153-4.722,4.712a2.519,2.519,0,0,0-.734,1.63c.065-.012.124-.026.184-.033a2.491,2.491,0,0,0,1.527-.794c1.523-1.547,3.067-3.076,4.6-4.611.043-.043.083-.086.12-.125l-.884-.887ZM9.361,7.248A.624.624,0,1,0,9.359,6H3.143a.728.728,0,0,0-.184.021.623.623,0,0,0,.172,1.226H9.362Zm-1.227,2.5A.625.625,0,1,0,8.138,8.5H3.155a.8.8,0,0,0-.17.012.633.633,0,0,0-.483.7.622.622,0,0,0,.617.533c.844,0,1.688,0,2.531,0H8.133ZM3.134,11a.623.623,0,1,0,0,1.246H5.79a.624.624,0,1,0,0-1.248H3.134Z' transform='translate(88 58.002)' fill='%238b8b8b'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.header-task .list-create li .icon.icon3 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='15.743' viewBox='0 0 13 15.743'%3E%3Cg id='icon-create3' transform='translate(-88 -59)'%3E%3Cpath id='icon-project3' d='M10.744,1.513H9.9A1.7,1.7,0,0,0,8.219,0H4.831A1.7,1.7,0,0,0,3.148,1.513H2.253A2.129,2.129,0,0,0,0,3.485V13.771a2.13,2.13,0,0,0,2.255,1.972h8.49A2.13,2.13,0,0,0,13,13.771V3.485a2.13,2.13,0,0,0-2.255-1.972Zm-6.251.181a.34.34,0,0,1,.339-.339H8.219a.34.34,0,0,1,.339.339v.83a.34.34,0,0,1-.339.339H4.831a.34.34,0,0,1-.339-.339Zm7.217,12.077a.913.913,0,0,1-.966.845H2.255a.913.913,0,0,1-.966-.845V3.485a.913.913,0,0,1,.966-.845h.889c0-.039-.005-.076-.005-.115A1.7,1.7,0,0,0,4.833,4.218H8.221A1.7,1.7,0,0,0,9.91,2.639h.835a.913.913,0,0,1,.966.845V13.771ZM10.437,6.505h0a.615.615,0,0,1-.615.615H4.955a.615.615,0,0,1-.615-.615h0a.615.615,0,0,1,.615-.615H9.822A.615.615,0,0,1,10.437,6.505Zm0,2.463a.615.615,0,0,1-.615.615H4.955a.615.615,0,1,1,0-1.23H9.822A.615.615,0,0,1,10.437,8.968Zm0,2.463a.615.615,0,0,1-.615.615H4.955a.615.615,0,1,1,0-1.23H9.822A.615.615,0,0,1,10.437,11.431ZM3.683,6.4v.215a.508.508,0,0,1-1.016,0V6.4a.508.508,0,1,1,1.016,0Zm0,2.422v.215a.508.508,0,1,1-1.016,0V8.821a.508.508,0,1,1,1.016,0Zm0,2.5v.215a.508.508,0,0,1-1.016,0v-.215a.508.508,0,1,1,1.016,0Z' transform='translate(88 59)' fill='%238b8b8b'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: 13px auto;
}
.header-task .list-create li .icon.icon4 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8.618' viewBox='0 0 16 8.618'%3E%3Cg id='icon-create4' transform='translate(-68 -63)'%3E%3Cpath id='meeting7' d='M11.708,2.971c.606-.518,1.176-1.006,1.741-1.494.353-.3.7-.6,1.053-.9a.848.848,0,0,1,.982-.129.867.867,0,0,1,.535.835V7.341a.861.861,0,0,1-.535.835.849.849,0,0,1-.982-.135c-.882-.759-1.759-1.512-2.641-2.265-.035-.029-.076-.065-.147-.118v1.1a1.846,1.846,0,0,1-1.376,1.8,1.8,1.8,0,0,1-.435.059H1.843A1.842,1.842,0,0,1,.02,6.788V1.824A1.824,1.824,0,0,1,1.838,0H9.879a1.845,1.845,0,0,1,1.829,1.824V2.965ZM5.849,7.394H9.755a.633.633,0,0,0,.724-.718V1.965a.639.639,0,0,0-.729-.729H1.979a.643.643,0,0,0-.735.729V6.659c0,.512.229.735.741.735Zm8.929-5.429c-.924.794-1.824,1.565-2.735,2.347.918.788,1.812,1.553,2.735,2.341Z' transform='translate(67.98 63)' fill='%238b8b8b'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-position: center;
}
.header-task .list-create li:hover {
  color: #009ef6;
}
.header-task .list-create li:hover .icon {
  transform: translateY(-2px);
}
.header-task .list-create li:hover .icon.icon1 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg id='icon-create1' transform='translate(-88 -60)'%3E%3Cg id='Ellipse_11' data-name='Ellipse 11' transform='translate(88 60)' fill='none' stroke='%233B9DBD' stroke-width='1'%3E%3Ccircle cx='8' cy='8' r='8' stroke='none'/%3E%3Ccircle cx='8' cy='8' r='7.5' fill='none'/%3E%3C/g%3E%3Cpath id='check-solid_2_' data-name='check-solid (2)' d='M7.758,96.192a.572.572,0,0,1,0,.809l-4.571,4.571a.572.572,0,0,1-.809,0L.092,99.287A.572.572,0,0,1,.9,98.478l1.882,1.88,4.167-4.166a.572.572,0,0,1,.809,0Z' transform='translate(92.075 -31.025)' fill='%233B9DBD'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.header-task .list-create li:hover .icon.icon2 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15.996' viewBox='0 0 16 15.996'%3E%3Cg id='icon-create2' transform='translate(-88 -58.002)'%3E%3Cpath id='icon-project' d='M8.281,0a4.7,4.7,0,0,1,.461.358Q10.5,2.1,12.249,3.856a.776.776,0,0,1,.254.61c-.012.318,0,.636,0,.952a.624.624,0,1,1-1.248,0V5h-.181c-.578,0-1.157,0-1.735,0A1.873,1.873,0,0,1,7.5,3.161c0-.629,0-1.26,0-1.913H1.972a.644.644,0,0,0-.72.724v12.06a.643.643,0,0,0,.713.715H4.683a.622.622,0,0,1,.624.562.634.634,0,0,1-.487.672.8.8,0,0,1-.17.014c-.927,0-1.855,0-2.782,0A1.866,1.866,0,0,1,0,14.131V1.9A1.874,1.874,0,0,1,1.509.033.712.712,0,0,0,1.594,0H8.281Zm2.025,3.749L8.754,2.2c0,.318-.017.655.005.99a.6.6,0,0,0,.607.56c.316.009.634,0,.94,0ZM16,9.154a4.709,4.709,0,0,1-.371.471c-1.649,1.656-3.314,3.3-4.951,4.965a3.836,3.836,0,0,1-2.256,1.188c-.344.05-.684.131-1.025.2a.626.626,0,0,1-.779-.756c.095-.49.187-.978.291-1.466a3.089,3.089,0,0,1,.86-1.58q2.684-2.682,5.367-5.365a.617.617,0,0,1,.939,0c.572.569,1.145,1.138,1.711,1.714A2.053,2.053,0,0,1,16,8.842v.313ZM13.591,8.113c-.033.04-.06.077-.093.11-1.571,1.573-3.136,3.153-4.722,4.712a2.519,2.519,0,0,0-.734,1.63c.065-.012.124-.026.184-.033a2.491,2.491,0,0,0,1.527-.794c1.523-1.547,3.067-3.076,4.6-4.611.043-.043.083-.086.12-.125l-.884-.887ZM9.361,7.248A.624.624,0,1,0,9.359,6H3.143a.728.728,0,0,0-.184.021.623.623,0,0,0,.172,1.226H9.362Zm-1.227,2.5A.625.625,0,1,0,8.138,8.5H3.155a.8.8,0,0,0-.17.012.633.633,0,0,0-.483.7.622.622,0,0,0,.617.533c.844,0,1.688,0,2.531,0H8.133ZM3.134,11a.623.623,0,1,0,0,1.246H5.79a.624.624,0,1,0,0-1.248H3.134Z' transform='translate(88 58.002)' fill='%233B9DBD'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.header-task .list-create li:hover .icon.icon3 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='15.743' viewBox='0 0 13 15.743'%3E%3Cg id='icon-create3' transform='translate(-88 -59)'%3E%3Cpath id='icon-project3' d='M10.744,1.513H9.9A1.7,1.7,0,0,0,8.219,0H4.831A1.7,1.7,0,0,0,3.148,1.513H2.253A2.129,2.129,0,0,0,0,3.485V13.771a2.13,2.13,0,0,0,2.255,1.972h8.49A2.13,2.13,0,0,0,13,13.771V3.485a2.13,2.13,0,0,0-2.255-1.972Zm-6.251.181a.34.34,0,0,1,.339-.339H8.219a.34.34,0,0,1,.339.339v.83a.34.34,0,0,1-.339.339H4.831a.34.34,0,0,1-.339-.339Zm7.217,12.077a.913.913,0,0,1-.966.845H2.255a.913.913,0,0,1-.966-.845V3.485a.913.913,0,0,1,.966-.845h.889c0-.039-.005-.076-.005-.115A1.7,1.7,0,0,0,4.833,4.218H8.221A1.7,1.7,0,0,0,9.91,2.639h.835a.913.913,0,0,1,.966.845V13.771ZM10.437,6.505h0a.615.615,0,0,1-.615.615H4.955a.615.615,0,0,1-.615-.615h0a.615.615,0,0,1,.615-.615H9.822A.615.615,0,0,1,10.437,6.505Zm0,2.463a.615.615,0,0,1-.615.615H4.955a.615.615,0,1,1,0-1.23H9.822A.615.615,0,0,1,10.437,8.968Zm0,2.463a.615.615,0,0,1-.615.615H4.955a.615.615,0,1,1,0-1.23H9.822A.615.615,0,0,1,10.437,11.431ZM3.683,6.4v.215a.508.508,0,0,1-1.016,0V6.4a.508.508,0,1,1,1.016,0Zm0,2.422v.215a.508.508,0,1,1-1.016,0V8.821a.508.508,0,1,1,1.016,0Zm0,2.5v.215a.508.508,0,0,1-1.016,0v-.215a.508.508,0,1,1,1.016,0Z' transform='translate(88 59)' fill='%233B9DBD'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: 13px auto;
}
.header-task .list-create li:hover .icon.icon4 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8.618' viewBox='0 0 16 8.618'%3E%3Cg id='icon-create4' transform='translate(-68 -63)'%3E%3Cpath id='meeting7' d='M11.708,2.971c.606-.518,1.176-1.006,1.741-1.494.353-.3.7-.6,1.053-.9a.848.848,0,0,1,.982-.129.867.867,0,0,1,.535.835V7.341a.861.861,0,0,1-.535.835.849.849,0,0,1-.982-.135c-.882-.759-1.759-1.512-2.641-2.265-.035-.029-.076-.065-.147-.118v1.1a1.846,1.846,0,0,1-1.376,1.8,1.8,1.8,0,0,1-.435.059H1.843A1.842,1.842,0,0,1,.02,6.788V1.824A1.824,1.824,0,0,1,1.838,0H9.879a1.845,1.845,0,0,1,1.829,1.824V2.965ZM5.849,7.394H9.755a.633.633,0,0,0,.724-.718V1.965a.639.639,0,0,0-.729-.729H1.979a.643.643,0,0,0-.735.729V6.659c0,.512.229.735.741.735Zm8.929-5.429c-.924.794-1.824,1.565-2.735,2.347.918.788,1.812,1.553,2.735,2.341Z' transform='translate(67.98 63)' fill='%233B9DBD'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-position: center;
}
.header-task .hd-gr-create {
  margin-left: 15px;
  position: relative;
}
.header-task .hd-gr-create:hover .list-create {
  display: block;
}
.header-task .hd-search {
  width: 60%;
  max-width: 720px;
  position: relative;
}
.header-task .hd-search input[name=search] {
  border-radius: 4px;
  border-color: #ccc;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16.001' viewBox='0 0 16 16.001'%3E%3Cpath id='search-alt-2-svgrepo-com' d='M81.9,82.6a.8.8,0,0,1-.566-.235L78.4,79.426a7.193,7.193,0,1,1,1.133-1.133l2.938,2.942A.8.8,0,0,1,81.9,82.6Zm-8-14.4a5.6,5.6,0,1,0,5.6,5.6A5.608,5.608,0,0,0,73.9,68.2Zm4,6.4a.8.8,0,0,1-.8-.8,3.2,3.2,0,0,0-3.2-3.2.8.8,0,0,1,0-1.6,4.8,4.8,0,0,1,4.8,4.8A.8.8,0,0,1,77.9,74.6Z' transform='translate(-66.7 -66.6)' opacity='0.4'/%3E%3C/svg%3E%0A");
  background-size: 16px 16px;
  background-position: right 10px center;
}
.header-task .hd-content-search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  animation: DropDownSlide 0.3s both;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  border-radius: 0 0 4px 4px;
  padding: 10px 5px 15px;
  display: none;
}
.header-task .hd-content-search.active {
  display: block;
}
.header-left-task {
  display: flex;
  align-items: center;
}
.header-right-task {
  display: flex;
  align-items: center;
}
.header-right-task .hd-txt {
  color: #fff;
  margin-right: 15px;
  margin-bottom: 0;
  padding-top: 4px;
}
.header-right-task .hd-box-bell-task {
  margin-right: 15px;
  cursor: pointer;
  position: relative;
}
.header-right-task .hd-box-bell-task .circle {
  position: absolute;
  right: 0;
  top: 1px;
  width: 8px;
  height: 8px;
  background: #8D0801;
  border-radius: 50%;
}
.header-right-task .hd-box-bell-task .hd-icon {
  width: 21px;
}
.header-right-task .hd-user-task {
  position: relative;
  cursor: pointer;
}
.header-right-task .hd-user-task .hd-icon {
  width: 32px;
  height: 32px;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18.286' viewBox='0 0 16 18.286'%3E%3Cpath id='user-solid_1_' data-name='user-solid (1)' d='M8,9.143A4.571,4.571,0,1,0,3.429,4.571,4.571,4.571,0,0,0,8,9.143ZM6.368,10.857A6.367,6.367,0,0,0,0,17.225a1.061,1.061,0,0,0,1.061,1.061H14.939A1.061,1.061,0,0,0,16,17.225a6.367,6.367,0,0,0-6.368-6.368Z' fill='%23999'/%3E%3C/svg%3E%0A") no-repeat center/16px auto #ccc;
}
.header-right-task .hd-user-task .gr-user-info {
  position: absolute;
  top: calc(100% + 7px);
  width: 230px;
  right: 0;
  background: #fff;
  padding: 15px;
  border-radius: 2px;
  z-index: 1005;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  display: none;
  animation: DropDownSlide 0.3s both;
}
.header-right-task .hd-user-task .gr-user-info.active {
  display: block;
}
.header-right-task .hd-user-task .gr-user-info .user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #E9E9E9;
}
.header-right-task .hd-user-task .gr-user-info figure {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-radius: 50%;
  overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18.286' viewBox='0 0 16 18.286'%3E%3Cpath id='user-solid_1_' data-name='user-solid (1)' d='M8,9.143A4.571,4.571,0,1,0,3.429,4.571,4.571,4.571,0,0,0,8,9.143ZM6.368,10.857A6.367,6.367,0,0,0,0,17.225a1.061,1.061,0,0,0,1.061,1.061H14.939A1.061,1.061,0,0,0,16,17.225a6.367,6.367,0,0,0-6.368-6.368Z' fill='%23999'/%3E%3C/svg%3E%0A") no-repeat center/16px auto #ccc;
}
.header-right-task .hd-user-task .gr-user-info .us-content {
  width: calc(100% - 55px);
}
.header-right-task .hd-user-task .gr-user-info .us-content .user {
  line-height: 1.3;
}
.header-right-task .hd-user-task .gr-user-info .user-name {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 2px;
}
.header-right-task .hd-user-task .gr-user-info .btn-sign-out {
  margin: 12px auto 0;
  width: 100%;
  border: 1px solid #ccc;
  color: #6d6d6d;
  border-radius: 3.2px;
  text-align: center;
  padding: 3px 6px 3px;
  line-height: 1.3;
  transition: all 0.3s ease;
}
.header-right-task .hd-user-task .gr-user-info .btn-sign-out:hover {
  color: #009ef6;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.175);
  border-color: #009ef6;
}
.header-right-task .hd-user-task .gr-user-info .btn-change-pass {
  font-size: 12px;
  text-align: center;
  margin-top: 5px;
  color: #009ef6;
  transition: all 0.3s ease;
}
.header-right-task .hd-user-task .gr-user-info .btn-change-pass .txt {
  position: relative;
}
.header-right-task .hd-user-task .gr-user-info .btn-change-pass .txt::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  bottom: -2px;
  background: #009ef6;
  transition: all 0.3s ease;
}
.header-right-task .hd-user-task .gr-user-info .btn-change-pass:hover .txt::before {
  width: 100%;
}

/********************************
Menu Toogle
********************************/
#nav-icon-task {
  width: 20px;
  height: 18px;
  position: relative;
  margin: 0 auto 0px;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}
#nav-icon-task span {
  background-color: #111;
  display: block;
  position: absolute;
  height: 2px;
  border-radius: 6px;
  width: 100%;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
#nav-icon-task span:nth-child(1) {
  top: 0;
}
#nav-icon-task span:nth-child(2) {
  top: 8px;
}
#nav-icon-task span:nth-child(3) {
  top: 16px;
}
#nav-icon-task.open span {
  width: 60%;
}
#nav-icon-task.open span:nth-child(1) {
  left: 40%;
}
#nav-icon-task.open span:nth-child(2) {
  left: 18%;
}

@media screen and (max-width: 1024px) {
  .button-toggle-task nav > ul > li {
    border-bottom: 1px solid #2b2b2b;
  }
}
.aside-task {
  width: 196px;
  background: #fcfaf8;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  padding: 60px 20px;
  z-index: 10;
  overflow: auto;
}
.aside-task::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #ccc;
}
.aside-task::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.aside-task::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #6d6d6d;
}
.aside-task {
  transition: 0.6s;
  transform: translateX(0);
}
.aside-task.active {
  pointer-events: auto;
  transform: translateX(-120%);
}
.aside-task ul li {
  position: relative;
  overflow: hidden;
}
.aside-task .nav li {
  position: relative;
  z-index: 0;
}
.aside-task .nav li .icon {
  margin-right: 8px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  justify-content: center;
  text-align: center;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  top: 3px;
  transition: all 0.3s ease;
}
.aside-task .nav li .icon.icon1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14.783' viewBox='0 0 14 14.783'%3E%3Cpath id='home' d='M4.863,13.862V11.578a1.007,1.007,0,0,1,1.032-1.032H8.032a1.007,1.007,0,0,1,1.032,1.032v2.284a.9.9,0,0,0,.295.663.8.8,0,0,0,.663.295h1.474A2.516,2.516,0,0,0,14,12.315V5.831a1.815,1.815,0,0,0-.663-1.4L8.4.526A2.228,2.228,0,0,0,5.526.6L.737,4.431A1.677,1.677,0,0,0,0,5.831v6.411a2.5,2.5,0,0,0,2.579,2.505h1.4a.851.851,0,0,0,.884-.884Z' transform='translate(0 -0.037)' fill='%23232b3e'/%3E%3C/svg%3E%0A");
}
.aside-task .nav li .icon.icon2 {
  top: 3px;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath id='dashboard' d='M1.4,0H4.9A1.4,1.4,0,0,1,6.3,1.4V6.3A1.4,1.4,0,0,1,4.9,7.7H1.4A1.4,1.4,0,0,1,0,6.3V1.4A1.4,1.4,0,0,1,1.4,0ZM9.1,0h3.5A1.4,1.4,0,0,1,14,1.4V3.5a1.4,1.4,0,0,1-1.4,1.4H9.1A1.4,1.4,0,0,1,7.7,3.5V1.4A1.4,1.4,0,0,1,9.1,0ZM1.4,9.1H4.9a1.4,1.4,0,0,1,1.4,1.4v2.1A1.4,1.4,0,0,1,4.9,14H1.4A1.4,1.4,0,0,1,0,12.6V10.5A1.4,1.4,0,0,1,1.4,9.1ZM9.1,6.3h3.5A1.4,1.4,0,0,1,14,7.7v4.9A1.4,1.4,0,0,1,12.6,14H9.1a1.4,1.4,0,0,1-1.4-1.4V7.7A1.4,1.4,0,0,1,9.1,6.3Z' fill='%23232b3e'/%3E%3C/svg%3E%0A");
}
.aside-task .nav li .icon.icon3 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14.693' viewBox='0 0 14 14.693'%3E%3Cpath id='demo01' d='M13.989,5.248c0,.057.007.1.007.133q0,3.918,0,7.836a1.366,1.366,0,0,1-.838,1.345,1.343,1.343,0,0,1-.537.117q-5.622.01-11.244,0A1.382,1.382,0,0,1,.01,13.4C0,13.317,0,13.235,0,13.153Q0,9.3,0,5.448v-.2H13.989ZM7,9.081c.115,0,.229,0,.344,0a.693.693,0,0,0,.7-.691q.011-.352,0-.7A.682.682,0,0,0,7.39,7,6.718,6.718,0,0,0,6.6,7a.68.68,0,0,0-.653.671c-.01.245-.01.492,0,.737a.691.691,0,0,0,.7.673c.115,0,.229,0,.344,0ZM8.06,11.893H8.047c0-.12,0-.24,0-.36a.693.693,0,0,0-.706-.688q-.344,0-.688,0a.691.691,0,0,0-.7.691q-.011.352,0,.7a.682.682,0,0,0,.656.685,6.8,6.8,0,0,0,.818,0,.637.637,0,0,0,.593-.523,4.177,4.177,0,0,0,.042-.5ZM3.138,9.08c.131,0,.262,0,.393,0a.657.657,0,0,0,.649-.6,6.624,6.624,0,0,0,0-.9A.629.629,0,0,0,3.6,7.008a6.554,6.554,0,0,0-.9,0,.656.656,0,0,0-.6.65q-.008.376,0,.754a.68.68,0,0,0,.669.669c.12,0,.24,0,.36,0Zm8.749-1.046c0-.12,0-.24,0-.36A.662.662,0,0,0,11.275,7a6.431,6.431,0,0,0-.867,0,.637.637,0,0,0-.6.595,6.5,6.5,0,0,0,0,.867.661.661,0,0,0,.668.613c.246,0,.491,0,.737,0a.681.681,0,0,0,.669-.668c0-.126,0-.251,0-.377ZM3.147,10.844c-.126,0-.251,0-.377,0a.68.68,0,0,0-.66.66c-.006.251,0,.5,0,.754a.658.658,0,0,0,.6.66,6.527,6.527,0,0,0,.883,0,.632.632,0,0,0,.586-.585,6.6,6.6,0,0,0,0-.883.66.66,0,0,0-.659-.6c-.126,0-.251,0-.377,0Zm7.7,0c-.12,0-.24,0-.36,0a.662.662,0,0,0-.67.611,6.5,6.5,0,0,0,0,.867.637.637,0,0,0,.594.6,6.5,6.5,0,0,0,.867,0,.66.66,0,0,0,.614-.668q.007-.369,0-.737a.68.68,0,0,0-.667-.67c-.126,0-.251,0-.377,0Zm3.135-6.307a.344.344,0,0,0,.016-.071c0-.7.021-1.4-.011-2.1a1.4,1.4,0,0,0-1.726-1.306c-.013.184-.014.371-.042.552a1.39,1.39,0,0,1-2.762-.191c0-.124,0-.247,0-.37H4.542c0,.136,0,.261,0,.386a1.39,1.39,0,0,1-2.76.192c-.029-.191-.031-.387-.046-.589-.132,0-.257,0-.382,0A1.366,1.366,0,0,0,.017,2.3C-.011,3.022,0,3.745,0,4.466a.35.35,0,0,0,.016.071h13.96ZM3.85.706a.7.7,0,0,0-1.4-.042c-.012.251-.012.5,0,.754a.7.7,0,0,0,1.4-.04c0-.109,0-.219,0-.328s0-.229,0-.344Zm6.3.671a.7.7,0,0,0,1.4.042c.012-.251.012-.5,0-.754a.7.7,0,0,0-1.4.039c0,.109,0,.219,0,.328s0,.229,0,.344Z' transform='translate(0 0.008)' fill='%23232b3e'/%3E%3C/svg%3E%0A");
}
.aside-task .nav li .icon.icon4 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16.744' viewBox='0 0 18 16.744'%3E%3Cpath id='chart-svgrepo-com' d='M16.907,11.837a.628.628,0,0,0-.628-.628H13.767a.628.628,0,0,0-.628.628v5.651H11.884V3.884a11.042,11.042,0,0,0-.04-1.294c-.037-.272-.1-.358-.144-.406s-.133-.107-.405-.144A11.034,11.034,0,0,0,10,2a11.034,11.034,0,0,0-1.294.04c-.272.037-.358.1-.405.144s-.107.133-.144.406a11.033,11.033,0,0,0-.04,1.294v13.6H6.86V7.651a.628.628,0,0,0-.628-.628H3.721a.628.628,0,0,0-.628.628v9.837H1.628a.628.628,0,1,0,0,1.256H18.372a.628.628,0,1,0,0-1.256H16.907Z' transform='translate(-1 -2)' fill='%23232b3e'/%3E%3C/svg%3E%0A");
}
.aside-task .nav li .icon.icon5 {
  top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14.995' viewBox='0 0 15 14.995'%3E%3Cpath id='demo02' d='M0,4.832H14.984c0,.055.009.1.009.15q0,3.916,0,7.833a2.142,2.142,0,0,1-1.743,2.134,2.277,2.277,0,0,1-.457.044q-5.3,0-10.6,0A2.155,2.155,0,0,1,0,12.8q0-3.9,0-7.8V4.833Zm9.6,7.476h2.632a.532.532,0,1,0,0-1.06H6.939a.532.532,0,1,0,0,1.061H9.592Zm.049-4.282h2.633a.53.53,0,1,0,0-1.057H6.991a.646.646,0,0,0-.162.016.528.528,0,0,0,.13,1.04c.894,0,1.788,0,2.682,0Zm-5.9,4.814a1.064,1.064,0,1,0,0-2.129,1.065,1.065,0,0,0,0,2.129Zm0-4.279a1.064,1.064,0,1,0-.01-2.128,1.064,1.064,0,0,0,.01,2.128ZM14.994,3.742H.016A.211.211,0,0,1,0,3.688c.007-.608-.015-1.219.03-1.824A2.112,2.112,0,0,1,1.856.026C2.019.01,2.184,0,2.348,0Q7.573,0,12.8,0a2.145,2.145,0,0,1,2.15,1.743,2.472,2.472,0,0,1,.044.474c.005.5,0,1.007,0,1.525ZM3.743,2.675v0c.335,0,.67.01,1,0a.828.828,0,0,0,.385-.108.485.485,0,0,0,.193-.578A.524.524,0,0,0,4.8,1.614c-.7-.006-1.4-.007-2.107,0a.668.668,0,0,0-.335.112.509.509,0,0,0-.191.57.516.516,0,0,0,.506.373c.356.009.713,0,1.07,0Zm6.95-.527a.524.524,0,0,0-.527-.532.544.544,0,0,0-.531.52.533.533,0,0,0,.526.537A.515.515,0,0,0,10.693,2.148Zm2.14.009a.525.525,0,0,0-.519-.542.541.541,0,0,0-.54.528.533.533,0,0,0,.518.529.515.515,0,0,0,.54-.515Z' transform='translate(0.005 0)' fill='%23232b3e'/%3E%3C/svg%3E%0A");
}
.aside-task .nav li .icon.icon6 {
  top: 4px;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14.149' viewBox='0 0 15 14.149'%3E%3Cpath id='setting-2-svgrepo-com' d='M13.565,4.955c-1.356,0-1.911-.96-1.237-2.136A1.422,1.422,0,0,0,11.8.878l-1.3-.742A1.251,1.251,0,0,0,8.8.584L8.715.726a1.3,1.3,0,0,1-2.467,0L6.165.584A1.229,1.229,0,0,0,4.472.134l-1.3.742a1.434,1.434,0,0,0-.522,1.949c.681,1.169.128,2.129-1.23,2.129A1.428,1.428,0,0,0,0,6.378V7.7A1.426,1.426,0,0,0,1.423,9.122c1.356,0,1.911.96,1.23,2.136a1.422,1.422,0,0,0,.524,1.94l1.3.742a1.251,1.251,0,0,0,1.709-.45l.083-.142a1.3,1.3,0,0,1,2.467,0l.083.142a1.251,1.251,0,0,0,1.709.45l1.3-.742a1.421,1.421,0,0,0,.524-1.94c-.681-1.176-.128-2.136,1.23-2.136A1.426,1.426,0,0,0,15,7.7V6.378A1.442,1.442,0,0,0,13.565,4.955ZM7.494,9.475A2.436,2.436,0,1,1,9.932,7.037,2.442,2.442,0,0,1,7.494,9.475Z' transform='translate(0 0.038)' fill='%23232b3e'/%3E%3C/svg%3E%0A");
}
.aside-task .nav li .icon.icon7 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.845' height='17' viewBox='0 0 13.845 17'%3E%3Cpath id='quality-control' d='M11.465,1.6a2.182,2.182,0,0,1,2.345,1.814,4.288,4.288,0,0,1,.034.534q0,5.4,0,10.8a2.17,2.17,0,0,1-1.628,2.182,2.628,2.628,0,0,1-.659.074q-4.639.007-9.277,0A2.162,2.162,0,0,1,.06,15.288,2.4,2.4,0,0,1,0,14.756Q0,9.293,0,3.83A2.192,2.192,0,0,1,2.23,1.583c.042,0,.084,0,.153.008,0,.093,0,.177,0,.261a11.894,11.894,0,0,0,.066,1.586A2.092,2.092,0,0,0,4.5,5.136q2.426.01,4.852,0a2.132,2.132,0,0,0,2.094-1.977c.029-.443.013-.888.017-1.333,0-.073,0-.146,0-.226ZM6.917,14.231a3.752,3.752,0,1,0-3.738-3.8,3.746,3.746,0,0,0,3.738,3.8ZM6.933.018C6.094.018,5.254,0,4.417.025A1.308,1.308,0,0,0,3.184,1.259c-.027.616-.028,1.234,0,1.849A1.341,1.341,0,0,0,4.509,4.354q2.416.007,4.831,0a1.339,1.339,0,0,0,1.323-1.247c.028-.622.005-1.245,0-1.868a.713.713,0,0,0-.025-.164A1.377,1.377,0,0,0,9.228.008c-.765-.005-1.53,0-2.3,0V.019ZM5.962,10.1a.589.589,0,0,0-.884-.032.6.6,0,0,0,.043.873q.43.434.864.864a.6.6,0,0,0,.925.008c.3-.3.6-.6.9-.9.318-.319.642-.631.953-.957A.594.594,0,1,0,7.9,9.137c-.477.482-.956.961-1.463,1.469-.164-.176-.315-.346-.476-.507Z' transform='translate(-0.002 -0.005)' fill='%23232b3e'/%3E%3C/svg%3E%0A");
}
.aside-task .nav > ul > li > a::before,
.aside-task .nav > ul > li > .title::before {
  left: 0;
  top: 8px;
}
.aside-task .nav > ul > li.submenu ul {
  display: none;
}
.aside-task .nav > ul > li.submenu ul.active {
  display: block;
}
.aside-task .nav > ul > li.submenu .title::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 15px;
  right: 0;
  width: 11px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23919191'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E") no-repeat top/contain;
  transition: all 0.3s ease;
  transform: rotate(180deg);
}
.aside-task .nav > ul > li.submenu .title.active::after {
  transform: rotate(0);
}
.aside-task .nav > ul > li.submenu .title.active::after, .aside-task .nav > ul > li.submenu .title:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23fff'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E");
}
.aside-task .nav > ul > li.submenu .menu-monthly .title::after {
  content: none;
}
.aside-task .nav > ul > li.submenu ul li a.active::before, .aside-task .nav > ul > li.submenu ul li a:hover::before {
  background: #fff;
}
.aside-task .nav > ul > li.submenu > ul > li > a,
.aside-task .nav > ul > li.submenu > ul > li > .title {
  padding-left: 31px;
}
.aside-task .nav > ul > li.submenu > ul > li > a::before,
.aside-task .nav > ul > li.submenu > ul > li > .title::before {
  left: 14px;
}
.aside-task .nav > ul > li.submenu > ul > li a::before,
.aside-task .nav > ul > li.submenu > ul > li .title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 16px;
  width: 4px;
  height: 4px;
  background: #919191;
  border-radius: 50%;
}
.aside-task .nav > ul > li.submenu > ul > li > ul > li > a,
.aside-task .nav > ul > li.submenu > ul > li > ul > li > .title {
  padding-left: 42px;
}
.aside-task .nav > ul > li.submenu > ul > li > ul > li > a::before,
.aside-task .nav > ul > li.submenu > ul > li > ul > li > .title::before {
  left: 28px;
}
.aside-task .nav > ul > li.submenu > ul > li > ul > li > ul > li > a,
.aside-task .nav > ul > li.submenu > ul > li > ul > li > ul > li > .title {
  padding-left: 62px;
}
.aside-task .nav > ul > li.submenu > ul > li > ul > li > ul > li > a::before,
.aside-task .nav > ul > li.submenu > ul > li > ul > li > ul > li > .title::before {
  left: 46px;
}
.aside-task .nav > ul > li.submenu > ul > li > ul > li > ul > li > ul > li > a,
.aside-task .nav > ul > li.submenu > ul > li > ul > li > ul > li > ul > li > .title {
  padding-left: 82px;
}
.aside-task .nav > ul > li.submenu > ul > li > ul > li > ul > li > ul > li > a::before,
.aside-task .nav > ul > li.submenu > ul > li > ul > li > ul > li > ul > li > .title::before {
  left: 64px;
}
.aside-task .nav .title {
  margin-bottom: 0;
}
.aside-task .nav a,
.aside-task .nav .title {
  color: #111;
  font-size: 14px;
  line-height: 1.5;
  display: block;
  padding: 7px 11px 7px 0;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  cursor: pointer;
}
.aside-task .nav a.active, .aside-task .nav a:hover,
.aside-task .nav .title.active,
.aside-task .nav .title:hover {
  color: #009ef6;
}
.aside-task .nav a.active .icon.icon1, .aside-task .nav a:hover .icon.icon1,
.aside-task .nav .title.active .icon.icon1,
.aside-task .nav .title:hover .icon.icon1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14.783' viewBox='0 0 14 14.783'%3E%3Cpath id='home' d='M4.863,13.862V11.578a1.007,1.007,0,0,1,1.032-1.032H8.032a1.007,1.007,0,0,1,1.032,1.032v2.284a.9.9,0,0,0,.295.663.8.8,0,0,0,.663.295h1.474A2.516,2.516,0,0,0,14,12.315V5.831a1.815,1.815,0,0,0-.663-1.4L8.4.526A2.228,2.228,0,0,0,5.526.6L.737,4.431A1.677,1.677,0,0,0,0,5.831v6.411a2.5,2.5,0,0,0,2.579,2.505h1.4a.851.851,0,0,0,.884-.884Z' transform='translate(0 -0.037)' fill='%233b9dbd'/%3E%3C/svg%3E%0A");
}
.aside-task .nav a.active .icon.icon2, .aside-task .nav a:hover .icon.icon2,
.aside-task .nav .title.active .icon.icon2,
.aside-task .nav .title:hover .icon.icon2 {
  top: 3px;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath id='dashboard' d='M1.4,0H4.9A1.4,1.4,0,0,1,6.3,1.4V6.3A1.4,1.4,0,0,1,4.9,7.7H1.4A1.4,1.4,0,0,1,0,6.3V1.4A1.4,1.4,0,0,1,1.4,0ZM9.1,0h3.5A1.4,1.4,0,0,1,14,1.4V3.5a1.4,1.4,0,0,1-1.4,1.4H9.1A1.4,1.4,0,0,1,7.7,3.5V1.4A1.4,1.4,0,0,1,9.1,0ZM1.4,9.1H4.9a1.4,1.4,0,0,1,1.4,1.4v2.1A1.4,1.4,0,0,1,4.9,14H1.4A1.4,1.4,0,0,1,0,12.6V10.5A1.4,1.4,0,0,1,1.4,9.1ZM9.1,6.3h3.5A1.4,1.4,0,0,1,14,7.7v4.9A1.4,1.4,0,0,1,12.6,14H9.1a1.4,1.4,0,0,1-1.4-1.4V7.7A1.4,1.4,0,0,1,9.1,6.3Z' fill='%233b9dbd'/%3E%3C/svg%3E%0A");
}
.aside-task .nav a.active .icon.icon3, .aside-task .nav a:hover .icon.icon3,
.aside-task .nav .title.active .icon.icon3,
.aside-task .nav .title:hover .icon.icon3 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14.693' viewBox='0 0 14 14.693'%3E%3Cpath id='demo01' d='M13.989,5.248c0,.057.007.1.007.133q0,3.918,0,7.836a1.366,1.366,0,0,1-.838,1.345,1.343,1.343,0,0,1-.537.117q-5.622.01-11.244,0A1.382,1.382,0,0,1,.01,13.4C0,13.317,0,13.235,0,13.153Q0,9.3,0,5.448v-.2H13.989ZM7,9.081c.115,0,.229,0,.344,0a.693.693,0,0,0,.7-.691q.011-.352,0-.7A.682.682,0,0,0,7.39,7,6.718,6.718,0,0,0,6.6,7a.68.68,0,0,0-.653.671c-.01.245-.01.492,0,.737a.691.691,0,0,0,.7.673c.115,0,.229,0,.344,0ZM8.06,11.893H8.047c0-.12,0-.24,0-.36a.693.693,0,0,0-.706-.688q-.344,0-.688,0a.691.691,0,0,0-.7.691q-.011.352,0,.7a.682.682,0,0,0,.656.685,6.8,6.8,0,0,0,.818,0,.637.637,0,0,0,.593-.523,4.177,4.177,0,0,0,.042-.5ZM3.138,9.08c.131,0,.262,0,.393,0a.657.657,0,0,0,.649-.6,6.624,6.624,0,0,0,0-.9A.629.629,0,0,0,3.6,7.008a6.554,6.554,0,0,0-.9,0,.656.656,0,0,0-.6.65q-.008.376,0,.754a.68.68,0,0,0,.669.669c.12,0,.24,0,.36,0Zm8.749-1.046c0-.12,0-.24,0-.36A.662.662,0,0,0,11.275,7a6.431,6.431,0,0,0-.867,0,.637.637,0,0,0-.6.595,6.5,6.5,0,0,0,0,.867.661.661,0,0,0,.668.613c.246,0,.491,0,.737,0a.681.681,0,0,0,.669-.668c0-.126,0-.251,0-.377ZM3.147,10.844c-.126,0-.251,0-.377,0a.68.68,0,0,0-.66.66c-.006.251,0,.5,0,.754a.658.658,0,0,0,.6.66,6.527,6.527,0,0,0,.883,0,.632.632,0,0,0,.586-.585,6.6,6.6,0,0,0,0-.883.66.66,0,0,0-.659-.6c-.126,0-.251,0-.377,0Zm7.7,0c-.12,0-.24,0-.36,0a.662.662,0,0,0-.67.611,6.5,6.5,0,0,0,0,.867.637.637,0,0,0,.594.6,6.5,6.5,0,0,0,.867,0,.66.66,0,0,0,.614-.668q.007-.369,0-.737a.68.68,0,0,0-.667-.67c-.126,0-.251,0-.377,0Zm3.135-6.307a.344.344,0,0,0,.016-.071c0-.7.021-1.4-.011-2.1a1.4,1.4,0,0,0-1.726-1.306c-.013.184-.014.371-.042.552a1.39,1.39,0,0,1-2.762-.191c0-.124,0-.247,0-.37H4.542c0,.136,0,.261,0,.386a1.39,1.39,0,0,1-2.76.192c-.029-.191-.031-.387-.046-.589-.132,0-.257,0-.382,0A1.366,1.366,0,0,0,.017,2.3C-.011,3.022,0,3.745,0,4.466a.35.35,0,0,0,.016.071h13.96ZM3.85.706a.7.7,0,0,0-1.4-.042c-.012.251-.012.5,0,.754a.7.7,0,0,0,1.4-.04c0-.109,0-.219,0-.328s0-.229,0-.344Zm6.3.671a.7.7,0,0,0,1.4.042c.012-.251.012-.5,0-.754a.7.7,0,0,0-1.4.039c0,.109,0,.219,0,.328s0,.229,0,.344Z' transform='translate(0 0.008)' fill='%233b9dbd'/%3E%3C/svg%3E%0A");
}
.aside-task .nav a.active .icon.icon4, .aside-task .nav a:hover .icon.icon4,
.aside-task .nav .title.active .icon.icon4,
.aside-task .nav .title:hover .icon.icon4 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16.744' viewBox='0 0 18 16.744'%3E%3Cpath id='chart-svgrepo-com' d='M16.907,11.837a.628.628,0,0,0-.628-.628H13.767a.628.628,0,0,0-.628.628v5.651H11.884V3.884a11.042,11.042,0,0,0-.04-1.294c-.037-.272-.1-.358-.144-.406s-.133-.107-.405-.144A11.034,11.034,0,0,0,10,2a11.034,11.034,0,0,0-1.294.04c-.272.037-.358.1-.405.144s-.107.133-.144.406a11.033,11.033,0,0,0-.04,1.294v13.6H6.86V7.651a.628.628,0,0,0-.628-.628H3.721a.628.628,0,0,0-.628.628v9.837H1.628a.628.628,0,1,0,0,1.256H18.372a.628.628,0,1,0,0-1.256H16.907Z' transform='translate(-1 -2)' fill='%233b9dbd'/%3E%3C/svg%3E%0A");
}
.aside-task .nav a.active .icon.icon5, .aside-task .nav a:hover .icon.icon5,
.aside-task .nav .title.active .icon.icon5,
.aside-task .nav .title:hover .icon.icon5 {
  top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14.995' viewBox='0 0 15 14.995'%3E%3Cpath id='demo02' d='M0,4.832H14.984c0,.055.009.1.009.15q0,3.916,0,7.833a2.142,2.142,0,0,1-1.743,2.134,2.277,2.277,0,0,1-.457.044q-5.3,0-10.6,0A2.155,2.155,0,0,1,0,12.8q0-3.9,0-7.8V4.833Zm9.6,7.476h2.632a.532.532,0,1,0,0-1.06H6.939a.532.532,0,1,0,0,1.061H9.592Zm.049-4.282h2.633a.53.53,0,1,0,0-1.057H6.991a.646.646,0,0,0-.162.016.528.528,0,0,0,.13,1.04c.894,0,1.788,0,2.682,0Zm-5.9,4.814a1.064,1.064,0,1,0,0-2.129,1.065,1.065,0,0,0,0,2.129Zm0-4.279a1.064,1.064,0,1,0-.01-2.128,1.064,1.064,0,0,0,.01,2.128ZM14.994,3.742H.016A.211.211,0,0,1,0,3.688c.007-.608-.015-1.219.03-1.824A2.112,2.112,0,0,1,1.856.026C2.019.01,2.184,0,2.348,0Q7.573,0,12.8,0a2.145,2.145,0,0,1,2.15,1.743,2.472,2.472,0,0,1,.044.474c.005.5,0,1.007,0,1.525ZM3.743,2.675v0c.335,0,.67.01,1,0a.828.828,0,0,0,.385-.108.485.485,0,0,0,.193-.578A.524.524,0,0,0,4.8,1.614c-.7-.006-1.4-.007-2.107,0a.668.668,0,0,0-.335.112.509.509,0,0,0-.191.57.516.516,0,0,0,.506.373c.356.009.713,0,1.07,0Zm6.95-.527a.524.524,0,0,0-.527-.532.544.544,0,0,0-.531.52.533.533,0,0,0,.526.537A.515.515,0,0,0,10.693,2.148Zm2.14.009a.525.525,0,0,0-.519-.542.541.541,0,0,0-.54.528.533.533,0,0,0,.518.529.515.515,0,0,0,.54-.515Z' transform='translate(0.005 0)' fill='%233b9dbd'/%3E%3C/svg%3E%0A");
}
.aside-task .nav a.active .icon.icon6, .aside-task .nav a:hover .icon.icon6,
.aside-task .nav .title.active .icon.icon6,
.aside-task .nav .title:hover .icon.icon6 {
  top: 4px;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14.149' viewBox='0 0 15 14.149'%3E%3Cpath id='setting-2-svgrepo-com' d='M13.565,4.955c-1.356,0-1.911-.96-1.237-2.136A1.422,1.422,0,0,0,11.8.878l-1.3-.742A1.251,1.251,0,0,0,8.8.584L8.715.726a1.3,1.3,0,0,1-2.467,0L6.165.584A1.229,1.229,0,0,0,4.472.134l-1.3.742a1.434,1.434,0,0,0-.522,1.949c.681,1.169.128,2.129-1.23,2.129A1.428,1.428,0,0,0,0,6.378V7.7A1.426,1.426,0,0,0,1.423,9.122c1.356,0,1.911.96,1.23,2.136a1.422,1.422,0,0,0,.524,1.94l1.3.742a1.251,1.251,0,0,0,1.709-.45l.083-.142a1.3,1.3,0,0,1,2.467,0l.083.142a1.251,1.251,0,0,0,1.709.45l1.3-.742a1.421,1.421,0,0,0,.524-1.94c-.681-1.176-.128-2.136,1.23-2.136A1.426,1.426,0,0,0,15,7.7V6.378A1.442,1.442,0,0,0,13.565,4.955ZM7.494,9.475A2.436,2.436,0,1,1,9.932,7.037,2.442,2.442,0,0,1,7.494,9.475Z' transform='translate(0 0.038)' fill='%233b9dbd'/%3E%3C/svg%3E%0A");
}
.aside-task .nav a.active .icon.icon7, .aside-task .nav a:hover .icon.icon7,
.aside-task .nav .title.active .icon.icon7,
.aside-task .nav .title:hover .icon.icon7 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.845' height='17' viewBox='0 0 13.845 17'%3E%3Cpath id='quality-control' d='M11.465,1.6a2.182,2.182,0,0,1,2.345,1.814,4.288,4.288,0,0,1,.034.534q0,5.4,0,10.8a2.17,2.17,0,0,1-1.628,2.182,2.628,2.628,0,0,1-.659.074q-4.639.007-9.277,0A2.162,2.162,0,0,1,.06,15.288,2.4,2.4,0,0,1,0,14.756Q0,9.293,0,3.83A2.192,2.192,0,0,1,2.23,1.583c.042,0,.084,0,.153.008,0,.093,0,.177,0,.261a11.894,11.894,0,0,0,.066,1.586A2.092,2.092,0,0,0,4.5,5.136q2.426.01,4.852,0a2.132,2.132,0,0,0,2.094-1.977c.029-.443.013-.888.017-1.333,0-.073,0-.146,0-.226ZM6.917,14.231a3.752,3.752,0,1,0-3.738-3.8,3.746,3.746,0,0,0,3.738,3.8ZM6.933.018C6.094.018,5.254,0,4.417.025A1.308,1.308,0,0,0,3.184,1.259c-.027.616-.028,1.234,0,1.849A1.341,1.341,0,0,0,4.509,4.354q2.416.007,4.831,0a1.339,1.339,0,0,0,1.323-1.247c.028-.622.005-1.245,0-1.868a.713.713,0,0,0-.025-.164A1.377,1.377,0,0,0,9.228.008c-.765-.005-1.53,0-2.3,0V.019ZM5.962,10.1a.589.589,0,0,0-.884-.032.6.6,0,0,0,.043.873q.43.434.864.864a.6.6,0,0,0,.925.008c.3-.3.6-.6.9-.9.318-.319.642-.631.953-.957A.594.594,0,1,0,7.9,9.137c-.477.482-.956.961-1.463,1.469-.164-.176-.315-.346-.476-.507Z' transform='translate(-0.002 -0.005)' fill='%233b9dbd'/%3E%3C/svg%3E%0A");
}
.aside-task .nav a.active,
.aside-task .nav .title.active {
  font-weight: 600;
}
.aside-task .nav a:hover,
.aside-task .nav .title:hover {
  color: #009ef6;
  opacity: 1 !important;
}
.aside-task .nav a:hover .icon,
.aside-task .nav .title:hover .icon {
  transform: translateY(-2px);
}

@media screen and (max-width: 1024px) {
  header.header-task {
    left: 0;
  }
  aside {
    padding-top: 80px;
  }
  .aside-task {
    transform: translate(0, 0);
    width: auto;
    left: 0;
    right: 0;
  }
  .aside-task.active {
    transform: translate(0, -120%);
    height: 100%;
  }
  .aside-task .logo {
    margin-left: auto;
    margin-right: auto;
  }
}
@keyframes DropDownSlide {
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@keyframes RigthSlide {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(-4px);
    transform: translateX(-4px);
  }
}
/* tab */
.box-tab {
  display: flex;
}

.box-tab-main {
  padding: 0 5px;
  overflow: auto;
  display: none;
}
.box-tab-main::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #ccc;
}
.box-tab-main::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.box-tab-main::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #6d6d6d;
}
.box-tab-main.current {
  display: block;
}

.hd-content-search .box-tab-main {
  max-height: 460px;
}

.box-tab {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  margin-left: 5px;
  margin-right: 5px;
}
.box-tab li {
  padding: 0 0 3px;
  margin-right: 20px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 0;
  font-weight: 600;
  cursor: pointer;
}
.box-tab li::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #009ef6;
  border-radius: 5px;
  display: none;
  animation: RigthSlide 0.3s both;
}
.box-tab li:last-child {
  margin-right: 0;
}
.box-tab li:hover::after, .box-tab li.current::after {
  display: block;
}
.box-tab li.li-other {
  margin-left: 20px;
  position: relative;
  z-index: 0;
}
.box-tab li.li-other::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 10%;
  left: -20px;
  width: 1px;
  height: 70%;
  background: rgba(0, 0, 0, 0.15);
}

/* end tab */
.main-task main {
  padding: 65px 20px 8px;
  width: calc(100% - 196px);
}
.main-task main.active-task-detail {
  width: calc(100% - 801px);
  margin-right: 605px;
}

.main-dashboard {
  display: flex;
  width: 2100px;
  padding-bottom: 5px;
}

.content-item-task .o-search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(100% - 78px);
}
.content-item-task .o-search .search {
  background: transparent;
  outline: 0;
  border: none;
  line-height: 1;
  height: 14px;
  transition: all 0.3s ease;
}
.content-item-task .o-search .search:hover {
  opacity: 0.7;
}
.content-item-task .o-search .ct-search {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 21px;
}
.content-item-task .o-search .ct-search input {
  width: 0;
  transition: all 0.5s ease;
  color: #ccc;
  position: absolute;
  bottom: 0px;
  padding-bottom: 0;
  line-height: 1;
  right: 14px;
}
.content-item-task .o-search .ct-search.active input {
  width: calc(100% - 14px);
  border-color: rgba(255, 255, 255, 0.3);
}
.content-item-task:not(:last-child) {
  margin-right: 16px;
}

.top-item {
  display: flex;
  justify-content: space-between;
}

.content-item-task {
  width: 330px;
}

.task-item-option {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 200px;
}
.task-item-option .o-item {
  line-height: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.task-item-option .o-item:not(:last-child) {
  margin-right: 10px;
}
.task-item-option .o-item img {
  transition: all 0.3s ease;
}
.task-item-option .o-item:hover img {
  opacity: 0.7;
}
.task-item-option .o-item.o-search:hover img {
  opacity: 1;
}

.task-top-title {
  font-size: 14px;
  width: calc(100% - 200px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
}

.task-board-container {
  padding: 5px 5px;
  background: #F2F2F2;
  border-radius: 6px;
  margin-top: 5px;
}
.task-board-container .task-container {
  max-height: calc(100vh - 155px);
  padding: 5px 5px;
  height: 100%;
  overflow: auto;
}
.task-board-container .task-container::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #ccc;
}
.task-board-container .task-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.task-board-container .task-container::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #6d6d6d;
}
.task-board-container .board-item {
  padding: 8px 10px 10px;
  background: #fff;
  border: 1px solid #DEDEDE;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.task-board-container .board-item:not(:last-child) {
  margin-bottom: 12px;
}

.task-gr-action {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  flex-wrap: wrap;
}
.task-gr-action .box {
  display: flex;
}
.task-gr-action .ac {
  position: relative;
  cursor: pointer;
  margin-right: 10px;
}
.task-gr-action .ac-sub-task {
  padding-left: 20px;
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 16 16'%3E%3Cpath id='check-circle' d='M6.884,10.419a.556.556,0,0,1-.395-.163L5,8.767a.558.558,0,0,1,.789-.789L6.883,9.071,10.21,5.745A.558.558,0,0,1,11,6.534L7.278,10.255a.556.556,0,0,1-.395.163Zm4.231,4.953A8,8,0,1,0,4,1.071a.558.558,0,0,0,.559.966A6.88,6.88,0,1,1,2.037,4.558.558.558,0,1,0,1.071,4,8,8,0,0,0,11.114,15.371Z' fill='%23111'/%3E%3C/svg%3E%0A") no-repeat left center;
  transition: all 0.3s ease;
  background-size: 15px 15px;
}
.task-gr-action .ac-sub-task:hover {
  opacity: 0.7;
}
.task-gr-action .ac-prioritize {
  width: 18px;
  height: 18px;
  color: #fff;
  background: #232B3E;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding-top: 2px;
  transition: all 0.3s ease;
}
.task-gr-action .ac-prioritize:hover {
  opacity: 0.7;
}
.task-gr-action .ac-prioritize.e-dropdown-btn, .task-gr-action .ac-prioritize.e-dropdown-btn.e-btn {
  padding: 0;
  border-radius: 50%;
  box-shadow: none;
  font-size: 12px;
}
.task-gr-action .ac-prioritize.e-dropdown-btn:hover, .task-gr-action .ac-prioritize.e-dropdown-btn.e-active, .task-gr-action .ac-prioritize.e-dropdown-btn.e-btn:hover, .task-gr-action .ac-prioritize.e-dropdown-btn.e-btn.e-active {
  background: #232B3E;
  color: #fff;
}

.task-cm-filter .task-box-filter.e-dropdown-btn, .task-cm-filter .task-box-filter.e-dropdown-btn.e-btn {
  height: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  border: none;
  color: #111;
}
.task-cm-filter .task-box-filter i {
  color: #555555;
  margin-right: 5px;
}

.main-task .e-dropdown-popup {
  border-radius: 4px;
}
.main-task .e-dropdown-popup ul .e-item {
  padding: 0;
}
.main-task .e-dropdown-popup ul .e-item .e-menu-icon {
  margin-right: 6px;
  font-size: 14px;
}

.gr-stt-total-time {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #ccc;
}

.task-stt {
  text-align: center;
  font-size: 12px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
  color: #000;
  height: 20px;
  width: 85px;
}
.task-stt.stt-working {
  background: rgba(25, 181, 254, 0.15);
  color: #009ef6;
}
.task-stt.stt-pending {
  background: rgba(202, 105, 36, 0.15);
  color: #CA6924;
}
.task-stt.stt-finish {
  background: rgba(38, 166, 91, 0.15);
  color: #26A65B;
}
.task-stt.stt-overdue {
  background: rgba(207, 0, 15, 0.15);
  color: #CF000F;
}
.task-stt.stt-confirm {
  background: rgba(0, 100, 66, 0.15);
  color: #008155;
}
.task-stt.stt-urgent {
  background: rgba(247, 186, 8, 0.15);
  color: #F7BA08;
}
.task-stt.stt-cancelled {
  background: rgba(233, 68, 52, 0.15);
  color: #e94434;
}

.total-time {
  font-size: 12px;
}

.task-note-color {
  position: fixed;
  bottom: 6px;
  right: 20px;
  color: #fff;
}
.task-note-color [class*=c-] {
  position: relative;
  z-index: 0;
  padding-left: 18px;
}
.task-note-color [class*=c-]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 2px;
}
.task-note-color [class*=c-]:not(:last-child) {
  margin-right: 15px;
}
.task-note-color .c-new::before {
  background: #000;
}
.task-note-color .c-working::before {
  background: #009ef6;
}
.task-note-color .c-pending::before {
  background: #CA6924;
}
.task-note-color .c-finish::before {
  background: #26A65B;
}
.task-note-color .c-confirm::before {
  background: #008155;
}
.task-note-color .c-overdue::before {
  background: #CF000F;
}
.task-note-color .c-urgent::before {
  background: #F7BA08;
}

body.none-scroll::-webkit-scrollbar {
  width: 0;
}

.task-detail-customize {
  position: fixed;
  width: 385px;
  top: 45px;
  right: -625px;
  bottom: 0;
  background: #fff;
  z-index: 2;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  padding: 10px 15px;
}
.task-detail-customize.active {
  right: 0;
}
.task-detail-customize .close-customize {
  position: absolute;
  top: 13px;
  right: 5px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70.08 64'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %238B8B8B; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m53.6,34.32c1.53-1.53,1.53-4.01,0-5.54l-19.55-19.55c-1.53-1.53-4.01-1.53-5.54,0s-1.53,4.01,0,5.54l12.89,12.88H3.91c-2.16,0-3.91,1.75-3.91,3.91s1.75,3.91,3.91,3.91h37.48l-12.87,12.88c-1.53,1.53-1.53,4.01,0,5.54s4.01,1.53,5.54,0l19.55-19.55h-.01Zm12.48,29.68h0c-2.21,0-4-1.79-4-4V4c0-2.21,1.79-4,4-4h0c2.21,0,4,1.79,4,4v56c0,2.21-1.79,4-4,4Z'/%3E%3C/svg%3E") no-repeat center/16px auto;
  transition: all 0.3s ease;
}
.task-detail-customize .close-customize:hover {
  background-color: #e9e9e9;
  border-radius: 4px;
}
.task-detail-customize .ttl-customize-home {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}
.task-detail-customize .presentation-ttl {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}
.task-detail-customize .customization-pane-background-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 12px;
  margin-bottom: 15px;
}
.task-detail-customize .customization-pane-background-picker .background-preview {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-bottom: 5px;
  cursor: pointer;
}
.task-detail-customize .customization-pane-background-picker .preview-check {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-detail-customize .customization-pane-background-picker .preview-check svg {
  fill: #fff;
  width: 50%;
}
.task-detail-customize .customization-pane-background-picker .preview-check.black svg {
  fill: #333;
}
.task-detail-customize .widgets-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.task-detail-customize .widgets-item:not(:last-child) {
  margin-bottom: 10px;
}
.task-detail-customize .widgets-item:hover {
  padding-left: 15px;
  padding-right: 15px;
  background: rgba(59, 157, 189, 0.1);
}
.task-detail-customize .widgets-item .ttl {
  margin-bottom: 0;
}
.task-detail-customize .widgets-item .btn-add {
  padding-left: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23777'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E") no-repeat left 0 center/12px auto;
  color: #777;
  font-weight: 600;
}

.task-detail {
  position: fixed;
  width: 625px;
  top: 45px;
  right: -625px;
  bottom: 38px;
  background: #fff;
  z-index: 2;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}
.task-detail.active {
  right: 0;
}
.task-detail .gr-follower-detail {
  margin-top: 8px;
  display: flex;
}
.task-detail .gr-follower-detail .txt-ttl {
  margin-right: 8px;
  font-weight: 600;
  margin-top: 5px;
}
.task-detail .gr-follower-detail .gr-user {
  display: flex;
}
.task-detail .gr-follower-detail .gr-user .item-user {
  width: 22px;
  height: 22px;
  border: 1px dashed #ccc;
  border-radius: 50%;
  overflow: hidden;
}
.task-detail .gr-follower-detail .gr-user .item-user:not(:last-child) {
  margin-right: 5px;
}
.task-detail .gr-follower-detail .gr-user .item-user::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10.4' viewBox='0 0 13 10.4'%3E%3Cpath id='user-plus-solid' d='M1.95,2.6a2.6,2.6,0,1,1,2.6,2.6,2.6,2.6,0,0,1-2.6-2.6ZM0,9.8A3.621,3.621,0,0,1,3.622,6.175H5.478A3.621,3.621,0,0,1,9.1,9.8a.6.6,0,0,1-.6.6H.6A.6.6,0,0,1,0,9.8ZM10.238,6.337v-1.3h-1.3a.488.488,0,1,1,0-.975h1.3v-1.3a.488.488,0,1,1,.975,0v1.3h1.3a.488.488,0,0,1,0,.975h-1.3v1.3a.488.488,0,1,1-.975,0Z' fill='%23999'/%3E%3C/svg%3E%0A") no-repeat top 50% left calc(50% + 1px);
}
.task-detail .gr-follower-detail .gr-user .item-add {
  color: #999999;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  margin-top: 5px;
}
.task-detail .gr-follower-detail .gr-user .item-user,
.task-detail .gr-follower-detail .gr-user .item-add {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 0;
}
.task-detail .gr-follower-detail .gr-user .item-user::after,
.task-detail .gr-follower-detail .gr-user .item-add::after {
  content: "";
  position: absolute;
  z-index: -1;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: #e9e9e9;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.task-detail .gr-follower-detail .gr-user .item-user:hover::after,
.task-detail .gr-follower-detail .gr-user .item-add:hover::after {
  width: 100%;
  height: 100%;
}
.task-detail .gr-priority-detail {
  margin-bottom: 15px;
}
.task-detail .gr-priority-detail .txt-ttl {
  font-weight: 600;
}

.task-detail-title {
  background: #F9F8F8;
  padding: 10px 15px 12px;
  border-bottom: 1px solid #d9d9d9;
  position: relative;
}
.task-detail-title .staff-img {
  right: 14px;
  bottom: -25px;
  z-index: 200000;
  position: absolute;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23999'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/%3E%3C/svg%3E") no-repeat center/30px #fff;
}
.task-detail-title .group-tag {
  width: calc(100% - 76px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
.task-detail-title .group-tag .ttl-tag {
  font-weight: 600;
  margin-right: 8px;
  display: inline-block;
  width: 80px;
}
.task-detail-title .group-tag .txt {
  font-style: italic;
}
.task-detail-title .task-new-name {
  margin-bottom: 5px;
  margin-right: 8px;
  background: #000;
  color: #fff;
  padding: 3px 8px;
  display: inline-block;
  line-height: 1;
  border-radius: 4px;
  font-size: 11px;
}

.task-detail-content {
  padding: 0 15px;
  height: calc(100vh - 122px);
  overflow: auto;
}
.task-detail-content::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #ccc;
}
.task-detail-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.task-detail-content::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #6d6d6d;
}
.task-detail-content.task-detail-suggestion {
  background: #F5F5F5;
  height: 100%;
}
.task-detail-content.detail-main {
  padding-top: 10px;
  height: calc(100vh - 340px);
}
.task-detail-content .title {
  font-weight: 600;
  margin-bottom: 5px;
}
.task-detail-content .title-progress {
  position: relative;
}
.task-detail-content .title-progress .number-done {
  position: absolute;
  right: 0;
  top: 5px;
  color: #555555;
}
.task-detail-content .ttl-description {
  display: flex;
  justify-content: space-between;
}
.task-detail-content .ttl-description .des-icon-edit {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #999999;
  font-size: 10px;
  cursor: pointer;
}
.task-detail-content .ttl-description .des-icon-edit:hover {
  color: #009ef6;
  border-color: #009ef6;
}
.task-detail-content .number-progress {
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 8px;
  margin-left: 5px;
}
.task-detail-content .b-user-assign {
  cursor: pointer;
  border: 1px dashed #ccc;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: relative;
  z-index: 0;
  transition: all 0.3s ease;
  overflow: hidden;
  margin-left: 2px;
}
.task-detail-content .b-user-assign.e-dropdown-btn, .task-detail-content .b-user-assign.e-dropdown-btn.e-btn {
  box-shadow: none;
  padding: 0;
  border-radius: 50%;
}
.task-detail-content .b-user-assign::after, .task-detail-content .b-user-assign::before {
  content: "";
  position: absolute;
  z-index: -1;
}
.task-detail-content .b-user-assign::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23999'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z' /%3E%3C/svg%3E") no-repeat center/12px auto;
}
.task-detail-content .b-user-assign::after {
  content: "";
  position: absolute;
  z-index: -1;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: #E9E9E9;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.task-detail-content .b-user-assign:hover.e-dropdown-btn, .task-detail-content .b-user-assign:hover.e-dropdown-btn.e-btn {
  background: none;
  border: 1px solid #E9E9E9;
}
.task-detail-content .b-user-assign:hover::after {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.task-box-name-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  margin-bottom: 10px;
}

.task-top-pane-toolbar {
  border-bottom: 1px solid #d9d9d9;
  padding: 5px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F5F5F5;
}
.task-top-pane-toolbar .mark-btn-complete {
  padding: 0 10px 2px 28px;
  border: 1px solid #ccc;
  display: table;
  border-radius: 4px;
  transition: all 0.3s ease;
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z' style='fill: %238B8B8B;'/%3E%3C/svg%3E") no-repeat left 8px center/12px auto;
  cursor: pointer;
}
.task-top-pane-toolbar .mark-btn-complete:hover {
  background-color: rgba(38, 166, 91, 0.15);
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z' style='fill: %2326a65b;'/%3E%3C/svg%3E");
  color: #26A65B;
  border-color: #26A65B;
}
.task-top-pane-toolbar .mark-btn {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='icon' transform='translate(0 0.251)'%3E%3Cg id='Rectangle_18' data-name='Rectangle 18' transform='translate(0 -0.251)' fill='none' stroke='%23999' stroke-width='1'%3E%3Crect width='18' height='18' rx='9' stroke='none'/%3E%3Crect x='0.5' y='0.5' width='17' height='17' rx='8.5' fill='none'/%3E%3C/g%3E%3Cpath id='check-solid_1_' data-name='check-solid (1)' d='M7.758,96.192a.572.572,0,0,1,0,.809l-4.571,4.571a.572.572,0,0,1-.809,0L.092,99.287A.572.572,0,0,1,.9,98.478l1.882,1.88,4.167-4.166a.572.572,0,0,1,.809,0Z' transform='translate(5.075 -90.025)' fill='%23999'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat left top 1.5px/18px auto;
  cursor: pointer;
  width: 20px;
  height: 20px;
}
.task-top-pane-toolbar .mark-btn:hover {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='icon' transform='translate(0 0.251)'%3E%3Cg id='Rectangle_18' data-name='Rectangle 18' transform='translate(0 -0.251)' fill='none' stroke='%2326A65B' stroke-width='1'%3E%3Crect width='18' height='18' rx='9' stroke='none'/%3E%3Crect x='0.5' y='0.5' width='17' height='17' rx='8.5' fill='none'/%3E%3C/g%3E%3Cpath id='check-solid_1_' data-name='check-solid (1)' d='M7.758,96.192a.572.572,0,0,1,0,.809l-4.571,4.571a.572.572,0,0,1-.809,0L.092,99.287A.572.572,0,0,1,.9,98.478l1.882,1.88,4.167-4.166a.572.572,0,0,1,.809,0Z' transform='translate(5.075 -90.025)' fill='%2326A65B'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat left top 1.5px/18px auto;
}
.task-top-pane-toolbar .pane-toolbar {
  display: flex;
}
.task-top-pane-toolbar .pane-toolbar .item {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.task-top-pane-toolbar .pane-toolbar .item:hover {
  background-color: #e9e9e9;
}
.task-top-pane-toolbar .pane-toolbar .item.pane-option {
  padding: 0;
  box-shadow: none;
}
.task-top-pane-toolbar .pane-toolbar .item-reload {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B8B8B'%3E%3Cpath d='M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.19-.35 2.29-.94 3.22l1.46 1.46A7.938 7.938 0 0 0 20 12c0-4.42-3.58-8-8-8zm-6.94 2.78L3.6 5.32A7.938 7.938 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3c-3.31 0-6-2.69-6-6 0-1.19.35-2.29.94-3.22z'/%3E%3C/svg%3E") no-repeat center/16px auto;
}
.task-top-pane-toolbar .pane-toolbar .item1 {
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.23 28'%3E%3Cpath d='M17.5,28c-.38-.03-.76-.08-1.14-.08-2.89.02-5.77-.2-8.64-.56-.17-.02-.38.03-.54.11-.4.2-.82.3-1.26.3-1.12,0-2.24,0-3.36,0-1.24,0-2.15-.69-2.46-1.84-.07-.24-.09-.5-.09-.76C0,22.11,0,19.05,0,15.99c0-1.57,1.03-2.6,2.61-2.6.98,0,1.95,0,2.93,0,.56,0,1.11,0,1.63.29.33-.67.7-1.31,1.25-1.8.58-.51,1.09-1.09,1.46-1.76.73-1.29,1.43-2.6,2.09-3.92.41-.82.74-1.68,1.07-2.54.09-.24.08-.53.11-.79.06-.55.05-1.11.17-1.65C13.46.59,13.91.18,14.55,0,14.77,0,14.98,0,15.2,0c.05.02.1.04.15.05,1.82.28,3.01,1.59,3.14,3.42.07,1.03-.09,2.03-.36,3.02-.27.99-.56,1.98-.81,2.97-.08.33-.09.68-.13,1.04.11,0,.17,0,.23-.02,1.17-.17,2.34-.38,3.51-.5,1.11-.11,2.22-.03,3.3.3,1.95.59,2.95,2.3,2.29,4.25-.03.1.01.25.07.34.29.45.5.93.59,1.46.15.91-.09,1.73-.62,2.47-.09.13-.15.24-.1.42.44,1.48.1,2.77-.98,3.85-.12.12-.16.24-.15.41.09,1.16-.29,2.13-1.15,2.91-.86.79-1.93,1.15-3.05,1.37-.53.1-1.08.15-1.62.22h-2.02ZM8.45,25.85s.06.01.1.02c1.52.13,3.05.33,4.57.39,2.26.09,4.52.1,6.77.09.92,0,1.82-.25,2.65-.69.95-.51,1.38-1.28,1.18-2.29-.11-.55.05-.91.47-1.25.87-.7,1.11-1.69.66-2.67-.23-.5-.15-.89.2-1.29.78-.88.76-1.78,0-2.68-.41-.48-.43-.65-.15-1.23.52-1.04.17-2.01-.93-2.37-.59-.19-1.22-.29-1.84-.33-1.64-.11-3.25.21-4.84.56-.78.17-1.48-.26-1.6-1.05-.07-.44-.08-.89-.04-1.33.1-1.08.44-2.1.76-3.12.31-.99.56-1.98.48-3.03-.09-1.09-.65-1.76-1.7-1.98-.34-.07-.42-.03-.44.31-.02.36,0,.73-.01,1.09,0,.24.03.51-.05.73-.8,2.15-1.72,4.25-2.87,6.24-.59,1.03-1.23,2.03-2.11,2.84-.45.41-.8.87-1.05,1.42-.14.32-.25.66-.29,1.01-.04.3.06.61.07.92,0,3.22,0,6.45,0,9.7ZM1.58,20.55c0,1.57,0,3.13,0,4.7,0,.59.35.94.93.94,1.11,0,2.22,0,3.33,0,.68,0,1.02-.33,1.02-1,0-3.08,0-6.16,0-9.24,0-.66-.33-.99-1-.99-1.09,0-2.19,0-3.28,0-.7,0-1.01.32-1.01,1.02,0,1.52,0,3.04,0,4.56Z' style='fill: %238B8B8B; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat center/16px auto;
}
.task-top-pane-toolbar .pane-toolbar .item2 {
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.7 22.71'%3E%3Cpath d='M22.7,5.08c-.02,1.67-.57,2.95-1.65,4.02-1.57,1.55-3.14,3.1-4.67,4.68-1.99,2.06-5.41,2.13-7.46.1-.38-.38-.41-.91-.06-1.27.35-.36.87-.35,1.27.01,1.24,1.12,2.9,1.33,4.26.49.33-.2.62-.47.9-.75,1.58-1.57,3.17-3.13,4.71-4.72,1-1.03,1.21-2.3.73-3.63-.47-1.32-1.46-2.06-2.85-2.23-1.12-.13-2.1.2-2.91,1.01-.89.89-1.78,1.78-2.67,2.66-.31.31-.73.37-1.08.17-.34-.19-.52-.56-.42-.95.04-.16.13-.32.25-.44.9-.92,1.79-1.85,2.72-2.73,1.51-1.42,3.31-1.85,5.29-1.25,1.94.59,3.09,1.95,3.53,3.91.08.34.09.7.11.9ZM8.76,21.36c1-.94,1.96-1.93,2.92-2.91.11-.11.18-.28.22-.43.08-.4-.1-.76-.44-.94-.34-.18-.75-.11-1.05.19-.89.89-1.78,1.77-2.67,2.66-.82.82-1.81,1.15-2.94,1.01-1.38-.17-2.36-.92-2.82-2.22-.47-1.32-.27-2.58.72-3.61,1.62-1.68,3.29-3.31,4.94-4.95,1.39-1.38,3.46-1.4,4.92-.07.42.38.94.39,1.29.03.35-.37.32-.9-.08-1.29-2.05-2.01-5.46-1.93-7.45.14-1.53,1.59-3.09,3.14-4.68,4.68C.1,15.13-.43,17.44.37,19.46c.78,1.97,2.68,3.24,4.98,3.24,1.21-.01,2.42-.42,3.41-1.35Z' style='fill: %238B8B8B; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat center/15px auto;
}
.task-top-pane-toolbar .pane-toolbar .item3 {
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.6 16.09'%3E%3Cpath d='M2.24,10.53v-4.96C.64,5.2-.2,3.69.04,2.31.28.99,1.43.01,2.78,0c1.36-.01,2.51.93,2.78,2.28.26,1.29-.48,2.84-2.14,3.27.06.35.2.66.41.93.47.63,1.11.98,1.9.99,1.07.02,2.14,0,3.21,0,.02,0,.05,0,.08,0,.2-.84.67-1.49,1.44-1.91.61-.33,1.26-.41,1.94-.26,1.31.29,2.23,1.49,2.18,2.86-.04,1.3-1.09,2.46-2.36,2.65-1.29.2-2.79-.54-3.21-2.22h-.19c-.98,0-1.95,0-2.93,0-.93,0-1.74-.28-2.45-.89-.02-.02-.04-.04-.08-.07v2.88c.87.21,1.54.71,1.95,1.53.3.6.36,1.23.21,1.88-.31,1.32-1.51,2.21-2.91,2.15-1.28-.06-2.41-1.1-2.6-2.35-.21-1.38.63-2.84,2.21-3.2ZM2.8,1.12c-.93,0-1.68.76-1.68,1.69,0,.92.77,1.69,1.69,1.68.93,0,1.68-.77,1.68-1.69,0-.93-.76-1.68-1.69-1.67ZM11.79,6.36c-.93,0-1.68.76-1.68,1.69,0,.93.76,1.68,1.69,1.68.93,0,1.68-.76,1.68-1.69,0-.93-.76-1.68-1.69-1.68ZM2.8,14.97c.93,0,1.69-.75,1.69-1.68,0-.93-.75-1.69-1.68-1.69-.92,0-1.69.76-1.69,1.68,0,.93.75,1.68,1.68,1.69Z' style='fill: %238B8B8B; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat center/13px auto;
}
.task-top-pane-toolbar .pane-toolbar .item4 {
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M28,9.84c-.11.26-.24.49-.52.59-.64.24-1.22-.15-1.23-.84,0-1.91,0-3.83,0-5.74,0-.27,0-.54,0-.87-.12.11-.19.18-.27.25-2.91,2.91-5.81,5.81-8.72,8.72-.27.27-.57.41-.95.35-.23-.04-.39-.16-.44-.39-.13-.59-.12-1.11.38-1.59,2.85-2.76,5.67-5.54,8.5-8.32.07-.07.15-.13.23-.2,0-.02-.01-.05-.02-.07-.09,0-.18,0-.28,0-2.09,0-4.17,0-6.26,0-.71,0-1.11-.58-.86-1.23.11-.28.34-.42.6-.52h9.19c.33.11.55.33.66.66v9.19ZM0,27.34c.11.33.33.55.66.66h9.19c.26-.11.49-.24.59-.52.24-.65-.16-1.23-.86-1.23-2.09,0-4.17,0-6.26,0-.09,0-.18,0-.28,0,0-.02-.02-.05-.02-.07.08-.07.16-.13.23-.2,2.84-2.84,5.68-5.68,8.53-8.52.4-.4.5-.86.35-1.37-.04-.13-.19-.3-.31-.32-.49-.07-.95-.03-1.33.36-2.82,2.89-5.65,5.77-8.48,8.65-.07.07-.14.13-.25.23,0-.45,0-.85,0-1.25,0-1.79,0-3.57,0-5.36,0-.69-.62-1.09-1.25-.83-.27.11-.39.34-.49.59v9.19Z' style='fill: %238B8B8B; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat center/13px auto;
}
.task-top-pane-toolbar .pane-toolbar .item5 {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z' style='fill: %238B8B8B;'/%3E%3C/svg%3E") no-repeat center/13px auto;
}
.task-top-pane-toolbar .pane-toolbar .item6 {
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70.08 64'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %238B8B8B; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m53.6,34.32c1.53-1.53,1.53-4.01,0-5.54l-19.55-19.55c-1.53-1.53-4.01-1.53-5.54,0s-1.53,4.01,0,5.54l12.89,12.88H3.91c-2.16,0-3.91,1.75-3.91,3.91s1.75,3.91,3.91,3.91h37.48l-12.87,12.88c-1.53,1.53-1.53,4.01,0,5.54s4.01,1.53,5.54,0l19.55-19.55h-.01Zm12.48,29.68h0c-2.21,0-4-1.79-4-4V4c0-2.21,1.79-4,4-4h0c2.21,0,4,1.79,4,4v56c0,2.21-1.79,4-4,4Z'/%3E%3C/svg%3E") no-repeat center/16px auto;
}

.task-top-pane-item {
  display: flex;
  align-items: center;
}
.task-top-pane-item:not(:last-child) {
  margin-bottom: 5px;
}
.task-top-pane-item .pane-title {
  width: 120px;
  font-weight: 600;
}
.task-top-pane-item .content {
  width: calc(100% - 120px);
}
.task-top-pane-item .content .text-default {
  color: #999999;
}
.task-top-pane-item .content .text-default input {
  padding-bottom: 0;
  border-bottom: none;
}
.task-top-pane-item .content .icon-calendar {
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Cpath d='M24.27,4h-3.27v-2c0-1.1-.9-2-2-2s-2,.9-2,2v2h-6v-2c0-1.1-.9-2-2-2s-2,.9-2,2v2h-3.27c-2.06,0-3.73,1.79-3.73,4v20c0,2.21,1.67,4,3.73,4h20.53c2.06,0,3.73-1.79,3.73-4V8c0-2.21-1.67-4-3.73-4ZM26.13,28c0,1.1-.84,2-1.87,2H3.73c-1.03,0-1.87-.9-1.87-2V11h24.27v17ZM12,21h-6v-6h6v6Z' style='fill: %23999; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat center/14px auto;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border: 1px dashed #ccc;
  border-radius: 50%;
}
.task-top-pane-item .content .txt-due-date {
  display: flex;
  align-items: center;
}
.task-top-pane-item .content .txt-due-date .text-default {
  width: calc(100% - 38px);
}

.task-title-request {
  margin: -15px -15px 15px;
  padding: 15px 15px 15px 38px;
  font-size: 14px;
  font-weight: 600;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.92 40.5'%3E%3Cpath d='M2.99,31.45c-1.63-.47-2.65-1.47-2.95-3.14-.04-.24-.05-.5-.05-.75C0,21.19,0,14.82,0,8.44c0-2.34,1.59-3.94,3.94-3.94,9.85,0,19.71,0,29.56,0,2.34,0,3.92,1.6,3.92,3.95,0,6.37,0,12.75,0,19.12,0,2.32-1.6,3.92-3.91,3.92-6.99,0-13.97,0-20.96,0-.34,0-.57.08-.8.34-2.39,2.72-4.8,5.42-7.21,8.13-.06.07-.12.14-.19.21-.24.27-.52.4-.87.27-.37-.14-.51-.42-.5-.81,0-2.55,0-5.09,0-7.64,0-.17,0-.34,0-.55ZM8.98,15.75c-1.25,0-2.21.96-2.22,2.23-.01,1.28.96,2.27,2.23,2.27,1.25,0,2.21-.96,2.22-2.23.01-1.28-.96-2.27-2.23-2.27ZM18.71,15.75c-1.25,0-2.21.96-2.22,2.23-.01,1.28.96,2.27,2.23,2.27,1.25,0,2.21-.96,2.22-2.23.01-1.28-.96-2.27-2.23-2.27ZM28.46,20.25c1.25,0,2.2-.97,2.21-2.24,0-1.28-.97-2.27-2.24-2.26-1.25,0-2.2.97-2.21,2.24,0,1.28.97,2.27,2.24,2.26ZM5.2,3c9.39,0,18.77,0,28.16,0,.51,0,1.03.03,1.53.15,2.45.58,4.04,2.65,4.04,5.23,0,5.98,0,11.97,0,17.95,0,.18,0,.36,0,.57.11-.02.17-.02.23-.03,1.65-.45,2.76-1.91,2.76-3.69,0-6.45,0-12.9,0-19.35,0-.2,0-.41-.04-.61C41.55,1.26,40.04,0,38.01,0,28.14,0,18.27,0,8.4,0c-.12,0-.25,0-.37,0-1.67.08-3.16,1.37-3.42,2.99h.6ZM9,17.26c-.41,0-.74.31-.75.73,0,.42.31.75.72.76.41,0,.74-.31.75-.73,0-.42-.31-.75-.72-.76ZM19.45,18c0-.42-.32-.75-.73-.75-.41,0-.74.32-.74.74,0,.42.32.75.73.75.41,0,.74-.32.74-.74ZM28.47,17.26c-.41-.01-.75.31-.76.72-.01.42.3.76.72.77.41.01.75-.31.76-.72.01-.42-.3-.76-.72-.77Z' style='fill: %233b9dbd; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat top 18px left 15px/18px auto #fff;
}

.task-content-request .task-content-box {
  display: flex;
}
.task-content-request .task-content-box .chat-avatar {
  width: 30px;
  height: 30px;
  background: url(../images/task-icon-robot.png) no-repeat center/contain;
  margin-right: 10px;
}
.task-content-request .task-content-box .content-chat {
  width: calc(100% - 40px);
}
.task-content-request .task-content-box .content-chat .chat {
  background: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  margin-bottom: 15px;
}
.task-content-request .task-content-box .content-option {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.task-content-request .task-content-box .content-option .btn-option {
  background: #fff;
  border-radius: 100px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
  cursor: pointer;
}
.task-content-request .task-content-box .content-option .btn-option:hover {
  border-color: #009ef6;
  background: rgba(59, 157, 189, 0.1);
}
.task-content-request .task-content-box .content-option .btn-option:not(:last-child) {
  margin-right: 7px;
}
.task-content-request .task-content-box .content-option .more {
  line-height: 0;
  display: flex;
  align-items: center;
  color: #999999;
  cursor: pointer;
  transition: all 0.3s ease;
}
.task-content-request .task-content-box .content-option .more:hover {
  color: #009ef6;
}
.task-content-request .task-content-box .content-option.col2 {
  justify-content: space-between;
}
.task-content-request .task-content-box .content-option.col2 .btn-option {
  width: calc(50% - 5px);
  border-radius: 6px;
}
.task-content-request .task-content-box .content-option.col1 {
  flex-wrap: wrap;
  flex-direction: column;
}
.task-content-request .task-content-box .content-option.col1 .item:not(:last-child) {
  margin-bottom: 8px;
}
.task-content-request .task-content-box .content-option.col1 .number {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  width: 18px;
  height: 18px;
  background: #232B3E;
  border-radius: 50%;
  color: #fff;
  margin-right: 5px;
}
.task-content-request .task-content-box .content-option.col1 .btn-number {
  display: inline-flex;
}
.task-content-request .task-content-box .content-option.col1 .btn-option {
  border-radius: 100px;
}
.task-content-request .task-content-box .content-option.col1 .btn-option:not(:last-child) {
  margin-right: 0;
}
.task-content-request .content-selected {
  padding: 5px 10px;
  background: #009ef6;
  color: #fff;
  border-radius: 6px;
  display: table;
  margin-left: auto;
  margin-bottom: 15px;
}

.task-due-date-time {
  display: flex;
  margin-bottom: 5px;
  font-weight: 600;
}
.task-due-date-time .date {
  color: #8D0801;
  display: flex;
  padding-right: 18px;
  margin-left: 5px;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 562.48 666.67'%3E%3Cpath d='M78.54,613.76c29.31,24.56,64.03,41.82,101.3,50.37,3.57,1.17,5.97-3.5,3.57-5.83-79.83-76.17-35.97-158.6-3.57-195.77,23.1-26.53,56-70.23,53.6-128.83,0-5.87,6-10.57,10.73-7.03,45.3,23.43,76.27,75,84.6,117.17,13.13-12.87,17.9-32.8,17.9-50.37,0-5.87,7.13-10.57,13.1-5.87,42.9,38.67,116.77,169.9-2.4,273-2.37,2.37,0,7.07,2.4,5.9,36.13-9.47,70.11-25.79,100.1-48.07,194.23-150,67.9-416-14.33-503.87-10.7-10.57-29.77-3.53-29.77,11.7-1.2,31.67-10.73,66.8-35.73,90.23C360.97,136.82,297.44,46.32,206.87,1.79c-11.9-5.87-26.2,3.5-25,16.4,2.33,109-68.77,178.4-130.73,268.63-54.83,80.83-90.57,229.67,27.4,326.93h0Z' style='fill: %238D0801; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat top 2px right/12px auto;
}
.task-due-date-time .time {
  margin-left: 10px;
  padding-left: 16px;
  color: #009ef6;
  font-weight: 600;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath id='clock-rotate-left-solid' d='M1.758,1.758l-.8-.8a.563.563,0,0,0-.961.4v2.58A.561.561,0,0,0,.563,4.5h2.58a.563.563,0,0,0,.4-.961L2.82,2.817a4.5,4.5,0,1,1,.609,6.877.751.751,0,1,0-.86,1.23,6,6,0,1,0-.811-9.166ZM6,3a.561.561,0,0,0-.562.563V6a.562.562,0,0,0,.164.4L7.289,8.086a.562.562,0,1,0,.795-.795L6.56,5.768V3.563A.561.561,0,0,0,6,3Z' fill='%2319b5fe'/%3E%3C/svg%3E%0A") no-repeat top 3px left/12px auto;
}

.task-content-description {
  margin-top: 12px;
  margin-bottom: 45px;
  padding: 4px 0 4px;
  border-radius: 4px;
  border: 0;
  width: 100%;
  transition: all 0.35s ease;
  cursor: pointer;
}
.task-content-description:hover {
  background: #E9E9E9;
  padding-left: 10px;
}

.task-box-editor .e-richtexteditor.e-rte-tb-expand {
  border-top: none;
  border-bottom: none;
}

.LightMode .task-box-editor {
  margin-bottom: 10px;
}
.LightMode .task-box-editor textarea {
  width: 100%;
  border-radius: 4px;
  border-color: #ccc;
  height: 105px;
}

.txt-placeholder {
  margin-bottom: 0;
  color: #8B8B8B;
}

.task-line-progress {
  width: 100%;
  height: 6px;
  position: relative;
  margin-top: 8px;
}
.task-line-progress::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: #d9d9d9;
  border-radius: 20px;
}
.task-line-progress .line-progress-finish {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 20px;
  height: 6px;
}

.task-subtask {
  margin-top: 10px;
  margin-bottom: 10px;
}
.task-subtask .task-subtask-title .filter {
  color: #999999;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}
.task-subtask .task-subtask-title .filter:hover {
  opacity: 0.7;
}
.task-subtask .task-subtask-title .filter.e-dropdown-btn, .task-subtask .task-subtask-title .filter.e-dropdown-btn.e-btn {
  padding: 0;
  box-shadow: none;
  background: transparent;
  border: none;
}

.icon-check-subtask {
  flex-shrink: 0;
  opacity: 1;
  visibility: visible;
  transition: all 0.35s ease;
}

.content-subtask {
  display: flex;
  transition: all 0.35s ease;
  margin-left: 0px;
  width: 100%;
}
.content-subtask .number {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #111;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  margin-top: 2px;
}
.content-subtask .ttl {
  font-size: 13px;
  margin-bottom: 5px;
}
.content-subtask .date-by {
  font-size: 11px;
  color: #555555;
  font-weight: #999999;
}
.content-subtask .box-txt {
  margin-left: 8px;
  width: 100%;
}
.content-subtask .box-txt .item-Attachment {
  display: flex;
}
.content-subtask .box-txt .item-Attachment .item-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #999999;
  background: #fff;
  transition: all 0.3s ease;
  cursor: pointer;
}
.content-subtask .box-txt .item-Attachment .item-action.ac-01 {
  font-size: 12px;
}
.content-subtask .box-txt .item-Attachment .item-action.ac-02 {
  padding-top: 2px;
  font-size: 12.7px;
  margin-right: 5px;
}
.content-subtask .box-txt .item-Attachment .item-action:hover {
  color: #009ef6;
  border-color: #009ef6;
}
.content-subtask .box-txt .number-attachment {
  position: absolute;
  right: 44px;
}
.content-subtask .box-txt .icon-attachment {
  position: relative;
}

.item-sub-task {
  display: flex;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ccc;
  position: relative;
  cursor: pointer;
}
.item-sub-task.item-sub-task-Working .content-subtask,
.item-sub-task.item-sub-task-Working .date-by {
  color: #009ef6;
}
.item-sub-task.item-sub-task-Working .number {
  border-color: #009ef6;
}
.item-sub-task.item-sub-task-Pending .content-subtask,
.item-sub-task.item-sub-task-Pending .date-by {
  color: #CA6924;
}
.item-sub-task.item-sub-task-Pending .number {
  border-color: #CA6924;
}
.item-sub-task.item-sub-task-Finished .content-subtask,
.item-sub-task.item-sub-task-Finished .date-by {
  color: #26A65B;
}
.item-sub-task.item-sub-task-Finished .number {
  border-color: #26A65B;
}

.task-action-option {
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 1;
  display: flex;
  transition: all 0.3s ease;
  animation: DropDownSlide 0.3s both;
}
.task-action-option .vsb-main {
  min-width: 125px;
}
.task-action-option .item-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #ccc;
  border-radius: 50%;
  color: #999999;
  background: #fff;
  transition: all 0.3s ease;
  cursor: pointer;
}
.task-action-option .item-action:not(:last-child) {
  margin-right: 5px;
}
.task-action-option .item-action.ac-01 {
  font-size: 12px;
}
.task-action-option .item-action.ac-02 {
  padding-top: 2px;
  font-size: 12.7px;
}
.task-action-option .item-action.ac-03 {
  font-size: 10.5px;
}
.task-action-option .item-action.ac-04 {
  font-size: 15px;
}
.task-action-option .item-action.ac-04 .popup-action-subtask {
  position: absolute;
  background: #dddddd;
  bottom: 12px;
  right: 12px;
  border-radius: 4px;
  padding: 10px;
}
.task-action-option .item-action.ac-04 .popup-action-subtask input {
  margin-bottom: 20px;
}
.task-action-option .item-action.ac-04 .popup-action-subtask .icon-remove {
  float: right;
  color: red;
}
.task-action-option .item-action.ac-04 .popup-action-subtask .disabled-icon {
  opacity: 0.5;
  cursor: not-allowed;
}
.task-action-option .item-action.ac-04 .popup-action-subtask .disabled-icon i {
  pointer-events: none;
}
.task-action-option .item-action:hover {
  color: #009ef6;
  border-color: #009ef6;
}

.item-add-sub-task {
  font-size: 13px;
  margin-top: 8px;
  padding: 5px 0px 8px 28px;
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='icon' transform='translate(0 0.251)'%3E%3Cg id='Rectangle_18' data-name='Rectangle 18' transform='translate(0 -0.251)' fill='none' stroke='%23999' stroke-width='1'%3E%3Crect width='18' height='18' rx='9' stroke='none'/%3E%3Crect x='0.5' y='0.5' width='17' height='17' rx='8.5' fill='none'/%3E%3C/g%3E%3Cpath id='check-solid_1_' data-name='check-solid (1)' d='M7.758,96.192a.572.572,0,0,1,0,.809l-4.571,4.571a.572.572,0,0,1-.809,0L.092,99.287A.572.572,0,0,1,.9,98.478l1.882,1.88,4.167-4.166a.572.572,0,0,1,.809,0Z' transform='translate(5.075 -90.025)' fill='%23999'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat left 3.5px/18px auto;
}
.item-add-sub-task > input {
  border-bottom: none;
  width: 100%;
}

.task-document-content {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  line-height: 0;
}
.task-document-content .item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: #999999;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}
.task-document-content .item:not(:last-child) {
  margin-right: 10px;
}
.task-document-content .item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: #E9E9E9;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.task-document-content .item:hover::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.task-document-content .item-file .img-file::before {
  z-index: 2;
  opacity: 0.7;
}
.task-document-content .item-file .img-file a {
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 3;
}
.task-document-content .item-file .img-file a img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.task-document-content .item-add-file {
  border: 1px dashed #ccc;
}

.task-group-activities {
  margin-top: 8px;
}

.item-activity {
  position: relative;
}
.item-activity:not(:last-child) {
  margin-right: 5px;
}
.item-activity.item2 {
  font-size: 10px;
  padding-bottom: 2px;
}
.item-activity .icon-activity {
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #232B3E;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.item-activity .icon-activity:hover {
  transform: translateY(-2px);
}
.item-activity .icon-activity.ic-action2 {
  padding-top: 0;
}
.item-activity .list-activity {
  position: absolute;
  top: 100%;
  border-radius: 4px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #ccc;
}
.item-activity .list-activity li {
  padding: 4px 0;
  display: flex;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.item-activity .list-activity li:not(:last-child) {
  border-bottom: 1px solid #ccc;
}
.item-activity .list-activity li:hover {
  color: #009ef6;
}
.item-activity .list-activity li:hover .icon {
  transform: translateY(-2px);
}
.item-activity .list-activity .icon {
  width: 18px;
  height: 18px;
  color: #fff;
  background: #232b3e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  padding-top: 2px;
  margin-right: 7px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.task-activities-detail {
  background: #F5F5F5;
  padding: 10px 15px;
  margin-top: 6px;
  margin-left: -15px;
  margin-right: -15px;
}

.task-chat-avatar {
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0 0;
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23999'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/%3E%3C/svg%3E") no-repeat top 5px center/8px auto #ccc;
}

.task-chat-date {
  font-size: 13px;
  text-align: center;
  padding: 0 5px;
  overflow: hidden;
}
.task-chat-date .number {
  padding: 0 10px;
  position: relative;
  z-index: 0;
}
.task-chat-date .number::before, .task-chat-date .number::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 100vw;
  height: 1px;
  background: #DEDEDE;
}
.task-chat-date .number::before {
  left: 100%;
}
.task-chat-date .number::after {
  right: 100%;
}

.task-chat-info {
  display: flex;
  align-items: flex-end;
}
.task-chat-info .task-chat-avatar {
  margin-right: 12px;
}
.task-chat-info .task-info {
  max-width: calc(100% - 32px);
  background: #fff;
  padding: 8px;
  border-radius: 4px 4px 4px 0;
  position: relative;
  z-index: 0;
  margin-top: 10px;
}
.task-chat-info .task-info::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10px;
  bottom: 0;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66.3 51.54'%3E%3Cpath d='M0,51.54S42.25,37.58,66.3.01c0-.9,0,51.52,0,51.52H0Z' style='fill: %23fff; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat bottom center/contain;
}
.task-chat-info .task-info .name {
  color: #009ef6;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.task-chat-info .task-info .chat {
  font-size: 12px;
}
.task-chat-info .task-info .time {
  margin-bottom: 0;
  color: #999999;
  font-size: 11px;
  text-align: right;
  line-height: 1;
}
.task-chat-info.task-my-chat .task-info {
  background: #CFE3EA;
  margin-left: auto;
}
.task-chat-info.task-my-chat .task-info::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: auto;
  transform: rotate(90deg);
  right: -10px;
  bottom: 0;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66.3 51.54'%3E%3Cpath d='M0,51.54S42.25,37.58,66.3.01c0-.9,0,51.52,0,51.52H0Z' style='fill: %23CFE3EA; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat bottom center/contain;
}
.task-chat-info.task-my-chat .task-info .time {
  color: #555555;
}

.task-detail-bottom {
  background: #F5F5F5;
  border-top: 1px solid #ccc;
  padding: 11px 15px;
}
.task-detail-bottom textarea {
  width: 100%;
  background: #fff;
}

.task-area {
  line-height: 0;
}
.task-area textarea {
  border-color: #ccc;
  border-radius: 4px;
  color: #111;
}

.task-gr-area {
  position: relative;
}
.task-gr-area .task-gr-tool {
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
}
.task-gr-area .task-gr-tool .item-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  cursor: pointer;
}
.task-gr-area .task-gr-tool .item-icon:hover {
  color: #111;
  background: #E9E9E9;
}
.task-gr-area .task-gr-tool .item-icon.task-area-more {
  font-size: 15px;
}
.task-gr-area .task-gr-tool .item-more {
  position: relative;
}
.task-gr-area .task-gr-tool .task-area-option {
  position: absolute;
  right: 0;
  bottom: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  padding: 5px 10px;
  z-index: 5;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  display: none;
}
.task-gr-area .task-gr-tool .task-area-option li {
  cursor: pointer;
  white-space: nowrap;
  color: #111;
  padding: 5px 0 5px 22px;
  font-size: 12px;
  transition: all 0.3s ease;
}
.task-gr-area .task-gr-tool .task-area-option li:not(:last-child) {
  border-bottom: 1px solid #ccc;
}
.task-gr-area .task-gr-tool .task-area-option li.itm01 {
  background: url("data:image/svg+xml,%3Csvg id='info-circle-svgrepo-com' xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath id='info-circle-svgrepo-com-2' data-name='info-circle-svgrepo-com' d='M19,10.5A8.5,8.5,0,1,1,10.5,2,8.5,8.5,0,0,1,19,10.5Zm-8.5,4.887a.638.638,0,0,0,.637-.637V9.65a.637.637,0,1,0-1.275,0v5.1A.638.638,0,0,0,10.5,15.387Zm0-9.137a.85.85,0,1,1-.85.85A.85.85,0,0,1,10.5,6.25Z' transform='translate(-2 -2)' fill='%238b8b8b' fill-rule='evenodd'/%3E%3C/svg%3E%0A") no-repeat left top 6px/15px auto;
}
.task-gr-area .task-gr-tool .task-area-option li.itm02 {
  background: url("data:image/svg+xml,%0A%3Csvg id='info-circle-svgrepo-com' xmlns='http://www.w3.org/2000/svg' width='16' height='18.652' viewBox='0 0 16 18.652'%3E%3Cpath id='time-ot' d='M11.312,4.941V4.106c-.224,0-.443,0-.661,0-.281,0-.34-.058-.341-.329q0-.654,0-1.308c0-.263.06-.318.328-.318H14.5c.255,0,.318.057.32.307q.005.663,0,1.327c0,.259-.063.318-.331.32-.219,0-.439,0-.668,0v.841a8.648,8.648,0,0,1,2.915,1.1.2.2,0,0,0,.186-.032c.249-.234.482-.483.731-.717a1.134,1.134,0,0,1,1.105-.285,1.1,1.1,0,0,1,.514,1.846c-.206.222-.431.426-.646.636a8.155,8.155,0,0,1,.127,10.386A8.011,8.011,0,0,1,4.573,12.379,8.041,8.041,0,0,1,11.312,4.941Zm-.987,9.575a2.172,2.172,0,0,0,1.491,2.042c.1.032.147.071.139.182-.01.145-.005.291,0,.436a.613.613,0,0,0,1.212.1.975.975,0,0,0,.01-.321c-.037-.252.056-.37.3-.488A2.168,2.168,0,0,0,14.8,14.378a2.1,2.1,0,0,0-1.346-2,4.274,4.274,0,0,0-1.048-.213.99.99,0,0,1-.86-1.032,1.017,1.017,0,0,1,2.033.057.6.6,0,0,0,.556.589.589.589,0,0,0,.648-.46,1.3,1.3,0,0,0,0-.47,2.114,2.114,0,0,0-1.475-1.737c-.1-.034-.143-.078-.136-.187a4.176,4.176,0,0,0,0-.436.612.612,0,0,0-1.22-.019,2.794,2.794,0,0,0,0,.417c.013.139-.044.193-.172.237a2.155,2.155,0,0,0-1.263,2.962,2.19,2.19,0,0,0,2.041,1.326,1.045,1.045,0,0,1,1.018,1.093.992.992,0,0,1-1.211.913,1.038,1.038,0,0,1-.817-.988.6.6,0,0,0-.239-.491.563.563,0,0,0-.624-.062A.616.616,0,0,0,10.325,14.517Z' transform='translate(-4.562 -2.15)' fill='%238b8b8b'/%3E%3C/svg%3E%0A") no-repeat left top 6px/15px auto;
}
.task-gr-area .task-gr-tool .task-area-option li.itm03 {
  background: url("data:image/svg+xml,%0A%3Csvg id='info-circle-svgrepo-com' xmlns='http://www.w3.org/2000/svg' width='13.23' height='17' viewBox='0 0 13.23 17'%3E%3Cg id='Group_33' data-name='Group 33' transform='translate(-1.885 -2)'%3E%3Cpath id='pin' d='M12.021,0a6.893,6.893,0,0,1-.031,1.007A1.555,1.555,0,0,1,11.1,2.1c-.338.181-.706.306-1.062.454-.075.031-.155.052-.24.08L9.976,4.1l.316,2.532c.077.619.152,1.239.237,1.857.007.051.08.112.135.134a5.94,5.94,0,0,1,1.42.777,2.561,2.561,0,0,1,1.07,1.564,9.951,9.951,0,0,1,.076,1.14H7.34v.21q0,1.958,0,3.916a.73.73,0,1,1-1.46.033c-.005-1.311,0-2.622,0-3.933v-.215H.031a2.666,2.666,0,0,1,.726-2.39A5,5,0,0,1,2.464,8.668a.346.346,0,0,0,.254-.326c.1-.834.2-1.666.306-2.5q.159-1.282.319-2.564c.026-.208.051-.416.079-.647l-.444-.145a3.635,3.635,0,0,1-1.186-.611A1.483,1.483,0,0,1,1.186.612C1.195.408,1.194.2,1.2,0H12.021Z' transform='translate(1.885 2.001)' fill='%238b8b8b'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat left top 6px/13px auto;
}
.task-gr-area .task-gr-tool .task-area-option li.itm04 {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='13.221' viewBox='0 0 17 13.221'%3E%3Cpath id='eye-solid' d='M8.5.944A8.3,8.3,0,0,0,2.815,3.323,11.693,11.693,0,0,0,.074,7.192a.938.938,0,0,0,0,.726,11.693,11.693,0,0,0,2.742,3.869A8.3,8.3,0,0,0,8.5,14.165a8.3,8.3,0,0,0,5.684-2.379,11.782,11.782,0,0,0,2.745-3.869.938.938,0,0,0,0-.726,11.752,11.752,0,0,0-2.745-3.869A8.3,8.3,0,0,0,8.5.944ZM4.25,7.555A4.25,4.25,0,1,1,8.5,11.8,4.25,4.25,0,0,1,4.25,7.555ZM8.5,5.666A1.89,1.89,0,0,1,6.611,7.555a1.916,1.916,0,0,1-.6-.1.251.251,0,0,0-.345.218,2.738,2.738,0,0,0,.094.611A2.834,2.834,0,1,0,8.62,4.722a.25.25,0,0,0-.218.345,1.916,1.916,0,0,1,.1.6Z' transform='translate(-0.001 -0.944)' fill='%238b8b8b'/%3E%3C/svg%3E%0A") no-repeat left top 7px/15px auto;
}
.task-gr-area .task-gr-tool .task-area-option li.itm05 {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='11.116' viewBox='0 0 17 11.116'%3E%3Cpath id='add-meeting' d='M12.449,2.211,14.21,1.155c.2-.12.4-.244.6-.358a1.45,1.45,0,0,1,2.183,1.249q.017,3.512,0,7.024a1.447,1.447,0,0,1-2.2,1.232c-.709-.413-1.408-.842-2.112-1.264L12.436,8.9c0,.148,0,.26,0,.372a1.441,1.441,0,0,1-1.184,1.467,4.207,4.207,0,0,1-.638.047q-2.375.086-4.751.168c-1.416.051-2.832.086-4.246.163A1.509,1.509,0,0,1,0,9.541C.016,6.864,0,4.186.006,1.508A1.431,1.431,0,0,1,1.2.028a6.176,6.176,0,0,1,1.1,0C3.549.066,4.8.116,6.043.163c1.693.064,3.386.125,5.079.2a1.429,1.429,0,0,1,1.3,1.257c.017.185.019.371.029.595Zm3.294,3.346c0-1.125,0-2.249,0-3.374a.4.4,0,0,0-.115-.3c-.06-.04-.21.008-.3.059q-1.392.823-2.773,1.664a.267.267,0,0,0-.112.19q-.01,1.755,0,3.51a.265.265,0,0,0,.11.192q1.373.836,2.757,1.654a.425.425,0,0,0,.33.059c.067-.031.1-.2.1-.3.007-1.118,0-2.236,0-3.354Zm-10.137.62v.272c0,.414-.01.828.013,1.241a.588.588,0,0,0,.652.548.6.6,0,0,0,.565-.6c.005-.388,0-.776,0-1.164V6.178c.493,0,.958,0,1.423,0a.617.617,0,0,0,.634-.742.625.625,0,0,0-.647-.5c-.463,0-.927,0-1.41,0v-.21c0-.414,0-.828,0-1.241a.6.6,0,0,0-.577-.609.588.588,0,0,0-.642.559c-.02.329-.009.659-.01.989,0,.165,0,.331,0,.512H5.389c-.4,0-.8,0-1.2,0a.63.63,0,0,0-.609.4.62.62,0,0,0,.6.842c.464.008.929,0,1.428,0Z' transform='translate(0 0)' fill='%238b8b8b'/%3E%3C/svg%3E%0A") no-repeat left top 9px/16px auto;
}
.task-gr-area .task-gr-tool .task-area-option li.itm06 {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.875' height='17' viewBox='0 0 14.875 17'%3E%3Cpath id='bell-solid' d='M7.438,0A1.061,1.061,0,0,0,6.375,1.063V1.7a5.315,5.315,0,0,0-4.25,5.206V7.53a6.39,6.39,0,0,1-1.61,4.237l-.246.276a1.063,1.063,0,0,0,.794,1.77h12.75a1.063,1.063,0,0,0,.794-1.77l-.246-.276A6.384,6.384,0,0,1,12.75,7.53V6.906A5.315,5.315,0,0,0,8.5,1.7V1.063A1.061,1.061,0,0,0,7.438,0Zm1.5,16.379a2.126,2.126,0,0,0,.621-1.5H5.313a2.127,2.127,0,0,0,3.629,1.5Z' transform='translate(-0.001)' fill='%238b8b8b'/%3E%3C/svg%3E%0A") no-repeat left top 6px/14px auto;
}
.task-gr-area .task-gr-tool .task-area-option li.itm07 {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='15.6' viewBox='0 0 13 15.6'%3E%3Cpath id='form-svgrepo-com' d='M9.879,4.161h2.757A.351.351,0,0,0,13,3.817V3.8a.325.325,0,0,0-.1-.26L9.463.106A.325.325,0,0,0,9.2,0,.351.351,0,0,0,8.84.346V3.122A1.041,1.041,0,0,0,9.879,4.161Zm2.6,1.559H8.84A1.562,1.562,0,0,1,7.281,4.161V.52A.519.519,0,0,0,6.762,0h-5.2A1.564,1.564,0,0,0,0,1.561v12.48A1.562,1.562,0,0,0,1.559,15.6h9.879A1.562,1.562,0,0,0,13,14.041V6.24A.516.516,0,0,0,12.48,5.72ZM2.081,5.2a.526.526,0,0,1,.52-.5H4.73a.507.507,0,0,1,.511.5h0v.518a.529.529,0,0,1-.518.513H2.6a.5.5,0,0,1-.513-.494V5.718Zm7.8,6.749a.519.519,0,0,1-.52.52H2.6a.519.519,0,0,1-.52-.52v-.511a.519.519,0,0,1,.52-.52H9.36a.519.519,0,0,1,.52.52Zm1.039-3.12a.521.521,0,0,1-.509.53H2.6a.519.519,0,0,1-.52-.52h0V8.32A.519.519,0,0,1,2.6,7.8h7.8a.519.519,0,0,1,.52.52Z' fill='%238b8b8b'/%3E%3C/svg%3E%0A") no-repeat left top 6px/12px auto;
}
.task-gr-area .task-gr-tool .task-area-option li.itm08 {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16.999' viewBox='0 0 17 16.999'%3E%3Cpath id='evaluate' d='M0,15.665V2.29c.012-.042.024-.084.035-.126A1.584,1.584,0,0,1,1.989,1.023c0,.038.006.076.01.115A1.98,1.98,0,0,0,3.968,2.983q2.041.024,4.081,0A1.928,1.928,0,0,0,9.764,1.967,2.128,2.128,0,0,0,10.028,1h.409a1.5,1.5,0,0,1,1.577,1.583c0,1.305,0,2.61,0,3.916a.4.4,0,0,1-.129.318Q9.536,9.154,7.193,11.5a.631.631,0,0,0-.127.151c-.28.557-.574,1.107-.827,1.677a1.385,1.385,0,0,0,.281,1.582,1.409,1.409,0,0,0,1.621.365c.555-.243,1.092-.528,1.634-.8a.847.847,0,0,0,.213-.152q.941-.935,1.878-1.876c.04-.04.082-.079.147-.141V12.5c0,.962-.014,1.925,0,2.887A1.572,1.572,0,0,1,10.4,17c-2.19-.021-4.38-.007-6.57-.007-.769,0-1.538,0-2.306,0a1.474,1.474,0,0,1-1.183-.565A1.9,1.9,0,0,1,0,15.665ZM3.963,6.2c.078.071.126.114.173.159.185.174.363.357.557.521a.487.487,0,0,0,.8-.289.494.494,0,0,0-.168-.462c-.2-.2-.407-.4-.616-.607.06-.063.1-.107.143-.15.175-.177.356-.348.522-.533a.489.489,0,0,0-.682-.7c-.14.117-.268.248-.4.372l-.326.308c-.219-.226-.417-.441-.628-.644a.493.493,0,1,0-.686.706c.2.209.415.409.638.628-.226.222-.431.421-.635.623A.489.489,0,0,0,2.5,6.58a.482.482,0,0,0,.322.388.455.455,0,0,0,.5-.109c.215-.212.419-.436.637-.664ZM3.5,9.834c-.151-.163-.251-.274-.355-.38s-.207-.215-.318-.315a.483.483,0,0,0-.686,0,.478.478,0,0,0-.008.7q.494.514,1.008,1.007a.459.459,0,0,0,.671,0c.7-.663,1.385-1.333,2.073-2A.453.453,0,0,0,6.026,8.4a.512.512,0,0,0-.87-.249c-.343.32-.676.651-1.007.985-.213.215-.413.444-.645.695Zm0,3.981c-.254-.262-.453-.478-.663-.68a.492.492,0,1,0-.7.693q.484.5.984.984a.469.469,0,0,0,.7.008q1.037-.99,2.061-1.993a.454.454,0,0,0,.138-.439.514.514,0,0,0-.882-.243c-.42.4-.833.808-1.242,1.218-.132.132-.247.282-.394.451ZM3.783,0C3.739.02,3.7.043,3.651.059A1,1,0,0,0,3,1.145a.986.986,0,0,0,.946.843c1.377.006,2.753.01,4.13,0A.991.991,0,0,0,8.914.533,1.172,1.172,0,0,0,8.23,0H3.783ZM9,11.155l1.354,1.352,4.2-4.2L13.2,6.956Zm6.3-3.588c.48-.466.992-.931,1.464-1.433a.985.985,0,0,0-1.387-1.388c-.5.472-.967.984-1.433,1.464L15.3,7.567ZM15.3,9.051c.077.075.165.158.25.243a.527.527,0,0,1,0,.878c-.668.668-1.338,1.334-2,2.006a.49.49,0,0,0-.018.724.5.5,0,0,0,.724-.022c.694-.689,1.39-1.376,2.074-2.075a1.459,1.459,0,0,0,.36-1.586,2.334,2.334,0,0,0-.677-.877l-.712.71ZM7.871,12.267c-.246.449-.473.91-.69,1.375a.628.628,0,0,0-.049.379.49.49,0,0,0,.747.3c.421-.205.846-.405,1.255-.632a4.21,4.21,0,0,0,.527-.4L8.227,11.855a2.482,2.482,0,0,0-.356.413Z' fill='%238b8b8b'/%3E%3C/svg%3E%0A") no-repeat left top 6px/16px auto;
}
.task-gr-area .task-gr-tool .task-area-option li.itm09 {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.185' height='17' viewBox='0 0 14.185 17'%3E%3Cpath id='meger' d='M3.569,11.431a2.857,2.857,0,1,1-1.633.062c.139-.046.192-.1.192-.254q-.009-2.739,0-5.478c0-.135-.027-.205-.17-.251A2.792,2.792,0,0,1,.01,2.649,2.808,2.808,0,0,1,2.445.029,2.829,2.829,0,0,1,3.772,5.5c-.065.023-.131.043-.212.069A3.332,3.332,0,0,0,4.191,7.69,3.475,3.475,0,0,0,7.108,9.2c.443.007.886,0,1.328,0a.188.188,0,0,0,.219-.153,2.809,2.809,0,0,1,2.951-1.964,2.834,2.834,0,0,1-.423,5.651,2.791,2.791,0,0,1-2.524-1.954.2.2,0,0,0-.233-.167c-.5.006-1,.009-1.494,0a4.844,4.844,0,0,1-3.193-1.3l-.171-.151V11.43Z' transform='translate(0 0)' fill='%238b8b8b'/%3E%3C/svg%3E%0A") no-repeat left top 6px/13px auto;
}
.task-gr-area .task-gr-tool .task-area-option li:hover {
  background-position: top 4px left;
  color: #009ef6;
}
.task-gr-area .task-gr-tool .task-area-option li:hover.itm01 {
  background-image: url("data:image/svg+xml,%3Csvg id='info-circle-svgrepo-com' xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath id='info-circle-svgrepo-com-2' data-name='info-circle-svgrepo-com' d='M19,10.5A8.5,8.5,0,1,1,10.5,2,8.5,8.5,0,0,1,19,10.5Zm-8.5,4.887a.638.638,0,0,0,.637-.637V9.65a.637.637,0,1,0-1.275,0v5.1A.638.638,0,0,0,10.5,15.387Zm0-9.137a.85.85,0,1,1-.85.85A.85.85,0,0,1,10.5,6.25Z' transform='translate(-2 -2)' fill='%233B9DBD' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
}
.task-gr-area .task-gr-tool .task-area-option li:hover.itm02 {
  background-image: url("data:image/svg+xml,%0A%3Csvg id='info-circle-svgrepo-com' xmlns='http://www.w3.org/2000/svg' width='16' height='18.652' viewBox='0 0 16 18.652'%3E%3Cpath id='time-ot' d='M11.312,4.941V4.106c-.224,0-.443,0-.661,0-.281,0-.34-.058-.341-.329q0-.654,0-1.308c0-.263.06-.318.328-.318H14.5c.255,0,.318.057.32.307q.005.663,0,1.327c0,.259-.063.318-.331.32-.219,0-.439,0-.668,0v.841a8.648,8.648,0,0,1,2.915,1.1.2.2,0,0,0,.186-.032c.249-.234.482-.483.731-.717a1.134,1.134,0,0,1,1.105-.285,1.1,1.1,0,0,1,.514,1.846c-.206.222-.431.426-.646.636a8.155,8.155,0,0,1,.127,10.386A8.011,8.011,0,0,1,4.573,12.379,8.041,8.041,0,0,1,11.312,4.941Zm-.987,9.575a2.172,2.172,0,0,0,1.491,2.042c.1.032.147.071.139.182-.01.145-.005.291,0,.436a.613.613,0,0,0,1.212.1.975.975,0,0,0,.01-.321c-.037-.252.056-.37.3-.488A2.168,2.168,0,0,0,14.8,14.378a2.1,2.1,0,0,0-1.346-2,4.274,4.274,0,0,0-1.048-.213.99.99,0,0,1-.86-1.032,1.017,1.017,0,0,1,2.033.057.6.6,0,0,0,.556.589.589.589,0,0,0,.648-.46,1.3,1.3,0,0,0,0-.47,2.114,2.114,0,0,0-1.475-1.737c-.1-.034-.143-.078-.136-.187a4.176,4.176,0,0,0,0-.436.612.612,0,0,0-1.22-.019,2.794,2.794,0,0,0,0,.417c.013.139-.044.193-.172.237a2.155,2.155,0,0,0-1.263,2.962,2.19,2.19,0,0,0,2.041,1.326,1.045,1.045,0,0,1,1.018,1.093.992.992,0,0,1-1.211.913,1.038,1.038,0,0,1-.817-.988.6.6,0,0,0-.239-.491.563.563,0,0,0-.624-.062A.616.616,0,0,0,10.325,14.517Z' transform='translate(-4.562 -2.15)' fill='%233B9DBD'/%3E%3C/svg%3E%0A");
}
.task-gr-area .task-gr-tool .task-area-option li:hover.itm03 {
  background-image: url("data:image/svg+xml,%0A%3Csvg id='info-circle-svgrepo-com' xmlns='http://www.w3.org/2000/svg' width='13.23' height='17' viewBox='0 0 13.23 17'%3E%3Cg id='Group_33' data-name='Group 33' transform='translate(-1.885 -2)'%3E%3Cpath id='pin' d='M12.021,0a6.893,6.893,0,0,1-.031,1.007A1.555,1.555,0,0,1,11.1,2.1c-.338.181-.706.306-1.062.454-.075.031-.155.052-.24.08L9.976,4.1l.316,2.532c.077.619.152,1.239.237,1.857.007.051.08.112.135.134a5.94,5.94,0,0,1,1.42.777,2.561,2.561,0,0,1,1.07,1.564,9.951,9.951,0,0,1,.076,1.14H7.34v.21q0,1.958,0,3.916a.73.73,0,1,1-1.46.033c-.005-1.311,0-2.622,0-3.933v-.215H.031a2.666,2.666,0,0,1,.726-2.39A5,5,0,0,1,2.464,8.668a.346.346,0,0,0,.254-.326c.1-.834.2-1.666.306-2.5q.159-1.282.319-2.564c.026-.208.051-.416.079-.647l-.444-.145a3.635,3.635,0,0,1-1.186-.611A1.483,1.483,0,0,1,1.186.612C1.195.408,1.194.2,1.2,0H12.021Z' transform='translate(1.885 2.001)' fill='%233B9DBD'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.task-gr-area .task-gr-tool .task-area-option li:hover.itm04 {
  background-position: top 5px left;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='13.221' viewBox='0 0 17 13.221'%3E%3Cpath id='eye-solid' d='M8.5.944A8.3,8.3,0,0,0,2.815,3.323,11.693,11.693,0,0,0,.074,7.192a.938.938,0,0,0,0,.726,11.693,11.693,0,0,0,2.742,3.869A8.3,8.3,0,0,0,8.5,14.165a8.3,8.3,0,0,0,5.684-2.379,11.782,11.782,0,0,0,2.745-3.869.938.938,0,0,0,0-.726,11.752,11.752,0,0,0-2.745-3.869A8.3,8.3,0,0,0,8.5.944ZM4.25,7.555A4.25,4.25,0,1,1,8.5,11.8,4.25,4.25,0,0,1,4.25,7.555ZM8.5,5.666A1.89,1.89,0,0,1,6.611,7.555a1.916,1.916,0,0,1-.6-.1.251.251,0,0,0-.345.218,2.738,2.738,0,0,0,.094.611A2.834,2.834,0,1,0,8.62,4.722a.25.25,0,0,0-.218.345,1.916,1.916,0,0,1,.1.6Z' transform='translate(-0.001 -0.944)' fill='%233B9DBD'/%3E%3C/svg%3E%0A");
}
.task-gr-area .task-gr-tool .task-area-option li:hover.itm05 {
  background-position: top 7px left;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='11.116' viewBox='0 0 17 11.116'%3E%3Cpath id='add-meeting' d='M12.449,2.211,14.21,1.155c.2-.12.4-.244.6-.358a1.45,1.45,0,0,1,2.183,1.249q.017,3.512,0,7.024a1.447,1.447,0,0,1-2.2,1.232c-.709-.413-1.408-.842-2.112-1.264L12.436,8.9c0,.148,0,.26,0,.372a1.441,1.441,0,0,1-1.184,1.467,4.207,4.207,0,0,1-.638.047q-2.375.086-4.751.168c-1.416.051-2.832.086-4.246.163A1.509,1.509,0,0,1,0,9.541C.016,6.864,0,4.186.006,1.508A1.431,1.431,0,0,1,1.2.028a6.176,6.176,0,0,1,1.1,0C3.549.066,4.8.116,6.043.163c1.693.064,3.386.125,5.079.2a1.429,1.429,0,0,1,1.3,1.257c.017.185.019.371.029.595Zm3.294,3.346c0-1.125,0-2.249,0-3.374a.4.4,0,0,0-.115-.3c-.06-.04-.21.008-.3.059q-1.392.823-2.773,1.664a.267.267,0,0,0-.112.19q-.01,1.755,0,3.51a.265.265,0,0,0,.11.192q1.373.836,2.757,1.654a.425.425,0,0,0,.33.059c.067-.031.1-.2.1-.3.007-1.118,0-2.236,0-3.354Zm-10.137.62v.272c0,.414-.01.828.013,1.241a.588.588,0,0,0,.652.548.6.6,0,0,0,.565-.6c.005-.388,0-.776,0-1.164V6.178c.493,0,.958,0,1.423,0a.617.617,0,0,0,.634-.742.625.625,0,0,0-.647-.5c-.463,0-.927,0-1.41,0v-.21c0-.414,0-.828,0-1.241a.6.6,0,0,0-.577-.609.588.588,0,0,0-.642.559c-.02.329-.009.659-.01.989,0,.165,0,.331,0,.512H5.389c-.4,0-.8,0-1.2,0a.63.63,0,0,0-.609.4.62.62,0,0,0,.6.842c.464.008.929,0,1.428,0Z' transform='translate(0 0)' fill='%233B9DBD'/%3E%3C/svg%3E%0A");
}
.task-gr-area .task-gr-tool .task-area-option li:hover.itm06 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.875' height='17' viewBox='0 0 14.875 17'%3E%3Cpath id='bell-solid' d='M7.438,0A1.061,1.061,0,0,0,6.375,1.063V1.7a5.315,5.315,0,0,0-4.25,5.206V7.53a6.39,6.39,0,0,1-1.61,4.237l-.246.276a1.063,1.063,0,0,0,.794,1.77h12.75a1.063,1.063,0,0,0,.794-1.77l-.246-.276A6.384,6.384,0,0,1,12.75,7.53V6.906A5.315,5.315,0,0,0,8.5,1.7V1.063A1.061,1.061,0,0,0,7.438,0Zm1.5,16.379a2.126,2.126,0,0,0,.621-1.5H5.313a2.127,2.127,0,0,0,3.629,1.5Z' transform='translate(-0.001)' fill='%233B9DBD'/%3E%3C/svg%3E%0A");
}
.task-gr-area .task-gr-tool .task-area-option li:hover.itm07 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='15.6' viewBox='0 0 13 15.6'%3E%3Cpath id='form-svgrepo-com' d='M9.879,4.161h2.757A.351.351,0,0,0,13,3.817V3.8a.325.325,0,0,0-.1-.26L9.463.106A.325.325,0,0,0,9.2,0,.351.351,0,0,0,8.84.346V3.122A1.041,1.041,0,0,0,9.879,4.161Zm2.6,1.559H8.84A1.562,1.562,0,0,1,7.281,4.161V.52A.519.519,0,0,0,6.762,0h-5.2A1.564,1.564,0,0,0,0,1.561v12.48A1.562,1.562,0,0,0,1.559,15.6h9.879A1.562,1.562,0,0,0,13,14.041V6.24A.516.516,0,0,0,12.48,5.72ZM2.081,5.2a.526.526,0,0,1,.52-.5H4.73a.507.507,0,0,1,.511.5h0v.518a.529.529,0,0,1-.518.513H2.6a.5.5,0,0,1-.513-.494V5.718Zm7.8,6.749a.519.519,0,0,1-.52.52H2.6a.519.519,0,0,1-.52-.52v-.511a.519.519,0,0,1,.52-.52H9.36a.519.519,0,0,1,.52.52Zm1.039-3.12a.521.521,0,0,1-.509.53H2.6a.519.519,0,0,1-.52-.52h0V8.32A.519.519,0,0,1,2.6,7.8h7.8a.519.519,0,0,1,.52.52Z' fill='%233B9DBD'/%3E%3C/svg%3E%0A");
}
.task-gr-area .task-gr-tool .task-area-option li:hover.itm08 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16.999' viewBox='0 0 17 16.999'%3E%3Cpath id='evaluate' d='M0,15.665V2.29c.012-.042.024-.084.035-.126A1.584,1.584,0,0,1,1.989,1.023c0,.038.006.076.01.115A1.98,1.98,0,0,0,3.968,2.983q2.041.024,4.081,0A1.928,1.928,0,0,0,9.764,1.967,2.128,2.128,0,0,0,10.028,1h.409a1.5,1.5,0,0,1,1.577,1.583c0,1.305,0,2.61,0,3.916a.4.4,0,0,1-.129.318Q9.536,9.154,7.193,11.5a.631.631,0,0,0-.127.151c-.28.557-.574,1.107-.827,1.677a1.385,1.385,0,0,0,.281,1.582,1.409,1.409,0,0,0,1.621.365c.555-.243,1.092-.528,1.634-.8a.847.847,0,0,0,.213-.152q.941-.935,1.878-1.876c.04-.04.082-.079.147-.141V12.5c0,.962-.014,1.925,0,2.887A1.572,1.572,0,0,1,10.4,17c-2.19-.021-4.38-.007-6.57-.007-.769,0-1.538,0-2.306,0a1.474,1.474,0,0,1-1.183-.565A1.9,1.9,0,0,1,0,15.665ZM3.963,6.2c.078.071.126.114.173.159.185.174.363.357.557.521a.487.487,0,0,0,.8-.289.494.494,0,0,0-.168-.462c-.2-.2-.407-.4-.616-.607.06-.063.1-.107.143-.15.175-.177.356-.348.522-.533a.489.489,0,0,0-.682-.7c-.14.117-.268.248-.4.372l-.326.308c-.219-.226-.417-.441-.628-.644a.493.493,0,1,0-.686.706c.2.209.415.409.638.628-.226.222-.431.421-.635.623A.489.489,0,0,0,2.5,6.58a.482.482,0,0,0,.322.388.455.455,0,0,0,.5-.109c.215-.212.419-.436.637-.664ZM3.5,9.834c-.151-.163-.251-.274-.355-.38s-.207-.215-.318-.315a.483.483,0,0,0-.686,0,.478.478,0,0,0-.008.7q.494.514,1.008,1.007a.459.459,0,0,0,.671,0c.7-.663,1.385-1.333,2.073-2A.453.453,0,0,0,6.026,8.4a.512.512,0,0,0-.87-.249c-.343.32-.676.651-1.007.985-.213.215-.413.444-.645.695Zm0,3.981c-.254-.262-.453-.478-.663-.68a.492.492,0,1,0-.7.693q.484.5.984.984a.469.469,0,0,0,.7.008q1.037-.99,2.061-1.993a.454.454,0,0,0,.138-.439.514.514,0,0,0-.882-.243c-.42.4-.833.808-1.242,1.218-.132.132-.247.282-.394.451ZM3.783,0C3.739.02,3.7.043,3.651.059A1,1,0,0,0,3,1.145a.986.986,0,0,0,.946.843c1.377.006,2.753.01,4.13,0A.991.991,0,0,0,8.914.533,1.172,1.172,0,0,0,8.23,0H3.783ZM9,11.155l1.354,1.352,4.2-4.2L13.2,6.956Zm6.3-3.588c.48-.466.992-.931,1.464-1.433a.985.985,0,0,0-1.387-1.388c-.5.472-.967.984-1.433,1.464L15.3,7.567ZM15.3,9.051c.077.075.165.158.25.243a.527.527,0,0,1,0,.878c-.668.668-1.338,1.334-2,2.006a.49.49,0,0,0-.018.724.5.5,0,0,0,.724-.022c.694-.689,1.39-1.376,2.074-2.075a1.459,1.459,0,0,0,.36-1.586,2.334,2.334,0,0,0-.677-.877l-.712.71ZM7.871,12.267c-.246.449-.473.91-.69,1.375a.628.628,0,0,0-.049.379.49.49,0,0,0,.747.3c.421-.205.846-.405,1.255-.632a4.21,4.21,0,0,0,.527-.4L8.227,11.855a2.482,2.482,0,0,0-.356.413Z' fill='%233B9DBD'/%3E%3C/svg%3E%0A");
}
.task-gr-area .task-gr-tool .task-area-option li:hover.itm09 {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.185' height='17' viewBox='0 0 14.185 17'%3E%3Cpath id='meger' d='M3.569,11.431a2.857,2.857,0,1,1-1.633.062c.139-.046.192-.1.192-.254q-.009-2.739,0-5.478c0-.135-.027-.205-.17-.251A2.792,2.792,0,0,1,.01,2.649,2.808,2.808,0,0,1,2.445.029,2.829,2.829,0,0,1,3.772,5.5c-.065.023-.131.043-.212.069A3.332,3.332,0,0,0,4.191,7.69,3.475,3.475,0,0,0,7.108,9.2c.443.007.886,0,1.328,0a.188.188,0,0,0,.219-.153,2.809,2.809,0,0,1,2.951-1.964,2.834,2.834,0,0,1-.423,5.651,2.791,2.791,0,0,1-2.524-1.954.2.2,0,0,0-.233-.167c-.5.006-1,.009-1.494,0a4.844,4.844,0,0,1-3.193-1.3l-.171-.151V11.43Z' transform='translate(0 0)' fill='%233B9DBD'/%3E%3C/svg%3E%0A");
}

.box-dislay-none {
  display: none;
}

.task-name-add-new {
  width: calc(100% - 200px);
}
.task-name-add-new.b-full {
  width: 100%;
}
.task-name-add-new input {
  border-bottom: none;
  padding-bottom: 0;
  font-size: 20px !important;
  width: 100%;
}

.task-box-make-private {
  margin-top: 15px;
  padding: 1px 8px 3px 28px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/svg%3E") no-repeat center left 8px/16px auto;
}
.task-box-make-private.active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/svg%3E");
  background-size: 12px auto;
}

.task-btn-gr {
  margin-top: 15px;
}
.task-btn-gr .task-cm-btn:not(:last-child) {
  margin-right: 12px;
}

.task-cm-btn {
  background: #232B3E;
  color: #fff;
  text-align: center;
  display: table;
  padding: 5px 10px;
  border-radius: 4px;
  min-width: 80px;
  cursor: pointer;
  position: relative;
  z-index: 0;
  transition: all 0.3s ease;
  overflow: hidden;
  line-height: 1.4;
}
.task-cm-btn::before, .task-cm-btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 0;
  height: 50%;
  background: #009ef6;
  transition: all 0.3s ease;
}
.task-cm-btn::before {
  top: 0;
  left: 0;
}
.task-cm-btn::after {
  bottom: 0;
  right: 0;
}
.task-cm-btn:hover::before, .task-cm-btn:hover::after {
  width: 100%;
}
.task-cm-btn:hover::before {
  left: auto;
  right: 0;
}
.task-cm-btn:hover::after {
  right: auto;
  left: 0;
}
.task-cm-btn.btn-gray {
  background: #999999;
}

.gr-btn-priority {
  margin-top: 5px;
}
.gr-btn-priority .btn {
  padding: 3px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: all 0.3s ease;
  line-height: 1.2;
  cursor: pointer;
}
.gr-btn-priority .btn:not(:last-child) {
  margin-right: 8px;
}
.gr-btn-priority .btn.btn-01 {
  border-color: rgba(207, 0, 15, 0.6);
  color: #CF000F;
}
.gr-btn-priority .btn.btn-01.active {
  background-color: #CF000F;
  color: #fff;
  border-color: #CF000F;
}
.gr-btn-priority .btn.btn-02.active {
  background-color: #111;
  color: #fff;
  border-color: #111;
}
.gr-btn-priority .btn.btn-03 {
  border-color: rgba(38, 166, 91, 0.6);
  color: #26A65B;
}
.gr-btn-priority .btn.btn-03.active {
  background-color: #26A65B;
  color: #fff;
  border-color: #26A65B;
}
.gr-btn-priority .btn:hover {
  transform: translateY(-3px);
}

.task-cm-table {
  text-align: left;
  min-width: 100%;
}
.task-cm-table tr > td:first-child {
  border-left: 1px solid #DEDEDE;
}
.task-cm-table tr > td:last-child {
  border-right: 1px solid #DEDEDE;
}
.task-cm-table th {
  background: #232B3E;
  color: #fff;
}
.task-cm-table th,
.task-cm-table td {
  padding: 6px 5px 5px 5px;
  border-bottom: 1px solid #DEDEDE;
  vertical-align: top;
}

.task-title-h2 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}

.task-minimize-detail {
  display: flex;
  margin-top: 5px;
}
.task-minimize-detail.add-scroll {
  padding-bottom: 5px;
}

.minimize-content-item-task {
  border-radius: 4px;
  position: relative;
  background: #fff;
  padding: 5px 40px 5px 10px;
  margin-right: 8px;
  white-space: nowrap;
}
.minimize-content-item-task .btn-up-full-screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72.95 72.93'%3E%3Cpath id='arrows-left-right-solid5' d='M71.63.94h0c-.28-.24-.59-.44-.93-.59-.49-.22-1.03-.34-1.57-.34h-27.08c-2.12,0-3.83,1.7-3.83,3.82,0,2.12,1.71,3.83,3.83,3.83h17.84s-25.96,25.96-25.96,25.96c-.05.05-.09.11-.13.17-.05.05-.11.08-.17.13L7.66,59.89v-17.84c0-2.11-1.7-3.82-3.81-3.83,0,0-.01,0-.02,0C1.72,38.21,0,39.92,0,42.03c0,0,0,.01,0,.02v27.07c0,.54.11,1.08.34,1.57.15.34.35.65.59.93h0l.38.38h0c.28.24.59.44.93.59.49.22,1.03.34,1.57.34h27.09c2.11-.04,3.8-1.79,3.76-3.9-.04-2.06-1.7-3.71-3.75-3.76H13.06s25.96-25.97,25.96-25.97c.05-.05.09-.11.13-.17.05-.05.11-.08.17-.13l25.96-25.96v17.84c0,2.12,1.72,3.83,3.83,3.83s3.83-1.71,3.83-3.83V3.79c0-.54-.11-1.08-.34-1.57-.15-.33-.35-.65-.59-.93h0l-.38-.38v.03Z' style='fill: %23111; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat center/10px auto rgba(35, 43, 62, 0.15);
  cursor: pointer;
}

.main-content.task-add-minimize .task-container {
  max-height: calc(100vh - 170px);
}
.main-content.task-add-minimize.add-minimize-scroll .task-container {
  max-height: calc(100vh - 196px);
}

.task-link {
  color: #009ef6;
}

.task-under-wrapper {
  height: calc(100vh - 195px);
}
.task-under-wrapper .task-tab-main {
  height: 100%;
  padding: 0;
}

.under-top-tab {
  margin: 0 0 15px;
  border-color: rgba(0, 0, 0, 0.15);
}
.under-top-tab li {
  font-size: 14px;
}
.under-top-tab li:hover::after {
  background-color: #009ef6;
}
.under-top-tab .current {
  color: #009ef6;
}
.under-top-tab .current::after {
  background-color: #009ef6;
}

.task-profile-wrapper {
  margin-bottom: 25px;
}
.task-profile-wrapper .box-left {
  width: 240px;
  text-align: center;
  padding: 30px 15px;
  border: 1px solid rgba(59, 157, 189, 0.3);
  border-radius: 4px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.task-profile-wrapper .box-left::before, .task-profile-wrapper .box-left::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  height: 12px;
  background: rgba(59, 157, 189, 0.1);
}
.task-profile-wrapper .box-left::before {
  top: 0;
}
.task-profile-wrapper .box-left::after {
  bottom: 0;
}
.task-profile-wrapper .box-right {
  border-radius: 4px;
  width: calc(100% - 255px);
  border: 1px solid rgba(59, 157, 189, 0.3);
}
.task-profile-wrapper .img-profile {
  width: 90px;
  margin: 0 auto 20px;
  overflow: hidden;
}
.task-profile-wrapper .name {
  font-weight: 700;
}

.task-profile-ttl-manage {
  padding: 10px 30px;
  position: relative;
  z-index: 0;
  background: rgba(59, 157, 189, 0.1);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
  color: #009ef6;
}
.task-profile-ttl-manage::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 10px;
  top: 0;
  width: 166px;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 57.5 47'%3E%3Cpolygon points='16 47 0 47 12 0 28 0 16 47' style='fill: %233b9dbd; stroke-width: 0px;'/%3E%3Cpolygon points='38 47 28 47 40 0 50 0 38 47' style='fill: %233b9dbd; stroke-width: 0px;'/%3E%3Cpolygon points='23.5 47 20.5 47 32.5 0 35.5 0 23.5 47' style='fill: %233b9dbd; stroke-width: 0px;'/%3E%3Cpolygon points='45.5 47 42.5 47 54.5 0 57.5 0 45.5 47' style='fill: %233b9dbd; stroke-width: 0px;'/%3E%3C/svg%3E") repeat-x top right/auto 100%;
  opacity: 0.25;
}

.task-profile-from {
  padding: 0 30px 20px;
}

.task-page-name {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.task-activitie-wrapper .item {
  width: calc(33.3333333333% - 8px);
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}
.task-activitie-wrapper .item .ttl {
  position: relative;
  z-index: 0;
  padding: 10px 15px;
  margin-bottom: 0;
}
.task-activitie-wrapper .item .ttl span {
  background: #fff;
  display: table;
  border-radius: 4px;
  padding: 0 10px;
}
.task-activitie-wrapper .item .ttl::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.task-activitie-wrapper .item .content {
  padding: 3px 0 8px 15px;
  height: 138px;
  margin-bottom: 5px;
  margin-top: 5px;
}
.task-activitie-wrapper .item .content li {
  position: relative;
  z-index: 0;
  padding: 2px 0 2px 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.task-activitie-wrapper .item .content li::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #BDBDBD;
  border-right: 0;
  transition: all 0.3s ease;
}
.task-activitie-wrapper .item .content li:hover {
  background: rgba(59, 157, 189, 0.1);
}
.task-activitie-wrapper .item .content li:hover::before {
  left: 3px;
}
.task-activitie-wrapper .item-finished {
  border: 1px solid rgba(38, 166, 91, 0.3);
}
.task-activitie-wrapper .item-finished .ttl {
  background: repeating-linear-gradient(90deg, rgba(38, 166, 91, 0.1) 1px, rgba(38, 166, 91, 0.1) 1px, rgba(38, 166, 91, 0.3) 2px, rgba(38, 166, 91, 0.3) 9px);
  color: #26A65B;
}
.task-activitie-wrapper .item-pending {
  border: 1px solid rgba(202, 105, 36, 0.3);
}
.task-activitie-wrapper .item-pending .ttl {
  background: repeating-linear-gradient(90deg, rgba(202, 105, 36, 0.1) 1px, rgba(202, 105, 36, 0.1) 1px, rgba(202, 105, 36, 0.3) 2px, rgba(202, 105, 36, 0.3) 9px);
  color: #CA6924;
}
.task-activitie-wrapper .item-new {
  border: 1px solid rgba(0, 0, 0, 0.3);
}
.task-activitie-wrapper .item-new .ttl {
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.3) 2px, rgba(0, 0, 0, 0.3) 9px);
  color: #111;
}

.task-profile-from .item {
  width: 49%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding: 11px 0;
}
.task-profile-from .ttl {
  width: 150px;
}
.task-profile-from .txt {
  width: calc(100% - 150px);
}

.main-notification .item-notification {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}
.main-notification .item-notification:hover {
  padding-left: 15px;
  padding-right: 15px;
  background: rgba(59, 157, 189, 0.1);
}
.main-notification .item-notification .ttl {
  font-weight: 700;
}
.main-notification .item-notification .img-avatar {
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden;
}
.main-notification .item-notification .content-txt {
  width: calc(100% - 36px);
  padding-right: 10px;
}
.main-notification .item-notification .txt-comment,
.main-notification .item-notification .time {
  font-size: 12px;
  color: #555555;
}
.main-notification .item-notification .block-story .name {
  font-weight: bold;
}

.main-comment .item-comment {
  padding-top: 5px;
  padding-bottom: 5px;
}
.main-comment .item-comment:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.main-comment .item-comment .ttl {
  font-weight: 700;
}
.main-comment .item-comment .img-avatar {
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden;
}
.main-comment .item-comment .img-avatar img {
  width: 26px;
  height: 26px;
  object-fit: fill;
}
.main-comment .item-comment .content-txt {
  width: calc(100% - 36px);
  padding-right: 10px;
}
.main-comment .item-comment .txt-comment,
.main-comment .item-comment .time {
  font-size: 12px;
  color: #555555;
}
.main-comment .item-comment .block-story a {
  color: #0a66c2;
}

.task-cm-filter {
  margin-bottom: 10px;
}

.task-created-content-notification .item-notification .content-txt {
  width: calc(100% - 47px);
}

.task-deleted-content-notification .item-notification .content-txt {
  width: calc(100% - 116px);
}
.task-deleted-content-notification .item-notification .b-time {
  width: 116px;
}

.main-task .achievements-and-customize-button {
  display: flex;
  justify-content: center;
  position: relative;
}
.main-task .achievements-and-customize-button .customize-button {
  position: absolute;
  right: 0;
  top: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%238B8B8B' d='M4 11q-.425 0-.712-.288T3 10V4q0-.425.288-.712T4 3h6q.425 0 .713.288T11 4v6q0 .425-.288.713T10 11zm10 0q-.425 0-.712-.288T13 10V4q0-.425.288-.712T14 3h6q.425 0 .713.288T21 4v6q0 .425-.288.713T20 11zM4 21q-.425 0-.712-.288T3 20v-6q0-.425.288-.712T4 13h6q.425 0 .713.288T11 14v6q0 .425-.288.713T10 21zm13 0q-.425 0-.712-.288T16 20v-2h-2.025q-.425 0-.7-.288T13 17t.288-.712T14 16h2v-2.025q0-.425.288-.7T17 13t.713.288T18 14v2h2.025q.425 0 .7.288T21 17t-.288.713T20 18h-2v2.025q0 .425-.288.7T17 21'/%3E%3C/svg%3E") no-repeat left 10px center/16px auto;
  border: 1px solid #ccc;
  padding: 5px 10px 5px 28px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.main-task .achievements-and-customize-button .customize-button:hover {
  background-color: rgba(59, 157, 189, 0.1);
}
.main-task .achievements-and-customize-button .widget-text {
  white-space: nowrap;
}
.main-task .task-home-greeting {
  padding-top: 50px;
  text-align: center;
  font-size: 32px;
  font-weight: 500;
}
.main-task .task-home-greeting .date {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.main-task .achievements-widget-statistic {
  display: inline-flex;
  background: #f9f8f8;
  padding: 10px 10px;
  border-radius: 50px;
}
.main-task .achievements-widget-statistic .widget-item {
  display: flex;
  align-items: center;
  margin: 0 15px;
  color: #8B8B8B;
}
.main-task .achievements-widget-statistic .widget-item.widget-content-statistic {
  padding-left: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%238B8B8B'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") no-repeat left top 7px/12px auto;
}
.main-task .achievements-widget-statistic .widget-item.widget-content-statistic-person {
  padding-left: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' fill='%238B8B8B'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/svg%3E") no-repeat left top 7px/16px auto;
}
.main-task .achievements-widget-statistic .vsb-main button {
  color: #777;
  border-bottom: none;
  transition: all 0.3s ease;
}
.main-task .achievements-widget-statistic .vsb-main button:hover {
  color: #111;
}
.main-task .achievements-widget-statistic .widget-content-selectMenu {
  padding-top: 3px;
}
.main-task .achievements-widget-statistic .widget-content-selectMenu .vsb-main {
  min-width: auto;
}
.main-task .achievements-widget-statistic .widget-content-selectMenu .vsb-main button {
  padding-right: 10px;
}
.main-task .achievements-widget-statistic .widget-number {
  font-size: 18px;
  font-weight: 600;
  margin-right: 5px;
  color: #777;
}

.task-home-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.task-home-content .card-presentation {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
}
.task-home-content .card-presentation .card-item {
  width: calc(50% - 10px);
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.task-home-content .card-presentation .card-item:nth-child(2n) {
  margin-right: 0;
}
.task-home-content .card-presentation .card-item .vsb-main {
  min-width: auto;
}
.task-home-content .card-presentation .card-item .vsb-main button {
  padding-right: 10px;
  color: #777;
  border-bottom: none;
}
.task-home-content .card-presentation .card-item .btn-close {
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23777'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath 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'/%3E%3C/svg%3E") no-repeat center/11px auto;
  transition: all 0.3s ease;
  border-radius: 4px;
}
.task-home-content .card-presentation .card-item .btn-close:hover {
  background-color: #f9f8f8;
}
.task-home-content .card-presentation .card-item .widget-content-avatar {
  width: 50px;
  height: 50px;
  border-radius: 200px;
  border: 1px dashed #ccc;
  overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18.286' viewBox='0 0 16 18.286'%3E%3Cpath id='user-solid_1_' data-name='user-solid (1)' d='M8,9.143A4.571,4.571,0,1,0,3.429,4.571,4.571,4.571,0,0,0,8,9.143ZM6.368,10.857A6.367,6.367,0,0,0,0,17.225a1.061,1.061,0,0,0,1.061,1.061H14.939A1.061,1.061,0,0,0,16,17.225a6.367,6.367,0,0,0-6.368-6.368Z' fill='%23999'/%3E%3C/svg%3E%0A") no-repeat center/20px auto;
}
.task-home-content .card-presentation .card-item .content-top {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 15px 0;
  position: relative;
}
.task-home-content .card-presentation .card-item .content-top .top-ttl {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.task-home-content .card-presentation .card-item .content-top .top-ttl.w-full {
  width: 100%;
}
.task-home-content .card-presentation .card-item .more-action {
  position: absolute;
  top: 20px;
  right: 15px;
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z' style='fill: %238B8B8B;'/%3E%3C/svg%3E") no-repeat center/13px auto;
  width: 26px;
  height: 26px;
  transition: all 0.3s ease;
  cursor: pointer;
  border-radius: 4px;
}
.task-home-content .card-presentation .card-item .more-action:hover {
  background-color: #e9e9e9;
}
.task-home-content .card-presentation .card-item .content-card-item {
  padding: 15px;
}
.task-home-content .card-presentation .card-item.item-my-task .content-top {
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.task-home-content .card-presentation .card-item.item-my-task .widget-content-title-and-tabs {
  width: calc(100% - 65px);
}
.task-home-content .card-presentation .card-item.item-my-task .box-tab {
  margin-left: 0;
  margin-right: 0;
  border: none;
}
.task-home-content .card-presentation .card-item .btn-create-task {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23777'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E") no-repeat left 10px center/12px auto;
  color: #777;
  padding: 5px 10px 5px 28px;
  transition: all 0.3s ease;
  border-radius: 4px;
  display: inline-flex;
  cursor: pointer;
  margin-bottom: 10px;
}
.task-home-content .card-presentation .card-item .btn-create-task:hover {
  background-color: #e9e9e9;
  color: #111;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23111'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E");
}
.task-home-content .card-presentation .card-item .card-sub-task {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #ccc;
  padding: 5px 5px 5px 0;
  cursor: pointer;
}
.task-home-content .card-presentation .card-item .card-sub-task:first-child {
  border-top: 1px solid #ccc;
}
.task-home-content .card-presentation .card-item .card-sub-task .item-add-sub-task {
  margin-top: 0;
  padding-top: 2px;
  padding-right: 10px;
  width: calc(100% - 26px);
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='icon' transform='translate(0 0.251)'%3E%3Cg id='Rectangle_18' data-name='Rectangle 18' transform='translate(0 -0.251)' fill='none' stroke='%23777' stroke-width='1'%3E%3Crect width='18' height='18' rx='9' stroke='none'/%3E%3Crect x='0.5' y='0.5' width='17' height='17' rx='8.5' fill='none'/%3E%3C/g%3E%3Cpath id='check-solid_1_' data-name='check-solid (1)' d='M7.758,96.192a.572.572,0,0,1,0,.809l-4.571,4.571a.572.572,0,0,1-.809,0L.092,99.287A.572.572,0,0,1,.9,98.478l1.882,1.88,4.167-4.166a.572.572,0,0,1,.809,0Z' transform='translate(5.075 -90.025)' fill='%23999'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat left top 4px/18px auto;
}
.task-home-content .card-presentation .card-item .card-sub-task .item-add-sub-task.sub-task-input {
  padding-left: 0;
  background: none;
  display: flex;
}
.task-home-content .card-presentation .card-item .card-sub-task .item-add-sub-task.sub-task-input input[type=checkbox]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5.715' viewBox='0 0 8 5.715'%3E%3Cpath id='check-solid_1_' data-name='check-solid (1)' d='M7.758,96.192a.572.572,0,0,1,0,.809l-4.571,4.571a.572.572,0,0,1-.809,0L.092,99.287A.572.572,0,0,1,.9,98.478l1.882,1.88,4.167-4.166a.572.572,0,0,1,.809,0Z' transform='translate(0.075 -96.025)' fill='%23999'/%3E%3C/svg%3E") no-repeat center;
  z-index: 3;
}
.task-home-content .card-presentation .card-item .card-sub-task .item-add-sub-task.sub-task-input input[type=checkbox]:checked::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5.715' viewBox='0 0 8 5.715'%3E%3Cpath id='check-solid_1_' data-name='check-solid (1)' d='M7.758,96.192a.572.572,0,0,1,0,.809l-4.571,4.571a.572.572,0,0,1-.809,0L.092,99.287A.572.572,0,0,1,.9,98.478l1.882,1.88,4.167-4.166a.572.572,0,0,1,.809,0Z' transform='translate(0.075 -96.025)' fill='%23fff'/%3E%3C/svg%3E") no-repeat center #009ef6;
}
.task-home-content .card-presentation .card-item .card-sub-task .item-calendar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px dashed #ccc;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Cpath d='M24.27,4h-3.27v-2c0-1.1-.9-2-2-2s-2,.9-2,2v2h-6v-2c0-1.1-.9-2-2-2s-2,.9-2,2v2h-3.27c-2.06,0-3.73,1.79-3.73,4v20c0,2.21,1.67,4,3.73,4h20.53c2.06,0,3.73-1.79,3.73-4V8c0-2.21-1.67-4-3.73-4ZM26.13,28c0,1.1-.84,2-1.87,2H3.73c-1.03,0-1.87-.9-1.87-2V11h24.27v17ZM12,21h-6v-6h6v6Z' style='fill: %23999; stroke-width: 0px;'/%3E%3C/svg%3E") no-repeat center/12px auto;
  transition: all 0.3s ease;
}
.task-home-content .card-presentation .card-item .card-sub-task .item-calendar:hover {
  background-color: #e9e9e9;
}
.task-home-content .card-presentation .card-item .card-sub-task .item-user {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px dashed #ccc;
  overflow: hidden;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18.286' viewBox='0 0 16 18.286'%3E%3Cpath id='user-solid_1_' data-name='user-solid (1)' d='M8,9.143A4.571,4.571,0,1,0,3.429,4.571,4.571,4.571,0,0,0,8,9.143ZM6.368,10.857A6.367,6.367,0,0,0,0,17.225a1.061,1.061,0,0,0,1.061,1.061H14.939A1.061,1.061,0,0,0,16,17.225a6.367,6.367,0,0,0-6.368-6.368Z' fill='%23999'/%3E%3C/svg%3E%0A") no-repeat center/11px auto;
  transition: all 0.3s ease;
}
.task-home-content .card-presentation .card-item .card-sub-task .item-user:hover {
  background-color: #e9e9e9;
}
.task-home-content .card-presentation .card-item .card-sub-task.sub-task-assigned .tasks-assigned {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.task-home-content .card-presentation .card-item .card-sub-task.sub-task-assigned .tasks-assigned .item-calendar {
  margin-right: 5px;
}
.task-home-content .card-presentation .card-item .card-sub-task.sub-task-assigned .tasks-assigned .item-due-date {
  margin-right: 5px;
  padding-bottom: 1px;
}
.task-home-content .card-presentation .card-item .text-suggest {
  text-align: center;
  font-size: 16px;
  color: #777;
  margin-top: 5px;
}
.task-home-content .card-presentation .card-item .btn-assign-task {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: table;
  margin: 20px auto 0;
  transition: all 0.3s ease;
  cursor: pointer;
}
.task-home-content .card-presentation .card-item .btn-assign-task:hover {
  background-color: #e9e9e9;
}
.task-home-content .card-presentation .card-item .title-project {
  display: flex;
  align-items: center;
}
.task-home-content .card-presentation .card-item .title-project .top-ttl {
  margin-bottom: 0;
}
.task-home-content .card-presentation .card-item .dr-ttl {
  margin-left: 10px;
  padding-top: 5px;
}
.task-home-content .card-presentation .card-item .content-project {
  display: flex;
  flex-wrap: wrap;
  height: 136px;
}
.task-home-content .card-presentation .card-item .card-item-project {
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  width: 50%;
  transition: all 0.3s ease;
}
.task-home-content .card-presentation .card-item .card-item-project .content {
  display: flex;
  align-items: center;
}
.task-home-content .card-presentation .card-item .card-item-project .dashed-tile {
  width: 48px;
  height: 48px;
  margin-right: 10px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  transition: all 0.3s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23777'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E") no-repeat center/12px auto;
}
.task-home-content .card-presentation .card-item .card-item-project .structure-title {
  font-size: 14px;
  color: #777;
  font-weight: 600;
  transition: all 0.3s ease;
}
.task-home-content .card-presentation .card-item .card-item-project .structure-info {
  color: #777;
}
.task-home-content .card-presentation .card-item .card-item-project.project-name .dashed-tile {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='15.743' viewBox='0 0 13 15.743'%3E%3Cg id='icon-create3' transform='translate(-88 -59)'%3E%3Cpath id='icon-project3' d='M10.744,1.513H9.9A1.7,1.7,0,0,0,8.219,0H4.831A1.7,1.7,0,0,0,3.148,1.513H2.253A2.129,2.129,0,0,0,0,3.485V13.771a2.13,2.13,0,0,0,2.255,1.972h8.49A2.13,2.13,0,0,0,13,13.771V3.485a2.13,2.13,0,0,0-2.255-1.972Zm-6.251.181a.34.34,0,0,1,.339-.339H8.219a.34.34,0,0,1,.339.339v.83a.34.34,0,0,1-.339.339H4.831a.34.34,0,0,1-.339-.339Zm7.217,12.077a.913.913,0,0,1-.966.845H2.255a.913.913,0,0,1-.966-.845V3.485a.913.913,0,0,1,.966-.845h.889c0-.039-.005-.076-.005-.115A1.7,1.7,0,0,0,4.833,4.218H8.221A1.7,1.7,0,0,0,9.91,2.639h.835a.913.913,0,0,1,.966.845V13.771ZM10.437,6.505h0a.615.615,0,0,1-.615.615H4.955a.615.615,0,0,1-.615-.615h0a.615.615,0,0,1,.615-.615H9.822A.615.615,0,0,1,10.437,6.505Zm0,2.463a.615.615,0,0,1-.615.615H4.955a.615.615,0,1,1,0-1.23H9.822A.615.615,0,0,1,10.437,8.968Zm0,2.463a.615.615,0,0,1-.615.615H4.955a.615.615,0,1,1,0-1.23H9.822A.615.615,0,0,1,10.437,11.431ZM3.683,6.4v.215a.508.508,0,0,1-1.016,0V6.4a.508.508,0,1,1,1.016,0Zm0,2.422v.215a.508.508,0,1,1-1.016,0V8.821a.508.508,0,1,1,1.016,0Zm0,2.5v.215a.508.508,0,0,1-1.016,0v-.215a.508.508,0,1,1,1.016,0Z' transform='translate(88 59)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: 18px auto;
}
.task-home-content .card-presentation .card-item .card-item-project.project-name .structure-title {
  color: #111;
}
.task-home-content .card-presentation .card-item .card-item-project.project-small {
  padding: 0;
  width: 100%;
}
.task-home-content .card-presentation .card-item .card-item-project.project-small .dashed-tile {
  width: 38px;
  height: 38px;
  background-size: 14px auto;
}
.task-home-content .card-presentation .card-item .card-item-project.project-small .structure-content {
  display: flex;
  width: calc(100% - 48px);
}
.task-home-content .card-presentation .card-item .card-item-project.project-small .structure-content .box-action {
  display: flex;
  align-items: center;
}
.task-home-content .card-presentation .card-item .card-item-project.project-small .structure-content .btn {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 10px 3px;
  width: 65px;
  margin-right: 15px;
  margin-top: 1px;
  text-align: center;
  transition: all 0.3s ease;
}
.task-home-content .card-presentation .card-item .card-item-project.project-small .structure-content .btn:hover {
  background-color: #f9f8f8;
}
.task-home-content .card-presentation .card-item .card-item-project.project-small .structure-full {
  justify-content: space-between;
}
.task-home-content .card-presentation .card-item .card-item-project:hover {
  background-color: #f9f8f8;
}
.task-home-content .card-presentation .card-item .card-item-project:hover .dashed-tile {
  border-color: #111;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23111'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E");
}
.task-home-content .card-presentation .card-item .card-item-project:hover .structure-title {
  color: #111;
}
.task-home-content .card-presentation .card-item .card-item-project:hover.project-name .dashed-tile {
  border-color: transparent;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='15.743' viewBox='0 0 13 15.743'%3E%3Cg id='icon-create3' transform='translate(-88 -59)'%3E%3Cpath id='icon-project3' d='M10.744,1.513H9.9A1.7,1.7,0,0,0,8.219,0H4.831A1.7,1.7,0,0,0,3.148,1.513H2.253A2.129,2.129,0,0,0,0,3.485V13.771a2.13,2.13,0,0,0,2.255,1.972h8.49A2.13,2.13,0,0,0,13,13.771V3.485a2.13,2.13,0,0,0-2.255-1.972Zm-6.251.181a.34.34,0,0,1,.339-.339H8.219a.34.34,0,0,1,.339.339v.83a.34.34,0,0,1-.339.339H4.831a.34.34,0,0,1-.339-.339Zm7.217,12.077a.913.913,0,0,1-.966.845H2.255a.913.913,0,0,1-.966-.845V3.485a.913.913,0,0,1,.966-.845h.889c0-.039-.005-.076-.005-.115A1.7,1.7,0,0,0,4.833,4.218H8.221A1.7,1.7,0,0,0,9.91,2.639h.835a.913.913,0,0,1,.966.845V13.771ZM10.437,6.505h0a.615.615,0,0,1-.615.615H4.955a.615.615,0,0,1-.615-.615h0a.615.615,0,0,1,.615-.615H9.822A.615.615,0,0,1,10.437,6.505Zm0,2.463a.615.615,0,0,1-.615.615H4.955a.615.615,0,1,1,0-1.23H9.822A.615.615,0,0,1,10.437,8.968Zm0,2.463a.615.615,0,0,1-.615.615H4.955a.615.615,0,1,1,0-1.23H9.822A.615.615,0,0,1,10.437,11.431ZM3.683,6.4v.215a.508.508,0,0,1-1.016,0V6.4a.508.508,0,1,1,1.016,0Zm0,2.422v.215a.508.508,0,1,1-1.016,0V8.821a.508.508,0,1,1,1.016,0Zm0,2.5v.215a.508.508,0,0,1-1.016,0v-.215a.508.508,0,1,1,1.016,0Z' transform='translate(88 59)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.task-home-content .card-presentation .card-item .card-item-project:hover.project-small {
  background-color: transparent;
}
.task-home-content .card-presentation .card-item .content-recommended-projects {
  padding: 15px 0;
}
.task-home-content .card-presentation .card-item .content-recommended-projects .recommended-ttl {
  font-weight: 700;
  color: #777;
  margin-bottom: 10px;
}
.task-home-content .card-presentation .card-item.card-item-full {
  width: 100%;
  margin-right: 0;
}
.task-home-content .card-presentation .card-item .card-item-people {
  display: flex;
  flex-wrap: wrap;
  height: 200px;
}
.task-home-content .card-presentation .card-item .card-item-email {
  cursor: pointer;
  padding: 10px;
  transition: all 0.3s ease;
  width: 25%;
  border-radius: 4px;
}
.task-home-content .card-presentation .card-item .card-item-email .content {
  display: flex;
  align-items: center;
}
.task-home-content .card-presentation .card-item .card-item-email .dashed-tile {
  width: 48px;
  height: 48px;
  margin-right: 10px;
  border: 1px dashed #ccc;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.3s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23777'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E") no-repeat center/12px auto;
}
.task-home-content .card-presentation .card-item .card-item-email .structure-title {
  font-size: 14px;
  color: #777;
  font-weight: 600;
  transition: all 0.3s ease;
}
.task-home-content .card-presentation .card-item .card-item-email:hover {
  background-color: #f9f8f8;
}
.task-home-content .card-presentation .card-item .card-item-email:hover .dashed-tile {
  border-color: #111;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23111'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E");
}
.task-home-content .card-presentation .card-item .card-item-email:hover .structure-title {
  color: #111;
}
.task-home-content .card-presentation .card-item .card-item-email.cr-email-name {
  position: relative;
}
.task-home-content .card-presentation .card-item .card-item-email.cr-email-name .dashed-tile {
  border-style: solid;
  border-color: #eee;
}
.task-home-content .card-presentation .card-item .card-item-email.cr-email-name .structure-title {
  color: #111;
}
.task-home-content .card-presentation .card-item .card-item-email.cr-email-name .btn-close {
  position: absolute;
  top: calc(50% - 14px);
  right: 10px;
  opacity: 0;
  visibility: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23CF000F'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath 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'/%3E%3C/svg%3E") no-repeat center/11px auto;
}
.task-home-content .card-presentation .card-item .card-item-email.cr-email-name:hover .btn-close {
  opacity: 1;
  visibility: visible;
}
.task-home-content .card-presentation .item-assign .top-ttl {
  width: 100%;
}
.task-home-content .card-presentation .item-assign .content-top {
  border-bottom: 1px solid #ccc;
}
.task-home-content .card-presentation .item-assign .box-tab {
  margin-left: 0;
  margin-right: 0;
  border: none;
}
.task-home-content .card-presentation .card-item-scrollable {
  height: 180px;
}
.task-home-content .card-presentation .box-tab-main {
  padding: 0;
}

.text-title-blue {
  color: #009ef6;
}

.text-title-blue-dark {
  color: #60C6FF;
}

.text-title-small {
  font-size: 12px;
}

.text-fancybox-date {
  color: #999999;
}

.invoice-preview-row {
  display: flex;
  gap: 24px;
  width: 100%;
}

.invoice-preview-col {
  flex: 1;
}

.invoice-preview-desc {
  margin-bottom: 8px;
  width: 100%;
}

.invoice-desc-content {
  margin-top: 4px;
}

.invoice-desc-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
  gap: 16px;
}

.invoice-preview-row:last-child {
  margin-bottom: 0;
}

.invoice-preview-col span {
  font-weight: 600;
  border-bottom: 1px solid #eee;
  margin-bottom: 5px;
  width: 100%;
  display: inline-table;
}

.invoice-desc-name {
  width: 470px;
  /* hoặc 240px, 280px tùy giao diện thực tế */
  min-width: 180px;
  max-width: 600px;
  word-break: break-word;
  font-weight: 500;
  flex-shrink: 0;
}

.invoice-desc-info {
  flex: 1 1 0;
  white-space: nowrap;
  text-align: right;
}

.invoice-desc-amount {
  flex: 0 0 120px;
  text-align: right;
  font-weight: bold;
  padding-left: 12px;
}

.f__m.alert-wide {
  width: 92vw !important;
  max-width: 95vw;
}

.invoice-preview-desc span {
  font-weight: 600;
}

.invoice-desc-table-wrapper {
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
}

.invoice-desc-table {
  width: 100%;
  border-collapse: collapse;
}

.invoice-desc-table th,
.invoice-desc-table td {
  padding: 4px 5px;
  border-bottom: 1px solid #dedede;
  word-break: break-word;
}

.invoice-desc-table th {
  font-weight: 600;
  background: #f5f5f5;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Hiệu ứng hover cho từng dòng trong bảng invoice-desc-table */
.invoice-desc-table tbody tr:hover {
  background: #f0f8ff;
  transition: background 0.2s;
}

.invoice-desc-table tbody tr {
  background: #eff4f8;
}

.invoice-desc-table th:last-child,
.invoice-desc-table td:last-child {
  text-align: center;
  width: 40px;
}

.invoice-desc-table .desc-input {
  border-bottom: 1px dashed #9e9e9e;
}

.invoice-desc-table .textarea.desc-input {
  border-bottom: 1px solid #a7a7a7;
}

.invoice-desc-table .textarea.desc-input.input-view {
  border-bottom: 1px solid #a7a7a7;
}

.invoice-desc-table .desc-input.input-view {
  border-bottom: none;
}

.LightMode .invoice-preview-flex input[type=checkbox] {
  background-color: #fff;
}

.LightMode .invoice-preview-flex .textarea {
  resize: vertical;
  min-height: 32px;
  max-height: 80px;
  width: 100%;
  font-family: inherit;
  border-radius: 4px;
  padding: 4px 8px;
  box-sizing: border-box;
}

.invoice-preview-flex {
  display: flex;
  gap: 24px;
  width: 100%;
  min-width: 600px;
  box-sizing: border-box;
  height: 80vh;
}

.invoice-preview-left-side {
  width: 15%;
  min-width: 220px;
  max-width: 400px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  background: #f5f5f5;
}

.invoice-preview-left-side .invoice-preview-left-side-content {
  padding: 10px;
}

.invoice-preview-left-side .invoice-preview-left-side-content .title-left-side {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #2d3a4a;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.invoice-preview-left-side .invoice-preview-left-side-content .title-left-side span {
  margin-right: 8px;
}
.invoice-preview-left-side .invoice-preview-left-side-content .title-left-side button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.invoice-list {
  height: 61vh;
  overflow: auto;
}

.invoice-list li {
  background: #f7fafd;
  border-radius: 6px;
  margin-bottom: 14px;
  padding: 12px 30px 10px 16px;
  box-shadow: 0 2px 8px rgba(96, 198, 255, 0.06);
  transition: box-shadow 0.2s, background 0.2s;
  position: relative;
  cursor: pointer;
}

.invoice-list li.active,
.invoice-list li:hover {
  background: #eaf6ff;
  box-shadow: 0 4px 16px rgba(96, 198, 255, 0.13);
}

.invoice-list li .invoice-meta {
  margin-left: 0;
  margin-top: 4px;
  color: #666;
  font-size: 13px;
  line-height: 1.5;
}

.invoice-list li:last-child {
  margin-bottom: 0;
}

.invoice-actions {
  position: absolute;
  top: 12px;
  right: 5px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.btn-invoice-action {
  background: #f5f5f5;
  border: none;
  border-radius: 4px;
  padding: 4px 7px;
  cursor: pointer;
  color: #4d5f88;
  font-size: 10px;
  transition: background 0.2s, color 0.2s;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-invoice-action:hover {
  background: #eaf6ff;
  color: #0077c8;
}

.btn-invoice-action.btn-remove {
  color: #cf000f;
}

.btn-invoice-action.btn-remove:hover {
  background: #ffeaea;
  color: #cf000f;
}

.invoice-preview-center {
  width: 35%;
  min-width: 220px;
  max-width: 650px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.invoice-preview-right-side {
  flex: 1 1 0;
  min-width: 320px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.invoice-preview-left,
.invoice-preview-right {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 16px;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.invoice-preview-right-scroll {
  overflow-y: auto;
  padding-top: 4px;
  width: 100%;
}

.invoice-preview-left {
  border-right: 1px solid #eee;
}

.invoice-attachments-list {
  margin-top: 8px;
  width: 100%;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.invoice-attachments-list .attachment-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #eee;
  height: 100%;
}

.invoice-info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}

.invoice-info-table td {
  padding: 6px 8px 6px 0px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}

.invoice-info-table .info-label {
  width: 180px;
  min-width: 120px;
  white-space: nowrap;
  padding-left: 5px;
}

.invoice-info-table .info-value {
  font-weight: 600;
  word-break: break-word;
  text-align: left;
}

.info-value-flex .vsb-main {
  max-width: calc(100% - 40px) !important;
  border-bottom: 1px dashed #9e9e9e;
  margin-right: 10px;
}

.info-value-flex .vsb-main button {
  border-bottom: none;
}

.info-value-flex .vsb-main button.disabled {
  opacity: 1;
}

.info-value-flex .vsb-main span.title {
  display: inline-block;
  max-width: 27vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.info-value-flex .vsb-menu ul li {
  white-space: normal;
}

.info-value-flex .vsb-menu ul li.current-read {
  color: red;
}

.info-value-flex .info-value-input,
.info-value-flex .vsb-main {
  flex: 1 1 0;
  min-width: 0;
}

.info-value-flex .info-value-input.input-highlight {
  border: 1.5px solid #ff3b3b !important;
  background: #fff0f0 !important;
  transition: border 0.2s, background 0.2s;
  border-radius: 4px;
  padding-left: 4px;
}

.info-value-flex .vsb-main.input-highlight {
  border: 1.5px solid #ff3b3b !important;
  background: #fff0f0 !important;
  transition: border 0.2s, background 0.2s;
  border-radius: 4px;
  padding-left: 4px;
}

.info-value-flex .vsb-js-search-zone input {
  font-size: 14px;
}

.info-value-flex {
  display: flex;
  align-items: center;
  gap: 12px;
}
.info-value-flex .info-value-input {
  flex: 1 1 0;
  min-width: 0;
}
.info-value-flex input[type=checkbox] {
  flex: none;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
}

.info-value-flex .info-value-input {
  flex: 1 1 0;
  margin-right: 12px;
  border-bottom: 1px dashed #9e9e9e;
}

.info-value-flex .info-value-input.input-view {
  border-bottom: none;
}

.info-value-flex .info-value-input,
.info-value-flex input[type=checkbox] {
  background: #fff;
  transition: background-position 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, box-shadow 0.2s;
}

.info-value-flex:hover .info-value-input,
.info-value-flex:hover input[type=checkbox] {
  background-image: linear-gradient(90deg, #e6f2ff 0%, #f0f8ff 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  background-color: #f0f8ff;
  box-shadow: 0 4px 16px 0 rgba(10, 102, 194, 0.08);
}

.info-value-flex input[type=checkbox] {
  margin-left: 0;
  margin-right: 0;
  background: #fff;
}

.item.item-file .img-file {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.item.item-file .img-file::after {
  content: "+";
  position: absolute;
  top: 41%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  color: #009ef6;
  font-size: 32px;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.item.item-file .img-file:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.item.item-file .img-file img {
  transition: none;
  display: block;
  max-width: 100%;
  max-height: 100%;
  filter: none;
  box-shadow: none;
  width: 28px;
  height: 28px;
}

.e-card-content .ac-task-deadline {
  color: #e94434;
}
.e-card-content .ac-task-deadline img {
  width: 16px;
  height: 16px;
  margin-right: 3px;
  margin-bottom: 2px;
}
.e-card-content .ac-task-private {
  color: #e94434;
}
.e-card-content .ac-task-attachment {
  color: #009ef6;
}

.purchasing-detail {
  color: #292A2E;
}
.purchasing-detail .task-detail-title .title {
  font-size: 18px;
  font-weight: 600;
  width: 100%;
}
.purchasing-detail .task-detail-title .stt-pending {
  color: #CA6924;
}
.purchasing-detail .task-detail-title .stt-working {
  color: #009ef6;
}
.purchasing-detail .task-detail-title .stt-finish {
  color: #26A65B;
}
.purchasing-detail .task-detail-title .stt-cancelled {
  color: #e94434;
}
.purchasing-detail .task-activities-detail .mess-image {
  width: 50%;
  max-height: 100px;
  object-fit: cover;
}
.purchasing-detail .task-detail-content {
  margin-top: 10px;
}
.purchasing-detail .task-detail-content .title-progress .number-progress {
  background: #009ef6;
}
.purchasing-detail .task-detail-content .item-add-sub-task input[type=text] {
  width: 100%;
  font-size: 13px;
}
.purchasing-detail .task-detail-content .task-subtask-title {
  border-bottom: 1px solid #ccc;
}
.purchasing-detail .task-detail-content .task-subtask .active-item-action {
  color: #009ef6;
  border-color: #009ef6;
}
.purchasing-detail .task-detail-content .task-subtask .item-Attachment {
  float: right;
}
.purchasing-detail .task-detail-content .task-subtask .icon-check-subtask .mark-btn {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='icon' transform='translate(0 0.251)'%3E%3Cg id='Rectangle_18' data-name='Rectangle 18' transform='translate(0 -0.251)' fill='none' stroke='%23999' stroke-width='1'%3E%3Crect width='18' height='18' rx='9' stroke='none'/%3E%3Crect x='0.5' y='0.5' width='17' height='17' rx='8.5' fill='none'/%3E%3C/g%3E%3Cpath id='check-solid_1_' data-name='check-solid (1)' d='M7.758,96.192a.572.572,0,0,1,0,.809l-4.571,4.571a.572.572,0,0,1-.809,0L.092,99.287A.572.572,0,0,1,.9,98.478l1.882,1.88,4.167-4.166a.572.572,0,0,1,.809,0Z' transform='translate(5.075 -90.025)' fill='%23999'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat left top 1.5px/18px auto;
  cursor: pointer;
  width: 20px;
  height: 20px;
}
.purchasing-detail .task-detail-content .task-subtask .icon-check-subtask .mark-btn:hover {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='icon' transform='translate(0 0.251)'%3E%3Cg id='Rectangle_18' data-name='Rectangle 18' transform='translate(0 -0.251)' fill='none' stroke='%2326A65B' stroke-width='1'%3E%3Crect width='18' height='18' rx='9' stroke='none'/%3E%3Crect x='0.5' y='0.5' width='17' height='17' rx='8.5' fill='none'/%3E%3C/g%3E%3Cpath id='check-solid_1_' data-name='check-solid (1)' d='M7.758,96.192a.572.572,0,0,1,0,.809l-4.571,4.571a.572.572,0,0,1-.809,0L.092,99.287A.572.572,0,0,1,.9,98.478l1.882,1.88,4.167-4.166a.572.572,0,0,1,.809,0Z' transform='translate(5.075 -90.025)' fill='%2326A65B'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat left top 1.5px/18px auto;
}
.purchasing-detail .task-detail-content .task-subtask .icon-check-subtask .mark-btn.active {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='icon' transform='translate(0 0.251)'%3E%3Cg id='Rectangle_18' data-name='Rectangle 18' transform='translate(0 -0.251)' fill='none' stroke='%2326A65B' stroke-width='1'%3E%3Crect width='18' height='18' rx='9' stroke='none'/%3E%3Crect x='0.5' y='0.5' width='17' height='17' rx='8.5' fill='none'/%3E%3C/g%3E%3Cpath id='check-solid_1_' data-name='check-solid (1)' d='M7.758,96.192a.572.572,0,0,1,0,.809l-4.571,4.571a.572.572,0,0,1-.809,0L.092,99.287A.572.572,0,0,1,.9,98.478l1.882,1.88,4.167-4.166a.572.572,0,0,1,.809,0Z' transform='translate(5.075 -90.025)' fill='%2326A65B'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat left top 1.5px/18px auto;
}
.purchasing-detail .task-detail-content .task-activities-detail .main-comment .block-story .activity-username {
  font-weight: 600;
}
.purchasing-detail .task-detail-content .task-activities-detail .main-comment .block-story .activity-date {
  font-size: 13px;
  color: #595959;
}

.LightMode::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #c2c2c2;
}
.LightMode::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.LightMode::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #777777;
}
.LightMode {
  color: #111;
  background: #fff;
}
.LightMode header.header.active {
  background: #e8ebef;
  border-bottom-color: #a7a7a7;
}
.LightMode .header-right .hd-box-switch .tooltiptext {
  background-color: #232b3e;
}
.LightMode .header-right .hd-box-switch .tooltiptext::after {
  border-left-color: #232b3e;
}
.LightMode .header-right .hd-txt {
  color: #111;
}
.LightMode .header-right .hd-user .gr-user-info {
  background: #d8dae1;
}
.LightMode .header-right .hd-user .gr-user-info::before {
  border-bottom-color: #d8dae1;
}
.LightMode .header-right .hd-user .gr-user-info figure {
  border-color: rgba(255, 255, 255, 0.3);
}
.LightMode .header-right .hd-box-bell .h_dot {
  border-color: #fff;
}
.LightMode .header-right .hd-box-bell .dropdown-menu-notification {
  background: #d8dae1;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.275);
}
.LightMode .header-right .hd-box-bell .dropdown-menu-notification::before {
  border-bottom-color: #d8dae1;
}
.LightMode .header-right .hd-box-bell .dropdown-menu-notification .popover-header {
  color: #111;
  border-color: #a7a7a7;
}
.LightMode .header-right .hd-box-bell .dropdown-menu-notification .message-data .box-info {
  color: #111;
}
.LightMode .header-right .hd-box-bell .dropdown-menu-notification ul::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #c2c2c2;
}
.LightMode .header-right .hd-box-bell .dropdown-menu-notification ul::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.LightMode .header-right .hd-box-bell .dropdown-menu-notification ul::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #777777;
}
.LightMode .header-right .hd-box-bell .dropdown-menu-notification ul {
  background: #fff;
}
.LightMode .header-right .hd-box-bell .dropdown-menu-notification ul li:not(:last-child) {
  border-color: #a7a7a7;
}
.LightMode .header-right .hd-box-bell .dropdown-menu-notification ul li .data:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #111;
}
.LightMode .header-right .hd-box-bell .dropdown-menu-notification .popover-footer a {
  color: #009ef6;
  border-color: #a7a7a7;
}
.LightMode .header-right .hd-box-bell .dropdown-menu-notification .popover-footer a:hover {
  background: rgba(255, 255, 255, 0.8);
}
.LightMode #nav-icon span {
  background: #232B3E;
}
.LightMode .content-confim-login {
  background: transparent;
}
.LightMode .box-session h2 {
  border-color: #a7a7a7;
}
.LightMode aside {
  background: #232B3E;
}
.LightMode aside::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #c2c2c2;
}
.LightMode aside::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.LightMode aside::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #777777;
}
.LightMode aside nav > ul > li.submenu ul li a.active::before, .LightMode aside nav > ul > li.submenu ul li a:hover::before {
  background: #fff;
}
.LightMode aside nav > ul > li.submenu > ul > li a::before, .LightMode aside nav > ul > li.submenu > ul > li .title::before {
  background: #8391A2;
}
.LightMode aside nav > ul > li.submenu .title::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%238391a2'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E");
}
.LightMode aside nav > ul > li.submenu .title.active::after, .LightMode aside nav > ul > li.submenu .title:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23fff'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E");
}
.LightMode aside nav a, .LightMode aside nav .title {
  color: #8391A2;
}
.LightMode aside nav a.active, .LightMode aside nav .title.active {
  color: #fff;
}
.LightMode aside nav a:hover, .LightMode aside nav .title:hover {
  color: #fff;
}
.LightMode a {
  color: #111;
}
.LightMode a:hover {
  color: #009ef6;
}
.LightMode a:hover, .LightMode a:active {
  color: #009ef6;
}
.LightMode .txt-cl-dark-blue {
  color: #009ef6;
}
.LightMode .txt-blue {
  color: #009ef6;
}
.LightMode input {
  color: #111;
}
.LightMode input[type=checkbox] {
  background-color: #a3a3a3;
  border-color: #a3a3a3;
}
.LightMode input[type=checkbox]:checked {
  border-color: #009ef6;
}
.LightMode input[type=checkbox]:checked::before {
  background-color: #009ef6;
}
.LightMode select::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #c2c2c2;
}
.LightMode select::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.LightMode select::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #777777;
}
.LightMode select {
  color: #111;
}
.LightMode select.monthselect, .LightMode select.yearselect {
  color: #111;
}
.LightMode select option {
  background: #fff;
}
.LightMode textarea {
  border-color: #a7a7a7;
  color: #111;
}
.LightMode .content-login input {
  color: #ccc;
}
.LightMode .content-login input:-webkit-autofill,
.LightMode .content-login input:-webkit-autofill:hover,
.LightMode .content-login input:-webkit-autofill:focus,
.LightMode .content-login input:-webkit-autofill:active {
  caret-color: #fff;
  -webkit-text-fill-color: #fff;
}
.LightMode .ovf-auto::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #c2c2c2;
}
.LightMode .ovf-auto::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.LightMode .ovf-auto::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #777777;
}
.LightMode .title-h2 {
  border-color: #a7a7a7;
}
.LightMode .ttl-style2 {
  background: #232B3E;
}
.LightMode .txt-blue {
  color: #009ef6;
}
.LightMode .table {
  color: #111;
}
.LightMode .table thead th.group-processing {
  background: #2c589e;
}
.LightMode .table tbody .fisrt-border-processing {
  border-left: 1px solid #a7a7a7;
}
.LightMode .table tbody .last-border-processing {
  border-right: 1px solid #a7a7a7;
}
.LightMode .table th, .LightMode .table td {
  border-color: #A7A7A7;
}
.LightMode .table th.txt-blue, .LightMode .table td.txt-blue {
  color: #009ef6;
}
.LightMode .table th.border-left, .LightMode .table td.border-left {
  border-color: #a7a7a7;
}
.LightMode .table th {
  background-color: #4d5f88;
  color: #fff;
  font-weight: 500;
}
.LightMode .table th input {
  color: #fff;
  caret-color: #fff;
}
.LightMode .table th input::placeholder {
  color: #ccc;
  opacity: 1;
  /* Firefox */
}
.LightMode .table th input::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: #ccc;
}
.LightMode .table tr.shown {
  background-color: #acc3e8;
}
.LightMode .table tr.shown.active {
  background-color: #acc3e8;
}
.LightMode .table tr.shown + tr > td td {
  background: #E5E5E5;
}
.LightMode .table tr.row-parent td {
  background: #acc3e8;
}
.LightMode .table tr.row-parent.active td {
  background: #acc3e8;
}
.LightMode .table tr.active {
  background: #dbdbdb;
}
.LightMode .table tr.active .item-img-comment .number {
  border-color: #dbdbdb;
}
.LightMode .table tr.active td.column-sum {
  background: #dbdbdb;
}
.LightMode .table tr.checkedReplan:not([class*=row-planning-main]) {
  background: #e6e6e6;
}
.LightMode .table tr.checkedRejected.row-planning-main {
  background: repeating-linear-gradient(-45deg, #efc3c0, #efc3c0 2px, #efefef 2px, #efefef 9px);
}
.LightMode .table a {
  color: #009ef6;
}
.LightMode .table a::before {
  background: #009ef6;
}
.LightMode .table .row-planning-main {
  background: #bdcfed;
}
.LightMode .table .row-planning-main.active {
  background: #bdcfed;
  font-weight: initial;
}
.LightMode .table .ttl-toggle-ov:hover {
  background: #acc3e8;
}
.LightMode .table input {
  border-bottom-color: #bbb;
}
.LightMode .table input::placeholder {
  color: #7d7d7d;
  opacity: 1;
  /* Firefox */
}
.LightMode .table input::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: #7d7d7d;
}
.LightMode .table.table-planning .row-planning-main {
  color: #111;
}
.LightMode .table .table th {
  color: #111;
}
.LightMode .table .tbl-icon-view-v360, .LightMode .table .file-video {
  color: #ffbb5b;
}
.LightMode .table .tbl-icon-view-v360 a, .LightMode .table .file-video a {
  color: #ffbb5b;
}
.LightMode .table .tbl-icon-view-v360 a::before, .LightMode .table .file-video a::before {
  content: "";
  width: calc(100% - 2px);
  background: #232b3e;
  left: 1px;
  bottom: 5px;
  height: 10px;
  border-radius: 4px;
}
.LightMode .table .twoAwhite-check {
  color: #009ef6;
}
.LightMode .table .cm-warrning {
  color: #111;
}
.LightMode .table td.td-order-name {
  vertical-align: middle;
}
.LightMode .table td.td-order-name .order-name {
  border-color: #009ef6;
}
.LightMode .table td.td-order-name .order-number {
  background: #ccc;
}
.LightMode .table td.td-order-name .gr-add-order-list .list {
  background: #415073;
  color: #fff;
}
.LightMode .table td.td-order-name .gr-add-order-list .list .ttl {
  border-color: #919191;
}
.LightMode .table-order-proportion th, .LightMode .table-order-proportion td {
  color: #fff;
}
.LightMode .table-order-proportion th input, .LightMode .table-order-proportion td input {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.LightMode .table-order-proportion th {
  border-color: transparent;
}
.LightMode .table-line-title thead tr:not(:first-child) th {
  border-top: none;
}
.LightMode .table tr.tr-row-disabled {
  background: repeating-linear-gradient(-45deg, #e4e4e4, #e4e4e4 2px, #f5f5f5 2px, #f5f5f5 9px);
}
.LightMode .table tr.tr-row-disabled .item-img-comment .number {
  border-color: #f5f5f5;
}
.LightMode .table tr.tr-row-disabled.active {
  background: repeating-linear-gradient(-45deg, #e4e4e4, #e4e4e4 2px, #f5f5f5 2px, #f5f5f5 9px);
}
.LightMode .tbl-manufacturing table tr:first-child th {
  border-color: #a7a7a7;
}
.LightMode .tbl-manufacturing table tr.separate th, .LightMode .tbl-manufacturing table tr.separate td {
  background: #4d5f88;
}
.LightMode .tbl-manufacturing table tr.active th, .LightMode .tbl-manufacturing table tr.active td {
  background: #dbdbdb;
}
.LightMode .tbl-manufacturing table tr td.stock-select-col {
  background-color: #dbdbdb;
}
.LightMode .tbl-manufacturing table tr th.separate, .LightMode .tbl-manufacturing table tr td.separate {
  background: #4d5f88;
}
.LightMode .tbl-production thead tr:first-child th:nth-child(2) {
  border-right-color: #a7a7a7;
}
.LightMode .tbl-production thead tr:first-child th:nth-child(3), .LightMode .tbl-production thead tr:first-child th:nth-child(4) {
  border-bottom-color: #a7a7a7;
}
.LightMode .tbl-production thead tr:first-child th:nth-child(3) {
  border-right-color: #a7a7a7;
}
.LightMode .tbl-production tbody tr[role=row] {
  background: #e5e5e5;
}
.LightMode .list-tone-finished-vertical .ttl {
  background-color: #4d5f88;
  color: #fff;
  border-color: #bbb;
}
.LightMode .list-tone-finished-vertical .tbl-item {
  border-color: #bbb;
}
.LightMode .icon-toggle {
  border-color: #111;
}
.LightMode .icon-toggle::before, .LightMode .icon-toggle::after {
  background: #111;
}
.LightMode .cm-button a {
  background: #415073;
  color: #fff;
  font-weight: 500;
}
.LightMode .cm-button a:after {
  content: "";
  position: absolute;
  z-index: -1;
  background: rgba(255, 255, 255, 0.2);
}
.LightMode .block-top .box-item {
  background: #E8EBEF;
}
.LightMode .block-top .box-item .number {
  color: #111;
}
.LightMode .block-top .box-item .ttl {
  color: #6C757D;
}
.LightMode .block-top .box-item .ttl::before {
  background: #a7a7a7;
}
.LightMode .block-top .box-item .carat {
  border-color: #a7a7a7;
}
.LightMode .title-01 {
  color: #111;
  font-weight: bold;
}
.LightMode .box-approval .cm-btn {
  background: #a7a7a7;
}
.LightMode .box-approval .cm-btn.active {
  background: #4d5f88;
}
.LightMode .block01 .group-btn button {
  color: #111;
}
.LightMode .block01 .note-chart-line .txt {
  color: #111;
}
.LightMode .block01 .note-chart-line .number {
  color: #111;
}
.LightMode .tabs a {
  color: #111;
}
.LightMode .dataTables-sum-page {
  color: #009ef6;
}
.LightMode .table-note li .highlight {
  color: #009ef6;
}
.LightMode .paginate_button {
  background-color: #E5E5E5;
  color: #111;
  font-weight: normal;
}
.LightMode .paginate_button:hover {
  background-color: #ccc;
  color: #757575;
  opacity: 1 !important;
}
.LightMode .paginate_button + .ellipsis {
  display: inline-flex;
  align-items: center;
}
.LightMode .paginate_button.previous, .LightMode .paginate_button.next {
  color: transparent;
  width: 26px;
  text-indent: -999px;
}
.LightMode .paginate_button.current {
  background-color: #afafaf;
  color: #111;
}
.LightMode .daterangepicker {
  background-color: #fff;
  border-color: #ccc;
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.2);
}
.LightMode .daterangepicker::before, .LightMode .daterangepicker::after {
  border-bottom-color: #ccc;
}
.LightMode .daterangepicker .drp-buttons {
  border-top-color: #ccc;
}
.LightMode .daterangepicker .ranges li.active {
  background-color: #17A2B8;
}
.LightMode .daterangepicker .ranges li.active:hover {
  background-color: #17A2B8;
}
.LightMode .daterangepicker .ranges li:hover {
  background-color: #ccc;
}
.LightMode .daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left-color: #ccc;
}
.LightMode .daterangepicker .calendar-table {
  background-color: #fff;
}
.LightMode .daterangepicker .calendar-table .next span, .LightMode .daterangepicker .calendar-table .prev span {
  border-color: #111;
}
.LightMode .daterangepicker th.available:hover, .LightMode .daterangepicker td.available:hover {
  background-color: #ccc;
}
.LightMode .daterangepicker td.off, .LightMode .daterangepicker td.off.in-range, .LightMode .daterangepicker td.off.start-date, .LightMode .daterangepicker td.off.end-date {
  background-color: transparent;
  color: #afafaf;
}
.LightMode .daterangepicker td.active, .LightMode .daterangepicker td.active:hover, .LightMode .daterangepicker td.active.in-range {
  background-color: #17A2B8;
}
.LightMode .daterangepicker td.in-range {
  background-color: #e6fcff;
}
.LightMode .daterangepicker select.monthselect, .LightMode .daterangepicker select.yearselect {
  color: #111;
}
.LightMode .daterangepicker .drp-buttons .btn {
  background: #a7a7a7;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
.LightMode .daterangepicker .drp-buttons .btn.applyBtn {
  background-color: #17A2B8;
}
.LightMode .daterangepicker .drp-buttons .btn:hover {
  opacity: 0.7;
}
.LightMode .heading01 .number {
  color: #009ef6;
}
.LightMode .heading01 .txt {
  color: #111;
}
.LightMode .dataTables_scrollBody::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #c2c2c2;
}
.LightMode .dataTables_scrollBody::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.LightMode .dataTables_scrollBody::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #777777;
}
.LightMode .box-filter .filter {
  color: #757575;
}
.LightMode .box-filter .filter.active {
  color: #009ef6;
}
.LightMode .box-filter .gr-ct-filter {
  color: #111;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5);
}
.LightMode .box-filter .gr-ct-filter.list-item .list:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
.LightMode .box-filter .gr-ct-filter.list-item .list.active, .LightMode .box-filter .gr-ct-filter.list-item .list:hover, .LightMode .box-filter .gr-ct-filter.list-item .list:active, .LightMode .box-filter .gr-ct-filter.list-item .list:focus {
  background-color: #acc3e8;
}
.LightMode .box-filter .gr-ct-filter .gr-wp-filter::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.LightMode .box-filter .gr-ct-filter .gr-wp-filter::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.LightMode .box-filter .gr-ct-filter .gr-wp-filter::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
.LightMode .box-filter .gr-ct-filter .gr-wp-filter ::-webkit-scrollbar-thumb {
  background-color: #444;
}
.LightMode .box-filter .content-filter .ttl-sub {
  color: #111;
}
.LightMode .box-filter .content-filter .ttl {
  color: #111;
  font-weight: bold;
}
.LightMode .box-filter .content-filter .componentWrapper > .title {
  color: #111;
  border-color: #6d6d6d;
  font-weight: bold;
}
.LightMode .box-filter .content-filter .componentWrapper .content-sub .shape {
  background: #fff;
  border-color: #6d6d6d;
}
.LightMode .box-filter .content-filter .componentWrapper .content-sub .shape.shape-selected {
  border-color: #275b8c;
}
.LightMode .box-filter .content-filter .componentWrapper .content-sub .shape.shape-selected span {
  color: #275b8c;
}
.LightMode .box-filter .content-filter .componentWrapper .content-sub .shape:hover {
  border-color: #275b8c;
}
.LightMode .box-filter .content-filter .componentWrapper .item-list-option .name {
  color: #111;
}
.LightMode .box-filter .content-filter .bg-filter {
  background: #ebebeb;
}
.LightMode .box-filter .content-filter .filter-item .label-filter {
  border-color: #6d6d6d;
  background: #fff;
}
.LightMode .box-filter .content-filter .filter-item .label-filter:hover {
  border-color: #275b8c;
}
.LightMode .box-filter .content-filter .filter-item .label-filter.active {
  border-color: #275b8c;
  background: #275b8c;
}
.LightMode .box-filter .content-filter .filter-advanced-search-textbox.filter-box-all-shape .filter-item .label-filter {
  color: #111;
}
.LightMode .box-filter .content-filter .filter-advanced-search-textbox.filter-box-all-shape .filter-item .label-filter:hover {
  border-color: #275b8c;
}
.LightMode .box-filter .content-filter .filter-advanced-search-textbox.filter-box-all-shape .filter-item .label-filter.active {
  border-color: #275b8c;
  background: #275b8c;
  color: #fff;
}
.LightMode .box-filter .content-filter .block-filter .label-filter-title {
  color: #111;
}
.LightMode .box-filter .content-filter input:checked {
  accent-color: #009ef6;
}
.LightMode .section-filter .filter-tooltip {
  background: #232b3e;
}
.LightMode .section-filter .filter-tooltip .info {
  color: #009ef6;
}
.LightMode .section-filter .filter-tooltip .info .ttl {
  color: #fff;
}
.LightMode .select-action ul {
  color: #111;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.2);
}
.LightMode .select-action ul li:hover {
  background-color: #acc3e8;
}
.LightMode .select-action ul li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
.LightMode .select-action ul li.arrow-up {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%236d6d6d'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E") no-repeat right 10px center/8px auto;
}
.LightMode .select-action ul li.arrow-up:hover {
  background-color: #acc3e8;
}
.LightMode .select-action ul li.arrow-down {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%236d6d6d'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M169.4 470.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 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") no-repeat right 10px center/8px auto;
}
.LightMode .select-action ul li.arrow-down:hover {
  background-color: #acc3e8;
}
.LightMode .vsb-main button {
  color: #111;
}
.LightMode .vsb-menu {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.LightMode .vsb-menu ul {
  color: #111;
}
.LightMode .vsb-menu ul::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #c2c2c2;
}
.LightMode .vsb-menu ul::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.LightMode .vsb-menu ul::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #777777;
}
.LightMode .vsb-menu li:hover, .LightMode .vsb-menu li.active {
  color: #111;
  background: #c5d5ef;
}
.LightMode .vsb-menu li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.LightMode .vsb-menu .multi li.active {
  color: #111;
  background: transparent;
}
.LightMode .vsb-menu .multi li:hover {
  color: #111;
  background: #c5d5ef;
}
.LightMode .vsb-menu .multi li:not(.grouped-option).active::after {
  background-color: #009ef6;
}
.LightMode .vsb-js-search-zone {
  background: #fff;
}
.LightMode .gr-ct-filter .vsb-menu {
  background: #fff !important;
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.2);
}
.LightMode .gr-btn-product .btn-block {
  color: #009ef6;
}
.LightMode .cm-select-title .item label {
  color: inherit;
}
.LightMode .popup-proportion-detail .ttl {
  color: inherit;
}
.LightMode .has-comment {
  color: #009ef6;
}
.LightMode #cboxContent {
  background: #fff;
}
.LightMode #cboxContent.light-background-login {
  background: #161616;
}
.LightMode #colorbox .vsb-menu {
  background: #fff;
}
.LightMode #colorbox .vsb-menu ::-webkit-scrollbar-thumb {
  background-color: #777777;
}
.LightMode #colorbox .vsb-menu ul {
  color: #111;
}
.LightMode .idx-artical-table tr th {
  background: none;
  color: #111;
  border-color: #a7a7a7;
}
.LightMode .table tr.tbPropotion-Header {
  background-color: #4d5f88;
}
.LightMode .table tr.tbPropotion-Header th {
  color: #fff;
  font-weight: normal;
}
.LightMode .table tr.tbPropotion-Header td {
  border-top: 1px solid #a7a7a7;
  color: #111;
}
.LightMode #cboxLoadedContent::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #c2c2c2;
}
.LightMode #cboxLoadedContent::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.LightMode #cboxLoadedContent::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #777777;
}
.LightMode .stone-detail-header {
  background-color: #36425f;
}
.LightMode .stone-detail-header a {
  color: #fff;
}
.LightMode .stone-detail-header a:hover {
  color: #009ef6;
}
.LightMode .block-stone .ttl {
  border-color: #a7a7a7;
  color: inherit;
  font-weight: bold;
}
.LightMode .block-stone .ttl.txt-green {
  color: #008b00;
}
.LightMode .block-stone .item:nth-child(2) {
  color: #009ef6;
}
.LightMode .proportion-img .img-name {
  color: #fff;
}
.LightMode .proportion-img [class*=col-] {
  background: rgba(0, 0, 0, 0.1);
}
.LightMode .stone-picture-group-detail .show-detail, .LightMode .stone-picture-group-detail-model .show-detail {
  background: transparent;
  border-color: #e5e5e5;
}
.LightMode .stone-picture-group-detail .show-detail.active, .LightMode .stone-picture-group-detail-model .show-detail.active {
  border-color: #009ef6;
}
.LightMode .stone-picture-group-detail .ttl-name, .LightMode .stone-picture-group-detail-model .ttl-name {
  color: #111;
}
.LightMode .slider-widget .splide--nav > .splide__slider > .splide__track > .splide__list > .splide__slide.is-active, .LightMode .slider-widget .splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
  border-color: #009ef6;
}
.LightMode .slider-widget .splide--nav > .splide__slider > .splide__track > .splide__list > .splide__slide, .LightMode .slider-widget .splide--nav > .splide__track > .splide__list > .splide__slide {
  border-color: #e5e5e5;
}
.LightMode .box-step-procedure {
  background: rgba(0, 0, 0, 0.1);
}
.LightMode .box-step-procedure ol li.steps-completed .name {
  background: #232b3e;
}
.LightMode .box-step-procedure ol li .name {
  background: #b8b8b8;
}
.LightMode .box-step-procedure ol li.steps-completed.active .name {
  color: #009ef6;
}
.LightMode .stImport-Header {
  color: #111;
  border-color: #a7a7a7;
}
.LightMode .table-import-info {
  border-color: #a7a7a7;
}
.LightMode .table-import-info tr:not(:last-child) th {
  border-color: #a7a7a7;
}
.LightMode .modalComment h6 {
  color: #111;
}
.LightMode .modalComment-box .comment-content {
  color: #111;
  background: #b9c9e3;
}
.LightMode .modalComment-box.box2 .comment-content {
  background: #fff;
}
.LightMode .txt-comment {
  border-color: rgba(138, 156, 186, 0.4);
}
.LightMode .slider.round {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='18' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath opacity='1' fill='%23111' d='M384 128c70.7 0 128 57.3 128 128s-57.3 128-128 128H192c-70.7 0-128-57.3-128-128s57.3-128 128-128H384zM576 256c0-106-86-192-192-192H192C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192zM192 352a96 96 0 1 0 0-192 96 96 0 1 0 0 192z'/%3E%3C/svg%3E");
}
.LightMode .slider.round:active, .LightMode .slider.round:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='18' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath opacity='1' fill='%231e1e20' d='M192 64C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192s-86-192-192-192H192zm192 96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z'/%3E%3C/svg%3E");
}
.LightMode label.switch input[type=checkbox]:checked + .slider.round {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='18' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath opacity='1' fill='%231e1e20' d='M192 64C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192s-86-192-192-192H192zm192 96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z'/%3E%3C/svg%3E");
}
.LightMode .box-orderCompletion {
  border-color: #a7a7a7;
}
.LightMode .gr-order-item .item:nth-child(odd) {
  background: #d8dae2;
}
.LightMode .gr-tb-current-stock .add-new {
  color: #444;
}
.LightMode .box-kpi label {
  color: #000;
}
.LightMode .stock-dialogPreview .box-bottom {
  border-color: #a7a7a7;
}
.LightMode .icon-nav-right {
  background: #232b3e;
  color: #fff;
}
.LightMode .icon-nav-right.active {
  background: #17a2b8;
}
.LightMode .nav-right {
  background: #e6e7e9;
  border: 1px solid #a7a7a7;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.LightMode .nav-right::before {
  background: #009ef6;
}
.LightMode .nav-right .nav-title {
  border-color: #a7a7a7;
}
.LightMode .nav-right .nav-title .icon {
  color: #fff;
}
.LightMode .nav-right .nav-title.mly-menu-sub {
  color: #009ef6;
}
.LightMode .nav-right .nav-title .icon-down {
  color: #6d6d6d;
}
.LightMode .nav-right.nav-right-order .box-planSelected .ttl-toggle .ttl::before {
  background: #009ef6;
}
.LightMode .nav-right.nav-right-order .box-planSelected .customer-name {
  color: #111;
}
.LightMode .nav-right.nav-right-order .box-planSelected .customer-name .ic {
  color: #009ef6;
}
.LightMode .nav-right.nav-right-order .box-planSelected .title-order {
  background: #bdcfed;
  border-color: #bdcfed;
}
.LightMode .nav-right.nav-right-order .box-planSelected .title-order .or-name {
  color: #111;
}
.LightMode .nav-right.nav-right-order .or-note {
  background: #e6e7e9;
}
.LightMode .nav-content {
  height: 100%;
  overflow: auto;
}
.LightMode .nav-content::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}
.LightMode .nav-content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.LightMode .nav-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6d6d6d;
}
.LightMode .nav-content .tabs li .sum {
  background: rgba(0, 0, 0, 0.15);
}
.LightMode .nav-content .tabs li.active a {
  color: #009ef6;
}
.LightMode .nav-content .tabs li.active a::before {
  background: #009ef6;
}
.LightMode .nav-pin .icon {
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.07 13.77'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23009ef6; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m6.42,9.28H2.34c-.26,0-.5-.12-.65-.33-.15-.21-.19-.48-.11-.72l.02-.07c.31-.92.92-1.67,1.7-2.17l3.12,3.3ZM3.14,2.1h.74l-.11,1.46,5.41,5.72h1.14c.26,0,.5-.12.65-.33.15-.21.19-.47.11-.72l-.02-.07c-.34-1.03-1.07-1.87-1.98-2.36l-.28-3.7h.74c.44,0,.8-.36.8-.8s-.36-.8-.8-.8H3.14c-.44,0-.8.36-.8.8s.36.8.8.8Zm2.39,10.37c0,.44.36.8.8.8s.8-.36.8-.8v-2.39h-1.6v2.39Zm7.38,1.16c.2-.19.21-.51.02-.71L.86.16C.67-.04.36-.05.16.14c-.2.19-.21.51-.02.71l12.07,12.77c.1.1.23.16.36.16.12,0,.25-.04.34-.14Z'/%3E%3C/svg%3E");
}
.LightMode .nav-right-ct {
  background: #fff;
}
.LightMode .nav-right-ct li {
  border-color: #c1c1c1;
}
.LightMode .nav-right-ct.nav-hide .icon {
  color: #009ef6;
}
.LightMode .box-planSelected .ttl-toggle {
  background: #fff;
  border-color: #fff;
}
.LightMode .box-planSelected .ttl-toggle.active {
  border-color: #a7a7a7;
}
.LightMode .box-planSelected .ttl-toggle .icon {
  color: #6d6d6d;
}
.LightMode .box-planSelected .ttl-toggle .date {
  background: #dbdbdb;
}
.LightMode .box-planSelected .ttl-toggle .history-comment::before {
  background-color: #111;
}
.LightMode .box-planSelected .content {
  background: #fff;
}
.LightMode .planSelect-content-toggle {
  border-color: #a7a7a7;
}
.LightMode .planSelect-content-toggle .tr-main-blue {
  color: #009ef6;
}
.LightMode .planSelect-content-toggle .txt2.box-quality-rate .part-txt {
  color: #009ef6;
}
.LightMode .planSelect-content-toggle .txt::before {
  background: #111;
}
.LightMode .planSelect-content-toggle .stone-part {
  border-color: #a7a7a7;
}
.LightMode .planSelect-content-toggle .b-note {
  background: #e6e7e9;
}
.LightMode .nav-footer .nav-white::before {
  background: #111;
}
.LightMode .nav-footer .nav-blue {
  color: #009ef6;
}
.LightMode .nav-footer .nav-blue::before {
  background: #009ef6;
}
.LightMode .cm-block .block {
  background: #e8ebef;
}
.LightMode .cm-block .block::before {
  background-image: url(../images/icon-bg-light.png);
}
.LightMode .cm-block .title-style {
  border-color: #a7a7a7;
}
.LightMode .cm-block .vsb-menu {
  background: #fff;
}
.LightMode .cm-block .vsb-menu .vsb-js-search-zone {
  background: #fff;
}
.LightMode .block-detil {
  color: #111;
}
.LightMode .stone-specification input {
  border-color: #a7a7a7;
}
.LightMode .stone-specification textarea {
  border-color: #a7a7a7;
  color: #111;
}
.LightMode .stone-specification .vsb-main button {
  border-color: #a7a7a7;
}
.LightMode .icon-edit {
  border-color: rgba(204, 204, 204, 0.4);
  background-color: rgba(204, 204, 204, 0.5);
}
.LightMode .icon-edit i {
  color: #111;
}
.LightMode .my-legend-chart-lab-grown .checkbox {
  color: #111;
}
.LightMode .box-heatmapchart .axisXTitle, .LightMode .box-heatmapchart .axisYTitle {
  border-color: #6d6d6d;
}
.LightMode .simple-item {
  border-color: #a7a7a7;
}
.LightMode .simple-item .simple-gr-sub .sub-status {
  background: #009ef6;
}
.LightMode .simple-item .s-status {
  background: #a8a8a8;
}
.LightMode .simple-item .s-status.active {
  background: #525969;
}
.LightMode .role-item {
  border-color: #a7a7a7;
}
.LightMode .role-title {
  background: #d8dae2;
  color: #111;
  font-weight: 500;
  border-color: #a7a7a7;
}
.LightMode .gr-role .col:first-child {
  color: #111;
}
.LightMode .gr-role input.form-control {
  border-color: #a7a7a7;
}
.LightMode .modal-dialog .icon-save {
  color: #009ef6;
}
.LightMode .slider-widget .splide--nav > .splide__slider > .splide__track > .splide__list > .splide__slide.is-active, .LightMode .slider-widget .splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
  border-color: #009ef6;
}
.LightMode .gr-radiobox label:hover input ~ .checkmark {
  border-color: #009ef6;
}
.LightMode .gr-radiobox label input:checked ~ .checkmark {
  border-color: #009ef6;
}
.LightMode .gr-radiobox label .checkmark:after {
  background-color: #009ef6;
}
.LightMode .main-stone-comment {
  color: #009ef6;
}
.LightMode .titleMessageBox .stone-color {
  color: #009ef6;
}
.LightMode table tr.txt-average td {
  color: #009ef6;
}
.LightMode table .progress .progress-bar {
  background-color: #acc3e8;
}
.LightMode .stock-dialogPreview .box-total .txt .number {
  color: #009ef6;
}
.LightMode .txt-more {
  color: #009ef6;
}
.LightMode .ulChartDefine li:not(:last-child) {
  border-color: #C1C1C1;
}
.LightMode .ulChartDefine li a::before {
  background: #a7a7a7;
}
.LightMode .ulChartDefine li a:hover {
  color: #009ef6;
}
.LightMode .ulChartDefine li a.active {
  color: #009ef6;
}
.LightMode .ulChartDefine li input[type=checkbox]:checked {
  border-color: #555;
}
.LightMode .ulChartDefine li input[type=checkbox]:checked::before {
  background-image: url(../images/check-solid.svg);
}
.LightMode .ulChartDefine li input[type=checkbox]:focus {
  border-color: #008B00;
}
.LightMode .gr-dropdown-pin-hide {
  border-color: #C1C1C1;
}
.LightMode .icon-pin-hide .icon:hover {
  color: #009ef6;
}
.LightMode .icon-pin-hide .icon.active {
  color: #009ef6;
}
.LightMode .control-fileupload::after {
  background: #4d5f88;
  color: #fff;
}
.LightMode .block-stone .item .txt.txt-blue {
  color: #009ef6;
}
.LightMode .tbl-border-td-top tr:first-child td {
  border-color: #a7a7a7;
}
.LightMode .column-sum {
  background: #e5e5e5;
  font-weight: bold;
}
.LightMode .accidentlogbook-table td {
  color: #111;
}
.LightMode .cm-legend .icon-new {
  background-color: #111;
}
.LightMode .cm-legend .txt {
  color: #111;
}
.LightMode #colorbox .vsb-js-search-zone {
  background: #fff;
}
.LightMode .stImport-box .form-control {
  color: #111;
}
.LightMode .modal-dialog {
  background: #fff;
}
.LightMode .ttl-style {
  color: #111;
  background: rgba(0, 0, 0, 0.1);
}
.LightMode .ttl-style::before {
  background: #111;
}
.LightMode .cm-form input {
  border-color: #a7a7a7;
}
.LightMode .boderDetailWeekly {
  border-color: #a7a7a7;
}
.LightMode .scaife-action > div {
  border-color: rgba(204, 204, 204, 0.4);
  background-color: rgba(204, 204, 204, 0.3);
}
.LightMode .scaife-action > div:hover {
  background-color: rgba(204, 204, 204, 0.8);
}
.LightMode .scaife-action > div:first-child {
  border-color: rgba(0, 158, 246, 0.15);
  background: rgba(0, 158, 246, 0.15);
  color: #222b3d;
}
.LightMode .scaife-action > div:first-child:hover {
  border-color: rgba(0, 158, 246, 0.3);
  background: rgba(0, 158, 246, 0.3);
}
.LightMode .box-ancholink .button-acl a {
  color: #fff;
}
.LightMode .container-gemex:not(:last-child) {
  border-color: #ccc;
}
.LightMode .container-gemex .item-gemex .form-title {
  background: #dbdbdb;
}
.LightMode .tbl-icon-view-v360 a::before {
  width: 100%;
  background: #4d5f88;
  height: 10px;
  border-radius: 4px;
}
.LightMode .gr-tb-current-stock .check-Replan input[type=checkbox] {
  background-color: transparent;
  border-color: #000;
}
.LightMode .box-toolbar .item {
  border-color: #ccc;
}
.LightMode .box-toolbar .item .ttl-name {
  background: #bdcfed;
}
.LightMode .box-toolbar .item .heading01 .txt:not(:last-child) {
  border-right-color: #ccc;
}
.LightMode .content_picture {
  border: 2px solid #e5e5e5;
}
.LightMode .content_picture .picture-top {
  background: rgba(0, 0, 0, 0.8);
}
.LightMode .container-shipment .ttl-tbl {
  color: #111;
}
.LightMode .cm-btn-create {
  background: #525969;
}
.LightMode .calendar.fc.fc-theme-standard th, .LightMode .calendar.fc.fc-theme-standard td {
  border-color: #fff;
}
.LightMode .calendar.fc.fc-theme-standard .fc-popover {
  background: #fff;
  border: 1px solid #a7a7a7;
}
.LightMode .calendar.fc .fc-highlight {
  background: rgba(0, 0, 0, 0.1);
}
.LightMode .calendar.fc .fc-multimonth-daygrid {
  background: #e8ebef;
}
.LightMode .calendar.fc th.fc-col-header-cell {
  background: #4d5f88;
}
.LightMode .calendar.fc th.fc-col-header-cell a {
  color: #fff;
}
.LightMode .calendar.fc .fc-header-toolbar {
  border-bottom: 1px solid #a7a7a7;
}
.LightMode .calendar.fc .fc-header-toolbar .fc-today-button:hover {
  background: rgba(0, 0, 0, 0.2);
  border-color: #a7a7a7;
}
.LightMode .calendar.fc .fc-header-toolbar .fc-today-button:disabled {
  background: rgba(0, 0, 0, 0.2);
  border-color: #a7a7a7;
}
.LightMode .calendar.fc .fc-cell-shaded, .LightMode .calendar.fc .fc-day-disabled {
  background: rgba(0, 0, 0, 0.05);
}
.LightMode .calendar.fc .fc-button-primary {
  border-color: rgba(0, 0, 0, 0.3);
  color: #111;
}
.LightMode .calendar.fc .fc-button-primary:not(:disabled).fc-button-active, .LightMode .calendar.fc .fc-button-primary:not(:disabled):active {
  background: rgba(0, 0, 0, 0.2);
  border-color: #a7a7a7;
}
.LightMode .calendar.fc .fc-multimonth-daygrid-table .fc-day-sat .fc-daygrid-day-top a, .LightMode .calendar.fc .fc-multimonth-daygrid-table .fc-day-sun .fc-daygrid-day-top a {
  color: #e5780b;
}
.LightMode .calendar.fc .fc-daygrid-day.fc-day-today {
  background: none;
}
.LightMode .calendar.fc .fc-scrollgrid-section {
  background: #e8ebef;
}
.LightMode .calendar.fc .fc-day-other {
  background: rgba(0, 0, 0, 0.1);
}
.LightMode .calendar.fc .fc-timegrid-col.fc-day-today {
  background: rgba(94, 80, 63, 0.15);
}
.LightMode .calendar.fc .fc-event-title .txt {
  color: #111;
}
.LightMode .calendar.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #c2c2c2;
}
.LightMode .calendar.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.LightMode .calendar.fc .fc-more-popover .fc-popover-body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #777777;
}
.LightMode .calendar.fc div.rydiam-event {
  background: #0087d3;
}
.LightMode .calendar.fc .fc-day-today .fc-daygrid-day-top .fc-daygrid-day-number {
  color: #0087d3;
}
.LightMode .calendar.fc .fc-day-today .fc-daygrid-day-frame {
  border-color: #0087d3;
}
.LightMode .calendar.fc .active-this-month {
  color: #0087d3;
}
.LightMode .calendar.fc .fc-listWeek-view .fc-list-event:hover td, .LightMode .calendar.fc .fc-listDay-view .fc-list-event:hover td {
  background: #ccc;
}
.LightMode .calendar.fc .fc-timegrid-more-link {
  background: #b7b7b7;
}
.LightMode .calendar .fc-header-toolbar.cl-fixed {
  background: #fff;
}
.LightMode .calendar-info-footer {
  background: #fff;
}
.LightMode .calendar-info-footer .col-md-2 .icon-leave {
  background: #AE1F19;
}
.LightMode .calendar-info-footer .col-md-2 .icon-birthday {
  background: #f26a8d;
}
.LightMode .calendar-info-footer .col-md-2 .icon-notice {
  background: #E66424;
}
.LightMode .calendar-info-footer .col-md-2 .icon-private {
  background: #8E6E51;
}
.LightMode .calendar-tab-day li .number {
  background: rgba(204, 204, 204, 0.7);
}
.LightMode .calendar-tab-day li .number::after {
  background: rgba(204, 204, 204, 0.7);
}
.LightMode .calendar-tab-day li.active .number {
  background: rgba(0, 158, 246, 0.2);
}
.LightMode .calendar-tab-day li.active .number::after {
  background: rgba(0, 158, 246, 0.2);
}
.LightMode .rydiam-cal-event input, .LightMode .rydiam-cal-event .vsb-main button, .LightMode .rydiam-cal-content-event input, .LightMode .rydiam-cal-content-event .vsb-main button {
  border-color: #a7a7a7;
}
.LightMode .rydiam-cal-content-event .col-title input {
  width: 100%;
}
.LightMode .rydiam-cal-content-event .col-title .exported-date {
  width: 100px;
}
.LightMode .rydiam-cal-content-event .col-title label, .LightMode .rydiam-cal-content-event .col-title .txt-bold, .LightMode .rydiam-cal-content-event .col label, .LightMode .rydiam-cal-content-event .col .txt-bold {
  color: #111;
}
.LightMode .rydiam-cal-content-event .ttl-description {
  color: #111;
}
.LightMode .rydiam-cal-content-event .box-attachment {
  margin-bottom: 10px;
}
.LightMode .rydiam-cal-content-event .box-attachment .ttl-attachment {
  color: #111;
}
.LightMode .rydiam-cal-content-event .ttl-all-day {
  color: #111;
}
.LightMode .rydiam-cal-event .ry-title {
  color: #111;
}
.LightMode .cm-icon-action > div {
  background: rgba(204, 204, 204, 0.4);
  border-color: rgba(204, 204, 204, 0.5);
}
.LightMode .cm-icon-action > div:hover {
  background: rgba(204, 204, 204, 0.7);
}
.LightMode .cm-icon-action > div:first-child {
  border-color: rgba(0, 158, 246, 0.15);
  background: rgba(0, 158, 246, 0.15);
  color: #222b3d;
}
.LightMode .rydiam-cal-event-icon.cm-icon-action > div:first-child {
  background: rgba(204, 204, 204, 0.4);
  border-color: rgba(204, 204, 204, 0.5);
  color: inherit;
}
.LightMode .rydiam-cal-event-icon.cm-icon-action > div:first-child:hover {
  background: rgba(204, 204, 204, 0.7);
}
.LightMode .section-calendar-filter .gr-calendar-filter {
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.LightMode .section-calendar-filter .gr-calendar-filter .list:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.LightMode .box-related-approvals {
  border-color: #a7a7a7;
}
.LightMode .box-related-approvals .ttl {
  border-color: #a7a7a7;
}
.LightMode .box-related-approvals .b-approvals {
  border-color: #a7a7a7;
}
.LightMode .form-div-content .form-title {
  color: inherit;
}
.LightMode .note-color .color7::before {
  background: #ffd600;
}
.LightMode .note-color .color8::before {
  background: #69c0e8;
}
.LightMode .note-color .color9::before {
  background: #7fe18d;
}
.LightMode .note-color .color10::before {
  background: #ff9529;
}
.LightMode .note-color .color11::before {
  background: #d45754;
}
.LightMode .note-color .color12::before {
  background: #14532D;
}
.LightMode .note-color .color13::before {
  background: repeating-linear-gradient(-45deg, #efc3c0, #efc3c0 2px, #efefef 2px, #efefef 5px);
}
.LightMode .overlay-smart-otp {
  background: #ccc;
}
.LightMode .monthly-menuChart::before, .LightMode .monthly-menuChart::after {
  background: #fff;
}
.LightMode .btn-slick {
  background: #fff;
}
.LightMode .btn-slick::before, .LightMode .btn-slick::after {
  background: #fff;
}
.LightMode .btn-slick:hover {
  color: #111;
}
.LightMode .slick-prev {
  left: 0;
}
.LightMode .slick-next {
  right: 0;
}
.LightMode .tabs.tab-ontop::before {
  background: #ccc;
}
.LightMode .tabs.tab-ontop li {
  background: #ccc;
}
.LightMode .tabs.tab-ontop li.active {
  background: #415073;
}
.LightMode .tabs.tab-ontop li.active a {
  color: #fff;
}
.LightMode .pr-information-pic a {
  border-color: #a7a7a7;
}
.LightMode .footer-colorbox {
  border-color: #a7a7a7;
}
.LightMode .cm-form .item .ttl {
  color: inherit;
}
.LightMode .detail-info-img .col-02 {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: none;
}
.LightMode .detail-info-img .col-02::before {
  color: inherit;
}
.LightMode .detail-info-img .col-02::after {
  left: -1px;
  right: -1px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e4e4;
  border-top: none;
}
.LightMode .content-p-specification-video .box-video .item {
  background: #e6e6e6;
}
.LightMode .box-v360-quality .item .img .ttl-date {
  background: rgba(0, 0, 0, 0.1);
}
.LightMode .box-v360-quality .item .img .btn {
  background: rgba(0, 0, 0, 0.2);
}
.LightMode .box-v360-quality .item .img .btn a:hover {
  color: #111;
}
.LightMode .box-v360-quality .item .title {
  color: #0087d3;
}
.LightMode .box-v360-quality .item .stone-comment {
  background: rgba(0, 0, 0, 0.1);
}
.LightMode .box-v360-quality .item .stone-comment.noComment {
  background: transparent;
}
.LightMode .box-v360-quality .box-evalution {
  border-color: #a7a7a7;
}
.LightMode .box-v360-quality .box-evalution .btn:not(:last-child) {
  border-color: #a7a7a7;
}
.LightMode .box-v360-quality .box-evalution .btn:hover {
  background: rgba(0, 0, 0, 0.1);
}
.LightMode .box-v360-quality .box-evalution .btn .icon {
  background: rgba(0, 0, 0, 0.15);
}
.LightMode .box-v360-quality .box-evalution .btn.active .icon {
  background: rgba(233, 68, 52, 0.2);
}
.LightMode .box-v360-quality .box-evalution .btn-good.active {
  background: rgba(0, 139, 0, 0.2);
}
.LightMode .box-v360-quality .box-evalution .btn-ok.active {
  background: rgba(25, 161, 251, 0.2);
}
.LightMode .box-v360-quality .box-evalution .btn-reject.active {
  background: rgba(233, 68, 52, 0.2);
}
.LightMode .V360-quality-sum .txt {
  background: rgba(0, 0, 0, 0.1);
}
.LightMode .V360-quality-sum .txt.active {
  background: rgba(25, 161, 251, 0.2);
}
.LightMode .cm-box-info {
  border-color: #a7a7a7;
}
.LightMode .program-reference-img .item {
  border-color: #a7a7a7;
}
.LightMode .program-reference-img .item .title {
  background: #ccc;
}
.LightMode .program-reference-img .item.active {
  border-color: #2c589e;
}
.LightMode .program-reference-img .item.active .title {
  background: #2c589e;
  color: #fff;
}
.LightMode .program-reference-3d {
  border: 1px solid #a7a7a7;
}
.LightMode .content-program-reference .box-total {
  color: white;
  background: #415073;
}
.LightMode .f__cm .f__m {
  background: #fff;
  box-shadow: 1px 3px 18px rgba(0, 0, 0, 0.1);
}
.LightMode .f__cm .f__m__h {
  background: #4d5f88 !important;
}
.LightMode .f__cm .f__m__f .f__btn[data-al=true] {
  background: #ccc !important;
}
.LightMode .f__cm .f__m__f .f__btn[data-evt=ccl] {
  background: #4d5f88 !important;
}
.LightMode .content-profile {
  border-color: #a7a7a7;
}
.LightMode .facet-content .title, .LightMode .facet-content .detail-mistake-total .item-total .ttl, .LightMode .facet-content .detail-mistake-total .total-amount .number {
  color: #111;
}
.LightMode .facet-content .box, .LightMode .facet-content .detail-mistake-total, .LightMode .facet-content .detail-mistake-total .item-total .ttl {
  border-color: #a7a7a7;
}
.LightMode .facet-content .content-sub .shape {
  background: #fff;
  border-color: #6d6d6d;
}
.LightMode .facet-content .content-sub .shape.shape-selected {
  border-color: #275b8c;
}
.LightMode .facet-content .content-sub .shape.shape-selected span {
  color: #275b8c;
}
.LightMode .facet-content .content-sub .shape:hover {
  border-color: #275b8c;
}
.LightMode .facet-content .btn-option:hover {
  border-color: #275b8c;
}
.LightMode .facet-content .btn-option.active {
  border-color: #275b8c;
  background: #275b8c;
}
.LightMode .facet-content .cm-button-facet .item::before, .LightMode .facet-content .cm-button-facet .item::after {
  background: #afafaf;
}
.LightMode .facet-content .cm-button-facet .item .btn-number {
  background: #afafaf;
}
.LightMode .facet-content .cm-button-facet .item .btn-number::before {
  border-top-color: #afafaf;
}
.LightMode .facet-content .cm-button-facet .item.active::after {
  background: #275b8c;
}
.LightMode .facet-content .cm-button-facet .item.active .btn-number {
  background: #275b8c;
  color: #fff;
}
.LightMode .facet-content .cm-button-facet .item.active .btn-number::before {
  border-top-color: #275b8c;
}
.LightMode .facet-content .cm-button-facet .item.defined::after {
  background: #008b00;
}
.LightMode .facet-content .cm-button-facet .item.defined .btn-number {
  background: transparent;
}
.LightMode .facet-content .cm-button-facet .item.defined .btn-number::before {
  border-top-color: #008b00;
}
.LightMode.page-realtime .realtime-date {
  border: 1px solid rgba(0, 0, 0, 0.5);
  color: #111;
}
.LightMode.page-realtime .realtime-date .date {
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.LightMode .header-realtime ul li .number {
  color: #111;
}
.LightMode .box-realtime .vsb-main button {
  color: #fff;
}
.LightMode .box-realtime .realtime-item {
  border: 1px solid #232b3e;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
.LightMode .box-realtime .realtime-item .rt-title {
  border-radius: 0;
}
.LightMode .parent-email-to {
  border-color: #a7a7a7;
}
.LightMode .email-to {
  border-color: #ccc;
}
.LightMode .realtime-ic-fixed a {
  color: #fff;
}
.LightMode .advisorInfomationDetail .title-ct-advisor::before {
  border-left: 20px solid #ededed;
}
.LightMode .advisorInfomationDetail .title-ct-advisor::after {
  border-right: 20px solid #ededed;
}
.LightMode .advisorInfomationDetail [class*=col-] {
  background: #ededed;
}
.LightMode .advisorInfomationDetail .table {
  background: #fff;
}
.LightMode .email-confirm::before, .LightMode .email-confirm::after {
  background: #fff;
}
.LightMode .content-profile .profile-from .ttl {
  color: #111;
}
.LightMode .content-profile .profile-from .item {
  border-color: #a7a7a7;
}
.LightMode .tab_content .icon-eye {
  background-image: url(../images/eye-regular-light.svg);
}
.LightMode .tab_content .icon-eye.active {
  background-image: url(../images/eye-slash-regular-light.svg);
}
.LightMode .text-link {
  color: #009ef6;
}
.LightMode .text-link::before {
  background: #009ef6;
}
.LightMode .modalComment-box .comment-user, .LightMode .modalComment-box .comment-date {
  color: #4c4c4c;
}
.LightMode .detail-comment {
  background: rgba(172, 195, 232, 0.3);
}
.LightMode .comment-send-mail .icon-paper:hover {
  color: #009ef6;
}
.LightMode .comment-send-mail .icon:hover {
  color: #009ef6;
}
.LightMode .footer-colorbox-send-mail .comment-send-mail {
  background: #ebebeb;
}
.LightMode .footer-colorbox-send-mail .comment-send-mail .note-shipment {
  border-color: #a7a7a7;
}
.LightMode .order-detail .ttl-item {
  color: #111;
}
.LightMode .order-detail .ttl-item::before {
  background: #284a9b;
}
.LightMode .order-detail .ttl-item .t-ttl {
  color: #111;
  font-weight: 400;
}
.LightMode .order-detail .item-customer {
  color: #fff;
  font-weight: bold;
  background: #415073;
}
.LightMode .order-detail .item-customer .icon {
  color: #dbf1ff;
}
.LightMode .order-detail .item-customer-popup {
  color: #111;
}
.LightMode .order-detail .item-customer-popup .icon {
  color: #009ef6;
}
.LightMode .order-content-item {
  border-color: #a7a7a7;
}
.LightMode .order-information .content .item {
  border-color: #a7a7a7;
}
.LightMode .order-information .content .item .ttl {
  background: rgba(0, 0, 0, 0.15);
}
.LightMode .order-information .note {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.99 10.2'%3E%3Cpath d='M1.8,3.3c0-.17.13-.3.3-.3h3c.17,0,.3.13.3.3s-.13.3-.3.3h-3c-.17,0-.3-.13-.3-.3M2.1,4.8c-.17,0-.3.13-.3.3s.13.3.3.3h3c.17,0,.3-.13.3-.3s-.13-.3-.3-.3h-3ZM1.8,6.9c0-.17.13-.3.3-.3h1.2c.17,0,.3.13.3.3s-.13.3-.3.3h-1.2c-.17,0-.3-.13-.3-.3M1.2.3c0-.17.13-.3.3-.3s.3.13.3.3v.3h1.5v-.3c0-.17.13-.3.3-.3s.3.13.3.3v.3h1.5v-.3c0-.17.13-.3.3-.3s.3.13.3.3v.3h.3c.5,0,.9.4.9.9v2.84c-.2.08-.38.21-.54.37l-.06.06V1.5c0-.17-.13-.3-.3-.3H.9c-.17,0-.3.13-.3.3v7.2c0,.17.13.3.3.3h2.23l-.1.39c-.02.07-.03.14-.03.21H.9c-.5,0-.9-.4-.9-.9V1.5c0-.5.4-.9.9-.9h.3v-.3ZM7.09,5.13l-2.9,2.9c-.17.17-.29.38-.35.61l-.23.9c-.07.29.1.58.39.65.08.02.17.02.26,0l.9-.22c.23-.06.44-.18.61-.35l2.9-2.9c.43-.44.43-1.15-.01-1.59-.44-.43-1.14-.43-1.57,0' style='fill: %236d6d6d; stroke-width: 0px;'/%3E%3C/svg%3E");
}
.LightMode .order-process {
  background: rgba(0, 0, 0, 0.1);
}
.LightMode .order-process .step::before {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37.98 36.98'%3E%3Cg id='Group_1' data-name='Group 1'%3E%3Crect id='bg-nb' x='5.83' y='4.83' width='27.32' height='27.32' rx='2' ry='2' transform='translate(-7.37 19.2) rotate(-45)' style='fill: %23121829; stroke-width: 0px;'/%3E%3Crect id='bg-nb-2' x='4.83' y='4.83' width='27.32' height='27.32' rx='2' ry='2' transform='translate(-7.66 18.49) rotate(-45)' style='fill: %23415073; stroke-width: 0px;'/%3E%3C/g%3E%3C/svg%3E");
}
.LightMode .order-process .step::after {
  background: #777777;
}
.LightMode .order-process .item-process .ttl {
  background: #415073;
  color: #fff;
}
.LightMode .order-process .item-process .ttl::before {
  background: #fff;
}
.LightMode .order-process .item-process .number {
  background: #121829;
  color: #fff;
}
.LightMode .order-process .item-process .pieces {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.71 8.57'%3E%3Cpath d='M7.71.29l1.71,2.29-4.57,5.71L.29,2.57,2.01.29h5.71ZM.29,2.57h9.14M3.14,2.57l1.71,5.71M6.57,2.57l-1.71,5.71' style='fill: none; stroke: %236d6d6d; stroke-linecap: round; stroke-linejoin: round; stroke-width: .57px;'/%3E%3Cpath d='M2.01.29l1.14,2.29L4.86.29l1.71,2.29L7.71.29' style='fill: none; stroke: %236d6d6d; stroke-linecap: round; stroke-linejoin: round; stroke-width: .57px;'/%3E%3C/svg%3E");
  color: #000;
}
.LightMode .order-process .item-process .pieces .number-percent::before {
  background: #555;
}
.LightMode .order-process .item-process:hover .ttl {
  background: #7b8cb4;
}
.LightMode .order-process .item-process:hover .pieces {
  color: #009ef6;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.71 8.57'%3E%3Cpath d='M7.71.29l1.71,2.29-4.57,5.71L.29,2.57,2.01.29h5.71ZM.29,2.57h9.14M3.14,2.57l1.71,5.71M6.57,2.57l-1.71,5.71' style='fill: none; stroke: %23009ef6; stroke-linecap: round; stroke-linejoin: round; stroke-width: .57px;'/%3E%3Cpath d='M2.01.29l1.14,2.29L4.86.29l1.71,2.29L7.71.29' style='fill: none; stroke: %23009ef6; stroke-linecap: round; stroke-linejoin: round; stroke-width: .57px;'/%3E%3C/svg%3E");
}
.LightMode .order-process .item-process:hover .step::before {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37.98 36.98'%3E%3Cg id='Group_1' data-name='Group 1'%3E%3Crect id='bg-nb' x='5.83' y='4.83' width='27.32' height='27.32' rx='2' ry='2' transform='translate(-7.37 19.2) rotate(-45)' style='fill: %23415073; stroke-width: 0px;'/%3E%3Crect id='bg-nb-2' x='4.83' y='4.83' width='27.32' height='27.32' rx='2' ry='2' transform='translate(-7.66 18.49) rotate(-45)' style='fill: %237b8cb4; stroke-width: 0px;'/%3E%3C/g%3E%3C/svg%3E");
}
.LightMode .order-process .line-progress .progress-number {
  color: #000;
}
.LightMode .order-process .line-progress .line-progress-finish.very-poor {
  background: #e52e30;
}
.LightMode .order-process .line-progress .line-progress-finish.poor {
  background: #f18030;
}
.LightMode .order-process .line-progress .line-progress-finish.fair {
  background: #f1c82a;
}
.LightMode .order-process .line-progress .line-progress-finish.normal {
  background: #82b73c;
}
.LightMode .order-process .line-progress .line-progress-finish.good {
  background: #24943b;
}
.LightMode .order-process .boxStep1 {
  background: #dbf1ff;
}
.LightMode .order-process .boxStep2 {
  background: #afdfff;
}
.LightMode .order-process .boxStep3 {
  background: #83d1c3;
}
.LightMode .order-process .child-category-order .child-txt {
  color: #009ef6;
}
.LightMode .planning-highlight {
  border-color: #B00020;
}
.LightMode .table .item-img-comment .number {
  border-color: #fff;
}
.LightMode .gr-tb-current-stock .add-comment .number {
  border-color: #bdcfed;
}
.LightMode .section-calendar-addnew .gr-calendar-addnew {
  background: #4d5f88;
}
.LightMode .section-calendar-addnew .gr-calendar-addnew .list {
  color: #fff;
}
.LightMode .section-calendar-addnew .gr-calendar-addnew .list:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.LightMode .info-machine {
  color: #60c6ff;
}
.LightMode .order-top-title {
  background: #bdcfed;
}
.LightMode .order-top-title .or-name {
  color: #284a9b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cpath fill='%23284a9b' fill-rule='evenodd' d='M5.5 1a.5.5 0 0 0-.477.65l.11.35H3.5a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-1.632l.11-.35A.5.5 0 0 0 10.5 1zm.68 1h3.64l-.313 1H6.493zM11 7H5V6h6zm0 2.5H5v-1h6zM5 12h4v-1H5z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.LightMode .order-top-title .box-edit {
  color: #111;
  border-color: rgba(0, 0, 0, 0.3);
}
.LightMode .order-top-title .box-edit:hover {
  background: #009ef6;
  color: #fff;
}
.LightMode .order-top-title .box2 {
  border-color: #333;
}
.LightMode .order-top-title .box-parameter {
  background: rgba(40, 74, 155, 0.15);
}
.LightMode .order-top-title .note {
  color: #111;
  background: rgba(0, 0, 0, 0.07);
}
.LightMode .order-top-title .box-top .box-total .item .ttl {
  background: rgba(0, 0, 0, 0.15);
  color: #111;
}
.LightMode .modalNewOrder .modalDetail .ttl {
  color: #111;
  font-weight: bold;
}
.LightMode .modalNewOrder .modalDetail .new-order-multiple .ttl {
  color: #fff;
  font-weight: 500;
}
.LightMode .modalNewOrder .modalDetail .new-order-multiple .col .vsb-js-search-zone input {
  color: #111;
  border-color: grey;
}
.LightMode .modalNewOrder .modalDetail .new-order-multiple .col input {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.LightMode .modalNewOrder .modalDetail .new-order-multiple .col input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.LightMode .modalNewOrder .modalDetail .new-order-multiple .col .textarea {
  border-color: rgba(255, 255, 255, 0.2);
}
.LightMode .modalNewOrder .modalDetail .new-order-multiple .col select {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.LightMode .modalNewOrder .modalDetail .new-order-multiple .col .vsb-main button {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.LightMode .modalNewOrder .cm-new-order .col input {
  border-color: #a7a7a7;
}
.LightMode .modalNewOrder .detail-order.order-send-mail .title-send-mail {
  background: #E8EBEF;
}
.LightMode .modalNewOrder .detail-order .col input {
  border-color: #a7a7a7;
}
.LightMode .modalNewOrder .detail-order .col .vsb-main button {
  border-color: #a7a7a7;
}
.LightMode .modalNewOrder .detail-order .new-order-box {
  border-color: #a7a7a7;
}
.LightMode .modalNewOrder .title-send-mail .col-title .title {
  border-color: #a7a7a7;
  color: #111;
  font-weight: bold;
}
.LightMode .modalNewOrder .title-send-mail .col-title .info-email-to {
  border-color: #a7a7a7;
}
.LightMode .modalNewOrder .mail-ttl-note {
  font-weight: bold;
}
.LightMode .modalNewOrder .new-order-multiple {
  background: #232b3e;
}
.LightMode #colorbox .icon-send-mail {
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.79 8.29'%3E%3Cpath d='M8.09,7h-1.59c-.14,0-.26-.05-.36-.14-.1-.1-.14-.21-.14-.36,0-.14.05-.26.14-.36.1-.1.21-.14.36-.14h1.59l-.45-.45c-.09-.09-.14-.21-.14-.34s.05-.26.15-.36c.09-.09.21-.14.35-.14s.26.05.35.14l1.3,1.3s.08.09.1.16c.03.06.04.13.04.19s-.01.13-.04.19c-.02.06-.06.11-.1.16l-1.3,1.3c-.09.09-.21.14-.34.14s-.26-.04-.36-.14c-.09-.09-.14-.21-.14-.35s.05-.26.14-.35l.44-.45ZM1,7c-.27,0-.51-.1-.71-.29-.2-.2-.29-.43-.29-.71V1C0,.73.1.49.29.29.49.1.73,0,1,0h6.5c.28,0,.51.1.71.29.2.2.29.43.29.71v2.04c0,.13-.05.25-.15.35s-.22.15-.35.15c-.14,0-.26-.05-.36-.14-.1-.1-.14-.21-.14-.36v-1.34l-3.3,2.3L1,1.71v4.29h3.54c.14,0,.26.05.36.14s.14.21.14.36c0,.14-.05.26-.14.36-.1.1-.21.14-.36.14H1ZM1.72,1l2.47,1.78,2.55-1.78H1.72ZM1,6V1v5Z' style='fill: %23111; stroke-width: 0px;'/%3E%3C/svg%3E");
}
.LightMode #colorbox .icon-send-mail:hover {
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.79 8.29'%3E%3Cpath d='M8.09,7h-1.59c-.14,0-.26-.05-.36-.14-.1-.1-.14-.21-.14-.36,0-.14.05-.26.14-.36.1-.1.21-.14.36-.14h1.59l-.45-.45c-.09-.09-.14-.21-.14-.34s.05-.26.15-.36c.09-.09.21-.14.35-.14s.26.05.35.14l1.3,1.3s.08.09.1.16c.03.06.04.13.04.19s-.01.13-.04.19c-.02.06-.06.11-.1.16l-1.3,1.3c-.09.09-.21.14-.34.14s-.26-.04-.36-.14c-.09-.09-.14-.21-.14-.35s.05-.26.14-.35l.44-.45ZM1,7c-.27,0-.51-.1-.71-.29-.2-.2-.29-.43-.29-.71V1C0,.73.1.49.29.29.49.1.73,0,1,0h6.5c.28,0,.51.1.71.29.2.2.29.43.29.71v2.04c0,.13-.05.25-.15.35s-.22.15-.35.15c-.14,0-.26-.05-.36-.14-.1-.1-.14-.21-.14-.36v-1.34l-3.3,2.3L1,1.71v4.29h3.54c.14,0,.26.05.36.14s.14.21.14.36c0,.14-.05.26-.14.36-.1.1-.21.14-.36.14H1ZM1.72,1l2.47,1.78,2.55-1.78H1.72ZM1,6V1v5Z' style='fill: %23009ef6; stroke-width: 0px;'/%3E%3C/svg%3E");
}
.LightMode #colorbox .icon-send-mail.close {
  background-color: #415073;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23fff'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath 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 160z'/%3E%3C/svg%3E");
}
.LightMode #colorbox .icon-send-mail.close:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23009ef6'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath 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 160z'/%3E%3C/svg%3E");
}
.LightMode .cm-send-mail-chat .col-title .title {
  color: #111;
  border-color: #a7a7a7;
}
.LightMode .cm-send-mail-chat .col-title .info-email-to {
  border-color: #a7a7a7;
}
.LightMode .cm-send-mail-chat .col-title .title-email {
  font-weight: 600;
  color: #111;
}
.LightMode .cm-send-mail-chat .col-title .title-subject {
  font-weight: 600;
  color: #111;
}
.LightMode .cm-send-mail-chat .col-title .mail-ttl-note {
  font-weight: 600;
  color: #111;
}
.LightMode .cm-popup-send-mail .comment-send-mail {
  background: #415073;
  color: #fff;
}
.LightMode .cm-popup-send-mail .comment-send-mail .ip-comment {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.LightMode .cm-popup-send-mail .comment-send-mail .ip-comment::placeholder {
  color: #ccc;
}
.LightMode .cm-popup-send-mail .comment-send-mail .note-shipment {
  border-color: rgba(255, 255, 255, 0.3);
}
.LightMode .disabled-label:hover {
  border-color: #6d6d6d !important;
}
.LightMode .cm-box-tooltip .content-tooltip {
  background: #415073;
}
.LightMode .cm-box-tooltip .content-tooltip .note {
  background: #333;
}
.LightMode .cm-box-tooltip .list .txt.line::after {
  background: #919191;
}
.LightMode .cm-box-tooltip .list .partName {
  color: #fff;
}
.LightMode .box-fileupload {
  border-color: #a7a7a7;
}
.LightMode .control-fileupload-style2 .txt-small {
  color: #111;
}
.LightMode .upload-name-file .name-file {
  background-color: #dedede;
}
.LightMode .upload-name-file a {
  color: #009ef6;
}
.LightMode .form-uploadfile {
  background: #e7f6f8;
}
.LightMode .modalNewOrder .content-order-multiple .box-fileupload {
  border-color: rgba(255, 255, 255, 0.2);
}
.LightMode .modalNewOrder .content-order-multiple .control-fileupload-style2 .txt-small {
  color: #fff;
}
.LightMode .modalNewOrder .content-order-multiple .upload-name-file .name-file {
  background: #E5E5E5;
}
.LightMode .totop .icon {
  background: #4d5f88;
}
.LightMode .menu-tutorials .icon {
  background: #4d5f88;
}
.LightMode .tabs li.active a {
  color: #009ef6;
}
.LightMode .tabs li.active a::before {
  background: #009ef6;
}
.LightMode .detail-invoice .detail-invoice-stone {
  background: #232b3e;
  border-radius: 4px;
  margin-bottom: 10px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.LightMode .detail-invoice .detail-invoice-stone .header-stone {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.LightMode .modelPreviewMail .col-title .title {
  font-weight: bold;
  color: #111;
}
.LightMode .dt-skeleton {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(100deg, #e6e8eb 40%, #f3f4f6 50%, #e6e8eb 60%);
  background-size: 200% 100%;
  animation: dtShimmer 1.2s ease-in-out infinite;
}

@media screen and (max-width: 1024px) {
  .LightMode header.header {
    background: #232b3e;
    border-color: #323d58;
  }
  .LightMode header.header #nav-icon span {
    background: #8391a2;
  }
  .LightMode header.header.header-full {
    background: transparent;
  }
  .LightMode header.header.header-full.active {
    background: #e8ebef;
  }
  .LightMode header.header.active {
    border-color: #a7a7a7;
  }
  .LightMode header.header.active #nav-icon span {
    background: #8391a2;
  }
  .LightMode header.header.active.open {
    border-color: #323d58;
  }
  .LightMode header.header.open {
    background: #232b3e;
    border-color: #323d58;
  }
  .LightMode header.header.open .header-right .hd-txt {
    color: #fff;
  }
  .LightMode .menu_toggle nav > ul > li {
    border-bottom: 1px solid #323d58;
  }
}
@media screen and (max-width: 750px) {
  .LightMode .modalDetail .ttl, .LightMode .block-stone .item .txt {
    color: inherit;
  }
  .LightMode .block-stone {
    border: 1px solid #a7a7a7;
    background: transparent;
  }
  .LightMode .block-stone .item:not(:last-child) {
    border-color: #a7a7a7;
  }
  .LightMode .tabs li {
    border-color: #c2c2c2;
    background: #ccc;
  }
  .LightMode .tabs li.active {
    background: #fff;
  }
  .LightMode .tabs li.active::before {
    background-color: #009ef6;
  }
  .LightMode .tabs li.active a {
    color: #009ef6;
  }
  .LightMode .tab_container {
    border-color: #c2c2c2;
  }
  .LightMode .tab-style02 li.active {
    color: #60c6ff;
  }
  .LightMode .calendar-tab-day li .number {
    background: rgba(0, 0, 0, 0.25);
  }
  .LightMode .calendar-tab-day li .number::after {
    background: rgba(0, 0, 0, 0.25);
  }
  .LightMode .tbl-product-information tr:first-child td {
    border-color: #a7a7a7;
  }
  .LightMode .tbl-product-information tr:not(:first-child) td:not(:last-child) {
    border-color: #a7a7a7;
  }
  .LightMode .tab_container_sub {
    background: transparent;
    border-color: #c2c2c2;
  }
  .LightMode .tabs-title-one .tabs li, .LightMode .pagePerformance .tabs li {
    color: #009ef6;
  }
  .LightMode #colorbox .btn-slick::before {
    background: #fff;
  }
  .LightMode .facet-content .facet-item:not(:nth-child(odd)) {
    background: #ebebeb;
  }
}/*# sourceMappingURL=style.min.css.map */