/* CSS for Vault [Dashboard] */

/* Desktop */
:root {
  --size-container-max: 1440px;
}

/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar,
body::-webkit-scrollbar {display: none;} /* Chrome, Safari, Opera */
body {-ms-overflow-style: none;} /* IE & Edge */
html {scrollbar-width: none;} /* Firefox */

/* ------------------------- Reset -------------------------------------------------- */

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

html {
  scroll-behavior: initial;
}

html,
body {
  -webkit-font-smoothing: antialiased;
}

body.dash {
  position: relative;
  height: 100%;
  min-height: 100%;
}

.dash svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Selection */
::selection {
  background-color: rgba(var(--color-rgb-gray), 0.2);
  text-shadow: none;
}

.dash[data-dash-theme="dark"] ::selection {
  background-color: rgba(var(--color-rgb-gray), 0.35);
}

::-moz-selection {
  background-color: rgba(var(--color-rgb-gray), 0.2);
  text-shadow: none;
}

.dash[data-dash-theme="dark"] ::-moz-selection {
  background-color: rgba(var(--color-rgb-gray), 0.35);
}

/* ------------------------- Lenis -------------------------------------------------- */

html.lenis {height: auto;}
.lenis.lenis-smooth {scroll-behavior: auto; height: 100vh;}
.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;}
.lenis.lenis-stopped {overflow: hidden;}
.lenis.lenis-scrolling iframe {pointer-events: none;}

/* ------------------------- Dash -------------------------------------------------- */

.dash[data-dash-theme="dark"] {
  background-color: var(--color-neutral-100);
}

.dash-main {
  transition: width var(--animation-default), margin-left var(--animation-default);
  min-height: 100vh;
  min-height: 100svh;
}

:is(.wf-design-mode, .wf-editor) .dash-main__inner{
  opacity: 1;
  visibility: visible;
}

.dash-h-xl {
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 4.75em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.06em;
}

@media screen and (max-width: 767px) {
  .dash-h-xl {
    font-size: 3.75em;
  }
  
  .dash-h-xl.is--smaller-mobile {
    font-size: 3.125em;
  }
}

.dash-h-l {
  font-size: 2.625em;
  font-weight: 400;
  line-height: 1;
  font-family: Haffer XH, Arial, sans-serif;
  letter-spacing: -0.03em;
  
}

.dash-h-m,
.dash-res-more :is(h1, h2, h3) {
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1;
  font-variation-settings: "wght" 460;
  letter-spacing: -0.02em;
}

.dash-h-s,
.dash-res-more h4 {
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1.125em;
  font-weight: 400;
  line-height: 1;
  font-variation-settings: "wght" 500;
  letter-spacing: -0.01em;
}

.dash-h-xs,
.dash-res-more h5 {
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1;
  font-variation-settings: "wght" 500;
  letter-spacing: -0.01em;
}

:where(.dash) p {
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1;
  font-variation-settings: "wght" 460;
  letter-spacing: -0.01em;
}

.dash-p {
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(var(--color-rgb-tint), 0.8);
  font-variation-settings: "wght" 460;
  letter-spacing: -0.01em;
}

.dash-p strong {
  color: rgba(var(--color-rgb-tint), 1);
  font-variation-settings: "wght" 550;
}

.dash-p.is--ignore strong {
  color: rgba(var(--color-ignore-rgb-dark), 1);
}


/* ------------------------- Side Navigation -------------------------------------------------- */

.dash-side {
  transition: width var(--animation-default);
}

.dash-side .dash-side__collapse-btn {
  transition: transform var(--animation-default), color var(--animation-ease);
  transform: translateX(-101%) rotate(0.001deg);
  color: var(--color-neutral-500);
}

.dash-side:hover .dash-side__collapse-btn {
  transform: translateX(0%) rotate(0.001deg);
}

@media (hover: none) and (pointer: coarse) {
  .dash-side .dash-side__collapse-btn {
    transform: translateX(0%) rotate(0.001deg);
  }
}

.dash-side__collapse-btn:hover {
  color: var(--color-neutral-800);
}

.dash-side .dash-side__collapse-svg {
  transition: transform var(--animation-default) 0s;
  transform: scaleX(1) rotate(0.001deg);
}

@media screen and (min-width: 992px) {
  [data-dash-collapsed="true"] .dash-side__collapse-svg {
    transition: transform var(--animation-default) var(--duration-default);
    transform: scaleX(-1) rotate(0.001deg);
  }
}

/* Logo */


.dash-side__logo-wordmark-wrap {
  transition: width var(--animation-default); 
  width: calc(100% - 1.5em);
}

@media screen and (min-width: 992px) {
  [data-dash-collapsed="true"] .dash-side__logo-wordmark-wrap {
    width: 0em; 
  }
}

.dash-side__logo-icon {
  transition: transform var(--animation-default); 
  transform: rotate(0.001deg);  
}

.dash-side__logo-icon {
  color: var(--color-purple);
}

[data-dash-theme="dark"] .dash-side__logo-icon {
  color: var(--color-electric);
}

@media screen and (min-width: 992px) {
  [data-dash-collapsed="true"] .dash-side__logo-icon {
    transform: rotate(-180deg);
  }
}

.dash-side__logo .dash-side__logo-icon-wrap {
  transition: transform var(--animation-default); 
  transform: rotate(0.001deg);  
}

@media (hover: hover) and (pointer: fine) {
  .dash-side__logo:hover .dash-side__logo-icon-wrap {
    transform: rotate(-180deg);
  }
}

/* Category Button */

.dash-type-btn {
  transition: background-color var(--animation-ease);
  background-color: rgba(var(--color-rgb-tint), 0);
}

.dash-type-btn.is--active,
.dash-type-btn.w--current,
.dash-type-btn:hover,
.dash-side__cat:has(.dash-cat-btn.w--current) .dash-type-btn {
  background-color: rgba(var(--color-rgb-tint), 0.055);
}

.dash-cat-btn__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

@media (hover: hover) and (pointer: fine) {
  .dash-type-btn.w--current:hover,
  .dash-type-btn.is--active:hover, 
  .dash-side__cat:has(.dash-cat-btn.w--current) .dash-type-btn.is--active:hover{
    background-color: rgba(var(--color-rgb-tint), 0.09);
  }
}

.dash-type-btn__title {
  transition: opacity var(--animation-default-half) 0s; 
  opacity: 1;
}

@media screen and (min-width: 992px) {
  [data-dash-collapsed="true"] .dash-type-btn__title {
    transition: opacity var(--animation-default-half) var(--duration-default-half); 
    opacity: 0;
  }
}

.dash-icon {
  transition: color var(--animation-ease);
}

.dash-icon svg * {
  stroke-width: 1.25;
}

.dash-type-btn.is--active .dash-icon,
.dash-type-btn.w--current .dash-icon,
.dash-side__cat:has(.dash-cat-btn.w--current) .dash-icon {
  color: var(--color-coral);
}

.dash-type-btn .dash-command {
  transition: opacity var(--animation-ease);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .dash-type-btn:hover .dash-command {
    opacity: 1;
  }
}

/* Category Dropdown */

.dash-cat-dropdown__bottom {
  transition: grid-template-rows var(--animation-default);
  display: grid;
  grid-template-rows: 0fr;
  align-items: flex-start;
}

[data-dash-collapsed="false"] .dash-side__cat:has(.dash-type-btn.is--active) .dash-cat-dropdown__bottom,
[data-dash-collapsed="false"] .dash-side__cat:has(.dash-cat-btn.is--active) .dash-cat-dropdown__bottom,
[data-dash-collapsed="false"] .dash-side__cat:has(.dash-type-btn.w--current) .dash-cat-dropdown__bottom,
[data-dash-collapsed="false"] .dash-side__cat:has(.dash-cat-btn.w--current) .dash-cat-dropdown__bottom {
  grid-template-rows: 1fr;
}

@media screen and (max-width: 991px) {
  [data-dash-collapsed] .dash-side__cat:has(.dash-type-btn.is--active) .dash-cat-dropdown__bottom {
    grid-template-rows: 1fr;
  }
}

.dash-cat-dropdown__border-bottom-line {
  transition: opacity var(--animation-default-half) var(--duration-default-quarter); 
  opacity: 0;
}

[data-dash-collapsed="false"] .dash-side__cat:has(.dash-type-btn.is--active) .dash-cat-dropdown__border-bottom-line,
[data-dash-collapsed="false"] .dash-side__cat:has(.dash-cat-btn.is--active) .dash-cat-dropdown__border-bottom-line,
[data-dash-collapsed="false"] .dash-side__cat:has(.dash-type-btn.w--current) .dash-cat-dropdown__border-bottom-line,
[data-dash-collapsed="false"] .dash-side__cat:has(.dash-cat-btn.w--current) .dash-cat-dropdown__border-bottom-line {
  transition: opacity var(--animation-default-half) var(--duration-default-quarter); 
  opacity: 1;
}

@media screen and (max-width: 991px) {
  [data-dash-collapsed] .dash-side__cat:has(.dash-type-btn.is--active) .dash-cat-dropdown__border-bottom-line {
    opacity: 1;
  }
}

@keyframes show-overflow {
  from { overflow-y: hidden;}
}

@keyframes hide-overflow {
  from { overflow-y: scroll;}
}

.dash-cat-dropdown__collection {
  animation: hide-overflow 2s;
  overflow-y: hidden;
  /* 
  A = .dash-side__top + gap + .dash-side__bottom height (collapsed)
  B = Extra margin/padding in .dash-cat-dropdown__collection
  C = Top + bottom padding on .dash-side element
  D = Max size
  
  max-height  min((100vh - (  A  +   B    +  C )),   D   ) */
  /*max-height: calc(100vh - (25em + 1.75em + 1em));*/
  max-height: min((100vh - (28.25em + 1.75em + 1em)), 18.125em);
}

/* Free vault is smaller */
.dash-cat-dropdown__free + .dash-cat-dropdown__collection {
  max-height: min((100vh - (28.25em + 1.75em + 1em)), 14.375em);
  /*overflow-y: hidden !important;*/
}

@media screen and (max-width: 991px) {
  .dash-cat-dropdown__collection {
    /*max-height: calc(100vh - (31.75em + 1.75em + 1em));*/
    max-height: min((100vh - (27.25em + 1.75em + 1em)), 12.125em);
  }
  
  .dash-cat-dropdown__free + .dash-cat-dropdown__collection {
    max-height: min((100vh - (27.25em + 1.75em + 1em)), 8.375em);
  }
}

[data-dash-collapsed="false"] .dash-side__cat:has(.dash-type-btn.is--active) .dash-cat-dropdown__collection,
[data-dash-collapsed="false"] .dash-side__cat:has(.dash-cat-btn.is--active) .dash-cat-dropdown__collection,
[data-dash-collapsed="false"] .dash-side__cat:has(.dash-type-btn.w--current) .dash-cat-dropdown__collection,
[data-dash-collapsed="false"] .dash-side__cat:has(.dash-cat-btn.w--current) .dash-cat-dropdown__collection {
  animation: show-overflow 2s;
  overflow-y: scroll;
}

@media screen and (max-width: 991px) {
  [data-dash-collapsed] .dash-side__cat:has(.dash-type-btn.is--active) .dash-cat-dropdown__collection,
  [data-dash-collapsed] .dash-side__cat:has(.dash-cat-btn.is--active) .dash-cat-dropdown__collection,
  [data-dash-collapsed] .dash-side__cat:has(.dash-type-btn.w--current) .dash-cat-dropdown__collection,
  [data-dash-collapsed] .dash-side__cat:has(.dash-cat-btn.w--current) .dash-cat-dropdown__collection {
    animation: show-overflow 2s;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}

/* width */
.dash-cat-dropdown__collection::-webkit-scrollbar {
  display: block;
  width: 0.25em;
}

/* Track */
.dash-cat-dropdown__collection::-webkit-scrollbar-track {
  background: transparent;
  margin-bottom: 0.75em;
}

/* Handle */
.dash-cat-dropdown__collection::-webkit-scrollbar-thumb {
  background: rgba(var(--color-rgb-tint), 0);
  border-radius: 0.25em;
}

@media (hover: hover) and (pointer: fine) {
  .dash-cat-dropdown__bottom:hover .dash-cat-dropdown__collection::-webkit-scrollbar-thumb {
    background: rgba(var(--color-rgb-tint), 0.06);
  }

  /* Handle on hover */
  .dash-cat-dropdown__collection::-webkit-scrollbar-thumb:hover,
  .dash-cat-dropdown__bottom:hover .dash-cat-dropdown__collection::-webkit-scrollbar-thumb:hover{
    background: rgba(var(--color-rgb-tint), 0.12);
    cursor: grabbing;
  }
}

/* Category Sub */

.dash-cat-btn__inner {
  transition: background-color var(--animation-ease), color var(--animation-ease);
  background-color: rgba(var(--color-rgb-tint), 0);
}

.dash-cat-btn.is--active .dash-cat-btn__inner,
.dash-cat-btn.w--current .dash-cat-btn__inner,
.dash-cat-btn:hover .dash-cat-btn__inner {
  background-color: rgba(var(--color-rgb-tint), 0.055);
}

.dash-cat-btn.is--active .dash-cat-btn__inner,
.dash-cat-btn.w--current .dash-cat-btn__inner{
  color: var(--color-dark);
}

/*.dash-cat-btn__branch {*/
/*  color: #C6C6C6;*/
/*}*/

.dash-cat-btn__branch-line {
  transition: width var(--animation-ease);
  width: 1.125em;
  height: 3em;
}

.dash-cat-btn.is--active .dash-cat-btn__branch-line,
.dash-cat-btn.w--current .dash-cat-btn__branch-line,
.dash-cat-btn:hover .dash-cat-btn__branch-line {
  width: 0.625em;
}

@media (hover: hover) and (pointer: fine) {
  .dash-cat-btn.w--current:hover .dash-cat-btn__inner {
    background-color: rgba(var(--color-rgb-tint), 0.09);
  }
}

/* Dash Side User */

.dash-user-btn__pic-p {
  font-size: 0px
}

.dash-user-btn__pic-p:first-letter {
  font-size: 0.9rem
}

.dash-user-btn__pic-img[src="https://cdn.prod.website-files.com/plugins/Basic/assets/placeholder.60f9b1840c.svg"],
.dash-user-btn__pic-img[src=""],
:is(.wf-design-mode, .wf-editor) .dash-user-btn__pic-img{
  display: none;
}

/* Dash Side Tooltip */

.dash-cat-tooltip {
  transition: transform var(--animation-default-half), opacity var(--animation-default-half), visibility var(--animation-default-half); 
  transform: translate(0.25em, -50%) rotate(0.001deg);
}

.dash-user-btn + .dash-cat-tooltip {
  margin-left: -0.5em;
}

.dash-settings-btn + .dash-cat-tooltip {
  margin-left: 0.25em;
}


@media screen and (min-width: 992px) {
  @media (hover: hover) and (pointer: fine) {
    [data-dash-collapsed="true"] .dash-type-btn:hover + .dash-cat-tooltip,
    [data-dash-collapsed="true"] .dash-user-btn:hover + .dash-cat-tooltip, 
    [data-dash-collapsed="true"] .dash-settings-btn:hover + .dash-cat-tooltip,
    [data-dash-collapsed="true"] .dash-unlock-btn:hover + .dash-cat-tooltip {
      transform: translate(0em, -50%) rotate(0.001deg);
      opacity: 1;
      visibility: visible;
    }
  }
}

/* Settings List */

.dash-side-settings {
  transition: transform var(--animation-default-half), opacity var(--animation-default-half), visibility var(--animation-default-half); 
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25em) rotate(0.001deg);
}

.dash-user-btn:hover + .dash-side-settings,
.dash-side-settings:hover {
  transition: transform var(--animation-default-half), opacity var(--animation-default-half), visibility var(--animation-default-half); 
  opacity: 1;
  visibility: visible;
  transform: translateY(0em) rotate(0.001deg);
}

.dash-toggle__dot {
  transition: transform var(--animation-default-half);
  transform: translateX(0em) rotate(0.001deg);
}

[data-dash-theme="dark"] .dash-toggle__dot {
  transform: translateX(0.75em) rotate(0.001deg);
}

[data-dash-theme="dark"] .dash-side .is--dark-mode,
[data-dash-theme="light"] .dash-side .is--light-mode{
  display: block;
}

[data-dash-theme="dark"] .dash-side .is--light-mode,
[data-dash-theme="light"] .dash-side .is--dark-mode{
  display: none;
}

/* Settings Button */

.dash-settings-btn {
  transition: background-color var(--animation-ease);
  background-color: rgba(var(--color-rgb-tint), 0);
}

@media (hover: hover) and (pointer: fine) {
  .dash-settings-btn:hover {
    background-color: rgba(var(--color-rgb-tint), 0.055);
  }
}

/* Settings Dark/Light */

.dash-settings-btn {
  transition: background-color var(--animation-ease);
  background-color: rgba(var(--color-rgb-tint), 0);
}

.dash-settings-btn.is--theme {
  transition: background-color var(--animation-ease), height var(--animation-default);
}

@media screen and (min-width: 992px) {
  [data-dash-collapsed="true"] .dash-settings-btn.is--theme {
    height: 3em;
  }
}

@media (hover: hover) and (pointer: fine) {
  .dash-settings-btn:hover {
    background-color: rgba(var(--color-rgb-tint), 0.055);
  }
  
  .dash-settings-btn.is--theme:hover {
    background-color: rgba(var(--color-rgb-tint), 0.025);
  }
}

/* Settings Membership type */
[data-dash-theme="dark"] .dash-settings-membership__icon {background-color: #3A3627;}
[data-dash-theme="dark"] .dash-settings-membership__icon.is--admin {background-color: #2D3E41;}
[data-dash-theme="dark"] .dash-settings-membership__icon.is--rocket {background-color: #3B2B27;}
[data-dash-theme="dark"] .dash-settings-membership__icon.is--goat {background-color: #38322B;}


/* CSS Keyframe Animation */
@keyframes shine { 
  0% {
    transform: translateX(-150%);
  }
  20% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(150%);
  }
}

.dash-count__shine {
  animation: shine 3s linear;
  animation-iteration-count: infinite;
}

[data-dash-theme="dark"] .dash-side-settings .dash-count__shine {
  opacity: 0.1;
}

/* Locked */

.dash-type-btn[data-locked],
[data-locked] > .dash-cat-btn{
  cursor: not-allowed;
}

.dash-type-btn[data-locked] .dash-type-btn__end > * {
  display: none;
}

.dash-type-btn[data-locked] .dash-type-btn__end > .dash-type-btn__locked,
[data-locked] > .dash-cat-btn + .dash-cat-btn__locked{
  display: flex;
}

/*.dash-side.is--demo .dash-side__logo-icon {*/
/*  color: var(--color-dark);*/
/*}*/

[data-dash-theme="dark"] .dash-side.is--demo .dash-side__logo-icon {
  color: var(--color-dark);
}

[data-dash-theme="dark"] .dash-cat-btn__scribble-p {
  color: var(--color-electric);
}

body:has(.dash-side.is--demo) .locked-box .saved-btn {
  display: flex !important;
}

/* Locked Badge */

[data-dash-theme="dark"] .locked-badge,
[data-dash-theme="dark"] .locked-badge .locked-badge__bg-2 {
  background-color: var(--color-ignore-black);
}

[data-wf--dash-locked-badge--variant="badge"]  {
  width: 1.875em;
  padding: 0;
  justify-content: center;
}

[data-wf--dash-locked-badge--variant="badge"] .locked-bage__span {
  display: none;
}

.locked-badge__absolute {
  transition: transform var(--animation-default-half), opacity var(--animation-default-half);
  transform: scale(0.25) rotate(0.001deg);
}

.dash:has(.dash-side.is--demo) .locked-box {
  cursor: not-allowed !important;
}

.dash:has(.dash-side.is--demo) .locked-box:hover .locked-badge__absolute {
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
}

.dash:has(.dash-side.is--demo) .locked-box > * {
  pointer-events: none;
  user-select: none;
}

.dash:has(.dash-side.is--demo) .dash-mobile-nav .dash-mobile-nav__search,
.dash:has(.dash-side.is--demo) .dash-mobile-nav .saved-btn {
  display: none;
}

.dash:has(.dash-side.is--demo) .dash-res-main__icon-btns [data-saved-toggle] {
  display: none;
}

.dash:has(.dash-side.is--demo) .dash-res-doc-group .dash-info-symbol {
  display: none;
}

/* ------------------------- Dash Side Mobile -------------------------------------------------- */

.dash-side__mobile-nav .dash-mobile-nav__hamburger-bar {
  position: absolute;
}

.dash-side__mobile-nav .dash-mobile-nav__hamburger-bar:nth-child(1) {
  display: none;
}

.dash-side__mobile-nav .dash-mobile-nav__hamburger-bar:nth-child(2) {
  transform: rotate(-45deg);
}

.dash-side__mobile-nav .dash-mobile-nav__hamburger-bar:nth-child(3) {
  transform: rotate(45deg);
}

@media screen and (max-width: 991px) {
  [data-dash-nav-status] .dash-side {
    transition: opacity var(--animation-ease), visibility var(--animation-ease);
    opacity: 0;
    visibility: hidden;
  }
  
  [data-dash-nav-status="active"] .dash-side {
    opacity: 1;
    visibility: visible;
  }
}

/* ------------------------- Dash Top -------------------------------------------------- */

.dash-main-top__h1 {
   overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  min-height: 1.2em;
}

.dash-main-top__end {
  transition: width var(--animation-default); 
}

.search-dummy {
  transition: background-color var(--animation-ease);
  background-color: rgba(var(--color-rgb-tint), 0.055);
}

.saved-btn {
  transition: background-color var(--animation-ease);
}

.saved-btn .dash-icon {
  color: rgba(var(--color-rgb-tint), 0.7);
}

.search-dummy .dash-command.is--search-dummy {
  background-color: rgba(var(--color-rgb-white), 0.6);
}

.dash[data-dash-theme="dark"] .search-dummy .dash-command.is--search-dummy {
  background-color: rgba(var(--color-rgb-white), 0.25);
}

.dash[data-dash-theme="dark"] .saved-btn {
  background-color: var(--color-neutral-300);
}

@media (hover: hover) and (pointer: fine) {
  .search-dummy:hover {
    background-color: rgba(var(--color-rgb-tint), 0.09);
  }
  
  .saved-btn:hover {
    background-color: rgba(var(--color-rgb-white), 0.75);
  }
  
  .dash[data-dash-theme="dark"] .saved-btn:hover {
    background-color: var(--color-neutral-400);
  }
}

/* ------------------------- Dash Grid -------------------------------------------------- */

.dash-main-grid__item {
  transition: width var(--animation-default);
}

.dash[data-dash-theme="dark"] .dash-res-card__visual,
.dash[data-dash-theme="dark"] .dash-res__visual{
  background-color: var(--color-neutral-100);
}

/* ------------------------- Dash Search -------------------------------------------------- */

.dash-search {
  transition: all var(--animation-ease);
  opacity: 0;
  visibility: hidden;
}

[data-dash-search="active"] .dash-search {
  opacity: 1;
  visibility: visible;
}

.dash[data-dash-theme="dark"] .dash-search__bg {
  opacity: 0.66;
  background-color: var(--color-ignore-neutral-950);
}

.dash[data-dash-theme="light"] .dash-search__list-group {
  box-shadow: 0 2em 4em rgba(0, 0, 0, 0.1); 
}

.dash[data-dash-theme="dark"] .dash-search__list-group {
  box-shadow: 0 2em 4em rgba(0, 0, 0, 0.5);
}

.dash-search__results {
  display: none;
}

.dash-search__results:has(li) {
  display: flex
}

.dash-search .dash-search__field {
  height: 4.5em;
}

.dash-search__modal {
  height: min(80vh, (25em + 4.5em));
}

.dash-search__scroll {
  max-height: min(80vh, 25em);
}

.dash-search__scroll {
  overflow-y: scroll;
  overflow-x: hidden;
}

[data-search-scroll-status="not-active"] .dash-search__scroll {
  padding: 0;
  margin: 0;
}

.dash-search__list-group {
  border-radius: 0.75em;
}

[data-search-scroll-status="active"] .dash-search__list-group {
  border-radius: 0.75em;
}

.dash-search-field__input {
  background-image: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
}

.dash-search-field__input::placeholder {
  color: var(--color-neutral-500);
}

@media (hover: none) and (pointer: coarse) {
  .dash-search__field-end {
    display: none;
  }
}

div.sr__click {
  cursor: default;
}

a.sr__click {
  cursor: pointer;
}

.sr__click {
  transition: background-color var(--animation-ease);
}

.sr__click:focus,
.sr__click.is--highlight {
  background-color: rgba(var(--color-rgb-tint), 0.055);
}

@media (hover: hover) and (pointer: fine) {
  .sr__click:hover {
    background-color: rgba(var(--color-rgb-tint), 0.055);
  }

  .sr__click.is--highlight:hover,
  .sr__click:focus:hover{
    background-color: rgba(var(--color-rgb-tint), 0.09);
  }
}

.sr__icon svg [fill] {
  fill: currentColor;
}

.sr__icon svg [stroke] {
  stroke: var(--color-neutral-500);
  stroke-width: 1.5;
}

.dash-search__results .sr__end {
  transition: all var(--animation-ease);
  opacity: 0;
  visibility: hidden;
}

.dash-search__results .sr__click.is--highlight .sr__end {
  opacity: 1;
  visibility: visible;
}

@media (hover: hover) and (pointer: fine) {
  .dash-search__results .sr__click:hover .sr__end {
    opacity: 1;
    visibility: visible;
  }
  
  .dash-search__results:has(.sr__click:hover) .sr__click.is--highlight:not(:hover) .sr__end {
    opacity: 0;
    visibility: hidden;
  }
}

.dash-search__results .dash-command {
  transition: background-color var(--animation-ease);
  cursor: pointer;
  pointer-events: all;
}

@media (hover: hover) and (pointer: fine) {
  .dash-search__results .dash-command:hover {
    background-color: rgba(var(--color-rgb-light), 0.75);
  }

  .dash[data-dash-theme="dark"] .dash-search__results .dash-command:hover {
    background-color: rgba(var(--color-rgb-white), 0.5);
  }
  
  .dash-search__results .sr__click:hover .dash-command:hover {
    background-color: rgba(var(--color-rgb-white), 0.85);
  }

  .dash[data-dash-theme="dark"] .dash-search__results .sr__click:hover .dash-command:hover {
    background-color: rgba(var(--color-rgb-white), 0.4);
  }
}

.dash-command.is--download {
  width: 2.25em;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex-grow: 0 !important;
  flex-shrink: 0;
}

.dash-search__results-list-icons .dash-command.is--download {
  width: 1.75em;
}

.dash-command.is--download svg {
  width: 1em;
}

.dash-command.is--download svg * {
  stroke: currentColor;
  stroke-width: 1.5;
}

.dash-command.is--preview svg {
  width: 1em;
  color: var(--color-coral);
}

.dash-command.is--preview svg * {
  stroke: currentColor;
  stroke-width: 1.5;
}

.dash-command.is--preview[href="#"],
.dash-command.is--preview[href=""] {
  display: none;
}

.dash-command.is--webflow {
  width: 2.25em;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex-grow: 0 !important;
  flex-shrink: 0;
}

.dash-search__results-list-icons .dash-command.is--webflow {
  width: 1.75em;
}

.dash-command.is--webflow svg {
  width: 1.0625em;
}

.dash-command.is--webflow svg * {
  fill: currentColor;
}

@media screen and (max-width: 991px) {
  
  .sr__click.is--resource {
    padding-right: 1em;
    grid-column-gap: 0.75em;
    grid-row-gap: 0.75em;
  }
  
  .dash-command.sr__link__open {
    display: none;
  }
}

.sr__resource__title {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  min-height: 1.1em;
  line-height: 1.1;
  overflow: hidden;
}

.sr__resource__cat:empty {
  display: none;
}

.dash[data-dash-theme="dark"] .sr__thumbnail__border {
  border-color: var(--color-light);
}

/*.dash[data-dash-theme="dark"] .sr__thumbnail__border {*/
/*  display: none;*/
/*}*/

.sr__thumbnail__img[src="https://cdn.prod.website-files.com/plugins/Basic/assets/placeholder.60f9b1840c.svg"],
.sr__thumbnail__img[src=""]{
  display: none;
}

.sr__thumbnail[data-video-src=""] .sr__thumbnail__video-wrap {
  display: none;
}

.dash-search__results-list-resources .sr__click[sr-video-on-hover="not-active"] .sr__thumbnail__video-wrap {
  transition: opacity var(--animation-ease);
  opacity: 0;
}

.dash-search__results-list-resources .sr__click[sr-video-on-hover="active"] .sr__thumbnail__video-wrap {
  opacity: 1;
}

/* width */
.dash-search__scroll::-webkit-scrollbar {
  display: block;
  width: 0.25em;
  height: 100%;
}

/* Track */
.dash-search__scroll::-webkit-scrollbar-track {
  background: transparent;
  margin-bottom: 0.75em;
  margin-top: 0.75em;
}

/* Handle */
.dash-search__scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--color-rgb-tint), 0.06);
  border-radius: 0.25em;
}

/* Handle on hover */
.dash-search__scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(var(--color-rgb-tint), 0.12);
  cursor: grabbing;
}

/* ------------------------- Dash Grid - Icons -------------------------------------------------- */

.dash-icon-card__svg svg {
  width: 100%;
  max-width: 100%;
}

.dash-icon-card[data-icon-category="Social Icons"] .dash-icon-card__svg svg [fill] {
  fill: currentColor;
}

.dash-icon-card[data-icon-category="Interface Essentials"] .dash-icon-card__svg svg > * {
  stroke: currentColor;
  stroke-width: 1.25;
}

.dash-icon-card[data-icon-category="Payment Badges"] .dash-icon-card__svg {
  width: 2.25em;
  height: 2.25em;
}


.dash-icon-card {
  transition: background-color var(--animation-ease);
}

@media (hover: hover) and (pointer: fine) {
  .dash-icon-card:hover {
    background-color: rgba(var(--color-rgb-white), 0.75);
  }
  
  .dash[data-dash-theme="dark"] .dash-icon-card:hover {
    background-color: var(--color-neutral-300);
  }
}

.dash-icon-card__svg {
  transition: color var(--animation-ease), margin-bottom var(--animation-ease);
  transition-duration: 0.325s;
}

.dash-icon-card:hover .dash-icon-card__svg {
  color: var(--color-dark);
  margin-bottom: 1em;
}

.dash-icon-card .dash-icon-card__info {
  transition: all var(--animation-ease) 0.075s;
  opacity: 1;
  visibility: visible;
  transform: translateY(0em) rotate(0.001deg);
}

.dash-icon-card:hover .dash-icon-card__info {
  transition: all var(--animation-ease) 0s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5em) rotate(0.001deg);
}

.dash-icon-card .dash-icon-card__btns {
  transition: all var(--animation-ease) 0s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5em) rotate(0.001deg);
}

.dash-icon-card:hover .dash-icon-card__btns {
  transition: all var(--animation-ease) 0.075s;
  opacity: 1;
  visibility: visible;
  transform: translateY(0em) rotate(0.001deg);
}

.dash-icon-card .dash-command {
  transition: background-color var(--animation-ease);
  pointer-events: all;
  background-color: rgba(var(--color-rgb-tint), 0.06);
  height: 2em;
  padding-left: 0.25em;
  padding-right: 0.25em;
  flex-grow: 1;
}

.dash-icon-card .dash-command.is--download {
  flex-grow: 0;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .dash-icon-card .dash-command:hover {
    background-color: rgba(var(--color-rgb-tint), 0.09);
  }
}

.dash[data-dash-theme="dark"] .dash-icon-card .dash-command {
  background-color: rgba(var(--color-rgb-white), 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .dash[data-dash-theme="dark"] .dash-icon-card .dash-command:hover {
    background-color: rgba(var(--color-rgb-white), 1);
  }
}

.dash-icon-card .dash-badge-new {
  font-size: 0.9em;
}

/* ------------------------- Dash Btn Icon -------------------------------------------------- */

.dash-btn-icon,
.dash-btn-only-icon{
  transition: background-color var(--animation-ease);
}

@media (hover: hover) and (pointer: fine) {
  .dash-btn-icon:hover,
  .dash-btn-only-icon:hover {
    background-color: rgba(var(--color-rgb-white), 0.75);
  }
  
  .dash-btn-icon.is--dark:hover {
    background-color: var(--color-neutral-700);
  }
  
  .dash[data-dash-theme="dark"] .dash-btn-icon:hover,
  .dash[data-dash-theme="dark"] .dash-btn-only-icon:hover{
    background-color: var(--color-neutral-300);
  }
  
  .dash[data-dash-theme="dark"] .dash-btn-icon.is--dark:hover {
    background-color: var(--color-neutral-900);
  }
}

.dash-btn-icon svg [stroke] {
  stroke-width: 1.25;
}

.dash-btn-icon[data-btn-visible="true"] {
  display: flex;
}

@media (hover: hover) and (pointer: fine) {
  .dash-res-settings__dropdown .dash-btn-icon:hover {
    background-color: rgba(var(--color-rgb-tint), 0.055);
  }
}

/* ------------------------- Settings Dropdown -------------------------------------------------- */

.dash-res-settings__dropdown-wrap {
  transition: transform var(--animation-default-half), opacity var(--animation-default-half), visibility var(--animation-default-half); 
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25em) rotate(0.001deg);
}

.dash-res-settings .dash-btn-only-icon:hover + .dash-res-settings__dropdown-wrap,
.dash-res-settings .dash-res-settings__dropdown-wrap:hover {
  transition: transform var(--animation-default-half), opacity var(--animation-default-half), visibility var(--animation-default-half); 
  opacity: 1;
  visibility: visible;
  transform: translateY(0em) rotate(0.001deg);
}

/* ------------------------- Dash Btn Info -------------------------------------------------- */

.dash-btn-info {
  transition: background-color var(--animation-ease);
}

.dash-btn-info .dash-btn-info__svg-box {
  transition: color var(--animation-ease);
}

@media (hover: hover) and (pointer: fine) {
  .dash-btn-info:hover .dash-btn-info__svg-box {
    color: var(--color-coral);
  }

  .dash-btn-info.is--dark:hover {
    background-color: var(--color-neutral-700);
  }
}

.dash[data-dash-theme="dark"] .dash-btn-info.is--dark {
  background-color: var(--color-neutral-800);
}

@media (hover: hover) and (pointer: fine) {
  .dash[data-dash-theme="dark"] .dash-btn-info.is--dark:hover {
    background-color: rgba(var(--color-rgb-black), 1);
  }
  
  .dash-btn-info.is--outline:hover {
    background-color: rgba(var(--color-rgb-tint), 0.04);
  }
}

.dash-btn-info svg [stroke] {
  stroke-width: 1.5;
}

.dash-btn-info[data-btn-visible] {
  display: none;
}

.dash-btn-info[data-btn-visible="true"] {
  display: flex;
  margin-top: 1em;
}

@media screen and (max-width: 991px) { 
  .dash-btn-info[data-btn-visible="true"].is--dark {
    display: none;
  }
}

.dash-btn-info[data-btn-visible="false"] + .dash-btn-info {
  margin-top: 1em;
}

a.dash-btn-info:is([href=""],[href="#"]) {
  display: none;
}

/* ------------------------- Dash Grid - Resource Card -------------------------------------------------- */

.dash-res-card {
  transition: transform var(--animation-ease), background-color var(--animation-ease);
  transform: translateY(0em) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  .dash-res-card:hover {
    background-color: rgba(var(--color-rgb-white), 0.75);
    transform: translateY(-0.25em) rotate(0.001deg);
  }
  
  .dash[data-dash-theme="dark"] .dash-res-card:hover {
    /*background-color: hsl(from var(--color-light) h s calc(l + 2));*/
    background-color: var(--color-neutral-300);
  }
}

.dash-res-card__visual-img[src="https://cdn.prod.website-files.com/plugins/Basic/assets/placeholder.60f9b1840c.svg"],
.dash-res-card__visual-img[src=""]{
  display: none;
}

.dash-res-card[data-video-src=""] .dash-res-card__video-wrap {
  display: none;
}

.dash-res-card[data-video-on-hover="not-active"] .dash-card-visual__video-wrap {
  transition: opacity var(--animation-ease);
  opacity: 0;
}

.dash-res-card[data-video-on-hover="active"] .dash-card-visual__video-wrap {
  opacity: 1;
}

.dash-res-card .dash-res-card__arrow-svg {
  transition: transform var(--animation-default-half);
  transform: translateX(-75%) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  .dash-res-card:hover .dash-res-card__arrow-svg {
    transform: translateX(0%) rotate(0.001deg);
  }
}

@media (hover: none) and (pointer: coarse) {
  .dash-res-card .dash-res-card__arrow-svg {
    transform: translateX(0%) rotate(0.001deg);
  }
}

.dash-res-card .dash-res-card__arrow-back {
  background-color: rgba(var(--color-rgb-tint), 0.05);
}

.dash[data-dash-theme="dark"] .dash-res-card .dash-res-card__arrow-back {
  background-color: rgba(var(--color-ignore-rgb-black), 0.5);
}

.dash-res-card .dash-res-card__arrow {
  transition: clip-path var(--animation-ease);
  clip-path: circle(0% at 50% 50%);
}

@media (hover: hover) and (pointer: fine) {
  .dash-res-card:hover .dash-res-card__arrow {
    transition: clip-path var(--animation-ease);
    clip-path: circle(50% at 50% 50%);
  }
}

@media (hover: none) and (pointer: coarse) {
  .dash-res-card .dash-res-card__arrow {
    clip-path: circle(50% at 50% 50%);
  }
}

.dash[data-dash-theme="dark"] .dash-res-card__arrow svg {
  opacity: 0.8;
}

.dash-res-card__title-h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  min-height: 1.2em;
}

.dash-res-card__visual-top-end-gradient {
  background-image:linear-gradient(-152.5deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.15) 32.5%, rgba(0, 0, 0, 0.075) 37.75%, rgba(0, 0, 0, 0.037) 41.425%, rgba(0, 0, 0, 0.019) 44%, rgba(0, 0, 0, 0) 50%);
  width: 20em;
  height: calc(15em * 0.6666);
  opacity: 0.15;
}

@media (hover: hover) and (pointer: fine) {
  
  .dash-res-card__visual-top-start {
    transition: opacity var(--animation-ease);
    opacity: 1;
  }
  
  .dash-res-card:hover .dash-res-card__visual-top-start {
    opacity: 0;
  }
  
  .dash-res-card__visual-top-end {
    transition: opacity var(--animation-ease);
    opacity: 0;
  }
  
  .dash-res-card:hover .dash-res-card__visual-top-end {
    opacity: 1;
  }
}

/* Icons Right */ 
.dash-res-card__preview,
.dash-res-card__save {
  transition: background-color var(--animation-ease), transform var(--animation-ease);
  transform: translateY(0em) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  .dash-res-card__preview:hover,
  .dash-res-card__save:hover {
    background-color: rgba(var(--color-rgb-white), 0.9);
    transform: translateY(-0.125em) rotate(0.001deg);
  }
  
  .dash[data-dash-theme="dark"] .dash-res-card__preview:hover,
  .dash[data-dash-theme="dark"] .dash-res-card__save:hover{
    background-color: var(--color-neutral-300);
  }
}

.dash-res-card__preview svg [stroke],
.dash-res-card__save svg [stroke]{
  stroke-width: 1;
}

.dash-res-card__preview[href=""],
.dash-res-card__preview[href="#"] {
  display: none;
}

.dash-res-card:has(.locked-badge) {
  cursor: not-allowed !important;
}

.dash-res-card .dash-res-card__visual-top-end .locked-box {
  pointer-events: auto;
}

/* ------------------------- Dash Res - Resource Visual -------------------------------------------------- */

.dash[data-dash-theme="dark"] .dash-res-visual__inner {
  background-color: var(--color-neutral-100);
}

:is(.wf-design-mode, .wf-editor) .dash-res-visual__video-wrap,
.dash-res-visual__video-wrap:has(video[src=""]) {
  display: none;
}

[data-dash-res-video="active"] [data-btn-action="show-video"],
[data-dash-res-video="not-active"] [data-btn-action="hide-video"] {
  display: none;
}

[data-dash-res-video="not-active"] [data-btn-action="show-video"],
[data-dash-res-video="active"] [data-btn-action="hide-video"] {
  display: block;
}

.dash-res-visual__thumb-pip {
  transition: transform var(--animation-ease), opacity var(--animation-ease), visibility var(--animation-ease);
  transform: translateY(0em) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  .dash-res-visual__thumb-pip:hover {
    transform: translateY(-0.25em) rotate(0.001deg);
  }
}

[data-bunny-player-init][data-player-status="playing"] + .dash-res-visual__thumb-pip,
[data-bunny-player-init][data-player-status="loading"] + .dash-res-visual__thumb-pip{
  opacity: 0;
  visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  [data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] + .dash-res-visual__thumb-pip,
  [data-bunny-player-init][data-player-status="loading"][data-player-hover="active"] + .dash-res-visual__thumb-pip{
    opacity: 1;
    visibility: visible;
  }
}

[data-dash-res-video="active"] .dash-res-visual__thumb-pip [data-pip-layer="preview"],
[data-dash-res-video="not-active"] .dash-res-visual__thumb-pip [data-pip-layer="player"] {
  opacity: 1;
  visibility: visible;
}

[data-dash-res-video="not-active"] .dash-res-visual__thumb-pip [data-pip-layer="preview"],
[data-dash-res-video="active"] .dash-res-visual__thumb-pip [data-pip-layer="player"]{
  opacity: 0;
  visibility: hidden;
}

[data-dash-res-video="active"] .bunny-player {
  display: flex;
}

[data-dash-res-video="not-active"] .bunny-player {
  display: none;
}


[data-dash-res-video="active"] .dash-res-visual:has(.dash-res-visual__player) .dash-res-visual__before {
  display: none;
}

[data-dash-res-video="active"] .dash-res-visual:has(.dash-res-visual__player) .dash-res-visual__player {
  position: relative;
}

/* ------------------------- YouTube Note -------------------------------------------------- */

[data-dash-res-video="not-active"] .dash-yt-note {
  display: none;
}

/* ------------------------- New badge -------------------------------------------------- */

.dash-badge-new {
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-700);
}

.dash-icon-card .dash-badge-new {
  background-color: var(--color-neutral-300);
}

.dash[data-dash-theme="dark"] .dash-icon-card .dash-badge-new {
  background-color: var(--color-neutral-100);
}

/* ------------------------- Save Button -------------------------------------------------- */

@keyframes save-pop {
  0%   { transform: scale(1) rotate(0.001deg) }
  25%  { transform: scale(1.1) rotate(0.001deg)}
  50%  { transform: scale(0.9) rotate(0.001deg)}
  75%  { transform: scale(1.05) rotate(0.001deg)}
  100% { transform: scale(1) rotate(0.001deg) }
}

[data-saved-toggle] path {
  stroke-width: 1;
  transform-origin: center center;
}

[data-saved-toggle][saved] path {
  transform: scale(1) rotate(0.001deg);
  fill: var(--color-neutral-600);
  stroke: var(--color-neutral-600);
  fill: var(--color-purple);
  stroke: var(--color-purple);
}

.dash[data-dash-theme="dark"] [data-saved-toggle][saved] path {
  fill: var(--color-purple);
  stroke: var(--color-purple);
}

[data-saved-toggle][saved][animate] path {
  animation: save-pop 0.45s var(--cubic-default);
}

[data-dash-type="saved"]:not(:has(.dash-main-grid__item)) .dash-main-grid {
  display: none;
}

[data-dash-type="saved"]:has(.dash-main-grid__item) .dash-main__no-saved {
  display: none;
}

[data-dash-type="saved"]:not(:has(.dash-main-grid__item)) .dash-hero__top {
  height: var(--dash-hero-height-top-shrinked);
}

[data-dash-type="saved"]:not(:has(.dash-main-grid__item)) .dash-hero-sec__bottom {
  display: none;
}


:is(.wf-design-mode, .wf-editor) [data-dash-type="saved"] .dash-main__no-saved {
  display: flex;
}

.dash[data-dash-theme="dark"] .dash-main__no-saved-svg > :nth-child(1) {
  fill: var(--color-neutral-200);
}

.dash[data-dash-theme="dark"] .dash-main__no-saved-svg > :nth-child(3) {
  fill: var(--color-neutral-100);
  opacity: 0.9;
}

.dash[data-dash-theme="dark"] .dash-main__no-saved-svg > :nth-child(7) {
  fill: var(--color-neutral-400);
}

.dash[data-dash-theme="dark"] .dash-main__no-saved-svg > g[opacity="0.4"] {
  opacity: 1;
}

.dash[data-dash-theme="dark"] .dash-main__no-saved-svg > g[opacity="0.4"] path {
  fill: rgba(var(--color-rgb-tint), 0.4);
}

.dash[data-dash-theme="dark"] .dash-main__no-saved-svg > circle {
  fill: var(--color-neutral-100);
  opacity: 0.8;
}


/* ------------------------- Dash Resource - Content -------------------------------------------------- */

.dash-res-content {
  transition: width var(--animation-default); 
}

/* ------------------------- Dash Resource - Info -------------------------------------------------- */

.dash-res-info {
  transition: width var(--animation-default); 
}

.dash-res-info__details-li:has(p:empty) {
  display: none;
}

.dash .dash-res-info__buttons .dash-btn-info:is([href="#"],[href=""]) {
  display: none;
}

/* Desktop Buttons (live/video) */
.dash .dash-res-info__icon-btns:has(.dash-btn-icon:is([href="#"],[href=""])) {
  display: none;
}

.dash .dash-res-info__icon-btns .dash-btn-icon:is([href="#"],[href=""]) {
  display: none;
}

/* Mobile Buttons (live/video) */
.dash .dash-res-main__icon-btns:has(.dash-btn-icon:is([href="#"],[href=""])) {
  display: none;
}

.dash .dash-res-main__icon-btns .dash-btn-icon:is([href="#"],[href=""]) {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .dash-res-info__details-slack-a {
    transition: background-color var(--animation-ease), color var(--animation-ease); 
  }
  
  .dash-res-info__details-slack-a:hover {
    background-color: rgba(var(--color-rgb-tint), 0.04);
  }
  
  .dash[data-dash-theme="dark"] .dash-res-info__details-slack-a:hover {
    background-color: var(--color-neutral-300);
  }
}

@media screen and (max-width: 991px) {
  .dash-res-info .dash-main-top__search,
  .dash-res-info .dash-res-info__icon-btns{
    display: none;
  }
}

/* ------------------------- Dash Loading -------------------------------------------------- */

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

.loading-icon {
  background-color: rgba(var(--color-rgb-tint), 0.15);
}

.loading-icon__inner {
  /*animation: loadingRotate 1s var(--cubic-default) infinite;*/
  animation: loadingRotate 1s linear infinite;
}

.dash-loading.is--visible,
.dash-loading-once.is--visible,
.dash-loading.is--visible-theme-switch,
.dash-loading-once.is--visible-theme-switch {
  opacity: 1;
}

.dash-loading.is--visible {
  transition: var(--animation-ease-double) 0.75s;
}

.dash-loading.is--visible-theme-switch {
  background-color: var(--color-neutral-300);
  transition: 0s linear 0s;
}

:is(.wf-design-mode, .wf-editor) .dash-loading,
:is(.wf-design-mode, .wf-editor) .dash-loading-once{
  opacity: 0;
}

[data-dash-theme="dark"] .dash-loading.is--visible-theme-switch {
  background-color: var(--color-neutral-100);
}

[data-dash-theme="dark"] .dash-loading-once {
  background-color: var(--color-neutral-100);
}

/* ------------------------- Code Editor -------------------------------------------------- */

[data-dash-theme="dark"] .dash-code {
  border-color: rgba(var(--color-rgb-tint), 0.09);
}

[data-dash-theme="dark"] .dash-code__content {
  background-color: var(--color-neutral-100);
}

.dash code {
  padding: 0.1em 0.375em 0.25em 0.375em !important;
}

.dash pre {
  font-family: inherit !important;
  background-color: transparent !important;
  color: var(--color-neutral-525) !important;
}

.dash[data-dash-theme="dark"] pre{
  color: var(--color-neutral-600) !important;
}

.dash-code .dash-command {
  transition: background-color var(--animation-ease), color var(--animation-ease);
  cursor: pointer;
  pointer-events: all;
}

@media (hover: hover) and (pointer: fine) {
  .dash-code .dash-command:hover {
    background-color: rgba(var(--color-rgb-tint), 0.06);
    color: rgba(var(--color-rgb-tint), 0.6);
  }

  [data-dash-theme="dark"] .dash-code .dash-command:hover {
    background-color: rgba(var(--color-rgb-tint), 0.06);
  }
}

.dash .dash-res-more__rich pre.w-code-block {
  background-color: var(--color-light) !important;
  border-radius: 0.5em;
  border: 1px solid rgba(var(--color-rgb-tint), 0.12);
}

.dash[data-dash-theme="dark"] .dash-res-more__rich pre.w-code-block {
  border: 1px solid rgba(var(--color-rgb-tint), 0.09);
}

.dash .dash-res-more__rich pre.w-code-block code {
  border-radius: calc(0.25em * 1.15);
  background-color: var(--color-neutral-300) !important;
  border: 0px solid transparent !important;
  padding: calc(0.6em * 1.15) calc(0.75em * 1.15) !important;
  font-family: Haffer Mono, monospace;
  font-weight: 500;
  line-height: 1.5;
  font-size: 0.84375em;
}

.dash[data-dash-theme="dark"] .dash-res-more__rich pre.w-code-block code {
  background-color: var(--color-neutral-100) !important;
}

:root {
  --color-code-gray: var(--color-neutral-500);
  --color-code-purple: #872f94;
  --color-code-orange: #d07426;
  --color-code-blue:   #17669c;
  --color-code-green:  #2b8c4d;
  --color-code-red:    #be3e3e;
}

[data-dash-theme="dark"] {
  --color-code-purple: #7e4fc1;
  --color-code-orange: #d07a4c;
  --color-code-blue:   #5d93c2;
  --color-code-green:  #a6cd4b;
  --color-code-red:    #d15252;
}


/* HTML */

/* Comments */
code.language-htmlbars :is([style="color:#d4d0ab"], [style="color: rgb(212, 208, 171);"]) {
  color: var(--color-code-gray) !important;
}

/* Tags: [<div>, <span>] Purple (or Blue) - indicates structure */
code.language-htmlbars :is([style="color:#ffa07a"], [style="color: rgb(255, 160, 122);"]) {
  color: var(--color-code-purple) !important;
}

/* Attributes: [class, src, data-attr] Orange (or Light Blue) */
code.language-htmlbars .hljs-attr:is([style="color:#ffa07a"], [style="color: rgb(255, 160, 122);"]) {
  color: var(--color-code-orange) !important;
}

/* Attributes Values: [class name & id's] Blue (or Green) - string values stand out */
code.language-htmlbars :is([style="color:#abe338"], [style="color: rgb(171, 227, 56);"]) {
  color: var(--color-code-blue) !important;
}

/* CSS */

/* Comments */
code.language-css :is([style="color:#d4d0ab"], [style="color: rgb(212, 208, 171);"]) {
  color: var(--color-code-gray) !important;
}

/* Selectors: [.dash, .h2] - Green */
code.language-css :is([style="color:#ffa07a"], [style="color: rgb(255, 160, 122);"]) {
  color: var(--color-code-orange) !important;
}

/* Properties: [width, z-index, min-height] Blue - consistent with HTML attributes */
code.language-css :is([style="color:#ffd700"], [style="color: rgb(255, 215, 0);"]) {
  color: var(--color-code-blue) !important;
}

/* Numbers or variables: [100%, 2, var, 0] Orange (stand out) */
code.language-css :is([style="color:#f5ab35"], [style="color: rgb(245, 171, 53);"]) {
  color: var(--color-code-purple) !important;
}

/* @Font Face */
code.language-css :is([style="color:#dcc6e0"], [style="color: rgb(220, 198, 224);"]) {
  color: var(--color-code-red) !important;
}

/* Values of URL */
code.language-css :is([style="color:#abe338"], [style="color: rgb(171, 227, 56);"]) {
  color: var(--color-code-green) !important;
}

/* Javascript */

/* Comments */
code.language-javascript :is([style="color:#d4d0ab"], [style="color: rgb(212, 208, 171);"]) {
  color: var(--color-code-gray) !important;
}

/* Keywords: [] indicates language constructs */
code.language-javascript :is([style="color:#f5ab35"], [style="color: rgb(245, 171, 53);"]) {
  color: var(--color-code-purple) !important;
}

/* Variables: [] general text visibility */
code.language-javascript :is([style="color:#dcc6e0"], [style="color: rgb(220, 198, 224);"]) {
  color: var(--color-code-blue) !important;
}

/* Variables: [] general text visibility */
code.language-javascript :is([style="color:#abe338"], [style="color: rgb(171, 227, 56);"]) {
  color: var(--color-code-orange) !important;
}

/* Attributes: [] */
code.language-javascript .hljs-attr {
  color: var(--color-code-purple) !important;
}

/* Function: [] */
code.language-javascript .hljs-function {
  color: var(--color-code-blue) !important;
}

/* Function: [] */
code.language-javascript .hljs-function:is([style="color:#f5ab35"], [style="color: rgb(245, 171, 53);"]) {
  color: var(--color-code-green) !important;
}

/* Function: [] */
code.language-javascript .hljs-function:is([style="color:#00e0e0"], [style="color: rgb(0, 224, 224);"]) {
  color: inherit !important;
}

/* Function: [] */
code.language-javascript .hljs-subst:is([style="color:#abe338"], [style="color: rgb(171, 227, 56);"]) {
  color: var(--color-code-red) !important;
}

/* <script> [] */
code.language-javascript :is([style="color:#ffa07a"], [style="color: rgb(255, 160, 122);"]) {
  color: var(--color-code-blue) !important;
}


/* ------------------------- Dash Resource Toggle -------------------------------------------------- */

[data-dash-theme="dark"] .dash-res-doc__toggle {
  background-color: var(--color-light);
}

.dash-res-doc__toggle-indicatior {
  transition: transform var(--animation-default-half);
  transform: translateX(0%) rotate(0.001deg);
  pointer-events: none;
}

[data-dash-theme="dark"] .dash-res-doc__toggle-indicatior {
  background-color: var(--color-neutral-100);
}

[data-dash-documentation="code"] .dash-res-doc__toggle-indicatior {
  transform: translateX(100%) rotate(0.001deg);
}

.dash-res-doc__toggle-btn {
  transition: opacity var(--animation-default-half);
}

[data-dash-documentation="code"] .dash-res-doc__toggle-btn.is--webflow,
[data-dash-documentation="webflow"] .dash-res-doc__toggle-btn.is--code {
  cursor: pointer;
  opacity: 0.4;
}

[data-dash-documentation="code"] .dash-res-doc__toggle-btn.is--code,
[data-dash-documentation="webflow"] .dash-res-doc__toggle-btn.is--webflow{
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  [data-dash-documentation] .dash-res-doc__toggle-btn:hover {
    opacity: 0.6;
  }
}

/* Show Documentation for Webflow or Code */
[data-dash-documentation="code"] [data-dash-documentation-show="code"],
[data-dash-documentation="webflow"] [data-dash-documentation-show="webflow"]{
  display: flex;
}

/* Hide Documentation for Webflow or Code */
[data-dash-documentation="code"] [data-dash-documentation-show="webflow"],
[data-dash-documentation="webflow"] [data-dash-documentation-show="code"]{
  display: none;
}

/* ------------------------- Dash Resource Code Block -------------------------------------------------- */

/* Hide all code blocks with no content */
.dash-res-code:has(.dash-code__content-rich:empty),
.dash-res-code:has(.dash-code__content-rich:empty) .dash-code{
  display: none;
}

[data-dash-documentation="code"] .dash-res-code:has(.dash-code__content-rich:empty):has(.dash-not-required),
[data-dash-documentation="code"] .dash-res-code:has(.dash-code__content-rich:empty) .dash-not-required {
  display: flex;
}

[data-dash-theme="dark"] .dash-not-required {
  background-color: rgba(var(--color-rgb-tint), 0.06);
}

/* Webflow > Check if JS = true */

/* Remove Step 2. Text CSS */
.dash-res-content [data-dash-documentation-show="webflow-js-false"] {
  display: none;
}
/* Remove Step 3. Text CSS when JS = False */
.dash-res-content:has([data-dash-documentation-check="webflow-has-js"] .dash-code__content-rich:empty) [data-dash-documentation-show="webflow-js-true"] {
  display: none;
}
/* Add Step 2. Text CSS when JS = False */
.dash-res-content:has([data-dash-documentation-check="webflow-has-js"] .dash-code__content-rich:empty) [data-dash-documentation-show="webflow-js-false"] {
  display: block;
}

/* Code > Check if CSS = true */

/* Remove Step 2. Text CSS */
.dash-res-content [data-dash-documentation-show="code-css-false"] {
  display: none;
}
/* Remove Step 3. Text CSS when JS = False */
.dash-res-content:has([data-dash-documentation-check="code-has-css"] .dash-code__content-rich:empty) [data-dash-documentation-show="code-css-true"] {
  display: none;
}
/* Add Step 2. Text CSS when JS = False */
.dash-res-content:has([data-dash-documentation-check="code-has-css"] .dash-code__content-rich:empty) [data-dash-documentation-show="code-css-false"] {
  display: block;
}

:is(.wf-design-mode, .wf-editor) .dash-res-code {
  display: block !important;
}

/* ------------------------- Dash Copy Webflow Button -------------------------------------------------- */

.dash-copy-webflow {
  transition: background-color var(--animation-ease), border-color var(--animation-ease);
}

@media (hover: hover) and (pointer: fine) {
  .dash-copy-webflow:hover {
    background-color: rgba(var(--color-rgb-white), 0.6);
    border-color: rgba(var(--color-rgb-tint), 0.2);
  }
}

.dash-res-code:has(.dash-copy-webflow[data-json-copy=""]) .dash-copy-webflow {
  display: none;
}

.dash-res-code:has(.dash-copy-webflow[data-json-copy=""]) .dash-not-required {
  display: flex;
}

[data-dash-theme="dark"] .dash-copy-webflow {
  border-color: rgba(var(--color-rgb-tint), 0.09);
}

@media (hover: hover) and (pointer: fine) {
  [data-dash-theme="dark"] .dash-copy-webflow:hover {
    background-color: rgba(var(--color-rgb-tint), 0.1);
    border-color: rgba(var(--color-rgb-tint), 0.1);
  }
}

[data-dash-theme="dark"] .dash-res-code__info {
  background-color: var(--color-neutral-100);
}

/* ------------------------- Dash Tooltip -------------------------------------------------- */

.dash-tooltip {
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: all var(--animation-ease);
}

[data-tooltip-hover]:hover .dash-tooltip,
.dash-info-symbol:hover .dash-tooltip,
.dash-tooltip:hover {
  opacity: 1;
  visibility: visible;
}

.dash-tooltip__box {
  transition: all var(--animation-ease);
  transform: scale(0.9675) translateY(0.5em) rotate(0.001deg);
}

[data-tooltip-y="bottom"] .dash-tooltip__box {
  transform: scale(0.9675) translateY(-0.5em) rotate(0.001deg);
}

[data-tooltip-hover]:hover .dash-tooltip__box,
.dash-info-symbol:hover .dash-tooltip__box,
.dash-tooltip:hover .dash-tooltip__box {
  transform: scale(1) translateY(0em) rotate(0.001deg);
}

.dash[data-dash-theme="light"] .dash-tooltip .dash-tooltip__box {
  box-shadow: 0 0.25em 2em rgba(0, 0, 0, 0.2); 
}

.dash[data-dash-theme="dark"] .dash-tooltip .dash-tooltip__box {
  box-shadow: 0 0.25em 2em rgba(0, 0, 0, 1);
}

.dash .dash-btn-info.is--tooltip {
  background-color: rgba(var(--color-ignore-rgb-light), 0.1);
  color: var(--color-ignore-light);
  width: 100%;
}

.dash .dash-btn-info.is--tooltip:hover {
  background-color: rgba(var(--color-ignore-rgb-light), 0.12);
}

.dash [data-tooltip-x="right"] {
  right: -0.75em;
}

.dash [data-tooltip-x="left"] {
  left: -0.75em;
}

.dash [data-tooltip-y="bottom"] {
  bottom: unset;
  top: 100%;
}

.dash .dash-info-credits .dash-info-symbol,
.dash-res-gsap-plugin__box .dash-info-symbol {
  position: unset;
}

.dash .dash-info-credits .dash-tooltip,
.dash-res-gsap-plugin__box .dash-tooltip {
  left: 50%;
  transform: translateX(-50%);
}

.dash .dash-info-credits:has(.dash-info-credits__name:empty) {
  display: none;
}



/* ------------------------- Dash Resource More Info Block -------------------------------------------------- */

.dash-res-doc-group code {
  font-size: unset;
}

/* Hide more info block with no content */
.dash-res-more:has(.dash-res-more__rich:empty) {
  display: none;
}

.dash-res-more code {
  font-family: Haffer Mono, monospace;
  font-weight: 500;
  font-size: 0.875em;
  line-height: 1.5;
  border-radius: 0.25em;
  background-color: rgba(var(--color-rgb-tint), 0.06);
  color: rgba(var(--color-rgb-tint), 0.66);
  margin: 0 0.1em;
  padding: 0.125em 0.3em 0.25em 0.3em !important;
}

[data-dash-theme="dark"] .dash-res-more code {
  background-color: rgba(var(--color-rgb-dark), 0.09);
  color: rgba(var(--color-rgb-dark), 0.7);
}

.dash-res-more h1,
.dash-res-more h2,
.dash-res-more h3 {
  margin-bottom: 1.5em;
}

.dash-res-more h4 {
  margin-bottom: 0.5em;
}

.dash-res-more h1 strong,
.dash-res-more h2 strong,
.dash-res-more h3 strong,
.dash-res-more h4 strong, 
.dash-res-more h5 strong{
  font-size: inherit;
  margin-top: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin-bottom: inherit;
}

.dash-res-more p + h2,
.dash-res-more p + h3 {
  margin-top: 2em;
}

.dash-res-more h3 + p {
  margin-top: -0.75em;
}

.dash-res-more p + h4 {
  margin-top: 1.75em;
}

.dash-res-more p strong,
.dash-res-more li strong{
  font-weight: 600;
  font-variation-settings: "wght" 550;
  color: rgba(var(--color-rgb-tint), 1);
}

.dash-res-more p,
.dash-res-more li {
  font-size: 0.9375em;
  line-height: 1.5;
  color: rgba(var(--color-rgb-tint), 0.9);
  margin-bottom: 1em;
}

.dash-res-more pre {
  margin-bottom: 2em;
}

.dash-res-more h4 + pre {
  margin-top: 1em;
}

.dash-res-more pre + p,
.dash-res-more pre + ul{
  margin-top: -1em;
}

.dash-res-more pre code {
  margin-top: 0;
  margin-bottom: 0;
}

.dash-res-more pre + h3 {
  margin-top: 3em;
}

.dash-res-more ul {
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.dash-res-more ul + h3 {
  margin-top: 3em;
}

.dash-res-more ul + h3 {
  margin-top: 1.5em;
}

.dash-res-more li {
  position: relative;
  list-style: none;
}

.dash-res-more li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.6em;
  left: -1em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(var(--color-rgb-tint), 0.5);
}

.dash-res-more a {
  color: rgba(var(--color-rgb-dark), 0.7);
}

@media (hover: hover) and (pointer: fine) {
  .dash-res-more a:hover {
    color: var(--color-dark);
  }
}

.dash-res-more figure {
  margin: 0 0.1em;
  max-width: 40em !important;
  padding: 0.5em;
  background-color: var(--color-light) !important;
  border-radius: 0.5em;
  border: 1px solid rgba(var(--color-rgb-tint), 0.12);
  margin-bottom: 2em;
}

.dash-res-more figure + p,
.dash-res-more figure + ul{
  margin-top: -1em;
}

.dash-res-more figure > div {
  font-size: unset !important;
  display: block !important;
  padding-bottom: 0 !important;
}

.dash-res-more figure img {
  display: block;
  border-radius: 0.25em;
  overflow: hidden;
  border-collapse: separate !important; 
}

[data-dash-theme="dark"] .dash-res-more figure {
   background-color: rgba(var(--color-rgb-tint), 0.12); 
}

.dash-res-more figure.w-richtext-align-fullwidth {
  max-width: 100% !important;
}




/* ------------------------- Dash - Video only -------------------------------------------------- */

.dash-main:has(.dash-res-indicator__code-disabled) .dash-res-doc-group,
.dash-main:has(.dash-res-indicator__code-disabled) .dash-btn-info[data-dash-res-video-toggle],
.dash-main:has(.dash-res-indicator__code-disabled) .dash-res-visual__thumb-pip,
.dash-main:has(.dash-res-indicator__code-disabled) .dash-res-main__icon-btns [data-dash-res-video-toggle],
.dash-main:has(.dash-res-indicator__code-disabled) .dash-res-content .dash-res-content__inner .dash-res-code[data-dash-documentation-show] { 
  display: none;
}

.dash-main:has(.dash-res-indicator__code-disabled) .bunny-player {
  display: flex;
}

:is(.wf-design-mode, .wf-editor) .dash-main:has(.dash-res-indicator__code-disabled) .dash-res-doc-group,
:is(.wf-design-mode, .wf-editor) .dash-main:has(.dash-res-indicator__code-disabled) .dash-btn-info[data-dash-res-video-toggle],
:is(.wf-design-mode, .wf-editor) .dash-main:has(.dash-res-indicator__code-disabled) .dash-res-visual__thumb-pip,
:is(.wf-design-mode, .wf-editor) .dash-main:has(.dash-res-indicator__code-disabled) .dash-res-main__icon-btns [data-dash-res-video-toggle] {
  display: flex;
}

.dash-res-doc-group:has(.dash-res-more__rich:empty) + .dash-res-related{
  margin-top: 3em;
}

/* ------------------------- Grow Arrow -------------------------------------------------- */

.grow-arrow {
  transition: clip-path var(--animation-ease);
  clip-path: circle(0% at 50% 50%);
}

[data-hover="none"] .grow-arrow {
  clip-path: circle(50% at 50% 50%);
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover .grow-arrow,
  .dash-type-btn.is--active .grow-arrow, 
  .dash-type-btn.w--current .grow-arrow{
    transition: clip-path var(--animation-ease);
    clip-path: circle(50% at 50% 50%);
  }
}

@media (hover: none) and (pointer: coarse) {
  .grow-arrow {
    clip-path: circle(50% at 50% 50%);
  }
  
  .dash-type-btn:not(.is--active) .grow-arrow, 
  .dash-type-btn:not(.w--current) .grow-arrow{
    clip-path: circle(0% at 50% 50%);
  }
}

.grow-arrow__svg {
  transition: transform var(--animation-default-half);
  transform: translateX(-75%) rotate(0.001deg);
}

[data-hover="none"] .grow-arrow__svg {
  transform: translateX(0%) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover .grow-arrow__svg,
  .dash-type-btn.is--active .grow-arrow__svg,
  .dash-type-btn.w--current .grow-arrow__svg {
    transform: translateX(0%) rotate(0.001deg);
  }
}

@media (hover: none) and (pointer: coarse) {
  .grow-arrow .grow-arrow__svg {
    transform: translateX(0%) rotate(0.001deg);
  }
}

.dash[data-dash-theme="dark"] .grow-arrow__back {
  background-color: rgba(var(--color-rgb-white), 0.3);
}

.dash[data-dash-theme="dark"] .dash-res-card__arrow-svg {
  opacity: 0.8;
}

.dash-type-btn .grow-arrow .grow-arrow__back,
.dash[data-dash-theme="dark"] .dash-type-btn  .grow-arrow .grow-arrow__back {
  background-color: var(--color-neutral-200);
}

/* ------------------------- Bread Crumb -------------------------------------------------- */

.dash-crumb__single {
  transition: background-color var(--animation-ease);
  background-color: rgba(var(--color-rgb-tint), 0.05);
}

/* Hide crumb when no name is added */
.dash-crumb__single:has(.dash-crumb__single-span:empty),
.dash-crumb__single:has(.dash-crumb__single-span:empty) + .dash-crumb__arrow{
  display: none;
}

.dash-crumb__single.is--current {
  background-color: var(--color-neutral-200);
}

.dash[data-dash-theme="dark"] .dash-crumb__single {
  background-color: var(--color-neutral-200);
}

.dash[data-dash-theme="dark"] .dash-crumb__single.is--current {
  background-color: var(--color-neutral-300);
}

@media (hover: hover) and (pointer: fine) {
  .dash-crumb__single:hover {
    background-color: rgba(var(--color-rgb-tint), 0.09);
  }
  
  .dash[data-dash-theme="dark"] .dash-crumb__single:hover {
    background-color: var(--color-neutral-300);
  }
  
  .dash-crumb__single.is--current:hover {
    background-color: rgba(var(--color-rgb-white), 0.75);
  }
  
  .dash[data-dash-theme="dark"] .dash-crumb__single.is--current:hover {
    background-color: var(--color-neutral-400);
  }
}

/* ------------------------- Dash Hero Primary -------------------------------------------------- */

@media screen and (max-width: 767px) {
  .dash-hero__top {
    align-items: flex-start;
    padding-top: 1em;
  }
}

.dash-hero-prim__welcome-p > span:empty {
  display: none;
}

.dash-search__field.is--page {
  transition: background-color var(--animation-ease), border-color var(--animation-ease);
  background-color: rgba(var(--color-rgb-tint), 0.055);
  border: 1px solid rgba(var(--color-rgb-tint), 0);
}

.dash[data-dash-theme="dark"] .dash-search__field.is--page {
  background-color: var(--color-neutral-200);
}

.dash-search__field.is--page:has(input:focus) {
  background-color: rgba(var(--color-rgb-tint), 0.075);
  border: 1px solid rgba(var(--color-rgb-tint), 0.1);
}

.dash[data-dash-theme="dark"] .dash-search__field.is--page:has(input:focus) {
  background-color: var(--color-neutral-300);
}

@media (hover: hover) and (pointer: fine) {
  .dash-search__field.is--page:has(input:hover) {
    background-color: rgba(var(--color-rgb-tint), 0.075);
  }
  
  .dash[data-dash-theme="dark"] .dash-search__field.is--page:has(input:hover) {
    background-color: var(--color-neutral-300);
  }
}



/* ------------------------- Dash Scribble -------------------------------------------------- */


.dash[data-dash-theme="dark"] .dash-hero-prim__search-scribble .dash-scribble,
.dash[data-dash-theme="dark"] .dash-hero-prim__learn-scribble .dash-scribble{
  color: var(--color-electric);
}

/* ------------------------- Dash Scribble -------------------------------------------------- */

.dash-filter-link {
  transition: background-color var(--animation-ease);
}

.dash-filter-link:has(.dash-filter-link__click.w--current) {
  background-color: var(--color-dark);
  color: var(--color-light);
  border-radius: 50em;
}

.dash-filter-link:has(.dash-filter-link__click.w--current) .dash-filter-link__close-svg {
  display: block;
}

.dash-filter-link:has(.dash-filter-link__click.w--current) .dash-filter-link__overview-click {
  display: block;
}

.dash[data-dash-theme="dark"] .dash-filter-link {
  background-color: var(--color-neutral-300);
}

.dash[data-dash-theme="dark"] .dash-filter-link:has(.dash-filter-link__click.w--current) {
  background-color: var(--color-neutral-600);
  color: var(--color-light);
}

@media (hover: hover) and (pointer: fine) {
  .dash-filter-link:has(.dash-filter-link__click:hover) {
    background-color: rgba(var(--color-rgb-white), 0.75);
  }
  
  .dash-filter-link:has(.dash-filter-link__click.w--current + .dash-filter-link__overview-click:hover) {
    background-color: var(--color-neutral-950);
  }
  
  .dash[data-dash-theme="dark"] .dash-filter-link:has(.dash-filter-link__click:hover) {
    background-color: var(--color-neutral-400);
  }
  
  .dash[data-dash-theme="dark"] .dash-filter-link:has(.dash-filter-link__click.w--current + .dash-filter-link__overview-click:hover) {
    background-color: var(--color-neutral-900);
  }
}


/* ------------------------- Dash Styleguide -------------------------------------------------- */

.dash-styleguide__side .dash-side {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  height: 100%;
}


/* ------------------------- Dash Unlock Button -------------------------------------------------- */

.dash-unlock-btn {
  transition: height var(--animation-default);
}

.dash[data-dash-theme="dark"] .dash-unlock-btn,
.dash[data-dash-theme="dark"] .dash-unlock-btn .locked-badge__bg-2 {
  background-color: var(--color-ignore-black);
}

.dash[data-dash-theme] .dash-unlock-btn .grow-arrow__back {
  background-color: rgba(var(--color-ignore-rgb-white), 0.12);
}

.dash-unlock-btn .grow-arrow__svg {
  color: var(--color-ignore-neutral-200);
}

.dash-unlock-btn .dash-unlock-btn__svg {
  transition: margin var(--animation-default);
}

@media screen and (min-width: 992px) {
  [data-dash-collapsed="true"] .dash-unlock-btn .dash-unlock-btn__grow-arrow {
    opacity: 0;
  }
  
  [data-dash-collapsed="true"] .dash-unlock-btn .dash-unlock-btn__svg {
    margin-right: -0.625em;
  }
}

.dash-unlock-btn .dash-unlock-btn__span {
  transition: all var(--animation-default);
}

@media screen and (min-width: 992px) {
  [data-dash-collapsed="true"] .dash-unlock-btn .dash-unlock-btn__span {
    width: 0em;
    opacity: 0;
  }
}


/* ------------------------- Dash Page Card -------------------------------------------------- */

.dash-card-arrow__bg {
  transition: transform var(--animation-default);
  transform: scale(1) rotate(0.001deg);
}

.dash-page-card:hover .dash-card-arrow__bg {
  transform: scale(1.2) rotate(0.001deg);
}


.dash-card-arrow__icon-svg {
  transition: transform var(--animation-default);
  transform: translateX(0%) rotate(0.001deg);
}

.dash-page-card:not(.is--locked):hover .dash-card-arrow__icon-svg {
  transform: translateX(200%) rotate(0.001deg);
}

.dash-page-card__tutorial-cards-img {
  transition: transform var(--animation-default);
}

.dash-page-card:hover .dash-page-card__tutorial-cards-img.is--first {
  transform: rotate(-10deg) translateY(3%) translateX(-5%);
}

.dash-page-card:hover .dash-page-card__tutorial-cards-img.is--last {
  transform: rotate(10deg) translateY(3%) translateX(5%);
}


/* ------------------------- Modal -------------------------------------------------- */

[data-modal-group-status] {
  transition: all var(--animation-default-half);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9) rotate(0.001deg);
}

[data-modal-group-status="active"],
.dash-styleguide__modals [data-modal-group-status]{
  opacity: 1;
  visibility: visible;
  transform: scale(1) rotate(0.001deg);
}

[data-modal-name][data-modal-status="active"],
.dash-styleguide__modals [data-modal-name][data-modal-status] {
  display: flex;
}

.dash-styleguide__modals .dash-modal__bg {
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
}

.dash[data-dash-theme="dark"] .dash-modal__bg {
  opacity: 0.66;
  background-color: var(--color-ignore-neutral-950);
}

.dash-modal__btn-close-svg {
  transition: transform var(--animation-default-half);
  transform: rotate(0.001deg);
}

.dash-modal__btn-close:hover .dash-modal__btn-close-svg {
  transform: rotate(90deg);
}

.dash-styleguide__modals .dash-modal {
  padding-top: 5em;
  padding-bottom: 5em;
  position: relative;
  inset: auto;
}

.dash-modal__btn-close {
  transition: transform var(--animation-ease);
}

.dash-modal__btn-close:hover {
  background-color: var(--color-ignore-neutral-400);
}

/* ------------------------- Bunny Player -------------------------------------------------- */

/* Animation */
[data-bunny-player-init] :is(.bunny-player__placeholder, .bunny-player__dark, .bunny-player__playpause, .bunny-player__loading) {
  transition: opacity var(--animation-ease-double), visibility var(--animation-ease-double);
}

/* Placeholder */
[data-bunny-player-init][data-player-status="playing"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-status="paused"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-activated="true"][data-player-status="ready"] .bunny-player__placeholder {
  opacity: 0;
  visibility: hidden;
}

/* Dark Overlay */
.bunny-player__dark {
  opacity: 0.3;
}

[data-bunny-player-init][data-player-status="paused"] .bunny-player__dark,
[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__dark{
  opacity: 0.3;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__dark {
  opacity: 0;
}

[data-bunny-player-init][data-player-hover="active"] .bunny-player__dark {
  opacity: 0.4;
}

/* Interface Fade */

.bunny-player__interface-fade {
  opacity: 0.6;
  height: 30%;
  background-image: linear-gradient(
    to bottom,
    rgba(var(--color-ignore-rgb-black), 0) 0%,
    rgba(var(--color-ignore-rgb-black), 0.013) 8.1%,
    rgba(var(--color-ignore-rgb-black), 0.049) 15.5%,
    rgba(var(--color-ignore-rgb-black), 0.104) 22.5%,
    rgba(var(--color-ignore-rgb-black), 0.175) 29%,
    rgba(var(--color-ignore-rgb-black), 0.259) 35.3%,
    rgba(var(--color-ignore-rgb-black), 0.352) 41.2%,
    rgba(var(--color-ignore-rgb-black), 0.45) 47.1%,
    rgba(var(--color-ignore-rgb-black), 0.55) 52.9%,
    rgba(var(--color-ignore-rgb-black), 0.648) 58.8%,
    rgba(var(--color-ignore-rgb-black), 0.741) 64.7%,
    rgba(var(--color-ignore-rgb-black), 0.825) 71%,
    rgba(var(--color-ignore-rgb-black), 0.896) 77.5%,
    rgba(var(--color-ignore-rgb-black), 0.951) 84.5%,
    rgba(var(--color-ignore-rgb-black), 0.987) 91.9%,
    rgba(var(--color-ignore-rgb-black), 1) 100%
  );
}

/* Play/Pause */
[data-bunny-player-init][data-player-activated="false"] .bunny-player__playpause {
  cursor: pointer;
}

[data-bunny-player-init][data-player-activated="true"] .bunny-player__playpause {
  opacity: 0;
}


[data-bunny-player-init][data-player-status="playing"] .bunny-player__play-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__play-svg {
  display: none;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__pause-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__pause-svg{
  display: block;
}

/* Loading */
[data-bunny-player-init][data-player-status="loading"] .bunny-player__loading {
  opacity: 1;
  visibility: visible;
}

/* Interface */
.bunny-player__interface {
  transition: all var(--animation-default-half);
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__interface{
  opacity: 0;
  transform: translateY(1em) rotate(0.001deg);
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"][data-player-hover="active"] .bunny-player__interface {
  opacity: 1;
  transform: translateY(0em) rotate(0.001deg);
}

/* Timeline */
[data-bunny-player-init][data-player-status="idle"][data-player-activated="false"] .bunny-player__timeline,
[data-bunny-player-init][data-player-status="ready"][data-player-activated="false"] .bunny-player__timeline {
  pointer-events: none;
}

/* Timeline Handle */
[data-bunny-player-init] .bunny-player__timeline-handle {
  transition: transform var(--animation-default-half);
}

[data-bunny-player-init][data-timeline-drag="true"] .bunny-player__timeline-handle {
  transform: translate(-50%, -50%) scale(1);
}

/* Fullscreen */
[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-shrink-svg {
  display: block;
}

[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-scale-svg {
  display: none;
}

/* Mute */
[data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-mute-svg {
  display: block;
}

[data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-up-svg {
  display: none;
}

/* Cover Mode */
[data-bunny-player-init][data-player-update-size="cover"] {
  height: 100%;
}

[data-bunny-player-init][data-player-update-size="cover"] [data-player-before] {
  display: none;
}

[data-bunny-player-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-player__video {
  object-fit: cover;
}

/* Speed */
[data-player-control="speed"] .bunny-player__toggle-speed-span {
  display: none;
}

[data-player-speed="1x"] [data-player-control="speed"] .bunny-player__toggle-speed-span:nth-child(1) {display: block;}
[data-player-speed="1.2x"] [data-player-control="speed"] .bunny-player__toggle-speed-span:nth-child(2) {display: block;}
[data-player-speed="1.5x"] [data-player-control="speed"] .bunny-player__toggle-speed-span:nth-child(3) {display: block;}
[data-player-speed="2x"] [data-player-control="speed"] .bunny-player__toggle-speed-span:nth-child(4) {display: block;}
[data-player-speed="0.8x"] [data-player-control="speed"] .bunny-player__toggle-speed-span:nth-child(5) {display: block;}


/* ------------------------- Lazy Videos -------------------------------------------------- */

[data-video-lazy][data-video-status] {
  transition: opacity var(--animation-ease), visibility var(--animation-ease);
}

[data-video-lazy][data-video-status="loaded"] {
  opacity: 1;
  visibility: visible;
}

/* ------------------------- Dash Message -------------------------------------------------- */

.dash-message {
  transition: transform var(--animation-ease), background-color var(--animation-ease);
  transform: translateY(0em) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  .dash-message:hover {
    background-color: rgba(var(--color-rgb-white), 0.75);
    transform: translateY(-0.25em) rotate(0.001deg);
  }
  
  .dash[data-dash-theme="dark"] .dash-message:hover {
    background-color: var(--color-neutral-300);
  }
}