@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

:root {
  --geeks-body-bg: #fff;
  --geeks-body-color: #64748b;
  --geeks-headings-color: #1e293b;
  --geeks-navbar-vertical-bg: #fff;
  --geeks-navbar-bg: #fff;
  --geeks-card-background: #fff;
  --geeks-input-bg: #fff;
  --geeks-input-disabled-bg: #e2e8f0;
  --geeks-input-focus-border: #baa7ff;
  --geeks-input-border: #cbd5e1;
  --geeks-input-placeholder-color: #64748b;
  --geeks-input-focus-box-shadow: 0px 0px 0px 3px rgba(231, 225, 253, 0.75);
  --geeks-input-check-border: var(--geeks-input-border);
  --geeks-input-group-addon-bg: #e2e8f0;
  --geeks-form-text-color: #94a3b8;
  --geeks-form-label-color: #334155;
  --geeks-border-color: #e2e8f0;
  --geeks-dropdown-background: #fff;
  --geeks-dropdown-link-color: #0f172a;
  --geeks-dropdown-link-hover-color: #0e1526;
  --geeks-dropdown-link-hover-bg: #f1f5f9;
  --geeks-dropdown-border-width: 0px;
  --geeks-dropdown-shadow: 0 10px 30px 0 rgba(31, 45, 61, 0.1);
  --geeks-modal-bg: #f1f5f9;
  --geeks-progress-background: #cbd5e1;
  --geeks-btn-ghost-bg: #cbd5e1;
  --geeks-tagify-border-color: #cbd5e1;
  --geeks-navbar-vertical-bg: #161616;
  --geeks-navbar-vertical-link: #94a3b8;
  --geeks-navbar-vertical-link-hover: #cbd5e1;
}

:root,
[data-bs-theme="light"] {
  --geeks-blue: #0d6efd;
  --geeks-indigo: #6610f2;
  --geeks-purple: #6f42c1;
  --geeks-pink: #d63384;
  --geeks-red: #dc3545;
  --geeks-orange: #fd7e14;
  --geeks-yellow: #ffc107;
  --geeks-green: #198754;
  --geeks-teal: #20c997;
  --geeks-cyan: #0dcaf0;
  --geeks-black: #000;
  --geeks-gray: #475569;
  --geeks-gray-dark: #1e293b;
  --geeks-gray-black: #000;
  --geeks-gray-100: #f1f5f9;
  --geeks-gray-200: #e2e8f0;
  --geeks-gray-300: #cbd5e1;
  --geeks-gray-400: #94a3b8;
  --geeks-gray-500: #64748b;
  --geeks-gray-600: #475569;
  --geeks-gray-700: #334155;
  --geeks-gray-800: #1e293b;
  --geeks-gray-900: #0f172a;
  --geeks-gray-1000: #0b1324;
  --geeks-gray-white: #fff;
  --geeks-primary: #54b141;
  --geeks-primary-light: #8cc63f;
  --geeks-primary-dark: #039345;
  --geeks-secondary: #64748b;
  --geeks-success: #38a169;
  --geeks-info: #0ea5e9;
  --geeks-warning: #f59e0b;
  --geeks-danger: #dc2626;
  --geeks-light: #f1f5f9;
  --geeks-dark: #0f172a;
  --geeks-white: #fff;
  --geeks-light-primary: #ede9fe;
  --geeks-light-danger: #fad9d8;
  --geeks-light-info: #e1f6ff;
  --geeks-light-warning: #ffeeda;
  --geeks-light-secondary: #e4e3e9;
  --geeks-light-success: #d1f5ea;
  --geeks-light-dark: #d1cfd8;
  --geeks-dark-primary: #593cc1;
  --geeks-dark-warning: #c28135;
  --geeks-dark-info: #51a0c2;
  --geeks-dark-danger: #ae302e;
  --geeks-dark-success: #139a74;
  --geeks-dark-secondary: #5c596d;
  --geeks-primary-rgb: 84, 177, 65;
  --geeks-primary-dark-rgb: 3, 147, 69;
  --geeks-secondary-rgb: 100, 116, 139;
  --geeks-success-rgb: 56, 161, 105;
  --geeks-info-rgb: 14, 165, 233;
  --geeks-warning-rgb: 245, 158, 11;
  --geeks-danger-rgb: 220, 38, 38;
  --geeks-light-rgb: 241, 245, 249;
  --geeks-dark-rgb: 15, 23, 42;
  --geeks-light-primary-rgb: 237, 233, 254;
  --geeks-light-danger-rgb: 250, 217, 216;
  --geeks-light-info-rgb: 225, 246, 255;
  --geeks-light-warning-rgb: 255, 238, 218;
  --geeks-light-secondary-rgb: 228, 227, 233;
  --geeks-light-success-rgb: 209, 245, 234;
  --geeks-light-dark-rgb: 209, 207, 216;
  --geeks-dark-primary-rgb: var(--geeks-primary-rgb);
  --geeks-dark-warning-rgb: 194, 129, 53;
  --geeks-dark-info-rgb: 81, 160, 194;
  --geeks-dark-danger-rgb: 174, 48, 46;
  --geeks-dark-success-rgb: 19, 154, 116;
  --geeks-dark-secondary-rgb: 92, 89, 109;
  --geeks-primary-text: #0a58ca;
  --geeks-secondary-text: #475569;
  --geeks-success-text: #146c43;
  --geeks-info-text: #087990;
  --geeks-warning-text: #997404;
  --geeks-danger-text: #b02a37;
  --geeks-light-text: #475569;
  --geeks-dark-text: #334155;
  --geeks-primary-bg-subtle: #cfe2ff;
  --geeks-secondary-bg-subtle: #f1f5f9;
  --geeks-success-bg-subtle: #d1e7dd;
  --geeks-info-bg-subtle: #cff4fc;
  --geeks-warning-bg-subtle: #fff3cd;
  --geeks-danger-bg-subtle: #f8d7da;
  --geeks-light-bg-subtle: #f8fafc;
  --geeks-dark-bg-subtle: #94a3b8;
  --geeks-primary-border-subtle: #9ec5fe;
  --geeks-secondary-border-subtle: #e2e8f0;
  --geeks-success-border-subtle: #a3cfbb;
  --geeks-info-border-subtle: #9eeaf9;
  --geeks-warning-border-subtle: #ffe69c;
  --geeks-danger-border-subtle: #f1aeb5;
  --geeks-light-border-subtle: #e2e8f0;
  --geeks-dark-border-subtle: #64748b;
  --geeks-white-rgb: 255, 255, 255;
  --geeks-black-rgb: 0, 0, 0;
  --geeks-body-color-rgb: 100, 116, 139;
  --geeks-font-sans-serif: "Roboto", "sans-serif";
  --geeks-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --geeks-gradient: linear-gradient(
    180deg,
    hsla(0, 0%, 100%, 0.15),
    hsla(0, 0%, 100%, 0)
  );
  --geeks-body-font-family: "Roboto", "sans-serif";
  --geeks-body-font-size: 0.875rem;
  --geeks-body-font-weight: 400;
  --geeks-body-line-height: 1.6;
  --geeks-body-color: var(--geeks-body-color);
  --geeks-emphasis-color-rgb: 0, 0, 0;
  --geeks-secondary-color: rgba(100, 116, 139, 0.75);
  --geeks-secondary-color-rgb: 100, 116, 139;
  --geeks-secondary-bg: #e2e8f0;
  --geeks-secondary-bg-rgb: 226, 232, 240;
  --geeks-tertiary-color: rgba(100, 116, 139, 0.5);
  --geeks-tertiary-color-rgb: 100, 116, 139;
  --geeks-tertiary-bg: #f1f5f9;
  --geeks-tertiary-bg-rgb: 241, 245, 249;
  --geeks-body-bg: #fff;
  --geeks-body-bg-rgb: 255, 255, 255;
  --geeks-heading-color: var(--geeks-headings-color);
  --geeks-link-color: var(--geeks-primary);
  --geeks-link-color-rgb: var(--geeks-primary-rgb);
  --geeks-link-decoration: none;
  --geeks-link-hover-color: var(--geeks-primary-dark);
  --geeks-link-hover-color-rgb: var(--geeks-primary-dark-rgb);
  --geeks-code-color: var(--geeks-primary);
  --geeks-border-width: 1px;
  --geeks-border-style: solid;
  --geeks-border-color-translucent: #cbd5e1;
  --geeks-border-radius: 0.375rem;
  --geeks-border-radius-sm: 0.25rem;
  --geeks-border-radius-lg: 0.5rem;
  --geeks-border-radius-xl: 2rem;
  --geeks-border-radius-2xl: 2rem;
  --geeks-border-radius-pill: 50rem;
  --geeks-box-shadow: 0px 3px 6px rgba(17, 24, 39, 0.1);
  --geeks-box-shadow-sm: 0px 1px 3px rgba(17, 24, 39, 0.09);
  --geeks-box-shadow-lg: 0 6px 8px 0 rgba(17, 24, 39, 0.08),
    0 0 0 1px rgba(17, 24, 39, 0.04);
  --geeks-box-shadow-inset: inset 0 1px 2px
    rgba(var(--geeks-body-color-rgb), 0.075);
  --geeks-emphasis-color: #000;
  --geeks-form-control-bg: var(--geeks-body-bg);
  --geeks-form-control-disabled-bg: var(--geeks-secondary-bg);
  --geeks-highlight-bg: #fff3cd;
  --geeks-breakpoint-xs: 0;
  --geeks-breakpoint-sm: 576px;
  --geeks-breakpoint-md: 768px;
  --geeks-breakpoint-lg: 992px;
  --geeks-breakpoint-xl: 1200px;
  --geeks-breakpoint-xxl: 1400px;
}

.btn-primary {
  --geeks-btn-color: var(--geeks-white);
  --geeks-btn-bg: var(--geeks-primary);
  --geeks-btn-border-color: var(--geeks-primary);
  --geeks-btn-hover-color: var(--geeks-white);
  --geeks-btn-hover-bg: var(--geeks-primary-dark);
  --geeks-btn-hover-border-color: var(--geeks-primary-dark);
  --geeks-btn-focus-shadow-rgb: 138, 105, 254;
  --geeks-btn-active-color: var(--geeks-white);
  --geeks-btn-active-bg: var(--geeks-primary-dark);
  --geeks-btn-active-border-color: var(--geeks-primary-dark);
  --geeks-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --geeks-btn-disabled-color: var(--geeks-white);
  --geeks-btn-disabled-bg: var(--geeks-primary);
  --geeks-btn-disabled-border-color: var(--geeks-primary);
}

.card {
  --geeks-card-spacer-y: 1.5rem;
  --geeks-card-spacer-x: 1.5rem;
  --geeks-card-title-spacer-y: 0.5rem;
  --geeks-card-title-color: ;
  --geeks-card-subtitle-color: ;
  --geeks-card-border-width: var(--geeks-border-width);
  --geeks-card-border-color: var(--geeks-border-color);
  --geeks-card-border-radius: 0.5rem;
  --geeks-card-box-shadow: ;
  --geeks-card-inner-border-radius: calc(0.5rem - var(--geeks-border-width));
  --geeks-card-cap-padding-y: 1rem;
  --geeks-card-cap-padding-x: 1.5rem;
  --geeks-card-cap-bg: var(--geeks-card-background);
  --geeks-card-cap-color: ;
  --geeks-card-height: ;
  --geeks-card-color: var(--geeks-black);
  --geeks-card-bg: var(--geeks-card-background);
  --geeks-card-img-overlay-padding: 1rem;
  --geeks-card-group-margin: 0.75rem;
  word-wrap: break-word;
  background-clip: border-box;
  background-color: var(--geeks-card-bg);
  border: var(--geeks-card-border-width) solid var(--geeks-card-border-color);
  border-radius: var(--geeks-card-border-radius);
  display: flex;
  flex-direction: column;
  height: var(--geeks-card-height);
  min-width: 0;
  position: relative;
}

.table {
  --geeks-table-color: var(--geeks-body-color);
  --geeks-table-bg: transparent;
  --geeks-table-border-color: var(--geeks-border-color);
  --geeks-table-accent-bg: transparent;
  --geeks-table-striped-color: var(--geeks-body-color);
  --geeks-table-striped-bg: linear-gradient(to right, #e6f4ec, #f5faf0);
  --geeks-table-active-color: var(--geeks-body-color);
  --geeks-table-active-bg: var(--geeks-body-bg);
  --geeks-table-hover-color: var(--geeks-body-color);
  --geeks-table-hover-bg: var(--geeks-body-bg);
  border-color: var(--geeks-table-border-color);
  color: var(--geeks-table-color);
  margin-bottom: 1rem;
  vertical-align: top;
  width: 100%;
}

.pagination {
  --geeks-pagination-padding-x: 0.925rem;
  --geeks-pagination-padding-y: 0.5rem;
  --geeks-pagination-font-size: 0.875rem;
  --geeks-pagination-color: var(--geeks-gray-600);
  --geeks-pagination-bg: var(--geeks-card-bg);
  --geeks-pagination-border-width: var(--geeks-border-width);
  --geeks-pagination-border-color: var(--geeks-border-color);
  --geeks-pagination-border-radius: var(--geeks-border-radius);
  --geeks-pagination-hover-color: var(--geeks-gray-800);
  --geeks-pagination-hover-bg: linear-gradient(
    180deg,
    var(--geeks-primary-dark) 0%,
    var(--geeks-primary) 100%
  );
  --geeks-pagination-hover-border-color: linear-gradient(
    180deg,
    var(--geeks-primary-dark) 0%,
    var(--geeks-primary) 100%
  );
  --geeks-pagination-focus-color: var(--geeks-white);
  --geeks-pagination-focus-bg: linear-gradient(
    180deg,
    var(--geeks-primary-dark) 0%,
    var(--geeks-primary) 100%
  );
  --geeks-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(117, 79, 254, 0.25);
  --geeks-pagination-active-color: #fff;
  --geeks-pagination-active-bg: var(--geeks-primary);
  --geeks-pagination-active-border-color: linear-gradient(
    180deg,
    var(--geeks-primary-dark) 0%,
    var(--geeks-primary) 100%
  );
  --geeks-pagination-disabled-color: var(--geeks-gray-600);
  --geeks-pagination-disabled-bg: var(--geeks-gray-200);
  --geeks-pagination-disabled-border-color: var(--geeks-gray-200);
  display: flex;
  list-style: none;
  padding-left: 0;
}

/* ============================
  General 
=============================== */

body {
  background-color: #fff;
}

#db-wrapper {
  overflow: hidden;
}

.border-primary {
  --geeks-border-opacity: 1;
  border-color: rgba(
    var(--geeks-primary-rgb),
    var(--geeks-border-opacity)
  ) !important;
}

.bg-primary-gradient {
  background: linear-gradient(to right, #009245, #8cc63f) !important;
}

.btn.flux-btn:hover {
  color: var(--geeks-btn-hover-color) !important;
  text-decoration: none !important;
}

/* ============================
  Side Bar
=============================== */

.active.nav-link {
  color: var(--geeks-primary) !important;
  font-weight: 500 !important;
}

.active.nav-item > a {
  color: var(--geeks-primary) !important;
}

.navbar-vertical .navbar-nav .nav-item .nav-link {
  font-weight: 400;
}

.navbar-vertical-compact .navbar-nav .nav-item .nav-link {
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navbar-vertical-compact .navbar-nav .nav-item .nav-link > span {
  font-size: 12px;
}

/* ============================
  Filters
=============================== */

.filter-form > div {
  margin-bottom: 0.5rem !important;
  margin-top: 0.5rem !important;
}

.filter-form > div > label {
  display: none;
}

button#filter-button {
  border-radius: 0.375rem 0 0 0.375rem;
}

button#reset-button {
  border-radius: 0 0.375rem 0.375rem 0;
  border-left: 1px solid white !important;
  padding: 0;
}

@media (max-width: 576px) {
  .header .navbar {
    row-gap: 8px;
    justify-content: flex-start;
  }
}

/* ============================
  Forms
=============================== */

.form-control:focus,
.form-check-input:focus,
#reportrange:hover,
.form-select:focus {
  border-color: #38a169;
  box-shadow: 0 0 0 0.25rem rgb(157 255 0 / 16%);
  outline: 0;
}

/* ============================
  Charts
=============================== */

.apexcharts-toolbar {
  display: none !important;
}

.apexcharts-legend {
  scrollbar-width: thin;
  scrollbar-color: #d6dee1 #f9f9f9;
}

.apexcharts-legend-series {
  margin: 1px 5px !important;
}

.apexcharts-legend-marker {
  width: 10px !important;
  height: 10px !important;
}

.apexcharts-legend-text {
  font-size: 11px !important;
}

/* ============================
  Tables
=============================== */

.table-striped tbody tr:nth-of-type(odd) {
  background: linear-gradient(to right, #e6f4ec, #f5faf0) !important;
  color: var(--geeks-black);
}
.table-striped tbody tr:nth-of-type(even) {
  background: white;
}

.table > :not(caption) > * > * {
  background-color: transparent;
}

table:not(#economic-overview-table) tbody tr td:first-child {
  font-weight: 600;
}

.table a {
  /* 
  Note: Important flag required to override conflicting black color in theme.css 
  */
  color: var(--geeks-primary-light) !important;
  text-decoration: none;
  transition: text-decoration 0.3s ease;
}

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

table:not(.table-condensed) > thead > tr,
table:not(.table-condensed) > tfoot > tr {
  background: linear-gradient(
    to right,
    var(--geeks-primary-dark),
    var(--geeks-primary)
  ) !important;
}

table:not(.table-condensed) > thead > tr > th > a,
table:not(.table-condensed) > thead > tr > th,
table:not(.table-condensed) > tfoot > tr > th {
  color: var(--geeks-white) !important;
}

table.table-condensed > td:first-child,
td:first-child a {
  color: var(--geeks-black);
}

td:first-child,
td:first-child a,
table tr td:nth-child(2):not(.text-center) {
  color: var(--geeks-black) !important;
  font-weight: normal;
}

table#economic-overview-table .text-center {
  font-weight: 600 !important;
}

#path-content > div {
  width: 100%;
}

.link-icon-img {
  /* Approximates #8cc63f */
  filter: brightness(0) saturate(100%) invert(69%) sepia(32%) saturate(468%)
    hue-rotate(56deg) brightness(95%) contrast(85%);
  transition: filter 0.3s ease-in-out;
}

.link-icon-container:hover .link-icon-img {
  filter: brightness(0) saturate(100%);
}

/* ============================
  Date Range Picker
=============================== */

.easepick-wrapper {
  font-family: inherit !important;
  z-index: 9999 !important;
}

.daterangepicker .ranges li.active,
.daterangepicker td.in-range:not(.active .off):hover {
  background-color: var(--geeks-primary) !important;
  color: var(--geeks-white) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--geeks-primary) !important;
  color: var(--geeks-white) !important;
}

.daterangepicker td.in-range:not(.active) {
  background-color: rgba(var(--geeks-primary-rgb), 0.1) !important;
  color: var(--geeks-black) !important;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: var(--geeks-white) !important;
  border-color: transparent;
  color: #999 !important;
}

/* ============================
  Scrollbar 
=============================== */

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  background-color: #f9f9f9;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 4px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

/* ============================
  Analytics
=============================== */

.text-sm-heading {
  font-size: 1.1rem;
  font-weight: 600;
}

.text-xl-value {
  font-size: 2.25rem;
  font-weight: 600;
}

.tooltip-inner {
  max-width: 400px;
  text-align: left !important;
  font-family: monospace;
  background-color: #fff;
  color: #000;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 8px 12px;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #ddd;
}

.ads-txt-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.ads-txt-status .help-icon {
  cursor: pointer;
  font-size: 14px;
  color: #6c757d;
  transition: color 0.2s ease;
}

.ads-txt-status .help-icon:hover {
  color: #343a40;
}

.tooltip-inner .missing-line {
  padding: 2px 0;
  border-bottom: 1px solid #eee;
}

.tooltip-inner .missing-line:last-child {
  border-bottom: none;
}

.tooltip-inner .title {
  font-weight: bold;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid #ddd;
}

/** Quick Filters **/
.filter-form .form-select,
.filter-form #reportrange {
  color: #393f48;
}

.quick-filters-container {
  background: white;
  border-radius: 8px;
  padding: 10px 5px;
}

.quick-filter-btn {
  padding: 6px 12px;
  border: 1px solid #ced4da;
  background: white;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  color: #495057;
}

.quick-filter-btn:hover {
  background: #f8f9fa;
  border-color: #82c341;
}

.quick-filter-btn.active {
  background: #82c341;
  color: white;
  border-color: #82c341;
}

.quick-filter-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.filter-icon {
  font-size: 16px;
  line-height: 16px;
}

.custom-tooltip-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 2px;
}

.footer-tooltip-asterisk {
  color: #ffffff;
  font-weight: bold;
  cursor: help;
  font-size: 0.9em;
  vertical-align: super;
  transition: color 0.2s ease;
}

.footer-tooltip-asterisk:hover {
  color: #fff;
}

.custom-tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #1a1a1a;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  width: 320px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
  z-index: 1000;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  text-wrap: auto;
}

.custom-tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}

.custom-tooltip-wrapper:hover .custom-tooltip-content {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

@media (max-width: 768px) {
  .custom-tooltip-content {
    white-space: normal;
    width: 250px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .quick-filters-container .d-flex {
    align-items: stretch;
    gap: 15px;
  }

  .quick-filters {
    justify-content: center;
  }

  .inactive-option {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .quick-filters-container .d-flex {
    align-items: stretch;
    gap: 15px;
  }

  .quick-filters {
    justify-content: center;
  }

  .inactive-option {
    width: 100%;
    justify-content: center;
  }
}