` with the class `toggle`.
*
* @section Toggle group
* @memberof Forms
*/
/**
* Style a toggle group.
* Change the inactive toggle text color and the active toggle background color with a `toggle--{color}` modifier (`*-dark` colors are not available).
* Change the active label color with a `toggle--active-{color}` modifier (`*-dark` colors are not available).
* Change the border radiuses of toggle groups inside small text with `toggle-group--s` on the `toggle-container` element.
*
* @group
* @memberof Toggle group
* @example
*
*/
.toggle-group {
display: -webkit-inline-flex;
display: inline-flex;
text-align: center;
border-radius: 18px;
}
.toggle-container {
display: block; /* Same IE-flexbug-anticipation as with flex-child */
max-width: 100%;
}
.toggle {
-webkit-flex-shrink: 0;
flex-shrink: 0;
cursor: pointer;
color: #93a7bf;
font-weight: bold;
font-size: 12px;
padding: 6px 18px;
border-radius: 18px; /* fully round by default */
background-color: transparent;
transition: color 0.125s,
background-color 0.125s;
}
/** @endgroup */
/**
* Make a toggle small.
*
* @memberof Toggle group
* @example
*
*/
.toggle--s {
font-size: 10px;
line-height: 18px;
padding: 3px 12px;
}
/* align labels with small text */
.switch--s-label,
.checkbox--s-label,
.radio--s-label {
top: 0;
}
input:disabled {
pointer-events: none;
}
/**
* When a checkbox has the `disabled` attribute, it will be styled accordingly.
*
* @memberof Checkboxes
* @selectors input:disabled + .checkbox
* @example
*
*
*
*
*
*
*
*
*/
/**
* When a radio button has the `disabled` attribute, it will be styled accordingly.
*
* @memberof Radio buttons
* @selectors input:disabled + .radio
* @example
*
*
*
*
*
*
*/
/**
* When a switch has the `disabled` attribute, it will be styled accordingly.
*
* @memberof Switches
* @selectors input:disabled + .switch
* @example
*
*
*
*/
input:disabled + .checkbox,
input:disabled + .radio,
input:disabled + .switch,
input:checked:disabled + .checkbox,
input:checked:disabled + .radio,
input:checked:disabled + .switch {
pointer-events: none;
color: rgba(31, 51, 73, 0.25);
background-color: rgba(147, 167, 191, 0.25);
border-color: transparent;
}
input:disabled + .switch::after {
background-color: rgba(31, 51, 73, 0.25);
}
/* State management for checkboxes and radio inputs */
input:checked + .checkbox > .icon,
input:checked + .radio::before {
display: block;
}
input:checked + .radio {
color: #4264fb;
}
input:checked + .checkbox {
border: 2px solid transparent;
background-color: #4264fb;
}
/* state management for switches */
input:checked + .switch::after {
left: calc(50% + 1px);
background-color: #fff;
}
input:checked + .switch {
border-color: transparent;
background-color: #4264fb;
}
/* state management for toggles */
input:checked + .toggle {
background: #4264fb;
color: #fff;
}
/**
* When a toggle group input has the `disabled` attribute, it will be styled accordingly.
*
* @memberof Toggle group
* @example
*
*/
input:disabled + .toggle {
pointer-events: none;
color: rgba(31, 51, 73, 0.25);
border-color: transparent;
}
input:checked:disabled + .toggle {
background-color: rgba(147, 167, 191, 0.25);
color: rgba(31, 51, 73, 0.25);
}
/**
* Font styles, sizes, and utilities.
*
* There are two ways to style text with Assembly: by applying utility classes to every element,
* or by creating [`prose`](#Prose) sections. All typographic styles can be applied individually with classes that have a
* `.txt-` prefix. Alternatively, [`prose`](#Prose) sections can be used to apply sensible default styling for all the semantic elements they contain.
*
* @section Typography
*/
body,
input,
textarea {
color: #1f3349;
font-size: 15px;
line-height: 24px;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
/**
* Style text like a keyboard button.
*
* @memberof Type basics
* @example
* You entered
Flamingo .
*/
.txt-kbd,
.prose:not(.unprose) kbd {
font-family: 'Menlo', 'Bitstream Vera Sans Mono', 'Monaco', 'Consolas', monospace;
border: 1px solid rgba(31, 51, 73, 0.25);
line-height: 18px;
border-radius: 3px;
padding: 2px 3px;
box-shadow: 0 1px 0 0 rgba(31, 51, 73, 0.10);
font-size: 90%;
font-weight: normal;
}
.txt-kbd--dark,
.prose--dark kbd:not(.unprose) {
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.25);
}
/**
* Style subscript text: small and below the standard line.
*
* @memberof Type basics
* @example
* The chemical formula of water is H
2 O.
*/
.txt-sub,
.prose sub:not(.unprose) {
top: 0.5ex;
}
.txt-code,
.pre,
.prose code:not(.unprose),
.prose pre:not(.unprose) {
font-family: 'Menlo', 'Bitstream Vera Sans Mono', 'Monaco', 'Consolas', monospace;
white-space: pre-wrap;
font-size: 90%; /* mono fonts have naturally large proportions, scale them down to match open sans. */
line-height: 1.5em; /* code blocks look better with smaller line height */
background: rgba(31, 51, 73, 0.05);
border-radius: 3px;
}
.txt-code--dark,
.pre--dark,
.prose--dark code:not(.unprose),
.prose--dark pre:not(.unprose) {
background: rgba(255, 255, 255, 0.05);
}
/**
* Style a code block.
*
* @memberof Type basics
* @example
*
* for each
* do this
* end
*
*/
.pre,
.prose pre:not(.unprose) {
padding: 12px;
overflow: auto;
}
.prose pre:not(.unprose) {
margin-bottom: 12px;
}
.prose pre code:not(.unprose) {
background: transparent;
padding: 0;
}
/**
* Style text as inline code.
*
* @memberof Type basics
* @example
* Make sure you
git checkout the repository.
*/
.txt-code,
.prose code:not(.unprose) {
padding: 2px 4px;
}
/**
* Apply Assembly's monospaced font stack.
*
* @memberof Type utils
* @example
*
txt-mono
*/
.txt-mono {
font-family: 'Menlo', 'Bitstream Vera Sans Mono', 'Monaco', 'Consolas', monospace;
font-size: 90%; /* mono fonts have naturally large proportions, scale them down to match open sans. */
}
/**
* Apply a bold font weight.
*
* @memberof Type utils
* @example
*
txt-bold
*/
.txt-bold {
font-weight: bold !important;
}
/**
* Classes for font size and line height, lists, block quotes, code blocks, and more.
*
* @section Type basics
* @memberof Typography
*/
/**
* Classes for the headline text scale. Line heights are 1.3333 times font size or less.
* All text size classes include `-mm`, `-ml`, and `-mxl` variations to target screen sizes.
*
* @memberof Type basics
* @group
* @example
*
Malesuada Pharetra Ridiculus
*
Malesuada Pharetra Ridiculus
*
Malesuada Pharetra Ridiculus
*
Malesuada Pharetra Ridiculus
*
Malesuada Pharetra Ridiculus
*/
.txt-h1 {
font-size: 45px;
line-height: 54px;
}
.txt-h2 {
font-size: 35px;
line-height: 42px;
}
.txt-h3 {
font-size: 30px;
line-height: 36px;
}
.txt-h4 {
font-size: 18px;
line-height: 24px;
}
.txt-h5 {
font-size: 15px;
line-height: 18px;
}
/** @endgroup */
/**
* Classes for the body text scale. Line heights are 1.5 times font size or more.
* All text size classes include `-mm`, `-ml`, and `-mxl` variations to target screen sizes.
*
* @memberof Type basics
* @group
* @example
*
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
*
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
*
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
*
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
*
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
*/
.txt-xl {
font-size: 30px;
line-height: 45px;
}
.txt-l {
font-size: 18px;
line-height: 30px;
}
.txt-m {
font-size: 15px;
line-height: 24px;
}
.txt-s {
font-size: 12px;
line-height: 18px;
}
.txt-xs {
font-size: 10px;
line-height: 15px;
}
/** @endgroup */
/**
* Style an abbreviation or acronym.
*
* @memberof Type basics
* @example
* How do you feel about
CSS ?
*/
.txt-abbr,
.prose abbr:not(.unprose) {
border-bottom: 1px dotted currentColor;
cursor: help;
}
/**
* Style a line separating two blocks of text.
*
* @memberof Type basics
* @example
*
*/
.txt-hr,
.prose hr:not(.unprose) {
margin: 17px 0; /* margin + height = 18px */
border: 0;
height: 1px;
background: rgba(31, 51, 73, 0.10);
}
.txt-hr--dark,
.prose--dark hr:not(.unprose) {
background: rgba(255, 255, 255, 0.1);
}
/* Lists */
.prose ol:not(.unprose),
.prose ul:not(.unprose),
.txt-ol,
.txt-ul {
margin-left: 24px; /* offset list styling */
}
.prose ol:not(.unprose),
.prose ul:not(.unprose) {
margin-bottom: 12px;
}
/* Less margin bottom for nested lists */
.prose ol ol:not(.unprose),
.prose ul ul:not(.unprose),
.prose ol ol ol:not(.unprose),
.prose ul ul ul:not(.unprose) {
margin-bottom: 6px;
}
/**
* Style an unordered list. Works with any element type if the list items use the `txt-li` class, but you should almost always use it with a `
` element.
*
* @memberof Type basics
* @example
*
*/
.txt-ul,
.prose ul:not(.unprose) {
list-style: disc;
}
/**
* Style an ordered list. This does *not* work (in Firefox) without semantic elements `` and ``, so use those.
*
* @memberof Type basics
* @example
*
* one
* two
* three
*
*/
.txt-ol,
.prose ol:not(.unprose) {
list-style: decimal;
}
.txt-li,
.prose li:not(.unprose) {
display: list-item;
}
.prose li:not(.unprose) {
margin-bottom: 6px;
}
/**
* Style a block quotation.
*
* @memberof Type basics
* @example
* Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.
*/
.txt-blockquote,
.prose blockquote:not(.unprose) {
quotes: none;
font-style: normal;
padding-left: 18px;
}
.prose blockquote:not(.unprose) {
margin-bottom: 18px;
}
.txt-sup,
.txt-sub,
.prose sup:not(.unprose),
.prose sub:not(.unprose) {
height: 0;
line-height: 1;
vertical-align: baseline;
position: relative;
font-size: 75%;
}
/**
* Style superscript text: small and above the standard line.
*
* @memberof Type basics
* @example
* Planet earth is seven years old. citation needed
*/
.txt-sup,
.prose sup:not(.unprose) {
bottom: 1ex;
}
/**
* Single-purpose classes for styling text.
*
* @section Type utils
* @memberof Typography
*/
/**
* Apply a light font weight.
*
* @memberof Type utils
* @example
* txt-light
*/
.txt-light {
font-weight: lighter !important;
}
/**
* Apply a normal font weight.
*
* @memberof Type utils
* @example
* txt-normal
*/
.txt-normal {
font-weight: normal !important;
}
/**
* Italicize text.
*
* @memberof Type utils
* @example
* em
*/
.txt-em { font-style: italic !important; }
/**
* Capitalize all letters in an element.
*
* @memberof Type utils
* @example
* UpPeRcAsE
*/
.txt-uppercase { text-transform: uppercase !important; }
/**
* Lowercase all letters in an element.
*
* @memberof Type utils
* @example
* LoWeRcAsE
*/
.txt-lowercase { text-transform: lowercase !important; }
/**
* Capitalize all words in an element.
*
* @memberof Type utils
* @example
* all words are capitalized
*/
.txt-capitalize { text-transform: capitalize !important; }
/**
* Capitalize the first letter in an element.
*
* @memberof Type utils
* @example
* first word only is capitalized
*/
.txt-capitalize-first { text-transform: lowercase !important; }
.txt-capitalize-first::first-letter { text-transform: capitalize !important; }
/**
* Underline text.
*
* @memberof Type utils
* @example
* txt-underline
*/
.txt-underline { text-decoration: underline !important; }
/**
* Underline text on hover.
*
* @memberof Type utils
* @example
* txt-underline-on-hover
*/
.txt-underline-on-hover:hover { text-decoration: underline !important; }
/**
* Strikethrough text.
*
* @memberof Type utils
* @example
* txt-strike
*/
.prose del:not(.unprose),
.prose s:not(.unprose),
.txt-strike { text-decoration: line-through !important; }
/**
* Prevent text from wrapping.
*
* @memberof Type utils
* @example
*
* This text is too long for its container
*
*/
.txt-nowrap {
white-space: nowrap !important;
}
/**
* Allow words to break across lines.
*
* @memberof Type utils
* @example
*
* Thiswordistoolongforitscontainer
*
*/
.txt-break-word {
word-break: break-all !important;
}
/**
* Truncate text to a single line contained within the width
* of its container, ending with an ellipsis if it overflows.
*
* @memberof Type utils
* @example
*
* This text is too long for its container
*
*/
.txt-truncate {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/**
* Apply extra space between letters.
*
* @memberof Type utils
* @group
* @example
* spaced out
* way spaced out
*/
.txt-spacing1 { letter-spacing: 0.1em !important; }
.txt-spacing2 { letter-spacing: 0.2em !important; }
.txt-spacing4 { letter-spacing: 0.4em !important; }
/** @endgroup */
/**
* Apply text shadows.
*
* @group
* @memberof Type utils
* @example
* ghost world
* ghost world
* ghost world
* ghost world
* ghost world
* ghost world
*/
.txt-shadow-darken10 { text-shadow: 1px 1px 1px rgba(31, 51, 73, 0.10); }
.txt-shadow-darken25 { text-shadow: 1px 1px 1px rgba(31, 51, 73, 0.25); }
.txt-shadow-darken50 { text-shadow: 1px 1px 1px rgba(31, 51, 73, 0.50); }
.txt-shadow-lighten10 { text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1); }
.txt-shadow-lighten25 { text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.25); }
.txt-shadow-lighten50 { text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); }
/** @endgroup */
/**
* Conveniently style large blocks of semantic markup.
* `prose` is designed to only be used when content is generated by a markdown processor and you don't have control over each element's class list.
*
* @section Prose
* @memberof Typography
*/
/**
* Apply appropriate styles based on semantic markup. Supported elements are:
* `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `table`, `small`, `ul`, `ol`, `a`, `abbr`, `hr`, `blockquote`, `kbd`, `sub`, `sup`, `code`, `pre`, `del`, `s`, `img`, and `video`.
*
* @memberof Prose
* @selectors .prose
* @example
*
*
Tortor Porta
*
Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.
*
*
Cras justo odio, dapibus ac facilisis[note] in, egestas eget quam . Lorem ipsum dolor sit amet, consectetur adipiscing elit. H2 0 electrolitis.
*
*
Tortor Porta
*
Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.
*
*
Cras justo odio, dapibus ac facilisis[note] in, egestas eget quam . Lorem ipsum dolor sit amet, consectetur adipiscing elit. H2 0 electrolitis.
*
.align-l
* .align-r
* .align-center
*/
.align-l { text-align: left !important; }
.align-r { text-align: right !important; }
.align-center { text-align: center !important; }
/** @endgroup */
/**
* Control the vertical alignment of an inline or table-cell element.
*
* @memberof Type utils
* @group
* @example
*
* align-t
*
*
* align-middle
*
*
* align-b
*
*/
.align-t { vertical-align: top !important; }
.align-b { vertical-align: bottom !important; }
.align-middle { vertical-align: middle !important; }
/** @endgroup */
/**
* Decorate elements with borders, shadows, opacity adjustments, and more.
*
* @section Theming
*/
/**
* Add borders to an element.
*
* @section Borders
* @memberof Theming
*/
/**
* Add a `1px` border that is the same color as the element's text. Target sides with `*-t`, `*-r`, `*-b`, and `*-l`. Class set includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
*
* @group
* @memberof Borders
* @example
* border
* border-b
*/
.border {
border-style: solid;
border-width: 1px;
}
.border-t {
border-style: solid;
border-top-width: 1px;
}
.border-r {
border-style: solid;
border-right-width: 1px;
}
.border-b {
border-style: solid;
border-bottom-width: 1px;
}
.border-l {
border-style: solid;
border-left-width: 1px;
}
/** @endgroup */
/**
*Make a border zero pixels wide. Class set includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
*
* @group
* @memberof Borders
* @example
* border-r--0
*/
.border--0 { border-width: 0 !important; }
.border-t--0 { border-top-width: 0 !important; }
.border-r--0 { border-right-width: 0 !important; }
.border-b--0 { border-bottom-width: 0 !important; }
.border-l--0 { border-left-width: 0 !important; }
/** @endgroup */
/**
*Make a border two pixels wide.
*
* @group
* @memberof Borders
* @example
* border--2
*/
.border--2 { border-width: 2px !important; }
.border-t--2 { border-top-width: 2px !important; }
.border-r--2 { border-right-width: 2px !important; }
.border-b--2 { border-bottom-width: 2px !important; }
.border-l--2 { border-left-width: 2px !important; }
/** @endgroup */
/**
*Make a border dashed instead of solid.
*
* @memberof Borders
* @example
* border--dash
*/
.border--dash { border-style: dashed !important; }
/**
* Adjust the curve of an element's corners.
*
* @memberof Theming
* @section Border radius
*/
/**
* Round the corners of elements. Target sides with `*-t`, `*-r`, `*-b`, `*-l`. Target corners with `*-tl`, `*-tr`, `*-bl`, `*-br`. Class set includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
*
*
* @group
* @memberof Border radius
* @example
* round
* round-tr
*/
.round { border-radius: 4px !important; }
.round-t { border-radius: 4px 4px 0 0 !important; }
.round-r { border-radius: 0 4px 4px 0 !important; }
.round-b { border-radius: 0 0 4px 4px !important; }
.round-l { border-radius: 4px 0 0 4px !important; }
.round-tl { border-top-left-radius: 4px !important; }
.round-tr { border-top-right-radius: 4px !important; }
.round-br { border-bottom-right-radius: 4px !important; }
.round-bl { border-bottom-left-radius: 4px !important; }
/** @endgroup */
/**
* Like `round`, but with twice the border radius.
*
* @group
* @memberof Border radius
* @example
* round-bold
* round-tr-bold
*/
.round-bold { border-radius: 8px !important; }
.round-t-bold { border-radius: 8px 8px 0 0 !important; }
.round-r-bold { border-radius: 0 8px 8px 0 !important; }
.round-b-bold { border-radius: 0 0 8px 8px !important; }
.round-l-bold { border-radius: 8px 0 0 8px !important; }
.round-tl-bold { border-top-left-radius: 8px !important; }
.round-tr-bold { border-top-right-radius: 8px !important; }
.round-br-bold { border-bottom-right-radius: 8px !important; }
.round-bl-bold { border-bottom-left-radius: 8px !important; }
/** @endgroup */
/**
* Like `round`, but with fully round corners.
*
* @group
* @memberof Border radius
* @example
* round-full
* round-tr-full
*/
.round-full { border-radius: 9999px !important; }
.round-t-full { border-radius: 9999px 9999px 0 0 !important; }
.round-r-full { border-radius: 0 9999px 9999px 0 !important; }
.round-b-full { border-radius: 0 0 9999px 9999px !important; }
.round-l-full { border-radius: 9999px 0 0 9999px !important; }
.round-tl-full { border-top-left-radius: 9999px !important; }
.round-tr-full { border-top-right-radius: 9999px !important; }
.round-br-full { border-bottom-right-radius: 9999px !important; }
.round-bl-full { border-bottom-left-radius: 9999px !important; }
/** @endgroup */
/**
* Unround the corners of elements. Target sides with `*-t`, `*-r`, `*-b`, `*-l`. Target corners with `*-tl`, `*-tr`, `*-bl`, `*-br`.
*
* @group
* @memberof Border radius
* @example
* `.
*
* @section Shadows
* @memberof Theming
*/
/**
* Set the style of the cursor when hovering over an element.
*
* @section Cursors
* @memberof Theming
*/
/**
* Set the `cursor` property value of an element.
*
* @group
* @memberof Cursors
* @example
* cursor-pointer
* cursor-crosshair
* cursor-move
* cursor-notallowed
*/
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-crosshair { cursor: crosshair !important; }
.cursor-move { cursor: move !important; }
.cursor-notallowed { cursor: not-allowed !important; }
/** @endgroup */
/**
* Dim elements, or hide them from the document flow without removing them.
*
* @section Opacity
* @memberof Theming
*/
/**
* Apply an opacity.
*
* @group
* @memberof Opacity
* @example
* opacity25
* opacity50
* opacity100
*/
.opacity0 { opacity: 0 !important; }
.opacity25 { opacity: 0.25 !important; }
.opacity50 { opacity: 0.5 !important; }
.opacity75 { opacity: 0.75 !important; }
.opacity100 { opacity: 1 !important; }
/** @endgroup */
/**
* Apply an opacity on hover and active states.
*
* `.opacity100-on-focus` is also available to make an otherwise transparent element opaque on focus.
*
* @group
* @memberof Opacity
* @example
* opacity25-on-hover
* opacity25-on-active (inactive)
* opacity25-on-active (active)
* opacity100-on-focus
*/
.opacity0-on-hover:hover,
.opacity0-on-active.is-active { opacity: 0 !important; }
.opacity25-on-hover:hover,
.opacity25-on-active.is-active { opacity: 0.25 !important; }
.opacity50-on-hover:hover,
.opacity50-on-active.is-active { opacity: 0.5 !important; }
.opacity75-on-hover:hover,
.opacity75-on-active.is-active { opacity: 0.75 !important; }
.opacity100-on-hover:hover,
.opacity100-on-active.is-active,
.opacity100-on-focus:focus { opacity: 1 !important; }
/** @endgroup */
/**
* Assembly uses an SVG icon sprite. To load the sprite, you must must include [`assembly.js`](https://www.mapbox.com/assembly/assembly.js) on your page.
*
* **Please read [the Icons page](/assembly/icons) to learn more about the available icons and how to use them.**
*
* @section Icons
*/
/**
* The `icon` class must be appled to an `` element.
* Inside the ``, insert a `` element whose `xlink:href` attribute
* points to an icon loaded by `assembly.js`. All icons are referenced
* by the string `#icon-{name}`. By default, icons inherit size from their calculated text size.
* Change the size of icons by applying `w{size}` and `h{size}` classes to the svg.
*
* Be aware that *icons are block-level*.
*
* To see a list of all available icons, visit [the icons page](/assembly/icons).
*
* @memberof Icons
* @example
*
*
col--2
*
col--4
*
col--6
*
*
col--3 col--auto-ml
*
col--9 col--auto-ml
*
*
col--3
*
col6 with offset
*
inline
* block
* inline-block
* none
*/
.inline { display: inline !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.none { display: none !important; }
/** @endgroup */
/**
* Classes for basic positioning. For flexbox positioning rules, see the documentation for [flexbox](#Flexbox) utilities.
*
* @section Positioning
* @memberof Layout
*/
/**
* Set an element's `position` property value. Class set includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
*
* @group
* @memberof Positioning
* @example
*
*
absolute
*
relative
*
static
*
*
*
right
*
bottom
*
left
*
top left right
*
`.
* And all margin class sets include `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
*
* @section Margins
* @memberof Layout
*/
/**
* Set `auto` margins on left and right. This pattern is useful for horizontally centering block elements.
*
* @example
* mx-auto
* @memberof Margins
*/
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
/**
* All padding classes fit the following pattern: `m`.
* And all padding class sets include `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
*
* @section Padding
* @memberof Layout
*/
/**
* All sizing classes fit the following pattern: `` or `-full` for `100%`.
* And all sizing class sets include `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
*
* @section Sizing
* @memberof Layout
*/
/**
* Set a viewport-based height.
*
* @group
* @memberof Sizing
* @example
* viewport-third
*/
.viewport-third { height: 33.3333vh !important; }
.viewport-half { height: 50vh !important; }
.viewport-twothirds { height: 66.6666vh !important; }
.viewport-almost { height: 90vh !important; }
.viewport-full { height: 100vh !important; }
/** @endgroup */
/**
* Flexbox utilities. All class sets include `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
*
* Usage must fit the following pattern:
* - `flex-parent` rules control the parent container, while `flex-child` rules control the children.
* - By default, the `main` axis is horizontal and the `cross` axis is vertical. The axes can be inverted with the use of `flex-parent--column`.
* - To learn about how the flexbox system works, check out ["A Complete Guide to Flexbox"](https://css-tricks.com/snippets/css/a-guide-to-flexbox).
*
* @section Flexbox
* @memberof Layout
*/
/**
* Establish an element as a flex parent.
* These classes allow the use of `flex-parent--*` modifiers, and `flex-child` classes on children.
*
* @group
* @memberof Flexbox
* @example
* flex-parent
* flex-parent-inline
*/
.flex-parent { display: -webkit-flex !important; display: flex !important; }
.flex-parent-inline { display: -webkit-inline-flex !important; display: inline-flex !important; }
/** @endgroup */
/**
* Set the direction of the main axis to top-to-bottom (default is left-to-right).
*
* @memberof Flexbox
* @example
*
* 1
* 2
* 3
*
*/
.flex-parent--column { -webkit-flex-direction: column !important; flex-direction: column !important; }
/**
* Set the direction of the main axis to bottom-to-top (default is left-to-right).
*
* @memberof Flexbox
* @example
*
* 1
* 2
* 3
*
*/
.flex-parent--column-reverse { -webkit-flex-direction: column-reverse !important; flex-direction: column-reverse !important; }
/**
* Set the direction of the main axis to left-to-right (the default value of `flex-parent`).
*
* @memberof Flexbox
* @example
*
* 1
* 2
* 3
*
*/
.flex-parent--row { -webkit-flex-direction: row !important; flex-direction: row !important; }
/**
* Set the direction of the main axis to right-to-left (default is left-to-right).
*
* @memberof Flexbox
* @example
*
* 1
* 2
* 3
*
*/
.flex-parent--row-reverse { -webkit-flex-direction: row-reverse !important; flex-direction: row-reverse !important; }
/**
* Center an element's children on the main axis.
*
* @memberof Flexbox
* @example
*
*/
.flex-parent--center-main { -webkit-justify-content: center !important; justify-content: center !important; }
/**
* Center an element's children on the cross axis.
*
* @memberof Flexbox
* @example
*
*/
.flex-parent--center-cross { -webkit-align-items: center !important; align-items: center !important; }
/**
* Align an element's children to the start of the cross axis.
*
* @memberof Flexbox
* @example
*
*/
.flex-parent--start-cross { -webkit-align-items: flex-start !important; align-items: flex-start !important; }
/**
* Align an element's children to the start of the main axis.
*
* @memberof Flexbox
* @example
*
*/
.flex-parent--start-main { -webkit-justify-content: flex-start !important; justify-content: flex-start !important; }
/**
* Align an element's children to the end of the cross axis.
*
* @memberof Flexbox
* @example
*
*/
.flex-parent--end-cross { -webkit-align-items: flex-end !important; align-items: flex-end !important; }
/**
* Align an element's children to the end of the main axis.
*
* @memberof Flexbox
* @example
*
*/
.flex-parent--end-main { -webkit-justify-content: flex-end !important; justify-content: flex-end !important; }
/**
* Allow children to wrap. By default, they are all forced onto one line.
*
* @memberof Flexbox
* @example
*
*/
.flex-parent--wrap { -webkit-flex-wrap: wrap !important; flex-wrap: wrap !important; }
/**
* Stretch children to fill the parent container along the cross axis.
*
* @memberof Flexbox
* @example
*
*/
.flex-parent--stretch-cross { -webkit-align-items: stretch !important; align-items: stretch !important; }
/**
* Evenly distribute children across the line, so first child is at the start
* and last child is at the end.
*
* @memberof Flexbox
* @example
*
*/
.flex-parent--space-between-main { -webkit-justify-content: space-between !important; justify-content: space-between !important; }
/**
* Establish an element as a flex child. This class mainly exists to anticipate certain bugs
* and unexpected behaviors that can otherwise occur with flexbox (especially in IE).
*
* @memberof Flexbox
* @example
*
*/
.flex-child {
display: block;
max-width: 100%;
}
/* Specifically, the above addresses #1, #2, and #12 in https://github.com/philipwalton/flexbugs */
/**
* Make a child to grow to fill whatever space is available in the main axis of the parent container.
* This is useful when you have one or more elements of
* fixed width, and another element that should take up the remaining space in the row.
*
* Typically, you will also want to apply the `flex-child--no-shrink` modifier to the element in the row with a fixed width.
*
* @memberof Flexbox
* @example
*
*/
.flex-child--grow {
-webkit-flex-grow: 1 !important;
flex-grow: 1 !important;
min-width: 0;
}
/**
* Prevent a child from shrinking below its width value.
*
* By default, flex children (even with specified widths) will shrink as needed to accommodate sibling elements.
* This class prevents that default shrinkage, forcing siblings to accommodate the parent's width.
*
* @memberof Flexbox
* @example
*
*
child
*
child
*
child
*
with .clearfix
* right
* without .clearfix
* unfloat
*/
.fl { float: left !important; }
.fr { float: right !important; }
.unfloat { float: none !important; }
.clearfix::after {
content: '' !important;
display: block !important;
clear: both !important;
}
/** @endgroup */
/* DO NOT MODIFY THIS FILE DIRECTLY!
It is generated by scripts/build-layout-scales.js, so any direct
changes will be overridden on the next build. Instead, modify
scripts/build-layout-scales.js to produce the output you want */
/* Layout scales */
/**
* Apply column gutters to all columns in a grid by adding a `grid--gut{size}` modifier to the `grid` element. Class set includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
*
* @example
*
* @memberof Grid
* @group
*/
.grid--gut0 {
margin-left: -0;
}
.grid--gut3 {
margin-left: -3px;
}
.grid--gut6 {
margin-left: -6px;
}
.grid--gut12 {
margin-left: -12px;
}
.grid--gut18 {
margin-left: -18px;
}
.grid--gut24 {
margin-left: -24px;
}
.grid--gut30 {
margin-left: -30px;
}
.grid--gut36 {
margin-left: -36px;
}
.grid--gut60 {
margin-left: -60px;
}
.grid--gut120 {
margin-left: -120px;
}
/** @endgroup */
.grid--gut0 > .col,
.grid--gut0 > .col-mm,
.grid--gut0 > .col-ml,
.grid--gut0 > .col-mxl {
padding-left: 0;
}
.grid--gut3 > .col,
.grid--gut3 > .col-mm,
.grid--gut3 > .col-ml,
.grid--gut3 > .col-mxl {
padding-left: 3px;
}
.grid--gut6 > .col,
.grid--gut6 > .col-mm,
.grid--gut6 > .col-ml,
.grid--gut6 > .col-mxl {
padding-left: 6px;
}
.grid--gut12 > .col,
.grid--gut12 > .col-mm,
.grid--gut12 > .col-ml,
.grid--gut12 > .col-mxl {
padding-left: 12px;
}
.grid--gut18 > .col,
.grid--gut18 > .col-mm,
.grid--gut18 > .col-ml,
.grid--gut18 > .col-mxl {
padding-left: 18px;
}
.grid--gut24 > .col,
.grid--gut24 > .col-mm,
.grid--gut24 > .col-ml,
.grid--gut24 > .col-mxl {
padding-left: 24px;
}
.grid--gut30 > .col,
.grid--gut30 > .col-mm,
.grid--gut30 > .col-ml,
.grid--gut30 > .col-mxl {
padding-left: 30px;
}
.grid--gut36 > .col,
.grid--gut36 > .col-mm,
.grid--gut36 > .col-ml,
.grid--gut36 > .col-mxl {
padding-left: 36px;
}
.grid--gut60 > .col,
.grid--gut60 > .col-mm,
.grid--gut60 > .col-ml,
.grid--gut60 > .col-mxl {
padding-left: 60px;
}
.grid--gut120 > .col,
.grid--gut120 > .col-mm,
.grid--gut120 > .col-ml,
.grid--gut120 > .col-mxl {
padding-left: 120px;
}
/**
* Apply margin on the top and bottom.
*
* @group
* @example
* my24
* @memberof Margins
*/
.my-neg1 {
margin-top: -1px !important;
margin-bottom: -1px !important;
}
.my-neg2 {
margin-top: -2px !important;
margin-bottom: -2px !important;
}
.my-neg3 {
margin-top: -3px !important;
margin-bottom: -3px !important;
}
.my-neg6 {
margin-top: -6px !important;
margin-bottom: -6px !important;
}
.my-neg12 {
margin-top: -12px !important;
margin-bottom: -12px !important;
}
.my-neg18 {
margin-top: -18px !important;
margin-bottom: -18px !important;
}
.my-neg24 {
margin-top: -24px !important;
margin-bottom: -24px !important;
}
.my-neg30 {
margin-top: -30px !important;
margin-bottom: -30px !important;
}
.my-neg36 {
margin-top: -36px !important;
margin-bottom: -36px !important;
}
.my-neg60 {
margin-top: -60px !important;
margin-bottom: -60px !important;
}
.my-neg120 {
margin-top: -120px !important;
margin-bottom: -120px !important;
}
.my-neg180 {
margin-top: -180px !important;
margin-bottom: -180px !important;
}
.my-neg240 {
margin-top: -240px !important;
margin-bottom: -240px !important;
}
.my-neg300 {
margin-top: -300px !important;
margin-bottom: -300px !important;
}
.my-neg360 {
margin-top: -360px !important;
margin-bottom: -360px !important;
}
.my0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.my3 {
margin-top: 3px !important;
margin-bottom: 3px !important;
}
.my6 {
margin-top: 6px !important;
margin-bottom: 6px !important;
}
.my12 {
margin-top: 12px !important;
margin-bottom: 12px !important;
}
.my18 {
margin-top: 18px !important;
margin-bottom: 18px !important;
}
.my24 {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.my30 {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.my36 {
margin-top: 36px !important;
margin-bottom: 36px !important;
}
.my60 {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.my120 {
margin-top: 120px !important;
margin-bottom: 120px !important;
}
.my180 {
margin-top: 180px !important;
margin-bottom: 180px !important;
}
.my240 {
margin-top: 240px !important;
margin-bottom: 240px !important;
}
.my300 {
margin-top: 300px !important;
margin-bottom: 300px !important;
}
.my360 {
margin-top: 360px !important;
margin-bottom: 360px !important;
}
/** @endgroup */
/**
* Apply margin on the left and right.
*
* @group
* @example
* mx24
* @memberof Margins
*/
.mx-neg1 {
margin-left: -1px !important;
margin-right: -1px !important;
}
.mx-neg2 {
margin-left: -2px !important;
margin-right: -2px !important;
}
.mx-neg3 {
margin-left: -3px !important;
margin-right: -3px !important;
}
.mx-neg6 {
margin-left: -6px !important;
margin-right: -6px !important;
}
.mx-neg12 {
margin-left: -12px !important;
margin-right: -12px !important;
}
.mx-neg18 {
margin-left: -18px !important;
margin-right: -18px !important;
}
.mx-neg24 {
margin-left: -24px !important;
margin-right: -24px !important;
}
.mx-neg30 {
margin-left: -30px !important;
margin-right: -30px !important;
}
.mx-neg36 {
margin-left: -36px !important;
margin-right: -36px !important;
}
.mx-neg60 {
margin-left: -60px !important;
margin-right: -60px !important;
}
.mx-neg120 {
margin-left: -120px !important;
margin-right: -120px !important;
}
.mx-neg180 {
margin-left: -180px !important;
margin-right: -180px !important;
}
.mx-neg240 {
margin-left: -240px !important;
margin-right: -240px !important;
}
.mx-neg300 {
margin-left: -300px !important;
margin-right: -300px !important;
}
.mx-neg360 {
margin-left: -360px !important;
margin-right: -360px !important;
}
.mx0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.mx3 {
margin-left: 3px !important;
margin-right: 3px !important;
}
.mx6 {
margin-left: 6px !important;
margin-right: 6px !important;
}
.mx12 {
margin-left: 12px !important;
margin-right: 12px !important;
}
.mx18 {
margin-left: 18px !important;
margin-right: 18px !important;
}
.mx24 {
margin-left: 24px !important;
margin-right: 24px !important;
}
.mx30 {
margin-left: 30px !important;
margin-right: 30px !important;
}
.mx36 {
margin-left: 36px !important;
margin-right: 36px !important;
}
.mx60 {
margin-left: 60px !important;
margin-right: 60px !important;
}
.mx120 {
margin-left: 120px !important;
margin-right: 120px !important;
}
.mx180 {
margin-left: 180px !important;
margin-right: 180px !important;
}
.mx240 {
margin-left: 240px !important;
margin-right: 240px !important;
}
.mx300 {
margin-left: 300px !important;
margin-right: 300px !important;
}
.mx360 {
margin-left: 360px !important;
margin-right: 360px !important;
}
/** @endgroup */
/**
* Apply margin on the top.
*
* @group
* @example
* mt24
* @memberof Margins
*/
.mt-neg1 {
margin-top: -1px !important;
}
.mt-neg2 {
margin-top: -2px !important;
}
.mt-neg3 {
margin-top: -3px !important;
}
.mt-neg6 {
margin-top: -6px !important;
}
.mt-neg12 {
margin-top: -12px !important;
}
.mt-neg18 {
margin-top: -18px !important;
}
.mt-neg24 {
margin-top: -24px !important;
}
.mt-neg30 {
margin-top: -30px !important;
}
.mt-neg36 {
margin-top: -36px !important;
}
.mt-neg60 {
margin-top: -60px !important;
}
.mt-neg120 {
margin-top: -120px !important;
}
.mt-neg180 {
margin-top: -180px !important;
}
.mt-neg240 {
margin-top: -240px !important;
}
.mt-neg300 {
margin-top: -300px !important;
}
.mt-neg360 {
margin-top: -360px !important;
}
.mt0 {
margin-top: 0 !important;
}
.mt3 {
margin-top: 3px !important;
}
.mt6 {
margin-top: 6px !important;
}
.mt12 {
margin-top: 12px !important;
}
.mt18 {
margin-top: 18px !important;
}
.mt24 {
margin-top: 24px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mt36 {
margin-top: 36px !important;
}
.mt60 {
margin-top: 60px !important;
}
.mt120 {
margin-top: 120px !important;
}
.mt180 {
margin-top: 180px !important;
}
.mt240 {
margin-top: 240px !important;
}
.mt300 {
margin-top: 300px !important;
}
.mt360 {
margin-top: 360px !important;
}
/** @endgroup */
/**
* Apply margin on the right.
*
* @group
* @example
* mr24
* @memberof Margins
*/
.mr-neg1 {
margin-right: -1px !important;
}
.mr-neg2 {
margin-right: -2px !important;
}
.mr-neg3 {
margin-right: -3px !important;
}
.mr-neg6 {
margin-right: -6px !important;
}
.mr-neg12 {
margin-right: -12px !important;
}
.mr-neg18 {
margin-right: -18px !important;
}
.mr-neg24 {
margin-right: -24px !important;
}
.mr-neg30 {
margin-right: -30px !important;
}
.mr-neg36 {
margin-right: -36px !important;
}
.mr-neg60 {
margin-right: -60px !important;
}
.mr-neg120 {
margin-right: -120px !important;
}
.mr-neg180 {
margin-right: -180px !important;
}
.mr-neg240 {
margin-right: -240px !important;
}
.mr-neg300 {
margin-right: -300px !important;
}
.mr-neg360 {
margin-right: -360px !important;
}
.mr0 {
margin-right: 0 !important;
}
.mr3 {
margin-right: 3px !important;
}
.mr6 {
margin-right: 6px !important;
}
.mr12 {
margin-right: 12px !important;
}
.mr18 {
margin-right: 18px !important;
}
.mr24 {
margin-right: 24px !important;
}
.mr30 {
margin-right: 30px !important;
}
.mr36 {
margin-right: 36px !important;
}
.mr60 {
margin-right: 60px !important;
}
.mr120 {
margin-right: 120px !important;
}
.mr180 {
margin-right: 180px !important;
}
.mr240 {
margin-right: 240px !important;
}
.mr300 {
margin-right: 300px !important;
}
.mr360 {
margin-right: 360px !important;
}
/** @endgroup */
/**
* Apply margin on the bottom.
*
* The negative margin classes, mb-neg, can be useful for certain design patterns like underline tabs.
*
* @group
* @example
* mb24
* @memberof Margins
*/
.mb-neg1 {
margin-bottom: -1px !important;
}
.mb-neg2 {
margin-bottom: -2px !important;
}
.mb-neg3 {
margin-bottom: -3px !important;
}
.mb-neg6 {
margin-bottom: -6px !important;
}
.mb-neg12 {
margin-bottom: -12px !important;
}
.mb-neg18 {
margin-bottom: -18px !important;
}
.mb-neg24 {
margin-bottom: -24px !important;
}
.mb-neg30 {
margin-bottom: -30px !important;
}
.mb-neg36 {
margin-bottom: -36px !important;
}
.mb-neg60 {
margin-bottom: -60px !important;
}
.mb-neg120 {
margin-bottom: -120px !important;
}
.mb-neg180 {
margin-bottom: -180px !important;
}
.mb-neg240 {
margin-bottom: -240px !important;
}
.mb-neg300 {
margin-bottom: -300px !important;
}
.mb-neg360 {
margin-bottom: -360px !important;
}
.mb0 {
margin-bottom: 0 !important;
}
.mb3 {
margin-bottom: 3px !important;
}
.mb6 {
margin-bottom: 6px !important;
}
.mb12 {
margin-bottom: 12px !important;
}
.mb18 {
margin-bottom: 18px !important;
}
.mb24 {
margin-bottom: 24px !important;
}
.mb30 {
margin-bottom: 30px !important;
}
.mb36 {
margin-bottom: 36px !important;
}
.mb60 {
margin-bottom: 60px !important;
}
.mb120 {
margin-bottom: 120px !important;
}
.mb180 {
margin-bottom: 180px !important;
}
.mb240 {
margin-bottom: 240px !important;
}
.mb300 {
margin-bottom: 300px !important;
}
.mb360 {
margin-bottom: 360px !important;
}
/** @endgroup */
/**
* Apply margin on the left.
*
* @group
* @example
* ml24
* @memberof Margins
*/
.ml-neg1 {
margin-left: -1px !important;
}
.ml-neg2 {
margin-left: -2px !important;
}
.ml-neg3 {
margin-left: -3px !important;
}
.ml-neg6 {
margin-left: -6px !important;
}
.ml-neg12 {
margin-left: -12px !important;
}
.ml-neg18 {
margin-left: -18px !important;
}
.ml-neg24 {
margin-left: -24px !important;
}
.ml-neg30 {
margin-left: -30px !important;
}
.ml-neg36 {
margin-left: -36px !important;
}
.ml-neg60 {
margin-left: -60px !important;
}
.ml-neg120 {
margin-left: -120px !important;
}
.ml-neg180 {
margin-left: -180px !important;
}
.ml-neg240 {
margin-left: -240px !important;
}
.ml-neg300 {
margin-left: -300px !important;
}
.ml-neg360 {
margin-left: -360px !important;
}
.ml0 {
margin-left: 0 !important;
}
.ml3 {
margin-left: 3px !important;
}
.ml6 {
margin-left: 6px !important;
}
.ml12 {
margin-left: 12px !important;
}
.ml18 {
margin-left: 18px !important;
}
.ml24 {
margin-left: 24px !important;
}
.ml30 {
margin-left: 30px !important;
}
.ml36 {
margin-left: 36px !important;
}
.ml60 {
margin-left: 60px !important;
}
.ml120 {
margin-left: 120px !important;
}
.ml180 {
margin-left: 180px !important;
}
.ml240 {
margin-left: 240px !important;
}
.ml300 {
margin-left: 300px !important;
}
.ml360 {
margin-left: 360px !important;
}
/** @endgroup */
/**
* Apply padding on the top and bottom.
*
* @group
* @example
* py24
* @memberof Padding
*/
.py0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.py3 {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.py6 {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.py12 {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.py18 {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
.py24 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.py30 {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.py36 {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
.py60 {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.py120 {
padding-top: 120px !important;
padding-bottom: 120px !important;
}
.py180 {
padding-top: 180px !important;
padding-bottom: 180px !important;
}
.py240 {
padding-top: 240px !important;
padding-bottom: 240px !important;
}
.py300 {
padding-top: 300px !important;
padding-bottom: 300px !important;
}
.py360 {
padding-top: 360px !important;
padding-bottom: 360px !important;
}
/** @endgroup */
/**
* Apply padding on the left and right.
*
* @group
* @example
* px24
* @memberof Padding
*/
.px0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.px3 {
padding-left: 3px !important;
padding-right: 3px !important;
}
.px6 {
padding-left: 6px !important;
padding-right: 6px !important;
}
.px12 {
padding-left: 12px !important;
padding-right: 12px !important;
}
.px18 {
padding-left: 18px !important;
padding-right: 18px !important;
}
.px24 {
padding-left: 24px !important;
padding-right: 24px !important;
}
.px30 {
padding-left: 30px !important;
padding-right: 30px !important;
}
.px36 {
padding-left: 36px !important;
padding-right: 36px !important;
}
.px60 {
padding-left: 60px !important;
padding-right: 60px !important;
}
.px120 {
padding-left: 120px !important;
padding-right: 120px !important;
}
.px180 {
padding-left: 180px !important;
padding-right: 180px !important;
}
.px240 {
padding-left: 240px !important;
padding-right: 240px !important;
}
.px300 {
padding-left: 300px !important;
padding-right: 300px !important;
}
.px360 {
padding-left: 360px !important;
padding-right: 360px !important;
}
/** @endgroup */
/**
* Apply padding on the top.
*
* @group
* @example
* pt24
* @memberof Padding
*/
.pt0 {
padding-top: 0 !important;
}
.pt3 {
padding-top: 3px !important;
}
.pt6 {
padding-top: 6px !important;
}
.pt12 {
padding-top: 12px !important;
}
.pt18 {
padding-top: 18px !important;
}
.pt24 {
padding-top: 24px !important;
}
.pt30 {
padding-top: 30px !important;
}
.pt36 {
padding-top: 36px !important;
}
.pt60 {
padding-top: 60px !important;
}
.pt120 {
padding-top: 120px !important;
}
.pt180 {
padding-top: 180px !important;
}
.pt240 {
padding-top: 240px !important;
}
.pt300 {
padding-top: 300px !important;
}
.pt360 {
padding-top: 360px !important;
}
/** @endgroup */
/**
* Apply padding on the right.
*
* @group
* @example
* pr24
* @memberof Padding
*/
.pr0 {
padding-right: 0 !important;
}
.pr3 {
padding-right: 3px !important;
}
.pr6 {
padding-right: 6px !important;
}
.pr12 {
padding-right: 12px !important;
}
.pr18 {
padding-right: 18px !important;
}
.pr24 {
padding-right: 24px !important;
}
.pr30 {
padding-right: 30px !important;
}
.pr36 {
padding-right: 36px !important;
}
.pr60 {
padding-right: 60px !important;
}
.pr120 {
padding-right: 120px !important;
}
.pr180 {
padding-right: 180px !important;
}
.pr240 {
padding-right: 240px !important;
}
.pr300 {
padding-right: 300px !important;
}
.pr360 {
padding-right: 360px !important;
}
/** @endgroup */
/**
* Apply padding on the bottom.
*
* @group
* @example
* pb24
* @memberof Padding
*/
.pb0 {
padding-bottom: 0 !important;
}
.pb3 {
padding-bottom: 3px !important;
}
.pb6 {
padding-bottom: 6px !important;
}
.pb12 {
padding-bottom: 12px !important;
}
.pb18 {
padding-bottom: 18px !important;
}
.pb24 {
padding-bottom: 24px !important;
}
.pb30 {
padding-bottom: 30px !important;
}
.pb36 {
padding-bottom: 36px !important;
}
.pb60 {
padding-bottom: 60px !important;
}
.pb120 {
padding-bottom: 120px !important;
}
.pb180 {
padding-bottom: 180px !important;
}
.pb240 {
padding-bottom: 240px !important;
}
.pb300 {
padding-bottom: 300px !important;
}
.pb360 {
padding-bottom: 360px !important;
}
/** @endgroup */
/**
* Apply padding on the left.
*
* @group
* @example
* pl24
* @memberof Padding
*/
.pl0 {
padding-left: 0 !important;
}
.pl3 {
padding-left: 3px !important;
}
.pl6 {
padding-left: 6px !important;
}
.pl12 {
padding-left: 12px !important;
}
.pl18 {
padding-left: 18px !important;
}
.pl24 {
padding-left: 24px !important;
}
.pl30 {
padding-left: 30px !important;
}
.pl36 {
padding-left: 36px !important;
}
.pl60 {
padding-left: 60px !important;
}
.pl120 {
padding-left: 120px !important;
}
.pl180 {
padding-left: 180px !important;
}
.pl240 {
padding-left: 240px !important;
}
.pl300 {
padding-left: 300px !important;
}
.pl360 {
padding-left: 360px !important;
}
/** @endgroup */
/**
* Set an element's width.
*
* In addition to numeric values, there are `w-full` and `w-auto` classes.
*
* @group
* @memberof Sizing
* @example
* w60
*/
.w0 {
width: 0 !important;
}
.w3 {
width: 3px !important;
}
.w6 {
width: 6px !important;
}
.w12 {
width: 12px !important;
}
.w18 {
width: 18px !important;
}
.w24 {
width: 24px !important;
}
.w30 {
width: 30px !important;
}
.w36 {
width: 36px !important;
}
.w60 {
width: 60px !important;
}
.w120 {
width: 120px !important;
}
.w180 {
width: 180px !important;
}
.w240 {
width: 240px !important;
}
.w300 {
width: 300px !important;
}
.w360 {
width: 360px !important;
}
.w600 {
width: 600px !important;
}
.w-full {
width: 100% !important;
}
.w-auto {
width: auto !important;
}
/** @endgroup */
/**
* Set an element's maximum width.
*
* In addition to numeric values, there are `wmax-full` and `wmax-none` classes.
*
* @group
* @memberof Sizing
* @example
* wmax6
*/
.wmax0 {
max-width: 0 !important;
}
.wmax3 {
max-width: 3px !important;
}
.wmax6 {
max-width: 6px !important;
}
.wmax12 {
max-width: 12px !important;
}
.wmax18 {
max-width: 18px !important;
}
.wmax24 {
max-width: 24px !important;
}
.wmax30 {
max-width: 30px !important;
}
.wmax36 {
max-width: 36px !important;
}
.wmax60 {
max-width: 60px !important;
}
.wmax120 {
max-width: 120px !important;
}
.wmax180 {
max-width: 180px !important;
}
.wmax240 {
max-width: 240px !important;
}
.wmax300 {
max-width: 300px !important;
}
.wmax360 {
max-width: 360px !important;
}
.wmax600 {
max-width: 600px !important;
}
.wmax-full {
max-width: 100% !important;
}
.wmax-none {
max-width: none !important;
}
/** @endgroup */
/**
* Set an element's minimum width.
*
* In addition to numeric values, there is the `wmin-full` class.
*
* @group
* @memberof Sizing
* @example
* wmin60
*/
.wmin0 {
min-width: 0 !important;
}
.wmin3 {
min-width: 3px !important;
}
.wmin6 {
min-width: 6px !important;
}
.wmin12 {
min-width: 12px !important;
}
.wmin18 {
min-width: 18px !important;
}
.wmin24 {
min-width: 24px !important;
}
.wmin30 {
min-width: 30px !important;
}
.wmin36 {
min-width: 36px !important;
}
.wmin60 {
min-width: 60px !important;
}
.wmin120 {
min-width: 120px !important;
}
.wmin180 {
min-width: 180px !important;
}
.wmin240 {
min-width: 240px !important;
}
.wmin300 {
min-width: 300px !important;
}
.wmin360 {
min-width: 360px !important;
}
.wmin600 {
min-width: 600px !important;
}
.wmin-full {
min-width: 100% !important;
}
/** @endgroup */
/**
* Set an element's height.
*
* In addition to numeric values, there are `h-full` and `h-auto` classes.
*
* @group
* @memberof Sizing
* @example
* h24
*/
.h0 {
height: 0 !important;
}
.h3 {
height: 3px !important;
}
.h6 {
height: 6px !important;
}
.h12 {
height: 12px !important;
}
.h18 {
height: 18px !important;
}
.h24 {
height: 24px !important;
}
.h30 {
height: 30px !important;
}
.h36 {
height: 36px !important;
}
.h60 {
height: 60px !important;
}
.h120 {
height: 120px !important;
}
.h180 {
height: 180px !important;
}
.h240 {
height: 240px !important;
}
.h300 {
height: 300px !important;
}
.h360 {
height: 360px !important;
}
.h600 {
height: 600px !important;
}
.h-full {
height: 100% !important;
}
.h-auto {
height: auto !important;
}
/** @endgroup */
/**
* Set an element's maximum height.
*
* In addition to numeric values, there are `hmax-full` and `hmax-none` classes.
*
* @group
* @memberof Sizing
* @example
* hmax12
*/
.hmax0 {
max-height: 0 !important;
}
.hmax3 {
max-height: 3px !important;
}
.hmax6 {
max-height: 6px !important;
}
.hmax12 {
max-height: 12px !important;
}
.hmax18 {
max-height: 18px !important;
}
.hmax24 {
max-height: 24px !important;
}
.hmax30 {
max-height: 30px !important;
}
.hmax36 {
max-height: 36px !important;
}
.hmax60 {
max-height: 60px !important;
}
.hmax120 {
max-height: 120px !important;
}
.hmax180 {
max-height: 180px !important;
}
.hmax240 {
max-height: 240px !important;
}
.hmax300 {
max-height: 300px !important;
}
.hmax360 {
max-height: 360px !important;
}
.hmax600 {
max-height: 600px !important;
}
.hmax-full {
max-height: 100% !important;
}
.hmax-none {
max-height: none !important;
}
/** @endgroup */
/**
* Set an element's minimum height.
*
* In addition to numeric values, there is the `hmin-full` class.
*
* @group
* @memberof Sizing
* @example
* hmin60
*/
.hmin0 {
min-height: 0 !important;
}
.hmin3 {
min-height: 3px !important;
}
.hmin6 {
min-height: 6px !important;
}
.hmin12 {
min-height: 12px !important;
}
.hmin18 {
min-height: 18px !important;
}
.hmin24 {
min-height: 24px !important;
}
.hmin30 {
min-height: 30px !important;
}
.hmin36 {
min-height: 36px !important;
}
.hmin60 {
min-height: 60px !important;
}
.hmin120 {
min-height: 120px !important;
}
.hmin180 {
min-height: 180px !important;
}
.hmin240 {
min-height: 240px !important;
}
.hmin300 {
min-height: 300px !important;
}
.hmin360 {
min-height: 360px !important;
}
.hmin600 {
min-height: 600px !important;
}
.hmin-full {
min-height: 100% !important;
}
/** @endgroup */
@media screen and (min-width: 640px) {
.grid--gut0-mm {
margin-left: -0;
}
.grid--gut3-mm {
margin-left: -3px;
}
.grid--gut6-mm {
margin-left: -6px;
}
.grid--gut12-mm {
margin-left: -12px;
}
.grid--gut18-mm {
margin-left: -18px;
}
.grid--gut24-mm {
margin-left: -24px;
}
.grid--gut30-mm {
margin-left: -30px;
}
.grid--gut36-mm {
margin-left: -36px;
}
.grid--gut60-mm {
margin-left: -60px;
}
.grid--gut120-mm {
margin-left: -120px;
}
.grid--gut0-mm > .col,
.grid--gut0-mm > .col-mm,
.grid--gut0-mm > .col-ml,
.grid--gut0-mm > .col-mxl {
padding-left: 0;
}
.grid--gut3-mm > .col,
.grid--gut3-mm > .col-mm,
.grid--gut3-mm > .col-ml,
.grid--gut3-mm > .col-mxl {
padding-left: 3px;
}
.grid--gut6-mm > .col,
.grid--gut6-mm > .col-mm,
.grid--gut6-mm > .col-ml,
.grid--gut6-mm > .col-mxl {
padding-left: 6px;
}
.grid--gut12-mm > .col,
.grid--gut12-mm > .col-mm,
.grid--gut12-mm > .col-ml,
.grid--gut12-mm > .col-mxl {
padding-left: 12px;
}
.grid--gut18-mm > .col,
.grid--gut18-mm > .col-mm,
.grid--gut18-mm > .col-ml,
.grid--gut18-mm > .col-mxl {
padding-left: 18px;
}
.grid--gut24-mm > .col,
.grid--gut24-mm > .col-mm,
.grid--gut24-mm > .col-ml,
.grid--gut24-mm > .col-mxl {
padding-left: 24px;
}
.grid--gut30-mm > .col,
.grid--gut30-mm > .col-mm,
.grid--gut30-mm > .col-ml,
.grid--gut30-mm > .col-mxl {
padding-left: 30px;
}
.grid--gut36-mm > .col,
.grid--gut36-mm > .col-mm,
.grid--gut36-mm > .col-ml,
.grid--gut36-mm > .col-mxl {
padding-left: 36px;
}
.grid--gut60-mm > .col,
.grid--gut60-mm > .col-mm,
.grid--gut60-mm > .col-ml,
.grid--gut60-mm > .col-mxl {
padding-left: 60px;
}
.grid--gut120-mm > .col,
.grid--gut120-mm > .col-mm,
.grid--gut120-mm > .col-ml,
.grid--gut120-mm > .col-mxl {
padding-left: 120px;
}
.my-neg1-mm {
margin-top: -1px !important;
margin-bottom: -1px !important;
}
.my-neg2-mm {
margin-top: -2px !important;
margin-bottom: -2px !important;
}
.my-neg3-mm {
margin-top: -3px !important;
margin-bottom: -3px !important;
}
.my-neg6-mm {
margin-top: -6px !important;
margin-bottom: -6px !important;
}
.my-neg12-mm {
margin-top: -12px !important;
margin-bottom: -12px !important;
}
.my-neg18-mm {
margin-top: -18px !important;
margin-bottom: -18px !important;
}
.my-neg24-mm {
margin-top: -24px !important;
margin-bottom: -24px !important;
}
.my-neg30-mm {
margin-top: -30px !important;
margin-bottom: -30px !important;
}
.my-neg36-mm {
margin-top: -36px !important;
margin-bottom: -36px !important;
}
.my-neg60-mm {
margin-top: -60px !important;
margin-bottom: -60px !important;
}
.my-neg120-mm {
margin-top: -120px !important;
margin-bottom: -120px !important;
}
.my-neg180-mm {
margin-top: -180px !important;
margin-bottom: -180px !important;
}
.my-neg240-mm {
margin-top: -240px !important;
margin-bottom: -240px !important;
}
.my-neg300-mm {
margin-top: -300px !important;
margin-bottom: -300px !important;
}
.my-neg360-mm {
margin-top: -360px !important;
margin-bottom: -360px !important;
}
.my0-mm {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.my3-mm {
margin-top: 3px !important;
margin-bottom: 3px !important;
}
.my6-mm {
margin-top: 6px !important;
margin-bottom: 6px !important;
}
.my12-mm {
margin-top: 12px !important;
margin-bottom: 12px !important;
}
.my18-mm {
margin-top: 18px !important;
margin-bottom: 18px !important;
}
.my24-mm {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.my30-mm {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.my36-mm {
margin-top: 36px !important;
margin-bottom: 36px !important;
}
.my60-mm {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.my120-mm {
margin-top: 120px !important;
margin-bottom: 120px !important;
}
.my180-mm {
margin-top: 180px !important;
margin-bottom: 180px !important;
}
.my240-mm {
margin-top: 240px !important;
margin-bottom: 240px !important;
}
.my300-mm {
margin-top: 300px !important;
margin-bottom: 300px !important;
}
.my360-mm {
margin-top: 360px !important;
margin-bottom: 360px !important;
}
.mx-neg1-mm {
margin-left: -1px !important;
margin-right: -1px !important;
}
.mx-neg2-mm {
margin-left: -2px !important;
margin-right: -2px !important;
}
.mx-neg3-mm {
margin-left: -3px !important;
margin-right: -3px !important;
}
.mx-neg6-mm {
margin-left: -6px !important;
margin-right: -6px !important;
}
.mx-neg12-mm {
margin-left: -12px !important;
margin-right: -12px !important;
}
.mx-neg18-mm {
margin-left: -18px !important;
margin-right: -18px !important;
}
.mx-neg24-mm {
margin-left: -24px !important;
margin-right: -24px !important;
}
.mx-neg30-mm {
margin-left: -30px !important;
margin-right: -30px !important;
}
.mx-neg36-mm {
margin-left: -36px !important;
margin-right: -36px !important;
}
.mx-neg60-mm {
margin-left: -60px !important;
margin-right: -60px !important;
}
.mx-neg120-mm {
margin-left: -120px !important;
margin-right: -120px !important;
}
.mx-neg180-mm {
margin-left: -180px !important;
margin-right: -180px !important;
}
.mx-neg240-mm {
margin-left: -240px !important;
margin-right: -240px !important;
}
.mx-neg300-mm {
margin-left: -300px !important;
margin-right: -300px !important;
}
.mx-neg360-mm {
margin-left: -360px !important;
margin-right: -360px !important;
}
.mx0-mm {
margin-left: 0 !important;
margin-right: 0 !important;
}
.mx3-mm {
margin-left: 3px !important;
margin-right: 3px !important;
}
.mx6-mm {
margin-left: 6px !important;
margin-right: 6px !important;
}
.mx12-mm {
margin-left: 12px !important;
margin-right: 12px !important;
}
.mx18-mm {
margin-left: 18px !important;
margin-right: 18px !important;
}
.mx24-mm {
margin-left: 24px !important;
margin-right: 24px !important;
}
.mx30-mm {
margin-left: 30px !important;
margin-right: 30px !important;
}
.mx36-mm {
margin-left: 36px !important;
margin-right: 36px !important;
}
.mx60-mm {
margin-left: 60px !important;
margin-right: 60px !important;
}
.mx120-mm {
margin-left: 120px !important;
margin-right: 120px !important;
}
.mx180-mm {
margin-left: 180px !important;
margin-right: 180px !important;
}
.mx240-mm {
margin-left: 240px !important;
margin-right: 240px !important;
}
.mx300-mm {
margin-left: 300px !important;
margin-right: 300px !important;
}
.mx360-mm {
margin-left: 360px !important;
margin-right: 360px !important;
}
.mt-neg1-mm {
margin-top: -1px !important;
}
.mt-neg2-mm {
margin-top: -2px !important;
}
.mt-neg3-mm {
margin-top: -3px !important;
}
.mt-neg6-mm {
margin-top: -6px !important;
}
.mt-neg12-mm {
margin-top: -12px !important;
}
.mt-neg18-mm {
margin-top: -18px !important;
}
.mt-neg24-mm {
margin-top: -24px !important;
}
.mt-neg30-mm {
margin-top: -30px !important;
}
.mt-neg36-mm {
margin-top: -36px !important;
}
.mt-neg60-mm {
margin-top: -60px !important;
}
.mt-neg120-mm {
margin-top: -120px !important;
}
.mt-neg180-mm {
margin-top: -180px !important;
}
.mt-neg240-mm {
margin-top: -240px !important;
}
.mt-neg300-mm {
margin-top: -300px !important;
}
.mt-neg360-mm {
margin-top: -360px !important;
}
.mt0-mm {
margin-top: 0 !important;
}
.mt3-mm {
margin-top: 3px !important;
}
.mt6-mm {
margin-top: 6px !important;
}
.mt12-mm {
margin-top: 12px !important;
}
.mt18-mm {
margin-top: 18px !important;
}
.mt24-mm {
margin-top: 24px !important;
}
.mt30-mm {
margin-top: 30px !important;
}
.mt36-mm {
margin-top: 36px !important;
}
.mt60-mm {
margin-top: 60px !important;
}
.mt120-mm {
margin-top: 120px !important;
}
.mt180-mm {
margin-top: 180px !important;
}
.mt240-mm {
margin-top: 240px !important;
}
.mt300-mm {
margin-top: 300px !important;
}
.mt360-mm {
margin-top: 360px !important;
}
.mr-neg1-mm {
margin-right: -1px !important;
}
.mr-neg2-mm {
margin-right: -2px !important;
}
.mr-neg3-mm {
margin-right: -3px !important;
}
.mr-neg6-mm {
margin-right: -6px !important;
}
.mr-neg12-mm {
margin-right: -12px !important;
}
.mr-neg18-mm {
margin-right: -18px !important;
}
.mr-neg24-mm {
margin-right: -24px !important;
}
.mr-neg30-mm {
margin-right: -30px !important;
}
.mr-neg36-mm {
margin-right: -36px !important;
}
.mr-neg60-mm {
margin-right: -60px !important;
}
.mr-neg120-mm {
margin-right: -120px !important;
}
.mr-neg180-mm {
margin-right: -180px !important;
}
.mr-neg240-mm {
margin-right: -240px !important;
}
.mr-neg300-mm {
margin-right: -300px !important;
}
.mr-neg360-mm {
margin-right: -360px !important;
}
.mr0-mm {
margin-right: 0 !important;
}
.mr3-mm {
margin-right: 3px !important;
}
.mr6-mm {
margin-right: 6px !important;
}
.mr12-mm {
margin-right: 12px !important;
}
.mr18-mm {
margin-right: 18px !important;
}
.mr24-mm {
margin-right: 24px !important;
}
.mr30-mm {
margin-right: 30px !important;
}
.mr36-mm {
margin-right: 36px !important;
}
.mr60-mm {
margin-right: 60px !important;
}
.mr120-mm {
margin-right: 120px !important;
}
.mr180-mm {
margin-right: 180px !important;
}
.mr240-mm {
margin-right: 240px !important;
}
.mr300-mm {
margin-right: 300px !important;
}
.mr360-mm {
margin-right: 360px !important;
}
.mb-neg1-mm {
margin-bottom: -1px !important;
}
.mb-neg2-mm {
margin-bottom: -2px !important;
}
.mb-neg3-mm {
margin-bottom: -3px !important;
}
.mb-neg6-mm {
margin-bottom: -6px !important;
}
.mb-neg12-mm {
margin-bottom: -12px !important;
}
.mb-neg18-mm {
margin-bottom: -18px !important;
}
.mb-neg24-mm {
margin-bottom: -24px !important;
}
.mb-neg30-mm {
margin-bottom: -30px !important;
}
.mb-neg36-mm {
margin-bottom: -36px !important;
}
.mb-neg60-mm {
margin-bottom: -60px !important;
}
.mb-neg120-mm {
margin-bottom: -120px !important;
}
.mb-neg180-mm {
margin-bottom: -180px !important;
}
.mb-neg240-mm {
margin-bottom: -240px !important;
}
.mb-neg300-mm {
margin-bottom: -300px !important;
}
.mb-neg360-mm {
margin-bottom: -360px !important;
}
.mb0-mm {
margin-bottom: 0 !important;
}
.mb3-mm {
margin-bottom: 3px !important;
}
.mb6-mm {
margin-bottom: 6px !important;
}
.mb12-mm {
margin-bottom: 12px !important;
}
.mb18-mm {
margin-bottom: 18px !important;
}
.mb24-mm {
margin-bottom: 24px !important;
}
.mb30-mm {
margin-bottom: 30px !important;
}
.mb36-mm {
margin-bottom: 36px !important;
}
.mb60-mm {
margin-bottom: 60px !important;
}
.mb120-mm {
margin-bottom: 120px !important;
}
.mb180-mm {
margin-bottom: 180px !important;
}
.mb240-mm {
margin-bottom: 240px !important;
}
.mb300-mm {
margin-bottom: 300px !important;
}
.mb360-mm {
margin-bottom: 360px !important;
}
.ml-neg1-mm {
margin-left: -1px !important;
}
.ml-neg2-mm {
margin-left: -2px !important;
}
.ml-neg3-mm {
margin-left: -3px !important;
}
.ml-neg6-mm {
margin-left: -6px !important;
}
.ml-neg12-mm {
margin-left: -12px !important;
}
.ml-neg18-mm {
margin-left: -18px !important;
}
.ml-neg24-mm {
margin-left: -24px !important;
}
.ml-neg30-mm {
margin-left: -30px !important;
}
.ml-neg36-mm {
margin-left: -36px !important;
}
.ml-neg60-mm {
margin-left: -60px !important;
}
.ml-neg120-mm {
margin-left: -120px !important;
}
.ml-neg180-mm {
margin-left: -180px !important;
}
.ml-neg240-mm {
margin-left: -240px !important;
}
.ml-neg300-mm {
margin-left: -300px !important;
}
.ml-neg360-mm {
margin-left: -360px !important;
}
.ml0-mm {
margin-left: 0 !important;
}
.ml3-mm {
margin-left: 3px !important;
}
.ml6-mm {
margin-left: 6px !important;
}
.ml12-mm {
margin-left: 12px !important;
}
.ml18-mm {
margin-left: 18px !important;
}
.ml24-mm {
margin-left: 24px !important;
}
.ml30-mm {
margin-left: 30px !important;
}
.ml36-mm {
margin-left: 36px !important;
}
.ml60-mm {
margin-left: 60px !important;
}
.ml120-mm {
margin-left: 120px !important;
}
.ml180-mm {
margin-left: 180px !important;
}
.ml240-mm {
margin-left: 240px !important;
}
.ml300-mm {
margin-left: 300px !important;
}
.ml360-mm {
margin-left: 360px !important;
}
.py0-mm {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.py3-mm {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.py6-mm {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.py12-mm {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.py18-mm {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
.py24-mm {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.py30-mm {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.py36-mm {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
.py60-mm {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.py120-mm {
padding-top: 120px !important;
padding-bottom: 120px !important;
}
.py180-mm {
padding-top: 180px !important;
padding-bottom: 180px !important;
}
.py240-mm {
padding-top: 240px !important;
padding-bottom: 240px !important;
}
.py300-mm {
padding-top: 300px !important;
padding-bottom: 300px !important;
}
.py360-mm {
padding-top: 360px !important;
padding-bottom: 360px !important;
}
.px0-mm {
padding-left: 0 !important;
padding-right: 0 !important;
}
.px3-mm {
padding-left: 3px !important;
padding-right: 3px !important;
}
.px6-mm {
padding-left: 6px !important;
padding-right: 6px !important;
}
.px12-mm {
padding-left: 12px !important;
padding-right: 12px !important;
}
.px18-mm {
padding-left: 18px !important;
padding-right: 18px !important;
}
.px24-mm {
padding-left: 24px !important;
padding-right: 24px !important;
}
.px30-mm {
padding-left: 30px !important;
padding-right: 30px !important;
}
.px36-mm {
padding-left: 36px !important;
padding-right: 36px !important;
}
.px60-mm {
padding-left: 60px !important;
padding-right: 60px !important;
}
.px120-mm {
padding-left: 120px !important;
padding-right: 120px !important;
}
.px180-mm {
padding-left: 180px !important;
padding-right: 180px !important;
}
.px240-mm {
padding-left: 240px !important;
padding-right: 240px !important;
}
.px300-mm {
padding-left: 300px !important;
padding-right: 300px !important;
}
.px360-mm {
padding-left: 360px !important;
padding-right: 360px !important;
}
.pt0-mm {
padding-top: 0 !important;
}
.pt3-mm {
padding-top: 3px !important;
}
.pt6-mm {
padding-top: 6px !important;
}
.pt12-mm {
padding-top: 12px !important;
}
.pt18-mm {
padding-top: 18px !important;
}
.pt24-mm {
padding-top: 24px !important;
}
.pt30-mm {
padding-top: 30px !important;
}
.pt36-mm {
padding-top: 36px !important;
}
.pt60-mm {
padding-top: 60px !important;
}
.pt120-mm {
padding-top: 120px !important;
}
.pt180-mm {
padding-top: 180px !important;
}
.pt240-mm {
padding-top: 240px !important;
}
.pt300-mm {
padding-top: 300px !important;
}
.pt360-mm {
padding-top: 360px !important;
}
.pr0-mm {
padding-right: 0 !important;
}
.pr3-mm {
padding-right: 3px !important;
}
.pr6-mm {
padding-right: 6px !important;
}
.pr12-mm {
padding-right: 12px !important;
}
.pr18-mm {
padding-right: 18px !important;
}
.pr24-mm {
padding-right: 24px !important;
}
.pr30-mm {
padding-right: 30px !important;
}
.pr36-mm {
padding-right: 36px !important;
}
.pr60-mm {
padding-right: 60px !important;
}
.pr120-mm {
padding-right: 120px !important;
}
.pr180-mm {
padding-right: 180px !important;
}
.pr240-mm {
padding-right: 240px !important;
}
.pr300-mm {
padding-right: 300px !important;
}
.pr360-mm {
padding-right: 360px !important;
}
.pb0-mm {
padding-bottom: 0 !important;
}
.pb3-mm {
padding-bottom: 3px !important;
}
.pb6-mm {
padding-bottom: 6px !important;
}
.pb12-mm {
padding-bottom: 12px !important;
}
.pb18-mm {
padding-bottom: 18px !important;
}
.pb24-mm {
padding-bottom: 24px !important;
}
.pb30-mm {
padding-bottom: 30px !important;
}
.pb36-mm {
padding-bottom: 36px !important;
}
.pb60-mm {
padding-bottom: 60px !important;
}
.pb120-mm {
padding-bottom: 120px !important;
}
.pb180-mm {
padding-bottom: 180px !important;
}
.pb240-mm {
padding-bottom: 240px !important;
}
.pb300-mm {
padding-bottom: 300px !important;
}
.pb360-mm {
padding-bottom: 360px !important;
}
.pl0-mm {
padding-left: 0 !important;
}
.pl3-mm {
padding-left: 3px !important;
}
.pl6-mm {
padding-left: 6px !important;
}
.pl12-mm {
padding-left: 12px !important;
}
.pl18-mm {
padding-left: 18px !important;
}
.pl24-mm {
padding-left: 24px !important;
}
.pl30-mm {
padding-left: 30px !important;
}
.pl36-mm {
padding-left: 36px !important;
}
.pl60-mm {
padding-left: 60px !important;
}
.pl120-mm {
padding-left: 120px !important;
}
.pl180-mm {
padding-left: 180px !important;
}
.pl240-mm {
padding-left: 240px !important;
}
.pl300-mm {
padding-left: 300px !important;
}
.pl360-mm {
padding-left: 360px !important;
}
.w0-mm {
width: 0 !important;
}
.w3-mm {
width: 3px !important;
}
.w6-mm {
width: 6px !important;
}
.w12-mm {
width: 12px !important;
}
.w18-mm {
width: 18px !important;
}
.w24-mm {
width: 24px !important;
}
.w30-mm {
width: 30px !important;
}
.w36-mm {
width: 36px !important;
}
.w60-mm {
width: 60px !important;
}
.w120-mm {
width: 120px !important;
}
.w180-mm {
width: 180px !important;
}
.w240-mm {
width: 240px !important;
}
.w300-mm {
width: 300px !important;
}
.w360-mm {
width: 360px !important;
}
.w600-mm {
width: 600px !important;
}
.w-full-mm {
width: 100% !important;
}
.w-auto-mm {
width: auto !important;
}
.wmax0-mm {
max-width: 0 !important;
}
.wmax3-mm {
max-width: 3px !important;
}
.wmax6-mm {
max-width: 6px !important;
}
.wmax12-mm {
max-width: 12px !important;
}
.wmax18-mm {
max-width: 18px !important;
}
.wmax24-mm {
max-width: 24px !important;
}
.wmax30-mm {
max-width: 30px !important;
}
.wmax36-mm {
max-width: 36px !important;
}
.wmax60-mm {
max-width: 60px !important;
}
.wmax120-mm {
max-width: 120px !important;
}
.wmax180-mm {
max-width: 180px !important;
}
.wmax240-mm {
max-width: 240px !important;
}
.wmax300-mm {
max-width: 300px !important;
}
.wmax360-mm {
max-width: 360px !important;
}
.wmax600-mm {
max-width: 600px !important;
}
.wmax-full-mm {
max-width: 100% !important;
}
.wmax-none-mm {
max-width: none !important;
}
.wmin0-mm {
min-width: 0 !important;
}
.wmin3-mm {
min-width: 3px !important;
}
.wmin6-mm {
min-width: 6px !important;
}
.wmin12-mm {
min-width: 12px !important;
}
.wmin18-mm {
min-width: 18px !important;
}
.wmin24-mm {
min-width: 24px !important;
}
.wmin30-mm {
min-width: 30px !important;
}
.wmin36-mm {
min-width: 36px !important;
}
.wmin60-mm {
min-width: 60px !important;
}
.wmin120-mm {
min-width: 120px !important;
}
.wmin180-mm {
min-width: 180px !important;
}
.wmin240-mm {
min-width: 240px !important;
}
.wmin300-mm {
min-width: 300px !important;
}
.wmin360-mm {
min-width: 360px !important;
}
.wmin600-mm {
min-width: 600px !important;
}
.wmin-full-mm {
min-width: 100% !important;
}
.h0-mm {
height: 0 !important;
}
.h3-mm {
height: 3px !important;
}
.h6-mm {
height: 6px !important;
}
.h12-mm {
height: 12px !important;
}
.h18-mm {
height: 18px !important;
}
.h24-mm {
height: 24px !important;
}
.h30-mm {
height: 30px !important;
}
.h36-mm {
height: 36px !important;
}
.h60-mm {
height: 60px !important;
}
.h120-mm {
height: 120px !important;
}
.h180-mm {
height: 180px !important;
}
.h240-mm {
height: 240px !important;
}
.h300-mm {
height: 300px !important;
}
.h360-mm {
height: 360px !important;
}
.h600-mm {
height: 600px !important;
}
.h-full-mm {
height: 100% !important;
}
.h-auto-mm {
height: auto !important;
}
.hmax0-mm {
max-height: 0 !important;
}
.hmax3-mm {
max-height: 3px !important;
}
.hmax6-mm {
max-height: 6px !important;
}
.hmax12-mm {
max-height: 12px !important;
}
.hmax18-mm {
max-height: 18px !important;
}
.hmax24-mm {
max-height: 24px !important;
}
.hmax30-mm {
max-height: 30px !important;
}
.hmax36-mm {
max-height: 36px !important;
}
.hmax60-mm {
max-height: 60px !important;
}
.hmax120-mm {
max-height: 120px !important;
}
.hmax180-mm {
max-height: 180px !important;
}
.hmax240-mm {
max-height: 240px !important;
}
.hmax300-mm {
max-height: 300px !important;
}
.hmax360-mm {
max-height: 360px !important;
}
.hmax600-mm {
max-height: 600px !important;
}
.hmax-full-mm {
max-height: 100% !important;
}
.hmax-none-mm {
max-height: none !important;
}
.hmin0-mm {
min-height: 0 !important;
}
.hmin3-mm {
min-height: 3px !important;
}
.hmin6-mm {
min-height: 6px !important;
}
.hmin12-mm {
min-height: 12px !important;
}
.hmin18-mm {
min-height: 18px !important;
}
.hmin24-mm {
min-height: 24px !important;
}
.hmin30-mm {
min-height: 30px !important;
}
.hmin36-mm {
min-height: 36px !important;
}
.hmin60-mm {
min-height: 60px !important;
}
.hmin120-mm {
min-height: 120px !important;
}
.hmin180-mm {
min-height: 180px !important;
}
.hmin240-mm {
min-height: 240px !important;
}
.hmin300-mm {
min-height: 300px !important;
}
.hmin360-mm {
min-height: 360px !important;
}
.hmin600-mm {
min-height: 600px !important;
}
.hmin-full-mm {
min-height: 100% !important;
}
}
@media screen and (min-width: 800px) {
.grid--gut0-ml {
margin-left: -0;
}
.grid--gut3-ml {
margin-left: -3px;
}
.grid--gut6-ml {
margin-left: -6px;
}
.grid--gut12-ml {
margin-left: -12px;
}
.grid--gut18-ml {
margin-left: -18px;
}
.grid--gut24-ml {
margin-left: -24px;
}
.grid--gut30-ml {
margin-left: -30px;
}
.grid--gut36-ml {
margin-left: -36px;
}
.grid--gut60-ml {
margin-left: -60px;
}
.grid--gut120-ml {
margin-left: -120px;
}
.grid--gut0-ml > .col,
.grid--gut0-ml > .col-mm,
.grid--gut0-ml > .col-ml,
.grid--gut0-ml > .col-mxl {
padding-left: 0;
}
.grid--gut3-ml > .col,
.grid--gut3-ml > .col-mm,
.grid--gut3-ml > .col-ml,
.grid--gut3-ml > .col-mxl {
padding-left: 3px;
}
.grid--gut6-ml > .col,
.grid--gut6-ml > .col-mm,
.grid--gut6-ml > .col-ml,
.grid--gut6-ml > .col-mxl {
padding-left: 6px;
}
.grid--gut12-ml > .col,
.grid--gut12-ml > .col-mm,
.grid--gut12-ml > .col-ml,
.grid--gut12-ml > .col-mxl {
padding-left: 12px;
}
.grid--gut18-ml > .col,
.grid--gut18-ml > .col-mm,
.grid--gut18-ml > .col-ml,
.grid--gut18-ml > .col-mxl {
padding-left: 18px;
}
.grid--gut24-ml > .col,
.grid--gut24-ml > .col-mm,
.grid--gut24-ml > .col-ml,
.grid--gut24-ml > .col-mxl {
padding-left: 24px;
}
.grid--gut30-ml > .col,
.grid--gut30-ml > .col-mm,
.grid--gut30-ml > .col-ml,
.grid--gut30-ml > .col-mxl {
padding-left: 30px;
}
.grid--gut36-ml > .col,
.grid--gut36-ml > .col-mm,
.grid--gut36-ml > .col-ml,
.grid--gut36-ml > .col-mxl {
padding-left: 36px;
}
.grid--gut60-ml > .col,
.grid--gut60-ml > .col-mm,
.grid--gut60-ml > .col-ml,
.grid--gut60-ml > .col-mxl {
padding-left: 60px;
}
.grid--gut120-ml > .col,
.grid--gut120-ml > .col-mm,
.grid--gut120-ml > .col-ml,
.grid--gut120-ml > .col-mxl {
padding-left: 120px;
}
.my-neg1-ml {
margin-top: -1px !important;
margin-bottom: -1px !important;
}
.my-neg2-ml {
margin-top: -2px !important;
margin-bottom: -2px !important;
}
.my-neg3-ml {
margin-top: -3px !important;
margin-bottom: -3px !important;
}
.my-neg6-ml {
margin-top: -6px !important;
margin-bottom: -6px !important;
}
.my-neg12-ml {
margin-top: -12px !important;
margin-bottom: -12px !important;
}
.my-neg18-ml {
margin-top: -18px !important;
margin-bottom: -18px !important;
}
.my-neg24-ml {
margin-top: -24px !important;
margin-bottom: -24px !important;
}
.my-neg30-ml {
margin-top: -30px !important;
margin-bottom: -30px !important;
}
.my-neg36-ml {
margin-top: -36px !important;
margin-bottom: -36px !important;
}
.my-neg60-ml {
margin-top: -60px !important;
margin-bottom: -60px !important;
}
.my-neg120-ml {
margin-top: -120px !important;
margin-bottom: -120px !important;
}
.my-neg180-ml {
margin-top: -180px !important;
margin-bottom: -180px !important;
}
.my-neg240-ml {
margin-top: -240px !important;
margin-bottom: -240px !important;
}
.my-neg300-ml {
margin-top: -300px !important;
margin-bottom: -300px !important;
}
.my-neg360-ml {
margin-top: -360px !important;
margin-bottom: -360px !important;
}
.my0-ml {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.my3-ml {
margin-top: 3px !important;
margin-bottom: 3px !important;
}
.my6-ml {
margin-top: 6px !important;
margin-bottom: 6px !important;
}
.my12-ml {
margin-top: 12px !important;
margin-bottom: 12px !important;
}
.my18-ml {
margin-top: 18px !important;
margin-bottom: 18px !important;
}
.my24-ml {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.my30-ml {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.my36-ml {
margin-top: 36px !important;
margin-bottom: 36px !important;
}
.my60-ml {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.my120-ml {
margin-top: 120px !important;
margin-bottom: 120px !important;
}
.my180-ml {
margin-top: 180px !important;
margin-bottom: 180px !important;
}
.my240-ml {
margin-top: 240px !important;
margin-bottom: 240px !important;
}
.my300-ml {
margin-top: 300px !important;
margin-bottom: 300px !important;
}
.my360-ml {
margin-top: 360px !important;
margin-bottom: 360px !important;
}
.mx-neg1-ml {
margin-left: -1px !important;
margin-right: -1px !important;
}
.mx-neg2-ml {
margin-left: -2px !important;
margin-right: -2px !important;
}
.mx-neg3-ml {
margin-left: -3px !important;
margin-right: -3px !important;
}
.mx-neg6-ml {
margin-left: -6px !important;
margin-right: -6px !important;
}
.mx-neg12-ml {
margin-left: -12px !important;
margin-right: -12px !important;
}
.mx-neg18-ml {
margin-left: -18px !important;
margin-right: -18px !important;
}
.mx-neg24-ml {
margin-left: -24px !important;
margin-right: -24px !important;
}
.mx-neg30-ml {
margin-left: -30px !important;
margin-right: -30px !important;
}
.mx-neg36-ml {
margin-left: -36px !important;
margin-right: -36px !important;
}
.mx-neg60-ml {
margin-left: -60px !important;
margin-right: -60px !important;
}
.mx-neg120-ml {
margin-left: -120px !important;
margin-right: -120px !important;
}
.mx-neg180-ml {
margin-left: -180px !important;
margin-right: -180px !important;
}
.mx-neg240-ml {
margin-left: -240px !important;
margin-right: -240px !important;
}
.mx-neg300-ml {
margin-left: -300px !important;
margin-right: -300px !important;
}
.mx-neg360-ml {
margin-left: -360px !important;
margin-right: -360px !important;
}
.mx0-ml {
margin-left: 0 !important;
margin-right: 0 !important;
}
.mx3-ml {
margin-left: 3px !important;
margin-right: 3px !important;
}
.mx6-ml {
margin-left: 6px !important;
margin-right: 6px !important;
}
.mx12-ml {
margin-left: 12px !important;
margin-right: 12px !important;
}
.mx18-ml {
margin-left: 18px !important;
margin-right: 18px !important;
}
.mx24-ml {
margin-left: 24px !important;
margin-right: 24px !important;
}
.mx30-ml {
margin-left: 30px !important;
margin-right: 30px !important;
}
.mx36-ml {
margin-left: 36px !important;
margin-right: 36px !important;
}
.mx60-ml {
margin-left: 60px !important;
margin-right: 60px !important;
}
.mx120-ml {
margin-left: 120px !important;
margin-right: 120px !important;
}
.mx180-ml {
margin-left: 180px !important;
margin-right: 180px !important;
}
.mx240-ml {
margin-left: 240px !important;
margin-right: 240px !important;
}
.mx300-ml {
margin-left: 300px !important;
margin-right: 300px !important;
}
.mx360-ml {
margin-left: 360px !important;
margin-right: 360px !important;
}
.mt-neg1-ml {
margin-top: -1px !important;
}
.mt-neg2-ml {
margin-top: -2px !important;
}
.mt-neg3-ml {
margin-top: -3px !important;
}
.mt-neg6-ml {
margin-top: -6px !important;
}
.mt-neg12-ml {
margin-top: -12px !important;
}
.mt-neg18-ml {
margin-top: -18px !important;
}
.mt-neg24-ml {
margin-top: -24px !important;
}
.mt-neg30-ml {
margin-top: -30px !important;
}
.mt-neg36-ml {
margin-top: -36px !important;
}
.mt-neg60-ml {
margin-top: -60px !important;
}
.mt-neg120-ml {
margin-top: -120px !important;
}
.mt-neg180-ml {
margin-top: -180px !important;
}
.mt-neg240-ml {
margin-top: -240px !important;
}
.mt-neg300-ml {
margin-top: -300px !important;
}
.mt-neg360-ml {
margin-top: -360px !important;
}
.mt0-ml {
margin-top: 0 !important;
}
.mt3-ml {
margin-top: 3px !important;
}
.mt6-ml {
margin-top: 6px !important;
}
.mt12-ml {
margin-top: 12px !important;
}
.mt18-ml {
margin-top: 18px !important;
}
.mt24-ml {
margin-top: 24px !important;
}
.mt30-ml {
margin-top: 30px !important;
}
.mt36-ml {
margin-top: 36px !important;
}
.mt60-ml {
margin-top: 60px !important;
}
.mt120-ml {
margin-top: 120px !important;
}
.mt180-ml {
margin-top: 180px !important;
}
.mt240-ml {
margin-top: 240px !important;
}
.mt300-ml {
margin-top: 300px !important;
}
.mt360-ml {
margin-top: 360px !important;
}
.mr-neg1-ml {
margin-right: -1px !important;
}
.mr-neg2-ml {
margin-right: -2px !important;
}
.mr-neg3-ml {
margin-right: -3px !important;
}
.mr-neg6-ml {
margin-right: -6px !important;
}
.mr-neg12-ml {
margin-right: -12px !important;
}
.mr-neg18-ml {
margin-right: -18px !important;
}
.mr-neg24-ml {
margin-right: -24px !important;
}
.mr-neg30-ml {
margin-right: -30px !important;
}
.mr-neg36-ml {
margin-right: -36px !important;
}
.mr-neg60-ml {
margin-right: -60px !important;
}
.mr-neg120-ml {
margin-right: -120px !important;
}
.mr-neg180-ml {
margin-right: -180px !important;
}
.mr-neg240-ml {
margin-right: -240px !important;
}
.mr-neg300-ml {
margin-right: -300px !important;
}
.mr-neg360-ml {
margin-right: -360px !important;
}
.mr0-ml {
margin-right: 0 !important;
}
.mr3-ml {
margin-right: 3px !important;
}
.mr6-ml {
margin-right: 6px !important;
}
.mr12-ml {
margin-right: 12px !important;
}
.mr18-ml {
margin-right: 18px !important;
}
.mr24-ml {
margin-right: 24px !important;
}
.mr30-ml {
margin-right: 30px !important;
}
.mr36-ml {
margin-right: 36px !important;
}
.mr60-ml {
margin-right: 60px !important;
}
.mr120-ml {
margin-right: 120px !important;
}
.mr180-ml {
margin-right: 180px !important;
}
.mr240-ml {
margin-right: 240px !important;
}
.mr300-ml {
margin-right: 300px !important;
}
.mr360-ml {
margin-right: 360px !important;
}
.mb-neg1-ml {
margin-bottom: -1px !important;
}
.mb-neg2-ml {
margin-bottom: -2px !important;
}
.mb-neg3-ml {
margin-bottom: -3px !important;
}
.mb-neg6-ml {
margin-bottom: -6px !important;
}
.mb-neg12-ml {
margin-bottom: -12px !important;
}
.mb-neg18-ml {
margin-bottom: -18px !important;
}
.mb-neg24-ml {
margin-bottom: -24px !important;
}
.mb-neg30-ml {
margin-bottom: -30px !important;
}
.mb-neg36-ml {
margin-bottom: -36px !important;
}
.mb-neg60-ml {
margin-bottom: -60px !important;
}
.mb-neg120-ml {
margin-bottom: -120px !important;
}
.mb-neg180-ml {
margin-bottom: -180px !important;
}
.mb-neg240-ml {
margin-bottom: -240px !important;
}
.mb-neg300-ml {
margin-bottom: -300px !important;
}
.mb-neg360-ml {
margin-bottom: -360px !important;
}
.mb0-ml {
margin-bottom: 0 !important;
}
.mb3-ml {
margin-bottom: 3px !important;
}
.mb6-ml {
margin-bottom: 6px !important;
}
.mb12-ml {
margin-bottom: 12px !important;
}
.mb18-ml {
margin-bottom: 18px !important;
}
.mb24-ml {
margin-bottom: 24px !important;
}
.mb30-ml {
margin-bottom: 30px !important;
}
.mb36-ml {
margin-bottom: 36px !important;
}
.mb60-ml {
margin-bottom: 60px !important;
}
.mb120-ml {
margin-bottom: 120px !important;
}
.mb180-ml {
margin-bottom: 180px !important;
}
.mb240-ml {
margin-bottom: 240px !important;
}
.mb300-ml {
margin-bottom: 300px !important;
}
.mb360-ml {
margin-bottom: 360px !important;
}
.ml-neg1-ml {
margin-left: -1px !important;
}
.ml-neg2-ml {
margin-left: -2px !important;
}
.ml-neg3-ml {
margin-left: -3px !important;
}
.ml-neg6-ml {
margin-left: -6px !important;
}
.ml-neg12-ml {
margin-left: -12px !important;
}
.ml-neg18-ml {
margin-left: -18px !important;
}
.ml-neg24-ml {
margin-left: -24px !important;
}
.ml-neg30-ml {
margin-left: -30px !important;
}
.ml-neg36-ml {
margin-left: -36px !important;
}
.ml-neg60-ml {
margin-left: -60px !important;
}
.ml-neg120-ml {
margin-left: -120px !important;
}
.ml-neg180-ml {
margin-left: -180px !important;
}
.ml-neg240-ml {
margin-left: -240px !important;
}
.ml-neg300-ml {
margin-left: -300px !important;
}
.ml-neg360-ml {
margin-left: -360px !important;
}
.ml0-ml {
margin-left: 0 !important;
}
.ml3-ml {
margin-left: 3px !important;
}
.ml6-ml {
margin-left: 6px !important;
}
.ml12-ml {
margin-left: 12px !important;
}
.ml18-ml {
margin-left: 18px !important;
}
.ml24-ml {
margin-left: 24px !important;
}
.ml30-ml {
margin-left: 30px !important;
}
.ml36-ml {
margin-left: 36px !important;
}
.ml60-ml {
margin-left: 60px !important;
}
.ml120-ml {
margin-left: 120px !important;
}
.ml180-ml {
margin-left: 180px !important;
}
.ml240-ml {
margin-left: 240px !important;
}
.ml300-ml {
margin-left: 300px !important;
}
.ml360-ml {
margin-left: 360px !important;
}
.py0-ml {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.py3-ml {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.py6-ml {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.py12-ml {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.py18-ml {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
.py24-ml {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.py30-ml {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.py36-ml {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
.py60-ml {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.py120-ml {
padding-top: 120px !important;
padding-bottom: 120px !important;
}
.py180-ml {
padding-top: 180px !important;
padding-bottom: 180px !important;
}
.py240-ml {
padding-top: 240px !important;
padding-bottom: 240px !important;
}
.py300-ml {
padding-top: 300px !important;
padding-bottom: 300px !important;
}
.py360-ml {
padding-top: 360px !important;
padding-bottom: 360px !important;
}
.px0-ml {
padding-left: 0 !important;
padding-right: 0 !important;
}
.px3-ml {
padding-left: 3px !important;
padding-right: 3px !important;
}
.px6-ml {
padding-left: 6px !important;
padding-right: 6px !important;
}
.px12-ml {
padding-left: 12px !important;
padding-right: 12px !important;
}
.px18-ml {
padding-left: 18px !important;
padding-right: 18px !important;
}
.px24-ml {
padding-left: 24px !important;
padding-right: 24px !important;
}
.px30-ml {
padding-left: 30px !important;
padding-right: 30px !important;
}
.px36-ml {
padding-left: 36px !important;
padding-right: 36px !important;
}
.px60-ml {
padding-left: 60px !important;
padding-right: 60px !important;
}
.px120-ml {
padding-left: 120px !important;
padding-right: 120px !important;
}
.px180-ml {
padding-left: 180px !important;
padding-right: 180px !important;
}
.px240-ml {
padding-left: 240px !important;
padding-right: 240px !important;
}
.px300-ml {
padding-left: 300px !important;
padding-right: 300px !important;
}
.px360-ml {
padding-left: 360px !important;
padding-right: 360px !important;
}
.pt0-ml {
padding-top: 0 !important;
}
.pt3-ml {
padding-top: 3px !important;
}
.pt6-ml {
padding-top: 6px !important;
}
.pt12-ml {
padding-top: 12px !important;
}
.pt18-ml {
padding-top: 18px !important;
}
.pt24-ml {
padding-top: 24px !important;
}
.pt30-ml {
padding-top: 30px !important;
}
.pt36-ml {
padding-top: 36px !important;
}
.pt60-ml {
padding-top: 60px !important;
}
.pt120-ml {
padding-top: 120px !important;
}
.pt180-ml {
padding-top: 180px !important;
}
.pt240-ml {
padding-top: 240px !important;
}
.pt300-ml {
padding-top: 300px !important;
}
.pt360-ml {
padding-top: 360px !important;
}
.pr0-ml {
padding-right: 0 !important;
}
.pr3-ml {
padding-right: 3px !important;
}
.pr6-ml {
padding-right: 6px !important;
}
.pr12-ml {
padding-right: 12px !important;
}
.pr18-ml {
padding-right: 18px !important;
}
.pr24-ml {
padding-right: 24px !important;
}
.pr30-ml {
padding-right: 30px !important;
}
.pr36-ml {
padding-right: 36px !important;
}
.pr60-ml {
padding-right: 60px !important;
}
.pr120-ml {
padding-right: 120px !important;
}
.pr180-ml {
padding-right: 180px !important;
}
.pr240-ml {
padding-right: 240px !important;
}
.pr300-ml {
padding-right: 300px !important;
}
.pr360-ml {
padding-right: 360px !important;
}
.pb0-ml {
padding-bottom: 0 !important;
}
.pb3-ml {
padding-bottom: 3px !important;
}
.pb6-ml {
padding-bottom: 6px !important;
}
.pb12-ml {
padding-bottom: 12px !important;
}
.pb18-ml {
padding-bottom: 18px !important;
}
.pb24-ml {
padding-bottom: 24px !important;
}
.pb30-ml {
padding-bottom: 30px !important;
}
.pb36-ml {
padding-bottom: 36px !important;
}
.pb60-ml {
padding-bottom: 60px !important;
}
.pb120-ml {
padding-bottom: 120px !important;
}
.pb180-ml {
padding-bottom: 180px !important;
}
.pb240-ml {
padding-bottom: 240px !important;
}
.pb300-ml {
padding-bottom: 300px !important;
}
.pb360-ml {
padding-bottom: 360px !important;
}
.pl0-ml {
padding-left: 0 !important;
}
.pl3-ml {
padding-left: 3px !important;
}
.pl6-ml {
padding-left: 6px !important;
}
.pl12-ml {
padding-left: 12px !important;
}
.pl18-ml {
padding-left: 18px !important;
}
.pl24-ml {
padding-left: 24px !important;
}
.pl30-ml {
padding-left: 30px !important;
}
.pl36-ml {
padding-left: 36px !important;
}
.pl60-ml {
padding-left: 60px !important;
}
.pl120-ml {
padding-left: 120px !important;
}
.pl180-ml {
padding-left: 180px !important;
}
.pl240-ml {
padding-left: 240px !important;
}
.pl300-ml {
padding-left: 300px !important;
}
.pl360-ml {
padding-left: 360px !important;
}
.w0-ml {
width: 0 !important;
}
.w3-ml {
width: 3px !important;
}
.w6-ml {
width: 6px !important;
}
.w12-ml {
width: 12px !important;
}
.w18-ml {
width: 18px !important;
}
.w24-ml {
width: 24px !important;
}
.w30-ml {
width: 30px !important;
}
.w36-ml {
width: 36px !important;
}
.w60-ml {
width: 60px !important;
}
.w120-ml {
width: 120px !important;
}
.w180-ml {
width: 180px !important;
}
.w240-ml {
width: 240px !important;
}
.w300-ml {
width: 300px !important;
}
.w360-ml {
width: 360px !important;
}
.w600-ml {
width: 600px !important;
}
.w-full-ml {
width: 100% !important;
}
.w-auto-ml {
width: auto !important;
}
.wmax0-ml {
max-width: 0 !important;
}
.wmax3-ml {
max-width: 3px !important;
}
.wmax6-ml {
max-width: 6px !important;
}
.wmax12-ml {
max-width: 12px !important;
}
.wmax18-ml {
max-width: 18px !important;
}
.wmax24-ml {
max-width: 24px !important;
}
.wmax30-ml {
max-width: 30px !important;
}
.wmax36-ml {
max-width: 36px !important;
}
.wmax60-ml {
max-width: 60px !important;
}
.wmax120-ml {
max-width: 120px !important;
}
.wmax180-ml {
max-width: 180px !important;
}
.wmax240-ml {
max-width: 240px !important;
}
.wmax300-ml {
max-width: 300px !important;
}
.wmax360-ml {
max-width: 360px !important;
}
.wmax600-ml {
max-width: 600px !important;
}
.wmax-full-ml {
max-width: 100% !important;
}
.wmax-none-ml {
max-width: none !important;
}
.wmin0-ml {
min-width: 0 !important;
}
.wmin3-ml {
min-width: 3px !important;
}
.wmin6-ml {
min-width: 6px !important;
}
.wmin12-ml {
min-width: 12px !important;
}
.wmin18-ml {
min-width: 18px !important;
}
.wmin24-ml {
min-width: 24px !important;
}
.wmin30-ml {
min-width: 30px !important;
}
.wmin36-ml {
min-width: 36px !important;
}
.wmin60-ml {
min-width: 60px !important;
}
.wmin120-ml {
min-width: 120px !important;
}
.wmin180-ml {
min-width: 180px !important;
}
.wmin240-ml {
min-width: 240px !important;
}
.wmin300-ml {
min-width: 300px !important;
}
.wmin360-ml {
min-width: 360px !important;
}
.wmin600-ml {
min-width: 600px !important;
}
.wmin-full-ml {
min-width: 100% !important;
}
.h0-ml {
height: 0 !important;
}
.h3-ml {
height: 3px !important;
}
.h6-ml {
height: 6px !important;
}
.h12-ml {
height: 12px !important;
}
.h18-ml {
height: 18px !important;
}
.h24-ml {
height: 24px !important;
}
.h30-ml {
height: 30px !important;
}
.h36-ml {
height: 36px !important;
}
.h60-ml {
height: 60px !important;
}
.h120-ml {
height: 120px !important;
}
.h180-ml {
height: 180px !important;
}
.h240-ml {
height: 240px !important;
}
.h300-ml {
height: 300px !important;
}
.h360-ml {
height: 360px !important;
}
.h600-ml {
height: 600px !important;
}
.h-full-ml {
height: 100% !important;
}
.h-auto-ml {
height: auto !important;
}
.hmax0-ml {
max-height: 0 !important;
}
.hmax3-ml {
max-height: 3px !important;
}
.hmax6-ml {
max-height: 6px !important;
}
.hmax12-ml {
max-height: 12px !important;
}
.hmax18-ml {
max-height: 18px !important;
}
.hmax24-ml {
max-height: 24px !important;
}
.hmax30-ml {
max-height: 30px !important;
}
.hmax36-ml {
max-height: 36px !important;
}
.hmax60-ml {
max-height: 60px !important;
}
.hmax120-ml {
max-height: 120px !important;
}
.hmax180-ml {
max-height: 180px !important;
}
.hmax240-ml {
max-height: 240px !important;
}
.hmax300-ml {
max-height: 300px !important;
}
.hmax360-ml {
max-height: 360px !important;
}
.hmax600-ml {
max-height: 600px !important;
}
.hmax-full-ml {
max-height: 100% !important;
}
.hmax-none-ml {
max-height: none !important;
}
.hmin0-ml {
min-height: 0 !important;
}
.hmin3-ml {
min-height: 3px !important;
}
.hmin6-ml {
min-height: 6px !important;
}
.hmin12-ml {
min-height: 12px !important;
}
.hmin18-ml {
min-height: 18px !important;
}
.hmin24-ml {
min-height: 24px !important;
}
.hmin30-ml {
min-height: 30px !important;
}
.hmin36-ml {
min-height: 36px !important;
}
.hmin60-ml {
min-height: 60px !important;
}
.hmin120-ml {
min-height: 120px !important;
}
.hmin180-ml {
min-height: 180px !important;
}
.hmin240-ml {
min-height: 240px !important;
}
.hmin300-ml {
min-height: 300px !important;
}
.hmin360-ml {
min-height: 360px !important;
}
.hmin600-ml {
min-height: 600px !important;
}
.hmin-full-ml {
min-height: 100% !important;
}
}
@media screen and (min-width: 1200px) {
.grid--gut0-mxl {
margin-left: -0;
}
.grid--gut3-mxl {
margin-left: -3px;
}
.grid--gut6-mxl {
margin-left: -6px;
}
.grid--gut12-mxl {
margin-left: -12px;
}
.grid--gut18-mxl {
margin-left: -18px;
}
.grid--gut24-mxl {
margin-left: -24px;
}
.grid--gut30-mxl {
margin-left: -30px;
}
.grid--gut36-mxl {
margin-left: -36px;
}
.grid--gut60-mxl {
margin-left: -60px;
}
.grid--gut120-mxl {
margin-left: -120px;
}
.grid--gut0-mxl > .col,
.grid--gut0-mxl > .col-mm,
.grid--gut0-mxl > .col-ml,
.grid--gut0-mxl > .col-mxl {
padding-left: 0;
}
.grid--gut3-mxl > .col,
.grid--gut3-mxl > .col-mm,
.grid--gut3-mxl > .col-ml,
.grid--gut3-mxl > .col-mxl {
padding-left: 3px;
}
.grid--gut6-mxl > .col,
.grid--gut6-mxl > .col-mm,
.grid--gut6-mxl > .col-ml,
.grid--gut6-mxl > .col-mxl {
padding-left: 6px;
}
.grid--gut12-mxl > .col,
.grid--gut12-mxl > .col-mm,
.grid--gut12-mxl > .col-ml,
.grid--gut12-mxl > .col-mxl {
padding-left: 12px;
}
.grid--gut18-mxl > .col,
.grid--gut18-mxl > .col-mm,
.grid--gut18-mxl > .col-ml,
.grid--gut18-mxl > .col-mxl {
padding-left: 18px;
}
.grid--gut24-mxl > .col,
.grid--gut24-mxl > .col-mm,
.grid--gut24-mxl > .col-ml,
.grid--gut24-mxl > .col-mxl {
padding-left: 24px;
}
.grid--gut30-mxl > .col,
.grid--gut30-mxl > .col-mm,
.grid--gut30-mxl > .col-ml,
.grid--gut30-mxl > .col-mxl {
padding-left: 30px;
}
.grid--gut36-mxl > .col,
.grid--gut36-mxl > .col-mm,
.grid--gut36-mxl > .col-ml,
.grid--gut36-mxl > .col-mxl {
padding-left: 36px;
}
.grid--gut60-mxl > .col,
.grid--gut60-mxl > .col-mm,
.grid--gut60-mxl > .col-ml,
.grid--gut60-mxl > .col-mxl {
padding-left: 60px;
}
.grid--gut120-mxl > .col,
.grid--gut120-mxl > .col-mm,
.grid--gut120-mxl > .col-ml,
.grid--gut120-mxl > .col-mxl {
padding-left: 120px;
}
.my-neg1-mxl {
margin-top: -1px !important;
margin-bottom: -1px !important;
}
.my-neg2-mxl {
margin-top: -2px !important;
margin-bottom: -2px !important;
}
.my-neg3-mxl {
margin-top: -3px !important;
margin-bottom: -3px !important;
}
.my-neg6-mxl {
margin-top: -6px !important;
margin-bottom: -6px !important;
}
.my-neg12-mxl {
margin-top: -12px !important;
margin-bottom: -12px !important;
}
.my-neg18-mxl {
margin-top: -18px !important;
margin-bottom: -18px !important;
}
.my-neg24-mxl {
margin-top: -24px !important;
margin-bottom: -24px !important;
}
.my-neg30-mxl {
margin-top: -30px !important;
margin-bottom: -30px !important;
}
.my-neg36-mxl {
margin-top: -36px !important;
margin-bottom: -36px !important;
}
.my-neg60-mxl {
margin-top: -60px !important;
margin-bottom: -60px !important;
}
.my-neg120-mxl {
margin-top: -120px !important;
margin-bottom: -120px !important;
}
.my-neg180-mxl {
margin-top: -180px !important;
margin-bottom: -180px !important;
}
.my-neg240-mxl {
margin-top: -240px !important;
margin-bottom: -240px !important;
}
.my-neg300-mxl {
margin-top: -300px !important;
margin-bottom: -300px !important;
}
.my-neg360-mxl {
margin-top: -360px !important;
margin-bottom: -360px !important;
}
.my0-mxl {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.my3-mxl {
margin-top: 3px !important;
margin-bottom: 3px !important;
}
.my6-mxl {
margin-top: 6px !important;
margin-bottom: 6px !important;
}
.my12-mxl {
margin-top: 12px !important;
margin-bottom: 12px !important;
}
.my18-mxl {
margin-top: 18px !important;
margin-bottom: 18px !important;
}
.my24-mxl {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.my30-mxl {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.my36-mxl {
margin-top: 36px !important;
margin-bottom: 36px !important;
}
.my60-mxl {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.my120-mxl {
margin-top: 120px !important;
margin-bottom: 120px !important;
}
.my180-mxl {
margin-top: 180px !important;
margin-bottom: 180px !important;
}
.my240-mxl {
margin-top: 240px !important;
margin-bottom: 240px !important;
}
.my300-mxl {
margin-top: 300px !important;
margin-bottom: 300px !important;
}
.my360-mxl {
margin-top: 360px !important;
margin-bottom: 360px !important;
}
.mx-neg1-mxl {
margin-left: -1px !important;
margin-right: -1px !important;
}
.mx-neg2-mxl {
margin-left: -2px !important;
margin-right: -2px !important;
}
.mx-neg3-mxl {
margin-left: -3px !important;
margin-right: -3px !important;
}
.mx-neg6-mxl {
margin-left: -6px !important;
margin-right: -6px !important;
}
.mx-neg12-mxl {
margin-left: -12px !important;
margin-right: -12px !important;
}
.mx-neg18-mxl {
margin-left: -18px !important;
margin-right: -18px !important;
}
.mx-neg24-mxl {
margin-left: -24px !important;
margin-right: -24px !important;
}
.mx-neg30-mxl {
margin-left: -30px !important;
margin-right: -30px !important;
}
.mx-neg36-mxl {
margin-left: -36px !important;
margin-right: -36px !important;
}
.mx-neg60-mxl {
margin-left: -60px !important;
margin-right: -60px !important;
}
.mx-neg120-mxl {
margin-left: -120px !important;
margin-right: -120px !important;
}
.mx-neg180-mxl {
margin-left: -180px !important;
margin-right: -180px !important;
}
.mx-neg240-mxl {
margin-left: -240px !important;
margin-right: -240px !important;
}
.mx-neg300-mxl {
margin-left: -300px !important;
margin-right: -300px !important;
}
.mx-neg360-mxl {
margin-left: -360px !important;
margin-right: -360px !important;
}
.mx0-mxl {
margin-left: 0 !important;
margin-right: 0 !important;
}
.mx3-mxl {
margin-left: 3px !important;
margin-right: 3px !important;
}
.mx6-mxl {
margin-left: 6px !important;
margin-right: 6px !important;
}
.mx12-mxl {
margin-left: 12px !important;
margin-right: 12px !important;
}
.mx18-mxl {
margin-left: 18px !important;
margin-right: 18px !important;
}
.mx24-mxl {
margin-left: 24px !important;
margin-right: 24px !important;
}
.mx30-mxl {
margin-left: 30px !important;
margin-right: 30px !important;
}
.mx36-mxl {
margin-left: 36px !important;
margin-right: 36px !important;
}
.mx60-mxl {
margin-left: 60px !important;
margin-right: 60px !important;
}
.mx120-mxl {
margin-left: 120px !important;
margin-right: 120px !important;
}
.mx180-mxl {
margin-left: 180px !important;
margin-right: 180px !important;
}
.mx240-mxl {
margin-left: 240px !important;
margin-right: 240px !important;
}
.mx300-mxl {
margin-left: 300px !important;
margin-right: 300px !important;
}
.mx360-mxl {
margin-left: 360px !important;
margin-right: 360px !important;
}
.mt-neg1-mxl {
margin-top: -1px !important;
}
.mt-neg2-mxl {
margin-top: -2px !important;
}
.mt-neg3-mxl {
margin-top: -3px !important;
}
.mt-neg6-mxl {
margin-top: -6px !important;
}
.mt-neg12-mxl {
margin-top: -12px !important;
}
.mt-neg18-mxl {
margin-top: -18px !important;
}
.mt-neg24-mxl {
margin-top: -24px !important;
}
.mt-neg30-mxl {
margin-top: -30px !important;
}
.mt-neg36-mxl {
margin-top: -36px !important;
}
.mt-neg60-mxl {
margin-top: -60px !important;
}
.mt-neg120-mxl {
margin-top: -120px !important;
}
.mt-neg180-mxl {
margin-top: -180px !important;
}
.mt-neg240-mxl {
margin-top: -240px !important;
}
.mt-neg300-mxl {
margin-top: -300px !important;
}
.mt-neg360-mxl {
margin-top: -360px !important;
}
.mt0-mxl {
margin-top: 0 !important;
}
.mt3-mxl {
margin-top: 3px !important;
}
.mt6-mxl {
margin-top: 6px !important;
}
.mt12-mxl {
margin-top: 12px !important;
}
.mt18-mxl {
margin-top: 18px !important;
}
.mt24-mxl {
margin-top: 24px !important;
}
.mt30-mxl {
margin-top: 30px !important;
}
.mt36-mxl {
margin-top: 36px !important;
}
.mt60-mxl {
margin-top: 60px !important;
}
.mt120-mxl {
margin-top: 120px !important;
}
.mt180-mxl {
margin-top: 180px !important;
}
.mt240-mxl {
margin-top: 240px !important;
}
.mt300-mxl {
margin-top: 300px !important;
}
.mt360-mxl {
margin-top: 360px !important;
}
.mr-neg1-mxl {
margin-right: -1px !important;
}
.mr-neg2-mxl {
margin-right: -2px !important;
}
.mr-neg3-mxl {
margin-right: -3px !important;
}
.mr-neg6-mxl {
margin-right: -6px !important;
}
.mr-neg12-mxl {
margin-right: -12px !important;
}
.mr-neg18-mxl {
margin-right: -18px !important;
}
.mr-neg24-mxl {
margin-right: -24px !important;
}
.mr-neg30-mxl {
margin-right: -30px !important;
}
.mr-neg36-mxl {
margin-right: -36px !important;
}
.mr-neg60-mxl {
margin-right: -60px !important;
}
.mr-neg120-mxl {
margin-right: -120px !important;
}
.mr-neg180-mxl {
margin-right: -180px !important;
}
.mr-neg240-mxl {
margin-right: -240px !important;
}
.mr-neg300-mxl {
margin-right: -300px !important;
}
.mr-neg360-mxl {
margin-right: -360px !important;
}
.mr0-mxl {
margin-right: 0 !important;
}
.mr3-mxl {
margin-right: 3px !important;
}
.mr6-mxl {
margin-right: 6px !important;
}
.mr12-mxl {
margin-right: 12px !important;
}
.mr18-mxl {
margin-right: 18px !important;
}
.mr24-mxl {
margin-right: 24px !important;
}
.mr30-mxl {
margin-right: 30px !important;
}
.mr36-mxl {
margin-right: 36px !important;
}
.mr60-mxl {
margin-right: 60px !important;
}
.mr120-mxl {
margin-right: 120px !important;
}
.mr180-mxl {
margin-right: 180px !important;
}
.mr240-mxl {
margin-right: 240px !important;
}
.mr300-mxl {
margin-right: 300px !important;
}
.mr360-mxl {
margin-right: 360px !important;
}
.mb-neg1-mxl {
margin-bottom: -1px !important;
}
.mb-neg2-mxl {
margin-bottom: -2px !important;
}
.mb-neg3-mxl {
margin-bottom: -3px !important;
}
.mb-neg6-mxl {
margin-bottom: -6px !important;
}
.mb-neg12-mxl {
margin-bottom: -12px !important;
}
.mb-neg18-mxl {
margin-bottom: -18px !important;
}
.mb-neg24-mxl {
margin-bottom: -24px !important;
}
.mb-neg30-mxl {
margin-bottom: -30px !important;
}
.mb-neg36-mxl {
margin-bottom: -36px !important;
}
.mb-neg60-mxl {
margin-bottom: -60px !important;
}
.mb-neg120-mxl {
margin-bottom: -120px !important;
}
.mb-neg180-mxl {
margin-bottom: -180px !important;
}
.mb-neg240-mxl {
margin-bottom: -240px !important;
}
.mb-neg300-mxl {
margin-bottom: -300px !important;
}
.mb-neg360-mxl {
margin-bottom: -360px !important;
}
.mb0-mxl {
margin-bottom: 0 !important;
}
.mb3-mxl {
margin-bottom: 3px !important;
}
.mb6-mxl {
margin-bottom: 6px !important;
}
.mb12-mxl {
margin-bottom: 12px !important;
}
.mb18-mxl {
margin-bottom: 18px !important;
}
.mb24-mxl {
margin-bottom: 24px !important;
}
.mb30-mxl {
margin-bottom: 30px !important;
}
.mb36-mxl {
margin-bottom: 36px !important;
}
.mb60-mxl {
margin-bottom: 60px !important;
}
.mb120-mxl {
margin-bottom: 120px !important;
}
.mb180-mxl {
margin-bottom: 180px !important;
}
.mb240-mxl {
margin-bottom: 240px !important;
}
.mb300-mxl {
margin-bottom: 300px !important;
}
.mb360-mxl {
margin-bottom: 360px !important;
}
.ml-neg1-mxl {
margin-left: -1px !important;
}
.ml-neg2-mxl {
margin-left: -2px !important;
}
.ml-neg3-mxl {
margin-left: -3px !important;
}
.ml-neg6-mxl {
margin-left: -6px !important;
}
.ml-neg12-mxl {
margin-left: -12px !important;
}
.ml-neg18-mxl {
margin-left: -18px !important;
}
.ml-neg24-mxl {
margin-left: -24px !important;
}
.ml-neg30-mxl {
margin-left: -30px !important;
}
.ml-neg36-mxl {
margin-left: -36px !important;
}
.ml-neg60-mxl {
margin-left: -60px !important;
}
.ml-neg120-mxl {
margin-left: -120px !important;
}
.ml-neg180-mxl {
margin-left: -180px !important;
}
.ml-neg240-mxl {
margin-left: -240px !important;
}
.ml-neg300-mxl {
margin-left: -300px !important;
}
.ml-neg360-mxl {
margin-left: -360px !important;
}
.ml0-mxl {
margin-left: 0 !important;
}
.ml3-mxl {
margin-left: 3px !important;
}
.ml6-mxl {
margin-left: 6px !important;
}
.ml12-mxl {
margin-left: 12px !important;
}
.ml18-mxl {
margin-left: 18px !important;
}
.ml24-mxl {
margin-left: 24px !important;
}
.ml30-mxl {
margin-left: 30px !important;
}
.ml36-mxl {
margin-left: 36px !important;
}
.ml60-mxl {
margin-left: 60px !important;
}
.ml120-mxl {
margin-left: 120px !important;
}
.ml180-mxl {
margin-left: 180px !important;
}
.ml240-mxl {
margin-left: 240px !important;
}
.ml300-mxl {
margin-left: 300px !important;
}
.ml360-mxl {
margin-left: 360px !important;
}
.py0-mxl {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.py3-mxl {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.py6-mxl {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.py12-mxl {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.py18-mxl {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
.py24-mxl {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.py30-mxl {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.py36-mxl {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
.py60-mxl {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.py120-mxl {
padding-top: 120px !important;
padding-bottom: 120px !important;
}
.py180-mxl {
padding-top: 180px !important;
padding-bottom: 180px !important;
}
.py240-mxl {
padding-top: 240px !important;
padding-bottom: 240px !important;
}
.py300-mxl {
padding-top: 300px !important;
padding-bottom: 300px !important;
}
.py360-mxl {
padding-top: 360px !important;
padding-bottom: 360px !important;
}
.px0-mxl {
padding-left: 0 !important;
padding-right: 0 !important;
}
.px3-mxl {
padding-left: 3px !important;
padding-right: 3px !important;
}
.px6-mxl {
padding-left: 6px !important;
padding-right: 6px !important;
}
.px12-mxl {
padding-left: 12px !important;
padding-right: 12px !important;
}
.px18-mxl {
padding-left: 18px !important;
padding-right: 18px !important;
}
.px24-mxl {
padding-left: 24px !important;
padding-right: 24px !important;
}
.px30-mxl {
padding-left: 30px !important;
padding-right: 30px !important;
}
.px36-mxl {
padding-left: 36px !important;
padding-right: 36px !important;
}
.px60-mxl {
padding-left: 60px !important;
padding-right: 60px !important;
}
.px120-mxl {
padding-left: 120px !important;
padding-right: 120px !important;
}
.px180-mxl {
padding-left: 180px !important;
padding-right: 180px !important;
}
.px240-mxl {
padding-left: 240px !important;
padding-right: 240px !important;
}
.px300-mxl {
padding-left: 300px !important;
padding-right: 300px !important;
}
.px360-mxl {
padding-left: 360px !important;
padding-right: 360px !important;
}
.pt0-mxl {
padding-top: 0 !important;
}
.pt3-mxl {
padding-top: 3px !important;
}
.pt6-mxl {
padding-top: 6px !important;
}
.pt12-mxl {
padding-top: 12px !important;
}
.pt18-mxl {
padding-top: 18px !important;
}
.pt24-mxl {
padding-top: 24px !important;
}
.pt30-mxl {
padding-top: 30px !important;
}
.pt36-mxl {
padding-top: 36px !important;
}
.pt60-mxl {
padding-top: 60px !important;
}
.pt120-mxl {
padding-top: 120px !important;
}
.pt180-mxl {
padding-top: 180px !important;
}
.pt240-mxl {
padding-top: 240px !important;
}
.pt300-mxl {
padding-top: 300px !important;
}
.pt360-mxl {
padding-top: 360px !important;
}
.pr0-mxl {
padding-right: 0 !important;
}
.pr3-mxl {
padding-right: 3px !important;
}
.pr6-mxl {
padding-right: 6px !important;
}
.pr12-mxl {
padding-right: 12px !important;
}
.pr18-mxl {
padding-right: 18px !important;
}
.pr24-mxl {
padding-right: 24px !important;
}
.pr30-mxl {
padding-right: 30px !important;
}
.pr36-mxl {
padding-right: 36px !important;
}
.pr60-mxl {
padding-right: 60px !important;
}
.pr120-mxl {
padding-right: 120px !important;
}
.pr180-mxl {
padding-right: 180px !important;
}
.pr240-mxl {
padding-right: 240px !important;
}
.pr300-mxl {
padding-right: 300px !important;
}
.pr360-mxl {
padding-right: 360px !important;
}
.pb0-mxl {
padding-bottom: 0 !important;
}
.pb3-mxl {
padding-bottom: 3px !important;
}
.pb6-mxl {
padding-bottom: 6px !important;
}
.pb12-mxl {
padding-bottom: 12px !important;
}
.pb18-mxl {
padding-bottom: 18px !important;
}
.pb24-mxl {
padding-bottom: 24px !important;
}
.pb30-mxl {
padding-bottom: 30px !important;
}
.pb36-mxl {
padding-bottom: 36px !important;
}
.pb60-mxl {
padding-bottom: 60px !important;
}
.pb120-mxl {
padding-bottom: 120px !important;
}
.pb180-mxl {
padding-bottom: 180px !important;
}
.pb240-mxl {
padding-bottom: 240px !important;
}
.pb300-mxl {
padding-bottom: 300px !important;
}
.pb360-mxl {
padding-bottom: 360px !important;
}
.pl0-mxl {
padding-left: 0 !important;
}
.pl3-mxl {
padding-left: 3px !important;
}
.pl6-mxl {
padding-left: 6px !important;
}
.pl12-mxl {
padding-left: 12px !important;
}
.pl18-mxl {
padding-left: 18px !important;
}
.pl24-mxl {
padding-left: 24px !important;
}
.pl30-mxl {
padding-left: 30px !important;
}
.pl36-mxl {
padding-left: 36px !important;
}
.pl60-mxl {
padding-left: 60px !important;
}
.pl120-mxl {
padding-left: 120px !important;
}
.pl180-mxl {
padding-left: 180px !important;
}
.pl240-mxl {
padding-left: 240px !important;
}
.pl300-mxl {
padding-left: 300px !important;
}
.pl360-mxl {
padding-left: 360px !important;
}
.w0-mxl {
width: 0 !important;
}
.w3-mxl {
width: 3px !important;
}
.w6-mxl {
width: 6px !important;
}
.w12-mxl {
width: 12px !important;
}
.w18-mxl {
width: 18px !important;
}
.w24-mxl {
width: 24px !important;
}
.w30-mxl {
width: 30px !important;
}
.w36-mxl {
width: 36px !important;
}
.w60-mxl {
width: 60px !important;
}
.w120-mxl {
width: 120px !important;
}
.w180-mxl {
width: 180px !important;
}
.w240-mxl {
width: 240px !important;
}
.w300-mxl {
width: 300px !important;
}
.w360-mxl {
width: 360px !important;
}
.w600-mxl {
width: 600px !important;
}
.w-full-mxl {
width: 100% !important;
}
.w-auto-mxl {
width: auto !important;
}
.wmax0-mxl {
max-width: 0 !important;
}
.wmax3-mxl {
max-width: 3px !important;
}
.wmax6-mxl {
max-width: 6px !important;
}
.wmax12-mxl {
max-width: 12px !important;
}
.wmax18-mxl {
max-width: 18px !important;
}
.wmax24-mxl {
max-width: 24px !important;
}
.wmax30-mxl {
max-width: 30px !important;
}
.wmax36-mxl {
max-width: 36px !important;
}
.wmax60-mxl {
max-width: 60px !important;
}
.wmax120-mxl {
max-width: 120px !important;
}
.wmax180-mxl {
max-width: 180px !important;
}
.wmax240-mxl {
max-width: 240px !important;
}
.wmax300-mxl {
max-width: 300px !important;
}
.wmax360-mxl {
max-width: 360px !important;
}
.wmax600-mxl {
max-width: 600px !important;
}
.wmax-full-mxl {
max-width: 100% !important;
}
.wmax-none-mxl {
max-width: none !important;
}
.wmin0-mxl {
min-width: 0 !important;
}
.wmin3-mxl {
min-width: 3px !important;
}
.wmin6-mxl {
min-width: 6px !important;
}
.wmin12-mxl {
min-width: 12px !important;
}
.wmin18-mxl {
min-width: 18px !important;
}
.wmin24-mxl {
min-width: 24px !important;
}
.wmin30-mxl {
min-width: 30px !important;
}
.wmin36-mxl {
min-width: 36px !important;
}
.wmin60-mxl {
min-width: 60px !important;
}
.wmin120-mxl {
min-width: 120px !important;
}
.wmin180-mxl {
min-width: 180px !important;
}
.wmin240-mxl {
min-width: 240px !important;
}
.wmin300-mxl {
min-width: 300px !important;
}
.wmin360-mxl {
min-width: 360px !important;
}
.wmin600-mxl {
min-width: 600px !important;
}
.wmin-full-mxl {
min-width: 100% !important;
}
.h0-mxl {
height: 0 !important;
}
.h3-mxl {
height: 3px !important;
}
.h6-mxl {
height: 6px !important;
}
.h12-mxl {
height: 12px !important;
}
.h18-mxl {
height: 18px !important;
}
.h24-mxl {
height: 24px !important;
}
.h30-mxl {
height: 30px !important;
}
.h36-mxl {
height: 36px !important;
}
.h60-mxl {
height: 60px !important;
}
.h120-mxl {
height: 120px !important;
}
.h180-mxl {
height: 180px !important;
}
.h240-mxl {
height: 240px !important;
}
.h300-mxl {
height: 300px !important;
}
.h360-mxl {
height: 360px !important;
}
.h600-mxl {
height: 600px !important;
}
.h-full-mxl {
height: 100% !important;
}
.h-auto-mxl {
height: auto !important;
}
.hmax0-mxl {
max-height: 0 !important;
}
.hmax3-mxl {
max-height: 3px !important;
}
.hmax6-mxl {
max-height: 6px !important;
}
.hmax12-mxl {
max-height: 12px !important;
}
.hmax18-mxl {
max-height: 18px !important;
}
.hmax24-mxl {
max-height: 24px !important;
}
.hmax30-mxl {
max-height: 30px !important;
}
.hmax36-mxl {
max-height: 36px !important;
}
.hmax60-mxl {
max-height: 60px !important;
}
.hmax120-mxl {
max-height: 120px !important;
}
.hmax180-mxl {
max-height: 180px !important;
}
.hmax240-mxl {
max-height: 240px !important;
}
.hmax300-mxl {
max-height: 300px !important;
}
.hmax360-mxl {
max-height: 360px !important;
}
.hmax600-mxl {
max-height: 600px !important;
}
.hmax-full-mxl {
max-height: 100% !important;
}
.hmax-none-mxl {
max-height: none !important;
}
.hmin0-mxl {
min-height: 0 !important;
}
.hmin3-mxl {
min-height: 3px !important;
}
.hmin6-mxl {
min-height: 6px !important;
}
.hmin12-mxl {
min-height: 12px !important;
}
.hmin18-mxl {
min-height: 18px !important;
}
.hmin24-mxl {
min-height: 24px !important;
}
.hmin30-mxl {
min-height: 30px !important;
}
.hmin36-mxl {
min-height: 36px !important;
}
.hmin60-mxl {
min-height: 60px !important;
}
.hmin120-mxl {
min-height: 120px !important;
}
.hmin180-mxl {
min-height: 180px !important;
}
.hmin240-mxl {
min-height: 240px !important;
}
.hmin300-mxl {
min-height: 300px !important;
}
.hmin360-mxl {
min-height: 360px !important;
}
.hmin600-mxl {
min-height: 600px !important;
}
.hmin-full-mxl {
min-height: 100% !important;
}
}
/**
* Background and text colors. Colors include dark, light, and faint variations.
* Be sure to maintain a readable color contrast between background and text.
* Only use `-faint` text colors on dark backgrounds.
*
* @section Colors
*/
/**
* Text color classes (.color-*)
* and background color classes (.bg-*)
* are autogenerated by build-color-variants.js
*/
/**
* Create general-purpose triangle-shaped elements. Great for dialog boxes and tooltips.
*
* @section Triangles
*/
/**
* Style simple small triangles.
*
* @memberof Triangles
* @group
* @example
*
*
*
*
* @memberof Triangles
*/
.triangle {
width: 12px !important;
height: 12px !important;
font-size: 0 !important;
line-height: 0 !important;
}
.triangle--u {
border-left: 6px solid transparent !important;
border-right: 6px solid transparent !important;
border-bottom: 9px solid currentColor !important;
}
.triangle--r {
border-top: 6px solid transparent !important;
border-bottom: 6px solid transparent !important;
border-left: 9px solid currentColor !important;
}
.triangle--d {
border-left: 6px solid transparent !important;
border-right: 6px solid transparent !important;
border-top: 9px solid currentColor !important;
}
.triangle--l {
border-top: 6px solid transparent !important;
border-bottom: 6px solid transparent !important;
border-right: 9px solid currentColor !important;
}
/** @endgroup */
/**
* Style large triangles.
*
* @group
* @example
*
*
*
*
*
*
*/
.animation-pulse { -webkit-animation: pulse 1.5s ease-in-out; animation: pulse 1.5s ease-in-out; }
.animation-spin { -webkit-animation: spin 1.5s linear; animation: spin 1.5s linear; }
.animation-fade-in { -webkit-animation: fadein 1.5s ease-in forwards; animation: fadein 1.5s ease-in forwards; }
.animation-fade-out { animation: fadein 1.5s ease-out reverse forwards; }
.animation-fade-in-out { -webkit-animation: fadeinout 1.5s ease-in-out forwards; animation: fadeinout 1.5s ease-in-out forwards; }
.animation-shake { -webkit-animation: shake 1.5s ease-in-out; animation: shake 1.5s ease-in-out; }
/** @endgroup */
/**
* Animation duration modifiers.
* Change animation duration with an `animation--speed-{seconds}` modifier.
* Add a 1 second delay with `animation--delay`.
*
* @group
* @memberof Animations
* @example
*
*
*
*
*
*/
.animation--speed-1 { -webkit-animation-duration: 1s; animation-duration: 1s; }
.animation--speed-2 { -webkit-animation-duration: 2s; animation-duration: 2s; }
.animation--speed-4 { -webkit-animation-duration: 4s; animation-duration: 4s; }
.animation--speed-8 { -webkit-animation-duration: 8s; animation-duration: 8s; }
.animation--delay { -webkit-animation-delay: 1s; animation-delay: 1s; }
/** @endgroup */
/**
* Repeat an animation infinitely with a `animation--infinite` modifier.
*
* @memberof Animations
* @example
*
*/
.animation--infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
@-webkit-keyframes pulse {
0% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; }
45% { opacity: 0.5; }
90% { -webkit-transform: scale(1.25); transform: scale(1.25); opacity: 0; }
100% { -webkit-transform: scale(1.25); transform: scale(1.25); opacity: 0; }
}
@keyframes pulse {
0% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; }
45% { opacity: 0.5; }
90% { -webkit-transform: scale(1.25); transform: scale(1.25); opacity: 0; }
100% { -webkit-transform: scale(1.25); transform: scale(1.25); opacity: 0; }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes fadeinout {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeinout {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-webkit-keyframes shake {
from,
to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
10%,
30%,
50%,
70%,
90% { -webkit-transform: translate3d(-12px, 0, 0); transform: translate3d(-12px, 0, 0); }
20%,
40%,
60%,
80% { -webkit-transform: translate3d(12px, 0, 0); transform: translate3d(12px, 0, 0); }
}
@keyframes shake {
from,
to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
10%,
30%,
50%,
70%,
90% { -webkit-transform: translate3d(-12px, 0, 0); transform: translate3d(-12px, 0, 0); }
20%,
40%,
60%,
80% { -webkit-transform: translate3d(12px, 0, 0); transform: translate3d(12px, 0, 0); }
}
/**
* Extra rules that come in handy.
*
* @section Miscellaneous
*/
/**
* Style scrollbars. Only works in Webkit-based browsers (Safari and Chrome).
* On dark backgrounds, add the `scroll-styled--dark` modifier.
*
* **Use in combination with `scroll-auto`.**
*
* @memberof Miscellaneous
@selectors .scroll-styled
* @example
*
*
*/
.scroll-styled::-webkit-scrollbar {
width: 6px;
height: 6px;
background: transparent;
}
.scroll-styled::-webkit-scrollbar:hover {
background: transparent;
}
.scroll-styled::-webkit-scrollbar-track {
background: none;
}
.scroll-styled::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.25);
border-color: transparent;
width: 6px;
border-radius: 3px;
}
.scroll-styled::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.35);
}
.scroll-styled::-webkit-scrollbar-track:hover {
background: transparent;
}
.scroll-styled--dark::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
}
.scroll-styled--dark::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.4);
}
/**
* Style a loading spinner.
* On dark backgrounds, add the `loading--dark` modifier.
* For a smaller spinner, add the `loading--s` modifier.
*
* @group
* @memberof Miscellaneous
* @example
*
*
*
*/
.loading--dark::after,
.loading::after {
content: '';
display: block;
margin: auto;
height: 36px;
width: 36px;
-webkit-animation: spin 0.8s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
animation: spin 0.8s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.loading--s::after {
height: 18px;
width: 18px;
}
.loading::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='36' height='36' viewBox='0 0 36 36'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23333;%7D.b%7Bopacity:0.1;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M5.2721,5.2721,7.3934,7.3934a15,15,0,0,1,21.2132,0l2.1213-2.1213A18,18,0,0,0,5.2721,5.2721Z'/%3E%3Cg class='b'%3E%3Cpath d='M28.6066,28.6066A15,15,0,0,1,7.3934,7.3934L5.2721,5.2721a18,18,0,1,0,25.4558,0L28.6066,7.3934A15,15,0,0,1,28.6066,28.6066Z'/%3E%3C/g%3E%3C/svg%3E"); /* stylelint-disable-line string-quotes */
}
.loading--s::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='18' height='18' viewBox='0 0 18 18'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bopacity:0.1;%7D.b%7Bfill:%23333;%7D%3C/style%3E%3C/defs%3E%3Cg class='a'%3E%3Cpath d='M13.2426,13.2426A6,6,0,0,1,4.7574,4.7574L2.636,2.636a9,9,0,1,0,12.7279,0L13.2426,4.7574A6,6,0,0,1,13.2426,13.2426Z'/%3E%3C/g%3E%3Cpath class='b' d='M2.636,2.636,4.7574,4.7574a6,6,0,0,1,8.4853,0L15.364,2.636A9,9,0,0,0,2.636,2.636Z'/%3E%3C/svg%3E"); /* stylelint-disable-line string-quotes */
}
.loading--dark::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='36' height='36' viewBox='0 0 36 36'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23f7f7f7;%7D.b%7Bopacity:0.1;%7D.c%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M5.2721,5.2721,7.3934,7.3934a15,15,0,0,1,21.2132,0l2.1213-2.1213A18,18,0,0,0,5.2721,5.2721Z'/%3E%3Cg class='b'%3E%3Cpath class='c' d='M28.6066,28.6066A15,15,0,0,1,7.3934,7.3934L5.2721,5.2721a18,18,0,1,0,25.4558,0L28.6066,7.3934A15,15,0,0,1,28.6066,28.6066Z'/%3E%3C/g%3E%3C/svg%3E"); /* stylelint-disable-line string-quotes */
}
/** @endgroup */
.loading--dark.loading--s::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='18' height='18' viewBox='0 0 18 18'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bopacity:0.1;%7D.b%7Bfill:%23fff;%7D.c%7Bfill:%23f7f7f7;%7D%3C/style%3E%3C/defs%3E%3Cg class='a'%3E%3Cpath class='b' d='M13.2426,13.2426A6,6,0,0,1,4.7574,4.7574L2.636,2.636a9,9,0,1,0,12.7279,0L13.2426,4.7574A6,6,0,0,1,13.2426,13.2426Z'/%3E%3C/g%3E%3Cpath class='c' d='M2.636,2.636,4.7574,4.7574a6,6,0,0,1,8.4853,0L15.364,2.636A9,9,0,0,0,2.636,2.636Z'/%3E%3C/svg%3E"); /* stylelint-disable-line string-quotes */
}
/**
* Disable touch and click events on an element and
* its children. Be aware that this rule does not disable keyboard events,
* so a user can still tab to an element and press Return to trigger
* its click event.
*
* @memberof Miscellaneous
* @example
* You can't click this
*/
.events-none {
-webkit-touch-callout: none;
pointer-events: none;
}
@media screen and (min-width: 640px) {
.events-none-mm {
-webkit-touch-callout: none !important;
pointer-events: none !important;
}
}
@media screen and (min-width: 800px) {
.events-none-ml {
-webkit-touch-callout: none !important;
pointer-events: none !important;
}
}
/**
* Enable touch and click events on an element and
* its children. Use to re-enable such events inside a parent with the `events-none` class.
*
* @memberof Miscellaneous
* @example
*
*/
.events-all {
-webkit-touch-callout: default;
pointer-events: all;
}
@media screen and (min-width: 640px) {
.events-all-mm {
-webkit-touch-callout: default !important;
pointer-events: all !important;
}
}
@media screen and (min-width: 800px) {
.events-all-ml {
-webkit-touch-callout: default !important;
pointer-events: all !important;
}
}
/**
* Disable text selection on an element and its children. Use only in cases where accidental
* text selection causes user frustration.
*
* @memberof Miscellaneous
* @example
* You can't select this.
*/
.unselectable {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media screen and (min-width: 640px) {
.unselectable-mm {
-webkit-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
}
@media screen and (min-width: 800px) {
.unselectable-ml {
-webkit-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
}
/**
* Enable text selection on an element and its children.
* Use to re-enable selection inside a parent with the `unselectable` class.
*
* @memberof Miscellaneous
* @example
*
*/
.selectable {
-webkit-user-select: text;
-ms-user-select: text;
user-select: text;
}
@media screen and (min-width: 640px) {
.selectable-mm {
-webkit-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
}
@media screen and (min-width: 800px) {
.selectable-ml {
-webkit-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
}
/**
* Apply a subtle animated transition when changing CSS properties on an element. See MDN's [list of CSS animated properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) for every property effected by this class.
*
* @memberof Miscellaneous
* @example
* Hover over me
*/
.transition {
transition: all 0.125s;
}
/**
* Disable an animated transition on elements like [`btn`](#Buttons) that have default transitions.
*
* @memberof Miscellaneous
* @example
* transition-none
*/
.transition-none {
transition: auto;
}
/**
* Always show scrollbars.
*
* @memberof Miscellaneous
* @example
* Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.
*/
.scroll-always {
overflow: scroll !important;
}
/**
* Display scrollbars if content flows beyond the edge of the element.
*
* @memberof Miscellaneous
* @example
* Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.
*/
.scroll-auto {
overflow: auto !important;
-webkit-overflow-scrolling: touch;
}
/**
* Hide content if it extends beyond the edge of the containing element.
*
* @memberof Miscellaneous
* @example
* Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.
*/
.scroll-hidden {
overflow: hidden !important;
}
/**
* Hide an element *visually*, but keep it available to screen readers.
*
* @memberof Miscellaneous
* @example
* You cannot see this with your eyes.
* There is a sentence above this that you cannot see.
*/
.hide-visually {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
@media print {
/**
* Apply display none when rendering page for print.
*
* @memberof Miscellaneous
* @example
*
*
*/
.mb-logo {
background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 790 180%22%3E%3Cpath d%3D%22M89.1 1.8C39.9 1.8 0 41.7 0 90.9 0 140.1 39.9 180 89.1 180c49.2 0 89.1-39.9 89.1-89.1 0-49.2-39.9-89.1-89.1-89.1zm457.8 19.7c-1.2 0-2.2 1-2.2 2.2v103.2c0 1.2 1 2.2 2.2 2.2h13.4c1.2 0 2.2-1 2.2-2.2v-7.1c6.9 7.2 16.4 11.3 26.3 11.3 20.9 0 37.9-18 37.9-40.3 0-22.3-17-40.2-37.9-40.2-10 0-19.5 4.1-26.3 11.3V23.7c0-1.2-1-2.2-2.2-2.2h-13.4zM98.3 36.4c11.4.3 22.9 4.8 31.7 13.7 17.7 17.7 18.3 45.7 1.4 62.7-30.5 30.5-84.8 20.7-84.8 20.7s-9.8-54.3 20.7-84.8c8.5-8.4 19.7-12.5 31-12.3zm160.3 14.2c-8.2 0-15.9 4-20.8 10.6v-6.4c0-1.2-1-2.2-2.2-2.2h-13.4c-1.2 0-2.2 1-2.2 2.2V127c0 1.2 1 2.2 2.2 2.2h13.4c1.2 0 2.2-1 2.2-2.2V83.8c.5-9.7 7.2-17.3 15.4-17.3 8.5 0 15.6 7.1 15.6 16.5v44c0 1.2 1 2.2 2.2 2.2h13.5c1.2 0 2.2-1 2.2-2.2l-.1-44.9c1.2-8.8 7.6-15.6 15.3-15.6 8.5 0 15.6 7.1 15.6 16.5v44c0 1.2 1 2.2 2.2 2.2h13.5c1.2 0 2.2-1 2.2-2.2l-.1-49.6c.3-14.8-12.3-26.8-27.9-26.8-10 .1-19.2 5.9-23.5 15-5-9.3-14.7-15.1-25.3-15zm127.9 0c-20.9 0-37.9 18-37.9 40.3 0 22.3 17 40.3 37.9 40.3 10 0 19.5-4.1 26.3-11.3v7.1c0 1.2 1 2.2 2.2 2.2h13.4c1.2 0 2.2-1 2.2-2.2V54.8c.1-1.2-.9-2.2-2.2-2.2H415c-1.2 0-2.2 1-2.2 2.2v7.1c-6.9-7.2-16.4-11.3-26.3-11.3zm106.1 0c-10 0-19.5 4.1-26.3 11.3v-7.1c0-1.2-1-2.2-2.2-2.2h-13.4c-1.2 0-2.2 1-2.2 2.2V158c0 1.2 1 2.2 2.2 2.2h13.4c1.2 0 2.2-1 2.2-2.2v-38.2c6.9 7.2 16.4 11.3 26.3 11.3 20.9 0 37.9-18 37.9-40.3 0-22.3-17-40.2-37.9-40.2zm185.5 0c-22.7 0-41 18-41 40.3 0 22.3 18.4 40.3 41 40.3s41-18 41-40.3c0-22.3-18.3-40.3-41-40.3zm45.4 2c-1.1 0-2 .9-2 2 0 .4.1.8.3 1.1l23 35-23.3 35.4c-.6.9-.4 2.2.6 2.8.3.2.7.3 1.1.3h15.5c1.2 0 2.3-.6 2.9-1.6l13.8-23.1 13.8 23.1c.6 1 1.7 1.6 2.9 1.6h15.5c1.1 0 2-.9 2-2 0-.4-.1-.7-.3-1.1L766 90.7l23-35c.6-.9.4-2.2-.6-2.8-.3-.2-.7-.3-1.1-.3h-15.5c-1.2 0-2.3.6-2.9 1.6l-13.5 22.7-13.5-22.7c-.6-1-1.7-1.6-2.9-1.6h-15.5zM99.3 54l-8.7 18-17.9 8.7 17.9 8.7 8.7 18 8.8-18 17.9-8.7-17.9-8.7-8.8-18zm290.3 12.7c12.7 0 23 10.7 23.2 23.9v.6c-.1 13.2-10.5 23.9-23.2 23.9-12.8 0-23.2-10.8-23.2-24.2 0-13.4 10.4-24.2 23.2-24.2zm99.8 0c12.8 0 23.2 10.8 23.2 24.2 0 13.4-10.4 24.2-23.2 24.2-12.7 0-23-10.7-23.2-23.9v-.6c.2-13.2 10.5-23.9 23.2-23.9zm96.3 0c12.8 0 23.2 10.8 23.2 24.2 0 13.4-10.4 24.2-23.2 24.2-12.7 0-23-10.7-23.2-23.9v-.6c.2-13.2 10.5-23.9 23.2-23.9zm92.2 0c12.8 0 23.2 10.8 23.2 24.2 0 13.4-10.4 24.2-23.2 24.2-12.8 0-23.2-10.8-23.2-24.2 0-13.4 10.4-24.2 23.2-24.2z%22 fill%3D%22%234264fb%22%2F%3E%3C%2Fsvg%3E");
background-size: 132px 42px;
background-repeat: no-repeat;
display: inline-block;
width: 132px;
height: 42px;
}
/**
* Mapbox logo in white
*
* @memberof Branding
* @example
*
*
*/
.mb-logo--white {
background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 790 180%22%3E%3Cpath d%3D%22M89.1 1.8C39.9 1.8 0 41.7 0 90.9 0 140.1 39.9 180 89.1 180c49.2 0 89.1-39.9 89.1-89.1 0-49.2-39.9-89.1-89.1-89.1zm457.8 19.7c-1.2 0-2.2 1-2.2 2.2v103.2c0 1.2 1 2.2 2.2 2.2h13.4c1.2 0 2.2-1 2.2-2.2v-7.1c6.9 7.2 16.4 11.3 26.3 11.3 20.9 0 37.9-18 37.9-40.3 0-22.3-17-40.2-37.9-40.2-10 0-19.5 4.1-26.3 11.3V23.7c0-1.2-1-2.2-2.2-2.2h-13.4zM98.3 36.4c11.4.3 22.9 4.8 31.7 13.7 17.7 17.7 18.3 45.7 1.4 62.7-30.5 30.5-84.8 20.7-84.8 20.7s-9.8-54.3 20.7-84.8c8.5-8.4 19.7-12.5 31-12.3zm160.3 14.2c-8.2 0-15.9 4-20.8 10.6v-6.4c0-1.2-1-2.2-2.2-2.2h-13.4c-1.2 0-2.2 1-2.2 2.2V127c0 1.2 1 2.2 2.2 2.2h13.4c1.2 0 2.2-1 2.2-2.2V83.8c.5-9.7 7.2-17.3 15.4-17.3 8.5 0 15.6 7.1 15.6 16.5v44c0 1.2 1 2.2 2.2 2.2h13.5c1.2 0 2.2-1 2.2-2.2l-.1-44.9c1.2-8.8 7.6-15.6 15.3-15.6 8.5 0 15.6 7.1 15.6 16.5v44c0 1.2 1 2.2 2.2 2.2h13.5c1.2 0 2.2-1 2.2-2.2l-.1-49.6c.3-14.8-12.3-26.8-27.9-26.8-10 .1-19.2 5.9-23.5 15-5-9.3-14.7-15.1-25.3-15zm127.9 0c-20.9 0-37.9 18-37.9 40.3 0 22.3 17 40.3 37.9 40.3 10 0 19.5-4.1 26.3-11.3v7.1c0 1.2 1 2.2 2.2 2.2h13.4c1.2 0 2.2-1 2.2-2.2V54.8c.1-1.2-.9-2.2-2.2-2.2H415c-1.2 0-2.2 1-2.2 2.2v7.1c-6.9-7.2-16.4-11.3-26.3-11.3zm106.1 0c-10 0-19.5 4.1-26.3 11.3v-7.1c0-1.2-1-2.2-2.2-2.2h-13.4c-1.2 0-2.2 1-2.2 2.2V158c0 1.2 1 2.2 2.2 2.2h13.4c1.2 0 2.2-1 2.2-2.2v-38.2c6.9 7.2 16.4 11.3 26.3 11.3 20.9 0 37.9-18 37.9-40.3 0-22.3-17-40.2-37.9-40.2zm185.5 0c-22.7 0-41 18-41 40.3 0 22.3 18.4 40.3 41 40.3s41-18 41-40.3c0-22.3-18.3-40.3-41-40.3zm45.4 2c-1.1 0-2 .9-2 2 0 .4.1.8.3 1.1l23 35-23.3 35.4c-.6.9-.4 2.2.6 2.8.3.2.7.3 1.1.3h15.5c1.2 0 2.3-.6 2.9-1.6l13.8-23.1 13.8 23.1c.6 1 1.7 1.6 2.9 1.6h15.5c1.1 0 2-.9 2-2 0-.4-.1-.7-.3-1.1L766 90.7l23-35c.6-.9.4-2.2-.6-2.8-.3-.2-.7-.3-1.1-.3h-15.5c-1.2 0-2.3.6-2.9 1.6l-13.5 22.7-13.5-22.7c-.6-1-1.7-1.6-2.9-1.6h-15.5zM99.3 54l-8.7 18-17.9 8.7 17.9 8.7 8.7 18 8.8-18 17.9-8.7-17.9-8.7-8.8-18zm290.3 12.7c12.7 0 23 10.7 23.2 23.9v.6c-.1 13.2-10.5 23.9-23.2 23.9-12.8 0-23.2-10.8-23.2-24.2 0-13.4 10.4-24.2 23.2-24.2zm99.8 0c12.8 0 23.2 10.8 23.2 24.2 0 13.4-10.4 24.2-23.2 24.2-12.7 0-23-10.7-23.2-23.9v-.6c.2-13.2 10.5-23.9 23.2-23.9zm96.3 0c12.8 0 23.2 10.8 23.2 24.2 0 13.4-10.4 24.2-23.2 24.2-12.7 0-23-10.7-23.2-23.9v-.6c.2-13.2 10.5-23.9 23.2-23.9zm92.2 0c12.8 0 23.2 10.8 23.2 24.2 0 13.4-10.4 24.2-23.2 24.2-12.8 0-23.2-10.8-23.2-24.2 0-13.4 10.4-24.2 23.2-24.2z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
}
/**
* Small mapbox logo. Depends on the `mb-icon` class.
*
* @memberof Branding
* @example
*
*
*/
.mb-logo--s {
background-size: 72px 24px !important;
width: 72px !important;
height: 24px !important;
}
/**
* Large mapbox logo. Depends on the `mb-icon` class.
*
* @memberof Branding
* @example
*
*
*/
.mb-logo--l {
background-size: 240px 84px !important;
width: 240px !important;
height: 84px !important;
}
/**
* Mapbox attribution
*
* @memberof Branding
* @example
*
*
*/
.mb-attribution {
background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 80.47 20.02%22%3E%3Cpath d%3D%22M10 1.21c-4.87 0-8.81 3.95-8.81 8.81s3.95 8.81 8.81 8.81 8.81-3.95 8.81-8.81c0-4.87-3.94-8.81-8.81-8.81zm45.28 1.94c-.12 0-.22.1-.22.22v10.21c0 .12.1.22.22.22h1.33c.12 0 .22-.1.22-.22v-.7c.68.71 1.62 1.12 2.6 1.12 1.79 0 3.29-1.34 3.66-3.13.12-.57.12-1.15 0-1.71-.37-1.79-1.87-3.12-3.66-3.12-.98 0-1.93.4-2.6 1.12V3.37c0-.12-.1-.22-.22-.22h-1.33zM10.82 4.63c1.21 0 2.37.49 3.23 1.35 1.75 1.75 1.8 4.52.13 6.21-1.84 1.84-4.55 2.2-6.38 2.2-.67 0-1.34-.05-2-.15 0 0-.97-5.37 2.04-8.39.79-.79 1.86-1.22 2.98-1.22zm20.77 1.38c-.99.01-1.89.59-2.32 1.49-.49-.91-1.44-1.48-2.48-1.48h-.03c-.82.01-1.58.4-2.06 1.05v-.63c-.01-.11-.1-.21-.22-.21h-1.33c-.12 0-.21.09-.22.21v7.15c0 .12.1.22.22.22h1.33c.12 0 .22-.1.22-.22V9.32c.05-.96.71-1.71 1.52-1.71.84 0 1.54.7 1.54 1.63v4.35c0 .12.1.22.22.22h1.34c.12 0 .22-.1.22-.22l-.01-4.44c.12-.87.75-1.54 1.51-1.54.84 0 1.54.7 1.54 1.63v4.35c0 .12.1.22.22.22h1.34c.12 0 .22-.1.22-.22l-.01-4.93c.03-1.46-1.22-2.65-2.76-2.65zm7.82.03c-2.07 0-3.75 1.78-3.75 3.99s1.69 3.99 3.75 3.99c.99 0 1.93-.41 2.6-1.13v.7c0 .12.1.22.22.22h1.33c.12 0 .22-.1.22-.22V6.44c0-.11-.09-.21-.21-.21 0 .01 0 .01-.01.01h-1.33c-.12 0-.22.1-.22.22v.7c-.68-.71-1.62-1.12-2.6-1.12zm10.5 0c-.98 0-1.93.4-2.6 1.12v-.71c0-.12-.1-.22-.22-.22h-1.33c-.12 0-.22.1-.22.22v10.21c0 .12.1.22.22.22h1.33c.12 0 .22-.1.22-.22v-3.78c.68.71 1.62 1.12 2.61 1.12 2.07 0 3.75-1.78 3.75-3.99s-1.69-3.97-3.76-3.97zm18.35 0c-1.89-.01-3.54 1.29-3.96 3.13-.12.56-.12 1.13 0 1.69.42 1.85 2.07 3.16 3.97 3.14 2.24 0 4.06-1.78 4.06-3.99s-1.82-3.97-4.07-3.97zm4.48.19c-.11 0-.2.09-.2.2 0 .04.01.08.03.11l2.28 3.47-2.31 3.5c-.06.09-.03.21.06.27.03.02.07.03.11.03h1.53c.12 0 .23-.06.29-.16l1.37-2.28 1.37 2.28c.06.1.17.16.29.16h1.53c.11 0 .2-.09.2-.2 0-.04-.01-.08-.02-.11L76.96 10l2.26-3.46c.06-.09.03-.21-.06-.27-.03-.02-.07-.03-.11-.03h-1.53c-.12 0-.23.06-.29.16L75.9 8.64l-1.34-2.25c-.06-.1-.17-.16-.29-.16h-1.53zm-61.73.14l-.86 1.78-1.77.86 1.77.86.86 1.78.87-1.78 1.77-.86-1.77-.86-.87-1.78zm28.7 1.25c1.27 0 2.28 1.06 2.3 2.36l.01.07c-.01 1.31-1.04 2.36-2.3 2.36-1.26 0-2.3-1.07-2.3-2.39s1.03-2.4 2.29-2.4zm9.88 0c1.26 0 2.3 1.07 2.3 2.39s-1.03 2.4-2.29 2.41c-1.26 0-2.28-1.06-2.3-2.36v-.07c.02-1.31 1.04-2.37 2.29-2.37zm9.53.01c1.26 0 2.3 1.07 2.3 2.39s-1.03 2.39-2.3 2.39c-1.26 0-2.28-1.06-2.3-2.36v-.06c.02-1.31 1.04-2.36 2.3-2.36zm9.12 0c1.27 0 2.3 1.07 2.3 2.39s-1.03 2.39-2.3 2.4c-1.27 0-2.3-1.07-2.3-2.39s1.03-2.4 2.3-2.4z%22 fill%3D%22%23fff%22 opacity%3D%22.6%22%2F%3E%3Cpath d%3D%22M10 .02c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10c-.01-5.52-4.48-10-10-10zm0 1.18c4.87 0 8.81 3.95 8.81 8.81 0 4.88-3.94 8.82-8.81 8.82-4.87 0-8.81-3.95-8.81-8.81S5.13 1.2 10 1.2zm45.29.76c-.77 0-1.4.63-1.4 1.4v3.57c-.9-1.3-2.38-2.08-3.97-2.09-.7 0-1.39.15-2.02.45-.23-.16-.51-.25-.8-.25h-1.33c-.43 0-.83.2-1.1.53-.02-.03-.04-.05-.07-.08-.27-.29-.65-.45-1.04-.45h-1.32c-.29 0-.57.09-.8.25-.64-.29-1.32-.44-2.02-.44-1.74 0-3.27.95-4.16 2.38-.19-.44-.46-.85-.79-1.19-.76-.77-1.8-1.19-2.88-1.19h-.01c-.85.01-1.67.31-2.34.84-.7-.54-1.56-.84-2.45-.84h-.03c-.28 0-.55.03-.82.1-.27.06-.53.15-.78.27-.2-.11-.43-.17-.67-.17h-1.33c-.78 0-1.4.63-1.4 1.4v7.14c0 .78.63 1.4 1.4 1.4h1.33c.78 0 1.41-.63 1.41-1.41V9.35c.03-.34.22-.56.34-.56.17 0 .36.17.36.45v4.35c0 .78.63 1.4 1.4 1.4h1.34c.78 0 1.4-.63 1.4-1.4l-.01-4.35c.06-.3.24-.45.33-.45.17 0 .36.17.36.45v4.35c0 .78.63 1.4 1.4 1.4h1.34c.78 0 1.4-.63 1.4-1.4v-.36c.91 1.23 2.34 1.96 3.87 1.96.7 0 1.39-.15 2.02-.45.23.16.51.25.8.25h1.32c.29 0 .57-.09.8-.25v1.91c0 .78.63 1.4 1.4 1.4h1.33c.78 0 1.4-.63 1.4-1.4v-1.69c.46.14.94.22 1.42.21 1.62 0 3.07-.83 3.97-2.1v.5c0 .78.63 1.4 1.4 1.4h1.33c.29 0 .57-.09.8-.25.63.3 1.32.45 2.02.45 1.83 0 3.43-1.05 4.28-2.6 1.47 2.52 4.71 3.36 7.22 1.89.17-.1.34-.21.5-.34.21.52.72.87 1.29.86h1.53c.53 0 1.03-.28 1.3-.74l.35-.58.35.58c.28.46.77.74 1.31.74h1.52c.77 0 1.39-.63 1.38-1.39 0-.21-.05-.42-.15-.62l-.07-.12L78.38 10l1.85-2.81c.42-.64.25-1.49-.39-1.92-.01-.01-.02-.01-.03-.02-.22-.14-.48-.21-.74-.21h-1.53c-.53 0-1.03.28-1.3.74l-.32.53-.32-.53c-.28-.46-.77-.74-1.31-.74h-1.53c-.57 0-1.08.35-1.29.88-2.09-1.58-5.03-1.4-6.91.43-.33.32-.62.69-.85 1.09-.85-1.55-2.45-2.6-4.28-2.6-.48 0-.96.07-1.41.22V3.37c0-.78-.63-1.41-1.4-1.41h-1.33zm-.01 1.19h1.33c.12 0 .22.1.22.22v3.78c.68-.71 1.62-1.12 2.6-1.11 1.79 0 3.29 1.33 3.66 3.12.12.57.12 1.15 0 1.71-.37 1.78-1.87 3.13-3.66 3.13-.98 0-1.92-.41-2.6-1.12v.7c0 .12-.1.22-.22.22h-1.33c-.12 0-.22-.1-.22-.22V3.37c0-.12.1-.22.22-.22zM10.91 4.63c-1.12-.02-2.24.38-3.07 1.21-3.01 3.02-2.04 8.39-2.04 8.39s5.37.97 8.39-2.04c1.66-1.69 1.61-4.46-.15-6.21-.87-.87-2.01-1.33-3.13-1.35zM31.6 6.01c1.54 0 2.79 1.19 2.76 2.65l.01 4.91c0 .13-.1.23-.22.24h-1.34c-.12 0-.22-.1-.22-.22V9.24c0-.93-.7-1.63-1.54-1.63-.76 0-1.39.67-1.51 1.54l.01 4.44c0 .12-.1.22-.22.22h-1.34c-.12 0-.22-.1-.22-.22V9.24c0-.93-.7-1.63-1.54-1.63-.81 0-1.47.75-1.52 1.71v4.27c0 .12-.1.22-.22.22h-1.33c-.12 0-.22-.1-.22-.22V6.44c.01-.12.1-.21.22-.21h1.33c.12 0 .21.1.22.21v.63c.48-.65 1.24-1.04 2.06-1.05h.03c1.04 0 1.99.57 2.48 1.48.43-.9 1.33-1.48 2.32-1.49zm7.82.01c.98 0 1.92.41 2.6 1.12v-.7c0-.12.1-.22.22-.22h1.33c.11-.01.21.08.22.2v7.17h-.01c0 .12-.1.22-.22.22h-1.33c-.12 0-.22-.1-.22-.22v-.71c-.67.72-1.61 1.12-2.59 1.12-2.07 0-3.75-1.78-3.75-3.99s1.69-3.99 3.75-3.99zm10.49.02c2.07 0 3.75 1.77 3.75 3.98S51.98 14 49.91 14c-.98 0-1.92-.41-2.6-1.12v3.78c0 .12-.1.22-.22.22h-1.33c-.12 0-.22-.1-.22-.22V6.45c0-.12.1-.21.22-.21h1.33c.12 0 .22.1.22.22v.7c.68-.72 1.62-1.12 2.6-1.12zm18.35 0c2.25 0 4.06 1.78 4.06 3.99s-1.82 3.98-4.06 3.98c-1.9.01-3.55-1.29-3.97-3.14-.12-.56-.12-1.13 0-1.69.42-1.85 2.07-3.15 3.97-3.14zm4.48.19h1.53c.12 0 .23.06.29.16l1.34 2.25 1.34-2.25c.06-.1.17-.16.29-.16h1.53c.04 0 .08.01.11.03.09.06.12.18.06.27L76.96 10l2.31 3.5c.02.03.03.07.03.11-.01.11-.1.2-.21.2h-1.53c-.12 0-.23-.06-.29-.16l-1.37-2.28-1.37 2.28c-.06.1-.17.16-.29.16h-1.53c-.04 0-.08-.01-.11-.03-.09-.06-.12-.18-.06-.27l2.31-3.5-2.28-3.47c-.02-.03-.03-.07-.03-.11 0-.11.09-.2.2-.2zm-61.73.14l.87 1.78 1.77.86-1.77.86-.87 1.78-.86-1.78-1.77-.86 1.77-.86.86-1.78zm28.71 1.26c-1.27 0-2.3 1.07-2.3 2.39s1.03 2.39 2.3 2.39c1.27 0 2.28-1.06 2.3-2.36v-.06c-.02-1.31-1.04-2.36-2.3-2.36zm9.88 0c-1.26 0-2.28 1.06-2.3 2.36v.06c.02 1.31 1.04 2.36 2.3 2.36 1.26 0 2.3-1.07 2.3-2.39s-1.04-2.39-2.3-2.39zm9.52 0c-1.26 0-2.28 1.06-2.3 2.36v.06c.02 1.31 1.04 2.36 2.3 2.36 1.26 0 2.3-1.07 2.3-2.39s-1.03-2.39-2.3-2.39zm9.12 0c-1.27 0-2.3 1.07-2.3 2.39s1.03 2.39 2.3 2.39c1.27 0 2.3-1.07 2.3-2.39s-1.03-2.39-2.3-2.39zM39.73 8.81c.61 0 1.09.53 1.11 1.19v.04c-.01.65-.5 1.18-1.11 1.18-.61 0-1.11-.54-1.11-1.2 0-.67.5-1.21 1.11-1.21zm9.87 0c.6 0 1.11.55 1.11 1.21 0 .66-.5 1.21-1.11 1.21-.6 0-1.09-.53-1.11-1.19V10c.01-.66.51-1.19 1.11-1.19zm9.52 0c.6 0 1.11.54 1.11 1.21 0 .67-.49 1.21-1.11 1.21-.6 0-1.09-.53-1.11-1.19V10c.01-.66.51-1.19 1.11-1.19zm9.12.01c.61 0 1.11.54 1.11 1.21 0 .67-.5 1.2-1.11 1.2-.61 0-1.11-.54-1.11-1.21 0-.67.5-1.2 1.11-1.2z%22 opacity%3D%22.6%22%2F%3E%3C%2Fsvg%3E");
background-size: 84px 24px;
background-repeat: no-repeat;
display: inline-block;
width: 84px;
height: 24px;
}
/* Jekyll (pygments) syntax highlighting */
pre .hll { background-color: #ffffcc; }
/*
* Classes using just the default color:
* pre .nx, Normal Text
* pre .ni Name.Entity
* pre .nf Name.Entity
* pre .no Name.Constant
*/
/* Operator */
/* Comments */
pre .o,
pre .c,
pre .c1,
pre .cp,
pre .cm { color: #999; font-style: italic; }
pre .err { color: #f00000; background-color: #f0a0a0; } /* Error */
pre .k { color: #404040; font-weight: bold; } /* Keyword */
pre .css .k { font-weight: normal; }
pre .cs { color: #404040; font-style: italic; } /* Comment.Special */
pre .gd { color: #a00000; } /* Generic.Deleted */
pre .ge { font-style: italic; } /* Generic.Emph */
pre .gs { font-weight: bold; } /* Generic.Strong */
pre .gr { color: #ff0000; } /* Generic.Error */
pre .gh { color: #000080; } /* Generic.Heading */
pre .gi { color: #00a000; } /* Generic.Inserted */
pre .go { color: #808080; } /* Generic.Output */
pre .gp { color: #c65d09; } /* Generic.Prompt */
pre .gu { color: #800080; } /* Generic.Subheading */
pre .gt { color: #0040d0; } /* Generic.Traceback */
pre .kc { color: #d24400; } /* Keyword.Constant */
/* Keyword.Declaration
* Keyword.Namespace
* Keyword.Reserved */
pre .kd,
pre .kn,
pre .kr,
pre .nt { color: #0b5a91; } /* Name.Tag */
/* Literal.Number */
/* Name.Label */
/* Name.Attribute */
pre .mh,
pre .mo,
pre .il,
pre .mi,
pre .kt,
pre .mf,
pre .nl,
pre .na,
pre .m { color: #0c9dc2; } /* Keyword.Type */
pre .kp { color: #0080f0; } /* Keyword.Pseudo */
pre .nc { color: #df6637; } /* Name.Class */
pre .css .nc { color: #75a21c; }
pre .nd { color: #505050; } /* Name.Decorator */
pre .ne { color: #f00000; } /* Name.Exception */
pre .nn { color: #0e84b5; } /* Name.Namespace */
/* Name.Function */
pre .nf,
pre .nv { color: #003060; } /* Name.Variable */
pre .ow { color: #404040; } /* Operator.Word */
pre .w { color: #bbbbbb; } /* Text.Whitespace */
pre .sc { color: #8080f0; } /* Literal.String.Char */
pre .sd { color: #d04020; } /* Literal.String.Doc */
/* Name.Builtin / Name.Builtin.Pseudo */
pre .bp,
pre .nb { color: #007020; }
/* Literal.String */
pre .s,
pre .sh,
pre .sb,
pre .s1,
pre .sr,
pre .se { color: #75a21c; }
pre .si { background-color: #eee; } /* Literal.String.Interpol */
pre .p { color: #444444; } /* Normal Text */
pre .ss { color: #f0c080; } /* Literal.String.Symbol */
pre .vc { color: #c0c0f0; } /* Name.Variable.Class */
pre .vg { color: #f08040; } /* Name.Variable.Global */
pre .vi { color: #a0a0f0; } /* Name.Variable.Instance */
/**
* We use Swiftype for site-wide search on product sites like mapbox.com and
* /help. Because Swiftype dictates its markup we can"t use assembly classes
* so we apply custom styling here
* @group
* @memberof Miscellaneous
*
*/
.st-result-listing h3 {
font-size: 18px;
line-height: 30px;
padding: 12px 0 6px;
}
.st-result-listing .st-result .st-snippet {
font-size: 15px;
line-height: 24px;
}
.swiftype-widget .autocomplete {
background-color: #fff;
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.1);
display: block;
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
.swiftype-widget .autocomplete ul {
background-color: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
max-height: 400px;
overflow: auto;
display: block;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
.swiftype-widget .autocomplete ul li {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer;
padding: 12px 12px 12px 24px;
list-style-type: none;
margin: 0;
}
.swiftype-widget .autocomplete ul li.active {
background-color: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: none;
}
.swiftype-widget .autocomplete ul li p.title {
font-size: 15px;
line-height: 24px;
font-weight: normal;
color: #4264fb;
}
.swiftype-widget .autocomplete li .sections {
margin-top: 6px;
}
.swiftype-widget .autocomplete ul li em {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-decoration: none;
color: inherit;
}
.swiftype-widget .autocomplete ul li.active { background: rgba(0, 0, 0, 0.05); }
.swiftype-widget .autocomplete ul li.active p.title {
color: #314ccd;
text-shadow: none;
}
.swiftype-widget .autocomplete ul li.active .sections {
text-shadow: none;
color: inherit;
}
.swiftype-widget .autocomplete li p {
padding: 0;
}
.swiftype-widget .autocomplete li p.title {
font-weight: bold;
}
.swiftype-widget .autocomplete li .sections {
color: #999;
}
.swiftype-widget .autocomplete li .sections .section {
display: inline;
}
/** @endgroup */
/* page-loading-indicator rules work with the function by the same name
in mapbox-react-components */
@-webkit-keyframes progress-cycle {
0% { background-color: #314ccd; }
100% { background-color: #5a3fc0; }
}
@keyframes progress-cycle {
0% { background-color: #314ccd; }
100% { background-color: #5a3fc0; }
}
.page-loading-indicator {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
transition: all 150ms ease-in;
animation: progress-cycle 0.75s ease-in-out alternate-reverse infinite;
width: 200%;
z-index: 9999;
}
.page-loading-indicator-enter {
/* -10%, instead of 0%, keeps the rounded corners offscreen */
-webkit-transform: translate3d(-10%, 0, 0);
transform: translate3d(-10%, 0, 0);
transition: all 150ms ease-in;
}
.page-loading-indicator-leave {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
transition: all 150ms ease-in;
}
/* DO NOT MODIFY THIS FILE DIRECTLY!
It is generated by scripts/build-color-variants.js, so any direct
changes will be overridden on the next build. Instead, modify
scripts/build-color-variants.js to produce the output you want */
/* Color variants */
.btn--gray {
background-color: #5b7897;
}
.btn--gray:hover,
.btn--gray.is-active {
background-color: #23374d;
}
.btn--gray-light {
background-color: #c6d2e1;
}
.btn--gray-light:hover,
.btn--gray-light.is-active {
background-color: #5b7897;
}
.btn--pink {
background-color: #ee4e8b;
}
.btn--pink:hover,
.btn--pink.is-active {
background-color: #b43b71;
}
.btn--pink-light {
background-color: #f8c8da;
}
.btn--pink-light:hover,
.btn--pink-light.is-active {
background-color: #ee4e8b;
}
.btn--red {
background-color: #f74e4e;
}
.btn--red:hover,
.btn--red.is-active {
background-color: #ba3b3f;
}
.btn--red-light {
background-color: #f6b7b7;
}
.btn--red-light:hover,
.btn--red-light.is-active {
background-color: #f74e4e;
}
.btn--orange {
background-color: #f79640;
}
.btn--orange:hover,
.btn--orange.is-active {
background-color: #ba7334;
}
.btn--orange-light {
background-color: #fbcea6;
}
.btn--orange-light:hover,
.btn--orange-light.is-active {
background-color: #f79640;
}
.btn--yellow {
background-color: #d9d838;
}
.btn--yellow:hover,
.btn--yellow.is-active {
background-color: #a4a62d;
}
.btn--yellow-light {
background-color: #FFF5A0;
}
.btn--yellow-light:hover,
.btn--yellow-light.is-active {
background-color: #d9d838;
}
.btn--green {
background-color: #33c377;
}
.btn--green:hover,
.btn--green.is-active {
background-color: #269561;
}
.btn--green-light {
background-color: #afdec5;
}
.btn--green-light:hover,
.btn--green-light.is-active {
background-color: #33c377;
}
.btn--blue {
background-color: #4264fb;
}
.btn--blue:hover,
.btn--blue.is-active {
background-color: #314ccd;
}
.btn--blue-light {
background-color: #aab7ef;
}
.btn--blue-light:hover,
.btn--blue-light.is-active {
background-color: #4264fb;
}
.btn--purple {
background-color: #7753eb;
}
.btn--purple:hover,
.btn--purple.is-active {
background-color: #5a3fc0;
}
.btn--purple-light {
background-color: #c5b9eb;
}
.btn--purple-light:hover,
.btn--purple-light.is-active {
background-color: #7753eb;
}
.btn--darken10 {
background-color: rgba(31, 51, 73, 0.10);
}
.btn--darken10:hover,
.btn--darken10.is-active {
background-color: rgba(31, 51, 73, 0.25);
}
.btn--darken25 {
background-color: rgba(31, 51, 73, 0.25);
}
.btn--darken25:hover,
.btn--darken25.is-active {
background-color: rgba(31, 51, 73, 0.50);
}
.btn--darken50 {
background-color: rgba(31, 51, 73, 0.50);
}
.btn--darken50:hover,
.btn--darken50.is-active {
background-color: rgba(31, 51, 73, 0.75);
}
.btn--darken75 {
background-color: rgba(31, 51, 73, 0.75);
}
.btn--darken75:hover,
.btn--darken75.is-active {
background-color: #070b10;
}
.btn--lighten10 {
background-color: rgba(255, 255, 255, 0.1);
}
.btn--lighten10:hover,
.btn--lighten10.is-active {
background-color: rgba(255, 255, 255, 0.25);
}
.btn--lighten25 {
background-color: rgba(255, 255, 255, 0.25);
}
.btn--lighten25:hover,
.btn--lighten25.is-active {
background-color: rgba(255, 255, 255, 0.5);
}
.btn--lighten50 {
background-color: rgba(255, 255, 255, 0.5);
}
.btn--lighten50:hover,
.btn--lighten50.is-active {
background-color: rgba(255, 255, 255, 0.75);
}
.btn--lighten75 {
background-color: rgba(255, 255, 255, 0.75);
}
.btn--lighten75:hover,
.btn--lighten75.is-active {
background-color: #fff;
}
.btn--white {
background-color: #fff;
}
.btn--white:hover,
.btn--white.is-active {
background-color: rgba(255, 255, 255, 0.75);
}
.btn--transparent {
background-color: transparent;
}
.btn--transparent:hover,
.btn--transparent.is-active {
background-color: rgba(31, 51, 73, 0.10);
}
.btn--stroke.btn--gray {
color: #5b7897;
}
.btn--stroke.btn--gray:hover,
.btn--stroke.btn--gray.is-active {
color: #23374d;
}
.btn--stroke.btn--pink {
color: #ee4e8b;
}
.btn--stroke.btn--pink:hover,
.btn--stroke.btn--pink.is-active {
color: #b43b71;
}
.btn--stroke.btn--red {
color: #f74e4e;
}
.btn--stroke.btn--red:hover,
.btn--stroke.btn--red.is-active {
color: #ba3b3f;
}
.btn--stroke.btn--orange {
color: #f79640;
}
.btn--stroke.btn--orange:hover,
.btn--stroke.btn--orange.is-active {
color: #ba7334;
}
.btn--stroke.btn--yellow {
color: #d9d838;
}
.btn--stroke.btn--yellow:hover,
.btn--stroke.btn--yellow.is-active {
color: #a4a62d;
}
.btn--stroke.btn--green {
color: #33c377;
}
.btn--stroke.btn--green:hover,
.btn--stroke.btn--green.is-active {
color: #269561;
}
.btn--stroke.btn--blue {
color: #4264fb;
}
.btn--stroke.btn--blue:hover,
.btn--stroke.btn--blue.is-active {
color: #314ccd;
}
.btn--stroke.btn--purple {
color: #7753eb;
}
.btn--stroke.btn--purple:hover,
.btn--stroke.btn--purple.is-active {
color: #5a3fc0;
}
.btn--stroke.btn--darken25 {
color: rgba(31, 51, 73, 0.25);
}
.btn--stroke.btn--darken25:hover,
.btn--stroke.btn--darken25.is-active {
color: rgba(31, 51, 73, 0.50);
}
.btn--stroke.btn--darken50 {
color: rgba(31, 51, 73, 0.50);
}
.btn--stroke.btn--darken50:hover,
.btn--stroke.btn--darken50.is-active {
color: rgba(31, 51, 73, 0.75);
}
.btn--stroke.btn--darken75 {
color: rgba(31, 51, 73, 0.75);
}
.btn--stroke.btn--darken75:hover,
.btn--stroke.btn--darken75.is-active {
color: #070b10;
}
.btn--stroke.btn--lighten25 {
color: rgba(255, 255, 255, 0.25);
}
.btn--stroke.btn--lighten25:hover,
.btn--stroke.btn--lighten25.is-active {
color: rgba(255, 255, 255, 0.5);
}
.btn--stroke.btn--lighten50 {
color: rgba(255, 255, 255, 0.5);
}
.btn--stroke.btn--lighten50:hover,
.btn--stroke.btn--lighten50.is-active {
color: rgba(255, 255, 255, 0.75);
}
.btn--stroke.btn--lighten75 {
color: rgba(255, 255, 255, 0.75);
}
.btn--stroke.btn--lighten75:hover,
.btn--stroke.btn--lighten75.is-active {
color: #fff;
}
.btn--stroke.btn--white {
color: #fff;
}
.btn--stroke.btn--white:hover,
.btn--stroke.btn--white.is-active {
color: rgba(255, 255, 255, 0.75);
}
.btn--stroke.btn--transparent {
color: transparent;
}
.btn--stroke.btn--transparent:hover,
.btn--stroke.btn--transparent.is-active {
color: rgba(31, 51, 73, 0.10);
}
.btn.btn--stroke {
background-color: transparent;
}
.select--border-gray + .select-arrow {
border-top-color: #5b7897;
}
.select--border-gray:focus + .select-arrow {
border-top-color: #23374d;
}
.select--border-pink + .select-arrow {
border-top-color: #ee4e8b;
}
.select--border-pink:focus + .select-arrow {
border-top-color: #b43b71;
}
.select--border-red + .select-arrow {
border-top-color: #f74e4e;
}
.select--border-red:focus + .select-arrow {
border-top-color: #ba3b3f;
}
.select--border-orange + .select-arrow {
border-top-color: #f79640;
}
.select--border-orange:focus + .select-arrow {
border-top-color: #ba7334;
}
.select--border-yellow + .select-arrow {
border-top-color: #d9d838;
}
.select--border-yellow:focus + .select-arrow {
border-top-color: #a4a62d;
}
.select--border-green + .select-arrow {
border-top-color: #33c377;
}
.select--border-green:focus + .select-arrow {
border-top-color: #269561;
}
.select--border-blue + .select-arrow {
border-top-color: #4264fb;
}
.select--border-blue:focus + .select-arrow {
border-top-color: #314ccd;
}
.select--border-purple + .select-arrow {
border-top-color: #7753eb;
}
.select--border-purple:focus + .select-arrow {
border-top-color: #5a3fc0;
}
.select--border-darken25 + .select-arrow {
border-top-color: rgba(31, 51, 73, 0.25);
}
.select--border-darken25:focus + .select-arrow {
border-top-color: rgba(31, 51, 73, 0.50);
}
.select--border-darken50 + .select-arrow {
border-top-color: rgba(31, 51, 73, 0.50);
}
.select--border-darken50:focus + .select-arrow {
border-top-color: rgba(31, 51, 73, 0.75);
}
.select--border-darken75 + .select-arrow {
border-top-color: rgba(31, 51, 73, 0.75);
}
.select--border-darken75:focus + .select-arrow {
border-top-color: #070b10;
}
.select--border-lighten25 + .select-arrow {
border-top-color: rgba(255, 255, 255, 0.25);
}
.select--border-lighten25:focus + .select-arrow {
border-top-color: rgba(255, 255, 255, 0.5);
}
.select--border-lighten50 + .select-arrow {
border-top-color: rgba(255, 255, 255, 0.5);
}
.select--border-lighten50:focus + .select-arrow {
border-top-color: rgba(255, 255, 255, 0.75);
}
.select--border-lighten75 + .select-arrow {
border-top-color: rgba(255, 255, 255, 0.75);
}
.select--border-lighten75:focus + .select-arrow {
border-top-color: #fff;
}
.select--border-white + .select-arrow {
border-top-color: #fff;
}
.select--border-white:focus + .select-arrow {
border-top-color: rgba(255, 255, 255, 0.75);
}
.select--border-transparent + .select-arrow {
border-top-color: transparent;
}
.select--border-transparent:focus + .select-arrow {
border-top-color: rgba(31, 51, 73, 0.10);
}
.textarea--border-gray,
.input--border-gray,
.select--border-gray {
box-shadow: inset 0 0 0 1px #5b7897;
}
.textarea--border-gray:focus,
.input--border-gray:focus,
.select--border-gray:focus {
box-shadow: inset 0 0 0 1px #23374d;
}
.textarea--border-pink,
.input--border-pink,
.select--border-pink {
box-shadow: inset 0 0 0 1px #ee4e8b;
}
.textarea--border-pink:focus,
.input--border-pink:focus,
.select--border-pink:focus {
box-shadow: inset 0 0 0 1px #b43b71;
}
.textarea--border-red,
.input--border-red,
.select--border-red {
box-shadow: inset 0 0 0 1px #f74e4e;
}
.textarea--border-red:focus,
.input--border-red:focus,
.select--border-red:focus {
box-shadow: inset 0 0 0 1px #ba3b3f;
}
.textarea--border-orange,
.input--border-orange,
.select--border-orange {
box-shadow: inset 0 0 0 1px #f79640;
}
.textarea--border-orange:focus,
.input--border-orange:focus,
.select--border-orange:focus {
box-shadow: inset 0 0 0 1px #ba7334;
}
.textarea--border-yellow,
.input--border-yellow,
.select--border-yellow {
box-shadow: inset 0 0 0 1px #d9d838;
}
.textarea--border-yellow:focus,
.input--border-yellow:focus,
.select--border-yellow:focus {
box-shadow: inset 0 0 0 1px #a4a62d;
}
.textarea--border-green,
.input--border-green,
.select--border-green {
box-shadow: inset 0 0 0 1px #33c377;
}
.textarea--border-green:focus,
.input--border-green:focus,
.select--border-green:focus {
box-shadow: inset 0 0 0 1px #269561;
}
.textarea--border-blue,
.input--border-blue,
.select--border-blue {
box-shadow: inset 0 0 0 1px #4264fb;
}
.textarea--border-blue:focus,
.input--border-blue:focus,
.select--border-blue:focus {
box-shadow: inset 0 0 0 1px #314ccd;
}
.textarea--border-purple,
.input--border-purple,
.select--border-purple {
box-shadow: inset 0 0 0 1px #7753eb;
}
.textarea--border-purple:focus,
.input--border-purple:focus,
.select--border-purple:focus {
box-shadow: inset 0 0 0 1px #5a3fc0;
}
.textarea--border-darken25,
.input--border-darken25,
.select--border-darken25 {
box-shadow: inset 0 0 0 1px rgba(31, 51, 73, 0.25);
}
.textarea--border-darken25:focus,
.input--border-darken25:focus,
.select--border-darken25:focus {
box-shadow: inset 0 0 0 1px rgba(31, 51, 73, 0.50);
}
.textarea--border-darken50,
.input--border-darken50,
.select--border-darken50 {
box-shadow: inset 0 0 0 1px rgba(31, 51, 73, 0.50);
}
.textarea--border-darken50:focus,
.input--border-darken50:focus,
.select--border-darken50:focus {
box-shadow: inset 0 0 0 1px rgba(31, 51, 73, 0.75);
}
.textarea--border-darken75,
.input--border-darken75,
.select--border-darken75 {
box-shadow: inset 0 0 0 1px rgba(31, 51, 73, 0.75);
}
.textarea--border-darken75:focus,
.input--border-darken75:focus,
.select--border-darken75:focus {
box-shadow: inset 0 0 0 1px #070b10;
}
.textarea--border-lighten25,
.input--border-lighten25,
.select--border-lighten25 {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.textarea--border-lighten25:focus,
.input--border-lighten25:focus,
.select--border-lighten25:focus {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.textarea--border-lighten50,
.input--border-lighten50,
.select--border-lighten50 {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.textarea--border-lighten50:focus,
.input--border-lighten50:focus,
.select--border-lighten50:focus {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}
.textarea--border-lighten75,
.input--border-lighten75,
.select--border-lighten75 {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}
.textarea--border-lighten75:focus,
.input--border-lighten75:focus,
.select--border-lighten75:focus {
box-shadow: inset 0 0 0 1px #fff;
}
.textarea--border-white,
.input--border-white,
.select--border-white {
box-shadow: inset 0 0 0 1px #fff;
}
.textarea--border-white:focus,
.input--border-white:focus,
.select--border-white:focus {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}
.textarea--border-transparent,
.input--border-transparent,
.select--border-transparent {
box-shadow: inset 0 0 0 1px transparent;
}
.textarea--border-transparent:focus,
.input--border-transparent:focus,
.select--border-transparent:focus {
box-shadow: inset 0 0 0 1px rgba(31, 51, 73, 0.10);
}
.checkbox--gray {
border-color: #5b7897;
}
input:checked + .checkbox--gray {
background-color: #5b7897;
}
.checkbox--pink {
border-color: #ee4e8b;
}
input:checked + .checkbox--pink {
background-color: #ee4e8b;
}
.checkbox--red {
border-color: #f74e4e;
}
input:checked + .checkbox--red {
background-color: #f74e4e;
}
.checkbox--orange {
border-color: #f79640;
}
input:checked + .checkbox--orange {
background-color: #f79640;
}
.checkbox--yellow {
border-color: #d9d838;
}
input:checked + .checkbox--yellow {
background-color: #d9d838;
}
.checkbox--green {
border-color: #33c377;
}
input:checked + .checkbox--green {
background-color: #33c377;
}
.checkbox--blue {
border-color: #4264fb;
}
input:checked + .checkbox--blue {
background-color: #4264fb;
}
.checkbox--purple {
border-color: #7753eb;
}
input:checked + .checkbox--purple {
background-color: #7753eb;
}
.checkbox--darken25 {
border-color: rgba(31, 51, 73, 0.25);
}
input:checked + .checkbox--darken25 {
background-color: rgba(31, 51, 73, 0.25);
}
.checkbox--darken50 {
border-color: rgba(31, 51, 73, 0.50);
}
input:checked + .checkbox--darken50 {
background-color: rgba(31, 51, 73, 0.50);
}
.checkbox--darken75 {
border-color: rgba(31, 51, 73, 0.75);
}
input:checked + .checkbox--darken75 {
background-color: rgba(31, 51, 73, 0.75);
}
.checkbox--lighten25 {
border-color: rgba(255, 255, 255, 0.25);
}
input:checked + .checkbox--lighten25 {
background-color: rgba(255, 255, 255, 0.25);
}
.checkbox--lighten50 {
border-color: rgba(255, 255, 255, 0.5);
}
input:checked + .checkbox--lighten50 {
background-color: rgba(255, 255, 255, 0.5);
}
.checkbox--lighten75 {
border-color: rgba(255, 255, 255, 0.75);
}
input:checked + .checkbox--lighten75 {
background-color: rgba(255, 255, 255, 0.75);
}
.checkbox--white {
border-color: #fff;
}
input:checked + .checkbox--white {
background-color: #fff;
}
.checkbox--transparent {
border-color: transparent;
}
input:checked + .checkbox--transparent {
background-color: transparent;
}
.radio--gray,
input:checked + .radio--gray {
color: #5b7897;
}
.radio--pink,
input:checked + .radio--pink {
color: #ee4e8b;
}
.radio--red,
input:checked + .radio--red {
color: #f74e4e;
}
.radio--orange,
input:checked + .radio--orange {
color: #f79640;
}
.radio--yellow,
input:checked + .radio--yellow {
color: #d9d838;
}
.radio--green,
input:checked + .radio--green {
color: #33c377;
}
.radio--blue,
input:checked + .radio--blue {
color: #4264fb;
}
.radio--purple,
input:checked + .radio--purple {
color: #7753eb;
}
.radio--darken25,
input:checked + .radio--darken25 {
color: rgba(31, 51, 73, 0.25);
}
.radio--darken50,
input:checked + .radio--darken50 {
color: rgba(31, 51, 73, 0.50);
}
.radio--darken75,
input:checked + .radio--darken75 {
color: rgba(31, 51, 73, 0.75);
}
.radio--lighten25,
input:checked + .radio--lighten25 {
color: rgba(255, 255, 255, 0.25);
}
.radio--lighten50,
input:checked + .radio--lighten50 {
color: rgba(255, 255, 255, 0.5);
}
.radio--lighten75,
input:checked + .radio--lighten75 {
color: rgba(255, 255, 255, 0.75);
}
.radio--white,
input:checked + .radio--white {
color: #fff;
}
.radio--transparent,
input:checked + .radio--transparent {
color: transparent;
}
.toggle--gray {
color: #5b7897;
}
input:checked + .toggle--gray {
background: #5b7897;
}
.toggle--pink {
color: #ee4e8b;
}
input:checked + .toggle--pink {
background: #ee4e8b;
}
.toggle--red {
color: #f74e4e;
}
input:checked + .toggle--red {
background: #f74e4e;
}
.toggle--orange {
color: #f79640;
}
input:checked + .toggle--orange {
background: #f79640;
}
.toggle--yellow {
color: #d9d838;
}
input:checked + .toggle--yellow {
background: #d9d838;
}
.toggle--green {
color: #33c377;
}
input:checked + .toggle--green {
background: #33c377;
}
.toggle--blue {
color: #4264fb;
}
input:checked + .toggle--blue {
background: #4264fb;
}
.toggle--purple {
color: #7753eb;
}
input:checked + .toggle--purple {
background: #7753eb;
}
.toggle--darken25 {
color: rgba(31, 51, 73, 0.25);
}
input:checked + .toggle--darken25 {
background: rgba(31, 51, 73, 0.25);
}
.toggle--darken50 {
color: rgba(31, 51, 73, 0.50);
}
input:checked + .toggle--darken50 {
background: rgba(31, 51, 73, 0.50);
}
.toggle--darken75 {
color: rgba(31, 51, 73, 0.75);
}
input:checked + .toggle--darken75 {
background: rgba(31, 51, 73, 0.75);
}
.toggle--lighten25 {
color: rgba(255, 255, 255, 0.25);
}
input:checked + .toggle--lighten25 {
background: rgba(255, 255, 255, 0.25);
}
.toggle--lighten50 {
color: rgba(255, 255, 255, 0.5);
}
input:checked + .toggle--lighten50 {
background: rgba(255, 255, 255, 0.5);
}
.toggle--lighten75 {
color: rgba(255, 255, 255, 0.75);
}
input:checked + .toggle--lighten75 {
background: rgba(255, 255, 255, 0.75);
}
.toggle--white {
color: #fff;
}
input:checked + .toggle--white {
background: #fff;
}
.toggle--transparent {
color: transparent;
}
input:checked + .toggle--transparent {
background: transparent;
}
input:checked + .toggle--active-gray {
color: #5b7897;
}
input:checked + .toggle--active-pink {
color: #ee4e8b;
}
input:checked + .toggle--active-red {
color: #f74e4e;
}
input:checked + .toggle--active-orange {
color: #f79640;
}
input:checked + .toggle--active-yellow {
color: #d9d838;
}
input:checked + .toggle--active-green {
color: #33c377;
}
input:checked + .toggle--active-blue {
color: #4264fb;
}
input:checked + .toggle--active-purple {
color: #7753eb;
}
input:checked + .toggle--active-darken25 {
color: rgba(31, 51, 73, 0.25);
}
input:checked + .toggle--active-darken50 {
color: rgba(31, 51, 73, 0.50);
}
input:checked + .toggle--active-darken75 {
color: rgba(31, 51, 73, 0.75);
}
input:checked + .toggle--active-lighten25 {
color: rgba(255, 255, 255, 0.25);
}
input:checked + .toggle--active-lighten50 {
color: rgba(255, 255, 255, 0.5);
}
input:checked + .toggle--active-lighten75 {
color: rgba(255, 255, 255, 0.75);
}
input:checked + .toggle--active-white {
color: #fff;
}
input:checked + .toggle--active-transparent {
color: transparent;
}
.switch--gray {
color: #5b7897;
}
input:checked + .switch--gray {
background-color: #5b7897;
}
input:checked + .switch--dot-gray::after {
background-color: #5b7897;
}
.switch--pink {
color: #ee4e8b;
}
input:checked + .switch--pink {
background-color: #ee4e8b;
}
input:checked + .switch--dot-pink::after {
background-color: #ee4e8b;
}
.switch--red {
color: #f74e4e;
}
input:checked + .switch--red {
background-color: #f74e4e;
}
input:checked + .switch--dot-red::after {
background-color: #f74e4e;
}
.switch--orange {
color: #f79640;
}
input:checked + .switch--orange {
background-color: #f79640;
}
input:checked + .switch--dot-orange::after {
background-color: #f79640;
}
.switch--yellow {
color: #d9d838;
}
input:checked + .switch--yellow {
background-color: #d9d838;
}
input:checked + .switch--dot-yellow::after {
background-color: #d9d838;
}
.switch--green {
color: #33c377;
}
input:checked + .switch--green {
background-color: #33c377;
}
input:checked + .switch--dot-green::after {
background-color: #33c377;
}
.switch--blue {
color: #4264fb;
}
input:checked + .switch--blue {
background-color: #4264fb;
}
input:checked + .switch--dot-blue::after {
background-color: #4264fb;
}
.switch--purple {
color: #7753eb;
}
input:checked + .switch--purple {
background-color: #7753eb;
}
input:checked + .switch--dot-purple::after {
background-color: #7753eb;
}
.switch--darken25 {
color: rgba(31, 51, 73, 0.25);
}
input:checked + .switch--darken25 {
background-color: rgba(31, 51, 73, 0.25);
}
input:checked + .switch--dot-darken25::after {
background-color: rgba(31, 51, 73, 0.25);
}
.switch--darken50 {
color: rgba(31, 51, 73, 0.50);
}
input:checked + .switch--darken50 {
background-color: rgba(31, 51, 73, 0.50);
}
input:checked + .switch--dot-darken50::after {
background-color: rgba(31, 51, 73, 0.50);
}
.switch--darken75 {
color: rgba(31, 51, 73, 0.75);
}
input:checked + .switch--darken75 {
background-color: rgba(31, 51, 73, 0.75);
}
input:checked + .switch--dot-darken75::after {
background-color: rgba(31, 51, 73, 0.75);
}
.switch--lighten25 {
color: rgba(255, 255, 255, 0.25);
}
input:checked + .switch--lighten25 {
background-color: rgba(255, 255, 255, 0.25);
}
input:checked + .switch--dot-lighten25::after {
background-color: rgba(255, 255, 255, 0.25);
}
.switch--lighten50 {
color: rgba(255, 255, 255, 0.5);
}
input:checked + .switch--lighten50 {
background-color: rgba(255, 255, 255, 0.5);
}
input:checked + .switch--dot-lighten50::after {
background-color: rgba(255, 255, 255, 0.5);
}
.switch--lighten75 {
color: rgba(255, 255, 255, 0.75);
}
input:checked + .switch--lighten75 {
background-color: rgba(255, 255, 255, 0.75);
}
input:checked + .switch--dot-lighten75::after {
background-color: rgba(255, 255, 255, 0.75);
}
.switch--white {
color: #fff;
}
input:checked + .switch--white {
background-color: #fff;
}
input:checked + .switch--dot-white::after {
background-color: #fff;
}
.switch--transparent {
color: transparent;
}
input:checked + .switch--transparent {
background-color: transparent;
}
input:checked + .switch--dot-transparent::after {
background-color: transparent;
}
.range--gray > input { color: #5b7897; }
.range--pink > input { color: #ee4e8b; }
.range--red > input { color: #f74e4e; }
.range--orange > input { color: #f79640; }
.range--yellow > input { color: #d9d838; }
.range--green > input { color: #33c377; }
.range--blue > input { color: #4264fb; }
.range--purple > input { color: #7753eb; }
.range--darken25 > input { color: rgba(31, 51, 73, 0.25); }
.range--darken50 > input { color: rgba(31, 51, 73, 0.50); }
.range--darken75 > input { color: rgba(31, 51, 73, 0.75); }
.range--lighten25 > input { color: rgba(255, 255, 255, 0.25); }
.range--lighten50 > input { color: rgba(255, 255, 255, 0.5); }
.range--lighten75 > input { color: rgba(255, 255, 255, 0.75); }
.range--white > input { color: #fff; }
.range--transparent > input { color: transparent; }
/**
* @section Text colors
* @memberof Colors
*/
/**
* Apply a text color.
*
* @group
* @memberof Text colors
* @example
*
*
color-gray-dark
*
color-gray
*
color-gray-light
*
color-gray-faint
*
color-pink-dark
*
color-pink
*
color-pink-light
*
color-pink-faint
*
color-red-dark
*
color-red
*
color-red-light
*
color-red-faint
*
color-orange-dark
*
color-orange
*
color-orange-light
*
color-orange-faint
*
color-yellow-dark
*
color-yellow
*
color-yellow-light
*
color-yellow-faint
*
color-green-dark
*
color-green
*
color-green-light
*
color-green-faint
*
color-blue-dark
*
color-blue
*
color-blue-light
*
color-blue-faint
*
color-purple-dark
*
color-purple
*
color-purple-light
*
color-purple-faint
*
color-darken10
*
color-darken25
*
color-darken50
*
color-darken75
*
color-lighten10
*
color-lighten25
*
color-lighten50
*
color-lighten75
*
color-white
*
color-black
*
color-transparent
*
.color-text
*
*
bg-gray-dark
*
bg-gray
*
bg-gray-light
*
bg-gray-faint
*
bg-pink-dark
*
bg-pink
*
bg-pink-light
*
bg-pink-faint
*
bg-red-dark
*
bg-red
*
bg-red-light
*
bg-red-faint
*
bg-orange-dark
*
bg-orange
*
bg-orange-light
*
bg-orange-faint
*
bg-yellow-dark
*
bg-yellow
*
bg-yellow-light
*
bg-yellow-faint
*
bg-green-dark
*
bg-green
*
bg-green-light
*
bg-green-faint
*
bg-blue-dark
*
bg-blue
*
bg-blue-light
*
bg-blue-faint
*
bg-purple-dark
*
bg-purple
*
bg-purple-light
*
bg-purple-faint
*
bg-darken5
*
bg-darken10
*
bg-darken25
*
bg-darken50
*
bg-darken75
*
bg-lighten5
*
bg-lighten10
*
bg-lighten25
*
bg-lighten50
*
bg-lighten75
*
bg-white
*
bg-black
*
bg-transparent
*
border--red
*/
.border--gray-dark {
border-color: #23374d !important;
}
.border--gray {
border-color: #5b7897 !important;
}
.border--gray-light {
border-color: #c6d2e1 !important;
}
.border--gray-faint {
border-color: #f4f7fb !important;
}
.border--pink-dark {
border-color: #b43b71 !important;
}
.border--pink {
border-color: #ee4e8b !important;
}
.border--pink-light {
border-color: #f8c8da !important;
}
.border--pink-faint {
border-color: #fbe5ee !important;
}
.border--red-dark {
border-color: #ba3b3f !important;
}
.border--red {
border-color: #f74e4e !important;
}
.border--red-light {
border-color: #f6b7b7 !important;
}
.border--red-faint {
border-color: #fbe5e5 !important;
}
.border--orange-dark {
border-color: #ba7334 !important;
}
.border--orange {
border-color: #f79640 !important;
}
.border--orange-light {
border-color: #fbcea6 !important;
}
.border--orange-faint {
border-color: #feefe2 !important;
}
.border--yellow-dark {
border-color: #a4a62d !important;
}
.border--yellow {
border-color: #d9d838 !important;
}
.border--yellow-light {
border-color: #FFF5A0 !important;
}
.border--yellow-faint {
border-color: #FCFCDF !important;
}
.border--green-dark {
border-color: #269561 !important;
}
.border--green {
border-color: #33c377 !important;
}
.border--green-light {
border-color: #afdec5 !important;
}
.border--green-faint {
border-color: #e8f5ee !important;
}
.border--blue-dark {
border-color: #314ccd !important;
}
.border--blue {
border-color: #4264fb !important;
}
.border--blue-light {
border-color: #aab7ef !important;
}
.border--blue-faint {
border-color: #edf0fd !important;
}
.border--purple-dark {
border-color: #5a3fc0 !important;
}
.border--purple {
border-color: #7753eb !important;
}
.border--purple-light {
border-color: #c5b9eb !important;
}
.border--purple-faint {
border-color: #f2effa !important;
}
.border--darken10 {
border-color: rgba(31, 51, 73, 0.10) !important;
}
.border--darken25 {
border-color: rgba(31, 51, 73, 0.25) !important;
}
.border--darken50 {
border-color: rgba(31, 51, 73, 0.50) !important;
}
.border--darken75 {
border-color: rgba(31, 51, 73, 0.75) !important;
}
.border--lighten10 {
border-color: rgba(255, 255, 255, 0.1) !important;
}
.border--lighten25 {
border-color: rgba(255, 255, 255, 0.25) !important;
}
.border--lighten50 {
border-color: rgba(255, 255, 255, 0.5) !important;
}
.border--lighten75 {
border-color: rgba(255, 255, 255, 0.75) !important;
}
.border--white {
border-color: #fff !important;
}
.border--black {
border-color: #070b10 !important;
}
.border--transparent {
border-color: transparent !important;
}
/** @endgroup */
/**
* Apply a box shadow.
*
* @group
* @memberof Shadows
* @example
* shadow-darken25
*/
.shadow-darken10 {
box-shadow: 0 0 10px 2px rgba(31, 51, 73, 0.10) !important;
}
.shadow-darken25 {
box-shadow: 0 0 10px 2px rgba(31, 51, 73, 0.25) !important;
}
.shadow-darken50 {
box-shadow: 0 0 10px 2px rgba(31, 51, 73, 0.50) !important;
}
.shadow-darken75 {
box-shadow: 0 0 10px 2px rgba(31, 51, 73, 0.75) !important;
}
.shadow-lighten10 {
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.1) !important;
}
.shadow-lighten25 {
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.25) !important;
}
.shadow-lighten50 {
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5) !important;
}
.shadow-lighten75 {
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.75) !important;
}
/** @endgroup */
/**
* Apply a larger box shadow.
*
* @group
* @memberof Shadows
* @example
* shadow-darken25-bold
*/
.shadow-darken10-bold {
box-shadow: 0 0 30px 6px rgba(31, 51, 73, 0.10) !important;
}
.shadow-darken25-bold {
box-shadow: 0 0 30px 6px rgba(31, 51, 73, 0.25) !important;
}
.shadow-darken50-bold {
box-shadow: 0 0 30px 6px rgba(31, 51, 73, 0.50) !important;
}
.shadow-darken75-bold {
box-shadow: 0 0 30px 6px rgba(31, 51, 73, 0.75) !important;
}
.shadow-lighten10-bold {
box-shadow: 0 0 30px 6px rgba(255, 255, 255, 0.1) !important;
}
.shadow-lighten25-bold {
box-shadow: 0 0 30px 6px rgba(255, 255, 255, 0.25) !important;
}
.shadow-lighten50-bold {
box-shadow: 0 0 30px 6px rgba(255, 255, 255, 0.5) !important;
}
.shadow-lighten75-bold {
box-shadow: 0 0 30px 6px rgba(255, 255, 255, 0.75) !important;
}
/** @endgroup */
/**
* Apply a box shadow on hover and active states.
*
* @group
* @memberof Shadows
* @example
* shadow-darken25-on-hover
* shadow-darken25-on-active (not active)
* shadow-darken25-on-active (active)
*/
.shadow-darken10-on-hover:hover,
.shadow-darken10-on-active.is-active,
.shadow-darken10-on-active.is-active:hover {
box-shadow: 0 0 10px 2px rgba(31, 51, 73, 0.10) !important;
}
.shadow-darken10-bold-on-hover:hover,
.shadow-darken10-bold-on-active.is-active,
.shadow-darken10-bold-on-active.is-active:hover {
box-shadow: 0 0 30px 6px rgba(31, 51, 73, 0.10) !important;
}
.shadow-darken25-on-hover:hover,
.shadow-darken25-on-active.is-active,
.shadow-darken25-on-active.is-active:hover {
box-shadow: 0 0 10px 2px rgba(31, 51, 73, 0.25) !important;
}
.shadow-darken25-bold-on-hover:hover,
.shadow-darken25-bold-on-active.is-active,
.shadow-darken25-bold-on-active.is-active:hover {
box-shadow: 0 0 30px 6px rgba(31, 51, 73, 0.25) !important;
}
.shadow-darken50-on-hover:hover,
.shadow-darken50-on-active.is-active,
.shadow-darken50-on-active.is-active:hover {
box-shadow: 0 0 10px 2px rgba(31, 51, 73, 0.50) !important;
}
.shadow-darken50-bold-on-hover:hover,
.shadow-darken50-bold-on-active.is-active,
.shadow-darken50-bold-on-active.is-active:hover {
box-shadow: 0 0 30px 6px rgba(31, 51, 73, 0.50) !important;
}
.shadow-darken75-on-hover:hover,
.shadow-darken75-on-active.is-active,
.shadow-darken75-on-active.is-active:hover {
box-shadow: 0 0 10px 2px rgba(31, 51, 73, 0.75) !important;
}
.shadow-darken75-bold-on-hover:hover,
.shadow-darken75-bold-on-active.is-active,
.shadow-darken75-bold-on-active.is-active:hover {
box-shadow: 0 0 30px 6px rgba(31, 51, 73, 0.75) !important;
}
.shadow-lighten10-on-hover:hover,
.shadow-lighten10-on-active.is-active,
.shadow-lighten10-on-active.is-active:hover {
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.1) !important;
}
.shadow-lighten10-bold-on-hover:hover,
.shadow-lighten10-bold-on-active.is-active,
.shadow-lighten10-bold-on-active.is-active:hover {
box-shadow: 0 0 30px 6px rgba(255, 255, 255, 0.1) !important;
}
.shadow-lighten25-on-hover:hover,
.shadow-lighten25-on-active.is-active,
.shadow-lighten25-on-active.is-active:hover {
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.25) !important;
}
.shadow-lighten25-bold-on-hover:hover,
.shadow-lighten25-bold-on-active.is-active,
.shadow-lighten25-bold-on-active.is-active:hover {
box-shadow: 0 0 30px 6px rgba(255, 255, 255, 0.25) !important;
}
.shadow-lighten50-on-hover:hover,
.shadow-lighten50-on-active.is-active,
.shadow-lighten50-on-active.is-active:hover {
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5) !important;
}
.shadow-lighten50-bold-on-hover:hover,
.shadow-lighten50-bold-on-active.is-active,
.shadow-lighten50-bold-on-active.is-active:hover {
box-shadow: 0 0 30px 6px rgba(255, 255, 255, 0.5) !important;
}
.shadow-lighten75-on-hover:hover,
.shadow-lighten75-on-active.is-active,
.shadow-lighten75-on-active.is-active:hover {
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.75) !important;
}
.shadow-lighten75-bold-on-hover:hover,
.shadow-lighten75-bold-on-active.is-active,
.shadow-lighten75-bold-on-active.is-active:hover {
box-shadow: 0 0 30px 6px rgba(255, 255, 255, 0.75) !important;
}
/** @endgroup */
/**
* Apply a background color on hover and active states.
*
* @group
* @memberof Background colors
* @example
* bg-darken25-on-hover
* bg-darken25-on-active (not active)
* bg-darken25-on-active (active)
*/
.bg-gray-dark-on-hover:hover,
.bg-gray-dark-on-active.is-active,
.bg-gray-dark-on-active.is-active:hover {
background-color: #23374d !important;
}
.bg-gray-on-hover:hover,
.bg-gray-on-active.is-active,
.bg-gray-on-active.is-active:hover {
background-color: #5b7897 !important;
}
.bg-gray-light-on-hover:hover,
.bg-gray-light-on-active.is-active,
.bg-gray-light-on-active.is-active:hover {
background-color: #c6d2e1 !important;
}
.bg-gray-faint-on-hover:hover,
.bg-gray-faint-on-active.is-active,
.bg-gray-faint-on-active.is-active:hover {
background-color: #f4f7fb !important;
}
.bg-pink-dark-on-hover:hover,
.bg-pink-dark-on-active.is-active,
.bg-pink-dark-on-active.is-active:hover {
background-color: #b43b71 !important;
}
.bg-pink-on-hover:hover,
.bg-pink-on-active.is-active,
.bg-pink-on-active.is-active:hover {
background-color: #ee4e8b !important;
}
.bg-pink-light-on-hover:hover,
.bg-pink-light-on-active.is-active,
.bg-pink-light-on-active.is-active:hover {
background-color: #f8c8da !important;
}
.bg-pink-faint-on-hover:hover,
.bg-pink-faint-on-active.is-active,
.bg-pink-faint-on-active.is-active:hover {
background-color: #fbe5ee !important;
}
.bg-red-dark-on-hover:hover,
.bg-red-dark-on-active.is-active,
.bg-red-dark-on-active.is-active:hover {
background-color: #ba3b3f !important;
}
.bg-red-on-hover:hover,
.bg-red-on-active.is-active,
.bg-red-on-active.is-active:hover {
background-color: #f74e4e !important;
}
.bg-red-light-on-hover:hover,
.bg-red-light-on-active.is-active,
.bg-red-light-on-active.is-active:hover {
background-color: #f6b7b7 !important;
}
.bg-red-faint-on-hover:hover,
.bg-red-faint-on-active.is-active,
.bg-red-faint-on-active.is-active:hover {
background-color: #fbe5e5 !important;
}
.bg-orange-dark-on-hover:hover,
.bg-orange-dark-on-active.is-active,
.bg-orange-dark-on-active.is-active:hover {
background-color: #ba7334 !important;
}
.bg-orange-on-hover:hover,
.bg-orange-on-active.is-active,
.bg-orange-on-active.is-active:hover {
background-color: #f79640 !important;
}
.bg-orange-light-on-hover:hover,
.bg-orange-light-on-active.is-active,
.bg-orange-light-on-active.is-active:hover {
background-color: #fbcea6 !important;
}
.bg-orange-faint-on-hover:hover,
.bg-orange-faint-on-active.is-active,
.bg-orange-faint-on-active.is-active:hover {
background-color: #feefe2 !important;
}
.bg-yellow-dark-on-hover:hover,
.bg-yellow-dark-on-active.is-active,
.bg-yellow-dark-on-active.is-active:hover {
background-color: #a4a62d !important;
}
.bg-yellow-on-hover:hover,
.bg-yellow-on-active.is-active,
.bg-yellow-on-active.is-active:hover {
background-color: #d9d838 !important;
}
.bg-yellow-light-on-hover:hover,
.bg-yellow-light-on-active.is-active,
.bg-yellow-light-on-active.is-active:hover {
background-color: #FFF5A0 !important;
}
.bg-yellow-faint-on-hover:hover,
.bg-yellow-faint-on-active.is-active,
.bg-yellow-faint-on-active.is-active:hover {
background-color: #FCFCDF !important;
}
.bg-green-dark-on-hover:hover,
.bg-green-dark-on-active.is-active,
.bg-green-dark-on-active.is-active:hover {
background-color: #269561 !important;
}
.bg-green-on-hover:hover,
.bg-green-on-active.is-active,
.bg-green-on-active.is-active:hover {
background-color: #33c377 !important;
}
.bg-green-light-on-hover:hover,
.bg-green-light-on-active.is-active,
.bg-green-light-on-active.is-active:hover {
background-color: #afdec5 !important;
}
.bg-green-faint-on-hover:hover,
.bg-green-faint-on-active.is-active,
.bg-green-faint-on-active.is-active:hover {
background-color: #e8f5ee !important;
}
.bg-blue-dark-on-hover:hover,
.bg-blue-dark-on-active.is-active,
.bg-blue-dark-on-active.is-active:hover {
background-color: #314ccd !important;
}
.bg-blue-on-hover:hover,
.bg-blue-on-active.is-active,
.bg-blue-on-active.is-active:hover {
background-color: #4264fb !important;
}
.bg-blue-light-on-hover:hover,
.bg-blue-light-on-active.is-active,
.bg-blue-light-on-active.is-active:hover {
background-color: #aab7ef !important;
}
.bg-blue-faint-on-hover:hover,
.bg-blue-faint-on-active.is-active,
.bg-blue-faint-on-active.is-active:hover {
background-color: #edf0fd !important;
}
.bg-purple-dark-on-hover:hover,
.bg-purple-dark-on-active.is-active,
.bg-purple-dark-on-active.is-active:hover {
background-color: #5a3fc0 !important;
}
.bg-purple-on-hover:hover,
.bg-purple-on-active.is-active,
.bg-purple-on-active.is-active:hover {
background-color: #7753eb !important;
}
.bg-purple-light-on-hover:hover,
.bg-purple-light-on-active.is-active,
.bg-purple-light-on-active.is-active:hover {
background-color: #c5b9eb !important;
}
.bg-purple-faint-on-hover:hover,
.bg-purple-faint-on-active.is-active,
.bg-purple-faint-on-active.is-active:hover {
background-color: #f2effa !important;
}
.bg-darken5-on-hover:hover,
.bg-darken5-on-active.is-active,
.bg-darken5-on-active.is-active:hover {
background-color: rgba(31, 51, 73, 0.05) !important;
}
.bg-darken10-on-hover:hover,
.bg-darken10-on-active.is-active,
.bg-darken10-on-active.is-active:hover {
background-color: rgba(31, 51, 73, 0.10) !important;
}
.bg-darken25-on-hover:hover,
.bg-darken25-on-active.is-active,
.bg-darken25-on-active.is-active:hover {
background-color: rgba(31, 51, 73, 0.25) !important;
}
.bg-darken50-on-hover:hover,
.bg-darken50-on-active.is-active,
.bg-darken50-on-active.is-active:hover {
background-color: rgba(31, 51, 73, 0.50) !important;
}
.bg-darken75-on-hover:hover,
.bg-darken75-on-active.is-active,
.bg-darken75-on-active.is-active:hover {
background-color: rgba(31, 51, 73, 0.75) !important;
}
.bg-lighten5-on-hover:hover,
.bg-lighten5-on-active.is-active,
.bg-lighten5-on-active.is-active:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
}
.bg-lighten10-on-hover:hover,
.bg-lighten10-on-active.is-active,
.bg-lighten10-on-active.is-active:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.bg-lighten25-on-hover:hover,
.bg-lighten25-on-active.is-active,
.bg-lighten25-on-active.is-active:hover {
background-color: rgba(255, 255, 255, 0.25) !important;
}
.bg-lighten50-on-hover:hover,
.bg-lighten50-on-active.is-active,
.bg-lighten50-on-active.is-active:hover {
background-color: rgba(255, 255, 255, 0.5) !important;
}
.bg-lighten75-on-hover:hover,
.bg-lighten75-on-active.is-active,
.bg-lighten75-on-active.is-active:hover {
background-color: rgba(255, 255, 255, 0.75) !important;
}
.bg-white-on-hover:hover,
.bg-white-on-active.is-active,
.bg-white-on-active.is-active:hover {
background-color: #fff !important;
}
.bg-black-on-hover:hover,
.bg-black-on-active.is-active,
.bg-black-on-active.is-active:hover {
background-color: #070b10 !important;
}
.bg-transparent-on-hover:hover,
.bg-transparent-on-active.is-active,
.bg-transparent-on-active.is-active:hover {
background-color: transparent !important;
}
/** @endgroup */
/**
* Apply a text color on hover and active states.
*
* @group
* @memberof Text colors
* @example
* color-red-on-hover
* color-red-on-active (not active)
* color-red-on-active (active)
*/
.color-gray-dark-on-hover:hover,
.color-gray-dark-on-active.is-active,
.color-gray-dark-on-active.is-active:hover {
color: #23374d !important;
}
.color-gray-on-hover:hover,
.color-gray-on-active.is-active,
.color-gray-on-active.is-active:hover {
color: #5b7897 !important;
}
.color-gray-light-on-hover:hover,
.color-gray-light-on-active.is-active,
.color-gray-light-on-active.is-active:hover {
color: #c6d2e1 !important;
}
.color-gray-faint-on-hover:hover,
.color-gray-faint-on-active.is-active,
.color-gray-faint-on-active.is-active:hover {
color: #f4f7fb !important;
}
.color-pink-dark-on-hover:hover,
.color-pink-dark-on-active.is-active,
.color-pink-dark-on-active.is-active:hover {
color: #b43b71 !important;
}
.color-pink-on-hover:hover,
.color-pink-on-active.is-active,
.color-pink-on-active.is-active:hover {
color: #ee4e8b !important;
}
.color-pink-light-on-hover:hover,
.color-pink-light-on-active.is-active,
.color-pink-light-on-active.is-active:hover {
color: #f8c8da !important;
}
.color-pink-faint-on-hover:hover,
.color-pink-faint-on-active.is-active,
.color-pink-faint-on-active.is-active:hover {
color: #fbe5ee !important;
}
.color-red-dark-on-hover:hover,
.color-red-dark-on-active.is-active,
.color-red-dark-on-active.is-active:hover {
color: #ba3b3f !important;
}
.color-red-on-hover:hover,
.color-red-on-active.is-active,
.color-red-on-active.is-active:hover {
color: #f74e4e !important;
}
.color-red-light-on-hover:hover,
.color-red-light-on-active.is-active,
.color-red-light-on-active.is-active:hover {
color: #f6b7b7 !important;
}
.color-red-faint-on-hover:hover,
.color-red-faint-on-active.is-active,
.color-red-faint-on-active.is-active:hover {
color: #fbe5e5 !important;
}
.color-orange-dark-on-hover:hover,
.color-orange-dark-on-active.is-active,
.color-orange-dark-on-active.is-active:hover {
color: #ba7334 !important;
}
.color-orange-on-hover:hover,
.color-orange-on-active.is-active,
.color-orange-on-active.is-active:hover {
color: #f79640 !important;
}
.color-orange-light-on-hover:hover,
.color-orange-light-on-active.is-active,
.color-orange-light-on-active.is-active:hover {
color: #fbcea6 !important;
}
.color-orange-faint-on-hover:hover,
.color-orange-faint-on-active.is-active,
.color-orange-faint-on-active.is-active:hover {
color: #feefe2 !important;
}
.color-yellow-dark-on-hover:hover,
.color-yellow-dark-on-active.is-active,
.color-yellow-dark-on-active.is-active:hover {
color: #a4a62d !important;
}
.color-yellow-on-hover:hover,
.color-yellow-on-active.is-active,
.color-yellow-on-active.is-active:hover {
color: #d9d838 !important;
}
.color-yellow-light-on-hover:hover,
.color-yellow-light-on-active.is-active,
.color-yellow-light-on-active.is-active:hover {
color: #FFF5A0 !important;
}
.color-yellow-faint-on-hover:hover,
.color-yellow-faint-on-active.is-active,
.color-yellow-faint-on-active.is-active:hover {
color: #FCFCDF !important;
}
.color-green-dark-on-hover:hover,
.color-green-dark-on-active.is-active,
.color-green-dark-on-active.is-active:hover {
color: #269561 !important;
}
.color-green-on-hover:hover,
.color-green-on-active.is-active,
.color-green-on-active.is-active:hover {
color: #33c377 !important;
}
.color-green-light-on-hover:hover,
.color-green-light-on-active.is-active,
.color-green-light-on-active.is-active:hover {
color: #afdec5 !important;
}
.color-green-faint-on-hover:hover,
.color-green-faint-on-active.is-active,
.color-green-faint-on-active.is-active:hover {
color: #e8f5ee !important;
}
.color-blue-dark-on-hover:hover,
.color-blue-dark-on-active.is-active,
.color-blue-dark-on-active.is-active:hover {
color: #314ccd !important;
}
.color-blue-on-hover:hover,
.color-blue-on-active.is-active,
.color-blue-on-active.is-active:hover {
color: #4264fb !important;
}
.color-blue-light-on-hover:hover,
.color-blue-light-on-active.is-active,
.color-blue-light-on-active.is-active:hover {
color: #aab7ef !important;
}
.color-blue-faint-on-hover:hover,
.color-blue-faint-on-active.is-active,
.color-blue-faint-on-active.is-active:hover {
color: #edf0fd !important;
}
.color-purple-dark-on-hover:hover,
.color-purple-dark-on-active.is-active,
.color-purple-dark-on-active.is-active:hover {
color: #5a3fc0 !important;
}
.color-purple-on-hover:hover,
.color-purple-on-active.is-active,
.color-purple-on-active.is-active:hover {
color: #7753eb !important;
}
.color-purple-light-on-hover:hover,
.color-purple-light-on-active.is-active,
.color-purple-light-on-active.is-active:hover {
color: #c5b9eb !important;
}
.color-purple-faint-on-hover:hover,
.color-purple-faint-on-active.is-active,
.color-purple-faint-on-active.is-active:hover {
color: #f2effa !important;
}
.color-darken10-on-hover:hover,
.color-darken10-on-active.is-active,
.color-darken10-on-active.is-active:hover {
color: rgba(31, 51, 73, 0.10) !important;
}
.color-darken25-on-hover:hover,
.color-darken25-on-active.is-active,
.color-darken25-on-active.is-active:hover {
color: rgba(31, 51, 73, 0.25) !important;
}
.color-darken50-on-hover:hover,
.color-darken50-on-active.is-active,
.color-darken50-on-active.is-active:hover {
color: rgba(31, 51, 73, 0.50) !important;
}
.color-darken75-on-hover:hover,
.color-darken75-on-active.is-active,
.color-darken75-on-active.is-active:hover {
color: rgba(31, 51, 73, 0.75) !important;
}
.color-lighten10-on-hover:hover,
.color-lighten10-on-active.is-active,
.color-lighten10-on-active.is-active:hover {
color: rgba(255, 255, 255, 0.1) !important;
}
.color-lighten25-on-hover:hover,
.color-lighten25-on-active.is-active,
.color-lighten25-on-active.is-active:hover {
color: rgba(255, 255, 255, 0.25) !important;
}
.color-lighten50-on-hover:hover,
.color-lighten50-on-active.is-active,
.color-lighten50-on-active.is-active:hover {
color: rgba(255, 255, 255, 0.5) !important;
}
.color-lighten75-on-hover:hover,
.color-lighten75-on-active.is-active,
.color-lighten75-on-active.is-active:hover {
color: rgba(255, 255, 255, 0.75) !important;
}
.color-white-on-hover:hover,
.color-white-on-active.is-active,
.color-white-on-active.is-active:hover {
color: #fff !important;
}
.color-black-on-hover:hover,
.color-black-on-active.is-active,
.color-black-on-active.is-active:hover {
color: #070b10 !important;
}
.color-transparent-on-hover:hover,
.color-transparent-on-active.is-active,
.color-transparent-on-active.is-active:hover {
color: transparent !important;
}
/** @endgroup */
/**
* Apply a border color on hover and active states.
*
* @group
* @memberof Borders
* @example
* border--red-on-hover
* border--red-on-active (not active)
* border--red-on-active (active)
*/
.border--gray-dark-on-hover:hover,
.border--gray-dark-on-active.is-active,
.border--gray-dark-on-active.is-active:hover {
border-color: #23374d !important;
}
.border--gray-on-hover:hover,
.border--gray-on-active.is-active,
.border--gray-on-active.is-active:hover {
border-color: #5b7897 !important;
}
.border--gray-light-on-hover:hover,
.border--gray-light-on-active.is-active,
.border--gray-light-on-active.is-active:hover {
border-color: #c6d2e1 !important;
}
.border--gray-faint-on-hover:hover,
.border--gray-faint-on-active.is-active,
.border--gray-faint-on-active.is-active:hover {
border-color: #f4f7fb !important;
}
.border--pink-dark-on-hover:hover,
.border--pink-dark-on-active.is-active,
.border--pink-dark-on-active.is-active:hover {
border-color: #b43b71 !important;
}
.border--pink-on-hover:hover,
.border--pink-on-active.is-active,
.border--pink-on-active.is-active:hover {
border-color: #ee4e8b !important;
}
.border--pink-light-on-hover:hover,
.border--pink-light-on-active.is-active,
.border--pink-light-on-active.is-active:hover {
border-color: #f8c8da !important;
}
.border--pink-faint-on-hover:hover,
.border--pink-faint-on-active.is-active,
.border--pink-faint-on-active.is-active:hover {
border-color: #fbe5ee !important;
}
.border--red-dark-on-hover:hover,
.border--red-dark-on-active.is-active,
.border--red-dark-on-active.is-active:hover {
border-color: #ba3b3f !important;
}
.border--red-on-hover:hover,
.border--red-on-active.is-active,
.border--red-on-active.is-active:hover {
border-color: #f74e4e !important;
}
.border--red-light-on-hover:hover,
.border--red-light-on-active.is-active,
.border--red-light-on-active.is-active:hover {
border-color: #f6b7b7 !important;
}
.border--red-faint-on-hover:hover,
.border--red-faint-on-active.is-active,
.border--red-faint-on-active.is-active:hover {
border-color: #fbe5e5 !important;
}
.border--orange-dark-on-hover:hover,
.border--orange-dark-on-active.is-active,
.border--orange-dark-on-active.is-active:hover {
border-color: #ba7334 !important;
}
.border--orange-on-hover:hover,
.border--orange-on-active.is-active,
.border--orange-on-active.is-active:hover {
border-color: #f79640 !important;
}
.border--orange-light-on-hover:hover,
.border--orange-light-on-active.is-active,
.border--orange-light-on-active.is-active:hover {
border-color: #fbcea6 !important;
}
.border--orange-faint-on-hover:hover,
.border--orange-faint-on-active.is-active,
.border--orange-faint-on-active.is-active:hover {
border-color: #feefe2 !important;
}
.border--yellow-dark-on-hover:hover,
.border--yellow-dark-on-active.is-active,
.border--yellow-dark-on-active.is-active:hover {
border-color: #a4a62d !important;
}
.border--yellow-on-hover:hover,
.border--yellow-on-active.is-active,
.border--yellow-on-active.is-active:hover {
border-color: #d9d838 !important;
}
.border--yellow-light-on-hover:hover,
.border--yellow-light-on-active.is-active,
.border--yellow-light-on-active.is-active:hover {
border-color: #FFF5A0 !important;
}
.border--yellow-faint-on-hover:hover,
.border--yellow-faint-on-active.is-active,
.border--yellow-faint-on-active.is-active:hover {
border-color: #FCFCDF !important;
}
.border--green-dark-on-hover:hover,
.border--green-dark-on-active.is-active,
.border--green-dark-on-active.is-active:hover {
border-color: #269561 !important;
}
.border--green-on-hover:hover,
.border--green-on-active.is-active,
.border--green-on-active.is-active:hover {
border-color: #33c377 !important;
}
.border--green-light-on-hover:hover,
.border--green-light-on-active.is-active,
.border--green-light-on-active.is-active:hover {
border-color: #afdec5 !important;
}
.border--green-faint-on-hover:hover,
.border--green-faint-on-active.is-active,
.border--green-faint-on-active.is-active:hover {
border-color: #e8f5ee !important;
}
.border--blue-dark-on-hover:hover,
.border--blue-dark-on-active.is-active,
.border--blue-dark-on-active.is-active:hover {
border-color: #314ccd !important;
}
.border--blue-on-hover:hover,
.border--blue-on-active.is-active,
.border--blue-on-active.is-active:hover {
border-color: #4264fb !important;
}
.border--blue-light-on-hover:hover,
.border--blue-light-on-active.is-active,
.border--blue-light-on-active.is-active:hover {
border-color: #aab7ef !important;
}
.border--blue-faint-on-hover:hover,
.border--blue-faint-on-active.is-active,
.border--blue-faint-on-active.is-active:hover {
border-color: #edf0fd !important;
}
.border--purple-dark-on-hover:hover,
.border--purple-dark-on-active.is-active,
.border--purple-dark-on-active.is-active:hover {
border-color: #5a3fc0 !important;
}
.border--purple-on-hover:hover,
.border--purple-on-active.is-active,
.border--purple-on-active.is-active:hover {
border-color: #7753eb !important;
}
.border--purple-light-on-hover:hover,
.border--purple-light-on-active.is-active,
.border--purple-light-on-active.is-active:hover {
border-color: #c5b9eb !important;
}
.border--purple-faint-on-hover:hover,
.border--purple-faint-on-active.is-active,
.border--purple-faint-on-active.is-active:hover {
border-color: #f2effa !important;
}
.border--darken10-on-hover:hover,
.border--darken10-on-active.is-active,
.border--darken10-on-active.is-active:hover {
border-color: rgba(31, 51, 73, 0.10) !important;
}
.border--darken25-on-hover:hover,
.border--darken25-on-active.is-active,
.border--darken25-on-active.is-active:hover {
border-color: rgba(31, 51, 73, 0.25) !important;
}
.border--darken50-on-hover:hover,
.border--darken50-on-active.is-active,
.border--darken50-on-active.is-active:hover {
border-color: rgba(31, 51, 73, 0.50) !important;
}
.border--darken75-on-hover:hover,
.border--darken75-on-active.is-active,
.border--darken75-on-active.is-active:hover {
border-color: rgba(31, 51, 73, 0.75) !important;
}
.border--lighten10-on-hover:hover,
.border--lighten10-on-active.is-active,
.border--lighten10-on-active.is-active:hover {
border-color: rgba(255, 255, 255, 0.1) !important;
}
.border--lighten25-on-hover:hover,
.border--lighten25-on-active.is-active,
.border--lighten25-on-active.is-active:hover {
border-color: rgba(255, 255, 255, 0.25) !important;
}
.border--lighten50-on-hover:hover,
.border--lighten50-on-active.is-active,
.border--lighten50-on-active.is-active:hover {
border-color: rgba(255, 255, 255, 0.5) !important;
}
.border--lighten75-on-hover:hover,
.border--lighten75-on-active.is-active,
.border--lighten75-on-active.is-active:hover {
border-color: rgba(255, 255, 255, 0.75) !important;
}
.border--white-on-hover:hover,
.border--white-on-active.is-active,
.border--white-on-active.is-active:hover {
border-color: #fff !important;
}
.border--black-on-hover:hover,
.border--black-on-active.is-active,
.border--black-on-active.is-active:hover {
border-color: #070b10 !important;
}
.border--transparent-on-hover:hover,
.border--transparent-on-active.is-active,
.border--transparent-on-active.is-active:hover {
border-color: transparent !important;
}
/** @endgroup */
@media screen and (min-width: 640px) {
.grid-mm {
display: -webkit-flex !important;
display: flex !important;
-webkit-flex-wrap: wrap !important;
flex-wrap: wrap !important;
}
.col-mm {
display: block;
max-width: 100%;
-webkit-flex-basis: 0;
flex-basis: 0;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 1;
flex-shrink: 1;
}
.col--1-mm { -webkit-flex: none; flex: none; width: 08.3333% !important; }
.col--2-mm { -webkit-flex: none; flex: none; width: 16.6666% !important; }
.col--3-mm { -webkit-flex: none; flex: none; width: 25% !important; }
.col--4-mm { -webkit-flex: none; flex: none; width: 33.3333% !important; }
.col--5-mm { -webkit-flex: none; flex: none; width: 41.6666% !important; }
.col--6-mm { -webkit-flex: none; flex: none; width: 50% !important; }
.col--7-mm { -webkit-flex: none; flex: none; width: 58.3333% !important; }
.col--8-mm { -webkit-flex: none; flex: none; width: 66.6666% !important; }
.col--9-mm { -webkit-flex: none; flex: none; width: 75% !important; }
.col--10-mm { -webkit-flex: none; flex: none; width: 83.3333% !important; }
.col--11-mm { -webkit-flex: none; flex: none; width: 91.6666% !important; }
.col--12-mm { -webkit-flex: none; flex: none; width: 100% !important; }
.col--auto-mm {
width: auto !important;
-webkit-flex: auto;
flex: auto;
}
.col--offl1-mm { margin-left: 08.3333% !important; }
.col--offl2-mm { margin-left: 16.6666% !important; }
.col--offl3-mm { margin-left: 25% !important; }
.col--offl4-mm { margin-left: 33.3333% !important; }
.col--offl5-mm { margin-left: 41.6666% !important; }
.col--offl6-mm { margin-left: 50% !important; }
.col--offl7-mm { margin-left: 58.3333% !important; }
.col--offl8-mm { margin-left: 66.6666% !important; }
.col--offl9-mm { margin-left: 75% !important; }
.col--offl10-mm { margin-left: 83.3333% !important; }
.col--offl11-mm { margin-left: 91.6666% !important; }
.col--offl12-mm { margin-left: 100% !important; }
.col--offr1-mm { margin-right: 08.3333% !important; }
.col--offr2-mm { margin-right: 16.6666% !important; }
.col--offr3-mm { margin-right: 25% !important; }
.col--offr4-mm { margin-right: 33.3333% !important; }
.col--offr5-mm { margin-right: 41.6666% !important; }
.col--offr6-mm { margin-right: 50% !important; }
.col--offr7-mm { margin-right: 58.3333% !important; }
.col--offr8-mm { margin-right: 66.6666% !important; }
.col--offr9-mm { margin-right: 75% !important; }
.col--offr10-mm { margin-right: 83.3333% !important; }
.col--offr11-mm { margin-right: 91.6666% !important; }
.col--offr12-mm { margin-right: 100% !important; }
.inline-mm { display: inline !important; }
.block-mm { display: block !important; }
.inline-block-mm { display: inline-block !important; }
.none-mm { display: none !important; }
.fixed-mm { position: fixed !important; }
.absolute-mm { position: absolute !important; }
.relative-mm { position: relative !important; }
.static-mm { position: static !important; }
.top-mm { top: 0 !important; }
.right-mm { right: 0 !important; }
.left-mm { left: 0 !important; }
.bottom-mm { bottom: 0 !important; }
.z-neg1-mm { z-index: -1 !important; }
.z0-mm { z-index: 0 !important; }
.z1-mm { z-index: 1 !important; }
.z2-mm { z-index: 2 !important; }
.z3-mm { z-index: 3 !important; }
.z4-mm { z-index: 4 !important; }
.z5-mm { z-index: 5 !important; }
.mx-auto-mm { margin-left: auto !important; margin-right: auto !important; }
.viewport-third-mm { height: 33.3333vh !important; }
.viewport-half-mm { height: 50vh !important; }
.viewport-twothirds-mm { height: 66.6666vh !important; }
.viewport-almost-mm { height: 90vh !important; }
.viewport-full-mm { height: 100vh !important; }
.flex-parent-mm { display: -webkit-flex !important; display: flex !important; }
.flex-parent-inline-mm { display: -webkit-inline-flex !important; display: inline-flex !important; }
.flex-parent--column-mm { -webkit-flex-direction: column !important; flex-direction: column !important; }
.flex-parent--column-reverse-mm { -webkit-flex-direction: column-reverse !important; flex-direction: column-reverse !important; }
.flex-parent--row-mm { -webkit-flex-direction: row !important; flex-direction: row !important; }
.flex-parent--row-reverse-mm { -webkit-flex-direction: row-reverse !important; flex-direction: row-reverse !important; }
.flex-parent--wrap-mm { -webkit-flex-wrap: wrap !important; flex-wrap: wrap !important; }
.flex-parent--start-cross-mm { -webkit-align-items: flex-start !important; align-items: flex-start !important; }
.flex-parent--start-main-mm { -webkit-justify-content: flex-start !important; justify-content: flex-start !important; }
.flex-parent--end-cross-mm { -webkit-align-items: flex-end !important; align-items: flex-end !important; }
.flex-parent--end-main-mm { -webkit-justify-content: flex-end !important; justify-content: flex-end !important; }
.flex-parent--center-main-mm { -webkit-justify-content: center !important; justify-content: center !important; }
.flex-parent--center-cross-mm { -webkit-align-items: center !important; align-items: center !important; }
.flex-parent--stretch-cross-mm { -webkit-align-items: stretch !important; align-items: stretch !important; }
.flex-parent--space-between-main-mm { -webkit-justify-content: space-between !important; justify-content: space-between !important; }
.flex-child-mm {
display: block;
max-width: 100%;
}
.flex-child--grow-mm {
-webkit-flex-grow: 1 !important;
flex-grow: 1 !important;
min-width: 0;
}
.flex-child--no-shrink-mm {
-webkit-flex-shrink: 0 !important;
flex-shrink: 0 !important;
}
.bleed-mm {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.bleed-r-mm {
-webkit-flex-grow: 1;
flex-grow: 1;
margin-right: calc(50% - 50vw);
}
.bleed-l-mm {
-webkit-flex-grow: 1;
flex-grow: 1;
margin-left: calc(50% - 50vw);
}
.unbleed-mm {
-webkit-flex-grow: 0;
flex-grow: 0;
margin-left: 0;
margin-right: 0;
}
.fl-mm { float: left !important; }
.fr-mm { float: right !important; }
.unfloat-mm { float: none !important; }
.border-mm {
border-style: solid;
border-width: 1px;
}
.border-t-mm {
border-style: solid;
border-top-width: 1px;
}
.border-r-mm {
border-style: solid;
border-right-width: 1px;
}
.border-b-mm {
border-style: solid;
border-bottom-width: 1px;
}
.border-l-mm {
border-style: solid;
border-left-width: 1px;
}
.border--0-mm { border-width: 0 !important; }
.border-t--0-mm { border-top-width: 0 !important; }
.border-r--0-mm { border-right-width: 0 !important; }
.border-b--0-mm { border-bottom-width: 0 !important; }
.border-l--0-mm { border-left-width: 0 !important; }
.round-mm { border-radius: 4px !important; }
.round-t-mm { border-radius: 4px 4px 0 0 !important; }
.round-r-mm { border-radius: 0 4px 4px 0 !important; }
.round-b-mm { border-radius: 0 0 4px 4px !important; }
.round-l-mm { border-radius: 4px 0 0 4px !important; }
.round-tl-mm { border-top-left-radius: 4px !important; }
.round-tr-mm { border-top-right-radius: 4px !important; }
.round-br-mm { border-bottom-right-radius: 4px !important; }
.round-bl-mm { border-bottom-left-radius: 4px !important; }
.round-bold-mm { border-radius: 8px !important; }
.round-t-bold-mm { border-radius: 8px 8px 0 0 !important; }
.round-r-bold-mm { border-radius: 0 8px 8px 0 !important; }
.round-b-bold-mm { border-radius: 0 0 8px 8px !important; }
.round-l-bold-mm { border-radius: 8px 0 0 8px !important; }
.round-tl-bold-mm { border-top-left-radius: 8px !important; }
.round-tr-bold-mm { border-top-right-radius: 8px !important; }
.round-br-bold-mm { border-bottom-right-radius: 8px !important; }
.round-bl-bold-mm { border-bottom-left-radius: 8px !important; }
.round-full-mm { border-radius: 9999px !important; }
.round-t-full-mm { border-radius: 9999px 9999px 0 0 !important; }
.round-r-full-mm { border-radius: 0 9999px 9999px 0 !important; }
.round-b-full-mm { border-radius: 0 0 9999px 9999px !important; }
.round-l-full-mm { border-radius: 9999px 0 0 9999px !important; }
.round-tl-full-mm { border-top-left-radius: 9999px !important; }
.round-tr-full-mm { border-top-right-radius: 9999px !important; }
.round-br-full-mm { border-bottom-right-radius: 9999px !important; }
.round-bl-full-mm { border-bottom-left-radius: 9999px !important; }
.unround-mm { border-radius: 0 !important; }
.unround-t-mm { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.unround-r-mm { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.unround-b-mm { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.unround-l-mm { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.unround-tl-mm { border-top-left-radius: 0 !important; }
.unround-tr-mm { border-top-right-radius: 0 !important; }
.unround-br-mm { border-bottom-right-radius: 0 !important; }
.unround-bl-mm { border-bottom-left-radius: 0 !important; }
.txt-h1-mm {
font-size: 45px;
line-height: 54px;
}
.txt-h2-mm {
font-size: 35px;
line-height: 42px;
}
.txt-h3-mm {
font-size: 30px;
line-height: 36px;
}
.txt-h4-mm {
font-size: 18px;
line-height: 24px;
}
.txt-h5-mm {
font-size: 15px;
line-height: 18px;
}
.txt-xl-mm {
font-size: 30px;
line-height: 45px;
}
.txt-l-mm {
font-size: 18px;
line-height: 30px;
}
.txt-m-mm {
font-size: 15px;
line-height: 24px;
}
.txt-s-mm {
font-size: 12px;
line-height: 18px;
}
.txt-xs-mm {
font-size: 10px;
line-height: 15px;
}
}
@media screen and (min-width: 800px) {
.grid-ml {
display: -webkit-flex !important;
display: flex !important;
-webkit-flex-wrap: wrap !important;
flex-wrap: wrap !important;
}
.col-ml {
display: block;
max-width: 100%;
-webkit-flex-basis: 0;
flex-basis: 0;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 1;
flex-shrink: 1;
}
.col--1-ml { -webkit-flex: none; flex: none; width: 08.3333% !important; }
.col--2-ml { -webkit-flex: none; flex: none; width: 16.6666% !important; }
.col--3-ml { -webkit-flex: none; flex: none; width: 25% !important; }
.col--4-ml { -webkit-flex: none; flex: none; width: 33.3333% !important; }
.col--5-ml { -webkit-flex: none; flex: none; width: 41.6666% !important; }
.col--6-ml { -webkit-flex: none; flex: none; width: 50% !important; }
.col--7-ml { -webkit-flex: none; flex: none; width: 58.3333% !important; }
.col--8-ml { -webkit-flex: none; flex: none; width: 66.6666% !important; }
.col--9-ml { -webkit-flex: none; flex: none; width: 75% !important; }
.col--10-ml { -webkit-flex: none; flex: none; width: 83.3333% !important; }
.col--11-ml { -webkit-flex: none; flex: none; width: 91.6666% !important; }
.col--12-ml { -webkit-flex: none; flex: none; width: 100% !important; }
.col--auto-ml {
width: auto !important;
-webkit-flex: auto;
flex: auto;
}
.col--offl1-ml { margin-left: 08.3333% !important; }
.col--offl2-ml { margin-left: 16.6666% !important; }
.col--offl3-ml { margin-left: 25% !important; }
.col--offl4-ml { margin-left: 33.3333% !important; }
.col--offl5-ml { margin-left: 41.6666% !important; }
.col--offl6-ml { margin-left: 50% !important; }
.col--offl7-ml { margin-left: 58.3333% !important; }
.col--offl8-ml { margin-left: 66.6666% !important; }
.col--offl9-ml { margin-left: 75% !important; }
.col--offl10-ml { margin-left: 83.3333% !important; }
.col--offl11-ml { margin-left: 91.6666% !important; }
.col--offl12-ml { margin-left: 100% !important; }
.col--offr1-ml { margin-right: 08.3333% !important; }
.col--offr2-ml { margin-right: 16.6666% !important; }
.col--offr3-ml { margin-right: 25% !important; }
.col--offr4-ml { margin-right: 33.3333% !important; }
.col--offr5-ml { margin-right: 41.6666% !important; }
.col--offr6-ml { margin-right: 50% !important; }
.col--offr7-ml { margin-right: 58.3333% !important; }
.col--offr8-ml { margin-right: 66.6666% !important; }
.col--offr9-ml { margin-right: 75% !important; }
.col--offr10-ml { margin-right: 83.3333% !important; }
.col--offr11-ml { margin-right: 91.6666% !important; }
.col--offr12-ml { margin-right: 100% !important; }
.inline-ml { display: inline !important; }
.block-ml { display: block !important; }
.inline-block-ml { display: inline-block !important; }
.none-ml { display: none !important; }
.fixed-ml { position: fixed !important; }
.absolute-ml { position: absolute !important; }
.relative-ml { position: relative !important; }
.static-ml { position: static !important; }
.top-ml { top: 0 !important; }
.right-ml { right: 0 !important; }
.left-ml { left: 0 !important; }
.bottom-ml { bottom: 0 !important; }
.z-neg1-ml { z-index: -1 !important; }
.z0-ml { z-index: 0 !important; }
.z1-ml { z-index: 1 !important; }
.z2-ml { z-index: 2 !important; }
.z3-ml { z-index: 3 !important; }
.z4-ml { z-index: 4 !important; }
.z5-ml { z-index: 5 !important; }
.mx-auto-ml { margin-left: auto !important; margin-right: auto !important; }
.viewport-third-ml { height: 33.3333vh !important; }
.viewport-half-ml { height: 50vh !important; }
.viewport-twothirds-ml { height: 66.6666vh !important; }
.viewport-almost-ml { height: 90vh !important; }
.viewport-full-ml { height: 100vh !important; }
.flex-parent-ml { display: -webkit-flex !important; display: flex !important; }
.flex-parent-inline-ml { display: -webkit-inline-flex !important; display: inline-flex !important; }
.flex-parent--column-ml { -webkit-flex-direction: column !important; flex-direction: column !important; }
.flex-parent--column-reverse-ml { -webkit-flex-direction: column-reverse !important; flex-direction: column-reverse !important; }
.flex-parent--row-ml { -webkit-flex-direction: row !important; flex-direction: row !important; }
.flex-parent--row-reverse-ml { -webkit-flex-direction: row-reverse !important; flex-direction: row-reverse !important; }
.flex-parent--wrap-ml { -webkit-flex-wrap: wrap !important; flex-wrap: wrap !important; }
.flex-parent--start-cross-ml { -webkit-align-items: flex-start !important; align-items: flex-start !important; }
.flex-parent--start-main-ml { -webkit-justify-content: flex-start !important; justify-content: flex-start !important; }
.flex-parent--end-cross-ml { -webkit-align-items: flex-end !important; align-items: flex-end !important; }
.flex-parent--end-main-ml { -webkit-justify-content: flex-end !important; justify-content: flex-end !important; }
.flex-parent--center-main-ml { -webkit-justify-content: center !important; justify-content: center !important; }
.flex-parent--center-cross-ml { -webkit-align-items: center !important; align-items: center !important; }
.flex-parent--stretch-cross-ml { -webkit-align-items: stretch !important; align-items: stretch !important; }
.flex-parent--space-between-main-ml { -webkit-justify-content: space-between !important; justify-content: space-between !important; }
.flex-child-ml {
display: block;
max-width: 100%;
}
.flex-child--grow-ml {
-webkit-flex-grow: 1 !important;
flex-grow: 1 !important;
min-width: 0;
}
.flex-child--no-shrink-ml {
-webkit-flex-shrink: 0 !important;
flex-shrink: 0 !important;
}
.bleed-ml {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.bleed-r-ml {
-webkit-flex-grow: 1;
flex-grow: 1;
margin-right: calc(50% - 50vw);
}
.bleed-l-ml {
-webkit-flex-grow: 1;
flex-grow: 1;
margin-left: calc(50% - 50vw);
}
.unbleed-ml {
-webkit-flex-grow: 0;
flex-grow: 0;
margin-left: 0;
margin-right: 0;
}
.fl-ml { float: left !important; }
.fr-ml { float: right !important; }
.unfloat-ml { float: none !important; }
.border-ml {
border-style: solid;
border-width: 1px;
}
.border-t-ml {
border-style: solid;
border-top-width: 1px;
}
.border-r-ml {
border-style: solid;
border-right-width: 1px;
}
.border-b-ml {
border-style: solid;
border-bottom-width: 1px;
}
.border-l-ml {
border-style: solid;
border-left-width: 1px;
}
.border--0-ml { border-width: 0 !important; }
.border-t--0-ml { border-top-width: 0 !important; }
.border-r--0-ml { border-right-width: 0 !important; }
.border-b--0-ml { border-bottom-width: 0 !important; }
.border-l--0-ml { border-left-width: 0 !important; }
.round-ml { border-radius: 4px !important; }
.round-t-ml { border-radius: 4px 4px 0 0 !important; }
.round-r-ml { border-radius: 0 4px 4px 0 !important; }
.round-b-ml { border-radius: 0 0 4px 4px !important; }
.round-l-ml { border-radius: 4px 0 0 4px !important; }
.round-tl-ml { border-top-left-radius: 4px !important; }
.round-tr-ml { border-top-right-radius: 4px !important; }
.round-br-ml { border-bottom-right-radius: 4px !important; }
.round-bl-ml { border-bottom-left-radius: 4px !important; }
.round-bold-ml { border-radius: 8px !important; }
.round-t-bold-ml { border-radius: 8px 8px 0 0 !important; }
.round-r-bold-ml { border-radius: 0 8px 8px 0 !important; }
.round-b-bold-ml { border-radius: 0 0 8px 8px !important; }
.round-l-bold-ml { border-radius: 8px 0 0 8px !important; }
.round-tl-bold-ml { border-top-left-radius: 8px !important; }
.round-tr-bold-ml { border-top-right-radius: 8px !important; }
.round-br-bold-ml { border-bottom-right-radius: 8px !important; }
.round-bl-bold-ml { border-bottom-left-radius: 8px !important; }
.round-full-ml { border-radius: 9999px !important; }
.round-t-full-ml { border-radius: 9999px 9999px 0 0 !important; }
.round-r-full-ml { border-radius: 0 9999px 9999px 0 !important; }
.round-b-full-ml { border-radius: 0 0 9999px 9999px !important; }
.round-l-full-ml { border-radius: 9999px 0 0 9999px !important; }
.round-tl-full-ml { border-top-left-radius: 9999px !important; }
.round-tr-full-ml { border-top-right-radius: 9999px !important; }
.round-br-full-ml { border-bottom-right-radius: 9999px !important; }
.round-bl-full-ml { border-bottom-left-radius: 9999px !important; }
.unround-ml { border-radius: 0 !important; }
.unround-t-ml { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.unround-r-ml { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.unround-b-ml { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.unround-l-ml { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.unround-tl-ml { border-top-left-radius: 0 !important; }
.unround-tr-ml { border-top-right-radius: 0 !important; }
.unround-br-ml { border-bottom-right-radius: 0 !important; }
.unround-bl-ml { border-bottom-left-radius: 0 !important; }
.txt-h1-ml {
font-size: 45px;
line-height: 54px;
}
.txt-h2-ml {
font-size: 35px;
line-height: 42px;
}
.txt-h3-ml {
font-size: 30px;
line-height: 36px;
}
.txt-h4-ml {
font-size: 18px;
line-height: 24px;
}
.txt-h5-ml {
font-size: 15px;
line-height: 18px;
}
.txt-xl-ml {
font-size: 30px;
line-height: 45px;
}
.txt-l-ml {
font-size: 18px;
line-height: 30px;
}
.txt-m-ml {
font-size: 15px;
line-height: 24px;
}
.txt-s-ml {
font-size: 12px;
line-height: 18px;
}
.txt-xs-ml {
font-size: 10px;
line-height: 15px;
}
}
@media screen and (min-width: 1200px) {
.grid-mxl {
display: -webkit-flex !important;
display: flex !important;
-webkit-flex-wrap: wrap !important;
flex-wrap: wrap !important;
}
.col-mxl {
display: block;
max-width: 100%;
-webkit-flex-basis: 0;
flex-basis: 0;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 1;
flex-shrink: 1;
}
.col--1-mxl { -webkit-flex: none; flex: none; width: 08.3333% !important; }
.col--2-mxl { -webkit-flex: none; flex: none; width: 16.6666% !important; }
.col--3-mxl { -webkit-flex: none; flex: none; width: 25% !important; }
.col--4-mxl { -webkit-flex: none; flex: none; width: 33.3333% !important; }
.col--5-mxl { -webkit-flex: none; flex: none; width: 41.6666% !important; }
.col--6-mxl { -webkit-flex: none; flex: none; width: 50% !important; }
.col--7-mxl { -webkit-flex: none; flex: none; width: 58.3333% !important; }
.col--8-mxl { -webkit-flex: none; flex: none; width: 66.6666% !important; }
.col--9-mxl { -webkit-flex: none; flex: none; width: 75% !important; }
.col--10-mxl { -webkit-flex: none; flex: none; width: 83.3333% !important; }
.col--11-mxl { -webkit-flex: none; flex: none; width: 91.6666% !important; }
.col--12-mxl { -webkit-flex: none; flex: none; width: 100% !important; }
.col--auto-mxl {
width: auto !important;
-webkit-flex: auto;
flex: auto;
}
.col--offl1-mxl { margin-left: 08.3333% !important; }
.col--offl2-mxl { margin-left: 16.6666% !important; }
.col--offl3-mxl { margin-left: 25% !important; }
.col--offl4-mxl { margin-left: 33.3333% !important; }
.col--offl5-mxl { margin-left: 41.6666% !important; }
.col--offl6-mxl { margin-left: 50% !important; }
.col--offl7-mxl { margin-left: 58.3333% !important; }
.col--offl8-mxl { margin-left: 66.6666% !important; }
.col--offl9-mxl { margin-left: 75% !important; }
.col--offl10-mxl { margin-left: 83.3333% !important; }
.col--offl11-mxl { margin-left: 91.6666% !important; }
.col--offl12-mxl { margin-left: 100% !important; }
.col--offr1-mxl { margin-right: 08.3333% !important; }
.col--offr2-mxl { margin-right: 16.6666% !important; }
.col--offr3-mxl { margin-right: 25% !important; }
.col--offr4-mxl { margin-right: 33.3333% !important; }
.col--offr5-mxl { margin-right: 41.6666% !important; }
.col--offr6-mxl { margin-right: 50% !important; }
.col--offr7-mxl { margin-right: 58.3333% !important; }
.col--offr8-mxl { margin-right: 66.6666% !important; }
.col--offr9-mxl { margin-right: 75% !important; }
.col--offr10-mxl { margin-right: 83.3333% !important; }
.col--offr11-mxl { margin-right: 91.6666% !important; }
.col--offr12-mxl { margin-right: 100% !important; }
.inline-mxl { display: inline !important; }
.block-mxl { display: block !important; }
.inline-block-mxl { display: inline-block !important; }
.none-mxl { display: none !important; }
.fixed-mxl { position: fixed !important; }
.absolute-mxl { position: absolute !important; }
.relative-mxl { position: relative !important; }
.static-mxl { position: static !important; }
.top-mxl { top: 0 !important; }
.right-mxl { right: 0 !important; }
.left-mxl { left: 0 !important; }
.bottom-mxl { bottom: 0 !important; }
.z-neg1-mxl { z-index: -1 !important; }
.z0-mxl { z-index: 0 !important; }
.z1-mxl { z-index: 1 !important; }
.z2-mxl { z-index: 2 !important; }
.z3-mxl { z-index: 3 !important; }
.z4-mxl { z-index: 4 !important; }
.z5-mxl { z-index: 5 !important; }
.mx-auto-mxl { margin-left: auto !important; margin-right: auto !important; }
.viewport-third-mxl { height: 33.3333vh !important; }
.viewport-half-mxl { height: 50vh !important; }
.viewport-twothirds-mxl { height: 66.6666vh !important; }
.viewport-almost-mxl { height: 90vh !important; }
.viewport-full-mxl { height: 100vh !important; }
.flex-parent-mxl { display: -webkit-flex !important; display: flex !important; }
.flex-parent-inline-mxl { display: -webkit-inline-flex !important; display: inline-flex !important; }
.flex-parent--column-mxl { -webkit-flex-direction: column !important; flex-direction: column !important; }
.flex-parent--column-reverse-mxl { -webkit-flex-direction: column-reverse !important; flex-direction: column-reverse !important; }
.flex-parent--row-mxl { -webkit-flex-direction: row !important; flex-direction: row !important; }
.flex-parent--row-reverse-mxl { -webkit-flex-direction: row-reverse !important; flex-direction: row-reverse !important; }
.flex-parent--wrap-mxl { -webkit-flex-wrap: wrap !important; flex-wrap: wrap !important; }
.flex-parent--start-cross-mxl { -webkit-align-items: flex-start !important; align-items: flex-start !important; }
.flex-parent--start-main-mxl { -webkit-justify-content: flex-start !important; justify-content: flex-start !important; }
.flex-parent--end-cross-mxl { -webkit-align-items: flex-end !important; align-items: flex-end !important; }
.flex-parent--end-main-mxl { -webkit-justify-content: flex-end !important; justify-content: flex-end !important; }
.flex-parent--center-main-mxl { -webkit-justify-content: center !important; justify-content: center !important; }
.flex-parent--center-cross-mxl { -webkit-align-items: center !important; align-items: center !important; }
.flex-parent--stretch-cross-mxl { -webkit-align-items: stretch !important; align-items: stretch !important; }
.flex-parent--space-between-main-mxl { -webkit-justify-content: space-between !important; justify-content: space-between !important; }
.flex-child-mxl {
display: block;
max-width: 100%;
}
.flex-child--grow-mxl {
-webkit-flex-grow: 1 !important;
flex-grow: 1 !important;
min-width: 0;
}
.flex-child--no-shrink-mxl {
-webkit-flex-shrink: 0 !important;
flex-shrink: 0 !important;
}
.bleed-mxl {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.bleed-r-mxl {
-webkit-flex-grow: 1;
flex-grow: 1;
margin-right: calc(50% - 50vw);
}
.bleed-l-mxl {
-webkit-flex-grow: 1;
flex-grow: 1;
margin-left: calc(50% - 50vw);
}
.unbleed-mxl {
-webkit-flex-grow: 0;
flex-grow: 0;
margin-left: 0;
margin-right: 0;
}
.fl-mxl { float: left !important; }
.fr-mxl { float: right !important; }
.unfloat-mxl { float: none !important; }
.border-mxl {
border-style: solid;
border-width: 1px;
}
.border-t-mxl {
border-style: solid;
border-top-width: 1px;
}
.border-r-mxl {
border-style: solid;
border-right-width: 1px;
}
.border-b-mxl {
border-style: solid;
border-bottom-width: 1px;
}
.border-l-mxl {
border-style: solid;
border-left-width: 1px;
}
.border--0-mxl { border-width: 0 !important; }
.border-t--0-mxl { border-top-width: 0 !important; }
.border-r--0-mxl { border-right-width: 0 !important; }
.border-b--0-mxl { border-bottom-width: 0 !important; }
.border-l--0-mxl { border-left-width: 0 !important; }
.round-mxl { border-radius: 4px !important; }
.round-t-mxl { border-radius: 4px 4px 0 0 !important; }
.round-r-mxl { border-radius: 0 4px 4px 0 !important; }
.round-b-mxl { border-radius: 0 0 4px 4px !important; }
.round-l-mxl { border-radius: 4px 0 0 4px !important; }
.round-tl-mxl { border-top-left-radius: 4px !important; }
.round-tr-mxl { border-top-right-radius: 4px !important; }
.round-br-mxl { border-bottom-right-radius: 4px !important; }
.round-bl-mxl { border-bottom-left-radius: 4px !important; }
.round-bold-mxl { border-radius: 8px !important; }
.round-t-bold-mxl { border-radius: 8px 8px 0 0 !important; }
.round-r-bold-mxl { border-radius: 0 8px 8px 0 !important; }
.round-b-bold-mxl { border-radius: 0 0 8px 8px !important; }
.round-l-bold-mxl { border-radius: 8px 0 0 8px !important; }
.round-tl-bold-mxl { border-top-left-radius: 8px !important; }
.round-tr-bold-mxl { border-top-right-radius: 8px !important; }
.round-br-bold-mxl { border-bottom-right-radius: 8px !important; }
.round-bl-bold-mxl { border-bottom-left-radius: 8px !important; }
.round-full-mxl { border-radius: 9999px !important; }
.round-t-full-mxl { border-radius: 9999px 9999px 0 0 !important; }
.round-r-full-mxl { border-radius: 0 9999px 9999px 0 !important; }
.round-b-full-mxl { border-radius: 0 0 9999px 9999px !important; }
.round-l-full-mxl { border-radius: 9999px 0 0 9999px !important; }
.round-tl-full-mxl { border-top-left-radius: 9999px !important; }
.round-tr-full-mxl { border-top-right-radius: 9999px !important; }
.round-br-full-mxl { border-bottom-right-radius: 9999px !important; }
.round-bl-full-mxl { border-bottom-left-radius: 9999px !important; }
.unround-mxl { border-radius: 0 !important; }
.unround-t-mxl { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.unround-r-mxl { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.unround-b-mxl { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.unround-l-mxl { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.unround-tl-mxl { border-top-left-radius: 0 !important; }
.unround-tr-mxl { border-top-right-radius: 0 !important; }
.unround-br-mxl { border-bottom-right-radius: 0 !important; }
.unround-bl-mxl { border-bottom-left-radius: 0 !important; }
.txt-h1-mxl {
font-size: 45px;
line-height: 54px;
}
.txt-h2-mxl {
font-size: 35px;
line-height: 42px;
}
.txt-h3-mxl {
font-size: 30px;
line-height: 36px;
}
.txt-h4-mxl {
font-size: 18px;
line-height: 24px;
}
.txt-h5-mxl {
font-size: 15px;
line-height: 18px;
}
.txt-xl-mxl {
font-size: 30px;
line-height: 45px;
}
.txt-l-mxl {
font-size: 18px;
line-height: 30px;
}
.txt-m-mxl {
font-size: 15px;
line-height: 24px;
}
.txt-s-mxl {
font-size: 12px;
line-height: 18px;
}
.txt-xs-mxl {
font-size: 10px;
line-height: 15px;
}
}
.get-started {
background: linear-gradient(262.34deg, #58bcf4 -25.17%, #4668f2 100%)
no-repeat center center;
}
.get-started__card-bg {
background: none;
padding: 24px;
}
.get-started__studio {
display: none;
}
.get-started__heading {
margin-bottom: 20px;
max-width: 240px;
}
@media screen and (min-width: 876px) {
.get-started__studio {
display: block;
}
.get-started__card-bg {
background: url('https://static-assets.mapbox.com/www/account/get-started-bg.png');
background-repeat: no-repeat;
background-position: 115% 100%;
padding: 60px;
}
.get-started__card-bg {
background-position: 100% 100%;
}
.get-started__heading {
max-width: 240px;
}
}
@media only screen and (min-width: 876px),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min--moz-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (-webkit-min-device-pixel-ratio: 2.0833333333333335),
only screen and (min-resolution: 200dpi),
only screen and (min-resolution: 1.25dppx) {
.get-started__card-bg {
background: url('https://static-assets.mapbox.com/www/account/get-started-bg-2x.png');
background-repeat: no-repeat;
background-position: 101% 100%;
background-size: 50%;
padding: 60px;
}
}
@media screen and (min-width: 1360px) {
.get-started__heading {
max-width: 100%;
}
}
.get-started__button {
background-color: #fff !important;
color: #233347;
display: -webkit-inline-flex !important;
display: inline-flex !important;
font-size: 15px;
font-family: 'Cera', 'Open Sans', sans-serif !important;
margin-bottom: 48px;
transition: all 0.15s ease-in-out;
}
.get-started__button:hover {
box-shadow: 0px 6px 13px rgba(21, 45, 72, 0.2);
}
.get-started__button:active {
box-shadow: none;
}
.get-started__install-links a:last-of-type {
margin-right: 0;
}
.get-started__install-links a {
width: 48px;
height: 48px;
line-height: 48px;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
margin-right: 12px;
color: #fff;
border-radius: 10px;
border: 1px solid hsla(0, 0%, 100%, 0.3);
transition: all 0.15s ease-in;
}
.get-started__install-links a:hover {
color: #fff;
background-color: hsla(0, 0%, 100%, 0.1);
border: 1px solid hsla(0, 0%, 100%, 0.8);
-webkit-transform: scale(1.02);
transform: scale(1.02);
}
.get-started__install-links a > svg {
width: 30px !important;
height: auto !important;
}
.get-started__sdk {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
color: #fff;
}
.get-started__sdk-heading-web {
display: none;
margin-bottom: 16px;
}
.get-started__sdk-heading-mobile {
display: block;
margin-bottom: 16px;
}
@media screen and (min-width: 876px) {
.get-started__sdk {
-webkit-justify-content: left;
justify-content: left;
-webkit-align-items: baseline;
align-items: baseline;
}
.get-started__sdk-heading-web {
display: block;
}
.get-started__sdk-heading-mobile {
display: none;
}
}
.top-card-wrapper * {
transition: 0.1s all !important;
}
.top-cards-container {
-webkit-flex-wrap: unset !important;
flex-wrap: unset !important;
}
.top-card-wrapper .pointy-link {
position: relative;
padding-right: 20px !important;
padding-top: 8px !important;
border-radius: 50px !important;
}
.top-card-wrapper .pointy-link > .arrow-wrapper > svg {
margin-bottom: 2px;
margin-left: 8px;
}
.top-card-wrapper .pointy-link.extra-padding-on-right {
padding-right: 20px;
}
.top-card-wrapper .pointy-link:hover > .arrow-wrapper > svg,
.top-card-wrapper .pointy-link:focus > .arrow-wrapper > svg {
-webkit-transform: translate(6px, 0px);
transform: translate(6px, 0px);
}
.top-card-wrapper .pointy-link:hover {
cursor: pointer;
}
.top-card-wrapper .pointy-link > .pointy-link-text svg {
height: 20px !important;
}
.top-card-wrapper.gradient-bg {
background: linear-gradient(134.87deg, #52e5e7 -20%, #130cb7 109.89%);
color: #fff !important;
}
.white-borderless-button-override {
box-shadow: none !important;
/* need this to center the focus state's shadow */
padding-left: 8px !important;
left: -8px;
}
.white-borderless-button-override:focus {
box-shadow: 0 0 0 3px rgb(137 199 216 / 65%) !important;
}
.white-button-override:hover {
background-color: rgba(255, 255, 255, 0.25) !important;
color: white !important;
}
#deliveries-call-to-action-wrapper > a:not(:first-child) {
margin-top: 8px;
}
.chunky-icon-button {
width: 36px;
height: 36px;
border: 1px solid white;
border-radius: 8px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.chunky-icon-button:hover,
.chunky-icon-button:active,
.chunky-icon-button:focus {
background-color: rgba(255, 255, 255, 0.25);
}
.chunky-icon-button:first-child {
margin-right: 8px;
}
ul.survey-checkboxes-list {
word-wrap: break-word;
-webkit-column-gap: 30px;
column-gap: 30px;
}
ul.survey-checkboxes-list.columns {
-webkit-columns: 2;
columns: 2;
}
@media screen and (max-width: 730px) {
ul.survey-checkboxes-list.columns {
-webkit-columns: 1;
columns: 1;
}
}
ul.survey-checkboxes-list li {
-webkit-column-break-inside: avoid;
break-inside: avoid;
word-wrap: break-word;
}
.mt2 {
margin-top: 2px !important;
}
/* Overwriting some Assembly classes for consistency with v1.0.0+ */
.survey-txt-h3 {
font-size: 24px;
}
.survey-txt-h5 {
font-size: 16px;
}
.survey-txt-ms {
font-size: 14px;
}
/* Assembly candidates */
.bg-gray-faint-accounts {
background-color: #fbfdff !important;
}
.w500 {
width: 500px !important;
}
.wmax500 {
max-width: 500px !important;
}
.txt-h4 {
font-size: 25px;
line-height: 30px;
}
.txt-h5 {
font-size: 18px;
line-height: 24px;
}
.txt-h6 {
font-size: 15px;
line-height: 18px;
}
.py5 {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.line-h18 {
line-height: 18px !important;
}
.bg-blue-purple-gradient {
background-image: linear-gradient(135deg, #7753eb, #4264fb);
}
.hoverable-img-link .img-hide-on-hover {
-webkit-align-items: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
.hoverable-img-link .img-show-on-hover {
display: none;
}
.hoverable-img-link:hover .img-hide-on-hover,
.hoverable-img-link:active .img-hide-on-hover {
display: none;
}
.hoverable-img-link:hover .img-show-on-hover,
.hoverable-img-link:active .img-show-on-hover {
-webkit-align-items: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
.w-25percent {
width: 25%;
}
.w90 {
width: 90px !important;
}
.border-b--transparent {
border-bottom-color: transparent !important;
}
.pr46 {
padding-right: 46px !important;
}
/* Temporary styling for ControlDate */
.input-s {
font-size: 12px !important;
line-height: 18px !important;
padding: 4px 12px;
margin: 6px 0;
}
.select--s + .select-arrow {
right: 12px !important;
}
.react-control-date > span {
padding: 0px !important;
}
@media screen and (min-width: 640px) {
/* Temporary styling for ControlDate */
.react-control-date > span {
padding: 0 12px !important;
}
.align-l-mm {
text-align: left !important;
}
.align-center-mm {
text-align: center !important;
}
.txt-h3-mm {
font-size: 30px !important;
line-height: 36px !important;
}
.txt-h4-mm {
font-size: 25px !important;
line-height: 30px !important;
}
.txt-h5-mm {
font-size: 18px !important;
line-height: 24px !important;
}
.align-r-mm {
text-align: right !important;
}
.viewportmin-almost-mm {
min-height: 75vh;
}
}
@media screen and (min-width: 800px) {
.align-l-ml {
text-align: left !important;
}
.wmax800-ml {
max-width: 800px !important;
}
}
@media screen and (min-width: 1200px) {
.txt-h5-mxl {
font-size: 18px !important;
line-height: 24px !important;
}
.align-l-mxl {
text-align: left !important;
}
}
/* Account-specific styling */
.nav-item {
position: relative;
}
.nav-item::after {
background: currentColor;
content: '';
height: 2px;
left: 0;
opacity: 0;
position: absolute;
right: 0;
bottom: -1px;
transition: opacity 0.125s, -webkit-transform 0.125s;
transition: opacity 0.125s, transform 0.125s;
transition: opacity 0.125s, transform 0.125s, -webkit-transform 0.125s;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.nav-item--active::after {
opacity: 1;
-webkit-transform: none;
transform: none;
}
@media print {
.grid {
display: -webkit-flex !important;
display: flex !important;
-webkit-flex-wrap: wrap !important;
flex-wrap: wrap !important;
}
.grid--gut120 > .col {
padding-left: 120px !important;
}
.col--6-mm {
-webkit-flex: none;
flex: none;
width: 50% !important;
}
.col--offl6-mm {
margin-left: 50% !important;
}
.col--4-ml {
-webkit-flex: none;
flex: none;
width: 33.3333% !important;
}
.col--8-ml {
-webkit-flex: none;
flex: none;
width: 66.6666% !important;
}
.fl-mm {
float: left !important;
}
.fr-mm {
float: right !important;
}
.ml0-mm {
margin-left: 0 !important;
}
.mt0-mm {
margin-top: 0 !important;
}
.hide-print {
display: none !important;
}
.print-block {
display: block !important;
}
.print-mt0 {
margin-top: 0px !important;
}
.print-border {
border: 1px solid !important;
}
.print-p0 {
padding: 0px !important;
}
.print-mt12 {
margin-top: 12px !important;
}
.print-ml36 {
margin-left: 36px !important;
}
.print-py12 {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.print-pt12 {
padding-top: 12px !important;
}
.print-pb12 {
padding-bottom: 12px !important;
}
.print-txt-h4 {
font-size: 25px !important;
line-height: 30px !important;
}
.print-txt-s {
font-size: 12px !important;
line-height: 18px !important;
}
.print-txt-m {
font-size: 15px !important;
line-height: 24px !important;
}
.print-txt-xs {
font-size: 10px !important;
line-height: 15px !important;
}
.print-align-l {
text-align: left !important;
}
.shell-wrapper,
.shell-header-buffer {
display: none !important;
}
.shell-header-buffer + div {
display: none !important;
}
}
.statistics-datepicker .DateInput_input__small {
font-weight: 400;
font-size: 12px;
color: #1f3349;
text-align: center;
background-color: transparent;
padding: 3px;
}
.statistics-datepicker .DateInput__small {
background-color: transparent;
width: 90px;
}
.statistics-datepicker .DateInput_input__focused {
border: 2px solid #4264fb;
border-radius: 4px;
}
.statistics-datepicker .CalendarDay {
border-radius: 0.1rem;
border: 1px double #f0f0f0;
line-height: 30px;
}
.statistics-datepicker .CalendarDay__selected {
background-color: #4264fb;
}
.statistics-datepicker .CalendarDay__selected:hover {
background-color: #314ccd;
background: #314ccd;
border: 1px double #f0f0f0;
}
.statistics-datepicker .CalendarDay__hovered_span {
background-color: #4264fb;
background: #4264fb;
border: 1px double #f0f0f0;
color: #fff;
}
.statistics-datepicker .CalendarDay__hovered_span:hover {
background-color: #4264fb;
background: #4264fb;
border: 1px double #f0f0f0;
color: #fff;
}
.statistics-datepicker .CalendarDay__selected_span {
background-color: #4264fb;
}
.statistics-datepicker .CalendarDay__selected_span:hover {
background-color: #314ccd;
background: #314ccd;
border: 1px double #f0f0f0;
}
.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:active,
.statistics-datepicker .CalendarDay__blocked_out_of_range:hover {
border: 0;
}
.statistics-datepicker .CalendarDay__selected:active {
background-color: #4264fb;
}
.statistics-datepicker .DateRangePickerInput__withBorder {
border-radius: 4px;
border-color: #c6d2e1;
}
.statistics-datepicker .DateRangePickerInput_arrow {
position: relative;
top: -1.5px;
padding: 0 5px;
font-size: 20px;
}
.PresetDateRangePicker_panel {
padding: 0 22px 11px
}
.PresetDateRangePicker_button {
position: relative;
height: 100%;
text-align: center;
background: 0 0;
border: 2px solid #00a699;
color: #00a699;
padding: 4px 12px;
margin-right: 8px;
font: inherit;
font-weight: 700;
line-height: normal;
overflow: visible;
box-sizing: border-box;
cursor: pointer
}
.PresetDateRangePicker_button:active {
outline: 0
}
.PresetDateRangePicker_button__selected {
color: #fff;
background: #00a699
}
.SingleDatePickerInput {
display: inline-block;
background-color: #fff
}
.SingleDatePickerInput__withBorder {
border-radius: 2px;
border: 1px solid #dbdbdb
}
.SingleDatePickerInput__rtl {
direction: rtl
}
.SingleDatePickerInput__disabled {
background-color: #f2f2f2
}
.SingleDatePickerInput__block {
display: block
}
.SingleDatePickerInput__showClearDate {
padding-right: 30px
}
.SingleDatePickerInput_clearDate {
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
cursor: pointer;
padding: 10px;
margin: 0 10px 0 5px;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
.SingleDatePickerInput_clearDate__default:focus,
.SingleDatePickerInput_clearDate__default:hover {
background: #dbdbdb;
border-radius: 50%
}
.SingleDatePickerInput_clearDate__small {
padding: 6px
}
.SingleDatePickerInput_clearDate__hide {
visibility: hidden
}
.SingleDatePickerInput_clearDate_svg {
fill: #82888a;
height: 12px;
width: 15px;
vertical-align: middle
}
.SingleDatePickerInput_clearDate_svg__small {
height: 9px
}
.SingleDatePickerInput_calendarIcon {
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
cursor: pointer;
display: inline-block;
vertical-align: middle;
padding: 10px;
margin: 0 5px 0 10px
}
.SingleDatePickerInput_calendarIcon_svg {
fill: #82888a;
height: 15px;
width: 14px;
vertical-align: middle
}
.SingleDatePicker {
position: relative;
display: inline-block
}
.SingleDatePicker__block {
display: block
}
.SingleDatePicker_picker {
z-index: 1;
background-color: #fff;
position: absolute
}
.SingleDatePicker_picker__rtl {
direction: rtl
}
.SingleDatePicker_picker__directionLeft {
left: 0
}
.SingleDatePicker_picker__directionRight {
right: 0
}
.SingleDatePicker_picker__portal {
background-color: rgba(0,0,0,.3);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%
}
.SingleDatePicker_picker__fullScreenPortal {
background-color: #fff
}
.SingleDatePicker_closeButton {
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
padding: 15px;
z-index: 2
}
.SingleDatePicker_closeButton:focus,
.SingleDatePicker_closeButton:hover {
color: darken(#cacccd,10%);
text-decoration: none
}
.SingleDatePicker_closeButton_svg {
height: 15px;
width: 15px;
fill: #cacccd
}
.DayPickerKeyboardShortcuts_buttonReset {
background: 0 0;
border: 0;
border-radius: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
cursor: pointer;
font-size: 14px
}
.DayPickerKeyboardShortcuts_buttonReset:active {
outline: 0
}
.DayPickerKeyboardShortcuts_show {
width: 33px;
height: 26px;
position: absolute;
z-index: 2
}
.DayPickerKeyboardShortcuts_show::before {
content: "";
display: block;
position: absolute
}
.DayPickerKeyboardShortcuts_show__bottomRight {
bottom: 0;
right: 0
}
.DayPickerKeyboardShortcuts_show__bottomRight::before {
border-top: 26px solid transparent;
border-right: 33px solid #00a699;
bottom: 0;
right: 0
}
.DayPickerKeyboardShortcuts_show__bottomRight:hover::before {
border-right: 33px solid #008489
}
.DayPickerKeyboardShortcuts_show__topRight {
top: 0;
right: 0
}
.DayPickerKeyboardShortcuts_show__topRight::before {
border-bottom: 26px solid transparent;
border-right: 33px solid #00a699;
top: 0;
right: 0
}
.DayPickerKeyboardShortcuts_show__topRight:hover::before {
border-right: 33px solid #008489
}
.DayPickerKeyboardShortcuts_show__topLeft {
top: 0;
left: 0
}
.DayPickerKeyboardShortcuts_show__topLeft::before {
border-bottom: 26px solid transparent;
border-left: 33px solid #00a699;
top: 0;
left: 0
}
.DayPickerKeyboardShortcuts_show__topLeft:hover::before {
border-left: 33px solid #008489
}
.DayPickerKeyboardShortcuts_showSpan {
color: #fff;
position: absolute
}
.DayPickerKeyboardShortcuts_showSpan__bottomRight {
bottom: 0;
right: 5px
}
.DayPickerKeyboardShortcuts_showSpan__topRight {
top: 1px;
right: 5px
}
.DayPickerKeyboardShortcuts_showSpan__topLeft {
top: 1px;
left: 5px
}
.DayPickerKeyboardShortcuts_panel {
overflow: auto;
background: #fff;
border: 1px solid #dbdbdb;
border-radius: 2px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 2;
padding: 22px;
margin: 33px;
text-align: left
}
.DayPickerKeyboardShortcuts_title {
font-size: 16px;
font-weight: 700;
margin: 0
}
.DayPickerKeyboardShortcuts_list {
list-style: none;
padding: 0;
font-size: 14px
}
.DayPickerKeyboardShortcuts_close {
position: absolute;
right: 22px;
top: 22px;
z-index: 2
}
.DayPickerKeyboardShortcuts_close:active {
outline: 0
}
.DayPickerKeyboardShortcuts_closeSvg {
height: 15px;
width: 15px;
fill: #cacccd
}
.DayPickerKeyboardShortcuts_closeSvg:focus,
.DayPickerKeyboardShortcuts_closeSvg:hover {
fill: #82888a
}
.CalendarDay {
box-sizing: border-box;
cursor: pointer;
font-size: 14px;
text-align: center
}
.CalendarDay:active {
outline: 0
}
.CalendarDay__defaultCursor {
cursor: default
}
.CalendarDay__default {
border: 1px solid #e4e7e7;
color: #484848;
background: #fff
}
.CalendarDay__default:hover {
background: #e4e7e7;
border: 1px solid #e4e7e7;
color: inherit
}
.CalendarDay__hovered_offset {
background: #f4f5f5;
border: 1px double #e4e7e7;
color: inherit
}
.CalendarDay__outside {
border: 0;
background: #fff;
color: #484848
}
.CalendarDay__outside:hover {
border: 0
}
.CalendarDay__blocked_minimum_nights {
background: #fff;
border: 1px solid #eceeee;
color: #cacccd
}
.CalendarDay__blocked_minimum_nights:active,
.CalendarDay__blocked_minimum_nights:hover {
background: #fff;
color: #cacccd
}
.CalendarDay__highlighted_calendar {
background: #ffe8bc;
color: #484848
}
.CalendarDay__highlighted_calendar:active,
.CalendarDay__highlighted_calendar:hover {
background: #ffce71;
color: #484848
}
.CalendarDay__selected_span {
background: #66e2da;
border: 1px double #33dacd;
color: #fff
}
.CalendarDay__selected_span:active,
.CalendarDay__selected_span:hover {
background: #33dacd;
border: 1px double #33dacd;
color: #fff
}
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
background: #00a699;
border: 1px double #00a699;
color: #fff
}
.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
background: #b2f1ec;
border: 1px double #80e8e0;
color: #007a87
}
.CalendarDay__hovered_span:active {
background: #80e8e0;
border: 1px double #80e8e0;
color: #007a87
}
.CalendarDay__blocked_calendar,
.CalendarDay__blocked_calendar:active,
.CalendarDay__blocked_calendar:hover {
background: #cacccd;
border: 1px solid #cacccd;
color: #82888a
}
.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:active,
.CalendarDay__blocked_out_of_range:hover {
background: #fff;
border: 1px solid #e4e7e7;
color: #cacccd
}
.CalendarDay__hovered_start_first_possible_end {
background: #eceeee;
border: 1px double #eceeee
}
.CalendarDay__hovered_start_blocked_min_nights {
background: #eceeee;
border: 1px double #e4e7e7
}
.CalendarMonth {
background: #fff;
text-align: center;
vertical-align: top;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none
}
.CalendarMonth_table {
border-collapse: collapse;
border-spacing: 0
}
.CalendarMonth_verticalSpacing {
border-collapse: separate
}
.CalendarMonth_caption {
color: #484848;
font-size: 18px;
text-align: center;
padding-top: 22px;
padding-bottom: 37px;
caption-side: initial
}
.CalendarMonth_caption__verticalScrollable {
padding-top: 12px;
padding-bottom: 7px
}
.CalendarMonthGrid {
background: #fff;
text-align: left;
z-index: 0
}
.CalendarMonthGrid__animating {
z-index: 1
}
.CalendarMonthGrid__horizontal {
position: absolute;
left: 9px
}
.CalendarMonthGrid__vertical,
.CalendarMonthGrid__vertical_scrollable {
margin: 0 auto
}
.CalendarMonthGrid_month__horizontal {
display: inline-block;
vertical-align: top;
min-height: 100%
}
.CalendarMonthGrid_month__hideForAnimation {
position: absolute;
z-index: -1;
opacity: 0;
pointer-events: none
}
.CalendarMonthGrid_month__hidden {
visibility: hidden
}
.DayPickerNavigation {
position: relative;
z-index: 2
}
.DayPickerNavigation__horizontal {
height: 0
}
.DayPickerNavigation__verticalScrollable_prevNav {
z-index: 1
}
.DayPickerNavigation__verticalDefault {
position: absolute;
width: 100%;
height: 52px;
bottom: 0;
left: 0
}
.DayPickerNavigation__verticalScrollableDefault {
position: relative
}
.DayPickerNavigation__bottom {
height: auto
}
.DayPickerNavigation__bottomDefault {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between
}
.DayPickerNavigation_button {
cursor: pointer;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
border: 0;
padding: 0;
margin: 0
}
.DayPickerNavigation_button__default {
border: 1px solid #e4e7e7;
background-color: #fff;
color: #757575
}
.DayPickerNavigation_button__default:focus,
.DayPickerNavigation_button__default:hover {
border: 1px solid #c4c4c4
}
.DayPickerNavigation_button__default:active {
background: #f2f2f2
}
.DayPickerNavigation_button__disabled {
cursor: default;
border: 1px solid #f2f2f2
}
.DayPickerNavigation_button__disabled:focus,
.DayPickerNavigation_button__disabled:hover {
border: 1px solid #f2f2f2
}
.DayPickerNavigation_button__disabled:active {
background: 0 0
}
.DayPickerNavigation_button__horizontalDefault {
position: absolute;
top: 18px;
line-height: .78;
border-radius: 3px;
padding: 6px 9px
}
.DayPickerNavigation_bottomButton__horizontalDefault {
position: static;
margin: -10px 22px 30px
}
.DayPickerNavigation_leftButton__horizontalDefault {
left: 22px
}
.DayPickerNavigation_rightButton__horizontalDefault {
right: 22px
}
.DayPickerNavigation_button__verticalDefault {
padding: 5px;
background: #fff;
box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
position: relative;
display: inline-block;
text-align: center;
height: 100%;
width: 50%
}
.DayPickerNavigation_nextButton__verticalDefault {
border-left: 0
}
.DayPickerNavigation_nextButton__verticalScrollableDefault,
.DayPickerNavigation_prevButton__verticalScrollableDefault {
width: 100%
}
.DayPickerNavigation_svg__horizontal {
height: 19px;
width: 19px;
fill: #82888a;
display: block
}
.DayPickerNavigation_svg__vertical {
height: 42px;
width: 42px;
fill: #484848
}
.DayPickerNavigation_svg__disabled {
fill: #f2f2f2
}
.DayPicker {
background: #fff;
position: relative;
text-align: left
}
.DayPicker__horizontal {
background: #fff
}
.DayPicker__verticalScrollable {
height: 100%
}
.DayPicker__hidden {
visibility: hidden
}
.DayPicker__withBorder {
box-shadow: 0 2px 6px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.07);
border-radius: 3px
}
.DayPicker_portal__horizontal {
box-shadow: none;
position: absolute;
left: 50%;
top: 50%
}
.DayPicker_portal__vertical {
position: initial
}
.DayPicker_focusRegion {
outline: 0
}
.DayPicker_calendarInfo__horizontal,
.DayPicker_wrapper__horizontal {
display: inline-block;
vertical-align: top
}
.DayPicker_weekHeaders {
position: relative
}
.DayPicker_weekHeaders__horizontal {
margin-left: 9px
}
.DayPicker_weekHeader {
color: #757575;
position: absolute;
top: 62px;
z-index: 2;
text-align: left
}
.DayPicker_weekHeader__vertical {
left: 50%
}
.DayPicker_weekHeader__verticalScrollable {
top: 0;
display: table-row;
border-bottom: 1px solid #dbdbdb;
background: #fff;
margin-left: 0;
left: 0;
width: 100%;
text-align: center
}
.DayPicker_weekHeader_ul {
list-style: none;
margin: 1px 0;
padding-left: 0;
padding-right: 0;
font-size: 14px
}
.DayPicker_weekHeader_li {
display: inline-block;
text-align: center
}
.DayPicker_transitionContainer {
position: relative;
overflow: hidden;
border-radius: 3px
}
.DayPicker_transitionContainer__horizontal {
transition: height .2s ease-in-out
}
.DayPicker_transitionContainer__vertical {
width: 100%
}
.DayPicker_transitionContainer__verticalScrollable {
padding-top: 20px;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow-y: scroll
}
.DateInput {
margin: 0;
padding: 0;
background: #fff;
position: relative;
display: inline-block;
width: 130px;
vertical-align: middle
}
.DateInput__small {
width: 97px
}
.DateInput__block {
width: 100%
}
.DateInput__disabled {
background: #f2f2f2;
color: #dbdbdb
}
.DateInput_input {
font-weight: 200;
font-size: 19px;
line-height: 24px;
color: #484848;
background-color: #fff;
width: 100%;
padding: 11px 11px 9px;
border: 0;
border-top: 0;
border-right: 0;
border-bottom: 2px solid transparent;
border-left: 0;
border-radius: 0
}
.DateInput_input__small {
font-size: 15px;
line-height: 18px;
letter-spacing: .2px;
padding: 7px 7px 5px
}
.DateInput_input__regular {
font-weight: auto
}
.DateInput_input__readOnly {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none
}
.DateInput_input__focused {
outline: 0;
background: #fff;
border: 0;
border-top: 0;
border-right: 0;
border-bottom: 2px solid #008489;
border-left: 0
}
.DateInput_input__disabled {
background: #f2f2f2;
font-style: italic
}
.DateInput_screenReaderMessage {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.DateInput_fang {
position: absolute;
width: 20px;
height: 10px;
left: 22px;
z-index: 2
}
.DateInput_fangShape {
fill: #fff
}
.DateInput_fangStroke {
stroke: #dbdbdb;
fill: transparent
}
.DateRangePickerInput {
background-color: #fff;
display: inline-block
}
.DateRangePickerInput__disabled {
background: #f2f2f2
}
.DateRangePickerInput__withBorder {
border-radius: 2px;
border: 1px solid #dbdbdb
}
.DateRangePickerInput__rtl {
direction: rtl
}
.DateRangePickerInput__block {
display: block
}
.DateRangePickerInput__showClearDates {
padding-right: 30px
}
.DateRangePickerInput_arrow {
display: inline-block;
vertical-align: middle;
color: #484848
}
.DateRangePickerInput_arrow_svg {
vertical-align: middle;
fill: #484848;
height: 24px;
width: 24px
}
.DateRangePickerInput_clearDates {
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
cursor: pointer;
padding: 10px;
margin: 0 10px 0 5px;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
.DateRangePickerInput_clearDates__small {
padding: 6px
}
.DateRangePickerInput_clearDates_default:focus,
.DateRangePickerInput_clearDates_default:hover {
background: #dbdbdb;
border-radius: 50%
}
.DateRangePickerInput_clearDates__hide {
visibility: hidden
}
.DateRangePickerInput_clearDates_svg {
fill: #82888a;
height: 12px;
width: 15px;
vertical-align: middle
}
.DateRangePickerInput_clearDates_svg__small {
height: 9px
}
.DateRangePickerInput_calendarIcon {
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
cursor: pointer;
display: inline-block;
vertical-align: middle;
padding: 10px;
margin: 0 5px 0 10px
}
.DateRangePickerInput_calendarIcon_svg {
fill: #82888a;
height: 15px;
width: 14px;
vertical-align: middle
}
.DateRangePicker {
position: relative;
display: inline-block
}
.DateRangePicker__block {
display: block
}
.DateRangePicker_picker {
z-index: 1;
background-color: #fff;
position: absolute
}
.DateRangePicker_picker__rtl {
direction: rtl
}
.DateRangePicker_picker__directionLeft {
left: 0
}
.DateRangePicker_picker__directionRight {
right: 0
}
.DateRangePicker_picker__portal {
background-color: rgba(0,0,0,.3);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%
}
.DateRangePicker_picker__fullScreenPortal {
background-color: #fff
}
.DateRangePicker_closeButton {
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
padding: 15px;
z-index: 2
}
.DateRangePicker_closeButton:focus,
.DateRangePicker_closeButton:hover {
color: darken(#cacccd,10%);
text-decoration: none
}
.DateRangePicker_closeButton_svg {
height: 15px;
width: 15px;
fill: #cacccd
}
/*# sourceMappingURL=main-d68f5baf.chunk.css.map*/