html.ios {
  --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}

html.md {
  --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
}

html {
  --ion-font-family: var(--ion-default-font);
}

body {
  background: var(--ion-background-color);
}

body.backdrop-no-scroll {
  overflow: hidden;
}

/**
 * Card style modal needs additional padding on the
 * top of the header. We accomplish this by targeting
 * the first toolbar in the header.
 * Footer also needs this. We do not adjust the bottom
 * padding though because of the safe area.
 */
html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
html.ios ion-modal ion-footer ion-toolbar:first-of-type {
  padding-top: 6px;
}

/**
* Card style modal needs additional padding on the
* bottom of the header. We accomplish this by targeting
* the last toolbar in the header.
*/
html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,
html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
  padding-bottom: 6px;
}

/**
* Add padding on the left and right
* of toolbars while accounting for
* safe area values when in landscape.
*/
html.ios ion-modal ion-toolbar {
  padding-right: calc(var(--ion-safe-area-right) + 8px);
  padding-left: calc(var(--ion-safe-area-left) + 8px);
}

/**
 * Card style modal on iPadOS
 * should only have backdrop on first instance.
 */
@media screen and (min-width: 768px) {
  html.ios ion-modal.modal-card:first-of-type {
    --backdrop-opacity: 0.18;
  }
}
/**
 * Subsequent modals should not have a backdrop/box shadow
 * as it will cause the screen to appear to get progressively
 * darker. With Ionic 6, declarative modals made it
 * possible to have multiple non-presented modals in the DOM,
 * so we could no longer rely on ion-modal:first-of-type.
 * Here we disable the opacity/box-shadow for every modal
 * that comes after the first presented modal.
 *
 * Note: ion-modal:not(.overlay-hidden):first-of-type
 * does not match the first modal to not have
 * the .overlay-hidden class, it will match the
 * first modal in general only if it does not
 * have the .overlay-hidden class.
 * The :nth-child() pseudo-class has support
 * for selectors which would help us here. At the
 * time of writing it does not have great cross browser
 * support.
 *
 * Note 2: This should only apply to non-card and
 * non-sheet modals. Card and sheet modals have their
 * own criteria for displaying backdrops/box shadows.
 */
ion-modal.modal-default:not(.overlay-hidden) ~ ion-modal.modal-default {
  --backdrop-opacity: 0;
  --box-shadow: none;
}

/**
 * This works around a bug in WebKit where the
 * content will overflow outside of the bottom border
 * radius when re-painting. As long as a single
 * border radius value is set on .ion-page, this
 * issue does not happen. We set the top left radius
 * here because the top left corner will always have a
 * radius no matter the platform.
 * This behavior only applies to card modals.
 */
html.ios ion-modal.modal-card .ion-page {
  border-top-left-radius: var(--border-radius);
}

.ion-color-primary {
  --ion-color-base: var(--ion-color-primary, #3880ff) !important;
  --ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important;
  --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important;
  --ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important;
}

.ion-color-secondary {
  --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
  --ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important;
  --ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important;
  --ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important;
}

.ion-color-tertiary {
  --ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
  --ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important;
  --ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important;
  --ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important;
}

.ion-color-success {
  --ion-color-base: var(--ion-color-success, #2dd36f) !important;
  --ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important;
  --ion-color-contrast: var(--ion-color-success-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-success-shade, #28ba62) !important;
  --ion-color-tint: var(--ion-color-success-tint, #42d77d) !important;
}

.ion-color-warning {
  --ion-color-base: var(--ion-color-warning, #ffc409) !important;
  --ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;
  --ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;
  --ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important;
}

.ion-color-danger {
  --ion-color-base: var(--ion-color-danger, #eb445a) !important;
  --ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important;
  --ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important;
  --ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important;
}

.ion-color-light {
  --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
  --ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;
  --ion-color-contrast: var(--ion-color-light-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;
  --ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important;
}

.ion-color-medium {
  --ion-color-base: var(--ion-color-medium, #92949c) !important;
  --ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important;
  --ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-medium-shade, #808289) !important;
  --ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important;
}

.ion-color-dark {
  --ion-color-base: var(--ion-color-dark, #222428) !important;
  --ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;
  --ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;
  --ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important;
}

.ion-page {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
  contain: layout size style;
  overflow: hidden;
  z-index: 0;
}

.split-pane-visible > .ion-page.split-pane-main {
  position: relative;
}

ion-route,
ion-route-redirect,
ion-router,
ion-select-option,
ion-nav-controller,
ion-menu-controller,
ion-action-sheet-controller,
ion-alert-controller,
ion-loading-controller,
ion-modal-controller,
ion-picker-controller,
ion-popover-controller,
ion-toast-controller,
.ion-page-hidden,
[hidden] {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.ion-page-invisible {
  opacity: 0;
}

.can-go-back > ion-header ion-back-button {
  display: block;
}

html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
  --ion-statusbar-padding: 20px;
}

@supports (padding-top: 20px) {
  html {
    --ion-safe-area-top: var(--ion-statusbar-padding);
  }
}
@supports (padding-top: constant(safe-area-inset-top)) {
  html {
    --ion-safe-area-top: constant(safe-area-inset-top);
    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
    --ion-safe-area-left: constant(safe-area-inset-left);
    --ion-safe-area-right: constant(safe-area-inset-right);
  }
}
@supports (padding-top: env(safe-area-inset-top)) {
  html {
    --ion-safe-area-top: env(safe-area-inset-top);
    --ion-safe-area-bottom: env(safe-area-inset-bottom);
    --ion-safe-area-left: env(safe-area-inset-left);
    --ion-safe-area-right: env(safe-area-inset-right);
  }
}
ion-card.ion-color .ion-inherit-color,
ion-card-header.ion-color .ion-inherit-color {
  color: inherit;
}

.menu-content {
  transform: translate3d(0,  0,  0);
}

.menu-content-open {
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: none;
}

.ios .menu-content-reveal {
  box-shadow: -8px 0 42px rgba(0, 0, 0, 0.08);
}

[dir=rtl].ios .menu-content-reveal {
  box-shadow: 8px 0 42px rgba(0, 0, 0, 0.08);
}

.md .menu-content-reveal {
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
}

.md .menu-content-push {
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
}

ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

ion-accordion-group > ion-accordion:last-of-type ion-item[slot=header] {
  --border-width: 0px;
}

ion-accordion.accordion-animated > [slot=header] .ion-accordion-toggle-icon {
  transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
  ion-accordion .ion-accordion-toggle-icon {
    /* stylelint-disable declaration-no-important */
    transition: none !important;
  }
}
/**
 * The > [slot="header"] selector ensures that we do
 * not modify toggle icons for any nested accordions. The state
 * of one accordion should not affect any accordions inside
 * of a nested accordion group.
 */
ion-accordion.accordion-expanding > [slot=header] .ion-accordion-toggle-icon,
ion-accordion.accordion-expanded > [slot=header] .ion-accordion-toggle-icon {
  transform: rotate(180deg);
}

ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot=header] {
  --border-width: 0px;
  --inner-border-width: 0px;
}

ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {
  margin-top: 0;
}

ion-input input::-webkit-date-and-time-value {
  text-align: start;
}

/*# sourceMappingURL=core.css.map */

body {
  padding: 0;
  margin: 0;
  font-family: "Poppins", sans-serif;
  background: #f6f9fc;
}

ftb-showcase-page h2 {
  margin-top: 40px;
}
ftb-showcase-page .inline-code {
  display: inline;
  padding: 0 5px;
}
ftb-showcase-page .menu ftb-searchable-content {
  margin-top: 10px;
  display: block;
  height: calc(100% - 43px);
}
ftb-showcase-page .menu ftb-searchable-content .ftb-searchable-content__search-line {
  height: 30px;
}
ftb-showcase-page .menu ftb-searchable-content .main-input {
  border: none;
  outline: none;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  height: 30px;
  width: 100%;
  border-radius: 10px;
}
ftb-showcase-page .menu ftb-searchable-content .search-icon {
  height: 14px;
  width: 14px;
  top: 9px;
  left: 10px;
}
ftb-showcase-page .menu .ftb-searchable-content__content {
  overflow-y: auto;
  height: calc(100% - 72px);
  direction: rtl;
  margin-top: 20px;
  margin-left: -15px;
  padding-left: 15px;
}
ftb-showcase-page .menu .ftb-searchable-content__content::-webkit-scrollbar-thumb {
  background-color: #8d9aa1;
  position: relative;
  border-radius: 8px;
}
ftb-showcase-page .menu .ftb-searchable-content__content::-webkit-scrollbar {
  width: 4px;
  position: relative;
  display: block;
  border-radius: 8px;
}
ftb-showcase-page .menu .ftb-searchable-content__content::-webkit-scrollbar-track {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}
ftb-showcase-page .menu .ftb-searchable-content__content .category {
  direction: ltr;
}
ftb-showcase-page .menu .ftb-searchable-content__content .category:first-of-type h6 {
  margin-top: 0 !important;
}
ftb-showcase-page .menu .ftb-searchable-content__content .category:last-of-type {
  margin-bottom: 30px;
}
ftb-showcase-page .menu .ftb-searchable-content__content .category h6 {
  margin: 0;
  font-size: 13px;
  height: 25px;
  margin-top: 20px;
}
ftb-showcase-page .menu .ftb-searchable-content__content .category a {
  display: flex;
  align-items: center;
  font-size: 13px;
  height: 35px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  outline: none;
  user-select: none;
  text-decoration: none;
}
ftb-showcase-page .menu .ftb-searchable-content__content .category a:hover {
  color: cornflowerblue;
}
ftb-showcase-page .mobile ion-header ion-toolbar ion-title {
  font-family: "Twinkle Star", cursive;
  font-weight: 700;
  font-size: 18px;
}
ftb-showcase-page .mobile .main-link {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  color: #2e2e2e;
  font-family: "Twinkle Star", cursive;
  font-weight: 700;
}
ftb-showcase-page .mobile .main-logo {
  height: 30px;
  width: 30px;
  transform: translateX(18px);
  opacity: 0.6;
}
ftb-showcase-page .mobile .content {
  padding: 0 10px;
  overflow-y: auto;
  min-height: calc(100% - 56px);
  width: 100vw;
  box-sizing: border-box;
}
ftb-showcase-page .mobile ion-nav > .ion-page {
  display: block;
  padding: 0 10px;
  overflow: auto;
}
ftb-showcase-page .mobile .ion-page {
  justify-content: flex-start;
}
ftb-showcase-page .mobile .menu .header {
  padding: 0 20px;
}
ftb-showcase-page .mobile .menu .header a.link-active {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  font-size: 18px;
  color: #2e2e2e !important;
  font-family: "Twinkle Star", cursive;
  font-weight: 700;
}
ftb-showcase-page .mobile .menu ftb-searchable-content {
  margin: 10px;
  height: calc(100% - 64px) !important;
}
ftb-showcase-page .mobile .menu input {
  background: rgba(0, 0, 0, 0.1);
}
ftb-showcase-page .desktop .header {
  padding: 0 20px;
}
ftb-showcase-page .desktop .header .main-link {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  color: #2e2e2e;
  font-family: "Twinkle Star", cursive;
  font-weight: 700;
}
ftb-showcase-page .desktop .menu {
  width: 230px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
}
ftb-showcase-page .desktop .menu .header {
  height: 100%;
}
ftb-showcase-page .desktop .menu .category {
  direction: ltr;
}
ftb-showcase-page .desktop .menu .category:first-of-type h6 {
  margin-top: 0 !important;
}
ftb-showcase-page .desktop .menu .category:last-of-type {
  margin-bottom: 30px;
}
ftb-showcase-page .desktop .menu .category h6 {
  margin: 0;
  font-size: 13px;
  height: 25px;
  margin-top: 20px;
}
ftb-showcase-page .desktop .menu .category a {
  display: flex;
  align-items: center;
  font-size: 12px;
  height: 35px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  outline: none;
  user-select: none;
  text-decoration: none;
  position: relative;
  background: transparent;
  white-space: nowrap;
  padding: 0 5px;
}
ftb-showcase-page .desktop .menu .category a:hover {
  color: cornflowerblue;
}
ftb-showcase-page .desktop .content-fog {
  width: 100%;
  background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));
  position: absolute;
  left: 0;
  z-index: 1000;
  height: 30px;
  top: 0;
  border-radius: 10px 10px 0 0;
}
ftb-showcase-page .desktop .main-link {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  color: #2e2e2e;
  font-family: "Twinkle Star", cursive;
  font-weight: 700;
  position: relative;
  background: transparent;
}
ftb-showcase-page .desktop .content {
  margin-left: 230px;
  height: calc(100% - 60px);
  background: white;
  margin-top: 10px;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  padding-bottom: 50px;
  width: calc(100% - 230px);
  position: relative;
  padding-left: 20px;
  overflow-y: auto;
}
ftb-showcase-page .desktop .content ion-app {
  padding-left: 20px;
}
ftb-showcase-page .desktop .content .ion-page {
  display: block;
  overflow-y: auto;
}
ftb-showcase-page .desktop .content .ion-page::-webkit-scrollbar-thumb {
  background-color: #999999;
  position: relative;
  border-radius: 8px;
}
ftb-showcase-page .desktop .content .ion-page::-webkit-scrollbar {
  width: 8px;
  position: relative;
  display: block;
  border-radius: 8px;
}
ftb-showcase-page .desktop .content .ion-page::-webkit-scrollbar-track {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}