@-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; --input-background-1: #fff; --input-text-color-1: #333; --input-placeholder-color-1: #777; --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-1-background: #333; --highlight-1-1-text-color: #fff; --highlight-1-2-background: #333; --highlight-1-2-text-color: #fff; --highlight-2-1-background: #ebf3ff; --highlight-2-2-background: #ebf3ff; --highlight-3-1-background: #fff; --highlight-3-1-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: 2px solid rgba(255, 255, 255, 0.2); --outline-1-border-color: #000; --col-separator-background-1: #ccc; } /* 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; --input-background-1: #fff; --input-text-color-1: #333; --input-placeholder-color-1: #bbb; --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-1-background: #1b1b1b; --highlight-1-1-text-color: #eee; --highlight-1-2-background: #1b1b1b; --highlight-1-2-text-color: #eee; --highlight-2-1-background: #1b1b1b; --highlight-2-2-background: #1b1b1b; --highlight-3-1-background: #000; --highlight-3-1-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: 2px solid rgba(255, 255, 255, 0.1); --outline-1-border-color: #000; --col-separator-background-1: #ccc; } } /* 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; --input-background-1: #fff; --input-text-color-1: #333; --input-placeholder-color-1: #777; --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-1-background: #333; --highlight-1-1-text-color: #fff; --highlight-1-2-background: #333; --highlight-1-2-text-color: #fff; --highlight-2-1-background: #ebf3ff; --highlight-2-2-background: #ebf3ff; --highlight-3-1-background: #fff; --highlight-3-1-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: 2px solid rgba(255, 255, 255, 0.2); --outline-1-border-color: #000; --col-separator-background-1: #ccc; } /* 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; --input-background-1: #fff; --input-text-color-1: #333; --input-placeholder-color-1: #bbb; --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-1-background: #1b1b1b; --highlight-1-1-text-color: #eee; --highlight-1-2-background: #1b1b1b; --highlight-1-2-text-color: #eee; --highlight-2-1-background: #1b1b1b; --highlight-2-2-background: #1b1b1b; --highlight-3-1-background: #000; --highlight-3-1-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: 2px solid rgba(255, 255, 255, 0.1); --outline-1-border-color: #000; --col-separator-background-1: #ccc; } 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; } 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%; } } .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, .btn-transparent, etc */ a, a:hover, a:focus, a:active { color: var(--link-text-color-1); text-transform: none; text-decoration: none; cursor: pointer; } /* ul { margin: 0; padding: 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 { width: 100%; height: auto; display: inline-block; position: relative; vertical-align: top; border: 0; } figure { margin: 0; padding: 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 #fff; background: var(--input-background-1); color: var(--input-text-color-1); border-radius: 26px; /* 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; } *[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 #eee; 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 { height: 30px; } @media (max-width: 349px) { .icon { width: 22px; } .icon-emoji { height: 22px; } } 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-negative-xs { /* Compensates for lines combining normal text and .icon-size-xl */ top: -1px; } .offset-xs { /* Compensates for lines combining normal text and .icon-size-xl */ top: 1px; } .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 { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* padding: 10px 20px 11px 10px; */ border-radius: 60px; border: 4px solid #fff; background: var(--input-background-1); cursor: pointer; width: 100%; /* max-width: 300px; */ } select:focus { outline: none; border: 4px solid #000; transition: border 150ms ease-out; } select > * { padding: 10px 20px 11px 10px; } select:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-position: right 50%; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=); padding: 40px; border-radius: 60px; border: 4px solid #fff; background: var(--input-background-1); } select:not([multiple]):focus { outline: none; border: 4px solid #000; transition: border 150ms ease-out; } /* 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 #010101; */ } *[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 #010101; } *[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 #010101; 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 #010101; */ 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; } .btn-transparent, .btn-transparent:hover, .btn-transparent:active, .btn-transparent:focus { background: transparent; } #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; } .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; } *[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; } .pill { margin-top: 40px; /* height: auto; */ } .pill *:not(:first-child), .pill *:not(:first-child) * { border-top-left-radius: 0; border-bottom-left-radius: 0; } .pill *:not(:last-child), .pill *:not(:last-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; } .list-item-wrapper { text-align: left; padding: 15px 0; border-top: var(--list-item-border-top); } .list-item-wrapper:first-child { border-top: 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; margin: 0 !important; } .show-interactable { pointer-events: auto; opacity: inherit; /* Not compatible with copying to clipboard /* visibility: visible; */ height: inherit; position: relative; margin: inherit !important; } .disabled { pointer-events: none; opacity: 0.5; } .fade-25 { opacity: 0.25; } .fade-50 { opacity: 0.5; } .fade-75 { opacity: 0.75; } .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; } .allow-selectable, .allow-selectable-and-inner, .allow-selectable-and-inner *, .allow-selectable-for-inner * { user-select: text; } .shadow-top-bg-1 { box-shadow: 0 -6px 30px 10px var(--shadow-background-1); /* Update when .btn changed */ border-radius: 36px; } .shadow-top-bg-2 { box-shadow: 0 -10px 12px 6px var(--shadow-background-2); /* Update when .btn changed */ border-radius: 36px; } .shadow-bottom-bg-1 { box-shadow: 0 6px 30px 10px var(--shadow-background-1); /* Update when .btn changed */ border-radius: 36px; } .shadow-bottom-bg-2 { box-shadow: 0 10px 12px 6px var(--shadow-background-2); /* Update when .btn changed */ border-radius: 36px; } .no-shadow { box-shadow: none; border-radius: 0; } .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; } @media (max-width: 700px) { .cols-break-to-tall-1 { flex-direction: column; } } .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%; } .col-separator-xs { flex: 0.001; min-width: 1px; width: 1px; max-width: 1px; 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-md { max-width: 880px; } .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; } .scroll-forced { overflow: scroll; } .scroll-expand { overflow: visible; height: auto; } .scroll-full-height { height: 100%; overflow: 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-1 { background: var(--highlight-1-1-background); color: var(--highlight-1-1-text-color); border-radius: 26px; } .highlight-1-2 { background: var(--highlight-1-2-background); color: var(--highlight-1-2-text-color); border-radius: 36px; } .highlight-2-1 { background: var(--highlight-2-1-background); border-radius: 26px; } .highlight-2-2 { background: var(--highlight-2-2-background); border-radius: 36px; } .highlight-3-1 { background: var(--highlight-3-1-background); color: var(--highlight-3-1-text-color); } .highlight-tip { background: var(--highlight-tip-background); color: var(--highlight-tip-text-color); border-radius: 26px; } .highlight-warning { background: var(--highlight-warning-background); color: var(--highlight-warning-text-color); border-radius: 26px; } @media (max-width: 349px) { .highlight-1-1 { border-radius: 18px; } .highlight-1-2 { border-radius: 26px; } .highlight-2-1 { border-radius: 18px; } .highlight-2-2 { border-radius: 26px; } .highlight-tip { border-radius: 26px; } .highlight-warning { border-radius: 26px; } } .outline-1 { border: 10px solid var(--outline-1-border-color); } .no-border { border: 0; } .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-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 } #screen--overlay-loading--wrapper { pointer-events: none; } #screen--overlay-loading--wrapper #screen--overlay-loading { /* opacity: 0; */ /* visibility: hidden; */ pointer-events: auto; }