:root {
  --tpg-100: #FAF2E8;
  --tpg-200: #F7E9D8;
  --tpg-300: #F2DEC4;
  --tpg-400: #EED4B1;
  --tpg-500: #EAC99D;
  --tpg-600: #E6BE8A;
  --tpg-700: #C09E73;
  --tpg-800: #735F45;
  --tpg-900: #4D3F2E;
  --tpg-1000: #2E261C;

  --tpg-white: #dcdbdb;

  --tpg-nero: #d0cfcf;
  --tpg-nero-rgb: 208, 207, 207;

  --tpg-dark-background: #140f0f;
  --tpg-card-background: #201c1c;
  --tpg-card-box-shadow: 0px -1px 1px 0px rgba(var(--tpg-nero-rgb), 0.10) inset, 0px 1px 1px 0px rgba(var(--tpg-nero-rgb), 0.25) inset, 0px 7.334px 5.501px 0px rgba(0, 0, 0, 0.05);
  --tpg-card-border: 1px solid rgba(255, 255, 255, 0.40);


  --tpg-light-background: #140f0f;
  --neutral: #999999;

  --mid-900: #838385;
  --mid-800: #78787a;
  --mid-700: #6e6e70;
  --mid-600: #626266;
  --mid-500: #5b5b5c;
  --mid-400: #4f4f52;
  --mid-300: #454547;
  --mid-200: #3b3b3d;
  --mid-100: #323233;

  --dark-100: #241d1d;
  --dark-200: #211a1a;
  --dark-300: #1e1818;
  --dark-400: #1a1515;
  --dark-500: #171313;
  --dark-600: #140f0f;
  --dark-700: #110d0d;
  --dark-800: #0d0a0a;
  --dark-900: #0a0808;

  --light-100: #fafafa;
  --light-200: #f3f3f4;
  --light-300: #f0f0f0;
  --light-400: #ebebeb;
  --light-500: #e6e6e6;
  --light-600: #e0e0e0;
  --light-700: #dbdbdb;
  --light-800: #d6d6d6;
  --light-900: #d1d1d1;

  --tpg-complimentary: #8298a5;

  --dt-row-selected: 233, 176, 57 !important;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 9, 10, 11;
  --dt-row-stripe: 0, 0, 0;
  --dt-row-hover: 0, 0, 0;
  --dt-column-ordering: 0, 0, 0;
  --dt-html-background: white;

  --nav-background: var(--light-400);
  --nav-sidebar: var(--light-400);
  --nav-sidebar-width: 310px;
  --nav-sidebar-link: var(--mid-700);
  --nav-sidebar-link-hover: var(--dark-400);
  --nav-sidebar-link-active: var(--dark-900);

  --form-control-background: var(--light-100);
  --form-control-background-active: white;

  --bs-border-radius-lg: calc(var(--bs-border-radius) - (var(--bs-border-width)));
}

[data-bs-theme=dark] .accordion-stats {
  --bs-accordion-active-color: var(--tpg-800) !important;
  --bs-primary-text-emphasis: var(--tpg-800) !important;
  --bs-accordion-btn-focus-border-color: var(--tpg-800) !important;
  --bs-primary-bg-subtle: #3a2c0e !important;
  --bs-accordion-btn-focus-box-shadow: rgba(233, 176, 57, 0.25) !important;
}

[data-bs-theme=dark] .accordion-button.accordion-stats {
  --bs-accordion-normal-background-color: #3a2c0e !important;
  --bs-accordion-normal-color: var(--tpg-600) !important;
}

[data-bs-theme=dark] .accordion-button.accordion-stats::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f8bc3d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f8bc3d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-bs-theme="light"] .accordion-stats {
  --bs-accordion-active-color: #3a2c0e !important;
  --bs-primary-text-emphasis: #ba8d2e !important;
  --bs-accordion-btn-focus-border-color: #a37b28 !important;
  --bs-primary-bg-subtle: #fdbf3e !important;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(233, 176, 57, 0.25) !important;
}

[data-bs-theme=light] .accordion-button.accordion-stats {
  --bs-accordion-normal-background-color: #fdbf3e !important;
  --bs-primary-bg-subtle: #3a2c0e !important;
}

.accordion-button.accordion-stats:not(.collapsed) {
  background-color: transparent;
}

.accordion-button.accordion-stats {
  background-color: var(--bs-accordion-normal-background-color);
  color: var(--bs-accordion-normal-color);
}


/************************************************************************/
/* Fonts */
/************************************************************************/
/* Aktiv Grotesk - Main Font */
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('/static/fonts/AktivGrotesk-Light.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('/static/fonts/AktivGrotesk-Medium.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('/static/fonts/AktivGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('/static/fonts/AktivGrotesk-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Ivy Presto - Header Font */
@font-face {
  font-family: 'Ivy Presto';
  src: url('/static/fonts/ivy-presto-headline-light.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ivy Presto';
  src: url('/static/fonts/ivy-presto-headline-light.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ivy Presto';
  src: url('/static/fonts/ivy-presto-headline-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ivy Presto';
  src: url('/static/fonts/ivy-presto-headline-light.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ivy Presto';
  src: url('/static/fonts/ivy-presto-headline-light.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ivy Presto';
  src: url('/static/fonts/ivy-presto-headline-light.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Base font settings */
body {
  font-family: 'Aktiv Grotesk', sans-serif;
  font-weight: 400;
}


/* Headers use Ivy Presto */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
legend,
h1[class*="display-"],
h2[class*="display-"],
h3[class*="display-"],
h4[class*="display-"],
h5[class*="display-"],
h6[class*="display-"],
.h1[class*="display-"],
.h2[class*="display-"],
.h3[class*="display-"],
.h4[class*="display-"],
.h5[class*="display-"],
.h6[class*="display-"] {
  font-family: 'Ivy Presto', serif;
  font-weight: 300!important;
}

/* Base responsive font sizes using calc() for fluid scaling */
.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

/* Large headers */
.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

/* Secondary headers */
.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

/* Tertiary headers */
.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

/* Quaternary headers */
.fs-5 {
  font-size: calc(1.25rem) !important;
}

/* Standard body text */
.fs-6 {
  font-size: calc(1rem) !important;
}

/* Smaller text */

/* Adjustments at different breakpoints */
/* Small devices (576px and up) */
@media (min-width: 576px) {
  .fs-sm-1 {
    font-size: calc(1.425rem + 1.5vw) !important;
  }

  .fs-sm-2 {
    font-size: calc(1.375rem + 0.9vw) !important;
  }

  .fs-sm-3 {
    font-size: calc(1.35rem + 0.6vw) !important;
  }

  .fs-sm-4 {
    font-size: calc(1.325rem + 0.3vw) !important;
  }

  .fs-sm-5 {
    font-size: calc(1.3rem) !important;
  }

  .fs-sm-6 {
    font-size: calc(1.05rem) !important;
  }
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
  .fs-md-1 {
    font-size: calc(1.475rem + 1.5vw) !important;
  }

  .fs-md-2 {
    font-size: calc(1.425rem + 0.9vw) !important;
  }

  .fs-md-3 {
    font-size: calc(1.4rem + 0.6vw) !important;
  }

  .fs-md-4 {
    font-size: calc(1.375rem + 0.3vw) !important;
  }

  .fs-md-5 {
    font-size: calc(1.35rem) !important;
  }

  .fs-md-6 {
    font-size: calc(1.1rem) !important;
  }
}

/* Large devices (992px and up) */
@media (min-width: 992px) {
  .fs-lg-1 {
    font-size: calc(1.525rem + 1.5vw) !important;
  }

  .fs-lg-2 {
    font-size: calc(1.475rem + 0.9vw) !important;
  }

  .fs-lg-3 {
    font-size: calc(1.45rem + 0.6vw) !important;
  }

  .fs-lg-4 {
    font-size: calc(1.425rem + 0.3vw) !important;
  }

  .fs-lg-5 {
    font-size: calc(1.4rem) !important;
  }

  .fs-lg-6 {
    font-size: calc(1.15rem) !important;
  }
}

/* Extra large devices (1200px and up) */
@media (min-width: 1200px) {
  .fs-xl-1 {
    font-size: calc(1.575rem + 1.5vw) !important;
  }

  .fs-xl-2 {
    font-size: calc(1.525rem + 0.9vw) !important;
  }

  .fs-xl-3 {
    font-size: calc(1.5rem + 0.6vw) !important;
  }

  .fs-xl-4 {
    font-size: calc(1.475rem + 0.3vw) !important;
  }

  .fs-xl-5 {
    font-size: calc(1.45rem) !important;
  }

  .fs-xl-6 {
    font-size: calc(1.2rem) !important;
  }
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1400px) {
  .fs-xxl-1 {
    font-size: calc(1.625rem + 1.5vw) !important;
  }

  .fs-xxl-2 {
    font-size: calc(1.575rem + 0.9vw) !important;
  }

  .fs-xxl-3 {
    font-size: calc(1.55rem + 0.6vw) !important;
  }

  .fs-xxl-4 {
    font-size: calc(1.525rem + 0.3vw) !important;
  }

  .fs-xxl-5 {
    font-size: calc(1.5rem) !important;
  }

  .fs-xxl-6 {
    font-size: calc(1.25rem) !important;
  }
}



/************************************************************************/
/* Components */
/************************************************************************/
.container {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

.content-wrapper {
  min-height: calc(100vh - (56px + 54px));
  /* subtracting nav and footer height*/
  padding-bottom: 50px;
  /* height of footer */
}

@media only screen and (max-width: 600px) {
  .content-wrapper {
    min-height: calc(100vh - (65px + 54px));
    /* subtracting nav and footer height*/
  }
}

html,
body {
  height: 100%;
}

.card {
  font-size: 14px;
  border-radius: var(--bs-border-radius);
  border: 0;
  box-shadow: var(--tpg-card-box-shadow);
  backdrop-filter: blur(50px);
}

.card-btn-group {
  display: inline-flex;
}

.card-btn-group button {
    border: 0.25px solid rgba(var(--tpg-nero-rgb), 0.25);
    background-color: transparent;
    color: #fff;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    transition: background-color 0.3s ease;
    margin: 0 4px;
}

  /* this is required in order to get fixed table headers */
  .dtfh-floatingparent.dtfh-floatingparenthead {
    font-size: 14px;
  }

  a,
  .btn-link,
  .btn-link.text-gold {
    color: var(--tpg-700);
  }

  a.no-link {
    color: inherit !important;
    text-decoration: none !important;
  }

  .text-tpg-complimentary {
    color: var(--tpg-complimentary);
  }

  a svg {
    height: 15px;
    vertical-align: baseline;
    fill: var(--tpg-700);
  }

  a:hover,
  .btn-link:hover,
  .btn-link.text-gold:hover {
    color: var(--tpg-200);
  }

  a:active,
  .btn-link:active,
  .btn-link.text-gold:active {
    color: var(--tpg-300);
  }

  a:hover svg {
    fill: var(--tpg-200);
  }

  a:active svg {
    fill: var(--tpg-300);
  }

  .btn-primary {
    background: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    box-shadow: var(--tpg-card-box-shadow);
    backdrop-filter: blur(50px);
  }


  /************************************************************************/
  /* Typography */
  /************************************************************************/

  h1 {
    line-height: 250%
  }

  h2 {
    font-size: 1.675rem;
  }

  h3 {
    font-size: 1.3rem;
  }

  h4 {
    font-size: 1.1rem;
  }

  body {
    display: flex;
    flex-direction: column;
  }


  .display-8 {
    font-size: 1.3rem;
    line-height: 1.2;
  }

  @media only screen and (max-width: 600px) {
    .display-8 {
      font-size: 1.1rem;
    }
  }

  i.fa-duotone.fa-solid.fa-ranking-star {
    font-weight: bold;
  }

  .font-size-90-percent {
    font-size: 90%;
  }

  .font-size-120-percent {
    font-size: 120%;
  }

  .font-size-150-percent {
    font-size: 150%;
  }

  .text-column-rows-3 {
    column-count: 3
  }

  /************************************************************************/
  /* Columns */
  /************************************************************************/

  @media (max-width: 992px) {
    .text-column-rows-3 {
      column-count: 2
    }
  }

  @media (max-width: 720px) {
    .text-column-rows-3 {
      column-count: 1
    }
  }

  /************************************************************************/
  /* Callout */
  /************************************************************************/

  .callout {
    border-radius: 0.375rem;
    border-left: 0.25rem solid transparent;
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 14px;
    color: var(--bd-callout-color, inherit);
    background-color: var(--bd-callout-bg, var(--bs-gray-100));
    border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
  }

  .callout.callout-warning {
    --bd-callout-color: var(--bs-warning-text-emphasis);
    --bd-callout-bg: var(--bs-warning-bg-subtle);
    --bd-callout-border: var(--bs-warning-border-subtle);
  }

  .callout.callout-danger {
    --bd-callout-color: var(--bs-danger-text-emphasis);
    --bd-callout-bg: var(--bs-danger-bg-subtle);
    --bd-callout-border: var(--bs-danger-border-subtle);
  }

  .callout.callout-info {
    --bd-callout-color: var(--bs-info-text-emphasis);
    --bd-callout-bg: var(--bs-info-bg-subtle);
    --bd-callout-border: var(--bs-info-border-subtle);
  }



  /************************************************************************/
  /* Calendar */
  /************************************************************************/
  .branding-subtle {
    display: none !important;
  }

  /************************************************************************/
  /* Sidebar */
  /************************************************************************/
  .sidebar {
    background: var(--nav-sidebar);
    width: var(--nav-sidebar-width);
    height: 100vh;
    z-index: 1;
    position: fixed;
    transition: width 0.35s ease;
  }

  .sidebar .navbar-brand img {
    transition: padding .35s ease;
  }

  #collapse-overlay-button {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1000;
    display: none;
  }

  #collapseButton {
    line-height: 100%;
  }


  .sidebar .nav-link {
    display: block;
    padding: 12px 30px;
    width: 100%;
    text-align: left;
    color: var(--nav-sidebar-link);
  }

  .sidebar .nav-link:hover {
    color: var(--nav-sidebar-link-hover);
  }

  .sidebar .nav-link.active {
    color: var(--nav-sidebar-link-active)
  }

  .full-width-with-sidebar {
    margin-left: var(--nav-sidebar-width);
    width: -webkit-calc(100% - var(--nav-sidebar-width));
    width: calc(100% - var(--nav-sidebar-width));
  }

  @media (min-width: 991px) {
    .sidebar {
      overflow-y: auto;
    }

    .full-width-with-sidebar.collapsed {
      margin-left: 80px;
      width: -webkit-calc(100% - 80px);
      width: calc(100% - 80px);
    }

    .sidebar.collapsed {
      width: 80px;
    }

    .sidebar.collapsed .navbar-brand img {
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 10px;
    }

    .sidebar.collapsed .nav-link span,
    .sidebar.collapsed .accordion-collapse,
    .sidebar.collapsed .hide-on-collapse,
    .sidebar.collapsed .dropdown-toggle::after {
      display: none;
    }

    .sidebar.collapsed .dropdown-toggle::after {
      content: ""
    }


  }

  @media (max-width: 991px) {
    .sidebar {
      width: 100%;
      height: auto;
      position: relative;
    }

    .full-width-with-sidebar {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }
  }


  .sidebar:not(.collapsed) .nav-link i {
    margin-right: 10px;
  }

  .full-width-with-sidebar {
    transition: margin-left .5s ease;
  }



  /************************************************************************/
  /* Nav Bar */
  /************************************************************************/

  nav.navbar {
    top: 0;
    z-index: 1;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: .75rem 1.5rem;
  }

  nav.navbar,
  footer {
    background-color: var(--nav-background) !important;
  }

  .nav-link {
    font-size: 14px;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    outline: none;
    width: 100%;
  }

  .nav-link:active,
  .nav-link:focus {
    outline: none;
  }

  .nav-link.accordion-button::after {
    background-image: none;
  }

  .nav-link i {
    font-size: 16px;
    width: 25px;
  }

  .nav-link.dropdown-nav-link {
    margin-left: 25px;
    font-size: 14px;
    padding: 8px 30px;
    color: var(--neutral);
    width: -webkit-calc(100% - 25px);
    width: calc(100% - 25px)
  }

  .nav-link.dropdown-nav-link:hover {
    color: var(--nav-sidebar-link-hover);
  }

  .nav-link.dropdown-nav-link.active {
    color: var(--tpg-700)
  }

  .dropdown-toggle::after {
    content: "\f107";
    font-family: "Font Awesome 6 Pro";
    border: none;
    vertical-align: initial;

  }

  .dropdown-toggle.no-dropdown-toggle::after {
    content: "";
  }

  .sidebar .dropdown-toggle.collapsed::after {
    transform: rotate(-90deg);
  }

  .sidebar .dropdown-toggle::after {
    position: absolute;
    right: 30px;
    transform: rotate(0deg);
    transition: transform .2s;
  }

  .sidebar .dropdown-toggle+ul .dropdown-toggle {
    padding: 10px 30px 10px 50px;
  }

  ul.nav ul.nav ul.nav {
    padding-left: 25px;
  }

  .account-user-avatar img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }

  /* tabular navs */
  .nav-pills .nav-link.active,
  .nav-pills .show>.nav-link {
    background-color: var(--tpg-700);
  }

  .navbar-nav .dropdown-menu {
    position: absolute !important;
  }



  /************************************************************************/
  /* Smaller screen adjustments */
  /************************************************************************/
  @media (min-width: 1500px) {
    .col-xxl-2 {
      -ms-flex: 0 0 16.666667%;
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }

    .col-xxl-10 {
      -ms-flex: 0 0 83.333333%;
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }

    .col-xxl-3 {
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 25%;
    }
  }

  @media (max-width: 600px) {
    .full-width-button-container {
      position: fixed;
      bottom: 0;
      width: 100%;
      left: 0;
      margin: 0 !important;
    }

    .full-width-button-container .col {
      padding: 0 !important;
    }

    .full-width-button-container button {
      border-radius: 0;
      line-height: 54px;
    }
  }

  /************************************************************************/
  /* Tab nav */
  /************************************************************************/
  .nav-pills .nav-link:not(.active) {
    color: #333 !important;
  }

  [data-bs-toggle="tab"]:hover {
    cursor: pointer;
  }

  /************************************************************************/
  /* Stages */
  /************************************************************************/
  ul.stages {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  ul.stages li {
    list-style-type: none;
    color: white;
    font-size: 9px;
    width: 33.33%;
    float: left;
    position: relative;
    text-align: center;
  }

  ul.stages .stages-label {
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  ul.stages li .stages-step {
    width: 24px;
    height: 24px;
    line-height: 24px;
    display: block;
    font-size: 12px;
    color: white;
    background: var(--dark-600);
    border-radius: 25px;
    margin: 0 auto 10px auto;
    transition: background .2s ease-in-out;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
  }

  .stages-step:focus,
  .stages-step.dropdown-toggle:focus {
    outline: none
  }

  ul.stages li:after {
    content: '';
    width: 100%;
    height: 3px;
    background: var(--dark-600);
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: 0;
  }

  ul.stages li.active .stages-step,
  ul.stages li.active:after {
    background: var(--tpg-700);
    color: white;
  }

  ul.stages li.active:first-of-type::after,
  .stages-step.dropdown-toggle::after {
    content: none
  }

  ul.stages li:not(.active):hover .stages-step {
    background: var(--tpg-300);
  }

  li.active+li:not(.active):after {
    background: linear-gradient(90deg, rgba(183, 145, 47, 1) 0%, rgba(71, 71, 71, 1) 100%);
  }

  /************************************************************************/
  /* Dropdown */
  /************************************************************************/
  .dropdown-item {
    cursor: pointer;
    user-select: none;
  }

  .bootstrap-select .dropdown-menu li a.active {
    color: #fff;
  }

  .bootstrap-select .dropdown-menu {
    width: 100%;
  }

  .bootstrap-select .no-results {
    background: transparent;
  }

  .bootstrap-select .dropdown-toggle:focus,
  .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: none !important;
  }

  .bootstrap-select>select {
    left: 0 !important;
  }

  .dropdown.bootstrap-select > .dropdown-menu .inner .dropdown-menu {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /************************************************************************/
  /* Form */
  /************************************************************************/

  legend {
    font-size: 1.675rem;
    margin: 0 0 1.5em;
  }

  fieldset {
    padding-top: 3em;
    padding-bottom: 3em;
  }

  button[type="submit"] {
    margin-top: 2em;
  }

  select {
    cursor: pointer;
  }

  .form-label {
    margin-bottom: .25rem;
  }

  label {
    padding: 5px;
    display: block;
    font-size: 90%;
    font-style: italic;
  }

  [required]+label::after,
  .required+label::after {
    content: " *";
    color: red;
    font-weight: bold;
  }


  .form-control,
  .form-select {
    background-color: var(--form-control-background);
  }

  .form-control-lg {
    border-radius: var(--bs-border-radius) !important;
  }

  .form-control:hover,
  textarea.form-control:hover,
  .form-select:hover,
  .form-control:active,
  .form-select:active,
  .form-control:focus,
  .form-select:focus {
    background-color: var(--form-control-background-active);
  }

  select option {
    color: black
  }

  .row legend {
    flex: 0 0 auto;
    width: 100%;
  }

  .form-row-group {
    margin-bottom: 1em;
    padding-bottom: 1em;
  }

  .modern form {
    padding: 3rem;
    background: white;
  }

  .sub-section-header,
  legend {
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .form-control>.form-control {
    border: none;
  }

  form textarea.form-control {
    height: 60px;
  }

  [data-bs-theme=dark] .form-control,
  [data-bs-theme=dark] .form-select {
    background-color: var(--mid-100);
  }

  [data-bs-theme=dark] .form-control:hover,
  [data-bs-theme=dark] .form-select:hover,
  [data-bs-theme=dark] .form-control:active,
  [data-bs-theme=dark] .form-select:active,
  [data-bs-theme=dark] .form-control:focus,
  [data-bs-theme=dark] .form-select:focus {
    background-color: var(--mid-400);
  }

  .form-control:focus,
  .form-select:focus {
    border-color: var(--bs-focus-border-color);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
  }

  .input-group-text {
    padding: 0 20px!important;
    height: 100%!important;
  }

  .input-group-append .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .input-group-prepend .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
  }

  form.no-label label {
    display: none;
  }

  .modern form input,
  .modern form textarea,
  .modern form select {
    padding: .7rem 1.6rem;
    font-size: .9375rem;
    line-height: 1.875;
    color: var(--dark-300);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e2e2e2;
  }

  .modern form input,
  .modern form select {
    height: 50px;
  }

  .modern form textarea {
    height: 150px;
  }

  .modern form button {
    padding: .7rem 1.6rem;
    font-size: 1rem;
    height: 50px;
  }

  form .pre-dollar-sign {
    position: relative;
  }

  form .pre-dollar-sign:after {
    position: absolute;
    content: "$";
    height: calc(1.5em + .75rem + 2px);
    line-height: calc(1.5em + .75rem + 2px);
    top: 0;
    left: 5px;
    z-index: 1;
  }

  form .pre-dollar-sign input {
    padding-left: 1rem !important;
  }

  /* Color-agnostic Inset Liquid Glass Search Input */

input.form-control:not([type="button"]):not([type="submit"]):not([type="reset"]):hover {
  background-color: rgba(61, 61, 64, 0.25);
}

input.form-control:not([type="button"]):not([type="submit"]):not([type="reset"]):focus {
  background-color: rgba(61, 61, 64, 0.25);
}

input.form-control:not([type="button"]):not([type="submit"]):not([type="reset"]) {
  padding: 10px 20px;
  font-weight: 400;
  font-family: inherit;
  color: inherit;

  /* Fully transparent background */
  background-color: var(--input-background);

  /* No border or very subtle transparent border */
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;

  /* Inset shadow from above creates the recessed effect */
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15);

  /* Remove default styling */
  outline: none;
  -webkit-appearance: none;

  /* Smooth transitions */
  transition: all 0.2s ease;

  border-top:0;
  border-left:0;
  border-right:0;
}

/* Placeholder styling */
input[type="text"]::placeholder {
  color: currentColor;
  opacity: 0.5;
}

/* Focus state - stronger inset shadow */
input[type="text"]:focus {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

/* Alternative: No border version */
.liquid-glass-search-clean {
  width: 100%;
  padding: 18px 24px;
  font-size: 18px;
  font-weight: 400;
  font-family: inherit;
  color: inherit;

  /* Fully transparent */
  background: transparent;

  /* No border */
  border: none;
  border-radius: 16px;

  /* Inset shadow only */
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.12);

  outline: none;
  -webkit-appearance: none;
  transition: all 0.2s ease;
}

.liquid-glass-search-clean::placeholder {
  color: currentColor;
  opacity: 0.5;
}

.liquid-glass-search-clean:focus {
  box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.18);
}

/* Stronger inset shadow version for more depth */
.liquid-glass-search-deep {
  width: 100%;
  padding: 18px 24px;
  font-size: 18px;
  font-weight: 400;
  font-family: inherit;
  color: inherit;

  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 16px;

  /* Stronger inset shadow for deeper recessed effect */
  box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.2);

  outline: none;
  -webkit-appearance: none;
  transition: all 0.2s ease;
}

.liquid-glass-search-deep::placeholder {
  color: currentColor;
  opacity: 0.45;
}

.liquid-glass-search-deep:focus {
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 3px 8px 0 rgba(0, 0, 0, 0.25);
}

/* For dark backgrounds - adjusted shadow opacity */
@media (prefers-color-scheme: dark) {
  .liquid-glass-search {
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  }

  .liquid-glass-search:focus {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.4);
  }

  .liquid-glass-search-clean {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  }

  .liquid-glass-search-clean:focus {
    box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.35);
  }
}

/* Minimal version - closest to your examples */
.liquid-glass-minimal {
  width: 100%;
  padding: 18px 24px;
  font-size: 18px;
  font-weight: 400;
  font-family: inherit;
  color: inherit;
  background: transparent;

  /* Single pixel border with varying opacity */
  border: 1px solid;
  border-radius: 16px;

  /* Subtle gradient-like border effect */
  border-color: rgba(128, 128, 128, 0.2);

  /* The magic: different shadows create the inset illusion */
  box-shadow:
    /* Inset shadow from top-left */
    inset 1px 1px 1px rgba(0, 0, 0, 0.08),
    /* Highlight on bottom edge */
    0 1px 0 rgba(255, 255, 255, 0.05);

  outline: none;
  -webkit-appearance: none;
  transition: all 0.15s ease;
}

.liquid-glass-minimal::placeholder {
  color: currentColor;
  opacity: 0.45;
}

.liquid-glass-minimal:focus {
  border-color: rgba(128, 128, 128, 0.25);
  box-shadow:
    inset 1px 1px 2px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.08);
}

/* For better visibility on very dark backgrounds */
@supports (backdrop-filter: none) {
  .liquid-glass-search-subtle {
    width: 100%;
    padding: 18px 24px;
    font-size: 18px;
    font-weight: 400;
    font-family: inherit;
    color: inherit;

    /* Very subtle tinted background */
    background: rgba(255, 255, 255, 0.02);

    /* Very light blur to soften the inset edge */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    /* Soft border */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;

    /* Inset shadow creating the carved effect */
    box-shadow:
      /* Top shadow for depth */
      inset 0 2px 4px rgba(0, 0, 0, 0.4),
      /* Soft inner glow at bottom */
      inset 0 -1px 0 rgba(255, 255, 255, 0.06),
      /* Very subtle outer shadow for definition */
      0 0 0 1px rgba(0, 0, 0, 0.2);

    outline: none;
    -webkit-appearance: none;
    transition: all 0.2s ease;
  }

  .liquid-glass-search-subtle::placeholder {
    color: currentColor;
    opacity: 0.4;
  }

  .liquid-glass-search-subtle:focus {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);

    box-shadow:
      inset 0 3px 6px rgba(0, 0, 0, 0.5),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(0, 0, 0, 0.3);
  }
}

  .clear-form-button {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 100px;
    height: 25px;
    font-size: 90%;
  }

  #clear-form {
    opacity: 50%;
    position: absolute;
    width: 100%;
    line-height: 25px;
    border-radius: 10px;
    background-color: var(--tpg-700);
    cursor: pointer;
    color: white;
    transition: opacity 0.2s;
    /*display: none;*/
  }

  #clear-form:hover {
    opacity: 1;
  }

  #clear-form:active {
    background-color: #61292f;
  }


  .helptext {
    color: #6c757d !important;
    display: block;
    margin-top: .25rem;
  }


  .hidden {
    display: none;
  }

  footer {
    font-size: 90%;
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    margin-top: -53px;
    /* nav (54px) + footer (53px) + padding (30px) */
  }

  footer a {
    color: white;
  }

  footer a:hover {
    color: white;
  }

  .border-danger {
    border-color: #F44336 !important;
  }

  .text-danger {
    color: #F44336 !important;
  }

  .progress-bar-danger {
    background: #F44336 !important;
  }

  .border-warning {
    border-color: #FFC107 !important;
  }

  .text-warning {
    color: #FFC107 !important;
  }

  .text-tpg {
    color: var(--tpg-700) !important;
  }

  .text-muted {
    color: var(--mid-900) !important;
  }

  .text-extra-small {
    font-size: 80%;
  }

  .btn-rezen {
    background-color: #05c3f9;
    color: white !important;
  }

  .btn-rezen:hover {
    background-color: #02a1cf;
  }

  /*.btn.focus, .btn:focus {*/
  /*    outline: 0;*/
  /*    box-shadow: 0 0 0 0.2rem rgba(192, 152, 57, 0.25);*/
  /*}*/

  .docs,
  .contacts {
    display: none;
  }


  .errorlist {
    color: red;
    font-size: 90%;
    font-style: italic;
    padding-left: 20px;
  }

  .errorlist.nonfield {
    font-size: 100%;
    font-style: normal;
    padding-left: 0;
    list-style: none;
  }

  .errorlist.nonfield li {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: .25rem;
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
  }

  .errorlist.nonfield li a {
    text-decoration: underline;
    color: inherit;
  }

  .errorlist.nonfield li a:hover {
    color: inherit !important;
  }

  .errorlist:not(.nonfield) li {
    color: red !important;
  }


  .no-border {
    border: 0 !important;
  }

  /************************************************************************/
  /* List */
  /************************************************************************/
  .listview-row {
    border-bottom: 1px solid #e2e2e2;
    border-top: 1px solid #e2e2e2;
    margin-bottom: -1px;
  }

  .list-group-item {
    background: transparent;
    border-color: #35363a;
  }


  /************************************************************************/
  /* Progress bars */
  /************************************************************************/
  .progress {
    height: 14px;
    font-size: 12px;
    line-height: 14px;
    font-weight: bold;
  }


  .progress-circle {
    width: 130px;
    height: 130px;
    background: none;
    position: relative;
  }

  .progress-circle::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 10px solid #eee;
    position: absolute;
    top: 0;
    left: 0;
  }

  .progress-circle>span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
  }

  .progress-circle .progress-circle-left {
    left: 0;
  }

  .progress-circle .progress-circle-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 10px;
    border-style: solid;
    position: absolute;
    top: 0;
  }

  .progress-circle .progress-circle-left .progress-circle-bar {
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
  }

  .progress-circle .progress-circle-right {
    right: 0;
  }

  .progress-circle .progress-circle-right .progress-circle-bar {
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
  }

  .progress-circle .progress-circle-value {
    position: absolute;
    top: 0;
    left: 5px;
  }


  /************************************************************************/
  /* Cards */
  /************************************************************************/
  .card.scrollable-card {
    min-height: 200px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .card-header {
    font-weight: bold;
  }

  /* card footer from bootstrap.css */
  div.dataTables_wrapper div.dataTables_info {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    color: var(--bs-card-cap-color);
    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
  }

  .card-table tbody td:first-child,
  .card-table thead th:first-child {
    padding-left: 1.5rem !important;
  }

  table.dataTable.card-table {
    margin-top: 0 !important;
  }

  table.dataTable.card-table thead>tr>th {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  [data-bs-theme=dark] table.dataTable.card-table thead>tr>th {
    background: var(--dark-800) !important;
  }

  .card.scrollable-card .card-body {
    max-height: 131px;
    overflow-y: scroll;
  }

  .csat .agent-card .content-body {
    height: 171px;
  }

  .graphic.card .card-body {
    position: absolute !important;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
  }

  .card .represented {
    opacity: .5;
  }

  a>.card {
    opacity: 0.75;
    transition: opacity 0.2s;
  }

  a:hover>.card {
    opacity: 1.0;
  }


  .card-detached-footer {
    padding: 0.65rem 1.5rem !important;
    border: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, #Bc8339 0%, #Bb9236 20%, #Dcbc51 40%, #F6dd6b 60%, #Eed56b 80%, #f5e56a 100%);
    min-height: 49px;
    position: relative;
    font-size: 15px;
    background: white;
  }


  .rotating-text {
    position: absolute;
    line-height: 21px;
  }

  .rotating-text.rotating-value {
    right: 0;
  }

  .rotating-text.rotating-label {
    text-align: right;
    padding-right: 0;
    right: 0;
  }

  .card-detached-footer:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1.5rem;
    top: calc(-1.5rem - 1px);
    left: 0;
    background: linear-gradient(transparent 0%, #ffffff 99%);
  }

  [data-bs-theme="dark"] .card-detached-footer:before {
    content: "";
    background: linear-gradient(transparent 0%, #000000 99%);
  }

  .completed .card-detached-footer {
    background: #25b720 !important;
  }

  .card-detached-footer .label {
    font-size: 16px;
  }

  .card-detached-footer .value-type-container {
    height: 21px;
    line-height: 21px;
  }

  .card-detached-footer .value-type-container {
    width: 80px;
    margin-left: auto;
  }

  .card-detached-footer .value-type-container {
    width: 50%;
    float: left;
  }

  .card-detached-footer .value-type-container .label {
    width: 100%;
    position: absolute;
    text-align: right;
    line-height: 21px;
    padding-right: 0;
    right: 0;
  }


  /************************************************************************/
  /* Badge notification */
  /************************************************************************/
  .badge-pill {
    cursor: pointer;
  }

  /************************************************************************/
  /* Dark */
  /************************************************************************/

  .btn-tpg-outline {
    color: var(--dark-700) !important;
    text-decoration: none !important;
  }

  [data-bs-theme=dark] .btn-tpg-outline {
    color: white !important;
  }

  .dropdown-item.active,
  .dropdown-item:active {
    background-color: var(--tpg-700)
  }

  [data-bs-theme=dark] .nav-pills .nav-link {
    color: white;
  }

  [data-bs-theme=dark] .card-header {
    border-color: rgba(255, 255, 255, .125) !important
  }



  [data-bs-theme=dark] .tooltip-inner {
    background-color: white;
    color: var(--dark-900);
  }

  [data-bs-theme=dark] .arrow {
    color: var(--dark-900);
  }

  [data-bs-theme=dark] .bs-tooltip-top .arrow:before {
    top: 0;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: white;
  }

  [data-bs-theme=dark] .nav-pills .nav-link:not(.active) {
    color: var(--neutral) !important;
  }

  /************************************************************************/
  /* Modal */
  /************************************************************************/
  /* required override because most modals are in `.row`s */
  .row>.modal {
    padding-left: 0;
    padding-right: 0;
  }

  [data-bs-theme=dark] .modal-content {
    background: var(--dark-200);
  }

  [data-bs-theme=dark] .close {
    color: #fff;
    text-shadow: 0 1px 0 #000;
  }

  [data-bs-theme=dark] .modal-title {
    font-weight: 700;
    color: white !important;
  }

  [data-bs-theme=dark] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important
  }

  div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {
    color: var(--dark-300);
  }


  [data-bs-theme=dark] .input-group-text {
    border-color: var(--bs-tertiary-bg);
  }

  [data-bs-theme=dark] .input-group-append .input-group-text {
    border-top: 0;
    border-right: 0;
  }

  [data-bs-theme=dark] .form-control:disabled,
  [data-bs-theme=dark] .form-control[readonly] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  [data-bs-theme=dark] .card-detached-footer {
    background-color: var(--dark-500);
  }


  [data-bs-theme=dark] a:hover svg {
    fill: var(--tpg-700);
  }

  /* specifically for showing the email that will be sent to client/vendor on transaction page */
  .modal-content td {
    box-sizing: content-box;
  }

  .are-you-sure {
    display: none;
  }

  /************************************************************************/
  /* Spinner */
  /************************************************************************/
  .spinner-border-sm {
    border-width: .25em;
    vertical-align: bottom;
    width: .8rem;
    height: .8rem;
  }

  /************************************************************************/
  /* Datetable */
  /************************************************************************/
  [data-bs-theme=dark] table.dataTable tbody tr>.dtfc-fixed-left,
  [data-bs-theme=dark] table.dataTable tbody tr>.dtfc-fixed-right,
  [data-bs-theme=dark] table.dataTable td:not(.bg-transparent) {
    background: var(--dark-600) !important;
  }

  table.dataTable td {
    vertical-align: middle !important;
  }

  table.dataTable tr.selected,
  table.dataTable .selected {
    background-color: var(--tpg-700) !important;
  }

  table.dataTable thead th {
    white-space: nowrap
  }

  /* removes random border placed at the edge of the table */
  .dataTables_scroll div.dataTables_scrollBody {
    border: 0 !important;
  }

  /************************************************************************/
  /* Datetable > Search pane */
  /************************************************************************/
  [data-bs-theme=dark] div.dtsp-panesContainer div.dtsp-searchPane div.dataTables_wrapper {
    border-color: rgba(255, 255, 255, .125) !important;
  }

  [data-bs-theme=dark] div.dtsp-panesContainer div.dataTables_wrapper div.dataTables_scrollBody {
    background: rgba(255, 255, 255, .05) !important;
  }


  /************************************************************************/
  /* Datetable > Highcharts */
  /************************************************************************/
  .highcharts-background {
    fill: none;
    background: transparent;
  }

  [data-bs-theme=dark] text.highcharts-title {
    fill: white !important;
    color: white !important;
  }

  .highcharts-data-label text,
  .highcharts-tooltip text {
    font-size: 15px !important;
    font-weight: normal !important;
  }

  text.highcharts-title {
    font-size: 20px !important;
    font-weight: bold !important;
  }

  [data-bs-theme=dark] .highcharts-tooltip text {
    fill: black !important;
    color: black !important;
  }


  /************************************************************************/
  /* Datetable > Pagination */
  /************************************************************************/

  .page-item .page-link {
    border-radius: 40px;
  }

  .page-item.active .page-link {
    background: var(--tpg-700);
    border-color: var(--tpg-700);
  }

  .paginate_button a {
    color: #333;
    background-color: transparent;
    border-color: transparent;
  }

  [data-bs-theme=dark] .paginate_button a {
    color: #eee;
  }

  .paginate_button a:hover {
    color: var(--tpg-700);
    background-color: transparent;
    border-color: transparent;
  }

  .page-item.active .page-link:hover {
    color: white !important;
  }

  .page-item.disabled .page-link {
    background-color: transparent;
    border-color: transparent;
  }

  [data-bs-theme=dark] text {
    fill: white !important;
    color: white !important;
  }

  [data-bs-theme=dark] text * {
    stroke-width: 0 !important;
  }


  /************************************************************************/
  /* Collapse */
  /************************************************************************/
  .collapse-toggle:before {
    font-family: "Font Awesome 6 Pro";
    content: "\f068";
    font-size: 1rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
  }

  .collapsed.collapse-toggle:before {
    content: "\f067"
  }

  /************************************************************************/
  /* Carousel */
  /************************************************************************/

  .carousel-indicators.text-indicators li {
    text-indent: 0;
    border-bottom: 2px solid #fff;
    background: transparent;
    padding: 10px 20px;
    height: auto;
    width: auto;
    font-size: 90%;
  }


  /************************************************************************/
  /* Badge Icons */
  /************************************************************************/
  .badge-container {
    position: absolute;
    bottom: -5px;
    left: -5px;
    width: 100%;
    height: 20px;
    transition: left .2s;
    -webkit-transition: left .2s;
  }


  .badge-icon {
    left: 0;
    position: absolute;
    font-size: 12px;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 21px;
    border-radius: 50%;
    color: white !important;
    /*box-shadow: 2px 2px 2px rgb(0 0 0 / 40%);*/
    z-index: 5;
  }

  .card-header .badge-icon {
    transition-property: left, transform;
    transition-duration: .5s;
    transition-timing-function: ease;
  }

  .card-header:hover .badge-icon:nth-child(1) {
    transform: rotate(360deg);
  }

  .card-header:hover .badge-icon:nth-child(2) {
    left: 22px;
    transform: rotate(360deg);
  }

  .card-header:hover .badge-icon:nth-child(3) {
    left: 44px;
    transform: rotate(720deg);
  }

  .badge-icon.birthday-icon {
    background: var(--tpg-700);
  }

  .badge-icon.calls-logged-icon {
    background: rgb(112, 32, 183);
  }

  .badge-icon.texts-logged-icon {
    background: rgb(32, 183, 112);
  }

  .badge-icon.zillow-reviews-icon {
    background: rgb(54, 162, 235);
  }

  .badge-icon.zillow-my-agent-icon {
    background: rgb(183, 32, 112);
  }

  .badge-icon.zillow-chart-icon {
    background: rgb(183, 102, 112);
  }

  .badge-icon:nth-child(2) {
    left: 5px;
    z-index: 4;
  }

  .badge-icon:nth-child(3) {
    left: 10px;
    z-index: 3;
  }

  /************************************************************************/
  /* Breadcrumbs */
  /************************************************************************/
  .breadcrumb small {
    font-size: .8em
  }

  /************************************************************************/
  /* Points */
  /************************************************************************/
  .total-points-container {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: 1000;
    color: white;
    background: var(--tpg-700);
    text-align: right;
    padding: 10px 30px;
    border-color: var(--tpg-700);
    font-size: 120%;
  }


  /************************************************************************/
  /* HTMX */
  /************************************************************************/
  .htmx-indicator {
    display: none;
  }

  /************************************************************************/
  /* Helper */
  /************************************************************************/

  .line-height-40px {
    line-height: 40px;
  }

  .no-radius-top-right {
    border-top-right-radius: 0 !important;
  }

  .no-radius-bottom-right {
    border-bottom-right-radius: 0 !important;
  }

  .no-radius-bottom-left {
    border-bottom-left-radius: 0 !important;
  }

  .no-radius-top-left {
    border-top-left-radius: 0 !important;
  }

  .no-radius-bottom {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .no-radius-top {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
  }

  .f-11 {
    font-size: 11px;
  }

  .f-12 {
    font-size: 12px !important;
  }

  .f-14 {
    font-size: 14px;
  }

  .f-16 {
    font-size: 16px;
  }

  .f-20 {
    font-size: 20px;
  }

  .f-25 {
    font-size: 25px;
  }

  .f-100 {
    font-size: calc(85px + 1.5vw);
  }

  .f-125 {
    font-size: 125px;
  }

  .f-95-percent {
    font-size: 95%;
  }

  .flex-basis-100 {
    flex-basis: 100%;
  }


  .no-outline,
  .no-outline:focus,
  .no-outline:active {
    outline: none !important;
    box-shadow: none !important;
  }

  .select-as-text {
    appearance: none;
    background: transparent;
    border: transparent;
    color: inherit;
    cursor: pointer;
  }

  .no-visible-link:not([class*=text-]) {
    color: inherit !important;
    text-decoration: none !important;
  }

  .w-85px {
    width: 85px;
  }

  .h-75px {
    height: 75px;
  }

  .h-20px {
    height: 20px;
  }

  .min-w-200px {
    min-width: 200px;
  }

  .min-w-700px {
    min-width: 700px;
  }

  .h-100 {
    height: 100%;
  }

  .min-h-150 {
    min-height: 150px;
  }

  .max-h-300px {
    max-height: 300px !important;
    overflow-y: auto;
  }

  .max-h-500px {
    max-height: 500px !important;
  }

  [data-bs-theme=dark] .border-bottom,
  [data-bs-theme=dark] .border-top,
  [data-bs-theme=dark] .border-right,
  [data-bs-theme=dark] .border-left {
    border-color: var(--mid-300) !important;
  }

  .py-6 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .text-red {
    color: #ff6384 !important;
  }

  .text-orange {
    color: #ff9f40 !important;
  }

  .text-yellow {
    color: #ffcd56 !important;
  }

  .text-green {
    color: #20B770 !important;
  }

  .text-teal {
    color: #4bc0c0 !important;
  }

  .text-blue {
    color: #36a2eb !important;
  }

  .text-purple {
    color: #9966ff !important;
  }


  .text-overflow-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .row {
    --bs-gutter-x: .75rem;
  }

  /************************************************************************/
  /* Variables */
  /************************************************************************/
  .btn {
    --bs-btn-border-radius: 40px;
  }

  div.form-control .btn {
    --bs-btn-border-radius: 0px;
    border-top-right-radius: .375rem;
    border-top-left-radius: .375rem;
  }


  .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tpg-800);
    --bs-btn-border-color: var(--tpg-800);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tpg-900);
    --bs-btn-hover-border-color: var(--tpg-900);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tpg-1000);
    --bs-btn-active-border-color: var(--tpg-1000);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--tpg-900);
    --bs-btn-disabled-border-color: var(--tpg-900);
  }

  .btn-outline-primary {
    --bs-btn-color: var(--tpg-800);
    --bs-btn-border-color: var(--tpg-800);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tpg-900);
    --bs-btn-hover-border-color: var(--tpg-900);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tpg-800);
    --bs-btn-active-border-color: var(--tpg-800);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--tpg-700);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--tpg-700);
    --bs-gradient: none;
  }

  [data-bs-theme=light] .card {
    --bs-card-bg: #fff;
    --bs-card-cap-bg: #e6e6e6;
    --bs-card-bg-rgb: 255, 255, 255;
  }

  .dropdown-menu {
    background: var(--dropdown-background);
    border: var(--bs-btn-border-color);
    box-shadow: var(--tpg-card-box-shadow);
    backdrop-filter: blur(var(--dropdown-blur));
  }

  :root,
  .btn-link {
    --bg-dark-1: #141415;
    --bs-btn-active-color: var(--tpg-800);
  }

  :root,
  [data-bs-theme=light] {
    --bs-blue: var(--tpg-700);
    --bs-primary-rgb: 233, 176, 57;
    --bs-primary-text-emphasis: #664d18;
    --bs-primary-border-subtle: #ffe09e;
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--bg-dark-1);
    --bs-body-color-rgb: 230, 230, 230;
    --bs-body-bg: #f8f9fa;
    --bs-body-bg-rgb: 248, 249, 250;
    --bs-card-bg: #fff;
    --bs-card-bg-rgb: 255, 255, 255;
    --bs-link-color: var(--tpg-700);
    --bs-link-color-rgb: 233, 176, 57;
    --bs-link-hover-color: var(--tpg-800);
    --bs-link-hover-color-rgb: 201, 158, 48;
    --bs-border-radius: 12px;
    --bs-focus-border-color: rgb(252, 197, 56);
    --bs-focus-ring-color: rgba(252, 195, 61, 0.25);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.1);
    --bs-tertiary-bg: #c5c6c7;
    --bs-accordion-active-bg: var(--bs-btn-active-color);
    --input-background: rgba(200, 200, 200, 0.25);
    --dropdown-background: rgba(200, 200, 200, 0.35);
    --dropdown-blur: 3px;
  }

  [data-bs-theme=dark] .card {
    --bs-card-bg: var(--tpg-card-background);
    --bs-card-bg-rgb: 59, 55, 55;
  }

  [data-bs-theme=dark],
  .dark {
    --bs-body-bg: var(--tpg-dark-background);
    --bs-body-bg-rgb: 240, 5, 8;
    --bs-body-color: var(--light-700);
    --bs-body-color-rgb: 232, 232, 235;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.05);
    --bs-card-bg: var(--dark-500);
    --bs-card-bg-rgb: 59, 55, 55;
    --bs-tertiary-bg: var(--dark-800);
    --nav-background: var(--dark-700);
    --nav-sidebar: var(--dark-700);
    --nav-sidebar-link: var(--mid-900);
    --nav-sidebar-link-hover: var(--light-900);
    --nav-sidebar-link-active: var(--light-100);
    --form-control-background: var(--mid-100);
    --form-control-background-active: var(--mid-400);
    --input-background: rgba(0, 0, 0, 0.25);
    --dropdown-background: rgba(0, 0, 0, 0.35);
    --dropdown-blur: 3px;
  }

  [data-bs-theme=light] .accordion {
    --bs-accordion-active-bg: var(--bs-btn-active-color);
  }