.negative {
  color: rgba(209, 32, 39, 1);
}

.positive {
  color: rgba(0, 128, 64, 1);
}

.usn_cmp_fundtable table a:hover {
  text-decoration: underline !important;
}

.usn_cmp_fundtable table,
.usn_cmp_fundtable table thead,
.usn_cmp_fundtable table tbody {
  border: 0;
  background-color: rgba(var(--base-bg), 1);
  color: rgba(var(--base-text));
  font-weight: 400;
  margin: 0;
}

.usn_cmp_fundtable table strong,
.usn_cmp_fundtable table .positive,
.usn_cmp_fundtable table .negative,
.usn_cmp_fundtable table .empty {
  font-weight: 700;
}

.usn_cmp_fundtable table thead th,
.usn_cmp_fundtable table tbody td,
.usn_cmp_fundtable table tbody th {
  min-width: 6rem;
  border: 0;
  border-bottom: 1px solid rgba(var(--base-borders), 1);
}

.usn_cmp_fundtable table thead th {
  padding: 0 0 var(--spacing-xl) 0;
  font-size: 14px;
}

.usn_cmp_fundtable table tbody td {
  padding: var(--spacing-2xl) 0 var(--spacing-2xl) 0;
  font-size: 16px;
}

.usn_cmp_fundtable table tbody th {
  padding: var(--spacing-2xl) 0 var(--spacing-2xl) 0;
  font-size: 16px;
}

.usn_cmp_fundtable table .table-header-strong {
  font-weight: 700;
}

.usn_cmp_fundtable table tbody tr td:not(:first-child),
.usn_cmp_fundtable table thead tr th:not(:first-child) {
  text-align: center;
  font-weight: 400;
}

.compare-btn {
  cursor: pointer;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrapper table {
  width: 100%;
}

.table-wrapper th:first-child,
.table-wrapper td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: rgba(var(--base-bg-color1), 1);
}

.usn_cmp_fundtable table button.compare-btn {
  text-decoration: none;
  text-decoration-color: transparent;
  color: rgba(var(--base-link), 1);
  border: 0;
  background-color: transparent;
}

.usn_cmp_fundtable table button.compare-btn:hover {
  color: rgba(var(--base-link-hover), 1);
}

@media (max-width: 1200px) {

  .table-wrapper th:first-child,
  .table-wrapper td:first-child {
    padding-right: 12px;
  }
}

/**** banner **********************************************/
/* svg icon depending on the background */
#banner-wrapper .banner .small-banner .image img {
  filter: brightness(0) invert(1);
}

#banner-wrapper {
  position: relative;
  padding: 0 !important;
  height: 100px;
}

#banner-wrapper .banner {
  position: absolute;
  top: 0;
  width: 100%;
  max-width: calc(100vw - 48px) !important;
}

#banner-wrapper #fund-table-banner.banner .small-banner p.heading,
#banner-wrapper #fund-table-banner.banner .small-banner .content p {
  padding-bottom: 0 !important;
  line-height: 150% !important;
  width: 100% !important;
}

#banner-wrapper #fund-table-banner.banner .small-banner .content p {
  width: 100% !important;
}

#banner-wrapper .banner .small-banner .image {
  min-width: 48px;
  align-items: center;
}

#banner-wrapper .banner .small-banner .image img {
  width: auto;
  height: auto;
  max-width: 48px;
  max-height: 48px;
}

#banner-wrapper .banner .small-banner {
  display: flex;
  width: 100%;
  height: 100%;

  align-items: center;
  align-content: center;
  justify-content: center;
}

#banner-wrapper .banner .small-banner .content {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

#banner-wrapper .banner .small-banner .content .heading {
  /* align-items: center; */
}

#banner-wrapper .banner .small-banner .buttons {
  justify-content: center;
  height: 100%;
  width: 100%;
}

#banner-wrapper .banner .small-banner .buttons a {
  width: 100%;
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  #banner-wrapper .banner {
    max-width: calc(540px - 24px) !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  #banner-wrapper .banner {
    max-width: calc(720px - 24px) !important;
  }

  #banner-wrapper .banner .small-banner .buttons a {
    max-width: 420px;
  }
}

@media screen and (min-width: 992px) {
  #banner-wrapper .banner {
    max-width: 100% !important;
  }

  #banner-wrapper .banner .small-banner {
    display: flex;
    flex-direction: row !important;
  }

  #banner-wrapper .banner .small-banner .buttons {
    width: unset !important;
  }

  #banner-wrapper .banner .small-banner .buttons a {
    max-width: 420px;
  }

  #banner-wrapper .banner .small-banner .content {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
    margin-bottom: 0 !important;
  }

  /* #banner-wrapper .banner .small-banner .image {
    margin-right: 24px !important;
  } */
  #banner-wrapper .banner .small-banner .content .heading-wrapper {
    margin-bottom: 0 !important;
  }

  #banner-wrapper #fund-table-banner.banner .small-banner p.heading {
    padding-bottom: var(--spacing-m) !important;
    line-height: var(--p-heading-typography_font-line-height) !important;
  }
}

/* START Bottom sticky bar tecajnica vzajemnih skladov*/
.fund-table-sticky-bar {
  position: fixed;
  display: none;
  flex-direction: row;
  bottom: 0;
  z-index: 999;
  left: 0;
  width: 100%;
  height: 96px;
  padding: 24px 0px;
}

.fund-table-sticky-bar .container {
  display: flex;
  flex-direction: row;
  padding: 0 !important;
}

.fund-table-sticky-bar .fund-table-sticky-bar-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
}

.fund-table-sticky-bar label {
  text-decoration: underline;
}

.fund-table-sticky-bar p {
  color: white;
}

@media screen and (max-width: 768px) {
  .fund-table-sticky-bar-clear-content-text {
    display: none !important;
  }

  /* .fund-table-sticky-bar .boxed-btn {
    display: none;
 } */

  .fund-table-sticky-bar .fund-table-sticky-bar-inner {
    flex-direction: column !important;
    align-items: center;
    gap: 0 !important;
  }

  .fund-table-sticky-bar .fund-table-sticky-bar-inner p {
    margin-top: 5px !important;
  }

  .fund-table-sticky-bar {
    height: 150px;
  }
}

@media screen and (max-width: 1180px) {
  .fund-table-sticky-bar .container {
    padding: 0px 15px !important;
  }
}

/* END Bottom sticky bar tecajnica vzajemnih skladov*/

/* Add/Remove button */
.compare-btn .remove {
  color: #77787B !important;
  /* Hardcoded color */
}

.compare-btn.limit-reached .add {
  color: #A9A9A9;
  /* Hardcoded color */
}

.compare-btn.limit-reached {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

@media screen and (max-width: 768px) {
  .fundtable-dropdown {
    width: 100%;
  }

  /* Add border-bottom to every first td in tbody rows */
  /* Ensure table uses separate borders */
  .usn_cmp_fundtable table {
    border-collapse: separate;
    /* or keep collapse if needed */
    border-spacing: 0;
  }

  /* Add border-bottom to first td in tbody rows */
  .usn_cmp_fundtable tbody tr td:first-child {
    border-bottom: 1px solid #dddddd !important;
    /* !important forces it */
    z-index: 1;
    /* keep it above other elements */
  }

  /* Optional: skip first row if needed */
  .usn_cmp_fundtable tbody tr:first-child td:first-child {
    border-bottom: none;
  }

  #fund_performance .container-fluid {
    padding: 0 !important;
  }
}

.fund-table-container {
  padding-bottom: var(--spacing-3xl);
}

.usn_cmp_fundtable .component-inner {
  padding: 0 var(--spacing-l) 0 var(--spacing-l);
}

@media (max-width: 650px) {

  #banner-wrapper .small-banner .heading,
  #banner-wrapper .small-banner .content p {
    width: 70% !important;
  }
}