/** Sticky column only on larger screen */
@media (min-width: 992px) {
  .header-sticky-left {
    position: sticky;
    left: 0;
    background-color: #1e1e2d !important;
    z-index: 92 !important;
  }

  .header-sticky-right {
    position: sticky;
    right: 0;
    background-color: #1e1e2d !important;
  }

  .header-sticky-title {
    left: calc(118.33px - 42px + 1.75rem);
    z-index: 92 !important;
  }

  .header-sticky-title-ad {
    left: calc(118.33px - 42px + 12.5rem);
    z-index: 92 !important;
  }

  .header-sticky-image {
    left: calc(118.33px - 42px + 1.75rem);
    z-index: 92 !important;
  }

  .header-sticky-active {
    left: calc(118.33px + 299px + 1.75rem);
  }

  .list-sticky-left {
    position: sticky;
    left: -1px;
    background-color: var(--kt-app-header-base-bg-color) !important;
    z-index: 90;
  }

  .list-sticky-right {
    position: sticky;
    right: -1px;
    background-color: var(--kt-app-header-base-bg-color) !important;
  }

  .list-sticky-title {
    left: calc(118.33px - 45px + 1.75rem);
    z-index: 90 !important;
    position: sticky;
  }

  .list-sticky-title-ad {
    left: calc(118.33px - 45px + 12.5rem);
    z-index: 90 !important;
    position: sticky;
  }

  .list-sticky-image {
    left: calc(118.33px - 45px + 1.75rem);
    z-index: 90 !important;
    position: sticky;
    background-color: var(--kt-app-header-base-bg-color) !important;
  }

  .list-sticky-active {
    left: calc(118.33px + 299px + 1.75rem);
    z-index: 90;
  }

  .list-sticky-ad {
    left: calc(118.33px + 299px + 1.75rem);
    position: sticky;
    z-index: 90;
  }

  .header-sticky-ad {
    left: calc(118.33px + 299px + 1.75rem);
    position: sticky;
    z-index: 92 !important;
  }
}

.searchContainer {
  position: relative;
  overflow-y: scroll;
  max-height: 22em;
}

.cpc-bidding {
  width: auto !important;
}

input[type='number'].input-no-arrow::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.table-sticky-head-foot {
  overflow: auto;
  /* max-height: 400px;  */
}

.table-sticky-head-foot::-webkit-scrollbar {
  height: 1em;
}

.table-sticky-head-foot thead th {
  position: sticky;
  top: 0;
  z-index: 91;
  background-color: #1e1e2d !important;
}
.table-sticky-head-foot tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 91;
  background-color: #1e1e2d !important;
}

.nat-graph-collapse .ant-collapse-header {
  display: none !important;
}

.nat-graph-collapse .ant-collapse-content-box {
  padding: 0 !important;
}

.ant-picker-input > input {
  color: var(--kt-text-gray-800) !important;
}
.select-wrapper {
  width: 20rem;
  max-width: 25rem;
}

.metric-select {
  width: 20rem;
  max-width: 25rem;
  /*margin-right: 5px;*/
}

.rotate-n90 {
  transform: rotate(270deg);
}

.contexify_theme-nativery {
  --contexify-menu-bgColor: var(--kt-menu-dropdown-bg-color);
  --contexify-separator-color: #4c4c4c;
  --contexify-item-color: var(--kt-gray-600);
}
.grid-auto-rows-min-content {
  grid-auto-rows: min-content;
}

.menu-section > .accordion-button {
  background-color: #1e1e2d !important;
}

.menu > .accordion > .accordion-collapse {
  background-color: #0f111c;
  border-radius: 6px;
  padding: 5px;
}

rect.apexcharts-heatmap-rect[selected='true'] {
  outline: #000000 solid 3px;
  outline-offset: -6px;
}

.btn-hover {
  display: none !important;
}

.btn-hover-group:hover .btn-hover {
  display: block !important;
}

.inline-input:hover ~ .btn-hover {
  display: block !important;
}

.inline-input:focus ~ .btn-hover {
  display: none !important;
}

.inline-input:focus ~ .btn-done {
  display: block !important;
  cursor: pointer;
}

/* --------------------------------------------------------- */
/* CHECKBOX-IMAGE */
/* --------------------------------------------------------- */

.nat-checkbox-image {
  opacity: 0;
  top: 0.5em;
  left: 0.5em;
}

.nat-checkbox-image-container:hover .nat-checkbox-image {
  opacity: 1;
}

/* --------------------------------------------------------- */
/* INPUT */
/* --------------------------------------------------------- */

.form-control {
  border-color: var(--kt-input-btn-focus-color) !important;
}

.dropdown.show > .form-control.form-control-solid,
.form-control.form-control-solid:active,
.form-control.form-control-solid.active,
.form-control.form-control-solid:focus,
.form-control.form-control-solid.focus {
  background-color: var(--kt-input-btn-color) !important;
  /*border-color: var(--kt-input-btn-focus-color) !important;*/
  /*outline: 1px solid var(--kt-input-btn-focus-color) !important;*/
}

/* --------------------------------------------------------- */
/* IMAGE */
/* --------------------------------------------------------- */

.nat-image-container {
  height: 125px;
  aspect-ratio: 5/3;
}

.nat-image-container:hover {
  filter: contrast(0.5);
}

/* --------------------------------------------------------- */

.nat-text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.checkbox-all {
  height: 1em;
}
.nat-flex-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

/* --------------------------------------------------------- */
/* SKELETON FOOTER TABLE */
/* --------------------------------------------------------- */

.table-footer-skeleton .ant-skeleton-input {
  background-image: linear-gradient(
    90deg,
    rgba(255, 199, 0, 0.3) 25%,
    rgba(255, 199, 0, 0.75) 37%,
    rgba(255, 199, 0, 0.3) 63%
  ) !important;
}

/* --------------------------------------------------------- */
/* TEXT-AREA */
/* --------------------------------------------------------- */

.nat-textarea-disabled {
  background-color: hwb(0 67% 33% / 0.555) !important;
}

/* --------------------------------------------------------- */
/* EDITOR-AREA */
/* --------------------------------------------------------- */

.nat-editorarea {
  border: 5px solid hwb(0 67% 33% / 0.555);
  border-radius: 0.625rem !important;
}

/* --------------------------------------------------------- */
/* POPUP */
/* --------------------------------------------------------- */

.nat-popup {
  z-index: 99 !important;
  border-radius: 0.625rem !important;
}

/* --------------------------------------------------------- */
/* TOGGLE */
/* --------------------------------------------------------- */

.form-switch {
  width: fit-content;
}

.ant-collapse-arrow {
  color: var(--kt-body-color) !important;
}

/* .ant-card {
  width: 22em !important;
} */

/* --------------------------------------------------------- */
/* INPUT LINK BUTTON */
/* --------------------------------------------------------- */

.nat-input-link-button {
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------- */
/* GENERAL */
/* --------------------------------------------------------- */

.white-space-no-wrap {
  white-space: nowrap;
}

input::placeholder {
  color: var(--kt-input-placeholder-color) !important;
}

.resizer {
  position: absolute;
  top: 0;
  height: 100%;
  right: 0;
  width: 5px;
  background: var(--kt-text-warning) !important;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

@media (hover: hover) {
  .resizer {
    opacity: 0;
  }

  *:hover > .resizer {
    opacity: 1;
  }
}