ul li {
    color: var(--title-color);
}

li {
    list-style: none;
}

.navbar-bg,
.page-theme-transition {
    transition: background-color .4s
}

.color-light-gray,
:root {
    --f7-text-color: var(--title-color)
}

.arrow-back,
.link-chevron::before {
    text-rendering: optimizeLegibility
}

.card,
.post-horizontal,
.stock-item {
    box-shadow: var(--block-shadow)
}

html[dir=rtl] .card-big-footer .button i,
html[dir=rtl] .onboarding-next-button i {
    transform: rotate(180deg);
    margin-left: 0;
    margin-right: 5px
}

:root {
    --title-color: #1e2b47;
    --text-color: #828d9c;
    --light-gray: #ecf1f5;
    --block-shadow: 0px 2px 10px 0px #555f6921;
    --block-shadow: 0 2px 10px -1px rgba(0, 0, 0, 0.15);
    --block-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.13);
    --f7-page-toolbar-bottom-offset: 50px;
    --f7-bars-link-color: #007aff;
    --f7-navbar-height: 50px;
    --f7-fab-label-font-size: 14px;
    --f7-list-bg-color: #fff;
    --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
    --f7-list-outline-border-color: rgba(0, 0, 0, 0.12);
    --f7-list-chevron-icon-color: #8896b8;
    --f7-list-strong-bg-color: #f7f7f8;
    --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
    --f7-actions-button-text-color: var(--title-color);
    --f7-chip-delete-button-color: inherit;
    --f7-theme-color-filter: 23,75,70;
    --f7-grid-gap: 8px;
    /*    --f7-radio-active-color: #fff;*/
    --f7-input-invalid-border-color: var(--f7-input-error-text-color);
    --sheet-modal-toolbar-inner: #fff;
    --sheet-import-method: #fff;
    --input-bg-color: var(--f7-page-bg-color);
    --line: #e3e3e3;
    --background-color: rgb(247 247 248);
    --icon-bg-color: #f2f2f2;
    --overlay-container-background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.1) 100%);
    --overlay-container-background-img: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 50%, rgb(247 247 248) 100%);
    --post-backgroud-img: rgba(0, 0, 0, 0.8);
}

    :root.dark {
        --title-color: #fff;
        --text-color: #9aa9b2;
        --light-gray: #0e232d;
        --line: #393737;
        --input-bg-color: #202020;
        --background-color: rgb(22 22 22);
        --icon-bg-color: #202020;
        --f7-list-bg-color: #1c1c1d;
        --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
        --sheet-modal-toolbar-inner: #202020;
        --sheet-import-method: #000;
        --overlay-container-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.1) 100%);
        --overlay-container-background-img: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 50%, rgb(22 22 22) 100%);
        /*    --post-backgroud-img: rgba(255,255,255,0.8);*/
    }

   .theme-dark {
        --title-color: #fff;
        --text-color: #9aa9b2;
        --light-gray: #0e232d;
        --line: #393737;
        --input-bg-color: #202020;
        --background-color: rgb(22 22 22);
        --f7-list-bg-color: #1c1c1d;
        --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
  }

body {
    font-family: Rubik,-apple-system,SF Pro Text,SF UI Text,system-ui,Helvetica Neue,Helvetica,Arial,sans-serif
}

body[data-theme="orange"] {
    --f7-theme-color-filter: 114,58,41;
}

p {
    line-height: 1.8em;
    font-size: 15px;
    margin: 0;
    color: var(--text-color);
}

.card .card-category.bg-color-white,
.icon-tooltip,
.navbar .title,
.navbar a i, h1, h2, h3,
html[dir=rtl] .segmented.segmented-strong .button.tab-link-active {
    color: var(--title-color)
}

h1, h2, h3 {
    font-weight: 600
}

h1 {
    font-size: 34px;
    line-height: 41px;
}

h2 {
    font-size: 28px;
    line-height: 34px;
}

h3 {
    font-size: 22px;
    line-height: 34px;
}

h4 {
    font-size: 20px;
    line-height: 25px;
    margin: 0;
}

h5 {
    font-size: 18px;
    line-height: 22px;
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
}

img:not([src]) {
    visibility: hidden;
}

video {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
    width: 100%;
    position: relative;
    min-height: 100%;
}

iframe {
    width: calc(100%);
    height: 230px;
    border-radius: 15px;
    border: none
}

.fab:not(.fa-brands) {
    font-family: var(--f7-font-family);
}
.fab-label {
    max-width: 192px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size:10px;
}

/*
|------------------------------------------------------------------------------
| Theme
|------------------------------------------------------------------------------
*/

html.dark .if-not-dark {
    display: none !important;
}

html:not(.dark) .if-dark {
    display: none !important;
}

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

.page {
    background-color: var(--background-color);
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.block .list .item-content {
    padding-left: 0;
}


/*
|------------------------------------------------------------------------------
| 
|------------------------------------------------------------------------------
*/
/*.navbar-bg,
.toolbar {
    background-color: var(--background-color) !important;
}

.navbar-bg-translucent,
.toolbar-translucent {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: none;
}
*/
.ios .toolbar-outline:before,
.md .toolbar-outline:before,
.toolbar-outline:before {
    content: unset;
}

.footer-bottom {
    bottom: 0;
    background-color: var(--f7-theme-color) !important;
}

.footer-bottom:before {
    content: unset;
}

::-webkit-scrollbar {
    display: none
}

.card-footer:before,
.detailed-list .item-link .item-inner:before,
.navbar-bg:after,
.simple-list .item-inner::after,
.text-editor-toolbar::after,
html[dir=rtl] .link-chevron::before {
    display: none
}


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

.card-header.no-hairline:after {
    display: none!important
}

.card-footer {
    border-radius: 0 0 var(--f7-card-border-radius) var(--f7-card-border-radius)
}

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

.card-footer.no-hairline:before {
    display: none!important
}

.btn-filter {
    pointer-events: none;
    transition-duration: .1s;
    position: absolute;
    top: 50%;
    z-index: 99;
    cursor: pointer;
    background: 0 0;
    width: var(--f7-input-clear-button-size);
    height: var(--f7-input-clear-button-size);
    margin-top: calc(-1* var(--f7-input-clear-button-size) / 2);
    color: var(--f7-input-clear-button-color);
    right: 30px;
}

.navbar .title-large {
    height: 58px
}

.navbar .title-large-text {
    color: var(--title-color);
    padding-left: 15px
}

.ios .navbar .left a + a,
.ios .navbar .right a + a,
html[dir=rtl] .search-grid a:nth-child(2n) {
    margin-left: 0
}

.navbar .icon .badge {
    font-size: 11px;
    font-weight: 600
}

/*
|------------------------------------------------------------------------------
| toolbar
|------------------------------------------------------------------------------
*/

.tabbar-scrollable .tab-link {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
/*    height: 48px;*/
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-right: 24px;
    min-width: 48px;
    padding: 0;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.tabbar-scrollable .tab-link-active {
    color: var(--title-color);
}

.tabbar.tabbar-scrollable .tab-link-highlight,
.tabbar-labels .tab-link-highlight {
    position: absolute;
    height: 2px;
    background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
    transition-duration: .3s;
    left: 0;
    bottom: 0;
}
.toolbar{
    z-index: 5001;
}
/*
    
.tabbar a,
.tabbar-icons a {
    color: #8896b8
}

.tabbar-icons .tabbar-label {
    font-size: 10px
}
.toolbar {
    transition: background-color .4s,transform .4s;
    border-radius: 8px 8px 0px 0px;
    box-shadow: 0px -4px 60px 0px rgba(26, 21, 40, 0.0784313725);
}*/
.toolbar.toolbar-bottom .toolbar-inner {
    overflow: visible;
}


.toolbar.toolbar-bottom .tab-link-active i{
    color: #ffffff;
    background-color: var(--f7-theme-color);
    border-radius: 50%;
    height: 40px;
    width: 40px;
    line-height: 40px;
    margin-top: 0px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.toolbar.toolbar-bottom .tab-link-active span {
    display: none;
}

/*
.tabbar .toolbar-inner a.tab-link-active:after {
    transform: translate3d(0, -40%, 0);
}

.tabbar .toolbar-inner a:after {
    width: 50%;
    height: 50%;
    border-radius: 100%;
    content: '';
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
    z-index: 0;
    position: absolute;
    background: #fff;
    transition: all .4s;
}*/


/*
.toolbar.footer {
    height: 60px;
    height: calc(60px + env(safe-area-inset-bottom));
    box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.08);
    -ms-box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.08);
}

.toolbar.footer .tab-link-highlight {
    display: none
}

.toolbar.toolbar-bottom .toolbar-inner {
    overflow: visible;
}

.md .toolbar-bottom-md:after,
.toolbar-bottom:after {
    display: none
}

.toolbar.footer .toolbar-inner a {
    border-radius: 0;
    padding: 10px 0;
    line-height: 28px;
    text-align: center;
    min-width: 60px;
    overflow: visible !important;
}

.toolbar.footer .toolbar-inner a i {
    display: inline-block;
    max-width: 24px;
    max-height: 24px;
}

.toolbar.footer .toolbar-inner a span.icon-text {
    height: 44px;
    line-height: 44px;
    vertical-align: middle;
    width: 44px;
    display: block;
    margin: 0 auto;
    border-radius: 0;
    border: 1px solid transparent;
    transition: ease all 0.5s;
    -webkit-transition: ease all 0.5s;
    -moz-transition: ease all 0.5s;
    -ms-transition: ease all 0.5s;
}

.toolbar.footer .toolbar-inner a span.icon-text i {
    vertical-align: middle;
}

.toolbar.footer .toolbar-inner a span.text-name {
    display: block;
    font-size: 10px;
    font-weight: 400;
    height: 0;
    overflow: hidden;
    position: relative;
    transition: ease all 0.5s;
    -webkit-transition: ease all 0.5s;
    -moz-transition: ease all 0.5s;
    -ms-transition: ease all 0.5s;
}

.toolbar.footer .toolbar-inner a span.text-name:after {
    content: "";
    display: block;
    opacity: 0;
    height: 2px;
    width: 12px;
    margin: 0 auto;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    background-color: transparent;
    border-radius: 2px;
    transition: ease all 0.5s;
    -webkit-transition: ease all 0.5s;
    -moz-transition: ease all 0.5s;
    -ms-transition: ease all 0.5s;
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
}

.toolbar.footer .toolbar-inner a:hover span.icon-text,
.toolbar.footer .toolbar-inner a.tab-link-active span.icon-text {
    border-radius: 50px;
    margin-top: -32px;
    box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.08);
    -ms-box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.08);
}

.toolbar.footer .toolbar-inner a:hover span.text-name,
.toolbar.footer .toolbar-inner a.tab-link-active span.text-name {
    height: 22px;
    line-height: 22px;
}

.toolbar.footer .toolbar-inner a:hover span.text-name:after,
.toolbar.footer .toolbar-inner a.tab-link-active span.text-name:after {
    opacity: 1;
    bottom: 0px;
}*/

.subnavbar-scrollable {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.subnavbar-scrollable a {
    flex: 0 0 auto; 
    padding: 10px 15px;
    text-decoration: none;
    color: var(--title-color);
}
/*
|------------------------------------------------------------------------------
| 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) + 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: 1px;
    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;
    padding: 10px;
    border-radius: var(--f7-block-inset-border-radius);
    background: var(--light-gray);
}

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

.leader-top .chip {
    max-width: 120px;
}

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

/*
|------------------------------------------------------------------------------
| 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 {
    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: var(--f7-badge-size);
    overflow: hidden;
    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(var(--f7-badge-size) / -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;
}

/*
|------------------------------------------------------------------------------
| colored-icons-list
|------------------------------------------------------------------------------
*/

.colored-icons-list a {
    justify-content: flex-start;
    padding: 11px var(--f7-list-item-padding-horizontal);
    height: auto
}

.colored-icon {
    background-color: var(--f7-color-mono-invert);
    border-radius: 50%;
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--title-color)
}

.icon-bold, .movie-block-text {
    font-weight: 600
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--title-color);
    font-size: 18px;
    font-weight: 600
}

.section-title .left i {
    font-size: 16px
}

.section-title a, 
.section-title .span {
    font-weight: 500;
    font-size: 15px;
    color: var(--f7-theme-color);
    display: flex;
    align-items: center;
}

.ios .checkbox i:after,
.ios .icon-checkbox:after {
    font-size: 20px;
    font-weight: 600
}

.checkbox.checkbox-inline {
    margin-right: 5px
}

.checkbox-rounded .checkbox i, .checkbox-rounded .icon-checkbox, .notification-image {
    border-radius: 50%
}

.checkbox i, .icon-checkbox {
    border-radius: 5px;
    border: 2px solid #c7c7cc
}

.checkbox i:after, .icon-checkbox:after {
    top: -2px;
    left: -2px
}

.grid {
    margin: 10px 0
}


.grid-no-margin, swiper-slide .card {
    margin: 0;
    margin-bottom: 0 !important;
}

.panel-backdrop {
    background-color: rgba(0,0,0,.3)
}

.popover-inner .block {
    margin: 20px 0;
    padding: 0 20px
}

.popup-content {
    margin-top: 10px;
    flex: 1;
    text-align: center
}


.preloader-inner circle {
    fill: none;
    stroke: currentColor;
    animation: md-preloader-circle-rotate 5.6s ease-in-out infinite;
    stroke-dasharray: 100px;
    stroke-dashoffset: 80px;
    stroke-width: 4;
    transform: rotate(-90deg);
    transform-origin: 18px 18px;
}

.preloader-large {
    width: 42px;
    height: 42px;
}

.snowflake {
    color: rgb(181, 229, 252);
    font-size: 1.5rem;
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    animation: none;
}

.snowsnake {
    color: rgb(181, 229, 252);
    font-size: 1.5rem;
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    animation: none;
}

/*
|------------------------------------------------------------------------------
| 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: #fff;
    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: 5px;
}

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

.page[data-name=videoedit] .progressbar-infinite {
    border-radius: 0px;
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    background-color: var(--light-gray)
}

.page[data-name=my-video] .progressbar {
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0;
    height: 5px;
}

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


.ios .icon-radio:after {
    font-size: 24px
}

.radio .icon-radio {
    width: 24px;
    height: 24px;
    border: 2px solid #c7c7cc
}

p .icon-radio {
    margin-right: 1px
}

.card-author-footer .card-footer-right i, .ios p .icon-radio:after, .rating-block-detailed .rating-block-stars i {
    font-size: 22px
}

.range-slider-with-icons {
    width: 100%;
    margin: 0 16px
}

.range-slider-title-value {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.card-author-footer .card-author,
.list.accordion-list .item-title,
.range-slider-title-value .range-value,
.signup-have-account {
    color: var(--title-color);
    font-weight: 500;
    font-size: 15px
}

.authors-slider swiper-slide,
.categories-slider swiper-slide,
.toast-button.button {
    width: auto
}

.stepper .stepper-input-wrap input {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    color: var(--title-color);
    width: 40px
}

.stepper-input-wrap, .stepper-value {
    border: none
}

.single-post-content a {
    color: var(--title-color);
    font-size: 16px;
    word-wrap: break-word;
}

.card.card-album,
.single-cover-image,
.single-post-content img,
.stepper-button-minus:first-child,
.stepper-button-minus:last-child,
.stepper-button-plus:first-child,
.stepper-button-plus:last-child,
.stepper-button:first-child,
.stepper-button:last-child {
    border-radius: 8px;
    max-width: 100%;
}

.stepper-button,
.stepper-button-minus,
.stepper-button-plus {
    width: 28px
}

.stepper-button-minus:after,
.stepper-button-plus:after {
    width: 12px
}

.stepper-button-plus:before {
    height: 12px
}

.comment-infos .author-name,
.single-post-author .author-name,
.swipeout-actions-left > a,
.swipeout-actions-left > button,
.swipeout-actions-left > div,
.swipeout-actions-left > span,
.swipeout-actions-right > a,
.swipeout-actions-right > button,
.swipeout-actions-right > div,
.swipeout-actions-right > span {
    font-weight: 500;
    font-size: 15px
}

.swipeout-actions-left .swipeout-delete,
.swipeout-actions-right .swipeout-delete{
    color: #fff;
}

.text-editor a{
    color: var(--title-color)
}

.text-editor-toolbar {
/*    border-bottom: 1px solid #e0e3e6;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px*/
}

.input-outline {
    border: 2px solid #e0e3e6 !important;
    background: 0 0 !important
}

.input-outline-error {
    border: 2px solid var(--f7-color-red) !important;
    background: 0 0 !important
}

.ios .toggle-icon:before {
    background-color: #e9e9ea
}

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

.accordion-item-content {
    padding: 0;
}

.accordion-item-content p {
    font-size: 15px;
    margin: 0 0 5px
}

a {
    transition: opacity .1s;
    color: var(--f7-bars-link-color);
}

a:active {
    opacity: .95
}

input[type=date],
input[type=datetime-local],
input[type=email],
input[type=password],
input[type=text],
input[type=number],
textarea {
    background-color: var(--input-bg-color);
    width: 100%;
    height: 56px;
    padding: 0 0 0 15px;
    border-radius: 10px;
    color: var(--title-color);
    font-weight: 500;
    font-size: 15px;
    font-variant-ligatures: none;
    -webkit-font-feature-settings: "liga" 0, "clig" 0; 
    -moz-font-feature-settings: "liga" 0, "clig" 0; 
    -ms-font-feature-settings: "liga" 0, "clig" 0; 
    font-feature-settings: "liga" 0, "clig" 0; 
}

input:focus,
textarea:focus{
    border: 1px solid var(--title-color);
}

.list input:focus,
.list textarea:focus{
    border: 0 !important;
}

::-webkit-input-placeholder, ::placeholder {
    color: #93a0b1;
    font-weight: 400
}

input[type=date], input[type=datetime-local] {
    padding-right: 10px;
    line-height: 42px
}

label:not(.checkbox,.item-checkbox,.radio,.item-radio,.toggle) {
    font-weight: 500;
    margin-bottom: 7px;
    font-size: 15px;
    display: block
}

form .button {
    margin: 20px 0
}

.page-content textarea {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
    min-height: 100px;
}

.searchbar-inner {
    padding: 0 15px
}

.searchbar-backdrop.searchbar-backdrop-in {
    opacity: 0
}

.searchbar.searchbar-inline {
    margin-top: 10px;
    margin-bottom: -5px
}

.searchbar.searchbar-inline .searchbar-input-wrap {
    height: 40px
}

.ios .message-sent .message-bubble {
    padding: 8px 20px 8px 13px
}

.ios .message-received .message-bubble {
    padding: 8px 13px 8px 20px
}

.messagebar .toolbar-inner {
    padding-bottom: 3px
}

.bg-color-primary {
    background-color: var(--f7-theme-color) !important;
    color: var(--f7-color-white);
}

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

html[dir=rtl] .album-grid img,
html[dir=rtl] .colored-icon,
html[dir=rtl] .link-banner i,
html[dir=rtl] .link-banner img {
    margin-right: 0;
    margin-left: 10px
}

html[dir=rtl] .detailed-list .item-link .item-inner {
    padding-right: 0;
    padding-left: 15px;
    margin-left: 0
}

html[dir=rtl] .post-horizontal .post-image {
    margin-left: 0;
    margin-right: 10px
}

html[dir=rtl] .button-icon-left i,
html[dir=rtl] .checkbox.checkbox-inline {
    margin-right: 0;
    margin-left: 5px
}

html[dir=rtl] .navbar a .arrow-back {
    transform: rotate(180deg);
    padding-right: 0;
    padding-left: 3px
}

html[dir=rtl] input[type=email],
html[dir=rtl] input[type=password],
html[dir=rtl] input[type=text] {
    padding: 0 15px 0 0
}

html[dir=rtl] textarea {
    padding: 15px 15px 0
}

html[dir=rtl] .messagebar-area textarea {
    padding: 6px 16px
}

html[dir=rtl] .button img {
    margin-right: 0;
    margin-left: 7px
}

html[dir=rtl] .single-post-author > img {
    margin-right: 0;
    margin-left: 12px
}

html[dir=rtl] .card-author-footer .card-footer-right,
html[dir=rtl] .single-post-author .author-follow {
    margin-right: auto;
    margin-left: inherit
}

html[dir=rtl] .search-grid a {
    text-align: right
}

html[dir=rtl] .badge-with-image img,
html[dir=rtl] .search-grid a i {
    margin-right: 0;
    margin-left: 6px
}

html[dir=rtl] .accordion-opposite .accordion-item > .item-content:before {
    right: 8px
}

html[dir=rtl] .badge-with-image {
    padding-right: 0;
    padding-left: 8px
}

html[dir=rtl] .card-author-footer .card-footer-middle {
    margin-right: 12px
}

html[dir=rtl] .badge-with-icon {
    padding: 0 6px 0 10px
}

html[dir=rtl] .badge-with-icon i {
    margin-right: 0;
    margin-left: 3px
}

html[dir=rtl] .card .card-author img {
    margin-right: 0;
    margin-left: 8px
}

html[dir=rtl] .detailed-list .item-content {
    padding-left: 0
}

html[dir=rtl] .light-gray-title .badge {
    margin-left: 0;
    margin-right: 3px
}

html[dir=rtl] .post-horizontal {
    padding: 15px 17px 15px 15px
}

html[dir=rtl] .search-grid a:nth-child(odd) {
    margin-left: 10px;
    margin-right: 0
}

html[dir=rtl] .stepper .stepper-input-wrap input {
    padding-right: 0
}

html[dir=rtl] .panel-links a i,
html[dir=rtl] .stock-item img {
    margin-left: 15px;
    margin-right: 0
}

html[dir=rtl] .rating-block-total-text {
    margin-left: 0;
    margin-right: 5px
}

.page-content .title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--title-color);
    word-break: break-all;
}

.page-content .item-content[class*='color-'] input:checked .title {
    color: #fff;
}

/*
|------------------------------------------------------------------------------
| Ticket
|------------------------------------------------------------------------------
*/

.ticket, .ticket-fill {
    position: relative;
    height: 140px;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-radius: 15px;
    display: flex
}

.ticket {
    width: 100%;
    font-size: 15px;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background: var(--f7-block-strong-bg-color);
/*    background-image: radial-gradient(circle at 0 50%,rgba(0,0,0,0) .7em,var(--light-gray) 0),radial-gradient(circle at 100% 50%,rgba(0,0,0,0) .7em,var(--light-gray) 0);*/
    background-position: top left,top right;
    overflow: hidden;
    padding: 20px 30px;
    align-items: center;
    justify-content: space-between
}

.ticket-infos {
    flex: 1;
    flex-basis: 50%;
    padding-left: 5px
}

.ticket-image {
    flex: 1;
    flex-basis: 50%
}

.ticket-discount {
    font-size: 40px;
    font-weight: 600;
    color: var(--title-color)
}

.ticket-text {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px
}

.ticket-description {
    font-weight: 500;
    font-size: 14px
}

.ticket:active {
    opacity: .5
}

.ticket-fill {
    width: 100%;
    font-size: 15px;
    background: linear-gradient(90deg,#15161b,#14142d);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 30px
}

.ticket-fill::after,.ticket-fill::before {
    content: "";
    width: 22px;
    height: 11px;
    background-color: #fff;
    border-radius: 10rem 10rem 0 0;
    position: absolute;
    top: 75px;
    z-index: 10
}

.ticket-fill::before {
    left: -6px;
    transform: rotate(90deg)
}

.ticket-fill::after {
    right: -6px;
    transform: rotate(270deg)
}

.ticket-fill .ticket-description,.ticket-fill .ticket-discount {
    color: #fff;
    font-weight: 500;
    z-index: 10
}

.ticket-background-icon {
    position: absolute;
    right: 20px;
    color: rgba(255,255,255,.1)
}

.ticket-background-icon i {
    font-size: 110px
}

.ticket-image-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    object-fit: cover;
    border-radius: 15px
}

/*
|------------------------------------------------------------------------------
| 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: var(--f7-safe-area-top);
        top: 8px;
    }

    .ios .toast.toast-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;
}

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

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

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

.btn-success {
    background-color: #3fcc35;
    border-color: #3fcc35 !important;
    color: #fff !important;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.btn-danger {
    background-color: #ff4e2b;
    border-color: #ff4e2b !important;
    color: #fff !important;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.icon-btn {
    height: 42px;
    width: 42px;
    border-radius: 100%;
    font-weight: 800;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    border: 0 !important;
}

.icon-btn.btn-xl {
    width: 40px;
    height: 40px;
    padding: 10px;
}

.is-animating::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 100%;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(0);
    transform: translate3d(0, 0, 0) scale(0);
    -webkit-animation: phone-inner 3000ms infinite;
    animation: phone-inner 3000ms infinite;
}

.is-animating i {
    -webkit-animation: phone-icon 3000ms infinite;
    animation: phone-icon 3000ms infinite;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    fill: #fff;
    stroke-width: 1px;
}

.is-animating.btn-success {
    -webkit-animation: phone-outer-success 3000ms infinite;
    animation: phone-outer-success 3000ms infinite;
}

.btn-success.is-animating,
.btn-danger.is-animating {
    -webkit-box-shadow: 0 0 0 0em rgba(63, 204, 53, 0), 0em .05em .1em rgba(0, 0, 0, .2);
    box-shadow: 0 0 0 0em rgba(63, 204, 53, 0), 0em .05em .1em rgba(0, 0, 0, .2);
}


@keyframes phone-outer-success {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow: 0 0 0 0em rgba($success-color, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
    }

    33.3333% {
        transform: translate3d(0, 0, 0) scale(1.1);
        box-shadow: 0 0 0 0em rgba($success-color, 0.9), 0em 0.05em 0.1em rgba(#000000, 0.5);
    }

    66.6666% {
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow: 0 0 0 1.2em rgba($success-color, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow: 0 0 0 0em rgba($success-color, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
    }
}

@keyframes phone-outer-danger {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow: 0 0 0 0em rgba($danger-color, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
    }

    33.3333% {
        transform: translate3d(0, 0, 0) scale(1.1);
        box-shadow: 0 0 0 0em rgba($danger-color, 0.9), 0em 0.05em 0.1em rgba(#000000, 0.5);
    }

    66.6666% {
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow: 0 0 0 1.2em rgba($danger-color, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow: 0 0 0 0em rgba($danger-color, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
    }
}

@keyframes phone-inner {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(0);
    }

    33.3333% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(0.9);
    }

    66.6666% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }
}

@keyframes phone-icon {
    0% {
        transform: translate3d(0, 0, 0);
    }

    2% {
        transform: translate3d(0.6px, 0, 0);
    }

    4% {
        transform: translate3d(-0.6px, 0, 0);
    }

    6% {
        transform: translate3d(0.6px, 0, 0);
    }

    8% {
        transform: translate3d(-0.6px, 0, 0);
    }

    10% {
        transform: translate3d(0.6px, 0, 0);
    }

    12% {
        transform: translate3d(-0.6px, 0, 0);
    }

    14% {
        transform: translate3d(0.6px, 0, 0);
    }

    16% {
        transform: translate3d(-0.6px, 0, 0);
    }

    18% {
        transform: translate3d(0.6px, 0, 0);
    }

    20% {
        transform: translate3d(-0.6px, 0, 0);
    }

    22% {
        transform: translate3d(0.6px, 0, 0);
    }

    24% {
        transform: translate3d(-0.6px, 0, 0);
    }

    26% {
        transform: translate3d(0.6px, 0, 0);
    }

    28% {
        transform: translate3d(-0.6px, 0, 0);
    }

    30% {
        transform: translate3d(0.6px, 0, 0);
    }

    32% {
        transform: translate3d(-0.6px, 0, 0);
    }

    34% {
        transform: translate3d(0.6px, 0, 0);
    }

    36% {
        transform: translate3d(-0.6px, 0, 0);
    }

    38% {
        transform: translate3d(0.6px, 0, 0);
    }

    40% {
        transform: translate3d(-0.6px, 0, 0);
    }

    42% {
        transform: translate3d(0.6px, 0, 0);
    }

    44% {
        transform: translate3d(-0.6px, 0, 0);
    }

    46% {
        transform: translate3d(0em, 0, 0);
    }
}

.btn-fix {
    position: fixed;
    bottom: 20px;
    margin-left: -30px;
    z-index: 9;
}

.logo-title {
    font-size: 36px;
    font-weight: 600;
    font-family: Apple Chancery, cursive;
    color: var(--title-color);
}

.preload .logo-title {
    color: #000;
}

.overlay-container {
    position: relative;
    height: 100%;
}

.overlay-container:after {
    background-image: var(--overlay-container-background-img);
    border-radius: inherit;
    bottom: 0;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 10;
}

.bg-overlay:after {
    bottom: 0;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 10;
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, 0) 160px), -webkit-linear-gradient(top, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, 0) 96px);
    background: linear-gradient(to top, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, 0) 160px), linear-gradient(to bottom, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, 0) 96px);
}

/*
|------------------------------------------------------------------------------
| category
|------------------------------------------------------------------------------
*/

.category-slide {
    font-size: 14px;
    line-height: 21px;
    padding: 10px 16px;
    display: flex;
    border-radius: var(--f7-block-inset-border-radius);
    color: var(--title-color);
    font-weight: 500;
    background-color: var(--light-gray);
}

/*
|------------------------------------------------------------------------------
| splash page
|------------------------------------------------------------------------------
*/
/*------------ spinner ---------------- */
.spinner-circle {
    width: 40px;
    height: 40px;
    position: relative;
}
.spinner-circle .spinner-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.spinner-circle .spinner-child::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 20%;
  height: 20%;
  background-color: var(--white);
  border-radius: 100%;
  -webkit-animation: spinner-circleBounceDelay 1s infinite ease-in-out both;
  animation: spinner-circleBounceDelay 1s infinite ease-in-out both;
}
.spinner-circle .spinner-circle2 {
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}
.spinner-circle .spinner-circle2::before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner-circle .spinner-circle3 {
  -webkit-transform: rotate(80deg);
  -ms-transform: rotate(80deg);
  transform: rotate(80deg);
}
.spinner-circle .spinner-circle3::before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.spinner-circle .spinner-circle4 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.spinner-circle .spinner-circle4::before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner-circle .spinner-circle5 {
  -webkit-transform: rotate(160deg);
  -ms-transform: rotate(160deg);
  transform: rotate(160deg);
}
.spinner-circle .spinner-circle5::before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.spinner-circle .spinner-circle6 {
  -webkit-transform: rotate(200deg);
  -ms-transform: rotate(200deg);
  transform: rotate(200deg);
}
.spinner-circle .spinner-circle6::before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.spinner-circle .spinner-circle7 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.spinner-circle .spinner-circle7::before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.spinner-circle .spinner-circle8 {
  -webkit-transform: rotate(280deg);
  -ms-transform: rotate(280deg);
  transform: rotate(280deg);
}
.spinner-circle .spinner-circle8::before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.spinner-circle .spinner-circle9 {
  -webkit-transform: rotate(320deg);
  -ms-transform: rotate(320deg);
  transform: rotate(320deg);
}
.spinner-circle .spinner-circle9::before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.spinner-circle.lg {
  width: 50px;
  height: 50px;
}
.spinner-circle.md {
  width: 30px;
  height: 30px;
}
.spinner-circle.sm {
  width: 20px;
  height: 20px;
}
.spinner-circle.success .spinner-child::before {
  background-color: var(--success);
}
.spinner-circle.warning .spinner-child::before {
  background-color: var(--warning);
}
.spinner-circle.danger .spinner-child::before {
  background-color: var(--danger);
}
.spinner-circle.info .spinner-child::before {
  background-color: var(--info);
}
.spinner-circle.dark .spinner-child::before {
  background-color: var(--dark);
}
.spinner-circle.spinner-red .spinner-child::before {
  width: 6%;
  height: 20%;
  border-radius: 5px;
  -webkit-animation: spinner-redGrowing 1s infinite ease-in-out both;
  animation: spinner-redGrowing 1s infinite ease-in-out both;
}
.spinner-circle.spinner-red .spinner-circle2 {
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}
.spinner-circle.spinner-red .spinner-circle2::before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner-circle.spinner-red .spinner-circle3 {
  -webkit-transform: rotate(80deg);
  -ms-transform: rotate(80deg);
  transform: rotate(80deg);
}
.spinner-circle.spinner-red .spinner-circle3::before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.spinner-circle.spinner-red .spinner-circle4 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.spinner-circle.spinner-red .spinner-circle4::before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner-circle.spinner-red .spinner-circle5 {
  -webkit-transform: rotate(160deg);
  -ms-transform: rotate(160deg);
  transform: rotate(160deg);
}
.spinner-circle.spinner-red .spinner-circle5::before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.spinner-circle.spinner-red .spinner-circle6 {
  -webkit-transform: rotate(200deg);
  -ms-transform: rotate(200deg);
  transform: rotate(200deg);
}
.spinner-circle.spinner-red .spinner-circle6::before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.spinner-circle.spinner-red .spinner-circle7 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.spinner-circle.spinner-red .spinner-circle7::before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.spinner-circle.spinner-red .spinner-circle8 {
  -webkit-transform: rotate(280deg);
  -ms-transform: rotate(280deg);
  transform: rotate(280deg);
}
.spinner-circle.spinner-red .spinner-circle8::before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.spinner-circle.spinner-red .spinner-circle9 {
  -webkit-transform: rotate(320deg);
  -ms-transform: rotate(320deg);
  transform: rotate(320deg);
}
.spinner-circle.spinner-red .spinner-circle9::before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

@-webkit-keyframes spinner-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes spinner-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes spinner-redGrowing {
  0%, 80%, 100% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}
@keyframes spinner-redGrowing {
  0%, 80%, 100% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}
.spinner-grow {
  width: 40px;
  height: 40px;
  background-color: var(--f7-theme-color);
}
.spinner-grow.md {
  width: 30px;
  height: 30px;
}
.spinner-grow.sm {
  width: 20px;
  height: 20px;
}
.spinner-grow.success {
  background-color: var(--success);
}
.spinner-grow.success-2 {
  background-color: var(--success2);
}
.spinner-grow.warning {
  background-color: var(--warning);
}
.spinner-grow.danger {
  background-color: var(--danger);
}
.spinner-grow.info {
  background-color: var(--info);
}
.spinner-grow.dark {
  background-color: var(--dark);
}
.spinner-grow.light {
  background-color: var(--light);
}
.spinner-grow.disabled {
  background-color: var(--disable);
}


/*------------ preloader ---------------- */
.preload {
  overflow: hidden;
}

.preload-container {
    position: relative;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(251, 176, 51, 1) 100%);
}
.preload-container .spinner-circle {
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
}
.preload-container .spinner-circle .spinner-child:before {
  background-color: #fff;
}

.preload .logo-img img{
    width:120px;
}

.preload-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  z-index: 100;
  margin: -45px 0 0 -45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center center;
  animation: preload 1s linear infinite alternate;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}


@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.block.item-input-invalid input:focus {
    border-width: 2px;
    border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-color));
}

.error {
    color: #ff4530;
}

.ios .item-input-invalid .item-inner:after {
    background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
}


/*
|------------------------------------------------------------------------------
|  marquee
|------------------------------------------------------------------------------
*/


.marquee-container {
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    position: relative;
}

.marquee-item {
    display: inline-block;
    white-space: nowrap;
    color: var(--title-color);
    font-weight: 600;
}

@keyframes marquee {
    0% {
        transform: translateX(100%); 
    }

    100% {
        transform: translateX(-100%);
    }
}

/*
|------------------------------------------------------------------------------
| single post 
|------------------------------------------------------------------------------
*/

.single-post-date {
    color: var(--text-color);
    font-size: 16px;
    margin-top: 10px
}

.single-post-title {
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 28px
}

.single-post-category {
    padding: 4px 10px;
    height: auto;
    border-radius: 6px;
    color: var(--title-color);
    font-size: 14px;
    font-weight: 500;
    margin-right: 5px;
    display: inline-block;
    margin-top: 15px
}

.single-post-author {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 15px;
    margin: 20px 0
}

.single-post-author>img {
    width: 55px;
    border-radius: 50%;
    margin-right: 12px
}

.single-post-author .author-details {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.single-post-author .author-description {
    color: var(--text-color);
    margin-top: 2px;
    font-size: 13px
}

.single-post-author .author-follow {
    width: auto;
    margin-left: auto;
    padding: 0 15px 0 11px;
    height: 38px
}


.comment-date,.comment-text {
    font-size: 15px;
    color: var(--text-color)
}

.comment-list {
    margin-top: 30px
}

.comment {
    display: flex;
    margin: 20px 0
}

.comment>img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 13px
}

.comment-date {
    margin-left: 6px;
    opacity: .8
}

.comment-text {
    line-height: 1.55em;
    margin-top: 2px
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 1000;
}

    .sticky.sticky-top {
        top: calc(var(--f7-page-navbar-offset,0px) + var(--f7-page-toolbar-top-offset,0px) + var(--f7-page-subnavbar-offset,0px) + var(--f7-page-searchbar-offset,0px) + var(--f7-page-content-extra-padding-top,0px));
    }

/*
|------------------------------------------------------------------------------
| text animation
|------------------------------------------------------------------------------
*/
.text-animation {
    width: 250px;
    margin: auto;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 10%, black 50%, rgba(255, 255, 255, 0) 90%);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 100% 250px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-animation: stripes 3s linear infinite;
    animation: stripes 3s linear infinite;
}

@-webkit-keyframes stripes {
    100% {
        background-position: 250px 0;
    }
}

@keyframes stripes {
    100% {
        background-position: 250px 0;
    }
}

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

.vm {
    vertical-align: middle
}

.btn-loader {
    vertical-align: middle;
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
}

.btn-loader div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    margin: 3px;
    border: 4px solid #fff;
    border-radius: 50%;
    animation: btnloader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #ffffff transparent transparent transparent;
}

.btn-loader div:nth-child(1) {
    animation-delay: -0.45s;
}

.btn-loader div:nth-child(2) {
    animation-delay: -0.3s;
}

.btn-loader div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes btnloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.fas .badge {
    position: absolute;
    left: 100%;
    margin-left: -20px;
    top: 10px;
    font-family: var(--f7-font-family);
    --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
    --f7-badge-size: var(--f7-badge-in-icon-size);
    --f7-badge-padding: 0px 2px;
}

.panel-open,
.panel-close,
.actions-open {
    border: 0;
    background: transparent;
    font-size: 18px;
    color: var(--title-color);
}

.media-list .item-media, li.media-item .item-media {
/*    align-self: flex-start;
    margin-top: 1px;*/
}

.truncated-text-button{
    color: var(--title-color);
    font-weight: 600;
}

/*
|------------------------------------------------------------------------------
|  walkthrough 
|------------------------------------------------------------------------------
*/
.welcome-logo {
    position: absolute;
    z-index: 2;
    margin-top: 100px;
    width: 100%;
    text-align: center;
    color: #fff;
}

.welcome-logo img {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    clear: both;
    display: block;
    margin-bottom: 10px;
}

.page-walkthrough .swiper {
    height: 100vh;
    width: 100%;
}

.page-walkthrough .swiper .bg {
    height: 100%;
    width: 100%;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-walkthrough .swiper-slide:after {
    content: " ";
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    top: 0px;
    left: 0px;
    background-color: rgba(var(--f7-theme-color-filter),.35);
}

.page-walkthrough .swiper-pagination-bullet {
    background: #fff;
}

.page-walkthrough .swiper-pagination-bullet-active {
    background: var(--f7-theme-color);
}

.page-walkthrough .slide-text {
    opacity: 1;
    position: absolute;
    bottom: 30%;
    width: 100%;
    transition: 800ms;
    transform: translateX(-100px);
    z-index:2;
}

.page-walkthrough .slide-text h3{
    color:#fff;
    padding: 0 30px;
    font-size: 24px;
    text-transform: uppercase;
}

.page-walkthrough .swiper-slide-active .slide-text {
    transform: translateX(0px) translateY(0px);
}

.box-boarding-fixed {
    position: fixed;
    background: rgba(0, 0, 0, .5);
    border-radius: 24px 24px 0px 0px;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(180px + var(--f7-safe-area-bottom));
    z-index: 2;
    text-align: center;
}

.index-start{
    text-align: center;
    width: 100%;
    position: relative;
}

.box-boarding-fixed .link {
    margin-top: 50px;
    color: #ffffff;
    display: block;
    opacity: 0.8;
}


.btn-start {
    position: relative;
    background-clip: padding-box;
    border: 2px solid transparent;
    background-color: var(--f7-theme-color);
    border-radius: 34.5px;
    display: flex;
    align-items: center;
    gap: 34px;
    padding: 10px;
}

.btn-start::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: -2px;
    background-image: radial-gradient(131.5% 3432.86% at -27.22% 50%, #e60404 0%, #fb15f2 21.3%, #e1e1e1 44.73%, #17ffd5 63.48%, #73f90a 83.27%, #efdb22 100%);
    border-radius: inherit;
}

.btn-start .icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.button-1 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    width: 60%;
    border-radius: 38px;
    border: 0;
    height: 38px;
    position: absolute;
    transform: translate(-50%, -50%);
}

/*
|------------------------------------------------------------------------------
| On Boading 
|------------------------------------------------------------------------------
*/
.onboarding {
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(251, 176, 51, 1) 100%);
}

.onboarding .screen-header {
    padding: 20px;
}

    .onboarding .screen-content {
        /*padding: 45px 24px 90px;
   border-top-left-radius: 30px;
    border-top-right-radius: 30px;*/
    }

.navbar a.link.onboarding-skip {
    font-weight: 500;
    color: var(--title-color);
    padding-right: 8px
}


.swiper-onboarding swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.swiper-onboarding img {
    width: 100%;
/*    margin: 20px 0;*/
}

.swiper-onboarding swiper-slide .onboarding-title {
    font-size: 30px;
    font-weight: 600;
    color: var(--f7-color-white);
    padding: 0;
    text-align: center;
    line-height: 1.2;
    margin-top: 20px 0 0
}

.swiper-onboarding swiper-slide .onboarding-subtitle {
    font-size: 15px;
    padding: 0;
    text-align: center;
    color: var(--f7-color-white);
    opacity:0.7;
    padding: 10px 0 50px
}

.swiper-onboarding::part(pagination) {
   bottom:100px;
}

.swiper-onboarding::part(bullet-active) {
    margin: 0 4px;
    width: 23px;
    border-radius: 5px;
    height: 6px;
    background: var(--f7-theme-color);
    opacity: 1;
    -webkit-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
}

.swiper-onboarding::part(bullet) {
    margin: 0 4px;
    width: 23px;
    border-radius: 5px;
    height: 6px;
    background: #ebebeb;
    opacity: 1;
    -webkit-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
}

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


.no-scroll {
    overflow: hidden;
    height: 100vh;
    width: 100%;
}

.header {
    padding-top: var(--f7-safe-area-top);
    margin-top: var(--f7-safe-area-top);
}

.header .right {
    position: fixed;
    top: 16px;
    right: 16px;
    font-size: 24px;
}

/*.list a,
.list .item-title {
    font-weight: 500;
    color: var(--title-color);
    font-size: 15px;
}*/

.list .item-title .icon{
    font-size: 16px;
}

.list .item-radio.item-content {
    padding: 0;
}

.list .item-media svg {
    width: 20px;
    height: 20px;
}

.list .item-check.active {
    color: var(--f7-theme-color);
    background-color: var(--line);
    position: relative;
}

.list .item-check .fas {
    color: var(--title-color);
    font-size: 24px;
    display: none;
    margin-left: 10px;
}

.list .item-check.active .fas {
    display: block;
}

.list.icon-list li {
    margin: 10px 0;
    background: var(--f7-card-bg-color);
    border-radius: 8px;
    box-shadow: var(--block-shadow);
}

.list .item-inner .title {
    font-weight: 500;
    color: var(--title-color);
    font-size: 15px;
}

.list .item-inner .subtitle {
    color: var(--text-color);
    font-size: 14px;
    font-weight: var(--f7-list-item-title-font-weight);
}

.list .item-inner .subtitle .item-change{
    font-weight: 500;
    font-size: 14px;
    margin-left: 2px;
}

.list.icon-list .item-inner .subtitle .badge {
    width: 15px;
    height: 15px;
    font-size: 10px;
}

.list .icon-item-after {
    display: block;
    text-align: right;
}

.list .item-row {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

/*
|------------------------------------------------------------------------------
|  info tips
|------------------------------------------------------------------------------
*/
.info-block,
.list {
    margin-bottom: 0;
}

.info-block {
    background-color: var(--light-gray);
    position: relative;
    padding: 15px 20px;
    border-radius: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.info-block-icon {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: var(--background-color);
    padding: 4px;
    border-radius: 50%;
}

/*.info-block-icon:before{
      content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4px;
    border-radius: 50%;
    height: 70px;
    width: 70px;
    display: inline-block;
    line-height: 70px;
    font-size: 42px;
    background:rgba(var(--f7-theme-color-rgb),0.15);
    mask-image: linear-gradient(to bottom, black 50%, transparent 51%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 51%);
    z-index: -1; 
}

.info-block-icon i{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size:36px;
}*/

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

.info-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}
.info-message div {
    margin-bottom: 5px;
}
.info[class*='color-'] .info-title,
.info[class*='color-'] .icon {
    color: var(--f7-theme-color);
}
.info[class*='color-'] .info-title + .info-message {
    color: rgba(var(--f7-theme-color-rgb), 0.75);
}

.about a span{ color: var(--text-color)}

/*
|------------------------------------------------------------------------------
|  digit-group
|------------------------------------------------------------------------------
*/

.otp-digit {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
    text-align: center;
    background-color: var(--input-bg-color);
    border-radius: 20px;
    font-weight: bold !important;
    font-size: 20px !important;
    height: 48px;
    width: 48px;
    border: 1px solid var(--f7-theme-color);
}
.otp-digit.filled{
    background-color: var(--f7-theme-color);
    color: #FFFFFF;
}

.label-ip {
    width: 100%;
    color: var(--text-color);
}

:focus {
    outline: 0;
}

.label-ip .tf-select:focus {
    border-color: var(--title-color);
}

.label-ip:focus-within {
    color: var(--title-color);
}

.group-ip-select:focus-within input,
.group-ip-select:focus-within .select-wrapper {
    border: 1px solid var(--title-color);
}

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

.sheet-modal {
    border-radius: 16px 16px 0 0px !important;
    overflow: hidden;
}

.dark .sheet-modal input {
        background-color: #0d0d0d;
    }

.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 {
/*    height: auto;
    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 .toolbar {
/*    margin: 8px 0;*/
}

.sheet-modal .toolbar-inner {
    padding: 12px;
    background: var(--sheet-modal-toolbar-inner);
}

.sheet-import-method {
    background: var(--sheet-import-method);
}

/*
|------------------------------------------------------------------------------
| keypad sheet Modal
|------------------------------------------------------------------------------
*/

:root {
    --f7-keypad-height: 210px;
    --f7-keypad-popover-width: 300px;
    --f7-keypad-button-text-color: #000;
    --f7-keypad-button-dark-bg-color: transparent;
    --f7-keypad-buttons-rows: 4;
    --f7-keypad-button-number-font-weight: 400;
    --f7-keypad-button-number-line-height: .8;
    --f7-keypad-button-letters-line-height: .8;
    --f7-keypad-button-letters-spacing: 6px;
    --f7-keypad-button-spacing: 4px;
}

:root .ios,:root.ios {
    --f7-keypad-button-dark-pressed-bg-color: rgba(0, 0, 0, .1);
    --f7-keypad-button-border-radius: 5px;
    --f7-keypad-bg-color: #ced4dc;
    --f7-keypad-button-bg-color: #fff;
    --f7-keypad-button-pressed-bg-color: #adbbca;
    --f7-keypad-button-number-font-size: 25px;
    --f7-keypad-button-letters-font-size: 10px;
    --f7-keypad-button-letters-font-weight: bold;
    --f7-keypad-button-letters-letter-spacing: .2em;
    --f7-keypad-button-letters-opacity: 1
}

:root .md,:root.md {
    --f7-keypad-button-dark-pressed-bg-color: transparent;
    --f7-keypad-button-border-radius: 0px;
    --f7-keypad-bg-color: #edeff1;
    --f7-keypad-button-bg-color: transparent;
    --f7-keypad-button-pressed-bg-color: transparent;
    --f7-keypad-button-number-font-size: 28px;
    --f7-keypad-button-letters-font-size: 12px;
    --f7-keypad-button-letters-font-weight: 500;
    --f7-keypad-button-letters-letter-spacing: .05em;
    --f7-keypad-button-letters-opacity: .55
}

:root.dark,:root .dark {
    --f7-keypad-button-text-color: #fff
}

:root.dark .ios,:root .dark .ios,:root.dark.ios,:root .dark.ios {
    --f7-keypad-bg-color: #292930;
    --f7-keypad-button-bg-color: #6a6e71;
    --f7-keypad-button-pressed-bg-color: #464646;
    --f7-keypad-button-dark-pressed-bg-color: rgba(255, 255, 255, .1)
}

:root.dark .md,:root .dark .md,:root.dark.md,:root .dark.md {
    --f7-keypad-bg-color: #121212;
    --f7-keypad-button-bg-color: transparent;
    --f7-keypad-button-pressed-bg-color: transparent;
    --f7-keypad-button-dark-pressed-bg-color: transparent
}

.keypad {
    background: var(--f7-keypad-bg-color);
    height: auto;
}

.keypad-popover {
    width: var(--f7-keypad-popover-width)
}

.keypad-popover .popover-angle:not(.on-top) {
    --f7-popover-bg-color: var(--f7-keypad-bg-color)
}

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

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

.keypad-sheet {
    padding-bottom: var(--f7-safe-area-bottom);
    height: auto;
    border-radius:0 !important;
}

i.icon-keypad-delete {
    width: 22px;
    height: 16px;
    display: flex;
    line-height: 1;
    font-size: 16px;
    align-items: center;
    justify-content: center
}

i.icon-keypad-delete svg {
    width: 100%;
    fill: var(--f7-keypad-button-text-color)
}

.ios i.icon-keypad-delete {
    width: 22px;
    height: 16px
}

.md i.icon-keypad-delete {
    width: 24px;
    height: 24px
}

.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>");
}

.keypad-buttons {
    color: var(--f7-keypad-button-text-color);
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box
}

.keypad-buttons,.keypad-buttons.sheet-modal-inner {
    height: var(--f7-keypad-height)!important
}

.ios .keypad-buttons {
    padding: 3px
}

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

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

.ios .keypad-button {
    padding: 3px
}

.md .keypad-button {
    overflow: hidden
}

.keypad-button .ripple-wave {
    z-index: 10
}

.keypad-button-inner {
    background: var(--f7-keypad-button-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: var(--f7-keypad-button-border-radius);
    position: relative;
    overflow: hidden
}

.ios .keypad-button-inner {
    flex-direction: column
}

.keypad-button:not(.keypad-dummy-button).active-state .keypad-button-inner {
    background: var(--f7-keypad-button-pressed-bg-color)
}

.keypad-button.keypad-button-dark .keypad-button-inner {
    background: var(--f7-keypad-button-dark-bg-color)
}

.keypad-button.keypad-button-dark:not(.keypad-dummy-button).active-state .keypad-button-inner {
    background: var(--f7-keypad-button-dark-pressed-bg-color)
}

.keypad-button.keypad-dummy-button {
    cursor: default
}

.keypad-type-numpad .keypad-button.keypad-button-double {
    width: calc(100% / 3 * 2)
}

.keypad-button-number,.keypad-button-letters {
    display: block
}

.keypad-button-number {
    font-size: var(--f7-keypad-button-number-font-size);
    font-weight: var(--f7-keypad-button-number-font-weight);
    line-height: var(--f7-keypad-button-number-line-height)
}

.md .keypad-button-number {
    width: 30px
}

.keypad-button-letters {
    font-size: var(--f7-keypad-button-letters-font-size);
    font-weight: var(--f7-keypad-button-letters-font-weight);
    line-height: var(--f7-keypad-button-letters-line-height);
    letter-spacing: var(--f7-keypad-button-letters-letter-spacing);
    height: 1;
    opacity: var(--f7-keypad-button-letters-opacity)
}

.ios .keypad-button-letters {
    margin-top: var(--f7-keypad-button-letters-spacing)
}

.md .keypad-button-letters {
    width: 40px;
    margin-left: var(--f7-keypad-button-letters-spacing);
    text-align: left
}

.list input[type=numpad] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    border: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    color: var(--f7-input-text-color);
    font-family: inherit;
    height: var(--f7-input-height);
    font-size: var(--f7-input-font-size)
}

.block.passcode-input {
    position: relative;
    z-index: 5;
}

.block.passcode-numpad {
    position: absolute;
    left: 0;
    bottom: var(--f7-safe-area-bottom);
    right: 0;
    max-width: none;
    z-index: 10;
}

.sheet-modal.keypad-sheet .toolbar{
    background-color: var(--f7-keypad-bg-color) !important;
    margin:0;
}

.sheet-modal.keypad-sheet .toolbar-inner {
    background: unset;
}

.passcode-numpad-inline {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    box-sizing: border-box;
    border: none;
    background: none;
    border-radius: 0 0 0 0;
    box-shadow: none;
    display: block;
    padding: 0 0 0 5px;
    margin: 0;
    width: 100%;
    height: 43px;
    color: var(--title-color);
    font-family: inherit;
    letter-spacing: 5px;
    text-align: center;
    font-size: 25px;
    font-weight: 300;
}

/*
|------------------------------------------------------------------------------
|  empty-items 
|------------------------------------------------------------------------------
*/

.empty-items {
    text-align: center;
    padding: 100px;
}

.empty-items img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 10px;
}

.empty-items h4 {
    font-size: 15px;
    color: var(--dark);
    font-weight: 500;
    margin-bottom: 5px;
}

.empty-items p {
    font-size: 13px;
    color: var(--secondary);
}

/*
|------------------------------------------------------------------------------
| 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);
}

/*
|------------------------------------------------------------------------------
| 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) + var(--f7-safe-area-left));
    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;
}



/*
|------------------------------------------------------------------------------
|  story box
|------------------------------------------------------------------------------
*/
.categore-box {
    position: relative;
    color: var(--title-color);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.story-bx {
    border-radius: 20px;
    margin-bottom: 5px;
    padding: 2px;
    background: linear-gradient(180deg, #fbb033 0%, #704FFE 100%);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    height: 64px;
    width: 64px;
}

.story-bx .avatar {
    box-sizing: content-box;
    border-radius: 18px;
    border: 5px solid #FEF3ED;
    max-width: 54px;
    height: 54px !important;
}

.story-bx i {
    position: absolute;
    right: -5px;
    bottom: -5px;
}

.story-bx .live-text {
    color: #fff;
    position: absolute;
    bottom: -7px;
    left: 50%;
    background: var(--f7-theme-color);
    padding: 2px 5px;
    border-radius: 4px;
    border: 2px solid #fff;
    font-size: 12px;
    transform: translateX(-50%);
    line-height: 12px;
}

.story-bx .story-add {
    box-sizing: content-box;
    border-radius: 18px;
    border: 5px solid #FEF3ED;
    height: 54px;
    width: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--input-bg-color);
}

.story-bx .story-add i{
    position: unset;
    font-size: 32px;
}

.statistics {
    width: 100%;
    text-align: center;
    width: 100%;
    border-radius: 15px;
}

/*
|------------------------------------------------------------------------------
|  invite page
|------------------------------------------------------------------------------
*/
.invite-wrap {
    text-align: center;
    margin-top: 56px;
}

.invite-wrap .input-wrap {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
}

.invite-wrap .input-wrap input {
    height: 52px;
    border: 0;
    padding: 0 16px;
}

.invite-wrap .input-wrap button {
    border: 0;
    background: #614BFF;
    color: var(--title-color, #fff);
    width: 56px;
}

.or-border {
    position: relative;
    margin-top: 24px;
}

.or-border span {
    background: #f7f7f7;
    display: inline-block;
    padding: 0 4px;
}

.or-border:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: rgba(184, 184, 184, 0.3);
    z-index: -1;
}

.social-area {
    padding: 0;
    margin: 0;
}

/*
|------------------------------------------------------------------------------
|  coin detail page
|------------------------------------------------------------------------------
*/

.coin-info {
    width: 100%;
    text-align: center;
    position: relative;
    color: var(--title-color);
    padding: 20px 0;
}

.coin-info .total {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1;
    text-align: left;
    padding: 5px 16px;
}

.coin-info .change {
    display: flex;
    align-items: center;
    padding-top: 5px;
    font-size: 1rem;
    text-align: left;
    padding-left: 16px;
}

.coin-info .selectors {
    width: 100%;
    padding: 20px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coin-info .selectors span.selected {
    background-color:  var(--f7-theme-color);
    color: #fff;
}

.coin-info .selectors span {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #47e7ce;
    color: #291f57;
    font-weight: 400;
    text-align: center;
    border-radius: 100%;
    margin: 0 20px;
    cursor: pointer;
}

/*
|------------------------------------------------------------------------------
|  exchange page
|------------------------------------------------------------------------------
*/

.exchange-warp {
    margin: 0;
}

.exchange-warp .exchange-box.active {
    border: 2px solid var(--f7-ios-primary-tint);
}

.exchange-warp .exchange-box {
    padding: 20px 16px;
    border-radius: var(--f7-card-border-radius);
    background: var(--f7-block-strong-bg-color);
}

.exchange-warp .round-exchange {
    text-align: center;
    margin: -20px 0px;
}

.exchange-warp .round-exchange .icon {
    width: 36px;
    height: 36px;
    font-size: 20px;
    background-color: var(--f7-card-bg-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 4px solid var(--f7-page-bg-color);
}

.exchange-box .trade-item {
    background: var(--f7-list-strong-bg-color);
    border-radius: var(--f7-card-border-radius);
    padding: 20px 16px;
}

.exchange-box .content {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
}

.exchange-box input {
    width: 100%;
    border: unset;
    font-size: 20px;
    background: unset;
    padding: unset;
    flex-grow: 1;
    text-align: right;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

.exchange-box input:focus {
    border: 0 !important;
}

/*
|------------------------------------------------------------------------------
|  backup page
|------------------------------------------------------------------------------
*/
.backup-info img {
    width: 120px;
}

.selected-area {
    border-radius: var(--f7-block-inset-border-radius);
    background: var(--f7-chip-bg-color);
    height: 325px;
    padding: 10px;
    margin: 10px 0;
}

.chip .chip-media {
    background-color: rgba(0, 0, 0, 0.125);
    font-size: 12px;
}

.chip .chip-delete {
    opacity: 0.75;
    position: absolute;
    right: 10px;
}

/*
|------------------------------------------------------------------------------
|  home page
|------------------------------------------------------------------------------
*/

.overlay-content {
    align-items: center;
    border-radius: var(--f7-block-inset-border-radius);
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    z-index: 1;
}

.overlay-content .locked {
    font-size: 60px;
    color: #fff;
}

.post-area{
    padding-left: 16px;
    padding-right: 16px;
}

.post-card:first-child {
    margin-top: 0;
}

.post-card a{
    color: var(--title-color);
}

.post-card .header-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.post-card .left-cab {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.post-card .meta-list {
    margin:0;
    padding:0;
}

.post-card .meta-list li {
    display: inline-block;
    position: relative;
    margin-right: 10px;
    font-size: 12px;
    color: var(--text-color);
}

.post-card .text-section {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2rem;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    margin-top: 5px;
    color: var(--title-color);
}

.post-card .content-section {
    position: relative;
}

.post-card .content-section .post-img {
    min-height: 225px;
    background: var(--post-backgroud-img);
    border-radius: var(--f7-block-inset-border-radius);
    text-align:center;
    overflow: hidden;
}

.post-card .content-section img,
.post-card .content-section video{
    height: 225px;
    max-width: 100%;
}

.post-card .content-section .play{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.post-card .content-section .play .fas{
    font-size: 18px;
}

.post-card .footer-section {
    position: relative;
}

.post-card .list-inline {
    margin: 0;
    padding: 0;
    width: 100%;
}

.post-card .footer-section li {
    display: inline-block;
    vertical-align: middle;
}

.post-card .footer-section i {
    margin-right: 7px;
    font-size: 18px;
}

.grid.grid-gap.card-short-video {
    gap: 8px;
    margin-bottom: 24px;
}

.card-image {
    position: relative;
    display: block;
    min-height: auto;
    padding: 0;
    line-height: 0;
    border-radius: var(--f7-block-inset-border-radius);
    overflow: hidden;
}

.card-image img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.card-short-video .card-image img {
    height: 248px;
}

.swiper-banner .card-image img {
    height: 230px;
}

.series-item-title {
    color: var(--title-color);
    font-weight: 400;
    overflow: hidden;
    padding-top: 5px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.card-image-footer {
    position: absolute;
    bottom: 0;
    padding: 60px 8px 8px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgb(24 24 24 / 95%) 100%);
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    line-height: var(--f7-line-height);
}

.card-image:has(.card-image-footer) img {
/*    object-fit: cover;
    aspect-ratio: 16 / 10;*/
}

.card-image-footer h2 {
    margin: 0;
    font-size: .8rem;
    line-height: 19px;
    font-weight: 500;
    color: #fff;
}

.popular-movies .card-image img {
    height: auto;
}

.recommend-movies .card-image img {
    height: auto;
}

.card-movie-rating {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background-color: var(--background-color);
    padding: 4px 8px 2px 6px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--title-color);
}

.card-movie-rating i {
    font-size: 12px;
    margin-bottom: 3px;
}

.card-short-video .card-expandable {
    height: 248px;
    border-radius: var(--f7-block-inset-border-radius);
}

.card-short-video .card-expandable .card-content {
    width: 100%;
}


/*
|------------------------------------------------------------------------------
|  watch page
|------------------------------------------------------------------------------
*/
.watch {
    position: relative;
    display: block;
}

.watch .ambient-topbar .player-placeholder{
    overflow: visible;
    position: relative;
    z-index: 1;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    background: transparent;
}

.watch .ambient-topbar .player-size{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    background-color: #000;
}

.cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 100%;
    margin: auto;
}

.create-post-cover .preview{
    height: 100%;
    position: absolute;
}

.video-thumbnail-container-large,
.video-thumbnail-container-compact,
.video-thumbnail-container-vertical {
    position: relative;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    overflow: hidden;
}

.video-thumbnail-container-compact {
    width: 160px;
    height: 90px;
    background: var(--background-color);
}

.video-thumbnail-container-compact .progressbar{
    position: absolute;
    bottom: 0;
    border-radius: 0;
}

.video-thumbnail-bg {
    background-color: rgba(255, 255, 255, 0.2);
}

.video-thumbnail-overlay-middle {
    width: 100%;
    height: 100%;
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    color: #fff;
/*    background-color: rgba(0, 0, 0, .4);*/
}

.video-thumbnail-overlay-middle.video-thumbnail-overlay-no-thumbnail {
    background-color: #717171;
}

.player-error-message-renderer {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
    color: #fff;
    background-color: #0f0f0f;
    height: 100%;
}

.responsive-container {
    position: relative;
}

.watch .player-video-api {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.watch-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.watch-below-the-player {
}

.slim-video-information-subtitle {
    display: flex;
    width: 100%;
    color: var(--text-color);
    align-items: center;
}

.slim-video-information-show-more {
    border: 0;
    width: 50px;
    color: var(--title-color);
}

.slim-owner-renderer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0;
}

.slim-owner-icon-and-title {
    color: var(--title-color);
    display: flex;
    align-items: center;
}

.item-subtitle span {
    font-size: 12px;
    color: var(--text-color);
}

/*
|------------------------------------------------------------------------------
|  profile page
|------------------------------------------------------------------------------
*/
.profilecontainer {
    width: 100%;
    height: calc(-100px + 100vh);
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}

.profile-area {
    position: relative;
}

.profile-area .cover-image {
    width: 100%;
    min-height: 120px;
    position: relative;
}

.profile-area .cover-image img{
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.profile-area .cover-image .banner {
    width: 100%;
    object-fit: cover;
    height: 150px;
}

.profile-area .profile-header {
    position: relative;
    z-index:99;
}

.profile-area .profile-header .text-user-creator {
    display: flex;
    align-items: center;
    margin-top: -32px;
}

.profile-area .profile-header .user-info {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.profile-area .profile-header .title {
    display: flex;
    font-size: 18px;
}

.profile-area .profile-header .copy-text {
    padding: 6px 4px;
    background: rgba(var(--f7-theme-color-rgb), 0.2);
    color: rgba(var(--f7-theme-color-rgb), 1);
    border-radius: var(--f7-block-inset-border-radius);
}

.profile-area .profile-header .copy-text .icon{
    font-size: 14px;
}

.myprofile .profile-header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.myprofile .edit-banner {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--f7-theme-color);
    border-radius: 50%;
    z-index: 99;
}

.edit-profile-label {
    text-align: center;
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--f7-theme-color);
    border-radius: 50%;
}


.create-post-cover {
    height: 26vh;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    color: #93a0b1;
    background: var(--light-gray);
}

.create-post-cover i {
    margin-bottom: 5px
}

.stacked {
    border-radius: 12px;
    border-top: 1px solid var(--background-color);
}

.playlistSwiper a{
    color: var(--title-color);

}

.playlistSwiper .create-new-playlist {
    width: 88%;
    text-align: center;
}

.playlist-card .playlist-card-image {
    display: block;
}

.playlist-card .playlist-card-image.stacked {
    position: relative;
    margin-top: 6px;
}

.playlist-card .collection-stack-medium {
    position: absolute;
    top: -4px;
    width: 148px;
    height: 80%;
    left: 8px;
    right: 8px;
    border-radius: 8px;
    background-color: #606060;
    margin-top: -1px;
    border-top: 1px solid #0f0f0f;
}


input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    z-index: 99;
    cursor: pointer;
    height: 100%;
    width: 100%;
}

.social-bar {
    width: 100%;
    background: var(--f7-theme-color);
    border-radius: var(--f7-block-inset-border-radius);
    overflow: hidden;
}

.social-bar ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin:0;
}

.social-bar ul li {
    width: 33.33%;
    text-align: center;
}

.social-bar ul li a {
    display: block;
    padding: 10px 10px;
    color: #fff;
}

.social-bar ul li.active a {
    background: var(--color-amber-400);
    position: relative;
}

.social-bar ul li.active a:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 6px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px 5px 0 0;
}

.social-bar.user-social-bar {
    background: transparent;
}

.social-bar.user-social-bar ul li a {
    padding: 0;
}

.profile-area .user-actions {
    display: flex;
    position: relative;
}

.profile-area .user-actions a,
.profile-area .user-actions button {
    width: 100%;
    margin-right: 10px;
}

.profile-area .profile-area a:last-child,
.profile-area .user-actions button:last-child {
    margin-right: 0;
}

.subscribe-header {
    text-align: center;
}

.subscribe-header .subscribe-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscribe-header img{
    margin-left: -10px;
}

.page-footer{
    width: 100%;
    text-align: center;
    padding-bottom: 100px;
}

.profile-image {
    position: relative;
}

.profile-edit {
    position: absolute;
    bottom: 0px;
    right: 15px;
    color: var(--color-blue-500);
}

.setting-bg {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 200px;
    position: absolute;
    top: 55px;
    z-index: -1;
}

.tabs-medias .page{
    position: relative;
}


.cropper-view-box,
.cropper-face {
    border-radius: 18%;
}

.cropper-view-box {
    outline: 0;
    box-shadow: 0 0 0 1px #39f;
}

.crop-profile {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.crop-profile img {
    max-height: 600px;
    width: 100%;
}

.cropper-bg {
    background-image: none !important;
}

.cropper-modal {
    opacity: 0 !important;
}

/*
|------------------------------------------------------------------------------
|  qrcode page 
|------------------------------------------------------------------------------
*/
.qrcode.overlay-container:after {
    background-image: var(--overlay-container-background);
}

.qrcode-wrap {
    position: relative;
    top: 25%;
    text-align: center;
    z-index: 99;
}

.qrcode-content {
    border-radius: 8px;
    padding: 30px 20px;
    margin: 0;
}

.qrcode-actions button {
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0;
}

.qrcode-actions .card{
    color: var(--title-color);
    padding: 15px;
    margin: 0;
}

/*
|------------------------------------------------------------------------------
| 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;
}


/*
|------------------------------------------------------------------------------
|  node page 
|------------------------------------------------------------------------------
*/

.node.sheet-import-method .input-wrap {
    position: relative;
}

.node.sheet-import-method .input-wrap span {
    position: absolute;
    top: 10%;
    right: 10px;
    font-size: 24px;
}

.node.sheet-import-method .input-wrap span {
    position: absolute;
    top: 10%;
    right: 10px;
    font-size: 24px;
}

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

.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 .item-checkbox,
.radio-list .item-radio{
    padding: 0;
}

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

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

.ios label.item-radio:not(.item-radio-icon-start) .item-inner{
/*    padding: 16px; languages use it */ 
}

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

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

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

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

/*
|------------------------------------------------------------------------------
|  contacts page 
|------------------------------------------------------------------------------
*/
.user-list .media {
    margin-right: 15px;
}
.user-list .media img{
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.swiper-category .swiper-slide,
.swiper-friends .swiper-slide,
.swiper-drama-tags .swiper-slide {
    width: auto;
}

/*
|------------------------------------------------------------------------------
|  swiper-reels page 
|------------------------------------------------------------------------------
*/

.swiper-container,
.swiper-wrapper,
.swiper-slide {
    position: relative;
    height: 100%;
    width: 100%;
}

.reels-wrapper{
    position: relative;
    height: 100%;
}

.video-card {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.swiper-reels,
.swiper-shorts {
    height: 100% !important;
    z-index: 4;
    max-width: 500px;
    width: 100%;
}

.swiper-reels .card-media,
.swiper-shorts .card-media{
   position: relative;
   height: 100%;
   width: 100%;
}

.card-media .preview-black {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    height: 100%;
    transition: height, margin-top .3s;
}

.card-media video {
    object-fit: cover;
    max-width: 100%;
    height: 100%;
    transition: height, margin-top .3s;
}

.reel-main-content {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.reel-info-wrapper {
/*    flex: 1 1 auto;
    position: relative;*/
    position: absolute;
    bottom: 0;
    width: 100%;
    transition: all .3s;
    z-index: 11;
}

.reel-video-description {
    width: 274px;
    color: rgb(255, 255, 255);
    line-height: 1;
    /* margin-inline-start: 12px; */
    /* position: absolute; */
    /* bottom: 8px; */
    /* left: 0px; */
    /* right: unset; */
    /* z-index: 9999; */
    /* pointer-events: none; */
    margin-left: 8px;
    margin-bottom: 8px;
}

.reel-video-description .profile-info {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
}

.reel-video-description .profile-info button {
    color: #fff;
    width: auto;
}

.reel-video-description .card-title {
    margin-top: 4px;

}

.reel-info-wrapper .right-area {
    max-height: calc(-150px + 100vh);
    bottom: 8px;
    width: 49px;
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
}

.right-area .operater-area {
/*    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 4px;*/
}

.right-area .operater-area .like-icon {
    width: 100%;
    display: flex;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    align-items: center;
    height: 62px;
    margin-bottom: 12px;
    position: relative;
    color: #fff;
    flex-direction: column;
}

.player-icon-container {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

.player-icon-container i{
    font-size: 60px;
}

/*
|------------------------------------------------------------------------------
|  Short Drama page
|------------------------------------------------------------------------------
*/

.swiper-drama-banner .swiper-slide {
    background-position: center;
    background-size: cover;
    overflow: hidden;
    /*    width: 520px;*/
    height: 100%;
    border-radius: 8px;
    /*    max-width: calc(100% - 48px);*/
}

.swiper-drama-banner .swiper-slide.swiper-slide-visible.swiper-slide-active {
    transition: all 0.3s !important;
}

.swiper-drama-banner .swiper-slide-visible.swiper-slide-next,
.swiper-drama-banner .swiper-slide-visible.swiper-slide-prev {
    transition: all 0.5s !important;
}

.swiper-drama-banner .swiper-slide img {
    display: block;
    width: 100%;
    object-fit: cover;
}

/*
|------------------------------------------------------------------------------
|  converstion page
|------------------------------------------------------------------------------
*/
    .chats .list .item-media img {
        width: 50px;
        height: 50px;
        border-radius: 17px;
    }

.messages-title .badge {
    border-radius: 4px;
    width: auto;
}

.call-img {
    text-align: center;
    position: relative;
    margin-top: 50px;
}

.call-img .profile-img {
/*    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
    width: 90px;
    height: 90px;
    border: 1px solid rgba(var(--title-color), 1);
    border-radius: 100%;
}

.group-name {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
}

.call-button-section {
    position: fixed;
    bottom: 0px;
    width: 100%;
}

.call-button-section .option-buttons {
    padding-bottom: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}

.call-button-section .call-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.call-button-section::after {
    content: "";
    position: absolute;
    width: 83%;
    border: 1px solid rgba(var(--f7-color-gray-rgb), 0.15);
    border-radius: 100%;
    height: 230px;
    bottom: -85px;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    z-index: -1;
}

/*
|------------------------------------------------------------------------------
|  referral page
|------------------------------------------------------------------------------
*/

.myreferral .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px 0;
}

.publish-warp{
    height: 100%;
    position: relative;
}


/*
|------------------------------------------------------------------------------
|  leaderboard page
|------------------------------------------------------------------------------
*/

.page[data-name=leaderboard] .leader {
    height: 80px;
    width: 80px;
    border: 3px solid;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leader .icon {
    font-size: 60px
}

/*.page[data-name=leaderboard] .leader-top {
    margin: 60px 0;
    padding: 10px 0;
}*/

.page[data-name=leaderboard] .fa-crown {
    font-size: 35px;
    margin-bottom: -12px;
}

.page[data-name=leaderboard] .chip {
    margin-top: -25px;
}

/*.page[data-name=leaderboard] .rank-first {
    margin-top: -60px;
}*/

.page[data-name=leaderboard] .rank-first .fa-crown {
    font-size: 45px;
    margin-bottom: -15px;
}

.page[data-name=leaderboard] .rank-first .leader {
    height: 100px;
    width: 100px;
}

.page[data-name=leaderboard] .list ul {
    margin: 0;
/*    background: var(--f7-color-picker-group-bg-color);*/
background: #000;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    overflow-y: auto;
    height: calc(100vh - 380px - var(--f7-safe-area-bottom));
}

.page[data-name=leaderboard] .list .item-content {
    background: var(--background-color);
    margin: 0 16px;
    border-radius: var(--f7-block-inset-border-radius);
}

.page[data-name=leaderboard] .list .my-rank {
    background-color: var(--f7-theme-color);
    border-radius: var(--f7-list-inset-border-radius);
    box-shadow: var(--f7-elevation-12);
    margin: 0 8px;
}

.page[data-name=leaderboard] .my-rank * {
    color: #FFFFFF !important;
}

/*
|------------------------------------------------------------------------------
|  video plus page
|------------------------------------------------------------------------------
*/

.video-plus {
    display: flex;
    align-items:center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.video-plus .preview-video{
    height: 100%;
}

.icon-plus{
    position: absolute;
}

.post-list {
    height: 100%;
    overflow-y: auto;
}

.community.grid {
    margin: 0;
}

.community.grid-cols-1 img {
    height: 150px;
    width: 60%;
}

.community.grid-cols-2 img {
    height: 120px;
    width: 50%;
}

.community.grid-cols-3 img {
    height: 80px;
    width: 100%;
}

.community.grid img {
/*    object-fit: cover;*/
    border-radius: 5px;
}