` around two things: a `` and an ``. Give the `

` a class of `ko-field` and you're good to go. Remember to use fancy HTML5 form fields! The JS included with kickoff is smart enough to handle the labels and degrade gracefully (e.g., in browsers that don't support placeholders, the labels are always present). ```html_example

Name

Email Address

Your Message

``` ### Form Validation Throw a class of `ko-invalid` on the `` and the `` to get an invalid style and use `ko-valid` if you want an explicit valid style. Use the `` for your error/success message. ```html_example

Not quite right

Looks good!

``` ### Many column'd forms You can combine fields with Bourbon Neat to make a nice form layout. We've got built-in classes for a few widths based on our default 12 column grid, but feel free to add your own custom widths or classes. `ko-field-wrapper` is a clearfix'd container. ```html_example

Name

Email Address

``` ```html_example

Name

Phone

``` ```html_example

Name

Phone

Twitter Handle

``` ### Form Actions Put your buttons at the bottom of the form wrapped in a `

` with class `ko-form-actions`. ```html_example

Name

Email Address

``` ### Checkboxes and Radios As of right now, checkboxes and radios are **not** native `` elements. To get radios working like radios, you'll want to add: ``` $('.ko-radios li').click(function(){ if ($(this).hasClass('disabled')) return; $(this).siblings().removeClass('ko-checked'); $(this).addClass('ko-checked'); }); ``` To get checkboxes working like checkboxes, you'll want to add: ``` $('.ko-checkboxes li').each(function(){ $(this).find('.ko-choice-mark').html(''); }); $('.ko-checkboxes li').click(function(){ if ($(this).hasClass('disabled')) return; $(this).toggleClass('ko-checked'); }); ``` They look like this: ```html_example

Choose this one
Or maybe this
Perhaps this is better
But this one's worse

``` ```html_example

You can choose
As many things
As you'd like!
Except this thing

``` */ .ko-field-wrapper:after { content: ""; display: table; clear: both; } .ko-field { position: relative; margin-top: 1.6rem; } .ko-field:after { content: ""; display: table; clear: both; } .ko-field.ko-field-half { float: left; display: block; margin-right: 2.35765%; width: 48.82117%; } .ko-field.ko-field-half:last-child { margin-right: 0; } .ko-field.ko-field-third { float: left; display: block; margin-right: 2.35765%; width: 31.76157%; } .ko-field.ko-field-third:last-child { margin-right: 0; } .ko-field.ko-field-fourth { float: left; display: block; margin-right: 2.35765%; width: 23.23176%; } .ko-field.ko-field-fourth:last-child { margin-right: 0; } .ko-field:last-child { margin-bottom: 0; } .ko-field input[type="text"], .ko-field input[type="email"], .ko-field input[type="password"], .ko-field input[type="number"], .ko-field input[type="search"], .ko-field input[type="date"], .ko-field input[type="time"], .ko-field input[type="tel"], .ko-field select, .ko-field textarea { -webkit-appearance: none; border-radius: 0; border: none; margin: 0; padding: 0; font-family: trade; background-color: #FFFFFF; font-size: 1rem; color: #232A31; display: block; width: 100%; border-style: solid; border-color: #E8E8E8; border-width: 1px; border-radius: 2px; padding: 1rem; -webkit-transition: border-color 0.2s; -moz-transition: border-color 0.2s; transition: border-color 0.2s; } .ko-field input[type="text"]::-webkit-search-decoration, .ko-field input[type="email"]::-webkit-search-decoration, .ko-field input[type="password"]::-webkit-search-decoration, .ko-field input[type="number"]::-webkit-search-decoration, .ko-field input[type="search"]::-webkit-search-decoration, .ko-field input[type="date"]::-webkit-search-decoration, .ko-field input[type="time"]::-webkit-search-decoration, .ko-field input[type="tel"]::-webkit-search-decoration, .ko-field select::-webkit-search-decoration, .ko-field textarea::-webkit-search-decoration { -webkit-appearance: none; } .ko-field input[type="text"]::-webkit-input-placeholder, .ko-field input[type="email"]::-webkit-input-placeholder, .ko-field input[type="password"]::-webkit-input-placeholder, .ko-field input[type="number"]::-webkit-input-placeholder, .ko-field input[type="search"]::-webkit-input-placeholder, .ko-field input[type="date"]::-webkit-input-placeholder, .ko-field input[type="time"]::-webkit-input-placeholder, .ko-field input[type="tel"]::-webkit-input-placeholder, .ko-field select::-webkit-input-placeholder, .ko-field textarea::-webkit-input-placeholder { color: #8A8A8A; } .ko-field input[type="text"]::-webkit-inner-spin-button, .ko-field input[type="text"]::-webkit-outer-spin-button, .ko-field input[type="email"]::-webkit-inner-spin-button, .ko-field input[type="email"]::-webkit-outer-spin-button, .ko-field input[type="password"]::-webkit-inner-spin-button, .ko-field input[type="password"]::-webkit-outer-spin-button, .ko-field input[type="number"]::-webkit-inner-spin-button, .ko-field input[type="number"]::-webkit-outer-spin-button, .ko-field input[type="search"]::-webkit-inner-spin-button, .ko-field input[type="search"]::-webkit-outer-spin-button, .ko-field input[type="date"]::-webkit-inner-spin-button, .ko-field input[type="date"]::-webkit-outer-spin-button, .ko-field input[type="time"]::-webkit-inner-spin-button, .ko-field input[type="time"]::-webkit-outer-spin-button, .ko-field input[type="tel"]::-webkit-inner-spin-button, .ko-field input[type="tel"]::-webkit-outer-spin-button, .ko-field select::-webkit-inner-spin-button, .ko-field select::-webkit-outer-spin-button, .ko-field textarea::-webkit-inner-spin-button, .ko-field textarea::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .ko-field input[type="text"]::-moz-placeholder, .ko-field input[type="email"]::-moz-placeholder, .ko-field input[type="password"]::-moz-placeholder, .ko-field input[type="number"]::-moz-placeholder, .ko-field input[type="search"]::-moz-placeholder, .ko-field input[type="date"]::-moz-placeholder, .ko-field input[type="time"]::-moz-placeholder, .ko-field input[type="tel"]::-moz-placeholder, .ko-field select::-moz-placeholder, .ko-field textarea::-moz-placeholder { /* Firefox 19+ */ color: #8A8A8A; } .ko-field input[type="text"]:-ms-input-placeholder, .ko-field input[type="email"]:-ms-input-placeholder, .ko-field input[type="password"]:-ms-input-placeholder, .ko-field input[type="number"]:-ms-input-placeholder, .ko-field input[type="search"]:-ms-input-placeholder, .ko-field input[type="date"]:-ms-input-placeholder, .ko-field input[type="time"]:-ms-input-placeholder, .ko-field input[type="tel"]:-ms-input-placeholder, .ko-field select:-ms-input-placeholder, .ko-field textarea:-ms-input-placeholder { color: #8A8A8A; } .ko-field input[type="text"]:focus, .ko-field input[type="text"]:active, .ko-field input[type="email"]:focus, .ko-field input[type="email"]:active, .ko-field input[type="password"]:focus, .ko-field input[type="password"]:active, .ko-field input[type="number"]:focus, .ko-field input[type="number"]:active, .ko-field input[type="search"]:focus, .ko-field input[type="search"]:active, .ko-field input[type="date"]:focus, .ko-field input[type="date"]:active, .ko-field input[type="time"]:focus, .ko-field input[type="time"]:active, .ko-field input[type="tel"]:focus, .ko-field input[type="tel"]:active, .ko-field select:focus, .ko-field select:active, .ko-field textarea:focus, .ko-field textarea:active { border-color: #FF6600; box-shadow: none; outline: none; } .ko-field input[type="text"]:focus.ko-valid, .ko-field input[type="text"]:active.ko-valid, .ko-field input[type="email"]:focus.ko-valid, .ko-field input[type="email"]:active.ko-valid, .ko-field input[type="password"]:focus.ko-valid, .ko-field input[type="password"]:active.ko-valid, .ko-field input[type="number"]:focus.ko-valid, .ko-field input[type="number"]:active.ko-valid, .ko-field input[type="search"]:focus.ko-valid, .ko-field input[type="search"]:active.ko-valid, .ko-field input[type="date"]:focus.ko-valid, .ko-field input[type="date"]:active.ko-valid, .ko-field input[type="time"]:focus.ko-valid, .ko-field input[type="time"]:active.ko-valid, .ko-field input[type="tel"]:focus.ko-valid, .ko-field input[type="tel"]:active.ko-valid, .ko-field select:focus.ko-valid, .ko-field select:active.ko-valid, .ko-field textarea:focus.ko-valid, .ko-field textarea:active.ko-valid { border-color: #6AA220; } .ko-field input[type="text"]:invalid, .ko-field input[type="email"]:invalid, .ko-field input[type="password"]:invalid, .ko-field input[type="number"]:invalid, .ko-field input[type="search"]:invalid, .ko-field input[type="date"]:invalid, .ko-field input[type="time"]:invalid, .ko-field input[type="tel"]:invalid, .ko-field select:invalid, .ko-field textarea:invalid { box-shadow: none; } .ko-field input[type="text"].ko-invalid, .ko-field input[type="email"].ko-invalid, .ko-field input[type="password"].ko-invalid, .ko-field input[type="number"].ko-invalid, .ko-field input[type="search"].ko-invalid, .ko-field input[type="date"].ko-invalid, .ko-field input[type="time"].ko-invalid, .ko-field input[type="tel"].ko-invalid, .ko-field select.ko-invalid, .ko-field textarea.ko-invalid { border-color: #D81D1D; } .ko-field input[type="text"].ko-valid, .ko-field input[type="email"].ko-valid, .ko-field input[type="password"].ko-valid, .ko-field input[type="number"].ko-valid, .ko-field input[type="search"].ko-valid, .ko-field input[type="date"].ko-valid, .ko-field input[type="time"].ko-valid, .ko-field input[type="tel"].ko-valid, .ko-field select.ko-valid, .ko-field textarea.ko-valid { border-color: #6AA220; } .ko-field label { font-weight: bold; font-family: trade; text-transform: uppercase; color: #FF6600; left: 0; opacity: 0; display: block; position: absolute; bottom: 100%; width: 100%; display: inline-block; padding: .1rem 1rem; line-height: 1rem; font-size: 0.75rem; -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px); -o-transform: translateY(5px); transform: translateY(5px); -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .no-placeholder .ko-field label { opacity: 1; } .no-csstransitions .ko-field label { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ko-field label.ko-active { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ko-field label.ko-active.ko-valid { color: #6AA220; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ko-field label.ko-invalid { opacity: 1; color: #D81D1D; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ko-field label.ko-valid { color: #6AA220; opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ko-field select { cursor: pointer; background-color: #F5F5F5; background-image: -webkit-linear-gradient(#F5F5F5, #ededed); background-image: linear-gradient(#F5F5F5, #ededed); } .ko-form-actions { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; margin-top: 2rem; } @-webkit-keyframes check-it { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.25); -webkit-animation-timing-function: ease; } 100% { -webkit-transform: scale(1); -webkit-animation-timing-function: ease-out; } } @-moz-keyframes check-it { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.25); -moz-animation-timing-function: ease; } 100% { -moz-transform: scale(1); -moz-animation-timing-function: ease-out; } } @keyframes check-it { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; animation-timing-function: ease; } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } } ul.ko-checkboxes, ul.ko-radios { margin-bottom: 0; margin-left: 0; list-style-type: none; } ul.ko-checkboxes li, ul.ko-radios li { margin: 0; cursor: pointer; margin-bottom: 1rem; line-height: 1.5rem; } ul.ko-checkboxes li:hover .ko-choice-mark svg { fill: #E8E8E8; } ul.ko-checkboxes li.disabled:hover .ko-choice-mark svg { fill: transparent; } ul.ko-checkboxes li.ko-checked:hover .ko-choice-mark svg { fill: #FF6600; } ul.ko-radios li:hover .ko-choice-mark:after { background-color: #E8E8E8; } ul.ko-radios li.disabled:hover .ko-choice-mark:after { background-color: transparent; } ul.ko-radios li.ko-checked:hover .ko-choice-mark:after { background-color: #FF6600; } .disabled .ko-choice-label { color: #8A8A8A; } .ko-choice-mark { position: relative; border: 0.125rem solid #FF6600; width: 1.5rem; height: 1.5rem; margin-right: .4rem; display: inline-block; vertical-align: bottom; background-color: #FFFFFF; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .ko-choice-mark:after { content: ''; position: absolute; top: 10%; left: 10%; background-color: transparent; height: 80%; width: 80%; border-radius: 50%; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .disabled .ko-choice-mark { border: 0.125rem solid #E8E8E8; } .ko-radios .ko-choice-mark { border-radius: 50%; } .ko-checked .ko-choice-mark { -webkit-animation: check-it 0.2s forwards; -moz-animation: check-it 0.2s forwards; animation: check-it 0.2s forwards; } .ko-radios .ko-checked .ko-choice-mark:after { background-color: #FF6600; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ko-choice-mark svg { width: 100%; height: 100%; fill: transparent; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .ko-checked .ko-choice-mark svg { fill: #FF6600; } /*doc --- title: Links name: links category: Elements --- Throw a class of `ko-link` on any link to give it a nice format. Links inside of paragraphs and lists inside of the `ko-article` class get this treatment by default. ```html_example

Eleifend eaque quo semper pellentesque laboriosam habitasse, asperiores ultrices condimentum netus, rerum?

``` */ .ko-link, .ko-article p a, .ko-article ul a, .ko-article ol a { font-weight: bold; color: #FF6600; border-bottom: 1px solid #E8E8E8; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .ko-link:hover, .ko-article p a:hover, .ko-article ul a:hover, .ko-article ol a:hover { color: #e65c00; border-color: #FF6600; } .ko-link:active, .ko-article p a:active, .ko-article ul a:active, .ko-article ol a:active, .ko-link:focus, .ko-article p a:focus, .ko-article ul a:focus, .ko-article ol a:focus { color: #ff751a; } .dropmenu { border: solid 1px #969696; background-color: #FFFFFF; height: 16px; cursor: pointer; line-height: 16px; } input.dropmenu { cursor: text; } .dropDownButton { width: 16px; line-height: 16px; height: 16px; cursor: pointer; float: right; background: transparent url(/images/dropdown.gif) no-repeat; } .dropmenu p { float: left; font-style: italic; white-space: nowrap; overflow: hidden; cursor: pointer; } div.dropDown { background-color: #FFFFFF; padding: 0px; margin: 0px; border: solid 1px #6b6b6b; max-height: 230px; overflow-x: auto; overflow-y: auto; z-index: 1; -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); } ul.menu { list-style-type: none; background-color: #FFFFFF; } ul.menu li { cursor: pointer; white-space: nowrap; overflow: hidden; } ul.menu li:hover { color: #FFFFFF; background-color: #FF6600; } ul.menu li.selected { background-color: #0099ff; color: #FFFFFF; } div.user-list { width: 152px; border: solid 1px #969696; background-color: #FFFFFF; } /* lyle.shearer 1/27/2012 - TODO I think this is duplicated in core.css */ .scroll { overflow-x: hidden; overflow-y: auto; } ul.users, ul.columns { list-style-type: none; overflow: hidden; } ul.users li { cursor: pointer; height: 14px; text-indent: 20px; overflow: hidden; white-space: nowrap; } ul.sl { min-height: 170px; } ul.sl li.hover { background-color: #E8E8E8; } ul.sl li.selected { background-color: #0099FF; color: #FFFFFF; } li.sl.selected { background-color: #0099FF; color: #FFFFFF; } li.sl { cursor: pointer; height: 14px; text-indent: 5px; overflow: hidden; white-space: nowrap; } .sl-empty-text { color: #B4B4B4; position: absolute; top: 0; font-size: 14px; margin: 155px 10px 0 10px; text-align: center; } li.with-icon { text-indent: 20px; } li.g, #accessList li.g label { background-image: url(/images/group16.png); background-repeat: no-repeat; } #accessList li.g, #accessList li.u { background: transparent; } li.u, #accessList li.u label { background-image: url(/images/user16.png); background-repeat: no-repeat; } ul.columns li { cursor: pointer; height: 14px; overflow: hidden; } ul.buttons { list-style-type: none; font-size: 10px; padding-right: 5px; padding-left: 5px; font-weight: bold; } ul.buttons li { display: block; margin: 2px 0; text-align: center; width: 20px; height: 20px; cursor: pointer; } .all-left { background-image: url(/images/all_left.png); } .all-right { background-image: url(/images/all_right.png); } .one-left { background-image: url(/images/one_left.png); } .one-right { background-image: url(/images/one_right.png); } .one-up { background-image: url(/images/one_up.png); } .one-down { background-image: url(/images/one_down.png); } input.wide { width: 340px; } #sendmsg { width: 440px; font-size: 11px; font-family: Verdana, Tahoma, Arial, Sans-Serif; color: #6b6b6b; } #sendmsg table { margin: 0; } #message-layout th { vertical-align: top; text-align: right; padding: 13px 10px 10px 0; } #message-layout th.middle { vertical-align: middle; padding: 0 10px 0 0; } #message-layout td { padding: 10px 0; } #message-layout #userGroupChooser td { padding: 0; } #message-layout textarea { width: 340px; height: 150px; padding: 3px; font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 11px; } #message-layout input.text { padding: 3px; } #sendmsg input.radio { float: left; margin-right: 5px; display: inline; } #sendmsg input.submit { font-size: 14px; font-weight: bold; color: #333; padding: 5px 2px; } #sendmsg .footer label { float: left; display: inline; margin-bottom: 5px; } #sendmsg .footer label.disabled { color: #ccc; cursor: default; } #sendmsg .footer p { float: left; width: 170px; text-align: left; margin-left: 75px; } #sendmsg .body { padding-bottom: 0; } #sendmsg h1 { text-transform: none; } #sendmsg .cancel, #send-team-message { margin-right: 3px; } #teamMenu { width: 340px; font-size: 12px; } #teamChooser { width: 340px; } #teamChooser p { font-size: 12px; color: #333; font-style: normal; float: none; width: 300px; } .char-limiter { color: #B43333; font-weight: bold; } input.filter { margin-bottom: 3px; margin-left: 0px; width: 150px; _margin-bottom: 0px; padding: 1px; } td.buttons-parent { width: 30px; vertical-align: middle; } #attach-files { border: dashed 2px #999; width: 340px; padding: 0; } /* file upload css */ .mm-uploader { position: relative; width: 100%; } .mm-upload-button { color: blue; } .mm-upload-button-focus { outline: 1px dotted black; } .mm-upload-drop-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 90px; z-index: 2; background: #FF9797; text-align: center; } .mm-drop-area { padding: 10px; } .mm-upload-drop-area span { display: block; position: absolute; top: 50%; width: 100%; margin-top: -8px; font-size: 16px; } .mm-drop-area { overflow: hidden; } .mm-upload-drop-area-active { background: #FFFFFF; } .mm-upload-list { list-style: none; } .mm-upload-list li { margin: 0; padding: 8px 0 0 0; line-height: 15px; font-size: 11px; } .mm-upload-file, .mm-upload-spinner, .mm-upload-size, .mm-upload-cancel, .mm-upload-failed-text { margin-right: 7px; } .mm-upload-cancel { font-size: 9px !important; } .mm-upload-spinner { display: inline-block; background: url("/images/loading.gif"); width: 15px; height: 15px; vertical-align: text-bottom; } .mm-upload-size, .mm-upload-cancel { font-size: 11px; } .mm-upload-size { display: none; } .mm-upload-failed-text { display: none; } .mm-upload-fail .mm-upload-failed-text { display: inline; } .mm-upload-remove { display: none; /* hide by default */ font-size: 9px; } #sendmsg, #sendmsg * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } #sendmsg td, #sendmsg label { line-height: 1; font-size: 11px; font-family: Verdana, Tahoma, Arial, Sans-Serif; color: #6b6b6b; } #sendmsg tr { font-size: 11px; } /* Loader */ #sendmsg .loading { color: #FFFFFF; font-weight: bold; background: transparent url(/images/overlay_bg80.png) repeat; padding: 7px; border-radius: 3px; -moz-border-radius: 3px; } #sendmsg .loading p { padding-left: 20px; background: url(/images/dark-loading.gif) no-repeat left center; line-height: 18px; } #sendmsg img { vertical-align: middle; } #sendmsg.modalPopup { -moz-border-radius: 7px; -webkit-border-radius: 7px; position: absolute; padding: 15px; background: transparent url(/images/overlay_bg60.png) repeat; } #sendmsg.modalPopup p { max-width: 340px; } #sendmsg.modalPopup .mheader { -moz-border-radius: 5px 5px 0 0; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; background-color: #FF8E33; padding: 5px 10px; border-bottom: 1px solid #FF6600; cursor: default; } #sendmsg.modalPopup h1 { font-size: 18px; font-weight: bold; color: #FFFFFF; letter-spacing: -1px; font-family: Verdana, Sans-Serif !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } #sendmsg.modalPopup .subtitle { display: block; font-size: 11px; font-weight: normal; letter-spacing: normal; } #sendmsg.modalPopup .body, #sendmsg .modalPopup .mbody { padding: 10px; background-color: #E8E8E8; border-top: 1px solid #f4f4f4; } #sendmsg.modalPopup th { font-weight: bold; } #sendmsg.modalPopup .nob { border-top: none; } #sendmsg.modalPopup .footer { -moz-border-radius: 0 0 5px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; padding: 8px 12px 15px 0px; text-align: right; background-color: #E8E8E8; } #sendmsg.modalPopup .footer input { cursor: pointer; } #sendmsg.modalPopup .footer input[disabled] { cursor: default; } #sendmsg.modalPopup .footer textarea { margin-top: 8px; width: 350px; } #sendmsg.modalPopup .footer span.command { cursor: pointer; } #sendmsg.modalPopup a.disabled { color: #6B6B6B; text-decoration: none; cursor: default; } #sendmsg.modalPopup a.disabled:hover { background: none; text-decoration: none; cursor: default; } #sendmsg .dlg_close { font-size: 0px; line-height: 0px; text-indent: -9999px; height: 24px; width: 24px; position: absolute; top: -10px; right: -8px; background: url(/images/dlg_close.png) no-repeat center center; } #sendmsg .dlg_close:hover { background-color: Transparent; } nav.ko-nav #messaging-link { border-right: 1px solid rgba(255, 255, 255, 0.1); border-left: none; } @media only screen and (min-width: 65em) { nav.ko-nav #messaging-link .ko-nav-icon { width: 2.25rem; height: 2.25rem; } nav.ko-nav #messaging-link svg, nav.ko-nav #messaging-link path, nav.ko-nav #messaging-link polygon { fill: rgba(255, 255, 255, 0.5); } nav.ko-nav #messaging-link:hover svg, nav.ko-nav #messaging-link:hover path, nav.ko-nav #messaging-link:hover polygon { fill: white; } span.ko-nav-icon #unread-message-icon { top: 12px; display: block; position: absolute; right: 8px; width: 9px; height: 9px; background: #d81d1d; border: 1px solid #232a31; box-sizing: border-box; border-radius: 50%; } } /*doc --- title: Icons name: icons category: Elements --- We're using SVG icons now, and they're all included with Kickoff. The file path is `/code/content/kickoff/icons`. We have three ways to insert them as native SVG elements so they can be styled via CSS (which you'll *need* to do, especially height and width). **Razor**: In your view files, put this at the top: `@using Hudl.Kickoff.Webapp.Web.Extensions`. Then put this anywhere you want your icon used: `@Html.Icon("svg-icon-name-here")`. **Handlebars**: Coming soon. **SvgReplacer**: Insert an 'img' tag with the full file path and then use the SvgReplacer to inline the SVG. ```html_example

``` ``` .some-icons { svg, path, polygon { width: 2rem; height: 2rem; fill: $dark2; } } ```

*/ .some-icons svg, .some-icons path, .some-icons polygon { width: 2rem; height: 2rem; margin-right: 1rem; fill: #4E5D6C; } .all-the-icons { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; flex-flow: row wrap; } .all-the-icons:after { content: ""; display: table; clear: both; } .all-the-icons svg { width: 4rem; height: 4rem; fill: #4E5D6C; background-color: #E8E8E8; border-radius: 2px; padding: 1rem; } .all-the-icons path, .all-the-icons polygon { fill: #4E5D6C; } .ko-icon-container { width: 33%; margin-bottom: 1.5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .ko-icon-container div:last-child { margin-left: 1rem; } .ko-docs .ko-content { padding: 1rem; max-width: 50rem; margin: 0 auto; position: relative; } .ko-docs .ko-content > h1 { padding-top: 2rem; color: #38434F; position: relative; } .ko-docs .ko-content > h1:first-child { margin-top: 0; border-top: none; } .codeExample { border-top: 1px solid #E8E8E8; padding-top: 1rem; padding-bottom: 1rem; margin-top: 3rem; position: relative; } .codeExample:before { content: 'Example:'; position: absolute; color: #8A8A8A; font-weight: bold; left: 0; bottom: 100%; padding: 0 0 .25rem 0; text-transform: uppercase; font-size: 0.75rem; } .exampleOutput { margin-bottom: 2rem; } .codeBlock { background-color: #F5F5F5; border: 1px solid #E8E8E8; padding: 1rem; font-family: "Source Code Pro"; margin-bottom: 2rem; font-size: 0.75rem; } .codeBlock pre { white-space: pre-wrap; } .ko-color-block-ui_dark_color { width: 10rem; height: 10rem; background-color: #232A31; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_dark_color.ko-color-light { color: #232A31; } .ko-color-block-ui_dark_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_dark_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_dark_medium_color { width: 10rem; height: 10rem; background-color: #38434F; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_dark_medium_color.ko-color-light { color: #232A31; } .ko-color-block-ui_dark_medium_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_dark_medium_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_dark_light_color { width: 10rem; height: 10rem; background-color: #4E5D6C; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_dark_light_color.ko-color-light { color: #232A31; } .ko-color-block-ui_dark_light_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_dark_light_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_gray_color { width: 10rem; height: 10rem; background-color: #8A8A8A; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_gray_color.ko-color-light { color: #232A31; } .ko-color-block-ui_gray_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_gray_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_gray_medium_color { width: 10rem; height: 10rem; background-color: #E8E8E8; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_gray_medium_color.ko-color-light { color: #232A31; } .ko-color-block-ui_gray_medium_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_gray_medium_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_gray_light_color { width: 10rem; height: 10rem; background-color: #F5F5F5; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_gray_light_color.ko-color-light { color: #232A31; } .ko-color-block-ui_gray_light_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_gray_light_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_blue_color { width: 10rem; height: 10rem; background-color: #00AEEF; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_blue_color.ko-color-light { color: #232A31; } .ko-color-block-ui_blue_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_blue_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_orange_color { width: 10rem; height: 10rem; background-color: #FF6600; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_orange_color.ko-color-light { color: #232A31; } .ko-color-block-ui_orange_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_orange_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_red_color { width: 10rem; height: 10rem; background-color: #D81D1D; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_red_color.ko-color-light { color: #232A31; } .ko-color-block-ui_red_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_red_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_yellow_color { width: 10rem; height: 10rem; background-color: #FABE39; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_yellow_color.ko-color-light { color: #232A31; } .ko-color-block-ui_yellow_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_yellow_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_green_color { width: 10rem; height: 10rem; background-color: #6AA220; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_green_color.ko-color-light { color: #232A31; } .ko-color-block-ui_green_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_green_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_text_dark_color { width: 10rem; height: 10rem; background-color: #333333; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_text_dark_color.ko-color-light { color: #232A31; } .ko-color-block-ui_text_dark_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_text_dark_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_text_medium_color { width: 10rem; height: 10rem; background-color: #666666; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_text_medium_color.ko-color-light { color: #232A31; } .ko-color-block-ui_text_medium_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_text_medium_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_text_light_color { width: 10rem; height: 10rem; background-color: #999999; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_text_light_color.ko-color-light { color: #232A31; } .ko-color-block-ui_text_light_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_text_light_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_text_extra_light_color { width: 10rem; height: 10rem; background-color: #CCCCCC; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_text_extra_light_color.ko-color-light { color: #232A31; } .ko-color-block-ui_text_extra_light_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_text_extra_light_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_white_color { width: 10rem; height: 10rem; background-color: #FFFFFF; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_white_color.ko-color-light { color: #232A31; } .ko-color-block-ui_white_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_white_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_black_color { width: 10rem; height: 10rem; background-color: #000000; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_black_color.ko-color-light { color: #232A31; } .ko-color-block-ui_black_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_black_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_default_color { width: 10rem; height: 10rem; background-color: #232A31; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_default_color.ko-color-light { color: #232A31; } .ko-color-block-team_default_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_default_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_light_gray_color { width: 10rem; height: 10rem; background-color: #E9E9E9; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_light_gray_color.ko-color-light { color: #232A31; } .ko-color-block-team_light_gray_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_light_gray_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_yellow_color { width: 10rem; height: 10rem; background-color: #FFDD00; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_yellow_color.ko-color-light { color: #232A31; } .ko-color-block-team_yellow_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_yellow_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_gold_color { width: 10rem; height: 10rem; background-color: #C5B358; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_gold_color.ko-color-light { color: #232A31; } .ko-color-block-team_gold_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_gold_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_orange_color { width: 10rem; height: 10rem; background-color: #F87620; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_orange_color.ko-color-light { color: #232A31; } .ko-color-block-team_orange_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_orange_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_light_red_color { width: 10rem; height: 10rem; background-color: #F30000; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_light_red_color.ko-color-light { color: #232A31; } .ko-color-block-team_light_red_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_light_red_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_red_color { width: 10rem; height: 10rem; background-color: #C20000; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_red_color.ko-color-light { color: #232A31; } .ko-color-block-team_red_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_red_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_maroon_color { width: 10rem; height: 10rem; background-color: #7A1700; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_maroon_color.ko-color-light { color: #232A31; } .ko-color-block-team_maroon_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_maroon_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_black_color { width: 10rem; height: 10rem; background-color: #171919; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_black_color.ko-color-light { color: #232A31; } .ko-color-block-team_black_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_black_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_light_blue_color { width: 10rem; height: 10rem; background-color: #68B2D8; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_light_blue_color.ko-color-light { color: #232A31; } .ko-color-block-team_light_blue_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_light_blue_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_blue_color { width: 10rem; height: 10rem; background-color: #1652AE; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_blue_color.ko-color-light { color: #232A31; } .ko-color-block-team_blue_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_blue_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_dark_blue_color { width: 10rem; height: 10rem; background-color: #0F2A4B; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_dark_blue_color.ko-color-light { color: #232A31; } .ko-color-block-team_dark_blue_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_dark_blue_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_purple_color { width: 10rem; height: 10rem; background-color: #332064; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_purple_color.ko-color-light { color: #232A31; } .ko-color-block-team_purple_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_purple_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_green_color { width: 10rem; height: 10rem; background-color: #2B7834; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_green_color.ko-color-light { color: #232A31; } .ko-color-block-team_green_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_green_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_dark_green_color { width: 10rem; height: 10rem; background-color: #1F4615; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_dark_green_color.ko-color-light { color: #232A31; } .ko-color-block-team_dark_green_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_dark_green_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_white_color { width: 10rem; height: 10rem; background-color: #E9E9E9; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_white_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_white_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_white_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_gray_color { width: 10rem; height: 10rem; background-color: #8C9196; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_gray_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_gray_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_gray_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_black_color { width: 10rem; height: 10rem; background-color: #404040; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_black_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_black_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_black_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_yellow_color { width: 10rem; height: 10rem; background-color: #FFDD30; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_yellow_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_yellow_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_yellow_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_orange_color { width: 10rem; height: 10rem; background-color: #ED9827; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_orange_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_orange_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_orange_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_red_color { width: 10rem; height: 10rem; background-color: #DF4953; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_red_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_red_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_red_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_green_color { width: 10rem; height: 10rem; background-color: #42BE39; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_green_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_green_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_green_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_blue_color { width: 10rem; height: 10rem; background-color: #3985BE; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_blue_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_blue_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_blue_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_purple_color { width: 10rem; height: 10rem; background-color: #9F62B1; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_purple_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_purple_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_purple_color div:last-child { font-size: 1.125rem; } .ko-color-blocks { margin-bottom: 1.5rem; } .ko-color-blocks:after { content: ""; display: table; clear: both; } .ko-docs-side-nav { position: fixed; left: 1rem; top: 8rem; } .ko-docs-side-nav li a { color: #FF6600; font-weight: bold; display: block; padding-bottom: .5rem; padding-top: .5rem; border-bottom: 1px solid #E8E8E8; width: 10rem; } hll { background-color: #ffffcc; } .c { color: #999988; font-style: italic; } /* Comment */ .err { color: #a61717; background-color: #e3d2d2; } /* Error */ .k { color: #000000; font-weight: bold; } /* Keyword */ .o { color: #000000; font-weight: bold; } /* Operator */ .cm { color: #999988; font-style: italic; } /* Comment.Multiline */ .cp { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Preproc */ .c1 { color: #999988; font-style: italic; } /* Comment.Single */ .cs { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Special */ .gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */ .ge { color: #000000; font-style: italic; } /* Generic.Emph */ .gr { color: #aa0000; } /* Generic.Error */ .gh { color: #999999; } /* Generic.Heading */ .gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted */ .go { color: #888888; } /* Generic.Output */ .gp { color: #555555; } /* Generic.Prompt */ .gs { font-weight: bold; } /* Generic.Strong */ .gu { color: #aaaaaa; } /* Generic.Subheading */ .gt { color: #aa0000; } /* Generic.Traceback */ .kc { color: #000000; font-weight: bold; } /* Keyword.Constant */ .kd { color: #000000; font-weight: bold; } /* Keyword.Declaration */ .kn { color: #000000; font-weight: bold; } /* Keyword.Namespace */ .kp { color: #000000; font-weight: bold; } /* Keyword.Pseudo */ .kr { color: #000000; font-weight: bold; } /* Keyword.Reserved */ .kt { color: #445588; font-weight: bold; } /* Keyword.Type */ .m { color: #009999; } /* Literal.Number */ .s { color: #d01040; } /* Literal.String */ .na { color: #008080; } /* Name.Attribute */ .nb { color: #0086B3; } /* Name.Builtin */ .nc { color: #445588; font-weight: bold; } /* Name.Class */ .no { color: #008080; } /* Name.Constant */ .nd { color: #3c5d5d; font-weight: bold; } /* Name.Decorator */ .ni { color: #800080; } /* Name.Entity */ .ne { color: #990000; font-weight: bold; } /* Name.Exception */ .nf { color: #990000; font-weight: bold; } /* Name.Function */ .nl { color: #990000; font-weight: bold; } /* Name.Label */ .nn { color: #555555; } /* Name.Namespace */ .nt { color: #000080; } /* Name.Tag */ .nv { color: #008080; } /* Name.Variable */ .ow { color: #000000; font-weight: bold; } /* Operator.Word */ .w { color: #bbbbbb; } /* Text.Whitespace */ .mf { color: #009999; } /* Literal.Number.Float */ .mh { color: #009999; } /* Literal.Number.Hex */ .mi { color: #009999; } /* Literal.Number.Integer */ .mo { color: #009999; } /* Literal.Number.Oct */ .sb { color: #d01040; } /* Literal.String.Backtick */ .sc { color: #d01040; } /* Literal.String.Char */ .sd { color: #d01040; } /* Literal.String.Doc */ .s2 { color: #d01040; } /* Literal.String.Double */ .se { color: #d01040; } /* Literal.String.Escape */ .sh { color: #d01040; } /* Literal.String.Heredoc */ .si { color: #d01040; } /* Literal.String.Interpol */ .sx { color: #d01040; } /* Literal.String.Other */ .sr { color: #009926; } /* Literal.String.Regex */ .s1 { color: #d01040; } /* Literal.String.Single */ .ss { color: #990073; } /* Literal.String.Symbol */ .bp { color: #999999; } /* Name.Builtin.Pseudo */ .vc { color: #008080; } /* Name.Variable.Class */ .vg { color: #008080; } /* Name.Variable.Global */ .vi { color: #008080; } /* Name.Variable.Instance */ .il { color: #009999; } /* Literal.Number.Integer.Long */ .habla_window_div_position { bottom: 10px; position: fixed; right: 10px; } .habla_window_div_position_floating { bottom: 10px; position: fixed; right: 10px; } .habla_window_div_position_floating_ie { bottom: 10px; position: absolute; right: 10px; } #habla_expanded_div { background: url("/images/overlay_grad_03.gif") repeat-x scroll 0 0 #202020; } #habla_topbar_div { position: relative; -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); cursor: pointer; } .habla_window_div_base { border: 0 none !important; font-family: arial, helvetica, sans-serif; font-style: inherit; font-weight: inherit; line-height: 1; margin: 0 !important; outline-color: -moz-use-text-color; outline-style: none !important; outline-width: 0; padding: 0 !important; text-align: left; vertical-align: baseline; z-index: 99999 !important; -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); } .habla_panel_border { background: #FFFFFF none repeat scroll 0 0; border: 0; font-family: arial, helvetica, sans-serif; font-size: 14px; width: 250px; } a.habla_button_a_hover:hover { color: #fff; font-size: 14px; background: none; font-weight: bold; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); cursor: pointer; } .habla_button_a_normal { color: #fff; font-weight: bold; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); cursor: pointer; } .habla_button { float: right; font-weight: bold; margin-left: 3px; padding: 0 6px 2px; text-decoration: none !important; } .habla_conversation_message_off { margin: 0 !important; padding: 3px 3px 3px 23px; } .habla_conversation_message_on { margin: 0; padding: 5px; } .habla_conversation_p_item { background: transparent; color: #000; margin: 0; padding: 0; text-indent: -20px; } .habla_conversation_person1 { color: #6b6b6b; padding-right: 5px; font-weight: bold; font-size: 12px; } .habla_conversation_person2 { color: #ff8e33; padding-right: 5px; font-weight: bold; font-size: 12px; } .habla_conversation_text_span { color: #aaa; font-size: 12px; } .habla_topbar_div_highlighted { background: red; color: #0FF; padding: 6px; border: 1px solid red; } .habla_topbar_div_normal { background: #f60 url(/images/gradsprite.gif) repeat-x left top; color: #fff; padding: 6px; border: 1px solid #f60; } .habla_topbar_clickable { cursor: pointer; } .habla_oplink_a_hover { color: #fff; background: none; font-weight: bold; cursor: pointer; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } a.habla_oplink_a_hover:hover { font-size: 14px; background: none; } .habla_oplink_a_normal { color: #fff; font-weight: bold; cursor: pointer; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } .clear_style { clear: both; } .habla_offline_message_div { border-bottom: 1px dotted #CCCCCC; line-height: 1.5em; margin: 0; padding: 3px; } .habla_conversation_div { background: transparent; border-bottom: 1px dotted #555; height: 155px; line-height: 1.25em; overflow: auto; color: #aaa; padding: 3px 3px 3px 23px !important; } .habla_pre_chat_div { background: transparent none repeat scroll 0 0; border-bottom: 1px dotted #CCCCCC; height: 155px; line-height: 1.25em; overflow: auto; color: #000000; padding: 3px 3px 3px 3px; } .habla_offline_message_sent_div { background: transparent none repeat scroll 0 0; border-bottom: 1px dotted #CCCCCC; height: 155px; line-height: 1.5em; overflow: auto !important; padding: 3px !important; } .habla_chatform_form { margin: 0 !important; padding: 0 !important; } .habla_input_div { font-family: arial, helvetica, sans-serif; font-size: 12px; font-weight: normal !important; margin: 0 !important; padding: 3px !important; } .habla_offline_body_input { font-family: arial, helvetica, sans-serif; font-size: 12px; height: 155px; vertical-align: text-top; width: 234px; } .habla_say_text_span { color: #000000; } .habla_submit_button { font-family: arial, helvetica, sans-serif; font-size: 12px; margin: 0 !important; vertical-align: text-top; width: 234px; } .habla_offline_submit_input { background: #E75917 none repeat scroll 0 0 !important; border: medium none #CCCCCC !important; color: white !important; float: right; margin-right: 2px; } .habla_offline_error_span { float: left; font-family: arial, helvetica, sans-serif; font-size: 12px; } .habla_wcsend_input_normal { border: 2px solid #6b6b6b !important; } .habla_wcsend_input_pre { color: #6b6b6b; } .habla_wcsend_input_post { color: #000000; } .habla_wcsend_input_pre_highlighted { border: 2px solid #6b6b6b !important; } .habla_wcsend_input_highlighted { border: 2px solid !important; color: #000000 !important; } .habla_wcsend_field { background: transparent none repeat scroll 0 0; font-family: arial, helvetica, sans-serif; font-size: 12px; height: 24px; margin: 0 !important; overflow: auto !important; padding: 1px 3px !important; vertical-align: text-top; width: 234px; } .habla_wcsend_field:hover { background: #FFFF9F; border-color: #09f !important; outline-color: #09f !important; color: #333; } .habla_wcsend_field:focus { background: #fff; border-color: #f60 !important; outline-color: #f60 !important; color: #000 !important; } #habla_link_div a:hover { background: none; } .hbl_pal_remote_fg + .habla_conversation_text_span { color: #fff; } .olark-composing-message { font-style: italic; color: #6b6b6b !important; } /* Account alert banner */ #expiration-countdown { margin: 0 auto 0 auto; width: 1100px; } #expiration-countdown.banner_notice { padding: 15px 15px 15px 25px; background: #f8f8f8 url(/images/announce-bg.png) repeat-x left top; border: 1px solid #d8d8d8; border-bottom: 1px solid #b4b4b4; } #expiration-countdown.banner_notice .fl-l { float: left; width: 400px; } #expiration-countdown.banner_notice .fl-l h3 { font-family: inherit; font-size: 14px; } #expiration-countdown.banner_notice .fl-l > span { display: block; margin-top: 3px; line-height: 1; } #expiration-countdown.banner_notice.clearfix:before, #expiration-countdown.banner_notice.clearfix:after { content: ""; display: table; } #expiration-countdown.banner_notice.clearfix:after { clear: both; content: '.'; display: block; visibility: hidden; height: 0; } #expiration-countdown.banner_notice.clearfix { display: block; zoom: 1; } #expiration-countdown.banner_notice img { display: inline; padding: 5px; background: #FFF; border: 1px solid #b4b4b4; float: right; margin-left: 10px; } #expiration-countdown.banner_notice strong { color: #333; } #expiration-countdown.banner_notice p { color: #6b6b6b; margin: 2px 0; padding: 0; font-size: 12px; } #expiration-countdown.banner_notice p.first { margin: 5px 0 10px 0; } #expiration-countdown.banner_notice h2 { color: #F60; } #expiration-countdown .billcta, #expiration-countdown .billcta:visited, #expiration-countdown .billcta:link { display: inline-block; padding: 3px 4px; border: 1px solid #06f; color: #fff; background: #09f url(/images/catsel.gif) repeat-x left top; text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.76); -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.76); box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); } #expiration-countdown .billcta:hover { background-position: left bottom; } #expiration-countdown #hide-banner-btn { display: none; text-align: right; } #expiration-countdown .progress_meter { float: right; width: 470px; margin: 0 0 0 15px; } #expiration-countdown .progress_meter .bar_w { background: #d8d8d8; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin: 0 0 3px 0; } #expiration-countdown .progress_meter .bar { background: #ec1427 url(/images/meter-bgs.png) repeat-x 0 -48px; border: 1px solid #ec1427; text-align: right; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } #expiration-countdown .progress_meter .bar span { font-weight: bold; font-size: 10px; color: #FFF; padding: 2px 8px; display: inline-block; } #expiration-countdown .progress_meter .text { text-align: right; color: #ec1427; font-weight: bold; } #expiration-countdown .progress_meter span { color: #6b6b6b; font-weight: normal; } #expiration-countdown .progress_meter .icon { width: 16px; height: 16px; background: transparent no-repeat center center scroll; margin-right: 6px; vertical-align: bottom; } #expiration-countdown .progress_meter.low .icon { background-image: url(/images/warn16.png); } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*doc --- title: Reset name: 03-Reset category: Elements --- We use the Eric Meyer reset with the addition of setting the default font to **Trade**, removing text-decoration on links, giving everything a line-height of 1, using `-webkit-font-smoothing: antialiased`, and setting `-webkit-tap-highlight-color: transparent`. */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { box-sizing: border-box; } body { line-height: 1; font-family: trade, sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } a { text-decoration: none; } /*doc --- title: Variables name: 01-variables category: Elements --- ### Colors #### Dark UI Colors

$dui_dark_color

#232A31

$ui_dark_medium_color

#38434F

$ui_dark_light_color

#4E5D6C

#### Gray UI Colors

$ui_gray_color

#8A8A8A

$ui_gray_medium_color

#E8E8E8

$ui_gray_light_color

#F5F5F5

#### Accent UI Colors

$ui_blue_color

#00AEEF

$ui_orange_color

#FF6600

#### Alert UI Colors

$ui_red_color

#D81D1D

$ui_yellow_color

#FABE39

$ui_green_color

#6AA220

#### Grayscale UI Text Colors

$ui_text_dark_color

#333333

$ui_text_medium_color

#666666

$ui_text_light_color

#999999

$ui_text_extra_light_color

#CCCCCC

#### Base UI Colors

$ui_black_color

#FFFFFF

$ui_white_color

#000000

#### Team Colors

$tagging_team_white_color

#E9E9E9

$tagging_team_gray_color

#8C9196

$tagging_team_black_color

#404040

$tagging_team_yellow_color

#FFDD30

$tagging_team_orange_color

#ED9827

$tagging_team_red_color

#DF4953

$tagging_team_green_color

#42BE39

$tagging_team_blue_color

#3985BE

$tagging_team_purple_color

#9F62B1

` but you'll likely want to customize it a bit. ```html_example

``` Here's how the mixin works if you want to put it on your own element and customize the colors. ``` .widget { // Arguments: // 1. border-width // 2. main color // 3. background color // 4. total width/height // 5. margin (optional. defaults to 0.) @include css-spinner(.5rem, $orange, $medium-gray, 4rem, 1rem); } ``` */ @-webkit-keyframes spinner-rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } @-moz-keyframes spinner-rotation { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } } @keyframes spinner-rotation { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -ms-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } .css-spinner { -webkit-animation: spinner-rotation 0.75s infinite linear; -moz-animation: spinner-rotation 0.75s infinite linear; animation: spinner-rotation 0.75s infinite linear; clear: both; height: 4rem; width: 4rem; margin: 1rem auto 1rem auto; position: relative; border-top: 0.5rem solid #FF6600; border-left: 0.5rem solid #E8E8E8; border-bottom: 0.5rem solid #E8E8E8; border-right: 0.5rem solid #E8E8E8; border-radius: 100%; display: block; } .no-cssanimations .css-spinner { display: none; } .css-spinner-message { margin-bottom: 1.5rem; padding: 0 1.5rem; text-align: center; font-size: 1rem; font-style: italic; color: #8A8A8A; } .no-cssanimations .css-spinner-message { font-weight: bold; padding: 1.5rem; color: #FF6600; font-size: 20px; } .ko-nav-mobile-menu-button, .ko-nav-mobile-menu-right-button { height: 3rem; width: 3rem; font-weight: bold; border-right: 1px solid rgba(255, 255, 255, 0.1); display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; position: absolute; left: 0; top: 0; cursor: pointer; } .ko-nav-mobile-menu-button:hover, .ko-nav-mobile-menu-right-button:hover { background-color: #181d22; } .ko-nav-mobile-menu-button svg, .ko-nav-mobile-menu-button path, .ko-nav-mobile-menu-button polygon, .ko-nav-mobile-menu-right-button svg, .ko-nav-mobile-menu-right-button path, .ko-nav-mobile-menu-right-button polygon { fill: #FF6600; } .no-flexbox .ko-nav-mobile-menu-button:after, .no-flexbox .ko-nav-mobile-menu-right-button:after { content: ""; display: table; clear: both; } .no-flexbox .ko-nav-mobile-menu-button svg, .no-flexbox .ko-nav-mobile-menu-button span, .no-flexbox .ko-nav-mobile-menu-button img, .no-flexbox .ko-nav-mobile-menu-right-button svg, .no-flexbox .ko-nav-mobile-menu-right-button span, .no-flexbox .ko-nav-mobile-menu-right-button img { height: 3rem; line-height: 3rem; vertical-align: middle; float: left; } .no-flexbox .ko-nav-mobile-menu-button, .no-flexbox .ko-nav-mobile-menu-right-button { text-align: center; } .ko-nav-mobile-menu-button svg, .ko-nav-mobile-menu-button path, .ko-nav-mobile-menu-button polygon, .ko-nav-mobile-menu-right-button svg, .ko-nav-mobile-menu-right-button path, .ko-nav-mobile-menu-right-button polygon { width: 1.5rem; height: 1.5rem; } .no-flexbox .ko-nav-mobile-menu-button svg, .no-flexbox .ko-nav-mobile-menu-button path, .no-flexbox .ko-nav-mobile-menu-button polygon, .no-flexbox .ko-nav-mobile-menu-right-button svg, .no-flexbox .ko-nav-mobile-menu-right-button path, .no-flexbox .ko-nav-mobile-menu-right-button polygon { display: inline-block; float: none; height: 3rem; } .ko-nav-mobile-menu-right-button { left: auto; right: 0; } a.ko-nav-team { height: 3rem; width: 3rem; font-weight: bold; border-right: 1px solid rgba(255, 255, 255, 0.1); display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: start; } a.ko-nav-team:hover { background-color: #181d22; } a.ko-nav-team svg, a.ko-nav-team path, a.ko-nav-team polygon { fill: #FF6600; } .no-flexbox a.ko-nav-team:after { content: ""; display: table; clear: both; } .no-flexbox a.ko-nav-team svg, .no-flexbox a.ko-nav-team span, .no-flexbox a.ko-nav-team img { height: 3rem; line-height: 3rem; vertical-align: middle; float: left; } @media only screen and (min-width: 65em) { a.ko-nav-team { border-right: 1px solid rgba(255, 255, 255, 0.1); border-bottom: none; } } .desktop-only a.ko-nav-team { border-right: 1px solid rgba(255, 255, 255, 0.1); border-bottom: none; } .no-flexbox a.ko-nav-team { height: auto; padding-top: 0; padding-bottom: 0; } a.ko-nav-team .ko-nav-team-dudes { display: none; width: 1.5rem; height: 1.5rem; } @media only screen and (min-width: 65em) { a.ko-nav-team .ko-nav-team-dudes { display: block; margin-right: .5rem; } } .desktop-only a.ko-nav-team .ko-nav-team-dudes { display: block; margin-right: .5rem; } @media only screen and (min-width: 65em) { a.ko-nav-team .ko-nav-team-icon { display: none; } } .desktop-only a.ko-nav-team .ko-nav-team-icon { display: none; } a.ko-nav-team .ko-nav-team-icon svg { height: 1rem; width: 1rem; } a.ko-nav-team .ko-nav-team-arrow { display: none; } @media only screen and (min-width: 65em) { a.ko-nav-team .ko-nav-team-arrow { display: block; } } .desktop-only a.ko-nav-team .ko-nav-team-arrow { display: block; } a.ko-nav-team .ko-nav-team-name { display: block; margin: 0 0.375rem 0 0; color: #FF6600; max-width: 12rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ko-nav-mobile-header, .ko-nav { z-index: 0; } @media only screen and (min-width: 65em) { .ko-nav-mobile-header, .ko-nav { z-index: 100; } } .desktop-only .ko-nav-mobile-header, .desktop-only .ko-nav { z-index: 100; } .ko-nav-mobile-header a, .ko-nav a { color: #FFFFFF; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .ko-nav-icon { width: 1rem; height: 1rem; fill: rgba(255, 255, 255, 0.5); margin-right: .5rem; } .ko-nav-icon svg { height: 100%; width: 100%; } .ko-nav-icon path, .ko-nav-icon polygon { width: 1rem; height: 1rem; fill: rgba(255, 255, 255, 0.5); } @media only screen and (min-width: 65em) { .ko-nav-main-item .ko-nav-icon { display: none; } } .desktop-only .ko-nav-main-item .ko-nav-icon { display: none; } @media only screen and (min-width: 65em) { .ko-nav-help .ko-nav-icon, .ko-nav-sub .ko-nav-icon, .ko-nav-sub-double .ko-nav-icon { display: block; } } .desktop-only .ko-nav-help .ko-nav-icon, .desktop-only .ko-nav-sub .ko-nav-icon, .desktop-only .ko-nav-sub-double .ko-nav-icon { display: block; } .no-flexbox .ko-nav-icon { position: relative; top: 0.1875rem; } .ko-nav-mobile-header { background-color: #232A31; height: 3rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } @media only screen and (min-width: 65em) { .ko-nav-mobile-header { display: none; } } html.no-rgba .ko-nav-mobile-header { display: none; } .desktop-only .ko-nav-mobile-header { display: none; } .ko-mobile-title { text-align: center; width: 100%; font-size: 1.5rem; font-family: trade; font-weight: bold; text-transform: uppercase; } .no-flexbox .ko-mobile-title { line-height: 3rem; } .ko-nav { position: absolute; top: 0; height: 100%; width: 16rem; background-color: #38434F; box-shadow: inset 0 0 2rem rgba(35, 42, 49, 0.75); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } @media only screen and (min-width: 65em) { .ko-nav { background: none; } } .desktop-only .ko-nav { background: none; } .ko-nav-sub-is-active .ko-nav { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } @media only screen and (min-width: 65em) { .ko-nav-sub-is-active .ko-nav { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .desktop-only .ko-nav-sub-is-active .ko-nav { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ko-nav-teamswitcher-is-active .ko-nav { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } @media only screen and (min-width: 65em) { .ko-nav-teamswitcher-is-active .ko-nav { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .desktop-only .ko-nav-teamswitcher-is-active .ko-nav { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } @media only screen and (min-width: 65em) { .ko-nav { position: relative; width: 100%; height: 3rem; background-color: #232A31; overflow: visible; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } } html.no-rgba .ko-nav { position: relative; width: 100%; height: 3rem; background-color: #232A31; overflow: visible; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } .desktop-only .ko-nav { position: relative; width: 100%; height: 3rem; background-color: #232A31; overflow: visible; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } .no-flexbox .ko-nav:after { content: ""; display: table; clear: both; } .no-flexbox .ko-nav { display: block !important; } @media only screen and (min-width: 65em) { .ko-nav-right, .ko-nav-left { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .no-flexbox .ko-nav-right:after, .no-flexbox .ko-nav-left:after { content: ""; display: table; clear: both; } } .desktop-only .ko-nav-right, .desktop-only .ko-nav-left { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .no-flexbox .desktop-only .ko-nav-right:after, .no-flexbox .desktop-only .ko-nav-left:after { content: ""; display: table; clear: both; } @media only screen and (min-width: 65em) { .ko-nav-right > li, .ko-nav-left > li { position: relative; } .no-flexbox .ko-nav-right > li, .no-flexbox .ko-nav-left > li { float: left; } } .desktop-only .ko-nav-right > li, .desktop-only .ko-nav-left > li { position: relative; } .no-flexbox .desktop-only .ko-nav-right > li, .no-flexbox .desktop-only .ko-nav-left > li { float: left; } .ko-nav-right > li:hover > a, .ko-nav-left > li:hover > a { background-color: rgba(255, 255, 255, 0.1); } @media only screen and (min-width: 65em) { .ko-nav-right > li:hover > a, .ko-nav-left > li:hover > a { background-color: #181d22; } } .desktop-only .ko-nav-right > li:hover > a, .desktop-only .ko-nav-left > li:hover > a { background-color: #181d22; } @media only screen and (min-width: 65em) { .ko-nav-right > li:hover ul, .ko-nav-left > li:hover ul { top: 100%; height: auto; opacity: .99; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; transition: opacity 0.2s; } } .desktop-only .ko-nav-right > li:hover ul, .desktop-only .ko-nav-left > li:hover ul { top: 100%; height: auto; opacity: .99; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; transition: opacity 0.2s; } .ko-nav-right > li > a, .ko-nav-left > li > a { padding: 0.75rem; width: 16rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .no-flexbox .ko-nav-right > li > a, .no-flexbox .ko-nav-left > li > a { display: block; } @media only screen and (min-width: 65em) { .ko-nav-right > li > a, .ko-nav-left > li > a { padding: 0 0.75rem; color: #FFFFFF; height: 3rem; width: auto; } .no-flexbox .ko-nav-right > li > a, .no-flexbox .ko-nav-left > li > a { line-height: 3rem; } } .desktop-only .ko-nav-right > li > a, .desktop-only .ko-nav-left > li > a { padding: 0 0.75rem; color: #FFFFFF; height: 3rem; width: auto; } .no-flexbox .desktop-only .ko-nav-right > li > a, .no-flexbox .desktop-only .ko-nav-left > li > a { line-height: 3rem; } @media only screen and (min-width: 65em) { .ko-nav-right > li > ul, .ko-nav-left > li > ul { height: 0; } } .desktop-only .ko-nav-right > li > ul, .desktop-only .ko-nav-left > li > ul { height: 0; } .no-flexbox .ko-nav-left { float: left; } .no-flexbox .ko-nav-right { float: right; } #message-link { display: none; } @media only screen and (min-width: 65em) { #message-link { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } } .desktop-only #message-link { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .ko-nav-sub, .ko-nav-sub-double { position: absolute; top: -2000%; left: 100%; background-color: #38434F; -webkit-transition: top 0 ease 0.2s; -moz-transition: top 0 ease 0.2s; transition: top 0 ease 0.2s; } @media only screen and (min-width: 65em) { .ko-nav-sub, .ko-nav-sub-double { background: none; } } .desktop-only .ko-nav-sub, .desktop-only .ko-nav-sub-double { background: none; } .ko-nav-sub.ko-nav-sub-is-active, .ko-nav-sub-is-active.ko-nav-sub-double, .ko-nav-sub.ko-nav-teamswitcher-is-active, .ko-nav-teamswitcher-is-active.ko-nav-sub-double { top: 0; height: 100%; -webkit-transition: top 0 ease 0; -moz-transition: top 0 ease 0; transition: top 0 ease 0; } @media only screen and (min-width: 65em) { .ko-nav-sub.ko-nav-sub-is-active, .ko-nav-sub-is-active.ko-nav-sub-double, .ko-nav-sub.ko-nav-teamswitcher-is-active, .ko-nav-teamswitcher-is-active.ko-nav-sub-double { top: -2000%; height: auto; } } .desktop-only .ko-nav-sub.ko-nav-sub-is-active, .desktop-only .ko-nav-sub-is-active.ko-nav-sub-double, .desktop-only .ko-nav-sub.ko-nav-teamswitcher-is-active, .desktop-only .ko-nav-teamswitcher-is-active.ko-nav-sub-double { top: -2000%; height: auto; } @media only screen and (min-width: 65em) { .ko-nav-sub, .ko-nav-sub-double { left: 0; right: auto; opacity: 0; height: auto; background-color: #181d22; z-index: 100; padding: 0.5rem 0; display: block; overflow: hidden; } } .desktop-only .ko-nav-sub, .desktop-only .ko-nav-sub-double { left: 0; right: auto; opacity: 0; height: auto; background-color: #181d22; z-index: 100; padding: 0.5rem 0; display: block; overflow: hidden; } .ko-nav-sub li > a, .ko-nav-sub-double li > a { width: 16rem; padding: 0.75rem; display: block; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } @media only screen and (min-width: 65em) { .ko-nav-sub li > a, .ko-nav-sub-double li > a { width: 10rem; height: auto; padding: 0.5rem 0.75rem; float: left; } } .desktop-only .ko-nav-sub li > a, .desktop-only .ko-nav-sub-double li > a { width: 10rem; height: auto; padding: 0.5rem 0.75rem; float: left; } .ko-nav-sub li > a:hover, .ko-nav-sub-double li > a:hover { background-color: rgba(255, 255, 255, 0.1); } @media only screen and (min-width: 65em) { .ko-nav-sub li > a:hover, .ko-nav-sub-double li > a:hover { color: #FF6600; background-color: transparent; } .ko-nav-sub li > a:hover svg, .ko-nav-sub-double li > a:hover svg, .ko-nav-sub li > a:hover path, .ko-nav-sub-double li > a:hover path, .ko-nav-sub li > a:hover polygon, .ko-nav-sub-double li > a:hover polygon { fill: #FF6600; } } .desktop-only .ko-nav-sub li > a:hover, .desktop-only .ko-nav-sub-double li > a:hover { color: #FF6600; background-color: transparent; } .desktop-only .ko-nav-sub li > a:hover svg, .desktop-only .ko-nav-sub-double li > a:hover svg, .desktop-only .ko-nav-sub li > a:hover path, .desktop-only .ko-nav-sub-double li > a:hover path, .desktop-only .ko-nav-sub li > a:hover polygon, .desktop-only .ko-nav-sub-double li > a:hover polygon { fill: #FF6600; } .ko-nav-sub.ko-nav-teamswitcher, .ko-nav-teamswitcher.ko-nav-sub-double { right: 100%; left: auto; width: 100%; height: 100%; box-shadow: inset 0 0 2rem rgba(35, 42, 49, 0.75); } @media only screen and (min-width: 65em) { .ko-nav-sub.ko-nav-teamswitcher, .ko-nav-teamswitcher.ko-nav-sub-double { right: auto; left: 0; width: auto; } } .desktop-only .ko-nav-sub.ko-nav-teamswitcher, .desktop-only .ko-nav-teamswitcher.ko-nav-sub-double { right: auto; left: 0; width: auto; } .ko-nav-sub.ko-nav-teamswitcher > li > a, .ko-nav-teamswitcher.ko-nav-sub-double > li > a { width: calc(100% - 1px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ko-nav-sub.ko-nav-teamswitcher > .ko-nav-teamswitcher-school, .ko-nav-teamswitcher.ko-nav-sub-double > .ko-nav-teamswitcher-school { color: #8A8A8A; margin: .5rem .8rem 0rem .8rem; font-size: 0.8rem; font-weight: bold; } @media only screen and (min-width: 65em) { .ko-nav-sub.ko-nav-sub-profile li > a, .ko-nav-sub-profile.ko-nav-sub-double li > a { width: 12.5rem; } } .desktop-only .ko-nav-sub.ko-nav-sub-profile li > a, .desktop-only .ko-nav-sub-profile.ko-nav-sub-double li > a { width: 12.5rem; } .ko-nav-sub-double { width: 100%; height: 100%; box-shadow: inset 0 0 2rem rgba(35, 42, 49, 0.75); } @media only screen and (min-width: 65em) { .ko-nav-sub-double { width: 25rem; height: auto; } } .desktop-only .ko-nav-sub-double { width: 25rem; height: auto; } @media only screen and (min-width: 65em) { .ko-nav-anchor-right { left: auto; right: 0; } } .desktop-only .ko-nav-anchor-right { left: auto; right: 0; } @media only screen and (min-width: 65em) { .ko-nav-account .ko-nav-icon { display: none; } } .desktop-only .ko-nav-account .ko-nav-icon { display: none; } .ko-nav-account .ko-nav-account-arrow { display: none; margin: 1rem 0 1rem 1rem; } @media only screen and (min-width: 65em) { .ko-nav-account .ko-nav-account-arrow { display: block; } .no-flexbox .ko-nav-account .ko-nav-account-arrow { float: left; } } .desktop-only .ko-nav-account .ko-nav-account-arrow { display: block; } .no-flexbox .desktop-only .ko-nav-account .ko-nav-account-arrow { float: left; } @media only screen and (min-width: 65em) { .no-flexbox .ko-nav-username { float: left; } } .desktop-only .no-flexbox .ko-nav-username { float: left; } .ko-nav-avatar { display: none; width: 2rem; height: 2rem; border: 1px solid #FFFFFF; border-radius: 50%; margin: 0 0.75rem; } .ko-nav-avatar svg { fill: #FFFFFF; } @media only screen and (min-width: 65em) { .ko-nav-avatar { display: block; } .no-flexbox .ko-nav-avatar { float: left; margin-top: .5rem; } } .desktop-only .ko-nav-avatar { display: block; } .no-flexbox .desktop-only .ko-nav-avatar { float: left; margin-top: .5rem; } @media only screen and (min-width: 65em) { .no-flexbox .ko-nav-account-arrow { float: left; height: 3rem; } } .no-flexbox .desktop-only .ko-nav-account-arrow { float: left; height: 3rem; } @media only screen and (min-width: 65em) { li a.ko-nav-help { min-width: 3rem; height: 3rem; width: 3rem; font-weight: bold; border-left: 1px solid rgba(255, 255, 255, 0.1); display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } li a.ko-nav-help:hover { background-color: #181d22; } li a.ko-nav-help svg, li a.ko-nav-help path, li a.ko-nav-help polygon { fill: #FF6600; } .no-flexbox li a.ko-nav-help:after { content: ""; display: table; clear: both; } .no-flexbox li a.ko-nav-help svg, .no-flexbox li a.ko-nav-help span, .no-flexbox li a.ko-nav-help img { height: 3rem; line-height: 3rem; vertical-align: middle; float: left; } li a.ko-nav-help .ko-nav-icon { width: 1.25rem; height: 1.25rem; margin-right: 0; } } .desktop-only li a.ko-nav-help { min-width: 3rem; height: 3rem; width: 3rem; font-weight: bold; border-left: 1px solid rgba(255, 255, 255, 0.1); display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .desktop-only li a.ko-nav-help:hover { background-color: #181d22; } .desktop-only li a.ko-nav-help svg, .desktop-only li a.ko-nav-help path, .desktop-only li a.ko-nav-help polygon { fill: #FF6600; } .no-flexbox .desktop-only li a.ko-nav-help:after { content: ""; display: table; clear: both; } .no-flexbox .desktop-only li a.ko-nav-help svg, .no-flexbox .desktop-only li a.ko-nav-help span, .no-flexbox .desktop-only li a.ko-nav-help img { height: 3rem; line-height: 3rem; vertical-align: middle; float: left; } .desktop-only li a.ko-nav-help .ko-nav-icon { width: 1.25rem; height: 1.25rem; margin-right: 0; } @media only screen and (min-width: 65em) { .ko-nav-mobile-label { display: none; } } .desktop-only .ko-nav-mobile-label { display: none; } .ko-sub-nav-heading, .ko-sub-nav-heading-current-team { width: 16rem; padding: 0.75rem; height: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; font-family: trade; font-weight: bold; text-transform: uppercase; } .no-flexbox .ko-sub-nav-heading, .no-flexbox .ko-sub-nav-heading-current-team { display: block; } .no-flexbox .ko-sub-nav-heading svg, .no-flexbox .ko-sub-nav-heading-current-team svg { position: relative; top: 0.1875rem; } .ko-sub-nav-heading svg, .ko-sub-nav-heading-current-team svg { height: 1rem; width: 1rem; margin-right: 0.5rem; } .ko-sub-nav-heading svg path, .ko-sub-nav-heading-current-team svg path { fill: #FF6600; } @media only screen and (min-width: 65em) { .ko-sub-nav-heading, .ko-sub-nav-heading-current-team { display: none; } } .desktop-only .ko-sub-nav-heading, .desktop-only .ko-sub-nav-heading-current-team { display: none; } .ko-sub-nav-heading-current-team { color: #FF6600 !important; cursor: pointer; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } .ko-sub-nav-heading-current-team .ko-nav-icon path { fill: #FF6600; } .no-flexbox .ko-sub-nav-heading-current-team .ko-nav-icon { margin-left: .5rem; position: relative; top: 0.1875rem; } html.ko-sidemenu-left-is-open { overflow: hidden; } @media only screen and (min-width: 65em) { html.ko-sidemenu-left-is-open { overflow: auto; } } .desktop-only html.ko-sidemenu-left-is-open { overflow: auto; } .ko-wrap { background-color: #FFFFFF; z-index: 1; position: relative; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; } .ko-sidemenu-left-is-open .ko-wrap { -webkit-transform: translateX(16rem); -moz-transform: translateX(16rem); -ms-transform: translateX(16rem); -o-transform: translateX(16rem); transform: translateX(16rem); overflow: hidden; } @media only screen and (min-width: 65em) { .ko-sidemenu-left-is-open .ko-wrap { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); overflow: auto; } } .desktop-only .ko-sidemenu-left-is-open .ko-wrap { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); overflow: auto; } /* 1. Fix for Chrome 43's "ignoring the height rule bug" that appears to be fixed in Chrome 44. (https://code.google.com/p/chromium/issues/detail?id=484575) */ .ko-subheader { background-color: #38434F; color: #FFFFFF; padding: 0 1rem; height: 3rem; min-height: 3rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } @media only screen and (min-width: 65em) { .ko-subheader { height: 4rem; min-height: 4rem; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } .no-flexbox .ko-subheader:after { content: ""; display: table; clear: both; } } html.no-rgba .ko-subheader { height: 4rem; min-height: 4rem; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } .no-flexbox html.no-rgba .ko-subheader:after { content: ""; display: table; clear: both; } .desktop-only .ko-subheader { height: 4rem; min-height: 4rem; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } .no-flexbox .desktop-only .ko-subheader:after { content: ""; display: table; clear: both; } .ko-subheader h1 { display: none; margin-right: 2rem; } @media only screen and (min-width: 65em) { .ko-subheader h1 { display: block; color: #FFFFFF; font-family: trade; font-weight: bold; text-transform: uppercase; font-size: 2rem; } .no-flexbox .ko-subheader h1 { float: left; } } html.no-rgba .ko-subheader h1 { display: block; color: #FFFFFF; font-family: trade; font-weight: bold; text-transform: uppercase; font-size: 2rem; } .no-flexbox html.no-rgba .ko-subheader h1 { float: left; } .desktop-only .ko-subheader h1 { display: block; color: #FFFFFF; font-family: trade; font-weight: bold; text-transform: uppercase; font-size: 2rem; } .no-flexbox .desktop-only .ko-subheader h1 { float: left; } .ko-subheader > div { display: -webkit-inline-box; display: -moz-inline-box; display: inline-box; display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } .ko-subheader > div:after { content: ""; display: table; clear: both; } .ko-subheader > div > a { color: #FFFFFF; padding: 1rem; cursor: pointer; } @media only screen and (min-width: 65em) { .ko-subheader > div > a { padding: 1.5rem; } } html.no-rgba .ko-subheader > div > a { padding: 1.5rem; } .desktop-only .ko-subheader > div > a { padding: 1.5rem; } .ko-subheader > div > a:first-child { margin-left: 0; } .ko-subheader > div > a:hover { background-color: #2d3640; color: #FFFFFF; } .ko-subheader > div > a.selected { background-color: #2d3640; font-weight: bold; text-transform: uppercase; } .season-switcher { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around; justify-content: space-around; -ms-flex-pack: center; } .no-flexbox .season-switcher { text-align: center; } .no-flexbox .season-switcher:after { content: ""; display: table; clear: both; } @media only screen and (min-width: 65em) { .no-flexbox .season-switcher { float: right; position: relative; top: .25rem; } } html.no-rgba .no-flexbox .season-switcher { float: right; position: relative; top: .25rem; } .desktop-only .no-flexbox .season-switcher { float: right; position: relative; top: .25rem; } .season-switcher .selected-season { margin: 0 1rem; } .no-flexbox .season-switcher .selected-season { display: inline-block; } .season-switcher .ko-switch-season { cursor: pointer; display: inline-block; height: 4rem; padding: 1.5rem 0.5rem; } .season-switcher .ko-switch-season:hover svg, .season-switcher .ko-switch-season:hover path { fill: #FF6600; } .season-switcher .ko-switch-season a { display: inline-block; height: 4rem; } .season-switcher .ko-switch-season svg, .season-switcher .ko-switch-season path { fill: #FFFFFF; width: 1rem; height: 1rem; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .no-flexbox .season-switcher .ko-switch-season svg, .no-flexbox .season-switcher .ko-switch-season path { display: inline-block; position: relative; top: .125rem; } .season-switcher .ko-switch-season.ko-season-disabled svg, .season-switcher .ko-switch-season.ko-season-disabled path { fill: rgba(255, 255, 255, 0.25); } .season-switcher .ko-switch-season.ko-season-disabled:hover { fill: rgba(255, 255, 255, 0.25); cursor: default; } .ko-col-layout { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .ko-col-layout .ko-two-col-left { overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } @media only screen and (min-width: 37.5em) { .ko-col-layout .ko-two-col-left { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; -webkit-flex: 2; -moz-flex: 2; -ms-flex: 2; flex: 2; } } html.no-rgba .ko-col-layout .ko-two-col-left { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; -webkit-flex: 2; -moz-flex: 2; -ms-flex: 2; flex: 2; } .desktop-only .ko-col-layout .ko-two-col-left { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; -webkit-flex: 2; -moz-flex: 2; -ms-flex: 2; flex: 2; } @media only screen and (min-width: 65em) { .ko-col-layout .ko-two-col-left { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } } html.no-rgba .ko-col-layout .ko-two-col-left { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .desktop-only .ko-col-layout .ko-two-col-left { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .ko-col-layout .ko-two-col-right { overflow-y: auto; -webkit-overflow-scrolling: touch; display: none; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } @media only screen and (min-width: 37.5em) { .ko-col-layout .ko-two-col-right { display: block; border-left: 1px solid #E8E8E8; box-shadow: inset 0 0 10px rgba(35, 42, 49, 0.1); -webkit-box-flex: 3; -moz-box-flex: 3; box-flex: 3; -webkit-flex: 3; -moz-flex: 3; -ms-flex: 3; flex: 3; } } html.no-rgba .ko-col-layout .ko-two-col-right { display: block; border-left: 1px solid #E8E8E8; box-shadow: inset 0 0 10px rgba(35, 42, 49, 0.1); -webkit-box-flex: 3; -moz-box-flex: 3; box-flex: 3; -webkit-flex: 3; -moz-flex: 3; -ms-flex: 3; flex: 3; } .desktop-only .ko-col-layout .ko-two-col-right { display: block; border-left: 1px solid #E8E8E8; box-shadow: inset 0 0 10px rgba(35, 42, 49, 0.1); -webkit-box-flex: 3; -moz-box-flex: 3; box-flex: 3; -webkit-flex: 3; -moz-flex: 3; -ms-flex: 3; flex: 3; } @media only screen and (min-width: 65em) { .ko-col-layout .ko-two-col-right { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; -webkit-flex: 2; -moz-flex: 2; -ms-flex: 2; flex: 2; } } html.no-rgba .ko-col-layout .ko-two-col-right { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; -webkit-flex: 2; -moz-flex: 2; -ms-flex: 2; flex: 2; } .desktop-only .ko-col-layout .ko-two-col-right { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; -webkit-flex: 2; -moz-flex: 2; -ms-flex: 2; flex: 2; } .ko-col-layout .ko-three-col-left, .ko-col-layout .ko-three-col-middle, .ko-col-layout .ko-three-col-right { overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .ko-col-layout .ko-three-col-middle, .ko-col-layout .ko-three-col-right { border-left: 1px solid #E8E8E8; box-shadow: inset 0 0 10px rgba(35, 42, 49, 0.1); } @font-face { font-family: trade; font-weight: normal; font-style: normal; src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.eot"); src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular/regular.svg#trade") format("svg"); } @font-face { font-family: trade; font-weight: normal; font-style: italic; src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.eot"); src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/regular-oblique/regular-oblique.svg#trade") format("svg"); } @font-face { font-family: trade; font-weight: bold; font-style: normal; src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.eot"); src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-one/bold.svg#trade") format("svg"); } @font-face { font-family: trade; font-weight: bold; font-style: italic; src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.eot"); src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/bold-oblique/bold-oblique.svg#trade") format("svg"); } @font-face { font-family: trade-condensed; font-weight: normal; font-style: normal; src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.eot"); src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed/condensed.svg#trade-condensed") format("svg"); } @font-face { font-family: trade-condensed; font-weight: normal; font-style: oblique; src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.eot"); src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-oblique/condensed-oblique.svg#trade-condensed") format("svg"); } @font-face { font-family: trade-condensed; font-weight: bold; font-style: normal; src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.eot"); src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold/condensed-bold.svg#trade-condensed") format("svg"); } @font-face { font-family: trade-condensed; font-weight: bold; font-style: oblique; src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.eot"); src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-bold-oblique/condensed-bold-oblique.svg#trade-condensed") format("svg"); } @font-face { font-family: trade-heavy; font-weight: bold; font-style: normal; src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.eot"); src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/heavy/heavy.svg#trade-heavy") format("svg"); } @font-face { font-family: trade-heavy-condensed; font-weight: bold; font-style: normal; src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.eot"); src: url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.eot?#iefix") format("embedded-opentype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.woff") format("woff"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.ttf") format("truetype"), url("//d3hhcdv9i08ck8.cloudfront.net/trade-gothic/condensed-heavy/condensed-heavy.svg#trade-heavy-condensed") format("svg"); } /*doc --- title: Buttons name: buttons category: Elements --- These are the default button styles that should be used throughout Hudl. A few notes: - We use **Title Case** on our buttons. - Feel free to use an icon with the button - Your **element** doesn't really matter (you can use an `` or a ` Everyday Action

Can't Click

Cancel

``` ### Block Usage Add an additional class of `btn-block` for a button that fills its container ```html_example ``` ### Loading Buttons Add an additional class of `btn-loading` to get a spinner on a button! ```html_example

``` ### Icons in Buttons Throw an `` in a button, no problem. ```html_example

``` Want a vanilla flat icon button? Use `btn-plain`. ```html_example ``` ### Other Buttons A few other default styles for your use. ```html_example

``` */ .btn-plain, .btn-default, .ko-btn-default, .btn-white, .btn-primary, .btn-danger, .btn-confirmation, .btn-cancel, .btn-text { color: #232A31; background-color: transparent; border: none; display: inline-block; font-size: 100%; margin: 0; padding: 0; cursor: pointer; text-decoration: none; font-weight: normal; position: relative; box-shadow: none; line-height: 1rem; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .btn-plain svg, .btn-default svg, .ko-btn-default svg, .btn-white svg, .btn-primary svg, .btn-danger svg, .btn-confirmation svg, .btn-cancel svg, .btn-text svg, .btn-plain path, .btn-default path, .ko-btn-default path, .btn-white path, .btn-primary path, .btn-danger path, .btn-confirmation path, .btn-cancel path, .btn-text path, .btn-plain polygon, .btn-default polygon, .ko-btn-default polygon, .btn-white polygon, .btn-primary polygon, .btn-danger polygon, .btn-confirmation polygon, .btn-cancel polygon, .btn-text polygon { width: 1rem; height: 1rem; fill: #8A8A8A; } .btn-inline-group .btn-plain, .btn-inline-group .btn-default, .btn-inline-group .ko-btn-default, .btn-inline-group .btn-white, .btn-inline-group .btn-primary, .btn-inline-group .btn-danger, .btn-inline-group .btn-confirmation, .btn-inline-group .btn-cancel, .btn-inline-group .btn-text { margin-left: .5rem; } .btn-inline-group .btn-plain:first-child, .btn-inline-group .btn-default:first-child, .btn-inline-group .ko-btn-default:first-child, .btn-inline-group .btn-white:first-child, .btn-inline-group .btn-primary:first-child, .btn-inline-group .btn-danger:first-child, .btn-inline-group .btn-confirmation:first-child, .btn-inline-group .btn-cancel:first-child, .btn-inline-group .btn-text:first-child { margin-left: 0; } .btn-default, .ko-btn-default, .btn-white, .btn-primary, .btn-danger, .btn-confirmation, .btn-cancel, .btn-text { font-weight: bold; font-family: trade; font-size: 1rem; padding: .75rem; border: 0.0625rem solid transparent; width: auto; vertical-align: top; } .btn-default svg, .ko-btn-default svg, .btn-white svg, .btn-primary svg, .btn-danger svg, .btn-confirmation svg, .btn-cancel svg, .btn-text svg { width: .75rem; height: .75rem; margin-right: .5rem; } .btn-default, .ko-btn-default { box-shadow: 0 0.0625rem 0 0 #dddddd; border-radius: 0.125rem; border-color: #e9e9e9; border-style: solid; background-color: #F5F5F5; background-image: -webkit-linear-gradient(#F5F5F5, #f0f0f0); background-image: linear-gradient(#F5F5F5, #f0f0f0); color: #232A31; } .btn-default.btn-loading, .btn-loading.ko-btn-default { padding-left: 3rem; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .btn-default.btn-loading.btn-block, .btn-loading.btn-block.ko-btn-default { padding-left: .75rem; } .btn-default.btn-loading.btn-block:after, .btn-loading.btn-block.ko-btn-default:after { left: .75rem; } .btn-default.btn-loading img, .btn-loading.ko-btn-default img, .btn-default.btn-loading svg, .btn-loading.ko-btn-default svg { display: none; } .btn-default.btn-loading:disabled, .btn-loading.ko-btn-default:disabled, .btn-default.btn-loading .disabled, .btn-loading.ko-btn-default .disabled { opacity: 1; } .btn-default.btn-loading:after, .btn-loading.ko-btn-default:after { -webkit-animation: spinner-rotation 0.75s infinite linear; -moz-animation: spinner-rotation 0.75s infinite linear; animation: spinner-rotation 0.75s infinite linear; clear: both; height: 1rem; width: 1rem; margin: 0 auto 0 auto; position: relative; border-top: 0.25rem solid #8A8A8A; border-left: 0.25rem solid rgba(138, 138, 138, 0.4); border-bottom: 0.25rem solid rgba(138, 138, 138, 0.4); border-right: 0.25rem solid rgba(138, 138, 138, 0.4); border-radius: 100%; display: block; content: ''; position: absolute; top: 50%; margin-top: -.75rem; left: .75rem; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .no-cssanimations .btn-default.btn-loading:after, .no-cssanimations .btn-loading.ko-btn-default:after { display: none; } .btn-default svg, .ko-btn-default svg, .btn-default path, .ko-btn-default path, .btn-default polygon, .ko-btn-default polygon { fill: #232A31; } .btn-default:link, .ko-btn-default:link, .btn-default:visited, .ko-btn-default:visited { border-bottom: 0; color: #232A31; } .btn-default:disabled, .ko-btn-default:disabled, .btn-default.disabled, .disabled.ko-btn-default { color: #c2c2c2; opacity: 0.7; cursor: default; } .btn-default:disabled svg, .ko-btn-default:disabled svg, .btn-default:disabled path, .ko-btn-default:disabled path, .btn-default.disabled svg, .disabled.ko-btn-default svg, .btn-default.disabled path, .disabled.ko-btn-default path { fill: #c2c2c2; } .btn-default:disabled.btn-confirmation, .ko-btn-default:disabled.btn-confirmation, .btn-default.disabled.btn-confirmation, .disabled.btn-confirmation.ko-btn-default { color: #232A31; } .btn-default:disabled.btn-loading, .ko-btn-default:disabled.btn-loading, .btn-default.disabled.btn-loading, .disabled.btn-loading.ko-btn-default { color: #232A31; } .btn-default:hover, .ko-btn-default:hover, .btn-default:focus, .ko-btn-default:focus { background-color: #f8f8f8; background-image: none; outline: none; } .btn-default:hover:disabled, .ko-btn-default:hover:disabled, .btn-default:hover.disabled, .ko-btn-default:hover.disabled, .btn-default:focus:disabled, .ko-btn-default:focus:disabled, .btn-default:focus.disabled, .ko-btn-default:focus.disabled { background-color: #F5F5F5; background-image: -webkit-linear-gradient(#F5F5F5, #f0f0f0); background-image: linear-gradient(#F5F5F5, #f0f0f0); } .btn-default:active, .ko-btn-default:active { background-color: #f0f0f0; box-shadow: inset 0 0 0.25rem #e9e9e9; -webkit-transform: translateY(0.0625rem); -moz-transform: translateY(0.0625rem); -ms-transform: translateY(0.0625rem); -o-transform: translateY(0.0625rem); transform: translateY(0.0625rem); } .btn-default:active:disabled, .ko-btn-default:active:disabled, .btn-default:active.disabled, .ko-btn-default:active.disabled { box-shadow: 0 0.0625rem 0 0 #dddddd; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); background-color: #F5F5F5; background-image: -webkit-linear-gradient(#F5F5F5, #f0f0f0); background-image: linear-gradient(#F5F5F5, #f0f0f0); } .btn-white { box-shadow: 0 0.0625rem 0 0 #e6e6e6; border-radius: 0.125rem; border-color: #f2f2f2; border-style: solid; background-color: #FFFFFF; background-image: -webkit-linear-gradient(#FFFFFF, #fafafa); background-image: linear-gradient(#FFFFFF, #fafafa); color: #232A31; } .btn-white.btn-loading { padding-left: 3rem; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .btn-white.btn-loading.btn-block { padding-left: .75rem; } .btn-white.btn-loading.btn-block:after { left: .75rem; } .btn-white.btn-loading img, .btn-white.btn-loading svg { display: none; } .btn-white.btn-loading:disabled, .btn-white.btn-loading .disabled { opacity: 1; } .btn-white.btn-loading:after { -webkit-animation: spinner-rotation 0.75s infinite linear; -moz-animation: spinner-rotation 0.75s infinite linear; animation: spinner-rotation 0.75s infinite linear; clear: both; height: 1rem; width: 1rem; margin: 0 auto 0 auto; position: relative; border-top: 0.25rem solid #8A8A8A; border-left: 0.25rem solid rgba(138, 138, 138, 0.4); border-bottom: 0.25rem solid rgba(138, 138, 138, 0.4); border-right: 0.25rem solid rgba(138, 138, 138, 0.4); border-radius: 100%; display: block; content: ''; position: absolute; top: 50%; margin-top: -.75rem; left: .75rem; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .no-cssanimations .btn-white.btn-loading:after { display: none; } .btn-white svg, .btn-white path, .btn-white polygon { fill: #232A31; } .btn-white:link, .btn-white:visited { border-bottom: 0; color: #232A31; } .btn-white:disabled, .btn-white.disabled { color: #cccccc; opacity: 0.7; cursor: default; } .btn-white:disabled svg, .btn-white:disabled path, .btn-white.disabled svg, .btn-white.disabled path { fill: #cccccc; } .btn-white:disabled.btn-confirmation, .btn-white.disabled.btn-confirmation { color: #232A31; } .btn-white:disabled.btn-loading, .btn-white.disabled.btn-loading { color: #232A31; } .btn-white:hover, .btn-white:focus { background-color: white; background-image: none; outline: none; } .btn-white:hover:disabled, .btn-white:hover.disabled, .btn-white:focus:disabled, .btn-white:focus.disabled { background-color: #FFFFFF; background-image: -webkit-linear-gradient(#FFFFFF, #fafafa); background-image: linear-gradient(#FFFFFF, #fafafa); } .btn-white:active { background-color: #fafafa; box-shadow: inset 0 0 0.25rem #f2f2f2; -webkit-transform: translateY(0.0625rem); -moz-transform: translateY(0.0625rem); -ms-transform: translateY(0.0625rem); -o-transform: translateY(0.0625rem); transform: translateY(0.0625rem); } .btn-white:active:disabled, .btn-white:active.disabled { box-shadow: 0 0.0625rem 0 0 #e6e6e6; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); background-color: #FFFFFF; background-image: -webkit-linear-gradient(#FFFFFF, #fafafa); background-image: linear-gradient(#FFFFFF, #fafafa); } .btn-primary { box-shadow: 0 0.0625rem 0 0 #e65c00; border-radius: 0.125rem; border-color: #f26100; border-style: solid; background-color: #FF6600; background-image: -webkit-linear-gradient(#FF6600, #fa6400); background-image: linear-gradient(#FF6600, #fa6400); color: #FFFFFF; } .btn-primary.btn-loading { padding-left: 3rem; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .btn-primary.btn-loading.btn-block { padding-left: .75rem; } .btn-primary.btn-loading.btn-block:after { left: .75rem; } .btn-primary.btn-loading img, .btn-primary.btn-loading svg { display: none; } .btn-primary.btn-loading:disabled, .btn-primary.btn-loading .disabled { opacity: 1; } .btn-primary.btn-loading:after { -webkit-animation: spinner-rotation 0.75s infinite linear; -moz-animation: spinner-rotation 0.75s infinite linear; animation: spinner-rotation 0.75s infinite linear; clear: both; height: 1rem; width: 1rem; margin: 0 auto 0 auto; position: relative; border-top: 0.25rem solid #FFFFFF; border-left: 0.25rem solid rgba(255, 255, 255, 0.4); border-bottom: 0.25rem solid rgba(255, 255, 255, 0.4); border-right: 0.25rem solid rgba(255, 255, 255, 0.4); border-radius: 100%; display: block; content: ''; position: absolute; top: 50%; margin-top: -.75rem; left: .75rem; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .no-cssanimations .btn-primary.btn-loading:after { display: none; } .btn-primary svg, .btn-primary path, .btn-primary polygon { fill: #FFFFFF; } .btn-primary:link, .btn-primary:visited { color: #FFFFFF; } .btn-primary:disabled, .btn-primary.disabled { color: #ffa366; opacity: 0.4; cursor: default; } .btn-primary:disabled svg, .btn-primary:disabled path, .btn-primary.disabled svg, .btn-primary.disabled path { fill: #ffa366; } .btn-primary:disabled.btn-confirmation, .btn-primary.disabled.btn-confirmation { color: #FFFFFF; } .btn-primary:disabled.btn-loading, .btn-primary.disabled.btn-loading { color: #FFFFFF; } .btn-primary:hover, .btn-primary:focus { background: #ff751a; background-image: none; outline: none; } .btn-primary:hover:disabled, .btn-primary:hover.disabled, .btn-primary:focus:disabled, .btn-primary:focus.disabled { background-color: #FF6600; background-image: -webkit-linear-gradient(#FF6600, #fa6400); background-image: linear-gradient(#FF6600, #fa6400); } .btn-primary:active { background-color: #f56200; box-shadow: inset 0 0 0.25rem #f26100; -webkit-transform: translateY(0.0625rem); -moz-transform: translateY(0.0625rem); -ms-transform: translateY(0.0625rem); -o-transform: translateY(0.0625rem); transform: translateY(0.0625rem); } .btn-primary:active:disabled, .btn-primary:active.disabled { box-shadow: 0 0.0625rem 0 0 #e65c00; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); background-color: #FF6600; background-image: -webkit-linear-gradient(#FF6600, #fa6400); background-image: linear-gradient(#FF6600, #fa6400); } .btn-danger { box-shadow: 0 0.0625rem 0 0 #c21a1a; border-radius: 0.125rem; border-color: #cd1c1c; border-style: solid; background-color: #D81D1D; background-image: -webkit-linear-gradient(#D81D1D, #d41c1c); background-image: linear-gradient(#D81D1D, #d41c1c); color: #FFFFFF; } .btn-danger.btn-loading { padding-left: 3rem; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .btn-danger.btn-loading.btn-block { padding-left: .75rem; } .btn-danger.btn-loading.btn-block:after { left: .75rem; } .btn-danger.btn-loading img, .btn-danger.btn-loading svg { display: none; } .btn-danger.btn-loading:disabled, .btn-danger.btn-loading .disabled { opacity: 1; } .btn-danger.btn-loading:after { -webkit-animation: spinner-rotation 0.75s infinite linear; -moz-animation: spinner-rotation 0.75s infinite linear; animation: spinner-rotation 0.75s infinite linear; clear: both; height: 1rem; width: 1rem; margin: 0 auto 0 auto; position: relative; border-top: 0.25rem solid #FFFFFF; border-left: 0.25rem solid rgba(255, 255, 255, 0.4); border-bottom: 0.25rem solid rgba(255, 255, 255, 0.4); border-right: 0.25rem solid rgba(255, 255, 255, 0.4); border-radius: 100%; display: block; content: ''; position: absolute; top: 50%; margin-top: -.75rem; left: .75rem; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .no-cssanimations .btn-danger.btn-loading:after { display: none; } .btn-danger svg, .btn-danger path, .btn-danger polygon { fill: #FFFFFF; } .btn-danger:link, .btn-danger:visited { color: #FFFFFF; } .btn-danger:disabled, .btn-danger.disabled { color: #ec6f6f; opacity: 0.4; cursor: default; } .btn-danger:disabled svg, .btn-danger:disabled path, .btn-danger.disabled svg, .btn-danger.disabled path { fill: #ec6f6f; } .btn-danger:disabled.btn-confirmation, .btn-danger.disabled.btn-confirmation { color: #FFFFFF; } .btn-danger:disabled.btn-loading, .btn-danger.disabled.btn-loading { color: #FFFFFF; } .btn-danger:hover, .btn-danger:focus { background: #e32c2c; background-image: none; outline: none; } .btn-danger:hover:disabled, .btn-danger:hover.disabled, .btn-danger:focus:disabled, .btn-danger:focus.disabled { background-color: #D81D1D; background-image: -webkit-linear-gradient(#D81D1D, #d41c1c); background-image: linear-gradient(#D81D1D, #d41c1c); } .btn-danger:active { background-color: #cf1c1c; box-shadow: inset 0 0 0.25rem #cd1c1c; -webkit-transform: translateY(0.0625rem); -moz-transform: translateY(0.0625rem); -ms-transform: translateY(0.0625rem); -o-transform: translateY(0.0625rem); transform: translateY(0.0625rem); } .btn-danger:active:disabled, .btn-danger:active.disabled { box-shadow: 0 0.0625rem 0 0 #c21a1a; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); background-color: #D81D1D; background-image: -webkit-linear-gradient(#D81D1D, #d41c1c); background-image: linear-gradient(#D81D1D, #d41c1c); } .btn-confirmation { box-shadow: 0 0.0625rem 0 0 #5f921d; border-radius: 0.125rem; border-color: #659a1e; border-style: solid; background-color: #6AA220; background-image: -webkit-linear-gradient(#6AA220, #689f1f); background-image: linear-gradient(#6AA220, #689f1f); color: #FFFFFF; } .btn-confirmation.btn-loading { padding-left: 3rem; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .btn-confirmation.btn-loading.btn-block { padding-left: .75rem; } .btn-confirmation.btn-loading.btn-block:after { left: .75rem; } .btn-confirmation.btn-loading img, .btn-confirmation.btn-loading svg { display: none; } .btn-confirmation.btn-loading:disabled, .btn-confirmation.btn-loading .disabled { opacity: 1; } .btn-confirmation.btn-loading:after { -webkit-animation: spinner-rotation 0.75s infinite linear; -moz-animation: spinner-rotation 0.75s infinite linear; animation: spinner-rotation 0.75s infinite linear; clear: both; height: 1rem; width: 1rem; margin: 0 auto 0 auto; position: relative; border-top: 0.25rem solid #FFFFFF; border-left: 0.25rem solid rgba(255, 255, 255, 0.4); border-bottom: 0.25rem solid rgba(255, 255, 255, 0.4); border-right: 0.25rem solid rgba(255, 255, 255, 0.4); border-radius: 100%; display: block; content: ''; position: absolute; top: 50%; margin-top: -.75rem; left: .75rem; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .no-cssanimations .btn-confirmation.btn-loading:after { display: none; } .btn-confirmation svg, .btn-confirmation path, .btn-confirmation polygon { fill: #FFFFFF; } .btn-confirmation:link, .btn-confirmation:visited { color: #FFFFFF; } .btn-confirmation:disabled, .btn-confirmation.disabled { color: #9edc4c; opacity: 0.4; cursor: default; } .btn-confirmation:disabled svg, .btn-confirmation:disabled path, .btn-confirmation.disabled svg, .btn-confirmation.disabled path { fill: #9edc4c; } .btn-confirmation:disabled.btn-confirmation, .btn-confirmation.disabled.btn-confirmation { color: #FFFFFF; } .btn-confirmation:disabled.btn-loading, .btn-confirmation.disabled.btn-loading { color: #FFFFFF; } .btn-confirmation:hover, .btn-confirmation:focus { background: #78b724; background-image: none; outline: none; } .btn-confirmation:hover:disabled, .btn-confirmation:hover.disabled, .btn-confirmation:focus:disabled, .btn-confirmation:focus.disabled { background-color: #6AA220; background-image: -webkit-linear-gradient(#6AA220, #689f1f); background-image: linear-gradient(#6AA220, #689f1f); } .btn-confirmation:active { background-color: #64991e; box-shadow: inset 0 0 0.25rem #659a1e; -webkit-transform: translateY(0.0625rem); -moz-transform: translateY(0.0625rem); -ms-transform: translateY(0.0625rem); -o-transform: translateY(0.0625rem); transform: translateY(0.0625rem); } .btn-confirmation:active:disabled, .btn-confirmation:active.disabled { box-shadow: 0 0.0625rem 0 0 #5f921d; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); background-color: #6AA220; background-image: -webkit-linear-gradient(#6AA220, #689f1f); background-image: linear-gradient(#6AA220, #689f1f); } .btn-confirmation:disabled, .btn-confirmation.disabled { opacity: 1; } .btn-cancel, .btn-text { color: #FF6600; font-weight: bold; } .btn-cancel:hover, .btn-text:hover { background-color: transparent; color: #ff751a; } .btn-block { text-align: center; display: block; width: 100%; } /*doc --- title: Article name: article category: Elements --- Since Hudl is a web app, we're confining default typography to within a `.ko-article` class. We've got default stylings for headings, paragraphs, links, and lists. Everything also gets a line-height of 1.4 by default and solid vertical rhythm. ```html_example

This is a big heading.

Pede cum deserunt ducimus hymenaeos gravida risus sodales molestias repellendus nostrud ipsam, praesent nam temporibus praesent aspernatur turpis, ridiculus, condimentum? Nullam sed animi adipisci veniam. Iure sociosqu, possimus phasellus vehicula, amet erat eaque, veritatis ea lacus dolorum pharetra! Hic quas? Quis alias. Cillum habitasse. Nostrum semper? Metus ea, maecenas fames.

This is a smaller heading.

Egestas conubia velit senectus eligendi tortor nobis qui nostrud itaque mollitia. Iure ex incididunt varius quas mauris! Minima rhoncus magni! Minus sit mollis cras, pariatur tortor dicta accusamus temporibus mauris nibh molestie, sapiente pretium luctus! Mattis magnis purus assumenda dictum quis interdum atque! Cupiditate. Adipisicing, quisquam sem lobortis porta. Inventore.

I don't know what this list is about.
It could be about anything, really.
This third point is pretty convincing.

Another heading! Whoo hoo!

Torquent! Rutrum nunc quaerat dignissimos? Occaecat, volutpat soluta aute nemo aut wisi? Architecto temporibus eaque, doloremque harum exercitation! Urna, vestibulum dolorem eligendi, diam perspiciatis. Maecenas? Optio cubilia quisque, ut ullamco, libero libero.

Ut optio perspiciatis esse aut, quia soluta laoreet, facilis delectus. Sollicitudin non sodales taciti dapibus, expedita! Magnam ipsam, dictumst natus, pulvinar proident sequi! Totam excepteur.

We've got H4 styles too!

How about some numbered lists?
You can use these when order is important.
Like ranking your favorite athletes.

``` */ .ko-article { line-height: 1.4rem; } .ko-article h1, .ko-article h2, .ko-article h3, .ko-article h4, .ko-article h5, .ko-article h6 { font-weight: bold; margin-bottom: 1.4rem; line-height: 1.4rem; } .ko-article h1 { text-transform: uppercase; line-height: 2.8rem; font-size: 3rem; } .ko-article h2 { line-height: 2.8rem; font-size: 2rem; } .ko-article h3 { font-size: 1.5rem; } .ko-article h4 { font-size: 1.3125rem; } .ko-article h5, .ko-article h6 { font-size: 1.125rem; } .ko-article p { margin-bottom: 1.4rem; } .ko-article strong, .ko-article b { font-weight: bold; } .ko-article em, .ko-article i { font-style: italic; } .ko-article ul, .ko-article ol { margin-bottom: 1.4rem; margin-left: 2.8rem; } .ko-article ul { list-style-type: disc; } .ko-article ol { list-style-type: decimal; } .ko-article code { background-color: #E8E8E8; border-radius: .125rem; font-weight: bold; display: inline-block; font-family: "Source Code Pro"; padding: .125rem; font-size: 0.75rem; line-height: 1; } /*doc --- title: Forms name: forms category: Elements --- We use the [float label](http://bradfrostweb.com/blog/post/float-label-pattern/) pattern around here. For each item, put a `

` around two things: a `` and an ``. Give the `

Name

Email Address

Your Message

Not quite right

Looks good!

Name

Email Address

``` ```html_example

Name

Phone

``` ```html_example

Name

Phone

Twitter Handle

``` ### Form Actions Put your buttons at the bottom of the form wrapped in a `

` with class `ko-form-actions`. ```html_example

Name

Email Address

Choose this one
Or maybe this
Perhaps this is better
But this one's worse

``` ```html_example

You can choose
As many things
As you'd like!
Except this thing

Eleifend eaque quo semper pellentesque laboriosam habitasse, asperiores ultrices condimentum netus, rerum?

``` ``` .some-icons { svg, path, polygon { width: 2rem; height: 2rem; fill: $dark2; } } ```

*/ .some-icons svg, .some-icons path, .some-icons polygon { width: 2rem; height: 2rem; margin-right: 1rem; fill: #4E5D6C; } .all-the-icons { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; flex-flow: row wrap; } .all-the-icons:after { content: ""; display: table; clear: both; } .all-the-icons svg { width: 4rem; height: 4rem; fill: #4E5D6C; background-color: #E8E8E8; border-radius: 2px; padding: 1rem; } .all-the-icons path, .all-the-icons polygon { fill: #4E5D6C; } .ko-icon-container { width: 33%; margin-bottom: 1.5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .ko-icon-container div:last-child { margin-left: 1rem; } .ko-docs .ko-content { padding: 1rem; max-width: 50rem; margin: 0 auto; position: relative; } .ko-docs .ko-content > h1 { padding-top: 2rem; color: #38434F; position: relative; } .ko-docs .ko-content > h1:first-child { margin-top: 0; border-top: none; } .codeExample { border-top: 1px solid #E8E8E8; padding-top: 1rem; padding-bottom: 1rem; margin-top: 3rem; position: relative; } .codeExample:before { content: 'Example:'; position: absolute; color: #8A8A8A; font-weight: bold; left: 0; bottom: 100%; padding: 0 0 .25rem 0; text-transform: uppercase; font-size: 0.75rem; } .exampleOutput { margin-bottom: 2rem; } .codeBlock { background-color: #F5F5F5; border: 1px solid #E8E8E8; padding: 1rem; font-family: "Source Code Pro"; margin-bottom: 2rem; font-size: 0.75rem; } .codeBlock pre { white-space: pre-wrap; } .ko-color-block-ui_dark_color { width: 10rem; height: 10rem; background-color: #232A31; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_dark_color.ko-color-light { color: #232A31; } .ko-color-block-ui_dark_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_dark_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_dark_medium_color { width: 10rem; height: 10rem; background-color: #38434F; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_dark_medium_color.ko-color-light { color: #232A31; } .ko-color-block-ui_dark_medium_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_dark_medium_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_dark_light_color { width: 10rem; height: 10rem; background-color: #4E5D6C; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_dark_light_color.ko-color-light { color: #232A31; } .ko-color-block-ui_dark_light_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_dark_light_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_gray_color { width: 10rem; height: 10rem; background-color: #8A8A8A; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_gray_color.ko-color-light { color: #232A31; } .ko-color-block-ui_gray_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_gray_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_gray_medium_color { width: 10rem; height: 10rem; background-color: #E8E8E8; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_gray_medium_color.ko-color-light { color: #232A31; } .ko-color-block-ui_gray_medium_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_gray_medium_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_gray_light_color { width: 10rem; height: 10rem; background-color: #F5F5F5; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_gray_light_color.ko-color-light { color: #232A31; } .ko-color-block-ui_gray_light_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_gray_light_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_blue_color { width: 10rem; height: 10rem; background-color: #00AEEF; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_blue_color.ko-color-light { color: #232A31; } .ko-color-block-ui_blue_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_blue_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_orange_color { width: 10rem; height: 10rem; background-color: #FF6600; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_orange_color.ko-color-light { color: #232A31; } .ko-color-block-ui_orange_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_orange_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_red_color { width: 10rem; height: 10rem; background-color: #D81D1D; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_red_color.ko-color-light { color: #232A31; } .ko-color-block-ui_red_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_red_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_yellow_color { width: 10rem; height: 10rem; background-color: #FABE39; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_yellow_color.ko-color-light { color: #232A31; } .ko-color-block-ui_yellow_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_yellow_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_green_color { width: 10rem; height: 10rem; background-color: #6AA220; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_green_color.ko-color-light { color: #232A31; } .ko-color-block-ui_green_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_green_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_text_dark_color { width: 10rem; height: 10rem; background-color: #333333; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_text_dark_color.ko-color-light { color: #232A31; } .ko-color-block-ui_text_dark_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_text_dark_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_text_medium_color { width: 10rem; height: 10rem; background-color: #666666; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_text_medium_color.ko-color-light { color: #232A31; } .ko-color-block-ui_text_medium_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_text_medium_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_text_light_color { width: 10rem; height: 10rem; background-color: #999999; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_text_light_color.ko-color-light { color: #232A31; } .ko-color-block-ui_text_light_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_text_light_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_text_extra_light_color { width: 10rem; height: 10rem; background-color: #CCCCCC; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_text_extra_light_color.ko-color-light { color: #232A31; } .ko-color-block-ui_text_extra_light_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_text_extra_light_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_white_color { width: 10rem; height: 10rem; background-color: #FFFFFF; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_white_color.ko-color-light { color: #232A31; } .ko-color-block-ui_white_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_white_color div:last-child { font-size: 1.125rem; } .ko-color-block-ui_black_color { width: 10rem; height: 10rem; background-color: #000000; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-ui_black_color.ko-color-light { color: #232A31; } .ko-color-block-ui_black_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-ui_black_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_default_color { width: 10rem; height: 10rem; background-color: #232A31; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_default_color.ko-color-light { color: #232A31; } .ko-color-block-team_default_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_default_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_light_gray_color { width: 10rem; height: 10rem; background-color: #E9E9E9; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_light_gray_color.ko-color-light { color: #232A31; } .ko-color-block-team_light_gray_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_light_gray_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_yellow_color { width: 10rem; height: 10rem; background-color: #FFDD00; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_yellow_color.ko-color-light { color: #232A31; } .ko-color-block-team_yellow_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_yellow_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_gold_color { width: 10rem; height: 10rem; background-color: #C5B358; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_gold_color.ko-color-light { color: #232A31; } .ko-color-block-team_gold_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_gold_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_orange_color { width: 10rem; height: 10rem; background-color: #F87620; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_orange_color.ko-color-light { color: #232A31; } .ko-color-block-team_orange_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_orange_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_light_red_color { width: 10rem; height: 10rem; background-color: #F30000; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_light_red_color.ko-color-light { color: #232A31; } .ko-color-block-team_light_red_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_light_red_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_red_color { width: 10rem; height: 10rem; background-color: #C20000; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_red_color.ko-color-light { color: #232A31; } .ko-color-block-team_red_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_red_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_maroon_color { width: 10rem; height: 10rem; background-color: #7A1700; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_maroon_color.ko-color-light { color: #232A31; } .ko-color-block-team_maroon_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_maroon_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_black_color { width: 10rem; height: 10rem; background-color: #171919; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_black_color.ko-color-light { color: #232A31; } .ko-color-block-team_black_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_black_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_light_blue_color { width: 10rem; height: 10rem; background-color: #68B2D8; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_light_blue_color.ko-color-light { color: #232A31; } .ko-color-block-team_light_blue_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_light_blue_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_blue_color { width: 10rem; height: 10rem; background-color: #1652AE; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_blue_color.ko-color-light { color: #232A31; } .ko-color-block-team_blue_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_blue_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_dark_blue_color { width: 10rem; height: 10rem; background-color: #0F2A4B; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_dark_blue_color.ko-color-light { color: #232A31; } .ko-color-block-team_dark_blue_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_dark_blue_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_purple_color { width: 10rem; height: 10rem; background-color: #332064; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_purple_color.ko-color-light { color: #232A31; } .ko-color-block-team_purple_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_purple_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_green_color { width: 10rem; height: 10rem; background-color: #2B7834; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_green_color.ko-color-light { color: #232A31; } .ko-color-block-team_green_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_green_color div:last-child { font-size: 1.125rem; } .ko-color-block-team_dark_green_color { width: 10rem; height: 10rem; background-color: #1F4615; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-team_dark_green_color.ko-color-light { color: #232A31; } .ko-color-block-team_dark_green_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-team_dark_green_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_white_color { width: 10rem; height: 10rem; background-color: #E9E9E9; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_white_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_white_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_white_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_gray_color { width: 10rem; height: 10rem; background-color: #8C9196; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_gray_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_gray_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_gray_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_black_color { width: 10rem; height: 10rem; background-color: #404040; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_black_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_black_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_black_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_yellow_color { width: 10rem; height: 10rem; background-color: #FFDD30; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_yellow_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_yellow_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_yellow_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_orange_color { width: 10rem; height: 10rem; background-color: #ED9827; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_orange_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_orange_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_orange_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_red_color { width: 10rem; height: 10rem; background-color: #DF4953; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_red_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_red_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_red_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_green_color { width: 10rem; height: 10rem; background-color: #42BE39; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_green_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_green_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_green_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_blue_color { width: 10rem; height: 10rem; background-color: #3985BE; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_blue_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_blue_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_blue_color div:last-child { font-size: 1.125rem; } .ko-color-block-tagging_team_purple_color { width: 10rem; height: 10rem; background-color: #9F62B1; border-radius: 50%; position: relative; color: #FFFFFF; float: left; margin-right: .5rem; margin-bottom: .5rem; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .ko-color-block-tagging_team_purple_color.ko-color-light { color: #232A31; } .ko-color-block-tagging_team_purple_color div:first-child { font-size: 1.5rem; font-weight: bold; line-height: 1.4; } .ko-color-block-tagging_team_purple_color div:last-child { font-size: 1.125rem; } .ko-color-blocks { margin-bottom: 1.5rem; } .ko-color-blocks:after { content: ""; display: table; clear: both; } .ko-docs-side-nav { position: fixed; left: 1rem; top: 8rem; } .ko-docs-side-nav li a { color: #FF6600; font-weight: bold; display: block; padding-bottom: .5rem; padding-top: .5rem; border-bottom: 1px solid #E8E8E8; width: 10rem; } hll { background-color: #ffffcc; } .c { color: #999988; font-style: italic; } /* Comment */ .err { color: #a61717; background-color: #e3d2d2; } /* Error */ .k { color: #000000; font-weight: bold; } /* Keyword */ .o { color: #000000; font-weight: bold; } /* Operator */ .cm { color: #999988; font-style: italic; } /* Comment.Multiline */ .cp { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Preproc */ .c1 { color: #999988; font-style: italic; } /* Comment.Single */ .cs { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Special */ .gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */ .ge { color: #000000; font-style: italic; } /* Generic.Emph */ .gr { color: #aa0000; } /* Generic.Error */ .gh { color: #999999; } /* Generic.Heading */ .gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted */ .go { color: #888888; } /* Generic.Output */ .gp { color: #555555; } /* Generic.Prompt */ .gs { font-weight: bold; } /* Generic.Strong */ .gu { color: #aaaaaa; } /* Generic.Subheading */ .gt { color: #aa0000; } /* Generic.Traceback */ .kc { color: #000000; font-weight: bold; } /* Keyword.Constant */ .kd { color: #000000; font-weight: bold; } /* Keyword.Declaration */ .kn { color: #000000; font-weight: bold; } /* Keyword.Namespace */ .kp { color: #000000; font-weight: bold; } /* Keyword.Pseudo */ .kr { color: #000000; font-weight: bold; } /* Keyword.Reserved */ .kt { color: #445588; font-weight: bold; } /* Keyword.Type */ .m { color: #009999; } /* Literal.Number */ .s { color: #d01040; } /* Literal.String */ .na { color: #008080; } /* Name.Attribute */ .nb { color: #0086B3; } /* Name.Builtin */ .nc { color: #445588; font-weight: bold; } /* Name.Class */ .no { color: #008080; } /* Name.Constant */ .nd { color: #3c5d5d; font-weight: bold; } /* Name.Decorator */ .ni { color: #800080; } /* Name.Entity */ .ne { color: #990000; font-weight: bold; } /* Name.Exception */ .nf { color: #990000; font-weight: bold; } /* Name.Function */ .nl { color: #990000; font-weight: bold; } /* Name.Label */ .nn { color: #555555; } /* Name.Namespace */ .nt { color: #000080; } /* Name.Tag */ .nv { color: #008080; } /* Name.Variable */ .ow { color: #000000; font-weight: bold; } /* Operator.Word */ .w { color: #bbbbbb; } /* Text.Whitespace */ .mf { color: #009999; } /* Literal.Number.Float */ .mh { color: #009999; } /* Literal.Number.Hex */ .mi { color: #009999; } /* Literal.Number.Integer */ .mo { color: #009999; } /* Literal.Number.Oct */ .sb { color: #d01040; } /* Literal.String.Backtick */ .sc { color: #d01040; } /* Literal.String.Char */ .sd { color: #d01040; } /* Literal.String.Doc */ .s2 { color: #d01040; } /* Literal.String.Double */ .se { color: #d01040; } /* Literal.String.Escape */ .sh { color: #d01040; } /* Literal.String.Heredoc */ .si { color: #d01040; } /* Literal.String.Interpol */ .sx { color: #d01040; } /* Literal.String.Other */ .sr { color: #009926; } /* Literal.String.Regex */ .s1 { color: #d01040; } /* Literal.String.Single */ .ss { color: #990073; } /* Literal.String.Symbol */ .bp { color: #999999; } /* Name.Builtin.Pseudo */ .vc { color: #008080; } /* Name.Variable.Class */ .vg { color: #008080; } /* Name.Variable.Global */ .vi { color: #008080; } /* Name.Variable.Instance */ .il { color: #009999; } /* Literal.Number.Integer.Long */ .habla_window_div_position { bottom: 10px; position: fixed; right: 10px; } .habla_window_div_position_floating { bottom: 10px; position: fixed; right: 10px; } .habla_window_div_position_floating_ie { bottom: 10px; position: absolute; right: 10px; } #habla_expanded_div { background: url("/images/overlay_grad_03.gif") repeat-x scroll 0 0 #202020; } #habla_topbar_div { position: relative; -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); cursor: pointer; } .habla_window_div_base { border: 0 none !important; font-family: arial, helvetica, sans-serif; font-style: inherit; font-weight: inherit; line-height: 1; margin: 0 !important; outline-color: -moz-use-text-color; outline-style: none !important; outline-width: 0; padding: 0 !important; text-align: left; vertical-align: baseline; z-index: 99999 !important; -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); } .habla_panel_border { background: #FFFFFF none repeat scroll 0 0; border: 0; font-family: arial, helvetica, sans-serif; font-size: 14px; width: 250px; } a.habla_button_a_hover:hover { color: #fff; font-size: 14px; background: none; font-weight: bold; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); cursor: pointer; } .habla_button_a_normal { color: #fff; font-weight: bold; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); cursor: pointer; } .habla_button { float: right; font-weight: bold; margin-left: 3px; padding: 0 6px 2px; text-decoration: none !important; } .habla_conversation_message_off { margin: 0 !important; padding: 3px 3px 3px 23px; } .habla_conversation_message_on { margin: 0; padding: 5px; } .habla_conversation_p_item { background: transparent; color: #000; margin: 0; padding: 0; text-indent: -20px; } .habla_conversation_person1 { color: #6b6b6b; padding-right: 5px; font-weight: bold; font-size: 12px; } .habla_conversation_person2 { color: #ff8e33; padding-right: 5px; font-weight: bold; font-size: 12px; } .habla_conversation_text_span { color: #aaa; font-size: 12px; } .habla_topbar_div_highlighted { background: red; color: #0FF; padding: 6px; border: 1px solid red; } .habla_topbar_div_normal { background: #f60 url(/images/gradsprite.gif) repeat-x left top; color: #fff; padding: 6px; border: 1px solid #f60; } .habla_topbar_clickable { cursor: pointer; } .habla_oplink_a_hover { color: #fff; background: none; font-weight: bold; cursor: pointer; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } a.habla_oplink_a_hover:hover { font-size: 14px; background: none; } .habla_oplink_a_normal { color: #fff; font-weight: bold; cursor: pointer; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } .clear_style { clear: both; } .habla_offline_message_div { border-bottom: 1px dotted #CCCCCC; line-height: 1.5em; margin: 0; padding: 3px; } .habla_conversation_div { background: transparent; border-bottom: 1px dotted #555; height: 155px; line-height: 1.25em; overflow: auto; color: #aaa; padding: 3px 3px 3px 23px !important; } .habla_pre_chat_div { background: transparent none repeat scroll 0 0; border-bottom: 1px dotted #CCCCCC; height: 155px; line-height: 1.25em; overflow: auto; color: #000000; padding: 3px 3px 3px 3px; } .habla_offline_message_sent_div { background: transparent none repeat scroll 0 0; border-bottom: 1px dotted #CCCCCC; height: 155px; line-height: 1.5em; overflow: auto !important; padding: 3px !important; } .habla_chatform_form { margin: 0 !important; padding: 0 !important; } .habla_input_div { font-family: arial, helvetica, sans-serif; font-size: 12px; font-weight: normal !important; margin: 0 !important; padding: 3px !important; } .habla_offline_body_input { font-family: arial, helvetica, sans-serif; font-size: 12px; height: 155px; vertical-align: text-top; width: 234px; } .habla_say_text_span { color: #000000; } .habla_submit_button { font-family: arial, helvetica, sans-serif; font-size: 12px; margin: 0 !important; vertical-align: text-top; width: 234px; } .habla_offline_submit_input { background: #E75917 none repeat scroll 0 0 !important; border: medium none #CCCCCC !important; color: white !important; float: right; margin-right: 2px; } .habla_offline_error_span { float: left; font-family: arial, helvetica, sans-serif; font-size: 12px; } .habla_wcsend_input_normal { border: 2px solid #6b6b6b !important; } .habla_wcsend_input_pre { color: #6b6b6b; } .habla_wcsend_input_post { color: #000000; } .habla_wcsend_input_pre_highlighted { border: 2px solid #6b6b6b !important; } .habla_wcsend_input_highlighted { border: 2px solid !important; color: #000000 !important; } .habla_wcsend_field { background: transparent none repeat scroll 0 0; font-family: arial, helvetica, sans-serif; font-size: 12px; height: 24px; margin: 0 !important; overflow: auto !important; padding: 1px 3px !important; vertical-align: text-top; width: 234px; } .habla_wcsend_field:hover { background: #FFFF9F; border-color: #09f !important; outline-color: #09f !important; color: #333; } .habla_wcsend_field:focus { background: #fff; border-color: #f60 !important; outline-color: #f60 !important; color: #000 !important; } #habla_link_div a:hover { background: none; } .hbl_pal_remote_fg + .habla_conversation_text_span { color: #fff; } .olark-composing-message { font-style: italic; color: #6b6b6b !important; } /* Account alert banner */ #expiration-countdown { margin: 0 auto 0 auto; width: 1100px; } #expiration-countdown.banner_notice { padding: 15px 15px 15px 25px; background: #f8f8f8 url(/images/announce-bg.png) repeat-x left top; border: 1px solid #d8d8d8; border-bottom: 1px solid #b4b4b4; } #expiration-countdown.banner_notice .fl-l { float: left; width: 400px; } #expiration-countdown.banner_notice .fl-l h3 { font-family: inherit; font-size: 14px; } #expiration-countdown.banner_notice .fl-l > span { display: block; margin-top: 3px; line-height: 1; } #expiration-countdown.banner_notice.clearfix:before, #expiration-countdown.banner_notice.clearfix:after { content: ""; display: table; } #expiration-countdown.banner_notice.clearfix:after { clear: both; content: '.'; display: block; visibility: hidden; height: 0; } #expiration-countdown.banner_notice.clearfix { display: block; zoom: 1; } #expiration-countdown.banner_notice img { display: inline; padding: 5px; background: #FFF; border: 1px solid #b4b4b4; float: right; margin-left: 10px; } #expiration-countdown.banner_notice strong { color: #333; } #expiration-countdown.banner_notice p { color: #6b6b6b; margin: 2px 0; padding: 0; font-size: 12px; } #expiration-countdown.banner_notice p.first { margin: 5px 0 10px 0; } #expiration-countdown.banner_notice h2 { color: #F60; } #expiration-countdown .billcta, #expiration-countdown .billcta:visited, #expiration-countdown .billcta:link { display: inline-block; padding: 3px 4px; border: 1px solid #06f; color: #fff; background: #09f url(/images/catsel.gif) repeat-x left top; text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.76); -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.76); box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); } #expiration-countdown .billcta:hover { background-position: left bottom; } #expiration-countdown #hide-banner-btn { display: none; text-align: right; } #expiration-countdown .progress_meter { float: right; width: 470px; margin: 0 0 0 15px; } #expiration-countdown .progress_meter .bar_w { background: #d8d8d8; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin: 0 0 3px 0; } #expiration-countdown .progress_meter .bar { background: #ec1427 url(/images/meter-bgs.png) repeat-x 0 -48px; border: 1px solid #ec1427; text-align: right; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } #expiration-countdown .progress_meter .bar span { font-weight: bold; font-size: 10px; color: #FFF; padding: 2px 8px; display: inline-block; } #expiration-countdown .progress_meter .text { text-align: right; color: #ec1427; font-weight: bold; } #expiration-countdown .progress_meter span { color: #6b6b6b; font-weight: normal; } #expiration-countdown .progress_meter .icon { width: 16px; height: 16px; background: transparent no-repeat center center scroll; margin-right: 6px; vertical-align: bottom; } #expiration-countdown .progress_meter.low .icon { background-image: url(/images/warn16.png); } /* Hack to fix x overflow on mobile caused by the sidenav. This should not be considered a permanent solution since the menu disappears before the closing animation completes, which is why this change wasn't committed into Kickoff itself. */ .ko-nav { display: none; } @media only screen and (min-width: 65em) { .ko-nav { display: flex; } } .desktop-only .ko-nav { display: flex; } html.ko-sidemenu-left-is-open .ko-nav { display: block; } /* We have to recreate our kickoff buttons to avoid conflicts with feed-consumer which has _home-buttons.scss included, which modifies the button styles. This should be fixed in feed-consumer at some point so this isn't necessary when importing the timeline. */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ * { box-sizing: border-box; } body, html { position: fixed; width: 100%; } html { background-color: #f9fafb; } body > .ko-wrap { background-color: #f9fafb; min-height: 100vh; } .kickoff { flex: 1; background-color: #232a31; } .prof-flex-container { display: flex; height: 100vh; flex-direction: column; } .prof-flex-container > .prof-flex-height { display: flex; flex: 1; } .parallax-wrapper { flex: 1; position: relative; transform: translate3d(0, 0, 0); transform-style: preserve-3d; } .parallax { bottom: 0; top: 0; left: 0; right: 0; overflow-x: hidden; overflow-y: auto; position: absolute; -webkit-overflow-scrolling: touch; } .hui-unregisterednav--body .parallax { bottom: 3rem; } :not(.mobile) .parallax { perspective: 1px; perspective-origin: 50% 400px; } .parallax-layer { position: absolute; top: 0; left: 0; right: 0; } .parallax-layer.header { height: 500px; z-index: 1; } .loggedin .parallax-layer.header { position: relative; z-index: 0; } .parallax-layer.front { top: 400px; z-index: 100; } .mobile .parallax-layer.front { top: 100px; } .loggedin.mobile .parallax-layer.front { top: 148px; } .parallax-layer.back { height: 400px; } @supports (transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d) { .parallax-layer.back { left: -6px; top: -200px; transform: translate3d(0, 0, -1px) scale(2); } } .mobile .parallax-layer.back { top: -350px; height: 102px; top: 0; left: 0; transform: none; } .mobile.loggedin .parallax-layer.back { margin-top: 47px; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* Some fixes and overrides until we can go 100% Uniform */ .uni-btn, .uni-btn-icon-only, .uni-btn--medium, .uni-btn--small, .uni-btn--primary, .uni-btn--secondary, .uni-btn--confirm, .uni-btn--destroy, .uni-btn--subtle { font-family: helvetica, arial, sans-serif; } .uni-btn svg, .uni-btn-icon-only svg, .uni-btn--medium svg, .uni-btn--small svg, .uni-btn--primary svg, .uni-btn--secondary svg, .uni-btn--confirm svg, .uni-btn--destroy svg, .uni-btn--subtle svg { vertical-align: middle; } .uni-btn__group--combo > button { transition: none; min-width: 7.5rem; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .tab-blank-state { color: rgba(19, 41, 63, 0.8); padding: 2.5rem 1.875rem; text-align: center; width: 100%; } @media only screen and (max-device-width: 740px) and (orientation: portrait) { .tab-blank-state { margin-bottom: 5rem; } } .tab-blank-state h1 { font-size: 1.25rem; } .tab-blank-state p { line-height: 1.25rem; margin-bottom: 1rem; } .tab-blank-state .clip-icon svg { height: 8rem; } .tab-blank-state .calendar-icon svg { height: 6rem; margin: 1.5rem 0; } .tab-blank-state .lock-icon svg { height: 5rem; margin: 1.5rem 0; } .tab-blank-state .roster-icon svg { height: 6rem; margin: 1.5rem 0; } .tab-blank-state .blank-icon svg, .tab-blank-state .blank-icon path, .tab-blank-state .blank-icon polygon { fill: #e4e7eb; } .tab-blank-state button { margin: 0; } .tab-blank-state .btn-row { display: flex; flex-direction: row; justify-content: center; } .tab-blank-state .btn-row > * { margin-right: 1rem; } .tab-blank-state .image-group { display: flex; justify-content: center; flex-direction: row; margin: 0 auto; max-width: 61.25rem; } .tab-blank-state .image-group > * { padding: 1.5rem 0.5rem; text-align: center; } .tab-blank-state .image-group img { height: auto; width: 100%; } .tab-blank-state figcaption { font-size: 0.66rem; } @media (min-width: 60rem) { .tab-blank-state figcaption { font-size: 0.75rem; } } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* Override the feed consumer style for the body when hovering over a notification. Without this, the page is scrolled to the top. */ body.notification-widget-open { position: static !important; } .ko-wrap { min-height: 100vh; overflow-x: hidden; } .ko-main { /* Fill in the background behind the navbar to avoid white flashes when animating it in and out on scroll. */ background: #232a31; position: relative; } .ko-nav { opacity: 1; transition: 0.1s linear !important; } .ko-nav-mobile-header { transition: 0.1s linear !important; width: 100%; z-index: 1 !important; } .hudl-subnav { transform: translate3d(0, 0, 0); background: #38434f; display: none; font-family: helvetica, arial, sans-serif; font-size: 14px; line-height: 32px; padding: 9px 20px; width: 100%; z-index: 500; color: #e6f2ff; } .hudl-subnav a { color: #e6f2ff; } .hudl-subnav a:hover { color: #009ce3; } .hudl-subnav .desktop-only { display: inline; } @media (min-width: 5.25rem) { .hudl-subnav .desktop-only { display: none; } } @media (min-width: 37.5rem) { .hudl-subnav .desktop-only { display: none; } } @media (min-width: 50rem) { .hudl-subnav .desktop-only { display: inline; } } .hudl-subnav svg { float: left; margin-right: 4px; height: 1.5rem; width: 1.5rem; position: relative; top: 4px; } .hudl-subnav svg path { fill: #ff6300; } .hudl-subnav .separator { opacity: 0.5; } .hudl-subnav-right { float: right; } .hudl-subnav-fixed { background: none; background-image: linear-gradient(to bottom, #232a31, rgba(35, 42, 48, 0)); display: block; height: 112px; padding: 4px 20px; top: 0; transform: translate3d(0, 0, 0); z-index: 1 !important; } .hudl-subnav-fixed.sticky { position: sticky; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ @keyframes placeHolderShimmer { 0% { background-position: -1277px 0; } 100% { background-position: 1277px 0; } } /*doc --- title: Variables name: 01-variables category: Elements --- ### Colors #### Dark UI Colors

$dui_dark_color

#232A31

$ui_dark_medium_color

#38434F

$ui_dark_light_color

#4E5D6C

#### Gray UI Colors

$ui_gray_color

#8A8A8A

$ui_gray_medium_color

#E8E8E8

$ui_gray_light_color

#F5F5F5

#### Accent UI Colors

$ui_blue_color

#00AEEF

$ui_orange_color

#FF6600

#### Alert UI Colors

$ui_red_color

#D81D1D

$ui_yellow_color

#FABE39

$ui_green_color

#6AA220

#### Grayscale UI Text Colors

$ui_text_dark_color

#333333

$ui_text_medium_color

#666666

$ui_text_light_color

#999999

$ui_text_extra_light_color

#CCCCCC

#### Base UI Colors

$ui_black_color

#FFFFFF

$ui_white_color

#000000

#### Team Colors

$tagging_team_white_color

#E9E9E9

$tagging_team_gray_color

#8C9196

$tagging_team_black_color

#404040

$tagging_team_yellow_color

#FFDD30

$tagging_team_orange_color

#ED9827

$tagging_team_red_color

#DF4953

$tagging_team_green_color

#42BE39

$tagging_team_blue_color

#3985BE

$tagging_team_purple_color

#9F62B1

$dui_dark_color

#232A31

$ui_dark_medium_color

#38434F

$ui_dark_light_color

#4E5D6C

#### Gray UI Colors

$ui_gray_color

#8A8A8A

$ui_gray_medium_color

#E8E8E8

$ui_gray_light_color

#F5F5F5

#### Accent UI Colors

$ui_blue_color

#00AEEF

$ui_orange_color

#FF6600

#### Alert UI Colors

$ui_red_color

#D81D1D

$ui_yellow_color

#FABE39

$ui_green_color

#6AA220

#### Grayscale UI Text Colors

$ui_text_dark_color

#333333

$ui_text_medium_color

#666666

$ui_text_light_color

#999999

$ui_text_extra_light_color

#CCCCCC

#### Base UI Colors

$ui_black_color

#FFFFFF

$ui_white_color

#000000

#### Team Colors

$tagging_team_white_color

#E9E9E9

$tagging_team_gray_color

#8C9196

$tagging_team_black_color

#404040

$tagging_team_yellow_color

#FFDD30

$tagging_team_orange_color

#ED9827

$tagging_team_red_color

#DF4953

$tagging_team_green_color

#42BE39

$tagging_team_blue_color

#3985BE

$tagging_team_purple_color

#9F62B1

` but you'll likely want to customize it a bit. ```html_example

$dui_dark_color

#232A31

$ui_dark_medium_color

#38434F

$ui_dark_light_color

#4E5D6C

#### Gray UI Colors

$ui_gray_color

#8A8A8A

$ui_gray_medium_color

#E8E8E8

$ui_gray_light_color

#F5F5F5

#### Accent UI Colors

$ui_blue_color

#00AEEF

$ui_orange_color

#FF6600

#### Alert UI Colors

$ui_red_color

#D81D1D

$ui_yellow_color

#FABE39

$ui_green_color

#6AA220

#### Grayscale UI Text Colors

$ui_text_dark_color

#333333

$ui_text_medium_color

#666666

$ui_text_light_color

#999999

$ui_text_extra_light_color

#CCCCCC

#### Base UI Colors

$ui_black_color

#FFFFFF

$ui_white_color

#000000

#### Team Colors

$tagging_team_white_color

#E9E9E9

$tagging_team_gray_color

#8C9196

$tagging_team_black_color

#404040

$tagging_team_yellow_color

#FFDD30

$tagging_team_orange_color

#ED9827

$tagging_team_red_color

#DF4953

$tagging_team_green_color

#42BE39

$tagging_team_blue_color

#3985BE

$tagging_team_purple_color

#9F62B1

$dui_dark_color

#232A31

$ui_dark_medium_color

#38434F

$ui_dark_light_color

#4E5D6C

#### Gray UI Colors

$ui_gray_color

#8A8A8A

$ui_gray_medium_color

#E8E8E8

$ui_gray_light_color

#F5F5F5

#### Accent UI Colors

$ui_blue_color

#00AEEF

$ui_orange_color

#FF6600

#### Alert UI Colors

$ui_red_color

#D81D1D

$ui_yellow_color

#FABE39

$ui_green_color

#6AA220

#### Grayscale UI Text Colors

$ui_text_dark_color

#333333

$ui_text_medium_color

#666666

$ui_text_light_color

#999999

$ui_text_extra_light_color

#CCCCCC

#### Base UI Colors

$ui_black_color

#FFFFFF

$ui_white_color

#000000

#### Team Colors

$tagging_team_white_color

#E9E9E9

$tagging_team_gray_color

#8C9196

$tagging_team_black_color

#404040

$tagging_team_yellow_color

#FFDD30

$tagging_team_orange_color

#ED9827

$tagging_team_red_color

#DF4953

$tagging_team_green_color

#42BE39

$tagging_team_blue_color

#3985BE

$tagging_team_purple_color

#9F62B1

### Font Sizes These should really be used by the `font-size()` mixin to maintain consistent typography. The possible values are (from smallest to largest): **small**, **p**, and **5** to **1** (or **h5** to **h1** if that's your jam). ### Z-index Try to stick to the variables defined here for z-index values, e.g., `z-index: $z-1` instead of arbitrary numbers. The possible values are: **z-1** (100) to **z-7** (700). ### Transition Lengths Again, try to stick to these instead of arbitrary values. The possible values are: **t-quick** (0.2s), **t-med** (0.3s), and **t-slow** (0.5s). ### Common Breakpoints Put breakpoints that you end up referencing a lot here and give it a prefix of `b-`, e.g., `b-showdesktop`. These are usually referenced by the `respond()` mixin. */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feedback-intro-card { width: 100%; padding: 0.75rem; background-color: white; border: solid 1px #d5d3d3; border-radius: 2px; position: relative; } .feedback-intro-card .feedback-intro-header { width: 100%; padding-right: 1rem; position: relative; } .feedback-intro-close { position: absolute; top: 0; right: 0; cursor: pointer; margin-top: -0.5rem; margin-right: -0.5rem; } .feedback-intro-close svg { fill: #cfcfcf; } .feedback-intro-close svg:hover { fill: #8A8A8A; } .manage-profile { margin-top: 1rem; } .feedback.uni-btn { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: none; border-radius: 3px; cursor: pointer; display: inline-block; font-family: helvetica, arial, sans-serif; font-size: 0.875rem; font-weight: bold; line-height: 1rem; height: 34px; padding: 8px 16px; } .feedback.uni-btn div, .feedback.uni-btn svg { display: inline-block; } .feedback.uni-btn svg { height: 14px; margin-right: 4px; position: relative; top: 2px; width: 14px; } .feedback.uni-btn path, .feedback.uni-btn polygon, .feedback.uni-btn rect { fill: white; } .feedback.uni-btn.uni-btn--primary { background: #009ce3; color: white; } .feedback.uni-btn.uni-btn--primary:hover { background: #4db9eb; } .feedback.uni-btn.uni-btn--block { display: block; width: 100%; margin-left: 0 !important; text-align: center; } .banner-subtext { margin-top: 0.5rem; } .feedback-feedmessage { display: -webkit-inline-box; display: -moz-inline-box; display: inline-box; display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } .fake-timeline-name { margin-right: 4px; } .feedback-background { position: relative; top: 0; left: 0; width: auto; margin: auto; display: block; max-width: 100%; } .media-container-feedback { margin: 0; display: block; width: 100%; position: relative; border: 0; z-index: 1; } .media-container-feedback.small { display: none; } .style__contextProviderContainer___qLogU { width: 100%; height: 100%; position: relative; } .style__viWrapper___2mlNf { height: 100%; width: 100%; position: relative; } .style__videoNodeGradient___2pjur { position: absolute; padding: 0; margin: 0; height: 30%; width: 100%; bottom: 0; left: 0; display: inline-flex; justify-content: space-between; z-index: 40; background: rgba(0, 0, 0, 0); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.6))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 ); } .style__spinner___3TfHM.css-spinner { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; box-shadow: 0 0 3rem black; background: -moz-radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); background: -webkit-gradient(circle, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.6))); background: -webkit-radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); background: -o-radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); background: -ms-radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); background: radial-gradient(cirlce, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); } .style__videoNodeChildrenWrapper___2xeue { position: absolute; bottom: 0; width: 100%; display: flex; flex-direction: column; z-index: 50; } .style__videoNodeMouseHidden___2hqpv { cursor: none; } .style__videoOverlay___sdw8f { width: 100%; height: 100%; position: absolute; z-index: 20; top: 0; left: 0; pointer-events: all; } .style__videoContainer___14mEb { display: flex; flex-direction: column; position: relative; height: 100%; width: 100%; } .style__videoContainerDiv___2QgW6 { display: inline-flex; flex-direction: column; height: auto; margin: auto 0; } .style__videoInnerContainer___2IU4k { display: inline-flex; position: relative; max-height: 100%; min-height: 50px; } /* used by VPE to say when fullscreen mode is immersive */ .isFullscreen .style__videoInnerContainer___2IU4k { height: 100%; } .style__videoElementWrapper___2BTiG { background-color: #111418; text-align: center; width: 100%; height: inherit; display: flex; align-items: stretch; } .style__videoElementWrapper___2BTiG video { display: block; border-top-left-radius: 0.15rem; border-top-right-radius: 0.15rem; position: relative; /* over-rides a position: absolute from theo */ } .style__videoElementWrapperInner___ARz8I { margin: 0 auto; height: inherit; width: 100%; position: relative; align-self: stretch; } .style__videoOverlayComponents___2tLKg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 25; pointer-events: none; } /* Modify hudl video playback and theoplayer */ .hudl-video-container { position: absolute; height: 100% !important; width: 100% !important; } .theoplayer { height: 100% !important; width: 100% !important; } .theoplayer .vjs-tech { height: 100% !important; } .theoplayer .vjs-loading-spinner { display: block; opacity: 0; z-index: 80; } /*! Ported from Hint.css - v2.3.1 - 2016-06-05 * @see http://kushagragour.in/lab/hint/ * Copyright (c) 2016 Kushagra Gour; MIT Licensed */ .style__hintTop___1uamb { position: relative; display: inline-block; } .style__hintTop___1uamb:before, .style__hintTop___1uamb:after { position: absolute; transform: translate3d(0, 0, 0); visibility: hidden; opacity: 0; z-index: 100; pointer-events: none; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transition: 0.3s ease; transition-delay: 0ms; bottom: 1rem; margin-bottom: 0.2rem; } .style__hintTop___1uamb:hover:before, .style__hintTop___1uamb:hover:after { visibility: visible; opacity: 1; } .style__hintTop___1uamb:after { content: attr(aria-label); transform: translateX(-50%); left: 50%; font-size: 11px; font-family: 'Helvetica'; font-weight: bold; line-height: 14px; background: rgba(5, 6, 7, 0.8); padding: .1rem .6rem; border-radius: 2px; color: #ffffff; white-space: nowrap; z-index: 200; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /** * top tooltip */ .style__hintTop___1uamb:before { margin-bottom: -11px; left: calc(50% - 6px); } .style__hintTop___1uamb:hover:before { -webkit-transform: translateY(-14px); -moz-transform: translateY(-14px); transform: translateY(-14px); } .style__hintTop___1uamb:hover:after { -webkit-transform: translateX(-50%) translateY(-14px); -moz-transform: translateX(-50%) translateY(-14px); transform: translateX(-50%) translateY(-14px); } .icon__iconStyle___1DdHG { width: 1.25rem; height: 1.25rem; display: flex; } .icon__iconStyle___1DdHG svg { fill: #C5CACF; transition: fill 0.2s ease-out; width: 100%; height: 100%; pointer-events: none; } .icon__iconStyle___1DdHG:hover svg { fill: #fff; } .icon__iconStyleInactive___dPlKL, .icon__iconStyleInactive___dPlKL * { cursor: not-allowed !important; } .icon__iconStyleInactive___dPlKL path, .icon__iconStyleInactive___dPlKL:hover svg * { fill: rgba(255, 255, 255, 0.3); } .style__restartContainer___3dSQ7 { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; /* IE11 positioning will break without this */ z-index: 100; cursor: pointer; } .style__restartContainer___3dSQ7 svg { transform: translate(0%, 270%); height: 15%; opacity: .7; cursor: pointer; fill: #fff; } .style__hudl-video-container___2UD2R { background: #000; } .theo-player-wrapper { outline: none; } .theo-player-wrapper > * { display: none; outline: none; } .vjs-hidden { display: none !important; outline: none !important; visibility: hidden !important; } .theoplayer-ad-clickthrough { /* Based on dark env uni-btn--subtle */ position: absolute; cursor: pointer; display: block; right: 4px; bottom: 8px; background-color: rgba(85, 105, 125, 0.35); border-radius: 4px; color: rgba(238, 247, 255, 0.9); font-family: Helvetica, sans-serif; font-size: 0; font-weight: bold; height: 30px; line-height: 30px; text-align: center; text-decoration: none; transform: translateZ(0); transition: background-color 0.3s linear, color 0.3s linear, bottom 0.25s ease-out; width: 100px; z-index: 30 !important; } .theoplayer-ad-clickthrough:hover { background-color: rgba(85, 105, 125, 0.5); } .theoplayer-ad-clickthrough:after { content: 'Visit ad site'; font-size: 14px; } .theoplayer-ad-countdown { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); color: #fff; display: none; font-size: 12px; padding: 5px; pointer-events: auto; z-index: 10; } .theoplayer-skip-button.enabled { /* Based on dark env uni-btn--subtle */ position: absolute; cursor: pointer; display: block; left: 4px; bottom: 8px; background-color: rgba(85, 105, 125, 0.35); border-radius: 4px; color: rgba(238, 247, 255, 0.9); font-family: Helvetica, sans-serif; font-size: 0; font-weight: bold; height: 30px; line-height: 30px; text-align: center; transform: translateZ(0); transition: background-color 0.3s linear, color 0.3s linear, bottom 0.25s ease-out; width: 100px; z-index: 30; } .theoplayer-skip-button:hover { background-color: rgba(85, 105, 125, 0.5); } .theoplayer-skip-button.enabled:after { content: 'Skip ad now'; font-size: 14px; } .vjs-tech { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .vjs-poster { display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; cursor: pointer; margin: 0; padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; z-index: 1; } .vjs-has-started .vjs-poster { display: none; } .vjs-loading-spinner { display: block; opacity: 0; visibility: hidden; position: absolute; font-size: 4em; line-height: 1; height: 4rem; width: 4rem; top: 0; bottom: 0; left: 0; right: 0; margin: auto; animation: none; border-top: 0.5rem solid #ff6600; border-left: 0.5rem solid #e8e8e8; border-bottom: 0.5rem solid #e8e8e8; border-right: 0.5rem solid #e8e8e8; border-radius: 100%; } .vjs-loading-spinner:before { content: '' !important; } .vjs-waiting .vjs-loading-spinner, .vjs-seeking .vjs-loading-spinner, .theoplayer-ad-loading .vjs-loading-spinner { opacity: 0.85; visibility: visible; -webkit-animation: spin 0.75s infinite linear; -moz-animation: spin 0.75s infinite linear; animation: spin 0.75s infinite linear; } .vjs-seeking.vjs-waiting .vjs-loading-spinner { transition: none; visibility: visible; } .vjs-seeking .vjs-loading-spinner { visibility: visible; transition: opacity 0.5s; } .vjs-hide-spinner .vjs-loading-spinner { transition: none; visibility: hidden !important; } .video-js.vjs-error .vjs-loading-spinner { display: none !important; -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); } } @-o-keyframes spin { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(359deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } .style__wrapper___3Rxlb { opacity: 1; transition: opacity 0.5s ease-in-out; position: absolute; width: 100%; height: 100%; z-index: 20; } .style__hidden___3NfFT { opacity: 0; } .style__progressBarContainer___NFGdz { position: relative; top: 0.5rem; transition: top 0.2s; height: 100%; width: 100%; } .style__progressArea___1FYlk.style__thick___2WwGH { height: auto; top: 0; } .style__thick___2WwGH .style__progressBarContainer___NFGdz { top: 0; } .style__progressArea___1FYlk:hover .style__progressBarContainer___NFGdz { top: 0.4435rem; } .style__progressArea___1FYlk.style__thick___2WwGH:hover .style__progressBarContainer___NFGdz { top: 0; } .style__progressBarBackground___1xSD_ { width: 100%; background: rgba(255, 255, 255, 0.2); height: 0.18rem; -webkit-user-select: none; transition: 0.2s; } .style__playheadWrapper___3ym6u { position: absolute; z-index: 20; width: 100%; cursor: pointer; } .style__progressArea___1FYlk { flex-grow: 1; height: 13px; top: -5px; cursor: pointer; } .style__progressArea___1FYlk:hover .style__playheadCircle___2za_O { opacity: 1; } .style__progressArea___1FYlk:hover .style__progressBarBackground___1xSD_, .style__progressArea___1FYlk:hover .style__playheadLine___RXYtz, .style__progressArea___1FYlk:hover .style__encodingLine___37zhd, .style__progressArea___1FYlk.style__thick___2WwGH .style__progressBarBackground___1xSD_, .style__progressArea___1FYlk.style__thick___2WwGH .style__playheadLine___RXYtz, .style__progressArea___1FYlk.style__thick___2WwGH .style__encodingLine___37zhd { height: 0.313rem; } .style__progressArea___1FYlk.style__expand___2doaR:hover .style__progressBarBackground___1xSD_, .style__progressArea___1FYlk.style__expand___2doaR:hover .style__playheadLine___RXYtz, .style__progressArea___1FYlk.style__expand___2doaR:hover .style__encodingLine___37zhd { height: 0.626rem; } .style__progressArea___1FYlk.style__expand___2doaR:hover .style__playheadCircle___2za_O { margin-top: -.1rem; } .style__playheadLine___RXYtz { background: #ff6500; height: 0.18rem; width: 1%; transition: height 0.2s; float: left; } .style__encodingLine___37zhd { background: #111418; opacity: 0.8; height: 0.18rem; width: 1%; transition: height 0.2s; float: right; } .style__playheadCircle___2za_O { position: absolute; opacity: 0; transition: opacity 0.2s; float: left; background: #ffffff; width: 13px; height: 13px; border-radius: 18px; margin-top: -.27rem; margin-left: -.4rem; line-height: 100%; z-index: 40; } .style__progressBarTimeWrapper___48do7 { position: absolute; left: 102%; bottom: -0.6rem; } .style__progressBarTimeWrapper___48do7 > div { color: #fff; font-family: Helvetica; font-size: 0.7rem; } .style__progressBarTimeWrapper___48do7 > div:last-child { color: rgba(255, 255, 255, 0.6); } .style__progressBarGhost___1UaTI { background: rgba(255, 255, 255, 0.5); height: inherit; position: absolute; white-space: nowrap; } .style__progressBarGhost___1UaTI:after { content: attr(data-content); font-family: Helvetica; font-weight: bold; font-size: 0.72rem; line-height: 18px; background: rgba(5, 6, 7, 0.8); padding: .1rem .6rem; border-radius: 2px; float: right; position: relative; bottom: 1.8rem; left: 1.4rem; color: white; clear: both; } .style__mark___2Qb1B { width: 3px; position: absolute; bottom: 0px; height: 100%; background-color: rgba(255, 255, 255, 0.7); z-index: 21; transition: height 0.2s; } .style__componentRow___28pXs { justify-content: space-between; transition: opacity 0.25s; opacity: 1; z-index: 10; padding: 0.6rem 0.7rem; display: flex; flex-wrap: wrap; } .style__componentRow___28pXs > div > div:last-child:after { right: -30%; left: unset; transform: translateX(0%); } .style__componentRow___28pXs > div > div:last-child:hover:after { transform: translateX(0) translateY(-14px); } .style__componentRow___28pXs > div > div:first-child:after { left: -30%; transform: translateX(0%); } .style__componentRow___28pXs > div > div:first-child:hover:after { transform: translateX(0) translateY(-14px); } .style__componentRow___28pXs.style__fullWidth____0iGe { padding: 0; } .style__componentGroup___2NnBR > div { display: inline-flex; color: #fff; margin-right: 0.8rem; } .style__componentGroupRight___2tbpA > div:empty, .style__componentGroup___2NnBR > div:empty { display: none; } .style__componentGroupRight___2tbpA > div { display: inline-flex; color: #fff; margin-left: 0.9rem; align-items: center; } .style__componentGroupRight___2tbpA > div:first-child { margin-left: 0.2rem; } .style__componentRow___28pXs > div:not([style*='display: none']) [data-vi-svg] { margin-left: 0; } .style__controls___ad8Sb > div:not([style*='display: none']) [data-vi-svg] { margin-right: 0; } .style__controlsRight___2ie7Z > div:not([style*='display: none']) [data-vi-svg] { margin-right: 0; } .style__componentRow___28pXs [data-vi-svg] { cursor: pointer; } .style__componentRow___28pXs > div { display: inline-flex; margin-right: 0.9rem; cursor: pointer; position: relative; align-items: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .style__componentRow___28pXs > div:last-child { margin-right: 0; } .style__hiddenRow___321vi { opacity: 0; } .style__rightArrowSvg___3WXrk, .style__leftArrowSvg___2DCAw { position: absolute; fill-rule: evenodd; fill: #FFF; height: 100%; } .style__rightArrowSvg___3WXrk { right: -1rem; top: 0; } .style__leftArrowSvg___2DCAw { left: 0; top: 0; } .style__menuHeader___1LX5Y { position: relative; display: block; font-weight: bold; margin: 1rem 1rem 0; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .style__menuHeader___1LX5Y > div { position: relative; cursor: pointer; } .style__menuHeader___1LX5Y h3 { padding-left: 1.4rem; } .style__menuOption___1J7KU { padding: 0.8rem; padding-left: 2.5rem; font-size: 0.9em; line-height: 1rem; vertical-align: top; } .style__menuOption___1J7KU:hover { color: #fff; background: rgba(255, 255, 255, 0.12); cursor: pointer; } .style__menuOption___1J7KU > div { position: relative; } .style__menuOption___1J7KU label { display: inline-block; width: 4rem; font-weight: bold; } .style__menuOption___1J7KU span { display: inline-block; position: relative; font-weight: normal; } .style__activeOption___2TxD1 { color: #fff; } .style__activeOption___2TxD1 svg { height: auto; } .style__actionOptionCheck___3VRo5 { position: absolute; left: -1.5rem; fill: #009CE3; } div.style__optionSpinner___2v-lb { position: absolute; left: -1.5rem !important; right: initial !important; height: .8rem; width: .8rem; border-width: 0.2rem; display: inline-block; margin: 0 auto; border-top-color: #009CE3; } .style__settingsMenuWrapper___29loY { position: relative; } .style__settingsBoxOverlay___3Z2ct { position: absolute; bottom: 2.5rem; right: -1rem; background: rgba(17, 20, 24, 0.8); border-radius: 3px; cursor: default; opacity: 0; width: 14rem; transition: width 0.1s ease-in-out, opacity 0.2s ease-in-out; z-index: 100; } .style__stretchOverlay___3QGgs { pointer-events: all; position: absolute; width: 100%; height: 20px; bottom: -12px; } .style__settingsBoxOverlay___3Z2ct.speed, .style__settingsBoxOverlay___3Z2ct.quality { width: 8rem; } .style__showSettingsBox___1xIJH { opacity: 1; pointer-events: all; } .style__hideSettingsBox___w5qW8 { pointer-events: none; opacity: 0; } .style__settingsBoxOverlay___3Z2ct ul { display: block; padding: 0.5rem 0; margin: 0; } .style__settingsBoxOverlay___3Z2ct ul li { list-style: none; } .style__menuEntry___3MvCq { padding: 0.8rem; padding-left: 1rem; padding-right: 2rem; font-size: 0.9em; line-height: 1rem; vertical-align: top; } .style__menuEntry___3MvCq:hover { color: #fff; background: rgba(255, 255, 255, 0.12); cursor: pointer; } .style__menuEntry___3MvCq > div { position: relative; } .style__menuEntry___3MvCq label { font-weight: bold; display: inline-block; width: 5rem; } .style__menuEntry___3MvCq span { display: inline-block; position: relative; font-weight: normal; } .style__menuEntry___3MvCq small { font-size: 0.7rem; line-height: 1rem; vertical-align: baseline; } .style__timeWrapper___2Vlsc { vertical-align: top; top: 0.76rem; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .style__timeWrapper___2Vlsc > div { color: #C5CACF; font-family: Helvetica; font-size: 0.7rem; } .style__volumeBoxOverlay___1LT96 { width: 32px; position: absolute; height: 122px !important; top: -122px; left: -0.35rem; z-index: 100; } .style__volumeBoxContainer___3c10h { height: 110px !important; background: rgba(17, 20, 24, 0.8); border-radius: 3px; width: 32px; position: absolute; transition: opacity 0.2s; opacity: 1; top: -0.5rem; } .style__volumeBar___1Ke5V { width: 2px; height: 50%; background: #ff6500; position: absolute; bottom: 0; } .style__volumeSlider___153gz { width: 10px; height: 10px; border-radius: 1rem; background-color: #F2F2F2; position: relative; right: 4px; bottom: 0.35rem; cursor: pointer; } .style__soundContainer___3ka1f { position: relative; } .style__innerVolumeBox___2sMUJ { height: 80px; width: 2px; background: rgba(255, 255, 255, 0.2); margin-left: 15px; margin-top: 15px; position: relative; } .style__angleBoxContainer___SR6fU { display: inline-block; position: relative; margin: 0.5rem; } .style__angleBoxLabel___dYqdk { font-family: Helvetica; font-size: 0.75rem; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1rem; letter-spacing: normal; text-align: center; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); position: absolute; top: 45%; left: 20%; z-index: 32; width: 5rem; height: 1rem; margin-left: auto; margin-right: auto; text-overflow: ellipsis; overflow: hidden; } .style__angleBoxThumb___2Q3WZ { width: 7.5rem !important; height: 4.19rem !important; } .style__angleBoxOverlay___38ZMz { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); position: absolute; } .style__angleBoxSelected___2tP5J { border: solid 0.125rem #ffffff; } .style__angleSelector___2HWEf { position: relative; } .style__angleSelectorBoxInner___NaVvp { width: 8.5rem; border-radius: 3px; background-color: rgba(17, 20, 24, 0.8); position: absolute; bottom: 2.55rem; z-index: 100; left: -4rem; } .style__dropDownIcon___34trL { padding-top: 0.3125rem; transition-duration: 0.2s; } .style__dropDownIconOpen___9KTLb { transform: rotate(180deg); } .style__angleName___3EI-j { width: 3.125rem; height: 1rem; font-family: Helvetica; font-size: 0.875rem; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; line-height: 1rem; letter-spacing: normal; color: #687581; margin-top: 0.375rem; text-overflow: ellipsis; overflow: hidden; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ html.no-touch .friendship:hover { background: transparent; } html.no-touch .friendship:hover span.follow svg { fill: #ff6300; } html.no-touch .friendship.following:hover { background: #78a100; } html.no-touch .friendship.following:hover span.follow svg { fill: #e6f2ff; } html.no-touch .feed-timeline .feeditem .feeditem-link a.btn:hover { background-color: transparent; color: #ff6300; } @media (min-width: 48em) { .feeditem-header .follow-feeduser { margin-left: 1rem; } } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feed-modal.mini-profile > * { display: flex; flex-direction: column; flex: 1; max-height: 100%; position: relative; background-color: white; padding: 1.5rem; } @media (min-width: 37.5em) { .feed-modal.mini-profile { border-radius: 4px; } } .feed-modal.mini-profile header { background-color: white; height: auto; flex: 1 0 auto; } .user-container { padding-bottom: 1rem; border-bottom: 1px solid #edf0f2; flex: 1; } .user-container .user-avatar-container { display: flex; flex-direction: column; align-items: center; } .user-stats-container { display: flex; margin-top: 1rem; } .user-stats-container .stat a { color: inherit !important; } .user-stats-container .stat a:hover { cursor: pointer; text-decoration: underline; } .user-stats-container .stat .value { color: rgba(19, 41, 63, 0.8); font-weight: bold; } .user-info { display: flex; } .user-info .user-fields { display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; } .user-info .user-fields .username { white-space: nowrap; } .user-info .user-fields .username .fullname { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .user-info .user-fields .username .fullname:hover { text-decoration: underline; } .user-info .user-fields .username span { font-size: 14px; font-weight: normal; color: #8a8a8a; -webkit-font-smoothing: antialiased; } .user-info .user-fields .user-location { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 400px; } .user-info .user-fields .user-location span span { color: rgba(19, 41, 63, 0.4); } .mini-profile-body { padding: 1rem; overflow-y: auto; overflow-x: hidden; } .mini-profile-body .user-timeline { margin: 0 auto; } .mini-profile-body .user-timeline .no-content { text-align: center; } .mini-profile-body .user-timeline .no-content img { width: 50%; } @media (min-width: 36em) { .mini-profile-body .user-timeline .no-content img { width: auto; } } .mini-profile-body .user-timeline .no-content path { color: rgba(56, 67, 79, 0.3); } .btn-stroke { background: white; border: 1px solid #ff6300; text-align: center; border-radius: 2px; display: inline-block; font-size: 0; line-height: 1; padding: 10px 11px 9px 11px; } .btn-stroke:hover { background: #ff6300; } .btn-stroke:active { background: #e65900; } .btn-stroke span { font-size: 14px; font-weight: normal; color: #8a8a8a; } .btn-stroke.secondary { border-color: rgba(138, 138, 138, 0.3); } .btn-stroke.secondary:hover { background: none; border-color: #8a8a8a; } .btn-stroke.secondary:active { background: #8a8a8a; } .btn-stroke.secondary:active span { color: white; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .community-video-player-container .item-preview { display: inline-block; position: relative; } .community-video-player-container .item-preview .item-preview__content { background: rgba(5, 6, 7, 0.8); border-radius: 2px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); color: #ffffff; cursor: default; display: flex; font-size: 12px; font-family: 'Helvetica'; height: 94px; line-height: 14px; opacity: 0; padding: 2px; position: absolute; text-align: left; transition: all 0.2s ease-in; transition-delay: 100ms; transform: translate(0px, -104px); user-select: none; visibility: hidden; white-space: nowrap; width: 328px; z-index: 20; } .community-video-player-container .item-preview .item-preview__content > * { flex: 0 0 50%; height: 100%; } .community-video-player-container .item-preview .item-preview__content:before { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid rgba(5, 6, 7, 0.8); content: ''; left: 12px; bottom: -6px; position: absolute; } .community-video-player-container .item-preview--visible .item-preview__content, .community-video-player-container .item-preview:hover .item-preview__content { opacity: 1; visibility: visible; transform: translate(0px, -114px); } .community-video-player-container .item-preview--hidden .item-preview__content { display: none; } .community-video-player-container .item-preview__close { position: absolute; top: 0.5rem; right: 0.75rem; cursor: pointer; height: 0.75rem; width: 0.75rem; } .community-video-player-container .item-preview__close svg { height: 0.75rem; width: 0.75rem; } .community-video-player-container .item-preview__close path { fill: rgba(230, 242, 255, 0.65); } .community-video-player-container .item-preview__close:hover path { fill: rgba(230, 242, 255, 0.4); } .community-video-player-container .item-preview__description { padding: 0.5rem 0.75rem; } .community-video-player-container .item-preview__thumbnail { background-position: center; background-size: cover; cursor: pointer; } .community-video-player-container .item-preview__label { color: rgba(230, 242, 255, 0.65); margin-bottom: 0.75rem; } .community-video-player-container .item-preview__title { color: #e6f2ff; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 142px; } .community-video-player-container .item-preview__author { color: rgba(230, 242, 255, 0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 142px; } .community-video-player-container .item-preview__cancel { color: rgba(230, 242, 255, 0.65); font-weight: bold; position: absolute; bottom: 0.5rem; } .community-video-player-container { display: flex; height: 100%; width: 100%; } .community-video-player-container > div { overflow: visible; } .community-video-player-container .theoplayer { left: 0 !important; } .community-video-player-container .theoplayer-ad-clickthrough, .community-video-player-container .theoplayer-skip-button.enabled { display: block; } .community-video-player-container:hover .theoplayer-ad-clickthrough, .community-video-player-container:hover .theoplayer-skip-button.enabled { bottom: 46px; } .community-video-player__overlay { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; z-index: 21; pointer-events: all; } .community-video-player__waypoint-hook { display: flex; height: 100%; width: 100%; } .community-video-player__waypoint-hook > div { overflow: visible; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .follow-feeduser-link { display: flex; align-items: center; overflow: hidden; padding: 16px 0 8px 0; } .follow-feeduser-link .profile-avatar { display: flex; align-items: center; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feeditem.shared-highlight .feeditem-link { margin-top: 12px; } .feeditem.shared-highlight .feeditem-link a.btn { margin-top: 0; } @media (min-width: 48em) { .feeditem.shared-highlight .feeditem-link { margin-top: 14px; } } .feeditem.shared-highlight .feedattachments .feedattachments-wrapper .media-container { margin-top: 1em; } .feeditem.shared-highlight .feedattachments .media-container { cursor: pointer; } .feeditem.shared-highlight .feedattachments .media-container:hover img.video-thumbnail { z-index: 2; } .feeditem.shared-highlight .feedattachments .media-container:hover .play-video { background-color: rgba(35, 42, 49, 0.7); } .feeditem.shared-highlight .undo_w { margin: 14px; } .feeditem.shared-highlight .video-container { width: 100%; height: 100%; cursor: pointer; } .feeditem.shared-highlight .video-container .content-description { border: 0; margin: 12px; padding: 0; position: absolute; z-index: 300; bottom: 0; } @media (min-width: 48em) { .feeditem.shared-highlight .video-container .content-description { margin: 14px; } } .feeditem.shared-highlight .video-container .content-description h5 { font-size: 14px; font-weight: normal; color: white; text-align: left; letter-spacing: 0; line-height: 1; -webkit-font-smoothing: subpixel-antialiased; } @media (min-width: 48em) { .feeditem.shared-highlight .video-container .content-description h5 { font-size: 16px; } } .feeditem.shared-highlight .video-container .content-description p { font-size: 10px; color: rgba(255, 255, 255, 0.7); text-align: left; padding-top: 0; -webkit-font-smoothing: subpixel-antialiased; } @media (min-width: 48em) { .feeditem.shared-highlight .video-container .content-description p { font-size: 12px; padding-top: 3px; } } .feeditem.shared-highlight .video-container img { min-width: 100%; } .feeditem.shared-highlight .video-container .video-thumb-overlay { width: 100%; height: 100%; background-clip: padding-box; z-index: 200; position: relative; } .feeditem.shared-highlight .video-container .video-thumb-overlay .featured-highlight { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; overflow: hidden; } .feeditem.shared-highlight .video-container .video-thumb-overlay .featured-highlight .featured-highlight-text { overflow: visible; margin-bottom: -0.25rem; z-index: 300; color: #e6f2ff; font-family: helvetica, arial, sans-serif; font-weight: 300; font-size: 1rem; line-height: 2rem; padding: 0rem 0.675rem; background-color: #232a31; } @media (min-width: 48em) { .feeditem.shared-highlight .video-container .video-thumb-overlay .featured-highlight .featured-highlight-text { font-size: 1.5rem; } } .feeditem.shared-highlight .video-container .video-thumb-overlay .featured-highlight .featured-highlight-title { display: inline-block; padding: 0 0.675rem; font-weight: bold; color: #e6f2ff; letter-spacing: -1px; font-family: helvetica, arial, sans-serif; font-size: 1.5rem; line-height: 2.5rem; background-color: #232a31; max-width: 99%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } @media (min-width: 48em) { .feeditem.shared-highlight .video-container .video-thumb-overlay .featured-highlight .featured-highlight-title { font-size: 2rem; line-height: 3rem; } } .feeditem.shared-highlight .video-container .video-thumb-overlay .play-video { border-radius: 50%; transition: all 100ms ease-in; z-index: 300; width: 66px; height: 66px; border: none; background-color: rgba(35, 42, 49, 0.3); margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .feeditem.shared-highlight .video-container .video-thumb-overlay .play-video svg, .feeditem.shared-highlight .video-container .video-thumb-overlay .play-video path, .feeditem.shared-highlight .video-container .video-thumb-overlay .play-video polygon { display: block; height: 40px; width: auto; fill: white; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 4px; } .feeditem.shared-highlight .video-container .video-thumb-overlay .play-video:hover { background-color: rgba(35, 42, 49, 0.7); } .feeditem.shared-highlight .embeddable-video { width: 100%; min-height: 100% !important; } .feeditem.shared-highlight .embeddable-video .embeddable-video-overlay { position: absolute; height: 66%; width: 100%; top: 0; left: 0; right: 0; z-index: 100; } .feeditem.shared-highlight .embeddable-video iframe { min-width: 100%; } .feeditem.shared-highlight .highlight-cta-buttons { margin-top: 1rem; display: flex; flex-direction: row; } .feeditem.shared-highlight .highlight-cta-buttons button { flex-grow: 1; } .feeditem.shared-highlight .rendering-overlay { background: #fff; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; z-index: 2; opacity: .95; } .feeditem.shared-highlight .rendering-overlay .rendering-text { text-align: center; margin: 0 2rem; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feeditem.hudl-link .link-container { display: none; } .feeditem.hudl-link .link-description { text-transform: capitalize; padding: 14px; border: 1px solid #eaebed; } .feeditem.hudl-link .link-description:hover { color: #ff6300; background: rgba(35, 42, 49, 0.05); border-color: #e0e2e5; } .feeditem.hudl-link .link-description:active { color: white; background: #ff6300; border-color: #ff6300; } .feeditem.hudl-link .link-description .link-description-container { position: relative; top: 1px; } .feeditem.hudl-link .link-description .link-description-container .title { font-size: 16px; color: #232a31; -webkit-font-smoothing: subpixel-antialiased; } .feeditem.hudl-link .link-description .link-description-container .subtitle { font-size: 14px; color: rgba(19, 41, 63, 0.65); text-align: left; line-height: 1.15rem; margin-bottom: -1px; padding-top: 3px; } .feeditem.hudl-link .image-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px solid rgba(0, 0, 0, 0.1); background-clip: padding-box; z-index: 1; } .feeditem.hudl-link .image-overlay.border-only { background-image: none; } .feeditem.hudl-link a.hudl-link-item { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 100; } .feeditem.hudl-link a.btn-link { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 100; opacity: 0.1; } .feeditem.hudl-link a.btn-video.thumbnail .content-description { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; } .feeditem.hudl-link a.btn-video.thumbnail .content-description .content { display: inline-block; min-width: 150px; } .feeditem.hudl-link a.btn-video.thumbnail .content-description .title { display: inline-block; } .feeditem.hudl-link .media-container { background: black; margin-bottom: -1px; cursor: pointer; } .feeditem.hudl-link .image-container { position: relative; padding-top: 56.25%; width: 100%; overflow: hidden; z-index: 0; } .feeditem.hudl-link .image-container img { width: 100%; height: 100%; position: absolute; top: -50%; bottom: -50%; left: -50%; right: -50%; margin: auto; min-height: 100%; max-height: 100%; max-width: none; } .feeditem.hudl-link .image-container .content-description { border: 0; margin: 12px; padding: 0; position: absolute; bottom: 0; z-index: 300; } @media (min-width: 48em) { .feeditem.hudl-link .image-container .content-description { margin: 14px; } } .feeditem.hudl-link .image-container .content-description h5 { color: white; font-size: .875rem; font-weight: normal; text-align: left; line-height: 1; margin-bottom: 12px; letter-spacing: 0; } @media (min-width: 48em) { .feeditem.hudl-link .image-container .content-description h5 { font-size: 1rem; margin-bottom: 14px; } } .feeditem.hudl-link .image-container .content-description p { color: rgba(255, 255, 255, 0.9); font-size: .625rem; line-height: 1.16667; padding-top: 0; text-align: left; } @media (min-width: 48em) { .feeditem.hudl-link .image-container .content-description p { font-size: .75rem; } } .feeditem.hudl-link .feeditem-content { margin-bottom: -15px; } .feeditem.hudl-link .feeditem-content:last-child { margin-bottom: 0; } .feeditem.hudl-link .feeditem-content .video-link { margin-bottom: 0px; } .feeditem.hudl-link .feeditem-content .video-link .content-description:hover .uni-subhead { text-decoration: underline; } .feeditem.hudl-link .feeditem-content .video-link .content-description:active .uni-subhead { text-decoration: underline; } .feeditem.hudl-link .feeditem-content .video-link.hidden { display: none; } .feeditem.hudl-link .feeditem-content .text-link .feeditem-hudl-link:hover { background: rgba(35, 42, 49, 0.05); border-color: #e0e2e5; z-index: 100; } .feeditem.hudl-link .feeditem-content .text-link .feeditem-hudl-link:active { color: white; background: #ff6300; border-color: #ff6300; } .feeditem.hudl-link .feeditem-content .text-link .feeditem-hudl-link:active h5 { color: white; } .feeditem.hudl-link .feeditem-content .text-link .feeditem-hudl-link:active p { color: white; } .feeditem.hudl-link .feeditem-content .text-link .feeditem-hudl-link:active .feeditem-icon svg { fill: white; } .feeditem.hudl-link .feeditem-content .feeditem-hudl-link { display: block; } .feeditem.hudl-link .follow-feeduser-link { margin-top: 12px; } @media (min-width: 48em) { .feeditem.hudl-link .follow-feeduser-link { margin-top: 14px; } } .wht-bottom-gradient { display: flex; align-items: flex-end; height: 100px; width: 100%; position: absolute; bottom: 0px; z-index: 10; background: linear-gradient(to top, white 30%, rgba(255, 255, 255, 0.6) 58%, rgba(255, 255, 255, 0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ } .wht-bottom-gradient button { margin: 0 auto; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feeditem.shared-image .feeditem-link { display: flex; justify-content: center; } .feeditem.shared-image .feeditem-link a { color: inherit; } .feeditem.shared-image .feeditem-link a.btn { margin-top: 0; } .feeditem.shared-image .feedattachments .feedattachments-wrapper { margin-top: 14px; } .feeditem.shared-image .feedattachments .feedattachments-wrapper .media-container { width: 100%; height: 100%; background-color: black; margin-top: 14px; margin-bottom: 0; cursor: normal; display: block; } .feeditem.shared-image .feedattachments .feedattachments-wrapper .media-container:after { display: table; content: ""; line-height: 0; clear: both; } .feeditem.shared-image .feedattachments .feedattachments-wrapper .media-container .cover-image { position: relative; width: 100%; overflow: hidden; z-index: 0; } .feeditem.shared-image .feedattachments .feedattachments-wrapper .media-container .cover-image img { width: auto; height: auto; margin: auto; max-height: 100%; max-width: 100%; } .feeditem.shared-image .feedattachments .feedattachments-wrapper .media-container .cover-image .content-description { border: 0; margin: 12px; padding: 0; position: absolute; z-index: 300; bottom: 0; } @media (min-width: 48em) { .feeditem.shared-image .feedattachments .feedattachments-wrapper .media-container .cover-image .content-description { margin: 14px; } } .feeditem.shared-image .feedattachments .feedattachments-wrapper .media-container .cover-image .content-description h5 { font-size: 14px; font-weight: normal; color: white; text-align: left; letter-spacing: 0; line-height: 1; -webkit-font-smoothing: subpixel-antialiased; } @media (min-width: 48em) { .feeditem.shared-image .feedattachments .feedattachments-wrapper .media-container .cover-image .content-description h5 { font-size: 16px; } } .feeditem.shared-image .feedattachments .feedattachments-wrapper .media-container .cover-image .content-description p { font-size: 10px; color: rgba(255, 255, 255, 0.7); text-align: left; padding-top: 0; -webkit-font-smoothing: subpixel-antialiased; } @media (min-width: 48em) { .feeditem.shared-image .feedattachments .feedattachments-wrapper .media-container .cover-image .content-description p { font-size: 12px; padding-top: 3px; } } .feeditem.shared-image .feedattachments .feedattachments-wrapper .media-container .cover-image .image-overlay { background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.5) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px solid rgba(0, 0, 0, 0.1); background-clip: padding-box; z-index: 200; } .feeditem.shared-image .feedattachments .feedattachments-wrapper .media-container .cover-image .image-overlay.border-only { background-image: none; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feeditem.hudl-message.message .feedattachments .feedattachments-wrapper { display: none; } .feeditem.hudl-message.message .feedattachments .feedattachments-wrapper .description { display: none; } .feeditem.hudl-message.message .feedattachments .feedattachments-wrapper .content { display: none; } .feeditem.hudl-message.message .feedattachments .content-description { text-align: left; } .feeditem.hudl-message.message .feedattachments .content-description a { color: #ff6300; } .feeditem.hudl-message.message .feedattachments .content-description a:hover { background: none; border-bottom-color: #ff6300; } .feeditem.hudl-message.message .feedattachments .content-description p { display: none; } .feeditem.hudl-message.message .feedattachments .content-description p.full-text-root { text-align: left; display: block; } .feeditem.hudl-message.message .feedattachments .content-description p.full-text-root .show-full-text { padding: 2px 0 0 0; } .feeditem.hudl-message.message .feedattachments .content-description p.full-text-root .full-text { display: none; } .feeditem.hudl-message.message .feedattachments .content-description p.full-text-root .message { word-wrap: break-word; } .feeditem.hudl-message.message .feedattachments .content-description .message-attachments { display: block; border-top: 1px solid rgba(56, 67, 79, 0.1); margin-top: 10px; padding-top: 12px; } @media (min-width: 56em) { .feeditem.hudl-message.message .feedattachments .content-description .message-attachments { margin-top: 9px; padding-top: 13px; } } .feeditem.hudl-message.message .feedattachments .content-description .message-attachments ul { margin: 0 0 -7px 0; } .feeditem.hudl-message.message .feedattachments .content-description .message-attachments ul li { display: inline-block; margin: 0 10px 7px 0; font-size: 14px; font-weight: normal; text-transform: none; -webkit-font-smoothing: subpixel-antialiased; } @media (min-width: 56em) { .feeditem.hudl-message.message .feedattachments .content-description .message-attachments ul li { font-size: 13px; } } .feeditem.hudl-message.message .feedattachments .content-description .message-attachments ul li a { margin: 0; color: #ff6300; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feeditem.text p.full-text-root { margin-top: 10px; font-size: 14px; } .feeditem.text p.full-text-root .message { word-wrap: break-word; } .feeditem.text a.show-full-text { color: #009ce3; cursor: pointer; } .feeditem.text a.show-full-text:before { content: ' '; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feeditem.shared-video .feeditem-link { display: flex; justify-content: center; } .feeditem.shared-video .feeditem-link a { color: inherit; } .feeditem.shared-video .feeditem-link a.btn { margin-top: 0; } .feeditem.shared-video .feedattachments .media-container { padding-top: 56.25%; cursor: pointer; } .feeditem.shared-video .feedattachments .media-container:hover img.video-thumbnail { z-index: 2; } .feeditem.shared-video .feedattachments .media-container:hover .play-video { background-color: rgba(35, 42, 49, 0.7); } .feeditem.shared-video .undo_w { margin: 14px; } .feeditem.shared-video .feeditem-content .feedcta { display: none; } .feeditem.shared-video .video-container { width: 100%; height: 100%; position: absolute; top: 0; cursor: pointer; } .feeditem.shared-video .video-container img.video-thumbnail { filter: blur(0px); width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin-left: 0; margin-top: 0; z-index: 100; } .feeditem.shared-video .video-container .content-description { border: 0; margin: 12px; padding: 0; position: absolute; z-index: 300; bottom: 0; } @media (min-width: 48em) { .feeditem.shared-video .video-container .content-description { margin: 14px; } } .feeditem.shared-video .video-container .content-description h5 { font-size: 14px; font-weight: normal; color: white; text-align: left; letter-spacing: 0; line-height: 1; -webkit-font-smoothing: subpixel-antialiased; } @media (min-width: 48em) { .feeditem.shared-video .video-container .content-description h5 { font-size: 16px; } } .feeditem.shared-video .video-container .content-description p { font-size: 10px; color: rgba(255, 255, 255, 0.7); text-align: left; padding-top: 0; -webkit-font-smoothing: subpixel-antialiased; } @media (min-width: 48em) { .feeditem.shared-video .video-container .content-description p { font-size: 12px; padding-top: 3px; } } .feeditem.shared-video .video-container .video-thumb-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px solid rgba(0, 0, 0, 0.1); background-clip: padding-box; z-index: 200; } .feeditem.shared-video .video-container .video-thumb-overlay .play-video { border-radius: 50%; transition: all 100ms ease-in; width: 66px; height: 66px; border: none; background-color: rgba(35, 42, 49, 0.3); margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .feeditem.shared-video .video-container .video-thumb-overlay .play-video svg, .feeditem.shared-video .video-container .video-thumb-overlay .play-video path, .feeditem.shared-video .video-container .video-thumb-overlay .play-video polygon { display: block; height: 40px; width: auto; fill: white; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 4px; } .feeditem.shared-video .video-container .video-thumb-overlay .play-video:hover { background-color: rgba(35, 42, 49, 0.7); } .feeditem.shared-video .video-player { position: absolute; top: 0; width: 100%; height: 100%; } .feeditem.shared-video .video-player video { width: 100%; height: 100%; } .feeditem.shared-video .embeddable-video { width: 100%; height: 100% !important; position: absolute; top: 0; } .feeditem.shared-video .embeddable-video-overlay { position: absolute; height: 66%; width: 100%; top: 0; left: 0; right: 0; z-index: 100; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feed-reaction-modal .uni-modal__content { min-height: 30rem; } .feed-modal-content { min-height: 10rem; } .reaction-nav { background: white; position: sticky; top: 0; transform: translateY(-1rem); display: flex; flex-wrap: nowrap; flex: 0 0 45px; z-index: 100; border-bottom: 1px solid rgba(167, 174, 181, 0.6); } .reaction-nav > li { flex-grow: 1; flex-shrink: 0; position: relative; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: transparent; transition: border-bottom-color .15s ease-in-out; } .reaction-nav > li:hover { cursor: pointer; border-bottom-color: rgba(19, 41, 63, 0.8); } .reaction-nav > li.selected { border-bottom-color: #13293f; } .reaction-nav .reaction-nav-item { display: block; min-height: 1.75rem; padding: 0.5rem; } .reaction-nav .reaction-nav-item > img, .reaction-nav .reaction-nav-item svg { display: block; margin: 0 auto; width: 1.75; height: 1.75; } .feed-modal-user-list-wrapper { overflow-y: auto; overflow-x: hidden; width: 100%; } .feed-modal-user-list-wrapper .infinite-css-spinner-wrapper { display: flex; align-items: center; justify-content: center; } .feed-modal-user-list > li { padding: 0.5rem 0; border-bottom: 1px solid #edf0f2; } .feed-modal-user-list > li:first-child { padding-top: 0; } .feed-modal-user-row { display: flex; } .feed-modal-user-row .user-fields { flex: 1; align-self: center; } .feed-modal-user-row .user-fields .username:hover > h4 { text-decoration: underline; } .feed-modal-user-row .follow-user { align-self: center; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ @keyframes coloredCircleGrow { 0% { transform: scale(0); } 100% { transform: scale(26); } } @keyframes whiteCircleGrow { 0% { transform: scale(0); } 100% { transform: scale(28); } } @keyframes lightningGrow { 0% { transform: translate(7px, 0) scale(0); } 50% { transform: translate(7px, 0) scale(1.5); } 80% { transform: translate(7px, 0) scale(0.9); } 100% { transform: translate(7px, 0) scale(1); } } @keyframes lightningFlash { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes heartBodyGrow { 0% { transform: translate(3px, 10px) scale(0); } 50% { transform: translate(3px, 10px) scale(1.5); } 90% { transform: translate(3px, 10px) scale(0.9); } 100% { transform: translate(3px, 10px) scale(1); } } @keyframes heartRaysGrow { 0% { transform: translate(0px, 5px) scale(0); } 50% { transform: translate(0px, 3px) scale(0); } 75% { transform: translate(0px, 1px) scale(1.5); } 95% { transform: translate(0px, 0px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } @keyframes fireGrow { 0% { transform: translate(2px, 0px) scale(0); } 50% { transform: translate(2px, 0px) scale(1.5); } 80% { transform: translate(2px, 0px) scale(0.9); } 100% { transform: translate(2px, 0px) scale(1); } } /* Ember right animation */ @keyframes emberRightRise { 0% { opacity: 1; transform: translate(220%, 20%) scale(0.6); } 100% { opacity: 0; transform: translate(220%, -90%) scale(0.6); } } @-moz-keyframes emberRightRise { 0% { opacity: 1; transform: translate(20px, 7px) scale(0.6); } 100% { opacity: 0; transform: translate(20px, -15px) scale(0.6); } } /* Ember middle animation */ @keyframes emberMiddleRise { 0% { opacity: 1; transform: translate(85%, 20%) scale(0.8); } 100% { opacity: 0; transform: translate(85%, -80%) scale(0.8); } } @-moz-keyframes emberMiddleRise { 0% { opacity: 1; transform: translate(10px, 3px) scale(0.8); } 100% { opacity: 0; transform: translate(10px, -20px) scale(0.8); } } /* Ember left animation */ @keyframes emberLeftRise { 0% { opacity: 1; transform: translate(5%, 120%) scale(0.8); } 100% { opacity: 0; transform: translate(5%, -60%) scale(0.8); } } @-moz-keyframes emberLeftRise { 0% { opacity: 1; transform: translate(0px, 2px) scale(0.8); } 100% { opacity: 0; transform: translate(0px, -15px) scale(0.8); } } @keyframes hundredGrow { 0% { transform: translate(3px, 0px) scale(0); } 50% { transform: translate(3px, 0px) scale(1.5); } 80% { transform: translate(3px, 0px) scale(0.9); } 100% { transform: translate(3px, 0px) scale(1); } } @keyframes hundredUnderSecondLineGrow { 0% { opacity: 1; transform: scale(0.9); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(0); } } @keyframes hundredUnderFirstLineGrow { 0% { opacity: 1; transform: scale(1.01); } 80% { opacity: 1; transform: scale(1.01); } 100% { opacity: 1; transform: scale(0); } } @keyframes top5Grow { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 80% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes fiveShowAndGrow { 0% { opacity: 0; transform: translate(0px, 0px) scale(0); } 80% { opacity: 0; transform: translate(0px, 0px) scale(0); } 100% { opacity: 1; transform: translate(0px, 0px) scale(1); } } @keyframes topSlideIn { 0% { opacity: 0; transform: translate(0px, -10px); } 80% { opacity: 0; transform: translate(0px, -10px); } 100% { opacity: 1; transform: translate(0px, 0px); } } @keyframes transitionToBlueBorder { 0% { border-color: white; } 100% { border-color: rgba(0, 156, 227, 0.3); } } @keyframes fadeToBlueText { 0% { color: #8a8a8a; } 100% { color: rgba(0, 156, 227, 0.7); } } /* / This animation should ONLY be used for IE/Edge. / Until they properly support scaling/translating of svg elements, we need a simplified animation */ @keyframes growSvg { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 80% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes fadeOutReaction { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes shiftReactionToLeft { 0% { margin-left: 1px; } 100% { margin-left: -1.5rem; } } @keyframes slideRightEffect { 0% { margin-left: -50px; } 100% { margin-left: 1px; } } .animate-enter, .animate { z-index: 1; } .animate-enter svg, .animate svg { overflow: visible; animation: growSvg 0.4s ease-in-out; } @supports (transform: scale(0)) and (not (-ms-accelerator: true)) { .animate-enter svg, .animate svg { animation: none; animation-name: none; } .animate-enter svg .lightning > *, .animate-enter svg .heart > *, .animate-enter svg .top5 > *, .animate-enter svg .hundred > *, .animate-enter svg .fire > *, .animate svg .lightning > *, .animate svg .heart > *, .animate svg .top5 > *, .animate svg .hundred > *, .animate svg .fire > * { transform-origin: 14px 14px; } .animate-enter svg .colored-circle, .animate svg .colored-circle { animation: coloredCircleGrow; animation-duration: 0.2s; transition-timing-function: ease-in-out; transform: scale(0); animation-name: coloredCircleGrow; } .animate-enter svg .white-circle, .animate svg .white-circle { animation: whiteCircleGrow; animation-duration: 0.3s; transition-timing-function: ease-in-out; transform: scale(0); animation-name: whiteCircleGrow; transform-origin: center; } .animate-enter svg .lightning-bolt, .animate svg .lightning-bolt { animation: lightningGrow, lightningFlash; animation-duration: 0.4s, 0.1s; transition-timing-function: ease-in-out, ease-in-out; animation-delay: 0s, 0.4s; animation-iteration-count: 1, 3; } .animate-enter svg .heart-rays, .animate svg .heart-rays { animation: heartRaysGrow 0.5s linear; } .animate-enter svg .heart-body, .animate svg .heart-body { animation: heartBodyGrow 0.5s linear; transform-origin: 12px 12px; } .animate-enter svg .fire-flames, .animate svg .fire-flames { animation: fireGrow 0.4s ease-in-out; } .animate-enter svg .fire-ember, .animate svg .fire-ember { opacity: 0; } .animate-enter svg .fire-ember.left, .animate svg .fire-ember.left { transform: translate(5%, 120%) scale(0.8); animation: emberLeftRise 0.222s ease-out 0.479s; } .animate-enter svg .fire-ember.middle, .animate svg .fire-ember.middle { transform: translate(80%, 20%) scale(0.8); -moz-transform: translate(30%, 20%) scale(0.8); animation: emberMiddleRise 0.24s ease-out 0.238s; } .animate-enter svg .fire-ember.right, .animate svg .fire-ember.right { transform: translate(220%, 20%) scale(0.6); -moz-transform: translate(80%, 20%) scale(0.6); animation: emberRightRise 0.239s ease-out 0.371s; } .animate-enter svg .hundred-number, .animate svg .hundred-number { animation: hundredGrow 0.4s ease-in-out; } .animate-enter svg .mask, .animate svg .mask { opacity: 0; transform-origin: right center; } .animate-enter svg .mask.top, .animate svg .mask.top { animation: hundredUnderFirstLineGrow 0.6s ease-in-out; } .animate-enter svg .mask.bottom, .animate svg .mask.bottom { animation: hundredUnderSecondLineGrow 0.7s ease-in-out; } .animate-enter svg .top5-trophy, .animate svg .top5-trophy { transform-origin: 14px 14px; animation: top5Grow 0.4s ease-in-out; } .animate-enter svg .top5-letter, .animate svg .top5-letter { opacity: 1; transform: translate(0px, 0px); animation: topSlideIn 0.5s linear; } .animate-enter svg .top5-number, .animate svg .top5-number { opacity: 1; transform-origin: 14px 14px; animation: fiveShowAndGrow 0.5s linear; } } .animate-enter.reaction, .animate-enter .reacted, .animate.reaction, .animate .reacted { animation: transitionToBlueBorder .25s linear 0.75s; color: #8a8a8a; } .animate-enter.reaction:hover, .animate-enter .reacted:hover, .animate.reaction:hover, .animate .reacted:hover { border-color: white; z-index: 200; } .animate-enter.reaction .reaction-count > span, .animate-enter .reacted .reaction-count > span, .animate.reaction .reaction-count > span, .animate .reacted .reaction-count > span { color: #8a8a8a; font-weight: bold; animation: fadeToBlueText .25s linear 0.75s; } .animate-removal { opacity: 0; animation: fadeOutReaction 0.2s ease-in-out; } li.animate-enter + li { animation: slideRightEffect 0.2s ease-in-out; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .reaction-container { display: flex; flex-wrap: wrap; align-items: center; margin-top: 1rem; } .reaction-container .reaction-actions { margin-right: 1rem; } @media (max-width: 26.5625rem) { .reaction-container .reaction-actions { margin-bottom: 0.5rem; } } .reaction-container .reaction-list { display: flex; flex-wrap: nowrap; align-items: center; } .no-flexbox .reaction-container .reaction-list { float: left; width: calc(100% - 150px); } .reaction-container .reaction-list li { display: inline-block; position: relative; } .reaction-container .reaction-list li:not(:first-child) { margin-left: -0.75rem; } .reaction-container .animate-enter .reaction { border: 1px solid white; color: #8a8a8a; } .reaction-container .animate-enter .reaction.reacted .reaction-count > span { color: #8a8a8a; font-weight: bold; } .reaction-container .reaction { border-color: #e4e7eb; border-color: #e4e7eb; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); background-color: white; border-width: 1px; border-style: solid; cursor: pointer; min-width: 0; padding: .375rem; height: 2.375rem; width: 2.375rem; position: relative; z-index: 10; overflow: visible; border-radius: 50%; transition: transform 0.2s ease; transform-origin: center center; } .uni-env--dark .reaction-container .reaction { border-color: #2c353e; } .uni-env--light .reaction-container .reaction { border-color: #e4e7eb; } [class*='uni-env--'] .uni-env--dark .reaction-container .reaction { border-color: #2c353e; } [class*='uni-env--'] .uni-env--light .reaction-container .reaction { border-color: #e4e7eb; } [class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .reaction-container .reaction { border-color: #2c353e; } .uni-env--dark .reaction-container .reaction { box-shadow: 0 0 4px rgba(255, 255, 255, 0.2); } .uni-env--light .reaction-container .reaction { box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); } [class*='uni-env--'] .uni-env--dark .reaction-container .reaction { box-shadow: 0 0 4px rgba(255, 255, 255, 0.2); } [class*='uni-env--'] .uni-env--light .reaction-container .reaction { box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); } [class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .reaction-container .reaction { box-shadow: 0 0 4px rgba(255, 255, 255, 0.2); } .reaction-container .reaction:hover { cursor: pointer; transform: scale(1.1); z-index: 200; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25), 0 0 4px rgba(0, 0, 0, 0.2); } .reaction-container .reaction.animate { z-index: 1; } .reaction-container .reaction.animate:hover { border-color: white; } .reaction-container .reaction.reacted { border-color: #009ce3; } .reaction-container .reaction.reacted:hover { border-color: #7fd7ff; } .reaction-container .reaction.reacted .reaction-count > span { color: rgba(0, 156, 227, 0.7); font-weight: bold; } .reaction-container .reaction > svg { margin-top: 0; width: 1.5rem; height: 1.5rem; } .reaction-container .reaction .reaction-count { display: none; } .reaction-container .reaction .reaction-count > span { color: #8a8a8a; font-size: .75rem; } .reaction-container .reaction .top5 { transform: translateX(4px); } .reaction-container .reaction-details-preview .emphasis { font-weight: bold; } .reaction-container .reaction-details-preview span:after { content: ' '; /* Adds spacing between the preview message parts */ } .reaction-container .reaction-details-preview span:last-child:after { content: none; /* Remove space behind the last preview message part */ } .add-reaction { position: relative; } .add-reaction.full-width { width: 100%; } .add-reaction.full-width .add-reaction-popup { left: 50%; transform: translateX(-50%); } .add-reaction.full-width .add-reaction-popup .triangle-indicator { left: 50%; margin-left: -11px; } .no-flexbox .add-reaction { float: left; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ @keyframes coloredCircleGrow { 0% { transform: scale(0); } 100% { transform: scale(26); } } @keyframes whiteCircleGrow { 0% { transform: scale(0); } 100% { transform: scale(28); } } @keyframes lightningGrow { 0% { transform: translate(7px, 0) scale(0); } 50% { transform: translate(7px, 0) scale(1.5); } 80% { transform: translate(7px, 0) scale(0.9); } 100% { transform: translate(7px, 0) scale(1); } } @keyframes lightningFlash { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes heartBodyGrow { 0% { transform: translate(3px, 10px) scale(0); } 50% { transform: translate(3px, 10px) scale(1.5); } 90% { transform: translate(3px, 10px) scale(0.9); } 100% { transform: translate(3px, 10px) scale(1); } } @keyframes heartRaysGrow { 0% { transform: translate(0px, 5px) scale(0); } 50% { transform: translate(0px, 3px) scale(0); } 75% { transform: translate(0px, 1px) scale(1.5); } 95% { transform: translate(0px, 0px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } @keyframes fireGrow { 0% { transform: translate(2px, 0px) scale(0); } 50% { transform: translate(2px, 0px) scale(1.5); } 80% { transform: translate(2px, 0px) scale(0.9); } 100% { transform: translate(2px, 0px) scale(1); } } /* Ember right animation */ @keyframes emberRightRise { 0% { opacity: 1; transform: translate(220%, 20%) scale(0.6); } 100% { opacity: 0; transform: translate(220%, -90%) scale(0.6); } } @-moz-keyframes emberRightRise { 0% { opacity: 1; transform: translate(20px, 7px) scale(0.6); } 100% { opacity: 0; transform: translate(20px, -15px) scale(0.6); } } /* Ember middle animation */ @keyframes emberMiddleRise { 0% { opacity: 1; transform: translate(85%, 20%) scale(0.8); } 100% { opacity: 0; transform: translate(85%, -80%) scale(0.8); } } @-moz-keyframes emberMiddleRise { 0% { opacity: 1; transform: translate(10px, 3px) scale(0.8); } 100% { opacity: 0; transform: translate(10px, -20px) scale(0.8); } } /* Ember left animation */ @keyframes emberLeftRise { 0% { opacity: 1; transform: translate(5%, 120%) scale(0.8); } 100% { opacity: 0; transform: translate(5%, -60%) scale(0.8); } } @-moz-keyframes emberLeftRise { 0% { opacity: 1; transform: translate(0px, 2px) scale(0.8); } 100% { opacity: 0; transform: translate(0px, -15px) scale(0.8); } } @keyframes hundredGrow { 0% { transform: translate(3px, 0px) scale(0); } 50% { transform: translate(3px, 0px) scale(1.5); } 80% { transform: translate(3px, 0px) scale(0.9); } 100% { transform: translate(3px, 0px) scale(1); } } @keyframes hundredUnderSecondLineGrow { 0% { opacity: 1; transform: scale(0.9); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(0); } } @keyframes hundredUnderFirstLineGrow { 0% { opacity: 1; transform: scale(1.01); } 80% { opacity: 1; transform: scale(1.01); } 100% { opacity: 1; transform: scale(0); } } @keyframes top5Grow { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 80% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes fiveShowAndGrow { 0% { opacity: 0; transform: translate(0px, 0px) scale(0); } 80% { opacity: 0; transform: translate(0px, 0px) scale(0); } 100% { opacity: 1; transform: translate(0px, 0px) scale(1); } } @keyframes topSlideIn { 0% { opacity: 0; transform: translate(0px, -10px); } 80% { opacity: 0; transform: translate(0px, -10px); } 100% { opacity: 1; transform: translate(0px, 0px); } } @keyframes transitionToBlueBorder { 0% { border-color: white; } 100% { border-color: rgba(0, 156, 227, 0.3); } } @keyframes fadeToBlueText { 0% { color: #8a8a8a; } 100% { color: rgba(0, 156, 227, 0.7); } } /* / This animation should ONLY be used for IE/Edge. / Until they properly support scaling/translating of svg elements, we need a simplified animation */ @keyframes growSvg { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 80% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes fadeOutReaction { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes shiftReactionToLeft { 0% { margin-left: 1px; } 100% { margin-left: -1.5rem; } } @keyframes slideRightEffect { 0% { margin-left: -50px; } 100% { margin-left: 1px; } } .animate-enter, .animate { z-index: 1; } .animate-enter svg, .animate svg { overflow: visible; animation: growSvg 0.4s ease-in-out; } @supports (transform: scale(0)) and (not (-ms-accelerator: true)) { .animate-enter svg, .animate svg { animation: none; animation-name: none; } .animate-enter svg .lightning > *, .animate-enter svg .heart > *, .animate-enter svg .top5 > *, .animate-enter svg .hundred > *, .animate-enter svg .fire > *, .animate svg .lightning > *, .animate svg .heart > *, .animate svg .top5 > *, .animate svg .hundred > *, .animate svg .fire > * { transform-origin: 14px 14px; } .animate-enter svg .colored-circle, .animate svg .colored-circle { animation: coloredCircleGrow; animation-duration: 0.2s; transition-timing-function: ease-in-out; transform: scale(0); animation-name: coloredCircleGrow; } .animate-enter svg .white-circle, .animate svg .white-circle { animation: whiteCircleGrow; animation-duration: 0.3s; transition-timing-function: ease-in-out; transform: scale(0); animation-name: whiteCircleGrow; transform-origin: center; } .animate-enter svg .lightning-bolt, .animate svg .lightning-bolt { animation: lightningGrow, lightningFlash; animation-duration: 0.4s, 0.1s; transition-timing-function: ease-in-out, ease-in-out; animation-delay: 0s, 0.4s; animation-iteration-count: 1, 3; } .animate-enter svg .heart-rays, .animate svg .heart-rays { animation: heartRaysGrow 0.5s linear; } .animate-enter svg .heart-body, .animate svg .heart-body { animation: heartBodyGrow 0.5s linear; transform-origin: 12px 12px; } .animate-enter svg .fire-flames, .animate svg .fire-flames { animation: fireGrow 0.4s ease-in-out; } .animate-enter svg .fire-ember, .animate svg .fire-ember { opacity: 0; } .animate-enter svg .fire-ember.left, .animate svg .fire-ember.left { transform: translate(5%, 120%) scale(0.8); animation: emberLeftRise 0.222s ease-out 0.479s; } .animate-enter svg .fire-ember.middle, .animate svg .fire-ember.middle { transform: translate(80%, 20%) scale(0.8); -moz-transform: translate(30%, 20%) scale(0.8); animation: emberMiddleRise 0.24s ease-out 0.238s; } .animate-enter svg .fire-ember.right, .animate svg .fire-ember.right { transform: translate(220%, 20%) scale(0.6); -moz-transform: translate(80%, 20%) scale(0.6); animation: emberRightRise 0.239s ease-out 0.371s; } .animate-enter svg .hundred-number, .animate svg .hundred-number { animation: hundredGrow 0.4s ease-in-out; } .animate-enter svg .mask, .animate svg .mask { opacity: 0; transform-origin: right center; } .animate-enter svg .mask.top, .animate svg .mask.top { animation: hundredUnderFirstLineGrow 0.6s ease-in-out; } .animate-enter svg .mask.bottom, .animate svg .mask.bottom { animation: hundredUnderSecondLineGrow 0.7s ease-in-out; } .animate-enter svg .top5-trophy, .animate svg .top5-trophy { transform-origin: 14px 14px; animation: top5Grow 0.4s ease-in-out; } .animate-enter svg .top5-letter, .animate svg .top5-letter { opacity: 1; transform: translate(0px, 0px); animation: topSlideIn 0.5s linear; } .animate-enter svg .top5-number, .animate svg .top5-number { opacity: 1; transform-origin: 14px 14px; animation: fiveShowAndGrow 0.5s linear; } } .animate-enter.reaction, .animate-enter .reacted, .animate.reaction, .animate .reacted { animation: transitionToBlueBorder .25s linear 0.75s; color: #8a8a8a; } .animate-enter.reaction:hover, .animate-enter .reacted:hover, .animate.reaction:hover, .animate .reacted:hover { border-color: white; z-index: 200; } .animate-enter.reaction .reaction-count > span, .animate-enter .reacted .reaction-count > span, .animate.reaction .reaction-count > span, .animate .reacted .reaction-count > span { color: #8a8a8a; font-weight: bold; animation: fadeToBlueText .25s linear 0.75s; } .animate-removal { opacity: 0; animation: fadeOutReaction 0.2s ease-in-out; } li.animate-enter + li { animation: slideRightEffect 0.2s ease-in-out; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ @keyframes showReactionPopup { 0% { transform: scale3d(0.2, 0.2, 1); opacity: 0.1; } 100% { transform: scale3d(1, 1, 1); opacity: 1; } } .add-reaction-popup { background-color: white; border-radius: 0.25rem; border: 1px solid #edf0f2; position: absolute; left: -.3rem; top: -3.8rem; width: auto; height: auto; z-index: 200; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25), 0 0 4px rgba(0, 0, 0, 0.2); transform-origin: bottom left; animation: showReactionPopup 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .add-reaction-popup .available-reaction-list { display: inline-block; white-space: nowrap; } .add-reaction-popup .available-reaction-list li { display: inline-block; } .add-reaction-popup .available-reaction { cursor: pointer; padding: 1rem; } .add-reaction-popup .available-reaction:hover { background-color: #f0faff; } .add-reaction-popup .available-reaction:hover > svg { transform: scale(1.1); } .add-reaction-popup .available-reaction.reacted { cursor: default; } .add-reaction-popup .available-reaction.reacted svg { opacity: .3; } .add-reaction-popup .available-reaction.reacted:hover { background-color: white; } .add-reaction-popup .available-reaction > svg { width: 1.5rem; height: 1.5rem; transition: transform 0.2s ease; transform-origin: center center; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feed-modal-content { min-height: initial; } .feed-modal-content .copy-field { transition: all 0.2s linear; margin: 1rem 2rem -1rem 2rem; height: 4rem; opacity: 1; position: relative; } .feed-modal-content .copy-field.hidden { display: none; } .feed-modal-content .sharing-content { flex-direction: column; display: flex; margin-top: 1rem; } @media (min-width: 37.5rem) { .feed-modal-content .sharing-content { flex-direction: row; justify-content: space-between; } } .feed-modal-content .sharing-content .sharing-item { min-width: 30%; display: flex; flex-direction: column; align-items: center; border: 1px solid #e4e7eb; border-radius: 4px; transition: background-color 0.3s ease-in-out; } .feed-modal-content .sharing-content .sharing-item:hover { cursor: pointer; background-color: #f9fafb; } .feed-modal-content .sharing-content .sharing-item:hover .icon svg { transform: scale3d(1.1, 1.1, 1.1); } .feed-modal-content .sharing-content .sharing-item .icon { height: 6rem; } .feed-modal-content .sharing-content .sharing-item .icon svg { transition: transform 0.15s ease; } .feed-modal-content .sharing-content .sharing-item .icon.facebook svg { height: 2.5rem; margin-top: 1.75rem; } .feed-modal-content .sharing-content .sharing-item .icon.facebook svg path { fill: #3b5998; } .feed-modal-content .sharing-content .sharing-item .icon.twitter svg { height: 3.5rem; margin-top: 1.25rem; } .feed-modal-content .sharing-content .sharing-item .icon.twitter svg path { fill: #00aced; } .feed-modal-content .sharing-content .sharing-item .icon.copy svg { height: 2.5rem; margin-top: 1.75rem; } .feed-modal-content .sharing-content .sharing-item .icon.copy svg path { fill: rgba(19, 41, 63, 0.8); } .feed-modal-content .share-buttons__notification { margin: 1.6rem 1.6rem 0 1.6rem; } .feed-modal-content .share-buttons__notification p { text-align: center; border: 1px solid rgba(105, 162, 32, 0.5); border-radius: 2px; font-weight: normal; padding: 0.5rem 1rem; background-color: rgba(105, 162, 32, 0.1); color: #6aa220; } .feed-modal-content .share-buttons__notification a { color: #6aa220; text-decoration: underline; } .feed-modal-content .share-buttons__notification a:hover { text-decoration: none; } .feed-modal-content .highlight-sharing-cta .divider { display: flex; align-items: center; justify-content: center; margin: 2rem 0; } .feed-modal-content .highlight-sharing-cta .divider .line { border-top: 1px solid #edf0f2; width: 30%; display: inline-block; } .feed-modal-content .highlight-sharing-cta .divider .label { margin: 0 1rem; } .feed-modal-content .highlight-sharing-cta .cta-buttons { display: flex; flex-direction: column; align-items: center; } .feed-modal-content .highlight-sharing-cta .cta-buttons > button:first-child { margin-bottom: 1rem; } .inactivity-dimmer__container { display: flex; height: 100%; width: 100%; } .inactivity-dimmer__overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; pointer-events: none; background: rgba(0, 0, 0, 0); transition: background 0.8s; z-index: 1; } .inactivity-dimmer__overlay--inactive { background: rgba(0, 0, 0, 0.7); } .inactivity-dimmer__container { min-width: 714px; } .theatre-player-container { display: flex; justify-content: center; height: 400px; } .theatre-player-container .inactivity-dimmer__container > div { overflow: visible; } .styles__svg--small___7hGsA { width: 1rem; height: 1rem; } .styles__svg--medium___io1sf { width: 1.5rem; height: 1.5rem; } .styles__svg--large___2HJeQ { width: 2rem; height: 2rem; } .styles__action_bar___xr2RA { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; width: 100%; display: flex; flex-direction: row; align-content: center; position: relative; } .styles__action_bar___xr2RA .styles__action_bar--internal___97Qc5 { display: flex; flex-direction: row; flex: 1; } .styles__action_bar___xr2RA .styles__action_bar__wrapper___E-ja4 { display: flex; flex: 1 0 0%; flex-wrap: wrap; } .styles__action_bar___xr2RA .styles__close_button__container___3Juxh { padding: 1.5rem; display: flex; transition: background 0.1s ease-out; } .styles__action_bar___xr2RA .styles__close_button__container___3Juxh .styles__close_icon___3zCqy { fill: #ffffff; } .styles__action_bar___xr2RA .styles__close_border___ooIi_ { margin: 6px 0; position: relative; left: -1px; } .styles__action_bar___xr2RA .styles__title___2sFHT { color: #ffffff; font-size: 1rem; font-weight: 700; display: flex; align-items: center; flex: 1; padding: 0 1rem; } .styles__action_bar___xr2RA .styles__action_section___2_W_h { flex-wrap: wrap; justify-content: flex-end; display: flex; align-items: center; margin-right: 1.25rem; } .styles__action_bar___xr2RA .styles__action_section___2_W_h .styles__action_container___2G9OK { padding: 0 0.125rem; } .styles__action_bar___xr2RA .styles__action_section___2_W_h .styles__action_container___2G9OK:first-child { padding-left: 0; } .styles__action_bar___xr2RA .styles__action_section___2_W_h .styles__action_container___2G9OK:last-child { padding-right: 0; } .styles__action_bar___xr2RA.styles__action_bar--primary___1rJHK { background: #009ce3; color: #ffffff; } .styles__action_bar___xr2RA.styles__action_bar--primary___1rJHK .styles__close_button__container___3Juxh:hover { background: #4DB9EB; } .styles__action_bar___xr2RA.styles__action_bar--primary___1rJHK .styles__close_border___ooIi_ { border-right: 1px solid #4DB9EB; } .styles__action_bar___xr2RA.styles__action_bar--success___3FvmE { background: #84b200; color: #ffffff; } .styles__action_bar___xr2RA.styles__action_bar--success___3FvmE .styles__close_button__container___3Juxh:hover { background: #a9c94d; } .styles__action_bar___xr2RA.styles__action_bar--success___3FvmE .styles__close_border___ooIi_ { border-right: 1px solid #a9c94d; } .styles__action_bar___xr2RA.styles__action_bar--destructive___144xo { background: #e81e05; color: #ffffff; } .styles__action_bar___xr2RA.styles__action_bar--destructive___144xo .styles__close_button__container___3Juxh:hover { background: #ff523d; } .styles__action_bar___xr2RA.styles__action_bar--destructive___144xo .styles__close_border___ooIi_ { border-right: 1px solid #ff523d; } .styles__avatar__text--small___3yUXx, .styles__avatar__text--medium___e3R-c, .styles__avatar__text--large___2jYhk, .styles__avatar__text--x-large___3d5wr, .styles__avatar__image--small___3u596, .styles__avatar__image--medium___1_i1E, .styles__avatar__image--large___3CHKZ, .styles__avatar__image--x-large___1cQwU { border-radius: 50%; } .styles__avatar__text--small___3yUXx, .styles__avatar__text--medium___e3R-c, .styles__avatar__text--large___2jYhk, .styles__avatar__text--x-large___3d5wr { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #ffffff; display: inline-block; background-color: #687581; font-weight: 500; text-align: center; } .styles__avatar__image--small___3u596, .styles__avatar__text--small___3yUXx { width: 1.25rem; height: 1.25rem; font-size: 0.5rem; line-height: 1.25rem; } .styles__avatar__image--medium___1_i1E, .styles__avatar__text--medium___e3R-c { width: 1.75rem; height: 1.75rem; font-size: 0.75rem; line-height: 1.75rem; } .styles__avatar__image--large___3CHKZ, .styles__avatar__text--large___2jYhk { width: 2.25rem; height: 2.25rem; font-size: 1rem; line-height: 2.25rem; } .styles__avatar__image--x-large___1cQwU, .styles__avatar__text--x-large___3d5wr { width: 4rem; height: 4rem; font-size: 2rem; line-height: 4rem; } { /* Base styles */ /* Sizes */ /* Types */ /* Weights */ /* Environment */ /* States */ } .styles__button___BwPPV { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; padding: 1rem; border: none; background: transparent; line-height: 1em; white-space: nowrap; cursor: pointer; transition: background 0.1s ease-out; } .styles__button___BwPPV svg { vertical-align: middle; } .styles__button__text___3Fdhz { vertical-align: middle; } .styles__button--small___2NKyr { padding: 0.5rem 1rem; border-radius: 0.1875rem; font-weight: 700; font-size: 0.875rem; } .styles__button--small___2NKyr svg { margin-right: 0.5rem; } .styles__button--medium___3L9L0 { padding: 0.75rem 1.25rem; border-radius: 0.25rem; font-weight: 700; font-size: 1rem; } .styles__button--medium___3L9L0 svg { margin-right: 0.75rem; } .styles__button--large___Y94aw { padding: 1.25rem 2.5rem; border-radius: 0.3125rem; font-size: 1.25rem; } .styles__button--large___Y94aw svg { margin-right: 1rem; } .styles__button--primary___z0h_H { background-color: #009ce3; color: #ffffff; } .styles__button--primary___z0h_H:hover { background-color: #4DB9EB; } .styles__button--primary___z0h_H.styles__button--reduced___1zKgd { color: #009ce3; fill: #009ce3; } .styles__button--primary___z0h_H.styles__button--reduced___1zKgd:hover { color: #4DB9EB; fill: #4DB9EB; } .styles__button--secondary___33_os { background-color: rgba(104, 117, 129, 0.8); color: #ffffff; } .styles__button--secondary___33_os:hover { background-color: rgba(139, 149, 159, 0.8); } .styles__button--secondary___33_os.styles__button--reduced___1zKgd { color: #687581; fill: #687581; } .styles__button--secondary___33_os.styles__button--reduced___1zKgd:hover { color: #a5acb4; fill: #a5acb4; } .styles__button--success___38_dw { background-color: #84b200; color: #ffffff; } .styles__button--success___38_dw:hover { background-color: #a9c94d; } .styles__button--success___38_dw.styles__button--reduced___1zKgd { color: #84b200; fill: #84b200; } .styles__button--success___38_dw.styles__button--reduced___1zKgd:hover { color: #a9c94d; fill: #a9c94d; } .styles__button--destructive___1kofF { background-color: #e81e05; color: #ffffff; } .styles__button--destructive___1kofF:hover { background-color: #ff523d; } .styles__button--destructive___1kofF.styles__button--reduced___1zKgd { color: #e81e05; fill: #e81e05; } .styles__button--destructive___1kofF.styles__button--reduced___1zKgd:hover { color: #ff523d; fill: #ff523d; } .styles__button--icon-only___2YF7n svg { margin-right: 0; } .styles__button--normal___3eJux, .styles__button--block___1KhHv { fill: #ffffff; } .styles__button--normal___3eJux[disabled], .styles__button--normal___3eJux[disabled]:hover, .styles__button--block___1KhHv[disabled], .styles__button--block___1KhHv[disabled]:hover { background-color: #a5acb4; } .styles__button--reduced___1zKgd, .styles__button--reduced___1zKgd:hover { padding-right: 1rem; padding-left: 1rem; background-color: transparent; } .styles__button--block___1KhHv { width: 100%; } .styles__button--dark___vld1l.styles__button--secondary___33_os.styles__button--reduced___1zKgd { color: #c5cacf; fill: #c5cacf; } .styles__button--dark___vld1l.styles__button--secondary___33_os.styles__button--reduced___1zKgd:hover { color: #ffffff; fill: #ffffff; } .styles__button___BwPPV:focus { outline: none; } .styles__button___BwPPV[disabled], .styles__button___BwPPV[disabled]:hover { color: #232a31; cursor: default; opacity: 0.2; fill: #232a31; } .styles__button___BwPPV[disabled].styles__button--dark___vld1l, .styles__button___BwPPV[disabled]:hover.styles__button--dark___vld1l { color: #ffffff; fill: #ffffff; } .styles__checkbox___1c85v { display: inline-block; line-height: 1.75rem; } .styles__checkbox___1c85v input[type='checkbox'] { display: none; } .styles__checkbox___1c85v label { cursor: pointer; } .styles__checkbox--light___3dczh { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #4e5d6c; } .styles__checkbox--dark___6PnHw { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #ffffff; } .styles__checkbox--disabled___34gzh label { cursor: default; } .styles__checkbox___1c85v input[type='checkbox'] + .styles__checkbox__label___1TbmI { display: flex; align-items: center; } .styles__checkbox__box___Xstvm { display: flex; width: 1rem; height: 1rem; margin-right: 0.5rem; border: 0.125rem solid #8b959f; fill: #8b959f; } .styles__checkbox--light___3dczh .styles__checkbox__input___3ecBB:disabled + .styles__checkbox__label___1TbmI { color: #a5acb4; } .styles__checkbox--light___3dczh .styles__checkbox__input___3ecBB:disabled + .styles__checkbox__label___1TbmI .styles__checkbox__box___Xstvm { border-color: #dbdee1; fill: #a5acb4; } .styles__checkbox--dark___6PnHw .styles__checkbox__input___3ecBB:disabled + .styles__checkbox__label___1TbmI { color: #687581; } .styles__checkbox--dark___6PnHw .styles__checkbox__input___3ecBB:disabled + .styles__checkbox__label___1TbmI .styles__checkbox__box___Xstvm { border-color: #4e5d6c; fill: #4e5d6c; } .styles__dropdown__menu--dark___2lsYJ, .styles__dropdown__menu--light___YqM7D { position: absolute; z-index: 1; top: 75%; right: 0; min-width: 10rem; padding: 0; margin: 0; border-radius: 1px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .styles__dropdown___3J6m6 { position: relative; } .styles__dropdown__menu___2LT0S { position: absolute; z-index: 1; top: 75%; right: 0; min-width: 10rem; padding: 0; margin: 0; border-radius: 1px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .styles__dropdown__menu--top___9Nfea { transform: translateY(-100%); } .styles__dropdown__menu--dark___2lsYJ { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #ffffff; background-color: #4e5d6c; fill: #ffffff; } .styles__dropdown__menu--light___YqM7D { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #4e5d6c; background-color: #ffffff; fill: #4e5d6c; } .styles__dropdown__menu--closed___2mj-W { visibility: hidden; } .styles__dropdown__trigger___3kbQf { cursor: pointer; } .styles__dropdown__item___2gORZ { display: flex; align-items: center; padding: 0.75rem; font-size: 0.75rem; cursor: pointer; } .styles__dropdown__item___2gORZ:hover { background-color: rgba(0, 0, 0, 0.1); } .styles__dropdown__item___2gORZ:last-child { border: none; } .styles__dropdown__icon___2Z1zH { display: inline-flex; flex: 0 0 auto; } .styles__dropdown__text___3ax0P { padding: 0 0.5rem; white-space: nowrap; } .styles__heading___3fsx3 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #4e5d6c; } .styles__heading--one___Y16Oh { font-size: 2.5rem; line-height: 2.5rem; letter-spacing: -0.0625rem; font-weight: 300; color: #687581; } .styles__heading--one___Y16Oh.styles__heading--smallScreen___sExRE { font-size: 1.875rem; line-height: 2rem; letter-spacing: -0.046875rem; } .styles__heading--one___Y16Oh.styles__heading--dark___2JEjH { color: #8b959f; } .styles__heading--two___1cLM4 { font-size: 1.875rem; line-height: 2rem; letter-spacing: -0.046875rem; font-weight: 300; color: #687581; } .styles__heading--two___1cLM4.styles__heading--smallScreen___sExRE { font-size: 1.375rem; line-height: 1.5rem; letter-spacing: -0.046875rem; } .styles__heading--two___1cLM4.styles__heading--dark___2JEjH { color: #8b959f; } .styles__heading--three___2utCy { color: #232a31; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.03125rem; color: #232a31; } .styles__heading--three___2utCy.styles__heading--smallScreen___sExRE { font-size: 1.125rem; line-height: 1.25rem; letter-spacing: -0.03125rem; } .styles__heading--three___2utCy.styles__heading--dark___2JEjH { color: #ffffff; } .styles__input___zxKkw { display: block; box-sizing: border-box; width: 100%; padding: 0.5rem; border-style: solid; border-width: 1px; border-radius: 0.125rem; background: transparent; font-size: 1rem; transition: border-color 0.25s; margin: 0; } .styles__input___zxKkw:hover { border-color: #687581; } .styles__input___zxKkw:focus { border-color: #009ce3; outline: 0; } .styles__input___zxKkw:disabled { border-color: #dbdee1; } .styles__input--light___htyJg { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #4e5d6c; border-color: #a5acb4; } .styles__input--light___htyJg::-webkit-input-placeholder { color: #a5acb4; } .styles__input--light___htyJg::-moz-placeholder { color: #a5acb4; } .styles__input--light___htyJg:-ms-input-placeholder { color: #a5acb4; } .styles__input--dark___2erH5 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #ffffff; border-color: #687581; } .styles__input--dark___2erH5::-webkit-input-placeholder { color: #687581; } .styles__input--dark___2erH5::-moz-placeholder { color: #687581; } .styles__input--dark___2erH5:-ms-input-placeholder { color: #687581; } .styles__input--critical___rI79l { border-color: #e81e05; } .styles__input--success___dAQrt { border-color: #84b200; } .styles__input--warning___MJ3_m { border-color: #e6ac00; } .styles__link___cFMGh { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #4e5d6c; display: inline; background-image: linear-gradient(rgba(0, 156, 227, 0.2) 0%, rgba(0, 156, 227, 0.2) 100%); background-repeat: repeat-x; background-position: 0 88%; background-size: 0.0625rem 0.1875em; color: #007CB5; text-decoration: none; cursor: pointer; } .styles__link___cFMGh:hover { background-image: linear-gradient(rgba(0, 156, 227, 0.4) 0%, rgba(0, 156, 227, 0.4) 100%); color: #009ce3; } .styles__link--dark___2xTzj { display: inline; background-image: linear-gradient(rgba(0, 156, 227, 0.2) 0%, rgba(0, 156, 227, 0.2) 100%); background-repeat: repeat-x; background-position: 0 88%; background-size: 0.0625rem 0.1875em; color: #007CB5; text-decoration: none; cursor: pointer; background-image: linear-gradient(rgba(77, 185, 235, 0.3) 0%, rgba(77, 185, 235, 0.3) 100%); color: #4DB9EB; } .styles__link--dark___2xTzj:hover { background-image: linear-gradient(rgba(0, 156, 227, 0.4) 0%, rgba(0, 156, 227, 0.4) 100%); color: #009ce3; } .styles__modal__header___2cXuv { margin: 0; font-weight: 400; font-size: 1.375rem; line-height: 1.375rem; letter-spacing: -0.5px; color: #4e5d6c; position: relative; display: flex; align-items: center; padding: 2rem; border-bottom: 1px solid #edeff0; justify-content: space-between; } .styles__header__text___3ERVf { flex: 0 1 auto; } .styles__header__dismiss___3E6mE { cursor: pointer; fill: #a5acb4; font-size: 0; line-height: 1; } .styles__header__dismiss___3E6mE:hover { fill: #687581; } .styles__modal__footer___DV-Oe { position: relative; display: flex; justify-content: flex-end; align-items: center; height: 6rem; padding-right: 2rem; padding-left: 2rem; border-top: 1px solid #edeff0; } .styles__modal__footer___DV-Oe button { margin-left: 0.5rem; } .styles__footer__text___1kZJo { flex: 1 0 auto; color: #a5acb4; font-size: 0.875rem; } .styles__modal___1IPsR { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #4e5d6c; position: initial; display: flex; flex-direction: column; width: auto; min-width: 30rem; max-width: 37rem; border-radius: 0.15rem; background-color: #ffffff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); } .styles__modal___1IPsR:focus { outline: 0; } .styles__modal__content___28-qu { position: relative; overflow-y: auto; max-height: 25rem; padding: 1.5rem 2rem; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .styles__modal__content___28-qu > p, .styles__modal__content___28-qu > div { width: 100%; } .styles__modal__overlay___1y9GK { position: fixed; z-index: 1000; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(35, 42, 49, 0.75); } .styles__notice___1AWQO { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #4e5d6c; padding-top: 1.125rem; padding-bottom: 0.875rem; border: 0.0625rem solid #edeff0; border-radius: 0.125rem; background-color: #f9f9fa; color: #687581; line-height: 1.75rem; text-align: center; } .styles__notice___1AWQO a { display: inline; background-image: linear-gradient(rgba(0, 156, 227, 0.2) 0%, rgba(0, 156, 227, 0.2) 100%); background-repeat: repeat-x; background-position: 0 88%; background-size: 0.0625rem 0.1875em; color: #007CB5; text-decoration: none; cursor: pointer; } .styles__notice___1AWQO a:hover { background-image: linear-gradient(rgba(0, 156, 227, 0.4) 0%, rgba(0, 156, 227, 0.4) 100%); color: #009ce3; } .styles__notice__primary-message___2fowI { display: block; font-weight: bold; } .notice--error .styles__notice__primary-message___2fowI { color: #b91804; } .styles__notice__secondary-message___9iXjp { display: block; } .styles__prompt__container___HezTB { display: flex; flex-direction: column; } .styles__prompt__row___MGtIJ { display: flex; flex-direction: row; } .styles__prompt__title___3-49m { font-size: 1.125rem; color: #ff6500; padding: 1rem 1.3rem; } .styles__prompt__body___Baxgr { font-size: 0.875rem; line-height: 1.25rem; color: #4e5d6c; padding: 1rem 1.3rem; } .styles__prompt__row___MGtIJ + .styles__prompt__body___Baxgr, .styles__prompt__close-icon___3yfB2 + .styles__prompt__body___Baxgr { padding-top: 0rem; } .styles__prompt__close-icon___3yfB2 { display: flex; flex-grow: 1; justify-content: flex-end; padding: 0.5rem; fill: #a5acb4; } .rc-tooltip { position: absolute; z-index: 1070; display: block; visibility: visible; line-height: 1.5; opacity: 1; } .rc-tooltip-hidden { display: none; } .rc-tooltip-placement-top, .rc-tooltip-placement-topLeft, .rc-tooltip-placement-topRight { padding: 5px 0 9px 0; } .rc-tooltip-placement-right, .rc-tooltip-placement-rightTop, .rc-tooltip-placement-rightBottom { padding: 0 5px 0 9px; } .rc-tooltip-placement-bottom, .rc-tooltip-placement-bottomLeft, .rc-tooltip-placement-bottomRight { padding: 9px 0 5px 0; } .rc-tooltip-placement-left, .rc-tooltip-placement-leftTop, .rc-tooltip-placement-leftBottom { padding: 0 9px 0 5px; } .rc-tooltip-inner { padding: 0.5rem; background-color: #ffffff; border-radius: 2px; min-height: 34px; width: 18rem; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); } .rc-tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .rc-tooltip-placement-top .rc-tooltip-arrow, .rc-tooltip-placement-topLeft .rc-tooltip-arrow, .rc-tooltip-placement-topRight .rc-tooltip-arrow { bottom: 4px; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #ffffff; } .rc-tooltip-placement-top .rc-tooltip-arrow { left: 50%; } .rc-tooltip-placement-topLeft .rc-tooltip-arrow { left: 15%; } .rc-tooltip-placement-topRight .rc-tooltip-arrow { right: 15%; } .rc-tooltip-placement-right .rc-tooltip-arrow, .rc-tooltip-placement-rightTop .rc-tooltip-arrow, .rc-tooltip-placement-rightBottom .rc-tooltip-arrow { left: 4px; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #ffffff; } .rc-tooltip-placement-right .rc-tooltip-arrow { top: 50%; } .rc-tooltip-placement-rightTop .rc-tooltip-arrow { top: 15%; margin-top: 0; } .rc-tooltip-placement-rightBottom .rc-tooltip-arrow { bottom: 15%; } .rc-tooltip-placement-left .rc-tooltip-arrow, .rc-tooltip-placement-leftTop .rc-tooltip-arrow, .rc-tooltip-placement-leftBottom .rc-tooltip-arrow { right: 4px; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #ffffff; } .rc-tooltip-placement-left .rc-tooltip-arrow { top: 50%; } .rc-tooltip-placement-leftTop .rc-tooltip-arrow { top: 15%; margin-top: 0; } .rc-tooltip-placement-leftBottom .rc-tooltip-arrow { bottom: 15%; } .rc-tooltip-placement-bottom .rc-tooltip-arrow, .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow, .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { top: 4px; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #ffffff; } .rc-tooltip-placement-bottom .rc-tooltip-arrow { left: 50%; } .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow { left: 15%; } .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { right: 15%; } .rc-tooltip.rc-tooltip-zoom-enter, .rc-tooltip.rc-tooltip-zoom-leave { display: block; } .rc-tooltip-zoom-enter, .rc-tooltip-zoom-appear { opacity: 0; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); -webkit-animation-play-state: paused; animation-play-state: paused; } .rc-tooltip-zoom-leave { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05); animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05); -webkit-animation-play-state: paused; animation-play-state: paused; } .rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active, .rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active { -webkit-animation-name: rcToolTipZoomIn; animation-name: rcToolTipZoomIn; -webkit-animation-play-state: running; animation-play-state: running; } .rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active { -webkit-animation-name: rcToolTipZoomOut; animation-name: rcToolTipZoomOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes rcToolTipZoomIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); transform: scale(0, 0); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes rcToolTipZoomIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); transform: scale(0, 0); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes rcToolTipZoomOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); transform: scale(0, 0); } } @keyframes rcToolTipZoomOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); transform: scale(0, 0); } } .styles__radio___1jlob { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #4e5d6c; line-height: 1.75rem; } .styles__radio--dark___v0tcY { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #ffffff; } .styles__radio__input___3Xw6g { display: none; } .styles__radio--inline___3HJ6I + .styles__radio--inline___3HJ6I { margin-left: 1rem; } .styles__radio__label___b2s5q { display: flex; align-items: center; cursor: pointer; } .styles__radio__circle___1PlZZ { display: flex; box-sizing: initial; width: 1rem; height: 1rem; margin-right: 0.5rem; border: 0.125rem solid #8b959f; border-radius: 1rem; } .styles__radio__input___3Xw6g:checked + .styles__radio__label___b2s5q .styles__radio__fill___157PJ { width: 0.75rem; height: 0.75rem; margin-top: 0.125rem; margin-left: 0.125rem; border-radius: 0.75rem; background-color: #8b959f; } .styles__radio__input___3Xw6g:disabled + .styles__radio__label___b2s5q { color: #a5acb4; cursor: default; } .styles__radio__input___3Xw6g:disabled + .styles__radio__label___b2s5q .styles__radio__circle___1PlZZ { border: 0.125rem solid #dbdee1; } .styles__radio--dark___v0tcY .styles__radio__input___3Xw6g:disabled + .styles__radio__label___b2s5q { color: #687581; cursor: default; } .styles__radio--dark___v0tcY .styles__radio__input___3Xw6g:disabled + .styles__radio__label___b2s5q .styles__radio__circle___1PlZZ { border: 0.125rem solid #4e5d6c; } .styles__radio-button-group--inline___30ka_ { display: flex; flex-direction: row; } .styles__subhead___1m1gB { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #4e5d6c; color: #232a31; font-weight: bold; font-size: 1rem; line-height: 1rem; } .styles__subhead___1m1gB.styles__subhead--dark___34RiA { color: #ffffff; } .styles__subhead--small___2ac2Y { font-size: 0.875rem; line-height: 0.875rem; } .styles__subhead--subtle___QQodD { color: #687581; } .styles__subhead--subtle___QQodD.styles__subhead--dark___34RiA { color: #8b959f; } .styles__toast--default___1YRN3, .styles__toast--loading___1z25S, .styles__toast--success___1lnKU, .styles__toast--error___1O5F1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; position: absolute; z-index: 800; right: 1.5rem; bottom: 2.25rem; display: flex; align-items: center; width: auto; max-width: 20rem; padding: 1rem 1.5rem; border-radius: 2px; color: #ffffff; font-size: 0.875rem; font-family: helvetica, arial, sans-serif; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24); transition: background-color 0.2s, transform 0.2s ease-out, opacity 0.2s; fill: #ffffff; } .styles__toast__message___2zewi a, .styles__toast__action___3qqhK { border-bottom: 1px dotted #ffffff; color: #ffffff; cursor: pointer; } .styles__toast__message___2zewi a:hover, .styles__toast__action___3qqhK:hover { opacity: 0.9; } { /** * ReactCSSTransitionGroup styles */ } .styles__toast--default___1YRN3, .styles__toast--loading___1z25S { background-color: #4e5d6c; } .styles__toast--success___1lnKU { background-color: #84b200; } .styles__toast--error___1O5F1 { background-color: #e81e05; } .styles__toast__content___hk_Ls { display: flex; flex-direction: column; flex-grow: 1; line-height: 1.25rem; } .styles__toast__title___1zAPM { margin: 0; font-weight: 700; font-size: 1rem; line-height: 2rem; } .styles__toast__message___2zewi { margin: 0; } .styles__toast__message___2zewi a { text-decoration: none; } .styles__toast__action___3qqhK { margin: 0 0 0 0.5rem; } .styles__toast__dismiss-button___eXuX6 { padding-left: 1.5rem; cursor: pointer; } .styles__toast__dismiss-button___eXuX6:hover { opacity: 0.9; } .toast-enter.toast-enter-active, .toast-leave { transform: translateX(0); opacity: 1; } .toast-enter, .toast-leave.toast-leave-active { transform: translateX(1rem); opacity: 0; } .styles__tooltip__display--top___1Fld9::after, .styles__tooltip__display--top-left___f4cTj::after, .styles__tooltip__display--top-right___1j2uG::after, .styles__tooltip__display--right___3172a::after, .styles__tooltip__display--bottom___NK7AA::after, .styles__tooltip__display--bottom-left___2NBDA::after, .styles__tooltip__display--bottom-right___22xCu::after, .styles__tooltip__display--left___vE6MC::after { position: absolute; width: 0; height: 0; content: ''; } .styles__tooltip__container___263NN { position: relative; } .styles__tooltip__display___1uCUd { position: absolute; display: block; overflow: hidden; max-width: 0; font-size: 0.75rem; line-height: 1rem; text-align: center; opacity: 0; } .styles__tooltip__display--active___16P-0 { overflow: visible; min-width: 8rem; max-width: 14rem; padding: 0.5rem 0.75rem; border-radius: 0.15rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); opacity: 1; transition: opacity 0.2s ease-out 0.1s, transform 0.2s ease-out 0.2s; } .styles__tooltip__display--dark___2wnz8 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #4e5d6c; background-color: rgba(255, 255, 255, 0.98); } .styles__tooltip__display--dark___2wnz8.styles__tooltip__display--top___1Fld9::after, .styles__tooltip__display--dark___2wnz8.styles__tooltip__display--top-left___f4cTj::after, .styles__tooltip__display--dark___2wnz8.styles__tooltip__display--top-right___1j2uG::after { border-top-color: rgba(255, 255, 255, 0.98); } .styles__tooltip__display--dark___2wnz8.styles__tooltip__display--right___3172a::after { border-right-color: rgba(255, 255, 255, 0.98); } .styles__tooltip__display--dark___2wnz8.styles__tooltip__display--bottom___NK7AA::after, .styles__tooltip__display--dark___2wnz8.styles__tooltip__display--bottom-left___2NBDA::after, .styles__tooltip__display--dark___2wnz8.styles__tooltip__display--bottom-right___22xCu::after { border-bottom-color: rgba(255, 255, 255, 0.98); } .styles__tooltip__display--dark___2wnz8.styles__tooltip__display--left___vE6MC::after { border-left-color: rgba(255, 255, 255, 0.98); } .styles__tooltip__display--light___2TNiU { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #ffffff; background-color: rgba(0, 0, 0, 0.98); } .styles__tooltip__display--light___2TNiU.styles__tooltip__display--top___1Fld9::after, .styles__tooltip__display--light___2TNiU.styles__tooltip__display--top-left___f4cTj::after, .styles__tooltip__display--light___2TNiU.styles__tooltip__display--top-right___1j2uG::after { border-top-color: rgba(0, 0, 0, 0.98); } .styles__tooltip__display--light___2TNiU.styles__tooltip__display--right___3172a::after { border-right-color: rgba(0, 0, 0, 0.98); } .styles__tooltip__display--light___2TNiU.styles__tooltip__display--bottom___NK7AA::after, .styles__tooltip__display--light___2TNiU.styles__tooltip__display--bottom-left___2NBDA::after, .styles__tooltip__display--light___2TNiU.styles__tooltip__display--bottom-right___22xCu::after { border-bottom-color: rgba(0, 0, 0, 0.98); } .styles__tooltip__display--light___2TNiU.styles__tooltip__display--left___vE6MC::after { border-left-color: rgba(0, 0, 0, 0.98); } .styles__tooltip__display--bright___3wwkX { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; color: #ffffff; background-color: #009ce3; } .styles__tooltip__display--bright___3wwkX.styles__tooltip__display--top___1Fld9::after, .styles__tooltip__display--bright___3wwkX.styles__tooltip__display--top-left___f4cTj::after, .styles__tooltip__display--bright___3wwkX.styles__tooltip__display--top-right___1j2uG::after { border-top-color: #009ce3; } .styles__tooltip__display--bright___3wwkX.styles__tooltip__display--right___3172a::after { border-right-color: #009ce3; } .styles__tooltip__display--bright___3wwkX.styles__tooltip__display--bottom___NK7AA::after, .styles__tooltip__display--bright___3wwkX.styles__tooltip__display--bottom-left___2NBDA::after, .styles__tooltip__display--bright___3wwkX.styles__tooltip__display--bottom-right___22xCu::after { border-bottom-color: #009ce3; } .styles__tooltip__display--bright___3wwkX.styles__tooltip__display--left___vE6MC::after { border-left-color: #009ce3; } .styles__tooltip__display--top___1Fld9 { top: 0; left: 50%; transform: translateX(-50%) translateY(calc(-100% - 0.5rem)); -ms-transform: translateX(-50%) translateY(-100%) translateY(0.5rem); } .styles__tooltip__display--top___1Fld9::after { bottom: 1px; left: 50%; transform: translateX(-50%) translateY(100%); border-top: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-left: 0.4rem solid transparent; } .styles__tooltip__display--top-left___f4cTj { top: 0; left: 50%; transform: translateX(calc(-100% + 1rem)) translateY(calc(-100% - 0.5rem)); -ms-transform: translateX(-100%) translateX(1rem) translateY(-100%) translateY(0.5rem); } .styles__tooltip__display--top-left___f4cTj::after { bottom: 1px; left: calc(100% - 1rem); transform: translateX(-50%) translateY(100%); border-top: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-left: 0.4rem solid transparent; } .styles__tooltip__display--top-right___1j2uG { top: 0; left: 50%; transform: translateX(-1rem) translateY(calc(-100% - 0.5rem)); -ms-transform: translateX(-1rem) translateY(-100%) translateY(0.5rem); } .styles__tooltip__display--top-right___1j2uG::after { bottom: 1px; left: 1rem; transform: translateX(-50%) translateY(100%); border-top: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-left: 0.4rem solid transparent; } .styles__tooltip__display--right___3172a { top: 50%; right: 0; transform: translateX(calc(100% + 0.5rem)) translateY(-50%); -ms-transform: translateX(100%) translateX(0.5rem) translateY(-50%); } .styles__tooltip__display--right___3172a::after { top: 50%; left: 1px; transform: translateX(-100%) translateY(-50%); border-top: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-bottom: 0.4rem solid transparent; } .styles__tooltip__display--bottom___NK7AA { bottom: 0; left: 50%; transform: translateX(-50%) translateY(calc(100% + 0.5rem)); -ms-transform: translateX(-50%) translateY(100%) translateY(0.5rem); } .styles__tooltip__display--bottom___NK7AA::after { top: 1px; left: 50%; transform: translateX(-50%) translateY(-100%); border-right: 0.4rem solid transparent; border-bottom: 0.4rem solid transparent; border-left: 0.4rem solid transparent; } .styles__tooltip__display--bottom-left___2NBDA { bottom: 0; left: 50%; transform: translateX(calc(-100% + 1rem)) translateY(calc(100% + 0.5rem)); -ms-transform: translateX(-100%) translateX(1rem) translateY(100%) translateY(0.5rem); } .styles__tooltip__display--bottom-left___2NBDA::after { top: 1px; left: calc(100% - 1rem); transform: translateX(-50%) translateY(-100%); border-right: 0.4rem solid transparent; border-bottom: 0.4rem solid transparent; border-left: 0.4rem solid transparent; } .styles__tooltip__display--bottom-right___22xCu { bottom: 0; left: 50%; transform: translateX(-1rem) translateY(calc(100% + 0.5rem)); -ms-transform: translateX(-1rem) translateY(100%) translateY(0.5rem); } .styles__tooltip__display--bottom-right___22xCu::after { top: 1px; left: 1rem; transform: translateX(-50%) translateY(-100%); border-right: 0.4rem solid transparent; border-bottom: 0.4rem solid transparent; border-left: 0.4rem solid transparent; } .styles__tooltip__display--left___vE6MC { top: 50%; left: 0; transform: translateX(calc(-100% - 0.5rem)) translateY(-50%); -ms-transform: translateX(-100%) translateX(0.5rem) translateY(-50%); } .styles__tooltip__display--left___vE6MC::after { top: 50%; right: 1px; transform: translateX(100%) translateY(-50%); border-top: 0.4rem solid transparent; border-bottom: 0.4rem solid transparent; border-left: 0.4rem solid transparent; } { /* Size */ /* Environment */ /* Text */ /* Text Environment */ /* Text Size */ } .styles__loading___hfuW3 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: helvetica, arial, sans-serif; display: flex; flex-direction: row; align-items: center; } .styles__loading--spinner___3hUL2 { -webkit-animation: styles__spinner-rotation___24WoP 0.75s infinite linear; -moz-animation: styles__spinner-rotation___24WoP 0.75s infinite linear; animation: styles__spinner-rotation___24WoP 0.75s infinite linear; border-radius: 100%; border-style: solid; } @keyframes styles__spinner-rotation___24WoP { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .styles__loading--spinner__small___BiKXH { height: 0.5rem; width: 0.5rem; border-width: 0.25rem; } .styles__loading--spinner__medium___18IiR { height: 1rem; width: 1rem; border-width: 0.25rem; } .styles__loading--spinner__large___LfQwn { height: 2rem; width: 2rem; border-width: 0.5rem; } .styles__loading--spinner__x-large___OMrzc { height: 3rem; width: 3rem; border-width: 0.75rem; } .styles__loading--spinner__light___3_U12 { border-color: rgba(129, 138, 138, 0.4); border-top-color: #818A8A; } .styles__loading--spinner__dark___Vdz6O { border-color: rgba(255, 255, 255, 0.4); border-top-color: white; } .styles__loading--text___1uwCA { margin-left: 0.75rem; } .styles__loading--text__light___dpiD1 { color: #687581; } .styles__loading--text__dark___lispN { color: #ffffff; } .styles__loading--text__small___2sYMy { font-size: 1rem; } .styles__loading--text__medium___1a11P { font-size: 1.25rem; } .styles__loading--text__large___2WOMI { font-size: 2.25rem; } .styles__loading--text__x-large___1J54x { font-size: 3.25rem; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .tag-summary { color: rgba(19, 41, 63, 0.4); color: rgba(19, 41, 63, 0.4); } .uni-env--dark .tag-summary { color: rgba(230, 242, 255, 0.4); } .uni-env--light .tag-summary { color: rgba(19, 41, 63, 0.4); } [class*='uni-env--'] .uni-env--dark .tag-summary { color: rgba(230, 242, 255, 0.4); } [class*='uni-env--'] .uni-env--light .tag-summary { color: rgba(19, 41, 63, 0.4); } [class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .tag-summary { color: rgba(230, 242, 255, 0.4); } .tag-summary a { color: #13293f; color: #13293f; } .uni-env--dark .tag-summary a { color: #e6f2ff; } .uni-env--light .tag-summary a { color: #13293f; } [class*='uni-env--'] .uni-env--dark .tag-summary a { color: #e6f2ff; } [class*='uni-env--'] .uni-env--light .tag-summary a { color: #13293f; } [class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .tag-summary a { color: #e6f2ff; } .tag-summary a:hover { text-decoration: underline; cursor: pointer; } .tagged-users__tooltip { max-width: 7rem; } .tagged-users__tooltip > li { width: 100%; overflow: hidden; text-overflow: ellipsis; } .tagged-users__tooltip > li a { color: #13293f; white-space: nowrap; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .theatre-footer { flex-direction: column; max-width: 714px; width: 100%; } .theatre-footer__row { display: flex; margin-top: 1rem; } .theatre-footer__row--bordered { align-items: center; border-bottom: 1px solid #38434f; padding-bottom: 1rem; } .theatre-footer__left { flex: 1 1 0px; } .theatre-footer__left > * { color: rgba(230, 242, 255, 0.65); } .theatre-footer__metadata { white-space: nowrap; } .theatre-footer__right { display: flex; flex: 2 1 0px; justify-content: flex-end; text-align: right; flex-direction: column; } .theatre-footer__right a { color: #e6f2ff; } .theatre-footer__video-buttons { flex-direction: row; } .theatre-footer__video-buttons button { color: rgba(230, 242, 255, 0.65); } .theatre-footer__video-buttons button path { fill: rgba(230, 242, 255, 0.65); } .theatre-footer__video-buttons button:hover { color: #e6f2ff; } .theatre-footer__video-buttons button:hover path { fill: #e6f2ff; } .theatre-footer__video-buttons > * { display: inline-block; } .theatre-footer__video-title { color: #e6f2ff; flex: 3 1 0; padding-right: 0.5rem; } .theatre-footer__author-container { margin-top: 0; flex-direction: column; align-items: center; } .theatre-footer__author { display: flex; align-items: center; flex: 2 0 0; justify-content: flex-start; min-width: 0; text-align: left; } .theatre-footer__author-info { display: flex; flex-direction: column; justify-content: center; margin-left: 0.5rem; } .theatre-footer__author-name { color: #e6f2ff; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2rem; } .theatre-footer__author-avatar { border-radius: 50%; height: 2.8rem; width: 2.8rem; margin-right: 1rem; } .theatre-footer__follow-user { margin-top: 0.5rem; } .theatre-footer__follow-user .friendship:hover { background: transparent; } .theatre-footer__follow-user .friendship:hover span.follow svg { fill: rgba(230, 242, 255, 0.65); } .theatre-footer__follow-user .friendship.following:hover span.follow svg { fill: #e6f2ff; } .theatre-footer__follow-user .friendship { border: 1px solid rgba(230, 242, 255, 0.65); } .theatre-footer__follow-user .friendship:hover { background: rgba(230, 242, 255, 0.65); } .theatre-footer__follow-user .friendship:hover span.follow svg { fill: #e6f2ff; } .theatre-footer__follow-user .friendship:active { background: rgba(205, 229, 255, 0.65); } .theatre-footer__follow-user .friendship span.follow svg { fill: rgba(230, 242, 255, 0.65); } .more-recommendations-button { display: block; width: 1.5rem; height: 1.5rem; top: 3.5rem; position: relative; cursor: pointer; pointer-events: all; } .more-recommendations-button.right { float: right; } .more-recommendations-button { float: left; } .more-recommendations-button__icon::before { border-style: solid; border-width: 0.15rem 0.15rem 0 0; content: ''; display: inline-block; position: relative; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); vertical-align: top; height: 0.8rem; width: 0.8rem; top: 0.25rem; } .more-recommendations-button__icon.right:before { left: -0.25rem; transform: rotate(45deg); float: right; } .more-recommendations-button__icon:before { left: 0.25rem; transform: rotate(-135deg); float: left; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .theatre-recommendations-container { white-space: nowrap; display: block; overflow: hidden; justify-content: center; margin-bottom: 1.5rem; width: 100%; } .theatre-recommendations { position: relative; left: 0; transition: left 0.4s cubic-bezier(0.42, 0, 0.58, 1); } .theatre-recommendations__scroll-button { position: absolute; bottom: 0; height: 9rem; width: 6rem; margin-bottom: 1rem; z-index: 0; pointer-events: none; } .theatre-recommendations__scroll-button--left { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); } .theatre-recommendations__scroll-button--right { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); } .theatre-recommendations__recommendation { display: inline-block; height: 8rem; width: 10rem; margin-right: 1rem; cursor: pointer; min-width: 0; } .theatre-recommendations__recommendation:last-of-type { margin: 0; } .theatre-recommendations__recommendation--selected .theatre-recommendations__thumbnail { box-shadow: inset 0px 0px 0px 4px white; filter: brightness(100%); } .theatre-recommendations__recommendation--selected .theatre-recommendations__title { color: #e6f2ff; } .theatre-recommendations__thumbnail { background-repeat: no-repeat; background-size: cover; transition: border 0.1s, filter 0.1s; filter: brightness(80%); padding-top: 56.25%; } .theatre-recommendations__thumbnail:hover { filter: brightness(100%); } .theatre-recommendations__metadata { margin-top: 0.5rem; } .theatre-recommendations__title { color: #e6f2ff; font-weight: bold; font-size: 13px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theatre-recommendations__owner { color: #e6f2ff; font-size: 12px; line-height: 14px; margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .ReactModal__Overlay.ReactModal__Overlay--after-open.feed-modal-overlay.theatre-dialog-overlay { background-color: rgba(0, 0, 0, 0.95); } .ReactModal__Content--after-open.feed-modal.theatre-dialog { align-items: center; color: rgba(230, 242, 255, 0.8); display: flex; flex: 1; font-size: 14px; max-height: 100vh; margin: 0 1rem; min-width: 42rem; max-width: 1440px; transition: initial; transform: initial; } .theatre-main-content { align-items: center; display: flex; flex-direction: column; flex: 2 2 0; justify-content: center; width: 100%; } .theatre-close-button { position: fixed; top: 0; right: 0; height: 3rem; width: 3rem; color: #e6f2ff; cursor: pointer; } .theatre-close-button > svg { width: 100%; height: 100%; fill: #e6f2ff; padding: 1rem; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feed-modal { display: flex; flex-direction: column; position: relative; z-index: 400; width: 100%; height: 100%; min-height: 100%; max-height: 100%; overflow: visible; border-radius: 0; outline: none; } @media (min-width: 37.5em) { .feed-modal { width: 522px; min-height: 288px; max-height: 590px; border-radius: 3px; } } .feed-modal .feed-modal-close { padding: 1rem; position: absolute; right: 0; top: -2px; cursor: pointer; z-index: 600; /* Ensure button is above the h2 */ } .feed-modal .feed-modal-close:hover svg { fill: #13293f; } .feed-modal header { align-items: center; background-color: #38434f; min-height: 3rem; flex: 0 1 auto; } @media (min-width: 37.5em) { .feed-modal header { border-radius: 3px 3px 0px 0px; } } .feed-modal header h2 { font-family: trade, sans-seif; -webkit-font-smoothing: antialiased; font-weight: bold; text-transform: uppercase; color: #e6f2ff; line-height: 3rem; font-size: 16px; text-align: center; } .feed-modal footer { background-color: #f9fafb; border-top: 1px solid #e4e7eb; padding: 0.75rem; text-align: right; } @media (min-width: 37.5em) { .feed-modal footer { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } } .feed-modal footer button { margin-left: 0.5rem; } .feed-modal .feed-modal-content { background: white; display: flex; flex: 1 1 auto; flex-direction: column; overflow-x: hidden; overflow-y: auto; } @media (min-width: 37.5em) { .feed-modal .feed-modal-content:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } .feed-modal .feed-modal-content:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } } .feed-modal .infinite-css-spinner-wrapper { width: 100%; align-items: center; justify-content: center; background: white; display: flex; padding: 1rem; } .feed-modal .infinite-css-spinner-wrapper.full-height { flex: 1 0 100%; } .feed-modal-overlay { -webkit-overflow-scrolling: touch; display: flex; align-items: center; justify-content: center; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; z-index: 900; background-color: rgba(35, 42, 49, 0.8); } /** * These classes are tied to the `react-modal` library's lifecycle and allow us * to add custom animations the modal */ .ReactModal__Body--open { overflow: inherit; } .ReactModal__Overlay.feed-modal-overlay { opacity: 0.1; justify-content: center; align-items: center; } .ReactModal__Overlay--after-open.feed-modal-overlay { transition: 0.3s; opacity: 1; } .ReactModal__Overlay--before-close.feed-modal-overlay { transition: 0.3s; opacity: 0; } .ReactModal__Content.feed-modal { transform: scale(0.5); } .ReactModal__Content--after-open.feed-modal { transition: 0.3s; transform: scale(1); } .ReactModal__Content--before-close.feed-modal { transition: 0.3s; transform: scale(0.5); } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feeditem { margin-bottom: 1rem; max-width: 496px; } .feeditem .feeditem-message { max-height: 3.22rem; overflow: hidden; position: relative; } .feeditem .feeditem-message.expandable { cursor: pointer; user-select: none; } .feeditem .feeditem-message.expandable:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(rgba(255, 255, 255, 0), white); } .feeditem .feeditem-message.expanded { cursor: default; max-height: none; user-select: initial; } .feeditem .feeditem-message.expanded:before { background: none; } .feeditem .feeditem-message p { white-space: pre-wrap; } .feeditem .content a { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .feeditem .feeditem-controls { padding: 12px 12px 0; } @media (min-width: 48rem) { .feeditem .feeditem-controls { display: none; } } .feeditem .feeditem-sponsored { border-bottom: 1px solid #edf0f2; padding: .25rem 0 1rem; } .feeditem .feeditem-header { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-content: flex-start; align-items: center; } .no-flexbox .feeditem .feeditem-header { position: relative; } .no-flexbox .feeditem .feeditem-header:after { display: table; content: ""; line-height: 0; clear: both; } .feeditem .feeditem-header .feedcontent { flex-grow: 1; flex-shrink: 1; } .no-flexbox .feeditem .feeditem-header .feedcontent { width: calc(100% - 64px); float: left; } .feeditem .feeditem-header .feedmessage .name { color: inherit; } .feeditem .feeditem-header .feedmessage .name.open-profile:hover { text-decoration: underline; } .feeditem .feeditem-header .feedmessage .action { color: rgba(19, 41, 63, 0.8); font-weight: normal; } .feeditem .feeditem-header .dismiss-btn-container { flex-shrink: 0; display: inline-block; cursor: pointer; position: relative; } .feeditem .feeditem-header .dismiss-btn-container .uni-notice__dismiss { top: -2rem; right: -0.5rem; } .feeditem .feeditem-header .tag-summary { color: rgba(19, 41, 63, 0.4); color: rgba(19, 41, 63, 0.4); font-weight: normal; } .uni-env--dark .feeditem .feeditem-header .tag-summary { color: rgba(230, 242, 255, 0.4); } .uni-env--light .feeditem .feeditem-header .tag-summary { color: rgba(19, 41, 63, 0.4); } [class*='uni-env--'] .uni-env--dark .feeditem .feeditem-header .tag-summary { color: rgba(230, 242, 255, 0.4); } [class*='uni-env--'] .uni-env--light .feeditem .feeditem-header .tag-summary { color: rgba(19, 41, 63, 0.4); } [class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .feeditem .feeditem-header .tag-summary { color: rgba(230, 242, 255, 0.4); } .feeditem .feeditem-header .tag-summary a { color: rgba(19, 41, 63, 0.8); color: rgba(19, 41, 63, 0.8); } .uni-env--dark .feeditem .feeditem-header .tag-summary a { color: rgba(230, 242, 255, 0.8); } .uni-env--light .feeditem .feeditem-header .tag-summary a { color: rgba(19, 41, 63, 0.8); } [class*='uni-env--'] .uni-env--dark .feeditem .feeditem-header .tag-summary a { color: rgba(230, 242, 255, 0.8); } [class*='uni-env--'] .uni-env--light .feeditem .feeditem-header .tag-summary a { color: rgba(19, 41, 63, 0.8); } [class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .feeditem .feeditem-header .tag-summary a { color: rgba(230, 242, 255, 0.8); } .feeditem .feeditem-header .tag-summary a:hover { text-decoration: underline; cursor: pointer; } .feeditem .feedattachments { margin-top: 1rem; position: relative; } .feeditem .feedattachments > a > span { text-align: center; } .feeditem .feedattachments .feedattachments-wrapper .content { position: relative; } .feeditem .feedattachments .feedattachments-wrapper .content:after { display: table; content: ""; line-height: 0; clear: both; } .feeditem .feedattachments .feedattachments-wrapper .content .content-item { border-bottom: 1px solid #e8e8e8; margin-bottom: 14px; padding-bottom: 11px; } .feeditem .feedattachments .feedattachments-wrapper .content .content-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .feeditem .feedattachments .feedattachments-wrapper .content .image-border:after { border: 1px solid rgba(0, 0, 0, 0.1); bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; height: inherit; width: inherit; box-sizing: border-box; } .feeditem .feedattachments .feedattachments-wrapper .content .image-border:after:after { display: table; content: ""; line-height: 0; clear: both; } .feeditem .feedattachments .feedattachments-wrapper .content .feed-image { margin: 0 2px 2px 2px; } .feeditem .feedattachments .feedattachments-wrapper .content .feed-image:after { display: table; content: ""; line-height: 0; clear: both; } .feeditem .feedattachments .feedattachments-wrapper .content .feed-image .image-border { height: inherit; width: inherit; } .feeditem .feedattachments .feedattachments-wrapper .content .feed-image .media-container { width: 100%; } .feeditem .feedattachments .feedattachments-wrapper .content .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; border: 0; padding: 0; margin: 0; } .feeditem .feedattachments .feedattachments-wrapper .media-container { margin: 0; display: block; width: 100%; position: relative; border: 0; z-index: 1; } .feeditem .feedattachments .feedattachments-wrapper .media-container.small { display: none; } .feeditem .feedattachments .feedattachments-wrapper .media-container img, .feeditem .feedattachments .feedattachments-wrapper .media-container iframe { border: 0; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: auto; } .feeditem .feedattachments .content-description a, .feeditem .feedattachments .content-item-description a { color: #ff6300; } .feeditem .feedattachments .content-description a:hover, .feeditem .feedattachments .content-item-description a:hover { background: none; border-bottom-color: #ff6300; } .feeditem .feedattachments .content-description p.full-text-root .message, .feeditem .feedattachments .content-item-description p.full-text-root .message { word-wrap: break-word; } .feeditem .img.med { width: 154px; } .feeditem .bulletcta.secondary { font-size: 16px; top: 10px; right: 11px; margin: 0; padding: 0; color: rgba(19, 41, 63, 0.65); background: none; text-shadow: none; border: 0; } .feeditem .bulletcta.secondary:hover, .feeditem .bulletcta.secondary:focus { color: #ff6300; outline: none; } .feeditem .bulletcta.secondary:active { opacity: 0.5; } .feeditem .undo_w:after { display: table; content: ""; line-height: 0; clear: both; } .feeditem .undo_w .dis-msg { float: left; font-size: 14px; line-height: 1.3; color: #13293f; width: 90%; } .feeditem .undo_w .undo { float: right; font-size: 14px; line-height: 1.3; font-weight: normal; color: #ff6300; padding: 0; } .feeditem .undo_w .undo:hover { text-decoration: underline; } .feeditem .open-profile { cursor: pointer; } .feeditem hr { margin: 1rem 0; border: 0; height: 0; border-top: 1px solid #e4e7eb; border-bottom: none; } .feeditem-header > .pinned-feed-item { display: none; } @media (min-width: 48rem) { .feeditem-header > .pinned-feed-item { display: block; } } .pinned-feed-item { color: rgba(19, 41, 63, 0.65); color: rgba(19, 41, 63, 0.65); font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 0.75rem; line-height: 0.875rem; } .pinned-feed-item svg { fill: rgba(19, 41, 63, 0.8); height: 0.8375rem; width: 0.8375rem; margin-right: 0.2875rem; } .uni-env--dark .pinned-feed-item svg { fill: rgba(230, 242, 255, 0.8); } .uni-env--light .pinned-feed-item svg { fill: rgba(19, 41, 63, 0.8); } [class*='uni-env--'] .uni-env--dark .pinned-feed-item svg { fill: rgba(230, 242, 255, 0.8); } [class*='uni-env--'] .uni-env--light .pinned-feed-item svg { fill: rgba(19, 41, 63, 0.8); } [class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .pinned-feed-item svg { fill: rgba(230, 242, 255, 0.8); } .uni-env--dark .pinned-feed-item { color: rgba(230, 242, 255, 0.65); } .uni-env--light .pinned-feed-item { color: rgba(19, 41, 63, 0.65); } [class*='uni-env--'] .uni-env--dark .pinned-feed-item { color: rgba(230, 242, 255, 0.65); } [class*='uni-env--'] .uni-env--light .pinned-feed-item { color: rgba(19, 41, 63, 0.65); } [class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .pinned-feed-item { color: rgba(230, 242, 255, 0.65); } .feed-item__cta-buttons { border-top: 1px solid rgba(56, 67, 79, 0.1); } .feed-item__cta-buttons > * { width: 100%; float: left; } .feed-item__cta-buttons button { font-family: 'trade'; height: 2.94rem; transition: none; } .feed-item__cta-buttons button:hover { color: rgba(19, 41, 63, 0.65); } .feed-item__cta-buttons button:hover svg { fill: rgba(19, 41, 63, 0.65); } .feed-item__cta-buttons .uni-btn__icon { height: 16px; width: 16px; } .feed-item__cta-buttons .add-reaction-popup .triangle-indicator { left: 45%; } .feed-item__cta-buttons--half-width > * { width: 50%; } .feed-item__cta-buttons--half-width > *:first-child { border-right: 1px solid rgba(56, 67, 79, 0.1); } .dismiss-feed-item-modal .feed-modal-content { font-size: 1rem; padding: 1rem; } .dismiss-feed-item-modal p { margin-bottom: 1rem; } .dismiss-feed-item-modal .trash-icon { padding: 3px; } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ .feed-items .infinite-css-spinner-wrapper { flex-basis: 100%; padding: 1rem 0; width: 100%; display: flex; justify-content: center; overflow: hidden; } .feed-items .infinite-css-spinner { display: inline-block; clear: both; width: 3rem; height: 3rem; margin: 0 auto; border-radius: 100%; animation: spinner-rotation 0.7s infinite linear; border-top: 0.5rem solid #ff6300; border-right: 0.5rem solid rgba(124, 124, 124, 0.2); border-bottom: 0.5rem solid rgba(124, 124, 124, 0.2); border-left: 0.5rem solid rgba(124, 124, 124, 0.2); margin: 0; } @keyframes spinner-rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable */ /* stylelint-enable */ /*doc --- title: Variables name: 01-variables category: Elements --- ### Colors #### Dark UI Colors

$dui_dark_color

#232A31

$ui_dark_medium_color

#38434F

$ui_dark_light_color

#4E5D6C

#### Gray UI Colors

$ui_gray_color

#8A8A8A

$ui_gray_medium_color

#E8E8E8

$ui_gray_light_color

#F5F5F5

#### Accent UI Colors

$ui_blue_color

#00AEEF

$ui_orange_color

#FF6600

#### Alert UI Colors

$ui_red_color

#D81D1D

$ui_yellow_color

#FABE39

$ui_green_color

#6AA220

#### Grayscale UI Text Colors

$ui_text_dark_color

#333333

$ui_text_medium_color

#666666

$ui_text_light_color

#999999

$ui_text_extra_light_color

#CCCCCC

#### Base UI Colors

$ui_black_color

#FFFFFF

$ui_white_color

#000000

#### Team Colors

$tagging_team_white_color

#E9E9E9

$tagging_team_gray_color

#8C9196

$tagging_team_black_color

#404040

$tagging_team_yellow_color

#FFDD30

$tagging_team_orange_color

#ED9827

$tagging_team_red_color

#DF4953

$tagging_team_green_color

#42BE39

$tagging_team_blue_color

#3985BE

$tagging_team_purple_color

#9F62B1

` but you'll likely want to customize it a bit. ```html_example

$dui_dark_color

#232A31

$ui_dark_medium_color

#38434F

$ui_dark_light_color

#4E5D6C

#### Gray UI Colors

$ui_gray_color

#8A8A8A

$ui_gray_medium_color

#E8E8E8

$ui_gray_light_color

#F5F5F5

#### Accent UI Colors

$ui_blue_color

#00AEEF

$ui_orange_color

#FF6600

#### Alert UI Colors

$ui_red_color

#D81D1D

$ui_yellow_color

#FABE39

$ui_green_color

#6AA220

#### Grayscale UI Text Colors

$ui_text_dark_color

#333333

$ui_text_medium_color

#666666

$ui_text_light_color

#999999

$ui_text_extra_light_color

#CCCCCC

#### Base UI Colors

$ui_black_color

#FFFFFF

$ui_white_color

#000000

#### Team Colors

$tagging_team_white_color

#E9E9E9

$tagging_team_gray_color

#8C9196

$tagging_team_black_color

#404040

$tagging_team_yellow_color

#FFDD30

$tagging_team_orange_color

#ED9827

$tagging_team_red_color

#DF4953

$tagging_team_green_color

#42BE39

$tagging_team_blue_color

#3985BE

$tagging_team_purple_color

#9F62B1

` but you'll likely want to customize it a bit. ```html_example

$dui_dark_color

#232A31

$ui_dark_medium_color

#38434F

$ui_dark_light_color

#4E5D6C

#### Gray UI Colors

$ui_gray_color

#8A8A8A

$ui_gray_medium_color

#E8E8E8

$ui_gray_light_color

#F5F5F5

#### Accent UI Colors

$ui_blue_color

#00AEEF

$ui_orange_color

#FF6600

#### Alert UI Colors

$ui_red_color

#D81D1D

$ui_yellow_color

#FABE39

$ui_green_color

#6AA220

#### Grayscale UI Text Colors

$ui_text_dark_color

#333333

$ui_text_medium_color

#666666

$ui_text_light_color

#999999

$ui_text_extra_light_color

#CCCCCC

#### Base UI Colors

$ui_black_color

#FFFFFF

$ui_white_color

#000000

#### Team Colors

$tagging_team_white_color

#E9E9E9

$tagging_team_gray_color

#8C9196

$tagging_team_black_color

#404040

$tagging_team_yellow_color

#FFDD30

$tagging_team_orange_color

#ED9827

$tagging_team_red_color

#DF4953

$tagging_team_green_color

#42BE39

$tagging_team_blue_color

#3985BE

$tagging_team_purple_color

#9F62B1

` but you'll likely want to customize it a bit. ```html_example

$dui_dark_color

#232A31

$ui_dark_medium_color

#38434F

$ui_dark_light_color

#4E5D6C

#### Gray UI Colors

$ui_gray_color

#8A8A8A

$ui_gray_medium_color

#E8E8E8

$ui_gray_light_color

#F5F5F5

#### Accent UI Colors

$ui_blue_color

#00AEEF

$ui_orange_color

#FF6600

#### Alert UI Colors

$ui_red_color

#D81D1D

$ui_yellow_color

#FABE39

$ui_green_color

#6AA220

#### Grayscale UI Text Colors

$ui_text_dark_color

#333333

$ui_text_medium_color

#666666

$ui_text_light_color

#999999

$ui_text_extra_light_color

#CCCCCC

#### Base UI Colors

$ui_black_color

#FFFFFF

$ui_white_color

#000000

#### Team Colors

$tagging_team_white_color

#E9E9E9

$tagging_team_gray_color

#8C9196

$tagging_team_black_color

#404040

$tagging_team_yellow_color

#FFDD30

$tagging_team_orange_color

#ED9827

$tagging_team_red_color

#DF4953

$tagging_team_green_color

#42BE39

$tagging_team_blue_color

#3985BE

$tagging_team_purple_color

#9F62B1

` but you'll likely want to customize it a bit. ```html_example

$dui_dark_color

#232A31

$ui_dark_medium_color

#38434F

$ui_dark_light_color

#4E5D6C

#### Gray UI Colors

$ui_gray_color

#8A8A8A

$ui_gray_medium_color

#E8E8E8

$ui_gray_light_color

#F5F5F5

#### Accent UI Colors

$ui_blue_color

#00AEEF

$ui_orange_color

#FF6600

#### Alert UI Colors

$ui_red_color

#D81D1D

$ui_yellow_color

#FABE39

$ui_green_color

#6AA220

#### Grayscale UI Text Colors

$ui_text_dark_color

#333333

$ui_text_medium_color

#666666

$ui_text_light_color

#999999

$ui_text_extra_light_color

#CCCCCC

#### Base UI Colors

$ui_black_color

#FFFFFF

$ui_white_color

#000000

#### Team Colors

$tagging_team_white_color

#E9E9E9

$tagging_team_gray_color

#8C9196

$tagging_team_black_color

#404040

$tagging_team_yellow_color

#FFDD30

$tagging_team_orange_color

#ED9827

$tagging_team_red_color

#DF4953

$tagging_team_green_color

#42BE39

$tagging_team_blue_color

#3985BE

$tagging_team_purple_color

#9F62B1

` but you'll likely want to customize it a bit. ```html_example