/*
|------------------------------------------------------------------------------
| TABLE OF CONTENTS
|------------------------------------------------------------------------------
| Accordion
| Action Sheet
| Audio
| Autocomplete
| Badge
| Bars
| Body
| Breadcrumb
| Button
| Card
| Chart
| Checkbox & Radio
| Chip
| Color Picker
| Content Block
| Data Table
| Date-Time Picker
| Dialog
| Dropcap
| Elevation
| Empty State
| Expandable Card
| Flip Card
| Floating Action Button
| Form Input
| Form Validator
| Gauge
| Grid
| Icon
| Image
| Image Compare
| Image Hotspot
| Infinite Scroll
| Integrations
| Keypad
| Line Divider
| Link
| List Index
| List View
| Margin & Padding
| Marquee
| Menu
| Menu List
| Message
| Navbar
| Note
| Notification
| Overlay Container
| Page
| Pagination
| Photo Browser
| Picker
| Popover
| Popup
| Position
| Preloader
| Progress Bar
| Pull-to-Refresh
| Quote
| Range Slider
| Rating
| Responsive Container
| Ribbon
| Scroll Bar
| Searchbar
| Shape & Size
| Sheet Modal
| Show More/Less
| Side Panel
| Signature Pad
| Skeleton
| Smart Select
| Sortable List
| State Toggle
| Stepper
| Subnavbar
| Swipeout
| Swiper Slider
| Syntax Highlighter
| Tab
| Text Editor
| Theme
| Timeline
| Timer
| Toast
| Toggle
| Toolbar
| Tooltip
| Tour Guide
| Tree View
| Video
| Virtual List
| Utilities
|------------------------------------------------------------------------------
*/

/*
|------------------------------------------------------------------------------
| Accordion
|------------------------------------------------------------------------------
*/

* {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

body {
  -webkit-touch-callout: none;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

:root {
  --f7-safe-area-top: env(safe-area-inset-top);
  --f7-safe-area-bottom: env(safe-area-inset-bottom);
  --f7-safe-area-left: env(safe-area-inset-left);
  --f7-safe-area-right: env(safe-area-inset-right);
}

[dir="rtl"] .accordion-opposite .accordion-item-toggle.item-content:before,
[dir="rtl"] .accordion-opposite .accordion-item-toggle > .item-content:before,
[dir="rtl"] .accordion-opposite .accordion-item > .item-content:before,
[dir="rtl"]
  .accordion-opposite
  .accordion-item
  > .item-link
  > .item-content:before,
[dir="rtl"] .accordion-opposite.links-list .accordion-item > a:before {
  transform: translateX(50%);
}

.accordion-item.custom-toggle-icon > .item-content > .item-inner,
.accordion-item.custom-toggle-icon > .item-link > .item-content > .item-inner {
  --f7-list-chevron-icon-area: 0px;
}

.accordion-item.custom-toggle-icon > .item-content > .item-inner:before,
.accordion-item.custom-toggle-icon
  > .item-content
  > .item-inner
  > .item-title-row:before,
.accordion-item.custom-toggle-icon
  > .item-link
  > .item-content
  > .item-inner:before,
.accordion-item.custom-toggle-icon
  > .item-link
  > .item-content
  > .item-inner
  > .item-title-row:before {
  display: none;
}

.accordion-opposite .accordion-item.custom-toggle-icon > .item-content,
.accordion-opposite
  .accordion-item.custom-toggle-icon
  > .item-link
  > .item-content {
  --f7-list-chevron-icon-area: 0px;
}

.accordion-opposite .accordion-item.custom-toggle-icon > .item-content:before,
.accordion-opposite
  .accordion-item.custom-toggle-icon
  > .item-link
  > .item-content:before {
  display: none;
}

.accordion-item.accordion-item-opened.custom-toggle-icon .toggle-icon-open {
  display: none;
}

.accordion-item.accordion-item-opened.custom-toggle-icon .toggle-icon-close {
  display: inline-block;
}

.accordion-item:not(.accordion-item-opened).custom-toggle-icon
  .toggle-icon-open {
  display: inline-block;
}

.accordion-item:not(.accordion-item-opened).custom-toggle-icon
  .toggle-icon-close {
  display: none;
}

.accordion-opposite
  .accordion-item.custom-toggle-icon
  > .item-content
  > .item-inner,
.accordion-opposite
  .accordion-item.custom-toggle-icon
  > .item-link
  > .item-content
  > .item-inner {
  justify-content: flex-start;
}

.accordion-opposite
  .accordion-item.custom-toggle-icon
  > .item-content
  > .item-inner
  .item-title,
.accordion-opposite
  .accordion-item.custom-toggle-icon
  > .item-link
  > .item-content
  > .item-inner
  .item-title {
  order: 2;
}

.accordion-opposite
  .accordion-item.custom-toggle-icon
  > .item-content
  > .item-inner
  .item-after,
.accordion-opposite
  .accordion-item.custom-toggle-icon
  > .item-link
  > .item-content
  > .item-inner
  .item-after {
  margin-left: 0;
  margin-right: 0;
  order: 1;
  padding-left: 0;
  padding-right: var(--f7-list-item-after-padding);
}

[dir="rtl"]
  .accordion-opposite
  .accordion-item.custom-toggle-icon
  > .item-content
  > .item-inner
  .item-after,
[dir="rtl"]
  .accordion-opposite
  .accordion-item.custom-toggle-icon
  > .item-link
  > .item-content
  > .item-inner
  .item-after {
  padding-left: var(--f7-list-item-after-padding);
  padding-right: 0;
}

.cards-list li.accordion-item {
  margin: calc(var(--f7-list-margin-vertical) / 4) 0;
}

.accordion-item-opened .item-title[class*="color-"] {
  color: var(--f7-theme-color);
}

.accordion-item-content {
  font-size: 15px;
}

/*
|------------------------------------------------------------------------------
| Action Sheet
|------------------------------------------------------------------------------
*/

:root {
  --f7-actions-grid-button-font-size: 14px;
  --f7-actions-grid-button-icon-size: 24px;
}

.aurora,
.ios,
.md {
  --f7-actions-button-font-size: var(--f7-font-size);
  --f7-actions-button-icon-size: 24px;
  --f7-actions-label-font-size: var(--f7-font-size);
}

.md {
  --f7-actions-border-radius: 4px;
  --f7-actions-group-margin: 8px;
}

[dir="rtl"].md {
  --f7-actions-button-text-align: right;
}

.actions-group:after {
  display: none;
}

.actions-button {
  align-items: center;
  height: auto;
  min-height: var(--f7-actions-button-height);
}

.aurora .actions-button-media {
  margin-left: 0;
}

[dir="rtl"].ios .actions-button-media {
  margin-left: 0;
  margin-right: 16px;
}

.md .actions-button-media {
  min-width: var(--f7-actions-button-icon-size);
}

[dir="rtl"].aurora .actions-button-media + .actions-button-text,
[dir="rtl"].md .actions-button-media + .actions-button-text {
  margin-left: 0;
  margin-right: 16px;
  text-align: right;
}

[dir="rtl"].ios .actions-button-media + .actions-button-text {
  margin-right: 16px;
  text-align: right;
}

.md .actions-button-media + .actions-button-text {
  text-align: left;
}

.actions-grid .actions-button {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.actions-grid .actions-button[class*="color-"] {
  color: var(--f7-theme-color);
}

.actions-grid .actions-button-media {
  height: auto;
  width: auto;
}

.actions-grid .actions-button-text {
  margin-right: 0 !important;
}

.actions-grid .actions-label {
  --f7-actions-label-justify-content: center;
}

/*
|------------------------------------------------------------------------------
| Audio
|------------------------------------------------------------------------------
*/

audio {
  display: block;
  width: 100%;
}

.dark audio::-webkit-media-controls-panel {
  background-color: var(--color-gray-800);
}

.dark audio::-webkit-media-controls-play-button,
.dark audio::-webkit-media-controls-mute-button {
  background-color: var(--color-gray-400);
  border-radius: 50%;
}

.dark audio::-webkit-media-controls-current-time-display,
.dark audio::-webkit-media-controls-time-remaining-display {
  color: #ffffff;
}

.dark audio::-webkit-media-controls-timeline {
  background-color: var(--color-gray-600);
  border-radius: 24px;
  margin-left: 16px;
  margin-right: 16px;
}

.dark audio::-webkit-media-controls-volume-slider {
  background-color: var(--color-gray-400);
  border-radius: 24px;
  margin-right: 8px;
  padding-left: 8px;
  padding-right: 8px;
}

/*
|------------------------------------------------------------------------------
| Autocomplete
|------------------------------------------------------------------------------
*/

.autocomplete-dropdown {
  border-radius: 4px;
}

.autocomplete-popup .searchbar-backdrop {
  display: none;
}

/*
|------------------------------------------------------------------------------
| Badge
|------------------------------------------------------------------------------
*/

:root {
  --f7-badge-bg-color: var(--color-gray-500);
}

:root .dark,
:root.dark {
  --f7-badge-bg-color: var(--color-gray-700);
}

.aurora,
.ios,
.md {
  --f7-badge-font-weight: normal;
  --f7-badge-size: 20px;
}

.badge {
  border-radius: 4px;
  height: auto;
  line-height: 1;
  margin: 3px;
  min-height: var(--f7-badge-size);
  overflow: hidden;
  --f7-touch-ripple-color: rgba(var(--f7-color-gray-rgb), 0.25);
}

.badge[class*="color-"] {
  --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
}

.badge > :not(.ripple-wave) + * {
  margin-left: 3px;
  margin-right: 0;
}

[dir="rtl"] .badge > :not(.ripple-wave) + * {
  margin-left: 0;
  margin-right: 3px;
}

.badge-round {
  border-radius: var(--f7-badge-size);
  --f7-badge-padding: 0px 8px;
}

.badge-outline {
  background: none;
  border: 1px solid var(--f7-badge-bg-color);
  color: var(--f7-badge-bg-color);
}

.badge-fade {
  background-color: rgba(var(--color-gray-rgb-500), 0.2);
  color: var(--color-gray-600);
}

.badge-fade[class*="color-"] {
  background-color: rgba(var(--f7-theme-color-rgb), 0.2);
  color: var(--f7-theme-color);
}

.badge.badge-dot {
  border-radius: 50%;
  height: 10px;
  height: var(--f7-badge-size);
  overflow: hidden;
  width: 10px;
  width: var(--f7-badge-size);
  --f7-badge-padding: 0px;
  --f7-badge-size: 10px;
  --f7-badge-text-color: transparent;
}

.badge .icon {
  font-size: var(--f7-badge-font-size) !important;
}

.icon .badge {
  margin-top: 0;
}

[dir="rtl"] .icon .badge {
  left: auto;
  margin-left: 0;
  margin-right: -10px;
  right: 100%;
}

.button .badge {
  --f7-badge-bg-color: #ffffff;
  --f7-badge-font-size: var(--f7-button-font-size);
  --f7-badge-font-weight: var(--f7-button-font-weight);
  --f7-badge-text-color: var(--f7-theme-color);
  margin: 0 8px !important;
}

.badge-wrapper {
  overflow: visible;
  position: relative;
}

.badge-wrapper .badge {
  left: 100%;
  margin: 0;
  position: absolute;
  top: calc(0.625rem / -2);
  top: calc(var(--f7-badge-size) / -2);
  transform: translateX(calc(0.625rem / -2));
  transform: translateX(calc(var(--f7-badge-size) / -2));
  --f7-badge-font-size: 0.625rem;
  --f7-badge-size: 0.625rem;
}

[dir="rtl"] .badge-wrapper .badge {
  left: auto;
  right: 100%;
  transform: translateX(calc(var(--f7-badge-size) / 2));
}

.badge-wrapper .badge-bottom {
  bottom: calc(var(--f7-badge-size) / -2);
  top: auto;
}

/*
|------------------------------------------------------------------------------
| Bars
|------------------------------------------------------------------------------
*/

:root {
  --f7-bars-bg-color: #ffffff;
  --f7-bars-bg-color-rgb: 255, 255, 255;
}

:root {
  --f7-bars-shadow-bottom-image: linear-gradient(
    to bottom,
    rgba(158, 158, 158, 0.1) 0%,
    rgba(158, 158, 158, 0.05) 40%,
    rgba(158, 158, 158, 0.025) 50%,
    rgba(158, 158, 158, 0.0125) 90%,
    rgba(158, 158, 158, 0) 100%
  );
  --f7-bars-shadow-top-image: linear-gradient(
    to top,
    rgba(158, 158, 158, 0.1) 0%,
    rgba(158, 158, 158, 0.05) 40%,
    rgba(158, 158, 158, 0.025) 50%,
    rgba(158, 158, 158, 0.0125) 90%,
    rgba(158, 158, 158, 0) 100%
  );
}

:root .dark,
:root.dark {
  --f7-bars-shadow-bottom-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0.08) 40%,
    rgba(0, 0, 0, 0.04) 50%,
    rgba(0, 0, 0, 0.02) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  --f7-bars-shadow-top-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0.08) 40%,
    rgba(0, 0, 0, 0.04) 50%,
    rgba(0, 0, 0, 0.02) 90%,
    rgba(0, 0, 0, 0) 100%
  );
}

.aurora .dark,
.aurora.dark,
.ios .dark,
.ios.dark,
.md .dark,
.md.dark {
  --f7-bars-bg-color: #1c1c1c;
  --f7-bars-bg-color-rgb: 28, 28, 28;
}

.aurora,
.ios {
  --f7-bars-border-color: rgba(0, 0, 0, 0.12);
}

.aurora .dark,
.aurora.dark,
.ios .dark,
.ios.dark {
  --f7-bars-border-color: rgba(255, 255, 255, 0.12);
}

/*
|------------------------------------------------------------------------------
| Body
|------------------------------------------------------------------------------
*/

:root {
  --f7-font-size: 16px;
  --f7-body-bg-color: #eceff1;
}

:root .dark,
:root.dark {
  --f7-body-bg-color: #000000;
}

html {
  overscroll-behavior-y: contain;
}

body {
  background: #eceff1;
  background: var(--f7-body-bg-color);
}

.bg-color-body {
  background-color: #eceff1 !important;
  background-color: var(--f7-body-bg-color) !important;
}

.text-color-body {
  color: var(--f7-text-color) !important;
}

/*
|------------------------------------------------------------------------------
| Breadcrumb
|------------------------------------------------------------------------------
*/

.breadcrumbs[class*="color-"] {
  --f7-breadcrumbs-item-color: rgba(var(--f7-theme-color-rgb), 0.55);
  --f7-breadcrumbs-item-active-color: var(--f7-theme-color);
  --f7-breadcrumbs-separator-color: rgba(var(--f7-theme-color-rgb), 0.35);
  --f7-breadcrumbs-collapsed-color: rgba(var(--f7-theme-color-rgb), 0.75);
  --f7-breadcrumbs-collapsed-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
}

.breadcrumbs-item a {
  border-radius: var(--f7-button-border-radius);
  overflow: hidden;
  padding: 0 4px;
}

.breadcrumbs-item a {
  --f7-touch-ripple-color: rgba(var(--f7-color-gray-rgb), 0.25) !important;
}

.breadcrumbs[class*="color-"] .breadcrumbs-item a {
  --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25) !important;
}

[dir="rtl"] .breadcrumbs-collapsed + .breadcrumbs-collapsed,
[dir="rtl"] .breadcrumbs-collapsed + .breadcrumbs-item,
[dir="rtl"] .breadcrumbs-collapsed + .breadcrumbs-separator,
[dir="rtl"] .breadcrumbs-item + .breadcrumbs-collapsed,
[dir="rtl"] .breadcrumbs-item + .breadcrumbs-item,
[dir="rtl"] .breadcrumbs-item + .breadcrumbs-separator,
[dir="rtl"] .breadcrumbs-separator + .breadcrumbs-collapsed,
[dir="rtl"] .breadcrumbs-separator + .breadcrumbs-item,
[dir="rtl"] .breadcrumbs-separator + .breadcrumbs-separator {
  margin-left: 0;
  margin-right: var(--f7-breadcrumbs-spacing);
}

.breadcrumbs-separator.separator-dot:after {
  content: "\2022";
  font-family: var(--f7-font-family);
  font-weight: bold;
}

.breadcrumbs-separator.separator-slash:after {
  content: "\002F";
  font-family: var(--f7-font-family);
  font-weight: bold;
}

[dir="rtl"] .breadcrumbs-separator:after {
  transform: scaleX(-1);
}

/*
|------------------------------------------------------------------------------
| Button
|------------------------------------------------------------------------------
*/

:root {
  --f7-button-min-width: auto;
  --f7-button-small-outline-border-width: 1px;
}

:root .dark,
:root.dark {
  --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24),
    0 1px 2px rgba(0, 0, 0, 0.48);
}

.aurora,
.ios,
.md {
  --f7-button-font-size: 14px;
  --f7-button-font-weight: 500;
  --f7-button-large-font-size: 14px;
  --f7-button-large-font-weight: 600;
  --f7-button-small-font-size: 12px;
  --f7-button-small-font-weight: normal;
  --f7-button-padding-horizontal: 16px;
}

.aurora {
  --f7-button-letter-spacing: 0.025em;
}

.ios {
  --f7-button-height: 36px;
  --f7-button-letter-spacing: 0.01em;
  --f7-segmented-strong-button-text-transform: uppercase;
}

.ios .button-small-ios.button-fill,
.ios .button-small.button-fill,
.ios .button-small.button-fill-ios {
  --f7-button-pressed-bg-color: var(--f7-theme-color-tint);
  --f7-button-pressed-text-color: var(--f7-button-text-color);
}

.button-fade {
  --f7-button-bg-color: rgba(var(--f7-theme-color-rgb), 0.125);
}

.button-preloader.button-loading {
  pointer-events: none;
}

.button-icon {
  height: var(--f7-button-height);
  width: var(--f7-button-height);
}

.button > :not(.ripple-wave) + * {
  margin-left: 4px;
  margin-right: 0;
}

[dir="rtl"] .button > :not(.ripple-wave) + * {
  margin-left: 0;
  margin-right: 4px;
}

.button-social {
  justify-content: space-between;
}

.button-social > span:not(.icon) {
  flex-grow: 1;
}

.button > img,
.button > svg {
  height: calc(
    (var(--f7-button-height) - var(--f7-button-padding-horizontal)) / 1.5
  );
}

.button-large > img,
.button-large > svg {
  height: calc(
    (var(--f7-button-height) - var(--f7-button-padding-horizontal)) / 1.75
  );
}

.button-small > img,
.button-small > svg {
  height: calc(
    (var(--f7-button-height) - var(--f7-button-padding-horizontal)) / 1.25
  );
}

.segmented-strong .button {
  --f7-touch-ripple-color: rgba(var(--f7-color-gray-rgb), 0.25);
}

.aurora .segmented-round,
.ios .segmented-round,
.md .segmented-round {
  border-radius: var(--f7-button-large-height);
}

.segmented-round .segmented-highlight {
  border-radius: inherit;
}

[dir="rtl"] .aurora .segmented-strong-aurora .segmented-highlight,
[dir="rtl"] .ios .segmented-strong-ios .segmented-highlight,
[dir="rtl"] .md .segmented-strong-md .segmented-highlight,
[dir="rtl"] .segmented-strong .segmented-highlight {
  left: auto;
  transform: translateX(
    calc(
      var(--f7-segmented-highlight-active) * -100% -
        var(--f7-segmented-highlight-active) *
        var(--f7-segmented-highlight-between)
    )
  );
}

.segmented-strong .button.button-active,
.segmented-strong .button.tab-link-active {
  --f7-button-hover-bg-color: transparent;
}

.segmented-strong[class*="color-"] .button.button-active,
.segmented-strong[class*="color-"] .button.tab-link-active {
  --f7-button-bg-color: var(--f7-theme-color);
  color: #ffffff;
}

.segmented-strong[class*="color-"] .segmented-highlight {
  --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px
    rgba(var(--f7-theme-color-rgb), 0.25);
}

.aurora.device-desktop
  .segmented-strong[class*="color-"]
  .button:not(.active-state):not(.no-hover):hover {
  background-color: var(--f7-theme-color);
}

.aurora.device-desktop
  .segmented-strong[class*="color-"]
  .button:not(.button-active):not(.tab-link-active):not(.active-state):not(
    .no-hover
  ):hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/*
|------------------------------------------------------------------------------
| Card
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-card-border-radius: var(--f7-block-inset-border-radius);
  --f7-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  --f7-card-header-font-size: 18px;
  --f7-card-header-font-weight: bold;
  --f7-card-header-min-height: 48px;
  --f7-card-header-padding-vertical: 8px;
  --f7-card-footer-font-size: 14px;
  --f7-card-footer-min-height: 48px;
  --f7-card-footer-padding-vertical: 12px;
}

.card-media {
  align-items: flex-start;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.card > .card-media:first-child {
  border-top-left-radius: var(--f7-card-border-radius);
  border-top-right-radius: var(--f7-card-border-radius);
}

.card > .card-media:last-child {
  border-bottom-left-radius: var(--f7-card-border-radius);
  border-bottom-right-radius: var(--f7-card-border-radius);
}

.card-media-content {
  box-sizing: border-box;
  color: #ffffff;
  padding: var(--f7-card-content-padding-vertical)
    var(--f7-card-content-padding-horizontal);
  position: relative;
  width: 100%;
  z-index: 1000;
}

.card-media > * ~ .card-media-content {
  position: absolute;
}

.card-title {
  font-size: 22px;
  font-weight: bold;
}

.card-subtitle {
  font-size: 16px;
}

.card-text {
  color: var(--f7-card-footer-text-color);
  font-size: 14px;
}

.card-title + .card-subtitle,
.card-title + .card-text,
.card-subtitle + .card-text {
  margin-top: 4px;
}

.card-footer > * + * {
  margin-left: 4px;
  margin-right: 0;
}

[dir="rtl"] .card-footer > * + * {
  margin-left: 0;
  margin-right: 4px;
}

/*
|------------------------------------------------------------------------------
| Chart
|------------------------------------------------------------------------------
*/

:root .dark,
:root.dark {
  --f7-area-chart-tooltip-total-label-text-color: rgba(0, 0, 0, 0.5);
}

[dir="rtl"] .area-chart svg {
  transform: scaleX(-1);
}

[dir="rtl"] .area-chart-tooltip,
[dir="rtl"] .pie-chart-tooltip {
  text-align: right;
}

[dir="rtl"] .area-chart-tooltip-list span,
[dir="rtl"] .area-chart-legend-item span,
[dir="rtl"] .pie-chart-tooltip-color {
  margin-left: 4px;
  margin-right: 0;
}

/*
|------------------------------------------------------------------------------
| Checkbox & Radio
|------------------------------------------------------------------------------
*/

.checkbox,
.radio {
  --f7-touch-ripple-color: transparent;
}

.checkbox-inline,
.radio-inline {
  display: inline-flex;
}

.aurora .checkbox-inline,
.md .checkbox-inline,
.aurora .radio-inline,
.md .radio-inline {
  line-height: 1;
}

.checkbox-inline > .icon-checkbox,
.radio-inline > .icon-radio {
  margin-left: 0;
  margin-right: 4px;
}

[dir="rtl"] .checkbox-inline > .icon-checkbox,
[dir="rtl"] .radio-inline > .icon-radio {
  margin-left: 4px;
  margin-right: 0;
}

.checkbox-list .item-checkbox,
.radio-list .item-radio {
  padding: 0;
}

.checkbox-list .item-inner,
.radio-list .item-inner {
  margin: 0;
  padding: var(--f7-list-item-padding-vertical)
    calc(
      var(--f7-list-item-padding-horizontal) + env(safe-area-inset-left) -
        var(--menu-list-offset)
    ) !important;
  padding: var(--f7-list-item-padding-vertical)
    calc(
      var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) -
        var(--menu-list-offset)
    ) !important;
}

.checkbox-list .item-checkbox,
.checkbox-list .item-checkbox .item-inner,
.radio-list .item-radio,
.radio-list .item-radio .item-inner {
  border-radius: inherit;
}

.checkbox-list.checkbox-fill .item-checkbox input:checked ~ .item-inner,
.radio-list.radio-fill .item-radio input:checked ~ .item-inner {
  background-color: var(--f7-theme-color) !important;
  color: #ffffff !important;
}

.checkbox-list.checkbox-fill
  .item-checkbox
  input:checked
  ~ .item-inner
  .icon-checkbox {
  --f7-checkbox-active-color: #ffffff;
  --f7-checkbox-icon-color: var(--f7-theme-color);
}

.radio-list.radio-fill .item-radio input:checked ~ .item-inner .icon-radio {
  --f7-radio-active-color: #ffffff;
}

.aurora
  .radio-list.radio-fill
  .item-radio
  input:checked
  ~ .item-inner
  .icon-radio:after {
  background-color: var(--f7-theme-color);
}

.checkbox-list.checkbox-outline .item-checkbox input ~ .item-inner,
.radio-list.radio-outline .item-radio input ~ .item-inner {
  border: 2px solid rgba(var(--f7-color-gray-rgb), 0.25);
}

.checkbox-list.checkbox-outline .item-checkbox input:checked ~ .item-inner,
.radio-list.radio-outline .item-radio input:checked ~ .item-inner {
  border-color: var(--f7-theme-color) !important;
}

.checkbox-media,
.radio-media {
  display: inline-block;
  font-size: 14px;
  position: relative;
  text-align: center;
  --f7-checkbox-radio-media-border-color: var(--f7-color-gray);
  --f7-checkbox-radio-media-icon-color: var(--f7-color-gray);
  --f7-checkbox-radio-media-text-color: var(--f7-color-gray);
}

.checkbox-media input,
.radio-media input {
  display: none;
}

.checkbox-media .checkbox-inner,
.radio-media .radio-inner {
  align-items: center;
  border-color: var(--f7-checkbox-radio-media-border-color);
  border-style: solid;
  border-width: 4px;
  box-sizing: border-box;
  color: var(--f7-checkbox-radio-media-text-color);
  display: flex;
  filter: grayscale(1);
  flex-direction: column;
  justify-content: center;
  position: relative;
  text-align: center;
}

.checkbox-media .checkbox-inner:after,
.radio-media .radio-inner:after {
  align-items: center;
  background-color: var(--f7-checkbox-radio-media-icon-color);
  border-radius: 50%;
  color: #ffffff;
  content: "checkbox_md";
  display: flex;
  font-family: framework7-core-icons;
  font-size: 10px;
  height: 16px;
  justify-content: center;
  left: auto;
  opacity: 0;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 16px;
}

[dir="rtl"] .checkbox-media .checkbox-inner:after,
[dir="rtl"] .radio-media .radio-inner:after {
  left: 6px;
  right: auto;
}

.checkbox-media .checkbox-inner img,
.radio-media .radio-inner img {
  border-radius: inherit;
}

.checkbox-media .checkbox-label,
.radio-media .radio-label {
  color: var(--f7-checkbox-radio-media-text-color);
  margin-top: 2px;
}

.checkbox-media input:checked ~ .checkbox-inner,
.radio-media input:checked ~ .radio-inner {
  --f7-checkbox-radio-media-border-color: var(--f7-theme-color);
  --f7-checkbox-radio-media-text-color: var(--f7-theme-color);
  filter: grayscale(0);
}

.checkbox-media input:checked ~ .checkbox-inner:after,
.radio-media input:checked ~ .radio-inner:after {
  --f7-checkbox-radio-media-icon-color: var(--f7-theme-color);
  opacity: 1;
}

.checkbox-media input:checked ~ .checkbox-label,
.radio-media input:checked ~ .radio-label {
  --f7-checkbox-radio-media-text-color: var(--f7-theme-color);
}

.checkbox-media.no-outline .checkbox-inner,
.radio-media.no-outline .radio-inner {
  border-width: 0;
}

.checkbox-media.no-tick .checkbox-inner:after,
.radio-media.no-tick .radio-inner:after {
  display: none;
}

.checkbox-media.no-grayscale input ~ .checkbox-inner,
.radio-media.no-grayscale input ~ .radio-inner {
  filter: grayscale(0);
}

/*
|------------------------------------------------------------------------------
| Chip
|------------------------------------------------------------------------------
*/

:root {
  --f7-chip-delete-button-color: inherit;
}

:root .dark,
:root.dark {
  --f7-chip-delete-button-color: inherit;
}

.aurora,
.ios,
.md {
  --f7-chip-height: 28px;
  --f7-chip-padding-horizontal: 12px;
}

.chip {
  margin: 3px;
  max-width: 100%;
  overflow: hidden;
  --f7-touch-ripple-color: rgba(var(--f7-color-gray-rgb), 0.25);
}

.chip[class*="color-"] {
  --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
}

.chip-fade[class*="color-"] {
  background-color: rgba(var(--f7-theme-color-rgb), 0.15);
  color: var(--f7-theme-color);
}

.chip-media {
  background-color: rgba(0, 0, 0, 0.125);
  color: var(--color-gray-700);
  font-weight: 600;
}

.chip[class*="color-"] .chip-media {
  color: #ffffff;
}

.chip-outline .chip-media {
  background-color: transparent;
  border: 1px solid var(--f7-chip-outline-border-color);
}

.chip-outline[class*="color-"] .chip-media {
  color: var(--f7-theme-color);
}

.chip-fade[class*="color-"] .chip-media {
  background-color: inherit;
  color: var(--f7-theme-color);
}

.chip-media i.icon {
  font-size: calc(var(--f7-chip-height) - 12px);
  height: calc(var(--f7-chip-height) - 12px);
}

.chip-selectable {
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  max-width: 100%;
}

.chip-selectable .chip {
  --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
  --f7-chip-outline-border-color: rgba(0, 0, 0, 0.125);
}

.dark .chip-selectable .chip {
  --f7-chip-bg-color: #333333;
  --f7-chip-outline-border-color: rgba(255, 255, 255, 0.125);
}

.aurora .chip-selectable .chip,
.ios .chip-selectable .chip {
  --f7-chip-text-color: #000000;
}

.aurora .dark .chip-selectable .chip,
.aurora.dark .chip-selectable .chip,
.ios .dark .chip-selectable .chip,
.ios.dark .chip-selectable .chip {
  --f7-chip-text-color: #ffffff;
}

.md .chip-selectable .chip {
  --f7-chip-text-color: rgba(0, 0, 0, 0.87);
}

.md .dark .chip-selectable .chip,
.md.dark .chip-selectable .chip {
  --f7-chip-text-color: rgba(255, 255, 255, 0.87);
}

.chip-selectable .chip .chip-media {
  color: var(--f7-chip-text-color);
}

.chip-selectable input {
  display: none;
}

.chip-selectable input:checked ~ .chip {
  --f7-chip-bg-color: var(--f7-theme-color);
  --f7-chip-text-color: #ffffff;
  --f7-chip-outline-border-color: var(--f7-theme-color);
}

.chip-selectable.selectable-fade input:checked ~ .chip {
  --f7-chip-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
  --f7-chip-text-color: var(--f7-theme-color);
  --f7-chip-outline-border-color: var(--f7-theme-color);
}

.chip-selectable.selectable-fade input:checked ~ .chip .chip-media {
  background-color: inherit;
}

.chip-selectable.selectable-fill input:checked ~ .chip {
  background-color: var(--f7-theme-color);
  --f7-chip-text-color: #ffffff;
  --f7-chip-outline-border-color: var(--f7-theme-color);
}

.chip-selectable.selectable-fill input:checked ~ .chip .chip-media {
  background-color: rgba(0, 0, 0, 0.25);
}

.chip-selectable input:checked ~ .chip-outline {
  --f7-chip-text-color: var(--f7-theme-color);
}

.chip-selectable.selectable-fade input:checked ~ .chip-outline {
  background-color: rgba(var(--f7-theme-color-rgb), 0.15);
}

.chip-selectable .chip-media img {
  filter: grayscale(1);
}

.chip-selectable input:checked ~ .chip .chip-media img {
  filter: grayscale(0);
}

.chip-delete {
  margin-top: 2px;
  opacity: 0.75;
}

.md .chip-delete {
  margin-right: calc(-1 * var(--f7-chip-padding-horizontal));
}

[dir="rtl"].md .chip-delete {
  margin-left: calc(-1 * var(--f7-chip-padding-horizontal));
}

.aurora .chip-delete:after,
.ios .chip-delete:after,
.md .chip-delete:after {
  font-size: 10px;
}

/*
|------------------------------------------------------------------------------
| Color Picker
|------------------------------------------------------------------------------
*/

.color-picker-page .color-picker-module,
.color-picker-popup .color-picker-module,
.color-picker-sheet-modal .color-picker-module {
  padding-left: env(safe-area-inset-left);
  padding-left: var(--f7-safe-area-left);
  padding-right: env(safe-area-inset-right);
  padding-right: var(--f7-safe-area-right);
}

/*
|------------------------------------------------------------------------------
| Content Block
|------------------------------------------------------------------------------
*/

:root {
  --f7-block-header-font-size: 15px;
  --f7-block-footer-font-size: 15px;
}

.aurora,
.ios,
.md {
  --f7-block-title-font-size: 18px;
  --f7-block-title-font-weight: bold;
  --f7-block-title-line-height: 1.5;
  --f7-block-margin-vertical: 32px;
  --f7-block-title-margin-bottom: 10px;
  --f7-block-title-text-color: #000000;
  --f7-block-title-white-space: normal;
  --f7-block-title-medium-font-size: 22px;
  --f7-block-title-medium-font-weight: bold;
  --f7-block-title-medium-line-height: 1.4;
  --f7-block-title-large-font-size: 30px;
  --f7-block-title-large-font-weight: bold;
  --f7-block-title-large-line-height: 1.4;
}

.block-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: unset;
}

/*
|------------------------------------------------------------------------------
| Data Table
|------------------------------------------------------------------------------
*/

:root {
  --f7-table-card-header-height: var(--f7-table-body-cell-height);
}

.aurora,
.ios,
.md {
  --f7-table-head-bg-color: #f6f6f7;
  --f7-table-head-font-size: 13px;
  --f7-table-card-header-bg-color: #f6f6f7;
  --f7-table-title-font-size: 18px;
  --f7-table-title-font-weight: bold;
  --f7-table-cell-padding-horizontal: 16px;
  --f7-table-edge-cell-padding-horizontal: 16px;
  --f7-table-label-cell-padding-horizontal: 16px;
}

.aurora .dark,
.aurora.dark,
.ios .dark,
.ios.dark,
.md .dark,
.md.dark {
  --f7-table-head-bg-color: var(--color-gray-900);
  --f7-table-card-header-bg-color: var(--color-gray-900);
}

.data-table tbody th {
  background-color: var(--f7-table-head-bg-color);
  font-size: var(--f7-table-head-font-size);
  font-weight: var(--f7-table-head-font-weight);
  height: var(--f7-table-head-cell-height);
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[dir="rtl"] .data-table .data-table-footer {
  justify-content: flex-end;
}

@media (max-width: 480px) and (orientation: portrait) {
  .data-table.data-table-collapsible tr:first-child:before {
    display: none;
  }
}

.data-table-fixed-header thead th,
.data-table-fixed-first-column thead th {
  position: sticky;
  top: 0;
  z-index: 100;
}

.data-table-fixed-first-column thead th:first-child {
  z-index: 110;
}

.data-table-fixed-first-column tbody th {
  z-index: 100;
}

.data-table-fixed-first-column tbody th {
  color: var(--f7-table-head-text-color);
}

.data-table-fixed-first-column tbody th,
.data-table-fixed-first-column thead th:first-child {
  height: var(--f7-table-body-cell-height);
  left: 0;
  position: sticky;
  right: auto;
}

[dir="rtl"]:not(.ios) .data-table-fixed-first-column tbody th,
[dir="rtl"]:not(.ios) .data-table-fixed-first-column thead th:first-child {
  left: auto;
  position: sticky;
  right: 0;
}

/*
|------------------------------------------------------------------------------
| Date-Time Picker
|------------------------------------------------------------------------------
*/

[dir="rtl"] .calendar-day-selected-left:before,
[dir="rtl"] .calendar-day-selected-range:first-child:before {
  border-radius: 0 var(--f7-calendar-day-size) var(--f7-calendar-day-size) 0;
  left: 0;
  right: auto;
}

[dir="rtl"] .calendar-day-selected-right:before,
[dir="rtl"] .calendar-day-selected-range:last-child:before {
  border-radius: var(--f7-calendar-day-size) 0 0 var(--f7-calendar-day-size);
  left: auto;
  right: 0;
}

.calendar {
  --f7-bars-bg-color: transparent;
}

.aurora .calendar,
.ios .calendar,
.md .calendar {
  --f7-toolbar-font-size: 16px;
}

.calendar-inline .toolbar-top {
  top: 0;
}

.calendar .toolbar-top:after {
  display: none;
}

.calendar-footer:before {
  display: none;
}

.calendar-year-picker {
  overflow: unset;
}

/*
|------------------------------------------------------------------------------
| Dialog
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-dialog-font-size: 14px;
  --f7-dialog-inner-padding: 16px;
  --f7-dialog-title-font-size: 18px;
  --f7-dialog-title-font-weight: 600;
  --f7-dialog-title-line-height: inherit;
  --f7-dialog-input-font-size: var(--f7-input-font-size);
}

.md {
  --f7-dialog-text-color: rgba(0, 0, 0, 0.87);
}

.dialog-inner {
  max-height: 75vh;
  overflow-y: auto;
}

.ios .dialog-inner:after {
  content: none;
}

.aurora .dialog-title + .dialog-text,
.ios .dialog-title + .dialog-text,
.md .dialog-title + .dialog-text {
  margin-top: 12px;
}

.aurora .dialog-buttons {
  padding: 12px var(--f7-dialog-inner-padding);
}

.ios .dialog-buttons:before {
  background-color: var(--f7-dialog-border-divider-color);
  bottom: auto;
  content: "";
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  right: auto;
  top: 0;
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  transform-origin: 50% 100%;
  width: 100%;
  z-index: 15;
}

.md .dialog-buttons-vertical .dialog-button + .dialog-button {
  margin-left: 0;
  margin-right: 0;
}

.md .dialog-button {
  min-width: auto;
}

.dialog .list ul {
  --f7-list-bg-color: transparent;
}

/*
|------------------------------------------------------------------------------
| Dropcap
|------------------------------------------------------------------------------
*/

.dropcap:first-letter {
  color: var(--f7-text-color);
  float: left;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 5em;
  font-weight: bold;
  line-height: 0.83;
  margin-right: 0.125em;
  text-transform: uppercase;
}

.dropcap[class*="color-"]:first-letter {
  color: var(--f7-theme-color);
}

.aurora .dropcap:first-letter,
.md .dropcap:first-letter {
  margin-top: 0.05em;
}

.dropcap.dropcap-fill:first-letter {
  background-color: var(--f7-color-mono);
  color: var(--f7-color-mono-invert);
  font-size: 4.25em;
  padding: 0.22em;
}

.dropcap.dropcap-fill[class*="color-"]:first-letter {
  background-color: var(--f7-theme-color);
  color: #ffffff;
}

.dropcap.dropcap-outline:first-letter {
  border: 2px solid var(--f7-text-color);
  border-radius: 4px;
  font-size: 4.25em;
  padding: 0.2em;
}

.dropcap.dropcap-outline[class*="color-"]:first-letter {
  border-color: var(--f7-theme-color);
}

.dropcap.dropcap-fill:first-letter,
.dropcap.dropcap-outline:first-letter {
  margin-top: 0.1em;
}

.ios .dropcap.dropcap-fill:first-letter,
.ios .dropcap.dropcap-outline:first-letter {
  line-height: 0.75;
}

[dir="rtl"] .dropcap:first-letter,
[dir="rtl"] .dropcap[class*="color-"]:first-letter {
  background-color: unset;
  border: unset;
  border-radius: unset;
  color: unset;
  float: unset;
  font-family: unset;
  font-size: unset;
  font-weight: unset;
  line-height: unset;
  margin: unset;
  padding: unset;
  text-transform: unset;
}

/*
|------------------------------------------------------------------------------
| Elevation
|------------------------------------------------------------------------------
*/

[class*="elevation-"][class*="color-"] {
  --f7-elevation-0: 0px 0px 0px 0px rgba(var(--f7-theme-color-rgb), 0);
  --f7-elevation-1: 0px 2px 1px -1px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 1px 1px 0px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 1px 3px 0px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-2: 0px 3px 1px -2px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 2px 2px 0px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 1px 5px 0px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-3: 0px 3px 3px -2px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 3px 4px 0px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 1px 8px 0px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-4: 0px 2px 4px -1px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 4px 5px 0px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 1px 10px 0px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-5: 0px 3px 5px -1px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 5px 8px 0px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 1px 14px 0px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-6: 0px 3px 5px -1px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 6px 10px 0px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 1px 18px 0px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-7: 0px 4px 5px -2px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 7px 10px 1px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 2px 16px 1px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-8: 0px 5px 5px -3px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 8px 10px 1px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 3px 14px 2px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-9: 0px 5px 6px -3px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 9px 12px 1px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 3px 16px 2px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-10: 0px 6px 6px -3px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 10px 14px 1px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 4px 18px 3px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-11: 0px 6px 7px -4px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 11px 15px 1px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 4px 20px 3px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-12: 0px 7px 8px -4px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 12px 17px 2px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 5px 22px 4px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-13: 0px 7px 8px -4px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 13px 19px 2px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 5px 24px 4px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-14: 0px 7px 9px -4px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 14px 21px 2px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 5px 26px 4px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-15: 0px 8px 9px -5px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 15px 22px 2px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 6px 28px 5px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-16: 0px 8px 10px -5px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 16px 24px 2px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 6px 30px 5px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-17: 0px 8px 11px -5px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 17px 26px 2px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 6px 32px 5px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-18: 0px 9px 11px -5px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 18px 28px 2px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 7px 34px 6px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-19: 0px 9px 12px -6px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 19px 29px 2px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 7px 36px 6px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-20: 0px 10px 13px -6px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 20px 31px 3px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 8px 38px 7px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-21: 0px 10px 13px -6px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 21px 33px 3px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 8px 40px 7px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-22: 0px 10px 14px -6px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 22px 35px 3px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 8px 42px 7px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-23: 0px 11px 14px -7px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 23px 36px 3px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 9px 44px 8px rgba(var(--f7-theme-color-rgb), 0.12);
  --f7-elevation-24: 0px 11px 15px -7px rgba(var(--f7-theme-color-rgb), 0.2),
    0px 24px 38px 3px rgba(var(--f7-theme-color-rgb), 0.14),
    0px 9px 46px 8px rgba(var(--f7-theme-color-rgb), 0.12);
}

.no-shadow {
  box-shadow: none !important;
}

/*
|------------------------------------------------------------------------------
| Empty State
|------------------------------------------------------------------------------
*/

.empty-state {
  align-items: center;
  box-sizing: border-box;
  color: inherit;
  display: flex;
  flex-direction: column;
  font-size: inherit;
  justify-content: center;
  margin: var(--f7-typography-margin) 0;
  padding-bottom: 0;
  padding-left: calc(
    var(--f7-block-padding-horizontal) + env(safe-area-inset-left)
  );
  padding-left: calc(
    var(--f7-block-padding-horizontal) + var(--f7-safe-area-left)
  );
  padding-right: calc(
    var(--f7-block-padding-horizontal) + env(safe-area-inset-right)
  );
  padding-right: calc(
    var(--f7-block-padding-horizontal) + var(--f7-safe-area-right)
  );
  padding-top: 0;
  position: relative;
  text-align: center;
  z-index: 1;
}

.empty-state-strong {
  background-color: var(--f7-block-strong-bg-color);
  color: var(--f7-block-strong-text-color);
  padding-bottom: var(--f7-block-padding-vertical);
  padding-top: var(--f7-block-padding-vertical);
}

.empty-state.inset {
  border-radius: var(--f7-block-inset-border-radius);
  margin-left: calc(
    var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left)
  );
  margin-right: calc(
    var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right)
  );
  --f7-safe-area-left: 0px;
  --f7-safe-area-right: 0px;
}

.page-content > .empty-state {
  padding-bottom: var(--f7-block-padding-vertical);
  padding-top: var(--f7-block-padding-vertical);
}

.page-content > .empty-state:not(.inset) {
  height: 100%;
  margin-bottom: 0;
  margin-top: 0;
}

.page-content > .empty-state.inset {
  min-height: calc(100% - var(--f7-typography-margin) * 2);
}

.empty-state > :first-child {
  margin-top: 0;
}

.empty-state > :last-child {
  margin-bottom: 0;
}

.empty-state-media {
  margin-top: calc(var(--f7-typography-margin) / 2);
}

.empty-state-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.3;
  margin-top: calc(var(--f7-typography-margin) / 1);
}

.empty-state-subtitle {
  margin-top: calc(var(--f7-typography-margin) / 2);
}

.empty-state-text {
  color: var(--f7-block-header-text-color);
  margin-top: calc(var(--f7-typography-margin) / 2);
}

.empty-state-actions {
  display: flex;
  margin-top: calc(var(--f7-typography-margin) / 1);
}

.empty-state-actions.actions-vertical {
  flex-direction: column;
}

.empty-state-action {
  min-width: 144px;
  width: auto;
}

.empty-state-actions.actions-vertical
  .empty-state-action
  + .empty-state-action {
  margin-top: 8px;
}

.empty-state-actions:not(.actions-vertical)
  .empty-state-action
  + .empty-state-action {
  margin-left: 8px;
  margin-right: 0;
}

[dir="rtl"]
  .empty-state-actions:not(.actions-vertical)
  .empty-state-action
  + .empty-state-action {
  margin-left: 0;
  margin-right: 8px;
}

/*
|------------------------------------------------------------------------------
| Expandable Card
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-card-expandable-border-radius: var(--f7-card-border-radius);
  --f7-card-expandable-box-shadow: none;
  --f7-card-expandable-margin-horizontal: var(--f7-card-margin-horizontal);
  --f7-card-expandable-margin-vertical: var(--f7-card-margin-vertical);
  --f7-card-expandable-tablet-border-radius: var(--f7-card-border-radius);
  --f7-card-expandable-tablet-height: 568px;
  --f7-card-expandable-tablet-width: 568px;
}

.card-expandable {
  height: 304px;
}

.card-expandable:not(.card-opened) {
  cursor: pointer;
}

.card-expandable .card-expandable-inner {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  height: 304px;
  justify-content: flex-start;
  min-height: 304px;
  position: relative;
}

.card-expandable.card-opened .card-expandable-inner {
  height: auto;
}

.card-expandable .card-close-link .icon {
  font-size: 32px;
}

/*
|------------------------------------------------------------------------------
| Flip Card
|------------------------------------------------------------------------------
*/

.flip-card {
  background: transparent;
  border-radius: var(--f7-card-border-radius);
  box-shadow: none;
  box-sizing: border-box;
  font-size: var(--f7-card-font-size);
  margin-bottom: var(--f7-card-margin-vertical);
  margin-left: calc(
    var(--f7-card-margin-horizontal) + env(safe-area-inset-left)
  );
  margin-left: calc(
    var(--f7-card-margin-horizontal) + var(--f7-safe-area-left)
  );
  margin-right: calc(
    var(--f7-card-margin-horizontal) + env(safe-area-inset-right)
  );
  margin-right: calc(
    var(--f7-card-margin-horizontal) + var(--f7-safe-area-right)
  );
  margin-top: var(--f7-card-margin-vertical);
  min-height: 256px;
  overflow: hidden;
  perspective: 1000px;
  position: relative;
}

.flip-card-inner {
  border-radius: inherit;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.75s;
  width: 100%;
}

.flip-card-flipped .flip-card-inner {
  transform: rotateY(-180deg);
}

[dir="rtl"] .flip-card-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-inner .flip-card-front,
.flip-card-inner .flip-card-back {
  align-items: flex-start;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: var(--f7-card-bg-color);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  overflow-y: auto;
  position: absolute;
  width: 100%;
}

.flip-card-inner .flip-card-back {
  transform: rotateY(180deg) translateZ(1px);
}

.flip-card-content {
  box-sizing: border-box;
  padding: var(--f7-card-content-padding-vertical)
    var(--f7-card-content-padding-horizontal);
  position: relative;
  z-index: 10;
}

/*
|------------------------------------------------------------------------------
| Floating Action Button
|------------------------------------------------------------------------------
*/

:root {
  --f7-fab-label-font-size: 14px;
}

.aurora,
.ios,
.md {
  --f7-fab-extended-text-font-weight: 600;
  --f7-fab-extended-text-letter-spacing: 0.05em;
}

.fab:not(.fa-brands) {
  font-family: var(--f7-font-family);
}

.fab-label-button > span:not(.fab-label) {
  overflow: hidden;
  white-space: nowrap;
}

.fab-label {
  max-width: 192px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fab-center-top .fab-buttons-bottom .fab-label,
.fab-center-top .fab-buttons-top .fab-label,
.fab-center-center .fab-buttons-bottom .fab-label,
.fab-center-center .fab-buttons-top .fab-label,
.fab-center-bottom .fab-buttons-bottom .fab-label,
.fab-center-bottom .fab-buttons-top .fab-label {
  left: 125%;
}

[dir="rtl"] .fab-center-top .fab-buttons-bottom .fab-label,
[dir="rtl"] .fab-center-top .fab-buttons-top .fab-label,
[dir="rtl"] .fab-center-center .fab-buttons-bottom .fab-label,
[dir="rtl"] .fab-center-center .fab-buttons-top .fab-label,
[dir="rtl"] .fab-center-bottom .fab-buttons-bottom .fab-label,
[dir="rtl"] .fab-center-bottom .fab-buttons-top .fab-label {
  left: auto;
  right: 125%;
}

.fab-buttons-left a:nth-child(even) .fab-label,
.fab-buttons-right a:nth-child(even) .fab-label,
.fab-buttons-left a:nth-child(even) .fab-label,
.fab-buttons-right a:nth-child(even) .fab-label,
.fab-buttons-left a:nth-child(even) .fab-label,
.fab-buttons-right a:nth-child(even) .fab-label {
  top: 150%;
}

.fab-buttons-left a:nth-child(odd) .fab-label,
.fab-buttons-right a:nth-child(odd) .fab-label,
.fab-buttons-left a:nth-child(odd) .fab-label,
.fab-buttons-right a:nth-child(odd) .fab-label,
.fab-buttons-left a:nth-child(odd) .fab-label,
.fab-buttons-right a:nth-child(odd) .fab-label {
  top: -50%;
}

.fab-buttons-left .fab-label,
.fab-buttons-right .fab-label {
  left: auto;
  margin-left: 0;
  margin-right: 0;
  right: auto;
}

.fab-center-center .fab-buttons-center a:nth-child(1) .fab-label {
  top: -50%;
}

.fab-center-center .fab-buttons-center a:nth-child(2) .fab-label {
  left: 125%;
}

.fab-center-center .fab-buttons-center a:nth-child(3) .fab-label {
  top: 150%;
}

.fab-center-center .fab-buttons-center a:nth-child(4) .fab-label {
  right: 125%;
}

/*
|------------------------------------------------------------------------------
| Form Input
|------------------------------------------------------------------------------
*/

:root {
  --f7-input-fill-bg-color: rgba(var(--f7-color-gray-rgb), 0.25);
}

.aurora,
.ios,
.md {
  --f7-input-font-size: 14px;
  --f7-inline-label-font-size: 14px;
  --f7-floating-label-scale: calc(14 / 12);
  --f7-textarea-padding-vertical: 8px;
}

.ios {
  --f7-label-focused-text-color: var(--f7-theme-color);
  --f7-label-invalid-text-color: var(--f7-input-error-text-color);
  --f7-input-focused-border-color: var(--f7-theme-color);
  --f7-input-invalid-border-color: var(--f7-input-error-text-color);
}

.aurora .item-input .item-media,
.ios .item-input .item-media,
.md .item-input .item-media {
  color: var(--f7-color-gray);
}

.ios .input-focused:not(.input-outline):after,
.ios .input-invalid:not(.input-outline):after,
.ios .item-input-focused:not(.item-input-outline) .item-inner:after,
.ios .item-input-invalid:not(.item-input-outline) .item-inner:after {
  transform: scaleY(2) !important;
}

.list .item-floating-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-input-wrap {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.item-input-wrap > * + * {
  margin-left: 8px !important;
  margin-right: 0 !important;
}

[dir="rtl"] .item-input-wrap > * + * {
  margin-left: 0 !important;
  margin-right: 8px !important;
}

.item-input-wrap input,
.item-input-wrap select,
.item-input-wrap textarea {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.item-input-wrap > textarea ~ * {
  align-self: flex-start;
  margin-top: 8px;
}

.item-input-wrap .input-clear-button {
  bottom: unset;
  left: unset;
  margin-top: unset;
  position: relative;
  right: unset;
  top: unset;
}

.item-input-wrap .input-clear-button .ripple-wave {
  position: absolute;
}

.item-input-wrap > textarea ~ .input-clear-button {
  margin-top: calc(var(--f7-textarea-padding-vertical) * 1.375);
}

.input-outline .item-input-wrap,
.input-outline .item-input-wrap,
.input-outline .item-input-wrap,
.item-input-outline .item-input-wrap,
.item-input-outline .item-input-wrap,
.item-input-outline .item-input-wrap,
.list .item-input-outline .item-input-wrap,
.list .item-input-outline .item-input-wrap,
.list .item-input-outline .item-input-wrap {
  padding-left: var(--f7-input-outline-padding-horizontal);
  padding-right: var(--f7-input-outline-padding-horizontal);
}

.item-input-outline.item-input-fill .item-input-wrap:after {
  background-color: var(--f7-input-fill-bg-color);
  border: none;
}

.item-input-outline.item-input-round .item-input-wrap:after {
  border-radius: var(--f7-input-height);
}

.input-outline input,
.input-outline select,
.input-outline textarea,
.item-input-outline input,
.item-input-outline select,
.item-input-outline textarea,
.list .item-input-outline input,
.list .item-input-outline select,
.list .item-input-outline textarea {
  --f7-input-outline-padding-horizontal: 0px;
}

.item-input-wrap .input-info,
.item-input-wrap .item-input-info,
.item-input-wrap .input-error-message,
.item-input-wrap .item-input-error-message {
  display: flex;
  flex-basis: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  order: 99;
}

.item-input-outline .item-input-info,
.item-input-outline .item-input-error-message {
  left: unset;
  padding-left: 0;
  padding-right: 0;
  right: unset;
}

.aurora .input-outline .input-info,
.aurora .input-outline .item-input-info,
.aurora .item-input-outline .input-info,
.aurora .item-input-outline .item-input-info,
.ios .input-outline .input-info,
.ios .input-outline .item-input-info,
.ios .item-input-outline .input-info,
.ios .item-input-outline .item-input-info {
  margin-bottom: calc(
    -1.25 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height)
  );
}

.aurora .input-outline .input-error-message,
.aurora .input-outline .item-input-error-message,
.aurora .item-input-outline .input-error-message,
.aurora .item-input-outline .item-input-error-message,
.ios .input-outline .input-error-message,
.ios .input-outline .item-input-error-message,
.ios .item-input-outline .input-error-message,
.ios .item-input-outline .item-input-error-message {
  margin-bottom: calc(
    -1.25 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height)
  );
}

.aurora .input-outline .input-info,
.aurora .input-outline .input-error-message,
.aurora .input-outline .item-input-info,
.aurora .input-outline .item-input-error-message,
.aurora .item-input-outline .input-info,
.aurora .item-input-outline .input-error-message,
.aurora .item-input-outline .item-input-info,
.aurora .item-input-outline .item-input-error-message,
.ios .input-outline .input-info,
.ios .input-outline .input-error-message,
.ios .input-outline .item-input-info,
.ios .input-outline .item-input-error-message,
.ios .item-input-outline .input-info,
.ios .item-input-outline .input-error-message,
.ios .item-input-outline .item-input-info,
.ios .item-input-outline .item-input-error-message {
  white-space: nowrap;
}

.item-input-wrap :not(.input-invalid) ~ .input-error-message,
.item-input-wrap :not(.input-invalid) ~ .item-input-error-message {
  display: none;
}

.button-file {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.button-file [type="file"] {
  cursor: pointer;
  opacity: 0;
  position: absolute;
}

.button-file [type="file"]:valid ~ .file-status-icon .status-invalid {
  display: none;
}

.button-file [type="file"]:invalid ~ .file-status-icon .status-valid {
  display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--f7-input-text-color) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/*
|------------------------------------------------------------------------------
| Form Validator
|------------------------------------------------------------------------------
*/

:root {
  --f7-input-error-text-color: var(--f7-color-red);
}

/*
|------------------------------------------------------------------------------
| Gauge
|------------------------------------------------------------------------------
*/

.gauge {
  position: relative;
}

/*
|------------------------------------------------------------------------------
| Grid
|------------------------------------------------------------------------------
*/

[dir="rtl"] .col > .resize-handler,
[dir="rtl"] [class*="col-"] > .resize-handler {
  left: auto;
  right: 100%;
}

@media (max-width: 479.98px) {
  .xsmall-show {
    display: none !important;
  }
}

@media (min-width: 480px) {
  .xsmall-hide {
    display: none !important;
  }
}

@media (max-width: 567.98px) {
  .small-show {
    display: none !important;
  }
}

@media (min-width: 568px) {
  .small-hide {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .medium-show {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .medium-hide {
    display: none !important;
  }
}

@media (max-width: 1023.98px) {
  .large-show {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .large-hide {
    display: none !important;
  }
}

@media (max-width: 1199.98px) {
  .xlarge-show {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .xlarge-hide {
    display: none !important;
  }
}

/*
|------------------------------------------------------------------------------
| Icon
|------------------------------------------------------------------------------
*/

.aurora .f7-icons,
.ios .f7-icons,
.md .f7-icons,
.aurora .material-icons,
.ios .material-icons,
.md .material-icons {
  font-size: 24px;
}

.fa-stack {
  width: 2em;
}

/*
|------------------------------------------------------------------------------
| Image
|------------------------------------------------------------------------------
*/

:root {
  --f7-avatar-group-avatar-size: 48px;
  --f7-avatar-group-space-multiplier: -2.5;
}

img {
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  vertical-align: bottom;
}

.avatar {
  background-image: linear-gradient(
    to bottom right,
    var(--f7-theme-color-shade),
    var(--f7-theme-color),
    var(--f7-theme-color-tint)
  );
  box-sizing: border-box;
  padding: 3.5px;
}

.avatar-group {
  align-items: center;
  display: flex;
  justify-content: flex-start;
}

.avatar-group .avatar,
.avatar-group .avatar-count {
  align-items: center;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  height: 48px;
  height: var(--f7-avatar-group-avatar-size);
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 48px;
  width: var(--f7-avatar-group-avatar-size);
}

.avatar-group-hover .avatar:hover {
  z-index: 10;
}

.avatar-group .avatar img {
  border-radius: 50%;
}

.avatar-group .avatar-count {
  background-color: var(--color-gray-800);
  border-radius: 48px;
  border-radius: var(--f7-avatar-group-avatar-size);
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  min-width: 48px;
  min-width: var(--f7-avatar-group-avatar-size);
  padding: 0 8px;
  width: auto;
}

.avatar-group .avatar-count * {
  color: #ffffff;
}

.avatar-group .avatar:not(:first-child),
.avatar-group .avatar-count:not(:first-child) {
  margin-left: calc(
    48px / -2.5
  );
  margin-left: calc(
    var(--f7-avatar-group-avatar-size) / var(--f7-avatar-group-space-multiplier)
  );
  margin-right: 0;
}

[dir="rtl"] .avatar-group .avatar:not(:first-child),
[dir="rtl"] .avatar-group .avatar-count:not(:first-child) {
  margin-left: 0;
  margin-right: calc(
    48px / -2.5
  );
  margin-right: calc(
    var(--f7-avatar-group-avatar-size) / var(--f7-avatar-group-space-multiplier)
  );
}

.bg-cover {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.no-object-fit {
  object-fit: unset;
}

/*
|------------------------------------------------------------------------------
| Image Compare
|------------------------------------------------------------------------------
*/

div.juxtapose {
  font-family: var(--f7-font-family);
  width: 100% !important;
}

div.juxtapose a.jx-knightlab {
  display: none;
}

div.juxtapose div.jx-credit {
  color: var(--f7-color-gray-shade);
  font-size: 10px;
  letter-spacing: 0.375px;
  line-height: inherit;
}

.dark div.juxtapose div.jx-credit {
  color: var(--f7-color-gray-tint);
}

div.juxtapose div.jx-credit em {
  color: var(--f7-text-color);
  font-weight: 600;
}

/*
|------------------------------------------------------------------------------
| Image Hotspot
|------------------------------------------------------------------------------
*/

.hotspots {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
}

.hotspot-image {
  display: block;
  height: 100%;
  object-fit: scale-down;
  width: 100%;
}

.hotspot-point {
  animation: hotspot 600ms linear infinite alternate;
  border-radius: 50%;
  box-shadow: inset 0 0 6px 4px rgba(var(--f7-theme-color-rgb), 0.6);
  height: 32px;
  position: absolute;
  width: 32px;
}

.hotspot-point:before {
  background-color: rgba(var(--f7-theme-color-rgb), 0.8);
  border: 2px solid var(--f7-theme-color);
  border-radius: 50%;
  content: "";
  display: block;
  height: 16px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
}

@keyframes hotspot {
  from {
    box-shadow: inset 0 0 12px 6px rgba(var(--f7-theme-color-rgb), 0.6);
  }
  to {
    box-shadow: inset 0 0 4px 2px rgba(var(--f7-theme-color-rgb), 0.4);
  }
}

/*
|------------------------------------------------------------------------------
| Infinite Scroll
|------------------------------------------------------------------------------
*/

.infinite-scroll-preloader.preloader {
  display: block;
}

/*
|------------------------------------------------------------------------------
| Integrations
|------------------------------------------------------------------------------
*/

.disqus-thread {
  background-color: #ffffff;
  border-radius: var(--f7-block-inset-border-radius);
  padding: calc(var(--f7-typography-padding) / 4) var(--f7-typography-padding);
}

.embedly-card {
  background-color: #ffffff;
  border-radius: var(--f7-block-inset-border-radius);
  padding: calc(var(--f7-typography-padding) / 4) var(--f7-typography-padding);
}

.fb-comments {
  background-color: #ffffff;
  border-radius: var(--f7-block-inset-border-radius);
  box-sizing: border-box;
  padding: calc(var(--f7-typography-padding) / 2);
}

iframe[id*="comments-app-"] {
  border-radius: var(--f7-block-inset-border-radius);
}

.pac-container {
  background-color: var(--f7-list-bg-color);
  border-radius: var(--f7-list-inset-border-radius);
  border-top: none;
  font-family: var(--f7-font-family);
  z-index: 9999;
}

.pac-item {
  border-top: none;
  color: var(--f7-list-item-text-text-color);
  cursor: pointer;
  font-size: 12px;
}

.pac-item:hover {
  background-color: var(--f7-list-link-pressed-bg-color);
}

.pac-item-query {
  color: var(--f7-text-color);
  font-size: 14px;
}

.pac-matched {
  font-weight: bold;
}

.pac-logo:after {
  margin: 4px 8px;
  padding: 0;
}

/*
|------------------------------------------------------------------------------
| Keypad
|------------------------------------------------------------------------------
*/

:root {
  --f7-keypad-inline-height: 210px;
  --f7-keypad-landscape-height: 260px;
  --f7-keypad-bg-color: #ced4dc;
  --f7-keypad-button-bg-color: #ffffff;
  --f7-keypad-button-pressed-bg-color: #adbbca;
  --f7-keypad-button-dark-bg-color: transparent;
  --f7-keypad-button-dark-pressed-bg-color: var(
    --f7-keypad-button-pressed-bg-color
  );
  --f7-keypad-button-number-font-size: 22px;
  --f7-keypad-button-letters-font-size: 10px;
  --f7-keypad-button-spacing: 4px;
}

:root .dark,
:root.dark {
  --f7-keypad-bg-color: #292930;
  --f7-keypad-button-bg-color: #6a6e71;
  --f7-keypad-button-pressed-bg-color: #464646;
  --f7-keypad-button-text-color: #ffffff;
}

.keypad {
  background-color: #ced4dc;
  background-color: var(--f7-keypad-bg-color);
}

.keypad-buttons {
  padding: 4px;
  padding: var(--f7-keypad-button-spacing);
}

.keypad-button {
  border-radius: 6px;
  height: calc(25% - calc(4px * 2));
  height: calc(25% - calc(var(--f7-keypad-button-spacing) * 2));
  margin: 4px;
  margin: var(--f7-keypad-button-spacing);
  width: calc(calc(100% / 3) - calc(4px * 2));
  width: calc(calc(100% / 3) - calc(var(--f7-keypad-button-spacing) * 2));
}

.keypad-button:before,
.keypad-button:after {
  content: none;
}

.keypad-button-letters {
  font-weight: 600;
  height: 16px;
  letter-spacing: 1px;
  line-height: 16px;
}

.dark i.icon-keypad-delete {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'><path d='M18,0h-8C8.9,0,7.9,0.5,7.1,1.2c0,0,0,0,0,0L1,7.2C0.6,7.7,0.6,8.4,1,8.8l4.9,4.7L7,14.6c0,0,0,0,0,0c0.7,0.9,1.8,1.4,3,1.4 h8c2.2,0,4-1.8,4-4V4C22,1.8,20.2,0,18,0z M17.3,11.2l-0.7,0.7l-3.2-3.2l-3.2,3.2l-0.7-0.7L12.8,8L9.6,4.8l0.7-0.7l3.2,3.2l3.2-3.2 l0.7,0.7L14.2,8L17.3,11.2z' fill='%23FFFFFF'/></svg>");
}

[dir="rtl"] i.icon-keypad-delete {
  transform: scaleX(-1);
}

.keypad-inline {
  --f7-keypad-bg-color: transparent;
}

.keypad-inline .keypad-buttons {
  height: calc(
    210px - calc(4px * 2)
  );
  height: calc(
    var(--f7-keypad-inline-height) - calc(var(--f7-keypad-button-spacing) * 2)
  );
}

.keypad-popover .popover-angle.on-bottom:after {
  background: #ced4dc;
  background: var(--f7-keypad-bg-color);
}

.keypad-popover .popover-angle.on-top:after {
  background: #ffffff;
  background: var(--f7-bars-bg-color);
}

.keypad-popover .toolbar {
  border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius)
    0 0;
}

.ios .keypad-popover .toolbar {
  background-color: #ffffff;
  background-color: var(--f7-bars-bg-color);
}

.keypad-popover .keypad {
  border-radius: var(--f7-popover-border-radius);
  overflow: hidden;
  position: relative;
}

@media (orientation: landscape) and (max-height: 415px) {
  .keypad-sheet {
    height: calc(
      env(safe-area-inset-bottom) + 260px
    );
    height: calc(
      var(--f7-safe-area-bottom) + var(--f7-keypad-landscape-height)
    );
  }
}

.keypad-inline .toolbar ~ .keypad-buttons,
.keypad-popover .keypad .toolbar ~ .keypad-buttons,
.keypad-sheet .toolbar ~ .keypad-buttons {
  height: calc(
    100% - var(--f7-toolbar-height) - calc(4px * 2)
  );
  height: calc(
    100% - var(--f7-toolbar-height) - calc(var(--f7-keypad-button-spacing) * 2)
  );
}

.keypad-inline .keypad-buttons,
.keypad-sheet .keypad-buttons {
  padding-left: calc(
    4px + env(safe-area-inset-left)
  );
  padding-left: calc(
    var(--f7-keypad-button-spacing) + var(--f7-safe-area-left)
  );
  padding-right: calc(
    4px + env(safe-area-inset-right)
  );
  padding-right: calc(
    var(--f7-keypad-button-spacing) + var(--f7-safe-area-right)
  );
}

.keypad-type-custom .keypad-buttons {
  overflow-y: auto;
}

.keypad-type-calculator {
  --f7-keypad-button-dark-bg-color: var(--color-gray-300);
  --f7-keypad-button-dark-pressed-bg-color: var(--color-gray-400);
}

.keypad-type-calculator .keypad-button.keypad-button-dark {
  color: #000000;
}

.keypad-type-calculator .keypad-button {
  height: calc(20% - calc(4px * 2));
  height: calc(20% - calc(var(--f7-keypad-button-spacing) * 2));
  width: calc(calc(100% / 4) - calc(4px * 2));
  width: calc(calc(100% / 4) - calc(var(--f7-keypad-button-spacing) * 2));
}

.keypad-type-calculator .keypad-button.keypad-button-double {
  width: calc(50% - calc(4px * 2));
  width: calc(50% - calc(var(--f7-keypad-button-spacing) * 2));
}

.keypad-button.calc-operator-button.calc-operator-active {
  background-color: #ffffff;
  border: none;
  color: var(--f7-keypad-calc-button-bg-color);
}

/*
|------------------------------------------------------------------------------
| Line Divider
|------------------------------------------------------------------------------
*/

.line-divider {
  align-items: center;
  border: none;
  color: var(--f7-color-gray);
  display: flex;
  flex-direction: row;
  font-size: 14px;
  justify-content: center;
  text-align: center;
}

.line-divider[class*="color-"] {
  color: var(--f7-theme-color);
}

.line-divider:before,
.line-divider:after {
  border-top-color: var(--f7-list-border-color);
  border-top-style: solid;
  border-top-width: 1px;
  content: "";
  flex-grow: 1;
  margin: 0.75em 0;
  position: relative;
}

.line-divider.line-dashed:before,
.line-divider.line-dashed:after {
  border-top-style: dashed;
}

.line-divider.line-dotted:before,
.line-divider.line-dotted:after {
  border-top-style: dotted;
}

.line-divider[class*="color-"]:before,
.line-divider[class*="color-"]:after {
  border-top-color: var(--f7-theme-color);
}

.line-divider > * {
  margin: 0 var(--f7-typography-margin);
}

/*
|------------------------------------------------------------------------------
| Link
|------------------------------------------------------------------------------
*/

.link-button {
  border-radius: var(--f7-button-border-radius);
  overflow: hidden;
  padding: 0 4px;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

/*
|------------------------------------------------------------------------------
| List Index
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-list-index-font-size: 11px;
  --f7-list-index-skip-dot-size: 4px;
}

[dir="rtl"] .list-index:before {
  left: 100%;
  right: auto;
}

[dir="rtl"] .list-index .list-index-label {
  left: 100%;
  right: auto;
}

[dir="rtl"].aurora .list-index .list-index-label {
  margin-left: calc(var(--f7-list-index-width) - 4px);
  margin-right: 0;
}

[dir="rtl"].ios .list-index .list-index-label {
  margin-left: calc(var(--f7-list-index-width) - 2px);
  margin-right: 0;
}

[dir="rtl"].md .list-index .list-index-label {
  border-radius: 50% 50% 50% 0;
}

[dir="rtl"].aurora .list-index .list-index-label:before {
  border-radius: 50% 50% 50% 1px;
}

[dir="rtl"].ios .list-index .list-index-label:before {
  border-radius: 50% 50% 50% 0;
}

/*
|------------------------------------------------------------------------------
| List View
|------------------------------------------------------------------------------
*/

:root {
  --f7-list-item-title-white-space: normal;
  --f7-list-item-text-max-lines: unset;
}

.aurora,
.ios,
.md {
  --f7-list-font-size: var(--f7-font-size);
  --f7-list-item-after-font-size: 14px;
  --f7-list-item-subtitle-font-size: 14px;
  --f7-list-item-text-font-size: 14px;
  --f7-list-media-item-padding-vertical: 16px;
  --f7-list-media-item-title-font-weight: 600;
  --f7-list-group-title-font-size: inherit;
  --f7-list-group-title-font-weight: normal;
  --f7-list-group-title-height: var(--f7-list-item-min-height);
  --f7-list-item-divider-border-color: transparent;
  --f7-list-item-divider-font-size: inherit;
  --f7-list-item-divider-font-weight: normal;
  --f7-list-item-divider-height: var(--f7-list-item-min-height);
  --f7-list-item-header-text-color: var(--f7-block-header-text-color);
  --f7-list-item-footer-text-color: var(--f7-block-footer-text-color);
}

.aurora,
.ios,
.md {
  --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
}

.aurora .dark,
.aurora.dark,
.ios .dark,
.ios.dark,
.md .dark,
.md.dark {
  --f7-list-item-border-color: rgba(255, 255, 255, 0.12);
  --f7-list-item-divider-border-color: transparent;
  --f7-list-item-header-text-color: var(--f7-block-header-text-color);
  --f7-list-item-footer-text-color: var(--f7-block-footer-text-color);
}

ul {
  padding-inline-start: 32px;
}

.list .item-after {
  flex-shrink: 1;
  text-align: right;
  white-space: normal;
}

[dir="rtl"] .list .item-after {
  text-align: left;
}

.list .item-subtitle {
  white-space: normal;
}

.aurora .list .item-media,
.ios .list .item-media,
.md .list .item-media {
  justify-content: center;
  min-width: 24px;
}

.list.inset .item-divider:first-child {
  border-radius: var(--f7-list-inset-border-radius)
    var(--f7-list-inset-border-radius) 0 0;
}

.list.inset .item-divider:last-child {
  border-radius: 0 0 var(--f7-list-inset-border-radius)
    var(--f7-list-inset-border-radius);
}

.list.inset .list-group ul {
  border-radius: 0;
}

.list.inset .list-group:first-child ul {
  border-radius: var(--f7-list-inset-border-radius)
    var(--f7-list-inset-border-radius) 0 0;
}

.list.inset .list-group:last-child ul {
  border-radius: 0 0 var(--f7-list-inset-border-radius)
    var(--f7-list-inset-border-radius);
}

.list.inset .list-group:first-child .list-group-title:first-child {
  border-radius: var(--f7-list-inset-border-radius)
    var(--f7-list-inset-border-radius) 0 0;
}

.simple-list li {
  height: auto;
  line-height: inherit;
  padding-bottom: 8px;
  padding-top: 8px;
  white-space: normal;
}

.cards-list li {
  background-color: var(--f7-list-bg-color);
  border-radius: inherit;
  margin: calc(var(--f7-typography-margin) / 2) 0;
}

.cards-list li:first-child {
  margin-top: 0;
}

.cards-list li:last-child {
  margin-bottom: 0;
}

.cards-list.inset li {
  border-radius: var(--f7-list-inset-border-radius);
}

.cards-list > ul.row > li {
  margin: calc(var(--f7-typography-margin) / 2) 0;
}

.cards-list .item-link.active-state {
  border-radius: inherit !important;
}

.aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
.aurora.device-desktop
  .list
  .item-link:not(.item-selected):hover:not(.active-state):not(.no-hover) {
  border-radius: inherit;
}

.cards-list .item-inner:after {
  display: none !important;
}

/*
|------------------------------------------------------------------------------
| Margin & Padding
|------------------------------------------------------------------------------
*/

.margin-bottom-auto {
  margin-bottom: auto !important;
}

.margin-left-auto {
  margin-left: auto !important;
}

.margin-right-auto {
  margin-right: auto !important;
}

.margin-top-auto {
  margin-top: auto !important;
}

.margin-horizontal-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 768px) {
  .medium-margin-vertical {
    margin-top: var(--f7-typography-margin) !important;
    margin-bottom: var(--f7-typography-margin) !important;
  }
  .medium-margin-top {
    margin-top: var(--f7-typography-margin) !important;
  }
  .medium-margin-bottom {
    margin-bottom: var(--f7-typography-margin) !important;
  }
  .medium-no-margin-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .medium-no-margin-top {
    margin-top: 0 !important;
  }
  .medium-no-margin-bottom {
    margin-bottom: 0 !important;
  }
}

@media (min-width: 768px) {
  .medium-padding-vertical {
    padding-top: var(--f7-typography-padding) !important;
    padding-bottom: var(--f7-typography-padding) !important;
  }
  .medium-no-padding-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/*
|------------------------------------------------------------------------------
| Marquee
|------------------------------------------------------------------------------
*/

.marquee {
  overflow: hidden;
}

[dir="rtl"] .marquee[data-direction="left"] .js-marquee,
[dir="rtl"] .marquee[data-direction="right"] .js-marquee {
  float: right !important;
  margin-left: 0 !important;
  margin-right: unset !important;
}

/*
|------------------------------------------------------------------------------
| Menu
|------------------------------------------------------------------------------
*/

:root .dark,
:root.dark {
  --f7-menu-bg-color: rgba(255, 255, 255, 0.9);
  --f7-menu-text-color: #000000;
  --f7-menu-dropdown-divider-color: rgba(0, 0, 0, 0.2);
  --f7-menu-item-dropdown-icon-color: rgba(0, 0, 0, 0.4);
}

.menu-inner:after {
  width: 0;
}

.menu[class*="color-"],
.menu-item[class*="color-"] {
  --f7-menu-bg-color: rgba(var(--f7-theme-color-rgb), 0.9);
  --f7-menu-text-color: #ffffff;
  --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
  --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
}

.dark .menu-item.active-state:not(.menu-item-dropdown-opened),
.dark.menu-item.active-state:not(.menu-item-dropdown-opened) {
  background-color: rgba(255, 255, 255, 0.7);
}

.menu[class*="color-"] .menu-item.active-state:not(.menu-item-dropdown-opened),
.menu-item[class*="color-"].active-state:not(.menu-item-dropdown-opened) {
  background-color: rgba(var(--f7-theme-color-rgb), 0.7);
}

.menu-dropdown-link:before {
  background: rgba(0, 0, 0, 0.8);
}

.dark .menu-dropdown-link:before {
  background: rgba(255, 255, 255, 0.8);
}

.menu[class*="color-"] .menu-dropdown-link:before,
.menu-item[class*="color-"] .menu-dropdown-link:before {
  background: rgba(var(--f7-theme-color-rgb), 0.8);
}

[dir="rtl"] .menu-dropdown-left:after,
[dir="rtl"] .menu-item-dropdown-left .menu-dropdown:after {
  background-image: radial-gradient(
    ellipse at 0% 0%,
    transparent 0%,
    transparent 70%,
    var(--f7-menu-bg-color) 72%
  );
  left: 0;
  right: 100%;
}

[dir="rtl"] .menu-dropdown-right:before,
[dir="rtl"] .menu-item-dropdown-right .menu-dropdown:before {
  background-image: radial-gradient(
    ellipse at 100% 0%,
    transparent 0%,
    transparent 70%,
    var(--f7-menu-bg-color) 72%
  );
  left: 100%;
  right: 0;
}

[dir="rtl"] .menu-dropdown-left .menu-dropdown-content,
[dir="rtl"] .menu-item-dropdown-left .menu-dropdown-content {
  border-top-left-radius: var(--f7-menu-item-border-radius);
  border-top-right-radius: 0;
  left: auto;
  right: 0;
}

[dir="rtl"] .menu-dropdown-right .menu-dropdown-content,
[dir="rtl"] .menu-item-dropdown-right .menu-dropdown-content {
  border-top-left-radius: 0;
  border-top-right-radius: var(--f7-menu-item-border-radius);
  left: 0;
  right: auto;
}

.menu-dropdown-content {
  max-height: 256px;
  max-width: 144px;
}

.menu-overlay {
  bottom: var(--f7-typography-margin);
  position: absolute;
  right: var(--f7-typography-margin);
}

[dir="rtl"] .menu-overlay {
  left: var(--f7-typography-margin);
  right: auto;
}

.menu-overlay .menu-inner {
  padding: 0;
}

/*
|------------------------------------------------------------------------------
| Menu List
|------------------------------------------------------------------------------
*/

.menu-list[class*="color-"] .item-selected .item-link,
.menu-list[class*="color-"] .item-selected.item-link,
.menu-list[class*="color-"] .tab-link-active .item-link,
.menu-list[class*="color-"] .tab-link-active.item-link {
  --f7-menu-list-selected-text-color: var(--f7-theme-color);
  --f7-menu-list-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
}

.menu-list .item-selected .item-link[class*="color-"],
.menu-list .item-selected.item-link[class*="color-"],
.menu-list .tab-link-active .item-link[class*="color-"],
.menu-list .tab-link-active.item-link[class*="color-"] {
  --f7-menu-list-selected-text-color: var(--f7-theme-color);
  --f7-menu-list-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
}

.item-selected .icons .icon + .icon-active,
.item-selected .icons .icon-active + .icon {
  margin: 0;
}

.menu-list
  .item-link:not(.item-selected):not(.tab-link-active)
  .icons
  .icon-active {
  display: none;
}

.menu-list .item-selected .icons .icon:not(.icon-active),
.menu-list .tab-link-active .icons .icon:not(.icon-active) {
  display: none;
}

/*
|------------------------------------------------------------------------------
| Message
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-message-bubble-font-size: 14px;
  --f7-message-name-font-size: 12px;
  --f7-messagebar-textarea-font-size: 14px;
  --f7-messagebar-textarea-line-height: 20px;
}

.aurora,
.ios {
  --f7-message-bubble-border-radius: 12px;
}

.aurora .message-text-footer,
.ios .message-text-footer,
.md .message-text-footer {
  margin-top: 4px;
}

.messagebar a.link {
  align-self: center;
}

/*
|------------------------------------------------------------------------------
| Navbar
|------------------------------------------------------------------------------
*/
.navbar.navbar-hidden ~ *,
.navbars ~ * {
  --f7-page-navbar-offset: var(--f7-safe-area-top);
  transition: top 0.6s, transform 0.6s ease;
}

.navbar ~ *,
.navbars ~ * {
  --f7-page-navbar-offset: calc(
    var(--f7-navbar-height) + var(--f7-safe-area-top)
  );
  transition: top 0.6s ease, transform 0.6s ease;
}

.toolbar-transitioning,
.navbar-transitioning + .toolbar,
.navbar-transitioning ~ * .toolbar {
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.toolbar-bottom.toolbar-hidden,
.ios .toolbar-bottom-ios.toolbar-hidden,
.md .toolbar-bottom-md.toolbar-hidden,
.aurora .toolbar-bottom-aurora.toolbar-hidden {
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

:root {
  --f7-navbar-title-line-height: normal;
}

.aurora,
.ios,
.md {
  --f7-navbar-font-size: 20px;
  --f7-navbar-title-font-weight: bold;
  --f7-navbar-title-text-align: center;
  --f7-navbar-subtitle-line-height: 1.3;
  --f7-navbar-large-title-font-size: 30px;
  --f7-navbar-large-title-font-weight: bold;
  --f7-navbar-large-title-letter-spacing: 0px;
}

.ios {
  --f7-navbar-height: 52px;
  --f7-navbar-tablet-height: 52px;
  --f7-navbar-inner-padding-left: 16px;
  --f7-navbar-inner-padding-right: 16px;
  --f7-navbar-subtitle-font-size: 12px;
}

.aurora .navbar .title img,
.aurora .navbar .title svg {
  height: calc(var(--f7-navbar-tablet-height) - 32px);
}

.ios .navbar .title img,
.ios .navbar .title svg {
  height: calc(var(--f7-navbar-tablet-height) - 24px);
}

.md .navbar .title img,
.md .navbar .title svg {
  height: calc(var(--f7-navbar-tablet-height) - 40px);
}

.aurora .navbar a.icon-only,
.ios .navbar a.icon-only {
  width: 32px;
}

.navbars,
.navbar {
  z-index: 1500;
}

/* .tabs-routable .navbars .navbar:first-of-type .link.back,
.tabs-routable .page:first-of-type .navbar .link.back {
    display: none;
}

.views .navbars .navbar:first-of-type .link.back,
.views .page:first-of-type .navbar .link.back {
    display: none;
} */

/*
|------------------------------------------------------------------------------
| Note
|------------------------------------------------------------------------------
*/

.note {
  align-items: flex-start;
  background-color: var(--f7-block-strong-bg-color);
  box-sizing: border-box;
  color: var(--f7-text-color);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: calc(var(--f7-block-margin-vertical) / 2) 0;
  padding-bottom: calc(var(--f7-block-padding-vertical) / 1.5);
  padding-left: calc(
    var(--f7-block-padding-horizontal) / 1.5 + env(safe-area-inset-left)
  );
  padding-left: calc(
    var(--f7-block-padding-horizontal) / 1.5 + var(--f7-safe-area-left)
  );
  padding-right: calc(
    var(--f7-block-padding-horizontal) / 1.5 + env(safe-area-inset-right)
  );
  padding-right: calc(
    var(--f7-block-padding-horizontal) / 1.5 + var(--f7-safe-area-right)
  );
  padding-top: calc(var(--f7-block-padding-vertical) / 1.5);
}

.block-strong .note {
  border: 2px solid var(--f7-color-mono);
  border-radius: var(--f7-block-inset-border-radius);
}

.block-strong .note[class*="color-"] {
  border-color: var(--f7-theme-color);
}

.note.inset {
  border-radius: var(--f7-block-inset-border-radius);
  margin-left: calc(
    var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left)
  );
  margin-right: calc(
    var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right)
  );
  --f7-safe-area-left: 0px;
  --f7-safe-area-right: 0px;
}

.note-fade[class*="color-"] {
  background-color: rgba(var(--f7-theme-color-rgb), 0.15);
}

.note-fill[class*="color-"] {
  background-color: var(--f7-theme-color);
}

.note-outline {
  border: 2px solid var(--f7-color-mono);
}

.note-outline[class*="color-"] {
  border-color: var(--f7-theme-color);
}

.note > * + * {
  margin-left: 8px;
  margin-right: 0;
}

[dir="rtl"] .note > * + * {
  margin-left: 0;
  margin-right: 8px;
}

.note > .note-media i,
.note > .note-media .icon {
  font-size: 40px;
}

.note[class*="color-"] > .note-media i,
.note[class*="color-"] > .note-media .icon {
  color: var(--f7-theme-color);
}

.note-fill[class*="color-"] > .note-media i,
.note-fill[class*="color-"] > .note-media .icon {
  color: #ffffff;
}

.note-media img,
.note-media > svg {
  height: auto;
  width: 40px;
}

.note-content {
  flex: 1;
  font-size: 16px;
  width: 100%;
}

.note[class*="color-"] .note-content {
  color: var(--f7-theme-color);
}

.note-fill[class*="color-"] .note-content {
  color: #ffffff;
}

.note-title {
  font-size: 16px;
  font-weight: 600;
}

.note[class*="color-"] .note-title {
  color: var(--f7-theme-color);
}

.note-fill[class*="color-"] .note-title {
  color: #ffffff;
}

.note-title + .note-message {
  color: var(--f7-block-header-text-color);
  font-size: 14px;
}

.note[class*="color-"] .note-title + .note-message {
  color: rgba(var(--f7-theme-color-rgb), 0.75);
}

.note-fill[class*="color-"] .note-title + .note-message {
  color: rgba(255, 255, 255, 0.75);
}

.note-actions {
  align-self: center;
  display: flex;
}

.note-content .note-actions {
  margin-top: 8px;
}

.note-action + .note-action {
  margin-left: 8px;
  margin-right: 0;
}

[dir="rtl"] .note-action + .note-action {
  margin-left: 0;
  margin-right: 8px;
}

.note-close {
  color: var(--f7-color-mono);
  height: 18px;
  line-height: 1;
  --f7-touch-ripple-color: rgba(var(--f7-color-black-rgb), 0.25);
}

.note[class*="color-"] .note-close {
  color: var(--f7-theme-color);
  --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
}

.note-fill[class*="color-"] .note-close {
  color: #ffffff;
}

.note-close:after {
  color: inherit;
  content: "notification_close_ios";
  font-family: "framework7-core-icons";
  font-size: 8px;
}

.note-actions + .note-close:after {
  content: "delete_md";
  font-size: 12px;
}

/*
|------------------------------------------------------------------------------
| Notification
|------------------------------------------------------------------------------
*/

:root {
  --f7-notification-subtitle-line-height: 1.4;
}

.aurora,
.ios,
.md {
  --f7-notification-icon-size: 24px;
  --f7-notification-subtitle-font-size: var(--f7-notification-title-font-size);
  --f7-notification-subtitle-font-weight: 600;
  --f7-notification-text-font-size: 14px;
  --f7-notification-text-line-height: 1.4;
}

.ios {
  --f7-notification-title-font-size: 15px;
  --f7-notification-title-font-weight: 600;
  --f7-notification-title-right-font-size: 14px;
}

.md {
  --f7-notification-title-color: #000000;
  --f7-notification-title-font-size: 16px;
  --f7-notification-title-font-weight: 600;
}

.md .dark,
.md.dark {
  --f7-notification-title-color: #ffffff;
}

[dir="rtl"] .notification {
  direction: rtl;
}

.notification-icon {
  flex-shrink: 0;
  font-size: var(--f7-notification-title-font-size);
}

[dir="rtl"].aurora .notification-icon,
[dir="rtl"].ios .notification-icon,
[dir="rtl"].md .notification-icon {
  margin-left: 8px;
  margin-right: 0;
}

.notification-icon i {
  vertical-align: baseline;
}

[dir="rtl"] .notification-title {
  margin-left: 8px;
}

.md .notification-title-right-text {
  margin-top: 2px;
}

[dir="rtl"].aurora .notification-title-right-text,
[dir="rtl"].ios .notification-title-right-text {
  margin-right: auto;
  margin-left: 0;
}

[dir="rtl"].md .notification-title-right-text:before {
  margin-left: 4px;
  margin-right: 0;
}

.aurora .notification-subtitle + .notification-text,
.ios .notification-subtitle + .notification-text,
.md .notification-subtitle + .notification-text {
  margin-top: 4px;
}

[dir="rtl"] .notification-close-button {
  margin-left: unset;
  margin-right: auto;
}

.md .notification-close-button.active-state:before {
  opacity: 0;
}

[dir="rtl"].aurora .notification-title-right-text + .notification-close-button,
[dir="rtl"].ios .notification-title-right-text + .notification-close-button {
  margin-left: 0;
  margin-right: 8px;
}

.notification-media {
  margin-top: var(--f7-notification-padding);
}

.notification-media img {
  max-height: 288px;
  width: 100%;
}

.notification-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--f7-notification-padding);
}

.notification-action {
  min-width: 128px;
  width: auto;
}

.notification-action + .notification-action {
  margin-left: 8px;
  margin-right: 0;
}

[dir="rtl"] .notification-action + .notification-action {
  margin-left: 0;
  margin-right: 8px;
}

.notification-action.button {
  background-color: rgba(var(--f7-theme-color-rgb), 0.125);
  color: var(--f7-theme-color);
}

.notification-input {
  margin-top: var(--f7-notification-padding);
}

.notification-input .list {
  margin: 0;
}

.notification-input .list ul {
  background: transparent;
}

.notification-input .list .item-content,
.notification-input .list .item-inner {
  padding-left: 0;
  padding-right: 0;
}

/*
|------------------------------------------------------------------------------
| Overlay Container
|------------------------------------------------------------------------------
*/

.overlay-container {
  position: relative;
}

.overlay-container:after {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.25) 25%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.75) 75%,
    rgba(0, 0, 0, 1) 100%
  );
  border-radius: inherit;
  bottom: 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.overlay-container > img,
.overlay-container > video {
  border-radius: inherit;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.overlay-content {
  align-items: center;
  border-radius: inherit;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: absolute;
  padding: var(--f7-block-padding-vertical) var(--f7-block-padding-horizontal);
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 100;
}

.bg-overlay:after {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.25) 25%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.75) 75%,
    rgba(0, 0, 0, 1) 100%
  );
  border-radius: inherit;
  bottom: 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 10;
}

/*
|------------------------------------------------------------------------------
| Page
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-page-bg-color: #eceff1;
}

.aurora .dark,
.ios .dark,
.md .dark,
.aurora.dark,
.ios.dark,
.md.dark {
  --f7-page-bg-color: #000000;
}

.page.no-tabbar {
  --f7-page-toolbar-bottom-offset: 0px;
}

/*
|------------------------------------------------------------------------------
| Pagination
|------------------------------------------------------------------------------
*/

:root {
  --f7-pagination-item-size: 36px;
}

.paginated-list li.visible {
  display: list-item !important;
}

.paginated-data-table tr.visible {
  display: table-row !important;
}

.pagination {
  box-sizing: border-box;
  color: var(--f7-theme-color);
  font-size: 14px;
  margin: var(--f7-block-margin-vertical) 0;
  padding-bottom: 0;
  padding-left: calc(
    var(--f7-block-padding-horizontal) + env(safe-area-inset-left)
  );
  padding-left: calc(
    var(--f7-block-padding-horizontal) + var(--f7-safe-area-left)
  );
  padding-right: calc(
    var(--f7-block-padding-horizontal) + env(safe-area-inset-right)
  );
  padding-right: calc(
    var(--f7-block-padding-horizontal) + var(--f7-safe-area-right)
  );
  padding-top: 0;
  position: relative;
  z-index: 1;
}

.pagination ul {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  overflow-x: auto;
  padding: 0;
}

.pagination li {
  display: inline-block;
}

.pagination li:first-child {
  margin-left: auto;
}

.pagination li:last-child {
  margin-right: auto;
}

[dir="rtl"] .pagination li:first-child {
  margin-left: initial;
  margin-right: auto;
}

[dir="rtl"] .pagination li:last-child {
  margin-left: auto;
}

.pagination li + li {
  margin-left: 12px;
}

[dir="rtl"] .pagination li + li {
  margin-left: 0;
  margin-right: 12px;
}

.pagination li a {
  align-items: center;
  background-color: #ffffff;
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  height: 36px;
  height: var(--f7-pagination-item-size);
  justify-content: center;
  min-width: 36px;
  min-width: var(--f7-pagination-item-size);
  padding: 4px 8px;
  text-align: center;
  white-space: nowrap;
}

.dark .pagination li a,
.dark.pagination li a {
  background-color: #1c1c1d;
}

.pagination li.active a {
  background-color: var(--f7-theme-color);
  color: #ffffff;
}

.pagination-round li a {
  border-radius: 36px;
  border-radius: var(--f7-pagination-item-size);
}

/*
|------------------------------------------------------------------------------
| Photo Browser
|------------------------------------------------------------------------------
*/

.photo-browser {
  position: absolute;
}

/*
|------------------------------------------------------------------------------
| Picker
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-picker-column-font-size: 18px;
}

[dir="rtl"] .picker-columns {
  text-align: left;
}

[dir="rtl"] .picker-column.picker-column-left {
  text-align: right;
}

[dir="rtl"] .picker-column.picker-column-right {
  text-align: left;
}

/*
|------------------------------------------------------------------------------
| Popover
|------------------------------------------------------------------------------
*/

:root {
  --f7-popover-width: auto;
}

.popover {
  min-width: 128px;
  max-width: 384px;
}

.popover-inner {
  max-height: 75vh;
  overflow-y: auto;
}

/*
|------------------------------------------------------------------------------
| Popup
|------------------------------------------------------------------------------
*/

.popup-router-open-in .row:first-of-type > [class*="col-"],
.popup-router-open-in .row:first-of-type > [class*="xsmall-"],
.popup-router-open-in .row:first-of-type > [class*="small-"],
.popup-router-open-in .row:first-of-type > [class*="medium-"],
.popup-router-open-in .row:first-of-type > [class*="large-"],
.popup-router-open-in .row:first-of-type > [class*="xlarge-"] {
  --f7-cols-per-row: 1 !important;
}

/*
|------------------------------------------------------------------------------
| Position
|------------------------------------------------------------------------------
*/

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute;
  z-index: 9999;
}

.position-left-top,
.position-left-center,
.position-left-bottom {
  left: 0;
}

.position-right-top,
.position-right-center,
.position-right-bottom {
  right: 0;
}

.position-left-top,
.position-center-top,
.position-right-top {
  top: 0;
}

.position-left-bottom,
.position-center-bottom,
.position-right-bottom {
  bottom: 0;
}

.position-center-top,
.position-center-center,
.position-center-bottom {
  left: 50%;
  transform: translateX(-50%);
}

.position-left-center,
.position-center-center,
.position-right-center {
  top: 50%;
  transform: translateY(-50%);
}

.position-center-center {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.sticky {
  position: sticky;
  top: 0px;
  z-index: 1000;
  transition: top 0.6s ease, transform 0.6s ease;
}

.sticky.sticky-top {
  top: 0px;
}

.sticky.sticky-bottom {
  bottom: 0px;
}

@media (min-width: 768px) {
  .medium-sticky {
    position: sticky;
    top: 0px;
    z-index: 1000;
  }
}

/*
|------------------------------------------------------------------------------
| Preloader
|------------------------------------------------------------------------------
*/

.preloader-backdrop {
  border-radius: inherit;
}

.with-modal-preloader:not(html) .preloader-backdrop {
  background: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

.dark .with-modal-preloader:not(html) .preloader-backdrop,
.dark.with-modal-preloader:not(html) .preloader-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/*
|------------------------------------------------------------------------------
| Progress Bar
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-progressbar-bg-color: rgba(0, 0, 0, 0.15);
  --f7-progressbar-border-radius: 4px;
  --f7-progressbar-height: 8px;
}

.aurora .dark,
.aurora.dark,
.ios .dark,
.ios.dark,
.md .dark,
.md.dark {
  --f7-progressbar-bg-color: rgba(255, 255, 255, 0.15);
}

.aurora .progressbar,
.aurora .progressbar-infinite,
.aurora .progressbar span,
.aurora .progressbar-infinite:before {
  box-shadow: none;
}

.progressbar[class*="color-"] {
  --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
}

.progressbar:after {
  align-items: center;
  color: #ffffff;
  content: attr(data-label);
  display: flex;
  font-size: 10px;
  height: 100%;
  letter-spacing: 0.5px;
  justify-content: center;
  padding: 0 4px;
}

.progressbar span {
  z-index: -1;
}

.progressbar-round {
  border-radius: var(--f7-progressbar-height);
}

.progressbar-round:after {
  padding: 0 8px;
}

.progressbar[data-label] {
  --f7-progressbar-height: 16px;
}

.progressbar[data-label-position="start"]:after {
  justify-content: flex-start;
}

.progressbar[data-label-position="end"]:after {
  justify-content: flex-end;
}

.framework7-root > .progressbar,
.framework7-root > .progressbar-infinite,
.page > .progressbar,
.page > .progressbar-infinite,
.panel > .progressbar,
.panel > .progressbar-infinite,
.popup > .progressbar,
.popup > .progressbar-infinite,
.view > .progressbar,
.view > .progressbar-infinite,
.views > .progressbar,
.views > .progressbar-infinite,
body > .progressbar,
body > .progressbar-infinite {
  --f7-progressbar-height: 4px;
}

[dir="rtl"].ios .progressbar-infinite.color-multi:before {
  animation: rtl-ios-progressbar-infinite-multicolor 3s linear infinite;
}

@keyframes rtl-ios-progressbar-infinite-multicolor {
  0% {
    transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(50%, 0, 0);
  }
}

/*
|------------------------------------------------------------------------------
| Pull-to-Refresh
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-ptr-preloader-size: 24px;
}

/*
|------------------------------------------------------------------------------
| Quote
|------------------------------------------------------------------------------
*/

:root {
  --f7-quote-border-width: 6px;
}

q {
  font-style: italic;
}

blockquote,
.quote {
  background-color: var(--f7-block-strong-bg-color);
  border-color: var(--f7-color-mono);
  border-style: solid;
  border-width: 0 0 0 6px;
  border-width: 0 0 0 var(--f7-quote-border-width);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: inherit;
  font-style: italic;
  margin: calc(var(--f7-block-margin-vertical) / 2) 0;
  padding-bottom: var(--f7-block-padding-vertical);
  padding-left: calc(
    var(--f7-block-padding-horizontal) + env(safe-area-inset-left)
  );
  padding-left: calc(
    var(--f7-block-padding-horizontal) + var(--f7-safe-area-left)
  );
  padding-right: calc(
    var(--f7-block-padding-horizontal) + env(safe-area-inset-right)
  );
  padding-right: calc(
    var(--f7-block-padding-horizontal) + var(--f7-safe-area-right)
  );
  padding-top: 4em;
  position: relative;
}

[dir="rtl"] blockquote,
[dir="rtl"] .quote {
  border-width: 0 6px 0 0;
  border-width: 0 var(--f7-quote-border-width) 0 0;
}

.block-strong blockquote,
.block-strong .quote {
  margin: 0;
}

blockquote.inset,
.quote.inset {
  border-radius: 0 var(--f7-block-inset-border-radius)
    var(--f7-block-inset-border-radius) 0;
  margin-left: calc(
    var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left)
  );
  margin-right: calc(
    var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right)
  );
  --f7-safe-area-left: 0px;
  --f7-safe-area-right: 0px;
}

[dir="rtl"] blockquote.inset,
[dir="rtl"] .quote.inset {
  border-radius: var(--f7-block-inset-border-radius) 0 0
    var(--f7-block-inset-border-radius);
}

blockquote.pull-quote,
.quote.pull-quote {
  border-width: 0;
  text-align: center;
}

blockquote.inset.pull-quote,
.quote.inset.pull-quote {
  border-radius: var(--f7-block-inset-border-radius);
}

blockquote.pull-quote:before,
.quote.pull-quote:before {
  left: 0;
  right: 0;
}

blockquote.border-left,
.quote.border-left {
  border-width: 0 0 0 6px;
  border-width: 0 0 0 var(--f7-quote-border-width);
}

blockquote.inset.border-left,
.quote.inset.border-left {
  border-radius: 0 var(--f7-block-inset-border-radius)
    var(--f7-block-inset-border-radius) 0;
}

blockquote.border-right,
.quote.border-right {
  border-width: 0 6px 0 0;
  border-width: 0 var(--f7-quote-border-width) 0 0;
}

blockquote.inset.border-right,
.quote.inset.border-right {
  border-radius: var(--f7-block-inset-border-radius) 0 0
    var(--f7-block-inset-border-radius);
}

blockquote.border-vertical,
.quote.border-vertical {
  border-width: 0 6px 0 6px;
  border-width: 0 var(--f7-quote-border-width) 0 var(--f7-quote-border-width);
}

blockquote.inset.border-vertical,
.quote.inset.border-vertical {
  border-radius: 0;
}

blockquote.border-top,
.quote.border-top {
  border-width: 6px 0 0 0;
  border-width: var(--f7-quote-border-width) 0 0 0;
}

blockquote.inset.border-top,
.quote.inset.border-top {
  border-radius: 0 0 var(--f7-block-inset-border-radius)
    var(--f7-block-inset-border-radius);
}

blockquote.border-bottom,
.quote.border-bottom {
  border-width: 0 0 6px 0;
  border-width: 0 0 var(--f7-quote-border-width) 0;
}

blockquote.inset.border-bottom,
.quote.inset.border-bottom {
  border-radius: var(--f7-block-inset-border-radius)
    var(--f7-block-inset-border-radius) 0 0;
}

blockquote.border-horizontal,
.quote.border-horizontal {
  border-width: 6px 0 6px 0;
  border-width: var(--f7-quote-border-width) 0 var(--f7-quote-border-width) 0;
}

blockquote.inset.border-horizontal,
.quote.inset.border-horizontal {
  border-radius: 0;
}

blockquote.border-outline,
.quote.border-outline {
  border-radius: 0;
  border-width: 6px;
  border-width: var(--f7-quote-border-width);
}

blockquote.inset.border-outline,
.quote.inset.border-outline {
  border-radius: var(--f7-block-inset-border-radius);
}

blockquote[class*="color-"],
.quote[class*="color-"] {
  border-color: var(--f7-theme-color);
}

blockquote:before,
.quote:before {
  content: "\201C";
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 8em;
  font-style: normal;
  font-weight: normal;
  line-height: 0;
  position: absolute;
}

[dir="rtl"] blockquote:before,
[dir="rtl"] .quote:before {
  content: "\201D";
}

blockquote[class*="color-"]:before,
.quote[class*="color-"]:before {
  color: var(--f7-theme-color);
}

blockquote .quote-text,
.quote .quote-text {
  font-style: italic;
}

blockquote .quote-cite,
.quote .quote-cite {
  font-size: 0.85em;
  font-style: normal;
}

blockquote .quote-text + .quote-cite,
.quote .quote-text + .quote-cite {
  margin-top: 12px;
}

blockquote .quote-cite .cite-title,
.quote .quote-cite .cite-title {
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

blockquote .quote-cite .cite-subtitle,
.quote .quote-cite .cite-subtitle {
  color: var(--f7-block-footer-text-color);
  font-size: 0.95em;
}

blockquote[class*="color-"] .quote-cite .cite-title,
.quote[class*="color-"] .quote-cite .cite-title {
  color: var(--f7-theme-color);
}

blockquote.quote-fade[class*="color-"],
.quote.quote-fade[class*="color-"] {
  background-color: rgba(var(--f7-theme-color-rgb), 0.15);
}

blockquote.quote-fill[class*="color-"],
.quote.quote-fill[class*="color-"] {
  background-color: var(--f7-theme-color);
  border-color: rgba(0, 0, 0, 0.25);
  color: #ffffff;
}

blockquote.quote-fill[class*="color-"]:before,
.quote.quote-fill[class*="color-"]:before {
  color: #ffffff;
}

blockquote.quote-fill[class*="color-"] .quote-cite,
.quote.quote-fill[class*="color-"] .quote-cite,
blockquote.quote-fill[class*="color-"] .quote-cite .cite-title,
.quote.quote-fill[class*="color-"] .quote-cite .cite-title,
blockquote.quote-fill[class*="color-"] .quote-cite .cite-subtitle,
.quote.quote-fill[class*="color-"] .quote-cite .cite-subtitle {
  color: #ffffff;
}

/*
|------------------------------------------------------------------------------
| Range Slider
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-range-label-bg-color: var(--f7-theme-color);
  --f7-range-label-text-color: #ffffff;
}

.range-slider[class*="color-"] {
  --f7-range-label-bg-color: var(--f7-theme-color);
}

[dir="rtl"] .range-slider-vertical .range-scale-step {
  justify-content: flex-start;
}

/*
|------------------------------------------------------------------------------
| Rating
|------------------------------------------------------------------------------
*/

.jq-ry-container {
  padding: 0;
}

/*
|------------------------------------------------------------------------------
| Responsive Container
|------------------------------------------------------------------------------
*/

.responsive-wrapper {
  border-radius: inherit;
  max-width: 100%;
  overflow: hidden;
}

.responsive-container {
  clear: both;
  float: none;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  width: 100%;
}

.responsive-container .responsive-content {
  border: none;
  height: 100%;
  left: 0;
  position: absolute;
  right: auto;
  top: 0;
  width: 100%;
}

[dir="rtl"] .responsive-container .responsive-content {
  left: auto;
  right: 0;
}

.responsive-container.aspect-ratio-1-1 {
  padding-bottom: 100%;
}

.responsive-container.aspect-ratio-6-5 {
  padding-bottom: 83.33%;
}

.responsive-container.aspect-ratio-5-4 {
  padding-bottom: 80%;
}

.responsive-container.aspect-ratio-4-3 {
  padding-bottom: 75%;
}

.responsive-container.aspect-ratio-11-8 {
  padding-bottom: 72.73%;
}

.responsive-container.aspect-ratio-3-2 {
  padding-bottom: 66.67%;
}

.responsive-container.aspect-ratio-8-5 {
  padding-bottom: 62.5%;
}

.responsive-container.aspect-ratio-5-3 {
  padding-bottom: 60%;
}

.responsive-container.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

.responsive-container.aspect-ratio-2-1 {
  padding-bottom: 50%;
}

.responsive-container.aspect-ratio-21-9 {
  padding-bottom: 42.86%;
}

.responsive-container.aspect-ratio-3-1 {
  padding-bottom: 33.33%;
}

/*
|------------------------------------------------------------------------------
| Ribbon
|------------------------------------------------------------------------------
*/

:root {
  --f7-ribbon-border-radius: 0.475rem;
  --f7-ribbon-clip-color: rgba(0, 0, 0, 0.75);
  --f7-ribbon-spacing: 8px;
}

:root .dark,
:root.dark {
  --f7-ribbon-clip-color: rgba(255, 255, 255, 0.25);
}

.ribbon {
  align-items: center;
  background-color: var(--f7-theme-color);
  color: #ffffff;
  display: flex;
  font-size: 12px;
  font-weight: normal;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  padding: 4px 8px;
  position: absolute;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 100;
}

.ribbon.ribbon-left-top {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  transform: translateX(calc(8px * -1))
    translateY(calc(8px * 1));
  transform: translateX(calc(var(--f7-ribbon-spacing) * -1))
    translateY(calc(var(--f7-ribbon-spacing) * 1));
}

.ribbon.ribbon-right-top {
  right: 0;
  top: 0;
  left: auto;
  bottom: auto;
  transform: translateX(calc(8px * 1))
    translateY(calc(8px * 1));
  transform: translateX(calc(var(--f7-ribbon-spacing) * 1))
    translateY(calc(var(--f7-ribbon-spacing) * 1));
}

.ribbon.ribbon-right-bottom {
  right: 0;
  bottom: 0;
  left: auto;
  top: auto;
  transform: translateX(calc(8px * 1))
    translateY(calc(8px * -1));
  transform: translateX(calc(var(--f7-ribbon-spacing) * 1))
    translateY(calc(var(--f7-ribbon-spacing) * -1));
}

.ribbon.ribbon-left-bottom {
  left: 0;
  bottom: 0;
  right: auto;
  top: auto;
  transform: translateX(calc(8px * -1))
    translateY(calc(8px * -1));
  transform: translateX(calc(var(--f7-ribbon-spacing) * -1))
    translateY(calc(var(--f7-ribbon-spacing) * -1));
}

.ribbon.ribbon-left-center {
  left: 0;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(calc(8px * -1)) translateY(-50%);
  transform: translateX(calc(var(--f7-ribbon-spacing) * -1)) translateY(-50%);
}

.ribbon.ribbon-top-center {
  top: 0;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translateY(calc(8px * -1)) translateX(-50%);
  transform: translateY(calc(var(--f7-ribbon-spacing) * -1)) translateX(-50%);
}

.ribbon.ribbon-right-center {
  right: 0;
  top: 50%;
  left: auto;
  bottom: auto;
  transform: translateX(calc(8px * 1)) translateY(-50%);
  transform: translateX(calc(var(--f7-ribbon-spacing) * 1)) translateY(-50%);
}

.ribbon.ribbon-bottom-center {
  bottom: 0;
  left: 50%;
  top: auto;
  right: auto;
  transform: translateY(calc(8px * 1)) translateX(-50%);
  transform: translateY(calc(var(--f7-ribbon-spacing) * 1)) translateX(-50%);
}

.ribbon.ribbon-top-left {
  top: 0;
  left: 0;
  bottom: auto;
  right: auto;
  transform: translateY(calc(8px * -1))
    translateX(calc(8px * 1));
  transform: translateY(calc(var(--f7-ribbon-spacing) * -1))
    translateX(calc(var(--f7-ribbon-spacing) * 1));
}

.ribbon.ribbon-top-right {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  transform: translateY(calc(8px * -1))
    translateX(calc(8px * -1));
  transform: translateY(calc(var(--f7-ribbon-spacing) * -1))
    translateX(calc(var(--f7-ribbon-spacing) * -1));
}

.ribbon.ribbon-bottom-right {
  bottom: 0;
  right: 0;
  top: auto;
  left: auto;
  transform: translateY(calc(8px * 1))
    translateX(calc(8px * -1));
  transform: translateY(calc(var(--f7-ribbon-spacing) * 1))
    translateX(calc(var(--f7-ribbon-spacing) * -1));
}

.ribbon.ribbon-bottom-left {
  bottom: 0;
  left: 0;
  top: auto;
  right: auto;
  transform: translateY(calc(8px * 1))
    translateX(calc(8px * 1));
  transform: translateY(calc(var(--f7-ribbon-spacing) * 1))
    translateX(calc(var(--f7-ribbon-spacing) * 1));
}

.ribbon-round.ribbon-left-top,
.ribbon-round.ribbon-left-center,
.ribbon-round.ribbon-left-bottom {
  border-radius: 0 0.475rem 0.475rem
    0;
  border-radius: 0 var(--f7-ribbon-border-radius) var(--f7-ribbon-border-radius)
    0;
}

.ribbon-round.ribbon-right-top,
.ribbon-round.ribbon-right-center,
.ribbon-round.ribbon-right-bottom {
  border-radius: 0.475rem 0 0
    0.475rem;
  border-radius: var(--f7-ribbon-border-radius) 0 0
    var(--f7-ribbon-border-radius);
}

.ribbon-round.ribbon-top-left,
.ribbon-round.ribbon-top-center,
.ribbon-round.ribbon-top-right {
  border-radius: 0 0 0.475rem
    0.475rem;
  border-radius: 0 0 var(--f7-ribbon-border-radius)
    var(--f7-ribbon-border-radius);
}

.ribbon-round.ribbon-bottom-left,
.ribbon-round.ribbon-bottom-center,
.ribbon-round.ribbon-bottom-right {
  border-radius: 0.475rem 0.475rem 0
    0;
  border-radius: var(--f7-ribbon-border-radius) var(--f7-ribbon-border-radius) 0
    0;
}

.ribbon.ribbon-clip {
  overflow: visible;
}

.ribbon.ribbon-clip:before {
  border-style: solid;
  content: "";
  position: absolute;
}

.ribbon.ribbon-clip:after {
  border-style: solid;
  content: "";
  position: absolute;
}

.ribbon.ribbon-clip.ribbon-left-top:before {
  content: none;
}

.ribbon.ribbon-clip.ribbon-left-top:after {
  left: 0;
  right: auto;
  bottom: calc(8px * -1);
  bottom: calc(var(--f7-ribbon-spacing) * -1);
  border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
  border-color: transparent var(--f7-ribbon-clip-color) transparent transparent;
  border-width: 0 8px 8px 0;
  border-width: 0 var(--f7-ribbon-spacing) var(--f7-ribbon-spacing) 0;
}

.ribbon.ribbon-clip.ribbon-right-top:before {
  content: none;
}

.ribbon.ribbon-clip.ribbon-right-top:after {
  left: auto;
  right: 0;
  bottom: calc(8px * -1);
  bottom: calc(var(--f7-ribbon-spacing) * -1);
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
  border-color: transparent transparent transparent var(--f7-ribbon-clip-color);
  border-width: 0 0 8px 8px;
  border-width: 0 0 var(--f7-ribbon-spacing) var(--f7-ribbon-spacing);
}

.ribbon.ribbon-clip.ribbon-right-bottom:before {
  left: auto;
  right: 0;
  top: calc(8px * -1);
  top: calc(var(--f7-ribbon-spacing) * -1);
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
  border-color: transparent transparent transparent var(--f7-ribbon-clip-color);
  border-width: 8px 0 0 8px;
  border-width: var(--f7-ribbon-spacing) 0 0 var(--f7-ribbon-spacing);
}

.ribbon.ribbon-clip.ribbon-right-bottom:after {
  content: none;
}

.ribbon.ribbon-clip.ribbon-left-bottom:before {
  left: 0;
  right: auto;
  top: calc(8px * -1);
  top: calc(var(--f7-ribbon-spacing) * -1);
  border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
  border-color: transparent var(--f7-ribbon-clip-color) transparent transparent;
  border-width: 8px 8px 0 0;
  border-width: var(--f7-ribbon-spacing) var(--f7-ribbon-spacing) 0 0;
}

.ribbon.ribbon-clip.ribbon-left-bottom:after {
  content: none;
}

.ribbon.ribbon-clip.ribbon-left-center:before {
  left: 0;
  right: auto;
  top: calc(8px * -1);
  top: calc(var(--f7-ribbon-spacing) * -1);
  border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
  border-color: transparent var(--f7-ribbon-clip-color) transparent transparent;
  border-width: 8px 8px 0 0;
  border-width: var(--f7-ribbon-spacing) var(--f7-ribbon-spacing) 0 0;
}

.ribbon.ribbon-clip.ribbon-left-center:after {
  left: 0;
  right: auto;
  bottom: calc(8px * -1);
  bottom: calc(var(--f7-ribbon-spacing) * -1);
  border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
  border-color: transparent var(--f7-ribbon-clip-color) transparent transparent;
  border-width: 0 8px 8px 0;
  border-width: 0 var(--f7-ribbon-spacing) var(--f7-ribbon-spacing) 0;
}

.ribbon.ribbon-clip.ribbon-top-center:before {
  left: calc(8px * -1);
  left: calc(var(--f7-ribbon-spacing) * -1);
  right: auto;
  top: 0;
  border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
  border-color: transparent var(--f7-ribbon-clip-color) transparent transparent;
  border-width: 8px 8px 0 0;
  border-width: var(--f7-ribbon-spacing) var(--f7-ribbon-spacing) 0 0;
}

.ribbon.ribbon-clip.ribbon-top-center:after {
  left: auto;
  right: calc(8px * -1);
  right: calc(var(--f7-ribbon-spacing) * -1);
  top: 0;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
  border-color: transparent transparent transparent var(--f7-ribbon-clip-color);
  border-width: 8px 0 0 8px;
  border-width: var(--f7-ribbon-spacing) 0 0 var(--f7-ribbon-spacing);
}

.ribbon.ribbon-clip.ribbon-right-center:before {
  left: auto;
  right: 0;
  top: calc(8px * -1);
  top: calc(var(--f7-ribbon-spacing) * -1);
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
  border-color: transparent transparent transparent var(--f7-ribbon-clip-color);
  border-width: 8px 0 0 8px;
  border-width: var(--f7-ribbon-spacing) 0 0 var(--f7-ribbon-spacing);
}

.ribbon.ribbon-clip.ribbon-right-center:after {
  left: auto;
  right: 0;
  bottom: calc(8px * -1);
  bottom: calc(var(--f7-ribbon-spacing) * -1);
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
  border-color: transparent transparent transparent var(--f7-ribbon-clip-color);
  border-width: 0 0 8px 8px;
  border-width: 0 0 var(--f7-ribbon-spacing) var(--f7-ribbon-spacing);
}

.ribbon.ribbon-clip.ribbon-bottom-center:before {
  left: calc(8px * -1);
  left: calc(var(--f7-ribbon-spacing) * -1);
  right: auto;
  bottom: 0;
  border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
  border-color: transparent var(--f7-ribbon-clip-color) transparent transparent;
  border-width: 0 8px 8px 0;
  border-width: 0 var(--f7-ribbon-spacing) var(--f7-ribbon-spacing) 0;
}

.ribbon.ribbon-clip.ribbon-bottom-center:after {
  left: auto;
  right: calc(8px * -1);
  right: calc(var(--f7-ribbon-spacing) * -1);
  bottom: 0;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
  border-color: transparent transparent transparent var(--f7-ribbon-clip-color);
  border-width: 0 0 8px 8px;
  border-width: 0 0 var(--f7-ribbon-spacing) var(--f7-ribbon-spacing);
}

.ribbon.ribbon-clip.ribbon-top-left:before {
  content: none;
}

.ribbon.ribbon-clip.ribbon-top-left:after {
  left: auto;
  right: calc(8px * -1);
  right: calc(var(--f7-ribbon-spacing) * -1);
  top: 0;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
  border-color: transparent transparent transparent var(--f7-ribbon-clip-color);
  border-width: 8px 0 0 8px;
  border-width: var(--f7-ribbon-spacing) 0 0 var(--f7-ribbon-spacing);
}

.ribbon.ribbon-clip.ribbon-top-right:before {
  left: calc(8px * -1);
  left: calc(var(--f7-ribbon-spacing) * -1);
  right: auto;
  top: 0;
  border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
  border-color: transparent var(--f7-ribbon-clip-color) transparent transparent;
  border-width: 8px 8px 0 0;
  border-width: var(--f7-ribbon-spacing) var(--f7-ribbon-spacing) 0 0;
}

.ribbon.ribbon-clip.ribbon-top-right:after {
  content: none;
}

.ribbon.ribbon-clip.ribbon-bottom-right:before {
  left: calc(8px * -1);
  left: calc(var(--f7-ribbon-spacing) * -1);
  right: auto;
  bottom: 0;
  border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
  border-color: transparent var(--f7-ribbon-clip-color) transparent transparent;
  border-width: 0 8px 8px 0;
  border-width: 0 var(--f7-ribbon-spacing) var(--f7-ribbon-spacing) 0;
}

.ribbon.ribbon-clip.ribbon-bottom-right:after {
  content: none;
}

.ribbon.ribbon-clip.ribbon-bottom-left:before {
  content: none;
}

.ribbon.ribbon-clip.ribbon-bottom-left:after {
  left: auto;
  right: calc(8px * -1);
  right: calc(var(--f7-ribbon-spacing) * -1);
  bottom: 0;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
  border-color: transparent transparent transparent var(--f7-ribbon-clip-color);
  border-width: 0 0 8px 8px;
  border-width: 0 0 var(--f7-ribbon-spacing) var(--f7-ribbon-spacing);
}

.ribbon-corner {
  align-items: flex-end;
  background: none;
  border-style: solid;
  border-width: 2rem;
  box-shadow: none;
  height: 0;
  justify-content: flex-start;
  overflow: visible;
  padding: 0;
  transform: none !important;
  width: 0;
}

.ribbon-corner {
  bottom: auto;
  left: auto;
  right: 0;
  top: 0;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: var(--f7-theme-color);
  border-top-color: var(--f7-theme-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: inherit;
}

[dir="rtl"] .ribbon-corner {
  bottom: auto;
  left: 0;
  right: auto;
  top: 0;
  border-bottom-color: transparent;
  border-left-color: var(--f7-theme-color);
  border-right-color: transparent;
  border-top-color: var(--f7-theme-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: 0;
}

.ribbon-corner.ribbon-corner-top-left {
  bottom: auto;
  left: 0;
  right: auto;
  top: 0;
  border-bottom-color: transparent;
  border-left-color: var(--f7-theme-color);
  border-right-color: transparent;
  border-top-color: var(--f7-theme-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: 0;
  align-items: flex-end;
  justify-content: flex-end;
}

[dir="rtl"] .ribbon-corner.ribbon-corner-top-left {
  justify-content: flex-start;
}

.ribbon-corner.ribbon-corner-top-right {
  bottom: auto;
  left: auto;
  right: 0;
  top: 0;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: var(--f7-theme-color);
  border-top-color: var(--f7-theme-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: inherit;
  align-items: flex-end;
  justify-content: flex-start;
}

[dir="rtl"] .ribbon-corner.ribbon-corner-top-right {
  justify-content: flex-end;
}

.ribbon-corner.ribbon-corner-bottom-right {
  bottom: 0;
  left: auto;
  right: 0;
  top: auto;
  border-bottom-color: var(--f7-theme-color);
  border-left-color: transparent;
  border-right-color: var(--f7-theme-color);
  border-top-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: inherit;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  align-items: flex-start;
  justify-content: flex-start;
}

[dir="rtl"] .ribbon-corner.ribbon-corner-bottom-right {
  justify-content: flex-end;
}

.ribbon-corner.ribbon-corner-bottom-left {
  bottom: 0;
  left: 0;
  right: auto;
  top: auto;
  border-bottom-color: var(--f7-theme-color);
  border-left-color: var(--f7-theme-color);
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  align-items: flex-start;
  justify-content: flex-end;
}

[dir="rtl"] .ribbon-corner.ribbon-corner-bottom-left {
  justify-content: flex-start;
}

.ribbon-vertical {
  min-height: 48px;
  min-width: 24px;
  text-align: center;
}

/*
|------------------------------------------------------------------------------
| Scroll Bar
|------------------------------------------------------------------------------
*/

.device-desktop * {
  scrollbar-color: var(--color-gray-500) var(--color-gray-300);
  scrollbar-width: auto;
}

.device-desktop .dark *,
.device-desktop.dark * {
  scrollbar-color: var(--color-gray-800) var(--color-gray-700);
}

.device-desktop *::-webkit-scrollbar {
  height: 4px;
  width: 8px;
}

.device-desktop *::-webkit-scrollbar-track {
  background-color: var(--color-gray-300);
}

.device-desktop .dark *::-webkit-scrollbar-track,
.device-desktop.dark *::-webkit-scrollbar-track {
  background-color: var(--color-gray-700);
}

.device-desktop *::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-500);
  border-color: var(--color-gray-500);
  border-radius: 0;
  border-style: none;
  border-width: 0;
}

.device-desktop .dark *::-webkit-scrollbar-thumb,
.device-desktop.dark *::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-800);
  border-color: var(--color-gray-800);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/*
|------------------------------------------------------------------------------
| Searchbar
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-searchbar-input-font-size: 16px;
  --f7-searchbar-in-page-content-input-border-radius: var(
    --f7-searchbar-input-border-radius
  );
}

.md {
  --f7-searchbar-input-border-radius: 4px;
}

.md .searchbar-icon {
  --f7-safe-area-left: 0px;
  --f7-safe-area-right: 0px;
}

[dir="rtl"].md .searchbar-icon {
  right: calc(8px + env(safe-area-inset-right));
  right: calc(8px + var(--f7-safe-area-right));
}

/*
|------------------------------------------------------------------------------
| Shape & Size
|------------------------------------------------------------------------------
*/

.shape-container {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
  text-align: center;
}

.shape-circle {
  border-radius: 50%;
}

.shape-rounded-square {
  border-radius: var(--f7-block-inset-border-radius);
}

.aurora .shape-auto {
  border-radius: var(--f7-block-inset-border-radius);
}

.ios .shape-auto {
  border-radius: var(--f7-block-inset-border-radius);
}

.md .shape-auto {
  border-radius: 50%;
}

.shape-inherit {
  border-radius: inherit !important;
}

.shape-none {
  border-radius: 0 !important;
}

.size-8 {
  height: 8px;
  width: 8px;
}

.size-12 {
  height: 12px;
  width: 12px;
}

.size-16 {
  height: 16px;
  width: 16px;
}

.size-20 {
  height: 20px;
  width: 20px;
}

.size-24 {
  height: 24px;
  width: 24px;
}

.size-32 {
  height: 32px;
  width: 32px;
}

.size-40 {
  height: 40px;
  width: 40px;
}

.size-48 {
  height: 48px;
  width: 48px;
}

.size-56 {
  height: 56px;
  width: 56px;
}

.size-64 {
  height: 64px;
  width: 64px;
}

.size-72 {
  height: 72px;
  width: 72px;
}

.size-80 {
  height: 80px;
  width: 80px;
}

.size-96 {
  height: 96px;
  width: 96px;
}

.size-112 {
  height: 112px;
  width: 112px;
}

.size-128 {
  height: 128px;
  width: 128px;
}

/*
|------------------------------------------------------------------------------
| Sheet Modal
|------------------------------------------------------------------------------
*/

:root {
  --f7-sheet-height: auto;
}

.aurora,
.ios,
.md {
  --f7-sheet-border-color: transparent;
}

.sheet-modal {
  border-radius: 16px 16px 0 0px;
  overflow: hidden;
}

.sheet-modal-top {
  border-radius: 0 0 16px 16px;
}

.sheet-modal-top .toolbar-bottom + .sheet-modal-inner {
  padding-bottom: var(--f7-toolbar-height);
}

.sheet-modal-bottom:before,
.sheet-modal:not(.sheet-modal-top):before {
  background-color: transparent;
}

.sheet-modal .sheet-modal-inner {
  max-height: 75vh;
  overflow-y: auto;
}

.swipe-handler {
  background-color: inherit;
  cursor: pointer;
  height: 16px;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate3d(0, 0, 1px);
  width: 100%;
  z-index: 999;
}

.swipe-handler:after {
  background-color: var(--f7-color-gray);
  border-radius: 3px;
  content: "";
  height: 6px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-18px) translateY(-3px);
  width: 36px;
}

.sheet-modal .list ul {
  --f7-list-bg-color: transparent;
}

/*
|------------------------------------------------------------------------------
| Show More/Less
|------------------------------------------------------------------------------
*/

.show-more-less .hidden {
  display: none;
}

.show-more-less > p:first-child {
  margin-top: 0;
}

.show-more-less > p:last-child {
  margin-bottom: 0;
}

.block ul.show-more-less {
  margin: 0;
}

div.show-more-wrapper {
  margin-top: calc(var(--f7-typography-margin) / 2);
}

span.show-more-wrapper {
  margin-left: calc(var(--f7-typography-margin) / 2);
}

[dir="rtl"] span.show-more-wrapper {
  margin-right: calc(var(--f7-typography-margin) / 2);
}

.show-more-btn {
  background: transparent;
  border: 0;
  color: var(--f7-theme-color);
  cursor: pointer;
  display: inline-flex;
  font-size: inherit;
  margin: auto;
  outline: 0;
  padding: 0;
  white-space: nowrap;
  width: auto;
}

.data-table .show-more-less + .show-more-btn {
  margin: var(--f7-table-label-cell-padding-horizontal);
}

/*
|------------------------------------------------------------------------------
| Side Panel
|------------------------------------------------------------------------------
*/

:root {
  --f7-panel-bg-color: var(--color-gray-50);
}

:root .dark,
:root.dark {
  --f7-panel-bg-color: var(--color-gray-900);
}

.aurora,
.ios,
.md {
  --f7-panel-collapsed-width: 56px;
}

.panel {
  box-shadow: var(--f7-elevation-1);
}

.panel-in-collapsed {
  transform: translate3d(0, 0, 0) !important;
  transition-duration: 0s;
}

.panel-left.panel-in-collapsed {
  --f7-panel-width: calc(
    var(--f7-safe-area-left) + var(--f7-panel-collapsed-width)
  );
}

.panel-right.panel-in-collapsed {
  --f7-panel-width: calc(
    var(--f7-safe-area-right) + var(--f7-panel-collapsed-width)
  );
}

.panel-in .panel-in-hide {
  display: none;
}

.panel-in-collapsed .panel-collapsed-hide {
  display: none;
}

.panel-in-breakpoint .panel-breakpoint-hide,
.panel-in-swipe .panel-breakpoint-hide {
  display: none;
}

/*
|------------------------------------------------------------------------------
| Signature Pad
|------------------------------------------------------------------------------
*/

.signature-pad {
  border: 2px dashed var(--f7-text-color);
  border-radius: var(--f7-block-inset-border-radius);
  clear: both;
  float: none;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  width: 100%;
}

.signature-pad[class*="color-"] {
  border-color: var(--f7-theme-color);
}

.signature-pad .signature-pad-canvas {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/*
|------------------------------------------------------------------------------
| Skeleton
|------------------------------------------------------------------------------
*/

[dir="rtl"] .skeleton-effect-blink,
[dir="rtl"] .skeleton-effect-wave {
  animation-direction: reverse;
}

.skeleton-block[class*="color-"] {
  --skeleton-color: rgba(var(--f7-theme-color-rgb), 0.125);
}

.skeleton-text[class*="color-"],
.skeleton-text[class*="color-"] * {
  --skeleton-color: rgba(var(--f7-theme-color-rgb), 0.125);
}

/*
|------------------------------------------------------------------------------
| Smart Select
|------------------------------------------------------------------------------
*/

.smart-select-page .list {
  border-radius: var(--f7-list-inset-border-radius);
  margin-bottom: var(--f7-typography-margin);
  margin-left: calc(
    var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left)
  );
  margin-right: calc(
    var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right)
  );
  margin-top: var(--f7-typography-margin);
  --f7-safe-area-left: 0px;
  --f7-safe-area-right: 0px;
}

.smart-select-page .list ul {
  border-radius: var(--f7-list-inset-border-radius);
}

.smart-select-page .list ul:before,
.smart-select-page .list ul:after {
  display: none !important;
}

.smart-select-page .list .item-media img {
  height: auto;
  width: 32px;
}

.smart-select-page .searchbar-not-found {
  margin: 0;
  padding: 0;
}

.smart-select-sheet {
  --f7-sheet-height: 256px;
}

/*
|------------------------------------------------------------------------------
| Sortable List
|------------------------------------------------------------------------------
*/

.aurora .sortable-handler:after,
.ios .sortable-handler:after,
.md .sortable-handler:after {
  content: "sort_md";
}

/*
|------------------------------------------------------------------------------
| State Toggle
|------------------------------------------------------------------------------
*/

.state-toggle .state-active,
.state-toggle .state-inactive {
  margin: 0 !important;
}

.state-toggle:not(.state-toggle-active) .state-active {
  display: none;
}

.state-toggle.state-toggle-active .state-inactive {
  display: none;
}

/*
|------------------------------------------------------------------------------
| Stepper
|------------------------------------------------------------------------------
*/

.ios {
  --f7-stepper-border-radius: 8px;
  --f7-stepper-height: 36px;
  --f7-stepper-large-height: 48px;
  --f7-stepper-small-height: 28px;
  --f7-stepper-value-font-size: 14px;
}

.stepper {
  --f7-stepper-vertical-width: var(--f7-stepper-height);
}

.stepper-small {
  --f7-stepper-vertical-width: var(--f7-stepper-small-height);
}

.stepper-large {
  --f7-stepper-vertical-width: var(--f7-stepper-large-height);
}

[dir="rtl"] .stepper .stepper-button-minus {
  order: 2;
}

[dir="rtl"] .stepper .stepper-input-wrap,
[dir="rtl"] .stepper .stepper-value {
  order: 1;
}

[dir="rtl"] .stepper .stepper-button-plus {
  order: 0;
}

[dir="rtl"] .stepper-button-minus:first-child,
[dir="rtl"] .stepper-button-plus:first-child,
[dir="rtl"] .stepper-button:first-child {
  border-radius: 0 var(--f7-stepper-border-radius)
    var(--f7-stepper-border-radius) 0;
}

[dir="rtl"] .stepper-button-minus:last-child,
[dir="rtl"] .stepper-button-plus:last-child,
[dir="rtl"] .stepper-button:last-child {
  border-radius: var(--f7-stepper-border-radius) 0 0
    var(--f7-stepper-border-radius);
}

.stepper .stepper-input-wrap input::-webkit-inner-spin-button,
.stepper .stepper-input-wrap input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.stepper .stepper-input-wrap input,
.stepper-value {
  box-sizing: border-box;
  padding-left: 4px;
  padding-right: 4px;
}

.stepper .stepper-input-wrap input[type="number"] {
  -moz-appearance: textfield;
}

.stepper-vertical {
  flex-direction: column;
  height: auto;
  width: var(--f7-stepper-vertical-width);
}

[dir="rtl"] .stepper-vertical .stepper-input-wrap,
[dir="rtl"] .stepper-vertical .stepper-value,
[dir="rtl"] .stepper-vertical .stepper-button-minus,
[dir="rtl"] .stepper-vertical .stepper-button-plus {
  order: unset;
}

.stepper-vertical .stepper-input-wrap,
.stepper-vertical .stepper-value {
  border-bottom: none;
  border-left: var(--f7-stepper-border-width) solid var(--f7-theme-color);
  border-right: var(--f7-stepper-border-width) solid var(--f7-theme-color);
  border-top: none;
  box-sizing: border-box;
}

.stepper-vertical .stepper-input-wrap,
.stepper-vertical .stepper-value,
.stepper-vertical .stepper-button-minus,
.stepper-vertical .stepper-button-plus,
.stepper-vertical .stepper-button {
  height: 28px;
  width: var(--f7-stepper-vertical-width);
}

.stepper-vertical .stepper-button-minus:first-child,
.stepper-vertical .stepper-button-plus:first-child,
.stepper-vertical .stepper-button:first-child {
  border-radius: var(--f7-stepper-border-radius) var(--f7-stepper-border-radius)
    0 0;
}

.stepper-vertical .stepper-button-minus:last-child,
.stepper-vertical .stepper-button-plus:last-child,
.stepper-vertical .stepper-button:last-child {
  border-radius: 0 0 var(--f7-stepper-border-radius)
    var(--f7-stepper-border-radius);
}

.stepper-vertical .stepper-input-wrap input {
  width: calc(
    var(--f7-stepper-vertical-width) - (var(--f7-stepper-border-width) * 2)
  );
}

[dir="rtl"] .stepper-button + .stepper-button,
[dir="rtl"] .stepper-button + .stepper-button-minus,
[dir="rtl"] .stepper-button + .stepper-button-plus,
[dir="rtl"] .stepper-button-minus + .stepper-button,
[dir="rtl"] .stepper-button-minus + .stepper-button-minus,
[dir="rtl"] .stepper-button-minus + .stepper-button-plus,
[dir="rtl"] .stepper-button-plus + .stepper-button,
[dir="rtl"] .stepper-button-plus + .stepper-button-minus,
[dir="rtl"] .stepper-button-plus + .stepper-button-plus {
  border-left: var(--f7-stepper-border-width) solid var(--f7-theme-color);
  border-right: 0;
}

.stepper-button.custom-icon:before,
.stepper-button.custom-icon:after,
.stepper-button-minus.custom-icon:before,
.stepper-button-minus.custom-icon:after,
.stepper-button-plus.custom-icon:before,
.stepper-button-plus.custom-icon:after {
  content: none;
}

.stepper.custom-style .stepper-value,
.stepper.custom-style .stepper-input-wrap {
  border: none;
  min-width: var(--f7-stepper-height);
  width: auto;
}

.stepper.custom-style .stepper-input-wrap input {
  min-width: var(--f7-stepper-height);
}

.stepper.custom-style .stepper-button,
.stepper.custom-style .stepper-button-minus,
.stepper.custom-style .stepper-button-plus {
  border: none;
  border-radius: 50%;
  width: var(--f7-stepper-height);
}

/*
|------------------------------------------------------------------------------
| Subnavbar
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-subnavbar-height: 48px;
  --f7-subnavbar-title-font-size: 24px;
  --f7-subnavbar-title-font-weight: bold;
  --f7-subnavbar-title-letter-spacing: 0em;
}

/*
|------------------------------------------------------------------------------
| Swipeout
|------------------------------------------------------------------------------
*/

:root {
  --f7-swipeout-delete-button-bg-color: var(--f7-color-red);
}

.aurora,
.ios,
.md {
  --f7-swipeout-button-font-size: 14px;
  --f7-swipeout-button-font-weight: 500;
}

.swipeout-actions-left {
  transform: translateX(-101%);
}

.swipeout-actions-right {
  transform: translateX(101%);
}

.swipeout-actions-left > a,
.swipeout-actions-right > a {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.swipeout-actions-left > a > *,
.swipeout-actions-right > a > * {
  margin-left: 3px;
  margin-right: 3px;
}

/*
|------------------------------------------------------------------------------
| Swiper Slider
|------------------------------------------------------------------------------
*/

.swiper-button-disabled {
  cursor: auto;
  opacity: 0.35;
  pointer-events: none;
}

.swiper-navigation-button-next,
.swiper-navigation-button-previous {
  align-items: center;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: absolute;
  top: calc(50% - var(--f7-button-height) / 2);
  z-index: 10;
}

.swiper-navigation-button-next,
.swiper-rtl .swiper-navigation-button-previous {
  right: 8px;
  left: auto;
}

.swiper-navigation-button-previous,
.swiper-rtl .swiper-navigation-button-next {
  right: auto;
  left: 8px;
}

.swiper-vertical .swiper-navigation-button-next {
  bottom: 4px;
  left: calc(50% - var(--f7-button-height) / 2);
  right: calc(50% - var(--f7-button-height) / 2);
  top: auto;
}

.swiper-vertical .swiper-navigation-button-previous {
  bottom: auto;
  left: calc(50% - var(--f7-button-height) / 2);
  right: calc(50% - var(--f7-button-height) / 2);
  top: 4px;
}

.swiper-thumbs .swiper-slide {
  filter: grayscale(1);
}

.swiper-thumbs .swiper-slide-thumb-active {
  filter: grayscale(0);
}

.swiper-pagination {
  --swiper-pagination-bullet-inactive-color: var(--f7-color-gray);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-width: 8px;
}

.swiper-pagination-bullets .swiper-pagination-bullet {
  border-radius: var(--swiper-pagination-bullet-size);
}

.swiper-pagination-bullets.swiper-pagination-pills {
  --swiper-pagination-bullet-width: 24px;
}

.swiper-pagination-bullets.swiper-pagination-active-pill
  .swiper-pagination-bullet-active {
  --swiper-pagination-bullet-width: 24px;
}

/*
|------------------------------------------------------------------------------
| Syntax Hightlighter
|------------------------------------------------------------------------------
*/

pre,
code {
  direction: ltr;
  font-size: 0.87em;
}

pre.inline {
  display: inline;
}

pre.inline code,
pre.inline code.hljs {
  display: inline;
  padding: 3px 6px;
}

pre .hljs {
  background-color: #f3f3f3;
  color: #545454;
}

.dark pre .hljs {
  background-color: #2b2b2b;
  color: #f8f8f2;
}

pre .hljs-comment,
pre .hljs-quote {
  color: #696969;
}

.dark pre .hljs-comment,
.dark pre .hljs-quote {
  color: #d4d0ab;
}

pre .hljs-deletion,
pre .hljs-name,
pre .hljs-regexp,
pre .hljs-selector-class,
pre .hljs-selector-id,
pre .hljs-tag,
pre .hljs-template-variable,
pre .hljs-variable {
  color: #d91e18;
}

.dark pre .hljs-deletion,
.dark pre .hljs-name,
.dark pre .hljs-regexp,
.dark pre .hljs-selector-class,
.dark pre .hljs-selector-id,
.dark pre .hljs-tag,
.dark pre .hljs-template-variable,
.dark pre .hljs-variable {
  color: #ffa07a;
}

pre .hljs-tag .hljs-attr,
pre .hljs-tag .hljs-name {
  color: #d91e18;
}

.dark pre .hljs-tag .hljs-attr,
.dark pre .hljs-tag .hljs-name {
  color: #ffa07a;
}

pre .hljs-attribute,
pre .hljs-built_in,
pre .hljs-link,
pre .hljs-literal,
pre .hljs-meta,
pre .hljs-number,
pre .hljs-params,
pre .hljs-type {
  color: #aa5d00;
}

.dark pre .hljs-attribute {
  color: #ffd700;
}

.dark pre .hljs-built_in,
.dark pre .hljs-link,
.dark pre .hljs-literal,
.dark pre .hljs-meta,
.dark pre .hljs-number,
.dark pre .hljs-params,
.dark pre .hljs-type {
  color: #f5ab35;
}

pre .hljs-addition,
pre .hljs-bullet,
pre .hljs-string,
pre .hljs-symbol {
  color: #008000;
}

.dark pre .hljs-addition,
.dark pre .hljs-bullet,
.dark pre .hljs-string,
.dark pre .hljs-symbol {
  color: #abe338;
}

pre .hljs-section,
pre .hljs-title {
  color: #007faa;
}

.dark pre .hljs-section,
.dark pre .hljs-title {
  color: #00e0e0;
}

pre .hljs-keyword,
pre .hljs-selector-tag {
  color: #7928a1;
}

.dark pre .hljs-keyword,
.dark pre .hljs-selector-tag {
  color: #dcc6e0;
}

[dir="rtl"] pre .menu-overlay {
  left: auto;
  right: var(--f7-typography-margin);
}

/*
|------------------------------------------------------------------------------
| Tab
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-tabbar-icon-size: 20px;
  --f7-tabbar-label-font-size: 12px;
  --f7-tabbar-label-tablet-font-size: 12px;
}

.tabbar-labels .link,
.tabbar-labels .tab-link {
  justify-content: center;
}

@media (min-width: 768px) and (min-height: 600px) {
  .ios .tabbar .link,
  .ios .tabbar .tab-link,
  .ios .tabbar-labels .link,
  .ios .tabbar-labels .tab-link {
    flex-direction: column;
  }
}

.tabbar-labels .tabbar-label {
  margin-top: 4px;
}

.no-tab-link-highlight .tab-link-highlight {
  display: none;
}

.tab-link .icons .icon + .icon-active,
.tab-link .icons .icon-active + .icon {
  margin: 0;
}

.tab-link:not(.tab-link-active) .icons .icon-active {
  display: none;
}

.tab-link-active .icons .icon:not(.icon-active) {
  display: none;
}

/*
|------------------------------------------------------------------------------
| Text Editor
|------------------------------------------------------------------------------
*/

:root {
  --f7-text-editor-bg-color: var(--f7-block-strong-bg-color);
  --f7-text-editor-height: 256px;
  --f7-text-editor-padding: 12px 16px;
}

:root .dark,
:root.dark {
  --f7-text-editor-bg-color: var(--f7-block-strong-bg-color);
}

.ios .dark,
.ios.dark {
  --f7-text-editor-toolbar-bg-color: var(--f7-bars-bg-color);
}

.text-editor.inset {
  border: none;
  border-radius: var(--f7-block-inset-border-radius);
  margin-left: calc(
    var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left)
  );
  margin-right: calc(
    var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right)
  );
  overflow: hidden;
  --f7-safe-area-left: 0px;
  --f7-safe-area-right: 0px;
}

/*
|------------------------------------------------------------------------------
| Theme
|------------------------------------------------------------------------------
*/

html.dark .if-not-dark {
  display: none !important;
}

html:not(.dark) .if-dark {
  display: none !important;
}

/*
|------------------------------------------------------------------------------
| Timeline
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-timeline-item-inner-border-radius: var(--f7-card-border-radius);
  --f7-timeline-item-inner-box-shadow: var(--f7-card-box-shadow);
  --f7-timeline-item-title-font-size: var(--f7-font-size);
  --f7-timeline-item-title-font-weight: 600;
  --f7-timeline-item-subtitle-font-size: 14px;
  --f7-timeline-item-text-color: var(--f7-list-item-text-text-color);
  --f7-timeline-item-text-font-size: 14px;
  --f7-timeline-year-font-size: 18px;
  --f7-timeline-year-font-weight: bold;
  --f7-timeline-month-font-size: 12px;
  --f7-timeline-month-font-weight: 600;
}

.timeline {
  --f7-timeline-divider-size: 12px;
}

.timeline-item-date {
  line-height: 1;
}

.timeline-item-media,
.timeline-item-title,
.timeline-item-subtitle,
.timeline-item-text {
  margin: 4px 0;
}

.timeline-year-title {
  color: var(--f7-theme-color);
}

.timeline-month-title {
  color: rgba(var(--f7-theme-color-rgb), 0.75);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.timeline-horizontal .timeline-item-date {
  color: var(--f7-theme-color);
  font-weight: 600;
}

[dir="rtl"] .timeline-horizontal > .timeline-item:last-child:after,
[dir="rtl"]
  .timeline-horizontal
  .timeline-month:last-child
  .timeline-item:last-child:after {
  display: block !important;
}

.timeline-item-day {
  color: rgba(var(--f7-theme-color-rgb), 0.75);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.timeline-item-divider {
  align-items: center;
  background-color: #cccccc;
  color: #ffffff;
  display: flex;
  height: var(--f7-timeline-divider-size);
  justify-content: center;
  text-align: center;
  width: var(--f7-timeline-divider-size);
}

.timeline-item-divider:after,
.timeline-item-divider:before {
  background-color: #cccccc;
}

.timeline-item-divider[class*="color-"] {
  background-color: var(--f7-theme-color);
}

.timeline-item-divider[class*="color-"]:after,
.timeline-item-divider[class*="color-"]:before {
  background-color: var(--f7-theme-color);
}

.timeline.timeline-divider-icons {
  --f7-timeline-divider-size: 24px;
}

.timeline.timeline-divider-icons .timeline-item-divider:after,
.timeline.timeline-divider-icons .timeline-item-divider:before {
  width: 2px;
}

.timeline-divider-icons .timeline-item-divider i,
.timeline-divider-icons .timeline-item-divider .icon {
  font-size: 16px;
}

.timeline-sides .timeline-item-right,
.timeline-sides .timeline-item {
  margin-left: calc(
    50% -
      (
        var(--f7-timeline-divider-margin-horizontal) * 2 +
          var(--f7-timeline-divider-size)
      ) / 2 - 50px
  );
  margin-right: 0;
}

.timeline-sides .timeline-item-left,
.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  margin-left: 0;
  margin-right: calc(
    50% -
      (
        var(--f7-timeline-divider-margin-horizontal) * 2 +
          var(--f7-timeline-divider-size)
      ) / 2 - 50px
  );
}

@media (min-width: 480px) {
  .xsmall-sides .timeline-item-right,
  .xsmall-sides .timeline-item {
    margin-left: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-right: 0;
  }
  .xsmall-sides .timeline-item-left,
  .xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
    margin-right: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-left: 0;
  }
}

@media (min-width: 568px) {
  .small-sides .timeline-item-right,
  .small-sides .timeline-item {
    margin-left: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-right: 0;
  }
  .small-sides .timeline-item-left,
  .small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
    margin-right: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .medium-sides .timeline-item-right,
  .medium-sides .timeline-item {
    margin-left: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-right: 0;
  }
  .medium-sides .timeline-item-left,
  .medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
    margin-right: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-left: 0;
  }
}

@media (min-width: 1024px) {
  .large-sides .timeline-item-right,
  .large-sides .timeline-item {
    margin-left: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-right: 0;
  }
  .large-sides .timeline-item-left,
  .large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
    margin-right: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-left: 0;
  }
}

@media (min-width: 1200px) {
  .xlarge-sides .timeline-item-right,
  .xlarge-sides .timeline-item {
    margin-left: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-right: 0;
  }
  .xlarge-sides .timeline-item-left,
  .xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
    margin-right: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-left: 0;
  }
}

[dir="rtl"] .timeline-sides .timeline-item-right,
[dir="rtl"] .timeline-sides .timeline-item {
  margin-right: calc(
    50% -
      (
        var(--f7-timeline-divider-margin-horizontal) * 2 +
          var(--f7-timeline-divider-size)
      ) / 2 - 50px
  );
  margin-left: 0;
}

[dir="rtl"] .timeline-sides .timeline-item-left,
[dir="rtl"]
  .timeline-sides
  .timeline-item:not(.timeline-item-right):nth-child(2n) {
  margin-right: 0;
  margin-left: calc(
    50% -
      (
        var(--f7-timeline-divider-margin-horizontal) * 2 +
          var(--f7-timeline-divider-size)
      ) / 2 - 50px
  );
}

@media (min-width: 480px) {
  [dir="rtl"] .xsmall-sides .timeline-item-right,
  [dir="rtl"] .xsmall-sides .timeline-item {
    margin-right: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-left: 0;
  }
  [dir="rtl"] .xsmall-sides .timeline-item-left,
  [dir="rtl"]
    .xsmall-sides
    .timeline-item:not(.timeline-item-right):nth-child(2n) {
    margin-left: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-right: 0;
  }
}

@media (min-width: 568px) {
  [dir="rtl"] .small-sides .timeline-item-right,
  [dir="rtl"] .small-sides .timeline-item {
    margin-right: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-left: 0;
  }
  [dir="rtl"] .small-sides .timeline-item-left,
  [dir="rtl"]
    .small-sides
    .timeline-item:not(.timeline-item-right):nth-child(2n) {
    margin-left: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  [dir="rtl"] .medium-sides .timeline-item-right,
  [dir="rtl"] .medium-sides .timeline-item {
    margin-right: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-left: 0;
  }
  [dir="rtl"] .medium-sides .timeline-item-left,
  [dir="rtl"]
    .medium-sides
    .timeline-item:not(.timeline-item-right):nth-child(2n) {
    margin-left: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-right: 0;
  }
}

@media (min-width: 1024px) {
  [dir="rtl"] .large-sides .timeline-item-right,
  [dir="rtl"] .large-sides .timeline-item {
    margin-right: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-left: 0;
  }
  [dir="rtl"] .large-sides .timeline-item-left,
  [dir="rtl"]
    .large-sides
    .timeline-item:not(.timeline-item-right):nth-child(2n) {
    margin-left: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-right: 0;
  }
}

@media (min-width: 1200px) {
  [dir="rtl"] .xlarge-sides .timeline-item-right,
  [dir="rtl"] .xlarge-sides .timeline-item {
    margin-right: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-left: 0;
  }
  [dir="rtl"] .xlarge-sides .timeline-item-left,
  [dir="rtl"]
    .xlarge-sides
    .timeline-item:not(.timeline-item-right):nth-child(2n) {
    margin-left: calc(
      50% -
        (
          var(--f7-timeline-divider-margin-horizontal) * 2 +
            var(--f7-timeline-divider-size)
        ) / 2 - 50px
    );
    margin-right: 0;
  }
}

/*
|------------------------------------------------------------------------------
| Timer
|------------------------------------------------------------------------------
*/

.timer-countdown .countdown-result {
  display: none;
}

/*
|------------------------------------------------------------------------------
| Toast
|------------------------------------------------------------------------------
*/

:root {
  --f7-toast-icon-size: 1.75em;
}

:root .dark,
:root.dark {
  --f7-toast-text-color: #000000;
}

.aurora,
.ios,
.md {
  --f7-toast-bg-color: #323232;
  --f7-toast-button-min-width: auto;
}

.aurora .dark,
.aurora.dark,
.ios .dark,
.ios.dark,
.md .dark,
.md.dark {
  --f7-toast-bg-color: #fafafa;
}

.ios .dark,
.ios.dark {
  --f7-toast-bg-color-rgb: 250, 250, 250;
}

.md {
  --f7-toast-padding-horizontal: 16px;
}

.aurora .toast.toast-round,
.ios .toast.toast-round,
.md .toast.toast-round {
  border-radius: calc(var(--f7-toast-border-radius) * 8);
}

.toast[class*="color-"] {
  background-color: var(--f7-theme-color);
  color: #ffffff;
}

.ios .toast {
  border-radius: var(--f7-toast-border-radius);
}

@media (max-width: 568px) {
  .ios .toast {
    left: 8px;
    width: calc(100% - 16px);
  }

  .ios .toast.toast-top {
    margin-top: env(safe-area-inset-top);
    margin-top: var(--f7-safe-area-top);
    top: 8px;
  }

  .ios .toast.toast-bottom {
    bottom: calc(8px + env(safe-area-inset-bottom));
    bottom: calc(8px + var(--f7-safe-area-bottom));
  }

  .ios .toast.toast-top .toast-content {
    padding-top: var(--f7-toast-padding-vertical);
  }

  .ios .toast.toast-bottom .toast-content {
    padding-bottom: var(--f7-toast-padding-vertical);
  }
}

.toast-button {
  text-transform: uppercase;
}

.ios .toast-button,
.md .toast-button {
  margin-left: 16px;
  margin-right: 0;
}

[dir="rtl"].ios .toast-button,
[dir="rtl"].md .toast-button {
  margin-left: 0;
  margin-right: 16px;
}

.toast[class*="color-"] .toast-button {
  color: #ffffff;
}

.toast .toast-button[class*="color-"] {
  color: var(--f7-theme-color);
}

.toast-with-icon.icon-position-start .toast-content {
  display: flex;
  justify-content: flex-start;
}

.toast-with-icon.icon-position-start .toast-icon + .toast-text {
  margin-left: 6px;
  margin-right: 0;
}

[dir="rtl"] .toast-with-icon.icon-position-start .toast-icon + .toast-text {
  margin-left: 0;
  margin-right: 6px;
}

.toast-center .toast-text {
  text-align: center;
}

/*
|------------------------------------------------------------------------------
| Toggle
|------------------------------------------------------------------------------
*/

.ios {
  --f7-toggle-height: 28px;
  --f7-toggle-width: 52px;
}

.toggle .toggle-label {
  align-items: center;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  font-size: 8px;
  height: var(--f7-toggle-height);
  line-height: 1;
  overflow: hidden;
  padding: 0 4px;
  position: absolute;
  text-overflow: ellipsis;
  text-transform: uppercase;
  top: 0;
  white-space: nowrap;
  width: var(--f7-toggle-width);
}

.ios .toggle .toggle-label {
  font-size: 10px;
}

.md .toggle .toggle-label {
  padding: 0 3px;
}

.toggle .toggle-label i {
  font-size: 16px;
}

.toggle input:not(:checked) ~ .toggle-label {
  justify-content: flex-end;
}

.toggle input:checked ~ .toggle-label {
  justify-content: flex-start;
}

.md .toggle input:not(:checked) ~ .toggle-label {
  justify-content: flex-start;
}

.md .toggle input:checked ~ .toggle-label {
  justify-content: flex-end;
}

.ios .toggle input:not(:checked) ~ .toggle-label,
.md .toggle input:not(:checked) ~ .toggle-label {
  color: var(--f7-color-gray);
}

.toggle input:not(:checked) ~ .toggle-label .toggle-label-on {
  display: none;
}

.toggle input:checked ~ .toggle-label .toggle-label-off {
  display: none;
}

/*
|------------------------------------------------------------------------------
| Toolbar
|------------------------------------------------------------------------------
*/

:root {
  --f7-toolbar-hide-show-transition-duration: 0ms;
}

.toolbar {
  position: relative;
}

/*
|------------------------------------------------------------------------------
| Tooltip
|------------------------------------------------------------------------------
*/

:root {
  --f7-tooltip-bg-color: rgba(0, 0, 0, 0.95);
}

:root .dark,
:root.dark {
  --f7-tooltip-bg-color: rgba(255, 255, 255, 0.95);
  --f7-tooltip-text-color: #000000;
}

.tooltip {
  max-width: 256px;
}

.tooltip[class*="color-"] {
  --f7-tooltip-bg-color: rgba(var(--f7-theme-color-rgb), 0.95);
  --f7-tooltip-text-color: #ffffff;
}

.tooltip[class*="text-color-"] {
  --f7-tooltip-text-color: var(--f7-theme-color);
}

/*
|------------------------------------------------------------------------------
| Tour Guide
|------------------------------------------------------------------------------
*/

.shepherd-element {
  background-color: var(--f7-popover-bg-color) !important;
  border-radius: var(--f7-popover-border-radius) !important;
  box-shadow: var(--f7-popover-box-shadow) !important;
  max-width: 384px !important;
}

.shepherd-element .shepherd-arrow:before {
  background-color: var(--f7-popover-bg-color) !important;
}

.shepherd-element.shepherd-has-title[data-popper-placement^="bottom"]
  > .shepherd-arrow:before {
  background-color: var(--f7-popover-bg-color) !important;
}

.shepherd-enabled.shepherd-target {
  background-color: var(--f7-popover-bg-color);
}

.shepherd-element .shepherd-content {
  background-color: var(--f7-popover-bg-color);
  border-radius: var(--f7-popover-border-radius);
}

.shepherd-element .shepherd-header {
  align-items: center;
  border-top-left-radius: var(--f7-popover-border-radius);
  border-top-right-radius: var(--f7-popover-border-radius);
  justify-content: space-between;
  line-height: var(--f7-line-height);
  padding: 8px 16px;
  position: relative;
}

.shepherd-element.shepherd-has-title .shepherd-content .shepherd-header {
  background: var(--f7-popover-bg-color);
  padding: 8px 16px;
}

.shepherd-element .shepherd-header:after {
  background-color: var(--f7-card-header-border-color);
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  right: auto;
  top: auto;
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  transform-origin: 50% 100%;
  width: 100%;
  z-index: 15;
}

.shepherd-element .shepherd-title {
  color: var(--f7-card-header-text-color);
  flex: auto;
  font-size: var(--f7-card-header-font-size);
  font-weight: var(--f7-card-header-font-weight);
}

.shepherd-element .shepherd-cancel-icon {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: bold;
  height: 24px;
  width: 24px;
}

.shepherd-element .shepherd-cancel-icon:after {
  font-family: "framework7-core-icons";
  content: "delete_md";
}

.dark .shepherd-element .shepherd-cancel-icon {
  background-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.5);
}

.shepherd-element .shepherd-cancel-icon:hover {
  background-color: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.95);
}

.dark .shepherd-element .shepherd-cancel-icon:hover {
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.55);
}

.shepherd-element.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
  color: rgba(255, 255, 255, 0.9);
}

.dark
  .shepherd-element.shepherd-has-title
  .shepherd-content
  .shepherd-cancel-icon {
  color: rgba(255, 255, 255, 0.5);
}

.shepherd-element.shepherd-has-title
  .shepherd-content
  .shepherd-cancel-icon:hover {
  color: rgba(255, 255, 255, 0.95);
}

.dark
  .shepherd-element.shepherd-has-title
  .shepherd-content
  .shepherd-cancel-icon:hover {
  color: rgba(255, 255, 255, 0.55);
}

.shepherd-element .shepherd-cancel-icon span {
  display: none;
}

.shepherd-element .shepherd-text {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: var(--f7-card-content-padding-vertical)
    var(--f7-card-content-padding-horizontal);
}

.shepherd-element .shepherd-footer {
  border-bottom-left-radius: var(--f7-popover-border-radius);
  border-bottom-right-radius: var(--f7-popover-border-radius);
  justify-content: space-between;
  padding: calc(var(--f7-card-footer-padding-horizontal) / 1.5)
    var(--f7-card-footer-padding-horizontal);
  position: relative;
}

.shepherd-element .shepherd-footer:before {
  background-color: var(--f7-card-footer-border-color);
  bottom: auto;
  content: "";
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  right: auto;
  top: 0;
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  transform-origin: 50% 0%;
  width: 100%;
  z-index: 15;
}

.shepherd-element .shepherd-button {
  align-items: center;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--f7-theme-color);
  border-radius: var(--f7-button-border-radius);
  box-shadow: var(--f7-button-box-shadow);
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  font-family: inherit;
  font-size: var(--f7-button-font-size);
  font-weight: var(--f7-button-font-weight);
  height: var(--f7-button-height);
  justify-content: center;
  letter-spacing: var(--f7-button-letter-spacing);
  line-height: calc(
    var(--f7-button-height) - 0 * 2
  );
  line-height: calc(
    var(--f7-button-height) - var(--f7-button-border-width, 0) * 2
  );
  margin: 0;
  min-width: auto;
  min-width: var(--f7-button-min-width);
  outline: 0;
  overflow: hidden;
  padding: var(--f7-button-padding-vertical) var(--f7-button-padding-horizontal);
  position: relative;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: var(--f7-button-text-transform);
  transition: none;
  vertical-align: middle;
  white-space: nowrap;
}

.shepherd-element .shepherd-button + .shepherd-button {
  margin-left: 16px;
  margin-right: 0;
}

[dir="rtl"] .shepherd-element .shepherd-button + .shepherd-button {
  margin-left: 0;
  margin-right: 16px;
}

.shepherd-element .shepherd-button:not(:disabled):hover {
  background-color: var(--f7-theme-color-tint);
  color: #ffffff;
}

.shepherd-element .shepherd-button.shepherd-button-secondary {
  background-color: var(--f7-color-gray);
  color: #ffffff;
}

.shepherd-element
  .shepherd-button.shepherd-button-secondary:not(:disabled):hover {
  background-color: var(--f7-color-gray-tint);
  color: #ffffff;
}

.shepherd-element .shepherd-button.shepherd-button-secondary[class*="color-"] {
  background-color: var(--f7-theme-color);
}

.shepherd-element
  .shepherd-button.shepherd-button-secondary[class*="color-"]:not(
    :disabled
  ):hover {
  background-color: var(--f7-theme-color-tint);
}

/*
|------------------------------------------------------------------------------
| Tree View
|------------------------------------------------------------------------------
*/

.aurora,
.ios,
.md {
  --f7-treeview-label-font-size: 16px;
}

.treeview-item-content .icon[class*="color-"] {
  color: var(--f7-theme-color);
}

.treeview-preloader {
  --f7-preloader-size: 20px;
}

/*
|------------------------------------------------------------------------------
| Video
|------------------------------------------------------------------------------
*/

video {
  background-color: #000000;
  max-width: 100%;
  vertical-align: bottom;
}

.dark video {
  background-color: #111111;
}

/*
|------------------------------------------------------------------------------
| Virtual List
|------------------------------------------------------------------------------
*/

.virtual-list {
  position: relative;
}

/*
|------------------------------------------------------------------------------
| Utilities
|------------------------------------------------------------------------------
*/

[class*="text-gradient-"] {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-transparent {
  background: transparent !important;
}
.bg-translucent {
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.dark .bg-translucent,
.dark.bg-translucent {
  background-color: rgba(45, 45, 45, 0.75);
}

.bg-color-chrome {
  --f7-theme-color-bg-color: rgba(var(--f7-color-gray-rgb), 0.25);
}
.border-color-chrome {
  --f7-theme-color-border-color: rgba(var(--f7-color-gray-rgb), 0.25);
}

.opacity-0 {
  opacity: 0;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-100 {
  opacity: 1;
}

.font-size-8 {
  font-size: 8px !important;
}
.font-size-10 {
  font-size: 10px !important;
}
.font-size-12 {
  font-size: 12px !important;
}
.font-size-14 {
  font-size: 14px !important;
}
.font-size-16 {
  font-size: 16px !important;
}
.font-size-18 {
  font-size: 18px !important;
}
.font-size-20 {
  font-size: 20px !important;
}
.font-size-22 {
  font-size: 22px !important;
}
.font-size-24 {
  font-size: 24px !important;
}
.font-size-26 {
  font-size: 26px !important;
}
.font-size-28 {
  font-size: 28px !important;
}
.font-size-30 {
  font-size: 30px !important;
}
.font-size-32 {
  font-size: 32px !important;
}
.font-size-40 {
  font-size: 40px !important;
}
.font-size-48 {
  font-size: 48px !important;
}
.font-size-56 {
  font-size: 56px !important;
}
.font-size-64 {
  font-size: 64px !important;
}
.font-size-72 {
  font-size: 72px !important;
}
.font-size-80 {
  font-size: 80px !important;
}
.font-size-88 {
  font-size: 88px !important;
}
.font-size-96 {
  font-size: 96px !important;
}

.font-weight-bold {
  font-weight: bold !important;
}
.font-weight-normal {
  font-weight: normal !important;
}
.font-weight-600 {
  font-weight: 600 !important;
}
.font-weight-800 {
  font-weight: 800 !important;
}
.font-weight-900 {
  font-weight: 900 !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.text-italic {
  font-style: italic;
}
.text-underline-dotted {
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

.single-line-text {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.multi-line-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  word-break: break-word !important;
}
.lines-1 {
  -webkit-line-clamp: 1 !important;
}
.lines-2 {
  -webkit-line-clamp: 2 !important;
}
.lines-3 {
  -webkit-line-clamp: 3 !important;
}
.lines-4 {
  -webkit-line-clamp: 4 !important;
}
.lines-5 {
  -webkit-line-clamp: 5 !important;
}

.overflow-hidden {
  overflow: hidden !important;
}
.overflow-visible {
  overflow: visible !important;
}

.height-100 {
  height: 100% !important;
}
.height-auto {
  height: auto !important;
}
.height-full {
  height: 100% !important;
  overflow-y: auto !important;
}
.width-100 {
  width: 100%;
}

.flexbox-centered {
  align-items: center;
  border-radius: inherit;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}
.flex-wrap-wrap {
  flex-wrap: wrap !important;
}

.letter-spacing-1 {
  letter-spacing: 1px;
}
.line-height-1 {
  line-height: 1 !important;
}

.text-align-start {
  text-align: start !important;
}
.text-align-end {
  text-align: end !important;
}

.vertical-align-middle {
  vertical-align: middle !important;
}

.white-space-normal {
  white-space: normal !important;
}
.white-space-nowrap {
  white-space: nowrap !important;
}

.z-index-0 {
  z-index: 0 !important;
}
.z-index-1 {
  z-index: 1 !important;
}
.z-index-10 {
  z-index: 10 !important;
}
.z-index-100 {
  z-index: 100 !important;
}
.z-index-1000 {
  z-index: 1000 !important;
}

.user-select-none {
  -webkit-user-select: none;
          user-select: none;
}

.mask {
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.mask-squircle {
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
}

.row {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: flex-start;
  --f7-cols-per-row: 1;
}

/* animation */
.custom-bounce-animation {
  animation: custom-bounce-animation 1s;
}
.custom-bounce-animation-fast {
  animation: custom-bounce-animation 0.5s;
}
.custom-bounce-animation-slow,
.icon-active {
  animation: custom-bounce-animation 2s;
}
@keyframes custom-bounce-animation {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.item-input-wrap .item-media .icon {
  font-size: 18px;
}

.md .item-input .item-media {
  align-self: auto;
}

.ios .item-input .item-media {
  align-self: auto;
}

.aurora .item-input .item-media {
  align-self: auto;
}

/* Make the label area clickable */
.item-input .item-inner {
  position: relative;
  cursor: text; /* Makes entire area look clickable */
}

.item-input .item-input-wrap {
  width: 100%;
  display: flex;
  align-items: center;
}

.item-input .item-input-wrap input,
.item-input .item-input-wrap textarea,
.item-input .item-input-wrap select {
  width: 100%;
  flex: 1;
  background: transparent;
}

.item-input .item-media {
  pointer-events: none; /* Makes icon non-blocking */
}
.item-input .item-floating-label {
  pointer-events: none; /* So clicks pass through to input */
}

/* Add padding to input to prevent label overlap */
.item-input input,
.item-input textarea,
.item-input select {
  position: relative;
  z-index: 1;
}

/* Make the label area clickable */

.firecracker-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* Full width of screen */
  height: 100vh;
  /* Full height of screen */
  background: none;
  background-size: contain;
  /* Ensures it maintains aspect ratio */
  z-index: 9999;
  pointer-events: none;
  /* So that the GIF doesn't block interactions */
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
  }
}

li.disabled {
  pointer-events: auto !important;
  /* Allow clicks on disabled elements */
}

.segmented-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.segmented {
  display: flex;
  flex-wrap: nowrap;
  min-width: max-content;
}

.segmented-scroll-wrapper .segmented a {
  padding: 15px 35px;
}

.item-input-outline {
  --f7-input-height: var(--f7-button-large-height);
}

.input-outline input,
.item-input-outline input,
.list .item-input-outline input,
.input-outline textarea,
.item-input-outline textarea,
.list .item-input-outline textarea,
.input-outline select,
.item-input-outline select,
.list .item-input-outline select {
  border-radius: var(--f7-button-border-radius);
}

.rtl .item-input-outline .item-floating-label {
  left: calc(var(--f7-input-outline-padding-horizontal) - 30px);
}

.item-input-outline .item-floating-label {
  left: calc(var(--f7-input-outline-padding-horizontal));
}

.navbar .title {
  margin-right: 0px;
}

@media (min-width: 768px) {
  .sheet-modal {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
    left: 0 !important;
    right: 0 !important;
  }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/*
|------------------------------------------------------------------------------
| COLORS
|------------------------------------------------------------------------------
| Red
| Pink
| Purple
| Deep Purple
| Indigo
| Blue
| Light Blue
| Cyan
| Teal
| Green
| Light Green
| Lime
| Yellow
| Amber
| Orange
| Deep Orange
| Brown
| Gray
| Blue Gray
| Monochrome
| Brands
|------------------------------------------------------------------------------
*/

/*
|------------------------------------------------------------------------------
| Red
|------------------------------------------------------------------------------
*/

:root {
    --color-red-50: #FFEBEE;
    --color-red-100: #FFCDD2;
    --color-red-200: #EF9A9A;
    --color-red-300: #E57373;
    --color-red-400: #EF5350;
    --color-red-500: #F44336;
    --color-red-600: #E53935;
    --color-red-700: #D32F2F;
    --color-red-800: #C62828;
    --color-red-900: #B71C1C;
}

:root {
    --color-red-rgb-500: 244, 67, 54;
}

:root {
    --gradient-red: linear-gradient(to bottom right, var(--color-red-900), var(--color-red-700), var(--color-red-500));
}

:root {
    --f7-color-red: var(--color-red-500);
    --f7-color-red-rgb: var(--color-red-rgb-500);
    --f7-color-red-shade: var(--color-red-600);
    --f7-color-red-tint: var(--color-red-400);
}

.color-theme-red, .color-red {
    --f7-theme-color: var(--color-red-500);
    --f7-theme-color-rgb: var(--color-red-rgb-500);
    --f7-theme-color-shade: var(--color-red-600);
    --f7-theme-color-tint: var(--color-red-400);
    --swiper-theme-color: var(--color-red-500);
}

.text-color-red {
    --f7-theme-color-text-color: var(--color-red-500);
}

.bg-color-red {
    --f7-theme-color-bg-color: var(--color-red-500);
}

.border-color-red {
    --f7-theme-color-border-color: var(--color-red-500);
}

.ripple-color-red {
    --f7-theme-color-ripple-color: rgba(var(--color-red-rgb-500), 0.3);
}

.text-gradient-red {
    background-image: linear-gradient(to bottom right, #B71C1C, #D32F2F, #F44336);
    background-image: var(--gradient-red);
}

.bg-gradient-red {
    background-image: linear-gradient(to bottom right, #B71C1C, #D32F2F, #F44336);
    background-image: var(--gradient-red);
}

/*
|------------------------------------------------------------------------------
| Pink
|------------------------------------------------------------------------------
*/

:root {
    --color-pink-50: #FCE4EC;
    --color-pink-100: #F8BBD0;
    --color-pink-200: #F48FB1;
    --color-pink-300: #F06292;
    --color-pink-400: #EC407A;
    --color-pink-500: #E91E63;
    --color-pink-600: #D81B60;
    --color-pink-700: #C2185B;
    --color-pink-800: #AD1457;
    --color-pink-900: #880E4F;
}

:root {
    --color-pink-rgb-500: 233, 30, 99;
}

:root {
    --gradient-pink: linear-gradient(to bottom right, var(--color-pink-900), var(--color-pink-700), var(--color-pink-500));
}

:root {
    --f7-color-pink: var(--color-pink-500);
    --f7-color-pink-rgb: var(--color-pink-rgb-500);
    --f7-color-pink-shade: var(--color-pink-600);
    --f7-color-pink-tint: var(--color-pink-400);
}

.color-theme-pink, .color-pink {
    --f7-theme-color: var(--color-pink-500);
    --f7-theme-color-rgb: var(--color-pink-rgb-500);
    --f7-theme-color-shade: var(--color-pink-600);
    --f7-theme-color-tint: var(--color-pink-400);
    --swiper-theme-color: var(--color-pink-500);
}

.text-color-pink {
    --f7-theme-color-text-color: var(--color-pink-500);
}

.bg-color-pink {
    --f7-theme-color-bg-color: var(--color-pink-500);
}

.border-color-pink {
    --f7-theme-color-border-color: var(--color-pink-500);
}

.ripple-color-pink {
    --f7-theme-color-ripple-color: rgba(var(--color-pink-rgb-500), 0.3);
}

.text-gradient-pink {
    background-image: linear-gradient(to bottom right, #880E4F, #C2185B, #E91E63);
    background-image: var(--gradient-pink);
}

.bg-gradient-pink {
    background-image: linear-gradient(to bottom right, #880E4F, #C2185B, #E91E63);
    background-image: var(--gradient-pink);
}

/*
|------------------------------------------------------------------------------
| Purple
|------------------------------------------------------------------------------
*/

:root {
    --color-purple-50: #F3E5F5;
    --color-purple-100: #E1BEE7;
    --color-purple-200: #CE93D8;
    --color-purple-300: #BA68C8;
    --color-purple-400: #AB47BC;
    --color-purple-500: #9C27B0;
    --color-purple-600: #8E24AA;
    --color-purple-700: #7B1FA2;
    --color-purple-800: #6A1B9A;
    --color-purple-900: #4A148C;
}

:root {
    --color-purple-rgb-500: 156, 39, 176;
}

:root {
    --gradient-purple: linear-gradient(to bottom right, var(--color-purple-900), var(--color-purple-700), var(--color-purple-500));
}

:root {
    --f7-color-purple: var(--color-purple-500);
    --f7-color-purple-rgb: var(--color-purple-rgb-500);
    --f7-color-purple-shade: var(--color-purple-600);
    --f7-color-purple-tint: var(--color-purple-400);
}

.color-theme-purple, .color-purple {
    --f7-theme-color: var(--color-purple-500);
    --f7-theme-color-rgb: var(--color-purple-rgb-500);
    --f7-theme-color-shade: var(--color-purple-600);
    --f7-theme-color-tint: var(--color-purple-400);
    --swiper-theme-color: var(--color-purple-500);
}

.text-color-purple {
    --f7-theme-color-text-color: var(--color-purple-500);
}

.bg-color-purple {
    --f7-theme-color-bg-color: var(--color-purple-500);
}

.border-color-purple {
    --f7-theme-color-border-color: var(--color-purple-500);
}

.ripple-color-purple {
    --f7-theme-color-ripple-color: rgba(var(--color-purple-rgb-500), 0.3);
}

.text-gradient-purple {
    background-image: linear-gradient(to bottom right, #4A148C, #7B1FA2, #9C27B0);
    background-image: var(--gradient-purple);
}

.bg-gradient-purple {
    background-image: linear-gradient(to bottom right, #4A148C, #7B1FA2, #9C27B0);
    background-image: var(--gradient-purple);
}

/*
|------------------------------------------------------------------------------
| Deep Purple
|------------------------------------------------------------------------------
*/

:root {
    --color-deeppurple-50: #EDE7F6;
    --color-deeppurple-100: #D1C4E9;
    --color-deeppurple-200: #B39DDB;
    --color-deeppurple-300: #9575CD;
    --color-deeppurple-400: #7E57C2;
    --color-deeppurple-500: #673AB7;
    --color-deeppurple-600: #5E35B1;
    --color-deeppurple-700: #512DA8;
    --color-deeppurple-800: #4527A0;
    --color-deeppurple-900: #311B92;
}

:root {
    --color-deeppurple-rgb-500: 103, 58, 183;
}

:root {
    --gradient-deeppurple: linear-gradient(to bottom right, var(--color-deeppurple-900), var(--color-deeppurple-700), var(--color-deeppurple-500));
}

:root {
    --f7-color-deeppurple: var(--color-deeppurple-500);
    --f7-color-deeppurple-rgb: var(--color-deeppurple-rgb-500);
    --f7-color-deeppurple-shade: var(--color-deeppurple-600);
    --f7-color-deeppurple-tint: var(--color-deeppurple-400);
}

.color-theme-deeppurple, .color-deeppurple {
    --f7-theme-color: var(--color-deeppurple-500);
    --f7-theme-color-rgb: var(--color-deeppurple-rgb-500);
    --f7-theme-color-shade: var(--color-deeppurple-600);
    --f7-theme-color-tint: var(--color-deeppurple-400);
    --swiper-theme-color: var(--color-deeppurple-500);
}

.text-color-deeppurple {
    --f7-theme-color-text-color: var(--color-deeppurple-500);
}

.bg-color-deeppurple {
    --f7-theme-color-bg-color: var(--color-deeppurple-500);
}

.border-color-deeppurple {
    --f7-theme-color-border-color: var(--color-deeppurple-500);
}

.ripple-color-deeppurple {
    --f7-theme-color-ripple-color: rgba(var(--color-deeppurple-rgb-500), 0.3);
}

.text-gradient-deeppurple {
    background-image: linear-gradient(to bottom right, #311B92, #512DA8, #673AB7);
    background-image: var(--gradient-deeppurple);
}

.bg-gradient-deeppurple {
    background-image: linear-gradient(to bottom right, #311B92, #512DA8, #673AB7);
    background-image: var(--gradient-deeppurple);
}

/*
|------------------------------------------------------------------------------
| Indigo
|------------------------------------------------------------------------------
*/

:root {
    --color-indigo-50: #E8EAF6;
    --color-indigo-100: #C5CAE9;
    --color-indigo-200: #9FA8DA;
    --color-indigo-300: #7986CB;
    --color-indigo-400: #5C6BC0;
    --color-indigo-500: #3F51B5;
    --color-indigo-600: #3949AB;
    --color-indigo-700: #303F9F;
    --color-indigo-800: #283593;
    --color-indigo-900: #1A237E;
}

:root {
    --color-indigo-rgb-500: 63, 81, 181;
}

:root {
    --gradient-indigo: linear-gradient(to bottom right, var(--color-indigo-900), var(--color-indigo-700), var(--color-indigo-500));
}

:root {
    --f7-color-indigo: var(--color-indigo-500);
    --f7-color-indigo-rgb: var(--color-indigo-rgb-500);
    --f7-color-indigo-shade: var(--color-indigo-600);
    --f7-color-indigo-tint: var(--color-indigo-400);
}

.color-theme-indigo, .color-indigo {
    --f7-theme-color: var(--color-indigo-500);
    --f7-theme-color-rgb: var(--color-indigo-rgb-500);
    --f7-theme-color-shade: var(--color-indigo-600);
    --f7-theme-color-tint: var(--color-indigo-400);
    --swiper-theme-color: var(--color-indigo-500);
}

.text-color-indigo {
    --f7-theme-color-text-color: var(--color-indigo-500);
}

.bg-color-indigo {
    --f7-theme-color-bg-color: var(--color-indigo-500);
}

.border-color-indigo {
    --f7-theme-color-border-color: var(--color-indigo-500);
}

.ripple-color-indigo {
    --f7-theme-color-ripple-color: rgba(var(--color-indigo-rgb-500), 0.3);
}

.text-gradient-indigo {
    background-image: linear-gradient(to bottom right, #1A237E, #303F9F, #3F51B5);
    background-image: var(--gradient-indigo);
}

.bg-gradient-indigo {
    background-image: linear-gradient(to bottom right, #1A237E, #303F9F, #3F51B5);
    background-image: var(--gradient-indigo);
}

/*
|------------------------------------------------------------------------------
| Blue
|------------------------------------------------------------------------------
*/

:root {
    --color-blue-50: #E3F2FD;
    --color-blue-100: #BBDEFB;
    --color-blue-200: #90CAF9;
    --color-blue-300: #64B5F6;
    --color-blue-400: #42A5F5;
    --color-blue-500: #2196F3;
    --color-blue-600: #1E88E5;
    --color-blue-700: #1976D2;
    --color-blue-800: #1565C0;
    --color-blue-900: #0D47A1;
}

:root {
    --color-blue-rgb-500: 33, 150, 243;
}

:root {
    --gradient-blue: linear-gradient(to bottom right, var(--color-blue-900), var(--color-blue-700), var(--color-blue-500));
}

:root {
    --f7-color-blue: var(--color-blue-500);
    --f7-color-blue-rgb: var(--color-blue-rgb-500);
    --f7-color-blue-shade: var(--color-blue-600);
    --f7-color-blue-tint: var(--color-blue-400);
}

.color-theme-blue, .color-blue {
    --f7-theme-color: var(--color-blue-500);
    --f7-theme-color-rgb: var(--color-blue-rgb-500);
    --f7-theme-color-shade: var(--color-blue-600);
    --f7-theme-color-tint: var(--color-blue-400);
    --swiper-theme-color: var(--color-blue-500);
}

.text-color-blue {
    --f7-theme-color-text-color: var(--color-blue-500);
}

.bg-color-blue {
    --f7-theme-color-bg-color: var(--color-blue-500);
}

.border-color-blue {
    --f7-theme-color-border-color: var(--color-blue-500);
}

.ripple-color-blue {
    --f7-theme-color-ripple-color: rgba(var(--color-blue-rgb-500), 0.3);
}

.text-gradient-blue {
    background-image: linear-gradient(to bottom right, #0D47A1, #1976D2, #2196F3);
    background-image: var(--gradient-blue);
}

.bg-gradient-blue {
    background-image: linear-gradient(to bottom right, #0D47A1, #1976D2, #2196F3);
    background-image: var(--gradient-blue);
}

/*
|------------------------------------------------------------------------------
| Light Blue
|------------------------------------------------------------------------------
*/

:root {
    --color-lightblue-50: #E1F5FE;
    --color-lightblue-100: #B3E5FC;
    --color-lightblue-200: #81D4FA;
    --color-lightblue-300: #4FC3F7;
    --color-lightblue-400: #29B6F6;
    --color-lightblue-500: #03A9F4;
    --color-lightblue-600: #039BE5;
    --color-lightblue-700: #0288D1;
    --color-lightblue-800: #0277BD;
    --color-lightblue-900: #01579B;
}

:root {
    --color-lightblue-rgb-500: 3, 169, 244;
}

:root {
    --gradient-lightblue: linear-gradient(to bottom right, var(--color-lightblue-900), var(--color-lightblue-700), var(--color-lightblue-500));
}

:root {
    --f7-color-lightblue: var(--color-lightblue-500);
    --f7-color-lightblue-rgb: var(--color-lightblue-rgb-500);
    --f7-color-lightblue-shade: var(--color-lightblue-600);
    --f7-color-lightblue-tint: var(--color-lightblue-400);
}

.color-theme-lightblue, .color-lightblue {
    --f7-theme-color: var(--color-lightblue-500);
    --f7-theme-color-rgb: var(--color-lightblue-rgb-500);
    --f7-theme-color-shade: var(--color-lightblue-600);
    --f7-theme-color-tint: var(--color-lightblue-400);
    --swiper-theme-color: var(--color-lightblue-500);
}

.text-color-lightblue {
    --f7-theme-color-text-color: var(--color-lightblue-500);
}

.bg-color-lightblue {
    --f7-theme-color-bg-color: var(--color-lightblue-500);
}

.border-color-lightblue {
    --f7-theme-color-border-color: var(--color-lightblue-500);
}

.ripple-color-lightblue {
    --f7-theme-color-ripple-color: rgba(var(--color-lightblue-rgb-500), 0.3);
}

.text-gradient-lightblue {
    background-image: linear-gradient(to bottom right, #01579B, #0288D1, #03A9F4);
    background-image: var(--gradient-lightblue);
}

.bg-gradient-lightblue {
    background-image: linear-gradient(to bottom right, #01579B, #0288D1, #03A9F4);
    background-image: var(--gradient-lightblue);
}

/*
|------------------------------------------------------------------------------
| Cyan
|------------------------------------------------------------------------------
*/

:root {
    --color-cyan-50: #E0F7FA;
    --color-cyan-100: #B2EBF2;
    --color-cyan-200: #80DEEA;
    --color-cyan-300: #4DD0E1;
    --color-cyan-400: #26C6DA;
    --color-cyan-500: #00BCD4;
    --color-cyan-600: #00ACC1;
    --color-cyan-700: #0097A7;
    --color-cyan-800: #00838F;
    --color-cyan-900: #006064;
}

:root {
    --color-cyan-rgb-500: 0, 188, 212;
}

:root {
    --gradient-cyan: linear-gradient(to bottom right, var(--color-cyan-900), var(--color-cyan-700), var(--color-cyan-500));
}

:root {
    --f7-color-cyan: var(--color-cyan-500);
    --f7-color-cyan-rgb: var(--color-cyan-rgb-500);
    --f7-color-cyan-shade: var(--color-cyan-600);
    --f7-color-cyan-tint: var(--color-cyan-400);
}

.color-theme-cyan, .color-cyan {
    --f7-theme-color: var(--color-cyan-500);
    --f7-theme-color-rgb: var(--color-cyan-rgb-500);
    --f7-theme-color-shade: var(--color-cyan-600);
    --f7-theme-color-tint: var(--color-cyan-400);
    --swiper-theme-color: var(--color-cyan-500);
}

.text-color-cyan {
    --f7-theme-color-text-color: var(--color-cyan-500);
}

.bg-color-cyan {
    --f7-theme-color-bg-color: var(--color-cyan-500);
}

.border-color-cyann {
    --f7-theme-color-border-color: var(--color-cyan-500);
}

.ripple-color-cyan {
    --f7-theme-color-ripple-color: rgba(var(--color-cyan-rgb-500), 0.3);
}

.text-gradient-cyan {
    background-image: linear-gradient(to bottom right, #006064, #0097A7, #00BCD4);
    background-image: var(--gradient-cyan);
}

.bg-gradient-cyan {
    background-image: linear-gradient(to bottom right, #006064, #0097A7, #00BCD4);
    background-image: var(--gradient-cyan);
}

/*
|------------------------------------------------------------------------------
| Teal
|------------------------------------------------------------------------------
*/

:root {
    --color-teal-50: #E0F2F1;
    --color-teal-100: #B2DFDB;
    --color-teal-200: #80CBC4;
    --color-teal-300: #4DB6AC;
    --color-teal-400: #26A69A;
    --color-teal-500: #009688;
    --color-teal-600: #00897B;
    --color-teal-700: #00796B;
    --color-teal-800: #00695C;
    --color-teal-900: #004D40;
}

:root {
    --color-teal-rgb-500: 0, 150, 136;
}

:root {
    --gradient-teal: linear-gradient(to bottom right, var(--color-teal-900), var(--color-teal-700), var(--color-teal-500));
}

:root {
    --f7-color-teal: var(--color-teal-500);
    --f7-color-teal-rgb: var(--color-teal-rgb-500);
    --f7-color-teal-shade: var(--color-teal-600);
    --f7-color-teal-tint: var(--color-teal-400);
}

.color-theme-teal, .color-teal {
    --f7-theme-color: var(--color-teal-500);
    --f7-theme-color-rgb: var(--color-teal-rgb-500);
    --f7-theme-color-shade: var(--color-teal-600);
    --f7-theme-color-tint: var(--color-teal-400);
    --swiper-theme-color: var(--color-teal-500);
}

.text-color-teal {
    --f7-theme-color-text-color: var(--color-teal-500);
}

.bg-color-teal {
    --f7-theme-color-bg-color: var(--color-teal-500);
}

.border-color-teal {
    --f7-theme-color-border-color: var(--color-teal-500);
}

.ripple-color-teal {
    --f7-theme-color-ripple-color: rgba(var(--color-teal-rgb-500), 0.3);
}

.text-gradient-teal {
    background-image: linear-gradient(to bottom right, #004D40, #00796B, #009688);
    background-image: var(--gradient-teal);
}

.bg-gradient-teal {
    background-image: linear-gradient(to bottom right, #004D40, #00796B, #009688);
    background-image: var(--gradient-teal);
}

/*
|------------------------------------------------------------------------------
| Green
|------------------------------------------------------------------------------
*/

:root {
    --color-green-50: #E8F5E9;
    --color-green-100: #C8E6C9;
    --color-green-200: #A5D6A7;
    --color-green-300: #81C784;
    --color-green-400: #66BB6A;
    --color-green-500: #4CAF50;
    --color-green-600: #43A047;
    --color-green-700: #388E3C;
    --color-green-800: #2E7D32;
    --color-green-900: #1B5E20;
}

:root {
    --color-green-rgb-500: 76, 175, 80;
}

:root {
    --gradient-green: linear-gradient(to bottom right, var(--color-green-900), var(--color-green-700), var(--color-green-500));
}

:root {
    --f7-color-green: var(--color-green-500);
    --f7-color-green-rgb: var(--color-green-rgb-500);
    --f7-color-green-shade: var(--color-green-600);
    --f7-color-green-tint: var(--color-green-400);
}

.color-theme-green, .color-green {
    --f7-theme-color: var(--color-green-500);
    --f7-theme-color-rgb: var(--color-green-rgb-500);
    --f7-theme-color-shade: var(--color-green-600);
    --f7-theme-color-tint: var(--color-green-400);
    --swiper-theme-color: var(--color-green-500);
}

.text-color-green {
    --f7-theme-color-text-color: var(--color-green-500);
}

.bg-color-green {
    --f7-theme-color-bg-color: var(--color-green-500);
}

.border-color-green {
    --f7-theme-color-border-color: var(--color-green-500);
}

.ripple-color-green {
    --f7-theme-color-ripple-color: rgba(var(--color-green-rgb-500), 0.3);
}

.text-gradient-green {
    background-image: linear-gradient(to bottom right, #1B5E20, #388E3C, #4CAF50);
    background-image: var(--gradient-green);
}

.bg-gradient-green {
    background-image: linear-gradient(to bottom right, #1B5E20, #388E3C, #4CAF50);
    background-image: var(--gradient-green);
}

/*
|------------------------------------------------------------------------------
| Light Green
|------------------------------------------------------------------------------
*/

:root {
    --color-lightgreen-50: #F1F8E9;
    --color-lightgreen-100: #DCEDC8;
    --color-lightgreen-200: #C5E1A5;
    --color-lightgreen-300: #AED581;
    --color-lightgreen-400: #9CCC65;
    --color-lightgreen-500: #8BC34A;
    --color-lightgreen-600: #7CB342;
    --color-lightgreen-700: #689F38;
    --color-lightgreen-800: #558B2F;
    --color-lightgreen-900: #33691E;
}

:root {
    --color-lightgreen-rgb-500: 139, 195, 74;
}

:root {
    --gradient-lightgreen: linear-gradient(to bottom right, var(--color-lightgreen-900), var(--color-lightgreen-700), var(--color-lightgreen-500));
}

:root {
    --f7-color-lightgreen: var(--color-lightgreen-500);
    --f7-color-lightgreen-rgb: var(--color-lightgreen-rgb-500);
    --f7-color-lightgreen-shade: var(--color-lightgreen-600);
    --f7-color-lightgreen-tint: var(--color-lightgreen-400);
}

.color-theme-lightgreen, .color-lightgreen {
    --f7-theme-color: var(--color-lightgreen-500);
    --f7-theme-color-rgb: var(--color-lightgreen-rgb-500);
    --f7-theme-color-shade: var(--color-lightgreen-600);
    --f7-theme-color-tint: var(--color-lightgreen-400);
    --swiper-theme-color: var(--color-lightgreen-500);
}

.text-color-lightgreen {
    --f7-theme-color-text-color: var(--color-lightgreen-500);
}

.bg-color-lightgreen {
    --f7-theme-color-bg-color: var(--color-lightgreen-500);
}

.border-color-lightgreen {
    --f7-theme-color-border-color: var(--color-lightgreen-500);
}

.ripple-color-lightgreen {
    --f7-theme-color-ripple-color: rgba(var(--color-lightgreen-rgb-500), 0.3);
}

.text-gradient-lightgreen {
    background-image: linear-gradient(to bottom right, #33691E, #689F38, #8BC34A);
    background-image: var(--gradient-lightgreen);
}

.bg-gradient-lightgreen {
    background-image: linear-gradient(to bottom right, #33691E, #689F38, #8BC34A);
    background-image: var(--gradient-lightgreen);
}

/*
|------------------------------------------------------------------------------
| Lime
|------------------------------------------------------------------------------
*/

:root {
    --color-lime-50: #F9FBE7;
    --color-lime-100: #F0F4C3;
    --color-lime-200: #E6EE9C;
    --color-lime-300: #DCE775;
    --color-lime-400: #D4E157;
    --color-lime-500: #CDDC39;
    --color-lime-600: #C0CA33;
    --color-lime-700: #AFB42B;
    --color-lime-800: #9E9D24;
    --color-lime-900: #827717;
}

:root {
    --color-lime-rgb-500: 205, 220, 57;
}

:root {
    --gradient-lime: linear-gradient(to bottom right, var(--color-lime-900), var(--color-lime-700), var(--color-lime-500));
}

:root {
    --f7-color-lime: var(--color-lime-500);
    --f7-color-lime-rgb: var(--color-lime-rgb-500);
    --f7-color-lime-shade: var(--color-lime-600);
    --f7-color-lime-tint: var(--color-lime-400);
}

.color-theme-lime, .color-lime {
    --f7-theme-color: var(--color-lime-500);
    --f7-theme-color-rgb: var(--color-lime-rgb-500);
    --f7-theme-color-shade: var(--color-lime-600);
    --f7-theme-color-tint: var(--color-lime-400);
    --swiper-theme-color: var(--color-lime-500);
}

.text-color-lime {
    --f7-theme-color-text-color: var(--color-lime-500);
}

.bg-color-lime {
    --f7-theme-color-bg-color: var(--color-lime-500);
}

.border-color-lime {
    --f7-theme-color-border-color: var(--color-lime-500);
}

.ripple-color-lime {
    --f7-theme-color-ripple-color: rgba(var(--color-lime-rgb-500), 0.3);
}

.text-gradient-lime {
    background-image: linear-gradient(to bottom right, #827717, #AFB42B, #CDDC39);
    background-image: var(--gradient-lime);
}

.bg-gradient-lime {
    background-image: linear-gradient(to bottom right, #827717, #AFB42B, #CDDC39);
    background-image: var(--gradient-lime);
}

/*
|------------------------------------------------------------------------------
| Yellow
|------------------------------------------------------------------------------
*/

:root {
    --color-yellow-50: #FFFDE7;
    --color-yellow-100: #FFF9C4;
    --color-yellow-200: #FFF59D;
    --color-yellow-300: #FFF176;
    --color-yellow-400: #FFEE58;
    --color-yellow-500: #FFEB3B;
    --color-yellow-600: #FDD835;
    --color-yellow-700: #FBC02D;
    --color-yellow-800: #F9A825;
    --color-yellow-900: #F57F17;
}

:root {
    --color-yellow-rgb-500: 255, 235, 59;
}

:root {
    --gradient-yellow: linear-gradient(to bottom right, var(--color-yellow-900), var(--color-yellow-700), var(--color-yellow-500));
}

:root {
    --f7-color-yellow: var(--color-yellow-500);
    --f7-color-yellow-rgb: var(--color-yellow-rgb-500);
    --f7-color-yellow-shade: var(--color-yellow-600);
    --f7-color-yellow-tint: var(--color-yellow-400);
}

.color-theme-yellow, .color-yellow {
    --f7-theme-color: var(--color-yellow-500);
    --f7-theme-color-rgb: var(--color-yellow-rgb-500);
    --f7-theme-color-shade: var(--color-yellow-600);
    --f7-theme-color-tint: var(--color-yellow-400);
    --swiper-theme-color: var(--color-yellow-500);
}

.text-color-yellow {
    --f7-theme-color-text-color: var(--color-yellow-500);
}

.bg-color-yellow {
    --f7-theme-color-bg-color: var(--color-yellow-500);
}

.border-color-yellow {
    --f7-theme-color-border-color: var(--color-yellow-500);
}

.ripple-color-yellow {
    --f7-theme-color-ripple-color: rgba(var(--color-yellow-rgb-500), 0.3);
}

.text-gradient-yellow {
    background-image: linear-gradient(to bottom right, #F57F17, #FBC02D, #FFEB3B);
    background-image: var(--gradient-yellow);
}

.bg-gradient-yellow {
    background-image: linear-gradient(to bottom right, #F57F17, #FBC02D, #FFEB3B);
    background-image: var(--gradient-yellow);
}

/*
|------------------------------------------------------------------------------
| Amber
|------------------------------------------------------------------------------
*/

:root {
    --color-amber-50: #FFF8E1;
    --color-amber-100: #FFECB3;
    --color-amber-200: #FFE082;
    --color-amber-300: #FFD54F;
    --color-amber-400: #FFCA28;
    --color-amber-500: #FFC107;
    --color-amber-600: #FFB300;
    --color-amber-700: #FFA000;
    --color-amber-800: #FF8F00;
    --color-amber-900: #FF6F00;
}

:root {
    --color-amber-rgb-500: 255, 193, 7;
}

:root {
    --gradient-amber: linear-gradient(to bottom right, var(--color-amber-900), var(--color-amber-700), var(--color-amber-500));
}

:root {
    --f7-color-amber: var(--color-amber-500);
    --f7-color-amber-rgb: var(--color-amber-rgb-500);
    --f7-color-amber-shade: var(--color-amber-600);
    --f7-color-amber-tint: var(--color-amber-400);
}

.color-theme-amber, .color-amber {
    --f7-theme-color: var(--color-amber-500);
    --f7-theme-color-rgb: var(--color-amber-rgb-500);
    --f7-theme-color-shade: var(--color-amber-600);
    --f7-theme-color-tint: var(--color-amber-400);
    --swiper-theme-color: var(--color-amber-500);
}

.text-color-amber {
    --f7-theme-color-text-color: var(--color-amber-500);
}

.bg-color-amber {
    --f7-theme-color-bg-color: var(--color-amber-500);
}

.border-color-amber {
    --f7-theme-color-border-color: var(--color-amber-500);
}

.ripple-color-amber {
    --f7-theme-color-ripple-color: rgba(var(--color-amber-rgb-500), 0.3);
}

.text-gradient-amber {
    background-image: linear-gradient(to bottom right, #FF6F00, #FFA000, #FFC107);
    background-image: var(--gradient-amber);
}

.bg-gradient-amber {
    background-image: linear-gradient(to bottom right, #FF6F00, #FFA000, #FFC107);
    background-image: var(--gradient-amber);
}

/*
|------------------------------------------------------------------------------
| Orange
|------------------------------------------------------------------------------
*/

:root {
    --color-orange-50: #FFF3E0;
    --color-orange-100: #FFE0B2;
    --color-orange-200: #FFCC80;
    --color-orange-300: #FFB74D;
    --color-orange-400: #FFA726;
    --color-orange-500: #FF9800;
    --color-orange-600: #FB8C00;
    --color-orange-700: #F57C00;
    --color-orange-800: #EF6C00;
    --color-orange-900: #E65100;
}

:root {
    --color-orange-rgb-500: 255, 152, 0;
}

:root {
    --gradient-orange: linear-gradient(to bottom right, var(--color-orange-900), var(--color-orange-700), var(--color-orange-500));
}

:root {
    --f7-color-orange: var(--color-orange-500);
    --f7-color-orange-rgb: var(--color-orange-rgb-500);
    --f7-color-orange-shade: var(--color-orange-600);
    --f7-color-orange-tint: var(--color-orange-400);
}

.color-theme-orange, .color-orange {
    --f7-theme-color: var(--color-orange-500);
    --f7-theme-color-rgb: var(--color-orange-rgb-500);
    --f7-theme-color-shade: var(--color-orange-600);
    --f7-theme-color-tint: var(--color-orange-400);
    --swiper-theme-color: var(--color-orange-500);
}

.text-color-orange {
    --f7-theme-color-text-color: var(--color-orange-500);
}

.bg-color-orange {
    --f7-theme-color-bg-color: var(--color-orange-500);
}

.border-color-orange {
    --f7-theme-color-border-color: var(--color-orange-500);
}

.ripple-color-orange {
    --f7-theme-color-ripple-color: rgba(var(--color-orange-rgb-500), 0.3);
}

.text-gradient-orange {
    background-image: linear-gradient(to bottom right, #E65100, #F57C00, #FF9800);
    background-image: var(--gradient-orange);
}

.bg-gradient-orange {
    background-image: linear-gradient(to bottom right, #E65100, #F57C00, #FF9800);
    background-image: var(--gradient-orange);
}

/*
|------------------------------------------------------------------------------
| Deep Orange
|------------------------------------------------------------------------------
*/

:root {
    --color-deeporange-50: #FBE9E7;
    --color-deeporange-100: #FFCCBC;
    --color-deeporange-200: #FFAB91;
    --color-deeporange-300: #FF8A65;
    --color-deeporange-400: #FF7043;
    --color-deeporange-500: #FF5722;
    --color-deeporange-600: #F4511E;
    --color-deeporange-700: #E64A19;
    --color-deeporange-800: #D84315;
    --color-deeporange-900: #BF360C;
}

:root {
    --color-deeporange-rgb-500: 255, 87, 34;
}

:root {
    --gradient-deeporange: linear-gradient(to bottom right, var(--color-deeporange-900), var(--color-deeporange-700), var(--color-deeporange-500));
}

:root {
    --f7-color-deeporange: var(--color-deeporange-500);
    --f7-color-deeporange-rgb: var(--color-deeporange-rgb-500);
    --f7-color-deeporange-shade: var(--color-deeporange-600);
    --f7-color-deeporange-tint: var(--color-deeporange-400);
}

.color-theme-deeporange, .color-deeporange {
    --f7-theme-color: var(--color-deeporange-500);
    --f7-theme-color-rgb: var(--color-deeporange-rgb-500);
    --f7-theme-color-shade: var(--color-deeporange-600);
    --f7-theme-color-tint: var(--color-deeporange-400);
    --swiper-theme-color: var(--color-deeporange-500);
}

.text-color-deeporange {
    --f7-theme-color-text-color: var(--color-deeporange-500);
}

.bg-color-deeporange {
    --f7-theme-color-bg-color: var(--color-deeporange-500);
}

.border-color-deeporange {
    --f7-theme-color-border-color: var(--color-deeporange-500);
}

.ripple-color-deeporange {
    --f7-theme-color-ripple-color: rgba(var(--color-deeporange-rgb-500), 0.3);
}

.text-gradient-deeporange {
    background-image: linear-gradient(to bottom right, #BF360C, #E64A19, #FF5722);
    background-image: var(--gradient-deeporange);
}

.bg-gradient-deeporange {
    background-image: linear-gradient(to bottom right, #BF360C, #E64A19, #FF5722);
    background-image: var(--gradient-deeporange);
}

/*
|------------------------------------------------------------------------------
| Brown
|------------------------------------------------------------------------------
*/

:root {
    --color-brown-50: #EFEBE9;
    --color-brown-100: #D7CCC8;
    --color-brown-200: #BCAAA4;
    --color-brown-300: #A1887F;
    --color-brown-400: #8D6E63;
    --color-brown-500: #795548;
    --color-brown-600: #6D4C41;
    --color-brown-700: #5D4037;
    --color-brown-800: #4E342E;
    --color-brown-900: #3E2723;
}

:root {
    --color-brown-rgb-500: 121, 85, 72;
}

:root {
    --gradient-brown: linear-gradient(to bottom right, var(--color-brown-900), var(--color-brown-700), var(--color-brown-500));
}

:root {
    --f7-color-brown: var(--color-brown-500);
    --f7-color-brown-rgb: var(--color-brown-rgb-500);
    --f7-color-brown-shade: var(--color-brown-600);
    --f7-color-brown-tint: var(--color-brown-400);
}

.color-theme-brown, .color-brown {
    --f7-theme-color: var(--color-brown-500);
    --f7-theme-color-rgb: var(--color-brown-rgb-500);
    --f7-theme-color-shade: var(--color-brown-600);
    --f7-theme-color-tint: var(--color-brown-400);
    --swiper-theme-color: var(--color-brown-500);
}

.text-color-brown {
    --f7-theme-color-text-color: var(--color-brown-500);
}

.bg-color-brown {
    --f7-theme-color-bg-color: var(--color-brown-500);
}

.border-color-brown {
    --f7-theme-color-border-color: var(--color-brown-500);
}

.ripple-color-brown {
    --f7-theme-color-ripple-color: rgba(var(--color-brown-rgb-500), 0.3);
}

.text-gradient-brown {
    background-image: linear-gradient(to bottom right, #3E2723, #5D4037, #795548);
    background-image: var(--gradient-brown);
}

.bg-gradient-brown {
    background-image: linear-gradient(to bottom right, #3E2723, #5D4037, #795548);
    background-image: var(--gradient-brown);
}

/*
|------------------------------------------------------------------------------
| Gray
|------------------------------------------------------------------------------
*/

:root {
    --color-gray-50: #FAFAFA;
    --color-gray-100: #F5F5F5;
    --color-gray-200: #EEEEEE;
    --color-gray-300: #E0E0E0;
    --color-gray-400: #BDBDBD;
    --color-gray-500: #9E9E9E;
    --color-gray-600: #757575;
    --color-gray-700: #616161;
    --color-gray-800: #424242;
    --color-gray-900: #212121;
}

:root {
    --color-gray-rgb-500: 158, 158, 158;
}

:root {
    --gradient-gray: linear-gradient(to bottom right, var(--color-gray-900), var(--color-gray-700), var(--color-gray-500));
}

:root {
    --f7-color-gray: var(--color-gray-500);
    --f7-color-gray-rgb: var(--color-gray-rgb-500);
    --f7-color-gray-shade: var(--color-gray-600);
    --f7-color-gray-tint: var(--color-gray-400);
}

.color-theme-gray, .color-gray {
    --f7-theme-color: var(--color-gray-500);
    --f7-theme-color-rgb: var(--color-gray-rgb-500);
    --f7-theme-color-shade: var(--color-gray-600);
    --f7-theme-color-tint: var(--color-gray-400);
    --swiper-theme-color: var(--color-gray-500);
}

.text-color-gray {
    --f7-theme-color-text-color: var(--color-gray-500);
}

.bg-color-gray {
    --f7-theme-color-bg-color: var(--color-gray-500);
}

.border-color-gray {
    --f7-theme-color-border-color: var(--color-gray-500);
}

.ripple-color-gray {
    --f7-theme-color-ripple-color: rgba(var(--color-gray-rgb-500), 0.3);
}

.text-gradient-gray {
    background-image: linear-gradient(to bottom right, #212121, #616161, #9E9E9E);
    background-image: var(--gradient-gray);
}

.bg-gradient-gray {
    background-image: linear-gradient(to bottom right, #212121, #616161, #9E9E9E);
    background-image: var(--gradient-gray);
}

/*
|------------------------------------------------------------------------------
| Blue Gray
|------------------------------------------------------------------------------
*/

:root {
    --color-bluegray-50: #ECEFF1;
    --color-bluegray-100: #CFD8DC;
    --color-bluegray-200: #B0BEC5;
    --color-bluegray-300: #90A4AE;
    --color-bluegray-400: #78909C;
    --color-bluegray-500: #607D8B;
    --color-bluegray-600: #546E7A;
    --color-bluegray-700: #455A64;
    --color-bluegray-800: #37474F;
    --color-bluegray-900: #263238;
}

:root {
    --color-bluegray-rgb-500: 96, 125, 139;
}

:root {
    --gradient-bluegray: linear-gradient(to bottom right, var(--color-bluegray-900), var(--color-bluegray-700), var(--color-bluegray-500));
}

:root {
    --f7-color-bluegray: var(--color-bluegray-500);
    --f7-color-bluegray-rgb: var(--color-bluegray-rgb-500);
    --f7-color-bluegray-shade: var(--color-bluegray-600);
    --f7-color-bluegray-tint: var(--color-bluegray-400);
}

.color-theme-bluegray, .color-bluegray {
    --f7-theme-color: var(--color-bluegray-500);
    --f7-theme-color-rgb: var(--color-bluegray-rgb-500);
    --f7-theme-color-shade: var(--color-bluegray-600);
    --f7-theme-color-tint: var(--color-bluegray-400);
    --swiper-theme-color: var(--color-bluegray-500);
}

.text-color-bluegray {
    --f7-theme-color-text-color: var(--color-bluegray-500);
}

.bg-color-bluegray {
    --f7-theme-color-bg-color: var(--color-bluegray-500);
}

.border-color-bluegray {
    --f7-theme-color-border-color: var(--color-bluegray-500);
}

.ripple-color-bluegray {
    --f7-theme-color-ripple-color: rgba(var(--color-bluegray-rgb-500), 0.3);
}

.text-gradient-bluegray {
    background-image: linear-gradient(to bottom right, #263238, #455A64, #607D8B);
    background-image: var(--gradient-bluegray);
}

.bg-gradient-bluegray {
    background-image: linear-gradient(to bottom right, #263238, #455A64, #607D8B);
    background-image: var(--gradient-bluegray);
}

/*
|------------------------------------------------------------------------------
| Monochrome
|------------------------------------------------------------------------------
*/

:root {
    --f7-color-mono: #000000;
    --f7-color-mono-rgb: 0, 0, 0;
    --f7-color-mono-invert: #FFFFFF;
    --f7-color-mono-invert-rgb: 255, 255, 255;
}

:root .dark, :root.dark {
    --f7-color-mono: #FFFFFF;
    --f7-color-mono-rgb: 255, 255, 255;
    --f7-color-mono-invert: #000000;
    --f7-color-mono-invert-rgb: 0, 0, 0;
}

.color-theme-mono, .color-mono {
    --f7-theme-color: #000000;
    --f7-theme-color-rgb: 0, 0, 0;
    --f7-theme-color-shade: #000000;
    --f7-theme-color-tint: #141414;
    --swiper-theme-color: #000000;
}

.dark .color-theme-mono, .dark.color-theme-mono, .dark .color-mono, .dark.color-mono {
    --f7-theme-color: #FFFFFF;
    --f7-theme-color-rgb: 255, 255, 255;
    --f7-theme-color-shade: #EBEBEB;
    --f7-theme-color-tint: #FFFFFF;
    --swiper-theme-color: #FFFFFF;
}

.color-theme-mono-invert, .color-mono-invert {
    --f7-theme-color: #FFFFFF;
    --f7-theme-color-rgb: 255, 255, 255;
    --f7-theme-color-shade: #EBEBEB;
    --f7-theme-color-tint: #FFFFFF;
    --swiper-theme-color: #FFFFFF;
}

.dark .color-theme-mono-invert, .dark.color-theme-mono-invert, .dark .color-mono-invert, .dark.color-mono-invert {
    --f7-theme-color: #000000;
    --f7-theme-color-rgb: 0, 0, 0;
    --f7-theme-color-shade: #000000;
    --f7-theme-color-tint: #141414;
    --swiper-theme-color: #000000;
}

.text-color-mono {
    --f7-theme-color-text-color: var(--f7-color-mono);
}

.text-color-mono-invert {
    --f7-theme-color-text-color: var(--f7-color-mono-invert);
}

.bg-color-mono {
    --f7-theme-color-bg-color: var(--f7-color-mono);
}

.bg-color-mono-invert {
    --f7-theme-color-bg-color: var(--f7-color-mono-invert);
}

.border-color-mono {
    --f7-theme-color-border-color: var(--f7-color-mono);
}

.border-color-mono-invert {
    --f7-theme-color-border-color: var(--f7-color-mono-invert);
}

.ripple-color-mono {
    --f7-theme-color-ripple-color: rgba(var(--f7-color-mono-rgb), 0.3);
}

.ripple-color-mono-invert {
    --f7-theme-color-ripple-color: rgba(var(--f7-color-mono-invert-rgb), 0.3);
}

/*
|------------------------------------------------------------------------------
| Brands
|------------------------------------------------------------------------------
*/

:root {
    --brand-color-amazon: 255, 153, 0;
    --brand-color-apple: 0, 0, 0;
    --brand-color-behance: 23, 105, 255;
    --brand-color-dribbble: 234, 76, 137;
    --brand-color-dropbox: 0, 126, 229;
    --brand-color-facebook: 24, 119, 242;
    --brand-color-github: 51, 51, 51;
    --brand-color-google: 66, 133, 244;
    --brand-color-instagram: 64, 93, 230;
    --brand-color-line: 0, 195, 0;
    --brand-color-linkedin: 0, 119, 181;
    --brand-color-medium: 0, 0, 0;
    --brand-color-microsoft: 0, 161, 241;
    --brand-color-patreon: 249, 104, 84;
    --brand-color-salesforce: 23, 152, 193;
    --brand-color-slack: 224, 21, 99;
    --brand-color-snapchat: 255, 252, 0;
    --brand-color-twitch: 145, 70, 255;
    --brand-color-twitter: 29, 161, 242;
    --brand-color-vkontakte: 69, 102, 142;
    --brand-color-whatsapp: 37, 211, 102;
    --brand-color-yahoo: 65, 0, 147;
    --brand-color-yandex: 255, 204, 0;
    --brand-color-youtube: 255, 0, 0;
}/*
|------------------------------------------------------------------------------
| TABLE OF CONTENTS
|------------------------------------------------------------------------------
| Entry
| Gradients
| Gutenberg Block - Archives
| Gutenberg Block - Audio
| Gutenberg Block - Button
| Gutenberg Block - Categories
| Gutenberg Block - Classic
| Gutenberg Block - Code
| Gutenberg Block - Columns
| Gutenberg Block - Cover
| Gutenberg Block - Embed
| Gutenberg Block - File
| Gutenberg Block - Gallery
| Gutenberg Block - Group
| Gutenberg Block - Image
| Gutenberg Block - Latest Comments
| Gutenberg Block - Latest Posts
| Gutenberg Block - Media & Text
| Gutenberg Block - Paragraph
| Gutenberg Block - Preformatted
| Gutenberg Block - Pullquote
| Gutenberg Block - Quote
| Gutenberg Block - RSS
| Gutenberg Block - Separator
| Gutenberg Block - Shortcode
| Gutenberg Block - Spacer
| Gutenberg Block - Table
| Gutenberg Block - Tag Cloud
| Gutenberg Block - Verse
| Gutenberg Block - Video
| Utilities
|------------------------------------------------------------------------------
*/

/*
|------------------------------------------------------------------------------
| Entry
|------------------------------------------------------------------------------
*/

.entry {
    position: relative;
}

.entry-excerpt > *, .entry-content > * {
    margin: calc(var(--f7-block-margin-vertical) / 2) 0;
}

.entry-excerpt > :first-child, .entry-content > :first-child {
    margin-top: 0;
}

.entry-excerpt > :last-child, .entry-content > :last-child {
    margin-bottom: 0;
}

/*
|------------------------------------------------------------------------------
| Gradients
|------------------------------------------------------------------------------
*/

:root .has-vivid-cyan-blue-to-vivid-purple-gradient-background {
    background: linear-gradient(135deg, #0693E3 0%, #9B51E0 100%);
}

:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
    background: linear-gradient(135deg, #00D084 0%, #0693E3 100%);
}

:root .has-light-green-cyan-to-vivid-green-cyan-gradient-background {
    background: linear-gradient(135deg, #7ADCB4 0%, #00D082 100%);
}

:root .has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
    background: linear-gradient(135deg, #FCB900 0%, #FF6900 100%);
}

:root .has-luminous-vivid-orange-to-vivid-red-gradient-background {
    background: linear-gradient(135deg, #FF6900 0%, #CF2E2E 100%);
}

:root .has-very-light-gray-to-cyan-bluish-gray-gradient-background {
    background: linear-gradient(135deg, #EEEEEE 0%, #A9B8C3 100%);
}

:root .has-cool-to-warm-spectrum-gradient-background {
    background: linear-gradient(135deg, #4AEADC 0%, #9778D1 20%, #CF2ABA 40%, #EE2C82 60%, #FB6962 80%, #FEF84C 100%);
}

:root .has-blush-light-purple-gradient-background {
    background: linear-gradient(135deg, #FFCEEC 0%, #9896F0 100%);
}

:root .has-blush-bordeaux-gradient-background {
    background: linear-gradient(135deg, #FECDA5 0%, #FE2D2D 50%, #6B003E 100%);
}

:root .has-purple-crush-gradient-background {
    background: linear-gradient(135deg, #34E2E4 0%, #4721FB 50%, #AB1DFE 100%);
}

:root .has-luminous-dusk-gradient-background {
    background: linear-gradient(135deg, #FFCB70 0%, #C751C0 50%, #4158D0 100%);
}

:root .has-hazy-dawn-gradient-background {
    background: linear-gradient(135deg, #FAACA8 0%, #DAD0EC 100%);
}

:root .has-pale-ocean-gradient-background {
    background: linear-gradient(135deg, #FFF5CB 0%, #B6E3D4 50%, #33A7B5 100%);
}

:root .has-electric-grass-gradient-background {
    background: linear-gradient(135deg, #CAF880 0%, #71CE7E 100%);
}

:root .has-subdued-olive-gradient-background {
    background: linear-gradient(135deg, #FAFAE1 0%, #67A671 100%);
}

:root .has-atomic-cream-gradient-background {
    background: linear-gradient(135deg, #FDD79A 0%, #004A59 100%);
}

:root .has-nightshade-gradient-background {
    background: linear-gradient(135deg, #330968 0%, #31CDCF 100%);
}

:root .has-midnight-gradient-background {
    background: linear-gradient(135deg, #020381 0%, #2874FC 100%);
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Archives
|------------------------------------------------------------------------------
*/

.wp-block-archives {
    list-style: none;
    padding: 0;
}

.wp-block-archives.alignleft {
    text-align: left;
}

[dir=rtl] .wp-block-archives.alignleft {
    text-align: right;
}

.wp-block-archives.aligncenter {
    text-align: center;
}

.wp-block-archives.alignright {
    text-align: right;
}

[dir=rtl] .wp-block-archives.alignright {
    text-align: left;
}

.wp-block-archives li {
    margin: calc(var(--f7-list-item-padding-vertical) * 2) 0;
}

.wp-block-archives li:first-child {
    margin-top: 0;
}

.wp-block-archives li:last-child {
    margin-bottom: 0;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Audio
|------------------------------------------------------------------------------
*/

.wp-block-audio.alignleft {
    text-align: left;
}

[dir=rtl] .wp-block-audio.alignleft {
    text-align: right;
}

.wp-block-audio.aligncenter {
    text-align: center;
}

.wp-block-audio.alignright {
    text-align: right;
}

[dir=rtl] .wp-block-audio.alignright {
    text-align: left;
}

.wp-block-audio audio {
    width: 100%;
}

.wp-block-audio figcaption {
    margin-top: 8px;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Button
|------------------------------------------------------------------------------
*/

.wp-block-button.alignleft {
    text-align: left;
}

[dir=rtl] .wp-block-button.alignleft {
    text-align: right;
}

.wp-block-button.aligncenter {
    text-align: center;
}

.wp-block-button.alignright {
    text-align: right;
}

[dir=rtl] .wp-block-button.alignright {
    text-align: left;
}

.wp-block-button .wp-block-button__link {
    background-color: var(--f7-theme-color);
    border-radius: var(--f7-button-border-radius);
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: var(--f7-button-large-font-size);
    font-weight: var(--f7-button-large-font-weight);
    height: var(--f7-button-large-height);
    letter-spacing: var(--f7-button-letter-spacing);
    line-height: var(--f7-button-large-height);
    padding: 0px var(--f7-button-padding-horizontal);
    padding: var(--f7-button-padding-vertical, 0px) var(--f7-button-padding-horizontal);
    text-align: center;
    text-decoration: none;
    text-transform: var(--f7-button-large-text-transform);
    vertical-align: middle;
}

.aurora .wp-block-button .wp-block-button__link:hover {
    background-color: var(--f7-theme-color-tint);
}

.aurora .wp-block-button .wp-block-button__link.active-state {
    background-color: var(--f7-theme-color-shade);
}

.aurora .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: rgba(var(--f7-theme-color-rgb), 0.07);
}

.ios .wp-block-button .wp-block-button__link.active-state {
    background-color: var(--f7-theme-color-tint);
}

.md .wp-block-button .wp-block-button__link.active-state {
    background-color: var(--f7-theme-color-shade);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: var(--f7-button-outline-border-width) solid;
    color: var(--f7-theme-color);
    line-height: calc(var(--f7-button-large-height) - var(--f7-button-outline-border-width) * 2);
}

.aurora .wp-block-button.is-style-outline .wp-block-button__link.active-state,
.ios .wp-block-button.is-style-outline .wp-block-button__link.active-state,
.md .wp-block-button.is-style-outline .wp-block-button__link.active-state {
    background-color: rgba(var(--f7-theme-color-rgb), 0.15);
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Categories
|------------------------------------------------------------------------------
*/

.wp-block-categories {
    list-style: none;
    padding: 0;
}

.wp-block-categories.alignleft {
    text-align: left;
}

[dir=rtl] .wp-block-categories.alignleft {
    text-align: right;
}

.wp-block-categories.aligncenter {
    text-align: center;
}

.wp-block-categories.alignright {
    text-align: right;
}

[dir=rtl] .wp-block-categories.alignright {
    text-align: left;
}

.wp-block-categories li {
    margin: calc(var(--f7-list-item-padding-vertical) * 2) 0;
}

.wp-block-categories li:first-child {
    margin-top: 0;
}

.wp-block-categories li:last-child {
    margin-bottom: 0;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Classic
|------------------------------------------------------------------------------
*/

.entry blockquote {
    border-color: var(--f7-theme-color);
    border-style: solid;
    border-width: 0 0 0 4px;
    margin: 0;
    padding: calc(var(--f7-block-padding-vertical) / 4) var(--f7-block-padding-horizontal);
}

.entry blockquote:before {
    content: "“";
    display: block;
    font-family: serif;
    font-size: 48px;
    font-weight: bold;
    height: 24px;
    line-height: 1;
    width: 24px;
}

[dir=rtl] .entry blockquote {
    border-width: 0 4px 0 0;
}

.entry blockquote cite {
    color: var(--f7-list-item-text-text-color);
    display: block;
    font-size: initial;
    margin: calc(var(--f7-block-margin-vertical) / 2) 0;
}

.entry code {
    background: var(--f7-page-bg-color);
    border-radius: var(--f7-block-inset-border-radius);
    direction: ltr;
    overflow: auto;
    padding: 4px 8px;
    unicode-bidi: bidi-override;
}

.entry hr {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(var(--f7-theme-color-rgb), 0.75), rgba(0, 0, 0, 0));
    border: 0;
    height: 4px;
    margin: calc(var(--f7-block-margin-vertical) * 1.5) 0;
}

.entry img {
    border-radius: var(--f7-block-inset-border-radius);
    height: auto;
    max-width: 100%;
}

.entry figcaption {
    color: var(--f7-list-item-text-text-color);
    font-size: 14px;
}

.entry pre {
    background: var(--f7-page-bg-color);
    border-radius: var(--f7-block-inset-border-radius);
    direction: ltr;
    overflow: auto;
    padding: var(--f7-block-padding-vertical) var(--f7-block-padding-horizontal);
}

.entry pre code {
    direction: ltr;
    padding: 0;
    unicode-bidi: bidi-override;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Code
|------------------------------------------------------------------------------
*/

.wp-block-code {
    background: var(--f7-page-bg-color);
    border-radius: var(--f7-block-inset-border-radius);
    direction: ltr;
    overflow: auto;
    padding: var(--f7-block-padding-vertical) var(--f7-block-padding-horizontal);
}

.wp-block-code code {
    direction: ltr;
    unicode-bidi: bidi-override;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Columns
|------------------------------------------------------------------------------
*/

.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
}

.wp-block-column {
    box-sizing: border-box;
    flex-grow: 1;
    margin-bottom: calc(var(--f7-block-margin-vertical) / 2);
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.wp-block-column.is-vertically-aligned-top {
    align-self: flex-start;
}

.wp-block-column.is-vertically-aligned-center {
    align-self: center;
}

.wp-block-column.is-vertically-aligned-bottom {
    align-self: flex-end;
}

.wp-block-column > * {
    margin: calc(var(--f7-block-margin-vertical) / 2) 0;
}

.wp-block-column > :first-child {
    margin-top: 0;
}

.wp-block-column > :last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {

    .wp-block-columns {
        flex-wrap: nowrap;
    }

    .wp-block-column:not(:first-child) {
        margin-left: var(--f7-block-padding-horizontal);
    }

    [dir=rtl] .wp-block-column:not(:first-child) {
        margin-left: 0;
        margin-right: var(--f7-block-padding-horizontal);
    }

}

@media (min-width: 568px) {

    .wp-block-columns {
        margin-bottom: calc(var(--f7-block-margin-vertical) / -2) !important;
    }

    .wp-block-column {
        flex-basis: calc(50% - calc(var(--f7-block-padding-horizontal) / 2));
        flex-grow: 0;
    }

    .wp-block-column:nth-child(2n) {
        margin-left: var(--f7-block-padding-horizontal);
    }

    [dir=rtl] .wp-block-column:nth-child(2n) {
        margin-left: 0;
        margin-right: var(--f7-block-padding-horizontal);
    }

}

@media (max-width: 567px) {

    .wp-block-columns {
        margin-bottom: unset;
    }

    .wp-block-column {
        flex-basis: 100%;
    }

    .wp-block-column:last-child {
        margin-bottom: 0;
    }

}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Cover
|------------------------------------------------------------------------------
*/

.wp-block-cover, .wp-block-cover-image {
    align-items: center;
    background-color: var(--f7-page-bg-color);
    background-position: center;
    background-size: cover;
    border-radius: var(--f7-block-inset-border-radius);
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 384px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.wp-block-cover.has-parallax, .wp-block-cover-image.has-parallax {
    background-attachment: fixed;
}

.device-ios .wp-block-cover.has-parallax, .wp-block-cover-image.has-parallax {
    background-attachment: unset;
}

.wp-block-cover__inner-container {
    color: #FFFFFF;
    padding: var(--f7-block-padding-vertical);
    width: 100%;
    z-index: 1;
}

.wp-block-cover__inner-container > * {
    margin: calc(var(--f7-block-margin-vertical) / 2) 0;
}

.wp-block-cover__inner-container > :first-child {
    margin-top: 0;
}

.wp-block-cover__inner-container > :last-child {
    margin-bottom: 0;
}

.wp-block-cover__inner-container .has-large-font-size {
    font-size: 24px !important;
    font-weight: 600;
}

.wp-block-cover__video-background {
    border-radius: var(--f7-block-inset-border-radius);
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Embed
|------------------------------------------------------------------------------
*/

.wp-block-embed {
    overflow: hidden;
}

.wp-block-embed.alignleft {
    text-align: left;
}

[dir=rtl] .wp-block-embed.alignleft {
    text-align: right;
}

.wp-block-embed.aligncenter {
    text-align: center;
}

.wp-block-embed.alignright {
    text-align: right;
}

[dir=rtl] .wp-block-embed.alignright {
    text-align: left;
}

.wp-block-embed figcaption {
    margin-top: 8px;
}

.wp-block-embed .wp-block-embed__wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wp-block-embed.alignleft .wp-block-embed__wrapper {
    justify-content: flex-start;
}

.wp-block-embed.aligncenter .wp-block-embed__wrapper {
    justify-content: center;
}

.wp-block-embed.alignright .wp-block-embed__wrapper {
    justify-content: flex-end;
}

.wp-block-embed blockquote {
    background-color: unset;
    border-radius: unset;
}

.wp-block-embed iframe {
    clip: unset !important;
    overflow: hidden;
    position: relative !important;
}

.wp-block-embed-wordpress blockquote {
    margin-bottom: 16px;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - File
|------------------------------------------------------------------------------
*/

.wp-block-file {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    justify-content: space-between;
}

.wp-block-file .wp-block-file__button {
    background-color: var(--f7-theme-color);
    border-radius: var(--f7-button-border-radius);
    color: #FFFFFF;
    display: inline-block;
    font-size: var(--f7-button-large-font-size);
    font-weight: var(--f7-button-large-font-weight);
    height: var(--f7-button-large-height);
    letter-spacing: var(--f7-button-letter-spacing);
    line-height: var(--f7-button-large-height);
    padding: 0 var(--f7-button-padding-horizontal);
    text-align: center;
    text-decoration: none;
    text-transform: var(--f7-button-large-text-transform);
    vertical-align: middle;
}

.aurora .wp-block-file .wp-block-file__button:hover {
    background-color: var(--f7-theme-color-tint);
}

.aurora .wp-block-file .wp-block-file__button.active-state {
    background-color: var(--f7-theme-color-shade);
}

.ios .wp-block-file .wp-block-file__button.active-state {
    background-color: var(--f7-theme-color-tint);
}

.md .wp-block-file .wp-block-file__button.active-state {
    background-color: var(--f7-theme-color-shade);
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Gallery
|------------------------------------------------------------------------------
*/

.wp-block-gallery, .blocks-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.wp-block-gallery ul {
    list-style: none;
    margin: 0;
    margin-bottom: calc(var(--f7-block-margin-vertical) / -2);
}

.wp-block-gallery.alignleft ul {
    margin-left: 0;
    margin-right: auto;
}

[dir=rtl] .wp-block-gallery.alignleft ul {
    margin-left: auto;
    margin-right: 0;
}

.wp-block-gallery.aligncenter ul {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-gallery.alignright ul {
    margin-left: auto;
    margin-right: 0;
}

[dir=rtl] .wp-block-gallery.alignright ul {
    margin-left: 0;
    margin-right: auto;
}

.wp-block-gallery .blocks-gallery-caption {
    margin-top: 8px;
    width: 100%;
}

.wp-block-gallery.alignleft .blocks-gallery-caption {
    text-align: left;
}

[dir=rtl] .wp-block-gallery.alignleft .blocks-gallery-caption {
    text-align: right;
}

.wp-block-gallery.aligncenter .blocks-gallery-caption {
    text-align: center;
}

.wp-block-gallery.alignright .blocks-gallery-caption {
    text-align: right;
}

[dir=rtl] .wp-block-gallery.alignright .blocks-gallery-caption {
    text-align: left;
}

.wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item,
.blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    margin: 0 var(--f7-block-padding-horizontal) calc(var(--f7-block-margin-vertical) / 2) 0;
    position: relative;
    width: calc((100% - var(--f7-block-padding-horizontal)) / 2);
}

[dir=rtl] .wp-block-gallery .blocks-gallery-image, [dir=rtl] .wp-block-gallery .blocks-gallery-item,
[dir=rtl] .blocks-gallery-grid .blocks-gallery-image, [dir=rtl] .blocks-gallery-grid .blocks-gallery-item {
    margin: 0 0 calc(var(--f7-block-margin-vertical) / 2) var(--f7-block-padding-horizontal);
}

.wp-block-gallery .blocks-gallery-image:nth-of-type(2n), .wp-block-gallery .blocks-gallery-item:nth-of-type(2n),
.blocks-gallery-grid .blocks-gallery-image:nth-of-type(2n), .blocks-gallery-grid .blocks-gallery-item:nth-of-type(2n) {
    margin-right: 0;
}

[dir=rtl] .wp-block-gallery .blocks-gallery-image:nth-of-type(2n), [dir=rtl] .wp-block-gallery .blocks-gallery-item:nth-of-type(2n),
[dir=rtl] .blocks-gallery-grid .blocks-gallery-image:nth-of-type(2n), [dir=rtl] .blocks-gallery-grid .blocks-gallery-item:nth-of-type(2n) {
    margin-left: 0;
}

.wp-block-gallery.columns-1 .blocks-gallery-image, .wp-block-gallery.columns-1 .blocks-gallery-item,
.blocks-gallery-grid.columns-1 .blocks-gallery-image, .blocks-gallery-grid.columns-1 .blocks-gallery-item {
    width: 100%;
}

.wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item,
.blocks-gallery-grid.columns-3 .blocks-gallery-image, .blocks-gallery-grid.columns-3 .blocks-gallery-item,
.wp-block-gallery.columns-4 .blocks-gallery-image, .wp-block-gallery.columns-4 .blocks-gallery-item,
.blocks-gallery-grid.columns-4 .blocks-gallery-image, .blocks-gallery-grid.columns-4 .blocks-gallery-item,
.wp-block-gallery.columns-5 .blocks-gallery-image, .wp-block-gallery.columns-5 .blocks-gallery-item,
.blocks-gallery-grid.columns-5 .blocks-gallery-image, .blocks-gallery-grid.columns-5 .blocks-gallery-item,
.wp-block-gallery.columns-6 .blocks-gallery-image, .wp-block-gallery.columns-6 .blocks-gallery-item,
.blocks-gallery-grid.columns-6 .blocks-gallery-image, .blocks-gallery-grid.columns-6 .blocks-gallery-item,
.wp-block-gallery.columns-7 .blocks-gallery-image, .wp-block-gallery.columns-7 .blocks-gallery-item,
.blocks-gallery-grid.columns-7 .blocks-gallery-image, .blocks-gallery-grid.columns-7 .blocks-gallery-item,
.wp-block-gallery.columns-8 .blocks-gallery-image, .wp-block-gallery.columns-8 .blocks-gallery-item,
.blocks-gallery-grid.columns-8 .blocks-gallery-image, .blocks-gallery-grid.columns-8 .blocks-gallery-item {
    margin-right: var(--f7-block-padding-horizontal);
}

.wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item,
.blocks-gallery-grid.columns-3 .blocks-gallery-image, .blocks-gallery-grid.columns-3 .blocks-gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 2)) / 3);
}

.wp-block-gallery.columns-4 .blocks-gallery-image, .wp-block-gallery.columns-4 .blocks-gallery-item,
.blocks-gallery-grid.columns-4 .blocks-gallery-image, .blocks-gallery-grid.columns-4 .blocks-gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 3)) / 4);
}

.wp-block-gallery.columns-5 .blocks-gallery-image, .wp-block-gallery.columns-5 .blocks-gallery-item,
.blocks-gallery-grid.columns-5 .blocks-gallery-image, .blocks-gallery-grid.columns-5 .blocks-gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 4)) / 5);
}

.wp-block-gallery.columns-6 .blocks-gallery-image, .wp-block-gallery.columns-6 .blocks-gallery-item,
.blocks-gallery-grid.columns-6 .blocks-gallery-image, .blocks-gallery-grid.columns-6 .blocks-gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 5)) / 6);
}

.wp-block-gallery.columns-7 .blocks-gallery-image, .wp-block-gallery.columns-7 .blocks-gallery-item,
.blocks-gallery-grid.columns-7 .blocks-gallery-image, .blocks-gallery-grid.columns-7 .blocks-gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 6)) / 7);
}

.wp-block-gallery.columns-8 .blocks-gallery-image, .wp-block-gallery.columns-8 .blocks-gallery-item,
.blocks-gallery-grid.columns-8 .blocks-gallery-image, .blocks-gallery-grid.columns-8 .blocks-gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 7)) / 8);
}

[dir=rtl] .wp-block-gallery.columns-3 .blocks-gallery-image, [dir=rtl] .wp-block-gallery.columns-3 .blocks-gallery-item,
[dir=rtl] .blocks-gallery-grid.columns-3 .blocks-gallery-image, [dir=rtl] .blocks-gallery-grid.columns-3 .blocks-gallery-item,
[dir=rtl] .wp-block-gallery.columns-4 .blocks-gallery-image, [dir=rtl] .wp-block-gallery.columns-4 .blocks-gallery-item,
[dir=rtl] .blocks-gallery-grid.columns-4 .blocks-gallery-image, [dir=rtl] .blocks-gallery-grid.columns-4 .blocks-gallery-item,
[dir=rtl] .wp-block-gallery.columns-5 .blocks-gallery-image, [dir=rtl] .wp-block-gallery.columns-5 .blocks-gallery-item,
[dir=rtl] .blocks-gallery-grid.columns-5 .blocks-gallery-image, [dir=rtl] .blocks-gallery-grid.columns-5 .blocks-gallery-item,
[dir=rtl] .wp-block-gallery.columns-6 .blocks-gallery-image, [dir=rtl] .wp-block-gallery.columns-6 .blocks-gallery-item,
[dir=rtl] .blocks-gallery-grid.columns-6 .blocks-gallery-image, [dir=rtl] .blocks-gallery-grid.columns-6 .blocks-gallery-item,
[dir=rtl] .wp-block-gallery.columns-7 .blocks-gallery-image, [dir=rtl] .wp-block-gallery.columns-7 .blocks-gallery-item,
[dir=rtl] .blocks-gallery-grid.columns-7 .blocks-gallery-image, [dir=rtl] .blocks-gallery-grid.columns-7 .blocks-gallery-item,
[dir=rtl] .wp-block-gallery.columns-8 .blocks-gallery-image, [dir=rtl] .wp-block-gallery.columns-8 .blocks-gallery-item,
[dir=rtl] .blocks-gallery-grid.columns-8 .blocks-gallery-image, [dir=rtl] .blocks-gallery-grid.columns-8 .blocks-gallery-item {
    margin-left: var(--f7-block-padding-horizontal);
    margin-right: 0;
}

.wp-block-gallery.columns-1 .blocks-gallery-image:nth-of-type(1n), .wp-block-gallery.columns-1 .blocks-gallery-item:nth-of-type(1n),
.blocks-gallery-grid.columns-1 .blocks-gallery-image:nth-of-type(1n), .blocks-gallery-grid.columns-1 .blocks-gallery-item:nth-of-type(1n),
.wp-block-gallery.columns-3 .blocks-gallery-image:nth-of-type(3n), .wp-block-gallery.columns-3 .blocks-gallery-item:nth-of-type(3n),
.blocks-gallery-grid.columns-3 .blocks-gallery-image:nth-of-type(3n), .blocks-gallery-grid.columns-3 .blocks-gallery-item:nth-of-type(3n),
.wp-block-gallery.columns-4 .blocks-gallery-image:nth-of-type(4n), .wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n),
.blocks-gallery-grid.columns-4 .blocks-gallery-image:nth-of-type(4n), .blocks-gallery-grid.columns-4 .blocks-gallery-item:nth-of-type(4n),
.wp-block-gallery.columns-5 .blocks-gallery-image:nth-of-type(5n), .wp-block-gallery.columns-5 .blocks-gallery-item:nth-of-type(5n),
.blocks-gallery-grid.columns-5 .blocks-gallery-image:nth-of-type(5n), .blocks-gallery-grid.columns-5 .blocks-gallery-item:nth-of-type(5n),
.wp-block-gallery.columns-6 .blocks-gallery-image:nth-of-type(6n), .wp-block-gallery.columns-6 .blocks-gallery-item:nth-of-type(6n),
.blocks-gallery-grid.columns-6 .blocks-gallery-image:nth-of-type(6n), .blocks-gallery-grid.columns-6 .blocks-gallery-item:nth-of-type(6n),
.wp-block-gallery.columns-7 .blocks-gallery-image:nth-of-type(7n), .wp-block-gallery.columns-7 .blocks-gallery-item:nth-of-type(7n),
.blocks-gallery-grid.columns-7 .blocks-gallery-image:nth-of-type(7n), .blocks-gallery-grid.columns-7 .blocks-gallery-item:nth-of-type(7n),
.wp-block-gallery.columns-8 .blocks-gallery-image:nth-of-type(8n), .wp-block-gallery.columns-8 .blocks-gallery-item:nth-of-type(8n),
.blocks-gallery-grid.columns-8 .blocks-gallery-image:nth-of-type(8n), .blocks-gallery-grid.columns-8 .blocks-gallery-item:nth-of-type(8n) {
    margin-right: 0;
}

[dir=rtl] .wp-block-gallery.columns-1 .blocks-gallery-image:nth-of-type(1n), [dir=rtl] .wp-block-gallery.columns-1 .blocks-gallery-item:nth-of-type(1n),
[dir=rtl] .blocks-gallery-grid.columns-1 .blocks-gallery-image:nth-of-type(1n), [dir=rtl] .blocks-gallery-grid.columns-1 .blocks-gallery-item:nth-of-type(1n),
[dir=rtl] .wp-block-gallery.columns-3 .blocks-gallery-image:nth-of-type(3n), [dir=rtl] .wp-block-gallery.columns-3 .blocks-gallery-item:nth-of-type(3n),
[dir=rtl] .blocks-gallery-grid.columns-3 .blocks-gallery-image:nth-of-type(3n), [dir=rtl] .blocks-gallery-grid.columns-3 .blocks-gallery-item:nth-of-type(3n),
[dir=rtl] .wp-block-gallery.columns-4 .blocks-gallery-image:nth-of-type(4n), [dir=rtl] .wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n),
[dir=rtl] .blocks-gallery-grid.columns-4 .blocks-gallery-image:nth-of-type(4n), [dir=rtl] .blocks-gallery-grid.columns-4 .blocks-gallery-item:nth-of-type(4n),
[dir=rtl] .wp-block-gallery.columns-5 .blocks-gallery-image:nth-of-type(5n), [dir=rtl] .wp-block-gallery.columns-5 .blocks-gallery-item:nth-of-type(5n),
[dir=rtl] .blocks-gallery-grid.columns-5 .blocks-gallery-image:nth-of-type(5n), [dir=rtl] .blocks-gallery-grid.columns-5 .blocks-gallery-item:nth-of-type(5n),
[dir=rtl] .wp-block-gallery.columns-6 .blocks-gallery-image:nth-of-type(6n), [dir=rtl] .wp-block-gallery.columns-6 .blocks-gallery-item:nth-of-type(6n),
[dir=rtl] .blocks-gallery-grid.columns-6 .blocks-gallery-image:nth-of-type(6n), [dir=rtl] .blocks-gallery-grid.columns-6 .blocks-gallery-item:nth-of-type(6n),
[dir=rtl] .wp-block-gallery.columns-7 .blocks-gallery-image:nth-of-type(7n), [dir=rtl] .wp-block-gallery.columns-7 .blocks-gallery-item:nth-of-type(7n),
[dir=rtl] .blocks-gallery-grid.columns-7 .blocks-gallery-image:nth-of-type(7n), [dir=rtl] .blocks-gallery-grid.columns-7 .blocks-gallery-item:nth-of-type(7n),
[dir=rtl] .wp-block-gallery.columns-8 .blocks-gallery-image:nth-of-type(8n), [dir=rtl] .wp-block-gallery.columns-8 .blocks-gallery-item:nth-of-type(8n),
[dir=rtl] .blocks-gallery-grid.columns-8 .blocks-gallery-image:nth-of-type(8n), [dir=rtl] .blocks-gallery-grid.columns-8 .blocks-gallery-item:nth-of-type(8n) {
    margin-left: 0;
}

.wp-block-gallery .blocks-gallery-image:last-child, .wp-block-gallery .blocks-gallery-item:last-child,
.blocks-gallery-grid .blocks-gallery-image:last-child, .blocks-gallery-grid .blocks-gallery-item:last-child {
    margin-right: 0;
}

[dir=rtl] .wp-block-gallery .blocks-gallery-image:last-child, [dir=rtl] .wp-block-gallery .blocks-gallery-item:last-child,
[dir=rtl] .blocks-gallery-grid .blocks-gallery-image:last-child, [dir=rtl] .blocks-gallery-grid .blocks-gallery-item:last-child {
    margin-left: 0;
}

.wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure,
.blocks-gallery-grid .blocks-gallery-image figure, .blocks-gallery-grid .blocks-gallery-item figure {
    align-items: flex-end;
    display: flex;
    height: 100%;
    justify-content: flex-start;
    margin: 0;
}

.wp-block-gallery .blocks-gallery-image a, .wp-block-gallery .blocks-gallery-image img,
.wp-block-gallery .blocks-gallery-item a, .wp-block-gallery .blocks-gallery-item img,
.blocks-gallery-grid .blocks-gallery-image a, .blocks-gallery-grid .blocks-gallery-image img,
.blocks-gallery-grid .blocks-gallery-item a, .blocks-gallery-grid .blocks-gallery-item img {
    display: block;
    flex: 1;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption,
.blocks-gallery-grid .blocks-gallery-image figcaption, .blocks-gallery-grid .blocks-gallery-item figcaption {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 70%, transparent);
    border-radius: 0 0 var(--f7-block-inset-border-radius) var(--f7-block-inset-border-radius);
    bottom: 0;
    box-sizing: border-box;
    color: #FFFFFF;
    max-height: 100%;
    overflow: auto;
    padding: 40px 10px 9px;
    position: absolute;
    text-align: center;
    width: 100%;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Group
|------------------------------------------------------------------------------
*/

.wp-block-group .wp-block-group__inner-container {
    max-width: 100%;
}

.wp-block-group__inner-container > * {
    margin: calc(var(--f7-block-margin-vertical) / 2) 0;
}

.wp-block-group__inner-container > :first-child {
    margin-top: 0;
}

.wp-block-group__inner-container > :last-child {
    margin-bottom: 0;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Image
|------------------------------------------------------------------------------
*/

.wp-block-image {
    max-width: 100%;
    overflow: hidden;
}

.wp-block-image img {
    border-radius: var(--f7-block-inset-border-radius);
    display: block;
    height: auto;
    max-width: 100%;
}

.wp-block-image figcaption {
    margin-top: 8px;
}

.wp-block-image.alignleft, .wp-block-image .alignleft {
    text-align: left;
}

[dir=rtl] .wp-block-image.alignleft, [dir=rtl] .wp-block-image .alignleft {
    text-align: right;
}

.wp-block-image.aligncenter, .wp-block-image .aligncenter {
    text-align: center;
}

.wp-block-image.alignright, .wp-block-image .alignright {
    text-align: right;
}

[dir=rtl] .wp-block-image.alignright, [dir=rtl] .wp-block-image .alignright {
    text-align: left;
}

.wp-block-image.alignleft img, .wp-block-image .alignleft img {
    margin-left: 0;
    margin-right: auto;
}

[dir=rtl] .wp-block-image.alignleft img, [dir=rtl] .wp-block-image .alignleft img {
    margin-left: auto;
    margin-right: 0;
}

.wp-block-image.aligncenter img, .wp-block-image .aligncenter img {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-image.alignright img, .wp-block-image .alignright img {
    margin-left: auto;
    margin-right: 0;
}

[dir=rtl] .wp-block-image.alignright img, [dir=rtl] .wp-block-image .alignright img {
    margin-left: 0;
    margin-right: auto;
}

.wp-block-image.is-style-circle-mask figcaption {
    text-align: center;
}

.wp-block-image.is-style-circle-mask img {
    border-radius: 9999px;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>');
    mask-mode: alpha;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Latest Comments
|------------------------------------------------------------------------------
*/

.wp-block-latest-comments {
    list-style: none;
    padding: 0;
}

.wp-block-latest-comments li {
    margin: calc(var(--f7-list-item-padding-vertical) * 4) 0;
}

.wp-block-latest-comments li:first-child {
    margin-top: 0;
}

.wp-block-latest-comments li:last-child {
    margin-bottom: 0;
}

.wp-block-latest-comments.alignleft:not(.has-avatars) {
    text-align: left;
}

[dir=rtl] .wp-block-latest-comments.alignleft:not(.has-avatars) {
    text-align: right;
}

.wp-block-latest-comments.aligncenter:not(.has-avatars) {
    text-align: center;
}

.wp-block-latest-comments.alignright:not(.has-avatars) {
    text-align: right;
}

[dir=rtl] .wp-block-latest-comments.alignright:not(.has-avatars) {
    text-align: left;
}

.wp-block-latest-comments.has-avatars .wp-block-latest-comments__comment {
    min-height: 48px;
}

.wp-block-latest-comments .avatar, .wp-block-latest-comments__comment-avatar {
    border-radius: 50%;
    display: block;
    float: left;
    height: 48px;
    margin-right: 16px;
    width: 48px;
}

[dir=rtl] .wp-block-latest-comments .avatar, [dir=rtl] .wp-block-latest-comments__comment-avatar {
    float: right;
    margin-left: 16px;
    margin-right: 0;
}

.wp-block-latest-comments.has-avatars .wp-block-latest-comments__comment-meta,
.wp-block-latest-comments.has-avatars .wp-block-latest-comments__comment-excerpt {
    margin-left: 64px;
}

[dir=rtl] .wp-block-latest-comments.has-avatars .wp-block-latest-comments__comment-meta,
[dir=rtl] .wp-block-latest-comments.has-avatars .wp-block-latest-comments__comment-excerpt {
    margin-left: 0;
    margin-right: 64px;
}

.wp-block-latest-comments .wp-block-latest-comments__comment-meta {
    font-size: 16px;
    font-weight: 600;
}

.wp-block-latest-comments .wp-block-latest-comments__comment-date {
    color: var(--f7-list-item-text-text-color);
    display: block;
    font-weight: normal;
    margin-top: 4px;
}

.wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
    margin-top: 8px;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Latest Posts
|------------------------------------------------------------------------------
*/

.wp-block-latest-posts {
    list-style: none;
    padding: 0;
}

.wp-block-latest-posts li {
    margin: calc(var(--f7-list-item-padding-vertical) * 4) 0;
}

.wp-block-latest-posts li:first-child {
    margin-top: 0;
}

.wp-block-latest-posts li:last-child {
    margin-bottom: 0;
}

.wp-block-latest-posts.alignleft {
    text-align: left;
}

[dir=rtl] .wp-block-latest-posts.alignleft {
    text-align: right;
}

.wp-block-latest-posts.aligncenter {
    text-align: center;
}

.wp-block-latest-posts.alignright {
    text-align: right;
}

[dir=rtl] .wp-block-latest-posts.alignright {
    text-align: left;
}

.wp-block-latest-posts a {
    font-size: 16px;
    font-weight: 600;
}

.wp-block-latest-posts .wp-block-latest-posts__post-date {
    color: var(--f7-list-item-text-text-color);
    display: block;
    margin-top: 4px;
}

.wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
    margin-top: 8px;
}

.wp-block-latest-posts.is-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

.wp-block-latest-posts.is-grid li {
    margin: calc(var(--f7-block-margin-vertical) / 2) var(--f7-block-padding-horizontal) calc(var(--f7-block-margin-vertical) / 2) 0;
    width: 100%;
}

[dir=rtl] .wp-block-latest-posts.is-grid li {
    margin: calc(var(--f7-block-margin-vertical) / 2) 0 calc(var(--f7-block-margin-vertical) / 2) var(--f7-block-padding-horizontal);
}

@media (min-width: 568px) {

    .wp-block-latest-posts.is-grid {
        margin-bottom: calc(var(--f7-block-margin-vertical) / -2);
        margin-top: calc(var(--f7-block-margin-vertical) / -2);
    }

    .wp-block-latest-posts.columns-2 li {
        width: calc(50% - var(--f7-block-padding-horizontal));
    }

    .wp-block-latest-posts.columns-3 li {
        width: calc(33.33333% - var(--f7-block-padding-horizontal));
    }

    .wp-block-latest-posts.columns-4 li {
        width: calc(33.33333% - var(--f7-block-padding-horizontal));
    }

    .wp-block-latest-posts.columns-5 li {
        width: calc(20% - var(--f7-block-padding-horizontal));
    }

    .wp-block-latest-posts.columns-6 li {
        width: calc(16.66667% - var(--f7-block-padding-horizontal));
    }

}

@media (max-width: 567px) {

    .wp-block-latest-posts.is-grid li:first-child {
        margin-top: 0;
    }

    .wp-block-latest-posts.is-grid li:last-child {
        margin-bottom: 0;
    }

}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Media & Text
|------------------------------------------------------------------------------
*/

.wp-block-media-text {
    background-color: var(--f7-page-bg-color);
    border-radius: var(--f7-block-inset-border-radius);
    display: grid;
    grid-template-columns: 50% 1fr;
    grid-template-rows: auto;
    overflow: hidden;
}

.wp-block-media-text .wp-block-media-text__media {
    align-self: center;
    background-size: cover;
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    margin: 0;
    min-height: 256px;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    grid-column: 2;
    grid-row: 1;
}

.wp-block-media-text:not(.is-image-fill) .wp-block-media-text__media {
    min-height: unset;
    height: unset;
}

.wp-block-media-text .wp-block-media-text__content {
    align-self: center;
    box-sizing: border-box;
    grid-column: 2;
    grid-row: 1;
    padding: var(--f7-block-padding-vertical) var(--f7-block-padding-horizontal);
    word-break: break-word;
}

.wp-block-media-text .wp-block-media-text__content > * {
    margin: calc(var(--f7-block-margin-vertical) / 2) 0;
}

.wp-block-media-text .wp-block-media-text__content > :first-child {
    margin-top: 0;
}

.wp-block-media-text .wp-block-media-text__content > :last-child {
    margin-bottom: 0;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 1;
}

.wp-block-media-text > figure > img, .wp-block-media-text > figure > video {
    border-radius: 0;
    max-width: unset;
    vertical-align: middle;
    width: 100%;
}

.wp-block-media-text.is-image-fill figure > img {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media, .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content {
    align-self: start;
}

.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media, .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content {
    align-self: center;
}

.wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media, .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__content {
    align-self: end;
}

@media (max-width: 568px) {

    .wp-block-media-text.is-stacked-on-mobile {
        grid-template-columns: 100% !important;
    }

    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 1;
    }

    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        grid-column: 1;
        grid-row: 2;
    }

    .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 2;
    }

    .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__content {
        grid-column: 1;
        grid-row: 1;
    }

}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Paragraph
|------------------------------------------------------------------------------
*/

.entry p.has-background {
    border-radius: var(--f7-block-inset-border-radius);
    padding: var(--f7-block-padding-vertical) var(--f7-block-padding-horizontal);
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Preformatted
|------------------------------------------------------------------------------
*/

.wp-block-preformatted {
    background: var(--f7-page-bg-color);
    border-radius: var(--f7-block-inset-border-radius);
    overflow: auto;
    padding: var(--f7-block-padding-vertical) var(--f7-block-padding-horizontal);
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Pullquote
|------------------------------------------------------------------------------
*/

.wp-block-pullquote {
    font-size: 18px;
    font-weight: 600;
    margin: calc(var(--f7-block-margin-vertical) * 1.5 ) 0 var(--f7-block-margin-vertical) 0;
    position: relative;
    text-align: center;
}

.wp-block-pullquote.alignleft {
    text-align: left;
}

[dir=rtl] .wp-block-pullquote.alignleft {
    text-align: right;
}

.wp-block-pullquote.alignright {
    text-align: right;
}

[dir=rtl] .wp-block-pullquote.alignright {
    text-align: left;
}

.wp-block-pullquote:before {
    background: var(--f7-theme-color);
    border-radius: 50%;
    color: #FFFFFF;
    content: "“";
    display: block;
    font-family: serif;
    font-size: 64px;
    font-weight: 500;
    height: 48px;
    left: 50%;
    line-height: 1.2;
    margin: 0 auto;
    margin-bottom: calc(var(--f7-block-margin-vertical) / -2);
    position: absolute;
    text-align: center;
    top: 0;
    transform: translateY(-50%) translateX(-50%);
    width: 48px;
}

.wp-block-pullquote blockquote {
    background-color: unset;
    border: none;
    padding-right: var(--f7-block-padding-vertical);
    padding-top: var(--f7-block-padding-vertical);
}

.wp-block-pullquote blockquote:before {
    display: none;
}

.wp-block-pullquote cite {
    font-size: var(--f7-font-size);
    font-style: normal;
    margin-bottom: calc(var(--f7-block-margin-vertical) / 2);
    margin-top: 0;
}

.wp-block-pullquote.is-style-solid-color blockquote cite {
    color: unset;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Quote
|------------------------------------------------------------------------------
*/

.wp-block-quote.is-style-large {
    font-size: 20px;
    font-weight: 600;
}

.wp-block-quote.is-style-large:before {
    font-size: 72px;
    height: 36px;
    width: 36px;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - RSS
|------------------------------------------------------------------------------
*/

.wp-block-rss {
    list-style: none;
    padding: 0;
}

.wp-block-rss.alignleft {
    text-align: left;
}

[dir=rtl] .wp-block-rss.alignleft {
    text-align: right;
}

.wp-block-rss.aligncenter {
    text-align: center;
}

.wp-block-rss.alignright {
    text-align: right;
}

[dir=rtl] .wp-block-rss.alignright {
    text-align: left;
}

.wp-block-rss + .wp-block-rss {
    margin-top: calc(var(--f7-list-item-padding-vertical) * 4);
}

.wp-block-rss .wp-block-rss__item {
    margin: calc(var(--f7-list-item-padding-vertical) * 4) 0;
}

.wp-block-rss .wp-block-rss__item:first-child {
    margin-top: 0;
}

.wp-block-rss .wp-block-rss__item:last-child {
    margin-bottom: 0;
}

.wp-block-rss .wp-block-rss__item-title {
    font-size: 16px;
    font-weight: 600;
}

.wp-block-rss .wp-block-rss__item-publish-date {
    color: var(--f7-list-item-text-text-color);
    display: block;
    margin-top: 4px;
}

.wp-block-rss .wp-block-rss__item-excerpt {
    margin-top: 8px;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Separator
|------------------------------------------------------------------------------
*/

.wp-block-separator {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(var(--f7-theme-color-rgb), 0.75), rgba(0, 0, 0, 0));
    border: 0;
    height: 4px;
    margin: calc(var(--f7-block-margin-vertical) * 1.5) 0;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Shortcode
|------------------------------------------------------------------------------
*/

.wp-audio-shortcode {
    width: 100%;
}

.wp-caption {
    max-width: 100%;
    overflow: hidden;
}

.wp-caption img {
    border-radius: var(--f7-block-inset-border-radius);
    display: block;
    height: auto;
    max-width: 100%;
}

.wp-caption-text {
    color: var(--f7-list-item-text-text-color);
    font-size: 14px;
}

.wp-caption figcaption, .wp-caption .wp-caption-text {
    margin-top: 8px;
}

.wp-caption.alignleft, .wp-caption .alignleft {
    text-align: left;
}

[dir=rtl] .wp-caption.alignleft, [dir=rtl] .wp-caption .alignleft {
    text-align: right;
}

.wp-caption.aligncenter, .wp-caption .aligncenter {
    text-align: center;
}

.wp-caption.alignright, .wp-caption .alignright {
    text-align: right;
}

[dir=rtl] .wp-caption.alignright, [dir=rtl] .wp-caption .alignright {
    text-align: left;
}

.wp-caption.alignleft img, .wp-caption .alignleft img {
    margin-left: 0;
    margin-right: auto;
}

[dir=rtl] .wp-caption.alignleft img, [dir=rtl] .wp-caption .alignleft img {
    margin-left: auto;
    margin-right: 0;
}

.wp-caption.aligncenter img, .wp-caption .aligncenter img {
    margin-left: auto;
    margin-right: auto;
}

.wp-caption.alignright img, .wp-caption .alignright img {
    margin-left: auto;
    margin-right: 0;
}

[dir=rtl] .wp-caption.alignright img, [dir=rtl] .wp-caption .alignright img {
    margin-left: 0;
    margin-right: auto;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    margin-bottom: calc(var(--f7-block-margin-vertical) / -2);
    padding: 0;
}

.gallery-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    margin: 0 var(--f7-block-padding-horizontal) calc(var(--f7-block-margin-vertical) / 2) 0;
    position: relative;
    width: calc((100% - var(--f7-block-padding-horizontal)) / 2);
}

[dir=rtl] .gallery-item {
    margin: 0 0 calc(var(--f7-block-margin-vertical) / 2) var(--f7-block-padding-horizontal);
}

.gallery-item:nth-of-type(2n) {
    margin-right: 0;
}

[dir=rtl] .gallery-item:nth-of-type(2n) {
    margin-left: 0;
}

.gallery-columns-1 .gallery-item {
    width: 100%;
}

.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item,
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
    margin-right: var(--f7-block-padding-horizontal);
}

.gallery-columns-3 .gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 2)) / 3);
}

.gallery-columns-4 .gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 3)) / 4);
}

.gallery-columns-5 .gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 4)) / 5);
}

.gallery-columns-6 .gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 5)) / 6);
}

.gallery-columns-7 .gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 6)) / 7);
}

.gallery-columns-8 .gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 7)) / 8);
}

.gallery-columns-9 .gallery-item {
    width: calc((100% - calc(var(--f7-block-padding-horizontal) * 8)) / 9);
}

[dir=rtl] .gallery-columns-1 .gallery-item,
[dir=rtl] .gallery-columns-3 .gallery-item,
[dir=rtl] .gallery-columns-4 .gallery-item,
[dir=rtl] .gallery-columns-5 .gallery-item,
[dir=rtl] .gallery-columns-6 .gallery-item,
[dir=rtl] .gallery-columns-7 .gallery-item,
[dir=rtl] .gallery-columns-8 .gallery-item,
[dir=rtl] .gallery-columns-9 .gallery-item {
    margin-left: var(--f7-block-padding-horizontal);
    margin-right: 0;
}

.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery-columns-9 .gallery-item:nth-of-type(9n) {
    margin-right: 0;
}

[dir=rtl] .gallery-columns-1 .gallery-item:nth-of-type(1n),
[dir=rtl] .gallery-columns-3 .gallery-item:nth-of-type(3n),
[dir=rtl] .gallery-columns-4 .gallery-item:nth-of-type(4n),
[dir=rtl] .gallery-columns-5 .gallery-item:nth-of-type(5n),
[dir=rtl] .gallery-columns-6 .gallery-item:nth-of-type(6n),
[dir=rtl] .gallery-columns-7 .gallery-item:nth-of-type(7n),
[dir=rtl] .gallery-columns-8 .gallery-item:nth-of-type(8n),
[dir=rtl] .gallery-columns-9 .gallery-item:nth-of-type(9n) {
    margin-left: 0;
}

.gallery-item:last-child {
    margin-right: 0;
}

[dir=rtl] .gallery-item:last-child {
    margin-left: 0;
}

.gallery-item a, .gallery-item img {
    display: block;
    flex: 1;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

.wp-video {
    max-width: 100%;
}

.wp-video-shortcode {
    border-radius: var(--f7-block-inset-border-radius);
    display: block;
    height: auto;
    max-width: 100%;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Spacer
|------------------------------------------------------------------------------
*/

.wp-block-spacer {
    display: block;
    margin: 0;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Table
|------------------------------------------------------------------------------
*/

.wp-block-table {
    overflow-x: auto;
}

.wp-block-table table {
    border: none;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

[dir=rtl] .wp-block-table table {
    text-align: right;
}

.wp-block-table thead th, .wp-block-table thead td, .wp-block-table tfoot td {
    color: var(--f7-table-head-text-color);
    font-size: var(--f7-table-head-font-size);
    font-weight: var(--f7-table-head-font-weight);
    height: var(--f7-table-head-cell-height);
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-block-table tbody td:before, .wp-block-table tbody th:before, .wp-block-table tfoot td:before {
    background-color: var(--f7-table-cell-border-color);
    bottom: auto;
    content: '';
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: 0;
    transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
    transform-origin: 50% 0%;
    width: 100%;
    z-index: 15;
}

.wp-block-table tbody {
    font-size: var(--f7-table-body-font-size);
}

.wp-block-table tbody th, .wp-block-table tbody td {
    height: var(--f7-table-body-cell-height);
}

.device-desktop .wp-block-table tbody tr:hover {
    background: var(--f7-table-selected-row-bg-color);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: var(--f7-table-selected-row-bg-color);
}

.wp-block-table.is-style-stripes tbody td:before, .wp-block-table.is-style-stripes tbody th:before, .wp-block-table.is-style-stripes tfoot td:before {
    background-color: transparent;
}

.wp-block-table th, .wp-block-table td {
    --f7-table-cell-padding-left: var(--f7-table-cell-padding-horizontal);
    --f7-table-cell-padding-right: var(--f7-table-cell-padding-horizontal);
    box-sizing: border-box;
    padding-bottom: var(--f7-table-cell-padding-vertical);
    padding-left: var(--f7-table-cell-padding-left);
    padding-right: var(--f7-table-cell-padding-right);
    padding-top: var(--f7-table-cell-padding-vertical);
    position: relative;

}

.wp-block-table th:first-child, .wp-block-table td:first-child {
    --f7-table-cell-padding-left: var(--f7-table-edge-cell-padding-horizontal);
}

.wp-block-table th:last-child, .wp-block-table td:last-child {
    --f7-table-cell-padding-right: var(--f7-table-edge-cell-padding-horizontal);
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Tag Cloud
|------------------------------------------------------------------------------
*/

.wp-block-tag-cloud .tag-cloud-link {
    align-items: center;
    background-color: var(--f7-chip-bg-color);
    border-radius: var(--f7-chip-height);
    box-sizing: border-box;
    color: var(--f7-chip-text-color);
    display: inline-flex;
    font-size: var(--f7-chip-font-size) !important;
    font-weight: var(--f7-chip-font-weight);
    height: var(--f7-chip-height);
    line-height: var(--f7-chip-height);
    margin: 2px 0;
    padding-left: var(--f7-chip-padding-horizontal);
    padding-right: var(--f7-chip-padding-horizontal);
    position: relative;
    vertical-align: middle;
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Verse
|------------------------------------------------------------------------------
*/

.wp-block-verse {
    background: var(--f7-page-bg-color);
    border-radius: var(--f7-block-inset-border-radius);
    overflow: auto;
    padding: var(--f7-block-padding-vertical) var(--f7-block-padding-horizontal);
}

/*
|------------------------------------------------------------------------------
| Gutenberg Block - Video
|------------------------------------------------------------------------------
*/

.wp-block-video {
    max-width: 100%;
    overflow: hidden;
}

.wp-block-video video {
    border-radius: var(--f7-block-inset-border-radius);
    display: block;
    height: auto;
    max-width: 100%;
}

.wp-block-video figcaption {
    margin-top: 8px;
}

.wp-block-video.alignleft, .wp-block-video .alignleft {
    text-align: left;
}

[dir=rtl] .wp-block-video.alignleft, [dir=rtl] .wp-block-video .alignleft {
    text-align: right;
}

.wp-block-video.aligncenter, .wp-block-video .aligncenter {
    text-align: center;
}

.wp-block-video.alignright, .wp-block-video .alignright {
    text-align: right;
}

[dir=rtl] .wp-block-video.alignright, [dir=rtl] .wp-block-video .alignright {
    text-align: left;
}

.wp-block-video.alignleft video, .wp-block-video .alignleft video {
    margin-left: 0;
    margin-right: auto;
}

[dir=rtl] .wp-block-video.alignleft video, [dir=rtl] .wp-block-video .alignleft video {
    margin-left: auto;
    margin-right: 0;
}

.wp-block-video.aligncenter video, .wp-block-video .aligncenter video {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-video.alignright video, .wp-block-video .alignright video {
    margin-left: auto;
    margin-right: 0;
}

[dir=rtl] .wp-block-video.alignright video, [dir=rtl] .wp-block-video .alignright video {
    margin-left: 0;
    margin-right: auto;
}

/*
|------------------------------------------------------------------------------
| Utilities
|------------------------------------------------------------------------------
*/

.entry .has-drop-cap:first-letter {
    float: left;
    font-family: var(--f7-font-family-serif);
    font-size: 500%;
    font-weight: 900;
    line-height: 0.825em;
    padding-right: 0.125em;
}

[dir=rtl] .entry .has-drop-cap:first-letter {
    float: unset;
    font-family: unset;
    font-size: unset;
    font-weight: unset;
    line-height: unset;
    padding-right: unset;
}

.entry .has-small-font-size {
    font-size: calc(var(--f7-font-size) - 2px);
}

.entry .has-normal-font-size {
    font-size: var(--f7-font-size);
}

.entry .has-large-font-size {
    font-size: calc(var(--f7-font-size) + 2px);
}

.entry .has-larger-font-size {
    font-size: calc(var(--f7-font-size) + 4px);
}

.entry .has-text-align-left {
    text-align: left;
}

[dir=rtl] .entry .has-text-align-left {
    text-align: right;
}

.entry .has-text-align-center {
    text-align: center;
}

.entry .has-text-align-right {
    text-align: right;
}

[dir=rtl] .entry .has-text-align-right {
    text-align: left;
}