/* Start Resets */
  html {
        font-size: 100%; /* This ensures 1rem = 16px (default browser font size) */
  }
  html, body {
    height: 100%;
    overflow: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
  }
  body::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
  }
/* End Resets */
/* Start Bootstrap */
  :root,
  [data-bs-theme=light] {
      --bs-primary: #3A70B7;
      --bs-primary-rgb: 58, 112, 183;
      --bs-primary-subtle: #759acc;
      --bs-primary-subtle-rgb: 215,226,240;
      --bs-secondary: #D9D9D9;
      --bs-secondary-rbg: 217, 217, 217;
      --bs-light: #f2f2f2;
      --bs-light-rgb: 242, 242, 242;
      --bs-dark: #4C4C4D;
      --bs-dark-rgb: 76, 76, 77, 1;
      --bs-gray-400: #ced4da;
      --bs-gray-500: #adb5bd;
      --bs-text-success: #3CB749;
      --bs-text-success-rgb: 60, 183, 73;
      --bs-text-danger: #981b1e;
      --bs-text-danger-rgb: 152, 27, 30;
  }
  .bg-primary { background-color: var(--bs-primary)!important;}
  .bg-primary-subtle { background-color: var(--bs-primary-subtle)!important;}
  .bg-secondary { background-color: rgba(var(--bs-secondary-rbg),.3);}
  .border-secondary { border: var(--bs-secondary) solid 1px;}
  .text-success { color: var(--bs-text-success) }
  .text-danger { color: var(--bs-text-danger) }
  /* Default container (Bootstrap 5) */
  .container {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
  }

  @media (min-width: 576px) {
    .container {
      max-width: 540px;
    }
  }

  @media (min-width: 768px) {
    .container {
      max-width: 720px;
    }
  }

  @media (min-width: 992px) {
    .container {
      max-width: 960px;
    }
  }

  @media (min-width: 1200px) {
    .container {
      max-width: 1140px;
    }
  }

  @media (min-width: 1400px) {
    .container {
      max-width: 1320px;
    }
  }
  /* Default Text (Bootstrap 5) */
  .text-primary { color: var(--bs-primary)!important; }

  /* Progress */
  .progress {
      height: 2rem!important;
      margin-bottom: 20px;
      overflow: hidden;
      background-color: #f5f5f5;
      border-radius: 5px;
      -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
      box-shadow: inset 0 1px 2px rgba(0,0,0,.1)
  }

  .progress-bar {
      float: left;
      width: 0;
      height: 100%;
      font-size: .875rem!important;
      font-weight: bold;
      line-height: 2rem!important;
      color: #fff;
      text-align: center;
      background-color: var(--bs-primary);
      -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
      box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
      -webkit-transition: width .6s ease;
      -o-transition: width .6s ease;
      transition: width .6s ease
  }
  .display-3 {
    font-size: calc(1.525rem + 3.3vw);
    font-weight: 300;
    line-height: 1.2;
  }
    @media (min-width: 1200px) {
      .display-3 {
          font-size: 4rem;
      }
  }
  .display-4 {
      font-size: calc(1.475rem + 2.7vw);
      font-weight: 300;
      line-height: 1.2;
  }
    @media (min-width: 1200px) {
      .display-4 {
          font-size: 3.5rem;
      }
  }
  hr {
    border-top: 2px solid #eee;
  }
/* End Bootstrap */
/* Start Spacing */
.my-100 { margin-top: 50px; margin-bottom: 50px;}
.mt-80 { margin-top: 80px;}
.mb-50 { margin-bottom: 50px;}
    @media screen and (min-width: 992px) {
        .mt-lg-100 { margin-top: 100px;}
    }

/* End Spacing */
/* Start Layouts */
.readable-paragraph { max-width: 65ch; }
.readable-headline { max-width: 90ch; }
/* Start grid-col */
.d-grid { display: grid;}
.grid-col-1 { grid-template-columns: 1fr;}
.grid-col-2 { grid-template-columns: repeat(2, 1fr);}
.grid-col-3 { grid-template-columns: repeat(3, 1fr);}
.grid-col-4 { grid-template-columns: repeat(4, 1fr);}
.grid-col-5 { grid-template-columns: repeat(5, 1fr);}
.grid-col-6 { grid-template-columns: repeat(6, 1fr);}
.grid-col-7 { grid-template-columns: repeat(7, 1fr);}
.grid-col-8 { grid-template-columns: repeat(8, 1fr);}
.grid-col-9 { grid-template-columns: repeat(9, 1fr);}
.grid-col-10 { grid-template-columns: repeat(10, 1fr);}
.grid-col-11 { grid-template-columns: repeat(11, 1fr);}
.grid-col-12 { grid-template-columns: repeat(12, 1fr);}
.gap-1 { gap: .25rem }
.gap-2 { gap: .5rem }
.gap-3 { gap: 1rem }
.gap-4 { gap: 1.5rem }
.gap-5 { gap: 3rem }
@media only screen and (min-width: 576px) {
  .grid-col-sm-1 { grid-template-columns: 1fr;}
  .grid-col-sm-2 { grid-template-columns: repeat(2, 1fr);}
  .grid-col-sm-3 { grid-template-columns: repeat(3, 1fr);}
  .grid-col-sm-4 { grid-template-columns: repeat(4, 1fr);}
  .grid-col-sm-5 { grid-template-columns: repeat(5, 1fr);}
  .grid-col-sm-6 { grid-template-columns: repeat(6, 1fr);}
  .grid-col-sm-7 { grid-template-columns: repeat(7, 1fr);}
  .grid-col-sm-8 { grid-template-columns: repeat(8, 1fr);}
  .grid-col-sm-9 { grid-template-columns: repeat(9, 1fr);}
  .grid-col-sm-10 { grid-template-columns: repeat(10, 1fr);}
  .grid-col-sm-11 { grid-template-columns: repeat(11, 1fr);}
  .grid-col-sm-12 { grid-template-columns: repeat(12, 1fr);}
}
@media only screen and (min-width: 768px) {
    .grid-col-md-1 { grid-template-columns: 1fr;}
    .grid-col-md-2 { grid-template-columns: repeat(2, 1fr);}
    .grid-col-md-3 { grid-template-columns: repeat(3, 1fr);}
    .grid-col-md-4 { grid-template-columns: repeat(4, 1fr);}
    .grid-col-md-5 { grid-template-columns: repeat(5, 1fr);}
    .grid-col-md-6 { grid-template-columns: repeat(6, 1fr);}
    .grid-col-md-7 { grid-template-columns: repeat(7, 1fr);}
    .grid-col-md-8 { grid-template-columns: repeat(8, 1fr);}
    .grid-col-md-9 { grid-template-columns: repeat(9, 1fr);}
    .grid-col-md-10 { grid-template-columns: repeat(10, 1fr);}
    .grid-col-md-11 { grid-template-columns: repeat(11, 1fr);}
    .grid-col-md-12 { grid-template-columns: repeat(12, 1fr);}
}
@media only screen and (min-width: 992px) {
    .grid-col-lg-1 { grid-template-columns: 1fr;}
    .grid-col-lg-2 { grid-template-columns: repeat(2, 1fr);}
    .grid-col-lg-3 { grid-template-columns: repeat(3, 1fr);}
    .grid-col-lg-4 { grid-template-columns: repeat(4, 1fr);}
    .grid-col-lg-5 { grid-template-columns: repeat(5, 1fr);}
    .grid-col-lg-6 { grid-template-columns: repeat(6, 1fr);}
    .grid-col-lg-7 { grid-template-columns: repeat(7, 1fr);}
    .grid-col-lg-8 { grid-template-columns: repeat(8, 1fr);}
    .grid-col-lg-9 { grid-template-columns: repeat(9, 1fr);}
    .grid-col-lg-10 { grid-template-columns: repeat(10, 1fr);}
    .grid-col-lg-11 { grid-template-columns: repeat(11, 1fr);}
    .grid-col-lg-12 { grid-template-columns: repeat(12, 1fr);}
}
@media only screen and (min-width: 1200px) {
  .grid-col-xl-1 { grid-template-columns: 1fr;}
  .grid-col-xl-2 { grid-template-columns: repeat(2, 1fr);}
  .grid-col-xl-3 { grid-template-columns: repeat(3, 1fr);}
  .grid-col-xl-4 { grid-template-columns: repeat(4, 1fr);}
  .grid-col-xl-5 { grid-template-columns: repeat(5, 1fr);}
  .grid-col-xl-6 { grid-template-columns: repeat(6, 1fr);}
  .grid-col-xl-7 { grid-template-columns: repeat(7, 1fr);}
  .grid-col-xl-8 { grid-template-columns: repeat(8, 1fr);}
  .grid-col-xl-9 { grid-template-columns: repeat(9, 1fr);}
  .grid-col-xl-10 { grid-template-columns: repeat(10, 1fr);}
  .grid-col-xl-11 { grid-template-columns: repeat(11, 1fr);}
  .grid-col-xl-12 { grid-template-columns: repeat(12, 1fr);}
  .gap-xl-1 { gap: .25rem }
  .gap-xl-2 { gap: .5rem }
  .gap-xl-3 { gap: 1rem }
  .gap-xl-4 { gap: 1.5rem }
  .gap-xl-5 { gap: 3rem }
}
@media only screen and (min-width: 1400px) {
  .grid-col-xxl-1 { grid-template-columns: 1fr;}
  .grid-col-xxl-2 { grid-template-columns: repeat(2, 1fr);}
  .grid-col-xxl-3 { grid-template-columns: repeat(3, 1fr);}
  .grid-col-xxl-4 { grid-template-columns: repeat(4, 1fr);}
  .grid-col-xxl-5 { grid-template-columns: repeat(5, 1fr);}
  .grid-col-xxl-6 { grid-template-columns: repeat(6, 1fr);}
  .grid-col-xxl-7 { grid-template-columns: repeat(7, 1fr);}
  .grid-col-xxl-8 { grid-template-columns: repeat(8, 1fr);}
  .grid-col-xxl-9 { grid-template-columns: repeat(9, 1fr);}
  .grid-col-xxl-10 { grid-template-columns: repeat(10, 1fr);}
  .grid-col-xxl-11 { grid-template-columns: repeat(11, 1fr);}
  .grid-col-xxl-12 { grid-template-columns: repeat(12, 1fr);}
}
/* End Layouts */
/* Start Type */
h1 { 
    font-weight: bold;
    line-height: 150%; 
}
/* End Type */
/* Start Sizing */
.img-125 { width: 125px; height: 125px; }

@media screen and (min-width: 992px) {
    .w-lg-fit { width: fit-content!important;}
    .w-lg-25 { width: 25%!important; }
    .w-lg-50 { width: 50%!important; }
    .w-lg-75 { width: 75%!important; }
    .w-lg-100 { width: 100%!important; }

    .max-w-lg-375 { width: 100%; max-width: 375px;}
}
@media screen and (min-width: 1200px) {
    .w-xl-fit { width: fit-content!important;}
    .w-xl-25 { width: 25%!important; }
    .w-xl-50 { width: 50%!important; }
    .w-xl-75 { width: 75%!important; }
    .w-xl-100 { width: 100%!important; }
}
/* End Sizing */
/* Start Tables */
.table-border-row tr, .table-border-row th, .table-border-row thead { background-color: transparent!important; }
.table-border-row tr { border-bottom: 1px solid var(--bs-gray-400); }
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { vertical-align: middle; }

@media screen and (max-width: 768px) {
  .table-stack-sm-only td {
    display: block;
    width: 100%;
  }
  .table-stack-sm-only thead {
    display: none;
  }
  .table-stack-sm-only>tbody>tr>td {
    padding-bottom: 4px;
  }
  .table-stack-sm-only>tbody>tr>td:last-of-type {
    padding-bottom: 1.5rem;
  }
}
/* End Tables */
/* Start Slider */
.retainer .slider-container {
  max-width: 800px;
  margin: 0 auto;
}
.retainer .slider-controls {
  position: relative;
  z-index: 2;
}
.retainer .icon {
  font-size: 1.5rem;
  height: 2.5rem;
  width: 2.5rem;
  color: var(--bs-primary);
  border: transparent solid 2px;
  padding: .25rem;
  border-radius: 50%;
  transition: color 0.2s;
}
.retainer .icon:hover {
  border: var(--bs-primary) solid 2px;
}
.retainer .icon.disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}
.retainer .content-wrapper {
  position: relative;
  overflow: hidden;
  min-height: 200px;
}
.retainer .slider-content {
  transition: opacity 0.3s ease;
}
.retainer .slider-content.fade-out {
  opacity: 0;
}
.retainer .slider-content.fade-in {
  opacity: 1;
}
.retainer h2#monthYear {
    min-width: 14ch;
    text-align: center;
}
/* End Slider */
/* Start Users */
  @media screen and (max-width: 768px) {
    td.name:before {
      display: contents;
      content: 'Name: ';
      font-weight: bold;
    }
    td.position:before {
      display: contents;
      content: 'Position: ';
      font-weight: bold;
    }
    td.email:before {
      display: contents;
      content: 'Email: ';
      font-weight: bold;
    }
    td.role:before {
      display: contents;
      content: 'Role: ';
      font-weight: bold;
    }
    td.retainer:before {
      display: contents;
      content: 'Receives Retainer Summaries: ';
      font-weight: bold;
    }
    td.invoices:before {
      display: contents;
      content: 'Receives Invoices: ';
      font-weight: bold;
    }
  }
/* End Users */
/* Start Decorative */
.line-after {
  display: flex;
  align-items: center;
  gap: 1rem; /* space between text and line */
}

.line {
  flex-grow: 1;
  height: 1px;
  background-color: var(--bs-secondary); /* or any color */
}
/* End Decorative */