@import url("https://cdn.neutrum.ai/fonts/sen/sen.css");
@import url("https://cdn.neutrum.ai/fonts/avenir_next/avenir_next.css");

/* ROOT VARIABLES
Colors are stored in RGB / HSL values in order to allow for mixing with alpha and further calculations.

Branding:
Primary color:                  --neutrum-primary
Background color:               --neutrum-secondary
Organization logo URL (1by1):   --neutrum-organization-logo-1by1

*/
:root {
  /* =======> Relevant for branding */
  --neutrum-primary-h: 55.24;
  --neutrum-primary-s: 100%;
  --neutrum-primary-l: 62.94%;

  --neutrum-secondary-h: 60;
  --neutrum-secondary-s: 1.3%;
  --neutrum-secondary-l: 15.1%;

  --neutrum-positive: hsl(144, 55%, 55%);
  --neutrum-neutral: hsl(48, 75%, 55%);
  --neutrum-negative: hsl(11, 100%, 65%);
  --neutrum-indeterminate: hsl(0, 0%, 60%);

  --highcharts-color-0: hsl(54, 100%, 62%);
  --highcharts-color-1: hsl(67, 53%, 44%);
  --highcharts-color-2: hsl(267, 42%, 55%);
  --highcharts-color-3: hsl(50, 81%, 43%);
  --highcharts-color-4: hsl(291, 48%, 49%);
  --highcharts-color-5: hsl(64, 90%, 27%);
  --highcharts-color-6: hsl(42, 100%, 51%);
  --highcharts-color-7: hsl(156, 48%, 61%);
  --highcharts-color-8: hsl(266, 33%, 66%);
  --highcharts-color-9: hsl(92, 50%, 40%);
  /* <======= Relevant for branding */

  /* Specific hardcoded custom color */
  --neutrum-custom-color-211-100-76: hsl(211, 100%, 76%);
  --neutrum-custom-color-136-52-75: hsl(136, 52%, 75%);

  /*  Calculation variables  */
  --transform-lighter: 10%;
  --transform-darker: 10%;

  /* Primary color */
  --neutrum-primary: hsl(
    var(--neutrum-primary-h),
    var(--neutrum-primary-s),
    var(--neutrum-primary-l)
  );

  --neutrum-primary-light-l: calc(
    var(--neutrum-primary-l) + var(--transform-lighter)
  );
  --neutrum-primary-dark-l: calc(
    var(--neutrum-primary-l) - var(--transform-darker)
  );

  --neutrum-primary-light: hsl(
    var(--neutrum-primary-h),
    var(--neutrum-primary-s),
    var(--neutrum-primary-light-l)
  );
  --neutrum-primary-dark: hsl(
    var(--neutrum-primary-h),
    var(--neutrum-primary-s),
    var(--neutrum-primary-dark-l)
  );

  /* Secondary color */
  --neutrum-secondary: hsl(
    var(--neutrum-secondary-h),
    var(--neutrum-secondary-s),
    var(--neutrum-secondary-l)
  );

  --neutrum-secondary-light-l: calc(
    var(--neutrum-secondary-l) + var(--transform-lighter)
  );
  --neutrum-secondary-dark-l: calc(
    var(--neutrum-secondary-l) - var(--transform-darker)
  );

  --neutrum-secondary-light: hsl(
    var(--neutrum-secondary-h),
    var(--neutrum-secondary-s),
    var(--neutrum-secondary-light-l)
  );
  --neutrum-secondary-dark: hsl(
    var(--neutrum-secondary-h),
    var(--neutrum-secondary-s),
    var(--neutrum-secondary-dark-l)
  );
  --neutrum-font-family-default: "Sen", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --neutrum-font-family-avenir-next: "Avenir Next", -apple-system,
    BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

*,
::after,
::before {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--neutrum-font-family-default) !important;
  margin: 0;
  background-color: hsl(210, 17%, 98%);
}
h1,
h2 {
  font-weight: 700;
}

/* GENERAL */
.neutrum-primary {
  background-color: var(--neutrum-primary);
}
.neutrum-primary-light {
  background-color: var(--neutrum-primary-light);
}
.neutrum-primary-dark {
  background-color: var(--neutrum-primary-dark);
}
.neutrum-secondary {
  background-color: var(--neutrum-secondary);
}
.neutrum-secondary-light {
  background-color: var(--neutrum-secondary-light);
}
.neutrum-secondary-dark {
  background-color: var(--neutrum-secondary-dark);
}
.neutrum-logo-background {
  background-image: var(--neutrum-organization-logo-1by1);
}

/* BOOTSTRAP */
.btn {
  font-weight: 600;
}
.modal {
  z-index: 3000 !important;
  --bs-modal-zindex: 3000 !important;
}
.offcanvas {
  --bs-offcanvas-zindex: 3045 !important;
}
.popover {
  --bs-popover-zindex: 3010 !important;
}
.tooltip {
  --bs-tooltip-zindex: 3080 !important;
}

/* SweetAlert2 */
div:where(.swal2-container) {
  z-index: 3100 !important;
}

/* BUTTONS */
/* Neutrum Button */
.neutrum-btn {
  color: var(--neutrum-secondary) !important;
  background: var(--neutrum-primary) !important;
}
.neutrum-btn:hover {
  background: var(--neutrum-primary-light) !important;
}
.neutrum-btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--neutrum-primary-rgb), 0.25) !important;
}
.neutrum-btn:active {
  color: var(--neutrum-secondary) !important;
  border-color: var(--neutrum-primary-dark) !important;
}
.neutrum-btn:disabled {
  background: var(--neutrum-primary-light) !important;
  border-color: var(--neutrum-primary) !important;
}

.neutrum-btn-outline {
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--neutrum-primary) !important;
}

/* RANGE */
.neutrum-range::-webkit-slider-thumb {
  background: hsl(
    var(--neutrum-primary-h),
    var(--neutrum-primary-s),
    40%
  ) !important;
}
.neutrum-range::-moz-range-thumb {
  background: hsl(
    var(--neutrum-primary-h),
    var(--neutrum-primary-s),
    40%
  ) !important;
}
.neutrum-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(100, 100, 100, 0.25) !important;
}
.neutrum-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(100, 100, 100, 0.25) !important;
}
.neutrum-range::-webkit-slider-thumb:active {
  background-color: hsla(
    var(--neutrum-primary-h),
    var(--neutrum-primary-s),
    var(--neutrum-primary-l),
    0.75
  ) !important;
}
.neutrum-range::-moz-range-thumb:active {
  background-color: hsla(
    var(--neutrum-primary-h),
    var(--neutrum-primary-s),
    var(--neutrum-primary-l),
    0.75
  ) !important;
}

/* NAV PILLS */
.neutrum-nav-pills .nav-link {
  color: #52575d;
}
.neutrum-nav-pills .nav-link.active {
  background-color: #74808b !important;
}
.neutrum-nav-pills .nav-link:focus,
.neutrum-nav-pills .nav-link:hover {
  color: #464c55;
  background-color: #d8dbdf;
}

/* CARDS */
.chartcard > .card-header {
  background-color: var(--neutrum-secondary);
  color: var(--neutrum-primary);
}

.chartcard > .card-header > h6 {
  margin: 0;
}

/* MAPS */
.neutrum-map-marker {
  background-image: url("https://cdn.neutrum.ai/images/maps/neutrum-map-marker.svg");
  background-size: cover;
  width: 32px;
  height: 32px;
  cursor: pointer;
}