@font-face {
  font-family: "Montserrat";
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/Montserrat-700.eot");
  src:
    url("/assets/fonts/Montserrat-700.eot?#iefix") format("embedded-opentype"),
    url("/assets/fonts/Montserrat-700.woff") format("woff"),
    url("/assets/fonts/Montserrat-700.ttf") format("truetype"),
    url("/assets/fonts/Montserrat-700.svg#Montserrat") format("svg");
}

@font-face {
  font-family: "Montserrat";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/Montserrat-regular.eot");
  src:
    url("/assets/fonts/Montserrat-regular.eot?#iefix") format("embedded-opentype"),
    url("/assets/fonts/Montserrat-regular.woff") format("woff"),
    url("/assets/fonts/Montserrat-regular.ttf") format("truetype"),
    url("/assets/fonts/Montserrat-regular.svg#Montserrat") format("svg");
}

@media (min-width: 1600px) {
  .container {
    max-width: 1440px;
  }
}

/** Responsive utilities */
@media (min-width: 576px) {
  .col-sm-1_5 {
    flex: 0 0 auto;
    width: 12.5%;
  }
}

@media (min-width: 768px) {
  .position-md-relative {
    position: relative !important;
  }
}

:root {
  --bs-primary-rgb: 0, 49, 75;
  --bs-info-rgb: 0, 73, 113;
  --bs-primary-dark-rgb: 13, 38, 72;
  --bs-secondary-rgb: 68, 68, 68;
  --bs-danger-rgb: 187, 14, 61;
  --bs-info-bg-subtle: #deeaf3;
  --bs-font-sans-serif:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans",
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-title: "Montserrat", var(--bs-font-sans-serif);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.4rem;
}

.gray {
  fill: #606060;
}
.red {
  fill: #bb0e3d;
}
.textAnchorBlue {
  color: #036ac5;
}

.text-black {
  color: #000000 !important;
}
.text-deep-violet {
  color: #391084 !important;
}

.btn {
  --bs-btn-font-weight: 500;
}

.font-title {
  font-family: var(--bs-font-title);
  font-weight: 500;
}

.font-manrope {
  font-family: "Manrope";
}
.font-inter {
  font-family: "Inter" !important;
}
.font-poppins {
  font-family: "Poppins" !important;
}
.font-nunito {
  font-family: "Nunito" !important;
}
.font-outfit {
  font-family: "Outfit" !important;
}

.font-smooth {
  -webkit-font-smoothing: antialiased !important;
}

.fw-extrabold {
  font-weight: 800 !important;
}

.btn-primary {
  --bs-btn-bg: rgb(var(--bs-primary-rgb));
  --bs-btn-hover-bg: rgb(var(--bs-primary-dark-rgb));
  --bs-btn-hover-border-color: rgb(var(--bs-primary-dark-rgb));
  --bs-btn-active-bg: rgb(var(--bs-primary-dark-rgb));
  --bs-btn-disabled-color: #444;
  --bs-btn-disabled-bg: #ddd;
  --bs-btn-disabled-border-color: #ccc;
}

.btn-outline-primary {
  --bs-btn-color: rgb(var(--bs-primary-rgb));
  --bs-btn-border-color: rgb(var(--bs-primary-rgb));
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(var(--bs-primary-rgb));
  --bs-btn-hover-border-color: rgb(var(--bs-primary-rgb));
  --bs-btn-active-bg: rgb(var(--bs-primary-dark-rgb));
  --bs-btn-active-border-color: rgb(var(--bs-primary-dark-rgb));
  --bs-btn-disabled-color: rgb(var(--bs-primary-rgb), 0.5);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgb(var(--bs-primary-rgb), 0.5);
  --bs-gradient: none;
}

.visible-scroll {
  opacity: 0;
  animation-name: visible-scroll-animation;
  animation-duration: 1 ms;
  animation-fill-mode: both;
  animation-timeline: scroll(root);
  animation-range-start: 0px;
  animation-range-end: 1px;
}

.h-1r {
  height: 1rem;
}

.h-90 {
  height: 90% !important;
}

.no-scroll {
  overflow: hidden !important;
  padding-right: var(--bs-gutter-x, 0) !important;
}

@keyframes visible-scroll-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.back-to-top {
  background-color: #007bbd !important;
  border: 2px outset #767676;
  border-top-left-radius: 100%;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: black;
  width: 80px;
  height: 80px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  padding: 36px 4px 0 18px;
  transition: all 0.25s ease-out;
  z-index: 999;
  cursor: pointer;
}

.back-to-top:hover,
.back-to-top:focus {
  background-color: #007bbd !important;
}

.back-to-top:active {
  outline: solid 4px #2491ff;
  transition: none;
}

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

/** Bootstrap Theme */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
}

a {
  text-decoration: none;
  font-weight: 500;
}

a:active,
a:hover {
  text-decoration: underline;
}

a.disabled-link {
  cursor: default;
  pointer-events: none;
}

.btn:disabled {
  cursor: not-allowed;
  pointer-events: auto;
}

.btn-uniform {
  width: auto;
  min-width: 100px;
}

.shadow-hover:hover,
.shadow-hover:active,
.shadow-hover:focus {
  box-shadow: var(--bs-box-shadow) !important;
}

.bg-flag-banner {
  background-color: #f0f0f0 !important;
  opacity: 1;
}

.bg-primary-dark {
  /* background-color: rgb(var(--bs-primary-dark-rgb));  */
  background: radial-gradient(
    circle at center top,
    rgb(25, 55, 95) 0%,
    rgb(13, 38, 72) 70%,
    rgb(20, 35, 80) 100%
  ) !important;
}

.bg-lighter {
  background-color: #fdfdfd !important;
}

.bg-light-opacity {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

.shadow-sm {
  box-shadow:
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}

.shadow-md {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.d-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cursor-pointer {
  cursor: pointer;
}

.form-label {
  font-weight: 500;
  margin-bottom: 0;
}

.form-header-label {
  font-weight: 400;
  line-height: 22px !important;
  font-size: 14px;
  font-style: normal;
  color: var(--Blue-Blue-1, #036ac5);
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.usage-container {
  display: flex;
  padding: 30px 41px 40px 41px !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-radius: 20px;
  border: 3px solid var(--Blue-Blue-3, #2595df);
  background: #fff;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.25);
}

.form-header-input-group {
  display: flex;
  height: 75px;
  flex-direction: column;
  align-items: start;
  gap: 5px !important;
}

.form-header-input-group .form-select {
  border: 1px solid var(--blue-light) !important;
  border-radius: 8px;
  background-color: var(--Neutral-White, #fff);
  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='%23036AC5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  color: var(--Blue-Blue-4, #2f5496);
}

.form-header-input-group .form-control {
  border: 1px solid var(--blue-light) !important;
  border-radius: 8px;
}

.form-header-input-group .form-control::placeholder {
  color: #cccccc !important;
}

.usage-overview-card .form-select {
  border-radius: 8px;
  border: 1px solid var(--blue-light) !important;
  background-color: var(--Neutral-White, #fff);
  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='%23036AC5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.usage-overview-card .form-control {
  border-radius: 8px;
  border: 1px solid var(--Blue-Blue-1, #036ac5);
}

.form-header-input-label {
  color: var(--Blue-Blue-4, #2f5496);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500 !important;
}

.data-form-field {
  padding: 10px 16px !important;
  height: 46px !important;
}

.form-header-input-group .form-control.usage-search-input-icon {
  background-image: url("/assets/images/icon-search.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding: 10px 40px 10px 16px !important;
}

.form-header-input-group .form-control.search-placeholder::placeholder {
  font-family: "Inter" !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--Blue-Blue-4, #2f5496);
  letter-spacing: 0.32px;
}

.form-header-input-label::-webkit-calendar-picker-indicator {
  background-image: url("/assets/images/icon-chevron-down.svg");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}

.form-label-usage-page {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0px;
}

.form-label-user {
  color: #356aad;
}

.reset-all-button-text {
  color: var(--Blue-Blue-4, #2f5496);
  font-family: "Poppins";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.data-table-header-label {
  font-family: "Poppins" !important;
  font-weight: 600 !important;
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: 0.5px;
}

.page-count-label {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  letter-spacing: 0px !important;
}

.background-object {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  opacity: 0.1;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black);
  z-index: -1;
}

* {
  transition: all 0.1s;
}

.border-transparent {
  border-color: transparent !important;
}

.form-control:focus {
  box-shadow: none;
}

.form-check-input:checked {
  background-color: #444;
  border-color: #fff;
}

.form-check-input-lg {
  width: 4em !important;
  height: 2em !important;
}

.required::after {
  content: "*";
  color: red;
  margin-left: 0.1rem;
}

/* textarea::-webkit-resizer {
  display: none;
}

textarea::-moz-resizer {
  display: none;
} */

.text-prewrap {
  white-space: pre-wrap !important;
}

p {
  margin-bottom: 0;
}

h1,
.h1 {
  font-size: 1.5rem;
}

h2,
.h2 {
  font-size: 1.4rem;
}

h3,
.h3 {
  font-size: 1.3rem;
}

h4,
.h4 {
  font-size: 1.2rem;
}

h5,
.h5 {
  font-size: 1.1rem;
}

h6,
.h6 {
  font-size: 1rem;
}

strong {
  font-weight: 500;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 0;
}

.lead {
  font-size: 1.15rem;
}

.lh-xs {
  line-height: 0.85 !important;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.markdown h1 {
  font-size: 1.2rem;
}

.markdown h2 {
  font-size: 1.1rem;
}

.markdown h3 {
  font-size: 1rem;
}

.markdown h4 {
  font-size: 0.9rem;
}

.markdown h5 {
  font-size: 0.8rem;
}

.markdown h6 {
  font-size: 0.7rem;
}

.link-primary .text-primary:hover {
  color: var(--bs-warning) !important;
}

.text-prewrap {
  white-space: pre-wrap !important;
}

.text-gradient {
  background-attachment: scroll;
  background-clip: text;
  background-color: rgba(0, 0, 0, 0);
  background-image: linear-gradient(
    70deg,
    rgb(66, 133, 244) 0px,
    rgb(155, 114, 203) 9%,
    rgb(217, 101, 112) 20%,
    rgb(217, 101, 112) 24%,
    rgb(155, 114, 203) 35%,
    rgb(66, 133, 244) 44%,
    rgb(155, 114, 203) 50%,
    rgb(217, 101, 112) 56%,
    rgb(27, 28, 29) 75%,
    rgb(27, 28, 29) 100%
  );
  background-origin: padding-box;
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-size: 400% 100%;
  color: rgba(0, 0, 0, 0);
}

.text-gradient-blue-teal {
  background: linear-gradient(90deg, #51a9fe 0%, #2beda9 100%);
}
.text-gradient-blue-purple {
  background: linear-gradient(270deg, #9534e5 40.65%, #725cf1 72.89%, #097aff 100%);
}

.text-clip {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-spacing--1 {
  letter-spacing: -0.1rem;
}

.hover-visible-parent .hover-visible {
  visibility: hidden;
}

.hover-visible-parent:hover .hover-visible {
  visibility: visible;
}

.navbar,
.nav-link {
  --bs-navbar-padding-y: 0;
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-nav-link-padding-y: 0.3rem;
}

.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.3rem;
  --bs-nav-link-font-weight: 500;
}

.navbar-nav .dropdown-menu {
  --bs-dropdown-padding-y: 0;
}

.navbar-nav .dropdown-item {
  --bs-dropdown-link-active-color: #444;
  --bs-dropdown-link-active-bg: transparent;
}

.nav-link {
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.nav-link.active {
  border-bottom-color: rgb(58, 117, 189);
}

.nav-link:hover,
.nav-link.active:hover {
  border-bottom-color: var(--bs-warning);
}

.nav-link.dropdown-link {
  padding: var(--bs-navbar-nav-link-padding-y) var(--bs-navbar-nav-link-padding-x);
}

.nav-link.dropdown-link.active {
  border-bottom-color: #fff;
}

.nav-link.dropdown-link:hover {
  color: #fff;
  border-bottom-color: var(--bs-warning);
}

.navbar-nav > li.login {
  position: static;
}
.navbar-nav > li.login > div.dropdown-menu.show {
  display: flex;
  width: 100%;
  text-align: center;
  left: 0;
  right: 0;
}

.navbar-nav > li.login .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.bottom-50 {
  bottom: 50% !important;
}

.mt-8 {
  margin-top: 8rem !important;
}

.mt-10 {
  margin-top: 10rem !important;
}

.mb-9 {
  margin-bottom: 9rem !important;
}

.pb-10 {
  padding-bottom: 10rem !important;
}

.ms-n50 {
  margin-left: -50% !important;
}

.w-20 {
  width: 20%;
}

.w-fit {
  width: fit-content !important;
}

.w-200 {
  width: 200%;
}

.mw-20r {
  max-width: 20rem;
}
.mw-60p {
  max-width: 60%;
}
.navbar-brand.mw-60p object {
  max-width: 100%;
}

.w-1r {
  width: 1rem;
}

.w-10r {
  width: 10rem;
}

.w-20r {
  width: 20rem;
}

.w-40r {
  width: 40rem;
}

.w-50r {
  width: 50rem;
}

.mvh-25 {
  max-height: 25vh;
}

.mvh-100 {
  max-height: 100vh;
}

.min-vh-100 {
  min-height: 100vh;
}

.min-height-auto {
  min-height: auto !important;
}

.wh-2 {
  width: 1.5rem;
  height: 1.5rem;
}

.outline-0 {
  outline: 0 !important;
}

.shadow-0 {
  box-shadow: none !important;
}

.form-label {
  color: #444;
}

.table th {
  font-weight: 500;
}

.table th,
.table td {
  vertical-align: middle;
}

.table-header-color {
  color: rgb(62, 87, 124);
}

.users-table {
  border: 1px solid rgb(8, 58, 80) !important;
}

.users-table thead {
  --bs-table-bg: rgb(8, 58, 80);
  --bs-table-color-type: #fff;
}

.usage-users-table thead {
  --bs-table-bg: var(--blue-table-bg);
  --bs-table-color-type: #fff;
}

.usage-users-table {
  border-radius: 8px !important;
  border: 1px solid var(--blue-light) !important;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

.usage-users-table tbody,
.usage-users-table tbody > tr > td {
  color: var(--Blue-Blue-4, #2f5496) !important;
  font-family: Inter !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  border-bottom: 1px solid var(--Blue-Blue-4, #2f5496) !important;
}

.usage-users-table tbody > tr {
  background: var(--Neutral-White, #fff);
}

.usage-view-details-btn {
  border: 1px solid var(--Blue-Blue-1, #036ac5) !important;
  color: #343434;
  background-color: #ffffff;
  height: 33px;
  padding: 0 10px;
  gap: 5px;
  border-radius: 80px;
  font-family: "Nunito";
  font-weight: 800;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0%;
  text-align: center;
}

.usage-card-body {
  display: flex;
  padding: 30px 41px !important;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 20px !important;
  background: #fff !important;
}

.usage-card-body-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 30px;
}

.usage-users-table thead > tr {
  height: 42px;
}

.usage-users-table thead > tr > th {
  height: 42px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.users-table tbody > tr {
  --bs-table-bg: #fff;
  height: 48px !important;
}

.users-table-striped tbody > tr:nth-of-type(odd) {
  --bs-table-striped-bg: #fff;
}

.users-table-striped tbody > tr:nth-of-type(even) {
  --bs-table-bg: rgb(227, 238, 249);
}

.users-table tbody > tr > td {
  border-color: rgb(8, 58, 80);
}

.usage-users-table tbody > tr > td {
  border-color: #d9e2f5;
  height: 48px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.users-count-text {
  color: var(--Blue-Blue-4, #2f5496);
  font-weight: 600;
  line-height: 24px;
  padding: 0 5px;
}

.usage-user-name {
  font-family: Poppins;
  font-size: 20px !important;
  font-style: normal;
  font-weight: 600 !important;
  line-height: 27px;
}

.usage-user-email {
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.usage-overview-card {
  color: var(--Blue-Blue-4, #2f5496);
  display: flex;
  padding: 15px 17px 12px 17px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
  align-self: stretch;
  border-radius: 5px !important;
  border: 1px solid var(--Neutral-Gray-2, #a5a5a5);
  background: #fff;
}

.users-table .btn {
  border-width: 2px;
  --bs-btn-bg: rgb(197, 234, 242);
  --bs-btn-color: rgb(21, 96, 113);
  --bs-btn-border-color: rgb(132, 180, 190);
  --bs-btn-hover-bg: rgb(172, 217, 227);
  --bs-btn-hover-color: rgb(21, 96, 113);
  --bs-btn-hover-border-color: rgb(132, 180, 190);
}
.table-pagination {
  border-top: solid 2px rgb(8, 58, 80);
}
.table-pagination select {
  border: none;
}
.table-pagination-btn {
  color: var(--Blue-Blue-4, #2f5496);
  background-color: var(--Neutral-White, #fff);
  border-radius: 4px;
  height: 31px;
  border: 1px solid #e5e7eb !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  letter-spacing: 0px !important;
}
.table-pagination-btn:disabled {
  opacity: 0.5;
}

.pagination-bar {
  color: var(--Blue-Blue-4, #2f5496);
  background: var(--Neutral-White, #fff);
  gap: 40px;
  padding: 10px 20px;
}

.pagination-bar .form-select {
  color: var(--Blue-Blue-4, #2f5496);
}

dialog.modal[open] {
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
}

details[open] {
  width: 100%;
}

.s-tooltip-wrapper {
  position: relative;
}

.s-tooltip {
  --tt-bg: #ffffff;
  --tt-fg: #333333;
  --tt-radius: 8px;
  --tt-pad-x: 8px;
  --tt-pad-y: 6px;
  --tt-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  --tt-max-w: 300px;

  position: absolute;
  z-index: 1080;
  display: block;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 120ms ease;
  background: var(--tt-bg);
  color: var(--tt-fg);
  border-radius: var(--tt-radius);
}

.s-tooltip[data-show] {
  visibility: visible;
  opacity: 1;
}

.s-tooltip .s-tooltip-inner {
  background: inherit;
  color: inherit;
  border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow);
  font-size: 0.875rem;
  line-height: 1.25rem;
  white-space: nowrap;
}

.s-tooltip .s-tooltip-content {
  padding: var(--tt-pad-y) var(--tt-pad-x);
  max-width: var(--tt-max-w);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.s-tooltip .s-tooltip-arrow,
.s-tooltip .s-tooltip-arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  transition: none !important;
}

.s-tooltip .s-tooltip-arrow {
  visibility: hidden;
}

.s-tooltip .s-tooltip-arrow::before {
  content: "";
  visibility: visible;
  transform: rotate(45deg);
  box-shadow: var(--tt-shadow);
}

.s-tooltip[data-popper-placement^="top"] .s-tooltip-arrow {
  bottom: -4px;
}

.s-tooltip[data-popper-placement^="bottom"] .s-tooltip-arrow {
  top: -4px;
}

.s-tooltip[data-popper-placement^="left"] .s-tooltip-arrow {
  right: -4px;
}

.s-tooltip[data-popper-placement^="right"] .s-tooltip-arrow {
  left: -4px;
}

.copy-swap {
  position: relative;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

.copy-swap .icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

.copy-swap .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.copy-swap .show {
  opacity: 1;
  transform: scale(1);
}

.copy-swap .hide {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

dialog .close-btn {
  position: absolute !important;
  right: 21px;
  top: 11px;
  padding: 10px !important;
  & svg {
    color: #44627c;
  }
}

.convo-item {
  --action-pad: 1.25rem;
  position: relative;
}
.convo-hitbox {
  position: relative;
  border-radius: var(--bs-border-radius-pill);
  text-decoration: none;
  transition: background-color 0.1s ease;
}
.convo-item:hover .convo-hitbox,
.convo-item:focus-within .convo-hitbox {
  background-color: var(--bs-tertiary-bg);
}
.convo-title {
  transition: padding-right 0.1s ease;
}
.convo-item:hover .convo-title,
.convo-item:focus-within .convo-title {
  padding-right: var(--action-pad);
}
.convo-item.convo-item--local:hover .convo-title,
.convo-item.convo-item--local:focus-within .convo-title {
  padding-right: 0;
}
.convo-actions {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  z-index: 2;
  transform: translateY(-50%);
}

.chat-history-menu.show {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 1080;
}

.action-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.1s ease,
    visibility 0.1s ease;
}
.convo-item:hover .action-btn,
.convo-item:focus-within .action-btn,
.convo-item--menu-open .action-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.model-dropdown {
  padding-right: 2rem;
}

.bg-chat {
  background-color: #f7f9fb;
  min-width: 0;
}

.bg-chat form.container {
  font-size: 15px;
}

.rounded-full {
  border-radius: 9999px !important;
}

.scroll-down-btn {
  border: 0.5px solid rgba(31, 30, 29, 0.15);
  padding: 7px;
  opacity: 0.8;
  background-color: rgba(255, 255, 255, 0.8);

  &:hover {
    border: 0.5px solid rgba(31, 30, 29, 0.15);
    background-color: rgba(255, 255, 255, 1);
  }
}

.search-accordion {
  border-width: 0.5px;
  border-color: var(--bs-border-color);
}
.search-accordion.is-open {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: 50vh;
  overflow: hidden;
}
.btn-reset {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
}
.search-accordion__toggle {
  min-height: 2.625rem;
  transition:
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-accordion__toggle:hover {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}
.chevron {
  transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.search-accordion.is-open .chevron {
  transform: rotate(180deg);
}
.search-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.2s ease,
    height 0.2s ease,
    opacity 0.2s ease;
}
.search-accordion__body.show {
  grid-template-rows: 1fr;
  min-height: 0;
  opacity: 1;
}
.search-accordion__body > .accordion-inner {
  overflow: hidden;
}
.search-accordion__body.show > .accordion-inner {
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}
.search-accordion__scroll {
  max-height: none;
  overflow: visible !important;
}
.mask-fade-bottom {
  -webkit-mask-image: linear-gradient(
    transparent 0%,
    #000 0px,
    #000 calc(100% - 16px),
    transparent 100%
  );
  mask-image: linear-gradient(transparent 0%, #000 0px, #000 calc(100% - 16px), transparent 100%);
}
.min-w-0 {
  min-width: 0 !important;
}
.search-accordion,
.code-accordion,
.editor-accordion,
.reasoning-accordion {
  min-width: 0;
}
.reasoning-accordion .reasoning-pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.reasoning-accordion.is-open .reasoning-pre:hover {
  background: var(--bs-tertiary-bg);
}
.code-accordion .code-block {
  background: var(--bs-tertiary-bg);
  border: 0.5px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.75rem;
  overflow: auto;
  max-width: 100%;
  white-space: pre;
  tab-size: 2;
  -moz-tab-size: 2;
}
.code-accordion.is-open .code-block:hover {
  background: color-mix(in oklch, var(--bs-tertiary-bg) 90%, var(--bs-body-bg));
}
.editor-accordion .content-block {
  background: var(--bs-tertiary-bg);
  border: 0.5px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.75rem;
  overflow: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 2;
  -moz-tab-size: 2;
}
.editor-accordion .content-render {
  background: var(--bs-body-bg);
  border: 0.5px solid var(--bs-border-color);
}
.editor-accordion .content-render .prose img {
  max-width: 100%;
  height: auto;
}

/* Editor content uses the common tool-card scroll boundary. */
.editor-accordion .mask-fade-bottom {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Readable prose for .txt */
.editor-accordion .content-prose {
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--bs-body-color);
  padding: 1rem 1.25rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Rendered markdown for .md */
.editor-accordion .content-markdown {
  padding: 1rem 1.25rem;
  line-height: 1.6;
}
.editor-accordion .content-markdown h1,
.editor-accordion .content-markdown h2,
.editor-accordion .content-markdown h3 {
  margin-top: 1.25em;
  margin-bottom: 0.5em;
}
.editor-accordion .content-markdown p {
  margin-bottom: 0.75em;
}
.editor-accordion .content-markdown ul,
.editor-accordion .content-markdown ol {
  padding-left: 1.5em;
  margin-bottom: 0.75em;
}
.editor-accordion .content-markdown a {
  color: var(--bs-primary);
}
.editor-accordion .content-markdown img {
  max-width: 100%;
  height: auto;
}
.editor-accordion .content-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}
.editor-accordion .content-markdown th,
.editor-accordion .content-markdown td {
  border: 1px solid var(--bs-border-color);
  padding: 0.4em 0.75em;
}

/* Diff styles */
.editor-diff-line {
  padding: 1px 0.75rem;
  display: block;
  min-height: 1.4em;
}
.editor-diff-removed {
  background-color: #fdd;
  text-decoration: line-through;
  color: #944;
}
.editor-diff-added {
  background-color: #dfd;
  color: #294;
}
.editor-diff-line-number {
  display: inline-block;
  width: 3em;
  text-align: right;
  margin-right: 0.75rem;
  color: var(--bs-secondary-color);
  user-select: none;
  font-size: 0.8em;
  opacity: 0.6;
}

.chat-titlebar .vr {
  opacity: 0.15;
}
.chat-title {
  min-width: 0;
  max-width: 100%;
}
.chat-titlebar {
  top: 0;
  z-index: 2;
  min-height: 2.75rem;
  min-width: 0;
}
.chat-titlebar-title-layer {
  width: 100%;
  min-width: 0;
}
.chat-identity-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: min(46vw, 24rem);
  min-width: 0;
  padding: 0.4rem 0.5rem 0.4rem 0.72rem;
  line-height: 1;
  white-space: nowrap;
}
.chat-identity-badge[data-chat-mode="local"] {
  background-color: black !important;
}
.chat-identity-badge[data-chat-mode="server"] {
  background-color: rgb(var(--bs-primary-rgb)) !important;
}
.chat-identity-name {
  min-width: 0;
  max-width: 15rem;
  letter-spacing: 0;
}
.chat-identity-divider {
  width: 1px;
  min-height: 1rem;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.38);
}
.chat-mode-switch {
  min-height: auto;
  margin: 0;
  padding: 0.08rem 0.14rem;
  color: inherit;
  cursor: pointer;
}
.chat-mode-switch__label {
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.chat-mode-switch__track {
  --chat-mode-switch-width: 3rem;
  --chat-mode-switch-thumb-size: 1.16rem;
  --chat-mode-switch-shift: calc(
    var(--chat-mode-switch-width) - var(--chat-mode-switch-thumb-size)
  );

  position: relative;
  display: inline-block;
  width: var(--chat-mode-switch-width);
  height: 1.16rem;
  flex: 0 0 var(--chat-mode-switch-width);
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #b23a48;
  box-shadow: inset 0 0.05rem 0.16rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}
.chat-mode-switch__state {
  position: absolute;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--chat-mode-switch-shift);
  height: 100%;
  color: #ffffff;
  font-size: 0.48rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.chat-mode-switch__state--on {
  left: 0;
  opacity: 0;
}
.chat-mode-switch__state--off {
  right: 0;
  opacity: 1;
}
.chat-mode-switch__thumb {
  position: absolute;
  z-index: 2;
  left: 0;
  width: var(--chat-mode-switch-thumb-size);
  height: var(--chat-mode-switch-thumb-size);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0.05rem 0.16rem rgba(0, 0, 0, 0.28);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.chat-mode-switch__input:checked + .chat-mode-switch__track {
  background: #2e8540;
}
.chat-mode-switch__input:checked + .chat-mode-switch__track .chat-mode-switch__state--on {
  opacity: 1;
}
.chat-mode-switch__input:checked + .chat-mode-switch__track .chat-mode-switch__state--off {
  opacity: 0;
}
.chat-mode-switch__input:checked + .chat-mode-switch__track .chat-mode-switch__thumb {
  transform: translateX(var(--chat-mode-switch-shift));
}
.chat-mode-switch__input:focus-visible + .chat-mode-switch__track {
  box-shadow:
    0 0 0 0.12rem rgba(255, 255, 255, 0.25),
    inset 0 0.05rem 0.16rem rgba(0, 0, 0, 0.18);
}
.chat-mode-switch__input:disabled + .chat-mode-switch__track {
  opacity: 0.72;
  cursor: not-allowed;
}
.chat-mode-switch:has(.chat-mode-switch__input:disabled) {
  cursor: not-allowed;
}
.chat-titlebar-title-slot {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.chat-titlebar-title-slot > .s-tooltip-wrapper {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}
.chat-title {
  display: block;
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 575.98px) {
  .chat-identity-badge {
    max-width: 52vw;
  }

  .chat-identity-name {
    max-width: 8.5rem;
  }
}
.user-message {
  background-color: #e2e9f5;
}

.tool-btn-icon {
  --btn-size: 28px;
  --btn-radius: var(--bs-border-radius);
  --btn-hover-bg: color-mix(in oklch, var(--bs-tertiary-bg) 85%, transparent);
  --btn-active-bg: color-mix(in oklch, var(--bs-tertiary-bg) 100%, transparent);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-size);
  height: var(--btn-size);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--bs-body-color);
  opacity: 0.8;
  line-height: 1;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease,
    opacity 0.15s ease;
}
.tool-btn-icon:hover {
  background: var(--btn-hover-bg);
  border-color: var(--bs-border-color);
  opacity: 1;
}
.tool-btn-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}
.tool-btn-icon:active {
  background: var(--btn-active-bg);
  transform: translateY(0.5px);
}
.tool-btn-icon:disabled,
.tool-btn-icon[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}
.tool-btn-icon :where(svg) {
  width: 16px;
  height: 16px;
  transition: transform 0.12s ease;
}
.tool-btn-icon:hover :where(svg) {
  transform: translateY(-1px);
}

.text-muted-contrast {
  color: rgba(33, 37, 41, 0.65) !important;
}

.markdown a {
  color: #0b6ed7 !important;
}

.ui-floats {
  position: fixed;
  inset: 0 0 auto 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: var(--bs-tooltip-zindex, 1080);
}
.ui-floats .s-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: auto;
}
.ui-floats .s-tooltip[data-show] {
  visibility: visible;
  opacity: 1;
}
.ui-floats .s-tooltip .s-tooltip-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
}

.btn-unstyled {
  background: transparent;
  border: 0;
  padding: 0;
}
.header-icon-btn {
  --_fg: var(--bs-secondary-color, #6c757d);
  --_hover-bg: rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.06);
  --_focus-ring: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  color: var(--_fg);
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}
.header-icon-btn:hover {
  background: var(--_hover-bg);
  color: var(--bs-body-color, #212529);
}
.header-icon-btn:active {
  transform: translateY(1px);
}
.header-icon-btn:focus-visible {
  outline: 0;
  box-shadow: var(--_focus-ring);
}
.header-icon-btn--danger {
  --_fg: var(--bs-danger, #dc3545);
  --_hover-bg: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.08);
  --_focus-ring: 0 0 0 0.2rem rgba(var(--bs-danger-rgb, 220, 53, 69), 0.25);
}

.inactivity-warning-modal .modal-content {
  width: 550px;
  min-width: 550px;
  height: 320px;
  border-radius: 8px;
  border: 2px solid #0b7f99;
  background: linear-gradient(0deg, #f2f6fa 0%, #f2f6fa 100%), #2e4d7b;
  box-shadow: 0px 4px 45px 0px rgba(0, 0, 0, 0.4);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.inactivity-warning-header {
  margin: 0;
  padding-left: 30px;
  background-color: #6d89a2;
  border-bottom: none;
}
.inactivity-warning-title {
  margin: 0;
  color: #ffffff;
  font-family: Lato;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 32px;
}
.inactivity-warning-body {
  margin: 50px auto;
  padding: 0;
  color: #000000;
  font-family: "Nunito", "Rubik", sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 24px;
}
.inactivity-warning-text {
  margin-bottom: 30px;
}
.session-timeout-modal .modal-content {
  width: 550px;
  min-width: 550px;
  height: 320px;
  border-radius: 8px;
  border: 2px solid #0b7f99;
  background: linear-gradient(0deg, #f2f6fa 0%, #f2f6fa 100%), #2e4d7b;
  box-shadow: 0px 4px 45px 0px rgba(0, 0, 0, 0.4);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.session-timeout-header {
  border-bottom: none;
  padding: 16px 24px;
  line-height: 32px;
}
.close-icon {
  cursor: pointer;
  text-align: end;
  margin-left: auto;
}
.close-icon-img {
  margin-bottom: 2px;
}
.session-timeout-body {
  justify-content: space-between;
  padding: 10px 33px 33px 33px;
  font-family: Lato;
  text-align: center;
}
.session-timeout-title {
  font-size: 25px;
  font-weight: bold;
  font-family: Lato;
  padding-bottom: 12px;
  color: #566672;
}
.session-timeout-message {
  font-size: 17px;
  padding-bottom: 14px;
}
.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 30px;
}
.button-group {
  color: #ffffff;
  font-family: Lato;
  font-size: 11px;
  line-height: 22px;
  width: 150px;
  border: 1px solid #626262;
  border-radius: 4px;
  font-weight: 500;
  box-shadow:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.session-timeout-modal .button-group {
  width: 90px;
}
.extend-button,
.close-button {
  background-color: #566672 !important;
  border-color: #566672 !important;
}
.logout-button,
.login-button {
  margin-left: 20px;
  background-color: #437bbe !important;
  border: 1px solid #626262;
}
.extend-button:hover,
.close-button:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 0px) rgb(26, 129, 153);
  border: 1.5px solid rgb(8, 89, 108);
}
.logout-button:hover,
.login-button:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 0px) rgb(26, 129, 153);
  border: 1.5px solid rgb(8, 89, 108);
}

.btn-wide {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 10px;
  border-radius: 60px !important;
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.02em;
  padding: 17px 42px;
  width: fit-content;
  min-width: 128px;
}

.btn-wide-primary {
  background: #7740a4;
  border: 0.5px solid #373737;
  color: #ffffff;
}

.btn-wide-primary:hover,
.btn-wide-primary:focus,
.btn-wide-primary:active,
.btn-wide-primary:focus-visible,
.btn-wide-primary:disabled {
  background: #7740a4 !important;
  border: 0.5px solid #373737 !important;
  color: #ffffff !important;
}

.btn-wide-info {
  background: #ffffff;
  border: 1.25px solid #a5a5a5;
  color: #3c3c3c;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.btn-wide-info:hover,
.btn-wide-info:focus,
.btn-wide-info:active,
.btn-wide-info:focus-visible,
.btn-wide-info:disabled {
  background: #ffffff !important;
  border: 1.25px solid #a5a5a5 !important;
  color: #3c3c3c !important;
}

.border-solid {
  border-style: solid !important;
}
.border-gray {
  border-color: #cfcfcf !important;
}

.resize-none {
  resize: none !important;
}

.card-lg {
  min-height: 600px;
}

.btn-save-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9.5px 31px;
  gap: 10px;
  background: var(--blue-2);
  border: 0.5px solid #373737;
  border-radius: 60px;
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.btn-save-primary:hover,
.btn-save-primary:focus,
.btn-save-primary:active,
.btn-save-primary:focus-visible,
.btn-save-primary.active,
.btn-save-primary:active:focus {
  background: #0d5ed4 !important;
  border: 0.5px solid #373737 !important;
  color: #ffffff !important;
}

.btn-save-primary:disabled {
  background: var(--blue-2);
  border: 0.5px solid #373737;
  color: #ffffff;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Page header with background image */
.page-header-bg {
  background: linear-gradient(180deg, #000e26 0%, #7ea4ee 55%, #ffffff 100%);
}

.page-header-banner {
  position: relative;
  padding: 65px 0 80px 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  background: url("/assets/images/users/user_banner.png") center top / cover no-repeat;
  height: 190px !important;
}

.usage-statistics-back-anchor {
  margin-bottom: 23px;
  gap: 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 17px;
}

.page-header-text {
  height: 102px !important;
  font-weight: 500;
  font-size: 40px;
  line-height: 40px;
  padding: 0 0 0 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

/* Matches vertical space of the back link row on user-usage-page (padding + one line + gap before h1). */
.page-header-banner-lead-spacer {
  flex-shrink: 0;
  padding: 20px 0 0 44px;
  min-height: 24px;
  box-sizing: border-box;
}

.page-content-card {
  margin-top: -36px;
  position: relative;
  z-index: 1;
  border: 3px solid #2b8ec9;
  background-color: #f8f9fa;
}

.usage-overview-card {
  display: flex;
  padding: 15px 17px 12px 17px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
  border-radius: 8px;
  border: 1.75px solid var(--Blue-Blue-1, #036ac5);
  background: #fff;
}

.usage-overview-card .form-header-label {
  color: var(--Blue-Blue-1, #036ac5);
}

.usage-overview-card .form-select {
  color: var(--Blue-Blue-4, #2f5496);
}

/* Usage statistic section cards */
.usage-section-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  border-radius: 8px;
  border: 1.75px solid var(--Blue-Blue-1, #036ac5);
  overflow: hidden;
}

.return-btn-color {
  color: var(--Neutral-White, #fff);
}

.usage-section-card .card-header {
  background: var(--Neutral-White, #fff);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9.5px 16px;
}

.usage-table {
  margin-bottom: 0;
}

.usage-table thead th {
  padding: 13.5px 16px !important;
  background: var(--Blue-Blue-4, #2f5496);
  color: var(--Neutral-White, #fff);
  font-family: Poppins;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 22.5px;
}

.usage-table tbody td {
  padding-left: 16px !important;
  padding-right: 16px !important;
  color: var(--Blue-Blue-4, #2f5496);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  border-bottom: 1px solid var(--Blue-Blue-4, #2f5496);
}

/* Usage summary: scope layout + metrics under outer .usage-summary */
.usage-summary > .card-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  padding: 20px 25px;
}

.usage-summary > .card-body .usage-metric-card {
  border-radius: 5px;
  border: 1px solid var(--Blue-Blue-1, #036ac5);
  min-height: 75px;
  height: 100%;
}

.usage-summary-details {
  display: flex;
  padding: 16px 0 3px 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 5px !important;
  align-self: stretch;
  grid-row: 1 / span 1;
  grid-column: 2 / span 1;
  justify-self: stretch;
}

.daily-usage-link {
  color: var(--Blue-Blue-4, #2f5496);
  font-weight: 700;
}

.usage-metric-label {
  color: var(--Blue-Blue-1, #036ac5);
}

.usage-summary .usage-metric-value--requests {
  color: var(--blue-2);
}

.usage-summary .usage-metric-value--usage {
  color: #9534e5;
}

.usage-summary .usage-metric-value--guardrail {
  color: #007a30;
}

.usage-summary .usage-metric-value--total {
  color: #016630;
}

.usage-section-card .card-header .card-title {
  color: var(--Blue-Blue-1, #2f5496) !important;
  font-family: Poppins !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  margin-bottom: 0 !important;
}

#privacy-notice-container dialog .modal-dialog {
  width: 1440px;
  max-width: 95%;
}

/* disclaimer styles */
#privacy-notice-container .modal-dialog {
  transform: translateY(70px);
}
.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2 - 70px);
}