UNPKG

@alicloudfe/components

Version:

A react component library for aliyun

2,083 lines (1,868 loc) 1.01 MB
@charset "UTF-8"; :root { --btn-pure-primary-bg-image: linear-gradient(90deg, #1B58F4 0%, #457AFF 100%); --btn-pure-normal-bg-hover: #E5E5E5; --btn-pure-normal-border-color-hover: #E5E5E5; --progress-line-normal-bg-color: linear-gradient(90deg, #1B58F4 0%, #457AFF 100%); --nav-secondary-item-selected-bg: transparent; --nav-ver-height: 32px; --menu-background-selected: transparent; --nav-normal-item-selected-text-color: #236BEF; --nav-ver-item-selected-active-line: 0px; --nav-ver-sub-nav-height: 32px; --nav-normal-item-selected-text-style: normal; --nav-primary-item-selected-text-style: normal; --nav-group-height: 32px; --nav-group-font-size: 12px; --menu-padding-title-horizontal: 20px; --next-avatar-bg-color: #1B58F4; --checkbox-icon-scale: 0.6; --checkbox-disabled-only-border-color: #d9d9d9; --checkbox-disabled-only-bg-color: #f9f9f9; --balloon-tooltip-color-bg: #4e4e4e; --balloon-normal-color-bg: #515151; --balloon-primary-color-bg: #515151; --balloon-primary-color-border: #515151; --balloon-primary-color: #ffffff; --balloon-size-close-margin-top: 9px; --balloon-size-close: 8px; --menu-padding-horizontal-selectable: 32px; --select-menu-select-icon-ml: -16px; --search-normal-normal-hover-color: #d9d9d9; --search-normal-normal-btn-hover-bg-color: #f3f3f3; --search-normal-normal-btn-hover-text-color: #595959; --search-normal-primary-hover-color: #d9d9d9; --search-normal-secondary-hover-color: #d9d9d9; --search-simple-corner: 4px; --message-help-color-icon-toast: #888888; --message-help-color-icon-inline: #888888; --tag-cursor: pointer; --tag-hover-bg: #e5e5e5; --breadcrumb-icon-color: #727272; --btn-ghost-light-border-color: #1B59F4; --btn-ghost-light-color: #1B59F4; --btn-ghost-dark-border-color: rgba(255,255,255,0.1); --btn-ghost-dark-color: #457AFF; --btn-pure-secondary-bg-hover: #F5FAFF; --btn-pure-secondary-border-color-hover: #154CD9; --btn-warning-primary-bg: #D32020; --btn-warning-primary-border-color: #D32020; --btn-warning-primary-bg-hover: #C11919; --btn-warning-primary-border-color-hover: #C11919; --cascader-menu-icon-hover-expand-color: #727272; --menu-checkbox-mr: 16px; --calendar-card-table-cell-hover-background: #E5E5E5; --calendar-card-table-cell-hover-color: #595959; --calendar-card-table-cell-hover-border-color: #E5E5E5; --calendar-card-table-cell-normal-background: transparent; --calendar-card-table-cell-normal-border-color: transparent; --calendar-card-table-cell-current-background: transparent; --calendar-card-table-cell-current-border-color: transparent; --time-picker-menu-item-background: #f9f9f9; --time-picker-menu-title-background: #f9f9f9; --collapse-title-height: 18px; --collapse-icon-color: #737373; --collapse-title-font-disabled-color:#BEBEBE; --collapse-title-disabled-bg-color:#F3F3F3; --collapse-title-hover-bg-color: #e5e5e5; --radio-hovered-bg-color: transparent; --radio-checked-bg-color: transparent; --radio-checked-circle-color: #457AFF; --radio-circle-size: 8px; --radio-checked-hovered-bg-color: transparent; --radio-checked-hovered-border-color: #1B58F4; --radio-checked-hovered-circle-color: #457AFF; --radio-checked-disabled-border-color: #bebebe; --radio-checked-disabled-bg-color: #bebebe; --radio-checked-disabled-circle-color: #8c8c8c; --radio-disabled-border-color: #bebebe; --radio-disabled-bg-color: #bebebe; --radio-border-color: #8c8c8c; --radio-button-corner-small: 4px; --radio-button-corner-medium: 4px; --radio-button-corner-large: 4px; --progress-circle-underlay-width: 4px; --progress-circle-overlay-width: 4px; --checkbox-disabled-circle-color: #cccccc; --checkbox-checked-hovered-bg-color: #1752E4; --checkbox-checked-hovered-border-color: transparent; --checkbox-checked-hovered-circle-color: #ffffff; --input-border-color: #d9d9d9; --input-feedback-error-border-color: #D32020; --active-shadow: 0 4px 8px 0 rgba(0,0,0,0.01); --active-transition: 0.3s; --notification-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); --pagination-item-split: 1px; --pagination-item-hover-bg: #E5E5E5; --pagination-item-disabled-bg: #f3f3f3; --pagination-large-item-split: 1px; --pagination-small-item-split: 1px; --tab-wrapped-tab-margin-right: 1px; --tab-wrapped-tab-margin-bottom: 1px; --tab-item-padding-tb-size-s: 10px; --tab-item-padding-lr-size-s: 16px; --tab-item-padding-tb-size-m: 12px; --tab-item-padding-lr-size-m: 16px; --list-size-m-item-media-margin: 16px; --list-size-m-item-padding-lr: 16px; --list-size-m-item-title-font-size: 12px; --list-size-m-item-content-font-size: 12px; --list-size-s-item-padding-tb: 16px; --list-size-s-item-padding-lr: 16px; --list-size-s-item-media-margin: 16px; --list-size-s-item-title-font-size: 12px; --badge-color-bg: #C82727; --dialog-close-width: 12px; --dialog-close-height: 12px; --dialog-close-right: 22px; --dialog-close-top: 22px; --dialog-close-color: #737373; --dialog-title-color: #000000; --message-size-m-border-radius: 4px; --message-close-icon-color: #737373; --message-notice-color-bg-inline: #EAF1FE; --message-notice-color-border-inline: #EAF1FE; --message-error-color-bg-inline: #FFEBEC; --message-error-color-border-inline: #FFEBEC; --message-waring-color-bg-inline: #FFF7E5; --message-waring-color-border-inline: #FFF7E5; --message-warning-color-icon-toast: #FFAA14; --message-warning-color-icon-inline: #FFAA14; --message-warning-color-icon-addon: #FFAA14; --message-success-color-icon-toast: #29A64E; --message-success-color-icon-inline: #29A64E; --message-success-color-icon-addon: #29A64E; --message-error-color-icon-toast: #C82728; --message-error-color-icon-inline: #C82728; --message-error-color-icon-addon: #C82728; --drawer-title-border-width: 0px; --upload-card-add-text-margin-top: 4px; --range-size-m-track-radius: 2px; --table-cell-padding-top: 10px; --table-header-padding-top: 10px; } .next-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; margin: -1px; } html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: inherit; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } dfn { font-style: italic; } mark { background-color: #FF0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type=checkbox], [type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details, menu { display: block; } summary { display: list-item; } canvas { display: inline-block; } template { display: none; } [hidden] { display: none; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } ul, ol { list-style: none; margin: 0; padding: 0; } li { margin-left: 0; } hr { border: 0 solid #E5E5E5; border: 0 var(--line-solid, solid) var(--color-line1-2, #E5E5E5); border-top-width: 1px; border-top-width: var(--line-1, 1px); } a { text-decoration: none; } a:link { color: #EBF1FF; color: var(--color-link-1, #EBF1FF); } a:visited { color: #1B58F4; color: var(--color-link-2, #1B58F4); } a:hover { color: #1752E4; color: var(--color-link-3, #1752E4); } a:active { text-decoration: underline; color: #1752E4; color: var(--color-link-3, #1752E4); } @font-face { font-family: "Roboto"; src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.eot"); src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.ttf") format("truetype"); font-weight: 200; } @font-face { font-family: "Roboto"; src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.eot"); src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.ttf") format("truetype"); font-weight: 300; } @font-face { font-family: "Roboto"; src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.eot"); src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.ttf") format("truetype"); font-weight: 400; } @font-face { font-family: "Roboto"; src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.eot"); src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.ttf") format("truetype"); font-weight: 500; } @font-face { font-family: "Roboto"; src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.eot"); src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.ttf") format("truetype"); font-weight: 700; } html { font-size: 100%; } body { font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "Microsoft YaHei", "PingFang SC"; font-size: 12px; font-size: var(--font-size-body-1, 12px); line-height: 1.28571; color: #1A1A1A; color: var(--color-text1-4, #1A1A1A); } button, input, optgroup, select, textarea { font-family: inherit; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { margin-bottom: 12px; margin-bottom: calc(var(--font-size-headline, 24px) * 0.5); font-size: 24px; font-size: var(--font-size-headline, 24px); font-weight: 500; font-weight: var(--font-weight-medium, 500); line-height: 36px; } h2 { margin-bottom: 10px; margin-bottom: calc(var(--font-size-title, 20px) * 0.5); font-size: 20px; font-size: var(--font-size-title, 20px); font-weight: 500; font-weight: var(--font-weight-medium, 500); line-height: 30px; } h3 { margin-bottom: 8px; margin-bottom: calc(var(--font-size-subhead, 16px) * 0.5); font-size: 16px; font-size: var(--font-size-subhead, 16px); font-weight: normal; font-weight: var(--font-weight-2, normal); line-height: 24px; } h4 { margin-bottom: 8px; margin-bottom: calc(var(--font-size-subhead, 16px) * 0.5); font-size: 16px; font-size: var(--font-size-subhead, 16px); font-weight: normal; font-weight: var(--font-weight-2, normal); line-height: 24px; } h5 { margin-bottom: 6px; margin-bottom: calc(var(--font-size-body-1, 12px) * 0.5); font-size: 14px; font-size: var(--font-size-body-2, 14px); font-weight: normal; font-weight: var(--font-weight-2, normal); line-height: 24px; } h6 { margin-bottom: 7px; margin-bottom: calc(var(--font-size-body-2, 14px) * 0.5); font-size: 12px; font-size: var(--font-size-body-1, 12px); font-weight: 500; font-weight: var(--font-weight-medium, 500); line-height: 20px; } p { margin-bottom: 6px; margin-bottom: calc(var(--font-size-body-1, 12px) * 0.5); font-size: 12px; font-size: var(--font-size-body-1, 12px); font-weight: normal; font-weight: var(--font-weight-2, normal); line-height: 20px; } strong { font-weight: 500; } small { font-size: 75%; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-webkit-keyframes expandInDown { 0% { opacity: 0; -webkit-transform: scaleY(0.6); -ms-transform: scaleY(0.6); transform: scaleY(0.6); -webkit-transform-origin: left top 0; -ms-transform-origin: left top 0; transform-origin: left top 0; } 100% { opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: left top 0; -ms-transform-origin: left top 0; transform-origin: left top 0; } } @keyframes expandInDown { 0% { opacity: 0; -webkit-transform: scaleY(0.6); -ms-transform: scaleY(0.6); transform: scaleY(0.6); -webkit-transform-origin: left top 0; -ms-transform-origin: left top 0; transform-origin: left top 0; } 100% { opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: left top 0; -ms-transform-origin: left top 0; transform-origin: left top 0; } } @-webkit-keyframes expandInUp { 0% { opacity: 0; -webkit-transform: scaleY(0.6); -ms-transform: scaleY(0.6); transform: scaleY(0.6); -webkit-transform-origin: left bottom 0; -ms-transform-origin: left bottom 0; transform-origin: left bottom 0; } 100% { opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: left bottom 0; -ms-transform-origin: left bottom 0; transform-origin: left bottom 0; } } @keyframes expandInUp { 0% { opacity: 0; -webkit-transform: scaleY(0.6); -ms-transform: scaleY(0.6); transform: scaleY(0.6); -webkit-transform-origin: left bottom 0; -ms-transform-origin: left bottom 0; transform-origin: left bottom 0; } 100% { opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: left bottom 0; -ms-transform-origin: left bottom 0; transform-origin: left bottom 0; } } @-webkit-keyframes expandInWithFade { 0% { opacity: 0; } 40% { opacity: 0.1; } 50% { opacity: 0.9; } 100% { opacity: 1; } } @keyframes expandInWithFade { 0% { opacity: 0; } 40% { opacity: 0.1; } 50% { opacity: 0.9; } 100% { opacity: 1; } } @-webkit-keyframes expandOutUp { 0% { opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: left top 0; -ms-transform-origin: left top 0; transform-origin: left top 0; } 100% { opacity: 0; -webkit-transform: scaleY(0.6); -ms-transform: scaleY(0.6); transform: scaleY(0.6); -webkit-transform-origin: left top 0; -ms-transform-origin: left top 0; transform-origin: left top 0; } } @keyframes expandOutUp { 0% { opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: left top 0; -ms-transform-origin: left top 0; transform-origin: left top 0; } 100% { opacity: 0; -webkit-transform: scaleY(0.6); -ms-transform: scaleY(0.6); transform: scaleY(0.6); -webkit-transform-origin: left top 0; -ms-transform-origin: left top 0; transform-origin: left top 0; } } @-webkit-keyframes expandOutDown { 0% { opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: left bottom 0; -ms-transform-origin: left bottom 0; transform-origin: left bottom 0; } 100% { opacity: 0; -webkit-transform: scaleY(0.6); -ms-transform: scaleY(0.6); transform: scaleY(0.6); -webkit-transform-origin: left bottom 0; -ms-transform-origin: left bottom 0; transform-origin: left bottom 0; } } @keyframes expandOutDown { 0% { opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: left bottom 0; -ms-transform-origin: left bottom 0; transform-origin: left bottom 0; } 100% { opacity: 0; -webkit-transform: scaleY(0.6); -ms-transform: scaleY(0.6); transform: scaleY(0.6); -webkit-transform-origin: left bottom 0; -ms-transform-origin: left bottom 0; transform-origin: left bottom 0; } } @-webkit-keyframes expandOutWithFade { 0% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } } @keyframes expandOutWithFade { 0% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes pulse { from { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 20% { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } to { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes pulse { from { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 20% { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } to { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .expandInDown { -webkit-animation-name: expandInDown; animation-name: expandInDown; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .expandOutUp { -webkit-animation-name: expandOutUp; animation-name: expandOutUp; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .expandInUp { -webkit-animation-name: expandInUp; animation-name: expandInUp; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .expandOutDown { -webkit-animation-name: expandOutDown; animation-name: expandOutDown; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .expand-enter { overflow: hidden; } .expand-enter-active { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .expand-enter-active > * { -webkit-animation-name: expandInWithFade; animation-name: expandInWithFade; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .expand-leave { overflow: hidden; } .expand-leave-active { -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .expand-leave-active > * { -webkit-animation-name: expandOutWithFade; animation-name: expandOutWithFade; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .next-badge { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; line-height: 1; } .next-badge *, .next-badge *:before, .next-badge *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } .next-badge .next-badge-count { color: #FFFFFF; background: #BD2424; background: var(--badge-color-bg, #BD2424); text-align: center; white-space: nowrap; border-radius: 8px; border-radius: var(--badge-size-count-border-radius, 8px); position: absolute; width: auto; height: 16px; height: var(--badge-size-count-config-height, 16px); min-width: 16px; min-width: var(--badge-size-count-config-height, 16px); padding: 0 4px 0 4px; padding: 0 var(--badge-size-count-padding-lr, 4px) 0 var(--badge-size-count-padding-lr, 4px); font-size: 10px; font-size: var(--badge-size-count-font, 10px); line-height: 16px; line-height: var(--badge-size-count-config-height, 16px); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: -0.5em; } .next-badge .next-badge-count a, .next-badge .next-badge-count a:hover { color: #FFFFFF; } .next-badge .next-badge-dot { color: #FFFFFF; background: #BD2424; background: var(--badge-dot-color-bg, #BD2424); text-align: center; white-space: nowrap; border-radius: 8px; border-radius: var(--badge-size-dot-border-radius, 8px); position: absolute; width: 8px; width: var(--badge-size-dot-width, 8px); height: 8px; height: var(--badge-size-dot-width, 8px); min-width: 8px; min-width: var(--badge-size-dot-width, 8px); padding: 0px; font-size: 1px; line-height: 1; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: -0.5em; } .next-badge .next-badge-dot a, .next-badge .next-badge-dot a:hover { color: #FFFFFF; } .next-badge .next-badge-custom { line-height: 1.166667; white-space: nowrap; font-size: 10px; font-size: var(--font-size-caption, 10px); padding-left: 4px; padding-left: var(--badge-size-custom-padding-lr, 4px); padding-right: 4px; padding-right: var(--badge-size-custom-padding-lr, 4px); border-radius: 2px; border-radius: var(--badge-size-custom-border-radius, 2px); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .next-badge .next-badge-custom > * { line-height: 1; } .next-badge .next-badge-custom > i:before, .next-badge .next-badge-custom > .next-icon:before { font-size: inherit; width: auto; vertical-align: top; } .next-badge .next-badge-scroll-number { position: absolute; top: -4px; z-index: 10; overflow: hidden; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .next-badge-scroll-number-only { position: relative; display: inline-block; transition: transform 100ms linear, -webkit-transform 100ms linear; min-width: 8px; min-width: var(--badge-size-dot-width, 8px); } .next-badge-scroll-number-only span { display: block; height: 16px; height: var(--badge-size-count-config-height, 16px); line-height: 16px; line-height: var(--badge-size-count-config-height, 16px); font-size: 10px; font-size: var(--badge-size-count-font, 10px); } .next-badge-not-a-wrapper .next-badge-count, .next-badge-not-a-wrapper .next-badge-custom { position: relative; display: block; top: auto; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .next-badge-not-a-wrapper .next-badge-dot { position: relative; display: block; top: auto; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .next-badge-list-wrapper { margin-left: 0; } .next-badge-list-wrapper li { margin-bottom: 0px; margin-bottom: var(--badge-size-list-margin, 0px); lis