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

:root {
    --f7-badge-padding: 0 8px;
}

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

.badge {
    border-radius: 4px;
    line-height: 1;
}

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

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

.aurora .theme-dark, .ios .theme-dark, .md .theme-dark,
.aurora.theme-dark, .ios.theme-dark, .md.theme-dark {
    --f7-bars-bg-color: #000000;
    --f7-bars-bg-color-rgb: 0, 0, 0;
}

: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) 90%, rgba(158, 158, 158, 0.0125) 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) 90%, rgba(158, 158, 158, 0.0125) 100%);
}

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

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

:root {
    --f7-font-size: 16px;
}

body {
    background: #ECEFF1;
    overscroll-behavior-y: none;
}

.theme-dark body, body.theme-dark {
    background: #121212;
}

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

.aurora, .ios, .md {
    --f7-block-title-line-height: 1.3;
    --f7-block-title-white-space: normal;
    --f7-block-title-medium-font-size: 20px;
    --f7-block-title-medium-font-weight: bold;
    --f7-block-title-medium-line-height: 1.4;
    --f7-block-title-large-font-size: 32px;
    --f7-block-title-large-font-weight: bold;
    --f7-block-title-large-line-height: 1.3;
}

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

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    transition: all 5000s ease-in-out 0s;
}

.aurora, .ios, .md {
    --f7-searchbar-input-font-size: var(--f7-font-size);
}

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

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

.aurora, .ios, .md {
    --f7-list-font-size: 16px;
    --f7-list-item-subtitle-font-size: 14px;
    --f7-list-item-subtitle-line-height: 1.4;
    --f7-list-item-text-font-size: 14px;
    --f7-list-item-text-line-height: 1.4;
    --f7-list-media-item-title-font-weight: 600;
}

.aurora {
    --f7-list-item-header-text-color: rgba(0, 0, 0, 0.6);
    --f7-list-item-footer-text-color: var(--f7-list-item-header-text-color);
}

.aurora .theme-dark, .aurora.theme-dark {
    --f7-list-item-header-text-color: rgba(255, 255, 255, 0.54);
    --f7-list-item-footer-text-color: var(--f7-list-item-header-text-color);
}

.ios {
    --f7-list-item-header-text-color: rgba(0, 0, 0, 0.45);
    --f7-list-item-footer-text-color: var(--f7-list-item-header-text-color);
}

.ios .theme-dark, .ios.theme-dark {
    --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
    --f7-list-item-footer-text-color: var(--f7-list-item-header-text-color);
}

.md {
    --f7-list-item-header-text-color: rgba(0, 0, 0, 0.54);
    --f7-list-item-footer-text-color: var(--f7-list-item-header-text-color);
}

.md .theme-dark, .md.theme-dark {
    --f7-list-item-header-text-color: rgba(255, 255, 255, 0.54);
    --f7-list-item-footer-text-color: var(--f7-list-item-header-text-color);
}

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

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

/*
|------------------------------------------------------------------------------
| Navbar
|------------------------------------------------------------------------------
*/

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

.aurora, .ios, .md {
    --f7-navbar-font-size: 20px;
    --f7-navbar-title-font-weight: bold;
}

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

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

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

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

/*
|------------------------------------------------------------------------------
| Shape
|------------------------------------------------------------------------------
*/

.shape-container {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    padding: 8px;
    text-align: center;
}

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

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

/*
|------------------------------------------------------------------------------
| Utilities
|------------------------------------------------------------------------------
*/

.font-size-16 {
    font-size: 16px !important;
}

.font-size-20 {
    font-size: 20px !important;
}

.font-size-24 {
    font-size: 24px !important;
}

.font-size-40 {
    font-size: 40px !important;
}

.font-size-48 {
    font-size: 48px !important;
}

.font-size-56 {
    font-size: 56px !important;
}

.font-size-72 {
    font-size: 72px !important;
}

.font-weight-bold {
    font-weight: bold !important;
}

.height-100 {
    height: 100% !important;
}

.width-100 {
    width: 100% !important;
}

.pointer-events-none {
    pointer-events: none !important;
}

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

.aurora, .ios, .md {
    --f7-table-title-font-size: 20px;
    --f7-table-title-font-weight: bold;
}

.data-table td {
    white-space: nowrap;
}

.data-table tfoot td {
    background-color: var(--f7-table-head-bg-color);
    font-size: 16px;
    font-weight: bold;
    height: var(--f7-table-head-cell-height);
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-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;
}

@media (max-width: 480px) and (orientation: portrait) {
    .data-table td {
        white-space: normal;
    }

    .data-table td .badge {
        white-space: nowrap;
    }

    .data-table.data-table-collapsible tfoot td:not(.checkbox-cell):before {
        font-size: 16px;
        font-weight: bold;
        white-space: normal;
    }
}