/* ========================================================================== Reset ========================================================================== */ /** * Document * * 1. 讓所有的元素不會因為內距而更改其 `width` 寬度。 */ *, *::before, *::after { box-sizing: border-box; /** 1. */ } /** * HTML * * 1. 指定預設的動態背景與文字顏色,這樣才可以支援亮與暗色主題。 * 2. 預設要讓網頁能夠填滿整個螢幕才能讓某些元素運用整個高度。 */ html { background: var(--ts-page-background-default); /** 1. */ color: var(--ts-gray-800); /** 1. */ width: 100%; /** 2. */ height: 100%; /** 2. */ font-size: 15px; line-height: 1.75; } body { width: 100%; /** 2. */ height: 100%; /** 2. */ } /** * Body * * 1. 移除所有瀏覽器上的外距。 * 2. 避免元素過寬而出現不好捲動的水平捲軸。 * 3. 避免 iOS 在轉向之後變更字體縮放大小。 * 4. 改為透明來移除 Webkit 瀏覽器上的點擊高光。 */ body { margin: 0; /** 1. */ overflow-x: hidden; /** 2. */ -webkit-text-size-adjust: 100%; /** 3. */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /** 4. */ font-family: "Noto Sans TC", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", "Microsoft JhengHei", wf_SegoeUI, "Segoe UI", Segoe, "Segoe WP", Tahoma, Verdana, Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", 微軟正黑體, "LiHei Pro", "WenQuanYi Micro Hei", "Droid Sans Fallback", "AR PL UMing TW", Roboto, "Hiragino Maru Gothic ProN", メイリオ, "ヒラギノ丸ゴ ProN W4", Meiryo, "Droid Sans", sans-serif; } /** * Input for iOS date input * * https://github.com/teacat/tocas/issues/804 * https://github.com/twbs/bootstrap/pull/31993 * https://github.com/twbs/bootstrap/blob/80621d6431acd964690f89352b4f1bf8be9cfaf3/scss/forms/_form-control.scss#L47 */ input::-webkit-date-and-time-value { min-height: calc(1rem * 1.5); } /** * Button */ button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; appearance: none; -webkit-appearance: none; cursor: pointer; user-select: none; } /** * Dialog & Popover */ [popover] { /*position: var(--ts-popover-position);*/ } [class*="ts-"][popover]:not(:popover-open):not(:modal) { display: none; } dialog[class*="ts-"], :where([class*="ts-"][popover]) { border: none; margin: 0; padding: 0; max-width: initial; max-height: initial; } /** * Paragraphy */ [class*="ts-"] :where(p) { margin-block-start: 1em; margin-block-end: 1em; } [class*="ts-"] :where(:first-child) { margin-block-start: 0; } [class*="ts-"] .ts-header + p { margin-block-start: 0.5em; } [class*="ts-"] :where(:last-child) { margin-block-end: 0; } [class*="ts-"] :where(a) { color: inherit; } /* ========================================================================== Variables ========================================================================== */ @keyframes ts-button-loading { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .ts-button { --horizontal-padding: 1.25em; --height: var(--ts-input-height-medium); --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-button { position: relative; margin: 0; width: auto; font: inherit; outline: none; box-sizing: border-box; user-select: none; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: var(--height); -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; appearance: none; -webkit-appearance: none; } .ts-button:focus { outline: 0; } .ts-button { border: 2px solid var(--accent-color, var(--ts-gray-800)); min-width: 75px; font-size: var(--ts-font-size-14px); line-height: 1.5; font-weight: 500; color: var(--accent-foreground-color, var(--ts-gray-50)); background: var(--accent-color, var(--ts-gray-800)); text-decoration: none; display: inline-flex; vertical-align: middle; justify-content: center; align-items: center; text-align: center; padding: 0 var(--horizontal-padding); border-radius: var(--ts-border-radius-element); } .ts-button:hover { cursor: pointer; opacity: 0.98; } /* ========================================================================== Variations ========================================================================== */ /** * Secondary */ .ts-button.is-secondary { color: var(--accent-color, var(--ts-gray-800)); border-color: var(--ts-gray-100); background: var(--ts-gray-100); } /** * Tertiary */ .ts-button.is-tertiary { color: var(--ts-gray-800); background: var(--ts-gray-300); border-color: var(--ts-gray-300); } /** * Outlined */ .ts-button.is-outlined { background: transparent; border: 2px solid var(--ts-gray-300); color: var(--accent-color, var(--ts-gray-800)); } /** * Negative */ .ts-button.is-negative { color: var(--ts-white); border-color: var(--ts-negative-500); background: var(--ts-negative-500); } .ts-button.is-negative.is-outlined { color: var(--ts-negative-500); border-color: var(--ts-gray-300); background: transparent; } .ts-button.is-negative.is-secondary { color: var(--ts-negative-500); border-color: var(--ts-gray-100); background: var(--ts-gray-100); } .ts-button.is-ghost.is-negative { color: var(--ts-negative-500); } /** * Ghost */ .ts-button.is-ghost { background: transparent; color: var(--ts-gray-800); border: 2px solid transparent; } .ts-button.is-ghost:hover { background: var(--ts-gray-100); } /** * Loading */ .ts-button.is-loading, .ts-button.is-loading.is-negative { color: transparent; } .ts-button.is-loading .ts-icon { visibility: hidden; } .ts-button.is-loading::after { font-family: "Icons"; font-weight: normal; font-style: normal; display: inline; text-decoration: inherit; text-align: center; -webkit-font-smoothing: antialiased; backface-visibility: hidden; display: inline-block; animation: ts-button-loading 2s linear infinite; color: var(--ts-gray-50); font-size: var(--ts-font-size-18px); content: "\f110"; position: absolute; top: 50%; left: 50%; } .ts-button.is-loading:is(.is-outlined, .is-secondary, .is-tertiary, .is-ghost)::after { color: var(--ts-gray-800); } /** * Tertiary */ /*.ts-button.is-tertiary:hover { background: var(--ts-gray-100); opacity: 1; }*/ /** * Sizes */ .ts-button.is-small { --height: var(--ts-input-height-small); font-size: var(--ts-font-size-13px); } .ts-button.is-large { --height: var(--ts-input-height-large); font-size: var(--ts-font-size-16px); } /** * Disabled */ .ts-button:disabled, .ts-button.is-disabled, fieldset:disabled .ts-button { pointer-events: none; opacity: 0.5; user-select: none; } /** * Fluid */ .ts-button.is-fluid { width: 100%; } /** * Circular */ .ts-button.is-circular { border-radius: 100rem; } /** * Icon */ .ts-button.is-icon { padding: 0; min-width: 0; /*width: calc(var(--height) * 1.1);*/ width: var(--height); } .ts-button.is-icon .ts-icon { font-size: 1.2em; } .ts-button.is-icon.is-small .ts-icon { font-size: 1.15em; } /** * Side Icon */ .ts-button:where(.is-start-icon, .is-end-icon) .ts-icon { font-size: 1.2em; } .ts-button:is(.is-start-icon, .is-end-icon) .ts-icon::before { display: inline-block; margin-top: 1px; } .ts-button.is-start-icon .ts-icon { margin-right: 0.5em; } .ts-button.is-end-icon .ts-icon { margin-left: 0.5em; } /** * Labeled Icon */ .ts-button:is(.is-start-labeled-icon, .is-end-labeled-icon) .ts-icon { position: absolute; top: -2px; bottom: -2px; background: var(--ts-gray-900); line-height: 1; display: flex; align-items: center; justify-content: center; width: calc(2.75rem + 2px); } .ts-button:where(.is-start-labeled-icon, .is-end-labeled-icon) .ts-icon { font-size: 1.2em; } .ts-button.is-start-labeled-icon { padding-left: calc(var(--horizontal-padding) + 2.75em); } .ts-button.is-start-labeled-icon .ts-icon { left: -2px; border-radius: var(--ts-border-radius-element) 0 0 var(--ts-border-radius-element); } .ts-button.is-end-labeled-icon { padding-right: calc(var(--horizontal-padding) + 2.75em); } .ts-button.is-end-labeled-icon .ts-icon { right: -2px; border-radius: 0 var(--ts-border-radius-element) var(--ts-border-radius-element) 0; } .ts-button.is-negative:is(.is-start-labeled-icon, .is-end-labeled-icon) .ts-icon { background: var(--ts-negative-400); } .ts-button.is-outlined:is(.is-start-labeled-icon, .is-end-labeled-icon) .ts-icon { /*background: var(--ts-gray-300);*/ background: transparent; border: 2px solid var(--ts-gray-300); } .ts-button.is-secondary:is(.is-start-labeled-icon, .is-end-labeled-icon) .ts-icon { background: var(--ts-gray-200); } .ts-button.is-tertiary:is(.is-start-labeled-icon, .is-end-labeled-icon) .ts-icon { background: var(--ts-gray-400); } /** * Dense */ .ts-button.is-dense { --height: var(--ts-input-height-medium-dense); } .ts-button.is-dense.is-small { --height: var(--ts-input-height-small-dense); } .ts-button.is-dense.is-large { --height: var(--ts-input-height-large-dense); } /** * Wide */ .ts-button.is-short { --horizontal-padding: 0.75em; min-width: 65px; } .ts-button.is-wide { --horizontal-padding: 2em; } /** * Start & End */ .ts-addon { display: flex; gap: 2px; } .ts-addon > *:first-child, .ts-addon > .ts-input:first-child :where(input, textarea) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ts-addon > *:last-child, .ts-addon > .ts-input:last-child :where(input, textarea) { border-top-left-radius: 0; border-bottom-left-radius: 0; } /** * Buttons */ .ts-buttons { display: flex; } .ts-buttons .ts-button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ts-buttons .ts-button:not(:first-child):not(:last-child) { border-radius: 0; } .ts-buttons .ts-button:not(:first-child)::before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0; height: 70%; background: var(--ts-gray-600); width: 1px; } .ts-buttons .ts-button.is-icon:not(:first-child) { width: calc(var(--height) * 1.1); /** divider visual balance */ } .ts-buttons .ts-button.is-outlined::before { display: none; } .ts-buttons .ts-button.is-negative::before { background: var(--ts-negative-400); } .ts-buttons .ts-button.is-secondary::before { background: var(--ts-gray-400); } .ts-buttons .ts-button:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } .ts-buttons .ts-button.is-outlined + .ts-button.is-outlined { border-left-color: transparent; } .ts-icon.is-car-rear-icon::before { content: "\f5de"; } .ts-icon.is-dice-five-icon::before { content: "\f523"; } .ts-icon.is-user-graduate-icon::before { content: "\f501"; } .ts-icon.is-bandage-icon::before { content: "\f462"; } .ts-icon.is-building-flag-icon::before { content: "\e4d5"; } .ts-icon.is-dice-six-icon::before { content: "\f526"; } .ts-icon.is-orcid-icon::before { font-family: "IconsBrands"; content: "\f8d2"; } .ts-icon.is-basket-shopping-icon::before { content: "\f291"; } .ts-icon.is-feather-pointed-icon::before { content: "\f56b"; } .ts-icon.is-pied-piper-pp-icon::before { font-family: "IconsBrands"; content: "\f1a7"; } .ts-icon.is-arrows-left-right-icon::before { content: "\f07e"; } .ts-icon.is-house-flood-water-circle-arrow-right-icon::before { content: "\e50f"; } .ts-icon.is-hand-sparkles-icon::before { content: "\e05d"; } .ts-icon.is-rust-icon::before { font-family: "IconsBrands"; content: "\e07a"; } .ts-icon.is-austral-sign-icon::before { content: "\e0a9"; } .ts-icon.is-cheese-icon::before { content: "\f7ef"; } .ts-icon.is-map-icon::before { content: "\f279"; } .ts-icon.is-car-icon::before { content: "\f1b9"; } .ts-icon.is-google-pay-icon::before { font-family: "IconsBrands"; content: "\e079"; } .ts-icon.is-house-laptop-icon::before { content: "\e066"; } .ts-icon.is-phabricator-icon::before { font-family: "IconsBrands"; content: "\f3db"; } .ts-icon.is-arrows-up-down-icon::before { content: "\f07d"; } .ts-icon.is-eject-icon::before { content: "\f052"; } .ts-icon.is-figma-icon::before { font-family: "IconsBrands"; content: "\f799"; } .ts-icon.is-file-zipper-icon::before { content: "\f1c6"; } .ts-icon.is-person-shelter-icon::before { content: "\e54f"; } .ts-icon.is-teamspeak-icon::before { font-family: "IconsBrands"; content: "\f4f9"; } .ts-icon.is-user-clock-icon::before { content: "\f4fd"; } .ts-icon.is-4-icon::before { content: "\34"; } .ts-icon.is-face-kiss-wink-heart-icon::before { content: "\f598"; } .ts-icon.is-paw-icon::before { content: "\f1b0"; } .ts-icon.is-angles-down-icon::before { content: "\f103"; } .ts-icon.is-css3-alt-icon::before { font-family: "IconsBrands"; content: "\f38b"; } .ts-icon.is-circle-stop-icon::before { content: "\f28d"; } .ts-icon.is-spoon-icon::before { content: "\f2e5"; } .ts-icon.is-table-columns-icon::before { content: "\f0db"; } .ts-icon.is-circle-info-icon::before { content: "\f05a"; } .ts-icon.is-mobile-icon::before { content: "\f3ce"; } .ts-icon.is-page4-icon::before { font-family: "IconsBrands"; content: "\f3d7"; } .ts-icon.is-champagne-glasses-icon::before { content: "\f79f"; } .ts-icon.is-signal-icon::before { content: "\f012"; } .ts-icon.is-pen-icon::before { content: "\f304"; } .ts-icon.is-staff-snake-icon::before { content: "\e579"; } .ts-icon.is-teeth-open-icon::before { content: "\f62f"; } .ts-icon.is-droplet-slash-icon::before { content: "\f5c7"; } .ts-icon.is-truck-monster-icon::before { content: "\f63b"; } .ts-icon.is-user-icon::before { content: "\f007"; } .ts-icon.is-face-sad-tear-icon::before { content: "\f5b4"; } .ts-icon.is-mizuni-icon::before { font-family: "IconsBrands"; content: "\f3cc"; } .ts-icon.is-lines-leaning-icon::before { content: "\e51e"; } .ts-icon.is-arrows-turn-right-icon::before { content: "\e4c0"; } .ts-icon.is-face-meh-icon::before { content: "\f11a"; } .ts-icon.is-person-dots-from-line-icon::before { content: "\f470"; } .ts-icon.is-uniregistry-icon::before { font-family: "IconsBrands"; content: "\f404"; } .ts-icon.is-7-icon::before { content: "\37"; } .ts-icon.is-hands-holding-icon::before { content: "\f4c2"; } .ts-icon.is-poop-icon::before { content: "\f619"; } .ts-icon.is-uncharted-icon::before { font-family: "IconsBrands"; content: "\e084"; } .ts-icon.is-yahoo-icon::before { font-family: "IconsBrands"; content: "\f19e"; } .ts-icon.is-gem-icon::before { content: "\f3a5"; } .ts-icon.is-itunes-icon::before { font-family: "IconsBrands"; content: "\f3b4"; } .ts-icon.is-linux-icon::before { font-family: "IconsBrands"; content: "\f17c"; } .ts-icon.is-percent-icon::before { content: "\25"; } .ts-icon.is-twitter-icon::before { font-family: "IconsBrands"; content: "\f099"; } .ts-icon.is-hat-wizard-icon::before { content: "\f6e8"; } .ts-icon.is-hand-holding-medical-icon::before { content: "\e05c"; } .ts-icon.is-joomla-icon::before { font-family: "IconsBrands"; content: "\f1aa"; } .ts-icon.is-bomb-icon::before { content: "\f1e2"; } .ts-icon.is-circle-check-icon::before { content: "\f058"; } .ts-icon.is-cube-icon::before { content: "\f1b2"; } .ts-icon.is-hooli-icon::before { font-family: "IconsBrands"; content: "\f427"; } .ts-icon.is-box-icon::before { content: "\f466"; } .ts-icon.is-mars-and-venus-burst-icon::before { content: "\e523"; } .ts-icon.is-mobile-screen-icon::before { content: "\f3cf"; } .ts-icon.is-object-group-icon::before { content: "\f247"; } .ts-icon.is-object-ungroup-icon::before { content: "\f248"; } .ts-icon.is-rebel-icon::before { font-family: "IconsBrands"; content: "\f1d0"; } .ts-icon.is-twitch-icon::before { font-family: "IconsBrands"; content: "\f1e8"; } .ts-icon.is-cedi-sign-icon::before { content: "\e0df"; } .ts-icon.is-digg-icon::before { font-family: "IconsBrands"; content: "\f1a6"; } .ts-icon.is-face-flushed-icon::before { content: "\f579"; } .ts-icon.is-firefox-browser-icon::before { font-family: "IconsBrands"; content: "\e007"; } .ts-icon.is-martini-glass-citrus-icon::before { content: "\f561"; } .ts-icon.is-bridge-icon::before { content: "\e4c8"; } .ts-icon.is-mosque-icon::before { content: "\f678"; } .ts-icon.is-bots-icon::before { font-family: "IconsBrands"; content: "\e340"; } .ts-icon.is-dashcube-icon::before { font-family: "IconsBrands"; content: "\f210"; } .ts-icon.is-droplet-icon::before { content: "\f043"; } .ts-icon.is-holly-berry-icon::before { content: "\f7aa"; } .ts-icon.is-bed-pulse-icon::before { content: "\f487"; } .ts-icon.is-chevron-up-icon::before { content: "\f077"; } .ts-icon.is-envelope-icon::before { content: "\f0e0"; } .ts-icon.is-hotel-icon::before { content: "\f594"; } .ts-icon.is-pencil-icon::before { content: "\f303"; } .ts-icon.is-right-from-bracket-icon::before { content: "\f2f5"; } .ts-icon.is-shield-icon::before { content: "\f132"; } .ts-icon.is-amazon-pay-icon::before { font-family: "IconsBrands"; content: "\f42c"; } .ts-icon.is-sketch-icon::before { font-family: "IconsBrands"; content: "\f7c6"; } .ts-icon.is-radiation-icon::before { content: "\f7b9"; } .ts-icon.is-person-praying-icon::before { content: "\f683"; } .ts-icon.is-sellcast-icon::before { font-family: "IconsBrands"; content: "\f2da"; } .ts-icon.is-temperature-empty-icon::before { content: "\f2cb"; } .ts-icon.is-umbrella-beach-icon::before { content: "\f5ca"; } .ts-icon.is-wheat-awn-circle-exclamation-icon::before { content: "\e598"; } .ts-icon.is-mailchimp-icon::before { font-family: "IconsBrands"; content: "\f59e"; } .ts-icon.is-football-icon::before { content: "\f44e"; } .ts-icon.is-image-portrait-icon::before { content: "\f3e0"; } .ts-icon.is-timeline-icon::before { content: "\e29c"; } .ts-icon.is-bicycle-icon::before { content: "\f206"; } .ts-icon.is-chess-board-icon::before { content: "\f43c"; } .ts-icon.is-linkedin-in-icon::before { font-family: "IconsBrands"; content: "\f0e1"; } .ts-icon.is-centos-icon::before { font-family: "IconsBrands"; content: "\f789"; } .ts-icon.is-circle-chevron-right-icon::before { content: "\f138"; } .ts-icon.is-computer-mouse-icon::before { content: "\f8cc"; } .ts-icon.is-arrow-up-icon::before { content: "\f062"; } .ts-icon.is-arrows-left-right-to-line-icon::before { content: "\e4ba"; } .ts-icon.is-chess-icon::before { content: "\f439"; } .ts-icon.is-people-roof-icon::before { content: "\e537"; } .ts-icon.is-alipay-icon::before { font-family: "IconsBrands"; content: "\f642"; } .ts-icon.is-face-kiss-icon::before { content: "\f596"; } .ts-icon.is-less-icon::before { font-family: "IconsBrands"; content: "\f41d"; } .ts-icon.is-person-biking-icon::before { content: "\f84a"; } .ts-icon.is-pizza-slice-icon::before { content: "\f818"; } .ts-icon.is-sellsy-icon::before { font-family: "IconsBrands"; content: "\f213"; } .ts-icon.is-sun-icon::before { content: "\f185"; } .ts-icon.is-yandex-icon::before { font-family: "IconsBrands"; content: "\f413"; } .ts-icon.is-dragon-icon::before { content: "\f6d5"; } .ts-icon.is-plane-circle-exclamation-icon::before { content: "\e556"; } .ts-icon.is-calendar-minus-icon::before { content: "\f272"; } .ts-icon.is-debian-icon::before { font-family: "IconsBrands"; content: "\e60b"; } .ts-icon.is-igloo-icon::before { content: "\f7ae"; } .ts-icon.is-scale-unbalanced-flip-icon::before { content: "\f516"; } .ts-icon.is-6-icon::before { content: "\36"; } .ts-icon.is-draw-polygon-icon::before { content: "\f5ee"; } .ts-icon.is-hand-holding-icon::before { content: "\f4bd"; } .ts-icon.is-id-badge-icon::before { content: "\f2c1"; } .ts-icon.is-volume-xmark-icon::before { content: "\f6a9"; } .ts-icon.is-building-shield-icon::before { content: "\e4d8"; } .ts-icon.is-display-icon::before { content: "\e163"; } .ts-icon.is-mars-and-venus-icon::before { content: "\f224"; } .ts-icon.is-tent-arrow-down-to-line-icon::before { content: "\e57e"; } .ts-icon.is-caret-right-icon::before { content: "\f0da"; } .ts-icon.is-dna-icon::before { content: "\f471"; } .ts-icon.is-tower-observation-icon::before { content: "\e586"; } .ts-icon.is-angle-left-icon::before { content: "\f104"; } .ts-icon.is-google-plus-icon::before { font-family: "IconsBrands"; content: "\f2b3"; } .ts-icon.is-stripe-s-icon::before { font-family: "IconsBrands"; content: "\f42a"; } .ts-icon.is-burst-icon::before { content: "\e4dc"; } .ts-icon.is-text-height-icon::before { content: "\f034"; } .ts-icon.is-uber-icon::before { font-family: "IconsBrands"; content: "\f402"; } .ts-icon.is-users-slash-icon::before { content: "\e073"; } .ts-icon.is-money-bills-icon::before { content: "\e1f3"; } .ts-icon.is-person-arrow-down-to-line-icon::before { content: "\e538"; } .ts-icon.is-sack-xmark-icon::before { content: "\e56a"; } .ts-icon.is-mountain-city-icon::before { content: "\e52e"; } .ts-icon.is-box-open-icon::before { content: "\f49e"; } .ts-icon.is-kickstarter-k-icon::before { font-family: "IconsBrands"; content: "\f3bc"; } .ts-icon.is-symfony-icon::before { font-family: "IconsBrands"; content: "\f83d"; } .ts-icon.is-arrow-down-1-9-icon::before { content: "\f162"; } .ts-icon.is-face-angry-icon::before { content: "\f556"; } .ts-icon.is-gitter-icon::before { font-family: "IconsBrands"; content: "\f426"; } .ts-icon.is-o-icon::before { content: "\4f"; } .ts-icon.is-dice-four-icon::before { content: "\f524"; } .ts-icon.is-id-card-icon::before { content: "\f2c2"; } .ts-icon.is-user-nurse-icon::before { content: "\f82f"; } .ts-icon.is-cloud-meatball-icon::before { content: "\f73b"; } .ts-icon.is-camera-retro-icon::before { content: "\f083"; } .ts-icon.is-gratipay-icon::before { font-family: "IconsBrands"; content: "\f184"; } .ts-icon.is-grip-lines-vertical-icon::before { content: "\f7a5"; } .ts-icon.is-audible-icon::before { font-family: "IconsBrands"; content: "\f373"; } .ts-icon.is-dyalog-icon::before { font-family: "IconsBrands"; content: "\f399"; } .ts-icon.is-hand-icon::before { content: "\f256"; } .ts-icon.is-mill-sign-icon::before { content: "\e1ed"; } .ts-icon.is-bridge-circle-xmark-icon::before { content: "\e4cb"; } .ts-icon.is-periscope-icon::before { font-family: "IconsBrands"; content: "\f3da"; } .ts-icon.is-person-circle-check-icon::before { content: "\e53e"; } .ts-icon.is-person-walking-dashed-line-arrow-right-icon::before { content: "\e553"; } .ts-icon.is-boxes-stacked-icon::before { content: "\f468"; } .ts-icon.is-house-tsunami-icon::before { content: "\e515"; } .ts-icon.is-python-icon::before { font-family: "IconsBrands"; content: "\f3e2"; } .ts-icon.is-cash-register-icon::before { content: "\f788"; } .ts-icon.is-hamsa-icon::before { content: "\f665"; } .ts-icon.is-house-chimney-window-icon::before { content: "\e00d"; } .ts-icon.is-node-js-icon::before { font-family: "IconsBrands"; content: "\f3d3"; } .ts-icon.is-person-chalkboard-icon::before { content: "\e53d"; } .ts-icon.is-vault-icon::before { content: "\e2c5"; } .ts-icon.is-forward-step-icon::before { content: "\f051"; } .ts-icon.is-typo3-icon::before { font-family: "IconsBrands"; content: "\f42b"; } .ts-icon.is-toilet-icon::before { content: "\f7d8"; } .ts-icon.is-candy-cane-icon::before { content: "\f786"; } .ts-icon.is-moon-icon::before { content: "\f186"; } .ts-icon.is-truck-medical-icon::before { content: "\f0f9"; } .ts-icon.is-blogger-b-icon::before { font-family: "IconsBrands"; content: "\f37d"; } .ts-icon.is-blender-icon::before { content: "\f517"; } .ts-icon.is-cpanel-icon::before { font-family: "IconsBrands"; content: "\f388"; } .ts-icon.is-martini-glass-icon::before { content: "\f57b"; } .ts-icon.is-virus-icon::before { content: "\e074"; } .ts-icon.is-arrows-to-dot-icon::before { content: "\e4be"; } .ts-icon.is-braille-icon::before { content: "\f2a1"; } .ts-icon.is-itch-io-icon::before { font-family: "IconsBrands"; content: "\f83a"; } .ts-icon.is-book-bookmark-icon::before { content: "\e0bb"; } .ts-icon.is-tower-broadcast-icon::before { content: "\f519"; } .ts-icon.is-truck-ramp-box-icon::before { content: "\f4de"; } .ts-icon.is-archway-icon::before { content: "\f557"; } .ts-icon.is-wheelchair-move-icon::before { content: "\e2ce"; } .ts-icon.is-ello-icon::before { font-family: "IconsBrands"; content: "\f5f1"; } .ts-icon.is-creative-commons-nc-jp-icon::before { font-family: "IconsBrands"; content: "\f4ea"; } .ts-icon.is-dumpster-fire-icon::before { content: "\f794"; } .ts-icon.is-cotton-bureau-icon::before { font-family: "IconsBrands"; content: "\f89e"; } .ts-icon.is-ioxhost-icon::before { font-family: "IconsBrands"; content: "\f208"; } .ts-icon.is-lock-open-icon::before { content: "\f3c1"; } .ts-icon.is-magnifying-glass-arrow-right-icon::before { content: "\e521"; } .ts-icon.is-truck-fast-icon::before { content: "\f48b"; } .ts-icon.is-gun-icon::before { content: "\e19b"; } .ts-icon.is-cake-candles-icon::before { content: "\f1fd"; } .ts-icon.is-cubes-stacked-icon::before { content: "\e4e6"; } .ts-icon.is-gears-icon::before { content: "\f085"; } .ts-icon.is-lari-sign-icon::before { content: "\e1c8"; } .ts-icon.is-themeco-icon::before { font-family: "IconsBrands"; content: "\f5c6"; } .ts-icon.is-bootstrap-icon::before { font-family: "IconsBrands"; content: "\f836"; } .ts-icon.is-tag-icon::before { content: "\f02b"; } .ts-icon.is-folder-open-icon::before { content: "\f07c"; } .ts-icon.is-infinity-icon::before { content: "\f534"; } .ts-icon.is-pix-icon::before { font-family: "IconsBrands"; content: "\e43a"; } .ts-icon.is-square-x-twitter-icon::before { font-family: "IconsBrands"; content: "\e61a"; } .ts-icon.is-grip-lines-icon::before { content: "\f7a4"; } .ts-icon.is-ring-icon::before { content: "\f70b"; } .ts-icon.is-square-check-icon::before { content: "\f14a"; } .ts-icon.is-arrow-right-from-bracket-icon::before { content: "\f08b"; } .ts-icon.is-lastfm-icon::before { font-family: "IconsBrands"; content: "\f202"; } .ts-icon.is-plate-wheat-icon::before { content: "\e55a"; } .ts-icon.is-up-long-icon::before { content: "\f30c"; } .ts-icon.is-building-circle-arrow-right-icon::before { content: "\e4d1"; } .ts-icon.is-fill-drip-icon::before { content: "\f576"; } .ts-icon.is-keyboard-icon::before { content: "\f11c"; } .ts-icon.is-laptop-file-icon::before { content: "\e51d"; } .ts-icon.is-microchip-icon::before { content: "\f2db"; } .ts-icon.is-temperature-arrow-down-icon::before { content: "\e03f"; } .ts-icon.is-umbraco-icon::before { font-family: "IconsBrands"; content: "\f8e8"; } .ts-icon.is-face-sad-cry-icon::before { content: "\f5b3"; } .ts-icon.is-face-grin-beam-sweat-icon::before { content: "\f583"; } .ts-icon.is-helmet-un-icon::before { content: "\e503"; } .ts-icon.is-shoe-prints-icon::before { content: "\f54b"; } .ts-icon.is-turn-down-icon::before { content: "\f3be"; } .ts-icon.is-viadeo-icon::before { font-family: "IconsBrands"; content: "\f2a9"; } .ts-icon.is-cloud-arrow-down-icon::before { content: "\f0ed"; } .ts-icon.is-explosion-icon::before { content: "\e4e9"; } .ts-icon.is-horse-icon::before { content: "\f6f0"; } .ts-icon.is-person-running-icon::before { content: "\f70c"; } .ts-icon.is-pills-icon::before { content: "\f484"; } .ts-icon.is-star-half-icon::before { content: "\f089"; } .ts-icon.is-vimeo-v-icon::before { font-family: "IconsBrands"; content: "\f27d"; } .ts-icon.is-1-icon::before { content: "\31"; } .ts-icon.is-arrow-up-short-wide-icon::before { content: "\f885"; } .ts-icon.is-ban-icon::before { content: "\f05e"; } .ts-icon.is-circle-icon::before { content: "\f111"; } .ts-icon.is-comment-dollar-icon::before { content: "\f651"; } .ts-icon.is-glass-water-droplet-icon::before { content: "\e4f5"; } .ts-icon.is-hand-holding-hand-icon::before { content: "\e4f7"; } .ts-icon.is-hryvnia-sign-icon::before { content: "\f6f2"; } .ts-icon.is-arrow-left-icon::before { content: "\f060"; } .ts-icon.is-mixer-icon::before { font-family: "IconsBrands"; content: "\e056"; } .ts-icon.is-sort-icon::before { content: "\f0dc"; } .ts-icon.is-vaadin-icon::before { font-family: "IconsBrands"; content: "\f408"; } .ts-icon.is-kit-medical-icon::before { content: "\f479"; } .ts-icon.is-creative-commons-share-icon::before { font-family: "IconsBrands"; content: "\f4f2"; } .ts-icon.is-divide-icon::before { content: "\f529"; } .ts-icon.is-first-order-icon::before { font-family: "IconsBrands"; content: "\f2b0"; } .ts-icon.is-heart-circle-check-icon::before { content: "\e4fd"; } .ts-icon.is-audio-description-icon::before { content: "\f29e"; } .ts-icon.is-circle-arrow-up-icon::before { content: "\f0aa"; } .ts-icon.is-ethernet-icon::before { content: "\f796"; } .ts-icon.is-hive-icon::before { font-family: "IconsBrands"; content: "\e07f"; } .ts-icon.is-laptop-code-icon::before { content: "\f5fc"; } .ts-icon.is-lyft-icon::before { font-family: "IconsBrands"; content: "\f3c3"; } .ts-icon.is-person-icon::before { content: "\f183"; } .ts-icon.is-suitcase-medical-icon::before { content: "\f0fa"; } .ts-icon.is-cable-car-icon::before { content: "\f7da"; } .ts-icon.is-laptop-medical-icon::before { content: "\f812"; } .ts-icon.is-pushed-icon::before { font-family: "IconsBrands"; content: "\f3e1"; } .ts-icon.is-discourse-icon::before { font-family: "IconsBrands"; content: "\f393"; } .ts-icon.is-sign-hanging-icon::before { content: "\f4d9"; } .ts-icon.is-square-hacker-news-icon::before { font-family: "IconsBrands"; content: "\f3af"; } .ts-icon.is-prescription-bottle-icon::before { content: "\f485"; } .ts-icon.is-list-icon::before { content: "\f03a"; } .ts-icon.is-stamp-icon::before { content: "\f5bf"; } .ts-icon.is-hand-scissors-icon::before { content: "\f257"; } .ts-icon.is-grip-icon::before { content: "\f58d"; } .ts-icon.is-scale-unbalanced-icon::before { content: "\f515"; } .ts-icon.is-gofore-icon::before { font-family: "IconsBrands"; content: "\f3a7"; } .ts-icon.is-graduation-cap-icon::before { content: "\f19d"; } .ts-icon.is-korvue-icon::before { font-family: "IconsBrands"; content: "\f42f"; } .ts-icon.is-map-location-icon::before { content: "\f59f"; } .ts-icon.is-ruler-vertical-icon::before { content: "\f548"; } .ts-icon.is-computer-icon::before { content: "\e4e5"; } .ts-icon.is-neos-icon::before { font-family: "IconsBrands"; content: "\f612"; } .ts-icon.is-square-phone-flip-icon::before { content: "\f87b"; } .ts-icon.is-baseball-bat-ball-icon::before { content: "\f432"; } .ts-icon.is-dungeon-icon::before { content: "\f6d9"; } .ts-icon.is-envira-icon::before { font-family: "IconsBrands"; content: "\f299"; } .ts-icon.is-google-wallet-icon::before { font-family: "IconsBrands"; content: "\f1ee"; } .ts-icon.is-greater-than-icon::before { content: "\3e"; } .ts-icon.is-hourglass-icon::before { content: "\f254"; } .ts-icon.is-ravelry-icon::before { font-family: "IconsBrands"; content: "\f2d9"; } .ts-icon.is-superpowers-icon::before { font-family: "IconsBrands"; content: "\f2dd"; } .ts-icon.is-accusoft-icon::before { font-family: "IconsBrands"; content: "\f369"; } .ts-icon.is-think-peaks-icon::before { font-family: "IconsBrands"; content: "\f731"; } .ts-icon.is-city-icon::before { content: "\f64f"; } .ts-icon.is-plane-arrival-icon::before { content: "\f5af"; } .ts-icon.is-arrow-up-z-a-icon::before { content: "\f882"; } .ts-icon.is-signs-post-icon::before { content: "\f277"; } .ts-icon.is-sitrox-icon::before { font-family: "IconsBrands"; content: "\e44a"; } .ts-icon.is-book-tanakh-icon::before { content: "\f827"; } .ts-icon.is-jug-detergent-icon::before { content: "\e519"; } .ts-icon.is-modx-icon::before { font-family: "IconsBrands"; content: "\f285"; } .ts-icon.is-people-line-icon::before { content: "\e534"; } .ts-icon.is-rectangle-ad-icon::before { content: "\f641"; } .ts-icon.is-shuttle-space-icon::before { content: "\f197"; } .ts-icon.is-envelope-open-text-icon::before { content: "\f658"; } .ts-icon.is-snapchat-icon::before { font-family: "IconsBrands"; content: "\f2ab"; } .ts-icon.is-code-icon::before { content: "\f121"; } .ts-icon.is-wordpress-simple-icon::before { font-family: "IconsBrands"; content: "\f411"; } .ts-icon.is-earth-africa-icon::before { content: "\f57c"; } .ts-icon.is-dog-icon::before { content: "\f6d3"; } .ts-icon.is-hat-cowboy-icon::before { content: "\f8c0"; } .ts-icon.is-house-medical-circle-xmark-icon::before { content: "\e513"; } .ts-icon.is-staylinked-icon::before { font-family: "IconsBrands"; content: "\f3f5"; } .ts-icon.is-bell-concierge-icon::before { content: "\f562"; } .ts-icon.is-heart-circle-xmark-icon::before { content: "\e501"; } .ts-icon.is-replyd-icon::before { font-family: "IconsBrands"; content: "\f3e6"; } .ts-icon.is-f-icon::before { content: "\46"; } .ts-icon.is-faucet-icon::before { content: "\e005"; } .ts-icon.is-film-icon::before { content: "\f008"; } .ts-icon.is-house-chimney-medical-icon::before { content: "\f7f2"; } .ts-icon.is-lungs-icon::before { content: "\f604"; } .ts-icon.is-shop-icon::before { content: "\f54f"; } .ts-icon.is-trello-icon::before { font-family: "IconsBrands"; content: "\f181"; } .ts-icon.is-blackberry-icon::before { font-family: "IconsBrands"; content: "\f37b"; } .ts-icon.is-tencent-weibo-icon::before { font-family: "IconsBrands"; content: "\f1d5"; } .ts-icon.is-battery-empty-icon::before { content: "\f244"; } .ts-icon.is-greater-than-equal-icon::before { content: "\f532"; } .ts-icon.is-square-nfi-icon::before { content: "\e576"; } .ts-icon.is-user-injured-icon::before { content: "\f728"; } .ts-icon.is-arrow-down-z-a-icon::before { content: "\f881"; } .ts-icon.is-microphone-slash-icon::before { content: "\f131"; } .ts-icon.is-lira-sign-icon::before { content: "\f195"; } .ts-icon.is-person-circle-minus-icon::before { content: "\e540"; } .ts-icon.is-person-dress-icon::before { content: "\f182"; } .ts-icon.is-plug-circle-exclamation-icon::before { content: "\e55d"; } .ts-icon.is-trowel-icon::before { content: "\e589"; } .ts-icon.is-user-check-icon::before { content: "\f4fc"; } .ts-icon.is-left-long-icon::before { content: "\f30a"; } .ts-icon.is-virus-covid-icon::before { content: "\e4a8"; } .ts-icon.is-xmarks-lines-icon::before { content: "\e59a"; } .ts-icon.is-recycle-icon::before { content: "\f1b8"; } .ts-icon.is-face-grin-tongue-wink-icon::before { content: "\f58b"; } .ts-icon.is-keybase-icon::before { font-family: "IconsBrands"; content: "\f4f5"; } .ts-icon.is-landmark-flag-icon::before { content: "\e51c"; } .ts-icon.is-square-caret-right-icon::before { content: "\f152"; } .ts-icon.is-chevron-left-icon::before { content: "\f053"; } .ts-icon.is-user-large-icon::before { content: "\f406"; } .ts-icon.is-d-and-d-icon::before { font-family: "IconsBrands"; content: "\f38d"; } .ts-icon.is-person-harassing-icon::before { content: "\e549"; } .ts-icon.is-themeisle-icon::before { font-family: "IconsBrands"; content: "\f2b2"; } .ts-icon.is-flag-usa-icon::before { content: "\f74d"; } .ts-icon.is-aviato-icon::before { font-family: "IconsBrands"; content: "\f421"; } .ts-icon.is-user-doctor-icon::before { content: "\f0f0"; } .ts-icon.is-user-tie-icon::before { content: "\f508"; } .ts-icon.is-arrow-trend-down-icon::before { content: "\e097"; } .ts-icon.is-plane-departure-icon::before { content: "\f5b0"; } .ts-icon.is-receipt-icon::before { content: "\f543"; } .ts-icon.is-road-circle-check-icon::before { content: "\e564"; } .ts-icon.is-triangle-exclamation-icon::before { content: "\f071"; } .ts-icon.is-vials-icon::before { content: "\f493"; } .ts-icon.is-border-top-left-icon::before { content: "\f853"; } .ts-icon.is-mortar-pestle-icon::before { content: "\f5a7"; } .ts-icon.is-foursquare-icon::before { font-family: "IconsBrands"; content: "\f180"; } .ts-icon.is-users-line-icon::before { content: "\e592"; } .ts-icon.is-l-icon::before { content: "\4c"; } .ts-icon.is-newspaper-icon::before { content: "\f1ea"; } .ts-icon.is-place-of-worship-icon::before { content: "\f67f"; } .ts-icon.is-fire-extinguisher-icon::before { content: "\f134"; } .ts-icon.is-hire-a-helper-icon::before { font-family: "IconsBrands"; content: "\f3b0"; } .ts-icon.is-otter-icon::before { content: "\f700"; } .ts-icon.is-align-left-icon::before { content: "\f036"; } .ts-icon.is-exclamation-icon::before { content: "\21"; } .ts-icon.is-unsplash-icon::before { font-family: "IconsBrands"; content: "\e07c"; } .ts-icon.is-bacterium-icon::before { content: "\e05a"; } .ts-icon.is-dochub-icon::before { font-family: "IconsBrands"; content: "\f394"; } .ts-icon.is-bookmark-icon::before { content: "\f02e"; } .ts-icon.is-forumbee-icon::before { font-family: "IconsBrands"; content: "\f211"; } .ts-icon.is-tarp-icon::before { content: "\e57b"; } .ts-icon.is-dribbble-icon::before { font-family: "IconsBrands"; content: "\f17d"; } .ts-icon.is-puzzle-piece-icon::before { content: "\f12e"; } .ts-icon.is-red-river-icon::before { font-family: "IconsBrands"; content: "\f3e3"; } .ts-icon.is-republican-icon::before { content: "\f75e"; } .ts-icon.is-thermometer-icon::before { content: "\f491"; } .ts-icon.is-user-large-slash-icon::before { content: "\f4fa"; } .ts-icon.is-equals-icon::before { content: "\3d"; } .ts-icon.is-medium-icon::before { font-family: "IconsBrands"; content: "\f23a"; } .ts-icon.is-screenpal-icon::before { font-family: "IconsBrands"; content: "\e570"; } .ts-icon.is-face-dizzy-icon::before { content: "\f567"; } .ts-icon.is-socks-icon::before { content: "\f696"; } .ts-icon.is-thumbs-down-icon::before { content: "\f165"; } .ts-icon.is-book-skull-icon::before { content: "\f6b7"; } .ts-icon.is-music-icon::before { content: "\f001"; } .ts-icon.is-person-burst-icon::before { content: "\e53b"; } .ts-icon.is-pump-soap-icon::before { content: "\e06b"; } .ts-icon.is-handshake-simple-icon::before { content: "\f4c6"; } .ts-icon.is-gopuram-icon::before { content: "\f664"; } .ts-icon.is-money-bill-icon::before { content: "\f0d6"; } .ts-icon.is-rss-icon::before { content: "\f09e"; } .ts-icon.is-clover-icon::before { content: "\e139"; } .ts-icon.is-bitbucket-icon::before { font-family: "IconsBrands"; content: "\f171"; } .ts-icon.is-chevron-right-icon::before { content: "\f054"; } .ts-icon.is-file-video-icon::before { content: "\f1c8"; } .ts-icon.is-virus-slash-icon::before { content: "\e075"; } .ts-icon.is-arrows-to-eye-icon::before { content: "\e4bf"; } .ts-icon.is-speaker-deck-icon::before { font-family: "IconsBrands"; content: "\f83c"; } .ts-icon.is-mound-icon::before { content: "\e52d"; } .ts-icon.is-mars-stroke-right-icon::before { content: "\f22b"; } .ts-icon.is-mattress-pillow-icon::before { content: "\e525"; } .ts-icon.is-square-gitlab-icon::before { font-family: "IconsBrands"; content: "\e5ae"; } .ts-icon.is-carrot-icon::before { content: "\f787"; } .ts-icon.is-box-archive-icon::before { content: "\f187"; } .ts-icon.is-bus-simple-icon::before { content: "\f55e"; } .ts-icon.is-deezer-icon::before { font-family: "IconsBrands"; content: "\e077"; } .ts-icon.is-docker-icon::before { font-family: "IconsBrands"; content: "\f395"; } .ts-icon.is-github-icon::before { font-family: "IconsBrands"; content: "\f09b"; } .ts-icon.is-vial-circle-check-icon::before { content: "\e596"; } .ts-icon.is-bath-icon::before { content: "\f2cd"; } .ts-icon.is-dharmachakra-icon::before { content: "\f655"; } .ts-icon.is-car-on-icon::before { content: "\e4dd"; } .ts-icon.is-compress-icon::before { content: "\f066"; } .ts-icon.is-question-icon::before { content: "\3f"; } .ts-icon.is-square-steam-icon::before { font-family: "IconsBrands"; content: "\f1b7"; } .ts-icon.is-arrow-left-long-icon::before { content: "\f177"; } .ts-icon.is-rotate-left-icon::before { content: "\f2ea"; } .ts-icon.is-file-pdf-icon::before { content: "\f1c1"; } .ts-icon.is-square-dribbble-icon::before { font-family: "IconsBrands"; content: "\f397"; } .ts-icon.is-tree-city-icon::before { content: "\e587"; } .ts-icon.is-filter-circle-xmark-icon::before { content: "\e17b"; } .ts-icon.is-glide-icon::before { font-family: "IconsBrands"; content: "\f2a5"; } .ts-icon.is-renren-icon::before { font-family: "IconsBrands"; content: "\f18b"; } .ts-icon.is-circle-question-icon::before { content: "\f059"; } .ts-icon.is-briefcase-medical-icon::before { content: "\f469"; } .ts-icon.is-confluence-icon::before { font-family: "IconsBrands"; content: "\f78d"; } .ts-icon.is-eye-low-vision-icon::before { content: "\f2a8"; } .ts-icon.is-atlassian-icon::before { font-family: "IconsBrands"; content: "\f77b"; } .ts-icon.is-space-awesome-icon::before { font-family: "IconsBrands"; content: "\e5ac"; } .ts-icon.is-file-arrow-down-icon::before { content: "\f56d"; } .ts-icon.is-face-laugh-wink-icon::before { content: "\f59c"; } .ts-icon.is-hips-icon::before { font-family: "IconsBrands"; content: "\f452"; } .ts-icon.is-house-medical-circle-check-icon::before { content: "\e511"; } .ts-icon.is-user-secret-icon::before { content: "\f21b"; } .ts-icon.is-child-reaching-icon::before { content: "\e59d"; } .ts-icon.is-square-phone-icon::before { content: "\f098"; } .ts-icon.is-tags-icon::before { content: "\f02c"; } .ts-icon.is-tower-cell-icon::before { content: "\e585"; } .ts-icon.is-won-sign-icon::before { content: "\f159"; } .ts-icon.is-wpressr-icon::before { font-family: "IconsBrands"; content: "\f3e4"; } .ts-icon.is-cloud-arrow-up-icon::before { content: "\f0ee"; } .ts-icon.is-face-smile-wink-icon::before { content: "\f4da"; } .ts-icon.is-inbox-icon::before { content: "\f01c"; } .ts-icon.is-cart-flatbed-suitcase-icon::before { content: "\f59d"; } .ts-icon.is-yelp-icon::before { font-family: "IconsBrands"; content: "\f1e9"; } .ts-icon.is-soundcloud-icon::before { font-family: "IconsBrands"; content: "\f1be"; } .ts-icon.is-manat-sign-icon::before { content: "\e1d5"; } .ts-icon.is-plane-up-icon::before { content: "\e22d"; } .ts-icon.is-fedora-icon::before { font-family: "IconsBrands"; content: "\f798"; } .ts-icon.is-wind-icon::before { content: "\f72e"; } .ts-icon.is-medal-icon::before { content: "\f5a2"; } .ts-icon.is-old-republic-icon::before { font-family: "IconsBrands"; content: "\f510"; } .ts-icon.is-pinterest-icon::before { font-family: "IconsBrands"; content: "\f0d2"; } .ts-icon.is-shuffle-icon::before { content: "\f074"; } .ts-icon.is-calendar-xmark-icon::before { content: "\f273"; } .ts-icon.is-mars-double-icon::before { content: "\f227"; } .ts-icon.is-gulp-icon::before { font-family: "IconsBrands"; content: "\f3ae"; } .ts-icon.is-clapperboard-icon::before { content: "\e131"; } .ts-icon.is-shield-dog-icon::before { content: "\e573"; } .ts-icon.is-black-tie-icon::before { font-family: "IconsBrands"; content: "\f27e"; } .ts-icon.is-meteor-icon::before { content: "\f753"; } .ts-icon.is-pen-fancy-icon::before { content: "\f5ac"; } .ts-icon.is-quinscape-icon::before { font-family: "IconsBrands"; content: "\f459"; } .ts-icon.is-stackpath-icon::before { font-family: "IconsBrands"; content: "\f842"; } .ts-icon.is-kaggle-icon::before { font-family: "IconsBrands"; content: "\f5fa"; } .ts-icon.is-cloud-moon-icon::before { content: "\f6c3"; } .ts-icon.is-safari-icon::before { font-family: "IconsBrands"; content: "\f267"; } .ts-icon.is-chalkboard-user-icon::before { content: "\f51c"; } .ts-icon.is-leanpub-icon::before { font-family: "IconsBrands"; content: "\f212"; } .ts-icon.is-dice-two-icon::before { content: "\f528"; } .ts-icon.is-people-carry-box-icon::before { content: "\f4ce"; } .ts-icon.is-table-cells-large-icon::before { content: "\f009"; } .ts-icon.is-upload-icon::before { content: "\f093"; } .ts-icon.is-check-to-slot-icon::before { content: "\f772"; } .ts-icon.is-readme-icon::before { font-family: "IconsBrands"; content: "\f4d5"; } .ts-icon.is-handshake-simple-slash-icon::before { content: "\e05f"; } .ts-icon.is-credit-card-icon::before { content: "\f09d"; } .ts-icon.is-hat-cowboy-side-icon::before { content: "\f8c1"; } .ts-icon.is-location-dot-icon::before { content: "\f3c5"; } .ts-icon.is-person-booth-icon::before { content: "\f756"; } .ts-icon.is-wand-magic-sparkles-icon::before { content: "\e2ca"; } .ts-icon.is-book-icon::before { content: "\f02d"; } .ts-icon.is-volume-low-icon::before { content: "\f027"; } .ts-icon.is-venus-double-icon::before { content: "\f226"; } .ts-icon.is-dice-d20-icon::before { content: "\f6cf"; } .ts-icon.is-eye-slash-icon::before { content: "\f070"; } .ts-icon.is-file-image-icon::before { content: "\f1c5"; } .ts-icon.is-house-medical-flag-icon::before { content: "\e514"; } .ts-icon.is-battery-full-icon::before { content: "\f240"; } .ts-icon.is-bitcoin-icon::before { font-family: "IconsBrands"; content: "\f379"; } .ts-icon.is-ember-icon::before { font-family: "IconsBrands"; content: "\f423"; } .ts-icon.is-openid-icon::before { font-family: "IconsBrands"; content: "\f19b"; } .ts-icon.is-person-rifle-icon::before { content: "\e54e"; } .ts-icon.is-window-restore-icon::before { content: "\f2d2"; } .ts-icon.is-angle-up-icon::before { content: "\f106"; } .ts-icon.is-futbol-icon::before { content: "\f1e3"; } .ts-icon.is-menorah-icon::before { content: "\f676"; } .ts-icon.is-server-icon::before { content: "\f233"; } .ts-icon.is-vest-patches-icon::before { content: "\e086"; } .ts-icon.is-angrycreative-icon::before { font-family: "IconsBrands"; content: "\f36e"; } .ts-icon.is-paper-plane-icon::before { content: "\f1d8"; } .ts-icon.is-paperclip-icon::before { content: "\f0c6"; } .ts-icon.is-file-import-icon::before { content: "\f56f"; } .ts-icon.is-galactic-senate-icon::before { font-family: "IconsBrands"; content: "\f50d"; } .ts-icon.is-shrimp-icon::before { content: "\e448"; } .ts-icon.is-wine-glass-icon::before { content: "\f4e3"; } .ts-icon.is-drum-icon::before { content: "\f569"; } .ts-icon.is-magnifying-glass-plus-icon::before { content: "\f00e"; } .ts-icon.is-cloudflare-icon::before { font-family: "IconsBrands"; content: "\e07d"; } .ts-icon.is-child-dress-icon::before { content: "\e59c"; } .ts-icon.is-hand-dots-icon::before { content: "\f461"; } .ts-icon.is-slideshare-icon::before { font-family: "IconsBrands"; content: "\f1e7"; } .ts-icon.is-sterling-sign-icon::before { content: "\f154"; } .ts-icon.is-airbnb-icon::before { font-family: "IconsBrands"; content: "\f834"; } .ts-icon.is-face-grimace-icon::before { content: "\f57f"; } .ts-icon.is-floppy-disk-icon::before { content: "\f0c7"; } .ts-icon.is-scroll-icon::before { content: "\f70e"; } .ts-icon.is-vine-icon::before { font-family: "IconsBrands"; content: "\f1ca"; } .ts-icon.is-circle-play-icon::before { content: "\f144"; } .ts-icon.is-angles-left-icon::before { content: "\f100"; } .ts-icon.is-fantasy-flight-games-icon::before { font-family: "IconsBrands"; content: "\f6dc"; } .ts-icon.is-tent-arrow-turn-left-icon::before { content: "\e580"; } .ts-icon.is-a-icon::before { content: "\41"; } .ts-icon.is-litecoin-sign-icon::before { content: "\e1d3"; } .ts-icon.is-lungs-virus-icon::before { content: "\e067"; } .ts-icon.is-piggy-bank-icon::before { content: "\f4d3"; } .ts-icon.is-stubber-icon::before { font-family: "IconsBrands"; content: "\e5c7"; } .ts-icon.is-face-frown-open-icon::before { content: "\f57a"; } .ts-icon.is-code-fork-icon::before { content: "\e13b"; } .ts-icon.is-cow-icon::before { content: "\f6c8"; } .ts-icon.is-html5-icon::before { font-family: "IconsBrands"; content: "\f13b"; } .ts-icon.is-mitten-icon::before { content: "\f7b5"; } .ts-icon.is-panorama-icon::before { content: "\e209"; } .ts-icon.is-signature-icon::before { content: "\f5b7"; } .ts-icon.is-square-caret-up-icon::before { content: "\f151"; } .ts-icon.is-bacteria-icon::before { content: "\e059"; } .ts-icon.is-t-icon::before { content: "\54"; } .ts-icon.is-circle-xmark-icon::before { content: "\f057"; } .ts-icon.is-fax-icon::before { content: "\f1ac"; } .ts-icon.is-line-icon::before { font-family: "IconsBrands"; content: "\f3c0"; } .ts-icon.is-magnet-icon::before { content: "\f076"; } .ts-icon.is-product-hunt-icon::before { font-family: "IconsBrands"; content: "\f288"; } .ts-icon.is-chess-queen-icon::before { content: "\f445"; } .ts-icon.is-glasses-icon::before { content: "\f530"; } .ts-icon.is-jet-fighter-up-icon::before { content: "\e518"; } .ts-icon.is-peace-icon::before { content: "\f67c"; } .ts-icon.is-square-person-confined-icon::before { content: "\e577"; } .ts-icon.is-telegram-icon::before { font-family: "IconsBrands"; content: "\f2c6"; } .ts-icon.is-tree-icon::before { content: "\f1bb"; } .ts-icon.is-file-invoice-icon::before { content: "\f570"; } .ts-icon.is-passport-icon::before { content: "\f5ab"; } .ts-icon.is-square-behance-icon::before { font-family: "IconsBrands"; content: "\f1b5"; } .ts-icon.is-tty-icon::before { content: "\f1e4"; } .ts-icon.is-keycdn-icon::before { font-family: "IconsBrands"; content: "\f3ba"; } .ts-icon.is-canadian-maple-leaf-icon::before { font-family: "IconsBrands"; content: "\f785"; } .ts-icon.is-face-grin-tongue-squint-icon::before { content: "\f58a"; } .ts-icon.is-mercury-icon::before { content: "\f223"; } .ts-icon.is-user-tag-icon::before { content: "\f507"; } .ts-icon.is-affiliatetheme-icon::before { font-family: "IconsBrands"; content: "\f36b"; } .ts-icon.is-pallet-icon::before { content: "\f482"; } .ts-icon.is-rug-icon::before { content: "\e569"; } .ts-icon.is-etsy-icon::before { font-family: "IconsBrands"; content: "\f2d7"; } .ts-icon.is-egg-icon::before { content: "\f7fb"; } .ts-icon.is-hands-icon::before { content: "\f2a7"; } .ts-icon.is-user-xmark-icon::before { content: "\f235"; } .ts-icon.is-yen-sign-icon::before { content: "\f157"; } .ts-icon.is-d-icon::before { content: "\44"; } .ts-icon.is-wikipedia-w-icon::before { font-family: "IconsBrands"; content: "\f266"; } .ts-icon.is-cc-visa-icon::before { font-family: "IconsBrands"; content: "\f1f0"; } .ts-icon.is-clock-icon::before { content: "\f017"; } .ts-icon.is-d-and-d-beyond-icon::before { font-family: "IconsBrands"; content: "\f6ca"; } .ts-icon.is-file-invoice-dollar-icon::before { content: "\f571"; } .ts-icon.is-radio-icon::before { content: "\f8d7"; } .ts-icon.is-registered-icon::before { content: "\f25d"; } .ts-icon.is-autoprefixer-icon::before { font-family: "IconsBrands"; content: "\f41c"; } .ts-icon.is-mug-hot-icon::before { content: "\f7b6"; } .ts-icon.is-internet-explorer-icon::before { font-family: "IconsBrands"; content: "\f26b"; } .ts-icon.is-file-circle-xmark-icon::before { content: "\e5a1"; } .ts-icon.is-ribbon-icon::before { content: "\f4d6"; } .ts-icon.is-square-facebook-icon::before { font-family: "IconsBrands"; content: "\f082"; } .ts-icon.is-stack-exchange-icon::before { font-family: "IconsBrands"; content: "\f18d"; } .ts-icon.is-ear-deaf-icon::before { content: "\f2a4"; } .ts-icon.is-play-icon::before { content: "\f04b"; } .ts-icon.is-circle-dot-icon::before { content: "\f192"; } .ts-icon.is-reply-all-icon::before { content: "\f122"; } .ts-icon.is-school-circle-exclamation-icon::before { content: "\e56c"; } .ts-icon.is-arrows-split-up-and-left-icon::before { content: "\e4bc"; } .ts-icon.is-flipboard-icon::before { font-family: "IconsBrands"; content: "\f44d"; } .ts-icon.is-linkedin-icon::before { font-family: "IconsBrands"; content: "\f08c"; } .ts-icon.is-person-swimming-icon::before { content: "\f5c4"; } .ts-icon.is-u-icon::before { content: "\55"; } .ts-icon.is-eraser-icon::before { content: "\f12d"; } .ts-icon.is-draft2digital-icon::before { font-family: "IconsBrands"; content: "\f396"; } .ts-icon.is-head-side-virus-icon::before { content: "\e064"; } .ts-icon.is-intercom-icon::before { font-family: "IconsBrands"; content: "\f7af"; } .ts-icon.is-square-instagram-icon::before { font-family: "IconsBrands"; content: "\e055"; } .ts-icon.is-circle-exclamation-icon::before { content: "\f06a"; } .ts-icon.is-hospital-user-icon::before { content: "\f80d"; } .ts-icon.is-hubspot-icon::before { font-family: "IconsBrands"; content: "\f3b2"; } .ts-icon.is-toolbox-icon::before { content: "\f552"; } .ts-icon.is-file-circle-minus-icon::before { content: "\e4ed"; } .ts-icon.is-mars-stroke-icon::before { content: "\f229"; } .ts-icon.is-mobile-retro-icon::before { content: "\e527"; } .ts-icon.is-square-icon::before { content: "\f0c8"; } .ts-icon.is-vimeo-icon::before { font-family: "IconsBrands"; content: "\f40a"; } .ts-icon.is-battery-quarter-icon::before { content: "\f243"; } .ts-icon.is-square-pen-icon::before { content: "\f14b"; } .ts-icon.is-chart-pie-icon::before { content: "\f200"; } .ts-icon.is-headphones-simple-icon::before { content: "\f58f"; } .ts-icon.is-elementor-icon::before { font-family: "IconsBrands"; content: "\f430"; } .ts-icon.is-jet-fighter-icon::before { content: "\f0fb"; } .ts-icon.is-wand-sparkles-icon::before { content: "\f72b"; } .ts-icon.is-digital-ocean-icon::before { font-family: "IconsBrands"; content: "\f391"; } .ts-icon.is-bell-slash-icon::before { content: "\f1f6"; } .ts-icon.is-creative-commons-sa-icon::before { font-family: "IconsBrands"; content: "\f4ef"; } .ts-icon.is-database-icon::before { content: "\f1c0"; } .ts-icon.is-paint-roller-icon::before { content: "\f5aa"; } .ts-icon.is-poo-storm-icon::before { content: "\f75a"; } .ts-icon.is-arrow-up-right-dots-icon::before { content: "\e4b7"; } .ts-icon.is-fingerprint-icon::before { content: "\f577"; } .ts-icon.is-forward-icon::before { content: "\f04e"; } .ts-icon.is-plane-icon::before { content: "\f072"; } .ts-icon.is-face-grin-tongue-icon::before { content: "\f589"; } .ts-icon.is-uikit-icon::before { font-family: "IconsBrands"; content: "\f403"; } .ts-icon.is-artstation-icon::before { font-family: "IconsBrands"; content: "\f77a"; } .ts-icon.is-zhihu-icon::before { font-family: "IconsBrands"; content: "\f63f"; } .ts-icon.is-firstdraft-icon::before { font-family: "IconsBrands"; content: "\f3a1"; } .ts-icon.is-cubes-icon::before { content: "\f1b3"; } .ts-icon.is-buysellads-icon::before { font-family: "IconsBrands"; content: "\f20d"; } .ts-icon.is-code-merge-icon::before { content: "\f387"; } .ts-icon.is-magnifying-glass-minus-icon::before { content: "\f010"; } .ts-icon.is-money-check-dollar-icon::before { content: "\f53d"; } .ts-icon.is-arrow-down-short-wide-icon::before { content: "\f884"; } .ts-icon.is-unlock-icon::before { content: "\f09c"; } .ts-icon.is-wodu-icon::before { font-family: "IconsBrands"; content: "\e088"; } .ts-icon.is-y-combinator-icon::before { font-family: "IconsBrands"; content: "\f23b"; } .ts-icon.is-person-pregnant-icon::before { content: "\e31e"; } .ts-icon.is-bangladeshi-taka-sign-icon::before { content: "\e2e6"; } .ts-icon.is-hand-fist-icon::before { content: "\f6de"; } .ts-icon.is-highlighter-icon::before { content: "\f591"; } .ts-icon.is-walkie-talkie-icon::before { content: "\f8ef"; } .ts-icon.is-arrow-down-wide-short-icon::before { content: "\f160"; } .ts-icon.is-spray-can-sparkles-icon::before { content: "\f5d0"; } .ts-icon.is-toggle-on-icon::before { content: "\f205"; } .ts-icon.is-user-group-icon::before { content: "\f500"; } .ts-icon.is-school-circle-xmark-icon::before { content: "\e56d"; } .ts-icon.is-circle-chevron-down-icon::before { content: "\f13a"; } .ts-icon.is-location-pin-lock-icon::before { content: "\e51f"; } .ts-icon.is-money-bill-transfer-icon::before { content: "\e528"; } .ts-icon.is-phone-icon::before { content: "\f095"; } .ts-icon.is-arrow-down-9-1-icon::before { content: "\f886"; } .ts-icon.is-creative-commons-pd-alt-icon::before { font-family: "IconsBrands"; content: "\f4ed"; } .ts-icon.is-file-powerpoint-icon::before { content: "\f1c4"; } .ts-icon.is-cloud-bolt-icon::before { content: "\f76c"; } .ts-icon.is-indian-rupee-sign-icon::before { content: "\e1bc"; } .ts-icon.is-buromobelexperte-icon::before { font-family: "IconsBrands"; content: "\f37f"; } .ts-icon.is-gripfire-icon::before { font-family: "IconsBrands"; content: "\f3ac"; } .ts-icon.is-instalod-icon::before { font-family: "IconsBrands"; content: "\e081"; } .ts-icon.is-mix-icon::before { font-family: "IconsBrands"; content: "\f3cb"; } .ts-icon.is-phone-flip-icon::before { content: "\f879"; } .ts-icon.is-circle-chevron-left-icon::before { content: "\f137"; } .ts-icon.is-star-of-david-icon::before { content: "\f69a"; } .ts-icon.is-viber-icon::before { font-family: "IconsBrands"; content: "\f409"; } .ts-icon.is-wifi-icon::before { content: "\f1eb"; } .ts-icon.is-bridge-circle-check-icon::before { content: "\e4c9"; } .ts-icon.is-tumblr-icon::before { font-family: "IconsBrands"; content: "\f173"; } .ts-icon.is-bolt-icon::before { content: "\f0e7"; } .ts-icon.is-shower-icon::before { content: "\f2cc"; } .ts-icon.is-sticker-mule-icon::before { font-family: "IconsBrands"; content: "\f3f7"; } .ts-icon.is-wand-magic-icon::before { content: "\f0d0"; } .ts-icon.is-yandex-international-icon::before { font-family: "IconsBrands"; content: "\f414"; } .ts-icon.is-message-icon::before { content: "\f27a"; } .ts-icon.is-fire-flame-curved-icon::before { content: "\f7e4"; } .ts-icon.is-phoenix-framework-icon::before { font-family: "IconsBrands"; content: "\f3dc"; } .ts-icon.is-right-long-icon::before { content: "\f30b"; } .ts-icon.is-face-tired-icon::before { content: "\f5c8"; } .ts-icon.is-people-robbery-icon::before { content: "\e536"; } .ts-icon.is-scroll-torah-icon::before { content: "\f6a0"; } .ts-icon.is-spotify-icon::before { font-family: "IconsBrands"; content: "\f1bc"; } .ts-icon.is-house-chimney-icon::before { content: "\e3af"; } .ts-icon.is-hotdog-icon::before { content: "\f80f"; } .ts-icon.is-person-half-dress-icon::before { content: "\e548"; } .ts-icon.is-reply-icon::before { content: "\f3e5"; } .ts-icon.is-at-icon::before { content: "\40"; } .ts-icon.is-marker-icon::before { content: "\f5a1"; } .ts-icon.is-square-github-icon::before { font-family: "IconsBrands"; content: "\f092"; } .ts-icon.is-z-icon::before { content: "\5a"; } .ts-icon.is-angellist-icon::before { font-family: "IconsBrands"; content: "\f209"; } .ts-icon.is-sink-icon::before { content: "\e06d"; } .ts-icon.is-square-reddit-icon::before { font-family: "IconsBrands"; content: "\f1a2"; } .ts-icon.is-truck-field-icon::before { content: "\e58d"; } .ts-icon.is-wheat-awn-icon::before { content: "\e2cd"; } .ts-icon.is-lightbulb-icon::before { content: "\f0eb"; } .ts-icon.is-eye-dropper-icon::before { content: "\f1fb"; } .ts-icon.is-bezier-curve-icon::before { content: "\f55b"; } .ts-icon.is-flag-checkered-icon::before { content: "\f11e"; } .ts-icon.is-jsfiddle-icon::before { font-family: "IconsBrands"; content: "\f1cc"; } .ts-icon.is-om-icon::before { content: "\f679"; } .ts-icon.is-torii-gate-icon::before { content: "\f6a1"; } .ts-icon.is-edge-legacy-icon::before { font-family: "IconsBrands"; content: "\e078"; } .ts-icon.is-train-subway-icon::before { content: "\f239"; } .ts-icon.is-hands-holding-circle-icon::before { content: "\e4fb"; } .ts-icon.is-grip-vertical-icon::before { content: "\f58e"; } .ts-icon.is-k-icon::before { content: "\4b"; } .ts-icon.is-taxi-icon::before { content: "\f1ba"; } .ts-icon.is-android-icon::before { font-family: "IconsBrands"; content: "\f17b"; } .ts-icon.is-instagram-icon::before { font-family: "IconsBrands"; content: "\f16d"; } .ts-icon.is-person-hiking-icon::before { content: "\f6ec"; } .ts-icon.is-shapes-icon::before { content: "\f61f"; } .ts-icon.is-creative-commons-by-icon::before { font-family: "IconsBrands"; content: "\f4e7"; } .ts-icon.is-camera-icon::before { content: "\f030"; } .ts-icon.is-kickstarter-icon::before { font-family: "IconsBrands"; content: "\f3bb"; } .ts-icon.is-m-icon::before { content: "\4d"; } .ts-icon.is-maximize-icon::before { content: "\f31e"; } .ts-icon.is-building-lock-icon::before { content: "\e4d6"; } .ts-icon.is-magnifying-glass-dollar-icon::before { content: "\f688"; } .ts-icon.is-compass-icon::before { content: "\f14e"; } .ts-icon.is-cc-stripe-icon::before { font-family: "IconsBrands"; content: "\f1f5"; } .ts-icon.is-edge-icon::before { font-family: "IconsBrands"; content: "\f282"; } .ts-icon.is-jira-icon::before { font-family: "IconsBrands"; content: "\f7b1"; } .ts-icon.is-tv-icon::before { content: "\f26c"; } .ts-icon.is-beer-mug-empty-icon::before { content: "\f0fc"; } .ts-icon.is-square-xmark-icon::before { content: "\f2d3"; } .ts-icon.is-tent-arrow-left-right-icon::before { content: "\e57f"; } .ts-icon.is-x-twitter-icon::before { font-family: "IconsBrands"; content: "\e61b"; } .ts-icon.is-plane-slash-icon::before { content: "\e069"; } .ts-icon.is-bottle-droplet-icon::before { content: "\e4c4"; } .ts-icon.is-face-laugh-icon::before { content: "\f599"; } .ts-icon.is-n-icon::before { content: "\4e"; } .ts-icon.is-tents-icon::before { content: "\e582"; } .ts-icon.is-b-icon::before { content: "\42"; } .ts-icon.is-face-grin-squint-tears-icon::before { content: "\f586"; } .ts-icon.is-stripe-icon::before { font-family: "IconsBrands"; content: "\f429"; } .ts-icon.is-diagram-project-icon::before { content: "\f542"; } .ts-icon.is-chromecast-icon::before { font-family: "IconsBrands"; content: "\f838"; } .ts-icon.is-delete-left-icon::before { content: "\f55a"; } .ts-icon.is-mask-ventilator-icon::before { content: "\e524"; } .ts-icon.is-p-icon::before { content: "\50"; } .ts-icon.is-schlix-icon::before { font-family: "IconsBrands"; content: "\f3ea"; } .ts-icon.is-sim-card-icon::before { content: "\f7c4"; } .ts-icon.is-bitcoin-sign-icon::before { content: "\e0b4"; } .ts-icon.is-microphone-lines-slash-icon::before { content: "\f539"; } .ts-icon.is-swift-icon::before { font-family: "IconsBrands"; content: "\f8e1"; } .ts-icon.is-ebay-icon::before { font-family: "IconsBrands"; content: "\f4f4"; } .ts-icon.is-glass-water-icon::before { content: "\e4f4"; } .ts-icon.is-opencart-icon::before { font-family: "IconsBrands"; content: "\f23d"; } .ts-icon.is-power-off-icon::before { content: "\f011"; } .ts-icon.is-first-order-alt-icon::before { font-family: "IconsBrands"; content: "\f50a"; } .ts-icon.is-house-chimney-user-icon::before { content: "\e065"; } .ts-icon.is-simplybuilt-icon::before { font-family: "IconsBrands"; content: "\f215"; } .ts-icon.is-star-of-life-icon::before { content: "\f621"; } .ts-icon.is-bowling-ball-icon::before { content: "\f436"; } .ts-icon.is-chess-king-icon::before { content: "\f43f"; } .ts-icon.is-circle-minus-icon::before { content: "\f056"; } .ts-icon.is-turn-up-icon::before { content: "\f3bf"; } .ts-icon.is-arrow-up-from-ground-water-icon::before { content: "\e4b5"; } .ts-icon.is-shopware-icon::before { font-family: "IconsBrands"; content: "\f5b5"; } .ts-icon.is-jedi-order-icon::before { font-family: "IconsBrands"; content: "\f50e"; } .ts-icon.is-hill-rockslide-icon::before { content: "\e508"; } .ts-icon.is-dumpster-icon::before { content: "\f793"; } .ts-icon.is-creative-commons-sampling-plus-icon::before { font-family: "IconsBrands"; content: "\f4f1"; } .ts-icon.is-joget-icon::before { font-family: "IconsBrands"; content: "\f3b7"; } .ts-icon.is-markdown-icon::before { font-family: "IconsBrands"; content: "\f60f"; } .ts-icon.is-repeat-icon::before { content: "\f363"; } .ts-icon.is-grav-icon::before { font-family: "IconsBrands"; content: "\f2d6"; } .ts-icon.is-freebsd-icon::before { font-family: "IconsBrands"; content: "\f3a4"; } .ts-icon.is-heart-circle-plus-icon::before { content: "\e500"; } .ts-icon.is-retweet-icon::before { content: "\f079"; } .ts-icon.is-anchor-icon::before { content: "\f13d"; } .ts-icon.is-face-laugh-beam-icon::before { content: "\f59a"; } .ts-icon.is-sort-up-icon::before { content: "\f0de"; } .ts-icon.is-user-minus-icon::before { content: "\f503"; } .ts-icon.is-diagram-predecessor-icon::before { content: "\e477"; } .ts-icon.is-align-right-icon::before { content: "\f038"; } .ts-icon.is-child-combatant-icon::before { content: "\e4e0"; } .ts-icon.is-discord-icon::before { font-family: "IconsBrands"; content: "\f392"; } .ts-icon.is-landmark-icon::before { content: "\f66f"; } .ts-icon.is-paragraph-icon::before { content: "\f1dd"; } .ts-icon.is-rocket-icon::before { content: "\f135"; } .ts-icon.is-train-tram-icon::before { content: "\e5b4"; } .ts-icon.is-adversal-icon::before { font-family: "IconsBrands"; content: "\f36a"; } .ts-icon.is-memory-icon::before { content: "\f538"; } .ts-icon.is-person-cane-icon::before { content: "\e53c"; } .ts-icon.is-check-icon::before { content: "\f00c"; } .ts-icon.is-file-prescription-icon::before { content: "\f572"; } .ts-icon.is-arrow-right-icon::before { content: "\f061"; } .ts-icon.is-comment-dots-icon::before { content: "\f4ad"; } .ts-icon.is-filter-icon::before { content: "\f0b0"; } .ts-icon.is-head-side-cough-slash-icon::before { content: "\e062"; } .ts-icon.is-hockey-puck-icon::before { content: "\f453"; } .ts-icon.is-rupiah-sign-icon::before { content: "\e23d"; } .ts-icon.is-trophy-icon::before { content: "\f091"; } .ts-icon.is-circle-radiation-icon::before { content: "\f7ba"; } .ts-icon.is-basketball-icon::before { content: "\f434"; } .ts-icon.is-file-circle-question-icon::before { content: "\e4ef"; } .ts-icon.is-oil-well-icon::before { content: "\e532"; } .ts-icon.is-arrow-trend-up-icon::before { content: "\e098"; } .ts-icon.is-bus-icon::before { content: "\f207"; } .ts-icon.is-e-icon::before { content: "\45"; } .ts-icon.is-gg-circle-icon::before { font-family: "IconsBrands"; content: "\f261"; } .ts-icon.is-kitchen-set-icon::before { content: "\e51a"; } .ts-icon.is-bowl-food-icon::before { content: "\e4c6"; } .ts-icon.is-i-icon::before { content: "\49"; } .ts-icon.is-studiovinari-icon::before { font-family: "IconsBrands"; content: "\f3f8"; } .ts-icon.is-toilet-portable-icon::before { content: "\e583"; } .ts-icon.is-users-rectangle-icon::before { content: "\e594"; } .ts-icon.is-connectdevelop-icon::before { font-family: "IconsBrands"; content: "\f20e"; } .ts-icon.is-minus-icon::before { content: "\f068"; } .ts-icon.is-mixcloud-icon::before { font-family: "IconsBrands"; content: "\f289"; } .ts-icon.is-image-icon::before { content: "\f03e"; } .ts-icon.is-folder-plus-icon::before { content: "\f65e"; } .ts-icon.is-qrcode-icon::before { content: "\f029"; } .ts-icon.is-school-icon::before { content: "\f549"; } .ts-icon.is-untappd-icon::before { font-family: "IconsBrands"; content: "\f405"; } .ts-icon.is-diaspora-icon::before { font-family: "IconsBrands"; content: "\f791"; } .ts-icon.is-meetup-icon::before { font-family: "IconsBrands"; content: "\f2e0"; } .ts-icon.is-dev-icon::before { font-family: "IconsBrands"; content: "\f6cc"; } .ts-icon.is-face-kiss-beam-icon::before { content: "\f597"; } .ts-icon.is-file-audio-icon::before { content: "\f1c7"; } .ts-icon.is-ruler-icon::before { content: "\f545"; } .ts-icon.is-video-icon::before { content: "\f03d"; } .ts-icon.is-crosshairs-icon::before { content: "\f05b"; } .ts-icon.is-hand-lizard-icon::before { content: "\f258"; } .ts-icon.is-house-lock-icon::before { content: "\e510"; } .ts-icon.is-napster-icon::before { font-family: "IconsBrands"; content: "\f3d2"; } .ts-icon.is-envelope-circle-check-icon::before { content: "\e4e8"; } .ts-icon.is-square-twitter-icon::before { font-family: "IconsBrands"; content: "\f081"; } .ts-icon.is-font-awesome-icon::before { content: "\f2b4"; } .ts-icon.is-circle-up-icon::before { content: "\f35b"; } .ts-icon.is-podcast-icon::before { content: "\f2ce"; } .ts-icon.is-weight-scale-icon::before { content: "\f496"; } .ts-icon.is-book-open-icon::before { content: "\f518"; } .ts-icon.is-servicestack-icon::before { font-family: "IconsBrands"; content: "\f3ec"; } .ts-icon.is-share-nodes-icon::before { content: "\f1e0"; } .ts-icon.is-traffic-light-icon::before { content: "\f637"; } .ts-icon.is-plug-circle-xmark-icon::before { content: "\e560"; } .ts-icon.is-photo-film-icon::before { content: "\f87c"; } .ts-icon.is-watchman-monitoring-icon::before { font-family: "IconsBrands"; content: "\e087"; } .ts-icon.is-ideal-icon::before { font-family: "IconsBrands"; content: "\e013"; } .ts-icon.is-kaaba-icon::before { content: "\f66b"; } .ts-icon.is-gifts-icon::before { content: "\f79c"; } .ts-icon.is-palette-icon::before { content: "\f53f"; } .ts-icon.is-underline-icon::before { content: "\f0cd"; } .ts-icon.is-cart-arrow-down-icon::before { content: "\f218"; } .ts-icon.is-comment-slash-icon::before { content: "\f4b3"; } .ts-icon.is-forward-fast-icon::before { content: "\f050"; } .ts-icon.is-heart-crack-icon::before { content: "\f7a9"; } .ts-icon.is-cart-plus-icon::before { content: "\f217"; } .ts-icon.is-locust-icon::before { content: "\e520"; } .ts-icon.is-flag-icon::before { content: "\f024"; } .ts-icon.is-bucket-icon::before { content: "\e4cf"; } .ts-icon.is-goodreads-icon::before { font-family: "IconsBrands"; content: "\f3a8"; } .ts-icon.is-mobile-screen-button-icon::before { content: "\f3cd"; } .ts-icon.is-reddit-icon::before { font-family: "IconsBrands"; content: "\f1a1"; } .ts-icon.is-temperature-half-icon::before { content: "\f2c9"; } .ts-icon.is-3-icon::before { content: "\33"; } .ts-icon.is-chart-column-icon::before { content: "\e0e3"; } .ts-icon.is-anchor-circle-xmark-icon::before { content: "\e4ac"; } .ts-icon.is-anchor-circle-check-icon::before { content: "\e4aa"; } .ts-icon.is-hand-holding-dollar-icon::before { content: "\f4c0"; } .ts-icon.is-sack-dollar-icon::before { content: "\f81d"; } .ts-icon.is-utensils-icon::before { content: "\f2e7"; } .ts-icon.is-align-justify-icon::before { content: "\f039"; } .ts-icon.is-weixin-icon::before { font-family: "IconsBrands"; content: "\f1d7"; } .ts-icon.is-terminal-icon::before { content: "\f120"; } .ts-icon.is-bell-icon::before { content: "\f0f3"; } .ts-icon.is-cc-paypal-icon::before { font-family: "IconsBrands"; content: "\f1f4"; } .ts-icon.is-hand-point-right-icon::before { content: "\f0a4"; } .ts-icon.is-salesforce-icon::before { font-family: "IconsBrands"; content: "\f83b"; } .ts-icon.is-steam-symbol-icon::before { font-family: "IconsBrands"; content: "\f3f6"; } .ts-icon.is-baseball-icon::before { content: "\f433"; } .ts-icon.is-cc-mastercard-icon::before { font-family: "IconsBrands"; content: "\f1f1"; } .ts-icon.is-mars-icon::before { content: "\f222"; } .ts-icon.is-money-bill-1-wave-icon::before { content: "\f53b"; } .ts-icon.is-trailer-icon::before { content: "\e041"; } .ts-icon.is-brush-icon::before { content: "\f55d"; } .ts-icon.is-qq-icon::before { font-family: "IconsBrands"; content: "\f1d6"; } .ts-icon.is-gear-icon::before { content: "\f013"; } .ts-icon.is-users-between-lines-icon::before { content: "\e591"; } .ts-icon.is-unity-icon::before { font-family: "IconsBrands"; content: "\e049"; } .ts-icon.is-usps-icon::before { font-family: "IconsBrands"; content: "\f7e1"; } .ts-icon.is-bullseye-icon::before { content: "\f140"; } .ts-icon.is-headphones-icon::before { content: "\f025"; } .ts-icon.is-person-circle-exclamation-icon::before { content: "\e53f"; } .ts-icon.is-cc-diners-club-icon::before { font-family: "IconsBrands"; content: "\f24c"; } .ts-icon.is-file-code-icon::before { content: "\f1c9"; } .ts-icon.is-filter-circle-dollar-icon::before { content: "\f662"; } .ts-icon.is-face-smile-beam-icon::before { content: "\f5b8"; } .ts-icon.is-earth-asia-icon::before { content: "\f57e"; } .ts-icon.is-italic-icon::before { content: "\f033"; } .ts-icon.is-person-drowning-icon::before { content: "\e545"; } .ts-icon.is-square-h-icon::before { content: "\f0fd"; } .ts-icon.is-umbrella-icon::before { content: "\f0e9"; } .ts-icon.is-bridge-water-icon::before { content: "\e4ce"; } .ts-icon.is-free-code-camp-icon::before { font-family: "IconsBrands"; content: "\f2c5"; } .ts-icon.is-git-alt-icon::before { font-family: "IconsBrands"; content: "\f841"; } .ts-icon.is-opera-icon::before { font-family: "IconsBrands"; content: "\f26a"; } .ts-icon.is-warehouse-icon::before { content: "\f494"; } .ts-icon.is-cc-amazon-pay-icon::before { font-family: "IconsBrands"; content: "\f42d"; } .ts-icon.is-car-tunnel-icon::before { content: "\e4de"; } .ts-icon.is-cc-amex-icon::before { font-family: "IconsBrands"; content: "\f1f3"; } .ts-icon.is-github-alt-icon::before { font-family: "IconsBrands"; content: "\f113"; } .ts-icon.is-users-icon::before { content: "\f0c0"; } .ts-icon.is-volume-high-icon::before { content: "\f028"; } .ts-icon.is-blender-phone-icon::before { content: "\f6b6"; } .ts-icon.is-building-circle-exclamation-icon::before { content: "\e4d3"; } .ts-icon.is-gauge-icon::before { content: "\f624"; } .ts-icon.is-less-than-icon::before { content: "\3c"; } .ts-icon.is-list-check-icon::before { content: "\f0ae"; } .ts-icon.is-pump-medical-icon::before { content: "\e06a"; } .ts-icon.is-up-right-from-square-icon::before { content: "\f35d"; } .ts-icon.is-bong-icon::before { content: "\f55c"; } .ts-icon.is-diamond-icon::before { content: "\f219"; } .ts-icon.is-masks-theater-icon::before { content: "\f630"; } .ts-icon.is-print-icon::before { content: "\f02f"; } .ts-icon.is-calendar-days-icon::before { content: "\f073"; } .ts-icon.is-creative-commons-zero-icon::before { font-family: "IconsBrands"; content: "\f4f3"; } .ts-icon.is-group-arrows-rotate-icon::before { content: "\e4f6"; } .ts-icon.is-money-bill-wheat-icon::before { content: "\e52a"; } .ts-icon.is-store-slash-icon::before { content: "\e071"; } .ts-icon.is-chart-gantt-icon::before { content: "\e0e4"; } .ts-icon.is-ethereum-icon::before { font-family: "IconsBrands"; content: "\f42e"; } .ts-icon.is-fill-icon::before { content: "\f575"; } .ts-icon.is-arrow-right-arrow-left-icon::before { content: "\f0ec"; } .ts-icon.is-arrow-down-long-icon::before { content: "\f175"; } .ts-icon.is-buy-n-large-icon::before { font-family: "IconsBrands"; content: "\f8a6"; } .ts-icon.is-dhl-icon::before { font-family: "IconsBrands"; content: "\f790"; } .ts-icon.is-dropbox-icon::before { font-family: "IconsBrands"; content: "\f16b"; } .ts-icon.is-itunes-note-icon::before { font-family: "IconsBrands"; content: "\f3b5"; } .ts-icon.is-apper-icon::before { font-family: "IconsBrands"; content: "\f371"; } .ts-icon.is-sitemap-icon::before { content: "\f0e8"; } .ts-icon.is-burger-icon::before { content: "\f805"; } .ts-icon.is-spray-can-icon::before { content: "\f5bd"; } .ts-icon.is-clipboard-user-icon::before { content: "\f7f3"; } .ts-icon.is-golang-icon::before { font-family: "IconsBrands"; content: "\e40f"; } .ts-icon.is-temperature-low-icon::before { content: "\f76b"; } .ts-icon.is-whatsapp-icon::before { font-family: "IconsBrands"; content: "\f232"; } .ts-icon.is-person-skating-icon::before { content: "\f7c5"; } .ts-icon.is-sailboat-icon::before { content: "\e445"; } .ts-icon.is-vk-icon::before { font-family: "IconsBrands"; content: "\f189"; } .ts-icon.is-plus-minus-icon::before { content: "\e43c"; } .ts-icon.is-arrow-up-from-water-pump-icon::before { content: "\e4b6"; } .ts-icon.is-arrow-up-a-z-icon::before { content: "\f15e"; } .ts-icon.is-app-store-ios-icon::before { font-family: "IconsBrands"; content: "\f370"; } .ts-icon.is-house-flood-water-icon::before { content: "\e50e"; } .ts-icon.is-right-left-icon::before { content: "\f362"; } .ts-icon.is-x-ray-icon::before { content: "\f497"; } .ts-icon.is-angular-icon::before { font-family: "IconsBrands"; content: "\f420"; } .ts-icon.is-cloud-sun-icon::before { content: "\f6c4"; } .ts-icon.is-heart-circle-minus-icon::before { content: "\e4ff"; } .ts-icon.is-less-than-equal-icon::before { content: "\f537"; } .ts-icon.is-poo-icon::before { content: "\f2fe"; } .ts-icon.is-arrows-up-down-left-right-icon::before { content: "\f047"; } .ts-icon.is-key-icon::before { content: "\f084"; } .ts-icon.is-npm-icon::before { font-family: "IconsBrands"; content: "\f3d4"; } .ts-icon.is-table-cells-icon::before { content: "\f00a"; } .ts-icon.is-truck-field-un-icon::before { content: "\e58e"; } .ts-icon.is-waze-icon::before { font-family: "IconsBrands"; content: "\f83f"; } .ts-icon.is-barcode-icon::before { content: "\f02a"; } .ts-icon.is-cannabis-icon::before { content: "\f55f"; } .ts-icon.is-horse-head-icon::before { content: "\f7ab"; } .ts-icon.is-unlock-keyhole-icon::before { content: "\f13e"; } .ts-icon.is-book-journal-whills-icon::before { content: "\f66a"; } .ts-icon.is-jar-icon::before { content: "\e516"; } .ts-icon.is-mug-saucer-icon::before { content: "\f0f4"; } .ts-icon.is-square-caret-down-icon::before { content: "\f150"; } .ts-icon.is-head-side-cough-icon::before { content: "\e061"; } .ts-icon.is-bore-hole-icon::before { content: "\e4c3"; } .ts-icon.is-magnifying-glass-chart-icon::before { content: "\e522"; } .ts-icon.is-sun-plant-wilt-icon::before { content: "\e57a"; } .ts-icon.is-address-card-icon::before { content: "\f2bb"; } .ts-icon.is-file-waveform-icon::before { content: "\f478"; } .ts-icon.is-venus-icon::before { content: "\f221"; } .ts-icon.is-map-location-dot-icon::before { content: "\f5a0"; } .ts-icon.is-cc-apple-pay-icon::before { font-family: "IconsBrands"; content: "\f416"; } .ts-icon.is-stapler-icon::before { content: "\e5af"; } .ts-icon.is-arrow-pointer-icon::before { content: "\f245"; } .ts-icon.is-react-icon::before { font-family: "IconsBrands"; content: "\f41b"; } .ts-icon.is-users-rays-icon::before { content: "\e593"; } .ts-icon.is-magento-icon::before { font-family: "IconsBrands"; content: "\f3c4"; } .ts-icon.is-file-arrow-up-icon::before { content: "\f574"; } .ts-icon.is-fish-icon::before { content: "\f578"; } .ts-icon.is-indent-icon::before { content: "\f03c"; } .ts-icon.is-school-circle-check-icon::before { content: "\e56b"; } .ts-icon.is-bilibili-icon::before { font-family: "IconsBrands"; content: "\e3d9"; } .ts-icon.is-broom-ball-icon::before { content: "\f458"; } .ts-icon.is-speakap-icon::before { font-family: "IconsBrands"; content: "\f3f3"; } .ts-icon.is-arrow-down-up-across-line-icon::before { content: "\e4af"; } .ts-icon.is-wordpress-icon::before { font-family: "IconsBrands"; content: "\f19a"; } .ts-icon.is-ear-listen-icon::before { content: "\f2a2"; } .ts-icon.is-kiwi-bird-icon::before { content: "\f535"; } .ts-icon.is-reddit-alien-icon::before { font-family: "IconsBrands"; content: "\f281"; } .ts-icon.is-ship-icon::before { content: "\f21a"; } .ts-icon.is-clock-rotate-left-icon::before { content: "\f1da"; } .ts-icon.is-desktop-icon::before { content: "\f390"; } .ts-icon.is-motorcycle-icon::before { content: "\f21c"; } .ts-icon.is-wave-square-icon::before { content: "\f83e"; } .ts-icon.is-circle-half-stroke-icon::before { content: "\f042"; } .ts-icon.is-fish-fins-icon::before { content: "\e4f2"; } .ts-icon.is-patreon-icon::before { font-family: "IconsBrands"; content: "\f3d9"; } .ts-icon.is-quote-left-icon::before { content: "\f10d"; } .ts-icon.is-road-spikes-icon::before { content: "\e568"; } .ts-icon.is-scissors-icon::before { content: "\f0c4"; } .ts-icon.is-subscript-icon::before { content: "\f12c"; } .ts-icon.is-download-icon::before { content: "\f019"; } .ts-icon.is-mosquito-net-icon::before { content: "\e52c"; } .ts-icon.is-worm-icon::before { content: "\e599"; } .ts-icon.is-bug-icon::before { content: "\f188"; } .ts-icon.is-peseta-sign-icon::before { content: "\e221"; } .ts-icon.is-apple-pay-icon::before { font-family: "IconsBrands"; content: "\f415"; } .ts-icon.is-resolving-icon::before { font-family: "IconsBrands"; content: "\f3e7"; } .ts-icon.is-tachograph-digital-icon::before { content: "\f566"; } .ts-icon.is-windows-icon::before { font-family: "IconsBrands"; content: "\f17a"; } .ts-icon.is-language-icon::before { content: "\f1ab"; } .ts-icon.is-wpexplorer-icon::before { font-family: "IconsBrands"; content: "\f2de"; } .ts-icon.is-comments-icon::before { content: "\f086"; } .ts-icon.is-dolly-icon::before { content: "\f472"; } .ts-icon.is-square-poll-horizontal-icon::before { content: "\f682"; } .ts-icon.is-usb-icon::before { font-family: "IconsBrands"; content: "\f287"; } .ts-icon.is-building-icon::before { content: "\f1ad"; } .ts-icon.is-soap-icon::before { content: "\e06e"; } .ts-icon.is-square-tumblr-icon::before { font-family: "IconsBrands"; content: "\f174"; } .ts-icon.is-yammer-icon::before { font-family: "IconsBrands"; content: "\f840"; } .ts-icon.is-perbyte-icon::before { font-family: "IconsBrands"; content: "\e083"; } .ts-icon.is-temperature-arrow-up-icon::before { content: "\e040"; } .ts-icon.is-wine-bottle-icon::before { content: "\f72f"; } .ts-icon.is-snowplow-icon::before { content: "\f7d2"; } .ts-icon.is-tent-icon::before { content: "\e57d"; } .ts-icon.is-diagram-successor-icon::before { content: "\e47a"; } .ts-icon.is-bugs-icon::before { content: "\e4d0"; } .ts-icon.is-chevron-down-icon::before { content: "\f078"; } .ts-icon.is-door-closed-icon::before { content: "\f52a"; } .ts-icon.is-firefox-icon::before { font-family: "IconsBrands"; content: "\f269"; } .ts-icon.is-folder-closed-icon::before { content: "\e185"; } .ts-icon.is-j-icon::before { content: "\4a"; } .ts-icon.is-arrows-to-circle-icon::before { content: "\e4bd"; } .ts-icon.is-cross-icon::before { content: "\f654"; } .ts-icon.is-not-equal-icon::before { content: "\f53e"; } .ts-icon.is-cent-sign-icon::before { content: "\e3f5"; } .ts-icon.is-chess-pawn-icon::before { content: "\f443"; } .ts-icon.is-fan-icon::before { content: "\f863"; } .ts-icon.is-sith-icon::before { font-family: "IconsBrands"; content: "\f512"; } .ts-icon.is-stairs-icon::before { content: "\e289"; } .ts-icon.is-accessible-icon-icon::before { font-family: "IconsBrands"; content: "\f368"; } .ts-icon.is-google-icon::before { font-family: "IconsBrands"; content: "\f1a0"; } .ts-icon.is-user-ninja-icon::before { content: "\f504"; } .ts-icon.is-fly-icon::before { font-family: "IconsBrands"; content: "\f417"; } .ts-icon.is-cloud-showers-heavy-icon::before { content: "\f740"; } .ts-icon.is-x-icon::before { content: "\58"; } .ts-icon.is-certificate-icon::before { content: "\f0a3"; } .ts-icon.is-creative-commons-nd-icon::before { font-family: "IconsBrands"; content: "\f4eb"; } .ts-icon.is-evernote-icon::before { font-family: "IconsBrands"; content: "\f839"; } .ts-icon.is-flask-icon::before { content: "\f0c3"; } .ts-icon.is-hill-avalanche-icon::before { content: "\e507"; } .ts-icon.is-houzz-icon::before { font-family: "IconsBrands"; content: "\f27c"; } .ts-icon.is-money-check-icon::before { content: "\f53c"; } .ts-icon.is-circle-h-icon::before { content: "\f47e"; } .ts-icon.is-venus-mars-icon::before { content: "\f228"; } .ts-icon.is-gauge-simple-high-icon::before { content: "\f62a"; } .ts-icon.is-plane-lock-icon::before { content: "\e558"; } .ts-icon.is-square-lastfm-icon::before { font-family: "IconsBrands"; content: "\f203"; } .ts-icon.is-volume-off-icon::before { content: "\f026"; } .ts-icon.is-camera-rotate-icon::before { content: "\e0d8"; } .ts-icon.is-face-grin-tears-icon::before { content: "\f588"; } .ts-icon.is-rotate-right-icon::before { content: "\f2f9"; } .ts-icon.is-square-vimeo-icon::before { font-family: "IconsBrands"; content: "\f194"; } .ts-icon.is-mask-face-icon::before { content: "\e1d7"; } .ts-icon.is-behance-icon::before { font-family: "IconsBrands"; content: "\f1b4"; } .ts-icon.is-code-pull-request-icon::before { content: "\e13c"; } .ts-icon.is-laptop-icon::before { content: "\f109"; } .ts-icon.is-truck-front-icon::before { content: "\e2b7"; } .ts-icon.is-arrow-rotate-right-icon::before { content: "\f01e"; } .ts-icon.is-square-viadeo-icon::before { font-family: "IconsBrands"; content: "\f2aa"; } .ts-icon.is-arrow-up-long-icon::before { content: "\f176"; } .ts-icon.is-cookie-icon::before { content: "\f563"; } .ts-icon.is-earth-europe-icon::before { content: "\f7a2"; } .ts-icon.is-face-frown-icon::before { content: "\f119"; } .ts-icon.is-link-slash-icon::before { content: "\f127"; } .ts-icon.is-centercode-icon::before { font-family: "IconsBrands"; content: "\f380"; } .ts-icon.is-rupee-sign-icon::before { content: "\f156"; } .ts-icon.is-road-icon::before { content: "\f018"; } .ts-icon.is-diamond-turn-right-icon::before { content: "\f5eb"; } .ts-icon.is-rocketchat-icon::before { font-family: "IconsBrands"; content: "\f3e8"; } .ts-icon.is-user-gear-icon::before { content: "\f4fe"; } .ts-icon.is-vnv-icon::before { font-family: "IconsBrands"; content: "\f40b"; } .ts-icon.is-w-icon::before { content: "\57"; } .ts-icon.is-xbox-icon::before { font-family: "IconsBrands"; content: "\f412"; } .ts-icon.is-bluetooth-icon::before { font-family: "IconsBrands"; content: "\f293"; } .ts-icon.is-shirtsinbulk-icon::before { font-family: "IconsBrands"; content: "\f214"; } .ts-icon.is-square-js-icon::before { font-family: "IconsBrands"; content: "\f3b9"; } .ts-icon.is-circle-arrow-down-icon::before { content: "\f0ab"; } .ts-icon.is-superscript-icon::before { content: "\f12b"; } .ts-icon.is-squarespace-icon::before { font-family: "IconsBrands"; content: "\f5be"; } .ts-icon.is-trash-can-icon::before { content: "\f2ed"; } .ts-icon.is-house-circle-check-icon::before { content: "\e509"; } .ts-icon.is-cloudscale-icon::before { font-family: "IconsBrands"; content: "\f383"; } .ts-icon.is-notdef-icon::before { content: "\e1fe"; } .ts-icon.is-plug-circle-bolt-icon::before { content: "\e55b"; } .ts-icon.is-synagogue-icon::before { content: "\f69b"; } .ts-icon.is-ban-smoking-icon::before { content: "\f54d"; } .ts-icon.is-calculator-icon::before { content: "\f1ec"; } .ts-icon.is-ellipsis-icon::before { content: "\f141"; } .ts-icon.is-euro-sign-icon::before { content: "\f153"; } .ts-icon.is-hurricane-icon::before { content: "\f751"; } .ts-icon.is-bars-progress-icon::before { content: "\f828"; } .ts-icon.is-plane-circle-xmark-icon::before { content: "\e557"; } .ts-icon.is-plug-circle-check-icon::before { content: "\e55c"; } .ts-icon.is-sd-card-icon::before { content: "\f7c2"; } .ts-icon.is-charging-station-icon::before { content: "\f5e7"; } .ts-icon.is-heart-circle-bolt-icon::before { content: "\e4fc"; } .ts-icon.is-house-fire-icon::before { content: "\e50c"; } .ts-icon.is-caret-down-icon::before { content: "\f0d7"; } .ts-icon.is-book-atlas-icon::before { content: "\f558"; } .ts-icon.is-file-excel-icon::before { content: "\f1c3"; } .ts-icon.is-hand-back-fist-icon::before { content: "\f255"; } .ts-icon.is-leaf-icon::before { content: "\f06c"; } .ts-icon.is-swatchbook-icon::before { content: "\f5c3"; } .ts-icon.is-ups-icon::before { font-family: "IconsBrands"; content: "\f7e0"; } .ts-icon.is-boxes-packing-icon::before { content: "\e4c7"; } .ts-icon.is-viruses-icon::before { content: "\e076"; } .ts-icon.is-face-rolling-eyes-icon::before { content: "\f5a5"; } .ts-icon.is-sort-down-icon::before { content: "\f0dd"; } .ts-icon.is-thumbs-up-icon::before { content: "\f164"; } .ts-icon.is-trade-federation-icon::before { font-family: "IconsBrands"; content: "\f513"; } .ts-icon.is-whiskey-glass-icon::before { content: "\f7a0"; } .ts-icon.is-diagram-next-icon::before { content: "\e476"; } .ts-icon.is-door-open-icon::before { content: "\f52b"; } .ts-icon.is-flask-vial-icon::before { content: "\e4f3"; } .ts-icon.is-house-medical-circle-exclamation-icon::before { content: "\e512"; } .ts-icon.is-invision-icon::before { font-family: "IconsBrands"; content: "\f7b0"; } .ts-icon.is-bity-icon::before { font-family: "IconsBrands"; content: "\f37a"; } .ts-icon.is-hand-middle-finger-icon::before { content: "\f806"; } .ts-icon.is-pied-piper-hat-icon::before { font-family: "IconsBrands"; content: "\f4e5"; } .ts-icon.is-sleigh-icon::before { content: "\f7cc"; } .ts-icon.is-sourcetree-icon::before { font-family: "IconsBrands"; content: "\f7d3"; } .ts-icon.is-c-icon::before { content: "\43"; } .ts-icon.is-blog-icon::before { content: "\f781"; } .ts-icon.is-fire-burner-icon::before { content: "\e4f1"; } .ts-icon.is-helicopter-symbol-icon::before { content: "\e502"; } .ts-icon.is-helmet-safety-icon::before { content: "\f807"; } .ts-icon.is-tooth-icon::before { content: "\f5c9"; } .ts-icon.is-truck-droplet-icon::before { content: "\e58c"; } .ts-icon.is-wirsindhandwerk-icon::before { font-family: "IconsBrands"; content: "\e2d0"; } .ts-icon.is-delicious-icon::before { font-family: "IconsBrands"; content: "\f1a5"; } .ts-icon.is-person-circle-xmark-icon::before { content: "\e543"; } .ts-icon.is-square-minus-icon::before { content: "\f146"; } .ts-icon.is-tablet-icon::before { content: "\f3fb"; } .ts-icon.is-frog-icon::before { content: "\f52e"; } .ts-icon.is-glide-g-icon::before { font-family: "IconsBrands"; content: "\f2a6"; } .ts-icon.is-parachute-box-icon::before { content: "\f4cd"; } .ts-icon.is-franc-sign-icon::before { content: "\e18f"; } .ts-icon.is-mobile-button-icon::before { content: "\f10b"; } .ts-icon.is-bolt-lightning-icon::before { content: "\e0b7"; } .ts-icon.is-trash-arrow-up-icon::before { content: "\f829"; } .ts-icon.is-colon-sign-icon::before { content: "\e140"; } .ts-icon.is-left-right-icon::before { content: "\f337"; } .ts-icon.is-shopify-icon::before { font-family: "IconsBrands"; content: "\e057"; } .ts-icon.is-google-drive-icon::before { font-family: "IconsBrands"; content: "\f3aa"; } .ts-icon.is-dice-one-icon::before { content: "\f525"; } .ts-icon.is-helicopter-icon::before { content: "\f533"; } .ts-icon.is-clone-icon::before { content: "\f24d"; } .ts-icon.is-crow-icon::before { content: "\f520"; } .ts-icon.is-rev-icon::before { font-family: "IconsBrands"; content: "\f5b2"; } .ts-icon.is-church-icon::before { content: "\f51d"; } .ts-icon.is-dong-sign-icon::before { content: "\e169"; } .ts-icon.is-face-grin-wide-icon::before { content: "\f581"; } .ts-icon.is-person-military-to-person-icon::before { content: "\e54c"; } .ts-icon.is-square-pinterest-icon::before { font-family: "IconsBrands"; content: "\f0d3"; } .ts-icon.is-copy-icon::before { content: "\f0c5"; } .ts-icon.is-microscope-icon::before { content: "\f610"; } .ts-icon.is-octopus-deploy-icon::before { font-family: "IconsBrands"; content: "\e082"; } .ts-icon.is-shield-cat-icon::before { content: "\e572"; } .ts-icon.is-window-minimize-icon::before { content: "\f2d1"; } .ts-icon.is-contao-icon::before { font-family: "IconsBrands"; content: "\f26d"; } .ts-icon.is-hands-bound-icon::before { content: "\e4f9"; } .ts-icon.is-hard-drive-icon::before { content: "\f0a0"; } .ts-icon.is-list-ol-icon::before { content: "\f0cb"; } .ts-icon.is-megaport-icon::before { font-family: "IconsBrands"; content: "\f5a3"; } .ts-icon.is-sliders-icon::before { content: "\f1de"; } .ts-icon.is-video-slash-icon::before { content: "\f4e2"; } .ts-icon.is-wine-glass-empty-icon::before { content: "\f5ce"; } .ts-icon.is-battle-net-icon::before { font-family: "IconsBrands"; content: "\f835"; } .ts-icon.is-arrows-turn-to-dots-icon::before { content: "\e4c1"; } .ts-icon.is-building-un-icon::before { content: "\e4d9"; } .ts-icon.is-creative-commons-nc-eu-icon::before { font-family: "IconsBrands"; content: "\f4e9"; } .ts-icon.is-facebook-icon::before { font-family: "IconsBrands"; content: "\f09a"; } .ts-icon.is-temperature-high-icon::before { content: "\f769"; } .ts-icon.is-algolia-icon::before { font-family: "IconsBrands"; content: "\f36c"; } .ts-icon.is-paste-icon::before { content: "\f0ea"; } .ts-icon.is-pen-ruler-icon::before { content: "\f5ae"; } .ts-icon.is-snowman-icon::before { content: "\f7d0"; } .ts-icon.is-critical-role-icon::before { font-family: "IconsBrands"; content: "\f6c9"; } .ts-icon.is-ferry-icon::before { content: "\e4ea"; } .ts-icon.is-road-circle-exclamation-icon::before { content: "\e565"; } .ts-icon.is-user-slash-icon::before { content: "\f506"; } .ts-icon.is-codiepie-icon::before { font-family: "IconsBrands"; content: "\f284"; } .ts-icon.is-building-ngo-icon::before { content: "\e4d7"; } .ts-icon.is-creative-commons-remix-icon::before { font-family: "IconsBrands"; content: "\f4ee"; } .ts-icon.is-hand-point-left-icon::before { content: "\f0a5"; } .ts-icon.is-supple-icon::before { font-family: "IconsBrands"; content: "\f3f9"; } .ts-icon.is-tape-icon::before { content: "\f4db"; } .ts-icon.is-weibo-icon::before { font-family: "IconsBrands"; content: "\f18a"; } .ts-icon.is-wheelchair-icon::before { content: "\f193"; } .ts-icon.is-arrow-up-1-9-icon::before { content: "\f163"; } .ts-icon.is-person-falling-icon::before { content: "\e546"; } .ts-icon.is-solar-panel-icon::before { content: "\f5ba"; } .ts-icon.is-arrows-down-to-people-icon::before { content: "\e4b9"; } .ts-icon.is-arrows-up-to-line-icon::before { content: "\e4c2"; } .ts-icon.is-car-burst-icon::before { content: "\f5e1"; } .ts-icon.is-heart-circle-exclamation-icon::before { content: "\e4fe"; } .ts-icon.is-mastodon-icon::before { font-family: "IconsBrands"; content: "\f4f6"; } .ts-icon.is-monument-icon::before { content: "\f5a6"; } .ts-icon.is-spider-icon::before { content: "\f717"; } .ts-icon.is-splotch-icon::before { content: "\f5bc"; } .ts-icon.is-9-icon::before { content: "\39"; } .ts-icon.is-drumstick-bite-icon::before { content: "\f6d7"; } .ts-icon.is-nfc-symbol-icon::before { font-family: "IconsBrands"; content: "\e531"; } .ts-icon.is-palfed-icon::before { font-family: "IconsBrands"; content: "\f3d8"; } .ts-icon.is-car-side-icon::before { content: "\f5e4"; } .ts-icon.is-handcuffs-icon::before { content: "\e4f8"; } .ts-icon.is-hands-bubbles-icon::before { content: "\e05e"; } .ts-icon.is-weebly-icon::before { font-family: "IconsBrands"; content: "\f5cc"; } .ts-icon.is-circle-down-icon::before { content: "\f358"; } .ts-icon.is-circle-right-icon::before { content: "\f35a"; } .ts-icon.is-maxcdn-icon::before { font-family: "IconsBrands"; content: "\f136"; } .ts-icon.is-neuter-icon::before { content: "\f22c"; } .ts-icon.is-phone-volume-icon::before { content: "\f2a0"; } .ts-icon.is-square-google-plus-icon::before { font-family: "IconsBrands"; content: "\f0d4"; } .ts-icon.is-tenge-sign-icon::before { content: "\f7d7"; } .ts-icon.is-chalkboard-icon::before { content: "\f51b"; } .ts-icon.is-cloudsmith-icon::before { font-family: "IconsBrands"; content: "\f384"; } .ts-icon.is-hand-pointer-icon::before { content: "\f25a"; } .ts-icon.is-s-icon::before { content: "\53"; } .ts-icon.is-briefcase-icon::before { content: "\f0b1"; } .ts-icon.is-pen-nib-icon::before { content: "\f5ad"; } .ts-icon.is-vial-virus-icon::before { content: "\e597"; } .ts-icon.is-building-columns-icon::before { content: "\f19c"; } .ts-icon.is-square-arrow-up-right-icon::before { content: "\f14c"; } .ts-icon.is-square-odnoklassniki-icon::before { font-family: "IconsBrands"; content: "\f264"; } .ts-icon.is-water-ladder-icon::before { content: "\f5c5"; } .ts-icon.is-redhat-icon::before { font-family: "IconsBrands"; content: "\f7bc"; } .ts-icon.is-cat-icon::before { content: "\f6be"; } .ts-icon.is-kip-sign-icon::before { content: "\e1c4"; } .ts-icon.is-person-digging-icon::before { content: "\f85e"; } .ts-icon.is-satellite-icon::before { content: "\f7bf"; } .ts-icon.is-slack-icon::before { font-family: "IconsBrands"; content: "\f198"; } .ts-icon.is-ubuntu-icon::before { font-family: "IconsBrands"; content: "\f7df"; } .ts-icon.is-file-lines-icon::before { content: "\f15c"; } .ts-icon.is-down-left-and-up-right-to-center-icon::before { content: "\f422"; } .ts-icon.is-plane-circle-check-icon::before { content: "\e555"; } .ts-icon.is-rainbow-icon::before { content: "\f75b"; } .ts-icon.is-sistrix-icon::before { font-family: "IconsBrands"; content: "\f3ee"; } .ts-icon.is-disease-icon::before { content: "\f7fa"; } .ts-icon.is-circle-chevron-up-icon::before { content: "\f139"; } .ts-icon.is-paypal-icon::before { font-family: "IconsBrands"; content: "\f1ed"; } .ts-icon.is-shield-virus-icon::before { content: "\e06c"; } .ts-icon.is-chess-knight-icon::before { content: "\f441"; } .ts-icon.is-code-branch-icon::before { content: "\f126"; } .ts-icon.is-dollar-sign-icon::before { content: "\24"; } .ts-icon.is-file-export-icon::before { content: "\f56e"; } .ts-icon.is-calendar-day-icon::before { content: "\f783"; } .ts-icon.is-face-meh-blank-icon::before { content: "\f5a4"; } .ts-icon.is-magnifying-glass-icon::before { content: "\f002"; } .ts-icon.is-mars-stroke-up-icon::before { content: "\f22a"; } .ts-icon.is-arrow-turn-up-icon::before { content: "\f148"; } .ts-icon.is-scribd-icon::before { font-family: "IconsBrands"; content: "\f28a"; } .ts-icon.is-lemon-icon::before { content: "\f094"; } .ts-icon.is-building-user-icon::before { content: "\e4da"; } .ts-icon.is-quora-icon::before { font-family: "IconsBrands"; content: "\f2c4"; } .ts-icon.is-vest-icon::before { content: "\e085"; } .ts-icon.is-caret-up-icon::before { content: "\f0d8"; } .ts-icon.is-calendar-check-icon::before { content: "\f274"; } .ts-icon.is-chess-rook-icon::before { content: "\f447"; } .ts-icon.is-cloud-icon::before { content: "\f0c2"; } .ts-icon.is-face-grin-stars-icon::before { content: "\f587"; } .ts-icon.is-imdb-icon::before { font-family: "IconsBrands"; content: "\f2d8"; } .ts-icon.is-yin-yang-icon::before { content: "\f6ad"; } .ts-icon.is-baby-icon::before { content: "\f77c"; } .ts-icon.is-fulcrum-icon::before { font-family: "IconsBrands"; content: "\f50b"; } .ts-icon.is-notes-medical-icon::before { content: "\f481"; } .ts-icon.is-square-plus-icon::before { content: "\f0fe"; } .ts-icon.is-arrow-turn-down-icon::before { content: "\f149"; } .ts-icon.is-compass-drafting-icon::before { content: "\f568"; } .ts-icon.is-map-pin-icon::before { content: "\f276"; } .ts-icon.is-mdb-icon::before { font-family: "IconsBrands"; content: "\f8ca"; } .ts-icon.is-ticket-simple-icon::before { content: "\f3ff"; } .ts-icon.is-chart-line-icon::before { content: "\f201"; } .ts-icon.is-chart-simple-icon::before { content: "\e473"; } .ts-icon.is-circle-arrow-left-icon::before { content: "\f0a8"; } .ts-icon.is-life-ring-icon::before { content: "\f1cd"; } .ts-icon.is-amilia-icon::before { font-family: "IconsBrands"; content: "\f36d"; } .ts-icon.is-mountain-icon::before { content: "\f6fc"; } .ts-icon.is-file-shield-icon::before { content: "\e4f0"; } .ts-icon.is-q-icon::before { content: "\51"; } .ts-icon.is-book-medical-icon::before { content: "\f7e6"; } .ts-icon.is-temperature-full-icon::before { content: "\f2c7"; } .ts-icon.is-gitlab-icon::before { font-family: "IconsBrands"; content: "\f296"; } .ts-icon.is-hand-point-up-icon::before { content: "\f0a6"; } .ts-icon.is-oil-can-icon::before { content: "\f613"; } .ts-icon.is-star-and-crescent-icon::before { content: "\f699"; } .ts-icon.is-erlang-icon::before { font-family: "IconsBrands"; content: "\f39d"; } .ts-icon.is-house-crack-icon::before { content: "\e3b1"; } .ts-icon.is-pagelines-icon::before { font-family: "IconsBrands"; content: "\f18c"; } .ts-icon.is-elevator-icon::before { content: "\e16d"; } .ts-icon.is-file-pen-icon::before { content: "\f31c"; } .ts-icon.is-icons-icon::before { content: "\f86d"; } .ts-icon.is-microsoft-icon::before { font-family: "IconsBrands"; content: "\f3ca"; } .ts-icon.is-pause-icon::before { content: "\f04c"; } .ts-icon.is-snowflake-icon::before { content: "\f2dc"; } .ts-icon.is-window-maximize-icon::before { content: "\f2d0"; } .ts-icon.is-arrow-rotate-left-icon::before { content: "\f0e2"; } .ts-icon.is-quote-right-icon::before { content: "\f10e"; } .ts-icon.is-pied-piper-icon::before { font-family: "IconsBrands"; content: "\f2ae"; } .ts-icon.is-microblog-icon::before { font-family: "IconsBrands"; content: "\e01a"; } .ts-icon.is-tent-arrows-down-icon::before { content: "\e581"; } .ts-icon.is-vial-icon::before { content: "\f492"; } .ts-icon.is-fort-awesome-icon::before { font-family: "IconsBrands"; content: "\f286"; } .ts-icon.is-creative-commons-sampling-icon::before { font-family: "IconsBrands"; content: "\f4f0"; } .ts-icon.is-envelope-open-icon::before { content: "\f2b6"; } .ts-icon.is-bottle-water-icon::before { content: "\e4c5"; } .ts-icon.is-dailymotion-icon::before { font-family: "IconsBrands"; content: "\e052"; } .ts-icon.is-guilded-icon::before { font-family: "IconsBrands"; content: "\e07e"; } .ts-icon.is-hands-praying-icon::before { content: "\f684"; } .ts-icon.is-java-icon::before { font-family: "IconsBrands"; content: "\f4e4"; } .ts-icon.is-microphone-lines-icon::before { content: "\f3c9"; } .ts-icon.is-spaghetti-monster-flying-icon::before { content: "\f67b"; } .ts-icon.is-coins-icon::before { content: "\f51e"; } .ts-icon.is-square-poll-vertical-icon::before { content: "\f681"; } .ts-icon.is-phoenix-squadron-icon::before { font-family: "IconsBrands"; content: "\f511"; } .ts-icon.is-dice-icon::before { content: "\f522"; } .ts-icon.is-pen-to-square-icon::before { content: "\f044"; } .ts-icon.is-person-arrow-up-from-line-icon::before { content: "\e539"; } .ts-icon.is-cloud-showers-water-icon::before { content: "\e4e4"; } .ts-icon.is-person-walking-with-cane-icon::before { content: "\f29d"; } .ts-icon.is-reacteurope-icon::before { font-family: "IconsBrands"; content: "\f75d"; } .ts-icon.is-trowel-bricks-icon::before { content: "\e58a"; } .ts-icon.is-ussunnah-icon::before { font-family: "IconsBrands"; content: "\f407"; } .ts-icon.is-battery-half-icon::before { content: "\f242"; } .ts-icon.is-earlybirds-icon::before { font-family: "IconsBrands"; content: "\f39a"; } .ts-icon.is-plug-circle-plus-icon::before { content: "\e55f"; } .ts-icon.is-avianex-icon::before { font-family: "IconsBrands"; content: "\f374"; } .ts-icon.is-git-icon::before { font-family: "IconsBrands"; content: "\f1d3"; } .ts-icon.is-h-icon::before { content: "\48"; } .ts-icon.is-square-whatsapp-icon::before { font-family: "IconsBrands"; content: "\f40c"; } .ts-icon.is-flickr-icon::before { font-family: "IconsBrands"; content: "\f16e"; } .ts-icon.is-toilet-paper-slash-icon::before { content: "\e072"; } .ts-icon.is-cloudversify-icon::before { font-family: "IconsBrands"; content: "\f385"; } .ts-icon.is-codepen-icon::before { font-family: "IconsBrands"; content: "\f1cb"; } .ts-icon.is-envelopes-bulk-icon::before { content: "\f674"; } .ts-icon.is-house-chimney-crack-icon::before { content: "\f6f1"; } .ts-icon.is-vr-cardboard-icon::before { content: "\f729"; } .ts-icon.is-clipboard-list-icon::before { content: "\f46d"; } .ts-icon.is-fire-icon::before { content: "\f06d"; } .ts-icon.is-landmark-dome-icon::before { content: "\f752"; } .ts-icon.is-php-icon::before { font-family: "IconsBrands"; content: "\f457"; } .ts-icon.is-square-threads-icon::before { font-family: "IconsBrands"; content: "\e619"; } .ts-icon.is-cart-flatbed-icon::before { content: "\f474"; } .ts-icon.is-comments-dollar-icon::before { content: "\f653"; } .ts-icon.is-face-grin-icon::before { content: "\f580"; } .ts-icon.is-osi-icon::before { font-family: "IconsBrands"; content: "\f41a"; } .ts-icon.is-code-commit-icon::before { content: "\f386"; } .ts-icon.is-bridge-circle-exclamation-icon::before { content: "\e4ca"; } .ts-icon.is-r-icon::before { content: "\52"; } .ts-icon.is-bowl-rice-icon::before { content: "\e2eb"; } .ts-icon.is-share-from-square-icon::before { content: "\f14d"; } .ts-icon.is-hackerrank-icon::before { font-family: "IconsBrands"; content: "\f5f7"; } .ts-icon.is-house-circle-xmark-icon::before { content: "\e50b"; } .ts-icon.is-person-walking-arrow-right-icon::before { content: "\e552"; } .ts-icon.is-anchor-lock-icon::before { content: "\e4ad"; } .ts-icon.is-people-pulling-icon::before { content: "\e535"; } .ts-icon.is-headset-icon::before { content: "\f590"; } .ts-icon.is-truck-arrow-right-icon::before { content: "\e58b"; } .ts-icon.is-hacker-news-icon::before { font-family: "IconsBrands"; content: "\f1d4"; } .ts-icon.is-people-group-icon::before { content: "\e533"; } .ts-icon.is-pepper-hot-icon::before { content: "\f816"; } .ts-icon.is-right-to-bracket-icon::before { content: "\f2f6"; } .ts-icon.is-trash-icon::before { content: "\f1f8"; } .ts-icon.is-virus-covid-slash-icon::before { content: "\e4a9"; } .ts-icon.is-folder-minus-icon::before { content: "\f65d"; } .ts-icon.is-app-store-icon::before { font-family: "IconsBrands"; content: "\f36f"; } .ts-icon.is-cmplid-icon::before { font-family: "IconsBrands"; content: "\e360"; } .ts-icon.is-google-plus-g-icon::before { font-family: "IconsBrands"; content: "\f0d5"; } .ts-icon.is-angles-up-icon::before { content: "\f102"; } .ts-icon.is-cuttlefish-icon::before { font-family: "IconsBrands"; content: "\f38c"; } .ts-icon.is-arrow-up-wide-short-icon::before { content: "\f161"; } .ts-icon.is-eye-icon::before { content: "\f06e"; } .ts-icon.is-ghost-icon::before { content: "\f6e2"; } .ts-icon.is-ice-cream-icon::before { content: "\f810"; } .ts-icon.is-medrt-icon::before { font-family: "IconsBrands"; content: "\f3c8"; } .ts-icon.is-arrow-right-to-city-icon::before { content: "\e4b3"; } .ts-icon.is-bullhorn-icon::before { content: "\f0a1"; } .ts-icon.is-closed-captioning-icon::before { content: "\f20a"; } .ts-icon.is-drupal-icon::before { font-family: "IconsBrands"; content: "\f1a9"; } .ts-icon.is-ellipsis-vertical-icon::before { content: "\f142"; } .ts-icon.is-genderless-icon::before { content: "\f22d"; } .ts-icon.is-i-cursor-icon::before { content: "\f246"; } .ts-icon.is-laravel-icon::before { font-family: "IconsBrands"; content: "\f3bd"; } .ts-icon.is-backward-icon::before { content: "\f04a"; } .ts-icon.is-temperature-quarter-icon::before { content: "\f2ca"; } .ts-icon.is-transgender-icon::before { content: "\f225"; } .ts-icon.is-location-crosshairs-icon::before { content: "\f601"; } .ts-icon.is-creative-commons-icon::before { font-family: "IconsBrands"; content: "\f25e"; } .ts-icon.is-cloud-moon-rain-icon::before { content: "\f73c"; } .ts-icon.is-hand-peace-icon::before { content: "\f25b"; } .ts-icon.is-hand-point-down-icon::before { content: "\f0a7"; } .ts-icon.is-weight-hanging-icon::before { content: "\f5cd"; } .ts-icon.is-cc-jcb-icon::before { font-family: "IconsBrands"; content: "\f24b"; } .ts-icon.is-clipboard-check-icon::before { content: "\f46c"; } .ts-icon.is-nutritionix-icon::before { font-family: "IconsBrands"; content: "\f3d6"; } .ts-icon.is-square-share-nodes-icon::before { content: "\f1e1"; } .ts-icon.is-baby-carriage-icon::before { content: "\f77d"; } .ts-icon.is-hashnode-icon::before { font-family: "IconsBrands"; content: "\e499"; } .ts-icon.is-circle-pause-icon::before { content: "\f28b"; } .ts-icon.is-ns8-icon::before { font-family: "IconsBrands"; content: "\f3d5"; } .ts-icon.is-award-icon::before { content: "\f559"; } .ts-icon.is-mendeley-icon::before { font-family: "IconsBrands"; content: "\f7b3"; } .ts-icon.is-shield-halved-icon::before { content: "\f3ed"; } .ts-icon.is-square-up-right-icon::before { content: "\f360"; } .ts-icon.is-user-shield-icon::before { content: "\f505"; } .ts-icon.is-jenkins-icon::before { font-family: "IconsBrands"; content: "\f3b6"; } .ts-icon.is-hammer-icon::before { content: "\f6e3"; } .ts-icon.is-optin-monster-icon::before { font-family: "IconsBrands"; content: "\f23c"; } .ts-icon.is-plug-icon::before { content: "\f1e6"; } .ts-icon.is-raspberry-pi-icon::before { font-family: "IconsBrands"; content: "\f7bb"; } .ts-icon.is-square-parking-icon::before { content: "\f540"; } .ts-icon.is-store-icon::before { content: "\f54e"; } .ts-icon.is-stumbleupon-circle-icon::before { font-family: "IconsBrands"; content: "\f1a3"; } .ts-icon.is-bandcamp-icon::before { font-family: "IconsBrands"; content: "\f2d5"; } .ts-icon.is-youtube-icon::before { font-family: "IconsBrands"; content: "\f167"; } .ts-icon.is-tornado-icon::before { content: "\f76f"; } .ts-icon.is-volleyball-icon::before { content: "\f45f"; } .ts-icon.is-cookie-bite-icon::before { content: "\f564"; } .ts-icon.is-arrow-down-icon::before { content: "\f063"; } .ts-icon.is-facebook-messenger-icon::before { font-family: "IconsBrands"; content: "\f39f"; } .ts-icon.is-hourglass-start-icon::before { content: "\f251"; } .ts-icon.is-odysee-icon::before { font-family: "IconsBrands"; content: "\e5c6"; } .ts-icon.is-seedling-icon::before { content: "\f4d8"; } .ts-icon.is-ankh-icon::before { content: "\f644"; } .ts-icon.is-stopwatch-20-icon::before { content: "\e06f"; } .ts-icon.is-clipboard-question-icon::before { content: "\e4e3"; } .ts-icon.is-hourglass-half-icon::before { content: "\f252"; } .ts-icon.is-text-slash-icon::before { content: "\f87d"; } .ts-icon.is-font-icon::before { content: "\f031"; } .ts-icon.is-js-icon::before { font-family: "IconsBrands"; content: "\f3b8"; } .ts-icon.is-layer-group-icon::before { content: "\f5fd"; } .ts-icon.is-pen-clip-icon::before { content: "\f305"; } .ts-icon.is-pinterest-p-icon::before { font-family: "IconsBrands"; content: "\f231"; } .ts-icon.is-school-lock-icon::before { content: "\e56f"; } .ts-icon.is-tarp-droplet-icon::before { content: "\e57c"; } .ts-icon.is-bahai-icon::before { content: "\f666"; } .ts-icon.is-jar-wheat-icon::before { content: "\e517"; } .ts-icon.is-hospital-icon::before { content: "\f0f8"; } .ts-icon.is-align-center-icon::before { content: "\f037"; } .ts-icon.is-check-double-icon::before { content: "\f560"; } .ts-icon.is-handshake-angle-icon::before { content: "\f4c4"; } .ts-icon.is-hotjar-icon::before { font-family: "IconsBrands"; content: "\f3b1"; } .ts-icon.is-person-rays-icon::before { content: "\e54d"; } .ts-icon.is-car-battery-icon::before { content: "\f5df"; } .ts-icon.is-sheet-plastic-icon::before { content: "\e571"; } .ts-icon.is-calendar-week-icon::before { content: "\f784"; } .ts-icon.is-border-none-icon::before { content: "\f850"; } .ts-icon.is-building-circle-check-icon::before { content: "\e4d2"; } .ts-icon.is-deviantart-icon::before { font-family: "IconsBrands"; content: "\f1bd"; } .ts-icon.is-person-skiing-nordic-icon::before { content: "\f7ca"; } .ts-icon.is-satellite-dish-icon::before { content: "\f7c0"; } .ts-icon.is-truck-plane-icon::before { content: "\e58f"; } .ts-icon.is-arrows-rotate-icon::before { content: "\f021"; } .ts-icon.is-gift-icon::before { content: "\f06b"; } .ts-icon.is-hot-tub-person-icon::before { content: "\f593"; } .ts-icon.is-house-signal-icon::before { content: "\e012"; } .ts-icon.is-spa-icon::before { content: "\f5bb"; } .ts-icon.is-up-down-left-right-icon::before { content: "\f0b2"; } .ts-icon.is-file-medical-icon::before { content: "\f477"; } .ts-icon.is-monero-icon::before { font-family: "IconsBrands"; content: "\f3d0"; } .ts-icon.is-money-bill-wave-icon::before { content: "\f53a"; } .ts-icon.is-playstation-icon::before { font-family: "IconsBrands"; content: "\f3df"; } .ts-icon.is-water-icon::before { content: "\f773"; } .ts-icon.is-biohazard-icon::before { content: "\f780"; } .ts-icon.is-star-icon::before { content: "\f005"; } .ts-icon.is-steam-icon::before { font-family: "IconsBrands"; content: "\f1b6"; } .ts-icon.is-square-rss-icon::before { content: "\f143"; } .ts-icon.is-hand-holding-droplet-icon::before { content: "\f4c1"; } .ts-icon.is-images-icon::before { content: "\f302"; } .ts-icon.is-industry-icon::before { content: "\f275"; } .ts-icon.is-link-icon::before { content: "\f0c1"; } .ts-icon.is-blogger-icon::before { font-family: "IconsBrands"; content: "\f37c"; } .ts-icon.is-square-root-variable-icon::before { content: "\f698"; } .ts-icon.is-square-virus-icon::before { content: "\e578"; } .ts-icon.is-file-csv-icon::before { content: "\f6dd"; } .ts-icon.is-comment-icon::before { content: "\f075"; } .ts-icon.is-person-circle-plus-icon::before { content: "\e541"; } .ts-icon.is-text-width-icon::before { content: "\f035"; } .ts-icon.is-backward-fast-icon::before { content: "\f049"; } .ts-icon.is-google-play-icon::before { font-family: "IconsBrands"; content: "\f3ab"; } .ts-icon.is-road-circle-xmark-icon::before { content: "\e566"; } .ts-icon.is-square-youtube-icon::before { font-family: "IconsBrands"; content: "\f431"; } .ts-icon.is-temperature-three-quarters-icon::before { content: "\f2c8"; } .ts-icon.is-y-icon::before { content: "\59"; } .ts-icon.is-file-circle-check-icon::before { content: "\e5a0"; } .ts-icon.is-house-flag-icon::before { content: "\e50d"; } .ts-icon.is-broom-icon::before { content: "\f51a"; } .ts-icon.is-odnoklassniki-icon::before { font-family: "IconsBrands"; content: "\f263"; } .ts-icon.is-wizards-of-the-coast-icon::before { font-family: "IconsBrands"; content: "\f730"; } .ts-icon.is-arrow-up-9-1-icon::before { content: "\f887"; } .ts-icon.is-skull-icon::before { content: "\f54c"; } .ts-icon.is-cart-shopping-icon::before { content: "\f07a"; } .ts-icon.is-hands-asl-interpreting-icon::before { content: "\f2a3"; } .ts-icon.is-padlet-icon::before { font-family: "IconsBrands"; content: "\e4a0"; } .ts-icon.is-spinner-icon::before { content: "\f110"; } .ts-icon.is-angle-down-icon::before { content: "\f107"; } .ts-icon.is-fonticons-icon::before { font-family: "IconsBrands"; content: "\f280"; } .ts-icon.is-phone-slash-icon::before { content: "\f3dd"; } .ts-icon.is-shop-lock-icon::before { content: "\e4a5"; } .ts-icon.is-stack-overflow-icon::before { font-family: "IconsBrands"; content: "\f16c"; } .ts-icon.is-wpbeginner-icon::before { font-family: "IconsBrands"; content: "\f297"; } .ts-icon.is-capsules-icon::before { content: "\f46b"; } .ts-icon.is-toilet-paper-icon::before { content: "\f71e"; } .ts-icon.is-handshake-icon::before { content: "\f2b5"; } .ts-icon.is-face-smile-icon::before { content: "\f118"; } .ts-icon.is-heart-icon::before { content: "\f004"; } .ts-icon.is-person-breastfeeding-icon::before { content: "\e53a"; } .ts-icon.is-plant-wilt-icon::before { content: "\e5aa"; } .ts-icon.is-truck-icon::before { content: "\f0d1"; } .ts-icon.is-users-viewfinder-icon::before { content: "\e595"; } .ts-icon.is-bars-staggered-icon::before { content: "\f550"; } .ts-icon.is-outdent-icon::before { content: "\f03b"; } .ts-icon.is-address-book-icon::before { content: "\f2b9"; } .ts-icon.is-up-down-icon::before { content: "\f338"; } .ts-icon.is-wpforms-icon::before { font-family: "IconsBrands"; content: "\f298"; } .ts-icon.is-square-pied-piper-icon::before { font-family: "IconsBrands"; content: "\e01e"; } .ts-icon.is-file-circle-plus-icon::before { content: "\e494"; } .ts-icon.is-fort-awesome-alt-icon::before { font-family: "IconsBrands"; content: "\f3a3"; } .ts-icon.is-vihara-icon::before { content: "\f6a7"; } .ts-icon.is-battery-three-quarters-icon::before { content: "\f241"; } .ts-icon.is-brazilian-real-sign-icon::before { content: "\e46c"; } .ts-icon.is-children-icon::before { content: "\e4e1"; } .ts-icon.is-file-circle-exclamation-icon::before { content: "\e4eb"; } .ts-icon.is-suitcase-rolling-icon::before { content: "\f5c1"; } .ts-icon.is-box-tissue-icon::before { content: "\e05b"; } .ts-icon.is-arrows-spin-icon::before { content: "\e4bb"; } .ts-icon.is-book-open-reader-icon::before { content: "\f5da"; } .ts-icon.is-spell-check-icon::before { content: "\f891"; } .ts-icon.is-square-caret-left-icon::before { content: "\f191"; } .ts-icon.is-up-right-and-down-left-from-center-icon::before { content: "\f424"; } .ts-icon.is-arrow-up-from-bracket-icon::before { content: "\e09a"; } .ts-icon.is-user-lock-icon::before { content: "\f502"; } .ts-icon.is-person-military-rifle-icon::before { content: "\e54b"; } .ts-icon.is-crop-simple-icon::before { content: "\f565"; } .ts-icon.is-network-wired-icon::before { content: "\f6ff"; } .ts-icon.is-rockrms-icon::before { font-family: "IconsBrands"; content: "\f3e9"; } .ts-icon.is-tablet-screen-button-icon::before { content: "\f3fa"; } .ts-icon.is-arrow-down-up-lock-icon::before { content: "\e4b0"; } .ts-icon.is-paintbrush-icon::before { content: "\f1fc"; } .ts-icon.is-gitkraken-icon::before { font-family: "IconsBrands"; content: "\f3a6"; } .ts-icon.is-shop-slash-icon::before { content: "\e070"; } .ts-icon.is-circle-dollar-to-slot-icon::before { content: "\f4b9"; } .ts-icon.is-toilets-portable-icon::before { content: "\e584"; } .ts-icon.is-person-skiing-icon::before { content: "\f7c9"; } .ts-icon.is-stopwatch-icon::before { content: "\f2f2"; } .ts-icon.is-compact-disc-icon::before { content: "\f51f"; } .ts-icon.is-money-bill-1-icon::before { content: "\f3d1"; } .ts-icon.is-researchgate-icon::before { font-family: "IconsBrands"; content: "\f4f8"; } .ts-icon.is-star-half-stroke-icon::before { content: "\f5c0"; } .ts-icon.is-clipboard-icon::before { content: "\f328"; } .ts-icon.is-chart-bar-icon::before { content: "\f080"; } .ts-icon.is-face-grin-wink-icon::before { content: "\f58c"; } .ts-icon.is-g-icon::before { content: "\47"; } .ts-icon.is-stroopwafel-icon::before { content: "\f551"; } .ts-icon.is-wrench-icon::before { content: "\f0ad"; } .ts-icon.is-creative-commons-pd-icon::before { font-family: "IconsBrands"; content: "\f4ec"; } .ts-icon.is-arrow-up-right-from-square-icon::before { content: "\f08e"; } .ts-icon.is-chair-icon::before { content: "\f6c0"; } .ts-icon.is-the-red-yeti-icon::before { font-family: "IconsBrands"; content: "\f69d"; } .ts-icon.is-adn-icon::before { font-family: "IconsBrands"; content: "\f170"; } .ts-icon.is-head-side-mask-icon::before { content: "\e063"; } .ts-icon.is-pager-icon::before { content: "\f815"; } .ts-icon.is-child-icon::before { content: "\f1ae"; } .ts-icon.is-earth-oceania-icon::before { content: "\e47b"; } .ts-icon.is-golf-ball-tee-icon::before { content: "\f450"; } .ts-icon.is-strikethrough-icon::before { content: "\f0cc"; } .ts-icon.is-wallet-icon::before { content: "\f555"; } .ts-icon.is-chess-bishop-icon::before { content: "\f43a"; } .ts-icon.is-expand-icon::before { content: "\f065"; } .ts-icon.is-minimize-icon::before { content: "\f78c"; } .ts-icon.is-square-snapchat-icon::before { font-family: "IconsBrands"; content: "\f2ad"; } .ts-icon.is-bridge-lock-icon::before { content: "\e4cc"; } .ts-icon.is-node-icon::before { font-family: "IconsBrands"; content: "\f419"; } .ts-icon.is-peso-sign-icon::before { content: "\e222"; } .ts-icon.is-rectangle-xmark-icon::before { content: "\f410"; } .ts-icon.is-universal-access-icon::before { content: "\f29a"; } .ts-icon.is-yoast-icon::before { font-family: "IconsBrands"; content: "\f2b1"; } .ts-icon.is-globe-icon::before { content: "\f0ac"; } .ts-icon.is-rectangle-list-icon::before { content: "\f022"; } .ts-icon.is-suse-icon::before { font-family: "IconsBrands"; content: "\f7d6"; } .ts-icon.is-comment-medical-icon::before { content: "\f7f5"; } .ts-icon.is-business-time-icon::before { content: "\f64a"; } .ts-icon.is-face-grin-squint-icon::before { content: "\f585"; } .ts-icon.is-hand-spock-icon::before { content: "\f259"; } .ts-icon.is-linode-icon::before { font-family: "IconsBrands"; content: "\f2b8"; } .ts-icon.is-magnifying-glass-location-icon::before { content: "\f689"; } .ts-icon.is-thumbtack-icon::before { content: "\f08d"; } .ts-icon.is-aws-icon::before { font-family: "IconsBrands"; content: "\f375"; } .ts-icon.is-location-arrow-icon::before { content: "\f124"; } .ts-icon.is-route-icon::before { content: "\f4d7"; } .ts-icon.is-smog-icon::before { content: "\f75f"; } .ts-icon.is-strava-icon::before { font-family: "IconsBrands"; content: "\f428"; } .ts-icon.is-user-astronaut-icon::before { content: "\f4fb"; } .ts-icon.is-folder-tree-icon::before { content: "\f802"; } .ts-icon.is-gamepad-icon::before { content: "\f11b"; } .ts-icon.is-tractor-icon::before { content: "\f722"; } .ts-icon.is-bone-icon::before { content: "\f5d7"; } .ts-icon.is-goodreads-g-icon::before { font-family: "IconsBrands"; content: "\f3a9"; } .ts-icon.is-hourglass-end-icon::before { content: "\f253"; } .ts-icon.is-person-walking-luggage-icon::before { content: "\e554"; } .ts-icon.is-pied-piper-alt-icon::before { font-family: "IconsBrands"; content: "\f1a8"; } .ts-icon.is-florin-sign-icon::before { content: "\e184"; } .ts-icon.is-prescription-icon::before { content: "\f5b1"; } .ts-icon.is-person-circle-question-icon::before { content: "\e542"; } .ts-icon.is-galactic-republic-icon::before { font-family: "IconsBrands"; content: "\f50c"; } .ts-icon.is-r-project-icon::before { font-family: "IconsBrands"; content: "\f4f7"; } .ts-icon.is-share-icon::before { content: "\f064"; } .ts-icon.is-tiktok-icon::before { font-family: "IconsBrands"; content: "\e07b"; } .ts-icon.is-file-contract-icon::before { content: "\f56c"; } .ts-icon.is-dice-three-icon::before { content: "\f527"; } .ts-icon.is-gas-pump-icon::before { content: "\f52f"; } .ts-icon.is-mandalorian-icon::before { font-family: "IconsBrands"; content: "\f50f"; } .ts-icon.is-user-pen-icon::before { content: "\f4ff"; } .ts-icon.is-yarn-icon::before { font-family: "IconsBrands"; content: "\f7e3"; } .ts-icon.is-book-bible-icon::before { content: "\f647"; } .ts-icon.is-note-sticky-icon::before { content: "\f249"; } .ts-icon.is-gavel-icon::before { content: "\f0e3"; } .ts-icon.is-deskpro-icon::before { font-family: "IconsBrands"; content: "\f38f"; } .ts-icon.is-users-gear-icon::before { content: "\f509"; } .ts-icon.is-cruzeiro-sign-icon::before { content: "\e152"; } .ts-icon.is-bold-icon::before { content: "\f032"; } .ts-icon.is-toggle-off-icon::before { content: "\f204"; } .ts-icon.is-teeth-icon::before { content: "\f62e"; } .ts-icon.is-arrow-right-to-bracket-icon::before { content: "\f090"; } .ts-icon.is-asterisk-icon::before { content: "\2a"; } .ts-icon.is-road-bridge-icon::before { content: "\e563"; } .ts-icon.is-0-icon::before { content: "\30"; } .ts-icon.is-threads-icon::before { font-family: "IconsBrands"; content: "\e618"; } .ts-icon.is-fonticons-fi-icon::before { font-family: "IconsBrands"; content: "\f3a2"; } .ts-icon.is-house-circle-exclamation-icon::before { content: "\e50a"; } .ts-icon.is-house-user-icon::before { content: "\e1b0"; } .ts-icon.is-people-arrows-icon::before { content: "\e068"; } .ts-icon.is-ruble-sign-icon::before { content: "\f158"; } .ts-icon.is-face-grin-beam-icon::before { content: "\f582"; } .ts-icon.is-comment-sms-icon::before { content: "\f7cd"; } .ts-icon.is-jedi-icon::before { content: "\f669"; } .ts-icon.is-lock-icon::before { content: "\f023"; } .ts-icon.is-record-vinyl-icon::before { content: "\f8d9"; } .ts-icon.is-searchengin-icon::before { font-family: "IconsBrands"; content: "\f3eb"; } .ts-icon.is-van-shuttle-icon::before { content: "\f5b6"; } .ts-icon.is-atom-icon::before { content: "\f5d2"; } .ts-icon.is-person-military-pointing-icon::before { content: "\e54a"; } .ts-icon.is-tablet-button-icon::before { content: "\f10a"; } .ts-icon.is-cc-discover-icon::before { font-family: "IconsBrands"; content: "\f1f2"; } .ts-icon.is-bug-slash-icon::before { content: "\e490"; } .ts-icon.is-circle-left-icon::before { content: "\f359"; } .ts-icon.is-grunt-icon::before { font-family: "IconsBrands"; content: "\f3ad"; } .ts-icon.is-whmcs-icon::before { font-family: "IconsBrands"; content: "\f40d"; } .ts-icon.is-angle-right-icon::before { content: "\f105"; } .ts-icon.is-volcano-icon::before { content: "\f770"; } .ts-icon.is-fire-flame-simple-icon::before { content: "\f46a"; } .ts-icon.is-screwdriver-icon::before { content: "\f54a"; } .ts-icon.is-bread-slice-icon::before { content: "\f7ec"; } .ts-icon.is-chart-area-icon::before { content: "\f1fe"; } .ts-icon.is-dumbbell-icon::before { content: "\f44b"; } .ts-icon.is-file-word-icon::before { content: "\f1c2"; } .ts-icon.is-hornbill-icon::before { font-family: "IconsBrands"; content: "\f592"; } .ts-icon.is-joint-icon::before { content: "\f595"; } .ts-icon.is-wolf-pack-battalion-icon::before { font-family: "IconsBrands"; content: "\f514"; } .ts-icon.is-2-icon::before { content: "\32"; } .ts-icon.is-trash-can-arrow-up-icon::before { content: "\f82a"; } .ts-icon.is-truck-pickup-icon::before { content: "\f63c"; } .ts-icon.is-bacon-icon::before { content: "\f7e5"; } .ts-icon.is-nimblr-icon::before { font-family: "IconsBrands"; content: "\f5a8"; } .ts-icon.is-mountain-sun-icon::before { content: "\e52f"; } .ts-icon.is-user-plus-icon::before { content: "\f234"; } .ts-icon.is-arrow-down-a-z-icon::before { content: "\f15d"; } .ts-icon.is-crop-icon::before { content: "\f125"; } .ts-icon.is-mosquito-icon::before { content: "\e52b"; } .ts-icon.is-person-through-window-icon::before { content: "\e5a9"; } .ts-icon.is-person-walking-icon::before { content: "\f554"; } .ts-icon.is-slash-icon::before { content: "\f715"; } .ts-icon.is-amazon-icon::before { font-family: "IconsBrands"; content: "\f270"; } .ts-icon.is-border-all-icon::before { content: "\f84c"; } .ts-icon.is-get-pocket-icon::before { font-family: "IconsBrands"; content: "\f265"; } .ts-icon.is-prescription-bottle-medical-icon::before { content: "\f486"; } .ts-icon.is-angles-right-icon::before { content: "\f101"; } .ts-icon.is-chrome-icon::before { font-family: "IconsBrands"; content: "\f268"; } .ts-icon.is-expeditedssl-icon::before { font-family: "IconsBrands"; content: "\f23e"; } .ts-icon.is-backward-step-icon::before { content: "\f048"; } .ts-icon.is-campground-icon::before { content: "\f6bb"; } .ts-icon.is-buffer-icon::before { font-family: "IconsBrands"; content: "\f837"; } .ts-icon.is-circle-arrow-right-icon::before { content: "\f0a9"; } .ts-icon.is-deploydog-icon::before { font-family: "IconsBrands"; content: "\f38e"; } .ts-icon.is-fedex-icon::before { font-family: "IconsBrands"; content: "\f797"; } .ts-icon.is-heading-icon::before { content: "\f1dc"; } .ts-icon.is-mask-icon::before { content: "\f6fa"; } .ts-icon.is-anchor-circle-exclamation-icon::before { content: "\e4ab"; } .ts-icon.is-creative-commons-nc-icon::before { font-family: "IconsBrands"; content: "\f4e8"; } .ts-icon.is-feather-icon::before { content: "\f52d"; } .ts-icon.is-hashtag-icon::before { content: "\23"; } .ts-icon.is-robot-icon::before { content: "\f544"; } .ts-icon.is-street-view-icon::before { content: "\f21d"; } .ts-icon.is-btc-icon::before { font-family: "IconsBrands"; content: "\f15a"; } .ts-icon.is-stumbleupon-icon::before { font-family: "IconsBrands"; content: "\f1a4"; } .ts-icon.is-apple-whole-icon::before { content: "\f5d1"; } .ts-icon.is-calendar-plus-icon::before { content: "\f271"; } .ts-icon.is-face-surprise-icon::before { content: "\f5c2"; } .ts-icon.is-money-bill-trend-up-icon::before { content: "\e529"; } .ts-icon.is-person-walking-arrow-loop-left-icon::before { content: "\e551"; } .ts-icon.is-ranking-star-icon::before { content: "\e561"; } .ts-icon.is-sass-icon::before { font-family: "IconsBrands"; content: "\f41e"; } .ts-icon.is-42-group-icon::before { font-family: "IconsBrands"; content: "\e080"; } .ts-icon.is-train-icon::before { content: "\f238"; } .ts-icon.is-stethoscope-icon::before { content: "\f0f1"; } .ts-icon.is-skype-icon::before { font-family: "IconsBrands"; content: "\f17e"; } .ts-icon.is-hands-holding-child-icon::before { content: "\e4fa"; } .ts-icon.is-list-ul-icon::before { content: "\f0ca"; } .ts-icon.is-rotate-icon::before { content: "\f2f1"; } .ts-icon.is-id-card-clip-icon::before { content: "\f47f"; } .ts-icon.is-folder-icon::before { content: "\f07b"; } .ts-icon.is-copyright-icon::before { content: "\f1f9"; } .ts-icon.is-meta-icon::before { font-family: "IconsBrands"; content: "\e49b"; } .ts-icon.is-democrat-icon::before { content: "\f747"; } .ts-icon.is-bed-icon::before { content: "\f236"; } .ts-icon.is-binoculars-icon::before { content: "\f1e5"; } .ts-icon.is-skull-crossbones-icon::before { content: "\f714"; } .ts-icon.is-stop-icon::before { content: "\f04d"; } .ts-icon.is-tablets-icon::before { content: "\f490"; } .ts-icon.is-trademark-icon::before { content: "\f25c"; } .ts-icon.is-arrows-down-to-line-icon::before { content: "\e4b8"; } .ts-icon.is-info-icon::before { content: "\f129"; } .ts-icon.is-martini-glass-empty-icon::before { content: "\f000"; } .ts-icon.is-medapps-icon::before { font-family: "IconsBrands"; content: "\f3c6"; } .ts-icon.is-nfc-directional-icon::before { font-family: "IconsBrands"; content: "\e530"; } .ts-icon.is-square-full-icon::before { content: "\f45c"; } .ts-icon.is-icicles-icon::before { content: "\f7ad"; } .ts-icon.is-circle-user-icon::before { content: "\f2bd"; } .ts-icon.is-person-falling-burst-icon::before { content: "\e547"; } .ts-icon.is-arrow-right-long-icon::before { content: "\f178"; } .ts-icon.is-file-icon::before { content: "\f15b"; } .ts-icon.is-drum-steelpan-icon::before { content: "\f56a"; } .ts-icon.is-vuejs-icon::before { font-family: "IconsBrands"; content: "\f41f"; } .ts-icon.is-suitcase-icon::before { content: "\f0f2"; } .ts-icon.is-face-grin-hearts-icon::before { content: "\f584"; } .ts-icon.is-gauge-high-icon::before { content: "\f625"; } .ts-icon.is-school-flag-icon::before { content: "\e56e"; } .ts-icon.is-shirt-icon::before { content: "\f553"; } .ts-icon.is-caravan-icon::before { content: "\f8ff"; } .ts-icon.is-calendar-icon::before { content: "\f133"; } .ts-icon.is-smoking-icon::before { content: "\f48d"; } .ts-icon.is-8-icon::before { content: "\38"; } .ts-icon.is-crutch-icon::before { content: "\f7f7"; } .ts-icon.is-guitar-icon::before { content: "\f7a6"; } .ts-icon.is-hand-holding-heart-icon::before { content: "\f4be"; } .ts-icon.is-road-barrier-icon::before { content: "\e562"; } .ts-icon.is-skyatlas-icon::before { font-family: "IconsBrands"; content: "\f216"; } .ts-icon.is-cloud-rain-icon::before { content: "\f73d"; } .ts-icon.is-gg-icon::before { font-family: "IconsBrands"; content: "\f260"; } .ts-icon.is-person-snowboarding-icon::before { content: "\f7ce"; } .ts-icon.is-plus-icon::before { content: "\2b"; } .ts-icon.is-section-icon::before { content: "\e447"; } .ts-icon.is-hands-clapping-icon::before { content: "\e1a8"; } .ts-icon.is-table-list-icon::before { content: "\f00b"; } .ts-icon.is-square-git-icon::before { font-family: "IconsBrands"; content: "\f1d2"; } .ts-icon.is-file-signature-icon::before { content: "\f573"; } .ts-icon.is-plug-circle-minus-icon::before { content: "\e55e"; } .ts-icon.is-square-font-awesome-icon::before { font-family: "IconsBrands"; content: "\e5ad"; } .ts-icon.is-syringe-icon::before { content: "\f48e"; } .ts-icon.is-table-icon::before { content: "\f0ce"; } .ts-icon.is-turkish-lira-sign-icon::before { content: "\e2bb"; } .ts-icon.is-code-compare-icon::before { content: "\e13a"; } .ts-icon.is-location-pin-icon::before { content: "\f041"; } .ts-icon.is-xing-icon::before { font-family: "IconsBrands"; content: "\f168"; } .ts-icon.is-500px-icon::before { font-family: "IconsBrands"; content: "\f26e"; } .ts-icon.is-earth-americas-icon::before { content: "\f57d"; } .ts-icon.is-caret-left-icon::before { content: "\f0d9"; } .ts-icon.is-hanukiah-icon::before { content: "\f6e6"; } .ts-icon.is-khanda-icon::before { content: "\f66d"; } .ts-icon.is-ruler-combined-icon::before { content: "\f546"; } .ts-icon.is-shekel-sign-icon::before { content: "\f20b"; } .ts-icon.is-dice-d6-icon::before { content: "\f6d1"; } .ts-icon.is-house-medical-icon::before { content: "\e3b2"; } .ts-icon.is-face-laugh-squint-icon::before { content: "\f59b"; } .ts-icon.is-down-long-icon::before { content: "\f309"; } .ts-icon.is-crown-icon::before { content: "\f521"; } .ts-icon.is-facebook-f-icon::before { font-family: "IconsBrands"; content: "\f39e"; } .ts-icon.is-brain-icon::before { content: "\f5dc"; } .ts-icon.is-land-mine-on-icon::before { content: "\e51b"; } .ts-icon.is-viacoin-icon::before { font-family: "IconsBrands"; content: "\f237"; } .ts-icon.is-faucet-drip-icon::before { content: "\e006"; } .ts-icon.is-building-circle-xmark-icon::before { content: "\e4d4"; } .ts-icon.is-cloud-sun-rain-icon::before { content: "\f743"; } .ts-icon.is-handshake-slash-icon::before { content: "\e060"; } .ts-icon.is-5-icon::before { content: "\35"; } .ts-icon.is-ticket-icon::before { content: "\f145"; } .ts-icon.is-v-icon::before { content: "\56"; } .ts-icon.is-dove-icon::before { content: "\f4ba"; } .ts-icon.is-road-lock-icon::before { content: "\e567"; } .ts-icon.is-css3-icon::before { font-family: "IconsBrands"; content: "\f13c"; } .ts-icon.is-microphone-icon::before { content: "\f130"; } .ts-icon.is-shield-heart-icon::before { content: "\e574"; } .ts-icon.is-ruler-horizontal-icon::before { content: "\f547"; } .ts-icon.is-gauge-simple-icon::before { content: "\f629"; } .ts-icon.is-vector-square-icon::before { content: "\f5cb"; } .ts-icon.is-xmark-icon::before { content: "\f00d"; } .ts-icon.is-apple-icon::before { font-family: "IconsBrands"; content: "\f179"; } .ts-icon.is-scale-balanced-icon::before { content: "\f24e"; } .ts-icon.is-bluetooth-b-icon::before { font-family: "IconsBrands"; content: "\f294"; } .ts-icon.is-book-quran-icon::before { content: "\f687"; } .ts-icon.is-screwdriver-wrench-icon::before { content: "\f7d9"; } .ts-icon.is-square-xing-icon::before { font-family: "IconsBrands"; content: "\f169"; } .ts-icon.is-bars-icon::before { content: "\f0c9"; } .ts-icon.is-heart-pulse-icon::before { content: "\f21e"; } .ts-icon.is-hippo-icon::before { content: "\f6ed"; } .ts-icon.is-naira-sign-icon::before { content: "\e1f6"; } .ts-icon.is-restroom-icon::before { content: "\f7bd"; } .ts-icon.is-asymmetrik-icon::before { font-family: "IconsBrands"; content: "\f372"; } .ts-icon.is-circle-plus-icon::before { content: "\f055"; } .ts-icon.is-house-icon::before { content: "\f015"; } .ts-icon.is-person-dress-burst-icon::before { content: "\e544"; } .ts-icon.is-wix-icon::before { font-family: "IconsBrands"; content: "\f5cf"; } .ts-icon.is-bag-shopping-icon::before { content: "\f290"; } .ts-icon.is-couch-icon::before { content: "\f4b8"; } .ts-icon.is-empire-icon::before { font-family: "IconsBrands"; content: "\f1d1"; } .ts-icon.is-guarani-sign-icon::before { content: "\e19a"; } .ts-icon.is-truck-moving-icon::before { content: "\f4df"; } .ts-icon.is-circle-nodes-icon::before { content: "\e4e2"; } .ts-icon.is-building-wheat-icon::before { content: "\e4db"; } .ts-icon.is-circle-notch-icon::before { content: "\f1ce"; } .ts-icon.is-voicemail-icon::before { content: "\f897"; } .ts-icon.is-baht-sign-icon::before { content: "\e0ac"; } .ts-icon.is-square-font-awesome-stroke-icon::before { font-family: "IconsBrands"; content: "\f35c"; } .ts-icon.is-bimobject-icon::before { font-family: "IconsBrands"; content: "\f378"; } .ts-icon.is-table-tennis-paddle-ball-icon::before { content: "\f45d"; } .ts-icon.is-square-envelope-icon::before { content: "\f199"; } /* ========================================================================== Variables ========================================================================== */ @font-face { font-family: "Icons"; src: url("fonts/icons/fa-solid-900.woff2") format("woff2"), url("fonts/icons/fa-solid-900.ttf") format("truetype"); font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-transform: none; } @font-face { font-family: "IconsBrands"; src: url("fonts/icons/fa-brands-400.woff2") format("woff2"), url("fonts/icons/fa-brands-400.ttf") format("truetype"); font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-transform: none; } @font-face { font-family: "IconsRegular"; src: url("fonts/icons/fa-regular-400.woff2") format("woff2"), url("fonts/icons/fa-regular-400.ttf") format("truetype"); font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-transform: none; } @keyframes ts-icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ts-icon { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-icon { font-family: "Icons"; font-weight: normal; font-style: normal; display: inline; text-decoration: none; text-align: center; width: 1.18em; -webkit-font-smoothing: antialiased; backface-visibility: hidden; color: var(--accent-color, inherit); } .ts-icon:before { display: inline-block; /** Remove text-decoration artifacts */ } /* ========================================================================== Variations ========================================================================== */ /** * Regular */ .ts-icon.is-regular { font-family: "IconsRegular"; } /** * Circular */ .ts-icon.is-circular, .ts-icon.is-rounded { display: inline-flex; align-items: center; justify-content: center; border-radius: 500em !important; line-height: 1 !important; box-sizing: border-box; padding: 0.5em 0.5em !important; box-shadow: 0em 0em 0em 0.1em var(--ts-gray-300) inset; width: 2em !important; height: 2em !important; } .ts-icon.is-rounded { border-radius: var(--ts-border-radius-element) !important; } /** * Spinning */ .ts-icon.is-spinning { display: inline-block; animation: ts-icon-spin 2s linear infinite; } /** * Negative */ .ts-icon.is-negative { color: var(--ts-negative-500); } /** * Disabled */ .ts-icon.is-disabled { opacity: 0.25; pointer-events: none; } /** * Squared */ .ts-icon.is-squared { background: var(--ts-gray-100); border-radius: var(--ts-border-radius-element); font-size: 1.3em; width: 3rem; height: 3rem; align-items: center; justify-content: center; display: inline-flex; } /** * Secondary */ .ts-icon.is-secondary { color: var(--ts-gray-500); } /** * Sizes */ .ts-icon.is-small { font-size: var(--ts-font-size-13px); } .ts-icon.is-large { font-size: var(--ts-font-size-18px); } .ts-icon.is-big { font-size: var(--ts-font-size-24px); } .ts-icon.is-huge { font-size: var(--ts-font-size-30px); } /** * Heading */ .ts-icon.is-heading { line-height: 1; font-size: var(--ts-font-size-75px); } /** * Spaced */ .ts-icon.is-spaced { margin-left: 0.45rem; margin-right: 0.45rem; } .ts-icon.is-start-spaced { margin-left: 0.45rem; } .ts-icon.is-end-spaced { margin-right: 0.45rem; } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-divider { border-top: 1px solid var(--ts-gray-300); } /* ========================================================================== Variations ========================================================================== */ /** * Vertical */ .ts-divider.is-vertical { border-top: 0; border-left: 1px solid var(--ts-gray-300); } /** * Section */ .ts-divider.is-section { margin: 1rem 0; } /** * Text */ .ts-divider:is(.is-center-text, .is-start-text, .is-end-text) { display: flex; align-items: center; border-top: 0; gap: 1rem; color: var(--ts-gray-800); } .ts-divider:is(.is-center-text, .is-start-text, .is-end-text)::before, .ts-divider:is(.is-center-text, .is-start-text, .is-end-text)::after { content: ""; height: 1px; background-color: var(--ts-gray-300); flex-grow: 1; } .ts-divider.is-start-text::before { display: none; } .ts-divider.is-end-text::after { display: none; } /* ========================================================================== Variables ========================================================================== */ .ts-input { --border-radius: var(--ts-border-radius-element); --height: var(--ts-input-height-medium); } /* ========================================================================== Base ========================================================================== */ .ts-input { position: relative; display: flex; width: 100%; } /* ========================================================================== Structure ========================================================================== */ .ts-input input { padding: 0 1rem; height: var(--height); } .ts-input input, .ts-input textarea { margin: 0; width: 100%; overflow: visible; font: inherit; outline: none; box-sizing: border-box; resize: none; font-size: var(--ts-font-size-14px); line-height: 1.5; color: var(--ts-gray-800); background: var(--ts-gray-50); -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; appearance: none; -webkit-appearance: none; } .ts-input textarea { padding: 0.467rem 1rem; } .ts-input input:focus, .ts-input textarea:focus { outline: 0; } /** * Input */ .ts-input input, .ts-input textarea { border-radius: var(--border-radius); border: 1px solid var(--ts-gray-300); } .ts-input input:focus, .ts-input textarea:focus { border-color: var(--ts-primary-600); } .ts-input input::-webkit-inner-spin-button, .ts-input input::-webkit-calendar-picker-indicator { opacity: 0.4; line-height: 1; } /** * Color */ .ts-input input[type="color"] { position: relative; padding: 0; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; width: auto; } .ts-input input[type="color"]::-webkit-color-swatch { padding: 0; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border: 0; border-radius: var(--border-radius); width: auto; height: auto; } .ts-input input[type="color"]::-moz-color-swatch { padding: 0; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border: 0; border-radius: var(--border-radius); width: auto; height: auto; } /* ========================================================================== Variations ========================================================================== */ /** * Solid */ .ts-input.is-solid input, .ts-input.is-solid textarea { border-radius: var(--border-radius); border: 1px solid transparent; background: var(--ts-gray-100); } .ts-input.is-solid input:focus, .ts-input.is-solid textarea:focus { background: var(--ts-gray-50); border: 1px solid var(--ts-gray-300); } /** * Underlined */ .ts-input.is-underlined input, .ts-input.is-underlined textarea { border-radius: var(--border-radius) var(--border-radius) 0 0; border: 2px solid transparent; background: var(--ts-gray-100); border-bottom: 2px solid var(--ts-gray-400); } .ts-input.is-underlined input:focus, .ts-input.is-underlined textarea:focus { border-bottom-color: var(--ts-primary-600); } /** * Resizable */ .ts-input.is-resizable input, .ts-input.is-resizable textarea { min-height: 5rem; resize: vertical; } /** * Circular */ .ts-input.is-circular { --border-radius: 100rem; } /** * Basic */ .ts-input.is-basic input { padding: 0; border: 0; background: transparent; } /** * Labeled */ .ts-input:is(.is-start-labeled, .is-end-labeled, .is-labeled) :is(.input, .label) { border-radius: var(--border-radius); } .ts-input:is(.is-start-labeled, .is-end-labeled, .is-labeled) .label { line-height: 1; display: flex; align-items: center; justify-content: center; background: var(--ts-gray-100); padding: 0 0.6rem; font-size: var(--ts-font-size-14px); color: var(--ts-gray-800); border: 1px solid var(--ts-gray-300); } .ts-input:is(.is-start-labeled, .is-labeled) .label { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; } .ts-input:is(.is-start-labeled, .is-labeled) input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ts-input:is(.is-end-labeled, .is-labeled) .label { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; } .ts-input:is(.is-end-labeled, .is-labeled) input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ts-input.is-labeled .label:first-child { border-left-width: 1px; border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .ts-input.is-labeled .label:last-child { border-right-width: 1px; border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } /** Underlined */ .ts-input:is(.is-start-labeled, .is-labeled, .is-end-labeled).is-underlined .label { border: 0; border-bottom: 2px solid var(--ts-gray-400); background: var(--ts-gray-200); } .ts-input:is(.is-start-labeled, .is-labeled).is-underlined .label { border-bottom-left-radius: 0; } .ts-input:is(.is-end-labeled, .is-labeled).is-underlined .label { border-bottom-right-radius: 0; } .ts-input:is(.is-start-labeled, .is-labeled).is-underlined input { border-left: 0; } .ts-input:is(.is-end-labeled, .is-labeled).is-underlined input { border-right: 0; } /** Solid */ .ts-input:is(.is-start-labeled, .is-labeled, .is-end-labeled).is-solid .label { border-color: transparent; background: var(--ts-gray-200); } .ts-input:is(.is-start-labeled, .is-labeled, .is-end-labeled).is-solid:focus-within .label { border-color: var(--ts-gray-300); } /** * Action Icon */ .ts-input.is-end-action-icon :where(a, button).ts-icon { position: absolute; top: 0; bottom: 0; display: flex !important; align-items: center; justify-content: center; color: var(--ts-gray-800); z-index: 1; } .ts-input.is-end-action-icon :where(a, button).ts-icon { padding: 0 1.5rem; border-radius: var(--border-radius); background: var(--ts-gray-100); top: 50%; transform: translateY(-50%); right: 0.35rem; padding: 0; aspect-ratio: 1.1 / 1; height: 75%; width: auto; font-size: 1em; } .ts-input.is-end-action-icon :where(a, button).ts-icon:hover { opacity: 0.9; } .ts-input.is-end-action-icon input { padding-right: 3rem; box-sizing: border-box; } /** * Icon */ .ts-input.is-start-icon .ts-icon:not(a):not(button), .ts-input.is-end-icon .ts-icon:not(a):not(button), .ts-input.is-icon .ts-icon:not(a):not(button) { position: absolute; top: 0; bottom: 0; display: flex !important; align-items: center; justify-content: center; color: var(--ts-gray-800); z-index: 1; } .ts-input.is-start-icon .ts-icon:not(a):not(button), .ts-input.is-icon .ts-icon:not(a):not(button):first-child { left: 1rem; } .ts-input.is-start-icon input, .ts-input.is-icon input { padding-left: 2.8rem; box-sizing: border-box; } .ts-input.is-end-icon .ts-icon:not(a):not(button), .ts-input.is-icon .ts-icon:not(a):not(button):last-child { right: 1rem; } .ts-input.is-end-icon input, .ts-input.is-icon input { padding-right: 2.8rem; box-sizing: border-box; } /** * Negative */ .ts-input.is-negative :is(input, textarea) { color: var(--ts-negative-600); border-color: var(--ts-negative-400); font-weight: 500; } .ts-input.is-negative .label { border-color: var(--ts-negative-400); } /** Solid */ .ts-input.is-negative.is-solid:is(.is-start-labeled, .is-labeled, .is-end-labeled) .label { border-color: var(--ts-negative-400); } .ts-input.is-negative.is-solid input:focus, .ts-input.is-negative.is-solid textarea:focus { background: var(--ts-gray-100); border: 1px solid var(--ts-negative-400); } /** Underlined */ .ts-input.is-negative.is-underlined :is(.label, input, textarea) { border-color: transparent; border-bottom-color: var(--ts-negative-400); } /** * Disabled */ .ts-input:has(:disabled), fieldset:disabled .ts-input { pointer-events: none; opacity: 0.5; user-select: none; } .ts-input.is-underlined:has(:disabled), fieldset:disabled .ts-input.is-underlined { border-bottom-color: var(--ts-gray-300); } /** * Fluid */ .ts-input.is-fluid { display: flex; width: 100%; } .ts-input.is-fluid input, .ts-input.is-fluid textarea { width: 100%; } /** * Dense */ .ts-input.is-dense input { --height: var(--ts-input-height-medium-dense); } .ts-input.is-dense.is-small input { --height: var(--ts-input-height-small-dense); } .ts-input.is-dense.is-large input { --height: var(--ts-input-height-large-dense); } /** * Relaxed */ .ts-input.is-relaxed input { --height: var(--ts-input-height-large); } /** * Sizes */ .ts-input.is-small input { --height: var(--ts-input-height-small); } .ts-input.is-large input { --height: var(--ts-input-height-large); } .ts-input.is-small :is(input, textarea, .ts-icon) { font-size: var(--ts-font-size-13px); } .ts-input.is-large :is(input, textarea, .ts-icon) { font-size: var(--ts-font-size-17px); } /* ========================================================================== Data Input ========================================================================== */ .ts-taginput { --border-radius: 0.4rem; --height: var(--ts-input-height-medium); } .ts-taginput { padding: 0.25rem 1rem; min-height: var(--height); border-radius: var(--border-radius); border: 1px solid var(--ts-gray-300); align-items: center; display: flex; cursor: text; } .ts-taginput.is-focused { border-color: var(--ts-primary-600); } .ts-taginput .content { align-items: center; display: flex; } .ts-taginput .append { margin: 0; overflow: visible; font: inherit; outline: none; /* border: none;*/ box-sizing: border-box; resize: none; font-size: var(--ts-font-size-14px); line-height: 1.5; color: var(--ts-gray-800); background: var(--ts-gray-50); -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; appearance: none; -webkit-appearance: none; width: 10px; } .ts-taginput input:not(.append) { display: none; } .ts-input[data-tocas="input-chips"] { border: 1px solid var(--ts-gray-300); border-radius: var(--border-radius); min-height: var(--height); padding: 0.25rem 1rem; background: var(--ts-gray-50); box-sizing: border-box; color: var(--ts-gray-800); font: inherit; font-size: var(--ts-font-size-14px); outline: none; overflow: visible; resize: none; width: 100%; cursor: text; } .ts-input[data-tocas="input-chips"] input:not(.append) { display: none; } .ts-input[data-tocas="input-chips"] .content { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .ts-input[data-tocas="input-chips"] .content .ts-chip { cursor: default; user-select: none; } .ts-input[data-tocas="input-chips"] input.append { border: 0; height: auto; line-height: 1.7; padding: 0; border-radius: 0; width: 1px; } /* ========================================================================== Variables ========================================================================== */ .ts-file { --height: var(--ts-input-height-medium); --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-file { display: flex; width: 100%; } /* ========================================================================== Structure ========================================================================== */ .ts-file input { height: var(--height); line-height: calc(var(--height) - 1px); font-size: var(--ts-font-size-14px); color: var(--ts-gray-800); padding: 0 1rem; padding-left: 0.6rem; background: var(--ts-gray-50); border: 1px solid var(--ts-gray-300); border-radius: var(--ts-border-radius-element); width: 100%; } .ts-file input::file-selector-button, .ts-file input::-webkit-file-upload-button { border: 0; min-width: 75px; /** Firefox */ font-family: "Noto Sans TC", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", "Microsoft JhengHei", wf_SegoeUI, "Segoe UI", Segoe, "Segoe WP", Tahoma, Verdana, Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", 微軟正黑體, "LiHei Pro", "WenQuanYi Micro Hei", "Droid Sans Fallback", "AR PL UMing TW", Roboto, "Hiragino Maru Gothic ProN", メイリオ, "ヒラギノ丸ゴ ProN W4", Meiryo, "Droid Sans", sans-serif; font-size: var(--ts-relative-small); line-height: 1.5; font-weight: 500; text-decoration: none; display: inline-block; text-align: center; padding: 0.2em 0.5rem; border-radius: var(--ts-border-radius-secondary); margin-right: 0.5rem; color: var(--accent-foreground-color, var(--ts-gray-800)); background: var(--accent-color, var(--ts-gray-200)); } /* ========================================================================== Variations ========================================================================== */ /** * Underlined */ .ts-file.is-underlined input { border-radius: var(--ts-border-radius-element) var(--ts-border-radius-element) 0 0; border: 2px solid transparent; background: var(--ts-gray-100); border-bottom: 2px solid var(--ts-gray-400); } /** * Solid */ .ts-file.is-solid input { background: var(--ts-gray-100); border-color: transparent; } .ts-file:is(.is-solid, .is-underlined) input::file-selector-button, .ts-file:is(.is-solid, .is-underlined) input::-webkit-file-upload-button { background: var(--accent-color, var(--ts-gray-300)); } /** * Disabled */ .ts-file:has(:disabled), fieldset:disabled .ts-file { pointer-events: none; opacity: 0.5; user-select: none; } /** * Negative */ .ts-file.is-negative input { border-color: var(--ts-negative-400); color: var(--ts-negative-600); font-weight: 500; } .ts-file.is-negative.is-underlined input { border-color: transparent; border-bottom-color: var(--ts-negative-400); } /** * Sizes */ .ts-file.is-small input { --height: var(--ts-input-height-small); } .ts-file.is-large input { --height: var(--ts-input-height-large); } .ts-file.is-small :is(input, input::file-selector-button, input::-webkit-file-upload-button) { font-size: var(--ts-font-size-13px); } .ts-file.is-large :is(input, input::file-selector-button, input::-webkit-file-upload-button) { font-size: var(--ts-font-size-17px); } /** * Dense */ .ts-file.is-dense input { --height: var(--ts-input-height-medium-dense); } .ts-file.is-dense input::file-selector-button, .ts-file.is-dense input::-webkit-file-upload-button { padding-top: 0.15rem; padding-bottom: 0.15rem; } .ts-file.is-small.is-dense input { --height: var(--ts-input-height-small-dense); } .ts-file.is-large.is-dense input { --height: var(--ts-input-height-large-dense); } /* ========================================================================== Variables ========================================================================== */ .ts-notice { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-notice { background: var(--accent-color, var(--ts-gray-800)); border: 1px solid transparent; color: var(--accent-foreground-color, var(--ts-gray-50)); display: block; padding: 0.45rem 1rem; font-size: var(--ts-font-size-14px); border-radius: var(--ts-border-radius-element); } /* ========================================================================== Structure ========================================================================== */ .ts-notice .title { background: var(--accent-foreground-color, var(--ts-gray-50)); color: var(--accent-color, var(--ts-gray-800)); border-radius: var(--ts-border-radius-secondary); padding: 0.3rem 0.5rem; margin-right: 0.6rem; margin-top: 0.05rem; font-size: var(--ts-font-size-14px); text-align: justify; line-height: 1; white-space: nowrap; display: inline-block; } .ts-notice .content { display: inline; } .ts-notice a { text-decoration: underline; } /* ========================================================================== Variations ========================================================================== */ /** * Negative */ .ts-notice.is-negative { background: var(--ts-negative-500); color: var(--ts-white); } .ts-notice.is-negative .title { background: var(--ts-white); color: var(--ts-negative-600); } /** * Outlined */ .ts-notice.is-outlined { background: transparent; border-color: var(--ts-gray-300); color: var(--accent-color, var(--ts-gray-800)); } .ts-notice.is-outlined .title { background: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); } .ts-notice.is-outlined.is-negative .title { background: var(--ts-negative-500); color: var(--ts-gray-50); } /** * Sizes */ .ts-notice.is-small, .ts-notice.is-small .title { font-size: var(--ts-font-size-13px); } .ts-notice.is-large, .ts-notice.is-large .title { font-size: var(--ts-font-size-17px); } /** * Dense */ .ts-notice.is-dense { padding-top: 0.25rem; padding-bottom: 0.25rem; } .ts-notice.is-dense .title { padding-top: 0.25rem; padding-bottom: 0.25rem; } /* ========================================================================== Variables ========================================================================== */ .ts-checkbox { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-checkbox { display: inline-flex; align-items: flex-start; cursor: pointer; user-select: none; color: inherit; vertical-align: middle; margin-top: -3px; } /* ========================================================================== Structure ========================================================================== */ .ts-checkbox input { position: relative; border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; border-radius: 0; outline: none; box-sizing: border-box; user-select: none; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; appearance: none; -webkit-appearance: none; } .ts-checkbox input { min-height: 1.15rem; min-width: 1.15rem; margin-top: 5px; border-radius: var(--ts-border-radius-secondary); border: 1px solid var(--ts-gray-200); background: var(--ts-gray-200); margin-right: 0.5rem; cursor: pointer; } .ts-checkbox input:checked { background: var(--accent-color, var(--ts-primary-700)); border-color: var(--accent-color, var(--ts-primary-700)); } .ts-checkbox input:focus { outline: 0; } .ts-checkbox input::after { position: absolute; display: none; content: "\f00c"; font-family: "Icons"; font-weight: normal; font-style: normal; text-decoration: inherit; text-align: center; left: 0; right: 0; bottom: 0; top: 0; transform: scale(0.8); z-index: 1; align-items: center; justify-content: center; -webkit-font-smoothing: antialiased; backface-visibility: hidden; font-size: 1rem; color: var(--accent-foreground-color, var(--ts-white)); } .ts-checkbox input:checked::after { display: flex; } /* ========================================================================== Variations ========================================================================== */ /** * Disabled */ .ts-checkbox:has(:disabled), fieldset:disabled .ts-checkbox { pointer-events: none; opacity: 0.5; user-select: none; } .ts-checkbox input:disabled, fieldset:disabled .ts-checkbox input { background: var(--ts-gray-200); border-color: var(--ts-gray-200); } /** * Solo */ .ts-checkbox.is-solo input { margin-right: 0; margin-top: 0; } /** * Negative */ .ts-checkbox.is-negative input { border-color: var(--ts-negative-600); border-width: 2px; } /** * Indeterminate */ .ts-checkbox.is-indeterminate input::after { content: "\f068"; } /** * Sizes */ .ts-checkbox.is-small input { min-height: 0.95rem; min-width: 0.95rem; } .ts-checkbox.is-small input::after { font-size: var(--ts-font-size-12px); } .ts-checkbox.is-small { font-size: var(--ts-font-size-14px); } .ts-checkbox.is-large input { min-height: 1.3rem; min-width: 1.3rem; } .ts-checkbox.is-large { font-size: var(--ts-font-size-17px); } .ts-checkbox.is-large input::after { font-size: var(--ts-font-size-16px); } /* ========================================================================== Variables ========================================================================== */ .ts-radio { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-radio { display: inline-flex; align-items: flex-start; cursor: pointer; user-select: none; color: inherit; vertical-align: middle; margin-top: -3px; } /* ========================================================================== Structure ========================================================================== */ .ts-radio input { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; border-radius: 0; outline: none; box-sizing: border-box; user-select: none; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; appearance: none; -webkit-appearance: none; } .ts-radio input { position: relative; min-height: 1.15rem; min-width: 1.15rem; margin-top: 5px; border-radius: 100rem; border: 1px solid var(--ts-gray-200); background: var(--ts-gray-200); margin-right: 0.5rem; cursor: pointer; } .ts-radio input:checked { background: var(--accent-color, var(--ts-primary-700)); background: var(--accent-color, var(--ts-primary-700)); } .ts-radio input:focus { outline: 0; } .ts-radio input::after { position: absolute; display: none; content: "\f111"; font-family: "Icons"; font-weight: normal; font-style: normal; text-decoration: inherit; text-align: center; left: 0; right: 0; bottom: 0; top: 0; transform: scale(0.5); z-index: 1; align-items: center; justify-content: center; -webkit-font-smoothing: antialiased; backface-visibility: hidden; font-size: 1rem; color: var(--accent-foreground-color, var(--ts-white)); } .ts-radio input:checked::after { display: flex; } /* ========================================================================== Variations ========================================================================== */ /** * Disabled */ .ts-radio:has(:disabled), fieldset:disabled .ts-radio { pointer-events: none; opacity: 0.5; user-select: none; } .ts-radio input:disabled, fieldset:disabled .ts-radio input { background: var(--ts-gray-200); border-color: var(--ts-gray-200); } /** * Solo */ .ts-radio.is-solo input { margin-right: 0; margin-top: 0; } /** * Negative */ .ts-radio.is-negative input { border-color: var(--ts-negative-600); border-width: 2px; } /** * Sizes */ .ts-radio.is-small input { min-height: 0.95rem; min-width: 0.95rem; } .ts-radio.is-small input::after { font-size: var(--ts-font-size-14px); } .ts-radio.is-small { font-size: var(--ts-font-size-14px); } .ts-radio.is-large input { min-height: 1.3rem; min-width: 1.3rem; } .ts-radio.is-large { font-size: var(--ts-font-size-17px); } .ts-radio.is-large input::after { font-size: var(--ts-font-size-18px); } /* ========================================================================== Variables ========================================================================== */ @keyframes ts-progress-active { from { opacity: 0.8; width: 0%; } to { opacity: 0; width: 100%; } } @keyframes ts-progress-animation { from { background-position: 0px; } to { background-position: 40px; } } @keyframes ts-progress-indeterminate { 0% { margin-left: -10%; margin-right: 100%; } 40% { margin-left: 25%; margin-right: 0%; } 100% { margin-left: 100%; margin-right: 0; } } .ts-progress { --accent-color: initial; --accent-foreground-color: initial; } .ts-progress .bar { --value: 0; } /* ========================================================================== Base ========================================================================== */ .ts-progress { position: relative; display: flex; border-radius: var(--ts-border-radius-element); background: var(--ts-gray-300); overflow: hidden; min-height: 1.6rem; line-height: 1; } .ts-progress .bar { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; background: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); padding: 0rem 0.5rem; font-size: var(--ts-font-size-14px); border-radius: var(--ts-border-radius-element); min-width: fit-content; text-align: right; transition: width 1s ease-out; width: calc(var(--value) * 1%); z-index: 1; } /* ========================================================================== Variations ========================================================================== */ /** * Active */ .ts-progress.is-active .bar::after { position: absolute; top: 0; bottom: 0; left: 0; content: ""; background: #5a5a5a; border-radius: var(--ts-border-radius-element); animation: ts-progress-active 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } /** * Empty */ .ts-progress.is-empty .bar { background: transparent; color: var(--ts-gray-800); } /** * Processing */ .ts-progress.is-processing { background-size: 40px 40px; background-image: linear-gradient(135deg, #9e9e9e 25%, #949494 25%, #949494 50%, #9e9e9e 50%, #9e9e9e 75%, #949494 75%, #949494 100%); animation: ts-progress-animation 2s linear 0s infinite; } /** * Indeterminate */ .ts-progress.is-indeterminate .bar { animation: ts-progress-indeterminate 2s cubic-bezier(0.4, 0, 0.2, 1) 0s infinite; width: 100% !important; min-width: 0; } .ts-progress.is-indeterminate .bar .text { visibility: hidden; } /** * Queried */ .ts-progress.is-queried .bar { animation: ts-progress-indeterminate 2s cubic-bezier(0.4, 0, 0.2, 1) 0s infinite; animation-direction: reverse; width: 100% !important; min-width: 0; } .ts-progress.is-queried .bar .text { visibility: hidden; } /** * Secondary */ .ts-progress .bar.is-secondary { position: absolute; top: 0; bottom: 0; z-index: 0; background: var(--ts-gray-400); color: var(--ts-gray-800); } /** * Sizes */ .ts-progress.is-tiny { min-height: 0.7rem; } .ts-progress.is-tiny .bar .text { font-size: 0.8em; } .ts-progress.is-small { min-height: 1.2rem; } .ts-progress.is-small .bar .text { font-size: 0.85em; } .ts-progress.is-large .bar { min-height: calc(1.75rem + 1.75rem / 4); } /* ========================================================================== Variables ========================================================================== */ .ts-badge { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-badge { font-size: var(--ts-font-size-14px); border-radius: 100rem; padding: 0.225rem 0.5rem; line-height: 1; border: 1px solid transparent; background: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); font-weight: 400; display: inline-block; white-space: nowrap; text-decoration: none; vertical-align: middle; align-self: center; } /* ========================================================================== Variations ========================================================================== */ /** * Secondary */ .ts-badge.is-secondary { background: var(--ts-gray-200); color: var(--accent-color, var(--ts-gray-800)); } /** * Outlined */ .ts-badge.is-outlined { background: transparent; border-color: var(--ts-gray-300); color: var(--accent-color, var(--ts-gray-800)); } /** * Negative */ .ts-badge.is-negative { background: var(--ts-negative-500); color: var(--ts-white); } .ts-badge.is-negative.is-outlined { background: transparent; border-color: var(--ts-negative-500); color: var(--ts-negative-700); } /** * Sizes */ .ts-badge.is-small { font-size: var(--ts-font-size-12px); } .ts-badge.is-large { font-size: var(--ts-font-size-16px); } /** * Dense */ .ts-badge.is-dense { padding-top: 0.125rem; padding-bottom: 0.125rem; } /** * Spaced */ .ts-badge.is-spaced { margin-left: 0.45rem; margin-right: 0.45rem; } .ts-badge.is-start-spaced { margin-left: 0.45rem; } .ts-badge.is-end-spaced { margin-right: 0.45rem; } /* ========================================================================== Variables ========================================================================== */ .ts-pagination { --accent-color: initial; --accent-foreground-color: initial; --horizontal-padding-multiplier: 1; } /* ========================================================================== Base ========================================================================== */ .ts-pagination { background: var(--ts-gray-200); display: inline-flex; padding: 0.25rem 0.5rem; border-radius: 100rem; color: var(--ts-gray-800); border: 1px solid var(--ts-gray-200); gap: calc(0.15rem * var(--horizontal-padding-multiplier)); } /* ========================================================================== Structure ========================================================================== */ .ts-pagination .item { border-radius: 100rem; padding: 0.5rem 0.7rem; line-height: 1; color: var(--ts-gray-800); cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } /* ========================================================================== Variations ========================================================================== */ /** * Active */ .ts-pagination .item.is-active { background: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); pointer-events: none; } /** * Relaxed */ .ts-pagination.is-relaxed { --horizontal-padding-multiplier: 2; } /** * Skipped */ .ts-pagination .item.is-skipped { padding: 0.5rem 0rem; color: var(--ts-gray-600); pointer-events: none; } .ts-pagination .item.is-skipped::after { display: inline-block; content: "..."; } /** * Fluid */ .ts-pagination.is-fluid { display: flex; } /** * Disabled */ .ts-pagination .item.is-disabled, .ts-pagination .item:disabled { opacity: 0.5; pointer-events: none; user-select: none; } /** * Aligns */ /*.ts-pagination.is-end-aligned { margin-left: auto; }*/ /** * Next & Back */ .ts-pagination .item.is-back, .ts-pagination .item.is-next, .ts-pagination .item.is-first, .ts-pagination .item.is-last { font-family: "Icons"; font-weight: normal; font-style: normal; text-decoration: inherit; text-align: center; -webkit-font-smoothing: antialiased; backface-visibility: hidden; padding-top: 0.5rem; padding-bottom: 0.5rem; } .ts-pagination .item.is-back::before, .ts-pagination .item.is-next::after, .ts-pagination .item.is-first::before, .ts-pagination .item.is-last::after { font-size: 13px; } .ts-pagination .item.is-back::before { content: "\f053"; } .ts-pagination .item.is-next { margin-left: auto; } .ts-pagination .item.is-next::after { content: "\f054"; } .ts-pagination .item.is-first::before { content: "\f048"; } .ts-pagination .item.is-last::after { content: "\f051"; } /** * Secondary */ .ts-pagination.is-secondary { padding: 0; background: transparent; border-color: transparent; } /** * Outlined */ .ts-pagination.is-outlined { padding: 0; background: transparent; border-color: transparent; gap: calc(0.45rem * var(--horizontal-padding-multiplier)); } .ts-pagination.is-outlined .item { border: 1px solid var(--ts-gray-300); } .ts-pagination.is-outlined .item:is(.is-back, .is-next, .is-first, .is-last, .is-skipped) { border: 0; } .ts-pagination.is-outlined .item.is-active { background: inherit; color: inherit; font-weight: 500; border-color: transparent; } /** * Sizes */ .ts-pagination.is-small { font-size: var(--ts-font-size-13px); } .ts-pagination.is-large { font-size: var(--ts-font-size-17px); } /** * Dense */ .ts-pagination.is-dense { padding-top: 0.15rem; padding-bottom: 0.15rem; } .ts-pagination.is-dense .item { padding-top: 0.3rem; padding-bottom: 0.3rem; } /* ========================================================================== Variables ========================================================================== */ .ts-select { --object-distance-vertical: 0.4rem; --object-distance-horizontal: 0.8rem; --height: var(--ts-input-height-medium); } /* ========================================================================== Base ========================================================================== */ .ts-select { position: relative; display: inline-flex; background: var(--ts-gray-50); border: 1px solid var(--ts-gray-300); border-radius: var(--ts-border-radius-element); cursor: pointer; height: var(--height); } /* ========================================================================== Structure ========================================================================== */ .ts-select select { border: none; margin: 0; background: inherit; font: inherit; outline: none; box-sizing: border-box; user-select: none; border-radius: var(--ts-border-radius-element); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; appearance: none; -webkit-appearance: none; } .ts-select select:focus { outline: 0; } .ts-select select, .ts-select .content { line-height: 1.5; font-size: var(--ts-font-size-14px); color: var(--ts-gray-800); padding: 0 1rem; padding-right: 2.5rem; width: 100%; cursor: pointer; } .ts-select .content { user-select: none; display: flex; gap: var(--object-distance-vertical) var(--object-distance-horizontal); align-items: center; overflow: hidden; } .ts-select .content, .ts-select .content * { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; flex-shrink: 0; } .ts-select .content .ts-icon { font-size: 1.1em; } .ts-select select option { background: inherit; } .ts-select::after { pointer-events: none; position: absolute; top: 0; right: 1rem; bottom: 0; display: flex; align-items: center; justify-content: center; color: var(--ts-gray-600); font-family: "Icons"; font-weight: normal; font-style: normal; text-decoration: inherit; text-align: center; width: 1.18em; -webkit-font-smoothing: antialiased; backface-visibility: hidden; content: "\f078"; font-size: 13px; } /* ========================================================================== Variations ========================================================================== */ /** * Relaxed */ .ts-select.is-relaxed { --height: var(--ts-input-height-large); } /** * Multiple */ .ts-select:has(select[multiple]) { height: auto; } .ts-select:has(select[multiple])::after { content: none; } .ts-select select[multiple] { padding: 0.5rem 0.5rem; overflow-y: auto; } .ts-select select[multiple] option { border-radius: var(--ts-border-radius-element); padding: 0.3rem 0.5rem; margin: 0.1rem 0; } .ts-select select[multiple] option:checked { background: var(--ts-primary-700); color: var(--ts-white); } /** * Solid */ .ts-select.is-solid { background: var(--ts-gray-100); border-color: transparent; } /** Focus */ .ts-select:focus-within { border-color: var(--ts-primary-600); } /** * Underlined */ .ts-select.is-underlined { border-radius: var(--ts-border-radius-element) var(--ts-border-radius-element) 0 0; border: 2px solid transparent; background: var(--ts-gray-100); border-bottom: 2px solid var(--ts-gray-400); } .ts-select.is-underlined select option { background: var(--ts-gray-50); } .ts-select.is-underlined:focus-within { border-bottom-color: var(--ts-primary-600); } /** * Active */ .ts-select.is-active { border-color: var(--ts-primary-600); } /** If select is-active then open child .ts-dropdown also */ .ts-select.is-active .ts-dropdown { display: inline-flex; } .ts-select.is-underlined.is-active { border-color: transparent; border-bottom-color: var(--ts-primary-600); } /** * Basic */ .ts-select.is-basic { padding: 0; background: transparent; border-color: transparent; min-height: initial; } .ts-select.is-basic select, .ts-select.is-basic .content { line-height: 1; padding: 0 1.4rem 0 0; } .ts-select.is-basic::after { right: 0; font-size: 12px; padding-top: 2px; } /** * Disabled */ .ts-select.is-disabled, .ts-select:has(:disabled) { pointer-events: none; opacity: 0.5; user-select: none; } /** * Fluid */ ts-select.is-fluid, .ts-select.is-fluid { width: 100%; } /** * Negative */ .ts-select.is-negative { border-color: var(--ts-negative-400); } .ts-select.is-negative select { color: var(--ts-negative-600); font-weight: 500; } .ts-select.is-negative.is-underlined { border-color: transparent; border-bottom-color: var(--ts-negative-400); } /** * Sizes */ .ts-select.is-small { --height: var(--ts-input-height-small); } .ts-select.is-large { --height: var(--ts-input-height-large); } .ts-select.is-small select { font-size: var(--ts-font-size-13px); } .ts-select.is-large select { font-size: var(--ts-font-size-17px); } /** * Dense */ .ts-select.is-dense { --height: var(--ts-input-height-medium-dense); } .ts-select.is-dense.is-small { --height: var(--ts-input-height-small-dense); } .ts-select.is-dense.is-large { --height: var(--ts-input-height-large-dense); } /** * Wrappable */ .ts-select.is-wrappable { min-height: var(--height); height: auto; padding: 0.184em 0; } .ts-select.is-wrappable .content { flex-wrap: wrap; } .ts-select.is-wrappable::after { top: 0.5em; bottom: initial; } /* ========================================================================== Enhanced ========================================================================== */ ts-select { display: inline-block; } ts-select.is-fluid { display: block; } .ts-select[data-tocas="input-select"] select { display: none; } .ts-select[data-tocas="input-combo"] { cursor: text; } .ts-select[data-tocas="input-combo"] select { display: none; } .ts-select input.append { border: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; color: var(--ts-gray-800); font-size: var(--ts-font-size-14px); padding: 0 2.5rem 0 0.9rem; width: 100%; z-index: 1; background: transparent; outline: none; } .ts-select .content.is-ghosting { opacity: 0.5; } .ts-select .content.is-hidden { visibility: hidden; } /* ========================================================================== Variables ========================================================================== */ .ts-fieldset { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-fieldset { border: 1px solid var(--accent-color, var(--ts-gray-300)); border-radius: var(--ts-border-radius-element); padding: 1rem; padding-top: 0.5rem; color: inherit; } /* ========================================================================== Structure ========================================================================== */ .ts-fieldset legend { color: var(--accent-color, var(--ts-gray-600)); padding: 0 0.7em; margin-left: -0.7em; font-weight: normal; pointer-events: none; user-select: none; } /** * Dense */ .ts-fieldset.is-dense { padding-bottom: 0.5rem; padding-top: 0.25rem; } /* ========================================================================== Variables ========================================================================== */ .ts-text { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-text { color: var(--accent-color, inherit); } /* ========================================================================== Variations ========================================================================== */ /** * Editable */ .ts-text.is-editable { text-decoration-style: dotted; text-decoration-line: underline; text-decoration-color: var(--ts-gray-500); cursor: pointer; } /** * Line Clamps */ .ts-text:is(.is-1-lines, .is-2-lines, .is-3-lines, .is-4-lines, .is-5-lines) { text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; } .ts-text.is-1-lines { -webkit-line-clamp: 1; } .ts-text.is-2-lines { -webkit-line-clamp: 2; } .ts-text.is-3-lines { -webkit-line-clamp: 3; } .ts-text.is-4-lines { -webkit-line-clamp: 4; } .ts-text.is-5-lines { -webkit-line-clamp: 5; } /** * Secondary */ .ts-text.is-secondary { color: var(--ts-gray-500); } /** * Bold */ .ts-text.is-bold { font-weight: 500 !important; } /** * Heavy */ .ts-text.is-heavy { font-weight: bold !important; } /** * Italic */ .ts-text.is-italic { font-style: italic !important; } /** * Deleted */ .ts-text.is-deleted { text-decoration: line-through !important; } /** * Underlined */ .ts-text.is-underlined { text-decoration: underline !important; } /** * Link */ .ts-text.is-link.is-link.is-link { color: var(--accent-color, var(--ts-link-700)); } .ts-text.is-link { text-decoration: underline; } .ts-text.is-link:hover { color: inherit; } .ts-text.is-link:active { color: inherit; } .ts-text.is-link:visited { color: inherit; } /** * Undecorated */ .ts-text.is-undecorated { text-decoration: none; } .ts-text.is-undecorated:hover { text-decoration: underline; } /** * Icon Link */ .ts-text.is-icon-link { display: flex; gap: 0.25rem; } /** * External Link */ .ts-text.is-external-link::after { font-family: "Icons"; font-weight: normal; font-style: normal; display: inline; text-decoration: inherit; text-align: center; width: 1.18em; -webkit-font-smoothing: antialiased; backface-visibility: hidden; content: "\f35d"; font-size: 0.8em; margin-left: 0.25rem; } /** * Code */ .ts-text.is-code { border-radius: var(--ts-border-radius-secondary); background: var(--ts-gray-200); padding: 0 0.2rem; font-size: var(--ts-font-size-14px); color: var(--ts-gray-800); } /** * Mark */ .ts-text.is-mark { border-radius: var(--ts-border-radius-secondary); background: var(--ts-warning-500); padding: 0 0.25rem; color: var(--ts-black); font-size: var(--ts-font-size-14px); } /** * Key */ .ts-text.is-key { border-radius: var(--ts-border-radius-secondary); background: var(--ts-gray-100); padding: 0 0.35rem; color: var(--ts-gray-800); border-bottom: 3px solid var(--ts-gray-300); font-size: var(--ts-font-size-14px); } /** * Sup */ .ts-text.is-sup { font-size: 12px; vertical-align: top; opacity: 0.8; } /** * Sub */ .ts-text.is-sub { font-size: 12px; vertical-align: bottom; opacity: 0.8; } /** * Truncated */ .ts-text.is-truncated { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; } /** * Uppercased */ .ts-text.is-uppercased { text-transform: uppercase; } /** * Lowercased */ .ts-text.is-lowercased { text-transform: lowercase; } /** * Aligns */ .ts-text.is-center-aligned { text-align: center; } .ts-text.is-start-aligned { text-align: left; } .ts-text.is-end-aligned { text-align: right; } .ts-text.is-justify-aligned { text-align: justify; } /** * Label */ .ts-text.is-label { font-weight: 500; color: var(--ts-gray-800); font-size: var(--ts-font-size-14px); line-height: 1; } /** * Description */ .ts-text.is-description { color: var(--ts-gray-500); font-size: var(--ts-font-size-14px); } /** * Disabled */ .ts-text.is-disabled { opacity: 0.5; pointer-events: none; user-select: none; } /** * Required */ .ts-text.is-required::after { content: " *"; font-weight: bold; color: var(--ts-negative-600); } /** * Sizes */ .ts-text.is-tiny { font-size: var(--ts-font-size-13px); } .ts-text.is-small { font-size: var(--ts-font-size-14px); } .ts-text.is-medium { font-size: var(--ts-font-size-15px); } .ts-text.is-large { font-size: var(--ts-font-size-17px); } .ts-text.is-big { font-size: var(--ts-font-size-20px); } .ts-text.is-huge { font-size: var(--ts-font-size-24px); } .ts-text.is-massive { font-size: var(--ts-font-size-30px); } /** * Negative */ .ts-text.is-negative { color: var(--ts-negative-600); } .ts-text.is-negative.is-secondary { color: var(--ts-negative-500); } /* ========================================================================== Variables ========================================================================== */ .ts-tab { --horizontal-padding-multiplier: 1; --vertical-padding-multiplier: 1; --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-tab { margin-bottom: -1px; /** For border merge */ user-select: none; display: flex; flex-wrap: wrap; z-index: 1; /** For cover divider */ } /* ========================================================================== Structure ========================================================================== */ .ts-tab .item { text-decoration: none; color: var(--ts-gray-800); padding: calc(0.5rem * var(--vertical-padding-multiplier)) calc(1rem * var(--horizontal-padding-multiplier)); display: inline-flex; border-bottom: 3px solid transparent; text-align: center; justify-content: center; cursor: pointer; gap: 0.5rem; line-height: 1.8; align-items: center; } .ts-tab .ts-icon { font-size: 1.1em; } /* ========================================================================== Variations ========================================================================== */ /** * Active */ .ts-tab .item.is-active { border-bottom-color: var(--accent-color, var(--ts-gray-800)); cursor: default; } /** * Disabled */ .ts-tab .item:disabled, .ts-tab .item.is-disabled { opacity: 0.5; pointer-events: none; user-select: none; } /** * Evenly Divided (Use Fluid instead) */ /*.ts-tab.is-evenly-divided .item { flex: 1; }*/ /** * Pilled */ .ts-tab.is-pilled .item { border-radius: 100rem; padding: calc(0.25rem * var(--vertical-padding-multiplier)) calc(1rem * var(--horizontal-padding-multiplier)); border-bottom: 0; } .ts-tab.is-pilled .item.is-active { background: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); } .ts-tab.is-pilled.is-secondary .item.is-active { background: var(--ts-gray-200); color: var(--accent-color, var(--ts-gray-800)); } /** * Aligns */ .ts-tab.is-start-aligned { justify-content: flex-start; } .ts-tab.is-center-aligned { justify-content: center; } .ts-tab.is-end-aligned { justify-content: flex-end; } /** * Short Indicated */ .ts-tab.is-short-indicated { gap: calc(1.6rem * var(--horizontal-padding-multiplier)); } .ts-tab.is-short-indicated .item { padding-left: 0; padding-right: 0; } /** * Very Short Indicated */ .ts-tab.is-very-short-indicated { gap: calc(1.6rem * var(--horizontal-padding-multiplier)); cursor: pointer; } .ts-tab.is-very-short-indicated .item.is-active { border-bottom-color: transparent; } .ts-tab.is-very-short-indicated .item { padding-left: 0; padding-right: 0; } .ts-tab.is-very-short-indicated .item { position: relative; } .ts-tab.is-very-short-indicated .item.is-active::after { position: absolute; background: var(--accent-color, var(--ts-gray-800)); bottom: -3px; content: ""; height: 3px; left: 50%; transform: translateX(-50%); width: 16px; } /** * Segmented */ .ts-tab.is-segmented { --height: var(--ts-input-height-medium); border: 1px solid var(--ts-gray-300); border-radius: var(--ts-border-radius-element); display: inline-flex; align-items: center; padding: 0 0.25rem; height: var(--height); } .ts-tab.is-segmented .item { padding: 0.45rem calc(0.9rem * var(--horizontal-padding-multiplier)); border-radius: var(--ts-border-radius-secondary); user-select: none; line-height: 1; border-bottom: 0; } .ts-tab.is-segmented .item.is-active { background: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); } /** * Fluid */ .ts-tab.is-fluid { display: flex; } .ts-tab.is-fluid .item { flex: 1; } /** * Tall */ .ts-tab.is-tall { --vertical-padding-multiplier: 1.6; } /** * Sizes */ .ts-tab.is-small .item { font-size: var(--ts-font-size-14px); } .ts-tab.is-large .item { font-size: var(--ts-font-size-17px); } .ts-tab.is-small.is-segmented { --height: var(--ts-input-height-small); } .ts-tab.is-large.is-segmented { --height: var(--ts-input-height-large); } /** * Dense */ .ts-tab.is-dense .item { padding-top: 0.25rem; padding-bottom: 0.25rem; } .ts-tab.is-dense.is-segmented .item { padding-top: 0.35rem; padding-bottom: 0.35rem; } .ts-tab.is-dense.is-pilled .item { padding-top: 0.05rem; padding-bottom: 0.05rem; } .ts-tab.is-segmented.is-dense { --height: var(--ts-input-height-medium-dense); } .ts-tab.is-segmented.is-small.is-dense { --height: var(--ts-input-height-small-dense); } .ts-tab.is-segmented.is-large.is-dense { --height: var(--ts-input-height-large-dense); } /** * Relaxed */ .ts-tab.is-relaxed { --horizontal-padding-multiplier: 1.6; } /* ========================================================================== Variables ========================================================================== */ .ts-box { --accent-color: initial; --accent-foreground-color: initial; --ts-indicator-color: var(--accent-color, var(--ts-gray-900)); } /* ========================================================================== Base ========================================================================== */ .ts-box { display: block; position: relative; text-decoration: none; color: inherit; border: 1px solid var(--ts-gray-300); border-radius: var(--ts-border-radius-container); overflow: hidden; background: var(--ts-gray-50); } a.ts-box:hover { border-color: var(--ts-gray-400); } /* ========================================================================== Structure ========================================================================== */ .ts-box .symbol .ts-icon { position: absolute; right: 0; bottom: 0; overflow: hidden; width: 0.8em; height: 0.8em; margin-left: 0; margin-right: 0; pointer-events: none; font-size: 8em; line-height: 1.1em; opacity: 0.1; } /* ========================================================================== Variations ========================================================================== */ /** * Horizontal */ .ts-box.is-horizontal { display: flex; flex-direction: row; } /** * Collapsed */ .ts-box.is-collapsed { width: fit-content; } /** * Indicated */ .ts-box.is-top-indicated { border-top: 3px solid var(--ts-indicator-color); } .ts-box.is-bottom-indicated { border-bottom: 3px solid var(--ts-indicator-color); } .ts-box.is-left-indicated { border-left: 3px solid var(--ts-indicator-color); } .ts-box.is-right-indicated { border-right: 3px solid var(--ts-indicator-color); } /** * Emphasises */ .ts-box[class*="-indicated"].is-negative { --ts-indicator-color: var(--ts-negative-500); } .ts-box[class*="-indicated"].is-positive { --ts-indicator-color: var(--ts-positive-500); } .ts-box[class*="-indicated"].is-warning { --ts-indicator-color: var(--ts-warning-500); } /** * Elevated */ .ts-box.is-elevated { box-shadow: var(--ts-elevated-shadow); } /** * Squared */ .ts-box.is-squared { border-radius: 0; } /** * Hollowed */ .ts-box.is-hollowed { border: 4px dashed var(--ts-gray-300); background: transparent; } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-content { padding: 1rem 1rem; color: inherit; display: block; text-decoration: none; box-sizing: border-box; } /* ========================================================================== Variations ========================================================================== */ /** * Fitted */ .ts-content.is-fitted { padding: 0; } .ts-content.is-vertically-fitted { padding-top: 0; padding-bottom: 0; } .ts-content.is-horizontally-fitted { padding-left: 0; padding-right: 0; } /** * Dark */ .ts-content.has-dark { background: var(--ts-gray-50); color: var(--ts-gray-800); } /** * Secondary */ .ts-content.is-secondary { background: var(--ts-gray-75); } /** * Tertiary */ .ts-content.is-tertiary { background: var(--ts-gray-100); } /** * Aligns */ .ts-content.is-start-aligned { text-align: left; } .ts-content.is-end-aligned { text-align: right; } .ts-content.is-center-aligned { text-align: center; } /** * Interactive */ .ts-content.is-interactive { display: block; text-decoration: none; } .ts-content.is-interactive:hover { cursor: pointer; } .ts-content.is-interactive:hover:not(.is-active) { background: var(--ts-gray-75); } /** * Active */ .ts-content.is-active { background: var(--ts-gray-200); } /** * Disabled */ .ts-content.is-disabled { opacity: 0.5; pointer-events: none; user-select: none; } /** * Rounded */ .ts-content.is-rounded { border-radius: var(--ts-border-radius-container); } /** * Padded */ .ts-content.is-padded { padding: 1.5rem; } .ts-content.is-horizontally-padded { padding-left: 1.5rem; padding-right: 1.5rem; } .ts-content.is-vertically-padded { padding-top: 1.5rem; padding-bottom: 1.5rem; } .ts-content.is-very-padded { padding: 3.5rem; } .ts-content.is-horizontally-very-padded { padding-left: 3.5rem; padding-right: 3.5rem; } .ts-content.is-vertically-very-padded { padding-top: 3.5rem; padding-bottom: 3.5rem; } /** * Compact */ .ts-content.is-compact { padding: 0.5rem; } /** * Dense */ .ts-content.is-dense { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-image { position: relative; display: inline-block; max-width: 100%; vertical-align: top; text-decoration: none; } /* ========================================================================== Structure ========================================================================== */ .ts-image img { vertical-align: top; } :where(.ts-image img:not([width])) { width: 100%; } /* ========================================================================== Variations ========================================================================== */ /** * Circular */ .ts-image.is-circular img { border-radius: 100rem !important; } /** * Disabled */ .ts-image.is-disabled img { opacity: 0.5; pointer-events: none; } /** * Rounded */ .ts-image.is-rounded img { border-radius: var(--ts-border-radius-element) !important; } /** * Bordered */ .ts-image.is-bordered img { border: 1px solid var(--ts-gray-300); } /** * Covered */ .ts-image.is-covered img { object-fit: cover; } /** * Full */ .ts-image.is-full-width, .ts-image.is-full-width img { width: 100%; } .ts-image.is-full-height, .ts-image.is-full-height img { height: 100%; } /** * Centered */ .ts-image.is-centered { display: block; } .ts-image.is-centered img { display: block; margin-left: auto; margin-right: auto; } /** * Spaced */ .ts-image.is-spaced { margin-left: 0.45rem; margin-right: 0.45rem; } .ts-image.is-start-spaced { margin-left: 0.45rem; } .ts-image.is-end-spaced { margin-right: 0.45rem; } /** * Aspect Ratio */ .ts-image.is-1-by-1 img { aspect-ratio: 1 / 1; } .ts-image.is-4-by-3 img { aspect-ratio: 4 / 3; } .ts-image.is-16-by-9 img { aspect-ratio: 16 / 9; } /* ========================================================================== Variables ========================================================================== */ .ts-switch { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-switch { display: inline-flex; align-items: flex-start; cursor: pointer; user-select: none; color: inherit; } /* ========================================================================== Structure ========================================================================== */ .ts-switch input { position: relative; appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; margin-right: 0.5rem; margin-top: 3px; } .ts-switch input::after { display: block; content: ""; height: 22px; width: 38px; border-radius: 100rem; background: var(--ts-gray-300); transition: background 0.1s ease; } .ts-switch input::before { position: absolute; display: block; content: ""; height: 15px; width: 15px; border-radius: 100rem; top: 3.5px; left: 4px; background: var(--ts-white); transition: left 0.1s ease; z-index: 1; } .ts-switch input:checked::after { background: var(--accent-color, var(--ts-primary-700)); } .ts-switch input:checked::before { background: var(--accent-foreground-color, var(--ts-white)); left: 19px; } /* ========================================================================== Variations ========================================================================== */ /** * Disabled */ .ts-switch:has(:disabled), fieldset:disabled .ts-switch { opacity: 0.5; pointer-events: none; user-select: none; } /** * Solo */ .ts-switch.is-solo input { margin-right: 0; margin-top: 0; } /** * Negative */ .ts-switch.is-negative input { border-radius: 100rem; border: 2px solid var(--ts-negative-600); } /** * Sizes */ .ts-switch.is-small { font-size: var(--ts-font-size-14px); } .ts-switch.is-small input::after { height: 19px; width: 31px; } .ts-switch.is-small input::before { height: 12px; width: 12px; top: 3.5px; } .ts-switch.is-small input:checked::before { left: 15px; } .ts-switch.is-large { font-size: var(--ts-font-size-17px); } .ts-switch.is-large input::after { height: 25px; width: 46px; } .ts-switch.is-large input::before { height: 18px; width: 18px; top: 3.5px; } .ts-switch.is-large input:checked::before { left: 24px; } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-meta { display: inline-flex; flex-wrap: wrap; } /* ========================================================================== Structure ========================================================================== */ .ts-meta .item { color: inherit; text-decoration: none; } .ts-meta .item:not(:last-child)::after { margin: 0 0; content: "."; color: var(--ts-gray-500); text-decoration: none; pointer-events: none; user-select: none; display: inline-block; } .ts-meta a.item:hover { text-decoration: underline; } /* ========================================================================== Variations ========================================================================== */ /** * Aligns */ .ts-meta:is(.is-start-aligned, .is-center-aligned, .is-end-aligned) { display: flex; } .ts-meta.is-start-aligned { justify-content: flex-start; } .ts-meta.is-center-aligned { justify-content: center; } .ts-meta.is-end-aligned { justify-content: flex-end; } /** * Secondary */ .ts-meta.is-secondary .item { color: var(--ts-gray-500); } /** * Sizes */ .ts-meta.is-small { font-size: var(--ts-font-size-14px); } .ts-meta.is-large { font-size: var(--ts-font-size-17px); } /* ========================================================================== Variables ========================================================================== */ .ts-selection { --height: var(--ts-input-height-medium); --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-selection { border: 1px solid var(--ts-gray-100); border-radius: var(--ts-border-radius-element); padding: 0 0.35rem; display: inline-flex; background: var(--ts-gray-100); box-sizing: border-box; height: var(--height); align-items: center; } /* ========================================================================== Structure ========================================================================== */ .ts-selection .item { display: flex; } .ts-selection .item .text { display: inline-flex; padding: 0.25rem 1rem; border-radius: var(--ts-border-radius-secondary); font-size: var(--ts-absolute-small); color: var(--ts-gray-800); border-color: var(--ts-gray-100); user-select: none; cursor: pointer; align-items: center; justify-content: center; text-align: center; line-height: 1.5; } .ts-selection .item input { display: none; } .ts-selection input:checked + .text { background: var(--accent-color, var(--ts-primary-700)); border-color: var(--accent-color, var(--ts-primary-700)); color: var(--accent-foreground-color, var(--ts-white)); } /* ========================================================================== Variations ========================================================================== */ /** * Disabled */ .ts-selection:not(:has(:enabled)) { pointer-events: none; opacity: 0.5; user-select: none; } .ts-selection .item:has(:disabled) { pointer-events: none; opacity: 0.5; user-select: none; } /** * Circular */ .ts-selection.is-circular { border-radius: 100rem; } .ts-selection.is-circular .item .text { border-radius: 100rem; } /** * Fluid */ .ts-selection.is-fluid { width: 100%; } .ts-selection.is-fluid .item { flex: 1; } .ts-selection.is-fluid .item .text { width: 100%; } /** * Sizes */ .ts-selection.is-small { --height: var(--ts-input-height-small); } .ts-selection.is-small .item .text { font-size: var(--ts-font-size-13px); } .ts-selection.is-large { --height: var(--ts-input-height-large); } .ts-selection.is-large .item .text { font-size: var(--ts-font-size-17px); } /** * Dense */ .ts-selection.is-dense { --height: var(--ts-input-height-medium-dense); } .ts-selection.is-dense.is-small { --height: var(--ts-input-height-small-dense); } .ts-selection.is-dense.is-small { --height: var(--ts-input-height-large-dense); } .ts-selection.is-dense .item .text { padding-top: 0.1rem; padding-bottom: 0.1rem; } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-table, .ts-table :is(thead, tbody, tfoot, tr, th, td) { width: auto; height: auto; margin: 0; padding: 0; border: none; border-collapse: collapse; border-spacing: 0; border-color: inherit; vertical-align: inherit; text-align: left; font-weight: inherit; font-size: 14px; -webkit-border-horizontal-spacing: 0; -webkit-border-vertical-spacing: 0; } .ts-table { width: 100%; color: inherit; } /* ========================================================================== Structure ========================================================================== */ .ts-table thead tr { border-bottom: 1px solid var(--ts-gray-300); } .ts-table tfoot tr { border-top: 1px solid var(--ts-gray-300); } .ts-table tr th { background: var(--ts-gray-100); } .ts-table :is(thead, tfoot) tr th { padding: 0.5rem 1rem; color: var(--ts-gray-600); font-weight: 500; } .ts-table tbody tr + tr { border-top: 1px solid var(--ts-gray-300); } .ts-table tbody tr td { padding: 0.5rem 1rem; } /* ========================================================================== Variations ========================================================================== */ /** * Sizes */ .ts-table.is-small, .ts-table.is-small :is(thead, tbody, tfoot, tr, th, td) { font-size: var(--ts-font-size-13px); } .ts-table.is-large, .ts-table.is-large :is(thead, tbody, tfoot, tr, th, td) { font-size: var(--ts-font-size-16px); } /** * Collapsed */ .ts-table.is-collapsed { width: auto; } .ts-table :is(th, td).is-collapsed { width: 1px; white-space: nowrap; } /** * Truncated */ .ts-table.is-truncated { table-layout: fixed; } .ts-table.is-truncated td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /** * Basic */ .ts-table:is(.is-basic, .is-very-basic) tr th { background: transparent; } .ts-table.is-very-basic tbody :is(th, td, tr) { border-color: transparent; } /** * Definition */ .ts-table.is-definition tr th:not(:first-child) { background: var(--ts-gray-100); } .ts-table.is-definition tr th:first-child { background: transparent; } .ts-table.is-definition tr td:first-child { background: var(--ts-gray-100); } /** * Celled */ .ts-table.is-celled tr :is(td, th):not(:last-child) { border-right: 1px solid var(--ts-gray-300); } /** * Striped */ .ts-table.is-striped > tbody > tr:nth-child(even) { background: var(--ts-gray-75); } /** * Empty */ .ts-table td.is-empty { color: var(--ts-gray-300); font-weight: 500; } .ts-table td.is-empty::after { content: "—"; } /** * Insetted */ .ts-table td.is-insetted { box-shadow: inset 0px 0px 10px 0px rgb(0 0 0 / 5%); } /** * Aligns */ .ts-table :is(tr, th, td).is-start-aligned { text-align: left; } .ts-table :is(th, td).is-center-aligned { text-align: center; } .ts-table :is(th, td).is-end-aligned { text-align: right; } .ts-table.is-top-aligned :is(th, td) { vertical-align: top; } .ts-table :is(th, td).is-top-aligned { vertical-align: top; } .ts-table :is(th, td).is-middle-aligned { vertical-align: middle; } .ts-table tr.is-middle-aligned td { vertical-align: middle; } .ts-table :is(th, td).is-bottom-aligned { vertical-align: bottom; } /** * Secondary */ .ts-table :is(tr, tr th, tr td).is-secondary { background: var(--ts-gray-75); } /** * Tertiary */ .ts-table :is(tr, tr th, tr td).is-tertiary { background: var(--ts-gray-100); } /** * Active */ .ts-table :is(tr, tr th, tr td).is-active { background: var(--ts-gray-300); } /** * Disabled */ .ts-table :is(tr, tr th, tr td).is-disabled { opacity: 0.5; user-select: none; pointer-events: none; } /** * Single Line */ .ts-table.is-single-line :is(tr, tr th, tr td), .ts-table :is(tr, tr th, tr td).is-single-line { white-space: nowrap; } /** * Indicated */ .ts-table :is(tr, tr th, tr td).is-indicated { box-shadow: 2px 0 0 var(--ts-gray-900) inset; } .ts-table :is(tr, tr th, tr td).is-indicated.is-negative { box-shadow: 2px 0 0 var(--ts-negative-600) inset; } .ts-table :is(tr, tr th, tr td).is-indicated.is-positive { box-shadow: 2px 0 0 var(--ts-positive-600) inset; } .ts-table :is(tr, tr th, tr td).is-indicated.is-warning { box-shadow: 2px 0 0 var(--ts-warning-600) inset; } /** * Sticked */ .ts-table.is-sticked tr *:is(td, th):first-child { padding-left: 0; } .ts-table.is-sticked tr *:is(td, th):last-child { padding-right: 0; } /** * Density */ .ts-table.is-relaxed :is(thead, tfoot) tr th { padding-top: 0.8rem; padding-bottom: 0.8rem; } .ts-table.is-relaxed tbody tr td { padding-top: 0.8rem; padding-bottom: 0.8rem; } .ts-table.is-dense :is(thead, tfoot) tr th { padding-top: 0.25rem; padding-bottom: 0.25rem; } .ts-table.is-dense tbody tr td { padding-top: 0.25rem; padding-bottom: 0.25rem; } /** * Compact */ .ts-table :is(thead, tfoot) tr th.is-compact { padding-left: 0.5rem; padding-right: 0.5rem; } .ts-table.is-compact :is(thead, tfoot) tr th { padding-left: 0.5rem; padding-right: 0.5rem; } .ts-table.is-compact tbody tr td { padding-left: 0.5rem; padding-right: 0.5rem; } .ts-table tbody tr td.is-compact { padding-left: 0.5rem; padding-right: 0.5rem; } /** * Padded */ .ts-table.is-padded tbody tr td { padding: 1rem 1.5rem; } .ts-table.is-padded :is(thead, tfoot) tr th { padding: 1rem 1.5rem; } .ts-table.is-horizontally-padded tbody tr td { padding-left: 1.5rem; padding-right: 1.5rem; } .ts-table.is-horizontally-padded :is(thead, tfoot) tr th { padding-left: 1.5rem; padding-right: 1.5rem; } .ts-table tbody tr td.is-vertically-padded { padding-top: 1rem; padding-bottom: 1rem; } .ts-table tbody tr td.is-padded { padding: 1rem 1.5rem; } .ts-table tbody tr td.is-vertically-padded { padding-top: 1rem; padding-bottom: 1rem; } .ts-table tbody tr td.is-horizontally-padded { padding-left: 1.5rem; padding-right: 1.5rem; } /** * Fitted */ .ts-table.is-fitted :is(thead, tfoot) tr th { padding: 0; } .ts-table.is-fitted tbody tr td { padding: 0; } .ts-table tbody tr td.is-fitted { padding: 0; } /* ========================================================================== Variables ========================================================================== */ .ts-procedure { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-procedure { display: flex; align-items: center; justify-content: center; } /* ========================================================================== Structure ========================================================================== */ .ts-procedure .item { text-decoration: none; display: flex; align-items: center; flex: 1 0 auto; color: var(--ts-gray-800); counter-increment: ordered; } .ts-procedure .item:last-child { flex: 0 0 auto; } .ts-procedure .item .indicator { position: relative; border-radius: 100rem; border: 2px solid var(--ts-gray-300); color: var(--ts-gray-800); height: 2rem; width: 2rem; display: inline-flex; line-height: 1; align-items: center; justify-content: center; font-weight: bold; margin-right: 1rem; background: transparent; } .ts-procedure:not(.is-compact) .item .indicator:empty::after { content: counter(ordered, decimal); } .ts-procedure .item .content { display: flex; align-items: center; } .ts-procedure .item .label { color: var(--ts-gray-800); font-weight: 500; } .ts-procedure .item .label .description { color: var(--ts-gray-600); font-size: var(--ts-font-size-14px); font-weight: normal; } .ts-procedure .item::after { height: 2px; content: ""; flex: 1 1 0%; background: var(--ts-gray-300); margin: 0 1rem; pointer-events: none; } .ts-procedure .item:last-child::after { display: none; } .ts-procedure .item .indicator .ts-icon { font-size: var(--ts-font-size-14px); } /* ========================================================================== Variations ========================================================================== */ /** * Active */ .ts-procedure .item.is-active .indicator { background: var(--accent-color, var(--ts-gray-800)); border-color: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); } /** * Stacked */ .ts-procedure.is-stacked .item .content { flex-direction: column; justify-content: center; gap: 0.25rem; } .ts-procedure.is-stacked .item .indicator { margin-right: 0; } .ts-procedure.is-stacked .item::after { margin-bottom: 2rem; } /** * Processing */ .ts-procedure .item.is-processing .indicator { background: transparent; border-color: var(--accent-color, var(--ts-gray-800)); color: var(--ts-gray-800); } /** * Completed */ .ts-procedure .item.is-completed::after { background: var(--accent-color, var(--ts-gray-800)); } .ts-procedure .item.is-completed .indicator { font-family: "Icons"; font-weight: normal; font-style: normal; text-decoration: inherit; text-align: center; -webkit-font-smoothing: antialiased; backface-visibility: hidden; background: var(--accent-color, var(--ts-gray-800)); border-color: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); } .ts-procedure .item.is-completed .indicator::after, .ts-procedure .item.is-completed .indicator * { display: none; } .ts-procedure .item.is-completed .indicator::before { content: "\f00c"; } /** * Completed Half Line */ .ts-procedure .item.is-completed .line.is-half { position: relative; } .ts-procedure .item.is-completed .line.is-half::before { content: " "; position: absolute; top: 0; right: 0; bottom: 0; width: 50%; background: var(--ts-gray-300); } /** * Disabled */ .ts-procedure .item.is-disabled { pointer-events: none; opacity: 0.5; user-select: none; } .ts-procedure .item.is-disabled .indicator { background: transparent; border-color: var(--ts-gray-300); } /** * Negative */ .ts-procedure .item.is-negative .indicator { background: var(--ts-negative-500); color: var(--ts-white); border-color: var(--ts-negative-500); } .ts-procedure .item.is-negative .label { color: var(--ts-negative-500); } /** * Compact */ .ts-procedure.is-compact .item .indicator { height: 1rem; width: 1rem; padding: 0; } .ts-procedure.is-compact .item.is-completed .indicator::after, .ts-procedure.is-compact .item.is-completed .indicator::before, .ts-procedure.is-compact .item.is-completed .indicator * { display: none; } /** * Unordered */ .ts-procedure.is-unordered .item .indicator { background: var(--ts-gray-200); border-color: var(--ts-gray-200); } .ts-procedure.is-unordered .item.is-completed::after { background: var(--ts-gray-300); } .ts-procedure.is-unordered .item.is-active .indicator { background: var(--accent-color, var(--ts-gray-800)); border-color: var(--accent-color, var(--ts-gray-800)); } .ts-procedure.is-unordered .item.is-completed .indicator { background: var(--ts-gray-200); border-color: var(--ts-gray-200); color: var(--ts-gray-800); } /** * Compact */ .ts-procedure.is-compact .item.is-completed .indicator { background: var(--accent-color, var(--ts-gray-800)); border-color: var(--accent-color, var(--ts-gray-800)); } .ts-procedure.is-compact .item.is-active .indicator { background: transparent; border-color: var(--accent-color, var(--ts-gray-800)); } .ts-procedure.is-compact .item.is-active .indicator::after { content: ""; background: var(--accent-color, var(--ts-gray-800)); position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; border-radius: 100rem; display: block; } /** * Vertical */ .ts-procedure.is-vertical { flex-direction: column; } .ts-procedure.is-vertical .item { flex-direction: column; align-items: flex-start; flex: 1 0 auto; -webkit-box-pack: start; justify-content: flex-start; display: flex; width: 100%; } .ts-procedure.is-vertical .item::after { height: auto; min-height: 1.5rem; width: 2px; margin: 0.5rem 0 0.5rem 0.9rem; } .ts-procedure.is-vertical.is-compact .item::after { margin: 0rem 0 0rem 0.4rem; } /** * Sizes */ .ts-procedure.is-small { font-size: var(--ts-font-size-14px); } .ts-procedure.is-large { font-size: var(--ts-font-size-17px); } /* ========================================================================== Variables ========================================================================== */ .ts-grid { --gap: 1rem; --1-wide: calc((100% / (16 / 1)) - var(--gap) + (var(--gap) / (16 / 1))); --2-wide: calc((100% / (16 / 2)) - var(--gap) + (var(--gap) / (16 / 2))); --3-wide: calc((100% / (16 / 3)) - var(--gap) + (var(--gap) / (16 / 3))); --4-wide: calc((100% / (16 / 4)) - var(--gap) + (var(--gap) / (16 / 4))); --5-wide: calc((100% / (16 / 5)) - var(--gap) + (var(--gap) / (16 / 5))); --6-wide: calc((100% / (16 / 6)) - var(--gap) + (var(--gap) / (16 / 6))); --7-wide: calc((100% / (16 / 7)) - var(--gap) + (var(--gap) / (16 / 7))); --8-wide: calc((100% / (16 / 8)) - var(--gap) + (var(--gap) / (16 / 8))); --9-wide: calc((100% / (16 / 9)) - var(--gap) + (var(--gap) / (16 / 9))); --10-wide: calc((100% / (16 / 10)) - var(--gap) + (var(--gap) / (16 / 10))); --11-wide: calc((100% / (16 / 11)) - var(--gap) + (var(--gap) / (16 / 11))); --12-wide: calc((100% / (16 / 12)) - var(--gap) + (var(--gap) / (16 / 12))); --13-wide: calc((100% / (16 / 13)) - var(--gap) + (var(--gap) / (16 / 13))); --14-wide: calc((100% / (16 / 14)) - var(--gap) + (var(--gap) / (16 / 14))); --15-wide: calc((100% / (16 / 15)) - var(--gap) + (var(--gap) / (16 / 15))); --16-wide: calc((100% / (16 / 16)) - var(--gap) + (var(--gap) / (16 / 16))); --1-columns: calc((100% / 1) - var(--gap) + (var(--gap) / 1)); --2-columns: calc((100% / 2) - var(--gap) + (var(--gap) / 2)); --3-columns: calc((100% / 3) - var(--gap) + (var(--gap) / 3)); --4-columns: calc((100% / 4) - var(--gap) + (var(--gap) / 4)); --5-columns: calc((100% / 5) - var(--gap) + (var(--gap) / 5)); --6-columns: calc((100% / 6) - var(--gap) + (var(--gap) / 6)); --7-columns: calc((100% / 7) - var(--gap) + (var(--gap) / 7)); --8-columns: calc((100% / 8) - var(--gap) + (var(--gap) / 8)); --9-columns: calc((100% / 9) - var(--gap) + (var(--gap) / 9)); --10-columns: calc((100% / 10) - var(--gap) + (var(--gap) / 10)); } /* ========================================================================== Base ========================================================================== */ /* ========================================================================== Structure ========================================================================== */ .ts-grid { display: flex; flex-wrap: wrap; color: inherit; gap: var(--gap); } /* ========================================================================== Variations ========================================================================== */ /** * Columns */ .ts-grid.is-1-columns > .column { flex: var(--1-columns); max-width: var(--1-columns); } .ts-grid.is-2-columns > .column { flex: var(--2-columns); max-width: var(--2-columns); } .ts-grid.is-3-columns > .column { flex: var(--3-columns); max-width: var(--3-columns); } .ts-grid.is-4-columns > .column { flex: var(--4-columns); max-width: var(--4-columns); } .ts-grid.is-5-columns > .column { flex: var(--5-columns); max-width: var(--5-columns); } .ts-grid.is-6-columns > .column { flex: var(--6-columns); max-width: var(--6-columns); } .ts-grid.is-7-columns > .column { flex: var(--7-columns); max-width: var(--7-columns); } .ts-grid.is-8-columns > .column { flex: var(--8-columns); max-width: var(--8-columns); } .ts-grid.is-9-columns > .column { flex: var(--9-columns); max-width: var(--9-columns); } .ts-grid.is-10-columns > .column { flex: var(--10-columns); max-width: var(--10-columns); } /** * Relaxed */ .ts-grid.is-relaxed { --gap: 2rem; } .ts-grid.is-compact { --gap: 0.5rem; } /** * Divided */ .ts-grid.is-divided > .column { position: relative; } .ts-grid.is-divided > .column:not(:last-child)::after { position: absolute; content: ""; top: 0; bottom: 0; right: calc(var(--gap) / 2 * -1); border-right: 1px solid var(--ts-gray-300); } /** * Evenly Divided */ .ts-grid.is-evenly-divided > .column { flex: var(--1-wide); width: var(--1-wide); } /** * Truncated */ .ts-grid .column.is-truncated { overflow: hidden; } /** * Stretched */ .ts-grid.is-stretched > .column { display: inline-flex !important; align-self: stretch; flex-direction: column; } .ts-grid.is-stretched > .column > * { flex-grow: 1; } /** * Space Around */ .ts-grid.is-spaced-between { justify-content: space-between; } .ts-grid.is-spaced-around { justify-content: space-around; } /** * Reverse */ .ts-grid.is-reversed { flex-direction: row-reverse; flex-wrap: wrap-reverse; } /** * Aligns */ .ts-grid.is-start-aligned { justify-content: flex-start; } .ts-grid.is-center-aligned { justify-content: center; } .ts-grid.is-end-aligned { justify-content: flex-end; } .ts-grid.is-top-aligned { align-items: flex-start; } .ts-grid.is-middle-aligned { align-items: center; } .ts-grid.is-bottom-aligned { align-items: flex-end; } .ts-grid .column.is-start-aligned { display: flex; flex-direction: column; align-items: flex-start; } .ts-grid .column.is-center-aligned { display: flex; flex-direction: column; align-items: center; } .ts-grid .column.is-end-aligned { display: flex; flex-direction: column; align-items: flex-end; } /** * Ordering */ .ts-grid .column.is-first { order: -1; } .ts-grid .column.is-last { order: 1; } .ts-grid .column.is-order-1 { order: 1; } .ts-grid .column.is-order-2 { order: 2; } .ts-grid .column.is-order-3 { order: 3; } .ts-grid .column.is-order-4 { order: 4; } .ts-grid .column.is-order-5 { order: 5; } .ts-grid .column.is-order-6 { order: 6; } .ts-grid .column.is-order-7 { order: 7; } .ts-grid .column.is-order-8 { order: 8; } .ts-grid .column.is-order-9 { order: 9; } .ts-grid .column.is-order-10 { order: 10; } /** * Wides */ /*.ts-grid .column { }*/ .ts-grid .column.is-1-wide { width: var(--1-wide); max-width: var(--1-wide); } .ts-grid .column.is-2-wide { width: var(--2-wide); max-width: var(--2-wide); } .ts-grid .column.is-3-wide { width: var(--3-wide); max-width: var(--3-wide); } .ts-grid .column.is-4-wide { width: var(--4-wide); max-width: var(--4-wide); } .ts-grid .column.is-5-wide { width: var(--5-wide); max-width: var(--5-wide); } .ts-grid .column.is-6-wide { width: var(--6-wide); max-width: var(--6-wide); } .ts-grid .column.is-7-wide { width: var(--7-wide); max-width: var(--7-wide); } .ts-grid .column.is-8-wide { width: var(--8-wide); max-width: var(--8-wide); } .ts-grid .column.is-9-wide { width: var(--9-wide); max-width: var(--9-wide); } .ts-grid .column.is-10-wide { width: var(--10-wide); max-width: var(--10-wide); } .ts-grid .column.is-11-wide { width: var(--11-wide); max-width: var(--11-wide); } .ts-grid .column.is-12-wide { width: var(--12-wide); max-width: var(--12-wide); } .ts-grid .column.is-13-wide { width: var(--13-wide); max-width: var(--13-wide); } .ts-grid .column.is-14-wide { width: var(--14-wide); max-width: var(--14-wide); } .ts-grid .column.is-15-wide { width: var(--15-wide); max-width: var(--15-wide); } .ts-grid .column.is-16-wide { width: var(--16-wide); max-width: var(--16-wide); } /** * Fluid */ .ts-grid .column.is-fluid { flex: 1; min-width: 0; flex-grow: 1; } /** * Stacked */ .ts-grid.is-stacked > .column { flex: var(--16-wide); max-width: var(--16-wide); } /* ========================================================================== Variables ========================================================================== */ .ts-rating { --accent-color: initial; --accent-foreground-color: initial; --color: var(--accent-color, inherit); } /* ========================================================================== Base ========================================================================== */ .ts-rating { display: inline-flex; gap: 0.2rem; user-select: none; } /* ========================================================================== Structure ========================================================================== */ .ts-rating :is(.star, .heart) { position: relative; color: var(--ts-gray-200); text-decoration: none; } .ts-rating :is(.star, .heart).is-active, .ts-rating.is-input :is(.star, .heart):checked, .ts-rating.is-input :is(.star, .heart):hover { color: var(--color); } /* Issue #924 */ .ts-rating.is-input :is(.star, .heart):has(~ :is(.star, .heart):hover), .ts-rating.is-input :is(.star, .heart):has(~ :is(.star, .heart):checked) { color: var(--color); } .ts-rating.is-yellow { --color: #e3c81b; } .ts-rating.is-red { --color: #ff1100; } .ts-rating :is(.star, .heart)::after, .ts-rating :is(.star, .heart)::before { font-family: "Icons"; font-weight: normal; font-style: normal; display: inline; text-decoration: inherit; text-align: center; -webkit-font-smoothing: antialiased; backface-visibility: hidden; } .ts-rating .star::after { content: "\f005"; z-index: 0; } .ts-rating .heart::after { content: "\f004"; } /* ========================================================================== Variations ========================================================================== */ /** * Half */ .ts-rating .star.is-active.is-half::after { color: var(--ts-gray-200); } .ts-rating .star.is-active.is-half::before { color: var(--color); } .ts-rating .star.is-active.is-half::before { content: "\f089"; position: absolute; left: 0; top: 0; z-index: 1; } /** * Disabled */ .ts-rating .item:disabled { pointer-events: none; } /** * Input */ .ts-rating.is-input input { appearance: none; margin: 0; cursor: pointer; font-size: 1rem; transition: color 0.1s ease, opacity 0.1s ease; } .ts-rating.is-input input:hover:not(:focus) ~ input, .ts-rating.is-input input:hover:focus ~ input { opacity: 0.7; } .ts-rating.is-input input:hover:not(:focus) { transform: scale(1.1); } /** * Sizes */ .ts-rating.is-small { font-size: var(--ts-font-size-13px); } .ts-rating.is-large { font-size: var(--ts-font-size-18px); } /* ========================================================================== Variables ========================================================================== */ .ts-chip { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-chip { vertical-align: middle; text-decoration: none; } .ts-chip, .ts-chip.is-input .content, .ts-chip.is-toggle .content { background: var(--ts-gray-200); padding: 0.1rem 0.6rem; border: 1px solid var(--ts-gray-200); border-radius: var(--ts-border-radius-element); font-size: var(--ts-font-size-14px); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; line-height: 1.75; min-height: 22px; /*min-width: 55px;*/ color: var(--accent-color, var(--ts-gray-800)); } .ts-chip.is-input, .ts-chip.is-toggle { background: initial; padding: initial; border: initial; font-size: initial; display: initial; gap: initial; line-height: initial; min-height: initial; min-width: initial; } /* ========================================================================== Structure ========================================================================== */ .ts-chip img { width: 24px; height: 24px; border-radius: var(--ts-border-radius-element); margin-left: -5px; } .ts-chip input { display: none; } /* ========================================================================== Variations ========================================================================== */ /** * Outlined */ .ts-chip.is-outlined, .ts-chip.is-outlined .content { background: transparent; border-color: var(--ts-gray-300); } /** * Circular */ .ts-chip.is-circular, .ts-chip.is-circular .content { border-radius: 100rem; } /** * Input */ .ts-chip.is-input, .ts-chip.is-toggle { cursor: pointer; user-select: none; } /** * Toggle */ .ts-chip.is-toggle input:checked + .content { background: var(--accent-color, var(--ts-gray-800)); border-color: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); } .ts-chip.is-toggle.is-secondary input:checked + .content { color: var(--accent-color, var(--ts-gray-800)); background: var(--ts-gray-200); border-color: var(--accent-color, var(--ts-gray-600)); } /** * Input */ .ts-chip.is-input input:checked + .content { background: var(--accent-color, var(--ts-primary-700)); border-color: var(--accent-color, var(--ts-primary-700)); color: var(--accent-foreground-color, var(--ts-white)); } .ts-chip.is-input.is-secondary input:checked + .content { color: var(--accent-color, var(--ts-primary-600)); background: var(--ts-gray-100); border-color: var(--accent-color, var(--ts-primary-600)); } .ts-chip.is-input input:checked + .content::before { font-family: "Icons"; font-weight: normal; font-style: normal; display: inline; text-decoration: inherit; text-align: center; width: 1.18em; -webkit-font-smoothing: antialiased; backface-visibility: hidden; content: "\f00c"; font-size: 12px; } .ts-chip.is-input.is-start-icon input:checked + .content::before, .ts-chip.is-input.is-end-icon input:checked + .content::before { display: none; } .ts-chip.is-input.is-start-icon input:checked + .content .ts-icon::before, .ts-chip.is-input.is-end-icon input:checked + .content .ts-icon::before { content: "\f00c"; } /** * Disabled */ .ts-chip:has(:disabled), .ts-chip.is-disabled, fieldset:disabled .ts-chip { pointer-events: none; opacity: 0.5; user-select: none; } /** * Fluid */ .ts-chip.is-fluid { display: flex; } .ts-chip.is-fluid .content { width: 100%; } /** * Sizes */ .ts-chip.is-small, .ts-chip.is-small .content { font-size: var(--ts-font-size-12px); } .ts-chip.is-large, .ts-chip.is-large .content { font-size: var(--ts-font-size-16px); } /** * Dense */ .ts-chip.is-dense { padding-top: 0.1rem; padding-bottom: 0.1rem; } .ts-chip.is-dense:is(.is-input, .is-toggle) .content { min-height: 20px; padding-top: 0.1rem; padding-bottom: 0.1rem; } /** * Spaced */ .ts-chip.is-start-spaced { margin-left: 0.45rem; } .ts-chip.is-end-spaced { margin-right: 0.45rem; } /* ========================================================================== Variables ========================================================================== */ .ts-close { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-close { border: none; margin: 0; padding: 0; overflow: visible; font: inherit; outline: none; box-sizing: border-box; user-select: none; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; appearance: none; } .ts-close { font-family: "Icons"; font-weight: normal; font-style: normal; text-align: center; -webkit-font-smoothing: antialiased; backface-visibility: hidden; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; height: 18px; width: 18px; font-size: var(--ts-font-size-12px); line-height: 1; background: var(--accent-color, var(--ts-gray-600)); color: var(--accent-foreground-color, var(--ts-gray-100)); border-radius: 100rem; } .ts-close::before { content: "\f00d"; } /* ========================================================================== Variations ========================================================================== */ /** * Disabled */ .ts-close:disabled, .ts-close.is-disabled, fieldset:disabled .ts-close { pointer-events: none; opacity: 0.5; user-select: none; } /** * Secondary */ .ts-close.is-secondary { background: var(--ts-gray-300); color: var(--ts-gray-800); } /** * Tertiary */ .ts-close.is-tertiary { background: var(--ts-gray-300); color: var(--ts-gray-50); } /** * Rounded */ .ts-close.is-rounded { border-radius: var(--ts-border-radius-element); } /** * Sizes */ .ts-close.is-small { height: 16px; width: 16px; } .ts-close.is-large { height: 22px; width: 22px; font-size: var(--ts-font-size-14px); } .ts-close.is-big { height: 27px; width: 27px; font-size: var(--ts-font-size-17px); } /** * Spaced */ .ts-close.is-spaced { margin-left: 0.45rem; margin-right: 0.45rem; } .ts-close.is-start-spaced { margin-left: 0.45rem; } .ts-close.is-end-spaced { margin-right: 0.45rem; } /* ========================================================================== Variables ========================================================================== */ @keyframes ts-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ts-loading { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-loading { display: inline-block; text-align: center; color: var(--accent-color, var(--ts-gray-600)); } .ts-loading::after { font-family: "Icons"; font-weight: normal; font-style: normal; text-decoration: inherit; display: inline-block; -webkit-font-smoothing: antialiased; backface-visibility: hidden; animation: ts-loading-spin 2s linear infinite; font-size: 2rem; } /* ========================================================================== Structure ========================================================================== */ .ts-loading::after { content: "\f110"; } /* ========================================================================== Variations ========================================================================== */ /** * Notched */ .ts-loading.is-notched::after { content: "\f1ce"; } /** * Centered */ .ts-loading.is-centered { display: flex; justify-content: center; } /** * Sizes */ .ts-loading.is-small::after { font-size: 1rem; } .ts-loading.is-large::after { font-size: 2.8rem; } /* ========================================================================== Variables ========================================================================== */ .ts-breadcrumb { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-breadcrumb { display: flex; gap: 0.7rem; color: var(--ts-gray-800); line-height: 1; } /* ========================================================================== Structure ========================================================================== */ .ts-breadcrumb .item { position: relative; text-decoration: none; color: var(--ts-gray-800); padding-right: 1.1rem; } .ts-breadcrumb .item:last-child { padding-right: 0; } .ts-breadcrumb .item .ts-icon { display: inline-block; text-decoration: none; } .ts-breadcrumb a.item:hover { text-decoration: underline; } .ts-breadcrumb .item::after { position: absolute; user-select: none; margin-left: 0.7rem; display: inline-block; pointer-events: none; content: "/"; color: var(--ts-gray-500); } .ts-breadcrumb .item:last-child::after { display: none; } .ts-breadcrumb .divider .ts-icon { font-size: 12px; color: var(--ts-gray-500); } /* ========================================================================== Variations ========================================================================== */ /** * Stepped */ .ts-breadcrumb.is-stepped .item { color: var(--ts-gray-500); } /** * Active */ .ts-breadcrumb .item.is-active { color: var(--accent-color, var(--ts-gray-800)); font-weight: 500; } /** * Customized */ .ts-breadcrumb.is-customized .item::after { content: ""; } .ts-breadcrumb.is-customized .item { padding-right: 0; } /** * Chevroned */ .ts-breadcrumb.is-chevroned .item::after { content: "\f054"; font-size: var(--ts-font-size-12px); line-height: 1.4; } /** * Hyphenated */ .ts-breadcrumb.is-hyphenated .item::after { content: "-"; } .ts-breadcrumb:is(.is-chevroned, .is-hyphenated) .item::after { font-family: "Icons"; font-weight: normal; font-style: normal; text-align: center; -webkit-font-smoothing: antialiased; backface-visibility: hidden; } /** * Sizes */ .ts-breadcrumb.is-small { font-size: var(--ts-font-size-14px); } .ts-breadcrumb.is-large { font-size: var(--ts-font-size-17px); } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-list { color: inherit; display: flex; flex-direction: column; } /* ========================================================================== Structure ========================================================================== */ .ts-list .item { display: inline-block; } /* ========================================================================== Variations ========================================================================== */ .ts-list:is(.is-ordered, .is-unordered) { margin-left: 1.2rem; } .ts-list:is(.is-unordered, .is-ordered) .item { display: list-item; } /** * Unordered */ .ts-list.is-unordered > .item, .ts-list.is-unordered > *:not(.ts-list) > .item { list-style-type: disc; } /** * Ordered */ .ts-list.is-ordered > .item, .ts-list.is-ordered > *:not(.ts-list) > .item { list-style-type: decimal; } /** * Sizes */ .ts-list.is-small { font-size: var(--ts-font-size-14px); } .ts-list.is-large { font-size: var(--ts-font-size-17px); } /* ========================================================================== https://flagicons.lipis.dev/ ========================================================================== */ /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-flag { display: inline-block; background-size: contain; background-position: 50%; background-repeat: no-repeat; vertical-align: middle; text-decoration: inherit; backface-visibility: hidden; text-decoration: none; background-size: cover; box-sizing: border-box; width: 1.4rem; aspect-ratio: 4 / 3; } /* ========================================================================== Structure ========================================================================== */ /** * Section header */ /* ========================================================================== Variations ========================================================================== */ /** * Sqaured */ .ts-flag.is-squared { aspect-ratio: 1 / 1; } /** * Sizes */ .ts-flag.is-small { width: 1.27rem; } .ts-flag.is-large { width: 1.6rem; } .ts-flag.is-small:is(.is-squared, .is-circular) { width: 0.95rem; } .ts-flag:is(.is-squared, .is-circular) { width: 1.05rem; } .ts-flag.is-large:is(.is-squared, .is-circular) { width: 1.2rem; } /** * Rounded */ .ts-flag.is-rounded { border-radius: var(--ts-border-radius-secondary); } /** * Bordered */ .ts-flag.is-bordered { box-shadow: 0 0 0 1px rgb(0 0 0 / 12%); /*var(--ts-gray-300)*/ } /** * Circular */ .ts-flag.is-circular { border-radius: 100rem; aspect-ratio: 1 / 1; } /** * Disabled */ .ts-flag.is-disabled { opacity: 0.5; user-select: none; } /** * Spaced */ .ts-flag.is-spaced { margin-left: 0.45rem; margin-right: 0.45rem; } .ts-flag.is-start-spaced { margin-left: 0.45rem; } .ts-flag.is-end-spaced { margin-right: 0.45rem; } /* ========================================================================== Countires ========================================================================== */ .ts-flag:is(.is-ad-flag, .is-andorra-flag) { background-image: url("./flags/4x3/ad.svg"); } .ts-flag:is(.is-ad-flag, .is-andorra-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ad.svg"); } .ts-flag:is(.is-ae-flag, .is-uae-flag, .is-united-arab-emirates-flag) { background-image: url("./flags/4x3/ae.svg"); } .ts-flag:is(.is-ae-flag, .is-uae-flag, .is-united-arab-emirates-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ae.svg"); } .ts-flag:is(.is-af-flag, .is-afghanistan-flag) { background-image: url("./flags/4x3/af.svg"); } .ts-flag:is(.is-af-flag, .is-afghanistan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/af.svg"); } .ts-flag:is(.is-ag-flag, .is-antigua-flag) { background-image: url("./flags/4x3/ag.svg"); } .ts-flag:is(.is-ag-flag, .is-antigua-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ag.svg"); } .ts-flag:is(.is-ai-flag, .is-anguilla-flag) { background-image: url("./flags/4x3/ai.svg"); } .ts-flag:is(.is-ai-flag, .is-anguilla-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ai.svg"); } .ts-flag:is(.is-al-flag, .is-albania-flag) { background-image: url("./flags/4x3/al.svg"); } .ts-flag:is(.is-al-flag, .is-albania-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/al.svg"); } .ts-flag:is(.is-am-flag, .is-armenia-flag) { background-image: url("./flags/4x3/am.svg"); } .ts-flag:is(.is-am-flag, .is-armenia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/am.svg"); } .ts-flag:is(.is-ao-flag, .is-angola-flag) { background-image: url("./flags/4x3/ao.svg"); } .ts-flag:is(.is-ao-flag, .is-angola-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ao.svg"); } .ts-flag:is(.is-aq-flag, .is-antarctica-flag) { background-image: url("./flags/4x3/aq.svg"); } .ts-flag:is(.is-aq-flag, .is-antarctica-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/aq.svg"); } .ts-flag:is(.is-ar-flag, .is-argentina-flag) { background-image: url("./flags/4x3/ar.svg"); } .ts-flag:is(.is-ar-flag, .is-argentina-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ar.svg"); } .ts-flag:is(.is-as-flag, .is-american-samoa-flag) { background-image: url("./flags/4x3/as.svg"); } .ts-flag:is(.is-as-flag, .is-american-samoa-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/as.svg"); } .ts-flag:is(.is-at-flag, .is-austria-flag) { background-image: url("./flags/4x3/at.svg"); } .ts-flag:is(.is-at-flag, .is-austria-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/at.svg"); } .ts-flag:is(.is-au-flag, .is-australia-flag) { background-image: url("./flags/4x3/au.svg"); } .ts-flag:is(.is-au-flag, .is-australia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/au.svg"); } .ts-flag:is(.is-aw-flag, .is-aruba-flag) { background-image: url("./flags/4x3/aw.svg"); } .ts-flag:is(.is-aw-flag, .is-aruba-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/aw.svg"); } .ts-flag:is(.is-ax-flag, .is-aland-islands-flag) { background-image: url("./flags/4x3/ax.svg"); } .ts-flag:is(.is-ax-flag, .is-aland-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ax.svg"); } .ts-flag:is(.is-az-flag, .is-azerbaijan-flag) { background-image: url("./flags/4x3/az.svg"); } .ts-flag:is(.is-az-flag, .is-azerbaijan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/az.svg"); } .ts-flag:is(.is-ba-flag, .is-bosnia-flag) { background-image: url("./flags/4x3/ba.svg"); } .ts-flag:is(.is-ba-flag, .is-bosnia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ba.svg"); } .ts-flag:is(.is-bb-flag, .is-barbados-flag) { background-image: url("./flags/4x3/bb.svg"); } .ts-flag:is(.is-bb-flag, .is-barbados-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bb.svg"); } .ts-flag:is(.is-bd-flag, .is-bangladesh-flag) { background-image: url("./flags/4x3/bd.svg"); } .ts-flag:is(.is-bd-flag, .is-bangladesh-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bd.svg"); } .ts-flag:is(.is-be-flag, .is-belgium-flag) { background-image: url("./flags/4x3/be.svg"); } .ts-flag:is(.is-be-flag, .is-belgium-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/be.svg"); } .ts-flag:is(.is-bf-flag, .is-burkina-faso-flag) { background-image: url("./flags/4x3/bf.svg"); } .ts-flag:is(.is-bf-flag, .is-burkina-faso-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bf.svg"); } .ts-flag:is(.is-bg-flag, .is-bulgaria-flag) { background-image: url("./flags/4x3/bg.svg"); } .ts-flag:is(.is-bg-flag, .is-bulgaria-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bg.svg"); } .ts-flag:is(.is-bh-flag, .is-bahrain-flag) { background-image: url("./flags/4x3/bh.svg"); } .ts-flag:is(.is-bh-flag, .is-bahrain-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bh.svg"); } .ts-flag:is(.is-bi-flag, .is-burundi-flag) { background-image: url("./flags/4x3/bi.svg"); } .ts-flag:is(.is-bi-flag, .is-burundi-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bi.svg"); } .ts-flag:is(.is-bj-flag, .is-benin-flag) { background-image: url("./flags/4x3/bj.svg"); } .ts-flag:is(.is-bj-flag, .is-benin-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bj.svg"); } .ts-flag:is(.is-bl-flag, .is-saint-barthélemy-flag, .is-saint-barthelemy-flag) { background-image: url("./flags/4x3/bl.svg"); } .ts-flag:is(.is-bl-flag, .is-saint-barthélemy-flag, .is-saint-barthelemy-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bl.svg"); } .ts-flag:is(.is-bm-flag, .is-bermuda-flag) { background-image: url("./flags/4x3/bm.svg"); } .ts-flag:is(.is-bm-flag, .is-bermuda-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bm.svg"); } .ts-flag:is(.is-bn-flag, .is-brunei-flag) { background-image: url("./flags/4x3/bn.svg"); } .ts-flag:is(.is-bn-flag, .is-brunei-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bn.svg"); } .ts-flag:is(.is-bo-flag, .is-bolivia-flag) { background-image: url("./flags/4x3/bo.svg"); } .ts-flag:is(.is-bo-flag, .is-bolivia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bo.svg"); } .ts-flag:is(.is-bq-flag, .is-caribbean-netherlands-flag) { background-image: url("./flags/4x3/bq.svg"); } .ts-flag:is(.is-bq-flag, .is-caribbean-netherlands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bq.svg"); } .ts-flag:is(.is-br-flag, .is-brazil-flag) { background-image: url("./flags/4x3/br.svg"); } .ts-flag:is(.is-br-flag, .is-brazil-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/br.svg"); } .ts-flag:is(.is-bs-flag, .is-bahamas-flag) { background-image: url("./flags/4x3/bs.svg"); } .ts-flag:is(.is-bs-flag, .is-bahamas-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bs.svg"); } .ts-flag:is(.is-bt-flag, .is-bhutan-flag) { background-image: url("./flags/4x3/bt.svg"); } .ts-flag:is(.is-bt-flag, .is-bhutan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bt.svg"); } .ts-flag:is(.is-bv-flag, .is-bouvet-island-flag) { background-image: url("./flags/4x3/bv.svg"); } .ts-flag:is(.is-bv-flag, .is-bouvet-island-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bv.svg"); } .ts-flag:is(.is-bw-flag, .is-botswana-flag) { background-image: url("./flags/4x3/bw.svg"); } .ts-flag:is(.is-bw-flag, .is-botswana-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bw.svg"); } .ts-flag:is(.is-by-flag, .is-belarus-flag) { background-image: url("./flags/4x3/by.svg"); } .ts-flag:is(.is-by-flag, .is-belarus-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/by.svg"); } .ts-flag:is(.is-bz-flag, .is-belize-flag) { background-image: url("./flags/4x3/bz.svg"); } .ts-flag:is(.is-bz-flag, .is-belize-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/bz.svg"); } .ts-flag:is(.is-ca-flag, .is-canada-flag) { background-image: url("./flags/4x3/ca.svg"); } .ts-flag:is(.is-ca-flag, .is-canada-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ca.svg"); } .ts-flag:is(.is-cc-flag, .is-cocos-islands-flag) { background-image: url("./flags/4x3/cc.svg"); } .ts-flag:is(.is-cc-flag, .is-cocos-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cc.svg"); } .ts-flag:is(.is-cd-flag, .is-congo-flag) { background-image: url("./flags/4x3/cd.svg"); } .ts-flag:is(.is-cd-flag, .is-congo-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cd.svg"); } .ts-flag:is(.is-cf-flag, .is-central-african-republic-flag) { background-image: url("./flags/4x3/cf.svg"); } .ts-flag:is(.is-cf-flag, .is-central-african-republic-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cf.svg"); } .ts-flag:is(.is-cg-flag, .is-congo-brazzaville-flag) { background-image: url("./flags/4x3/cg.svg"); } .ts-flag:is(.is-cg-flag, .is-congo-brazzaville-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cg.svg"); } .ts-flag:is(.is-ch-flag, .is-switzerland-flag) { background-image: url("./flags/4x3/ch.svg"); } .ts-flag:is(.is-ch-flag, .is-switzerland-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ch.svg"); } .ts-flag:is(.is-ci-flag, .is-cote-divoire-flag) { background-image: url("./flags/4x3/ci.svg"); } .ts-flag:is(.is-ci-flag, .is-cote-divoire-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ci.svg"); } .ts-flag:is(.is-ck-flag, .is-cook-islands-flag) { background-image: url("./flags/4x3/ck.svg"); } .ts-flag:is(.is-ck-flag, .is-cook-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ck.svg"); } .ts-flag:is(.is-cl-flag, .is-chile-flag) { background-image: url("./flags/4x3/cl.svg"); } .ts-flag:is(.is-cl-flag, .is-chile-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cl.svg"); } .ts-flag:is(.is-cm-flag, .is-cameroon-flag) { background-image: url("./flags/4x3/cm.svg"); } .ts-flag:is(.is-cm-flag, .is-cameroon-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cm.svg"); } .ts-flag:is(.is-cn-flag, .is-china-flag, .is-peoples-republic-of-china-flag) { background-image: url("./flags/4x3/cn.svg"); } .ts-flag:is(.is-cn-flag, .is-china-flag, .is-peoples-republic-of-china-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cn.svg"); } .ts-flag:is(.is-co-flag, .is-colombia-flag) { background-image: url("./flags/4x3/co.svg"); } .ts-flag:is(.is-co-flag, .is-colombia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/co.svg"); } .ts-flag:is(.is-cr-flag, .is-costa-rica-flag) { background-image: url("./flags/4x3/cr.svg"); } .ts-flag:is(.is-cr-flag, .is-costa-rica-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cr.svg"); } .ts-flag:is(.is-cu-flag, .is-cuba-flag) { background-image: url("./flags/4x3/cu.svg"); } .ts-flag:is(.is-cu-flag, .is-cuba-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cu.svg"); } .ts-flag:is(.is-cv-flag, .is-cape-verde-flag) { background-image: url("./flags/4x3/cv.svg"); } .ts-flag:is(.is-cv-flag, .is-cape-verde-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cv.svg"); } .ts-flag:is(.is-cw-flag, .is-curaçao-flag, .is-curacao-flag) { background-image: url("./flags/4x3/cw.svg"); } .ts-flag:is(.is-cw-flag, .is-curaçao-flag, .is-curacao-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cw.svg"); } .ts-flag:is(.is-cx-flag, .is-christmas-island-flag) { background-image: url("./flags/4x3/cx.svg"); } .ts-flag:is(.is-cx-flag, .is-christmas-island-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cx.svg"); } .ts-flag:is(.is-cy-flag, .is-cyprus-flag) { background-image: url("./flags/4x3/cy.svg"); } .ts-flag:is(.is-cy-flag, .is-cyprus-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cy.svg"); } .ts-flag:is(.is-cz-flag, .is-czech-republic-flag) { background-image: url("./flags/4x3/cz.svg"); } .ts-flag:is(.is-cz-flag, .is-czech-republic-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/cz.svg"); } .ts-flag:is(.is-de-flag, .is-germany-flag) { background-image: url("./flags/4x3/de.svg"); } .ts-flag:is(.is-de-flag, .is-germany-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/de.svg"); } .ts-flag:is(.is-dj-flag, .is-djibouti-flag) { background-image: url("./flags/4x3/dj.svg"); } .ts-flag:is(.is-dj-flag, .is-djibouti-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/dj.svg"); } .ts-flag:is(.is-dk-flag, .is-denmark-flag) { background-image: url("./flags/4x3/dk.svg"); } .ts-flag:is(.is-dk-flag, .is-denmark-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/dk.svg"); } .ts-flag:is(.is-dm-flag, .is-dominica-flag) { background-image: url("./flags/4x3/dm.svg"); } .ts-flag:is(.is-dm-flag, .is-dominica-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/dm.svg"); } .ts-flag:is(.is-do-flag, .is-dominican-republic-flag) { background-image: url("./flags/4x3/do.svg"); } .ts-flag:is(.is-do-flag, .is-dominican-republic-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/do.svg"); } .ts-flag:is(.is-dz-flag, .is-algeria-flag) { background-image: url("./flags/4x3/dz.svg"); } .ts-flag:is(.is-dz-flag, .is-algeria-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/dz.svg"); } .ts-flag:is(.is-ec-flag, .is-ecuador-flag) { background-image: url("./flags/4x3/ec.svg"); } .ts-flag:is(.is-ec-flag, .is-ecuador-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ec.svg"); } .ts-flag:is(.is-ee-flag, .is-estonia-flag) { background-image: url("./flags/4x3/ee.svg"); } .ts-flag:is(.is-ee-flag, .is-estonia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ee.svg"); } .ts-flag:is(.is-eg-flag, .is-egypt-flag) { background-image: url("./flags/4x3/eg.svg"); } .ts-flag:is(.is-eg-flag, .is-egypt-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/eg.svg"); } .ts-flag:is(.is-eh-flag, .is-western-sahara-flag) { background-image: url("./flags/4x3/eh.svg"); } .ts-flag:is(.is-eh-flag, .is-western-sahara-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/eh.svg"); } .ts-flag:is(.is-er-flag, .is-eritrea-flag) { background-image: url("./flags/4x3/er.svg"); } .ts-flag:is(.is-er-flag, .is-eritrea-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/er.svg"); } .ts-flag:is(.is-es-flag, .is-spain-flag) { background-image: url("./flags/4x3/es.svg"); } .ts-flag:is(.is-es-flag, .is-spain-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/es.svg"); } .ts-flag:is(.is-es-ct-flag, .is-scotland-flag) { background-image: url("./flags/4x3/es-ct.svg"); } .ts-flag:is(.is-es-ct-flag, .is-scotland-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/es-ct.svg"); } .ts-flag:is(.is-et-flag, .is-ethiopia-flag) { background-image: url("./flags/4x3/et.svg"); } .ts-flag:is(.is-et-flag, .is-ethiopia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/et.svg"); } .ts-flag:is(.is-eu-flag, .is-european-union-flag) { background-image: url("./flags/4x3/eu.svg"); } .ts-flag:is(.is-eu-flag, .is-european-union-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/eu.svg"); } .ts-flag:is(.is-fi-flag, .is-finland-flag) { background-image: url("./flags/4x3/fi.svg"); } .ts-flag:is(.is-fi-flag, .is-finland-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/fi.svg"); } .ts-flag:is(.is-fj-flag, .is-fiji-flag) { background-image: url("./flags/4x3/fj.svg"); } .ts-flag:is(.is-fj-flag, .is-fiji-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/fj.svg"); } .ts-flag:is(.is-fk-flag, .is-falkland-islands-flag) { background-image: url("./flags/4x3/fk.svg"); } .ts-flag:is(.is-fk-flag, .is-falkland-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/fk.svg"); } .ts-flag:is(.is-fm-flag, .is-micronesia-flag) { background-image: url("./flags/4x3/fm.svg"); } .ts-flag:is(.is-fm-flag, .is-micronesia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/fm.svg"); } .ts-flag:is(.is-fo-flag, .is-faroe-islands-flag) { background-image: url("./flags/4x3/fo.svg"); } .ts-flag:is(.is-fo-flag, .is-faroe-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/fo.svg"); } .ts-flag:is(.is-fr-flag, .is-france-flag) { background-image: url("./flags/4x3/fr.svg"); } .ts-flag:is(.is-fr-flag, .is-france-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/fr.svg"); } .ts-flag:is(.is-ga-flag, .is-gabon-flag) { background-image: url("./flags/4x3/ga.svg"); } .ts-flag:is(.is-ga-flag, .is-gabon-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ga.svg"); } .ts-flag:is(.is-gb-flag, .is-united-kingdom-flag) { background-image: url("./flags/4x3/gb.svg"); } .ts-flag:is(.is-gb-flag, .is-united-kingdom-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gb.svg"); } .ts-flag:is(.is-gb-eng-flag, .is-england-flag) { background-image: url("./flags/4x3/gb-eng.svg"); } .ts-flag:is(.is-gb-eng-flag, .is-england-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gb-eng.svg"); } .ts-flag:is(.is-gb-nir-flag, .is-northern-ireland-flag) { background-image: url("./flags/4x3/gb-nir.svg"); } .ts-flag:is(.is-gb-nir-flag, .is-northern-ireland-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gb-nir.svg"); } .ts-flag:is(.is-gb-sct-flag, .is-scotland-flag) { background-image: url("./flags/4x3/gb-sct.svg"); } .ts-flag:is(.is-gb-sct-flag, .is-scotland-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gb-sct.svg"); } .ts-flag:is(.is-gb-wls-flag, .is-wales-flag) { background-image: url("./flags/4x3/gb-wls.svg"); } .ts-flag:is(.is-gb-wls-flag, .is-wales-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gb-wls.svg"); } .ts-flag:is(.is-gd-flag, .is-grenada-flag) { background-image: url("./flags/4x3/gd.svg"); } .ts-flag:is(.is-gd-flag, .is-grenada-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gd.svg"); } .ts-flag:is(.is-ge-flag, .is-georgia-flag) { background-image: url("./flags/4x3/ge.svg"); } .ts-flag:is(.is-ge-flag, .is-georgia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ge.svg"); } .ts-flag:is(.is-gf-flag, .is-french-guiana-flag) { background-image: url("./flags/4x3/gf.svg"); } .ts-flag:is(.is-gf-flag, .is-french-guiana-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gf.svg"); } .ts-flag:is(.is-gg-flag, .is-guernsey-flag) { background-image: url("./flags/4x3/gg.svg"); } .ts-flag:is(.is-gg-flag, .is-guernsey-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gg.svg"); } .ts-flag:is(.is-gh-flag, .is-ghana-flag) { background-image: url("./flags/4x3/gh.svg"); } .ts-flag:is(.is-gh-flag, .is-ghana-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gh.svg"); } .ts-flag:is(.is-gi-flag, .is-gibraltar-flag) { background-image: url("./flags/4x3/gi.svg"); } .ts-flag:is(.is-gi-flag, .is-gibraltar-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gi.svg"); } .ts-flag:is(.is-gl-flag, .is-greenland-flag) { background-image: url("./flags/4x3/gl.svg"); } .ts-flag:is(.is-gl-flag, .is-greenland-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gl.svg"); } .ts-flag:is(.is-gm-flag, .is-gambia-flag) { background-image: url("./flags/4x3/gm.svg"); } .ts-flag:is(.is-gm-flag, .is-gambia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gm.svg"); } .ts-flag:is(.is-gn-flag, .is-guinea-flag) { background-image: url("./flags/4x3/gn.svg"); } .ts-flag:is(.is-gn-flag, .is-guinea-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gn.svg"); } .ts-flag:is(.is-gp-flag, .is-guadeloupe-flag) { background-image: url("./flags/4x3/gp.svg"); } .ts-flag:is(.is-gp-flag, .is-guadeloupe-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gp.svg"); } .ts-flag:is(.is-gq-flag, .is-equatorial-guinea-flag) { background-image: url("./flags/4x3/gq.svg"); } .ts-flag:is(.is-gq-flag, .is-equatorial-guinea-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gq.svg"); } .ts-flag:is(.is-gr-flag, .is-greece-flag) { background-image: url("./flags/4x3/gr.svg"); } .ts-flag:is(.is-gr-flag, .is-greece-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gr.svg"); } .ts-flag:is(.is-gs-flag, .is-sandwich-islands-flag) { background-image: url("./flags/4x3/gs.svg"); } .ts-flag:is(.is-gs-flag, .is-sandwich-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gs.svg"); } .ts-flag:is(.is-gt-flag, .is-guatemala-flag) { background-image: url("./flags/4x3/gt.svg"); } .ts-flag:is(.is-gt-flag, .is-guatemala-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gt.svg"); } .ts-flag:is(.is-gu-flag, .is-guam-flag) { background-image: url("./flags/4x3/gu.svg"); } .ts-flag:is(.is-gu-flag, .is-guam-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gu.svg"); } .ts-flag:is(.is-gw-flag, .is-guinea-bissau-flag) { background-image: url("./flags/4x3/gw.svg"); } .ts-flag:is(.is-gw-flag, .is-guinea-bissau-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gw.svg"); } .ts-flag:is(.is-gy-flag, .is-guyana-flag) { background-image: url("./flags/4x3/gy.svg"); } .ts-flag:is(.is-gy-flag, .is-guyana-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/gy.svg"); } .ts-flag:is(.is-hk-flag, .is-hong-kong-flag) { background-image: url("./flags/4x3/hk.svg"); } .ts-flag:is(.is-hk-flag, .is-hong-kong-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/hk.svg"); } .ts-flag:is(.is-hm-flag, .is-heard-island-flag) { background-image: url("./flags/4x3/hm.svg"); } .ts-flag:is(.is-hm-flag, .is-heard-island-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/hm.svg"); } .ts-flag:is(.is-hn-flag, .is-honduras-flag) { background-image: url("./flags/4x3/hn.svg"); } .ts-flag:is(.is-hn-flag, .is-honduras-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/hn.svg"); } .ts-flag:is(.is-hr-flag, .is-croatia-flag) { background-image: url("./flags/4x3/hr.svg"); } .ts-flag:is(.is-hr-flag, .is-croatia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/hr.svg"); } .ts-flag:is(.is-ht-flag, .is-haiti-flag) { background-image: url("./flags/4x3/ht.svg"); } .ts-flag:is(.is-ht-flag, .is-haiti-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ht.svg"); } .ts-flag:is(.is-hu-flag, .is-hungary-flag) { background-image: url("./flags/4x3/hu.svg"); } .ts-flag:is(.is-hu-flag, .is-hungary-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/hu.svg"); } .ts-flag:is(.is-id-flag, .is-indonesia-flag) { background-image: url("./flags/4x3/id.svg"); } .ts-flag:is(.is-id-flag, .is-indonesia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/id.svg"); } .ts-flag:is(.is-ie-flag, .is-ireland-flag) { background-image: url("./flags/4x3/ie.svg"); } .ts-flag:is(.is-ie-flag, .is-ireland-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ie.svg"); } .ts-flag:is(.is-il-flag, .is-israel-flag) { background-image: url("./flags/4x3/il.svg"); } .ts-flag:is(.is-il-flag, .is-israel-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/il.svg"); } .ts-flag:is(.is-im-flag, .is-isle-of-man-flag) { background-image: url("./flags/4x3/im.svg"); } .ts-flag:is(.is-im-flag, .is-isle-of-man-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/im.svg"); } .ts-flag:is(.is-in-flag, .is-india-flag) { background-image: url("./flags/4x3/in.svg"); } .ts-flag:is(.is-in-flag, .is-india-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/in.svg"); } .ts-flag:is(.is-io-flag, .is-indian-ocean-territory-flag) { background-image: url("./flags/4x3/io.svg"); } .ts-flag:is(.is-io-flag, .is-indian-ocean-territory-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/io.svg"); } .ts-flag:is(.is-iq-flag, .is-iraq-flag) { background-image: url("./flags/4x3/iq.svg"); } .ts-flag:is(.is-iq-flag, .is-iraq-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/iq.svg"); } .ts-flag:is(.is-ir-flag, .is-iran-flag) { background-image: url("./flags/4x3/ir.svg"); } .ts-flag:is(.is-ir-flag, .is-iran-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ir.svg"); } .ts-flag:is(.is-is-flag, .is-iceland-flag) { background-image: url("./flags/4x3/is.svg"); } .ts-flag:is(.is-is-flag, .is-iceland-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/is.svg"); } .ts-flag:is(.is-it-flag, .is-italy-flag) { background-image: url("./flags/4x3/it.svg"); } .ts-flag:is(.is-it-flag, .is-italy-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/it.svg"); } .ts-flag:is(.is-je-flag, .is-jersey-flag) { background-image: url("./flags/4x3/je.svg"); } .ts-flag:is(.is-je-flag, .is-jersey-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/je.svg"); } .ts-flag:is(.is-jm-flag, .is-jamaica-flag) { background-image: url("./flags/4x3/jm.svg"); } .ts-flag:is(.is-jm-flag, .is-jamaica-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/jm.svg"); } .ts-flag:is(.is-jo-flag, .is-jordan-flag) { background-image: url("./flags/4x3/jo.svg"); } .ts-flag:is(.is-jo-flag, .is-jordan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/jo.svg"); } .ts-flag:is(.is-jp-flag, .is-japan-flag) { background-image: url("./flags/4x3/jp.svg"); } .ts-flag:is(.is-jp-flag, .is-japan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/jp.svg"); } .ts-flag:is(.is-ke-flag, .is-kenya-flag) { background-image: url("./flags/4x3/ke.svg"); } .ts-flag:is(.is-ke-flag, .is-kenya-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ke.svg"); } .ts-flag:is(.is-kg-flag, .is-kyrgyzstan-flag) { background-image: url("./flags/4x3/kg.svg"); } .ts-flag:is(.is-kg-flag, .is-kyrgyzstan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/kg.svg"); } .ts-flag:is(.is-kh-flag, .is-cambodia-flag) { background-image: url("./flags/4x3/kh.svg"); } .ts-flag:is(.is-kh-flag, .is-cambodia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/kh.svg"); } .ts-flag:is(.is-ki-flag, .is-kiribati-flag) { background-image: url("./flags/4x3/ki.svg"); } .ts-flag:is(.is-ki-flag, .is-kiribati-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ki.svg"); } .ts-flag:is(.is-km-flag, .is-comoros-flag) { background-image: url("./flags/4x3/km.svg"); } .ts-flag:is(.is-km-flag, .is-comoros-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/km.svg"); } .ts-flag:is(.is-kn-flag, .is-saint-kitts-and-nevis-flag, .is-saint-kitts-flag, .is-nevis-flag) { background-image: url("./flags/4x3/kn.svg"); } .ts-flag:is(.is-kn-flag, .is-saint-kitts-and-nevis-flag, .is-saint-kitts-flag, .is-nevis-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/kn.svg"); } .ts-flag:is(.is-kp-flag, .is-north-korea-flag) { background-image: url("./flags/4x3/kp.svg"); } .ts-flag:is(.is-kp-flag, .is-north-korea-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/kp.svg"); } .ts-flag:is(.is-kr-flag, .is-south-korea-flag, .is-korea-flag) { background-image: url("./flags/4x3/kr.svg"); } .ts-flag:is(.is-kr-flag, .is-south-korea-flag, .is-korea-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/kr.svg"); } .ts-flag:is(.is-kw-flag, .is-kuwait-flag) { background-image: url("./flags/4x3/kw.svg"); } .ts-flag:is(.is-kw-flag, .is-kuwait-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/kw.svg"); } .ts-flag:is(.is-ky-flag, .is-cayman-islands-flag) { background-image: url("./flags/4x3/ky.svg"); } .ts-flag:is(.is-ky-flag, .is-cayman-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ky.svg"); } .ts-flag:is(.is-kz-flag, .is-kazakhstan-flag) { background-image: url("./flags/4x3/kz.svg"); } .ts-flag:is(.is-kz-flag, .is-kazakhstan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/kz.svg"); } .ts-flag:is(.is-la-flag, .is-laos-flag) { background-image: url("./flags/4x3/la.svg"); } .ts-flag:is(.is-la-flag, .is-laos-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/la.svg"); } .ts-flag:is(.is-lb-flag, .is-lebanon-flag) { background-image: url("./flags/4x3/lb.svg"); } .ts-flag:is(.is-lb-flag, .is-lebanon-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/lb.svg"); } .ts-flag:is(.is-lc-flag, .is-saint-lucia-flag) { background-image: url("./flags/4x3/lc.svg"); } .ts-flag:is(.is-lc-flag, .is-saint-lucia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/lc.svg"); } .ts-flag:is(.is-li-flag, .is-liechtenstein-flag) { background-image: url("./flags/4x3/li.svg"); } .ts-flag:is(.is-li-flag, .is-liechtenstein-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/li.svg"); } .ts-flag:is(.is-lk-flag, .is-sri-lanka-flag) { background-image: url("./flags/4x3/lk.svg"); } .ts-flag:is(.is-lk-flag, .is-sri-lanka-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/lk.svg"); } .ts-flag:is(.is-lr-flag, .is-liberia-flag) { background-image: url("./flags/4x3/lr.svg"); } .ts-flag:is(.is-lr-flag, .is-liberia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/lr.svg"); } .ts-flag:is(.is-ls-flag, .is-lesotho-flag) { background-image: url("./flags/4x3/ls.svg"); } .ts-flag:is(.is-ls-flag, .is-lesotho-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ls.svg"); } .ts-flag:is(.is-lt-flag, .is-lithuania-flag) { background-image: url("./flags/4x3/lt.svg"); } .ts-flag:is(.is-lt-flag, .is-lithuania-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/lt.svg"); } .ts-flag:is(.is-lu-flag, .is-luxembourg-flag) { background-image: url("./flags/4x3/lu.svg"); } .ts-flag:is(.is-lu-flag, .is-luxembourg-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/lu.svg"); } .ts-flag:is(.is-lv-flag, .is-latvia-flag) { background-image: url("./flags/4x3/lv.svg"); } .ts-flag:is(.is-lv-flag, .is-latvia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/lv.svg"); } .ts-flag:is(.is-ly-flag, .is-libya-flag) { background-image: url("./flags/4x3/ly.svg"); } .ts-flag:is(.is-ly-flag, .is-libya-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ly.svg"); } .ts-flag:is(.is-ma-flag, .is-morocco-flag) { background-image: url("./flags/4x3/ma.svg"); } .ts-flag:is(.is-ma-flag, .is-morocco-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ma.svg"); } .ts-flag:is(.is-mc-flag, .is-monaco-flag) { background-image: url("./flags/4x3/mc.svg"); } .ts-flag:is(.is-mc-flag, .is-monaco-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mc.svg"); } .ts-flag:is(.is-md-flag, .is-moldova-flag) { background-image: url("./flags/4x3/md.svg"); } .ts-flag:is(.is-md-flag, .is-moldova-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/md.svg"); } .ts-flag:is(.is-me-flag, .is-montenegro-flag) { background-image: url("./flags/4x3/me.svg"); } .ts-flag:is(.is-me-flag, .is-montenegro-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/me.svg"); } .ts-flag:is(.is-mf-flag, .is-saint-martin-flag) { background-image: url("./flags/4x3/mf.svg"); } .ts-flag:is(.is-mf-flag, .is-saint-martin-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mf.svg"); } .ts-flag:is(.is-mg-flag, .is-madagascar-flag) { background-image: url("./flags/4x3/mg.svg"); } .ts-flag:is(.is-mg-flag, .is-madagascar-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mg.svg"); } .ts-flag:is(.is-mh-flag, .is-marshall-islands-flag) { background-image: url("./flags/4x3/mh.svg"); } .ts-flag:is(.is-mh-flag, .is-marshall-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mh.svg"); } .ts-flag:is(.is-mk-flag, .is-macedonia-flag) { background-image: url("./flags/4x3/mk.svg"); } .ts-flag:is(.is-mk-flag, .is-macedonia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mk.svg"); } .ts-flag:is(.is-ml-flag, .is-mali-flag) { background-image: url("./flags/4x3/ml.svg"); } .ts-flag:is(.is-ml-flag, .is-mali-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ml.svg"); } .ts-flag:is(.is-mm-flag, .is-burma-flag, .is-myanmar-flag) { background-image: url("./flags/4x3/mm.svg"); } .ts-flag:is(.is-mm-flag, .is-burma-flag, .is-myanmar-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mm.svg"); } .ts-flag:is(.is-mn-flag, .is-mongolia-flag) { background-image: url("./flags/4x3/mn.svg"); } .ts-flag:is(.is-mn-flag, .is-mongolia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mn.svg"); } .ts-flag:is(.is-mo-flag, .is-macau-flag) { background-image: url("./flags/4x3/mo.svg"); } .ts-flag:is(.is-mo-flag, .is-macau-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mo.svg"); } .ts-flag:is(.is-mp-flag, .is-northern-mariana-islands-flag) { background-image: url("./flags/4x3/mp.svg"); } .ts-flag:is(.is-mp-flag, .is-northern-mariana-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mp.svg"); } .ts-flag:is(.is-mq-flag, .is-martinique-flag) { background-image: url("./flags/4x3/mq.svg"); } .ts-flag:is(.is-mq-flag, .is-martinique-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mq.svg"); } .ts-flag:is(.is-mr-flag, .is-mauritania-flag) { background-image: url("./flags/4x3/mr.svg"); } .ts-flag:is(.is-mr-flag, .is-mauritania-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mr.svg"); } .ts-flag:is(.is-ms-flag, .is-montserrat-flag) { background-image: url("./flags/4x3/ms.svg"); } .ts-flag:is(.is-ms-flag, .is-montserrat-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ms.svg"); } .ts-flag:is(.is-mt-flag, .is-malta-flag) { background-image: url("./flags/4x3/mt.svg"); } .ts-flag:is(.is-mt-flag, .is-malta-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mt.svg"); } .ts-flag:is(.is-mu-flag, .is-mauritius-flag) { background-image: url("./flags/4x3/mu.svg"); } .ts-flag:is(.is-mu-flag, .is-mauritius-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mu.svg"); } .ts-flag:is(.is-mv-flag, .is-maldives-flag) { background-image: url("./flags/4x3/mv.svg"); } .ts-flag:is(.is-mv-flag, .is-maldives-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mv.svg"); } .ts-flag:is(.is-mw-flag, .is-malawi-flag) { background-image: url("./flags/4x3/mw.svg"); } .ts-flag:is(.is-mw-flag, .is-malawi-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mw.svg"); } .ts-flag:is(.is-mx-flag, .is-mexico-flag) { background-image: url("./flags/4x3/mx.svg"); } .ts-flag:is(.is-mx-flag, .is-mexico-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mx.svg"); } .ts-flag:is(.is-my-flag, .is-malaysia-flag) { background-image: url("./flags/4x3/my.svg"); } .ts-flag:is(.is-my-flag, .is-malaysia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/my.svg"); } .ts-flag:is(.is-mz-flag, .is-mozambique-flag) { background-image: url("./flags/4x3/mz.svg"); } .ts-flag:is(.is-mz-flag, .is-mozambique-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/mz.svg"); } .ts-flag:is(.is-na-flag, .is-namibia-flag) { background-image: url("./flags/4x3/na.svg"); } .ts-flag:is(.is-na-flag, .is-namibia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/na.svg"); } .ts-flag:is(.is-nc-flag, .is-new-caledonia-flag) { background-image: url("./flags/4x3/nc.svg"); } .ts-flag:is(.is-nc-flag, .is-new-caledonia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/nc.svg"); } .ts-flag:is(.is-ne-flag, .is-niger-flag) { background-image: url("./flags/4x3/ne.svg"); } .ts-flag:is(.is-ne-flag, .is-niger-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ne.svg"); } .ts-flag:is(.is-nf-flag, .is-norfolk-island-flag) { background-image: url("./flags/4x3/nf.svg"); } .ts-flag:is(.is-nf-flag, .is-norfolk-island-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/nf.svg"); } .ts-flag:is(.is-ng-flag, .is-nigeria-flag) { background-image: url("./flags/4x3/ng.svg"); } .ts-flag:is(.is-ng-flag, .is-nigeria-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ng.svg"); } .ts-flag:is(.is-ni-flag, .is-nicaragua-flag) { background-image: url("./flags/4x3/ni.svg"); } .ts-flag:is(.is-ni-flag, .is-nicaragua-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ni.svg"); } .ts-flag:is(.is-nl-flag, .is-netherlands-flag) { background-image: url("./flags/4x3/nl.svg"); } .ts-flag:is(.is-nl-flag, .is-netherlands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/nl.svg"); } .ts-flag:is(.is-no-flag, .is-norway-flag) { background-image: url("./flags/4x3/no.svg"); } .ts-flag:is(.is-no-flag, .is-norway-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/no.svg"); } .ts-flag:is(.is-np-flag, .is-nepal-flag) { background-image: url("./flags/4x3/np.svg"); } .ts-flag:is(.is-np-flag, .is-nepal-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/np.svg"); } .ts-flag:is(.is-nr-flag, .is-nauru-flag) { background-image: url("./flags/4x3/nr.svg"); } .ts-flag:is(.is-nr-flag, .is-nauru-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/nr.svg"); } .ts-flag:is(.is-nu-flag, .is-niue-flag) { background-image: url("./flags/4x3/nu.svg"); } .ts-flag:is(.is-nu-flag, .is-niue-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/nu.svg"); } .ts-flag:is(.is-nz-flag, .is-new-zealand-flag) { background-image: url("./flags/4x3/nz.svg"); } .ts-flag:is(.is-nz-flag, .is-new-zealand-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/nz.svg"); } .ts-flag:is(.is-om-flag, .is-oman-flag) { background-image: url("./flags/4x3/om.svg"); } .ts-flag:is(.is-om-flag, .is-oman-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/om.svg"); } .ts-flag:is(.is-pa-flag, .is-panama-flag) { background-image: url("./flags/4x3/pa.svg"); } .ts-flag:is(.is-pa-flag, .is-panama-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/pa.svg"); } .ts-flag:is(.is-pe-flag, .is-peru-flag) { background-image: url("./flags/4x3/pe.svg"); } .ts-flag:is(.is-pe-flag, .is-peru-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/pe.svg"); } .ts-flag:is(.is-pf-flag, .is-french-polynesia-flag) { background-image: url("./flags/4x3/pf.svg"); } .ts-flag:is(.is-pf-flag, .is-french-polynesia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/pf.svg"); } .ts-flag:is(.is-pg-flag, .is-new-guinea-flag) { background-image: url("./flags/4x3/pg.svg"); } .ts-flag:is(.is-pg-flag, .is-new-guinea-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/pg.svg"); } .ts-flag:is(.is-ph-flag, .is-philippines-flag) { background-image: url("./flags/4x3/ph.svg"); } .ts-flag:is(.is-ph-flag, .is-philippines-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ph.svg"); } .ts-flag:is(.is-pk-flag, .is-pakistan-flag) { background-image: url("./flags/4x3/pk.svg"); } .ts-flag:is(.is-pk-flag, .is-pakistan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/pk.svg"); } .ts-flag:is(.is-pl-flag, .is-poland-flag) { background-image: url("./flags/4x3/pl.svg"); } .ts-flag:is(.is-pl-flag, .is-poland-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/pl.svg"); } .ts-flag:is(.is-pm-flag, .is-saint-pierre-flag) { background-image: url("./flags/4x3/pm.svg"); } .ts-flag:is(.is-pm-flag, .is-saint-pierre-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/pm.svg"); } .ts-flag:is(.is-pn-flag, .is-pitcairn-islands-flag) { background-image: url("./flags/4x3/pn.svg"); } .ts-flag:is(.is-pn-flag, .is-pitcairn-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/pn.svg"); } .ts-flag:is(.is-pr-flag, .is-puerto-rico-flag) { background-image: url("./flags/4x3/pr.svg"); } .ts-flag:is(.is-pr-flag, .is-puerto-rico-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/pr.svg"); } .ts-flag:is(.is-ps-flag, .is-palestine-flag) { background-image: url("./flags/4x3/ps.svg"); } .ts-flag:is(.is-ps-flag, .is-palestine-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ps.svg"); } .ts-flag:is(.is-pt-flag, .is-portugal-flag) { background-image: url("./flags/4x3/pt.svg"); } .ts-flag:is(.is-pt-flag, .is-portugal-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/pt.svg"); } .ts-flag:is(.is-pw-flag, .is-palau-flag) { background-image: url("./flags/4x3/pw.svg"); } .ts-flag:is(.is-pw-flag, .is-palau-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/pw.svg"); } .ts-flag:is(.is-py-flag, .is-paraguay-flag) { background-image: url("./flags/4x3/py.svg"); } .ts-flag:is(.is-py-flag, .is-paraguay-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/py.svg"); } .ts-flag:is(.is-qa-flag, .is-qatar-flag) { background-image: url("./flags/4x3/qa.svg"); } .ts-flag:is(.is-qa-flag, .is-qatar-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/qa.svg"); } .ts-flag:is(.is-re-flag, .is-reunion-flag) { background-image: url("./flags/4x3/re.svg"); } .ts-flag:is(.is-re-flag, .is-reunion-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/re.svg"); } .ts-flag:is(.is-ro-flag, .is-romania-flag) { background-image: url("./flags/4x3/ro.svg"); } .ts-flag:is(.is-ro-flag, .is-romania-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ro.svg"); } .ts-flag:is(.is-rs-flag, .is-serbia-flag) { background-image: url("./flags/4x3/rs.svg"); } .ts-flag:is(.is-rs-flag, .is-serbia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/rs.svg"); } .ts-flag:is(.is-ru-flag, .is-russia-flag) { background-image: url("./flags/4x3/ru.svg"); } .ts-flag:is(.is-ru-flag, .is-russia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ru.svg"); } .ts-flag:is(.is-rw-flag, .is-rwanda-flag) { background-image: url("./flags/4x3/rw.svg"); } .ts-flag:is(.is-rw-flag, .is-rwanda-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/rw.svg"); } .ts-flag:is(.is-sa-flag, .is-saudi-arabia-flag) { background-image: url("./flags/4x3/sa.svg"); } .ts-flag:is(.is-sa-flag, .is-saudi-arabia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sa.svg"); } .ts-flag:is(.is-sb-flag, .is-solomon-islands-flag) { background-image: url("./flags/4x3/sb.svg"); } .ts-flag:is(.is-sb-flag, .is-solomon-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sb.svg"); } .ts-flag:is(.is-sc-flag, .is-seychelles-flag) { background-image: url("./flags/4x3/sc.svg"); } .ts-flag:is(.is-sc-flag, .is-seychelles-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sc.svg"); } .ts-flag:is(.is-sd-flag, .is-sudan-flag) { background-image: url("./flags/4x3/sd.svg"); } .ts-flag:is(.is-sd-flag, .is-sudan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sd.svg"); } .ts-flag:is(.is-se-flag, .is-sweden-flag) { background-image: url("./flags/4x3/se.svg"); } .ts-flag:is(.is-se-flag, .is-sweden-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/se.svg"); } .ts-flag:is(.is-sg-flag, .is-singapore-flag) { background-image: url("./flags/4x3/sg.svg"); } .ts-flag:is(.is-sg-flag, .is-singapore-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sg.svg"); } .ts-flag:is(.is-sh-flag, .is-saint-helena-flag) { background-image: url("./flags/4x3/sh.svg"); } .ts-flag:is(.is-sh-flag, .is-saint-helena-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sh.svg"); } .ts-flag:is(.is-si-flag, .is-slovenia-flag) { background-image: url("./flags/4x3/si.svg"); } .ts-flag:is(.is-si-flag, .is-slovenia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/si.svg"); } .ts-flag:is(.is-sj-flag, .is-jan-mayen-and-svalbard-flag, .is-svalbard-flag, .is-jan-mayen-flag) { background-image: url("./flags/4x3/sj.svg"); } .ts-flag:is(.is-sj-flag, .is-jan-mayen-and-svalbard-flag, .is-svalbard-flag, .is-jan-mayen-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sj.svg"); } .ts-flag:is(.is-sk-flag, .is-slovakia-flag) { background-image: url("./flags/4x3/sk.svg"); } .ts-flag:is(.is-sk-flag, .is-slovakia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sk.svg"); } .ts-flag:is(.is-sl-flag, .is-sierra-leone-flag) { background-image: url("./flags/4x3/sl.svg"); } .ts-flag:is(.is-sl-flag, .is-sierra-leone-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sl.svg"); } .ts-flag:is(.is-sm-flag, .is-san-marino-flag) { background-image: url("./flags/4x3/sm.svg"); } .ts-flag:is(.is-sm-flag, .is-san-marino-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sm.svg"); } .ts-flag:is(.is-sn-flag, .is-senegal-flag) { background-image: url("./flags/4x3/sn.svg"); } .ts-flag:is(.is-sn-flag, .is-senegal-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sn.svg"); } .ts-flag:is(.is-so-flag, .is-somalia-flag) { background-image: url("./flags/4x3/so.svg"); } .ts-flag:is(.is-so-flag, .is-somalia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/so.svg"); } .ts-flag:is(.is-sr-flag, .is-suriname-flag) { background-image: url("./flags/4x3/sr.svg"); } .ts-flag:is(.is-sr-flag, .is-suriname-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sr.svg"); } .ts-flag:is(.is-ss-flag, .is-south-sudan-flag) { background-image: url("./flags/4x3/ss.svg"); } .ts-flag:is(.is-ss-flag, .is-south-sudan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ss.svg"); } .ts-flag:is(.is-st-flag, .is-sao-tome-flag) { background-image: url("./flags/4x3/st.svg"); } .ts-flag:is(.is-st-flag, .is-sao-tome-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/st.svg"); } .ts-flag:is(.is-sv-flag, .is-el-salvador-flag) { background-image: url("./flags/4x3/sv.svg"); } .ts-flag:is(.is-sv-flag, .is-el-salvador-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sv.svg"); } .ts-flag:is(.is-sx-flag, .is-sint-maarten-flag) { background-image: url("./flags/4x3/sx.svg"); } .ts-flag:is(.is-sx-flag, .is-sint-maarten-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sx.svg"); } .ts-flag:is(.is-sy-flag, .is-syria-flag) { background-image: url("./flags/4x3/sy.svg"); } .ts-flag:is(.is-sy-flag, .is-syria-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sy.svg"); } .ts-flag:is(.is-sz-flag, .is-swaziland-flag) { background-image: url("./flags/4x3/sz.svg"); } .ts-flag:is(.is-sz-flag, .is-swaziland-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/sz.svg"); } .ts-flag:is(.is-tc-flag, .is-caicos-islands-flag) { background-image: url("./flags/4x3/tc.svg"); } .ts-flag:is(.is-tc-flag, .is-caicos-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tc.svg"); } .ts-flag:is(.is-td-flag, .is-chad-flag) { background-image: url("./flags/4x3/td.svg"); } .ts-flag:is(.is-td-flag, .is-chad-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/td.svg"); } .ts-flag:is(.is-tf-flag, .is-french-territories-flag) { background-image: url("./flags/4x3/tf.svg"); } .ts-flag:is(.is-tf-flag, .is-french-territories-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tf.svg"); } .ts-flag:is(.is-tg-flag, .is-togo-flag) { background-image: url("./flags/4x3/tg.svg"); } .ts-flag:is(.is-tg-flag, .is-togo-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tg.svg"); } .ts-flag:is(.is-th-flag, .is-thailand-flag) { background-image: url("./flags/4x3/th.svg"); } .ts-flag:is(.is-th-flag, .is-thailand-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/th.svg"); } .ts-flag:is(.is-tj-flag, .is-tajikistan-flag) { background-image: url("./flags/4x3/tj.svg"); } .ts-flag:is(.is-tj-flag, .is-tajikistan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tj.svg"); } .ts-flag:is(.is-tk-flag, .is-tokelau-flag) { background-image: url("./flags/4x3/tk.svg"); } .ts-flag:is(.is-tk-flag, .is-tokelau-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tk.svg"); } .ts-flag:is(.is-tl-flag, .is-timorleste-flag) { background-image: url("./flags/4x3/tl.svg"); } .ts-flag:is(.is-tl-flag, .is-timorleste-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tl.svg"); } .ts-flag:is(.is-tm-flag, .is-turkmenistan-flag) { background-image: url("./flags/4x3/tm.svg"); } .ts-flag:is(.is-tm-flag, .is-turkmenistan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tm.svg"); } .ts-flag:is(.is-tn-flag, .is-tunisia-flag) { background-image: url("./flags/4x3/tn.svg"); } .ts-flag:is(.is-tn-flag, .is-tunisia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tn.svg"); } .ts-flag:is(.is-to-flag, .is-tonga-flag) { background-image: url("./flags/4x3/to.svg"); } .ts-flag:is(.is-to-flag, .is-tonga-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/to.svg"); } .ts-flag:is(.is-tr-flag, .is-turkey-flag) { background-image: url("./flags/4x3/tr.svg"); } .ts-flag:is(.is-tr-flag, .is-turkey-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tr.svg"); } .ts-flag:is(.is-tt-flag, .is-trinidad-flag) { background-image: url("./flags/4x3/tt.svg"); } .ts-flag:is(.is-tt-flag, .is-trinidad-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tt.svg"); } .ts-flag:is(.is-tv-flag, .is-tuvalu-flag) { background-image: url("./flags/4x3/tv.svg"); } .ts-flag:is(.is-tv-flag, .is-tuvalu-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tv.svg"); } .ts-flag:is(.is-tw-flag, .is-taiwan-flag, .is-republic-of-china-flag, .is-formosa-flag) { background-image: url("./flags/4x3/tw.svg"); } .ts-flag:is(.is-tw-flag, .is-taiwan-flag, .is-republic-of-china-flag, .is-formosa-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tw.svg"); } .ts-flag:is(.is-tz-flag, .is-tanzania-flag) { background-image: url("./flags/4x3/tz.svg"); } .ts-flag:is(.is-tz-flag, .is-tanzania-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/tz.svg"); } .ts-flag:is(.is-ua-flag, .is-ukraine-flag) { background-image: url("./flags/4x3/ua.svg"); } .ts-flag:is(.is-ua-flag, .is-ukraine-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ua.svg"); } .ts-flag:is(.is-ug-flag, .is-uganda-flag) { background-image: url("./flags/4x3/ug.svg"); } .ts-flag:is(.is-ug-flag, .is-uganda-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ug.svg"); } .ts-flag:is(.is-um-flag, .is-us-minor-islands-flag) { background-image: url("./flags/4x3/um.svg"); } .ts-flag:is(.is-um-flag, .is-us-minor-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/um.svg"); } .ts-flag:is(.is-un-flag, .is-united-nations-flag) { background-image: url("./flags/4x3/un.svg"); } .ts-flag:is(.is-un-flag, .is-united-nations-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/un.svg"); } .ts-flag:is(.is-us-flag, .is-united-states-flag, .is-america-flag, .is-usa-flag) { background-image: url("./flags/4x3/us.svg"); } .ts-flag:is(.is-us-flag, .is-united-states-flag, .is-america-flag, .is-usa-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/us.svg"); } .ts-flag:is(.is-uy-flag, .is-uruguay-flag) { background-image: url("./flags/4x3/uy.svg"); } .ts-flag:is(.is-uy-flag, .is-uruguay-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/uy.svg"); } .ts-flag:is(.is-uz-flag, .is-uzbekistan-flag) { background-image: url("./flags/4x3/uz.svg"); } .ts-flag:is(.is-uz-flag, .is-uzbekistan-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/uz.svg"); } .ts-flag:is(.is-va-flag, .is-vatican-city-flag) { background-image: url("./flags/4x3/va.svg"); } .ts-flag:is(.is-va-flag, .is-vatican-city-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/va.svg"); } .ts-flag:is(.is-vc-flag, .is-saint-vincent-flag) { background-image: url("./flags/4x3/vc.svg"); } .ts-flag:is(.is-vc-flag, .is-saint-vincent-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/vc.svg"); } .ts-flag:is(.is-ve-flag, .is-venezuela-flag) { background-image: url("./flags/4x3/ve.svg"); } .ts-flag:is(.is-ve-flag, .is-venezuela-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ve.svg"); } .ts-flag:is(.is-vg-flag, .is-british-virgin-islands-flag) { background-image: url("./flags/4x3/vg.svg"); } .ts-flag:is(.is-vg-flag, .is-british-virgin-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/vg.svg"); } .ts-flag:is(.is-vi-flag, .is-us-virgin-islands-flag) { background-image: url("./flags/4x3/vi.svg"); } .ts-flag:is(.is-vi-flag, .is-us-virgin-islands-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/vi.svg"); } .ts-flag:is(.is-vn-flag, .is-vietnam-flag) { background-image: url("./flags/4x3/vn.svg"); } .ts-flag:is(.is-vn-flag, .is-vietnam-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/vn.svg"); } .ts-flag:is(.is-vu-flag, .is-vanuatu-flag) { background-image: url("./flags/4x3/vu.svg"); } .ts-flag:is(.is-vu-flag, .is-vanuatu-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/vu.svg"); } .ts-flag:is(.is-wf-flag, .is-wallis-and-futuna-flag, .is-wallis-flag, .is-futuna-flag) { background-image: url("./flags/4x3/wf.svg"); } .ts-flag:is(.is-wf-flag, .is-wallis-and-futuna-flag, .is-wallis-flag, .is-futuna-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/wf.svg"); } .ts-flag:is(.is-ws-flag, .is-samoa-flag) { background-image: url("./flags/4x3/ws.svg"); } .ts-flag:is(.is-ws-flag, .is-samoa-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ws.svg"); } .ts-flag:is(.is-ye-flag, .is-yemen-flag) { background-image: url("./flags/4x3/ye.svg"); } .ts-flag:is(.is-ye-flag, .is-yemen-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/ye.svg"); } .ts-flag:is(.is-yt-flag, .is-mayotte-flag) { background-image: url("./flags/4x3/yt.svg"); } .ts-flag:is(.is-yt-flag, .is-mayotte-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/yt.svg"); } .ts-flag:is(.is-za-flag, .is-south-africa-flag) { background-image: url("./flags/4x3/za.svg"); } .ts-flag:is(.is-za-flag, .is-south-africa-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/za.svg"); } .ts-flag:is(.is-zm-flag, .is-zambia-flag) { background-image: url("./flags/4x3/zm.svg"); } .ts-flag:is(.is-zm-flag, .is-zambia-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/zm.svg"); } .ts-flag:is(.is-zw-flag, .is-zimbabwe-flag) { background-image: url("./flags/4x3/zw.svg"); } .ts-flag:is(.is-zw-flag, .is-zimbabwe-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/zw.svg"); } .ts-flag:is(.is-zz-flag, .is-unknown-flag) { background-image: url("./flags/4x3/zz.svg"); } .ts-flag:is(.is-zz-flag, .is-unknown-flag):is(.is-squared, .is-circular) { background-image: url("./flags/1x1/zz.svg"); } /* ========================================================================== Variables ========================================================================== */ .ts-statistic { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-statistic { display: flex; color: inherit; gap: 0.5rem; align-items: center; } /* ========================================================================== Structure ========================================================================== */ .ts-statistic .value { display: inline-flex; font-size: var(--ts-relative-massive); font-weight: 500; line-height: 1.4; align-items: center; color: var(--accent-color, inherit); } .ts-statistic .unit { font-size: var(--ts-relative-medium); color: var(--ts-gray-600); } .ts-statistic .comparison { font-size: var(--ts-relative-medium); display: flex; align-items: center; justify-content: center; color: var(--ts-gray-600); } .ts-statistic .comparison::before { font-family: "Icons"; margin-right: 0.35rem; margin-top: 2px; font-size: 1rem; } .ts-statistic .ts-icon { font-size: var(--ts-relative-massive); margin-right: 0.5rem; } /* ========================================================================== Variations ========================================================================== */ /** * Aligns */ .ts-statistic.is-start-aligned > .value { justify-content: flex-start; } .ts-statistic.is-center-aligned > .value { justify-content: center; } /** * Centered */ .ts-statistic.is-centered { display: flex; align-items: center; justify-content: center; } /** * Text */ .ts-statistic > .value.is-text { font-size: 1em; min-height: calc(2.125rem + 0.3rem); } /** * Comparisons */ .ts-statistic .comparison.is-increased::before { content: "\f0d8"; } .ts-statistic .comparison.is-decreased::before { content: "\f0d7"; } .ts-statistic.is-increased .value::before, .ts-statistic.is-decreased .value::before { font-family: "Icons"; margin-right: 0.5rem; } .ts-statistic.is-increased .value::before { content: "\f0d8"; } .ts-statistic.is-decreased .value::before { content: "\f0d7"; } /** * Fluid */ .ts-statistic.is-fluid { width: 100%; } /** * Sizes */ .ts-statistic.is-mini.is-mini.is-mini { font-size: 0.8125rem; } .ts-statistic.is-tiny.is-tiny.is-tiny { font-size: 0.875rem; } .ts-statistic.is-small.is-small.is-small { font-size: 0.9375rem; } .ts-statistic.is-large.is-large.is-large { font-size: 1.125rem; } .ts-statistic.is-big.is-big.is-big { font-size: 1.375rem; } .ts-statistic.is-huge.is-huge.is-huge { font-size: 1.75rem; } .ts-statistic.is-massive.is-massive.is-massive { font-size: 2rem; } /* ========================================================================== Variables ========================================================================== */ .ts-app-sidebar { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-app-sidebar { margin-right: 1.5rem; } /* ========================================================================== Structure ========================================================================== */ .ts-app-sidebar .item { padding: 0.7rem 1.5rem; display: flex; font-weight: 500; color: var(--ts-gray-800); text-decoration: none; } .ts-app-sidebar .header { font-weight: bold; padding: 0.75rem 1.5rem; font-size: var(--ts-font-size-15px); color: var(--ts-gray-500); } .ts-app-sidebar .item + .header { margin-top: 1.5rem; } .ts-app-sidebar .item .ts-icon { margin-right: 1rem; font-size: 1.1em; } /* ========================================================================== Variations ========================================================================== */ /** * Active */ .ts-app-sidebar .item.is-active { background: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); border-radius: 0px 100rem 100rem 0; } /** * Disabled */ .ts-app-sidebar .item.is-disabled, .ts-app-sidebar .item:disabled { opacity: 0.5; pointer-events: none; user-select: none; } /** * Dense */ .ts-app-sidebar.is-dense .item { padding-top: 0.4rem; padding-bottom: 0.4rem; } .ts-app-sidebar.is-dense .item + .header { margin-top: 0.5rem; } .ts-app-sidebar.is-dense .header { padding-top: 0.45rem; padding-bottom: 0.45rem; } /* ========================================================================== Variables ========================================================================== */ .ts-app-navbar { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-app-navbar { display: inline-flex; align-items: center; } /* ========================================================================== Structure ========================================================================== */ .ts-app-navbar .item { color: var(--ts-gray-500); text-decoration: none; text-align: center; display: inline-flex; gap: 0.3rem; align-items: center; justify-content: center; flex-direction: column; margin: 0 0; padding-left: 1rem; padding-right: 1rem; font-weight: 500; font-size: 14px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; } .ts-app-navbar .item .ts-icon { line-height: 1.2; font-size: 1.2rem; } .ts-app-navbar .item .label { line-height: 1; } /* ========================================================================== Variations ========================================================================== */ /** * Fluid */ .ts-app-navbar.is-fluid { display: flex; } .ts-app-navbar.is-fluid .item { flex: 1; } /** * Unlabeled */ .ts-app-navbar.is-unlabeled .item:not(.is-active) .label { display: none; } /** * Active */ .ts-app-navbar .item.is-active { color: var(--accent-color, var(--ts-gray-800)); } .ts-app-navbar .item.is-active .ts-icon { --accent-color: inherit; --accent-foreground-color: inherit; } /** * Disabled */ .ts-app-navbar .item.is-disabled, .ts-app-navbar .item:disabled { opacity: 0.5; pointer-events: none; user-select: none; } /** * Vertical */ .ts-app-navbar.is-vertical { flex-direction: column; } .ts-app-navbar.is-vertical .item { padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 0; padding-right: 0; } .ts-app-navbar.is-vertical .item:first-child { padding-top: 0; } /** * Indicated */ .ts-app-navbar.is-indicated .item { color: var(--ts-gray-800); } .ts-app-navbar.is-indicated .item .ts-icon { padding: 0.25rem 1rem; line-height: 1.2; font-size: 1.2rem; display: flex; min-height: 26px; align-items: center; justify-content: center; width: auto; border-radius: 100rem; } .ts-app-navbar.is-indicated .item.is-active .ts-icon { background: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); } /** * Dense */ .ts-app-navbar.is-dense .item { gap: 0.25rem; } .ts-app-navbar.is-dense.is-indicated .item .ts-icon { padding-top: 0.15rem; padding-bottom: 0.15rem; min-height: 25px; } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-snackbar { background: var(--ts-static-gray-800); color: var(--ts-white); display: inline-flex; padding: 0.35rem 1rem; border-radius: var(--ts-border-radius-element); font-size: var(--ts-absolute-small); } /* ========================================================================== Structure ========================================================================== */ .ts-snackbar .content { margin: 0.25rem 0; } .ts-snackbar .action { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; font: inherit; line-height: normal; outline: none; box-sizing: border-box; user-select: none; margin-right: -0.5rem; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; appearance: none; -webkit-appearance: none; margin-left: 1rem; align-self: flex-start; padding: 0.6em 1em; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--ts-primary-400); border-radius: var(--ts-border-radius-element); font-size: var(--ts-absolute-small); cursor: pointer; } .ts-snackbar .close { border: none; margin: 0; padding: 0; overflow: visible; color: inherit; font: inherit; border-radius: 0; outline: none; box-sizing: border-box; user-select: none; appearance: none; -webkit-appearance: none; font-family: "Icons"; font-weight: normal; font-style: normal; text-decoration: inherit; text-align: center; -webkit-font-smoothing: antialiased; backface-visibility: hidden; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--ts-font-size-18px); line-height: 1; background: transparent; height: 32px; width: 32px; padding-top: 1px; margin-left: 1rem; margin-right: -0.5rem; } .ts-snackbar .action + .close { margin-left: 0.5rem; } .ts-snackbar .close::before { content: "\f00d"; } /* ========================================================================== Variations ========================================================================== */ /** * Negative */ .ts-snackbar .action.is-negative { color: var(--ts-negative-500); } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ details.ts-accordion { color: inherit; box-sizing: border-box; } /* ========================================================================== Structure ========================================================================== */ details.ts-accordion summary { list-style-type: none; } details.ts-accordion summary::-webkit-details-marker { display: none; } details.ts-accordion summary::marker { display: none; } details.ts-accordion summary { display: flex; align-items: center; user-select: none; cursor: pointer; } details.ts-accordion summary::before { font-family: "Icons"; font-weight: normal; font-style: normal; display: inline; text-decoration: inherit; text-align: center; width: 1.18em; -webkit-font-smoothing: antialiased; backface-visibility: hidden; display: block; margin-right: 0.7rem; color: var(--ts-gray-600); transform: rotate(270deg); content: "\f078"; line-height: 1; font-size: 14px; } /* ========================================================================== Variations ========================================================================== */ /** * Open */ details.ts-accordion[open] summary::before { transform: rotate(0deg); } details.ts-accordion[open] summary { margin-bottom: 0.5rem; } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ /* ========================================================================== Structure ========================================================================== */ .ts-mask { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgb(0 0 0 / 50%); color: var(--ts-gray-50); z-index: var(--ts-z-mask); } /* ========================================================================== Variations ========================================================================== */ /** * Vertical Aligns */ .ts-mask.is-top { top: 0; bottom: initial; } .ts-mask.is-middle { top: 50%; transform: translateY(-50%); bottom: initial; } .ts-mask.is-bottom { bottom: 0; top: initial; } /** * Blurring */ .ts-mask.is-blurring { backdrop-filter: blur(3px); } /** * Secondary */ .ts-mask.is-secondary { background: transparent; color: var(--ts-gray-800); } /** * Faded */ .ts-mask.is-faded.is-top { background: linear-gradient(to bottom, rgb(0 0 0 / 50%) 0%, rgba(0, 0, 0, 0) 100%); } .ts-mask.is-faded.is-bottom { background: linear-gradient(to top, rgb(0 0 0 / 50%) 0%, rgba(0, 0, 0, 0) 100%); } /* ========================================================================== Variables ========================================================================== */ @keyframes ts-placeholder-shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } @keyframes ts-placeholder-blink { 30% { opacity: 0; } } /* ========================================================================== Base ========================================================================== */ .ts-placeholder { position: relative; } /* ========================================================================== Structure ========================================================================== */ .ts-placeholder .text, .ts-placeholder .image.is-header::after, .ts-placeholder .image.is-header::before, .ts-placeholder .image { background: var(--ts-gray-200); height: 0.8em; width: 45%; margin: 0.8em 0; } .ts-placeholder:first-child > *:first-child { margin-top: 0; } .ts-placeholder:last-child > *:last-child { margin-bottom: 0; } .ts-placeholder .image { height: 150px; width: 100%; } .ts-placeholder .text:nth-child(1) { width: 43%; } .ts-placeholder .text:nth-child(2) { width: 78%; } .ts-placeholder .text:nth-child(3) { width: 70%; } .ts-placeholder .text:nth-child(4) { width: 80%; } .ts-placeholder .text:nth-child(5) { width: 60%; } .ts-placeholder .text:nth-child(6) { width: 44%; } .ts-placeholder .text:nth-child(7) { width: 63%; } .ts-placeholder .text:nth-child(8) { width: 49%; } .ts-placeholder .text:nth-child(9) { width: 72%; } .ts-placeholder .text:nth-child(10) { width: 61%; } .ts-placeholder .text:nth-child(11) { width: 45%; } .ts-placeholder .text:nth-child(12) { width: 55%; } .ts-placeholder .text:nth-child(13) { width: 56%; } .ts-placeholder .text:nth-child(14) { width: 57%; } .ts-placeholder .text:nth-child(15) { width: 73%; } .ts-placeholder .text:nth-child(16) { width: 59%; } .ts-placeholder .text:nth-child(17) { width: 47%; } .ts-placeholder .text:nth-child(18) { width: 77%; } /* ========================================================================== Variations ========================================================================== */ /** * Header */ .ts-placeholder .text.is-header { background: var(--ts-gray-300); } .ts-placeholder .image.is-header { width: 36px; height: 36px; position: static; } .ts-placeholder .image.is-header::after, .ts-placeholder .image.is-header::before { position: absolute; content: ""; margin: 0; } .ts-placeholder .image.is-header::after { top: 0; left: calc(36px + 1rem); width: 65%; background: var(--ts-gray-300); } .ts-placeholder .image.is-header::before { top: 25px; left: calc(36px + 1rem); width: 55%; } /** * Preparing */ .ts-placeholder.is-preparing .text, .ts-placeholder.is-preparing .text.is-header, .ts-placeholder.is-preparing .image.is-header::after, .ts-placeholder.is-preparing .image.is-header::before, .ts-placeholder.is-preparing .image { animation-duration: 1.8s; animation-fill-mode: alternate; animation-iteration-count: infinite; animation-name: ts-placeholder-blink; animation-timing-function: linear; } /** * Loading */ .ts-placeholder.is-loading .text, .ts-placeholder.is-loading .text.is-header, .ts-placeholder.is-loading .image.is-header::after, .ts-placeholder.is-loading .image.is-header::before, .ts-placeholder.is-loading .image { animation-duration: 1.2s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: ts-placeholder-shimmer; animation-timing-function: linear; background: linear-gradient(to right, var(--ts-gray-200) 8%, var(--ts-gray-300) 18%, var(--ts-gray-200) 33%); background-size: 1000px 200px; } .ts-placeholder.is-loading .text.is-header { background: linear-gradient(to right, var(--ts-gray-300) 8%, var(--ts-gray-400) 18%, var(--ts-gray-300) 33%); background-size: 1000px 200px; } /** * Rounded */ .ts-placeholder.is-rounded * { border-radius: var(--ts-border-radius-element); } /** * Widthes */ .ts-placeholder .text.is-short { width: 30%; } .ts-placeholder .text.is-very-short { width: 30%; } .ts-placeholder .text.is-extra-short { width: 20%; } .ts-placeholder .text.is-long { width: 70%; } .ts-placeholder .text.is-very-long { width: 80%; } .ts-placeholder .text.is-extra-long { width: 90%; } /* ========================================================================== Variables ========================================================================== */ .ts-header { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-header { font-weight: 500; font-size: var(--ts-font-size-17px); color: var(--accent-color, inherit); line-height: 1.5; display: flex; align-items: center; } /* ========================================================================== Structure ========================================================================== */ a.ts-header { text-decoration: none; } a.ts-header:hover { text-decoration: underline; } /* ========================================================================== Variations ========================================================================== */ /** * Truncated */ .ts-header.is-truncated { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; } /** * Negative */ .ts-header.is-negative { color: var(--ts-negative-600); } /** * Heavy */ .ts-header.is-heavy { font-weight: bold !important; } /** * Aligns */ .ts-header.is-center-aligned { text-align: center; justify-content: center; } .ts-header.is-start-aligned { text-align: left; justify-content: flex-start; } .ts-header.is-end-aligned { text-align: right; justify-content: flex-end; } /** * Uppercased */ .ts-header.is-uppercased { text-transform: uppercase; } /** * Lowercased */ .ts-header.is-lowercased { text-transform: lowercase; } /** * Icon */ .ts-header.is-icon { text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; } .ts-header.is-icon .ts-icon { font-size: 3em; width: auto; line-height: 1; margin-bottom: 0.5rem; } /** * Side Icon */ .ts-header:is(.is-start-icon, .is-end-icon) .ts-icon { font-size: 1.25em; } .ts-header.is-start-icon .ts-icon { margin-right: 0.6rem; } .ts-header.is-end-icon .ts-icon { margin-left: 0.6rem; } /** * Secondary */ .ts-header.is-secondary { color: var(--ts-gray-500); } /** * Sizes */ .ts-header.is-large { font-size: var(--ts-font-size-20px); } .ts-header.is-big { font-size: var(--ts-font-size-24px); } .ts-header.is-huge { font-size: var(--ts-font-size-30px); } .ts-header.is-massive { font-size: var(--ts-font-size-33px); } /** * Tight */ .ts-header.is-tight { line-height: 1.3; } /* ========================================================================== Variables ========================================================================== */ .ts-segment { --accent-color: initial; --accent-foreground-color: initial; --ts-indicator-color: var(--accent-color, var(--ts-gray-900)); } /* ========================================================================== Base ========================================================================== */ .ts-segment { display: block; text-decoration: none; color: inherit; border: 1px solid var(--ts-gray-300); border-radius: var(--ts-border-radius-container); overflow: hidden; padding: 1rem; box-sizing: border-box; background: var(--ts-gray-50); } a.ts-segment:hover { border-color: var(--ts-gray-400); } /* ========================================================================== Variations ========================================================================== */ /** * Collapsed */ .ts-segment.is-collapsed { width: fit-content; } /** * Indicated */ .ts-segment.is-top-indicated { border-top: 3px solid var(--ts-indicator-color); } .ts-segment.is-bottom-indicated { border-bottom: 3px solid var(--ts-indicator-color); } .ts-segment.is-left-indicated { border-left: 3px solid var(--ts-indicator-color); } .ts-segment.is-right-indicated { border-right: 3px solid var(--ts-indicator-color); } /** * Secondary */ .ts-segment.is-secondary { background: var(--ts-gray-75); } /** * Tertiary */ .ts-segment.is-tertiary { background: var(--ts-gray-100); } /** * Aligns */ .ts-segment.is-start-aligned { text-align: left; } .ts-segment.is-end-aligned { text-align: right; } .ts-segment.is-center-aligned { text-align: center; } /** * Emphasises */ .ts-segment[class*="-indicated"].is-negative { --ts-indicator-color: var(--ts-negative-500); } .ts-segment[class*="-indicated"].is-positive { --ts-indicator-color: var(--ts-positive-500); } .ts-segment[class*="-indicated"].is-warning { --ts-indicator-color: var(--ts-warning-500); } /** * Elevated */ .ts-segment.is-elevated { box-shadow: 0px 1px 5px 0 #00000024; } .ts-segment.is-very-elevated { box-shadow: rgb(0 0 0 / 20%) 0px 3px 3px -2px, rgb(0 0 0 / 14%) 0px 3px 4px 0px, rgb(0 0 0 / 12%) 0px 1px 8px 0px; } /** * Padded */ .ts-segment.is-padded { padding: 1.5rem; } .ts-segment.is-horizontally-padded { padding-left: 1.5rem; padding-right: 1.5rem; } .ts-segment.is-vertically-padded { padding-top: 1.5rem; padding-bottom: 1.5rem; } .ts-segment.is-very-padded { padding: 3.5rem; } .ts-segment.is-horizontally-very-padded { padding-left: 3.5rem; padding-right: 3.5rem; } .ts-segment.is-vertically-very-padded { padding-top: 3.5rem; padding-bottom: 3.5rem; } /** * Dense */ .ts-segment.is-dense { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* ========================================================================== Variables ========================================================================== */ .ts-quote { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-quote { position: relative; padding-left: 3rem; padding-top: 1rem; color: inherit; } .ts-quote::before { content: "“"; position: absolute; top: 0em; left: 0px; font-size: 5rem; font-family: Georgia, "Times New Roman", Times; color: var(--accent-color, var(--ts-gray-300)); line-height: 1; } /* ========================================================================== Structure ========================================================================== */ .ts-quote .cite { font-style: normal; color: var(--ts-gray-600); margin-top: 1rem; } /* ========================================================================== Variations ========================================================================== */ /** * Heading */ .ts-quote.is-heading { font-size: var(--ts-font-size-20px); font-weight: 500; color: var(--ts-gray-800); padding: 0; text-align: center; } .ts-quote.is-heading::before { background: var(--accent-color, var(--ts-gray-100)); color: var(--accent-foreground-color, var(--ts-gray-800)); border-radius: 50%; content: "”"; display: block; font-size: 3.3rem; font-weight: bold; line-height: 1.2; margin: 0 auto 0.5rem auto; text-align: center; height: 2.6rem; width: 2.6rem; position: relative; } .ts-quote.is-heading .cite { font-size: 15px; font-weight: normal; margin-top: 0; } /** * Secondary */ .ts-quote.is-secondary { border-left: 5px solid var(--accent-color, var(--ts-gray-300)); padding: 0 0 0 2rem; } .ts-quote.is-secondary::before { display: none; } /** * Sizes */ .ts-quote.is-small { font-size: var(--ts-font-size-14px); } .ts-quote.is-large { font-size: var(--ts-font-size-17px); } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-app-layout { display: flex; flex-direction: row; color: inherit; height: 100%; width: 100%; } /* ========================================================================== Structure ========================================================================== */ .ts-app-layout .cell { flex-shrink: 0; background: var(--ts-page-background-default); } /* ========================================================================== Variations ========================================================================== */ /** * Full */ .ts-app-layout.is-full { height: 100vh; width: 100vw; } /** * Horizontal */ .ts-app-layout.is-horizontal { display: flex; flex-direction: row; } .ts-app-layout.is-horizontal > .cell:not(:last-child) { border-right: 1px solid var(--ts-gray-300); } .ts-app-layout .cell.is-horizontal { display: flex; flex-direction: row; } .ts-app-layout .cell.is-horizontal > .cell:not(:last-child) { border-right: 1px solid var(--ts-gray-300); } /** * Vertical */ .ts-app-layout.is-vertical { display: flex; flex-direction: column; } .ts-app-layout.is-vertical > .cell:not(:last-child) { border-bottom: 1px solid var(--ts-gray-300); } .ts-app-layout .cell.is-vertical { display: flex; flex-direction: column; } .ts-app-layout .cell.is-vertical > .cell:not(:last-child) { border-bottom: 1px solid var(--ts-gray-300); } /** * Scrollable */ .ts-app-layout .cell.is-scrollable { overflow-y: auto; } /** * Fluid */ .ts-app-layout .cell.is-fluid { flex: 1; flex-shrink: 1; } /** * Secondary */ .ts-app-layout .cell.is-secondary { background: var(--ts-page-background-secondary); } /** * Tertiary */ .ts-app-layout .cell.is-tertiary { background: var(--ts-page-background-tertiary); } /* ========================================================================== Variables ========================================================================== */ .ts-avatar { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-avatar { display: inline-flex; width: 32px; height: 32px; border-radius: var(--ts-border-radius-element); overflow: hidden; align-items: center; justify-content: center; vertical-align: middle; border: 1px solid transparent; white-space: nowrap; overflow: hidden; } /* ========================================================================== Structure ========================================================================== */ .ts-avatar img { width: 100%; } /* ========================================================================== Variations ========================================================================== */ /** * Circular */ .ts-avatar.is-circular, .ts-avatar.is-circular img { border-radius: 100rem; } /** * Text */ .ts-avatar.is-text { background: var(--accent-color, var(--ts-gray-200)); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-foreground-color, var(--ts-gray-600)); font-weight: 500; font-size: 1.1rem; } /** * Bordered */ .ts-avatar.is-bordered { border-color: var(--ts-gray-300); } /** * Group */ .ts-avatar.is-group { height: initial; width: initial; justify-content: flex-end; flex-direction: row-reverse; } .ts-avatar.is-group .ts-avatar:not(:last-child) { margin-inline-start: -0.6rem; } /** * Sizes */ .ts-avatar.is-small { width: 24px; height: 24px; } .ts-avatar.is-large { width: 48px; height: 48px; } /* ========================================================================== Variables ========================================================================== */ .ts-wrap { --gap: 1rem; } /* ========================================================================== Base ========================================================================== */ .ts-wrap { display: flex; gap: var(--gap); flex-wrap: wrap; } /* ========================================================================== Variations ========================================================================== */ /** * Vertical */ .ts-wrap.is-vertical { flex-direction: column; flex-wrap: initial; } /** * Aligns */ .ts-wrap.is-top-aligned { align-items: flex-start; } .ts-wrap.is-middle-aligned { align-items: center; } .ts-wrap.is-bottom-aligned { align-items: flex-end; } .ts-wrap.is-start-aligned { justify-content: flex-start; } .ts-wrap.is-center-aligned { justify-content: center; } .ts-wrap.is-end-aligned { justify-content: flex-end; } .ts-wrap.is-start-aligned.is-vertical { align-items: flex-start; } .ts-wrap.is-center-aligned.is-vertical { align-items: center; } .ts-wrap.is-end-aligned.is-vertical { align-items: flex-end; } /** * Relaxed */ .ts-wrap.is-relaxed { --gap: 2rem; } /** * Compact */ .ts-wrap.is-compact { --gap: 0.5rem; } /* ========================================================================== Variables ========================================================================== */ .ts-container { --ts-container-gap: 1rem; } /* ========================================================================== Base ========================================================================== */ .ts-container { margin: 0 auto; padding: 0 var(--ts-container-gap); max-width: 1180px; width: 100%; color: inherit; box-sizing: border-box; } /* ========================================================================== Variations ========================================================================== */ /** * Fluid */ .ts-container.is-padded { --ts-container-gap: 2rem; } .ts-container.is-fitted { --ts-container-gap: 0; } /** * Narrow */ .ts-container.is-narrow { max-width: 910px; } .ts-container.is-very-narrow { max-width: 720px; } /** * Fluid */ .ts-container.is-fluid { max-width: 100%; } /* ========================================================================== Variables ========================================================================== */ .ts-control { --label-width: 220px; } /* ========================================================================== Base ========================================================================== */ .ts-control { color: inherit; display: grid; grid-template-columns: var(--label-width) 1fr; gap: 2rem; } /* ========================================================================== Structure ========================================================================== */ .ts-control > .label { word-break: break-all; color: var(--ts-gray-800); font-weight: 500; text-align: right; line-height: 2.4; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .ts-control > .content { max-width: 75%; } /* ========================================================================== Variations ========================================================================== */ /** * Padded */ .ts-control > .content.is-padded { padding-top: 0.45rem; } /** * Padded */ .ts-control.is-stacked { grid-template-columns: 1fr; gap: 1rem; } .ts-control.is-stacked > .label { text-align: left; line-height: 1.4; } .ts-control.is-stacked > .content { width: 100%; max-width: 100%; } /** * Fluid */ .ts-control > .content.is-fluid { max-width: initial; } /** * Aligns */ .ts-control > .label.is-start-aligned { text-align: left; } /** * Wide */ .ts-control.is-wide { --label-width: 150px; } .ts-control.is-wide > .content { max-width: 90%; } /* ========================================================================== Variables ========================================================================== */ .ts-menu { --object-distance: 0.8rem; --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-menu { color: inherit; display: flex; flex-direction: column; } .ts-menu .item { font-family: inherit; appearance: none; border: unset; font-size: inherit; text-align: inherit; background: transparent; color: inherit; line-height: 1; text-decoration: none; display: flex; align-items: center; padding: 0.8rem 1rem; gap: var(--object-distance); } .ts-menu .item .ts-icon { font-size: 1.1em; } .ts-menu .item .ts-badge { margin-left: auto; margin-top: -1px; } .ts-menu .item .ts-avatar { margin-top: -0.4rem; margin-bottom: -0.4rem; } .ts-menu .item .description { font-size: var(--ts-relative-small); color: var(--ts-gray-500); text-align: right; margin-left: auto; float: right; } .ts-menu .item:hover { cursor: pointer; background: var(--ts-gray-75); } .ts-menu .item :where(.ts-row, .ts-grid) { flex: 1; } /* ========================================================================== Variations ========================================================================== */ /** * Active */ .ts-menu .item.is-active { background: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); } /** * Disabled */ .ts-menu .item.is-disabled, .ts-menu .item:disabled { opacity: 0.5; pointer-events: none; user-select: none; } /** * Selected */ .ts-menu .item.is-selected { background: var(--accent-color, var(--ts-primary-700)); color: var(--accent-foreground-color, var(--ts-white)); } /** * Separated */ .ts-menu.is-separated { gap: 0.25rem; } .ts-menu.is-separated .item { border-radius: var(--ts-border-radius-element); } /** * Icon */ .ts-menu.is-start-icon .item .ts-icon { min-width: 1rem; text-align: center; display: inline-block; margin-top: 2px; } .ts-menu.is-end-icon .item .ts-icon { margin-left: auto; min-width: 1rem; text-align: center; display: inline-block; margin-top: 2px; } /** * Collapsed */ .ts-menu.is-collapsed { width: fit-content; } /** * Density */ .ts-menu.is-relaxed .item { padding-top: 1.1rem; padding-bottom: 1.1rem; } .ts-menu.is-dense .item { padding-top: 0.65rem; padding-bottom: 0.65rem; } /** * Sizes */ .ts-menu.is-small { font-size: var(--ts-font-size-14px); } .ts-menu.is-large { font-size: var(--ts-font-size-16px); } /** * Horizontally Padded */ .ts-menu.is-horizontally-padded .item { padding-left: 1.5rem; padding-right: 1.5rem; } .ts-menu.is-horizontally-very-padded .item { padding-left: 3.5rem; padding-right: 3.5rem; } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-checklist { margin-right: 1.5rem; display: flex; gap: 0.5rem; flex-direction: column; } /* ========================================================================== Structure ========================================================================== */ .ts-checklist .item { position: relative; color: var(--ts-gray-800); text-decoration: none; padding-left: 28px; } .ts-checklist .item::before { font-family: "Icons"; font-weight: normal; font-style: normal; text-decoration: inherit; text-align: center; -webkit-font-smoothing: antialiased; backface-visibility: hidden; font-size: var(--ts-font-size-12px); border-radius: 100rem; line-height: 1; height: 20px; width: 20px; padding: 0.25rem; display: inline-block; transform: scale(0.9); padding-top: 0.3rem; padding-bottom: 0.1rem; vertical-align: middle; position: absolute; left: 0; top: 3px; } /* ========================================================================== Variations ========================================================================== */ /** * Positive */ .ts-checklist .item.is-positive::before { content: "\f00c"; background: var(--ts-tonal-positive-400); color: var(--ts-tonal-positive-800); } /** * Negative */ .ts-checklist .item.is-negative::before { content: "\f00d"; background: var(--ts-tonal-negative-400); color: var(--ts-tonal-negative-800); } /** * Added */ .ts-checklist .item.is-added::before { content: "\f067"; background: var(--ts-tonal-positive-400); color: var(--ts-tonal-positive-800); } /** * Removed */ .ts-checklist .item.is-removed::before { content: "\f068"; background: var(--ts-tonal-negative-400); color: var(--ts-tonal-negative-800); } /** * Info */ .ts-checklist .item.is-info::before { content: "\f129"; background: var(--ts-tonal-primary-400); color: var(--ts-tonal-primary-800); } /** * Info */ .ts-checklist .item.is-warning::before { content: "\21"; background: var(--ts-tonal-warning-400); color: var(--ts-tonal-warning-800); } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-imageset { display: grid; gap: 1rem; } /* ========================================================================== Structure ========================================================================== */ .ts-imageset .item { min-height: min-content; } .ts-imageset .item img { width: 100%; height: 100%; vertical-align: top; object-fit: cover; } /* ========================================================================== Variations ========================================================================== */ /** * Images */ /** 2 */ .ts-imageset.is-2-images { grid-template-columns: repeat(1, 1fr); } /** 3 */ .ts-imageset.is-3-images { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1.777fr 1fr; } .ts-imageset.ts-imageset.is-3-images .item:first-child { grid-column: 1 / 3; } /** 4 */ .ts-imageset.is-4-images { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1.777fr 1fr; } .ts-imageset.ts-imageset.is-4-images .item:first-child { grid-column: 1 / 4; } /** * Portrait */ .ts-imageset.is-portrait .item img { object-position: top; } /** 2 */ .ts-imageset.is-portrait.is-2-images { grid-template-columns: repeat(2, 1fr); } /** 3 */ .ts-imageset.is-portrait.is-3-images { grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(2, 1fr); } .ts-imageset.is-portrait.is-3-images .item:first-child { grid-row: 1 / 3; grid-column: initial; } /** 4 */ .ts-imageset.is-portrait.is-4-images { grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(3, 1fr); } .ts-imageset.is-portrait.is-4-images .item:first-child { grid-row: 1 / 4; grid-column: initial; } /** * Rounded */ .ts-imageset.is-rounded .item img { border-radius: 0.4rem; } /** * Circular */ .ts-imageset.is-circular.is-portrait .item:first-child img { border-top-left-radius: 0.4rem; border-bottom-left-radius: 0.4rem; } .ts-imageset.is-circular.is-portrait .item:nth-child(2) img { border-top-right-radius: 0.4rem; } .ts-imageset.is-circular.is-portrait .item:last-child img { border-bottom-right-radius: 0.4rem; } .ts-imageset.is-circular:not(.is-portrait) .item:first-child img { border-top-right-radius: 0.4rem; border-top-left-radius: 0.4rem; } .ts-imageset.is-circular:not(.is-portrait) .item:nth-child(2) img { border-bottom-left-radius: 0.4rem; } .ts-imageset.is-circular:not(.is-portrait) .item:last-child img { border-bottom-right-radius: 0.4rem; } /** * Relaxed */ .ts-imageset.is-relaxed { gap: 1.5rem; } /** * Compact */ .ts-imageset.is-compact { gap: 0.5rem; } /* ========================================================================== Variables ========================================================================== */ .ts-iconset { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-iconset { display: flex; gap: 1rem; line-height: 1.7; } /* ========================================================================== Structure ========================================================================== */ .ts-iconset .ts-icon { width: 3rem; min-width: 3rem; height: 3rem; background: var(--accent-color, var(--ts-gray-100)); color: var(--accent-foreground-color, inherit); justify-content: center; align-items: center; font-size: 1.4rem; display: flex; border-radius: var(--ts-border-radius-element); } .ts-iconset .content .title { font-weight: 500; line-height: 1.4; } /* ========================================================================== Variations ========================================================================== */ /** * Circular */ .ts-iconset.is-circular .ts-icon { border-radius: 100rem; } /** * Outlined */ .ts-iconset.is-outlined .ts-icon { background: transparent; color: var(--accent-color, inherit); border: 2px solid var(--ts-gray-300); box-sizing: border-box; } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-conversation { display: flex; gap: 1rem; --brand-color: var(--ts-primary-600); } /** * Avatar */ .ts-conversation .avatar img { width: 40px; border-radius: var(--ts-border-radius-element); } /** * Bubble */ .ts-conversation .bubble { position: relative; background: var(--ts-gray-100); border-radius: var(--ts-border-radius-container); line-height: 1.5; padding: 0.5rem 0.8rem; font-size: var(--ts-font-size-14px); overflow: hidden; } /** Clearfix for meta */ .ts-conversation .bubble::after { content: ""; display: block; clear: both; } /** * Author */ .ts-conversation .bubble .author { font-weight: 500; color: var(--brand-color); } /** * Meta */ .ts-conversation .bubble .meta { position: relative; float: right; line-height: 1.5; bottom: -3px; margin-left: 0.6rem; display: inline-flex; gap: 0.65rem; align-items: center; justify-content: flex-end; font-size: var(--ts-font-size-14px); color: var(--ts-gray-500); } .ts-conversation .bubble .meta.is-floated { position: absolute; bottom: 0.5rem; right: 0.5rem; background: rgba(0, 0, 0, 0.2); border-radius: var(--ts-border-radius-element); padding: 0.1rem 0.4rem; color: var(--ts-white); } /** * Text */ .ts-conversation .bubble .text { display: inline; } .ts-conversation .bubble .text a { color: var(--ts-link-700); } /** * Actions */ /** * Meta */ /** * Quote */ .ts-conversation .bubble .quote { --brand-color: var(--ts-positive-600); border-left: 2px solid var(--brand-color); margin: 0.5rem 0; padding-left: 0.8rem; } .ts-conversation .bubble .quote .author { font-weight: 500; color: var(--brand-color); } /** * Preview */ .ts-conversation .bubble .preview { padding-left: 0.8rem; border-left: 2px solid var(--brand-color); margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.25rem; --brand-color: #1074c5; } .ts-conversation .bubble .site { font-weight: 500; color: var(--brand-color); } .ts-conversation .bubble .title { font-weight: 500; } .ts-conversation .bubble .embed { overflow: hidden; border-radius: var(--ts-border-radius-container); } .ts-conversation .bubble .embed > * { width: 100%; object-fit: cover; vertical-align: top; } /** * Object */ .ts-conversation .bubble .object { margin: 0.4rem -0.8rem; } /* ========================================================================== Variations ========================================================================== */ /** * */ .ts-conversation:is(.is-sent, .is-sending, .is-error, .is-read, .is-warning) .bubble .meta::after { color: var(--ts-gray-500); font-family: "Icons"; font-weight: normal; font-style: normal; text-decoration: inherit; text-align: center; width: 1.18em; -webkit-font-smoothing: antialiased; backface-visibility: hidden; font-size: var(--ts-font-size-13px); } .ts-conversation.is-sent .bubble .meta::after { content: "\f00c"; } .ts-conversation.is-sending .bubble .meta::after { content: "\f017"; } .ts-conversation.is-read .bubble .meta::after { content: "\f560"; } .ts-conversation.is-error .bubble .meta::after { content: "\f071"; color: var(--ts-negative-400); } /** * Self */ .ts-conversation.is-self { flex-direction: row-reverse; } .ts-conversation.is-self .bubble { background: #e8fbd1; color: var(--ts-black); } .ts-conversation.is-self .bubble .author { color: #538e0b; } .ts-conversation.is-self .bubble .meta, .ts-conversation.is-self .bubble .meta::after { color: #538e0b; } /** * Object Only */ .ts-conversation.is-object-only .bubble { padding: 0; } .ts-conversation.is-object-only .bubble .object { margin: 0; } .ts-conversation.is-object-only .bubble .meta { position: absolute; bottom: 0.5rem; right: 0.5rem; background: rgba(0, 0, 0, 0.2); border-radius: var(--ts-border-radius-element); padding: 0.1rem 0.4rem; color: var(--ts-white); } .ts-conversation.is-object-only .bubble .meta::after { color: var(--ts-white); } /* ========================================================================== Variables ========================================================================== */ dialog.ts-modal { --width: 380px; } /* ========================================================================== Base ========================================================================== */ dialog.ts-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: center; overflow-y: auto; padding: 2rem 1rem; background: rgb(0 0 0 / 50%); height: auto; width: auto; z-index: var(--ts-z-modal); } dialog.ts-modal:modal, dialog.ts-modal:popover-open { background: transparent; } dialog.ts-modal::backdrop { background: rgb(0 0 0 / 50%); } /* ========================================================================== Structure ========================================================================== */ dialog.ts-modal > .content { background: var(--ts-gray-50); border-radius: var(--ts-border-radius-container); box-shadow: var(--ts-elevated-shadow-modal); width: var(--width); margin: auto; overflow: hidden; } /* ========================================================================== Variations ========================================================================== */ /** * Open */ dialog.ts-modal[open], dialog.ts-modal:popover-open { display: flex; } /** * Sizes */ dialog.ts-modal.is-small { --width: 280px; } dialog.ts-modal.is-large { --width: 580px; } dialog.ts-modal.is-big { --width: 780px; } /* ========================================================================== Variables ========================================================================== */ .ts-gauge { --length: 0.8; --value: 0; --size: 5rem; --thickness: calc(var(--size) / 10); --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-gauge, .ts-gauge .bar { position: relative; display: inline-grid; height: var(--size); width: var(--size); place-content: center; border-radius: 9999px; background-color: transparent; vertical-align: middle; box-sizing: content-box; } .ts-gauge { --value: 100; transform: rotate(216deg); } /* ========================================================================== Structure ========================================================================== */ .ts-gauge::before, .ts-gauge .bar::before { position: absolute; border-radius: 9999px; content: ""; } .ts-gauge .bar::before { top: 0; right: 0; bottom: 0; left: 0; background: conic-gradient(var(--accent-color, currentColor) calc(var(--value) * 1% * var(--length)), #0000 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), rgb(0 0 0 / 85%) calc(100% - var(--thickness))); mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), rgb(0 0 0 / 85%) calc(100% - var(--thickness))); } .ts-gauge::before { top: 0; right: 0; bottom: 0; left: 0; -webkit-mask: radial-gradient(farthest-side, #f000 calc(99% - var(--thickness)), #0000001a calc(100% - var(--thickness))); mask: radial-gradient(farthest-side, #f000 calc(99% - var(--thickness)), #0000001a calc(100% - var(--thickness))); background: conic-gradient(currentColor calc(var(--value) * var(--length) * 1%), #0000 0); } .ts-gauge .bar .text { transform: rotate(-216deg); } /* ========================================================================== Variations ========================================================================== */ /** * Circular */ .ts-gauge.is-circular { transform: initial; --length: 1; } .ts-gauge.is-circular .bar .text { transform: initial; } /** * Uplifted */ .ts-gauge.is-uplifted { transform: rotate(180deg); --length: 0.7; } .ts-gauge.is-uplifted .bar .text { transform: rotate(-180deg); } /** * Centered */ .ts-gauge.is-centered { margin: 0 auto; display: grid; } /** * Sizes */ .ts-gauge.is-small { --size: 4rem; } .ts-gauge.is-large { --size: 6rem; } /* ========================================================================== Variables ========================================================================== */ .ts-tooltip { --ts-tooltip-x: 0; } /* ========================================================================== Base ========================================================================== */ .ts-tooltip { position: fixed; background: var(--ts-gray-600); padding: 0.1rem 0.35rem; font-size: var(--ts-font-size-13px); border-radius: var(--ts-border-radius-secondary); color: var(--ts-gray-50); visibility: hidden; font-weight: normal; z-index: var(--ts-z-tooltip); max-width: min(300px, calc(100vw - 2rem)); pointer-events: none; margin: 0; border: 0; width: fit-content; height: fit-content; overflow: visible; } .ts-tooltip.is-visible { visibility: visible; } .ts-tooltip .arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; pointer-events: none; } .ts-tooltip[class*="is-bottom"] .arrow { top: -4px; border-width: 0 5px 5px; border-bottom-color: var(--ts-gray-600); } .ts-tooltip[class*="is-top"] .arrow { bottom: -4px; border-width: 5px 5px 0; border-top-color: var(--ts-gray-600); } .ts-tooltip[class$="start"] .arrow { left: 10px; } .ts-tooltip[class$="end"] .arrow { right: 10px; } .ts-tooltip:not([class$="start"]):not([class$="end"]) .arrow { left: calc(var(--ts-tooltip-x) - 2.5px); } /* ========================================================================== Variations ========================================================================== */ /* ========================================================================== Variables ========================================================================== */ .ts-dropdown { --object-distance: 0.8rem; --min-width: 10rem; --ts-dropdown-min-width: 0px; --ts-dropdown-position: absolute; --accent-color: initial; --accent-foreground-color: initial; } .ts-dropdown .item { --indented-padding: 0px; --padding-multiplier: 1; --color: inherit; } .ts-dropdown .item .ts-icon { --color: inherit; } /* ========================================================================== Base ========================================================================== */ .ts-dropdown { position: var(--ts-dropdown-position); display: none; color: inherit; flex-direction: column; z-index: var(--ts-z-dropdown); border: 1px solid var(--ts-gray-300); border-radius: var(--ts-border-radius-element); background: var(--ts-gray-50); box-shadow: var(--ts-elevated-shadow); font-size: var(--ts-font-size-14px); padding: 0.4rem 0; white-space: nowrap; min-width: max(var(--ts-dropdown-min-width), var(--min-width)); margin: 0; width: fit-content; height: fit-content; overflow: auto; overflow-x: hidden; } .ts-dropdown > .item { font-family: inherit; appearance: none; border: unset; font-size: inherit; text-align: inherit; background: transparent; color: var(--color); line-height: 1; text-decoration: none; display: flex; align-items: center; padding: 0.65rem calc(1rem * var(--padding-multiplier)); padding-left: calc((1rem + var(--indented-padding)) * var(--padding-multiplier)); gap: var(--object-distance); min-width: 0; } .ts-dropdown .item .ts-icon { color: var(--color); font-size: 1.1em; } .ts-dropdown .item .ts-avatar { margin-top: -0.4rem; margin-bottom: -0.4rem; margin-left: -0.2rem; } .ts-dropdown .item .description { font-size: var(--ts-relative-small); color: var(--ts-gray-500); text-align: right; margin-left: auto; float: right; } .ts-dropdown .item:hover { cursor: pointer; background: var(--ts-gray-75); } .ts-dropdown .item :where(.ts-row, .ts-grid) { flex: 1; } /* ========================================================================== Variations ========================================================================== */ /** * Active */ .ts-dropdown .item.is-active { background: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); } /** * Header */ .ts-dropdown .item.is-header { color: var(--ts-gray-500); pointer-events: none; user-select: none; } .ts-dropdown .item.is-header:hover { cursor: default; background: transparent; } /** * Indented */ .ts-dropdown .item.is-indented { --indented-padding: 0.5rem; } /** * Disabled */ .ts-dropdown .item[disabled], .ts-dropdown .item.is-disabled { opacity: 0.5; pointer-events: none; user-select: none; } /** * Selected */ .ts-dropdown .item.is-selected { background: var(--accent-color, var(--ts-primary-700)); color: var(--accent-foreground-color, var(--ts-white)); } .ts-dropdown .item.is-selected .ts-icon { color: inherit; } .ts-dropdown .item.is-selected .description { color: inherit; opacity: 0.8; } /** * Separated */ .ts-dropdown.is-separated { gap: 0.25rem; padding-left: 0.4rem; padding-right: 0.4rem; } .ts-dropdown.is-separated .item { --padding-multiplier: 0.8; border-radius: var(--ts-border-radius-secondary); } /** * Icon */ .ts-dropdown.is-start-icon .item .ts-icon { min-width: 1rem; text-align: center; display: inline-block; margin-top: 1px; } .ts-dropdown.is-end-icon .item .ts-icon { margin-left: auto; min-width: 1rem; text-align: center; display: inline-block; margin-top: 1px; } /** * Density */ .ts-dropdown.is-relaxed .item { padding-top: 0.8rem; padding-bottom: 0.8rem; } .ts-dropdown.is-dense .item { padding-top: 0.55rem; padding-bottom: 0.55rem; } /** * Visible */ .ts-dropdown.is-visible { display: inline-flex; } /** * Scrollable */ .ts-dropdown.is-scrollable { overflow: auto; overflow-x: hidden; } /** (Below 766px) */ @media screen and (max-width: 766px) { .ts-dropdown.is-scrollable { max-height: 10rem; } } /** (Above 766px) */ @media screen and (min-width: 766px) { .ts-dropdown.is-scrollable { max-height: 15rem; } } /** (Above 993px) */ @media screen and (min-width: 993px) { .ts-dropdown.is-scrollable { max-height: 19rem; } } /** * Positions */ .ts-dropdown.is-top-left { bottom: calc(100% + 0.5rem); left: 0; } .ts-dropdown.is-bottom-left { top: calc(100% + 0.5rem); left: 0; } .ts-dropdown.is-bottom-center { left: 50%; transform: translateX(-50%); top: calc(100% + 0.5rem); } .ts-dropdown.is-top-center { left: 50%; transform: translateX(-50%); bottom: calc(100% + 0.5rem); } .ts-dropdown.is-top-right { bottom: calc(100% + 0.5rem); right: 0; } .ts-dropdown.is-bottom-right { top: calc(100% + 0.5rem); right: 0; } .ts-dropdown.is-top { bottom: calc(100% + 0.5rem); left: 0; right: 0; min-width: min-content; } .ts-dropdown.is-bottom { top: calc(100% + 0.5rem); left: 0; right: 0; min-width: min-content; } /** * Checkbox */ /* .ts-dropdown .item.is-checked { color: var(--accent-color, var(--ts-primary-700)); } .ts-dropdown .item .checkbox { position: relative; background: var(--ts-gray-200); border: 1px solid var(--ts-gray-200); border-radius: 0.2rem; box-sizing: border-box; color: inherit; cursor: pointer; font: inherit; line-height: normal; min-height: 1.15rem; min-width: 1.15rem; overflow: visible; padding: 0; user-select: none; width: auto; } .ts-dropdown .item .checkbox::after { display: none; font-family: Icons; font-size: 1rem; font-style: normal; font-weight: 400; justify-content: center; left: 0; position: absolute; right: 0; text-align: center; text-decoration: inherit; top: 0; transform: scale(0.8); z-index: 1; -webkit-font-smoothing: antialiased; align-items: center; backface-visibility: hidden; bottom: 0; color: var(--accent-foreground-color, var(--ts-white)); content: "\f00c"; } .ts-dropdown .item.is-checked .checkbox { background: var(--accent-color, var(--ts-primary-700)); border-color: var(--accent-color, var(--ts-primary-700)); } .ts-dropdown .item.is-checked .checkbox::after { display: flex; } */ /* ========================================================================== Variables ========================================================================== */ .ts-app-topbar { --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-app-topbar { display: grid; grid-template-columns: 1fr auto 1fr; padding: 0.5rem 1rem; background: var(--accent-color, var(--ts-static-gray-900)); color: var(--accent-foreground-color, var(--ts-white)); min-height: 50px; align-items: center; gap: 0.5rem; } .ts-app-topbar :is(.start, .end, .center) > .item { border-radius: 100em; text-decoration: none; width: 38px; height: 38px; display: flex; font-size: var(--ts-font-size-17px); align-items: center; justify-content: center; margin-top: -0.1rem; margin-bottom: -0.1rem; } .ts-app-topbar :is(.start, .end, .center) .item.is-text { font-size: var(--ts-font-size-16px); font-weight: 500; width: auto; height: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 0; margin: 0; display: block; } .ts-app-topbar :is(.start, .end) { display: flex; align-items: center; gap: 0.25rem; } .ts-app-topbar .start { justify-content: flex-start; grid-column: 1 / 2; } .ts-app-topbar .start > .item:not(.is-text):first-child { margin-left: -0.75rem; } .ts-app-topbar .center { justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-column: 2 / 3; } .ts-app-topbar .end { justify-content: flex-end; grid-column: 3 / 3; } .ts-app-topbar .end > .item:not(.is-text):last-child { margin-right: -0.75rem; } .ts-app-topbar .content { grid-column: 1 / 4; } /* ========================================================================== Variations ========================================================================== */ /* ========================================================================== Variables ========================================================================== */ dialog.ts-app-drawer { --width: 380px; } /* ========================================================================== Base ========================================================================== */ dialog.ts-app-drawer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0 0 0 / 50%); display: none; overflow-y: auto; height: auto; width: auto; z-index: var(--ts-z-app-drawer); } dialog.ts-app-drawer:modal, dialog.ts-app-drawer:popover-open { background: transparent; } dialog.ts-app-drawer::backdrop { background: rgb(0 0 0 / 50%); } /* ========================================================================== Structure ========================================================================== */ .ts-app-drawer > .content { background: var(--ts-gray-50); box-shadow: var(--ts-elevated-shadow-drawer); width: var(--width); overflow: hidden; } /* ========================================================================== Variations ========================================================================== */ /** * Visible */ dialog.ts-app-drawer[open], dialog.ts-app-drawer:popover-open { display: flex; } /** * Positions */ .ts-app-drawer.is-bottom { align-items: flex-end; justify-content: center; } .ts-app-drawer.is-bottom { --width: 100%; } .ts-app-drawer.is-right { justify-content: flex-end; } .ts-app-drawer.is-left { justify-content: flex-start; } /** * Sizes */ .ts-app-drawer.is-small { --width: 280px; } .ts-app-drawer.is-large { --width: 580px; } /* ========================================================================== Variables ========================================================================== */ .ts-timeline { --ts-timeline-top-line-height: 14px; --ts-timeline-top-distance: calc(var(--ts-timeline-top-line-height) + 2px); --ts-timeline-content-distance: 1rem; --accent-color: initial; --accent-foreground-color: initial; } /* ========================================================================== Base ========================================================================== */ .ts-timeline { display: grid; grid-template-columns: min-content min-content auto; gap: 0rem 1rem; } /* ========================================================================== Structure ========================================================================== */ /** * Item */ .ts-timeline > .item { display: contents; } .ts-timeline > .item.is-secondary { --ts-timeline-top-line-height: 2px; --ts-timeline-top-distance: calc(var(--ts-timeline-top-line-height) - 4px); } .ts-timeline > .item:first-child, .ts-timeline > .item.is-break + .item { --ts-timeline-top-distance: 0; } /** * Aside */ .ts-timeline > .item .aside { margin-top: var(--ts-timeline-top-distance); margin-bottom: 0.5rem; white-space: nowrap; text-align: right; } /** * Indicator */ .ts-timeline > .item .indicator { display: flex; flex-direction: column; align-items: center; gap: 2px; grid-column: 1 / 3; } .ts-timeline > .item .aside + .indicator { grid-column: 2 / 3; } .ts-timeline > .item.is-break + .item.is-secondary .indicator, .ts-timeline > .item.is-secondary:first-child .indicator { margin-top: 6px; } .ts-timeline > .item .indicator::before { display: block; content: ""; background: var(--ts-gray-300); pointer-events: none; min-height: var(--ts-timeline-top-line-height); width: 2px; } .ts-timeline > .item .indicator::after { display: block; flex: 1; content: ""; background: var(--ts-gray-300); pointer-events: none; min-height: 0; height: 100%; width: 2px; } .ts-timeline > .item:last-child .indicator::after { display: none; } .ts-timeline > .item:first-child .indicator::before, .ts-timeline > .item.is-break + .item .indicator::before { display: none; } .ts-timeline > .item:last-child .content, .ts-timeline > .item.is-break + .item .content { margin-bottom: 0; } /** * Content */ .ts-timeline > .item .content { flex: 1; margin-top: var(--ts-timeline-top-distance); margin-bottom: var(--ts-timeline-content-distance); } /** * Break */ .ts-timeline > .item.is-break { display: flex; grid-column: 1 / 4; height: 4px; background: var(--ts-gray-300); } .ts-timeline > .item.is-break:not(:last-child) { margin-bottom: var(--ts-timeline-content-distance); } /* ========================================================================== Variations ========================================================================== */ /** * Icon Indicator */ .ts-timeline > .item .indicator .ts-icon { aspect-ratio: 1/1; width: 30px; height: 30px; font-size: var(--ts-font-size-14px); display: flex; align-items: center; justify-content: center; line-height: 1; background: var(--ts-gray-100); border-radius: 100rem; color: var(--ts-gray-600); } .ts-timeline > .item.is-secondary .indicator .ts-icon { aspect-ratio: 1/1; width: 16px; height: 16px; background: initial; } .ts-timeline > .item .indicator.is-icon ~ .content::after { width: 3px; left: -45px; } /** * Negative */ .ts-timeline > .item.is-negative .indicator .ts-icon { background: var(--ts-negative-500); color: var(--ts-white); } .ts-timeline > .item.is-negative.is-secondary .indicator .ts-icon { background: initial; color: var(--ts-negative-500); } /** * Active */ .ts-timeline > .item.is-active .indicator .ts-icon { background: var(--accent-color, var(--ts-gray-800)); color: var(--accent-foreground-color, var(--ts-gray-50)); } .ts-timeline > .item.is-active.is-secondary .indicator .ts-icon { background: initial; color: var(--ts-gray-800); } /** * Disabled */ .ts-timeline > .item.is-disabled :is(.aside, .content, .indicator) { pointer-events: none; opacity: 0.5; user-select: none; } /** * Compact */ .ts-timeline.is-compact { --ts-timeline-content-distance: 0.5rem; } /* ========================================================================== Variables ========================================================================== */ .ts-blankslate { --accent-color: initial; --accent-foreground-color: initial; --padding: 3.5rem; --icon-size: var(--ts-font-size-55px); --header-font-size: var(--ts-font-size-17px); --description-font-size: var(--ts-font-size-15px); --header-distance: var(--ts-space-gap); --description-distance: 0.25rem; --icon-description-distance: var(--ts-space-gap); } /* ========================================================================== Base ========================================================================== */ .ts-blankslate { padding-bottom: var(--padding); padding-top: var(--padding); padding-left: 1rem; padding-right: 1rem; text-align: center; } /* ========================================================================== Structure ========================================================================== */ .ts-blankslate > .ts-icon { font-size: var(--icon-size); color: var(--accent-color, var(--ts-gray-800)); margin-top: 0.25rem; display: inline-block; line-height: 1; } .ts-blankslate .header { color: var(--accent-color, var(--ts-gray-800)); font-size: var(--header-font-size); font-weight: 500; line-height: 1.6; } .ts-blankslate > .ts-icon + .header { margin-top: var(--header-distance); } .ts-blankslate > .ts-icon + .description { margin-top: var(--icon-description-distance); } .ts-blankslate .description { color: var(--ts-gray-500); font-size: var(--description-font-size); margin-top: var(--description-distance); } .ts-blankslate .action { margin-top: var(--ts-space-gap-large); } .ts-blankslate .action + .action { margin-top: var(--ts-space-gap); } /* ========================================================================== Variations ========================================================================== */ /** * Narrow */ .ts-blankslate.is-narrow { margin: 0 auto; max-width: 430px; } /** * Spacious */ .ts-blankslate.is-spacious { --padding: 3.5rem; } /** * Interactive */ .ts-blankslate.is-interactive { display: block; text-decoration: none; } .ts-blankslate.is-interactive:hover { cursor: pointer; background: var(--ts-gray-75); } /** * Secondary */ .ts-blankslate.is-secondary > .ts-icon { color: var(--ts-gray-500); } .ts-blankslate.is-secondary .header { color: var(--ts-gray-500); } /** * Sizes */ .ts-blankslate.is-small { --padding: 1.5rem; --icon-size: var(--ts-font-size-45px); --header-font-size: var(--ts-font-size-16px); --description-font-size: var(--ts-font-size-14px); --header-distance: var(--ts-space-gap-small); --description-distance: 0; --icon-description-distance: var(--ts-space-gap-small); } .ts-blankslate.is-large { --icon-size: var(--ts-font-size-65px); --header-font-size: var(--ts-font-size-18px); --header-distance: var(--ts-space-gap); } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Base ========================================================================== */ .ts-app-center { display: grid; align-items: center; justify-content: center; height: 100%; width: 100%; margin: 0; flex-direction: column; color: inherit; overflow-y: auto; } /* ========================================================================== Structure ========================================================================== */ .ts-app-center > .content { } /** * Padded */ .has-padded { padding: var(--ts-space-gap) !important; } .has-padded-small { padding: var(--ts-space-gap-small) !important; } .has-padded-large { padding: var(--ts-space-gap-large) !important; } .has-padded-big { padding: var(--ts-space-gap-big) !important; } .has-padded-huge { padding: var(--ts-space-gap-huge) !important; } /** Horizontally */ .has-horizontally-padded { padding-left: var(--ts-space-gap) !important; padding-right: var(--ts-space-gap) !important; } .has-horizontally-padded-small { padding-left: var(--ts-space-gap-small) !important; padding-right: var(--ts-space-gap-small) !important; } .has-horizontally-padded-large { padding-left: var(--ts-space-gap-large) !important; padding-right: var(--ts-space-gap-large) !important; } .has-horizontally-padded-big { padding-left: var(--ts-space-gap-big) !important; padding-right: var(--ts-space-gap-big) !important; } .has-horizontally-padded-huge { padding-left: var(--ts-space-gap-huge) !important; padding-right: var(--ts-space-gap-huge) !important; } /** Vertically */ .has-vertically-padded { padding-top: var(--ts-space-gap) !important; padding-bottom: var(--ts-space-gap) !important; } .has-vertically-padded-small { padding-top: var(--ts-space-gap-small) !important; padding-bottom: var(--ts-space-gap-small) !important; } .has-vertically-padded-large { padding-top: var(--ts-space-gap-large) !important; padding-bottom: var(--ts-space-gap-large) !important; } .has-vertically-padded-big { padding-top: var(--ts-space-gap-big) !important; padding-bottom: var(--ts-space-gap-big) !important; } .has-vertically-padded-huge { padding-top: var(--ts-space-gap-huge) !important; padding-bottom: var(--ts-space-gap-huge) !important; } /** Bottom */ .has-bottom-padded { padding-bottom: var(--ts-space-gap) !important; } .has-bottom-padded-small { padding-bottom: var(--ts-space-gap-small) !important; } .has-bottom-padded-large { padding-bottom: var(--ts-space-gap-large) !important; } .has-bottom-padded-big { padding-bottom: var(--ts-space-gap-big) !important; } .has-bottom-padded-huge { padding-bottom: var(--ts-space-gap-huge) !important; } /** Top */ .has-top-padded { padding-top: var(--ts-space-gap) !important; } .has-top-padded-small { padding-top: var(--ts-space-gap-small) !important; } .has-top-padded-large { padding-top: var(--ts-space-gap-large) !important; } .has-top-padded-big { padding-top: var(--ts-space-gap-big) !important; } .has-top-padded-huge { padding-top: var(--ts-space-gap-huge) !important; } /** Start */ .has-start-padded { padding-left: var(--ts-space-gap) !important; } .has-start-padded-small { padding-left: var(--ts-space-gap-small) !important; } .has-start-padded-large { padding-left: var(--ts-space-gap-large) !important; } .has-start-padded-big { padding-left: var(--ts-space-gap-big) !important; } .has-start-padded-huge { padding-left: var(--ts-space-gap-huge) !important; } /** End */ .has-end-padded { padding-right: var(--ts-space-gap) !important; } .has-end-padded-small { padding-right: var(--ts-space-gap-small) !important; } .has-end-padded-large { padding-right: var(--ts-space-gap-large) !important; } .has-end-padded-big { padding-right: var(--ts-space-gap-big) !important; } .has-end-padded-huge { padding-right: var(--ts-space-gap-huge) !important; } /** * Fitted */ .has-fitted { padding: 0 !important; } .has-vertically-fitted { padding-top: 0 !important; padding-bottom: 0 !important; } .has-horizontally-fitted { padding-left: 0 !important; padding-right: 0 !important; } .has-start-fitted { padding-right: 0 !important; } .has-end-fitted { padding-left: 0 !important; } .has-top-fitted { padding-top: 0 !important; } .has-bottom-fitted { padding-bottom: 0 !important; } /** * Spaced */ .has-spaced { margin: 1rem !important; } .has-spaced-small { margin: var(--ts-space-gap-small) !important; } .has-spaced-large { margin: var(--ts-space-gap-large) !important; } .has-spaced-big { margin: var(--ts-space-gap-big) !important; } .has-spaced-huge { margin: var(--ts-space-gap-huge) !important; } /** Horizontally */ .has-horizontally-spaced { margin-left: var(--ts-space-gap) !important; margin-right: var(--ts-space-gap) !important; } .has-horizontally-spaced-small { margin-left: var(--ts-space-gap-small) !important; margin-right: var(--ts-space-gap-small) !important; } .has-horizontally-spaced-large { margin-left: var(--ts-space-gap-large) !important; margin-right: var(--ts-space-gap-large) !important; } .has-horizontally-spaced-big { margin-left: var(--ts-space-gap-big) !important; margin-right: var(--ts-space-gap-big) !important; } .has-horizontally-spaced-huge { margin-left: var(--ts-space-gap-huge) !important; margin-right: var(--ts-space-gap-huge) !important; } /** Vertically */ .has-vertically-spaced { margin-top: var(--ts-space-gap) !important; margin-bottom: var(--ts-space-gap) !important; } .has-vertically-spaced-small { margin-top: var(--ts-space-gap-small) !important; margin-bottom: var(--ts-space-gap-small) !important; } .has-vertically-spaced-large { margin-top: var(--ts-space-gap-large) !important; margin-bottom: var(--ts-space-gap-large) !important; } .has-vertically-spaced-big { margin-top: var(--ts-space-gap-big) !important; margin-bottom: var(--ts-space-gap-big) !important; } .has-vertically-spaced-huge { margin-top: var(--ts-space-gap-huge) !important; margin-bottom: var(--ts-space-gap-huge) !important; } /** Bottom */ .has-bottom-spaced { margin-bottom: var(--ts-space-gap) !important; } .has-bottom-spaced-small { margin-bottom: var(--ts-space-gap-small) !important; } .has-bottom-spaced-large { margin-bottom: var(--ts-space-gap-large) !important; } .has-bottom-spaced-big { margin-bottom: var(--ts-space-gap-big) !important; } .has-bottom-spaced-huge { margin-bottom: var(--ts-space-gap-huge) !important; } /** Top */ .has-top-spaced { margin-top: var(--ts-space-gap) !important; } .has-top-spaced-small { margin-top: var(--ts-space-gap-small) !important; } .has-top-spaced-large { margin-top: var(--ts-space-gap-large) !important; } .has-top-spaced-big { margin-top: var(--ts-space-gap-big) !important; } .has-top-spaced-huge { margin-top: var(--ts-space-gap-huge) !important; } /** Start */ .has-start-spaced { margin-left: var(--ts-space-gap) !important; } .has-start-spaced-small { margin-left: var(--ts-space-gap-small) !important; } .has-start-spaced-large { margin-left: var(--ts-space-gap-large) !important; } .has-start-spaced-big { margin-left: var(--ts-space-gap-big) !important; } .has-start-spaced-huge { margin-left: var(--ts-space-gap-huge) !important; } /** End */ .has-end-spaced { margin-right: var(--ts-space-gap) !important; } .has-end-spaced-small { margin-right: var(--ts-space-gap-small) !important; } .has-end-spaced-large { margin-right: var(--ts-space-gap-large) !important; } .has-end-spaced-big { margin-right: var(--ts-space-gap-big) !important; } .has-end-spaced-huge { margin-right: var(--ts-space-gap-huge) !important; } /** Auto */ .has-top-spaced-auto { margin-top: auto !important; } .has-bottom-spaced-auto { margin-bottom: auto !important; } .has-start-spaced-auto { margin-left: auto !important; } .has-end-spaced-auto { margin-right: auto !important; } .has-vertically-spaced-auto { margin-top: auto !important; margin-bottom: auto !important; } .has-horizontally-spaced-auto { margin-left: auto !important; margin-right: auto !important; } /** * Hidden */ .has-hidden { display: none !important; } .has-invisible { visibility: hidden !important; } /** * Edged */ .has-edged { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; } /*.has-topleft-borderless { border: 0 !important; } .has-borderless { border: 0 !important; } .has-borderless-x { or horizontal border-left: 0 !important; border-right: 0 !important; } .has-radiusless { border-radius: 0 !important; }*/ /** * Line Height */ .has-leading-small { line-height: 1.4 !important; } .has-leading-none { line-height: 1 !important; } .has-leading-large { line-height: 1.9 !important; } /** * Flex */ .has-flex-center { display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; } /** * Font Size */ .has-text-14px { font-size: var(--ts-font-size-14px) !important; } .has-text-15px { font-size: var(--ts-font-size-15px) !important; } .has-text-16px { font-size: var(--ts-font-size-16px) !important; } /** * Text Color */ .has-text-white { color: var(--ts-white) !important; } .has-text-black { color: var(--ts-black) !important; } /** * Cursor */ .has-cursor-auto { cursor: auto !important; } .has-cursor-default { cursor: default !important; } .has-cursor-pointer { cursor: pointer !important; } .has-cursor-not-allowed { cursor: not-allowed !important; } /** * User Select */ .has-select-none { user-select: none !important; } .has-select-all { user-select: all !important; } /** * Pointer Events */ .has-pointer-events-none { pointer-events: none !important; } /** * Hover */ .has-hover-fadein { opacity: 0.7; } .has-hover-fadein:hover { opacity: 1; } .has-hover-fadeout { opacity: 1; } .has-hover-fadeout:hover { opacity: 0.7; } .has-hover-target { text-decoration: none; color: inherit; } .has-hover-target:hover .has-target-link { color: var(--ts-link-700); } .has-hover-target:hover .has-target-underline { text-decoration: underline; } /** * Link Overlay */ .has-stretched-link { position: relative; } .has-stretched-link a[href]:not(.has-link-target), .has-stretched-link button:not(.has-link-target) { position: relative; z-index: 1; } .has-stretched-link .has-link-target { position: static; text-decoration: none; } .has-stretched-link .has-link-target:hover { text-decoration: none; } .has-stretched-link .has-link-target::before { content: ""; cursor: inherit; display: block; position: absolute; top: 0px; left: 0px; z-index: 0; width: 100%; height: 100%; } /** * Word Break */ .has-break-all { word-break: break-all !important; } .has-break-words { overflow-wrap: break-word !important; } .has-break-keep { word-break: keep-all !important; } /** * Overflow */ .has-overflow-hidden { overflow: hidden !important; } /** * Sizes */ .has-full-size { width: 100% !important; height: 100% !important; } .has-full-width { width: 100% !important; } .has-full-height { height: 100% !important; } /** * Accent */ .is-accent { --accent-color: var(--ts-accent-color); --accent-foreground-color: var(--ts-accent-foreground-color); } /* ========================================================================== Variables ========================================================================== */ .ts-popover { --ts-popover-position: fixed; } /* ========================================================================== Base ========================================================================== */ .ts-popover { display: block; position: fixed; text-decoration: none; color: inherit; border: 1px solid var(--ts-gray-300); border-radius: var(--ts-border-radius-element); overflow: hidden; background: var(--ts-gray-50); box-shadow: var(--ts-elevated-shadow); } /* ========================================================================== Structure ========================================================================== */ /* ========================================================================== Variables ========================================================================== */ html { --ts-white: #fff; --ts-black: #333; --ts-accent-color: unset; --ts-accent-foreground-color: var(--ts-white); --ts-breakpoint-mobile-min: 0px; --ts-breakpoint-mobile-max: 767.98px; --ts-breakpoint-tablet-min: 768px; --ts-breakpoint-tablet-max: 1023.98px; --ts-breakpoint-desktop-min: 1024px; --ts-breakpoint-desktop-max: 1279.98px; --ts-breakpoint-widescreen-min: 1280px; --ts-breakpoint-widescreen-max: 9999px; --ts-light-gray-50: rgb(255, 255, 255); --ts-light-gray-75: rgb(250, 250, 250); --ts-light-gray-100: rgb(242, 242, 242); --ts-light-gray-200: rgb(238, 238, 238); --ts-light-gray-300: rgb(225, 225, 225); --ts-light-gray-400: rgb(215, 215, 215); --ts-light-gray-500: rgb(118, 118, 118); --ts-light-gray-600: rgb(90, 90, 90); --ts-light-gray-700: rgb(70, 70, 70); --ts-light-gray-800: rgb(55, 55, 55); --ts-light-gray-900: rgb(48, 48, 48); --ts-dark-gray-50: rgb(39, 39, 39); --ts-dark-gray-75: rgb(47, 47, 47); --ts-dark-gray-100: rgb(51, 51, 51); --ts-dark-gray-200: rgb(56, 56, 56); --ts-dark-gray-300: rgb(71, 71, 71); --ts-dark-gray-400: rgb(92, 92, 92); --ts-dark-gray-500: rgb(189, 189, 189); --ts-dark-gray-600: rgb(229, 229, 229); --ts-dark-gray-700: rgb(233, 233, 233); --ts-dark-gray-800: rgb(238, 238, 238); --ts-dark-gray-900: rgb(255, 255, 255); --ts-static-gray-50: var(--ts-light-gray-50); --ts-static-gray-75: var(--ts-light-gray-75); --ts-static-gray-100: var(--ts-light-gray-100); --ts-static-gray-200: var(--ts-light-gray-200); --ts-static-gray-300: var(--ts-light-gray-300); --ts-static-gray-400: var(--ts-light-gray-400); --ts-static-gray-500: var(--ts-light-gray-500); --ts-static-gray-600: var(--ts-light-gray-600); --ts-static-gray-700: var(--ts-light-gray-700); --ts-static-gray-800: var(--ts-light-gray-800); --ts-static-gray-900: var(--ts-light-gray-900); --ts-static-primary-400: #40a9ff; --ts-static-primary-500: #1890ff; --ts-static-primary-600: #096dd9; --ts-static-primary-700: #0050b3; --ts-static-primary-800: #003a8c; --ts-static-primary-900: #002766; --ts-static-warning-400: #ffec3d; --ts-static-warning-500: #fadb14; --ts-static-warning-600: #d4b106; --ts-static-warning-700: #ad8b00; --ts-static-warning-800: #876800; --ts-static-warning-900: #614700; --ts-static-positive-400: #73d13d; --ts-static-positive-500: #52c41a; --ts-static-positive-600: #389e0d; --ts-static-positive-700: #237804; --ts-static-positive-800: #135200; --ts-static-positive-900: #092b00; --ts-static-negative-400: #ff4d4f; --ts-static-negative-500: #f5222d; --ts-static-negative-600: #cf1322; --ts-static-negative-700: #a8071a; --ts-static-negative-800: #820014; --ts-static-negative-900: #5c0011; --ts-primary-400: #40a9ff; --ts-primary-500: #1890ff; --ts-primary-600: #096dd9; --ts-primary-700: #0050b3; --ts-primary-800: #003a8c; --ts-primary-900: #002766; --ts-link-700: #0050b3; --ts-warning-400: #ffec3d; --ts-warning-500: #fadb14; --ts-warning-600: #d4b106; --ts-warning-700: #ad8b00; --ts-warning-800: #876800; --ts-warning-900: #614700; --ts-positive-400: #73d13d; --ts-positive-500: #52c41a; --ts-positive-600: #389e0d; --ts-positive-700: #237804; --ts-positive-800: #135200; --ts-positive-900: #092b00; --ts-negative-400: #ff4d4f; --ts-negative-500: #f5222d; --ts-negative-600: #cf1322; --ts-negative-700: #a8071a; --ts-negative-800: #820014; --ts-negative-900: #5c0011; --ts-z-app-drawer: 102; --ts-z-dropdown: 103; --ts-z-mask: 101; --ts-z-modal: 102; --ts-z-tooltip: 104; --ts-border-radius-container: 0.4rem; --ts-border-radius-element: 0.4rem; --ts-border-radius-secondary: 0.3rem; --ts-page-background-default: var(--ts-gray-50); --ts-page-background-secondary: var(--ts-gray-75); --ts-page-background-tertiary: var(--ts-gray-100); --ts-elevated-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); --ts-elevated-shadow-modal: 0 0 20px rgba(0, 0, 0, 0.1); --ts-elevated-shadow-drawer: 0 0 20px rgba(0, 0, 0, 0.1); } /** * Sizes */ html { --ts-input-height-large: 42px; --ts-input-height-large-dense: 37px; --ts-input-height-medium: 37px; --ts-input-height-medium-dense: 32px; --ts-input-height-small: 32px; --ts-input-height-small-dense: 32px; --ts-font-size-mini: calc(12 / 15 * 1rem); --ts-font-size-tiny: calc(13 / 15 * 1rem); --ts-font-size-small: calc(14 / 15 * 1rem); --ts-font-size-medium: calc(15 / 15 * 1rem); --ts-font-size-large: calc(18 / 15 * 1rem); --ts-font-size-big: calc(20 / 15 * 1rem); --ts-font-size-huge: calc(24 / 15 * 1rem); --ts-font-size-massive: calc(30 / 15 * 1rem); --ts-font-size-12px: calc(12 / 15 * 1rem); --ts-font-size-13px: calc(13 / 15 * 1rem); --ts-font-size-14px: calc(14 / 15 * 1rem); --ts-font-size-15px: calc(15 / 15 * 1rem); --ts-font-size-16px: calc(16 / 15 * 1rem); --ts-font-size-17px: calc(17 / 15 * 1rem); --ts-font-size-18px: calc(18 / 15 * 1rem); --ts-font-size-20px: calc(20 / 15 * 1rem); --ts-font-size-24px: calc(24 / 15 * 1rem); --ts-font-size-25px: calc(25 / 15 * 1rem); --ts-font-size-30px: calc(30 / 15 * 1rem); --ts-font-size-33px: calc(33 / 15 * 1rem); --ts-font-size-38px: calc(38 / 15 * 1rem); --ts-font-size-45px: calc(45 / 15 * 1rem); --ts-font-size-55px: calc(55 / 15 * 1rem); --ts-font-size-65px: calc(65 / 15 * 1rem); --ts-font-size-75px: calc(75 / 15 * 1rem); --ts-absolute-mini: calc(12 / 15 * 1rem); --ts-absolute-tiny: calc(13 / 15 * 1rem); --ts-absolute-small: calc(14 / 15 * 1rem); --ts-absolute-medium: calc(15 / 15 * 1rem); --ts-absolute-large: calc(18 / 15 * 1rem); --ts-absolute-big: calc(20 / 15 * 1rem); --ts-absolute-huge: calc(24 / 15 * 1rem); --ts-absolute-massive: calc(30 / 15 * 1rem); --ts-relative-mini: calc(12 / 15 * 1em); --ts-relative-tiny: calc(13 / 15 * 1em); --ts-relative-small: calc(14 / 15 * 1em); --ts-relative-medium: calc(15 / 15 * 1em); --ts-relative-large: calc(18 / 15 * 1em); --ts-relative-big: calc(20 / 15 * 1em); --ts-relative-huge: calc(24 / 15 * 1em); --ts-relative-massive: calc(30 / 15 * 1em); --ts-space-gap: 1rem; --ts-space-gap-small: 0.5rem; --ts-space-gap-large: 1.5rem; --ts-space-gap-big: 3rem; --ts-space-gap-huge: 4.5rem; } /* ========================================================================== Color Schemes ========================================================================== */ /** * Light */ html, html.is-light, .has-light, html.is-dark .has-inverted { color-scheme: light; --ts-gray-50: var(--ts-light-gray-50); --ts-gray-75: var(--ts-light-gray-75); --ts-gray-100: var(--ts-light-gray-100); --ts-gray-200: var(--ts-light-gray-200); --ts-gray-300: var(--ts-light-gray-300); --ts-gray-400: var(--ts-light-gray-400); --ts-gray-500: var(--ts-light-gray-500); --ts-gray-600: var(--ts-light-gray-600); --ts-gray-700: var(--ts-light-gray-700); --ts-gray-800: var(--ts-light-gray-800); --ts-gray-900: var(--ts-light-gray-900); --ts-tonal-positive-400: #cdffbe; --ts-tonal-positive-800: #357016; --ts-tonal-negative-400: #ffbebe; --ts-tonal-negative-800: #701616; --ts-tonal-primary-400: #d9edff; --ts-tonal-primary-800: #005cde; --ts-tonal-warning-400: #fff7ae; --ts-tonal-warning-800: #866800; --ts-page-background-default: var(--ts-gray-50); --ts-page-background-secondary: var(--ts-gray-75); --ts-page-background-tertiary: var(--ts-gray-100); --ts-elevated-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); --ts-elevated-shadow-modal: 0 0 20px rgba(0, 0, 0, 0.1); --ts-elevated-shadow-drawer: 0 0 20px rgba(0, 0, 0, 0.1); } html.is-light .has-inverted, .has-inverted, html.is-dark, .has-dark { color-scheme: dark; --ts-gray-50: var(--ts-dark-gray-50); --ts-gray-75: var(--ts-dark-gray-75); --ts-gray-100: var(--ts-dark-gray-100); --ts-gray-200: var(--ts-dark-gray-200); --ts-gray-300: var(--ts-dark-gray-300); --ts-gray-400: var(--ts-dark-gray-400); --ts-gray-500: var(--ts-dark-gray-500); --ts-gray-600: var(--ts-dark-gray-600); --ts-gray-700: var(--ts-dark-gray-700); --ts-gray-800: var(--ts-dark-gray-800); --ts-gray-900: var(--ts-dark-gray-900); --ts-link-700: #a6a6f6; --ts-tonal-positive-400: #92d34f; --ts-tonal-positive-800: #0e4600; --ts-tonal-negative-400: #d60000; --ts-tonal-negative-800: #fff; --ts-tonal-primary-400: #0a6ffd; --ts-tonal-primary-800: #ffffff; --ts-tonal-warning-400: #edff00; --ts-tonal-warning-800: #463f00; --ts-page-background-default: var(--ts-dark-gray-50); --ts-page-background-secondary: rgb(30, 30, 30); --ts-page-background-tertiary: rgb(23, 23, 23); --ts-elevated-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25); --ts-elevated-shadow-modal: 0 0 20px rgba(0, 0, 0, 0.5); --ts-elevated-shadow-drawer: 0 0 20px rgba(0, 0, 0, 0.2); } /** * Hidden */ html.is-light .has-light-hidden, html.is-dark .has-dark-hidden { display: none !important; } @media (prefers-color-scheme: light) { html:not(.is-dark) .has-light-hidden { display: none !important; } } @media (prefers-color-scheme: dark) { html:not(.is-light) .has-dark-hidden { display: none !important; } } /** * Dark */ @media (prefers-color-scheme: dark) { html:not(.is-light) { color-scheme: dark; --ts-gray-50: var(--ts-dark-gray-50); --ts-gray-75: var(--ts-dark-gray-75); --ts-gray-100: var(--ts-dark-gray-100); --ts-gray-200: var(--ts-dark-gray-200); --ts-gray-300: var(--ts-dark-gray-300); --ts-gray-400: var(--ts-dark-gray-400); --ts-gray-500: var(--ts-dark-gray-500); --ts-gray-600: var(--ts-dark-gray-600); --ts-gray-700: var(--ts-dark-gray-700); --ts-gray-800: var(--ts-dark-gray-800); --ts-gray-900: var(--ts-dark-gray-900); --ts-primary-400: #40a9ff; --ts-primary-500: #2492f7; --ts-primary-600: #2282e9; --ts-primary-700: #0e52a5; --ts-primary-800: #003a8c; --ts-primary-900: #002766; --ts-link-700: #afafff; --ts-tonal-positive-400: #92d34f; --ts-tonal-positive-800: #0e4600; --ts-tonal-negative-400: #d60000; --ts-tonal-negative-800: #fff; --ts-tonal-primary-400: #0a6ffd; --ts-tonal-primary-800: #ffffff; --ts-tonal-warning-400: #edff00; --ts-tonal-warning-800: #463f00; --ts-page-background-default: var(--ts-dark-gray-50); --ts-page-background-secondary: rgb(30, 30, 30); --ts-page-background-tertiary: rgb(23, 23, 23); --ts-elevated-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25); --ts-elevated-shadow-modal: 0 0 20px rgba(0, 0, 0, 0.5); --ts-elevated-shadow-drawer: 0 0 20px rgba(0, 0, 0, 0.2); } html:not(.is-light) .has-inverted { color-scheme: light; --ts-gray-50: var(--ts-light-gray-50); --ts-gray-75: var(--ts-light-gray-75); --ts-gray-100: var(--ts-light-gray-100); --ts-gray-200: var(--ts-light-gray-200); --ts-gray-300: var(--ts-light-gray-300); --ts-gray-400: var(--ts-light-gray-400); --ts-gray-500: var(--ts-light-gray-500); --ts-gray-600: var(--ts-light-gray-600); --ts-gray-700: var(--ts-light-gray-700); --ts-gray-800: var(--ts-light-gray-800); --ts-gray-900: var(--ts-light-gray-900); --ts-tonal-positive-400: #cdffbe; --ts-tonal-positive-800: #357016; --ts-tonal-negative-400: #ffbebe; --ts-tonal-negative-800: #701616; --ts-tonal-primary-400: #d9edff; --ts-tonal-primary-800: #005cde; --ts-tonal-warning-400: #fff7ae; --ts-tonal-warning-800: #866800; --ts-page-background-default: var(--ts-gray-50); --ts-page-background-secondary: var(--ts-gray-75); --ts-page-background-tertiary: var(--ts-gray-100); --ts-elevated-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); --ts-elevated-shadow-modal: 0 0 20px rgba(0, 0, 0, 0.1); --ts-elevated-shadow-drawer: 0 0 20px rgba(0, 0, 0, 0.1); } } /* ========================================================================== Scales ========================================================================== */ html.is-small, html.is-small body { font-size: 14px; } html.is-medium, html.is-medium body { font-size: 15px; } html.is-large, html.is-large body { font-size: 16px; } /* ========================================================================== Radius ========================================================================== */ html.is-circular { --ts-border-radius-container: 1rem; --ts-border-radius-element: 0.7rem; --ts-border-radius-secondary: 0.4rem; } /* ========================================================================== Background Color ========================================================================== */ html.is-secondary, html.is-secondary body { background-color: var(--ts-page-background-secondary); } /* ========================================================================== Rounded ========================================================================== */ html.is-rounded { }