/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

:root {
  --tag_transcap--icon-info: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.4 14.4'%3E%3Ccircle cx='7.2' cy='7.2' r='7.2' style='fill:%2300338d; stroke-width:0px;'/%3E%3Cpath d='M5.88,11.15v-.34c.76-.07.84-.13.84-.95v-2.47c0-.74-.04-.79-.76-.91v-.29c.62-.11,1.19-.26,1.7-.48v4.15c0,.82.08.88.86.95v.34h-2.65ZM7.12,4.54c-.34,0-.64-.3-.64-.64,0-.38.3-.66.65-.66s.61.28.61.66c0,.34-.28.64-.62.64Z' style='fill:%23fff; stroke-width:0px;'/%3E%3C/svg%3E");
}

/***************
 * Date Range Picker
 ***************/
.daterangepicker .drp-calendar {
  max-width: unset !important;
}

/***************
 * Table Filter
 ***************/
.tag_transcap-table--filter-wrapper .tag_transcap-filter-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  gap: 1rem;
  margin-bottom: 2rem;

  background: #fff;
  padding: 2rem 0;
}
.tag_transcap-table--filter-wrapper .tag_transcap--filter:not(.btn-submit) {
  flex: 1;
  min-width: 250px;
}
.tag_transcap-table--filter-wrapper .tag_transcap--filter:not(.btn-submit) * {
  width: 100%;
}

@media (max-width: 768px) {
  .tag_transcap-table--filter-wrapper .tag_transcap--filter,
  .tag_transcap-table--filter-wrapper .tag_transcap--filter * {
    width: 100%;
  }
}

/***************
 * Table Header Wrapper
 ***************/
.tag_transcap-table--header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem;
}

.tag_transcap-table--header .export-wrapper {
  padding: 1rem 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/***************
 * Table
 ***************/
.tag_transcap-table--result-table-wrapper {
  /* max-width: 1580px; */
  width: 100%;
  overflow-x: scroll;
  /* overflow-y: scroll;
  max-height: 100vh; */
  padding: 0;
}

.tag_transcap-table--result-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow-x: scroll;
  /* border-width: 1px; */
  border-left-width: 0px;
  margin-bottom: 0;
}

.tag_transcap-table--result-table th,
.tag_transcap-table--result-table td {
  margin: 0;
}

.tag_transcap-table--result-table tr th:first-of-type,
.tag_transcap-table--result-table tr td:first-of-type {
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 1;
  background-color: #dedede;
}

/* First header row sticky */
/* .tag_transcap-table--result-table thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 1;
} */

.tag_transcap-table--result-table thead {
  column-gap: 1px;
}
.tag_transcap-table--result-table thead th {
  border-right-width: 1px;
  min-width: 8em;
  background-color: #dedede;
}
.tag_transcap-table--result-table thead th:first-child,
.tag_transcap-table--result-table tbody td:first-child {
  border-left-width: 1px;
}

/* table header borders */
.tag_transcap-table--result-table thead tr:nth-of-type(1) th,
.tag_transcap-table--result-table thead tr:nth-of-type(2) th {
  border-bottom-width: 0;
}
.tag_transcap-table--result-table thead tr:last-of-type th {
  border-bottom-width: 1px;
}

.tag_transcap-table--result-table thead tr:nth-of-type(2) th:first-of-type {
  height: 100%;
}
.tag_transcap-table--result-table thead tr:nth-of-type(2) th .icon-tooltip {
  transform: translateY(2px);
}

/* third heading row*/
.tag_transcap-table--result-table thead tr:nth-of-type(3) th .unit-wrapper {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.tag_transcap-table--result-table
  thead
  tr:nth-of-type(3)
  th
  .unit-wrapper
  span {
  font-size: 0.9rem;
  font-weight: normal;
}

/* table body*/
.tag_transcap-table--result-table tbody tr td:first-of-type {
  border-left-width: 1px;
}
.tag_transcap-table--result-table tbody tr div.dual-value {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.tag_transcap-table--result-table thead tr th,
.tag_transcap-table--result-table tbody tr td {
  min-width: 13em;
}

/* date column */
.tag_transcap-table--result-table td.col-date span:first-of-type {
  padding-right: 0.5rem;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .tag_transcap-table--result-table thead tr th,
  .tag_transcap-table--result-table tbody tr td {
    min-width: 10em;
  }
}

/***************
 * Table Footer Wrapper
 ***************/
.tag_transcap-table--footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 1rem;
}
.result-messages {
  width: 100%;
}

.tag_transcap-table--footer .pagination-wrapper {
  padding: 1rem 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}
.tag_transcap-table--footer
  .pagination-wrapper
  .pages-between.active.mobileonly {
  display: none;
}

.tag_transcap-table--footer .pagination-wrapper .row-count-wrapper {
  margin-left: auto;

  display: flex;
  align-items: center;
}

.tag_transcap-table--footer .pagination-wrapper .row-count-wrapper .total {
  margin-right: 2rem;
}

@media screen and (max-width: 768px) {
  .tag_transcap-table--footer .pagination-wrapper {
    gap: 0.5rem;
  }
  .tag_transcap-table--footer .pagination-wrapper {
    justify-content: center;

    width: 100%;
  }

  .tag_transcap-table--footer .pagination-wrapper .pages-between {
    text-align: center;
  }
  .tag_transcap-table--footer
    .pagination-wrapper
    .pages-between.active.mobileonly:not(:first-child):not(:nth-child(3)) {
    display: initial;
  }

  .tag_transcap-table--footer
    .pagination-wrapper
    .page:not(.first-page):not(.last-page):not(.active) {
    display: none;
  }
}

/* Pagination */
.tag_transcap-table--footer .pagination-wrapper .pagination {
  padding: 0.5rem 1rem;
  border: 1px solid;
}

/***************
 * Tooltips
 ***************/
abbr {
  border-bottom: none;
  cursor: help;
}
.icon-tooltip {
  background: var(--tag_transcap--icon-info);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 1rem;
  width: 1rem;

  position: relative;
  display: inline-block;
  cursor: pointer;
}
.icon-tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 130%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.85rem;
  line-height: 1.2rem;
  padding: 0.5rem;
}
.icon-tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}
abbr:not(:has(~ .icon-tooltip)) {
  cursor: text;
}
abbr:hover ~ .icon-tooltip .tooltiptext,
.icon-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}