.table-bordered,
.table-bordered td,
.table-bordered th,
.table td,
.table th {
  border: 0px solid var(--smcw-color-table-border);
}

.table-tr-success {
  background-color: var(--smcw-color-table-success) !important;
}

.table-tr-fail {
  background-color: var(--smcw-color-table-fail) !important;
}

.tool-color-column {
  border: 1px solid var(--smcw-color-table-border) !important;
}

.layout-column,
.dropdown-mini-layout-column {
  border: 1px solid var(--smcw-color-table-border) !important;
}

.btn-outline-secondary,
.btn-outline-secondary:hover {
  color: var(--smcw-color-custom-button-text);
  background: var(--smcw-color-custom-button);
  border: none;
}

.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: var(--smcw-color-custom-active-button-text);
  background-color: var(--smcw-color-custom-active-button);
  border: none;
}

.popover {
  background-color: var(--smcw-color-popup-background);
  z-index: 1000000;
  width: 415px;
  max-width: 415px;
}

.modal-title {
  font-weight: bold;
  font-size: 32px;
  margin-bottom: 20px;
  color: var(--smcw-color-popup-head-text);
}

.popover-body {
  font-size: 14px;
  background-color: var(--smcw-color-popup-background);
  color: var(--smcw-color-popup-text);
}

.modal-content {
  background-color: var(--smcw-color-popup-background) !important;
}

.bs-popover-auto[x-placement^='bottom'] > .arrow::after,
.bs-popover-bottom > .arrow::after {
  border-bottom-color: var(--smcw-color-popup-background) !important;
}

.bs-popover-auto[x-placement^='top'] > .arrow::after,
.bs-popover-top > .arrow::after {
  border-top-color: var(--smcw-color-popup-background) !important;
}

.bs-popover-auto[x-placement^='left'] > .arrow::after,
.bs-popover-left > .arrow::after {
  border-left-color: var(--smcw-color-popup-background) !important;
}

.bs-popover-auto[x-placement^='right'] > .arrow::after,
.bs-popover-right > .arrow::after {
  border-right-color: var(--smcw-color-popup-background) !important;
}

.bs-popover-auto[x-placement^='bottom'] .popover-header::before,
.bs-popover-bottom .popover-header::before {
  border-bottom: none;
}

.bs-popover-auto[x-placement^='top'] .popover-header::before,
.bs-popover-top .popover-header::before {
  border-top: none;
}

.bs-popover-auto[x-placement^='left'] .popover-header::before,
.bs-popover-left .popover-header::before {
  border-left: none;
}

.bs-popover-auto[x-placement^='right'] .popover-header::before,
.bs-popover-right .popover-header::before {
  border-right: none;
}

.modal-title {
  font-weight: bold;
  font-size: 32px;
  margin-bottom: 20px;
  color: var(--smcw-color-popup-head-text);
}

.modal-subtitle {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--smcw-color-popup-text);
}

.modal-content {
  background-color: var(--smcw-color-popup-background) !important;
}

.popover-body {
  font-size: 15px;
}

.modal-content small {
  font-size: 14px;
}

#notice-contents-div h6 {
  color: var(--smcw-color-popup-head-text);
}

.modal-header {
  color: var(--smcw-color-popup-text);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal-body {
  border-bottom: 1px solid var(--smcw-color-popup-divider);
  color: var(--smcw-color-popup-text);
}

.modal-footer {
  color: var(--smcw-color-popup-text);
  border-top: none;
  align-items: flex-end;
}

.modal-body,
.modal-footer {
  font-size: 14px;
}

#notice-modal,
.modal-footer label {
  margin-top: 4px;
  margin-right: 5px;
}

.modal-footer {
  border-top: none;
  align-items: flex-end;
}

.modal-footer .form-check {
  display: flex;
  align-items: center;
  height: 40px;
  margin-right: auto;
}

#chatting-modal .modal-footer {
  padding-top: 0px;
}

#socket-error {
  color: red;
  width: 100%;
  text-align: center;
}

.modal-close-button {
  font-size: 14px;
  background-color: var(--smcw-color-modal-close-button);
  color: white;
  border: none;
  width: 80px;
  height: 40px;
}

#notice-contents-div h6 {
  color: var(--smcw-color-popup-head-text);
}

.toast {
  position: absolute;
  z-index: 100000;
  width: 500px;
  cursor: pointer;
}

.toast-success {
  background: linear-gradient(to bottom right, #42b224, #61d461) !important;
}

.toast-warning {
  background: linear-gradient(to bottom right, #f7971e, #ffd200) !important;
}

.toast-error {
  background: linear-gradient(to bottom right, #ff416c, #ff4b2b) !important;
}

.toast-info {
  background: linear-gradient(to bottom right, #4a4a4a, #2b2b2b) !important;
}

.popover {
  z-index: 1000000;
  width: 415px;
  max-width: 415px;
}

.popover-header {
  background-color: var(--smcw-color-popup-background);
  color: var(--smcw-color-popup-text);
}

.toast-header,
.toast-body {
  font-size: 14px !important;
}

.align-items-center {
  place-content: center;
  align-self: center;
}

.tooltip {
  z-index: 100000000000000;
}

.dropdown-menu {
  z-index: 1000000000;
  /* width: 100%; */
}

.collapsible-header {
  cursor: pointer;
}

/* datatable */
.dataTables_scrollHeadInner {
  margin: 0 auto;
}

.dataTables_scroll {
  position: relative;
  padding: 0px;
}

.dataTables_paginate {
  position: relative;
  /* top: -35px; */
}

.dataTables_filter {
  padding: 10px;
  margin-left: -10px;
}

.dataTables_length > label > select {
  margin-top: 5px;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: var(--smcw-color-worklist-length-text) !important;
  background-color: var(--smcw-color-worklist-length) !important;
  border: 1px solid var(--smcw-color-worklist-length-border) !important;
  flex: none;
  order: 3;
  align-self: center;
  flex-grow: 0;
  margin: 10px 0px;
  padding: 5px;
}

.dataTables_wrapper .dataTables_filter {
  text-align: left !important;
  margin-top: -70px;
  position: absolute;
  margin-left: 750px;
}

input[type='search'] {
  font-size: 13px;
  line-height: 16px;
  color: var(--smcw-color-custom-search-color) !important;
  background-color: var(--smcw-color-custom-search);
  border: 1px solid var(--smcw-color-custom-search-border);
  width: 240px;
  height: 38px !important;
}

.search-button * {
  fill: var(--smcw-color-search-button);
}

.dataTables_filter label,
.dataTables_info {
  font-size: 1rem !important;
  color: var(--smcw-color-text) !important;
  white-space: nowrap;
  width: 100% !important;
}

.ellipsis,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  color: var(--smcw-color-text) !important;
  border: 1px solid #2a304d;
  margin-left: 8px;
}

.ellipsis {
  border: none;
}

table.dataTable tbody th,
table.dataTable tbody td,
tbody th,
tbody td {
  padding: 15px 10px;
}

table.dataTable thead th,
table.dataTable thead td,
thead th,
thead td {
  padding: 5px 10px;
}

.dataTables_wrapper .dataTables_paginate {
  z-index: 1;
  float: none;
  text-align: initial;
  padding-top: 0;
  position: relative;
  text-align-last: center;
  top: 15px;
}

.dataTables_filter > label > input::placeholder {
  opacity: 0.8;
}

.dataTables_paginate,
input[type='search'],
.dataTables_filter i {
  font-size: 0.9rem;
}

.dataTables_wrapper {
  height: inherit;
}

/* dropzone */
.dropzone {
  background: var(--smcw-color-dropdown) !important;
  opacity: 0.8;
  border: 2px var(--smcw-color-dropdown-border) dashed !important;
  width: 100vw;
  height: 100vh;
  align-items: center !important;
  justify-content: center !important;
  display: none;
  z-index: 10000000000000000 !important;
  font-size: 2rem;
}

.context-menu-list {
  font-size: 0.8rem !important;
}

/* datepicker */
.ui-datepicker {
  font-size: 14px;
  text-align-last: center;
  z-index: 100000 !important;
}

.ui-datepicker,
.ui-datepicker-header {
  background-color: var(--smcw-color-popup-background) !important;

  font-weight: 600;
  color: var(--smcw-color-popup-text) !important;
}

.ui-datepicker-calendar .saturday a {
  color: #00f;
}

.ui-datepicker-calendar .saturday span {
  color: #00f;
}

.ui-datepicker-week-end:first-child {
  color: #f00;
}

.ui-datepicker-week-end:last-child {
  color: #00f;
}

.ui-datepicker-calendar > tbody td:first-child a {
  color: #f00;
}

.ui-datepicker-calendar > tbody td:last-child a {
  color: #00f;
}

.ui-datepicker-year,
.ui-datepicker-month {
  height: 1.5rem;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  display: none;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 1em;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 8px;
  padding: 0px;
}

.ui-datepicker select.ui-datepicker-month {
  width: 32%;
}

.ui-datepicker select.ui-datepicker-year {
  width: 40%;
}

.dropdown-toggle::after {
  border: none;
  font: normal normal normal 12px/1;
  font-family: FontAwesome !important;
  /* content: '\f107'; */
  vertical-align: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: var(--smcw-color-pagenate-text) !important;

  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  border: none !important;
  background-color: var(--smcw-color-pagenate) !important;
  background: var(--smcw-color-pagenate) !important;
}

.btn,
#upload-result-contents-div {
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
}

#confirm-cancel {
  font-size: 14px;
  background-color: var(--smcw-color-modal-cancel-button);
  border-color: var(--smcw-color-modal-cancel-button);
  color: var(--smcw-color-modal-cancel-button-text);
}

#confirm-ok,
.preview-call {
  font-size: 14px;
  background-color: var(--smcw-color-modal-close-button);
  border-color: var(--smcw-color-modal-close-button);
}

.preview-call {
  margin-top: 15px;
  font-size: 13px;
}

.brush-popover .popover-header,
.brush-popover .popover-body {
  background-color: var(--smcw-color-popup-background);
  color: var(--smcw-color-popup-text);
}

.brush-popover .arrow::after {
  border-bottom-color: white !important;
}

.brush-toolbar-active {
  background-color: var(--smcw-color-brush-tool-active) !important;
}

.ui-resizable-s {
  height: 5px;
  bottom: -10px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAADAQMAAABCowZuAAAABlBMVEUAAACkvtSA7tmIAAAAAXRSTlMAQObYZgAAAA9JREFUCB1jXMUABoxAGgAJaAFXPIkJqAAAAABJRU5ErkJggg==)
    no-repeat center center;
  background-color: var(--smcw-color-body);
  background-size: contain;
}

.ui-resizable-w {
  width: 5px;
  top: 0;
  height: 100%;
  position: absolute;
  left: -7px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAXAQMAAAD0oWdxAAAABlBMVEUAAACkvtSA7tmIAAAAAXRSTlMAQObYZgAAAA5JREFUeF5jWMDAQDwGAKyuB4FpGQdzAAAAAElFTkSuQmCC)
    no-repeat center center;
  background-color: var(--smcw-color-body);
  background-size: contain;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 5px;
  right: -7px;
  top: 0;
  height: 100%;
  background-color: var(--smcw-color-body);
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAXAQMAAAD0oWdxAAAABlBMVEUAAACkvtSA7tmIAAAAAXRSTlMAQObYZgAAAA5JREFUeF5jWMDAQDwGAKyuB4FpGQdzAAAAAElFTkSuQmCC)
    no-repeat center center;
  background-size: contain;
}

#alert-ok {
  background-color: var(--smcw-color-alert-button);
  border-color: var(--smcw-color-alert-button);
}

.ui-datepicker {
  z-index: 10000002 !important;
}

.context-menu-root {
  padding: 5px;
}

.context-menu-root,
.context-menu-root > *,
.context-menu-list,
.context-menu-list > * {
  border: none !important;
  background-color: var(--smcw-color-context-background) !important;
  color: var(--smcw-color-context-head-text) !important;
  font-size: 13px;
}

.context-menu-icon::after {
  font-size: 15px !important;
  border-color: transparent transparent transparent white !important;
}

.context-item-label {
  color: var(--smcw-color-context-label) !important;
  font-size: 12px !important;
  pointer-events: none;
  padding: 5px 0px 8px 8px !important;
}

.report-context-item-label {
  font-size: 14px !important;
  font-weight: bold !important;
  margin-top: 5px;
}

.context-item-sub-label {
  pointer-events: none;
}

.context-item-sub-label > span {
  margin-left: 5px;
}

.context-menu-submenu:after {
  border-color: transparent transparent transparent var(--smcw-color-context-head-text) !important;
}

.context-AI-item {
  margin-left: 20px;
}

.context-AI-item > span {
  margin-left: 3px;
}

.context-menu-item:hover {
  background: var(--smcw-color-context-menu-hover) !important;
}

.context-menu-item:not(.context-menu-not-selectable, .context-item-label) {
  padding: 0.6em 2em !important;
}

.custom-range {
  width: 60px;
}

.custom-range::-webkit-slider-thumb {
  height: 14px;
  width: 14px;
  background: var(--smcw-color-slider-thumb);
}

.custom-range::-moz-range-thumb {
  height: 14px;
  width: 14px;
  background: var(--smcw-color-slider-thumb);
}

.custom-range::-ms-thumb {
  height: 14px;
  width: 14px;
  background: var(--smcw-color-slider-thumb);
}

.custom-range::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--smcw-color-slider);
}

.custom-range::-moz-range-track {
  height: 4px;
  background: var(--smcw-color-slider);
}

.custom-range::-webkit-slider-thumb:active {
  background-color: var(--smcw-color-slider-thumb-active);
}

#card-news-modal .modal-body {
  height: 85vh;
  max-height: 85vh !important;
}

#card-news-modal .modal-footer * {
  height: 20px !important;
}

#card-news-modal .modal-dialog-centered {
  margin: auto;
}

#day-block-card-news {
  margin-right: auto;
  background-color: transparent;
  color: var(--smcw-color-popup-text);
  cursor: pointer;
}

.preview-card-news-image-container {
  max-height: 240px;
  pointer-events: none;
}

.preview-card-news-image {
  object-fit: scale-down;
  height: 80px;
  margin-right: 3px;
}