:root { --c-white: #fff; --c-gray-100: #f2f4f7; --c-gray-200: #ebedf2; --c-gray-300: #dadee6; --c-gray-600: #959ba6; --c-gray-700: #4c5059; --c-gray-800: #333740; --c-gray-900: #1f2126; --c-purple-fade: rgba(115,102,255,.1); --c-green-fade: rgba(77,255,196,.1); --c-yellow-fade: rgba(255,232,116,.2); --c-red-fade: rgba(255,77,106,.2); --c-blue-fade: rgba(77,196,255,.1); --c-gray-fade: rgba(242,244,247,.96); --c-purple-100: #d6d2ff; --c-purple-800: #a299ff; --c-purple-900: #7366ff; --c-green: #80ffd5; --c-green-dark: #31ecae; --c-green-800: #1fc28b; --c-blue: #4dc4ff; --c-red: #ff4d6a; --c-yellow: #ffe874; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", monospace; --font-size-2xs: 0.75rem; --font-size-xs: 0.85rem; --font-size-s: 0.9rem; --font-size-base: 1.125rem; --font-size-l: 1.5rem; --font-size-l-alt: 2rem; --font-size-xl: 2.5rem; --font-size-2xl: 3.5rem; --space-xs: 0.125rem; --space-s: 0.425rem; --space-base: 0.625rem; --space-l: 0.75rem; --space-xl: 1rem; --space-2xl: 1.5rem; --space-3xl: 3rem; --space-4xl: 4.5rem; --line-height-xs: 0.95; --line-height-s: 1.25; --line-height-base: 1.5; --line-height-l: 1.75; --time: 0.2s; --flow: 1.2rem; --rapper-full: 100%; --rapper-2xl: 85rem; --rapper-xl: 80rem; --rapper-base: 55rem; --rapper-m: 40rem; --rapper-s: 35rem; --rapper-xs: 30rem; --grid-gap-s: 0.625rem; --grid-gap-m: 1rem; --grid-gap-l: 2rem; --grid-gap-xl: 4rem; --border-width-s: 1.5px; --border-width-l: 2px; --border-rad: 6px; } @media (prefers-color-scheme: dark) { :root { --c-purple-800: #7366ff; --c-purple-900: #a299ff; --c-purple-100: #7366ff; --c-green: #31ecae; --c-green-dark: #4dffc4; --c-white: #1f2126; --c-gray-100: #333740; --c-gray-200: #4c5059; --c-gray-300: #a1a7b3; --c-gray-600: #dadee6; --c-gray-700: #ebedf2; --c-gray-800: #f2f4f7; --c-gray-900: #fff; --c-gray-fade: rgba(45,53,64,.96); } .totals-box { background: #1f2126 !important; color: #ebedf2 !important; } .totals-box .total { color: #fff !important; } select, select option { color: #fff !important; } } @media screen and (max-width: 980px) { :root { --font-size-xs: 0.95rem; --space-3xl: 2rem; --space-4xl: 2.5rem; } } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, :after, :before { animation-delay: -1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; background-attachment: scroll !important; scroll-behavior: auto !important; transition-delay: 0 !important; transition-duration: 0 !important } } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../_fonts/JetBrainsMono-Medium.woff2") format('woff'); } * { margin: 0; padding: 0; border: none; border-style: none; outline: none; text-decoration: none; list-style: none; background: none; box-sizing: border-box; -webkit-appearance:none; -moz-appearance: none; font-optical-sizing: auto; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } *::before, *::after { box-sizing: border-box; } ::selection { background: var(--c-green-fade); } [hidden] { display: none; } [x-cloak] { display: none; } html { font-size: 100%; background: var(--c-white); -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); color: var(--c-gray-700); font-weight: 400; text-align: center; text-rendering: optimizeSpeed; min-height: 100vh; } .dashboard { background: var(--c-gray-100); padding: var(--space-2xl) var(--space-base); } .flow { background: var(--c-gray-100); } header {} footer { padding: var(--space-3xl) 0; color: var(--c-gray-600); } article { margin-bottom: var(--space-3xl); position: relative; } .modal article { margin: 0; } .podcast-content { background: #1f2126 url(/assets/images/podcast-background.jpg); border-radius: var(--border-rad); padding: var(--space-3xl); background-size: cover; } fa-cell article { margin: 0; } fa-rapper { display: block; position: relative; } fa-grid, .grid, .form-grid { display: grid; grid-template-columns: repeat(12, 1fr); } form fa-grid, .form-grid { padding: 0; } fa-grid.table-row { border-top: var(--border-width-s) solid var(--c-gray-100); } fa-cell, .cell { display: block; } fa-cell.table-row { border-bottom: var(--border-width-s) solid var(--c-gray-100); padding: var(--space-base) 0; } .box { background: var(--c-white); border-radius: var(--border-rad); transition: background var(--time) ease; } .box-loading { background: var(--c-white); transition: background var(--time) ease; } .box-dark { background: var(--c-gray-800); border-radius: var(--border-rad); color: var(--c-gray-100); } .box-report { border: var(--border-width-s) solid var(--c-blue); } .usage-box { border: var(--border-width-l) solid var(--c-purple-fade) !important; } .box.searched { border: var(--border-width-l) solid var(--c-purple-800); } .gscconnect-box { background: var(--c-gray-200); } fa-grid.pricing-grid { border: var(--border-width-l) solid var(--c-gray-200); border-radius: var(--border-rad); overflow: hidden; } .site-details fa-cell { padding: var(--space-s) 0; } .masonry { column-count: 2; column-gap: var(--grid-gap-m); } .masonry-alt { column-count: 2; column-gap: var(--space-4xl); } .masonry > *, .masonry-alt > * { break-inside: avoid; margin-bottom: var(--grid-gap-m); } .m-cell { border-radius: var(--border-rad); background: var(--c-gray-fade); padding: var(--space-2xl); } .masonry-alt .m-cell { background: none; padding: 0 0 var(--space-3xl) 0; } article .m-cell p, article .m-cell-alt p { margin: 0; } .box-grid { display: grid; grid-template-columns: 1fr; grid-gap: var(--grid-gap-m); } .box-pagi { align-self: end; display: grid; grid-template-columns: 4fr 1fr 1fr; align-items: center; min-height: 2.75rem; } .box-pagi:last-child { text-align: right; } .goals-box .box-pagi { grid-column: 1/-1 !important; grid-template-columns: 4fr 1fr !important; } .rapper { margin: 0 auto; text-align: left; } .rapper-xs { width: var(--rapper-xs); } .rapper-s { max-width: var(--rapper-s); } .rapper-m { max-width: var(--rapper-m); } .rapper-l { max-width: var(--rapper-base); } .rapper-xl { max-width: var(--rapper-xl); padding: var(--space-base); } .rapper-2xl { max-width: var(--rapper-2xl); } .rapper-full { width: var(--rapper-full); max-width: var(--rapper-full); } .col1cols { grid-column: span 1; } .col2cols { grid-column: span 2; } .col3cols { grid-column: span 3; } .col4cols { grid-column: span 4; } .col5cols { grid-column: span 5; } .col6cols { grid-column: span 6; } .col7cols { grid-column: span 7; } .col8cols { grid-column: span 8; } .col9cols { grid-column: span 9; } .col10cols { grid-column: span 10; } .col11cols { grid-column: span 11; } .col12cols { grid-column: span 12; } .gap-s { grid-gap: var(--grid-gap-s); } .gap-m { grid-gap: var(--grid-gap-m); } .gap-l { grid-gap: var(--grid-gap-l); } .gap-xl { grid-gap: var(--grid-gap-xl); } .grid-center { align-items: center; } .grid-bottom { align-items: end; } .center-content { display: grid; grid-template-columns: 1fr; align-items: center; height: 100vh; } .no-mobile {} .space-top-s { margin-top: var(--space-base); } .space-top-base { margin-top: var(--space-l); } .space-top-l { margin-top: var(--space-xl); } .space-top-xl { margin-top: var(--space-2xl); } .space-top-2xl { margin-top: var(--space-3xl); } .space-top-3xl { margin-top: var(--space-4xl); } .space-bottom-s { margin-bottom: var(--space-base); } .space-bottom-base { margin-bottom: var(--space-l); } .space-bottom-l { margin-bottom: var(--space-xl); } .space-bottom-xl { margin-bottom: var(--space-2xl); } .space-bottom-2xl { margin-bottom: var(--space-3xl); } .space-bottom-3xl { margin-bottom: var(--space-4xl); } .right { text-align: right; } .left { text-align: left; } .center { text-align: center; display: block; margin-left: auto; margin-right: auto; } .pad-xl { padding: var(--space-4xl); } .pad-big { padding: var(--space-xl) var(--space-2xl); } .pad-med { padding: var(--space-base) var(--space-xl); font-size: var(--font-size-s) !important; } .pad-small { padding: var(--space-s); font-size: var(--font-size-xs) !important; } .rounded { border-radius: var(--border-rad); } .modal-wrap { width: 100%; height: 100%; background: var(--c-gray-fade); position: fixed; top: 0; left: 0; z-index: 1001; display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center; } .modal { background: var(--c-white); border-radius: var(--border-rad); z-index: 1002; width: var(--rapper-s); max-width: 100%; margin: 0 auto; position: relative; overflow-y: scroll; max-height: 90vh; } .modal-close { text-indent: -9999; cursor: pointer; position: absolute; top: 0.6rem; right: 0.6rem; background: var(--c-gray-600); width: 1.2rem; height: 1.2rem; text-align: center; display: table; overflow: visible; border-radius: 100rem; transition: var(--time) ease; font-size: var(--font-size-xs); } .modal-close:hover { background: var(--c-gray-800); } .modal-close span { display: table-cell; vertical-align: middle; } .modal-close span::before { font-family: "Font Awesome 5 Pro"; font-weight: 400; content: "\f00d"; color: var(--c-white); } @media screen and (max-width: 980px) { html { font-size: 90%; } fa-rapper { padding: var(--space-base); } fa-grid, .grid { display: block; } fa-cell, .cell { margin-bottom: var(--grid-gap-m); } .site-details { margin-top: var(--space-xl); } .site-details fa-cell { margin: 0; } .right { text-align: left; } .no-mobile { display: grid; } .no-mobile .right { text-align: right; } .masonry { column-count: 1; } .modal-wrap { display: block; } .modal { background: var(--c-white); border-radius: 0; z-index: 1002; max-width: 100%; margin-top: var(--space-2xl); } .modal-close { top: -0.6rem; right: 1.6rem; } } @media screen and (max-width: 1420px) { article.wobbles { overflow: hidden; } article.wobbles::before { content: ""; background: none; } } @media screen and (max-width: 500px) { .rapper-xs { max-width: 100%; width: 100%; } } @media screen and (min-width: 1600px) { html { font-size: 110%; } fa-icon { font-size: 16px; } article.wobbles { position: relative; overflow: visible; z-index: 1; } article.wobbles img { border: var(--border-width-l) solid var(--c-white); } article.wobbles::before { content: ""; background: url("/assets/images/background-wobbbles.svg") center center no-repeat; width: 150%; height: 170%; position: absolute; display: block; z-index: -5; opacity: 0.5; background-size: contain; transform: translate(-15%, -15%) } } .v2alert { padding: var(--space-l); border-radius: var(--border-rad); color: var(--c-white); font-size: var(--font-size-s); font-weight: 500; margin: 1rem; } .dashboard .v2alert { margin: -.5rem 0 1rem 0; } .v2alert.error { background: var(--c-red); } .v2alert.error a { color: var(--c-white) !important; } .v2alert.success { background: var(--c-green); color: var(--c-gray-800) } .v2alert.success a { color: var(--c-gray-800) !important; } .alert { position: fixed; top: var(--space-l); border-radius: var(--border-rad); background: var(--c-gray-900); color: var(--c-white); display: grid; grid-template-columns: 1fr min-content; width: var(--rapper-s); align-items: center; z-index: 1002; border: var(--border-width-s) solid var(--c-white); left: 50%; transform: translateX(-50%); } .alert-bottom { bottom: var(--space-l); top: auto; width: auto; padding: 0 var(--space-3xl); } .alert-account { bottom: var(--space-l); top: auto; right: auto; left: calc(-1 * var(--space-l)); width: auto; padding: 0 0 0 var(--space-s); transform: translateX(0); border: none; background: var(--c-purple-900); } .alert.success { background: var(--c-purple-900); } .alert.error { background: var(--c-red); } .alert .message.no-action { padding: var(--space-2xl) var(--space-xl) } .alert .message { text-align: left; padding: 0 var(--space-2xl); font-size: var(--font-size-base); font-weight: 500; } .alert .message-small { text-align: left; padding: var(--space-base); font-size: var(--font-size-s); font-weight: 500; } .alert .action { border-left: var(--border-width-s) solid var(--c-gray-800); padding: var(--space-2xl) var(--space-xl); height: 100%; } .alert .action.no-border { border: none; font-size: var(--font-size-base); } .alert .action a { color: var(--c-white); transition: color var(--time) ease; } .alert .action a:hover { color: var(--c-gray-200); } .alert .no-action a { color: var(--c-green); display: block; font-size: var(--font-size-xs); padding-top: var(--space-s); transition: color var(--time) ease; } .alert .no-action a:hover { color: var(--c-purple-800); } .alert .message-small a { color: var(--c-white); } .alert-inline { border-radius: var(--border-rad); color: var(--c-gray-800); display: grid; grid-template-columns: 1fr min-content; align-items: center; font-weight: 500; } .alert-inline.error { background: var(--c-red-fade); } .alert-inline.warning { background: var(--c-yellow-fade); } .alert-inline.success { background: var(--c-green-fade); } .alert-inline a { color: var(--c-gray-800); transition: color var(--time) ease; } .alert-inline a:hover { color: var(--c-gray-600); } .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--c-white); border-radius: var(--border-rad); z-index: 101; } .loading span { padding-right: var(--space-base); font-weight: 500; } .loading fa-icon { color: var(--c-purple-800); } .drop-wrap { position: relative; display: inline-block; } .dropdown { position: absolute; top: calc(100% + 10px); background: var(--c-gray-900); border-radius: var(--border-rad); color: var(--c-white); min-width: 15rem; padding: var(--space-2xl); z-index: 1001; } .site-name .dropdown { background: #4c5059; } .site-name .dropdown.dropdown-left::after { border-color: transparent transparent #4c5059 transparent; } .site-name .dropdown .item { color: #f2f4f7; } .site-name .dropdown .view-all a { color: #fff; font-weight: 500; } .site-name .dropdown .item-search { margin-top: var(--space-xl); display: block; padding: var(--space-s) var(--space-base); position: relative; } .site-name .dropdown .item-search input { background: transparent !important; color: #fff; border-color: #a1a7b3; } .filter .dropdown { width: 24rem; background: var(--c-gray-700); } .dropdown-sm { position: absolute; top: calc(100% + 4px); background: var(--c-gray-900); border-radius: var(--border-rad); color: var(--c-white); z-index: 1001; padding: var(--space-base); } .dropdown-sm .item a { width: 100%; color: var(--c-white); text-decoration: none; white-space: nowrap; font-size: var(--font-size-xs); } .dropdown-sm .item span { display: block; width: 100%; color: var(--c-gray-600); text-decoration: none; white-space: nowrap; font-size: var(--font-size-xs); padding: var(--space-s) var(--space-base); } .dropdown-center { left: 50%; transform: translateX(-50%); } .dropdown-left { left: 4px; } .dropdown-right { right: 0; } .dropdown.active { display: block; } .dropdown.dropdown-center::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-6px); border-width: 6px; margin-top: -6px; border-style: solid; border-color: transparent transparent var(--c-gray-900) transparent; } .dropdown.dropdown-left::after { content: ""; position: absolute; bottom: 100%; left: var(--space-base); border-width: 6px; margin-top: -6px; border-style: solid; border-color: transparent transparent var(--c-gray-900) transparent; } .filter .dropdown.dropdown-left::after { content: ""; position: absolute; bottom: 100%; left: var(--space-base); border-width: 6px; margin-top: -6px; border-style: solid; border-color: transparent transparent var(--c-gray-700) transparent; } .dropdown.dropdown-right::after { content: ""; position: absolute; bottom: 100%; right: var(--space-l); border-width: 6px; margin-top: -6px; border-style: solid; border-color: transparent transparent var(--c-gray-900) transparent; } .dropdown .item { position: relative; } .dropdown .item a { color: var(--c-gray-300); display: block; padding: var(--space-s) var(--space-base); position: relative; transition: color var(--time) ease, background var(--time) ease; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; max-width: 15rem; overflow: hidden; } .dropdown .item a:hover, .dropdown .item a:focus { background: var(--c-gray-800); border-radius: var(--border-rad); color: var(--c-white); } .dropdown .add-item a { color: var(--c-white); font-weight: 600; margin-top: var(--space-base); } .dropdown .add-item fa-icon { position: absolute; right: var(--space-base); top: 50%; transform: translateY(-50%); } /* .dropdown .item.view-all a { font-weight: 500; color: var(--c-purple-800); } */ .dropdown .item.monitor-active::before { content: ""; position: absolute; left: -10px; width: 6px; height: 6px; border-radius: var(--border-rad); display: block; background: var(--c-green-dark); top: 50%; transform: translateY(-60%); } .dropdown .item.monitor-inactive::before { content: ""; position: absolute; left: -10px; width: 6px; height: 6px; border-radius: var(--border-rad); display: block; background: var(--c-red); top: 50%; transform: translateY(-60%); } .dropdown .item.monitor-offline::before { content: ""; position: absolute; left: -10px; width: 6px; height: 6px; border-radius: var(--border-rad); display: block; background: var(--c-gray-600); top: 50%; transform: translateY(-60%); } .dropdown .item.space-top-2xl { margin: 0 !important; } @media (prefers-color-scheme: dark) { .dropdown a { color: var(--c-gray-200); } .success { color: #333740 !important; } .success a { color: #333740 !important; } .alert-inline.success { color: #fff !important; } } @media screen and (max-width: 980px) { .drop-wrap { display: inline-block; } .filter .dropdown { width: 100%; } .dropdown-sm.dropdown-right { text-align: left; } .dropdown-sm .item { white-space: nowrap; } .alert:not(.alert-account) { width: calc(100% - var(--space-xl)); } .alert-bottom { padding: 0; bottom: var(--space-s); } } .settings aside, .docu aside { position: relative; margin-top: var(--space-4xl); z-index: 1; } .settings main, .docu main { margin-top: var(--space-4xl); z-index: 2; } .settings nav.nav-main { font-family: var(--mono); } nav.nav-main { position: sticky; top: 2rem; padding-top: var(--space-xl); } nav.nav-main .fa-logo-small { margin-left: -.25rem; width: 2.5rem; margin-top: 9px !important; } nav.nav-main ul li a { color: var(--c-gray-700); font-size: var(--font-size-xs); font-weight: 500; display: block; padding: var(--space-s); transition: color var(--time) ease, padding var(--time) ease; position: relative;} nav.nav-main ul li a:not(.active):hover { color: var(--c-gray-900); padding-left: var(--space-base); } .docu nav.nav-main ul li a { font-size: var(--font-size-s); } nav.nav-main ul li.dashboard-item a { color: var(--c-gray-600); } nav.nav-main ul li.account-item a { color: var(--c-gray-600); } nav.nav-main ul li a.active { } nav.nav-main ul li a.active { color: var(--c-purple-900); padding-left: var(--space-xl); } nav.nav-main ul li a.active::before { position: absolute; font-family: "Font Awesome 5 Pro"; color: var(--c-purple-800); content: "\f054"; top: 50%; transform: translate(-200%, -50%); font-size: 12px; } .aside-menu { display: block; } .mobile-menu { display: none; position: fixed; z-index: 102; top: 2.8rem; right: 1.2rem; width: auto; } .mobile-menu a.nav-toggle { border-radius: 10rem; background: var(--c-purple-900); color: var(--c-white); padding: var(--space-base); } @media screen and (max-width: 980px) { .settings aside, .settings main, .docu aside, .docu main { margin: 0; } .settings aside { padding: var(--space-base) 0; margin-bottom: var(--space-l); } .aside-menu { display: none; } .mobile-menu { display: block; } } footer { margin: var(--space-3xl) 0; } footer nav { display: block; margin-bottom: var(--space-base); } footer nav a { color: var(--c-gray-700); font-weight: 500; padding-right: var(--space-xl); transition: color var(--time) ease; } footer nav a:hover { color: var(--c-purple-800); } .logo-grid { display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; grid-gap: var(--grid-gap-m); } .logo-wrap { display: block; } .full-logo { width: auto; height: 24px; transition: transform var(--time) ease; } .fa-logo-small { margin-top: 4px; transition: transform var(--time) ease; width: 2.5rem; height: auto; overflow: visible; z-index: 2; } .dashboard .fa-logo-small { margin-top: -4px; } .fa-logo-small:hover, .full-logo:hover { transform: scale(1.1); } .fa-logo-small path, .full-logo path { transition: fill var(--time) ease; } /* .fa-logo-small:hover path, .full-logo:hover path { fill: var(--c-purple-800); } */ /* .fa-logo-small:hover .letter, .fa-logo-small:hover .slash { fill: var(--c-white); } */ .docs header a { color: var(--c-gray-700); transition: color var(--time) ease; } .docs header a:hover { color: var(--c-purple-800); } .icon-border { border: var(--border-width-s) solid var(--c-gray-200); padding: var(--space-base); border-radius: var(--border-rad); color: var(--c-gray-700); transition: color var(--time) ease, border var(--time) ease, background var(--time) ease; display: inline-block; position: relative; white-space: nowrap; } .icon-border.icon-block { text-align: left; } .icon-border:hover { border-color: var(--c-purple-800); color: var(--c-purple-900); } .icon-border:focus { box-shadow: 0 0 0 var(--border-width-l) var(--c-purple-fade); border-color: var(--c-purple-800); } .box-report .icon-border:hover { border-color: var(--c-blue); color: var(--c-blue); } .icon-border.active { background: var(--c-gray-200); border-color: var(--c-gray-200); color: var(--c-gray-800); } .icon-border.active:hover { background: var(--c-gray-300); border-color: var(--c-gray-300); } .icon-border span { padding: 0 var(--space-xl) 0 var(--space-s); font-weight: 500; } .box-report .icon-block { min-width: 10rem; margin-bottom: var(--space-base); display: grid; grid-template-columns: 1fr min-content; align-items: center; } .box-report .save-report .icon-block { background: var(--c-gray-800); border-color: var(--c-gray-800); color: var(--c-white); font-weight: 500; } .box-report .save-report .icon-block:hover { background: var(--c-gray-600); border-color: var(--c-gray-600); } .box-report .save-report .icon-block fa-icon { color: var(--c-white); } /* VERSION 3 */ .insights-wrap2 { border: var(--border-width-s) solid var(--c-gray-800); overflow: hidden; } .insights-header { background: var(--c-gray-800); color: var(--c-white); font-weight: 500; font-size: var(--font-size-xs); } .insights-header a { color: var(--c-white)} .insight-area { padding: var(--space-xl) 0 var(--space-s) 0; border-bottom: var(--border-width-s) solid var(--c-gray-200); } .add-insight-area, .insight-area-actions { padding: var(--space-xl); border-bottom: none; } .insight-area-actions { background: var(--c-gray-100); } .insight-area:last-child { border: none; } .not-selected-text { cursor: pointer; font-weight: 500; border-radius: var(--border-rad); padding: var(--space-s) var(--space-base); background: var(--c-gray-100); color: var(--c-gray-600); } .selected-text { cursor: pointer; font-weight: 500; border-radius: var(--border-rad); padding: var(--space-s) var(--space-base); background: var(--c-gray-600); color: var(--c-white); } .insight-area .op { padding: 0 0 0 var(--space-xl); font-size: var(--font-size-xs); font-weight: 500; } .insight-remove { color: var(--c-purple-900); transition: color var(--time) ease; } .insight-remove:hover, .insight-add:hover { color: var(--c-gray-700); } .insight-add { color: var(--c-purple-900); transition: color var(--time) ease; font-weight: 500; } label.insight-label { display: inline-block; margin-right: var(--space-base); } label.insight-label input { min-width: 20rem; } .sorted-by { color: var(--c-purple-900); } .sort-select { font-size: var(--font-size-xs); font-weight: 500; } .insights-view { width: 100%; overflow: auto; } .insights-wrapper { position: relative; overflow: auto; white-space: nowrap; } .insights-wrapper td, .insights-wrapper th { text-align: left; padding: var(--space-base); min-width: 10rem; } .sticky-col { position: sticky; width: 15rem; max-width: 15rem; min-width: 15rem !important; left: 0px; background: var(--c-white); padding: var(--space-base); border-right: var(--border-width-l) solid var(--c-gray-300); } .sticky-col-secondary { position: sticky; width: 15rem; max-width: 15rem; min-width: 15rem !important; left: 15rem; background: var(--c-white); padding: var(--space-base); border-right: var(--border-width-l) solid var(--c-gray-300); } .insights-data-box a { color: var(--c-purple-900); text-decoration: underline; } @media screen and (max-width: 980px) { .insights-wrapper { position: relative; overflow: auto; white-space: normal; } .sticky-col, .sticky-col-secondary { position: relative; width: auto; max-width: auto; min-width: auto; padding: 0 !important; border: none; color: var(--c-purple-900); font-weight: 500; left: 0; } .insights-wrapper td, .insights-wrapper th { text-align: left; padding: var(--space-base) 0 0 0; } } h1, h2, h3, h4, h5 { color: var(--c-gray-800); } .head-section { margin-top: var(--space-3xl); margin-bottom: var(--space-l); } .head-section::before { content: ""; height: var(--border-width-s); width: 3rem; background: var(--c-purple-fade); display: block; margin-bottom: var(--space-3xl); } .head-section-noline::before { display: none; } article h2, article h3, article h4, fa-cell h2, fa-cell h3, fa-cell h4 { padding: var(--flow) 0 var(--space-base) 0; } .site-details fa-cell h4 { padding: 0; } .site-details fa-cell h4 a { color: var(--c-gray-800); transition: var(--time); } .site-details fa-cell h4 a:hover { color: var(--c-purple-900); } article h1 a, article h2 a, article h3 a, article h4 a, .podcast-content h2 a { font-weight: inherit; color: inherit; text-decoration: underline; } h1 { font-size: var(--font-size-2xl); line-height: var(--line-height-xs); color: var(--c-gray-900); font-weight: 900; padding-bottom: var(--flow); letter-spacing: -0.03em; } h2 { font-size: var(--font-size-xl); line-height: var(--line-height-xs); font-weight: 800; letter-spacing: -0.015em; } .h2-alt { font-weight: 600; font-size: var(--font-size-l-alt); margin: 0; padding: 0;} .podcast-content h2 { color: #fff; } h2.big { font-size: 6rem; letter-spacing: -0.3rem; padding: 0; } h2.big span { font-size: var(--font-size-l); color: var(--c-purple-800); vertical-align: middle; font-weight: 500; margin-bottom: 1.5rem; display: inline-block; letter-spacing: -0.03rem;} h3 { font-size: var(--font-size-l); line-height: var(--line-height-s); font-weight: 700; } .logo-grid h4 { margin: 0; padding: 0; } h4 { font-size: var(--font-size-base); line-height: var(--line-height-base); font-weight: 600; } .logo-grid h4 { margin: 0; padding: 0; } footer h4 { font-size: var(--font-size-s); } h2.anchor a, h3.anchor a, h4.anchor a { position: relative; text-decoration: none; padding-right: var(--space-2xl); } h2.anchor a::after, h3.anchor a::after, h4.anchor a::after { content: "#"; color: var(--c-purple-fade); padding-left: var(--space-base); transition: color var(--time) ease; font-weight: 400; } h2.anchor a:hover::after, h3.anchor a:hover::after, h4.anchor a:hover::after { color: var(--c-purple-800); } article p, article ul, article ol, article dd, article small, article table, article pre, .cell-content p, article blockquote { line-height: var(--line-height-base); margin-bottom: var(--flow); font-size: var(--font-size-base); font-weight: 400; } .cell-content p { padding-right: var(--space-2xl); } article p.smaller { font-size: var(--font-size-s); } footer p { color: var(--c-gray-700); font-size: var(--font-size-s) !important; } article blockquote { border-left: var(--border-width-l) solid var(--c-gray-200); padding-left: var(--space-xl); font-weight: 500; color: var(--c-gray-700); } article cite { margin-top: var(--space-base); } article dl { margin: var(--space-l) 0;} article dt { font-size: var(--font-size-base); line-height: var(--line-height-s); font-weight: 700; color: var(--c-gray-900); padding: var(--space-xl) var(--space-2xl) var(--space-xl) 0; position: relative; cursor: pointer; } article dt.selected { background: var(--c-gray-100); border-radius: var(--border-rad); margin-left: calc(-1 * var(--space-l)); padding-left: var(--space-l); } article dd { margin: var(--space-l) 0 var(--space-3xl) 0; display: none; } article dd.show { display: block; } article dt::after { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f077"; position: absolute; right: var(--space-l); font-size: var(--font-size-xs); color: var(--c-gray-600); top: calc(var(--space-xl) + 0.25rem); } article dt.selected::after { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f078"; position: absolute; right: var(--space-l); font-size: var(--font-size-xs); color: var(--c-gray-800); top: calc(var(--space-xl) + 0.25rem); } small, article small, cite { font-size: var(--font-size-xs); display: block; color: var(--c-gray-600); font-weight: 500; font-style: normal; } fa-cell small, .cell small { font-size: var(--font-size-xs); margin: var(--space-base) 0; } .note { border-radius: var(--border-rad); padding: var(--space-2xl); background: var(--c-gray-100); color: var(--c-gray-700); } .note-alt { border-radius: var(--border-rad); padding: var(--space-2xl); border: var(--border-width-l) solid var(--c-gray-100); } .note-copy { border-radius: var(--border-rad); padding: var(--space-2xl); background: var(--c-purple-fade); border: var(--border-width-s) solid var(--c-purple-900); color: var(--c-purple-900); font-weight: 500; } small a, .breadcrumbs a { color: inherit; text-decoration: underline; font-weight: inherit; transition: color var(--time) ease; } small a:hover, .breadcrumbs a:hover { color: var(--c-gray-700); } small.new-blog a { color: var(--c-purple-900); } .podcast-content small { color: #ebedf2; } .podcast-content small a:hover { color: #fff; } .no-underline * { text-decoration: none !important; } .breadcrumbs { font-size: var(--font-size-xs); display: block; color: var(--c-gray-600); font-weight: 500; font-style: normal; } .drop-wrap + h1 { margin-top: var(--space-2xl); } pre, code, .mono { font-family: var(--mono); font-weight: 500; font-size: var(--font-size-xs); scrollbar-width: none; -ms-overflow-style: none; } pre::-webkit-scrollbar, code::-webkit-scrollbar, .mono::-webkit-scrollbar { width: 0; height: 0; } small .mono { font-size: var(--font-size-xs); } small .mono a { font-weight: 500; } code { overflow: scroll; } code.no-scroll { overflow: hidden; } code.hide-scroll { overflow: -moz-scrollbars-none; -ms-overflow-style: none;} code.hide-scroll.element::-webkit-scrollbar { width: 0 !important } pre { display: grid; grid-template-columns: 1fr; } code.inline { border-radius: var(--border-rad); background: var(--c-gray-200); padding: var(--space-xs) var(--space-s); white-space: nowrap; margin: 0 var(--space-xs); } .author { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--grid-gap-s); } .author * { font-size: var(--font-size-2xs); } .author img { width: 2.5rem; height: auto; } .copy-code { position: relative; display: block; max-width: calc(100% - 1rem); } .clipboard { position: absolute; top: -.35rem; right: -1rem; transition: transform var(--time) ease; } .clipboard:hover { transform: scale(1.1); } .clipboard pre { } .clipboard a { background: var(--c-purple-800); color: var(--c-white); padding: var(--space-s); border-radius: 3rem; transition: background var(--time) ease; } .clipboard a:hover { background: var(--c-purple-900); } .highlight { border-radius: var(--border-rad); background: var(--c-yellow-fade); padding: var(--space-xs) var(--space-s); white-space: nowrap; /*margin: 0 var(--space-xs);*/ font-weight: 500; color: var(--c-gray-800) !important; } h3 .highlight { font-weight: 500; vertical-align: middle; } article table a.highlight, a.highlight-link { text-decoration: none !important; } .highlight-green { background: var(--c-green-fade); } .highlight-purple { background: var(--c-purple-fade); } .highlight-red { background: var(--c-red-fade); } .highlight-gray { background: var(--c-gray-100); } .highlight-blue { background: var(--c-blue-fade); } .highlight-filter { background: var(--c-gray-300); } .colour-green { background: var(--c-green-dark); color: var(--c-white); } .colour-purple { background: var(--c-purple-900); color: var(--c-white); } .colour-red { background: var(--c-red); color: var(--c-white); } .colour-gray { background: var(--c-gray-800); color: var(--c-white); } .colour-blue { background: var(--c-blue); color: var(--c-white); } .colour-light-gray { background: var(--c-gray-100); } .text-purple { color: var(--c-purple-900); } .text-red { color: var(--c-red); } .text-gray { color: var(--c-gray-800); } .text-blue { color: var(--c-blue); } .tiny { font-weight: 500; font-size: var(--font-size-xs); } .x-tiny { font-weight: 500; font-size: var(--font-size-2xs); } strong { font-weight: 600; color: var(--c-gray-800); } em { font-style: italic; } u { border-bottom: var(--border-width-l) solid var(--c-gray-600); } a { text-decoration-skip-ink: auto; } a.no-wrap { white-space: nowrap; } article p a, article li a, article dd a, article table a, .checkbox label a, article blockquote a { font-weight: 600; color: var(--c-purple-900); text-decoration: underline; transition: color var(--time) ease; background-color: transparent; } article p a:hover, article li a:hover, article dd a:hover, article table a:hover, .checkbox label a:hover, article blockquote a:hover { color: var(--c-gray-800); } footer ol, footer ul { line-height: var(--line-height-l); } article ol, article ul { margin-left: var(--space-2xl); } article ul li { list-style: disc; padding-left: var(--space-s); margin-bottom: var(--space-s); } article ul.tiny li { margin-bottom: var(--space-xs); list-style: none; } article ol li { list-style: decimal; padding-left: var(--space-s); margin-bottom: var(--space-s); } article ul.fa-ul li, article ol.fa-ul li { list-style: none; } article ol ol { margin-top: var(--space-base); } article ol ol li { list-style: lower-alpha; padding-left: var(--space-s); margin-bottom: var(--space-s); } article .inline-list { line-height: var(--line-height-l); } article .inline-list span { font-size: var(--font-size-s); margin-right: var(--space-xl); white-space: nowrap; } article .inline-list span fa-icon { margin-right: var(--space-s); color: var(--c-purple-800); } article .pricing-grid li fa-icon { color: var(--c-purple-800); } article .docu-list ul { list-style: none; margin: 0; } article .docu-list li { list-style: none; padding: 0; font-size: var(--font-size-s); } article .docu-list li a { text-decoration: none; } footer li { font-size: var(--font-size-s); } footer li a { color: var(--c-gray-700); display: block; padding: var(--space-xs) 0; transition: color var(--time) ease; } footer li a:hover { color: var(--c-purple-800); } footer li a.active { color: var(--c-purple-900); font-weight: 500; } .dropdown ul { margin: 0 !important; } .dropdown li { margin: 0 !important; padding: 0 !important; } hr { border-top: var(--border-width-s) solid var(--c-gray-200); padding: var(--space-2xl) 0; height: var(--border-width-s); margin-top: var(--space-2xl); } article table { border-spacing: 0; width: 100%; border-bottom: var(--border-width-s) solid var(--c-gray-100); } article table th, article table td { border-top: var(--border-width-s) solid var(--c-gray-100); padding: var(--space-base); color: var(--c-gray-700); font-size: var(--font-size-s); text-align: right; } article table th:first-child, article table td:first-child, article table.users-table td:nth-child(2), article table.users-table th:nth-child(2) { text-align: left; } article table th { font-weight: 600; } article table tr.all { background: var(--c-gray-100); } article table tr > td:first-child, article table tr > th:first-child { padding-left: 0; } article table tr > td:last-child, article table tr > th:last-child { padding-right: 0; } article table.table-scroll { overflow: auto; height: 100px; } article table.table-scroll thead th { position: sticky; top: 0; z-index: 1; } /* article table { display: block; width: 100%; } article table thead, article table tbody { display: block; width: 100%; } */ img, svg, video { border: none; height: auto; } article img, fa-cell img { max-width: 100%; } .cat, .chr { width: 5.5rem; height: auto; transition: transform var(--time) ease; } .cat-graph { max-width: 100%; width: 100%; } .home-shape { width: 2rem; } .customer-logos img { height: 4rem; margin: 0 var(--space-xl); } .cat:hover { transform: rotate(4deg) scale(1.1); } img.testi { border-radius: 100rem; max-width: 4rem; margin-bottom: var(--space-base); } embed, iframe, img, object, svg, video { max-width: 100%; } iframe { border-style: none; } .cat-floating { animation-name: floating; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; margin: var(--space-xl) 0 var(--space-xl) 0; } @keyframes floating { from { transform: translate(0, 0px); } 33% { transform: translate(0, var(--space-base)) rotate(4deg); } 66% { transform: translate(0, var(--space-base)) rotate(-4deg); } to { transform: translate(0, -0px); } } .logos { text-align: center; } .logos img { margin-right: var(--space-2xl); vertical-align: middle; } .icon-space-left { margin-left: var(--space-s); } .icon-space-right { margin-right: var(--space-s); } .customer-logos-small img { height: 2.5rem; margin: 0 var(--space-xl); } form {} form.grid-horizontal-form { display: grid; grid-template-columns: 1fr min-content; align-items: center; grid-gap: var(--grid-gap-m); } fieldset { margin-bottom: var(--space-3xl); display: block; } label, .label { margin-bottom: var(--space-base); display: block; font-weight: 500; } td label { margin: 0; } .grid .label { margin: 0; } label .label-text, .label .label-text { display: block; margin: var(--space-xl) 0 var(--space-base) 0; } .label-top-pad { padding-top: var(--space-xs); } label small { margin-top: var(--space-base); } input, select, textarea, button, .button, .likeinput { cursor: pointer; font-size: var(--font-size-base); border-radius: var(--border-rad); transition: border-color var(--time) ease; color: var(--c-gray-800); font-family: var(--sans); font-weight: 400; background: var(--c-white); } input, select, textarea, .likeinput { border: var(--border-width-s) solid var(--c-gray-200); width: 100%; } textarea { resize: vertical; min-height: 7.5rem; } input:hover, select:hover, .likeinput:hover { border-color: var(--c-gray-600); } input:focus, select:focus, input:hover:focus, select:hover:focus, .likeinput:hover:focus { border-color: var(--c-purple-800); } input:disabled, .likeinput:disabled { background: var(--c-gray-100); color: var(--c-gray-800); font-family: var(--sans); font-weight: 400;} input.pad-small { width: auto; max-width: 15rem; padding-right: var(--space-2xl); font-weight: 500; } .box-report .dropdown input.pad-small { width: 100%; max-width: 100%; } .pagi-search { position: relative; } .search { position: absolute; display: inline; width: auto; top: 0; left: 2rem; } .search::before { position: absolute; top: 50%; transform: translateY(-50%); font-family: "Font Awesome 5 Pro"; font-weight: 400; right: var(--space-base); color: var(--c-gray-600); content: "\f002"; font-size: var(--font-size-s); } .box .search::before { font-size: var(--font-size-xs); } .error-field { border-color: var(--c-red); } input[type=range] { height: 2rem; -webkit-appearance: none; margin: 0.5rem 0; width: 100%; border: none; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; cursor: pointer; animate: 0.2s; background: var(--c-gray-200); border-radius: 0.5rem; } input[type=range]::-webkit-slider-thumb { height: 1.5rem; width: 0.75rem; border-radius: 2rem; background: var(--c-purple-900); cursor: pointer; -webkit-appearance: none; margin-top: -0.5rem; } input[type=range]:focus::-webkit-slider-runnable-track { background: var(--c-gray-200); } input[type=range]::-moz-range-track { width: 100%; height: 0.5rem; cursor: pointer; animate: 0.2s; background: var(--c-gray-200); border-radius: 0.5rem; border: none; } input[type=range]::-moz-range-thumb { height: 1.5rem; width: 0.75rem; border-radius: 2rem; background: var(--c-purple-900); cursor: pointer; border: none; } input[type=range]::-ms-track { width: 100%; height: 1rem; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-ms-fill-lower { background: var(--c-gray-200); border-radius: 1rem; } input[type=range]::-ms-fill-upper { background: var(--c-gray-200); border-radius: 1rem; } input[type=range]::-ms-thumb { margin-top: 1px; height: 1.5rem; width: 0.75rem; border-radius: 2rem; background: var(--c-purple-900); cursor: pointer; } input[type=range]:focus::-ms-fill-lower { background: var(--c-gray-200); } input[type=range]:focus::-ms-fill-upper { background: var(--c-gray-200); } input[type=range].plan-range { margin-top: -2.1rem !important; } .select { position: relative; } .box-report .dropdown .select select, .box-report .dropdown input { border-color: var(--c-blue); } .select option { font-weight: 400; background: var(--c-white); } .select::after { position: absolute; top: 50%; transform: translateY(-50%); font-family: "Font Awesome 5 Pro"; font-weight: 900; right: var(--space-xl); color: var(--c-gray-600); content: "\f0dc"; } button, .button { background: var(--c-gray-200); color: var(--c-gray-800); margin-right: var(--space-base); font-weight: 500; transition: background var(--time) ease; display: inline-block; width: auto; text-decoration: none !important; text-transform: none; white-space: nowrap; text-align: center; } button:active, .button:active { transform: scale(.96); } button fa-icon, .button fa-icon { transition: transform var(--time) ease; } button:last-child, .button:last-child, .tag:last-child, .text-tag:last-child, button.no-space, .button.no-space { margin-right: 0; } .button-main { background: var(--c-gray-800); color: var(--c-white); } .button-alt { background: var(--c-purple-900); color: var(--c-white); } .button-secondary { background: var(--c-gray-300); color: var(--c-gray-800); } .button-insight { background: var(--c-blue); color: var(--c-white); } .button-error { background: var(--c-red); color: var(--c-white); } .box-report .button-main { background: var(--c-gray-800); } button.full, .button.full { width: 100%; } button:hover, .button:hover { background: var(--c-gray-100); } .button-main:hover { background: var(--c-gray-700); color: var(--c-white); } .button-secondary:hover { background: var(--c-gray-200); } .button-main:hover, .button-insight:hover { background: var(--c-gray-700); color: var(--c-white); } .button-alt:hover { background: var(--c-purple-800); color: var(--c-white); } .button-error:hover { background: var(--c-gray-700); color: var(--c-white); } button:hover fa-icon, .button:hover fa-icon { transform: translateX(.25rem); } ::-webkit-input-placeholder { opacity: 1; color: var(--c-gray-600); } ::-moz-placeholder { opacity: 1; color: var(--c-gray-600); } :-ms-input-placeholder { opacity: 1; color: var(--c-gray-600); } :-moz-placeholder { opacity: 1; color: var(--c-gray-600); } .checkbox { display: grid; grid-template-columns: min-content 1fr; grid-gap: var(--grid-gap-s); } .checkbox-space { padding: var(--space-l); } .tags label, .checkbox label { margin: 0; } input[type="checkbox"], input[type="radio"] { appearance: none; border: none; font-size: var(--font-size-base); background: transparent; display: inline; } input[type="checkbox"]::before { font-family: "Font Awesome 5 Pro"; font-weight: 400; color: var(--c-gray-700); transition: color var(--time) ease; content: "\f204"; } input[type="checkbox"]:checked::before { font-family: "Font Awesome 5 Pro"; font-weight: 400; color: var(--c-purple-900); content: "\f205"; } input[type="checkbox"]:hover::before { color: var(--c-gray-800); } /* input[type="checkbox"]:hover { transform: scale(1.1); } */ .options input[type="checkbox"]::before { color: var(--c-purple-800); } .survey-question .tag { margin-bottom: var(--space-base); } .td-check { width: 2rem; } .tag, .text-tag { display: inline-block; margin-right: var(--space-s); white-space: nowrap; vertical-align: middle; color: var(--c-gray-700); letter-spacing: 0 !important; text-decoration: none !important; z-index: 2; } .text-tag:active { transform: scale(.96); } .tag label, .text-tag { border-radius: var(--space-2xl); padding: var(--space-s) var(--space-l); background: var(--c-gray-100); display: inline-block; transition: color var(--time) ease, background var(--time) ease; cursor: pointer; display: inline-block; font-size: var(--font-size-xs); font-weight: 500; } .all .tag label { background: var(--c-white); } .tag-tiny label { margin: var(--space-base) 0; } .tag-tiny label { border-radius: var(--space-2xl); padding: var(--space-xs) var(--space-s); background: var(--c-gray-100); display: inline-block; transition: color var(--time) ease, background var(--time) ease; cursor: pointer; display: inline-block; font-size: var(--font-size-2xs); font-weight: 500; } .flow .text-tag { background: var(--c-gray-200); } .flow .text-tag:hover { background: var(--c-gray-300); } .tag label:hover, .text-tag:hover { background: var(--c-gray-200); } .tag input { display: none; } .tag input:checked + label { background: var(--c-gray-800); color: var(--c-white); } .tag-tiny-no input:checked + label { background: var(--c-gray-300); color: var(--c-gray-800); } .tag-editor input:checked + label { background: var(--c-purple-800); color: var(--c-white); } .tag input:checked + label::after { font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-left: var(--space-base); margin-right: -3px; content: "\f058"; } .dashboard .tag label { background: var(--c-gray-200); } .dashboard .tag label:hover { background: var(--c-gray-300); } .dashboard .tag input:checked + label:hover { background: var(--c-gray-800); } .text-tag { transition: background var(--time) ease; } h1 .text-tag { margin-left: var(--space-l); } .text-tag.tag-bold { background: var(--c-gray-800); color: var(--c-white); } .text-tag.tag-bold:hover { background: var(--c-gray-700); color: var(--c-white); } .text-tag.tag-main { background: var(--c-yellow); color: var(--c-gray-800); } .text-tag.tag-alt { background: var(--c-green); color: var(--c-gray-800); } .text-tag.tag-secondary { background: var(--c-purple-800); color: var(--c-white); } .text-tag.tag-light { background: var(--c-gray-100); color: var(--c-gray-600); } .text-tag.tag-light:hover { background: var(--c-gray-200); color: var(--c-gray-600); } .text-tag.tag-main:hover { background: var(--c-yellow-fade); color: var(--c-gray-800); } .text-tag.tag-alt:hover { background: var(--c-green-fade); color: var(--c-gray-800); } .text-tag.tag-secondary:hover { background: var(--c-purple-900); color: var(--c-white); } @media screen and (max-width: 980px) { button, .button, .grid-horizontal-form { display: block; margin: 0; margin-bottom: var(--space-base); } .grid-horizontal-form button, .grid-horizontal-form .button { margin-bottom: 0; } button.full, .button.full { width: auto; } .no-mobile button, .no-mobile .button { display: inline-block; } .fa-logo-small { margin: 0; } .tag, .text-tag, .grid .label { margin-bottom: var(--space-base); } .cat { display: none; } h1 { font-size: var(--font-size-xl); line-height: var(--line-height-xs); letter-spacing: 0; } article dt.selected { margin-left: 0; } article table.v-center { vertical-align: middle; } article table thead { display: none; } article table td { display: flex; border: none !important; padding: var(--space-xs) 0; } article table tr { border-top: var(--border-width-s) solid var(--c-gray-100); display: block; padding: var(--space-l) 0; } article table td::before { content: attr(label); font-weight: 600; margin-right: var(--space-l); } .highlight { white-space: nowrap; margin: 0 var(--space-xs); } .cat-graph, .fun-graph { width: auto; max-width: 14rem; } .mobile-center { margin: 0 auto; text-align: center; } } @media (prefers-color-scheme: dark) { .text-tag.tag-main, .text-tag.tag-alt { color: var(--c-gray-100); } .button-main:hover { background: var(--c-gray-300); color: var(--c-white); } select option { color: var(--c-gray-100); } } .accounts {} .account { border: var(--border-width-l) solid var(--c-gray-200); border-radius: var(--border-rad); padding: var(--space-xl) var(--space-2xl) var(--space-2xl) var(--space-2xl); margin-bottom: var(--space-base); transition: border var(--time) ease; background: var(--c-white); cursor: pointer; position: relative; } .account::after { font-family: "Font Awesome 5 Pro"; font-weight: 400; content: "\f2bd"; position: absolute; right: var(--space-2xl); font-size: var(--font-size-l); color: var(--c-gray-300); top: 50%; transform: translateY(-50%); } .account * { transition: color var(--time) ease; } .account:hover { border-color: var(--c-purple-900); } .account:hover * { color: var(--c-purple-900); } .pricing { } .price { border: var(--border-width-l) solid var(--c-gray-200); border-radius: var(--border-rad); padding: var(--space-2xl) var(--space-xl) var(--space-2xl) var(--space-xl); margin-bottom: var(--space-base); display: grid; grid-template-columns: 1fr 4fr; grid-gap: var(--grid-gap-m); align-items: center; position: relative; transition: border var(--time) ease; background: var(--c-white); } .price.selected { border-color: var(--c-purple-800); } .price.confirm { border-color: var(--c-green); } .price.selected * { color: var(--c-purple-900); } .price.disabled { background: var(--c-gray-200); } .price.disabled * { color: var(--c-gray-600); } .price:hover:not(.selected):not(.disabled):not(.confirm) { border-color: var(--c-gray-600); } .price:not(.confirm)::after { font-family: "Font Awesome 5 Pro"; font-weight: 400; content: "\f111"; position: absolute; right: var(--space-xl); font-size: var(--font-size-l); color: var(--c-gray-600); } .price.selected::after { font-family: "Font Awesome 5 Pro"; font-weight: 400; content: "\f058"; position: absolute; right: var(--space-xl); font-size: var(--font-size-l); color: var(--c-purple-800); } .price.disabled::after { font-family: "Font Awesome 5 Pro"; font-weight: 400; content: "\f057"; position: absolute; right: var(--space-xl); font-size: var(--font-size-l); color: var(--c-gray-300); } .price::after { transition: transform var(--time) ease; } .price.best-plan::before { position: absolute; transform: translateY(-50%); top: 0; left: 1rem; content: "Selected plan"; font-size: var(--font-size-2xs); font-weight: 500; background: var(--c-purple-800); border-radius: 6rem; padding: var(--space-xs) var(--space-l); color: var(--c-white); } .price:hover:not(.disabled)::after { transform: scale(1.1); } .price p, article .price p { font-size: var(--font-size-xs); } article .pricing h2, article .pricing p { margin: 0; padding: 0; } .box-filters { position: sticky; top: 0; padding: var(--space-s) 0; z-index: 201; } .box-filters::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: var(--c-gray-100); opacity: .9; } .box-filters .filter { background: var(--c-white); } .dropdown .filter-drop .info, .filter .info { color: var(--c-purple-800); } .filter { background: var(--c-white); padding: var(--space-base) 0 var(--space-base) var(--space-base); border-radius: var(--border-rad); font-size: var(--font-size-xs); display: inline-block; margin: var(--space-xs) var(--space-xs) var(--space-xs) 0; font-weight: 500; } .button-filter { background: var(--c-white); padding: var(--space-base); border-radius: var(--border-rad); font-size: var(--font-size-xs); display: inline-block; margin: var(--space-xs) var(--space-xs) var(--space-xs) 0; font-weight: 500; } .button-filter { background: var(--c-purple-900); color: var(--c-white); } .button-filter:hover { background: var(--c-gray-800); color: var(--c-white); } .filter:last-child { margin-right: 0; } .k { color: var(--c-gray-700); } .o { color: var(--c-purple-800); } .box-filters .filter .o, .parent-row .o { color: var(--c-purple-900); } .v { color: var(--c-gray-800); } .filter .remove { margin-left: var(--space-xl); } .remove a, .update a { color: var(--c-gray-600); transition: color var(--time) ease; padding: var(--space-base); } .filter-drop .remove a { color: var(--c-white); transition: color var(--time) ease; } .filter .remove a:hover, .filter .update a:hover { color: var(--c-gray-800); } .filter .fa-chevron-circle-down { padding: 0 var(--space-base); } .report-actions .icon-border { padding: calc(var(--space-base) - 1px) } .filter-drop { padding: var(--space-base) 0; border-bottom: 1px solid rgba(255,255,255,.1); } .filter-drop .k { color: var(--c-white); } .filter-drop .o { color: var(--c-purple-100) !important; } .filter-drop .v { color: var(--c-white); } .filter-drop .remove { margin-left: -0.5rem; } .filter-drop .remove a:hover { color: var(--c-gray-300); } .clear-filters { margin-top: var(--space-base); } .clear-filters a { color: var(--c-white); } .pagi-icon, .search-icon { padding: var(--space-base) var(--space-xs); display: inline-block; } .search-icon { margin-left: -.5rem; } @media screen and (max-width: 980px) { .filter { width: 100%; display: block; position: relative; } .filter .remove { position: absolute; right: var(--space-base); } } nav.dash { display: grid; grid-template-columns: 1fr min-content min-content; grid-gap: var(--grid-gap-s); align-items: center; } .insights nav.dash { display: grid; grid-template-columns: 1fr min-content min-content min-content; grid-gap: var(--grid-gap-s); align-items: center; } .public nav.dash { display: grid; grid-template-columns: 1fr min-content; grid-gap: var(--grid-gap-s); align-items: center; } @media screen and (max-width: 980px) { nav.dash { grid-template-columns: 1fr min-content; } .public nav.dash { display: block; } nav.dash div:not(.site-name) { grid-row: 2; } nav.dash .site-name { grid-column: 1 / span 2; } .insights nav.dash .site-name { grid-column: auto; } .insights nav.dash div:not(.site-name) { grid-row: auto; } nav.dash .icon-block { width: 100%; display: grid; grid-template-columns: 1fr min-content; align-items: center; } .date-range span { overflow: scroll; } footer.mtkg-footer fa-cell { grid-column: span 4; } footer.mtkg-footer .cell-content { grid-column: 1 / 12; grid-row: 2; margin-top: var(--space-l); } } .date-range { white-space: nowrap; } .site-name .monitor-active, .site-name .monitor-inactive, .site-name .monitor-offline { padding-left: var(--space-xl); position: relative; } /* .site-name span { color: var(--c-purple-900); } */ /* .site-name a { color: var(--c-gray-800); transition: color var(--time) ease; } .site-name a:hover { color: var(--c-purple-900); } */ .site-name .monitor-active::before { content: ""; background: var(--c-green-dark); width: 6px; height: 6px; border-radius: var(--border-rad); display: block; position: absolute; top: .4rem; margin-left: var(--space-base); right: 0; } .site-name .monitor-inactive::before { content: ""; background: var(--c-gray-600); width: 6px; height: 6px; border-radius: var(--border-rad); display: block; position: absolute; top: .4rem; margin-left: var(--space-base); right: 0; } .site-name .monitor-offline::before { content: ""; background: var(--c-red); width: 6px; height: 6px; border-radius: var(--border-rad); display: block; position: absolute; top: .4rem; margin-left: var(--space-base); right: 0; } .site-report-hide .icon-border fa-icon, .site-report-show .icon-border fa-icon { color: var(--c-blue); } .row { display: grid; position: relative; grid-template-columns: 4fr 1fr 1fr; margin-bottom: .2rem; font-size: var(--font-size-xs); align-items: center; } .content-box .row { grid-template-columns: 4fr 1fr 1fr 1fr; } .devices-box .row, .countries-box .row, .browsers-box .row, .usage-box .row { grid-template-columns: 4fr 1fr; } .goals-box .row { grid-template-columns: 6fr 2fr 1fr 1fr 1fr; } .gsc-box .row, .utm-box .row { grid-template-columns: 4fr 1fr 1fr 1fr 1fr; } .currents-box .row { grid-template-columns: 4fr 1fr; } .row a.icon-slideout { margin-left: 0.5rem; padding: 0 .5rem; color: var(--c-gray-700) !important; display: inline-block; transform: translateX(-1rem); opacity: 0; transition: all var(--time) ease; } .row:hover a.icon-slideout { transform: translateX(0); opacity: 1; } .row .run-filter { position: absolute; background: var(--c-gray-900); padding: var(--space-base) var(--space-xl); left: calc(-1 * var(--space-l)); align-self: center; display: grid; grid-template-columns: min-content min-content min-content; grid-gap: var(--grid-gap-m); border-radius: var(--border-rad); font-size: var(--font-size-xs); z-index: 101; opacity: 0; transition: opacity var(--time); } .row .run-filter-novisit { grid-template-columns: min-content min-content; } .row:hover .run-filter { opacity: 1; animation-name: bounceIn; } .row .run-filter a { color: var(--c-white); } .row .run-filter a:hover { color: var(--c-purple-800) !important; } .row div, .grid-row div, .child-row div { text-align: right; z-index: 1; padding: var(--space-base) 0; font-weight: 500; } .row div:first-child, .grid-row div:first-child { text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .row.header, .grid-row.header { color: var(--c-gray-600); padding: var(--space-base) 0; } .row.header div, .grid-row.header div { text-overflow: unset; white-space: normal; padding-right: 0; padding-left: var(--space-base); overflow: visible; } .row.header div:first-child, .grid-row.header div:first-child { padding-right: var(--space-base); padding-left: 0; } .row a, .grid-row a { color: var(--c-gray-700); transition: color var(--time) ease; } .row a:hover, .grid-row a { color: var(--c-gray-900); } .child-row { margin-left: var(--space-l); } .child-row .highlight { margin: 0 var(--space-xs); } .row.row-pagi { column-span: all; } .row.row-filter { column-span: all; } .row.row-filter div { text-overflow: none; white-space: normal; overflow: visible; } .wrap-row div { text-overflow: none; white-space: normal; } .wrap-row div .data-group { white-space: nowrap; cursor: pointer; } .wrap-row div .data-group:hover { color: var(--c-purple-900); } .row .data-group .o { color: var(--c-green-dark); font-weight: 600; transition: padding var(--time) ease; } .child-row .data-group .o { color: var(--c-purple-800) } /* .row:hover .o { padding: 0 0.1rem; } .row .data-group:hover .o { color: var(--c-gray-800); } .child-row .data-group:hover .o { color: var(--c-gray-800); } */ .row .header-tabs { overflow-x: scroll !important; text-overflow: none; white-space: normal; scrollbar-width: none; -ms-overflow-style: none; line-height: 1.8; } .row .header-tabs::-webkit-scrollbar { display: none !important; width: 0; height: 0; } .row .header-tabs .h-tab { margin-right: var(--space-xl); padding: var(--space-s) 0; } .h-label { font-weight: 500; color: var(--c-gray-800); } .header-tabs a { color: var(--c-gray-600); white-space: nowrap; } .header-tabs a:hover { color: var(--c-green-dark); } .header-tabs .active { font-weight: 500; color: var(--c-gray-800); text-decoration: underline; text-decoration-color: var(--c-green); text-decoration-thickness: 2px; text-underline-offset: 4px; } .usage-box .header-tabs a:hover { color: var(--c-purple-800); } .usage-box .header-tabs .active { text-decoration-color: var(--c-purple-800); } @media screen and (max-width: 980px) { // .row .header-tabs .h-tab { display: block; } .content-box .row { grid-template-columns: 2fr 1fr 1fr 1fr; } .goals-box .row { grid-template-columns: 1fr; } .goals-box .row.header div { display: none; } .goals-box .row.header div:first-child { display: block; } .goals-box .box-content .row div { text-align: left !important; } .goals-box .box-content .row div:nth-child(2):before { content: "Unique comp: "; } .goals-box .box-content .row div:nth-child(3):before { content: "Comp: "; } .goals-box .box-content .row div:nth-child(4):before { content: "Conv rate: "; } .goals-box .box-content .row div:nth-child(5):before { content: "Value: "; } .row div:first-child, .grid-row div:first-child { text-overflow: inherit; white-space: normal; overflow: visible; } } .grid-row { position: relative; } .grid-row div { margin-bottom: .2rem; font-size: var(--font-size-xs); } .row::after { content: ""; background: var(--c-green); position: absolute; height: 100%; width: 0; top: 0; left: -1.3rem; z-index: 0; transition: all 0 ease; opacity: 0.2; border-radius: 2px; } .child-row::after { background: var(--c-gray-100); opacity: 0.4; } .usage-box .row::after { background: var(--c-purple-800); opacity: 0.2; } .usage-box .row:hover::after { background: var(--c-purple-800); opacity: 0.4; } .w100::after { width: calc(100% + 2.6rem); } .w99::after { width: calc(99% + 2.6rem); } .w98::after { width: calc(98% + 2.6rem); } .w97::after { width: calc(97% + 2.6rem); } .w96::after { width: calc(96% + 2.6rem); } .w95::after { width: calc(95% + 2.6rem); } .w94::after { width: calc(94% + 2.6rem); } .w93::after { width: calc(93% + 2.6rem); } .w92::after { width: calc(92% + 2.6rem); } .w91::after { width: calc(91% + 2.6rem); } .w90::after { width: calc(90% + 2.6rem); } .w89::after { width: calc(89% + 2.6rem); } .w88::after { width: calc(88% + 2.6rem); } .w87::after { width: calc(87% + 2.6rem); } .w86::after { width: calc(86% + 2.6rem); } .w85::after { width: calc(85% + 2.6rem); } .w84::after { width: calc(84% + 2.6rem); } .w83::after { width: calc(83% + 2.6rem); } .w82::after { width: calc(82% + 2.6rem); } .w81::after { width: calc(81% + 2.6rem); } .w80::after { width: calc(80% + 2.6rem); } .w79::after { width: calc(79% + 2.6rem); } .w78::after { width: calc(78% + 2.6rem); } .w77::after { width: calc(77% + 2.6rem); } .w76::after { width: calc(76% + 2.6rem); } .w75::after { width: calc(75% + 2.6rem); } .w74::after { width: calc(74% + 2.6rem); } .w73::after { width: calc(73% + 2.6rem); } .w72::after { width: calc(72% + 2.6rem); } .w71::after { width: calc(71% + 2.6rem); } .w70::after { width: calc(70% + 2.6rem); } .w69::after { width: calc(69% + 2.6rem); } .w68::after { width: calc(68% + 2.6rem); } .w67::after { width: calc(67% + 2.6rem); } .w66::after { width: calc(66% + 2.6rem); } .w65::after { width: calc(65% + 2.6rem); } .w64::after { width: calc(64% + 2.6rem); } .w63::after { width: calc(63% + 2.6rem); } .w62::after { width: calc(62% + 2.6rem); } .w61::after { width: calc(61% + 2.6rem); } .w60::after { width: calc(60% + 2.6rem); } .w59::after { width: calc(59% + 2.6rem); } .w58::after { width: calc(58% + 2.6rem); } .w57::after { width: calc(57% + 2.6rem); } .w56::after { width: calc(56% + 2.6rem); } .w55::after { width: calc(55% + 2.6rem); } .w54::after { width: calc(54% + 2.6rem); } .w53::after { width: calc(53% + 2.6rem); } .w52::after { width: calc(52% + 2.6rem); } .w51::after { width: calc(51% + 2.6rem); } .w50::after { width: calc(50% + 2.6rem); } .w49::after { width: calc(49% + 2.6rem); } .w48::after { width: calc(48% + 2.6rem); } .w47::after { width: calc(47% + 2.6rem); } .w46::after { width: calc(46% + 2.6rem); } .w45::after { width: calc(45% + 2.6rem); } .w44::after { width: calc(44% + 2.6rem); } .w43::after { width: calc(43% + 2.6rem); } .w42::after { width: calc(42% + 2.6rem); } .w41::after { width: calc(41% + 2.6rem); } .w40::after { width: calc(40% + 2.6rem); } .w39::after { width: calc(39% + 2.6rem); } .w38::after { width: calc(38% + 2.6rem); } .w37::after { width: calc(37% + 2.6rem); } .w36::after { width: calc(36% + 2.6rem); } .w35::after { width: calc(35% + 2.6rem); } .w34::after { width: calc(34% + 2.6rem); } .w33::after { width: calc(33% + 2.6rem); } .w32::after { width: calc(32% + 2.6rem); } .w31::after { width: calc(31% + 2.6rem); } .w30::after { width: calc(30% + 2.6rem); } .w29::after { width: calc(29% + 2.6rem); } .w28::after { width: calc(28% + 2.6rem); } .w27::after { width: calc(27% + 2.6rem); } .w26::after { width: calc(26% + 2.6rem); } .w25::after { width: calc(25% + 2.6rem); } .w24::after { width: calc(24% + 2.6rem); } .w23::after { width: calc(23% + 2.6rem); } .w22::after { width: calc(22% + 2.6rem); } .w21::after { width: calc(21% + 2.6rem); } .w20::after { width: calc(20% + 2.6rem); } .w19::after { width: calc(19% + 2.6rem); } .w18::after { width: calc(18% + 2.6rem); } .w17::after { width: calc(17% + 2.6rem); } .w16::after { width: calc(16% + 2.6rem); } .w15::after { width: calc(15% + 2.6rem); } .w14::after { width: calc(14% + 2.6rem); } .w13::after { width: calc(13% + 2.6rem); } .w12::after { width: calc(12% + 2.6rem); } .w11::after { width: calc(11% + 2.6rem); } .w10::after { width: calc(10% + 2.6rem); } .w9::after { width: calc(9% + 2.6rem); } .w8::after { width: calc(8% + 2.6rem); } .w7::after { width: calc(7% + 2.6rem); } .w6::after { width: calc(6% + 2.6rem); } .w5::after { width: calc(5% + 2.6rem); } .w4::after { width: calc(4% + 2.6rem); } .w3::after { width: calc(3% + 2.6rem); } .w2::after { width: calc(2% + 2.6rem); } .w1::after { width: calc(1% + 2.6rem); } .w0::after { width: calc(0% + 2.6rem); } .row:not(.box-pagi, .row-pagi, .header):hover::after { background: none !important; border: var(--border-width-s) solid var(--c-gray-200); opacity: 0.6; width: calc(100% + 2.6rem) !important; } .child-row:hover::after { background: var(--c-gray-100); opacity: 1; } .box-pagi a, .row-pagi a { color: var(--c-gray-600); } .box-report p { color: var(--c-gray-600); } .box-report p a { color: inherit; text-decoration: underline; } .box-report a fa-icon { color: var(--c-blue); } .gscconnect-box p { font-size: var(--font-size-s); } .message-box { background: var(--c-purple-fade); font-size: var(--font-size-xs); font-weight: 500; color: var(--c-gray-800); } .totals-box { background: var(--c-gray-800); color: var(--c-gray-300); display: grid; grid-template-columns: repeat(6, 1fr); } .totals-hover { display: inline-block; width: auto; border-radius: var(--border-rad); padding: var(--space-base); margin: calc(-1 * var(--space-base)); cursor: pointer; transition: var(--time); } .totals-hover:hover { background: var(--c-gray-900); } .totals-box-no-goals { grid-template-columns: repeat(5, 1fr); } .totals-box fa-cell { padding: var(--space-base) 0 var(--space-xl) 0; } .totals-box .compared { opacity: 0.8; font-weight: 600; } .totals-box .more .compared { color: var(--c-green); } .totals-box .less .compared { color: var(--c-red); } .totals-box .total { font-size: var(--font-size-xl); font-weight: 300; letter-spacing: -0.03em; color: var(--c-white); cursor: pointer; line-height: 1; margin-bottom: var(--space-s); } .totals-box .details { font-size: var(--font-size-s); } .totals-box .currents *, .dash-all .currents { color: var(--c-purple-800); } .report .totals-box .currents * { color: var(--c-blue); } .totals-box .currents a fa-icon { transition: transform var(--time) ease; } .totals-box .currents a:hover fa-icon { transform: translateX(.25rem); } .dash-current { font-weight: 500 !important; color: var(--c-purple-900); } .currents-box { background: var(--c-purple-900); color: var(--c-white); } .currents-box .row.header { color: var(--c-white); } .currents-box .row a { color: var(--c-white); } .currents-box .row::after { background: var(--c-purple-800); opacity: 0.4; } .currents-box .row:hover::after { content: ""; background: var(--c-purple-800); opacity: 0.3; } @media (prefers-color-scheme: dark) { .currents-box { background: #1f2126; color: #fff; } .currents-box .row.header, .currents-box .row a { color: #fff; } .currents-box .row::after { background: #413a93; } .currents-box .row:hover::after { content: ""; background: #413a93; } } .cell-wrap { border-radius: var(--border-rad); border: var(--border-width-s) solid var(--c-gray-300); overflow: hidden; display: inline-block; font-size: var(--font-size-2xs); margin: var(--space-xs) var(--space-s) var(--space-xs) 0; cursor: pointer; } .cell-start { background: var(--c-gray-200); padding: 0.14rem var(--space-s); display: inline-block; color: var(--c-gray-900); } .cell-value { padding: 0.14rem var(--space-s); color: var(--c-gray-700); background: var(--c-white); } .dash-all .compared { font-size: var(--font-size-xs) !important; display: inline-block; margin-right: var(--space-base); } .dash-all .more .compared { color: var(--c-green-800); } .dash-all .less .compared { color: var(--c-red); } @media screen and (max-width: 980px) { .row { grid-template-columns: 3fr 1fr 1fr; } .row::after { height: 100%; } .grid-row { display: grid; grid-template-columns: repeat(12, 1fr); } .totals-box { display: block; } .totals-box fa-cell { padding: 0; } .totals-box * { font-size: var(--font-size-base) !important; font-weight: inherit !important; letter-spacing: 0; } .totals-box .more .total { color: var(--c-green); } .totals-box .less .total { color: var(--c-red); } .totals-box fa-cell { } .totals-box .details { grid-column: 1; grid-row: 1; line-height: 1; margin: 0 !important; padding: 0 !important; } .totals-box .total { grid-column: 2; text-align: right; grid-row: 1; line-height: 1; margin: 0 !important; padding: 0 !important; } .totals-box .compared { display: none; } .totals-hover { display: grid; grid-template-columns: 1fr 1fr; } } .steps { } .step { position: relative; border-left: var(--border-width-l) solid var(--c-gray-200); height: auto; padding: 0 0 var(--space-3xl) var(--space-3xl); } .step h3 { margin: -3.2rem 0 1rem 0; } .step-number { position: sticky; top: 2rem; margin-left: -4.05rem; border: var(--border-width-l) solid var(--c-purple-800); background: var(--c-white); border-radius: 100rem; display: grid; width: 2rem; height: 2rem; text-align: center; align-items: center; font-size: var(--font-size-xs); font-weight: 500; z-index: 2; } @media screen and (max-width: 980px) { .step { border: none; padding: 0; } .step-number { right: 0; top: 1.2rem; position: absolute; } .step h3 { margin: 3rem 0 1rem 0; } .site-name .monitor-active::before { top: -.1rem; } .site-name .monitor-inactive::before { top: -.1rem; } } .mode { text-decoration: none; background: var(--c-gray-100); border-radius: var(--border-rad); padding: 4px var(--space-s); display: inline-block; } .mode span { font-weight: 500; } .dashboard .mode { background: var(--c-gray-200); } .notify { position: absolute; background: var(--c-purple-900); width: 6px; height: 6px; top: 6px; right: 6px; display: block; border-radius: var(--border-rad); z-index: 2; box-shadow: 0 0px 0 1px rgba(124,116,255,1); animation: pulse-animation 2s infinite; } .user-icon { height: 2.5rem; width: 2.5rem; border-radius: 5rem; border: var(--border-width-l) solid var(--c-gray-300); display: block; overflow: hidden; transition: border-color var(--time) ease; } .user-icon img { width: 100%; height: auto; display: block; } .user-icon:hover { border-color: var(--c-gray-800); } .tooltip-wrap { position: relative; cursor: pointer; display: inline-block; width: auto; } .tooltip-wrap .active { color: var(--c-purple-900); } .tooltip-show { position: absolute; background: var(--c-gray-800); padding: var(--space-s) var(--space-base); color: var(--c-white); border-radius: var(--border-rad); white-space: nowrap; } @keyframes pulse-animation { 0% { box-shadow: 0 0 0 0 rgba(124,116,255, 0.2); } 100% { box-shadow: 0 0 0 10px rgba(124,116,255, 0); } } .api-copy { border: var(--border-width-l) solid var(--c-purple-800); background: var(--c-purple-fade); padding: 0 var(--space-2xl); border-radius: var(--border-rad); } .enterprise-upgrade { border: var(--border-width-l) solid var(--c-blue); background: var(--c-blue-fade); padding: 0 var(--space-2xl); border-radius: var(--border-rad); margin: var(--space-3xl) 0; } .chart-box { background: var(--c-white); position: relative; } #dashboard-graph .highcharts-xaxis-grid #dashboard-graph .highcharts-grid-line { stroke-width: 1px; stroke: #f2f4f7; overflow: visible; } .chart-box .options { position: absolute; top: var(--space-base); right: var(--space-base); background: var(white); padding: var(--space-s); border-radius: var(--border-rad); z-index: 10001; transition: background ease var(--time); } .chart-box .options:hover { background: var(--c-gray-200); } #dashboard-graph { margin: 0 -.5rem -.5rem -.5rem; height: 21rem; } #dashboard-graph *, .chart-box * { font-weight: 500; font-family: var(--sans); } .allsites-graph { height: 10rem; margin: 0 -.5rem -.5rem -.5rem; } .tooltip-key, .tooltip-text { color: #4c5059; fill: #4c5059; font-size: 0.85rem; line-height: var(--line-height-base); font-family: var(--sans); } .tooltip-key { color: #fff; fill: #4c5059; z-index: 1000000; text-align: left; } .tooltip-z { z-index: 1000000; text-align: left; font-family: var(--sans); font-weight: 500; } .totals-box .total { cursor: pointer; } .totals-box .total span.indicator { cursor: pointer; vertical-align: middle; letter-spacing: 0; text-transform: uppercase; height: 6px; width: 6px; display: inline-block; border-radius: var(--border-rad); color: var(--c-gray-300); margin-left: var(--space-base); transition: opacity var(--time) ease; } .totals-box .total span.indicator.views { background: #c7c2ff; } .totals-box .total span.indicator.visitors { background: #8e84ff; } .totals-box .total span.indicator.duration { background: #f472b6; } .totals-box .total span.indicator.events { background: #24be8b; } .totals-box .total span.indicator.bounces { background: #4dc4ff; } .Views { color: #c7c2ff; } .Visitors { color: #8e84ff; } .Bounce { color: #4dc4ff; } .Avg { color: #f472b6; } .Event { color: #24be8b; } .yax { padding: 2px 5px 3px 5px; line-height: 1; } .yax:after { content: ""; background: #fff; border-radius: 3px; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; opacity: .9 } @media (prefers-color-scheme: dark) { .Views { color: #8e84ff; } .Visitors { color: #c7c2ff; } .Bounce { color: #4dc4ff; } .Avg { color: #f472b6; } .Event { color: #35e6ab; } .totals-box .total span.indicator.views { background: #8e84ff; } .totals-box .total span.indicator.visitors { background: #c7c2ff; } .totals-hover:hover { background: #363a43; } .yax:after { content: ""; background: #1f2126; } } @media screen and (max-width: 980px) { #dashboard-graph { height: 9rem; } } .filtering { opacity: 0; display: inline-block; transform: translateX(-20px); } .row:hover .filtering { opacity: 1; transform: translateX(0); transition: opacity, transform var(--time) ease; } @keyframes fade-animation { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } .totals-loading { animation: fade-animation 2s infinite; } .animated { animation-duration: var(--time); animation-fill-mode: both; position: relative; /* FOR TESTING ONLY animation-delay: 2s; */ } @keyframes bounceOut { 0% { transform: scale(1); } 50% { opacity: .7; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.9); } } .bounce-out { animation-name: bounceOut; } @keyframes bounceIn { 0% { opacity: 0; transform: scale(.9); } 50% { opacity: .7; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } .bounce-in { animation-name: bounceIn; } .daterangepicker { position: absolute; color: inherit; background-color: var(--c-white); border-radius: var(--border-rad); border: var(--border-width-l) solid var(--c-purple-800); width: 278px; max-width: none; padding: 0; margin-top: 0.85rem; top: 100px; z-index: 3001; display: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 0.85rem; line-height: 1em; overflow: hidden; } .daterangepicker:before, .daterangepicker:after { /* position: absolute; display: inline-block; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; */ } .daterangepicker:before { /* top: -7px; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #ccc; */ } .daterangepicker:after { /* top: -6px; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; */ } .daterangepicker.opensleft:before { right: 9px; } .daterangepicker.opensleft:after { right: 10px; } .daterangepicker.openscenter:before { left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; } .daterangepicker.openscenter:after { left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; } .daterangepicker.opensright:before { left: 9px; } .daterangepicker.opensright:after { left: 10px; } .daterangepicker.drop-up { margin-top: -7px; } .daterangepicker.drop-up:before { /* top: initial; bottom: -7px; border-bottom: initial; border-top: 7px solid #ccc; */ } .daterangepicker.drop-up:after { /* top: initial; bottom: -6px; border-bottom: initial; border-top: 6px solid #fff; */ } .daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar { float: none; } .daterangepicker.single .drp-selected { display: none; } .daterangepicker.show-calendar .drp-calendar { display: block; } .daterangepicker.show-calendar .drp-buttons { display: block; } .daterangepicker.auto-apply .drp-buttons { display: none; } .daterangepicker .drp-calendar { display: none; max-width: 270px; } .daterangepicker .drp-calendar.left { padding: var(--space-base) 0 var(--space-base) var(--space-base); } .daterangepicker .drp-calendar.right { padding: var(--space-base); } .daterangepicker .drp-calendar.single .calendar-table { border: none; } .daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span { border: solid var(--c-gray-700); border-width: 0 2px 2px 0; border-radius: 0; display: inline-block; padding: 2px; } .daterangepicker .calendar-table .next span { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .daterangepicker .calendar-table .prev span { transform: rotate(135deg); -webkit-transform: rotate(135deg); } .daterangepicker .calendar-table th, .daterangepicker .calendar-table td { white-space: nowrap; text-align: center; vertical-align: middle; min-width: 2rem; width: 2rem; height: 1.8rem; line-height: 1rem; font-size: 0.75rem; font-weight: 500; border-radius: var(--border-rad); border: 1px solid transparent; white-space: nowrap; cursor: pointer; } .daterangepicker .calendar-table th { color: var(--c-gray-900); font-weight: 700; } .daterangepicker .calendar-table { /* border: 1px solid #fff; */ border-radius: var(--border-rad); background-color: var(--c-white); } .daterangepicker .calendar-table table { width: 100%; margin: 0; border-spacing: 0; border-collapse: collapse; } .daterangepicker td.week, .daterangepicker th.week { font-size: 80%; color: var(--c-gray-600); } .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { background-color: var(--c-white); border-color: transparent; color: var(--c-gray-600); } .daterangepicker td.in-range { background-color: var(--c-purple-fade); border-color: transparent; color: var(--c-purple-900); border-radius: 0; } .daterangepicker td.start-date { border-radius: var(--border-rad) 0 0 var(--border-rad); } .daterangepicker td.end-date { border-radius: 0 var(--border-rad) var(--border-rad) 0; } .daterangepicker td.start-date.end-date { border-radius: var(--border-rad); } .daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--c-purple-900); border-color: transparent; color: var(--c-white); } .daterangepicker th.month { width: auto; } .daterangepicker td.disabled, .daterangepicker option.disabled { color: var(--c-gray-600); cursor: not-allowed; text-decoration: line-through; } .daterangepicker select.monthselect, .daterangepicker select.yearselect { font-size: 0.75rem; padding: 4px 8px; height: auto; margin: 0; cursor: default; border-width: 0 !important; background: var(--c-gray-100); } .daterangepicker select, .daterangepicker select option { text-align: center !important; } .daterangepicker select.monthselect { margin-right: 2%; width: 30%; } .daterangepicker select.yearselect { width: 30%; } .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { /* width: 50px; margin: 0 auto; background: red; border: 1px solid #eee; padding: 2px; outline: 0; font-size: 12px; */ } .daterangepicker .calendar-time { text-align: center; margin: 4px auto 0 auto; line-height: 30px; position: relative; } .daterangepicker .calendar-time select.disabled { color: #ccc; cursor: not-allowed; } .daterangepicker .drp-buttons { clear: both; text-align: right; padding: 8px; background: var(--c-gray-100); display: none; line-height: 12px; vertical-align: middle; } .daterangepicker .drp-selected { display: inline-block; font-size: 0.75rem; font-weight: 500; padding-right: 8px; } .daterangepicker .drp-buttons .btn { margin-left: 8px; font-size: 12px; font-weight: bold; padding: 4px 8px; } .daterangepicker.show-ranges.single.rtl .drp-calendar.left { border-right: 1px solid #ddd; } .daterangepicker.show-ranges.single.ltr .drp-calendar.left { /* border-left: 1px solid #ddd; */ } .daterangepicker.show-ranges.rtl .drp-calendar.right { border-right: 1px solid #ddd; } .daterangepicker.show-ranges.ltr .drp-calendar.left { /* border-left: 1px solid #ddd; */ } .daterangepicker .ranges { float: none; text-align: left; margin: 0; padding: var(--space-base) 0; border-right: 1px solid var(--c-gray-200); } .daterangepicker.show-calendar .ranges { /* margin-top: 8px; */ overflow: hidden; } .daterangepicker .ranges ul { list-style: none; margin: 0 auto; padding: 0; width: 100%; } /* .daterangepicker .ranges li:first-child { margin-top: var(--space-base); } */ .daterangepicker .ranges li { font-size: 0.75rem; font-weight: 500; padding: var(--space-s) var(--space-base); cursor: pointer; } .daterangepicker .ranges li:hover { background-color: var(--c-gray-100); color: var(--c-purple-900); } .daterangepicker .ranges li.active { background-color: var(--c-purple-900); color: var(--c-white); } /* Larger Screen Styling */ @media (min-width: 564px) { .daterangepicker { width: auto; } .daterangepicker .ranges ul { width: 140px; } .daterangepicker.single .ranges ul { width: 100%; } .daterangepicker.single .drp-calendar.left { clear: none; } .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar { float: left; } .daterangepicker { direction: ltr; text-align: left; } .daterangepicker .drp-calendar.left { clear: left; margin-right: 0; } .daterangepicker .drp-calendar.left .calendar-table { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } .daterangepicker .drp-calendar.right { margin-left: 0; } .daterangepicker .drp-calendar.right .calendar-table { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; } .daterangepicker .drp-calendar.left .calendar-table { padding-right: 8px; } .daterangepicker .ranges, .daterangepicker .drp-calendar { float: left; } } @media (min-width: 730px) { .daterangepicker .ranges { width: auto; } .daterangepicker .ranges { float: left; } .daterangepicker.rtl .ranges { float: right; } .daterangepicker .drp-calendar.left { clear: none !important; } } .highcharts-yaxis-labels text { background: red !important; border-radius: var(--border-rad); } .cache-buster {} .tippy-box[data-theme~="fathom"] { background-color: var(--c-purple-900); color: var(--c-white); border-radius: 3px; font-family: var(--sans); text-align: left; border: none; padding: var(--space-s); font-size: var(--font-size-xs); } .tippy-box[data-theme~="fathom"] small { color: var(--c-white); font-weight: 700; } .tippy-box[data-theme~='fathom'][data-placement^='top'] > .tippy-arrow::before { border-top-color: var(--c-purple-900); } .tippy-box[data-theme~='fathom'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: var(--c-purple-900); } .tippy-box[data-theme~='fathom'][data-placement^='left'] > .tippy-arrow::before { border-left-color: var(--c-purple-900); } .tippy-box[data-theme~='fathom'][data-placement^='right'] > .tippy-arrow::before { border-right-color: var(--c-purple-900); }