@-moz-keyframes slidein-vert { from { transform: translateX(0); } to { transform: translate(20px); } } @-webkit-keyframes slidein-vert { from { transform: translateX(0); } to { transform: translate(20px); } } @keyframes slidein-vert { from { transform: translateX(0); } to { transform: translate(20px); } } @-moz-keyframes rotate-circular-1 { from { transform: rotate(0deg) translateX(10px) rotate(0deg); } to { transform: rotate(360deg) translateX(10px) rotate(-360deg); } } @-webkit-keyframes rotate-circular-1 { from { transform: rotate(0deg) translateX(10px) rotate(0deg); } to { transform: rotate(360deg) translateX(10px) rotate(-360deg); } } @keyframes rotate-circular-1 { from { transform: rotate(0deg) translateX(10px) rotate(0deg); } to { transform: rotate(360deg) translateX(10px) rotate(-360deg); } } @-moz-keyframes rotate-fixed-1 { 100% { transform: rotate(360deg); } } @-webkit-keyframes rotate-fixed-1 { 100% { transform: rotate(360deg); } } @keyframes rotate-fixed-1 { 100% { transform: rotate(360deg); } } /* @-moz-keyframes bounce-1 { 0%, 16%, 20%, 100% {-webkit-transform: translateY(0);} 11% {-webkit-transform: translateY(-70px);} 18% {-webkit-transform: translateY(-15px);} } @-webkit-keyframes bounce-1 { 0%, 16%, 20%, 100% {-webkit-transform: translateY(0);} 11% {-webkit-transform: translateY(-70px);} 18% {-webkit-transform: translateY(-15px);} } */ @keyframes bounce-1 { 0%, 16%, 20%, 100% {-webkit-transform: translateY(0);} 11% {-webkit-transform: translateY(-70px);} 18% {-webkit-transform: translateY(-15px);} } *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; word-break: break-word; } /* Light mode colors - System controlled default */ /* Usually the element */ :root { --background-1: #fff; --text-color-1: #777; --heading-color-1: #333; --link-text-color-1: #333; --link-text-color-2: #333; --link-text-color-3: #fff; --input-background-1: #fff; --input-border-color-1: #fff; --input-border-focus-color-1: #eee; --input-text-color-1: #333; --input-placeholder-color-1: #777; --input-range-border-color-1: #010101; --input-range-background-1: #e0e0e0; --input-range-track-background-1: #d0d0d0; --input-range-fill-background-1: #d5d5d5; --button-background-1: #333; --button-text-color-1: #fff; --button-text-color-2: #333; --error-text-color-1: #b10707; --highlight-1-background: #333; --highlight-1-text-color: #fff; --highlight-2-background: #333; --highlight-2-text-color: #fff; --highlight-3-background: #ebf3ff; --highlight-4-background: #ebf3ff; --highlight-5-background: #fff; --highlight-5-text-color: #333; --highlight-tip-background: #c3ffe1; --highlight-tip-text-color: #00c16a; --highlight-warning-background: #ffc3c3; --highlight-warning-text-color: #c30000; --shadow-background-1: #dbeaff; --shadow-background-2: #fff; --list-item-border-top-color: rgba(255, 255, 255, 0.2); --outline-1-border-color: rgba(255, 255, 255, 0.2); --col-separator-background-1: #3360d6; --code-text-color-1: #555; --code-background-1: var(--highlight-3-background); --code-border-color-1: rgba(0, 0, 0, 0.08); --code-border-radius-1: 10px; --code-font-size-1: 80%; --code-padding-horizontal-1: 6px; --code-padding-vertical-1: 0px; --syntax-code-text-color: #17335f; --syntax-token-comment-text-color: #6c7890; --syntax-token-keyword-text-color: #c12d60; --syntax-token-string-text-color: #007a5a; --syntax-token-number-text-color: #7a45c7; --syntax-token-function-text-color: #005fc7; --syntax-token-variable-text-color: #a64a00; --syntax-token-operator-text-color: #9b2f74; } /* Dark mode colors - System controlled default */ @media (prefers-color-scheme: dark) { :root { --background-1: #000; --text-color-1: #fff; --heading-color-1: #eee; --link-text-color-1: #eee; --link-text-color-2: #eee; --link-text-color-3: #fff; --input-background-1: #fff; --input-border-color-1: #fff; --input-border-focus-color-1: #eee; --input-text-color-1: #333; --input-placeholder-color-1: #bbb; --input-range-border-color-1: #010101; --input-range-background-1: #e0e0e0; --input-range-track-background-1: #d0d0d0; --input-range-fill-background-1: #d5d5d5; --button-background-1: #fff; --button-text-color-1: #333; --button-text-color-2: #fff; --error-text-color-1: #ff4b4b; --highlight-1-background: #1b1b1b; --highlight-1-text-color: #eee; --highlight-2-background: #1b1b1b; --highlight-2-text-color: #eee; --highlight-3-background: #1b1b1b; --highlight-4-background: #1b1b1b; --highlight-5-background: #000; --highlight-5-text-color: #eee; --highlight-tip-background: #c3ffe1; --highlight-tip-text-color: #00c16a; --highlight-warning-background: #ffc3c3; --highlight-warning-text-color: #c30000; --shadow-background-1: #252525; --shadow-background-2: #000; --list-item-border-top-color: rgba(255, 255, 255, 0.1); --outline-1-border-color: rgba(255, 255, 255, 0.1); --col-separator-background-1: #3360d6; --code-text-color-1: #ddd; --code-background-1: var(--highlight-3-background); --code-border-color-1: rgba(255, 255, 255, 0.12); --code-border-radius-1: 10px; --code-font-size-1: 80%; --code-padding-horizontal-1: 6px; --code-padding-vertical-1: 0px; --syntax-code-text-color: #d7e7ff; --syntax-token-comment-text-color: #8c98a8; --syntax-token-keyword-text-color: #ff7a9b; --syntax-token-string-text-color: #79d89c; --syntax-token-number-text-color: #d2a8ff; --syntax-token-function-text-color: #82b8ff; --syntax-token-variable-text-color: #ffc06f; --syntax-token-operator-text-color: #ffa7d4; } } /* Light mode colors - JS logic controlled for overrides */ .theme-light-1 { --background-1: #fff; --text-color-1: #777; --heading-color-1: #333; --link-text-color-1: #333; --link-text-color-2: #333; --link-text-color-3: #fff; --input-background-1: #fff; --input-border-color-1: #fff; --input-border-focus-color-1: #eee; --input-text-color-1: #333; --input-placeholder-color-1: #777; --input-range-border-color-1: #010101; --input-range-background-1: #e0e0e0; --input-range-track-background-1: #d0d0d0; --input-range-fill-background-1: #d5d5d5; --button-background-1: #333; --button-text-color-1: #fff; --button-text-color-2: #333; --error-text-color-1: #b10707; --highlight-1-background: #333; --highlight-1-text-color: #fff; --highlight-2-background: #333; --highlight-2-text-color: #fff; --highlight-3-background: #ebf3ff; --highlight-4-background: #ebf3ff; --highlight-5-background: #fff; --highlight-5-text-color: #333; --highlight-tip-background: #c3ffe1; --highlight-tip-text-color: #00c16a; --highlight-warning-background: #ffc3c3; --highlight-warning-text-color: #c30000; --shadow-background-1: #dbeaff; --shadow-background-2: #fff; --list-item-border-top-color: rgba(255, 255, 255, 0.2); --outline-1-border-color: rgba(255, 255, 255, 0.2); --col-separator-background-1: #3360d6; --code-text-color-1: #555; --code-background-1: var(--highlight-3-background); --code-border-color-1: rgba(0, 0, 0, 0.08); --code-border-radius-1: 10px; --code-font-size-1: 80%; --code-padding-horizontal-1: 6px; --code-padding-vertical-1: 0px; --syntax-code-text-color: #17335f; --syntax-token-comment-text-color: #6c7890; --syntax-token-keyword-text-color: #c12d60; --syntax-token-string-text-color: #007a5a; --syntax-token-number-text-color: #7a45c7; --syntax-token-function-text-color: #005fc7; --syntax-token-variable-text-color: #a64a00; --syntax-token-operator-text-color: #9b2f74; } /* Dark mode colors - JS logic controlled for overrides */ .theme-dark-1 { --background-1: #000; --text-color-1: #fff; --heading-color-1: #eee; --link-text-color-1: #eee; --link-text-color-2: #eee; --link-text-color-3: #fff; --input-background-1: #fff; --input-border-color-1: #fff; --input-border-focus-color-1: #eee; --input-text-color-1: #333; --input-placeholder-color-1: #bbb; --input-range-border-color-1: #010101; --input-range-background-1: #e0e0e0; --input-range-track-background-1: #d0d0d0; --input-range-fill-background-1: #d5d5d5; --button-background-1: #fff; --button-text-color-1: #333; --button-text-color-2: #fff; --error-text-color-1: #ff4b4b; --highlight-1-background: #1b1b1b; --highlight-1-text-color: #eee; --highlight-2-background: #1b1b1b; --highlight-2-text-color: #eee; --highlight-3-background: #1b1b1b; --highlight-4-background: #1b1b1b; --highlight-5-background: #000; --highlight-5-text-color: #eee; --highlight-tip-background: #c3ffe1; --highlight-tip-text-color: #00c16a; --highlight-warning-background: #ffc3c3; --highlight-warning-text-color: #c30000; --shadow-background-1: #252525; --shadow-background-2: #000; --list-item-border-top-color: rgba(255, 255, 255, 0.1); --outline-1-border-color: rgba(255, 255, 255, 0.1); --col-separator-background-1: #3360d6; --code-text-color-1: #ddd; --code-background-1: var(--highlight-3-background); --code-border-color-1: rgba(255, 255, 255, 0.12); --code-border-radius-1: 10px; --code-font-size-1: 80%; --code-padding-horizontal-1: 6px; --code-padding-vertical-1: 0px; --syntax-code-text-color: #d7e7ff; --syntax-token-comment-text-color: #8c98a8; --syntax-token-keyword-text-color: #ff7a9b; --syntax-token-string-text-color: #79d89c; --syntax-token-number-text-color: #d2a8ff; --syntax-token-function-text-color: #82b8ff; --syntax-token-variable-text-color: #ffc06f; --syntax-token-operator-text-color: #ffa7d4; } html { width: 100%; height: 100%; overflow: hidden; } body { width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0; background: var(--background-1); color: var(--text-color-1); /* letter-spacing: -0.1vw; */ font: 400 22px 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.3; text-align: left; } @media (max-width: 600px) { body { font-size: 20px; } } @media (max-width: 420px) { body { font-size: 18px; } } @media (max-width: 385px) { body { font-size: 20px; } } @media (max-width: 374px) { body { font-size: 18px; } } @media (max-width: 349px) { body { font-size: 14px; } } body * { position: relative; z-index: 10000; } #app-content { width: 100%; height: 100%; /* overflow: hidden; */ } .screen-wrapper { height: 100%; width: 100%; overflow: hidden; } /* @see Also .pill, .floating-pill */ .screen { position: relative; width: 100%; height: 100%; z-index: 20000; overflow: auto; top: 0; padding: 0; } #screen--body { } /* @remove Old, orig */ /* #screen--body > .cols > * > .screen { */ #screen--body .screen { /* border-top-left-radius: 48px; border-top-right-radius: 48px; */ } @media (max-width: 349px) { #screen--body .screen { /* border-top-left-radius: 36px; */ /* border-top-right-radius: 36px; */ } } /* @remove Old, orig */ /* #screen--body > .cols > * > .screen > * { */ #screen--body .screen[data-visible="1"] { padding: 20px 20px 60px; } @media (max-width: 349px) { #screen--body .screen[data-visible="1"] { padding: 18px 18px 54px; } } @media (max-width: 300px) { #screen--body .screen[data-visible="1"] { padding: 16px 16px 48px; } } #screen--body .screen .screen { background: inherit; border-top-left-radius: inherit; border-top-right-radius: inherit; } #screen--body .screen[data-visible="1"] .screen[data-visible="1"] { padding: inherit; } .sub-screen, .screen.sub-screen { position: relative; top: auto; width: auto; height: auto; z-index: 60000; padding: 0; background: transparent; } .sub-section { padding: 18px; border-radius: 36px; margin-top: 24px; } @media (max-width: 349px) { .sub-section { padding: 12px; } } .sub-section > *:first-child, .sub-section > *:first-child:hover, .sub-section > *:first-child:focus, .sub-section > *:first-child:active { margin-top: 0; } .qr-code { --qr-code-background: #fff; --qr-code-foreground: #000; display: block; width: 100%; max-width: 420px; padding: 18px; margin-left: auto; margin-right: auto; background: var(--qr-code-background); color: var(--qr-code-foreground); border-radius: 24px; } @media (prefers-color-scheme: dark) { .qr-code { --qr-code-background: #fff; --qr-code-foreground: #000; } } .qr-code-image { display: block; width: 100%; height: auto; } *[data-visible="1"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.3s, transform 0.3s; } *[data-visible="0"] { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4em); transition: opacity 0.3s, transform 0.3s; height: 0; } *[data-visible="1"].sub-screen { transition: opacity 0.3s; } *[data-visible="0"].sub-screen { transition: opacity 0.3s; } p { margin: 24px 0 0; } h1, h2, h3, h4, h5, h6 { margin: 24px 0 0; color: var(--heading-color-1); } /* Update .text-lg, .text-xl, .text-xxl too */ h3 { font-size: 150%; line-height: 1.2; margin: 24px 0 0; } @media (max-width: 600px) { h3 { font-size: 140%; } } h2 { font-size: 250%; line-height: 1.2; margin: 24px 0 0; } @media (max-width: 600px) { h2 { font-size: 210%; } } h1 { font-size: 300%; line-height: 1.2; margin: 24px 0 0; } @media (max-width: 600px) { h1 { font-size: 240%; } } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } code:not(pre code):not(.syntax-code) { background: var(--code-background-1); border-radius: var(--code-border-radius-1); box-shadow: inset 0 0 0 1px var(--code-border-color-1); color: var(--code-text-color-1); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: var(--code-font-size-1); padding: var(--code-padding-vertical-1) var(--code-padding-horizontal-1); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .syntax-code { display: block; min-width: max-content; color: var(--syntax-code-text-color); font-variant-ligatures: none; } .syntax-token-comment { color: var(--syntax-token-comment-text-color); } .syntax-token-keyword { color: var(--syntax-token-keyword-text-color); font-weight: 600; } .syntax-token-string { color: var(--syntax-token-string-text-color); } .syntax-token-number { color: var(--syntax-token-number-text-color); } .syntax-token-function { color: var(--syntax-token-function-text-color); } .syntax-token-variable { color: var(--syntax-token-variable-text-color); } .syntax-token-operator { color: var(--syntax-token-operator-text-color); } .text-xxs { font-size: 50%; } .text-xs { font-size: 70%; } .text-sm { font-size: 80%; } .text-md { font-size: 90%; } /* Update h1, h2, h3 too */ .text-lg { font-size: 150%; line-height: 1.2; } @media (max-width: 600px) { .text-lg { font-size: 140%; } } .text-xl { font-size: 250%; line-height: 1.2; } @media (max-width: 600px) { .text-xl { font-size: 210%; } } .text-xxl { font-size: 300%; line-height: 1.2; } @media (max-width: 600px) { .text-xxl { font-size: 240%; } } .line-height-xl { /* Compensates for lines combining normal text and .text-xs */ line-height: 2; } .line-height-lg { /* Compensates for lines combining normal text and .text-sm */ line-height: 1.6; } .line-height-sm { /* Compensates for lines combining normal text and .text-lg */ line-height: 0.5; } /* Also change other :first-child styles */ p:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } hr { height: 4px; background: rgba(0, 0, 0, 0.3); border: 0; margin-bottom: 0; } /* Avoid a:link, causes strong override cascade for things like .btn-clear, .transparent, etc */ a, a:hover, a:focus, a:active { color: var(--link-text-color-1); text-transform: none; text-decoration: none; cursor: pointer; } ul, ol { margin: 0; } .flat-list { margin-left: 0; padding-left: 0; list-style-position: inside; list-style-type: none; } .flat-list li { padding-left: 0; margin-left: 0; } img, .img, .img svg { width: 100%; height: auto; display: inline-block; position: relative; vertical-align: top; border: 0; } figure { margin: 0; padding: 0; } iframe { vertical-align: top; border: 0; } *[type="text"], *[type="email"], *[type="url"], *[type="password"], *[type="search"], *[type="number"], *[type="tel"], *[type="range"], *[type="date"], *[type="month"], *[type="week"], *[type="time"], *[type="datetime"], *[type="datetime-local"], *[type="color"], textarea, *[type="text"]:hover, *[type="email"]:hover, *[type="url"]:hover, *[type="password"]:hover, *[type="search"]:hover, *[type="number"]:hover, *[type="tel"]:hover, *[type="range"]:hover, *[type="date"]:hover, *[type="month"]:hover, *[type="week"]:hover, *[type="time"]:hover, *[type="datetime"]:hover, *[type="datetime-local"]:hover, *[type="color"]:hover, textarea:hover, *[type="text"]:active, *[type="email"]:active, *[type="url"]:active, *[type="password"]:active, *[type="search"]:active, *[type="number"]:active, *[type="tel"]:active, *[type="range"]:active, *[type="date"]:active, *[type="month"]:active, *[type="week"]:active, *[type="time"]:active, *[type="datetime"]:active, *[type="datetime-local"]:active, *[type="color"]:active, textarea:active { border: 4px solid var(--input-border-color-1); background: var(--input-background-1); color: var(--input-text-color-1); border-radius: 24px; /* Offset border thickness a bit */ padding: 16px; cursor: pointer; width: 100%; /* max-width: 300px; */ -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border 150ms ease-in; will-change: border; margin-top: 24px; } @media (max-width: 420px) { *[type="text"], *[type="email"], *[type="url"], *[type="password"], *[type="search"], *[type="number"], *[type="tel"], *[type="range"], *[type="date"], *[type="month"], *[type="week"], *[type="time"], *[type="datetime"], *[type="datetime-local"], *[type="color"], textarea, *[type="text"]:hover, *[type="email"]:hover, *[type="url"]:hover, *[type="password"]:hover, *[type="search"]:hover, *[type="number"]:hover, *[type="tel"]:hover, *[type="range"]:hover, *[type="date"]:hover, *[type="month"]:hover, *[type="week"]:hover, *[type="time"]:hover, *[type="datetime"]:hover, *[type="datetime-local"]:hover, *[type="color"]:hover, textarea:hover, *[type="text"]:active, *[type="email"]:active, *[type="url"]:active, *[type="password"]:active, *[type="search"]:active, *[type="number"]:active, *[type="tel"]:active, *[type="range"]:active, *[type="date"]:active, *[type="month"]:active, *[type="week"]:active, *[type="time"]:active, *[type="datetime"]:active, *[type="datetime-local"]:active, *[type="color"]:active, textarea:active { padding: 14px; } } @media (max-width: 349px) { *[type="text"], *[type="email"], *[type="url"], *[type="password"], *[type="search"], *[type="number"], *[type="tel"], *[type="range"], *[type="date"], *[type="month"], *[type="week"], *[type="time"], *[type="datetime"], *[type="datetime-local"], *[type="color"], textarea, *[type="text"]:hover, *[type="email"]:hover, *[type="url"]:hover, *[type="password"]:hover, *[type="search"]:hover, *[type="number"]:hover, *[type="tel"]:hover, *[type="range"]:hover, *[type="date"]:hover, *[type="month"]:hover, *[type="week"]:hover, *[type="time"]:hover, *[type="datetime"]:hover, *[type="datetime-local"]:hover, *[type="color"]:hover, textarea:hover, *[type="text"]:active, *[type="email"]:active, *[type="url"]:active, *[type="password"]:active, *[type="search"]:active, *[type="number"]:active, *[type="tel"]:active, *[type="range"]:active, *[type="date"]:active, *[type="month"]:active, *[type="week"]:active, *[type="time"]:active, *[type="datetime"]:active, *[type="datetime-local"]:active, *[type="color"]:active, textarea:active { border-radius: 18px; } } *[type=number]::-webkit-inner-spin-button, *[type=number]::-webkit-outer-spin-button { /* Hide number increment/decrement arrows in Safari (webkit) browser */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="checkbox"], input[type="radio"] { width: 32px; height: 32px; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; accent-color: var(--button-background-1); background: var(--input-background-1); cursor: pointer; display: inline-grid; place-content: center; padding: 0; vertical-align: top; /* border: 2px solid var(--input-border-focus-color-1); */ border: 4px solid var(--input-border-color-1); } input[type="checkbox"] { border-radius: 8px; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]::before, input[type="radio"]::before { content: ""; display: block; transform: scale(0); transition: transform 120ms ease-in-out; } input[type="checkbox"]::before { width: 20px; height: 20px; border: 0; border-width: 0; background: url('../media/icon/icon-success-2-green.svg') 50% 50% no-repeat; background-size: contain; filter: brightness(5) saturate(0) brightness(5); transform: scale(0); transform-origin: center; } input[type="checkbox"]:checked { background-color: var(--button-background-1); border-color: var(--button-background-1); } input[type="checkbox"]:checked::before { transform: scale(1); } input[type="radio"]::before { width: 20px; height: 20px; background-color: var(--button-background-1); border-radius: 50%; } input[type="radio"]:checked { border-color: var(--button-background-1); } input[type="radio"]:checked::before { transform: scale(1); } input[type="checkbox"]:focus, input[type="radio"]:focus { /* outline: 2px solid var(--input-border-focus-color-1); */ /* outline-offset: 2px; */ outline: none; outline-offset: 0; } *[type="text"]:focus, *[type="email"]:focus, *[type="url"]:focus, *[type="password"]:focus, *[type="search"]:focus, *[type="number"]:focus, *[type="tel"]:focus, *[type="range"]:focus, *[type="date"]:focus, *[type="month"]:focus, *[type="week"]:focus, *[type="time"]:focus, *[type="datetime"]:focus, *[type="datetime-local"]:focus, *[type="color"]:focus, textarea:focus { border: 4px solid var(--input-border-focus-color-1); outline: none; transition: border 150ms ease-out; } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: var(--input-placeholder-color-1); } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: var(--input-placeholder-color-1); opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: var(--input-placeholder-color-1); opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--input-placeholder-color-1); } ::-ms-input-placeholder { /* Microsoft Edge */ color: var(--input-placeholder-color-1); } ::placeholder { /* Most modern browsers support this now. */ color: var(--input-placeholder-color-1); } .icon-wrapper { display: inline-block; } .icon-wrapper-loading, .icon-wrapper-error { height: auto; position: relative; width: 100%; display: block; text-align: center; margin-top: 24px; } .icon { display: inline-block; width: 30px; height: 100%; vertical-align: top; } .icon-emoji-1 { height: 30px; } .icon-emoji-2 { height: 28px; width: 28px; font-size: 28px; line-height: 1; } .icon-emoji-3 { height: 36px; width: 36px; font-size: 36px; line-height: 1; } .icon-emoji-4 { height: 48px; width: 48px; font-size: 48px; line-height: 1; } .icon-emoji-5 { height: 72px; width: 72px; font-size: 72px; line-height: 1; } .icon-emoji-6 { height: 96px; width: 96px; font-size: 96px; line-height: 1; } @media (max-width: 349px) { .icon { width: 22px; } .icon-emoji-1 { height: 22px; } .icon-emoji-2 { height: 36px; width: 36px; } .icon-emoji-4 { height: 48px; width: 48px; } .icon-emoji-5 { height: 72px; width: 72px; } .icon-emoji-6 { height: 96px; width: 96px; } } a .icon { pointer-events: none; } .icon-size-auto { height: auto; } .icon-size-sm { width: 40px; height: 100%; } .icon-size-md { width: 80px; height: 100%; } .icon-size-lg { width: 120px; height: 100%; } .icon-size-xl { width: 160px; height: 100%; } .icon-size-full-width { width: 100%; height: 100%; } .offset-neg-xs { /* Compensates for lines combining normal text and .icon-size-xl */ top: -1px; } .offset-neg-sm { top: -2px; } .offset-neg-md { top: -3px; } .offset-neg-lg { top: -4px; } .offset-neg-xl { top: -5px; } .offset-neg-xxl { top: -6px; } .offset-xs { /* Compensates for lines combining normal text and .icon-size-xl */ top: 1px; } .offset-sm { top: 2px; } .offset-md { top: 3px; } .offset-lg { top: 4px; } .offset-xl { top: 5px; } .offset-xxl { top: 6px; } .icon-animate-spinning { -webkit-animation: 3s linear infinite rotate-fixed-1; -moz-animation: 3s linear infinite rotate-fixed-1; animation: 3s linear infinite rotate-fixed-1; } .pin-code-input { text-align: center; } textarea { height: 160px; } textarea.xs { height: 80px; } textarea.sm { height: 120px; } select { border: 4px solid var(--input-border-color-1); background-color: var(--input-background-1); background-position: calc(100% - 22px) calc(50% - 2px), calc(100% - 16px) calc(50% - 2px); background-repeat: no-repeat; background-size: 6px 6px, 6px 6px; background-image: linear-gradient(45deg, transparent 50%, var(--input-text-color-1) 50%), linear-gradient(135deg, var(--input-text-color-1) 50%, transparent 50%); color: var(--input-text-color-1); border-radius: 24px; /* padding: 10px 20px 11px 10px; */ padding: 16px; padding-right: 40px; cursor: pointer; width: 100%; /* max-width: 300px; */ -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-top: 24px; transition: border 150ms ease-in; will-change: border; } select:focus { outline: none; border: 4px solid var(--input-border-focus-color-1); transition: border 150ms ease-out; } select > * { padding: 10px 20px 11px 10px; } select[multiple] { background-image: none; padding-right: 16px; } /* Input range sliders */ *[type=range] { -webkit-appearance: none; margin: 18px 0; height: 48px; width: 100%; } *[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6.4px; cursor: pointer; animate: 0.2s; /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */ background: var(--input-range-background-1); border-radius: 1.3px; /* border: 0.2px solid var(--input-range-border-color-1); */ } *[type=range]::-webkit-slider-thumb { /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */ /* border: 1px solid #000000; */ height: 36px; width: 20px; border-radius: 3px; background: var(--input-background-1); cursor: pointer; -webkit-appearance: none; margin-top: -14px; } *[type=range]:focus::-webkit-slider-runnable-track { background: var(--input-range-track-background-1); } *[type=range]::-moz-range-track { width: 100%; height: 6.4px; cursor: pointer; animate: 0.2s; /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */ background: var(--input-range-background-1); border-radius: 1.3px; border: 0.2px solid var(--input-range-border-color-1); } *[type=range]::-moz-range-thumb { /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */ /* border: 1px solid #000000; */ height: 36px; width: 20px; border-radius: 3px; background: var(--input-background-1); cursor: pointer; } *[type=range]::-ms-track { width: 100%; height: 6.4px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent; } *[type=range]::-ms-fill-lower { background: var(--input-range-fill-background-1); border: 0.2px solid var(--input-range-border-color-1); border-radius: 2.6px; /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */ } *[type=range]::-ms-fill-upper { background: var(--input-range-background-1); /* border: 0.2px solid var(--input-range-border-color-1); */ border-radius: 2.6px; /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */ } *[type=range]::-ms-thumb { /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */ /* border: 1px solid #000000; */ height: 36px; width: 20px; border-radius: 3px; background: var(--input-background-1); cursor: pointer; } *[type=range]:focus::-ms-fill-lower { background: var(--input-range-background-1); } *[type=range]:focus::-ms-fill-upper { background: var(--input-range-track-background-1); } *[type="file"] { display: none; } *[type="submit"], *[type="button"], *[type="reset"], button, .btn, .input-file-btn { display: inline-block; padding: 20px; color: var(--button-text-color-1); border: 0; background: var(--button-background-1); font-weight: bold; cursor: pointer; border-radius: 24px; text-shadow: none; box-shadow: none; outline: none; width: 100%; /* max-width: 300px; */ text-align: center; user-select: none; margin-top: 24px; } *[type="submit"]:hover, *[type="button"]:hover, *[type="reset"]:hover, button:hover, .btn:hover, .input-file-btn:hover, *[type="submit"]:active, *[type="button"]:active, *[type="reset"]:active, button:active, .btn:active, .input-file-btn:active, *[type="submit"]:focus, *[type="button"]:focus, *[type="reset"]:focus, button:focus, .btn:focus, .input-file-btn:focus { color: var(--button-text-color-1); background: var(--button-background-1); } @media (max-width: 420px) { *[type="submit"], *[type="button"], *[type="reset"], button, .btn, .input-file-btn { padding: 18px 14px; } } @media (max-width: 349px) { *[type="submit"], *[type="button"], *[type="reset"], button, .btn, .input-file-btn { border-radius: 18px; } } .btn * { pointer-events: none; user-select: none; } .btn-sm { padding: 10px; } .btn-sm-2 { padding: 6.34px 25.4px; } .btn-min, .btn-min:hover, .btn-min:active, .btn-min:focus { width: auto; min-width: auto; } .btn-clear, .btn-clear:hover, .btn-clear:active, .btn-clear:focus { background: transparent; color: var(--button-text-color-2); /* padding: 0; */ border-radius: 0; } .pill { margin-top: 40px; /* height: auto; */ border-radius: 24px; } .pill > :not(:first-child):not(.floating-pill-inner-stack), .pill > .cols > :not(:first-child):not(.floating-pill-inner-stack) > :first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .pill > :not(:last-child):not(.floating-pill-inner-stack), .pill > .cols > :not(:last-child):not(.floating-pill-inner-stack) > :first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .pill *[type="text"], .pill *[type="email"], .pill *[type="url"], .pill *[type="password"], .pill *[type="search"], .pill *[type="number"], .pill *[type="tel"], .pill *[type="range"], .pill *[type="date"], .pill *[type="month"], .pill *[type="week"], .pill *[type="time"], .pill *[type="datetime"], .pill *[type="datetime-local"], .pill *[type="color"], .pill textarea { margin-top: 0; } .pill *[type="submit"], .pill *[type="button"], .pill *[type="reset"], .pill button, .pill .btn, .pill .input-file-btn { margin-top: 0; } .floating-pill { position: sticky; width: 100%; max-width: none; z-index: 25000; padding: 0; margin: 80px 0 0; top: 0; bottom: auto; } .floating-pill-bottom { top: auto; /* For bounce effect at bottom of screen. Too close to iOS gesture area though. @todo Add pad to every screen bottom */ /* bottom: -40px; */ bottom: 0; } .floating-pill-inner-stack { position: absolute; top: 0; width: 100%; border-radius: 36px; } .list-item-wrapper { text-align: left; padding: 15px 0; border-top: 2px solid var(--list-item-border-top-color); } .list-item-wrapper:first-child { border-top: 0; } .shadow-top-bg-1 { box-shadow: 0 -6px 30px 10px var(--shadow-background-1); } .shadow-top-bg-2 { box-shadow: 0 -11px 12px 1px var(--shadow-background-2); } .shadow-bottom-bg-1 { box-shadow: 0 6px 30px 10px var(--shadow-background-1); } .shadow-bottom-bg-2 { box-shadow: 0 11px 12px 1px var(--shadow-background-2); } .no-shadow { box-shadow: none; border-radius: 0; } .rotate-45deg { transform: rotate(45deg); } .rotate-90deg { transform: rotate(90deg); } .rotate-180deg { transform: rotate(180deg); } .rotate-270deg { transform: rotate(270deg); } .rows, .cols { display: flex; flex-direction: row; width: 100%; height: auto; } .cols { flex-direction: row; } .cols-tall-1 { flex-direction: column; } @media (max-width: 700px) { .cols-break-to-tall-1 { flex-direction: column; } } @media (max-width: 1100px) { .cols-break-to-tall-2, .cols-break-to-tall-2-1 { flex-direction: row; flex-wrap: wrap; gap: 0 24px; } .cols-break-to-tall-2 > .col-width-1, .cols-break-to-tall-2 > .col-width-2, .cols-break-to-tall-2 > .col-width-3, .cols-break-to-tall-2 > .col-width-4, .cols-break-to-tall-2 > .col-width-5, .cols-break-to-tall-2 > .col-width-6, .cols-break-to-tall-2 > .col-width-7, .cols-break-to-tall-2 > .col-width-8, .cols-break-to-tall-2 > .col-width-9, .cols-break-to-tall-2 > .col-width-10, .cols-break-to-tall-2-1 > .col-width-1, .cols-break-to-tall-2-1 > .col-width-2, .cols-break-to-tall-2-1 > .col-width-3, .cols-break-to-tall-2-1 > .col-width-4, .cols-break-to-tall-2-1 > .col-width-5, .cols-break-to-tall-2-1 > .col-width-6, .cols-break-to-tall-2-1 > .col-width-7, .cols-break-to-tall-2-1 > .col-width-8, .cols-break-to-tall-2-1 > .col-width-9, .cols-break-to-tall-2-1 > .col-width-10 { flex: 0 1 calc(50% - 12px); width: calc(50% - 12px); } .cols-break-to-tall-2 > .col-separator-no-bg-xs, .cols-break-to-tall-2 > .col-separator-no-bg-md, .cols-break-to-tall-2 > .col-separator-1-xs, .cols-break-to-tall-2 > .col-separator-1-md, .cols-break-to-tall-2-1 > .col-separator-no-bg-xs, .cols-break-to-tall-2-1 > .col-separator-no-bg-md, .cols-break-to-tall-2-1 > .col-separator-1-xs, .cols-break-to-tall-2-1 > .col-separator-1-md { display: none; } } @media (max-width: 700px) { .cols-break-to-tall-2-1 { flex-direction: column; } .cols-break-to-tall-2-1 > .col-width-1, .cols-break-to-tall-2-1 > .col-width-2, .cols-break-to-tall-2-1 > .col-width-3, .cols-break-to-tall-2-1 > .col-width-4, .cols-break-to-tall-2-1 > .col-width-5, .cols-break-to-tall-2-1 > .col-width-6, .cols-break-to-tall-2-1 > .col-width-7, .cols-break-to-tall-2-1 > .col-width-8, .cols-break-to-tall-2-1 > .col-width-9, .cols-break-to-tall-2-1 > .col-width-10 { flex: 1; width: 100%; } } .flex-1 { flex: 1 1 auto; } .min-height-full { min-height: 100%; } .col-width-1 { flex: 1; width: 100%; } .col-width-2 { flex: 2; width: 100%; } .col-width-3 { flex: 3; width: 100%; } .col-width-4 { flex: 4; width: 100%; } .col-width-5 { flex: 5; width: 100%; } .col-width-6 { flex: 6; width: 100%; } .col-width-7 { flex: 7; width: 100%; } .col-width-8 { flex: 8; width: 100%; } .col-width-9 { flex: 9; width: 100%; } .col-width-10 { flex: 10; width: 100%; } .link-text-color-1, .link-text-color-1:hover, .link-text-color-1:focus, .link-text-color-1:active { color: var(--link-text-color-1); } .link-text-color-2, .link-text-color-2:hover, .link-text-color-2:focus, .link-text-color-2:active { color: var(--link-text-color-2); } .link-text-color-3, .link-text-color-3:hover, .link-text-color-3:focus, .link-text-color-3:active { color: var(--link-text-color-3); } .col-separator-no-bg-xs { flex: 0.001; min-width: 1px; width: 1px; max-width: 1px; } .col-separator-no-bg-md { flex: 0.001; min-width: 24px; width: 24px; max-width: 24px; } .col-separator-1-xs { flex: 0.001; min-width: 1px; width: 1px; max-width: 1px; background: var(--col-separator-background-1); } .col-separator-1-md { flex: 0.001; min-width: 24px; width: 24px; max-width: 24px; background: var(--col-separator-background-1); } .align-horizontal-left { text-align: left; justify-content: start; } .align-horizontal-right { text-align: right; justify-content: end; } .align-horizontal-center { text-align: center; justify-content: center; margin-left: auto; margin-right: auto; } .align-vertical-top { vertical-align: top; align-items: start; } .align-vertical-center { vertical-align: middle; align-items: center; } .align-vertical-bottom { vertical-align: bottom; align-items: end; } .section-full { width: auto; max-width: auto; } .section-xl { max-width: 1100px; } .section-lg { max-width: 1000px; } .section-md { max-width: 800px; } .section-sm { max-width: 640px; } .section-xs { max-width: 400px; } .section-xxs { max-width: 280px; } .section-xxxs { max-width: 160px; } .section-xxxxs { max-width: 100px; } .separator-1 { border-top: 3px dashed rgba(255, 255, 255, 0.2); margin-top: 70px; margin-bottom: 50px; } .scroll-auto { overflow: auto; touch-action: auto; } .scroll-forced { overflow: scroll; touch-action: auto; } .scroll-expand { overflow: visible; touch-action: auto; height: auto; } .scroll-full-height { height: 100%; overflow: auto; touch-action: auto; } .no-scroll, .no-scroll-inner *, .no-scroll-and-inner, .no-scroll-and-inner * { /* @todo Possible disable. Overflow as can cause images to be clipped from their (flexbox) container, instead of container expanding to fix */ overflow: hidden; /* Overflow: hidden doesn't always work. E.g. on on iOS Safari */ /* Prevent scrolling this el */ touch-action: none; } .display-inline { display: inline; } .display-inline-block { display: inline-block; } .display-newline { display: block; } .text-capitalize { text-transform: capitalize; } .error, .error:hover, .error:active, .error:focus { color: var(--error-text-color-1); } .highlight-1 { background: var(--highlight-1-background); color: var(--highlight-1-text-color); border-radius: 24px; } .highlight-2 { background: var(--highlight-2-background); color: var(--highlight-2-text-color); border-radius: 24px; } .highlight-3 { background: var(--highlight-3-background); border-radius: 24px; } .highlight-4 { background: var(--highlight-4-background); border-radius: 24px; } .highlight-5 { background: var(--highlight-5-background); color: var(--highlight-5-text-color); } .highlight-tip { background: var(--highlight-tip-background); color: var(--highlight-tip-text-color); border-radius: 24px; } .highlight-warning { background: var(--highlight-warning-background); color: var(--highlight-warning-text-color); border-radius: 24px; } @media (max-width: 349px) { .highlight-1 { border-radius: 18px; } .highlight-2 { border-radius: 18px; } .highlight-3 { border-radius: 18px; } .highlight-4 { border-radius: 18px; } .highlight-tip { border-radius: 24px; } .highlight-warning { border-radius: 24px; } } .outline-1 { border: 2px solid var(--outline-1-border-color); } .no-border { border: 0; } .hide { display: none; } .show { display: block; } /* Used for copying to clipboard */ .hide-interactable { pointer-events: none; opacity: 0; /* Not compatible with copying to clipboard /* visibility: hidden; */ height: 0; /* position: relative; */ position: absolute; padding: 0; margin: 0 !important; border: 0; } .show-interactable { pointer-events: auto; opacity: inherit; /* Not compatible with copying to clipboard /* visibility: visible; */ height: inherit; position: relative; padding: inherit; margin: inherit !important; border: inherit; } .overflow-hide { overflow: hidden; } .overflow-show { overflow: auto; } .overflow-visible { overflow: visible; } .overlay-full { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; width: 100%; height: 100%; cursor: pointer; z-index: 20000; } .disabled { pointer-events: none; opacity: 0.5; } .transparent, .transparent:hover, .transparent:active, .transparent:focus { background: transparent; } .background-1 { background: var(--background-1); } .fade-0 { opacity: 0; } .fade-25 { opacity: 0.25; } .fade-50 { opacity: 0.5; } .fade-75 { opacity: 0.75; } .fade-100 { opacity: 1; } .effect-blur-1 { filter: none; transition: filter 0.3s; } .effect-blur-1-on { filter: blur(30px); } .effect-blur-1 { filter: none; transition: filter 0.3s; } .effect-blur-1-on { filter: blur(200px); } .effect-fade-1 { opacity: 1; transition: opacity 0.3s; } .effect-fade-1-on { opacity: 0; } .transition-none, .transition-none-and-inner, .transition-none-and-inner *, .transition-none-for-inner * { --transition-duration-1: 0s; transition: none; } .ignore-interaction, .ignore-interaction-and-inner, .ignore-interaction-and-inner *, .ignore-interaction-for-inner * { pointer-events: none; } /** To allow an inner element of an ignored parent element to receive interaction events */ .allow-interaction, .allow-interaction-and-inner, .allow-interaction-and-inner *, .allow-interaction-for-inner * { pointer-events: auto; } .ignore-selectable, .ignore-selectable-and-inner, .ignore-selectable-and-inner *, .ignore-selectable-for-inner * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .allow-selectable, .allow-selectable-and-inner, .allow-selectable-and-inner *, .allow-selectable-for-inner * { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .space-outer-0, .space-outer-0:hover, .space-outer-0:focus, .space-outer-0:active, p.space-outer-0:first-child, h1.space-outer-0:first-child, h2.space-outer-0:first-child, h3.space-outer-0:first-child, h4.space-outer-0:first-child, h5.space-outer-0:first-child, h6.space-outer-0:first-child { margin: 0; } .space-outer-vertical-0, .space-outer-vertical-0:hover, .space-outer-vertical-0:focus, .space-outer-vertical-0:active, p.space-outer-vertical-0:first-child, h1.space-outer-vertical-0:first-child, h2.space-outer-vertical-0:first-child, h3.space-outer-vertical-0:first-child, h4.space-outer-vertical-0:first-child, h5.space-outer-vertical-0:first-child, h6.space-outer-vertical-0:first-child { margin-top: 0; margin-bottom: 0; } .space-outer-vertical-0-25x, .space-outer-vertical-0-25x:hover, .space-outer-vertical-0-25x:focus, .space-outer-vertical-0-25x:active, p.space-outer-vertical-0-25x:first-child, h1.space-outer-vertical-0-25x:first-child, h2.space-outer-vertical-0-25x:first-child, h3.space-outer-vertical-0-25x:first-child, h4.space-outer-vertical-0-25x:first-child, h5.space-outer-vertical-0-25x:first-child, h6.space-outer-vertical-0-25x:first-child { margin-top: 6px; margin-bottom: 6px; } .space-outer-vertical-0-5x, .space-outer-vertical-0-5x:hover, .space-outer-vertical-0-5x:focus, .space-outer-vertical-0-5x:active, p.space-outer-vertical-0-5x:first-child, h1.space-outer-vertical-0-5x:first-child, h2.space-outer-vertical-0-5x:first-child, h3.space-outer-vertical-0-5x:first-child, h4.space-outer-vertical-0-5x:first-child, h5.space-outer-vertical-0-5x:first-child, h6.space-outer-vertical-0-5x:first-child { margin-top: 12px; margin-bottom: 12px; } .space-outer-vertical-1x, .space-outer-vertical-1x:hover, .space-outer-vertical-1x:focus, .space-outer-vertical-1x:active, p.space-outer-vertical-1x:first-child, h1.space-outer-vertical-1x:first-child, h2.space-outer-vertical-1x:first-child, h3.space-outer-vertical-1x:first-child, h4.space-outer-vertical-1x:first-child, h5.space-outer-vertical-1x:first-child, h6.space-outer-vertical-1x:first-child { margin-top: 24px; margin-bottom: 24px; } .space-outer-vertical-2x, .space-outer-vertical-2x:hover, .space-outer-vertical-2x:focus, .space-outer-vertical-2x:active, p.space-outer-vertical-2x:first-child, h1.space-outer-vertical-2x:first-child, h2.space-outer-vertical-2x:first-child, h3.space-outer-vertical-2x:first-child, h4.space-outer-vertical-2x:first-child, h5.space-outer-vertical-2x:first-child, h6.space-outer-vertical-2x:first-child { margin-top: 48px; margin-bottom: 48px; } .space-outer-vertical-3x, .space-outer-vertical-3x:hover, .space-outer-vertical-3x:focus, .space-outer-vertical-3x:active, p.space-outer-vertical-3x:first-child, h1.space-outer-vertical-3x:first-child, h2.space-outer-vertical-3x:first-child, h3.space-outer-vertical-3x:first-child, h4.space-outer-vertical-3x:first-child, h5.space-outer-vertical-3x:first-child, h6.space-outer-vertical-3x:first-child { margin-top: 72px; margin-bottom: 72px; } .space-outer-vertical-4x, .space-outer-vertical-4x:hover, .space-outer-vertical-4x:focus, .space-outer-vertical-4x:active, p.space-outer-vertical-4x:first-child, h1.space-outer-vertical-4x:first-child, h2.space-outer-vertical-4x:first-child, h3.space-outer-vertical-4x:first-child, h4.space-outer-vertical-4x:first-child, h5.space-outer-vertical-4x:first-child, h6.space-outer-vertical-4x:first-child { margin-top: 96px; margin-bottom: 96px; } .space-outer-vertical-5x, .space-outer-vertical-5x:hover, .space-outer-vertical-5x:focus, .space-outer-vertical-5x:active, p.space-outer-vertical-5x:first-child, h1.space-outer-vertical-5x:first-child, h2.space-outer-vertical-5x:first-child, h3.space-outer-vertical-5x:first-child, h4.space-outer-vertical-5x:first-child, h5.space-outer-vertical-5x:first-child, h6.space-outer-vertical-5x:first-child { margin-top: 120px; margin-bottom: 120px; } .space-outer-vertical-6x, .space-outer-vertical-6x:hover, .space-outer-vertical-6x:focus, .space-outer-vertical-6x:active, p.space-outer-vertical-6x:first-child, h1.space-outer-vertical-6x:first-child, h2.space-outer-vertical-6x:first-child, h3.space-outer-vertical-6x:first-child, h4.space-outer-vertical-6x:first-child, h5.space-outer-vertical-6x:first-child, h6.space-outer-vertical-6x:first-child { margin-top: 144px; margin-bottom: 144px; } .space-outer-vertical-7x, .space-outer-vertical-7x:hover, .space-outer-vertical-7x:focus, .space-outer-vertical-7x:active, p.space-outer-vertical-7x:first-child, h1.space-outer-vertical-7x:first-child, h2.space-outer-vertical-7x:first-child, h3.space-outer-vertical-7x:first-child, h4.space-outer-vertical-7x:first-child, h5.space-outer-vertical-7x:first-child, h6.space-outer-vertical-7x:first-child { margin-top: 168px; margin-bottom: 168px; } .space-outer-vertical-8x, .space-outer-vertical-8x:hover, .space-outer-vertical-8x:focus, .space-outer-vertical-8x:active, p.space-outer-vertical-8x:first-child, h1.space-outer-vertical-8x:first-child, h2.space-outer-vertical-8x:first-child, h3.space-outer-vertical-8x:first-child, h4.space-outer-vertical-8x:first-child, h5.space-outer-vertical-8x:first-child, h6.space-outer-vertical-8x:first-child { margin-top: 192px; margin-bottom: 192px; } .space-outer-vertical-9x, .space-outer-vertical-9x:hover, .space-outer-vertical-9x:focus, .space-outer-vertical-9x:active, p.space-outer-vertical-9x:first-child, h1.space-outer-vertical-9x:first-child, h2.space-outer-vertical-9x:first-child, h3.space-outer-vertical-9x:first-child, h4.space-outer-vertical-9x:first-child, h5.space-outer-vertical-9x:first-child, h6.space-outer-vertical-9x:first-child { margin-top: 216px; margin-bottom: 216px; } .space-outer-vertical-10x, .space-outer-vertical-10x:hover, .space-outer-vertical-10x:focus, .space-outer-vertical-10x:active, p.space-outer-vertical-10x:first-child, h1.space-outer-vertical-10x:first-child, h2.space-outer-vertical-10x:first-child, h3.space-outer-vertical-10x:first-child, h4.space-outer-vertical-10x:first-child, h5.space-outer-vertical-10x:first-child, h6.space-outer-vertical-10x:first-child { margin-top: 240px; margin-bottom: 240px; } .space-outer-top-0, .space-outer-top-0:hover, .space-outer-top-0:focus, .space-outer-top-0:active, p.space-outer-top-0:first-child, h1.space-outer-top-0:first-child, h2.space-outer-top-0:first-child, h3.space-outer-top-0:first-child, h4.space-outer-top-0:first-child, h5.space-outer-top-0:first-child, h6.space-outer-top-0:first-child { margin-top: 0; } .space-outer-top-0-25x, .space-outer-top-0-25x:hover, .space-outer-top-0-25x:focus, .space-outer-top-0-25x:active, p.space-outer-top-0-25x:first-child, h1.space-outer-top-0-25x:first-child, h2.space-outer-top-0-25x:first-child, h3.space-outer-top-0-25x:first-child, h4.space-outer-top-0-25x:first-child, h5.space-outer-top-0-25x:first-child, h6.space-outer-top-0-25x:first-child { margin-top: 6px; } .space-outer-top-0-5x, .space-outer-top-0-5x:hover, .space-outer-top-0-5x:focus, .space-outer-top-0-5x:active, p.space-outer-top-0-5x:first-child, h1.space-outer-top-0-5x:first-child, h2.space-outer-top-0-5x:first-child, h3.space-outer-top-0-5x:first-child, h4.space-outer-top-0-5x:first-child, h5.space-outer-top-0-5x:first-child, h6.space-outer-top-0-5x:first-child { margin-top: 12px; } .space-outer-top-1x, .space-outer-top-1x:hover, .space-outer-top-1x:focus, .space-outer-top-1x:active, p.space-outer-top-1x:first-child, h1.space-outer-top-1x:first-child, h2.space-outer-top-1x:first-child, h3.space-outer-top-1x:first-child, h4.space-outer-top-1x:first-child, h5.space-outer-top-1x:first-child, h6.space-outer-top-1x:first-child { margin-top: 24px; } .space-outer-top-2x, .space-outer-top-2x:hover, .space-outer-top-2x:focus, .space-outer-top-2x:active, p.space-outer-top-2x:first-child, h1.space-outer-top-2x:first-child, h2.space-outer-top-2x:first-child, h3.space-outer-top-2x:first-child, h4.space-outer-top-2x:first-child, h5.space-outer-top-2x:first-child, h6.space-outer-top-2x:first-child { margin-top: 48px; } .space-outer-top-3x, .space-outer-top-3x:hover, .space-outer-top-3x:focus, .space-outer-top-3x:active, p.space-outer-top-3x:first-child, h1.space-outer-top-3x:first-child, h2.space-outer-top-3x:first-child, h3.space-outer-top-3x:first-child, h4.space-outer-top-3x:first-child, h5.space-outer-top-3x:first-child, h6.space-outer-top-3x:first-child { margin-top: 72px; } .space-outer-top-4x, .space-outer-top-4x:hover, .space-outer-top-4x:focus, .space-outer-top-4x:active, p.space-outer-top-4x:first-child, h1.space-outer-top-4x:first-child, h2.space-outer-top-4x:first-child, h3.space-outer-top-4x:first-child, h4.space-outer-top-4x:first-child, h5.space-outer-top-4x:first-child, h6.space-outer-top-4x:first-child { margin-top: 96px; } .space-outer-top-5x, .space-outer-top-5x:hover, .space-outer-top-5x:focus, .space-outer-top-5x:active, p.space-outer-top-5x:first-child, h1.space-outer-top-5x:first-child, h2.space-outer-top-5x:first-child, h3.space-outer-top-5x:first-child, h4.space-outer-top-5x:first-child, h5.space-outer-top-5x:first-child, h6.space-outer-top-5x:first-child { margin-top: 120px; } .space-outer-top-6x, .space-outer-top-6x:hover, .space-outer-top-6x:focus, .space-outer-top-6x:active, p.space-outer-top-6x:first-child, h1.space-outer-top-6x:first-child, h2.space-outer-top-6x:first-child, h3.space-outer-top-6x:first-child, h4.space-outer-top-6x:first-child, h5.space-outer-top-6x:first-child, h6.space-outer-top-6x:first-child { margin-top: 144px; } .space-outer-top-7x, .space-outer-top-7x:hover, .space-outer-top-7x:focus, .space-outer-top-7x:active, p.space-outer-top-7x:first-child, h1.space-outer-top-7x:first-child, h2.space-outer-top-7x:first-child, h3.space-outer-top-7x:first-child, h4.space-outer-top-7x:first-child, h5.space-outer-top-7x:first-child, h6.space-outer-top-7x:first-child { margin-top: 168px; } .space-outer-top-8x, .space-outer-top-8x:hover, .space-outer-top-8x:focus, .space-outer-top-8x:active, p.space-outer-top-8x:first-child, h1.space-outer-top-8x:first-child, h2.space-outer-top-8x:first-child, h3.space-outer-top-8x:first-child, h4.space-outer-top-8x:first-child, h5.space-outer-top-8x:first-child, h6.space-outer-top-8x:first-child { margin-top: 192px; } .space-outer-top-9x, .space-outer-top-9x:hover, .space-outer-top-9x:focus, .space-outer-top-9x:active, p.space-outer-top-9x:first-child, h1.space-outer-top-9x:first-child, h2.space-outer-top-9x:first-child, h3.space-outer-top-9x:first-child, h4.space-outer-top-9x:first-child, h5.space-outer-top-9x:first-child, h6.space-outer-top-9x:first-child { margin-top: 216px; } .space-outer-top-10x, .space-outer-top-10x:hover, .space-outer-top-10x:focus, .space-outer-top-10x:active, p.space-outer-top-10x:first-child, h1.space-outer-top-10x:first-child, h2.space-outer-top-10x:first-child, h3.space-outer-top-10x:first-child, h4.space-outer-top-10x:first-child, h5.space-outer-top-10x:first-child, h6.space-outer-top-10x:first-child { margin-top: 240px; } .space-outer-top-offset-0, .space-outer-top-offset-0:hover, .space-outer-top-offset-0:focus, .space-outer-top-offset-0:active, p.space-outer-top-offset-0:first-child, h1.space-outer-top-offset-0:first-child, h2.space-outer-top-offset-0:first-child, h3.space-outer-top-offset-0:first-child, h4.space-outer-top-offset-0:first-child, h5.space-outer-top-offset-0:first-child, h6.space-outer-top-offset-0:first-child { top: 0; } .space-outer-top-offset-0-25x, .space-outer-top-offset-0-25x:hover, .space-outer-top-offset-0-25x:focus, .space-outer-top-offset-0-25x:active, p.space-outer-top-offset-0-25x:first-child, h1.space-outer-top-offset-0-25x:first-child, h2.space-outer-top-offset-0-25x:first-child, h3.space-outer-top-offset-0-25x:first-child, h4.space-outer-top-offset-0-25x:first-child, h5.space-outer-top-offset-0-25x:first-child, h6.space-outer-top-offset-0-25x:first-child { top: 6px; } .space-outer-top-offset-0-5x, .space-outer-top-offset-0-5x:hover, .space-outer-top-offset-0-5x:focus, .space-outer-top-offset-0-5x:active, p.space-outer-top-offset-0-5x:first-child, h1.space-outer-top-offset-0-5x:first-child, h2.space-outer-top-offset-0-5x:first-child, h3.space-outer-top-offset-0-5x:first-child, h4.space-outer-top-offset-0-5x:first-child, h5.space-outer-top-offset-0-5x:first-child, h6.space-outer-top-offset-0-5x:first-child { top: 12px; } .space-outer-top-offset-1x, .space-outer-top-offset-1x:hover, .space-outer-top-offset-1x:focus, .space-outer-top-offset-1x:active, p.space-outer-top-offset-1x:first-child, h1.space-outer-top-offset-1x:first-child, h2.space-outer-top-offset-1x:first-child, h3.space-outer-top-offset-1x:first-child, h4.space-outer-top-offset-1x:first-child, h5.space-outer-top-offset-1x:first-child, h6.space-outer-top-offset-1x:first-child { top: 24px; } .space-outer-top-offset-2x, .space-outer-top-offset-2x:hover, .space-outer-top-offset-2x:focus, .space-outer-top-offset-2x:active, p.space-outer-top-offset-2x:first-child, h1.space-outer-top-offset-2x:first-child, h2.space-outer-top-offset-2x:first-child, h3.space-outer-top-offset-2x:first-child, h4.space-outer-top-offset-2x:first-child, h5.space-outer-top-offset-2x:first-child, h6.space-outer-top-offset-2x:first-child { top: 48px; } .space-outer-top-offset-3x, .space-outer-top-offset-3x:hover, .space-outer-top-offset-3x:focus, .space-outer-top-offset-3x:active, p.space-outer-top-offset-3x:first-child, h1.space-outer-top-offset-3x:first-child, h2.space-outer-top-offset-3x:first-child, h3.space-outer-top-offset-3x:first-child, h4.space-outer-top-offset-3x:first-child, h5.space-outer-top-offset-3x:first-child, h6.space-outer-top-offset-3x:first-child { top: 72px; } .space-outer-top-offset-4x, .space-outer-top-offset-4x:hover, .space-outer-top-offset-4x:focus, .space-outer-top-offset-4x:active, p.space-outer-top-offset-4x:first-child, h1.space-outer-top-offset-4x:first-child, h2.space-outer-top-offset-4x:first-child, h3.space-outer-top-offset-4x:first-child, h4.space-outer-top-offset-4x:first-child, h5.space-outer-top-offset-4x:first-child, h6.space-outer-top-offset-4x:first-child { top: 96px; } .space-outer-top-offset-5x, .space-outer-top-offset-5x:hover, .space-outer-top-offset-5x:focus, .space-outer-top-offset-5x:active, p.space-outer-top-offset-5x:first-child, h1.space-outer-top-offset-5x:first-child, h2.space-outer-top-offset-5x:first-child, h3.space-outer-top-offset-5x:first-child, h4.space-outer-top-offset-5x:first-child, h5.space-outer-top-offset-5x:first-child, h6.space-outer-top-offset-5x:first-child { top: 120px; } .space-outer-top-offset-6x, .space-outer-top-offset-6x:hover, .space-outer-top-offset-6x:focus, .space-outer-top-offset-6x:active, p.space-outer-top-offset-6x:first-child, h1.space-outer-top-offset-6x:first-child, h2.space-outer-top-offset-6x:first-child, h3.space-outer-top-offset-6x:first-child, h4.space-outer-top-offset-6x:first-child, h5.space-outer-top-offset-6x:first-child, h6.space-outer-top-offset-6x:first-child { top: 144px; } .space-outer-top-offset-7x, .space-outer-top-offset-7x:hover, .space-outer-top-offset-7x:focus, .space-outer-top-offset-7x:active, p.space-outer-top-offset-7x:first-child, h1.space-outer-top-offset-7x:first-child, h2.space-outer-top-offset-7x:first-child, h3.space-outer-top-offset-7x:first-child, h4.space-outer-top-offset-7x:first-child, h5.space-outer-top-offset-7x:first-child, h6.space-outer-top-offset-7x:first-child { top: 168px; } .space-outer-top-offset-8x, .space-outer-top-offset-8x:hover, .space-outer-top-offset-8x:focus, .space-outer-top-offset-8x:active, p.space-outer-top-offset-8x:first-child, h1.space-outer-top-offset-8x:first-child, h2.space-outer-top-offset-8x:first-child, h3.space-outer-top-offset-8x:first-child, h4.space-outer-top-offset-8x:first-child, h5.space-outer-top-offset-8x:first-child, h6.space-outer-top-offset-8x:first-child { top: 192px; } .space-outer-top-offset-9x, .space-outer-top-offset-9x:hover, .space-outer-top-offset-9x:focus, .space-outer-top-offset-9x:active, p.space-outer-top-offset-9x:first-child, h1.space-outer-top-offset-9x:first-child, h2.space-outer-top-offset-9x:first-child, h3.space-outer-top-offset-9x:first-child, h4.space-outer-top-offset-9x:first-child, h5.space-outer-top-offset-9x:first-child, h6.space-outer-top-offset-9x:first-child { top: 216px; } .space-outer-top-offset-10x, .space-outer-top-offset-10x:hover, .space-outer-top-offset-10x:focus, .space-outer-top-offset-10x:active, p.space-outer-top-offset-10x:first-child, h1.space-outer-top-offset-10x:first-child, h2.space-outer-top-offset-10x:first-child, h3.space-outer-top-offset-10x:first-child, h4.space-outer-top-offset-10x:first-child, h5.space-outer-top-offset-10x:first-child, h6.space-outer-top-offset-10x:first-child { top: 240px; } .space-outer-top-neg-0-125x, .space-outer-top-neg-0-125x:hover, .space-outer-top-neg-0-125x:focus, .space-outer-top-neg-0-125x:active, p.space-outer-top-neg-0-125x:first-child, h1.space-outer-top-neg-0-125x:first-child, h2.space-outer-top-neg-0-125x:first-child, h3.space-outer-top-neg-0-125x:first-child, h4.space-outer-top-neg-0-125x:first-child, h5.space-outer-top-neg-0-125x:first-child, h6.space-outer-top-neg-0-125x:first-child { margin-top: -3px; } .space-outer-top-neg-0-25x, .space-outer-top-neg-0-25x:hover, .space-outer-top-neg-0-25x:focus, .space-outer-top-neg-0-25x:active, p.space-outer-top-neg-0-25x:first-child, h1.space-outer-top-neg-0-25x:first-child, h2.space-outer-top-neg-0-25x:first-child, h3.space-outer-top-neg-0-25x:first-child, h4.space-outer-top-neg-0-25x:first-child, h5.space-outer-top-neg-0-25x:first-child, h6.space-outer-top-neg-0-25x:first-child { margin-top: -6px; } .space-outer-top-neg-0-5x, .space-outer-top-neg-0-5x:hover, .space-outer-top-neg-0-5x:focus, .space-outer-top-neg-0-5x:active, p.space-outer-top-neg-0-5x:first-child, h1.space-outer-top-neg-0-5x:first-child, h2.space-outer-top-neg-0-5x:first-child, h3.space-outer-top-neg-0-5x:first-child, h4.space-outer-top-neg-0-5x:first-child, h5.space-outer-top-neg-0-5x:first-child, h6.space-outer-top-neg-0-5x:first-child { margin-top: -12px; } .space-outer-top-neg-1x, .space-outer-top-neg-1x:hover, .space-outer-top-neg-1x:focus, .space-outer-top-neg-1x:active, p.space-outer-top-neg-1x:first-child, h1.space-outer-top-neg-1x:first-child, h2.space-outer-top-neg-1x:first-child, h3.space-outer-top-neg-1x:first-child, h4.space-outer-top-neg-1x:first-child, h5.space-outer-top-neg-1x:first-child, h6.space-outer-top-neg-1x:first-child { margin-top: -24px; } .space-outer-top-neg-2x, .space-outer-top-neg-2x:hover, .space-outer-top-neg-2x:focus, .space-outer-top-neg-2x:active, p.space-outer-top-neg-2x:first-child, h1.space-outer-top-neg-2x:first-child, h2.space-outer-top-neg-2x:first-child, h3.space-outer-top-neg-2x:first-child, h4.space-outer-top-neg-2x:first-child, h5.space-outer-top-neg-2x:first-child, h6.space-outer-top-neg-2x:first-child { margin-top: -48px; } .space-outer-top-neg-3x, .space-outer-top-neg-3x:hover, .space-outer-top-neg-3x:focus, .space-outer-top-neg-3x:active, p.space-outer-top-neg-3x:first-child, h1.space-outer-top-neg-3x:first-child, h2.space-outer-top-neg-3x:first-child, h3.space-outer-top-neg-3x:first-child, h4.space-outer-top-neg-3x:first-child, h5.space-outer-top-neg-3x:first-child, h6.space-outer-top-neg-3x:first-child { margin-top: -72px; } .space-outer-top-neg-4x, .space-outer-top-neg-4x:hover, .space-outer-top-neg-4x:focus, .space-outer-top-neg-4x:active, p.space-outer-top-neg-4x:first-child, h1.space-outer-top-neg-4x:first-child, h2.space-outer-top-neg-4x:first-child, h3.space-outer-top-neg-4x:first-child, h4.space-outer-top-neg-4x:first-child, h5.space-outer-top-neg-4x:first-child, h6.space-outer-top-neg-4x:first-child { margin-top: -96px; } .space-outer-top-neg-5x, .space-outer-top-neg-5x:hover, .space-outer-top-neg-5x:focus, .space-outer-top-neg-5x:active, p.space-outer-top-neg-5x:first-child, h1.space-outer-top-neg-5x:first-child, h2.space-outer-top-neg-5x:first-child, h3.space-outer-top-neg-5x:first-child, h4.space-outer-top-neg-5x:first-child, h5.space-outer-top-neg-5x:first-child, h6.space-outer-top-neg-5x:first-child { margin-top: -120px; } .space-outer-top-neg-6x, .space-outer-top-neg-6x:hover, .space-outer-top-neg-6x:focus, .space-outer-top-neg-6x:active, p.space-outer-top-neg-6x:first-child, h1.space-outer-top-neg-6x:first-child, h2.space-outer-top-neg-6x:first-child, h3.space-outer-top-neg-6x:first-child, h4.space-outer-top-neg-6x:first-child, h5.space-outer-top-neg-6x:first-child, h6.space-outer-top-neg-6x:first-child { margin-top: -144px; } .space-outer-top-neg-7x, .space-outer-top-neg-7x:hover, .space-outer-top-neg-7x:focus, .space-outer-top-neg-7x:active, p.space-outer-top-neg-7x:first-child, h1.space-outer-top-neg-7x:first-child, h2.space-outer-top-neg-7x:first-child, h3.space-outer-top-neg-7x:first-child, h4.space-outer-top-neg-7x:first-child, h5.space-outer-top-neg-7x:first-child, h6.space-outer-top-neg-7x:first-child { margin-top: -168px; } .space-outer-top-neg-8x, .space-outer-top-neg-8x:hover, .space-outer-top-neg-8x:focus, .space-outer-top-neg-8x:active, p.space-outer-top-neg-8x:first-child, h1.space-outer-top-neg-8x:first-child, h2.space-outer-top-neg-8x:first-child, h3.space-outer-top-neg-8x:first-child, h4.space-outer-top-neg-8x:first-child, h5.space-outer-top-neg-8x:first-child, h6.space-outer-top-neg-8x:first-child { margin-top: -192px; } .space-outer-top-neg-9x, .space-outer-top-neg-9x:hover, .space-outer-top-neg-9x:focus, .space-outer-top-neg-9x:active, p.space-outer-top-neg-9x:first-child, h1.space-outer-top-neg-9x:first-child, h2.space-outer-top-neg-9x:first-child, h3.space-outer-top-neg-9x:first-child, h4.space-outer-top-neg-9x:first-child, h5.space-outer-top-neg-9x:first-child, h6.space-outer-top-neg-9x:first-child { margin-top: -216px; } .space-outer-top-neg-10x, .space-outer-top-neg-10x:hover, .space-outer-top-neg-10x:focus, .space-outer-top-neg-10x:active, p.space-outer-top-neg-10x:first-child, h1.space-outer-top-neg-10x:first-child, h2.space-outer-top-neg-10x:first-child, h3.space-outer-top-neg-10x:first-child, h4.space-outer-top-neg-10x:first-child, h5.space-outer-top-neg-10x:first-child, h6.space-outer-top-neg-10x:first-child { margin-top: -240px; } .space-outer-bottom-0, .space-outer-bottom-0:hover, .space-outer-bottom-0:focus, .space-outer-bottom-0:active, p.space-outer-bottom-0:first-child, h1.space-outer-bottom-0:first-child, h2.space-outer-bottom-0:first-child, h3.space-outer-bottom-0:first-child, h4.space-outer-bottom-0:first-child, h5.space-outer-bottom-0:first-child, h6.space-outer-bottom-0:first-child { margin-bottom: 0; } .space-outer-left-0, .space-outer-left-0:hover, .space-outer-left-0:focus, .space-outer-left-0:active, p.space-outer-left-0:first-child, h1.space-outer-left-0:first-child, h2.space-outer-left-0:first-child, h3.space-outer-left-0:first-child, h4.space-outer-left-0:first-child, h5.space-outer-left-0:first-child, h6.space-outer-left-0:first-child { margin-left: 0; } .space-outer-right-0, .space-outer-right-0:hover, .space-outer-right-0:focus, .space-outer-right-0:active, p.space-outer-right-0:first-child, h1.space-outer-right-0:first-child, h2.space-outer-right-0:first-child, h3.space-outer-right-0:first-child, h4.space-outer-right-0:first-child, h5.space-outer-right-0:first-child, h6.space-outer-right-0:first-child { margin-right: 0; } .space-inner-0, p.space-inner-0:first-child, h1.space-inner-0:first-child, h2.space-inner-0:first-child, h3.space-inner-0:first-child, h4.space-inner-0:first-child, h5.space-inner-0:first-child, h6.space-inner-0:first-child { padding: 0; } .space-inner-vertical-0, p.space-inner-vertical-0:first-child, h1.space-inner-vertical-0:first-child, h2.space-inner-vertical-0:first-child, h3.space-inner-vertical-0:first-child, h4.space-inner-vertical-0:first-child, h5.space-inner-vertical-0:first-child, h6.space-inner-vertical-0:first-child { padding-top: 0; padding-bottom: 0; } .space-inner-vertical-0-125x, p.space-inner-vertical-0-125x:first-child, h1.space-inner-vertical-0-125x:first-child, h2.space-inner-vertical-0-125x:first-child, h3.space-inner-vertical-0-125x:first-child, h4.space-inner-vertical-0-125x:first-child, h5.space-inner-vertical-0-125x:first-child, h6.space-inner-vertical-0-125x:first-child { padding-top: 3px; padding-bottom: 3px; } .space-inner-vertical-0-25x, p.space-inner-vertical-0-25x:first-child, h1.space-inner-vertical-0-25x:first-child, h2.space-inner-vertical-0-25x:first-child, h3.space-inner-vertical-0-25x:first-child, h4.space-inner-vertical-0-25x:first-child, h5.space-inner-vertical-0-25x:first-child, h6.space-inner-vertical-0-25x:first-child { padding-top: 6px; padding-bottom: 6px; } .space-inner-vertical-0-5x, p.space-inner-vertical-0-5x:first-child, h1.space-inner-vertical-0-5x:first-child, h2.space-inner-vertical-0-5x:first-child, h3.space-inner-vertical-0-5x:first-child, h4.space-inner-vertical-0-5x:first-child, h5.space-inner-vertical-0-5x:first-child, h6.space-inner-vertical-0-5x:first-child { padding-top: 12px; padding-bottom: 12px; } .space-inner-vertical-1x, p.space-inner-vertical-1x:first-child, h1.space-inner-vertical-1x:first-child, h2.space-inner-vertical-1x:first-child, h3.space-inner-vertical-1x:first-child, h4.space-inner-vertical-1x:first-child, h5.space-inner-vertical-1x:first-child, h6.space-inner-vertical-1x:first-child { padding-top: 24px; padding-bottom: 24px; } .space-inner-vertical-2x, p.space-inner-vertical-2x:first-child, h1.space-inner-vertical-2x:first-child, h2.space-inner-vertical-2x:first-child, h3.space-inner-vertical-2x:first-child, h4.space-inner-vertical-2x:first-child, h5.space-inner-vertical-2x:first-child, h6.space-inner-vertical-2x:first-child { padding-top: 48px; padding-bottom: 48px; } .space-inner-vertical-3x, p.space-inner-vertical-3x:first-child, h1.space-inner-vertical-3x:first-child, h2.space-inner-vertical-3x:first-child, h3.space-inner-vertical-3x:first-child, h4.space-inner-vertical-3x:first-child, h5.space-inner-vertical-3x:first-child, h6.space-inner-vertical-3x:first-child { padding-top: 72px; padding-bottom: 72px; } .space-inner-vertical-4x, p.space-inner-vertical-4x:first-child, h1.space-inner-vertical-4x:first-child, h2.space-inner-vertical-4x:first-child, h3.space-inner-vertical-4x:first-child, h4.space-inner-vertical-4x:first-child, h5.space-inner-vertical-4x:first-child, h6.space-inner-vertical-4x:first-child { padding-top: 96px; padding-bottom: 96px; } .space-inner-vertical-5x, p.space-inner-vertical-5x:first-child, h1.space-inner-vertical-5x:first-child, h2.space-inner-vertical-5x:first-child, h3.space-inner-vertical-5x:first-child, h4.space-inner-vertical-5x:first-child, h5.space-inner-vertical-5x:first-child, h6.space-inner-vertical-5x:first-child { padding-top: 120px; padding-bottom: 120px; } .space-inner-vertical-6x, p.space-inner-vertical-6x:first-child, h1.space-inner-vertical-6x:first-child, h2.space-inner-vertical-6x:first-child, h3.space-inner-vertical-6x:first-child, h4.space-inner-vertical-6x:first-child, h5.space-inner-vertical-6x:first-child, h6.space-inner-vertical-6x:first-child { padding-top: 144px; padding-bottom: 144px; } .space-inner-vertical-7x, p.space-inner-vertical-7x:first-child, h1.space-inner-vertical-7x:first-child, h2.space-inner-vertical-7x:first-child, h3.space-inner-vertical-7x:first-child, h4.space-inner-vertical-7x:first-child, h5.space-inner-vertical-7x:first-child, h6.space-inner-vertical-7x:first-child { padding-top: 168px; padding-bottom: 168px; } .space-inner-vertical-8x, p.space-inner-vertical-8x:first-child, h1.space-inner-vertical-8x:first-child, h2.space-inner-vertical-8x:first-child, h3.space-inner-vertical-8x:first-child, h4.space-inner-vertical-8x:first-child, h5.space-inner-vertical-8x:first-child, h6.space-inner-vertical-8x:first-child { padding-top: 192px; padding-bottom: 192px; } .space-inner-vertical-9x, p.space-inner-vertical-9x:first-child, h1.space-inner-vertical-9x:first-child, h2.space-inner-vertical-9x:first-child, h3.space-inner-vertical-9x:first-child, h4.space-inner-vertical-9x:first-child, h5.space-inner-vertical-9x:first-child, h6.space-inner-vertical-9x:first-child { padding-top: 216px; padding-bottom: 216px; } .space-inner-vertical-10x, p.space-inner-vertical-10x:first-child, h1.space-inner-vertical-10x:first-child, h2.space-inner-vertical-10x:first-child, h3.space-inner-vertical-10x:first-child, h4.space-inner-vertical-10x:first-child, h5.space-inner-vertical-10x:first-child, h6.space-inner-vertical-10x:first-child { padding-top: 240px; padding-bottom: 240px; } .space-inner-horizontal-0, p.space-inner-horizontal-0:first-child, h1.space-inner-horizontal-0:first-child, h2.space-inner-horizontal-0:first-child, h3.space-inner-horizontal-0:first-child, h4.space-inner-horizontal-0:first-child, h5.space-inner-horizontal-0:first-child, h6.space-inner-horizontal-0:first-child { padding-left: 0; padding-right: 0; } .space-inner-horizontal-0-125x, p.space-inner-horizontal-0-125x:first-child, h1.space-inner-horizontal-0-125x:first-child, h2.space-inner-horizontal-0-125x:first-child, h3.space-inner-horizontal-0-125x:first-child, h4.space-inner-horizontal-0-125x:first-child, h5.space-inner-horizontal-0-125x:first-child, h6.space-inner-horizontal-0-125x:first-child { padding-left: 3px; padding-right: 3px; } .space-inner-horizontal-0-25x, p.space-inner-horizontal-0-25x:first-child, h1.space-inner-horizontal-0-25x:first-child, h2.space-inner-horizontal-0-25x:first-child, h3.space-inner-horizontal-0-25x:first-child, h4.space-inner-horizontal-0-25x:first-child, h5.space-inner-horizontal-0-25x:first-child, h6.space-inner-horizontal-0-25x:first-child { padding-left: 6px; padding-right: 6px; } .space-inner-horizontal-0-5x, p.space-inner-horizontal-0-5x:first-child, h1.space-inner-horizontal-0-5x:first-child, h2.space-inner-horizontal-0-5x:first-child, h3.space-inner-horizontal-0-5x:first-child, h4.space-inner-horizontal-0-5x:first-child, h5.space-inner-horizontal-0-5x:first-child, h6.space-inner-horizontal-0-5x:first-child { padding-left: 12px; padding-right: 12px; } .space-inner-horizontal-1x, p.space-inner-horizontal-1x:first-child, h1.space-inner-horizontal-1x:first-child, h2.space-inner-horizontal-1x:first-child, h3.space-inner-horizontal-1x:first-child, h4.space-inner-horizontal-1x:first-child, h5.space-inner-horizontal-1x:first-child, h6.space-inner-horizontal-1x:first-child { padding-left: 24px; padding-right: 24px; } .space-inner-horizontal-2x, p.space-inner-horizontal-2x:first-child, h1.space-inner-horizontal-2x:first-child, h2.space-inner-horizontal-2x:first-child, h3.space-inner-horizontal-2x:first-child, h4.space-inner-horizontal-2x:first-child, h5.space-inner-horizontal-2x:first-child, h6.space-inner-horizontal-2x:first-child { padding-left: 48px; padding-right: 48px; } .space-inner-horizontal-3x, p.space-inner-horizontal-3x:first-child, h1.space-inner-horizontal-3x:first-child, h2.space-inner-horizontal-3x:first-child, h3.space-inner-horizontal-3x:first-child, h4.space-inner-horizontal-3x:first-child, h5.space-inner-horizontal-3x:first-child, h6.space-inner-horizontal-3x:first-child { padding-left: 72px; padding-right: 72px; } .space-inner-horizontal-4x, p.space-inner-horizontal-4x:first-child, h1.space-inner-horizontal-4x:first-child, h2.space-inner-horizontal-4x:first-child, h3.space-inner-horizontal-4x:first-child, h4.space-inner-horizontal-4x:first-child, h5.space-inner-horizontal-4x:first-child, h6.space-inner-horizontal-4x:first-child { padding-left: 96px; padding-right: 96px; } .space-inner-horizontal-5x, p.space-inner-horizontal-5x:first-child, h1.space-inner-horizontal-5x:first-child, h2.space-inner-horizontal-5x:first-child, h3.space-inner-horizontal-5x:first-child, h4.space-inner-horizontal-5x:first-child, h5.space-inner-horizontal-5x:first-child, h6.space-inner-horizontal-5x:first-child { padding-left: 120px; padding-right: 120px; } .space-inner-horizontal-6x, p.space-inner-horizontal-6x:first-child, h1.space-inner-horizontal-6x:first-child, h2.space-inner-horizontal-6x:first-child, h3.space-inner-horizontal-6x:first-child, h4.space-inner-horizontal-6x:first-child, h5.space-inner-horizontal-6x:first-child, h6.space-inner-horizontal-6x:first-child { padding-left: 144px; padding-right: 144px; } .space-inner-horizontal-7x, p.space-inner-horizontal-7x:first-child, h1.space-inner-horizontal-7x:first-child, h2.space-inner-horizontal-7x:first-child, h3.space-inner-horizontal-7x:first-child, h4.space-inner-horizontal-7x:first-child, h5.space-inner-horizontal-7x:first-child, h6.space-inner-horizontal-7x:first-child { padding-left: 168px; padding-right: 168px; } .space-inner-horizontal-8x, p.space-inner-horizontal-8x:first-child, h1.space-inner-horizontal-8x:first-child, h2.space-inner-horizontal-8x:first-child, h3.space-inner-horizontal-8x:first-child, h4.space-inner-horizontal-8x:first-child, h5.space-inner-horizontal-8x:first-child, h6.space-inner-horizontal-8x:first-child { padding-left: 192px; padding-right: 192px; } .space-inner-horizontal-9x, p.space-inner-horizontal-9x:first-child, h1.space-inner-horizontal-9x:first-child, h2.space-inner-horizontal-9x:first-child, h3.space-inner-horizontal-9x:first-child, h4.space-inner-horizontal-9x:first-child, h5.space-inner-horizontal-9x:first-child, h6.space-inner-horizontal-9x:first-child { padding-left: 216px; padding-right: 216px; } .space-inner-horizontal-10x, p.space-inner-horizontal-10x:first-child, h1.space-inner-horizontal-10x:first-child, h2.space-inner-horizontal-10x:first-child, h3.space-inner-horizontal-10x:first-child, h4.space-inner-horizontal-10x:first-child, h5.space-inner-horizontal-10x:first-child, h6.space-inner-horizontal-10x:first-child { padding-left: 240px; padding-right: 240px; } .space-inner-top-0, .space-inner-top-0:hover, .space-inner-top-0:focus, .space-inner-top-0:active, p.space-inner-top-0:first-child, h1.space-inner-top-0:first-child, h2.space-inner-top-0:first-child, h3.space-inner-top-0:first-child, h4.space-inner-top-0:first-child, h5.space-inner-top-0:first-child, h6.space-inner-top-0:first-child { padding-top: 0; } .space-inner-bottom-0, .space-inner-bottom-0:hover, .space-inner-bottom-0:focus, .space-inner-bottom-0:active, p.space-inner-bottom-0:first-child, h1.space-inner-bottom-0:first-child, h2.space-inner-bottom-0:first-child, h3.space-inner-bottom-0:first-child, h4.space-inner-bottom-0:first-child, h5.space-inner-bottom-0:first-child, h6.space-inner-bottom-0:first-child { padding-bottom: 0; } .space-inner-left-0, .space-inner-left-0:hover, .space-inner-left-0:focus, .space-inner-left-0:active, p.space-inner-left-0:first-child, h1.space-inner-left-0:first-child, h2.space-inner-left-0:first-child, h3.space-inner-left-0:first-child, h4.space-inner-left-0:first-child, h5.space-inner-left-0:first-child, h6.space-inner-left-0:first-child { padding-left: 0; } .space-inner-right-0, .space-inner-right-0:hover, .space-inner-right-0:focus, .space-inner-right-0:active, p.space-inner-right-0:first-child, h1.space-inner-right-0:first-child, h2.space-inner-right-0:first-child, h3.space-inner-right-0:first-child, h4.space-inner-right-0:first-child, h5.space-inner-right-0:first-child, h6.space-inner-right-0:first-child { padding-right: 0; } .border-radius-0 { border-radius: 0; } .border-radius-0-25x { border-radius: 6px; } .border-radius-0-33x { border-radius: 8px; } .border-radius-0-5x { border-radius: 12px; } .border-radius-1x { border-radius: 24px; } .border-radius-1-5x { border-radius: 36px; } .border-radius-2x { border-radius: 48px; } .border-radius-3x { border-radius: 72px; } .border-radius-4x { border-radius: 96px; } .border-radius-5x { border-radius: 120px; } .border-radius-6x { border-radius: 144px; } .border-radius-7x { border-radius: 168px; } .border-radius-8x { border-radius: 192px; } .border-radius-9x { border-radius: 216px; } .border-radius-10x { border-radius: 240px; } .z-index-1 { z-index: 80000 } .z-index-2 { z-index: 90000 } .z-index-3 { z-index: 100000 } .z-index-4 { z-index: 200000 }