table.card-table tfoot {
  background-color: var(--tblr-card-cap-bg);
}

.card-title {
  text-wrap: balance;
}

.box-shadow {
  /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; */
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  border: 0px;
}

.tw-pretty {
  text-wrap: pretty;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

@media (max-width: 576px) {
  .btn-sm-icon {
    min-width: calc(var(--tblr-btn-line-height) * var(--tblr-btn-font-size) + var(--tblr-btn-padding-y) * 2 + var(--tblr-btn-border-width) * 2);
    min-height: calc(var(--tblr-btn-line-height) * var(--tblr-btn-font-size) + var(--tblr-btn-padding-y) * 2 + var(--tblr-btn-border-width) * 2);
    padding-left: 0;
    padding-right: 0
  }

  .btn-sm-icon .icon {
    margin: calc(-1 * var(--tblr-btn-padding-x))
  }

}

@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg .navbar-brand {
    padding: 1.25rem 0;
  }

  .navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link {
    padding: .75rem 1.5rem;
  }

  .navbar-vertical .navbar-nav .nav-item.active {
    border: 0 var(--tblr-border-style) var(--tblr-body-color);
    border-left-width: 2px;
    /* background: linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.088) 50%,transparent); */
    background-color: rgba(255, 255, 255, 0.1);
  }

  .navbar-vertical .navbar-nav .nav-item.active .nav-link {
    font-weight: var(--tblr-font-weight-bold);
  }

  .navbar-vertical .navbar-nav .dropdown-menu-column .nav-item.active {
    margin: 0 -24px;
    padding: 0px 22px;
  }

}

.navbar-brand-image {
  height: auto;
  width: 11rem;
}

.theme-navbar .navbar-nav .nav-item .nav-link {
  color: var(--tblr-theme-body-color);

}

.sidebar-header {
  font-size: .625rem;
  font-weight: var(--tblr-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1rem;
  /*color: rgba(var(--tblr-body-color), 0.5);*/
  color: color-mix(in srgb, var(--tblr-body-color), var(--tblr-navbar-bg) 30%);

  background: transparent;
  padding: 1.5rem 1.7rem 0.375rem;
}

.inverted .card-header-tabs {
  background: var(--tblr-card-bg);
  flex: 1;
  margin: calc(var(--tblr-card-cap-padding-y) * -1) calc(var(--tblr-card-cap-padding-x) * -1) calc(var(--tblr-card-cap-padding-y) * -1);
  padding: calc(var(--tblr-card-cap-padding-y) * .5) calc(var(--tblr-card-cap-padding-x) * .5) 0
}


.inverted .card-header-tabs .nav-link.active {
  background-color: var(--tblr-bg-surface-secondary);
  border-bottom-color: var(--tblr-bg-surface-secondary)
}

.widgetListItem {
  color: var(--tblr-table-color)
}

.widgetListItem .muted {
  color: color-mix(in srgb, var(--tblr-table-color), var(--tblr-bg-surface) 30%)
}

.widgetDatagrid {
  color: var(--tblr-table-color)
}

.widgetDatagrid .datagrid-title {
  color: color-mix(in srgb, var(--tblr-table-color), var(--tblr-bg-surface) 30%)
}

.card-body .widget-muted {
  color: color-mix(in srgb, var(--tblr-table-color), var(--tblr-bg-surface) 30%)
}

.rank-advance-header {
  background-color: var(--tblr-card-title-gb);
}

.rank-advance-header svg {
  color: var(--tblr-card-title-color)
}

.btn-twitter {
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-color: var(--tblr-github-fg);
  --tblr-btn-bg: var(--tblr-github);
  --tblr-btn-hover-color: var(--tblr-github-fg);
  --tblr-btn-hover-bg: rgba(var(--tblr-github-rgb), .8);
  --tblr-btn-active-color: var(--tblr-github-fg);
  --tblr-btn-active-bg: rgba(var(--tblr-github-rgb), .8);
  --tblr-btn-disabled-bg: var(--tblr-github);
  --tblr-btn-disabled-color: var(--tblr-github-fg);
  --tblr-btn-box-shadow: var(--tblr-shadow-button), var(--tblr-shadow-button-inset)
}

.btn-website {
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-color: var(--tblr-vk-fg);
  --tblr-btn-bg: var(--tblr-vk);
  --tblr-btn-hover-color: var(--tblr-vk-fg);
  --tblr-btn-hover-bg: rgba(var(--tblr-vk-rgb), .8);
  --tblr-btn-active-color: var(--tblr-vk-fg);
  --tblr-btn-active-bg: rgba(var(--tblr-vk-rgb), .8);
  --tblr-btn-disabled-bg: var(--tblr-vk);
  --tblr-btn-disabled-color: var(--tblr-vk-fg);
  --tblr-btn-box-shadow: var(--tblr-shadow-button), var(--tblr-shadow-button-inset)
}

.btn-linkedIn {
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-color: var(--tblr-tabler-fg);
  --tblr-btn-bg: var(--tblr-tabler);
  --tblr-btn-hover-color: var(--tblr-tabler-fg);
  --tblr-btn-hover-bg: rgba(var(--tblr-tabler-rgb), .8);
  --tblr-btn-active-color: var(--tblr-tabler-fg);
  --tblr-btn-active-bg: rgba(var(--tblr-tabler-rgb), .8);
  --tblr-btn-disabled-bg: var(--tblr-tabler);
  --tblr-btn-disabled-color: var(--tblr-tabler-fg);
  --tblr-btn-box-shadow: var(--tblr-shadow-button), var(--tblr-shadow-button-inset)
}

.btn-whatsApp {
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-color: var(--tblr-tabler-fg);
  --tblr-btn-bg: #25d366;
  --tblr-btn-hover-color: var(--tblr-tabler-fg);
  --tblr-btn-hover-bg: rgba(37, 211, 102, .8);
  --tblr-btn-active-color: var(--tblr-tabler-fg);
  --tblr-btn-active-bg: rgba(37, 211, 102, .8);
  --tblr-btn-disabled-bg: var(--tblr-tabler);
  --tblr-btn-disabled-color: var(--tblr-tabler-fg);
  --tblr-btn-box-shadow: var(--tblr-shadow-button), var(--tblr-shadow-button-inset)
}

.btn-tikTok {
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-color: var(--tblr-github-fg);
  --tblr-btn-bg: var(--tblr-github);
  --tblr-btn-hover-color: var(--tblr-github-fg);
  --tblr-btn-hover-bg: rgba(var(--tblr-github-rgb), .8);
  --tblr-btn-active-color: var(--tblr-github-fg);
  --tblr-btn-active-bg: rgba(var(--tblr-github-rgb), .8);
  --tblr-btn-disabled-bg: var(--tblr-github);
  --tblr-btn-disabled-color: var(--tblr-github-fg);
  --tblr-btn-box-shadow: var(--tblr-shadow-button), var(--tblr-shadow-button-inset)
}

.drag-devider {
  border-right: 3px dashed #333;
  margin-right: -9px;
  margin-left: 7px;
  cursor: ew-resize;
}


.drag-handle {
  display: flex;
  align-items: center;
}

.drag-handle-dots {
  margin-top: -10px;
}

.dropdown-item {
  z-index: 999;
}

.card-transparent {
  background-color: transparent;
}


.react-datepicker-wrapper {
  display: block !important;
}


.tooltip2 {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip2 .tooltiptext {
  visibility: hidden;
  width: 320px;
  background-color: var(--tblr-bg-surface-dark);
  color: #fff;
  text-align: center;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  color: var(--tblr-light);
  font-size: 0.765625rem;

  font-family: var(--tblr-body-font-family);
  font-size: var(--tblr-body-font-size);
  font-weight: var(--tblr-body-font-weight);
  line-height: var(--tblr-body-line-height);
  text-transform: none;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip2:hover .tooltiptext {
  visibility: visible;
}

.tooltip2 .tooltiptext {
  bottom: 100%;
  left: 50%;
  margin-left: -160px;
  z-index: 1080;
  /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip2 .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%;
  /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip2 .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip2:hover .tooltiptext {
  opacity: 1;
}


.table.table-ellipsis tbody td {
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.progress {
  --tblr-progress-bg: var(--tblr-light-darken) !important;
}

.icon-xl {
    --tblr-icon-size: 5.5rem;
    stroke-width: .81
}