.tag-theme {
    border-radius: 6px;
    font-family: Sarabun, sans-serif
}
.general-tag-theme {
    display: flex;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 14px;
    line-height: 22px
}
.general-tag-theme .ant-tag-close-icon {
    --tw-text-opacity: 1;
    color: rgb(218 142 59 / var(--tw-text-opacity))
}
.general-tag-theme .ant-tag-close-icon:hover {
    --tw-text-opacity: 1;
    color: rgb(218 142 59 / var(--tw-text-opacity))
}

.tag-multiple-container .tag-multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem
}
.tag-multiple-container .tag-multiple .ant-select {
    width: 100%
}
.tag-multiple-more {
    display: flex;
    flex-direction: column;
    gap: 0.25rem
}
.tag-multiple-container .tag-multiple .ant-select-selector {
    cursor: auto !important;
    border-style: none;
    background-color: transparent !important
}
.tag-multiple-container .tag-multiple .ant-select-arrow {
    display: none
}
.tag-multiple-container .tag-multiple .item-tag-multiple {
    border-radius: 19px;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem
}

.group-tag,
.agent-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem
}
.agent-tag .ant-avatar {
    border-width: 0px
}
.agent-tag.mine {
    --tw-border-opacity: 1;
    border-color: rgb(100 106 115 / var(--tw-border-opacity))
}
.agent-tag .anticon svg {
    height: 18px;
    width: 18px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.group-tag > span:first-child {
    transform: translateY(3%)
}
.group-tag-border,
.agent-tag-border {
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-left: 0.125rem;
    padding-right: 0.125rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem
}
.group-tag-border {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 0.25rem;
    padding-right: 0.25rem
}
/* Style <hr /> in Modal Delete Folder */
.hr-style {
    margin-top: 0.5rem;
    height: 1px;
    width: 100%;
    border-width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(226 226 226 / var(--tw-bg-opacity))
}

/* Style Title in Modal Delete Folder */
.title-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem
}
.title-svg {
    font-size: 20px;
    --tw-text-opacity: 1;
    color: rgb(240 54 54 / var(--tw-text-opacity))
}

/* Style Content in Modal Delete Folder */
.size-text h3 {
    margin-top: 0.75rem;
    font-size: 14px
}
.spin-loading {

    margin-top: 16px;

    margin-bottom: 16px
}

.spin-loading-fullscreen {

    position: fixed;

    inset: 0px;

    z-index: 50;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: rgb(0 0 0 / var(--tw-bg-opacity));

    --tw-bg-opacity: 0.3;

    --tw-backdrop-blur: blur(4px);

    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
/* Style for Confirm and Cancel Button in Modal */
.confirm-btn {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(241 157 67 / var(--tw-bg-opacity)) !important;
    padding-top: 4px !important
}
.confirm-btn:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(218 142 59 / var(--tw-bg-opacity)) !important;
    padding-top: 4px !important
}
.confirm-btn .ant-btn-loading-icon {
    position: absolute;
    left: 16px;
    bottom: 16px
}
.confirm-btn.ant-btn-loading > span:not(.ant-btn-loading-icon) {
    margin-left: 20px
}
.cancel-btn {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
    padding-top: 4px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(0 0 0 / var(--tw-text-opacity)) !important
}
.cancel-btn:hover {
    --tw-border-opacity: 1 !important;
    border-color: rgb(0 0 0 / var(--tw-border-opacity)) !important;
    padding-top: 4px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(0 0 0 / var(--tw-text-opacity)) !important
}
.confirm-btn span,
.cancel-btn span {
    margin-bottom: -4px !important
}
.btn-icons {
    display: flex !important;
    height: 24px !important;
    width: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px;
    border-width: 0px;
    background-color: transparent;
    padding-left: 0px;
    padding-right: 0px;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.btn-icons:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(226 226 226 / var(--tw-bg-opacity)) !important
}
._title-highlighted-text_1klf8_1 {
    font-family: Sarabun, sans-serif;
    font-weight: 700
}

.facebook-template-msg {
    display: flex;
    max-width: 415px;
    align-items: stretch;
    gap: 0.5rem;
    overflow-x: auto;
    text-align: left
}
.facebook-template-msg .item-facebook-template-msg {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.facebook-template-msg .item-facebook-template-msg-facebook {
    width: 260px
}
.facebook-template-msg .item-facebook-template-msg-line {
    width: 320px
}

.facebook-template-msg .header-facebook-template-msg-square,
.facebook-template-msg .header-facebook-template-msg-horizontal {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.25rem
}
.facebook-template-msg .header-facebook-template-msg-square div[data-type='image'],
.facebook-template-msg .header-facebook-template-msg-horizontal div[data-type='image'] {
    width: 100%;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(252 252 252 / var(--tw-bg-opacity));
    padding: 0px
}
.facebook-template-msg .header-facebook-template-msg-square div[data-type='image'] {
    height: 258px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}
.facebook-template-msg .header-facebook-template-msg-horizontal div[data-type='image'] {
    height: 135.08px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}
.facebook-template-msg .header-facebook-template-msg-1-1-cover div[data-type='image'] {
    height: 323px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}
.facebook-template-msg .header-facebook-template-msg-1-1-fit div[data-type='image'] {
    height: 323px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}
.facebook-template-msg .header-facebook-template-msg-1-51-cover div[data-type='image'] {
    height: 209.73px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}
.facebook-template-msg .header-facebook-template-msg-1-51-fit div[data-type='image'] {
    height: 209.73px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.facebook-template-msg .body-facebook-template-msg {
    display: flex;
    width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    padding: 0.75rem
}
.facebook-template-msg .body-facebook-template-msg > div:first-child {
    flex: 1 1 0%
}
.facebook-template-msg .body-facebook-template-msg > div:first-child h3 {
    margin: 0px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1em
}
.facebook-template-msg .body-facebook-template-msg > div:first-child span {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    color: .8m
}
.facebook-template-msg .body-facebook-template-msg > div:last-child {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}
.facebook-template-msg .body-facebook-template-msg .ant-btn {
    width: 100%;
    font-size: 1em;
    box-shadow: none
}
.chat-message {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.chat-message + .chat-message {
  margin-top: 0.25rem;
}

.info-chat-message {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.avatar-chat-message {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  align-items: flex-end;
}

.avatar-chat-message .ant-avatar {
  height: 100%;
  width: 100%;
  border-width: 0px;
}

.time-chat-message {
  font-size: 12px;
  line-height: 20px;
}

.name-chat-message {
  font-size: 12px;
  line-height: 20px;
}

.content-chat-image-container {
  position: relative;
}

.content-chat-image-container .ant-spin {
  position: absolute;
  top: 72px;
  left: 72px;
  z-index: 10;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.content-chat-image-container .ant-image-mask,
.content-chat-image {
  border-radius: 0.5rem;
}

.content-chat-video video {
  border-radius: 0.5rem;
}

.content-chat-image.loading {
  filter: opacity(0.5);
}

.content-chat-message {
  position: relative;
  max-width: 75%;
  white-space: pre-line;
  word-break: break-all;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: left;
  font-family: Sarabun, sans-serif;
}

.content-chat-message.on-agent {
  --tw-bg-opacity: 1;
  background-color: rgb(23 119 237 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.content-chat-message.linkify.on-agent {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.content-chat-message-file {
  padding: 0.25rem;
}

.content-chat-message:has(.anticon[alt~='fileIcon']) {
  display: flex;
  max-width: 200px;
  cursor: not-allowed;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(226 226 226 / var(--tw-text-opacity));
}

.content-chat-message .anticon[alt~='fileIcon'] {
  margin-right: 0.5rem;
  height: 30px;
  width: 30px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.25rem;
}

.content-chat-message:has(.anticon[alt~='pdf']) .anticon {
  --tw-bg-opacity: 1;
  background-color: rgb(240 54 54 / var(--tw-bg-opacity));
}

.content-chat-message:has(.anticon[alt~='doc']) .anticon,
.content-chat-message:has(.anticon[alt~='docx']) .anticon {
  --tw-bg-opacity: 1;
  background-color: rgb(24 144 255 / var(--tw-bg-opacity));
}

.content-chat-message:has(.anticon[alt~='xls']) .anticon,
.content-chat-message:has(.anticon[alt~='xlsx']) .anticon {
  --tw-bg-opacity: 1;
  background-color: rgb(94 164 36 / var(--tw-bg-opacity));
}

.content-chat-message:has(.anticon[alt~='csv']) .anticon {
  --tw-bg-opacity: 1;
  background-color: rgb(244 211 94 / var(--tw-bg-opacity));
}

.content-chat-message:has(.anticon[alt~='disabled']) .anticon {
  --tw-bg-opacity: 1;
  background-color: rgb(226 226 226 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(226 226 226 / var(--tw-text-opacity));
}

.content-chat-message:has(.anticon[alt~='fileIcon']) .anticon svg {
  height: 16px;
  width: 16px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.content-chat-message:has(.anticon[alt~='fileIcon']) .ant-space-item:first-child {
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: break-word;
}

.content-chat-message:hover .hover-time-chat-message,
.content-chat-image-container:hover .hover-time-chat-message {
  display: block !important;
}

.content-chat-message:has(img[alt='sticker']) {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.content-chat-message:has(a[href]) {
  max-width: 70%;
  word-break: break-all;
  text-decoration-line: underline;
}

.content-chat-message:has(a[href]) .on-agent {
  --tw-bg-opacity: 1;
  background-color: rgb(23 119 237 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover-time-chat-message {
  position: absolute !important;
  bottom: 0px !important;
  z-index: 10 !important;
  display: none !important;
  width: -moz-max-content !important;
  width: max-content !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
  border-radius: 0.375rem !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-top: 6px !important;
  padding-bottom: 5px !important;
  font-size: 12px !important;
  line-height: 20px !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  transition-duration: 300ms !important;
}

.hover-time-chat-message.left {
  right: 100% !important;
  transform: translateX(-10%) !important;
}

.hover-time-chat-message.right {
  left: 100% !important;
  transform: translateX(10%) !important;
}

.empty-content-chat {
  margin-left: 0px;
  margin-right: 0px;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.template-chat-area-size.facebook-template-msg > div {
  /* @apply !max-w-[400px] text-[0.8em]; */
}

.template-chat-area-size.line-template-msg .lyItem {
  max-width: 200px !important;
  font-size: 0.8em;
}

.template-chat-area-size.line-template-msg .lyItem .MdBx {
  padding: 0.5rem;
}

.template-chat-area-size.line-template-msg .lyItem .MdBtn {
  height: 30px;
}

.content-chat-ads {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: center;
  font-family: Sarabun, sans-serif;
  font-size: 12px;
  line-height: 20px;
}

.content-chat-ads p {
  margin-bottom: 0px;
  margin-right: 8px;
}

.btn-chat-ads {
  position: relative;
  height: 24px;
  width: 58px;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(23 119 237 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 0px;
  padding-bottom: 2px;
  font-size: 12px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(23 119 237 / var(--tw-text-opacity));
}

.btn-chat-ads::after {
  content: attr(data-tooltip);
  position: absolute;
  transform: translateX(-50%);
  visibility: hidden;
  bottom: 130%;
  left: 50%;
  z-index: 50;
  width: 300px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 12px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  opacity: 0;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.btn-chat-ads:hover::after {
  visibility: visible;
  opacity: 1;
}

.content-ads-timestamp-mb {
  margin-bottom: -10px;
}

.content-ads-mb {
  margin-bottom: 4px;
}

@keyframes bell-shake {
  0% {
    transform: rotate(0);
  }

  10% {
    transform: rotate(-3deg);
  }

  20% {
    transform: rotate(2deg);
  }

  30% {
    transform: rotate(-2deg);
  }

  40% {
    transform: rotate(1.5deg);
  }

  50% {
    transform: rotate(-1.5deg);
  }

  60% {
    transform: rotate(1deg);
  }

  70% {
    transform: rotate(-1deg);
  }

  80% {
    transform: rotate(0.5deg);
  }

  90% {
    transform: rotate(-0.5deg);
  }

  100% {
    transform: rotate(0);
  }
}

.bell-animate {
  animation: bell-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform-origin: top center;
  display: inline-block;
}

.chat-message-activity {
    border-radius: 0.375rem;
    padding: 0.5rem;
    text-align: center;
    font-family: Sarabun, sans-serif;
    font-size: 12px;
    line-height: 20px
}
.chat-message-activity.finished {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    text-align: left
}
.chat-message-activity.finished .anticon svg {
    margin-top: 0.125rem;
    height: 18px;
    width: 18px;
    --tw-text-opacity: 1;
    color: rgb(94 164 36 / var(--tw-text-opacity))
}
.chat-message-activity.finished .ant-space {
    width: 100%
}
.chat-message-activity.finished .ant-space > .ant-space-item:first-child {
    font-weight: 600
}
.chat-message-activity.finished > span {
    flex-shrink: 0
}
.chat-message-activity.finished > span:last-child {
    --tw-text-opacity: 1;
    color: rgb(112 112 112 / var(--tw-text-opacity))
}
.display-name {
    display: block
}
.display-name .avatar-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem
}
.display-name .button-avatar-display .ant-btn {
    display: none;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(241 157 67 / var(--tw-bg-opacity));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.display-name .button-avatar-display .ant-btn:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(241 157 67 / var(--tw-bg-opacity)) !important
}
.display-name .wrapper-avatar-display {
    position: relative
}
.display-name .wrapper-avatar-display > img {
    position: absolute;
    bottom: 1px;
    right: 0px
}
.display-name .name-avatar-display {
    display: flex;
    flex-direction: column
}
.display-name .name-avatar-display span {
    font-size: 12px;
    line-height: 20px;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.table-theme .ant-table-container {
    overflow: hidden;
    border-radius: 0.5rem
}
.table-theme .ant-table-cell {
    min-width: 100px;
    padding: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important
}
.table-theme .ant-table-thead {
    height: 45px
}
.table-theme .ant-table-thead .ant-table-cell {
    font-weight: 400 !important
}

.table-theme td.ant-table-cell:not(:last-child) {
    border-inline-end-width: 0px !important
}
.table-theme .ant-table-header {
    border-radius: 0px !important
}
.table-theme .ant-table-thead tr:last-child th.ant-table-cell:first-child {
    border-radius: 0px
}
.table-theme .ant-table-thead tr:last-child th.ant-table-cell:last-child {
    border-radius: 0px
}
.table-theme .ant-table-tbody tr:last-child td.ant-table-cell:first-child {
    border-end-start-radius: 7px
}
.table-theme .ant-table-tbody tr:last-child td.ant-table-cell:last-child {
    border-end-end-radius: 7px
}

.table-theme .ant-pagination-item-active {
    --tw-border-opacity: 1;
    border-color: rgb(100 106 115 / var(--tw-border-opacity))
}
.table-theme .ant-pagination-item-active a {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.table-theme .ant-pagination-item-active:hover {
    --tw-border-opacity: 1;
    border-color: rgb(100 106 115 / var(--tw-border-opacity))
}
.table-theme .ant-pagination-item-active:hover a {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}/* Style for Confirm and Cancel Button in Modal */
.confirm-btn {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(241 157 67 / var(--tw-bg-opacity)) !important;
    padding-top: 4px !important
}
.confirm-btn:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(218 142 59 / var(--tw-bg-opacity)) !important;
    padding-top: 4px !important
}
.confirm-btn .ant-btn-loading-icon {
    position: absolute;
    left: 16px;
    bottom: 16px
}
.confirm-btn.ant-btn-loading > span:not(.ant-btn-loading-icon) {
    margin-left: 20px
}
.cancel-btn {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
    padding-top: 4px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(0 0 0 / var(--tw-text-opacity)) !important
}
.cancel-btn:hover {
    --tw-border-opacity: 1 !important;
    border-color: rgb(0 0 0 / var(--tw-border-opacity)) !important;
    padding-top: 4px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(0 0 0 / var(--tw-text-opacity)) !important
}
.confirm-btn span,
.cancel-btn span {
    margin-bottom: -4px !important
}
.btn-icons {
    display: flex !important;
    height: 24px !important;
    width: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px;
    border-width: 0px;
    background-color: transparent;
    padding-left: 0px;
    padding-right: 0px;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity));
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.btn-icons:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(226 226 226 / var(--tw-bg-opacity)) !important
}.sc-select-popup {
    max-height: 400px;
    overflow: auto
}
.sc-select-popup.sc-select-popup-block {
    position: relative;
    margin-top: 0.5rem;
    border-radius: 0px;
    padding: 0px;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.sc-select-popup.sc-select-popup-block .ant-select-open .ant-select-selection-item {
    --tw-text-opacity: 1;
    color: rgb(37 37 37 / var(--tw-text-opacity))
}

.sc-select-popup.sc-select-popup-block > div > div {
    padding: 0px
}
.content-tag-manage-modal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}
.custom-date-range-picker {
    width: 100% !important
}
.date-range-container {
    display: flex;
    width: 100% !important;
    min-width: 275px;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    transition-property: all;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.date-range-container.date-range-container-status-error {
    --tw-border-opacity: 1;
    border-color: rgb(240 54 54 / var(--tw-border-opacity))
}
.date-range-container.date-range-container-status-error:hover {
    --tw-border-opacity: 1;
    border-color: rgb(240 54 54 / var(--tw-border-opacity))
}
.date-range-container-disabled {
    cursor: not-allowed;
    background-color: rgb(37 37 37 / .04);
    color: rgb(37 37 37 / .25)
}
.date-range-container-disabled:hover {
    --tw-border-opacity: 1 !important;
    border-color: rgb(226 226 226 / var(--tw-border-opacity)) !important
}
.date-range-container:hover {
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(37 37 37 / var(--tw-border-opacity))
}
.date-range-placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
/* .custom-date-range-picker {
  @apply !w-full;
}
.date-range-container {
  @apply flex justify-between items-center border border-solid border-[#d9d9d9] rounded-[6px] !w-full transition-all duration-200 ease-in-out cursor-pointer;
}
.date-range-container:hover {
  @apply border border-solid border-[#252525];
}
.hidden-range-picker {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
} */
.modal-file-manager {
    top: 30px;
    padding: 0px
}
.modal-file-manager .ant-modal-content {
    padding: 0px
}
.modal-file-manager .ant-modal-header {
    border-width: 0px;
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-top: 28px;
    padding-bottom: 28px;
    padding-left: 2px;
    padding-right: 2px
}
.content-file-manager {
    margin-top: -6px !important;
    display: flex;
    height: calc(100vh - 200px);
    padding-left: 0px !important;
    padding-right: 0px !important
}
.action-file-manager {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding: 1rem
}
.folder-file-manager {
    width: 25%;
    padding: 1rem
}
.select-file-manager {
    width: 50%;
    padding: 1rem
}
.view-file-manager {
    display: flex;
    width: 25%;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem
}
.folder-file-manager, .select-file-manager {
    border-width: 0px;
    border-right-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity))
}
.title-folder-file-manager {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600
}
.storage-folder-file-manager {
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem
}
.indicator-folder-file-manager {
    display: flex;
    align-items: center;
    justify-content: space-between
}
.storage-folder-file-manager .ant-progress-inner {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 237 / var(--tw-bg-opacity))
}
.action-folder-file-manager {
    display: flex;
    align-items: center;
    justify-content: space-between
}
.action-folder-file-manager .ant-btn {
    align-items: center;
    gap: 0.25rem;
    padding-left: 0px;
    padding-right: 0px;
    filter: invert(68%) sepia(72%) saturate(518%) hue-rotate(348deg) brightness(97%) contrast(98%)
}
.list-folder-file-manager {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity))
}
.item-folder-file-manager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    border-width: 0px;
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}
.item-folder-file-manager:last-child {
    border-bottom-width: 0px
}
.item-folder-file-manager .ant-btn {
    width: -moz-fit-content;
    width: fit-content;
    padding: 0px
}
/* Select File Manager */
.title-select-file-manager {
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}
.title-select-file-manager > span {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600
}
.title-select-file-manager .ant-btn {
    align-items: center;
    gap: 0.25rem;
    border-radius: 4px;
    padding-left: 0.25rem;
    padding-right: 0.5rem
}
.title-select-file-manager .ant-btn-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(15%) hue-rotate(208deg) brightness(104%) contrast(100%)
}
.filter-select-file-manager {
    display: flex;
    align-items: center;
    justify-content: space-between
}
.total-select-file-manager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
.list-select-file-manager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem
}
.item-select-file-manager {
    position: relative;
    display: flex;
    width: 5rem;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    border-radius: 0.375rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem
}
.item-select-file-manager:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
}
.item-select-file-manager img {
    height: 5rem;
    width: 5rem;
    border-radius: 0.375rem;
    -o-object-fit: cover;
       object-fit: cover
}
.item-select-file-manager .ant-radio-wrapper,
.item-select-file-manager .ant-checkbox-wrapper {
    position: absolute;
    top: 0.125rem;
    left: 0.25rem;
    width: 100%
}
.item-select-file-manager .ant-checkbox-inner {
    background-color: transparent
}
.item-select-file-manager .ant-checkbox-checked .ant-checkbox-inner {
    --tw-bg-opacity: 1;
    background-color: rgb(241 157 67 / var(--tw-bg-opacity))
}
.view-file-manager .ant-divider-horizontal {
    margin-top: 0px !important;
    margin-bottom: 0px !important
}
.item-view-file-manager {
    display: flex;
    align-items: center;
    justify-content: center
}
.item-view-file-manager img {
    height: 9rem;
    width: 9rem;
    border-radius: 0.375rem;
    -o-object-fit: cover;
       object-fit: cover
}
.desc-view-file-manager {
    display: flex;
    flex-direction: column
}
.desc-view-file-manager > div {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600
}
.desc-view-file-manager > span {
    font-size: 12px;
    line-height: 20px
}

.files {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: space-between;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.hr-style {
    margin-top: 0.5rem;
    height: 1px;
    width: 100%;
    border-width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(226 226 226 / var(--tw-bg-opacity))
}
.menu-files {
  display: flex;
  width: 250px;
  flex-shrink: 0;
  flex-direction: column;
  border-width: 0px;
  border-right-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.header-menu-files {
  margin-top: 0.25rem;
  display: flex;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
}
.header-menu-files h3 {
  text-align: left;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.add-folder-menu-files h3 {
  font-size: 14px;
  line-height: 22px;
}

.list-menu div::-webkit-scrollbar {
  width: 6px;
}
.list-menu div::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
}
.list-menu div::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.list-menu div::-webkit-scrollbar-track {
  background-color: transparent;
}
.list-menu {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.storage-files {
  border-width: 0px;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
}
.menu-storage-files {
  margin-top: 0.25rem;
  margin-bottom: -0.25rem;
  display: flex;
  justify-content: space-between;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.5rem;
}
.menu-storage-files p {
  margin-bottom: 0px;
  font-size: 14px;
}
.progress-storage-files {
  margin-bottom: 0.75rem;
  display: flex;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.menu-storage-files span .ant-skeleton-button {
  width: 72px !important;
  height: 16px !important;
  margin-top: 2px !important;
}
.progress-storage-files .ant-skeleton-button {
  height: 8px !important;
  margin-top: 7px !important;
}/* Style of Button All Files */
.menu-files-all-files-item,
.menu-files-all-files-item-selected {
  margin-bottom: 0.25rem !important;
  border-width: 0px !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.menu-files-all-files-item {
  margin-top: 0.5rem;
  display: flex;
  height: 2.5rem;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  border-radius: 6px;
  padding: 0.5rem;
}
.menu-files-all-files-item-icon {
  margin-left: -0.75rem;
  gap: 0.5rem;
  opacity: 0.25;
}
.menu-files-all-files-item h3 {
  margin: 0px;
  font-size: 14px;
  line-height: 22px;
}
.menu-files-all-files-item-selected {
  margin-top: 0.5rem;
  display: flex;
  height: 2.5rem;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
  padding: 0.5rem;
}
.menu-files-all-files-item-selected h3 {
  margin: 0px;
  font-size: 14px;
  line-height: 22px;
}
.sortable-container {
  overflow-x: hidden;
}

.sortable-container .ant-skeleton-button {
  height: 40px !important;
  margin-bottom: 5px !important;
}
/* Style <hr /> in Modal Delete Folder */
.hr-style {
    margin-top: 0.5rem;
    height: 1px;
    width: 100%;
    border-width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(226 226 226 / var(--tw-bg-opacity))
}

/* Style Title in Modal Delete Folder */
.title-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem
}
.title-svg {
    font-size: 20px;
    --tw-text-opacity: 1;
    color: rgb(240 54 54 / var(--tw-text-opacity))
}

/* Style Content in Modal Delete Folder */
.size-text h3 {
    margin-top: 0.75rem;
    font-size: 14px
}
/* Style of Button Folder */
.menu-files-item,
.menu-files-item-selected {
  margin-bottom: 0.25rem !important;
  border-width: 0px !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.menu-files-item {
  display: flex;
  height: 2.5rem;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 6px;
  padding: 0.5rem;
}
.menu-files-item:hover .menu-files-item-object-action {
  display: flex;
}
.menu-files-item h3 {
  margin: 0px;
  font-family: Sarabun, sans-serif;
  font-size: 14px;
  line-height: 22px;
}
.menu-files-item-selected {
  display: flex;
  height: 2.5rem;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
  padding: 0.5rem;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.menu-files-item-selected .menu-files-item-object-action {
  display: flex;
}
.menu-files-item-selected h3 {
  margin: 0px;
  font-family: Sarabun, sans-serif;
  font-size: 14px;
  line-height: 22px;
}
.menu-files-item-object {
  margin-left: -0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.menu-files-item .menu-files-item-object h3 {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.menu-files-item:hover .menu-files-item-object h3,
.menu-files-item-selected .menu-files-item-object h3 {
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

/* Style of Action Button Folder */
.menu-files-item-object-action {
  margin-right: -0.75rem;
  display: flex;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.25rem !important;
}
.menu-files-item-object-action-hidden {
  display: none;
}

.drag-move {
  opacity: 0.5;
}
.drag-container {
  overflow: hidden;
}

.menu-files-item-icon {
  gap: 0.5rem;
  opacity: 1;
}
.menu-files-item-icon-all-file {
  gap: 0.5rem;
  opacity: 0.25;
}
.menu-files-item-icon {
  cursor: grab;
}
.menu-files-item-icon:active {
  cursor: grabbing;
}

.menu-files-item-icon-all-file {
  cursor: not-allowed;
}
/* Style in ItemCreateFolder */
.add-folder-menu-files {
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.add-folder-menu-files h3 {
  margin: 0px;
  font-weight: 600;
}
.add-folder-menu-files #addfolder {
  margin-right: -0.25rem;
}

/* Style in InputCreateFolder */
.input-create-folder-text .ant-input {
  font-family: 'Sarabun' !important;
}
.input-create-folder {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.input-create-folder:focus {
  border-color: transparent;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.input-create-folder:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(226 226 226 / var(--tw-border-opacity)) !important;
}
.input-create-folder:focus {
  --tw-border-opacity: 1 !important;
  border-color: rgb(0 0 0 / var(--tw-border-opacity)) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.input-create-folder:focus:focus {
  border-color: transparent;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.input-full {
  margin-bottom: -0.25rem;
  display: flex !important;
  width: 100% !important;
  flex-direction: column !important;
  align-items: center !important;
}
.show-file-grid-area-in-modal {
  margin-bottom: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.show-file-grid-area-in-fullpage {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.show-file-grid-area .ant-skeleton-button {
  height: 159.67px !important;
}

@media screen and (max-width: 1780px) {
  .show-file-grid-area-in-fullpage {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media screen and (max-width: 1620px) {
  .show-file-grid-area-in-fullpage {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

@media screen and (max-width: 1500px) {
  .show-file-grid-area-in-fullpage {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media screen and (max-width: 1380px) {
  .show-file-grid-area-in-fullpage {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media screen and (max-width: 1240px) {
  .show-file-grid-area-in-fullpage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media screen and (max-width: 1024px) {
  .show-file-grid-area-in-fullpage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.show-file-grid-area {
  margin-top: 8px;
  display: grid;
  place-items: center;
  gap: 1rem;
  padding-left: 10px;
  padding-right: 10px;
}

.show-files-container {
  min-width: 490px;
  flex: 1 1 0%;
  flex-direction: column;
  border-width: 0px;
  border-right-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  padding: 0px;
  padding-bottom: 140px;
}

.upload-file-container,
.search-and-filter-container {
  margin-left: 8px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
}
.upload-file-container,
.search-and-filter-container h3 {
  margin-bottom: 0px;
  font-weight: 700;
}

.selected-container,
.selected-container-message {
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: space-between;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.selected-container h4 {
  margin-bottom: 0px;
  margin-top: 2px;
}
.selected-flex,
.selected-flex-message {
  display: flex;
  align-items: center;
}
.selected-flex p,
.selected-flex .ant-btn,
.selected-flex .btn-select-action,
.selected-flex .btn-select-all-file {
  display: none;
}
.total-files {
  margin-top: 0px;
}
.text-selected-files-message {
  margin-top: 14px;
}
.checkbox-border {
  display: flex;
  height: 32px !important;
  align-items: center;
}
.checkbox-border .ant-checkbox-inner {
  border-width: 2px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(100 106 115 / var(--tw-border-opacity)) !important;
}
.checkbox-border .ant-checkbox-checked .ant-checkbox-inner {
  border-width: 2px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(241 157 67 / var(--tw-border-opacity)) !important;
}
.checkbox-border .ant-checkbox-checked:hover .ant-checkbox-inner {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(241 157 67 / var(--tw-bg-opacity)) !important;
}
.selected-container.checked,
.selected-container-message {
  border-radius: 6px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
}
.selected-container.checked h4 {
  margin-top: 2px;
  font-weight: 700;
}
.selected-container.checked .selected-flex p {
  margin-bottom: 0px;
  margin-top: 2px;
  display: flex;
  align-items: center;
}
.selected-container.checked .selected-flex .ant-btn {
  display: flex;
  align-items: center;
}
.selected-container.checked .selected-flex .btn-select-action {
  margin-left: 16px !important;
  display: flex;
  align-items: center;
  gap: 8px !important;
}
.selected-container-message .selected-flex-message .btn-select-action-message {
  margin-left: 12px !important;
  display: flex;
  align-items: center;
  gap: 8px !important;
}
.selected-container.checked .selected-flex .btn-select-all-file {
  margin-left: 16px !important;
  display: flex;
  align-items: center;
}
.btn-select-all {
  height: 26px;
  width: 93px;
}
.text-selected-files {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.filter-btn,
.sort-btn {
  margin-left: 16px !important;
  display: flex;
  align-items: center;
  gap: 8px !important;
}

.show-file-scroll-area {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.show-file-scroll-area div::-webkit-scrollbar {
  width: 6px;
}
.show-file-scroll-area div::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
}
.show-file-scroll-area div::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.show-file-scroll-area div::-webkit-scrollbar-track {
  background-color: transparent;
}

.hidden-btn-style {
  border-width: 0px;
  background-color: transparent;
}

.no-data-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.files-style-in-modal,
.files-style-in-fullpage {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity)) !important
}
.files-thumbnail-size-in-modal,
.files-thumbnail-size-in-fullpage {
    display: flex;
    flex-direction: column;
    align-content: center;
    border-radius: 3px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    -o-object-fit: contain !important;
       object-fit: contain !important
}

.files-style-in-modal:hover,
.files-style-selected-in-modal {
    border-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(241 157 67 / var(--tw-border-opacity)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 251 237 / var(--tw-bg-opacity)) !important
}
.files-style-in-modal,
.files-style-selected-in-modal {
    display: flex;
    height: 159.67px;
    width: 129.67px;
    flex-direction: column;
    border-radius: 6px !important;
    padding: 8px !important
}
.files-style-name-in-modal p {
    margin-top: -4px !important;
    margin-bottom: 2px !important;
    width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Sarabun, sans-serif !important;
    font-size: 14px !important;
    line-height: 22px !important
}
.files-thumbnail-size-in-modal {
    height: 113.67px !important;
    width: 110.67px !important
}

.files-style-in-fullpage:hover,
.files-style-selected-in-fullpage {
    border-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(241 157 67 / var(--tw-border-opacity)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 251 237 / var(--tw-bg-opacity)) !important
}
.files-style-in-fullpage,
.files-style-selected-in-fullpage {
    display: flex;
    height: 159.67px;
    width: 100%;
    flex-direction: column;
    border-radius: 6px !important;
    padding: 8px !important
}
.files-style-name-in-fullpage p {
    margin-top: -4px !important;
    margin-bottom: 2px !important;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Sarabun, sans-serif !important;
    font-size: 14px !important;
    line-height: 22px !important
}
.files-thumbnail-size-in-fullpage {
    height: 113.67px !important;
    width: 100% !important
}
.padding-img {
    height: 113.67px !important;
    width: 100% !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important
}
.header-title-name,
.result-value-name {

  display: flex;

  flex-direction: row;

  align-items: center
}

@media screen and (max-width: 1920px) {
  .header-title-name-in-modal {

    width: 1700px !important
  }
  .header-title-name-in-fullpage {

    width: 3000px !important
  }
  .name-truncate-in-modal {

    width: 1700px !important
  }
  .name-truncate-in-fullpage {

    width: 3000px !important
  }
}

@media screen and (max-width: 1536px) {
  .header-title-name-in-modal {

    width: 1900px !important
  }
  .header-title-name-in-fullpage {

    width: 2100px !important
  }
  .name-truncate-in-modal {

    width: 1900px !important
  }
  .name-truncate-in-fullpage {

    width: 2100px !important
  }
}

.list-container {

  padding: 0.25rem;

  padding-left: 0.5rem;

  padding-right: 0.5rem
}
.list-header {

  display: flex;

  border-width: 0px;

  border-bottom-width: 1px;

  border-style: solid;

  --tw-border-opacity: 1;

  border-color: rgb(226 226 226 / var(--tw-border-opacity));

  padding-top: 0.5rem;

  padding-bottom: 0.5rem
}
li.ant-list-item.list-item {

  border-width: 1px;

  --tw-border-opacity: 1;

  border-color: rgb(226 226 226 / var(--tw-border-opacity));

  padding-top: 0px;

  padding-bottom: 0px
}
.list-btn,
.list-btn-selected {

  height: 100%;

  width: 100%;

  border-radius: 0px;

  border-width: 0px;

  padding-left: 0.25rem !important;

  padding-right: 0.25rem !important;

  padding-top: 0.5rem !important;

  padding-bottom: 0.5rem !important;

  --tw-shadow: 0 0 #0000;

  --tw-shadow-colored: 0 0 #0000;

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.list-btn p,
.list-btn-selected p {

  font-size: 14px;

  line-height: 22px
}
.list-btn:hover,
.list-btn-selected {

  --tw-bg-opacity: 1 !important;

  background-color: rgb(245 245 245 / var(--tw-bg-opacity)) !important
}
.header-title-type,
.header-title-size,
.header-title-date,
.result-value-type,
.result-value-size,
.result-value-date {

  display: flex;

  width: 100%;

  flex-direction: row;

  align-items: center
}
.header-title-name,
.header-title-type,
.header-title-size,
.header-title-date {

  margin-left: 0.25rem
}
.header-title-name p,
.header-title-type p,
.header-title-size p,
.header-title-date p,
.result-value-name p,
.result-value-type p,
.result-value-size p,
.result-value-date p {

  margin-bottom: 0px
}
.result-value-name p {

  margin-left: 1rem;

  display: flex;

  flex-direction: row;

  align-items: center;

  font-family: Sarabun, sans-serif !important
}
.thumbnail-size-list-view {

  height: 52px !important;

  border-radius: 0px;

  --tw-bg-opacity: 1;

  background-color: rgb(255 255 255 / var(--tw-bg-opacity));

  -o-object-fit: contain !important;

     object-fit: contain !important
}
.upload-file-container-text {
    margin-bottom: 0px;
    font-family: Sarabun, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700
}
.upload-file-btn-svg {
    margin-bottom: 0.25rem;
    font-size: 18px
}
.ant-upload.ant-upload-drag {
  border-style: none;
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.drag-drop-file {
  position: relative;
  height: 206px !important;
  border-radius: 0.5rem;
  border-width: 2px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.25rem;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.drag-drop-file-svg {
  font-size: 50px;
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity));
}
.drag-drop-file-font-size {
  font-size: 14px;
  line-height: 22px;
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity));
}
.drag-drop-file-font-size p {
  margin-bottom: 0px;
}
.preview-files {
  position: absolute;
  inset: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 20px;
}
.preview-grid-files {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

/* btn-style */
.files-upload-object {
  position: relative;
  height: 159.67px;
  width: 100%;
  cursor: default;
  border-radius: 6px !important;
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
  padding: 8px !important;
}
.files-upload-object p {
  margin-top: 8px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-family: Sarabun, sans-serif !important;
  font-size: 14px !important;
  line-height: 22px !important;
}
.btn-remove-files-upload {
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  z-index: 10;
  display: flex;
  height: 18px;
  width: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(37 37 37 / var(--tw-bg-opacity));
  opacity: 0.85;
}
.icon-white {
  font-size: 13px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.thumbnail-style {
  height: 109.76px !important;
  width: 109.76px !important;
  border-radius: 6px !important;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  -o-object-fit: contain !important;
     object-fit: contain !important;
  -o-object-position: center !important;
     object-position: center !important;
}

.show-total-files {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.show-total-files p {
  margin-bottom: 0px;
  margin-top: 5px;
}
.files-upload-first {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.files-upload-placeholder {
  display: flex;
  height: 159.67px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border-width: 2px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  font-size: 24px;
  line-height: 32px;
  --tw-text-opacity: 1;
  color: rgb(226 226 226 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.files-upload-placeholder:hover {
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(241 157 67 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(241 157 67 / var(--tw-text-opacity));
}
.text-alert-upload-files {
  --tw-text-opacity: 1;
  color: rgb(240 54 54 / var(--tw-text-opacity));
}
.text-files-size {
  font-size: 14px;
  line-height: 22px;
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity));
  font-weight: 400;
}
.uploadfile-modal .ant-modal-close {
  top: 20px !important;
  right: 20px !important;
}

.attach-file-loading {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Style in Input */
.input-search {
  width: 289px;
}
.input-search:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(226 226 226 / var(--tw-border-opacity)) !important;
}
.input-search:focus {
  --tw-border-opacity: 1 !important;
  border-color: rgb(0 0 0 / var(--tw-border-opacity)) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.input-search:focus:focus {
  border-color: transparent;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.input-search input::-moz-placeholder {
  color: #646a73 !important;
}
.input-search input::placeholder {
  color: #646a73 !important;
}
.ant-input,
.ant-input-prefix,
.ant-input-suffix {
  font-family: 'Sarabun', sans-serif !important;
}
.custom-search-icon {
  color: #646a73 !important;
  font-size: 16px;
}
.description-files-space {
  display: flex;
  height: 100%;
  width: 230px;
  flex-shrink: 0;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  border-width: 0px;
  border-right-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
}

.description-files-space div::-webkit-scrollbar {
  width: 6px;
}
.description-files-space div::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
}
.description-files-space div::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.description-files-space div::-webkit-scrollbar-track {
  background-color: transparent;
}

.thumbnail-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 8px;
  padding-right: 8px;
}

.thumbnail-size-description {
  height: 200px !important;
  width: 200px !important;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  -o-object-fit: contain;
     object-fit: contain;
}

/* Style <hr /> in Description Files */
.hr-description {
  margin-top: 0.5rem;
  height: 1px;
  width: 96%;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(226 226 226 / var(--tw-bg-opacity));
}

.description-area {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 4px;
  padding-right: 4px;
}
.description-area h3 {
  margin-bottom: -4px;
  display: flex;
  justify-content: flex-start;
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-size: 14px !important;
  line-height: 22px !important;
  font-weight: 700;
}
.description-object-h {
  height: 100% !important;
}
.description-object-h .ant-col .ant-row {
  margin: 0px;
}.input {

    text-align: left;

    font-family: Sarabun, sans-serif !important;

    font-size: 14px !important;

    line-height: 22px !important
}

.input-label {

    margin-bottom: 2px;

    font-size: 14px !important;

    line-height: 22px !important;

    font-weight: 400;

    --tw-text-opacity: 1;

    color: rgb(100 106 115 / var(--tw-text-opacity))
}

.input-text {

    width: 100%;

    border-radius: 0px;

    border-width: 0px;

    border-bottom-width: 1px;

    border-style: solid;

    border-color: transparent;

    padding: 0px;

    font-size: 14px !important;

    line-height: 22px !important;

    font-weight: 400
}

.input-text:has(.ant-input:focus) {

    --tw-border-opacity: 1;

    border-color: rgb(226 226 226 / var(--tw-border-opacity))
}

.input-text:hover {

    --tw-border-opacity: 1;

    border-color: rgb(226 226 226 / var(--tw-border-opacity))
}
.input-text .ant-input {

    font-size: 14px !important;

    line-height: 22px !important;

    font-weight: 700
}
.input-text .ant-input-suffix {

    display: none;

    font-size: 14px !important;

    line-height: 22px !important
}
.input-text:hover .ant-input-suffix {

    display: block;

    font-size: 14px !important;

    line-height: 22px !important
}

.text-display {

    margin-left: 2px;

    min-height: 2rem !important;

    width: 100%;

    border-radius: 0px;

    border-width: 0px;

    border-bottom-width: 1px;

    border-style: solid;

    border-color: transparent;

    font-family: Sarabun, sans-serif !important;

    font-size: 14px;

    line-height: 22px;

    font-weight: 700
}

.text-link {

    margin-left: 2px;

    width: 100%;

    border-radius: 0px;

    border-width: 0px;

    border-bottom-width: 1px;

    border-style: solid;

    border-color: transparent;

    font-family: Sarabun, sans-serif !important;

    font-size: 14px;

    line-height: 22px;

    font-weight: 700;

    --tw-text-opacity: 1;

    color: rgb(241 157 67 / var(--tw-text-opacity));

    text-decoration-line: underline
}
.text-link-tooltip {

    display: block;

    width: 180px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap
}
.text-link-tooltip-container {

    max-width: 250px !important
}

/* Style of Button Folder */
.input-btn-text {

    display: flex;

    width: 100%;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    border-radius: 6px;

    padding: 0px !important
}
.input-btn-text:hover {

    border-width: 1px;

    --tw-border-opacity: 1;

    border-color: rgb(226 226 226 / var(--tw-border-opacity));

    --tw-bg-opacity: 1 !important;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important
}
.input-btn-text:hover .input-btn-text-action {

    display: flex
}
.input-btn-text p {

    margin-bottom: 0.25rem;

    margin-top: 0.25rem !important;

    padding: 0px !important;

    font-family: Sarabun, sans-serif !important;

    font-size: 14px;

    line-height: 22px;

    font-weight: 700
}
.input-btn-text-label {

    display: flex;

    height: auto;

    width: 100%;

    align-items: baseline;

    justify-content: space-between;

    gap: 16px;

    border-radius: 6px;

    border-width: 1px;

    border-style: solid;

    border-color: transparent;

    padding-left: 0px !important;

    padding-right: 0px !important;

    padding-top: 0.25rem !important;

    padding-bottom: 0.25rem !important
}
.input-btn-text-label:hover {

    --tw-border-opacity: 1;

    border-color: rgb(226 226 226 / var(--tw-border-opacity))
}

/* Style of Action Button Folder */
.input-btn-text-action {

    margin-right: 4px;

    display: flex;

    display: none;

    align-items: center;

    justify-content: center;

    gap: 0.5rem
}

.input-label,
.text-display,
.text-link,
.input-btn-text p {

    padding-left: 7px !important;

    padding-right: 7px !important
}
.editable-text-display {
    display: flex;
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 1.125rem;
    line-height: 1.75rem
}
.editable-text-display:hover {
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity))
}
.editable-text-display p {
    margin: 0px;
    min-height: 24px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-line;
    font-family: Sarabun, sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600
}
.editable-text-display p.ellipsis {
    white-space: nowrap
}
.editable-text-display span {
    display: none;
    flex-shrink: 0;
    gap: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.editable-text-display:hover span {
    display: flex;
    height: -moz-fit-content;
    height: fit-content;
    align-items: center
}
.editable-text-label {
    margin-left: 9px
}
.editable-text-edit div:has(> textarea),
.editable-text-edit div:has(> input) {
    display: flex;
    width: 100%;
    align-items: flex-start;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity))
}
.editable-text-edit div:has(> textarea.ant-input-status-error),
.editable-text-edit div:has(> input.ant-input-status-error) {
    --tw-border-opacity: 1;
    border-color: rgb(255 0 0 / var(--tw-border-opacity))
}
.editable-text-edit textarea,
.editable-text-edit input {
    border-style: none;
    padding-left: 0.5rem;
    line-height: 22px
}
.editable-text-edit-action {
    display: flex;
    gap: 0.5rem;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 0.5rem
}
.editable-text-edit-action button:last-child {
    --tw-text-opacity: 1;
    color: rgb(94 164 36 / var(--tw-text-opacity))
}
.editable-text-edit-action button:last-child:hover {
    --tw-text-opacity: 1 !important;
    color: rgb(94 164 36 / var(--tw-text-opacity)) !important
}
.content-info-messages {
    display: flex;
    height: 100%;
    flex-direction: column;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
}
.message-info-messages,
.reply-info-messages {
    display: flex;
    flex-direction: column
}
.message-info-messages {
    height: 100%
}
.reply-info-messages {
    height: 16.666667%;
    border-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity))
}

.header-message-info-messages-card {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.header-message-info-messages-card-divider {
    margin-left: 1rem;
    margin-right: 1rem
}
.header-message-info-messages,
.header-reply-info-messages {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0px
}
.header-message-info-messages .ant-btn,
.header-reply-info-messages .ant-btn {
    padding-left: 0.25rem;
    padding-right: 0.25rem
}
.header-message-info-messages-card > span > span,
.header-message-info-messages > span > span,
.header-reply-info-messages > span > span {
    font-weight: 700
}

.list-message-info-messages {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    padding: 0.5rem
}
.button-dropdown-menu {
    justify-content: space-between
}
.card-dropdown-menu {
    border-style: none;
    box-shadow: none
}
.card-dropdown-menu .ant-card-body {
    padding: 0px
}
.card-dropdown-menu .ant-dropdown-menu {
    padding: 0px !important;
    box-shadow: none !important
}
.checkbox-dropdown-menu {
    width: 100%;
    flex-direction: column;
    gap: 0.25rem
}
.checkbox-dropdown-menu .ant-checkbox-group-item {
    border-radius: 0.375rem;
    padding-left: 0.25rem
}
.checkbox-dropdown-menu .ant-checkbox-group-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
.container-message-template-modal {
    width: 100%
}
.container-message-template-modal .content-message-template-modal {
    overflow-y: auto
}
.container-message-template-modal .ant-modal-title {
    margin: 0px;
    border-width: 0px;
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-bottom: 0.5rem;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700
}
.content-message-template-modal {
    display: flex;
    height: 80vh;
    flex-direction: column;
    padding-bottom: 1rem
}
.footer-message-template-modal {
    display: flex;
    gap: 0.5rem;
    border-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-top: 0.75rem
}
.inner-message-template-modal {
    display: flex;
    height: 100%;
    gap: 0.5rem;
    overflow-y: auto
}
.inner-message-template-modal > div {
    width: 50%
}
.title-message-template-modal {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700
}
.input-message-template-modal {
    overflow-y: auto
}
.example-message-template-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
}
.header-example-message-template-modal {
    --tw-bg-opacity: 1;
    background-color: rgb(100 106 115 / var(--tw-bg-opacity));
    padding: 0.75rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.header-example-message-template-modal .ant-space {
    display: flex;
    justify-content: space-between
}
.body-example-message-template-modal {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 0.75rem
}
.body-example-message-template-modal > span {
    margin-right: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
.body-example-message-template-modal > div {
    width: 83.333333%
}
.condition-message-template-modal {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.condition-message-template-modal h2 {
    font-weight: 700
}
.text-input-message-template-modal div:has(> span > textarea) {
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    font-family: Sarabun, sans-serif
}
.text-input-message-template-modal .ant-input-textarea-show-count .ant-input-data-count {
    bottom: -32px;
    right: 10px
}
.text-input-message-template-modal span:has(textarea),
.text-input-message-template-modal textarea {
    border-radius: 0px;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-style: none;
    font-family: Sarabun, sans-serif
}
.ant-space.extra-input-message-template-modal {
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
    padding: 0px;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.text-input-message-template-modal .ant-space {
    display: flex;
    width: 100%;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
    padding: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.text-input-message-template-modal > .ant-space .ant-space .ant-space-item {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
.text-example-message-template-modal {
    display: inline-block;
    max-width: 100%;
    white-space: pre-line;
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 0.5rem
}
.file-input-message-template-modal > div:first-child {
  border-radius: 0.375rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  padding: 0.75rem
}
.file-input-message-template-modal .ant-btn {
  display: flex;
  height: 150px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  padding: 0.75rem;
  font-family: Sarabun, sans-serif
}
.file-input-message-template-modal h2 {
  margin: 0px;
  margin-top: 0.75rem
}
.file-example-message-template-modal {
  /* @apply bg-white rounded-md p-2 inline-block max-w-full whitespace-pre-line; */
}
.video-input-message-template-modal > div:first-child {
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding: 0.75rem
}
.video-input-message-template-modal .ant-btn {
    display: flex;
    height: 150px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding: 0.75rem;
    font-family: Sarabun, sans-serif
}
.video-input-message-template-modal h2 {
    margin: 0px;
    margin-top: 0.75rem
}
.video-input-message-template-modal p {
    margin: 0px
}
.fake-video-example-message-template-modal {
    display: flex;
    height: 8rem;
    width: 14rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity));
    font-weight: 700
}
.image-input-message-template-modal .ant-image img,
.image-input-message-template-modal .ant-image .ant-image-mask {
  border-radius: 0.375rem;
  -o-object-fit: contain;
     object-fit: contain
}
.image-input-message-template-modal .inner-choose-file-input-image.has-error .ant-image,
.image-input-message-template-modal .inner-choose-file-input-image.has-error .ant-image img {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(240 54 54 / var(--tw-border-opacity))
}

.image-input-message-template-modal .inner-choose-file-input-image.has-error button {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(240 54 54 / var(--tw-border-opacity))
}

.image-input-message-template-modal .error-border {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(240 54 54 / var(--tw-border-opacity))
}
.alert-message-container {
  display: flex;
  width: 100%;
  align-items: center;
  align-self: flex-start
}
.alert-message {
  text-align: start;
  font-family: Sarabun, sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: red
}
.image-input-message-template-modal .source-input-image {
  display: flex;
  gap: 0.75rem
}
.image-input-message-template-modal .condition-input-image p {
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity))
}
.image-input-message-template-modal .condition-input-image p:first-child {
  font-weight: 700
}
.image-input-message-template-modal .condition-input-image > * {
  margin: 0px
}
.image-input-message-template-modal .input-content-input-image > div {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem
}
.image-input-message-template-modal .input-content-input-image .choose-file-input-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem
}
.image-input-message-template-modal .input-content-input-image .choose-file-input-image .inner-choose-file-input-image {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem
}
.image-input-message-template-modal .input-content-input-image .choose-file-input-image div:has(> div > input) {
  display: none
}
.image-input-message-template-modal .input-content-input-image .preview-choose-file-input-image {
  display: flex;
  height: 100px;
  width: 100px;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity))
}
.image-input-message-template-modal .input-content-input-image .choose-api-input-image {
  display: flex;
  flex-direction: column
}
.image-input-message-template-modal .input-content-input-image .choose-api-noti-input-image {
  display: flex;
  flex-direction: column
}

.image-example-message-template-modal .ant-image img,
.image-example-message-template-modal .ant-image .ant-image-mask {
  border-radius: 0.375rem;
  -o-object-fit: contain;
     object-fit: contain
}
.json-input-message-template-modal {
    display: flex;
    height: 100%;
    flex-direction: column;
    font-family: Sarabun, sans-serif
}
.json-input-message-template-modal > .ant-row,
.json-input-message-template-modal > .ant-row .ant-col > div > div:last-child {
    height: 100%
}
.json-input-message-template-modal > .ant-row .ant-col {
    display: flex;
    flex-direction: column
}
.json-input-message-template-modal > .ant-row .ant-col > div {
    display: flex;
    height: 100%;
    flex-direction: column;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    font-family: Sarabun, sans-serif
}
.json-input-message-template-modal input {
    font-family: Sarabun, sans-serif
}
.json-input-message-template-modal textarea {
    height: 100%;
    resize: none;
    border-radius: 0.375rem;
    border-style: none
}
.json-input-message-template-modal > .ant-space {
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
    padding: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.json-input-message-template-modal > .ant-space .ant-space .ant-space-item {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
.line-template-msg * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid transparent;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  list-style: none;
  text-align: start;
}

.line-template-msg *::after,
.line-template-msg *::before {
  box-sizing: inherit;
}

.line-template-msg body,
.line-template-msg html {
  background-color: transparent;
}

.line-template-msg body {
  line-height: 1.4;
  color: #444;
  font-family: -apple-system, 'BlinkMacSystemFont', Helvetica, Roboto, Sans-Serif;
  font-size: 16px;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-text-size-adjust: none;
}
.line-template-msg .LyMe {
  width: 100%;
  max-width: 300px;
  min-width: 0;
}
.line-template-msg a {
  -webkit-touch-callout: none;
}

.line-template-msg a:active,
.line-template-msg a:focus,
.line-template-msg a:hover,
.line-template-msg a:link,
.line-template-msg a:visited {
  text-decoration: none;
}

.line-template-msg b,
.line-template-msg em,
.line-template-msg strong {
  font-weight: bold;
}

.line-template-msg .LySlider {
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.line-template-msg .LySlider::-webkit-scrollbar {
  display: none;
}

.line-template-msg .LySlider .lyInner {
  display: flex;
  width: 100%;
}

.line-template-msg .LySlider .lyInner::after {
  flex: none;
  content: '';
  display: block;
  width: 7px;
  height: 1px;
}

.line-template-msg .LySlider .lyItem {
  flex: none;
  display: inherit;
  width: 80%;
  max-width: 300px;
  margin-left: 7px;
}

.line-template-msg .LySlider .lyItem + .lyItem {
  margin-left: 9px;
}

.line-template-msg .LySlider .lyItem.LyGi {
  max-width: 500px;
}

.line-template-msg .LySlider .lyItem.LyMe {
  max-width: 300px;
}

.line-template-msg .LySlider .lyItem.LyKi {
  max-width: 260px;
}

.line-template-msg .LySlider .lyItem.LyHe {
  max-width: 241px;
}

.line-template-msg .LySlider .lyItem.LyDe {
  max-width: 220px;
}

.line-template-msg .LySlider .lyItem.LyMi {
  max-width: 160px;
}

.line-template-msg .LySlider .lyItem.LyNa {
  max-width: 120px;
}

.line-template-msg .LySlider .T1 {
  flex: 1 0 0;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  .line-template-msg .LySlider .T1 {
    width: 0;
  }
}

@media (-webkit-min-device-pixel-ratio: 1) and (min-width: 0.001vmax) {
  .line-template-msg .LySlider .T1 {
    width: auto;
  }
}

@media (-webkit-min-device-pixel-ratio: 0.010416666666666666), (min-resolution: 1dpi) {
  .line-template-msg .LySlider .T1 {
    width: auto;
  }
}

.line-template-msg .LySlider .T1 .t1Header {
  flex: none;
}

.line-template-msg .LySlider .T1 .t1Hero {
  flex: none;
}

.line-template-msg .LySlider .T1 .t1Hero:last-child {
  border-radius: 0;
}

.line-template-msg .LySlider .T1 .t1Body {
  flex: 1 0 0;
  flex-basis: auto;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  .line-template-msg .LySlider .T1 .t1Body {
    width: 0;
  }
}

@media (-webkit-min-device-pixel-ratio: 1) and (min-width: 0.001vmax) {
  .line-template-msg .LySlider .T1 .t1Body {
    width: auto;
  }
}

@media (-webkit-min-device-pixel-ratio: 0.010416666666666666), (min-resolution: 1dpi) {
  .line-template-msg .LySlider .T1 .t1Body {
    width: auto;
  }
}

.line-template-msg .LySlider .T1 .t1Body > .MdBx.vr {
  flex: 1 0 0;
  flex-basis: auto;
}

.line-template-msg .LyGi .T1 {
  border-radius: 5px;
  max-width: 500px;
  margin: 0 7px;
}

.line-template-msg .LyMe .T1 {
  border-radius: 17px;
}

.line-template-msg .LyKi .T1 {
  border-radius: 10px;
}

.line-template-msg .LyHe .T1 {
  border-radius: 10px;
}

.line-template-msg .LyDe .T1 {
  border-radius: 10px;
}

.line-template-msg .LyMi .T1 {
  border-radius: 10px;
}

.line-template-msg .LyNa .T1 {
  border-radius: 10px;
}

.line-template-msg .T1 {
  border-radius: 17px;
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

.line-template-msg .T1 .t1Body,
.line-template-msg .T1 .t1Footer,
.line-template-msg .T1 .t1Header,
.line-template-msg .T1 .t1Hero {
  display: inherit;
  flex-direction: column;
}

.line-template-msg .T1 .t1Body > div,
.line-template-msg .T1 .t1Footer > div,
.line-template-msg .T1 .t1Header > div,
.line-template-msg .T1 .t1Hero > div {
  flex-basis: auto;
}

.line-template-msg .T1 .t1Hero:first-child,
.line-template-msg .T1 .t1Hero:first-child .MdImg.ExFull,
.line-template-msg .T1 .t1Hero:first-child .MdImg.ExFull > div,
.line-template-msg .T1 .t1Hero:first-child .MdImg.ExFull > div > a,
.line-template-msg .T1 .t1Hero:first-child .MdImg.ExFull > div > a > span {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.line-template-msg .T1 .t1Hero:last-child,
.line-template-msg .T1 .t1Hero:last-child .MdImg.ExFull,
.line-template-msg .T1 .t1Hero:last-child .MdImg.ExFull > div,
.line-template-msg .T1 .t1Hero:last-child .MdImg.ExFull > div > a,
.line-template-msg .T1 .t1Hero:last-child .MdImg.ExFull > div > a > span {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.line-template-msg .T1 .t1Hero:first-child .MdImg.ExFull > div > a > span,
.line-template-msg .T1 .t1Hero:last-child .MdImg.ExFull > div > a > span {
  overflow: hidden;
}

.line-template-msg .T1 .t1Header > .MdBx {
  padding: 1em;
}

.line-template-msg .LyKi .T1 .t1Header > .MdBx {
  padding: 13px;
}

.line-template-msg .LyHe .T1 .t1Header > .MdBx {
  padding: 11px 14px 13px;
}

.line-template-msg .LyDe .T1 .t1Header > .MdBx {
  padding: 11px 14px 13px;
}

.line-template-msg .LyMi .T1 .t1Header > .MdBx {
  padding: 10px;
}

.line-template-msg .LyNa .T1 .t1Header > .MdBx {
  padding: 10px;
}

.line-template-msg .T1 .t1Body > .MdBx {
  padding: 20px;
  padding-top: 19px;
}

.line-template-msg .LyKi .T1 .t1Body > .MdBx {
  padding: 13px;
}

.line-template-msg .LyHe .T1 .t1Body > .MdBx {
  padding: 11px 14px 13px;
}

.line-template-msg .LyDe .T1 .t1Body > .MdBx {
  padding: 11px 14px 13px;
}

.line-template-msg .LyMi .T1 .t1Body > .MdBx {
  padding: 10px;
}

.line-template-msg .LyNa .T1 .t1Body > .MdBx {
  padding: 10px;
}

.line-template-msg .T1 .t1Body.ExHasFooter > .MdBx {
  padding-bottom: 10px;
}

.line-template-msg .LyKi .T1 .t1Body.ExHasFooter > .MdBx {
  padding-bottom: 17px;
}

.line-template-msg .LyHe .T1 .t1Body.ExHasFooter > .MdBx {
  padding-bottom: 17px;
}

.line-template-msg .LyDe .T1 .t1Body.ExHasFooter > .MdBx {
  padding-bottom: 17px;
}

.line-template-msg .T1 .t1Footer > .MdBx {
  padding: 10px;
}

.line-template-msg .fxLTR,
.line-template-msg [dir='ltr'] {
  direction: ltr;
}

.line-template-msg .fxRTL,
.line-template-msg [dir='rtl'] {
  direction: rtl;
}

.line-template-msg .MdBtn,
.line-template-msg .MdBx,
.line-template-msg .MdIco,
.line-template-msg .MdImg,
.line-template-msg .MdTxt,
.line-template-msg [class*='MdSep'] {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
  max-width: 100%;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  .line-template-msg .MdBtn,
  .line-template-msg .MdBx,
  .line-template-msg .MdIco,
  .line-template-msg .MdImg,
  .line-template-msg .MdTxt,
  .line-template-msg [class*='MdSep'] {
    width: 0;
  }
}

@media (-webkit-min-device-pixel-ratio: 1) and (min-width: 0.001vmax) {
  .line-template-msg .MdBtn,
  .line-template-msg .MdBx,
  .line-template-msg .MdIco,
  .line-template-msg .MdImg,
  .line-template-msg .MdTxt,
  .line-template-msg [class*='MdSep'] {
    width: auto;
  }
}

@media (-webkit-min-device-pixel-ratio: 0.010416666666666666), (min-resolution: 1dpi) {
  .line-template-msg .MdBtn,
  .line-template-msg .MdBx,
  .line-template-msg .MdIco,
  .line-template-msg .MdImg,
  .line-template-msg .MdTxt,
  .line-template-msg [class*='MdSep'] {
    width: auto;
  }
}

.line-template-msg .MdBx {
  overflow: hidden;
  position: relative;
}

.line-template-msg .MdBx.vr > div {
  flex: none;
  flex-basis: auto;
}

.line-template-msg .MdBx.hr {
  flex-direction: row;
  width: 100%;
}

.line-template-msg .MdBx.hr > div {
  overflow: hidden;
  flex: 1 0 0;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  .line-template-msg .MdBx.hr > div {
    width: 0;
  }
}

@media (-webkit-min-device-pixel-ratio: 1) and (min-width: 0.001vmax) {
  .line-template-msg .MdBx.hr > div {
    width: auto;
  }
}

@media (-webkit-min-device-pixel-ratio: 0.010416666666666666), (min-resolution: 1dpi) {
  .line-template-msg .MdBx.hr > div {
    width: auto;
  }
}

.line-template-msg .MdBx.hr > div.MdSep {
  overflow: visible;
}

.line-template-msg .MdBx.hr > div.fl0 {
  width: auto;
}

.line-template-msg .MdBx.hr > div.fl0.MdImg.ExFull {
  width: 100%;
}

.line-template-msg .MdBx.hr > div[class*='MdSep'] {
  flex: none;
}

.line-template-msg .MdBx.hr.bl {
  align-items: baseline;
}

.line-template-msg .MdBx.hr > div.ExAbs {
  width: auto;
}

.line-template-msg .MdBx.hr.ExAbs {
  width: auto;
}

.line-template-msg .MdBx.hr.ExAbs > div {
  width: auto;
}

.line-template-msg .ExAbs .MdBx.hr {
  width: auto;
}

.line-template-msg .ExAbs .MdBx.hr > div {
  width: auto;
}

.line-template-msg .T1 .MdBx.hr.spcXs > div {
  margin-left: 2px;
}

.line-template-msg .T1 .MdBx.hr.spcSm > div {
  margin-left: 4px;
}

.line-template-msg .T1 .MdBx.hr.spcMd > div {
  margin-left: 8px;
}

.line-template-msg .T1 .MdBx.hr.spcLg > div {
  margin-left: 12px;
}

.line-template-msg .T1 .MdBx.hr.spcXl > div {
  margin-left: 16px;
}

.line-template-msg .T1 .MdBx.hr.spcXXl > div {
  margin-left: 20px;
}

.line-template-msg .T1 .MdBx.hr > div.mdBxFiller,
.line-template-msg .T1 .MdBx.hr > div.mdBxSpacer,
.line-template-msg .T1 .MdBx.hr > div:first-child {
  margin-left: 0;
}

.line-template-msg .T1.fxRTL .MdBx.hr > div {
  margin-left: 0;
}

.line-template-msg .T1.fxRTL .MdBx.hr.spcXs > div {
  margin-right: 2px;
}

.line-template-msg .T1.fxRTL .MdBx.hr.spcSm > div {
  margin-right: 4px;
}

.line-template-msg .T1.fxRTL .MdBx.hr.spcMd > div {
  margin-right: 8px;
}

.line-template-msg .T1.fxRTL .MdBx.hr.spcLg > div {
  margin-right: 12px;
}

.line-template-msg .T1.fxRTL .MdBx.hr.spcXl > div {
  margin-right: 16px;
}

.line-template-msg .T1.fxRTL .MdBx.hr.spcXXl > div {
  margin-right: 20px;
}

.line-template-msg .T1.fxRTL .MdBx.hr > div.mdBxFiller,
.line-template-msg .T1.fxRTL .MdBx.hr > div.mdBxSpacer,
.line-template-msg .T1.fxRTL .MdBx.hr > div:first-child {
  margin-right: 0;
}

.line-template-msg .MdBx.itms-jfcS {
  justify-content: flex-start;
}

.line-template-msg .MdBx.itms-jfcE {
  justify-content: flex-end;
}

.line-template-msg .MdBx.itms-jfcC {
  justify-content: center;
}

.line-template-msg .MdBx.itms-jfcSB {
  justify-content: space-between;
}

.line-template-msg .MdBx.itms-jfcSA {
  justify-content: space-around;
}

.line-template-msg .MdBx.itms-jfcSE {
  justify-content: space-evenly;
}

.line-template-msg .MdBx.itms-algS {
  align-items: flex-start;
}

.line-template-msg .MdBx.itms-algE {
  align-items: flex-end;
}

.line-template-msg .MdBx.itms-algC {
  align-items: center;
}

.line-template-msg .MdBx.itms-algBL {
  align-items: baseline;
}

.line-template-msg .MdBx.itms-algSR {
  align-items: stretch;
}

.line-template-msg .MdBx.vr.spcXs > div {
  margin-top: 2px;
}

.line-template-msg .MdBx.vr.spcSm > div {
  margin-top: 4px;
}

.line-template-msg .MdBx.vr.spcMd > div {
  margin-top: 8px;
}

.line-template-msg .MdBx.vr.spcLg > div {
  margin-top: 12px;
}

.line-template-msg .MdBx.vr.spcXl > div {
  margin-top: 16px;
}

.line-template-msg .MdBx.vr.spcXXl > div {
  margin-top: 20px;
}

.line-template-msg .MdBx.vr > div.mdBxFiller,
.line-template-msg .MdBx.vr > div.mdBxSpacer,
.line-template-msg .MdBx.vr > div:first-child {
  margin-top: 0;
}

.line-template-msg .MdBx > div.fl0 {
  flex: none !important;
}

.line-template-msg .MdBx > div.fl1 {
  flex: 1 0 0 !important;
}

.line-template-msg .MdBx > div.fl2 {
  flex: 2 0 0 !important;
}

.line-template-msg .MdBx > div.fl3 {
  flex: 3 0 0 !important;
}

.line-template-msg .MdBx > div.algS {
  align-items: flex-start;
}

.line-template-msg .MdBx > div.algE {
  align-items: flex-end;
}

.line-template-msg .MdBx > div.grvC {
  justify-content: center;
}

.line-template-msg .MdBx > div.grvB {
  justify-content: flex-end;
}

.line-template-msg .T1 .MdBx > div.mdBxFiller {
  flex: 1 0 0;
}

@media (-webkit-min-device-pixel-ratio: 1) {
  .line-template-msg .T1 .MdBx > div.mdBxFiller {
    width: 0;
  }
}

@media (-webkit-min-device-pixel-ratio: 1) and (min-width: 0.001vmax) {
  .line-template-msg .T1 .MdBx > div.mdBxFiller {
    width: auto;
  }
}

@media (-webkit-min-device-pixel-ratio: 0.010416666666666666), (min-resolution: 1dpi) {
  .line-template-msg .T1 .MdBx > div.mdBxFiller {
    width: auto;
  }
}

.line-template-msg .MdBx > div.mdBxSpacer {
  flex: none;
}

.line-template-msg .MdBx.hr > div.mdBxSpacer {
  height: 1px;
}

.line-template-msg .MdBx.hr > div.mdBxSpacer.spcXs {
  width: 2px;
}

.line-template-msg .MdBx.hr > div.mdBxSpacer.spcSm {
  width: 4px;
}

.line-template-msg .MdBx.hr > div.mdBxSpacer.spcMd {
  width: 8px;
}

.line-template-msg .MdBx.hr > div.mdBxSpacer.spcLg {
  width: 12px;
}

.line-template-msg .MdBx.hr > div.mdBxSpacer.spcXl {
  width: 16px;
}

.line-template-msg .MdBx.hr > div.mdBxSpacer.spcXXl {
  width: 20px;
}

.line-template-msg .MdBx.hr[class*='spc'] > div.mdBxSpacer + div {
  margin-left: 0;
}

.line-template-msg .MdBx.hr > .MdSep {
  align-self: stretch;
}

.line-template-msg .MdBx.vr > div.mdBxSpacer {
  width: 1px;
}

.line-template-msg .MdBx.vr > div.mdBxSpacer.spcXs {
  height: 2px;
}

.line-template-msg .MdBx.vr > div.mdBxSpacer.spcSm {
  height: 4px;
}

.line-template-msg .MdBx.vr > div.mdBxSpacer.spcMd {
  height: 8px;
}

.line-template-msg .MdBx.vr > div.mdBxSpacer.spcLg {
  height: 12px;
}

.line-template-msg .MdBx.vr > div.mdBxSpacer.spcXl {
  height: 16px;
}

.line-template-msg .MdBx.vr > div.mdBxSpacer.spcXXl {
  height: 20px;
}

.line-template-msg .MdBx.vr > div.fl0 {
  flex: none !important;
}

.line-template-msg .MdBx.vr > div.fl1 {
  flex: 1 0 auto !important;
}

.line-template-msg .MdBx.vr > div.fl2 {
  flex: 2 0 auto !important;
}

.line-template-msg .MdBx.vr > div.fl3 {
  flex: 3 0 auto !important;
}

.line-template-msg .MdBx[class*='spc'] > div.mdBxSpacer + div {
  margin-top: 0;
}

.line-template-msg [class*='MdSep'] {
  flex: none;
  box-sizing: content-box;
  width: 100%;
  border: 0 solid #d4d6da;
}

.line-template-msg .MdSep {
  position: relative;
  flex: none;
}

.line-template-msg .MdSep::before {
  box-sizing: content-box;
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 1px;
  border: inherit;
  border-top-width: 1px;
  transform-origin: left top;
  transform: scaleY(0.5);
}

.line-template-msg .MdSep:last-child::before {
  margin-top: -1px;
  border-top-width: 0;
  border-bottom-width: 1px;
}

.line-template-msg .fxRTL .MdSep::before {
  transform-origin: right top;
}

.line-template-msg .MdSepB {
  border-top-width: 1px;
}

.line-template-msg .MdBx.hr > div.MdSep::before {
  width: 1px;
  height: 100%;
  border-top-width: 0;
  border-left-width: 1px;
  transform: scaleX(0.5);
}

.line-template-msg .MdBx.hr > div.MdSep:last-child::before {
  margin-top: 0;
  margin-left: -1px;
  border-left-width: 0;
  border-right-width: 1px;
}

.line-template-msg .MdBx.hr > div.MdSepB {
  border-top-width: 0;
  border-left-width: 1px;
}

.line-template-msg .fxRTL .MdBx.hr > div.MdSep::before {
  border-left-width: 0;
  border-right-width: 1px;
}

.line-template-msg .fxRTL .MdBx.hr > div.MdSep:last-child::before {
  margin-left: 0;
  margin-right: -1px;
  border-right-width: 0;
  border-left-width: 1px;
}

.line-template-msg .MdTxt {
  position: relative;
}

.line-template-msg .MdTxt p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.line-template-msg .MdTxt p:empty {
  height: 1.4em;
}

.line-template-msg .MdTxt.ExWrap p {
  text-overflow: clip;
  word-wrap: break-word;
  white-space: normal;
}

.line-template-msg .MdTxt.Ex2nd {
  color: #aaa;
}

.line-template-msg .MdTxt.ExAlgC p {
  text-align: center;
}

.line-template-msg .MdTxt.ExAlgE p {
  text-align: end;
}

.line-template-msg .MdSpn {
  font-style: inherit;
  font-weight: inherit;
  text-decoration: inherit;
}

.line-template-msg .MdSpn.ExXXs {
  font-size: 11px;
}

.line-template-msg .MdSpn.ExXs {
  font-size: 13px;
}

.line-template-msg .MdSpn.ExSm {
  font-size: 14px;
}

.line-template-msg .MdSpn.ExMd {
  font-size: 16px;
}

.line-template-msg .MdSpn.ExLg {
  font-size: 19px;
}

.line-template-msg .MdSpn.ExXl {
  font-size: 22px;
}

.line-template-msg .MdSpn.ExXXl {
  font-size: 29px;
}

.line-template-msg .MdSpn.Ex3Xl {
  font-size: 35px;
}

.line-template-msg .MdSpn.Ex4Xl {
  font-size: 48px;
}

.line-template-msg .MdSpn.Ex5Xl {
  font-size: 74px;
}

.line-template-msg .MdIco {
  position: relative;
}

.line-template-msg .MdIco span {
  display: inline-block;
  overflow: hidden;
  background: no-repeat center;
  background-size: contain;
  width: 1em;
  height: 1em;
  vertical-align: baseline;
}

.line-template-msg .MdIco.ExAr2to1 span {
  width: 2em;
}

.line-template-msg .MdIco.ExAr3to1 span {
  width: 3em;
}

.line-template-msg .MdIco.ExXXs,
.line-template-msg .MdTxt.ExXXs {
  font-size: 11px;
}

.line-template-msg .MdIco.ExXs,
.line-template-msg .MdTxt.ExXs {
  font-size: 13px;
}

.line-template-msg .MdIco.ExSm,
.line-template-msg .MdTxt.ExSm {
  font-size: 14px;
}

.line-template-msg .MdIco.ExMd,
.line-template-msg .MdTxt.ExMd {
  font-size: 16px;
}

.line-template-msg .MdIco.ExLg,
.line-template-msg .MdTxt.ExLg {
  font-size: 19px;
}

.line-template-msg .MdIco.ExXl,
.line-template-msg .MdTxt.ExXl {
  font-size: 22px;
}

.line-template-msg .MdIco.ExXXl,
.line-template-msg .MdTxt.ExXXl {
  font-size: 29px;
}

.line-template-msg .MdIco.Ex3Xl,
.line-template-msg .MdTxt.Ex3Xl {
  font-size: 35px;
}

.line-template-msg .MdIco.Ex4Xl,
.line-template-msg .MdTxt.Ex4Xl {
  font-size: 48px;
}

.line-template-msg .MdIco.Ex5Xl,
.line-template-msg .MdTxt.Ex5Xl {
  font-size: 74px;
}

.line-template-msg .MdBtn {
  position: relative;
}

.line-template-msg .MdBtn a {
  display: inherit;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 1em;
}

.line-template-msg .MdBtn div {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

.line-template-msg .MdBtn.ExBtn1 a {
  background-color: #17c950;
  color: #ffffff;
}

.line-template-msg .MdBtn.ExBtn2 a {
  background-color: #dcdfe5;
  color: #111111;
}

.line-template-msg .MdBtn.ExBtnL a {
  color: #42659a;
}

.line-template-msg .MdBtn.ExSm a {
  height: 40px;
}

.line-template-msg .MdImg {
  align-items: center;
  overflow: hidden;
  position: relative;
}

.line-template-msg .MdImg > div {
  max-width: 100%;
}

.line-template-msg .MdImg a {
  display: block;
  position: relative;
  width: 100%;
}

.line-template-msg .MdImg span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
}

.line-template-msg .MdImg.ExXXs > div {
  width: 40px;
}

.line-template-msg .MdImg.ExXs > div {
  width: 60px;
}

.line-template-msg .MdImg.ExSm > div {
  width: 80px;
}

.line-template-msg .MdImg.ExMd > div {
  width: 100px;
}

.line-template-msg .MdImg.ExLg > div {
  width: 120px;
}

.line-template-msg .MdImg.ExXl > div {
  width: 140px;
}

.line-template-msg .MdImg.ExXXl > div {
  width: 160px;
}

.line-template-msg .MdImg.Ex3Xl > div {
  width: 180px;
}

.line-template-msg .MdImg.Ex4Xl > div {
  width: 200px;
}

.line-template-msg .MdImg.Ex5Xl > div {
  width: 220px;
}

.line-template-msg .MdImg.ExFull > div {
  width: 100%;
}

.line-template-msg .MdImg.ExAr1to1 a {
  padding-bottom: 100%;
}

.line-template-msg .MdImg.ExAr1_51to1 a {
  padding-bottom: 66.22517%;
}

.line-template-msg .MdImg.ExAr1_91to1 a {
  padding-bottom: 52.35602%;
}

.line-template-msg .MdImg.ExAr20to13 a {
  padding-bottom: 65%;
}

.line-template-msg .MdImg.ExAr4to3 a {
  padding-bottom: 75%;
}

.line-template-msg .MdImg.ExAr16to9 a {
  padding-bottom: 56.25%;
}

.line-template-msg .MdImg.ExAr2to1 a {
  padding-bottom: 50%;
}

.line-template-msg .MdImg.ExAr3to1 a {
  padding-bottom: 33.33333%;
}

.line-template-msg .MdImg.ExAr3to4 a {
  padding-bottom: 133.33333%;
}

.line-template-msg .MdImg.ExAr9to16 a {
  padding-bottom: 177.77778%;
}

.line-template-msg .MdImg.ExAr1to2 a {
  padding-bottom: 200%;
}

.line-template-msg .MdImg.ExAr1to3 a {
  padding-bottom: 300%;
}

.line-template-msg .MdImg.ExFit span {
  background-size: contain;
}

.line-template-msg .MdImg.ExCover span {
  background-size: cover;
}

.line-template-msg .MdImg.ExCircle span {
  border-radius: 50%;
}

.line-template-msg .MdImg.ExMirrored span {
  transform: scaleX(-1);
}

.line-template-msg .MdImg.ExAbs.ExFull {
  width: 100%;
}

.line-template-msg .ExMgnANone {
  margin: 0 !important;
}

.line-template-msg .ExMgnAXs {
  margin: 2px !important;
}

.line-template-msg .ExMgnASm {
  margin: 4px !important;
}

.line-template-msg .ExMgnAMd {
  margin: 8px !important;
}

.line-template-msg .ExMgnALg {
  margin: 12px !important;
}

.line-template-msg .ExMgnAXl {
  margin: 16px !important;
}

.line-template-msg .ExMgnAXXl {
  margin: 20px !important;
}

.line-template-msg .ExMgnTNone {
  margin-top: 0 !important;
}

.line-template-msg .ExMgnTXs {
  margin-top: 2px !important;
}

.line-template-msg .ExMgnTSm {
  margin-top: 4px !important;
}

.line-template-msg .ExMgnTMd {
  margin-top: 8px !important;
}

.line-template-msg .ExMgnTLg {
  margin-top: 12px !important;
}

.line-template-msg .ExMgnTXl {
  margin-top: 16px !important;
}

.line-template-msg .ExMgnTXXl {
  margin-top: 20px !important;
}

.line-template-msg .ExMgnBNone {
  margin-bottom: 0 !important;
}

.line-template-msg .ExMgnBXs {
  margin-bottom: 2px !important;
}

.line-template-msg .ExMgnBSm {
  margin-bottom: 4px !important;
}

.line-template-msg .ExMgnBMd {
  margin-bottom: 8px !important;
}

.line-template-msg .ExMgnBLg {
  margin-bottom: 12px !important;
}

.line-template-msg .ExMgnBXl {
  margin-bottom: 16px !important;
}

.line-template-msg .ExMgnBXXl {
  margin-bottom: 20px !important;
}

.line-template-msg .ExMgnLNone {
  margin-left: 0 !important;
}

.line-template-msg .ExMgnLXs {
  margin-left: 2px !important;
}

.line-template-msg .ExMgnLSm {
  margin-left: 4px !important;
}

.line-template-msg .ExMgnLMd {
  margin-left: 8px !important;
}

.line-template-msg .ExMgnLLg {
  margin-left: 12px !important;
}

.line-template-msg .ExMgnLXl {
  margin-left: 16px !important;
}

.line-template-msg .ExMgnLXXl {
  margin-left: 20px !important;
}

.line-template-msg .ExMgnRNone {
  margin-right: 0 !important;
}

.line-template-msg .ExMgnRXs {
  margin-right: 2px !important;
}

.line-template-msg .ExMgnRSm {
  margin-right: 4px !important;
}

.line-template-msg .ExMgnRMd {
  margin-right: 8px !important;
}

.line-template-msg .ExMgnRLg {
  margin-right: 12px !important;
}

.line-template-msg .ExMgnRXl {
  margin-right: 16px !important;
}

.line-template-msg .ExMgnRXXl {
  margin-right: 20px !important;
}

.line-template-msg .ExPadANone {
  padding: 0 !important;
}

.line-template-msg .ExPadAXs {
  padding: 2px !important;
}

.line-template-msg .ExPadASm {
  padding: 4px !important;
}

.line-template-msg .ExPadAMd {
  padding: 8px !important;
}

.line-template-msg .ExPadALg {
  padding: 12px !important;
}

.line-template-msg .ExPadAXl {
  padding: 16px !important;
}

.line-template-msg .ExPadAXXl {
  padding: 20px !important;
}

.line-template-msg .ExPadTNone {
  padding-top: 0 !important;
}

.line-template-msg .ExPadTXs {
  padding-top: 2px !important;
}

.line-template-msg .ExPadTSm {
  padding-top: 4px !important;
}

.line-template-msg .ExPadTMd {
  padding-top: 8px !important;
}

.line-template-msg .ExPadTLg {
  padding-top: 12px !important;
}

.line-template-msg .ExPadTXl {
  padding-top: 16px !important;
}

.line-template-msg .ExPadTXXl {
  padding-top: 20px !important;
}

.line-template-msg .ExPadBNone {
  padding-bottom: 0 !important;
}

.line-template-msg .ExPadBXs {
  padding-bottom: 2px !important;
}

.line-template-msg .ExPadBSm {
  padding-bottom: 4px !important;
}

.line-template-msg .ExPadBMd {
  padding-bottom: 8px !important;
}

.line-template-msg .ExPadBLg {
  padding-bottom: 12px !important;
}

.line-template-msg .ExPadBXl {
  padding-bottom: 16px !important;
}

.line-template-msg .ExPadBXXl {
  padding-bottom: 20px !important;
}

.line-template-msg .ExPadLNone {
  padding-left: 0 !important;
}

.line-template-msg .ExPadLXs {
  padding-left: 2px !important;
}

.line-template-msg .ExPadLSm {
  padding-left: 4px !important;
}

.line-template-msg .ExPadLMd {
  padding-left: 8px !important;
}

.line-template-msg .ExPadLLg {
  padding-left: 12px !important;
}

.line-template-msg .ExPadLXl {
  padding-left: 16px !important;
}

.line-template-msg .ExPadLXXl {
  padding-left: 20px !important;
}

.line-template-msg .ExPadRNone {
  padding-right: 0 !important;
}

.line-template-msg .ExPadRXs {
  padding-right: 2px !important;
}

.line-template-msg .ExPadRSm {
  padding-right: 4px !important;
}

.line-template-msg .ExPadRMd {
  padding-right: 8px !important;
}

.line-template-msg .ExPadRLg {
  padding-right: 12px !important;
}

.line-template-msg .ExPadRXl {
  padding-right: 16px !important;
}

.line-template-msg .ExPadRXXl {
  padding-right: 20px !important;
}

.line-template-msg .ExBdrWdtNone {
  border-width: 0 !important;
}

.line-template-msg .ExBdrWdtLgh {
  border-width: 0.5px !important;
}

.line-template-msg .ExBdrWdtNml {
  border-width: 1px !important;
}

.line-template-msg .ExBdrWdtMdm {
  border-width: 2px !important;
}

.line-template-msg .ExBdrWdtSbd {
  border-width: 3px !important;
}

.line-template-msg .ExBdrWdtBld {
  border-width: 4px !important;
}

.line-template-msg .ExBdrRadNone {
  border-radius: 0 !important;
}

.line-template-msg .ExBdrRadXs {
  border-radius: 2px !important;
}

.line-template-msg .ExBdrRadSm {
  border-radius: 4px !important;
}

.line-template-msg .ExBdrRadMd {
  border-radius: 8px !important;
}

.line-template-msg .ExBdrRadLg {
  border-radius: 12px !important;
}

.line-template-msg .ExBdrRadXl {
  border-radius: 16px !important;
}

.line-template-msg .ExBdrRadXXl {
  border-radius: 20px !important;
}

.line-template-msg .ExAbs {
  position: absolute;
  margin: 0 !important;
  width: auto;
}

.line-template-msg .ExTNone {
  top: 0;
}

.line-template-msg .ExTXs {
  top: 2px;
}

.line-template-msg .ExTSm {
  top: 4px;
}

.line-template-msg .ExTMd {
  top: 8px;
}

.line-template-msg .ExTLg {
  top: 12px;
}

.line-template-msg .ExTXl {
  top: 16px;
}

.line-template-msg .ExTXXl {
  top: 20px;
}

.line-template-msg .ExBNone {
  bottom: 0;
}

.line-template-msg .ExBXs {
  bottom: 2px;
}

.line-template-msg .ExBSm {
  bottom: 4px;
}

.line-template-msg .ExBMd {
  bottom: 8px;
}

.line-template-msg .ExBLg {
  bottom: 12px;
}

.line-template-msg .ExBXl {
  bottom: 16px;
}

.line-template-msg .ExBXXl {
  bottom: 20px;
}

.line-template-msg .ExLNone {
  left: 0;
}

.line-template-msg .ExLXs {
  left: 2px;
}

.line-template-msg .ExLSm {
  left: 4px;
}

.line-template-msg .ExLMd {
  left: 8px;
}

.line-template-msg .ExLLg {
  left: 12px;
}

.line-template-msg .ExLXl {
  left: 16px;
}

.line-template-msg .ExLXXl {
  left: 20px;
}

.line-template-msg .ExRNone {
  right: 0;
}

.line-template-msg .ExRXs {
  right: 2px;
}

.line-template-msg .ExRSm {
  right: 4px;
}

.line-template-msg .ExRMd {
  right: 8px;
}

.line-template-msg .ExRLg {
  right: 12px;
}

.line-template-msg .ExRXl {
  right: 16px;
}

.line-template-msg .ExRXXl {
  right: 20px;
}

.line-template-msg .ExWR {
  font-weight: normal !important;
}

.line-template-msg .ExWR * {
  font-weight: inherit;
}

.line-template-msg .ExWB {
  font-weight: bold !important;
}

.line-template-msg .ExWB * {
  font-weight: inherit;
}

.line-template-msg .ExFntStyNml {
  font-style: normal !important;
}

.line-template-msg .ExFntStyNml * {
  font-style: inherit;
}

.line-template-msg .ExFntStyIt {
  font-style: italic !important;
}

.line-template-msg .ExFntStyIt * {
  font-style: inherit;
}

.line-template-msg .ExTxtDecNone {
  text-decoration: none !important;
}

.line-template-msg .ExTxtDecUl {
  text-decoration: underline !important;
}

.line-template-msg .ExTxtDecLt {
  text-decoration: line-through !important;
}
.file-input-message-template-modal > div:first-child {
  border-radius: 0.375rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  padding: 0.75rem
}
.file-input-message-template-modal .ant-btn {
  display: flex;
  height: 150px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  padding: 0.75rem;
  font-family: Sarabun, sans-serif
}
.file-input-message-template-modal h2 {
  margin: 0px;
  margin-top: 0.75rem
}
.file-example-message-template-modal {
  /* @apply bg-white rounded-md p-2 inline-block max-w-full whitespace-pre-line; */
}
.atl-container {
  margin-bottom: 0.75rem
}
.card-input-message-template-modal .container {
  display: block;
}
.card-input-message-template-modal .action-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.card-input-message-template-modal .action-panel > div > span {
  flex-shrink: 0;
}
.card-input-message-template-modal .action-panel:not(.tab-action-panel) > div > .ant-btn,
.card-input-message-template-modal .action-panel:not(.tab-action-panel) > div > .ant-select {
  width: 100%;
}
.card-input-message-template-modal .tab-action-panel {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}
.card-input-message-template-modal .tab-content-area {
  overflow: auto;
}
.card-input-message-template-modal input {
  font-family: Sarabun, sans-serif;
}
.card-input-message-template-modal .ant-collapse .ant-collapse-header {
  align-items: center;
}
.card-input-message-template-modal .ant-collapse .ant-collapse-content-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.card-input-message-template-modal .default-input {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.card-input-message-template-modal .input-label.required > span::after {
  content: ' *';
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.card-input-message-template-modal .source-input-image {
  display: flex;
  gap: 0.75rem;
}
.card-input-message-template-modal .content-input-image {
  margin-left: 3.5rem;
}
.card-input-message-template-modal .condition-input-image p {
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity));
}
.card-input-message-template-modal .condition-input-image p:first-child {
  font-weight: 700;
}
.card-input-message-template-modal .condition-input-image > * {
  margin: 0px;
}
.card-input-message-template-modal .input-content-input-image > div {
  width: 66.666667%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.card-input-message-template-modal .input-content-input-image .choose-file-input-image {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-input-message-template-modal .input-content-input-image .preview-choose-file-input-image {
  display: flex;
  height: 100px;
  width: 100px;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
}
.card-input-message-template-modal .input-content-input-image .choose-api-input-image {
  display: flex;
  flex-direction: column;
}
.card-input-message-template-modal .input-content-input-image .choose-api-noti-input-image,
.card-input-message-template-modal .input-content-input-image .enter-url-input-image {
  display: flex;
  flex-direction: column;
}
.aspect-radio-style {
  width: 92.33px;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.aspect-radio-support {
  position: relative;
}
.aspect-radio-support-icon {
  margin-left: 8px;
  margin-top: 6px;
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity));
}
.aspect-radio-support-tooltip {
  position: absolute;
  top: 2px;
  z-index: 10;
  display: none;
  height: 82px;
  width: 247px;
  border-radius: 6px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 0.5rem;
  font-size: 14px;
  line-height: 22px;
  box-shadow: 0px 0px 3.5px 0px #44444433;
}
.aspect-radio-support:hover .aspect-radio-support-tooltip {
  display: block;
}
.default-input-label {
  margin-bottom: -8px;
  display: flex;
}
.response-style {
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 198px;
}
@media (min-width: 1721px) {
  .response-style {
    width: 255px;
  }
}
.message-template-dropdown {
  font-size: 14px;
}
.message-template-dropdown .ant-select-item {
  font-size: 14px;
}
.message-template-dropdown .ant-select-item-group {
  font-size: 14px;
}
.message-template-dropdown .ant-select-item-option {
  font-size: 14px;
}
.card-input-message-template-modal .container {
    display: block
}
.card-input-message-template-modal .input-label {
    display: flex;
    flex-direction: column
}

.card-input-message-template-modal .inner-input-label {
    display: flex
}.message-type-card {
    width: 375px
}
.message-type-card .ant-card-body > span {
    display: block;
    padding: 0.5rem;
    font-weight: 700
}
.list-message-type .ant-btn {
    width: 100%;
    justify-content: flex-start;
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
.item-message-info-messages {
    margin-top: 12px;
    display: flex;
    justify-content: space-between
}
.content-message-info-messages {
    display: flex;
    width: 100%;
    align-items: flex-start
}
.content-message-info-messages .chat-message {
    width: 100%
}
.drag-message-info-messages {
    cursor: move
}
.bubble-message-info-messages {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    white-space: pre-line;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: left;
    font-size: 16px;
    line-height: 24px
}
.action-message-info-messages {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem
}
/* stylelint-disable */
html,
body {
  width: 100%;
  height: 100%;
}
input::-ms-clear,
input::-ms-reveal {
  display: none;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  margin: 0;
}
[tabindex='-1']:focus {
  outline: none;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-weight: 500;
}
p {
  margin-top: 0;
  margin-bottom: 1em;
}
abbr[title],
abbr[data-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline;
  text-decoration: underline dotted;
  border-bottom: 0;
  cursor: help;
}
address {
  margin-bottom: 1em;
  font-style: normal;
  line-height: inherit;
}
input[type='text'],
input[type='password'],
input[type='number'],
textarea {
  -webkit-appearance: none;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1em;
}
ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 500;
}
dd {
  margin-bottom: 0.5em;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1em;
}
dfn {
  font-style: italic;
}
b,
strong {
  font-weight: bolder;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
pre,
code,
kbd,
samp {
  font-size: 1em;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
pre {
  margin-top: 0;
  margin-bottom: 1em;
  overflow: auto;
}
figure {
  margin: 0 0 1em;
}
img {
  vertical-align: middle;
  border-style: none;
}
a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}
table {
  border-collapse: collapse;
}
caption {
  padding-top: 0.75em;
  padding-bottom: 0.3em;
  text-align: left;
  caption-side: bottom;
}
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html [type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
input[type='radio'],
input[type='checkbox'] {
  box-sizing: border-box;
  padding: 0;
}
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  -webkit-appearance: listbox;
}
textarea {
  overflow: auto;
  resize: vertical;
}
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5em;
  padding: 0;
  color: inherit;
  font-size: 1.5em;
  line-height: inherit;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}
[type='search'] {
  outline-offset: -2px;
  -webkit-appearance: none;
}
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
output {
  display: inline-block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none !important;
}
mark {
  padding: 0.2em;
  background-color: #feffe6;
}
/* notification styles */
.message-mt {
  margin-top: 8px;
}
.icon-mt {
  margin-top: -5px;
}
.notification-styles {
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 56px;
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
}
.notification-success {
  background-color: #ecfce1;
  border: 1px solid #82ca48;
}
.notification-error {
  background-color: #fee2e2;
  border: 1px solid #ef4444;
}

/* message styles */
:where(.custom-success) .ant-message-notice-content {
  background-color: #ecfce1 !important;
  border: 1px solid #82ca48 !important;
  padding-top: 10px !important;
  margin-top: 10px !important;
}
:where(.custom-error) .ant-message-notice-content {
  background-color: #fee2e2 !important;
  border: 1px solid #ef4444 !important;
  padding-top: 10px !important;
  margin-top: 10px !important;
}

.alert-modal-wrapper .alert-modal-content .ant-modal-confirm-body .ant-modal-confirm-paragraph {
  width: 100%;
  max-width: 100%;
}
.alert-modal-wrapper .alert-modal-content .ant-modal-header,
.alert-modal-wrapper .alert-modal-content .ant-modal-confirm-body .ant-modal-confirm-title {
  border-width: 0px;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  padding-bottom: 0.375rem;
}
.alert-modal-wrapper .alert-modal-content .ant-modal-title,
.alert-modal-wrapper .alert-modal-content .ant-modal-confirm-body .ant-space-item:has(svg) {
  line-height: 0;
}
.alert-modal-wrapper .alert-modal-content .ant-modal-title svg,
.alert-modal-wrapper .alert-modal-content .ant-modal-confirm-body .ant-modal-confirm-title svg {
  height: 20px;
  width: 20px;
}
.alert-modal-wrapper .alert-modal-content .ant-modal-confirm-body > .anticon {
  display: none;
}
.alert-modal-wrapper .alert-modal-content .ant-modal-confirm-body .ant-modal-confirm-content {
  display: flex;
}
.websocket-status-notification {
    width: auto !important;
    min-width: 300px !important;
    padding: 0.5rem !important
}
.websocket-status-notification .ant-notification-notice-close {
    top: 0.75rem !important;
    right: 0.75rem !important
}
.websocket-status-notification .ant-notification-notice-close span {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity));
    padding: 0.25rem
}
.websocket-status-notification .ant-notification-notice-btn {
    margin: 0px !important
}
.websocket-status-notification .ant-notification-notice-btn button {
    box-shadow: none !important
}
.websocket-status-notification .ant-notification-notice-message {
    font-weight: 700
}
.websocket-status-notification.refresh svg,
.websocket-status-notification.refresh .ant-notification-notice-message,
.websocket-status-notification.refresh .ant-notification-notice-description {
    --tw-text-opacity: 1;
    color: rgb(244 211 94 / var(--tw-text-opacity))
}
.websocket-status-notification.success svg,
.websocket-status-notification.success .ant-notification-notice-message,
.websocket-status-notification.success .ant-notification-notice-description {
    --tw-text-opacity: 1;
    color: rgb(130 202 72 / var(--tw-text-opacity))
}
.websocket-status-notification.warning svg,
.websocket-status-notification.warning .ant-notification-notice-message,
.websocket-status-notification.warning .ant-notification-notice-description {
    --tw-text-opacity: 1;
    color: rgb(115 115 115 / var(--tw-text-opacity))
}
.websocket-status-notification.error svg,
.websocket-status-notification.error .ant-notification-notice-message,
.websocket-status-notification.error .ant-notification-notice-description {
    --tw-text-opacity: 1;
    color: rgb(115 115 115 / var(--tw-text-opacity))
}
.websocket-status-notification.danger svg,
.websocket-status-notification.danger .ant-notification-notice-message,
.websocket-status-notification.danger .ant-notification-notice-description {
    --tw-text-opacity: 1;
    color: rgb(244 68 68 / var(--tw-text-opacity))
}
@font-face {
  font-family: 'NotoSans';
  src: url('/assets/NotoSansThai-D82Ow9qM.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Sarabun';
  src: url('/assets/Sarabun-Regular-DzuTqyK_.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Hind Madurai';
  src: url('/assets/HindMadurai-Regular-DVtAs-6M.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Hind Madurai';
  src: url('/assets/HindMadurai-SemiBold-rfBDHbE1.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'Hind Madurai';
  src: url('/assets/HindMadurai-Bold-BPT3nyA8.ttf') format('truetype');
  font-weight: 700;
}

#app {
  margin: 0 auto;
  padding: 0 auto;
  text-align: center;
}

.highlighted-message {
  background-color: #fdedbe;
  border-radius: 10px;
  padding: 2px;
  animation: highlightFadeOut 3s ease-out forwards;
}

@keyframes highlightFadeOut {
  0% {
    background-color: #fdedbe;
  }
  70% {
    background-color: #fdedbe;
  }
  100% {
    background-color: transparent;
  }
}
.container {
    display: flex;
    height: 100%;
    justify-content: space-between
}.list-chat {
    margin-right: 2px;
    display: flex;
    height: 100%;
    min-width: 340px;
    flex-direction: column;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 0.5rem
}
/* Filter Item */
.list-chat-filter-item {
    margin-bottom: 0.5rem;
    display: flex;
    height: 2rem;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    transition-property: height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.list-chat-filter-item.search {
    height: 5rem
}
.list-chat-filter-item h5 {
    margin: 0px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700
}
.list-chat-filter-item .ant-btn {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.list-chat-filter-item .ant-btn.active-status {
    --tw-bg-opacity: 1;
    background-color: rgb(236 236 236 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(37 37 37 / var(--tw-text-opacity))
}
.list-chat-filter-item .ant-btn.active-status:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
.list-chat-filter-item-header {
    display: flex;
    height: 32px;
    width: 100%;
    align-items: center;
    justify-content: space-between
}
.list-chat-filter-item-header .ant-btn {
    --tw-text-opacity: 1;
    color: rgb(37 37 37 / var(--tw-text-opacity))
}
.list-chat-filter-item-search {
    margin-bottom: 0.5rem;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-width: 0px;
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-bottom: 0.5rem
}
.list-chat-filter-item-search > div {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem
}
.list-chat-filter-item-search > div > .ant-btn {
    width: 100%;
    border-radius: 0.375rem
}
.list-chat-filter-item-search > div > .ant-btn.active {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
}
.buttons-list-chat-filter-item {
    display: flex;
    gap: 0.25rem
}
.buttons-list-chat-filter-item .ant-badge .ant-badge-count {
    left: 0px;
    height: 18px;
    width: 18px;
    min-width: 18px;
    --tw-bg-opacity: 1;
    background-color: rgb(240 54 54 / var(--tw-bg-opacity));
    font-family: unset
}
/* Assign agent*/
.assign-dropdown-button .anticon {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.assign-dropdown-button > div {
    border-width: 0px;
    padding: 0px
}
.assign-dropdown-button .ant-space-item:first-child {
    line-height: .75rem
}
.assign-dropdown-button .ant-space-item:last-child {
    max-width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 22px
}
.assign-dropdown-button svg {
    height: 19px;
    width: 19px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    line-height: 1rem
}
.assign-dropdown-button .ant-avatar {
    border-width: 0px
}
.assign-dropdown-menu {
    width: 250px
}
.assign-dropdown-menu .ant-card-body .ant-tabs {
    margin: 0px
}
.assign-dropdown-menu .ant-card-body .ant-tabs .ant-tabs-nav {
    margin-bottom: 0.5rem
}
.assign-dropdown-menu .ant-card-body .ant-tabs .ant-tabs-nav-list {
    margin-left: 0px
}
.assign-dropdown-menu .ant-card-body .ant-dropdown-menu {
    max-height: 200px;
    border-radius: 0px
}
.assign-dropdown-menu .ant-card-body .ant-dropdown-menu-item {
    border-radius: 0.375rem
}
.assign-dropdown-menu .search-menu-list {
    height: 200px
}
.item-assign-room {
    margin-top: 0.25rem;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.375rem;
    padding: 0.5rem
}
.item-assign-room .ant-badge {
    display: flex;
    width: 70px;
    align-items: center;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 22px
}
.item-assign-room .ant-avatar {
    border-width: 0px
}
.item-assign-room .ant-badge span {
    flex-shrink: 0
}
.item-assign-room.item-assign-room-active {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
}
/* Chat List */
.list-chat-content {
    height: 100%;
    overflow-x: hidden
}
.list-chat-content > div > div {
    overflow-y: scroll !important;
    padding-left: 0.5rem;
    padding-right: 0.25rem
}
.empty-chat-container {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column
}
.container-user-setting-modal {
    top: 50px;
    padding: 0px
}
.content-user-setting-modal {
    display: flex;
    gap: 1rem;
    border-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-top: 0.75rem
}
.input-user-setting-modal {
    width: 33.333333%
}
.input-user-setting-modal .ant-checkbox-group .ant-row {
    gap: 0.5rem;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding: 0.75rem
}
.perm-user-setting-modal {
    width: 66.666667%
}
.perm-user-setting-modal .ant-table-thead th:not(:first-child) {
    text-align: center
}
.perm-user-setting-modal .ant-table-cell {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important
}
.perm-user-setting-modal .ant-table-cell .ant-btn {
    margin: auto;
    width: 100%
}
.perm-user-setting-modal .ant-table-cell .ant-btn:not(.active) .ant-btn-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(15%) hue-rotate(208deg) brightness(104%) contrast(100%)
}
.row-sub-user-setting-modal .ant-table-cell:first-child {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important
}
.action-user-setting-modal {
    display: flex;
    gap: 0.5rem;
    border-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
    padding-top: 0.75rem
}
.action-col-user-setting {
    text-align: center !important
}
.footer-user-manage-modal {
    display: flex;
    gap: 0.5rem
}
.footer-user-manage-modal .ant-btn:last-child {
    --tw-border-opacity: 1;
    border-color: rgb(241 157 67 / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgb(241 157 67 / var(--tw-text-opacity))
}.tag-theme {
    display: inline-flex;
    border-radius: 6px;
    font-family: Sarabun, sans-serif
}
.tag-theme > span:not(.anticon) {
    display: block;
    padding-top: 1px;
    padding-bottom: 1px
}
.general-tag-theme {
    display: flex;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 14px;
    line-height: 22px
}
.general-tag-theme .ant-tag-close-icon {
    --tw-text-opacity: 1;
    color: rgb(218 142 59 / var(--tw-text-opacity))
}
.general-tag-theme .ant-tag-close-icon:hover {
    --tw-text-opacity: 1;
    color: rgb(218 142 59 / var(--tw-text-opacity))
}
.modal-filter-chat .ant-modal-content {
    padding: 1rem
}
.modal-filter-chat .ant-tabs {
    height: 350px
}
.modal-filter-chat .ant-tabs-nav-list {
    width: 100%;
    justify-content: space-between
}
.modal-filter-chat .ant-tabs-tab {
    flex: 1 1 0%
}
.modal-filter-chat .ant-tabs-tab div {
    width: 100%;
    text-align: center
}
.modal-filter-chat .ant-tabs-content {
    height: 100%
}
.modal-filter-chat .ant-tabs-tabpane-active {
    display: flex;
    height: 100%;
    flex-direction: column
}
.modal-filter-chat .ant-input-affix-wrapper {
    margin-bottom: 0.5rem
}
.modal-filter-chat .ant-checkbox-group {
    display: flex;
    width: 100%;
    overflow-y: auto
}
.modal-filter-chat .ant-radio-wrapper,
.modal-filter-chat .ant-checkbox-wrapper {
    margin: 0px;
    width: 100%;
    border-radius: 0.375rem;
    padding: 0.5rem
}
.modal-filter-chat .ant-radio-wrapper:hover,
.modal-filter-chat .ant-checkbox-wrapper:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
.modal-filter-chat .footer-filter-chat {
    display: flex;
    justify-content: space-between;
    padding-top: 0.5rem
}
.modal-filter-chat .footer-filter-chat > .ant-btn {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.modal-filter-chat .footer-filter-chat .ant-space .ant-btn {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}
.modal-filter-chat .ant-menu-submenu-title,
.modal-filter-chat .ant-menu-item.ant-menu-item-only-child {
    margin: 0px;
    height: 38px !important
}
.modal-filter-chat .ant-menu-sub {
    padding-left: 1.5rem !important
}
.modal-filter-chat .ant-menu-inline {
    border-style: none !important;
    background-color: transparent !important
}
.modal-filter-chat .ant-badge .ant-badge-count {
    height: 18px;
    width: 18px;
    min-width: 18px;
    --tw-bg-opacity: 1;
    background-color: rgb(240 54 54 / var(--tw-bg-opacity));
    padding: 0px
}
.modal-filter-chat .ant-skeleton,
.modal-filter-chat .ant-skeleton > span {
    margin-bottom: 0.25rem;
    height: 38px;
    width: 100% !important
}
.search-menu {
    display: flex;
    height: 100%;
    flex-direction: column
}
.search-menu-filter {
    margin-bottom: 0.5rem
}
.search-menu-list {
    height: 100%
}
.search-menu-list .ant-avatar {
    border-style: none
}
.vlist-theme-wrapper {
    height: 100%;
    width: 100%
}
.vlist-theme-wrapper .ant-empty {
    margin: 1rem
}
.vlist-theme-wrapper .spin-loading {
    text-align: center
}
.chat-item {
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border-radius: 8px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
.chat-item:hover {
    cursor: pointer;
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
.chat-item.active {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
.message-chat-item .empty-chat {
    padding: 0.5rem
}

.avatar-chat-item {
    height: 64px;
    width: 64px
}

.avatar-wrapper-chat-item {
    position: relative
}
.avatar-wrapper-chat-item .ant-avatar {
    border-width: 0px
}
.avatar-wrapper-chat-item img {
    position: absolute;
    bottom: 0px;
    right: 0px
}

.info-chat-item {
    display: flex;
    width: 100%;
    min-width: 200px;
    flex-direction: column;
    gap: 0.25rem
}

.row-chat-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem
}
.row-space-chat-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem
}
.row-space-chat-item .ant-tag {
    margin: 0px
}
.name-chat-item {
    display: flex;
    width: 80%;
    align-items: center;
    gap: 0.5rem
}
.name-chat-item .ant-typography {
    margin: 0px !important;
    font-family: Sarabun, sans-serif;
    font-weight: 700
}
.close-chat-item,
.follow-chat-item {
    margin-top: 0.125rem;
    flex-shrink: 0;
    line-height: 0
}
.close-chat-item {
    --tw-text-opacity: 1;
    color: rgb(94 164 36 / var(--tw-text-opacity))
}
.follow-chat-item {
    --tw-text-opacity: 1;
    color: rgb(241 157 67 / var(--tw-text-opacity))
}

.col-chat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem
}

.time-chat-item {
    flex-shrink: 0;
    font-family: Sarabun, sans-serif;
    font-size: 14px;
    line-height: 22px;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}

.message-chat-item {
    margin: 0px !important;
    font-family: Sarabun, sans-serif;
    font-size: 14px;
    line-height: 22px;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.message-chat-item.unread {
    font-weight: 700
}
.unread-chat-item {
    position: relative;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(244 68 68 / var(--tw-bg-opacity));
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 12px;
    line-height: 20px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.tag-chat-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    text-align: left;
    font-size: 12px;
    line-height: 20px
}
.tag-chat-item span {
    margin: 0px
}

.row-space-chat-item .tag-theme span,
.tag-chat-item .group-chat-item .ant-space-item:last-child {
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.group-chat-item {
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 0.25rem;
    padding-right: 0.25rem
}
.agent-chat-item,
.channel-chat-item {
    display: flex;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 0.125rem
}
.agent-chat-item.mine {
    --tw-border-opacity: 1;
    border-color: rgb(100 106 115 / var(--tw-border-opacity))
}
.agent-chat-item > div,
.channel-chat-item > div {
    line-height: 0
}
.agent-chat-item .ant-avatar,
.channel-chat-item .ant-avatar {
    border-width: 0px
}
.agent-chat-item svg,
.channel-chat-item svg {
    height: 18px;
    width: 18px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.inbox-menu {
    position: relative;
    margin-right: 2px;
    width: 450px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.inbox-menu-trigger {
    position: absolute;
    bottom: 5px;
    right: 0.5rem
}
.inbox-menu-trigger.collapsed {
    right: 50%;
    transform: translateX(50%)
}
.inbox-menu-header {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: Sarabun, sans-serif
}
.inbox-menu-header.collapsed .title-inbox-menu-header {
    justify-content: center
}
.inbox-menu-header h5 {
    margin: 0px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(37 37 37 / var(--tw-text-opacity))
}
.title-inbox-menu-header,
.search-inbox-menu-header {
    display: flex;
    height: 32px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem
}
.inbox-menu .ant-menu {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.inbox-menu .ant-menu svg {
    margin-left: -0.125rem;
    font-size: 20px
}
.ant-tooltip-inner .inbox-menu-item-extra {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.inbox-menu-item-extra {
    display: flex;
    width: 100%;
    justify-content: space-between;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.inbox-menu-item-extra p {
    margin: 0px
}
.inbox-menu .ant-menu {
    border-width: 0px !important
}
.inbox-menu .ant-menu-item {
    display: flex;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.inbox-menu .ant-menu-item .anticon {
    min-width: unset
}
.inbox-menu .ant-menu-item.ant-menu-item-selected {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
.inbox-menu .ant-menu-item:hover .inbox-menu-item-extra,
.inbox-menu .ant-menu-item.ant-menu-item-selected .inbox-menu-item-extra {
    --tw-text-opacity: 1;
    color: rgb(37 37 37 / var(--tw-text-opacity))
}
.inbox-menu .ant-menu-item:hover .ant-menu-item-icon {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.inbox-menu .ant-menu-item.ant-menu-item-selected .ant-menu-item-icon {
    --tw-text-opacity: 1;
    color: rgb(241 157 67 / var(--tw-text-opacity))
}
.inbox-menu .ant-menu-item .ant-menu-title-content {
    --tw-text-opacity: 1;
    color: rgb(37 37 37 / var(--tw-text-opacity))
}
.inbox-menu .ant-menu-item-disabled:hover .inbox-menu-item-extra {
    color: rgb(37 37 37 / 0.25)
}
.inbox-menu .ant-menu-item-disabled svg {
    color: rgb(37 37 37 / 0.25)
}
.inbox-menu .ant-menu-item-disabled .inbox-menu-item-extra {
    color: rgb(37 37 37 / 0.25)
}
.empty-chat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
.avatar-empty-chat .ant-skeleton-avatar {
    height: 50px !important;
    width: 50px !important
}
.info-empty-chat {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.25rem
}
.row-empty-chat {
    display: flex;
    width: 100%;
    gap: 0.5rem
}
.empty-chat-item .ant-skeleton.skeleton-full,
.empty-chat-item .ant-skeleton-input.skeleton-full {
    width: 100% !important
}
.row-info-empty-chat {
    width: 100%
}
.row-info-empty-chat:first-child {
    display: flex;
    justify-content: space-between
}
._button-select-search-type_3ukz0_1 {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  border-radius: 0.25rem;
}

._button-search-active_3ukz0_5 {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(100 106 115 / var(--tw-border-opacity));
}

._search-results_3ukz0_9 {
  margin-top: 0.75rem;
  display: flex;
  height: 60vh;
  min-height: 0px;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
  padding-right: 0.375rem;
}

._container-user-setting-modal_3ukz0_13 ._ant-modal-body_3ukz0_13 {
  display: flex;
  flex-direction: column;
  height: 75vh;
  min-height: 0;
}

._container-user-setting-modal_3ukz0_13 ._tag-theme_3ukz0_20 span {
  max-width: unset;
}

._container-empty-search_3ukz0_24 {
  display: flex;
  height: 100%;
  min-height: 0px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

._list-result-header_3ukz0_28 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

._search-item_3ukz0_32 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
._card-search-item-title_3ukz0_35 {
  display: flex;
  gap: 0.5rem;
  vertical-align: baseline;
}

._card-search-item-title-name_3ukz0_39 {
  margin: 0px !important;
  display: flex;
  gap: 0.5rem;
  font-family: Sarabun, sans-serif;
  font-weight: 700;
}

._card-search-item-avatar_3ukz0_43 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

._card-search-sub-item_3ukz0_47 {
  margin: 0.5rem;
}

._search-sub-item_3ukz0_51 {
  margin-bottom: 0.25rem;
  display: flex;
  cursor: pointer;
  justify-content: space-between;
  border-radius: 0.375rem;
  padding: 0.5rem;
}

._search-sub-item_3ukz0_51:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

._search-sub-item_3ukz0_51 ._export-icon_3ukz0_55 {
  display: none;
}
._search-sub-item_3ukz0_51:hover ._export-icon_3ukz0_55 {
  display: inline-block;
}
._search-sub-item_3ukz0_51:hover ._time-chat-item_3ukz0_61 {
  display: none;
}

._collapse-panel_3ukz0_65 {
  margin-bottom: 0.5rem;
  padding: 0px;
}

/* Custom styles antd */
.search-custom-collapse .ant-collapse-item .ant-collapse-content > .ant-collapse-content-box {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  padding: 0.5rem;
}
.search-custom-header .ant-collapse-item .ant-collapse-header {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  padding: 0.5rem;
}

/* text search area */

._text-search-area_3ukz0_79 {
  width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._active-search-sub-item_3ukz0_83 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

._date-search-area_3ukz0_87 {
  display: flex;
  width: 15%;
  justify-content: flex-end;
}

._time-chat-item_3ukz0_61 {
  flex-shrink: 0;
  font-family: Sarabun, sans-serif;
  font-size: 14px;
  line-height: 22px;
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity));
}

/* load more area */
._load-more-area_3ukz0_96 {
  margin: 0.5rem;
}
._load-more-text_3ukz0_99 {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  cursor: pointer;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  padding: 0.5rem;
}
._load-more-text_3ukz0_99:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

._loading-container_3ukz0_103 {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

._loading-container-next-page_3ukz0_107 {
  display: flex;
  height: 2.5rem;
  width: 100%;
  align-items: center;
  justify-content: center;
}

._search-results-contacts_3ukz0_111 {
  height: 100%;
  position: relative;
}


._contact-item-wrapper_3ukz0_117 {
  width: 100%;
  padding-right: 0.375rem;
}

._tag-theme_3ukz0_20 span {
  max-width: 100%; /* ตัวอย่าง Tailwind utilities */
}.chat-area-infinite {
    display: flex;
    flex-direction: column-reverse
}
.chat-area-infinite-list .rc-virtual-list-holder-inner {
    display: flex;
    flex-direction: column-reverse !important
}
.date-message {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: center
}
.date-message span {
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(226 226 226 / var(--tw-bg-opacity));
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 14px;
    line-height: 22px;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
/* Chat Input */
.chat-input {
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 0.5rem;
    padding-bottom: 1rem;
    box-shadow: 0px 0px 3.5px 0px #44444433
}
.chat-input-content {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: 0.75rem;
    border-radius: 0.375rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem
}
.inform-chat-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    --tw-text-opacity: 1;
    color: rgb(37 37 37 / var(--tw-text-opacity))
}
.inform-chat-input-spacer {
    display: flex;
    width: 100%;
    justify-content: space-between
}
.inform-chat-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px
}
.inform-chat-input-extra {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    text-align: left
}
.inform-chat-input-extra .ant-btn {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
.inform-overduedate-input-extra {
    flex-shrink: 0;
    font-weight: 600;
    line-height: 0;
    --tw-text-opacity: 1;
    color: rgb(240 54 54 / var(--tw-text-opacity))
}
.inform-overduedate-input-extra svg {
    font-size: 22px
}
.inform-chat-input-popover {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem
}
.inform-chat-input-popover.finish {
    display: flex;
    min-height: 200px;
    width: 350px;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem
}
.inform-chat-input-popover .ant-space {
    justify-content: flex-end
}
.inform-chat-input-popover .inform-finish-radio,
.inform-chat-input-popover .inform-finish-radio > div,
.inform-chat-input-popover .inform-finish-radio .ant-space-item,
.inform-chat-input-popover .inform-finish-radio .ant-space-item > label {
    width: 100%
}
.inform-chat-input-popover .ant-radio-wrapper {
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
.inform-chat-input-popover .ant-radio-wrapper.ant-radio-wrapper-checked {
    --tw-border-opacity: 1;
    border-color: rgb(241 157 67 / var(--tw-border-opacity))
}
.button-chat-input-popover {
    display: flex;
    gap: 0.5rem
}
.button-chat-input-popover .ant-btn {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}
.inform-chat-input p {
    margin: 0px
}
.inform-chat-input-timer {
    margin-left: 0.25rem;
    display: inline-block;
    width: 50px
}
.inform-chat-input-timer .ant-statistic-content {
    display: contents
}
.inform-chat-input-timer .ant-statistic-content-value {
    display: contents;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity))
}
.inform-chat-input-timer-add {
    margin-left: 0.25rem;
    gap: 0.25rem;
    border-style: none;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(23 119 237 / var(--tw-text-opacity))
}
.inform-chat-input-timer-add:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity)) !important
}
.inform-chat-input-text {
    display: flex;
    align-items: center
}
.inform-chat-input-text span img {
    margin-top: -0.25rem
}
.form-chat-input {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    text-align: left;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.form-chat-input-placeholder-alert .ant-input::-moz-placeholder {
    --tw-text-opacity: 1 !important;
    color: rgb(240 54 54 / var(--tw-text-opacity)) !important
}
.form-chat-input-placeholder-alert .ant-input::placeholder {
    --tw-text-opacity: 1 !important;
    color: rgb(240 54 54 / var(--tw-text-opacity)) !important
}
.form-chat-input > .ant-upload-wrapper {
    width: 100%
}
.form-chat-input > .ant-upload-wrapper > .ant-upload-drag > .ant-upload-btn {
    padding: 0px
}
.form-chat-input > .ant-upload-wrapper > .ant-upload-drag > .ant-upload-btn .ant-upload {
    display: inline-block;
    height: -moz-fit-content;
    height: fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0px
}
.form-chat-input textarea,
.form-chat-input textarea:focus {
    border-style: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none
}
.form-chat-input:hover:has(textarea:not(:disabled)),
.form-chat-input:has(textarea:focus) {
    --tw-border-opacity: 1;
    border-color: rgb(37 37 37 / var(--tw-border-opacity))
}
.form-chat-input:has(textarea:disabled) .form-chat-input-suffix {
    background-color: rgb(37 37 37 / var(--tw-bg-opacity));
    --tw-bg-opacity: 0.04
}
.form-chat-input .form-chat-input-suffix {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem
}
.form-chat-input .form-chat-input-suffix .form-chat-input-send-button:not(:disabled) {
    --tw-text-opacity: 1;
    color: rgb(23 119 237 / var(--tw-text-opacity))
}
/* Chat Input Attach */
.inform-chat-input-wrapper {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    overflow: hidden
}
.inform-chat-input-wrapper .ant-skeleton {
    width: 100%
}
.inform-chat-input-wrapper .ant-skeleton .ant-skeleton-input {
    display: block;
    width: 100%
}
.attach-chat-input {
    position: relative;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem
}
.attach-chat-input .ant-upload-wrapper {
    height: 24px;
    width: 24px;
    line-height: 1
}
.attach-chat-input .ant-upload-wrapper .ant-upload {
    height: 24px;
    width: 24px;
    padding: 0px
}
.picker-wrapper-emoji {
    position: absolute;
    bottom: 130%;
    left: 64%;
    z-index: 999
}
.picker-wrapper-stickers {
    position: absolute;
    bottom: 130%;
    left: 84%;
    z-index: 999
}
.stickers-popup {
    height: 400px;
    width: 500px;
    overflow: hidden;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 8px
}
/* Right Side Panel */
.chat-info-tabs.active .ant-tabs-content-holder {
    height: 100%;
    overflow-y: scroll
}
.chat-info-tabs.active .ant-tabs-content {
    height: 100%
}
.chat-info-tabs.active .ant-tabs-tabpane {
    height: 100%
}
.chat-info-tabs .ant-tabs-nav {
    display: none
}
.chat-info-tabs .ant-tabs-content-holder {
    border-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity))
}
.item-chat-info {
    display: flex;
    height: 100%;
    width: 300px;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    font-weight: 600
}
/* Chat Area */
.chat-area {
    display: flex;
    height: 100vh;
    flex-direction: column-reverse;
    gap: 0.25rem;
    overflow-y: auto;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
    padding: 0.5rem;
}

.chat-area *::-webkit-scrollbar {
    width: 4px !important;
    height: 4px;
}

.chat-area-loading {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

._modalStickers_f9waa_1 {
    display: grid;
    height: 312px;
    width: 486px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden
}
._modalStickersMenu_f9waa_4 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem
}
._noStickers_f9waa_7 {
    display: flex;
    height: 318px;
    width: 486px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 22px;
    --tw-text-opacity: 1;
    color: rgb(37 37 37 / var(--tw-text-opacity))
}

/* Sticker Menu */
._buttonStickersMenu_f9waa_12 {
    height: 56px;
    width: 100%;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-width: 0px;
    border-bottom-width: 2px;
    border-style: solid;
    border-color: transparent;
    background-image: linear-gradient(to bottom right,#f9fafb,#f9fafb);
    padding: 8px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms
}
._buttonStickersMenu_f9waa_12:hover,
._buttonStickersMenu_f9waa_12:focus,
._buttonStickersMenuSelected_f9waa_17 {
    border-width: 0px;
    border-bottom-width: 2px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(241 157 67 / var(--tw-border-opacity));
    background-image: linear-gradient(to bottom right,#fffbed,#fffbed)
}
._imgStickersMenu_f9waa_20 {
    height: 100%;
    width: 100%;
    border-radius: 0.5rem;
    -o-object-fit: contain;
       object-fit: contain;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms
}
._group_f9waa_1:hover ._imgStickersMenu_f9waa_20 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
._lineMenu_f9waa_23 {
    height: 1px;
    width: 100%;
    border-width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(226 226 226 / var(--tw-bg-opacity))
}

/* Sticker */
._buttonStickers_f9waa_12 {
    aspect-ratio: 1 / 1;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 6px;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    background-image: linear-gradient(to bottom right,#f9fafb,#f9fafb);
    padding: 8px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms
}
._buttonStickers_f9waa_12:hover {
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(241 157 67 / var(--tw-border-opacity));
    background-image: linear-gradient(to bottom right,#FFFBED,#FFFBED)
}
._imgStickers_f9waa_20 {
    height: 100%;
    width: 100%;
    border-radius: 0.5rem;
    -o-object-fit: contain;
       object-fit: contain;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms
}
._group_f9waa_1:hover ._imgStickers_f9waa_20 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.content-message-template {
    display: flex;
    height: 60vh;
    gap: 0.5rem;
    overflow-y: auto
}
.left-message-template,
.right-message-template {
    display: flex;
    width: 50%;
    flex-direction: column
}
.left-message-template .list-menu-messages {
    padding-left: 0px;
    padding-right: 0px
}
.right-message-template {
    display: flex;
    width: 50%;
    flex-direction: column;
    overflow: auto;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
}
.title-message-template {
    width: 100%;
    border-width: 0px;
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-weight: 600
}
.example-message-template {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: auto;
    padding: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}
.item-example-message-template {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: right;
    font-family: Sarabun, sans-serif
}
.action-message-template {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem
}
.item-menu-messages {

    position: relative
}

.item-menu-messages .ant-collapse {

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.item-menu-messages .ant-collapse .ant-input {

    font-family: Sarabun, sans-serif
}
.item-menu-messages .ant-collapse-header-text {

    display: flex;

    height: 45px;

    align-items: center;

    text-align: left
}
.item-menu-messages .ant-collapse-content-box {

    padding: 0px !important
}
.item-menu-messages .ant-collapse-header {

    display: flex;

    align-items: center !important;

    justify-content: center;

    padding: 0px !important
}
.item-menu-messages .ant-collapse-header .ant-collapse-expand-icon {

    padding-right: 0.25rem !important;

    padding-left: 0.75rem !important
}
.item-menu-messages .ant-input {

    width: 100%
}
.item-menu-messages .header-item-menu-messages {

    width: 225px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap
}
.item-menu-messages .footer-item-menu-messages {

    display: flex;

    height: 45px;

    width: 100%;

    align-items: center;

    justify-content: flex-start;

    padding-left: 0.5rem;

    padding-right: 0.5rem;

    text-align: left
}
.item-menu-messages .footer-item-menu-messages .ant-space-item:first-child {

    width: 100%
}
.item-menu-messages .footer-item-menu-messages .ant-space-item:last-child {

    display: flex
}
.item-menu-messages .footer-item-menu-messages .ant-space-item:last-child .ant-space-item:last-child .ant-btn {

    --tw-text-opacity: 1;

    color: rgb(94 164 36 / var(--tw-text-opacity))
}
.action-menu-messages {

    position: absolute;

    top: 0px;

    right: 9px;

    display: flex;

    gap: 0.25rem;

    transform: translateY(50%)
}
.item-sub-item-menu-messages {
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    border-width: 0px;
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 2rem;
    padding-right: 0.5rem
}
.item-sub-item-menu-messages:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
}
.item-sub-item-menu-messages.active {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
}
.content-item-menu-messages {
    display: flex;
    gap: 0.5rem
}

.drag-item-menu-messages {
    cursor: move
}

.value-item-menu-messages {
    width: 175px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    line-height: 1.5rem
}
.action-item-menu-messages {
    display: flex;
    gap: 0.25rem
}
.messages {
    display: flex;
    height: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.emtpy-select-messages {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center
}.menu-messages {
    display: flex;
    width: 320px;
    flex-shrink: 0;
    flex-direction: column;
    border-width: 0px;
    border-right-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity))
}
.header-menu-messages {
    margin-top: 0.25rem;
    display: flex;
    justify-content: space-between;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem
}
.header-menu-messages h2 {
    font-weight: 700
}
.header-menu-messages .ant-btn {
    border-radius: 4px
}
.search-menu-messages {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
.list-menu-messages {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem
}
.list-menu-messages .ant-empty {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center
}
.modal-input-group-messages {
  /* @apply bg-colors-theme; */
}
.modal-input-group-messages .ant-modal-title {
  border-width: 0px;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  padding-bottom: 0.5rem
}
.modal-input-group-messages .ant-input {
  font-size: 14px;
  line-height: 22px
}
.modal-input-group-messages .ant-space {
  width: 100%;
  justify-content: flex-end;
  padding-top: 0.5rem
}
.modal-input-group-messages .ant-space .ant-btn {
  font-size: 14px;
  line-height: 22px
}
.info-messages {
    display: flex;
    width: 100%;
    flex-direction: column
}
.title-info-messages {
    margin-top: 0.5rem
}
.title-info-messages h2,
.title-info-messages > span > span {
    font-weight: 700
}

.info-messages-card {
    margin: 0.5rem;
    width: 100%;
    flex: 1 1 0%
}
.info-messages-card .ant-card-head {
    padding: 1rem
}
.info-messages-card .ant-card-body {
    height: 93%;
    width: 100%;
    border-width: 1px;
    padding: 1rem
}
.message-card-container {
    display: flex;
    height: 100%;
    gap: 1rem
}
.message-card-left {
    width: 30%
}
.message-card-right {
    width: 70%
}
.message-card-left-gap-step-1 {
    margin-top: 0px
}
.message-card-left-gap-step-2 {
    margin-top: 20px
}
.platform-tabs {
    display: flex;
    width: 100%;
    align-items: center
}

.platform-button {
    display: flex;
    height: 2.25rem;
    width: 49%;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-left: 0.75rem;
    padding-right: 0.75rem
}
.platform-button.round-left {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem
}
.platform-button.round-right {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem
}
.platform-button.active {
    --tw-border-opacity: 1;
    border-color: rgb(37 37 37 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.title-info-messages,
.input-info-messages {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-left: 1rem;
    padding-right: 1rem
}
.input-info-messages > * {
    width: 33.333333%;
    font-family: Sarabun, sans-serif
}
.input-info-messages .ant-checkbox-wrapper {
    display: flex;
    align-items: center
}
.menu-info-messages,
.menu-info-messages .ant-tabs-content,
.menu-info-messages .ant-tabs-tabpane {
    height: 98.7%
}
.menu-info-messages .ant-tabs-nav {
    margin: 0px
}
.menu-info-messages .ant-tabs-tab {
    margin: 0px !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem
}

.channel-tabs {
    width: 100%;
    align-items: center
}
.platform-channel-container {
    display: flex;
    flex-direction: column;
    gap: 12px
}
.template-setting-container {
    margin-top: -7px
}
.select-platform-container {
    margin-top: -2px;
    width: 102%
}
.select-channel-container {
    margin-top: -2px
}
.chat-nav {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 0.5rem
}
.chat-nav .ant-btn {
    gap: 0.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem
}
.chat-nav .button-tabs {
    width: 40px
}
.left-chat-nav {
    display: flex;
    align-items: center;
    gap: 0.375rem
}
.right-chat-nav {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem
}
.right-chat-nav .ant-btn.onFollow .ant-btn-icon {
    --tw-text-opacity: 1;
    color: rgb(241 157 67 / var(--tw-text-opacity))
}
.right-chat-nav button:last-child {
    width: 32px
}
.chat-nav-search {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.5rem
}
.chat-nav-search > div {
    display: flex;
    width: 100%;
    gap: 0.5rem
}
.chat-nav-search > div input,
.chat-nav-search > div .ant-picker-input input,
.chat-nav-search > div .ant-select-selection-placeholder {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400
}
.chat-nav-search .chat-nav-search-input .ant-btn {
    width: 32px
}
.chat-nav-search .chat-nav-search-input-filter > div {
    width: 100%;
    max-width: 250px;
    text-align: left;
    font-size: 14px;
    line-height: 22px
}
.chat-nav-search-result-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.5rem
}
.chat-nav-search-result-item {
    width: 100%;
    cursor: pointer;
    border-radius: 0.375rem
}
.chat-nav-search-result-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
.chat-nav-search-result-item .content-chat-message {
    background-color: transparent
}
.chat-nav-search-agent {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    line-height: 22px
}
.chat-nav-search-agent .ant-badge-dot {
    bottom: 0px;
    top: unset;
    right: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(130 202 72 / var(--tw-bg-opacity));
    transform: translateY(-20%)
}
.client-info {
    display: flex;
    height: 100%;
    width: 300px;
    flex-shrink: 0;
    flex-direction: column;
    overflow-y: auto;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.client-info .ant-tabs-nav {
    margin-left: 0.5rem;
    margin-bottom: 0.5rem
}
.client-info-collapse {
    height: 100%;
    width: 100%;
    border-style: none;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.client-info-collapse .ant-collapse-item {
    border-style: none
}
.client-info-collapse .ant-collapse-item .ant-collapse-expand-icon {
    padding-right: 0.25rem !important;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.client-info-collapse .ant-collapse-item .ant-collapse-header {
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.75rem;
    text-align: left;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.client-info-collapse .ant-collapse-item .ant-collapse-header .ant-btn {
    gap: 0.25rem;
    padding: 0.375rem
}
.client-info-collapse .ant-collapse-item .ant-collapse-content-box {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important
}
.client-info-collapse .ant-collapse-item:not(:first-child) .ant-collapse-content-box {
    padding-top: 0px !important
}
.client-info-collapse.nested .ant-collapse-content-box {
    padding: 0px !important
}
.client-info-collapse .ant-collapse-item .ant-row {
    margin: 0px !important
}
.client-info-collapse .ant-collapse-item .ant-col {
    padding: 0px !important
}

.client-info .general-client-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-width: 0px;
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding: 0.5rem;
    padding-top: 1rem
}
.client-info .general-client-info .ant-descriptions-item-content {
    position: relative
}
.client-info .general-client-info .ant-descriptions .ant-typography:first-child {
    position: relative;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-family: Sarabun, sans-serif
}
.client-info .general-client-info .ant-descriptions-item-content .ant-btn {
    pointer-events: none;
    opacity: 0
}
.client-info .general-client-info .ant-descriptions-item-content:hover .ant-btn {
    pointer-events: auto;
    opacity: 1
}
.client-info .general-client-info .general-client-info-description .ant-descriptions-item-label {
    min-width: 100px;
    font-family: Sarabun, sans-serif
}
.client-info .general-client-info .general-client-info-description td {
    padding-bottom: 0.25rem
}
.client-info .general-client-info .general-client-info-description .ant-typography-copy {
    line-height: 0;
    --tw-text-opacity: 1 !important;
    color: rgb(100 106 115 / var(--tw-text-opacity)) !important
}
.client-info .title-general-client-info {
    display: flex;
    justify-content: space-between;
    border-width: 0px;
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-bottom: 0.75rem
}
.client-info .title-general-client-info button {
    padding: 0px;
    transform: translate(0%,0%)
}
.client-info .avatar-general-client-info {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    text-align: left
}
.client-info .avatar-general-client-info .ant-image {
    flex-shrink: 0
}
.client-info .avatar-general-client-info img,
.client-info .avatar-general-client-info .ant-image-mask {
    border-radius: 9999px
}
.client-info .avatar-general-client-info .name-general-client-info {
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400
}
.client-info .avatar-general-client-info .name-general-client-info .name-input {
    width: 100%
}
.client-info .avatar-general-client-info .name-general-client-info .name-input div:has(> input) {
    margin-bottom: 0.25rem;
    margin-left: 0.25rem;
    border-radius: 0px;
    border-width: 0px;
    border-bottom-width: 1px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0.25rem
}
.client-info .avatar-general-client-info .name-general-client-info .name-input .ant-col .ant-row {
    margin: 0px
}
.client-info
  .avatar-general-client-info
  .name-general-client-info
  .name-input
  .editable-text-edit-action {
    padding: 0px;
    padding-right: 0.25rem
}
.client-info
  .avatar-general-client-info
  .name-general-client-info
  .name-input
  .editable-text-display {
    margin-bottom: 0.25rem;
    border-radius: 0px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    padding: 0px;
    padding-left: 0.25rem
}
.client-info .avatar-general-client-info .name-general-client-info .name-input p {
    margin-bottom: 0.25rem
}
.client-info .avatar-general-client-info .name-general-client-info .name-input input,
.client-info .avatar-general-client-info .name-general-client-info .name-input textarea {
    padding: 0px;
    font-family: Sarabun, sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400
}
.client-info .avatar-general-client-info .name-general-client-info span {
    line-height: 1
}
.client-info .data-general-client-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400
}
.client-general-more-dropdown .ant-dropdown-menu {
    padding: 0.5rem
}
.client-general-more-dropdown .ant-dropdown-menu-item {
    padding: 0.5rem !important
}
.client-general-more-dropdown .ant-dropdown-menu-item svg {
    height: 18px;
    width: 18px
}
.client-info .activity-client-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}
.client-info .activity-client-info .ant-card-body {
    padding: 0.5rem;
    text-align: left;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400
}
.client-info .activity-client-info img {
    height: 60px;
    width: 80px;
    border-radius: 0.125rem
}
.client-info .activity-client-info .col-activity-client-info {
    display: flex;
    align-items: center;
    gap: 0.5rem
}
.client-info .activity-client-info .type-activity-client-info {
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.client-info .activity-client-info .text-activity-client-info {
    font-size: 10px;
    line-height: 18px;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.client-info .activity-client-info .title-activity-client-info {
    font-size: 12px;
    line-height: 20px;
    font-weight: 700
}
.client-info .activity-client-info .sale-activity-client-info {
    font-size: 12px;
    line-height: 20px
}.client-info .contact-client-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left
}
.client-info .label-client-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.client-info .label-client-info button {
  text-align: left;
  --tw-text-opacity: 1;
  color: rgb(241 157 67 / var(--tw-text-opacity));
}
.client-info .select-label-client-info {
  width: 100%;
  text-align: left;
}
.client-info .select-label-client-info > input {
  font-family: 'Sarabun', sans-serif;
}
.client-info .select-label-client-info .ant-select-selection-placeholder {
  font-family: 'Sarabun', sans-serif;
  font-weight: 300}
.ant-select-item-empty:has(.button-add-tag-client-info) {
  padding: 0px;
}.modal-label-setting .ant-modal-header div {
    font-size: 20px;
    line-height: 28px
}
.modal-label-setting .ant-modal-content {
    padding: 1rem
}
.modal-label-setting .ant-divider {
    margin-top: 1rem;
    margin-bottom: 1rem
}
.modal-label-setting .search-label-setting {
    margin-bottom: 1rem
}
.modal-label-setting .search-label-setting input {
    font-family: Sarabun, sans-serif
}
.modal-label-setting .add-label-setting {
    margin-top: 0.75rem
}
.modal-label-setting .remove-label-setting {
    margin-bottom: 0.75rem
}
.table-label-setting .ant-table {
    overflow: hidden;
    border-radius: 0.375rem
}
.table-label-setting .row-label-setting:hover td {
    --tw-bg-opacity: 1;
    background-color: rgb(251 251 251 / var(--tw-bg-opacity))
}
.table-label-setting .ant-table-selection-extra {
    display: none
}
.note-client-info .button-note-client-info {
    margin-bottom: 0.5rem;
    width: 100%;
    justify-content: flex-start;
    text-align: left
}
.note-client-info input {
    font-family: Sarabun, sans-serif
}
.note-client-info .ant-list-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}
.note-client-info .ant-card-body {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    text-align: left;
    font-weight: 400
}
.note-client-info .time-note-client-info {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-width: 0px;
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
    padding-bottom: 0.5rem
}
.note-client-info .time-note-client-info img {
    margin-top: -0.125rem
}
.note-client-info .author-note-client-info {
    display: flex;
    align-items: center;
    justify-content: space-between
}
.note-client-info .author-note-client-info .ant-btn {
    width: -moz-fit-content;
    width: fit-content;
    padding: 0px
}
.note-client-info mark {
    background-color: transparent;
    font-weight: 700
}
.form-note-client-info {
    margin-bottom: 0.5rem;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: left
}
.form-note-client-info textarea {
    margin: 0px;
    margin-top: 0.5rem;
    outline-width: 0px;
    box-shadow: none
}
.form-note-client-info .button-form-note-client-info {
    margin-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem
}
.client-info .select-container-tag-client-info {
  position: relative;
}
.ant-dropdown.dropdown-tag-client-info > ul {
  max-height: 350px;
  overflow-y: auto;
}
.client-info .select-container-tag-client-info > input {
  font-family: 'Sarabun', sans-serif;
}
.client-info .select-container-tag-client-info > .placeholder-select {
  position: absolute;
  top: 10px;
  left: 0.75rem;
  z-index: 1;
  font-weight: 100;
  --tw-text-opacity: 1;
  color: rgb(37 37 37 / var(--tw-text-opacity));
  opacity: 0.3;
}
.client-info .select-tag-client-info {
  pointer-events: auto !important;
  z-index: 2;
  margin-bottom: 0.5rem;
  width: 100%;
  text-align: left;
}
.client-info .select-tag-client-info .ant-select-selector {
  background-color: transparent;
}
.client-info .select-tag-client-info .ant-select-selection-item {
  display: none;
}
.client-info .select-tag-client-info .ant-select-selection-placeholder {
  font-family: 'Sarabun', sans-serif;
}
.client-info .tag-client-info .tag-list-client-info {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
.client-info .tag-list-client-info .tag-item-client-info {
  margin: 0px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.125rem !important;
  border-radius: 0.375rem !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity)) !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  font-size: 12px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(100 106 115 / var(--tw-text-opacity)) !important;
}
.client-info .tag-list-client-info .tag-item-client-info .ant-btn {
  margin: 0px;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0px;
}
.client-info .tag-list-client-info .tag-item-client-info .ant-tag-close-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(401%) hue-rotate(169deg) brightness(91%) contrast(87%);
}
.button-add-tag-client-info {
  width: 100%;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(241 157 67 / var(--tw-bg-opacity)) !important;
  font-family: Sarabun, sans-serif;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}
.ant-select-dropdown {
  pointer-events: auto !important;
}
.chat-activity .vlist-theme-wrapper > div {
    justify-content: flex-start;
    gap: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem
}
.chat-activity .chat-activity-item {
    margin-bottom: 0.5rem;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding: 0.5rem;
    text-align: left;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400
}
.chat-activity .chat-activity-item > span > span {
    font-weight: 600
}
.chat-activity .chat-activity-item span {
    font-family: Sarabun, sans-serif
}
.chat-activity .chat-activity-item .date-chat-activity-item {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.chat-activity .chat-activity-item .avatar-chat-activity-item {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 14px;
    line-height: 22px
}
.client-info .ant-tabs-content-holder .ant-tabs-content,
.client-info .ant-tabs-content-holder .ant-tabs-content .ant-tabs-tabpane-active {
    height: 100%
}
._search-chat-message-header_dqu7s_1 {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.75rem;

    padding-bottom: 0px;

    text-align: left;

    font-weight: 600;

    --tw-text-opacity: 1;

    color: rgb(100 106 115 / var(--tw-text-opacity))
}

/* .search-chat-message-container{
  @apply bg-teal-300
} */

._search-chat-message-input_dqu7s_9 {

    padding: 0.625rem;

    padding-top: 0px
}

._search-chat-tabs_dqu7s_13 {

    padding: 0.25rem
}

._search-chat-message-content_dqu7s_17 {

    height: 75vh;

    overflow: auto;

    padding: 0.75rem
}

._search-chat-item-container_dqu7s_21 {

    margin-bottom: 0.5rem
}

._search-chat-item_dqu7s_21 {

    margin-bottom: 0.5rem;

    display: flex;

    cursor: pointer;

    align-items: center;

    justify-content: space-between;

    border-radius: 0.375rem;

    padding: 0.625rem;

    font-family: Sarabun, sans-serif
}

._search-chat-item_dqu7s_21:hover {

    --tw-bg-opacity: 1;

    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}


._search-chat-item-empty_dqu7s_30 {

    display: flex;

    height: 100%;

    width: 100%;

    align-items: center;

    justify-content: center
}

._search-chat-item-content_dqu7s_34 {

    display: flex;

    width: 80%;

    flex-direction: column
}

._search-chat-item-header_dqu7s_38 {

    display: flex;

    align-items: center;

    justify-content: space-between
}

._search-chat-item-message_dqu7s_42 {

    width: 70%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-align: start;

    --tw-text-opacity: 1;

    color: rgb(100 106 115 / var(--tw-text-opacity))
}

._search-chat-item-time_dqu7s_46 {

    --tw-text-opacity: 1;

    color: rgb(100 106 115 / var(--tw-text-opacity))
}

._search-chat-item-profile_dqu7s_50 {

    font-weight: 700
}.container-contact {
    height: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 1rem
}
.title-contact {
    width: 100%;
    padding-bottom: 0.5rem;
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700
}
.subtitle-contact {
    padding-bottom: 0.5rem;
    text-align: left
}
.action-contact {
    display: flex;
    justify-content: space-between
}
.left-action-contact {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem
}
.right-action-contact .table-more {
    height: 100%;
    justify-content: center
}
.filter-tag-contact .ant-checkbox-wrapper,
.filter-other-contact .ant-checkbox-wrapper {
    width: 100%
}
.filter-tag-contact .ant-card-body,
.filter-other-contact .ant-card-body {
    display: flex;
    width: 250px;
    flex-direction: column
}
.filter-tag-contact .ant-card-body span,
.filter-other-contact .ant-card-body span,
.table-more-contact .ant-card-body span {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem
}
.filter-tag-contact .ant-divider,
.filter-other-contact .ant-divider {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important
}
.table-contact {
    margin-top: 1rem
}
.table-contact .ant-table-cell {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important
}
.table-contact .row-table-contact:hover {
    cursor: pointer;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
}
.table-contact .row-table-contact:hover .button-avatar-contact .ant-btn {
    display: block
}
.table-contact .avatar-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem
}
.table-contact .button-avatar-contact .ant-btn {
    display: none;
    padding-left: 1.25rem;
    padding-right: 1.25rem
}
.table-contact .button-avatar-contact .ant-btn:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(226 226 226 / var(--tw-bg-opacity)) !important
}
.table-contact .wrapper-avatar-contact {
    position: relative
}
.table-contact .wrapper-avatar-contact > img {
    position: absolute;
    bottom: 1px;
    right: 0px
}
.table-contact .name-avatar-contact {
    display: flex;
    flex-direction: column
}
.table-contact .name-avatar-contact span {
    font-size: 12px;
    line-height: 20px;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.table-contact .status-contact {
    display: flex;
    align-items: center;
    gap: 0.25rem
}
.table-contact .status-contact.verified {
    --tw-text-opacity: 1;
    color: rgb(94 164 36 / var(--tw-text-opacity))
}
.table-contact .status-contact.unverified {
    --tw-text-opacity: 1;
    color: rgb(241 157 67 / var(--tw-text-opacity))
}
.table-contact .status-contact.logout {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.table-contact .tag-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem
}
.table-contact .tag-contact .ant-select {
    width: 100%
}
.table-contact td.ant-table-cell:first-child {
    border-inline-end-width: 1px !important
}
.tag-contact-more {
    display: flex;
    flex-direction: column;
    gap: 0.25rem
}
.table-contact .tag-contact .ant-select-selector {
    cursor: auto !important;
    border-style: none;
    background-color: transparent !important
}
.table-contact .tag-contact .ant-select-arrow {
    display: none
}
.table-contact .tag-contact .item-tag-contact {
    border-radius: 19px;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem
}
.table-contact .tag-theme {
    padding-bottom: 0.125rem
}
.table-contact .tag-theme span {
    font-family: Sarabun, sans-serif;
    font-size: 14px;
    line-height: 22px
}
.drawer-contact .ant-drawer-body {
    padding: 0px
}
.drawer-contact .client-info {
    width: 100%
}
.setting {
    display: flex;
    height: 100%;
    gap: 0.125rem;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
}
.sidebar-setting {
    width: 200px;
    flex-shrink: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: left
}
.sidebar-setting h5 {
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600
}
.list-button-setting {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}
.list-button-setting .ant-btn {
    justify-content: flex-start;
    padding: 0.5rem
}
.list-button-setting .ant-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
.list-button-setting .ant-btn:not(:disabled) {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.list-button-setting .ant-btn.active {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(37 37 37 / var(--tw-text-opacity))
}
.list-button-setting .ant-btn.active svg {
    --tw-text-opacity: 1;
    color: rgb(241 157 67 / var(--tw-text-opacity))
}
.content-setting {
    width: calc(100% - 200px);
    flex: 1 1 0%;
    flex-shrink: 0;
    overflow-y: auto;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 1rem
}
.tabs-setting .ant-tabs-nav {
    display: none
}
.view-setting {
    display: flex;
    flex-direction: column;
    gap: 1rem
}
.header-view-setting {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    font-family: Sarabun, sans-serif
}
.header-view-setting h5 {
    margin: 0px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600
}
.content-view-setting {
    width: 100%
}
.content-view-setting .ant-table-container {
    overflow: hidden
}
.filter-view-setting {
    display: flex;
    gap: 0.5rem
}
.filter-view-setting .ant-btn,
.filter-view-setting .ant-select,
.filter-view-setting .ant-input-affix-wrapper {
    height: 100%;
    text-align: left
}
.user-status-item {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.25rem;

    border-radius: 0.375rem;

    border-width: 1px;

    border-style: solid;

    --tw-border-opacity: 1;

    border-color: rgb(226 226 226 / var(--tw-border-opacity));

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity));

    padding-left: 0.25rem;

    padding-right: 0.25rem;

    padding-top: 1px;

    padding-bottom: 1px;

    --tw-text-opacity: 1;

    color: rgb(100 106 115 / var(--tw-text-opacity))
}

.user-status-item svg {

    height: 15.75px;

    width: 15.75px
}

.user-status-item.active svg {

    --tw-text-opacity: 1;

    color: rgb(94 164 36 / var(--tw-text-opacity))
}
.container-user-setting-modal {
    top: 50px;
    padding: 0px
}
.content-user-setting-modal {
    display: flex;
    gap: 1rem;
    border-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-top: 0.75rem
}

.content-user-setting-modal .ant-checkbox-group .ant-row {
    gap: 0.5rem;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding: 0.75rem
}
.perm-user-setting-modal {
    width: 66.666667%
}
.perm-user-setting-modal .ant-table-thead th:not(:first-child) {
    text-align: center
}
.perm-user-setting-modal .ant-table-cell {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important
}
.perm-user-setting-modal .ant-table-cell .ant-btn {
    margin: auto;
    width: 100%
}
.perm-user-setting-modal .ant-table-cell .ant-btn:not(.active) .ant-btn-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(15%) hue-rotate(208deg) brightness(104%) contrast(100%)
}
.row-sub-user-setting-modal .ant-table-cell:first-child {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important
}
.action-user-setting-modal {
    display: flex;
    gap: 0.5rem;
    border-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
    padding-top: 0.75rem
}
.action-col-user-setting {
    text-align: center !important
}
.livechat-section-view-setting {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding: 1rem
}
.content-view-setting h4 {
    margin: 0px;
    border-width: 0px;
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-bottom: 0.75rem;
    text-align: left;
    font-weight: 600
}
.chat-setting-item {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1rem;
    text-align: left
}
.chat-setting-item .tag-theme {
    margin-left: 0.5rem
}
.chat-setting-item .desc-chat-setting-item {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.chat-setting-item .ant-select-selector {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.select-chat-setting-item {
    min-width: 200px;
    text-align: left
}
.button-add-time-setting {
    pointer-events: none;
    gap: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(23 119 237 / var(--tw-text-opacity))
}
.group-view-modal {
    top: 50px;
    padding: 0px
}
.table-action-group-view-modal {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}
.table-action-group-view-modal .ant-btn {
    gap: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(241 157 67 / var(--tw-text-opacity))
}
.table-action-group-view-modal .ant-btn:hover {
    --tw-text-opacity: 1 !important;
    color: rgb(241 157 67 / var(--tw-text-opacity)) !important
}
.action-group-view-modal {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-top: 0.75rem
}
.group-view-modal .ant-modal-content {
    padding: 1rem
}
.group-view-modal .ant-input {
    font-family: Sarabun, sans-serif
}
.filter-group-view-modal {
    border-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}
.group-view-modal .ant-table-selection-extra {
    display: none
}
.group-view-modal .ant-table-selection-column {
    border-right-width: 0px !important
}
.table-tags-setting .ant-table-selection-extra {
    display: none
}
.table-tags-setting .ant-table-selection-column {
    border-right-width: 0px !important
}
.table-tags-setting .ant-switch {
    --tw-bg-opacity: 1;
    background-color: rgb(226 226 226 / var(--tw-bg-opacity))
}
.table-tags-setting .ant-switch:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(226 226 226 / var(--tw-bg-opacity))
}
.table-tags-setting .ant-switch-checked {
    --tw-bg-opacity: 1;
    background-color: rgb(94 164 36 / var(--tw-bg-opacity))
}
.table-tags-setting .ant-switch-checked:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(94 164 36 / var(--tw-bg-opacity)) !important
}
.tag-manage-modal .ant-modal-content {
    padding: 1rem
}
.filter-tag-manage-modal {
    display: flex;
    gap: 0.75rem;
    border-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}
.filter-tag-manage-modal .ant-btn {
    height: auto
}
.tag-manage-modal .ant-table-selection-extra {
    display: none
}
.tag-manage-modal .ant-table-selection-column {
    border-right-width: 0px !important
}
.table-tag-manage-modal .ant-table-cell:not(:first-child) {
    text-align: center !important
}
.profile-role-placeholder {
    text-align: left
}
._botAppModalUpload_1munm_1 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
._botAppModalUploadButtonContainer_1munm_4 {
  grid-column: span 5 / span 5;
  margin-left: 16px;
  margin-top: 8px;
}
._botAppModalUploadText_1munm_7 {
  margin-top: 8px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity));
}
._botAppImgUrl_1munm_10 {
  height: 96%;
  width: 96%;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  filter: grayscale(0%);
}
._botAppImgUrl_1munm_10:hover {
  filter: grayscale(50%);
}
.iconUpload .ant-upload-wrapper.ant-upload-picture-circle-wrapper {
  height: 74px !important;
  width: 74px !important;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.uploadAlert .ant-upload-wrapper.ant-upload-picture-circle-wrapper {
  height: 74px !important;
  width: 74px !important;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(240 54 54 / var(--tw-border-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.iconUpload .ant-upload-wrapper.ant-upload-picture-circle-wrapper:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(0 0 0 / var(--tw-border-opacity)) !important;
}
.iconUpload .ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload {
  height: 72px !important;
  width: 72px !important;
  border-width: 0px;
}
._botAppModalUploadButton_1munm_4 {
  border-radius: 6px !important;
  border-width: 1px !important;
  border-style: solid !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(226 226 226 / var(--tw-border-opacity)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  font-weight: 400 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
}
._botAppModalUploadButton_1munm_4:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(0 0 0 / var(--tw-border-opacity)) !important;
}
._botAppModalUploadButtonAlert_1munm_35 {
  border-radius: 6px !important;
  border-width: 1px !important;
  border-style: solid !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(240 54 54 / var(--tw-border-opacity)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  font-weight: 400 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(240 54 54 / var(--tw-text-opacity)) !important;
}
._botAppModalUploadButtonAlert_1munm_35:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(240 54 54 / var(--tw-border-opacity)) !important;
}
._modalBotAppUploadAlert_1munm_41 {
  font-family: Sarabun, sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: red;
}
._modalBotAppUploadContentMargin_5bzgt_1 {
    margin-top: 12px
}
._modalBotAppFormsContentMargin_5bzgt_4 {
    margin-top: 4px
}
._modalCredentialContentMargin_7csbb_1 {
    margin-top: 12px
}
._modalCredentialAction_1quq6_1 {
    margin-top: 8px;
    margin-bottom: -4px;
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px
}
._modalCredentialAction_asz30_1 {
    margin-top: 8px;
    margin-bottom: -4px;
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 4px
}
.account-manage {
    height: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-left: 11rem;
    padding-right: 11rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}
.account-manage h2 {
    text-align: left;
    font-size: 30px;
    line-height: 40px;
    font-weight: 600
}
.action-account-manage {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem
}
.action-account-manage .ant-input-affix-wrapper {
    width: auto !important
}
.action-account-manage .ant-btn {
    height: -moz-fit-content !important;
    height: fit-content !important
}
.table-account-manage .ant-table {
    overflow: hidden;
    border-radius: 0.375rem
}
.table-account-manage .ant-table-cell {
    font-family: Sarabun, sans-serif
}
.table-account-manage .ant-table-body {
    overflow: auto !important
}
.table-account-manage .ant-table-cell.ant-table-cell-scrollbar {
    display: none
}
.table-account-manage .ant-table-row {
    cursor: pointer
}
.account-create {
    height: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 1rem;
    text-align: left
}
.form-account-create {
    margin: auto;
    width: 66.666667%;
    max-width: 540px
}
.title-account-create {
    font-size: 30px;
    line-height: 40px;
    font-weight: 600
}
.account-create .ant-table-cell:last-child {
    padding: 0px !important;
    text-align: center
}
.action-account-create {
    display: flex;
    justify-content: flex-end
}
.agent-account-create {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    gap: 0.25rem;
    padding-right: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(241 157 67 / var(--tw-text-opacity))
}
.agent-account-create:hover {
    --tw-text-opacity: 1 !important;
    color: rgb(241 157 67 / var(--tw-text-opacity)) !important
}
.confirm-account-create,
.cancel-account-create {
    margin-top: 1rem;
    width: 100%
}
.header-secondary {

    position: fixed;

    display: flex;

    height: 55px;

    width: 100vw;

    align-items: center;

    justify-content: space-between;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity));

    padding-left: 1rem;

    padding-right: 1rem;

    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.privacy-container {

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity));

    padding-left: 11rem;

    padding-right: 11rem;

    padding-top: 90px
}

.privacy-container h1 {

    text-align: left;

    font-family: Sarabun, sans-serif;

    font-size: 30px;

    line-height: 40px;

    font-weight: 600
}

.privacy-container .typography {

    text-align: left;

    text-indent: 2rem;

    font-family: Sarabun, sans-serif;

    font-size: 16px;

    line-height: 24px
}

.privacy-container .typography .title {

    margin-top: 10px;

    display: flex;

    text-align: left;

    font-family: Sarabun, sans-serif;

    font-weight: 700
}

.privacy-container .typography .bullet {

    margin-top: 10px;

    margin-left: 4rem;

    display: flex;

    text-align: left;

    text-indent: 0px;

    font-family: Sarabun, sans-serif;

    font-weight: 400
}

.privacy-container .typography .bullet .text {

    margin-left: 0.25rem;

    display: flex;

    text-align: left;

    font-family: Sarabun, sans-serif;

    font-weight: 400
}

.privacy-container .typography .title .subtitle {

    display: contents;

    text-indent: 0.25rem;

    font-family: Sarabun, sans-serif;

    font-weight: 400
}

.space-box {

    padding-top: 50px
}
.sidebar {
  position: relative;
  margin-top: 2px;
  height: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(248 248 248 / var(--tw-bg-opacity));
}
.sidebar .ant-layout-sider-children {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: auto;
}
.sidebar.collapsed {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
}
.sidebar .sidemenu-trigger {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.5rem;
  text-align: right;
}
.sidebar .sidemenu-trigger > span {
  align-self: center;
  padding-right: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 14px;
  line-height: 22px;
}
.sidebar .sidemenu-trigger.collapsed {
  align-items: center;
  justify-content: center;
}
.sidebar .sidemenu-trigger.collapsed > span {
  display: none;
}
.sidebar-menu {
  overflow-y: auto;
  overflow-x: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(248 248 248 / var(--tw-bg-opacity));
}
.sidebar-menu::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.sidebar-menu .ant-menu-item,
.sidebar-menu .ant-menu-submenu-title {
  z-index: 1;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  width: 129px;
  padding-left: 0.5rem !important;
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity));
}
.sidebar-menu .ant-menu-item:hover,
.sidebar-menu .ant-menu-submenu-title:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
}
.sidebar-menu .ant-menu-item .ant-menu-submenu-arrow,
.sidebar-menu .ant-menu-submenu-title .ant-menu-submenu-arrow {
  display: none;
}
.sidebar-menu .ant-menu-item-selected {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(37 37 37 / var(--tw-text-opacity));
}
.sidebar-menu .ant-menu-item-selected svg {
  --tw-text-opacity: 1;
  color: rgb(241 157 67 / var(--tw-text-opacity));
}
.sidebar-menu .ant-menu-submenu-title {
  position: relative;
}
.sidebar-menu .ant-menu-submenu-selected > .ant-menu-submenu-title {
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity));
}
.sidebar-menu .ant-menu-submenu-selected > .ant-menu-submenu-title:hover {
  --tw-text-opacity: 1;
  color: rgb(37 37 37 / var(--tw-text-opacity));
}
.sidebar-menu .ant-menu-submenu-title .menu-item > span {
  margin: 0px;
}
.sidebar-menu .ant-menu-submenu-title[aria-expanded='false'] .menu-item > span:not(:first-child) {
  display: none;
}
.sidebar-menu .ant-menu-submenu-title[aria-expanded='true'] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.sidebar-menu .ant-menu-submenu-title[aria-expanded='true'] .menu-item > span:first-child {
  display: none;
}
.sidebar-menu .ant-menu-sub.ant-menu-inline {
  margin-top: -0.75rem;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(248 248 248 / var(--tw-bg-opacity)) !important;
}
.sidebar-menu .ant-menu-submenu.ant-menu-submenu-inline.ant-menu-submenu-open {
  position: relative;
}
.sidebar-menu .ant-menu-submenu-open .ant-menu.ant-menu-sub.ant-menu-inline::after {
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 0.5rem;
  height: 100%;
  width: 129px;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  line-height: 1;
  --tw-content: '';
  content: var(--tw-content);
}

.menu-text {
  font-size: 14px;
  line-height: 22px;
}

.menu-item .anticon {
  font-size: 1.25rem;
  line-height: 1.75rem;
  transition-property: none !important;
}
.menu-item .anticon svg {
  font-size: 18px;
}

.menu-item {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
}

.sidebar.collapsed .ant-menu-title-content {
  height: 100%;
  width: 100%;
}
.sidebar.collapsed .ant-menu-item,
.sidebar.collapsed .ant-menu-submenu-title {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: flex;
  height: 40px;
  width: 40px;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.sidebar.collapsed .ant-menu-item .menu-item,
.sidebar.collapsed .ant-menu-submenu-title .menu-item {
  flex-direction: column;
  justify-content: center;
  gap: 0px;
}
.sidebar.collapsed .ant-menu-item .menu-item .menu-text,
.sidebar.collapsed .ant-menu-submenu-title .menu-item .menu-text {
  display: none;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 20px;
}
.sidebar.collapsed .ant-menu-item .menu-item .anticon,
.sidebar.collapsed .ant-menu-submenu-title .menu-item .anticon {
  line-height: 0.5;
}
.sidebar.collapsed .ant-menu.ant-menu-sub.ant-menu-inline::after {
  width: 40px;
}
.logo {

    display: flex
}

.header {

    z-index: 1;

    display: flex;

    height: 55px;

    align-items: center;

    justify-content: space-between;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity));

    padding-left: 1rem;

    padding-right: 1rem
}

.left {

    display: flex;

    align-items: center
}

.right {

    display: flex;

    align-items: center
}

.right .ant-space-item {

    display: flex;

    align-items: center
}

.right .ant-divider {

    margin: 0px;

    height: 35px
}
.right a {

    line-height: 1
}
.right a svg {

    font-size: 18px;

    --tw-text-opacity: 1;

    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.profile-dropdown-menu .ant-dropdown-menu {
    padding: 0px
}
.profile-dropdown-menu .ant-dropdown-menu-item {
    padding: 0.5rem !important
}
.profile-dropdown-menu .ant-dropdown-menu-item:last-child {
    --tw-text-opacity: 1;
    color: rgb(240 54 54 / var(--tw-text-opacity))
}
.profile-dropdown-button {
    margin-left: 1rem;
    display: flex;
    height: unset;
    width: 170px;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding: 7px
}
.profile-dropdown-button .anticon svg {
    height: 18px;
    width: 18px;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.profile-dropdown-button .ant-space span {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.5rem
}
.profile-dropdown-button .ant-avatar {
    border-style: none
}
.profile-dropdown-button .ant-space-item {
    line-height: 1.5rem
}
.profile-dropdown {
    width: 200px
}
.user-profile-dropdown {
    display: flex;
    align-items: center;
    padding: 0.5rem
}
.user-profile-dropdown .ant-space {
    width: 150px
}
.user-profile-dropdown .ant-space .ant-space-item div {
    font-weight: 600
}
.user-profile-dropdown .ant-space span {
    display: block;
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.user-profile-dropdown .ant-btn {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
.agent-status-dropdown .ant-dropdown-menu-item {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important
}
.language-profile-dropdown {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between
}
.language-profile-dropdown span {
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.language-profile-dropdown .ant-btn {
    padding: 0px
}
.language-profile-dropdown .ant-divider {
    margin: 0.25rem
}
.agent-online {
    display: flex;
    align-items: center
}
.agent-online > div {
    margin-left: -0.5rem;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 20px
}

.agent-online .more-agent {
    --tw-bg-opacity: 1;
    background-color: rgb(100 106 115 / var(--tw-bg-opacity))
}
.agent-online .more-agent div {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    line-height: 1rem
}
.agent-online-dropdown {
    padding: 0.125rem
}
.agent-online-dropdown .ant-card-body > div {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700 !important
}
.agent-online-dropdown .ant-card-body > span {
    font-size: 12px;
    line-height: 20px
}
.agent-online-dropdown.more {
    height: 230px;
    width: 260px;
    overflow-y: hidden;
    padding: 0px
}
.agent-online-dropdown.more .ant-card-body {
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: 0px
}
.agent-online-dropdown.more .ant-card-body > span {
    padding: 0.5rem
}
.agent-online-dropdown.more .item-wrapper-agent-online {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: scroll;
    padding: 0.25rem
}
.agent-online-dropdown.more .item-agent-online {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
    padding: 0.25rem
}
.agent-online-dropdown.more .item-agent-online:hover {
    cursor: default;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
}
.agent-online-dropdown.more .item-agent-online .info-item-agent-online {
    display: flex;
    flex-direction: column
}
.agent-online-dropdown.more .item-agent-online .info-item-agent-online > div {
    font-size: 12px;
    line-height: 20px
}
.agent-online-dropdown.more .item-agent-online .info-item-agent-online > span {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400
}
.switch-account-dropdown-menu .ant-dropdown-menu-item {
    padding: 0px !important
}
.switch-account-dropdown-menu .ant-dropdown-menu-item:not(:first-child) {
    margin-top: 0.5rem !important
}

.content-switch-account {
    display: flex;
    width: 300px;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226 / var(--tw-border-opacity));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 7px;
    padding-bottom: 7px
}
.content-switch-account .ant-space {
    line-height: 1.25rem
}
.content-switch-account .anticon svg {
    height: 18px;
    width: 18px;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}

.text-switch-account {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Sarabun, sans-serif;
    font-size: 0.875rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}

.dropdown-switch-account {
    margin-left: 8px;
    stroke: #77808A;
    stroke-width: 40px
}

.title-switch-account {
    padding: 0.5rem
}
.item-switch-account {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}
.item-switch-account.active {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 237 / var(--tw-bg-opacity))
}
.item-switch-account.active .name-switch-account {
    --tw-text-opacity: 1;
    color: rgb(241 157 67 / var(--tw-text-opacity))
}
.item-switch-account .ant-space {
    font-weight: 400
}
.divider-switch-account {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important
}
.show-all-switch-account {
    width: 100%;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(100 106 115 / var(--tw-text-opacity))
}

.name-switch-account {
    font-family: Sarabun, sans-serif;
    line-height: 1rem
}

.status-switch-account {
    --tw-text-opacity: 1;
    color: rgb(130 202 72 / var(--tw-text-opacity))
}
* {
  font-family: 'Hind Madurai', sans-serif;
}

.login-screen {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {

  .login-screen {
    flex-direction: row;
  }
}

.login-screen .left-bar,
.login-screen .right-bar {
  display: flex;
  height: auto;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 1024px) {

  .login-screen .left-bar,
.login-screen .right-bar {
    height: 100vh;
    width: 50%;
    padding: 150px;
  }
}

.login-screen .left-bar .logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

@media (min-width: 1024px) {

  .login-screen .left-bar .logo-container {
    padding-left: 200px;
  }
}

.login-screen .left-bar .logo-container-img {
  width: 277px;
}

@media (min-width: 1024px) {

  .login-screen .left-bar .logo-container-img {
    width: 327px;
  }
}

@media (min-width: 1280px) {

  .login-screen .left-bar .logo-container-img {
    width: 477px;
  }
}

.login-screen .login-header {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 1024px) {

  .login-screen .login-header {
    position: absolute;
    top: 4rem;
    left: 8rem;
    margin-top: 0px;
  }
}

.login-screen .login-header .logo-text {
  margin-left: 0px;
  height: 50px;
  width: 200px;
}

@media (min-width: 1024px) {

  .login-screen .login-header .logo-text {
    margin-left: -3rem;
    width: 288px;
  }
}

.login-screen .left-bar img[alt='chat-icon-left'] {
  margin-left: auto;
  margin-right: auto;
}

.login-screen .left-bar img[alt='chat-icon-right'] {
  display: none;
}

.login-screen .right-bar {
  width: 100%;
  text-align: left;
}

@media (min-width: 1024px) {

  .login-screen .right-bar {
    min-width: 590px;
  }
}

.login-screen .right-bar h2 {
  margin: 0px;
  margin-bottom: 0.5rem;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(37 37 37 / var(--tw-text-opacity));
}

.login-screen .right-bar h4 {
  margin-bottom: 1.25rem;
  font-size: 14px;
  line-height: 22px;
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity));
}

.login-screen .right-bar .ant-input,
.login-screen .right-bar .ant-input-affix-wrapper {
  height: 50px;
  overflow: hidden;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 16px;
  line-height: 50px;
}

.login-screen .right-bar .ant-input-affix-wrapper {
  padding-left: 0px;
}

.login-screen .right-bar .forgot-password {
  display: inline;
  text-align: right;
  text-decoration-line: underline;
}

.login-screen .right-bar .login-button {
  width: 100%;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.login-screen .right-bar .forgot-password-container {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.login-screen .right-bar .forgot-password-text {
  margin-top: 16px;
  margin-bottom: 16px;
  display: flex;
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity));
}

.login-screen .right-bar .forgot-password-text .forgot-password-sub-text {
  margin-right: 0.5rem;
}

.login-screen .right-bar .forgot-password-text-link {
  cursor: not-allowed;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(100 106 115 / var(--tw-text-opacity));
}
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;
  animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}