* hello base styles applied
* …
*
*/
/*
* Add a prefix to any classes.
*
* $prefix: ""; // ==> .l-grid
* $prefix: "hl-"; // ==> .hl-l-grid
*/
/*
* Set the breakpoints for you app and to build responsive classes.
* If you don't need responsive classes, then remove all items.
*/
/**
* Default breakpoints map
* Can be overridden is settings/settings.breakpoints.scss if needed
*
*/
/* @TODO: not properly used with container and page-wrapper layouts */
/* Soon obsolete - will use pop mixins */
/**
* Provide a base mixin for pop elements: context menu, popover, tooltip, etc.
*/
/*
* Apply styles to descendants if a class is provided.
*
*/
/* Margins
*
*/
/* Paddings
*
*/
.u-align-left {
text-align: left !important;
}
.u-align-right {
text-align: right !important;
}
.u-align-center {
text-align: center !important;
}
@media all and (min-width: 576px) {
.u-align-left\@small {
text-align: left !important;
}
.u-align-right\@small {
text-align: right !important;
}
.u-align-center\@small {
text-align: center !important;
}
}
@media all and (min-width: 768px) {
.u-align-left\@medium {
text-align: left !important;
}
.u-align-right\@medium {
text-align: right !important;
}
.u-align-center\@medium {
text-align: center !important;
}
}
@media all and (min-width: 992px) {
.u-align-left\@large {
text-align: left !important;
}
.u-align-right\@large {
text-align: right !important;
}
.u-align-center\@large {
text-align: center !important;
}
}
@media all and (min-width: 1200px) {
.u-align-left\@xlarge {
text-align: left !important;
}
.u-align-right\@xlarge {
text-align: right !important;
}
.u-align-center\@xlarge {
text-align: center !important;
}
}
/** Default border **/
.u-border-all {
border: 1px solid #E6E6EC !important;
}
.u-border-top {
border-top: 1px solid #E6E6EC !important;
}
.u-border-right {
border-right: 1px solid #E6E6EC !important;
}
.u-border-bottom {
border-bottom: 1px solid #E6E6EC !important;
}
.u-border-left {
border-left: 1px solid #E6E6EC !important;
}
.u-border-v {
border-top: 1px solid #E6E6EC !important;
border-bottom: 1px solid #E6E6EC !important;
}
.u-border-h {
border-left: 1px solid #E6E6EC !important;
border-right: 1px solid #E6E6EC !important;
}
/** Transparent border **/
.u-border-all-transparent {
border: 1px solid transparent !important;
}
.u-border-top-transparent {
border-top: 1px solid transparent !important;
}
.u-border-right-transparent {
border-right: 1px solid transparent !important;
}
.u-border-bottom-transparent {
border-bottom: 1px solid transparent !important;
}
.u-border-left-transparent {
border-left: 1px solid transparent !important;
}
.u-border-v-transparent {
border-top: 1px solid transparent !important;
border-bottom: 1px solid transparent !important;
}
.u-border-h-transparent {
border-left: 1px solid transparent !important;
border-right: 1px solid transparent !important;
}
/**
*
* .u-border-top[-color|-none]
* examples: .u-border-top, .u-border-top-none, .u-border-top-l@large
*/
/** No border **/
.u-border-all-none {
border: 0 !important;
}
.u-border-top-none {
border-top: 0 !important;
}
.u-border-right-none {
border-right: 0 !important;
}
.u-border-bottom-none {
border-bottom: 0 !important;
}
.u-border-left-none {
border-left: 0 !important;
}
.u-border-v-none {
border-top: 0 !important;
border-bottom: 0 !important;
}
.u-border-h-none {
border-left: 0 !important;
border-right: 0 !important;
}
/**
* Clearing floats using CSS only
* Based off Nicolas Gallhager micro clearfix
* http://cssmojo.com/the-very-latest-u-clearfix-reloaded/
*/
.u-clearfix:after {
content: "";
display: block;
clear: both;
}
/**
* Modify the text color
*/
.u-color-brand {
color: #0A0A47 !important;
}
.u-color-white {
color: #ffffff !important;
}
.u-color-white-base {
color: #ffffff !important;
}
.u-color-white-darker-alpha {
color: rgba(255, 255, 255, 0.85) !important;
}
.u-color-white-dark-alpha {
color: rgba(255, 255, 255, 0.65) !important;
}
.u-color-white-medium-alpha {
color: rgba(255, 255, 255, 0.5) !important;
}
.u-color-white-light-alpha {
color: rgba(255, 255, 255, 0.25) !important;
}
.u-color-white-lighter-alpha {
color: rgba(255, 255, 255, 0.1) !important;
}
.u-color-white-off-alpha {
color: rgba(255, 255, 255, 0.05) !important;
}
.u-color-primary {
color: #13138a !important;
}
.u-color-primary-light {
color: #c4c4e2 !important;
}
.u-color-primary-off {
color: #f3f3f9 !important;
}
.u-color-primary-visited {
color: #3e3e92 !important;
}
.u-color-primary-hover {
color: #1d1dcd !important;
}
.u-color-primary-hover-light {
color: #c7c7f3 !important;
}
.u-color-primary-hover-off {
color: #f4f4fd !important;
}
.u-color-primary-active {
color: #1a1ab7 !important;
}
.u-color-primary-active-light {
color: #c6c6ed !important;
}
.u-color-primary-active-off {
color: #f4f4fb !important;
}
.u-color-link {
color: #13138a !important;
}
.u-color-link-visited {
color: #3e3e92 !important;
}
.u-color-link-hover {
color: #1d1dcd !important;
}
.u-color-link-hover-light {
color: #c7c7f3 !important;
}
.u-color-link-hover-off {
color: #f4f4fd !important;
}
.u-color-link-active {
color: #1a1ab7 !important;
}
.u-color-link-active-light {
color: #c6c6ed !important;
}
.u-color-link-active-off {
color: #f4f4fb !important;
}
.u-color-neutral-darker {
color: #3B3B6C !important;
}
.u-color-neutral-dark {
color: #606087 !important;
}
.u-color-neutral {
color: #8484A3 !important;
}
.u-color-neutral-light {
color: #C2C2D1 !important;
}
.u-color-neutral-lighter {
color: #E6E6EC !important;
}
.u-color-neutral-off {
color: #F3F3F6 !important;
}
.u-color-neutral-darker-alpha {
color: rgba(10, 10, 71, 0.8) !important;
}
.u-color-neutral-dark-alpha {
color: rgba(10, 10, 71, 0.65) !important;
}
.u-color-neutral-alpha {
color: rgba(10, 10, 71, 0.5) !important;
}
.u-color-neutral-light-alpha {
color: rgba(10, 10, 71, 0.25) !important;
}
.u-color-neutral-lighter-alpha {
color: rgba(10, 10, 71, 0.1) !important;
}
.u-color-neutral-off-alpha {
color: rgba(10, 10, 71, 0.05) !important;
}
.u-color-text {
color: #3B3B6C !important;
}
.u-color-red {
color: #f24242 !important;
}
.u-color-informative {
color: #34a7e6 !important;
}
.u-color-informative-light {
color: #cce9f9 !important;
}
.u-color-informative-off {
color: #f5fbfe !important;
}
.u-color-informative-hover {
color: #2ab3ff !important;
}
.u-color-informative-active {
color: #32b6ff !important;
}
.u-color-success {
color: #22c580 !important;
}
.u-color-success-light {
color: #c8f1df !important;
}
.u-color-success-off {
color: #f4fcf9 !important;
}
.u-color-success-hover {
color: #21d387 !important;
}
.u-color-success-active {
color: #22d98b !important;
}
.u-color-warning {
color: #FF8839 !important;
}
.u-color-warning-light {
color: #ffe1ce !important;
}
.u-color-warning-off {
color: #fff9f5 !important;
}
.u-color-warning-hover {
color: #ff7f29 !important;
}
.u-color-warning-active {
color: #ff8431 !important;
}
.u-color-danger {
color: #f24242 !important;
}
.u-color-danger-light {
color: #fcd0d0 !important;
}
.u-color-danger-off {
color: #fef6f6 !important;
}
.u-color-danger-hover {
color: #f23333 !important;
}
.u-color-danger-active {
color: #f33a3a !important;
}
.u-color-invalid {
color: #f24242 !important;
}
.u-color-status-expected {
color: #0A0A47 !important;
}
.u-color-status-on-site {
color: #3AB9FF !important;
}
.u-color-status-checked-in {
color: #22c580 !important;
}
.u-color-status-checked-out {
color: #8484A3 !important;
}
.u-color-status-denied {
color: #f24242 !important;
}
.u-color-status-booked {
color: #22c580 !important;
}
.u-color-status-in-review {
color: #FF8839 !important;
}
.u-color-accent-green {
color: #26DB8E !important;
}
.u-color-accent-green-dark {
color: #72e8b6 !important;
}
.u-color-accent-green-medium {
color: #93edc7 !important;
}
.u-color-accent-green-light {
color: #c9f6e3 !important;
}
.u-color-accent-green-lighter {
color: #e9fbf4 !important;
}
.u-color-accent-green-off {
color: #f4fdf9 !important;
}
.u-color-accent-green-dark-alpha {
color: rgba(38, 219, 142, 0.65) !important;
}
.u-color-accent-green-medium-alpha {
color: rgba(38, 219, 142, 0.5) !important;
}
.u-color-accent-green-light-alpha {
color: rgba(38, 219, 142, 0.25) !important;
}
.u-color-accent-green-lighter-alpha {
color: rgba(38, 219, 142, 0.1) !important;
}
.u-color-accent-green-off-alpha {
color: rgba(38, 219, 142, 0.05) !important;
}
.u-color-accent-orange {
color: #FF8839 !important;
}
.u-color-accent-orange-dark {
color: #ffb27e !important;
}
.u-color-accent-orange-medium {
color: #ffc49c !important;
}
.u-color-accent-orange-light {
color: #ffe1ce !important;
}
.u-color-accent-orange-lighter {
color: #fff3eb !important;
}
.u-color-accent-orange-off {
color: #fff9f5 !important;
}
.u-color-accent-orange-dark-alpha {
color: rgba(255, 136, 57, 0.65) !important;
}
.u-color-accent-orange-medium-alpha {
color: rgba(255, 136, 57, 0.5) !important;
}
.u-color-accent-orange-light-alpha {
color: rgba(255, 136, 57, 0.25) !important;
}
.u-color-accent-orange-lighter-alpha {
color: rgba(255, 136, 57, 0.1) !important;
}
.u-color-accent-orange-off-alpha {
color: rgba(255, 136, 57, 0.05) !important;
}
.u-color-accent-blue {
color: #3AB9FF !important;
}
.u-color-accent-blue-dark {
color: #7fd2ff !important;
}
.u-color-accent-blue-medium {
color: #9ddcff !important;
}
.u-color-accent-blue-light {
color: #ceeeff !important;
}
.u-color-accent-blue-lighter {
color: #ebf8ff !important;
}
.u-color-accent-blue-off {
color: #f5fcff !important;
}
.u-color-accent-blue-dark-alpha {
color: rgba(58, 185, 255, 0.65) !important;
}
.u-color-accent-blue-medium-alpha {
color: rgba(58, 185, 255, 0.5) !important;
}
.u-color-accent-blue-light-alpha {
color: rgba(58, 185, 255, 0.25) !important;
}
.u-color-accent-blue-lighter-alpha {
color: rgba(58, 185, 255, 0.1) !important;
}
.u-color-accent-blue-off-alpha {
color: rgba(58, 185, 255, 0.05) !important;
}
.u-color-plan-essential {
color: #FF6B90 !important;
}
.u-color-plan-premium {
color: #FCBE61 !important;
}
.u-color-plan-enterprise {
color: #6361CF !important;
}
.u-color-pack-prime {
color: #6BD4F2 !important;
}
.u-color-pack-efficiency {
color: #FF6B90 !important;
}
.u-color-pack-security {
color: #8186F0 !important;
}
.u-color-pack-privacy {
color: #41E39E !important;
}
.u-color-pack-delivery {
color: #FCBE61 !important;
}
.u-color-pack-enterprise {
color: #6361CF !important;
}
.u-color-pack-prime-off {
color: #f8fdfe !important;
}
.u-color-pack-efficiency-off {
color: #fff8f9 !important;
}
.u-color-pack-security-off {
color: #f9f9fe !important;
}
.u-color-pack-privacy-off {
color: #f6fefa !important;
}
.u-color-pack-delivery-off {
color: #fffcf7 !important;
}
.u-color-pack-enterprise-off {
color: #f7f7fd !important;
}
.u-color-twitter {
color: #00aced !important;
}
.u-color-facebook {
color: #3b5998 !important;
}
.u-color-linkedin {
color: #0077B5 !important;
}
.u-color-transparent {
color: transparent !important;
}
.u-color-inherit {
color: inherit !important;
}
/**
* Modify the background color
*/
.u-color-bg-brand {
background-color: #0A0A47 !important;
}
.u-color-bg-white {
background-color: #ffffff !important;
}
.u-color-bg-white-base {
background-color: #ffffff !important;
}
.u-color-bg-white-darker-alpha {
background-color: rgba(255, 255, 255, 0.85) !important;
}
.u-color-bg-white-dark-alpha {
background-color: rgba(255, 255, 255, 0.65) !important;
}
.u-color-bg-white-medium-alpha {
background-color: rgba(255, 255, 255, 0.5) !important;
}
.u-color-bg-white-light-alpha {
background-color: rgba(255, 255, 255, 0.25) !important;
}
.u-color-bg-white-lighter-alpha {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.u-color-bg-white-off-alpha {
background-color: rgba(255, 255, 255, 0.05) !important;
}
.u-color-bg-primary {
background-color: #13138a !important;
}
.u-color-bg-primary-light {
background-color: #c4c4e2 !important;
}
.u-color-bg-primary-off {
background-color: #f3f3f9 !important;
}
.u-color-bg-primary-visited {
background-color: #3e3e92 !important;
}
.u-color-bg-primary-hover {
background-color: #1d1dcd !important;
}
.u-color-bg-primary-hover-light {
background-color: #c7c7f3 !important;
}
.u-color-bg-primary-hover-off {
background-color: #f4f4fd !important;
}
.u-color-bg-primary-active {
background-color: #1a1ab7 !important;
}
.u-color-bg-primary-active-light {
background-color: #c6c6ed !important;
}
.u-color-bg-primary-active-off {
background-color: #f4f4fb !important;
}
.u-color-bg-link {
background-color: #13138a !important;
}
.u-color-bg-link-visited {
background-color: #3e3e92 !important;
}
.u-color-bg-link-hover {
background-color: #1d1dcd !important;
}
.u-color-bg-link-hover-light {
background-color: #c7c7f3 !important;
}
.u-color-bg-link-hover-off {
background-color: #f4f4fd !important;
}
.u-color-bg-link-active {
background-color: #1a1ab7 !important;
}
.u-color-bg-link-active-light {
background-color: #c6c6ed !important;
}
.u-color-bg-link-active-off {
background-color: #f4f4fb !important;
}
.u-color-bg-neutral-darker {
background-color: #3B3B6C !important;
}
.u-color-bg-neutral-dark {
background-color: #606087 !important;
}
.u-color-bg-neutral {
background-color: #8484A3 !important;
}
.u-color-bg-neutral-light {
background-color: #C2C2D1 !important;
}
.u-color-bg-neutral-lighter {
background-color: #E6E6EC !important;
}
.u-color-bg-neutral-off {
background-color: #F3F3F6 !important;
}
.u-color-bg-neutral-darker-alpha {
background-color: rgba(10, 10, 71, 0.8) !important;
}
.u-color-bg-neutral-dark-alpha {
background-color: rgba(10, 10, 71, 0.65) !important;
}
.u-color-bg-neutral-alpha {
background-color: rgba(10, 10, 71, 0.5) !important;
}
.u-color-bg-neutral-light-alpha {
background-color: rgba(10, 10, 71, 0.25) !important;
}
.u-color-bg-neutral-lighter-alpha {
background-color: rgba(10, 10, 71, 0.1) !important;
}
.u-color-bg-neutral-off-alpha {
background-color: rgba(10, 10, 71, 0.05) !important;
}
.u-color-bg-text {
background-color: #3B3B6C !important;
}
.u-color-bg-red {
background-color: #f24242 !important;
}
.u-color-bg-informative {
background-color: #34a7e6 !important;
}
.u-color-bg-informative-light {
background-color: #cce9f9 !important;
}
.u-color-bg-informative-off {
background-color: #f5fbfe !important;
}
.u-color-bg-informative-hover {
background-color: #2ab3ff !important;
}
.u-color-bg-informative-active {
background-color: #32b6ff !important;
}
.u-color-bg-success {
background-color: #22c580 !important;
}
.u-color-bg-success-light {
background-color: #c8f1df !important;
}
.u-color-bg-success-off {
background-color: #f4fcf9 !important;
}
.u-color-bg-success-hover {
background-color: #21d387 !important;
}
.u-color-bg-success-active {
background-color: #22d98b !important;
}
.u-color-bg-warning {
background-color: #FF8839 !important;
}
.u-color-bg-warning-light {
background-color: #ffe1ce !important;
}
.u-color-bg-warning-off {
background-color: #fff9f5 !important;
}
.u-color-bg-warning-hover {
background-color: #ff7f29 !important;
}
.u-color-bg-warning-active {
background-color: #ff8431 !important;
}
.u-color-bg-danger {
background-color: #f24242 !important;
}
.u-color-bg-danger-light {
background-color: #fcd0d0 !important;
}
.u-color-bg-danger-off {
background-color: #fef6f6 !important;
}
.u-color-bg-danger-hover {
background-color: #f23333 !important;
}
.u-color-bg-danger-active {
background-color: #f33a3a !important;
}
.u-color-bg-invalid {
background-color: #f24242 !important;
}
.u-color-bg-status-expected {
background-color: #0A0A47 !important;
}
.u-color-bg-status-on-site {
background-color: #3AB9FF !important;
}
.u-color-bg-status-checked-in {
background-color: #22c580 !important;
}
.u-color-bg-status-checked-out {
background-color: #8484A3 !important;
}
.u-color-bg-status-denied {
background-color: #f24242 !important;
}
.u-color-bg-status-booked {
background-color: #22c580 !important;
}
.u-color-bg-status-in-review {
background-color: #FF8839 !important;
}
.u-color-bg-accent-green {
background-color: #26DB8E !important;
}
.u-color-bg-accent-green-dark {
background-color: #72e8b6 !important;
}
.u-color-bg-accent-green-medium {
background-color: #93edc7 !important;
}
.u-color-bg-accent-green-light {
background-color: #c9f6e3 !important;
}
.u-color-bg-accent-green-lighter {
background-color: #e9fbf4 !important;
}
.u-color-bg-accent-green-off {
background-color: #f4fdf9 !important;
}
.u-color-bg-accent-green-dark-alpha {
background-color: rgba(38, 219, 142, 0.65) !important;
}
.u-color-bg-accent-green-medium-alpha {
background-color: rgba(38, 219, 142, 0.5) !important;
}
.u-color-bg-accent-green-light-alpha {
background-color: rgba(38, 219, 142, 0.25) !important;
}
.u-color-bg-accent-green-lighter-alpha {
background-color: rgba(38, 219, 142, 0.1) !important;
}
.u-color-bg-accent-green-off-alpha {
background-color: rgba(38, 219, 142, 0.05) !important;
}
.u-color-bg-accent-orange {
background-color: #FF8839 !important;
}
.u-color-bg-accent-orange-dark {
background-color: #ffb27e !important;
}
.u-color-bg-accent-orange-medium {
background-color: #ffc49c !important;
}
.u-color-bg-accent-orange-light {
background-color: #ffe1ce !important;
}
.u-color-bg-accent-orange-lighter {
background-color: #fff3eb !important;
}
.u-color-bg-accent-orange-off {
background-color: #fff9f5 !important;
}
.u-color-bg-accent-orange-dark-alpha {
background-color: rgba(255, 136, 57, 0.65) !important;
}
.u-color-bg-accent-orange-medium-alpha {
background-color: rgba(255, 136, 57, 0.5) !important;
}
.u-color-bg-accent-orange-light-alpha {
background-color: rgba(255, 136, 57, 0.25) !important;
}
.u-color-bg-accent-orange-lighter-alpha {
background-color: rgba(255, 136, 57, 0.1) !important;
}
.u-color-bg-accent-orange-off-alpha {
background-color: rgba(255, 136, 57, 0.05) !important;
}
.u-color-bg-accent-blue {
background-color: #3AB9FF !important;
}
.u-color-bg-accent-blue-dark {
background-color: #7fd2ff !important;
}
.u-color-bg-accent-blue-medium {
background-color: #9ddcff !important;
}
.u-color-bg-accent-blue-light {
background-color: #ceeeff !important;
}
.u-color-bg-accent-blue-lighter {
background-color: #ebf8ff !important;
}
.u-color-bg-accent-blue-off {
background-color: #f5fcff !important;
}
.u-color-bg-accent-blue-dark-alpha {
background-color: rgba(58, 185, 255, 0.65) !important;
}
.u-color-bg-accent-blue-medium-alpha {
background-color: rgba(58, 185, 255, 0.5) !important;
}
.u-color-bg-accent-blue-light-alpha {
background-color: rgba(58, 185, 255, 0.25) !important;
}
.u-color-bg-accent-blue-lighter-alpha {
background-color: rgba(58, 185, 255, 0.1) !important;
}
.u-color-bg-accent-blue-off-alpha {
background-color: rgba(58, 185, 255, 0.05) !important;
}
.u-color-bg-plan-essential {
background-color: #FF6B90 !important;
}
.u-color-bg-plan-premium {
background-color: #FCBE61 !important;
}
.u-color-bg-plan-enterprise {
background-color: #6361CF !important;
}
.u-color-bg-pack-prime {
background-color: #6BD4F2 !important;
}
.u-color-bg-pack-efficiency {
background-color: #FF6B90 !important;
}
.u-color-bg-pack-security {
background-color: #8186F0 !important;
}
.u-color-bg-pack-privacy {
background-color: #41E39E !important;
}
.u-color-bg-pack-delivery {
background-color: #FCBE61 !important;
}
.u-color-bg-pack-enterprise {
background-color: #6361CF !important;
}
.u-color-bg-pack-prime-off {
background-color: #f8fdfe !important;
}
.u-color-bg-pack-efficiency-off {
background-color: #fff8f9 !important;
}
.u-color-bg-pack-security-off {
background-color: #f9f9fe !important;
}
.u-color-bg-pack-privacy-off {
background-color: #f6fefa !important;
}
.u-color-bg-pack-delivery-off {
background-color: #fffcf7 !important;
}
.u-color-bg-pack-enterprise-off {
background-color: #f7f7fd !important;
}
.u-color-bg-twitter {
background-color: #00aced !important;
}
.u-color-bg-facebook {
background-color: #3b5998 !important;
}
.u-color-bg-linkedin {
background-color: #0077B5 !important;
}
.u-color-bg-transparent {
background-color: transparent !important;
}
.u-color-bg-inherit {
background-color: inherit !important;
}
.u-cursor-auto {
cursor: auto;
}
.u-cursor-default {
cursor: default;
}
.u-cursor-pointer {
cursor: pointer;
}
.u-cursor-not-allowed {
cursor: not-allowed;
}
.u-cursor-help {
cursor: help;
}
.u-depth-0 {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0);
border: 1px solid rgba(10, 10, 71, 0.1);
}
.u-depth-0.is-interactive {
transition: box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
cursor: pointer;
}
@media (hover: hover) {
.u-depth-0.is-interactive:hover {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.2);
transform: translateY(-2px);
}
}
.u-depth-0.is-interactive:active {
transform: translateY(0);
}
.u-depth-1 {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.1);
}
.u-depth-1.is-interactive {
transition: box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
cursor: pointer;
}
@media (hover: hover) {
.u-depth-1.is-interactive:hover {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.35);
transform: translateY(-2px);
}
}
.u-depth-1.is-interactive:active {
transform: translateY(0);
}
.u-depth-2 {
box-shadow: 0 5px 25px -5px rgba(10, 10, 71, 0.15) , 0 10px 15px -15px rgba(10, 10, 71, 0.1);
}
.u-depth-2.is-interactive {
transition: box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
cursor: pointer;
}
@media (hover: hover) {
.u-depth-2.is-interactive:hover {
box-shadow: 0 5px 25px -5px rgba(10, 10, 71, 0.1) , 0 10px 15px -15px rgba(10, 10, 71, 0.4);
transform: translateY(-2px);
}
}
.u-depth-2.is-interactive:active {
transform: translateY(0);
}
.u-depth-3 {
box-shadow: 0 10px 50px -10px rgba(10, 10, 71, 0.25) , 0 20px 30px -30px rgba(10, 10, 71, 0.1);
}
.u-depth-3.is-interactive {
transition: box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
cursor: pointer;
}
@media (hover: hover) {
.u-depth-3.is-interactive:hover {
box-shadow: 0 10px 50px -10px rgba(10, 10, 71, 0.2) , 0 20px 30px -30px rgba(10, 10, 71, 0.4);
transform: translateY(-2px);
}
}
.u-depth-3.is-interactive:active {
transform: translateY(0);
}
/**
* Modify the display of items depending on the breakpoints
*/
.u-display-block {
display: block !important;
}
.u-display-flex {
display: flex !important;
}
.u-display-inline-block {
display: inline-block !important;
}
.u-display-inline {
display: inline !important;
}
.u-display-none {
display: none !important;
}
@media all and (min-width: 576px) {
.u-display-block\@small {
display: block !important;
}
.u-display-flex\@small {
display: flex !important;
}
.u-display-inline-block\@small {
display: inline-block !important;
}
.u-display-inline\@small {
display: inline !important;
}
.u-display-none\@small {
display: none !important;
}
}
@media all and (min-width: 768px) {
.u-display-block\@medium {
display: block !important;
}
.u-display-flex\@medium {
display: flex !important;
}
.u-display-inline-block\@medium {
display: inline-block !important;
}
.u-display-inline\@medium {
display: inline !important;
}
.u-display-none\@medium {
display: none !important;
}
}
@media all and (min-width: 992px) {
.u-display-block\@large {
display: block !important;
}
.u-display-flex\@large {
display: flex !important;
}
.u-display-inline-block\@large {
display: inline-block !important;
}
.u-display-inline\@large {
display: inline !important;
}
.u-display-none\@large {
display: none !important;
}
}
@media all and (min-width: 1200px) {
.u-display-block\@xlarge {
display: block !important;
}
.u-display-flex\@xlarge {
display: flex !important;
}
.u-display-inline-block\@xlarge {
display: inline-block !important;
}
.u-display-inline\@xlarge {
display: inline !important;
}
.u-display-none\@xlarge {
display: none !important;
}
}
.u-hide, .c-switch, .c-checkbox,
.c-radio {
position: fixed !important;
overflow: hidden;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px !important;
width: 1px !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden;
top: -9999px !important;
left: -9999px !important;
white-space: nowrap;
}
.u-hide-empty:empty {
display: none !important;
}
.u-overflow-reset {
overflow: unset !important;
}
.u-overflow-auto {
overflow: auto !important;
}
.u-overflow-scroll {
overflow: scroll !important;
}
.u-overflow-scroll-x {
overflow-x: scroll !important;
}
.u-overflow-scroll-y {
overflow-y: scroll !important;
}
.u-overflow-hidden {
overflow: hidden !important;
}
/**
* using scale and responsive modifier
*
* .u-margin-top[-scale][@breakpoint-name]
* examples: .u-margin-top-all, .u-margin-top-xs@medium, .u-margin-top-l@large
*/
/**! BASE CLASSES: MARGINS **/
.u-margin-all-2xs {
margin: 5px !important;
}
.u-margin-top-2xs {
margin-top: 5px !important;
}
.u-margin-right-2xs {
margin-right: 5px !important;
}
.u-margin-bottom-2xs {
margin-bottom: 5px !important;
}
.u-margin-left-2xs {
margin-left: 5px !important;
}
.u-margin-v-2xs {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.u-margin-h-2xs {
margin-left: 5px !important;
margin-right: 5px !important;
}
/**! BASE CLASSES: PADDING **/
.u-padding-all-2xs {
padding: 5px !important;
}
.u-padding-top-2xs {
padding-top: 5px !important;
}
.u-padding-right-2xs {
padding-right: 5px !important;
}
.u-padding-bottom-2xs {
padding-bottom: 5px !important;
}
.u-padding-left-2xs {
padding-left: 5px !important;
}
.u-padding-v-2xs {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.u-padding-h-2xs {
padding-left: 5px !important;
padding-right: 5px !important;
}
/**! BASE CLASSES: MARGINS **/
.u-margin-all-xs {
margin: 10px !important;
}
.u-margin-top-xs {
margin-top: 10px !important;
}
.u-margin-right-xs {
margin-right: 10px !important;
}
.u-margin-bottom-xs {
margin-bottom: 10px !important;
}
.u-margin-left-xs {
margin-left: 10px !important;
}
.u-margin-v-xs {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.u-margin-h-xs {
margin-left: 10px !important;
margin-right: 10px !important;
}
/**! BASE CLASSES: PADDING **/
.u-padding-all-xs {
padding: 10px !important;
}
.u-padding-top-xs {
padding-top: 10px !important;
}
.u-padding-right-xs {
padding-right: 10px !important;
}
.u-padding-bottom-xs {
padding-bottom: 10px !important;
}
.u-padding-left-xs {
padding-left: 10px !important;
}
.u-padding-v-xs {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.u-padding-h-xs {
padding-left: 10px !important;
padding-right: 10px !important;
}
/**! BASE CLASSES: MARGINS **/
.u-margin-all-s {
margin: 15px !important;
}
.u-margin-top-s {
margin-top: 15px !important;
}
.u-margin-right-s {
margin-right: 15px !important;
}
.u-margin-bottom-s {
margin-bottom: 15px !important;
}
.u-margin-left-s {
margin-left: 15px !important;
}
.u-margin-v-s {
margin-top: 15px !important;
margin-bottom: 15px !important;
}
.u-margin-h-s {
margin-left: 15px !important;
margin-right: 15px !important;
}
/**! BASE CLASSES: PADDING **/
.u-padding-all-s {
padding: 15px !important;
}
.u-padding-top-s {
padding-top: 15px !important;
}
.u-padding-right-s {
padding-right: 15px !important;
}
.u-padding-bottom-s {
padding-bottom: 15px !important;
}
.u-padding-left-s {
padding-left: 15px !important;
}
.u-padding-v-s {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.u-padding-h-s {
padding-left: 15px !important;
padding-right: 15px !important;
}
/**! BASE CLASSES: MARGINS **/
.u-margin-all-m {
margin: 30px !important;
}
.u-margin-top-m {
margin-top: 30px !important;
}
.u-margin-right-m {
margin-right: 30px !important;
}
.u-margin-bottom-m {
margin-bottom: 30px !important;
}
.u-margin-left-m {
margin-left: 30px !important;
}
.u-margin-v-m {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.u-margin-h-m {
margin-left: 30px !important;
margin-right: 30px !important;
}
/**! BASE CLASSES: PADDING **/
.u-padding-all-m {
padding: 30px !important;
}
.u-padding-top-m {
padding-top: 30px !important;
}
.u-padding-right-m {
padding-right: 30px !important;
}
.u-padding-bottom-m {
padding-bottom: 30px !important;
}
.u-padding-left-m {
padding-left: 30px !important;
}
.u-padding-v-m {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.u-padding-h-m {
padding-left: 30px !important;
padding-right: 30px !important;
}
/**! BASE CLASSES: MARGINS **/
.u-margin-all-l {
margin: 60px !important;
}
.u-margin-top-l {
margin-top: 60px !important;
}
.u-margin-right-l {
margin-right: 60px !important;
}
.u-margin-bottom-l {
margin-bottom: 60px !important;
}
.u-margin-left-l {
margin-left: 60px !important;
}
.u-margin-v-l {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.u-margin-h-l {
margin-left: 60px !important;
margin-right: 60px !important;
}
/**! BASE CLASSES: PADDING **/
.u-padding-all-l {
padding: 60px !important;
}
.u-padding-top-l {
padding-top: 60px !important;
}
.u-padding-right-l {
padding-right: 60px !important;
}
.u-padding-bottom-l {
padding-bottom: 60px !important;
}
.u-padding-left-l {
padding-left: 60px !important;
}
.u-padding-v-l {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.u-padding-h-l {
padding-left: 60px !important;
padding-right: 60px !important;
}
/**! BASE CLASSES: MARGINS **/
.u-margin-all-xl {
margin: 90px !important;
}
.u-margin-top-xl {
margin-top: 90px !important;
}
.u-margin-right-xl {
margin-right: 90px !important;
}
.u-margin-bottom-xl {
margin-bottom: 90px !important;
}
.u-margin-left-xl {
margin-left: 90px !important;
}
.u-margin-v-xl {
margin-top: 90px !important;
margin-bottom: 90px !important;
}
.u-margin-h-xl {
margin-left: 90px !important;
margin-right: 90px !important;
}
/**! BASE CLASSES: PADDING **/
.u-padding-all-xl {
padding: 90px !important;
}
.u-padding-top-xl {
padding-top: 90px !important;
}
.u-padding-right-xl {
padding-right: 90px !important;
}
.u-padding-bottom-xl {
padding-bottom: 90px !important;
}
.u-padding-left-xl {
padding-left: 90px !important;
}
.u-padding-v-xl {
padding-top: 90px !important;
padding-bottom: 90px !important;
}
.u-padding-h-xl {
padding-left: 90px !important;
padding-right: 90px !important;
}
/**! BASE CLASSES: MARGINS **/
.u-margin-all-2xl {
margin: 90px !important;
}
@media all and (min-width: 768px) {
.u-margin-all-2xl {
margin: 160px !important;
}
}
.u-margin-top-2xl {
margin-top: 90px !important;
}
@media all and (min-width: 768px) {
.u-margin-top-2xl {
margin-top: 160px !important;
}
}
.u-margin-right-2xl {
margin-right: 90px !important;
}
@media all and (min-width: 768px) {
.u-margin-right-2xl {
margin-right: 160px !important;
}
}
.u-margin-bottom-2xl {
margin-bottom: 90px !important;
}
@media all and (min-width: 768px) {
.u-margin-bottom-2xl {
margin-bottom: 160px !important;
}
}
.u-margin-left-2xl {
margin-left: 90px !important;
}
@media all and (min-width: 768px) {
.u-margin-left-2xl {
margin-left: 160px !important;
}
}
.u-margin-v-2xl {
margin-top: 90px !important;
margin-bottom: 90px !important;
}
@media all and (min-width: 768px) {
.u-margin-v-2xl {
margin-top: 160px !important;
margin-bottom: 160px !important;
}
}
.u-margin-h-2xl {
margin-left: 90px !important;
margin-right: 90px !important;
}
@media all and (min-width: 768px) {
.u-margin-h-2xl {
margin-left: 160px !important;
margin-right: 160px !important;
}
}
/**! BASE CLASSES: PADDING **/
.u-padding-all-2xl {
padding: 90px !important;
}
@media all and (min-width: 768px) {
.u-padding-all-2xl {
padding: 160px !important;
}
}
.u-padding-top-2xl {
padding-top: 90px !important;
}
@media all and (min-width: 768px) {
.u-padding-top-2xl {
padding-top: 160px !important;
}
}
.u-padding-right-2xl {
padding-right: 90px !important;
}
@media all and (min-width: 768px) {
.u-padding-right-2xl {
padding-right: 160px !important;
}
}
.u-padding-bottom-2xl {
padding-bottom: 90px !important;
}
@media all and (min-width: 768px) {
.u-padding-bottom-2xl {
padding-bottom: 160px !important;
}
}
.u-padding-left-2xl {
padding-left: 90px !important;
}
@media all and (min-width: 768px) {
.u-padding-left-2xl {
padding-left: 160px !important;
}
}
.u-padding-v-2xl {
padding-top: 90px !important;
padding-bottom: 90px !important;
}
@media all and (min-width: 768px) {
.u-padding-v-2xl {
padding-top: 160px !important;
padding-bottom: 160px !important;
}
}
.u-padding-h-2xl {
padding-left: 90px !important;
padding-right: 90px !important;
}
@media all and (min-width: 768px) {
.u-padding-h-2xl {
padding-left: 160px !important;
padding-right: 160px !important;
}
}
/**! BASE CLASSES: MARGINS **/
.u-margin-all-gutter {
margin: 20px !important;
}
.u-margin-top-gutter {
margin-top: 20px !important;
}
.u-margin-right-gutter {
margin-right: 20px !important;
}
.u-margin-bottom-gutter {
margin-bottom: 20px !important;
}
.u-margin-left-gutter {
margin-left: 20px !important;
}
.u-margin-v-gutter {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
.u-margin-h-gutter {
margin-left: 20px !important;
margin-right: 20px !important;
}
/**! BASE CLASSES: PADDING **/
.u-padding-all-gutter {
padding: 20px !important;
}
.u-padding-top-gutter {
padding-top: 20px !important;
}
.u-padding-right-gutter {
padding-right: 20px !important;
}
.u-padding-bottom-gutter {
padding-bottom: 20px !important;
}
.u-padding-left-gutter {
padding-left: 20px !important;
}
.u-padding-v-gutter {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.u-padding-h-gutter {
padding-left: 20px !important;
padding-right: 20px !important;
}
/**! BASE CLASSES: MARGINS **/
.u-margin-all-outer {
margin: 20px !important;
}
@media all and (min-width: 768px) {
.u-margin-all-outer {
margin: 40px !important;
}
}
.u-margin-top-outer {
margin-top: 20px !important;
}
@media all and (min-width: 768px) {
.u-margin-top-outer {
margin-top: 40px !important;
}
}
.u-margin-right-outer {
margin-right: 20px !important;
}
@media all and (min-width: 768px) {
.u-margin-right-outer {
margin-right: 40px !important;
}
}
.u-margin-bottom-outer {
margin-bottom: 20px !important;
}
@media all and (min-width: 768px) {
.u-margin-bottom-outer {
margin-bottom: 40px !important;
}
}
.u-margin-left-outer {
margin-left: 20px !important;
}
@media all and (min-width: 768px) {
.u-margin-left-outer {
margin-left: 40px !important;
}
}
.u-margin-v-outer {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
@media all and (min-width: 768px) {
.u-margin-v-outer {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
}
.u-margin-h-outer {
margin-left: 20px !important;
margin-right: 20px !important;
}
@media all and (min-width: 768px) {
.u-margin-h-outer {
margin-left: 40px !important;
margin-right: 40px !important;
}
}
/**! BASE CLASSES: PADDING **/
.u-padding-all-outer {
padding: 20px !important;
}
@media all and (min-width: 768px) {
.u-padding-all-outer {
padding: 40px !important;
}
}
.u-padding-top-outer {
padding-top: 20px !important;
}
@media all and (min-width: 768px) {
.u-padding-top-outer {
padding-top: 40px !important;
}
}
.u-padding-right-outer {
padding-right: 20px !important;
}
@media all and (min-width: 768px) {
.u-padding-right-outer {
padding-right: 40px !important;
}
}
.u-padding-bottom-outer {
padding-bottom: 20px !important;
}
@media all and (min-width: 768px) {
.u-padding-bottom-outer {
padding-bottom: 40px !important;
}
}
.u-padding-left-outer {
padding-left: 20px !important;
}
@media all and (min-width: 768px) {
.u-padding-left-outer {
padding-left: 40px !important;
}
}
.u-padding-v-outer {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
@media all and (min-width: 768px) {
.u-padding-v-outer {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
.u-padding-h-outer {
padding-left: 20px !important;
padding-right: 20px !important;
}
@media all and (min-width: 768px) {
.u-padding-h-outer {
padding-left: 40px !important;
padding-right: 40px !important;
}
}
/**! BASE CLASSES: MARGINS **/
.u-margin-all-none {
margin: 0 !important;
}
.u-margin-top-none {
margin-top: 0 !important;
}
.u-margin-right-none {
margin-right: 0 !important;
}
.u-margin-bottom-none {
margin-bottom: 0 !important;
}
.u-margin-left-none {
margin-left: 0 !important;
}
.u-margin-v-none {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.u-margin-h-none {
margin-left: 0 !important;
margin-right: 0 !important;
}
/**! BASE CLASSES: PADDING **/
.u-padding-all-none {
padding: 0 !important;
}
.u-padding-top-none {
padding-top: 0 !important;
}
.u-padding-right-none {
padding-right: 0 !important;
}
.u-padding-bottom-none {
padding-bottom: 0 !important;
}
.u-padding-left-none {
padding-left: 0 !important;
}
.u-padding-v-none {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.u-padding-h-none {
padding-left: 0 !important;
padding-right: 0 !important;
}
/**! BASE CLASSES: MARGINS **/
.u-margin-all-auto {
margin: auto !important;
}
.u-margin-top-auto {
margin-top: auto !important;
}
.u-margin-right-auto {
margin-right: auto !important;
}
.u-margin-bottom-auto {
margin-bottom: auto !important;
}
.u-margin-left-auto {
margin-left: auto !important;
}
.u-margin-v-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}
.u-margin-h-auto {
margin-left: auto !important;
margin-right: auto !important;
}
/**! BASE CLASSES: PADDING **/
.u-padding-all-auto {
padding: auto !important;
}
.u-padding-top-auto {
padding-top: auto !important;
}
.u-padding-right-auto {
padding-right: auto !important;
}
.u-padding-bottom-auto {
padding-bottom: auto !important;
}
.u-padding-left-auto {
padding-left: auto !important;
}
.u-padding-v-auto {
padding-top: auto !important;
padding-bottom: auto !important;
}
.u-padding-h-auto {
padding-left: auto !important;
padding-right: auto !important;
}
@media all and (min-width: 576px) {
.u-margin-all-2xs\@small {
margin: 5px !important;
}
.u-margin-top-2xs\@small {
margin-top: 5px !important;
}
.u-margin-right-2xs\@small {
margin-right: 5px !important;
}
.u-margin-bottom-2xs\@small {
margin-bottom: 5px !important;
}
.u-margin-left-2xs\@small {
margin-left: 5px !important;
}
.u-margin-v-2xs\@small {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.u-margin-h-2xs\@small {
margin-left: 5px !important;
margin-right: 5px !important;
}
.u-margin-all-xs\@small {
margin: 10px !important;
}
.u-margin-top-xs\@small {
margin-top: 10px !important;
}
.u-margin-right-xs\@small {
margin-right: 10px !important;
}
.u-margin-bottom-xs\@small {
margin-bottom: 10px !important;
}
.u-margin-left-xs\@small {
margin-left: 10px !important;
}
.u-margin-v-xs\@small {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.u-margin-h-xs\@small {
margin-left: 10px !important;
margin-right: 10px !important;
}
.u-margin-all-s\@small {
margin: 15px !important;
}
.u-margin-top-s\@small {
margin-top: 15px !important;
}
.u-margin-right-s\@small {
margin-right: 15px !important;
}
.u-margin-bottom-s\@small {
margin-bottom: 15px !important;
}
.u-margin-left-s\@small {
margin-left: 15px !important;
}
.u-margin-v-s\@small {
margin-top: 15px !important;
margin-bottom: 15px !important;
}
.u-margin-h-s\@small {
margin-left: 15px !important;
margin-right: 15px !important;
}
.u-margin-all-m\@small {
margin: 30px !important;
}
.u-margin-top-m\@small {
margin-top: 30px !important;
}
.u-margin-right-m\@small {
margin-right: 30px !important;
}
.u-margin-bottom-m\@small {
margin-bottom: 30px !important;
}
.u-margin-left-m\@small {
margin-left: 30px !important;
}
.u-margin-v-m\@small {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.u-margin-h-m\@small {
margin-left: 30px !important;
margin-right: 30px !important;
}
.u-margin-all-l\@small {
margin: 60px !important;
}
.u-margin-top-l\@small {
margin-top: 60px !important;
}
.u-margin-right-l\@small {
margin-right: 60px !important;
}
.u-margin-bottom-l\@small {
margin-bottom: 60px !important;
}
.u-margin-left-l\@small {
margin-left: 60px !important;
}
.u-margin-v-l\@small {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.u-margin-h-l\@small {
margin-left: 60px !important;
margin-right: 60px !important;
}
.u-margin-all-xl\@small {
margin: 90px !important;
}
.u-margin-top-xl\@small {
margin-top: 90px !important;
}
.u-margin-right-xl\@small {
margin-right: 90px !important;
}
.u-margin-bottom-xl\@small {
margin-bottom: 90px !important;
}
.u-margin-left-xl\@small {
margin-left: 90px !important;
}
.u-margin-v-xl\@small {
margin-top: 90px !important;
margin-bottom: 90px !important;
}
.u-margin-h-xl\@small {
margin-left: 90px !important;
margin-right: 90px !important;
}
.u-margin-all-2xl\@small {
margin: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-all-2xl\@small {
margin: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-top-2xl\@small {
margin-top: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-top-2xl\@small {
margin-top: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-right-2xl\@small {
margin-right: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-right-2xl\@small {
margin-right: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-bottom-2xl\@small {
margin-bottom: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-bottom-2xl\@small {
margin-bottom: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-left-2xl\@small {
margin-left: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-left-2xl\@small {
margin-left: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-v-2xl\@small {
margin-top: 90px !important;
margin-bottom: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-v-2xl\@small {
margin-top: 160px !important;
margin-bottom: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-h-2xl\@small {
margin-left: 90px !important;
margin-right: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-h-2xl\@small {
margin-left: 160px !important;
margin-right: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-all-gutter\@small {
margin: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-top-gutter\@small {
margin-top: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-right-gutter\@small {
margin-right: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-bottom-gutter\@small {
margin-bottom: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-left-gutter\@small {
margin-left: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-v-gutter\@small {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-h-gutter\@small {
margin-left: 20px !important;
margin-right: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-all-outer\@small {
margin: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-all-outer\@small {
margin: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-top-outer\@small {
margin-top: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-top-outer\@small {
margin-top: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-right-outer\@small {
margin-right: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-right-outer\@small {
margin-right: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-bottom-outer\@small {
margin-bottom: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-bottom-outer\@small {
margin-bottom: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-left-outer\@small {
margin-left: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-left-outer\@small {
margin-left: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-v-outer\@small {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-v-outer\@small {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-h-outer\@small {
margin-left: 20px !important;
margin-right: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-margin-h-outer\@small {
margin-left: 40px !important;
margin-right: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-margin-all-none\@small {
margin: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-margin-top-none\@small {
margin-top: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-margin-right-none\@small {
margin-right: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-margin-bottom-none\@small {
margin-bottom: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-margin-left-none\@small {
margin-left: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-margin-v-none\@small {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-margin-h-none\@small {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-margin-all-auto\@small {
margin: auto !important;
}
}
@media all and (min-width: 576px) {
.u-margin-top-auto\@small {
margin-top: auto !important;
}
}
@media all and (min-width: 576px) {
.u-margin-right-auto\@small {
margin-right: auto !important;
}
}
@media all and (min-width: 576px) {
.u-margin-bottom-auto\@small {
margin-bottom: auto !important;
}
}
@media all and (min-width: 576px) {
.u-margin-left-auto\@small {
margin-left: auto !important;
}
}
@media all and (min-width: 576px) {
.u-margin-v-auto\@small {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
@media all and (min-width: 576px) {
.u-margin-h-auto\@small {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media all and (min-width: 576px) {
.u-padding-all-2xs\@small {
padding: 5px !important;
}
.u-padding-top-2xs\@small {
padding-top: 5px !important;
}
.u-padding-right-2xs\@small {
padding-right: 5px !important;
}
.u-padding-bottom-2xs\@small {
padding-bottom: 5px !important;
}
.u-padding-left-2xs\@small {
padding-left: 5px !important;
}
.u-padding-v-2xs\@small {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.u-padding-h-2xs\@small {
padding-left: 5px !important;
padding-right: 5px !important;
}
.u-padding-all-xs\@small {
padding: 10px !important;
}
.u-padding-top-xs\@small {
padding-top: 10px !important;
}
.u-padding-right-xs\@small {
padding-right: 10px !important;
}
.u-padding-bottom-xs\@small {
padding-bottom: 10px !important;
}
.u-padding-left-xs\@small {
padding-left: 10px !important;
}
.u-padding-v-xs\@small {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.u-padding-h-xs\@small {
padding-left: 10px !important;
padding-right: 10px !important;
}
.u-padding-all-s\@small {
padding: 15px !important;
}
.u-padding-top-s\@small {
padding-top: 15px !important;
}
.u-padding-right-s\@small {
padding-right: 15px !important;
}
.u-padding-bottom-s\@small {
padding-bottom: 15px !important;
}
.u-padding-left-s\@small {
padding-left: 15px !important;
}
.u-padding-v-s\@small {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.u-padding-h-s\@small {
padding-left: 15px !important;
padding-right: 15px !important;
}
.u-padding-all-m\@small {
padding: 30px !important;
}
.u-padding-top-m\@small {
padding-top: 30px !important;
}
.u-padding-right-m\@small {
padding-right: 30px !important;
}
.u-padding-bottom-m\@small {
padding-bottom: 30px !important;
}
.u-padding-left-m\@small {
padding-left: 30px !important;
}
.u-padding-v-m\@small {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.u-padding-h-m\@small {
padding-left: 30px !important;
padding-right: 30px !important;
}
.u-padding-all-l\@small {
padding: 60px !important;
}
.u-padding-top-l\@small {
padding-top: 60px !important;
}
.u-padding-right-l\@small {
padding-right: 60px !important;
}
.u-padding-bottom-l\@small {
padding-bottom: 60px !important;
}
.u-padding-left-l\@small {
padding-left: 60px !important;
}
.u-padding-v-l\@small {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.u-padding-h-l\@small {
padding-left: 60px !important;
padding-right: 60px !important;
}
.u-padding-all-xl\@small {
padding: 90px !important;
}
.u-padding-top-xl\@small {
padding-top: 90px !important;
}
.u-padding-right-xl\@small {
padding-right: 90px !important;
}
.u-padding-bottom-xl\@small {
padding-bottom: 90px !important;
}
.u-padding-left-xl\@small {
padding-left: 90px !important;
}
.u-padding-v-xl\@small {
padding-top: 90px !important;
padding-bottom: 90px !important;
}
.u-padding-h-xl\@small {
padding-left: 90px !important;
padding-right: 90px !important;
}
.u-padding-all-2xl\@small {
padding: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-all-2xl\@small {
padding: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-top-2xl\@small {
padding-top: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-top-2xl\@small {
padding-top: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-right-2xl\@small {
padding-right: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-right-2xl\@small {
padding-right: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-bottom-2xl\@small {
padding-bottom: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-bottom-2xl\@small {
padding-bottom: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-left-2xl\@small {
padding-left: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-left-2xl\@small {
padding-left: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-v-2xl\@small {
padding-top: 90px !important;
padding-bottom: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-v-2xl\@small {
padding-top: 160px !important;
padding-bottom: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-h-2xl\@small {
padding-left: 90px !important;
padding-right: 90px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-h-2xl\@small {
padding-left: 160px !important;
padding-right: 160px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-all-gutter\@small {
padding: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-top-gutter\@small {
padding-top: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-right-gutter\@small {
padding-right: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-bottom-gutter\@small {
padding-bottom: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-left-gutter\@small {
padding-left: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-v-gutter\@small {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-h-gutter\@small {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-all-outer\@small {
padding: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-all-outer\@small {
padding: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-top-outer\@small {
padding-top: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-top-outer\@small {
padding-top: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-right-outer\@small {
padding-right: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-right-outer\@small {
padding-right: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-bottom-outer\@small {
padding-bottom: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-bottom-outer\@small {
padding-bottom: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-left-outer\@small {
padding-left: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-left-outer\@small {
padding-left: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-v-outer\@small {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-v-outer\@small {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-h-outer\@small {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-padding-h-outer\@small {
padding-left: 40px !important;
padding-right: 40px !important;
}
}
@media all and (min-width: 576px) {
.u-padding-all-none\@small {
padding: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-padding-top-none\@small {
padding-top: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-padding-right-none\@small {
padding-right: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-padding-bottom-none\@small {
padding-bottom: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-padding-left-none\@small {
padding-left: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-padding-v-none\@small {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-padding-h-none\@small {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media all and (min-width: 576px) {
.u-padding-all-auto\@small {
padding: auto !important;
}
}
@media all and (min-width: 576px) {
.u-padding-top-auto\@small {
padding-top: auto !important;
}
}
@media all and (min-width: 576px) {
.u-padding-right-auto\@small {
padding-right: auto !important;
}
}
@media all and (min-width: 576px) {
.u-padding-bottom-auto\@small {
padding-bottom: auto !important;
}
}
@media all and (min-width: 576px) {
.u-padding-left-auto\@small {
padding-left: auto !important;
}
}
@media all and (min-width: 576px) {
.u-padding-v-auto\@small {
padding-top: auto !important;
padding-bottom: auto !important;
}
}
@media all and (min-width: 576px) {
.u-padding-h-auto\@small {
padding-left: auto !important;
padding-right: auto !important;
}
}
@media all and (min-width: 768px) {
.u-margin-all-2xs\@medium {
margin: 5px !important;
}
.u-margin-top-2xs\@medium {
margin-top: 5px !important;
}
.u-margin-right-2xs\@medium {
margin-right: 5px !important;
}
.u-margin-bottom-2xs\@medium {
margin-bottom: 5px !important;
}
.u-margin-left-2xs\@medium {
margin-left: 5px !important;
}
.u-margin-v-2xs\@medium {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.u-margin-h-2xs\@medium {
margin-left: 5px !important;
margin-right: 5px !important;
}
.u-margin-all-xs\@medium {
margin: 10px !important;
}
.u-margin-top-xs\@medium {
margin-top: 10px !important;
}
.u-margin-right-xs\@medium {
margin-right: 10px !important;
}
.u-margin-bottom-xs\@medium {
margin-bottom: 10px !important;
}
.u-margin-left-xs\@medium {
margin-left: 10px !important;
}
.u-margin-v-xs\@medium {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.u-margin-h-xs\@medium {
margin-left: 10px !important;
margin-right: 10px !important;
}
.u-margin-all-s\@medium {
margin: 15px !important;
}
.u-margin-top-s\@medium {
margin-top: 15px !important;
}
.u-margin-right-s\@medium {
margin-right: 15px !important;
}
.u-margin-bottom-s\@medium {
margin-bottom: 15px !important;
}
.u-margin-left-s\@medium {
margin-left: 15px !important;
}
.u-margin-v-s\@medium {
margin-top: 15px !important;
margin-bottom: 15px !important;
}
.u-margin-h-s\@medium {
margin-left: 15px !important;
margin-right: 15px !important;
}
.u-margin-all-m\@medium {
margin: 30px !important;
}
.u-margin-top-m\@medium {
margin-top: 30px !important;
}
.u-margin-right-m\@medium {
margin-right: 30px !important;
}
.u-margin-bottom-m\@medium {
margin-bottom: 30px !important;
}
.u-margin-left-m\@medium {
margin-left: 30px !important;
}
.u-margin-v-m\@medium {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.u-margin-h-m\@medium {
margin-left: 30px !important;
margin-right: 30px !important;
}
.u-margin-all-l\@medium {
margin: 60px !important;
}
.u-margin-top-l\@medium {
margin-top: 60px !important;
}
.u-margin-right-l\@medium {
margin-right: 60px !important;
}
.u-margin-bottom-l\@medium {
margin-bottom: 60px !important;
}
.u-margin-left-l\@medium {
margin-left: 60px !important;
}
.u-margin-v-l\@medium {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.u-margin-h-l\@medium {
margin-left: 60px !important;
margin-right: 60px !important;
}
.u-margin-all-xl\@medium {
margin: 90px !important;
}
.u-margin-top-xl\@medium {
margin-top: 90px !important;
}
.u-margin-right-xl\@medium {
margin-right: 90px !important;
}
.u-margin-bottom-xl\@medium {
margin-bottom: 90px !important;
}
.u-margin-left-xl\@medium {
margin-left: 90px !important;
}
.u-margin-v-xl\@medium {
margin-top: 90px !important;
margin-bottom: 90px !important;
}
.u-margin-h-xl\@medium {
margin-left: 90px !important;
margin-right: 90px !important;
}
.u-margin-all-2xl\@medium {
margin: 160px !important;
}
.u-margin-top-2xl\@medium {
margin-top: 160px !important;
}
.u-margin-right-2xl\@medium {
margin-right: 160px !important;
}
.u-margin-bottom-2xl\@medium {
margin-bottom: 160px !important;
}
.u-margin-left-2xl\@medium {
margin-left: 160px !important;
}
.u-margin-v-2xl\@medium {
margin-top: 160px !important;
margin-bottom: 160px !important;
}
.u-margin-h-2xl\@medium {
margin-left: 160px !important;
margin-right: 160px !important;
}
.u-margin-all-gutter\@medium {
margin: 20px !important;
}
.u-margin-top-gutter\@medium {
margin-top: 20px !important;
}
.u-margin-right-gutter\@medium {
margin-right: 20px !important;
}
.u-margin-bottom-gutter\@medium {
margin-bottom: 20px !important;
}
.u-margin-left-gutter\@medium {
margin-left: 20px !important;
}
.u-margin-v-gutter\@medium {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
.u-margin-h-gutter\@medium {
margin-left: 20px !important;
margin-right: 20px !important;
}
.u-margin-all-outer\@medium {
margin: 40px !important;
}
.u-margin-top-outer\@medium {
margin-top: 40px !important;
}
.u-margin-right-outer\@medium {
margin-right: 40px !important;
}
.u-margin-bottom-outer\@medium {
margin-bottom: 40px !important;
}
.u-margin-left-outer\@medium {
margin-left: 40px !important;
}
.u-margin-v-outer\@medium {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
.u-margin-h-outer\@medium {
margin-left: 40px !important;
margin-right: 40px !important;
}
.u-margin-all-none\@medium {
margin: 0 !important;
}
.u-margin-top-none\@medium {
margin-top: 0 !important;
}
.u-margin-right-none\@medium {
margin-right: 0 !important;
}
.u-margin-bottom-none\@medium {
margin-bottom: 0 !important;
}
.u-margin-left-none\@medium {
margin-left: 0 !important;
}
.u-margin-v-none\@medium {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.u-margin-h-none\@medium {
margin-left: 0 !important;
margin-right: 0 !important;
}
.u-margin-all-auto\@medium {
margin: auto !important;
}
.u-margin-top-auto\@medium {
margin-top: auto !important;
}
.u-margin-right-auto\@medium {
margin-right: auto !important;
}
.u-margin-bottom-auto\@medium {
margin-bottom: auto !important;
}
.u-margin-left-auto\@medium {
margin-left: auto !important;
}
.u-margin-v-auto\@medium {
margin-top: auto !important;
margin-bottom: auto !important;
}
.u-margin-h-auto\@medium {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media all and (min-width: 768px) {
.u-padding-all-2xs\@medium {
padding: 5px !important;
}
.u-padding-top-2xs\@medium {
padding-top: 5px !important;
}
.u-padding-right-2xs\@medium {
padding-right: 5px !important;
}
.u-padding-bottom-2xs\@medium {
padding-bottom: 5px !important;
}
.u-padding-left-2xs\@medium {
padding-left: 5px !important;
}
.u-padding-v-2xs\@medium {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.u-padding-h-2xs\@medium {
padding-left: 5px !important;
padding-right: 5px !important;
}
.u-padding-all-xs\@medium {
padding: 10px !important;
}
.u-padding-top-xs\@medium {
padding-top: 10px !important;
}
.u-padding-right-xs\@medium {
padding-right: 10px !important;
}
.u-padding-bottom-xs\@medium {
padding-bottom: 10px !important;
}
.u-padding-left-xs\@medium {
padding-left: 10px !important;
}
.u-padding-v-xs\@medium {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.u-padding-h-xs\@medium {
padding-left: 10px !important;
padding-right: 10px !important;
}
.u-padding-all-s\@medium {
padding: 15px !important;
}
.u-padding-top-s\@medium {
padding-top: 15px !important;
}
.u-padding-right-s\@medium {
padding-right: 15px !important;
}
.u-padding-bottom-s\@medium {
padding-bottom: 15px !important;
}
.u-padding-left-s\@medium {
padding-left: 15px !important;
}
.u-padding-v-s\@medium {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.u-padding-h-s\@medium {
padding-left: 15px !important;
padding-right: 15px !important;
}
.u-padding-all-m\@medium {
padding: 30px !important;
}
.u-padding-top-m\@medium {
padding-top: 30px !important;
}
.u-padding-right-m\@medium {
padding-right: 30px !important;
}
.u-padding-bottom-m\@medium {
padding-bottom: 30px !important;
}
.u-padding-left-m\@medium {
padding-left: 30px !important;
}
.u-padding-v-m\@medium {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.u-padding-h-m\@medium {
padding-left: 30px !important;
padding-right: 30px !important;
}
.u-padding-all-l\@medium {
padding: 60px !important;
}
.u-padding-top-l\@medium {
padding-top: 60px !important;
}
.u-padding-right-l\@medium {
padding-right: 60px !important;
}
.u-padding-bottom-l\@medium {
padding-bottom: 60px !important;
}
.u-padding-left-l\@medium {
padding-left: 60px !important;
}
.u-padding-v-l\@medium {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.u-padding-h-l\@medium {
padding-left: 60px !important;
padding-right: 60px !important;
}
.u-padding-all-xl\@medium {
padding: 90px !important;
}
.u-padding-top-xl\@medium {
padding-top: 90px !important;
}
.u-padding-right-xl\@medium {
padding-right: 90px !important;
}
.u-padding-bottom-xl\@medium {
padding-bottom: 90px !important;
}
.u-padding-left-xl\@medium {
padding-left: 90px !important;
}
.u-padding-v-xl\@medium {
padding-top: 90px !important;
padding-bottom: 90px !important;
}
.u-padding-h-xl\@medium {
padding-left: 90px !important;
padding-right: 90px !important;
}
.u-padding-all-2xl\@medium {
padding: 160px !important;
}
.u-padding-top-2xl\@medium {
padding-top: 160px !important;
}
.u-padding-right-2xl\@medium {
padding-right: 160px !important;
}
.u-padding-bottom-2xl\@medium {
padding-bottom: 160px !important;
}
.u-padding-left-2xl\@medium {
padding-left: 160px !important;
}
.u-padding-v-2xl\@medium {
padding-top: 160px !important;
padding-bottom: 160px !important;
}
.u-padding-h-2xl\@medium {
padding-left: 160px !important;
padding-right: 160px !important;
}
.u-padding-all-gutter\@medium {
padding: 20px !important;
}
.u-padding-top-gutter\@medium {
padding-top: 20px !important;
}
.u-padding-right-gutter\@medium {
padding-right: 20px !important;
}
.u-padding-bottom-gutter\@medium {
padding-bottom: 20px !important;
}
.u-padding-left-gutter\@medium {
padding-left: 20px !important;
}
.u-padding-v-gutter\@medium {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.u-padding-h-gutter\@medium {
padding-left: 20px !important;
padding-right: 20px !important;
}
.u-padding-all-outer\@medium {
padding: 40px !important;
}
.u-padding-top-outer\@medium {
padding-top: 40px !important;
}
.u-padding-right-outer\@medium {
padding-right: 40px !important;
}
.u-padding-bottom-outer\@medium {
padding-bottom: 40px !important;
}
.u-padding-left-outer\@medium {
padding-left: 40px !important;
}
.u-padding-v-outer\@medium {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.u-padding-h-outer\@medium {
padding-left: 40px !important;
padding-right: 40px !important;
}
.u-padding-all-none\@medium {
padding: 0 !important;
}
.u-padding-top-none\@medium {
padding-top: 0 !important;
}
.u-padding-right-none\@medium {
padding-right: 0 !important;
}
.u-padding-bottom-none\@medium {
padding-bottom: 0 !important;
}
.u-padding-left-none\@medium {
padding-left: 0 !important;
}
.u-padding-v-none\@medium {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.u-padding-h-none\@medium {
padding-left: 0 !important;
padding-right: 0 !important;
}
.u-padding-all-auto\@medium {
padding: auto !important;
}
.u-padding-top-auto\@medium {
padding-top: auto !important;
}
.u-padding-right-auto\@medium {
padding-right: auto !important;
}
.u-padding-bottom-auto\@medium {
padding-bottom: auto !important;
}
.u-padding-left-auto\@medium {
padding-left: auto !important;
}
.u-padding-v-auto\@medium {
padding-top: auto !important;
padding-bottom: auto !important;
}
.u-padding-h-auto\@medium {
padding-left: auto !important;
padding-right: auto !important;
}
}
@media all and (min-width: 992px) {
.u-margin-all-2xs\@large {
margin: 5px !important;
}
.u-margin-top-2xs\@large {
margin-top: 5px !important;
}
.u-margin-right-2xs\@large {
margin-right: 5px !important;
}
.u-margin-bottom-2xs\@large {
margin-bottom: 5px !important;
}
.u-margin-left-2xs\@large {
margin-left: 5px !important;
}
.u-margin-v-2xs\@large {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.u-margin-h-2xs\@large {
margin-left: 5px !important;
margin-right: 5px !important;
}
.u-margin-all-xs\@large {
margin: 10px !important;
}
.u-margin-top-xs\@large {
margin-top: 10px !important;
}
.u-margin-right-xs\@large {
margin-right: 10px !important;
}
.u-margin-bottom-xs\@large {
margin-bottom: 10px !important;
}
.u-margin-left-xs\@large {
margin-left: 10px !important;
}
.u-margin-v-xs\@large {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.u-margin-h-xs\@large {
margin-left: 10px !important;
margin-right: 10px !important;
}
.u-margin-all-s\@large {
margin: 15px !important;
}
.u-margin-top-s\@large {
margin-top: 15px !important;
}
.u-margin-right-s\@large {
margin-right: 15px !important;
}
.u-margin-bottom-s\@large {
margin-bottom: 15px !important;
}
.u-margin-left-s\@large {
margin-left: 15px !important;
}
.u-margin-v-s\@large {
margin-top: 15px !important;
margin-bottom: 15px !important;
}
.u-margin-h-s\@large {
margin-left: 15px !important;
margin-right: 15px !important;
}
.u-margin-all-m\@large {
margin: 30px !important;
}
.u-margin-top-m\@large {
margin-top: 30px !important;
}
.u-margin-right-m\@large {
margin-right: 30px !important;
}
.u-margin-bottom-m\@large {
margin-bottom: 30px !important;
}
.u-margin-left-m\@large {
margin-left: 30px !important;
}
.u-margin-v-m\@large {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.u-margin-h-m\@large {
margin-left: 30px !important;
margin-right: 30px !important;
}
.u-margin-all-l\@large {
margin: 60px !important;
}
.u-margin-top-l\@large {
margin-top: 60px !important;
}
.u-margin-right-l\@large {
margin-right: 60px !important;
}
.u-margin-bottom-l\@large {
margin-bottom: 60px !important;
}
.u-margin-left-l\@large {
margin-left: 60px !important;
}
.u-margin-v-l\@large {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.u-margin-h-l\@large {
margin-left: 60px !important;
margin-right: 60px !important;
}
.u-margin-all-xl\@large {
margin: 90px !important;
}
.u-margin-top-xl\@large {
margin-top: 90px !important;
}
.u-margin-right-xl\@large {
margin-right: 90px !important;
}
.u-margin-bottom-xl\@large {
margin-bottom: 90px !important;
}
.u-margin-left-xl\@large {
margin-left: 90px !important;
}
.u-margin-v-xl\@large {
margin-top: 90px !important;
margin-bottom: 90px !important;
}
.u-margin-h-xl\@large {
margin-left: 90px !important;
margin-right: 90px !important;
}
.u-margin-all-2xl\@large {
margin: 160px !important;
}
.u-margin-top-2xl\@large {
margin-top: 160px !important;
}
.u-margin-right-2xl\@large {
margin-right: 160px !important;
}
.u-margin-bottom-2xl\@large {
margin-bottom: 160px !important;
}
.u-margin-left-2xl\@large {
margin-left: 160px !important;
}
.u-margin-v-2xl\@large {
margin-top: 160px !important;
margin-bottom: 160px !important;
}
.u-margin-h-2xl\@large {
margin-left: 160px !important;
margin-right: 160px !important;
}
.u-margin-all-gutter\@large {
margin: 20px !important;
}
.u-margin-top-gutter\@large {
margin-top: 20px !important;
}
.u-margin-right-gutter\@large {
margin-right: 20px !important;
}
.u-margin-bottom-gutter\@large {
margin-bottom: 20px !important;
}
.u-margin-left-gutter\@large {
margin-left: 20px !important;
}
.u-margin-v-gutter\@large {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
.u-margin-h-gutter\@large {
margin-left: 20px !important;
margin-right: 20px !important;
}
.u-margin-all-outer\@large {
margin: 40px !important;
}
.u-margin-top-outer\@large {
margin-top: 40px !important;
}
.u-margin-right-outer\@large {
margin-right: 40px !important;
}
.u-margin-bottom-outer\@large {
margin-bottom: 40px !important;
}
.u-margin-left-outer\@large {
margin-left: 40px !important;
}
.u-margin-v-outer\@large {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
.u-margin-h-outer\@large {
margin-left: 40px !important;
margin-right: 40px !important;
}
.u-margin-all-none\@large {
margin: 0 !important;
}
.u-margin-top-none\@large {
margin-top: 0 !important;
}
.u-margin-right-none\@large {
margin-right: 0 !important;
}
.u-margin-bottom-none\@large {
margin-bottom: 0 !important;
}
.u-margin-left-none\@large {
margin-left: 0 !important;
}
.u-margin-v-none\@large {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.u-margin-h-none\@large {
margin-left: 0 !important;
margin-right: 0 !important;
}
.u-margin-all-auto\@large {
margin: auto !important;
}
.u-margin-top-auto\@large {
margin-top: auto !important;
}
.u-margin-right-auto\@large {
margin-right: auto !important;
}
.u-margin-bottom-auto\@large {
margin-bottom: auto !important;
}
.u-margin-left-auto\@large {
margin-left: auto !important;
}
.u-margin-v-auto\@large {
margin-top: auto !important;
margin-bottom: auto !important;
}
.u-margin-h-auto\@large {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media all and (min-width: 992px) {
.u-padding-all-2xs\@large {
padding: 5px !important;
}
.u-padding-top-2xs\@large {
padding-top: 5px !important;
}
.u-padding-right-2xs\@large {
padding-right: 5px !important;
}
.u-padding-bottom-2xs\@large {
padding-bottom: 5px !important;
}
.u-padding-left-2xs\@large {
padding-left: 5px !important;
}
.u-padding-v-2xs\@large {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.u-padding-h-2xs\@large {
padding-left: 5px !important;
padding-right: 5px !important;
}
.u-padding-all-xs\@large {
padding: 10px !important;
}
.u-padding-top-xs\@large {
padding-top: 10px !important;
}
.u-padding-right-xs\@large {
padding-right: 10px !important;
}
.u-padding-bottom-xs\@large {
padding-bottom: 10px !important;
}
.u-padding-left-xs\@large {
padding-left: 10px !important;
}
.u-padding-v-xs\@large {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.u-padding-h-xs\@large {
padding-left: 10px !important;
padding-right: 10px !important;
}
.u-padding-all-s\@large {
padding: 15px !important;
}
.u-padding-top-s\@large {
padding-top: 15px !important;
}
.u-padding-right-s\@large {
padding-right: 15px !important;
}
.u-padding-bottom-s\@large {
padding-bottom: 15px !important;
}
.u-padding-left-s\@large {
padding-left: 15px !important;
}
.u-padding-v-s\@large {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.u-padding-h-s\@large {
padding-left: 15px !important;
padding-right: 15px !important;
}
.u-padding-all-m\@large {
padding: 30px !important;
}
.u-padding-top-m\@large {
padding-top: 30px !important;
}
.u-padding-right-m\@large {
padding-right: 30px !important;
}
.u-padding-bottom-m\@large {
padding-bottom: 30px !important;
}
.u-padding-left-m\@large {
padding-left: 30px !important;
}
.u-padding-v-m\@large {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.u-padding-h-m\@large {
padding-left: 30px !important;
padding-right: 30px !important;
}
.u-padding-all-l\@large {
padding: 60px !important;
}
.u-padding-top-l\@large {
padding-top: 60px !important;
}
.u-padding-right-l\@large {
padding-right: 60px !important;
}
.u-padding-bottom-l\@large {
padding-bottom: 60px !important;
}
.u-padding-left-l\@large {
padding-left: 60px !important;
}
.u-padding-v-l\@large {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.u-padding-h-l\@large {
padding-left: 60px !important;
padding-right: 60px !important;
}
.u-padding-all-xl\@large {
padding: 90px !important;
}
.u-padding-top-xl\@large {
padding-top: 90px !important;
}
.u-padding-right-xl\@large {
padding-right: 90px !important;
}
.u-padding-bottom-xl\@large {
padding-bottom: 90px !important;
}
.u-padding-left-xl\@large {
padding-left: 90px !important;
}
.u-padding-v-xl\@large {
padding-top: 90px !important;
padding-bottom: 90px !important;
}
.u-padding-h-xl\@large {
padding-left: 90px !important;
padding-right: 90px !important;
}
.u-padding-all-2xl\@large {
padding: 160px !important;
}
.u-padding-top-2xl\@large {
padding-top: 160px !important;
}
.u-padding-right-2xl\@large {
padding-right: 160px !important;
}
.u-padding-bottom-2xl\@large {
padding-bottom: 160px !important;
}
.u-padding-left-2xl\@large {
padding-left: 160px !important;
}
.u-padding-v-2xl\@large {
padding-top: 160px !important;
padding-bottom: 160px !important;
}
.u-padding-h-2xl\@large {
padding-left: 160px !important;
padding-right: 160px !important;
}
.u-padding-all-gutter\@large {
padding: 20px !important;
}
.u-padding-top-gutter\@large {
padding-top: 20px !important;
}
.u-padding-right-gutter\@large {
padding-right: 20px !important;
}
.u-padding-bottom-gutter\@large {
padding-bottom: 20px !important;
}
.u-padding-left-gutter\@large {
padding-left: 20px !important;
}
.u-padding-v-gutter\@large {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.u-padding-h-gutter\@large {
padding-left: 20px !important;
padding-right: 20px !important;
}
.u-padding-all-outer\@large {
padding: 40px !important;
}
.u-padding-top-outer\@large {
padding-top: 40px !important;
}
.u-padding-right-outer\@large {
padding-right: 40px !important;
}
.u-padding-bottom-outer\@large {
padding-bottom: 40px !important;
}
.u-padding-left-outer\@large {
padding-left: 40px !important;
}
.u-padding-v-outer\@large {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.u-padding-h-outer\@large {
padding-left: 40px !important;
padding-right: 40px !important;
}
.u-padding-all-none\@large {
padding: 0 !important;
}
.u-padding-top-none\@large {
padding-top: 0 !important;
}
.u-padding-right-none\@large {
padding-right: 0 !important;
}
.u-padding-bottom-none\@large {
padding-bottom: 0 !important;
}
.u-padding-left-none\@large {
padding-left: 0 !important;
}
.u-padding-v-none\@large {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.u-padding-h-none\@large {
padding-left: 0 !important;
padding-right: 0 !important;
}
.u-padding-all-auto\@large {
padding: auto !important;
}
.u-padding-top-auto\@large {
padding-top: auto !important;
}
.u-padding-right-auto\@large {
padding-right: auto !important;
}
.u-padding-bottom-auto\@large {
padding-bottom: auto !important;
}
.u-padding-left-auto\@large {
padding-left: auto !important;
}
.u-padding-v-auto\@large {
padding-top: auto !important;
padding-bottom: auto !important;
}
.u-padding-h-auto\@large {
padding-left: auto !important;
padding-right: auto !important;
}
}
@media all and (min-width: 1200px) {
.u-margin-all-2xs\@xlarge {
margin: 5px !important;
}
.u-margin-top-2xs\@xlarge {
margin-top: 5px !important;
}
.u-margin-right-2xs\@xlarge {
margin-right: 5px !important;
}
.u-margin-bottom-2xs\@xlarge {
margin-bottom: 5px !important;
}
.u-margin-left-2xs\@xlarge {
margin-left: 5px !important;
}
.u-margin-v-2xs\@xlarge {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.u-margin-h-2xs\@xlarge {
margin-left: 5px !important;
margin-right: 5px !important;
}
.u-margin-all-xs\@xlarge {
margin: 10px !important;
}
.u-margin-top-xs\@xlarge {
margin-top: 10px !important;
}
.u-margin-right-xs\@xlarge {
margin-right: 10px !important;
}
.u-margin-bottom-xs\@xlarge {
margin-bottom: 10px !important;
}
.u-margin-left-xs\@xlarge {
margin-left: 10px !important;
}
.u-margin-v-xs\@xlarge {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.u-margin-h-xs\@xlarge {
margin-left: 10px !important;
margin-right: 10px !important;
}
.u-margin-all-s\@xlarge {
margin: 15px !important;
}
.u-margin-top-s\@xlarge {
margin-top: 15px !important;
}
.u-margin-right-s\@xlarge {
margin-right: 15px !important;
}
.u-margin-bottom-s\@xlarge {
margin-bottom: 15px !important;
}
.u-margin-left-s\@xlarge {
margin-left: 15px !important;
}
.u-margin-v-s\@xlarge {
margin-top: 15px !important;
margin-bottom: 15px !important;
}
.u-margin-h-s\@xlarge {
margin-left: 15px !important;
margin-right: 15px !important;
}
.u-margin-all-m\@xlarge {
margin: 30px !important;
}
.u-margin-top-m\@xlarge {
margin-top: 30px !important;
}
.u-margin-right-m\@xlarge {
margin-right: 30px !important;
}
.u-margin-bottom-m\@xlarge {
margin-bottom: 30px !important;
}
.u-margin-left-m\@xlarge {
margin-left: 30px !important;
}
.u-margin-v-m\@xlarge {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.u-margin-h-m\@xlarge {
margin-left: 30px !important;
margin-right: 30px !important;
}
.u-margin-all-l\@xlarge {
margin: 60px !important;
}
.u-margin-top-l\@xlarge {
margin-top: 60px !important;
}
.u-margin-right-l\@xlarge {
margin-right: 60px !important;
}
.u-margin-bottom-l\@xlarge {
margin-bottom: 60px !important;
}
.u-margin-left-l\@xlarge {
margin-left: 60px !important;
}
.u-margin-v-l\@xlarge {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.u-margin-h-l\@xlarge {
margin-left: 60px !important;
margin-right: 60px !important;
}
.u-margin-all-xl\@xlarge {
margin: 90px !important;
}
.u-margin-top-xl\@xlarge {
margin-top: 90px !important;
}
.u-margin-right-xl\@xlarge {
margin-right: 90px !important;
}
.u-margin-bottom-xl\@xlarge {
margin-bottom: 90px !important;
}
.u-margin-left-xl\@xlarge {
margin-left: 90px !important;
}
.u-margin-v-xl\@xlarge {
margin-top: 90px !important;
margin-bottom: 90px !important;
}
.u-margin-h-xl\@xlarge {
margin-left: 90px !important;
margin-right: 90px !important;
}
.u-margin-all-2xl\@xlarge {
margin: 160px !important;
}
.u-margin-top-2xl\@xlarge {
margin-top: 160px !important;
}
.u-margin-right-2xl\@xlarge {
margin-right: 160px !important;
}
.u-margin-bottom-2xl\@xlarge {
margin-bottom: 160px !important;
}
.u-margin-left-2xl\@xlarge {
margin-left: 160px !important;
}
.u-margin-v-2xl\@xlarge {
margin-top: 160px !important;
margin-bottom: 160px !important;
}
.u-margin-h-2xl\@xlarge {
margin-left: 160px !important;
margin-right: 160px !important;
}
.u-margin-all-gutter\@xlarge {
margin: 20px !important;
}
.u-margin-top-gutter\@xlarge {
margin-top: 20px !important;
}
.u-margin-right-gutter\@xlarge {
margin-right: 20px !important;
}
.u-margin-bottom-gutter\@xlarge {
margin-bottom: 20px !important;
}
.u-margin-left-gutter\@xlarge {
margin-left: 20px !important;
}
.u-margin-v-gutter\@xlarge {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
.u-margin-h-gutter\@xlarge {
margin-left: 20px !important;
margin-right: 20px !important;
}
.u-margin-all-outer\@xlarge {
margin: 40px !important;
}
.u-margin-top-outer\@xlarge {
margin-top: 40px !important;
}
.u-margin-right-outer\@xlarge {
margin-right: 40px !important;
}
.u-margin-bottom-outer\@xlarge {
margin-bottom: 40px !important;
}
.u-margin-left-outer\@xlarge {
margin-left: 40px !important;
}
.u-margin-v-outer\@xlarge {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
.u-margin-h-outer\@xlarge {
margin-left: 40px !important;
margin-right: 40px !important;
}
.u-margin-all-none\@xlarge {
margin: 0 !important;
}
.u-margin-top-none\@xlarge {
margin-top: 0 !important;
}
.u-margin-right-none\@xlarge {
margin-right: 0 !important;
}
.u-margin-bottom-none\@xlarge {
margin-bottom: 0 !important;
}
.u-margin-left-none\@xlarge {
margin-left: 0 !important;
}
.u-margin-v-none\@xlarge {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.u-margin-h-none\@xlarge {
margin-left: 0 !important;
margin-right: 0 !important;
}
.u-margin-all-auto\@xlarge {
margin: auto !important;
}
.u-margin-top-auto\@xlarge {
margin-top: auto !important;
}
.u-margin-right-auto\@xlarge {
margin-right: auto !important;
}
.u-margin-bottom-auto\@xlarge {
margin-bottom: auto !important;
}
.u-margin-left-auto\@xlarge {
margin-left: auto !important;
}
.u-margin-v-auto\@xlarge {
margin-top: auto !important;
margin-bottom: auto !important;
}
.u-margin-h-auto\@xlarge {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media all and (min-width: 1200px) {
.u-padding-all-2xs\@xlarge {
padding: 5px !important;
}
.u-padding-top-2xs\@xlarge {
padding-top: 5px !important;
}
.u-padding-right-2xs\@xlarge {
padding-right: 5px !important;
}
.u-padding-bottom-2xs\@xlarge {
padding-bottom: 5px !important;
}
.u-padding-left-2xs\@xlarge {
padding-left: 5px !important;
}
.u-padding-v-2xs\@xlarge {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.u-padding-h-2xs\@xlarge {
padding-left: 5px !important;
padding-right: 5px !important;
}
.u-padding-all-xs\@xlarge {
padding: 10px !important;
}
.u-padding-top-xs\@xlarge {
padding-top: 10px !important;
}
.u-padding-right-xs\@xlarge {
padding-right: 10px !important;
}
.u-padding-bottom-xs\@xlarge {
padding-bottom: 10px !important;
}
.u-padding-left-xs\@xlarge {
padding-left: 10px !important;
}
.u-padding-v-xs\@xlarge {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.u-padding-h-xs\@xlarge {
padding-left: 10px !important;
padding-right: 10px !important;
}
.u-padding-all-s\@xlarge {
padding: 15px !important;
}
.u-padding-top-s\@xlarge {
padding-top: 15px !important;
}
.u-padding-right-s\@xlarge {
padding-right: 15px !important;
}
.u-padding-bottom-s\@xlarge {
padding-bottom: 15px !important;
}
.u-padding-left-s\@xlarge {
padding-left: 15px !important;
}
.u-padding-v-s\@xlarge {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.u-padding-h-s\@xlarge {
padding-left: 15px !important;
padding-right: 15px !important;
}
.u-padding-all-m\@xlarge {
padding: 30px !important;
}
.u-padding-top-m\@xlarge {
padding-top: 30px !important;
}
.u-padding-right-m\@xlarge {
padding-right: 30px !important;
}
.u-padding-bottom-m\@xlarge {
padding-bottom: 30px !important;
}
.u-padding-left-m\@xlarge {
padding-left: 30px !important;
}
.u-padding-v-m\@xlarge {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.u-padding-h-m\@xlarge {
padding-left: 30px !important;
padding-right: 30px !important;
}
.u-padding-all-l\@xlarge {
padding: 60px !important;
}
.u-padding-top-l\@xlarge {
padding-top: 60px !important;
}
.u-padding-right-l\@xlarge {
padding-right: 60px !important;
}
.u-padding-bottom-l\@xlarge {
padding-bottom: 60px !important;
}
.u-padding-left-l\@xlarge {
padding-left: 60px !important;
}
.u-padding-v-l\@xlarge {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.u-padding-h-l\@xlarge {
padding-left: 60px !important;
padding-right: 60px !important;
}
.u-padding-all-xl\@xlarge {
padding: 90px !important;
}
.u-padding-top-xl\@xlarge {
padding-top: 90px !important;
}
.u-padding-right-xl\@xlarge {
padding-right: 90px !important;
}
.u-padding-bottom-xl\@xlarge {
padding-bottom: 90px !important;
}
.u-padding-left-xl\@xlarge {
padding-left: 90px !important;
}
.u-padding-v-xl\@xlarge {
padding-top: 90px !important;
padding-bottom: 90px !important;
}
.u-padding-h-xl\@xlarge {
padding-left: 90px !important;
padding-right: 90px !important;
}
.u-padding-all-2xl\@xlarge {
padding: 160px !important;
}
.u-padding-top-2xl\@xlarge {
padding-top: 160px !important;
}
.u-padding-right-2xl\@xlarge {
padding-right: 160px !important;
}
.u-padding-bottom-2xl\@xlarge {
padding-bottom: 160px !important;
}
.u-padding-left-2xl\@xlarge {
padding-left: 160px !important;
}
.u-padding-v-2xl\@xlarge {
padding-top: 160px !important;
padding-bottom: 160px !important;
}
.u-padding-h-2xl\@xlarge {
padding-left: 160px !important;
padding-right: 160px !important;
}
.u-padding-all-gutter\@xlarge {
padding: 20px !important;
}
.u-padding-top-gutter\@xlarge {
padding-top: 20px !important;
}
.u-padding-right-gutter\@xlarge {
padding-right: 20px !important;
}
.u-padding-bottom-gutter\@xlarge {
padding-bottom: 20px !important;
}
.u-padding-left-gutter\@xlarge {
padding-left: 20px !important;
}
.u-padding-v-gutter\@xlarge {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.u-padding-h-gutter\@xlarge {
padding-left: 20px !important;
padding-right: 20px !important;
}
.u-padding-all-outer\@xlarge {
padding: 40px !important;
}
.u-padding-top-outer\@xlarge {
padding-top: 40px !important;
}
.u-padding-right-outer\@xlarge {
padding-right: 40px !important;
}
.u-padding-bottom-outer\@xlarge {
padding-bottom: 40px !important;
}
.u-padding-left-outer\@xlarge {
padding-left: 40px !important;
}
.u-padding-v-outer\@xlarge {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.u-padding-h-outer\@xlarge {
padding-left: 40px !important;
padding-right: 40px !important;
}
.u-padding-all-none\@xlarge {
padding: 0 !important;
}
.u-padding-top-none\@xlarge {
padding-top: 0 !important;
}
.u-padding-right-none\@xlarge {
padding-right: 0 !important;
}
.u-padding-bottom-none\@xlarge {
padding-bottom: 0 !important;
}
.u-padding-left-none\@xlarge {
padding-left: 0 !important;
}
.u-padding-v-none\@xlarge {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.u-padding-h-none\@xlarge {
padding-left: 0 !important;
padding-right: 0 !important;
}
.u-padding-all-auto\@xlarge {
padding: auto !important;
}
.u-padding-top-auto\@xlarge {
padding-top: auto !important;
}
.u-padding-right-auto\@xlarge {
padding-right: auto !important;
}
.u-padding-bottom-auto\@xlarge {
padding-bottom: auto !important;
}
.u-padding-left-auto\@xlarge {
padding-left: auto !important;
}
.u-padding-v-auto\@xlarge {
padding-top: auto !important;
padding-bottom: auto !important;
}
.u-padding-h-auto\@xlarge {
padding-left: auto !important;
padding-right: auto !important;
}
}
/* Font-weight utilities */
.u-text-weight-normal {
font-weight: 400 !important;
}
.u-text-weight-medium {
font-weight: 500 !important;
}
.u-text-weight-bold {
font-weight: 700 !important;
}
/* Font-size utilities */
.u-text-2xs {
font-size: 11px !important;
line-height: 15px !important;
}
.u-text-xs {
font-size: 13px !important;
line-height: 15px !important;
}
.u-text-s {
font-size: 15px !important;
line-height: 20px !important;
}
.u-text-m {
font-size: 17px !important;
line-height: 30px !important;
}
.u-text-l {
font-size: 19px !important;
line-height: 30px !important;
}
.u-text-xl {
font-size: 21px !important;
line-height: 35px !important;
}
.u-text-2xl {
font-size: 26px !important;
line-height: 40px !important;
}
.u-text-3xl {
font-size: 32px !important;
line-height: 45px !important;
}
.u-text-4xl {
font-size: 32px !important;
line-height: 45px !important;
}
@media all and (min-width: 768px) {
.u-text-4xl {
font-size: 40px !important;
line-height: 55px !important;
}
}
.u-text-5xl {
font-size: 32px !important;
line-height: 45px !important;
}
@media all and (min-width: 768px) {
.u-text-5xl {
font-size: 52px !important;
line-height: 70px !important;
}
}
@media all and (min-width: 576px) {
.u-text-2xs\@small {
font-size: 11px !important;
line-height: 15px !important;
}
.u-text-xs\@small {
font-size: 13px !important;
line-height: 15px !important;
}
.u-text-s\@small {
font-size: 15px !important;
line-height: 20px !important;
}
.u-text-m\@small {
font-size: 17px !important;
line-height: 30px !important;
}
.u-text-l\@small {
font-size: 19px !important;
line-height: 30px !important;
}
.u-text-xl\@small {
font-size: 21px !important;
line-height: 35px !important;
}
.u-text-2xl\@small {
font-size: 26px !important;
line-height: 40px !important;
}
.u-text-3xl\@small {
font-size: 32px !important;
line-height: 45px !important;
}
.u-text-4xl\@small {
font-size: 32px !important;
line-height: 45px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-text-4xl\@small {
font-size: 40px !important;
line-height: 55px !important;
}
}
@media all and (min-width: 576px) {
.u-text-5xl\@small {
font-size: 32px !important;
line-height: 45px !important;
}
}
@media all and (min-width: 576px) and (min-width: 768px) {
.u-text-5xl\@small {
font-size: 52px !important;
line-height: 70px !important;
}
}
@media all and (min-width: 768px) {
.u-text-2xs\@medium {
font-size: 11px !important;
line-height: 15px !important;
}
.u-text-xs\@medium {
font-size: 13px !important;
line-height: 15px !important;
}
.u-text-s\@medium {
font-size: 15px !important;
line-height: 20px !important;
}
.u-text-m\@medium {
font-size: 17px !important;
line-height: 30px !important;
}
.u-text-l\@medium {
font-size: 19px !important;
line-height: 30px !important;
}
.u-text-xl\@medium {
font-size: 21px !important;
line-height: 35px !important;
}
.u-text-2xl\@medium {
font-size: 26px !important;
line-height: 40px !important;
}
.u-text-3xl\@medium {
font-size: 32px !important;
line-height: 45px !important;
}
.u-text-4xl\@medium {
font-size: 40px !important;
line-height: 55px !important;
}
.u-text-5xl\@medium {
font-size: 52px !important;
line-height: 70px !important;
}
}
@media all and (min-width: 992px) {
.u-text-2xs\@large {
font-size: 11px !important;
line-height: 15px !important;
}
.u-text-xs\@large {
font-size: 13px !important;
line-height: 15px !important;
}
.u-text-s\@large {
font-size: 15px !important;
line-height: 20px !important;
}
.u-text-m\@large {
font-size: 17px !important;
line-height: 30px !important;
}
.u-text-l\@large {
font-size: 19px !important;
line-height: 30px !important;
}
.u-text-xl\@large {
font-size: 21px !important;
line-height: 35px !important;
}
.u-text-2xl\@large {
font-size: 26px !important;
line-height: 40px !important;
}
.u-text-3xl\@large {
font-size: 32px !important;
line-height: 45px !important;
}
.u-text-4xl\@large {
font-size: 40px !important;
line-height: 55px !important;
}
.u-text-5xl\@large {
font-size: 52px !important;
line-height: 70px !important;
}
}
@media all and (min-width: 1200px) {
.u-text-2xs\@xlarge {
font-size: 11px !important;
line-height: 15px !important;
}
.u-text-xs\@xlarge {
font-size: 13px !important;
line-height: 15px !important;
}
.u-text-s\@xlarge {
font-size: 15px !important;
line-height: 20px !important;
}
.u-text-m\@xlarge {
font-size: 17px !important;
line-height: 30px !important;
}
.u-text-l\@xlarge {
font-size: 19px !important;
line-height: 30px !important;
}
.u-text-xl\@xlarge {
font-size: 21px !important;
line-height: 35px !important;
}
.u-text-2xl\@xlarge {
font-size: 26px !important;
line-height: 40px !important;
}
.u-text-3xl\@xlarge {
font-size: 32px !important;
line-height: 45px !important;
}
.u-text-4xl\@xlarge {
font-size: 40px !important;
line-height: 55px !important;
}
.u-text-5xl\@xlarge {
font-size: 52px !important;
line-height: 70px !important;
}
}
/* In some case we need a unit based line-height for granular typography spacing */
.u-line-height-1u {
line-height: 5px !important;
}
.u-line-height-2u {
line-height: 10px !important;
}
.u-line-height-3u {
line-height: 15px !important;
}
.u-line-height-4u {
line-height: 20px !important;
}
.u-line-height-5u {
line-height: 25px !important;
}
.u-line-height-6u {
line-height: 30px !important;
}
.u-line-height-7u {
line-height: 35px !important;
}
.u-line-height-8u {
line-height: 40px !important;
}
.u-text-uppercase {
text-transform: uppercase !important;
}
.u-text-ellipsis {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
@media all and (min-width: 576px) {
.u-text-ellipsis\@small {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
@media all and (min-width: 768px) {
.u-text-ellipsis\@medium {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
@media all and (min-width: 992px) {
.u-text-ellipsis\@large {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
@media all and (min-width: 1200px) {
.u-text-ellipsis\@xlarge {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
.u-text-overflow {
white-space: unset !important;
overflow: unset !important;
text-overflow: unset !important;
}
@media all and (min-width: 576px) {
.u-text-overflow\@small {
white-space: unset !important;
overflow: unset !important;
text-overflow: unset !important;
}
}
@media all and (min-width: 768px) {
.u-text-overflow\@medium {
white-space: unset !important;
overflow: unset !important;
text-overflow: unset !important;
}
}
@media all and (min-width: 992px) {
.u-text-overflow\@large {
white-space: unset !important;
overflow: unset !important;
text-overflow: unset !important;
}
}
@media all and (min-width: 1200px) {
.u-text-overflow\@xlarge {
white-space: unset !important;
overflow: unset !important;
text-overflow: unset !important;
}
}
.u-text-nowrap {
white-space: nowrap !important;
}
@media all and (min-width: 576px) {
.u-text-nowrap\@small {
white-space: nowrap !important;
}
}
@media all and (min-width: 768px) {
.u-text-nowrap\@medium {
white-space: nowrap !important;
}
}
@media all and (min-width: 992px) {
.u-text-nowrap\@large {
white-space: nowrap !important;
}
}
@media all and (min-width: 1200px) {
.u-text-nowrap\@xlarge {
white-space: nowrap !important;
}
}
.is-collapsible {
transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.is-collapsed {
/* Apply a opacity transition to the original element (transition: opacity 250ms ease-in;) for a nice transition effect */
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
/**
* Adapted from https://github.com/suitcss/utils-flex/blob/master/lib/flex.css
*/
/* Base classes */
/**
* Container
*/
.u-flex {
display: flex !important;
}
.u-flex-inline {
display: inline-flex !important;
}
/**
* Direction: row
*/
.u-flex-row {
flex-direction: row !important;
}
.u-flex-row-reverse {
flex-direction: row-reverse !important;
}
/**
* Direction: column
*/
.u-flex-col {
flex-direction: column !important;
}
.u-flex-col-reverse {
flex-direction: column-reverse !important;
}
/**
* Wrap
*/
.u-flex-wrap {
flex-wrap: wrap !important;
}
.u-flex-no-wrap {
flex-wrap: nowrap !important;
}
.u-flex-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
/**
* Align items along the main axis of the current line of the flex container
*/
.u-flex-justify-start {
justify-content: flex-start !important;
}
.u-flex-justify-end {
justify-content: flex-end !important;
}
.u-flex-justify-center {
justify-content: center !important;
}
.u-flex-justify-between {
justify-content: space-between !important;
}
.u-flex-justify-around {
justify-content: space-around !important;
}
/**
* Align items in the cross axis of the current line of the flex container
* Similar to `justify-content` but in the perpendicular direction
*/
.u-flex-align-items-start {
align-items: flex-start !important;
}
.u-flex-align-items-end {
align-items: flex-end !important;
}
.u-flex-align-items-center {
align-items: center !important;
}
.u-flex-align-items-stretch {
align-items: stretch !important;
}
.u-flex-align-items-baseline {
align-items: baseline !important;
}
/**
* Aligns items within the flex container when there is extra
* space in the cross-axis
*
* Has no effect when there is only one line of flex items.
*/
.u-flex-align-content-start {
align-content: flex-start !important;
}
.u-flex-align-content-end {
align-content: flex-end !important;
}
.u-flex-align-content-center {
align-content: center !important;
}
.u-flex-align-content-stretch {
align-content: stretch !important;
}
.u-flex-align-content-between {
align-content: space-between !important;
}
.u-flex-align-content-around {
align-content: space-around !important;
}
/* Applies to flex items
========================================================================== */
/**
* Override default alignment of single item when specified by `align-items`
*/
.u-flex-align-self-start {
align-self: flex-start !important;
}
.u-flex-align-self-end {
align-self: flex-end !important;
}
.u-flex-align-self-center {
align-self: center !important;
}
.u-flex-align-self-stretch {
align-self: stretch !important;
}
.u-flex-align-self-baseline {
align-self: baseline !important;
}
.u-flex-align-self-auto {
align-self: auto !important;
}
/**
* Change order without editing underlying HTML
*/
.u-flex-order-first {
order: -1 !important;
}
.u-flex-order-last {
order: 1 !important;
}
.u-flex-order-none {
order: 0 !important;
}
/**
* Specify the flex grow factor, which determines how much the flex item will
* grow relative to the rest of the flex items in the flex container.
*
* Supports 1-5 proportions
*
* 1. Provide all values to avoid IE10 bug with shorthand flex
* - http://git.io/vllC7
*
* Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
* instead of `auto` as this matches what the default would be with `flex`
* shorthand - http://git.io/vllWx
*/
.u-flex-grow1 {
flex: 1 1 0% !important;
/* 1 */
}
.u-flex-grow2 {
flex: 2 1 0% !important;
}
.u-flex-grow3 {
flex: 3 1 0% !important;
}
.u-flex-grow4 {
flex: 4 1 0% !important;
}
.u-flex-grow5 {
flex: 5 1 0% !important;
}
/**
* Specify the flex shrink factor, which determines how much the flex item will
* shrink relative to the rest of the flex items in the flex container.
*/
.u-flex-shrink0 {
flex-shrink: 0 !important;
}
.u-flex-shrink1 {
flex-shrink: 1 !important;
}
.u-flex-shrink2 {
flex-shrink: 2 !important;
}
.u-flex-shrink3 {
flex-shrink: 3 !important;
}
.u-flex-shrink4 {
flex-shrink: 4 !important;
}
.u-flex-shrink5 {
flex-shrink: 5 !important;
}
/**
* Basis
*/
.u-flex-basis-auto {
flex-basis: auto !important;
}
.u-flex-basis-0 {
flex-basis: 0 !important;
}
/*
* Shorthand
*
* Declares all values instead of keywords like 'initial' to work around IE10
* https://www.w3.org/TR/css-flexbox-1/#flex-common
*
* 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
* This ensures it overrides flex-basis set in other utilities.
*/
/*
* Sizes the item based on the width/height properties
*/
.u-flex-initial {
flex: 0 1 auto !important;
flex-basis: auto !important;
/* 1 */
}
/*
* Sizes the item based on the width/height properties, but makes them fully
* flexible, so that they absorb any free space along the main axis.
*/
.u-flex-auto {
flex: 1 1 auto !important;
flex-basis: auto !important;
/* 1 */
}
/*
* Sizes the item according to the width/height properties, but makes the flex
* item fully inflexible. Similar to initial, except that flex items are
* not allowed to shrink, even in overflow situations.
*/
.u-flex-none {
flex: 0 0 auto !important;
flex-basis: auto !important;
/* 1 */
}
@media all and (min-width: 576px) {
/**
* Container
*/
.u-flex\@small {
display: flex !important;
}
.u-flex-inline\@small {
display: inline-flex !important;
}
/**
* Direction: row
*/
.u-flex-row\@small {
flex-direction: row !important;
}
.u-flex-row-reverse\@small {
flex-direction: row-reverse !important;
}
/**
* Direction: column
*/
.u-flex-col\@small {
flex-direction: column !important;
}
.u-flex-col-reverse\@small {
flex-direction: column-reverse !important;
}
/**
* Wrap
*/
.u-flex-wrap\@small {
flex-wrap: wrap !important;
}
.u-flex-no-wrap\@small {
flex-wrap: nowrap !important;
}
.u-flex-wrap-reverse\@small {
flex-wrap: wrap-reverse !important;
}
/**
* Align items along the main axis of the current line of the flex container
*/
.u-flex-justify-start\@small {
justify-content: flex-start !important;
}
.u-flex-justify-end\@small {
justify-content: flex-end !important;
}
.u-flex-justify-center\@small {
justify-content: center !important;
}
.u-flex-justify-between\@small {
justify-content: space-between !important;
}
.u-flex-justify-around\@small {
justify-content: space-around !important;
}
/**
* Align items in the cross axis of the current line of the flex container
* Similar to `justify-content` but in the perpendicular direction
*/
.u-flex-align-items-start\@small {
align-items: flex-start !important;
}
.u-flex-align-items-end\@small {
align-items: flex-end !important;
}
.u-flex-align-items-center\@small {
align-items: center !important;
}
.u-flex-align-items-stretch\@small {
align-items: stretch !important;
}
.u-flex-align-items-baseline\@small {
align-items: baseline !important;
}
/**
* Aligns items within the flex container when there is extra
* space in the cross-axis
*
* Has no effect when there is only one line of flex items.
*/
.u-flex-align-content-start\@small {
align-content: flex-start !important;
}
.u-flex-align-content-end\@small {
align-content: flex-end !important;
}
.u-flex-align-content-center\@small {
align-content: center !important;
}
.u-flex-align-content-stretch\@small {
align-content: stretch !important;
}
.u-flex-align-content-between\@small {
align-content: space-between !important;
}
.u-flex-align-content-around\@small {
align-content: space-around !important;
}
/* Applies to flex items
========================================================================== */
/**
* Override default alignment of single item when specified by `align-items`
*/
.u-flex-align-self-start\@small {
align-self: flex-start !important;
}
.u-flex-align-self-end\@small {
align-self: flex-end !important;
}
.u-flex-align-self-center\@small {
align-self: center !important;
}
.u-flex-align-self-stretch\@small {
align-self: stretch !important;
}
.u-flex-align-self-baseline\@small {
align-self: baseline !important;
}
.u-flex-align-self-auto\@small {
align-self: auto !important;
}
/**
* Change order without editing underlying HTML
*/
.u-flex-order-first\@small {
order: -1 !important;
}
.u-flex-order-last\@small {
order: 1 !important;
}
.u-flex-order-none\@small {
order: 0 !important;
}
/**
* Specify the flex grow factor, which determines how much the flex item will
* grow relative to the rest of the flex items in the flex container.
*
* Supports 1-5 proportions
*
* 1. Provide all values to avoid IE10 bug with shorthand flex
* - http://git.io/vllC7
*
* Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
* instead of `auto` as this matches what the default would be with `flex`
* shorthand - http://git.io/vllWx
*/
.u-flex-grow1\@small {
flex: 1 1 0% !important;
/* 1 */
}
.u-flex-grow2\@small {
flex: 2 1 0% !important;
}
.u-flex-grow3\@small {
flex: 3 1 0% !important;
}
.u-flex-grow4\@small {
flex: 4 1 0% !important;
}
.u-flex-grow5\@small {
flex: 5 1 0% !important;
}
/**
* Specify the flex shrink factor, which determines how much the flex item will
* shrink relative to the rest of the flex items in the flex container.
*/
.u-flex-shrink0\@small {
flex-shrink: 0 !important;
}
.u-flex-shrink1\@small {
flex-shrink: 1 !important;
}
.u-flex-shrink2\@small {
flex-shrink: 2 !important;
}
.u-flex-shrink3\@small {
flex-shrink: 3 !important;
}
.u-flex-shrink4\@small {
flex-shrink: 4 !important;
}
.u-flex-shrink5\@small {
flex-shrink: 5 !important;
}
/**
* Basis
*/
.u-flex-basis-auto\@small {
flex-basis: auto !important;
}
.u-flex-basis-0\@small {
flex-basis: 0 !important;
}
/*
* Shorthand
*
* Declares all values instead of keywords like 'initial' to work around IE10
* https://www.w3.org/TR/css-flexbox-1/#flex-common
*
* 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
* This ensures it overrides flex-basis set in other utilities.
*/
/*
* Sizes the item based on the width/height properties
*/
.u-flex-initial\@small {
flex: 0 1 auto !important;
flex-basis: auto !important;
/* 1 */
}
/*
* Sizes the item based on the width/height properties, but makes them fully
* flexible, so that they absorb any free space along the main axis.
*/
.u-flex-auto\@small {
flex: 1 1 auto !important;
flex-basis: auto !important;
/* 1 */
}
/*
* Sizes the item according to the width/height properties, but makes the flex
* item fully inflexible. Similar to initial, except that flex items are
* not allowed to shrink, even in overflow situations.
*/
.u-flex-none\@small {
flex: 0 0 auto !important;
flex-basis: auto !important;
/* 1 */
}
}
@media all and (min-width: 768px) {
/**
* Container
*/
.u-flex\@medium {
display: flex !important;
}
.u-flex-inline\@medium {
display: inline-flex !important;
}
/**
* Direction: row
*/
.u-flex-row\@medium {
flex-direction: row !important;
}
.u-flex-row-reverse\@medium {
flex-direction: row-reverse !important;
}
/**
* Direction: column
*/
.u-flex-col\@medium {
flex-direction: column !important;
}
.u-flex-col-reverse\@medium {
flex-direction: column-reverse !important;
}
/**
* Wrap
*/
.u-flex-wrap\@medium {
flex-wrap: wrap !important;
}
.u-flex-no-wrap\@medium {
flex-wrap: nowrap !important;
}
.u-flex-wrap-reverse\@medium {
flex-wrap: wrap-reverse !important;
}
/**
* Align items along the main axis of the current line of the flex container
*/
.u-flex-justify-start\@medium {
justify-content: flex-start !important;
}
.u-flex-justify-end\@medium {
justify-content: flex-end !important;
}
.u-flex-justify-center\@medium {
justify-content: center !important;
}
.u-flex-justify-between\@medium {
justify-content: space-between !important;
}
.u-flex-justify-around\@medium {
justify-content: space-around !important;
}
/**
* Align items in the cross axis of the current line of the flex container
* Similar to `justify-content` but in the perpendicular direction
*/
.u-flex-align-items-start\@medium {
align-items: flex-start !important;
}
.u-flex-align-items-end\@medium {
align-items: flex-end !important;
}
.u-flex-align-items-center\@medium {
align-items: center !important;
}
.u-flex-align-items-stretch\@medium {
align-items: stretch !important;
}
.u-flex-align-items-baseline\@medium {
align-items: baseline !important;
}
/**
* Aligns items within the flex container when there is extra
* space in the cross-axis
*
* Has no effect when there is only one line of flex items.
*/
.u-flex-align-content-start\@medium {
align-content: flex-start !important;
}
.u-flex-align-content-end\@medium {
align-content: flex-end !important;
}
.u-flex-align-content-center\@medium {
align-content: center !important;
}
.u-flex-align-content-stretch\@medium {
align-content: stretch !important;
}
.u-flex-align-content-between\@medium {
align-content: space-between !important;
}
.u-flex-align-content-around\@medium {
align-content: space-around !important;
}
/* Applies to flex items
========================================================================== */
/**
* Override default alignment of single item when specified by `align-items`
*/
.u-flex-align-self-start\@medium {
align-self: flex-start !important;
}
.u-flex-align-self-end\@medium {
align-self: flex-end !important;
}
.u-flex-align-self-center\@medium {
align-self: center !important;
}
.u-flex-align-self-stretch\@medium {
align-self: stretch !important;
}
.u-flex-align-self-baseline\@medium {
align-self: baseline !important;
}
.u-flex-align-self-auto\@medium {
align-self: auto !important;
}
/**
* Change order without editing underlying HTML
*/
.u-flex-order-first\@medium {
order: -1 !important;
}
.u-flex-order-last\@medium {
order: 1 !important;
}
.u-flex-order-none\@medium {
order: 0 !important;
}
/**
* Specify the flex grow factor, which determines how much the flex item will
* grow relative to the rest of the flex items in the flex container.
*
* Supports 1-5 proportions
*
* 1. Provide all values to avoid IE10 bug with shorthand flex
* - http://git.io/vllC7
*
* Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
* instead of `auto` as this matches what the default would be with `flex`
* shorthand - http://git.io/vllWx
*/
.u-flex-grow1\@medium {
flex: 1 1 0% !important;
/* 1 */
}
.u-flex-grow2\@medium {
flex: 2 1 0% !important;
}
.u-flex-grow3\@medium {
flex: 3 1 0% !important;
}
.u-flex-grow4\@medium {
flex: 4 1 0% !important;
}
.u-flex-grow5\@medium {
flex: 5 1 0% !important;
}
/**
* Specify the flex shrink factor, which determines how much the flex item will
* shrink relative to the rest of the flex items in the flex container.
*/
.u-flex-shrink0\@medium {
flex-shrink: 0 !important;
}
.u-flex-shrink1\@medium {
flex-shrink: 1 !important;
}
.u-flex-shrink2\@medium {
flex-shrink: 2 !important;
}
.u-flex-shrink3\@medium {
flex-shrink: 3 !important;
}
.u-flex-shrink4\@medium {
flex-shrink: 4 !important;
}
.u-flex-shrink5\@medium {
flex-shrink: 5 !important;
}
/**
* Basis
*/
.u-flex-basis-auto\@medium {
flex-basis: auto !important;
}
.u-flex-basis-0\@medium {
flex-basis: 0 !important;
}
/*
* Shorthand
*
* Declares all values instead of keywords like 'initial' to work around IE10
* https://www.w3.org/TR/css-flexbox-1/#flex-common
*
* 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
* This ensures it overrides flex-basis set in other utilities.
*/
/*
* Sizes the item based on the width/height properties
*/
.u-flex-initial\@medium {
flex: 0 1 auto !important;
flex-basis: auto !important;
/* 1 */
}
/*
* Sizes the item based on the width/height properties, but makes them fully
* flexible, so that they absorb any free space along the main axis.
*/
.u-flex-auto\@medium {
flex: 1 1 auto !important;
flex-basis: auto !important;
/* 1 */
}
/*
* Sizes the item according to the width/height properties, but makes the flex
* item fully inflexible. Similar to initial, except that flex items are
* not allowed to shrink, even in overflow situations.
*/
.u-flex-none\@medium {
flex: 0 0 auto !important;
flex-basis: auto !important;
/* 1 */
}
}
@media all and (min-width: 992px) {
/**
* Container
*/
.u-flex\@large {
display: flex !important;
}
.u-flex-inline\@large {
display: inline-flex !important;
}
/**
* Direction: row
*/
.u-flex-row\@large {
flex-direction: row !important;
}
.u-flex-row-reverse\@large {
flex-direction: row-reverse !important;
}
/**
* Direction: column
*/
.u-flex-col\@large {
flex-direction: column !important;
}
.u-flex-col-reverse\@large {
flex-direction: column-reverse !important;
}
/**
* Wrap
*/
.u-flex-wrap\@large {
flex-wrap: wrap !important;
}
.u-flex-no-wrap\@large {
flex-wrap: nowrap !important;
}
.u-flex-wrap-reverse\@large {
flex-wrap: wrap-reverse !important;
}
/**
* Align items along the main axis of the current line of the flex container
*/
.u-flex-justify-start\@large {
justify-content: flex-start !important;
}
.u-flex-justify-end\@large {
justify-content: flex-end !important;
}
.u-flex-justify-center\@large {
justify-content: center !important;
}
.u-flex-justify-between\@large {
justify-content: space-between !important;
}
.u-flex-justify-around\@large {
justify-content: space-around !important;
}
/**
* Align items in the cross axis of the current line of the flex container
* Similar to `justify-content` but in the perpendicular direction
*/
.u-flex-align-items-start\@large {
align-items: flex-start !important;
}
.u-flex-align-items-end\@large {
align-items: flex-end !important;
}
.u-flex-align-items-center\@large {
align-items: center !important;
}
.u-flex-align-items-stretch\@large {
align-items: stretch !important;
}
.u-flex-align-items-baseline\@large {
align-items: baseline !important;
}
/**
* Aligns items within the flex container when there is extra
* space in the cross-axis
*
* Has no effect when there is only one line of flex items.
*/
.u-flex-align-content-start\@large {
align-content: flex-start !important;
}
.u-flex-align-content-end\@large {
align-content: flex-end !important;
}
.u-flex-align-content-center\@large {
align-content: center !important;
}
.u-flex-align-content-stretch\@large {
align-content: stretch !important;
}
.u-flex-align-content-between\@large {
align-content: space-between !important;
}
.u-flex-align-content-around\@large {
align-content: space-around !important;
}
/* Applies to flex items
========================================================================== */
/**
* Override default alignment of single item when specified by `align-items`
*/
.u-flex-align-self-start\@large {
align-self: flex-start !important;
}
.u-flex-align-self-end\@large {
align-self: flex-end !important;
}
.u-flex-align-self-center\@large {
align-self: center !important;
}
.u-flex-align-self-stretch\@large {
align-self: stretch !important;
}
.u-flex-align-self-baseline\@large {
align-self: baseline !important;
}
.u-flex-align-self-auto\@large {
align-self: auto !important;
}
/**
* Change order without editing underlying HTML
*/
.u-flex-order-first\@large {
order: -1 !important;
}
.u-flex-order-last\@large {
order: 1 !important;
}
.u-flex-order-none\@large {
order: 0 !important;
}
/**
* Specify the flex grow factor, which determines how much the flex item will
* grow relative to the rest of the flex items in the flex container.
*
* Supports 1-5 proportions
*
* 1. Provide all values to avoid IE10 bug with shorthand flex
* - http://git.io/vllC7
*
* Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
* instead of `auto` as this matches what the default would be with `flex`
* shorthand - http://git.io/vllWx
*/
.u-flex-grow1\@large {
flex: 1 1 0% !important;
/* 1 */
}
.u-flex-grow2\@large {
flex: 2 1 0% !important;
}
.u-flex-grow3\@large {
flex: 3 1 0% !important;
}
.u-flex-grow4\@large {
flex: 4 1 0% !important;
}
.u-flex-grow5\@large {
flex: 5 1 0% !important;
}
/**
* Specify the flex shrink factor, which determines how much the flex item will
* shrink relative to the rest of the flex items in the flex container.
*/
.u-flex-shrink0\@large {
flex-shrink: 0 !important;
}
.u-flex-shrink1\@large {
flex-shrink: 1 !important;
}
.u-flex-shrink2\@large {
flex-shrink: 2 !important;
}
.u-flex-shrink3\@large {
flex-shrink: 3 !important;
}
.u-flex-shrink4\@large {
flex-shrink: 4 !important;
}
.u-flex-shrink5\@large {
flex-shrink: 5 !important;
}
/**
* Basis
*/
.u-flex-basis-auto\@large {
flex-basis: auto !important;
}
.u-flex-basis-0\@large {
flex-basis: 0 !important;
}
/*
* Shorthand
*
* Declares all values instead of keywords like 'initial' to work around IE10
* https://www.w3.org/TR/css-flexbox-1/#flex-common
*
* 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
* This ensures it overrides flex-basis set in other utilities.
*/
/*
* Sizes the item based on the width/height properties
*/
.u-flex-initial\@large {
flex: 0 1 auto !important;
flex-basis: auto !important;
/* 1 */
}
/*
* Sizes the item based on the width/height properties, but makes them fully
* flexible, so that they absorb any free space along the main axis.
*/
.u-flex-auto\@large {
flex: 1 1 auto !important;
flex-basis: auto !important;
/* 1 */
}
/*
* Sizes the item according to the width/height properties, but makes the flex
* item fully inflexible. Similar to initial, except that flex items are
* not allowed to shrink, even in overflow situations.
*/
.u-flex-none\@large {
flex: 0 0 auto !important;
flex-basis: auto !important;
/* 1 */
}
}
@media all and (min-width: 1200px) {
/**
* Container
*/
.u-flex\@xlarge {
display: flex !important;
}
.u-flex-inline\@xlarge {
display: inline-flex !important;
}
/**
* Direction: row
*/
.u-flex-row\@xlarge {
flex-direction: row !important;
}
.u-flex-row-reverse\@xlarge {
flex-direction: row-reverse !important;
}
/**
* Direction: column
*/
.u-flex-col\@xlarge {
flex-direction: column !important;
}
.u-flex-col-reverse\@xlarge {
flex-direction: column-reverse !important;
}
/**
* Wrap
*/
.u-flex-wrap\@xlarge {
flex-wrap: wrap !important;
}
.u-flex-no-wrap\@xlarge {
flex-wrap: nowrap !important;
}
.u-flex-wrap-reverse\@xlarge {
flex-wrap: wrap-reverse !important;
}
/**
* Align items along the main axis of the current line of the flex container
*/
.u-flex-justify-start\@xlarge {
justify-content: flex-start !important;
}
.u-flex-justify-end\@xlarge {
justify-content: flex-end !important;
}
.u-flex-justify-center\@xlarge {
justify-content: center !important;
}
.u-flex-justify-between\@xlarge {
justify-content: space-between !important;
}
.u-flex-justify-around\@xlarge {
justify-content: space-around !important;
}
/**
* Align items in the cross axis of the current line of the flex container
* Similar to `justify-content` but in the perpendicular direction
*/
.u-flex-align-items-start\@xlarge {
align-items: flex-start !important;
}
.u-flex-align-items-end\@xlarge {
align-items: flex-end !important;
}
.u-flex-align-items-center\@xlarge {
align-items: center !important;
}
.u-flex-align-items-stretch\@xlarge {
align-items: stretch !important;
}
.u-flex-align-items-baseline\@xlarge {
align-items: baseline !important;
}
/**
* Aligns items within the flex container when there is extra
* space in the cross-axis
*
* Has no effect when there is only one line of flex items.
*/
.u-flex-align-content-start\@xlarge {
align-content: flex-start !important;
}
.u-flex-align-content-end\@xlarge {
align-content: flex-end !important;
}
.u-flex-align-content-center\@xlarge {
align-content: center !important;
}
.u-flex-align-content-stretch\@xlarge {
align-content: stretch !important;
}
.u-flex-align-content-between\@xlarge {
align-content: space-between !important;
}
.u-flex-align-content-around\@xlarge {
align-content: space-around !important;
}
/* Applies to flex items
========================================================================== */
/**
* Override default alignment of single item when specified by `align-items`
*/
.u-flex-align-self-start\@xlarge {
align-self: flex-start !important;
}
.u-flex-align-self-end\@xlarge {
align-self: flex-end !important;
}
.u-flex-align-self-center\@xlarge {
align-self: center !important;
}
.u-flex-align-self-stretch\@xlarge {
align-self: stretch !important;
}
.u-flex-align-self-baseline\@xlarge {
align-self: baseline !important;
}
.u-flex-align-self-auto\@xlarge {
align-self: auto !important;
}
/**
* Change order without editing underlying HTML
*/
.u-flex-order-first\@xlarge {
order: -1 !important;
}
.u-flex-order-last\@xlarge {
order: 1 !important;
}
.u-flex-order-none\@xlarge {
order: 0 !important;
}
/**
* Specify the flex grow factor, which determines how much the flex item will
* grow relative to the rest of the flex items in the flex container.
*
* Supports 1-5 proportions
*
* 1. Provide all values to avoid IE10 bug with shorthand flex
* - http://git.io/vllC7
*
* Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
* instead of `auto` as this matches what the default would be with `flex`
* shorthand - http://git.io/vllWx
*/
.u-flex-grow1\@xlarge {
flex: 1 1 0% !important;
/* 1 */
}
.u-flex-grow2\@xlarge {
flex: 2 1 0% !important;
}
.u-flex-grow3\@xlarge {
flex: 3 1 0% !important;
}
.u-flex-grow4\@xlarge {
flex: 4 1 0% !important;
}
.u-flex-grow5\@xlarge {
flex: 5 1 0% !important;
}
/**
* Specify the flex shrink factor, which determines how much the flex item will
* shrink relative to the rest of the flex items in the flex container.
*/
.u-flex-shrink0\@xlarge {
flex-shrink: 0 !important;
}
.u-flex-shrink1\@xlarge {
flex-shrink: 1 !important;
}
.u-flex-shrink2\@xlarge {
flex-shrink: 2 !important;
}
.u-flex-shrink3\@xlarge {
flex-shrink: 3 !important;
}
.u-flex-shrink4\@xlarge {
flex-shrink: 4 !important;
}
.u-flex-shrink5\@xlarge {
flex-shrink: 5 !important;
}
/**
* Basis
*/
.u-flex-basis-auto\@xlarge {
flex-basis: auto !important;
}
.u-flex-basis-0\@xlarge {
flex-basis: 0 !important;
}
/*
* Shorthand
*
* Declares all values instead of keywords like 'initial' to work around IE10
* https://www.w3.org/TR/css-flexbox-1/#flex-common
*
* 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
* This ensures it overrides flex-basis set in other utilities.
*/
/*
* Sizes the item based on the width/height properties
*/
.u-flex-initial\@xlarge {
flex: 0 1 auto !important;
flex-basis: auto !important;
/* 1 */
}
/*
* Sizes the item based on the width/height properties, but makes them fully
* flexible, so that they absorb any free space along the main axis.
*/
.u-flex-auto\@xlarge {
flex: 1 1 auto !important;
flex-basis: auto !important;
/* 1 */
}
/*
* Sizes the item according to the width/height properties, but makes the flex
* item fully inflexible. Similar to initial, except that flex items are
* not allowed to shrink, even in overflow situations.
*/
.u-flex-none\@xlarge {
flex: 0 0 auto !important;
flex-basis: auto !important;
/* 1 */
}
}
.u-width-icon-s {
width: 16px !important;
}
.u-min-width-icon-s {
min-width: 16px !important;
}
.u-max-width-icon-s {
max-width: 16px !important;
}
.u-height-icon-s {
height: 16px !important;
}
.u-min-height-icon-s {
min-height: 16px !important;
}
.u-max-height-icon-s {
max-height: 16px !important;
}
.u-width-icon-m {
width: 24px !important;
}
.u-min-width-icon-m {
min-width: 24px !important;
}
.u-max-width-icon-m {
max-width: 24px !important;
}
.u-height-icon-m {
height: 24px !important;
}
.u-min-height-icon-m {
min-height: 24px !important;
}
.u-max-height-icon-m {
max-height: 24px !important;
}
.u-width-icon-l {
width: 32px !important;
}
.u-min-width-icon-l {
min-width: 32px !important;
}
.u-max-width-icon-l {
max-width: 32px !important;
}
.u-height-icon-l {
height: 32px !important;
}
.u-min-height-icon-l {
min-height: 32px !important;
}
.u-max-height-icon-l {
max-height: 32px !important;
}
.u-width-2xs {
width: 20px !important;
}
.u-min-width-2xs {
min-width: 20px !important;
}
.u-max-width-2xs {
max-width: 20px !important;
}
.u-height-2xs {
height: 20px !important;
}
.u-min-height-2xs {
min-height: 20px !important;
}
.u-max-height-2xs {
max-height: 20px !important;
}
.u-width-xs {
width: 30px !important;
}
.u-min-width-xs {
min-width: 30px !important;
}
.u-max-width-xs {
max-width: 30px !important;
}
.u-height-xs {
height: 30px !important;
}
.u-min-height-xs {
min-height: 30px !important;
}
.u-max-height-xs {
max-height: 30px !important;
}
.u-width-s {
width: 40px !important;
}
.u-min-width-s {
min-width: 40px !important;
}
.u-max-width-s {
max-width: 40px !important;
}
.u-height-s {
height: 40px !important;
}
.u-min-height-s {
min-height: 40px !important;
}
.u-max-height-s {
max-height: 40px !important;
}
.u-width-m {
width: 50px !important;
}
.u-min-width-m {
min-width: 50px !important;
}
.u-max-width-m {
max-width: 50px !important;
}
.u-height-m {
height: 50px !important;
}
.u-min-height-m {
min-height: 50px !important;
}
.u-max-height-m {
max-height: 50px !important;
}
.u-width-l {
width: 60px !important;
}
.u-min-width-l {
min-width: 60px !important;
}
.u-max-width-l {
max-width: 60px !important;
}
.u-height-l {
height: 60px !important;
}
.u-min-height-l {
min-height: 60px !important;
}
.u-max-height-l {
max-height: 60px !important;
}
.u-width-0 {
width: 0 !important;
}
.u-min-width-0 {
min-width: 0 !important;
}
.u-max-width-0 {
max-width: 0 !important;
}
.u-height-0 {
height: 0 !important;
}
.u-min-height-0 {
min-height: 0 !important;
}
.u-max-height-0 {
max-height: 0 !important;
}
.u-width-50 {
width: 50px !important;
}
.u-min-width-50 {
min-width: 50px !important;
}
.u-max-width-50 {
max-width: 50px !important;
}
.u-height-50 {
height: 50px !important;
}
.u-min-height-50 {
min-height: 50px !important;
}
.u-max-height-50 {
max-height: 50px !important;
}
.u-width-75 {
width: 75px !important;
}
.u-min-width-75 {
min-width: 75px !important;
}
.u-max-width-75 {
max-width: 75px !important;
}
.u-height-75 {
height: 75px !important;
}
.u-min-height-75 {
min-height: 75px !important;
}
.u-max-height-75 {
max-height: 75px !important;
}
.u-width-100 {
width: 100px !important;
}
.u-min-width-100 {
min-width: 100px !important;
}
.u-max-width-100 {
max-width: 100px !important;
}
.u-height-100 {
height: 100px !important;
}
.u-min-height-100 {
min-height: 100px !important;
}
.u-max-height-100 {
max-height: 100px !important;
}
.u-width-150 {
width: 150px !important;
}
.u-min-width-150 {
min-width: 150px !important;
}
.u-max-width-150 {
max-width: 150px !important;
}
.u-height-150 {
height: 150px !important;
}
.u-min-height-150 {
min-height: 150px !important;
}
.u-max-height-150 {
max-height: 150px !important;
}
.u-width-200 {
width: 200px !important;
}
.u-min-width-200 {
min-width: 200px !important;
}
.u-max-width-200 {
max-width: 200px !important;
}
.u-height-200 {
height: 200px !important;
}
.u-min-height-200 {
min-height: 200px !important;
}
.u-max-height-200 {
max-height: 200px !important;
}
.u-width-250 {
width: 250px !important;
}
.u-min-width-250 {
min-width: 250px !important;
}
.u-max-width-250 {
max-width: 250px !important;
}
.u-height-250 {
height: 250px !important;
}
.u-min-height-250 {
min-height: 250px !important;
}
.u-max-height-250 {
max-height: 250px !important;
}
.u-width-300 {
width: 300px !important;
}
.u-min-width-300 {
min-width: 300px !important;
}
.u-max-width-300 {
max-width: 300px !important;
}
.u-height-300 {
height: 300px !important;
}
.u-min-height-300 {
min-height: 300px !important;
}
.u-max-height-300 {
max-height: 300px !important;
}
.u-width-350 {
width: 350px !important;
}
.u-min-width-350 {
min-width: 350px !important;
}
.u-max-width-350 {
max-width: 350px !important;
}
.u-height-350 {
height: 350px !important;
}
.u-min-height-350 {
min-height: 350px !important;
}
.u-max-height-350 {
max-height: 350px !important;
}
.u-width-400 {
width: 400px !important;
}
.u-min-width-400 {
min-width: 400px !important;
}
.u-max-width-400 {
max-width: 400px !important;
}
.u-height-400 {
height: 400px !important;
}
.u-min-height-400 {
min-height: 400px !important;
}
.u-max-height-400 {
max-height: 400px !important;
}
.u-width-500 {
width: 500px !important;
}
.u-min-width-500 {
min-width: 500px !important;
}
.u-max-width-500 {
max-width: 500px !important;
}
.u-height-500 {
height: 500px !important;
}
.u-min-height-500 {
min-height: 500px !important;
}
.u-max-height-500 {
max-height: 500px !important;
}
.u-width-600 {
width: 600px !important;
}
.u-min-width-600 {
min-width: 600px !important;
}
.u-max-width-600 {
max-width: 600px !important;
}
.u-height-600 {
height: 600px !important;
}
.u-min-height-600 {
min-height: 600px !important;
}
.u-max-height-600 {
max-height: 600px !important;
}
.u-width-700 {
width: 700px !important;
}
.u-min-width-700 {
min-width: 700px !important;
}
.u-max-width-700 {
max-width: 700px !important;
}
.u-height-700 {
height: 700px !important;
}
.u-min-height-700 {
min-height: 700px !important;
}
.u-max-height-700 {
max-height: 700px !important;
}
.u-width-800 {
width: 800px !important;
}
.u-min-width-800 {
min-width: 800px !important;
}
.u-max-width-800 {
max-width: 800px !important;
}
.u-height-800 {
height: 800px !important;
}
.u-min-height-800 {
min-height: 800px !important;
}
.u-max-height-800 {
max-height: 800px !important;
}
.u-width-1400 {
width: 1400px !important;
}
.u-min-width-1400 {
min-width: 1400px !important;
}
.u-max-width-1400 {
max-width: 1400px !important;
}
.u-height-1400 {
height: 1400px !important;
}
.u-min-height-1400 {
min-height: 1400px !important;
}
.u-max-height-1400 {
max-height: 1400px !important;
}
.u-width-100\% {
width: 100% !important;
}
.u-min-width-100\% {
min-width: 100% !important;
}
.u-max-width-100\% {
max-width: 100% !important;
}
.u-height-100\% {
height: 100% !important;
}
.u-min-height-100\% {
min-height: 100% !important;
}
.u-max-height-100\% {
max-height: 100% !important;
}
.u-width-auto {
width: auto !important;
}
.u-min-width-auto {
min-width: auto !important;
}
.u-max-width-auto {
max-width: auto !important;
}
.u-height-auto {
height: auto !important;
}
.u-min-height-auto {
min-height: auto !important;
}
.u-max-height-auto {
max-height: auto !important;
}
@media all and (min-width: 576px) {
.u-width-icon-s\@small {
width: 16px !important;
}
.u-min-width-icon-s\@small {
min-width: 16px !important;
}
.u-max-width-icon-s\@small {
max-width: 16px !important;
}
.u-height-icon-s\@small {
height: 16px !important;
}
.u-min-height-icon-s\@small {
min-height: 16px !important;
}
.u-max-height-icon-s\@small {
max-height: 16px !important;
}
.u-width-icon-m\@small {
width: 24px !important;
}
.u-min-width-icon-m\@small {
min-width: 24px !important;
}
.u-max-width-icon-m\@small {
max-width: 24px !important;
}
.u-height-icon-m\@small {
height: 24px !important;
}
.u-min-height-icon-m\@small {
min-height: 24px !important;
}
.u-max-height-icon-m\@small {
max-height: 24px !important;
}
.u-width-icon-l\@small {
width: 32px !important;
}
.u-min-width-icon-l\@small {
min-width: 32px !important;
}
.u-max-width-icon-l\@small {
max-width: 32px !important;
}
.u-height-icon-l\@small {
height: 32px !important;
}
.u-min-height-icon-l\@small {
min-height: 32px !important;
}
.u-max-height-icon-l\@small {
max-height: 32px !important;
}
.u-width-2xs\@small {
width: 20px !important;
}
.u-min-width-2xs\@small {
min-width: 20px !important;
}
.u-max-width-2xs\@small {
max-width: 20px !important;
}
.u-height-2xs\@small {
height: 20px !important;
}
.u-min-height-2xs\@small {
min-height: 20px !important;
}
.u-max-height-2xs\@small {
max-height: 20px !important;
}
.u-width-xs\@small {
width: 30px !important;
}
.u-min-width-xs\@small {
min-width: 30px !important;
}
.u-max-width-xs\@small {
max-width: 30px !important;
}
.u-height-xs\@small {
height: 30px !important;
}
.u-min-height-xs\@small {
min-height: 30px !important;
}
.u-max-height-xs\@small {
max-height: 30px !important;
}
.u-width-s\@small {
width: 40px !important;
}
.u-min-width-s\@small {
min-width: 40px !important;
}
.u-max-width-s\@small {
max-width: 40px !important;
}
.u-height-s\@small {
height: 40px !important;
}
.u-min-height-s\@small {
min-height: 40px !important;
}
.u-max-height-s\@small {
max-height: 40px !important;
}
.u-width-m\@small {
width: 50px !important;
}
.u-min-width-m\@small {
min-width: 50px !important;
}
.u-max-width-m\@small {
max-width: 50px !important;
}
.u-height-m\@small {
height: 50px !important;
}
.u-min-height-m\@small {
min-height: 50px !important;
}
.u-max-height-m\@small {
max-height: 50px !important;
}
.u-width-l\@small {
width: 60px !important;
}
.u-min-width-l\@small {
min-width: 60px !important;
}
.u-max-width-l\@small {
max-width: 60px !important;
}
.u-height-l\@small {
height: 60px !important;
}
.u-min-height-l\@small {
min-height: 60px !important;
}
.u-max-height-l\@small {
max-height: 60px !important;
}
.u-width-0\@small {
width: 0 !important;
}
.u-min-width-0\@small {
min-width: 0 !important;
}
.u-max-width-0\@small {
max-width: 0 !important;
}
.u-height-0\@small {
height: 0 !important;
}
.u-min-height-0\@small {
min-height: 0 !important;
}
.u-max-height-0\@small {
max-height: 0 !important;
}
.u-width-50\@small {
width: 50px !important;
}
.u-min-width-50\@small {
min-width: 50px !important;
}
.u-max-width-50\@small {
max-width: 50px !important;
}
.u-height-50\@small {
height: 50px !important;
}
.u-min-height-50\@small {
min-height: 50px !important;
}
.u-max-height-50\@small {
max-height: 50px !important;
}
.u-width-75\@small {
width: 75px !important;
}
.u-min-width-75\@small {
min-width: 75px !important;
}
.u-max-width-75\@small {
max-width: 75px !important;
}
.u-height-75\@small {
height: 75px !important;
}
.u-min-height-75\@small {
min-height: 75px !important;
}
.u-max-height-75\@small {
max-height: 75px !important;
}
.u-width-100\@small {
width: 100px !important;
}
.u-min-width-100\@small {
min-width: 100px !important;
}
.u-max-width-100\@small {
max-width: 100px !important;
}
.u-height-100\@small {
height: 100px !important;
}
.u-min-height-100\@small {
min-height: 100px !important;
}
.u-max-height-100\@small {
max-height: 100px !important;
}
.u-width-150\@small {
width: 150px !important;
}
.u-min-width-150\@small {
min-width: 150px !important;
}
.u-max-width-150\@small {
max-width: 150px !important;
}
.u-height-150\@small {
height: 150px !important;
}
.u-min-height-150\@small {
min-height: 150px !important;
}
.u-max-height-150\@small {
max-height: 150px !important;
}
.u-width-200\@small {
width: 200px !important;
}
.u-min-width-200\@small {
min-width: 200px !important;
}
.u-max-width-200\@small {
max-width: 200px !important;
}
.u-height-200\@small {
height: 200px !important;
}
.u-min-height-200\@small {
min-height: 200px !important;
}
.u-max-height-200\@small {
max-height: 200px !important;
}
.u-width-250\@small {
width: 250px !important;
}
.u-min-width-250\@small {
min-width: 250px !important;
}
.u-max-width-250\@small {
max-width: 250px !important;
}
.u-height-250\@small {
height: 250px !important;
}
.u-min-height-250\@small {
min-height: 250px !important;
}
.u-max-height-250\@small {
max-height: 250px !important;
}
.u-width-300\@small {
width: 300px !important;
}
.u-min-width-300\@small {
min-width: 300px !important;
}
.u-max-width-300\@small {
max-width: 300px !important;
}
.u-height-300\@small {
height: 300px !important;
}
.u-min-height-300\@small {
min-height: 300px !important;
}
.u-max-height-300\@small {
max-height: 300px !important;
}
.u-width-350\@small {
width: 350px !important;
}
.u-min-width-350\@small {
min-width: 350px !important;
}
.u-max-width-350\@small {
max-width: 350px !important;
}
.u-height-350\@small {
height: 350px !important;
}
.u-min-height-350\@small {
min-height: 350px !important;
}
.u-max-height-350\@small {
max-height: 350px !important;
}
.u-width-400\@small {
width: 400px !important;
}
.u-min-width-400\@small {
min-width: 400px !important;
}
.u-max-width-400\@small {
max-width: 400px !important;
}
.u-height-400\@small {
height: 400px !important;
}
.u-min-height-400\@small {
min-height: 400px !important;
}
.u-max-height-400\@small {
max-height: 400px !important;
}
.u-width-500\@small {
width: 500px !important;
}
.u-min-width-500\@small {
min-width: 500px !important;
}
.u-max-width-500\@small {
max-width: 500px !important;
}
.u-height-500\@small {
height: 500px !important;
}
.u-min-height-500\@small {
min-height: 500px !important;
}
.u-max-height-500\@small {
max-height: 500px !important;
}
.u-width-600\@small {
width: 600px !important;
}
.u-min-width-600\@small {
min-width: 600px !important;
}
.u-max-width-600\@small {
max-width: 600px !important;
}
.u-height-600\@small {
height: 600px !important;
}
.u-min-height-600\@small {
min-height: 600px !important;
}
.u-max-height-600\@small {
max-height: 600px !important;
}
.u-width-700\@small {
width: 700px !important;
}
.u-min-width-700\@small {
min-width: 700px !important;
}
.u-max-width-700\@small {
max-width: 700px !important;
}
.u-height-700\@small {
height: 700px !important;
}
.u-min-height-700\@small {
min-height: 700px !important;
}
.u-max-height-700\@small {
max-height: 700px !important;
}
.u-width-800\@small {
width: 800px !important;
}
.u-min-width-800\@small {
min-width: 800px !important;
}
.u-max-width-800\@small {
max-width: 800px !important;
}
.u-height-800\@small {
height: 800px !important;
}
.u-min-height-800\@small {
min-height: 800px !important;
}
.u-max-height-800\@small {
max-height: 800px !important;
}
.u-width-1400\@small {
width: 1400px !important;
}
.u-min-width-1400\@small {
min-width: 1400px !important;
}
.u-max-width-1400\@small {
max-width: 1400px !important;
}
.u-height-1400\@small {
height: 1400px !important;
}
.u-min-height-1400\@small {
min-height: 1400px !important;
}
.u-max-height-1400\@small {
max-height: 1400px !important;
}
.u-width-100\%\@small {
width: 100% !important;
}
.u-min-width-100\%\@small {
min-width: 100% !important;
}
.u-max-width-100\%\@small {
max-width: 100% !important;
}
.u-height-100\%\@small {
height: 100% !important;
}
.u-min-height-100\%\@small {
min-height: 100% !important;
}
.u-max-height-100\%\@small {
max-height: 100% !important;
}
.u-width-auto\@small {
width: auto !important;
}
.u-min-width-auto\@small {
min-width: auto !important;
}
.u-max-width-auto\@small {
max-width: auto !important;
}
.u-height-auto\@small {
height: auto !important;
}
.u-min-height-auto\@small {
min-height: auto !important;
}
.u-max-height-auto\@small {
max-height: auto !important;
}
}
@media all and (min-width: 768px) {
.u-width-icon-s\@medium {
width: 16px !important;
}
.u-min-width-icon-s\@medium {
min-width: 16px !important;
}
.u-max-width-icon-s\@medium {
max-width: 16px !important;
}
.u-height-icon-s\@medium {
height: 16px !important;
}
.u-min-height-icon-s\@medium {
min-height: 16px !important;
}
.u-max-height-icon-s\@medium {
max-height: 16px !important;
}
.u-width-icon-m\@medium {
width: 24px !important;
}
.u-min-width-icon-m\@medium {
min-width: 24px !important;
}
.u-max-width-icon-m\@medium {
max-width: 24px !important;
}
.u-height-icon-m\@medium {
height: 24px !important;
}
.u-min-height-icon-m\@medium {
min-height: 24px !important;
}
.u-max-height-icon-m\@medium {
max-height: 24px !important;
}
.u-width-icon-l\@medium {
width: 32px !important;
}
.u-min-width-icon-l\@medium {
min-width: 32px !important;
}
.u-max-width-icon-l\@medium {
max-width: 32px !important;
}
.u-height-icon-l\@medium {
height: 32px !important;
}
.u-min-height-icon-l\@medium {
min-height: 32px !important;
}
.u-max-height-icon-l\@medium {
max-height: 32px !important;
}
.u-width-2xs\@medium {
width: 20px !important;
}
.u-min-width-2xs\@medium {
min-width: 20px !important;
}
.u-max-width-2xs\@medium {
max-width: 20px !important;
}
.u-height-2xs\@medium {
height: 20px !important;
}
.u-min-height-2xs\@medium {
min-height: 20px !important;
}
.u-max-height-2xs\@medium {
max-height: 20px !important;
}
.u-width-xs\@medium {
width: 30px !important;
}
.u-min-width-xs\@medium {
min-width: 30px !important;
}
.u-max-width-xs\@medium {
max-width: 30px !important;
}
.u-height-xs\@medium {
height: 30px !important;
}
.u-min-height-xs\@medium {
min-height: 30px !important;
}
.u-max-height-xs\@medium {
max-height: 30px !important;
}
.u-width-s\@medium {
width: 40px !important;
}
.u-min-width-s\@medium {
min-width: 40px !important;
}
.u-max-width-s\@medium {
max-width: 40px !important;
}
.u-height-s\@medium {
height: 40px !important;
}
.u-min-height-s\@medium {
min-height: 40px !important;
}
.u-max-height-s\@medium {
max-height: 40px !important;
}
.u-width-m\@medium {
width: 50px !important;
}
.u-min-width-m\@medium {
min-width: 50px !important;
}
.u-max-width-m\@medium {
max-width: 50px !important;
}
.u-height-m\@medium {
height: 50px !important;
}
.u-min-height-m\@medium {
min-height: 50px !important;
}
.u-max-height-m\@medium {
max-height: 50px !important;
}
.u-width-l\@medium {
width: 60px !important;
}
.u-min-width-l\@medium {
min-width: 60px !important;
}
.u-max-width-l\@medium {
max-width: 60px !important;
}
.u-height-l\@medium {
height: 60px !important;
}
.u-min-height-l\@medium {
min-height: 60px !important;
}
.u-max-height-l\@medium {
max-height: 60px !important;
}
.u-width-0\@medium {
width: 0 !important;
}
.u-min-width-0\@medium {
min-width: 0 !important;
}
.u-max-width-0\@medium {
max-width: 0 !important;
}
.u-height-0\@medium {
height: 0 !important;
}
.u-min-height-0\@medium {
min-height: 0 !important;
}
.u-max-height-0\@medium {
max-height: 0 !important;
}
.u-width-50\@medium {
width: 50px !important;
}
.u-min-width-50\@medium {
min-width: 50px !important;
}
.u-max-width-50\@medium {
max-width: 50px !important;
}
.u-height-50\@medium {
height: 50px !important;
}
.u-min-height-50\@medium {
min-height: 50px !important;
}
.u-max-height-50\@medium {
max-height: 50px !important;
}
.u-width-75\@medium {
width: 75px !important;
}
.u-min-width-75\@medium {
min-width: 75px !important;
}
.u-max-width-75\@medium {
max-width: 75px !important;
}
.u-height-75\@medium {
height: 75px !important;
}
.u-min-height-75\@medium {
min-height: 75px !important;
}
.u-max-height-75\@medium {
max-height: 75px !important;
}
.u-width-100\@medium {
width: 100px !important;
}
.u-min-width-100\@medium {
min-width: 100px !important;
}
.u-max-width-100\@medium {
max-width: 100px !important;
}
.u-height-100\@medium {
height: 100px !important;
}
.u-min-height-100\@medium {
min-height: 100px !important;
}
.u-max-height-100\@medium {
max-height: 100px !important;
}
.u-width-150\@medium {
width: 150px !important;
}
.u-min-width-150\@medium {
min-width: 150px !important;
}
.u-max-width-150\@medium {
max-width: 150px !important;
}
.u-height-150\@medium {
height: 150px !important;
}
.u-min-height-150\@medium {
min-height: 150px !important;
}
.u-max-height-150\@medium {
max-height: 150px !important;
}
.u-width-200\@medium {
width: 200px !important;
}
.u-min-width-200\@medium {
min-width: 200px !important;
}
.u-max-width-200\@medium {
max-width: 200px !important;
}
.u-height-200\@medium {
height: 200px !important;
}
.u-min-height-200\@medium {
min-height: 200px !important;
}
.u-max-height-200\@medium {
max-height: 200px !important;
}
.u-width-250\@medium {
width: 250px !important;
}
.u-min-width-250\@medium {
min-width: 250px !important;
}
.u-max-width-250\@medium {
max-width: 250px !important;
}
.u-height-250\@medium {
height: 250px !important;
}
.u-min-height-250\@medium {
min-height: 250px !important;
}
.u-max-height-250\@medium {
max-height: 250px !important;
}
.u-width-300\@medium {
width: 300px !important;
}
.u-min-width-300\@medium {
min-width: 300px !important;
}
.u-max-width-300\@medium {
max-width: 300px !important;
}
.u-height-300\@medium {
height: 300px !important;
}
.u-min-height-300\@medium {
min-height: 300px !important;
}
.u-max-height-300\@medium {
max-height: 300px !important;
}
.u-width-350\@medium {
width: 350px !important;
}
.u-min-width-350\@medium {
min-width: 350px !important;
}
.u-max-width-350\@medium {
max-width: 350px !important;
}
.u-height-350\@medium {
height: 350px !important;
}
.u-min-height-350\@medium {
min-height: 350px !important;
}
.u-max-height-350\@medium {
max-height: 350px !important;
}
.u-width-400\@medium {
width: 400px !important;
}
.u-min-width-400\@medium {
min-width: 400px !important;
}
.u-max-width-400\@medium {
max-width: 400px !important;
}
.u-height-400\@medium {
height: 400px !important;
}
.u-min-height-400\@medium {
min-height: 400px !important;
}
.u-max-height-400\@medium {
max-height: 400px !important;
}
.u-width-500\@medium {
width: 500px !important;
}
.u-min-width-500\@medium {
min-width: 500px !important;
}
.u-max-width-500\@medium {
max-width: 500px !important;
}
.u-height-500\@medium {
height: 500px !important;
}
.u-min-height-500\@medium {
min-height: 500px !important;
}
.u-max-height-500\@medium {
max-height: 500px !important;
}
.u-width-600\@medium {
width: 600px !important;
}
.u-min-width-600\@medium {
min-width: 600px !important;
}
.u-max-width-600\@medium {
max-width: 600px !important;
}
.u-height-600\@medium {
height: 600px !important;
}
.u-min-height-600\@medium {
min-height: 600px !important;
}
.u-max-height-600\@medium {
max-height: 600px !important;
}
.u-width-700\@medium {
width: 700px !important;
}
.u-min-width-700\@medium {
min-width: 700px !important;
}
.u-max-width-700\@medium {
max-width: 700px !important;
}
.u-height-700\@medium {
height: 700px !important;
}
.u-min-height-700\@medium {
min-height: 700px !important;
}
.u-max-height-700\@medium {
max-height: 700px !important;
}
.u-width-800\@medium {
width: 800px !important;
}
.u-min-width-800\@medium {
min-width: 800px !important;
}
.u-max-width-800\@medium {
max-width: 800px !important;
}
.u-height-800\@medium {
height: 800px !important;
}
.u-min-height-800\@medium {
min-height: 800px !important;
}
.u-max-height-800\@medium {
max-height: 800px !important;
}
.u-width-1400\@medium {
width: 1400px !important;
}
.u-min-width-1400\@medium {
min-width: 1400px !important;
}
.u-max-width-1400\@medium {
max-width: 1400px !important;
}
.u-height-1400\@medium {
height: 1400px !important;
}
.u-min-height-1400\@medium {
min-height: 1400px !important;
}
.u-max-height-1400\@medium {
max-height: 1400px !important;
}
.u-width-100\%\@medium {
width: 100% !important;
}
.u-min-width-100\%\@medium {
min-width: 100% !important;
}
.u-max-width-100\%\@medium {
max-width: 100% !important;
}
.u-height-100\%\@medium {
height: 100% !important;
}
.u-min-height-100\%\@medium {
min-height: 100% !important;
}
.u-max-height-100\%\@medium {
max-height: 100% !important;
}
.u-width-auto\@medium {
width: auto !important;
}
.u-min-width-auto\@medium {
min-width: auto !important;
}
.u-max-width-auto\@medium {
max-width: auto !important;
}
.u-height-auto\@medium {
height: auto !important;
}
.u-min-height-auto\@medium {
min-height: auto !important;
}
.u-max-height-auto\@medium {
max-height: auto !important;
}
}
@media all and (min-width: 992px) {
.u-width-icon-s\@large {
width: 16px !important;
}
.u-min-width-icon-s\@large {
min-width: 16px !important;
}
.u-max-width-icon-s\@large {
max-width: 16px !important;
}
.u-height-icon-s\@large {
height: 16px !important;
}
.u-min-height-icon-s\@large {
min-height: 16px !important;
}
.u-max-height-icon-s\@large {
max-height: 16px !important;
}
.u-width-icon-m\@large {
width: 24px !important;
}
.u-min-width-icon-m\@large {
min-width: 24px !important;
}
.u-max-width-icon-m\@large {
max-width: 24px !important;
}
.u-height-icon-m\@large {
height: 24px !important;
}
.u-min-height-icon-m\@large {
min-height: 24px !important;
}
.u-max-height-icon-m\@large {
max-height: 24px !important;
}
.u-width-icon-l\@large {
width: 32px !important;
}
.u-min-width-icon-l\@large {
min-width: 32px !important;
}
.u-max-width-icon-l\@large {
max-width: 32px !important;
}
.u-height-icon-l\@large {
height: 32px !important;
}
.u-min-height-icon-l\@large {
min-height: 32px !important;
}
.u-max-height-icon-l\@large {
max-height: 32px !important;
}
.u-width-2xs\@large {
width: 20px !important;
}
.u-min-width-2xs\@large {
min-width: 20px !important;
}
.u-max-width-2xs\@large {
max-width: 20px !important;
}
.u-height-2xs\@large {
height: 20px !important;
}
.u-min-height-2xs\@large {
min-height: 20px !important;
}
.u-max-height-2xs\@large {
max-height: 20px !important;
}
.u-width-xs\@large {
width: 30px !important;
}
.u-min-width-xs\@large {
min-width: 30px !important;
}
.u-max-width-xs\@large {
max-width: 30px !important;
}
.u-height-xs\@large {
height: 30px !important;
}
.u-min-height-xs\@large {
min-height: 30px !important;
}
.u-max-height-xs\@large {
max-height: 30px !important;
}
.u-width-s\@large {
width: 40px !important;
}
.u-min-width-s\@large {
min-width: 40px !important;
}
.u-max-width-s\@large {
max-width: 40px !important;
}
.u-height-s\@large {
height: 40px !important;
}
.u-min-height-s\@large {
min-height: 40px !important;
}
.u-max-height-s\@large {
max-height: 40px !important;
}
.u-width-m\@large {
width: 50px !important;
}
.u-min-width-m\@large {
min-width: 50px !important;
}
.u-max-width-m\@large {
max-width: 50px !important;
}
.u-height-m\@large {
height: 50px !important;
}
.u-min-height-m\@large {
min-height: 50px !important;
}
.u-max-height-m\@large {
max-height: 50px !important;
}
.u-width-l\@large {
width: 60px !important;
}
.u-min-width-l\@large {
min-width: 60px !important;
}
.u-max-width-l\@large {
max-width: 60px !important;
}
.u-height-l\@large {
height: 60px !important;
}
.u-min-height-l\@large {
min-height: 60px !important;
}
.u-max-height-l\@large {
max-height: 60px !important;
}
.u-width-0\@large {
width: 0 !important;
}
.u-min-width-0\@large {
min-width: 0 !important;
}
.u-max-width-0\@large {
max-width: 0 !important;
}
.u-height-0\@large {
height: 0 !important;
}
.u-min-height-0\@large {
min-height: 0 !important;
}
.u-max-height-0\@large {
max-height: 0 !important;
}
.u-width-50\@large {
width: 50px !important;
}
.u-min-width-50\@large {
min-width: 50px !important;
}
.u-max-width-50\@large {
max-width: 50px !important;
}
.u-height-50\@large {
height: 50px !important;
}
.u-min-height-50\@large {
min-height: 50px !important;
}
.u-max-height-50\@large {
max-height: 50px !important;
}
.u-width-75\@large {
width: 75px !important;
}
.u-min-width-75\@large {
min-width: 75px !important;
}
.u-max-width-75\@large {
max-width: 75px !important;
}
.u-height-75\@large {
height: 75px !important;
}
.u-min-height-75\@large {
min-height: 75px !important;
}
.u-max-height-75\@large {
max-height: 75px !important;
}
.u-width-100\@large {
width: 100px !important;
}
.u-min-width-100\@large {
min-width: 100px !important;
}
.u-max-width-100\@large {
max-width: 100px !important;
}
.u-height-100\@large {
height: 100px !important;
}
.u-min-height-100\@large {
min-height: 100px !important;
}
.u-max-height-100\@large {
max-height: 100px !important;
}
.u-width-150\@large {
width: 150px !important;
}
.u-min-width-150\@large {
min-width: 150px !important;
}
.u-max-width-150\@large {
max-width: 150px !important;
}
.u-height-150\@large {
height: 150px !important;
}
.u-min-height-150\@large {
min-height: 150px !important;
}
.u-max-height-150\@large {
max-height: 150px !important;
}
.u-width-200\@large {
width: 200px !important;
}
.u-min-width-200\@large {
min-width: 200px !important;
}
.u-max-width-200\@large {
max-width: 200px !important;
}
.u-height-200\@large {
height: 200px !important;
}
.u-min-height-200\@large {
min-height: 200px !important;
}
.u-max-height-200\@large {
max-height: 200px !important;
}
.u-width-250\@large {
width: 250px !important;
}
.u-min-width-250\@large {
min-width: 250px !important;
}
.u-max-width-250\@large {
max-width: 250px !important;
}
.u-height-250\@large {
height: 250px !important;
}
.u-min-height-250\@large {
min-height: 250px !important;
}
.u-max-height-250\@large {
max-height: 250px !important;
}
.u-width-300\@large {
width: 300px !important;
}
.u-min-width-300\@large {
min-width: 300px !important;
}
.u-max-width-300\@large {
max-width: 300px !important;
}
.u-height-300\@large {
height: 300px !important;
}
.u-min-height-300\@large {
min-height: 300px !important;
}
.u-max-height-300\@large {
max-height: 300px !important;
}
.u-width-350\@large {
width: 350px !important;
}
.u-min-width-350\@large {
min-width: 350px !important;
}
.u-max-width-350\@large {
max-width: 350px !important;
}
.u-height-350\@large {
height: 350px !important;
}
.u-min-height-350\@large {
min-height: 350px !important;
}
.u-max-height-350\@large {
max-height: 350px !important;
}
.u-width-400\@large {
width: 400px !important;
}
.u-min-width-400\@large {
min-width: 400px !important;
}
.u-max-width-400\@large {
max-width: 400px !important;
}
.u-height-400\@large {
height: 400px !important;
}
.u-min-height-400\@large {
min-height: 400px !important;
}
.u-max-height-400\@large {
max-height: 400px !important;
}
.u-width-500\@large {
width: 500px !important;
}
.u-min-width-500\@large {
min-width: 500px !important;
}
.u-max-width-500\@large {
max-width: 500px !important;
}
.u-height-500\@large {
height: 500px !important;
}
.u-min-height-500\@large {
min-height: 500px !important;
}
.u-max-height-500\@large {
max-height: 500px !important;
}
.u-width-600\@large {
width: 600px !important;
}
.u-min-width-600\@large {
min-width: 600px !important;
}
.u-max-width-600\@large {
max-width: 600px !important;
}
.u-height-600\@large {
height: 600px !important;
}
.u-min-height-600\@large {
min-height: 600px !important;
}
.u-max-height-600\@large {
max-height: 600px !important;
}
.u-width-700\@large {
width: 700px !important;
}
.u-min-width-700\@large {
min-width: 700px !important;
}
.u-max-width-700\@large {
max-width: 700px !important;
}
.u-height-700\@large {
height: 700px !important;
}
.u-min-height-700\@large {
min-height: 700px !important;
}
.u-max-height-700\@large {
max-height: 700px !important;
}
.u-width-800\@large {
width: 800px !important;
}
.u-min-width-800\@large {
min-width: 800px !important;
}
.u-max-width-800\@large {
max-width: 800px !important;
}
.u-height-800\@large {
height: 800px !important;
}
.u-min-height-800\@large {
min-height: 800px !important;
}
.u-max-height-800\@large {
max-height: 800px !important;
}
.u-width-1400\@large {
width: 1400px !important;
}
.u-min-width-1400\@large {
min-width: 1400px !important;
}
.u-max-width-1400\@large {
max-width: 1400px !important;
}
.u-height-1400\@large {
height: 1400px !important;
}
.u-min-height-1400\@large {
min-height: 1400px !important;
}
.u-max-height-1400\@large {
max-height: 1400px !important;
}
.u-width-100\%\@large {
width: 100% !important;
}
.u-min-width-100\%\@large {
min-width: 100% !important;
}
.u-max-width-100\%\@large {
max-width: 100% !important;
}
.u-height-100\%\@large {
height: 100% !important;
}
.u-min-height-100\%\@large {
min-height: 100% !important;
}
.u-max-height-100\%\@large {
max-height: 100% !important;
}
.u-width-auto\@large {
width: auto !important;
}
.u-min-width-auto\@large {
min-width: auto !important;
}
.u-max-width-auto\@large {
max-width: auto !important;
}
.u-height-auto\@large {
height: auto !important;
}
.u-min-height-auto\@large {
min-height: auto !important;
}
.u-max-height-auto\@large {
max-height: auto !important;
}
}
@media all and (min-width: 1200px) {
.u-width-icon-s\@xlarge {
width: 16px !important;
}
.u-min-width-icon-s\@xlarge {
min-width: 16px !important;
}
.u-max-width-icon-s\@xlarge {
max-width: 16px !important;
}
.u-height-icon-s\@xlarge {
height: 16px !important;
}
.u-min-height-icon-s\@xlarge {
min-height: 16px !important;
}
.u-max-height-icon-s\@xlarge {
max-height: 16px !important;
}
.u-width-icon-m\@xlarge {
width: 24px !important;
}
.u-min-width-icon-m\@xlarge {
min-width: 24px !important;
}
.u-max-width-icon-m\@xlarge {
max-width: 24px !important;
}
.u-height-icon-m\@xlarge {
height: 24px !important;
}
.u-min-height-icon-m\@xlarge {
min-height: 24px !important;
}
.u-max-height-icon-m\@xlarge {
max-height: 24px !important;
}
.u-width-icon-l\@xlarge {
width: 32px !important;
}
.u-min-width-icon-l\@xlarge {
min-width: 32px !important;
}
.u-max-width-icon-l\@xlarge {
max-width: 32px !important;
}
.u-height-icon-l\@xlarge {
height: 32px !important;
}
.u-min-height-icon-l\@xlarge {
min-height: 32px !important;
}
.u-max-height-icon-l\@xlarge {
max-height: 32px !important;
}
.u-width-2xs\@xlarge {
width: 20px !important;
}
.u-min-width-2xs\@xlarge {
min-width: 20px !important;
}
.u-max-width-2xs\@xlarge {
max-width: 20px !important;
}
.u-height-2xs\@xlarge {
height: 20px !important;
}
.u-min-height-2xs\@xlarge {
min-height: 20px !important;
}
.u-max-height-2xs\@xlarge {
max-height: 20px !important;
}
.u-width-xs\@xlarge {
width: 30px !important;
}
.u-min-width-xs\@xlarge {
min-width: 30px !important;
}
.u-max-width-xs\@xlarge {
max-width: 30px !important;
}
.u-height-xs\@xlarge {
height: 30px !important;
}
.u-min-height-xs\@xlarge {
min-height: 30px !important;
}
.u-max-height-xs\@xlarge {
max-height: 30px !important;
}
.u-width-s\@xlarge {
width: 40px !important;
}
.u-min-width-s\@xlarge {
min-width: 40px !important;
}
.u-max-width-s\@xlarge {
max-width: 40px !important;
}
.u-height-s\@xlarge {
height: 40px !important;
}
.u-min-height-s\@xlarge {
min-height: 40px !important;
}
.u-max-height-s\@xlarge {
max-height: 40px !important;
}
.u-width-m\@xlarge {
width: 50px !important;
}
.u-min-width-m\@xlarge {
min-width: 50px !important;
}
.u-max-width-m\@xlarge {
max-width: 50px !important;
}
.u-height-m\@xlarge {
height: 50px !important;
}
.u-min-height-m\@xlarge {
min-height: 50px !important;
}
.u-max-height-m\@xlarge {
max-height: 50px !important;
}
.u-width-l\@xlarge {
width: 60px !important;
}
.u-min-width-l\@xlarge {
min-width: 60px !important;
}
.u-max-width-l\@xlarge {
max-width: 60px !important;
}
.u-height-l\@xlarge {
height: 60px !important;
}
.u-min-height-l\@xlarge {
min-height: 60px !important;
}
.u-max-height-l\@xlarge {
max-height: 60px !important;
}
.u-width-0\@xlarge {
width: 0 !important;
}
.u-min-width-0\@xlarge {
min-width: 0 !important;
}
.u-max-width-0\@xlarge {
max-width: 0 !important;
}
.u-height-0\@xlarge {
height: 0 !important;
}
.u-min-height-0\@xlarge {
min-height: 0 !important;
}
.u-max-height-0\@xlarge {
max-height: 0 !important;
}
.u-width-50\@xlarge {
width: 50px !important;
}
.u-min-width-50\@xlarge {
min-width: 50px !important;
}
.u-max-width-50\@xlarge {
max-width: 50px !important;
}
.u-height-50\@xlarge {
height: 50px !important;
}
.u-min-height-50\@xlarge {
min-height: 50px !important;
}
.u-max-height-50\@xlarge {
max-height: 50px !important;
}
.u-width-75\@xlarge {
width: 75px !important;
}
.u-min-width-75\@xlarge {
min-width: 75px !important;
}
.u-max-width-75\@xlarge {
max-width: 75px !important;
}
.u-height-75\@xlarge {
height: 75px !important;
}
.u-min-height-75\@xlarge {
min-height: 75px !important;
}
.u-max-height-75\@xlarge {
max-height: 75px !important;
}
.u-width-100\@xlarge {
width: 100px !important;
}
.u-min-width-100\@xlarge {
min-width: 100px !important;
}
.u-max-width-100\@xlarge {
max-width: 100px !important;
}
.u-height-100\@xlarge {
height: 100px !important;
}
.u-min-height-100\@xlarge {
min-height: 100px !important;
}
.u-max-height-100\@xlarge {
max-height: 100px !important;
}
.u-width-150\@xlarge {
width: 150px !important;
}
.u-min-width-150\@xlarge {
min-width: 150px !important;
}
.u-max-width-150\@xlarge {
max-width: 150px !important;
}
.u-height-150\@xlarge {
height: 150px !important;
}
.u-min-height-150\@xlarge {
min-height: 150px !important;
}
.u-max-height-150\@xlarge {
max-height: 150px !important;
}
.u-width-200\@xlarge {
width: 200px !important;
}
.u-min-width-200\@xlarge {
min-width: 200px !important;
}
.u-max-width-200\@xlarge {
max-width: 200px !important;
}
.u-height-200\@xlarge {
height: 200px !important;
}
.u-min-height-200\@xlarge {
min-height: 200px !important;
}
.u-max-height-200\@xlarge {
max-height: 200px !important;
}
.u-width-250\@xlarge {
width: 250px !important;
}
.u-min-width-250\@xlarge {
min-width: 250px !important;
}
.u-max-width-250\@xlarge {
max-width: 250px !important;
}
.u-height-250\@xlarge {
height: 250px !important;
}
.u-min-height-250\@xlarge {
min-height: 250px !important;
}
.u-max-height-250\@xlarge {
max-height: 250px !important;
}
.u-width-300\@xlarge {
width: 300px !important;
}
.u-min-width-300\@xlarge {
min-width: 300px !important;
}
.u-max-width-300\@xlarge {
max-width: 300px !important;
}
.u-height-300\@xlarge {
height: 300px !important;
}
.u-min-height-300\@xlarge {
min-height: 300px !important;
}
.u-max-height-300\@xlarge {
max-height: 300px !important;
}
.u-width-350\@xlarge {
width: 350px !important;
}
.u-min-width-350\@xlarge {
min-width: 350px !important;
}
.u-max-width-350\@xlarge {
max-width: 350px !important;
}
.u-height-350\@xlarge {
height: 350px !important;
}
.u-min-height-350\@xlarge {
min-height: 350px !important;
}
.u-max-height-350\@xlarge {
max-height: 350px !important;
}
.u-width-400\@xlarge {
width: 400px !important;
}
.u-min-width-400\@xlarge {
min-width: 400px !important;
}
.u-max-width-400\@xlarge {
max-width: 400px !important;
}
.u-height-400\@xlarge {
height: 400px !important;
}
.u-min-height-400\@xlarge {
min-height: 400px !important;
}
.u-max-height-400\@xlarge {
max-height: 400px !important;
}
.u-width-500\@xlarge {
width: 500px !important;
}
.u-min-width-500\@xlarge {
min-width: 500px !important;
}
.u-max-width-500\@xlarge {
max-width: 500px !important;
}
.u-height-500\@xlarge {
height: 500px !important;
}
.u-min-height-500\@xlarge {
min-height: 500px !important;
}
.u-max-height-500\@xlarge {
max-height: 500px !important;
}
.u-width-600\@xlarge {
width: 600px !important;
}
.u-min-width-600\@xlarge {
min-width: 600px !important;
}
.u-max-width-600\@xlarge {
max-width: 600px !important;
}
.u-height-600\@xlarge {
height: 600px !important;
}
.u-min-height-600\@xlarge {
min-height: 600px !important;
}
.u-max-height-600\@xlarge {
max-height: 600px !important;
}
.u-width-700\@xlarge {
width: 700px !important;
}
.u-min-width-700\@xlarge {
min-width: 700px !important;
}
.u-max-width-700\@xlarge {
max-width: 700px !important;
}
.u-height-700\@xlarge {
height: 700px !important;
}
.u-min-height-700\@xlarge {
min-height: 700px !important;
}
.u-max-height-700\@xlarge {
max-height: 700px !important;
}
.u-width-800\@xlarge {
width: 800px !important;
}
.u-min-width-800\@xlarge {
min-width: 800px !important;
}
.u-max-width-800\@xlarge {
max-width: 800px !important;
}
.u-height-800\@xlarge {
height: 800px !important;
}
.u-min-height-800\@xlarge {
min-height: 800px !important;
}
.u-max-height-800\@xlarge {
max-height: 800px !important;
}
.u-width-1400\@xlarge {
width: 1400px !important;
}
.u-min-width-1400\@xlarge {
min-width: 1400px !important;
}
.u-max-width-1400\@xlarge {
max-width: 1400px !important;
}
.u-height-1400\@xlarge {
height: 1400px !important;
}
.u-min-height-1400\@xlarge {
min-height: 1400px !important;
}
.u-max-height-1400\@xlarge {
max-height: 1400px !important;
}
.u-width-100\%\@xlarge {
width: 100% !important;
}
.u-min-width-100\%\@xlarge {
min-width: 100% !important;
}
.u-max-width-100\%\@xlarge {
max-width: 100% !important;
}
.u-height-100\%\@xlarge {
height: 100% !important;
}
.u-min-height-100\%\@xlarge {
min-height: 100% !important;
}
.u-max-height-100\%\@xlarge {
max-height: 100% !important;
}
.u-width-auto\@xlarge {
width: auto !important;
}
.u-min-width-auto\@xlarge {
min-width: auto !important;
}
.u-max-width-auto\@xlarge {
max-width: auto !important;
}
.u-height-auto\@xlarge {
height: auto !important;
}
.u-min-height-auto\@xlarge {
min-height: auto !important;
}
.u-max-height-auto\@xlarge {
max-height: auto !important;
}
}
/*! Adapted from normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/**
* Apply root and body styles, or apply them to the scoping class if
* a scoping class (see variables.scss for explanations) has been set.
*/
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/**
* Apply root and body styles, or apply them to the scoping class if
* a scoping class (see variables.scss for explanations) has been set.
*/
html {
font-size: 17px;
line-height: 30px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Circular", "Helvetica Neue", Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #fff;
color: #3B3B6C;
}
/**
* Apply base styles direcly, or apply them to the scoping class if a scoping
* class (see variables.scss for explanations) has been set.
*/
/**
* Only keep bottom margin on block elements by default
* http://csswizardry.com/2012/06/single-direction-u-margin-declarations/
*/
h1, h2, h3, h4, h5, h6, hgroup,
dt, dd,
ul, ol,
p, figure,
blockquote,
pre, table, fieldset, hr {
margin: 0;
padding: 0;
margin-bottom: 15px;
}
ul, ol {
padding-left: 1.8em;
margin-bottom: 15px;
}
/**
* Apply a natural box layout model to all elements, but allow components to
* change
* http://www.paulirish.com/2012/box-sizing-border-box-ftw/
*/
*, *:before, *:after {
box-sizing: inherit;
}
/**
* Links default
*/
a {
color: #13138a;
transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
a:link {
color: #13138a;
}
@media (hover: hover) {
a:hover {
color: #1d1dcd;
text-decoration: underline;
}
}
a:active {
color: #1a1ab7;
text-decoration: underline;
}
/**
* Tables
*/
table {
border-collapse: collapse;
border: 1px solid #E6E6EC;
margin: 30px 0;
}
th, td {
border: 1px solid #E6E6EC;
text-align: left;
padding: 5px 10px;
}
table caption {
margin-bottom: 10px;
text-align: center;
color: #8484A3;
}
/**
* Misc. elements
*/
address {
font-style: normal;
}
img, svg {
vertical-align: top;
}
figure {
margin-bottom: 15px;
}
figcaption {
margin-top: 10px;
margin-bottom: 30px;
text-align: left;
color: #8484A3;
}
hr {
margin: 30px 0;
padding: 0;
border: none;
height: 1px;
background-color: currentColor;
opacity: 0.1;
}
svg {
vertical-align: middle;
}
label {
margin: 0;
padding: 0;
font-weight: inherit;
cursor: pointer;
}
@font-face {
font-family: "circular";
src: url("/fonts/circular/lineto-circular-book.woff2") format("woff2"), url("/fonts/circular/lineto-circular-book.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "circular";
src: url("/fonts/circular/lineto-circular-bookitalic.woff2") format("woff2"), url("/fonts/circular/lineto-circular-bookitalic.woff") format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "circular";
src: url("/fonts/circular/lineto-circular-pro-medium.woff2") format("woff2"), url("/fonts/circular/lineto-circular-pro-medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "circular";
src: url("/fonts/circular/lineto-circular-bold.woff2") format("woff2"), url("/fonts/circular/lineto-circular-bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/**
* Apply base styles direcly, or apply them to the scoping class if a scoping
* class (see variables.scss for explanations) has been set.
*/
code, .code {
font-family: "Lucida Console", Monaco, monospace;
font-size: 80%;
color: inherit;
background: #F3F3F6;
border: 1px solid #E6E6EC;
border-radius: 5px;
padding: 4px;
}
pre code {
display: block;
font-family: "Lucida Console", Monaco, monospace;
font-size: 80%;
color: inherit;
padding: 15px;
margin: 15px;
}
.lead {
margin-top: 0;
margin-bottom: 10px;
color: #8484A3;
font-weight: 400;
font-size: 21px;
line-height: 35px;
}
.text-inherit {
color: inherit;
}
.text-light,
.text-muted {
color: #8484A3;
}
.text-inverse {
color: #ffffff;
}
.text-inverse a:link,
.text-inverse a:visited {
color: inherit;
}
.text-uppercase {
text-transform: uppercase;
}
.columntext {
-moz-column-gap: 20px;
column-gap: 20px;
}
@media all and (min-width: 768px) {
.columntext--2 {
-moz-column-count: 2;
column-count: 2;
}
}
.l-bar {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
}
.l-bar__item-center {
display: flex;
justify-content: center;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
text-align: center;
margin-left: auto;
margin-right: auto;
flex-basis: 100%;
}
.l-bar__item-start, .l-bar__item-end {
display: flex;
flex-grow: 1;
flex-basis: 20%;
white-space: nowrap;
}
.l-bar__item-start {
text-align: left;
margin-right: 15px;
order: -1;
justify-content: flex-start;
}
.l-bar__item-end {
text-align: right;
margin-left: 15px;
order: 1;
justify-content: flex-end;
}
.l-split {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "start main end";
align-items: center;
width: 100%;
}
.l-split__main {
grid-area: main;
justify-content: center;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
text-align: center;
}
.l-split__start, .l-split__end {
display: flex;
white-space: nowrap;
}
.l-split__start {
grid-area: start;
justify-content: flex-start;
text-align: left;
margin-right: 15px;
}
.l-split__end {
grid-area: end;
justify-content: flex-end;
text-align: right;
margin-left: 15px;
}
.l-split--align-left {
grid-template-columns: auto -webkit-max-content -webkit-max-content;
grid-template-columns: auto max-content max-content;
grid-template-areas: "main start end";
}
.l-split--align-left .l-split__main {
text-align: left;
}
.l-split--align-left .l-split__start {
margin-left: 15px;
margin-right: 0;
}
.l-split--align-left .l-split__end {
margin-left: 15px;
}
.l-split--align-right {
grid-template-columns: -webkit-max-content -webkit-max-content auto;
grid-template-columns: max-content max-content auto;
grid-template-areas: "start end main";
}
.l-split--align-right .l-split__main {
text-align: right;
}
.l-split--align-right .l-split__start {
margin-right: 15px;
}
.l-split--align-right .l-split__end {
margin-left: 0;
margin-right: 15px;
}
/**
These class help structure the layout of elements in the viewport.
**/
/** Provide outer margins **/
.l-wrapper {
padding-left: 20px;
padding-right: 20px;
}
@media all and (min-width: 768px) {
.l-wrapper {
padding-left: 40px;
padding-right: 40px;
}
}
.l-container {
margin-left: auto !important;
margin-right: auto !important;
}
/** Center the content with a max-width **/
.l-container--fixed {
max-width: 1060px;
}
/* @TODO: obsolete ? - duplicate rules in containers.scss */
.l-center {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
min-height: 100%;
min-width: 100%;
height: 0px;
overflow: auto;
}
.l-center-h {
display: flex;
justify-content: center;
min-width: 100%;
}
.l-center-v {
display: flex;
align-items: center;
height: 0px;
min-height: 100%;
}
.l-center-v > * {
flex-grow: 1;
}
@media all and (min-width: 576px) {
.l-center\@small {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
min-height: 100%;
min-width: 100%;
height: 0px;
overflow: auto;
}
.l-center-h\@small {
display: flex;
justify-content: center;
min-width: 100%;
}
.l-center-v\@small {
display: flex;
align-items: center;
height: 0px;
min-height: 100%;
}
}
@media all and (min-width: 768px) {
.l-center\@medium {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
min-height: 100%;
min-width: 100%;
height: 0px;
overflow: auto;
}
.l-center-h\@medium {
display: flex;
justify-content: center;
min-width: 100%;
}
.l-center-v\@medium {
display: flex;
align-items: center;
height: 0px;
min-height: 100%;
}
}
@media all and (min-width: 992px) {
.l-center\@large {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
min-height: 100%;
min-width: 100%;
height: 0px;
overflow: auto;
}
.l-center-h\@large {
display: flex;
justify-content: center;
min-width: 100%;
}
.l-center-v\@large {
display: flex;
align-items: center;
height: 0px;
min-height: 100%;
}
}
@media all and (min-width: 1200px) {
.l-center\@xlarge {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
min-height: 100%;
min-width: 100%;
height: 0px;
overflow: auto;
}
.l-center-h\@xlarge {
display: flex;
justify-content: center;
min-width: 100%;
}
.l-center-v\@xlarge {
display: flex;
align-items: center;
height: 0px;
min-height: 100%;
}
}
/**
These class help structure the layout of elements in the viewport.
**/
/** Provide outer margins **/
.l-page-wrapper {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
@media all and (min-width: 768px) {
.l-page-wrapper {
padding-left: 40px;
padding-right: 40px;
}
}
/** Basic container **/
.l-container {
width: 100%;
margin-left: auto !important;
margin-right: auto !important;
}
/** Fixed container, using default grid max-width **/
.l-container--fixed {
max-width: 1060px;
}
.l-form__field {
margin-bottom: 10px;
}
/**
* This layout provides a flexbox grid.
*
* Cells are full-width and will stack on top of each other by default:
*
*
*
* Cells will in most cases be accompanied by utility classes that set
* the number of cell span.
*
*
*
* Several modifier classes are provided. For example, `l-grid--auto` will
* divide the space equally between all containing cells without the need
* for width utility classes.
*
*
*/
/** Grid **/
.l-grid {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
}
/** Grid modifiers: Gutter **/
.l-grid--no-gutter {
margin: 0;
}
.l-grid--no-gutter > .l-grid__cell {
padding: 0;
}
/** Grid modifiers: Order **/
.l-grid--reverse {
flex-direction: row-reverse;
}
@media all and (min-width: 576px) {
.l-grid--reverse\@small {
flex-direction: row-reverse;
}
}
@media all and (min-width: 768px) {
.l-grid--reverse\@medium {
flex-direction: row-reverse;
}
}
@media all and (min-width: 992px) {
.l-grid--reverse\@large {
flex-direction: row-reverse;
}
}
@media all and (min-width: 1200px) {
.l-grid--reverse\@xlarge {
flex-direction: row-reverse;
}
}
/** Grid modifiers: Horizontal alignement **/
.l-grid--start {
justify-content: flex-start;
}
.l-grid--center {
justify-content: center;
}
.l-grid--end {
justify-content: flex-end;
}
@media all and (min-width: 576px) {
.l-grid--start\@small {
justify-content: flex-start;
text-align: start;
}
.l-grid--center\@small {
justify-content: center;
text-align: center;
}
.l-grid--end\@small {
justify-content: flex-end;
text-align: end;
}
}
@media all and (min-width: 768px) {
.l-grid--start\@medium {
justify-content: flex-start;
text-align: start;
}
.l-grid--center\@medium {
justify-content: center;
text-align: center;
}
.l-grid--end\@medium {
justify-content: flex-end;
text-align: end;
}
}
@media all and (min-width: 992px) {
.l-grid--start\@large {
justify-content: flex-start;
text-align: start;
}
.l-grid--center\@large {
justify-content: center;
text-align: center;
}
.l-grid--end\@large {
justify-content: flex-end;
text-align: end;
}
}
@media all and (min-width: 1200px) {
.l-grid--start\@xlarge {
justify-content: flex-start;
text-align: start;
}
.l-grid--center\@xlarge {
justify-content: center;
text-align: center;
}
.l-grid--end\@xlarge {
justify-content: flex-end;
text-align: end;
}
}
/** Grid modifiers: Vertical alignement **/
.l-grid--top {
align-items: flex-start;
}
.l-grid--middle {
align-items: center;
}
.l-grid--bottom {
align-items: flex-end;
}
.l-grid--baseline {
align-items: baseline;
}
.l-grid--strech {
align-items: stretch;
}
@media all and (min-width: 576px) {
.l-grid--top\@small {
align-items: flex-start;
}
.l-grid--middle\@small {
align-items: center;
}
.l-grid--bottom\@small {
align-items: flex-end;
}
.l-grid--baseline\@small {
align-items: baseline;
}
.l-grid--strech\@small {
align-items: stretch;
}
}
@media all and (min-width: 768px) {
.l-grid--top\@medium {
align-items: flex-start;
}
.l-grid--middle\@medium {
align-items: center;
}
.l-grid--bottom\@medium {
align-items: flex-end;
}
.l-grid--baseline\@medium {
align-items: baseline;
}
.l-grid--strech\@medium {
align-items: stretch;
}
}
@media all and (min-width: 992px) {
.l-grid--top\@large {
align-items: flex-start;
}
.l-grid--middle\@large {
align-items: center;
}
.l-grid--bottom\@large {
align-items: flex-end;
}
.l-grid--baseline\@large {
align-items: baseline;
}
.l-grid--strech\@large {
align-items: stretch;
}
}
@media all and (min-width: 1200px) {
.l-grid--top\@xlarge {
align-items: flex-start;
}
.l-grid--middle\@xlarge {
align-items: center;
}
.l-grid--bottom\@xlarge {
align-items: flex-end;
}
.l-grid--baseline\@xlarge {
align-items: baseline;
}
.l-grid--strech\@xlarge {
align-items: stretch;
}
}
/** Grid modifiers: Horizontal spacing **/
.l-grid--space-around {
justify-content: space-around;
}
.l-grid--space-between {
justify-content: space-between;
}
@media all and (min-width: 576px) {
.l-grid--space-around\@small {
justify-content: space-around;
}
.l-grid--space-between\@small {
justify-content: space-between;
}
}
@media all and (min-width: 768px) {
.l-grid--space-around\@medium {
justify-content: space-around;
}
.l-grid--space-between\@medium {
justify-content: space-between;
}
}
@media all and (min-width: 992px) {
.l-grid--space-around\@large {
justify-content: space-around;
}
.l-grid--space-between\@large {
justify-content: space-between;
}
}
@media all and (min-width: 1200px) {
.l-grid--space-around\@xlarge {
justify-content: space-around;
}
.l-grid--space-between\@xlarge {
justify-content: space-between;
}
}
/** Cell **/
.l-grid__cell {
flex: 1 0 100%;
flex-basis: 100%;
/* IE11 ignore flex-basis in shorthand property above */
max-width: 100%;
min-width: 0;
padding-left: 10px;
padding-right: 10px;
}
/** Cell modifiers: size **/
.l-grid__cell--1 {
flex-grow: 0;
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
.l-grid__cell--2 {
flex-grow: 0;
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.l-grid__cell--3 {
flex-grow: 0;
flex-basis: 25%;
max-width: 25%;
}
.l-grid__cell--4 {
flex-grow: 0;
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.l-grid__cell--5 {
flex-grow: 0;
flex-basis: 41.6666666667%;
max-width: 41.6666666667%;
}
.l-grid__cell--6 {
flex-grow: 0;
flex-basis: 50%;
max-width: 50%;
}
.l-grid__cell--7 {
flex-grow: 0;
flex-basis: 58.3333333333%;
max-width: 58.3333333333%;
}
.l-grid__cell--8 {
flex-grow: 0;
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
.l-grid__cell--9 {
flex-grow: 0;
flex-basis: 75%;
max-width: 75%;
}
.l-grid__cell--10 {
flex-grow: 0;
flex-basis: 83.3333333333%;
max-width: 83.3333333333%;
}
.l-grid__cell--11 {
flex-grow: 0;
flex-basis: 91.6666666667%;
max-width: 91.6666666667%;
}
.l-grid__cell--12 {
flex-grow: 0;
flex-basis: 100%;
max-width: 100%;
}
@media all and (min-width: 576px) {
.l-grid__cell--1\@small {
flex-grow: 0;
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
.l-grid__cell--2\@small {
flex-grow: 0;
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.l-grid__cell--3\@small {
flex-grow: 0;
flex-basis: 25%;
max-width: 25%;
}
.l-grid__cell--4\@small {
flex-grow: 0;
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.l-grid__cell--5\@small {
flex-grow: 0;
flex-basis: 41.6666666667%;
max-width: 41.6666666667%;
}
.l-grid__cell--6\@small {
flex-grow: 0;
flex-basis: 50%;
max-width: 50%;
}
.l-grid__cell--7\@small {
flex-grow: 0;
flex-basis: 58.3333333333%;
max-width: 58.3333333333%;
}
.l-grid__cell--8\@small {
flex-grow: 0;
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
.l-grid__cell--9\@small {
flex-grow: 0;
flex-basis: 75%;
max-width: 75%;
}
.l-grid__cell--10\@small {
flex-grow: 0;
flex-basis: 83.3333333333%;
max-width: 83.3333333333%;
}
.l-grid__cell--11\@small {
flex-grow: 0;
flex-basis: 91.6666666667%;
max-width: 91.6666666667%;
}
.l-grid__cell--12\@small {
flex-grow: 0;
flex-basis: 100%;
max-width: 100%;
}
}
@media all and (min-width: 768px) {
.l-grid__cell--1\@medium {
flex-grow: 0;
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
.l-grid__cell--2\@medium {
flex-grow: 0;
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.l-grid__cell--3\@medium {
flex-grow: 0;
flex-basis: 25%;
max-width: 25%;
}
.l-grid__cell--4\@medium {
flex-grow: 0;
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.l-grid__cell--5\@medium {
flex-grow: 0;
flex-basis: 41.6666666667%;
max-width: 41.6666666667%;
}
.l-grid__cell--6\@medium {
flex-grow: 0;
flex-basis: 50%;
max-width: 50%;
}
.l-grid__cell--7\@medium {
flex-grow: 0;
flex-basis: 58.3333333333%;
max-width: 58.3333333333%;
}
.l-grid__cell--8\@medium {
flex-grow: 0;
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
.l-grid__cell--9\@medium {
flex-grow: 0;
flex-basis: 75%;
max-width: 75%;
}
.l-grid__cell--10\@medium {
flex-grow: 0;
flex-basis: 83.3333333333%;
max-width: 83.3333333333%;
}
.l-grid__cell--11\@medium {
flex-grow: 0;
flex-basis: 91.6666666667%;
max-width: 91.6666666667%;
}
.l-grid__cell--12\@medium {
flex-grow: 0;
flex-basis: 100%;
max-width: 100%;
}
}
@media all and (min-width: 992px) {
.l-grid__cell--1\@large {
flex-grow: 0;
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
.l-grid__cell--2\@large {
flex-grow: 0;
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.l-grid__cell--3\@large {
flex-grow: 0;
flex-basis: 25%;
max-width: 25%;
}
.l-grid__cell--4\@large {
flex-grow: 0;
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.l-grid__cell--5\@large {
flex-grow: 0;
flex-basis: 41.6666666667%;
max-width: 41.6666666667%;
}
.l-grid__cell--6\@large {
flex-grow: 0;
flex-basis: 50%;
max-width: 50%;
}
.l-grid__cell--7\@large {
flex-grow: 0;
flex-basis: 58.3333333333%;
max-width: 58.3333333333%;
}
.l-grid__cell--8\@large {
flex-grow: 0;
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
.l-grid__cell--9\@large {
flex-grow: 0;
flex-basis: 75%;
max-width: 75%;
}
.l-grid__cell--10\@large {
flex-grow: 0;
flex-basis: 83.3333333333%;
max-width: 83.3333333333%;
}
.l-grid__cell--11\@large {
flex-grow: 0;
flex-basis: 91.6666666667%;
max-width: 91.6666666667%;
}
.l-grid__cell--12\@large {
flex-grow: 0;
flex-basis: 100%;
max-width: 100%;
}
}
@media all and (min-width: 1200px) {
.l-grid__cell--1\@xlarge {
flex-grow: 0;
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
.l-grid__cell--2\@xlarge {
flex-grow: 0;
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.l-grid__cell--3\@xlarge {
flex-grow: 0;
flex-basis: 25%;
max-width: 25%;
}
.l-grid__cell--4\@xlarge {
flex-grow: 0;
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.l-grid__cell--5\@xlarge {
flex-grow: 0;
flex-basis: 41.6666666667%;
max-width: 41.6666666667%;
}
.l-grid__cell--6\@xlarge {
flex-grow: 0;
flex-basis: 50%;
max-width: 50%;
}
.l-grid__cell--7\@xlarge {
flex-grow: 0;
flex-basis: 58.3333333333%;
max-width: 58.3333333333%;
}
.l-grid__cell--8\@xlarge {
flex-grow: 0;
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
.l-grid__cell--9\@xlarge {
flex-grow: 0;
flex-basis: 75%;
max-width: 75%;
}
.l-grid__cell--10\@xlarge {
flex-grow: 0;
flex-basis: 83.3333333333%;
max-width: 83.3333333333%;
}
.l-grid__cell--11\@xlarge {
flex-grow: 0;
flex-basis: 91.6666666667%;
max-width: 91.6666666667%;
}
.l-grid__cell--12\@xlarge {
flex-grow: 0;
flex-basis: 100%;
max-width: 100%;
}
}
/** Cell modifiers: offset **/
.l-grid__cell--offset-0 {
margin-left: 0%;
}
.l-grid__cell--offset-1 {
margin-left: 8.3333333333%;
}
.l-grid__cell--offset-2 {
margin-left: 16.6666666667%;
}
.l-grid__cell--offset-3 {
margin-left: 25%;
}
.l-grid__cell--offset-4 {
margin-left: 33.3333333333%;
}
.l-grid__cell--offset-5 {
margin-left: 41.6666666667%;
}
.l-grid__cell--offset-6 {
margin-left: 50%;
}
.l-grid__cell--offset-7 {
margin-left: 58.3333333333%;
}
.l-grid__cell--offset-8 {
margin-left: 66.6666666667%;
}
.l-grid__cell--offset-9 {
margin-left: 75%;
}
.l-grid__cell--offset-10 {
margin-left: 83.3333333333%;
}
.l-grid__cell--offset-11 {
margin-left: 91.6666666667%;
}
@media all and (min-width: 576px) {
.l-grid__cell--offset-0\@small {
margin-left: 0%;
}
.l-grid__cell--offset-1\@small {
margin-left: 8.3333333333%;
}
.l-grid__cell--offset-2\@small {
margin-left: 16.6666666667%;
}
.l-grid__cell--offset-3\@small {
margin-left: 25%;
}
.l-grid__cell--offset-4\@small {
margin-left: 33.3333333333%;
}
.l-grid__cell--offset-5\@small {
margin-left: 41.6666666667%;
}
.l-grid__cell--offset-6\@small {
margin-left: 50%;
}
.l-grid__cell--offset-7\@small {
margin-left: 58.3333333333%;
}
.l-grid__cell--offset-8\@small {
margin-left: 66.6666666667%;
}
.l-grid__cell--offset-9\@small {
margin-left: 75%;
}
.l-grid__cell--offset-10\@small {
margin-left: 83.3333333333%;
}
.l-grid__cell--offset-11\@small {
margin-left: 91.6666666667%;
}
}
@media all and (min-width: 768px) {
.l-grid__cell--offset-0\@medium {
margin-left: 0%;
}
.l-grid__cell--offset-1\@medium {
margin-left: 8.3333333333%;
}
.l-grid__cell--offset-2\@medium {
margin-left: 16.6666666667%;
}
.l-grid__cell--offset-3\@medium {
margin-left: 25%;
}
.l-grid__cell--offset-4\@medium {
margin-left: 33.3333333333%;
}
.l-grid__cell--offset-5\@medium {
margin-left: 41.6666666667%;
}
.l-grid__cell--offset-6\@medium {
margin-left: 50%;
}
.l-grid__cell--offset-7\@medium {
margin-left: 58.3333333333%;
}
.l-grid__cell--offset-8\@medium {
margin-left: 66.6666666667%;
}
.l-grid__cell--offset-9\@medium {
margin-left: 75%;
}
.l-grid__cell--offset-10\@medium {
margin-left: 83.3333333333%;
}
.l-grid__cell--offset-11\@medium {
margin-left: 91.6666666667%;
}
}
@media all and (min-width: 992px) {
.l-grid__cell--offset-0\@large {
margin-left: 0%;
}
.l-grid__cell--offset-1\@large {
margin-left: 8.3333333333%;
}
.l-grid__cell--offset-2\@large {
margin-left: 16.6666666667%;
}
.l-grid__cell--offset-3\@large {
margin-left: 25%;
}
.l-grid__cell--offset-4\@large {
margin-left: 33.3333333333%;
}
.l-grid__cell--offset-5\@large {
margin-left: 41.6666666667%;
}
.l-grid__cell--offset-6\@large {
margin-left: 50%;
}
.l-grid__cell--offset-7\@large {
margin-left: 58.3333333333%;
}
.l-grid__cell--offset-8\@large {
margin-left: 66.6666666667%;
}
.l-grid__cell--offset-9\@large {
margin-left: 75%;
}
.l-grid__cell--offset-10\@large {
margin-left: 83.3333333333%;
}
.l-grid__cell--offset-11\@large {
margin-left: 91.6666666667%;
}
}
@media all and (min-width: 1200px) {
.l-grid__cell--offset-0\@xlarge {
margin-left: 0%;
}
.l-grid__cell--offset-1\@xlarge {
margin-left: 8.3333333333%;
}
.l-grid__cell--offset-2\@xlarge {
margin-left: 16.6666666667%;
}
.l-grid__cell--offset-3\@xlarge {
margin-left: 25%;
}
.l-grid__cell--offset-4\@xlarge {
margin-left: 33.3333333333%;
}
.l-grid__cell--offset-5\@xlarge {
margin-left: 41.6666666667%;
}
.l-grid__cell--offset-6\@xlarge {
margin-left: 50%;
}
.l-grid__cell--offset-7\@xlarge {
margin-left: 58.3333333333%;
}
.l-grid__cell--offset-8\@xlarge {
margin-left: 66.6666666667%;
}
.l-grid__cell--offset-9\@xlarge {
margin-left: 75%;
}
.l-grid__cell--offset-10\@xlarge {
margin-left: 83.3333333333%;
}
.l-grid__cell--offset-11\@xlarge {
margin-left: 91.6666666667%;
}
}
/** Auto size all cells **/
.l-grid--auto .l-grid__cell {
flex-basis: auto !important;
}
/** Cell modifiers: order **/
.l-grid__cell--first {
order: -1;
}
.l-grid__cell--last {
order: 1;
}
@media all and (min-width: 576px) {
.l-grid__cell--first\@small {
order: -1;
}
.l-grid__cell--last\@small {
order: 1;
}
}
@media all and (min-width: 768px) {
.l-grid__cell--first\@medium {
order: -1;
}
.l-grid__cell--last\@medium {
order: 1;
}
}
@media all and (min-width: 992px) {
.l-grid__cell--first\@large {
order: -1;
}
.l-grid__cell--last\@large {
order: 1;
}
}
@media all and (min-width: 1200px) {
.l-grid__cell--first\@xlarge {
order: -1;
}
.l-grid__cell--last\@xlarge {
order: 1;
}
}
/** Cell modifiers: self alignement **/
.l-grid__cell--top {
align-self: flex-start;
}
.l-grid__cell--bottom {
align-self: flex-end;
}
.l-grid__cell--middle {
align-self: center;
}
@media all and (min-width: 576px) {
.l-grid__cell--top\@small {
align-self: flex-start;
}
.l-grid__cell--bottom\@small {
align-self: flex-end;
}
.l-grid__cell--middle\@small {
align-self: center;
}
}
@media all and (min-width: 768px) {
.l-grid__cell--top\@medium {
align-self: flex-start;
}
.l-grid__cell--bottom\@medium {
align-self: flex-end;
}
.l-grid__cell--middle\@medium {
align-self: center;
}
}
@media all and (min-width: 992px) {
.l-grid__cell--top\@large {
align-self: flex-start;
}
.l-grid__cell--bottom\@large {
align-self: flex-end;
}
.l-grid__cell--middle\@large {
align-self: center;
}
}
@media all and (min-width: 1200px) {
.l-grid__cell--top\@xlarge {
align-self: flex-start;
}
.l-grid__cell--bottom\@xlarge {
align-self: flex-end;
}
.l-grid__cell--middle\@xlarge {
align-self: center;
}
}
.l-hanging {
display: flex;
min-height: 100%;
}
.l-hanging .l-hanging__start {
flex: 0 0 280px;
flex-basis: 280px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 1;
max-width: 280px;
/* IE11 fix for ignored box-sizing: border-box */
}
.l-hanging .l-hanging__end {
flex: 0 0 280px;
flex-basis: 280px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 3;
max-width: 280px;
/* IE11 fix for ignored box-sizing: border-box */
}
.l-hanging .l-hanging__main {
flex: 1 1 auto;
flex-basis: 0px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 2;
}
@media all and (min-width: 576px) {
.l-hanging\@small {
display: flex;
min-height: 100%;
}
.l-hanging\@small .l-hanging__start {
flex: 0 0 280px;
flex-basis: 280px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 1;
max-width: 280px;
/* IE11 fix for ignored box-sizing: border-box */
}
.l-hanging\@small .l-hanging__end {
flex: 0 0 280px;
flex-basis: 280px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 3;
max-width: 280px;
/* IE11 fix for ignored box-sizing: border-box */
}
.l-hanging\@small .l-hanging__main {
flex: 1 1 auto;
flex-basis: 0px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 2;
}
}
@media all and (min-width: 768px) {
.l-hanging\@medium {
display: flex;
min-height: 100%;
}
.l-hanging\@medium .l-hanging__start {
flex: 0 0 280px;
flex-basis: 280px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 1;
max-width: 280px;
/* IE11 fix for ignored box-sizing: border-box */
}
.l-hanging\@medium .l-hanging__end {
flex: 0 0 280px;
flex-basis: 280px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 3;
max-width: 280px;
/* IE11 fix for ignored box-sizing: border-box */
}
.l-hanging\@medium .l-hanging__main {
flex: 1 1 auto;
flex-basis: 0px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 2;
}
}
@media all and (min-width: 992px) {
.l-hanging\@large {
display: flex;
min-height: 100%;
}
.l-hanging\@large .l-hanging__start {
flex: 0 0 280px;
flex-basis: 280px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 1;
max-width: 280px;
/* IE11 fix for ignored box-sizing: border-box */
}
.l-hanging\@large .l-hanging__end {
flex: 0 0 280px;
flex-basis: 280px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 3;
max-width: 280px;
/* IE11 fix for ignored box-sizing: border-box */
}
.l-hanging\@large .l-hanging__main {
flex: 1 1 auto;
flex-basis: 0px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 2;
}
}
@media all and (min-width: 1200px) {
.l-hanging\@xlarge {
display: flex;
min-height: 100%;
}
.l-hanging\@xlarge .l-hanging__start {
flex: 0 0 280px;
flex-basis: 280px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 1;
max-width: 280px;
/* IE11 fix for ignored box-sizing: border-box */
}
.l-hanging\@xlarge .l-hanging__end {
flex: 0 0 280px;
flex-basis: 280px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 3;
max-width: 280px;
/* IE11 fix for ignored box-sizing: border-box */
}
.l-hanging\@xlarge .l-hanging__main {
flex: 1 1 auto;
flex-basis: 0px;
/* IE11 ignore flex-basis in shorthand property above */
min-height: 100%;
min-width: 0;
/* Fix inner text-ellipsis: https://codepen.io/aj-foster/pen/emBYPW */
order: 2;
}
}
.l-media {
display: flex;
align-items: flex-start;
width: 100%;
}
.l-media__body {
flex: 1;
}
.l-modal {
position: fixed;
z-index: 600;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
padding: 20px;
background-color: rgba(0, 0, 0, 0);
transition: background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
pointer-events: none;
}
@media all and (min-width: 768px) {
.l-modal {
padding: 40px;
}
}
.l-modal.is-open {
background-color: rgba(0, 0, 0, 0.65);
pointer-events: auto;
}
.l-modal.is-open .l-modal__inner {
transform: translate3d(0, 0, 0);
opacity: 1;
margin-top: auto;
margin-bottom: auto;
}
.l-modal__inner {
max-width: 100%;
opacity: 0;
transform: perspective(500px) translate3d(0, 50px, -5px);
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 125ms, opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 125ms;
}
.l-scroll {
height: 100%;
width: 100%;
flex: 1 1 auto;
overflow-y: auto;
}
.l-surface-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
flex-basis: auto;
}
.l-surface-group--nowrap {
flex-wrap: nowrap;
}
/* Direction variants */
.l-surface-group--col {
flex-direction: column;
}
@media all and (min-width: 576px) {
.l-surface-group--col\@small {
flex-direction: column;
}
}
@media all and (min-width: 768px) {
.l-surface-group--col\@medium {
flex-direction: column;
}
}
@media all and (min-width: 992px) {
.l-surface-group--col\@large {
flex-direction: column;
}
}
@media all and (min-width: 1200px) {
.l-surface-group--col\@xlarge {
flex-direction: column;
}
}
.l-surface-group--row {
flex-direction: row;
}
@media all and (min-width: 576px) {
.l-surface-group--row\@small {
flex-direction: row;
}
}
@media all and (min-width: 768px) {
.l-surface-group--row\@medium {
flex-direction: row;
}
}
@media all and (min-width: 992px) {
.l-surface-group--row\@large {
flex-direction: row;
}
}
@media all and (min-width: 1200px) {
.l-surface-group--row\@xlarge {
flex-direction: row;
}
}
/** Child items options **/
.l-surface-group__item--fill {
flex: 1 0 auto;
align-self: stretch;
}
@media all and (min-width: 576px) {
.l-surface-group__item--fill\@small {
flex: 1 0 auto;
align-self: stretch;
}
}
@media all and (min-width: 768px) {
.l-surface-group__item--fill\@medium {
flex: 1 0 auto;
align-self: stretch;
}
}
@media all and (min-width: 992px) {
.l-surface-group__item--fill\@large {
flex: 1 0 auto;
align-self: stretch;
}
}
@media all and (min-width: 1200px) {
.l-surface-group__item--fill\@xlarge {
flex: 1 0 auto;
align-self: stretch;
}
}
.l-surface-segmented {
display: flex;
flex-wrap: wrap;
gap: 1px;
}
.l-surface-segmented > :not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.l-surface-segmented > *:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.l-surface-segmented > *:focus,
.l-surface-segmented > *:focus-within {
z-index: 1;
position: relative;
}
/* No wrap variant */
.l-surface-segmented--nowrap {
flex-wrap: nowrap;
}
/* Fill variant */
.l-surface-segmented__item--fill {
flex: 1 0 auto;
align-self: stretch;
}
@media all and (min-width: 576px) {
.l-surface-segmented__item--fill\@small {
flex: 1 0 auto;
align-self: stretch;
}
}
@media all and (min-width: 768px) {
.l-surface-segmented__item--fill\@medium {
flex: 1 0 auto;
align-self: stretch;
}
}
@media all and (min-width: 992px) {
.l-surface-segmented__item--fill\@large {
flex: 1 0 auto;
align-self: stretch;
}
}
@media all and (min-width: 1200px) {
.l-surface-segmented__item--fill\@xlarge {
flex: 1 0 auto;
align-self: stretch;
}
}
.l-stack {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
width: 100%;
height: 100%;
}
.l-stack > * {
flex: 0 0 0;
}
.l-stack__item-scrollable {
overflow-y: auto;
flex: 1 1 auto;
}
.l-stack__item-fill {
flex-grow: 1;
}
.l-stack__item-start {
order: -1;
}
.l-stack__item-end {
order: 1;
}
.c-action {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
height: 30px;
padding: 0;
font-size: 15px;
line-height: 28px;
font-weight: 500;
border: 0 solid transparent;
border-radius: 5px;
text-align: center;
text-decoration: none;
color: #3B3B6C;
background: transparent;
cursor: pointer;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
vertical-align: baseline;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.c-action:link, .c-action:visited {
color: #3B3B6C;
}
@media (hover: hover) {
.c-action:hover {
color: #1d1dcd;
text-decoration: none;
}
}
.c-action:active, .c-action.is-active {
color: #1a1ab7;
border-color: transparent;
}
.c-action:disabled, .c-action[disabled] {
cursor: default;
pointer-events: none;
}
.c-action:disabled .c-action__label,
.c-action:disabled .c-action__icon, .c-action[disabled] .c-action__label,
.c-action[disabled] .c-action__icon {
opacity: 0.5;
}
.c-action > * {
margin-left: 2px;
margin-right: 2px;
}
.c-action > *:first-child {
margin-left: 0;
}
.c-action > *:last-child {
margin-right: 0;
}
.c-action > * + * {
margin-left: 2px;
}
.c-action__icon {
display: flex;
opacity: 0.9;
transition: none;
}
.c-action__label {
display: flex;
align-items: center;
margin: 0;
padding-bottom: 1px;
}
/* Variant: bordered */
.c-action--border {
border: 1px solid rgba(10, 10, 71, 0.1);
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0);
}
@media (hover: hover) {
.c-action--border:hover {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.2);
border-color: #c7c7f3;
}
}
.c-action--border:active, .c-action--border.is-active {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0);
border-color: #c6c6ed;
}
.c-action--border > *:first-child {
margin-left: 2px;
}
.c-action--border > *:last-child {
margin-right: 2px;
}
.c-action--border .c-action__label:first-child {
padding-left: 5px;
}
.c-action--border .c-action__label:last-child {
padding-right: 5px;
}
/* Variant: floating */
.c-action--float {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.1);
border: 1px solid transparent;
background: #ffffff;
}
@media (hover: hover) {
.c-action--float:hover {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.35);
background: #ffffff;
border-color: transparent;
}
}
.c-action--float:active, .c-action--float.is-active {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.1);
background: #ffffff !important;
border-color: transparent;
}
.c-action--float > *:first-child {
margin-left: 2px;
}
.c-action--float > *:last-child {
margin-right: 2px;
}
.c-action--float .c-action__label:first-child {
padding-left: 5px;
}
.c-action--float .c-action__label:last-child {
padding-right: 5px;
}
.c-icon-action {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: -8px;
box-sizing: content-box;
border: 0;
padding: 0;
cursor: pointer;
color: currentColor;
background: transparent;
transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 1;
}
.c-icon-action:link, .c-icon-action:visited {
color: currentColor;
}
@media (hover: hover) {
.c-icon-action:hover {
opacity: 1;
}
}
.c-icon-action:focus {
opacity: 1;
outline: none;
}
.c-icon-action:focus > * {
border-radius: 5px;
}
.c-icon-action:active,
.c-icon-action .is-active {
opacity: 0.8;
}
.c-icon-action:disabled, .c-icon-action[disabled] {
opacity: 0.5;
cursor: default;
}
.c-icon-action--s {
width: 20px;
height: 20px;
}
.c-attribute {
display: flex;
font-size: 17px;
line-height: 30px;
}
.c-attribute__icon {
flex: 0 0 auto;
margin-right: 10px;
color: #8484A3;
margin-top: -1px;
}
.c-attribute__body {
flex: auto;
overflow-x: hidden;
}
.c-attribute__label {
font-weight: 500;
color: #8484A3;
}
.c-attribute__content {
color: #3B3B6C;
overflow-x: hidden;
text-overflow: ellipsis;
}
.c-attribute__content.is-disabled {
color: #C2C2D1;
}
.c-attribute--s {
font-size: 15px;
line-height: 20px;
}
.c-avatar {
position: relative;
display: inline-flex;
flex: 0 0 auto;
justify-content: center;
align-items: center;
vertical-align: middle;
background-color: #F3F3F6;
border-radius: 50%;
width: 50px;
height: 50px;
color: rgba(10, 10, 71, 0.65);
font-size: 15px;
overflow: hidden;
line-height: 1;
font-weight: 500;
text-transform: uppercase;
text-align: center;
}
.c-avatar__initials {
width: 95%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.c-avatar__image {
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.c-avatar--2xs {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
font-size: 7px;
font-weight: 700;
}
.c-avatar--xs {
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
font-size: 9px;
font-weight: 700;
}
.c-avatar--s {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
}
.c-avatar--l {
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
font-size: 17px;
font-size: 100;
}
.c-badge {
color: #F3F3F6;
background: #3B3B6C;
border-radius: 50px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
text-align: center;
text-transform: uppercase;
min-width: 1.6em;
font-size: 0.68em;
line-height: 1;
height: 1.6em;
padding: 0 0.5em;
vertical-align: 10%;
letter-spacing: 0.05em;
}
.c-badge--neutral-lighter {
color: #606087;
background: #E6E6EC;
}
.c-badge--neutral-light {
color: #ffffff;
background: #C2C2D1;
}
.c-badge--neutral {
background: #8484A3;
}
.c-badge--neutral-dark {
background: #606087;
}
.c-badge--white {
color: #3B3B6C;
background: #ffffff;
}
.c-badge--primary {
background: #13138a;
}
.c-badge--link {
background: #13138a;
}
.c-badge--accent-green {
color: #13138a;
background: #26DB8E;
}
.c-badge--accent-orange {
color: #13138a;
background: #FF8839;
}
.c-badge--accent-blue {
color: #13138a;
background: #3AB9FF;
}
.c-badge--warning {
background: #FF8839;
}
.c-badge--danger,
.c-badge--invalid {
background: #f24242;
}
.c-banner {
display: block;
padding: 20px;
background-color: #ffffff;
background-size: cover;
background-position: center center;
border-radius: 10px;
text-decoration: none;
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), border 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.1);
padding: 0;
padding-left: 19px;
display: flex;
align-items: flex-start;
flex-wrap: nowrap;
font-weight: 500;
border: 1px solid rgba(10, 10, 71, 0.1);
font-size: 17px;
line-height: 25px;
color: rgba(10, 10, 71, 0.8);
}
.c-banner__icon {
padding-top: 19px;
margin-top: 1px !important;
padding-right: 10px;
}
.c-banner__message {
margin-right: auto;
padding-top: 19px;
padding-bottom: 19px;
padding-right: 30px;
padding-left: 5px;
}
.c-banner__message a {
color: #13138a;
text-decoration: underline;
}
.c-banner__message a:link {
color: #13138a;
}
.c-banner__message a:visited {
color: #3e3e92;
}
.c-banner__message a.c-link--no-history:visited {
color: #13138a;
}
@media (hover: hover) {
.c-banner__message a:hover, .c-banner__message a:visited:hover {
color: #1d1dcd;
}
}
.c-banner__message a:active, .c-banner__message a:visited:active {
color: #1a1ab7;
}
.c-banner__actions {
padding: 0;
align-self: center;
}
.c-banner__actions:last-child {
padding-right: 19px;
}
.c-banner__dismiss {
color: rgba(10, 10, 71, 0.5);
margin: 0;
padding: 12px;
padding-bottom: 11px;
}
@media (hover: hover) {
.c-banner__dismiss:hover {
color: rgba(10, 10, 71, 0.8);
}
}
.c-banner--full-width {
border-width: 0 0 1px 0;
border-radius: 0;
box-shadow: none;
}
.c-banner--s {
padding: 0;
padding-left: 14px;
font-size: 15px;
line-height: 20px;
}
.c-banner--s .c-banner__icon {
padding-top: 14px;
margin-top: 1px !important;
padding-right: 5px;
}
.c-banner--s .c-banner__message {
padding-top: 14px;
padding-bottom: 14px;
margin-top: 3px;
}
.c-banner--s .c-banner__dismiss {
padding: 7px;
padding-bottom: 6px;
}
.c-banner--informative {
background-color: #f5fbfe;
border-color: #cce9f9;
}
.c-banner--informative .c-banner__icon {
color: #34a7e6;
}
.c-banner--success {
background-color: #f4fcf9;
border-color: #c8f1df;
}
.c-banner--success .c-banner__icon {
color: #22c580;
}
.c-banner--warning {
background-color: #fff9f5;
border-color: #ffe1ce;
}
.c-banner--warning .c-banner__icon {
color: #FF8839;
}
.c-banner--danger {
background-color: #fef6f6;
border-color: #fcd0d0;
}
.c-banner--danger .c-banner__icon {
color: #f24242;
}
.c-banner--invalid .c-banner__icon {
color: #f24242;
}
.c-box {
display: block;
padding: 20px;
background-color: #ffffff;
background-size: cover;
background-position: center center;
border-radius: 10px;
text-decoration: none;
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), border 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0);
border: 1px solid rgba(10, 10, 71, 0.1);
}
.c-box--interactive {
cursor: pointer;
}
@media (hover: hover) {
.c-box--interactive:hover {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.35);
transform: translateY(-2px);
text-decoration: none;
}
}
.c-box--interactive:active {
transform: translateY(0);
}
.c-box--depth-0 {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0);
}
@media (hover: hover) {
.c-box--depth-0.c-box--interactive:hover {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.2);
}
}
.c-box--depth-1 {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.1);
border: 0;
}
@media (hover: hover) {
.c-box--depth-1.c-box--interactive:hover {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.35);
}
}
.c-box--depth-2 {
box-shadow: 0 5px 25px -5px rgba(10, 10, 71, 0.15) , 0 10px 15px -15px rgba(10, 10, 71, 0.1);
border: 0;
}
@media (hover: hover) {
.c-box--depth-2.c-box--interactive:hover {
box-shadow: 0 5px 25px -5px rgba(10, 10, 71, 0.1) , 0 10px 15px -15px rgba(10, 10, 71, 0.4);
}
}
.c-box--depth-3 {
box-shadow: 0 10px 50px -10px rgba(10, 10, 71, 0.25) , 0 20px 30px -30px rgba(10, 10, 71, 0.1);
border: 0;
}
@media (hover: hover) {
.c-box--depth-3.c-box--interactive:hover {
box-shadow: 0 10px 50px -10px rgba(10, 10, 71, 0.2) , 0 20px 30px -30px rgba(10, 10, 71, 0.4);
}
}
.c-box--s {
padding: 15px;
border-radius: 5px;
}
.c-box--m {
padding: 30px;
}
.c-box--l {
padding: 60px;
}
.c-box--fill {
height: 100%;
}
/**
* Buttons group
*/
.c-buttons-group {
display: flex;
flex-wrap: wrap;
}
.c-buttons-group > * {
flex-shrink: 0;
}
.c-buttons-group > *:not(:last-child) {
margin-right: 10px;
}
@media all and (min-width: 768px) {
.c-buttons-group > *:not(:last-child) {
margin-right: 10px;
}
}
.c-buttons-group--fluid > * {
flex-grow: 1;
}
.c-buttons-group--fluid-evenly > * {
flex-grow: 1;
flex-basis: 0;
}
.c-buttons-group--segmented {
flex-wrap: nowrap;
}
.c-buttons-group--segmented > *:not(:last-child) {
margin-right: -1px;
}
@media (hover: hover) {
.c-buttons-group--segmented > *:hover {
transform: none;
/* Prevent horizontal visual shift between button */
z-index: 1;
}
}
.c-buttons-group--segmented > *:active {
transform: none;
/* Prevent horizontal visual shift between button */
z-index: 1;
}
.c-buttons-group--segmented > *:focus {
z-index: 2;
}
.c-buttons-group--segmented > *:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.c-buttons-group--segmented > *:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.c-button {
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 17px;
font-weight: 500;
line-height: 30px;
height: 50px;
padding: 9px 19px;
border-width: 1px;
border-style: solid;
border-radius: 30px;
text-align: center;
text-decoration: none;
color: #13138a;
border-color: #13138a;
background: transparent;
cursor: pointer;
transition-property: color, background-color, border-color, box-shadow;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
vertical-align: middle;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0);
}
.c-button:link, .c-button:visited {
color: #13138a;
border-color: #13138a;
text-decoration: none;
}
@media (hover: hover) {
.c-button:hover {
color: #ffffff;
background-color: #1d1dcd;
border-color: transparent;
box-shadow: 0 5px 25px -5px rgba(10, 10, 71, 0.1) , 0 10px 15px -15px rgba(10, 10, 71, 0.4);
transform: translateY(-1px);
text-decoration: none;
}
}
.c-button:active, .c-button.is-active {
color: #ffffff;
background-color: #1a1ab7;
border-color: transparent;
text-decoration: none;
}
.c-button:active {
transform: none;
text-decoration: none;
box-shadow: none;
}
.c-button:disabled, .c-button[disabled] {
color: #C2C2D1;
border-color: #C2C2D1;
background-color: initial;
transform: initial;
cursor: default;
pointer-events: none;
}
/**
* Loading state
*/
.c-button .c-button__spinner {
display: none;
line-height: inherit;
margin: 0px;
}
.c-button .c-button__spinner {
margin-left: -7px;
margin-right: 5px;
}
.c-button--s .c-button__spinner {
margin-left: -3px;
}
.c-button--link .c-button__spinner {
margin-left: 0;
}
.c-button.is-loading .c-button__spinner {
display: inline-flex;
}
.c-button.is-loading .c-button__icon {
display: none;
}
.c-button.is-loading .c-button__icon-single {
display: none;
}
/**
* Icons in button
*/
.c-button .c-button__icon,
.c-button .c-button__icon-right {
line-height: inherit;
margin: 0px;
}
.c-button .c-button__icon {
margin-left: -7px;
margin-right: 5px;
}
.c-button--s .c-button__icon {
margin-left: -3px;
}
.c-button .c-button__icon-right {
margin-right: -7px;
margin-left: 5px;
}
.c-button--s .c-button__icon-right {
margin-right: -3px;
}
.c-button .c-button__icon-single {
margin-right: -7px;
margin-left: -7px;
}
.c-button--s .c-button__icon-single {
margin-right: -3px;
margin-left: -3px;
}
/**
* Size and padding variations
*/
.c-button--s {
font-size: 15px;
line-height: 20px;
height: 40px;
padding: 9px 14px;
}
.c-button--l {
font-size: 19px;
line-height: 30px;
height: 60px;
padding: 14px 24px;
}
@media all and (min-width: 576px) {
.c-button--s\@small {
font-size: 15px;
line-height: 20px;
height: 40px;
padding: 9px 14px;
}
.c-button--m\@small {
font-size: 17px;
line-height: 30px;
height: 50px;
padding: 9px 19px;
}
.c-button--l\@small {
font-size: 19px;
line-height: 30px;
height: 60px;
padding: 14px 24px;
}
}
@media all and (min-width: 768px) {
.c-button--s\@medium {
font-size: 15px;
line-height: 20px;
height: 40px;
padding: 9px 14px;
}
.c-button--m\@medium {
font-size: 17px;
line-height: 30px;
height: 50px;
padding: 9px 19px;
}
.c-button--l\@medium {
font-size: 19px;
line-height: 30px;
height: 60px;
padding: 14px 24px;
}
}
@media all and (min-width: 992px) {
.c-button--s\@large {
font-size: 15px;
line-height: 20px;
height: 40px;
padding: 9px 14px;
}
.c-button--m\@large {
font-size: 17px;
line-height: 30px;
height: 50px;
padding: 9px 19px;
}
.c-button--l\@large {
font-size: 19px;
line-height: 30px;
height: 60px;
padding: 14px 24px;
}
}
@media all and (min-width: 1200px) {
.c-button--s\@xlarge {
font-size: 15px;
line-height: 20px;
height: 40px;
padding: 9px 14px;
}
.c-button--m\@xlarge {
font-size: 17px;
line-height: 30px;
height: 50px;
padding: 9px 19px;
}
.c-button--l\@xlarge {
font-size: 19px;
line-height: 30px;
height: 60px;
padding: 14px 24px;
}
}
/**
* Style variations
*/
.c-button--inverse, .c-button--inverse:link, .c-button--inverse:visited {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.65);
}
@media (hover: hover) {
.c-button--inverse:hover {
color: #1d1dcd;
background: #ffffff;
border-color: transparent;
}
}
.c-button--inverse:active, .c-button--inverse.is-active {
color: #1a1ab7;
background: #ffffff;
border-color: transparent;
}
.c-button--inverse:disabled, .c-button--inverse[disabled] {
background-color: transparent;
transform: initial;
cursor: default;
}
.c-button--link {
background: transparent;
text-decoration: underline;
padding-left: 0;
padding-right: 0;
}
.c-button--link, .c-button--link:link, .c-button--link:visited {
color: #13138a;
border-color: transparent;
text-decoration: underline;
}
@media (hover: hover) {
.c-button--link:hover {
color: #1d1dcd;
border-color: transparent;
background-color: transparent;
text-decoration: underline;
box-shadow: none;
outline: initial;
transform: none;
}
}
.c-button--link:active, .c-button--link.is-active {
color: #1a1ab7;
background-color: transparent;
border-color: transparent;
transform: none;
}
.c-button--link:focus {
color: #1a1ab7;
box-shadow: none;
}
.c-button--link:disabled, .c-button--link[disabled] {
color: rgba(19, 19, 138, 0.5);
border: transparent;
background-color: transparent;
transform: initial;
cursor: default;
}
/**
* Color variations
*/
.c-button--warning {
color: #FF8839;
border-color: #FF8839;
}
.c-button--warning, .c-button--warning:link, .c-button--warning:visited {
color: #FF8839;
border-color: #FF8839;
}
@media (hover: hover) {
.c-button--warning:hover {
color: #ffffff;
background-color: #ff7f29;
border-color: #ff7f29;
}
}
.c-button--warning:active, .c-button--warning.is-active {
color: #ffffff;
background-color: #ff8431;
border-color: #ff8431;
}
.c-button--warning:disabled {
color: rgba(255, 136, 57, 0.5);
border-color: rgba(255, 136, 57, 0.5);
transform: initial;
cursor: default;
}
.c-button--danger {
color: #f24242;
border-color: #f24242;
}
.c-button--danger, .c-button--danger:link, .c-button--danger:visited {
color: #f24242;
border-color: #f24242;
}
@media (hover: hover) {
.c-button--danger:hover {
color: #ffffff;
background-color: #f23333;
border-color: #f23333;
}
}
.c-button--danger:active, .c-button--danger.is-active {
color: #ffffff;
background-color: #f33a3a;
border-color: #f33a3a;
}
.c-button--danger:disabled {
color: rgba(242, 66, 66, 0.5);
border-color: rgba(242, 66, 66, 0.5);
transform: initial;
cursor: default;
}
.c-button--twitter {
font-weight: bold;
background-color: #00aced;
}
.c-button--twitter, .c-button--twitter:link, .c-button--twitter:visited {
color: #ffffff;
border-color: transparent;
}
@media (hover: hover) {
.c-button--twitter:hover {
color: #ffffff;
background-color: #08bbff;
}
}
.c-button--twitter:active, .c-button--twitter.is-active {
color: #ffffff;
background-color: #08bbff;
}
.c-button--twitter:disabled {
color: #ffffff;
background-color: rgba(0, 172, 237, 0.5);
border-color: transparent;
transform: initial;
cursor: default;
}
.c-button--facebook {
font-weight: bold;
background-color: #3b5998;
}
.c-button--facebook, .c-button--facebook:link, .c-button--facebook:visited {
color: #ffffff;
border-color: transparent;
}
@media (hover: hover) {
.c-button--facebook:hover {
color: #ffffff;
background-color: #4264aa;
}
}
.c-button--facebook:active, .c-button--facebook.is-active {
color: #ffffff;
background-color: #4264aa;
}
.c-button--facebook:disabled {
color: #ffffff;
background-color: rgba(59, 89, 152, 0.5);
border-color: transparent;
transform: initial;
cursor: default;
}
.c-button--linkedin {
font-weight: bold;
background-color: #0077B5;
}
.c-button--linkedin, .c-button--linkedin:link, .c-button--linkedin:visited {
color: #ffffff;
border-color: transparent;
}
@media (hover: hover) {
.c-button--linkedin:hover {
color: #ffffff;
background-color: #0088cf;
}
}
.c-button--linkedin:active, .c-button--linkedin.is-active {
color: #ffffff;
background-color: #0088cf;
}
.c-button--linkedin:disabled {
color: #ffffff;
background-color: rgba(0, 119, 181, 0.5);
border-color: transparent;
transform: initial;
cursor: default;
}
/**
* Color primary variations
*/
.c-button--primary {
font-weight: bold;
background-color: #13138a;
}
.c-button--primary, .c-button--primary:link, .c-button--primary:visited {
color: #ffffff;
border-color: transparent;
}
@media (hover: hover) {
.c-button--primary:hover {
color: #ffffff;
background-color: #1d1dcd;
}
}
.c-button--primary:active, .c-button--primary.is-active {
color: #ffffff;
background-color: #1a1ab7;
}
.c-button--primary:disabled {
color: #ffffff;
background-color: #C2C2D1;
border-color: transparent;
transform: initial;
cursor: default;
}
.c-button--primary-inverse {
font-weight: 700;
background: #ffffff;
}
.c-button--primary-inverse, .c-button--primary-inverse:link, .c-button--primary-inverse:visited {
color: #13138a;
border-color: transparent;
}
@media (hover: hover) {
.c-button--primary-inverse:hover {
color: #1d1dcd;
background: #ffffff;
border-color: transparent;
}
}
.c-button--primary-inverse:active, .c-button--primary-inverse.is-active {
color: #1a1ab7;
background: #ffffff;
border-color: transparent;
}
.c-button--primary-inverse:disabled, .c-button--primary-inverse[disabled] {
color: #3B3B6C;
border-color: transparent;
transform: initial;
cursor: default;
}
.c-button--primary-warning {
font-weight: bold;
background-color: #FF8839;
}
.c-button--primary-warning, .c-button--primary-warning:link, .c-button--primary-warning:visited {
color: #ffffff;
border-color: transparent;
}
@media (hover: hover) {
.c-button--primary-warning:hover {
color: #ffffff;
background-color: #ff7f29;
}
}
.c-button--primary-warning:active, .c-button--primary-warning.is-active {
color: #ffffff;
background-color: #ff8431;
}
.c-button--primary-warning:disabled {
color: #ffffff;
background-color: rgba(255, 136, 57, 0.5);
border-color: transparent;
transform: initial;
cursor: default;
}
.c-button--primary-danger {
font-weight: bold;
background-color: #f24242;
}
.c-button--primary-danger, .c-button--primary-danger:link, .c-button--primary-danger:visited {
color: #ffffff;
border-color: transparent;
}
@media (hover: hover) {
.c-button--primary-danger:hover {
color: #ffffff;
background-color: #f23333;
}
}
.c-button--primary-danger:active, .c-button--primary-danger.is-active {
color: #ffffff;
background-color: #f33a3a;
}
.c-button--primary-danger:disabled {
color: #ffffff;
background-color: rgba(242, 66, 66, 0.5);
border-color: transparent;
transform: initial;
cursor: default;
}
/**
* Color link variations
*/
.c-button--primary-link {
background: transparent;
text-decoration: underline;
padding-left: 0;
padding-right: 0;
}
.c-button--primary-link, .c-button--primary-link:link, .c-button--primary-link:visited {
color: #13138a;
border-color: transparent;
text-decoration: underline;
}
@media (hover: hover) {
.c-button--primary-link:hover {
color: #1d1dcd;
border-color: transparent;
background-color: transparent;
text-decoration: underline;
box-shadow: none;
outline: initial;
transform: none;
}
}
.c-button--primary-link:active, .c-button--primary-link.is-active {
color: #1a1ab7;
background-color: transparent;
border-color: transparent;
transform: none;
}
.c-button--primary-link:focus {
color: #1a1ab7;
box-shadow: none;
}
.c-button--primary-link:disabled, .c-button--primary-link[disabled] {
color: rgba(19, 19, 138, 0.5);
border: transparent;
background-color: transparent;
transform: initial;
cursor: default;
}
.c-button--warning-link {
background: transparent;
text-decoration: underline;
padding-left: 0;
padding-right: 0;
}
.c-button--warning-link, .c-button--warning-link:link, .c-button--warning-link:visited {
color: #FF8839;
border-color: transparent;
text-decoration: underline;
}
@media (hover: hover) {
.c-button--warning-link:hover {
color: #ff7f29;
border-color: transparent;
background-color: transparent;
text-decoration: underline;
box-shadow: none;
outline: initial;
transform: none;
}
}
.c-button--warning-link:active, .c-button--warning-link.is-active {
color: #ff8431;
background-color: transparent;
border-color: transparent;
transform: none;
}
.c-button--warning-link:focus {
color: #ff8431;
box-shadow: none;
}
.c-button--warning-link:disabled, .c-button--warning-link[disabled] {
color: rgba(255, 136, 57, 0.5);
border: transparent;
background-color: transparent;
transform: initial;
cursor: default;
}
.c-button--danger-link {
background: transparent;
text-decoration: underline;
padding-left: 0;
padding-right: 0;
}
.c-button--danger-link, .c-button--danger-link:link, .c-button--danger-link:visited {
color: #f24242;
border-color: transparent;
text-decoration: underline;
}
@media (hover: hover) {
.c-button--danger-link:hover {
color: #f23333;
border-color: transparent;
background-color: transparent;
text-decoration: underline;
box-shadow: none;
outline: initial;
transform: none;
}
}
.c-button--danger-link:active, .c-button--danger-link.is-active {
color: #f33a3a;
background-color: transparent;
border-color: transparent;
transform: none;
}
.c-button--danger-link:focus {
color: #f33a3a;
box-shadow: none;
}
.c-button--danger-link:disabled, .c-button--danger-link[disabled] {
color: rgba(242, 66, 66, 0.5);
border: transparent;
background-color: transparent;
transform: initial;
cursor: default;
}
/**
* Fluid button (full-width)
*/
.c-button--fluid {
display: flex;
width: 100%;
}
@media all and (min-width: 576px) {
.c-button--fluid\@small {
display: flex;
width: 100%;
}
.c-button--fluid\@small + .c-button--fluid {
margin-bottom: 10px;
}
}
@media all and (min-width: 768px) {
.c-button--fluid\@medium {
display: flex;
width: 100%;
}
.c-button--fluid\@medium + .c-button--fluid {
margin-bottom: 10px;
}
}
@media all and (min-width: 992px) {
.c-button--fluid\@large {
display: flex;
width: 100%;
}
.c-button--fluid\@large + .c-button--fluid {
margin-bottom: 10px;
}
}
@media all and (min-width: 1200px) {
.c-button--fluid\@xlarge {
display: flex;
width: 100%;
}
.c-button--fluid\@xlarge + .c-button--fluid {
margin-bottom: 10px;
}
}
/**
* Fluid inline (anti - full-width)
*/
.c-button--inline {
display: inline-flex;
width: auto;
margin-bottom: 0;
}
@media all and (min-width: 576px) {
.c-button--inline\@small {
display: inline-flex;
width: auto;
margin-bottom: 0;
}
}
@media all and (min-width: 768px) {
.c-button--inline\@medium {
display: inline-flex;
width: auto;
margin-bottom: 0;
}
}
@media all and (min-width: 992px) {
.c-button--inline\@large {
display: inline-flex;
width: auto;
margin-bottom: 0;
}
}
@media all and (min-width: 1200px) {
.c-button--inline\@xlarge {
display: inline-flex;
width: auto;
margin-bottom: 0;
}
}
/**
* Buttons group
*/
.c-buttons-group {
display: flex;
flex-wrap: wrap;
}
.c-buttons-group > * {
flex-shrink: 0;
}
.c-buttons-group > *:not(:last-child) {
margin-right: 10px;
}
.c-buttons-group--fluid > * {
flex-grow: 1;
}
.c-buttons-group--fluid-evenly > * {
flex-grow: 1;
flex-basis: 0;
}
.c-buttons-group--segmented {
flex-wrap: nowrap;
}
.c-buttons-group--segmented > *:not(:last-child) {
margin-right: -1px;
}
@media (hover: hover) {
.c-buttons-group--segmented > *:hover {
transform: none;
/* Prevent horizontal visual shift between button */
}
}
.c-buttons-group--segmented > *:active {
transform: none;
/* Prevent horizontal visual shift between button */
}
.c-buttons-group--segmented > *:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.c-buttons-group--segmented > *:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.c-card {
display: block;
padding: 20px;
background-color: #ffffff;
background-size: cover;
background-position: center center;
border-radius: 10px;
text-decoration: none;
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), border 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0);
border: 1px solid rgba(10, 10, 71, 0.1);
padding: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin: auto;
max-width: 100%;
}
.c-card > * {
border-top: 1px solid rgba(10, 10, 71, 0.1);
}
.c-card > *:first-child {
border-top: none;
}
.c-card__header:last-child,
.c-card__section:last-child,
.c-card__footer:last-child {
border-bottom: none;
}
.c-card__header:first-child,
.c-card__section:first-child,
.c-card__footer:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.c-card__header:last-child,
.c-card__section:last-child,
.c-card__footer:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.c-card__header {
text-align: left;
padding: 20px 30px;
background: #F3F3F6;
}
.c-card__section {
padding: 30px;
}
.c-card__footer {
padding: 20px 30px;
}
.c-card__title {
font-size: 19px;
line-height: 30px;
margin-top: 0;
font-weight: 700;
text-rendering: optimizeLegibility;
color: #0A0A47;
margin: 0;
}
.c-card__dismiss {
transform: translateX(7px);
}
.c-card--depth-0 {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0);
}
.c-card--depth-1 {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.1);
}
.c-card--depth-2 {
box-shadow: 0 5px 25px -5px rgba(10, 10, 71, 0.15) , 0 10px 15px -15px rgba(10, 10, 71, 0.1);
border: 0;
}
.c-card--depth-3 {
box-shadow: 0 10px 50px -10px rgba(10, 10, 71, 0.25) , 0 20px 30px -30px rgba(10, 10, 71, 0.1);
border: 0;
}
.c-card--s {
font-size: 15px;
line-height: 20px;
}
.c-card--s .c-card__header {
padding: 10px 20px;
}
.c-card--s .c-card__section {
padding: 15px 20px;
}
.c-card--s .c-card__footer {
padding: 15px 20px;
}
.c-card--s .c-card__title {
font-size: 17px;
line-height: 30px;
}
.c-card--danger {
border: 1px solid rgba(242, 66, 66, 0.5);
}
.c-card--danger > * {
border-color: #fef6f6;
}
.c-card--danger.c-card--depth-0 {
box-shadow: 0 0 0px 3px rgba(242, 66, 66, 0.25);
}
.c-card--danger.c-card--depth-1 {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.1), 0 0 0px 3px rgba(242, 66, 66, 0.25);
}
.c-card--danger.c-card--depth-2 {
box-shadow: 0 5px 25px -5px rgba(10, 10, 71, 0.15) , 0 10px 15px -15px rgba(10, 10, 71, 0.1), 0 0 0px 3px rgba(242, 66, 66, 0.25);
}
.c-card--danger.c-card--depth-3 {
box-shadow: 0 10px 50px -10px rgba(10, 10, 71, 0.25) , 0 20px 30px -30px rgba(10, 10, 71, 0.1), 0 0 0px 3px rgba(242, 66, 66, 0.25);
}
.c-card--danger .c-card__header {
color: #f24242;
background-color: #fef6f6;
}
.c-card--danger .c-card__title {
color: inherit;
}
.c-card--warning {
border: 1px solid rgba(255, 136, 57, 0.5);
}
.c-card--warning > * {
border-color: #fff9f5;
}
.c-card--warning.c-card--depth-0 {
box-shadow: 0 0 0px 3px rgba(255, 136, 57, 0.25);
}
.c-card--warning.c-card--depth-1 {
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.1), 0 0 0px 3px rgba(255, 136, 57, 0.25);
}
.c-card--warning.c-card--depth-2 {
box-shadow: 0 5px 25px -5px rgba(10, 10, 71, 0.15) , 0 10px 15px -15px rgba(10, 10, 71, 0.1), 0 0 0px 3px rgba(255, 136, 57, 0.25);
}
.c-card--warning.c-card--depth-3 {
box-shadow: 0 10px 50px -10px rgba(10, 10, 71, 0.25) , 0 20px 30px -30px rgba(10, 10, 71, 0.1), 0 0 0px 3px rgba(255, 136, 57, 0.25);
}
.c-card--warning .c-card__header {
color: #FF8839;
background-color: #fff9f5;
}
.c-card--warning .c-card__title {
color: inherit;
}
.c-card--fill {
height: 100%;
}
.c-card--w300 {
width: 300px;
}
.c-card--w400 {
width: 400px;
}
.c-card--w500 {
width: 500px;
}
.c-card--w600 {
width: 600px;
}
.c-card--w700 {
width: 700px;
}
.c-card--w800 {
width: 800px;
}
.c-checkbox-field__control,
.c-radio-field__control {
display: flex;
}
.c-checkbox-field .c-checkbox-field__input,
.c-radio-field .c-radio-field__input {
margin-right: 0;
}
.c-checkbox-field__label,
.c-radio-field__label {
font-size: 17px;
line-height: 30px;
padding-left: 10px;
}
.c-checkbox-field__inner,
.c-radio-field__inner {
padding-left: 30px;
}
/**
* Size variant: S
*/
.c-checkbox-field.c-checkbox-field--s .c-checkbox-field__label,
.c-radio-field.c-radio-field--s .c-radio-field__label {
font-size: 15px;
line-height: 20px;
padding-left: 10px;
}
.c-checkbox-field.c-checkbox-field--s .c-checkbox-field__inner,
.c-radio-field.c-radio-field--s .c-radio-field__inner {
padding-left: 25px;
}
.c-checkbox-list > *,
.c-radio-list > * {
margin-top: 5px;
margin-bottom: 5px;
}
.c-checkbox-list > *:first-child,
.c-radio-list > *:first-child {
margin-top: 0;
}
.c-checkbox-list > *:last-child,
.c-radio-list > *:last-child {
margin-bottom: 0;
}
.c-checkbox + .c-checkbox__skin,
.c-radio + .c-radio__skin {
display: inline-block;
flex: 0 0 auto;
vertical-align: top;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 0;
width: 20px;
height: 20px;
background-color: #ffffff;
border: 1px solid rgba(10, 10, 71, 0.25);
border-radius: 5px;
background-position: center center;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 30px;
}
/**
* Values
*/
.c-checkbox:checked + .c-checkbox__skin,
.c-radio:checked + .c-radio__skin {
background-color: #1a1ab7;
}
.c-checkbox:indeterminate + .c-checkbox__skin,
.c-radio:indeterminate + .c-radio__skin {
background-color: #1a1ab7;
}
/**
* Interactivity states
*/
/* Active state */
.c-checkbox:active + .c-checkbox__skin,
.c-radio:active + .c-radio__skin {
background-color: #3a3ae3;
}
/* Focus state */
/* Invalid state */
.c-checkbox:invalid + .c-checkbox__skin,
.c-checkbox:invalid + .c-radio__skin,
.c-radio:invalid + .c-checkbox__skin,
.c-radio:invalid + .c-radio__skin,
.c-checkbox.is-invalid + .c-checkbox__skin,
.c-checkbox.is-invalid + .c-radio__skin,
.c-radio.is-invalid + .c-checkbox__skin,
.c-radio.is-invalid + .c-radio__skin {
border-color: rgba(213, 59, 67, 0.625);
}
.c-checkbox:invalid:active + .c-checkbox__skin, .c-checkbox:invalid:active + .c-radio__skin,
.c-radio:invalid:active + .c-checkbox__skin,
.c-radio:invalid:active + .c-radio__skin,
.c-checkbox.is-invalid:active + .c-checkbox__skin,
.c-checkbox.is-invalid:active + .c-radio__skin,
.c-radio.is-invalid:active + .c-checkbox__skin,
.c-radio.is-invalid:active + .c-radio__skin {
background-color: #f33a3a;
}
.c-checkbox:invalid:checked + .c-checkbox__skin, .c-checkbox:invalid:checked + .c-radio__skin, .c-checkbox:invalid:indeterminate + .c-checkbox__skin, .c-checkbox:invalid:indeterminate + .c-radio__skin,
.c-radio:invalid:checked + .c-checkbox__skin,
.c-radio:invalid:checked + .c-radio__skin,
.c-radio:invalid:indeterminate + .c-checkbox__skin,
.c-radio:invalid:indeterminate + .c-radio__skin,
.c-checkbox.is-invalid:checked + .c-checkbox__skin,
.c-checkbox.is-invalid:checked + .c-radio__skin,
.c-checkbox.is-invalid:indeterminate + .c-checkbox__skin,
.c-checkbox.is-invalid:indeterminate + .c-radio__skin,
.c-radio.is-invalid:checked + .c-checkbox__skin,
.c-radio.is-invalid:checked + .c-radio__skin,
.c-radio.is-invalid:indeterminate + .c-checkbox__skin,
.c-radio.is-invalid:indeterminate + .c-radio__skin {
background-color: #f33a3a;
}
.c-checkbox.is-invalid + .c-checkbox__skin ~ .c-label,
.c-radio.is-invalid + .c-radio__skin ~ .c-label,
.c-checkbox:invalid + .c-checkbox__skin ~ .c-label,
.c-radio:invalid + .c-radio__skin ~ .c-label {
color: #f24242;
}
/* Disabled state */
.c-checkbox:disabled + .c-checkbox__skin,
.c-radio:disabled + .c-radio__skin {
background-color: #F3F3F6;
cursor: default;
}
.c-checkbox:disabled + .c-checkbox__skin ~ .c-label,
.c-radio:disabled + .c-radio__skin radiom-label {
color: #C2C2D1;
cursor: default;
}
/* Loading state */
.c-checkbox.is-loading + .c-checkbox__skin,
.c-checkbox:checked.is-loading + .c-checkbox__skin,
.c-checkbox:indeterminate.is-loading + .c-checkbox__skin,
.c-radio.is-loading + .c-radio__skin,
.c-radio:checked.is-loading + .c-radio__skin,
.c-radio:indeterminate.is-loading + .c-radio__skin {
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision' width='24' height='24' viewBox='0 0 24 24' color='%233B3B6C'%3E%3Cstyle%3E@keyframes rotor%7B0%25%7Btransform:rotate(0deg)%7Dto%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Ccircle cx='12' cy='12' r='7.5' fill='none' stroke='currentColor' stroke-width='3' stroke-opacity='.1'/%3E%3Cpath d='M12 4.5a7.5 7.5 0 017.5 7.5' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-opacity='.9' style='transform-box:fill-box;transform-origin:0 100%25;animation:rotor 1000ms linear infinite normal forwards'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 24px;
border: none;
cursor: wait;
}
.c-checkbox--s.is-loading + .c-checkbox__skin,
.c-checkbox--s:checked.is-loading + .c-checkbox__skin,
.c-checkbox--s:indeterminate.is-loading + .c-checkbox__skin,
.c-radio--s.is-loading + .c-radio__skin,
.c-radio--s:checked.is-loading + .c-radio__skin,
.c-radio--s:indeterminate.is-loading + .c-radio__skin {
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision' width='16' height='16' viewBox='0 0 16 16' color='%233B3B6C'%3E%3Cstyle%3E@keyframes rotor%7B0%25%7Btransform:rotate(0deg)%7Dto%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='currentColor' stroke-width='2' stroke-opacity='.1' transform='translate(2 2)'/%3E%3Cpath d='M8 3a5 5 0 015 5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-opacity='.9' style='transform-box:fill-box;transform-origin:0 100%25;animation:rotor 1000ms linear infinite normal forwards'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 16px;
border: none;
cursor: wait;
}
/**
* Size variations
*/
.c-checkbox--s + .c-checkbox__skin,
.c-radio--s + .c-radio__skin {
width: 15px;
height: 15px;
margin-top: 2.5px;
margin-bottom: 2.5px;
}
.c-checkbox:checked + .c-checkbox__skin {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23ffffff'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.703 7.707a1 1 0 0 0-1.414-1.414l-6.291 6.29-2.29-2.29a1 1 0 0 0-1.415 1.414l2.998 2.998a.996.996 0 0 0 1.414 0l6.998-6.998z' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.c-checkbox:indeterminate + .c-checkbox__skin {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23ffffff'%3E%3Crect x='5' y='9' width='10' height='2' rx='1' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.c-checkbox:disabled:checked + .c-checkbox__skin {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23C2C2D1'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.703 7.707a1 1 0 0 0-1.414-1.414l-6.291 6.29-2.29-2.29a1 1 0 0 0-1.415 1.414l2.998 2.998a.996.996 0 0 0 1.414 0l6.998-6.998z' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.c-checkbox:disabled:indeterminate + .c-checkbox__skin {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23C2C2D1'%3E%3Crect x='5' y='9' width='10' height='2' rx='1' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
/**
* Size variations
*/
.c-checkbox--s:checked + .c-checkbox__skin {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23ffffff'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.777 5.78a.75.75 0 0 0-1.06-1.06L5.998 9.438 4.28 7.72a.75.75 0 0 0-1.06 1.06l2.248 2.249a.748.748 0 0 0 1.06 0l5.25-5.249z' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.c-checkbox--s:indeterminate + .c-checkbox__skin {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23ffffff'%3E%3Crect x='3.75' y='6.75' width='7.5' height='1.5' rx='.75' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.c-checkbox--s:disabled:checked + .c-checkbox__skin {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23C2C2D1'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.777 5.78a.75.75 0 0 0-1.06-1.06L5.998 9.438 4.28 7.72a.75.75 0 0 0-1.06 1.06l2.248 2.249a.748.748 0 0 0 1.06 0l5.25-5.249z' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.c-checkbox--s:disabled:indeterminate + .c-checkbox__skin {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23C2C2D1'%3E%3Crect x='3.75' y='6.75' width='7.5' height='1.5' rx='.75' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.c-radio + .c-radio__skin {
border-radius: 50%;
}
.c-radio:checked + .c-radio__skin {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23ffffff'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.c-radio:indeterminate + .c-radio__skin {
background-color: #ffffff;
}
.c-radio:disabled:checked + .c-radio__skin {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23C2C2D1'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.c-radio--s:checked + .c-radio__skin {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23ffffff'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.5 10a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.c-radio--s:disabled:checked + .c-radio__skin {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23C2C2D1'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.5 10a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.c-color-selector {
display: flex;
list-style: none;
padding: 0;
margin: 0;
font-size: 15px;
line-height: 20px;
}
.c-color-selector__item {
margin-right: 10px;
position: relative;
}
.c-color-selector__item:last-child {
margin-right: 0;
}
.c-color-selector__label {
display: block;
height: 30px;
}
.c-color-selector__button {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: white;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(10, 10, 71, 0.1);
cursor: default;
transition: border 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-color-selector__button::-ms-check {
display: none;
/* unstyle IE checkboxes */
}
.c-color-selector__button:focus {
outline: none;
}
.c-color-selector__button:enabled {
cursor: pointer;
}
.c-color-selector__button:disabled {
opacity: 0.5;
}
.c-color-selector__text {
position: absolute;
left: -4px;
top: -4px;
right: -4px;
bottom: -4px;
border: 2px solid #13138a;
border-radius: 50%;
opacity: 0;
transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
pointer-events: none;
font-size: 0;
color: transparent;
}
.c-color-selector__button:checked + .c-color-selector__text {
opacity: 1;
}
.c-color-selector__button:checked:disabled + .c-color-selector__text {
opacity: 0.5;
}
.c-color-selector__button:enabled {
border-color: rgba(10, 10, 71, 0.25);
}
@media (hover: hover) {
.c-color-selector__button:hover {
border-color: rgba(10, 10, 71, 0.25);
}
}
.c-company-logo {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
border: 1px solid rgba(10, 10, 71, 0.25);
border-radius: 5px;
padding: 2px;
overflow: hidden;
}
.c-company-logo__img {
max-width: 100%;
height: auto;
max-height: 100%;
width: auto;
}
/** Size variants **/
.c-company-logo--m {
width: 75px;
height: 75px;
}
.c-company-logo--s {
width: 40px;
height: 40px;
}
.c-company-logo--xs {
width: 30px;
height: 30px;
}
.c-company-logo--icon-m {
width: 24px;
height: 24px;
}
.c-company-logo--icon-l {
width: 32px;
height: 32px;
}
.c-device {
display: block;
position: relative;
/* positioning context */
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
height: 0;
overflow: hidden;
}
.c-device__screen {
position: absolute;
overflow: hidden;
}
.c-device__screen > * {
-o-object-fit: cover;
object-fit: cover;
}
.c-device--apple-ipad-air-2-silver {
padding-top: 71.4743589744%;
background-image: url("/images/components/device/apple-ipad/air-2-silver.png");
}
.c-device--apple-ipad-air-2-silver .c-device__screen {
top: 6.2780269058%;
right: 8.9743589744%;
bottom: 7.6233183857%;
left: 8.9743589744%;
}
.c-device--apple-ipad-air-2-space-gray {
padding-top: 71.4743589744%;
background-image: url("/images/components/device/apple-ipad/air-2-space-gray.png");
}
.c-device--apple-ipad-air-2-space-gray .c-device__screen {
top: 6.2780269058%;
right: 8.9743589744%;
bottom: 7.6233183857%;
left: 8.9743589744%;
}
.c-device--microsoft-surface-pro-3 {
padding-top: 69.7632058288%;
background-image: url("/images/components/device/microsoft-surface/pro-3.png");
}
.c-device--microsoft-surface-pro-3 .c-device__screen {
top: 7.637075718%;
right: 6.2841530055%;
bottom: 8.8120104439%;
left: 6.2841530055%;
}
.c-device--dell-ultrasharp-monitor-24 {
padding-top: 82.5734549139%;
background-image: url("/images/components/device/dell-ultrasharp-monitor/24-inches.png");
}
.c-device--dell-ultrasharp-monitor-24 .c-device__screen {
top: 1.472392638%;
right: 1.367781155%;
bottom: 24.7239263804%;
left: 1.367781155%;
}
/**
* Applied to
-
*/
.c-divider {
flex: none;
}
.c-footer {
flex-grow: 1;
overflow-x: hidden;
padding: 0 20px;
color: #ffffff;
background-color: #0A0A47;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1414' height='1360' xmlns='http://www.w3.org/2000/svg' color='currentcolor'%3E%3Cdefs%3E%3ClinearGradient x1='2.594%25' y1='18.397%25' x2='73.493%25' y2='110.996%25' id='a'%3E%3Cstop stop-color='%23FAFBFF' stop-opacity='.1' offset='0%25'/%3E%3Cstop stop-color='%23FAFBFF' stop-opacity='0' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1273.951 201.521c393.914 369.31-177.62 501.37-88.288 719.917 89.331 218.548-66.64 335.152-222.002 386.17-416.465 128.96-690.28 15.475-821.447-340.453-196.748-533.892-222.71-710.673 137.689-806.362C640.3 65.103 880.037-167.788 1273.95 201.52z' fill='url(%23a)' fill-rule='evenodd'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 40px center;
}
@media all and (min-width: 768px) {
.c-footer {
padding-left: 40px;
padding-right: 40px;
background-position: center center;
}
}
.c-footer__sub {
color: #ffffff;
font-size: 15px;
padding-top: 60px;
}
@media all and (min-width: 768px) {
.c-footer__sub {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
}
.c-footer__sub-links {
display: flex;
justify-content: center;
padding: 0;
margin: 0;
margin-bottom: 15px;
list-style: none;
}
@media all and (min-width: 768px) {
.c-footer__sub-links {
margin-bottom: 0;
}
}
.c-footer__sub-links-item {
padding-left: 5px;
padding-right: 5px;
}
.c-footer__sub-links-item:first-child {
padding-left: 0;
}
.c-footer__sub-links-item:last-child {
padding-right: 0;
}
.c-footer__sub-copyright {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
opacity: 0.5;
white-space: nowrap;
}
.c-footer__sub-legal-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0;
margin: 0;
margin-top: 30px;
margin-bottom: 30px;
margin-right: auto;
list-style: none;
}
@media all and (min-width: 768px) {
.c-footer__sub-legal-links {
margin-left: 30px;
margin-top: 0;
margin-bottom: 0;
}
}
.c-footer__sub-legal-links-item {
padding-left: 5px;
padding-right: 5px;
opacity: 0.5;
white-space: nowrap;
}
.c-footer__sub-legal-links-item:first-child {
padding-left: 0;
}
.c-footer__sub-legal-links-item:last-child {
padding-right: 0;
}
.c-footer__sub-legal-links-item a {
color: inherit;
}
/**
* Base styles
*/
h1, h2, h3, h4, h5, h6,
.c-heading,
.c-sub-heading {
margin-top: 0;
font-weight: 700;
text-rendering: optimizeLegibility;
text-transform: inherit;
letter-spacing: 0;
color: #0A0A47;
}
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after,
.c-heading::after,
.c-sub-heading::after {
display: none;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.c-heading a,
.c-sub-heading a {
color: inherit;
}
@media (hover: hover) {
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.c-heading a:hover,
.c-sub-heading a:hover {
text-decoration: underline;
}
}
.c-heading--left {
text-align: left;
}
.c-heading--center {
text-align: center;
}
/**
* Heading component also apply default styles to h1, h2, h3,… HTML tags.
*/
.c-heading--5xl {
font-size: 32px;
line-height: 45px;
margin-bottom: 30px;
}
@media all and (min-width: 768px) {
.c-heading--5xl {
font-size: 52px;
line-height: 70px;
}
}
h1,
.c-heading--4xl {
font-size: 32px;
line-height: 45px;
margin-bottom: 30px;
}
@media all and (min-width: 768px) {
h1,
.c-heading--4xl {
font-size: 40px;
line-height: 55px;
}
}
h2,
.c-heading--3xl {
font-size: 32px;
line-height: 45px;
margin-bottom: 30px;
}
h3,
.c-heading--2xl {
font-size: 26px;
line-height: 40px;
margin-bottom: 30px;
}
h4,
.c-heading--xl {
font-size: 21px;
line-height: 35px;
margin-bottom: 30px;
}
h5,
.c-heading--l {
font-size: 19px;
line-height: 30px;
margin-bottom: 10px;
}
h6,
.c-heading--m {
font-size: 17px;
line-height: 30px;
margin-bottom: 0;
}
.c-heading--s {
font-size: 15px;
line-height: 20px;
margin-bottom: 0;
}
.c-heading--xs {
font-size: 13px;
line-height: 15px;
margin-bottom: 0;
}
.c-heading--2xs {
font-size: 11px;
line-height: 15px;
margin-bottom: 0;
}
/* @DEPRECATED */
.c-sub-heading {
display: block;
margin-bottom: 5px;
color: #8484A3;
font-weight: 400;
font-size: 17px;
line-height: 30px;
}
/**
* Base styles
*/
.c-heading-uc {
margin-top: 0;
margin-bottom: 0;
font-weight: 700;
text-rendering: optimizeLegibility;
text-transform: uppercase;
color: #8484A3;
}
.c-heading-uc a {
color: inherit;
}
@media (hover: hover) {
.c-heading-uc a:hover {
text-decoration: underline;
}
}
/**
* Size-variants
*/
.c-heading-uc--3xl {
font-size: 27.2px;
line-height: 45px;
letter-spacing: 0.025em;
}
.c-heading-uc--2xl {
font-size: 22.1px;
line-height: 40px;
letter-spacing: 0.03em;
}
.c-heading-uc--xl {
font-size: 17.85px;
line-height: 35px;
letter-spacing: 0.04em;
}
.c-heading-uc--l {
font-size: 16.15px;
line-height: 30px;
letter-spacing: 0.04em;
}
.c-heading-uc--m {
font-size: 14.45px;
line-height: 30px;
letter-spacing: 0.04em;
}
.c-heading-uc--s {
font-size: 12.75px;
line-height: 20px;
letter-spacing: 0.045em;
}
.c-heading-uc--xs {
font-size: 11.05px;
line-height: 15px;
letter-spacing: 0.05em;
}
.c-heading-uc--2xs {
font-size: 9.35px;
line-height: 15px;
letter-spacing: 0.05em;
}
.c-helper {
font-size: 15px;
line-height: 20px;
color: #606087;
margin-top: 10px;
margin-bottom: 0;
}
.c-helper * {
margin-top: 0;
margin-bottom: 0;
}
/* Variants */
.c-helper--warning {
color: #FF8839;
}
.c-helper--danger {
color: #f24242;
}
.c-helper--invalid {
color: #f24242;
}
.c-icon {
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
margin-top: -1px;
/* Optical correction */
line-height: 0;
min-width: auto;
/* IE11 fix: Prevent shrinking when used as flex child */
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
/* In case we animate icons transform they will transition by default */
opacity: 0.9;
}
.c-icon .c-icon__svg {
width: 24px;
height: 24px;
}
.c-icon--xs .c-icon__svg {
width: 12px;
height: 12px;
}
.c-icon--s .c-icon__svg {
width: 16px;
height: 16px;
}
.c-icon--l .c-icon__svg {
width: 32px;
height: 32px;
}
.c-icon--36 .c-icon__svg {
/** @deprecated size **/
width: 36px;
height: 36px;
}
.c-icon--xl .c-icon__svg {
width: 40px;
height: 40px;
}
.c-icon--2xl .c-icon__svg {
width: 75px;
height: 75px;
}
/* VARIANTS */
.c-icon--rotate-right {
transform: rotate(90deg);
}
.c-icon--rotate-left {
transform: rotate(-90deg);
}
.c-icon--rotate-180 {
transform: rotate(180deg);
}
.c-icon--mirror-h {
transform: scaleX(-1);
}
.c-icon--mirror-v {
transform: scaleY(-1);
}
.c-input-group {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.c-input-group > * {
flex: 1 1 0px;
/* Keep px unit on basis value for IE 11 */
}
.c-input-group > *:not(:last-child) {
margin-right: 10px;
}
@media all and (min-width: 768px) {
.c-input-group > *:not(:last-child) {
margin-right: 10px;
}
}
.c-input-group > .c-input-group__no-resize {
z-index: 1;
flex: 0 0 auto;
}
/**
* Segmented variant
*/
/**
* Base styles
*/
.c-input {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
align-items: center;
flex-shrink: 1;
width: 100%;
min-height: 50px;
padding: 9px 19px;
font-size: 17px;
font-weight: 500;
line-height: 30px;
color: #606087;
background-color: #ffffff;
background-clip: padding-box;
border: 1px solid #C2C2D1;
max-width: 100%;
/* useful when width is set to anything other than 100% */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 25px;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-input::-moz-placeholder {
color: #C2C2D1;
opacity: 1;
/* Firefox */
}
.c-input:-ms-input-placeholder {
color: #C2C2D1;
opacity: 1;
/* Firefox */
}
.c-input::placeholder {
color: #C2C2D1;
opacity: 1;
/* Firefox */
}
.c-input:focus, .c-input:focus-within {
color: #3B3B6C;
border-color: rgba(52, 163, 232, 0.625);
}
.c-input.is-invalid {
color: #f24242;
border-color: rgba(213, 59, 67, 0.625);
}
.c-input:disabled, .c-input.is-disabled {
color: #C2C2D1;
background-color: #F3F3F6;
cursor: default;
}
/**
* Size and padding variations
*/
.c-input--s {
font-size: 15px;
line-height: 20px;
padding: 9px 14px;
min-height: 40px;
border-radius: 20px;
}
.c-input--l {
font-size: 19px;
line-height: 30px;
padding: 14px 24px;
min-height: 60px;
border-radius: 30px;
}
/**
* Naked variant
*
* Display the input without box effect (no padding and border) and remove focus
*/
.c-input--naked {
padding: 0;
background-color: transparent;
border: 0;
margin: 0;
border-radius: 0;
min-height: 30px;
}
.c-input--naked:focus, .c-input--naked:focus-within, .c-input--naked.is-invalid:focus, .c-input--naked.is-invalid:focus-within {
box-shadow: none;
outline: 0;
}
.c-input--naked.c-input--s {
min-height: 20px;
}
.c-input--naked.c-input--l {
min-height: 30px;
}
/**
* Tags variant
*
* Display the input with some adjustements for tags
*/
.c-input--tags {
padding: 5px;
padding-bottom: 0;
flex-wrap: wrap;
}
.c-input--tags > * {
margin-right: 5px;
margin-bottom: 5px;
}
.c-input--tags .c-input--tags__input {
width: auto;
flex-grow: 1;
padding: 5px 0;
padding-left: 10px;
min-width: 200px;
}
.c-input--tags * + .c-input--tags__input {
margin-left: -5px;
}
/**
* Prefix and Suffix
*
* To use prefix and suffix you need to apply the c-input class to a wrapper div
* and inside you add a c-input.c-input--naked input field with sibling prefix and suffix elements
*
*/
.c-input__prefix,
.c-input__suffix {
flex-shrink: 0;
height: 30px;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
color: inherit;
padding: 0;
}
.c-input--s .c-input__prefix,
.c-input--s .c-input__suffix {
height: 20px;
}
.c-input--l .c-input__prefix,
.c-input--l .c-input__suffix {
height: 30px;
}
.c-input__prefix {
margin-right: 5px;
order: -1;
}
.c-input__suffix {
margin-left: 5px;
order: 1;
}
/* The 'shift' variant is used to align square or round element (icons, avatars, etc) properly with the pill effect */
.c-input__prefix--shift {
padding: 0;
min-width: 48px;
margin-right: 0;
margin-left: -19px;
}
.c-input--s .c-input__prefix--shift {
min-width: 38px;
margin-left: -14px;
}
.c-input--l .c-input__prefix--shift {
min-width: 58px;
margin-left: -24px;
}
.c-input__suffix--shift {
padding: 0;
min-width: 48px;
margin-left: 0;
margin-right: -19px;
}
.c-input--s .c-input__suffix--shift {
min-width: 38px;
margin-right: -14px;
}
.c-input--l .c-input__suffix--shift {
min-width: 58px;
margin-right: -24px;
}
.c-integration-logo {
display: block;
}
.c-integration-logo__img {
width: 100%;
}
/** Size variants **/
.c-integration-logo--m {
display: inline-block;
width: 75px;
}
.c-integration-logo--s {
display: inline-block;
width: 40px;
}
.c-integration-logo--xs {
display: inline-block;
width: 30px;
}
.c-integration-logo--2xs {
display: inline-block;
width: 20px;
}
.c-integration {
display: flex;
flex-wrap: nowrap;
justify-content: stretch;
align-items: center;
}
.c-integration > * {
margin-left: 20px;
}
.c-integration > *:first-child {
margin-left: 0;
}
.c-integration__logo {
align-self: center;
flex: 0 0 auto;
}
.c-integration__body {
flex: 1 1 auto;
color: #8484A3;
}
.c-integration__title {
margin: 0;
line-height: 25px;
}
.c-integration__desc {
margin: 0;
}
.c-integration__price {
line-height: 25px !important;
}
:root {
--kiosk-preview-text-color: #FFFFFF;
--kiosk-preview-accent-color: #0A0A47;
}
/**
* Base styles
*/
.c-kiosk-preview {
color: var(--kiosk-preview-text-color);
background-color: var(--kiosk-preview-accent-color);
background-position: center center;
background-size: cover;
}
.c-kiosk-preview__svg {
width: 100%;
height: auto;
}
.c-kiosk-preview__svg * {
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
/**
* IE disabled
*/
.c-kiosk-preview__ie {
display: none;
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.c-kiosk-preview {
position: relative;
width: 100%;
padding-bottom: 75%;
font-size: 15px;
line-height: 20px;
color: #606087;
background-color: #C2C2D1;
background-image: none;
}
.c-kiosk-preview__ie {
position: absolute;
display: block;
top: 50%;
width: 100%;
text-align: center;
}
.c-kiosk-preview__ie > * {
transform: translate(0, -50%);
padding: 0 30px;
}
.c-kiosk-preview__svg {
display: none;
}
}
/**
* Elements
*/
.c-kiosk-preview__wrapper {
font-family: "Circular", "Helvetica Neue", Arial, Helvetica, sans-serif;
padding: 10px;
width: 100%;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c-kiosk-preview__welcome-title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
cursor: default;
width: 100%;
height: 100%;
}
.c-kiosk-preview__welcome-text {
color: var(--kiosk-preview-text-color);
font-size: 23px;
line-height: 26px;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 100%;
}
.c-kiosk-preview__welcome-l1 {
font-weight: bold;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.c-kiosk-preview__welcome-l2 {
max-width: 100%;
max-height: 80px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.c-kiosk-preview__welcome-button {
display: inline-block;
font-size: 10px;
font-weight: bold;
padding: 0 10px;
border-radius: 13px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--kiosk-preview-text-color);
color: var(--kiosk-preview-accent-color);
margin-top: 15px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
min-width: 90px;
}
.c-kiosk-preview__welcome-buttons-top {
display: flex;
justify-content: flex-start;
align-items: center;
}
.c-kiosk-preview__welcome-buttons-bottom {
display: flex;
justify-content: flex-start;
align-items: center;
}
.c-kiosk-preview__button {
display: flex;
justify-content: stretch;
align-items: center;
height: 8px;
max-width: 0;
}
.c-kiosk-preview__button-dot {
width: 8px;
height: 8px;
border-radius: 2px;
background-color: var(--kiosk-preview-text-color);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
}
.c-kiosk-preview__button-line {
flex: 1 0 auto;
height: 4px;
border-radius: 2px;
margin-left: 4px;
background-color: var(--kiosk-preview-text-color);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
}
.c-kiosk-preview__button-check-in {
width: 40px;
}
.c-kiosk-preview__button-delivery {
width: 60px;
}
.c-kiosk-preview__button-check-out {
width: 50px;
}
.c-kiosk-preview__button-languages {
width: 60px;
margin-left: auto;
}
.c-kiosk-preview__welcome-qr-code-scanner {
opacity: 0;
transform: translateX(150px);
color: var(--kiosk-preview-text-color);
}
.c-kiosk-preview__welcome-qr-code {
opacity: 0;
transform: translateX(150px);
color: #FFFFFF;
}
/**
* Blur QR code variant
*/
.c-kiosk-preview__welcome-qr-code-image {
filter: none;
}
.c-kiosk-preview--blur-qr-code .c-kiosk-preview__welcome-qr-code-image {
filter: url("#qr-code-filter-qr-code-blur");
}
/**
* States
*/
.c-kiosk-preview.has-languages .c-kiosk-preview__button-languages {
max-width: 100px;
}
.c-kiosk-preview.has-delivery .c-kiosk-preview__button-delivery {
max-width: 100px;
margin-right: 15px;
}
.c-kiosk-preview.has-check-out .c-kiosk-preview__button-check-out {
max-width: 100px;
margin-right: 15px;
}
.c-kiosk-preview.has-qr-code-scanner .c-kiosk-preview__welcome-qr-code-scanner {
opacity: 1;
transform: translateX(0);
}
.c-kiosk-preview.has-qr-code-scanner .c-kiosk-preview__welcome-title {
max-width: 50%;
}
.c-kiosk-preview.has-qr-code-scanner .c-kiosk-preview__welcome-qr-code {
opacity: 0;
transform: translateX(-400px);
}
.c-kiosk-preview.has-qr-code .c-kiosk-preview__welcome-qr-code {
opacity: 1;
transform: translateX(0);
}
.c-kiosk-preview.has-qr-code .c-kiosk-preview__welcome-title {
max-width: 50%;
}
.c-kiosk-preview.has-qr-code-scanner.has-qr-code .c-kiosk-preview__button-check-in {
max-width: 100px;
margin-right: 15px;
}
.c-kiosk-preview.has-qr-code-scanner.has-qr-code .c-kiosk-preview__welcome-qr-code {
transform: translateX(-201px);
}
.c-kiosk-preview.has-qr-code-scanner.has-qr-code .c-kiosk-preview__welcome-title {
width: 100%;
max-width: 100%;
align-items: stretch;
justify-content: flex-start;
}
.c-kiosk-preview.has-qr-code-scanner.has-qr-code .c-kiosk-preview__welcome-text {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: center !important;
}
.c-kiosk-preview.has-qr-code-scanner.has-qr-code .c-kiosk-preview__welcome-l1,
.c-kiosk-preview.has-qr-code-scanner.has-qr-code .c-kiosk-preview__welcome-l2 {
display: inline;
font-weight: bold;
}
.c-kiosk-preview.has-qr-code-scanner.has-qr-code .c-kiosk-preview__welcome-button {
max-height: 0;
margin-top: 0;
overflow: hidden;
}
/**
* Base styles
*/
.c-label {
display: inline-block;
vertical-align: baseline;
padding: 10px 0;
font-size: 17px;
font-weight: 700;
line-height: 30px;
color: rgba(10, 10, 71, 0.8);
cursor: unset;
}
.c-label[for] {
cursor: pointer;
}
.c-label--required::after {
content: " *";
color: #3AB9FF;
}
/**
* Size and padding variations
*/
.c-label--xs {
padding: 0;
font-size: 13px;
line-height: 15px;
}
.c-label--s {
padding: 10px 0;
font-size: 15px;
line-height: 20px;
}
.c-label--l {
padding: 15px 0;
font-size: 19px;
line-height: 30px;
}
/**
* Label for checkboxes and radio buttons
*/
.c-label--checkbox,
.c-label--radio,
.c-label--inline {
display: inline;
padding: 0;
font-weight: 500;
cursor: pointer;
}
.c-link {
color: #13138a;
text-decoration: none;
cursor: pointer;
}
.c-link:link {
color: #13138a;
}
.c-link:visited {
color: #3e3e92;
}
.c-link.c-link--no-history:visited {
color: #13138a;
}
@media (hover: hover) {
.c-link:hover, .is-interactive:hover .c-link, .c-link:visited:hover, .is-interactive:visited:hover .c-link {
color: #1d1dcd;
text-decoration: underline;
}
}
.c-link:active, .is-interactive:active .c-link, .c-link:visited:active, .is-interactive:visited:active .c-link {
color: #1a1ab7;
text-decoration: underline;
}
.c-link.c-link--muted {
color: #606087;
}
.c-link.c-link--muted:link {
color: #606087;
}
.c-link.c-link--muted:visited {
color: #8484A3;
}
.c-link.c-link--muted.c-link--no-history:visited {
color: #606087;
}
@media (hover: hover) {
.c-link.c-link--muted:hover, .is-interactive:hover .c-link.c-link--muted, .c-link.c-link--muted:visited:hover, .is-interactive:visited:hover .c-link.c-link--muted {
color: #1d1dcd;
}
}
.c-link.c-link--muted:active, .is-interactive:active .c-link.c-link--muted, .c-link.c-link--muted:visited:active, .is-interactive:visited:active .c-link.c-link--muted {
color: #1a1ab7;
}
.c-link.c-link--primary {
color: #13138a;
}
.c-link.c-link--primary:link {
color: #13138a;
}
.c-link.c-link--primary:visited {
color: #3e3e92;
}
.c-link.c-link--primary.c-link--no-history:visited {
color: #13138a;
}
@media (hover: hover) {
.c-link.c-link--primary:hover, .is-interactive:hover .c-link.c-link--primary, .c-link.c-link--primary:visited:hover, .is-interactive:visited:hover .c-link.c-link--primary {
color: #1d1dcd;
}
}
.c-link.c-link--primary:active, .is-interactive:active .c-link.c-link--primary, .c-link.c-link--primary:visited:active, .is-interactive:visited:active .c-link.c-link--primary {
color: #1a1ab7;
}
.c-link.c-link--inverse {
color: #ffffff;
}
.c-link.c-link--inverse:link {
color: #ffffff;
}
.c-link.c-link--inverse:visited {
color: #8989c5;
}
.c-link.c-link--inverse.c-link--no-history:visited {
color: #ffffff;
}
@media (hover: hover) {
.c-link.c-link--inverse:hover, .is-interactive:hover .c-link.c-link--inverse, .c-link.c-link--inverse:visited:hover, .is-interactive:visited:hover .c-link.c-link--inverse {
color: #ffffff;
opacity: 0.85;
}
}
.c-link.c-link--inverse:active, .is-interactive:active .c-link.c-link--inverse, .c-link.c-link--inverse:visited:active, .is-interactive:visited:active .c-link.c-link--inverse {
color: #ffffff;
opacity: 1;
}
.c-link.c-link--inherit {
color: inherit;
}
.c-link.c-link--inherit:link {
color: inherit;
}
.c-link.c-link--inherit:visited {
color: inherit;
}
.c-link.c-link--inherit.c-link--no-history:visited {
color: inherit;
}
@media (hover: hover) {
.c-link.c-link--inherit:hover, .is-interactive:hover .c-link.c-link--inherit, .c-link.c-link--inherit:visited:hover, .is-interactive:visited:hover .c-link.c-link--inherit {
color: #1d1dcd;
}
}
.c-link.c-link--inherit:active, .is-interactive:active .c-link.c-link--inherit, .c-link.c-link--inherit:visited:active, .is-interactive:visited:active .c-link.c-link--inherit {
color: #1a1ab7;
}
.c-link--underline {
text-decoration: underline !important;
}
.c-link--no-underline, .c-link--no-underline:link {
text-decoration: none !important;
}
.c-link--next,
.c-link--prev {
transition: none;
}
.c-link--next .c-link__icon {
transform: translateX(0.15em);
}
.c-link--prev .c-link__icon {
transform: translateX(-0.15em);
}
.c-link__icon {
color: inherit;
}
.c-link--prev.c-link--muted .c-link__icon,
.c-link--next.c-link--muted .c-link__icon {
color: inherit;
}
@media (hover: hover) {
.c-link--next:hover .c-link__icon,
.is-interactive:hover .c-link--next .c-link__icon {
transform: translateX(0.3em);
color: inherit;
}
}
.c-link--prev:hover .c-link__icon,
.is-interactive:hover .c-link--prev .c-link__icon {
transform: translateX(-0.3em);
color: inherit;
}
.c-list--bare,
.c-list--commas,
.c-list--row,
.c-list--inline,
.c-list--lined {
list-style: none;
padding: 0;
}
.c-list--lined {
border-top: 1px solid #E6E6EC;
border-bottom: 1px solid #E6E6EC;
}
.c-list--lined > li {
border-bottom: 1px solid #E6E6EC;
padding-top: 5px;
padding-bottom: 5px;
}
.c-list--lined > li:last-child {
border-bottom: 0;
}
.c-list--inline > li {
display: inline-block;
}
.c-list--row {
display: flex;
}
.c-list--commas > li {
display: inline-block;
}
.c-list--commas > li:after {
content: ", ";
}
.c-list--commas > li:last-child:after {
content: "";
}
.c-lottie_svg {
width: auto !important;
height: auto !important;
max-width: 100% !important;
}
.c-marker-chip {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
font-weight: 700;
color: #ffffff;
font-size: 16px;
line-height: 1;
min-width: 30px;
height: 30px;
border-radius: 50%;
padding: 0 0.35em;
background-color: #0A0A47;
vertical-align: middle;
text-align: center;
margin-top: -1px;
}
.c-marker-chip__label {
flex: 1 1 auto;
}
.c-marker-chip--s {
font-size: 12px;
min-width: 20px;
height: 20px;
}
.c-marker-chip--l {
font-size: 18px;
min-width: 40px;
height: 40px;
}
.c-marker-chip--xl {
font-size: 25px;
min-width: 50px;
height: 50px;
}
.c-image-fluid {
max-width: 100%;
height: auto;
}
.c-image-fluid--block {
display: block;
max-width: 100%;
height: auto;
}
.c-image-fit {
display: block;
}
.c-image-fit > img {
display: block;
max-width: 100%;
height: auto;
}
@supports ((-o-object-fit: scale-down) or (object-fit: scale-down)) {
.c-image-fit {
position: relative;
/* positioning context */
padding-top: 56.25%;
/* 16/9 by default */
height: 0;
overflow: hidden;
}
.c-image-fit > img {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
-o-object-fit: scale-down;
object-fit: scale-down;
}
}
.c-image-fit--rounded {
border-radius: 10px;
}
@supports ((-o-object-fit: scale-down) or (object-fit: scale-down)) {
.c-image-fit--4-3 {
padding-top: 75%;
/* 4/3 */
}
.c-image-fit--square {
padding-top: 100%;
}
.c-image-fit--contain img {
-o-object-fit: contain;
object-fit: contain;
}
.c-image-fit--cover img {
-o-object-fit: cover;
object-fit: cover;
}
.c-image-fit--fill img {
-o-object-fit: fill;
object-fit: fill;
}
}
.c-image-fill {
width: 100%;
background-color: #F3F3F6;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.c-image-fill::before {
content: "";
display: block;
padding-top: 56.25%;
}
.c-image-fill--4-3::before {
padding-top: 75%;
}
.c-image-fill--square::before {
padding-top: 100%;
}
.c-image-fill--full {
min-width: 100%;
min-height: 100%;
}
.c-image-fill--full::before {
padding-top: 0;
}
.c-image-fill--rounded {
border-radius: 10px;
}
.c-video-fluid {
display: block;
width: 100%;
max-width: 100%;
}
/**
* Using the padding hack to preserve aspect ratio
*/
.c-video-fluid-embed {
position: relative;
/* positioning context */
padding-top: 56.25%;
/* 16/9 by default */
height: 0;
overflow: hidden;
width: 100%;
}
.c-video-fluid-embed iframe,
.c-video-fluid-embed object,
.c-video-fluid-embed embed,
.c-video-fluid-embed .c-video-fluid-embed__video-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.c-menu {
display: flex;
flex-direction: column;
font-size: 17px;
line-height: 30px;
font-weight: 500;
margin: 10px 0;
}
.c-menu__item {
display: block;
padding: 5px 25px;
text-decoration: none;
color: #3B3B6C;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
a.c-menu__item:link {
color: #3B3B6C;
}
a.c-menu__item:visited {
color: #3B3B6C;
}
@media (hover: hover) {
a.c-menu__item:hover {
color: #1d1dcd;
text-decoration: none;
background-color: #f4f4fd;
}
}
a.c-menu__item:active {
color: #1a1ab7;
}
.c-menu__item.is-active,
a.c-menu__item:active,
a.c-menu__item:focus {
text-decoration: none;
color: #1a1ab7;
background-color: #f4f4fb;
outline: 0;
}
@media (hover: hover) {
.c-menu__item.is-active:hover {
text-decoration: none;
color: #1a1ab7;
background-color: #f4f4fb;
outline: 0;
}
}
.c-menu__divider {
margin: 10px 0;
}
.c-menu--s {
font-size: 15px;
line-height: 20px;
margin: 10px 0;
}
.c-menu--s .c-menu__item {
padding: 5px 20px;
}
.c-menu--s .c-menu__divider {
margin: 10px 0;
}
.c-menu--xs {
font-size: 13px;
line-height: 15px;
margin: 5px 0;
}
.c-menu--xs .c-menu__item {
padding: 5px 10px;
}
.c-menu--xs .c-menu__divider {
margin: 5px 0;
}
.c-nav-bar {
min-height: 76px;
}
.c-nav-bar__wrapper {
border-bottom: 1px solid transparent;
padding: 0 20px;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
background-color: transparent;
z-index: 500;
transition: box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media all and (min-width: 768px) {
.c-nav-bar__wrapper {
padding: 0 40px;
}
}
.c-nav-bar__product {
display: flex;
margin-right: auto;
padding-right: 15px;
}
/**
* Brand
*/
.c-nav-bar__brand {
display: flex;
height: 75px;
padding-right: 15px;
align-items: center;
}
@media all and (min-width: 768px) {
.c-nav-bar__brand {
height: 75px;
}
}
.c-nav-bar__brand-name {
display: none;
}
.c-nav-bar__brand-icon {
display: flex;
}
@media all and (min-width: 768px) {
.c-nav-bar__brand-icon {
display: none;
}
}
.c-nav-bar__brand-logo {
display: none;
}
@media all and (min-width: 768px) {
.c-nav-bar__brand-logo {
display: flex;
}
}
/**
* Property
*/
.c-nav-bar__property {
display: flex;
align-items: center;
font-weight: bold;
font-size: 19px;
line-height: 30px;
color: #26DB8E;
text-decoration: none;
margin-left: -5px;
}
.c-nav-bar__property:link, .c-nav-bar__property:visited {
color: #26DB8E;
}
@media (hover: hover) {
.c-nav-bar__property:hover {
text-decoration: underline;
}
}
@media all and (min-width: 768px) {
.c-nav-bar__property {
margin-left: -5px;
}
}
.c-nav-bar__property-label {
padding-left: 10px;
border-left: 2px solid #E6E6EC;
}
/**
* Buttons
*/
.c-nav-bar__toggle {
color: #13138a;
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
order: 999;
z-index: 1;
border: 0;
padding: 0;
background: transparent;
padding-left: 20px;
cursor: pointer;
}
.c-nav-bar__toggle:focus {
outline: 0;
}
@media all and (min-width: 992px) {
.c-nav-bar__toggle {
display: none;
}
}
.c-nav-bar__toggle-icon {
position: relative;
display: block;
width: 30px;
height: 30px;
}
.c-nav-bar__toggle-icon::before, .c-nav-bar__toggle-icon::after {
position: absolute;
content: "";
background: #13138a;
top: 13.5px;
height: 3px;
left: 3px;
width: 24px;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-nav-bar__toggle-icon::before {
transform: translate(0, -3px);
}
.c-nav-bar__toggle-icon::after {
transform: translate(0, 3px);
}
.is-open .c-nav-bar__toggle-icon::before {
transform: rotate(45deg);
}
.is-open .c-nav-bar__toggle-icon::after {
transform: rotate(-45deg);
}
.c-nav-bar__toggle-label {
display: none;
padding-right: 5px;
opacity: 1;
font-weight: bold;
font-size: 17px;
line-height: 30px;
}
.c-nav-bar__menu {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.c-nav-bar__menu-item-link {
font-size: 17px;
line-height: 30px;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
align-items: center;
border-radius: 30px;
display: flex;
font-weight: bold;
text-decoration: none;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
white-space: nowrap;
}
.c-nav-bar__menu-item-link:link, .c-nav-bar__menu-item-link:visited {
color: rgba(10, 10, 71, 0.8);
}
@media (hover: hover) {
.c-nav-bar__menu-item-link:hover {
color: #1d1dcd;
text-decoration: none;
}
}
.c-nav-bar__menu-item-link:active {
color: #1a1ab7;
}
@media (hover: hover) {
.c-nav-bar__menu:hover > .c-nav-bar__menu-item > .c-nav-bar__menu-item-link {
color: rgba(10, 10, 71, 0.5);
}
.c-nav-bar__menu:hover > .c-nav-bar__menu-item > .c-nav-bar__menu-item-link:hover {
color: #1d1dcd;
}
.c-nav-bar__menu:hover > .c-nav-bar__menu-item > .c-nav-bar__menu-item-link:active {
color: #1a1ab7;
}
}
.c-nav-bar__menu-item.is-active .c-nav-bar__menu-item-link {
color: #1a1ab7;
}
.c-nav-bar__menu-mobile {
position: absolute;
display: flex;
display: block;
padding: 20px;
background-color: #ffffff;
background-size: cover;
background-position: center center;
border-radius: 10px;
text-decoration: none;
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), border 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
box-shadow: 0 10px 50px -10px rgba(10, 10, 71, 0.25) , 0 20px 30px -30px rgba(10, 10, 71, 0.1);
padding: 15px;
list-style: none;
flex-direction: column;
height: auto;
left: 0;
margin: 0 10px;
right: 0;
overflow: hidden;
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0, opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0, margin-top 0 cubic-bezier(0.215, 0.61, 0.355, 1) 250ms;
z-index: 300;
font-size: 19px;
line-height: 30px;
font-weight: bold;
}
@media all and (min-width: 768px) {
.c-nav-bar__menu-mobile {
left: auto;
margin-top: auto;
width: 375px;
}
}
.c-nav-bar__menu-mobile.is-collapsed {
margin-top: -4000px;
transform: scale(1) translateY(30px);
opacity: 0;
}
.c-nav-bar__menu-mobile.is-expanded {
transform: scale(1) translateY(0);
opacity: 1;
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0, opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1) 0, margin-top 0 cubic-bezier(0.215, 0.61, 0.355, 1) 0;
}
.c-nav-bar__menu-mobile-item-link {
display: flex;
text-decoration: none;
padding: 15px 15px;
align-items: center;
}
.c-nav-bar__menu-mobile-item-link:link,
.c-nav-bar__menu-mobile-item-link:visited {
color: #13138a;
}
@media (hover: hover) {
.c-nav-bar__menu-mobile-item-link:hover {
color: #1d1dcd;
text-decoration: none;
}
}
.c-nav-bar__menu-mobile-item-link:active {
color: #1a1ab7;
}
.c-nav-bar__menu-mobile-item.is-active .c-nav-bar__menu-mobile-item-link {
color: #1a1ab7;
}
.c-nav {
display: flex;
flex-direction: column;
align-items: stretch;
list-style: none;
margin: 0;
padding: 0;
font-size: 17px;
line-height: 30px;
}
.c-nav__item {
margin-left: -15px;
margin-bottom: 5px;
line-height: 30px;
}
.c-nav__item-link {
display: block;
font-weight: 500;
text-decoration: none;
padding: 5px 15px;
border-radius: 30px;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
color: #3B3B6C;
}
.c-nav__item-link:link {
color: #3B3B6C;
}
@media (hover: hover) {
.c-nav__item-link:hover {
color: #1d1dcd;
text-decoration: none;
}
}
.c-nav__item-link:active {
color: #1a1ab7;
text-decoration: none;
}
.c-nav__item.is-active > .c-nav__item-link {
color: #1a1ab7;
}
.c-nav--s {
font-size: 15px;
line-height: 20px;
}
.c-nav--s .c-nav__item {
margin-left: -15px;
line-height: 20px;
}
.c-nav--s .c-nav__item-link {
padding: 7.5px 15px;
border-radius: 20px;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-nav--neutral .c-nav__item-link {
color: #8484A3;
}
@media (hover: hover) {
.c-nav--neutral .c-nav__item-link:hover {
text-decoration: none;
color: #1d1dcd;
}
}
.c-nav--neutral .c-nav__item-link:active {
color: #1a1ab7;
text-decoration: none;
}
.c-nav--neutral .c-nav__item.is-active > .c-nav__item-link {
color: #1a1ab7;
}
.c-nav--primary .c-nav__item-link {
color: #13138a;
}
@media (hover: hover) {
.c-nav--primary .c-nav__item-link:hover {
text-decoration: none;
color: #1d1dcd;
}
}
.c-nav--primary .c-nav__item-link:active {
color: #1a1ab7;
text-decoration: none;
}
.c-nav--primary .c-nav__item.is-active > .c-nav__item-link {
color: #1a1ab7;
}
@media (hover: hover) {
.c-nav--pills .c-nav__item-link:hover, .c-nav--tiny-pills .c-nav__item-link:hover {
background-color: #f4f4fd;
}
}
.c-nav--pills .c-nav__item.is-active > .c-nav__item-link, .c-nav--tiny-pills .c-nav__item.is-active > .c-nav__item-link {
background-color: #f4f4fb;
}
.c-nav--tiny-pills {
align-items: flex-start;
}
.c-pagination-dots {
display: flex;
list-style: none;
padding: 0;
margin: 0;
font-size: 15px;
line-height: 20px;
}
.c-pagination-dots__item {
position: relative;
}
.c-pagination-dots__item:first-child {
margin-left: -5px;
}
.c-pagination-dots__item:last-child {
margin-right: -5px;
}
.c-pagination-dots__label {
display: block;
height: 20px;
}
.c-pagination-dots__button {
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
margin: 0;
}
.c-pagination-dots__button::-ms-check {
display: none;
/* unstyle IE checkboxes */
}
.c-pagination-dots__button:focus {
outline: none;
}
.c-pagination-dots__button:enabled {
cursor: pointer;
}
.c-pagination-dots__text {
position: absolute;
display: block;
color: inherit;
top: 0;
left: 0;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 5px;
background-color: currentColor;
border-radius: 50%;
opacity: 0.25;
transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
pointer-events: none;
font-size: 0;
}
.c-pagination-dots__button:enabled + .c-pagination-dots__text {
cursor: pointer;
}
.c-pagination-dots__button:checked + .c-pagination-dots__text {
background-color: currentColor;
opacity: 1;
}
@media (hover: hover) {
.c-pagination-dots__button:enabled + .c-pagination-dots__text:hover {
opacity: 0.65;
}
}
.c-pass {
display: block;
padding: 20px;
background-color: #ffffff;
background-size: cover;
background-position: center center;
border-radius: 10px;
text-decoration: none;
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), border 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
box-shadow: 0 2.5px 12.5px -2.5px rgba(10, 10, 71, 0.1) , 0 5px 7.5px -7.5px rgba(10, 10, 71, 0.1);
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: nowrap;
font-weight: 500;
color: rgba(10, 10, 71, 0.8);
border: 1px solid rgba(10, 10, 71, 0.1);
padding: 30px 20px;
max-width: 350px;
text-align: left;
font-weight: get-text-weight(medium);
}
.c-pass__detail-label {
font-size: 13px;
line-height: 15px;
color: #C2C2D1;
margin-bottom: 5px;
}
.c-pass__detail-value {
font-size: 17px;
line-height: 30px;
line-height: 20px;
}
.c-pass__logo {
max-width: 90px;
max-height: 90px;
margin: 0 0 10px 10px;
}
.c-pass__qr-code {
max-width: 250px;
margin: 30px auto 0;
}
.c-pass__qr-code-footnote {
font-size: 13px;
line-height: 15px;
color: #8484A3;
text-align: center;
margin: 15px auto 0;
padding: 0 15px;
}
.c-popover {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 300px;
min-width: 200px;
margin: auto;
margin-top: 10px;
padding-top: 10px;
left: 50%;
transform: translateX(-50%);
overflow: visible;
z-index: 400;
text-align: left;
opacity: 0;
pointer-events: none;
transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1), margin 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition-delay: 125ms;
/* Draw the tip
- ::before is used by default to draw the tip, with the positionning variant here below
- __tip is a child element when positionning the tip using js.
*/
/* States */
/* Inner container: by default there is no visual styles, each component has its own design */
max-width: 350px;
min-width: 350px;
}
.c-popover::before, .c-popover__tip {
content: "";
left: 50%;
position: absolute;
width: 10px;
height: 10px;
background-color: #ffffff;
border-top-left-radius: 2.5px;
transform: rotate(45deg);
pointer-events: none;
z-index: 1;
}
.c-popover::before {
top: 15px;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.c-popover--js-tip-positionning {
padding: 0;
}
.c-popover--js-tip-positionning::before {
display: none;
}
.c-popover--position-top, .c-popover[x-placement=top] {
margin-top: -15px;
top: 0;
padding-top: 0;
padding-bottom: 15px;
transform: translateX(-50%) translateY(-100%);
justify-content: center;
}
.c-popover--position-top::before, .c-popover[x-placement=top]::before {
top: 100%;
left: 50%;
margin-top: -15px;
}
.c-popover--position-top.is-visible, .c-popover[x-placement=top].is-visible {
top: 0px;
}
.c-popover--position-left, .c-popover[x-placement=left] {
margin-top: auto !important;
top: 50%;
left: 0%;
padding-top: 0;
padding-right: 15px;
margin-left: -10px;
transform: translateX(-100%) translateY(-50%);
justify-content: flex-end;
}
.c-popover--position-left::before, .c-popover[x-placement=left]::before {
top: 50%;
left: 100%;
margin-left: -15px;
}
.c-popover--position-left.is-visible, .c-popover[x-placement=left].is-visible {
margin-left: 0;
}
.c-popover--position-right, .c-popover[x-placement=right] {
margin-top: auto !important;
top: 50%;
left: 100%;
padding-top: 0;
padding-left: 15px;
margin-left: 25px;
transform: translateY(-50%);
justify-content: flex-start;
}
.c-popover--position-right::before, .c-popover[x-placement=right]::before {
top: 50%;
left: 0;
margin-left: 15px;
}
.c-popover--position-right.is-visible, .c-popover[x-placement=right].is-visible {
margin-left: 0;
}
.c-popover--no-tip::before {
display: none;
}
.c-popover.is-visible {
pointer-events: auto;
display: flex;
opacity: 1;
margin-top: 0;
}
.c-popover__inner {
position: relative;
pointer-events: inherit;
z-index: 0;
}
.c-popover--no-fly-in-effect {
margin: 0 !important;
}
.c-popover__inner {
display: block;
padding: 20px;
background-color: #ffffff;
background-size: cover;
background-position: center center;
border-radius: 10px;
text-decoration: none;
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), border 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
box-shadow: 0 10px 50px -10px rgba(10, 10, 71, 0.25) , 0 20px 30px -30px rgba(10, 10, 71, 0.1);
width: 100%;
}
.c-popover--custom {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 300px;
min-width: 200px;
margin: auto;
margin-top: 10px;
padding-top: 10px;
left: 50%;
transform: translateX(-50%);
overflow: visible;
z-index: 400;
text-align: left;
opacity: 0;
pointer-events: none;
transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1), margin 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition-delay: 125ms;
/* Draw the tip
- ::before is used by default to draw the tip, with the positionning variant here below
- __tip is a child element when positionning the tip using js.
*/
/* States */
/* Inner container: by default there is no visual styles, each component has its own design */
max-width: none;
min-width: 0;
}
.c-popover--custom::before, .c-popover--custom__tip {
content: "";
left: 50%;
position: absolute;
width: 10px;
height: 10px;
background-color: #ffffff;
border-top-left-radius: 2.5px;
transform: rotate(45deg);
pointer-events: none;
z-index: 1;
}
.c-popover--custom::before {
top: 15px;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.c-popover--custom--js-tip-positionning {
padding: 0;
}
.c-popover--custom--js-tip-positionning::before {
display: none;
}
.c-popover--custom--position-top, .c-popover--custom[x-placement=top] {
margin-top: -15px;
top: 0;
padding-top: 0;
padding-bottom: 15px;
transform: translateX(-50%) translateY(-100%);
justify-content: center;
}
.c-popover--custom--position-top::before, .c-popover--custom[x-placement=top]::before {
top: 100%;
left: 50%;
margin-top: -15px;
}
.c-popover--custom--position-top.is-visible, .c-popover--custom[x-placement=top].is-visible {
top: 0px;
}
.c-popover--custom--position-left, .c-popover--custom[x-placement=left] {
margin-top: auto !important;
top: 50%;
left: 0%;
padding-top: 0;
padding-right: 15px;
margin-left: -10px;
transform: translateX(-100%) translateY(-50%);
justify-content: flex-end;
}
.c-popover--custom--position-left::before, .c-popover--custom[x-placement=left]::before {
top: 50%;
left: 100%;
margin-left: -15px;
}
.c-popover--custom--position-left.is-visible, .c-popover--custom[x-placement=left].is-visible {
margin-left: 0;
}
.c-popover--custom--position-right, .c-popover--custom[x-placement=right] {
margin-top: auto !important;
top: 50%;
left: 100%;
padding-top: 0;
padding-left: 15px;
margin-left: 25px;
transform: translateY(-50%);
justify-content: flex-start;
}
.c-popover--custom--position-right::before, .c-popover--custom[x-placement=right]::before {
top: 50%;
left: 0;
margin-left: 15px;
}
.c-popover--custom--position-right.is-visible, .c-popover--custom[x-placement=right].is-visible {
margin-left: 0;
}
.c-popover--custom--no-tip::before {
display: none;
}
.c-popover--custom.is-visible {
pointer-events: auto;
display: flex;
opacity: 1;
margin-top: 0;
}
.c-popover--custom__inner {
position: relative;
pointer-events: inherit;
z-index: 0;
}
.c-popover--custom--no-fly-in-effect {
margin: 0 !important;
}
.c-popover--custom .c-popover__inner {
padding: 0;
}
.c-price {
font-size: 17px;
line-height: 30px;
color: #0A0A47;
white-space: nowrap;
}
.c-price__prefix,
.c-price__suffix {
font-size: 13px;
line-height: 15px;
color: #606087;
font-weight: 500;
}
.c-price--xs {
font-size: 13px;
line-height: 15px;
}
.c-price--xs .c-price__prefix,
.c-price--xs .c-price__suffix {
font-size: 13px;
line-height: 15px;
}
.c-price--s {
font-size: 15px;
line-height: 20px;
}
.c-price--s .c-price__prefix,
.c-price--s .c-price__suffix {
font-size: 13px;
line-height: 15px;
}
.c-price--l {
font-size: 19px;
line-height: 30px;
}
.c-price--l .c-price__prefix,
.c-price--l .c-price__suffix {
font-size: 15px;
line-height: 20px;
}
.c-price--xl {
font-size: 21px;
line-height: 35px;
}
.c-price--xl .c-price__prefix,
.c-price--xl .c-price__suffix {
font-size: 15px;
line-height: 20px;
}
.c-price--2xl {
font-size: 26px;
line-height: 40px;
}
.c-price--2xl .c-price__prefix,
.c-price--2xl .c-price__suffix {
font-size: 17px;
line-height: 30px;
}
.c-price--3xl {
font-size: 32px;
line-height: 45px;
}
.c-price--3xl .c-price__prefix,
.c-price--3xl .c-price__suffix {
font-size: 17px;
line-height: 30px;
}
.c-price--4xl {
font-size: 32px;
line-height: 45px;
}
@media all and (min-width: 768px) {
.c-price--4xl {
font-size: 40px;
line-height: 55px;
}
}
.c-price--4xl .c-price__prefix,
.c-price--4xl .c-price__suffix {
font-size: 19px;
line-height: 30px;
}
.c-progress-bar {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
height: 15px;
color: #C2C2D1;
background-color: rgba(10, 10, 71, 0.1);
border-radius: 50px;
overflow: hidden;
position: relative;
box-shadow: none;
border: 0;
}
.c-progress-bar::-webkit-progress-bar {
background-color: transparent;
border-radius: 50px;
overflow: hidden;
}
.c-progress-bar::-webkit-progress-value {
background-color: #C2C2D1;
border-radius: 50px;
}
.c-progress-bar::-moz-progress-bar {
background-color: #C2C2D1;
border-radius: 50px;
}
.c-progress-bar--xs {
height: 5px;
}
.c-progress-bar--s {
height: 10px;
}
.c-progress-bar--dark::-webkit-progress-value {
background-color: #606087;
}
.c-progress-bar--dark::-moz-progress-bar {
background-color: #606087;
}
.c-progress-bar--primary {
background-color: #f3f3f9;
}
.c-progress-bar--primary::-webkit-progress-value {
background-color: #13138a;
}
.c-progress-bar--primary::-moz-progress-bar {
background-color: #13138a;
}
.c-progress-bar--informative {
background-color: #cce9f9;
}
.c-progress-bar--informative::-webkit-progress-value {
background-color: #34a7e6;
}
.c-progress-bar--informative::-moz-progress-bar {
background-color: #34a7e6;
}
.c-progress-bar--success {
background-color: #c8f1df;
}
.c-progress-bar--success::-webkit-progress-value {
background-color: #22c580;
}
.c-progress-bar--success::-moz-progress-bar {
background-color: #22c580;
}
.c-progress-bar--warning {
background-color: #ffe1ce;
}
.c-progress-bar--warning::-webkit-progress-value {
background-color: #FF8839;
}
.c-progress-bar--warning::-moz-progress-bar {
background-color: #FF8839;
}
.c-progress-bar--danger {
background-color: #fcd0d0;
}
.c-progress-bar--danger::-webkit-progress-value {
background-color: #f24242;
}
.c-progress-bar--danger::-moz-progress-bar {
background-color: #f24242;
}
.c-rich-text {
/* Links are underlined by default in rich text */
/* Styling spacing of inner content */
/* Headings */
/* Blockquote */
/* Images */
}
.c-rich-text > *:first-child {
/* Remove top margin on first element */
margin-top: 0 !important;
}
.c-rich-text > *:last-child {
/* Remove bottom margin on last element */
margin-bottom: 0 !important;
}
.c-rich-text a {
text-decoration: underline;
}
.c-rich-text h1 {
/* @TODO */
margin-top: 30px;
margin-bottom: 30px;
}
.c-rich-text h2 {
margin-top: 30px;
margin-bottom: 30px;
}
.c-rich-text h3 {
margin-top: 30px;
margin-bottom: 30px;
}
.c-rich-text h4 {
margin-top: 30px;
margin-bottom: 15px;
}
.c-rich-text h5 {
margin-top: 30px;
margin-bottom: 15px;
}
.c-rich-text h6 {
margin-top: 30px;
margin-bottom: 15px;
}
.c-rich-text blockquote {
margin-top: 30px;
margin-bottom: 30px;
}
.c-rich-text img {
display: block;
max-width: 100%;
height: auto;
margin: 30px auto;
}
.c-rich-text--l {
font-size: 19px;
line-height: 30px;
}
.c-rich-text--l blockquote {
font-size: 21px;
line-height: 35px;
}
.c-rich-text--xl {
font-size: 21px;
line-height: 35px;
}
.c-rich-text--xl blockquote {
font-size: 26px;
line-height: 40px;
}
/**
* Base styles
*/
.c-select {
display: block;
width: 100%;
min-height: 46px;
padding: 9px 19px;
font-size: 17px;
font-weight: 500;
line-height: 30px;
color: rgba(10, 10, 71, 0.65);
background-color: #ffffff;
background-clip: padding-box;
border: 1px solid rgba(10, 10, 71, 0.25);
border-radius: 25px;
max-width: 100%;
/* useful when width is set to anything other than 100% */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='8' fill='none' xmlns='http://www.w3.org/2000/svg' color='%2313138a'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1.333L10.667 0 6 4.667 1.333 0 0 1.333l6 6L7.333 6 12 1.333z' fill='currentcolor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px top 50%;
padding-right: 45.25px;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
cursor: pointer;
}
.c-select::-ms-expand {
display: none;
}
.c-select:focus, .c-select:focus-within {
color: #3B3B6C;
border-color: rgba(52, 163, 232, 0.625);
}
.c-select.is-invalid {
color: #f24242;
border-color: rgba(213, 59, 67, 0.625);
}
.c-select:disabled, .c-select.is-disabled {
color: #C2C2D1;
background-color: #F3F3F6;
cursor: default;
}
.c-select:disabled {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='8' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23C2C2D1'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1.333L10.667 0 6 4.667 1.333 0 0 1.333l6 6L7.333 6 12 1.333z' fill='currentcolor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.c-select[multiple], .c-select[size]:not([size="1"]) {
height: auto;
background-image: none;
padding: 5px;
}
.c-select[multiple] option, .c-select[size]:not([size="1"]) option {
padding: 7px 15px 9px;
border-radius: 19px;
color: inherit;
font-weight: 500;
margin-bottom: 1px;
}
/**
* Size and padding variations
*/
.c-select--s {
font-size: 15px;
line-height: 20px;
padding: 9px 14px;
min-height: 40px;
border-radius: 20px;
background-position: right 13px top 50%;
padding-right: 34.75px;
}
.c-select--l {
font-size: 19px;
line-height: 30px;
padding: 14px 24px;
min-height: 60px;
border-radius: 30px;
background-position: right 23px top 50%;
padding-right: 52.25px;
}
/**
* Naked variant
*
* Display the input without box effect (no padding and border) and remove focus
*/
.c-select--naked {
padding: 0;
padding-right: 21px;
background-position: right top 50%;
background-color: transparent;
border: 0;
margin: 0;
border-radius: 0;
min-height: 30px;
}
.c-select--naked:focus, .c-select--naked:focus-within, .c-select--naked.is-invalid:focus, .c-select--naked.is-invalid:focus-within {
box-shadow: none;
outline: 0;
}
.c-select--naked.c-select--s {
min-height: 20px;
padding-right: 18.5px;
}
.c-select--naked.c-select--l {
min-height: 30px;
padding-right: 23.5px;
}
/**
* Custom variant
*
* Display the input without box effect (no padding and border) and remove focus
**/
.c-custom-select {
position: relative;
display: inline-block;
}
.c-custom-select__label {
display: block;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
}
.c-custom-select__select {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
}
/**
* Base styles
*/
.c-signature {
height: 150px;
position: relative;
background: #F3F3F6;
border-radius: 10px;
overflow: hidden;
}
.c-signature__canvas {
display: block;
width: 100%;
height: 100%;
}
.c-signature__help {
position: absolute;
z-index: 1;
bottom: 20px;
left: 15px;
right: 15px;
text-align: center;
font-size: 15px;
line-height: 20px;
color: #C2C2D1;
}
.c-signature__clear {
position: absolute;
z-index: 1;
bottom: 15px;
right: 15px;
}
/**
* Variant styles
*/
.c-slider {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
cursor: pointer;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0;
background: transparent;
height: 30px;
/** TRACK:WEBKIT **/
/** TRACK:IE **/
/** TRACK:MOZ **/
/** KNOB:WEBKIT **/
/** KNOB:IE **/
/** KNOB:FIREFOX **/
}
.c-slider:focus {
outline: 0;
}
.c-slider:disabled {
cursor: default;
}
.c-slider::-webkit-slider-runnable-track {
background: #c4c4e2;
height: 10px;
border-radius: 5px;
outline: none;
width: 100%;
-webkit-transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
margin: 10px 0;
}
.c-slider:focus::-webkit-slider-runnable-track, .c-slider:active::-webkit-slider-runnable-track {
background: #c7c7f3;
}
@media (hover: hover) {
.c-slider:hover::-webkit-slider-runnable-track {
background: #c7c7f3;
}
}
.c-slider:disabled::-webkit-slider-runnable-track {
background: rgba(10, 10, 71, 0.1);
}
.c-slider::-ms-track {
background: transparent;
height: 20px;
border-radius: 5px;
color: transparent;
width: 100%;
border-color: transparent;
border-width: 5px 0;
overflow: visible;
}
.c-slider::-ms-fill-lower, .c-slider::-ms-fill-upper {
background: transparent;
background: rgba(10, 10, 71, 0.1);
border: 0;
border-radius: 5px;
height: 10px;
-ms-transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-slider:focus::-ms-fill-lower, .c-slider:focus::-ms-fill-upper, .c-slider:active::-ms-fill-lower, .c-slider:active::-ms-fill-upper {
background: #c7c7f3;
}
@media (hover: hover) {
.c-slider:hover::-ms-fill-lower, .c-slider:hover::-ms-fill-upper {
background: #c7c7f3;
}
}
.c-slider:disabled::-ms-fill-lower, .c-slider:disabled::-ms-fill-upper {
background: rgba(10, 10, 71, 0.1);
}
.c-slider::-moz-range-track {
background: rgba(10, 10, 71, 0.1);
height: 10px;
border-radius: 5px;
outline: none;
width: 100%;
-moz-transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-slider:focus::-moz-range-track, .c-slider:active::-moz-range-track {
background: #c7c7f3;
}
@media (hover: hover) {
.c-slider:hover::-moz-range-track {
background: #c7c7f3;
}
}
.c-slider:disabled::-moz-range-track {
background: rgba(10, 10, 71, 0.1);
}
.c-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
margin-top: -5px;
background: #13138a;
border-radius: 10px;
-webkit-transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (hover: hover) {
.c-slider:hover::-webkit-slider-thumb {
background: #1d1dcd;
}
}
.c-slider:focus::-webkit-slider-thumb, .c-slider:active::-webkit-slider-thumb {
background: #1a1ab7;
}
.c-slider:disabled::-webkit-slider-thumb {
background: #8484A3;
}
.c-slider::-ms-thumb {
appearance: none;
width: 20px;
height: 20px;
background: #13138a;
border-radius: 10px;
-ms-transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
border: 0;
cursor: pointer;
margin-top: 0px;
/*Needed to keep the Edge thumb centred*/
}
@media (hover: hover) {
.c-slider:hover::-ms-thumb {
background: #1d1dcd;
}
}
.c-slider:focus::-ms-thumb, .c-slider:active::-ms-thumb {
background: #1a1ab7;
}
.c-slider:disabled::-ms-thumb {
background: #8484A3;
}
.c-slider::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #13138a;
border-radius: 10px;
-moz-transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
border: 0;
}
@media (hover: hover) {
.c-slider:hover::-moz-range-thumb {
background: #1d1dcd;
}
}
.c-slider:focus::-moz-range-thumb, .c-slider:active::-moz-range-thumb {
background: #1a1ab7;
}
.c-slider:disabled::-moz-range-thumb {
background: #8484A3;
}
.c-spinner {
color: inherit;
display: inline-flex;
vertical-align: middle;
margin-top: -1px;
/* Optical correction */
line-height: 0;
align-items: center;
justify-content: center;
min-width: auto;
/* IE11 fix: Prevent shrinking when used as flex child */
}
.c-spinner__icon {
display: block;
margin-top: 0;
}
.c-stacked-list {
font-size: 17px;
line-height: 30px;
color: #3B3B6C;
overflow: auto;
}
.c-stacked-list--s {
font-size: 15px;
line-height: 20px;
}
.c-stacked-list__group {
list-style: none;
padding: 0;
margin: 0;
}
.c-stacked-list__group-label {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
display: block;
background-color: #F3F3F6;
text-transform: uppercase;
font-size: 13px;
line-height: 15px;
color: #606087;
font-weight: 700;
padding: 5px 19px;
}
.c-stacked-list--s .c-stacked-list__group-label {
padding: 5px 14px;
}
.c-stacked-list__list {
display: flex;
/* Set list as flex, so min-height is properly honored on list items on IE 11 */
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
}
.c-stacked-list__item {
display: flex;
flex-direction: column;
border-bottom: 1px solid #E6E6EC;
min-height: 50px;
}
.c-stacked-list__item:last-child {
border-bottom-width: 0;
}
.c-stacked-list--s .c-stacked-list__item {
min-height: 40px;
}
.c-stacked-list__inner {
display: flex;
flex: auto;
padding: 5px 19px;
line-height: 1;
}
.c-stacked-list__inner, .c-stacked-list__inner:link, .c-stacked-list__inner:active {
color: inherit;
text-decoration: none;
}
@media (hover: hover) {
.c-stacked-list__inner:hover {
color: inherit;
text-decoration: none;
}
}
.c-stacked-list--s .c-stacked-list__inner {
padding: 5px 14px;
}
.c-stacked-list__inner-start {
display: flex;
align-items: center;
font-weight: 500;
}
.c-stacked-list__inner-end {
display: flex;
align-items: center;
color: #8484A3;
margin-left: auto;
}
@media (hover: hover) {
.c-stacked-list__inner--interactive:hover .c-stacked-list__inner-start {
color: #1d1dcd;
}
.c-stacked-list__inner--interactive:hover .c-stacked-list__inner-end {
color: #1d1dcd;
}
}
.c-stars {
display: inline-flex;
flex-wrap: nowrap;
vertical-align: middle;
white-space: nowrap;
}
.c-stars__star {
margin-left: 2px;
}
.c-stars__star:first-child {
margin-left: 0;
}
.c-status {
display: inline-flex;
align-items: center;
height: 25px;
padding: 0 0.5em;
color: rgba(10, 10, 71, 0.5);
border: 1px solid rgba(10, 10, 71, 0.25);
font-size: 13px;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.35px;
border-radius: 5px;
white-space: nowrap;
text-decoration: none;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-status.is-interactive {
cursor: pointer;
}
.c-status.is-interactive:link, .c-status.is-interactive:hover, .c-status.is-interactive:active {
color: rgba(10, 10, 71, 0.5);
text-decoration: none;
}
.c-status.is-interactive:hover, .c-status.is-interactive:active {
text-decoration: none;
color: rgba(10, 10, 71, 0.65);
border-color: rgba(10, 10, 71, 0.4);
}
.c-status__icon {
margin-left: 2px;
}
.c-status--s {
height: 20px;
font-size: 10px;
border-radius: 5px;
}
.c-status--l {
height: 30px;
font-size: 15px;
border-radius: 5px;
}
.c-status--expected {
color: #ffffff;
background-color: #0A0A47;
border-color: transparent;
}
.c-status--expected.is-interactive:link, .c-status--expected.is-interactive:active {
color: #ffffff;
}
@media (hover: hover) {
.c-status--expected.is-interactive:hover {
color: #ffffff;
}
}
@media (hover: hover) {
.c-status--expected.is-interactive:hover {
color: #ffffff;
background-color: #070731;
border-color: transparent;
}
}
.c-status--expected.is-interactive:active {
color: #ffffff;
background-color: #070731;
border-color: transparent;
}
.c-status--on-site {
color: #ffffff;
background-color: #3AB9FF;
border-color: transparent;
}
.c-status--on-site.is-interactive:link, .c-status--on-site.is-interactive:active {
color: #ffffff;
}
@media (hover: hover) {
.c-status--on-site.is-interactive:hover {
color: #ffffff;
}
}
@media (hover: hover) {
.c-status--on-site.is-interactive:hover {
color: #ffffff;
background-color: #21b0ff;
border-color: transparent;
}
}
.c-status--on-site.is-interactive:active {
color: #ffffff;
background-color: #21b0ff;
border-color: transparent;
}
.c-status--checked-in {
color: #ffffff;
background-color: #22c580;
border-color: transparent;
}
.c-status--checked-in.is-interactive:link, .c-status--checked-in.is-interactive:active {
color: #ffffff;
}
@media (hover: hover) {
.c-status--checked-in.is-interactive:hover {
color: #ffffff;
}
}
@media (hover: hover) {
.c-status--checked-in.is-interactive:hover {
color: #ffffff;
background-color: #1eaf72;
border-color: transparent;
}
}
.c-status--checked-in.is-interactive:active {
color: #ffffff;
background-color: #1eaf72;
border-color: transparent;
}
.c-status--checked-out {
color: #ffffff;
background-color: #8484A3;
border-color: transparent;
}
.c-status--checked-out.is-interactive:link, .c-status--checked-out.is-interactive:active {
color: #ffffff;
}
@media (hover: hover) {
.c-status--checked-out.is-interactive:hover {
color: #ffffff;
}
}
@media (hover: hover) {
.c-status--checked-out.is-interactive:hover {
color: #ffffff;
background-color: #757598;
border-color: transparent;
}
}
.c-status--checked-out.is-interactive:active {
color: #ffffff;
background-color: #757598;
border-color: transparent;
}
.c-status--denied {
color: #ffffff;
background-color: #f24242;
border-color: transparent;
}
.c-status--denied.is-interactive:link, .c-status--denied.is-interactive:active {
color: #ffffff;
}
@media (hover: hover) {
.c-status--denied.is-interactive:hover {
color: #ffffff;
}
}
@media (hover: hover) {
.c-status--denied.is-interactive:hover {
color: #ffffff;
background-color: #f02a2a;
border-color: transparent;
}
}
.c-status--denied.is-interactive:active {
color: #ffffff;
background-color: #f02a2a;
border-color: transparent;
}
.c-status--booked {
color: #ffffff;
background-color: #22c580;
border-color: transparent;
}
.c-status--booked.is-interactive:link, .c-status--booked.is-interactive:active {
color: #ffffff;
}
@media (hover: hover) {
.c-status--booked.is-interactive:hover {
color: #ffffff;
}
}
@media (hover: hover) {
.c-status--booked.is-interactive:hover {
color: #ffffff;
background-color: #1eaf72;
border-color: transparent;
}
}
.c-status--booked.is-interactive:active {
color: #ffffff;
background-color: #1eaf72;
border-color: transparent;
}
.c-status--in-review {
color: #ffffff;
background-color: #FF8839;
border-color: transparent;
}
.c-status--in-review.is-interactive:link, .c-status--in-review.is-interactive:active {
color: #ffffff;
}
@media (hover: hover) {
.c-status--in-review.is-interactive:hover {
color: #ffffff;
}
}
@media (hover: hover) {
.c-status--in-review.is-interactive:hover {
color: #ffffff;
background-color: #ff7920;
border-color: transparent;
}
}
.c-status--in-review.is-interactive:active {
color: #ffffff;
background-color: #ff7920;
border-color: transparent;
}
:root {
--steps-font-size: 17px;
--steps-line-height: 30px;
--steps-bullet-size: 10px;
--steps-bullet-font-size: 15px;
--steps-bullet-column-position: 16.5px;
--steps-item-width: 200px;
--steps-item-min-width: 150px;
--steps-item-max-width: 250px;
}
.c-steps {
display: flex;
flex-direction: column;
text-align: left;
justify-content: flex-start;
align-items: stretch;
font-size: 17px;
line-height: 30px;
font-size: var(--steps-font-size);
line-height: var(--steps-line-height);
margin: 0;
padding: 0;
list-style: none;
counter-reset: trackitems;
overflow-x: visible;
overflow-y: auto;
color: #8484A3;
}
.c-steps__item {
position: relative;
padding-left: calc(var(--steps-bullet-size) + 5px);
}
.c-steps__item-inner {
counter-increment: trackitems;
text-decoration: none !important;
display: block;
color: inherit;
height: 100%;
outline-color: currentColor;
padding-top: 5px;
padding-bottom: 5px;
}
@media (hover: hover) {
.c-steps__item-inner:-webkit-any-link:hover {
color: #1d1dcd;
}
.c-steps__item-inner:-moz-any-link:hover {
color: #1d1dcd;
}
.c-steps__item-inner:any-link:hover {
color: #1d1dcd;
}
}
.c-steps__item-inner:-webkit-any-link:active, .c-steps__item-inner:-webkit-any-link:focus {
color: #1a1ab7;
}
.c-steps__item-inner:-moz-any-link:active, .c-steps__item-inner:-moz-any-link:focus {
color: #1a1ab7;
}
.c-steps__item-inner:any-link:active,
.c-steps__item-inner:any-link:focus,
.c-steps__item.is-active .c-steps__item-inner {
color: #1a1ab7;
}
/* Bullet */
.c-steps__item-inner::before {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
content: "";
width: var(--steps-bullet-size);
height: var(--steps-bullet-size);
transform: translateY(var(--steps-bullet-column-position));
top: 0;
left: 0;
overflow: hidden;
border-radius: 50%;
background-color: #ffffff;
border: 2px solid currentColor;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
z-index: 1;
}
.c-steps__item.is-active .c-steps__item-inner::before {
color: #ffffff;
background-color: #1a1ab7;
border-color: #1a1ab7;
}
/* Track */
.c-steps__item-inner::after {
position: absolute;
z-index: 0;
content: "";
width: 2px;
transform: translateX(calc(var(--steps-bullet-size) * 0.5 - 1px)) translateY(var(--steps-bullet-column-position));
top: 0;
bottom: 0;
left: 0;
overflow: hidden;
background-color: rgba(10, 10, 71, 0.25);
}
.c-steps__item:first-child .c-steps__item-inner::after {
left: 0;
}
.c-steps__item:last-child .c-steps__item-inner::after {
display: none;
}
/* Inner elements */
.c-steps__item-label {
display: block;
margin: 0;
color: inherit;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0 5px;
font-weight: 500;
}
.c-steps__item.is-active .c-steps__item-label {
font-weight: 700;
}
.c-steps__item-description {
color: #606087;
margin-bottom: 0;
padding: 0 5px;
}
/* Orientation variant */
.c-steps--row {
/** BASE CLASS **/
flex-direction: row;
text-align: center;
}
.c-steps--row .c-steps__item {
width: var(--steps-item-width);
min-width: var(--steps-item-min-width);
max-width: var(--steps-item-max-width);
padding-top: calc(var(--steps-bullet-size) + 10px);
padding-left: 0;
}
.c-steps--row .c-steps__item:first-child {
margin-left: auto;
}
.c-steps--row .c-steps__item:last-child {
margin-right: auto;
}
.c-steps--row .c-steps__item-inner {
padding: 0;
}
.c-steps--row .c-steps__item-inner::before {
margin-left: 50%;
transform: translateX(-50%);
}
.c-steps--row .c-steps__item-inner::after {
width: initial;
height: 2px;
transform: translateY(calc(var(--steps-bullet-size) * 0.5 - 1px));
left: 0;
right: 0;
}
.c-steps--row .c-steps__item:first-child .c-steps__item-inner::after {
left: 50%;
}
.c-steps--row .c-steps__item:last-child .c-steps__item-inner::after {
right: 50%;
display: block;
}
@media all and (min-width: 768px) {
.c-steps--row\@medium {
flex-direction: row;
text-align: center;
}
.c-steps--row\@medium .c-steps__item {
width: var(--steps-item-width);
min-width: var(--steps-item-min-width);
max-width: var(--steps-item-max-width);
padding-top: calc(var(--steps-bullet-size) + 10px);
padding-left: 0;
}
.c-steps--row\@medium .c-steps__item:first-child {
margin-left: auto;
}
.c-steps--row\@medium .c-steps__item:last-child {
margin-right: auto;
}
.c-steps--row\@medium .c-steps__item-inner {
padding: 0;
}
.c-steps--row\@medium .c-steps__item-inner::before {
margin-left: 50%;
transform: translateX(-50%);
}
.c-steps--row\@medium .c-steps__item-inner::after {
width: initial;
height: 2px;
transform: translateY(calc(var(--steps-bullet-size) * 0.5 - 1px));
left: 0;
right: 0;
}
.c-steps--row\@medium .c-steps__item:first-child .c-steps__item-inner::after {
left: 50%;
}
.c-steps--row\@medium .c-steps__item:last-child .c-steps__item-inner::after {
right: 50%;
display: block;
}
}
/** Numbered variant **/
.c-steps--numbered {
--steps-bullet-size: 30px;
--steps-bullet-column-position: 4.8px;
}
.c-steps--numbered .c-steps__item-inner::before {
content: counter(trackitems);
line-height: 1;
font-size: var(--steps-bullet-font-size);
}
/* Size variants */
.c-steps--s {
--steps-font-size: 15px;
--steps-line-height: 20px;
--steps-item-width: 175px;
--steps-item-min-width: 150px;
--steps-item-max-width: 225px;
--steps-bullet-column-position: 10px;
}
.c-steps--s.c-steps--numbered {
--steps-bullet-size: 25px;
--steps-bullet-font-size: 13px;
--steps-bullet-column-position: 2px;
}
.c-steps--xs {
--steps-font-size: 13px;
--steps-line-height: 20px;
--steps-item-width: 150px;
--steps-item-min-width: 125px;
--steps-item-max-width: 225px;
--steps-bullet-column-position: 11px;
}
.c-steps--xs.c-steps--numbered {
--steps-bullet-size: 20px;
--steps-bullet-font-size: 11px;
--steps-bullet-column-position: 6px;
}
.c-surface-button {
border-radius: 10px;
background-color: #F3F3F6;
border: none;
color: #3B3B6C;
display: flex;
align-items: stretch;
justify-content: center;
min-height: 40px;
font-size: 15px;
line-height: 20px;
font-weight: 500;
gap: 5px;
padding: 0 15px;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
overflow: hidden;
transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1), background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
text-decoration: none;
cursor: pointer;
color: #13138a;
white-space: nowrap;
}
.c-surface-button > * {
display: flex;
align-items: center;
transition: background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-surface-button--inverse {
background-color: #ffffff;
}
.c-surface-button:link {
color: #13138a;
}
@media (hover: hover) {
.c-surface-button:hover {
color: #1d1dcd;
background-color: rgba(29, 29, 205, 0.1);
text-decoration: none;
}
}
.c-surface-button:focus-visible {
color: #1d1dcd;
background-color: rgba(29, 29, 205, 0.1);
outline: 0;
box-shadow: 0 0 0 2px;
}
.c-surface-button:active {
color: #ffffff;
background-color: #1a1ab7;
}
.c-surface-button.is-active {
color: #ffffff;
background-color: #1a1ab7;
}
.c-surface-button.is-active:link {
color: #ffffff;
background-color: #1a1ab7;
}
.c-surface-button.is-active:visited {
color: #ffffff;
background-color: #1a1ab7;
}
@media (hover: hover) {
.c-surface-button.is-active:hover {
color: #ffffff;
background-color: #1d1dcd;
}
}
.c-surface-button.is-active:focus-visible {
color: #ffffff;
background-color: #1d1dcd;
}
.c-surface-button.is-active:active {
color: #ffffff;
background-color: #1a1ab7;
}
.c-surface-button--ghost {
background-color: transparent;
}
.c-surface-button__icon:first-child {
margin-left: -7px;
}
.c-surface-button__icon:last-child {
margin-right: -7px;
}
.c-surface-field {
border-radius: 10px;
background-color: #F3F3F6;
border: none;
color: #3B3B6C;
display: flex;
align-items: stretch;
justify-content: center;
min-height: 40px;
font-size: 15px;
line-height: 20px;
font-weight: 500;
gap: 5px;
padding: 0 15px;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
overflow: hidden;
transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1), background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
min-width: max-content;
}
.c-surface-field > * {
display: flex;
align-items: center;
transition: background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-surface-field--inverse {
background-color: #ffffff;
}
.c-surface-field:focus, .c-surface-field:focus-within {
color: #3B3B6C;
border-color: rgba(52, 163, 232, 0.625);
}
.c-surface-field.is-invalid {
color: #f24242;
border-color: rgba(213, 59, 67, 0.625);
}
.c-surface-field:disabled, .c-surface-field.is-disabled {
color: #C2C2D1;
background-color: #F3F3F6;
cursor: default;
}
@media (hover: hover) {
.c-surface-field:hover {
color: #1d1dcd;
}
}
.c-surface-field:active {
color: #1a1ab7;
}
.c-surface-field:focus-within {
outline: 0;
box-shadow: 0 0 0 2px;
color: #1a1ab7;
}
.c-surface-field:invalid, .c-surface-field.is-invalid {
color: #f24242;
}
.c-surface-field:invalid:focus-visible, .c-surface-field:invalid:focus-within, .c-surface-field.is-invalid:focus-visible, .c-surface-field.is-invalid:focus-within {
outline: 0;
box-shadow: 0 0 0 2px;
}
.c-surface-field:disabled, .c-surface-field.is-disabled {
color: #8484A3;
background-color: rgba(10, 10, 71, 0.05);
cursor: default;
}
.c-surface-field__icon-action {
display: flex;
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: none;
cursor: pointer;
color: #8484A3;
padding: 0;
outline: 0;
}
@media (hover: hover) {
.c-surface-field__icon-action:hover {
color: #606087;
}
}
.c-surface-field__icon-action:focus-visible {
color: #1a1ab7;
outline: 0;
}
.c-surface-field__icon-action[hidden] {
display: none;
}
.c-surface-field__input,
.c-surface-field__select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: flex;
flex-wrap: nowrap;
flex-shrink: 1;
align-items: center;
width: 100%;
max-width: 100%;
/* useful when width is set to anything other than 100% */
font-size: 15px;
font-weight: 500;
line-height: 20px;
min-height: 40px;
white-space: nowrap;
color: inherit;
background-clip: padding-box;
background-color: transparent;
padding: 0;
border: 0;
margin: 0;
border-radius: 0;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-surface-field__input::-moz-placeholder, .c-surface-field__select::-moz-placeholder {
color: rgba(10, 10, 71, 0.25);
opacity: 1;
/* Firefox */
}
.c-surface-field__input:-ms-input-placeholder, .c-surface-field__select:-ms-input-placeholder {
color: rgba(10, 10, 71, 0.25);
opacity: 1;
/* Firefox */
}
.c-surface-field__input::placeholder,
.c-surface-field__select::placeholder {
color: rgba(10, 10, 71, 0.25);
opacity: 1;
/* Firefox */
}
.c-surface-field__input:focus, .c-surface-field__input:focus-within, .c-surface-field__input.is-invalid:focus, .c-surface-field__input.is-invalid:focus-within,
.c-surface-field__select:focus,
.c-surface-field__select:focus-within,
.c-surface-field__select.is-invalid:focus,
.c-surface-field__select.is-invalid:focus-within {
box-shadow: none;
outline: 0;
}
.c-surface-field__select {
cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='8' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23606087'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1.333L10.667 0 6 4.667 1.333 0 0 1.333l6 6L7.333 6 12 1.333z' fill='currentcolor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
padding-right: 22px;
}
.c-surface-field__icon:first-child,
.c-surface-field__icon-action > .c-icon:first-child {
margin-left: -7px;
}
.c-surface-field__icon:last-child,
.c-surface-field__icon-action > .c-icon:last-child {
margin-right: -7px;
}
.c-switch + .c-switch__skin {
display: block;
position: relative;
vertical-align: middle;
width: 50px;
height: 25px;
background-color: #c4c4e2;
border-radius: 25px;
background-position: center center;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
cursor: pointer;
background-clip: padding-box;
/* Fix background image moving when focus on Chrome */
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1);
outline: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c-switch + .c-switch__skin::after {
content: "";
position: absolute;
display: block;
width: 17px;
height: 17px;
margin: 4px;
background-color: #ffffff;
border-radius: 100%;
transform: translateX(0);
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
box-shadow: 0 5px 25px -5px rgba(10, 10, 71, 0.15) , 0 10px 15px -15px rgba(10, 10, 71, 0.1);
}
/**
* Values
*/
.c-switch:checked + .c-switch__skin {
background-color: #22c580;
}
.c-switch:checked + .c-switch__skin::after {
transform: translateX(25px);
}
.c-switch:indeterminate + .c-switch__skin {
background-color: #c4c4e2;
}
.c-switch:indeterminate + .c-switch__skin::after {
transform: translateX(12.5px);
}
/**
* Interactivity states
*/
/* Active state */
.c-switch:active:enabled + .c-switch__skin {
background-color: #c6c6ed;
}
.c-switch:active:enabled + .c-switch__skin::after {
box-shadow: 0 5px 25px -5px rgba(10, 10, 71, 0.1) , 0 10px 15px -15px rgba(10, 10, 71, 0.4);
}
.c-switch:active:enabled:checked + .c-switch__skin {
background-color: #22d98b;
}
/* Focus state */
/* Invalid state */
.c-switch.is-invalid + .c-switch__skin ~ .c-label,
.c-switch:invalid + .c-switch__skin ~ .c-label {
color: #f24242;
}
/* Disabled state */
.c-switch:disabled + .c-switch__skin::after {
opacity: 0.65;
}
.c-switch:disabled + .c-switch__skin {
color: #C2C2D1;
background-color: #F3F3F6;
cursor: default;
}
/* Loading state */
.c-switch.is-loading {
pointer-events: none;
}
.c-switch.is-loading + .c-switch__skin {
pointer-events: none;
cursor: wait;
}
.c-switch.is-loading + .c-switch__skin:after {
opacity: 1;
background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision' width='16' height='16' viewBox='0 0 16 16' color='%233B3B6C'%3E%3Cstyle%3E@keyframes rotor%7B0%25%7Btransform:rotate(0deg)%7Dto%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='currentColor' stroke-width='2' stroke-opacity='.1' transform='translate(2 2)'/%3E%3Cpath d='M8 3a5 5 0 015 5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-opacity='.9' style='transform-box:fill-box;transform-origin:0 100%25;animation:rotor 1000ms linear infinite normal forwards'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center center;
background-size: 15px;
}
.c-switch:disabled + .c-switch__skin ~ .c-label {
color: #C2C2D1;
cursor: default;
}
/**
* Locked variant
*/
.c-switch--locked + .c-switch__skin,
.c-switch--locked:disabled + .c-switch__skin {
background-color: #c4c4e2;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='14' fill='none' xmlns='http://www.w3.org/2000/svg' color='rgba(10, 10, 71, 0.5)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.778 4.778H8.667V3.667A3.337 3.337 0 0 0 5.333.333 3.337 3.337 0 0 0 2 3.667v1.11H.889a.556.556 0 0 0-.556.556v7.778c0 .307.25.556.556.556h8.889a.556.556 0 0 0 .555-.556V5.333a.556.556 0 0 0-.555-.555zm-3.89 5.453v1.213h-1.11v-1.213a1.664 1.664 0 0 1-1.111-1.564c0-.92.747-1.667 1.666-1.667C6.253 7 7 7.748 7 8.667 7 9.39 6.534 10 5.889 10.23zm1.667-5.453H3.111V3.667c0-1.226.997-2.223 2.222-2.223 1.226 0 2.222.997 2.222 2.223v1.11z' fill='currentcolor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.c-switch--locked + .c-switch__skin::after,
.c-switch--locked:disabled + .c-switch__skin::after {
opacity: 1;
}
.c-switch--locked:checked + .c-switch__skin {
background-position: left 10px center;
background-color: #22c580;
}
.c-switch--locked:indeterminate + .c-switch__skin {
background-position: center center;
}
.c-switch--locked:indeterminate + .c-switch__skin::after {
opacity: 0;
}
/**
* Size variants
*/
.c-switch--xs + .c-switch__skin {
width: 20px;
height: 10px;
}
.c-switch--xs + .c-switch__skin::after {
width: 8px;
height: 8px;
margin: 1px;
}
.c-switch--xs:checked + .c-switch__skin::after {
transform: translateX(10px);
}
.c-switch--xs:indeterminate + .c-switch__skin::after {
transform: translateX(5px);
}
.c-table {
width: 100%;
border-width: 0;
border-color: #E6E6EC;
color: #606087;
margin: 0;
}
.c-table caption {
caption-side: bottom;
text-align: left;
color: #8484A3;
font-size: inherit;
line-height: inherit;
}
.c-table th, .c-table td {
padding: 10px 10px;
border-width: 1px 0;
border-color: #E6E6EC;
}
.c-table th:first-child, .c-table td:first-child {
padding-left: 0;
}
.c-table th:last-child, .c-table td:last-child {
padding-right: 0;
}
.c-table th {
font-weight: 500;
color: #3B3B6C;
white-space: nowrap;
}
.c-table thead th, .c-table thead td {
border-top-width: 0;
border-bottom-width: 1px;
color: #8484A3;
}
.c-table tfoot th, .c-table tfoot td {
border-top-width: 1px;
border-bottom-width: 0;
font-weight: 500;
}
/** VARIANTS **/
.c-table--compact th, .c-table--compact td {
padding: 5px 10px;
}
.c-table--border-all {
border-width: 1px;
}
.c-table--border-all th, .c-table--border-all td {
border-width: 1px;
}
.c-table--border-none {
border-width: 0;
}
.c-table--border-none tbody th, .c-table--border-none tbody td, .c-table--border-none thead th, .c-table--border-none thead td, .c-table--border-none tfoot th, .c-table--border-none tfoot td {
border-width: 0;
}
.c-table--zebra tbody tr:nth-child(2n+1) th, .c-table--zebra tbody tr:nth-child(2n+1) td {
background-color: #F3F3F6;
}
@media (hover: hover) {
.c-table--hover tbody tr:hover th, .c-table--hover tbody tr:hover td {
background-color: #F3F3F6;
cursor: pointer;
}
}
/** ROWS STATES **/
@media (hover: hover) {
.c-table__row.has-hover:hover th, .c-table__row.has-hover:hover td {
background-color: #f4f4fd;
cursor: pointer;
}
}
.c-table__row.is-selected th, .c-table__row.is-selected td {
color: #1a1ab7;
background-color: #f4f4fb;
}
.c-table__row.is-selected th:last-child, .c-table__row.is-selected td:last-child {
border-right: 10px solid #1a1ab7;
}
@media (hover: hover) {
.c-table__row.is-selected:hover th, .c-table__row.is-selected:hover td {
color: #3B3B6C;
background-color: #f4f4fb;
}
.c-table__row.is-selected:hover th:last-child, .c-table__row.is-selected:hover td:last-child {
border-right: 10px solid #1a1ab7;
}
}
.c-table__row.is-disabled th, .c-table__row.is-disabled td {
color: #C2C2D1;
}
@media (hover: hover) {
.c-table__row.is-disabled:hover th, .c-table__row.is-disabled:hover td {
color: #C2C2D1;
}
}
/** STICKY HEADERS **/
.c-table--sticky-headers thead th,
.c-table--sticky-headers thead th:first-child {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
background: linear-gradient(180deg, white 50%, rgba(255, 255, 255, 0.7) 100%);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
box-shadow: 0 1px 0 #E6E6EC;
}
.c-table--sticky-row-headers thead th:first-child,
.c-table--sticky-row-headers .c-table__thead-th-sticky {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
background: linear-gradient(90deg, white 50%, rgba(255, 255, 255, 0.7) 100%);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background-color: transparent;
box-shadow: 0 1px 0 #E6E6EC;
}
.c-table--sticky-row-headers tbody th {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 0;
background: linear-gradient(90deg, white 50%, rgba(255, 255, 255, 0.7) 100%);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
box-shadow: 0 1px 0 #E6E6EC;
}
.c-table--sticky-row-headers.c-table--sticky-headers thead th:first-child {
z-index: 2;
background: linear-gradient(to bottom right, white 25%, rgba(255, 255, 255, 0.7) 100%);
}
.c-tabs {
display: flex;
align-items: flex-start;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
font-size: 17px;
line-height: 30px;
font-weight: 500;
}
.c-tabs__item-link {
display: block;
text-decoration: none;
color: #3B3B6C;
padding: 0 10px;
}
.c-tabs__item-link:link {
color: #3B3B6C;
}
@media (hover: hover) {
.c-tabs__item-link:hover {
color: #1d1dcd;
text-decoration: none;
}
}
.c-tabs__item-link:active {
color: #1a1ab7;
text-decoration: none;
}
.c-tabs__item-label {
display: block;
padding: 9px 0;
border-bottom: 2px solid transparent;
transition: border-bottom-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (hover: hover) {
.c-tabs__item-link:hover .c-tabs__item-label {
border-bottom-color: #c7c7f3;
}
}
.c-tabs__item-link:active .c-tabs__item-label {
border-bottom-color: #c6c6ed;
}
.c-tabs__item.is-active .c-tabs__item-label {
color: #1a1ab7;
border-bottom-color: #1a1ab7;
}
.c-tabs--s {
font-size: 15px;
line-height: 20px;
}
.c-tabs--s .c-tabs__item-label {
padding: 9px 0;
border-bottom: 2px solid transparent;
}
.c-tabs--left {
justify-content: flex-start;
}
.c-tabs--right {
justify-content: flex-end;
}
/**
* Base styles
*/
.c-textarea {
display: block;
width: 100%;
min-height: 50px;
padding: 9px 19px;
font-size: 17px;
font-weight: 500;
line-height: 30px;
color: rgba(10, 10, 71, 0.65);
background-color: #ffffff;
background-clip: padding-box;
border: 1px solid rgba(10, 10, 71, 0.25);
max-width: 100%;
/* useful when width is set to anything other than 100% */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 100px;
border-radius: 25px;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-textarea::-moz-placeholder {
color: #C2C2D1;
opacity: 1;
/* Firefox */
}
.c-textarea:-ms-input-placeholder {
color: #C2C2D1;
opacity: 1;
/* Firefox */
}
.c-textarea::placeholder {
color: #C2C2D1;
opacity: 1;
/* Firefox */
}
.c-textarea:focus, .c-textarea:focus-within {
color: #3B3B6C;
border-color: rgba(52, 163, 232, 0.625);
}
.c-textarea.is-invalid {
color: #f24242;
border-color: rgba(213, 59, 67, 0.625);
}
.c-textarea:disabled, .c-textarea.is-disabled {
color: #C2C2D1;
background-color: #F3F3F6;
cursor: default;
}
/**
* Size and padding variations
*/
.c-textarea--s {
font-size: 15px;
line-height: 20px;
padding: 9px 14px;
min-height: 39px;
border-radius: 20px;
}
.c-textarea--l {
font-size: 19px;
line-height: 30px;
padding: 14px 24px;
min-height: 59px;
border-radius: 30px;
}
/**
* Resize
*/
.c-textarea--no-resize {
resize: none;
}
.c-textarea--resize-v {
resize: vertical;
}
.c-textarea--resize-h {
resize: horizontal;
}
.c-tag {
display: flex;
flex-wrap: nowrap;
flex: 0 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
align-items: center;
height: 40px;
padding: 0 5px;
font-size: 17px;
line-height: 30px;
font-weight: 500;
border-radius: 20px;
text-align: center;
text-decoration: none;
color: #3B3B6C;
background-color: #F3F3F6;
border: 1px solid transparent;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
vertical-align: baseline;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.c-tag:link:not(:disabled) {
cursor: pointer;
color: #3B3B6C;
}
.c-tag:enabled {
cursor: pointer;
}
@media (hover: hover) {
.c-tag:enabled:hover, .c-tag[href]:hover {
color: #1d1dcd;
background-color: #f4f4fd;
text-decoration: none;
}
}
.c-tag:focus:not(:disabled), .c-tag[href]:active {
outline: 0;
color: #ffffff;
background-color: #1a1ab7;
}
@media (hover: hover) {
.c-tag:focus:not(:disabled):hover, .c-tag[href]:active:hover {
color: white;
}
}
.c-tag:enabled:active, .c-tag:link:active {
color: #ffffff;
background-color: #1a1ab7;
}
.c-tag:disabled {
cursor: default;
pointer-events: none;
opacity: 0.5;
}
.c-tag > * {
margin-right: 5px;
}
.c-tag > *:first-child {
margin-left: 5px;
}
.c-tag--s {
font-size: 15px;
line-height: 20px;
padding: 0 2.5px;
height: 30px;
}
.c-tag__label {
display: flex;
flex: 0 0 content;
align-items: center;
justify-content: center;
align-self: center;
}
.c-tag__icon-right {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
margin-right: 3px;
opacity: 0.5;
transition: opacity cubic-bezier(0.215, 0.61, 0.355, 1) 250ms;
cursor: pointer;
}
@media (hover: hover) {
.c-tag__icon-right:hover {
opacity: 0.85;
}
}
.c-tag__icon-right:active {
opacity: 1;
}
.c-tag--s .c-tag__icon-right {
margin-right: 3.5px;
}
.c-tag__avatar:first-child {
margin-left: 0;
}
.c-tag--s .c-tag__avatar:first-child {
margin-left: 2.5px;
}
.c-tooltip {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 300px;
min-width: 200px;
margin: auto;
margin-top: 10px;
padding-top: 10px;
left: 50%;
transform: translateX(-50%);
overflow: visible;
z-index: 200;
text-align: left;
opacity: 0;
pointer-events: none;
transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1), margin 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition-delay: 125ms;
/* Draw the tip
- ::before is used by default to draw the tip, with the positionning variant here below
- __tip is a child element when positionning the tip using js.
*/
/* States */
/* Inner container: by default there is no visual styles, each component has its own design */
}
.c-tooltip::before, .c-tooltip__tip {
content: "";
left: 50%;
position: absolute;
width: 10px;
height: 10px;
background-color: #0A0A47;
border-top-left-radius: 2.5px;
transform: rotate(45deg);
pointer-events: none;
z-index: 1;
}
.c-tooltip::before {
top: 15px;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.c-tooltip--js-tip-positionning {
padding: 0;
}
.c-tooltip--js-tip-positionning::before {
display: none;
}
.c-tooltip--position-top, .c-tooltip[x-placement=top] {
margin-top: -15px;
top: 0;
padding-top: 0;
padding-bottom: 15px;
transform: translateX(-50%) translateY(-100%);
justify-content: center;
}
.c-tooltip--position-top::before, .c-tooltip[x-placement=top]::before {
top: 100%;
left: 50%;
margin-top: -15px;
}
.c-tooltip--position-top.is-visible, .c-tooltip[x-placement=top].is-visible {
top: 0px;
}
.c-tooltip--position-left, .c-tooltip[x-placement=left] {
margin-top: auto !important;
top: 50%;
left: 0%;
padding-top: 0;
padding-right: 15px;
margin-left: -10px;
transform: translateX(-100%) translateY(-50%);
justify-content: flex-end;
}
.c-tooltip--position-left::before, .c-tooltip[x-placement=left]::before {
top: 50%;
left: 100%;
margin-left: -15px;
}
.c-tooltip--position-left.is-visible, .c-tooltip[x-placement=left].is-visible {
margin-left: 0;
}
.c-tooltip--position-right, .c-tooltip[x-placement=right] {
margin-top: auto !important;
top: 50%;
left: 100%;
padding-top: 0;
padding-left: 15px;
margin-left: 25px;
transform: translateY(-50%);
justify-content: flex-start;
}
.c-tooltip--position-right::before, .c-tooltip[x-placement=right]::before {
top: 50%;
left: 0;
margin-left: 15px;
}
.c-tooltip--position-right.is-visible, .c-tooltip[x-placement=right].is-visible {
margin-left: 0;
}
.c-tooltip--no-tip::before {
display: none;
}
.c-tooltip.is-visible {
pointer-events: auto;
display: flex;
opacity: 1;
margin-top: 0;
}
.c-tooltip__inner {
position: relative;
pointer-events: inherit;
z-index: 0;
}
.c-tooltip--no-fly-in-effect {
margin: 0 !important;
}
.c-tooltip.is-visible {
pointer-events: none;
}
.c-tooltip__inner {
display: block;
padding: 15px;
background-color: #ffffff;
background-size: cover;
background-position: center center;
border-radius: 5px;
text-decoration: none;
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), border 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
box-shadow: 0 10px 50px -10px rgba(10, 10, 71, 0.25) , 0 20px 30px -30px rgba(10, 10, 71, 0.1);
background-color: #0A0A47;
color: #ffffff;
padding: 10px;
font-size: 13px;
line-height: 15px;
text-align: center;
font-weight: 500;
}
.c-track {
margin: 0;
padding: 0;
list-style: none;
counter-reset: trackitems;
}
a.c-track__item-link {
counter-increment: trackitems;
text-decoration: none;
position: relative;
display: block;
padding-left: 30px;
padding-bottom: 15px;
color: inherit;
}
a.c-track__item-link::before {
position: absolute;
z-index: 1;
content: "";
width: 15px;
height: 15px;
margin-left: -30px;
margin-top: 7.5px;
overflow: hidden;
border-radius: 50%;
background-color: #ffffff;
border: 3px solid #C2C2D1;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
z-index: 2;
}
a.c-track__item-link::after {
position: absolute;
content: "";
width: 2px;
margin-left: -23.5px;
top: 0;
bottom: 0;
transform: translateY(10px);
overflow: hidden;
background-color: #C2C2D1;
z-index: 1;
}
@media (hover: hover) {
a.c-track__item-link:hover::before {
border-color: #1d1dcd;
}
}
a.c-track__item-link:active::before {
border-color: #1a1ab7;
}
.is-active a.c-track__item-link::before {
border-color: #13138a;
background-color: #13138a;
}
.c-track__item:last-child a.c-track__item-link::after {
display: none;
}
.c-track__item-title {
display: block;
margin: 0;
color: inherit;
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-track__item.is-active .c-track__item-title {
font-weight: 700;
}
.c-track__item:link .c-track__item-title .c-track__item:visited .c-track__item-title {
color: inherit;
}
@media (hover: hover) {
.c-track__item:hover .c-track__item-title {
color: #1d1dcd;
}
}
.c-track__item:active .c-track__item-title {
color: #1a1ab7;
}
.c-track__item-description {
color: #606087;
margin-bottom: 0;
}
/** BOXES VARIANT **/
.c-track--boxes .c-track__item-link {
display: block;
padding: 30px;
background-color: #ffffff;
background-size: cover;
background-position: center center;
border-radius: 10px;
text-decoration: none;
transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), border 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
box-shadow: 0 5px 25px -5px rgba(10, 10, 71, 0.15) , 0 10px 15px -15px rgba(10, 10, 71, 0.1);
margin-bottom: 20px;
padding-left: 80px;
text-decoration: none;
overflow: visible;
}
.c-track--boxes .c-track__item-link::before {
content: counter(trackitems);
width: 25px;
height: 25px;
margin-left: -45px;
margin-top: 2.5px;
font-size: 15px;
text-align: center;
line-height: 1.3;
font-weight: 700;
background-color: #C2C2D1;
color: white;
}
.c-track--boxes .c-track__item-link::after {
position: absolute;
top: 0;
transform: translateY(55px);
margin-left: -33.5px;
}
@media (hover: hover) {
.c-track--boxes .c-track__item-link:hover::before {
background-color: #1d1dcd;
}
}
.c-track--boxes .c-track__item-link:active::before {
background-color: #1a1ab7;
}
.c-track--boxes .c-track__item.is-active .c-track__item-link::before {
background-color: #13138a;
}
.c-track--boxes .c-track__item:last-child a.c-track__item-link::after {
display: none;
}
/** Temporary wip styles **/