/* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. * 2. Add the correct display in IE. */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; } /** * Add the correct display in IE 9-. */ audio, canvas, progress, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, [hidden] { display: none; } /* Links ========================================================================== */ /** * 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 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in 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 */ 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; } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * 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; } /** * 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 ========================================================================== */ /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * 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 { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /* Forms ========================================================================== */ /** * 1. Change font properties to `inherit` in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ } /** * Restore the font weight unset by the previous rule. */ optgroup { font-weight: bold; } /** * 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"], [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; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 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 { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 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"] { 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 OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * 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 */ } div.dialog, div.dialog section, div.form-clean, div.form-clean section { position: relative; } div.dialog section[role="body"], div.form-clean section[role="body"] { overflow-y: auto; } div.dialog div.dialog-tabs nav, div.form-clean div.dialog-tabs nav { margin: 0 12px; margin: 0 1.2rem; } div.dialog div.dialog-tabs nav label:first-child, div.form-clean div.dialog-tabs nav label:first-child { padding-left: 0; } div.dialog div.dialog-tabs.dialog-tabs-1 > span, div.form-clean div.dialog-tabs.dialog-tabs-1 > span { background: 0; margin: 0 12px; margin: 0 1.2rem; } div.dialog h2, div.form-clean h2 { margin-bottom: 20px; margin-bottom: 2rem; } div.dialog fieldset aside, div.form-clean fieldset aside { font-size: 14px; font-size: 1.4rem; } div.dialog fieldset aside p, div.dialog fieldset aside ul, div.dialog fieldset aside ol, div.form-clean fieldset aside p, div.form-clean fieldset aside ul, div.form-clean fieldset aside ol { margin-bottom: 10px; margin-bottom: 1rem; } div.dialog fieldset aside ul, div.dialog fieldset aside ol, div.form-clean fieldset aside ul, div.form-clean fieldset aside ol { margin-left: 20px; margin-left: 2rem; } div.dialog fieldset aside.section-header, div.form-clean fieldset aside.section-header { color: #333; padding-bottom: 10px; padding-bottom: 1rem; } div.dialog textarea, div.dialog input[type=text], div.dialog input[type=email], div.dialog input[type=password], div.form-clean textarea, div.form-clean input[type=text], div.form-clean input[type=email], div.form-clean input[type=password] { border: solid 1px rgba(0, 0, 0, .12); padding-left: 10px; margin-bottom: 1px; } div.dialog textarea, div.form-clean textarea { height: 8em !important; } div.dialog input:disabled, div.form-clean input:disabled { background: #f2f2f2; } div.dialog input[type=file], div.form-clean input[type=file] { border: 0; } div.dialog label, div.form-clean label { display: block !important; top: 0px; top: 0rem; font-size: 14px !important; font-size: 1.4rem !important; color: #777; } div.dialog .icon-indent, div.form-clean .icon-indent { margin-left: 12px; margin-left: 1.2rem; } div.dialog .checkbox span, div.form-clean .checkbox span { color: #333; } div.dialog .checkbox span, div.form-clean .checkbox span { color: #333; } div.dialog div.error, div.form-clean div.error { height: 1em; } div.dialog section.file.indented, div.form-clean section.file.indented { margin-left: 48px; margin-left: 4.8rem; width: auto; } div.dialog section.switch, div.form-clean section.switch { display: inline-block; margin: 0 0 20px 48px; margin: 0 0 2rem 4.8rem; padding: 20px; padding: 2rem; border: solid 1px #e7e7e7; } div.dialog section.switch.active, div.form-clean section.switch.active { background: #fff8dc; border: solid 1px #ffe476; } div.dialog section.switch label, div.form-clean section.switch label { margin: 0; } div.dialog section.switch label.description, div.form-clean section.switch label.description { margin-bottom: 10px; margin-bottom: 1rem; } div.dialog button.close, div.form-clean button.close { position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; background: url(/images/buttons/close-black-64.png); background-size: 24px 24px; border: 0; z-index: 1; cursor: pointer; position: fixed; } div.dialog div.notice-indented, div.form-clean div.notice-indented { margin-left: 48px; margin-left: 4.8rem; margin-bottom: 20px; margin-bottom: 2rem; } div.form-lighten input { background: white; } html { font-size: 62.5%; } body { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100vh; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; width: 100%; padding: 0; margin: 0; font-family: 'Metropolis', Arial, Helvetica, sans-serif; font-size: 16px; font-size: 1.6rem; -webkit-touch-callout: none; } body * { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } body div.viewport { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } body.hide-footer footer.page { display: none; } a, abbr, address, article, aside, audio, b, blockquote, body, caption, cite, code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video { padding: 0; margin: 0; border: 0; outline: 0; } *, *:before, *:after { box-sizing: border-box; padding: 0; margin: 0; } * { font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } a { text-decoration: none; -webkit-tap-highlight-color: transparent; } input:not([type="checkbox"]):not([type="radio"]), button { outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } div.dialog .error, div.form-clean .error { color: red; text-align: center; margin-bottom: 10px; } .wrap { white-space: normal; } textarea { resize: none; } span.material-icons { display: none; } @font-face { font-family: 'icomoon'; src: url(/webpack/9dd5f235a1e4d6300edc5cc1017bd116.eot); src: url(/webpack/9dd5f235a1e4d6300edc5cc1017bd116.eot) format("embedded-opentype"), url(/webpack/5961a6cdbcfe207a6ae78f89f74af8f1.ttf) format("truetype"), url(/webpack/538344b3b8947ea300da92ad9a96fff1.woff) format("woff"), url(/webpack/f5d1db410dd3e1b6e1e794d18e7567d2.svg) format("svg"); font-weight: normal; font-style: normal; } [class^="i-"], [class*=" i-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; -webkit-font-feature-settings: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .i-envelop:before { content: "\E945"; } .i-bubble2:before { content: "\E96E"; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .cardGroup { 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; } .card { border: 2px solid #dde2e6; padding: 20px; margin-bottom: 20px; background-color: #fff; cursor: pointer; color: #2d2d2d !important; } .card:hover, .card:focus { text-decoration: none !important; } @media only screen and (min-width: 569px) { .card { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media only screen and (min-width: 769px) { .card { -webkit-box-flex: 1; -ms-flex: 1 0 32%; flex: 1 0 32%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 32%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .card__link, a.card__link:hover { text-decoration: none !important; color: inherit !important; height: 100%; } .card__title { font-weight: 700; text-align: center; } .card__title h2 { font-size: 2em; margin-top: 0; } .card__description { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; margin: 20px 0; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .DayPicker { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; padding: 16px 0; padding: 1rem 0; margin: 0 auto; width: 400px; width: 25rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: solid 1px #e2e2e2; } .DayPicker-Month { display: table; border-collapse: collapse; border-spacing: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0 16px; margin: 0 1rem; } .DayPicker-NavBar { position: absolute; left: 0; right: 0; padding: 0 8px; padding: 0 .5rem; } .DayPicker-NavButton { position: absolute; width: 24px; width: 1.5rem; height: 24px; height: 1.5rem; background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; } .DayPicker-NavButton--prev { left: 16px; left: 1rem; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDI2IDUwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjIgKDEyMDQzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5wcmV2PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9InByZXYiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzLjM5MzE5MywgMjUuMDAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC0xMy4zOTMxOTMsIC0yNS4wMDAwMDApIHRyYW5zbGF0ZSgwLjg5MzE5MywgMC4wMDAwMDApIiBmaWxsPSIjNTY1QTVDIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsNDkuMTIzNzMzMSBMMCw0NS4zNjc0MzQ1IEwyMC4xMzE4NDU5LDI0LjcyMzA2MTIgTDAsNC4yMzEzODMxNCBMMCwwLjQ3NTA4NDQ1OSBMMjUsMjQuNzIzMDYxMiBMMCw0OS4xMjM3MzMxIEwwLDQ5LjEyMzczMzEgWiIgaWQ9InJpZ2h0IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K"); } .DayPicker-NavButton--next { right: 16px; right: 1rem; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDI2IDUwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjIgKDEyMDQzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5uZXh0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Im5leHQiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuOTUxNDUxLCAwLjAwMDAwMCkiIGZpbGw9IiM1NjVBNUMiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCw0OS4xMjM3MzMxIEwwLDQ1LjM2NzQzNDUgTDIwLjEzMTg0NTksMjQuNzIzMDYxMiBMMCw0LjIzMTM4MzE0IEwwLDAuNDc1MDg0NDU5IEwyNSwyNC43MjMwNjEyIEwwLDQ5LjEyMzczMzEgTDAsNDkuMTIzNzMzMSBaIiBpZD0icmlnaHQiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo="); } .DayPicker-Caption { display: table-caption; height: 24px; height: 1.5rem; text-align: center; } .DayPicker-Weekdays { display: table-header-group; } .DayPicker-WeekdaysRow { display: table-row; } .DayPicker-Weekday { display: table-cell; padding: 8px; padding: .5rem; font-size: .875em; text-align: center; color: #8b9898; } .DayPicker-Body { display: table-row-group; } .DayPicker-Week { display: table-row; } .DayPicker-Day { display: table-cell; padding: 8px; padding: .5rem; border: 1px solid #eaecec; text-align: center; cursor: pointer; vertical-align: middle; } .DayPicker--interactionDisabled .DayPicker-Day { cursor: default; } /* Default modifiers */ .DayPicker-Day--today { color: #d0021b; font-weight: 500; } .DayPicker-Day--disabled { color: #dce0e0; cursor: default; background-color: #eff1f1; } .DayPicker-Day--outside { cursor: default; color: #dce0e0; } /* Example modifiers */ .DayPicker-Day--sunday { background-color: #f7f8f8; } .DayPicker-Day--sunday:not(.DayPicker-Day--today) { color: #dce0e0; } .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) { color: #FFF; background-color: #4A90E2; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .constrain { padding: 0 10px; } @media only screen and (min-width: 769px) { .constrain { padding: 0 20px; } } @media only screen and (min-width: 1025px) { .constrain { max-width: 1100px; margin: 0 auto; } } @media only screen and (min-width: 569px) { .vertCenter { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .vertCenter__half { width: 100%; } @media only screen and (min-width: 569px) { .vertCenter__half { width: 50%; } } body.mobileWrapper { position: fixed; } .pageContent.withAuthOverlay, .legacyAuthOverlay { filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: blur(8px); -webkit-filter: blur(8px); -moz-filter: blur(8px); -o-filter: blur(8px); -ms-filter: blur(8px); height: 100%; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .searchBand { background-color: #ecf3fb; padding: 10px; margin: 10px -20px -20px; } .searchBand__search { width: 300px; height: auto; margin: 0 auto; } .searchBand__search .normal { padding: 0; } .searchBand__search .normal input { border: 0 !important; border-bottom: 3px solid #4a4a4a !important; background: transparent !important; box-shadow: none !important; } .searchBand__search .normal span { top: -1px; } .searchBand__search .normal span::after, .searchBand__search .normal span::before { height: 3px; } .searchBand__search button { width: auto !important; padding: 0 10px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ body.legacy .pure-button, ody.search .pure-button, body.collections .pure-button { border: 2px solid #1270e2; color: white; } body.legacy .pure-button, body.legacy .pure-button:focus, ody.search .pure-button, ody.search .pure-button:focus, body.collections .pure-button, body.collections .pure-button:focus { background-color: #217ded; } body.legacy .pure-button:hover, ody.search .pure-button:hover, body.collections .pure-button:hover { color: white; } body.legacy .button-yellow, ody.search .button-yellow, body.collections .button-yellow { border: 2px solid #658ea9; color: #2a3e4b; } body.legacy .button-yellow, body.legacy .button-yellow:focus, ody.search .button-yellow, ody.search .button-yellow:focus, body.collections .button-yellow, body.collections .button-yellow:focus { background-color: #759ab2; } body.legacy .button-gray, ody.search .button-gray, body.collections .button-gray { border: 1px solid #bbb; color: #666; } body.legacy .button-gray, body.legacy .button-gray:focus, ody.search .button-gray, ody.search .button-gray:focus, body.collections .button-gray, body.collections .button-gray:focus { background-color: #ddd; } body.legacy .button-success, ody.search .button-success, body.collections .button-success { border: 2px solid #4f8030; } body.legacy .button-success, body.legacy .button-success:focus, ody.search .button-success, ody.search .button-success:focus, body.collections .button-success, body.collections .button-success:focus { background-color: #66a53e; } body.legacy .button-bold, ody.search .button-bold, body.collections .button-bold { border: 2px solid #ff946f; color: #6f1d00; } body.legacy .button-bold, body.legacy .button-bold:focus, ody.search .button-bold, ody.search .button-bold:focus, body.collections .button-bold, body.collections .button-bold:focus { background-color: #ffbaa2; } body.legacy .button-bold:hover, ody.search .button-bold:hover, body.collections .button-bold:hover { color: #a22a00; background-color: #ffe0d5; } body.legacy .button-ghost, body.legacy a.button-ghost, ody.search .button-ghost, ody.search a.button-ghost, body.collections .button-ghost, body.collections a.button-ghost { border: 2px solid white; } body.legacy .button-ghost, body.legacy .button-ghost:focus, body.legacy a.button-ghost, body.legacy a.button-ghost:focus, ody.search .button-ghost, ody.search .button-ghost:focus, ody.search a.button-ghost, ody.search a.button-ghost:focus, body.collections .button-ghost, body.collections .button-ghost:focus, body.collections a.button-ghost, body.collections a.button-ghost:focus { background-color: rgba(255, 255, 255, 0); } body.legacy .button-ghost:hover, body.legacy .button-ghost.active, body.legacy a.button-ghost:hover, body.legacy a.button-ghost.active, ody.search .button-ghost:hover, ody.search .button-ghost.active, ody.search a.button-ghost:hover, ody.search a.button-ghost.active, body.collections .button-ghost:hover, body.collections .button-ghost.active, body.collections a.button-ghost:hover, body.collections a.button-ghost.active { background-image: linear-gradient(transparent, transparent 40%, transparent); background-color: white; } body.legacy .button-ghost.button-ghost-blue, body.legacy a.button-ghost.button-ghost-blue, ody.search .button-ghost.button-ghost-blue, ody.search a.button-ghost.button-ghost-blue, body.collections .button-ghost.button-ghost-blue, body.collections a.button-ghost.button-ghost-blue { border: 1px solid #0d4d9b; color: #0d4d9b; } body.legacy .button-ghost.button-ghost-blue:hover, body.legacy .button-ghost.button-ghost-blue.active, body.legacy .button-ghost.button-ghost-blue.zeroclipboard-is-hover, body.legacy a.button-ghost.button-ghost-blue:hover, body.legacy a.button-ghost.button-ghost-blue.active, body.legacy a.button-ghost.button-ghost-blue.zeroclipboard-is-hover, ody.search .button-ghost.button-ghost-blue:hover, ody.search .button-ghost.button-ghost-blue.active, ody.search .button-ghost.button-ghost-blue.zeroclipboard-is-hover, ody.search a.button-ghost.button-ghost-blue:hover, ody.search a.button-ghost.button-ghost-blue.active, ody.search a.button-ghost.button-ghost-blue.zeroclipboard-is-hover, body.collections .button-ghost.button-ghost-blue:hover, body.collections .button-ghost.button-ghost-blue.active, body.collections .button-ghost.button-ghost-blue.zeroclipboard-is-hover, body.collections a.button-ghost.button-ghost-blue:hover, body.collections a.button-ghost.button-ghost-blue.active, body.collections a.button-ghost.button-ghost-blue.zeroclipboard-is-hover { background-image: linear-gradient(transparent, transparent 40%, transparent); background-color: #217ded; color: white; } body.legacy .button-ghost.button-ghost-gray, body.legacy a.button-ghost.button-ghost-gray, ody.search .button-ghost.button-ghost-gray, ody.search a.button-ghost.button-ghost-gray, body.collections .button-ghost.button-ghost-gray, body.collections a.button-ghost.button-ghost-gray { border: 1px solid #aaa; color: #777; } body.legacy .button-ghost.button-ghost-gray:hover, body.legacy .button-ghost.button-ghost-gray.active, body.legacy a.button-ghost.button-ghost-gray:hover, body.legacy a.button-ghost.button-ghost-gray.active, ody.search .button-ghost.button-ghost-gray:hover, ody.search .button-ghost.button-ghost-gray.active, ody.search a.button-ghost.button-ghost-gray:hover, ody.search a.button-ghost.button-ghost-gray.active, body.collections .button-ghost.button-ghost-gray:hover, body.collections .button-ghost.button-ghost-gray.active, body.collections a.button-ghost.button-ghost-gray:hover, body.collections a.button-ghost.button-ghost-gray.active { background: #f2f2f2; border-color: #ccc; } body.legacy .button-ghost.button-ghost-white, body.legacy a.button-ghost.button-ghost-white, ody.search .button-ghost.button-ghost-white, ody.search a.button-ghost.button-ghost-white, body.collections .button-ghost.button-ghost-white, body.collections a.button-ghost.button-ghost-white { border: solid 1px #fff; color: white; } body.legacy .button-ghost.button-ghost-white:hover, body.legacy .button-ghost.button-ghost-white.active, body.legacy a.button-ghost.button-ghost-white:hover, body.legacy a.button-ghost.button-ghost-white.active, ody.search .button-ghost.button-ghost-white:hover, ody.search .button-ghost.button-ghost-white.active, ody.search a.button-ghost.button-ghost-white:hover, ody.search a.button-ghost.button-ghost-white.active, body.collections .button-ghost.button-ghost-white:hover, body.collections .button-ghost.button-ghost-white.active, body.collections a.button-ghost.button-ghost-white:hover, body.collections a.button-ghost.button-ghost-white.active { background: white; color: #217ded; } body.legacy .button-ghost.button-ghost-black, body.legacy a.button-ghost.button-ghost-black, ody.search .button-ghost.button-ghost-black, ody.search a.button-ghost.button-ghost-black, body.collections .button-ghost.button-ghost-black, body.collections a.button-ghost.button-ghost-black { border: 1px solid black; color: black; } body.legacy .button-ghost.button-ghost-black:hover, body.legacy .button-ghost.button-ghost-black.active, body.legacy a.button-ghost.button-ghost-black:hover, body.legacy a.button-ghost.button-ghost-black.active, ody.search .button-ghost.button-ghost-black:hover, ody.search .button-ghost.button-ghost-black.active, ody.search a.button-ghost.button-ghost-black:hover, ody.search a.button-ghost.button-ghost-black.active, body.collections .button-ghost.button-ghost-black:hover, body.collections .button-ghost.button-ghost-black.active, body.collections a.button-ghost.button-ghost-black:hover, body.collections a.button-ghost.button-ghost-black.active { background: black; } body.legacy .button-ghost.button-ghost-red, body.legacy a.button-ghost.button-ghost-red, ody.search .button-ghost.button-ghost-red, ody.search a.button-ghost.button-ghost-red, body.collections .button-ghost.button-ghost-red, body.collections a.button-ghost.button-ghost-red { border: 1px solid #ff6e3c; color: #ff6e3c; } body.legacy .button-ghost.button-ghost-red:hover, body.legacy .button-ghost.button-ghost-red.active, body.legacy a.button-ghost.button-ghost-red:hover, body.legacy a.button-ghost.button-ghost-red.active, ody.search .button-ghost.button-ghost-red:hover, ody.search .button-ghost.button-ghost-red.active, ody.search a.button-ghost.button-ghost-red:hover, ody.search a.button-ghost.button-ghost-red.active, body.collections .button-ghost.button-ghost-red:hover, body.collections .button-ghost.button-ghost-red.active, body.collections a.button-ghost.button-ghost-red:hover, body.collections a.button-ghost.button-ghost-red.active { background: #ff6e3c; color: white; } body.legacy .button-xsmall, ody.search .button-xsmall, body.collections .button-xsmall { font-size: 70%; } body.legacy .button-small, ody.search .button-small, body.collections .button-small { font-size: 85%; } body.legacy .button-large, ody.search .button-large, body.collections .button-large { font-size: 110%; } body.legacy .button-xlarge, ody.search .button-xlarge, body.collections .button-xlarge { font-size: 125%; } body.legacy .button-group, ody.search .button-group, body.collections .button-group { margin-top: 18px; } body.legacy .button-group button, ody.search .button-group button, body.collections .button-group button { background: none; border: 0; color: #999; padding: 2px 2px; } body.legacy .button-group button:hover, ody.search .button-group button:hover, body.collections .button-group button:hover { color: #444; } body.legacy .button-group button.active, ody.search .button-group button.active, body.collections .button-group button.active { color: #1064cb; } body.legacy .search-button, ody.search .search-button, body.collections .search-button { padding-top: 5px; padding-bottom: 5px; } body.legacy .button-bar, ody.search .button-bar, body.collections .button-bar { font-size: 14px; margin: 0; padding: 0; } body.legacy .button-bar ul, ody.search .button-bar ul, body.collections .button-bar ul { margin: 0; padding: 0; } body.legacy .button-bar li, ody.search .button-bar li, body.collections .button-bar li { list-style: none; } body.legacy .button-bar .button-ghost, ody.search .button-bar .button-ghost, body.collections .button-bar .button-ghost { padding: 1px 7px; } body.legacy .pure-button.loader, ody.search .pure-button.loader, body.collections .pure-button.loader { width: 150px; } body.legacy .pure-button.loader img.button-spinner, ody.search .pure-button.loader img.button-spinner, body.collections .pure-button.loader img.button-spinner { display: none; } body.legacy .pure-button.loader.loading img.button-spinner, ody.search .pure-button.loader.loading img.button-spinner, body.collections .pure-button.loader.loading img.button-spinner { display: inline; } body.legacy .pure-button.loader.loading span, ody.search .pure-button.loader.loading span, body.collections .pure-button.loader.loading span { display: none; } body.legacy .with-count, ody.search .with-count, body.collections .with-count { position: relative; } body.legacy .with-count aside.count, ody.search .with-count aside.count, body.collections .with-count aside.count { position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; line-height: 20px; color: white; background: #217ded; border-radius: 50%; text-align: center; font-weight: bold; border: solid 2px #1064cb; } /* Collection preview */ .collection-preview .index-card .index-card-body, .collection-preview .index-card:hover .index-card-body { padding-right: 0; } .collection-preview .index-card .index-card-header .count { z-index: 2; position: absolute; top: 0; right: 10px; height: 50px; line-height: 45px; text-align: right; } .collection-preview .index-card .index-card-header .count * { vertical-align: middle; } .collection-preview .index-card .index-card-header .count i { position: relative; font-size: 10px; font-weight: bold; margin-right: 5px; top: 2px; color: #217ded; } .collection-preview .index-card .index-card-header .count span { font-size: 24px; color: #217ded; } .collection-preview .index-card .index-card-header .blog-author { color: #217ded; } .collection-preview .index-card .index-card-body { height: 190px; } .collection-preview .index-card .index-card-body h3 { height: 1.5em; overflow: hidden; text-overflow: ellipsis; } .collection-preview .index-card .index-card-body a { text-decoration: none; } .collection-preview .index-card .index-card-body .app-description { margin-right: 20px; display: block; /* Fallback for non-webkit */ display: -webkit-box; height: 96px; /* Fallback for non-webkit */ -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #333; } .collection-preview .index-card .index-card-body ul.images { overflow: hidden; padding: 0; margin: 10px 0 0 0; height: 50px; } .collection-preview .index-card .index-card-body ul.images li { float: left; overflow: hidden; margin-right: 5px; } .collection-preview .index-card .index-card-body ul.images li img { width: 46px; min-height: 50px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .tool-tip { background: #fff !important; border: 2px solid #000; color: #000 !important; opacity: 1 !important; padding: 12px !important; padding: .75rem !important; max-width: 320px; max-width: 20rem; line-height: 25.6px; line-height: 1.6rem; text-align: left; } .tool-tip h2 { margin-bottom: 0 !important; } .tool-tip .time { display: block; margin: 16px 0 !important; margin: 1rem 0 !important; font-size: 14px !important; font-weight: bold !important; } .tool-tip .content { line-height: 25.6px !important; line-height: 1.6rem !important; font-weight: normal !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } @charset "UTF-8"; /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ @font-face { font-family: 'Merriweather'; src: url(/webpack/51742be274925769a6b1201631b033be.woff); src: url(/webpack/e424b83fe5e91e1dc1d97df7a5174b39.woff2) format("woff2"); font-weight: 400; font-style: italic; } @font-face { font-family: 'Metropolis'; src: url(/webpack/a58f30cd9df08af32227633a9b53097f.woff); src: url(/webpack/a0f7ee8be4cfa9535463738d64e880fb.woff2) format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: 'Metropolis'; src: url(/webpack/d9b9eb12bbc3d75f2c221286958855fe.woff); src: url(/webpack/6ce54540569afc2b712f507084683408.woff2) format("woff2"); font-weight: 400; font-style: italic; } @font-face { font-family: 'Metropolis'; src: url(/webpack/9d595b825aded87ff9fc52de09c7f9b0.woff); src: url(/webpack/36d2e83c9eb48ecffea9f8a19b52903e.woff2) format("woff2"); font-weight: 500; font-style: normal; } @font-face { font-family: 'Metropolis'; src: url(/webpack/f1821ee3420a5857942da37d185a79f2.woff); src: url(/webpack/3f957bb97a35b10459eb709705dee599.woff2) format("woff2"); font-weight: 500; font-style: italic; } @font-face { font-family: 'Metropolis'; src: url(/webpack/8ccf3b4df4558fc208aa3fa4e15f46d3.woff); src: url(/webpack/c039820b3d28310a06f3f2356852792e.woff2) format("woff2"); font-weight: 600; font-style: normal; } @font-face { font-family: 'Metropolis'; src: url(/webpack/7e8aac98ed63e2675222877e95d614b4.woff); src: url(/webpack/6a918569219d249b1eb2f117108c3931.woff2) format("woff2"); font-weight: 700; font-style: normal; } @font-face { font-family: 'Metropolis'; src: url(/webpack/85d3f28d812e0f80f3f4146516c5524a.woff); src: url(/webpack/762c9f631ffef2b54370d0c97e57c721.woff2) format("woff2"); font-weight: 800; font-style: normal; } a { color: #217ded; } .resource-with-content-container.v2 .resource-content-block ul, .resource-with-content-container.v2 .resource-content-block ol, .resource-with-content-container.v2 .resource-content-block p, .resource-with-content-container.v2 .resource-with-content-navigation ul, .resource-with-content-container.v2 .resource-with-content-navigation ol, .resource-with-content-container.v2 .resource-with-content-navigation p, .content-block-editor-guide .resource-content-block ul, .content-block-editor-guide .resource-content-block ol, .content-block-editor-guide .resource-content-block p, .typography ul, .typography ol, .typography p { margin-bottom: 40px; margin-bottom: 2.5rem; } .resource-with-content-container.v2 .resource-content-block ul:last-child, .resource-with-content-container.v2 .resource-content-block ol:last-child, .resource-with-content-container.v2 .resource-content-block p:last-child, .resource-with-content-container.v2 .resource-with-content-navigation ul:last-child, .resource-with-content-container.v2 .resource-with-content-navigation ol:last-child, .resource-with-content-container.v2 .resource-with-content-navigation p:last-child, .content-block-editor-guide .resource-content-block ul:last-child, .content-block-editor-guide .resource-content-block ol:last-child, .content-block-editor-guide .resource-content-block p:last-child, .typography ul:last-child, .typography ol:last-child, .typography p:last-child { margin-bottom: 0; } .resource-with-content-container.v2 .resource-content-block ul, .resource-with-content-container.v2 .resource-content-block ol, .resource-with-content-container.v2 .resource-with-content-navigation ul, .resource-with-content-container.v2 .resource-with-content-navigation ol, .content-block-editor-guide .resource-content-block ul, .content-block-editor-guide .resource-content-block ol, .typography ul, .typography ol { padding-left: 32px; padding-left: 2rem; } .resource-with-content-container.v2 .resource-content-block ul li, .resource-with-content-container.v2 .resource-content-block ol li, .resource-with-content-container.v2 .resource-with-content-navigation ul li, .resource-with-content-container.v2 .resource-with-content-navigation ol li, .content-block-editor-guide .resource-content-block ul li, .content-block-editor-guide .resource-content-block ol li, .typography ul li, .typography ol li { margin-bottom: 16px; margin-bottom: 1rem; } .resource-with-content-container.v2 .resource-content-block ul li ul, .resource-with-content-container.v2 .resource-content-block ul li ol, .resource-with-content-container.v2 .resource-content-block ol li ul, .resource-with-content-container.v2 .resource-content-block ol li ol, .resource-with-content-container.v2 .resource-with-content-navigation ul li ul, .resource-with-content-container.v2 .resource-with-content-navigation ul li ol, .resource-with-content-container.v2 .resource-with-content-navigation ol li ul, .resource-with-content-container.v2 .resource-with-content-navigation ol li ol, .content-block-editor-guide .resource-content-block ul li ul, .content-block-editor-guide .resource-content-block ul li ol, .content-block-editor-guide .resource-content-block ol li ul, .content-block-editor-guide .resource-content-block ol li ol, .typography ul li ul, .typography ul li ol, .typography ol li ul, .typography ol li ol { margin-top: 16px; margin-top: 1rem; } .resource-with-content-container.v2 .resource-content-block ul li:last-child, .resource-with-content-container.v2 .resource-content-block ol li:last-child, .resource-with-content-container.v2 .resource-with-content-navigation ul li:last-child, .resource-with-content-container.v2 .resource-with-content-navigation ol li:last-child, .content-block-editor-guide .resource-content-block ul li:last-child, .content-block-editor-guide .resource-content-block ol li:last-child, .typography ul li:last-child, .typography ol li:last-child { margin-bottom: 0; } .resource-with-content-container.v2 .resource-content-block img, .resource-with-content-container.v2 .resource-with-content-navigation img, .content-block-editor-guide .resource-content-block img, .typography img { max-width: 100%; } .resource-with-content-container.v2 .resource-content-block table, .resource-with-content-container.v2 .resource-with-content-navigation table, .content-block-editor-guide .resource-content-block table, .typography table { width: 100% !important; border-collapse: collapse; } .resource-with-content-container.v2 .resource-content-block table th, .resource-with-content-container.v2 .resource-content-block table td, .resource-with-content-container.v2 .resource-with-content-navigation table th, .resource-with-content-container.v2 .resource-with-content-navigation table td, .content-block-editor-guide .resource-content-block table th, .content-block-editor-guide .resource-content-block table td, .typography table th, .typography table td { border: solid 3px #e7e7e7; padding: 16px; padding: 1rem; } .resource-with-content-container.v2 .resource-content-block blockquote, .resource-with-content-container.v2 .resource-with-content-navigation blockquote, .content-block-editor-guide .resource-content-block blockquote, .typography blockquote { position: relative; margin: 32px; margin: 2rem; padding: 8px 80px; padding: 0.5rem 5rem; quotes: "\201C" "\201D" "\2018" "\2019"; font-family: "Merriweather", sans-serif; } .resource-with-content-container.v2 .resource-content-block blockquote:before, .resource-with-content-container.v2 .resource-with-content-navigation blockquote:before, .content-block-editor-guide .resource-content-block blockquote:before, .typography blockquote:before { position: absolute; top: 32px; top: 2rem; left: 0; color: #ccc; content: open-quote; font-size: 4em; } .resource-with-content-container.v2 .resource-content-block blockquote:after, .resource-with-content-container.v2 .resource-with-content-navigation blockquote:after, .content-block-editor-guide .resource-content-block blockquote:after, .typography blockquote:after { content: close-quote; visibility: hidden; } .resource-with-content-container.v2 .resource-content-block h1, .resource-with-content-container.v2 .resource-content-block h2, .resource-with-content-container.v2 .resource-with-content-navigation h1, .resource-with-content-container.v2 .resource-with-content-navigation h2, .content-block-editor-guide .resource-content-block h1, .content-block-editor-guide .resource-content-block h2, .typography h1, .typography h2 { margin-bottom: 16px; margin-bottom: 1rem; border-bottom: solid 1px #5d5d5d; } .resource-with-content-container.v2 .resource-content-block *, .resource-with-content-container.v2 .resource-with-content-navigation *, .content-block-editor-guide .resource-content-block *, .typography * { font-size: 26.4px; font-size: 1.65rem; line-height: 1.5em; } .resource-with-content-container.v2 .resource-content-block h1, .resource-with-content-container.v2 .resource-with-content-navigation h1, .content-block-editor-guide .resource-content-block h1, .typography h1 { font-size: 59.4px; font-size: 3.7125rem; } .resource-with-content-container.v2 .resource-content-block h2, .resource-with-content-container.v2 .resource-with-content-navigation h2, .content-block-editor-guide .resource-content-block h2, .typography h2 { font-size: 39.6px; font-size: 2.475rem; color: #217ded; } .resource-with-content-container.v2 .resource-content-block h3, .resource-with-content-container.v2 .resource-with-content-navigation h3, .content-block-editor-guide .resource-content-block h3, .typography h3 { font-size: 31.68px; font-size: 1.98rem; color: #5d5d5d; text-transform: uppercase; font-weight: 900; letter-spacing: 1px; } .resource-with-content-container.v2 .resource-content-block h3 a, .resource-with-content-container.v2 .resource-with-content-navigation h3 a, .content-block-editor-guide .resource-content-block h3 a, .typography h3 a { color: #838383; text-decoration: underline; } .resource-with-content-container.v2 .resource-content-block.pos-0 p:first-child, .resource-with-content-container.v2 .resource-content-block.pos-0 p:first-child a, .typography-intro, .typography-intro a { font-style: oblique; } .resource-with-content-container.v2 .resource-content-block.pos-0 p:first-child, .resource-with-content-container.v2 .resource-content-block.pos-0 p:first-child *, .resource-with-content-container.v2 .resource-content-block.pos-0 p:first-child a, .resource-with-content-container.v2 .resource-content-block.pos-0 p:first-child a *, .typography-intro, .typography-intro *, .typography-intro a, .typography-intro a * { font-family: "Merriweather", sans-serif; } .resource-with-content-container.v2 .resource-content-block.pos-0 p:first-child, .resource-with-content-container.v2 .resource-content-block.pos-0 p:first-child *, .resource-with-content-container.v2 .resource-content-block.pos-0 p:first-child a, .resource-with-content-container.v2 .resource-content-block.pos-0 p:first-child a *, .typography-intro, .typography-intro *, .typography-intro a, .typography-intro a * { font-size: 39.6px; font-size: 2.475rem; } h3.typography { font-size: 31.68px; font-size: 1.98rem; color: #5d5d5d; text-transform: uppercase; font-weight: 900; letter-spacing: 1px; } h3.typography a { color: #838383; text-decoration: underline; } /* ===== NAVIGATION ===== */ .resource-with-content-container section.meta-container .resource-with-content-navigation, .typography-nav { margin-bottom: 96px; margin-bottom: 6rem; } @media only screen and (min-width: 769px) { .resource-with-content-container section.meta-container .resource-with-content-navigation, .typography-nav { margin-left: 4rem; } } @media only screen and (max-width: 768px) { .resource-with-content-container section.meta-container .resource-with-content-navigation, .typography-nav { margin-top: 6rem; } } .resource-with-content-container section.meta-container .resource-with-content-navigation ol, .typography-nav ol { margin: 0; padding: 0; font-size: 26.4px; font-size: 1.65rem; font-weight: bold; } .resource-with-content-container section.meta-container .resource-with-content-navigation ol li, .typography-nav ol li { list-style: none; } .resource-with-content-container section.meta-container .resource-with-content-navigation ol li a, .typography-nav ol li a { color: #217ded; } .resource-with-content-container section.meta-container .resource-with-content-navigation ol:first-of-type, .typography-nav ol:first-of-type { margin-bottom: 16px; margin-bottom: 1rem; } .resource-with-content-container section.meta-container .resource-with-content-navigation ol span, .typography-nav ol span { font-weight: normal; } .resource-with-content-container section.meta-container .resource-with-content-navigation ol, .resource-with-content-container section.meta-container .resource-with-content-navigation nav, .typography-nav ol, .typography-nav nav { width: 100%; background: #e7e7e7; padding: 32px; padding: 2rem; } .resource-with-content-container section.meta-container .resource-with-content-navigation div.meta button, .resource-with-content-container section.meta-container .resource-with-content-navigation nav button, .typography-nav div.meta button, .typography-nav nav button { width: 100%; } .resource-with-content-container section.meta-container .resource-with-content-navigation div.meta, .typography-nav div.meta { margin-top: 32px; margin-top: 2rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ header.header { position: relative; padding: 8px; background: #fff; height: 54px; } @media only screen and (max-width: 1024px) { header.header .logo, header.header .nav-search { position: absolute; } header.header .logo { left: 0px; } header.header button { width: 50px; min-width: 50px; padding: 0 !important; } header.header .userMenu__loginOrSignup button { width: 70px; min-width: 70px; } header.header .nav-search { left: 43px; right: 150px; } header.header .nav-search.loggedIn { right: 110px; } header.header .nav-search fieldset { position: absolute; width: auto !important; right: 60px; } header.header .nav-search .actions { position: absolute; right: 0; width: 50px; } } @media only screen and (max-width: 736px) { header.header .nav-search fieldset { right: 0; } header.header .nav-search .actions { display: none; } } header.header .secondary-logo { position: absolute; right: 0; top: 0; } header.header .secondary-logo img { height: 37px; } header.header .logo { float: left; width: 175px; margin-right: 10px; margin-top: 6px; } @media only screen and (max-width: 1024px) { header.header .logo { margin-top: 2px; } } header.header fieldset { padding: 2px 0 0 0; } header.header fieldset .input-group input.search { border: solid 2px #217ded; height: 34px; padding: 5px 8px 6px; } header.header .pure-button { padding-top: 5px; padding-bottom: 5px; } @media only screen and (max-width: 320px) { header.header .pure-button { font-size: 18px; padding: 3px 8px 3px; } } @media only screen and (max-width: 1024px) { header.header .pure-button i { margin: 0; } header.header .pure-button span { display: none; } } header.header .pure-form button[type="submit"] { margin-top: 0; height: 34px; } header.header .directory-control { float: left; } header.header .directory-control .select { margin-right: 2px; } header.header .directory-control .select2-container { margin-top: -3px; } header.header .directory-control .select2-container .select2-choice { border: 2px solid #f1f1f1; height: 34px; line-height: 34px; } header.header .directory-control .select2-container .select2-choice .select2-arrow { top: 0; } header.header a.browse { font-size: 12px; } header.header button { font-size: 14px; } header.header button i { margin-right: 5px; } .nav-search, .nav-search form, .nav-search .actions { float: left; } .nav-search .actions { margin-left: 10px; } .nav-search .actions button { height: 34px; margin-top: 2px; border: 2px solid #bbb; } .nav-search fieldset { width: 450px; } .browse-directory { position: relative; margin: 10px 0; border: solid 2px #1064cb; font-size: 14px; } .browse-directory h4 { margin: 0; padding: 5px 10px; background: #f2f2f2; } .browse-directory a { text-decoration: none; } .browse-directory ul { margin: 0; padding: 2px 0; } .browse-directory ul li { list-style: none; } .browse-directory ul li a { display: block; padding: 2px 10px; color: #666; } .browse-directory ul li.selected { background: #217ded; } .browse-directory ul li.selected a { color: white; font-weight: bold; } .browse-directory div.subjects { background: #ddd; } .browse-directory div.topics h4 { margin-right: -1px; } .browse-directory div.topics a { color: #999; } .browse-directory div.topics ul { -webkit-column-count: 3; column-count: 3; } .browse-directory .common-core img { width: 12px; height: 14px; } .browse-directory .common-core a { font-weight: 600; } .browse-directory a.close { position: absolute; top: 1px; right: 4px; font-size: 20px; color: #bbb; } .browse-container { position: relative; z-index: 10; background: white; } span.logo-participate-standard, span.logo-participate-responsive { display: inline-block; background-image: url(/images/logos/logo-participate-35.png); width: 122px; height: 25px; background-size: 122px 25px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { span.logo-participate-standard, span.logo-participate-responsive { background-image: url(/images/logos/logo-participate-50.png); } } @media only screen and (max-width: 375px) { span.logo-participate-standard, span.logo-participate-responsive { background-image: url(/images/logos/logo-participate-icon-35.png); width: 35px; height: 35px; background-size: 35px 35px; } } @media only screen and (max-width: 375px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 375px) and (min--moz-device-pixel-ratio: 1.5), only screen and (max-width: 375px) and (min-device-pixel-ratio: 1.5) { span.logo-participate-standard, span.logo-participate-responsive { background-image: url(/images/logos/logo-participate-icon-70.png); } } span.logo-icon { display: inline-block; background-image: url(/images/logos/logo-participate-icon-35.png); width: 35px; height: 35px; background-size: 35px 35px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { span.logo-icon { background-image: url(/images/logos/logo-participate-icon-70.png); } } @media only screen and (max-width: 1024px) { span.logo-participate-responsive { background-image: url(/images/logos/logo-participate-icon-35.png); width: 35px; height: 35px; background-size: 35px 35px; } } @media only screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1024px) and (min--moz-device-pixel-ratio: 1.5), only screen and (max-width: 1024px) and (min-device-pixel-ratio: 1.5) { span.logo-participate-responsive { background-image: url(/images/logos/logo-participate-icon-70.png); } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .load-more { margin: 20px 0; text-align: center; } div[data-react-toolbox="chip"].clear { background: 0; } html.touch li[data-react-toolbox="menu-item"] { height: 44px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .newHeadings h1 { font-family: "Metropolis", Arial, Helvetica, sans-serif; font-size: 36px; color: #217ded; } .newHeadings h2 { font-family: "Metropolis", Arial, Helvetica, sans-serif; color: #223057; } .newHeadings h3 { font-family: "Metropolis", Arial, Helvetica, sans-serif; font-size: 20px; color: #223057; text-transform: uppercase; letter-spacing: 1px; } .newHeadings h4 { font-family: "Metropolis", Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 700; color: #217ded; } .newHeadings h5 { font-family: "Metropolis", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 700; color: #8d97a0; } .color--newBlue { color: #217ded; } .color--blueGray { color: #8d97a0; } .margin--top { margin-top: 20px; } @media only screen and (min-width: 1025px) { .margin--top { margin-top: 40px; } } .margin--topNarrow { margin-top: 10px; } .margin--right { margin-right: 0; } @media only screen and (min-width: 569px) { .margin--right { margin-right: 20px; } } @media only screen and (min-width: 1025px) { .margin--right { margin-right: 40px; } } .margin--left { margin-left: 0; } @media only screen and (min-width: 569px) { .margin--left { margin-left: 20px; } } @media only screen and (min-width: 1025px) { .margin--left { margin-left: 40px; } } .padding--left { padding-left: 0; } @media only screen and (min-width: 569px) { .padding--left { padding-left: 20px; } } @media only screen and (min-width: 1025px) { .padding--left { padding-left: 40px; } } .padding--right { padding-right: 0; } @media only screen and (min-width: 569px) { .padding--right { padding-right: 20px; } } @media only screen and (min-width: 1025px) { .padding--right { padding-right: 40px; } } .padding--leftRight { padding: 0; } @media only screen and (min-width: 569px) { .padding--leftRight { padding: 0 20px; } } .padding--bottomNarrow { padding-bottom: 10px; } @media only screen and (min-width: 569px) { .hideSmallUp { display: none !important; } } @media only screen and (min-width: 769px) { .hideMediumUp { display: none !important; } } @media only screen and (min-width: 1025px) { .hideLargeUp { display: none !important; } } @media only screen and (min-width: 569px) { .showSmallup { display: block !important; } } @media only screen and (min-width: 769px) { .showMediumUp { display: block !important; } } @media only screen and (min-width: 1025px) { .showLargeUp { display: block !important; } } @media only screen and (max-width: 568px) { .hideSmallDown { display: none !important; } } @media only screen and (max-width: 768px) { .hideMediumDown { display: none !important; } } @media only screen and (max-width: 1024px) { .hideLargeDown { display: none !important; } } @media only screen and (max-width: 568px) { .showSmallDown { display: block !important; } } @media only screen and (max-width: 768px) { .showMediumDown { display: block !important; } } @media only screen and (max-width: 1024px) { .showLargeDown { display: block !important; } } .text--center { text-align: center; } .text--right { text-align: right; } .text--uppercase { text-transform: uppercase; } .text--large { font-size: 1.4em; } .text--sansSerif { font-family: "Metropolis", Arial, Helvetica, sans-serif; } .text--serif { font-family: "Merriweather", Georgia, "Times New Roman", sans-serif; } .text--jumbo { font-size: 36px; } .text--xXLarge { font-size: 26px; } .text--xLarge { font-size: 22px; } .text--large { font-size: 20px; } .text--medium { font-size: 18px; } .text--base { font-size: 16px; } .text--small { font-size: 12px; } .text--xSmall { font-size: 10px; } .text--regular { font-weight: 400; } .text--medium { font-weight: 500; } .text--semibold { font-weight: 600; } .text--bold { font-weight: 700; } .text--extrabold { font-weight: 800; } .link--header { text-decoration: none !important; } .theme__rippleWrapper___14zmw { bottom: 0; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: 1; } .theme__ripple___1Nyzu { background-color: currentColor; border-radius: 50%; left: 50%; pointer-events: none; position: absolute; top: 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; transition-duration: 800ms; z-index: 100 } .theme__ripple___1Nyzu.theme__rippleRestarting___2g7jo { opacity: 0; transition-property: none; } .theme__ripple___1Nyzu.theme__rippleActive___cYKCr { opacity: 0; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .theme__ripple___1Nyzu:not(.theme__rippleActive___cYKCr):not(.theme__rippleRestarting___2g7jo) { opacity: 0; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; } .theme__button___2omrp { -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 0; cursor: pointer; display: inline-block; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; font-size: 14px; font-weight: 500; height: 36px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; letter-spacing: 0; line-height: 36px; outline: none; padding: 0; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__button___2omrp *, .theme__button___2omrp *::after, .theme__button___2omrp *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__button___2omrp > input { height: 0.1px; margin: 0; opacity: 0; overflow: hidden; padding: 0; position: absolute; width: 0.1px; z-index: 0; } .theme__button___2omrp::-moz-focus-inner { border: 0; } .theme__button___2omrp > span:not([data-react-toolbox='tooltip']) { display: inline-block; line-height: 36px; vertical-align: middle; } .theme__button___2omrp > svg { display: inline-block; fill: currentColor; font-size: 120%; height: 36px; vertical-align: top; width: 1em; } .theme__button___2omrp > * { pointer-events: none; } .theme__button___2omrp > .theme__rippleWrapper___1rD1C { overflow: hidden; } .theme__button___2omrp[disabled] { color: rgba(0, 0, 0, 0.26); cursor: auto; pointer-events: none; } .theme__squared___lIY4x { border-radius: 3px; min-width: 90px; padding: 0 12px } .theme__squared___lIY4x .theme__icon___2RhET { font-size: 120%; margin-right: 6px; vertical-align: middle; } .theme__squared___lIY4x > svg { margin-right: 5px; } .theme__solid___2JFBA[disabled] { background-color: rgba(0, 0, 0, 0.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); } .theme__solid___2JFBA:active { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); } .theme__solid___2JFBA:focus:not(:active) { box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36); } .theme__raised___13g64 { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); } .theme__flat___3gHvQ { background: transparent; } .theme__floating___1CRp9 { border-radius: 50%; box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24); font-size: 24px; height: 56px; width: 56px } .theme__floating___1CRp9 .theme__icon___2RhET:not([data-react-toolbox='tooltip']) { line-height: 56px; } .theme__floating___1CRp9 > .theme__rippleWrapper___1rD1C { border-radius: 50%; } .theme__floating___1CRp9.theme__mini___26pNL { font-size: 17.77778px; height: 40px; width: 40px; } .theme__floating___1CRp9.theme__mini___26pNL .theme__icon___2RhET { font-size: 17.77778px; line-height: 40px; } .theme__toggle___1K3D_ { background: transparent; border-radius: 50%; vertical-align: middle; width: 36px } .theme__toggle___1K3D_ > .theme__icon___2RhET, .theme__toggle___1K3D_ svg { font-size: 20px; line-height: 36px; vertical-align: top; } .theme__toggle___1K3D_ > .theme__rippleWrapper___1rD1C { border-radius: 50%; } .theme__primary___3tCAN:not([disabled]).theme__raised___13g64, .theme__primary___3tCAN:not([disabled]).theme__floating___1CRp9 { background: #217ded; color: rgb(255, 255, 255); } .theme__primary___3tCAN:not([disabled]).theme__flat___3gHvQ, .theme__primary___3tCAN:not([disabled]).theme__toggle___1K3D_ { color: #217ded; } .theme__primary___3tCAN:not([disabled]).theme__flat___3gHvQ:focus:not(:active), .theme__primary___3tCAN:not([disabled]).theme__toggle___1K3D_:focus:not(:active) { background: rgba(33, 125, 237, 0.2); } .theme__primary___3tCAN:not([disabled]).theme__flat___3gHvQ:hover { background: rgba(33, 125, 237, 0.2); } .theme__accent___25kwx:not([disabled]).theme__raised___13g64, .theme__accent___25kwx:not([disabled]).theme__floating___1CRp9 { background: rgb(255, 64, 129); color: rgb(255, 255, 255); } .theme__accent___25kwx:not([disabled]).theme__flat___3gHvQ, .theme__accent___25kwx:not([disabled]).theme__toggle___1K3D_ { color: rgb(255, 64, 129); } .theme__accent___25kwx:not([disabled]).theme__flat___3gHvQ:focus:not(:active), .theme__accent___25kwx:not([disabled]).theme__toggle___1K3D_:focus:not(:active) { background: rgba(255, 64, 129, 0.2); } .theme__accent___25kwx:not([disabled]).theme__flat___3gHvQ:hover { background: rgba(255, 64, 129, 0.2); } .theme__neutral___2VYev:not([disabled]).theme__raised___13g64, .theme__neutral___2VYev:not([disabled]).theme__floating___1CRp9 { background-color: rgb(255, 255, 255); color: rgb(33, 33, 33); } .theme__neutral___2VYev:not([disabled]).theme__flat___3gHvQ, .theme__neutral___2VYev:not([disabled]).theme__toggle___1K3D_ { color: rgb(33, 33, 33); } .theme__neutral___2VYev:not([disabled]).theme__flat___3gHvQ:focus:not(:active), .theme__neutral___2VYev:not([disabled]).theme__toggle___1K3D_:focus:not(:active) { background: rgba(33, 33, 33, 0.2); } .theme__neutral___2VYev:not([disabled]).theme__flat___3gHvQ:hover { background: rgba(33, 33, 33, 0.2); } .theme__neutral___2VYev:not([disabled]).theme__inverse___26ejK.theme__raised___13g64, .theme__neutral___2VYev:not([disabled]).theme__inverse___26ejK.theme__floating___1CRp9 { background-color: rgb(33, 33, 33); color: rgb(255, 255, 255); } .theme__neutral___2VYev:not([disabled]).theme__inverse___26ejK.theme__flat___3gHvQ, .theme__neutral___2VYev:not([disabled]).theme__inverse___26ejK.theme__toggle___1K3D_ { color: rgb(255, 255, 255); } .theme__neutral___2VYev:not([disabled]).theme__inverse___26ejK.theme__flat___3gHvQ:focus:not(:active), .theme__neutral___2VYev:not([disabled]).theme__inverse___26ejK.theme__toggle___1K3D_:focus:not(:active) { background: rgba(33, 33, 33, 0.2); } .theme__neutral___2VYev:not([disabled]).theme__inverse___26ejK.theme__flat___3gHvQ:hover { background: rgba(33, 33, 33, 0.2); } .theme__neutral___2VYev.theme__inverse___26ejK[disabled] { background-color: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.54); } /* Orientation */ /* Devices (defined by max width) */ /* Devices (defined by min-width) */ .theme__appBar___2QST8 { background: #015dcd; color: rgb(255, 255, 255); font-family: 'Metropolis', Arial, Helvetica, sans-serif; height: 64px; padding: 0 24px; transition-duration: 0.5s; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__appBar___2QST8 *, .theme__appBar___2QST8 *::after, .theme__appBar___2QST8 *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__appBar___2QST8.theme__scrollHide___2GsGD { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .theme__appBar___2QST8:not(.theme__flat___3XEgB) { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); } .theme__appBar___2QST8.theme__fixed___2ozO4 { left: 0; position: fixed; right: 0; top: 0; z-index: 300; } .theme__appBar___2QST8 .theme__inner___3d-sn { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; position: relative; width: 100%; } .theme__appBar___2QST8 a { color: rgb(255, 255, 255); } @media screen and (max-width: 480px) and (orientation: portrait) { .theme__appBar___2QST8 { height: 56px; } } @media screen and (max-width: 600px) and (orientation: landscape) { .theme__appBar___2QST8 { height: 48px; } } .theme__title___ElNCf { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: 18px; font-weight: bold; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap } .theme__title___ElNCf > small { font-size: 18px; font-weight: normal; } .theme__leftIcon___1sdw_ { margin-left: -12px; } .theme__rightIcon___17oMc { margin-left: auto; margin-right: -12px; } .theme__avatar___1GN3V { background-color: rgb(158, 158, 158); border-radius: 50%; color: rgb(255, 255, 255); display: inline-block; font-size: 24px; height: 40px; overflow: hidden; position: relative; text-align: center; vertical-align: middle; width: 40px; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__avatar___1GN3V *, .theme__avatar___1GN3V *::after, .theme__avatar___1GN3V *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__avatar___1GN3V > svg { fill: currentColor; height: 40px; width: 1em; } .theme__avatar___1GN3V > img { height: auto; max-width: 100%; } .theme__image___3vz-8 { background-color: transparent; background-position: center; background-size: cover; border-radius: 50%; display: block; height: 100%; position: absolute; width: 100%; } .theme__letter___1PeUF { display: block; line-height: 40px; width: 100%; } .theme__chip___2kaHZ { background-color: rgb(238, 238, 238); border-radius: 32px; color: rgb(117, 117, 117); display: inline-block; font-size: 14px; line-height: 32px; margin-right: 2.5px; max-width: 100%; overflow: hidden; padding: 0 12px; position: relative; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } .theme__chip___2kaHZ *, .theme__chip___2kaHZ *::after, .theme__chip___2kaHZ *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__avatar___1Qxdi { padding-left: 0 } .theme__avatar___1Qxdi > [data-react-toolbox='avatar'] { height: 32px; margin-right: 8px; vertical-align: middle; width: 32px; } .theme__avatar___1Qxdi > [data-react-toolbox='avatar'] > span { font-size: 20px; line-height: 32px; } .theme__deletable___3O4iJ { padding-right: 32px; } .theme__delete___2qPOn { cursor: pointer; display: inline-block; height: 24px; margin: 4px; padding: 4px; position: absolute; right: 0; width: 24px; } .theme__delete___2qPOn:hover .theme__deleteIcon___3QqFg { background: rgb(158, 158, 158); } .theme__deleteIcon___3QqFg { background: rgb(189, 189, 189); border-radius: 24px; vertical-align: top } .theme__deleteIcon___3QqFg .theme__deleteX___2RXSk { fill: transparent; stroke: rgb(255, 255, 255); stroke-width: 4px; } .theme__input___1Q9Av { padding: 20px 0; position: relative; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__input___1Q9Av *, .theme__input___1Q9Av *::after, .theme__input___1Q9Av *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__input___1Q9Av.theme__withIcon___1qYe_ { margin-left: 68px; } .theme__icon___3B7r3 { color: rgba(0, 0, 0, .4); display: block; font-size: 24px !important; height: 48px; left: -68px; line-height: 48px !important; position: absolute; text-align: center; top: 16px; transition: color .2s cubic-bezier(0.4, 0, 0.2, 1); width: 48px; } .theme__inputElement___HrUQG { background-color: transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-left: 0; border-right: 0; border-top: 0; color: rgb(33, 33, 33); display: block; font-size: 16px; outline: none; padding: 8px 0; width: 100% } .theme__inputElement___HrUQG:focus:not([disabled]):not([readonly]) ~ .theme__bar___3vARP::before, .theme__inputElement___HrUQG:focus:not([disabled]):not([readonly]) ~ .theme__bar___3vARP::after { width: 50%; } .theme__inputElement___HrUQG:focus:not([disabled]):not([readonly]) ~ .theme__label___-iL6j:not(.theme__fixed___3ISWx) { color: #217ded; } .theme__inputElement___HrUQG:focus:not([disabled]):not([readonly]) ~ .theme__label___-iL6j > .theme__required___1fP3a { color: rgb(222, 50, 38); } .theme__inputElement___HrUQG:focus:not([disabled]):not([readonly]) ~ .theme__hint___2cx2l { display: block; opacity: 1; } .theme__inputElement___HrUQG:focus:not([disabled]):not([readonly]) ~ .theme__icon___3B7r3 { color: #217ded; } .theme__inputElement___HrUQG:focus:not([disabled]):not([readonly]).theme__filled___3d3bz ~ .theme__hint___2cx2l { opacity: 0; } .theme__inputElement___HrUQG:focus:not([disabled]):not([readonly]) ~ .theme__label___-iL6j:not(.theme__fixed___3ISWx), .theme__inputElement___HrUQG.theme__filled___3d3bz ~ .theme__label___-iL6j:not(.theme__fixed___3ISWx), .theme__inputElement___HrUQG[type='date'] ~ .theme__label___-iL6j:not(.theme__fixed___3ISWx), .theme__inputElement___HrUQG[type='time'] ~ .theme__label___-iL6j:not(.theme__fixed___3ISWx) { font-size: 12px; top: 6px; } .theme__inputElement___HrUQG.theme__filled___3d3bz ~ .theme__label___-iL6j.theme__fixed___3ISWx, .theme__inputElement___HrUQG.theme__filled___3d3bz ~ .theme__hint___2cx2l { display: none; } .theme__label___-iL6j { color: rgba(0, 0, 0, .4); font-size: 16px; left: 0; line-height: 16px; pointer-events: none; position: absolute; top: 32px; transition-duration: .2s; transition-property: top, font-size, color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) } .theme__label___-iL6j.theme__fixed___3ISWx ~ .theme__hint___2cx2l { display: none; } .theme__hint___2cx2l { color: rgba(0, 0, 0, .4); font-size: 16px; left: 0; line-height: 16px; opacity: 1; pointer-events: none; position: absolute; top: 32px; transition-duration: .2s; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .theme__bar___3vARP { display: block; position: relative; width: 100% } .theme__bar___3vARP::before, .theme__bar___3vARP::after { background-color: #217ded; bottom: 0; content: ''; height: 2px; position: absolute; transition-duration: 0.2s; transition-property: width, background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); width: 0; } .theme__bar___3vARP::before { left: 50%; } .theme__bar___3vARP::after { right: 50%; } .theme__error___18JIv, .theme__counter___9qcnf { color: rgb(222, 50, 38); font-size: 12px; line-height: 20px; margin-bottom: -20px; } .theme__counter___9qcnf { color: rgba(0, 0, 0, .4); position: absolute; right: 0; } .theme__disabled___2URtx > .theme__inputElement___HrUQG { border-bottom-style: dotted; color: rgba(0, 0, 0, .4); } .theme__errored___1YFG2 { padding-bottom: 0 } .theme__errored___1YFG2 > .theme__inputElement___HrUQG { border-bottom-color: rgb(222, 50, 38); margin-top: 1px; } .theme__errored___1YFG2 > .theme__counter___9qcnf, .theme__errored___1YFG2 > .theme__label___-iL6j { color: rgb(222, 50, 38); } .theme__errored___1YFG2 > .theme__label___-iL6j > .theme__required___1fP3a { color: rgb(222, 50, 38); } .theme__hidden___nlw5T { display: none; } .theme__autocomplete___1f4iX { padding: 10px 0; position: relative; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__autocomplete___1f4iX *, .theme__autocomplete___1f4iX *::after, .theme__autocomplete___1f4iX *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__autocomplete___1f4iX.theme__focus___2Np1e .theme__suggestions___igtYq { box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 4px rgba(0, 0, 0, .24); max-height: 45vh; visibility: visible; } .theme__values___1sZ9o { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin: 0; padding: 0 0 5px 0; } .theme__value___-NcZ5 { margin: 2.5px 5px 2.5px 0; } .theme__suggestions___igtYq { background-color: rgb(255, 255, 255); list-style: none; max-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0; position: absolute; transition-duration: .2s; transition-property: max-height, box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); visibility: hidden; width: 100%; z-index: 100 } .theme__suggestions___igtYq:not(.theme__up___D1zGX) { margin-top: -20px; } .theme__suggestions___igtYq.theme__up___D1zGX { bottom: 0; } .theme__suggestions___igtYq::-webkit-scrollbar { height: 0; width: 0; } .theme__suggestion___3miUV { cursor: pointer; font-size: 16px; padding: 10px } .theme__suggestion___3miUV.theme__active___1BSJE { background-color: rgb(238, 238, 238); } .theme__input___16bXh { position: relative } .theme__input___16bXh::after { border-left: 5.48571px solid transparent; border-right: 5.48571px solid transparent; border-top: 5.48571px solid rgba(0, 0, 0, 0.12); content: ''; height: 0; pointer-events: none; position: absolute; right: 8px; top: 50%; transition: -webkit-transform .2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform .2s cubic-bezier(0.4, 0, 0.2, 1); width: 0; } .theme__card___6EnAl { background: rgb(255, 255, 255); border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 14px; overflow: hidden; width: 100%; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__card___6EnAl *, .theme__card___6EnAl *::after, .theme__card___6EnAl *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__card___6EnAl.theme__raised___IFmn7 { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2); } .theme__cardMedia___kZlYV { background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative } .theme__cardMedia___kZlYV.theme__wide___3OSFM, .theme__cardMedia___kZlYV.theme__square___dNgKv { width: 100%; } .theme__cardMedia___kZlYV.theme__wide___3OSFM .theme__content___113bS, .theme__cardMedia___kZlYV.theme__square___dNgKv .theme__content___113bS { height: 100%; position: absolute; } .theme__cardMedia___kZlYV.theme__wide___3OSFM .theme__content___113bS > iframe, .theme__cardMedia___kZlYV.theme__wide___3OSFM .theme__content___113bS > video, .theme__cardMedia___kZlYV.theme__wide___3OSFM .theme__content___113bS > img, .theme__cardMedia___kZlYV.theme__square___dNgKv .theme__content___113bS > iframe, .theme__cardMedia___kZlYV.theme__square___dNgKv .theme__content___113bS > video, .theme__cardMedia___kZlYV.theme__square___dNgKv .theme__content___113bS > img { max-width: 100%; } .theme__cardMedia___kZlYV::after { content: ''; display: block; height: 0; } .theme__cardMedia___kZlYV.theme__wide___3OSFM::after { padding-top: 56.25%; } .theme__cardMedia___kZlYV.theme__square___dNgKv::after { padding-top: 100%; } .theme__cardMedia___kZlYV .theme__content___113bS { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; left: 0; overflow: hidden; position: relative; top: 0; width: 100%; } .theme__cardMedia___kZlYV .theme__contentOverlay___1xbtP .theme__cardTitle___2SXn1, .theme__cardMedia___kZlYV .theme__contentOverlay___1xbtP .theme__cardActions___3S4E5, .theme__cardMedia___kZlYV .theme__contentOverlay___1xbtP .theme__cardText___2RBJ7 { background-color: rgba(0, 0, 0, 0.35); } .theme__cardMedia___kZlYV .theme__cardTitle___2SXn1 .theme__title___3M5Fa, .theme__cardMedia___kZlYV .theme__cardTitle___2SXn1 .theme__subtitle___3iUY5 { color: rgb(255, 255, 255); } .theme__cardTitle___2SXn1 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex } .theme__cardTitle___2SXn1 [data-react-toolbox='avatar'] { margin-right: 13px; } .theme__cardTitle___2SXn1 .theme__title___3M5Fa { font-size: 20px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; margin: 0; padding: 0; } .theme__cardTitle___2SXn1 .theme__subtitle___3iUY5 { color: rgb(117, 117, 117); font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 24px; margin: 0; padding: 0; } .theme__cardTitle___2SXn1.theme__large___2s4vS { padding: 20px 16px 14px; } .theme__cardTitle___2SXn1.theme__large___2s4vS .theme__title___3M5Fa { font-size: 24px; -moz-osx-font-smoothing: grayscale; font-weight: 400; line-height: 1.25; } .theme__cardTitle___2SXn1.theme__small___3HIHy { padding: 16px; } .theme__cardTitle___2SXn1.theme__small___3HIHy .theme__title___3M5Fa { font-size: 22.4px; font-size: 1.4rem; letter-spacing: 0; line-height: 1.4; } .theme__cardTitle___2SXn1.theme__small___3HIHy .theme__subtitle___3iUY5 { font-weight: 500; line-height: 1.4; } .theme__cardTitle___2SXn1, .theme__cardText___2RBJ7 { padding: 14px 16px } .theme__cardTitle___2SXn1 p, .theme__cardText___2RBJ7 p { font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 24px; margin: 0; } .theme__cardTitle___2SXn1:last-child, .theme__cardText___2RBJ7:last-child { padding-bottom: 20px; } .theme__cardTitle___2SXn1 + .theme__cardText___2RBJ7, .theme__cardText___2RBJ7 + .theme__cardText___2RBJ7 { padding-top: 0; } .theme__cardActions___3S4E5 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 8px } .theme__cardActions___3S4E5 [data-react-toolbox='button'] { margin: 0 4px; min-width: 0; padding: 0 8px; } .theme__cardActions___3S4E5 [data-react-toolbox='button']:first-child { margin-left: 0; } .theme__cardActions___3S4E5 [data-react-toolbox='button']:last-child { margin-right: 0; } .theme__field___gpXcx { display: block; height: 18px; margin-bottom: 15px; position: relative; white-space: nowrap; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__field___gpXcx *, .theme__field___gpXcx *::after, .theme__field___gpXcx *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__field___gpXcx .theme__ripple___2k0uG { background-color: #217ded; opacity: 0.3; transition-duration: 650ms; } .theme__text___29G8Z { color: rgb(0, 0, 0); display: inline-block; font-size: 14px; line-height: 18px; padding-left: 10px; vertical-align: top; white-space: nowrap; } .theme__input___Buk6r { height: 0; opacity: 0; overflow: hidden; position: absolute; width: 0 } .theme__input___Buk6r:focus ~ .theme__check___3HPK2::before { background-color: rgba(0, 0, 0, 0.01); border-radius: 50%; content: ''; height: 41.4px; left: 50%; margin-left: -20.7px; margin-top: -20.7px; pointer-events: none; position: absolute; top: 50%; width: 41.4px; } .theme__input___Buk6r:focus ~ .theme__check___3HPK2.theme__checked___h0Tag::before { background-color: rgba(33, 125, 237, 0.26); } .theme__check___3HPK2 { border-color: rgb(0, 0, 0); border-radius: 2px; border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; height: 18px; position: relative; transition-duration: 0.2s; transition-property: background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); vertical-align: top; width: 18px; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__check___3HPK2 *, .theme__check___3HPK2 *::after, .theme__check___3HPK2 *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__check___3HPK2.theme__checked___h0Tag { background-color: #217ded; border-color: #217ded; } .theme__check___3HPK2.theme__checked___h0Tag::after { -webkit-animation: theme__checkmark-expand___wpCZI 140ms ease-out forwards; animation: theme__checkmark-expand___wpCZI 140ms ease-out forwards; border-bottom-width: 2px; border-color: rgb(255, 255, 255); border-left: 0; border-right-width: 2px; border-style: solid; border-top: 0; content: ''; height: 12px; left: 4px; position: absolute; top: -1px; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 7px; } .theme__disabled___3vARt > .theme__text___29G8Z { color: rgba(0, 0, 0, 0.26); } .theme__disabled___3vARt > .theme__check___3HPK2 { border-color: rgba(0, 0, 0, 0.26); cursor: auto; } .theme__disabled___3vARt > .theme__check___3HPK2.theme__checked___h0Tag { background-color: rgba(0, 0, 0, 0.26); border-color: transparent; cursor: auto; } @-webkit-keyframes theme__checkmark-expand___wpCZI { 0% { height: 0; left: 6px; top: 9px; width: 0; } 100% { height: 12px; left: 4px; top: -1px; width: 7px; } } @keyframes theme__checkmark-expand___wpCZI { 0% { height: 0; left: 6px; top: 9px; width: 0; } 100% { height: 12px; left: 4px; top: -1px; width: 7px; } } .theme__overlay___2MM0Z { background-color: rgb(0, 0, 0); bottom: 0; height: 100vh; left: 0; opacity: 0; pointer-events: none; position: fixed; top: 0; transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1); width: 100vw } .theme__overlay___2MM0Z.theme__active___3DMEA { opacity: 0.6; pointer-events: all; } /* Orientation */ /* Devices (defined by max width) */ /* Devices (defined by min-width) */ .theme__wrapper___suW87 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; top: 0; width: 100vw; z-index: 200; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } .theme__wrapper___suW87 *, .theme__wrapper___suW87 *::after, .theme__wrapper___suW87 *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__dialog___3puIJ { background-color: rgb(255, 255, 255); border-radius: 2px; box-shadow: 0 19px 60px rgba(0, 0, 0, .3), 0 15px 20px rgba(0, 0, 0, .22); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-height: 96vh; max-width: 96vw; opacity: 0; overflow: none; -webkit-transform: translateY(-40px); transform: translateY(-40px); transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform .2s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1), transform .2s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1), transform .2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform .2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0 } .theme__dialog___3puIJ.theme__active___3mnVD { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } .theme__small___pi_Ci { width: 30vw; } @media screen and (max-width: 720px) { .theme__small___pi_Ci { width: 50vw; } } @media screen and (max-width: 600px) { .theme__small___pi_Ci { width: 75vw; } } .theme__normal___1jZ01 { width: 50vw; } @media screen and (max-width: 600px) { .theme__normal___1jZ01 { width: 96vw; } } .theme__large___33Zgy { width: 96vw; } .theme__fullscreen___1v7Fd { width: 96vw; } @media screen and (max-width: 600px) { .theme__fullscreen___1v7Fd { border-radius: 0; max-height: 100vh; max-width: 100vw; min-height: 100vh; width: 100vw; } } .theme__title___16gSG { color: rgb(0, 0, 0); -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; font-size: 20px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; margin: 0 0 16px; } .theme__body___UijhG { color: rgb(117, 117, 117); -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; padding: 24px } .theme__body___UijhG p { font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 24px; margin: 0; } .theme__navigation___2GSgB { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; padding: 8px; text-align: right; } .theme__button___Npzlt { margin-left: 8px; min-width: 0; padding-left: 8px; padding-right: 8px; } .theme__input___1kLJo:not(.theme__disabled___3TXAG) > .theme__inputElement___2AXiG { cursor: pointer; } .theme__header___Qolsg { background-color: #217ded; color: rgb(255, 255, 255); cursor: pointer; padding: 16px 20px; } .theme__year___2gfP9 { display: inline-block; font-size: 14px; transition: opacity, font-size .2s cubic-bezier(0.4, 0, 0.2, 1); } .theme__date___2PipW { display: block; font-size: 34px; font-weight: 400; font-weight: 500; line-height: 40px; margin: 0; text-transform: capitalize; transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1); } .theme__calendarWrapper___Mkiyo { padding: 10px 5px 0; } .theme__yearsDisplay___VACmd .theme__date___2PipW { opacity: 0.6; } .theme__yearsDisplay___VACmd .theme__year___2gfP9 { font-size: 16px; } .theme__monthsDisplay___3AwP9 .theme__year___2gfP9 { opacity: 0.6; } .theme__dialog___2mGWR { width: 330px } .theme__dialog___2mGWR > [role='body'] { padding: 0; } .theme__dialog___2mGWR > [role='navigation'] > .theme__button___GqUrY { color: #217ded; } .theme__dialog___2mGWR > [role='navigation'] > .theme__button___GqUrY:hover { background: rgba(33, 125, 237, 0.2); } .theme__dialog___2mGWR > [role='navigation'] > .theme__button___GqUrY:focus:not(:active) { background: rgba(33, 125, 237, 0.2); } .theme__calendar___1_ncZ { background: rgb(255, 255, 255); font-size: 14px; height: 312px; line-height: 36px; overflow: hidden; position: relative; text-align: center } .theme__calendar___1_ncZ .theme__prev___2VrHN, .theme__calendar___1_ncZ .theme__next___1eGxF { cursor: pointer; height: 36px; opacity: 0.7; position: absolute; top: 0; z-index: 100; } .theme__calendar___1_ncZ .theme__prev___2VrHN > span, .theme__calendar___1_ncZ .theme__next___1eGxF > span { vertical-align: top; } .theme__calendar___1_ncZ .theme__prev___2VrHN { left: 0; } .theme__calendar___1_ncZ .theme__next___1eGxF { right: 0; } .theme__title___3tjS2 { display: inline-block; font-weight: 500; line-height: 36px; } .theme__years___2VaCb { font-size: 18px; height: 100%; list-style: none; margin: 0; overflow-y: auto; padding: 0 } .theme__years___2VaCb > li { cursor: pointer; line-height: 2.4; } .theme__years___2VaCb > li.theme__active___1k2TZ { color: #217ded; font-size: 2.4; font-weight: 500; } .theme__week___13vbW { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 13px; height: 36px; line-height: 36px; opacity: 0.5 } .theme__week___13vbW > span { -webkit-box-flex: 0; -ms-flex: 0 0 14.28571%; flex: 0 0 14.28571%; } .theme__days___2sopZ { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 13px; } .theme__day___3ocvo { -webkit-box-flex: 0; -ms-flex: 0 0 14.28571%; flex: 0 0 14.28571%; padding: 2px 0 } .theme__day___3ocvo > span { border-radius: 50%; display: inline-block; height: 36px; line-height: 36px; width: 36px; } .theme__day___3ocvo:hover:not(.theme__active___1k2TZ):not(.theme__disabled___3TXAG) > span { background: rgba(33, 125, 237, 0.21); color: rgb(255, 255, 255); } .theme__day___3ocvo.theme__active___1k2TZ > span { background: #217ded; color: rgb(255, 255, 255); } .theme__day___3ocvo:hover:not(.theme__disabled___3TXAG) > span { cursor: pointer; } .theme__day___3ocvo.theme__disabled___3TXAG { opacity: 0.25; } .theme__month___lKbqT { background-color: rgb(255, 255, 255); } .theme__slideRightEnter___PhAlZ, .theme__slideRightLeave___2Rll7 { position: absolute; } .theme__slideRightEnterActive___3rsms, .theme__slideRightLeaveActive___K8cDY { transition-duration: 350ms; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; transition-timing-function: ease-in-out; } .theme__slideRightEnter___PhAlZ { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%) } .theme__slideRightEnter___PhAlZ.theme__slideRightEnterActive___3rsms { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .theme__slideRightLeave___2Rll7 { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } .theme__slideRightLeave___2Rll7.theme__slideRightLeaveActive___K8cDY { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .theme__slideLeftEnter___2MunJ, .theme__slideLeftLeave___3zZE- { position: absolute; transition-duration: 0.35s; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; transition-timing-function: ease-in-out; } .theme__slideLeftEnter___2MunJ { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } .theme__slideLeftEnter___2MunJ.theme__slideLeftEnterActive___26Rq7 { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .theme__slideLeftLeave___3zZE- { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .theme__slideLeftLeave___3zZE-.theme__slideLeftLeaveActive___TP6k9 { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } /* Orientation */ /* Devices (defined by max width) */ /* Devices (defined by min-width) */ .theme__wrapper___1aluO { position: relative; z-index: 200; } .theme__drawer___35Rfz { background-color: rgb(250, 250, 250); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); color: rgb(66, 66, 66); display: block; height: 100vh; overflow-x: hidden; overflow-y: auto; pointer-events: none; position: fixed; top: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: -webkit-transform .2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform .2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0s; width: 280px; will-change: transform; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__drawer___35Rfz *, .theme__drawer___35Rfz *::after, .theme__drawer___35Rfz *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__drawer___35Rfz.theme__active___2271D { pointer-events: all; -webkit-transform: translateX(0); transform: translateX(0); transition-delay: 0; } .theme__drawer___35Rfz.theme__right___2P6Jv { border-left: 1px solid rgb(224, 224, 224); right: 0; } .theme__drawer___35Rfz.theme__right___2P6Jv:not(.theme__active___2271D) { -webkit-transform: translateX(100%); transform: translateX(100%); } .theme__drawer___35Rfz.theme__left___1rsjb { border-right: 1px solid rgb(224, 224, 224); left: 0; } .theme__drawer___35Rfz.theme__left___1rsjb:not(.theme__active___2271D) { -webkit-transform: translateX(-100%); transform: translateX(-100%); } @media screen and (min-width: 600px) { .theme__drawer___35Rfz { width: 256px; } } .theme__dropdown___34SYF { position: relative; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__dropdown___34SYF *, .theme__dropdown___34SYF *::after, .theme__dropdown___34SYF *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__dropdown___34SYF:not(.theme__active___i5aPX) > .theme__values___2FXFA { max-height: 0; visibility: hidden; } .theme__dropdown___34SYF.theme__active___i5aPX > .theme__label___1Pa_p, .theme__dropdown___34SYF.theme__active___i5aPX > .theme__value___33blB { opacity: 0.5; } .theme__dropdown___34SYF.theme__active___i5aPX > .theme__values___2FXFA { box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 4px rgba(0, 0, 0, .24); max-height: 45vh; visibility: visible; } .theme__dropdown___34SYF:not(.theme__up___3k3oL) > .theme__values___2FXFA { bottom: auto; top: 0; } .theme__dropdown___34SYF.theme__up___3k3oL > .theme__values___2FXFA { bottom: 0; top: auto; } .theme__dropdown___34SYF.theme__disabled___1ZezJ { cursor: normal; pointer-events: none; } .theme__value___33blB > input { cursor: pointer; } .theme__value___33blB::after { border-left: 5.48571px solid transparent; border-right: 5.48571px solid transparent; border-top: 5.48571px solid rgba(0, 0, 0, 0.12); content: ''; height: 0; pointer-events: none; position: absolute; right: 8px; top: 50%; transition: -webkit-transform .2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform .2s cubic-bezier(0.4, 0, 0.2, 1); width: 0; } .theme__field___1HrGX { cursor: pointer; padding: 20px 0; position: relative } .theme__field___1HrGX.theme__errored___5E08w { padding-bottom: 0; } .theme__field___1HrGX.theme__errored___5E08w > .theme__label___1Pa_p { color: rgb(222, 50, 38); } .theme__field___1HrGX.theme__errored___5E08w > .theme__templateValue___1ZxWg { border-bottom: 1px solid rgb(222, 50, 38); } .theme__field___1HrGX.theme__errored___5E08w > .theme__label___1Pa_p > .theme__required___B8wy0 { color: rgb(222, 50, 38); } .theme__field___1HrGX.theme__disabled___1ZezJ { cursor: normal; pointer-events: none; } .theme__field___1HrGX.theme__disabled___1ZezJ > .theme__templateValue___1ZxWg { border-bottom-style: dotted; opacity: 0.7; } .theme__templateValue___1ZxWg { background-color: transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.12); color: rgb(33, 33, 33); min-height: 38.4px; padding: 8px 0; position: relative; } .theme__label___1Pa_p { color: rgba(0, 0, 0, .4); font-size: 12px; left: 0; line-height: 16px; position: absolute; top: 6px } .theme__label___1Pa_p .theme__required___B8wy0 { color: rgb(222, 50, 38); } .theme__error___3fLrE { color: rgb(222, 50, 38); font-size: 12px; line-height: 20px; margin-bottom: -20px; } .theme__values___2FXFA { background-color: rgb(255, 255, 255); border-radius: 2px; list-style: none; margin: 0; overflow-y: auto; padding: 0; position: absolute; transition-duration: .2s; transition-property: max-height, box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); width: 100%; z-index: 100 } .theme__values___2FXFA > * { cursor: pointer; overflow: hidden; padding: 10px; position: relative; } .theme__values___2FXFA > *:hover:not(.theme__disabled___1ZezJ) { background-color: rgb(238, 238, 238); } .theme__values___2FXFA > *.theme__selected___3MXJq { color: #217ded; } .theme__values___2FXFA > *.theme__disabled___1ZezJ { color: rgba(0, 0, 0, 0.26); cursor: not-allowed; } .theme__values___2FXFA::-webkit-scrollbar { height: 0; width: 0; } /* Orientation */ /* Devices (defined by max width) */ /* Devices (defined by min-width) */ .theme__layout___2fTqx { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 100vh; min-width: 100%; position: relative; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } .theme__layout___2fTqx *, .theme__layout___2fTqx *::after, .theme__layout___2fTqx *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__panel___3G6id { left: 0; position: absolute; right: 0; top: 0 } .theme__panel___3G6id:not(.theme__bodyScroll___3rsrV) { height: 100vh; max-height: 100vh; overflow-y: scroll; } .theme__sidebarDrawer___ZSuP6, .theme__navDrawerDrawer___1FjGc { z-index: 100 } .theme__sidebarDrawer___ZSuP6.theme__pinned___1dlfm, .theme__navDrawerDrawer___1FjGc.theme__pinned___1dlfm { box-shadow: none; } .theme__sidebarDrawer___ZSuP6.theme__clipped___2cgdC, .theme__navDrawerDrawer___1FjGc.theme__clipped___2cgdC { height: calc(100vh - 64px); padding-top: 5px; top: 64px; } @media screen and (max-width: 480px) and (orientation: portrait) { .theme__sidebarDrawer___ZSuP6.theme__clipped___2cgdC, .theme__navDrawerDrawer___1FjGc.theme__clipped___2cgdC { height: calc(100vh - 56px); top: 56px; } } @media screen and (max-width: 600px) and (orientation: landscape) { .theme__sidebarDrawer___ZSuP6.theme__clipped___2cgdC, .theme__navDrawerDrawer___1FjGc.theme__clipped___2cgdC { height: calc(100vh - 48px); top: 48px; } } .theme__appbarInner___2Kmzj, .theme__panel___3G6id { transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); } .theme__appbarFixed___1hfLr.theme__appbarAppBar___3G6pv { z-index: 100; } .theme__appbarFixed___1hfLr .theme__panel___3G6id { top: 64px; } .theme__appbarFixed___1hfLr .theme__panel___3G6id:not(.theme__bodyScroll___3rsrV) { height: calc(100vh - 64px); max-height: calc(100vh - 64px); overflow-y: scroll; } @media screen and (max-width: 480px) and (orientation: portrait) { .theme__appbarFixed___1hfLr .theme__panel___3G6id { top: 56px; } } @media screen and (max-width: 600px) and (orientation: landscape) { .theme__appbarFixed___1hfLr .theme__panel___3G6id { top: 48px; } } .theme__navDrawerPinned___28xqH .theme__appbarLeftIcon___1_hta { display: none; } .theme__navDrawerPinned___28xqH .theme__panel___3G6id { left: 280px; } .theme__navDrawerPinned___28xqH:not(.theme__navDrawerClipped___2CIXk) .theme__appbarAppBar___3G6pv { padding-left: 304px; } @media screen and (min-width: 600px) { .theme__navDrawerPinned___28xqH .theme__panel___3G6id { left: 256px; } .theme__navDrawerPinned___28xqH:not(.theme__navDrawerClipped___2CIXk) .theme__appbarAppBar___3G6pv { padding-left: 280px; } } .theme__navDrawerClipped___2CIXk .theme__navDrawerWrapper___3ZoOV { position: relative; z-index: 1; } .theme__sidebarPinned___1vlMN .theme__appbarLeftIcon___1_hta { display: none; } .theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 280px; } .theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 304px; } @media screen and (min-width: 600px) { .theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 256px; } .theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 280px; } } .theme__sidebarClipped___3H20F .theme__sidebarWrapper___2xfYy { position: relative; z-index: 1; } .theme__sidebarWidth1___33huj .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 840px) { .theme__sidebarWidth1___33huj .theme__sidebarDrawer___ZSuP6 { width: 64px; } .theme__sidebarWidth1___33huj.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 64px; } .theme__sidebarWidth1___33huj.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 88px; } } .theme__sidebarWidth2___16bWJ .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 840px) { .theme__sidebarWidth2___16bWJ .theme__sidebarDrawer___ZSuP6 { width: 128px; } .theme__sidebarWidth2___16bWJ.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 128px; } .theme__sidebarWidth2___16bWJ.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 152px; } } .theme__sidebarWidth3___2GasQ .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 840px) { .theme__sidebarWidth3___2GasQ .theme__sidebarDrawer___ZSuP6 { width: 192px; } .theme__sidebarWidth3___2GasQ.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 192px; } .theme__sidebarWidth3___2GasQ.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 216px; } } .theme__sidebarWidth4___UShH6 .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 840px) { .theme__sidebarWidth4___UShH6 .theme__sidebarDrawer___ZSuP6 { width: 256px; } .theme__sidebarWidth4___UShH6.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 256px; } .theme__sidebarWidth4___UShH6.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 280px; } } .theme__sidebarWidth5___1trvd .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 840px) { .theme__sidebarWidth5___1trvd .theme__sidebarDrawer___ZSuP6 { width: 320px; } .theme__sidebarWidth5___1trvd.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 320px; } .theme__sidebarWidth5___1trvd.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 344px; } } .theme__sidebarWidth6___253AU .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 840px) { .theme__sidebarWidth6___253AU .theme__sidebarDrawer___ZSuP6 { width: 384px; } .theme__sidebarWidth6___253AU.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 384px; } .theme__sidebarWidth6___253AU.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 408px; } } .theme__sidebarWidth7___2BMb8 .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 840px) { .theme__sidebarWidth7___2BMb8 .theme__sidebarDrawer___ZSuP6 { width: 448px; } .theme__sidebarWidth7___2BMb8.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 448px; } .theme__sidebarWidth7___2BMb8.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 472px; } } .theme__sidebarWidth8___1E4Mr .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 840px) { .theme__sidebarWidth8___1E4Mr .theme__sidebarDrawer___ZSuP6 { width: 512px; } .theme__sidebarWidth8___1E4Mr.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 512px; } .theme__sidebarWidth8___1E4Mr.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 536px; } } .theme__sidebarWidth9___1qSPE .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 840px) { .theme__sidebarWidth9___1qSPE .theme__sidebarDrawer___ZSuP6 { width: 576px; } .theme__sidebarWidth9___1qSPE.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 576px; } .theme__sidebarWidth9___1qSPE.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 600px; } } .theme__sidebarWidth10___3Cuip .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 840px) { .theme__sidebarWidth10___3Cuip .theme__sidebarDrawer___ZSuP6 { width: 640px; } .theme__sidebarWidth10___3Cuip.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 640px; } .theme__sidebarWidth10___3Cuip.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 664px; } } .theme__sidebarWidth11___4d6Oc .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 840px) { .theme__sidebarWidth11___4d6Oc .theme__sidebarDrawer___ZSuP6 { width: 704px; } .theme__sidebarWidth11___4d6Oc.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 704px; } .theme__sidebarWidth11___4d6Oc.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 728px; } } .theme__sidebarWidth12___2Od_K .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 840px) { .theme__sidebarWidth12___2Od_K .theme__sidebarDrawer___ZSuP6 { width: 768px; } .theme__sidebarWidth12___2Od_K.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 768px; } .theme__sidebarWidth12___2Od_K.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 792px; } } @media screen and (min-width: 600px) and (orientation: landscape) { .theme__sidebarWidth1___33huj .theme__sidebarDrawer___ZSuP6 { width: 56px; } .theme__sidebarWidth1___33huj.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 56px; } .theme__sidebarWidth1___33huj.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 80px; } } @media screen and (min-width: 600px) and (orientation: portrait) { .theme__sidebarWidth1___33huj .theme__sidebarDrawer___ZSuP6 { width: 64px; } .theme__sidebarWidth1___33huj.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 64px; } .theme__sidebarWidth1___33huj.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 88px; } } @media screen and (min-width: 600px) and (orientation: landscape) { .theme__sidebarWidth2___16bWJ .theme__sidebarDrawer___ZSuP6 { width: 112px; } .theme__sidebarWidth2___16bWJ.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 112px; } .theme__sidebarWidth2___16bWJ.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 136px; } } @media screen and (min-width: 600px) and (orientation: portrait) { .theme__sidebarWidth2___16bWJ .theme__sidebarDrawer___ZSuP6 { width: 128px; } .theme__sidebarWidth2___16bWJ.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 128px; } .theme__sidebarWidth2___16bWJ.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 152px; } } @media screen and (min-width: 600px) and (orientation: landscape) { .theme__sidebarWidth3___2GasQ .theme__sidebarDrawer___ZSuP6 { width: 168px; } .theme__sidebarWidth3___2GasQ.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 168px; } .theme__sidebarWidth3___2GasQ.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 192px; } } @media screen and (min-width: 600px) and (orientation: portrait) { .theme__sidebarWidth3___2GasQ .theme__sidebarDrawer___ZSuP6 { width: 192px; } .theme__sidebarWidth3___2GasQ.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 192px; } .theme__sidebarWidth3___2GasQ.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 216px; } } @media screen and (min-width: 600px) and (orientation: landscape) { .theme__sidebarWidth4___UShH6 .theme__sidebarDrawer___ZSuP6 { width: 224px; } .theme__sidebarWidth4___UShH6.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 224px; } .theme__sidebarWidth4___UShH6.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 248px; } } @media screen and (min-width: 600px) and (orientation: portrait) { .theme__sidebarWidth4___UShH6 .theme__sidebarDrawer___ZSuP6 { width: 256px; } .theme__sidebarWidth4___UShH6.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 256px; } .theme__sidebarWidth4___UShH6.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 280px; } } @media screen and (min-width: 600px) and (orientation: landscape) { .theme__sidebarWidth5___1trvd .theme__sidebarDrawer___ZSuP6 { width: 280px; } .theme__sidebarWidth5___1trvd.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 280px; } .theme__sidebarWidth5___1trvd.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 304px; } } @media screen and (min-width: 600px) and (orientation: portrait) { .theme__sidebarWidth5___1trvd .theme__sidebarDrawer___ZSuP6 { width: 320px; } .theme__sidebarWidth5___1trvd.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 320px; } .theme__sidebarWidth5___1trvd.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 344px; } } @media screen and (min-width: 600px) and (orientation: landscape) { .theme__sidebarWidth6___253AU .theme__sidebarDrawer___ZSuP6 { width: 336px; } .theme__sidebarWidth6___253AU.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 336px; } .theme__sidebarWidth6___253AU.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 360px; } } @media screen and (min-width: 600px) and (orientation: portrait) { .theme__sidebarWidth6___253AU .theme__sidebarDrawer___ZSuP6 { width: 384px; } .theme__sidebarWidth6___253AU.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 384px; } .theme__sidebarWidth6___253AU.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 408px; } } @media screen and (min-width: 600px) and (orientation: landscape) { .theme__sidebarWidth7___2BMb8 .theme__sidebarDrawer___ZSuP6 { width: 392px; } .theme__sidebarWidth7___2BMb8.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 392px; } .theme__sidebarWidth7___2BMb8.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 416px; } } @media screen and (min-width: 600px) and (orientation: portrait) { .theme__sidebarWidth7___2BMb8 .theme__sidebarDrawer___ZSuP6 { width: 448px; } .theme__sidebarWidth7___2BMb8.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 448px; } .theme__sidebarWidth7___2BMb8.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 472px; } } @media screen and (min-width: 600px) and (orientation: landscape) { .theme__sidebarWidth8___1E4Mr .theme__sidebarDrawer___ZSuP6 { width: 448px; } .theme__sidebarWidth8___1E4Mr.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 448px; } .theme__sidebarWidth8___1E4Mr.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 472px; } } @media screen and (min-width: 600px) and (orientation: portrait) { .theme__sidebarWidth8___1E4Mr .theme__sidebarDrawer___ZSuP6 { width: 512px; } .theme__sidebarWidth8___1E4Mr.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 512px; } .theme__sidebarWidth8___1E4Mr.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 536px; } } @media screen and (min-width: 600px) and (orientation: landscape) { .theme__sidebarWidth9___1qSPE .theme__sidebarDrawer___ZSuP6 { width: 504px; } .theme__sidebarWidth9___1qSPE.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 504px; } .theme__sidebarWidth9___1qSPE.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 528px; } } @media screen and (min-width: 600px) and (orientation: portrait) { .theme__sidebarWidth9___1qSPE .theme__sidebarDrawer___ZSuP6 { width: 576px; } .theme__sidebarWidth9___1qSPE.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 576px; } .theme__sidebarWidth9___1qSPE.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 600px; } } @media screen and (min-width: 720px) { .theme__sidebarWidth1___33huj .theme__sidebarDrawer___ZSuP6 { width: 64px; } .theme__sidebarWidth1___33huj.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 64px; } .theme__sidebarWidth1___33huj.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 88px; } } @media screen and (min-width: 720px) { .theme__sidebarWidth2___16bWJ .theme__sidebarDrawer___ZSuP6 { width: 128px; } .theme__sidebarWidth2___16bWJ.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 128px; } .theme__sidebarWidth2___16bWJ.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 152px; } } @media screen and (min-width: 720px) { .theme__sidebarWidth3___2GasQ .theme__sidebarDrawer___ZSuP6 { width: 192px; } .theme__sidebarWidth3___2GasQ.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 192px; } .theme__sidebarWidth3___2GasQ.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 216px; } } @media screen and (min-width: 720px) { .theme__sidebarWidth4___UShH6 .theme__sidebarDrawer___ZSuP6 { width: 256px; } .theme__sidebarWidth4___UShH6.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 256px; } .theme__sidebarWidth4___UShH6.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 280px; } } @media screen and (min-width: 720px) { .theme__sidebarWidth5___1trvd .theme__sidebarDrawer___ZSuP6 { width: 320px; } .theme__sidebarWidth5___1trvd.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 320px; } .theme__sidebarWidth5___1trvd.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 344px; } } @media screen and (min-width: 720px) { .theme__sidebarWidth6___253AU .theme__sidebarDrawer___ZSuP6 { width: 384px; } .theme__sidebarWidth6___253AU.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 384px; } .theme__sidebarWidth6___253AU.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 408px; } } @media screen and (min-width: 720px) { .theme__sidebarWidth7___2BMb8 .theme__sidebarDrawer___ZSuP6 { width: 448px; } .theme__sidebarWidth7___2BMb8.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 448px; } .theme__sidebarWidth7___2BMb8.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 472px; } } @media screen and (min-width: 720px) { .theme__sidebarWidth8___1E4Mr .theme__sidebarDrawer___ZSuP6 { width: 512px; } .theme__sidebarWidth8___1E4Mr.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 512px; } .theme__sidebarWidth8___1E4Mr.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 536px; } } @media screen and (min-width: 720px) { .theme__sidebarWidth9___1qSPE .theme__sidebarDrawer___ZSuP6 { width: 576px; } .theme__sidebarWidth9___1qSPE.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 576px; } .theme__sidebarWidth9___1qSPE.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 600px; } } @media screen and (min-width: 720px) { .theme__sidebarWidth10___3Cuip .theme__sidebarDrawer___ZSuP6 { width: 640px; } .theme__sidebarWidth10___3Cuip.theme__sidebarPinned___1vlMN .theme__panel___3G6id { right: 640px; } .theme__sidebarWidth10___3Cuip.theme__sidebarPinned___1vlMN:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: 664px; } } .theme__sidebarWidth25___flowk .theme__sidebarDrawer___ZSuP6 { width: 100%; } .theme__sidebarWidth33___3cP_y .theme__sidebarDrawer___ZSuP6 { width: 100%; } .theme__sidebarWidth50___2pdsH .theme__sidebarDrawer___ZSuP6 { width: 100%; } .theme__sidebarWidth66___Owrh3 .theme__sidebarDrawer___ZSuP6 { width: 100%; } .theme__sidebarWidth75___3RgCk .theme__sidebarDrawer___ZSuP6 { width: 100%; } .theme__sidebarWidth100___36yeb .theme__sidebarDrawer___ZSuP6 { width: 100%; } @media screen and (min-width: 720px) { .theme__sidebarWidth25___flowk .theme__panel___3G6id { right: 25%; } .theme__sidebarWidth25___flowk .theme__sidebarDrawer___ZSuP6 { width: 25%; } .theme__sidebarWidth25___flowk:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: calc(25% + 24px); } .theme__sidebarWidth33___3cP_y .theme__panel___3G6id { right: 33%; } .theme__sidebarWidth33___3cP_y .theme__sidebarDrawer___ZSuP6 { width: 33%; } .theme__sidebarWidth33___3cP_y:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: calc(33% + 24px); } .theme__sidebarWidth50___2pdsH .theme__panel___3G6id { right: 50%; } .theme__sidebarWidth50___2pdsH .theme__sidebarDrawer___ZSuP6 { width: 50%; } .theme__sidebarWidth50___2pdsH:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: calc(50% + 24px); } .theme__sidebarWidth66___Owrh3 .theme__panel___3G6id { right: 66%; } .theme__sidebarWidth66___Owrh3 .theme__sidebarDrawer___ZSuP6 { width: 66%; } .theme__sidebarWidth66___Owrh3:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: calc(66% + 24px); } .theme__sidebarWidth75___3RgCk .theme__panel___3G6id { right: 75%; } .theme__sidebarWidth75___3RgCk .theme__sidebarDrawer___ZSuP6 { width: 75%; } .theme__sidebarWidth75___3RgCk:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: calc(75% + 24px); } .theme__sidebarWidth100___36yeb .theme__panel___3G6id { right: 100%; } .theme__sidebarWidth100___36yeb .theme__sidebarDrawer___ZSuP6 { width: 100%; } .theme__sidebarWidth100___36yeb:not(.theme__sidebarClipped___3H20F) .theme__appbarAppBar___3G6pv { padding-right: calc(100% + 24px); } } .theme__icon___3CmZU { font-size: 18px; margin-right: 10px; } .theme__link___3ZM-n { -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1.5; position: relative; transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1); box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__link___3ZM-n *, .theme__link___3ZM-n *::after, .theme__link___3ZM-n *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__link___3ZM-n:not(.theme__active___2V1in) { opacity: 0.5; } .theme__link___3ZM-n:hover, .theme__link___3ZM-n:active { opacity: 1; } .theme__link___3ZM-n > * { vertical-align: middle; } .theme__link___3ZM-n > abbr { text-transform: capitalize; } .theme__link___3ZM-n > small { font-size: 12px; margin-left: 8px; text-align: center; } .theme__list___8sd6T { display: inline-block; list-style: none; margin: 0; padding: 8px 0; position: relative; text-align: left; white-space: nowrap; width: 100%; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__list___8sd6T *, .theme__list___8sd6T *::after, .theme__list___8sd6T *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__list___8sd6T + .theme__divider___1jTWq { margin-top: -8px; } .theme__subheader___39ax0 { color: rgb(117, 117, 117); font-size: 14px; font-weight: 500; line-height: 48px; margin: -8px 0 0; padding-left: 16px; } .theme__divider___1jTWq { background-color: rgb(238, 238, 238); border: 0; height: 1px; margin: -1px 0 0 } .theme__divider___1jTWq.theme__inset___2I4Ey { margin-left: 72px; margin-right: 16px; } .theme__listItem___13WIA { position: relative } .theme__listItem___13WIA > [data-react-toolbox='ripple'] { overflow: hidden; } .theme__listItem___13WIA .theme__ripple___Gxlal { color: rgb(117, 117, 117); } .theme__listItem___13WIA ~ .theme__divider___1jTWq { margin-bottom: 8px; margin-top: 8px; } .theme__item___XCcPn { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: rgb(33, 33, 33); display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 48px; padding: 0 16px; position: relative } .theme__item___XCcPn.theme__selectable___ZScQK:not(.theme__disabled___19R4V):hover { background-color: rgb(238, 238, 238); cursor: pointer; } .theme__item___XCcPn.theme__disabled___19R4V { pointer-events: none; } .theme__item___XCcPn.theme__disabled___19R4V:not(.theme__checkboxItem___nWxVE) { opacity: 0.5; } .theme__item___XCcPn.theme__disabled___19R4V > .theme__checkbox___YqmZC > [data-react-toolbox='label'] { opacity: 0.5; } .theme__left___2RXD4 [data-react-toolbox='font-icon'] { width: 18px; } .theme__left___2RXD4 :last-child > [data-react-toolbox='font-icon'] { margin-right: 22px; } .theme__right___feleq > :last-child { margin-right: 0; } .theme__right___feleq > :first-child { margin-left: 16px; } .theme__left___2RXD4, .theme__right___feleq { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .theme__itemAction____wOQM { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 8px 16px 8px 0 } .theme__itemAction____wOQM > * { padding: 0; } .theme__itemAction____wOQM > [data-react-toolbox='font-icon'] { color: rgb(117, 117, 117); font-size: 24px; } .theme__itemContentRoot___c93PA { display: block; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1 } .theme__itemContentRoot___c93PA.theme__large___2vgoF { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 72px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .theme__checkbox___YqmZC { -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; margin: 0; min-height: 48px; width: 100% } .theme__checkbox___YqmZC > [data-react-toolbox='check'] { margin-right: 38px; } .theme__checkbox___YqmZC > [data-react-toolbox='label'] { padding-left: 0; } .theme__itemText___2ZFR6 { display: block } .theme__itemText___2ZFR6:not(.theme__primary___3DJ9o) { color: rgb(117, 117, 117); font-size: 14px; padding-top: 3px; white-space: normal; } .theme__itemText___2ZFR6.theme__primary___3DJ9o { color: rgb(33, 33, 33); font-size: 16px; } .theme__iconMenu___2ORGN { display: inline-block; position: relative; text-align: center; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__iconMenu___2ORGN *, .theme__iconMenu___2ORGN *::after, .theme__iconMenu___2ORGN *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__iconMenu___2ORGN .theme__icon___322jb { cursor: pointer; } .theme__menu___28fNT { display: inline-block; position: relative } .theme__menu___28fNT.theme__topLeft___eSqah { left: 0; position: absolute; top: 0; } .theme__menu___28fNT.theme__topLeft___eSqah > .theme__outline___1Xva_ { -webkit-transform-origin: 0 0; transform-origin: 0 0; } .theme__menu___28fNT.theme__topRight___WJwob { position: absolute; right: 0; top: 0; } .theme__menu___28fNT.theme__topRight___WJwob > .theme__outline___1Xva_ { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .theme__menu___28fNT.theme__bottomLeft___3XU-o { bottom: 0; left: 0; position: absolute; } .theme__menu___28fNT.theme__bottomLeft___3XU-o > .theme__outline___1Xva_ { -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .theme__menu___28fNT.theme__bottomRight___2JsQ4 { bottom: 0; position: absolute; right: 0; } .theme__menu___28fNT.theme__bottomRight___2JsQ4 > .theme__outline___1Xva_ { -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .theme__menu___28fNT:not(.theme__static___3FEqZ) { pointer-events: none; z-index: 200; } .theme__menu___28fNT:not(.theme__static___3FEqZ) > .theme__outline___1Xva_ { opacity: 0; -webkit-transform: scale(0); transform: scale(0); transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0 cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0 cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0 cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0 cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .theme__menu___28fNT:not(.theme__static___3FEqZ) > .theme__menuInner___QBpVb { left: 0; margin: 0; opacity: 0; position: absolute; top: 0; } .theme__menu___28fNT:not(.theme__static___3FEqZ).theme__rippled___354vu:not(.theme__active___393Fy) > .theme__outline___1Xva_ { transition-delay: 0.3s; } .theme__menu___28fNT:not(.theme__static___3FEqZ).theme__rippled___354vu:not(.theme__active___393Fy) > .theme__menuInner___QBpVb { transition-delay: 0.3s; } .theme__menu___28fNT:not(.theme__static___3FEqZ).theme__active___393Fy { pointer-events: all; } .theme__menu___28fNT:not(.theme__static___3FEqZ).theme__active___393Fy > .theme__outline___1Xva_ { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .theme__menu___28fNT:not(.theme__static___3FEqZ).theme__active___393Fy > .theme__menuInner___QBpVb { opacity: 1; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), clip 0 cubic-bezier(0.4, 0, 0.2, 1); } .theme__outline___1Xva_ { background-color: rgb(255, 255, 255); border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); display: block; left: 0; position: absolute; top: 0; } .theme__menuInner___QBpVb { display: block; list-style: none; padding: 8px 0; position: relative; text-align: left; white-space: nowrap; } .theme__menuItem___3FmV3 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: rgb(33, 33, 33); display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 16px; font-size: 1rem; height: 48px; height: 3rem; overflow: hidden; padding: 0 16px; position: relative } .theme__menuItem___3FmV3:not(.theme__disabled___-pf66):hover { background-color: rgb(238, 238, 238); cursor: pointer; } .theme__menuItem___3FmV3.theme__disabled___-pf66 { opacity: 0.5; pointer-events: none; } .theme__menuItem___3FmV3.theme__selected___1HPpp { background-color: transparent; font-weight: 500; } .theme__menuItem___3FmV3 .theme__ripple___1QcWI { color: rgb(117, 117, 117); } .theme__menuItem___3FmV3 .theme__icon___322jb { font-size: 32px; font-size: 2rem; width: 51.2px; width: 3.2rem; } .theme__caption___3mBhY { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: 16px; } .theme__shortcut___BuNrr { margin-left: 16px; } .theme__menuDivider___2lhZO { background-color: rgb(238, 238, 238); border: 0; display: block; height: 1px; margin: 12px 0; outline: 0; padding: 0; width: 100%; } .theme__horizontal___3kcgD > [data-react-toolbox='button'], .theme__horizontal___3kcgD > [data-react-toolbox='link'] { display: inline-block; margin: 0 5px; } .theme__vertical___crYKY > [data-react-toolbox='button'], .theme__vertical___crYKY > [data-react-toolbox='link'] { display: block; margin: 5px; } .theme__vertical___crYKY, .theme__horizontal___3kcgD { padding: 5px; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__vertical___crYKY *, .theme__vertical___crYKY *::after, .theme__vertical___crYKY *::before, .theme__horizontal___3kcgD *, .theme__horizontal___3kcgD *::after, .theme__horizontal___3kcgD *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__vertical___crYKY > [data-react-toolbox='link'], .theme__horizontal___3kcgD > [data-react-toolbox='link'] { color: rgb(0, 0, 0); } .theme__linear___2BnNh { background: rgb(238, 238, 238); display: inline-block; height: 4px; overflow: hidden; position: relative; width: 100% } .theme__linear___2BnNh.theme__indeterminate___zdRsC .theme__value___1cK9M { -webkit-animation: theme__linear-indeterminate-bar___2ZIez 1s linear infinite; animation: theme__linear-indeterminate-bar___2ZIez 1s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; } .theme__value___1cK9M, .theme__buffer___2AqZ2 { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; transition-duration: .2s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .theme__value___1cK9M { background-color: #217ded; } .theme__buffer___2AqZ2 { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to right, #217ded, #217ded); } .theme__circular___2nme2 { display: inline-block; height: 60px; position: relative; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); width: 60px } .theme__circular___2nme2.theme__indeterminate___zdRsC .theme__circle___YkswQ { -webkit-animation: theme__circular-indeterminate-bar-rotate___3KTp9 2s linear infinite; animation: theme__circular-indeterminate-bar-rotate___3KTp9 2s linear infinite; } .theme__circular___2nme2.theme__indeterminate___zdRsC .theme__path___2HjkI { -webkit-animation: theme__circular-indeterminate-bar-dash___3qYHN 1.5s ease-in-out infinite; animation: theme__circular-indeterminate-bar-dash___3qYHN 1.5s ease-in-out infinite; stroke-dasharray: 1.25, 250; stroke-dashoffset: 0; } .theme__circular___2nme2.theme__indeterminate___zdRsC.theme__multicolor___2N3nw .theme__path___2HjkI { -webkit-animation: theme__circular-indeterminate-bar-dash___3qYHN 1.5s ease-in-out infinite, theme__colors___3LuTC 6s ease-in-out infinite; animation: theme__circular-indeterminate-bar-dash___3qYHN 1.5s ease-in-out infinite, theme__colors___3LuTC 6s ease-in-out infinite; } .theme__circular___2nme2[disabled] .theme__value___1cK9M, .theme__linear___2BnNh[disabled] .theme__value___1cK9M { background-color: rgba(0, 0, 0, 0.26); } .theme__circular___2nme2[disabled] .theme__buffer___2AqZ2, .theme__linear___2BnNh[disabled] .theme__buffer___2AqZ2 { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to right, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.26)); } .theme__circle___YkswQ { height: 100%; width: 100%; } .theme__path___2HjkI { fill: none; stroke: #217ded; stroke-dasharray: 0, 250; stroke-dashoffset: 0; stroke-linecap: round; stroke-miterlimit: 20; stroke-width: 4; transition: stroke-dasharray .2s cubic-bezier(0.4, 0, 0.2, 1); } @-webkit-keyframes theme__linear-indeterminate-bar___2ZIez { 0% { -webkit-transform: translate(-50%) scaleX(0); transform: translate(-50%) scaleX(0); } 50% { -webkit-transform: translate(-0%) scaleX(0.3); transform: translate(-0%) scaleX(0.3); } 100% { -webkit-transform: translate(50%) scaleX(0); transform: translate(50%) scaleX(0); } } @keyframes theme__linear-indeterminate-bar___2ZIez { 0% { -webkit-transform: translate(-50%) scaleX(0); transform: translate(-50%) scaleX(0); } 50% { -webkit-transform: translate(-0%) scaleX(0.3); transform: translate(-0%) scaleX(0.3); } 100% { -webkit-transform: translate(50%) scaleX(0); transform: translate(50%) scaleX(0); } } @-webkit-keyframes theme__circular-indeterminate-bar-rotate___3KTp9 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes theme__circular-indeterminate-bar-rotate___3KTp9 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes theme__circular-indeterminate-bar-dash___3qYHN { 0% { stroke-dasharray: 1.25, 250; stroke-dashoffset: 0; } 50% { stroke-dasharray: 111.25, 250; stroke-dashoffset: -43.75; } 100% { stroke-dasharray: 111.25, 250; stroke-dashoffset: -155; } } @keyframes theme__circular-indeterminate-bar-dash___3qYHN { 0% { stroke-dasharray: 1.25, 250; stroke-dashoffset: 0; } 50% { stroke-dasharray: 111.25, 250; stroke-dashoffset: -43.75; } 100% { stroke-dasharray: 111.25, 250; stroke-dashoffset: -155; } } @-webkit-keyframes theme__colors___3LuTC { 0% { stroke: #4285f4; } 25% { stroke: #de3e35; } 50% { stroke: #f7c223; } 75% { stroke: #1b9a59; } 100% { stroke: #4285f4; } } @keyframes theme__colors___3LuTC { 0% { stroke: #4285f4; } 25% { stroke: #de3e35; } 50% { stroke: #f7c223; } 75% { stroke: #1b9a59; } 100% { stroke: #4285f4; } } .theme__radio___1L33S { border: 2px solid rgb(0, 0, 0); border-radius: 50%; cursor: pointer; display: inline-block; height: 20px; position: relative; vertical-align: top; width: 20px; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__radio___1L33S *, .theme__radio___1L33S *::after, .theme__radio___1L33S *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__radio___1L33S::before { background-color: #217ded; border-radius: 50%; content: ''; height: 100%; left: 0; position: absolute; top: 0; -webkit-transform: scale(0); transform: scale(0); transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); width: 100%; } .theme__radio___1L33S .theme__ripple___sjrmm { background-color: #217ded; opacity: 0.3; transition-duration: 650ms; } .theme__radioChecked___2VPyk { border: 2px solid #217ded } .theme__radioChecked___2VPyk::before { -webkit-transform: scale(0.65); transform: scale(0.65); } .theme__field___4ch6k { display: block; height: 20px; margin-bottom: 15px; position: relative; white-space: nowrap; } .theme__text___2SbUp { color: rgb(0, 0, 0); display: inline-block; font-size: 14px; line-height: 20px; padding-left: 10px; vertical-align: top; white-space: nowrap; } .theme__input___1xvhW { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; height: 0; margin: 0; opacity: 0; padding: 0; position: absolute; width: 0 } .theme__input___1xvhW:focus ~ .theme__radio___1L33S { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); } .theme__input___1xvhW:focus ~ .theme__radioChecked___2VPyk { box-shadow: 0 0 0 10px rgba(33, 125, 237, 0.26); } .theme__disabled___1Ok_V { } .theme__disabled___1Ok_V .theme__text___2SbUp { color: rgba(0, 0, 0, 0.26); } .theme__disabled___1Ok_V .theme__radio___1L33S { border-color: rgba(0, 0, 0, 0.26); cursor: auto; } .theme__disabled___1Ok_V .theme__radioChecked___2VPyk { border-color: rgba(0, 0, 0, 0.26); cursor: auto; } .theme__disabled___1Ok_V .theme__radioChecked___2VPyk::before { background-color: rgba(0, 0, 0, 0.26); } .theme__container___2Qr0q { height: 32px; margin-right: 32px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: calc(100% - 32px); box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__container___2Qr0q *, .theme__container___2Qr0q *::after, .theme__container___2Qr0q *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__container___2Qr0q:not(:last-child) { margin-right: 42px; } .theme__container___2Qr0q:not(:first-child) { margin-left: 10px; } .theme__knob___2oDng { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 32px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; position: relative; top: 0; width: 32px; z-index: 200; } .theme__innerknob___21QyT { background-color: #217ded; border-radius: 50%; height: 12px; transition-duration: 0.1s; transition-property: height, width, background-color, border; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); width: 12px; z-index: 100; } .theme__snaps___2xZ9n { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 2px; left: 0; pointer-events: none; position: absolute; top: 15px; width: calc(100% + 2px) } .theme__snaps___2xZ9n::after { background-color: rgb(0, 0, 0); border-radius: 50%; content: ''; display: block; height: 2px; width: 2px; } .theme__snap___15o78 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .theme__snap___15o78::after { background-color: rgb(0, 0, 0); border-radius: 50%; content: ''; display: block; height: 2px; width: 2px; } .theme__input___2Fqkr { margin-bottom: 0; padding: 0; width: 50px } .theme__input___2Fqkr > input { text-align: center; } .theme__progress___29852 { height: 100%; left: 16px; position: absolute; top: 0; width: 100% } .theme__progress___29852 .theme__innerprogress___gGbfO { height: 2px; position: absolute; top: 15px; } .theme__progress___29852 .theme__innerprogress___gGbfO [data-ref='value'] { transition-duration: 0s; } .theme__slider___1Q-y7:focus .theme__knob___2oDng::before { background-color: #217ded; border-radius: 50%; bottom: 0; content: ''; left: 0; opacity: 0.26; position: absolute; right: 0; top: 0; z-index: 1; } .theme__slider___1Q-y7[disabled] { cursor: auto; pointer-events: none; } .theme__slider___1Q-y7[disabled] .theme__innerknob___21QyT { background-color: rgba(177, 177, 177, 1); } .theme__slider___1Q-y7.theme__editable___2HU6g { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .theme__slider___1Q-y7.theme__pinned___3fUG8 .theme__innerknob___21QyT::before { background-color: #217ded; border-radius: 50% 50% 50% 0; content: ''; height: 26px; left: 0; margin-left: 3px; position: absolute; top: 0; -webkit-transform: rotate(-45deg) scale(0) translate(0); transform: rotate(-45deg) scale(0) translate(0); transition: background-color 0.18s ease, -webkit-transform 0.2s ease; transition: transform 0.2s ease, background-color 0.18s ease; transition: transform 0.2s ease, background-color 0.18s ease, -webkit-transform 0.2s ease; width: 26px; } .theme__slider___1Q-y7.theme__pinned___3fUG8 .theme__innerknob___21QyT::after { color: rgb(255, 255, 255); content: attr(data-value); font-size: 10px; height: 26px; left: 0; position: absolute; text-align: center; top: 0; -webkit-transform: scale(0) translate(0); transform: scale(0) translate(0); transition: background-color 0.18s ease, -webkit-transform 0.2s ease; transition: transform 0.2s ease, background-color 0.18s ease; transition: transform 0.2s ease, background-color 0.18s ease, -webkit-transform 0.2s ease; width: 32px; } .theme__slider___1Q-y7.theme__pressed___iXn9Y.theme__pinned___3fUG8 .theme__innerknob___21QyT::before { -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px); transform: rotate(-45deg) scale(1) translate(17px, -17px); transition-delay: 100ms; } .theme__slider___1Q-y7.theme__pressed___iXn9Y.theme__pinned___3fUG8 .theme__innerknob___21QyT::after { -webkit-transform: scale(1) translate(0, -17px); transform: scale(1) translate(0, -17px); transition-delay: 100ms; } .theme__slider___1Q-y7.theme__pressed___iXn9Y:not(.theme__pinned___3fUG8).theme__ring___2JYfo .theme__progress___29852 { left: 30px; width: calc(100% - 14px); } .theme__slider___1Q-y7.theme__pressed___iXn9Y:not(.theme__pinned___3fUG8) .theme__innerknob___21QyT { height: 100%; -webkit-transform: translateZ(0); transform: translateZ(0); width: 100%; } .theme__slider___1Q-y7.theme__ring___2JYfo .theme__innerknob___21QyT { background-color: transparent; border: 2px solid rgb(238, 238, 238); } .theme__slider___1Q-y7.theme__ring___2JYfo .theme__innerknob___21QyT::before { background-color: #217ded; } .theme__slider___1Q-y7.theme__ring___2JYfo .theme__progress___29852 { left: 20px; transition: left 0.18s ease, width 0.18s ease; width: calc(100% - 2px * 2); } .theme__slider___1Q-y7.theme__ring___2JYfo.theme__pinned___3fUG8 .theme__innerknob___21QyT { background-color: rgb(255, 255, 255); } .theme__slider___1Q-y7.theme__ring___2JYfo.theme__pinned___3fUG8 .theme__progress___29852 { left: 16px; width: 100%; } .theme__snackbar___1ngtT { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgb(33, 33, 33); border-radius: 2px; bottom: 0; color: rgb(255, 255, 255); display: -webkit-box; display: -ms-flexbox; display: flex; left: 24px; margin: 14px auto 0; padding: 14px 24px; position: fixed; right: 24px; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1) .2s; z-index: 200; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__snackbar___1ngtT *, .theme__snackbar___1ngtT *::after, .theme__snackbar___1ngtT *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__snackbar___1ngtT.theme__accept___23udP .theme__button___1lSAM { color: rgb(76, 175, 80); } .theme__snackbar___1ngtT.theme__warning___3ULKy .theme__button___1lSAM { color: rgb(238, 255, 65); } .theme__snackbar___1ngtT.theme__cancel___2S71F .theme__button___1lSAM { color: rgb(244, 67, 54); } .theme__snackbar___1ngtT:not(.theme__active___q1jFM) { -webkit-transform: translateY(100%); transform: translateY(100%); } .theme__snackbar___1ngtT.theme__active___q1jFM { -webkit-transform: translateY(0%); transform: translateY(0%); } .theme__label___3ldt_ { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: 14px; } .theme__button___1lSAM { margin: -7px -12px -7px 48px; min-width: inherit; } .theme__field___3fo_F { display: block; margin-bottom: 15px; position: relative; white-space: normal; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } .theme__field___3fo_F *, .theme__field___3fo_F *::after, .theme__field___3fo_F *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__text___3Fr0w { color: rgb(0, 0, 0); display: inline-block; font-size: 14px; line-height: 24px; padding-left: 10px; vertical-align: top; white-space: nowrap; } .theme__thumb___161oE { border-radius: 50%; cursor: pointer; height: 20px; position: absolute; top: -3px; transition-duration: 0.28s; transition-property: left; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); width: 20px; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__thumb___161oE *, .theme__thumb___161oE *::after, .theme__thumb___161oE *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__thumb___161oE .theme__ripple___3-S_0 { background-color: #217ded; opacity: 0.3; transition-duration: 650ms; } .theme__on___1QJsR, .theme__off___1IK-i { border-radius: 14px; cursor: pointer; display: inline-block; height: 14px; margin-top: 5px; position: relative; vertical-align: top; width: 36px; } .theme__on___1QJsR { background: rgba(33, 125, 237, 0.5) } .theme__on___1QJsR .theme__thumb___161oE { background: #217ded; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12); left: 16px; } .theme__off___1IK-i { background: rgba(0, 0, 0, 0.26) } .theme__off___1IK-i .theme__thumb___161oE { background: rgb(250, 250, 250); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); left: 0; } .theme__off___1IK-i .theme__ripple___3-S_0 { background: rgba(0, 0, 0, 0.4); } .theme__input___IIt-m { height: 0; opacity: 0; overflow: hidden; width: 0 } .theme__input___IIt-m:focus:not(:active) + .theme__switch-on___3j3qF > .theme__thumb___161oE::before, .theme__input___IIt-m:focus:not(:active) + .theme__switch-off___3wgoB > .theme__thumb___161oE::before { background-color: transparent; border-radius: 50%; box-sizing: border-box; content: ''; display: inline-block; height: 8px; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-4px, -4px); transform: translate(-4px, -4px); width: 8px; } .theme__input___IIt-m:focus:not(:active) + .theme__switch-on___3j3qF > .theme__thumb___161oE::before { background-color: rgba(33, 125, 237, 0.26); box-shadow: 0 0 0 20px rgba(33, 125, 237, 0.26); } .theme__input___IIt-m:focus:not(:active) + .theme__switch-off___3wgoB > .theme__thumb___161oE::before { background-color: rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.1); } .theme__disabled___24K7a { } .theme__disabled___24K7a .theme__text___3Fr0w { color: rgba(0, 0, 0, 0.26); } .theme__disabled___24K7a .theme__on___1QJsR, .theme__disabled___24K7a .theme__off___1IK-i { background: rgba(0, 0, 0, 0.12); cursor: auto; } .theme__disabled___24K7a .theme__thumb___161oE { background-color: rgb(189, 189, 189); border-color: transparent; cursor: auto; } .theme__table___FQ_fA { background-color: rgb(255, 255, 255); border-collapse: collapse; font-size: 13px; width: 100%; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } .theme__table___FQ_fA *, .theme__table___FQ_fA *::after, .theme__table___FQ_fA *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__head___phQ-Z { padding-bottom: 3px; white-space: nowrap; } .theme__row___ObY31 { color: rgba(0, 0, 0, 0.87); height: 48px; transition-duration: 0.28s; transition-property: background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) } .theme__row___ObY31:hover { background-color: #eee; } .theme__row___ObY31.theme__selected___UBJv6 { background-color: #f5f5f5; } .theme__rowCell___3bKsU, .theme__headCell___1U9TX { padding: 0 18px 12px 18px; text-align: left } .theme__rowCell___3bKsU:first-of-type, .theme__headCell___1U9TX:first-of-type { padding-left: 24px; } .theme__rowCell___3bKsU:last-of-type, .theme__headCell___1U9TX:last-of-type { padding-right: 24px; } .theme__rowCell___3bKsU.theme__numeric___1w6tt, .theme__headCell___1U9TX.theme__numeric___1w6tt { text-align: right; } .theme__rowCell___3bKsU { border-bottom: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; height: 48px; padding-top: 12px; vertical-align: middle } .theme__rowCell___3bKsU.theme__checkboxCell___2MRIz { width: 18px; } .theme__rowCell___3bKsU.theme__checkboxCell___2MRIz > * { margin: 0; } .theme__headCell___1U9TX { color: rgba(0, 0, 0, 0.54); font-size: 12px; font-weight: 500; height: 48px; line-height: 24px; padding-bottom: 8px; text-overflow: ellipsis; vertical-align: bottom } .theme__headCell___1U9TX.theme__checkboxCell___2MRIz { width: 18px; } .theme__headCell___1U9TX.theme__checkboxCell___2MRIz > * { margin: 0 0 3px; } .theme__headCell___1U9TX.theme__sorted___1TwTM { color: rgba(0, 0, 0, 0.87); cursor: pointer; } .theme__headCell___1U9TX.theme__sorted___1TwTM:hover .theme__sortIcon___37Bpq { color: rgba(0, 0, 0, 0.26); } .theme__sortIcon___37Bpq { display: inline-block; font-size: 16px; margin-right: 3px; transition: 0.28s -webkit-transform cubic-bezier(0.4, 0, 0.2, 1); transition: 0.28s transform cubic-bezier(0.4, 0, 0.2, 1); transition: 0.28s transform cubic-bezier(0.4, 0, 0.2, 1), 0.28s -webkit-transform cubic-bezier(0.4, 0, 0.2, 1); vertical-align: sub } .theme__sortIcon___37Bpq.theme__asc___3axCf { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .theme__tabs___IPENO { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } .theme__tabs___IPENO *, .theme__tabs___IPENO *::after, .theme__tabs___IPENO *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__navigation___2VDe5 { box-shadow: inset 0 -1px rgb(238, 238, 238); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; overflow-x: hidden; position: relative; } .theme__navigationContainer___3LEYz { display: -webkit-box; display: -ms-flexbox; display: flex } .theme__navigationContainer___3LEYz .theme__navigation___2VDe5 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .theme__arrow___24tKP { color: rgb(0, 0, 0); padding: 0 12px; } .theme__arrowContainer___3MN25 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-shadow: inset 0 -1px rgb(238, 238, 238); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; } .theme__label___190BE { color: rgba(0, 0, 0, 0.7); font-size: 14px; font-weight: 500; line-height: 1; padding: 17px 12px; position: relative; text-transform: uppercase; transition-duration: .2s; transition-property: box-shadow, color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) } .theme__label___190BE > .theme__rippleWrapper___18fS9 { overflow: hidden; } .theme__label___190BE.theme__active___3C9hh { color: rgb(0, 0, 0); } .theme__label___190BE.theme__disabled___4L37n { opacity: 0.2; } .theme__label___190BE:not(.theme__disabled___4L37n) { cursor: pointer; } .theme__label___190BE.theme__hidden___10a5M { display: none; } .theme__label___190BE.theme__withIcon___1N07X { padding-bottom: 13px; padding-top: 13px; text-align: center; } .theme__label___190BE.theme__withText___3QKQg .theme__icon___RNIBq { margin-bottom: 8px; } .theme__icon___RNIBq { display: block; height: 24px; line-height: 24px; margin: 0 auto; } .theme__pointer___2eXSc { background-color: #217ded; height: 2px; margin-top: -2px; position: absolute; transition-duration: .2s; transition-property: left, width; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); width: 0; } .theme__tab___2tMNw { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 17px 12px } .theme__tab___2tMNw:not(.theme__active___3C9hh) { display: none; } .theme__tab___2tMNw.theme__active___3C9hh { display: -webkit-box; display: -ms-flexbox; display: flex; } .theme__fixed___2fK4X .theme__label___190BE { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; } .theme__inverse___1R3sb .theme__navigation___2VDe5, .theme__inverse___1R3sb .theme__arrowContainer___3MN25 { background-color: #217ded; } .theme__inverse___1R3sb .theme__label___190BE { color: rgba(255, 255, 255, 0.3); } .theme__inverse___1R3sb .theme__label___190BE.theme__active___3C9hh { color: rgb(255, 255, 255); } .theme__inverse___1R3sb .theme__arrow___24tKP { color: rgb(255, 255, 255); } .theme__inverse___1R3sb .theme__pointer___2eXSc { background-color: rgb(255, 64, 129); } .theme__input___1iJYF:not(.theme__disabled___3Q__s) > .theme__inputElement___3v_Js { cursor: pointer; } .theme__header___bSlB0 { background: #217ded; color: rgb(255, 255, 255); font-size: 52px; padding: 10px; position: relative; text-align: center; width: 100%; } .theme__hours___1cCbJ, .theme__minutes___KM3eS { cursor: pointer; display: inline-block; opacity: 0.6; } .theme__separator___2OLHL { margin: 0 5px; opacity: 0.6; } .theme__ampm___qsPqk { font-size: 16px; height: 44px; line-height: 22px; margin-top: -22px; position: absolute; right: 20px; text-align: center; top: 50%; width: 40px; } .theme__am___1trrt, .theme__pm___2IfRz { cursor: pointer; display: block; opacity: 0.6; } .theme__dialog___DAA7B { width: 300px } .theme__dialog___DAA7B > [role='body'] { overflow-y: visible; padding: 0; } .theme__dialog___DAA7B > [role='navigation'] > .theme__button___1E68X { color: #217ded; } .theme__dialog___DAA7B > [role='navigation'] > .theme__button___1E68X:hover { background: rgba(33, 125, 237, 0.2); } .theme__dialog___DAA7B > [role='navigation'] > .theme__button___1E68X:focus:not(:active) { background: rgba(33, 125, 237, 0.2); } .theme__dialog___DAA7B.theme__hoursDisplay___1suWj .theme__hours___1cCbJ, .theme__dialog___DAA7B.theme__minutesDisplay___KhGOZ .theme__minutes___KM3eS, .theme__dialog___DAA7B.theme__amFormat___2GxCt .theme__am___1trrt, .theme__dialog___DAA7B.theme__pmFormat___UDY85 .theme__pm___2IfRz { opacity: 1; } .theme__clock___1twPb { padding: 15px 20px; } .theme__placeholder___2UChd { position: relative; z-index: 100; } .theme__clockWrapper___12MLg { background-color: rgb(238, 238, 238); border-radius: 50%; position: absolute; width: 100%; } .theme__face___1GBlg { border-radius: 50%; cursor: pointer; left: 50%; position: absolute; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 100; } .theme__number___2tlWV { height: 20px; margin-left: -10px; margin-top: -10px; pointer-events: none; position: relative; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 20px } .theme__number___2tlWV.theme__active___36xyU { color: rgb(255, 255, 255); } .theme__hand___2IiwT { background-color: #217ded; bottom: 50%; display: block; left: 50%; margin-left: -2px; position: absolute; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; width: 4px } .theme__hand___2IiwT::before { background-color: #217ded; border-radius: 50%; bottom: 0; content: ''; height: 10px; left: 50%; margin-bottom: -5px; margin-left: -5px; position: absolute; width: 10px; } .theme__hand___2IiwT.theme__small___6W8PQ > .theme__knob___2HyQV { background-color: rgba(33, 125, 237, 0.2); } .theme__hand___2IiwT.theme__small___6W8PQ > .theme__knob___2HyQV::after { background: #217ded; border-radius: 50%; content: ''; height: 12px; left: 50%; margin-left: -6px; margin-top: -6px; position: absolute; top: 50%; width: 12px; } .theme__hand___2IiwT.theme__small___6W8PQ > .theme__knob___2HyQV::before { background: #217ded; bottom: 0; content: ''; height: 22px; left: 50%; margin-left: -2px; position: absolute; width: 4px; } .theme__knob___2HyQV { background-color: #217ded; border-radius: 50%; cursor: pointer; height: 34px; left: 50%; margin-left: -17px; position: absolute; top: -34px; width: 34px; } .theme__zoomInEnter___3UVN6, .theme__zoomInLeave___1DL7b { position: absolute; } .theme__zoomInEnterActive___UjxCz, .theme__zoomInLeaveActive___41c0o { transition: opacity, -webkit-transform; transition: transform, opacity; transition: transform, opacity, -webkit-transform; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .theme__zoomInEnter___3UVN6 { opacity: 0; -webkit-transform: scale(0.85); transform: scale(0.85) } .theme__zoomInEnter___3UVN6.theme__zoomInEnterActive___UjxCz { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .theme__zoomInLeave___1DL7b { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } .theme__zoomInLeave___1DL7b.theme__zoomInLeaveActive___41c0o { opacity: 0; -webkit-transform: scale(1.25); transform: scale(1.25); } .theme__zoomOutEnter___3I4C7, .theme__zoomOutLeave___2-xfD { position: absolute; } .theme__zoomOutEnterActive___3ONCo, .theme__zoomOutLeaveActive___13YJR { transition: opacity, -webkit-transform; transition: transform, opacity; transition: transform, opacity, -webkit-transform; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .theme__zoomOutEnter___3I4C7 { opacity: 0; -webkit-transform: scale(1.25); transform: scale(1.25) } .theme__zoomOutEnter___3I4C7.theme__zoomOutEnterActive___3ONCo { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .theme__zoomOutLeave___2-xfD { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } .theme__zoomOutLeave___2-xfD.theme__zoomOutLeaveActive___13YJR { opacity: 0; -webkit-transform: scale(0.85); transform: scale(0.85); } .theme__tooltip___2fy29 { display: block; font-family: 'Metropolis', Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 700; line-height: 14px; max-width: 320px; max-width: 20rem; padding: 5px; pointer-events: none; position: absolute; text-align: center; text-transform: none; -webkit-transform: scale(0) translateX(-50%); transform: scale(0) translateX(-50%); -webkit-transform-origin: top left; transform-origin: top left; transition: cubic-bezier(0.4, 0, 0.2, 1) 200ms transform; z-index: 200; box-sizing: border-box; font-family: 'Metropolis', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100% } .theme__tooltip___2fy29 *, .theme__tooltip___2fy29 *::after, .theme__tooltip___2fy29 *::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; } .theme__tooltip___2fy29.theme__tooltipActive___JDdVv { -webkit-transform: scale(1) translateX(-50%); transform: scale(1) translateX(-50%); } .theme__tooltip___2fy29.theme__tooltipTop___3On1l { -webkit-transform: scale(0) translateX(-50%) translateY(-100%); transform: scale(0) translateX(-50%) translateY(-100%); } .theme__tooltip___2fy29.theme__tooltipTop___3On1l.theme__tooltipActive___JDdVv { -webkit-transform: scale(1) translateX(-50%) translateY(-100%); transform: scale(1) translateX(-50%) translateY(-100%); } .theme__tooltip___2fy29.theme__tooltipLeft___2DyeS { -webkit-transform: scale(0) translateX(-100%) translateY(-50%); transform: scale(0) translateX(-100%) translateY(-50%); } .theme__tooltip___2fy29.theme__tooltipLeft___2DyeS.theme__tooltipActive___JDdVv { -webkit-transform: scale(1) translateX(-100%) translateY(-50%); transform: scale(1) translateX(-100%) translateY(-50%); } .theme__tooltip___2fy29.theme__tooltipRight___1P1HG { -webkit-transform: scale(0) translateX(0) translateY(-50%); transform: scale(0) translateX(0) translateY(-50%); } .theme__tooltip___2fy29.theme__tooltipRight___1P1HG.theme__tooltipActive___JDdVv { -webkit-transform: scale(1) translateX(0) translateY(-50%); transform: scale(1) translateX(0) translateY(-50%); } .theme__tooltipInner___99sr7 { background: rgba(97, 97, 97, 0.9); border-radius: 5px; color: rgb(255, 255, 255); display: block; padding: 4px; padding: .25rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxPageNumber { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; color: #4a4a4a; font-size: 12px; font-weight: 700; border: 2px solid #8d97a0; margin: 0 5px; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; } .toolboxPageNumber:hover { border-color: #ff4133; } .toolboxPageNumber--active { color: #fff; border-color: #ff4133; background-color: #ff4133; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .breadcrumbs__item { margin-right: 10px; } .breadcrumbs__divider { margin-right: 10px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .deprecatedBrowserWarning { display: none; background: #ff4133; /* Show on IE 10 & 11 */ } .deprecatedBrowserWarning .container { padding: 20px 40px; color: white; font-size: 20px; text-align: center; } .deprecatedBrowserWarning .container a { color: white; text-decoration: underline; font-weight: bold; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .deprecatedBrowserWarning { display: block; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .navbar { height: 50px; line-height: 50px; text-transform: uppercase; background: linear-gradient(90deg, #4288e8, #68d8bc); } .navbar, .navbar a { color: #fff; } @media only screen and (max-width: 736px) { .navbar { display: none; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxButton, .toolboxButtonContainer > button { font-family: "Metropolis", Arial, Helvetica, sans-serif; font-weight: 700; text-transform: none; padding: 0 30px !important; } .toolboxButton--primary, .toolboxButtonContainer--primary > button { background-color: #ff4133 !important; color: #fff !important; } .toolboxButton--primary:disabled, .toolboxButtonContainer--primary > button:disabled { background-color: #dde2e6 !important; } .toolboxButton--secondary, .toolboxButtonContainer--secondary > button { background-color: #fff !important; color: #ff4133 !important; border: 1px solid #ff4133; } .toolboxButton, .toolboxButton:disabled, .toolboxButtonContainer > button, .toolboxButtonContainer > button:disabled { box-shadow: none; } .toolboxButtonContainer > button { border-radius: 3px; width: inherit; vertical-align: inherit; line-height: inherit; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxButtonSecondary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; color: #ff4133; font-weight: 700; font-size: 14px; border: 1px solid #ff4133; background-color: #fff; border-radius: 3px; cursor: pointer; padding: 5px; } .toolboxButtonSecondary:disabled { background: 0 !important; color: #888 !important; border: solid 1px #888; cursor: default; } .toolboxButtonSecondary--base { width: 140px; height: 36px; } .toolboxButtonSecondary--small { font-size: 12px; width: 94px; height: 22px; padding: 0; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxCarousel__slide { position: relative; width: 100%; height: 370px; } @media only screen and (min-width: 769px) { .toolboxCarousel__slide { width: 840px; } } @media only screen and (min-width: 769px) and (max-width: 1240px) { .toolboxCarousel__slide { width: 720px; height: 317.14286px; } } @media only screen and (min-width: 769px) and (max-width: 768px) { .toolboxCarousel__slide { width: 780px; height: 343.57143px; } } @media only screen and (min-width: 769px) and (max-width: 568px) { .toolboxCarousel__slide { width: 600px; height: 264.28571px; } } @media only screen and (min-width: 769px) and (max-width: 1240px) { .toolboxCarousel__slideImg { width: 720px; height: 317.14286px; } } @media only screen and (min-width: 769px) and (max-width: 768px) { .toolboxCarousel__slideImg { width: 780px; height: 343.57143px; } } @media only screen and (min-width: 769px) and (max-width: 568px) { .toolboxCarousel__slideImg { width: 600px; height: 264.28571px; } } .toolboxCarousel__slideBox { background-color: #fff; position: absolute; top: 5%; left: 5%; width: 32.3%; height: 90%; } @media only screen and (min-width: 769px) { .toolboxCarousel__slideBox { left: 8%; width: 50%; } } .toolboxCarousel__slideBoxContent { position: relative; height: 88%; width: 90%; margin: 5%; overflow: hidden; } .toolboxCarousel__slideTitle { position: absolute; top: 0; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media only screen and (max-width: 768px) { .toolboxCarousel__slideTitle { font-size: 20px; } } .toolboxCarousel__slideDescription { position: absolute; top: 15%; height: 60%; overflow: auto; } .toolboxCarousel__slideDescription p { margin-bottom: 20px; } .toolboxCarousel__slideButton { position: absolute; bottom: 0; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxCarousel { margin: 20px 0; } .toolboxCarousel__box { position: relative; width: 100%; height: 370px; overflow: hidden; } @media only screen and (min-width: 769px) { .toolboxCarousel__box { width: 840px; } } @media only screen and (min-width: 769px) and (max-width: 1240px) { .toolboxCarousel__box { width: 720px; height: 317.14286px; } } @media only screen and (min-width: 769px) and (max-width: 768px) { .toolboxCarousel__box { width: 780px; height: 343.57143px; } } @media only screen and (min-width: 769px) and (max-width: 568px) { .toolboxCarousel__box { width: 600px; height: 264.28571px; } } .toolboxCarousel__slides { position: absolute; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .toolboxCarousel__navButton { background-color: #5b6797; opacity: 0.7; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; width: 34px; height: 140px; top: 32%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; } .toolboxCarousel__navButton path { fill: #D3E1F2; stroke: #D3E1F2; stroke-width: 2px; stroke-linejoin: round; } @media only screen and (min-width: 769px) { .toolboxCarousel__navButton { width: 44px; height: 49px; top: 40%; } } .toolboxCarousel__navButton--left { left: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .toolboxCarousel__navButton--right { right: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .toolboxCarousel__navCircles { height: 18px; margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } @media only screen and (min-width: 769px) { .toolboxCarousel__navCircles { width: 840px; } } @media only screen and (min-width: 769px) and (max-width: 1240px) { .toolboxCarousel__navCircles { width: 720px; height: 15.42857px; } } @media only screen and (min-width: 769px) and (max-width: 768px) { .toolboxCarousel__navCircles { width: 780px; height: 16.71429px; } } @media only screen and (min-width: 769px) and (max-width: 568px) { .toolboxCarousel__navCircles { width: 600px; height: 12.85714px; } } .toolboxCarousel__navCircle, .toolboxCarousel__navCircle--active { cursor: pointer; background-color: #dde2e6; width: 18px; height: 18px; border-radius: 50%; margin: 0 10px; } .toolboxCarousel__navCircle--active { background-color: #4a4a4a; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* .resource-with-content-container.v2 hanging with cards in content blocks */ .toolboxCard, .resource-with-content-container.v2 .toolboxCard { font-family: "Metropolis", Arial, Helvetica, sans-serif; height: 370px; border-radius: 1px; box-shadow: 0px 1px 2px rgba(0, 0, 0, .28); position: relative; padding: 5px; cursor: pointer; color: black; } .toolboxCard, .toolboxCard span, .resource-with-content-container.v2 .toolboxCard, .resource-with-content-container.v2 .toolboxCard span { display: block; } .toolboxCard *, .resource-with-content-container.v2 .toolboxCard * { font-family: "Metropolis", Arial, Helvetica, sans-serif; } .toolboxCard .toolboxCard__topBox, .resource-with-content-container.v2 .toolboxCard .toolboxCard__topBox { position: relative; background-color: #8d97a0; background-size: cover; background-repeat: no-repeat; height: 150px; margin-bottom: 12px; } .toolboxCard .toolboxCard__topBox .toolboxCard__menuIcon, .resource-with-content-container.v2 .toolboxCard .toolboxCard__topBox .toolboxCard__menuIcon { position: absolute; top: 0; right: 0; padding: 0 10px 10px 10px; } .toolboxCard .toolboxCard__topBox .toolboxCard__menuIcon button > svg, .resource-with-content-container.v2 .toolboxCard .toolboxCard__topBox .toolboxCard__menuIcon button > svg { width: 36px; height: 36px; } .toolboxCard .toolboxCard__topBox .toolboxCard__menuIcon button > svg path, .resource-with-content-container.v2 .toolboxCard .toolboxCard__topBox .toolboxCard__menuIcon button > svg path { fill: #fff; } .toolboxCard .toolboxCard__topBox .toolboxCard__menuIcon div[data-react-toolbox="menu"], .resource-with-content-container.v2 .toolboxCard .toolboxCard__topBox .toolboxCard__menuIcon div[data-react-toolbox="menu"] { right: 10px; } .toolboxCard .toolboxCard__topBox .toolboxCard__title, .resource-with-content-container.v2 .toolboxCard .toolboxCard__topBox .toolboxCard__title { position: absolute; top: 28px; left: 10px; right: 10px; color: #fff; font-size: 22px; font-weight: 800; /* Fallback for non-webkit */ display: block; height: 88px; /* Webkit */ display: -webkit-box; max-width: 226px; font-size: 22px; line-height: 1; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .toolboxCard .toolboxCard__featuredBox, .resource-with-content-container.v2 .toolboxCard .toolboxCard__featuredBox { z-index: 1; background-color: #fff; border-radius: 7px; box-shadow: 0px 1px 3px rgba(0, 0, 0, .5); position: absolute; top: 125px; right: 14px; width: 60px; height: 60px; padding: 5px; } .toolboxCard .toolboxCard__featuredBox .toolboxCard__featIcon--default, .toolboxCard .toolboxCard__featuredBox .toolboxCard__featIcon--pdf, .resource-with-content-container.v2 .toolboxCard .toolboxCard__featuredBox .toolboxCard__featIcon--default, .resource-with-content-container.v2 .toolboxCard .toolboxCard__featuredBox .toolboxCard__featIcon--pdf { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .toolboxCard .toolboxCard__featuredBox img, .resource-with-content-container.v2 .toolboxCard .toolboxCard__featuredBox img { max-width: 50px; max-height: 50px; } .toolboxCard .toolboxCard__featuredBox.toolboxCard__featuredBox--badge, .resource-with-content-container.v2 .toolboxCard .toolboxCard__featuredBox.toolboxCard__featuredBox--badge { top: 85px; width: 100px; height: 100px; border-radius: 50%; } .toolboxCard .toolboxCard__featuredBox.toolboxCard__featuredBox--badge img, .resource-with-content-container.v2 .toolboxCard .toolboxCard__featuredBox.toolboxCard__featuredBox--badge img { max-width: 100%; max-height: 100%; } .toolboxCard .toolboxCard__bottomArea, .resource-with-content-container.v2 .toolboxCard .toolboxCard__bottomArea { position: absolute; left: 5px; right: 5px; bottom: 0; height: 200px; padding: 0 10px; } .toolboxCard .toolboxCard__bottomArea .toolboxCard__name, .resource-with-content-container.v2 .toolboxCard .toolboxCard__bottomArea .toolboxCard__name { display: inline-block; } .toolboxCard .toolboxCard__type, .resource-with-content-container.v2 .toolboxCard .toolboxCard__type { color: #223057; font-size: 12px; font-weight: 600; text-transform: uppercase; margin-bottom: 5px; } .toolboxCard .toolboxCard__typeLine, .resource-with-content-container.v2 .toolboxCard .toolboxCard__typeLine { display: block; height: 10px; width: 32px; margin-bottom: 20px; } .toolboxCard .toolboxCard__typeLine line, .resource-with-content-container.v2 .toolboxCard .toolboxCard__typeLine line { stroke: #217ded; stroke-width: 2; stroke-linecap: round; } .toolboxCard .toolboxCard__metaInfo, .resource-with-content-container.v2 .toolboxCard .toolboxCard__metaInfo { color: #ff4133; font-weight: 800; font-size: 16px; margin-bottom: 5px; } .toolboxCard .toolboxCard__description, .resource-with-content-container.v2 .toolboxCard .toolboxCard__description { font-family: "Merriweather", Georgia, "Times New Roman", sans-serif; } .toolboxCard .toolbox__description--fourLines, .resource-with-content-container.v2 .toolboxCard .toolbox__description--fourLines { /* Fallback for non-webkit */ display: block; height: 78.4px; /* Webkit */ display: -webkit-box; max-width: 230px; font-size: 14px; line-height: 1.4; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .toolboxCard .toolbox__description--threeLines, .resource-with-content-container.v2 .toolboxCard .toolbox__description--threeLines { /* Fallback for non-webkit */ display: block; height: 58.8px; /* Webkit */ display: -webkit-box; max-width: 230px; font-size: 14px; line-height: 1.4; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .toolboxCard .toolboxCard__button, .resource-with-content-container.v2 .toolboxCard .toolboxCard__button { position: absolute; bottom: 15px; left: 10px; } .toolboxCard .toolboxCard__button.toolboxCard__button--info, .resource-with-content-container.v2 .toolboxCard .toolboxCard__button.toolboxCard__button--info { right: 10px; background-color: #26d7b2 !important; } .toolboxCard--list { margin-bottom: 20px; } .resource-with-content-container.v2 .toolboxCard .toolboxCard__button { line-height: 56px; line-height: 3.5rem; } .toolboxCard__clickWrapper { position: relative; } .toolboxCard__clickWrapper .toolboxCard__menuIcon { position: absolute; top: 10px; right: 10px; padding: 0 10px 10px 10px; } .toolboxCard__clickWrapper .toolboxCard__menuIcon button > svg { width: 36px; height: 36px; } .toolboxCard__clickWrapper .toolboxCard__menuIcon button > svg path { fill: #fff; } .toolboxCard__clickWrapper .toolboxCard__menuIcon div[data-react-toolbox="menu"] { right: 10px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxPill { position: relative; font-family: "Metropolis", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 500; color: #8d97a0; } .toolboxPill .toolboxPill__dropdown { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px; padding-left: 20px; margin-bottom: 20px; border: solid 1px #8d97a0; height: 40px; width: 100%; cursor: pointer; } .toolboxPill .toolboxPill__dropdown path { fill: #8d97a0; } @media only screen and (min-width: 569px) { .toolboxPill .toolboxPill__dropdown { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: auto; margin-bottom: 0; } } .toolboxPill .toolboxPill__options { position: absolute; top: 53px; background-color: #fff; border: 1px solid #dde2e6; -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); /*set shadow colour and size here */ -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .14); filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); border: 1px solid #dde2e6; min-width: 150px; width: 100%; z-index: 7; } .toolboxPill .toolboxPill__options:after, .toolboxPill .toolboxPill__options:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .toolboxPill .toolboxPill__options:after { border: 10px solid transparent; border-bottom: 14px solid #ffffff; left: 6px; } .toolboxPill .toolboxPill__options:before { border: 11px solid transparent; border-bottom: 15px solid #dde2e6; left: 5px; } .toolboxPill .toolboxPill__options > *:not(:last-child) { border-bottom: 1px solid #e9e7e7; } @media only screen and (min-width: 569px) { .toolboxPill .toolboxPill__options { max-width: 250px; width: auto; } } .toolboxPill .toolboxPill__options .toolboxPill__optionRow { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; padding: 10px; min-width: 150px; max-width: 250px; height: 46px; } .toolboxPill .toolboxPill__options .toolboxPill__optionRow span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .toolboxPill .toolboxPill__options .toolboxPill__optionRow > div { margin-right: 5px; } .toolboxPill .toolboxPill__options .toolboxPill__optionRow:hover { width: 100%; background-color: #f8f8f8; } .toolboxPill .toolboxPill__options .toolboxPill__optionRow--selected { color: #ff4133; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxFilter .toolboxFilter__optionRow { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; padding: 20px; min-width: 150px; max-width: 250px; height: 46px; } .toolboxFilter .toolboxFilter__optionRow > div { margin-right: 5px; } .toolboxFilter .toolboxFilter__optionRow--selected { color: #ff4133; } .toolboxFilter .toolboxFilter__optionRow--selected .toolboxFilter__optionBox { border: solid 1px #ff4133; background-color: #ff4133; } .toolboxFilter .toolboxFilter__optionBox { display: inline-block; border: solid 1px #8d97a0; width: 10px; height: 10px; min-width: 10px; min-height: 10px; } .toolboxFilter .toolboxFilter__optionName { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ @media only screen and (min-width: 569px) { .toolboxFilterGroup__filterSort { display: -webkit-box; display: -ms-flexbox; display: flex; } } .toolboxFilterGroup__filterSort .toolboxSearchGroup__label { margin-bottom: 10px; } .toolboxFilterGroup__filterSection { display: block; margin-bottom: 20px; } @media only screen and (min-width: 569px) { .toolboxFilterGroup__filterSection { margin: 0 40px 0 0; } } .toolboxFilterGroup__heading { margin-bottom: 10px; } .toolboxFilterGroup__resultsCount { display: inline-block; margin-top: 10px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxIconPanel { height: 100%; position: relative; } .toolboxIconPanel .toolboxIconPanel__button { position: absolute; top: 0; } .toolboxIconPanel .toolboxIconPanel__panel { top: 40px; display: inline-block; background-color: #fff; position: absolute; z-index: 1; padding: 10px; } .toolboxIconPanel.toolboxIconPanel--topLeft .toolboxIconPanel__button { left: 0; } .toolboxIconPanel.toolboxIconPanel--topLeft .toolboxIconPanel__panel { border: 1px solid #dde2e6; -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); /*set shadow colour and size here */ -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .14); filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); left: 0; } .toolboxIconPanel.toolboxIconPanel--topLeft .toolboxIconPanel__panel:after, .toolboxIconPanel.toolboxIconPanel--topLeft .toolboxIconPanel__panel:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .toolboxIconPanel.toolboxIconPanel--topLeft .toolboxIconPanel__panel:after { border: 10px solid transparent; border-bottom: 14px solid #ffffff; left: 6px; } .toolboxIconPanel.toolboxIconPanel--topLeft .toolboxIconPanel__panel:before { border: 11px solid transparent; border-bottom: 15px solid #dde2e6; left: 5px; } .toolboxIconPanel.toolboxIconPanel--topRight .toolboxIconPanel__button { right: 0; } .toolboxIconPanel.toolboxIconPanel--topRight .toolboxIconPanel__panel { border: 1px solid #dde2e6; -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); /*set shadow colour and size here */ -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .14); filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); right: 0; } .toolboxIconPanel.toolboxIconPanel--topRight .toolboxIconPanel__panel:after, .toolboxIconPanel.toolboxIconPanel--topRight .toolboxIconPanel__panel:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .toolboxIconPanel.toolboxIconPanel--topRight .toolboxIconPanel__panel:after { border: 10px solid transparent; border-bottom: 14px solid #ffffff; right: 6px; } .toolboxIconPanel.toolboxIconPanel--topRight .toolboxIconPanel__panel:before { border: 11px solid transparent; border-bottom: 15px solid #dde2e6; right: 5px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxIconMenu .toolboxIconMenu__menu--topArrow { top: 44px; } .toolboxIconMenu .toolboxIconMenu__menu--bottomArrow { bottom: 44px; } .toolboxIconMenu .toolboxIconMenu__outline--topRightArrow { border: 1px solid #dde2e6; -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); /*set shadow colour and size here */ -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .14); filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); } .toolboxIconMenu .toolboxIconMenu__outline--topRightArrow:after, .toolboxIconMenu .toolboxIconMenu__outline--topRightArrow:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .toolboxIconMenu .toolboxIconMenu__outline--topRightArrow:after { border: 10px solid transparent; border-bottom: 14px solid #ffffff; right: 6px; } .toolboxIconMenu .toolboxIconMenu__outline--topRightArrow:before { border: 11px solid transparent; border-bottom: 15px solid #dde2e6; right: 5px; } .toolboxIconMenu .toolboxIconMenu__outline--topLeftArrow { border: 1px solid #dde2e6; -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); /*set shadow colour and size here */ -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .14); filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); } .toolboxIconMenu .toolboxIconMenu__outline--topLeftArrow:after, .toolboxIconMenu .toolboxIconMenu__outline--topLeftArrow:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .toolboxIconMenu .toolboxIconMenu__outline--topLeftArrow:after { border: 10px solid transparent; border-bottom: 14px solid #ffffff; left: 6px; } .toolboxIconMenu .toolboxIconMenu__outline--topLeftArrow:before { border: 11px solid transparent; border-bottom: 15px solid #dde2e6; left: 5px; } .toolboxIconMenu .toolboxIconMenu__outline--bottomRightArrow { border: 1px solid #dde2e6; -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); /*set shadow colour and size here */ -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .4); filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); box-shadow: none; } .toolboxIconMenu .toolboxIconMenu__outline--bottomRightArrow:after, .toolboxIconMenu .toolboxIconMenu__outline--bottomRightArrow:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .toolboxIconMenu .toolboxIconMenu__outline--bottomRightArrow:after { border: 10px solid transparent; border-top: 14px solid #ffffff; right: 6px; } .toolboxIconMenu .toolboxIconMenu__outline--bottomRightArrow:before { border: 11px solid transparent; border-top: 15px solid #dde2e6; right: 5px; } .toolboxIconMenu .toolboxIconMenu__outline--bottomLeftArrow { border: 1px solid #dde2e6; -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); /*set shadow colour and size here */ -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .4); filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); box-shadow: none; } .toolboxIconMenu .toolboxIconMenu__outline--bottomLeftArrow:after, .toolboxIconMenu .toolboxIconMenu__outline--bottomLeftArrow:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .toolboxIconMenu .toolboxIconMenu__outline--bottomLeftArrow:after { border: 10px solid transparent; border-top: 14px solid #ffffff; left: 6px; } .toolboxIconMenu .toolboxIconMenu__outline--bottomLeftArrow:before { border: 11px solid transparent; border-top: 15px solid #dde2e6; left: 5px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxPagination { font-family: "Metropolis", Arial, Helvetica, sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 20px 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; letter-spacing: 0; } .toolboxPagination__defaultItem { padding: 10px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxSearch__input { font-size: 18px; border: 0; border-bottom: 1px solid #8d97a0; padding: 10px 40px 10px 10px; width: 330px; } .toolboxSearch__input::-webkit-input-placeholder { color: #217ded; } .toolboxSearch__input::-moz-placeholder { color: #217ded; } .toolboxSearch__input:-ms-input-placeholder { color: #217ded; } .toolboxSearch__input:-moz-placeholder { color: #217ded; } @media only screen and (max-width: 736px) { .toolboxSearch__input { width: 100%; } } .toolboxSearch__icon { margin: 0 0 -5px -40px; cursor: pointer; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Conventional wisdom used in auth context would indicate we want nothing to ever have a higher z-index Adjust here as needed */ .toolboxOverlay__wrapper { font-family: "Metropolis", Arial, Helvetica, sans-serif; position: absolute; height: 100%; width: 100vw; margin-top: 0px; } .toolboxOverlay { position: absolute; top: 0; left: 0; background: #4a4a4a; mix-blend-mode: multiply; width: 100%; height: 100%; z-index: 10; } .toolboxOverlay__info { position: relative; color: white; font-size: 32px; font-weight: bold; max-width: 1200px; margin: 80px auto; z-index: 10; } @media only screen and (max-width: 1024px) { .toolboxOverlay__info { max-width: 600px; } } @media only screen and (max-width: 768px) { .toolboxOverlay__info { max-width: 400px; } } @media only screen and (max-width: 568px) { .toolboxOverlay__info { max-width: 300px; } } .toolboxOverlay__close { height: 60px; width: 85%; } .toolboxOverlay__clear { background-color: inherit; border: none; cursor: pointer; float: right; margin: 0; padding: 10px; } .toolboxOverlay__text { width: 80%; max-width: 783px; } .toolboxOverlay__signIn { margin-top: 40px; } .toolboxOverlay__button { background-color: #ff4133; border: none; color: white; cursor: pointer; font-size: 18px; padding: 10px 0; width: 200px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxToolTip__inner { font-family: "Metropolis", Arial, Helvetica, sans-serif; background-color: #8d97a0; border-radius: 1px; padding: 10px; } .toolboxToolTip__children { cursor: pointer; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .autocomplete-container { position: relative; height: 128px; height: 8rem; } .autocomplete-container form > div input { background: white; box-shadow: 0 2px 5px rgba(33, 33, 33, .1); } @media only screen and (max-width: 568px) { .autocomplete-container form > div.normal { display: none; } } @media only screen and (min-width: 569px) { .autocomplete-container form > div.mobile { display: none; } } .autocomplete-container button { position: absolute; top: 0; bottom: 0; right: 0; width: 120px; height: 100%; line-height: 100%; } .autocomplete-container button.submit { font-weight: 900; } .autocomplete-container button:disabled { background: #888 !important; } .autocomplete-container ul.autocomplete { margin: 0; padding: 0; box-shadow: 0 2px 5px rgba(33, 33, 33, .1); position: absolute; z-index: 1; top: 96px; top: 6rem; left: 0; right: 0; background: white; } .autocomplete-container ul.autocomplete li { list-style: none; } .autocomplete-container ul.autocomplete li a { display: block; padding: 16px; padding: 1rem; } .autocomplete-container ul.autocomplete li a img, .autocomplete-container ul.autocomplete li a span { vertical-align: middle; } .autocomplete-container ul.autocomplete li a img { height: 20px; width: 20px; margin-right: 16px; margin-right: 1rem; } .autocomplete-container ul.autocomplete li a.selected, .autocomplete-container ul.autocomplete li a:hover { background: #fff8dc; color: #1064cb; } .autocomplete-container.resizable form > div { position: absolute; top: 0; bottom: 0; left: 0; right: 120px; padding: 0; } .autocomplete-container.with-icon ul.autocomplete { left: 76.8px; left: 4.8rem; } .autocomplete-container.autocomplete-select button.submit { display: none; } .autocomplete-container.autocomplete-select.with-selection input { text-indent: -9999px; } .autocomplete-container.autocomplete-select.with-selection section.selection { position: absolute; top: 32px; top: 2rem; bottom: 32px; bottom: 2rem; left: 0; right: 0; padding: 0 16px; padding: 0 1rem; line-height: 48px; line-height: 3rem; } .autocomplete-container.autocomplete-select.with-selection section.selection span, .autocomplete-container.autocomplete-select.with-selection section.selection img { vertical-align: middle; } .autocomplete-container.autocomplete-select.with-selection section.selection img { height: 20px; width: 20px; margin-right: 16px; margin-right: 1rem; } .autocomplete-container.autocomplete-select.with-selection section.selection button { top: 5px; right: 5px; bottom: 8px; height: auto; background: #555; color: white; } .autocomplete-container.autocomplete-select.with-icon section.selection { left: 70px; } .react-component .avatar img, .react-component .avatar-sm img, .react-dialog .avatar img, .react-dialog .avatar-sm img { margin-right: 5px; } .react-component .avatar span.email, .react-component .avatar-sm span.email, .react-dialog .avatar span.email, .react-dialog .avatar-sm span.email { position: relative; top: 0.1em; margin-left: 5px; color: #555; font-size: 0.8em; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ ul.notifications { margin: 0; padding: 0; } ul.notifications li { list-style: none; } ul.notifications li.notification { position: relative; border-bottom: solid 1px #ccc; } ul.notifications li.notification div.content { position: relative; padding: 10px 0; min-height: 32px; } ul.notifications li.notification div.content .avatar-sm { margin-right: 5px; } ul.notifications li.notification div.content .avatar-sm.primary { position: absolute; } ul.notifications li.notification div.content .avatar-sm img { width: 32px; height: 32px; border-radius: 50%; } ul.notifications li.notification div.content .avatar-sm span { vertical-align: inherit; } ul.notifications li.notification div.content span.img.secondary { display: inline-block; background-size: cover; width: 16px; height: 16px; } ul.notifications li.notification div.content p.primary, ul.notifications li.notification div.content p.secondary { margin: 0; margin-left: 42px !important; padding: 0; white-space: normal; } ul.notifications li.notification div.content p.comment { background-color: #fbfbfb; border-left: thick solid #edece6; margin: 10px 0; padding: 10px 10px; } ul.notifications li.notification div.content p.primary { margin-top: 8px; padding-right: 100px; font-size: 14px; } ul.notifications li.notification div.content p.secondary { font-size: 12px; line-height: 16px; } ul.notifications li.notification div.content p.secondary a { color: #777; text-decoration: none; } ul.notifications li.notification div.content p.secondary a span.img { margin-right: 5px; } ul.notifications li.notification div.content p.secondary a span.name { text-decoration: underline; } ul.notifications li.notification div.content p.secondary span { vertical-align: middle; } ul.notifications li.notification div.sub-content { overflow: hidden; margin-left: 42px !important; left: 0; color: #999; font-size: 12px; } ul.notifications li.more, ul.notifications li.view-all { text-align: center; margin-top: 10px; } ul.notifications li.more a, ul.notifications li.view-all a { line-height: 57.6px; line-height: 3.6rem; } ul.notifications li.promo { cursor: pointer; } ul.notifications li.promo a.promo { display: block; position: relative; padding: 10px; margin-bottom: 10px; border: solid 2px #1064cb; background: #f8fff8; text-decoration: none; } ul.notifications li.promo a.promo span { display: block; padding-right: 100px; } ul.notifications li.promo a.promo span.announce { font-size: 14px; color: #217ded; } ul.notifications li.promo a.promo span.date { color: #aaa; font-size: 12px; margin-bottom: 10px; } ul.notifications li.promo a.promo span.title { color: #01070e; font-size: 16px; font-weight: bold; } ul.notifications li.promo a.promo span.description { margin-top: 10px; color: #333; font-size: 12px; } ul.notifications li.promo a.promo img { position: absolute; right: 0; top: 0; height: 100px; } ul.notifications li.promo a.promo.with-image { min-height: 80px; } ul.notifications li.promo a.close { position: absolute; top: -10px; right: -9px; text-decoration: none; color: black; background: white; font-size: 20px; line-height: 20px; } div.user-menu div.menu-notifications-container { max-height: 600px; overflow-x: hidden; overflow-y: auto; } div.user-menu div.menu-notifications-container header { padding: 0 10px; } div.user-menu div.menu-notifications-container header h3 { text-align: center; margin: 0; padding-bottom: 10px; border-bottom: solid 1px #ccc; } div.user-menu div.menu-notifications-container div.notifications-container { width: 440px; padding: 0 20px 10px 10px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.user-menu { float: right; position: relative; height: 36px; } div.user-menu div.signed-out a.login { color: black; cursor: pointer; text-decoration: none; } div.user-menu div.username { line-height: 36px; font-size: 14px; padding-right: 10px; color: #333; } div.user-menu div.username, div.user-menu div.user-menu-component, div.user-menu div.user-notifications-component { float: left; } div.user-menu div.user-menu-component > div, div.user-menu div.user-notifications-component > div { top: 40px; } div.user-menu div.user-menu-component button img, div.user-menu div.user-notifications-component button img { height: 36px; border-radius: 50%; display: block; } div.user-menu div.user-menu-component button span, div.user-menu div.user-notifications-component button span { line-height: inherit !important; } div.user-menu div.user-notifications-component { margin-right: 5px; } div.user-menu span.unacknowledged { position: absolute; display: block; right: 30px; top: -5px; overflow: hidden; width: 24px; height: 24px; line-height: 24px; padding: 0; font-size: 19.2px; font-size: 1.2rem; font-weight: bold; color: white; background: red; border-radius: 50%; text-align: center; z-index: 1; } @media only screen and (max-width: 1024px) { div.user-menu { position: absolute; float: inherit; right: 5px; } div.user-menu div.username { display: none; } } @media only screen and (max-width: 1024px) { .page-new .user-menu { right: 15px; top: 15px; } } @media only screen and (max-width: 1024px) { header.header div.user-menu div.user-menu-component { margin-right: -10px; } } @media only screen and (max-width: 1024px) { header.header div.user-menu div.user-notifications-component { margin-right: -10px; } } .userMenu__signup { color: #ff4133 !important; } .userMenu__signup:hover { background: 0 !important; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .pageHeader { position: relative; padding: 20px; } .pageHeader--shadow { box-shadow: 0 12px 20px -6px #dde2e6; } @media only screen and (min-width: 1025px) { .pageHeader__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media only screen and (max-width: 1024px) { .pageHeader__button { position: absolute; right: 20px; top: -80px; margin: 10px 0; } } @media only screen and (max-width: 842px) { .pageHeader__button { top: -104px; } } @media only screen and (max-width: 768px) { .pageHeader__button { top: -200px; } } .pageHeader__logo { margin-top: 5px; } @media only screen and (max-width: 375px) { .pageHeader__logo { margin-top: 0px; margin-left: -15px; } } @media only screen and (min-width: 1025px) { .pageHeader__navigation { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } } @media only screen and (max-width: 768px) { .pageHeader__navigation { margin: 10px 0; } } .pageHeader__title { padding: 20px 10px; text-align: center; } @media only screen and (min-width: 1025px) { .pageHeader__title { padding: 40px 10px 20px; } } .pageHeader__title a:hover, .pageHeader__title a:focus { text-decoration: none !important; } .pageHeader__title h1 { font-size: 2.25em; color: #217ded; } @media only screen and (min-width: 769px) { .pageHeader__title h1 { font-size: 2.75em; } } @media only screen and (max-width: 1024px) { .landingNav--left { text-align: center; margin-top: 20px; } .landingNav--left .landingNav__item { font-size: 1.2em; } } @media only screen and (max-width: 768px) { .landingNav--left .landingNav__item { display: block; margin: 0; padding: 5px; } } @media only screen and (max-width: 1024px) { .landingNav--right { position: absolute; top: 20px; right: 20px; } .landingNav--right .landingNav__item { margin-right: 0; } } .landingNav__list { list-style: none; } .landingNav__item { display: inline-block; margin: 0 20px; } .landingNav__link { color: #4a4a4a !important; text-decoration: none !important; } .landingNav__link:hover, .landingNav__link:focus, .landingNav__link.is--active { color: #2d2d2d !important; } @charset "UTF-8"; /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.page-basic section { margin-top: 80px; margin-top: 5rem; } div.page-basic section h3 { color: #5d5d5d !important; margin-top: 80px; margin-top: 5rem; } div.page-basic section h3:nth-child(3) { margin-top: 0; } .page-new a { color: #217ded; } .page-new a:hover, .page-new a:focus { text-decoration: underline; } .page-new div.user-menu { min-width: 160px; text-align: right; padding: 3px 0 0 0; float: none; height: 100%; } .page-new .pageSection { padding: 20px 0; } .page-new .pageSection:not(:last-child) { box-shadow: 0 12px 20px -6px #dde2e6; } .page-new .pageSection:last-child { padding-bottom: 0; } @media only screen and (min-width: 769px) { .page-new .pageSection { padding-top: 10px; } } .page-new .pageSection__register { text-align: center; margin: 40px 0; } .page-new .pageSection__apply { margin: 40px 44px; } .page-new .pageSection--featured { background: linear-gradient(to bottom, #223968 90%, #217ded 100%); } .page-new .pageSection--featured .pageSection__title { color: #fff; } .page-new .pageSection__title { text-align: center; margin-bottom: 20px; } @media only screen and (min-width: 769px) { .page-new .pageSection__title { margin-bottom: 40px; } } .page-new .pageSection__linkTitle { color: #8d97a0; } .page-new .pageSection__linkTitle:focus, .page-new .pageSection__linkTitle:hover { text-decoration: none; } .page-new .pageSection__content { margin-bottom: 20px; line-height: 1.5; } .page-new .pageSection__content h2 { margin-bottom: 20px; } .page-new .pageSection__content h3 { font-weight: 700; } .page-new .pageSection__content p { margin-bottom: 20px; } .page-new .pageSection__content ul { margin-left: 20px; } .page-new .pageSection__content ul li:not(:last-child) { margin-bottom: 6.66667px; } @media only screen and (min-width: 769px) { .page-new .pageSection__content { margin-bottom: 40px; } } .page-new .pageSection__content:last-child:not(:only-child) { margin-bottom: 0; } .page-new .pageSection__content--constrained { max-width: 100%; margin-bottom: 20px; } @media only screen and (min-width: 569px) { .page-new .pageSection__content--constrained { max-width: 80%; margin: 0 auto 40px; } } .page-new .pageSection__content--noMargin { margin-bottom: 0; } .page-new .pageSection__graphic { text-align: center; margin-bottom: 20px; } .page-new .pageSection__graphic h3 { font-weight: bold; } @media only screen and (min-width: 769px) { .page-new .pageSection__graphic { margin-bottom: 40px; } } .page-new .pageSection__image, .page-new .pageSection__image--large, .page-new .pageSection__image--medium, .page-new .pageSection__image--small, .page-new .pageSection__image--padded { width: 100%; margin-bottom: 20px; } @media only screen and (min-width: 569px) { .page-new .pageSection__image, .page-new .pageSection__image--large, .page-new .pageSection__image--medium, .page-new .pageSection__image--small, .page-new .pageSection__image--padded { margin-bottom: 0; } } .page-new .pageSection__image--noMargin { margin-bottom: 0; } .page-new .pageSection__image--large { max-width: 225px; } .page-new .pageSection__image--medium { max-width: 150px; } .page-new .pageSection__image--small { max-width: 50px; } .page-new .pageSection__image--padded { padding: 10px 0; } .page-new .vertCenter__third { width: 100%; } @media only screen and (min-width: 569px) { .page-new .vertCenter__third { width: 33.333333%; } } .page-new .vertCenter__fifth { width: 100%; } @media only screen and (min-width: 569px) { .page-new .vertCenter__fifth { width: 20%; } } .page-new .vertCenter__fourFifths { width: 100%; } @media only screen and (min-width: 569px) { .page-new .vertCenter__fourFifths { width: 80%; } } .page-new .pageSection__list--padded li { padding: 10px 0; } .page-new .pageSection__list--padded-bottom li { padding-bottom: 10px; } .page-new .pageSection__image--header { margin-bottom: 0; } .page-new .pageSection__state { height: 150px; width: 100%; margin-top: 20px; } @media only screen and (min-width: 769px) { .page-new .pageSection__state { margin-top: 0; } } .page-new .pageSection__action { margin: 40px 0 20px; } .page-new .graphicBlock { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; } @media only screen and (min-width: 569px) { .page-new .graphicBlock { margin-bottom: 40px; } } .page-new .graphicBlock__graphic { width: 35%; text-align: center; } .page-new .graphicBlock__graphic img { width: 100px; } @media only screen and (min-width: 769px) { .page-new .graphicBlock__graphic img { width: 150px; } } .page-new .graphicBlock--small .graphicBlock__graphic { width: 20%; text-align: left; } .page-new .graphicBlock--small .graphicBlock__graphic img { width: 40px; } @media only screen and (min-width: 769px) { .page-new .graphicBlock--small .graphicBlock__graphic img { width: 60px; } } @media only screen and (min-width: 769px) { .page-new .graphicBlock--small .graphicBlock__graphic img { width: 75px; } } .page-new .graphicBlock--small .graphicBlock__graphic--centered { text-align: center; } .page-new .graphicBlock--small .graphicBlock__text { width: 80%; } .page-new .graphicBlock__text { width: 65%; margin-left: 10px; } .page-new .graphicBlock__text p:last-child { margin-bottom: 0; } @media only screen and (min-width: 569px) { .page-new .graphicBlock__text { margin-left: 20px; } } .page-new .graphicBlock__number { font-size: 2.25em; font-weight: 700; color: #217ded; } @media only screen and (min-width: 569px) { .page-new .graphicBlock__number { font-size: 3.5em; } } .page-new .iconList { *zoom: 1; margin-bottom: 20px; } .page-new .iconList:before, .page-new .iconList:after { display: table; content: ""; line-height: 0; } .page-new .iconList:after { clear: both; } @media only screen and (min-width: 569px) { .page-new .iconList { margin-bottom: 40px; } } .page-new .iconList__icon { float: left; width: 40px; } @media only screen and (min-width: 769px) { .page-new .iconList__icon { width: 60px; } } @media only screen and (min-width: 1025px) { .page-new .iconList__icon { width: 75px; } } .page-new .iconList__content { overflow: hidden; padding: 0 20px; float: left; max-width: 80%; } .page-new .iconList__content h3 { margin-top: 0; } .page-new .graphicSteps { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } .page-new .graphicSteps__step { font-size: 3em; font-weight: 700; -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; padding: 0 20px; display: inline-block; color: #ffd026; } .page-new .graphicSteps__step h3 { font-size: .25em; line-height: 1; color: #4a4a4a; } @media only screen and (min-width: 569px) { .page-new .graphicSteps__step { font-size: 5em; padding: 0 40px; } } .page-new .graphicSteps__nextArrow { font-size: 2.5em; display: inline-block; color: #4a4a4a; -ms-flex-item-align: start; align-self: flex-start; margin-top: 15px; } .page-new .graphicSteps__nextArrow::after { content: ">"; } @media only screen and (min-width: 769px) { .page-new .graphicSteps__nextArrow { font-size: 3.5em; } } .page-new .graphicQuestionMark { font-size: 7em; color: #217ded; } .page-new .graphicQuestionMark::after { content: "?"; } .page-new .stepList { list-style: none; margin: 0 !important; } .page-new .stepList__item { margin-top: 20px; } .page-new .stepList__number { font-size: 2em; font-weight: 700; color: #ffd026; float: left; text-align: center; width: 10%; margin-right: 10px; } @media only screen and (min-width: 569px) { .page-new .stepList__number { font-size: 3em; width: 15%; margin-left: -80px; margin-right: 0; } } @media only screen and (min-width: 769px) { .page-new .stepList__number { font-size: 3.5em; } } .page-new .stepList__details { overflow: hidden; } @media only screen and (min-width: 569px) { .page-new .stepList__details { padding-top: 10px; } } .page-new .button { display: inline-block; background-color: #217ded; color: #fff !important; padding: 5px 10px; border: 2px solid #217ded; text-decoration: none !important; line-height: 1.2; transition: background-color 300ms; } .page-new .button:hover, .page-new .button:focus { background-color: #2f85ee; color: #fff; } .page-new .pageSection__button { display: inline-block; padding: 5px 10px; text-decoration: none !important; line-height: 2.5; } .page-new .pageSection__button:hover, .page-new .pageSection__button:focus { color: #fff; } .page-new .button--knockout { background-color: #fff; color: #217ded !important; } .page-new .button--knockout:hover, .page-new .button--knockout:focus { background-color: #e7f1fd; color: #217ded; } .page-new .button--knockout.button--gray { color: #8d97a0 !important; border-color: #8d97a0; } .page-new .button--knockout.button--gray:hover, .page-new .button--knockout.button--gray:focus { background-color: #eef0f1; color: #8d97a0; } .page-new .button--knockout.button--gray.is--active { background-color: #8d97a0; color: #fff !important; } .page-new .button--fixedNarrow { width: 150px; } .page-new .button--fixedWide { width: 280px; text-align: center; } .page-new .button--fixedFat { height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; margin: auto; } .page-new .button--full { width: 100%; text-align: center; } .page-new .buttonGroup { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .page-new .buttonGroup .button { margin-bottom: 20px; } .page-new .button--link { text-decoration: none; } .page-new .constrain { padding: 0 10px; } @media only screen and (min-width: 769px) { .page-new .constrain { padding: 0 20px; } } @media only screen and (min-width: 1025px) { .page-new .constrain { max-width: 1200px; margin: 0 auto; } } .page-new .constrain--tight { padding: 0 10px; } @media only screen and (min-width: 769px) { .page-new .constrain--tight { padding: 0 20px; } } @media only screen and (min-width: 1025px) { .page-new .constrain--tight { max-width: 990px; margin: 0 auto; } } .page-new .videoEmbed { position: relative; height: 0; padding-bottom: 56.25%; } .page-new .videoEmbed object, .page-new .videoEmbed embed, .page-new .videoEmbed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .page-new blockquote { font-size: 1.3em; color: #4a4a4a; padding: 20px; } .page-new blockquote p::before { content: "\201C"; } .page-new blockquote p::after { content: "\201D"; } .page-new blockquote cite { font-style: normal; } .page-new blockquote cite::before { content: "\2013"; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .banner-toolbar { position: relative; height: 54px; padding: 0; border: 0; box-shadow: none; } .banner-toolbar .pure-g { position: relative; } .banner-toolbar .toolbar-contents { position: relative; z-index: 2; } .banner-toolbar h1, .banner-toolbar h2, .banner-toolbar p.primary { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0; text-align: center; font-weight: bold; line-height: 54px; font-size: 22px; color: white; z-index: 1; pointer-events: none; } .banner-toolbar h1 a, .banner-toolbar h2 a, .banner-toolbar p.primary a { pointer-events: auto; cursor: pointer; } .banner-toolbar .toolbar-actions-left, .banner-toolbar .toolbar-actions-right { pointer-events: none; } .banner-toolbar .toolbar-actions-left a.toolbar-action { float: left; margin-right: 6px; } .banner-toolbar .toolbar-actions-right a.toolbar-action { float: right; margin-left: 6px; } .banner-toolbar a.toolbar-action, .banner-toolbar a.back-caret { pointer-events: auto; } .banner-toolbar a.toolbar-action { position: relative; display: block; background: white; margin-top: 6px; height: 42px; font-size: 12px; line-height: 15px; text-decoration: none; border-radius: 3px; color: black; outline: none; text-align: left; } .banner-toolbar a.toolbar-action img, .banner-toolbar a.toolbar-action i, .banner-toolbar a.toolbar-action span { display: block; margin: 0 6px; float: left; } .banner-toolbar a.toolbar-action img { margin: 6px; height: 30px; } .banner-toolbar a.toolbar-action i { font-size: 24px; line-height: 42px; } .banner-toolbar a.toolbar-action span { margin: 6px 6px 0 0; } .banner-toolbar a.toolbar-action aside.count { position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; line-height: 20px; color: white; background: #217ded; border-radius: 50%; text-align: center; font-weight: bold; } .banner-toolbar a.toolbar-action:hover, .banner-toolbar a.toolbar-action.active { background: #fff8dc; } .banner-toolbar a.toolbar-action:focus { outline: none; } .banner-toolbar a.back-caret { float: left; height: 42px; margin-top: 6px; } .banner-toolbar a.back-caret img { height: 30px; margin: 6px 12px 6px 0; } .banner-toolbar.header { line-height: 54px; text-align: center; background: linear-gradient(90deg, #4288e8, #68d8bc); color: white; } .banner-toolbar.header .button-ghost:hover, .banner-toolbar.header .button-ghost.active, .banner-toolbar.header a.button-ghost:hover, .banner-toolbar.header a.button-ghost.active { color: #759ab2; } .banner-toolbar.header a.inline-edit { font-size: 16px; color: #bff; } .banner-toolbar.header.edit { background: #223057; } .banner-toolbar.header.edit, .banner-toolbar.header.edit h1, .banner-toolbar.header.edit h2 { color: white; } @media only screen and (max-width: 800px) { .banner-toolbar a.toolbar-action { width: 50px; } .banner-toolbar a.toolbar-action img { float: none; margin: 6px auto; } .banner-toolbar a.toolbar-action span { display: none; } } @media only screen and (max-width: 1280px) { .banner-toolbar.banner-toolbar-chat a.toolbar-action { width: 50px; } .banner-toolbar.banner-toolbar-chat a.toolbar-action img { float: none; margin: 6px auto; } .banner-toolbar.banner-toolbar-chat a.toolbar-action span { display: none; } } .banner-toolbar.banner-toolbar-medium { position: relative; } .banner-toolbar.banner-toolbar-medium, .banner-toolbar.banner-toolbar-medium .container { height: 80px; } .banner-toolbar.banner-toolbar-medium h1, .banner-toolbar.banner-toolbar-medium h2, .banner-toolbar.banner-toolbar-medium p.primary { line-height: 80px; } .banner-toolbar.banner-toolbar-medium.with-subtitle h1, .banner-toolbar.banner-toolbar-medium.with-subtitle p.primary { top: 11.42857px; bottom: inherit; line-height: 26.66667px; font-size: 24px; font-size: 1.5rem; } .banner-toolbar.banner-toolbar-medium.with-subtitle h2 { top: inherit; bottom: 16px; line-height: 26.66667px; } .banner-toolbar.banner-toolbar-medium a.toolbar-action, .banner-toolbar.banner-toolbar-medium a.back-caret { margin-top: 32px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .appLanding { height: 700px; font-family: "Metropolis Bold", Arial, Helvetica, sans-serif; } @media only screen and (max-width: 736px) { .appLanding { height: 650px; } } .topHalf { background: linear-gradient(90deg, #217ded, #26d7b2); height: 320px; width: 100%; } @media only screen and (max-width: 736px) { .topHalf { height: 525px; } } .topLeft { margin: 40px 40px; width: 180px; } @media only screen and (max-width: 736px) { .topLeft { width: 270px; } } .logo { width: 80px; } .landingHeader { color: #fff; font-size: 22px; } @media only screen and (max-width: 736px) { .landingHeader { width: 400px; font-size: 28px; } } .landingDescription { font-size: 16px; font-family: "Metropolis Bold", Arial, Helvetica, sans-serif; margin-top: 10px; margin-bottom: 20px; } @media only screen and (max-width: 736px) { .landingDescription { font-size: 22px; } } .appleStore { width: 150px; } .landing__phone { position: absolute; top: 30px; left: 208px; height: 650px; } @media only screen and (max-width: 736px) { .landing__phone { left: -50px; top: 380px; height: 400px; } } .landing__phone--image { position: absolute; top: 158px; left: 423px; width: 220px; max-height: 390px; } @media only screen and (max-width: 736px) { .landing__phone--image { left: 81px; top: 459px; max-height: 240px; width: 138px; } } .bottomHalf { background: #3a4674; height: 100%; margin: 0; } @media only screen and (max-width: 736px) { .bottomHalf { padding-top: 170px; } } .bottomHalf__text { padding-top: 20px; color: #fff; margin: 0 40px; width: 220px; } @media only screen and (max-width: 736px) { .bottomHalf__text { width: 270px; font-size: 20px; } } .bottomHalf__feedback { font-size: 10px; } .link { color: #fff; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.badge-banner { background: #f2f2f2; padding: 16px 0; padding: 1rem 0; } div.badge-banner:first-child { padding-top: 32px; padding-top: 2rem; } div.badge-banner:last-child { padding-bottom: 32px; padding-bottom: 2rem; } div.badge-banner a.badge-link { position: relative; display: block; height: 160px; height: 10rem; background: white; border: solid 1px #e7e7e7; } div.badge-banner a.badge-link:hover { background: #fff8dc; } div.badge-banner a.badge-link img { position: absolute; left: 16px; left: 1rem; top: 16px; top: 1rem; height: 128px; height: 8rem; } div.badge-banner a.badge-link span.name, div.badge-banner a.badge-link span.date { display: block; padding-left: 272px; padding-left: 17rem; } div.badge-banner a.badge-link span.name span, div.badge-banner a.badge-link span.date span { margin-left: 5px; } div.badge-banner a.badge-link span.name { padding-top: 32px; padding-top: 2rem; font-size: 40px; font-size: 2.5rem; } div.badge-banner a.badge-link span.date { padding-top: 10px; padding-top: 0.625rem; font-size: 26.666px; font-size: 1.66667rem; } div.badge-banner div.addendum { margin-top: 16px; margin-top: 1rem; color: #555; } div.badge-banner div.addendum a { margin-left: 5px; text-decoration: underline; } div.badge-banner.resource-only div.addendum { margin-bottom: 16px; margin-bottom: 1rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.resource-content-block-file { background: #f2f2f2; margin: 16px 0; margin: 1rem 0; padding: 20px; text-align: center; } div.resource-content-block-file div.image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } div.resource-content-block-file div.image img { max-width: 100%; max-height: 400px; } div.resource-content-block-file div.download h4 { color: #777; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ section.dropzone-input { position: relative; width: 100%; margin-bottom: 32px; margin-bottom: 2rem; } section.dropzone-input label { display: block; margin-bottom: 10px; color: #777; } section.dropzone-input div.dropzone { width: 100%; height: 150px; background: #f2f2f2; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } section.dropzone-input div.dropzone img.preview { max-width: 90%; max-height: 90%; margin: 5%; } section.dropzone-input div.dropzone span.filename { font-family: monospace; } section.dropzone-input div.dropzone span.hint { color: #555; } section.dropzone-input a.close { position: absolute; top: -24px; top: -1.5rem; right: -24px; right: -1.5rem; font-size: 48px; font-size: 3rem; line-height: 1em; z-index: 1; background: white; border-radius: 50%; } div.content-creation .input-checkbox { height: auto; } div.content-creation .input-checkbox span { white-space: normal; text-indent: 0; padding-right: 30px; } div.content-creation .checkbox-label { color: #777; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ nav.dialogActions.only-x { padding: 0; } nav.dialogActions button.cancel { background: #e7e7e7; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .warning { background: #3a4674; color: white; line-height: 1.2em; margin: 16px; margin: 1rem; padding: 16px; padding: 1rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.resource-with-content-container.v1 div.resource-content-block-interaction h2, div.resource-with-content-container.v2 div.resource-content-block-interaction h2, div.content-block-editor-guide div.resource-content-block-interaction h2 { font-size: 31.68px; font-size: 1.98rem; color: #5d5d5d; text-transform: uppercase; font-weight: 900; letter-spacing: 1px; border: 0; margin: 0; } div.resource-with-content-container.v1 div.resource-content-block-interaction h2 a, div.resource-with-content-container.v2 div.resource-content-block-interaction h2 a, div.content-block-editor-guide div.resource-content-block-interaction h2 a { color: #838383; text-decoration: underline; } div.resource-with-content-container.v1 div.resource-content-block-interaction section, div.resource-with-content-container.v2 div.resource-content-block-interaction section, div.content-block-editor-guide div.resource-content-block-interaction section { border: solid 3px #e7e7e7; margin-top: 16px; margin-top: 1rem; padding: 32px; padding: 2rem; } div.resource-with-content-container.v1 div.resource-content-block-interaction section h2, div.resource-with-content-container.v1 div.resource-content-block-interaction section h3, div.resource-with-content-container.v2 div.resource-content-block-interaction section h2, div.resource-with-content-container.v2 div.resource-content-block-interaction section h3, div.content-block-editor-guide div.resource-content-block-interaction section h2, div.content-block-editor-guide div.resource-content-block-interaction section h3 { margin: 16px -32px 16px -32px; margin: 1rem -2rem 1rem -2rem; padding: 16px 32px; padding: 1rem 2rem; background: #e7e7e7; color: black; text-transform: none; } div.resource-with-content-container.v1 div.resource-content-block-interaction section h2:first-child, div.resource-with-content-container.v1 div.resource-content-block-interaction section h3:first-child, div.resource-with-content-container.v2 div.resource-content-block-interaction section h2:first-child, div.resource-with-content-container.v2 div.resource-content-block-interaction section h3:first-child, div.content-block-editor-guide div.resource-content-block-interaction section h2:first-child, div.content-block-editor-guide div.resource-content-block-interaction section h3:first-child { margin-top: -32px; margin-top: -2rem; } div.resource-with-content-container.v1 div.resource-content-block-interaction section.with-content div.interact, div.resource-with-content-container.v2 div.resource-content-block-interaction section.with-content div.interact, div.content-block-editor-guide div.resource-content-block-interaction section.with-content div.interact { margin-top: 32px; margin-top: 2rem; } div.resource-with-content-container.v1 div.resource-content-block-interaction section.without-content, div.resource-with-content-container.v2 div.resource-content-block-interaction section.without-content, div.content-block-editor-guide div.resource-content-block-interaction section.without-content { background: #e7e7e7; } div.resource-with-content-container.v1 div.resource-content-block-interaction div.interact, div.resource-with-content-container.v2 div.resource-content-block-interaction div.interact, div.content-block-editor-guide div.resource-content-block-interaction div.interact { text-align: center; } div.resource-with-content-container.v1 div.resource-content-block-interaction div.interact button, div.resource-with-content-container.v2 div.resource-content-block-interaction div.interact button, div.content-block-editor-guide div.resource-content-block-interaction div.interact button { min-width: 320px; } .interaction__editYourWork { display: block; margin: 0 auto; height: 40px !important; line-height: 40px !important; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxCard .toolboxCard__description, .resource-with-content-container.v2 .toolboxCard .toolboxCard__description { display: -webkit-box; display: -ms-flexbox; display: flex; font-family: "Merriweather", Georgia, "Times New Roman", sans-serif; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .toolboxCard .toolboxCard__submittedAtText, .resource-with-content-container.v2 .toolboxCard .toolboxCard__submittedAtText { font-family: "Merriweather", Georgia, "Times New Roman", sans-serif; } .toolboxCard .toolboxCard__inReview, .toolboxCard .toolboxCard__badgeAwarded, .resource-with-content-container.v2 .toolboxCard .toolboxCard__inReview, .resource-with-content-container.v2 .toolboxCard .toolboxCard__badgeAwarded { font-size: 12px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .collectionSimplePreview { position: relative; display: block; overflow: hidden; box-shadow: 0px 1px 2px rgba(0, 0, 0, .28); height: 264px; height: 16.5rem; margin-bottom: 20px; } .collectionSimplePreview:hover { background: #fff8dc; } .collectionSimplePreview span.title, .collectionSimplePreview hr, .collectionSimplePreview span.image, .collectionSimplePreview span.description { position: absolute; display: block; overflow: hidden; } .collectionSimplePreview span.title { top: 16px; top: 1rem; left: 16px; left: 1rem; right: 16px; right: 1rem; font-size: 25.6px; font-size: 1.6rem; font-weight: bold; line-height: 32px !important; line-height: 2rem !important; height: 1.25em; } .collectionSimplePreview hr { left: 16px; left: 1rem; right: 16px; right: 1rem; top: 32px; top: 2rem; color: #e7e7e7; } .collectionSimplePreview span.image, .collectionSimplePreview span.description { top: 80px; top: 5rem; bottom: 16px; bottom: 1rem; } .collectionSimplePreview span.image { left: 16px; left: 1rem; width: 168px; width: 10.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } .collectionSimplePreview span.image img { max-width: 100%; max-height: 100%; } .collectionSimplePreview span.description { left: 200px; left: 12.5rem; right: 16px; right: 1rem; height: 168px; height: 10.5rem; color: #777; font-size: 22.4px; font-size: 1.4rem; } .collectionSimplePreview span.description, .collectionSimplePreview span.description span, .collectionSimplePreview span.description br { line-height: 1.25 !important; } .collectionSimplePreview span.description.focused { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } .collectionSimplePreview span.description.focused span { display: block; } .collectionSimplePreview span.description.focused span.primary { font-size: 1.25em; font-weight: bold; } .collectionSimplePreview aside.status { position: absolute; left: 200px; left: 12.5rem; right: 16px; right: 1rem; bottom: 16px; bottom: 1rem; color: #717171; text-align: center; padding: 5px 0; background: #e7e7e7; font-size: 22.4px; font-size: 1.4rem; font-weight: bold; } .collectionSimplePreview.with-status span.description { height: 112px; height: 7rem; } .collectionSimplePreview.no-image span.description { left: 16px; left: 1rem; } .collectionSimplePreview.no-hover:hover { background: 0; } aside.empty-state { text-align: center; color: #aaa; } aside.empty-state i, aside.empty-state span { display: block; } aside.empty-state i { font-size: 128px; font-size: 8rem; } aside.empty-state span { margin-top: 32px; margin-top: 2rem; font-size: 28.8px; font-size: 1.8rem; } aside.empty-state.padded { padding: 32px; padding: 2rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.resource-content-block-collection a.resource-preview span.description span.primary { font-size: 26.4px; font-size: 1.65rem; } div.resource-content-block-collection aside { background: #f2f2f2; padding: 16px; padding: 1rem; margin-bottom: 32px; margin-bottom: 2rem; overflow: hidden; } div.resource-content-block-collection aside img { display: block; float: left; margin-right: 16px; margin-right: 1rem; max-height: 4.5em; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.resource-content-block.resource-content-block-video iframe { margin-bottom: 0; } div.resource-content-block.resource-content-block-video div.caption { margin-top: -32px; margin-top: -2rem; padding: 32px; padding: 2rem; background: #e7e7e7; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* ====================================================== ==================== VERSION 1 ==================== ====================================================== ====== See assets/shared/typography.css for V2 ======= ====================================================== */ .resource-with-content-container.v1 .resource-content-block, .resource-with-content-container.v1 .resource-with-content-navigation { /* ===== TYPOGRAPHY ===== */ } .resource-with-content-container.v1 .resource-content-block h1, .resource-with-content-container.v1 .resource-content-block h2, .resource-with-content-container.v1 .resource-content-block h3, .resource-with-content-container.v1 .resource-content-block h4, .resource-with-content-container.v1 .resource-content-block h5, .resource-with-content-container.v1 .resource-content-block h6, .resource-with-content-container.v1 .resource-with-content-navigation h1, .resource-with-content-container.v1 .resource-with-content-navigation h2, .resource-with-content-container.v1 .resource-with-content-navigation h3, .resource-with-content-container.v1 .resource-with-content-navigation h4, .resource-with-content-container.v1 .resource-with-content-navigation h5, .resource-with-content-container.v1 .resource-with-content-navigation h6 { margin-bottom: 16px; margin-bottom: 1rem; font-weight: bold; } .resource-with-content-container.v1 .resource-content-block ul, .resource-with-content-container.v1 .resource-content-block ol, .resource-with-content-container.v1 .resource-content-block p, .resource-with-content-container.v1 .resource-with-content-navigation ul, .resource-with-content-container.v1 .resource-with-content-navigation ol, .resource-with-content-container.v1 .resource-with-content-navigation p { margin-bottom: 32px; margin-bottom: 2rem; } .resource-with-content-container.v1 .resource-content-block ul:last-child, .resource-with-content-container.v1 .resource-content-block ol:last-child, .resource-with-content-container.v1 .resource-content-block p:last-child, .resource-with-content-container.v1 .resource-with-content-navigation ul:last-child, .resource-with-content-container.v1 .resource-with-content-navigation ol:last-child, .resource-with-content-container.v1 .resource-with-content-navigation p:last-child { margin-bottom: 0; } .resource-with-content-container.v1 .resource-content-block ul, .resource-with-content-container.v1 .resource-content-block ol, .resource-with-content-container.v1 .resource-with-content-navigation ul, .resource-with-content-container.v1 .resource-with-content-navigation ol { padding-left: 32px; padding-left: 2rem; list-style-type: none; counter-reset: li-counter; } .resource-with-content-container.v1 .resource-content-block ul li, .resource-with-content-container.v1 .resource-content-block ol li, .resource-with-content-container.v1 .resource-with-content-navigation ul li, .resource-with-content-container.v1 .resource-with-content-navigation ol li { position: relative; margin-bottom: 16px; margin-bottom: 1rem; } .resource-with-content-container.v1 .resource-content-block ul li ul, .resource-with-content-container.v1 .resource-content-block ul li ol, .resource-with-content-container.v1 .resource-content-block ol li ul, .resource-with-content-container.v1 .resource-content-block ol li ol, .resource-with-content-container.v1 .resource-with-content-navigation ul li ul, .resource-with-content-container.v1 .resource-with-content-navigation ul li ol, .resource-with-content-container.v1 .resource-with-content-navigation ol li ul, .resource-with-content-container.v1 .resource-with-content-navigation ol li ol { margin-top: 16px; margin-top: 1rem; } .resource-with-content-container.v1 .resource-content-block ul li:last-child, .resource-with-content-container.v1 .resource-content-block ol li:last-child, .resource-with-content-container.v1 .resource-with-content-navigation ul li:last-child, .resource-with-content-container.v1 .resource-with-content-navigation ol li:last-child { margin-bottom: 0; } .resource-with-content-container.v1 .resource-content-block ul li:before, .resource-with-content-container.v1 .resource-content-block ol li:before, .resource-with-content-container.v1 .resource-with-content-navigation ul li:before, .resource-with-content-container.v1 .resource-with-content-navigation ol li:before { position: absolute; left: 0; display: inline-block; background: #223057; border-radius: 50%; } .resource-with-content-container.v1 .resource-content-block ul li, .resource-with-content-container.v1 .resource-with-content-navigation ul li { padding-left: 1.5em; } .resource-with-content-container.v1 .resource-content-block ul li:before, .resource-with-content-container.v1 .resource-with-content-navigation ul li:before { content: " "; top: 0.4em; width: 0.6em; height: 0.6em; } .resource-with-content-container.v1 .resource-content-block ol li, .resource-with-content-container.v1 .resource-with-content-navigation ol li { padding-left: 2em; } .resource-with-content-container.v1 .resource-content-block ol li:before, .resource-with-content-container.v1 .resource-with-content-navigation ol li:before { top: 0.2em; width: 32px; width: 2rem; height: 32px; height: 2rem; line-height: 32px; line-height: 2rem; font-size: 19.2px; font-size: 1.2rem; text-align: center; color: white; content: counter(li-counter); counter-increment: li-counter; } .resource-with-content-container.v1 .resource-content-block a, .resource-with-content-container.v1 .resource-with-content-navigation a { text-decoration: underline; } .resource-with-content-container.v1 .resource-content-block img, .resource-with-content-container.v1 .resource-with-content-navigation img { max-width: 100%; } .resource-with-content-container.v1 .resource-content-block em, .resource-with-content-container.v1 .resource-content-block i, .resource-with-content-container.v1 .resource-with-content-navigation em, .resource-with-content-container.v1 .resource-with-content-navigation i { font-family: "Merriweather", sans-serif; } .resource-with-content-container.v1 .resource-content-block table, .resource-with-content-container.v1 .resource-with-content-navigation table { width: 100% !important; border-collapse: collapse; } .resource-with-content-container.v1 .resource-content-block table th, .resource-with-content-container.v1 .resource-content-block table td, .resource-with-content-container.v1 .resource-with-content-navigation table th, .resource-with-content-container.v1 .resource-with-content-navigation table td { border: solid 3px #e7e7e7; padding: 16px; padding: 1rem; } .resource-with-content-container.v1 .resource-content-block blockquote, .resource-with-content-container.v1 .resource-with-content-navigation blockquote { padding: 32px; padding: 2rem; background: #f2f2f2; margin-bottom: 32px; margin-bottom: 2rem; } .resource-with-content-container.v1 .resource-content-block blockquote a, .resource-with-content-container.v1 .resource-with-content-navigation blockquote a { text-decoration: underline; } .resource-with-content-container.v1 .resource-content-block h1, .resource-with-content-container.v1 .resource-content-block h2, .resource-with-content-container.v1 .resource-with-content-navigation h1, .resource-with-content-container.v1 .resource-with-content-navigation h2 { margin-bottom: 32px; margin-bottom: 2rem; padding-bottom: 16px; padding-bottom: 1rem; border-bottom: solid 3px #e7e7e7; } .resource-with-content-container.v1 .resource-content-block *, .resource-with-content-container.v1 .resource-with-content-navigation * { font-size: 26.4px; font-size: 1.65rem; line-height: 39.6px; line-height: 2.475rem; } .resource-with-content-container.v1 .resource-content-block h1, .resource-with-content-container.v1 .resource-with-content-navigation h1 { font-size: 59.4px; font-size: 3.7125rem; } .resource-with-content-container.v1 .resource-content-block h2, .resource-with-content-container.v1 .resource-with-content-navigation h2 { font-size: 39.6px; font-size: 2.475rem; color: #217ded; } .resource-with-content-container.v1 .resource-content-block h3, .resource-with-content-container.v1 .resource-with-content-navigation h3 { font-size: 31.68px; font-size: 1.98rem; font-weight: normal; color: #888; } .resource-with-content-container.v1 .resource-content-block h4, .resource-with-content-container.v1 .resource-with-content-navigation h4 { font-size: 31.68px; font-size: 1.98rem; color: #5d5d5d; } /* ====================================================== ==================== ALL VERSIONS ==================== ====================================================== */ div.resource-content-block, .typography { word-wrap: break-word; } div.resource-content-block.titled, .typography.titled { margin-top: 96px; margin-top: 6rem; } div.resource-content-block.titled:first-child, div.resource-content-block.titled:first-child h2, .typography.titled:first-child, .typography.titled:first-child h2 { margin-top: 0; } div.resource-content-block iframe, .typography iframe { width: 100%; height: 440px !important; padding: 16px; padding: 1rem; margin: 32px 0; margin: 2rem 0; background: #e7e7e7 url("/images/arrows/caret-white-right.png") no-repeat center center; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.resource-content-block-edit div.panel { position: relative; margin-right: -72px; } div.resource-content-block-edit div.panel div.resource-content-block { margin: 16px 72px 16px 0; margin: 1rem 72px 1rem 0; min-height: 185px; } div.resource-content-block-edit div.panel aside.palette { position: absolute; top: 0; bottom: 0; right: 0; background: #f2f2f2; border: solid 1px #e7e7e7; border-left: 0; box-shadow: 0 2px 5px rgba(33, 33, 33, .1); } div.resource-content-block-edit div.panel aside.palette button { min-width: 50px; width: 50px; } div.resource-content-block-edit div.panel aside.palette button span { margin-right: 0; } div.resource-content-block-edit div.panel aside.palette nav.move { position: absolute; bottom: 0; } div.resource-content-block-edit div.panel aside.palette nav.move button, div.resource-content-block-edit div.panel aside.palette nav.move button span { height: 25px; line-height: 25px; } div.resource-content-block-edit div.insert { text-align: center; } div.resource-content-block-edit div.insert button { min-width: 128px; min-width: 8rem; height: 32px; height: 2rem; font-size: 16px; font-size: 1rem; } div.resource-content-block-edit div.insert button, div.resource-content-block-edit div.insert button span { line-height: 32px; line-height: 2rem; margin-right: 0; } div.resource-content-block-edit button.insert { box-shadow: 0px 0px 2px 2px #e7e7e7; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .selectBar { margin: 0; background: 0; } .selectBar input { display: none; } .selectBar > label { top: 0 !important; } .selectBar .selectBar__item { display: inline-block; margin: 0 8px 8px 0; margin: 0 0.5rem 0.5rem 0; height: 57.6px; height: 3.6rem; line-height: 57.6px; line-height: 3.6rem; background: white; border: solid 1px #e1e1e1; width: 70px; text-align: center; padding: 0 10px; font-size: 12px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .selectBar.selectBar--enabled .selectBar__item { cursor: pointer; } .selectBar.selectBar--enabled .selectBar__item:hover { border: solid 1px #217ded; color: #217ded; } .selectBar.selectBar--enabled .selectBar__item.active { background: #217ded; border-color: #217ded; color: white; } .selectBar.selectBar--disabled .selectBar__item { cursor: not-allowed; } .selectBar.selectBar--disabled .selectBar__item.active { background: #e1e1e1; } .selectBar.selectBar--wide .selectBar__item { width: 120px; } .selectBar.selectBar--extraWide .selectBar__item { width: 160px; } .selectBar.selectBar--list .selectBar__item { display: block; width: auto; border: 0; text-align: left; } .selectBar.selectBar--list .selectBar__item span.checkbox { pointer-events: none; position: relative; top: 14.4px; top: 0.9rem; margin-right: 10px; } .selectBar.selectBar--list .selectBar__item span.checkbox label { display: inline-block !important; } .selectBar.selectBar--list .selectBar__item:hover { border: 0; color: inherit; } .selectBar.selectBar--list .selectBar__item.active { background: 0; color: inherit; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.image-upload-manager div.dropzone { min-height: 120px; border: dashed 2px #ccc; padding: 16px 0 16px 16px; padding: 1rem 0 1rem 1rem; background: white; } div.image-upload-manager div.dropzone.empty { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; text-align: center; } div.image-upload-manager div.dropzone.empty ul { display: hidden; } div.image-upload-manager div.dropzone.with-files p.instructions { margin-bottom: 32px; margin-bottom: 2rem; } div.image-upload-manager div.dropzone.active { background: #fff8dc; } div.image-upload-manager div.dropzone.no-click ul li a { pointer-events: none; } div.image-upload-manager div.dropzone ul { margin: 0; padding: 0; margin-top: 16px; margin-top: 1rem; max-height: 300px; overflow-y: scroll; } div.image-upload-manager div.dropzone ul li { list-style: none; } div.image-upload-manager div.dropzone ul li { margin-bottom: 16px; margin-bottom: 1rem; } div.image-upload-manager div.dropzone ul li, div.image-upload-manager div.dropzone ul li div, div.image-upload-manager div.dropzone ul li a { height: 60px; } div.image-upload-manager div.dropzone ul li a { position: relative; display: block; z-index: 1; margin-right: 16px; margin-right: 1rem; padding: 8px; padding: 0.5rem; background: #f2f2f2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } div.image-upload-manager div.dropzone ul li img { max-width: 100%; max-height: 50px; } div.image-upload-manager div.dropzone ul li.selected { border: solid 3px linear-gradient(90deg, #4288e8, #68d8bc); padding: 2px; } div.image-upload-manager div.dropzone ul li.selected .wrapper { padding: 0; } div.image-upload-manager .pending { position: absolute; top: 32px; top: 2rem; right: 32px; right: 2rem; zoom: 0.4; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .DraftEditor-editorContainer, .DraftEditor-root, .public-DraftEditor-content { height: inherit; text-align: left; text-align: initial; } .public-DraftEditor-content[contenteditable=true] { -webkit-user-modify: read-write-plaintext-only; } .DraftEditor-root { position: relative; } .DraftEditor-editorContainer { background-color: rgba(255, 255, 255, 0); border-left: .1px solid transparent; position: relative; z-index: 1; } .public-DraftEditor-block { position: relative; } .DraftEditor-alignLeft .public-DraftStyleDefault-block { text-align: left; } .DraftEditor-alignLeft .public-DraftEditorPlaceholder-root { left: 0; text-align: left; } .DraftEditor-alignCenter .public-DraftStyleDefault-block { text-align: center; } .DraftEditor-alignCenter .public-DraftEditorPlaceholder-root { margin: 0 auto; text-align: center; width: 100%; } .DraftEditor-alignRight .public-DraftStyleDefault-block { text-align: right; } .DraftEditor-alignRight .public-DraftEditorPlaceholder-root { right: 0; text-align: right; } .public-DraftEditorPlaceholder-root { color: #9197a3; position: absolute; z-index: 0; } .public-DraftEditorPlaceholder-hasFocus { color: #bdc1c9; } .DraftEditorPlaceholder-hidden { display: none; } .public-DraftStyleDefault-block { position: relative; white-space: pre-wrap; } .public-DraftStyleDefault-ltr { direction: ltr; text-align: left; } .public-DraftStyleDefault-rtl { direction: rtl; text-align: right; } .public-DraftStyleDefault-listLTR { direction: ltr; } .public-DraftStyleDefault-listRTL { direction: rtl; } .public-DraftStyleDefault-ol, .public-DraftStyleDefault-ul { margin: 16px 0; padding: 0; } .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR { margin-left: 1.5em; } .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL { margin-right: 1.5em; } .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR { margin-left: 3em; } .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL { margin-right: 3em; } .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR { margin-left: 4.5em; } .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL { margin-right: 4.5em; } .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR { margin-left: 6em; } .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL { margin-right: 6em; } .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR { margin-left: 7.5em; } .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL { margin-right: 7.5em; } .public-DraftStyleDefault-unorderedListItem { list-style-type: square; position: relative; } .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0 { list-style-type: disc; } .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1 { list-style-type: circle; } .public-DraftStyleDefault-orderedListItem { list-style-type: none; position: relative; } .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before { left: -36px; position: absolute; text-align: right; width: 30px; } .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before { position: absolute; right: -36px; text-align: left; width: 30px; } .public-DraftStyleDefault-orderedListItem:before { content: counter(ol0) ". "; counter-increment: ol0; } .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before { content: counter(ol1) ". "; counter-increment: ol1; } .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before { content: counter(ol2) ". "; counter-increment: ol2; } .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before { content: counter(ol3) ". "; counter-increment: ol3; } .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before { content: counter(ol4) ". "; counter-increment: ol4; } .public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset { counter-reset: ol0; } .public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset { counter-reset: ol1; } .public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset { counter-reset: ol2; } .public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset { counter-reset: ol3; } .public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset { counter-reset: ol4; } div.rich-text-input label.primary { display: block; margin-bottom: 4px; } div.rich-text-input header div.controls { float: left; overflow: hidden; } div.rich-text-input header div.controls.inline-controls, div.rich-text-input header div.controls.block-controls { margin: 0 16px 16px 0; margin: 0 1rem 1rem 0; padding-right: 16px; padding-right: 1rem; border-right: solid 1px #e7e7e7; } div.rich-text-input header .rich-text-input-control { position: relative; float: left; width: 32px; height: 32px; margin-right: 2px; padding: 8px; padding: 0.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; background: #e7e7e7; border: solid 1px #cecece; cursor: pointer; } div.rich-text-input header .rich-text-input-control.active { background: #fff8dc; } div.rich-text-input header .rich-text-input-control img.icon { width: 100%; height: 100%; } div.rich-text-input header .rich-text-input-control .image-upload-manager { position: absolute; top: -1px; left: 40px; z-index: 2; width: 800px; width: 50rem; border: solid 1px #e7e7e7; background: white; box-shadow: 0 2px 5px rgba(33, 33, 33, .1); } div.rich-text-input header .rich-text-input-control .image-upload-manager h2 { display: none; } div.rich-text-input header .rich-text-input-control .image-upload-manager div.dropzone { border: 0; } div.rich-text-input .editor-container { clear: left; } div.rich-text-input .editor-container .public-DraftEditor-content { height: 40vh; overflow-y: scroll; padding: 16px; padding: 1rem; border: solid 1px #e7e7e7; } div.rich-text-input .editor-container .public-DraftEditor-content div[data-block="true"] { margin: 20px 0; margin: 1.25rem 0; } div.rich-text-input .editor-container .public-DraftEditor-content ul, div.rich-text-input .editor-container .public-DraftEditor-content ol { margin: 0; padding: 0; } div.rich-text-input .editor-container .public-DraftEditor-content blockquote { margin-bottom: 0; } div.rich-text-input .editor-container .public-DraftEditor-content blockquote:after { display: block; height: 0; } div.rich-text-input .editor-container .public-DraftEditor-content figure { max-width: 100%; pointer-events: none; } div.rich-text-input .editor-container .public-DraftEditor-content figure img { max-width: 100%; } div.rich-text-input .editor-container .public-DraftEditor-content figure .rich-text-media { pointer-events: auto; display: inline-block; position: relative; } div.rich-text-input .editor-container .public-DraftEditor-content figure .rich-text-media button.close { position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; background: url(/images/buttons/close-black-64.png); background-size: 24px 24px; border: 0; z-index: 1; cursor: pointer; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .commentContainer h3 { font-weight: bold; } .commentContainer .prompt { background: #fff8dc; border: solid 1px #ffe476; padding: 16px; padding: 1rem; color: black; } .commentContainer .privacyNote { font-size: 12px; color: #999; font-style: oblique; } .commentContainer .commentForm { margin: 10px 0 40px 0; padding-top: 10px; border-top: solid 1px #ddd; overflow: hidden; } .commentContainer .commentForm button { float: right; } .commentContainer .commentForm .toolboxInput { padding-bottom: 10px; } .commentContainer .commentForm.withPrompt { border: 0; margin-top: 0; } .commentContainer ul.comments { margin: 0; padding: 0; max-height: 600px; overflow-y: auto; } .commentContainer ul.comments li { list-style: none; } .commentContainer ul.comments li.comment { border-top: solid 1px #ddd; padding: 10px 0; } .commentContainer ul.comments li.comment a.author { display: block; font-size: 14px; line-height: 20px; text-decoration: none; } .commentContainer ul.comments li.comment a.author img, .commentContainer ul.comments li.comment a.author em { vertical-align: middle; } .commentContainer ul.comments li.comment a.author img { width: 20px; height: 20px; border-radius: 50%; } .commentContainer ul.comments li.comment a.author em { color: #666; font-style: normal; } .commentContainer ul.comments li.comment p { background-color: #fbfbfb; border-left: thick solid #edece6; margin: 10px 0; padding: 10px 10px; font-size: 14px; } .commentContainer ul.comments li.comment em.time { display: block; font-size: 12px; color: #bbb; } .commentContainer div.empty { position: absolute; top: 150px; bottom: 0; left: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; pointer-events: none; } .commentDialog { max-width: 600px; height: 80%; } @charset "UTF-8"; /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .resource-with-content-container { position: relative; margin-top: 64px; margin-top: 4rem; margin-bottom: 64px; margin-bottom: 4rem; } .resource-with-content-container div.meta button, .resource-with-content-container div.interact button { height: 96px; height: 6rem; font-weight: 900; margin-bottom: 16px; margin-bottom: 1rem; } .resource-with-content-container div.meta button.award-badge.awardable { background: #5d5d5d; } @media only screen and (max-width: 768px) { .resource-with-content-container div.meta { background: #e7e7e7; padding: 40px; } .resource-with-content-container div.meta button.discussion { color: #ff4133 !important; background-color: white !important; border: 1px solid #ff4133; } } .resource-with-content-container div.meta .assessorUnclaim { font-style: italic; line-height: 1.2em; margin-top: 40px; } .resource-with-content-container div.meta .assessorUnclaim a { cursor: pointer; font-style: italic; line-height: 1.2em; } .customPage { max-width: 900px; margin: 2em auto 0; } .customPage h2 { margin: 0.25em 0 0.25em; text-transform: uppercase; } .customPage .customPage__content p, .customPage .customPage__content li, .customPage .customPage__content em, .customPage .customPage__content strong, .customPage .customPage__content .inner { line-height: 1.75; } .customPage .customPage__content ul, .customPage .customPage__content ol { margin: .5em 2em; } .customPage .customPage__content blockquote { font-size: 1.3em; font-style: italic; color: #217ded; margin: 2em 0; text-align: center; } .customPage .customPage__content blockquote::before { content: "\201C"; } .customPage .customPage__content blockquote::after { content: "\201D"; } .customPage .customPage__content figure img { width: 100%; margin: 2em 0 1em; } .customPage .customPage__content figcaption { font-size: .85em; text-align: center; } .customPage .customPage__content iframe { width: 100%; height: 440px !important; margin: 32px 0; margin: 2rem 0; background: white url("/images/arrows/caret-white-right.png") no-repeat center center; } .customPage .customPage__content p { margin-bottom: 1em; } .interact__submit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } .interact__submitBtn--bottom { height: 200px; margin-top: 40px; min-width: 320px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .resource-with-content-container .resource-content-block div.objectives { overflow: hidden; margin-top: 20px; } .resource-with-content-container .resource-content-block div.objectives div { float: left; width: 73%; } @media only screen and (max-width: 414px) { .resource-with-content-container .resource-content-block div.objectives div { width: 100%; } } .resource-with-content-container .resource-content-block div.objectives div:first-child { width: 25%; margin-right: 2%; } @media only screen and (max-width: 414px) { .resource-with-content-container .resource-content-block div.objectives div:first-child { display: none; } } .resource-with-content-container .resource-content-block div.objectives div img { margin-top: 20px; } .resource-with-content-container .resource-content-block div.objectives div.objectives { width: 100%; } .resource-with-content-container .resource-content-block div.objectives div.row { width: 100%; } .resource-with-content-container .resource-content-block div.objectives div.row img { padding: 0 !important; } .resource-with-content-container .resource-content-block div.objectives em { display: block; clear: left; padding-top: 10px; } .resource-with-content-container .resource-content-block div.objectives > ol { float: left; width: 73%; } .resource-with-content-container .resource-content-block ul p, .resource-with-content-container .resource-content-block ol p { margin: 0; } .resource-with-content-container h2 { margin-top: 32px; margin-top: 2rem; } .resource-with-content-container h4 { margin-top: 16px; margin-top: 1rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.page-spinner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } div.page-spinner .spinner { zoom: 3; opacity: 0.25; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .authOverlay { font-family: "Metropolis", Arial, Helvetica, sans-serif; position: absolute; top: 0; height: 100%; width: 100%; margin-top: 0px; } @media only screen and (max-width: 568px) { .authOverlay h2 { font-size: 20px; } } .authOverlay__darkness { position: absolute; width: 100%; height: 100%; background: #4a4a4a; mix-blend-mode: multiply; z-index: 1; } .authOverlay__intro { margin-bottom: 40px; } .authOverlay__container { position: relative; margin-top: 120px; padding-top: 120px; z-index: 2; } @media only screen and (max-width: 1024px) { .authOverlay__container { margin-left: 80px; margin-right: 80px; } } @media only screen and (max-width: 568px) { .authOverlay__container { margin-left: 20px; margin-right: 20px; margin-top: 0; padding-top: 60px; } } .authOverlay__content { max-width: 66.66667%; font-size: 20px; color: #fff; } @media only screen and (max-width: 1024px) { .authOverlay__content { max-width: inherit; } } @media only screen and (max-width: 568px) { .authOverlay__content { font-size: 18px; } } .authOverlay__content a { color: #fff; text-decoration: underline; } .authOverlay__content .toolboxCheckbox { height: 28px; line-height: 28px; } .authOverlay__content .toolboxCheckbox div[data-react-toolbox=check] { height: 28px; width: 28px; border-radius: 3px; border-color: #fff; background: 0 !important; } .authOverlay__content .toolboxCheckbox div[data-react-toolbox=check]:after { -webkit-transform: scale(1.4) rotate(45deg); transform: scale(1.4) rotate(45deg); margin-top: 3px; margin-left: 4px; } .authOverlay__content .toolboxCheckbox span[data-react-toolbox=label] { color: #fff; font-size: 20px; line-height: 28px; } @media only screen and (max-width: 568px) { .authOverlay__content .toolboxCheckbox span[data-react-toolbox=label] { white-space: normal; font-size: 18px; line-height: 20px; } } .authOverlay__content .toolboxCheckbox span[data-react-toolbox=ripple] { display: none; } .authOverlay__content .toolboxButton, .authOverlay__content .toolboxButtonSecondary { display: inline-block; font-size: 20px; height: 48px; min-width: 200px; margin-right: 20px; } .authOverlay__content .toolboxButton:disabled, .authOverlay__content .toolboxButtonSecondary:disabled { background: 0 !important; color: #888 !important; border: solid 1px #888; } @media only screen and (max-width: 568px) { .authOverlay__content .toolboxButton, .authOverlay__content .toolboxButtonSecondary { display: block; width: 100%; margin-bottom: 10px; padding: 0 !important; } } .authOverlay__form .toolboxInput { padding-bottom: 10px; } .authOverlay__form .toolboxInput input, .authOverlay__form .toolboxInput label { font-size: 32px; font-weight: bold; color: #fff !important; } @media only screen and (max-width: 568px) { .authOverlay__form .toolboxInput input, .authOverlay__form .toolboxInput label { font-size: 20px; } } .authOverlay__form .toolboxInput input { border-color: #fff; border-width: 2px; padding: 6px 0; } .authOverlay__form .toolboxInput input ~ span { display: none; } .authOverlay__form p { margin-top: 40px; } .authOverlay__required { color: #ff4133; } @media only screen and (max-width: 568px) { .authOverlay__required { font-size: 12px; } } .authOverlay__social, .authOverlay__termsOfService { margin-top: 40px; } @media only screen and (max-width: 568px) { .authOverlay__social, .authOverlay__termsOfService { margin-top: 20px; } } .authOverlay__close { position: absolute; top: 0; right: 16.66667%; margin-right: -42px; background-color: inherit; border: none; cursor: pointer; padding: 10px; } @media only screen and (max-width: 1024px) { .authOverlay__close { right: 18px; } } .authOverlay__action { margin-top: 40px; } .authOverlay__error h2 { margin-bottom: 40px; } a.authOverlay__link--bold { display: inline-block; margin-top: 10px; color: #ff4133; text-decoration: none; font-weight: bold; } .authOverlay__alternative { margin-top: 20px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxBanner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; background: linear-gradient(90deg, #217ded, #26d7b2); position: relative; border: none; width: 100%; overflow: hidden; height: 52px; } @media only screen and (min-width: 569px) { .toolboxBanner { height: 193px; } .toolboxBanner .toolboxBanner__img { width: auto; width: initial; position: relative; top: inherit; left: inherit; } } .toolboxBanner__img { height: inherit; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxHeader { display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 1px solid #dde2e6; border-bottom: 1px solid #dde2e6; } @media only screen and (min-width: 569px) { .toolboxHeader { display: block; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxLayout { margin-top: 20px; } @media only screen and (max-width: 1024px) { .toolboxLayout { padding: 0 10px; } } @media only screen and (max-width: 414px) { .toolboxLayout { margin-top: 0; } } .toolboxLayout main { padding-right: 40px; } @media only screen and (max-width: 1024px) { .toolboxLayout main { padding-right: 0; } } .toolboxLayout.wireframe * { border: none; outline: 2px solid black; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxSidebar { padding-left: 40px; border-left: 2px solid #8d97a0; } @media only screen and (max-width: 1024px) { .toolboxSidebar { padding-left: 0; border-left: 0; padding-top: 40px; border-top: 2px solid #8d97a0; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxSidebarSection { margin: 20px 0; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxSearchGroup__search { margin-bottom: 20px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .badgeAssertion__printButton { margin-right: 10px; } .badgeAssertion__shareButton { display: inline-block; margin-left: 10px; height: 36px; width: 80px; vertical-align: middle; } .badgeAssertion__shareButton .toolboxIconPanel__button { width: 100px; } .badgeAssertion__iconPanelContainer { width: 75px; } .badgeAssertion__containerIcon { display: inline-block; margin: 0 5px; } .badgeAssertion__containerIcon a { display: inline-block; } .badgeAssertion__evidenceButton { margin-top: 10px; } .badgeAssertion__downloadButton { margin-top: 20px; } .badgeAssertion__sidebar { margin-top: 40px; max-width: 300px; } .badgeAssertion__issuanceContent { margin: 20px 0; } .badgeAssertion__issuanceElement { margin: 27px 0; } .badgeDetails.print .badgeAssertion__sidebar { margin-top: 0px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .badgeDetails .breadcrumbs { margin-left: 50px; } .badge__main { margin-top: 30px; padding-left: 60px; } .badgeAssertion__description { max-width: 600px; } .badge__imgBox { border: 1px solid #4a4a4a; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; float: none; width: 180px; height: 180px; } .badge__imgBox img { max-width: 160px; max-height: 160px; } @media only screen and (max-width: 568px) { .badge__imgBox { padding: 10px; width: 80px; height: 80px; } .badge__imgBox img { max-width: 60px; max-height: 60px; } } .badgeDetails__description, .badgeDetails__criteria, .badgeDetails__hours { margin: 30px 0; } .badgeDetails__info { margin-top: 10px; } .badge__editButton { margin: 20px 0 10px 0; } .badgeDetails.print.newHeadings h1 { font-size: 24px; } .badgeDetails.print.newHeadings h5 { font-size: 12px; } .badgeDetails.print .toolboxSidebar { padding: 0 20px; } .badgeDetails.print .toolboxLayout { margin-top: 0px; } .badgeDetails.print .badgeHeader { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 2px solid #8d97a0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 10px 20px; padding-bottom: 10px; } .badgeDetails.print .badge__main { margin-top: 0px; padding-left: 20px; } .badgeDetails.print .badge__titleRow { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .badgeDetails.print .badge__imgBox { padding: 10px; width: 120px; height: 120px; } .badgeDetails.print .badge__imgBox img { max-width: 100px; max-height: 100px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .badgeAssertion { margin-top: 32px; margin-top: 2rem; padding: 32px; padding: 2rem; background: #fff8dc; border: solid 1px #ffe476; box-shadow: 0 2px 5px rgba(33, 33, 33, .1); display: -webkit-box; display: -ms-flexbox; display: flex; } .badgeAssertion__artifact, .badgeAssertion__issuer { margin: 16px 0 0 0; margin: 1rem 0 0 0; } .badgeAssertion__image { max-width: 75px; max-height: 75px; margin-right: 32px; margin-right: 2rem; } .image__iconCheck { display: block; font-size: 48px; font-size: 3rem; margin: 16px 32px 0 0; margin: 1rem 2rem 0 0; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.badge-index { margin-top: 64px; margin-top: 4rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .blog-index-page .blog-preview--featured, .blog-post-page .blog-preview--featured { *zoom: 1; } .blog-index-page .blog-preview--featured:before, .blog-index-page .blog-preview--featured:after, .blog-post-page .blog-preview--featured:before, .blog-post-page .blog-preview--featured:after { display: table; content: ""; line-height: 0; } .blog-index-page .blog-preview--featured:after, .blog-post-page .blog-preview--featured:after { clear: both; } @media only screen and (min-width: 569px) { .blog-index-page .blog-preview--featured .blog-preview__media, .blog-post-page .blog-preview--featured .blog-preview__media { display: inline-block; width: 65%; float: left; } } .blog-index-page .blog-preview--featured .blog-preview__content, .blog-post-page .blog-preview--featured .blog-preview__content { display: inline-block; } @media only screen and (min-width: 569px) { .blog-index-page .blog-preview--featured .blog-preview__content, .blog-post-page .blog-preview--featured .blog-preview__content { width: 35%; padding: 0 1em; } } .blog-index-page .blog-preview__image, .blog-post-page .blog-preview__image { height: 480px; background-size: cover; background-position: center center; } @media only screen and (max-width: 1024px) { .blog-index-page .blog-preview__image, .blog-post-page .blog-preview__image { height: 360px; } } @media only screen and (max-width: 568px) { .blog-index-page .blog-preview__image, .blog-post-page .blog-preview__image { height: 250px !important; } } .blog-index-page .tier2 .blog-preview__image, .blog-post-page .tier2 .blog-preview__image { height: 360px; } @media only screen and (max-width: 1024px) { .blog-index-page .tier2 .blog-preview__image, .blog-post-page .tier2 .blog-preview__image { height: 250px; } } .blog-index-page .tier3 .blog-preview__image, .blog-post-page .tier3 .blog-preview__image { height: 250px; } @media only screen and (max-width: 1024px) { .blog-index-page .tier3 .blog-preview__image, .blog-post-page .tier3 .blog-preview__image { height: 150px; } } .blog-index-page .blog-preview__content, .blog-post-page .blog-preview__content { padding-top: 1em; } .blog-index-page .blog-preview__content p, .blog-post-page .blog-preview__content p { color: #4a4a4a; } .blog-index-page .blog-preview__category, .blog-post-page .blog-preview__category { font-size: .85em; color: #4a4a4a; } .blog-index-page .blog-preview__category a:after, .blog-post-page .blog-preview__category a:after { content: ", "; } .blog-index-page .blog-preview__category a:last-child:after, .blog-post-page .blog-preview__category a:last-child:after { content: ""; } .blog-index-page .blog-preview__title, .blog-post-page .blog-preview__title { margin: 0.5em 0 1em; text-transform: uppercase; } .blog-index-page .blog-preview__moreLink, .blog-post-page .blog-preview__moreLink { display: block; margin-top: 1em; color: #217ded; } .blog-index-page .blog-preview__moreLink:after, .blog-post-page .blog-preview__moreLink:after { content: "> >"; margin-left: .5em; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .blog-index-page .blog { margin-top: 2em; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .social-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .social-container span { color: gray; margin: 10px; } .social-container a { margin: 10px 17px; } .social-container a img { max-height: 40px; } @charset "UTF-8"; /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .blog-post-page .blogPost__block { margin: 2em 0 0; } .blog-post-page .blogPost__block > .wrapper { padding: 0; } .blog-post-page .blogPost__block p { margin-bottom: 1em; } .blog-post-page .blogPost { max-width: 900px; margin: 2em auto 0; } .blog-post-page .blogPost__title { margin: 0.25em 0 0.25em; text-transform: uppercase; } .blog-post-page .blogPost__sectionTitle, .blog-post-page h2 { margin-bottom: .5em; } .blog-post-page .blogPost__header { margin-bottom: 1em; } .blog-post-page .blogPost__headerImage { width: 100%; margin-bottom: 2em; } .blog-post-page .blogPost__category { font-size: .85em; color: #4a4a4a; } .blog-post-page .blogPost__category a:after { content: ", "; } .blog-post-page .blogPost__category a:last-child:after { content: ""; } .blog-post-page .blogPost__categoryOne { color: #4a4a4a; } .blog-post-page .blogPost__categoryTwo::before { content: "\203A"; margin: 0 .25em; font-size: 1.25em; line-height: 1; } .blog-post-page .blogPost__author { font-weight: 700; line-height: 1.5; } .blog-post-page .blogPost__meta { margin-top: 32px; margin-top: 2rem; } .blog-post-page .blogPost__more { margin-top: 64px; margin-top: 4rem; } .blog-post-page .blogPost__more h2.header { font-size: 2em; margin-bottom: 64px; margin-bottom: 4rem; text-transform: uppercase; } .blog-post-page .blogPost__back { margin-top: 12px; } .blog-post-page .blogPost__content p, .blog-post-page .blogPost__content li, .blog-post-page .blogPost__content em, .blog-post-page .blogPost__content strong, .blog-post-page .blogPost__content .inner { line-height: 1.75; } .blog-post-page .blogPost__content ul, .blog-post-page .blogPost__content ol { margin: .5em 2em; } .blog-post-page .blogPost__content blockquote { font-size: 1.3em; font-style: italic; color: #217ded; margin: 2em 0; text-align: center; } .blog-post-page .blogPost__content blockquote::before { content: "\201C"; } .blog-post-page .blogPost__content blockquote::after { content: "\201D"; } .blog-post-page .blogPost__content figure img { width: 100%; margin: 2em 0 1em; } .blog-post-page .blogPost__content figcaption { font-size: .85em; text-align: center; } .blog-post-page .blogPost__content iframe { width: 100%; height: 440px !important; margin: 32px 0; margin: 2rem 0; background: white url("/images/arrows/caret-white-right.png") no-repeat center center; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatMobileHeader { display: none; height: 60px; background: linear-gradient(90deg, #4288e8, #68d8bc); } @media only screen and (max-width: 736px) { .chatMobileHeader { display: block; } } .chatMobileHeader .toolboxIconMenu, .chatMobileHeader > a { display: block; float: left; width: 16.66%; height: 60px; } .chatMobileHeader .toolboxIconMenu.selected, .chatMobileHeader > a.selected { background: black; } .chatMobileHeader .toolboxIconMenu button, .chatMobileHeader .toolboxIconMenu button svg { width: 100%; height: 60px; } .chatMobileHeader .toolboxIconMenu button svg { padding: 15px; } .chatMobileHeader .toolboxIconMenu div[data-react-toolbox="menu"] { top: 60px; } .chatMobileHeader > a svg { width: 100%; height: 60px; padding: 15px; } .chatMobileHeader > a.notifications { position: relative; } .chatMobileHeader > a.notifications.unread:after { position: absolute; top: 33%; right: 33%; content: " "; background: #ff4133; width: 9px; height: 9px; border-radius: 50%; } .chatMobileHeader.showing--chat a.chat, .chatMobileHeader.showing--resources a.resources, .chatMobileHeader.showing--participants a.participants, .chatMobileHeader.showing--share a.share, .chatMobileHeader.showing--notifications a.notifications { background: #227397; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .tool-tip-link { display: block; line-height: 25.6px; line-height: 1.6rem; opacity: 1 !important; vertical-align: center; } .tool-tip-link > abbr { text-transform: none; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatCardGroup { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; position: relative; } @media only screen and (max-width: 736px) { .chatCardGroup { display: block; } } .chatCardGroup__blurredBackground { background: rgba(255, 255, 255, .85); position: absolute; top: 0; bottom: 0; left: 0; right: 0; transition: all 0.3s ease; } .chatCard { *zoom: 1; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; width: 100%; position: relative; margin: 20px 10px 0 10px; cursor: pointer; } .chatCard:before, .chatCard:after { display: table; content: ""; line-height: 0; } .chatCard:after { clear: both; } @media only screen and (max-width: 736px) { .chatCard { margin: 20px; width: inherit; } } @media only screen and (min-width: 769px) { .chatCard { width: 45%; } } @media only screen and (min-width: 1201px) { .chatCard { width: 30%; max-width: 30%; } } @media only screen and (max-width: 736px) { .chatCard { width: 100%; margin-left: 0; margin-right: 0; } } .chatCard--active { z-index: 100; } .chatCard--active .chatCard__inner { border-color: #ff4133; } .chatCard__inner { display: -webkit-box; display: -ms-flexbox; display: flex; border: 1px solid #3a4674; } .chatCard__inner:hover, .chatCard__inner:focus { border: 1px solid #ff4133; } .chatCard__inner--noEvents .chatCard__divider { display: none; } .chatCard__inner--noEvents .chatCard__dateTime { padding: 7px 0; } .chatCard__inner--noEvents .chatCard__dateTime .chatCard__time { position: relative; top: 1px; } .chatCard__dateTime { font-weight: 700; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #3a4674; color: #ecf3fb; margin: .15em; padding: 0 7px; min-height: 60px; max-height: 62px; width: 26%; min-width: 60px; text-align: center; text-transform: uppercase; overflow-y: hidden; } .chatCard__time { padding: 3.5px 0; } .chatCard__slowImage { margin-top: 10px; } .chatCard__divider { margin: 0 -7px; height: 1px; background-color: #26d7b2; } .chatCard__date { font-size: 12px; padding: 3.5px 0; white-space: nowrap; } .chatCard__details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; padding: 7px; width: 74%; } .chatCard__title { display: inline-block; font-weight: 800; margin-right: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #3a4674; } .chatCard__topic { font-size: 12px; text-transform: uppercase; color: #3a4674; text-align: right; max-height: 2.25em; overflow: hidden; } .chatCard__action { position: absolute; bottom: 0; right: 7px; cursor: pointer; } .chatCard__action svg:hover, .chatCard__action svg:focus { opacity: .7; } .chatCard__analytics { display: -webkit-box; display: -ms-flexbox; display: flex; } .chatCard__analyticItem { font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 3.5px 10px 0 0; color: #3a4674; } .chatCard__icon { margin-left: 1.75px; } .chatCard__buttons { margin-bottom: 20px; } .chatCard__button { margin-bottom: 10px; display: block; width: 100%; max-width: 150px; } .chatCard__info { font-size: 12px; background-color: #ecf3fb; z-index: 100; position: absolute; width: 100%; margin-top: 10px; padding: 28px 14px 14px; cursor: default; } .chatCard__info p { margin-bottom: 20px; } .chatCard__info a { color: #ff4133; } .chatCard__closeIcon { position: absolute; right: 3.5px; top: 3.5px; cursor: pointer; } .chatCard__recommendations { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 20px; } .chatCard__recommendationIcon { margin-right: 10px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chat-browse__pagination { font-family: "Metropolis", Arial, Helvetica, sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 20px 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .chat-browse__pageNumber, .chat-browse__pageNumber--active { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; color: #4a4a4a; font-weight: 700; border: 2px solid #8d97a0; margin: 0 5px; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; } .chat-browse__pageNumber:hover, .chat-browse__pageNumber--active:hover { border-color: #ff4133; } .chat-browse__pageNumber--active { color: #fff; border-color: #ff4133; background-color: #ff4133; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatCategory { font-family: "Metropolis", Arial, Helvetica, sans-serif; } .chatCategory .container { margin-top: 40px; } @media only screen and (max-width: 736px) { .chatCategory .container { margin-top: 20px; width: 100%; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.product-purchase-form { width: auto; max-width: 480px; } div.product-purchase-form header { margin-bottom: 32px; margin-bottom: 2rem; padding: 16px; padding: 1rem; } div.product-purchase-form header h2 { margin-bottom: 0; font-size: 32px; font-size: 2rem; text-transform: uppercase; font-weight: 900; color: linear-gradient(90deg, #4288e8, #68d8bc); } div.product-purchase-form .coupon-code .coupon-spinner, div.product-purchase-form .coupon-code .coupon-status { position: absolute; right: 8px; right: 0.5rem; top: 41.6px; top: 2.6rem; } div.product-purchase-form .coupon-code .coupon-spinner { zoom: 0.4; } div.product-purchase-form .coupon-code .coupon-status { display: block; right: 8px; right: 0.5rem; top: 44.8px; top: 2.8rem; } div.product-purchase-form .coupon-code .coupon-status.coupon-success { color: #217ded; right: 12px; right: 0.75rem; } div.product-purchase-form .coupon-code .coupon-status.coupon-error { color: red; } div.product-purchase-form .coupon-code .coupon-status i { display: inline-block; font-size: 35.2px; font-size: 2.2rem; width: 36.8px; width: 2.3rem; } div.product-purchase-form aside.safe { margin: 0 32px 32px 32px; margin: 0 2rem 2rem 2rem; } div.product-purchase-form aside.safe p { margin-left: 16px; margin-left: 1rem; font-family: "Merriweather", sans-serif; font-size: 20px; font-size: 1.25rem; color: #333; } div.product-purchase-form aside.safe img { margin-top: 4px; height: 40px; } div.product-purchase-form section.fields .pure-g > div:last-child div { margin-left: 32px; margin-left: 2rem; } div.product-purchase-form section.fields.free-with-coupon { opacity: 0.5; } div.product-purchase-form .payment-choice { position: relative; } div.product-purchase-form .payment-choice section { text-align: center; padding-bottom: 32px; padding-bottom: 2rem; margin-bottom: 32px; margin-bottom: 2rem; } div.product-purchase-form .payment-choice section.stored-payment { background: #e7e7e7; padding: 32px; padding: 2rem; } div.product-purchase-form .payment-choice section.stored-payment input { background: white; } div.product-purchase-form .payment-choice section.stored-payment span.description { display: block; text-align: left; margin-left: 76.8px; margin-left: 4.8rem; } div.product-purchase-form .payment-choice section.stored-payment.free-with-coupon .credit-card { opacity: 0.5; } div.product-purchase-form .payment-choice section.another-payment p { margin: 16px 0; margin: 1rem 0; } div.product-purchase-form .payment-choice aside.or { text-align: center; font-size: 32px; font-size: 2rem; font-family: "Merriweather", sans-serif; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ a.product-preview { position: relative; display: block; overflow: hidden; box-shadow: 0px 1px 2px rgba(0, 0, 0, .28); height: 296px; height: 18.5rem; margin-bottom: 20px; } a.product-preview:hover { background: #fff8dc; } a.product-preview span.title, a.product-preview hr, a.product-preview span.image, a.product-preview span.description { position: absolute; display: block; overflow: hidden; } a.product-preview span.title { top: 16px; top: 1rem; left: 16px; left: 1rem; right: 16px; right: 1rem; font-size: 25.6px; font-size: 1.6rem; font-weight: bold; line-height: 32px !important; line-height: 2rem !important; height: 2.5em; } a.product-preview hr { left: 16px; left: 1rem; right: 16px; right: 1rem; top: 64px; top: 4rem; color: #e7e7e7; } a.product-preview span.image, a.product-preview span.description { top: 112px; top: 7rem; bottom: 16px; bottom: 1rem; } a.product-preview span.image { left: 16px; left: 1rem; width: 168px; width: 10.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } a.product-preview span.image img { max-width: 100%; max-height: 100%; } a.product-preview span.description { left: 200px; left: 12.5rem; right: 16px; right: 1rem; height: 168px; height: 10.5rem; color: #777; font-size: 22.4px; font-size: 1.4rem; } a.product-preview span.description, a.product-preview span.description span, a.product-preview span.description br { line-height: 1.25 !important; } a.product-preview span.description.focused { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } a.product-preview span.description.focused span { display: block; } a.product-preview span.description.focused span.primary { font-size: 1.25em; font-weight: bold; } a.product-preview aside.status { position: absolute; left: 200px; left: 12.5rem; right: 16px; right: 1rem; bottom: 16px; bottom: 1rem; color: #717171; text-align: center; padding: 5px 0; background: #e7e7e7; font-size: 22.4px; font-size: 1.4rem; font-weight: bold; } a.product-preview.with-status span.description { height: 112px; height: 7rem; } a.product-preview.no-image span.description { left: 16px; left: 1rem; } a.product-preview.no-hover:hover { background: 0; } a.product-preview span.description { color: #333; } a.product-preview aside.status { background: #217ded; color: white; font-weight: 900; } a.product-preview.purchased { background: white !important; } a.product-preview.purchased:hover { background: #fff8dc !important; } a.product-preview.purchased aside.status { background: #e7e7e7; color: #717171; } div.product-preview-button button.purchased { background: #5d5d5d !important; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .avatarWrapper { display: inline-block; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatParticipants { padding: 0 10px; } .chatParticipants h3 { padding-left: 20px; } .chatParticipants--darkBackground .chatParticipant .chatParticipant--follow { border-color: white; background-color: white; } @media only screen and (max-width: 736px) { .chatParticipants--darkBackground .chatParticipant .chatParticipant--follow { border-color: #ff4133; } } .chatParticipants--darkBackground .chatParticipant .chatParticipant--handle { color: white; font-size: 14px; line-height: 14px; font-family: "Metropolis", Arial, Helvetica, sans-serif; font-weight: 600; } @media only screen and (max-width: 736px) { .chatParticipants--darkBackground .chatParticipant .chatParticipant--handle { color: #333; } } ul.chat-moderators { margin: 0; padding: 0; overflow-y: hidden; overflow: hidden; } ul.chat-moderators li { list-style: none; } ul.chat-moderators li { float: left; } ul.chat-moderators li { margin: 0 4px 4px 0; } ul.chat-moderators li a { text-decoration: none; position: relative; display: inline-block; width: 36px; height: 36px; } ul.chat-moderators li a.registered:after { content: ' '; background: image-url("avatar-badge.png"); width: 16px; height: 16px; background-size: 16px 16px; position: absolute; top: -2px; left: 26px; } ul.chat-moderators li a span.name { display: none; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatDetails > .container { font-family: "Metropolis", Arial, Helvetica, sans-serif; margin-top: 40px; } @media only screen and (max-width: 736px) { .chatDetails > .container { margin-top: 20px; } } .chatDetails__title { color: #217ded; margin-bottom: 20px; } .chatDetails__sectionTitle { font-size: 18px; font-weight: 800; text-transform: uppercase; color: #3a4674; display: inline-block; margin-right: 10px; } .chatDetails__description { margin-bottom: 20px; } .chatDetails__join { margin-top: 20px; margin-right: 20px; } .chatDetails__save { margin-top: 20px; } .chatDetails__subscribe { color: #ff4133; margin-left: 20px; } .chatDetails__analytics { margin-bottom: 40px; } .chatDetails__analyticItem { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 10px; color: #4a4a4a; } .chatDetails__icon { margin-right: 10px; } .chatDetails { /* ===== EDITING ===== */ } .chatDetails a.product-preview { margin-top: 32px; margin-top: 2rem; background: #f2f2f2; } .chatDetails a.product-preview:hover { background: #fff8dc; } .chatDetails .banner .back { font-size: 14px; } .chatDetails .banner .back a { color: white; text-decoration: none; } .chatDetails .banner .back a:hover { text-decoration: underline; } .chatDetails.editable div.description { position: relative; padding-right: 20px; } .chatDetails.editable div.description a.inline-edit { position: absolute; top: 0; right: 0; } .chatDetails.editable section.moderators { position: relative; } .chatDetails.editable section.moderators a.inline-edit { position: absolute; top: 0; right: 0; } @media only screen and (max-width: 736px) { .chatDetails .banner-toolbar { height: 50px; } .chatDetails .banner-toolbar .toolbar-actions-left { margin-top: 0 !important; } .chatDetails .banner-toolbar h2 { display: none; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .exploreCardGroup { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; position: relative; } @media only screen and (max-width: 736px) { .exploreCardGroup { display: block; } } .exploreCard { *zoom: 1; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; width: 100%; position: relative; margin: 20px 10px 0 10px; cursor: pointer; border: 1px solid #ff4133; -ms-flex-preferred-size: 30%; flex-basis: 30%; margin-top: 30px; } .exploreCard:before, .exploreCard:after { display: table; content: ""; line-height: 0; } .exploreCard:after { clear: both; } @media only screen and (max-width: 736px) { .exploreCard { margin: 20px; width: inherit; } } @media only screen and (min-width: 769px) { .exploreCard { width: 45%; } } @media only screen and (min-width: 1201px) { .exploreCard { width: 30%; max-width: 30%; } } .exploreCard__graphic { padding: 10px; text-align: center; } @media only screen and (max-width: 736px) { .exploreCard__graphic { margin: 0 5%; padding: 0; width: 90%; } } @media only screen and (max-width: 1200px) { .exploreCard__graphic { margin: 0 5%; padding: 0; width: 90%; } } .exploreCard__name { background-color: #ff4133; color: #fff; text-align: center; text-transform: uppercase; padding: 10px 0; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatSearch { margin-top: 10px; padding: 0 20px 20px; margin-bottom: 40px; background-color: #ecf3fb; } @media only screen and (max-width: 736px) { .chatSearch { background-color: white; } } .chatSearch__cardGroup { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; } @media only screen and (max-width: 736px) { .chatSearch__cardGroup { display: block; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ @media only screen and (max-width: 736px) { .chatExplore, .chatCategory, .chatDetails { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .chatExplore .navbar, .chatExplore > .container, .chatCategory .navbar, .chatCategory > .container, .chatDetails .navbar, .chatDetails > .container { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .chatExplore > .container, .chatCategory > .container, .chatDetails > .container { overflow-y: auto; } } @media only screen and (max-width: 1200px) { .chatExplore, .chatCategory, .chatDetails { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .chatExplore .navbar, .chatCategory .navbar, .chatDetails .navbar { height: 50px; } .chatExplore > .container, .chatCategory > .container, .chatDetails > .container { overflow-y: auto; } } @media only screen and (max-width: 736px) { .chatExplore__searchHeader { margin-bottom: 0 !important; } } .chatExplore__searchForm { margin-top: 40px; text-align: center; } @media only screen and (max-width: 736px) { .chatExplore__searchForm { margin-left: 10px; margin-right: 10px; text-align: left; } } .chatExplore__searchInput { font-size: 18px; border: 0; border-bottom: 1px solid #8d97a0; padding: 10px 40px 10px 10px; width: 330px; } .chatExplore__searchInput::-webkit-input-placeholder { color: #217ded; } .chatExplore__searchInput::-moz-placeholder { color: #217ded; } .chatExplore__searchInput:-ms-input-placeholder { color: #217ded; } .chatExplore__searchInput:-moz-placeholder { color: #217ded; } @media only screen and (max-width: 736px) { .chatExplore__searchInput { width: 100%; } } .chatExplore__searchIcon { margin: 0 0 -5px -40px; } .chatExplore__main { padding-right: 40px; border-right: 1px solid #c5cace; } @media only screen and (max-width: 736px) { .chatExplore__main { padding: 0; border: 0; } } @media only screen and (max-width: 1200px) { .chatExplore__main { padding: 0; border: 0; } } .chatExplore__sidebar { padding-left: 40px; } .chatExplore__sidebar .chatExplore__sectionTitle { margin-bottom: 10px; } .chatExplore__sectionTitle { font-size: 18px; font-weight: 800; text-transform: uppercase; color: #3a4674; display: inline-block; padding: 0; } @media only screen and (max-width: 736px) { .chatExplore__sectionTitle { text-transform: none; text-align: center; margin-top: 20px; } } @media only screen and (max-width: 1200px) { .chatExplore__sectionTitle { text-transform: none; margin-top: 20px; } } .chatExplore__sectionTitle--inactive { font-weight: 500; color: #8d97a0; cursor: pointer; } .chatExplore__sectionTitle--inactive:hover, .chatExplore__sectionTitle--inactive:focus { color: #66717a; } .chatExplore__sectionFilter div:first-of-type { margin: 0; } .chatExplore__sectionFilter .chatExplore__sectionTitle { display: inline-block; margin-left: 20px; } .chatExplore__section { margin-bottom: 40px; } @media only screen and (max-width: 736px) { .chatExplore__section { margin-bottom: 10px; } } .chatExplore__chatLink { font-size: 18px; font-weight: 700; color: #8d97a0; display: block; margin-bottom: 10px; } .chatExplore__chatLink:hover, .chatExplore__chatLink:focus { color: #66717a; } .chatExplore__sectionSubFilter { margin: 10px 0 10px 10px; } .chatExplore__subFilter { margin-right: 20px; color: #8d97a0; } .chatExplore__subFilter.is--active { font-weight: 800; color: #3a4674; } .chatExplore__subFilter:hover, .chatExplore__subFilter:focus { color: #66717a; cursor: pointer; } .chatExplore__subFilter.is--active:hover { cursor: default; } .chatExplore__subFilter--note { font-size: 12px; color: #8d97a0; margin-top: 10px; } .chat--back { color: #ff4133; font-weight: bold; margin-bottom: 20px; margin-top: 20px; } .chat--back.inactive { display: none; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .daySeparator { font-size: 16px; color: #223057; margin: 20px 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .daySeparator__day { margin: auto; text-align: center; } .daySeparator__line { border-top: 1px solid #217ded; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .iconMenu { padding: 0; } .iconMenu .iconMenu__item { padding-top: 20px; padding-bottom: 20px; border-top: 1px solid #ecf3fb; background-color: inherit; } .iconMenu .iconMenu__item--first { border-top: none; } .iconMenu .iconMenu__item:hover { background-color: #ecf3fb; } .iconMenu .iconMenu__menuInner { min-width: 140px; padding: 0; } .iconMenu .iconMenu__menuInner .active { border-top: 1px solid #8d97a0; background-color: #ecf3fb; } .iconMenu .iconMenu__menuInner .active + li { border-top: 1px solid #8d97a0; } .iconMenu .iconMenu__outline { min-width: 140px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chat-message__mentions { padding: 3px 0 0 0; font-size: 12px; font-style: italic; color: #ff4133; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chat-message__quote { position: relative; margin: 5px 0; padding: 10px 0; } .chat-message__quote .chat-message.moderator { display: -webkit-box; display: -ms-flexbox; display: flex; } .chat-message__quoteSvg { width: 5px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: absolute; height: 95%; } .chat-message__quoteContent { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; list-style: none; text-align: left; } .chat-message__quoteLine { stroke: #8d97a0; stroke-width: 3px; stroke-linecap: round; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chat-message__media { margin: 10px 0; } .chat-message__image { max-height: 400px; max-width: 120px; border: 1px solid #dde2e6; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatMessage { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 48px; padding: 0 20px; margin-top: 20px; } .chatMessage__avatar { margin-right: 20px; } .chatMessage__avatar.chatMessage__avatar--moderator { margin-right: 0; margin-left: 20px; } .chatMessage__header { min-height: 28px; } .chatMessage__item { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; word-break: break-word; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .chatMessage__handle { font-size: 16px; font-weight: 600; } .chatMessage__handle--medium { font-size: 18px; font-weight: 600; } .chatMessage__time { font-size: 12px; font-style: italic; } .chatMessage__moderator { text-align: right; float: right; } .chatStream__messages .chatMessage__header { margin-top: -8px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatMessages__streamAction { background-color: #ecf3fb; padding: 20px 0; text-align: center; list-style: none; } @media only screen and (max-width: 736px) { .chatMessages__streamAction { padding: 0; height: 52px; line-height: 52px; } } .chatMessages__streamAction .chatMessages__button { color: #fff; background-color: #ff4133; border-radius: 3px; padding: 0 40px; text-transform: none; font-size: 12px; font-family: "Metropolis", Arial, Helvetica, sans-serif; font-weight: 700; height: 24px; line-height: 24px; } .chatMessages__loadPrevious { margin-top: 20px; } ul.chat-messages { margin: 0; padding: 0; } ul.chat-messages li { list-style: none; } ul.chat-messages li.chat-message { border-top: solid 1px #ddd; padding: 10px 0; } ul.chat-messages li.chat-message p { background-color: #fbfbfb; border-left: thick solid #edece6; margin: 10px 0; padding: 10px 10px; font-size: 14px; } ul.chat-messages .load-previous { margin-bottom: 10px; } @media only screen and (max-width: 414px) { ul.chat-messages .load-previous { text-align: center; margin-top: 10px; } } ul.chat-messages .load-next button { width: 300px; height: 60px; } ul.chat-messages .load-next button span { display: block; line-height: 1.333em; } ul.chat-messages .load-next button span.primary { font-size: 26.4px; font-size: 1.65rem; font-weight: bold; } ul.chat-messages .load-next button span.secondary { font-size: 20px; font-size: 1.25rem; text-transform: none; } ul.chat-messages li.chat-message { border-top: 0; } ul.chat-messages li.chat-message h4 { margin: 0 0 5px 0; font-size: 14px; line-height: 14px; } ul.chat-messages li.chat-message h4 a, ul.chat-messages li.chat-message h4 span { vertical-align: baseline; margin-right: 1px; } ul.chat-messages li.chat-message header, ul.chat-messages li.chat-message aside { float: left; margin-bottom: 5px; } ul.chat-messages li.chat-message article { clear: left; } ul.chat-messages li.chat-message a.avatar-sm { display: inline-block; height: 20px; position: relative; } ul.chat-messages li.chat-message a.avatar-sm img { margin-right: 5px; } ul.chat-messages li.chat-message a.avatar-sm.registered:after { content: " "; background: image-url("avatar-badge.png"); width: 10px; height: 10px; background-size: 10px 10px; position: absolute; top: -2px; left: 13px; } ul.chat-messages li.chat-message a.author, ul.chat-messages li.chat-message em.time, ul.chat-messages li.chat-message span.notification { display: inline-block; vertical-align: bottom; } ul.chat-messages li.chat-message a.author, ul.chat-messages li.chat-message span.notification { line-height: 14px; } ul.chat-messages li.chat-message a.author em, ul.chat-messages li.chat-message span.notification em { margin-left: 2px; vertical-align: inherit; } ul.chat-messages li.chat-message span.notification { font-size: 14px; color: #333; } ul.chat-messages li.chat-message a.tweet { display: none; position: relative; top: 3px; text-decoration: none; font-size: 16px; margin-right: 5px; } ul.chat-messages li.chat-message a.tweet.active { color: #ff5555; } ul.chat-messages li.chat-message .moderator-actions { margin-left: 10px; } ul.chat-messages li.chat-message .moderator-actions a.ban, ul.chat-messages li.chat-message .moderator-actions a.flag { color: #051e3d; } ul.chat-messages li.chat-message .moderator-actions a.ban:hover, ul.chat-messages li.chat-message .moderator-actions a.flag:hover { color: #db230a; } ul.chat-messages li.chat-message em.time { margin-left: 5px; margin-right: 10px; font-size: 12px; line-height: 12px; color: #bbb; } ul.chat-messages li.chat-message em { position: relative; bottom: 2px; } ul.chat-messages li.chat-message em i { margin-right: 5px; } ul.chat-messages li.chat-message span.imgs { display: block; overflow: hidden; } ul.chat-messages li.chat-message span.imgs a.img { display: block; float: left; margin: 10px 10px 0 0; } ul.chat-messages li.chat-message span.imgs a.img img { height: 200px; } ul.chat-messages li.chat-message span.message-plain { display: none; } ul.chat-messages li.chat-message .quoted-message { display: block; width: 300px; margin: 10px 0 0 0; padding: 10px; border: solid 1px #ddd; text-decoration: none; outline: none; } ul.chat-messages li.chat-message .quoted-message:hover { background: #f2f2f2; } ul.chat-messages li.chat-message .quoted-message .avatar-sm { display: block; margin-bottom: 10px; } ul.chat-messages li.chat-message .quoted-message .avatar-sm img { margin-right: 5px; } ul.chat-messages li.chat-message:hover a.tweet { display: inline; } ul.chat-messages li.chat-message .day-separator { margin: 10px 0 20px 0; padding: 20px; text-align: center; font-size: 20px; background: #e8f2f6; color: #333; } ul.chat-messages li.chat-message div.moderator em.moderator { display: block; margin: 2px 0 5px 23px; font-size: 12px; color: #898989; font-style: normal; } ul.chat-messages li.chat-message div.moderator p.content { border-left-color: #72b272; background: #e2f2e2; } ul.chat-messages li.chat-message div.chat-message { position: relative; } ul.chat-messages li.chat-message div.chat-message.notification a.avatar-sm, ul.chat-messages li.chat-message div.chat-message.notification a.tweet, ul.chat-messages li.chat-message div.chat-message.notification .moderator-actions { display: none; } ul.chat-messages li.chat-message div.chat-message.notification em.time { bottom: 0; } ul.chat-messages li.chat-message div.chat-message.notification p.content, ul.chat-messages li.chat-message div.chat-message.qa_question p.content { background: #fff8dc; border-color: #ffe476; } ul.chat-messages.hide-top-border li.chat-message:first-child { border-top: none; } /* ===== RESPONSIVE ===== */ html.touch ul.chat-messages li.chat-message a.tweet { position: absolute; display: block; font-size: 20px; top: 0; } html.touch ul.chat-messages li.chat-message a.tweet.reply { right: 80px; } html.touch ul.chat-messages li.chat-message a.tweet.retweet, html.touch ul.chat-messages li.chat-message a.tweet.edit { right: 40px; } html.touch ul.chat-messages li.chat-message a.tweet.like, html.touch ul.chat-messages li.chat-message a.tweet.cancel { right: 0px; } html.touch ul.chat-messages li.chat-message span.moderator-actions { display: none; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatSimpleDiscussion__form { margin: 10px 0 40px 0; padding-top: 10px; border-top: solid 1px #ddd; overflow: hidden; } .chatSimpleDiscussion__form button { float: right; } .chatSimpleDiscussion__form .toolboxInput { padding-bottom: 10px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* ===== CHAT FORM ===== */ /* all of the buttons needed to be nested due to css priority on the themes */ .chatStream__compose .chatMessage__container { height: 100px; } .chatStream__compose .chat-message { list-style: none; } .chatStream__compose .chatCompose__buttons { text-transform: none; } .chatStream__compose .chatCompose__buttons .chatCompose__cancel { border: 1px solid #ff4133; border-radius: 3px; color: #ff4133; float: right; font-size: 18px; font-weight: 700; margin-right: 10px; text-transform: none; } .chatStream__compose .chatCompose__buttons .chatCompose__cancel:hover { background: inherit; } .chatStream__compose .chatCompose__buttons .chatCompose__send { background-color: #ff4133; border-radius: 3px; float: right; font-size: 18px; font-weight: 700; text-transform: none; } .chatStream__compose .chatCompose__checkbox--label { margin: 10px; font-style: italic; } .chatStream__compose .chatCompose__checkbox--checked:after { -webkit-animation: inherit; animation: inherit; border-color: #ff4133; left: 3px; height: 8px; top: 0; width: 4px; } .chatCompose__container { position: relative; background-color: #ecf3fb; margin: 10px 0; } .chatCompose__container .chatCompose__file.mobile { display: none; } .chatCompose__container .chatCompose__file.attached .chatCompose__fileAction { display: none; } .chatCompose__container .chatCompose__file.attached .chatFile__preview { display: inline-block; } @media only screen and (max-width: 736px) { .chatCompose__referenceMessage { margin: 10px 0; } } .chatCompose__referenceMessage .chat-message__media { display: none; } .chatFile__preview { position: relative; display: none; width: 60px; height: 50px; margin: 5px; background-color: white; background-repeat: no-repeat; background-size: cover; box-shadow: 0 0 1px 1px #aaa; } .chatFile__preview .chatFile__clear { position: absolute; right: -10px; top: -10px; height: 20px; width: 20px; background: image-url("buttons/close-gray-64.png"); border: 0; border-radius: 50%; box-shadow: none; background-size: 20px 20px; outline: none; z-index: 1; } .chatMessage__input { background-color: #ecf3fb; border: none; font-size: 22px; width: 100%; height: 100px; max-height: 100px; overflow-y: auto; padding: 10px 200px 0 10px; } @media only screen and (max-width: 1024px) { .chatMessage__input { padding-right: 45px; } } @media only screen and (max-width: 736px) { .chatMessage__input { font-size: 18px; } } .chatMessage__input:focus { outline: none; } .chatMessage__meta { position: absolute; right: 0; top: 0; bottom: 0; } .chatCompose__file, .chatCompose__counter { position: absolute; right: 10px; } .chatCompose__file { top: 10px; } .chatCompose__fileAction { min-width: 0; padding: 0; outline: 0; } .chatCompose__fileAction, .chatCompose__fileAction:hover { background: 0 !important; } .chatCompose__fileAction span[data-react-toolbox="font-icon"] { margin: 0; } .chatCompose__fileAction svg { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .chatCompose__counter { bottom: 10px; color: black; font-size: 16px; } /* this needs to be nested to make sure that the border and background maintain new-red instead of blue */ .chatCompose__checkbox { border: none; color: #ff4133; display: inline-block; float: left; font-size: 13px; height: 15px; width: 15px; } .chatCompose__checkbox .chatCompose__checkbox--border { border: 0.5px solid #ff4133; background-color: white; height: 11px; margin-top: 2px; width: 11px; } /* ===== Variants ===== */ .chat-schedule-form { width: 640px !important; width: 40rem !important; height: 1200px !important; height: 75rem !important; } .chat-schedule-form .chat-compose-container { display: block; min-height: 176px; min-height: 11rem; position: relative; } .chat-schedule-form button.chat-send { display: block; float: right !important; position: relative; } .chat-schedule-form div.error { display: block; height: 5em !important; position: relative; top: 0 !important; } .chat-schedule-form section.schedule-date-section { position: relative; display: block; } .chat-schedule-form section.schedule-date-section div.schedule-date div { margin: 16px 48px; margin: 1rem 3rem; } .chat-schedule-form section.schedule-date-section div.schedule-time { padding-bottom: 32px; padding-bottom: 2rem; } .chat-schedule-form section.schedule-date-section div.schedule-time .schedule-time-input { height: 48px; height: 3rem; top: -16px; top: -1rem; width: 100%; } .chat-schedule-form section.schedule-date-section div.schedule-time .schedule-time-input span { display: none; } #chat-message-reply, #chat-message-retweet, #chat-schedule-form { width: 400px; padding: 0 20px; } #chat-message-reply a.tweet, #chat-message-retweet a.tweet, #chat-schedule-form a.tweet { display: none !important; } #chat-message-reply li.chat-message p.content span.message, #chat-message-retweet li.chat-message p.content span.message, #chat-schedule-form li.chat-message p.content span.message { display: none; } #chat-message-reply li.chat-message p.content span.message-plain, #chat-message-retweet li.chat-message p.content span.message-plain, #chat-schedule-form li.chat-message p.content span.message-plain { display: block; } #chat-message-reply li.chat-message p.content img, #chat-message-retweet li.chat-message p.content img, #chat-schedule-form li.chat-message p.content img { display: none; } #chat-message-reply form.chat-form, #chat-message-retweet form.chat-form, #chat-schedule-form form.chat-form { position: relative; height: 170px; overflow: visible; } #chat-message-reply form.chat-form .chat-file-container, #chat-message-reply form.chat-form .chat-file-action, #chat-message-reply form.chat-form textarea, #chat-message-retweet form.chat-form .chat-file-container, #chat-message-retweet form.chat-form .chat-file-action, #chat-message-retweet form.chat-form textarea, #chat-schedule-form form.chat-form .chat-file-container, #chat-schedule-form form.chat-form .chat-file-action, #chat-schedule-form form.chat-form textarea { height: 80px; } #chat-message-reply form.chat-form .chat-file-preview, #chat-message-retweet form.chat-form .chat-file-preview, #chat-schedule-form form.chat-form .chat-file-preview { height: 70px; } #chat-message-reply form.chat-form textarea, #chat-message-retweet form.chat-form textarea, #chat-schedule-form form.chat-form textarea { padding-right: 10px; font-size: 16px; } #chat-message-reply form.chat-form .chat-message-container, #chat-message-retweet form.chat-form .chat-message-container, #chat-schedule-form form.chat-form .chat-message-container { height: 102px; right: 0; } #chat-message-reply form.chat-form .chat-message-meta, #chat-message-retweet form.chat-form .chat-message-meta, #chat-schedule-form form.chat-form .chat-message-meta { top: auto; width: 100%; text-align: right; border: 0; background: 0; padding: 0; } #chat-message-reply form.chat-form .chat-message-meta span, #chat-message-retweet form.chat-form .chat-message-meta span, #chat-schedule-form form.chat-form .chat-message-meta span { padding: 0; font-size: 12px; display: inline-block; } #chat-message-reply form.chat-form button.chat-send, #chat-message-retweet form.chat-form button.chat-send, #chat-schedule-form form.chat-form button.chat-send { top: inherit; bottom: 0; border-radius: 4px; text-transform: none; } @media only screen and (max-width: 736px) { #chat-message-reply form.chat-form, #chat-message-retweet form.chat-form, #chat-schedule-form form.chat-form { height: 220px; } #chat-message-reply form.chat-form div.schedule, #chat-message-retweet form.chat-form div.schedule, #chat-schedule-form form.chat-form div.schedule { bottom: 50px; } } input#chat-message, input#chat-term { padding: 0 10px; font-size: 32px; font-weight: normal; color: #333; } .chat-message-retweet form.chat-form button.chat-file-action { display: none; } .chat-message-retweet form.chat-form .chat-message-container { left: 0; } .chat-message-retweet form.chat-form .chat-message-container .chat-input textarea { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* ===== MOBILE OVERRIDES ===== */ @media only screen and (max-width: 736px) { form.chat-form .chat-file-container, form.chat-form .chat-file-action, form.chat-form .chat-send { height: 40px; } form.chat-form .chat-file-container button.chat-file-action { min-width: 50px; width: 50px; } form.chat-form div.chat-message-container { left: 50px; } form.chat-form div.chat-message-container div.chat-input { padding: 0; } form.chat-form div.chat-message-container div.chat-input textarea { height: 40px !important; border-radius: 0; } form.chat-form div.chat-message-container div.chat-input span { visibility: hidden; } form.chat-form div.chat-message-container .chatCompose__counter { border-left: 0; } form.chat-form input#chat-message, form.chat-form input#chat-term { height: 40px; line-height: 40px; } #chat-message-reply, #chat-message-retweet, #chat-schedule-form { width: 300px; padding: 0; } } @media only screen and (max-width: 320px) { #chat-message-reply, #chat-message-retweet, #chat-schedule-form { width: 250px; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chat-message-dialog, .chat-message-retweet, .chat-schedule-form { width: 400px; padding: 0 20px; } .chat-message-dialog div.tweet .chat-message header a img, .chat-message-retweet div.tweet .chat-message header a img, .chat-schedule-form div.tweet .chat-message header a img { margin-right: 1px; } .chat-message-dialog div.tweet .chat-message header a span, .chat-message-retweet div.tweet .chat-message header a span, .chat-schedule-form div.tweet .chat-message header a span { margin-left: 2px; } .chat-message-dialog div.tweet .chat-message header em.time, .chat-message-retweet div.tweet .chat-message header em.time, .chat-schedule-form div.tweet .chat-message header em.time { margin-left: 5px; margin-right: 10px; line-height: 12px; color: #bbb; font-size: 12px; } .chat-message-dialog div.tweet .chat-message p.content, .chat-message-retweet div.tweet .chat-message p.content, .chat-schedule-form div.tweet .chat-message p.content { background-color: #fbfbfb; border-left: thick solid #e8f2f6; margin: 24px 0; margin: 1.5rem 0; padding: 24px; padding: 1.5rem; font-size: 14px; } .chat-message-dialog div.tweet .chat-message p.content span.message, .chat-message-retweet div.tweet .chat-message p.content span.message, .chat-schedule-form div.tweet .chat-message p.content span.message { display: none; } .chat-message-dialog div.tweet .chat-message p.content span.message-plain, .chat-message-retweet div.tweet .chat-message p.content span.message-plain, .chat-schedule-form div.tweet .chat-message p.content span.message-plain { display: block; } .chat-message-dialog div.tweet .chat-message p.content img, .chat-message-retweet div.tweet .chat-message p.content img, .chat-schedule-form div.tweet .chat-message p.content img { display: none; } .chat-message-dialog div.tweet .chat-message .actions, .chat-message-retweet div.tweet .chat-message .actions, .chat-schedule-form div.tweet .chat-message .actions { display: none; } .chat-message-dialog div.tweet .chat-message .quoted-message, .chat-message-retweet div.tweet .chat-message .quoted-message, .chat-schedule-form div.tweet .chat-message .quoted-message { display: block; width: 280px; margin: 10px 0 0 0; padding: 10px; border: solid 1px #ddd; text-decoration: none; outline: none; } .chat-message-dialog div.tweet .chat-message .quoted-message:hover, .chat-message-retweet div.tweet .chat-message .quoted-message:hover, .chat-schedule-form div.tweet .chat-message .quoted-message:hover { background: #f2f2f2; } .chat-message-dialog div.tweet .chat-message .quoted-message .avatar-sm, .chat-message-retweet div.tweet .chat-message .quoted-message .avatar-sm, .chat-schedule-form div.tweet .chat-message .quoted-message .avatar-sm { display: block; margin-bottom: 10px; } .chat-message-dialog div.tweet .chat-message .quoted-message .avatar-sm img, .chat-message-retweet div.tweet .chat-message .quoted-message .avatar-sm img, .chat-schedule-form div.tweet .chat-message .quoted-message .avatar-sm img { margin-right: 5px; } .chat-message-dialog form.chat-form, .chat-message-retweet form.chat-form, .chat-schedule-form form.chat-form { position: relative; height: 170px; overflow: visible; } .chat-message-dialog form.chat-form .chat-file-container, .chat-message-dialog form.chat-form .chat-file-action, .chat-message-dialog form.chat-form textarea, .chat-message-retweet form.chat-form .chat-file-container, .chat-message-retweet form.chat-form .chat-file-action, .chat-message-retweet form.chat-form textarea, .chat-schedule-form form.chat-form .chat-file-container, .chat-schedule-form form.chat-form .chat-file-action, .chat-schedule-form form.chat-form textarea { height: 80px !important; } .chat-message-dialog form.chat-form .chat-file-container button.chat-file-action, .chat-message-retweet form.chat-form .chat-file-container button.chat-file-action, .chat-schedule-form form.chat-form .chat-file-container button.chat-file-action { width: 70px; min-width: 70px; } .chat-message-dialog form.chat-form .chat-file-container span, .chat-message-retweet form.chat-form .chat-file-container span, .chat-schedule-form form.chat-form .chat-file-container span { margin-right: 0; } .chat-message-dialog form.chat-form .chat-file-preview, .chat-message-retweet form.chat-form .chat-file-preview, .chat-schedule-form form.chat-form .chat-file-preview { height: 70px; } .chat-message-dialog form.chat-form .chat-input, .chat-message-retweet form.chat-form .chat-input, .chat-schedule-form form.chat-form .chat-input { padding: 0; } .chat-message-dialog form.chat-form .chat-input textarea, .chat-message-retweet form.chat-form .chat-input textarea, .chat-schedule-form form.chat-form .chat-input textarea { padding-right: 10px; font-size: 16px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .chat-message-dialog form.chat-form .chat-input span, .chat-message-retweet form.chat-form .chat-input span, .chat-schedule-form form.chat-form .chat-input span { visibility: hidden; } .chat-message-dialog form.chat-form .chat-message-container, .chat-message-retweet form.chat-form .chat-message-container, .chat-schedule-form form.chat-form .chat-message-container { height: 102px; right: 0; } .chat-message-dialog form.chat-form .chat-message-meta, .chat-message-retweet form.chat-form .chat-message-meta, .chat-schedule-form form.chat-form .chat-message-meta { top: auto; width: 100%; text-align: right; border: 0; background: 0; padding: 0; } .chat-message-dialog form.chat-form .chat-message-meta span, .chat-message-retweet form.chat-form .chat-message-meta span, .chat-schedule-form form.chat-form .chat-message-meta span { padding: 0; font-size: 12px !important; display: inline-block; margin-right: 2px; } .chat-message-dialog form.chat-form button.chat-send, .chat-message-retweet form.chat-form button.chat-send, .chat-schedule-form form.chat-form button.chat-send { top: inherit; bottom: 0; border-radius: 4px; text-transform: none; color: white; } @media only screen and (max-width: 736px) { .chat-message-dialog form.chat-form, .chat-message-retweet form.chat-form, .chat-schedule-form form.chat-form { height: 220px; } .chat-message-dialog form.chat-form div.schedule, .chat-message-retweet form.chat-form div.schedule, .chat-schedule-form form.chat-form div.schedule { bottom: 50px; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .questionsAnswers__wrapper--active { height: 100%; } .questionsAnswers { height: 100%; margin-top: 20px; } .questionsAnswers--grayFont * { color: #8d97a0 !important; } .questionsAnswers__backButton { cursor: pointer; } .questionsAnswers__backText { font-size: 12px; } .chatQuestions { margin: 20px; overflow-x: hidden; overflow-y: auto; height: 100%; padding-bottom: 120px; } .chatQuestions div:not(.iconMenu) { color: #fff; } .chatQuestions .chat-message__mentions path { fill: #fff; } .chatQuestions .iconMenu button path { fill: #fff; } .chatQuestion__listItem { list-style: none; border-bottom: solid 1px #ecf3fb; padding: 20px 0; } .chatQuestion__question { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 16px; font-weight: 600; cursor: pointer; } .chatQuestion__answers { font-size: 16px; } .chatQuestion__answers .chat-message__handle { font-size: 14px; } .chatQuestion__answers .chat-message__time { margin-bottom: 10px; } .chatQuestion__answers .iconMenu { height: 22px; } .chatQuestion__answers .iconMenu .iconMenu__outline { left: -80px; } .chatQuestion__answers .iconMenu .iconMenu__menuInner { left: -80px; } .chatQuestion__iconWrap { margin-right: 5px; min-width: 24px; } .chatQuestion__icon--active { position: relative; top: -4px; left: -4px; } ul.chat-questions { margin: 0; padding: 0; } ul.chat-questions li { list-style: none; } ul.chat-questions li.chat-message { border-top: solid 1px #ddd; padding: 10px 0; } ul.chat-questions li.chat-message p { background-color: #fbfbfb; border-left: thick solid #edece6; margin: 10px 0; padding: 10px 10px; font-size: 14px; } ul.chat-questions .load-previous { margin-bottom: 10px; } @media only screen and (max-width: 414px) { ul.chat-questions .load-previous { text-align: center; margin-top: 10px; } } ul.chat-questions li.chat-question em.length { margin-left: 8px; margin-left: .5rem; } ul.chat-questions li.chat-question .message-arrow { float: right; } ul.chat-questions li.chat-question li.chat-message { border-top: 0; } ul.chat-questions li.chat-question li.chat-message h4 { margin: 0 0 5px 0; font-size: 14px; line-height: 14px; } ul.chat-questions li.chat-question li.chat-message h4 a, ul.chat-questions li.chat-question li.chat-message h4 span { vertical-align: baseline; } ul.chat-questions li.chat-question li.chat-message header, ul.chat-questions li.chat-question li.chat-message aside { float: left; margin-bottom: 5px; } ul.chat-questions li.chat-question li.chat-message article { clear: left; } ul.chat-questions li.chat-question li.chat-message a.avatar-sm { display: inline-block; height: 20px; position: relative; } ul.chat-questions li.chat-question li.chat-message a.avatar-sm img { margin-right: 5px; } ul.chat-questions li.chat-question li.chat-message a.avatar-sm.registered:after { content: ' '; background: image-url("avatar-badge.png"); width: 10px; height: 10px; background-size: 10px 10px; position: absolute; top: -2px; left: 13px; } ul.chat-questions li.chat-question li.chat-message a.author, ul.chat-questions li.chat-question li.chat-message em.time, ul.chat-questions li.chat-question li.chat-message span.notification { display: inline-block; vertical-align: bottom; } ul.chat-questions li.chat-question li.chat-message a.author, ul.chat-questions li.chat-question li.chat-message span.notification { line-height: 14px; } ul.chat-questions li.chat-question li.chat-message a.author em, ul.chat-questions li.chat-question li.chat-message span.notification em { margin-left: 2px; vertical-align: inherit; } ul.chat-questions li.chat-question li.chat-message span.notification { font-size: 14px; color: #333; } ul.chat-questions li.chat-question li.chat-message a.tweet { display: none; position: relative; top: 3px; text-decoration: none; font-size: 16px; margin-right: 5px; } ul.chat-questions li.chat-question li.chat-message a.tweet.active { color: #ff5555; } ul.chat-questions li.chat-question li.chat-message .moderator-actions { margin-left: 10px; } ul.chat-questions li.chat-question li.chat-message .moderator-actions a.ban, ul.chat-questions li.chat-question li.chat-message .moderator-actions a.flag { color: #051e3d; } ul.chat-questions li.chat-question li.chat-message .moderator-actions a.ban:hover, ul.chat-questions li.chat-question li.chat-message .moderator-actions a.flag:hover { color: #db230a; } ul.chat-questions li.chat-question li.chat-message em.time { margin-left: 5px; margin-right: 10px; font-size: 12px; line-height: 12px; color: #bbb; } ul.chat-questions li.chat-question li.chat-message em { position: relative; bottom: 2px; } ul.chat-questions li.chat-question li.chat-message span.imgs { display: block; overflow: hidden; } ul.chat-questions li.chat-question li.chat-message span.imgs a.img { display: block; float: left; margin: 10px 10px 0 0; } ul.chat-questions li.chat-question li.chat-message span.imgs a.img img { height: 200px; } ul.chat-questions li.chat-question li.chat-message span.message-plain { display: none; } ul.chat-questions li.chat-question li.chat-message .quoted-message { display: block; width: 300px; margin: 10px 0 0 0; padding: 10px; border: solid 1px #ddd; text-decoration: none; outline: none; } ul.chat-questions li.chat-question li.chat-message .quoted-message:hover { background: #f2f2f2; } ul.chat-questions li.chat-question li.chat-message .quoted-message .avatar-sm { display: block; margin-bottom: 10px; } ul.chat-questions li.chat-question li.chat-message .quoted-message .avatar-sm img { margin-right: 5px; } ul.chat-questions li.chat-question li.chat-message:hover a.tweet { display: inline; } ul.chat-questions li.chat-question li.chat-message .day-separator { margin: 10px 0 20px 0; padding: 20px; text-align: center; font-size: 20px; background: #e8f2f6; color: #333; } ul.chat-questions li.chat-question li.chat-message div.moderator em.moderator { display: block; margin: 2px 0 5px 23px; font-size: 12px; color: #898989; font-style: normal; } ul.chat-questions li.chat-question li.chat-message div.moderator p.content { border-left-color: #72b272; background: #e2f2e2; } ul.chat-questions li.chat-question li.chat-message div.chat-message { position: relative; } ul.chat-questions li.chat-question li.chat-message div.chat-message.notification a.avatar-sm, ul.chat-questions li.chat-question li.chat-message div.chat-message.notification a.tweet, ul.chat-questions li.chat-question li.chat-message div.chat-message.notification .moderator-actions { display: none; } ul.chat-questions li.chat-question li.chat-message div.chat-message.notification em.time { bottom: 0; } ul.chat-questions li.chat-question li.chat-message div.chat-message.notification p.content, ul.chat-questions li.chat-question li.chat-message div.chat-message.qa_question p.content { background: #fff8dc; border-color: #ffe476; } ul.chat-questions li.chat-question.hide-top-border li.chat-message:first-child { border-top: none; } /* ===== RESPONSIVE ===== */ html.touch ul.chat-messages li.chat-message a.tweet { position: absolute; display: block; font-size: 20px; top: 0; } html.touch ul.chat-messages li.chat-message a.tweet.reply { right: 80px; } html.touch ul.chat-messages li.chat-message a.tweet.retweet, html.touch ul.chat-messages li.chat-message a.tweet.edit { right: 40px; } html.touch ul.chat-messages li.chat-message a.tweet.like, html.touch ul.chat-messages li.chat-message a.tweet.cancel { right: 0px; } html.touch ul.chat-messages li.chat-message span.moderator-actions { display: none; } .chat-schedule-form h2 { text-align: center; } .chat-schedule-form { width: 688px; width: 43rem; height: auto; } .chat-schedule-form .schedule-new { text-align: center; } .chat-schedule-form .tweet-header { background: #e2e2e2; margin-top: 32px; margin-top: 2rem; padding: 5px; text-align: center; } .chat-schedule-form .scheduled-messages { list-style: none; } .chat-schedule-form .scheduled-messages .scheduled-message { padding: 16px 0; padding: 1rem 0; position: relative; } .chat-schedule-form .scheduled-messages .scheduled-message em.time { color: #bbb; display: inline-block; font-size: 12px; line-height: 12px; margin-left: 5px; margin-right: 10px; } .chat-schedule-form .scheduled-messages .scheduled-message a.scheduled-icon { display: inline; font-size: 16px; margin-right: 5px; position: relative; top: 0; } .chat-schedule-form .scheduled-messages .scheduled-message p { background-color: #fbfbfb; border-left: thick solid #EDECE6; margin: 16px 0; margin: 1rem 0; padding: 16px; padding: 1rem; font-size: 14px; } .chat-schedule-form .scheduled-messages .scheduled-message p .message { color: black; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .twitterNotifications { max-height: 400px; overflow-y: scroll; width: 355px; padding: 0; } @media only screen and (max-width: 736px) { .twitterNotifications { width: 100%; } } .twitterNotifications h3 { color: #223057; } .twitterNotifications li:last-child { border-bottom: none; } .twitterNotifications .notificationItem { border-bottom: solid 1px #E9E8E8; white-space: normal; padding: 10px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; color: black; } .twitterNotifications .notificationItem--empty { cursor: default; } .twitterNotifications .notificationItem--empty:hover { background-color: inherit; } @media only screen and (max-width: 736px) { .twitterNotifications .notificationItem--empty { font-size: 14px; } } .twitterNotifications .notificationItem__menu { position: fixed; top: 170px; right: 80px; width: 355px !important; max-height: 400px; } .twitterNotifications .notificationItem__icon { font-size: 24px; } .twitterNotifications .notificationItem__avatar { margin-right: 20px; } .twitterNotifications .notificationItem__subheader { font-size: 15px; font-weight: bold; color: #223057; padding-right: 16px; } .twitterNotifications .notificationItem__menuInner { max-height: 400px; } .twitterNotifications .notificationItem__outline { width: 355px !important; max-height: 400px; } .twitterNotifications .notificationItem__link { color: inherit; } .twitterNotifications .notificationItem__content { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .twitterNotifications .notificationItem__itemText { font-size: 12px; font-weight: lighter; } .twitterNotifications .notificationItem__itemCaption { font-size: 14px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .notificationsToggle { position: relative; } .notificationsToggle.unread:after { position: absolute; top: 33%; right: 33%; content: " "; background: #ff4133; width: 9px; height: 9px; border-radius: 50%; } .notificationsToggle .notifications__menu { top: 30px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatParticipant { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 20px; margin-top: 20px; } @media only screen and (max-width: 736px) { .chatParticipant { margin: 0; padding: 10px 20px; border-bottom: solid 1px #f2f2f2; } } .chatParticipant a img { height: 55px; width: 55px; } .chatParticipant .chatParticipant__avatar { height: 55px !important; width: 55px; margin-right: 20px; } .chatParticipant .chatParticipant__avatar .avatar { color: green; } .chatParticipant .chatParticipant__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .chatParticipant .chatParticipant--follow { -ms-flex-line-pack: center; align-content: center; border: 1px solid #ff4133; border-radius: 2px; color: #ff4133 !important; display: -webkit-box; display: -ms-flexbox; display: flex; font-family: "Metropolis Bold", Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; height: auto; height: initial; line-height: normal; line-height: initial; margin: 6px 0; max-height: none; max-height: initial; min-width: 120px; padding: 3px 10px; text-align: center; text-transform: none; width: 120px; } .chatParticipant .chatParticipant--follow:hover { background: white !important; } .chatParticipant .chatParticipant--follow .followButton { line-height: normal !important; line-height: initial !important; display: -webkit-box; display: -ms-flexbox; display: flex; } .chatParticipant .chatParticipant--follow .followButton .followButton__icon { margin-right: 10px; -ms-flex-line-pack: center; align-content: center; } .chatParticipant .chatParticipant--follow .followButton .followButton__name { -ms-flex-line-pack: center; align-content: center; } .chatParticipant .chatParticipant--handle { color: black; font-family: "Metropolis", Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 600; line-height: 12px; } .chatParticipant .chatParticipant--info { padding-left: 15px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatResource { border-bottom: none; display: block; font-family: "Metropolis", Arial, Helvetica, sans-serif; list-style-type: none; margin-left: 10px; padding: 6px 0; position: relative; text-decoration: none; } .chatResource header { padding-left: 60px; padding-right: 30px; } .chatResource header a { display: block; line-height: 15px; } .chatResource header a.name { color: black; font-size: 14px; font-weight: bold; max-height: 30px; overflow: hidden; padding: 2px; width: 200px; } .chatResource header a.user { height: 15px; font-size: 12px; padding-top: 2px; } .chatResource__img { background-size: cover; border-radius: 5px; height: 45px; position: absolute; width: 60px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatResources { padding: 10px; } .chatMeta__resources__title i { float: right; font-size: 12px; font-weight: 900; padding: 5px 0; } .chatResources--darkBackground svg path { fill: white; } .chatResources--darkBackground .chatResource__info { color: white; } @media only screen and (max-width: 736px) { .chatResources--darkBackground { padding: 0; } .chatResources--darkBackground .chatResource { border-bottom: solid 1px #f2f2f2; padding: 10px 0; margin: 0; } .chatResources--darkBackground .chatResource__icons { left: 10px; } .chatResources--darkBackground .chatResource__info { color: #333; padding-right: 10px; } .chatResources--darkBackground svg path { fill: #ff4133; } } .chatResource__info { color: black; font-family: "Metropolis", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.14; } .chatResource__info--link { font-size: 12px; padding: 2px; width: 200px; } .chatResource__headerIcons { display: inline-block; position: absolute; right: 0px; } .chatResource__headerIcons svg { margin-right: 5px; width: 20px; height: 15px; } .chatResource__icons { display: inline-block; left: 0px; position: absolute; } .chatResource__icons svg { margin-left: 5px; width: 20px; height: 15px; } .chatResource__heart { cursor: pointer; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatMetadataToggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; width: 50px; height: 50px; margin-top: 10px; font-weight: bold; border: 0; border-radius: 0 0.2rem 0.2rem 0; cursor: pointer; background: #5b6797; color: #dde7f5; } .chatMetadataToggle.chatMetadataToggle--open { width: 25px; } @media only screen and (max-width: 736px) { .chatMetadataToggle { display: none; } } .chatMetadataToggle__icon { margin-left: 20%; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .sharePanel__wrapper { color: #4a4a4a; } .sharePanel__wrapper path { fill: #fff; } .sharePanel__wrapper .sharePanel__title { margin-bottom: 10px; color: black; } .sharePanel__wrapper .sharePanel__title h3 { padding-left: 0; } @media only screen and (max-width: 736px) { .sharePanel__wrapper .sharePanel__title h3 { padding-left: 20px; } } .sharePanel__wrapper .sharePanel__buttonWrap { margin: 10px 0; } @media only screen and (max-width: 736px) { .sharePanel__wrapper .sharePanel__buttonWrap { padding: 0 20px; } } .sharePanel__wrapper .sharePanel__buttonWrap .sharePanel__button { width: 100%; height: 36px; position: relative; } .sharePanel__wrapper .sharePanel__buttonWrap .sharePanel__button span { position: absolute; left: 25%; top: 6px; } .sharePanel__wrapper .sharePanel__social { margin: 10px 0; } @media only screen and (max-width: 736px) { .sharePanel__wrapper .sharePanel__social { padding: 0 20px; } } .sharePanel__wrapper .sharePanel__social a { width: 25%; margin: 0; text-align: center; } .sharePanel__wrapper .sharePanel__social .social-container__icon { width: 36px; height: 36px; } .sharePanel__wrapper .sharePanel__social path { fill: #2d2d2d; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatStreamMetadata { position: relative; width: 300px; background: #3a4674; color: white; word-wrap: break-word; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media only screen and (max-width: 736px) { .chatStreamMetadata { width: 100%; background: 0; color: black; } .chatStreamMetadata .wrapper { padding: 0; } } .chatStreamMetadata h3 { font-family: "Metropolis", Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 600; padding-top: 20px; padding-left: 20px; margin: 0; } @media only screen and (max-width: 736px) { .chatStreamMetadata h3 { padding-left: 20px; margin-bottom: 10px; } } .chatStreamMetadata .chatStreamMetadata__toggle { position: absolute; } .chatStreamMetadata__controls { position: absolute; width: 100%; } .chatStreamMetadata__content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding-top: 60px; overflow-y: auto; } @media only screen and (max-width: 736px) { .chatStreamMetadata__content { padding-top: 0; } } .chatStreamMetadata__topButtons { position: absolute; top: 10px; right: 10px; height: 30px; } .chatStreamMetadata__topButtons .chatStreamMetadata__topButton { display: block; float: left; background: 0; border: 0; border-radius: 0; cursor: pointer; transition: background-color 0.2s; } .chatStreamMetadata__topButtons .chatStreamMetadata__topButton, .chatStreamMetadata__topButtons .chatStreamMetadata__topButton button { width: 30px; height: 30px; } .chatStreamMetadata__topButtons .chatStreamMetadata__topButton .chatStreamMetadata__topIcon { height: 25px; } .chatStreamMetadata__topButtons .chatStreamMetadata__topButton:first-child { margin-right: 5px; } .chatStreamMetadata__topButtons .chatStreamMetadata__topButton.notificationsToggle.unread:after { top: 5px; right: 5px; } .chatStreamMetadata__topButtons .chatStreamMetadata__topButton svg { margin: 3px; } .chatStreamMetadata__topButtons .chatStreamMetadata__topButton:hover { background: #4b5b96; } .chatStreamMetadata__headerContainer { display: inline-block; line-height: 20px; margin-right: 20px; margin-top: -8px; vertical-align: middle; } @media only screen and (max-width: 736px) { .chatStreamMetadata__headerContainer { display: none; } } .chatStreamMetadata__header { cursor: pointer; padding: 20px 30px; } .chatStreamMetadata__header--paddingTop { margin-bottom: 0; padding-top: 20px; } .chatStreamMetaDivider--margin { margin-bottom: 20px; } .chatStreamMetadata--arrow { cursor: pointer; position: relative; top: 5px; left: 2px; margin-right: 2px; } .chatStreamMetadata__showAllHeader { padding-left: 10px; padding-top: 20px; cursor: pointer; } .chatStreamMetadata--leftArrow { margin-left: -10px; cursor: pointer; font-size: 12px; font-weight: 700; } .chatIcon__back { font-size: 13px; } .chatStreamMetadata--center { padding: 0 20px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatStreamMetadata.chatStreamMetadata--bar { width: 62px; } @media only screen and (max-width: 736px) { .chatStreamMetadata.chatStreamMetadata--bar { display: none; } } .chatStreamMetadata.chatStreamMetadata--bar .chatStreamMetadata__buttons .metaButton { width: 62px; height: 62px; background: 0; border: 0; border-radius: 0; cursor: pointer; transition: background-color 0.2s; padding: 13px; } .chatStreamMetadata.chatStreamMetadata--bar .chatStreamMetadata__buttons .metaButton .metaButton__icon { width: 24px; } .chatStreamMetadata.chatStreamMetadata--bar .chatStreamMetadata__buttons .metaButton:hover { background: #4b5b96; } .chatStreamMetadata.chatStreamMetadata--bar .metaButton__share { height: 62px; color: #4a4a4a; } .sharePanel__wrapper { width: 300px; } @media only screen and (max-width: 736px) { .sharePanel__wrapper { width: 100%; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .transcript-create-form { max-width: 400px; } .transcript-create-form .title { text-align: center; } .transcript-create-form label.start-date, .transcript-create-form div.DayPicker { margin-bottom: 16px; margin-bottom: 1rem; } .transcript-create-form select, .transcript-create-form label { height: 48px; height: 3rem; line-height: 48px; line-height: 3rem; } .transcript-create-form select { border-color: #e7e7e7; background: white; border-radius: 0; } .transcript-create-form div.start-time { margin: 32px 0 0 0; margin: 2rem 0 0 0; } .transcript-create-form div.start-time select { width: 100%; } .transcript-create-form div.duration { margin: 16px 0 32px 0; margin: 1rem 0 2rem 0; } .transcript-create-form div.duration select { width: 45%; } .transcript-create-form div.duration span { display: inline-block; width: 10%; text-align: center; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .chatOptions { width: 65vw; } .chatOptions__body { padding: 0; } .chatOption--border { border-bottom: 1px solid #8d97a0; border-radius: 0; } .chatOption--button { padding: 5px 30px; height: 45px; text-align: left; text-transform: none; width: 100%; } .chatOption--button.active { background-color: #ecf3fb !important; } .chatOption--text { margin-left: 20px; color: black; } .chatOption__cancel { border-bottom: none; } .toolboxIconButton__children { display: inline-block; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .flashNotification { position: absolute; width: 120px; height: 120px; top: 48%; left: 50%; margin: -60px 0 0 -60px; background: white; text-align: center; border-radius: 3px; z-index: 2; pointer-events: none; transition-duration: 0.15s; opacity: 0; box-shadow: 0 0 12px rgba(50, 50, 50, .2); } .flashNotification.flashNotification--active { top: 50%; opacity: 1.0; } .flashNotification__info { position: absolute; bottom: 0; width: 100%; height: 40px; line-height: 40px; text-transform: none; background-color: #ecf3fb !important; } .flashNotification__info svg { position: relative; top: 4px; margin-right: 5px; } .flashNotification__icon { margin: 20px 0; } .flashNotification__text { margin-left: 10px; color: black; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* ====- INTERACTIVE CHAT PAGE ===== */ .chatStream * { font-family: "Metropolis", Arial, Helvetica, sans-serif; } .chatStream { font-size: 16px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; top: 54px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #ebf2f7; } @media only screen and (max-width: 736px) { .chatStream { background: white; } } .chatStream .chatStream__body { width: 100%; margin: 0 auto; max-width: 980px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-top: 20px; margin-bottom: 20px; overflow: hidden; } @media screen and (min-width: 1240px) { .chatStream .chatStream__body { max-width: 1220px; } } @media only screen and (max-width: 736px) { .chatStream .chatStream__body { margin-top: 0; margin-bottom: 0; } } .chatStream .chatStream__body .chatStream__messaging { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px; background: white; } @media only screen and (max-width: 736px) { .chatStream .chatStream__body .chatStream__messaging { padding: 0; width: 100%; } } .chatStream .chatStream__body .chatStream__messaging .chatStream__compose { padding-bottom: 20px; border-bottom: solid 1px #dde7f5; -webkit-box-flex: 0; -ms-flex: none; flex: none; } @media only screen and (max-width: 736px) { .chatStream .chatStream__body .chatStream__messaging .chatStream__compose { margin: 1px 0; padding: 0; border: 0; display: -webkit-box; display: -ms-flexbox; display: flex; } } .chatStream .chatStream__body .chatStream__messaging .chatStream__compose .chatStream__toggleCompose, .chatStream .chatStream__body .chatStream__messaging .chatStream__compose .chatStream__pauseMobile { font-family: "Metropolis", Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 700; padding: 0 40px; text-transform: none; } @media only screen and (max-width: 736px) { .chatStream .chatStream__body .chatStream__messaging .chatStream__compose .chatStream__toggleCompose, .chatStream .chatStream__body .chatStream__messaging .chatStream__compose .chatStream__pauseMobile { height: 50px; padding: 0 20px; border-radius: 0; } } .chatStream .chatStream__body .chatStream__messaging .chatStream__compose .chatStream__toggleCompose { background: #ff4133; margin-right: 1px; } @media only screen and (max-width: 736px) { .chatStream .chatStream__body .chatStream__messaging .chatStream__compose .chatStream__toggleCompose { text-align: left; -webkit-box-flex: 3; -ms-flex: 3 1; flex: 3 1; } .chatStream .chatStream__body .chatStream__messaging .chatStream__compose .chatStream__toggleCompose span.long .tweetTo { display: none; } } @media only screen and (max-width: 736px) { .chatStream .chatStream__body .chatStream__messaging .chatStream__compose .chatStream__composeForm { width: 100%; margin: 0 10px 20px 10px; } } .chatStream .chatStream__body .chatStream__messaging .chatStream__pauseDesktop { float: right; height: 40px; line-height: 40px; padding: 0 10px !important; color: #ff4133; font-style: oblique; font-size: 12px; } .chatStream .chatStream__body .chatStream__messaging .chatStream__pauseDesktop:hover { background: 0; } .chatStream .chatStream__body .chatStream__messaging .chatStream__pauseDesktop svg { position: relative; top: 1px; } .chatStream .chatStream__body .chatStream__messaging .chatStream__pauseDesktop svg path { fill: #ff4133; } .chatStream .chatStream__body .chatStream__messaging .chatStream__pauseMobile { background: #9b9b9b; color: white; -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; } .chatStream .chatStream__body .chatStream__messaging .chatStream__messages { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; } @media only screen and (max-width: 736px) { .chatStream .chatStream__body .chatStream__messaging .chatStream__messages { margin-top: 0; } } .chatStream .chatStream__body .chatStream__messaging .chatStream__messages .chatMessages__list { overflow: hidden; } .chatStream .chatStream__body .chatStream__messaging .chatStream__messages .chatMessages__list .chatMessage__content * { max-width: 100%; } .chatStream .chatStream__body .repliesDrawer__wrapper > div { position: absolute; left: -1140px; width: 1140px; } .chatStream .chatStream__body .repliesDrawer__drawer { position: absolute; width: 430px; } .chatStream .chatStream__body .chatStreamMetadata { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } @media only screen and (max-width: 736px) { .chatStream.chatStream--withMetadata .chatStream__messaging { display: none; } } .chatStream--withMetadata .chatStreamMetadata .chat-message__quote { display: none; } .chatStream--mobile { top: 0; } .chatStream--paused .chatStream__pauseDesktop { display: none; } @media only screen and (max-width: 736px) { .chatStream--paused .chatStream__compose { display: none !important; } } .chat--mobileOnly { display: none; } @media only screen and (max-width: 736px) { .chat--mobileOnly { display: block; } } @media only screen and (max-width: 736px) { .chat--desktopOnly { display: none; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxTabs { font-family: "Metropolis", Arial, Helvetica, sans-serif; border: none; } .toolboxTabs .toolboxTabs__bar--left { text-align: left; } .toolboxTabs .toolboxTabs__bar--center { text-align: center; } .toolboxTabs .toolboxTabs__bar--right { direction: rtl; text-align: right; } .toolboxTabs .toolboxTabs__bar--leftAlignFade { position: relative; } .toolboxTabs .toolboxTabs__bar--leftAlignFade:after { content: ""; width: 20%; height: 100%; position: absolute; right: 0; top: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), white); pointer-events: none; } .toolboxTabs .toolboxTabs__bar--rightAlignFade { position: relative; } .toolboxTabs .toolboxTabs__bar--rightAlignFade:before { content: ""; width: 20%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0), white); pointer-events: none; } .toolboxTabs .toolboxTabs__bar--centerFade { position: relative; position: relative; } .toolboxTabs .toolboxTabs__bar--centerFade:before { content: ""; width: 20%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0), white); pointer-events: none; } .toolboxTabs .toolboxTabs__bar--centerFade:after { content: ""; width: 20%; height: 100%; position: absolute; right: 0; top: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), white); pointer-events: none; } .toolboxTabs .toolboxTabs__bar { position: relative; } .toolboxTabs .toolboxTabs__bar .toolboxTabs__tabs { color: #4a4a4a; font-size: 18px; overflow-x: auto; white-space: nowrap; } .toolboxTabs .toolboxTabs__bar .toolboxTabs__tabs div:first-child { padding-left: 0; } .toolboxTabs .toolboxTabs__bar .toolboxTabs__tabs .toolboxTab { display: inline-block; border: none; cursor: pointer; padding: 20px; text-transform: uppercase; } .toolboxTabs .toolboxTabs__bar .toolboxTabs__tabs .toolboxTab__barChild { display: inline-block; padding: 0 20px; } .toolboxTabs .toolboxTabs__bar .toolboxTabs__tabs .toolboxTab--active { color: #223057; font-weight: 800; } .toolboxTabs .toolboxTabs__bar .toolboxTabs__barOverlay { position: absolute; top: 0; right: 0; height: 100%; min-width: 20%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; background-color: #fff; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .transcript-react .transcript-content .transcript-meta-data.transcript-summary { font-size: 32px; font-size: 2rem; padding: 5%; } .transcript-react .transcript-content .transcript-meta-data.transcript-summary .graphic { overflow: hidden; } .transcript-react .transcript-content .transcript-meta-data.transcript-summary .chat-calendar-graphic { padding: 0 10% 0 0; } .transcript-react .transcript-content .transcript-meta-data.transcript-summary ul.analytics { list-style-type: none; padding: 5%; } .transcript-react .transcript-content .transcript-meta-data.transcript-summary ul.analytics * { padding: 2%; } .transcript-react .transcript-content .transcript-meta-data.transcript-summary ul.analytics li * { padding: 0 7%; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .resourceList__heading { display: -webkit-box; display: -ms-flexbox; display: flex; } .resourceList__count { margin-right: 15px; color: #4a4a4a; font-weight: 600; font-size: 18px; } .resourceList__kind { margin: 20px 0; } .resourceList__kindLabel { color: #217ded; text-transform: capitalize; font-weight: 600; font-size: 18px; } .resourceList__row { display: -webkit-box; display: -ms-flexbox; display: flex; color: #4a4a4a; margin: 10px 0; font-size: 16px; min-height: 40px; } .resourceList__rowIcon { margin-right: 15px; cursor: pointer; } .resourceList__rowName { font-weight: 600; } .resourceList__rowDescription { font-weight: 500; font-style: italic; } .transcript-embed-form { max-width: 1040px; max-width: 65rem; width: 1040px; width: 65rem; } .transcript-embed-form .code { height: 112px !important; height: 7rem !important; } .transcript-embed-form .code .area { width: 960px !important; width: 60rem !important; height: 112px !important; height: 7rem !important; } .transcript-embed-form .preview label { margin: 32px 0; margin: 2rem 0; } .transcript-embed-form .preview iframe { width: 960px !important; width: 60rem !important; height: 480px; height: 30rem; border: 1px solid black; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .transcript-share-form { max-width: 544px; max-width: 34rem; } .transcript-share-form button.embed-button { width: 100% !important; border: 1px solid black !important; } .transcript-share-form button.embed-button:hover { background: #217ded !important; color: white !important; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .archive__backButton { min-width: 50px; margin-bottom: 20px; color: #ff4133; text-transform: lowercase; } .archive__backButton .toolboxIconButton__children { color: #ff4133; display: inline-block; } .archive__backButton path { fill: #ff4133; } .flashNotification { position: flex; top: 25% !important; } .archive__sidebarWrapper { padding: 0 40px 0 20px; } .archive__search { height: 40px; position: relative; color: #ff4133; } .archive__search path { fill: #ff4133; } .archive__search .archive__searchIcon { position: absolute; right: 30%; top: 3px; } .archive__search .archive__searchInput { position: absolute; right: 30%; color: #ff4133; font-size: 12px; border: none; border-bottom: 1px solid #ff4133; padding: 5px 18px; } .archive__search .archive__searchInput::-webkit-input-placeholder { text-align: right; font-style: italic; } .archive__search .archive__searchInput:-ms-input-placeholder { text-align: right; font-style: italic; } .archive__search .archive__searchInput::placeholder { text-align: right; font-style: italic; } .archive__analytics .archive__analyticsLine { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 0 10px 10px; } .archive__analytics .archive__analyticsCount { padding: 0 10px; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .archive__sidebar .chatParticipant { padding: 0; } .chatExplore__sectionTitle--noTransform { text-transform: none; } .transcript-react .with-subtitle { height: 120px !important; } .transcript-react .with-subtitle .container { height: 120px !important; } .transcript-react .with-subtitle .container h1 { font-size: 35.2px !important; font-size: 2.2rem !important; } .transcript-react .with-subtitle .container .transcript-subtitle { text-align: center; margin-top: 0 !important; line-height: 38.4px; line-height: 2.4rem; font-size: 25.6px; font-size: 1.6rem; bottom: 0; } .transcript-react .with-subtitle .container .toolbar-action { margin-top: 40px !important; } .transcript-react .transcript-content { margin-top: 32px; margin-top: 2rem; } .transcript-react .transcript-content .transcript-meta-data { background-color: #f2f2f2; border: solid 1px #e2e2e2; padding: 0 10px 10px 10px; } .transcript-react .transcript-content .transcript-resources { margin-bottom: 16px; margin-bottom: 1rem; } .transcript-react .transcript-content .transcript-resources ul { overflow: hidden; } .transcript-react .transcript-content .transcript-resources a.collection-link { display: block; margin-top: 16px; margin-top: 1rem; } .transcript-react .transcript-content .transcript-messages .transcript-edit { position: absolute; top: -5px; right: 0; color: black; } .transcript-react .transcript-content .transcript-messages .transcript-edit > div { margin-top: 40px; margin-top: 2.5rem; } .transcript-react .transcript-content .dashboard-tabs label { font-size: 25.6px; font-size: 1.6rem; } .transcript-react .chat-resources-header i { display: none; } .transcript-messages ul { list-style: none; } .transcript-messages li.chat-message { margin-bottom: 20px; } .transcript-messages .iconMenu { display: none; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .collectionCreateForm p { font-size: 18px; margin-bottom: 20px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .collectionCreate .collectionCreateForm { margin-top: 40px; padding: 0 160px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.assignment-group { margin-bottom: 20px; } div.assignment-group .assignment-header { margin-bottom: 32px; margin-bottom: 2rem; } div.assignment-group .assignment-header h2 { display: inline-block; margin: 0 5px 10px 5px; } div.assignment-group .assignment-header .assignment-edit { float: right; } div.assignment-group .assignmentGroup__notice { padding: 0 10px 2em 10px; color: #777; } .assignments-list { margin-top: 20px; } div.coupon-index div.content { margin-top: 32px; margin-top: 2rem; } div.coupon-index li.coupon-list-item h2 { width: 6em; } div.coupon-index li.coupon-list-item.disabled h2 { color: #aaa; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.dashboard-content a.cta { position: relative; display: block; overflow: hidden; box-shadow: 0px 1px 2px rgba(0, 0, 0, .28); } div.dashboard-content a.cta.primary, div.dashboard-content a.cta.secondary { margin-bottom: 32px; margin-bottom: 2rem; } div.dashboard-content a.cta.primary { height: 480px; height: 30rem; } div.dashboard-content a.cta.primary:hover { background: #fff8dc; } div.dashboard-content a.cta.primary span.title, div.dashboard-content a.cta.primary hr, div.dashboard-content a.cta.primary span.image, div.dashboard-content a.cta.primary span.description { position: absolute; display: block; overflow: hidden; } div.dashboard-content a.cta.primary span.title { top: 24px; top: 1.5rem; left: 24px; left: 1.5rem; right: 24px; right: 1.5rem; font-size: 38.4px; font-size: 2.4rem; font-weight: bold; line-height: 48px !important; line-height: 3rem !important; height: 1.25em; } div.dashboard-content a.cta.primary hr { left: 16px; left: 1rem; right: 16px; right: 1rem; top: 48px; top: 3rem; color: #e7e7e7; } div.dashboard-content a.cta.primary span.image, div.dashboard-content a.cta.primary span.description { top: 120px; top: 7.5rem; bottom: 24px; bottom: 1.5rem; } div.dashboard-content a.cta.primary span.image { left: 24px; left: 1.5rem; width: 336px; width: 21rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } div.dashboard-content a.cta.primary span.image img { max-width: 100%; max-height: 100%; } div.dashboard-content a.cta.primary span.description { left: 384px; left: 24rem; right: 24px; right: 1.5rem; height: 336px; height: 21rem; color: #777; font-size: 26.88px; font-size: 1.68rem; } div.dashboard-content a.cta.primary span.description, div.dashboard-content a.cta.primary span.description span, div.dashboard-content a.cta.primary span.description br { line-height: 1.25 !important; } div.dashboard-content a.cta.primary span.description.focused { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } div.dashboard-content a.cta.primary span.description.focused span { display: block; } div.dashboard-content a.cta.primary span.description.focused span.primary { font-size: 1.25em; font-weight: bold; } div.dashboard-content a.cta.primary aside.status { position: absolute; left: 384px; left: 24rem; right: 16px; right: 1rem; bottom: 16px; bottom: 1rem; color: #717171; text-align: center; padding: 5px 0; background: #e7e7e7; font-size: 22.4px; font-size: 1.4rem; font-weight: bold; } div.dashboard-content a.cta.primary.with-status span.description { height: 268.8px; height: 16.8rem; } div.dashboard-content a.cta.primary.no-image span.description { left: 24px; left: 1.5rem; } div.dashboard-content a.cta.primary.no-hover:hover { background: 0; } div.dashboard-content a.cta.primary span.image { width: 384px; width: 24rem; } div.dashboard-content a.cta.primary span.description { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; font-size: 28px; font-size: 1.75rem; text-align: center; padding: 0 48px; padding: 0 3rem; } div.dashboard-content a.cta.primary span.description.continue { text-align: left; } div.dashboard-content a.cta.secondary { height: 323.2px; height: 20.2rem; } div.dashboard-content a.cta.secondary:hover { background: #fff8dc; } div.dashboard-content a.cta.secondary span.title, div.dashboard-content a.cta.secondary hr, div.dashboard-content a.cta.secondary span.image, div.dashboard-content a.cta.secondary span.description { position: absolute; display: block; overflow: hidden; } div.dashboard-content a.cta.secondary span.title { top: 24px; top: 1.5rem; left: 24px; left: 1.5rem; right: 24px; right: 1.5rem; font-size: 28.16px; font-size: 1.76rem; font-weight: bold; line-height: 35.2px !important; line-height: 2.2rem !important; height: 1.25em; } div.dashboard-content a.cta.secondary hr { left: 16px; left: 1rem; right: 16px; right: 1rem; top: 35.2px; top: 2.2rem; color: #e7e7e7; } div.dashboard-content a.cta.secondary span.image, div.dashboard-content a.cta.secondary span.description { top: 107.2px; top: 6.7rem; bottom: 24px; bottom: 1.5rem; } div.dashboard-content a.cta.secondary span.image { left: 24px; left: 1.5rem; width: 192px; width: 12rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } div.dashboard-content a.cta.secondary span.image img { max-width: 100%; max-height: 100%; } div.dashboard-content a.cta.secondary span.description { left: 240px; left: 15rem; right: 24px; right: 1.5rem; height: 192px; height: 12rem; color: #777; font-size: 25.6px; font-size: 1.6rem; } div.dashboard-content a.cta.secondary span.description, div.dashboard-content a.cta.secondary span.description span, div.dashboard-content a.cta.secondary span.description br { line-height: 1.25 !important; } div.dashboard-content a.cta.secondary span.description.focused { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } div.dashboard-content a.cta.secondary span.description.focused span { display: block; } div.dashboard-content a.cta.secondary span.description.focused span.primary { font-size: 1.25em; font-weight: bold; } div.dashboard-content a.cta.secondary aside.status { position: absolute; left: 240px; left: 15rem; right: 16px; right: 1rem; bottom: 16px; bottom: 1rem; color: #717171; text-align: center; padding: 5px 0; background: #e7e7e7; font-size: 22.4px; font-size: 1.4rem; font-weight: bold; } div.dashboard-content a.cta.secondary.with-status span.description { height: 128px; height: 8rem; } div.dashboard-content a.cta.secondary.no-image span.description { left: 24px; left: 1.5rem; } div.dashboard-content a.cta.secondary.no-hover:hover { background: 0; } div.dashboard-content a.cta.graphic span.image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; left: 0; width: 100%; top: 80px; top: 5rem; bottom: 16px; bottom: 1rem; } div.dashboard-content a.cta.graphic span.image img { max-height: 80%; max-width: 80%; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ aside.dashboard { background: #f2f2f2; padding: 32px; padding: 2rem; } aside.dashboard p { font-size: 20px; font-size: 1.25rem; margin-bottom: 20px; margin-bottom: 1.25rem; } aside.dashboard button, aside.dashboard a.button { width: 100%; line-height: 57.6px; line-height: 3.6rem; margin-top: 16px; margin-top: 1rem; } aside.dashboard button:first-child, aside.dashboard a.button:first-child { margin-top: 0; } aside.dashboard section { margin-top: 32px; margin-top: 2rem; padding-top: 32px; padding-top: 2rem; border-top: solid 1px #e7e7e7; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.dashboard-content { margin-top: 20px; min-height: 600px; } div.dashboard-content .dashboard-tabs .toolboxTabs__bar { margin-left: 10px; } @media only screen and (min-width: 1025px) { div.dashboard-content .dashboard-tabs { width: 1262px; } div.dashboard-content .dashboard-tabs .toolboxTabs__bar { margin-left: 0; } } div.dashboard-content section { position: relative; } div.dashboard-content div.video { height: 480px; height: 30rem; padding: 16px; padding: 1rem; position: relative; display: block; overflow: hidden; box-shadow: 0px 1px 2px rgba(0, 0, 0, .28); } div.dashboard-content div.video iframe { width: 100%; height: 100%; border: solid 1px #e7e7e7; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.interaction-details p { margin-bottom: 32px; margin-bottom: 2rem; } div.interaction-details button { background: white !important; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.content-block-form div.interaction-activity-form, div.content-block-form div.interaction-settings-form, div.content-block-form div.interaction-badge-form { position: absolute; z-index: 1; left: 0; right: 0; bottom: 100%; height: 100%; padding: 38.4px; padding: 2.4rem; background: #f2f2f2; border: solid 1px #bfbfbf; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.4s; } div.content-block-form div.interaction-activity-form.active, div.content-block-form div.interaction-settings-form.active, div.content-block-form div.interaction-badge-form.active { bottom: 0; } div.content-block-form div.interaction-activity-form textarea, div.content-block-form div.interaction-settings-form textarea, div.content-block-form div.interaction-badge-form textarea { height: 10vh !important; } div.content-block-form div.interaction-activity-form div.tabs-container, div.content-block-form div.interaction-settings-form div.tabs-container, div.content-block-form div.interaction-badge-form div.tabs-container { position: absolute; top: 38.4px; top: 2.4rem; bottom: 38.4px; bottom: 2.4rem; left: 38.4px; left: 2.4rem; right: 38.4px; right: 2.4rem; overflow: hidden; } div.content-block-form div.interaction-activity-form div.tabs-container div.interaction-tabs > nav, div.content-block-form div.interaction-settings-form div.tabs-container div.interaction-tabs > nav, div.content-block-form div.interaction-badge-form div.tabs-container div.interaction-tabs > nav { box-shadow: none !important; } div.content-block-form div.interaction-activity-form div.tabs-container button.remove-section, div.content-block-form div.interaction-settings-form div.tabs-container button.remove-section, div.content-block-form div.interaction-badge-form div.tabs-container button.remove-section { margin-top: 32px; margin-top: 2rem; float: right; } div.content-block-form div.interaction-activity-form div.tabs-container > div, div.content-block-form div.interaction-activity-form div.tabs-container > div > section, div.content-block-form div.interaction-settings-form div.tabs-container > div, div.content-block-form div.interaction-settings-form div.tabs-container > div > section, div.content-block-form div.interaction-badge-form div.tabs-container > div, div.content-block-form div.interaction-badge-form div.tabs-container > div > section { width: 100%; height: 100%; } div.content-block-form div.interaction-activity-form div.tabs-container section.scroll, div.content-block-form div.interaction-settings-form div.tabs-container section.scroll, div.content-block-form div.interaction-badge-form div.tabs-container section.scroll { overflow-y: scroll; position: absolute; top: 38.4px; top: 2.4rem; bottom: 96px; bottom: 6rem; left: 0; right: 0; padding: 38.4px; padding: 2.4rem; background: #e7e7e7; border: solid 1px #b4b4b4; box-shadow: inset 0 2px 5px rgba(33, 33, 33, .1); } div.content-block-form div.interaction-activity-form div.tabs-container section.scroll, div.content-block-form div.interaction-activity-form div.tabs-container section.scroll label, div.content-block-form div.interaction-settings-form div.tabs-container section.scroll, div.content-block-form div.interaction-settings-form div.tabs-container section.scroll label, div.content-block-form div.interaction-badge-form div.tabs-container section.scroll, div.content-block-form div.interaction-badge-form div.tabs-container section.scroll label { color: #333; } div.content-block-form div.interaction-activity-form div.tabs-container section.scroll input, div.content-block-form div.interaction-activity-form div.tabs-container section.scroll textarea, div.content-block-form div.interaction-activity-form div.tabs-container section.scroll .select-bar .l, div.content-block-form div.interaction-settings-form div.tabs-container section.scroll input, div.content-block-form div.interaction-settings-form div.tabs-container section.scroll textarea, div.content-block-form div.interaction-settings-form div.tabs-container section.scroll .select-bar .l, div.content-block-form div.interaction-badge-form div.tabs-container section.scroll input, div.content-block-form div.interaction-badge-form div.tabs-container section.scroll textarea, div.content-block-form div.interaction-badge-form div.tabs-container section.scroll .select-bar .l { border: solid 1px #cecece; } div.content-block-form div.interaction-activity-form div.tabs-container section.scroll div.add-input, div.content-block-form div.interaction-settings-form div.tabs-container section.scroll div.add-input, div.content-block-form div.interaction-badge-form div.tabs-container section.scroll div.add-input { margin-bottom: 32px; margin-bottom: 2rem; } div.content-block-form div.interaction-activity-form div.tabs-container section.scroll div.input-fields button, div.content-block-form div.interaction-settings-form div.tabs-container section.scroll div.input-fields button, div.content-block-form div.interaction-badge-form div.tabs-container section.scroll div.input-fields button { margin-top: 32px; margin-top: 2rem; } div.content-block-form div.interaction-activity-form div.tabs-container section.scroll div.input-fields aside, div.content-block-form div.interaction-settings-form div.tabs-container section.scroll div.input-fields aside, div.content-block-form div.interaction-badge-form div.tabs-container section.scroll div.input-fields aside { margin-top: -16px; margin-top: -1rem; font-size: 20.8px; font-size: 1.3rem; } div.content-block-form div.interaction-activity-form div.tabs-container button.add-section, div.content-block-form div.interaction-settings-form div.tabs-container button.add-section, div.content-block-form div.interaction-badge-form div.tabs-container button.add-section { position: absolute; right: 0; top: 16px; top: 1rem; } div.content-block-form div.interaction-activity-form nav.dialogActions, div.content-block-form div.interaction-settings-form nav.dialogActions, div.content-block-form div.interaction-badge-form nav.dialogActions { position: absolute; left: 38.4px; left: 2.4rem; right: 38.4px; right: 2.4rem; bottom: 38.4px; bottom: 2.4rem; } div.content-block-form div.interaction-activity-form nav.dialogActions div.error, div.content-block-form div.interaction-settings-form nav.dialogActions div.error, div.content-block-form div.interaction-badge-form nav.dialogActions div.error { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: auto; pointer-events: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } @media only screen and (min-width: 1025px) { div.content-block-form.with-guide div.interaction-activity-form, div.content-block-form.with-guide div.interaction-settings-form, div.content-block-form.with-guide div.interaction-badge-form { right: 40rem; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .badgeFilter { padding: 20px 0; } .badgeFilter__filterer { width: 100%; } .badgeFilter__items { border: 1px solid rgba(0, 0, 0, .12); height: 150px; /* this works in IE AMUSINGLY ENOUGH, and will eventually work in Chrome */ overflow-y: scroll; -webkit-scroll-snap-type: mandatory; -ms-scroll-snap-type: mandatory; scroll-snap-type: mandatory; scroll-snap-align: 0 50px; } .badgeFilter__item, .badgeFilter__item--selected { -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: default; display: -webkit-box; display: -ms-flexbox; display: flex; height: 50px; } .badgeFilter__item:hover, .badgeFilter__item--selected:hover { background-color: rgba(0, 0, 0, .12); cursor: pointer; } .badgeFilter__item--selected { background-color: rgba(0, 0, 0, .25); } .badgeFilter__item--selected:hover { background-color: rgba(0, 0, 0, .2); cursor: default; } .badgeFilter__itemImage { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; min-width: 75px; padding: 0 5px; text-align: center; } .badgeFilter__itemImage img { height: 35px; } .badgeFilter__itemText { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; font-size: 10px; padding: 10px; } .badgeFilter__itemName { font-size: 12px; font-weight: 700; } .badgeFilter__itemHours { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 10px; } .badgeFilter__selectedBadge { margin-top: 15px; } .badgeFilter__selectedBadge:hover { background-color: transparent; } .badgeFilter__items .badgeFilter__itemDescription { /* Fallback for non-webkit */ display: block; height: 30px; /* Webkit */ display: -webkit-box; max-width: 100%; font-size: 10px; line-height: 1; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .badgeFilter__selectedBadge .badgeFilter__item--selected { background-color: transparent; border: 1px solid rgba(0, 0, 0, .12); height: auto; padding: 10px 10px 10px 0; } .badgeFilter__selectedBadgeRemove { color: #217ded; cursor: pointer; font-size: 16px; font-size: 1rem; float: right; text-decoration: underline; } .badgeFilter__selectedBadgeTitle { padding-top: 5px; font-size: 22.4px; font-size: 1.4rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.interaction-badge-form div.autocomplete-container { margin-bottom: 32px; margin-bottom: 2rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.content-block-editor-guide { position: absolute; top: 0; bottom: 0; right: 0; width: 640px; width: 40rem; background: #f2f2f2; border-left: solid 1px #e7e7e7; padding: 32px; padding: 2rem; line-height: 39.6px; line-height: 2.475rem; overflow: scroll; } div.content-block-editor-guide button.toggle { position: absolute; top: 24px; top: 1.5rem; right: 24px; right: 1.5rem; } div.content-block-editor-guide h2.header { background: #e7e7e7; margin: 64px -32px 32px -32px; margin: 4rem -2rem 2rem -2rem; padding: 32px; padding: 2rem; } div.content-block-editor-guide h2.header.primary { margin-top: -32px; margin-top: -2rem; } div.content-block-editor-guide h3.header { margin-top: 32px; margin-top: 2rem; padding-top: 32px; padding-top: 2rem; border-top: solid 1px #e7e7e7; } div.content-block-editor-guide ul, div.content-block-editor-guide ol { margin-left: 32px; margin-left: 2rem; } div.content-block-editor-guide section { margin: 16px; margin: 1rem; padding: 16px; padding: 1rem; background: white; font-size: 20.8px; font-size: 1.3rem; } div.content-block-editor-guide section blockquote { margin: 0 !important; padding-right: 0 !important; } div.content-block-editor-guide em.guide { font-weight: bold; color: #5d5d5d; } div.content-block-editor-guide div.interact button { min-width: inherit !important; } div.content-block-editor-guide img.icon { margin: 0 2px; height: 1.25em; background: #e7e7e7; padding: 2px; border: solid 1px #b4b4b4; vertical-align: middle; } @media only screen and (max-width: 1024px) { div.content-block-editor-guide { display: none; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.content-block-form { width: 90%; max-width: 90em; } div.content-block-form .select-bar div.l { text-transform: uppercase; } div.content-block-form input, div.content-block-form textarea { background: white; } div.content-block-form textarea { height: 40vh !important; } div.content-block-form div.caption textarea { max-height: 12em; } div.content-block-form .pure-g .checkbox-row { margin-top: 45.6px; margin-top: 2.85rem; margin-left: 32px; margin-left: 2rem; } div.content-block-form section.standard-fields { margin: 19.2px; margin: 1.2rem; } div.content-block-form section.additional-fields { background: #e7e7e7; margin: 19.2px; margin: 1.2rem; margin-bottom: 32px; margin-bottom: 2rem; padding: 16px 32px 0 32px; padding: 1rem 2rem 0 2rem; border: solid 1px #cecece; box-shadow: 0 2px 5px rgba(33, 33, 33, .1); } div.content-block-form section.additional-fields label { color: #555; } div.content-block-form button.navigation { width: 95%; margin-bottom: 32px; margin-bottom: 2rem; } div.content-block-form button.toggleGuide { position: absolute; top: 24px; top: 1.5rem; right: 24px; right: 1.5rem; } div.content-block-form nav.dialogActions { position: relative; } div.content-block-form nav.dialogActions aside.unsaved-changes { position: absolute; right: 120px; bottom: 0; line-height: 46px; font-size: 21.28px; font-size: 1.33rem; color: #1064cb; } div.content-block-form nav.dialogActions aside.unsaved-changes i { margin-right: 5px; } @media only screen and (min-width: 1025px) { div.content-block-form.with-guide div.form { margin-right: 40rem; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .resource-publish-form { max-width: 480px; } .resource-publish-form section.date { margin-bottom: 32px; margin-bottom: 2rem; } .resource-publish-form div.error { height: 64px !important; height: 4rem !important; padding: 0 64px; padding: 0 4rem; text-align: center; } .resource-publish-form button.unpublish { background-color: #5d5d5d !important; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.edit-resource-badgeable p.edit-resource-badgeable__notice { margin: 32px 0 0 0 !important; margin: 2rem 0 0 0 !important; } .badgeRequirement__text { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .badgeRequirement__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; line-height: normal; line-height: initial; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .resource-with-content-container.edit .resource-content-block { margin-bottom: 64px; margin-bottom: 4rem; padding: 32px; padding: 2rem; border: solid 1px #e7e7e7; box-shadow: 0 2px 5px rgba(33, 33, 33, .1); } .resource-with-content-container.edit span.published-date { display: block; margin-top: 16px; margin-top: 1rem; } .resource-with-content-container.edit .edit-resource-navigation { margin-left: 102px; } .resource-with-content-container.edit .edit-resource-navigation section { position: relative; margin-bottom: 32px; margin-bottom: 2rem; padding: 32px; padding: 2rem; background: #f2f2f2; } .resource-with-content-container.edit .edit-resource-navigation section h2 { margin: 0 0 32px 0; margin: 0 0 2rem 0; font-size: 31.68px; font-size: 1.98rem; color: #5d5d5d; text-transform: uppercase; font-weight: 900; letter-spacing: 1px; } .resource-with-content-container.edit .edit-resource-navigation section h2 a { color: #838383; text-decoration: underline; } .resource-with-content-container.edit .edit-resource-navigation section h4 { margin-bottom: 0px; margin-bottom: 0rem; } .resource-with-content-container.edit .edit-resource-navigation section p { color: #676767; margin-bottom: 32px; margin-bottom: 2rem; max-height: 5.75em; overflow: hidden; } .resource-with-content-container.edit .edit-resource-navigation section button { position: absolute; top: 16px; top: 1rem; right: 16px; right: 1rem; } .resource-with-content-container.edit .edit-resource-navigation section .edit-resource__detail img { margin-top: 16px; margin-top: 1rem; max-width: 100%; max-height: 200px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .footer__social ul { margin: 0; padding: 0; overflow-y: hidden; } .footer__social ul li { list-style: none; } .footer__social ul li { float: left; } .footer__social ul li { margin: 0 20px 10px 0; } .footer__social ul li img { width: 40px; } .footer__social ul li:nth-child(4) { clear: left; } .newsletter-form { max-width: 640px; max-width: 40rem; } .newsletter-form header { margin-bottom: 32px; margin-bottom: 2rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .footer-v1 { margin-top: 64px; margin-top: 4rem; box-shadow: inset 0 4px 2px rgba(33, 33, 33, .1); } .footer-v1, .footer-v1 a { color: #2D2D2D; } .footer-v1 ul { list-style: none; margin-bottom: 20px; padding-left: 0; } .footer-v1 li { padding-left: 0; margin-bottom: 10px; } .footer-v1 a { text-decoration: none; } .footer-v1 a:hover { color: #217ded; } .footer-v1 div.copyright, .footer-v1 div.terms { font-size: 22.4px; font-size: 1.4rem; } .footer-v1 div.copyright { margin-top: 32px; margin-top: 2rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .footer { background-color: #dde2e6; margin-top: 40px; } body.hide-footer .footer { display: none; } .footer__banner { display: block; background-color: #f8f8f8; color: #2d2d2d; padding: 20px 0; } .footer__banner:hover, .footer__banner:focus { color: #2d2d2d; background-color: whitesmoke; } .footer__bannerInner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer__bannerIcon img { width: 50px; } .footer__bannerText { font-size: 1.4em; font-weight: bold; margin-left: 20px; } .footer__content { padding: 40px 0; } .footer__title { font-weight: 700; } .footerNav__list { list-style: none; } .footerNav__item { margin: 20px 0; } .footerNav__link { text-decoration: none; color: #4a4a4a; } .footerNav__link:hover, .footerNav__link:focus { color: #242424; } .footer__logo { display: inline-block; margin: 10px 20px; height: 66.66667px; } .footer__logo img { height: 66.66667px; } @media only screen and (min-width: 569px) { .footer__logo { height: 100px; } .footer__logo img { height: 100px; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .page-new .searchBand { background-color: #ecf3fb; padding: 10px; } .page-new .searchBand__search { width: 300px; height: auto; margin: 0 auto; } .page-new .searchBand__search .normal { padding: 0; } .page-new .searchBand__search .normal input { border: 0 !important; border-bottom: 3px solid #4a4a4a !important; background: transparent !important; box-shadow: none !important; } .page-new .searchBand__search .normal span { top: -1px; } .page-new .searchBand__search .normal span::after, .page-new .searchBand__search .normal span::before { height: 3px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxHamburger { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; background-color: #fff; border: none; width: 60px; height: 52px; } @media only screen and (min-width: 569px) { .toolboxHamburger { /* Tablet & Desktop Layout styles*/ } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ @media only screen and (min-width: 569px) { .toolboxNavMenu { display: none; } } .toolboxNavMenu__drawer { width: 100vw; height: 100%; } .toolboxNavMenu__drawerTop { width: 100vw; height: 51px; background: linear-gradient(90deg, #217ded, #26d7b2); } .toolboxNavMenu__drawerContent { margin: 10px 20px; } .toolboxNavMenu__drawerLogo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .toolboxNavMenu__drawerLogo img { width: 144px; height: 30px; } .toolboxNavMenu__drawerClose { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; } .toolboxNavMenu__drawerNavItems { margin-left: 5px; } .toolboxNavMenu__drawerNavItems > :first-child { margin-top: 30px; } .toolboxNavMenu__drawerNavItems > *:not(:first-child) { margin: 40px 0; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxNavMenu__item h3 { font-size: 18px; letter-spacing: normal; } .toolboxNavMenu__subItems { margin-left: 20px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxNavMenu__subItem { margin-top: 10px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ body.style-guide react-component[name="Footer"] { display: none; } .LayoutExamples.wireframe * { background: none; border: none; outline: 2px solid black; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.dialog.collectionAddItemForm { width: 880px; width: 55rem; } div.dialog.collectionAddItemForm h2 { line-height: 30px; margin-bottom: 20px; font-size: 18px; } @media only screen and (max-width: 736px) { div.dialog.collectionAddItemForm h2 { margin-bottom: 40px; } } div.dialog.collectionAddItemForm ul { min-height: 150px; max-height: 60vh; overflow-y: scroll; box-shadow: inset 0 2px 5px rgba(33, 33, 33, .1); border: solid 1px #e7e7e7; } div.dialog.collectionAddItemForm ul .collectionAddItemForm__listItem .collectionAddItemForm__add { background: #ff4133; } div.dialog.collectionAddItemForm ul .collectionAddItemForm__listItem .collectionAddItemForm__view { color: #ff4133; width: 40px; } div.dialog.collectionAddItemForm ul .collectionAddItemForm__listItem a, div.dialog.collectionAddItemForm ul .collectionAddItemForm__listItem button { min-width: 112px; min-width: 7rem; } div.dialog.collectionAddItemForm ul .collectionAddItemForm__listItem i.icon-check { color: #488223; } .collectionAddItemForm__item { position: relative; height: 28px; font-size: 14px; line-height: 28px; margin-bottom: 32px; margin-bottom: 2rem; } .collectionAddItemForm__item span { position: absolute; height: 28px; top: 0; } .collectionAddItemForm__item span.image { left: 0; width: 28px; background-size: cover; } .collectionAddItemForm__item span.text { left: 38px; right: 0; display: block; /* Fallback for non-webkit */ display: -webkit-box; height: 28px; /* Fallback for non-webkit */ -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .collectionAddItemForm__form { position: relative; } .collectionAddItemForm__form fieldset { padding: 20px; background: #f5f5f5; } .collectionAddItemForm__form fieldset input { background: white; } .collectionAddItemForm__form fieldset button { float: right; } .collectionAddItemForm__itemAction { margin: 0 16px 8px 0; } .collectionAddItemForm__newCollection { position: absolute; top: 0; right: 0; height: 30px; } .collectionAddItemForm__newCollection, .collectionAddItemForm__newCollection span { line-height: 30px !important; } .collectionAddItemForm__newCollection svg { position: relative; top: 3px; } .collectionAddItemForm__newCollection svg path { fill: white; } .collectionAddItemForm__newCollection.toolboxButton--secondary svg { top: 2px; } .collectionAddItemForm__newCollection.toolboxButton--secondary svg path { fill: #ff4133; } @media only screen and (max-width: 736px) { .collectionAddItemForm__newCollection { left: 0; width: 100%; top: 30px; } } .collectionAddItemForm__noCollections span { color: #777 !important; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .organization-list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.organization-search { height: 510px; } div.organization-search div.results li { list-style: none; padding: 5px 0 5px 5px; } div.organization-search div.results li:hover { background: #F2F2F2; } div.organization-search div.empty { position: absolute; top: 60px; bottom: 0; left: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; pointer-events: none; } .organizationProfile__editCollection { margin: 20px 0; width: 240px; } div.organizationprofile__portaltoggle.dialog section.switch { margin-left: 0; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .container.organizations-home { margin-top: 20px; } .container.organizations-home aside { background: #e7e7e7; padding: 32px; padding: 2rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .organizationHomeOverview { min-height: 180px; margin-bottom: 20px; } @media only screen and (min-width: 569px) { .organizationHomeOverview { display: -webkit-box; display: -ms-flexbox; display: flex; } } .organizationHomeOverview .organizationHomeOverview__imgBox { float: left; border: 1px solid #4a4a4a; padding: 10px; width: 80px; height: 80px; margin: 0 20px 0 0; } .organizationHomeOverview .organizationHomeOverview__imgBox img { max-width: 60px; max-height: 60px; } @media only screen and (min-width: 569px) { .organizationHomeOverview .organizationHomeOverview__imgBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; float: none; width: 180px; height: 180px; } .organizationHomeOverview .organizationHomeOverview__imgBox img { max-width: 160px; max-height: 160px; } } .organizationHomeOverview .organizationHomeOverview__titleDesc { max-width: 600px; } .organizationHomeOverview .organizationHomeOverview__title { font-size: 26px; display: inline-block; margin-bottom: 10px; } @media only screen and (min-width: 569px) { .organizationHomeOverview .organizationHomeOverview__title { font-size: 36px; margin-bottom: 20px; } } .organizationHomeOverview .organizationHomeOverview__buttons { margin-bottom: 10px; } .organizationHomeOverview .organizationHomeOverview__editButton { display: inline-block; margin: 0 20px 10px 0; vertical-align: middle; width: auto; padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 569px) { .organizationHomeOverview .organizationHomeOverview__editButton { margin: 0 20px 0 0; } } .organizationHomeOverview .organizationHomeOverview__description { font-size: 16px; } @media only screen and (min-width: 569px) { .organizationHomeOverview .organizationHomeOverview__description { font-size: 18px; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .organizationHome__banner { border: none; height: 193px; background-color: #ecf3fb; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .organizationMember { font-family: "Metropolis", Arial, Helvetica, sans-serif; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; /*outline: $_guideline;*/ width: 250px; height: 70px; margin-left: 20px; } @media only screen and (min-width: 569px) { .organizationMember { margin-left: 0; } } .organizationMember .organizationMember__avatar { /*outline: $_guideline;*/ } .organizationMember .organizationMember__info { position: relative; font-weight: 600; /*outline: $_guideline;*/ margin-left: 20px; } .organizationMember .organizationMember__info .organizationMember__name { display: block; color: #4a4a4a; } .organizationMember .organizationMember__info .organizationMember__title { display: block; color: #217ded; } .organizationMember .organizationMember__info .organizationMember__action { font-style: italic; } .organizationMember .organizationMember__info .organizationMember__button { margin-top: 10px; } .newToolboxAvatar { position: relative; border: 1px solid #4a4a4a; border-radius: 50%; width: 60px; height: 60px; overflow: hidden; } .newToolboxAvatar .newToolboxAvatar__img { width: 60px; height: 60px; position: absolute; top: -1px; left: -1px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .organizationLearn__searchGroup { margin: 20px 0; } .organizationLearn__inner { margin: 10px 0; } @media only screen and (min-width: 569px) { .toolboxFilterGroup__filters { display: -webkit-box; display: -ms-flexbox; display: flex; } .toolboxFilterGroup__filters > * { padding-right: 20px; } } .toolboxFilterGroup__selections { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 10px -10px; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: -20px; } .toolboxFilterGroup__selections > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 3px 10px; } @media only screen and (min-width: 569px) { .toolboxFilterGroup__selections { margin-top: 20px; } } .toolboxFilterGroup__filterTag { padding-right: 20px; } .toolboxFilterGroup__filterTag h5 { font-size: 18px; margin-right: 5px; } .toolboxFilterGroup__filterTag .filterTag__icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; width: 17px; height: 17px; border-radius: 50%; background-color: #ff4133; cursor: pointer; } .toolboxFilterGroup__filterTag svg path { fill: #fff; stroke: #fff; stroke-width: 2; } .toolboxFilterGroup__clearSelections { color: #ff4133; font-weight: 500; cursor: pointer; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .organizationUsers .backendPagination { width: 100%; } .organizationHome__member { margin-bottom: 40px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.organization-report-page { /* Override a conflict from use of pure grid */ } div.organization-report-page li.pure-g { letter-spacing: normal; } div.organization-report-page div.content { margin-top: 64px; margin-top: 4rem; } div.organization-report-page h2 { height: 30px; line-height: 30px; padding-left: 110px; margin-bottom: 32px; margin-bottom: 2rem; background: url(/icons/reports-pencil.png) left center no-repeat; background-size: 100px 30px; } div.organization-report-page h3 { color: #5d5d5d; text-transform: uppercase; margin-bottom: 16px; margin-bottom: 1rem; } div.organization-report-page section, div.organization-report-page .section { margin-bottom: 64px !important; margin-bottom: 4rem !important; } div.organization-report-page hr { height: 15px; background: url(/icons/reports-separator-repeat.png) repeat-x; background-size: 4px 15px; border: 0; margin: 48px 0; margin: 3rem 0; } div.organization-report-page ul.intro { margin: 0; padding: 0; } div.organization-report-page ul.intro li { list-style: none; } div.organization-report-page p.number { overflow: hidden; } div.organization-report-page p.number span { float: left; } div.organization-report-page p.number span.number { height: 128px; height: 8rem; line-height: 128px; line-height: 8rem; margin-right: 48px; margin-right: 3rem; font-size: 128px; font-size: 8rem; font-weight: 700; color: #16adae; } @media only screen and (max-width: 414px) { div.organization-report-page p.number span.number { display: none; } } div.organization-report-page p.number span.text { margin: 24px 0; margin: 1.5rem 0; font-size: 32px; font-size: 2rem; line-height: 40px; line-height: 2.5rem; } div.organization-report-page ul.users { margin: 0; padding: 0; } div.organization-report-page ul.users li { list-style: none; } div.organization-report-page ul.users li { margin-bottom: 32px; margin-bottom: 2rem; } div.organization-report-page ul.users li:first-child { margin-bottom: 20px; } div.organization-report-page ul.users li:first-child h4 { font-weight: 700; } div.organization-report-page ul.users li h4 { font-weight: 500; margin-bottom: 16px; margin-bottom: 1rem; } div.organization-report-page ul.users li h4.course { color: #5d5d5d; } div.organization-report-page ul.users li ol.courses li { margin-bottom: 16px; margin-bottom: 1rem; color: #aaa; } div.organization-report-page ul.users li ol.courses li.complete { color: #555; } div.organization-report-page aside { font-family: "Merriweather", sans-serif; margin-bottom: 32px; margin-bottom: 2rem; color: #777; } div.organization-report-page ul.arrow { margin: 0; padding: 0; height: 128px; height: 8rem; line-height: 32px; line-height: 2rem; padding-left: 176px; padding-left: 11rem; padding-top: 16px; padding-top: 1rem; background-size: 8rem 8rem !important; } div.organization-report-page ul.arrow li { list-style: none; } div.organization-report-page ul.arrow.up { background: url(/images/arrows/reports-arrow-up.png) left center no-repeat; } div.organization-report-page ul.arrow.down { background: url(/images/arrows/reports-arrow-down.png) left center no-repeat; } div.organization-report-page ul.arrow.flat { background: url(/images/arrows/reports-arrow-nochange.png) left center no-repeat; } div.organization-report-page table { width: 100%; text-align: left; } div.organization-report-page table th, div.organization-report-page table td { padding-bottom: 16px; padding-bottom: 1rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .invitesForm__new, .invitesForm__existing { min-height: 20vh; } .invitesForm__list { min-height: 150px; max-height: 60vh; overflow-y: scroll; box-shadow: inset 0 2px 5px rgba(33, 33, 33, .1); border: solid 1px #e7e7e7; margin-bottom: 20px; } .invitesForm__customMessage textarea[role=input] { height: 5em !important; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .dialog.inviteConfirmation { text-align: center; } .dialog.inviteConfirmation p { margin: 20px 0; } .dialog.inviteConfirmation .error { margin-bottom: 40px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ body.organizations .header { display: none; } @media only screen and (min-width: 569px) { body.organizations .header { display: block; } } .organizationHome { font-family: "Metropolis", Arial, Helvetica, sans-serif; } .organizationHome .organizationHome__joinButton { display: inline-block; } .organizationHome .organizationHome__main .organizationHome__tabs .organizationHome__tabsBar { border-bottom: 1px solid #4a4a4a; } .organizationHome .organizationHome__main .organizationHome__tabs .tabs__content { margin: 20px 0; } @media only screen and (min-width: 569px) { .organizationHome .organizationHome__main .organizationHome__tabs .tabs__content { margin: 40px 0; } } .organizationHome .organizationHome__main .organizationHome__tabs .tabs__tagLine { margin-top: 10px; } .organizationHome .organizationHome__main .organizationTab__section { margin: 20px -10px; } .organizationHome .organizationHome__main .organizationTab__searchResults .backendPagination { width: 100%; } .organizationHome .organizationHome__leaders { margin: 20px 0 40px 0; } .organizationHome .organizationHome__collaborateOverview h2 { margin-bottom: 10px; } .organizationHome .organizationHome__collaborateOverview p { margin-bottom: 40px; } .organizationHome .organizationHome__sidebar .sidebar__tagline { color: #217ded; font-size: 18px; font-weight: 600; font-style: italic; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.change-password-page div.container, div.forgotPassword div.container { padding-top: 32px; padding-top: 2rem; min-height: 400px; max-width: 800px; } div.forgotPassword button:disabled { background: #888; } div.forgotPassword .forgotPassword_info { margin-top: 40px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.product-details div.content { margin-top: 32px; margin-top: 2rem; line-height: 1.5em; } div.product-details div.content section.title { margin-bottom: 16px; margin-bottom: 1rem; } div.product-details div.content section.title h1 { margin-right: 50%; color: #223057; } div.product-details div.content section.author { margin-bottom: 32px; margin-bottom: 2rem; color: #555; } div.product-details div.content section.hero { margin-bottom: 32px; margin-bottom: 2rem; } div.product-details div.content section.hero img { border: solid 1px #e7e7e7; max-width: 100%; max-height: 500px; } div.product-details div.content section.description ul { margin-left: 32px; margin-left: 2rem; } div.product-details div.content section.description h2 { margin: 32px 0 16px 0; margin: 2rem 0 1rem 0; color: #223057; } div.product-details div.content section.description h2:first-child { margin-top: 0; } div.product-details div.content section.description table { margin: 0 -32px; margin: 0 -2rem; border-spacing: 32px; border-spacing: 2rem; } div.product-details div.content section.description table td { vertical-align: top; } div.product-details div.content section.meta button { height: 96px; height: 6rem; padding: 0 48px; padding: 0 3rem; font-size: 32px; font-size: 2rem; font-weight: bold; } div.product-details div.content section.meta div.tags { margin: 64px 0 0 0; margin: 4rem 0 0 0; } @media only screen and (max-width: 568px) { div.product-details div.content section.meta div.tags { margin: 2rem 0; font-size: 1.35rem; } } div.product-details div.content section.meta div.tags a { font-family: "Merriweather", sans-serif; color: #555; } div.product-details div.content section.meta div.tags a:after { content: ", "; } div.product-details div.content section.meta div.tags a:last-child:after { content: ""; } div.product-details div.content section.meta div.tags a:hover { text-decoration: underline; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.product-index-page header { margin: 48px 0 64px 0; margin: 3rem 0 4rem 0; } div.product-index-page header h2 { background: #fff8dc; border: solid 1px #ffe476; padding: 32px; padding: 2rem; margin-bottom: 32px; margin-bottom: 2rem; } body.report .report-container { margin-top: 32px; margin-top: 2rem; margin-bottom: 32px; margin-bottom: 2rem; } body.report-menu .report-menu-container { margin-top: 32px; margin-top: 2rem; margin-bottom: 32px; margin-bottom: 2rem; } body.report-menu li { list-style: none; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .assessorsForm__list { min-height: 150px; max-height: 60vh; overflow-y: scroll; box-shadow: inset 0 2px 5px rgba(33, 33, 33, .1); border: solid 1px #e7e7e7; margin-bottom: 20px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .resource__productDialog, .resource__errorDialog { width: 90vh; height: 90vh; overflow: auto; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .buttonSecondaryExample { margin-top: 20px; } .buttonSecondaryExample h3 { margin: 20px 0; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .iconPanelExamples { height: 400px; margin-top: 40px; text-align: center; } .iconPanelExample { height: 100px; margin-top: 20px; text-align: center; } .iconPanelExample--center { margin: 20px auto; max-width: 90%; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .iconMenuExamples { margin-top: 40px; text-align: center; height: 500px; } .iconMenuExample { margin: 80px 0; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .toolboxFilterExample { height: 200px; margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; } .toolboxFilterExample > div { margin: 0 10px; } .toolboxFilterExample__data { display: block; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .tooltipExample { text-align: center; } .tooltipExample > * { margin-bottom: 40px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.style-guide-page { /*these need to be here because we only have single participants. Also included in ChatParticipants.css */ } div.style-guide-page div.primary-tabs { margin-top: 32px; margin-top: 2rem; } div.style-guide-page div.primary-tabs > div > nav { margin-bottom: 32px; margin-bottom: 2rem; } div.style-guide-page div.dashboard-content { min-height: auto; } div.style-guide-page aside.info { background: #fff8dc; padding: 16px; padding: 1rem; margin-bottom: 64px; margin-bottom: 4rem; } div.style-guide-page aside.info p { font-size: 23.2px; font-size: 1.45rem; } div.style-guide-page .sgTitle { margin-bottom: 10px; } div.style-guide-page .sgExampleTitle { padding: 10px; background-color: #f8f8f8; color: #2d2d2d; display: block; border: 1px solid #ebebeb; } div.style-guide-page .sgSection { margin: 0 0 40px; } div.style-guide-page .sgSection p code { font-size: .9em; color: #4a4a4a; } div.style-guide-page .sgSection p:not(:last-child) { margin-bottom: 20px; } div.style-guide-page .sgSection--paddingRight { padding-right: 20px; } div.style-guide-page .sgSection--paddingLeft { padding-left: 20px; } div.style-guide-page .sgCodeExample { background-color: #2d2d2d; color: #fff; margin-top: 20px; } div.style-guide-page .sgCode { border: 1px solid #2d2d2d; overflow: scroll; } div.style-guide-page .sgGridWrapper { padding: 10px; border: 1px solid red; } div.style-guide-page .sgGrid { padding: 20px; background-color: #dde2e6; outline: 1px solid #fff; text-align: center; } div.style-guide-page .colors { display: block; } div.style-guide-page .colorCard { font-size: 12px; display: inline-block; width: 150px; padding: 10px; border: 1px solid #dde2e6; margin: 0 20px 20px 0; } div.style-guide-page .colorCard__color { height: 70px; margin-bottom: 10px; border: 1px solid #dde2e6; } div.style-guide-page .colorCard__variable { display: inline-block; margin-bottom: 0.25em; } div.style-guide-page .colorCard__value { font-size: 0.9em; color: #8d97a0; } div.style-guide-page .measurement { font-size: 12px; margin-bottom: 20px; } div.style-guide-page .measurement__line { position: relative; height: 30px; border-left: 2px solid #2d2d2d; border-right: 2px solid #2d2d2d; margin-bottom: 10px; } div.style-guide-page .measurement__line::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 30px; width: 100%; background-color: rgba(141, 151, 160, .3); } div.style-guide-page .measurement__variable { display: inline-block; margin-bottom: 0.25em; } div.style-guide-page .measurement__value { font-size: 0.9em; } div.style-guide-page .measurement { font-size: 12px; margin-bottom: 20px; } div.style-guide-page .measurement__line { position: relative; height: 30px; border-left: 2px solid #2d2d2d; border-right: 2px solid #2d2d2d; margin-bottom: 10px; } div.style-guide-page .measurement__line::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 30px; width: 100%; background-color: rgba(141, 151, 160, .3); } div.style-guide-page .measurement__variable { display: inline-block; margin-bottom: 0.25em; } div.style-guide-page .measurement__value { font-size: 0.9em; color: #8d97a0; } div.style-guide-page .chatMeta .chatMeta__resources { padding: 20px; } div.style-guide-page .chatMeta .chatMeta__resources div.chatMeta__resources__title i { float: right; font-weight: 900; font-size: 12px; padding: 5px 0; } div.style-guide-page .chatMeta .chatMeta__resources li.chatResource { border-bottom: none; display: block; list-style-type: none; padding: 8px 0; position: relative; text-decoration: none; } div.style-guide-page .chatMeta .chatMeta__resources li.chatResource .chatResource__img { background-size: cover; border-radius: 5px; height: 45px; position: absolute; width: 60px; } div.style-guide-page .chatMeta .chatMeta__resources li.chatResource header { padding-left: 68px; padding-right: 30px; height: 45px; } div.style-guide-page .chatMeta .chatMeta__resources li.chatResource header a { display: block; line-height: 15px; } div.style-guide-page .chatMeta .chatMeta__resources li.chatResource header a.name { color: black; font-size: 14px; font-weight: bold; max-height: 30px; overflow: hidden; padding: 2px; width: 320px; width: 20rem; } div.style-guide-page .chatMeta .chatMeta__resources li.chatResource header a.user { height: 15px; font-size: 12px; padding-top: 2px; } div.style-guide-page .chatMeta .chatMeta__resources li.chatResource header .chatResource__info { display: inline-block; } div.style-guide-page .chatMeta .chatMeta__resources li.chatResource header .chatResource__info .chatResource__info--link { font-size: 12px; padding: 2px; width: 320px; width: 20rem; } div.style-guide-page .chatMeta .chatMeta__resources li.chatResource header .chatResource__icons { display: inline-block; height: 45px; position: absolute; right: 32px; right: 2rem; top: 24px; top: 1.5rem; } div.style-guide-page .chatMeta .chatMeta__resources li.chatResource header .chatResource__icons i { padding-left: 16px; padding-left: 1rem; } div.style-guide-page .chatMeta div.chatParticipants { padding: 16px; padding: 1rem; } div.style-guide-page .chatMeta div.chatParticipants div.chatParticipants__title span.icons { position: absolute; right: 64px; right: 4rem; } div.style-guide-page .chatMeta div.chatParticipants div.chatParticipants__title span.icons i { font-size: 14px; font-weight: 900; padding-left: 16px; padding-left: 1rem; } div.style-guide-page .chatMeta div.chatParticipants .chatParticipants__avatars { list-style-type: none; padding: 16px 0; padding: 1rem 0; } div.style-guide-page .chatMeta div.chatParticipants .chatParticipants__avatars .chatParticipants__individual { display: inline-block; padding: 16px; padding: 1rem; } div.style-guide-page .chatMeta div.chatParticipants .chatParticipants__avatars .chatParticipants__individual li.chatParticipant { text-align: center; } div.style-guide-page .chatMeta div.chatParticipants .chatParticipants__avatars .chatParticipants__individual li.chatParticipant a img { height: 60px; width: 60px; } div.style-guide-page .chatMeta div.chatParticipants .chatParticipants__avatars .chatParticipants__individual .chatParticipant--firstName { padding: 8px 0; padding: .5rem 0; text-align: center; } div.style-guide-page .chatMeta div.chatParticipants .chatParticipants__avatars .chatParticipants__individual .chatParticipant--follow { color: white; height: 40px; height: 2.5rem; line-height: 32px; line-height: 2rem; margin: 0; min-width: 104px; min-width: 6.5rem; padding: 2px; text-transform: none; width: 104px; width: 6.5rem; } div.style-guide-page .chatMeta div.chatParticipants .chatParticipants__avatars .chatParticipants__individual .chatParticipant--follow i { padding: 8px; padding: .5rem; } .chatStream__compose { padding-bottom: 80px; border-bottom: solid 1px #dde7f5; -webkit-box-flex: 0; -ms-flex: none; flex: none; } .chatStream__compose .chatStream__toggleCompose { background: #ff4133; font-size: 18px; font-weight: 700; text-transform: none; } .styleGuide__chatEvents { margin-bottom: 250px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .tabNav { margin-bottom: 2em; } .tabNav__list { margin: 0 !important; } @media only screen and (min-width: 569px) { .tabNav__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 5px solid #217ded; } } .tabNav__item { list-style: none; border-bottom: 1px solid #ecf3fb; margin-bottom: 0 !important; } .tabNav__item:last-child { border: 0; } @media only screen and (min-width: 569px) { .tabNav__item { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; border: 0; } } .tabNav__link { display: block; padding: .65em; text-align: center; text-decoration: none !important; background-color: #dde2e6; color: #2d2d2d !important; } .tabNav__link.is--active, .tabNav__link:hover, .tabNav__link:focus { background-color: #217ded; color: #fff !important; cursor: pointer; } @media only screen and (min-width: 569px) { .tabNav__link { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; display: inline-block; } } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.assignments-index div.assignments-list { margin-top: 20px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.user-search { height: 380px; } div.user-search h4 { margin-bottom: 32px; margin-bottom: 2rem; } div.user-search div.results a.avatar, div.user-search div.results a.avatar-sm { display: block; padding: 5px; } div.user-search div.results a.avatar:hover, div.user-search div.results a.avatar-sm:hover { background: white; } div.user-search div.empty { position: absolute; top: 60px; bottom: 0; left: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; pointer-events: none; } .dialog.user-form-dialog p { margin-bottom: 20px; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .container.user-admin { margin-top: 20px; } .container.user-admin aside { background: #e7e7e7; padding: 32px; padding: 2rem; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ .organizationUsersForm { width: 75vw; max-width: 1024px; } .organizationUsersForm__list { min-height: 150px; max-height: 60vh; overflow-y: scroll; box-shadow: inset 0 2px 5px rgba(33, 33, 33, .1); border: solid 1px #e7e7e7; margin-bottom: 20px; } .organizationUsersForm__edit { position: absolute; z-index: 1; left: 0; right: 0; bottom: 100%; height: 100%; padding: 38.4px; padding: 2.4rem; background: #f2f2f2; border: solid 1px #bfbfbf; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.4s; } .organizationUsersForm__edit.active { bottom: 0; } .organizationUsersForm__edit div[data-react-toolbox="input"] { margin-top: 20px; } .organizationUsersForm__edit div[data-react-toolbox="input"] input { background: white; } .organizationUsersForm__edit div[data-react-toolbox="input"] label { top: 0 !important; } .organizationUsersForm__edit .dialogActions { position: absolute; bottom: 20px; left: 20px; right: 20px; } .organizationUsersForm__multiplePartners { margin: 10px; padding: 10px; background: #3a4674; color: white; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.assign-user-container h3 { text-align: center; } div.assign-user-container section.assign div.assignables { position: relative; height: 50vh; overflow-y: auto; margin: 16px 0; margin: 1rem 0; text-align: center; } div.assign-user-container section.assign div.assignables ul li { padding: 0; } div.assign-user-container section.assign div.assignables ul li, div.assign-user-container section.assign div.assignables ul li label { min-height: auto; } div.assign-user-container section.assign div.assignables ul li label { padding: 8px 0; padding: 0.5rem 0; } div.assign-user-container section.assign div.assignables ul li:hover { background: #fff8dc; } div.assign-user-container section.confirm div.changes { margin-bottom: 32px; margin-bottom: 2rem; max-height: 300px; overflow-x: hidden; overflow-y: auto; } div.assign-user-container section.confirm div.changes h4 { display: block; margin-bottom: 16px; margin-bottom: 1rem; color: #5d5d5d; font-weight: bold; text-align: center; } div.assign-user-container section.confirm div.changes div.courses { text-align: center; } div.assign-user-container section.confirm div.changes div.courses span { display: block; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */ div.userProfile__page { min-height: 500px; } div.userProfile__page .userProfile__avatar { position: absolute; left: 7px; width: 200px; top: -60px; text-align: center; } div.userProfile__page .userProfile__avatar img { width: 200px; height: 200px; border: solid 3px white; } div.userProfile__page .userProfile__details { margin-top: 20px; padding-left: 210px; min-height: 176px; } div.userProfile__page .userProfile__details h1 { margin-left: 24px; margin-left: 1.5rem; } div.userProfile__page .userProfile__details ul { padding: 0; } div.userProfile__page .userProfile__contact { margin-top: 20px; } @media only screen and (max-width: 768px) { div.userProfile__page .userProfile__avatar { display: none; } div.userProfile__page .userProfile__details { margin-top: 0; padding-left: 0; } div.userProfile__page .userProfile__details h1 { margin: 0 0 5px 65px; line-height: 1em; font-size: 2.5rem; } } h2.user-details { margin: 32px 0; margin: 2rem 0; } /* Variables -------------------------------------------------- */ /* Fonts */ /* New global spacing variables */ /* New global measurment variables */ /* Colors -------------------------------------------------- New Colors Temporarily prefixing with `new-` Rename when colors more widely implemented */