:root {
  /* z-index */
  --z-index-flash-messages: 1200;
  --z-index-tooltip: 1100;
  --z-index-popover: 1050;
  --z-index-overlay: 1000;
  --z-index-overlay-loader: calc(var(--z-index-overlay) + 10);

  --z-index-popover-sticky: 900;
  --z-index-eyrie-save-bar-sticky: 750;

  --z-index-tablist: 700;
  --z-index-tabpanel: 600;
  --z-index-tabpanel-scrim: 601;

  --z-index-template-head: 550;
  --z-index-template-main-head-sticky: 300;
  --z-index-template-main-head: 200;
  --z-index-template-main: 100;
  --z-index-navigation-search: 601;

  --z-index-skip-to-content: 600;

  --z-index-dashboard-toolset: 150;

  /* spacing */
  --border-radius: 2px;
  --border-radius-l: 4px;
}

/* themes */
/* TODO: replace with new patterns when they are created, https://jira.cs.sys/browse/UXF-8184 */
/*.theme-dark {
  --pattern-1: url('../@crowdstrike/ui/images/dark/bg-tile-1.png');
}

.theme-light {
  --pattern-1: url('../@crowdstrike/ui/images/light/bg-tile-1.png');
}*/

/* fonts */
@font-face {
  font-family: 'Monaco';
  font-style: normal;
  font-weight: normal;
  src: url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/monaco.ba2709a5f1865cbcbb75.woff) format('woff');
}

@font-face {
  font-family: 'Calibre';
  font-style: normal;
  font-weight: 100;
  src:
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-thin.3d57a0dedce68a0e31e4.woff2) format('woff2'),
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-thin.29fdaf61b966b4823e3f.woff) format('woff');
}

@font-face {
  font-family: 'Calibre';
  font-style: italic;
  font-weight: 100;
  src:
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-thin-italic.3cf9d27383f730181e17.woff2) format('woff2'),
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-thin-italic.8f4d3074054050460202.woff) format('woff');
}

@font-face {
  font-family: 'Calibre';
  font-style: normal;
  font-weight: 200;
  src:
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-light.138652bd58a45d173d24.woff2) format('woff2'),
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-light.6abb3ff5f11ed075727b.woff) format('woff');
}

@font-face {
  font-family: 'Calibre';
  font-style: italic;
  font-weight: 200;
  src:
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-light-italic.741917cda199601ac916.woff2) format('woff2'),
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-light-italic.7dc027961eadc83472aa.woff) format('woff');
}

@font-face {
  font-family: 'Calibre';
  font-style: normal;
  font-weight: 400;
  src:
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-regular.36bd70e3a1bb0d396a29.woff2) format('woff2'),
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-regular.478ca7397f1c1a2c7977.woff) format('woff');
}

@font-face {
  font-family: 'Calibre';
  font-style: italic;
  font-weight: 400;
  src:
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-regular-italic.5a90a3c0debe42c56b91.woff2) format('woff2'),
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-regular-italic.727613f98113be2b53b9.woff) format('woff');
}

@font-face {
  font-family: 'Calibre';
  font-style: normal;
  font-weight: 500;
  src:
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-medium.b9a3b4ff06d17eeee336.woff2) format('woff2'),
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-medium.aa0bc9a898fe6f30edda.woff) format('woff');
}

@font-face {
  font-family: 'Calibre';
  font-style: italic;
  font-weight: 500;
  src:
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-medium-italic.aded262a5ece5912a48d.woff2) format('woff2'),
    url(https://assets-public.falcon.eu-1.crowdstrike.com/login/webpack/calibre-medium-italic.1d56c4e59ec25cf6a652.woff) format('woff');
}

/* typography */
body {
  font-family: Calibre, sans-serif;
}

strong {
  font-weight: 500;
}

time {
  font-family: Monaco, sans-serif;
  font-size: 12px;
  line-height: inherit;
}

/* while we only support chrome officially,
chrome is the only browser to have this feature,
and our designs are more cross-browser than we officially support

If other browsers add a search-cancel-button, this may need
to be re-evaluated */
input::-webkit-search-cancel-button {
  display: none;
}

.page-template__tabs ~ .h-main-content-area {
  height: calc(100vh - var(--template-head-height) - var(--template-head-sticky-height));
}

/*
Hides popovers when their reference element is scrolled out of view
https://popper.js.org/docs/v2/modifiers/hide/
[data-popper-reference-escaped] - hiding this will disable the `flip` modifier
which will break the falcon-popover when the viewport is small
[data-popper-reference-hidden] - breaks filters in the data-table, which gets covered
by the bulk actions bar in CI
*/
[data-popper-reference-hidden],
[data-popper-intersects-sticky] {
  opacity: 0;
  pointer-events: none;
}

/*
To be used with {{add-tooltip-class-on-hover "nested-velcro"}}
TODO: remove when we move to ember-velcro or a fix to branch 2.x is made:
https://github.com/floating-ui/floating-ui/issues/1867#issuecomment-1314216276
*/
[class*='nested-velcro'] [class*='falcon-tooltip'][data-popper-reference-hidden] {
  opacity: 1;
  pointer-events: auto;
}

/* temp fix for https://github.com/CrowdStrike/ember-toucan-core/issues/264 */
[data-test-selector='foundry-top-bar-dev-popover'] [role='switch'][aria-disabled='true'] > span {
  column-gap: 0;
  display: relative;
}

/* this lock icon appearing when the toggle is disabled causes an abrupt shift in the ui so removing from DOM flow */
[data-test-selector='foundry-top-bar-dev-popover']
  [role='switch'][aria-disabled='true']
  + [data-test-selector*='disabled-icon-container'] {
  position: absolute;
  right: 8px;
}

/* TODO: Convert to tailwind and remove this file */

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.falcon-spinner {
  --spinner-size-small: 20px;
  --spinner-size-medium: 40px;
  --spinner-size-large: 64px;

  display: inline-block;
}

.falcon-spinner::after {
  animation: spinner 1s linear infinite;
  border-radius: 50%;
  content: ' ';
  display: block;
}

.falcon-spinner--s {
  height: var(--spinner-size-small);
  width: var(--spinner-size-small);
}

.falcon-spinner--s::after {
  height: var(--spinner-size-small);
  width: var(--spinner-size-small);
}

.falcon-spinner--m {
  height: var(--spinner-size-medium);
  width: var(--spinner-size-medium);
}

.falcon-spinner--m::after {
  height: var(--spinner-size-medium);
  width: var(--spinner-size-medium);
}

.falcon-spinner--l {
  height: var(--spinner-size-large);
  width: var(--spinner-size-large);
}

.falcon-spinner--l::after {
  height: var(--spinner-size-large);
  width: var(--spinner-size-large);
}

.falcon-spinner--color-12::after {
  border: 1px solid var(--ground-floor);
  border-color: var(--ground-floor) transparent var(--ground-floor) transparent;
}

.falcon-spinner--color-2::after {
  border: 1px solid var(--primary-idle);
  border-color: var(--primary-idle) transparent var(--primary-idle) transparent;
}

.falcon-spinner--color-5::after {
  border: 1px solid var(--body-and-labels);
  border-color: var(--body-and-labels) transparent var(--body-and-labels) transparent;
}

/* TODO: Convert to tailwind and remove this file */

.flash-messages__message {
  max-width: 800px;
  min-width: 300px;
}

/* TODO: Convert to tailwind and remove this file */

.falcon-tooltip {
  --arrow-width: 10px;
}

.falcon-tooltip__arrow,
.falcon-tooltip__arrow::before {
  height: var(--arrow-width);
  position: absolute;
  width: var(--arrow-width);
  z-index: -1;
}

.falcon-tooltip__arrow::before {
  background: var(--surface-2xl);
  content: '';
  left: 0;
  transform: rotate(45deg);
}

.falcon-tooltip[data-popper-placement^='top'] > .falcon-tooltip__arrow {
  bottom: calc(-1 * var(--arrow-width) / 2);
}

.falcon-tooltip[data-popper-placement^='bottom'] > .falcon-tooltip__arrow {
  top: calc(-1 * var(--arrow-width) / 2);
}

.falcon-tooltip[data-popper-placement^='left'] > .falcon-tooltip__arrow {
  right: calc(-1 * var(--arrow-width) / 2);
}

.falcon-tooltip[data-popper-placement^='right'] > .falcon-tooltip__arrow {
  left: calc(-1 * var(--arrow-width) / 2);
}

/* TODO: Convert to tailwind and remove this file */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.falcon-modal__dialog {
  animation-duration: 0.25s;
  animation-fill-mode: both;
  animation-name: fade-in;
}

.falcon-modal__dialog--xs {
  width: 400px;
}

.falcon-modal__dialog--sm {
  width: 480px;
}

.falcon-modal__dialog--md {
  width: 640px;
}

.falcon-modal__dialog--lg {
  width: 840px;
}

.falcon-modal__dialog--xl {
  width: 1280px;
}

.toucan-form-falcon-calendar {
  background-color: var(--surface-2xl);
  border: 1px solid var(--surface-inner);
  margin-top: var(--space-3);
  max-width: 332px;
}

.toucan-form-falcon-calendar .ember-power-calendar {
  padding: var(--space-3);
}

.toucan-form-falcon-calendar .ember-power-calendar-row,
.toucan-form-falcon-calendar .ember-power-calendar-day-grid {
  display: grid;
}

.toucan-form-falcon-calendar .ember-power-calendar-row {
  grid-template-columns: repeat(7, 14.3% [col-start]);
}

.toucan-form-falcon-calendar .ember-power-calendar-day,
.toucan-form-falcon-calendar .ember-power-calendar-weekday {
  padding: var(--space-3);
}

.toucan-form-falcon-calendar .ember-power-calendar-weekdays {
  text-align: center;
}

.toucan-form-falcon-calendar .ember-power-calendar-day--other-month {
  visibility: hidden;
}

.toucan-form-falcon-calendar .ember-power-calendar-day[disabled] {
  color: var(--disabled);
  cursor: default;
}

.toucan-form-falcon-calendar .ember-power-calendar-day[disabled]:hover {
  background-color: transparent;
}

.toucan-form-falcon-calendar .ember-power-calendar-day:hover {
  background-color: var(--overlay-1);
  border-radius: var(--border-radius);
  transition: background-color 0.15s ease-out;
}

.toucan-form-falcon-calendar .ember-power-calendar-day--selected,
.toucan-form-falcon-calendar .ember-power-calendar-day--range-end,
.toucan-form-falcon-calendar .ember-power-calendar-day--range-start,
.toucan-form-falcon-calendar .ember-power-calendar-day--selected:hover,
.toucan-form-falcon-calendar .ember-power-calendar-day--range-end:hover,
.toucan-form-falcon-calendar .ember-power-calendar-day--range-start:hover {
  background-color: var(--primary-idle);
  border-radius: var(--border-radius);
  color: var(--ground-floor);
}

.toucan-form-falcon-calendar .toucan-form-falcon-calendar-nav {
  border-bottom: 1px solid var(--surface-inner);
  color: var(--titles-and-attributes);
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  text-align: center;
}

.direction-rtl {
  direction: rtl;
}

/* TODO UXF-9542 remove when long-term fix for menu item alignment is resolved */
.falcon-menu-item--disabled > span {
  justify-content: flex-start;
}

/*
  TODO: normally this would not be needed, as <FalconButtonGroup> correctly sets up the button's styling using Tailwind classes when using the *yielded* button components.
  But when people use <FalconButtonGroup><FalconButton/></FalconButtonGroup> instead, the buttons do not apply the correct styling for being part of a group, so as a temporary
  workaround we have to continue to apply the old-school CSS overriding bits here to make the legacy way still work...
*/

.falcon-button-group button {
  border-radius: 0;
  flex: 1;
}

.falcon-button-group button:first-child {
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
}

.falcon-button-group button:last-child {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
}

/*
  We don't want the native Chrome time input menu,
  as it does not match with Toucan,
  and is inconsistent with other browsers
*/
.toucan-form-calendar-picker__range input[type='time']::-webkit-calendar-picker-indicator {
  display: none;
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-row,
.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day-grid {
  display: grid;
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day-grid {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-row {
  grid-template-columns: repeat(7, 14.3% [col-start]);
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day {
  color: var(--titles-and-attributes);
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-weekday {
  color: var(--body-and-labels);
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day,
.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-weekday {
  margin: var(--space-1) 0;
  padding: var(--space-3);
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-weekdays {
  text-align: center;
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day--other-month {
  visibility: hidden;
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day[disabled] {
  color: var(--disabled);
  cursor: default;
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day[disabled]:hover {
  background-color: transparent;
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day:hover {
  background-color: var(--overlay-1);
  border-radius: var(--border-radius);
  transition: background-color 0.15s ease-out;
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day--selected {
  background-color: var(--overlay-1);
}

.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day--range-end,
.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day--range-start,
.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day--range-end[disabled],
.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day--range-start[disabled],
.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day--range-end:hover,
.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day--range-start:hover,
.toucan-form-falcon-calendar-range__calendar .ember-power-calendar-day--range-end[disabled]:hover,
.toucan-form-falcon-calendar-range__calendar
  .ember-power-calendar-day--range-start[disabled]:hover {
  background-color: var(--primary-idle);
  border-radius: var(--border-radius);
  color: var(--ground-floor);
}

/* Note: Advanced date range - For consistent Radio button styles within facets */
input[data-test-selector='all-options'] {
  appearance: auto;
  background-color: initial;
  border-radius: 0;
  height: 14px;
  outline: none;
  width: 16px;
}

/* Note: Advanced date range - remove extra padding to expand the hover to full width */
div[data-control] {
  padding: 0;
}

/* Advanced date range - hiding group.RadioField's default inner check */
[data-test-selector='adr-relative-options'] div.bg-surface-inner.pointer-events-none {
  background: none;
}

/* This is necessary for the  tooltip to overlap outside the modal. Its related to
a bug when there is a velcro inside another velcro.

TODO: remove when we move to ember-velcro or a fix to branch 2.x is made:
https://github.com/floating-ui/floating-ui/issues/1867#issuecomment-1314216276
 */
[data-test-selector='adr-wrapper'] [data-popper-reference-hidden] {
  opacity: 1;
  pointer-events: auto;
}

/* Note: Advanced score range - For consistent Radio button styles within facets */
input[data-test-selector='all-options'] {
  appearance: auto;
  background-color: initial;
  border-radius: 0;
  height: 14px;
  outline: none;
  width: 16px;
}

/* Note: Advanced score range - remove extra padding to expand the hover to full width */
div[data-control] {
  padding: 0;
}

/* Advanced score range - hiding group.RadioField's default inner check */
[data-test-selector='adr-relative-options'] div.bg-surface-inner.pointer-events-none {
  background: none;
}

/* This is necessary for the  tooltip to overlap outside the modal. Its related to
a bug when there is a velcro inside another velcro.

TODO: remove when we move to ember-velcro or a fix to branch 2.x is made:
https://github.com/floating-ui/floating-ui/issues/1867#issuecomment-1314216276
 */
[data-test-selector='adr-wrapper'] [data-popper-reference-hidden] {
  opacity: 1;
  pointer-events: auto;
}

.data-filters-value-item:hover .data-filters-value-item__excluded,
.data-filters-value-item:hover .data-filters-value-item__exclude,
.data-filters-value-item:focus-within .data-filters-value-item__excluded,
.data-filters-value-item:focus-within .data-filters-value-item__exclude {
  display: flex;
}

.data-filters-value-item:hover .data-filters-value-item__excluded:focus,
.data-filters-value-item:hover .data-filters-value-item__excluded:hover,
.data-filters-value-item:hover .data-filters-value-item__exclude:focus,
.data-filters-value-item:hover .data-filters-value-item__exclude:hover,
.data-filters-value-item:focus-within .data-filters-value-item__excluded:focus,
.data-filters-value-item:focus-within .data-filters-value-item__excluded:hover,
.data-filters-value-item:focus-within .data-filters-value-item__exclude:focus,
.data-filters-value-item:focus-within .data-filters-value-item__exclude:hover {
  color: var(--positive);
  outline: none;
}

.data-filters-value-item:hover .data-filters-value-item__count,
.data-filters-value-item:focus-within .data-filters-value-item__count {
  display: none;
}

/* stylelint-disable order/properties-alphabetical-order */
/* stylelint-disable no-duplicate-selectors */
body {
  overscroll-behavior: none;
  /*
  Firefox custom scrollbars
  https://drafts.csswg.org/css-scrollbars-1/
  */
  scrollbar-color: var(--disabled) var(--surface-2xl); /* colors don't change on body scrollbar, only scrollable containers  */
  scrollbar-width: thin;
}

/*
Chrome custom scrollbars (hasn't implemented spec)
https://webkit.org/blog/363/styling-scrollbars/
https://css-tricks.com/the-current-state-of-styling-scrollbars/

.has-scrollbars-always is manually added at application boot time
*/
.has-scrollbars-always ::-webkit-scrollbar {
  height: 0.75rem; /* vertical */
  width: 0.75rem; /* horizontal */
}

.has-scrollbars-always ::-webkit-scrollbar-track,
.has-scrollbars-always ::-webkit-scrollbar-corner {
  background-color: var(--surface-2xl);
}

.has-scrollbars-always ::-webkit-scrollbar-thumb {
  background-color: var(--disabled);
  border: 2px solid var(--surface-2xl);
  border-radius: 0.75rem;
  min-height: 2rem;
}

.has-scrollbars-always ::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-idle);
}

/* cell: active > info-panel, striped */
.info-panel .data-table-row:nth-child(1 + 2n) .data-table-cell.active {
  background:
    linear-gradient(var(--surface-2xl), var(--surface-2xl)),
    linear-gradient(var(--overlay-0\.5), var(--overlay-0\.5)),
    linear-gradient(var(--surface-inner), var(--surface-inner));
}

/* row: checked > info-panel, striped */
.info-panel .data-table-row:nth-child(1 + 2n) .data-table-cell.selected {
  background:
    linear-gradient(var(--selected), var(--selected)),
    linear-gradient(var(--overlay-0\.5), var(--overlay-0\.5)),
    linear-gradient(var(--surface-inner), var(--surface-inner));
}

/* row: selected > info-panel, striped, isHover */
.info-panel .hover\:data-table-row:nth-child(1 + 2n):hover .hover\:data-table-cell.active {
  background:
    linear-gradient(var(--surface-lg), var(--surface-lg)),
    linear-gradient(var(--surface-2xl), var(--surface-2xl)),
    linear-gradient(var(--overlay-0\.5), var(--overlay-0\.5)),
    linear-gradient(var(--surface-inner), var(--surface-inner));
}

.toucan-data-table-scrim {
  position: relative;
}

.toucan-data-table-scrim::after {
  background: linear-gradient(var(--overlay-0\.5), var(--overlay-0\.5));
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

/* cell: default, isHover  */
.hover\:data-table-row:hover .hover\:data-table-cell {
  background:
    linear-gradient(var(--surface-lg), var(--surface-lg)),
    linear-gradient(var(--surface-md), var(--surface-md));
}

/* cell: default  */
.data-table-row .data-table-cell:not(.active, .selected) {
  background: linear-gradient(var(--surface-md), var(--surface-md));
}

/* cell: active > hover */
.data-table-row:hover .hover\:data-table-cell.active {
  background:
    linear-gradient(var(--surface-2xl), var(--surface-2xl)),
    linear-gradient(var(--surface-md), var(--surface-md));
}

/* cell: selected > hover */
.data-table-row:hover .hover\:data-table-cell.selected {
  background:
    linear-gradient(var(--selected), var(--selected)),
    linear-gradient(var(--surface-lg), var(--surface-lg)),
    linear-gradient(var(--surface-md), var(--surface-md));
}

/* cell: active+ selected > hover */
.data-table-row:hover .hover\:data-table-cell.selected.active {
  background:
    linear-gradient(var(--selected), var(--selected)),
    linear-gradient(var(--surface-2xl), var(--surface-2xl));
}

/* cell: default, striped */
.data-table-row:not(.inactive):nth-child(2n) .data-table-cell:not(.active, .selected) {
  background:
    linear-gradient(var(--overlay-0\.5), var(--overlay-0\.5)),
    linear-gradient(var(--surface-md), var(--surface-md));
}

/* cell: default, isHover, striped */
.data-table-row:nth-child(2n):hover .hover\:data-table-cell:not(.active, .selected) {
  background:
    linear-gradient(var(--surface-lg), var(--surface-lg)),
    linear-gradient(var(--surface-md), var(--surface-md));
}

/* cell: active > default */
.data-table-cell.active {
  background:
    linear-gradient(var(--surface-2xl), var(--surface-2xl)),
    linear-gradient(var(--surface-md), var(--surface-md));
}

/* cell: selected > default */
.data-table-cell.selected {
  background:
    linear-gradient(var(--selected), var(--selected)),
    linear-gradient(var(--surface-md), var(--surface-md));
}