framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 26.7 kB
CSS
:root{--f7-timeline-inner-block-margin-vertical:16px;--f7-timeline-divider-margin-horizontal:16px;--f7-timeline-horizontal-date-height:34px;--f7-timeline-year-height:24px;--f7-timeline-year-font-weight:inherit;--f7-timeline-month-height:24px;--f7-timeline-month-font-size:inherit;--f7-timeline-month-font-weight:inherit;--f7-timeline-item-text-font-weight:inherit;--f7-timeline-item-subtitle-font-weight:inherit}.ios{--f7-timeline-divider-color:#bbb;--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:35px;--f7-timeline-item-inner-border-radius:7px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:17px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:600;--f7-timeline-item-subtitle-font-size:15px;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-color:inherit;--f7-timeline-item-text-line-height:inherit;--f7-timeline-year-font-size:16px;--f7-timeline-horizontal-item-padding:10px;--f7-timeline-item-inner-bg-color:#fff;--f7-timeline-item-time-text-color:rgba(0, 0, 0, 0.45);--f7-timeline-horizontal-item-border-color:rgba(0, 0, 0, 0.22);--f7-timeline-horizontal-item-date-border-color:rgba(0, 0, 0, 0.22)}.ios .dark,.ios.dark{--f7-timeline-horizontal-item-border-color:rgba(255, 255, 255, 0.15);--f7-timeline-horizontal-item-date-border-color:rgba(255, 255, 255, 0.15);--f7-timeline-item-inner-bg-color:#1c1c1d;--f7-timeline-item-time-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:32px;--f7-timeline-item-inner-border-radius:16px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:16px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:400;--f7-timeline-item-subtitle-font-size:inherit;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-line-height:inherit;--f7-timeline-year-font-size:16px;--f7-timeline-horizontal-item-padding:12px;--f7-timeline-horizontal-item-date-border-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-timeline-divider-color:var(--f7-md-outline);--f7-timeline-item-text-color:var(--f7-md-on-surface);--f7-timeline-horizontal-item-border-color:var(--f7-md-outline);--f7-timeline-item-inner-bg-color:var(--f7-md-surface-1);--f7-timeline-item-time-text-color:var(--f7-md-on-surface-variant)}.timeline{box-sizing:border-box;margin:var(--f7-timeline-margin-vertical) 0;padding:0 var(--f7-timeline-padding-horizontal);padding-top:0;padding-bottom:0;padding-left:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));padding-right:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right))}.block-strong .timeline{padding:0;margin:0}.timeline-item{display:flex;justify-content:flex-start;overflow:hidden;box-sizing:border-box;position:relative;padding:2px 0px var(--f7-timeline-padding-horizontal)}.timeline-item:last-child{padding-bottom:2px}.timeline-item-date{flex-shrink:0;width:50px;text-align:right;box-sizing:border-box}.timeline-item-date small{font-size:10px}.timeline-item-content{margin:2px;min-width:0;position:relative;flex-shrink:10}.timeline-item-content .block,.timeline-item-content .card,.timeline-item-content .list,.timeline-item-content.block,.timeline-item-content.card,.timeline-item-content.list{margin:0;width:100%}.timeline-item-content .block+.block,.timeline-item-content .block+.card,.timeline-item-content .block+.list,.timeline-item-content .card+.block,.timeline-item-content .card+.card,.timeline-item-content .card+.list,.timeline-item-content .list+.block,.timeline-item-content .list+.card,.timeline-item-content .list+.list{margin:var(--f7-timeline-inner-block-margin-vertical) 0 0}.timeline-item-content h1:first-child,.timeline-item-content h2:first-child,.timeline-item-content h3:first-child,.timeline-item-content h4:first-child,.timeline-item-content ol:first-child,.timeline-item-content p:first-child,.timeline-item-content ul:first-child{margin-top:0}.timeline-item-content h1:last-child,.timeline-item-content h2:last-child,.timeline-item-content h3:last-child,.timeline-item-content h4:last-child,.timeline-item-content ol:last-child,.timeline-item-content p:last-child,.timeline-item-content ul:last-child{margin-bottom:0}.timeline-item-inner{background:var(--f7-timeline-item-inner-bg-color);box-sizing:border-box;border-radius:var(--f7-timeline-item-inner-border-radius);padding:8px var(--f7-timeline-padding-horizontal)}.timeline-item-inner+.timeline-item-inner{margin-top:var(--f7-timeline-inner-block-margin-vertical)}.timeline-item-inner .block{padding:0;color:inherit}.timeline-item-inner .block-strong{padding-left:0;padding-right:0;margin:0}.timeline-item-inner .block-strong:after,.timeline-item-inner .block-strong:before{display:none}.timeline-item-inner .list ul:after,.timeline-item-inner .list ul:before{display:none}.timeline-item-divider{width:1px;position:relative;width:10px;height:10px;background:var(--f7-timeline-divider-color);border-radius:50%;flex-shrink:0;margin:3px var(--f7-timeline-divider-margin-horizontal) 0}.timeline-item-divider:after,.timeline-item-divider:before{content:' ';width:1px;height:100vh;position:absolute;left:50%;background:inherit;transform:translate3d(-50%,0,0)}.timeline-item-divider:after{top:100%}.timeline-item-divider:before{bottom:100%}.timeline-item:last-child .timeline-item-divider:after{display:none}.timeline-item:first-child .timeline-item-divider:before{display:none}.timeline-item-time{font-size:var(--f7-timeline-item-time-font-size);margin-top:var(--f7-timeline-inner-block-margin-vertical);color:var(--f7-timeline-item-time-text-color)}.timeline-item-time:first-child,.timeline-item-time:last-child{margin-top:0}.timeline-item-title+.timeline-item-time{margin-top:0}.timeline-item-title{font-size:var(--f7-timeline-item-title-font-size);font-weight:var(--f7-timeline-item-title-font-weight);line-height:var(--f7-timeline-item-title-line-height)}.timeline-item-subtitle{font-size:var(--f7-timeline-item-subtitle-font-size);font-weight:var(--f7-timeline-item-subtitle-font-weight);line-height:var(--f7-timeline-item-subtitle-line-height)}.timeline-item-text{color:var(--f7-timeline-item-text-color);font-size:var(--f7-timeline-item-text-font-size);font-weight:var(--f7-timeline-item-text-font-weight);line-height:var(--f7-timeline-item-text-line-height)}.timeline-sides .timeline-item,.timeline-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.timeline-sides .timeline-item .timeline-item-date,.timeline-sides .timeline-item-right .timeline-item-date{text-align:right}.timeline-sides .timeline-item-left,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.timeline-sides .timeline-item-left .timeline-item-date,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}@media (min-width:480px){.xsmall-sides .timeline-item,.xsmall-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.xsmall-sides .timeline-item .timeline-item-date,.xsmall-sides .timeline-item-right .timeline-item-date{text-align:right}.xsmall-sides .timeline-item-left,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.xsmall-sides .timeline-item-left .timeline-item-date,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:568px){.small-sides .timeline-item,.small-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.small-sides .timeline-item .timeline-item-date,.small-sides .timeline-item-right .timeline-item-date{text-align:right}.small-sides .timeline-item-left,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.small-sides .timeline-item-left .timeline-item-date,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:768px){.medium-sides .timeline-item,.medium-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.medium-sides .timeline-item .timeline-item-date,.medium-sides .timeline-item-right .timeline-item-date{text-align:right}.medium-sides .timeline-item-left,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.medium-sides .timeline-item-left .timeline-item-date,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:1024px){.large-sides .timeline-item,.large-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.large-sides .timeline-item .timeline-item-date,.large-sides .timeline-item-right .timeline-item-date{text-align:right}.large-sides .timeline-item-left,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.large-sides .timeline-item-left .timeline-item-date,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:1200px){.xlarge-sides .timeline-item,.xlarge-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.xlarge-sides .timeline-item .timeline-item-date,.xlarge-sides .timeline-item-right .timeline-item-date{text-align:right}.xlarge-sides .timeline-item-left,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.xlarge-sides .timeline-item-left .timeline-item-date,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}.timeline-horizontal{height:100%;display:flex;padding:0;margin:0;position:relative;padding-left:var(--f7-safe-area-left);padding-right:0}.timeline-horizontal .timeline-item{display:block;width:100/3vw;margin:0;padding:0;flex-shrink:0;position:relative;height:100%;padding-top:var(--f7-timeline-horizontal-date-height);padding-bottom:var(--f7-timeline-horizontal-item-padding)}.timeline-horizontal .timeline-item:after{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-border-color);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;transform-origin:100% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-horizontal .timeline-item-date{padding:0px var(--f7-timeline-horizontal-item-padding);width:auto;line-height:var(--f7-timeline-horizontal-date-height);position:absolute;left:0;top:0;width:100%;height:var(--f7-timeline-horizontal-date-height);background-color:var(--f7-bars-bg-color);color:var(--f7-bars-text-color);text-align:left}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .timeline-horizontal .timeline-item-date{background-color:rgba(var(--f7-bars-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.timeline-horizontal .timeline-item-date:after{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-date-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)))}.timeline-horizontal .timeline-item-content{padding:var(--f7-timeline-horizontal-item-padding);height:calc(100vw - var(--f7-timeline-horizontal-item-padding));overflow:auto;-webkit-overflow-scrolling:touch;margin:0}.timeline-horizontal .timeline-item-divider{display:none}.timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after,.timeline-horizontal>.timeline-item:last-child:after{display:none}.timeline-horizontal.timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.timeline-cols-20 .timeline-item{width:calc(100vw / 20)}@media (min-width:480px){.timeline-horizontal.xsmall-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.xsmall-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.xsmall-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.xsmall-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.xsmall-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.xsmall-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.xsmall-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.xsmall-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.xsmall-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.xsmall-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.xsmall-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.xsmall-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.xsmall-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.xsmall-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.xsmall-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.xsmall-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.xsmall-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.xsmall-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.xsmall-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.xsmall-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:568px){.timeline-horizontal.small-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.small-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.small-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.small-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.small-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.small-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.small-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.small-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.small-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.small-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.small-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.small-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.small-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.small-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.small-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.small-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.small-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.small-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.small-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.small-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:768px){.timeline-horizontal.medium-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.medium-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.medium-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.medium-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.medium-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.medium-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.medium-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.medium-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.medium-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.medium-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.medium-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.medium-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.medium-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.medium-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.medium-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.medium-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.medium-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.medium-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.medium-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.medium-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:1024px){.timeline-horizontal.large-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.large-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.large-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.large-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.large-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.large-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.large-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.large-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.large-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.large-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.large-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.large-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.large-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.large-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.large-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.large-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.large-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.large-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.large-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.large-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:1200px){.timeline-horizontal.xlarge-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.xlarge-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.xlarge-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.xlarge-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.xlarge-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.xlarge-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.xlarge-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.xlarge-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.xlarge-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.xlarge-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.xlarge-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.xlarge-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.xlarge-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.xlarge-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.xlarge-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.xlarge-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.xlarge-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.xlarge-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.xlarge-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.xlarge-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}.timeline-year{padding-top:var(--f7-timeline-year-height)}.timeline-year:after{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-border-color);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;transform-origin:100% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-year:last-child:after{display:none}.timeline-month{padding-top:var(--f7-timeline-month-height)}.timeline-month .timeline-item:before{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-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)))}.timeline-month,.timeline-year{display:flex;flex-shrink:0;position:relative;box-sizing:border-box;height:100%}.timeline-year-title{line-height:var(--f7-timeline-year-height);height:var(--f7-timeline-year-height);font-size:var(--f7-timeline-year-font-size);font-weight:var(--f7-timeline-year-font-weight)}.timeline-month-title{line-height:var(--f7-timeline-month-height);height:var(--f7-timeline-month-height);font-size:var(--f7-timeline-month-font-size);font-weight:var(--f7-timeline-month-font-weight)}.timeline-month-title,.timeline-year-title{position:absolute;left:0;top:0;width:100%;box-sizing:border-box;padding:0 var(--f7-timeline-horizontal-item-padding);background-color:var(--f7-bars-bg-color);color:var(--f7-bars-text-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .timeline-month-title,.ios-translucent-bars .timeline-year-title{background-color:rgba(var(--f7-bars-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.timeline-month-title span,.timeline-year-title span{display:inline-block;position:sticky;left:calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left))}.timeline-month-title span{margin-top:-2px}.timeline-year:first-child .timeline-month:first-child .timeline-month-title,.timeline-year:first-child .timeline-year-title,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-month-title{left:calc(var(--f7-safe-area-left) * -1);right:0;width:auto}.timeline-horizontal .timeline-item:first-child,.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-item:first-child,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-month-title+.timeline-item{overflow:visible}.timeline-horizontal .timeline-item:first-child .timeline-item-date,.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-item:first-child .timeline-item-date,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-month-title+.timeline-item .timeline-item-date{width:auto;padding-left:calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));left:calc(0px - var(--f7-safe-area-left));right:0}.timeline-year:last-child .timeline-month:last-child .timeline-month-title,.timeline-year:last-child .timeline-year-title{width:auto;right:calc(0px - var(--f7-safe-area-right))}.timeline-horizontal .timeline-item:last-child,.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child{overflow:visible}.timeline-horizontal .timeline-item:last-child .timeline-item-date,.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date{width:auto;right:calc(0px - var(--f7-safe-area-right));left:0}.ios .block-strong .timeline-item-inner{border-radius:3px;border:1px solid rgba(0,0,0,.1)}.ios .timeline-year-title span{margin-top:3px}.md .timeline-year-title span{margin-top:2px}