@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); @font-face { font-family: 'Fira Mono'; src: url('/content/fonts/fira-mono/FiraMono-Regular.eot?v=ceb2cf50f2ea320b44ca7663d78d31f3'); src: url('/content/fonts/fira-mono/FiraMono-Regular.eot?v=ceb2cf50f2ea320b44ca7663d78d31f3') format('embedded-opentype'), url('/content/fonts/fira-mono/FiraMono-Regular.woff2?v=caf19b805dfd4655789d5aa93d7dde5b') format('woff2'), url('/content/fonts/fira-mono/FiraMono-Regular.woff?v=dafe885d86423a6ccc067d907b5a202a') format('woff'), url('/content/fonts/fira-mono/FiraMono-Regular.ttf?v=9d9ef03aa28bc0654c49fa9ce454ccda') format('truetype'), url('/content/fonts/fira-mono/FiraMono-Regular.svg?v=df5fdd60715dee953488e1a0440f2647') format('svg'); } @font-face { font-family: 'Open Sans'; src: url('/content/fonts/open-sans/OpenSans-Regular.eot?v=07d1a425ccbad19329db2f72d12c4233'); src: url('/content/fonts/open-sans/OpenSans-Regular.eot?v=07d1a425ccbad19329db2f72d12c4233') format('embedded-opentype'), url('/content/fonts/open-sans/OpenSans-Regular.woff2?v=9666411f6532dc9c31920ea6059b9728') format('woff2'), url('/content/fonts/open-sans/OpenSans-Regular.woff?v=67e0ecdd8281f64dca1f619b3ae0d32e') format('woff'), url('/content/fonts/open-sans/OpenSans-Regular.ttf?v=3ed9575dcc488c3e3a5bd66620bdf5a4') format('truetype'), url('/content/fonts/open-sans/OpenSans-Regular.svg?v=168418d16b807b8ca190eb6789d52010') format('svg'); } @font-face { font-family: 'Overpass Mono'; src: url('/content/fonts/overpass-mono/OverpassMono-Regular.eot?v=aa6796c974f13cf9fef697a328cb0db9'); src: url('/content/fonts/overpass-mono/OverpassMono-Regular.eot?v=aa6796c974f13cf9fef697a328cb0db9') format('embedded-opentype'), url('/content/fonts/overpass-mono/OverpassMono-Regular.woff2?v=b038c6c22602ac8aa034513ef3a1df82') format('woff2'), url('/content/fonts/overpass-mono/OverpassMono-Regular.woff?v=61f044bff765113796e22bdd27aad5f1') format('woff'), url('/content/fonts/overpass-mono/OverpassMono-Regular.ttf?v=0d60efe0cf809ae8cecdb7f810154e1c') format('truetype'), url('/content/fonts/overpass-mono/OverpassMono-Regular.svg?v=bb56185397ceeec27a4509f392e21537') format('svg'); } @font-face { font-family: 'Roboto Mono'; src: url('/content/fonts/roboto-mono/RobotoMono-Regular.eot?v=6184bead4a518a57393c7e355dca7af5'); src: url('/content/fonts/roboto-mono/RobotoMono-Regular.eot?v=6184bead4a518a57393c7e355dca7af5') format('embedded-opentype'), url('/content/fonts/roboto-mono/RobotoMono-Regular.woff2?v=be4b9a3f4accb2120063bbdb74c864a7') format('woff2'), url('/content/fonts/roboto-mono/RobotoMono-Regular.woff?v=a1765c668703a86e5e5e9aa7e98b1abd') format('woff'), url('/content/fonts/roboto-mono/RobotoMono-Regular.ttf?v=b4618f1f7f4cee0ac09873fcc5a966f9') format('truetype'), url('/content/fonts/roboto-mono/RobotoMono-Regular.svg?v=66e88a7d4df86b9c548f617e28e9e79c') format('svg'); } @font-face { font-family: 'Source Code Pro'; src: url('/content/fonts/source-code-pro/SourceCodePro-Regular.eot?v=02b14f04b8df8a9cfb6a4718f99b7d5d'); src: url('/content/fonts/source-code-pro/SourceCodePro-Regular.eot?v=02b14f04b8df8a9cfb6a4718f99b7d5d') format('embedded-opentype'), url('/content/fonts/source-code-pro/SourceCodePro-Regular.woff2?v=5027e4bdca423f7993e407b26fbb19f4') format('woff2'), url('/content/fonts/source-code-pro/SourceCodePro-Regular.woff?v=524b89089e03b70ef8ffe0e56df0e4d5') format('woff'), url('/content/fonts/source-code-pro/SourceCodePro-Regular.ttf?v=b484b32fcec981a533e3b9694953103b') format('truetype'), url('/content/fonts/source-code-pro/SourceCodePro-Regular.svg?v=1257ed810dec97ab8fbb4fddff416678') format('svg'); } /*! TACHYONS v4.9.0 | http://tachyons.io */ /* * * ________ ______ * ___ __/_____ _________ /______ ______________________ * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ * /____/ * * TABLE OF CONTENTS * * 1. External Library Includes * - Normalize.css | http://normalize.css.github.io * 2. Tachyons Modules * 3. Variables * - Media Queries * - Colors * 4. Debugging * - Debug all * - Debug children * */ /* External Library Includes */ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /* Modules */ /* BOX SIZING */ html, body, div, article, section, main, footer, header, form, fieldset, legend, pre, code, a, h1,h2,h3,h4,h5,h6, p, ul, ol, li, dl, dt, dd, textarea, table, td, th, tr, input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], .border-box { -webkit-box-sizing: border-box; box-sizing: border-box; } /* ASPECT RATIOS */ /* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e * Make sure there are no height and width attributes on the embedded media. * Adapted from: https://github.com/suitcss/components-flex-embed * * Example: * *
* *
* * */ .aspect-ratio { height: 0; position: relative; } .aspect-ratio--16x9 { padding-bottom: 56.25%; } .aspect-ratio--9x16 { padding-bottom: 177.77%; } .aspect-ratio--4x3 { padding-bottom: 75%; } .aspect-ratio--3x4 { padding-bottom: 133.33%; } .aspect-ratio--6x4 { padding-bottom: 66.6%; } .aspect-ratio--4x6 { padding-bottom: 150%; } .aspect-ratio--8x5 { padding-bottom: 62.5%; } .aspect-ratio--5x8 { padding-bottom: 160%; } .aspect-ratio--7x5 { padding-bottom: 71.42%; } .aspect-ratio--5x7 { padding-bottom: 140%; } .aspect-ratio--1x1 { padding-bottom: 100%; } .aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } @media screen and (min-width: 30em){ .aspect-ratio-ns { height: 0; position: relative; } .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } .aspect-ratio--4x3-ns { padding-bottom: 75%; } .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } .aspect-ratio--4x6-ns { padding-bottom: 150%; } .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } .aspect-ratio--5x8-ns { padding-bottom: 160%; } .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } .aspect-ratio--5x7-ns { padding-bottom: 140%; } .aspect-ratio--1x1-ns { padding-bottom: 100%; } .aspect-ratio--object-ns { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } } @media screen and (min-width: 30em) and (max-width: 60em){ .aspect-ratio-m { height: 0; position: relative; } .aspect-ratio--16x9-m { padding-bottom: 56.25%; } .aspect-ratio--9x16-m { padding-bottom: 177.77%; } .aspect-ratio--4x3-m { padding-bottom: 75%; } .aspect-ratio--3x4-m { padding-bottom: 133.33%; } .aspect-ratio--6x4-m { padding-bottom: 66.6%; } .aspect-ratio--4x6-m { padding-bottom: 150%; } .aspect-ratio--8x5-m { padding-bottom: 62.5%; } .aspect-ratio--5x8-m { padding-bottom: 160%; } .aspect-ratio--7x5-m { padding-bottom: 71.42%; } .aspect-ratio--5x7-m { padding-bottom: 140%; } .aspect-ratio--1x1-m { padding-bottom: 100%; } .aspect-ratio--object-m { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } } @media screen and (min-width: 60em){ .aspect-ratio-l { height: 0; position: relative; } .aspect-ratio--16x9-l { padding-bottom: 56.25%; } .aspect-ratio--9x16-l { padding-bottom: 177.77%; } .aspect-ratio--4x3-l { padding-bottom: 75%; } .aspect-ratio--3x4-l { padding-bottom: 133.33%; } .aspect-ratio--6x4-l { padding-bottom: 66.6%; } .aspect-ratio--4x6-l { padding-bottom: 150%; } .aspect-ratio--8x5-l { padding-bottom: 62.5%; } .aspect-ratio--5x8-l { padding-bottom: 160%; } .aspect-ratio--7x5-l { padding-bottom: 71.42%; } .aspect-ratio--5x7-l { padding-bottom: 140%; } .aspect-ratio--1x1-l { padding-bottom: 100%; } .aspect-ratio--object-l { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } } /* IMAGES Docs: http://tachyons.io/docs/elements/images/ */ /* Responsive images! */ img { max-width: 100%; } /* BACKGROUND SIZE Docs: http://tachyons.io/docs/themes/background-size/ Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Often used in combination with background image set as an inline style on an html element. */ .cover { background-size: cover!important; } .contain { background-size: contain!important; } @media screen and (min-width: 30em) { .cover-ns { background-size: cover!important; } .contain-ns { background-size: contain!important; } } @media screen and (min-width: 30em) and (max-width: 60em) { .cover-m { background-size: cover!important; } .contain-m { background-size: contain!important; } } @media screen and (min-width: 60em) { .cover-l { background-size: cover!important; } .contain-l { background-size: contain!important; } } /* BACKGROUND POSITION Base: bg = background Modifiers: -center = center center -top = top center -right = center right -bottom = bottom center -left = center left Media Query Extensions: -ns = not-small -m = medium -l = large */ .bg-center { background-repeat: no-repeat; background-position: center center; } .bg-top { background-repeat: no-repeat; background-position: top center; } .bg-right { background-repeat: no-repeat; background-position: center right; } .bg-bottom { background-repeat: no-repeat; background-position: bottom center; } .bg-left { background-repeat: no-repeat; background-position: center left; } @media screen and (min-width: 30em) { .bg-center-ns { background-repeat: no-repeat; background-position: center center; } .bg-top-ns { background-repeat: no-repeat; background-position: top center; } .bg-right-ns { background-repeat: no-repeat; background-position: center right; } .bg-bottom-ns { background-repeat: no-repeat; background-position: bottom center; } .bg-left-ns { background-repeat: no-repeat; background-position: center left; } } @media screen and (min-width: 30em) and (max-width: 60em) { .bg-center-m { background-repeat: no-repeat; background-position: center center; } .bg-top-m { background-repeat: no-repeat; background-position: top center; } .bg-right-m { background-repeat: no-repeat; background-position: center right; } .bg-bottom-m { background-repeat: no-repeat; background-position: bottom center; } .bg-left-m { background-repeat: no-repeat; background-position: center left; } } @media screen and (min-width: 60em) { .bg-center-l { background-repeat: no-repeat; background-position: center center; } .bg-top-l { background-repeat: no-repeat; background-position: top center; } .bg-right-l { background-repeat: no-repeat; background-position: center right; } .bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; } .bg-left-l { background-repeat: no-repeat; background-position: center left; } } /* OUTLINES Media Query Extensions: -ns = not-small -m = medium -l = large */ .outline { outline: 1px solid; } .outline-transparent { outline: 1px solid transparent; } .outline-0 { outline: 0; } @media screen and (min-width: 30em) { .outline-ns { outline: 1px solid; } .outline-transparent-ns { outline: 1px solid transparent; } .outline-0-ns { outline: 0; } } @media screen and (min-width: 30em) and (max-width: 60em) { .outline-m { outline: 1px solid; } .outline-transparent-m { outline: 1px solid transparent; } .outline-0-m { outline: 0; } } @media screen and (min-width: 60em) { .outline-l { outline: 1px solid; } .outline-transparent-l { outline: 1px solid transparent; } .outline-0-l { outline: 0; } } /* BORDERS Docs: http://tachyons.io/docs/themes/borders/ Base: b = border Modifiers: a = all t = top r = right b = bottom l = left n = none Media Query Extensions: -ns = not-small -m = medium -l = large */ .ba { border-style: solid; border-width: 1px; } .bt { border-top-style: solid; border-top-width: 1px; } .br { border-right-style: solid; border-right-width: 1px; } .bb { border-bottom-style: solid; border-bottom-width: 1px; } .bl { border-left-style: solid; border-left-width: 1px; } .bn { border-style: none; border-width: 0; } @media screen and (min-width: 30em) { .ba-ns { border-style: solid; border-width: 1px; } .bt-ns { border-top-style: solid; border-top-width: 1px; } .br-ns { border-right-style: solid; border-right-width: 1px; } .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } .bl-ns { border-left-style: solid; border-left-width: 1px; } .bn-ns { border-style: none; border-width: 0; } } @media screen and (min-width: 30em) and (max-width: 60em) { .ba-m { border-style: solid; border-width: 1px; } .bt-m { border-top-style: solid; border-top-width: 1px; } .br-m { border-right-style: solid; border-right-width: 1px; } .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } .bl-m { border-left-style: solid; border-left-width: 1px; } .bn-m { border-style: none; border-width: 0; } } @media screen and (min-width: 60em) { .ba-l { border-style: solid; border-width: 1px; } .bt-l { border-top-style: solid; border-top-width: 1px; } .br-l { border-right-style: solid; border-right-width: 1px; } .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } .bl-l { border-left-style: solid; border-left-width: 1px; } .bn-l { border-style: none; border-width: 0; } } /* BORDER COLORS Docs: http://tachyons.io/docs/themes/borders/ Border colors can be used to extend the base border classes ba,bt,bb,br,bl found in the _borders.css file. The base border class by default will set the color of the border to that of the current text color. These classes are for the cases where you desire for the text and border colors to be different. Base: b = border Modifiers: --color-name = each color variable name is also a border color name */ .b--black { border-color: #000; } .b--near-black { border-color: #2e1a69; } .b--dark-gray { border-color: #120f19; } .b--mid-gray { border-color: #686470; } .b--gray { border-color: #686470; } .b--silver { border-color: #b9b7be; } .b--light-silver { border-color: #e8e6ec; } .b--moon-gray { border-color: #e8e6ec; } .b--light-gray { border-color: #b9b7be; } .b--near-white { border-color: #fcfbf7; } .b--white { border-color: #fff; } .b--white-90 { border-color: rgba(255, 255, 255, 0.9); } .b--white-80 { border-color: rgba(255, 255, 255, 0.8); } .b--white-70 { border-color: rgba(255, 255, 255, 0.7); } .b--white-60 { border-color: rgba(255, 255, 255, 0.6); } .b--white-50 { border-color: rgba(255, 255, 255, 0.5); } .b--white-40 { border-color: rgba(255, 255, 255, 0.4); } .b--white-30 { border-color: rgba(255, 255, 255, 0.3); } .b--white-20 { border-color: rgba(255, 255, 255, 0.2); } .b--white-10 { border-color: rgba(255, 255, 255, 0.1); } .b--white-05 { border-color: rgba(255, 255, 255, 0.05); } .b--white-025 { border-color: rgba(255, 255, 255, 0.025); } .b--white-0125 { border-color: rgba(255, 255, 255, 0.0125); } .b--black-90 { border-color: rgba(0, 0, 0, 0.9); } .b--black-80 { border-color: rgba(0, 0, 0, 0.8); } .b--black-70 { border-color: rgba(0, 0, 0, 0.7); } .b--black-60 { border-color: rgba(0, 0, 0, 0.6); } .b--black-50 { border-color: rgba(0, 0, 0, 0.5); } .b--black-40 { border-color: rgba(0, 0, 0, 0.4); } .b--black-30 { border-color: rgba(0, 0, 0, 0.3); } .b--black-20 { border-color: rgba(0, 0, 0, 0.2); } .b--black-10 { border-color: rgba(0, 0, 0, 0.1); } .b--black-05 { border-color: rgba(0, 0, 0, 0.05); } .b--black-025 { border-color: rgba(0, 0, 0, 0.025); } .b--black-0125 { border-color: rgba(0, 0, 0, 0.0125); } .b--dark-red { border-color: #e7040f; } .b--red { border-color: #5a2edf; } .b--light-red { border-color: #ff725c; } .b--orange { border-color: #ff6300; } .b--gold { border-color: #ffb700; } .b--yellow { border-color: #ffb41b; } .b--light-yellow { border-color: #fbf1a9; } .b--purple { border-color: #2e1a69; } .b--light-purple { border-color: #a463f2; } .b--dark-pink { border-color: #d5008f; } .b--hot-pink { border-color: #ff41b4; } .b--pink { border-color: #ff80cc; } .b--light-pink { border-color: #ffa3d7; } .b--dark-green { border-color: #137752; } .b--green { border-color: #120f19; } .b--light-green { border-color: #9eebcf; } .b--navy { border-color: #120f19; } .b--dark-blue { border-color: #120f19; } .b--blue { border-color: #5a2edf; } .b--light-blue { border-color: #96ccff; } .b--lightest-blue { border-color: #cdecff; } .b--washed-blue { border-color: rgba(74, 144, 226, 0.1); } .b--washed-green { border-color: rgba(23, 190, 154, 0.32); } .b--washed-yellow { border-color: #fcf6d9; } .b--washed-red { border-color: #ffdfdf; } .b--transparent { border-color: transparent; } .b--inherit { border-color: inherit; } /* BORDER RADIUS Docs: http://tachyons.io/docs/themes/border-radius/ Base: br = border-radius Modifiers: 0 = 0/none 1 = 1st step in scale 2 = 2nd step in scale 3 = 3rd step in scale 4 = 4th step in scale Literal values: -100 = 100% -pill = 9999px Media Query Extensions: -ns = not-small -m = medium -l = large */ .br0 { border-radius: 0 } .br1 { border-radius: 0.125rem; } .br2 { border-radius: 0.25rem; } .br3 { border-radius: 0.5rem; } .br4 { border-radius: 1rem; } .br-100 { border-radius: 100%; } .br-pill { border-radius: 9999px; } .br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; } @media screen and (min-width: 30em) { .br0-ns { border-radius: 0 } .br1-ns { border-radius: 0.125rem; } .br2-ns { border-radius: 0.25rem; } .br3-ns { border-radius: 0.5rem; } .br4-ns { border-radius: 1rem; } .br-100-ns { border-radius: 100%; } .br-pill-ns { border-radius: 9999px; } .br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left-ns { border-top-right-radius: 0; border-bottom-right-radius: 0; } } @media screen and (min-width: 30em) and (max-width: 60em) { .br0-m { border-radius: 0 } .br1-m { border-radius: 0.125rem; } .br2-m { border-radius: 0.25rem; } .br3-m { border-radius: 0.5rem; } .br4-m { border-radius: 1rem; } .br-100-m { border-radius: 100%; } .br-pill-m { border-radius: 9999px; } .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; } } @media screen and (min-width: 60em) { .br0-l { border-radius: 0 } .br1-l { border-radius: 0.125rem; } .br2-l { border-radius: 0.25rem; } .br3-l { border-radius: 0.5rem; } .br4-l { border-radius: 1rem; } .br-100-l { border-radius: 100%; } .br-pill-l { border-radius: 9999px; } .br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; } } /* BORDER STYLES Docs: http://tachyons.io/docs/themes/borders/ Depends on base border module in _borders.css Base: b = border-style Modifiers: --none = none --dotted = dotted --dashed = dashed --solid = solid Media Query Extensions: -ns = not-small -m = medium -l = large */ .b--dotted { border-style: dotted; } .b--dashed { border-style: dashed; } .b--solid { border-style: solid; } .b--none { border-style: none; } @media screen and (min-width: 30em) { .b--dotted-ns { border-style: dotted; } .b--dashed-ns { border-style: dashed; } .b--solid-ns { border-style: solid; } .b--none-ns { border-style: none; } } @media screen and (min-width: 30em) and (max-width: 60em) { .b--dotted-m { border-style: dotted; } .b--dashed-m { border-style: dashed; } .b--solid-m { border-style: solid; } .b--none-m { border-style: none; } } @media screen and (min-width: 60em) { .b--dotted-l { border-style: dotted; } .b--dashed-l { border-style: dashed; } .b--solid-l { border-style: solid; } .b--none-l { border-style: none; } } /* BORDER WIDTHS Docs: http://tachyons.io/docs/themes/borders/ Base: bw = border-width Modifiers: 0 = 0 width border 1 = 1st step in border-width scale 2 = 2nd step in border-width scale 3 = 3rd step in border-width scale 4 = 4th step in border-width scale 5 = 5th step in border-width scale Media Query Extensions: -ns = not-small -m = medium -l = large */ .bw0 { border-width: 0; } .bw1 { border-width: 0.125rem; } .bw2 { border-width: 0.25rem; } .bw3 { border-width: 0.5rem; } .bw4 { border-width: 1rem; } .bw5 { border-width: 2rem; } /* Resets */ .bt-0 { border-top-width: 0 } .br-0 { border-right-width: 0 } .bb-0 { border-bottom-width: 0 } .bl-0 { border-left-width: 0 } @media screen and (min-width: 30em) { .bw0-ns { border-width: 0; } .bw1-ns { border-width: 0.125rem; } .bw2-ns { border-width: 0.25rem; } .bw3-ns { border-width: 0.5rem; } .bw4-ns { border-width: 1rem; } .bw5-ns { border-width: 2rem; } .bt-0-ns { border-top-width: 0 } .br-0-ns { border-right-width: 0 } .bb-0-ns { border-bottom-width: 0 } .bl-0-ns { border-left-width: 0 } } @media screen and (min-width: 30em) and (max-width: 60em) { .bw0-m { border-width: 0; } .bw1-m { border-width: 0.125rem; } .bw2-m { border-width: 0.25rem; } .bw3-m { border-width: 0.5rem; } .bw4-m { border-width: 1rem; } .bw5-m { border-width: 2rem; } .bt-0-m { border-top-width: 0 } .br-0-m { border-right-width: 0 } .bb-0-m { border-bottom-width: 0 } .bl-0-m { border-left-width: 0 } } @media screen and (min-width: 60em) { .bw0-l { border-width: 0; } .bw1-l { border-width: 0.125rem; } .bw2-l { border-width: 0.25rem; } .bw3-l { border-width: 0.5rem; } .bw4-l { border-width: 1rem; } .bw5-l { border-width: 2rem; } .bt-0-l { border-top-width: 0 } .br-0-l { border-right-width: 0 } .bb-0-l { border-bottom-width: 0 } .bl-0-l { border-left-width: 0 } } /* BOX-SHADOW Docs: http://tachyons.io/docs/themes/box-shadow/ Media Query Extensions: -ns = not-small -m = medium -l = large */ .shadow-1 { -webkit-box-shadow: inset 0 1px 3px 0 rgba(106, 106, 106, 0.15); box-shadow: inset 0 1px 3px 0 rgba(106, 106, 106, 0.15); } .shadow-2 { -webkit-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2); } .shadow-3 { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } .shadow-4 { -webkit-box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.12); box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.12); } .shadow-5 { -webkit-box-shadow: 14px 14px 42px 5px rgba(0, 0, 0, 0.18); box-shadow: 14px 14px 42px 5px rgba(0, 0, 0, 0.18); } @media screen and (min-width: 30em) { .shadow-1-ns { -webkit-box-shadow: inset 0 1px 3px 0 rgba(106, 106, 106, 0.15); box-shadow: inset 0 1px 3px 0 rgba(106, 106, 106, 0.15); } .shadow-2-ns { -webkit-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2); } .shadow-3-ns { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } .shadow-4-ns { -webkit-box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.12); box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.12); } .shadow-5-ns { -webkit-box-shadow: 14px 14px 42px 5px rgba(0, 0, 0, 0.18); box-shadow: 14px 14px 42px 5px rgba(0, 0, 0, 0.18); } } @media screen and (min-width: 30em) and (max-width: 60em) { .shadow-1-m { -webkit-box-shadow: inset 0 1px 3px 0 rgba(106, 106, 106, 0.15); box-shadow: inset 0 1px 3px 0 rgba(106, 106, 106, 0.15); } .shadow-2-m { -webkit-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2); } .shadow-3-m { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } .shadow-4-m { -webkit-box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.12); box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.12); } .shadow-5-m { -webkit-box-shadow: 14px 14px 42px 5px rgba(0, 0, 0, 0.18); box-shadow: 14px 14px 42px 5px rgba(0, 0, 0, 0.18); } } @media screen and (min-width: 60em) { .shadow-1-l { -webkit-box-shadow: inset 0 1px 3px 0 rgba(106, 106, 106, 0.15); box-shadow: inset 0 1px 3px 0 rgba(106, 106, 106, 0.15); } .shadow-2-l { -webkit-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2); } .shadow-3-l { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } .shadow-4-l { -webkit-box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.12); box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.12); } .shadow-5-l { -webkit-box-shadow: 14px 14px 42px 5px rgba(0, 0, 0, 0.18); box-shadow: 14px 14px 42px 5px rgba(0, 0, 0, 0.18); } } /* CODE */ .pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; } /* COORDINATES Docs: http://tachyons.io/docs/layout/position/ Use in combination with the position module. Base: top bottom right left Modifiers: -0 = literal value 0 -1 = literal value 1 -2 = literal value 2 --1 = literal value -1 --2 = literal value -2 Media Query Extensions: -ns = not-small -m = medium -l = large */ .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .top-1 { top: 1rem; } .right-1 { right: 1rem; } .bottom-1 { bottom: 1rem; } .left-1 { left: 1rem; } .top-2 { top: 2rem; } .right-2 { right: 2rem; } .bottom-2 { bottom: 2rem; } .left-2 { left: 2rem; } .top--1 { top: -1rem; } .right--1 { right: -1rem; } .bottom--1 { bottom: -1rem; } .left--1 { left: -1rem; } .top--2 { top: -2rem; } .right--2 { right: -2rem; } .bottom--2 { bottom: -2rem; } .left--2 { left: -2rem; } .absolute--fill { top: 0; right: 0; bottom: 0; left: 0; } @media screen and (min-width: 30em) { .top-0-ns { top: 0; } .left-0-ns { left: 0; } .right-0-ns { right: 0; } .bottom-0-ns { bottom: 0; } .top-1-ns { top: 1rem; } .left-1-ns { left: 1rem; } .right-1-ns { right: 1rem; } .bottom-1-ns { bottom: 1rem; } .top-2-ns { top: 2rem; } .left-2-ns { left: 2rem; } .right-2-ns { right: 2rem; } .bottom-2-ns { bottom: 2rem; } .top--1-ns { top: -1rem; } .right--1-ns { right: -1rem; } .bottom--1-ns { bottom: -1rem; } .left--1-ns { left: -1rem; } .top--2-ns { top: -2rem; } .right--2-ns { right: -2rem; } .bottom--2-ns { bottom: -2rem; } .left--2-ns { left: -2rem; } .absolute--fill-ns { top: 0; right: 0; bottom: 0; left: 0; } } @media screen and (min-width: 30em) and (max-width: 60em) { .top-0-m { top: 0; } .left-0-m { left: 0; } .right-0-m { right: 0; } .bottom-0-m { bottom: 0; } .top-1-m { top: 1rem; } .left-1-m { left: 1rem; } .right-1-m { right: 1rem; } .bottom-1-m { bottom: 1rem; } .top-2-m { top: 2rem; } .left-2-m { left: 2rem; } .right-2-m { right: 2rem; } .bottom-2-m { bottom: 2rem; } .top--1-m { top: -1rem; } .right--1-m { right: -1rem; } .bottom--1-m { bottom: -1rem; } .left--1-m { left: -1rem; } .top--2-m { top: -2rem; } .right--2-m { right: -2rem; } .bottom--2-m { bottom: -2rem; } .left--2-m { left: -2rem; } .absolute--fill-m { top: 0; right: 0; bottom: 0; left: 0; } } @media screen and (min-width: 60em) { .top-0-l { top: 0; } .left-0-l { left: 0; } .right-0-l { right: 0; } .bottom-0-l { bottom: 0; } .top-1-l { top: 1rem; } .left-1-l { left: 1rem; } .right-1-l { right: 1rem; } .bottom-1-l { bottom: 1rem; } .top-2-l { top: 2rem; } .left-2-l { left: 2rem; } .right-2-l { right: 2rem; } .bottom-2-l { bottom: 2rem; } .top--1-l { top: -1rem; } .right--1-l { right: -1rem; } .bottom--1-l { bottom: -1rem; } .left--1-l { left: -1rem; } .top--2-l { top: -2rem; } .right--2-l { right: -2rem; } .bottom--2-l { bottom: -2rem; } .left--2-l { left: -2rem; } .absolute--fill-l { top: 0; right: 0; bottom: 0; left: 0; } } /* CLEARFIX http://tachyons.io/docs/layout/clearfix/ */ /* Nicolas Gallaghers Clearfix solution Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .cl { clear: left; } .cr { clear: right; } .cb { clear: both; } .cn { clear: none; } @media screen and (min-width: 30em) { .cl-ns { clear: left; } .cr-ns { clear: right; } .cb-ns { clear: both; } .cn-ns { clear: none; } } @media screen and (min-width: 30em) and (max-width: 60em) { .cl-m { clear: left; } .cr-m { clear: right; } .cb-m { clear: both; } .cn-m { clear: none; } } @media screen and (min-width: 60em) { .cl-l { clear: left; } .cr-l { clear: right; } .cb-l { clear: both; } .cn-l { clear: none; } } /* DISPLAY Docs: http://tachyons.io/docs/layout/display Base: d = display Modifiers: n = none b = block ib = inline-block it = inline-table t = table tc = table-cell tr = table-row tcol = table-column tcolg = table-column-group Media Query Extensions: -ns = not-small -m = medium -l = large */ .dn { display: none; } .di { display: inline; } .db { display: block; } .dib { display: inline-block; } .dit { display: inline-table; } .dt { display: table; } .dtc { display: table-cell; } .dt-row { display: table-row; } .dt-row-group { display: table-row-group; } .dt-column { display: table-column; } .dt-column-group { display: table-column-group; } /* This will set table to full width and then all cells will be equal width */ .dt--fixed { table-layout: fixed; width: 100%; } @media screen and (min-width: 30em) { .dn-ns { display: none; } .di-ns { display: inline; } .db-ns { display: block; } .dib-ns { display: inline-block; } .dit-ns { display: inline-table; } .dt-ns { display: table; } .dtc-ns { display: table-cell; } .dt-row-ns { display: table-row; } .dt-row-group-ns { display: table-row-group; } .dt-column-ns { display: table-column; } .dt-column-group-ns { display: table-column-group; } .dt--fixed-ns { table-layout: fixed; width: 100%; } } @media screen and (min-width: 30em) and (max-width: 60em) { .dn-m { display: none; } .di-m { display: inline; } .db-m { display: block; } .dib-m { display: inline-block; } .dit-m { display: inline-table; } .dt-m { display: table; } .dtc-m { display: table-cell; } .dt-row-m { display: table-row; } .dt-row-group-m { display: table-row-group; } .dt-column-m { display: table-column; } .dt-column-group-m { display: table-column-group; } .dt--fixed-m { table-layout: fixed; width: 100%; } } @media screen and (min-width: 60em) { .dn-l { display: none; } .di-l { display: inline; } .db-l { display: block; } .dib-l { display: inline-block; } .dit-l { display: inline-table; } .dt-l { display: table; } .dtc-l { display: table-cell; } .dt-row-l { display: table-row; } .dt-row-group-l { display: table-row-group; } .dt-column-l { display: table-column; } .dt-column-group-l { display: table-column-group; } .dt--fixed-l { table-layout: fixed; width: 100%; } } /* FLEXBOX Media Query Extensions: -ns = not-small -m = medium -l = large */ .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } /* 1. Fix for Chrome 44 bug. * https://code.google.com/p/chromium/issues/detail?id=506893 */ .flex-auto { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .self-start { -ms-flex-item-align: start; align-self: flex-start; } .self-end { -ms-flex-item-align: end; align-self: flex-end; } .self-center { -ms-flex-item-align: center; align-self: center; } .self-baseline { -ms-flex-item-align: baseline; align-self: baseline; } .self-stretch { -ms-flex-item-align: stretch; align-self: stretch; } .justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify-around { -ms-flex-pack: distribute; justify-content: space-around; } .content-start { -ms-flex-line-pack: start; align-content: flex-start; } .content-end { -ms-flex-line-pack: end; align-content: flex-end; } .content-center { -ms-flex-line-pack: center; align-content: center; } .content-between { -ms-flex-line-pack: justify; align-content: space-between; } .content-around { -ms-flex-line-pack: distribute; align-content: space-around; } .content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; } .order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } .flex-grow-0 { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .flex-grow-1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .flex-shrink-0 { -ms-flex-negative: 0; flex-shrink: 0; } .flex-shrink-1 { -ms-flex-negative: 1; flex-shrink: 1; } @media screen and (min-width: 30em) { .flex-ns { display: -webkit-box; display: -ms-flexbox; display: flex; } .inline-flex-ns { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .flex-auto-ns { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-none-ns { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .flex-column-ns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-row-ns { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-nowrap-ns { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-wrap-reverse-ns { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .flex-column-reverse-ns { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .flex-row-reverse-ns { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .items-start-ns { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .items-end-ns { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .items-center-ns { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .self-start-ns { -ms-flex-item-align: start; align-self: flex-start; } .self-end-ns { -ms-flex-item-align: end; align-self: flex-end; } .self-center-ns { -ms-flex-item-align: center; align-self: center; } .self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; } .self-stretch-ns { -ms-flex-item-align: stretch; align-self: stretch; } .justify-start-ns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify-end-ns { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify-center-ns { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-between-ns { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify-around-ns { -ms-flex-pack: distribute; justify-content: space-around; } .content-start-ns { -ms-flex-line-pack: start; align-content: flex-start; } .content-end-ns { -ms-flex-line-pack: end; align-content: flex-end; } .content-center-ns { -ms-flex-line-pack: center; align-content: center; } .content-between-ns { -ms-flex-line-pack: justify; align-content: space-between; } .content-around-ns { -ms-flex-line-pack: distribute; align-content: space-around; } .content-stretch-ns { -ms-flex-line-pack: stretch; align-content: stretch; } .order-0-ns { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-1-ns { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-2-ns { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-3-ns { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-4-ns { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-5-ns { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-6-ns { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-7-ns { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-8-ns { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-last-ns { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } .flex-grow-0-ns { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .flex-grow-1-ns { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .flex-shrink-0-ns { -ms-flex-negative: 0; flex-shrink: 0; } .flex-shrink-1-ns { -ms-flex-negative: 1; flex-shrink: 1; } } @media screen and (min-width: 30em) and (max-width: 60em) { .flex-m { display: -webkit-box; display: -ms-flexbox; display: flex; } .inline-flex-m { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .flex-auto-m { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-none-m { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .flex-column-m { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-row-m { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-nowrap-m { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-wrap-reverse-m { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .flex-column-reverse-m { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .flex-row-reverse-m { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .items-start-m { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .items-end-m { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .items-center-m { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .self-start-m { -ms-flex-item-align: start; align-self: flex-start; } .self-end-m { -ms-flex-item-align: end; align-self: flex-end; } .self-center-m { -ms-flex-item-align: center; align-self: center; } .self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; } .self-stretch-m { -ms-flex-item-align: stretch; align-self: stretch; } .justify-start-m { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify-end-m { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify-center-m { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-between-m { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify-around-m { -ms-flex-pack: distribute; justify-content: space-around; } .content-start-m { -ms-flex-line-pack: start; align-content: flex-start; } .content-end-m { -ms-flex-line-pack: end; align-content: flex-end; } .content-center-m { -ms-flex-line-pack: center; align-content: center; } .content-between-m { -ms-flex-line-pack: justify; align-content: space-between; } .content-around-m { -ms-flex-line-pack: distribute; align-content: space-around; } .content-stretch-m { -ms-flex-line-pack: stretch; align-content: stretch; } .order-0-m { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-1-m { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-2-m { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-3-m { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-4-m { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-5-m { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-6-m { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-7-m { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-8-m { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-last-m { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } .flex-grow-0-m { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .flex-grow-1-m { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .flex-shrink-0-m { -ms-flex-negative: 0; flex-shrink: 0; } .flex-shrink-1-m { -ms-flex-negative: 1; flex-shrink: 1; } } @media screen and (min-width: 60em) { .flex-l { display: -webkit-box; display: -ms-flexbox; display: flex; } .inline-flex-l { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .flex-auto-l { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-none-l { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .flex-column-l { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-row-l { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-nowrap-l { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-wrap-reverse-l { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .flex-column-reverse-l { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .flex-row-reverse-l { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .items-start-l { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .items-end-l { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .items-center-l { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .self-start-l { -ms-flex-item-align: start; align-self: flex-start; } .self-end-l { -ms-flex-item-align: end; align-self: flex-end; } .self-center-l { -ms-flex-item-align: center; align-self: center; } .self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; } .self-stretch-l { -ms-flex-item-align: stretch; align-self: stretch; } .justify-start-l { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify-end-l { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify-center-l { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-between-l { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify-around-l { -ms-flex-pack: distribute; justify-content: space-around; } .content-start-l { -ms-flex-line-pack: start; align-content: flex-start; } .content-end-l { -ms-flex-line-pack: end; align-content: flex-end; } .content-center-l { -ms-flex-line-pack: center; align-content: center; } .content-between-l { -ms-flex-line-pack: justify; align-content: space-between; } .content-around-l { -ms-flex-line-pack: distribute; align-content: space-around; } .content-stretch-l { -ms-flex-line-pack: stretch; align-content: stretch; } .order-0-l { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-1-l { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-2-l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-3-l { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-4-l { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-5-l { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-6-l { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-7-l { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-8-l { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-last-l { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } .flex-grow-0-l { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .flex-grow-1-l { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .flex-shrink-0-l { -ms-flex-negative: 0; flex-shrink: 0; } .flex-shrink-1-l { -ms-flex-negative: 1; flex-shrink: 1; } } /* FLOATS http://tachyons.io/docs/layout/floats/ 1. Floated elements are automatically rendered as block level elements. Setting floats to display inline will fix the double margin bug in ie6. You know... just in case. 2. Don't forget to clearfix your floats with .cf Base: f = float Modifiers: l = left r = right n = none Media Query Extensions: -ns = not-small -m = medium -l = large */ .fl { float: left; _display: inline; } .fr { float: right; _display: inline; } .fn { float: none; } @media screen and (min-width: 30em) { .fl-ns { float: left; _display: inline; } .fr-ns { float: right; _display: inline; } .fn-ns { float: none; } } @media screen and (min-width: 30em) and (max-width: 60em) { .fl-m { float: left; _display: inline; } .fr-m { float: right; _display: inline; } .fn-m { float: none; } } @media screen and (min-width: 60em) { .fl-l { float: left; _display: inline; } .fr-l { float: right; _display: inline; } .fn-l { float: none; } } /* FONT FAMILY GROUPS Docs: http://tachyons.io/docs/typography/font-family/ */ .sans-serif { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .serif { font-family: georgia, serif; } .system-sans-serif { font-family: sans-serif; } .system-serif { font-family: serif; } /* Monospaced Typefaces (for code) */ /* From http://cssfontstack.com */ code, .code { font-family: Consolas, monaco, monospace; } .courier { font-family: 'Courier Next', courier, monospace; } /* Sans-Serif Typefaces */ .helvetica { font-family: 'helvetica neue', helvetica, sans-serif; } .avenir { font-family: 'avenir next', avenir, sans-serif; } /* Serif Typefaces */ .athelas { font-family: athelas, georgia, serif; } .georgia { font-family: georgia, serif; } .times { font-family: times, serif; } .bodoni { font-family: "Bodoni MT", serif; } .calisto { font-family: "Calisto MT", serif; } .garamond { font-family: garamond, serif; } .baskerville { font-family: baskerville, serif; } /* FONT STYLE Docs: http://tachyons.io/docs/typography/font-style/ Media Query Extensions: -ns = not-small -m = medium -l = large */ .i { font-style: italic; } .fs-normal { font-style: normal; } @media screen and (min-width: 30em) { .i-ns { font-style: italic; } .fs-normal-ns { font-style: normal; } } @media screen and (min-width: 30em) and (max-width: 60em) { .i-m { font-style: italic; } .fs-normal-m { font-style: normal; } } @media screen and (min-width: 60em) { .i-l { font-style: italic; } .fs-normal-l { font-style: normal; } } /* FONT WEIGHT Docs: http://tachyons.io/docs/typography/font-weight/ Base fw = font-weight Modifiers: 1 = literal value 100 2 = literal value 200 3 = literal value 300 4 = literal value 400 5 = literal value 500 6 = literal value 600 7 = literal value 700 8 = literal value 800 9 = literal value 900 Media Query Extensions: -ns = not-small -m = medium -l = large */ .normal { font-weight: normal; } .b { font-weight: bold; } .fw1 { font-weight: 100; } .fw2 { font-weight: 200; } .fw3 { font-weight: 300; } .fw4 { font-weight: 400; } .fw5 { font-weight: 500; } .fw6 { font-weight: 600; } .fw7 { font-weight: 700; } .fw8 { font-weight: 800; } .fw9 { font-weight: 900; } @media screen and (min-width: 30em) { .normal-ns { font-weight: normal; } .b-ns { font-weight: bold; } .fw1-ns { font-weight: 100; } .fw2-ns { font-weight: 200; } .fw3-ns { font-weight: 300; } .fw4-ns { font-weight: 400; } .fw5-ns { font-weight: 500; } .fw6-ns { font-weight: 600; } .fw7-ns { font-weight: 700; } .fw8-ns { font-weight: 800; } .fw9-ns { font-weight: 900; } } @media screen and (min-width: 30em) and (max-width: 60em) { .normal-m { font-weight: normal; } .b-m { font-weight: bold; } .fw1-m { font-weight: 100; } .fw2-m { font-weight: 200; } .fw3-m { font-weight: 300; } .fw4-m { font-weight: 400; } .fw5-m { font-weight: 500; } .fw6-m { font-weight: 600; } .fw7-m { font-weight: 700; } .fw8-m { font-weight: 800; } .fw9-m { font-weight: 900; } } @media screen and (min-width: 60em) { .normal-l { font-weight: normal; } .b-l { font-weight: bold; } .fw1-l { font-weight: 100; } .fw2-l { font-weight: 200; } .fw3-l { font-weight: 300; } .fw4-l { font-weight: 400; } .fw5-l { font-weight: 500; } .fw6-l { font-weight: 600; } .fw7-l { font-weight: 700; } .fw8-l { font-weight: 800; } .fw9-l { font-weight: 900; } } /* FORMS */ .input-reset { -webkit-appearance: none; -moz-appearance: none; } .button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; } /* HEIGHTS Docs: http://tachyons.io/docs/layout/heights/ Base: h = height min-h = min-height min-vh = min-height vertical screen height vh = vertical screen height Modifiers 1 = 1st step in height scale 2 = 2nd step in height scale 3 = 3rd step in height scale 4 = 4th step in height scale 5 = 5th step in height scale -25 = literal value 25% -50 = literal value 50% -75 = literal value 75% -100 = literal value 100% -auto = string value of auto -inherit = string value of inherit Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Height Scale */ .h1 { height: 1rem; } .h2 { height: 2rem; } .h3 { height: 4rem; } .h4 { height: 8rem; } .h5 { height: 16rem; } /* Height Percentages - Based off of height of parent */ .h-25 { height: 25%; } .h-50 { height: 50%; } .h-75 { height: 75%; } .h-100 { height: 100%; } .min-h-100 { min-height: 100%; } /* Screen Height Percentage */ .vh-25 { height: 25vh; } .vh-50 { height: 50vh; } .vh-75 { height: 75vh; } .vh-100 { height: 100vh; } .min-vh-100 { min-height: 100vh; } /* String Properties */ .h-auto { height: auto; } .h-inherit { height: inherit; } @media screen and (min-width: 30em) { .h1-ns { height: 1rem; } .h2-ns { height: 2rem; } .h3-ns { height: 4rem; } .h4-ns { height: 8rem; } .h5-ns { height: 16rem; } .h-25-ns { height: 25%; } .h-50-ns { height: 50%; } .h-75-ns { height: 75%; } .h-100-ns { height: 100%; } .min-h-100-ns { min-height: 100%; } .vh-25-ns { height: 25vh; } .vh-50-ns { height: 50vh; } .vh-75-ns { height: 75vh; } .vh-100-ns { height: 100vh; } .min-vh-100-ns { min-height: 100vh; } .h-auto-ns { height: auto; } .h-inherit-ns { height: inherit; } } @media screen and (min-width: 30em) and (max-width: 60em) { .h1-m { height: 1rem; } .h2-m { height: 2rem; } .h3-m { height: 4rem; } .h4-m { height: 8rem; } .h5-m { height: 16rem; } .h-25-m { height: 25%; } .h-50-m { height: 50%; } .h-75-m { height: 75%; } .h-100-m { height: 100%; } .min-h-100-m { min-height: 100%; } .vh-25-m { height: 25vh; } .vh-50-m { height: 50vh; } .vh-75-m { height: 75vh; } .vh-100-m { height: 100vh; } .min-vh-100-m { min-height: 100vh; } .h-auto-m { height: auto; } .h-inherit-m { height: inherit; } } @media screen and (min-width: 60em) { .h1-l { height: 1rem; } .h2-l { height: 2rem; } .h3-l { height: 4rem; } .h4-l { height: 8rem; } .h5-l { height: 16rem; } .h-25-l { height: 25%; } .h-50-l { height: 50%; } .h-75-l { height: 75%; } .h-100-l { height: 100%; } .min-h-100-l { min-height: 100%; } .vh-25-l { height: 25vh; } .vh-50-l { height: 50vh; } .vh-75-l { height: 75vh; } .vh-100-l { height: 100vh; } .min-vh-100-l { min-height: 100vh; } .h-auto-l { height: auto; } .h-inherit-l { height: inherit; } } /* LETTER SPACING Docs: http://tachyons.io/docs/typography/tracking/ Media Query Extensions: -ns = not-small -m = medium -l = large */ .tracked { letter-spacing: 0.1em; } .tracked-tight { letter-spacing: -0.05em; } .tracked-mega { letter-spacing: 0.17em; } @media screen and (min-width: 30em) { .tracked-ns { letter-spacing: 0.1em; } .tracked-tight-ns { letter-spacing: -0.05em; } .tracked-mega-ns { letter-spacing: 0.17em; } } @media screen and (min-width: 30em) and (max-width: 60em) { .tracked-m { letter-spacing: 0.1em; } .tracked-tight-m { letter-spacing: -0.05em; } .tracked-mega-m { letter-spacing: 0.17em; } } @media screen and (min-width: 60em) { .tracked-l { letter-spacing: 0.1em; } .tracked-tight-l { letter-spacing: -0.05em; } .tracked-mega-l { letter-spacing: 0.17em; } } /* LINE HEIGHT / LEADING Docs: http://tachyons.io/docs/typography/line-height Media Query Extensions: -ns = not-small -m = medium -l = large */ .lh-solid { line-height: 1; } .lh-title { line-height: 1.25; } .lh-copy { line-height: 1.5; } @media screen and (min-width: 30em) { .lh-solid-ns { line-height: 1; } .lh-title-ns { line-height: 1.25; } .lh-copy-ns { line-height: 1.5; } } @media screen and (min-width: 30em) and (max-width: 60em) { .lh-solid-m { line-height: 1; } .lh-title-m { line-height: 1.25; } .lh-copy-m { line-height: 1.5; } } @media screen and (min-width: 60em) { .lh-solid-l { line-height: 1; } .lh-title-l { line-height: 1.25; } .lh-copy-l { line-height: 1.5; } } /* LINKS Docs: http://tachyons.io/docs/elements/links/ */ .link { text-decoration: none; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } .link:link, .link:visited { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } .link:hover { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } .link:active { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } .link:focus { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; outline: 1px dotted currentColor; } /* LISTS http://tachyons.io/docs/elements/lists/ */ .list { list-style-type: none; } /* MAX WIDTHS Docs: http://tachyons.io/docs/layout/max-widths/ Base: mw = max-width Modifiers 1 = 1st step in width scale 2 = 2nd step in width scale 3 = 3rd step in width scale 4 = 4th step in width scale 5 = 5th step in width scale 6 = 6st step in width scale 7 = 7nd step in width scale 8 = 8rd step in width scale 9 = 9th step in width scale -100 = literal value 100% -none = string value none Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Max Width Percentages */ .mw-100 { max-width: 100%; } /* Max Width Scale */ .mw1 { max-width: 1rem; } .mw2 { max-width: 2rem; } .mw3 { max-width: 4rem; } .mw4 { max-width: 8rem; } .mw5 { max-width: 16rem; } .mw6 { max-width: 32rem; } .mw7 { max-width: 48rem; } .mw8 { max-width: 64rem; } .mw9 { max-width: 96rem; } /* Max Width String Properties */ .mw-none { max-width: none; } @media screen and (min-width: 30em) { .mw-100-ns { max-width: 100%; } .mw1-ns { max-width: 1rem; } .mw2-ns { max-width: 2rem; } .mw3-ns { max-width: 4rem; } .mw4-ns { max-width: 8rem; } .mw5-ns { max-width: 16rem; } .mw6-ns { max-width: 32rem; } .mw7-ns { max-width: 48rem; } .mw8-ns { max-width: 64rem; } .mw9-ns { max-width: 96rem; } .mw-none-ns { max-width: none; } } @media screen and (min-width: 30em) and (max-width: 60em) { .mw-100-m { max-width: 100%; } .mw1-m { max-width: 1rem; } .mw2-m { max-width: 2rem; } .mw3-m { max-width: 4rem; } .mw4-m { max-width: 8rem; } .mw5-m { max-width: 16rem; } .mw6-m { max-width: 32rem; } .mw7-m { max-width: 48rem; } .mw8-m { max-width: 64rem; } .mw9-m { max-width: 96rem; } .mw-none-m { max-width: none; } } @media screen and (min-width: 60em) { .mw-100-l { max-width: 100%; } .mw1-l { max-width: 1rem; } .mw2-l { max-width: 2rem; } .mw3-l { max-width: 4rem; } .mw4-l { max-width: 8rem; } .mw5-l { max-width: 16rem; } .mw6-l { max-width: 32rem; } .mw7-l { max-width: 48rem; } .mw8-l { max-width: 64rem; } .mw9-l { max-width: 96rem; } .mw-none-l { max-width: none; } } /* WIDTHS Docs: http://tachyons.io/docs/layout/widths/ Base: w = width Modifiers 1 = 1st step in width scale 2 = 2nd step in width scale 3 = 3rd step in width scale 4 = 4th step in width scale 5 = 5th step in width scale -10 = literal value 10% -20 = literal value 20% -25 = literal value 25% -30 = literal value 30% -33 = literal value 33% -34 = literal value 34% -40 = literal value 40% -50 = literal value 50% -60 = literal value 60% -70 = literal value 70% -75 = literal value 75% -80 = literal value 80% -90 = literal value 90% -100 = literal value 100% -third = 100% / 3 (Not supported in opera mini or IE8) -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) -auto = string value auto Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Width Scale */ .w1 { width: 1rem; } .w2 { width: 2rem; } .w3 { width: 4rem; } .w4 { width: 8rem; } .w5 { width: 16rem; } .w-10 { width: 10%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-33 { width: 33%; } .w-34 { width: 34%; } .w-40 { width: 40%; } .w-50 { width: 50%; } .w-60 { width: 60%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-90 { width: 90%; } .w-100 { width: 100%; } .w-third { width: calc(100% / 3); } .w-two-thirds { width: calc(100% / 1.5); } .w-auto { width: auto; } @media screen and (min-width: 30em) { .w1-ns { width: 1rem; } .w2-ns { width: 2rem; } .w3-ns { width: 4rem; } .w4-ns { width: 8rem; } .w5-ns { width: 16rem; } .w-10-ns { width: 10%; } .w-20-ns { width: 20%; } .w-25-ns { width: 25%; } .w-30-ns { width: 30%; } .w-33-ns { width: 33%; } .w-34-ns { width: 34%; } .w-40-ns { width: 40%; } .w-50-ns { width: 50%; } .w-60-ns { width: 60%; } .w-70-ns { width: 70%; } .w-75-ns { width: 75%; } .w-80-ns { width: 80%; } .w-90-ns { width: 90%; } .w-100-ns { width: 100%; } .w-third-ns { width: calc(100% / 3); } .w-two-thirds-ns { width: calc(100% / 1.5); } .w-auto-ns { width: auto; } } @media screen and (min-width: 30em) and (max-width: 60em) { .w1-m { width: 1rem; } .w2-m { width: 2rem; } .w3-m { width: 4rem; } .w4-m { width: 8rem; } .w5-m { width: 16rem; } .w-10-m { width: 10%; } .w-20-m { width: 20%; } .w-25-m { width: 25%; } .w-30-m { width: 30%; } .w-33-m { width: 33%; } .w-34-m { width: 34%; } .w-40-m { width: 40%; } .w-50-m { width: 50%; } .w-60-m { width: 60%; } .w-70-m { width: 70%; } .w-75-m { width: 75%; } .w-80-m { width: 80%; } .w-90-m { width: 90%; } .w-100-m { width: 100%; } .w-third-m { width: calc(100% / 3); } .w-two-thirds-m { width: calc(100% / 1.5); } .w-auto-m { width: auto; } } @media screen and (min-width: 60em) { .w1-l { width: 1rem; } .w2-l { width: 2rem; } .w3-l { width: 4rem; } .w4-l { width: 8rem; } .w5-l { width: 16rem; } .w-10-l { width: 10%; } .w-20-l { width: 20%; } .w-25-l { width: 25%; } .w-30-l { width: 30%; } .w-33-l { width: 33%; } .w-34-l { width: 34%; } .w-40-l { width: 40%; } .w-50-l { width: 50%; } .w-60-l { width: 60%; } .w-70-l { width: 70%; } .w-75-l { width: 75%; } .w-80-l { width: 80%; } .w-90-l { width: 90%; } .w-100-l { width: 100%; } .w-third-l { width: calc(100% / 3); } .w-two-thirds-l { width: calc(100% / 1.5); } .w-auto-l { width: auto; } } /* OVERFLOW Media Query Extensions: -ns = not-small -m = medium -l = large */ .overflow-visible { overflow: visible; } .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-auto { overflow: auto; } .overflow-x-visible { overflow-x: visible; } .overflow-x-hidden { overflow-x: hidden; } .overflow-x-scroll { overflow-x: scroll; } .overflow-x-auto { overflow-x: auto; } .overflow-y-visible { overflow-y: visible; } .overflow-y-hidden { overflow-y: hidden; } .overflow-y-scroll { overflow-y: scroll; } .overflow-y-auto { overflow-y: auto; } @media screen and (min-width: 30em) { .overflow-visible-ns { overflow: visible; } .overflow-hidden-ns { overflow: hidden; } .overflow-scroll-ns { overflow: scroll; } .overflow-auto-ns { overflow: auto; } .overflow-x-visible-ns { overflow-x: visible; } .overflow-x-hidden-ns { overflow-x: hidden; } .overflow-x-scroll-ns { overflow-x: scroll; } .overflow-x-auto-ns { overflow-x: auto; } .overflow-y-visible-ns { overflow-y: visible; } .overflow-y-hidden-ns { overflow-y: hidden; } .overflow-y-scroll-ns { overflow-y: scroll; } .overflow-y-auto-ns { overflow-y: auto; } } @media screen and (min-width: 30em) and (max-width: 60em) { .overflow-visible-m { overflow: visible; } .overflow-hidden-m { overflow: hidden; } .overflow-scroll-m { overflow: scroll; } .overflow-auto-m { overflow: auto; } .overflow-x-visible-m { overflow-x: visible; } .overflow-x-hidden-m { overflow-x: hidden; } .overflow-x-scroll-m { overflow-x: scroll; } .overflow-x-auto-m { overflow-x: auto; } .overflow-y-visible-m { overflow-y: visible; } .overflow-y-hidden-m { overflow-y: hidden; } .overflow-y-scroll-m { overflow-y: scroll; } .overflow-y-auto-m { overflow-y: auto; } } @media screen and (min-width: 60em) { .overflow-visible-l { overflow: visible; } .overflow-hidden-l { overflow: hidden; } .overflow-scroll-l { overflow: scroll; } .overflow-auto-l { overflow: auto; } .overflow-x-visible-l { overflow-x: visible; } .overflow-x-hidden-l { overflow-x: hidden; } .overflow-x-scroll-l { overflow-x: scroll; } .overflow-x-auto-l { overflow-x: auto; } .overflow-y-visible-l { overflow-y: visible; } .overflow-y-hidden-l { overflow-y: hidden; } .overflow-y-scroll-l { overflow-y: scroll; } .overflow-y-auto-l { overflow-y: auto; } } /* POSITIONING Docs: http://tachyons.io/docs/layout/position/ Media Query Extensions: -ns = not-small -m = medium -l = large */ .static { position: static; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } @media screen and (min-width: 30em) { .static-ns { position: static; } .relative-ns { position: relative; } .absolute-ns { position: absolute; } .fixed-ns { position: fixed; } } @media screen and (min-width: 30em) and (max-width: 60em) { .static-m { position: static; } .relative-m { position: relative; } .absolute-m { position: absolute; } .fixed-m { position: fixed; } } @media screen and (min-width: 60em) { .static-l { position: static; } .relative-l { position: relative; } .absolute-l { position: absolute; } .fixed-l { position: fixed; } } /* OPACITY Docs: http://tachyons.io/docs/themes/opacity/ */ .o-100 { opacity: 1; } .o-90 { opacity: .9; } .o-80 { opacity: .8; } .o-70 { opacity: .7; } .o-60 { opacity: .6; } .o-50 { opacity: .5; } .o-40 { opacity: .4; } .o-30 { opacity: .3; } .o-20 { opacity: .2; } .o-10 { opacity: .1; } .o-05 { opacity: .05; } .o-025 { opacity: .025; } .o-0 { opacity: 0; } /* ROTATIONS */ .rotate-45 { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .rotate-135 { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .rotate-225 { -webkit-transform: rotate(225deg); transform: rotate(225deg); } .rotate-270 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .rotate-315 { -webkit-transform: rotate(315deg); transform: rotate(315deg); } @media screen and (min-width: 30em){ .rotate-45-ns { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .rotate-90-ns { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .rotate-135-ns { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .rotate-180-ns { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .rotate-225-ns { -webkit-transform: rotate(225deg); transform: rotate(225deg); } .rotate-270-ns { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .rotate-315-ns { -webkit-transform: rotate(315deg); transform: rotate(315deg); } } @media screen and (min-width: 30em) and (max-width: 60em){ .rotate-45-m { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .rotate-90-m { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .rotate-135-m { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .rotate-180-m { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .rotate-225-m { -webkit-transform: rotate(225deg); transform: rotate(225deg); } .rotate-270-m { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .rotate-315-m { -webkit-transform: rotate(315deg); transform: rotate(315deg); } } @media screen and (min-width: 60em){ .rotate-45-l { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .rotate-90-l { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .rotate-135-l { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .rotate-180-l { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .rotate-225-l { -webkit-transform: rotate(225deg); transform: rotate(225deg); } .rotate-270-l { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .rotate-315-l { -webkit-transform: rotate(315deg); transform: rotate(315deg); } } /* SKINS Docs: http://tachyons.io/docs/themes/skins/ Classes for setting foreground and background colors on elements. If you haven't declared a border color, but set border on an element, it will be set to the current text color. */ /* Text colors */ .black-90 { color: rgba(0, 0, 0, 0.9); } .black-80 { color: rgba(0, 0, 0, 0.8); } .black-70 { color: rgba(0, 0, 0, 0.7); } .black-60 { color: rgba(0, 0, 0, 0.6); } .black-50 { color: rgba(0, 0, 0, 0.5); } .black-40 { color: rgba(0, 0, 0, 0.4); } .black-30 { color: rgba(0, 0, 0, 0.3); } .black-20 { color: rgba(0, 0, 0, 0.2); } .black-10 { color: rgba(0, 0, 0, 0.1); } .black-05 { color: rgba(0, 0, 0, 0.05); } .white-90 { color: rgba(255, 255, 255, 0.9); } .white-80 { color: rgba(255, 255, 255, 0.8); } .white-70 { color: rgba(255, 255, 255, 0.7); } .white-60 { color: rgba(255, 255, 255, 0.6); } .white-50 { color: rgba(255, 255, 255, 0.5); } .white-40 { color: rgba(255, 255, 255, 0.4); } .white-30 { color: rgba(255, 255, 255, 0.3); } .white-20 { color: rgba(255, 255, 255, 0.2); } .white-10 { color: rgba(255, 255, 255, 0.1); } .black { color: #000; } .near-black { color: #2e1a69; } .dark-gray { color: #120f19; } .mid-gray { color: #686470; } .gray { color: #686470; } .silver { color: #b9b7be; } .light-silver { color: #e8e6ec; } .moon-gray { color: #e8e6ec; } .light-gray { color: #b9b7be; } .near-white { color: #fcfbf7; } .white { color: #fff; } .dark-red { color: #e7040f; } .red { color: #5a2edf; } .light-red { color: #ff725c; } .orange { color: #ff6300; } .gold { color: #ffb700; } .yellow { color: #ffb41b; } .light-yellow { color: #fbf1a9; } .purple { color: #2e1a69; } .light-purple { color: #a463f2; } .dark-pink { color: #d5008f; } .hot-pink { color: #ff41b4; } .pink { color: #ff80cc; } .light-pink { color: #ffa3d7; } .dark-green { color: #137752; } .green { color: #120f19; } .light-green { color: #9eebcf; } .navy { color: #120f19; } .dark-blue { color: #120f19; } .blue { color: #5a2edf; } .light-blue { color: #96ccff; } .lightest-blue { color: #cdecff; } .washed-blue { color: rgba(74, 144, 226, 0.1); } .washed-green { color: rgba(23, 190, 154, 0.32); } .washed-yellow { color: #fcf6d9; } .washed-red { color: #ffdfdf; } .color-inherit { color: inherit; } .bg-black-90 { background-color: rgba(0, 0, 0, 0.9); } .bg-black-80 { background-color: rgba(0, 0, 0, 0.8); } .bg-black-70 { background-color: rgba(0, 0, 0, 0.7); } .bg-black-60 { background-color: rgba(0, 0, 0, 0.6); } .bg-black-50 { background-color: rgba(0, 0, 0, 0.5); } .bg-black-40 { background-color: rgba(0, 0, 0, 0.4); } .bg-black-30 { background-color: rgba(0, 0, 0, 0.3); } .bg-black-20 { background-color: rgba(0, 0, 0, 0.2); } .bg-black-10 { background-color: rgba(0, 0, 0, 0.1); } .bg-black-05 { background-color: rgba(0, 0, 0, 0.05); } .bg-white-90 { background-color: rgba(255, 255, 255, 0.9); } .bg-white-80 { background-color: rgba(255, 255, 255, 0.8); } .bg-white-70 { background-color: rgba(255, 255, 255, 0.7); } .bg-white-60 { background-color: rgba(255, 255, 255, 0.6); } .bg-white-50 { background-color: rgba(255, 255, 255, 0.5); } .bg-white-40 { background-color: rgba(255, 255, 255, 0.4); } .bg-white-30 { background-color: rgba(255, 255, 255, 0.3); } .bg-white-20 { background-color: rgba(255, 255, 255, 0.2); } .bg-white-10 { background-color: rgba(255, 255, 255, 0.1); } /* Background colors */ .bg-black { background-color: #000; } .bg-near-black { background-color: #2e1a69; } .bg-dark-gray { background-color: #120f19; } .bg-mid-gray { background-color: #686470; } .bg-gray { background-color: #686470; } .bg-silver { background-color: #b9b7be; } .bg-light-silver { background-color: #e8e6ec; } .bg-moon-gray { background-color: #e8e6ec; } .bg-light-gray { background-color: #b9b7be; } .bg-near-white { background-color: #fcfbf7; } .bg-white { background-color: #fff; } .bg-transparent { background-color: transparent; } .bg-dark-red { background-color: #e7040f; } .bg-red { background-color: #5a2edf; } .bg-light-red { background-color: #ff725c; } .bg-orange { background-color: #ff6300; } .bg-gold { background-color: #ffb700; } .bg-yellow { background-color: #ffb41b; } .bg-light-yellow { background-color: #fbf1a9; } .bg-purple { background-color: #2e1a69; } .bg-light-purple { background-color: #a463f2; } .bg-dark-pink { background-color: #d5008f; } .bg-hot-pink { background-color: #ff41b4; } .bg-pink { background-color: #ff80cc; } .bg-light-pink { background-color: #ffa3d7; } .bg-dark-green { background-color: #137752; } .bg-green { background-color: #120f19; } .bg-light-green { background-color: #9eebcf; } .bg-navy { background-color: #120f19; } .bg-dark-blue { background-color: #120f19; } .bg-blue { background-color: #5a2edf; } .bg-light-blue { background-color: #96ccff; } .bg-lightest-blue { background-color: #cdecff; } .bg-washed-blue { background-color: rgba(74, 144, 226, 0.1); } .bg-washed-green { background-color: rgba(23, 190, 154, 0.32); } .bg-washed-yellow { background-color: #fcf6d9; } .bg-washed-red { background-color: #ffdfdf; } .bg-inherit { background-color: inherit; } /* SKINS:PSEUDO Customize the color of an element when it is focused or hovered over. */ .hover-black:hover, .hover-black:focus { color: #000; } .hover-near-black:hover, .hover-near-black:focus { color: #2e1a69; } .hover-dark-gray:hover, .hover-dark-gray:focus { color: #120f19; } .hover-mid-gray:hover, .hover-mid-gray:focus { color: #686470; } .hover-gray:hover, .hover-gray:focus { color: #686470; } .hover-silver:hover, .hover-silver:focus { color: #b9b7be; } .hover-light-silver:hover, .hover-light-silver:focus { color: #e8e6ec; } .hover-moon-gray:hover, .hover-moon-gray:focus { color: #e8e6ec; } .hover-light-gray:hover, .hover-light-gray:focus { color: #b9b7be; } .hover-near-white:hover, .hover-near-white:focus { color: #fcfbf7; } .hover-white:hover, .hover-white:focus { color: #fff; } .hover-black-90:hover, .hover-black-90:focus { color: rgba(0, 0, 0, 0.9); } .hover-black-80:hover, .hover-black-80:focus { color: rgba(0, 0, 0, 0.8); } .hover-black-70:hover, .hover-black-70:focus { color: rgba(0, 0, 0, 0.7); } .hover-black-60:hover, .hover-black-60:focus { color: rgba(0, 0, 0, 0.6); } .hover-black-50:hover, .hover-black-50:focus { color: rgba(0, 0, 0, 0.5); } .hover-black-40:hover, .hover-black-40:focus { color: rgba(0, 0, 0, 0.4); } .hover-black-30:hover, .hover-black-30:focus { color: rgba(0, 0, 0, 0.3); } .hover-black-20:hover, .hover-black-20:focus { color: rgba(0, 0, 0, 0.2); } .hover-black-10:hover, .hover-black-10:focus { color: rgba(0, 0, 0, 0.1); } .hover-white-90:hover, .hover-white-90:focus { color: rgba(255, 255, 255, 0.9); } .hover-white-80:hover, .hover-white-80:focus { color: rgba(255, 255, 255, 0.8); } .hover-white-70:hover, .hover-white-70:focus { color: rgba(255, 255, 255, 0.7); } .hover-white-60:hover, .hover-white-60:focus { color: rgba(255, 255, 255, 0.6); } .hover-white-50:hover, .hover-white-50:focus { color: rgba(255, 255, 255, 0.5); } .hover-white-40:hover, .hover-white-40:focus { color: rgba(255, 255, 255, 0.4); } .hover-white-30:hover, .hover-white-30:focus { color: rgba(255, 255, 255, 0.3); } .hover-white-20:hover, .hover-white-20:focus { color: rgba(255, 255, 255, 0.2); } .hover-white-10:hover, .hover-white-10:focus { color: rgba(255, 255, 255, 0.1); } .hover-inherit:hover, .hover-inherit:focus { color: inherit; } .hover-bg-black:hover, .hover-bg-black:focus { background-color: #000; } .hover-bg-near-black:hover, .hover-bg-near-black:focus { background-color: #2e1a69; } .hover-bg-dark-gray:hover, .hover-bg-dark-gray:focus { background-color: #120f19; } .hover-bg-mid-gray:hover, .hover-bg-mid-gray:focus { background-color: #686470; } .hover-bg-gray:hover, .hover-bg-gray:focus { background-color: #686470; } .hover-bg-silver:hover, .hover-bg-silver:focus { background-color: #b9b7be; } .hover-bg-light-silver:hover, .hover-bg-light-silver:focus { background-color: #e8e6ec; } .hover-bg-moon-gray:hover, .hover-bg-moon-gray:focus { background-color: #e8e6ec; } .hover-bg-light-gray:hover, .hover-bg-light-gray:focus { background-color: #b9b7be; } .hover-bg-near-white:hover, .hover-bg-near-white:focus { background-color: #fcfbf7; } .hover-bg-white:hover, .hover-bg-white:focus { background-color: #fff; } .hover-bg-transparent:hover, .hover-bg-transparent:focus { background-color: transparent; } .hover-bg-black-90:hover, .hover-bg-black-90:focus { background-color: rgba(0, 0, 0, 0.9); } .hover-bg-black-80:hover, .hover-bg-black-80:focus { background-color: rgba(0, 0, 0, 0.8); } .hover-bg-black-70:hover, .hover-bg-black-70:focus { background-color: rgba(0, 0, 0, 0.7); } .hover-bg-black-60:hover, .hover-bg-black-60:focus { background-color: rgba(0, 0, 0, 0.6); } .hover-bg-black-50:hover, .hover-bg-black-50:focus { background-color: rgba(0, 0, 0, 0.5); } .hover-bg-black-40:hover, .hover-bg-black-40:focus { background-color: rgba(0, 0, 0, 0.4); } .hover-bg-black-30:hover, .hover-bg-black-30:focus { background-color: rgba(0, 0, 0, 0.3); } .hover-bg-black-20:hover, .hover-bg-black-20:focus { background-color: rgba(0, 0, 0, 0.2); } .hover-bg-black-10:hover, .hover-bg-black-10:focus { background-color: rgba(0, 0, 0, 0.1); } .hover-bg-white-90:hover, .hover-bg-white-90:focus { background-color: rgba(255, 255, 255, 0.9); } .hover-bg-white-80:hover, .hover-bg-white-80:focus { background-color: rgba(255, 255, 255, 0.8); } .hover-bg-white-70:hover, .hover-bg-white-70:focus { background-color: rgba(255, 255, 255, 0.7); } .hover-bg-white-60:hover, .hover-bg-white-60:focus { background-color: rgba(255, 255, 255, 0.6); } .hover-bg-white-50:hover, .hover-bg-white-50:focus { background-color: rgba(255, 255, 255, 0.5); } .hover-bg-white-40:hover, .hover-bg-white-40:focus { background-color: rgba(255, 255, 255, 0.4); } .hover-bg-white-30:hover, .hover-bg-white-30:focus { background-color: rgba(255, 255, 255, 0.3); } .hover-bg-white-20:hover, .hover-bg-white-20:focus { background-color: rgba(255, 255, 255, 0.2); } .hover-bg-white-10:hover, .hover-bg-white-10:focus { background-color: rgba(255, 255, 255, 0.1); } .hover-dark-red:hover, .hover-dark-red:focus { color: #e7040f; } .hover-red:hover, .hover-red:focus { color: #5a2edf; } .hover-light-red:hover, .hover-light-red:focus { color: #ff725c; } .hover-orange:hover, .hover-orange:focus { color: #ff6300; } .hover-gold:hover, .hover-gold:focus { color: #ffb700; } .hover-yellow:hover, .hover-yellow:focus { color: #ffb41b; } .hover-light-yellow:hover, .hover-light-yellow:focus { color: #fbf1a9; } .hover-purple:hover, .hover-purple:focus { color: #2e1a69; } .hover-light-purple:hover, .hover-light-purple:focus { color: #a463f2; } .hover-dark-pink:hover, .hover-dark-pink:focus { color: #d5008f; } .hover-hot-pink:hover, .hover-hot-pink:focus { color: #ff41b4; } .hover-pink:hover, .hover-pink:focus { color: #ff80cc; } .hover-light-pink:hover, .hover-light-pink:focus { color: #ffa3d7; } .hover-dark-green:hover, .hover-dark-green:focus { color: #137752; } .hover-green:hover, .hover-green:focus { color: #120f19; } .hover-light-green:hover, .hover-light-green:focus { color: #9eebcf; } .hover-navy:hover, .hover-navy:focus { color: #120f19; } .hover-dark-blue:hover, .hover-dark-blue:focus { color: #120f19; } .hover-blue:hover, .hover-blue:focus { color: #5a2edf; } .hover-light-blue:hover, .hover-light-blue:focus { color: #96ccff; } .hover-lightest-blue:hover, .hover-lightest-blue:focus { color: #cdecff; } .hover-washed-blue:hover, .hover-washed-blue:focus { color: rgba(74, 144, 226, 0.1); } .hover-washed-green:hover, .hover-washed-green:focus { color: rgba(23, 190, 154, 0.32); } .hover-washed-yellow:hover, .hover-washed-yellow:focus { color: #fcf6d9; } .hover-washed-red:hover, .hover-washed-red:focus { color: #ffdfdf; } .hover-bg-dark-red:hover, .hover-bg-dark-red:focus { background-color: #e7040f; } .hover-bg-red:hover, .hover-bg-red:focus { background-color: #5a2edf; } .hover-bg-light-red:hover, .hover-bg-light-red:focus { background-color: #ff725c; } .hover-bg-orange:hover, .hover-bg-orange:focus { background-color: #ff6300; } .hover-bg-gold:hover, .hover-bg-gold:focus { background-color: #ffb700; } .hover-bg-yellow:hover, .hover-bg-yellow:focus { background-color: #ffb41b; } .hover-bg-light-yellow:hover, .hover-bg-light-yellow:focus { background-color: #fbf1a9; } .hover-bg-purple:hover, .hover-bg-purple:focus { background-color: #2e1a69; } .hover-bg-light-purple:hover, .hover-bg-light-purple:focus { background-color: #a463f2; } .hover-bg-dark-pink:hover, .hover-bg-dark-pink:focus { background-color: #d5008f; } .hover-bg-hot-pink:hover, .hover-bg-hot-pink:focus { background-color: #ff41b4; } .hover-bg-pink:hover, .hover-bg-pink:focus { background-color: #ff80cc; } .hover-bg-light-pink:hover, .hover-bg-light-pink:focus { background-color: #ffa3d7; } .hover-bg-dark-green:hover, .hover-bg-dark-green:focus { background-color: #137752; } .hover-bg-green:hover, .hover-bg-green:focus { background-color: #120f19; } .hover-bg-light-green:hover, .hover-bg-light-green:focus { background-color: #9eebcf; } .hover-bg-navy:hover, .hover-bg-navy:focus { background-color: #120f19; } .hover-bg-dark-blue:hover, .hover-bg-dark-blue:focus { background-color: #120f19; } .hover-bg-blue:hover, .hover-bg-blue:focus { background-color: #5a2edf; } .hover-bg-light-blue:hover, .hover-bg-light-blue:focus { background-color: #96ccff; } .hover-bg-lightest-blue:hover, .hover-bg-lightest-blue:focus { background-color: #cdecff; } .hover-bg-washed-blue:hover, .hover-bg-washed-blue:focus { background-color: rgba(74, 144, 226, 0.1); } .hover-bg-washed-green:hover, .hover-bg-washed-green:focus { background-color: rgba(23, 190, 154, 0.32); } .hover-bg-washed-yellow:hover, .hover-bg-washed-yellow:focus { background-color: #fcf6d9; } .hover-bg-washed-red:hover, .hover-bg-washed-red:focus { background-color: #ffdfdf; } .hover-bg-inherit:hover, .hover-bg-inherit:focus { background-color: inherit; } /* Variables */ :root { } /* SPACING Docs: http://tachyons.io/docs/layout/spacing/ An eight step powers of two scale ranging from 0 to 16rem. Base: p = padding m = margin Modifiers: a = all h = horizontal v = vertical t = top r = right b = bottom l = left 0 = none 1 = 1st step in spacing scale 2 = 2nd step in spacing scale 3 = 3rd step in spacing scale 4 = 4th step in spacing scale 5 = 5th step in spacing scale 6 = 6th step in spacing scale 7 = 7th step in spacing scale Media Query Extensions: -ns = not-small -m = medium -l = large */ .pa0 { padding: 0; } .pa1 { padding: 0.25rem; } .pa2 { padding: 0.5rem; } .pa3 { padding: 1rem; } .pa4 { padding: 2rem; } .pa5 { padding: 4rem; } .pa6 { padding: 8rem; } .pa7 { padding: 16rem; } .pl0 { padding-left: 0; } .pl1 { padding-left: 0.25rem; } .pl2 { padding-left: 0.5rem; } .pl3 { padding-left: 1rem; } .pl4 { padding-left: 2rem; } .pl5 { padding-left: 4rem; } .pl6 { padding-left: 8rem; } .pl7 { padding-left: 16rem; } .pr0 { padding-right: 0; } .pr1 { padding-right: 0.25rem; } .pr2 { padding-right: 0.5rem; } .pr3 { padding-right: 1rem; } .pr4 { padding-right: 2rem; } .pr5 { padding-right: 4rem; } .pr6 { padding-right: 8rem; } .pr7 { padding-right: 16rem; } .pb0 { padding-bottom: 0; } .pb1 { padding-bottom: 0.25rem; } .pb2 { padding-bottom: 0.5rem; } .pb3 { padding-bottom: 1rem; } .pb4 { padding-bottom: 2rem; } .pb5 { padding-bottom: 4rem; } .pb6 { padding-bottom: 8rem; } .pb7 { padding-bottom: 16rem; } .pt0 { padding-top: 0; } .pt1 { padding-top: 0.25rem; } .pt2 { padding-top: 0.5rem; } .pt3 { padding-top: 1rem; } .pt4 { padding-top: 2rem; } .pt5 { padding-top: 4rem; } .pt6 { padding-top: 8rem; } .pt7 { padding-top: 16rem; } .pv0 { padding-top: 0; padding-bottom: 0; } .pv1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .pv2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .pv3 { padding-top: 1rem; padding-bottom: 1rem; } .pv4 { padding-top: 2rem; padding-bottom: 2rem; } .pv5 { padding-top: 4rem; padding-bottom: 4rem; } .pv6 { padding-top: 8rem; padding-bottom: 8rem; } .pv7 { padding-top: 16rem; padding-bottom: 16rem; } .ph0 { padding-left: 0; padding-right: 0; } .ph1 { padding-left: 0.25rem; padding-right: 0.25rem; } .ph2 { padding-left: 0.5rem; padding-right: 0.5rem; } .ph3 { padding-left: 1rem; padding-right: 1rem; } .ph4 { padding-left: 2rem; padding-right: 2rem; } .ph5 { padding-left: 4rem; padding-right: 4rem; } .ph6 { padding-left: 8rem; padding-right: 8rem; } .ph7 { padding-left: 16rem; padding-right: 16rem; } .ma0 { margin: 0; } .ma1 { margin: 0.25rem; } .ma2 { margin: 0.5rem; } .ma3 { margin: 1rem; } .ma4 { margin: 2rem; } .ma5 { margin: 4rem; } .ma6 { margin: 8rem; } .ma7 { margin: 16rem; } .ml0 { margin-left: 0; } .ml1 { margin-left: 0.25rem; } .ml2 { margin-left: 0.5rem; } .ml3 { margin-left: 1rem; } .ml4 { margin-left: 2rem; } .ml5 { margin-left: 4rem; } .ml6 { margin-left: 8rem; } .ml7 { margin-left: 16rem; } .mr0 { margin-right: 0; } .mr1 { margin-right: 0.25rem; } .mr2 { margin-right: 0.5rem; } .mr3 { margin-right: 1rem; } .mr4 { margin-right: 2rem; } .mr5 { margin-right: 4rem; } .mr6 { margin-right: 8rem; } .mr7 { margin-right: 16rem; } .mb0 { margin-bottom: 0; } .mb1 { margin-bottom: 0.25rem; } .mb2 { margin-bottom: 0.5rem; } .mb3 { margin-bottom: 1rem; } .mb4 { margin-bottom: 2rem; } .mb5 { margin-bottom: 4rem; } .mb6 { margin-bottom: 8rem; } .mb7 { margin-bottom: 16rem; } .mt0 { margin-top: 0; } .mt1 { margin-top: 0.25rem; } .mt2 { margin-top: 0.5rem; } .mt3 { margin-top: 1rem; } .mt4 { margin-top: 2rem; } .mt5 { margin-top: 4rem; } .mt6 { margin-top: 8rem; } .mt7 { margin-top: 16rem; } .mv0 { margin-top: 0; margin-bottom: 0; } .mv1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .mv2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .mv3 { margin-top: 1rem; margin-bottom: 1rem; } .mv4 { margin-top: 2rem; margin-bottom: 2rem; } .mv5 { margin-top: 4rem; margin-bottom: 4rem; } .mv6 { margin-top: 8rem; margin-bottom: 8rem; } .mv7 { margin-top: 16rem; margin-bottom: 16rem; } .mh0 { margin-left: 0; margin-right: 0; } .mh1 { margin-left: 0.25rem; margin-right: 0.25rem; } .mh2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mh3 { margin-left: 1rem; margin-right: 1rem; } .mh4 { margin-left: 2rem; margin-right: 2rem; } .mh5 { margin-left: 4rem; margin-right: 4rem; } .mh6 { margin-left: 8rem; margin-right: 8rem; } .mh7 { margin-left: 16rem; margin-right: 16rem; } @media screen and (min-width: 30em) { .pa0-ns { padding: 0; } .pa1-ns { padding: 0.25rem; } .pa2-ns { padding: 0.5rem; } .pa3-ns { padding: 1rem; } .pa4-ns { padding: 2rem; } .pa5-ns { padding: 4rem; } .pa6-ns { padding: 8rem; } .pa7-ns { padding: 16rem; } .pl0-ns { padding-left: 0; } .pl1-ns { padding-left: 0.25rem; } .pl2-ns { padding-left: 0.5rem; } .pl3-ns { padding-left: 1rem; } .pl4-ns { padding-left: 2rem; } .pl5-ns { padding-left: 4rem; } .pl6-ns { padding-left: 8rem; } .pl7-ns { padding-left: 16rem; } .pr0-ns { padding-right: 0; } .pr1-ns { padding-right: 0.25rem; } .pr2-ns { padding-right: 0.5rem; } .pr3-ns { padding-right: 1rem; } .pr4-ns { padding-right: 2rem; } .pr5-ns { padding-right: 4rem; } .pr6-ns { padding-right: 8rem; } .pr7-ns { padding-right: 16rem; } .pb0-ns { padding-bottom: 0; } .pb1-ns { padding-bottom: 0.25rem; } .pb2-ns { padding-bottom: 0.5rem; } .pb3-ns { padding-bottom: 1rem; } .pb4-ns { padding-bottom: 2rem; } .pb5-ns { padding-bottom: 4rem; } .pb6-ns { padding-bottom: 8rem; } .pb7-ns { padding-bottom: 16rem; } .pt0-ns { padding-top: 0; } .pt1-ns { padding-top: 0.25rem; } .pt2-ns { padding-top: 0.5rem; } .pt3-ns { padding-top: 1rem; } .pt4-ns { padding-top: 2rem; } .pt5-ns { padding-top: 4rem; } .pt6-ns { padding-top: 8rem; } .pt7-ns { padding-top: 16rem; } .pv0-ns { padding-top: 0; padding-bottom: 0; } .pv1-ns { padding-top: 0.25rem; padding-bottom: 0.25rem; } .pv2-ns { padding-top: 0.5rem; padding-bottom: 0.5rem; } .pv3-ns { padding-top: 1rem; padding-bottom: 1rem; } .pv4-ns { padding-top: 2rem; padding-bottom: 2rem; } .pv5-ns { padding-top: 4rem; padding-bottom: 4rem; } .pv6-ns { padding-top: 8rem; padding-bottom: 8rem; } .pv7-ns { padding-top: 16rem; padding-bottom: 16rem; } .ph0-ns { padding-left: 0; padding-right: 0; } .ph1-ns { padding-left: 0.25rem; padding-right: 0.25rem; } .ph2-ns { padding-left: 0.5rem; padding-right: 0.5rem; } .ph3-ns { padding-left: 1rem; padding-right: 1rem; } .ph4-ns { padding-left: 2rem; padding-right: 2rem; } .ph5-ns { padding-left: 4rem; padding-right: 4rem; } .ph6-ns { padding-left: 8rem; padding-right: 8rem; } .ph7-ns { padding-left: 16rem; padding-right: 16rem; } .ma0-ns { margin: 0; } .ma1-ns { margin: 0.25rem; } .ma2-ns { margin: 0.5rem; } .ma3-ns { margin: 1rem; } .ma4-ns { margin: 2rem; } .ma5-ns { margin: 4rem; } .ma6-ns { margin: 8rem; } .ma7-ns { margin: 16rem; } .ml0-ns { margin-left: 0; } .ml1-ns { margin-left: 0.25rem; } .ml2-ns { margin-left: 0.5rem; } .ml3-ns { margin-left: 1rem; } .ml4-ns { margin-left: 2rem; } .ml5-ns { margin-left: 4rem; } .ml6-ns { margin-left: 8rem; } .ml7-ns { margin-left: 16rem; } .mr0-ns { margin-right: 0; } .mr1-ns { margin-right: 0.25rem; } .mr2-ns { margin-right: 0.5rem; } .mr3-ns { margin-right: 1rem; } .mr4-ns { margin-right: 2rem; } .mr5-ns { margin-right: 4rem; } .mr6-ns { margin-right: 8rem; } .mr7-ns { margin-right: 16rem; } .mb0-ns { margin-bottom: 0; } .mb1-ns { margin-bottom: 0.25rem; } .mb2-ns { margin-bottom: 0.5rem; } .mb3-ns { margin-bottom: 1rem; } .mb4-ns { margin-bottom: 2rem; } .mb5-ns { margin-bottom: 4rem; } .mb6-ns { margin-bottom: 8rem; } .mb7-ns { margin-bottom: 16rem; } .mt0-ns { margin-top: 0; } .mt1-ns { margin-top: 0.25rem; } .mt2-ns { margin-top: 0.5rem; } .mt3-ns { margin-top: 1rem; } .mt4-ns { margin-top: 2rem; } .mt5-ns { margin-top: 4rem; } .mt6-ns { margin-top: 8rem; } .mt7-ns { margin-top: 16rem; } .mv0-ns { margin-top: 0; margin-bottom: 0; } .mv1-ns { margin-top: 0.25rem; margin-bottom: 0.25rem; } .mv2-ns { margin-top: 0.5rem; margin-bottom: 0.5rem; } .mv3-ns { margin-top: 1rem; margin-bottom: 1rem; } .mv4-ns { margin-top: 2rem; margin-bottom: 2rem; } .mv5-ns { margin-top: 4rem; margin-bottom: 4rem; } .mv6-ns { margin-top: 8rem; margin-bottom: 8rem; } .mv7-ns { margin-top: 16rem; margin-bottom: 16rem; } .mh0-ns { margin-left: 0; margin-right: 0; } .mh1-ns { margin-left: 0.25rem; margin-right: 0.25rem; } .mh2-ns { margin-left: 0.5rem; margin-right: 0.5rem; } .mh3-ns { margin-left: 1rem; margin-right: 1rem; } .mh4-ns { margin-left: 2rem; margin-right: 2rem; } .mh5-ns { margin-left: 4rem; margin-right: 4rem; } .mh6-ns { margin-left: 8rem; margin-right: 8rem; } .mh7-ns { margin-left: 16rem; margin-right: 16rem; } } @media screen and (min-width: 30em) and (max-width: 60em) { .pa0-m { padding: 0; } .pa1-m { padding: 0.25rem; } .pa2-m { padding: 0.5rem; } .pa3-m { padding: 1rem; } .pa4-m { padding: 2rem; } .pa5-m { padding: 4rem; } .pa6-m { padding: 8rem; } .pa7-m { padding: 16rem; } .pl0-m { padding-left: 0; } .pl1-m { padding-left: 0.25rem; } .pl2-m { padding-left: 0.5rem; } .pl3-m { padding-left: 1rem; } .pl4-m { padding-left: 2rem; } .pl5-m { padding-left: 4rem; } .pl6-m { padding-left: 8rem; } .pl7-m { padding-left: 16rem; } .pr0-m { padding-right: 0; } .pr1-m { padding-right: 0.25rem; } .pr2-m { padding-right: 0.5rem; } .pr3-m { padding-right: 1rem; } .pr4-m { padding-right: 2rem; } .pr5-m { padding-right: 4rem; } .pr6-m { padding-right: 8rem; } .pr7-m { padding-right: 16rem; } .pb0-m { padding-bottom: 0; } .pb1-m { padding-bottom: 0.25rem; } .pb2-m { padding-bottom: 0.5rem; } .pb3-m { padding-bottom: 1rem; } .pb4-m { padding-bottom: 2rem; } .pb5-m { padding-bottom: 4rem; } .pb6-m { padding-bottom: 8rem; } .pb7-m { padding-bottom: 16rem; } .pt0-m { padding-top: 0; } .pt1-m { padding-top: 0.25rem; } .pt2-m { padding-top: 0.5rem; } .pt3-m { padding-top: 1rem; } .pt4-m { padding-top: 2rem; } .pt5-m { padding-top: 4rem; } .pt6-m { padding-top: 8rem; } .pt7-m { padding-top: 16rem; } .pv0-m { padding-top: 0; padding-bottom: 0; } .pv1-m { padding-top: 0.25rem; padding-bottom: 0.25rem; } .pv2-m { padding-top: 0.5rem; padding-bottom: 0.5rem; } .pv3-m { padding-top: 1rem; padding-bottom: 1rem; } .pv4-m { padding-top: 2rem; padding-bottom: 2rem; } .pv5-m { padding-top: 4rem; padding-bottom: 4rem; } .pv6-m { padding-top: 8rem; padding-bottom: 8rem; } .pv7-m { padding-top: 16rem; padding-bottom: 16rem; } .ph0-m { padding-left: 0; padding-right: 0; } .ph1-m { padding-left: 0.25rem; padding-right: 0.25rem; } .ph2-m { padding-left: 0.5rem; padding-right: 0.5rem; } .ph3-m { padding-left: 1rem; padding-right: 1rem; } .ph4-m { padding-left: 2rem; padding-right: 2rem; } .ph5-m { padding-left: 4rem; padding-right: 4rem; } .ph6-m { padding-left: 8rem; padding-right: 8rem; } .ph7-m { padding-left: 16rem; padding-right: 16rem; } .ma0-m { margin: 0; } .ma1-m { margin: 0.25rem; } .ma2-m { margin: 0.5rem; } .ma3-m { margin: 1rem; } .ma4-m { margin: 2rem; } .ma5-m { margin: 4rem; } .ma6-m { margin: 8rem; } .ma7-m { margin: 16rem; } .ml0-m { margin-left: 0; } .ml1-m { margin-left: 0.25rem; } .ml2-m { margin-left: 0.5rem; } .ml3-m { margin-left: 1rem; } .ml4-m { margin-left: 2rem; } .ml5-m { margin-left: 4rem; } .ml6-m { margin-left: 8rem; } .ml7-m { margin-left: 16rem; } .mr0-m { margin-right: 0; } .mr1-m { margin-right: 0.25rem; } .mr2-m { margin-right: 0.5rem; } .mr3-m { margin-right: 1rem; } .mr4-m { margin-right: 2rem; } .mr5-m { margin-right: 4rem; } .mr6-m { margin-right: 8rem; } .mr7-m { margin-right: 16rem; } .mb0-m { margin-bottom: 0; } .mb1-m { margin-bottom: 0.25rem; } .mb2-m { margin-bottom: 0.5rem; } .mb3-m { margin-bottom: 1rem; } .mb4-m { margin-bottom: 2rem; } .mb5-m { margin-bottom: 4rem; } .mb6-m { margin-bottom: 8rem; } .mb7-m { margin-bottom: 16rem; } .mt0-m { margin-top: 0; } .mt1-m { margin-top: 0.25rem; } .mt2-m { margin-top: 0.5rem; } .mt3-m { margin-top: 1rem; } .mt4-m { margin-top: 2rem; } .mt5-m { margin-top: 4rem; } .mt6-m { margin-top: 8rem; } .mt7-m { margin-top: 16rem; } .mv0-m { margin-top: 0; margin-bottom: 0; } .mv1-m { margin-top: 0.25rem; margin-bottom: 0.25rem; } .mv2-m { margin-top: 0.5rem; margin-bottom: 0.5rem; } .mv3-m { margin-top: 1rem; margin-bottom: 1rem; } .mv4-m { margin-top: 2rem; margin-bottom: 2rem; } .mv5-m { margin-top: 4rem; margin-bottom: 4rem; } .mv6-m { margin-top: 8rem; margin-bottom: 8rem; } .mv7-m { margin-top: 16rem; margin-bottom: 16rem; } .mh0-m { margin-left: 0; margin-right: 0; } .mh1-m { margin-left: 0.25rem; margin-right: 0.25rem; } .mh2-m { margin-left: 0.5rem; margin-right: 0.5rem; } .mh3-m { margin-left: 1rem; margin-right: 1rem; } .mh4-m { margin-left: 2rem; margin-right: 2rem; } .mh5-m { margin-left: 4rem; margin-right: 4rem; } .mh6-m { margin-left: 8rem; margin-right: 8rem; } .mh7-m { margin-left: 16rem; margin-right: 16rem; } } @media screen and (min-width: 60em) { .pa0-l { padding: 0; } .pa1-l { padding: 0.25rem; } .pa2-l { padding: 0.5rem; } .pa3-l { padding: 1rem; } .pa4-l { padding: 2rem; } .pa5-l { padding: 4rem; } .pa6-l { padding: 8rem; } .pa7-l { padding: 16rem; } .pl0-l { padding-left: 0; } .pl1-l { padding-left: 0.25rem; } .pl2-l { padding-left: 0.5rem; } .pl3-l { padding-left: 1rem; } .pl4-l { padding-left: 2rem; } .pl5-l { padding-left: 4rem; } .pl6-l { padding-left: 8rem; } .pl7-l { padding-left: 16rem; } .pr0-l { padding-right: 0; } .pr1-l { padding-right: 0.25rem; } .pr2-l { padding-right: 0.5rem; } .pr3-l { padding-right: 1rem; } .pr4-l { padding-right: 2rem; } .pr5-l { padding-right: 4rem; } .pr6-l { padding-right: 8rem; } .pr7-l { padding-right: 16rem; } .pb0-l { padding-bottom: 0; } .pb1-l { padding-bottom: 0.25rem; } .pb2-l { padding-bottom: 0.5rem; } .pb3-l { padding-bottom: 1rem; } .pb4-l { padding-bottom: 2rem; } .pb5-l { padding-bottom: 4rem; } .pb6-l { padding-bottom: 8rem; } .pb7-l { padding-bottom: 16rem; } .pt0-l { padding-top: 0; } .pt1-l { padding-top: 0.25rem; } .pt2-l { padding-top: 0.5rem; } .pt3-l { padding-top: 1rem; } .pt4-l { padding-top: 2rem; } .pt5-l { padding-top: 4rem; } .pt6-l { padding-top: 8rem; } .pt7-l { padding-top: 16rem; } .pv0-l { padding-top: 0; padding-bottom: 0; } .pv1-l { padding-top: 0.25rem; padding-bottom: 0.25rem; } .pv2-l { padding-top: 0.5rem; padding-bottom: 0.5rem; } .pv3-l { padding-top: 1rem; padding-bottom: 1rem; } .pv4-l { padding-top: 2rem; padding-bottom: 2rem; } .pv5-l { padding-top: 4rem; padding-bottom: 4rem; } .pv6-l { padding-top: 8rem; padding-bottom: 8rem; } .pv7-l { padding-top: 16rem; padding-bottom: 16rem; } .ph0-l { padding-left: 0; padding-right: 0; } .ph1-l { padding-left: 0.25rem; padding-right: 0.25rem; } .ph2-l { padding-left: 0.5rem; padding-right: 0.5rem; } .ph3-l { padding-left: 1rem; padding-right: 1rem; } .ph4-l { padding-left: 2rem; padding-right: 2rem; } .ph5-l { padding-left: 4rem; padding-right: 4rem; } .ph6-l { padding-left: 8rem; padding-right: 8rem; } .ph7-l { padding-left: 16rem; padding-right: 16rem; } .ma0-l { margin: 0; } .ma1-l { margin: 0.25rem; } .ma2-l { margin: 0.5rem; } .ma3-l { margin: 1rem; } .ma4-l { margin: 2rem; } .ma5-l { margin: 4rem; } .ma6-l { margin: 8rem; } .ma7-l { margin: 16rem; } .ml0-l { margin-left: 0; } .ml1-l { margin-left: 0.25rem; } .ml2-l { margin-left: 0.5rem; } .ml3-l { margin-left: 1rem; } .ml4-l { margin-left: 2rem; } .ml5-l { margin-left: 4rem; } .ml6-l { margin-left: 8rem; } .ml7-l { margin-left: 16rem; } .mr0-l { margin-right: 0; } .mr1-l { margin-right: 0.25rem; } .mr2-l { margin-right: 0.5rem; } .mr3-l { margin-right: 1rem; } .mr4-l { margin-right: 2rem; } .mr5-l { margin-right: 4rem; } .mr6-l { margin-right: 8rem; } .mr7-l { margin-right: 16rem; } .mb0-l { margin-bottom: 0; } .mb1-l { margin-bottom: 0.25rem; } .mb2-l { margin-bottom: 0.5rem; } .mb3-l { margin-bottom: 1rem; } .mb4-l { margin-bottom: 2rem; } .mb5-l { margin-bottom: 4rem; } .mb6-l { margin-bottom: 8rem; } .mb7-l { margin-bottom: 16rem; } .mt0-l { margin-top: 0; } .mt1-l { margin-top: 0.25rem; } .mt2-l { margin-top: 0.5rem; } .mt3-l { margin-top: 1rem; } .mt4-l { margin-top: 2rem; } .mt5-l { margin-top: 4rem; } .mt6-l { margin-top: 8rem; } .mt7-l { margin-top: 16rem; } .mv0-l { margin-top: 0; margin-bottom: 0; } .mv1-l { margin-top: 0.25rem; margin-bottom: 0.25rem; } .mv2-l { margin-top: 0.5rem; margin-bottom: 0.5rem; } .mv3-l { margin-top: 1rem; margin-bottom: 1rem; } .mv4-l { margin-top: 2rem; margin-bottom: 2rem; } .mv5-l { margin-top: 4rem; margin-bottom: 4rem; } .mv6-l { margin-top: 8rem; margin-bottom: 8rem; } .mv7-l { margin-top: 16rem; margin-bottom: 16rem; } .mh0-l { margin-left: 0; margin-right: 0; } .mh1-l { margin-left: 0.25rem; margin-right: 0.25rem; } .mh2-l { margin-left: 0.5rem; margin-right: 0.5rem; } .mh3-l { margin-left: 1rem; margin-right: 1rem; } .mh4-l { margin-left: 2rem; margin-right: 2rem; } .mh5-l { margin-left: 4rem; margin-right: 4rem; } .mh6-l { margin-left: 8rem; margin-right: 8rem; } .mh7-l { margin-left: 16rem; margin-right: 16rem; } } /* NEGATIVE MARGINS Base: n = negative Modifiers: a = all t = top r = right b = bottom l = left 1 = 1st step in spacing scale 2 = 2nd step in spacing scale 3 = 3rd step in spacing scale 4 = 4th step in spacing scale 5 = 5th step in spacing scale 6 = 6th step in spacing scale 7 = 7th step in spacing scale Media Query Extensions: -ns = not-small -m = medium -l = large */ .na1 { margin: -var(--spacing-extra-small); } .na2 { margin: -var(--spacing-small); } .na3 { margin: -var(--spacing-medium); } .na4 { margin: -var(--spacing-large); } .na5 { margin: -var(--spacing-extra-large); } .na6 { margin: -var(--spacing-extra-extra-large); } .na7 { margin: -var(--spacing-extra-extra-extra-large); } .nl1 { margin-left: -var(--spacing-extra-small); } .nl2 { margin-left: -var(--spacing-small); } .nl3 { margin-left: -var(--spacing-medium); } .nl4 { margin-left: -var(--spacing-large); } .nl5 { margin-left: -var(--spacing-extra-large); } .nl6 { margin-left: -var(--spacing-extra-extra-large); } .nl7 { margin-left: -var(--spacing-extra-extra-extra-large); } .nr1 { margin-right: -var(--spacing-extra-small); } .nr2 { margin-right: -var(--spacing-small); } .nr3 { margin-right: -var(--spacing-medium); } .nr4 { margin-right: -var(--spacing-large); } .nr5 { margin-right: -var(--spacing-extra-large); } .nr6 { margin-right: -var(--spacing-extra-extra-large); } .nr7 { margin-right: -var(--spacing-extra-extra-extra-large); } .nb1 { margin-bottom: -var(--spacing-extra-small); } .nb2 { margin-bottom: -var(--spacing-small); } .nb3 { margin-bottom: -var(--spacing-medium); } .nb4 { margin-bottom: -var(--spacing-large); } .nb5 { margin-bottom: -var(--spacing-extra-large); } .nb6 { margin-bottom: -var(--spacing-extra-extra-large); } .nb7 { margin-bottom: -var(--spacing-extra-extra-extra-large); } .nt1 { margin-top: -var(--spacing-extra-small); } .nt2 { margin-top: -var(--spacing-small); } .nt3 { margin-top: -var(--spacing-medium); } .nt4 { margin-top: -var(--spacing-large); } .nt5 { margin-top: -var(--spacing-extra-large); } .nt6 { margin-top: -var(--spacing-extra-extra-large); } .nt7 { margin-top: -var(--spacing-extra-extra-extra-large); } @media screen and (min-width: 30em) { .na1-ns { margin: -var(--spacing-extra-small); } .na2-ns { margin: -var(--spacing-small); } .na3-ns { margin: -var(--spacing-medium); } .na4-ns { margin: -var(--spacing-large); } .na5-ns { margin: -var(--spacing-extra-large); } .na6-ns { margin: -var(--spacing-extra-extra-large); } .na7-ns { margin: -var(--spacing-extra-extra-extra-large); } .nl1-ns { margin-left: -var(--spacing-extra-small); } .nl2-ns { margin-left: -var(--spacing-small); } .nl3-ns { margin-left: -var(--spacing-medium); } .nl4-ns { margin-left: -var(--spacing-large); } .nl5-ns { margin-left: -var(--spacing-extra-large); } .nl6-ns { margin-left: -var(--spacing-extra-extra-large); } .nl7-ns { margin-left: -var(--spacing-extra-extra-extra-large); } .nr1-ns { margin-right: -var(--spacing-extra-small); } .nr2-ns { margin-right: -var(--spacing-small); } .nr3-ns { margin-right: -var(--spacing-medium); } .nr4-ns { margin-right: -var(--spacing-large); } .nr5-ns { margin-right: -var(--spacing-extra-large); } .nr6-ns { margin-right: -var(--spacing-extra-extra-large); } .nr7-ns { margin-right: -var(--spacing-extra-extra-extra-large); } .nb1-ns { margin-bottom: -var(--spacing-extra-small); } .nb2-ns { margin-bottom: -var(--spacing-small); } .nb3-ns { margin-bottom: -var(--spacing-medium); } .nb4-ns { margin-bottom: -var(--spacing-large); } .nb5-ns { margin-bottom: -var(--spacing-extra-large); } .nb6-ns { margin-bottom: -var(--spacing-extra-extra-large); } .nb7-ns { margin-bottom: -var(--spacing-extra-extra-extra-large); } .nt1-ns { margin-top: -var(--spacing-extra-small); } .nt2-ns { margin-top: -var(--spacing-small); } .nt3-ns { margin-top: -var(--spacing-medium); } .nt4-ns { margin-top: -var(--spacing-large); } .nt5-ns { margin-top: -var(--spacing-extra-large); } .nt6-ns { margin-top: -var(--spacing-extra-extra-large); } .nt7-ns { margin-top: -var(--spacing-extra-extra-extra-large); } } @media screen and (min-width: 30em) and (max-width: 60em) { .na1-m { margin: -var(--spacing-extra-small); } .na2-m { margin: -var(--spacing-small); } .na3-m { margin: -var(--spacing-medium); } .na4-m { margin: -var(--spacing-large); } .na5-m { margin: -var(--spacing-extra-large); } .na6-m { margin: -var(--spacing-extra-extra-large); } .na7-m { margin: -var(--spacing-extra-extra-extra-large); } .nl1-m { margin-left: -var(--spacing-extra-small); } .nl2-m { margin-left: -var(--spacing-small); } .nl3-m { margin-left: -var(--spacing-medium); } .nl4-m { margin-left: -var(--spacing-large); } .nl5-m { margin-left: -var(--spacing-extra-large); } .nl6-m { margin-left: -var(--spacing-extra-extra-large); } .nl7-m { margin-left: -var(--spacing-extra-extra-extra-large); } .nr1-m { margin-right: -var(--spacing-extra-small); } .nr2-m { margin-right: -var(--spacing-small); } .nr3-m { margin-right: -var(--spacing-medium); } .nr4-m { margin-right: -var(--spacing-large); } .nr5-m { margin-right: -var(--spacing-extra-large); } .nr6-m { margin-right: -var(--spacing-extra-extra-large); } .nr7-m { margin-right: -var(--spacing-extra-extra-extra-large); } .nb1-m { margin-bottom: -var(--spacing-extra-small); } .nb2-m { margin-bottom: -var(--spacing-small); } .nb3-m { margin-bottom: -var(--spacing-medium); } .nb4-m { margin-bottom: -var(--spacing-large); } .nb5-m { margin-bottom: -var(--spacing-extra-large); } .nb6-m { margin-bottom: -var(--spacing-extra-extra-large); } .nb7-m { margin-bottom: -var(--spacing-extra-extra-extra-large); } .nt1-m { margin-top: -var(--spacing-extra-small); } .nt2-m { margin-top: -var(--spacing-small); } .nt3-m { margin-top: -var(--spacing-medium); } .nt4-m { margin-top: -var(--spacing-large); } .nt5-m { margin-top: -var(--spacing-extra-large); } .nt6-m { margin-top: -var(--spacing-extra-extra-large); } .nt7-m { margin-top: -var(--spacing-extra-extra-extra-large); } } @media screen and (min-width: 60em) { .na1-l { margin: -var(--spacing-extra-small); } .na2-l { margin: -var(--spacing-small); } .na3-l { margin: -var(--spacing-medium); } .na4-l { margin: -var(--spacing-large); } .na5-l { margin: -var(--spacing-extra-large); } .na6-l { margin: -var(--spacing-extra-extra-large); } .na7-l { margin: -var(--spacing-extra-extra-extra-large); } .nl1-l { margin-left: -var(--spacing-extra-small); } .nl2-l { margin-left: -var(--spacing-small); } .nl3-l { margin-left: -var(--spacing-medium); } .nl4-l { margin-left: -var(--spacing-large); } .nl5-l { margin-left: -var(--spacing-extra-large); } .nl6-l { margin-left: -var(--spacing-extra-extra-large); } .nl7-l { margin-left: -var(--spacing-extra-extra-extra-large); } .nr1-l { margin-right: -var(--spacing-extra-small); } .nr2-l { margin-right: -var(--spacing-small); } .nr3-l { margin-right: -var(--spacing-medium); } .nr4-l { margin-right: -var(--spacing-large); } .nr5-l { margin-right: -var(--spacing-extra-large); } .nr6-l { margin-right: -var(--spacing-extra-extra-large); } .nr7-l { margin-right: -var(--spacing-extra-extra-extra-large); } .nb1-l { margin-bottom: -var(--spacing-extra-small); } .nb2-l { margin-bottom: -var(--spacing-small); } .nb3-l { margin-bottom: -var(--spacing-medium); } .nb4-l { margin-bottom: -var(--spacing-large); } .nb5-l { margin-bottom: -var(--spacing-extra-large); } .nb6-l { margin-bottom: -var(--spacing-extra-extra-large); } .nb7-l { margin-bottom: -var(--spacing-extra-extra-extra-large); } .nt1-l { margin-top: -var(--spacing-extra-small); } .nt2-l { margin-top: -var(--spacing-small); } .nt3-l { margin-top: -var(--spacing-medium); } .nt4-l { margin-top: -var(--spacing-large); } .nt5-l { margin-top: -var(--spacing-extra-large); } .nt6-l { margin-top: -var(--spacing-extra-extra-large); } .nt7-l { margin-top: -var(--spacing-extra-extra-extra-large); } } /* TABLES Docs: http://tachyons.io/docs/elements/tables/ */ .collapse { border-collapse: collapse; border-spacing: 0; } .striped--light-silver:nth-child(odd) { background-color: #e8e6ec; } .striped--moon-gray:nth-child(odd) { background-color: #e8e6ec; } .striped--light-gray:nth-child(odd) { background-color: #b9b7be; } .striped--near-white:nth-child(odd) { background-color: #fcfbf7; } .stripe-light:nth-child(odd) { background-color: rgba(255, 255, 255, 0.1); } .stripe-dark:nth-child(odd) { background-color: rgba(0, 0, 0, 0.1); } /* TEXT DECORATION Docs: http://tachyons.io/docs/typography/text-decoration/ Media Query Extensions: -ns = not-small -m = medium -l = large */ .strike { text-decoration: line-through; } .underline { text-decoration: underline; } .no-underline { text-decoration: none; } @media screen and (min-width: 30em) { .strike-ns { text-decoration: line-through; } .underline-ns { text-decoration: underline; } .no-underline-ns { text-decoration: none; } } @media screen and (min-width: 30em) and (max-width: 60em) { .strike-m { text-decoration: line-through; } .underline-m { text-decoration: underline; } .no-underline-m { text-decoration: none; } } @media screen and (min-width: 60em) { .strike-l { text-decoration: line-through; } .underline-l { text-decoration: underline; } .no-underline-l { text-decoration: none; } } /* TEXT ALIGN Docs: http://tachyons.io/docs/typography/text-align/ Base t = text-align Modifiers l = left r = right c = center j = justify Media Query Extensions: -ns = not-small -m = medium -l = large */ .tl { text-align: left; } .tr { text-align: right; } .tc { text-align: center; } .tj { text-align: justify; } @media screen and (min-width: 30em) { .tl-ns { text-align: left; } .tr-ns { text-align: right; } .tc-ns { text-align: center; } .tj-ns { text-align: justify; } } @media screen and (min-width: 30em) and (max-width: 60em) { .tl-m { text-align: left; } .tr-m { text-align: right; } .tc-m { text-align: center; } .tj-m { text-align: justify; } } @media screen and (min-width: 60em) { .tl-l { text-align: left; } .tr-l { text-align: right; } .tc-l { text-align: center; } .tj-l { text-align: justify; } } /* TEXT TRANSFORM Docs: http://tachyons.io/docs/typography/text-transform/ Base: tt = text-transform Modifiers c = capitalize l = lowercase u = uppercase n = none Media Query Extensions: -ns = not-small -m = medium -l = large */ .ttc { text-transform: capitalize; } .ttl { text-transform: lowercase; } .ttu { text-transform: uppercase; } .ttn { text-transform: none; } @media screen and (min-width: 30em) { .ttc-ns { text-transform: capitalize; } .ttl-ns { text-transform: lowercase; } .ttu-ns { text-transform: uppercase; } .ttn-ns { text-transform: none; } } @media screen and (min-width: 30em) and (max-width: 60em) { .ttc-m { text-transform: capitalize; } .ttl-m { text-transform: lowercase; } .ttu-m { text-transform: uppercase; } .ttn-m { text-transform: none; } } @media screen and (min-width: 60em) { .ttc-l { text-transform: capitalize; } .ttl-l { text-transform: lowercase; } .ttu-l { text-transform: uppercase; } .ttn-l { text-transform: none; } } /* TYPE SCALE Docs: http://tachyons.io/docs/typography/scale/ Base: f = font-size Modifiers 1 = 1st step in size scale 2 = 2nd step in size scale 3 = 3rd step in size scale 4 = 4th step in size scale 5 = 5th step in size scale 6 = 6th step in size scale Media Query Extensions: -ns = not-small -m = medium -l = large */ /* * For Hero/Marketing Titles * * These generally are too large for mobile * so be careful using them on smaller screens. * */ .f-6, .f-headline { font-size: 6rem; } .f-5, .f-subheadline { font-size: 5rem; } /* Type Scale */ .f1 { font-size: 3rem; } .f2 { font-size: 2.25rem; } .f3 { font-size: 1.5rem; } .f4 { font-size: 1.25rem; } .f5 { font-size: 1rem; } .f6 { font-size: 0.875rem; } .f7 { font-size: 0.75rem; } @media screen and (min-width: 30em){ .f-6-ns, .f-headline-ns { font-size: 6rem; } .f-5-ns, .f-subheadline-ns { font-size: 5rem; } .f1-ns { font-size: 3rem; } .f2-ns { font-size: 2.25rem; } .f3-ns { font-size: 1.5rem; } .f4-ns { font-size: 1.25rem; } .f5-ns { font-size: 1rem; } .f6-ns { font-size: 0.875rem; } .f7-ns { font-size: 0.75rem; } } @media screen and (min-width: 30em) and (max-width: 60em) { .f-6-m, .f-headline-m { font-size: 6rem; } .f-5-m, .f-subheadline-m { font-size: 5rem; } .f1-m { font-size: 3rem; } .f2-m { font-size: 2.25rem; } .f3-m { font-size: 1.5rem; } .f4-m { font-size: 1.25rem; } .f5-m { font-size: 1rem; } .f6-m { font-size: 0.875rem; } .f7-m { font-size: 0.75rem; } } @media screen and (min-width: 60em) { .f-6-l, .f-headline-l { font-size: 6rem; } .f-5-l, .f-subheadline-l { font-size: 5rem; } .f1-l { font-size: 3rem; } .f2-l { font-size: 2.25rem; } .f3-l { font-size: 1.5rem; } .f4-l { font-size: 1.25rem; } .f5-l { font-size: 1rem; } .f6-l { font-size: 0.875rem; } .f7-l { font-size: 0.75rem; } } /* TYPOGRAPHY http://tachyons.io/docs/typography/measure/ Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Measure is limited to ~66 characters */ .measure { max-width: 30em; } /* Measure is limited to ~80 characters */ .measure-wide { max-width: 34em; } /* Measure is limited to ~45 characters */ .measure-narrow { max-width: 20em; } /* Book paragraph style - paragraphs are indented with no vertical spacing. */ .indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .small-caps { -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp"; font-variant: small-caps; } /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (min-width: 30em) { .measure-ns { max-width: 30em; } .measure-wide-ns { max-width: 34em; } .measure-narrow-ns { max-width: 20em; } .indent-ns { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .small-caps-ns { -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp"; font-variant: small-caps; } .truncate-ns { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media screen and (min-width: 30em) and (max-width: 60em) { .measure-m { max-width: 30em; } .measure-wide-m { max-width: 34em; } .measure-narrow-m { max-width: 20em; } .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .small-caps-m { -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp"; font-variant: small-caps; } .truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media screen and (min-width: 60em) { .measure-l { max-width: 30em; } .measure-wide-l { max-width: 34em; } .measure-narrow-l { max-width: 20em; } .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .small-caps-l { -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp"; font-variant: small-caps; } .truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* UTILITIES Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Equivalent to .overflow-y-scroll */ .overflow-container { overflow-y: scroll; } .center { margin-right: auto; margin-left: auto; } .mr-auto { margin-right: auto; } .ml-auto { margin-left: auto; } @media screen and (min-width: 30em){ .center-ns { margin-right: auto; margin-left: auto; } .mr-auto-ns { margin-right: auto; } .ml-auto-ns { margin-left: auto; } } @media screen and (min-width: 30em) and (max-width: 60em){ .center-m { margin-right: auto; margin-left: auto; } .mr-auto-m { margin-right: auto; } .ml-auto-m { margin-left: auto; } } @media screen and (min-width: 60em){ .center-l { margin-right: auto; margin-left: auto; } .mr-auto-l { margin-right: auto; } .ml-auto-l { margin-left: auto; } } /* VISIBILITY Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Text that is hidden but accessible Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .clip { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } @media screen and (min-width: 30em) { .clip-ns { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } } @media screen and (min-width: 30em) and (max-width: 60em) { .clip-m { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } } @media screen and (min-width: 60em) { .clip-l { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } } /* WHITE SPACE Media Query Extensions: -ns = not-small -m = medium -l = large */ .ws-normal { white-space: normal; } .nowrap { white-space: nowrap; } .pre { white-space: pre; } @media screen and (min-width: 30em) { .ws-normal-ns { white-space: normal; } .nowrap-ns { white-space: nowrap; } .pre-ns { white-space: pre; } } @media screen and (min-width: 30em) and (max-width: 60em) { .ws-normal-m { white-space: normal; } .nowrap-m { white-space: nowrap; } .pre-m { white-space: pre; } } @media screen and (min-width: 60em) { .ws-normal-l { white-space: normal; } .nowrap-l { white-space: nowrap; } .pre-l { white-space: pre; } } /* VERTICAL ALIGN Media Query Extensions: -ns = not-small -m = medium -l = large */ .v-base { vertical-align: baseline; } .v-mid { vertical-align: middle; } .v-top { vertical-align: top; } .v-btm { vertical-align: bottom; } @media screen and (min-width: 30em) { .v-base-ns { vertical-align: baseline; } .v-mid-ns { vertical-align: middle; } .v-top-ns { vertical-align: top; } .v-btm-ns { vertical-align: bottom; } } @media screen and (min-width: 30em) and (max-width: 60em) { .v-base-m { vertical-align: baseline; } .v-mid-m { vertical-align: middle; } .v-top-m { vertical-align: top; } .v-btm-m { vertical-align: bottom; } } @media screen and (min-width: 60em) { .v-base-l { vertical-align: baseline; } .v-mid-l { vertical-align: middle; } .v-top-l { vertical-align: top; } .v-btm-l { vertical-align: bottom; } } /* HOVER EFFECTS Docs: http://tachyons.io/docs/themes/hovers/ - Dim - Glow - Hide Child - Underline text - Grow - Pointer - Shadow */ /* Dim element on hover by adding the dim class. */ .dim { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } .dim:hover, .dim:focus { opacity: .5; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } .dim:active { opacity: .8; -webkit-transition: opacity .15s ease-out; transition: opacity .15s ease-out; } /* Animate opacity to 100% on hover by adding the glow class. */ .glow { -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } .glow:hover, .glow:focus { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } /* Hide child & reveal on hover: Put the hide-child class on a parent element and any nested element with the child class will be hidden and displayed on hover or focus.
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
*/ .hide-child .child { opacity: 0; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } .hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } .underline-hover:hover, .underline-hover:focus { text-decoration: underline; } /* Can combine this with overflow-hidden to make background images grow on hover * even if you are using background-size: cover */ .grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: -webkit-transform 0.25s ease-out; transition: -webkit-transform 0.25s ease-out; transition: transform 0.25s ease-out; transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; } .grow:hover, .grow:focus { -webkit-transform: scale(1.05); transform: scale(1.05); } .grow:active { -webkit-transform: scale(.90); transform: scale(.90); } .grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: -webkit-transform .25s ease-in-out; transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; } .grow-large:hover, .grow-large:focus { -webkit-transform: scale(1.2); transform: scale(1.2); } .grow-large:active { -webkit-transform: scale(.95); transform: scale(.95); } /* Add pointer on hover */ .pointer:hover { cursor: pointer; } /* Add shadow on hover. Performant box-shadow animation pattern from http://tobiasahlin.com/blog/how-to-animate-box-shadow/ */ .shadow-hover { cursor: pointer; position: relative; -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .shadow-hover::after { content: ''; -webkit-box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 ); box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; } /* Combine with classes in skins and skins-pseudo for * many different transition possibilities. */ .bg-animate, .bg-animate:hover, .bg-animate:focus { -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } /* Z-INDEX Base z = z-index Modifiers -0 = literal value 0 -1 = literal value 1 -2 = literal value 2 -3 = literal value 3 -4 = literal value 4 -5 = literal value 5 -999 = literal value 999 -9999 = literal value 9999 -max = largest accepted z-index value as integer -inherit = string value inherit -initial = string value initial -unset = string value unset MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index Spec: http://www.w3.org/TR/CSS2/zindex.html Articles: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ Tips on extending: There might be a time worth using negative z-index values. Or if you are using tachyons with another project, you might need to adjust these values to suit your needs. */ .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-4 { z-index: 4; } .z-5 { z-index: 5; } .z-999 { z-index: 999; } .z-9999 { z-index: 9999; } .z-max { z-index: 2147483647; } .z-inherit { z-index: inherit; } .z-initial { z-index: auto; z-index: initial; } .z-unset { z-index: unset; } /* NESTED Tachyons module for styling nested elements that are generated by a cms. */ .nested-copy-line-height p, .nested-copy-line-height ul, .nested-copy-line-height ol { line-height: 1.5; } .nested-headline-line-height h1, .nested-headline-line-height h2, .nested-headline-line-height h3, .nested-headline-line-height h4, .nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: 1.25; } .nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; } .nested-copy-indent p+p { text-indent: 0.1em; margin-top: 0; margin-bottom: 0; } .nested-copy-seperator p+p { margin-top: 1.5em; } .nested-img img { width: 100%; max-width: 100%; display: block; } .nested-links a { color: #5a2edf; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } .nested-links a:hover, .nested-links a:focus { color: #96ccff; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; } /* STYLES Add custom styles here. */ /* Variables */ /* Importing here will allow you to override any variables in the modules */ /* VARIABLES */ /* Debugging */ /* DEBUG CHILDREN Docs: http://tachyons.io/docs/debug/ Just add the debug class to any element to see outlines on its children. */ .debug * { outline: 1px solid gold; } .debug-white * { outline: 1px solid white; } .debug-black * { outline: 1px solid black; } /* DEBUG GRID http://tachyons.io/docs/debug-grid/ Can be useful for debugging layout issues or helping to make sure things line up perfectly. Just tack one of these classes onto a parent element. */ .debug-grid { background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; } .debug-grid-16 { background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left; } .debug-grid-8-solid { background:white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left; } .debug-grid-16-solid { background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; } /* Uncomment out the line below to help debug layout issues */ /* @import './_debug'; */ /* Copied from '@revdotcom/mars/src/css/lib/variables' to remove dependency on ultra */ :root { /* Font Size */ /* Letter Spacing */ /* Line Height */ /* Measure */ /* Spacing */ /* Height */ /* Width */ /* Max Width */ /* Border Radius */ /* Border Width */ /* Box Shadow */ /* Grayscale */ /* Blacks */ /* Whites */ /* Basic Colors */ /* Rev color palette */ /* Grays - Do not use these, use the tachyons mapping variables instead. */ /* Colors - Do not use these, use the tachyons mapping variables instead. */ /* Industry Colors */ /* Tachyons mappings - Use these variables */ /* Common style overrides */ /* Z-index master list Warning: Avoid customizing these values. They're used for a bird's eye view of components dependent on the z-axis and are designed to all work together. See FOX-22389 for details and a prior example. */ /* Z-axis values for sticky navbar in conjunction with sidemenu */ } :root { /* Dimensions and Spacing */ /* Colors */ /* Tachyons mappings */ } .dropdown{ outline: 0; } #download-captions-bic-customization #bic-customization-text .dropdown{ position: relative; } .dropdown:hover{ cursor: pointer; } .dropdown-container .dropdown-items .dropdown:hover{ background-color: #e8e6ec; } .dropdown .dropdown-menu{ position: absolute; left: 0; z-index: 999; display: none; list-style-type: none; padding-left: 0; padding-right: 0; margin-top: 0.25rem; top: 100%; } .dropdown .nested-dropdown-menu{ position: absolute; z-index: 999; list-style-type: none; padding-left: 0; padding-right: 0; left: 100%; top: 0; } .dropdown.open .dropdown-menu{ display: block; } .dropdown .dropdown-menu-border{ border-radius: 0.25rem; border-width: 0.125rem; border-color: #686470; border-style: solid; } .dropdown .dropdown-menu-box{ width: 16rem; font-size: 0.875rem; text-align: left; -webkit-box-shadow: 14px 14px 42px 5px rgba(0, 0, 0, 0.18); box-shadow: 14px 14px 42px 5px rgba(0, 0, 0, 0.18); background-color: #686470; } .dropdown.tools .dropdown-menu-box { width: 305px; } .dropdown.tools .nested-dropdown-menu{ width: 16rem; } /* Borders */ .bt--dark-gray { border-top-color: #120f19; } .br--dark-gray { border-right-color: #120f19; } .bb--dark-gray { border-bottom-color: #120f19; } .bl--dark-gray { border-left-color: #120f19; } .bt--washed-red { border-top-color: #ffdfdf; } .br--washed-red { border-right-color: #ffdfdf; } .bb--washed-red { border-bottom-color: #ffdfdf; } .bl--washed-red { border-left-color: #ffdfdf; } .bt--light-yellow { border-top-color: #fbf1a9; } .br--light-yellow { border-right-color: #fbf1a9; } .bb--light-yellow { border-bottom-color: #fbf1a9; } .bl--light-yellow { border-left-color: #fbf1a9; } .bt--transparent { border-top-color: transparent; } .br--transparent { border-right-color: transparent; } .bb--transparent { border-bottom-color: transparent; } .bl--transparent { border-left-color: transparent; } .bt-2 { border-top-width: 0.25rem; } .br-2 { border-right-width: 0.25rem; } .bb-2 { border-bottom-width: 0.25rem; } .bl-2 { border-left-width: 0.25rem; } .bt-3 { border-top-width: 0.5rem; } .br-3 { border-right-width: 0.5rem; } .bb-3 { border-bottom-width: 0.5rem; } .bl-3 { border-left-width: 0.5rem; } .bt-4 { border-top-width: 1rem; } .br-4 { border-right-width: 1rem; } .bb-4 { border-bottom-width: 1rem; } .bl-4 { border-left-width: 1rem; } .bt-5 { border-top-width: 2rem; } .br-5 { border-right-width: 2rem; } .bb-5 { border-bottom-width: 2rem; } .bl-5 { border-left-width: 2rem; } /* Height */ .h-80 { height: 80%; } .h-85 { height: 85%; } .h-90 { height: 90%; } .h-95 { height: 95%; } .h-98 { height: 98%; } /* User-select */ .nus { -ms-user-select: none; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } /* Width - See https://github.com/tachyons-css/tachyons/issues/221 */ .min-w1 { min-width: 1rem; } .min-w2 { min-width: 2rem; } .min-w3 { min-width: 4rem; } .min-w4 { min-width: 8rem; } .min-w5 { min-width: 16rem; } /* Workaround for Tachyons bug */ .nl2 { margin-left: calc(-1 * 0.5rem); } .nr2 { margin-right: calc(-1 * 0.5rem); } /* Padding tachyons for popovers */ .pl-popover { padding-left: 25px; } .pt-popover { padding-top: 25px; } .pr-popover { padding-right: 25px; } .pb-popover { padding-bottom: 25px; } .pa-popover { padding: 25px; } .pv-popover { padding-top: 25px; padding-bottom: 25px; } .ph-popover { padding-left: 25px; padding-right: 25px; } .no-pointer:hover { cursor: default; } .icon-double-arrow{ display: block; width: 16px; height: 16px; zoom: 0.5; background-image: url("/content/img/reveditor/collapse_expand.png?v=c276aa493f9eff219214b221029e8c78"); background-repeat: repeat; } .icon-double-arrow.icon-collapse { background-position: 0 0; } .icon-double-arrow.icon-expand { background-position: 17px 0; } .icon-new{ background-color: #ffdfdf; border-radius: 9999px; text-transform: uppercase; font-weight: 500; padding: 2px 4px; font-size: 8px; } .frost-scroll ::-webkit-scrollbar { width: 16px; } .frost-scroll ::-webkit-scrollbar-track{ background-color: transparent; } .frost-scroll ::-webkit-scrollbar-corner{ background-color: transparent; } .frost-scroll ::-webkit-scrollbar-thumb { background-clip: padding-box; min-height: 60px; } .frost-modal-overlay { -webkit-transition: opacity 0.15s linear 0s; transition: opacity 0.15s linear 0s } .frost-modal-overlay.ReactModal__Overlay--after-open{ opacity: 1; } .frost-modal-overlay.ReactModal__Overlay--before-close{ opacity: 0; } .frost-modal ::-webkit-scrollbar{ width: 16px; } .frost-modal ::-webkit-scrollbar-track{ background-color: transparent; } .frost-modal ::-webkit-scrollbar-corner{ background-color: transparent; } .frost-modal ::-webkit-scrollbar-thumb{ background-clip: padding-box; min-height: 60px; } .frost-modal { margin: auto; } .frost-modal ::-webkit-scrollbar-thumb{ background-color: #b9b7be; border-style: solid; border-width: 1px; border-color: transparent; border-width: 0.25rem; border-radius: 0.5rem; } .search-row-first-cell-width { width: 170px; } .search-row-third-cell-width { width: 80px; } .tool-modal { height: 640px; width: 500px; } .docx-modal { height: 200px; width: 500px; } .ascii-modal { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; width: 500px; } .word-ascii-modal { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; width: 500px; } .upload-legal-modal { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; width: 500px } .upload-legal-modal input[type="checkbox"]:checked { accent-color: #ffdfdf; } .upload-legal-modal .warning { color: #db0068; } .customer-macros-modal { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; width: 500px; } .merge-speakers-modal { height: 420px; width: 600px; } .text-expander-modal .replace-column #replace-input { width: 210px; } .text-expander-modal .with-column #with-input { width: 210px; } .text-expander-modal .divider { height: 2px; } .text-expander-modal .replace-search-result-header{ width: 170px; } .text-expander-modal .search-row .delete-icon { height: 18px; width: 18px; } .text-expander-modal .short-term-checked-icon{ margin-right: 0; right: 0; margin-top: -4px; background: url("/content/img/cpeditor/icons_sprite.png?v=c3c3fa2509d294c4b9e58af2ab96d39e"); background-repeat: no-repeat; background-position: -22px -737px; width: 40px; height: 31px; -webkit-transform: scale(0.55); transform: scale(0.55); } .text-expander-modal .edit-row div { padding-top: 2px; padding-bottom: 2px; } .text-expander-modal .edit-row div:first-child{ width: 170px; } .text-expander-modal .edit-row div:nth-child(2){ width: 170px; } .text-expander-modal .edit-row div:nth-child(3){ width: 80px; } .text-expander-modal .search-row div:first-child{ width: 170px; } .text-expander-modal .search-row div:nth-child(2){ width: 170px; } .text-expander-modal .search-row div:nth-child(3){ width: 80px; } .text-expander-modal .search-row:hover { background-color: hsl(259.9999999999999, 13.6363636364%, 95%) } .text-expander-modal .search-row:hover .delete-icon{ display: block; } .text-expander-modal .warning-message { height: 45px; letter-spacing: normal; color: #60512e; -webkit-animation-name: fadeInOpacity; animation-name: fadeInOpacity; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .large-text-edit-warning-modal { height: 162px } .large-text-edit-warning-modal .cancel-edit-button { width: 116px; } .large-text-edit-warning-modal .confirm-edit-button { width: 116px; } .reset-transcript-modal { height: 183px } .reset-transcript-modal .cancel-reset-transcript-button { width: 116px; } .reset-transcript-modal .confirm-reset-transcript-button { width: 116px; } .submit-modal { width: 500px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-height: 500px; height: auto; } .unclaim-modal { width: 500px; height: 450px } .unclaim-modal ul { list-style: none; } .unclaim-modal .problem-option-list-item { min-height: 20px; } .unclaim-modal .project-problem-textarea { max-width: 350px; max-height: 100px; } .share-video-link-modal { width: 500px; height: 140px; } .simple-editor-close-button{ background-color: #fff; position: absolute; cursor: pointer; } .dropdown-container .dropdown-items .simple-editor-close-button{ background-color: #e8e6ec; } .simple-editor-close-button{ width: 10%; mask-image: url("/content/img/temi/icons/icon-close.svg"); -webkit-mask-image: url("/content/img/temi/icons/icon-close.svg"); right: 8px; top: 8px; height: 26px; width: 26px; } .revert-to-tce-modal { width: 500px; height: 200px; } .editor-warning-modal{ position: relative; width: 500px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .job-unclaimed-modal{ position: relative; width: 500px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .modal-title{ display: inline-block; width: 100%; padding-top: 1rem; margin-top: 0.25rem; padding-left: 2rem; padding-bottom: 1rem; padding-right: 2rem; font-size: 1rem; content: " "; display: table; border-bottom-style: solid; border-bottom-width: 1px; border-color: #b9b7be; font-weight: 500; } .modal-content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .media-container video, .media-container audio { max-height: 300px; } .media-btn { /* can't use .hover-bg-gray because handles :focus as well */ } .media-btn:hover{ background-color: #686470; } .media-btn .rewind-rev-icon { width: 24px; height: 24px; background-size: 370%; background-position: -62px -63px; margin: 6px auto; } .media-btn .speed { margin: 5px auto; } .midpoint-label { width: 1px; height: 10px; } .media-setting input[type="number"] { width: 50px; height: 26px; text-indent: 10px; } .nav-option{ position: relative; } .nav-option button{ font-family: "Roboto", "Lucida Grande", "Segoe UI", Verdana, Helvetica, Arial, sans-serif; color: #fff; width: 100%; font-size: 0.875rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; background-color: inherit; text-align: left; } .nav-option button:hover, .nav-option button:active, .nav-option button:focus{ background-color: #686470; } .nav-option button:hover, .nav-option button:active, .nav-option button:focus{ color: #fff; } .nav-option.disabled button{ color: #e8e6ec; } .nav-option .check{ display: none; position: relative; background: url("/content/img/cpeditor/icons_sprite.png?v=c3c3fa2509d294c4b9e58af2ab96d39e"); background-repeat: no-repeat; background-position: -22px -737px; width: 40px; height: 31px; -webkit-transform: scale(0.55); transform: scale(0.55); } .nav-option .check.checked{ display: inline-block; } .nav-option .nested-dropdown-caret{ position: relative; margin-top: -17px; background: url("/content/img/reveditor/caret_sprite.png?v=5222cdf979a14ba6b7cad8e4454cc802"); background-repeat: no-repeat; background-position: -17px 5px; width: 40px; height: 31px; -webkit-transform: rotate(270deg); transform: rotate(270deg); } /* subset of styles from https://prosemirror.net/css/editor.css */ .ProseMirror { position: relative; word-wrap: break-word; white-space: pre-wrap; -webkit-font-variant-ligatures: none; -webkit-font-feature-settings: none; font-feature-settings: none; font-variant-ligatures: none; } .ProseMirror pre { white-space: pre-wrap; } .ProseMirror li { position: relative; } .ProseMirror-hideselection *::-moz-selection { background: transparent; } .ProseMirror-hideselection *::selection { background: transparent; } .ProseMirror-hideselection *::-moz-selection { background: transparent; } .ProseMirror-hideselection { caret-color: transparent; } .ProseMirror-selectednode { outline: 2px solid #8cf; } /* Adapted from https://popper.js.org/docs/v2/tutorial/ */ .arrow, .arrow::before{ position: absolute; } .arrow, .arrow::before { width: 8px; height: 8px; z-index: -1; } .arrow::before{ -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: #000; content: ''; } .ptt[data-popper-placement^='top'] > .arrow { bottom: -4px; } .ptt[data-popper-placement^='bottom'] > .arrow { top: -4px; } .ptt[data-popper-placement^='left'] > .arrow { right: -4px; } .ptt[data-popper-placement^='right'] > .arrow { left: -4px; } .favorite-action-icon{ vertical-align: middle; margin-top: 2px; background-repeat: no-repeat; width: 15px; height: 15px; margin-left: 5px; background-image: url('/content/img/rev/workspace/favorite_not_hover.png?v=adc0971adf6f89c981e5fda60d17bee9'); } .favorite-action-container { border-color: #8c8c8c; } .favorite-action-container:hover .favorite-action-icon:not(.favorite-action-completed) { background-image: url('/content/img/rev/workspace/favorite.png?v=5cb6dc79278b494ac9000ecf8240bbb8'); } .favorite-action-completed { background-image: url('/content/img/icons/favorite_check.png?v=91bc57b64e5bf19ade1852cd4ac353ad'); } .favorite-action-text { margin-left: 5px; } .font-options-btn:hover:not(.selected){ background-color: #b9b7be; } .font-options-btn:hover:not(.selected):hover{ cursor: pointer; } .dropdown-container .dropdown-items .font-options-btn:hover:not(.selected):hover{ background-color: #e8e6ec; } .project-details i { cursor: default; } .project-type-container .legal-edit-type, .project-type-container .verbatim, .project-type-container .non-verbatim, .project-type-container .rush { font-size: 10px; border-radius: 100px; } .deadline-notification { top: 10px; -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.5); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s } .deadline-notification.notify{ opacity: 1; -webkit-transform: translateX(10px); transform: translateX(10px); } .notification-badge { border-width: 6px; margin: 14px 5px -30px -6px; z-index: 1; } .timer-icon { height: 80px; width: 80px; } .more-time-notification-popover { width: 290px; } .customer-info-dropdown-list{ margin-top: 0.25rem; margin-bottom: 0.5rem; margin-left: 1rem; padding-left: 0; padding-right: 0; padding-bottom: 0.5rem; list-style-type: none; list-style-position: outside; list-style-type: disc; list-style-type: initial; } .customer-info-item-secondary-text{ display: block; font-style: italic; font-size: 0.75rem; white-space: normal; white-space: initial; } .customer-info-badge { width: 10px; height: 10px; left: 150px; top: 54px; } .new-customer-resource-popup { z-index: 1101; width: 285px } .new-customer-resource-popup::before{ position: absolute; border-style: solid; content: ' '; width: 0; height: 0; border-width: 10px; border-color: transparent white transparent transparent; -webkit-filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5)); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5)); left: -20px; top: 15px; } .drawer-input{ outline: 0; } #download-captions-bic-customization #bic-customization-text .drawer-input{ position: relative; } .drawer-input{ color: #fff; font-size: 0.875rem; height: 30px; } .drawer-input::-webkit-input-placeholder{ color: #e8e6ec; } .drawer-input::-moz-placeholder{ color: #e8e6ec; } .drawer-input:-ms-input-placeholder{ color: #e8e6ec; } .drawer-input::-ms-input-placeholder{ color: #e8e6ec; } .drawer-input::placeholder{ color: #e8e6ec; } .dark-input{ outline: 0; } #download-captions-bic-customization #bic-customization-text .dark-input{ position: relative; } .dark-input{ color: #fff; font-size: 0.875rem; height: 30px; } .dark-input::-webkit-input-placeholder{ color: #e8e6ec; } .dark-input::-moz-placeholder{ color: #e8e6ec; } .dark-input:-ms-input-placeholder{ color: #e8e6ec; } .dark-input::-ms-input-placeholder{ color: #e8e6ec; } .dark-input::placeholder{ color: #e8e6ec; } .dark-input{ background-color: #120f19; border-style: solid; border-width: 1px; border-color: #686470; width: 200px; border-radius: 3px; text-indent: 0.5rem; } .dark-input:focus{ border-color: #686470; } @media screen and (min-width: 1250px) and (max-width: 1470px) { .dark-input { width: 350px } } #spellcheck-menu-container #change-current-container { width: 260px } #spellcheck-menu-container #change-current-container .suggestion{ display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.25rem; margin-right: 0.25rem; border-radius: 0.25rem; width: auto; max-width: 100%; height: 1rem; padding-left: 0.25rem; padding-right: 0.25rem; font-size: 0.75rem; line-height: 1.25; padding-top: 2px; padding-bottom: 2px; } #spellcheck-menu-container #change-current-container .suggestion.selected { cursor: default; } #spellcheck-menu-container #change-current-container .change-mispelling-input{ outline: 0; } #download-captions-bic-customization #bic-customization-text #spellcheck-menu-container #change-current-container .change-mispelling-input{ position: relative; } #spellcheck-menu-container #change-current-container .change-mispelling-input{ color: #fff; font-size: 0.875rem; height: 30px; } #spellcheck-menu-container #change-current-container .change-mispelling-input::-webkit-input-placeholder{ color: #e8e6ec; } #spellcheck-menu-container #change-current-container .change-mispelling-input::-moz-placeholder{ color: #e8e6ec; } #spellcheck-menu-container #change-current-container .change-mispelling-input:-ms-input-placeholder{ color: #e8e6ec; } #spellcheck-menu-container #change-current-container .change-mispelling-input::-ms-input-placeholder{ color: #e8e6ec; } #spellcheck-menu-container #change-current-container .change-mispelling-input::placeholder{ color: #e8e6ec; } #spellcheck-menu-container #change-current-container .change-mispelling-input{ background-color: #120f19; border-style: solid; border-width: 1px; border-color: #686470; width: 100%; padding-left: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; margin-top: 0.25rem; border-radius: 3px; } #spellcheck-menu-container #change-current-container span { max-width: 55%; } #spellcheck-menu-container .actions-block .action-btn { width: 78px; margin-top: 5px; } #spellcheck-menu-container .actions-block .add-to-collection-btn div[role='tooltip']{ font-weight: 500; line-height: 1.25; height: auto; text-align: center; max-width: 200px; } .match-case-container { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .search-menu-control-container{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 1rem; width: 100%; } @media screen and (max-width: 1470px) { .search-menu-control-container{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media screen and (max-width: 1470px) { .search-menu-control-container > div{ width: 100%; padding-top: 0.5rem; padding-bottom: 0.5rem; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } @media screen and (max-width: 1470px) { .search-menu-control-container button { width: 110px } } .current-search{ background-color: #96ccff; } .search-result { background-color: #6c7172; } .find-container{ outline: 0; } #download-captions-bic-customization #bic-customization-text .find-container{ position: relative; } .find-container{ color: #fff; font-size: 0.875rem; height: 30px; } .find-container::-webkit-input-placeholder{ color: #e8e6ec; } .find-container::-moz-placeholder{ color: #e8e6ec; } .find-container:-ms-input-placeholder{ color: #e8e6ec; } .find-container::-ms-input-placeholder{ color: #e8e6ec; } .find-container::placeholder{ color: #e8e6ec; } .find-container{ background-color: #120f19; border-style: solid; border-width: 1px; border-color: #686470; width: 200px; border-radius: 3px; text-indent: 0.5rem; } .find-container:focus{ border-color: #686470; } @media screen and (min-width: 1250px) and (max-width: 1470px) { .find-container{ width: 350px; } } .find-container{ cursor: text; } .find-container[focus-within]{ border-style: none; border-width: 0; } .find-container:focus-within{ border-style: none; border-width: 0; } .find-container .find-input{ outline: 0; } #download-captions-bic-customization #bic-customization-text .find-container .find-input{ position: relative; } .find-container .find-input{ color: #fff; font-size: 0.875rem; height: 30px; } .find-container .find-input::-webkit-input-placeholder{ color: #e8e6ec; } .find-container .find-input::-moz-placeholder{ color: #e8e6ec; } .find-container .find-input:-ms-input-placeholder{ color: #e8e6ec; } .find-container .find-input::-ms-input-placeholder{ color: #e8e6ec; } .find-container .find-input::placeholder{ color: #e8e6ec; } .find-container .find-input{ width: 70%; height: 100%; background-color: transparent; border-style: none; border-width: 0; text-indent: 0.5rem; } .replace-controls-container{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media screen and (min-width: 1250px) { .replace-controls-container{ padding-right: 1rem; } } @media screen and (max-width: 1470px) { .replace-controls-container button:last-child{ margin-right: 0; } } .frost-button{ font-family: "Roboto", "Lucida Grande", "Segoe UI", Verdana, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 0.875rem; } .frost-button:not(.disabled):hover{ cursor: pointer; } .dropdown-container .dropdown-items .frost-button:not(.disabled):hover{ background-color: #e8e6ec; } .frost-button { height: 30px; border-radius: 3px; } .frost-small-primary-button{ font-family: "Roboto", "Lucida Grande", "Segoe UI", Verdana, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 0.875rem; } .frost-small-primary-button:not(.disabled):hover{ cursor: pointer; } .dropdown-container .dropdown-items .frost-small-primary-button:not(.disabled):hover{ background-color: #e8e6ec; } .frost-small-primary-button{ height: 30px; border-radius: 3px; color: #fff; background-color: #ffdfdf; } .frost-small-primary-button:hover:not(.disabled){ background-color: #e7040f; } .frost-small-primary-button.disabled{ opacity: .5; } .frost-small-secondary-button{ font-family: "Roboto", "Lucida Grande", "Segoe UI", Verdana, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 0.875rem; } .frost-small-secondary-button:not(.disabled):hover{ cursor: pointer; } .dropdown-container .dropdown-items .frost-small-secondary-button:not(.disabled):hover{ background-color: #e8e6ec; } .frost-small-secondary-button{ height: 30px; border-radius: 3px; color: #686470; background-color: #b9b7be; } .frost-small-secondary-button:hover:not(.disabled){ background-color: #b9b7be; } .frost-small-secondary-button.disabled{ background-color: #e8e6ec; } .picture-in-picture-toggle{ position: absolute; padding: 0.5rem; font-size: 0.75rem; color: #fff; } .picture-in-picture-toggle:hover{ cursor: pointer; } .dropdown-container .dropdown-items .picture-in-picture-toggle:hover{ background-color: #e8e6ec; } .hide-child .picture-in-picture-toggle{ opacity: 0; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } .hide-child:hover .picture-in-picture-toggle, .hide-child:focus .picture-in-picture-toggle, .hide-child:active .picture-in-picture-toggle{ opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; } .picture-in-picture-toggle{ z-index: 1000; right: 5px; top: 5px; background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; } .picture-in-picture-toggle:hover { background-color: rgba(0, 0, 0, 0.4); } .picture-in-picture-toggle.active { background-color: rgba(255, 255, 255, 0.2) } .picture-in-picture-toggle.active:hover { background-color: rgba(255, 255, 255, 0.4); } .picture-in-picture-toggle .material-icons { margin-right: 6px; font-size: 17px; vertical-align: middle; } .picture-in-picture-toggle .reattach-video-icon{ margin-right: 0.5rem; vertical-align: middle; display: inline-block; height: 15px; width: 15px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M13.3333 13.8333H1.66667V2.16667H7.5V0.5H1.66667C0.74167 0.5 0 1.25 0 2.16667V13.8333C0 14.75 0.74167 15.5 1.66667 15.5H13.3333C14.25 15.5 15 14.75 15 13.8333V8H13.3333V13.8333ZM9.79997 11.5333V9.86663H6.80837L15 1.675L13.825 0.5L5.63337 8.69163V5.69997H3.96667V11.5333H9.79997Z' fill='white'/%3E %3C/svg%3E"); } /* Copied from curve/styles/components/bell.css to remove dependency on ultra */ .bell-icon-base{ display: inline-block; height: 33px; width: 33px; background-image: url("/content/img/icons/icon-bell-hover-workspace.svg?v=942033ad92f2699efe9f426cc7ec050c"); } .bell-icon-selected{ display: inline-block; height: 33px; width: 33px; background-image: url("/content/img/icons/icon-bell-hover-workspace.svg?v=942033ad92f2699efe9f426cc7ec050c"); } .bell-icon{ display: inline-block; height: 33px; width: 33px; background-image: url("/content/img/icons/icon-bell-hover-workspace.svg?v=942033ad92f2699efe9f426cc7ec050c"); background: url("/content/img/icons/icon-bell-workspace.svg?v=aad7d0ec918b244b8818f1ecbd820111") no-repeat; /*Needs to come after the background property */ background-repeat: no-repeat; background-position: center center; } .bell-icon:hover{ display: inline-block; height: 33px; width: 33px; background-image: url("/content/img/icons/icon-bell-hover-workspace.svg?v=942033ad92f2699efe9f426cc7ec050c"); } /* Copied from curve/styles/components/loader.css to remove dependency on ultra */ .loader, .loader::before, .loader::after { border-radius: 50%; width: 2em; height: 2em; -webkit-animation: load 1.8s infinite ease-in-out both; animation: load 1.8s infinite ease-in-out both; } .loader{ margin-left: 1rem; margin-right: 1rem; color: #fff; font-size: 6px; position: relative; bottom: 2.5em; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .loader::before, .loader::after{ top: 0; } .loader::before, .loader::after { content: ''; position: absolute; } .loader::before { left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loader::after { left: 3.5em; } @-webkit-keyframes load { 0%, 80%, 100% { -webkit-box-shadow: 0 2.5em 0 -1.3em; box-shadow: 0 2.5em 0 -1.3em; } 40% { -webkit-box-shadow: 0 2.5em 0 0; box-shadow: 0 2.5em 0 0; } } @keyframes load { 0%, 80%, 100% { -webkit-box-shadow: 0 2.5em 0 -1.3em; box-shadow: 0 2.5em 0 -1.3em; } 40% { -webkit-box-shadow: 0 2.5em 0 0; box-shadow: 0 2.5em 0 0; } } /* Copied from curve/styles/components/spinner.css to remove dependency on ultra */ .spinner, .spinner::after { border-radius: 50%; width: 10em; height: 10em; } .spinner{ position: relative; margin: 0; font-size: 5px; text-indent: -9999em; /*copy these borders and override the colors when using them */ border-top: 1.1em solid rgba(255, 255, 255, 0.2); border-right: 1.1em solid rgba(255, 255, 255, 0.2); border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); border-left: 1.1em solid #fff; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: spin 1.1s infinite linear; animation: spin 1.1s infinite linear; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .frost-default-font { font-family: "Roboto", "Lucida Grande", "Segoe UI", Verdana, Helvetica, Arial, sans-serif; } .roboto { font-family: Roboto, sans-serif; } .monaco { font-family: monaco, Consolas, Lucida Console, monospace; } .frost-editor-scroll ::-webkit-scrollbar{ width: 16px; } .frost-editor-scroll ::-webkit-scrollbar-track{ background-color: transparent; } .frost-editor-scroll ::-webkit-scrollbar-corner{ background-color: transparent; } .frost-editor-scroll ::-webkit-scrollbar-thumb{ background-clip: padding-box; min-height: 60px; } .frost-editor-scroll ::-webkit-scrollbar-thumb{ background-color: #686470; border-width: 0.25rem; border-style: solid; border-color: transparent; -webkit-border-radius: 8px; } /* Normal */ @font-face { font-family: "ProximaNova"; font-style: normal; font-weight: 400; font-display: swap; src: url("/content/fonts/proximanova/7e90123f-e4a7-4689-b41f-6bcfe331c00a.eot?v=6eea6e842ba9c6b37f2d89964ecbb8cf#iefix"); src: local('ProximaNova-Regular'), url("/content/fonts/proximanova/7e90123f-e4a7-4689-b41f-6bcfe331c00a.eot?v=6eea6e842ba9c6b37f2d89964ecbb8cf#iefix") format("eot"), url("/content/fonts/proximanova/64017d81-9430-4cba-8219-8f5cc28b923e.woff2?v=6ea158615870bc50f95c02a54cd5fcc2") format("woff2"), url("/content/fonts/proximanova/e56ecb6d-da41-4bd9-982d-2d295bec9ab0.woff?v=4da0bf5bc4a85c1dff9f1592a8975b45") format("woff"), url("/content/fonts/proximanova/2aff4f81-3e97-4a83-9e6c-45e33c024796.ttf?v=ee04a90b376bf9a8257338b28a6bdaca") format("truetype"), url("/content/fonts/proximanova/ab9cd062-380f-4b53-b1a7-c0bec7402235.svg?v=1b5cc79281fcb110dba8600e34f09f56#ab9cd062-380f-4b53-b1a7-c0bec7402235") format("svg"); } @font-face { font-family: "ProximaNova"; font-style: normal; font-weight: 500; font-display: swap; src: url("/content/fonts/proximanova/fbc6b03a-b3a1-427c-a884-053deca3a53c.eot?v=0a479eb9d4890710c76f25f113c08ba7#iefix"); src: local('ProximaNova-Bold'), url("/content/fonts/proximanova/fbc6b03a-b3a1-427c-a884-053deca3a53c.eot?v=0a479eb9d4890710c76f25f113c08ba7#iefix") format("eot"), url("/content/fonts/proximanova/0d416408-95c6-4ad7-b08d-e60573d3b37d.woff2?v=a8247d40cfb59ac33b26041dd8af364a") format("woff2"), url("/content/fonts/proximanova/d999c07b-a049-4eb5-b8a6-4f36ae25e67e.woff?v=a2cbc85c361ad3c49f43293af0504618") format("woff"), url("/content/fonts/proximanova/4d4a75f5-d32a-4a09-8665-133afd39cc37.ttf?v=2b2fda2c768d20511e5c36964a65b361") format("truetype"), url("/content/fonts/proximanova/8152bc4e-d700-4c78-b6be-326893e6f53f.svg?v=f40a8918e7cc4de20896d244231ddc16#8152bc4e-d700-4c78-b6be-326893e6f53f") format("svg"); } @font-face { font-family: "ProximaNova"; font-style: normal; font-weight: 700; font-display: swap; src: url("/content/fonts/proximanova/fbc6b03a-b3a1-427c-a884-053deca3a53c.eot?v=0a479eb9d4890710c76f25f113c08ba7#iefix"); src: local('ProximaNova-Bold'), url("/content/fonts/proximanova/fbc6b03a-b3a1-427c-a884-053deca3a53c.eot?v=0a479eb9d4890710c76f25f113c08ba7#iefix") format("eot"), url("/content/fonts/proximanova/0d416408-95c6-4ad7-b08d-e60573d3b37d.woff2?v=a8247d40cfb59ac33b26041dd8af364a") format("woff2"), url("/content/fonts/proximanova/d999c07b-a049-4eb5-b8a6-4f36ae25e67e.woff?v=a2cbc85c361ad3c49f43293af0504618") format("woff"), url("/content/fonts/proximanova/4d4a75f5-d32a-4a09-8665-133afd39cc37.ttf?v=2b2fda2c768d20511e5c36964a65b361") format("truetype"), url("/content/fonts/proximanova/8152bc4e-d700-4c78-b6be-326893e6f53f.svg?v=f40a8918e7cc4de20896d244231ddc16#8152bc4e-d700-4c78-b6be-326893e6f53f") format("svg"); } @font-face { font-family: "ProximaNova"; font-style: normal; font-weight: 900; font-display: swap; src: url("/content/fonts/proximanova/9fbce143-f5db-4c0b-9159-b1e666079f67.eot?v=784b386bcc7a0e0c71ba2417c6ebc349#iefix"); src: local('ProximaNova-ExtraBold'), url("/content/fonts/proximanova/9fbce143-f5db-4c0b-9159-b1e666079f67.eot?v=784b386bcc7a0e0c71ba2417c6ebc349#iefix") format("eot"), url("/content/fonts/proximanova/eb39afe0-709e-46d6-92ad-db5c3bfd24a9.woff2?v=24c707913a952493ab251ca014e24b35") format("woff2"), url("/content/fonts/proximanova/19dd5cf2-ac2d-48d5-901a-c432fd291ee2.woff?v=90db5e613935a9e765f43663f4d0da1a") format("woff"), url("/content/fonts/proximanova/22cfbfa4-f607-4751-92eb-6fa194353e57.ttf?v=1c1c724134077dfcaf8186fbb1fc9e2e") format("truetype"), url("/content/fonts/proximanova/3d6b6348-e05f-4123-b19a-3bfd02c7f361.svg?v=1a7f5461276df034437d6dcdedaa4853#3d6b6348-e05f-4123-b19a-3bfd02c7f361") format("svg"); } /* VARIABLES */ :root { /* Font Size */ /* Letter Spacing */ /* Line Height */ /* Measure */ /* Spacing */ /* Height */ /* Width */ /* Max Width */ /* Border Radius */ /* Border Width */ /* Box Shadow */ /* Grayscale */ /* Blacks */ /* Whites */ /* Basic Colors */ /* Ultra Colors - Do not use these variables, use tachyons mapped names instead. */ /* Industry Colors */ /* Tachyons mappings - Use these variables */ /* Common style overrides */ /* Z-index master list Warning: Avoid customizing these values. They're used for a bird's eye view of components dependent on the z-axis and are designed to all work together. See FOX-22389 for details and a prior example. */ /* Z-axis values for sticky navbar in conjunction with sidemenu */ } .rubik, .roboto, .proximanova, .open-sans, .inter { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .raleway { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .lora { font-family: 'Lora', serif; } /* Sticky footer implementation via https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */ #site-content { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; /* No tachyon for this */ } .link:focus { -webkit-transition: color 0.15s ease-in; transition: color 0.15s ease-in; outline: #5a2edf auto 5px; } button{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; border-style: none; border-width: 0; } /* Commonly needed line-height for which there is no tachyon */ .lh-large { line-height: 1.7; } h1, h4{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } h1, h4{ font-weight: 900; } h2{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; } h3{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 500; } body{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .modal-container { top: 50%; left: 50% } .modal-container:focus { outline-color: transparent; outline-style: none; } .modal-container { /* content width assigned on an individual basis as bootstrap conflicts with tachyons */ } .modal-container .content{ overflow-y: auto; z-index: 10000; max-height: 100vh; } .modal-container .body-container{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /*1 */ min-height: 0; /*1 */ padding: 30px; } .modal-container .title-row { padding: 15px 30px } .modal-container .title-row div { line-height: 24px; } .modal-container .fade-slide.in{ opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out, opacity 0.3s ease-out; transition: transform 0.3s ease-out, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; } .modal-container .fade-slide.out{ opacity: 0; -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); visibility: hidden; -webkit-transition: visibility 0s 0.3s, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; transition: visibility 0s 0.3s, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out, visibility 0s 0.3s, opacity 0.3s ease-out; transition: transform 0.3s ease-out, visibility 0s 0.3s, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; } #download-captions-bic-customization{ margin-top: 1rem; overflow: visible; max-width: 450px; min-height: 220px; } #download-captions-bic-customization #save-styling-setting{ cursor: pointer; } .dropdown-container .dropdown-items #download-captions-bic-customization #save-styling-setting{ background-color: #e8e6ec; } #download-captions-bic-customization #save-styling-setting input{ cursor: pointer; } .dropdown-container .dropdown-items #download-captions-bic-customization #save-styling-setting input{ background-color: #e8e6ec; } #download-captions-bic-customization #bic-customization-text{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 0.75rem; } #download-captions-bic-customization #bic-customization-text button{ border-radius: 0.25rem; font-family: serif; width: 40px; height: 40px; font-size: 22px; } #download-captions-bic-customization #bic-customization-text button #bold-toggle { margin-left: auto; margin-right: auto; content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='18' viewBox='0 0 15 18' fill='%23686470' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M11.5 8.4875C12.7125 7.65 13.5625 6.275 13.5625 5C13.5625 2.175 11.375 0 8.5625 0H0.75V17.5H9.55C12.1625 17.5 14.1875 15.375 14.1875 12.7625C14.1875 10.8625 13.1125 9.2375 11.5 8.4875ZM4.5 3.125H8.25C9.2875 3.125 10.125 3.9625 10.125 5C10.125 6.0375 9.2875 6.875 8.25 6.875H4.5V3.125ZM8.875 14.375H4.5V10.625H8.875C9.9125 10.625 10.75 11.4625 10.75 12.5C10.75 13.5375 9.9125 14.375 8.875 14.375Z'/%3E %3C/svg%3E"); } #download-captions-bic-customization #bic-customization-text button #italic-toggle { margin-left: auto; margin-right: auto; content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='%23686470' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M5.5 0V3.75H8.2625L3.9875 13.75H0.5V17.5H10.5V13.75H7.7375L12.0125 3.75H15.5V0H5.5Z'/%3E %3C/svg%3E"); } #download-captions-bic-customization #bic-customization-text #bic-font-select-container { width: 38% } #download-captions-bic-customization #bic-customization-text #bic-font-select-container .dropdown-container .selected-item{ padding-left: 0.5rem; } #download-captions-bic-customization #bic-customization-text #bic-fontsize-select-container { width: 17%; } #download-captions-bic-customization #bic-customization-text .dropdown-container{ width: 100%; position: absolute; } #download-captions-bic-customization #bic-customization-text .dropdown-items { position: unset; max-height: 8.4rem; } #download-captions-bic-customization #bic-customization-text .outline-0 { position: relative; } #download-captions-bic-customization #bic-customization-text #bic-font-select-container .dropdown-container .dropdown-items { left: inherit; width: calc(450 * 0.38px); /* [#download-captions-bic-customization max-width] * [#bic-font-select-container width] */ } #download-captions-bic-customization #bic-customization-text #bic-fontsize-select-container .dropdown-container .dropdown-items { left: inherit; width: calc(450 * 0.17px); /* [#download-captions-bic-customization max-width] * [#bic-fontsize-select-container width] */ } #download-captions-bic-customization #bic-customization-text #bic-text-color-button{ display: inline-block; padding-left: 0; padding-left: initial; padding-right: 0; padding-right: initial; } #download-captions-bic-customization #bic-customization-text #bic-text-color-button svg{ vertical-align: middle; } #download-captions-bic-customization #bic-customization-text #bic-text-alignment-button { width: 48px } #download-captions-bic-customization #bic-customization-text #bic-text-alignment-button #bic-text-alignment { margin-left: auto; margin-right: auto; content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='32' height='18' viewBox='0 0 32 18' fill='%23686470' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 12V14H14V12H4ZM0 18H18V16H0V18ZM0 10H18V8H0V10ZM4 4V6H14V4H4ZM0 0V2H18V0H0Z'/%3E %3Cpath d='M22.8335 8.3335L27.0002 12.5002L31.1668 8.3335H22.8335Z'/%3E %3C/svg%3E"); } #download-captions-bic-customization #bic-customization-text .selected { background-color: #b9b7be; } #download-captions-bic-customization #bic-customization-background{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 0.75rem; } #download-captions-bic-customization #bic-customization-background button { width: 40px; height: 40px; border-radius: 3px; } #download-captions-bic-customization #bic-customization-background .singleselect-buttons-container{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 89%; } #download-captions-bic-customization #bic-customization-background .singleselect-buttons-container .singleselect-button{ background-color: #fff; border-style: solid; border-width: 1px; border-radius: 0.25rem; border-color: #e8e6ec; text-transform: uppercase; width: 32%; } #download-captions-bic-customization #bic-customization-background .singleselect-buttons-container .selected { background-color: #b9b7be; } #download-captions-bic-customization #bic-customization-background #bic-border-color-button { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } #download-captions-bic-customization #bic-customization-background #bic-border-color-button > div{ border-radius: 100%; width: 20px; height: 20px; margin-left: auto; margin-right: auto; } #download-captions-bic-customization #bic-customization-background #bic-border-color-button.disabled > div { content: url('/content/img/base-download/disabled-icon.svg'); } #download-captions-bic-customization #bic-customization-preview{ width: 100%; height: 100%; text-align: center; margin-bottom: 1rem; } #download-captions-bic-customization #bic-customization-preview .inner-container{ display: inline-block; position: relative; } #download-captions-bic-customization #bic-customization-preview .inner-container .video-overlay{ width: 100%; position: absolute; bottom: 10px; margin-bottom: 10px; padding: 5px 5px; pointer-events: none; /*Needed so media controls take precedence in Safari */ } #download-captions-bic-customization .modal-popover .popover-arrow { border-bottom-color: #e8e6ec; } #download-captions-bic-customization .modal-popover .colorpicker-body{ border-radius: 0.25rem; padding: 0.5rem; background-color: #e8e6ec; } #download-captions-bic-customization .modal-popover .colorpicker-body .colorbox-container{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #download-captions-bic-customization .modal-popover .colorpicker-body .colorbox-container .colorbox{ border-radius: 0.25rem; height: 32px; width: 32px; } #download-captions-bic-customization .modal-popover .colorpicker-body .colorhex{ width: 100%; margin-top: 0.5rem; margin-bottom: 0; border-style: none; border-radius: 0.125rem; height: 40px; font-family: Rubik, sans-serif; } #download-captions-bic-customization .modal-popover .alignment-body{ border-radius: 0.25rem; padding: 0.5rem; background-color: #e8e6ec; /*stylelint-disable no-descending-specificity, declaration-no-important */ } #download-captions-bic-customization .modal-popover .alignment-body .singleselect-buttons-container{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #download-captions-bic-customization .modal-popover .alignment-body .singleselect-buttons-container .singleselect-button{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 32px !important; height: 32px !important; background-color: #e8e6ec; font-size: 0 !important; } #download-captions-bic-customization .modal-popover .alignment-body .singleselect-buttons-container .singleselect-button > div { padding-top: 7px; width: 18px !important; height: 25px !important; } #download-captions-bic-customization .modal-popover .alignment-body .singleselect-buttons-container .selected { background-color: #b9b7be; } #download-captions-bic-customization .modal-popover .alignment-body .singleselect-buttons-container #bic-textalign-h-1 { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='%23686470' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 12H0V14H12V12ZM12 4H0V6H12V4ZM0 10H18V8H0V10ZM0 18H18V16H0V18ZM0 0V2H18V0H0Z'/%3E %3C/svg%3E"); } #download-captions-bic-customization .modal-popover .alignment-body .singleselect-buttons-container #bic-textalign-h-2 { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='%23686470' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 12V14H14V12H4ZM0 18H18V16H0V18ZM0 10H18V8H0V10ZM4 4V6H14V4H4ZM0 0V2H18V0H0Z'/%3E %3C/svg%3E"); } #download-captions-bic-customization .modal-popover .alignment-body .singleselect-buttons-container #bic-textalign-h-3 { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='%23686470' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M0 18H18V16H0V18ZM6 14H18V12H6V14ZM0 10H18V8H0V10ZM6 6H18V4H6V6ZM0 0V2H18V0H0Z'/%3E %3C/svg%3E"); } #download-captions-bic-customization .modal-popover .alignment-body .singleselect-buttons-container #bic-textalign-v-3 { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='17' height='18' viewBox='0 0 17 18' fill='%23686470' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12.5 10H9.5V0H7.5V10H4.5L8.5 14L12.5 10ZM0.5 16V18H16.5V16H0.5Z'/%3E %3C/svg%3E"); } #download-captions-bic-customization .modal-popover .alignment-body .singleselect-buttons-container #bic-textalign-v-2 { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='22' viewBox='0 0 16 22' fill='%23686470' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 18H7V22H9V18H12L8 14L4 18ZM12 4H9V0H7V4H4L8 8L12 4ZM0 10V12H16V10H0Z'/%3E %3C/svg%3E"); } #download-captions-bic-customization .modal-popover .alignment-body .singleselect-buttons-container #bic-textalign-v-1 { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='%23686470' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 8H7V18H9V8H12L8 4L4 8ZM0 0V2H16V0H0Z'/%3E %3C/svg%3E"); } #download-captions-bic-customization .modal-popover .alignment-body { /* stylelint-enable no-descending-specificity, declaration-no-important */ } #download-captions-bic-customization .modal-popover .alignment-body .singleselect-buttons-container.bic-textalign-v { margin-top: 10px; } .offset-container{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 1rem; margin-top: 0.5rem; } .offset-container .offset-control-container{ position: relative; display: inline-block; width: 70px; } .offset-container .offset-control-container.none{ display: none; } .offset-container .offset-header{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .offset-container .offset-label{ color: #b9b7be; display: inline-block; width: 100%; text-align: center; font-size: 0.75rem; } .offset-container .offset-info-icon{ font-size: 1rem; } .offset-container .offset-form{ border-color: #e8e6ec; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 3px; border: solid 1px #e2e2e2; height: 50px; } .offset-container .border-gap::before{ position: absolute; display: block; top: 0; right: 0; width: 1px; height: 50%; content: ''; background: #e2e2e2; } .offset-container .border-gap::after{ position: absolute; display: block; bottom: 0; right: 0; width: 1px; height: 10%; content: ''; background: #e2e2e2; } .fa-info-circle:hover{ cursor: pointer; } .dropdown-container .dropdown-items .fa-info-circle:hover{ background-color: #e8e6ec; } .fa-info-circle{ font-size: 0.875rem; margin-left: 5px; } #offset-controls span{ position: absolute; top: 45%; left: 96%; z-index: 1; } #offset-controls input[type="text"].offset-control{ height: 100%; outline: 0; } #download-captions-bic-customization #bic-customization-text #offset-controls input[type="text"].offset-control{ position: relative; } #offset-controls input[type="text"].offset-control{ text-align: center; font-size: 0.875rem; border-style: none; border-width: 0; padding: 0; margin-bottom: 0; width: 95%; -webkit-box-shadow: none; box-shadow: none; text-indent: 3px; } #offset-controls input[type="text"].offset-control:focus { -webkit-box-shadow: none; -moz-box-shadow: none; } @font-face { font-family: 'Noto Sans'; src: url('/content/fonts/noto-sans/NotoSans-Regular.eot?v=414d77fcb5f79b35d739f254defe71ff'); src: url('/content/fonts/noto-sans/NotoSans-Regular.eot?v=414d77fcb5f79b35d739f254defe71ff') format('embedded-opentype'), url('/content/fonts/noto-sans/NotoSans-Regular.woff2?v=18ee0d0af8b384cac85c606c16d25c1a') format('woff2'), url('/content/fonts/noto-sans/NotoSans-Regular.woff?v=6955f3baefa6738f326d40f58eff9647') format('woff'), url('/content/fonts/noto-sans/NotoSans-Regular.ttf?v=5a87cce84010f7cea085ae218d44a64b') format('truetype'), url('/content/fonts/noto-sans/NotoSans-Regular.svg?v=f2ef6d8af91264fbc2b01086d3963332') format('svg'); } @font-face { font-family: 'Tiresias Infofont'; src: url('/content/fonts/tiresias-infofont/Tiresias_Infofont.eot?v=115453bd0c3e554b0493c8b1e420bcfa'); src: url('/content/fonts/tiresias-infofont/Tiresias_Infofont.eot?v=115453bd0c3e554b0493c8b1e420bcfa') format('embedded-opentype'), url('/content/fonts/tiresias-infofont/Tiresias_Infofont.woff2?v=55b33701fc18efc20f6c390a50032c6f') format('woff2'), url('/content/fonts/tiresias-infofont/Tiresias_Infofont.woff?v=fae5a5705d2cb77689876d936d3749c9') format('woff'), url('/content/fonts/tiresias-infofont/Tiresias_Infofont.ttf?v=f2354560146869fddf1471617d66c0e6') format('truetype'), url('/content/fonts/tiresias-infofont/Tiresias_Infofont.svg?v=057847cf73f8ca9ba353c29a00fcef90') format('svg'); } @font-face { font-family: 'STIX Two Text'; src: url('/content/fonts/stix-two-text/STIXText-Regular.eot?v=3dbbb5e5982f441e6c043b7cebce9d45'); src: url('/content/fonts/stix-two-text/STIXText-Regular.eot?v=3dbbb5e5982f441e6c043b7cebce9d45') format('embedded-opentype'), url('/content/fonts/stix-two-text/STIXText-Regular.woff2?v=b574c81280d54d6c22c1b162cb954cde') format('woff2'), url('/content/fonts/stix-two-text/STIXText-Regular.woff?v=af142ff77b20d3bb461801a49d39921f') format('woff'), url('/content/fonts/stix-two-text/STIXText-Regular.ttf?v=01f47132eb514c9c1cd6b935cee2c0c3') format('truetype'), url('/content/fonts/stix-two-text/STIXText-Regular.svg?v=649de65881ac0d24ffa0f8443f1679fc') format('svg'); } @font-face { font-family: 'Ubuntu'; src: url('/content/fonts/ubuntu/Ubuntu-Regular.eot?v=876bee358205ee68e4f5101935da434d'); src: url('/content/fonts/ubuntu/Ubuntu-Regular.eot?v=876bee358205ee68e4f5101935da434d') format('embedded-opentype'), url('/content/fonts/ubuntu/Ubuntu-Regular.woff2?v=798db93f1b5591601451a0d8e686ede0') format('woff2'), url('/content/fonts/ubuntu/Ubuntu-Regular.woff?v=4d9d2279f389528377ef97b18b43e806') format('woff'), url('/content/fonts/ubuntu/Ubuntu-Regular.ttf?v=2505bfbd9bde14a7829cc8c242a0d25c') format('truetype'), url('/content/fonts/ubuntu/Ubuntu-Regular.svg?v=8eaf326792ed58197bd7facb00691ce5') format('svg'); } @font-face { font-family: 'Poppins'; src: url('/content/fonts/poppins/Poppins-Regular.eot?v=b3db09911a392213d55dba0d31566caf'); src: url('/content/fonts/poppins/Poppins-Regular.eot?v=b3db09911a392213d55dba0d31566caf') format('embedded-opentype'), url('/content/fonts/poppins/Poppins-Regular.woff2?v=81f9dd27f1fb93cb2777ce14a555b00e') format('woff2'), url('/content/fonts/poppins/Poppins-Regular.woff?v=734b8856356acb3bb786f27971ac5dc5') format('woff'), url('/content/fonts/poppins/Poppins-Regular.ttf?v=8b6af8e5e8324edfd77af8b3b35d7f9c') format('truetype'), url('/content/fonts/poppins/Poppins-Regular.svg?v=102ce25b4c114240c7c8e6f1a1be25d3') format('svg'); } @font-face { font-family: 'Nunito Sans'; src: url('/content/fonts/nunito-sans/NunitoSans-Regular.eot?v=862c3a631fc069066a0b8d1e8d5a44c8'); src: url('/content/fonts/nunito-sans/NunitoSans-Regular.eot?v=862c3a631fc069066a0b8d1e8d5a44c8') format('embedded-opentype'), url('/content/fonts/nunito-sans/NunitoSans-Regular.woff2?v=ca54f41ecd4b11c5d2dfa130884f9753') format('woff2'), url('/content/fonts/nunito-sans/NunitoSans-Regular.woff?v=65c1316596f0d34adecf999bde71dc31') format('woff'), url('/content/fonts/nunito-sans/NunitoSans-Regular.ttf?v=4c8f447011eef80831b45edb1e5971e0') format('truetype'), url('/content/fonts/nunito-sans/NunitoSans-Regular.svg?v=8ec098640d14e1e0363808920b2dfce8') format('svg'); } @font-face { font-family: 'Source Sans Pro'; src: url('/content/fonts/source-sans-pro/SourceSansPro-Regular.eot?v=c3f0d588533a8e2f5d8c6bce12da602f'); src: url('/content/fonts/source-sans-pro/SourceSansPro-Regular.eot?v=c3f0d588533a8e2f5d8c6bce12da602f') format('embedded-opentype'), url('/content/fonts/source-sans-pro/SourceSansPro-Regular.woff2?v=faca96360777424244827d242835ceba') format('woff2'), url('/content/fonts/source-sans-pro/SourceSansPro-Regular.woff?v=5cdda80bfeaa79d86e40703133591095') format('woff'), url('/content/fonts/source-sans-pro/SourceSansPro-Regular.ttf?v=c1678b46f7dd3f50ceac94ed4e0ad01a') format('truetype'), url('/content/fonts/source-sans-pro/SourceSansPro-Regular.svg?v=e315ff9099c7fa33c15f4193fb62d58f') format('svg'); } #download-captions-modal-base { top: auto; top: initial; } #back-arrow{ text-transform: uppercase; font-weight: 500; letter-spacing: 2px; color: #5a2edf; } #download-captions-modal-base .content { max-height: 90vh; top: 10vh; border-radius: 6px; max-width: 100vw; } @media screen and (max-width: 30em) { #download-captions-modal { width: 290px; } } #download-captions-modal .dropdown-title{ color: #686470; } @media screen and (min-width: 30em) and (max-width: 60em) { #download-captions-modal .dropdown-container { width: 100%; max-width: 26.875rem; } } /* OffsetComponent styles */ #download-captions-modal .offset-container{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } #download-captions-modal .offset-header{ margin-bottom: 1rem; margin-left: 0; font-weight: 500; width: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #download-captions-modal #offset-controls{ display: -webkit-box; display: -ms-flexbox; display: flex; } @media screen and (min-width: 30em) { #download-captions-modal #offset-controls { width: 428px } } #download-captions-modal .offset-control-container{ width: auto; } #download-captions-modal .offset-form{ margin-left: 0; width: 100%; max-width: 26.875rem; } #download-captions-modal .offset-label{ margin-bottom: 0.25rem; } #download-captions-modal .offset-control-container .separator{ color: #686470; left: auto; right: -1px; top: 49%; z-index: 0; } #download-captions-modal{ line-height: 1.5; } #download-captions-modal a{ cursor: pointer; } .dropdown-container .dropdown-items #download-captions-modal a{ background-color: #e8e6ec; } #download-captions-modal button{ cursor: pointer; } .dropdown-container .dropdown-items #download-captions-modal button{ background-color: #e8e6ec; } #download-captions-btn { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 15px 15px; } #back-button{ padding-top: 0.5rem; padding-bottom: 0.5rem; margin-right: 0.5rem; font-weight: 500; padding-left: 35px; padding-right: 35px; font-family: 'Roboto', 'Lucida Grande', 'Segoe UI', 'Verdana', 'Helvetica', 'Arial', sans-serif; } #download-captions-modal input[type="checkbox"]{ margin-top: 0; margin-bottom: 0; margin-right: 0.5rem; } #download-captions-modal #offset-controls, #download-captions-modal #offset-controls .offset-control{ height: auto; } #download-captions-modal #offset-controls, #download-captions-modal #offset-controls .offset-control{ font-size: 0.875rem; } #download-captions-modal .offset-info-icon{ height: 1rem; width: 1rem; } #download-captions-modal .infotip{ background-repeat: no-repeat; background-position: center center; margin-left: 0.5rem; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 19 19' fill='%23120f19'%3E %3Cg fill-rule='evenodd'%3E %3Cpath d='M8.9 13a.231.231 0 0 1-.17-.07.231.231 0 0 1-.07-.17V8.04c0-.067.023-.123.07-.17a.231.231 0 0 1 .17-.07h.83c.073 0 .132.023.175.07a.24.24 0 0 1 .065.17v4.72a.24.24 0 0 1-.065.17.227.227 0 0 1-.175.07H8.9zm-.04-6.06a.231.231 0 0 1-.17-.07.231.231 0 0 1-.07-.17v-.72c0-.067.023-.123.07-.17a.231.231 0 0 1 .17-.07h.91c.073 0 .133.023.18.07.047.047.07.103.07.17v.72a.231.231 0 0 1-.07.17.244.244 0 0 1-.18.07h-.91z'/%3E %3Cpath fill-rule='nonzero' d='M9.5 18.5a9 9 0 1 1 0-18 9 9 0 0 1 0 18zm0-1a8 8 0 1 0 0-16 8 8 0 0 0 0 16z'/%3E %3C/g%3E %3C/svg%3E"); width: 20px; height: 20px; } #download-captions-modal .material-icons.arrow-right::before { content: 'keyboard_arrow_right'; } #download-captions-modal .material-icons.arrow-down::before { content: 'keyboard_arrow_down'; } /* Burnt-in caption customization */ #download-captions-modal .bic-styling-options .singleselect-radios-container{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 0.5rem; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #download-captions-modal .bic-styling-options .singleselect-radios-container label{ display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 0.5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0.875rem; font-weight: normal; border-style: solid; border-width: 1px; border-radius: 0.25rem; border-color: #b9b7be; width: 46%; height: 34px; font-family: Rubik, sans-serif; color: #120f19; background-color: #e8e6ec; border-color: #b4b4b4; } #download-captions-modal .bic-styling-options .singleselect-radios-container label input{ margin-top: 0; margin-right: 0.5rem; } #download-captions-modal .bic-styling-options .singleselect-radios-container label.checked { color: #fff; background-color: #120f19; border-color: #2b2b2b; } #generating-burnt-in-video-notice { max-width: 490px; } #customer-approve-caption-before-subtitles-body { max-width: 500px; font-size: 14px; line-height: 20px; } #customer-approve-caption-before-subtitles-body button { font-family: 'Roboto', 'Lucida Grande', 'Segoe UI', 'Verdana', 'Helvetica', 'Arial', sans-serif; padding: 10px 35px 10px 35px; } #customer-approve-caption-before-subtitles-cancel-button { background: #686470; color: #fff; margin-right: 10px; } #customer-approve-caption-before-subtitles-cancel-button:hover { background: #686470; } .button,button{border-width:0;border-style:none} .button{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;outline-offset:4px;outline-color:#888;font-weight:600} .button:focus{outline-style:solid;outline-width:1px} .button{padding:.5rem 2rem} .button:hover{cursor:pointer} .button:disabled,.button:disabled:hover{background-color:#f7f7f8;color:#fff} .button:disabled:hover{cursor:not-allowed} .button-normal{font-weight:600;padding:.5rem 2rem;font-size:.875rem} @media screen and (min-width:30em){.button-normal{padding-top:1rem;padding-bottom:1rem}} .button-large{text-align:center;font-size:1rem;padding:1rem 2rem;text-transform:none} .base-button{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .base-button:focus{outline-style:solid;outline-width:1px} .base-button:hover{cursor:pointer} .base-button:disabled,.base-button:disabled:hover{background-color:#a6a8ab;color:#fff} .base-button:disabled:hover{cursor:not-allowed} .button-red{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .button-red:focus{outline-style:solid;outline-width:1px} .button-red{color:#fff;background-color:#5614eb} .button-red:hover{color:#5614eb;background-color:#ddd0fb;cursor:pointer} .button-red:active{color:#fff;background-color:#3c0baa;cursor:pointer} .button-red:disabled,.button-red:disabled:hover{background-color:#a6a8ab;color:#fff} .button-red:disabled:hover{cursor:not-allowed} .button-blue{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .button-blue:focus{outline-style:solid;outline-width:1px} .button-blue{color:#fff;background-color:#5614eb} .button-blue:hover{color:#5614eb;background-color:#ddd0fb;cursor:pointer} .button-blue:active{color:#fff;background-color:#3c0baa;cursor:pointer} .button-blue:disabled,.button-blue:disabled:hover{background-color:#a6a8ab;color:#fff} .button-blue:disabled:hover{cursor:not-allowed} .button-green{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .button-green:focus{outline-style:solid;outline-width:1px} .button-green{color:#fff;background-color:#000} .button-green:hover{color:#000;background-color:#666;cursor:pointer} .button-green:active{color:#fff;background-color:#3c0baa;cursor:pointer} .button-green:disabled,.button-green:disabled:hover{background-color:#a6a8ab;color:#fff} .button-green:disabled:hover{cursor:not-allowed} .button-purple{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .button-purple:focus{outline-style:solid;outline-width:1px} .button-purple{color:#fff;background-color:#280579} .button-purple:hover{color:#280579;background-color:#8452f8;cursor:pointer} .button-purple:active{color:#fff;background-color:#3c0baa;cursor:pointer} .button-purple:disabled,.button-purple:disabled:hover{background-color:#a6a8ab;color:#fff} .button-purple:disabled:hover{cursor:not-allowed} .button-dark-blue{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .button-dark-blue:focus{outline-style:solid;outline-width:1px} .button-dark-blue{color:#fff;background-color:#000} .button-dark-blue:hover{color:#000;background-color:#666;cursor:pointer} .button-dark-blue:active{color:#fff;background-color:#3c0baa;cursor:pointer} .button-dark-blue:disabled,.button-dark-blue:disabled:hover{background-color:#a6a8ab;color:#fff} .button-dark-blue:disabled:hover{cursor:not-allowed} .button-gray{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .button-gray:focus{outline-style:solid;outline-width:1px} .button-gray{color:#fff;background-color:#6e6f71} .button-gray:hover{color:#6e6f71;background-color:#d5d5d6;cursor:pointer} .button-gray:active{color:#fff;background-color:#3c0baa;cursor:pointer} .button-gray:disabled,.button-gray:disabled:hover{background-color:#a6a8ab;color:#fff} .button-gray:disabled:hover{cursor:not-allowed} .base-button-dark-gray{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .base-button-dark-gray:focus{outline-style:solid;outline-width:1px} .base-button-dark-gray{color:#fff;background-color:#000} .base-button-dark-gray:hover{color:#000;background-color:#666;cursor:pointer} .base-button-dark-gray:active{color:#fff;background-color:#3c0baa;cursor:pointer} .base-button-dark-gray:disabled{background-color:#a6a8ab;color:#fff} .base-button-dark-gray:disabled:hover{background-color:#a6a8ab;color:#fff;cursor:not-allowed} .button-black{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .button-black:focus{outline-style:solid;outline-width:1px} .button-black{color:#fff;background-color:#000} .button-black:hover{color:#000;background-color:#666;cursor:pointer} .button-black:active{color:#fff;background-color:#3c0baa;cursor:pointer} .button-black:disabled,.button-black:disabled:hover{background-color:#a6a8ab;color:#fff} .button-black:disabled:hover{cursor:not-allowed} .button-base-outline{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:1px;border-style:solid;outline-offset:4px;outline-color:#888;font-weight:600} .button-base-outline:focus{outline-style:solid;outline-width:1px} .button-base-outline{background-color:transparent;padding-top:calc(1rem - 1px);padding-bottom:calc(1rem - 1px)} .button-base-outline:hover{background-color:transparent;cursor:pointer} .button-base-outline:disabled,.button-base-outline:disabled:hover{background-color:transparent;color:#a6a8ab;border-color:#a6a8ab} .button-base-outline:disabled:hover{cursor:not-allowed} @media screen and (min-width:30em){.button-base-outline{padding-top:calc(1rem - 1px);padding-bottom:calc(1rem - 1px)}} .button-red-outline{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:1px;border-style:solid;outline-offset:4px;outline-color:#888;font-weight:600} .button-red-outline:focus{outline-style:solid;outline-width:1px} .button-red-outline{color:#5614eb;background-color:transparent;padding-top:calc(1rem - 1px);padding-bottom:calc(1rem - 1px);border-color:rgba(86,20,235,.5)} .button-red-outline:hover{color:#5614eb;background-color:#ddd0fb;border-color:#5614eb;cursor:pointer} .button-red-outline:active{color:#3c0baa;background-color:transparent;border-color:#3c0baa;cursor:pointer} .button-red-outline:disabled,.button-red-outline:disabled:hover{background-color:transparent;color:#a6a8ab;border-color:#a6a8ab} .button-red-outline:disabled:hover{cursor:not-allowed} @media screen and (min-width:30em){.button-red-outline{padding-top:calc(1rem - 1px);padding-bottom:calc(1rem - 1px)}} .button-blue-outline{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:1px;border-style:solid;outline-offset:4px;outline-color:#888;font-weight:600} .button-blue-outline:focus{outline-style:solid;outline-width:1px} .button-blue-outline{color:#5614eb;background-color:transparent;padding-top:calc(1rem - 1px);padding-bottom:calc(1rem - 1px);border-color:rgba(86,20,235,.5)} .button-blue-outline:hover{color:#5614eb;background-color:#ddd0fb;border-color:#5614eb;cursor:pointer} .button-blue-outline:active{color:#3c0baa;background-color:transparent;border-color:#3c0baa;cursor:pointer} .button-blue-outline:disabled,.button-blue-outline:disabled:hover{background-color:transparent;color:#a6a8ab;border-color:#a6a8ab} .button-blue-outline:disabled:hover{cursor:not-allowed} @media screen and (min-width:30em){.button-blue-outline{padding-top:calc(1rem - 1px);padding-bottom:calc(1rem - 1px)}} .button-gray-outline{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:1px;border-style:solid;outline-offset:4px;outline-color:#888;font-weight:600} .button-gray-outline:focus{outline-style:solid;outline-width:1px} .button-gray-outline{color:#000;background-color:transparent;padding-top:calc(1rem - 1px);padding-bottom:calc(1rem - 1px);border-color:rgba(0,0,0,.5)} .button-gray-outline:hover{color:#000;background-color:#666;border-color:#000;cursor:pointer} .button-gray-outline:active{color:#3c0baa;background-color:transparent;border-color:#3c0baa;cursor:pointer} .button-gray-outline:disabled,.button-gray-outline:disabled:hover{background-color:transparent;color:#a6a8ab;border-color:#a6a8ab} .button-gray-outline:disabled:hover{cursor:not-allowed} @media screen and (min-width:30em){.button-gray-outline{padding-top:calc(1rem - 1px);padding-bottom:calc(1rem - 1px)}} .button-white-outline{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:1px;border-style:solid;outline-offset:4px;outline-color:#888;font-weight:600} .button-white-outline:focus{outline-style:solid;outline-width:1px} .button-white-outline{color:#fff;background-color:transparent;padding-top:calc(1rem - 1px);padding-bottom:calc(1rem - 1px);border-color:hsla(0,0%,100%,.5)} .button-white-outline:hover{color:#fff;background-color:#fff;border-color:#fff;cursor:pointer} .button-white-outline:active{color:#3c0baa;background-color:transparent;border-color:#3c0baa;cursor:pointer} .button-white-outline:disabled,.button-white-outline:disabled:hover{background-color:transparent;color:#a6a8ab;border-color:#a6a8ab} .button-white-outline:disabled:hover{cursor:not-allowed} @media screen and (min-width:30em){.button-white-outline{padding-top:calc(1rem - 1px);padding-bottom:calc(1rem - 1px)}} .button-light-gray-outline{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:1px;border-style:solid;outline-offset:4px;outline-color:#888;font-weight:600} .button-light-gray-outline:focus{outline-style:solid;outline-width:1px} .button-light-gray-outline{color:#a6a8ab;background-color:transparent;padding-top:calc(1rem - 1px);padding-bottom:calc(1rem - 1px);border-color:rgba(166,168,171,.5)} .button-light-gray-outline:hover{color:#a6a8ab;background-color:#fff;border-color:#a6a8ab;cursor:pointer} .button-light-gray-outline:active{color:#3c0baa;background-color:transparent;border-color:#3c0baa;cursor:pointer} .button-light-gray-outline:disabled,.button-light-gray-outline:disabled:hover{background-color:transparent;color:#a6a8ab;border-color:#a6a8ab} .button-light-gray-outline:disabled:hover{cursor:not-allowed} @media screen and (min-width:30em){.button-light-gray-outline{padding-top:calc(1rem - 1px);padding-bottom:calc(1rem - 1px)}} .button-base-text{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .button-base-text:focus{outline-style:solid;outline-width:1px} .button-base-text{background-color:transparent;padding-left:0;padding-right:0} .button-base-text:hover{background-color:transparent;cursor:pointer} .button-base-text:disabled,.button-base-text:disabled:hover{background-color:transparent;color:#a6a8ab} .button-base-text:disabled:hover{cursor:not-allowed} .button-red-text{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .button-red-text:focus{outline-style:solid;outline-width:1px} .button-red-text{color:#5614eb;background-color:transparent} .button-red-text:hover{cursor:pointer} .button-red-text:disabled{background-color:transparent;color:#a6a8ab} .button-red-text:active{color:#3c0baa;background-color:transparent} .button-red-text:disabled:hover{background-color:transparent;color:#a6a8ab;cursor:not-allowed} .button-blue-text{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .button-blue-text:focus{outline-style:solid;outline-width:1px} .button-blue-text{color:#5614eb;background-color:transparent} .button-blue-text:hover{cursor:pointer} .button-blue-text:disabled{background-color:transparent;color:#a6a8ab} .button-blue-text:active{color:#3c0baa;background-color:transparent} .button-blue-text:disabled:hover{background-color:transparent;color:#a6a8ab;cursor:not-allowed} .button-green-text{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .button-green-text:focus{outline-style:solid;outline-width:1px} .button-green-text{color:#000;background-color:transparent} .button-green-text:hover{cursor:pointer} .button-green-text:disabled{background-color:transparent;color:#a6a8ab} .button-green-text:active{color:#3c0baa;background-color:transparent} .button-green-text:disabled:hover{background-color:transparent;color:#a6a8ab;cursor:not-allowed} .button-gray-text{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;border-radius:.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;border-width:0;border-style:none;outline-offset:4px;outline-color:#888;font-weight:600} .button-gray-text:focus{outline-style:solid;outline-width:1px} .button-gray-text{color:#a6a8ab;background-color:transparent} .button-gray-text:hover{cursor:pointer} .button-gray-text:disabled{background-color:transparent;color:#a6a8ab} .button-gray-text:active{color:#3c0baa;background-color:transparent} .button-gray-text:disabled:hover{background-color:transparent;color:#a6a8ab;cursor:not-allowed} .button-small{padding:.5rem 2rem;font-size:.75rem;text-transform:none} .button-minimal{font-size:.875rem;text-transform:none} .button-light-purple{ font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif; border-radius:.25rem; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; text-decoration:none; border-width:0; border-style:none; outline-offset:4px; outline-color:#888; font-weight:600; } .button-light-purple:focus{ outline-style:solid; outline-width:1px; } .button-light-purple:hover{ cursor:pointer; } .button-light-purple:disabled, .button-light-purple:disabled:hover{ background-color:#a6a8ab; color:#fff; } .button-light-purple:disabled:hover{ cursor:not-allowed; } .button-light-purple{ color: #fff; background-color: #3c0baa; } .button-light-purple:hover { color: #2e1a69; background-color: #a99cfc; } /* Outlined button colors */ .button-light-purple-outline{ font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif; border-radius:.25rem; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; text-decoration:none; border-width:1px; border-style:solid; outline-offset:4px; outline-color:#888; font-weight:600; } .button-light-purple-outline:focus{ outline-style:solid; outline-width:1px; } .button-light-purple-outline{ background-color:transparent; padding-top:calc(1rem - 1px); padding-bottom:calc(1rem - 1px); } .button-light-purple-outline:hover{ background-color:transparent; cursor:pointer; } .button-light-purple-outline:disabled, .button-light-purple-outline:disabled:hover{ background-color:transparent; color:#a6a8ab; border-color:#a6a8ab; } .button-light-purple-outline:disabled:hover{ cursor:not-allowed; } @media screen and (min-width:30em){ .button-light-purple-outline{ padding-top:calc(1rem - 1px); padding-bottom:calc(1rem - 1px); } } .button-light-purple-outline{ color: #5614eb; border-color: #5614eb; } .button-light-purple-outline:hover { color: #2e1a69; border-color: #a99cfc; } .subscription-button{ font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif; border-radius:.25rem; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; text-decoration:none; border-width:0; border-style:none; outline-offset:4px; outline-color:#888; font-weight:600; } .subscription-button:focus{ outline-style:solid; outline-width:1px; } .subscription-button:hover{ cursor:pointer; } .subscription-button:disabled, .subscription-button:disabled:hover{ background-color:#a6a8ab; color:#fff; } .subscription-button:disabled:hover{ cursor:not-allowed; } .subscription-button{ color: #fff; background-color: #3c0baa; } .subscription-button:hover{ color: #2e1a69; background-color: #a99cfc; } .subscription-button{ font-weight: 800; text-transform: capitalize; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; border-radius: 9999px; font-size: 0.875rem; letter-spacing: 0.1em; height: 3rem; width: 7rem; } .text-input{font-family:inherit;font-size:1rem;color:#000;border:1px solid #dfe0e1;background-color:#fff;border-radius:.5rem;padding-left:1rem;padding-right:1rem;-webkit-transition:border .2s linear;transition:border .2s linear} .text-input:hover{border-color:#a6a8ab} .text-input:focus{outline-style:solid;outline-color:transparent;border-color:#515253;-webkit-transition:none;transition:none} .text-input:disabled{background-color:#ebebeb;color:#a6a8ab;cursor:not-allowed} .text-input:disabled:hover{border-color:#dfe0e1} .text-input[aria-invalid=true]{border-color:#cd261d} .text-input[aria-invalid=true]:hover{border-color:#b32119} .text-input[aria-invalid=true]:focus{border-color:#5614eb} .text-input::-webkit-input-placeholder{color:#6e6f71} .text-input::-moz-placeholder{color:#6e6f71} .text-input:-ms-input-placeholder{color:#6e6f71} .text-input::-ms-input-placeholder{color:#6e6f71} .text-input::placeholder{color:#6e6f71} .text-input-row{font-family:inherit;font-size:1rem;color:#000;border:1px solid #dfe0e1;background-color:#fff;border-radius:.5rem;padding-left:1rem;padding-right:1rem;-webkit-transition:border .2s linear;transition:border .2s linear} .text-input-row:hover{border-color:#a6a8ab} .text-input-row:focus{outline-style:solid;outline-color:transparent;border-color:#515253;-webkit-transition:none;transition:none} .text-input-row:disabled{background-color:#ebebeb;color:#a6a8ab;cursor:not-allowed} .text-input-row:disabled:hover{border-color:#dfe0e1} .text-input-row[aria-invalid=true]{border-color:#cd261d} .text-input-row[aria-invalid=true]:hover{border-color:#b32119} .text-input-row[aria-invalid=true]:focus{border-color:#5614eb} .text-input-row::-webkit-input-placeholder{color:#6e6f71} .text-input-row::-moz-placeholder{color:#6e6f71} .text-input-row:-ms-input-placeholder{color:#6e6f71} .text-input-row::-ms-input-placeholder{color:#6e6f71} .text-input-row::placeholder{color:#6e6f71} .text-input-row{height:3rem} .text-input-row.error{font-family:inherit;font-size:1rem;color:#000;border-radius:.25rem;height:3rem;padding-left:1rem;padding-right:1rem;-webkit-transition:border .2s linear,-webkit-box-shadow .2s linear;transition:border .2s linear,-webkit-box-shadow .2s linear;transition:border .2s linear,box-shadow .2s linear;transition:border .2s linear,box-shadow .2s linear,-webkit-box-shadow .2s linear;border:1px solid #cd261d} .text-input-row.error:hover{border-color:#b32119} .text-input-row.error:focus{border-color:#5614eb} .text-input-row.error::-webkit-input-placeholder{color:#6e6f71} .text-input-row.error::-moz-placeholder{color:#6e6f71} .text-input-row.error:-ms-input-placeholder{color:#6e6f71} .text-input-row.error::-ms-input-placeholder{color:#6e6f71} .text-input-row.error::placeholder{color:#6e6f71} .text-input.error{border-color:#cd261d} .text-input.error:hover{border-color:#b32119} .text-input.error:focus{border-color:#5614eb} .text-input.error::-webkit-input-placeholder{color:#6e6f71} .text-input.error::-moz-placeholder{color:#6e6f71} .text-input.error:-ms-input-placeholder{color:#6e6f71} .text-input.error::-ms-input-placeholder{color:#6e6f71} .text-input.error::placeholder{color:#6e6f71} .text-input-label{text-transform:uppercase;font-size:.875rem;font-weight:400;font-style:normal;vertical-align:middle;color:#515253;letter-spacing:.1em;line-height:1.5} .field-validation-error{font-size:.875rem;font-weight:400;line-height:normal;color:#cd261d;padding-top:.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center} .label-required:after{content:"*";color:currentcolor;display:inline} .text-input-area{outline:0;font-size:1rem;-webkit-box-shadow:inset 0 1px 3px 0 hsla(0,0%,41.6%,.15);box-shadow:inset 0 1px 3px 0 hsla(0,0%,41.6%,.15);border-radius:.25rem;border:1px solid #dfe0e1;padding-left:1rem;padding-right:1rem;font-family:inherit;-webkit-transition:border .2s linear,-webkit-box-shadow .2s linear;transition:border .2s linear,-webkit-box-shadow .2s linear;transition:border .2s linear,box-shadow .2s linear;transition:border .2s linear,box-shadow .2s linear,-webkit-box-shadow .2s linear;padding-top:1rem} .text-input-area:hover{border:1px solid #a6a8ab} .text-input-area:focus{outline:1px solid transparent;border-color:#5614eb;-webkit-transition:none;transition:none;-webkit-box-shadow:0 0 0 2px #5614eb,inset 0 1px 3px 0 hsla(0,0%,41.6%,.15);box-shadow:0 0 0 2px #5614eb,inset 0 1px 3px 0 hsla(0,0%,41.6%,.15)} .text-input-area:disabled{background-color:#f7f7f8;color:#a6a8ab;cursor:not-allowed} .v-text-input{font-family:inherit;font-size:.875rem;color:#000;border:1px solid #dfe0e1;background-color:#fff;border-radius:.5rem;padding-left:1rem;padding-right:1rem;-webkit-transition:border .2s linear;transition:border .2s linear} .v-text-input:hover{border-color:#a6a8ab} .v-text-input:focus{outline-style:solid;outline-color:transparent;border-color:#515253;-webkit-transition:none;transition:none} .v-text-input:disabled{background-color:#ebebeb;color:#a6a8ab;cursor:not-allowed} .v-text-input:disabled:hover{border-color:#dfe0e1} .v-text-input[aria-invalid=true]{border-color:#cd261d} .v-text-input[aria-invalid=true]:hover{border-color:#b32119} .v-text-input[aria-invalid=true]:focus{border-color:#5614eb} .v-text-input::-webkit-input-placeholder{color:#6e6f71} .v-text-input::-moz-placeholder{color:#6e6f71} .v-text-input:-ms-input-placeholder{color:#6e6f71} .v-text-input::-ms-input-placeholder{color:#6e6f71} .v-text-input::placeholder{color:#6e6f71} .v-text-input{height:2.5rem} .v-text-input-large{font-family:inherit;font-size:1rem;color:#000;border:1px solid #dfe0e1;background-color:#fff;border-radius:.5rem;padding-left:1rem;padding-right:1rem;-webkit-transition:border .2s linear;transition:border .2s linear} .v-text-input-large:hover{border-color:#a6a8ab} .v-text-input-large:focus{outline-style:solid;outline-color:transparent;border-color:#515253;-webkit-transition:none;transition:none} .v-text-input-large:disabled{background-color:#ebebeb;color:#a6a8ab;cursor:not-allowed} .v-text-input-large:disabled:hover{border-color:#dfe0e1} .v-text-input-large[aria-invalid=true]{border-color:#cd261d} .v-text-input-large[aria-invalid=true]:hover{border-color:#b32119} .v-text-input-large[aria-invalid=true]:focus{border-color:#5614eb} .v-text-input-large::-webkit-input-placeholder{color:#6e6f71} .v-text-input-large::-moz-placeholder{color:#6e6f71} .v-text-input-large:-ms-input-placeholder{color:#6e6f71} .v-text-input-large::-ms-input-placeholder{color:#6e6f71} .v-text-input-large::placeholder{color:#6e6f71} .v-text-input-large{height:3rem} .v-text-input-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column} .v-text-input-label{text-transform:uppercase;font-size:.875rem;font-weight:400;font-style:normal;vertical-align:middle;color:#515253;letter-spacing:.1em;line-height:1.33;padding-bottom:.5rem} .v-helper-text{color:#000} .v-helper-text,.v-helper-text.v-error{font-size:.875rem;font-weight:400;line-height:normal;padding-top:.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center} .v-helper-text.v-error{color:#cd261d} .loader, .loader::before, .loader::after { border-radius: 50%; width: 2em; height: 2em; -webkit-animation: load 1.8s infinite ease-in-out both; animation: load 1.8s infinite ease-in-out both; } .loader{ margin-left: 1rem; margin-right: 1rem; color: #fff; font-size: 6px; position: relative; bottom: 2.5em; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .loader::before, .loader::after{ top: 0; } .loader::before, .loader::after { content: ''; position: absolute; } .loader::before { left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loader::after { left: 3.5em; } @keyframes load { 0%, 80%, 100% { -webkit-box-shadow: 0 2.5em 0 -1.3em; box-shadow: 0 2.5em 0 -1.3em; } 40% { -webkit-box-shadow: 0 2.5em 0 0; box-shadow: 0 2.5em 0 0; } } #share-transcript-modal .content{ width: 100%; max-width: 500px; } .share-transcript-modal .close-button:hover{ cursor: pointer; } .dropdown-container .dropdown-items .share-transcript-modal .close-button:hover{ background-color: #e8e6ec; } .share-transcript-modal .close-button { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M10.713 9.253c.192.21.287.458.287.744a.971.971 0 01-.287.716.971.971 0 01-.716.287 1.07 1.07 0 01-.744-.287L5.5 6.962l-3.753 3.752a1.035 1.035 0 01-1.432 0A.927.927 0 010 9.998c0-.286.105-.534.315-.744L4.04 5.5.315 1.747A1.018 1.018 0 010 1.003C0 .716.105.477.315.286a1.036 1.036 0 011.432 0L5.5 4.04 9.253.286A1.07 1.07 0 019.997 0c.287 0 .526.095.716.286.192.191.287.43.287.717 0 .286-.095.534-.287.744L6.962 5.5l3.752 3.753z'/%3E%3C/svg%3E"); width: 11px; height: 11px; } .share-transcript-modal .shareby-toggle{ color: #5a2edf; } .share-transcript-modal .shareby-toggle:hover{ cursor: pointer; } .dropdown-container .dropdown-items .share-transcript-modal .shareby-toggle:hover{ background-color: #e8e6ec; } .share-transcript-modal .shareby-toggle{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .share-transcript-modal .shareby-toggle.link{ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 30em) { .share-transcript-modal .shareby-toggle.mobile-toggle-link{ display: -webkit-box; display: -ms-flexbox; display: flex; } } .share-transcript-modal .shareby-area .modal-text{ font-weight: 500; } .share-transcript-modal .shareby-area .share-link { background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='7' xmlns='http://www.w3.org/2000/svg' fill='%235a2edf'%3E%3Cpath d='M9.766 0c.583 0 1.125.156 1.625.469.5.313.893.737 1.18 1.273.286.536.429 1.122.429 1.758 0 .636-.143 1.222-.43 1.758-.286.536-.68.96-1.18 1.273-.5.313-1.041.469-1.624.469H7.14V5.66h2.625c.354 0 .687-.097 1-.293.312-.195.56-.46.742-.795.182-.335.273-.692.273-1.072 0-.38-.09-.737-.273-1.072-.182-.335-.43-.6-.742-.795a1.854 1.854 0 0 0-1-.293H7.14V0h2.625zm-5.86 4.187V2.813h5.188v1.374H3.906zM1.22 3.5c0 .38.09.737.273 1.072.182.335.43.6.742.795.313.196.646.293 1 .293H5.86V7H3.234a3.009 3.009 0 0 1-1.625-.469A3.313 3.313 0 0 1 .43 5.258 3.671 3.671 0 0 1 0 3.5c0-.636.143-1.222.43-1.758.286-.536.68-.96 1.18-1.273A3.009 3.009 0 0 1 3.233 0H5.86v1.34H3.234c-.354 0-.687.097-1 .293-.312.195-.56.46-.742.795A2.208 2.208 0 0 0 1.22 3.5z' fill-rule='nonzero' fill='%235a2edf'/%3E%3C/svg%3E"); width: 13px; height: 7px; margin-right: 6px; } .share-transcript-modal .shareby-area .inputs-container{ display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin-bottom: 10px; } .share-transcript-modal .shareby-area .inputs-container .share-email-addresses{ border-top-right-radius: 0; border-bottom-right-radius: 0; font-size: 0.875rem; padding-right: 1rem; -webkit-box-shadow: none; box-shadow: none; } .share-transcript-modal .shareby-area .custom-select:hover{ cursor: pointer; } .dropdown-container .dropdown-items .share-transcript-modal .shareby-area .custom-select:hover{ background-color: #e8e6ec; } .share-transcript-modal .shareby-area .custom-select .dropdown-menu{ width: 100%; font-size: 0.875rem; } .share-transcript-modal .shareby-area .custom-select div.dropdown-btn{ width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } .share-transcript-modal .shareby-area .permission-select { margin-bottom: 10px; } .share-transcript-modal .shareby-area .email-permission-select, .share-transcript-modal .shareby-area .link-permission-select { background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center; background-size: 8px 10px; } .share-transcript-modal .shareby-area .email-permission-select{ font-size: 0.875rem; border-style: solid; border-width: 1px; border-color: #e8e6ec; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0; border-radius: 0 4px 4px 0; height: 3rem; width: 104px; } .share-transcript-modal .shareby-area.link .dropdown{ width: 100%; } .share-transcript-modal .shareby-area .link-permission-select{ font-size: 0.875rem; border-style: solid; border-width: 1px; border-color: #e8e6ec; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0; height: 3rem; } .share-transcript-modal .shareby-area .share-email-message{ font-family:inherit; font-size:1rem; color:#000; border:1px solid #dfe0e1; background-color:#fff; border-radius:.5rem; padding-left:1rem; padding-right:1rem; -webkit-transition:border .2s linear; transition:border .2s linear; } .share-transcript-modal .shareby-area .share-email-message:hover{ border-color:#a6a8ab; } .share-transcript-modal .shareby-area .share-email-message:focus{ outline-style:solid; outline-color:transparent; border-color:#515253; -webkit-transition:none; transition:none; } .share-transcript-modal .shareby-area .share-email-message:disabled{ background-color:#ebebeb; color:#a6a8ab; cursor:not-allowed; } .share-transcript-modal .shareby-area .share-email-message:disabled:hover{ border-color:#dfe0e1; } .share-transcript-modal .shareby-area .share-email-message[aria-invalid=true]{ border-color:#cd261d; } .share-transcript-modal .shareby-area .share-email-message[aria-invalid=true]:hover{ border-color:#b32119; } .share-transcript-modal .shareby-area .share-email-message[aria-invalid=true]:focus{ border-color:#5614eb; } .share-transcript-modal .shareby-area .share-email-message::-webkit-input-placeholder{ color:#6e6f71; } .share-transcript-modal .shareby-area .share-email-message::-moz-placeholder{ color:#6e6f71; } .share-transcript-modal .shareby-area .share-email-message:-ms-input-placeholder{ color:#6e6f71; } .share-transcript-modal .shareby-area .share-email-message::-ms-input-placeholder{ color:#6e6f71; } .share-transcript-modal .shareby-area .share-email-message::placeholder{ color:#6e6f71; } .share-transcript-modal .shareby-area .share-email-message.error{ border-color:#cd261d; } .share-transcript-modal .shareby-area .share-email-message.error:hover{ border-color:#b32119; } .share-transcript-modal .shareby-area .share-email-message.error:focus{ border-color:#5614eb; } .share-transcript-modal .shareby-area .share-email-message.error::-webkit-input-placeholder{ color:#6e6f71; } .share-transcript-modal .shareby-area .share-email-message.error::-moz-placeholder{ color:#6e6f71; } .share-transcript-modal .shareby-area .share-email-message.error:-ms-input-placeholder{ color:#6e6f71; } .share-transcript-modal .shareby-area .share-email-message.error::-ms-input-placeholder{ color:#6e6f71; } .share-transcript-modal .shareby-area .share-email-message.error::placeholder{ color:#6e6f71; } .share-transcript-modal .shareby-area .share-email-message{ font-size: 0.875rem; padding: 1rem; max-width: 100%; min-width: 100%; min-height: 110px; max-height: 110px; overflow-y: auto; -webkit-box-shadow: none; box-shadow: none; } .share-transcript-modal .shareby-area .share-email-error{ font-size:.875rem; font-weight:400; line-height:normal; color:#cd261d; padding-top:.5rem; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; } .share-transcript-modal .shareby-area #copy-button{ border-top-left-radius: 0; border-bottom-left-radius: 0; font-weight:600; padding:.5rem 2rem; font-size:.875rem; } @media screen and (min-width:30em){ .share-transcript-modal .shareby-area #copy-button{ padding-top:1rem; padding-bottom:1rem; } } .share-transcript-modal .shareby-area #copy-button{ font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif; border-radius:.25rem; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; text-decoration:none; border-width:0; border-style:none; outline-offset:4px; outline-color:#888; font-weight:600; } .share-transcript-modal .shareby-area #copy-button:focus{ outline-style:solid; outline-width:1px; } .share-transcript-modal .shareby-area #copy-button{ color:#fff; background-color:#5614eb; } .share-transcript-modal .shareby-area #copy-button:hover{ color:#5614eb; background-color:#ddd0fb; cursor:pointer; } .share-transcript-modal .shareby-area #copy-button:active{ color:#fff; background-color:#3c0baa; cursor:pointer; } .share-transcript-modal .shareby-area #copy-button:disabled, .share-transcript-modal .shareby-area #copy-button:disabled:hover{ background-color:#a6a8ab; color:#fff; } .share-transcript-modal .shareby-area #copy-button:disabled:hover{ cursor:not-allowed; } .share-transcript-modal .shareby-area #copy-button{ color: #fff; background-color: #5614eb; } .share-transcript-modal .shareby-area #copy-button:hover{ background-color: #280579; } .share-transcript-modal .shareby-area #copy-button{ height: 3rem; line-height: normal; line-height: initial; width: 104px; } .share-transcript-modal .shareby-area .share-url { margin-bottom: 1.5rem; } .share-transcript-modal .shareby-area .x-mark{ background-repeat: no-repeat; background-position: center center; background-size: contain!important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' fill='%235a2edf'%3E%3Cpath d='M10.714 9.253c.19.21.286.458.286.744a.972.972 0 0 1-.286.717.972.972 0 0 1-.717.286 1.07 1.07 0 0 1-.744-.286L5.5 6.96l-3.753 3.753a1.036 1.036 0 0 1-1.432 0A.928.928 0 0 1 0 9.997c0-.286.105-.534.315-.744L4.04 5.5.315 1.747A1.018 1.018 0 0 1 0 1.003C0 .716.105.477.315.286a1.036 1.036 0 0 1 1.432 0L5.5 4.04 9.253.286A1.07 1.07 0 0 1 9.997 0 .976.976 0 0 1 11 1.003c0 .286-.095.534-.286.744L6.96 5.5l3.753 3.753z'/%3E%3C/svg%3E"); width: 14px; height: 14px; } .share-transcript-modal .shareby-area .checkmark{ background-repeat: no-repeat; background-position: center center; background-size: contain!important; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' fill='%235a2edf'%3E%3Cpath fill-rule='evenodd' d='M14.928 1.677c.048.097.072.17.072.219a.564.564 0 0 1-.072.219L5.95 13.78c-.145.146-.253.219-.325.219-.12 0-.24-.06-.36-.182L.18 8.859.072 8.75A.564.564 0 0 1 0 8.531c0-.024.024-.085.072-.182l.072-.073a71.596 71.596 0 0 1 1.587-1.677c.144-.146.24-.219.288-.219.096 0 .217.073.36.219l2.885 2.844 7.212-9.37c.048-.049.12-.073.216-.073.072 0 .157.024.253.073l1.983 1.604z'/%3E%3C/svg%3E"); width: 15px; height: 14px; } .share-transcript-modal .loading{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .share-transcript-modal .loading .loader { background: url("/content/curve/img/ajax-loader.gif?v=ff2a7221e3fa94c7b9e4608a3afba288") no-repeat scroll 0 50% transparent; background-size: contain; height: 3rem; width: 1rem; } .share-transcript-modal #suggested-referrals-table { table-layout: fixed } .share-transcript-modal #suggested-referrals-table th, .share-transcript-modal #suggested-referrals-table td{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .share-transcript-modal #suggested-referrals-table td { overflow: hidden; text-overflow: ellipsis; } .share-transcript-modal #suggested-referrals-table tbody { max-height: 325px; } .share-transcript-modal #suggested-referrals-table .send-referral-button, .share-transcript-modal #suggested-referrals-table #refer-all-button{ display: inline-block; } .share-transcript-modal #suggested-referrals-table .send-referral-button, .share-transcript-modal #suggested-referrals-table #refer-all-button{ width: 30%; } .share-transcript-modal #suggested-referrals-table .send-referral-button, .share-transcript-modal #suggested-referrals-table #refer-all-button{ text-align: right; } .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent{ font-weight: 500; } .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent{ text-decoration:none; } .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent, .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent:hover, .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent:link, .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent:visited, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent:hover, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent:link, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent:visited, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent:hover, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent:link, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent:visited, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent:hover, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent:link, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent:visited{ -webkit-transition:color .15s ease-in; transition:color .15s ease-in; } .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent:hover, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent:hover, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent:hover, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent:hover{ -webkit-filter:brightness(.5); filter:brightness(.5); } .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent:active, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent:active, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent:active, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent:active{ -webkit-transition:color .15s ease-in; transition:color .15s ease-in; } .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent:focus, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent:focus, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent:focus, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent:focus{ outline-style:solid; outline-color:transparent; border-color:#a6a8ab; outline:2px auto currentColor; } @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none){ .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent:focus, .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent:hover, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent:focus, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent:hover, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent:focus, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent:hover, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent:focus, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent:hover{ text-decoration:underline; } } .modal.share-caption-modal .shareby-area .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent, .modal.share-caption-modal .shareby-area .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent, .modal.share-caption-modal .shareby-area .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent, .modal.share-caption-modal .shareby-area .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent{ color: #5614eb; } .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent{ color: #5a2edf; } .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent:hover, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent:hover, .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent:hover, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent:hover{ cursor: pointer; } .dropdown-container .dropdown-items .share-transcript-modal #suggested-referrals-table .send-referral-button.not-sent:hover, .dropdown-container .dropdown-items .share-transcript-modal #suggested-referrals-table .send-referral-button.all-not-sent:hover, .dropdown-container .dropdown-items .share-transcript-modal #suggested-referrals-table #refer-all-button.not-sent:hover, .dropdown-container .dropdown-items .share-transcript-modal #suggested-referrals-table #refer-all-button.all-not-sent:hover{ background-color: #e8e6ec; } .share-transcript-modal #suggested-referrals-table .send-referral-button.sent, .share-transcript-modal #suggested-referrals-table .send-referral-button.all-sent, .share-transcript-modal #suggested-referrals-table #refer-all-button.sent, .share-transcript-modal #suggested-referrals-table #refer-all-button.all-sent{ font-weight: 400; } #share-caption-modal .content { max-width: 100vw; } #share-caption-modal .share-body{ padding: 0; } #share-caption-modal .share-body .row{ margin-left: 0; margin-right: 0; } #share-caption-modal .share-body .modal-title{ padding-left: 2rem; padding-right: 2rem; padding-top: 1rem; padding-bottom: 1rem; background-color: #2e1a69; color: #fff; font-size: 1rem; font-weight: 500; } #share-caption-modal .share-body .modal-title button.close { width: 25px; height: 25px; opacity: 1; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M10.713 9.253c.192.21.287.458.287.744a.971.971 0 01-.287.716.971.971 0 01-.716.287 1.07 1.07 0 01-.744-.287L5.5 6.962l-3.753 3.752a1.035 1.035 0 01-1.432 0A.927.927 0 010 9.998c0-.286.105-.534.315-.744L4.04 5.5.315 1.747A1.018 1.018 0 010 1.003C0 .716.105.477.315.286a1.036 1.036 0 011.432 0L5.5 4.04 9.253.286A1.07 1.07 0 019.997 0c.287 0 .526.095.716.286.192.191.287.43.287.717 0 .286-.095.534-.287.744L6.962 5.5l3.752 3.753z'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; margin: 0; } #share-caption-modal .share-popover-content{ padding-left: 2rem; padding-right: 2rem; margin-bottom: 1rem; } #share-caption-modal .share-url #share-popover-button{ border-top-left-radius: 0; border-bottom-left-radius: 0; font-weight:600; padding:.5rem 2rem; font-size:.875rem; } @media screen and (min-width:30em){ #share-caption-modal .share-url #share-popover-button{ padding-top:1rem; padding-bottom:1rem; } } #share-caption-modal .share-url #share-popover-button{ font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif; border-radius:.25rem; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; text-decoration:none; border-width:0; border-style:none; outline-offset:4px; outline-color:#888; font-weight:600; } #share-caption-modal .share-url #share-popover-button:focus{ outline-style:solid; outline-width:1px; } #share-caption-modal .share-url #share-popover-button{ color:#fff; background-color:#5614eb; } #share-caption-modal .share-url #share-popover-button:hover{ color:#5614eb; background-color:#ddd0fb; cursor:pointer; } #share-caption-modal .share-url #share-popover-button:active{ color:#fff; background-color:#3c0baa; cursor:pointer; } #share-caption-modal .share-url #share-popover-button:disabled, #share-caption-modal .share-url #share-popover-button:disabled:hover{ background-color:#a6a8ab; color:#fff; } #share-caption-modal .share-url #share-popover-button:disabled:hover{ cursor:not-allowed; } #share-caption-modal .share-url #share-popover-button{ color: #fff; background-color: #5614eb; } #share-caption-modal .share-url #share-popover-button:hover{ background-color: #280579; } #share-caption-modal .share-url #share-popover-button{ height: 3rem; line-height: normal; line-height: initial; width: 104px; } #share-url, #share-popover-url{ font-family:inherit; font-size:1rem; color:#000; border:1px solid #dfe0e1; background-color:#fff; border-radius:.5rem; padding-left:1rem; padding-right:1rem; -webkit-transition:border .2s linear; transition:border .2s linear; } #share-url:hover, #share-popover-url:hover{ border-color:#a6a8ab; } #share-url:focus, #share-popover-url:focus{ outline-style:solid; outline-color:transparent; border-color:#515253; -webkit-transition:none; transition:none; } #share-url:disabled, #share-popover-url:disabled{ background-color:#ebebeb; color:#a6a8ab; cursor:not-allowed; } #share-url:disabled:hover, #share-popover-url:disabled:hover{ border-color:#dfe0e1; } #share-url[aria-invalid=true], #share-popover-url[aria-invalid=true]{ border-color:#cd261d; } #share-url[aria-invalid=true]:hover, #share-popover-url[aria-invalid=true]:hover{ border-color:#b32119; } #share-url[aria-invalid=true]:focus, #share-popover-url[aria-invalid=true]:focus{ border-color:#5614eb; } #share-url::-webkit-input-placeholder, #share-popover-url::-webkit-input-placeholder{ color:#6e6f71; } #share-url::-moz-placeholder, #share-popover-url::-moz-placeholder{ color:#6e6f71; } #share-url:-ms-input-placeholder, #share-popover-url:-ms-input-placeholder{ color:#6e6f71; } #share-url::-ms-input-placeholder, #share-popover-url::-ms-input-placeholder{ color:#6e6f71; } #share-url::placeholder, #share-popover-url::placeholder{ color:#6e6f71; } #share-url.error, #share-popover-url.error{ border-color:#cd261d; } #share-url.error:hover, #share-popover-url.error:hover{ border-color:#b32119; } #share-url.error:focus, #share-popover-url.error:focus{ border-color:#5614eb; } #share-url.error::-webkit-input-placeholder, #share-popover-url.error::-webkit-input-placeholder{ color:#6e6f71; } #share-url.error::-moz-placeholder, #share-popover-url.error::-moz-placeholder{ color:#6e6f71; } #share-url.error:-ms-input-placeholder, #share-popover-url.error:-ms-input-placeholder{ color:#6e6f71; } #share-url.error::-ms-input-placeholder, #share-popover-url.error::-ms-input-placeholder{ color:#6e6f71; } #share-url.error::placeholder, #share-popover-url.error::placeholder{ color:#6e6f71; } #share-url, #share-popover-url{ font-size: 0.875rem; } #share-url, #share-popover-url{ padding-right: 0; } #share-url, #share-popover-url{ display: -webkit-box; display: -ms-flexbox; display: flex; } #share-url, #share-popover-url{ -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /*1 */ min-height: 0; /*1 */ } #share-url, #share-popover-url { background-color: #e9ecef; -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } #share-url :hover, #share-popover-url :hover { -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); border: 1px solid #ced4da; } .text-link{text-decoration:none} .text-link,.text-link:hover,.text-link:link,.text-link:visited{-webkit-transition:color .15s ease-in;transition:color .15s ease-in} .text-link:hover{-webkit-filter:brightness(.5);filter:brightness(.5)} .text-link:active{-webkit-transition:color .15s ease-in;transition:color .15s ease-in} .text-link:focus{outline-style:solid;outline-color:transparent;border-color:#a6a8ab;outline:2px auto currentColor} @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none){.text-link:focus,.text-link:hover{text-decoration:underline}} .v-link{text-decoration:underline;text-align:center;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;font-weight:600;font-size:1rem;line-height:21.79px;color:#5614eb} .v-link,.v-link:link,.v-link:visited{-webkit-transition:color .15s ease-in;transition:color .15s ease-in} .v-link:active,.v-link:hover{-webkit-transition:color .15s ease-in;transition:color .15s ease-in;color:#3c0baa} .v-link.focus-visible,.v-link.focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} .v-link.focus-visible,.v-link:focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none){.v-link:focus,.v-link:hover{text-decoration:underline}} .v-link-xxs-primary{text-decoration:underline;text-align:center;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;font-weight:600;font-size:1rem;line-height:21.79px;color:#5614eb} .v-link-xxs-primary,.v-link-xxs-primary:link,.v-link-xxs-primary:visited{-webkit-transition:color .15s ease-in;transition:color .15s ease-in} .v-link-xxs-primary:active,.v-link-xxs-primary:hover{-webkit-transition:color .15s ease-in;transition:color .15s ease-in;color:#3c0baa} .v-link-xxs-primary.focus-visible,.v-link-xxs-primary.focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} .v-link-xxs-primary.focus-visible,.v-link-xxs-primary:focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none){.v-link-xxs-primary:focus,.v-link-xxs-primary:hover{text-decoration:underline}} .v-link-xxs-error{text-decoration:underline;text-align:center;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;font-weight:600;font-size:1rem;line-height:21.79px;color:#cd261d} .v-link-xxs-error,.v-link-xxs-error:link,.v-link-xxs-error:visited{-webkit-transition:color .15s ease-in;transition:color .15s ease-in} .v-link-xxs-error:active,.v-link-xxs-error:hover{-webkit-transition:color .15s ease-in;transition:color .15s ease-in;color:#861913} .v-link-xxs-error.focus-visible,.v-link-xxs-error.focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} .v-link-xxs-error.focus-visible,.v-link-xxs-error:focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none){.v-link-xxs-error:focus,.v-link-xxs-error:hover{text-decoration:underline}} .v-link-xxs-black{text-decoration:underline;text-align:center;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;font-weight:600;font-size:1rem;line-height:21.79px;color:#000} .v-link-xxs-black,.v-link-xxs-black:link,.v-link-xxs-black:visited{-webkit-transition:color .15s ease-in;transition:color .15s ease-in} .v-link-xxs-black:active,.v-link-xxs-black:hover{-webkit-transition:color .15s ease-in;transition:color .15s ease-in;color:#515253} .v-link-xxs-black.focus-visible,.v-link-xxs-black.focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} .v-link-xxs-black.focus-visible,.v-link-xxs-black:focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none){.v-link-xxs-black:focus,.v-link-xxs-black:hover{text-decoration:underline}} .v-link-xxxs-primary{text-decoration:underline;text-align:center;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;font-weight:600;font-size:.875rem;line-height:19.07px;color:#5614eb} .v-link-xxxs-primary,.v-link-xxxs-primary:link,.v-link-xxxs-primary:visited{-webkit-transition:color .15s ease-in;transition:color .15s ease-in} .v-link-xxxs-primary:active,.v-link-xxxs-primary:hover{-webkit-transition:color .15s ease-in;transition:color .15s ease-in;color:#3c0baa} .v-link-xxxs-primary.focus-visible,.v-link-xxxs-primary.focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} .v-link-xxxs-primary.focus-visible,.v-link-xxxs-primary:focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none){.v-link-xxxs-primary:focus,.v-link-xxxs-primary:hover{text-decoration:underline}} .v-link-xxxs-error{text-decoration:underline;text-align:center;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;font-weight:600;font-size:.875rem;line-height:19.07px;color:#cd261d} .v-link-xxxs-error,.v-link-xxxs-error:link,.v-link-xxxs-error:visited{-webkit-transition:color .15s ease-in;transition:color .15s ease-in} .v-link-xxxs-error:active,.v-link-xxxs-error:hover{-webkit-transition:color .15s ease-in;transition:color .15s ease-in;color:#861913} .v-link-xxxs-error.focus-visible,.v-link-xxxs-error.focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} .v-link-xxxs-error.focus-visible,.v-link-xxxs-error:focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none){.v-link-xxxs-error:focus,.v-link-xxxs-error:hover{text-decoration:underline}} .v-link-xxxs-black{text-decoration:underline;text-align:center;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;font-weight:600;font-size:.875rem;line-height:19.07px;color:#000} .v-link-xxxs-black,.v-link-xxxs-black:link,.v-link-xxxs-black:visited{-webkit-transition:color .15s ease-in;transition:color .15s ease-in} .v-link-xxxs-black:active,.v-link-xxxs-black:hover{-webkit-transition:color .15s ease-in;transition:color .15s ease-in;color:#515253} .v-link-xxxs-black.focus-visible,.v-link-xxxs-black.focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} .v-link-xxxs-black.focus-visible,.v-link-xxxs-black:focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none){.v-link-xxxs-black:focus,.v-link-xxxs-black:hover{text-decoration:underline}} .v-link-xxxxs-primary{text-decoration:underline;text-align:center;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;font-weight:600;font-size:.75rem;line-height:16.34px;color:#5614eb} .v-link-xxxxs-primary,.v-link-xxxxs-primary:link,.v-link-xxxxs-primary:visited{-webkit-transition:color .15s ease-in;transition:color .15s ease-in} .v-link-xxxxs-primary:active,.v-link-xxxxs-primary:hover{-webkit-transition:color .15s ease-in;transition:color .15s ease-in;color:#3c0baa} .v-link-xxxxs-primary.focus-visible,.v-link-xxxxs-primary.focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} .v-link-xxxxs-primary.focus-visible,.v-link-xxxxs-primary:focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none){.v-link-xxxxs-primary:focus,.v-link-xxxxs-primary:hover{text-decoration:underline}} .v-link-xxxxs-error{text-decoration:underline;text-align:center;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;font-weight:600;font-size:.75rem;line-height:16.34px;color:#cd261d} .v-link-xxxxs-error,.v-link-xxxxs-error:link,.v-link-xxxxs-error:visited{-webkit-transition:color .15s ease-in;transition:color .15s ease-in} .v-link-xxxxs-error:active,.v-link-xxxxs-error:hover{-webkit-transition:color .15s ease-in;transition:color .15s ease-in;color:#861913} .v-link-xxxxs-error.focus-visible,.v-link-xxxxs-error.focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} .v-link-xxxxs-error.focus-visible,.v-link-xxxxs-error:focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none){.v-link-xxxxs-error:focus,.v-link-xxxxs-error:hover{text-decoration:underline}} .v-link-xxxxs-black{text-decoration:underline;text-align:center;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;font-weight:600;font-size:.75rem;line-height:16.34px;color:#000} .v-link-xxxxs-black,.v-link-xxxxs-black:link,.v-link-xxxxs-black:visited{-webkit-transition:color .15s ease-in;transition:color .15s ease-in} .v-link-xxxxs-black:active,.v-link-xxxxs-black:hover{-webkit-transition:color .15s ease-in;transition:color .15s ease-in;color:#515253} .v-link-xxxxs-black.focus-visible,.v-link-xxxxs-black.focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} .v-link-xxxxs-black.focus-visible,.v-link-xxxxs-black:focus-visible{border-radius:.125rem;outline-style:solid;outline-color:#888;outline-width:1px;outline-offset:4px} @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none){.v-link-xxxxs-black:focus,.v-link-xxxxs-black:hover{text-decoration:underline}} .dropdown-title { letter-spacing: 2px; } .dropdown-container { width: 17.5rem } .dropdown-container .dropdown-display { border-radius: 3px } .dropdown-container .dropdown-display.expanded { border-radius: 3px 3px 0 0; } .dropdown-container .dropdown-items{ z-index: 999; max-height: 15rem; border-radius: 0 0 3px 3px; width: inherit; max-width: inherit; } .dropdown-container .dropdown-items .pointer:hover{ background-color: #e8e6ec; } .dropdown-container .dropdown-items::-webkit-scrollbar { width: 3.15px; } .dropdown-container .dropdown-items::-webkit-scrollbar-thumb{ background-color: #e8e6ec; width: 3.15px; border-radius: 3px; } .dropdown-container .placeholder { line-height: 30px; } .dropdown-container .selected-item { line-height: 26px; height: 26px; overflow-y: hidden; border-radius: 3px } .dropdown-container .selected-item .remove { color: rgba(74, 144, 226, 0.5); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dropdown-container .dropdown-arrows { margin-top: 7px; } .dropdown-container .arrow-up { width: 0; height: 0; margin-bottom: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #555; } .dropdown-container .arrow-down { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #555; } .dropdown-container .letter-spacing-2 { letter-spacing: 2px; } @media screen and (min-width: 60em) { .dropdown-container { width: 100%; max-width: 26.875rem } .dropdown-container .dropdown-items::-webkit-scrollbar { width: 4.89px; } .dropdown-container .dropdown-items::-webkit-scrollbar-thumb { width: 4.89px; } } #atmospherics-popover, #replace-informal-words-popover, #replace-us2uk-popover, #paint-on-popover, #close-gaps-popover{ position: fixed; } #atmospherics-popover, #replace-informal-words-popover, #replace-us2uk-popover, #paint-on-popover, #close-gaps-popover{ width: auto; } #atmospherics-popover, #replace-informal-words-popover, #replace-us2uk-popover, #paint-on-popover, #close-gaps-popover { z-index: 1000; } #atmospherics-popover .page-cover, #replace-informal-words-popover .page-cover, #replace-us2uk-popover .page-cover, #paint-on-popover .page-cover, #close-gaps-popover .page-cover{ display: block; background-color: transparent; z-index: 999; } #atmospherics-popover.none, #replace-informal-words-popover.none, #replace-us2uk-popover.none, #paint-on-popover.none, #close-gaps-popover.none{ display: block; visibility: hidden; } #atmospherics-popover .dropdown-menu, #replace-informal-words-popover .dropdown-menu, #replace-us2uk-popover .dropdown-menu, #paint-on-popover .dropdown-menu, #close-gaps-popover .dropdown-menu{ position: static; border-radius: 0.25rem; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; margin-top: 0; color: #333; background-color: #f1f1f1; } #atmospherics-popover .dropdown, #replace-informal-words-popover .dropdown, #replace-us2uk-popover .dropdown, #paint-on-popover .dropdown, #close-gaps-popover .dropdown { cursor: auto; cursor: initial; z-index: 1000; } #atmospherics-popover .arrow-left, #replace-informal-words-popover .arrow-left, #replace-us2uk-popover .arrow-left, #paint-on-popover .arrow-left, #close-gaps-popover .arrow-left { top: 50%; left: -11px; margin-top: -11px } #atmospherics-popover .arrow-left::before, #replace-informal-words-popover .arrow-left::before, #replace-us2uk-popover .arrow-left::before, #paint-on-popover .arrow-left::before, #close-gaps-popover .arrow-left::before{ background-color: transparent; } #atmospherics-popover .arrow-left::after, #replace-informal-words-popover .arrow-left::after, #replace-us2uk-popover .arrow-left::after, #paint-on-popover .arrow-left::after, #close-gaps-popover .arrow-left::after{ position: absolute; border-style: solid; border-width: 1px; content: " "; left: 1px; bottom: -10px; border-width: 10px; border-color: #f1f1f1; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #atmospherics-popover label, #replace-informal-words-popover label, #replace-us2uk-popover label, #paint-on-popover label, #close-gaps-popover label{ font-size: 0.875rem; font-weight: 500; } #atmospherics-popover, #paint-on-popover { max-width: 320px } #atmospherics-popover .change-atmospherics-actions, #paint-on-popover .change-atmospherics-actions{ margin-left: 1rem; padding-left: 0.25rem; } #atmospherics-popover label, #paint-on-popover label{ display: block; } #replace-informal-words-popover, #replace-us2uk-popover { max-width: 280px; } #close-gaps-popover { max-width: 380px } #close-gaps-popover #closeGapsTime{ margin-left: 0.25rem; max-width: 80px; } /* Hubspot cookie confirmation banner custom styles */ /* stylelint-disable declaration-no-important */ div#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom { width: 100% !important; right: 0 !important; left: unset !important; background-color: #2e1a69 !important; } div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner { background-color: #2e1a69 !important; color: #fff !important; } div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area { margin-right: 0 !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p { margin: 0 0 12px !important; color: #fff !important; } div#hs-eu-cookie-confirmation-button-group a#hs-eu-confirmation-button { color: #2e1a69 !important; } @media only screen and (min-width: 768px) { div#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom { width: 33% !important; } } /* stylelint-enable */ #upload-to-vimeo-modal-header { padding: 0; background: #000 } #upload-to-vimeo-modal-header button { color: #fff; } #upload-to-vimeo-modal-title { color: #fff; } .upload-to-vimeo-btn { color: #fff; background: #2e1a69; margin-bottom: 24px; } .privacy-setting-label { color: #686470; } .caption-video-uploaded-notification { height: 50px; margin-top: 10px; } :root { /* purple-70 */ /* purple-90 */ } /* Mapping to apply CCPE themed styles to a base-react-modal */ .modal-container .content{ font-family: Roboto, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #3c3c3c; z-index: 10000; border-radius: 6px; } .modal-container .title-row{ background-color: #fff; border-bottom-style: solid; border-bottom-width: 1px; border-bottom: 1px solid #eaeaea; height: 42px; padding: 25px 30px; } .modal-container .title-row .exit-btn{ -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 1; background-repeat: no-repeat; background-position: center center; font-size: 0; width: 25px; height: 25px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg' fill='%233c3c3c'%3E%3Cpath d='M10.713 9.253c.192.21.287.458.287.744a.971.971 0 01-.287.716.971.971 0 01-.716.287 1.07 1.07 0 01-.744-.287L5.5 6.962l-3.753 3.752a1.035 1.035 0 01-1.432 0A.927.927 0 010 9.998c0-.286.105-.534.315-.744L4.04 5.5.315 1.747A1.018 1.018 0 010 1.003C0 .716.105.477.315.286a1.036 1.036 0 011.432 0L5.5 4.04 9.253.286A1.07 1.07 0 019.997 0c.287 0 .526.095.716.286.192.191.287.43.287.717 0 .286-.095.534-.287.744L6.962 5.5l3.752 3.753z'/%3E%3C/svg%3E"); } .modal-container .title-row div:first-child { /* The title div */ width: 100%; margin-right: auto; margin-left: auto; color: #3c3c3c; } .modal-container .page-cover{ background-color: #000; position: fixed; z-index: 9999; } .modal-container #download-captions-btn, #next-advanced-btn, #dismiss-captions-btn, #close-captions-btn{ border-radius: 0.25rem; } .modal-container #download-captions-btn, #next-advanced-btn, #dismiss-captions-btn, #close-captions-btn{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .modal-container #download-captions-btn, #next-advanced-btn, #dismiss-captions-btn, #close-captions-btn{ font-weight: 500; } .modal-container #download-captions-btn, #next-advanced-btn, #dismiss-captions-btn, #close-captions-btn { height: 37px; padding-left: 35px; padding-right: 35px; font-family: 'Roboto', 'Lucida Grande', 'Segoe UI', 'Verdana', 'Helvetica', 'Arial', sans-serif; } .modal-container .modal-section { margin-bottom: 1.5rem; } .modal-container .modal-section-header { color: #3c3c3c; } .modal-container .offset-header{ margin-left: 0; } .modal-container .offset-form{ margin-left: 0; } .modal-container .offset-container{ margin-bottom: 1rem; margin-top: 0.5rem; } .button-red{ color: #fff; background-color: #5614eb; } .button-red:hover { background-color: #280579; } html { font-size: 16px; } #download-captions-options .dropdown-container .selected-item{ height: inherit; margin-bottom: 0; line-height: 1; font-size: 0.875rem; } #download-captions-options .dropdown-container .selected-item.multi-selected-item{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-style: none; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 500; height: 16px; color: #3c3c3c; background-color: #eaeaea; } #download-captions-options .dropdown-container .selected-item.multi-selected-item .remove{ -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 1; background-repeat: no-repeat; background-position: center center; font-size: 0; margin-left: 6px; height: 7px; width: 7px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg' fill='%233c3c3c'%3E%3Cpath d='M10.713 9.253c.192.21.287.458.287.744a.971.971 0 01-.287.716.971.971 0 01-.716.287 1.07 1.07 0 01-.744-.287L5.5 6.962l-3.753 3.752a1.035 1.035 0 01-1.432 0A.927.927 0 010 9.998c0-.286.105-.534.315-.744L4.04 5.5.315 1.747A1.018 1.018 0 010 1.003C0 .716.105.477.315.286a1.036 1.036 0 011.432 0L5.5 4.04 9.253.286A1.07 1.07 0 019.997 0c.287 0 .526.095.716.286.192.191.287.43.287.717 0 .286-.095.534-.287.744L6.962 5.5l3.752 3.753z'/%3E%3C/svg%3E"); } #download-captions-options .dropdown-container .placeholder{ line-height: 1; } #download-captions-options .dropdown-container .dropdown-arrows{ margin-top: 0; } #download-captions-options .dropdown-container .header{ background-color: #fcfbf7; } #download-captions-modal .material-icons.arrow-right::before { content: 'arrow_right'; } #download-captions-modal .material-icons.arrow-down::before { content: 'arrow_drop_down'; } #download-captions-modal .offset-control-container{ padding-top: 0.25rem; padding-bottom: 0.25rem; } #download-captions-modal .offset-control-container .separator { top: 50%; } #download-captions-modal #download-captions-bic-customization{ margin-top: 0; } #download-captions-modal #bic-customization-background button { width: 40px; height: 40px; } #download-captions-modal #bic-customization-background .singleselect-buttons-container > .singleselect-button{ font-weight: 500; text-transform: none; color: #3c3c3c; font-size: 14px; font-family: 'Roboto', 'Lucida Grande', 'Segoe UI', 'Verdana', 'Helvetica', 'Arial', sans-serif; background-color: #eaeaea; border-color: #b4b4b4; } #download-captions-modal #bic-customization-background .singleselect-button.selected{ border-style: solid; border-width: 1px; color: #fff; background-color: #3c3c3c; } #download-captions-modal #bic-add-on{ padding-bottom: 1rem; } #download-captions-modal #bic-add-on #bic-add-on-link{ font-weight: 500; font-style: normal; } #download-captions-modal #bic-add-on #bic-add-on-link:hover, #download-captions-modal #bic-add-on #bic-add-on-link:focus{ text-decoration: underline; } #download-captions-modal #bic-add-on #bic-add-on-link{ color: #5614eb; font-size: 14px; } #download-captions-modal #back-arrow{ display: none; } #download-captions-modal #back-button { color: #3c3c3c; background-color: #d0d0d0; } #download-captions-modal .bic-styling-options .singleselect-radios-container label { width: 49%; } #download-captions-modal #bic-customization-text button { background-color: #eaeaea; width: 30px; height: 30px } #download-captions-modal #bic-customization-text button svg { width: 25px; height: 25px; } #download-captions-modal #bic-customization-text button div { height: 15px; width: 15px; } #download-captions-modal #bic-customization-text #bic-font-select-container { width: 46%; } #download-captions-modal #bic-customization-text #bic-text-alignment { width: 30px; height: auto; } #download-captions-modal #bic-customization-text button.selected, #download-captions-modal #bic-customization-text button.selected:hover { background-color: #3c3c3c; } #download-captions-modal #bic-customization-text button:hover { background-color: #d0d0d0; } #download-captions-modal #bic-customization-text button#bold-toggle-button:hover > #bold-toggle { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='18' viewBox='0 0 15 18' fill='%233c3c3c' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M11.5 8.4875C12.7125 7.65 13.5625 6.275 13.5625 5C13.5625 2.175 11.375 0 8.5625 0H0.75V17.5H9.55C12.1625 17.5 14.1875 15.375 14.1875 12.7625C14.1875 10.8625 13.1125 9.2375 11.5 8.4875ZM4.5 3.125H8.25C9.2875 3.125 10.125 3.9625 10.125 5C10.125 6.0375 9.2875 6.875 8.25 6.875H4.5V3.125ZM8.875 14.375H4.5V10.625H8.875C9.9125 10.625 10.75 11.4625 10.75 12.5C10.75 13.5375 9.9125 14.375 8.875 14.375Z'/%3E %3C/svg%3E"); } #download-captions-modal #bic-customization-text button#bold-toggle-button.selected > #bold-toggle, #download-captions-modal #bic-customization-text button#bold-toggle-button.selected:hover > #bold-toggle { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='18' viewBox='0 0 15 18' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M11.5 8.4875C12.7125 7.65 13.5625 6.275 13.5625 5C13.5625 2.175 11.375 0 8.5625 0H0.75V17.5H9.55C12.1625 17.5 14.1875 15.375 14.1875 12.7625C14.1875 10.8625 13.1125 9.2375 11.5 8.4875ZM4.5 3.125H8.25C9.2875 3.125 10.125 3.9625 10.125 5C10.125 6.0375 9.2875 6.875 8.25 6.875H4.5V3.125ZM8.875 14.375H4.5V10.625H8.875C9.9125 10.625 10.75 11.4625 10.75 12.5C10.75 13.5375 9.9125 14.375 8.875 14.375Z'/%3E %3C/svg%3E"); } #download-captions-modal #bic-customization-text button#italic-toggle-button:hover > #italic-toggle { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='%233c3c3c' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M5.5 0V3.75H8.2625L3.9875 13.75H0.5V17.5H10.5V13.75H7.7375L12.0125 3.75H15.5V0H5.5Z'/%3E %3C/svg%3E"); } #download-captions-modal #bic-customization-text button#italic-toggle-button.selected > #italic-toggle, #download-captions-modal #bic-customization-text button#italic-toggle-button.selected:hover > #italic-toggle { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M5.5 0V3.75H8.2625L3.9875 13.75H0.5V17.5H10.5V13.75H7.7375L12.0125 3.75H15.5V0H5.5Z'/%3E %3C/svg%3E"); } #download-captions-modal #bic-customization-text .singleselect-button.selected > #bic-textalign-h-1 { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='%23120f19' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 12H0V14H12V12ZM12 4H0V6H12V4ZM0 10H18V8H0V10ZM0 18H18V16H0V18ZM0 0V2H18V0H0Z'/%3E %3C/svg%3E"); } #download-captions-modal #bic-customization-text .singleselect-button.selected > #bic-textalign-h-2 { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='%23120f19' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 12V14H14V12H4ZM0 18H18V16H0V18ZM0 10H18V8H0V10ZM4 4V6H14V4H4ZM0 0V2H18V0H0Z'/%3E %3C/svg%3E"); } #download-captions-modal #bic-customization-text .singleselect-button.selected > #bic-textalign-h-3 { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='%23120f19' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M0 18H18V16H0V18ZM6 14H18V12H6V14ZM0 10H18V8H0V10ZM6 6H18V4H6V6ZM0 0V2H18V0H0Z'/%3E %3C/svg%3E"); } #download-captions-modal #bic-customization-text .singleselect-button.selected > #bic-textalign-v-3 { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='17' height='18' viewBox='0 0 17 18' fill='%23120f19' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12.5 10H9.5V0H7.5V10H4.5L8.5 14L12.5 10ZM0.5 16V18H16.5V16H0.5Z'/%3E %3C/svg%3E"); } #download-captions-modal #bic-customization-text .singleselect-button.selected > #bic-textalign-v-2 { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='22' viewBox='0 0 16 22' fill='%23120f19' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 18H7V22H9V18H12L8 14L4 18ZM12 4H9V0H7V4H4L8 8L12 4ZM0 10V12H16V10H0Z'/%3E %3C/svg%3E"); } #download-captions-modal #bic-customization-text .singleselect-button.selected > #bic-textalign-v-1 { content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='%23120f19' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 8H7V18H9V8H12L8 4L4 8ZM0 0V2H16V0H0Z'/%3E %3C/svg%3E"); } #download-captions-modal #bic-customization-text button#bic-text-alignment { width: auto; height: auto; } #download-captions-modal #bic-customization-text .dropdown-display { padding-top: 0.15rem; height: 30px } #download-captions-modal #bic-customization-text .dropdown-display div { font-size: 14px; color: #686470; } #download-captions-modal #bic-customization-text .modal-popover .alignment-body { background-color: #eaeaea } #download-captions-modal #bic-customization-text .modal-popover .alignment-body button.selected, #download-captions-modal #bic-customization-text .modal-popover .alignment-body button.selected:hover { background-color: #b9b7be; } #download-captions-modal .modal-popover .popover-arrow { border-bottom-color: #eaeaea; } #download-captions-modal .modal-popover [class*='-body'] { background-color: #eaeaea; } #download-captions-modal #save-styling-setting{ font-weight: normal; color: #3c3c3c; font-size: 14px; font-family: 'Roboto', 'Lucida Grande', 'Segoe UI', 'Verdana', 'Helvetica', 'Arial', sans-serif; } #download-captions-modal a{ font-weight: 500; font-style: normal; color: #5614eb; text-transform: capitalize; font-size: 14px; line-height: 20px; } #download-captions-modal .offset-container .offset-form{ height: auto; } #download-captions-modal .offset-container .offset-form .offset-label { color: #b4b4b4; } #download-captions-modal .offset-container .offset-form .offset-control { font-family: inherit; } .modal .modal-header{ background-color: #fff; border-bottom-style: solid; border-bottom-width: 1px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #eaeaea; height: 42px; padding: 25px 30px; } .modal .modal-header button.close{ opacity: 1; background-repeat: no-repeat; background-position: center center; position: absolute; margin: 0; width: 25px; height: 25px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg' fill='%233c3c3c'%3E%3Cpath d='M10.713 9.253c.192.21.287.458.287.744a.971.971 0 01-.287.716.971.971 0 01-.716.287 1.07 1.07 0 01-.744-.287L5.5 6.962l-3.753 3.752a1.035 1.035 0 01-1.432 0A.927.927 0 010 9.998c0-.286.105-.534.315-.744L4.04 5.5.315 1.747A1.018 1.018 0 010 1.003C0 .716.105.477.315.286a1.036 1.036 0 011.432 0L5.5 4.04 9.253.286A1.07 1.07 0 019.997 0c.287 0 .526.095.716.286.192.191.287.43.287.717 0 .286-.095.534-.287.744L6.962 5.5l3.752 3.753z'/%3E%3C/svg%3E"); -webkit-transform: scale(1, 1); transform: scale(1, 1); right: 30px; } .modal .modal-header .modal-title{ width: 100%; margin-right: auto; text-align: left; font-size: 1rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #3c3c3c; line-height: 42px; } .modal .modal-body{ text-align: left; max-height: none; max-height: initial; color: #3c3c3c; padding: 30px; } .modal-dialog{ margin-right: auto; margin-left: auto; background-color: #fff; width: 100%; border-radius: 0.5rem; font-family: Roboto, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /*max-width: 500px; */ -webkit-box-shadow: 14px 14px 42px 5px rgba(0, 0, 0, 0.18); box-shadow: 14px 14px 42px 5px rgba(0, 0, 0, 0.18); } .modal-dialog .modal-content{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .modal.share-caption-modal { /* stylelint-disable */ display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; /* stylelint-enable */ width: 600px; bottom: auto } .modal.share-caption-modal .modal-dialog { max-width: 600px; } .modal.share-caption-modal .modal-body{ line-height: 1.5; color: #120f19; /*stylelint-disable */ -webkit-box-sizing: content-box !important; box-sizing: content-box !important; /*stylelint-enable */ } .modal.share-caption-modal .modal-title{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-left: 2rem; padding-right: 2rem; font-size: 0.875rem; font-weight: 500; border-bottom-style: solid; border-bottom-width: 1px; border-color: #e8e6ec; height: 53px; margin-bottom: 27px; } .modal.share-caption-modal .modal-title .close-button:hover{ cursor: pointer; } .dropdown-container .dropdown-items .modal.share-caption-modal .modal-title .close-button:hover{ background-color: #e8e6ec; } .modal.share-caption-modal .modal-title .close-button { width: 11px; height: 11px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' fill='%23686470'%3E%3Cpath d='M10.714 9.253c.19.21.286.458.286.744a.972.972 0 0 1-.286.717.972.972 0 0 1-.717.286 1.07 1.07 0 0 1-.744-.286L5.5 6.96l-3.753 3.753a1.036 1.036 0 0 1-1.432 0A.928.928 0 0 1 0 9.997c0-.286.105-.534.315-.744L4.04 5.5.315 1.747A1.018 1.018 0 0 1 0 1.003C0 .716.105.477.315.286a1.036 1.036 0 0 1 1.432 0L5.5 4.04 9.253.286A1.07 1.07 0 0 1 9.997 0 .976.976 0 0 1 11 1.003c0 .286-.095.534-.286.744L6.96 5.5l3.753 3.753z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .modal.share-caption-modal .shareby-area .modal-text{ text-transform: uppercase; font-size: 0.75rem; font-weight: bold; color: #686470; } .modal.share-caption-modal .shareby-area .material-icons.dn{ display: none; } .modal.share-caption-modal .shareby-area .current-access { background: #fff url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='6px' height='12px' viewBox='0 0 6 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3Edropdown_arrow%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs/%3E %3Cg id='tc_download_options_r7' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-547.000000, -106.000000)'%3E %3Cg id='Group-10' transform='translate(26.000000, 26.000000)' fill='%23555555'%3E %3Cg id='Group-9' transform='translate(20.000000, 71.000000)'%3E %3Cg id='Group-8' transform='translate(230.000000, 0.000000)'%3E %3Cg id='Group-7' transform='translate(271.000000, 9.000000)'%3E %3Cpath d='M3,0 L6,5 L0,5 L3,0 Z M3,12 L0,7 L6,7 L3,12 Z' id='dropdown_arrow'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E") no-repeat right 10px center; background-size: 8px 10px; } .modal.share-caption-modal .shareby-area .title-space { letter-spacing: 2px; } .modal.share-caption-modal .shareby-area .share-email-addresses{ border-top-right-radius: 0; border-bottom-right-radius: 0; -webkit-box-shadow: none; box-shadow: none; height: 3rem; } .modal.share-caption-modal .shareby-area .share-email-addresses:focus { border-color: #5614eb; } .modal.share-caption-modal .shareby-area { & .email-permission-select, .link-permission-select{ padding-top: 0; padding-bottom: 0; } & .email-permission-select, .link-permission-select{ padding-right: 0; } } .modal.share-caption-modal .shareby-area .share-link { background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='7' xmlns='http://www.w3.org/2000/svg' fill='%235614eb'%3E%3Cpath d='M9.766 0c.583 0 1.125.156 1.625.469.5.313.893.737 1.18 1.273.286.536.429 1.122.429 1.758 0 .636-.143 1.222-.43 1.758-.286.536-.68.96-1.18 1.273-.5.313-1.041.469-1.624.469H7.14V5.66h2.625c.354 0 .687-.097 1-.293.312-.195.56-.46.742-.795.182-.335.273-.692.273-1.072 0-.38-.09-.737-.273-1.072-.182-.335-.43-.6-.742-.795a1.854 1.854 0 0 0-1-.293H7.14V0h2.625zm-5.86 4.187V2.813h5.188v1.374H3.906zM1.22 3.5c0 .38.09.737.273 1.072.182.335.43.6.742.795.313.196.646.293 1 .293H5.86V7H3.234a3.009 3.009 0 0 1-1.625-.469A3.313 3.313 0 0 1 .43 5.258 3.671 3.671 0 0 1 0 3.5c0-.636.143-1.222.43-1.758.286-.536.68-.96 1.18-1.273A3.009 3.009 0 0 1 3.233 0H5.86v1.34H3.234c-.354 0-.687.097-1 .293-.312.195-.56.46-.742.795A2.208 2.208 0 0 0 1.22 3.5z' fill-rule='nonzero' fill='%235a2edf'/%3E%3C/svg%3E"); } .modal.share-caption-modal .shareby-area #learn-more-link { color: #5614eb; } .modal.share-caption-modal .shareby-area .dropdown-menu { left: auto; top: 3rem; } .modal.share-caption-modal .shareby-area .dropdown-menu.dropdown-menu-right{ display: block; } .modal.share-caption-modal .shareby-area .dropdown-menu.dropdown-menu-right.dn{ display: none; } .modal.share-caption-modal .shareby-area .custom-select{ display: block; height: 3rem; } .modal.share-caption-modal .shareby-area .share-email-message { height: 110px; } .modal.share-caption-modal .shareby-area .share-url { height: 3rem } .modal.share-caption-modal .shareby-area .share-url #share-url{ border-top-right-radius: 0; border-bottom-right-radius: 0; } .modal.share-caption-modal .shareby-area .share-url .form-control{ -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /*1 */ min-height: 0; /*1 */ height: 100%; font-size: 0.875rem; color: #686470; padding-left: 1rem; font-family: roboto, sans-serif; border-top-right-radius: 0; border-bottom-right-radius: 0; } .modal.share-caption-modal .shareby-area .share-url #copy-button{ font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif; border-radius:.25rem; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; text-decoration:none; border-width:0; border-style:none; outline-offset:4px; outline-color:#888; font-weight:600; } .modal.share-caption-modal .shareby-area .share-url #copy-button:focus{ outline-style:solid; outline-width:1px; } .modal.share-caption-modal .shareby-area .share-url #copy-button{ color:#fff; background-color:#5614eb; } .modal.share-caption-modal .shareby-area .share-url #copy-button:hover{ color:#5614eb; background-color:#ddd0fb; cursor:pointer; } .modal.share-caption-modal .shareby-area .share-url #copy-button:active{ color:#fff; background-color:#3c0baa; cursor:pointer; } .modal.share-caption-modal .shareby-area .share-url #copy-button:disabled, .modal.share-caption-modal .shareby-area .share-url #copy-button:disabled:hover{ background-color:#a6a8ab; color:#fff; } .modal.share-caption-modal .shareby-area .share-url #copy-button:disabled:hover{ cursor:not-allowed; } .modal.share-caption-modal .shareby-area .share-url #copy-button{ color: #fff; background-color: #5614eb; } .modal.share-caption-modal .shareby-area .share-url #copy-button:hover{ background-color: #280579; } .modal.share-caption-modal .shareby-area .share-url #copy-button{ height: 100%; font-size: 0.875rem; font-weight: 500; } .modal.share-caption-modal .shareby-area .share-url #copy-button:hover{ cursor: pointer; } .dropdown-container .dropdown-items .modal.share-caption-modal .shareby-area .share-url #copy-button:hover{ background-color: #e8e6ec; } .modal.share-caption-modal .shareby-area .share-url #copy-button{ text-transform: none; border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0; width: 90px; font-family: roboto, sans-serif; } .modal.share-caption-modal .shareby-area .share-url #copy-button:focus { outline: 0; } .modal.share-caption-modal .shareby-area .shareby-toggle.link{ margin-top: 2rem; } .modal.share-caption-modal .shareby-area .input-group-btn{ width: auto; } .modal.share-caption-modal .shareby-area .editor-button{ border-width:0; border-style:none; font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif; border-radius:.25rem; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; text-decoration:none; outline-offset:4px; outline-color:#888; font-weight:600; } .modal.share-caption-modal .shareby-area .editor-button:focus{ outline-style:solid; outline-width:1px; } .modal.share-caption-modal .shareby-area .editor-button{ padding:.5rem 2rem; } .modal.share-caption-modal .shareby-area .editor-button:hover{ cursor:pointer; } .modal.share-caption-modal .shareby-area .editor-button:disabled, .modal.share-caption-modal .shareby-area .editor-button:disabled:hover{ background-color:#f7f7f8; color:#fff; } .modal.share-caption-modal .shareby-area .editor-button:disabled:hover{ cursor:not-allowed; } .caption-list-controls .modal.share-caption-modal .shareby-area .editor-button{ padding: 0; display: block; } .caption-list-controls .modal.share-caption-modal .shareby-area .editor-button.left{ border-top-right-radius: 0; border-bottom-right-radius: 0; } .modal.share-caption-modal .shareby-area .editor-button:hover{ cursor: pointer; } .dropdown-container .dropdown-items .modal.share-caption-modal .shareby-area .editor-button:hover{ background-color: #e8e6ec; } .modal.share-caption-modal .shareby-area .editor-button{ font-family: Roboto, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .modal.share-caption-modal .shareby-area .editor-button:focus { outline: 0; } .modal.share-caption-modal .shareby-area .share-email-button{ padding-left: 2rem; padding-right: 2rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif; border-radius:.25rem; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; text-decoration:none; border-width:0; border-style:none; outline-offset:4px; outline-color:#888; font-weight:600; } .modal.share-caption-modal .shareby-area .share-email-button:focus{ outline-style:solid; outline-width:1px; } .modal.share-caption-modal .shareby-area .share-email-button{ color:#fff; background-color:#5614eb; } .modal.share-caption-modal .shareby-area .share-email-button:hover{ color:#5614eb; background-color:#ddd0fb; cursor:pointer; } .modal.share-caption-modal .shareby-area .share-email-button:active{ color:#fff; background-color:#3c0baa; cursor:pointer; } .modal.share-caption-modal .shareby-area .share-email-button:disabled, .modal.share-caption-modal .shareby-area .share-email-button:disabled:hover{ background-color:#a6a8ab; color:#fff; } .modal.share-caption-modal .shareby-area .share-email-button:disabled:hover{ cursor:not-allowed; } .modal.share-caption-modal .shareby-area .share-email-button{ color: #fff; background-color: #5614eb; } .modal.share-caption-modal .shareby-area .share-email-button:hover{ background-color: #280579; } .modal.share-caption-modal .shareby-area .share-email-button{ height: 100%; font-size: 0.875rem; font-weight: 500; } .modal.share-caption-modal .shareby-area .share-email-button:hover{ cursor: pointer; } .dropdown-container .dropdown-items .modal.share-caption-modal .shareby-area .share-email-button:hover{ background-color: #e8e6ec; } .modal.share-caption-modal .shareby-area .share-email-button{ height: 38px; } .modal.share-caption-modal .shareby-area .checkmark { background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' fill='%235614eb'%3E%3Cpath fill-rule='evenodd' d='M14.928 1.677c.048.097.072.17.072.219a.564.564 0 0 1-.072.219L5.95 13.78c-.145.146-.253.219-.325.219-.12 0-.24-.06-.36-.182L.18 8.859.072 8.75A.564.564 0 0 1 0 8.531c0-.024.024-.085.072-.182l.072-.073a71.596 71.596 0 0 1 1.587-1.677c.144-.146.24-.219.288-.219.096 0 .217.073.36.219l2.885 2.844 7.212-9.37c.048-.049.12-.073.216-.073.072 0 .157.024.253.073l1.983 1.604z'/%3E%3C/svg%3E"); } .modal.share-caption-modal .shareby-area .text-link { color: #5614eb; } .modal.share-caption-modal .shareby-area .collapse{ display: block; height: auto; } .modal.share-caption-modal .shareby-area #suggested-referrals-table #refer-all-button{ width: 20%; color: #5614eb; } .modal.share-caption-modal .shareby-area #suggested-referrals-table #refer-all-button.all-sent{ color: #120f19; } .modal.share-caption-modal .shareby-area #suggested-referrals-table .send-referral-button{ width: 20%; color: #5614eb; } .modal.share-caption-modal .shareby-area #suggested-referrals-table .send-referral-button.sent{ color: #120f19; } .modal.share-caption-modal .share-body{ padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 2rem; } .modal.share-caption-modal .share-body .row{ margin: 0; } .modal.share-caption-modal .share-body .share-email-message{ width: 100%; } .modal.share-caption-modal .share-body #invite-checkbox{ margin-top: 0.25rem; margin-right: 0.5rem; } .modal.share-caption-modal .share-body #invite-checkbox:focus{ outline: 0; } #download-captions-bic-customization #bic-customization-text .modal.share-caption-modal .share-body #invite-checkbox:focus{ position: relative; } .modal.share-caption-modal .check-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='13' height='13' viewBox='0 0 13 13'%3E %3Cdefs%3E %3Crect id='a' width='13' height='13' x='15' y='74' rx='3'/%3E %3Cfilter id='b' width='123.1%25' height='123.1%25' x='-11.5%25' y='-11.5%25' filterUnits='objectBoundingBox'%3E %3CfeGaussianBlur in='SourceAlpha' result='shadowBlurInner1' stdDeviation='1'/%3E %3CfeOffset dy='1' in='shadowBlurInner1' result='shadowOffsetInner1'/%3E %3CfeComposite in='shadowOffsetInner1' in2='SourceAlpha' k2='-1' k3='1' operator='arithmetic' result='shadowInnerInner1'/%3E %3CfeColorMatrix in='shadowInnerInner1' values='0 0 0 0 0.71372549 0 0 0 0 0.71372549 0 0 0 0 0.71372549 0 0 0 1 0'/%3E %3C/filter%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd' transform='translate(-15 -74)'%3E %3Cuse fill='%23FFF' xlink:href='%23a'/%3E %3Cuse fill='%23000' filter='url(%23b)' xlink:href='%23a'/%3E %3Crect width='12' height='12' x='15.5' y='74.5' stroke='%23CDCCCC' rx='3'/%3E %3C/g%3E %3C/svg%3E"); background-size: contain; height: 15px; width: 15px; } .modal.share-caption-modal .check-icon.filled { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='15' height='15' viewBox='0 0 15 15'%3E %3Cdefs%3E %3Crect id='a' width='13' height='13' rx='3'/%3E %3Cfilter id='b' width='138.5%25' height='138.5%25' x='-19.2%25' y='-19.2%25' filterUnits='objectBoundingBox'%3E %3CfeGaussianBlur in='SourceAlpha' result='shadowBlurInner1' stdDeviation='1'/%3E %3CfeOffset dy='1' in='shadowBlurInner1' result='shadowOffsetInner1'/%3E %3CfeComposite in='shadowOffsetInner1' in2='SourceAlpha' k2='-1' k3='1' operator='arithmetic' result='shadowInnerInner1'/%3E %3CfeColorMatrix in='shadowInnerInner1' values='0 0 0 0 0.0835279251 0 0 0 0 0.46701526 0 0 0 0 0.870269983 0 0 0 1 0'/%3E %3C/filter%3E %3Cpath id='d' d='M3 7.136l.955-.954 1.59 1.59 3.5-5.09.637.318v1.273l-3.5 5.409h-.955z'/%3E %3Cfilter id='c' width='157.1%25' height='161.7%25' x='-28.6%25' y='-18.8%25' filterUnits='objectBoundingBox'%3E %3CfeOffset dy='1' in='SourceAlpha' result='shadowOffsetOuter1'/%3E %3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='.5'/%3E %3CfeColorMatrix in='shadowBlurOuter1' values='0 0 0 0 0.117647059 0 0 0 0 0.505882353 0 0 0 0 0.921568627 0 0 0 1 0'/%3E %3C/filter%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cg transform='translate(1 1)'%3E %3Cuse fill='%233497FF' xlink:href='%23a'/%3E %3Cuse fill='%23000' filter='url(%23b)' xlink:href='%23a'/%3E %3Crect width='14' height='14' x='-.5' y='-.5' stroke='%239BCBFF' rx='3'/%3E %3C/g%3E %3Cg transform='translate(1 1)'%3E %3Cuse fill='%23000' filter='url(%23c)' xlink:href='%23d'/%3E %3Cuse fill='%23F8FBFE' xlink:href='%23d'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E"); } .modal.share-caption-modal .modal-footer { padding-bottom: 30px } .modal.share-caption-modal .modal-footer .btn{ margin-bottom: 0; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 500; width: auto; height: 37px; line-height: normal; padding-left: 35px; padding-right: 35px; } .modal.share-caption-modal .modal-footer .btn:hover{ text-transform: capitalize; } .modal.share-caption-modal .modal-footer .btn.primaryActionInline{ text-transform: capitalize; } .modal.share-caption-modal .modal-footer .btn.secondaryActionInline{ text-transform: capitalize; background-color: #686470; } .modal.share-caption-modal .modal-footer .btn.secondaryActionInline:hover, .modal.share-caption-modal .modal-footer .btn.secondaryActionInline:focus{ background-color: #686470; } .modal.share-caption-modal .modal-footer .btn.secondaryActionInline:hover, .modal.share-caption-modal .modal-footer .btn.secondaryActionInline:focus{ color: #fff; } .modal { left: 50%; border-radius: 6px; } #confirmation-modal .btn.secondaryActionInline{ font-weight: 500; } #push-to-integration-modal .push-to-integration-footer .btn{ margin-bottom: 0; border-radius: 0.25rem; font-size: 0.875rem; width: auto; height: 37px; line-height: normal; background-color: #5614eb; } #push-to-integration-modal .push-to-integration-footer .btn:hover { background-color: #280579; background-image: none; } #push-to-integration-modal .push-to-integration-footer .btn-cancel{ background-color: #686470; } #push-to-integration-modal .push-to-integration-footer .btn-cancel:hover, #push-to-integration-modal .push-to-integration-footer .btn-cancel:focus{ background-color: #686470; } #push-to-integration-modal .push-to-integration-footer .btn-cancel:hover, #push-to-integration-modal .push-to-integration-footer .btn-cancel:focus{ color: #fff; } #push-to-integration-modal .push-to-integration-footer .btn + .btn { margin-left: 10px; } .caption-list-controls .button{ padding: 0; display: block; } .caption-list-controls .button.left{ border-top-right-radius: 0; border-bottom-right-radius: 0; } .last-saved-container .saveText{ color: #fff; } .upgraded-bic-banner{ padding: 0.5rem; font-family: Roboto, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.875rem; border-radius: 0.25rem; margin-bottom: 0.5rem; background-color: #fcf6d9; color: #60512e; } .upgraded-bic-banner span{ font-weight: 500; text-decoration: underline; } .upgraded-bic-banner span:hover{ cursor: pointer; } .dropdown-container .dropdown-items .upgraded-bic-banner span:hover{ background-color: #e8e6ec; } .progress-section .slider-container { margin-top: 3px } .progress-section .slider-container .slider { border: none; background-color: inherit; -webkit-box-shadow: none; box-shadow: none; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif } .progress-section .slider-container .slider .slider-track .slider-selection { background-color: #5614eb; } .progress-section .slider-container .slider .tooltip-inner { background-color: #5614eb; } .modal .modal-footer .secondaryActionInline, .modal .modal-footer .secondaryActionInline:active, .modal .modal-footer .secondaryActionInline:focus { -webkit-box-shadow: none; box-shadow: none; } .action-buttons .btn-ok { background-color: #5614eb; } .cpeditor-body-tools-container #editor-tools-menu input[type="text"], .cpeditor-body-tools-container.dark-editor-theme #editor-tools-menu input[type="text"]{ font-family: "Roboto", "Lucida Grande", "Segoe UI", Verdana, Helvetica, Arial, sans-serif; } .cpeditor-body-tools-container #editor-tools-menu .primaryActionInline, .cpeditor-body-tools-container.dark-editor-theme #editor-tools-menu .primaryActionInline{ font-family: "Roboto", "Lucida Grande", "Segoe UI", Verdana, Helvetica, Arial, sans-serif; background-color: #5614eb; border-color: #5614eb; } .cpeditor-body-tools-container #editor-tools-menu .primaryActionInline:hover, .cpeditor-body-tools-container.dark-editor-theme #editor-tools-menu .primaryActionInline:hover { background-color: #280579; border-color: #280579; } .cpeditor-body-tools-container #editor-tools-menu .secondaryActionInline, .cpeditor-body-tools-container.dark-editor-theme #editor-tools-menu .secondaryActionInline{ font-family: "Roboto", "Lucida Grande", "Segoe UI", Verdana, Helvetica, Arial, sans-serif; } .keyboard-shortcut-edit-popover.right { border: 0; -webkit-box-shadow: none; box-shadow: none } .keyboard-shortcut-edit-popover.right .arrow { left: -11px } .keyboard-shortcut-edit-popover.right .arrow::before { background-color: inherit; } .keyboard-shortcut-edit-popover.right .arrow::after { border-right-color: white; } .sync-tab .ace_editor .ace_gutter .ace_gutter-cell .caption-ts { color: #bcb3fd; /* dark mode purple-80 */ } /*# sourceMappingURL=ccpe.css.map */