:root {
  --bg-page: #F3F3F3;
  --panel-bg: white;

  /* Text */
  --text-color: #0A0A0A;
  --text-color-light: color-mix(in srgb, black, transparent 30%);
  --text-color-lighter: color-mix(in srgb, black, transparent 55%);
  --text-color-inv: white;

  --minicalendar-activity-color: color-mix(in srgb, var(--text-color), transparent 80%);

  --gray-100: color-mix(in srgb, var(--text-color), transparent 93%);
  --gray-250: color-mix(in srgb, var(--text-color), transparent 80%);

  --in-page-edit-hover-color: var(--bg-page);
  --in-page-edit-loading-color: color-mix(in srgb, var(--in-page-edit-hover-color), transparent 75%);

  /* Popup */
  --bg-popup: white;
  --popup-border-color: transparent;
  --popup-shadow: 0px 4px 5px 3px color-mix(in srgb, black, transparent 75%);
  --elevation-2-shadow: 0px 5px 12px 0px color-mix(in srgb, black, transparent 90%);

  /* Panel */
  --panel-header-bg: color-mix(in srgb, var(--text-color), transparent 95%);
  --panel-header-darker: color-mix(in srgb, var(--text-color), transparent 90%);
  /* Cards */
  --card-bg: var(--panel-header-bg);

  --removable-label-bg: var(--bg-page);
  --removable-label-inner-bg: white;

  /* Scrollbar */
  --scrollbar-thumb-bg: color-mix(in srgb, var(--text-color), transparent 30%);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--text-color), transparent 60%);
  --scrollbar-track-bg: color-mix(in srgb, var(--text-color), transparent 95%);
}

.social-login-button.google {
  border: 1px solid var(--gray);
}

@media (min-width: 769px) {
  body.no-navigation {
    background: linear-gradient(170deg, #D3DCE2 0%, #f1f3f4 100%);
  }
}

.brand-info-panel-logo {
  padding: 0 !important;
}

.brand-image-wrapper {
  border: solid 1.5px var(--panel-content-border);
}