/**
* Alert
*/
.alert {
position: relative;
display: flex;
flex-direction: row;
flex: 1 1 auto;
min-width: 0;
word-wrap: break-word;
border-style: var(--alert--border-style, var(--alert--border-top-style, var(--border-top-style)) var(--alert--border-right-style, var(--border-right-style)) var(--alert--border-bottom-style, var(--border-bottom-style)) var(--alert--border-left-style, var(--border-left-style)));
border-width: var(--alert--border-width, var(--alert--border-top-width, var(--border-top-width)) var(--alert--border-right-width, var(--border-right-width)) var(--alert--border-bottom-width, var(--border-bottom-width)) var(--alert--border-left-width, var(--border-left-width)));
border-color: var(--alert--border-color, var(--alert--border-top-color, var(--border-top-color)) var(--alert--border-right-color, var(--border-right-color)) var(--alert--border-bottom-color, var(--border-bottom-color)) var(--alert--border-left-color, var(--border-left-color)));
border-radius: var(--alert--border-radius, var(--alert--border-top-left-radius, var(--border-top-left-radius)) var(--alert--border-top-right-radius, var(--border-top-right-radius)) var(--alert--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--alert--border-bottom-left-radius, var(--border-bottom-left-radius)));
font-size: var(--alert--font-size, var(--font-size));
box-shadow: var(--alert--box-shadow, var(--alert--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--alert--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--alert--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--alert--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--alert--box-shadow-color, var(--box-shadow-color)));
background: var(--alert--background);
color: var(--alert--color);
background-clip: border-box;
transition-property: var(--alert--transition-property, background-color, color, border-color);
transition-duration: var(--alert--transition-duration, var(--transition-duration));
transition-timing-function: var(--alert--transition-timing-function, var(--transition-timing-function));
align-items: center;
}
.alert a {
color: var(--alert--link--color, var(--alert--color));
font-weight: 600;
transition-property: var(--alert--link--transition-property, color);
transition-duration: var(--alert--transition-duration, var(--transition-duration));
transition-timing-function: var(--alert--transition-timing-function, var(--transition-timing-function));
}
.alert a:hover, .alert a:focus {
color: var(--alert--link-color, var(--color));
}
.alert code {
background: var(--alert--code--background);
color: var(--alert--code--color);
}
.alert > .content {
padding: var(--alert--padding, var(--alert--padding-top, var(--padding-top)) var(--alert--padding-right, var(--padding-right)) var(--alert--padding-bottom, var(--padding-bottom)) var(--alert--padding-left, var(--padding-left)));
}
.alert > .content > .title {
font-weight: var(--alert--title--font-weight, var(--font-weight-semibold));
}
.alert > .icon {
margin-left: var(--alert--icon--margin-left, var(--alert--padding-left, var(--padding-left)));
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.alert > .dismiss {
flex: 0 0 auto;
cursor: pointer;
display: inline-block;
text-align: center;
margin-right: var(--alert--dismiss--margin-right, var(--alert--padding-right, var(--padding-right)));
}
.alert,
.alert > .content {
flex: 0 1 100%;
}
.alert > hr,
.alert > .content > hr {
margin-right: 0;
margin-left: 0;
}
/**
* Color variants
*/
.alert.-info {
--alert--background: var(--alert--info--background, var(--color-info-100));
--alert--border-top-color: var(--alert--info--border-top-color, var(--color-info-500));
--alert--border-right-color: var(--alert--info--border-right-color, var(--color-info-500));
--alert--border-bottom-color: var(
--alert--info--border-bottom-color,
var(--color-info-500)
);
--alert--border-left-color: var(--alert--info--border-left-color, var(--color-info-500));
--alert--color: var(--alert--info--color, var(--color-info-800));
}
.alert.-success {
--alert--background: var(--alert--success--background, var(--color-success-100));
--alert--border-top-color: var(
--alert--success--border-top-color,
var(--color-success-500)
);
--alert--border-right-color: var(
--alert--success--border-right-color,
var(--color-success-500)
);
--alert--border-bottom-color: var(
--alert--success--border-bottom-color,
var(--color-success-500)
);
--alert--border-left-color: var(
--alert--success--border-left-color,
var(--color-success-500)
);
--alert--color: var(--alert--success--color, var(--color-success-800));
}
.alert.-warning {
--alert--background: var(--alert--warning--background, var(--color-warning-100));
--alert--border-top-color: var(
--alert--warning--border-top-color,
var(--color-warning-500)
);
--alert--border-right-color: var(
--alert--warning--border-right-color,
var(--color-warning-500)
);
--alert--border-bottom-color: var(
--alert--warning--border-bottom-color,
var(--color-warning-500)
);
--alert--border-left-color: var(
--alert--warning--border-left-color,
var(--color-warning-500)
);
--alert--color: var(--alert--warning--color, var(--color-warning-800));
}
.alert.-danger {
--alert--background: var(--alert--danger--background, var(--color-danger-100));
--alert--border-top-color: var(--alert--danger--border-top-color, var(--color-danger-500));
--alert--border-right-color: var(
--alert--danger--border-right-color,
var(--color-danger-500)
);
--alert--border-bottom-color: var(
--alert--danger--border-bottom-color,
var(--color-danger-500)
);
--alert--border-left-color: var(
--alert--danger--border-left-color,
var(--color-danger-500)
);
--alert--color: var(--alert--danger--color, var(--color-danger-800));
}
/**
* Size variants
*/
.alert.-sm {
--alert--border-top-left-radius: var(
--alert--sm--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--alert--border-top-right-radius: var(
--alert--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--alert--border-bottom-right-radius: var(
--alert--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--alert--border-bottom-left-radius: var(
--alert--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--alert--font-size: var(
--alert--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--alert--padding-top: var(
--alert--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--alert--padding-right: var(
--alert--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--alert--padding-bottom: var(
--alert--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--alert--padding-left: var(
--alert--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
}
.alert.-md {
--alert--border-top-left-radius: var(
--alert--md--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--alert--border-top-right-radius: var(
--alert--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--alert--border-bottom-right-radius: var(
--alert--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--alert--border-bottom-left-radius: var(
--alert--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--alert--font-size: var(
--alert--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--alert--padding-top: var(
--alert--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--alert--padding-right: var(
--alert--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--alert--padding-bottom: var(
--alert--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--alert--padding-left: var(
--alert--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
}
.alert.-lg {
--alert--border-top-left-radius: var(
--alert--lg--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--alert--border-top-right-radius: var(
--alert--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--alert--border-bottom-right-radius: var(
--alert--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--alert--border-bottom-left-radius: var(
--alert--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--alert--font-size: var(
--alert--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--alert--padding-top: var(
--alert--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--alert--padding-right: var(
--alert--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--alert--padding-bottom: var(
--alert--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--alert--padding-left: var(
--alert--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
}
/**
* Badge
*/
.badge {
display: inline-block;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
color: var(--badge--color);
background: var(--badge--background);
border-style: var(--badge--border-style, var(--badge--border-top-style, var(--border-top-style)) var(--badge--border-right-style, var(--border-right-style)) var(--badge--border-bottom-style, var(--border-bottom-style)) var(--badge--border-left-style, var(--border-left-style)));
border-width: var(--badge--border-width, var(--badge--border-top-width, var(--border-top-width)) var(--badge--border-right-width, var(--border-right-width)) var(--badge--border-bottom-width, var(--border-bottom-width)) var(--badge--border-left-width, var(--border-left-width)));
border-color: var(--badge--border-color, var(--badge--border-top-color, var(--border-top-color)) var(--badge--border-right-color, var(--border-right-color)) var(--badge--border-bottom-color, var(--border-bottom-color)) var(--badge--border-left-color, var(--border-left-color)));
border-radius: var(--badge--border-radius, var(--badge--border-top-left-radius, var(--border-top-left-radius)) var(--badge--border-top-right-radius, var(--border-top-right-radius)) var(--badge--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--badge--border-bottom-left-radius, var(--border-bottom-left-radius)));
font-size: var(--badge--font-size, var(--font-size));
box-shadow: var(--badge--box-shadow, var(--badge--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--badge--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--badge--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--badge--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--badge--box-shadow-color, var(--box-shadow-color)));
padding: var(--badge--padding, var(--badge--padding-top, var(--padding-top)) var(--badge--padding-right, var(--padding-right)) var(--badge--padding-bottom, var(--padding-bottom)) var(--badge--padding-left, var(--padding-left)));
font-weight: var(--badge--font-weight, var(--font-weight-semibold));
transition-property: var(--badge--transition-property, background-color, color, border-color);
transition-duration: var(--badge--transition-duration, var(--transition-duration));
transition-timing-function: var(--badge--transition-timing-function, var(--transition-timing-function));
}
a:hover .badge, a:focus .badge {
text-decoration: none;
background: var(--badge--link--hover--background, var(--badge--background));
}
.button .badge {
position: relative;
top: -1px;
}
.badge.-pill {
--border-radius: 50%;
}
/**
* Color variants
*/
.badge.-primary {
--badge--background: var(--badge--primary--background, var(--color-primary));
--badge--border-top-color: var(
--badge--primary--border-top-color,
var(--color-primary-shade-50)
);
--badge--border-right-color: var(
--badge--primary--border-right-color,
var(--color-primary-shade-50)
);
--badge--border-bottom-color: var(
--badge--primary--border-bottom-color,
var(--color-primary-shade-50)
);
--badge--border-left-color: var(
--badge--primary--border-left-color,
var(--color-primary-shade-50)
);
--badge--color: var(--badge--primary--color, var(--contrast-text-color-primary));
}
.badge.-secondary {
--badge--background: var(--badge--secondary--background, var(--color-secondary));
--badge--border-top-color: var(
--badge--secondary--border-top-color,
var(--color-secondary-shade-50)
);
--badge--border-right-color: var(
--badge--secondary--border-right-color,
var(--color-secondary-shade-50)
);
--badge--border-bottom-color: var(
--badge--secondary--border-bottom-color,
var(--color-secondary-shade-50)
);
--badge--border-left-color: var(
--badge--secondary--border-left-color,
var(--color-secondary-shade-50)
);
--badge--color: var(--badge--secondary--color, var(--contrast-text-color-secondary));
}
.badge.-info {
--badge--background: var(--badge--info--background, var(--color-info));
--badge--border-top-color: var(--badge--info--border-top-color, var(--color-info-shade-50));
--badge--border-right-color: var(
--badge--info--border-right-color,
var(--color-info-shade-50)
);
--badge--border-bottom-color: var(
--badge--info--border-bottom-color,
var(--color-info-shade-50)
);
--badge--border-left-color: var(
--badge--info--border-left-color,
var(--color-info-shade-50)
);
--badge--color: var(--badge--info--color, var(--contrast-text-color-info));
}
.badge.-success {
--badge--background: var(--badge--success--background, var(--color-success));
--badge--border-top-color: var(
--badge--success--border-top-color,
var(--color-success-shade-50)
);
--badge--border-right-color: var(
--badge--success--border-right-color,
var(--color-success-shade-50)
);
--badge--border-bottom-color: var(
--badge--success--border-bottom-color,
var(--color-success-shade-50)
);
--badge--border-left-color: var(
--badge--success--border-left-color,
var(--color-success-shade-50)
);
--badge--color: var(--badge--success--color, var(--contrast-text-color-success));
}
.badge.-warning {
--badge--background: var(--badge--warning--background, var(--color-warning));
--badge--border-top-color: var(
--badge--warning--border-top-color,
var(--color-warning-shade-50)
);
--badge--border-right-color: var(
--badge--warning--border-right-color,
var(--color-warning-shade-50)
);
--badge--border-bottom-color: var(
--badge--warning--border-bottom-color,
var(--color-warning-shade-50)
);
--badge--border-left-color: var(
--badge--warning--border-left-color,
var(--color-warning-shade-50)
);
--badge--color: var(--badge--warning--color, var(--contrast-text-color-warning));
}
.badge.-danger {
--badge--background: var(--badge--danger--background, var(--color-danger));
--badge--border-top-color: var(
--badge--danger--border-top-color,
var(--color-danger-shade-50)
);
--badge--border-right-color: var(
--badge--danger--border-right-color,
var(--color-danger-shade-50)
);
--badge--border-bottom-color: var(
--badge--danger--border-bottom-color,
var(--color-danger-shade-50)
);
--badge--border-left-color: var(
--badge--danger--border-left-color,
var(--color-danger-shade-50)
);
--badge--color: var(--badge--danger--color, var(--contrast-text-color-danger));
}
.badge.-light {
--badge--background: var(--badge--light--background, var(--color-light));
--badge--border-top-color: var(
--badge--light--border-top-color,
var(--color-light-shade-50)
);
--badge--border-right-color: var(
--badge--light--border-right-color,
var(--color-light-shade-50)
);
--badge--border-bottom-color: var(
--badge--light--border-bottom-color,
var(--color-light-shade-50)
);
--badge--border-left-color: var(
--badge--light--border-left-color,
var(--color-light-shade-50)
);
--badge--color: var(--badge--light--color, var(--contrast-text-color-light));
}
.badge.-dark {
--badge--background: var(--badge--dark--background, var(--color-dark));
--badge--border-top-color: var(--badge--dark--border-top-color, var(--color-dark-tint-50));
--badge--border-right-color: var(
--badge--dark--border-right-color,
var(--color-dark-tint-50)
);
--badge--border-bottom-color: var(
--badge--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--badge--border-left-color: var(
--badge--dark--border-left-color,
var(--color-dark-tint-50)
);
--badge--color: var(--badge--dark--color, var(--contrast-text-color-dark));
}
/**
* Size variants
*/
.badge.-sm {
--badge--border-top-left-radius: var(
--badge--sm--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--badge--border-top-right-radius: var(
--badge--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--badge--border-bottom-right-radius: var(
--badge--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--badge--border-bottom-left-radius: var(
--badge--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--badge--font-size: var(
--badge--sm--font-size,
calc(calc(var(--font-size) * var(--size-multiplier-sm)) * 0.8)
);
--badge--padding-top: var(
--badge--sm--padding-top,
calc(calc(var(--padding-top) * var(--size-multiplier-sm)) * 0.25)
);
--badge--padding-right: var(
--badge--sm--padding-right,
calc(calc(var(--padding-right) * var(--size-multiplier-sm)) * 0.5)
);
--badge--padding-bottom: var(
--badge--sm--padding-bottom,
calc(calc(var(--padding-bottom) * var(--size-multiplier-sm)) * 0.25)
);
--badge--padding-left: var(
--badge--sm--padding-left,
calc(calc(var(--padding-left) * var(--size-multiplier-sm)) * 0.5)
);
}
.badge.-md {
--badge--border-top-left-radius: var(
--badge--md--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--badge--border-top-right-radius: var(
--badge--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--badge--border-bottom-right-radius: var(
--badge--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--badge--border-bottom-left-radius: var(
--badge--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--badge--font-size: var(
--badge--md--font-size,
calc(calc(var(--font-size) * var(--size-multiplier-md)) * 0.8)
);
--badge--padding-top: var(
--badge--md--padding-top,
calc(calc(var(--padding-top) * var(--size-multiplier-md)) * 0.25)
);
--badge--padding-right: var(
--badge--md--padding-right,
calc(calc(var(--padding-right) * var(--size-multiplier-md)) * 0.5)
);
--badge--padding-bottom: var(
--badge--md--padding-bottom,
calc(calc(var(--padding-bottom) * var(--size-multiplier-md)) * 0.25)
);
--badge--padding-left: var(
--badge--md--padding-left,
calc(calc(var(--padding-left) * var(--size-multiplier-md)) * 0.5)
);
}
.badge.-lg {
--badge--border-top-left-radius: var(
--badge--lg--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--badge--border-top-right-radius: var(
--badge--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--badge--border-bottom-right-radius: var(
--badge--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--badge--border-bottom-left-radius: var(
--badge--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--badge--font-size: var(
--badge--lg--font-size,
calc(calc(var(--font-size) * var(--size-multiplier-lg)) * 0.8)
);
--badge--padding-top: var(
--badge--lg--padding-top,
calc(calc(var(--padding-top) * var(--size-multiplier-lg)) * 0.25)
);
--badge--padding-right: var(
--badge--lg--padding-right,
calc(calc(var(--padding-right) * var(--size-multiplier-lg)) * 0.5)
);
--badge--padding-bottom: var(
--badge--lg--padding-bottom,
calc(calc(var(--padding-bottom) * var(--size-multiplier-lg)) * 0.25)
);
--badge--padding-left: var(
--badge--lg--padding-left,
calc(calc(var(--padding-left) * var(--size-multiplier-lg)) * 0.5)
);
}
/**
* Breadcrumb
*/
.breadcrumb {
display: flex;
margin-bottom: var(--breadcrumb--margin-bottom, var(--margin-bottom));
font-size: var(--breadcrumb--font-size, var(--font-size));
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
padding-left: 0;
list-style: none;
}
/**
* Color variants
*/
.breadcrumb.-light {
--breadcrumb--color: var(--breadcrumb--light--color, var(--color-dark));
--breadcrumb--link--color: var(--breadcrumb--light--link--color, var(--color-primary));
--breadcrumb--active--color: var(--breadcrumb--light--active--color, var(--color-gray-500));
}
.breadcrumb.-dark {
--breadcrumb--color: var(--breadcrumb--dark--color, var(--color-light));
--breadcrumb--link--color: var(--breadcrumb--dark--link--color, var(--color-primary));
--breadcrumb--active--color: var(--breadcrumb--dark--active--color, var(--color-gray-500));
}
/**
* Size variants
*/
.breadcrumb.-sm {
--breadcrumb--font-size: var(
--breadcrumb--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--breadcrumb--padding-left: var(
--breadcrumb--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
--breadcrumb--padding-right: var(
--breadcrumb--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
}
.breadcrumb.-md {
--breadcrumb--font-size: var(
--breadcrumb--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--breadcrumb--padding-left: var(
--breadcrumb--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
--breadcrumb--padding-right: var(
--breadcrumb--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
}
.breadcrumb.-lg {
--breadcrumb--font-size: var(
--breadcrumb--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--breadcrumb--padding-left: var(
--breadcrumb--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
--breadcrumb--padding-right: var(
--breadcrumb--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
}
/**
* Breadcrumb Item
*/
.breadcrumb-item {
margin-bottom: 0;
padding-left: var(--breadcrumb--padding-left, var(--padding-left));
color: var(--breadcrumb--color);
}
.breadcrumb-item a {
color: var(--breadcrumb--color);
}
.breadcrumb-item a[href], .breadcrumb-item a[to] {
color: var(--breadcrumb--link--color, var(--breadcrumb--color));
}
.breadcrumb-item.-active {
color: var(--breadcrumb--active--color, var(--breadcrumb--color));
}
.breadcrumb-item > span {
display: inline-block;
}
.breadcrumb-item:first-of-type {
padding-left: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
padding-right: var(--breadcrumb--padding-right, var(--padding-right));
display: inline-block;
content: var(--breadcrumb--separator, "/");
}
.breadcrumb-item + .breadcrumb-item:hover::before {
text-decoration: underline;
}
.breadcrumb-item + .breadcrumb-item:hover::before {
text-decoration: none;
}
.breadcrumb-item :not([href], [to]) {
text-decoration: none;
}
.breadcrumb-item [href],
.breadcrumb-item [to] {
cursor: pointer;
}
/**
* Button
*/
.button {
display: inline-flex;
font-weight: var(--button--font-weight, var(--font-weight-normal));
font-size: var(--button--font-size, var(--font-size));
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
color: var(--button--color);
background: var(--button--background);
border-style: var(--button--border-style, var(--button--border-top-style, var(--border-top-style)) var(--button--border-right-style, var(--border-right-style)) var(--button--border-bottom-style, var(--border-bottom-style)) var(--button--border-left-style, var(--border-left-style)));
border-width: var(--button--border-width, var(--button--border-top-width, var(--border-top-width)) var(--button--border-right-width, var(--border-right-width)) var(--button--border-bottom-width, var(--border-bottom-width)) var(--button--border-left-width, var(--border-left-width)));
border-color: var(--button--border-color, var(--button--border-top-color, var(--border-top-color)) var(--button--border-right-color, var(--border-right-color)) var(--button--border-bottom-color, var(--border-bottom-color)) var(--button--border-left-color, var(--border-left-color)));
border-radius: var(--button--border-radius, var(--button--border-top-left-radius, var(--border-top-left-radius)) var(--button--border-top-right-radius, var(--border-top-right-radius)) var(--button--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--button--border-bottom-left-radius, var(--border-bottom-left-radius)));
box-shadow: var(--button--box-shadow, var(--button--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--button--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--button--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--button--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--button--box-shadow-color, var(--box-shadow-color)));
padding: var(--button--padding, var(--button--padding-top, var(--padding-top)) var(--button--padding-right, var(--padding-right)) var(--button--padding-bottom, var(--padding-bottom)) var(--button--padding-left, var(--padding-left)));
justify-content: center;
align-items: center;
transition-property: var(--button--transition-property, background-color, color, border-color);
transition-duration: var(--button--transition-duration, var(--transition-duration));
transition-timing-function: var(--button--transition-timing-function, var(--transition-timing-function));
}
.button:not(:disabled, .-disabled) {
cursor: pointer;
}
.button:not(:disabled, .-disabled):hover, .button:not(:disabled, .-disabled):focus, .button:not(:disabled, .-disabled).-hovered, .button:not(:disabled, .-disabled).-focused {
background: var(--button--hover--background, var(--button--background));
border-color: var(--button--hover--border-color, var(--button--hover--border-top-color, var(--button--border-top-color)) var(--button--hover--border-right-color, var(--button--border-right-color)) var(--button--hover--border-bottom-color, var(--button--border-bottom-color)) var(--button--hover--border-left-color, var(--button--border-left-color)));
text-decoration: none;
color: var(--button--color);
outline: 0;
}
.button:not(:disabled, .-disabled):active, .button:not(:disabled, .-disabled).-active {
background: var(--button--active--background, var(--button--background));
}
.button.-disabled, .button:disabled {
opacity: var(--button--disabled--opacity, 0.8);
box-shadow: none;
cursor: not-allowed;
}
.button.-block {
display: flex;
width: 100%;
}
.button.-block + .button.-block {
margin-left: 0;
margin-top: var(--button--block--margin-top, var(--margin-top));
}
.button.-link {
color: var(--button--link--color, var(--button--color));
box-shadow: none;
background-color: transparent;
border-color: transparent;
}
.button.-link:not(:disabled, .-disabled):hover, .button.-link:not(:disabled, .-disabled):focus, .button.-link:not(:disabled, .-disabled):active, .button.-link:not(:disabled, .-disabled).-hovered, .button.-link:not(:disabled, .-disabled).-focused, .button.-link:not(:disabled, .-disabled).-active {
color: var(--button--link--active--color, var(--button--color));
background-color: transparent;
border-color: transparent;
box-shadow: none;
text-decoration: underline;
}
.button.-link:disabled, .button.-link.-disabled {
pointer-events: none;
}
.button.-outline {
background: transparent;
color: var(--button--background);
border-color: var(--button--background);
box-shadow: none;
}
.button.-outline:not(:disabled, .-disabled):hover, .button.-outline:not(:disabled, .-disabled):focus, .button.-outline:not(:disabled, .-disabled):active, .button.-outline:not(:disabled, .-disabled).-hovered, .button.-outline:not(:disabled, .-disabled).-focused, .button.-outline:not(:disabled, .-disabled).-active {
border-color: var(--button--background);
background: var(--button--background);
color: var(--button--color);
}
.button.-circle {
border-radius: 50%;
width: var(--button--circle--size);
height: var(--button--circle--size);
padding: 0;
}
.button.-loading {
pointer-events: none;
cursor: default;
}
.button .loader {
width: var(--button--font-size);
height: var(--button--font-size);
}
.button .loader > svg > circle {
stroke: var(--button--color) !important;
}
.button .button-icon,
.button .button-content {
display: inline-flex;
justify-content: center;
align-items: center;
}
.button .button-icon + .button-content {
margin-left: var(--button--icon--margin-right, var(--margin-right-1-2));
}
.button-group:not(.-vertical) > .button:not(:first-of-type) {
border-left-color: var(--button--border-left-color);
}
.button-group.-vertical > .button:not(:first-of-type) {
border-top-color: var(--button--border-top-color);
}
a.button.-disabled,
*:disabled a.button {
pointer-events: none;
}
input[type=submit].-block,
input[type=reset].-block,
input[type=button].-block {
width: 100%;
}
/**
* Color variants
*/
.button.-primary {
--button--background: var(--button--primary--background, var(--color-primary));
--button--hover--background: var(
--button--primary--hover--background,
var(--color-primary-shade-50)
);
--button--active--background: var(
--button--primary--active--background,
var(--color-primary-shade-100)
);
--button--border-top-color: var(
--button--primary--border-top-color,
var(--color-primary-shade-50)
);
--button--border-right-color: var(
--button--primary--border-right-color,
var(--color-primary-shade-50)
);
--button--border-bottom-color: var(
--button--primary--border-bottom-color,
var(--color-primary-shade-50)
);
--button--border-left-color: var(
--button--primary--border-left-color,
var(--color-primary-shade-50)
);
--button--color: var(--button--primary--color, var(--contrast-text-color-primary));
--button--link--color: var(--button--primary--link--color, var(--color-primary));
--button--link--active--color: var(
--button--primary--link--active--color,
var(--color-primary-shade-50)
);
}
.button.-secondary {
--button--background: var(--button--secondary--background, var(--color-secondary));
--button--hover--background: var(
--button--secondary--hover--background,
var(--color-secondary-shade-50)
);
--button--active--background: var(
--button--secondary--active--background,
var(--color-secondary-shade-100)
);
--button--border-top-color: var(
--button--secondary--border-top-color,
var(--color-secondary-shade-50)
);
--button--border-right-color: var(
--button--secondary--border-right-color,
var(--color-secondary-shade-50)
);
--button--border-bottom-color: var(
--button--secondary--border-bottom-color,
var(--color-secondary-shade-50)
);
--button--border-left-color: var(
--button--secondary--border-left-color,
var(--color-secondary-shade-50)
);
--button--color: var(--button--secondary--color, var(--contrast-text-color-secondary));
--button--link--color: var(--button--secondary--link--color, var(--color-secondary));
--button--link--active--color: var(
--button--secondary--link--active--color,
var(--color-secondary-shade-50)
);
}
.button.-light {
--button--background: var(--button--light--background, var(--color-light));
--button--hover--background: var(
--button--light--hover--background,
var(--color-light-shade-50)
);
--button--active--background: var(
--button--light--active--background,
var(--color-light-shade-100)
);
--button--border-top-color: var(
--button--light--border-top-color,
var(--color-light-shade-50)
);
--button--border-right-color: var(
--button--light--border-right-color,
var(--color-light-shade-50)
);
--button--border-bottom-color: var(
--button--light--border-bottom-color,
var(--color-light-shade-50)
);
--button--border-left-color: var(
--button--light--border-left-color,
var(--color-light-shade-50)
);
--button--color: var(--button--light--color, var(--contrast-text-color-light));
--button--link--color: var(--button--light--link--color, var(--color-light));
--button--link--active--color: var(
--button--light--link--active--color,
var(--color-light-shade-100)
);
}
.button.-dark {
--button--background: var(--button--dark--background, var(--color-dark));
--button--hover--background: var(
--button--dark--hover--background,
var(--color-dark-tint-50)
);
--button--active--background: var(
--button--dark--active--background,
var(--color-dark-tint-100)
);
--button--border-top-color: var(
--button--dark--border-top-color,
var(--color-dark-tint-50)
);
--button--border-right-color: var(
--button--dark--border-right-color,
var(--color-dark-tint-50)
);
--button--border-bottom-color: var(
--button--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--button--border-left-color: var(
--button--dark--border-left-color,
var(--color-dark-tint-50)
);
--button--color: var(--button--dark--color, var(--contrast-text-color-dark));
--button--link--color: var(--button--dark--link--color, var(--color-dark));
--button--link--active--color: var(
--button--dark--link--active--color,
var(--color-dark-tint-50)
);
}
.button.-info {
--button--background: var(--button--info--background, var(--color-info));
--button--hover--background: var(
--button--info--hover--background,
var(--color-info-shade-50)
);
--button--active--background: var(
--button--info--active--background,
var(--color-info-shade-100)
);
--button--border-top-color: var(
--button--info--border-top-color,
var(--color-info-shade-50)
);
--button--border-right-color: var(
--button--info--border-right-color,
var(--color-info-shade-50)
);
--button--border-bottom-color: var(
--button--info--border-bottom-color,
var(--color-info-shade-50)
);
--button--border-left-color: var(
--button--info--border-left-color,
var(--color-info-shade-50)
);
--button--color: var(--button--info--color, var(--contrast-text-color-info));
--button--link--color: var(--button--info--link--color, var(--color-info));
--button--link--active--color: var(
--button--info--link--active--color,
var(--color-info-shade-50)
);
}
.button.-success {
--button--background: var(--button--success--background, var(--color-success));
--button--hover--background: var(
--button--success--hover--background,
var(--color-success-shade-50)
);
--button--active--background: var(
--button--success--active--background,
var(--color-success-shade-100)
);
--button--border-top-color: var(
--button--success--border-top-color,
var(--color-success-shade-50)
);
--button--border-right-color: var(
--button--success--border-right-color,
var(--color-success-shade-50)
);
--button--border-bottom-color: var(
--button--success--border-bottom-color,
var(--color-success-shade-50)
);
--button--border-left-color: var(
--button--success--border-left-color,
var(--color-success-shade-50)
);
--button--color: var(--button--success--color, var(--contrast-text-color-success));
--button--link--color: var(--button--success--link--color, var(--color-success));
--button--link--active--color: var(
--button--success--link--active--color,
var(--color-success-shade-50)
);
}
.button.-warning {
--button--background: var(--button--warning--background, var(--color-warning));
--button--hover--background: var(
--button--warning--hover--background,
var(--color-warning-shade-50)
);
--button--active--background: var(
--button--warning--active--background,
var(--color-warning-shade-100)
);
--button--border-top-color: var(
--button--warning--border-top-color,
var(--color-warning-shade-50)
);
--button--border-right-color: var(
--button--warning--border-right-color,
var(--color-warning-shade-50)
);
--button--border-bottom-color: var(
--button--warning--border-bottom-color,
var(--color-warning-shade-50)
);
--button--border-left-color: var(
--button--warning--border-left-color,
var(--color-warning-shade-50)
);
--button--color: var(--button--warning--color, var(--contrast-text-color-warning));
--button--link--color: var(--button--warning--link--color, var(--color-warning));
--button--link--active--color: var(
--button--warning--link--active--color,
var(--color-warning-shade-50)
);
}
.button.-danger {
--button--background: var(--button--danger--background, var(--color-danger));
--button--hover--background: var(
--button--danger--hover--background,
var(--color-danger-shade-50)
);
--button--active--background: var(
--button--danger--active--background,
var(--color-danger-shade-100)
);
--button--border-top-color: var(
--button--danger--border-top-color,
var(--color-danger-shade-50)
);
--button--border-right-color: var(
--button--danger--border-right-color,
var(--color-danger-shade-50)
);
--button--border-bottom-color: var(
--button--danger--border-bottom-color,
var(--color-danger-shade-50)
);
--button--border-left-color: var(
--button--danger--border-left-color,
var(--color-danger-shade-50)
);
--button--color: var(--button--danger--color, var(--contrast-text-color-danger));
--button--link--color: var(--button--danger--link--color, var(--color-danger));
--button--link--active--color: var(
--button--danger--link--active--color,
var(--color-danger-shade-50)
);
}
/**
* Size variants
*/
.button.-sm {
--button--border-top-left-radius: var(
--button--sm--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--button--border-top-right-radius: var(
--button--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--button--border-bottom-right-radius: var(
--button--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--button--border-bottom-left-radius: var(
--button--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--button--font-size: var(
--button--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--button--padding-top: var(
--button--sm--padding-top,
calc(calc(var(--padding-top) * var(--size-multiplier-sm)) * 3 / 4)
);
--button--padding-right: var(
--button--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--button--padding-bottom: var(
--button--sm--padding-bottom,
calc(calc(var(--padding-bottom) * var(--size-multiplier-sm)) * 3 / 4)
);
--button--padding-left: var(
--button--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
--button--circle--size: var(
--button--sm--circle--size,
calc(34px * var(--size-multiplier-sm))
);
}
.button.-md {
--button--border-top-left-radius: var(
--button--md--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--button--border-top-right-radius: var(
--button--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--button--border-bottom-right-radius: var(
--button--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--button--border-bottom-left-radius: var(
--button--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--button--font-size: var(
--button--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--button--padding-top: var(
--button--md--padding-top,
calc(calc(var(--padding-top) * var(--size-multiplier-md)) * 3 / 4)
);
--button--padding-right: var(
--button--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--button--padding-bottom: var(
--button--md--padding-bottom,
calc(calc(var(--padding-bottom) * var(--size-multiplier-md)) * 3 / 4)
);
--button--padding-left: var(
--button--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
--button--circle--size: var(
--button--md--circle--size,
calc(42px * var(--size-multiplier-md))
);
}
.button.-lg {
--button--border-top-left-radius: var(
--button--lg--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--button--border-top-right-radius: var(
--button--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--button--border-bottom-right-radius: var(
--button--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--button--border-bottom-left-radius: var(
--button--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--button--font-size: var(
--button--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--button--padding-top: var(
--button--lg--padding-top,
calc(calc(var(--padding-top) * var(--size-multiplier-lg)) * 3 / 4)
);
--button--padding-right: var(
--button--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--button--padding-bottom: var(
--button--lg--padding-bottom,
calc(calc(var(--padding-bottom) * var(--size-multiplier-lg)) * 3 / 4)
);
--button--padding-left: var(
--button--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
--button--circle--size: var(
--button--lg--circle--size,
calc(49px * var(--size-multiplier-lg))
);
}
/**
* Button Group
*/
.button-group {
position: relative;
display: inline-flex;
vertical-align: middle;
box-sizing: border-box;
}
.button-group .button {
position: relative;
flex: 0 1 auto;
z-index: 0;
margin-right: 0;
font-size: var(--button-group--font-size, var(--button--font-size));
padding: var(--button-group--padding, var(--button-group--padding-top, var(--button--padding-top)) var(--button-group--padding-right, var(--button--padding-right)) var(--button-group--padding-bottom, var(--button--padding-bottom)) var(--button-group--padding-left, var(--button--padding-left)));
}
.button-group .button:hover, .button-group .button:focus, .button-group .button:active, .button-group .button.-active {
z-index: 1;
}
.button-group .button.-circle {
border-radius: 100%;
width: var(--button--circle--size);
height: var(--button--circle--size);
padding: 0;
}
.button-group > .button:first-child {
margin-left: 0;
}
.button-group.-block {
display: flex;
flex-basis: 100%;
}
.button-group.-block > .button {
flex-basis: 100%;
}
.button-group > .button,
.button-group > .button-group > .button,
.button-group > [class$=-wrapper] .button {
border-radius: 0;
}
.button-group:not(.-vertical) > .button:last-child,
.button-group:not(.-vertical) > [class$=-wrapper]:last-child > * > .button:last-child {
border-top-right-radius: var(--button-group--border-top-right-radius, var(--button--border-top-right-radius));
border-bottom-right-radius: var(--button-group--border-bottom-right-radius, var(--button--border-bottom-right-radius));
}
.button-group:not(.-vertical) > .button:first-child,
.button-group:not(.-vertical) > [class$=-wrapper]:first-child > * > .button:first-child {
border-top-left-radius: var(--button-group--border-top-left-radius, var(--button--border-top-left-radius));
border-bottom-left-radius: var(--button-group--border-bottom-left-radius, var(--button--border-bottom-left-radius));
}
.button-group:not(.-vertical) > .button:not(:last-child),
.button-group:not(.-vertical) > .button-group:not(:last-child) .button,
.button-group:not(.-vertical) > [class$=-wrapper]:not(:last-child) > * > .button,
.button-group:not(.-vertical) > .button-group:not(:last-child) [class$=-wrapper] > * > .button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
.button-group:not(.-vertical) > .button:not(:first-child),
.button-group:not(.-vertical) > .button-group:not(:first-child) .button,
.button-group:not(.-vertical) > [class$=-wrapper]:not(:first-child) > * > .button,
.button-group:not(.-vertical) > .button-group:not(:first-child) [class$=-wrapper] > * > .button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.button-group.-vertical {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.button-group.-vertical .button,
.button-group.-vertical .button-group,
.button-group.-vertical [class$=-wrapper] {
width: 100%;
}
.button-group.-vertical > .button:last-child,
.button-group.-vertical > [class$=-wrapper]:last-child > * > .button:last-child {
border-bottom-left-radius: var(--button-group--border-bottom-left-radius, var(--button--border-bottom-left-radius));
border-bottom-right-radius: var(--button-group--border-bottom-right-radius, var(--button--border-bottom-right-radius));
}
.button-group.-vertical > .button:first-child,
.button-group.-vertical > [class$=-wrapper]:first-child > * > .button:first-child {
border-top-left-radius: var(--button-group--border-top-left-radius, var(--button--border-top-left-radius));
border-top-right-radius: var(--button-group--border-top-right-radius, var(--button--border-top-right-radius));
}
.button-group.-vertical > .button:not(:last-child),
.button-group.-vertical > .button-group:not(:last-child) .button,
.button-group.-vertical > [class$=-wrapper]:not(:last-child) > * > .button,
.button-group.-vertical > .button-group:not(:last-child) [class$=-wrapper] > * > .button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}
.button-group.-vertical > .button:not(:first-child),
.button-group.-vertical > .button-group:not(:first-child) .button,
.button-group.-vertical > [class$=-wrapper]:not(:first-child) > * > .button,
.button-group.-vertical > .button-group:not(:first-child) [class$=-wrapper] > * > .button {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/**
* Card
*/
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-clip: border-box;
border-radius: var(--card--border-radius, var(--card--border-top-left-radius, var(--border-top-left-radius)) var(--card--border-top-right-radius, var(--border-top-right-radius)) var(--card--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--card--border-bottom-left-radius, var(--border-bottom-left-radius)));
font-size: var(--card--font-size, var(--font-size));
box-shadow: var(--card--box-shadow, var(--card--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--card--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--card--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--card--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--card--box-shadow-color, var(--box-shadow-color)));
transition-property: var(--card--transition-property, var(--card--transition-property, background-color));
transition-duration: var(--card--transition-duration, var(--card--transition-duration, var(--transition-duration)));
transition-timing-function: var(--card--transition-timing-function, var(--transition-timing-function));
}
.card > .card-header {
color: var(--card--header--color, var(--card--color));
background: var(--card--header--background, var(--card--background));
border-style: var(--card--header--border-style, var(--card--header--border-top-style, var(--card--border-top-style, var(--border-top-style))) var(--card--header--border-right-style, var(--card--border-right-style, var(--border-right-style))) var(--card--header--border-bottom-style, var(--card--border-bottom-style, var(--border-bottom-style))) var(--card--header--border-left-style, var(--card--border-left-style, var(--border-left-style))));
border-width: var(--card--header--border-width, var(--card--header--border-top-width, var(--card--border-top-width, var(--border-top-width))) var(--card--header--border-right-width, var(--card--border-right-width, var(--border-right-width))) var(--card--header--border-bottom-width, var(--card--border-bottom-width, var(--border-bottom-width))) var(--card--header--border-left-width, var(--card--border-left-width, var(--border-left-width))));
border-color: var(--card--header--border-color, var(--card--header--border-top-color, var(--card--border-top-color, var(--border-top-color))) var(--card--header--border-right-color, var(--card--border-right-color, var(--border-right-color))) var(--card--header--border-bottom-color, var(--card--border-bottom-color, var(--border-bottom-color))) var(--card--header--border-left-color, var(--card--border-left-color, var(--border-left-color))));
padding: var(--card--header--padding, var(--card--header--padding-top, var(--card--padding-top, var(--padding-top))) var(--card--header--padding-right, var(--card--padding-right, var(--padding-right))) var(--card--header--padding-bottom, var(--card--padding-bottom, var(--padding-bottom))) var(--card--header--padding-left, var(--card--padding-left, var(--padding-left))));
border-bottom-width: 0;
margin-bottom: 0;
transition-property: var(--card--header--transition-property, var(--card--transition-property, border-color));
transition-duration: var(--card--header--transition-duration, var(--card--transition-duration, var(--transition-duration)));
transition-timing-function: var(--card--header--transition-timing-function, var(--card--transition-timing-function, var(--transition-timing-function)));
}
.card > .card-header > h1,
.card > .card-header > h2,
.card > .card-header > h3,
.card > .card-header > h4,
.card > .card-header > h5,
.card > .card-header > h6,
.card > .card-header > p,
.card > .card-header > .h1,
.card > .card-header > .h2,
.card > .card-header > .h3,
.card > .card-header > .h4,
.card > .card-header > .h5,
.card > .card-header > .h6,
.card > .card-header > .p {
margin-bottom: 0;
margin-top: 0;
}
.card > .card-header + img,
.card > .card-header + .card-body {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.card > .card-header + .list-group .list-group-item:first-of-type {
border-top: 0;
}
.card > .card-header:first-of-type {
border-top-left-radius: var(--card--header--border-top-left-radius, var(--card--border-top-left-radius));
border-top-right-radius: var(--card--header--border-top-right-radius, var(--card--border-top-right-radius));
}
.card > .card-body {
flex: 1 1 auto;
background: var(--card--body--background, var(--card--background));
border-style: var(--card--body--border-style, var(--card--body--border-top-style, var(--card--border-top-style, var(--border-top-style))) var(--card--body--border-right-style, var(--card--border-right-style, var(--border-right-style))) var(--card--body--border-bottom-style, var(--card--border-bottom-style, var(--border-bottom-style))) var(--card--body--border-left-style, var(--card--border-left-style, var(--border-left-style))));
border-width: var(--card--body--border-width, var(--card--body--border-top-width, var(--card--border-top-width, var(--border-top-width))) var(--card--body--border-right-width, var(--card--border-right-width, var(--border-right-width))) var(--card--body--border-bottom-width, var(--card--border-bottom-width, var(--border-bottom-width))) var(--card--body--border-left-width, var(--card--border-left-width, var(--border-left-width))));
border-color: var(--card--body--border-color, var(--card--body--border-top-color, var(--card--border-top-color, var(--border-top-color))) var(--card--body--border-right-color, var(--card--border-right-color, var(--border-right-color))) var(--card--body--border-bottom-color, var(--card--border-bottom-color, var(--border-bottom-color))) var(--card--body--border-left-color, var(--card--border-left-color, var(--border-left-color))));
border-radius: var(--card--body--border-radius, var(--card--body--border-top-left-radius, var(--card--border-top-left-radius, var(--border-top-left-radius))) var(--card--body--border-top-right-radius, var(--card--border-top-right-radius, var(--border-top-right-radius))) var(--card--body--border-bottom-right-radius, var(--card--border-bottom-right-radius, var(--border-bottom-right-radius))) var(--card--body--border-bottom-left-radius, var(--card--border-bottom-left-radius, var(--border-bottom-left-radius))));
padding: var(--card--body--padding, var(--card--body--padding-top, var(--card--padding-top, var(--padding-top))) var(--card--body--padding-right, var(--card--padding-right, var(--padding-right))) var(--card--body--padding-bottom, var(--card--padding-bottom, var(--padding-bottom))) var(--card--body--padding-left, var(--card--padding-left, var(--padding-left))));
color: var(--card--body--color, var(--card--color));
transition-property: var(--card--body--transition-property, var(--card--transition-property, border-color));
transition-duration: var(--card--body--transition-duration, var(--card--transition-duration, var(--transition-duration)));
transition-timing-function: var(--card--body--transition-timing-function, var(--card--transition-timing-function, var(--transition-timing-function)));
}
.card > .card-body:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.card > .card-body:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card > .card-footer {
background: var(--card--footer--background, var(--card--background));
border-style: var(--card--footer--border-style, var(--card--footer--border-top-style, var(--card--border-top-style, var(--border-top-style))) var(--card--footer--border-right-style, var(--card--border-right-style, var(--border-right-style))) var(--card--footer--border-bottom-style, var(--card--border-bottom-style, var(--border-bottom-style))) var(--card--footer--border-left-style, var(--card--border-left-style, var(--border-left-style))));
border-width: var(--card--footer--border-width, var(--card--footer--border-top-width, var(--card--border-top-width, var(--border-top-width))) var(--card--footer--border-right-width, var(--card--border-right-width, var(--border-right-width))) var(--card--footer--border-bottom-width, var(--card--border-bottom-width, var(--border-bottom-width))) var(--card--footer--border-left-width, var(--card--border-left-width, var(--border-left-width))));
border-color: var(--card--footer--border-color, var(--card--footer--border-top-color, var(--card--border-top-color, var(--border-top-color))) var(--card--footer--border-right-color, var(--card--border-right-color, var(--border-right-color))) var(--card--footer--border-bottom-color, var(--card--border-bottom-color, var(--border-bottom-color))) var(--card--footer--border-left-color, var(--card--border-left-color, var(--border-left-color))));
padding: var(--card--footer--padding, var(--card--footer--padding-top, var(--card--padding-top, var(--padding-top))) var(--card--footer--padding-right, var(--card--padding-right, var(--padding-right))) var(--card--footer--padding-bottom, var(--card--padding-bottom, var(--padding-bottom))) var(--card--footer--padding-left, var(--card--padding-left, var(--padding-left))));
color: var(--card--footer--color, var(--card--color));
border-top-width: 0;
transition-property: var(--card--footer--transition-property, var(--card--transition-property, border-color));
transition-duration: var(--card--footer--transition-duration, var(--card--transition-duration, var(--transition-duration)));
transition-timing-function: var(--card--footer--transition-timing-function, var(--card--transition-timing-function, var(--transition-timing-function)));
border-bottom-left-radius: var(--card--footer--border-bottom-left-radius, var(--card--border-bottom-left-radius));
border-bottom-right-radius: var(--card--footer--border-bottom-right-radius, var(--card--border-bottom-right-radius));
}
.card > img {
width: 100%;
border-top-left-radius: var(--card--img--border-top-left-radius, var(--card--border-top-left-radius, var(--border-top-left-radius)));
border-top-right-radius: var(--card--img--border-top-right-radius, var(--card--border-top-right-radius, var(--border-top-right-radius)));
}
.card > hr {
margin-right: 0;
margin-left: 0;
}
.card > .list-group:first-of-type,
.card .list-group-item:first-of-type {
border-top-left-radius: var(--card--list-group--border-top-left-radius, var(--card--border-top-left-radius));
border-top-right-radius: var(--card--list-group--border-top-right-radius, var(--card--border-top-right-radius));
}
.card > .list-group:last-of-type,
.card .list-group-item:last-of-type {
border-bottom-left-radius: var(--card--list-group--border-bottom-left-radius, var(--card--border-bottom-left-radius));
border-bottom-right-radius: var(--card--list-group--border-bottom-right-radius, var(--card--border-bottom-right-radius));
}
/**
* Color variants
*/
.card.-primary {
--card--background: var(--card--primary--background, var(--color-primary));
--card--border-top-color: var(
--card--primary--border-top-color,
var(--color-primary-shade-50)
);
--card--border-right-color: var(
--card--primary--border-right-color,
var(--color-primary-shade-50)
);
--card--border-bottom-color: var(
--card--primary--border-bottom-color,
var(--color-primary-shade-50)
);
--card--border-left-color: var(
--card--primary--border-left-color,
var(--color-primary-shade-50)
);
--card--color: var(--card--primary--color, var(--contrast-text-color-primary));
--card--header--background: var(
--card--primary--header--background,
var(--color-primary-shade-50)
);
--card--footer--background: var(
--card--primary--footer--background,
var(--color-primary-shade-50)
);
}
.card.-secondary {
--card--background: var(--card--secondary--background, var(--color-secondary));
--card--border-top-color: var(
--card--secondary--border-top-color,
var(--color-secondary-shade-50)
);
--card--border-right-color: var(
--card--secondary--border-right-color,
var(--color-secondary-shade-50)
);
--card--border-bottom-color: var(
--card--secondary--border-bottom-color,
var(--color-secondary-shade-50)
);
--card--border-left-color: var(
--card--secondary--border-left-color,
var(--color-secondary-shade-50)
);
--card--color: var(--card--secondary--color, var(--contrast-text-color-secondary));
--card--header--background: var(
--card--secondary--header--background,
var(--color-secondary-shade-50)
);
--card--footer--background: var(
--card--secondary--footer--background,
var(--color-secondary-shade-50)
);
}
.card.-light {
--card--background: var(--card--light--background, var(--color-white));
--card--border-top-color: var(--card--light--border-top-color, var(--color-light-shade-50));
--card--border-right-color: var(
--card--light--border-right-color,
var(--color-light-shade-50)
);
--card--border-bottom-color: var(
--card--light--border-bottom-color,
var(--color-light-shade-50)
);
--card--border-left-color: var(
--card--light--border-left-color,
var(--color-light-shade-50)
);
--card--color: var(--card--light--color, var(--contrast-text-color-light));
--card--header--background: var(--card--light--header--background, var(--color-light-250));
--card--footer--background: var(--card--light--footer--background, var(--color-light-250));
}
.card.-dark {
--card--background: var(--card--dark--background, var(--color-dark));
--card--border-top-color: var(--card--dark--border-top-color, var(--color-dark-tint-50));
--card--border-right-color: var(
--card--dark--border-right-color,
var(--color-dark-tint-50)
);
--card--border-bottom-color: var(
--card--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--card--border-left-color: var(--card--dark--border-left-color, var(--color-dark-tint-50));
--card--color: var(--card--dark--color, var(--contrast-text-color-dark));
--card--header--background: var(
--card--dark--header--background,
var(--color-dark-tint-50)
);
--card--footer--background: var(
--card--dark--footer--background,
var(--color-dark-tint-50)
);
}
.card.-info {
--card--background: var(--card--info--background, var(--color-info));
--card--border-top-color: var(--card--info--border-top-color, var(--color-info-shade-50));
--card--border-right-color: var(
--card--info--border-right-color,
var(--color-info-shade-50)
);
--card--border-bottom-color: var(
--card--info--border-bottom-color,
var(--color-info-shade-50)
);
--card--border-left-color: var(--card--info--border-left-color, var(--color-info-shade-50));
--card--color: var(--card--info--color, var(--contrast-text-color-info));
--card--header--background: var(
--card--info--header--background,
var(--color-info-shade-50)
);
--card--footer--background: var(
--card--info--footer--background,
var(--color-info-shade-50)
);
}
.card.-success {
--card--background: var(--card--success--background, var(--color-success));
--card--border-top-color: var(
--card--success--border-top-color,
var(--color-success-shade-50)
);
--card--border-right-color: var(
--card--success--border-right-color,
var(--color-success-shade-50)
);
--card--border-bottom-color: var(
--card--success--border-bottom-color,
var(--color-success-shade-50)
);
--card--border-left-color: var(
--card--success--border-left-color,
var(--color-success-shade-50)
);
--card--color: var(--card--success--color, var(--contrast-text-color-success));
--card--header--background: var(
--card--success--header--background,
var(--color-success-shade-50)
);
--card--footer--background: var(
--card--success--footer--background,
var(--color-success-shade-50)
);
}
.card.-warning {
--card--background: var(--card--warning--background, var(--color-warning));
--card--border-top-color: var(
--card--warning--border-top-color,
var(--color-warning-shade-50)
);
--card--border-right-color: var(
--card--warning--border-right-color,
var(--color-warning-shade-50)
);
--card--border-bottom-color: var(
--card--warning--border-bottom-color,
var(--color-warning-shade-50)
);
--card--border-left-color: var(
--card--warning--border-left-color,
var(--color-warning-shade-50)
);
--card--color: var(--card--warning--color, var(--contrast-text-color-warning));
--card--header--background: var(
--card--warning--header--background,
var(--color-warning-shade-50)
);
--card--footer--background: var(
--card--warning--footer--background,
var(--color-warning-shade-50)
);
}
.card.-danger {
--card--background: var(--card--danger--background, var(--color-danger));
--card--border-top-color: var(
--card--danger--border-top-color,
var(--color-danger-shade-50)
);
--card--border-right-color: var(
--card--danger--border-right-color,
var(--color-danger-shade-50)
);
--card--border-bottom-color: var(
--card--danger--border-bottom-color,
var(--color-danger-shade-50)
);
--card--border-left-color: var(
--card--danger--border-left-color,
var(--color-danger-shade-50)
);
--card--color: var(--card--danger--color, var(--contrast-text-color-danger));
--card--header--background: var(
--card--danger--header--background,
var(--color-danger-shade-50)
);
--card--footer--background: var(
--card--danger--footer--background,
var(--color-danger-shade-50)
);
}
/**
* Size variants
*/
.card.-sm {
--card--border-top-left-radius: var(
--card--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--card--border-top-right-radius: var(
--card--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--card--border-bottom-right-radius: var(
--card--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--card--border-bottom-left-radius: var(
--card--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--card--font-size: var(
--card--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--card--padding-top: var(
--card--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--card--padding-right: var(
--card--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--card--padding-bottom: var(
--card--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--card--padding-left: var(
--card--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
--card--header--padding-top: var(--card--sm--header--padding-top, var(--card--padding-top));
--card--header--padding-right: var(
--card--sm--header--padding-right,
var(--card--padding-right)
);
--card--header--padding-bottom: var(
--card--sm--header--padding-bottom,
var(--card--padding-bottom)
);
--card--header--padding-left: var(
--card--sm--header--padding-left,
var(--card--padding-left)
);
--card--body--padding-top: var(--card--sm--body--padding-top, var(--card--padding-top));
--card--body--padding-right: var(
--card--sm--body--padding-right,
var(--card--padding-right)
);
--card--body--padding-bottom: var(
--card--sm--body--padding-bottom,
var(--card--padding-bottom)
);
--card--body--padding-left: var(--card--sm--body--padding-left, var(--card--padding-left));
--card--footer--padding-top: var(--card--sm--footer--padding-top, var(--card--padding-top));
--card--footer--padding-right: var(
--card--sm--footer--padding-right,
var(--card--padding-right)
);
--card--footer--padding-bottom: var(
--card--sm--footer--padding-bottom,
var(--card--padding-bottom)
);
--card--footer--padding-left: var(
--card--sm--footer--padding-left,
var(--card--padding-left)
);
}
.card.-md {
--card--border-top-left-radius: var(
--card--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--card--border-top-right-radius: var(
--card--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--card--border-bottom-right-radius: var(
--card--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--card--border-bottom-left-radius: var(
--card--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--card--font-size: var(
--card--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--card--padding-top: var(
--card--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--card--padding-right: var(
--card--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--card--padding-bottom: var(
--card--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--card--padding-left: var(
--card--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
--card--header--padding-top: var(--card--md--header--padding-top, var(--card--padding-top));
--card--header--padding-right: var(
--card--md--header--padding-right,
var(--card--padding-right)
);
--card--header--padding-bottom: var(
--card--md--header--padding-bottom,
var(--card--padding-bottom)
);
--card--header--padding-left: var(
--card--md--header--padding-left,
var(--card--padding-left)
);
--card--body--padding-top: var(--card--md--body--padding-top, var(--card--padding-top));
--card--body--padding-right: var(
--card--md--body--padding-right,
var(--card--padding-right)
);
--card--body--padding-bottom: var(
--card--md--body--padding-bottom,
var(--card--padding-bottom)
);
--card--body--padding-left: var(--card--md--body--padding-left, var(--card--padding-left));
--card--footer--padding-top: var(--card--md--footer--padding-top, var(--card--padding-top));
--card--footer--padding-right: var(
--card--md--footer--padding-right,
var(--card--padding-right)
);
--card--footer--padding-bottom: var(
--card--md--footer--padding-bottom,
var(--card--padding-bottom)
);
--card--footer--padding-left: var(
--card--md--footer--padding-left,
var(--card--padding-left)
);
}
.card.-lg {
--card--border-top-left-radius: var(
--card--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--card--border-top-right-radius: var(
--card--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--card--border-bottom-right-radius: var(
--card--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--card--border-bottom-left-radius: var(
--card--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--card--font-size: var(
--card--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--card--padding-top: var(
--card--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--card--padding-right: var(
--card--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--card--padding-bottom: var(
--card--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--card--padding-left: var(
--card--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
--card--header--padding-top: var(--card--lg--header--padding-top, var(--card--padding-top));
--card--header--padding-right: var(
--card--lg--header--padding-right,
var(--card--padding-right)
);
--card--header--padding-bottom: var(
--card--lg--header--padding-bottom,
var(--card--padding-bottom)
);
--card--header--padding-left: var(
--card--lg--header--padding-left,
var(--card--padding-left)
);
--card--body--padding-top: var(--card--lg--body--padding-top, var(--card--padding-top));
--card--body--padding-right: var(
--card--lg--body--padding-right,
var(--card--padding-right)
);
--card--body--padding-bottom: var(
--card--lg--body--padding-bottom,
var(--card--padding-bottom)
);
--card--body--padding-left: var(--card--lg--body--padding-left, var(--card--padding-left));
--card--footer--padding-top: var(--card--lg--footer--padding-top, var(--card--padding-top));
--card--footer--padding-right: var(
--card--lg--footer--padding-right,
var(--card--padding-right)
);
--card--footer--padding-bottom: var(
--card--lg--footer--padding-bottom,
var(--card--padding-bottom)
);
--card--footer--padding-left: var(
--card--lg--footer--padding-left,
var(--card--padding-left)
);
}
/**
* Checkbox
*/
.checkbox {
position: relative;
display: flex;
align-items: center;
white-space: nowrap;
outline: none;
margin-right: var(--checkbox--margin-right, var(--margin-right));
}
.checkbox:last-of-type {
margin-right: 0;
}
.checkbox.-disabled {
cursor: default;
}
.checkbox.-disabled .checkbox-label::before, .checkbox.-disabled .checkbox-label::after {
cursor: not-allowed;
}
.checkbox .checkbox-label {
cursor: pointer;
margin-bottom: 0;
display: inline-flex;
align-items: center;
position: relative;
transition-property: var(--checkbox--transition-property, color);
transition-duration: var(--checkbox--transition-duration, var(--transition-duration));
transition-timing-function: var(--checkbox--transition-timing-function, var(--transition-timing-function));
color: var(--checkbox--label--color);
font-size: var(--checkbox--label--font-size);
}
.checkbox .checkbox-label::before, .checkbox .checkbox-label::after {
width: var(--checkbox--size);
height: var(--checkbox--size);
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.checkbox .checkbox-label::before {
content: "";
user-select: none;
border-width: var(--checkbox--border-width, var(--checkbox--border-top-width, var(--border-top-width)) var(--checkbox--border-right-width, var(--border-right-width)) var(--checkbox--border-bottom-width, var(--border-bottom-width)) var(--checkbox--border-left-width, var(--border-left-width)));
border-style: var(--checkbox--border-style, var(--checkbox--border-top-style, var(--border-top-style)) var(--checkbox--border-right-style, var(--border-right-style)) var(--checkbox--border-bottom-style, var(--border-bottom-style)) var(--checkbox--border-left-style, var(--border-left-style)));
border-color: var(--checkbox--border-color, var(--checkbox--border-top-color, var(--border-top-color)) var(--checkbox--border-right-color, var(--border-right-color)) var(--checkbox--border-bottom-color, var(--border-bottom-color)) var(--checkbox--border-left-color, var(--border-left-color)));
border-radius: var(--checkbox--border-radius, var(--checkbox--border-top-left-radius, var(--border-top-left-radius)) var(--checkbox--border-top-right-radius, var(--border-top-right-radius)) var(--checkbox--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--checkbox--border-bottom-left-radius, var(--border-bottom-left-radius)));
box-shadow: var(--checkbox--box-shadow, var(--checkbox--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--checkbox--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--checkbox--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--checkbox--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--checkbox--box-shadow-color, var(--box-shadow-color)));
margin-right: var(--checkbox--margin-right, var(--margin-right-1-2));
transition-property: var(--checkbox--transition-property, background-color, border-color);
transition-duration: var(--checkbox--transition-duration, var(--transition-duration));
transition-timing-function: var(--checkbox--transition-timing-function, var(--transition-timing-function));
background-color: var(--checkbox--background);
}
.checkbox .checkbox-label::after {
mask-image: url('data:image/svg+xml; utf8, ');
-webkit-mask-image: url('data:image/svg+xml; utf8, ');
mask-size: var(--checkbox--checkmark--size) var(--checkbox--checkmark--size);
-webkit-mask-size: var(--checkbox--checkmark--size) var(--checkbox--checkmark--size);
position: absolute;
top: 50%;
left: 0;
z-index: 1;
text-align: center;
transition-property: var(--checkbox--transition-property, transform);
transition-duration: var(--checkbox--transition-duration, var(--transition-duration));
transition-timing-function: var(--checkbox--transition-timing-function, var(--transition-timing-function));
transform: scale(0);
background-color: var(--checkbox--color);
margin-top: calc(var(--checkbox--size) / -2);
}
.checkbox input {
top: 0;
left: 0;
position: absolute;
z-index: 0;
opacity: 0;
height: 0;
width: 0;
outline: 0;
}
.checkbox input:focus, .checkbox input:active {
outline: none;
}
.checkbox input:checked ~ .checkbox-label::before, .checkbox input[type=checkbox]:indeterminate ~ .checkbox-label::before {
border-color: var(--checkbox--checked--border-color, var(--checkbox--border-color));
background: var(--checkbox--checked--background, var(--checkbox--background));
}
.checkbox input:checked ~ .checkbox-label::after, .checkbox input[type=checkbox]:indeterminate ~ .checkbox-label::after {
content: "";
mask-position: center center;
-webkit-mask-position: center center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
transform: scale(1);
}
.checkbox input:disabled ~ .checkbox-label, .checkbox input[readonly] ~ .checkbox-label {
color: var(--checkbox--disabled--label--color, var(--checkbox--label--color));
}
.checkbox input:disabled ~ .checkbox-label::before, .checkbox input[readonly] ~ .checkbox-label::before {
cursor: not-allowed;
border-color: var(--checkbox--disabled--border-color, var(--checkbox--border-color));
background: var(--checkbox--disabled--background, var(--checkbox--background));
}
.checkbox input:disabled:checked ~ .checkbox-label::before, .checkbox input[readonly]:checked ~ .checkbox-label::before {
border-color: var(--checkbox--checked--disabled--border-color, var(--checkbox--border-color));
background: var(--checkbox--checked--disabled--background, var(--checkbox--background));
}
.checkbox input:disabled:checked ~ .checkbox-label::after, .checkbox input[readonly]:checked ~ .checkbox-label::after {
cursor: not-allowed;
background: var(--checkbox--disabled--color, var(--checkbox--color));
}
.checkbox input:indeterminate ~ .checkbox-label::after {
mask-image: url('data:image/svg+xml; utf8, ');
-webkit-mask-image: url('data:image/svg+xml; utf8, ');
}
.checkbox.-native input {
top: auto;
left: auto;
position: relative;
opacity: 1;
height: auto;
width: auto;
margin-right: var(--checkbox--margin-right, var(--margin-right-1-2));
}
.checkbox.-native .checkbox-label::after, .checkbox.-native .checkbox-label::before {
display: none;
}
/**
* Color variants
*/
.checkbox.-light {
--checkbox--background: var(--checkbox--light--background, var(--color-white));
--checkbox--border-top-color: var(
--checkbox--light--border-top-color,
var(--color-light-shade-50)
);
--checkbox--border-right-color: var(
--checkbox--light--border-right-color,
var(--color-light-shade-50)
);
--checkbox--border-bottom-color: var(
--checkbox--light--border-bottom-color,
var(--color-light-shade-50)
);
--checkbox--border-left-color: var(
--checkbox--light--border-left-color,
var(--color-light-shade-50)
);
--checkbox--color: var(--checkbox--light--color, var(--color-white));
--checkbox--label--color: var(
--checkbox--light--label--color,
var(--contrast-text-color-light)
);
--checkbox--disabled--background: var(
--checkbox--light--disabled--background,
var(--color-gray-50)
);
--checkbox--disabled--border-color: var(
--checkbox--light--disabled--border-color,
var(--color-light)
);
--checkbox--disabled--color: var(--checkbox--light--disabled--color, var(--color-white));
--checkbox--disabled--label--color: var(
--checkbox--light--disabled--label--color,
var(--text-color-weak)
);
--checkbox--checked--background: var(
--checkbox--light--checked--background,
var(--color-primary)
);
--checkbox--checked--border-color: var(
--checkbox--light--checked--border-color,
var(--color-primary-shade-50)
);
--checkbox--checked--disabled--background: var(
--checkbox--light--checked--disabled--background,
var(--color-primary-300)
);
--checkbox--checked--disabled--border-color: var(
--checkbox--light--checked--disabled--border-color,
var(--color-primary-400)
);
}
.checkbox.-dark {
--checkbox--background: var(--checkbox--dark--background, var(--color-dark));
--checkbox--border-top-color: var(
--checkbox--dark--border-top-color,
var(--color-dark-tint-50)
);
--checkbox--border-right-color: var(
--checkbox--dark--border-right-color,
var(--color-dark-tint-50)
);
--checkbox--border-bottom-color: var(
--checkbox--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--checkbox--border-left-color: var(
--checkbox--dark--border-left-color,
var(--color-dark-tint-50)
);
--checkbox--color: var(--checkbox--dark--color, var(--color-white));
--checkbox--label--color: var(
--checkbox--dark--label--color,
var(--contrast-text-color-dark)
);
--checkbox--disabled--background: var(
--checkbox--dark--disabled--background,
var(--color-dark-tint-100)
);
--checkbox--disabled--border-color: var(
--checkbox--dark--disabled--border-color,
var(--color-dark-tint-50)
);
--checkbox--disabled--color: var(--checkbox--dark--disabled--color, var(--color-white));
--checkbox--disabled--label--color: var(
--checkbox--dark--disabled--label--color,
var(--text-color-weak)
);
--checkbox--checked--background: var(
--checkbox--dark--checked--background,
var(--color-primary)
);
--checkbox--checked--border-color: var(
--checkbox--dark--checked--border-color,
var(--color-primary-tint-50)
);
--checkbox--checked--disabled--background: var(
--checkbox--dark--checked--disabled--background,
var(--color-primary-800)
);
--checkbox--checked--disabled--border-color: var(
--checkbox--dark--checked--disabled--border-color,
var(--color-primary-700)
);
}
/**
* Size variants
*/
.checkbox.-sm {
--checkbox--border-top-left-radius: var(
--checkbox--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--checkbox--border-top-right-radius: var(
--checkbox--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--checkbox--border-bottom-right-radius: var(
--checkbox--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--checkbox--border-bottom-left-radius: var(
--checkbox--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--checkbox--size: var(--checkbox--sm--size, calc(1rem * var(--size-multiplier-sm)));
--checkbox--checkmark--size: var(
--checkbox--sm--checkmark--size,
calc(8px * var(--size-multiplier-sm))
);
--checkbox--label--font-size: var(
--checkbox--sm--label--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
}
.checkbox.-md {
--checkbox--border-top-left-radius: var(
--checkbox--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--checkbox--border-top-right-radius: var(
--checkbox--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--checkbox--border-bottom-right-radius: var(
--checkbox--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--checkbox--border-bottom-left-radius: var(
--checkbox--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--checkbox--size: var(--checkbox--md--size, calc(1rem * var(--size-multiplier-md)));
--checkbox--checkmark--size: var(
--checkbox--md--checkmark--size,
calc(8px * var(--size-multiplier-md))
);
--checkbox--label--font-size: var(
--checkbox--md--label--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
}
.checkbox.-lg {
--checkbox--border-top-left-radius: var(
--checkbox--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--checkbox--border-top-right-radius: var(
--checkbox--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--checkbox--border-bottom-right-radius: var(
--checkbox--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--checkbox--border-bottom-left-radius: var(
--checkbox--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--checkbox--size: var(--checkbox--lg--size, calc(1rem * var(--size-multiplier-lg)));
--checkbox--checkmark--size: var(
--checkbox--lg--checkmark--size,
calc(8px * var(--size-multiplier-lg))
);
--checkbox--label--font-size: var(
--checkbox--lg--label--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
}
/**
* Checkbox Group
*/
.checkbox-group {
display: flex;
flex-direction: column;
}
.checkbox-group.-inline {
flex-direction: row;
}
/**
* Breakpoint mixins
*/
.container {
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
width: var(--grid--xs--width);
max-width: var(--grid--xs--width);
padding-left: calc(var(--grid--xs--gutter) / 2);
padding-right: calc(var(--grid--xs--gutter) / 2);
}
@media screen and (min-width: 576px) {
.container {
max-width: var(--grid--sm--width);
padding-left: calc(var(--grid--sm--gutter) / 2);
padding-right: calc(var(--grid--sm--gutter) / 2);
}
}
@media screen and (min-width: 768px) {
.container {
max-width: var(--grid--md--width);
padding-left: calc(var(--grid--md--gutter) / 2);
padding-right: calc(var(--grid--md--gutter) / 2);
}
}
@media screen and (min-width: 992px) {
.container {
max-width: var(--grid--lg--width);
padding-left: calc(var(--grid--lg--gutter) / 2);
padding-right: calc(var(--grid--lg--gutter) / 2);
}
}
@media screen and (min-width: 1200px) {
.container {
max-width: var(--grid--xl--width);
padding-left: calc(var(--grid--xl--gutter) / 2);
padding-right: calc(var(--grid--xl--gutter) / 2);
}
}
@media screen and (min-width: 1400px) {
.container {
max-width: var(--grid--2xl--width);
padding-left: calc(var(--grid--2xl--gutter) / 2);
padding-right: calc(var(--grid--2xl--gutter) / 2);
}
}
.container.-fluid {
max-width: 100%;
}
/**
* Breakpoint mixins
*/
.col,
.column {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
box-sizing: border-box;
min-height: 1px;
position: relative;
padding-left: calc(var(--grid--xs--gutter) / 2);
padding-right: calc(var(--grid--xs--gutter) / 2);
}
@media screen and (min-width: 576px) {
.col,
.column {
padding-left: calc(var(--grid--sm--gutter) / 2);
padding-right: calc(var(--grid--sm--gutter) / 2);
}
}
@media screen and (min-width: 768px) {
.col,
.column {
padding-left: calc(var(--grid--md--gutter) / 2);
padding-right: calc(var(--grid--md--gutter) / 2);
}
}
@media screen and (min-width: 992px) {
.col,
.column {
padding-left: calc(var(--grid--lg--gutter) / 2);
padding-right: calc(var(--grid--lg--gutter) / 2);
}
}
@media screen and (min-width: 1200px) {
.col,
.column {
padding-left: calc(var(--grid--xl--gutter) / 2);
padding-right: calc(var(--grid--xl--gutter) / 2);
}
}
@media screen and (min-width: 1400px) {
.col,
.column {
padding-left: calc(var(--grid--2xl--gutter) / 2);
padding-right: calc(var(--grid--2xl--gutter) / 2);
}
}
.col.\-xs, .col.\-xs-auto,
.column.\-xs,
.column.\-xs-auto {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs,
.column.\-xs {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col.\-xs-auto,
.column.\-xs-auto {
flex: 1 0 auto;
max-width: auto;
}
.col.-first-xs,
.column.-first-xs {
order: -1;
}
.col.-last-xs,
.column.-last-xs {
order: 1;
}
.col.\-xs-1,
.column.\-xs-1 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs-1,
.column.\-xs-1 {
flex-grow: 1;
flex-basis: calc(1 * 100% / var(--grid--columns));
max-width: calc(1 * 100% / var(--grid--columns));
}
.col.-offset-xs-1,
.column.-offset-xs-1 {
margin-left: calc(1 * 100% / var(--grid--columns));
}
.col.-push-xs-1,
.column.-push-xs-1 {
left: calc(1 * 100% / var(--grid--columns));
}
.col.-pull-xs-1,
.column.-pull-xs-1 {
right: calc(1 * 100% / var(--grid--columns));
}
.col.\-xs-2,
.column.\-xs-2 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs-2,
.column.\-xs-2 {
flex-grow: 1;
flex-basis: calc(2 * 100% / var(--grid--columns));
max-width: calc(2 * 100% / var(--grid--columns));
}
.col.-offset-xs-2,
.column.-offset-xs-2 {
margin-left: calc(2 * 100% / var(--grid--columns));
}
.col.-push-xs-2,
.column.-push-xs-2 {
left: calc(2 * 100% / var(--grid--columns));
}
.col.-pull-xs-2,
.column.-pull-xs-2 {
right: calc(2 * 100% / var(--grid--columns));
}
.col.\-xs-3,
.column.\-xs-3 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs-3,
.column.\-xs-3 {
flex-grow: 1;
flex-basis: calc(3 * 100% / var(--grid--columns));
max-width: calc(3 * 100% / var(--grid--columns));
}
.col.-offset-xs-3,
.column.-offset-xs-3 {
margin-left: calc(3 * 100% / var(--grid--columns));
}
.col.-push-xs-3,
.column.-push-xs-3 {
left: calc(3 * 100% / var(--grid--columns));
}
.col.-pull-xs-3,
.column.-pull-xs-3 {
right: calc(3 * 100% / var(--grid--columns));
}
.col.\-xs-4,
.column.\-xs-4 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs-4,
.column.\-xs-4 {
flex-grow: 1;
flex-basis: calc(4 * 100% / var(--grid--columns));
max-width: calc(4 * 100% / var(--grid--columns));
}
.col.-offset-xs-4,
.column.-offset-xs-4 {
margin-left: calc(4 * 100% / var(--grid--columns));
}
.col.-push-xs-4,
.column.-push-xs-4 {
left: calc(4 * 100% / var(--grid--columns));
}
.col.-pull-xs-4,
.column.-pull-xs-4 {
right: calc(4 * 100% / var(--grid--columns));
}
.col.\-xs-5,
.column.\-xs-5 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs-5,
.column.\-xs-5 {
flex-grow: 1;
flex-basis: calc(5 * 100% / var(--grid--columns));
max-width: calc(5 * 100% / var(--grid--columns));
}
.col.-offset-xs-5,
.column.-offset-xs-5 {
margin-left: calc(5 * 100% / var(--grid--columns));
}
.col.-push-xs-5,
.column.-push-xs-5 {
left: calc(5 * 100% / var(--grid--columns));
}
.col.-pull-xs-5,
.column.-pull-xs-5 {
right: calc(5 * 100% / var(--grid--columns));
}
.col.\-xs-6,
.column.\-xs-6 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs-6,
.column.\-xs-6 {
flex-grow: 1;
flex-basis: calc(6 * 100% / var(--grid--columns));
max-width: calc(6 * 100% / var(--grid--columns));
}
.col.-offset-xs-6,
.column.-offset-xs-6 {
margin-left: calc(6 * 100% / var(--grid--columns));
}
.col.-push-xs-6,
.column.-push-xs-6 {
left: calc(6 * 100% / var(--grid--columns));
}
.col.-pull-xs-6,
.column.-pull-xs-6 {
right: calc(6 * 100% / var(--grid--columns));
}
.col.\-xs-7,
.column.\-xs-7 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs-7,
.column.\-xs-7 {
flex-grow: 1;
flex-basis: calc(7 * 100% / var(--grid--columns));
max-width: calc(7 * 100% / var(--grid--columns));
}
.col.-offset-xs-7,
.column.-offset-xs-7 {
margin-left: calc(7 * 100% / var(--grid--columns));
}
.col.-push-xs-7,
.column.-push-xs-7 {
left: calc(7 * 100% / var(--grid--columns));
}
.col.-pull-xs-7,
.column.-pull-xs-7 {
right: calc(7 * 100% / var(--grid--columns));
}
.col.\-xs-8,
.column.\-xs-8 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs-8,
.column.\-xs-8 {
flex-grow: 1;
flex-basis: calc(8 * 100% / var(--grid--columns));
max-width: calc(8 * 100% / var(--grid--columns));
}
.col.-offset-xs-8,
.column.-offset-xs-8 {
margin-left: calc(8 * 100% / var(--grid--columns));
}
.col.-push-xs-8,
.column.-push-xs-8 {
left: calc(8 * 100% / var(--grid--columns));
}
.col.-pull-xs-8,
.column.-pull-xs-8 {
right: calc(8 * 100% / var(--grid--columns));
}
.col.\-xs-9,
.column.\-xs-9 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs-9,
.column.\-xs-9 {
flex-grow: 1;
flex-basis: calc(9 * 100% / var(--grid--columns));
max-width: calc(9 * 100% / var(--grid--columns));
}
.col.-offset-xs-9,
.column.-offset-xs-9 {
margin-left: calc(9 * 100% / var(--grid--columns));
}
.col.-push-xs-9,
.column.-push-xs-9 {
left: calc(9 * 100% / var(--grid--columns));
}
.col.-pull-xs-9,
.column.-pull-xs-9 {
right: calc(9 * 100% / var(--grid--columns));
}
.col.\-xs-10,
.column.\-xs-10 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs-10,
.column.\-xs-10 {
flex-grow: 1;
flex-basis: calc(10 * 100% / var(--grid--columns));
max-width: calc(10 * 100% / var(--grid--columns));
}
.col.-offset-xs-10,
.column.-offset-xs-10 {
margin-left: calc(10 * 100% / var(--grid--columns));
}
.col.-push-xs-10,
.column.-push-xs-10 {
left: calc(10 * 100% / var(--grid--columns));
}
.col.-pull-xs-10,
.column.-pull-xs-10 {
right: calc(10 * 100% / var(--grid--columns));
}
.col.\-xs-11,
.column.\-xs-11 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs-11,
.column.\-xs-11 {
flex-grow: 1;
flex-basis: calc(11 * 100% / var(--grid--columns));
max-width: calc(11 * 100% / var(--grid--columns));
}
.col.-offset-xs-11,
.column.-offset-xs-11 {
margin-left: calc(11 * 100% / var(--grid--columns));
}
.col.-push-xs-11,
.column.-push-xs-11 {
left: calc(11 * 100% / var(--grid--columns));
}
.col.-pull-xs-11,
.column.-pull-xs-11 {
right: calc(11 * 100% / var(--grid--columns));
}
.col.\-xs-12,
.column.\-xs-12 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
.col.\-xs-12,
.column.\-xs-12 {
flex-grow: 1;
flex-basis: calc(12 * 100% / var(--grid--columns));
max-width: calc(12 * 100% / var(--grid--columns));
}
.col.-offset-xs-12,
.column.-offset-xs-12 {
margin-left: calc(12 * 100% / var(--grid--columns));
}
.col.-push-xs-12,
.column.-push-xs-12 {
left: calc(12 * 100% / var(--grid--columns));
}
.col.-pull-xs-12,
.column.-pull-xs-12 {
right: calc(12 * 100% / var(--grid--columns));
}
.col.-offset-xs-0,
.column.-offset-xs-0 {
margin-left: 0;
}
.col.-push-xs-0,
.column.-push-xs-0 {
left: 0;
}
.col.-pull-xs-0,
.column.-pull-xs-0 {
right: 0;
}
.col.\-sm, .col.\-sm-auto,
.column.\-sm,
.column.\-sm-auto {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm,
.column.\-sm {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col.\-sm-auto,
.column.\-sm-auto {
flex: 1 0 auto;
max-width: auto;
}
.col.-first-sm,
.column.-first-sm {
order: -1;
}
.col.-last-sm,
.column.-last-sm {
order: 1;
}
}
.col.\-sm-1,
.column.\-sm-1 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm-1,
.column.\-sm-1 {
flex-grow: 1;
flex-basis: calc(1 * 100% / var(--grid--columns));
max-width: calc(1 * 100% / var(--grid--columns));
}
.col.-offset-sm-1,
.column.-offset-sm-1 {
margin-left: calc(1 * 100% / var(--grid--columns));
}
.col.-push-sm-1,
.column.-push-sm-1 {
left: calc(1 * 100% / var(--grid--columns));
}
.col.-pull-sm-1,
.column.-pull-sm-1 {
right: calc(1 * 100% / var(--grid--columns));
}
}
.col.\-sm-2,
.column.\-sm-2 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm-2,
.column.\-sm-2 {
flex-grow: 1;
flex-basis: calc(2 * 100% / var(--grid--columns));
max-width: calc(2 * 100% / var(--grid--columns));
}
.col.-offset-sm-2,
.column.-offset-sm-2 {
margin-left: calc(2 * 100% / var(--grid--columns));
}
.col.-push-sm-2,
.column.-push-sm-2 {
left: calc(2 * 100% / var(--grid--columns));
}
.col.-pull-sm-2,
.column.-pull-sm-2 {
right: calc(2 * 100% / var(--grid--columns));
}
}
.col.\-sm-3,
.column.\-sm-3 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm-3,
.column.\-sm-3 {
flex-grow: 1;
flex-basis: calc(3 * 100% / var(--grid--columns));
max-width: calc(3 * 100% / var(--grid--columns));
}
.col.-offset-sm-3,
.column.-offset-sm-3 {
margin-left: calc(3 * 100% / var(--grid--columns));
}
.col.-push-sm-3,
.column.-push-sm-3 {
left: calc(3 * 100% / var(--grid--columns));
}
.col.-pull-sm-3,
.column.-pull-sm-3 {
right: calc(3 * 100% / var(--grid--columns));
}
}
.col.\-sm-4,
.column.\-sm-4 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm-4,
.column.\-sm-4 {
flex-grow: 1;
flex-basis: calc(4 * 100% / var(--grid--columns));
max-width: calc(4 * 100% / var(--grid--columns));
}
.col.-offset-sm-4,
.column.-offset-sm-4 {
margin-left: calc(4 * 100% / var(--grid--columns));
}
.col.-push-sm-4,
.column.-push-sm-4 {
left: calc(4 * 100% / var(--grid--columns));
}
.col.-pull-sm-4,
.column.-pull-sm-4 {
right: calc(4 * 100% / var(--grid--columns));
}
}
.col.\-sm-5,
.column.\-sm-5 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm-5,
.column.\-sm-5 {
flex-grow: 1;
flex-basis: calc(5 * 100% / var(--grid--columns));
max-width: calc(5 * 100% / var(--grid--columns));
}
.col.-offset-sm-5,
.column.-offset-sm-5 {
margin-left: calc(5 * 100% / var(--grid--columns));
}
.col.-push-sm-5,
.column.-push-sm-5 {
left: calc(5 * 100% / var(--grid--columns));
}
.col.-pull-sm-5,
.column.-pull-sm-5 {
right: calc(5 * 100% / var(--grid--columns));
}
}
.col.\-sm-6,
.column.\-sm-6 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm-6,
.column.\-sm-6 {
flex-grow: 1;
flex-basis: calc(6 * 100% / var(--grid--columns));
max-width: calc(6 * 100% / var(--grid--columns));
}
.col.-offset-sm-6,
.column.-offset-sm-6 {
margin-left: calc(6 * 100% / var(--grid--columns));
}
.col.-push-sm-6,
.column.-push-sm-6 {
left: calc(6 * 100% / var(--grid--columns));
}
.col.-pull-sm-6,
.column.-pull-sm-6 {
right: calc(6 * 100% / var(--grid--columns));
}
}
.col.\-sm-7,
.column.\-sm-7 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm-7,
.column.\-sm-7 {
flex-grow: 1;
flex-basis: calc(7 * 100% / var(--grid--columns));
max-width: calc(7 * 100% / var(--grid--columns));
}
.col.-offset-sm-7,
.column.-offset-sm-7 {
margin-left: calc(7 * 100% / var(--grid--columns));
}
.col.-push-sm-7,
.column.-push-sm-7 {
left: calc(7 * 100% / var(--grid--columns));
}
.col.-pull-sm-7,
.column.-pull-sm-7 {
right: calc(7 * 100% / var(--grid--columns));
}
}
.col.\-sm-8,
.column.\-sm-8 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm-8,
.column.\-sm-8 {
flex-grow: 1;
flex-basis: calc(8 * 100% / var(--grid--columns));
max-width: calc(8 * 100% / var(--grid--columns));
}
.col.-offset-sm-8,
.column.-offset-sm-8 {
margin-left: calc(8 * 100% / var(--grid--columns));
}
.col.-push-sm-8,
.column.-push-sm-8 {
left: calc(8 * 100% / var(--grid--columns));
}
.col.-pull-sm-8,
.column.-pull-sm-8 {
right: calc(8 * 100% / var(--grid--columns));
}
}
.col.\-sm-9,
.column.\-sm-9 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm-9,
.column.\-sm-9 {
flex-grow: 1;
flex-basis: calc(9 * 100% / var(--grid--columns));
max-width: calc(9 * 100% / var(--grid--columns));
}
.col.-offset-sm-9,
.column.-offset-sm-9 {
margin-left: calc(9 * 100% / var(--grid--columns));
}
.col.-push-sm-9,
.column.-push-sm-9 {
left: calc(9 * 100% / var(--grid--columns));
}
.col.-pull-sm-9,
.column.-pull-sm-9 {
right: calc(9 * 100% / var(--grid--columns));
}
}
.col.\-sm-10,
.column.\-sm-10 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm-10,
.column.\-sm-10 {
flex-grow: 1;
flex-basis: calc(10 * 100% / var(--grid--columns));
max-width: calc(10 * 100% / var(--grid--columns));
}
.col.-offset-sm-10,
.column.-offset-sm-10 {
margin-left: calc(10 * 100% / var(--grid--columns));
}
.col.-push-sm-10,
.column.-push-sm-10 {
left: calc(10 * 100% / var(--grid--columns));
}
.col.-pull-sm-10,
.column.-pull-sm-10 {
right: calc(10 * 100% / var(--grid--columns));
}
}
.col.\-sm-11,
.column.\-sm-11 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm-11,
.column.\-sm-11 {
flex-grow: 1;
flex-basis: calc(11 * 100% / var(--grid--columns));
max-width: calc(11 * 100% / var(--grid--columns));
}
.col.-offset-sm-11,
.column.-offset-sm-11 {
margin-left: calc(11 * 100% / var(--grid--columns));
}
.col.-push-sm-11,
.column.-push-sm-11 {
left: calc(11 * 100% / var(--grid--columns));
}
.col.-pull-sm-11,
.column.-pull-sm-11 {
right: calc(11 * 100% / var(--grid--columns));
}
}
.col.\-sm-12,
.column.\-sm-12 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 576px) {
.col.\-sm-12,
.column.\-sm-12 {
flex-grow: 1;
flex-basis: calc(12 * 100% / var(--grid--columns));
max-width: calc(12 * 100% / var(--grid--columns));
}
.col.-offset-sm-12,
.column.-offset-sm-12 {
margin-left: calc(12 * 100% / var(--grid--columns));
}
.col.-push-sm-12,
.column.-push-sm-12 {
left: calc(12 * 100% / var(--grid--columns));
}
.col.-pull-sm-12,
.column.-pull-sm-12 {
right: calc(12 * 100% / var(--grid--columns));
}
}
@media screen and (min-width: 576px) {
.col.-offset-sm-0,
.column.-offset-sm-0 {
margin-left: 0;
}
.col.-push-sm-0,
.column.-push-sm-0 {
left: 0;
}
.col.-pull-sm-0,
.column.-pull-sm-0 {
right: 0;
}
}
.col.\-md, .col.\-md-auto,
.column.\-md,
.column.\-md-auto {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md,
.column.\-md {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col.\-md-auto,
.column.\-md-auto {
flex: 1 0 auto;
max-width: auto;
}
.col.-first-md,
.column.-first-md {
order: -1;
}
.col.-last-md,
.column.-last-md {
order: 1;
}
}
.col.\-md-1,
.column.\-md-1 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md-1,
.column.\-md-1 {
flex-grow: 1;
flex-basis: calc(1 * 100% / var(--grid--columns));
max-width: calc(1 * 100% / var(--grid--columns));
}
.col.-offset-md-1,
.column.-offset-md-1 {
margin-left: calc(1 * 100% / var(--grid--columns));
}
.col.-push-md-1,
.column.-push-md-1 {
left: calc(1 * 100% / var(--grid--columns));
}
.col.-pull-md-1,
.column.-pull-md-1 {
right: calc(1 * 100% / var(--grid--columns));
}
}
.col.\-md-2,
.column.\-md-2 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md-2,
.column.\-md-2 {
flex-grow: 1;
flex-basis: calc(2 * 100% / var(--grid--columns));
max-width: calc(2 * 100% / var(--grid--columns));
}
.col.-offset-md-2,
.column.-offset-md-2 {
margin-left: calc(2 * 100% / var(--grid--columns));
}
.col.-push-md-2,
.column.-push-md-2 {
left: calc(2 * 100% / var(--grid--columns));
}
.col.-pull-md-2,
.column.-pull-md-2 {
right: calc(2 * 100% / var(--grid--columns));
}
}
.col.\-md-3,
.column.\-md-3 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md-3,
.column.\-md-3 {
flex-grow: 1;
flex-basis: calc(3 * 100% / var(--grid--columns));
max-width: calc(3 * 100% / var(--grid--columns));
}
.col.-offset-md-3,
.column.-offset-md-3 {
margin-left: calc(3 * 100% / var(--grid--columns));
}
.col.-push-md-3,
.column.-push-md-3 {
left: calc(3 * 100% / var(--grid--columns));
}
.col.-pull-md-3,
.column.-pull-md-3 {
right: calc(3 * 100% / var(--grid--columns));
}
}
.col.\-md-4,
.column.\-md-4 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md-4,
.column.\-md-4 {
flex-grow: 1;
flex-basis: calc(4 * 100% / var(--grid--columns));
max-width: calc(4 * 100% / var(--grid--columns));
}
.col.-offset-md-4,
.column.-offset-md-4 {
margin-left: calc(4 * 100% / var(--grid--columns));
}
.col.-push-md-4,
.column.-push-md-4 {
left: calc(4 * 100% / var(--grid--columns));
}
.col.-pull-md-4,
.column.-pull-md-4 {
right: calc(4 * 100% / var(--grid--columns));
}
}
.col.\-md-5,
.column.\-md-5 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md-5,
.column.\-md-5 {
flex-grow: 1;
flex-basis: calc(5 * 100% / var(--grid--columns));
max-width: calc(5 * 100% / var(--grid--columns));
}
.col.-offset-md-5,
.column.-offset-md-5 {
margin-left: calc(5 * 100% / var(--grid--columns));
}
.col.-push-md-5,
.column.-push-md-5 {
left: calc(5 * 100% / var(--grid--columns));
}
.col.-pull-md-5,
.column.-pull-md-5 {
right: calc(5 * 100% / var(--grid--columns));
}
}
.col.\-md-6,
.column.\-md-6 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md-6,
.column.\-md-6 {
flex-grow: 1;
flex-basis: calc(6 * 100% / var(--grid--columns));
max-width: calc(6 * 100% / var(--grid--columns));
}
.col.-offset-md-6,
.column.-offset-md-6 {
margin-left: calc(6 * 100% / var(--grid--columns));
}
.col.-push-md-6,
.column.-push-md-6 {
left: calc(6 * 100% / var(--grid--columns));
}
.col.-pull-md-6,
.column.-pull-md-6 {
right: calc(6 * 100% / var(--grid--columns));
}
}
.col.\-md-7,
.column.\-md-7 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md-7,
.column.\-md-7 {
flex-grow: 1;
flex-basis: calc(7 * 100% / var(--grid--columns));
max-width: calc(7 * 100% / var(--grid--columns));
}
.col.-offset-md-7,
.column.-offset-md-7 {
margin-left: calc(7 * 100% / var(--grid--columns));
}
.col.-push-md-7,
.column.-push-md-7 {
left: calc(7 * 100% / var(--grid--columns));
}
.col.-pull-md-7,
.column.-pull-md-7 {
right: calc(7 * 100% / var(--grid--columns));
}
}
.col.\-md-8,
.column.\-md-8 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md-8,
.column.\-md-8 {
flex-grow: 1;
flex-basis: calc(8 * 100% / var(--grid--columns));
max-width: calc(8 * 100% / var(--grid--columns));
}
.col.-offset-md-8,
.column.-offset-md-8 {
margin-left: calc(8 * 100% / var(--grid--columns));
}
.col.-push-md-8,
.column.-push-md-8 {
left: calc(8 * 100% / var(--grid--columns));
}
.col.-pull-md-8,
.column.-pull-md-8 {
right: calc(8 * 100% / var(--grid--columns));
}
}
.col.\-md-9,
.column.\-md-9 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md-9,
.column.\-md-9 {
flex-grow: 1;
flex-basis: calc(9 * 100% / var(--grid--columns));
max-width: calc(9 * 100% / var(--grid--columns));
}
.col.-offset-md-9,
.column.-offset-md-9 {
margin-left: calc(9 * 100% / var(--grid--columns));
}
.col.-push-md-9,
.column.-push-md-9 {
left: calc(9 * 100% / var(--grid--columns));
}
.col.-pull-md-9,
.column.-pull-md-9 {
right: calc(9 * 100% / var(--grid--columns));
}
}
.col.\-md-10,
.column.\-md-10 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md-10,
.column.\-md-10 {
flex-grow: 1;
flex-basis: calc(10 * 100% / var(--grid--columns));
max-width: calc(10 * 100% / var(--grid--columns));
}
.col.-offset-md-10,
.column.-offset-md-10 {
margin-left: calc(10 * 100% / var(--grid--columns));
}
.col.-push-md-10,
.column.-push-md-10 {
left: calc(10 * 100% / var(--grid--columns));
}
.col.-pull-md-10,
.column.-pull-md-10 {
right: calc(10 * 100% / var(--grid--columns));
}
}
.col.\-md-11,
.column.\-md-11 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md-11,
.column.\-md-11 {
flex-grow: 1;
flex-basis: calc(11 * 100% / var(--grid--columns));
max-width: calc(11 * 100% / var(--grid--columns));
}
.col.-offset-md-11,
.column.-offset-md-11 {
margin-left: calc(11 * 100% / var(--grid--columns));
}
.col.-push-md-11,
.column.-push-md-11 {
left: calc(11 * 100% / var(--grid--columns));
}
.col.-pull-md-11,
.column.-pull-md-11 {
right: calc(11 * 100% / var(--grid--columns));
}
}
.col.\-md-12,
.column.\-md-12 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.col.\-md-12,
.column.\-md-12 {
flex-grow: 1;
flex-basis: calc(12 * 100% / var(--grid--columns));
max-width: calc(12 * 100% / var(--grid--columns));
}
.col.-offset-md-12,
.column.-offset-md-12 {
margin-left: calc(12 * 100% / var(--grid--columns));
}
.col.-push-md-12,
.column.-push-md-12 {
left: calc(12 * 100% / var(--grid--columns));
}
.col.-pull-md-12,
.column.-pull-md-12 {
right: calc(12 * 100% / var(--grid--columns));
}
}
@media screen and (min-width: 768px) {
.col.-offset-md-0,
.column.-offset-md-0 {
margin-left: 0;
}
.col.-push-md-0,
.column.-push-md-0 {
left: 0;
}
.col.-pull-md-0,
.column.-pull-md-0 {
right: 0;
}
}
.col.\-lg, .col.\-lg-auto,
.column.\-lg,
.column.\-lg-auto {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg,
.column.\-lg {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col.\-lg-auto,
.column.\-lg-auto {
flex: 1 0 auto;
max-width: auto;
}
.col.-first-lg,
.column.-first-lg {
order: -1;
}
.col.-last-lg,
.column.-last-lg {
order: 1;
}
}
.col.\-lg-1,
.column.\-lg-1 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg-1,
.column.\-lg-1 {
flex-grow: 1;
flex-basis: calc(1 * 100% / var(--grid--columns));
max-width: calc(1 * 100% / var(--grid--columns));
}
.col.-offset-lg-1,
.column.-offset-lg-1 {
margin-left: calc(1 * 100% / var(--grid--columns));
}
.col.-push-lg-1,
.column.-push-lg-1 {
left: calc(1 * 100% / var(--grid--columns));
}
.col.-pull-lg-1,
.column.-pull-lg-1 {
right: calc(1 * 100% / var(--grid--columns));
}
}
.col.\-lg-2,
.column.\-lg-2 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg-2,
.column.\-lg-2 {
flex-grow: 1;
flex-basis: calc(2 * 100% / var(--grid--columns));
max-width: calc(2 * 100% / var(--grid--columns));
}
.col.-offset-lg-2,
.column.-offset-lg-2 {
margin-left: calc(2 * 100% / var(--grid--columns));
}
.col.-push-lg-2,
.column.-push-lg-2 {
left: calc(2 * 100% / var(--grid--columns));
}
.col.-pull-lg-2,
.column.-pull-lg-2 {
right: calc(2 * 100% / var(--grid--columns));
}
}
.col.\-lg-3,
.column.\-lg-3 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg-3,
.column.\-lg-3 {
flex-grow: 1;
flex-basis: calc(3 * 100% / var(--grid--columns));
max-width: calc(3 * 100% / var(--grid--columns));
}
.col.-offset-lg-3,
.column.-offset-lg-3 {
margin-left: calc(3 * 100% / var(--grid--columns));
}
.col.-push-lg-3,
.column.-push-lg-3 {
left: calc(3 * 100% / var(--grid--columns));
}
.col.-pull-lg-3,
.column.-pull-lg-3 {
right: calc(3 * 100% / var(--grid--columns));
}
}
.col.\-lg-4,
.column.\-lg-4 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg-4,
.column.\-lg-4 {
flex-grow: 1;
flex-basis: calc(4 * 100% / var(--grid--columns));
max-width: calc(4 * 100% / var(--grid--columns));
}
.col.-offset-lg-4,
.column.-offset-lg-4 {
margin-left: calc(4 * 100% / var(--grid--columns));
}
.col.-push-lg-4,
.column.-push-lg-4 {
left: calc(4 * 100% / var(--grid--columns));
}
.col.-pull-lg-4,
.column.-pull-lg-4 {
right: calc(4 * 100% / var(--grid--columns));
}
}
.col.\-lg-5,
.column.\-lg-5 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg-5,
.column.\-lg-5 {
flex-grow: 1;
flex-basis: calc(5 * 100% / var(--grid--columns));
max-width: calc(5 * 100% / var(--grid--columns));
}
.col.-offset-lg-5,
.column.-offset-lg-5 {
margin-left: calc(5 * 100% / var(--grid--columns));
}
.col.-push-lg-5,
.column.-push-lg-5 {
left: calc(5 * 100% / var(--grid--columns));
}
.col.-pull-lg-5,
.column.-pull-lg-5 {
right: calc(5 * 100% / var(--grid--columns));
}
}
.col.\-lg-6,
.column.\-lg-6 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg-6,
.column.\-lg-6 {
flex-grow: 1;
flex-basis: calc(6 * 100% / var(--grid--columns));
max-width: calc(6 * 100% / var(--grid--columns));
}
.col.-offset-lg-6,
.column.-offset-lg-6 {
margin-left: calc(6 * 100% / var(--grid--columns));
}
.col.-push-lg-6,
.column.-push-lg-6 {
left: calc(6 * 100% / var(--grid--columns));
}
.col.-pull-lg-6,
.column.-pull-lg-6 {
right: calc(6 * 100% / var(--grid--columns));
}
}
.col.\-lg-7,
.column.\-lg-7 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg-7,
.column.\-lg-7 {
flex-grow: 1;
flex-basis: calc(7 * 100% / var(--grid--columns));
max-width: calc(7 * 100% / var(--grid--columns));
}
.col.-offset-lg-7,
.column.-offset-lg-7 {
margin-left: calc(7 * 100% / var(--grid--columns));
}
.col.-push-lg-7,
.column.-push-lg-7 {
left: calc(7 * 100% / var(--grid--columns));
}
.col.-pull-lg-7,
.column.-pull-lg-7 {
right: calc(7 * 100% / var(--grid--columns));
}
}
.col.\-lg-8,
.column.\-lg-8 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg-8,
.column.\-lg-8 {
flex-grow: 1;
flex-basis: calc(8 * 100% / var(--grid--columns));
max-width: calc(8 * 100% / var(--grid--columns));
}
.col.-offset-lg-8,
.column.-offset-lg-8 {
margin-left: calc(8 * 100% / var(--grid--columns));
}
.col.-push-lg-8,
.column.-push-lg-8 {
left: calc(8 * 100% / var(--grid--columns));
}
.col.-pull-lg-8,
.column.-pull-lg-8 {
right: calc(8 * 100% / var(--grid--columns));
}
}
.col.\-lg-9,
.column.\-lg-9 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg-9,
.column.\-lg-9 {
flex-grow: 1;
flex-basis: calc(9 * 100% / var(--grid--columns));
max-width: calc(9 * 100% / var(--grid--columns));
}
.col.-offset-lg-9,
.column.-offset-lg-9 {
margin-left: calc(9 * 100% / var(--grid--columns));
}
.col.-push-lg-9,
.column.-push-lg-9 {
left: calc(9 * 100% / var(--grid--columns));
}
.col.-pull-lg-9,
.column.-pull-lg-9 {
right: calc(9 * 100% / var(--grid--columns));
}
}
.col.\-lg-10,
.column.\-lg-10 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg-10,
.column.\-lg-10 {
flex-grow: 1;
flex-basis: calc(10 * 100% / var(--grid--columns));
max-width: calc(10 * 100% / var(--grid--columns));
}
.col.-offset-lg-10,
.column.-offset-lg-10 {
margin-left: calc(10 * 100% / var(--grid--columns));
}
.col.-push-lg-10,
.column.-push-lg-10 {
left: calc(10 * 100% / var(--grid--columns));
}
.col.-pull-lg-10,
.column.-pull-lg-10 {
right: calc(10 * 100% / var(--grid--columns));
}
}
.col.\-lg-11,
.column.\-lg-11 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg-11,
.column.\-lg-11 {
flex-grow: 1;
flex-basis: calc(11 * 100% / var(--grid--columns));
max-width: calc(11 * 100% / var(--grid--columns));
}
.col.-offset-lg-11,
.column.-offset-lg-11 {
margin-left: calc(11 * 100% / var(--grid--columns));
}
.col.-push-lg-11,
.column.-push-lg-11 {
left: calc(11 * 100% / var(--grid--columns));
}
.col.-pull-lg-11,
.column.-pull-lg-11 {
right: calc(11 * 100% / var(--grid--columns));
}
}
.col.\-lg-12,
.column.\-lg-12 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 992px) {
.col.\-lg-12,
.column.\-lg-12 {
flex-grow: 1;
flex-basis: calc(12 * 100% / var(--grid--columns));
max-width: calc(12 * 100% / var(--grid--columns));
}
.col.-offset-lg-12,
.column.-offset-lg-12 {
margin-left: calc(12 * 100% / var(--grid--columns));
}
.col.-push-lg-12,
.column.-push-lg-12 {
left: calc(12 * 100% / var(--grid--columns));
}
.col.-pull-lg-12,
.column.-pull-lg-12 {
right: calc(12 * 100% / var(--grid--columns));
}
}
@media screen and (min-width: 992px) {
.col.-offset-lg-0,
.column.-offset-lg-0 {
margin-left: 0;
}
.col.-push-lg-0,
.column.-push-lg-0 {
left: 0;
}
.col.-pull-lg-0,
.column.-pull-lg-0 {
right: 0;
}
}
.col.\-xl, .col.\-xl-auto,
.column.\-xl,
.column.\-xl-auto {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl,
.column.\-xl {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col.\-xl-auto,
.column.\-xl-auto {
flex: 1 0 auto;
max-width: auto;
}
.col.-first-xl,
.column.-first-xl {
order: -1;
}
.col.-last-xl,
.column.-last-xl {
order: 1;
}
}
.col.\-xl-1,
.column.\-xl-1 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl-1,
.column.\-xl-1 {
flex-grow: 1;
flex-basis: calc(1 * 100% / var(--grid--columns));
max-width: calc(1 * 100% / var(--grid--columns));
}
.col.-offset-xl-1,
.column.-offset-xl-1 {
margin-left: calc(1 * 100% / var(--grid--columns));
}
.col.-push-xl-1,
.column.-push-xl-1 {
left: calc(1 * 100% / var(--grid--columns));
}
.col.-pull-xl-1,
.column.-pull-xl-1 {
right: calc(1 * 100% / var(--grid--columns));
}
}
.col.\-xl-2,
.column.\-xl-2 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl-2,
.column.\-xl-2 {
flex-grow: 1;
flex-basis: calc(2 * 100% / var(--grid--columns));
max-width: calc(2 * 100% / var(--grid--columns));
}
.col.-offset-xl-2,
.column.-offset-xl-2 {
margin-left: calc(2 * 100% / var(--grid--columns));
}
.col.-push-xl-2,
.column.-push-xl-2 {
left: calc(2 * 100% / var(--grid--columns));
}
.col.-pull-xl-2,
.column.-pull-xl-2 {
right: calc(2 * 100% / var(--grid--columns));
}
}
.col.\-xl-3,
.column.\-xl-3 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl-3,
.column.\-xl-3 {
flex-grow: 1;
flex-basis: calc(3 * 100% / var(--grid--columns));
max-width: calc(3 * 100% / var(--grid--columns));
}
.col.-offset-xl-3,
.column.-offset-xl-3 {
margin-left: calc(3 * 100% / var(--grid--columns));
}
.col.-push-xl-3,
.column.-push-xl-3 {
left: calc(3 * 100% / var(--grid--columns));
}
.col.-pull-xl-3,
.column.-pull-xl-3 {
right: calc(3 * 100% / var(--grid--columns));
}
}
.col.\-xl-4,
.column.\-xl-4 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl-4,
.column.\-xl-4 {
flex-grow: 1;
flex-basis: calc(4 * 100% / var(--grid--columns));
max-width: calc(4 * 100% / var(--grid--columns));
}
.col.-offset-xl-4,
.column.-offset-xl-4 {
margin-left: calc(4 * 100% / var(--grid--columns));
}
.col.-push-xl-4,
.column.-push-xl-4 {
left: calc(4 * 100% / var(--grid--columns));
}
.col.-pull-xl-4,
.column.-pull-xl-4 {
right: calc(4 * 100% / var(--grid--columns));
}
}
.col.\-xl-5,
.column.\-xl-5 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl-5,
.column.\-xl-5 {
flex-grow: 1;
flex-basis: calc(5 * 100% / var(--grid--columns));
max-width: calc(5 * 100% / var(--grid--columns));
}
.col.-offset-xl-5,
.column.-offset-xl-5 {
margin-left: calc(5 * 100% / var(--grid--columns));
}
.col.-push-xl-5,
.column.-push-xl-5 {
left: calc(5 * 100% / var(--grid--columns));
}
.col.-pull-xl-5,
.column.-pull-xl-5 {
right: calc(5 * 100% / var(--grid--columns));
}
}
.col.\-xl-6,
.column.\-xl-6 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl-6,
.column.\-xl-6 {
flex-grow: 1;
flex-basis: calc(6 * 100% / var(--grid--columns));
max-width: calc(6 * 100% / var(--grid--columns));
}
.col.-offset-xl-6,
.column.-offset-xl-6 {
margin-left: calc(6 * 100% / var(--grid--columns));
}
.col.-push-xl-6,
.column.-push-xl-6 {
left: calc(6 * 100% / var(--grid--columns));
}
.col.-pull-xl-6,
.column.-pull-xl-6 {
right: calc(6 * 100% / var(--grid--columns));
}
}
.col.\-xl-7,
.column.\-xl-7 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl-7,
.column.\-xl-7 {
flex-grow: 1;
flex-basis: calc(7 * 100% / var(--grid--columns));
max-width: calc(7 * 100% / var(--grid--columns));
}
.col.-offset-xl-7,
.column.-offset-xl-7 {
margin-left: calc(7 * 100% / var(--grid--columns));
}
.col.-push-xl-7,
.column.-push-xl-7 {
left: calc(7 * 100% / var(--grid--columns));
}
.col.-pull-xl-7,
.column.-pull-xl-7 {
right: calc(7 * 100% / var(--grid--columns));
}
}
.col.\-xl-8,
.column.\-xl-8 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl-8,
.column.\-xl-8 {
flex-grow: 1;
flex-basis: calc(8 * 100% / var(--grid--columns));
max-width: calc(8 * 100% / var(--grid--columns));
}
.col.-offset-xl-8,
.column.-offset-xl-8 {
margin-left: calc(8 * 100% / var(--grid--columns));
}
.col.-push-xl-8,
.column.-push-xl-8 {
left: calc(8 * 100% / var(--grid--columns));
}
.col.-pull-xl-8,
.column.-pull-xl-8 {
right: calc(8 * 100% / var(--grid--columns));
}
}
.col.\-xl-9,
.column.\-xl-9 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl-9,
.column.\-xl-9 {
flex-grow: 1;
flex-basis: calc(9 * 100% / var(--grid--columns));
max-width: calc(9 * 100% / var(--grid--columns));
}
.col.-offset-xl-9,
.column.-offset-xl-9 {
margin-left: calc(9 * 100% / var(--grid--columns));
}
.col.-push-xl-9,
.column.-push-xl-9 {
left: calc(9 * 100% / var(--grid--columns));
}
.col.-pull-xl-9,
.column.-pull-xl-9 {
right: calc(9 * 100% / var(--grid--columns));
}
}
.col.\-xl-10,
.column.\-xl-10 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl-10,
.column.\-xl-10 {
flex-grow: 1;
flex-basis: calc(10 * 100% / var(--grid--columns));
max-width: calc(10 * 100% / var(--grid--columns));
}
.col.-offset-xl-10,
.column.-offset-xl-10 {
margin-left: calc(10 * 100% / var(--grid--columns));
}
.col.-push-xl-10,
.column.-push-xl-10 {
left: calc(10 * 100% / var(--grid--columns));
}
.col.-pull-xl-10,
.column.-pull-xl-10 {
right: calc(10 * 100% / var(--grid--columns));
}
}
.col.\-xl-11,
.column.\-xl-11 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl-11,
.column.\-xl-11 {
flex-grow: 1;
flex-basis: calc(11 * 100% / var(--grid--columns));
max-width: calc(11 * 100% / var(--grid--columns));
}
.col.-offset-xl-11,
.column.-offset-xl-11 {
margin-left: calc(11 * 100% / var(--grid--columns));
}
.col.-push-xl-11,
.column.-push-xl-11 {
left: calc(11 * 100% / var(--grid--columns));
}
.col.-pull-xl-11,
.column.-pull-xl-11 {
right: calc(11 * 100% / var(--grid--columns));
}
}
.col.\-xl-12,
.column.\-xl-12 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.col.\-xl-12,
.column.\-xl-12 {
flex-grow: 1;
flex-basis: calc(12 * 100% / var(--grid--columns));
max-width: calc(12 * 100% / var(--grid--columns));
}
.col.-offset-xl-12,
.column.-offset-xl-12 {
margin-left: calc(12 * 100% / var(--grid--columns));
}
.col.-push-xl-12,
.column.-push-xl-12 {
left: calc(12 * 100% / var(--grid--columns));
}
.col.-pull-xl-12,
.column.-pull-xl-12 {
right: calc(12 * 100% / var(--grid--columns));
}
}
@media screen and (min-width: 1200px) {
.col.-offset-xl-0,
.column.-offset-xl-0 {
margin-left: 0;
}
.col.-push-xl-0,
.column.-push-xl-0 {
left: 0;
}
.col.-pull-xl-0,
.column.-pull-xl-0 {
right: 0;
}
}
.col.\-2xl, .col.\-2xl-auto,
.column.\-2xl,
.column.\-2xl-auto {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl,
.column.\-2xl {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col.\-2xl-auto,
.column.\-2xl-auto {
flex: 1 0 auto;
max-width: auto;
}
.col.-first-2xl,
.column.-first-2xl {
order: -1;
}
.col.-last-2xl,
.column.-last-2xl {
order: 1;
}
}
.col.\-2xl-1,
.column.\-2xl-1 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl-1,
.column.\-2xl-1 {
flex-grow: 1;
flex-basis: calc(1 * 100% / var(--grid--columns));
max-width: calc(1 * 100% / var(--grid--columns));
}
.col.-offset-2xl-1,
.column.-offset-2xl-1 {
margin-left: calc(1 * 100% / var(--grid--columns));
}
.col.-push-2xl-1,
.column.-push-2xl-1 {
left: calc(1 * 100% / var(--grid--columns));
}
.col.-pull-2xl-1,
.column.-pull-2xl-1 {
right: calc(1 * 100% / var(--grid--columns));
}
}
.col.\-2xl-2,
.column.\-2xl-2 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl-2,
.column.\-2xl-2 {
flex-grow: 1;
flex-basis: calc(2 * 100% / var(--grid--columns));
max-width: calc(2 * 100% / var(--grid--columns));
}
.col.-offset-2xl-2,
.column.-offset-2xl-2 {
margin-left: calc(2 * 100% / var(--grid--columns));
}
.col.-push-2xl-2,
.column.-push-2xl-2 {
left: calc(2 * 100% / var(--grid--columns));
}
.col.-pull-2xl-2,
.column.-pull-2xl-2 {
right: calc(2 * 100% / var(--grid--columns));
}
}
.col.\-2xl-3,
.column.\-2xl-3 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl-3,
.column.\-2xl-3 {
flex-grow: 1;
flex-basis: calc(3 * 100% / var(--grid--columns));
max-width: calc(3 * 100% / var(--grid--columns));
}
.col.-offset-2xl-3,
.column.-offset-2xl-3 {
margin-left: calc(3 * 100% / var(--grid--columns));
}
.col.-push-2xl-3,
.column.-push-2xl-3 {
left: calc(3 * 100% / var(--grid--columns));
}
.col.-pull-2xl-3,
.column.-pull-2xl-3 {
right: calc(3 * 100% / var(--grid--columns));
}
}
.col.\-2xl-4,
.column.\-2xl-4 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl-4,
.column.\-2xl-4 {
flex-grow: 1;
flex-basis: calc(4 * 100% / var(--grid--columns));
max-width: calc(4 * 100% / var(--grid--columns));
}
.col.-offset-2xl-4,
.column.-offset-2xl-4 {
margin-left: calc(4 * 100% / var(--grid--columns));
}
.col.-push-2xl-4,
.column.-push-2xl-4 {
left: calc(4 * 100% / var(--grid--columns));
}
.col.-pull-2xl-4,
.column.-pull-2xl-4 {
right: calc(4 * 100% / var(--grid--columns));
}
}
.col.\-2xl-5,
.column.\-2xl-5 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl-5,
.column.\-2xl-5 {
flex-grow: 1;
flex-basis: calc(5 * 100% / var(--grid--columns));
max-width: calc(5 * 100% / var(--grid--columns));
}
.col.-offset-2xl-5,
.column.-offset-2xl-5 {
margin-left: calc(5 * 100% / var(--grid--columns));
}
.col.-push-2xl-5,
.column.-push-2xl-5 {
left: calc(5 * 100% / var(--grid--columns));
}
.col.-pull-2xl-5,
.column.-pull-2xl-5 {
right: calc(5 * 100% / var(--grid--columns));
}
}
.col.\-2xl-6,
.column.\-2xl-6 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl-6,
.column.\-2xl-6 {
flex-grow: 1;
flex-basis: calc(6 * 100% / var(--grid--columns));
max-width: calc(6 * 100% / var(--grid--columns));
}
.col.-offset-2xl-6,
.column.-offset-2xl-6 {
margin-left: calc(6 * 100% / var(--grid--columns));
}
.col.-push-2xl-6,
.column.-push-2xl-6 {
left: calc(6 * 100% / var(--grid--columns));
}
.col.-pull-2xl-6,
.column.-pull-2xl-6 {
right: calc(6 * 100% / var(--grid--columns));
}
}
.col.\-2xl-7,
.column.\-2xl-7 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl-7,
.column.\-2xl-7 {
flex-grow: 1;
flex-basis: calc(7 * 100% / var(--grid--columns));
max-width: calc(7 * 100% / var(--grid--columns));
}
.col.-offset-2xl-7,
.column.-offset-2xl-7 {
margin-left: calc(7 * 100% / var(--grid--columns));
}
.col.-push-2xl-7,
.column.-push-2xl-7 {
left: calc(7 * 100% / var(--grid--columns));
}
.col.-pull-2xl-7,
.column.-pull-2xl-7 {
right: calc(7 * 100% / var(--grid--columns));
}
}
.col.\-2xl-8,
.column.\-2xl-8 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl-8,
.column.\-2xl-8 {
flex-grow: 1;
flex-basis: calc(8 * 100% / var(--grid--columns));
max-width: calc(8 * 100% / var(--grid--columns));
}
.col.-offset-2xl-8,
.column.-offset-2xl-8 {
margin-left: calc(8 * 100% / var(--grid--columns));
}
.col.-push-2xl-8,
.column.-push-2xl-8 {
left: calc(8 * 100% / var(--grid--columns));
}
.col.-pull-2xl-8,
.column.-pull-2xl-8 {
right: calc(8 * 100% / var(--grid--columns));
}
}
.col.\-2xl-9,
.column.\-2xl-9 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl-9,
.column.\-2xl-9 {
flex-grow: 1;
flex-basis: calc(9 * 100% / var(--grid--columns));
max-width: calc(9 * 100% / var(--grid--columns));
}
.col.-offset-2xl-9,
.column.-offset-2xl-9 {
margin-left: calc(9 * 100% / var(--grid--columns));
}
.col.-push-2xl-9,
.column.-push-2xl-9 {
left: calc(9 * 100% / var(--grid--columns));
}
.col.-pull-2xl-9,
.column.-pull-2xl-9 {
right: calc(9 * 100% / var(--grid--columns));
}
}
.col.\-2xl-10,
.column.\-2xl-10 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl-10,
.column.\-2xl-10 {
flex-grow: 1;
flex-basis: calc(10 * 100% / var(--grid--columns));
max-width: calc(10 * 100% / var(--grid--columns));
}
.col.-offset-2xl-10,
.column.-offset-2xl-10 {
margin-left: calc(10 * 100% / var(--grid--columns));
}
.col.-push-2xl-10,
.column.-push-2xl-10 {
left: calc(10 * 100% / var(--grid--columns));
}
.col.-pull-2xl-10,
.column.-pull-2xl-10 {
right: calc(10 * 100% / var(--grid--columns));
}
}
.col.\-2xl-11,
.column.\-2xl-11 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl-11,
.column.\-2xl-11 {
flex-grow: 1;
flex-basis: calc(11 * 100% / var(--grid--columns));
max-width: calc(11 * 100% / var(--grid--columns));
}
.col.-offset-2xl-11,
.column.-offset-2xl-11 {
margin-left: calc(11 * 100% / var(--grid--columns));
}
.col.-push-2xl-11,
.column.-push-2xl-11 {
left: calc(11 * 100% / var(--grid--columns));
}
.col.-pull-2xl-11,
.column.-pull-2xl-11 {
right: calc(11 * 100% / var(--grid--columns));
}
}
.col.\-2xl-12,
.column.\-2xl-12 {
flex-grow: 0;
flex-basis: 100%;
width: 100%;
}
@media screen and (min-width: 1400px) {
.col.\-2xl-12,
.column.\-2xl-12 {
flex-grow: 1;
flex-basis: calc(12 * 100% / var(--grid--columns));
max-width: calc(12 * 100% / var(--grid--columns));
}
.col.-offset-2xl-12,
.column.-offset-2xl-12 {
margin-left: calc(12 * 100% / var(--grid--columns));
}
.col.-push-2xl-12,
.column.-push-2xl-12 {
left: calc(12 * 100% / var(--grid--columns));
}
.col.-pull-2xl-12,
.column.-pull-2xl-12 {
right: calc(12 * 100% / var(--grid--columns));
}
}
@media screen and (min-width: 1400px) {
.col.-offset-2xl-0,
.column.-offset-2xl-0 {
margin-left: 0;
}
.col.-push-2xl-0,
.column.-push-2xl-0 {
left: 0;
}
.col.-pull-2xl-0,
.column.-pull-2xl-0 {
right: 0;
}
}
.col.-first,
.column.-first {
order: -1;
}
.col.-last,
.column.-last {
order: 1;
}
.col.-offset-1,
.column.-offset-1 {
margin-left: calc(1 * 100% / var(--grid--columns));
}
.col.-push-1,
.column.-push-1 {
left: calc(1 * 100% / var(--grid--columns));
}
.col.-pull-1,
.column.-pull-1 {
right: calc(1 * 100% / var(--grid--columns));
}
.col.-offset-2,
.column.-offset-2 {
margin-left: calc(2 * 100% / var(--grid--columns));
}
.col.-push-2,
.column.-push-2 {
left: calc(2 * 100% / var(--grid--columns));
}
.col.-pull-2,
.column.-pull-2 {
right: calc(2 * 100% / var(--grid--columns));
}
.col.-offset-3,
.column.-offset-3 {
margin-left: calc(3 * 100% / var(--grid--columns));
}
.col.-push-3,
.column.-push-3 {
left: calc(3 * 100% / var(--grid--columns));
}
.col.-pull-3,
.column.-pull-3 {
right: calc(3 * 100% / var(--grid--columns));
}
.col.-offset-4,
.column.-offset-4 {
margin-left: calc(4 * 100% / var(--grid--columns));
}
.col.-push-4,
.column.-push-4 {
left: calc(4 * 100% / var(--grid--columns));
}
.col.-pull-4,
.column.-pull-4 {
right: calc(4 * 100% / var(--grid--columns));
}
.col.-offset-5,
.column.-offset-5 {
margin-left: calc(5 * 100% / var(--grid--columns));
}
.col.-push-5,
.column.-push-5 {
left: calc(5 * 100% / var(--grid--columns));
}
.col.-pull-5,
.column.-pull-5 {
right: calc(5 * 100% / var(--grid--columns));
}
.col.-offset-6,
.column.-offset-6 {
margin-left: calc(6 * 100% / var(--grid--columns));
}
.col.-push-6,
.column.-push-6 {
left: calc(6 * 100% / var(--grid--columns));
}
.col.-pull-6,
.column.-pull-6 {
right: calc(6 * 100% / var(--grid--columns));
}
.col.-offset-7,
.column.-offset-7 {
margin-left: calc(7 * 100% / var(--grid--columns));
}
.col.-push-7,
.column.-push-7 {
left: calc(7 * 100% / var(--grid--columns));
}
.col.-pull-7,
.column.-pull-7 {
right: calc(7 * 100% / var(--grid--columns));
}
.col.-offset-8,
.column.-offset-8 {
margin-left: calc(8 * 100% / var(--grid--columns));
}
.col.-push-8,
.column.-push-8 {
left: calc(8 * 100% / var(--grid--columns));
}
.col.-pull-8,
.column.-pull-8 {
right: calc(8 * 100% / var(--grid--columns));
}
.col.-offset-9,
.column.-offset-9 {
margin-left: calc(9 * 100% / var(--grid--columns));
}
.col.-push-9,
.column.-push-9 {
left: calc(9 * 100% / var(--grid--columns));
}
.col.-pull-9,
.column.-pull-9 {
right: calc(9 * 100% / var(--grid--columns));
}
.col.-offset-10,
.column.-offset-10 {
margin-left: calc(10 * 100% / var(--grid--columns));
}
.col.-push-10,
.column.-push-10 {
left: calc(10 * 100% / var(--grid--columns));
}
.col.-pull-10,
.column.-pull-10 {
right: calc(10 * 100% / var(--grid--columns));
}
.col.-offset-11,
.column.-offset-11 {
margin-left: calc(11 * 100% / var(--grid--columns));
}
.col.-push-11,
.column.-push-11 {
left: calc(11 * 100% / var(--grid--columns));
}
.col.-pull-11,
.column.-pull-11 {
right: calc(11 * 100% / var(--grid--columns));
}
.col.-offset-12,
.column.-offset-12 {
margin-left: calc(12 * 100% / var(--grid--columns));
}
.col.-push-12,
.column.-push-12 {
left: calc(12 * 100% / var(--grid--columns));
}
.col.-pull-12,
.column.-pull-12 {
right: calc(12 * 100% / var(--grid--columns));
}
.col.-offset-0,
.column.-offset-0 {
margin-left: 0;
}
.col.-push-0,
.column.-push-0 {
left: 0;
}
.col.-pull-0,
.column.-pull-0 {
right: 0;
}
/**
* Collapsible
*/
.collapsible {
position: relative;
display: block;
font-size: var(--collapsible--font-size, var(--font-size));
}
/**
* Color variants
*/
.collapsible.-light {
--collapsible--background: var(--collapsible--light--background, var(--color-light));
--collapsible--border-top-color: var(
--collapsible--light--border-top-color,
var(--color-light-shade-50)
);
--collapsible--border-right-color: var(
--collapsible--light--border-right-color,
var(--color-light-shade-50)
);
--collapsible--border-bottom-color: var(
--collapsible--light--border-bottom-color,
var(--color-light-shade-50)
);
--collapsible--border-left-color: var(
--collapsible--light--border-left-color,
var(--color-light-shade-50)
);
--collapsible--color: var(--collapsible--light--color, var(--contrast-text-color-light));
--collapsible--body--background: var(
--collapsible--light--body--background,
var(--color-white)
);
}
.collapsible.-dark {
--collapsible--background: var(--collapsible--dark--background, var(--color-dark));
--collapsible--border-top-color: var(
--collapsible--dark--border-top-color,
var(--color-dark-tint-50)
);
--collapsible--border-right-color: var(
--collapsible--dark--border-right-color,
var(--color-dark-tint-50)
);
--collapsible--border-bottom-color: var(
--collapsible--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--collapsible--border-left-color: var(
--collapsible--dark--border-left-color,
var(--color-dark-tint-50)
);
--collapsible--color: var(--collapsible--dark--color, var(--contrast-text-color-dark));
--collapsible--body--background: var(
--collapsible--dark--body--background,
var(--color-dark-tint-50)
);
}
.collapsible.-transparent {
--collapsible--background: var(--collapsible--transparent--background, transparent);
--collapsible--border-top-color: var(
--collapsible--transparent--border-top-color,
transparent
);
--collapsible--border-right-color: var(
--collapsible--transparent--border-right-color,
transparent
);
--collapsible--border-bottom-color: var(
--collapsible--transparent--border-bottom-color,
transparent
);
--collapsible--border-left-color: var(
--collapsible--transparent--border-left-color,
transparent
);
--collapsible--color: var(--collapsible--transparent--color, inherit);
--collapsible--body--background: var(
--collapsible--transparent--body--background,
transparent
);
--collapsible--box-shadow-color: transparent;
}
.light-theme .collapsible.-transparent, .-light .collapsible.-transparent {
--collapsible--icon--color: var(
--collapsible--transparent--icon--light--color,
var(--color-dark)
);
}
.dark-theme .collapsible.-transparent, .-dark .collapsible.-transparent {
--collapsible--icon--color: var(
--collapsible--transparent--icon--dark--color,
var(--color-light)
);
}
/**
* Size variants
*/
.collapsible.-sm {
--collapsible--border-top-left-radius: var(
--collapsible--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--collapsible--border-top-right-radius: var(
--collapsible--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--collapsible--border-bottom-right-radius: var(
--collapsible--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--collapsible--border-bottom-left-radius: var(
--collapsible--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--collapsible--font-size: var(
--collapsible--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--collapsible--padding-top: var(
--collapsible--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--collapsible--padding-right: var(
--collapsible--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--collapsible--padding-bottom: var(
--collapsible--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--collapsible--padding-left: var(
--collapsible--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
--collapsible--header--padding-top: var(
--collapsible--sm--header--padding-top,
var(--collapsible--padding-top)
);
--collapsible--header--padding-right: var(
--collapsible--sm--header--padding-right,
var(--collapsible--padding-right)
);
--collapsible--header--padding-bottom: var(
--collapsible--sm--header--padding-bottom,
var(--collapsible--padding-bottom)
);
--collapsible--header--padding-left: var(
--collapsible--sm--header--padding-left,
var(--collapsible--padding-left)
);
--collapsible--body--padding-top: var(
--collapsible--sm--body--padding-top,
var(--collapsible--padding-top)
);
--collapsible--body--padding-right: var(
--collapsible--sm--body--padding-right,
var(--collapsible--padding-right)
);
--collapsible--body--padding-bottom: var(
--collapsible--sm--body--padding-bottom,
var(--collapsible--padding-bottom)
);
--collapsible--body--padding-left: var(
--collapsible--sm--body--padding-left,
var(--collapsible--padding-left)
);
}
.collapsible.-md {
--collapsible--border-top-left-radius: var(
--collapsible--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--collapsible--border-top-right-radius: var(
--collapsible--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--collapsible--border-bottom-right-radius: var(
--collapsible--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--collapsible--border-bottom-left-radius: var(
--collapsible--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--collapsible--font-size: var(
--collapsible--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--collapsible--padding-top: var(
--collapsible--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--collapsible--padding-right: var(
--collapsible--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--collapsible--padding-bottom: var(
--collapsible--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--collapsible--padding-left: var(
--collapsible--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
--collapsible--header--padding-top: var(
--collapsible--md--header--padding-top,
var(--collapsible--padding-top)
);
--collapsible--header--padding-right: var(
--collapsible--md--header--padding-right,
var(--collapsible--padding-right)
);
--collapsible--header--padding-bottom: var(
--collapsible--md--header--padding-bottom,
var(--collapsible--padding-bottom)
);
--collapsible--header--padding-left: var(
--collapsible--md--header--padding-left,
var(--collapsible--padding-left)
);
--collapsible--body--padding-top: var(
--collapsible--md--body--padding-top,
var(--collapsible--padding-top)
);
--collapsible--body--padding-right: var(
--collapsible--md--body--padding-right,
var(--collapsible--padding-right)
);
--collapsible--body--padding-bottom: var(
--collapsible--md--body--padding-bottom,
var(--collapsible--padding-bottom)
);
--collapsible--body--padding-left: var(
--collapsible--md--body--padding-left,
var(--collapsible--padding-left)
);
}
.collapsible.-lg {
--collapsible--border-top-left-radius: var(
--collapsible--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--collapsible--border-top-right-radius: var(
--collapsible--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--collapsible--border-bottom-right-radius: var(
--collapsible--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--collapsible--border-bottom-left-radius: var(
--collapsible--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--collapsible--font-size: var(
--collapsible--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--collapsible--padding-top: var(
--collapsible--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--collapsible--padding-right: var(
--collapsible--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--collapsible--padding-bottom: var(
--collapsible--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--collapsible--padding-left: var(
--collapsible--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
--collapsible--header--padding-top: var(
--collapsible--lg--header--padding-top,
var(--collapsible--padding-top)
);
--collapsible--header--padding-right: var(
--collapsible--lg--header--padding-right,
var(--collapsible--padding-right)
);
--collapsible--header--padding-bottom: var(
--collapsible--lg--header--padding-bottom,
var(--collapsible--padding-bottom)
);
--collapsible--header--padding-left: var(
--collapsible--lg--header--padding-left,
var(--collapsible--padding-left)
);
--collapsible--body--padding-top: var(
--collapsible--lg--body--padding-top,
var(--collapsible--padding-top)
);
--collapsible--body--padding-right: var(
--collapsible--lg--body--padding-right,
var(--collapsible--padding-right)
);
--collapsible--body--padding-bottom: var(
--collapsible--lg--body--padding-bottom,
var(--collapsible--padding-bottom)
);
--collapsible--body--padding-left: var(
--collapsible--lg--body--padding-left,
var(--collapsible--padding-left)
);
}
/**
* Collapsible Item
*/
.collapsible > .collapsible-item {
position: relative;
display: block;
box-shadow: var(--collapsible--box-shadow, var(--collapsible--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--collapsible--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--collapsible--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--collapsible--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--collapsible--box-shadow-color, var(--box-shadow-color)));
}
.collapsible > .collapsible-item > .collapsible-header {
border-style: var(--collapsible--header--border-style, var(--collapsible--border-style, var(--collapsible--header--border-top-style, var(--collapsible--border-top-style, var(--border-top-style))) var(--collapsible--header--border-right-style, var(--collapsible--border-right-style, var(--border-right-style))) var(--collapsible--header--border-bottom-style, var(--collapsible--border-bottom-style, var(--border-bottom-style))) var(--collapsible--header--border-left-style, var(--collapsible--border-left-style, var(--border-left-style)))));
border-width: var(--collapsible--header--border-width, var(--collapsible--border-width, var(--collapsible--header--border-top-width, var(--collapsible--border-top-width, var(--border-top-width))) var(--collapsible--header--border-right-width, var(--collapsible--border-right-width, var(--border-right-width))) var(--collapsible--header--border-bottom-width, var(--collapsible--border-bottom-width, var(--border-bottom-width))) var(--collapsible--header--border-left-width, var(--collapsible--border-left-width, var(--border-left-width)))));
border-color: var(--collapsible--header--border-color, var(--collapsible--border-color, var(--collapsible--header--border-top-color, var(--collapsible--border-top-color, var(--border-top-color))) var(--collapsible--header--border-right-color, var(--collapsible--border-right-color, var(--border-right-color))) var(--collapsible--header--border-bottom-color, var(--collapsible--border-bottom-color, var(--border-bottom-color))) var(--collapsible--header--border-left-color, var(--collapsible--border-left-color, var(--border-left-color)))));
color: var(--collapsible--header--color, var(--collapsible--color));
background-color: var(--collapsible--header--background, var(--collapsible--background));
padding: var(--collapsible--header--padding, var(--collapsible--padding, var(--collapsible--header--padding-top, var(--collapsible--padding-top, var(--padding-top))) var(--collapsible--header--padding-right, var(--collapsible--padding-right, var(--padding-right))) var(--collapsible--header--padding-bottom, var(--collapsible--padding-bottom, var(--padding-bottom))) var(--collapsible--header--padding-left, var(--collapsible--padding-left, var(--padding-left)))));
display: flex;
cursor: pointer;
align-items: center;
justify-content: space-between;
text-decoration: none;
transition-property: var(--collapsible--transition-property, var(--collapsible--transition-property, background-color, border-radius));
transition-duration: var(--collapsible--transition-duration, var(--collapsible--transition-duration, var(--transition-duration)));
transition-timing-function: var(--collapsible--transition-timing-function, var(--transition-timing-function));
}
.collapsible > .collapsible-item > .collapsible-header > .icon {
background-color: var(--collapsible--icon--color, var(--collapsible--header--color, var(--collapsible--color)));
width: var(--collapsible--icon--size, 12px);
height: var(--collapsible--icon--size, 12px);
mask-size: var(--collapsible--icon--size, 12px) var(--collapsible--icon--size, 12px);
display: inline-block;
position: relative;
transform: rotate(-90deg);
transition-property: var(--collapsible--transition-property, var(--collapsible--transition-property, background-color, transform));
transition-duration: var(--collapsible--transition-duration, var(--collapsible--transition-duration, var(--transition-duration)));
transition-timing-function: var(--collapsible--transition-timing-function, var(--transition-timing-function));
mask-image: url('data:image/svg+xml; utf8, ');
-webkit-mask-image: url('data:image/svg+xml; utf8, ');
mask-position: center center;
-webkit-mask-position: center center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
}
.collapsible > .collapsible-item > .collapsible-body {
display: block;
position: relative;
border-style: var(--collapsible--body--border-style, var(--collapsible--border-style, var(--collapsible--body--border-top-style, var(--collapsible--border-top-style, var(--border-top-style))) var(--collapsible--body--border-right-style, var(--collapsible--border-right-style, var(--border-right-style))) var(--collapsible--body--border-bottom-style, var(--collapsible--border-bottom-style, var(--border-bottom-style))) var(--collapsible--body--border-left-style, var(--collapsible--border-left-style, var(--border-left-style)))));
border-width: var(--collapsible--body--border-width, var(--collapsible--border-width, var(--collapsible--body--border-top-width, var(--collapsible--border-top-width, var(--border-top-width))) var(--collapsible--body--border-right-width, var(--collapsible--border-right-width, var(--border-right-width))) var(--collapsible--body--border-bottom-width, var(--collapsible--border-bottom-width, var(--border-bottom-width))) var(--collapsible--body--border-left-width, var(--collapsible--border-left-width, var(--border-left-width)))));
border-color: var(--collapsible--body--border-color, var(--collapsible--border-color, var(--collapsible--body--border-top-color, var(--collapsible--border-top-color, var(--border-top-color))) var(--collapsible--body--border-right-color, var(--collapsible--border-right-color, var(--border-right-color))) var(--collapsible--body--border-bottom-color, var(--collapsible--border-bottom-color, var(--border-bottom-color))) var(--collapsible--body--border-left-color, var(--collapsible--border-left-color, var(--border-left-color)))));
color: var(--collapsible--body--color, var(--collapsible--color));
background-color: var(--collapsible--body--background, var(--collapsible--background));
}
.collapsible > .collapsible-item > .collapsible-body > .content {
padding: var(--collapsible--body--padding, var(--collapsible--padding, var(--collapsible--body--padding-top, var(--collapsible--padding-top, var(--padding-top))) var(--collapsible--body--padding-right, var(--collapsible--padding-right, var(--padding-right))) var(--collapsible--body--padding-bottom, var(--collapsible--padding-bottom, var(--padding-bottom))) var(--collapsible--body--padding-left, var(--collapsible--padding-left, var(--padding-left)))));
}
.collapsible > .collapsible-item:first-of-type > .collapsible-header {
border-top-left-radius: var(--collapsible--header--border-top-left-radius, var(--collapsible--border-top-left-radius, var(--border-top-left-radius)));
border-top-right-radius: var(--collapsible--header--border-top-right-radius, var(--collapsible--border-top-right-radius, var(--border-top-right-radius)));
}
.collapsible > .collapsible-item:last-of-type > .collapsible-header {
border-bottom-left-radius: var(--collapsible--header--border-bottom-left-radius, var(--collapsible--border-bottom-left-radius, var(--border-bottom-left-radius)));
border-bottom-right-radius: var(--collapsible--header--border-bottom-right-radius, var(--collapsible--border-bottom-right-radius, var(--border-bottom-right-radius)));
}
.collapsible > .collapsible-item:last-of-type > .collapsible-body {
border-bottom-left-radius: var(--collapsible--body--border-bottom-left-radius, var(--collapsible--border-bottom-left-radius, var(--border-bottom-left-radius)));
border-bottom-right-radius: var(--collapsible--body--border-bottom-right-radius, var(--collapsible--border-bottom-right-radius, var(--border-bottom-right-radius)));
}
.collapsible > .collapsible-item.-active > .collapsible-header {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.collapsible > .collapsible-item.-active > .collapsible-header > .icon {
transform: rotate(0deg);
}
.collapsible > .collapsible-item + .collapsible-item > .collapsible-header {
border-top-width: 0;
}
/**
* Breakpoint mixins
*/
/**
* Dropdown
*/
.dropdown-wrapper {
display: inline-block;
position: relative;
}
.dropdown-wrapper .dropdown-trigger {
cursor: pointer;
}
.dropdown-wrapper .dropdown {
position: absolute;
z-index: var(--dropdown--z-index, 2000);
word-wrap: break-word;
width: max-content;
top: 0;
left: 0;
text-align: left;
list-style: none;
line-height: var(--dropdown--line-height, var(--line-height));
font-size: var(--dropdown--font-size, var(--font-size));
background-clip: padding-box;
display: inline-block;
white-space: normal;
min-width: var(--dropdown--min-width, 240px);
max-width: var(--dropdown--max-width, 90vw);
color: var(--dropdown--color);
box-shadow: var(--dropdown--box-shadow, var(--dropdown--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--dropdown--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--dropdown--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--dropdown--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--dropdown--box-shadow-color, var(--box-shadow-color)));
}
.dropdown-wrapper .dropdown:focus:hover {
outline-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] {
transform-origin: center bottom;
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] {
transform-origin: center top;
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] {
transform-origin: left center;
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] {
transform-origin: right center;
}
.dropdown-wrapper .dropdown > .arrow {
position: absolute;
}
.dropdown-wrapper .dropdown > .arrow,
.dropdown-wrapper .dropdown > .arrow::after {
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
position: absolute;
}
.dropdown-wrapper .dropdown > .arrow::after {
content: "";
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow {
border-bottom-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow::after {
border-bottom-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow {
border-top-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow::after {
border-top-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow {
border-left-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow::after {
border-left-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow {
border-right-width: 0;
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow::after {
border-right-width: 0;
}
.dropdown-wrapper .dropdown > .arrow {
width: var(--dropdown--arrow--size, 6px);
height: var(--dropdown--arrow--size, 6px);
}
.dropdown-wrapper .dropdown > .arrow, .dropdown-wrapper .dropdown > .arrow::after {
border-width: var(--dropdown--arrow--size, 6px);
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow::after, .dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow::after {
margin-left: calc(var(--dropdown--arrow--size, 6px) * -1);
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow::after, .dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow::after {
margin-top: calc(var(--dropdown--arrow--size, 6px) * -1);
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow {
bottom: calc(var(--dropdown--arrow--size, 6px) * -1);
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow::after {
bottom: 1px;
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow {
top: calc(var(--dropdown--arrow--size, 6px) * -1);
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow::after {
top: 1px;
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow {
right: calc(var(--dropdown--arrow--size, 6px) * -1);
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow::after {
right: 1px;
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow {
left: calc(var(--dropdown--arrow--size, 6px) * -1);
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow::after {
left: 1px;
}
.dropdown-wrapper .dropdown > .dropdown-header {
border-style: var(--dropdown--header--border-style, var(--dropdown--header--border-top-style, var(--dropdown--border-top-style, var(--border-top-style))) var(--dropdown--header--border-right-style, var(--dropdown--border-right-style, var(--border-right-style))) var(--dropdown--header--border-bottom-style, var(--dropdown--border-bottom-style, var(--border-bottom-style))) var(--dropdown--header--border-left-style, var(--dropdown--border-left-style, var(--border-left-style))));
border-width: var(--dropdown--header--border-width, var(--dropdown--header--border-top-width, var(--dropdown--border-top-width, var(--border-top-width))) var(--dropdown--header--border-right-width, var(--dropdown--border-right-width, var(--border-right-width))) var(--dropdown--header--border-bottom-width, var(--dropdown--border-bottom-width, 0)) var(--dropdown--header--border-left-width, var(--dropdown--border-left-width, var(--border-left-width))));
border-color: var(--dropdown--header--border-color, var(--dropdown--header--border-top-color, var(--dropdown--border-top-color, var(--border-top-color))) var(--dropdown--header--border-right-color, var(--dropdown--border-right-color, var(--border-right-color))) var(--dropdown--header--border-bottom-color, var(--dropdown--border-bottom-color, var(--border-bottom-color))) var(--dropdown--header--border-left-color, var(--dropdown--border-left-color, var(--border-left-color))));
background-color: var(--dropdown--header--background, var(--dropdown--background));
padding: var(--dropdown--header--padding, var(--dropdown--header--padding-top, var(--dropdown--padding-top, var(--padding-top))) var(--dropdown--header--padding-right, var(--dropdown--padding-right, var(--padding-right))) var(--dropdown--header--padding-bottom, var(--dropdown--padding-bottom, var(--padding-bottom))) var(--dropdown--header--padding-left, var(--dropdown--padding-left, var(--padding-left))));
transition-property: var(--dropdown--header--transition-property, var(--dropdown--transition-property, border-color));
transition-duration: var(--dropdown--header--transition-duration, var(--dropdown--transition-duration, var(--transition-duration)));
transition-timing-function: var(--dropdown--header--transition-timing-function, var(--dropdown--transition-timing-function, var(--transition-timing-function)));
}
.dropdown-wrapper .dropdown > .dropdown-body {
display: flex;
flex-direction: column;
border-style: var(--dropdown--body--border-style, var(--dropdown--body--border-top-style, var(--dropdown--border-top-style, var(--border-top-style))) var(--dropdown--body--border-right-style, var(--dropdown--border-right-style, var(--border-right-style))) var(--dropdown--body--border-bottom-style, var(--dropdown--border-bottom-style, var(--border-bottom-style))) var(--dropdown--body--border-left-style, var(--dropdown--border-left-style, var(--border-left-style))));
border-width: var(--dropdown--body--border-width, var(--dropdown--body--border-top-width, var(--dropdown--border-top-width, var(--border-top-width))) var(--dropdown--body--border-right-width, var(--dropdown--border-right-width, var(--border-right-width))) var(--dropdown--body--border-bottom-width, var(--dropdown--border-bottom-width, var(--border-bottom-width))) var(--dropdown--body--border-left-width, var(--dropdown--border-left-width, var(--border-left-width))));
border-color: var(--dropdown--body--border-color, var(--dropdown--body--border-top-color, var(--dropdown--border-top-color, var(--border-top-color))) var(--dropdown--body--border-right-color, var(--dropdown--border-right-color, var(--border-right-color))) var(--dropdown--body--border-bottom-color, var(--dropdown--border-bottom-color, var(--border-bottom-color))) var(--dropdown--body--border-left-color, var(--dropdown--border-left-color, var(--border-left-color))));
background-color: var(--dropdown--body--background, var(--dropdown--background));
padding: var(--dropdown--body--padding, var(--dropdown--body--padding-top, var(--dropdown--padding-top, var(--padding-top))) var(--dropdown--body--padding-right, var(--dropdown--padding-right, var(--padding-right))) var(--dropdown--body--padding-bottom, var(--dropdown--padding-bottom, var(--padding-bottom))) var(--dropdown--body--padding-left, var(--dropdown--padding-left, var(--padding-left))));
transition-property: var(--dropdown--body--transition-property, var(--dropdown--transition-property, border-color));
transition-duration: var(--dropdown--body--transition-duration, var(--dropdown--transition-duration, var(--transition-duration)));
transition-timing-function: var(--dropdown--body--transition-timing-function, var(--dropdown--transition-timing-function, var(--transition-timing-function)));
}
.dropdown-wrapper .dropdown > .dropdown-body .dropdown-wrapper {
width: 100%;
}
.dropdown-wrapper .dropdown > .dropdown-footer {
border-style: var(--dropdown--footer--border-style, var(--dropdown--footer--border-top-style, var(--dropdown--border-top-style, var(--border-top-style))) var(--dropdown--footer--border-right-style, var(--dropdown--border-right-style, var(--border-right-style))) var(--dropdown--footer--border-bottom-style, var(--dropdown--border-bottom-style, var(--border-bottom-style))) var(--dropdown--footer--border-left-style, var(--dropdown--border-left-style, var(--border-left-style))));
border-width: var(--dropdown--footer--border-width, var(--dropdown--footer--border-top-width, var(--dropdown--border-top-width, 0)) var(--dropdown--footer--border-right-width, var(--dropdown--border-right-width, var(--border-right-width))) var(--dropdown--footer--border-bottom-width, var(--dropdown--border-bottom-width, var(--border-bottom-width))) var(--dropdown--footer--border-left-width, var(--dropdown--border-left-width, var(--border-left-width))));
border-color: var(--dropdown--footer--border-color, var(--dropdown--footer--border-top-color, var(--dropdown--border-top-color, var(--border-top-color))) var(--dropdown--footer--border-right-color, var(--dropdown--border-right-color, var(--border-right-color))) var(--dropdown--footer--border-bottom-color, var(--dropdown--border-bottom-color, var(--border-bottom-color))) var(--dropdown--footer--border-left-color, var(--dropdown--border-left-color, var(--border-left-color))));
background-color: var(--dropdown--footer--background, var(--dropdown--background));
padding: var(--dropdown--footer--padding, var(--dropdown--footer--padding-top, var(--dropdown--padding-top, var(--padding-top))) var(--dropdown--footer--padding-right, var(--dropdown--padding-right, var(--padding-right))) var(--dropdown--footer--padding-bottom, var(--dropdown--padding-bottom, var(--padding-bottom))) var(--dropdown--footer--padding-left, var(--dropdown--padding-left, var(--padding-left))));
transition-property: var(--dropdown--footer--transition-property, var(--dropdown--transition-property, border-color));
transition-duration: var(--dropdown--footer--transition-duration, var(--dropdown--transition-duration, var(--transition-duration)));
transition-timing-function: var(--dropdown--footer--transition-timing-function, var(--dropdown--transition-timing-function, var(--transition-timing-function)));
}
.dropdown-wrapper .dropdown > div:first-of-type {
border-top-left-radius: var(--dropdown--border-top-left-radius, var(--border-top-left-radius));
border-top-right-radius: var(--dropdown--border-top-right-radius, var(--border-top-right-radius));
}
.dropdown-wrapper .dropdown > div:last-of-type {
border-bottom-left-radius: var(--dropdown--border-bottom-left-radius, var(--border-bottom-left-radius));
border-bottom-right-radius: var(--dropdown--border-bottom-right-radius, var(--border-bottom-right-radius));
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow {
border-top-color: var(--dropdown--border-bottom-color, var(--border-bottom-color));
}
.dropdown-wrapper .dropdown[data-popup-placement^=top] > .arrow::after {
border-top-color: var(--dropdown--background);
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow {
border-right-color: var(--dropdown--border-left-color, var(--border-left-color));
}
.dropdown-wrapper .dropdown[data-popup-placement^=right] > .arrow::after {
border-right-color: var(--dropdown--background);
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow {
border-bottom-color: var(--dropdown--border-top-color, var(--border-top-color));
}
.dropdown-wrapper .dropdown[data-popup-placement^=bottom] > .arrow::after {
border-bottom-color: var(--dropdown--background);
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow {
border-left-color: var(--dropdown--border-right-color, var(--border-right-color));
}
.dropdown-wrapper .dropdown[data-popup-placement^=left] > .arrow::after {
border-left-color: var(--dropdown--background);
}
/**
* Color variants
*/
.dropdown.-light {
--dropdown--background: var(--dropdown--light--background, var(--color-white));
--dropdown--color: var(--dropdown--light--color, var(--contrast-text-color-light));
--dropdown--border-top-color: var(
--dropdown--light--border-top-color,
var(--color-light-shade-50)
);
--dropdown--border-right-color: var(
--dropdown--light--border-right-color,
var(--color-light-shade-50)
);
--dropdown--border-bottom-color: var(
--dropdown--light--border-bottom-color,
var(--color-light-shade-50)
);
--dropdown--border-left-color: var(
--dropdown--light--border-left-color,
var(--color-light-shade-50)
);
--dropdown--item--hover--background: var(
--dropdown--light--item--hover--background,
var(--color-gray-50)
);
--dropdown--item--hover--color: var(
--dropdown--light--item--hover--color,
var(--dropdown--color)
);
--dropdown--item--active--background: var(
--dropdown--light--item--active--background,
var(--color-gray-50)
);
--dropdown--item--active--color: var(
--dropdown--light--item--active--color,
var(--dropdown--color)
);
--dropdown--item--disabled--background: var(
--dropdown--light--item--disabled--background,
transparent
);
--dropdown--item--disabled--color: var(
--dropdown--light--item--disabled--color,
var(--text-color-weak)
);
--dropdown--header--background: var(
--dropdown--light--header--background,
var(--color-gray-50)
);
--dropdown--footer--background: var(
--dropdown--light--footer--background,
var(--color-gray-50)
);
}
.dropdown.-dark {
--dropdown--background: var(--dropdown--dark--background, var(--color-dark));
--dropdown--color: var(--dropdown--dark--color, var(--contrast-text-color-dark));
--dropdown--border-top-color: var(
--dropdown--dark--border-top-color,
var(--color-dark-tint-50)
);
--dropdown--border-right-color: var(
--dropdown--dark--border-right-color,
var(--color-dark-tint-50)
);
--dropdown--border-bottom-color: var(
--dropdown--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--dropdown--border-left-color: var(
--dropdown--dark--border-left-color,
var(--color-dark-tint-50)
);
--dropdown--item--hover--background: var(
--dropdown--dark--item--hover--background,
var(--color-dark-tint-50)
);
--dropdown--item--hover--color: var(
--dropdown--dark--item--hover--color,
var(--dropdown--color)
);
--dropdown--item--active--background: var(
--dropdown--dark--item--active--background,
var(--color-dark-tint-50)
);
--dropdown--item--active--color: var(
--dropdown--dark--item--active--color,
var(--dropdown--color)
);
--dropdown--item--disabled--background: var(
--dropdown--dark--item--disabled--background,
transparent
);
--dropdown--item--disabled--color: var(
--dropdown--dark--item--disabled--color,
var(--text-color-weak)
);
--dropdown--header--background: var(
--dropdown--dark--header--background,
var(--color-dark-tint-50)
);
--dropdown--footer--background: var(
--dropdown--dark--footer--background,
var(--color-dark-tint-50)
);
}
/**
* Size variants
*/
.dropdown.-sm {
--dropdown--border-top-left-radius: var(
--dropdown--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--dropdown--border-top-right-radius: var(
--dropdown--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--dropdown--border-bottom-right-radius: var(
--dropdown--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--dropdown--border-bottom-left-radius: var(
--dropdown--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--dropdown--font-size: var(
--dropdown--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--dropdown--padding-top: var(
--dropdown--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--dropdown--padding-right: var(
--dropdown--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--dropdown--padding-bottom: var(
--dropdown--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--dropdown--padding-left: var(
--dropdown--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
}
.dropdown.-md {
--dropdown--border-top-left-radius: var(
--dropdown--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--dropdown--border-top-right-radius: var(
--dropdown--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--dropdown--border-bottom-right-radius: var(
--dropdown--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--dropdown--border-bottom-left-radius: var(
--dropdown--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--dropdown--font-size: var(
--dropdown--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--dropdown--padding-top: var(
--dropdown--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--dropdown--padding-right: var(
--dropdown--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--dropdown--padding-bottom: var(
--dropdown--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--dropdown--padding-left: var(
--dropdown--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
}
.dropdown.-lg {
--dropdown--border-top-left-radius: var(
--dropdown--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--dropdown--border-top-right-radius: var(
--dropdown--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--dropdown--border-bottom-right-radius: var(
--dropdown--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--dropdown--border-bottom-left-radius: var(
--dropdown--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--dropdown--font-size: var(
--dropdown--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--dropdown--padding-top: var(
--dropdown--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--dropdown--padding-right: var(
--dropdown--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--dropdown--padding-bottom: var(
--dropdown--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--dropdown--padding-left: var(
--dropdown--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
}
/**
* Dropdown Item
*/
.dropdown .dropdown-item {
display: flex;
margin: var(--dropdown--item--margin, var(--dropdown--item--margin-top, 0) var(--dropdown--item--margin-right, var(--dropdown--body--padding-right, calc(var(--dropdown--padding-right) * -1))) var(--dropdown--item--margin-bottom, 0) var(--dropdown--item--margin-left, var(--dropdown--body--padding-left, calc(var(--dropdown--padding-left) * -1))));
text-align: inherit;
white-space: nowrap;
cursor: pointer;
transition-property: var(--dropdown--item--transition-property, background-color, border-color, color);
transition-timing-function: var(--dropdown--item--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--dropdown--item--transition-duration, var(--transition-duration));
color: var(--dropdown--item--color, var(--dropdown--color));
border-style: var(--dropdown--item--border-style, var(--dropdown--border-style, var(--dropdown--item--border-top-style, var(--dropdown--border-top-style, var(--border-top-style))) var(--dropdown--item--border-right-style, var(--dropdown--border-right-style, var(--border-right-style))) var(--dropdown--item--border-bottom-style, var(--dropdown--border-bottom-style, var(--border-bottom-style))) var(--dropdown--item--border-left-style, var(--dropdown--border-left-style, var(--border-left-style)))));
border-width: var(--dropdown--item--border-width, var(--dropdown--item--border-top-width, 0) var(--dropdown--item--border-right-width, 0) var(--dropdown--item--border-bottom-width, 0) var(--dropdown--item--border-left-width, 0));
border-color: var(--dropdown--item--border-color, var(--dropdown--border-color, var(--dropdown--item--border-top-color, var(--dropdown--border-top-color, var(--border-top-color))) var(--dropdown--item--border-right-color, var(--dropdown--border-right-color, var(--border-right-color))) var(--dropdown--item--border-bottom-color, var(--dropdown--border-bottom-color, var(--border-bottom-color))) var(--dropdown--item--border-left-color, var(--dropdown--border-left-color, var(--border-left-color)))));
padding: var(--dropdown--item--padding, var(--dropdown--padding, var(--dropdown--item--padding-top, calc(var(--dropdown--padding-top, var(--padding-top)) * 0.5)) var(--dropdown--item--padding-right, var(--dropdown--padding-right, var(--padding-right))) var(--dropdown--item--padding-bottom, calc(var(--dropdown--padding-bottom, var(--padding-bottom)) * 0.5)) var(--dropdown--item--padding-left, var(--dropdown--padding-left, var(--padding-left)))));
background: var(--dropdown--item--background, var(--dropdown--background, transparent));
}
.dropdown .dropdown-item:not(.-disabled, .-plaintext):hover, .dropdown .dropdown-item:not(.-disabled, .-plaintext):focus {
color: var(--dropdown--item--hover--color, var(--dropdown--item--color));
background: var(--dropdown--item--hover--background, var(--dropdown--item--background));
}
.dropdown .dropdown-item.-disabled {
color: var(--dropdown--item--disabled--color, var(--dropdown--item--color));
background: var(--dropdown--item--disabled--background, var(--dropdown--item--background));
pointer-events: none;
cursor: default;
}
.dropdown .dropdown-item.-active {
color: var(--dropdown--item--active--color, var(--dropdown--item--color));
background: var(--dropdown--item--active--background, var(--dropdown--item--background));
font-weight: var(--dropdown--item--active--font-weight, var(--font-weight-semibold));
}
.dropdown .dropdown-item:hover, .dropdown .dropdown-item:focus {
outline: 0;
text-decoration: none;
}
.dropdown .dropdown-item.-plaintext {
cursor: default;
}
/*
* Dropdown Divider
*/
.dropdown-divider {
display: block;
height: 1px;
clear: both;
margin: var(--dropdown--divider--margin, var(--dropdown--margin--margin-top, calc(var(--margin-top) * 0.5)) var(--dropdown--margin--margin-right, var(--dropdown--body--padding-right, calc(var(--dropdown--padding-right) * -1))) var(--dropdown--margin--margin-bottom, calc(var(--margin-top) * 0.5)) var(--dropdown--margin--margin-left, var(--dropdown--body--padding-left, calc(var(--dropdown--padding-left) * -1))));
background-color: var(--dropdown--divider--background, var(--dropdown--border-top-color, var(--border-top-color)));
}
/**
* Expand Transition
*/
.expand-enter-active,
.expand-leave-active {
transition-property: height;
transition-duration: var(--expand-transition--transition-duration, var(--transition-duration));
transition-timing-function: var(--expand-transition--transition-timing-function, var(--transition-timing-function));
overflow: hidden;
}
.expand-enter,
.expand-leave-to {
height: 0;
}
.expand-enter-from,
.expand-enter-active,
.expand-leave-active,
.expand-leave-to {
will-change: height;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
/**
* Form
*/
.form {
position: relative;
}
/**
* Form Error
*/
.form-error {
position: relative;
margin: var(--form-error--margin, var(--form-error--margin-top, var(--margin-top-1-4)) var(--form-error--margin-right, 0) var(--form-error--margin-bottom, 0) var(--form-error--margin-left, 0));
padding: 0;
list-style: none;
color: var(--form-error--color, var(--color-danger));
font-size: var(--form-error-font-size, var(--font-size-sm));
}
.form-error li {
margin: 0;
}
/**
* Input Group
*/
.form-group {
display: block;
vertical-align: middle;
position: relative;
}
.form-group + .form-group {
margin-top: var(--form-group--margin-top, var(--margin-top));
}
.form-group.-inline {
display: flex;
}
.form-group.-inline > .form-input-group {
flex-basis: 100%;
}
.form-group.-inline > .form-label {
display: flex;
flex: 0 0 auto;
align-self: center;
margin-bottom: 0;
}
.form-group.-inline > .form-label.-right {
margin-right: 0;
}
/**
* Form Label
*/
.form-label {
position: relative;
flex-basis: 100%;
transition-property: var(--form-label--transition-property, color);
transition-duration: var(--form-label--transition-duration, var(--transition-duration));
transition-timing-function: var(--form-label--transition-timing-function, var(--transition-timing-function));
font-size: var(--form-label--font-size, var(--font-size));
margin: var(--form-label--margin, var(--form-label--margin-top, 0) var(--form-label--margin-right, 0) var(--form-label--margin-bottom, var(--margin-bottom-1-4)) var(--form-label--margin-left, 0));
}
.form-label.-right {
margin-right: 0;
order: 1;
}
.form-group.-required > .form-label::after {
color: var(--form-label--required--color, var(--color-danger));
content: " *";
}
.form-group.-error > .form-label {
color: var(--form-label--error--color, var(--color-danger));
}
.form-group.-inline > .form-label {
margin-right: var(--form-label--inline--margin-right, var(--margin-right));
}
.form-group.-inline > .form-label.-right {
margin-left: var(--form-label--inline--margin-left, var(--margin-left));
}
/**
* Size variants
*/
.form-label.-sm {
--form-label--font-size: var(
--form-label--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
}
.form-label.-md {
--form-label--font-size: var(
--form-label--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
}
.form-label.-lg {
--form-label--font-size: var(
--form-label--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
}
/**
* Hamburger menu
*/
.hamburger-menu {
opacity: var(--hamburger-menu--opacity, 0.75);
padding: var(--hamburger-menu--padding, var(--hamburger-menu--padding-top, 0) var(--hamburger-menu--padding-right, 0) var(--hamburger-menu--padding-bottom, 0) var(--hamburger-menu--padding-left, 0));
width: var(--hamburger-menu--bar--width);
height: calc(var(--hamburger-menu--bar--height) * 3 + var(--hamburger-menu--bar--spacing) * 2);
display: inline-flex;
position: relative;
box-sizing: content-box;
cursor: pointer;
transition-property: var(--hamburger-menu--transition-property, background-color, color, border-color);
transition-duration: var(--hamburger-menu--transition-duration, var(--transition-duration));
transition-timing-function: var(--hamburger-menu--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu:hover {
opacity: var(--hamburger-menu--hover--opacity, 1);
}
.hamburger-menu > .hamburger-menu-bars {
display: block;
top: 50%;
margin-top: calc(var(--hamburger-menu--bar--height) / -2);
}
.hamburger-menu > .hamburger-menu-bars, .hamburger-menu > .hamburger-menu-bars::before, .hamburger-menu > .hamburger-menu-bars::after {
width: var(--hamburger-menu--bar--width);
height: var(--hamburger-menu--bar--height);
border-radius: var(--hamburger-menu--bar--border-radius, var(--border-radius-sm));
background: var(--hamburger-menu--background);
position: absolute;
transition-property: var(--hamburger-menu--bar--transition-property, background-color, transform);
transition-duration: var(--hamburger-menu--bar--transition-duration, 175ms);
transition-timing-function: var(--hamburger-menu--bar--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu > .hamburger-menu-bars::before, .hamburger-menu > .hamburger-menu-bars::after {
content: "";
display: block;
}
.hamburger-menu > .hamburger-menu-bars::before {
top: calc(var(--hamburger-menu--bar--spacing) * -1 + var(--hamburger-menu--bar--height) * -1);
}
.hamburger-menu > .hamburger-menu-bars::after {
bottom: calc(var(--hamburger-menu--bar--spacing) * -1 + var(--hamburger-menu--bar--height) * -1);
}
.hamburger-menu.-close > .hamburger-menu-bars {
transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background var(--hamburger-menu--bar--transition-duration, 175ms) var(--hamburger-menu--bar--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu.-close > .hamburger-menu-bars::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in, background var(--hamburger-menu--bar--transition-duration, 175ms) var(--hamburger-menu--bar--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu.-close > .hamburger-menu-bars::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background var(--hamburger-menu--bar--transition-duration, 175ms) var(--hamburger-menu--bar--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu.-close.-active > .hamburger-menu-bars {
transform: rotate(225deg);
transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger-menu.-close.-active > .hamburger-menu-bars::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger-menu.-close.-active > .hamburger-menu-bars::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger-menu.-arrow-left.-active > .hamburger-menu-bars::before {
transform: translate3d(calc(var(--hamburger-menu--bar--width) * -0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-left.-active > .hamburger-menu-bars::after {
transform: translate3d(calc(var(--hamburger-menu--bar--width) * -0.2), 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-right.-active > .hamburger-menu-bars::before {
transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-right.-active > .hamburger-menu-bars::after {
transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-up.-active > .hamburger-menu-bars {
transform: rotate(-90deg);
}
.hamburger-menu.-arrow-up.-active > .hamburger-menu-bars::before {
transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-up.-active > .hamburger-menu-bars::after {
transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-down.-active > .hamburger-menu-bars {
transform: rotate(90deg);
}
.hamburger-menu.-arrow-down.-active > .hamburger-menu-bars::before {
transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-down.-active > .hamburger-menu-bars::after {
transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger-menu.-minus.-active > .hamburger-menu-bars::before {
transform: translate3d(0, calc(var(--hamburger-menu--bar--spacing) + var(--hamburger-menu--bar--height)), 0);
}
.hamburger-menu.-minus.-active > .hamburger-menu-bars::after {
transform: translate3d(0, calc(var(--hamburger-menu--bar--spacing) * -1 + var(--hamburger-menu--bar--height) * -1), 0);
}
.hamburger-menu.-plus.-active > .hamburger-menu-bars::before {
transform: translate3d(0, calc(var(--hamburger-menu--bar--spacing) + var(--hamburger-menu--bar--height)), 0);
}
.hamburger-menu.-plus.-active > .hamburger-menu-bars::after {
transform: translate3d(0, calc(var(--hamburger-menu--bar--spacing) * -1 + var(--hamburger-menu--bar--height) * -1), 0) rotate(90deg);
}
/**
* Color variants
*/
.hamburger-menu.-light {
--hamburger-menu--background: var(--hamburger-menu--light--background, var(--color-dark));
}
.hamburger-menu.-dark {
--hamburger-menu--background: var(--hamburger-menu--dark--background, var(--color-light));
}
/**
* Size variants
*/
.hamburger-menu.-sm {
--hamburger-menu--bar--width: var(
--hamburger-menu--sm--bar--width,
calc(30px * var(--size-multiplier-sm))
);
--hamburger-menu--bar--height: var(--hamburger-menu--sm--bar--height, 2px);
--hamburger-menu--bar--spacing: var(--hamburger-menu--sm--bar--spacing, 4px);
--hamburger-menu--bar--border-radius: var(--hamburger-menu--sm--bar--border-radius, 1px);
}
.hamburger-menu.-md {
--hamburger-menu--bar--width: var(
--hamburger-menu--md--bar--width,
calc(30px * var(--size-multiplier-md))
);
--hamburger-menu--bar--height: var(--hamburger-menu--md--bar--height, 3px);
--hamburger-menu--bar--spacing: var(--hamburger-menu--md--bar--spacing, 5px);
--hamburger-menu--bar--border-radius: var(--hamburger-menu--md--bar--border-radius, 2px);
}
.hamburger-menu.-lg {
--hamburger-menu--bar--width: var(
--hamburger-menu--lg--bar--width,
calc(30px * var(--size-multiplier-lg))
);
--hamburger-menu--bar--height: var(--hamburger-menu--lg--bar--height, 4px);
--hamburger-menu--bar--spacing: var(--hamburger-menu--lg--bar--spacing, 6px);
--hamburger-menu--bar--border-radius: var(--hamburger-menu--lg--bar--border-radius, 3px);
}
/**
* Header
*/
.header {
display: flex;
box-sizing: border-box;
width: 100%;
transition-property: var(--header--transition-property, background-color);
transition-duration: var(--header--transition-duration, var(--transition-duration));
transition-timing-function: var(--header--transition-timing-function, var(--transition-timing-function));
color: var(--header--color);
background: var(--header--background);
padding: var(--header--padding, var(--header--padding-top, 10rem) var(--header--padding-right, 0) var(--header--padding-bottom, 10rem) var(--header--padding-left, 0));
/* stylelint-disable selector-list-comma-newline-after */
/* stylelint-enable */
}
.header > .container,
.header h1,
.header h2,
.header h3,
.header h4,
.header h5,
.header h6,
.header .h1,
.header .h2,
.header .h3,
.header .h4,
.header .h5,
.header .h6 {
margin-top: 0;
}
.header.-cover {
background-repeat: no-repeat;
background-position: center center;
background-attachment: unset;
background-size: cover;
}
.header.-fullscreen {
padding: 0;
align-items: center;
width: 100vw;
height: 100vh;
max-width: 100%;
max-height: 100%;
}
/**
* Color variants
*/
.header.-primary {
--header--background: var(--header--primary--background, var(--color-primary));
--header--color: var(--header--primary--color, var(--contrast-text-color-primary));
}
.header.-light {
--header--background: var(--header--light--background, var(--color-light));
--header--color: var(--header--light--color, var(--contrast-text-color-light));
}
.header.-dark {
--header--background: var(--header--dark--background, var(--color-dark));
--header--color: var(--header--dark--color, var(--contrast-text-color-dark));
}
/**
* Size variants
*/
.header.-sm {
--header--padding-top: var(
--header--sm--padding-top,
calc(10rem * var(--size-multiplier-xs))
);
--header--padding-right: var(--header--sm--padding-right, 0);
--header--padding-bottom: var(
--header--sm--padding-bottom,
calc(10rem * var(--size-multiplier-xs))
);
--header--padding-left: var(--header--sm--padding-left, 0);
}
.header.-md {
--header--padding-top: var(
--header--md--padding-top,
calc(10rem * var(--size-multiplier-md))
);
--header--padding-right: var(--header--md--padding-right, 0);
--header--padding-bottom: var(
--header--md--padding-bottom,
calc(10rem * var(--size-multiplier-md))
);
--header--padding-left: var(--header--md--padding-left, 0);
}
.header.-lg {
--header--padding-top: var(
--header--lg--padding-top,
calc(10rem * var(--size-multiplier-xl))
);
--header--padding-right: var(--header--lg--padding-right, 0);
--header--padding-bottom: var(
--header--lg--padding-bottom,
calc(10rem * var(--size-multiplier-xl))
);
--header--padding-left: var(--header--lg--padding-left, 0);
}
/**
* Icon
*/
.inkline-icon {
height: var(--icon--size);
}
/**
* Size variants
*/
.inkline-icon.-xs {
--icon--size: var(--icon--xs--size, calc(var(--font-size) * var(--size-multiplier-xs)));
}
.inkline-icon.-sm {
--icon--size: var(--icon--sm--size, calc(var(--font-size) * var(--size-multiplier-sm)));
}
.inkline-icon.-md {
--icon--size: var(--icon--md--size, calc(var(--font-size) * var(--size-multiplier-md)));
}
.inkline-icon.-lg {
--icon--size: var(--icon--lg--size, calc(var(--font-size) * var(--size-multiplier-lg)));
}
.inkline-icon.-xl {
--icon--size: var(--icon--xl--size, calc(var(--font-size) * var(--size-multiplier-xl)));
}
.inkline-icon.-xxl {
--icon--size: var(--icon--2xl--size, calc(var(--font-size) * var(--size-multiplier-2xl)));
}
.input-wrapper {
display: block;
vertical-align: middle;
position: relative;
flex-grow: 1;
flex-shrink: 1;
}
.input-wrapper .input {
position: relative;
display: flex;
flex: 1 0 auto;
align-items: center;
flex-direction: row;
background-clip: padding-box;
border-width: var(--input--border-width, var(--input--border-top-width, var(--border-top-width)) var(--input--border-right-width, var(--border-right-width)) var(--input--border-bottom-width, var(--border-bottom-width)) var(--input--border-left-width, var(--border-left-width)));
border-style: var(--input--border-style, var(--input--border-top-style, var(--border-top-style)) var(--input--border-right-style, var(--border-right-style)) var(--input--border-bottom-style, var(--border-bottom-style)) var(--input--border-left-style, var(--border-left-style)));
border-color: var(--input--border-color, var(--input--border-top-color, var(--border-top-color)) var(--input--border-right-color, var(--border-right-color)) var(--input--border-bottom-color, var(--border-bottom-color)) var(--input--border-left-color, var(--border-left-color)));
border-radius: var(--input--border-radius, var(--input--border-top-left-radius, var(--border-top-left-radius)) var(--input--border-top-right-radius, var(--border-top-right-radius)) var(--input--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--input--border-bottom-left-radius, var(--border-bottom-left-radius)));
box-shadow: var(--input--box-shadow, var(--input--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--input--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--input--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--input--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--input--box-shadow-color, var(--box-shadow-color)));
transition-property: var(--input--transition-property, background-color, color, border-color, box-shadow);
transition-duration: var(--input--transition-duration, var(--transition-duration));
transition-timing-function: var(--input--transition-timing-function, var(--transition-timing-function));
color: var(--input--color);
background-color: var(--input--background);
font-size: var(--input--font-size, var(--font-size));
}
.input-wrapper .input:hover {
border-color: var(--input--hover--border-color);
}
.input-wrapper .input:focus-within {
outline: 0;
box-shadow: var(--input--box-shadow, var(--input--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--input--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--input--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--input--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--input--box-shadow-color, var(--box-shadow-color)));
border-color: var(--input--focus--border-color);
}
.input-wrapper .input > input,
.input-wrapper .input > select,
.input-wrapper .input > textarea {
position: relative;
flex: 1 0 auto;
width: 1%;
background: transparent;
border: 0;
margin: 0;
outline: 0;
line-height: var(--input--line-height, var(--line-height));
color: var(--input--color);
padding: var(--input--padding, var(--input--padding-top, var(--padding-top)) var(--input--padding-right, var(--padding-right)) var(--input--padding-bottom, var(--padding-bottom)) var(--input--padding-left, var(--padding-left)));
/**
* Select
*/
}
.input-wrapper .input > input::-ms-expand,
.input-wrapper .input > select::-ms-expand,
.input-wrapper .input > textarea::-ms-expand {
background-color: transparent;
border: 0;
}
.input-wrapper .input > input::placeholder,
.input-wrapper .input > select::placeholder,
.input-wrapper .input > textarea::placeholder {
opacity: 1;
color: var(--input--placeholder--color);
}
.input-wrapper .input > input:disabled, .input-wrapper .input > input[readonly],
.input-wrapper .input > select:disabled,
.input-wrapper .input > select[readonly],
.input-wrapper .input > textarea:disabled,
.input-wrapper .input > textarea[readonly] {
opacity: 1;
cursor: default;
}
.input-wrapper .input > input[readonly]:focus,
.input-wrapper .input > select[readonly]:focus,
.input-wrapper .input > textarea[readonly]:focus {
outline: 0;
}
.input-wrapper .input .input-prefix,
.input-wrapper .input .input-suffix {
display: inline-flex;
align-items: center;
z-index: 1;
font-style: normal;
transition-property: var(--input--transition-property, border-color);
transition-duration: var(--input--transition-duration, var(--transition-duration));
transition-timing-function: var(--input--transition-timing-function, var(--transition-timing-function));
border-color: var(--input--border-color, var(--input--border-top-color, var(--border-top-color)) var(--input--border-right-color, var(--border-right-color)) var(--input--border-bottom-color, var(--border-bottom-color)) var(--input--border-left-color, var(--border-left-color)));
color: var(--input--prefix-suffix--color);
padding-right: var(--input--prefix-suffix--padding-right, var(--input--padding-right, var(--padding-right)));
padding-left: var(--input--prefix-suffix--padding-left, var(--input--padding-left, var(--padding-left)));
}
.input-wrapper .input .input-prefix > button:not(.button):not(.select-caret),
.input-wrapper .input .input-suffix > button:not(.button):not(.select-caret) {
background: transparent;
border: 0;
color: inherit;
}
.input-wrapper .input .input-prefix {
border-right-width: var(--input--prefix--border-right-width, var(--input--border-right-width, var(--border-right-width)));
border-right-style: var(--input--prefix--border-right-style, var(--input--border-right-style, var(--border-right-style)));
}
.input-wrapper .input .input-suffix {
border-left-width: var(--input--suffix--border-left-width, var(--input--border-left-width, var(--border-left-width)));
border-left-style: var(--input--prefix--border-left-style, var(--input--border-left-style, var(--border-left-style)));
}
.input-wrapper .input .input-icon {
transition-property: var(--input--transition-property, color);
transition-duration: var(--input--transition-duration, var(--transition-duration));
transition-timing-function: var(--input--transition-timing-function, var(--transition-timing-function));
cursor: pointer;
width: auto;
height: var(--input--icon--size);
color: var(--input--icon--color);
}
.input-wrapper .input .input-icon:hover, .input-wrapper .input .input-icon:focus {
color: var(--input--icon--hover--color, var(--input--icon--color));
}
.input-wrapper .input-prepend,
.input-wrapper .input-append {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
padding: 0;
line-height: var(--input-line-height, var(--line-height));
transition-property: var(--input--transition-property, background-color);
transition-duration: var(--input--transition-duration, var(--transition-duration));
transition-timing-function: var(--input--transition-timing-function, var(--transition-timing-function));
background-color: var(--input--prepend-append--background);
font-size: var(--input--font-size, var(--font-size));
}
.input-wrapper .input-prepend > *,
.input-wrapper .input-append > * {
display: flex;
flex: auto 1 0;
align-self: stretch;
align-items: center;
border-radius: 0;
padding-left: var(--input--prepend-append--padding-left, var(--input--padding-left, var(--padding-left)));
padding-right: var(--input--prepend-append--padding-right, var(--input--padding-right, var(--padding-right)));
}
.input-wrapper .input-prepend > [class$=-wrapper],
.input-wrapper .input-append > [class$=-wrapper] {
padding-left: 0;
padding-right: 0;
}
.input-wrapper .input-prepend > [class$=-wrapper] > [class$=-trigger],
.input-wrapper .input-append > [class$=-wrapper] > [class$=-trigger] {
display: flex;
align-self: stretch;
}
.input-wrapper .input-value-overlay {
position: absolute;
padding-left: var(--input--value-overlay--padding-left, var(--input--padding-left, var(--padding-left)));
padding-right: var(--input--value-overlay--padding-right, var(--input--padding-left, var(--padding-left)));
}
.input-wrapper .input-value-overlay,
.input-wrapper .input-value-overlay > * {
cursor: default;
}
.input-wrapper .input-prepend,
.input-wrapper .input-prepend > *:first-child {
border-top-left-radius: var(--input--border-top-left-radius, var(--border-top-left-radius));
border-bottom-left-radius: var(--input--border-bottom-left-radius, var(--border-bottom-left-radius));
}
.input-wrapper .input-append,
.input-wrapper .input-append > *:last-child {
border-top-right-radius: var(--input--border-top-right-radius, var(--border-top-right-radius));
border-bottom-right-radius: var(--input--border-bottom-right-radius, var(--border-bottom-right-radius));
}
.input-wrapper.-prepended, .input-wrapper.-appended {
display: flex;
flex-wrap: nowrap;
}
.input-wrapper.-prepended > .input, .input-wrapper.-appended > .input {
flex-shrink: 1;
}
.input-wrapper.-prepended > .input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-wrapper.-appended > .input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-wrapper.-error > .input {
border-color: var(--input--error--border-color, var(--color-danger));
}
.input-wrapper.-disabled > .input, .input-wrapper.-readonly > .input {
color: var(--input--disabled--color, var(--input--color));
background: var(--input--disabled--background, var(--input--background));
}
.input-wrapper.-disabled > .input:hover, .input-wrapper.-readonly > .input:hover {
border-color: var(--input--border-color, var(--input--border-top-color, var(--border-top-color)) var(--input--border-right-color, var(--border-right-color)) var(--input--border-bottom-color, var(--border-bottom-color)) var(--input--border-left-color, var(--border-left-color)));
}
.input-wrapper.-disabled > .input > input:disabled, .input-wrapper.-disabled > .input > input[readonly],
.input-wrapper.-disabled > .input > select:disabled,
.input-wrapper.-disabled > .input > select[readonly],
.input-wrapper.-disabled > .input > textarea:disabled,
.input-wrapper.-disabled > .input > textarea[readonly], .input-wrapper.-readonly > .input > input:disabled, .input-wrapper.-readonly > .input > input[readonly],
.input-wrapper.-readonly > .input > select:disabled,
.input-wrapper.-readonly > .input > select[readonly],
.input-wrapper.-readonly > .input > textarea:disabled,
.input-wrapper.-readonly > .input > textarea[readonly] {
color: var(--input--disabled--color);
}
.input-wrapper.-readonly > .input:focus-within {
outline: 0;
border-color: var(--input--focus--border-color);
}
/**
* Color variants
*/
.input-wrapper.-light {
--input--background: var(--input--light--background, var(--color-white));
--input--color: var(--input--light--color, var(--contrast-text-color-white));
--input--border-color: var(--input--light--border-color, var(--color-light-shade-50));
--input--disabled--background: var(
--input--light--disabled--background,
var(--color-light)
);
--input--disabled--color: var(--input--light--disabled--color, var(--text-color-weak));
--input--hover--border-color: var(
--input--light--hover--border-color,
var(--color-light-shade-100)
);
--input--focus--border-color: var(
--input--light--focus--border-color,
var(--color-primary)
);
--input--icon--color: var(--input--light--icon--color, var(--text-color-weak));
--input--icon--hover--color: var(
--input--light--icon--color,
var(--contrast-text-color-light)
);
--input--placeholder--color: var(--input--light--placeholder--color, var(--color-gray-300));
--input--prefix-suffix--color: var(
--input--light--prefix-suffix--color,
var(--color-gray-700)
);
--input--prepend-append--background: var(
--input--light--prepend-append--background,
var(--color-light)
);
}
.input-wrapper.-dark {
--input--background: var(--input--dark--background, var(--color-dark));
--input--color: var(--input--dark--color, var(--contrast-text-color-dark));
--input--border-color: var(--input--dark--border-color, var(--color-dark-tint-50));
--input--disabled--background: var(
--input--dark--disabled--background,
var(--color-dark-tint-50)
);
--input--disabled--color: var(--input--dark--disabled--color, var(--text-color-weak));
--input--hover--border-color: var(
--input--dark--hover--border-color,
var(--color-dark-tint-100)
);
--input--focus--border-color: var(--input--dark--focus--border-color, var(--color-primary));
--input--icon--color: var(--input--dark--icon--color, var(--text-color-weak));
--input--icon--hover--color: var(
--input--dark--icon--color,
var(--contrast-text-color-dark)
);
--input--placeholder--color: var(--input--dark--placeholder--color, var(--color-gray-600));
--input--prefix-suffix--color: var(
--input--dark--prefix-suffix--color,
var(--color-dark-250)
);
--input--prepend-append--background: var(
--input--dark--prepend-append--background,
var(--color-dark)
);
}
/**
* Size variants
*/
.input-wrapper.-sm {
--input--border-top-left-radius: var(
--input--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--input--border-top-right-radius: var(
--input--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--input--border-bottom-right-radius: var(
--input--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--input--border-bottom-left-radius: var(
--input--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--input--font-size: var(
--input--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--input--padding-top: var(
--input--sm--padding-top,
calc(var(--padding-top) * 0.5 * var(--size-multiplier-sm))
);
--input--padding-right: var(
--input--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--input--padding-bottom: var(
--input--sm--padding-bottom,
calc(var(--padding-bottom) * 0.5 * var(--size-multiplier-sm))
);
--input--padding-left: var(
--input--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
--input--icon--size: calc(1rem * var(--size-multiplier-sm));
}
.input-wrapper.-md {
--input--border-top-left-radius: var(
--input--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--input--border-top-right-radius: var(
--input--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--input--border-bottom-right-radius: var(
--input--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--input--border-bottom-left-radius: var(
--input--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--input--font-size: var(
--input--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--input--padding-top: var(
--input--md--padding-top,
calc(var(--padding-top) * 0.5 * var(--size-multiplier-md))
);
--input--padding-right: var(
--input--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--input--padding-bottom: var(
--input--md--padding-bottom,
calc(var(--padding-bottom) * 0.5 * var(--size-multiplier-md))
);
--input--padding-left: var(
--input--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
--input--icon--size: calc(1rem * var(--size-multiplier-md));
}
.input-wrapper.-lg {
--input--border-top-left-radius: var(
--input--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--input--border-top-right-radius: var(
--input--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--input--border-bottom-right-radius: var(
--input--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--input--border-bottom-left-radius: var(
--input--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--input--font-size: var(
--input--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--input--padding-top: var(
--input--lg--padding-top,
calc(var(--padding-top) * 0.5 * var(--size-multiplier-lg))
);
--input--padding-right: var(
--input--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--input--padding-bottom: var(
--input--lg--padding-bottom,
calc(var(--padding-bottom) * 0.5 * var(--size-multiplier-lg))
);
--input--padding-left: var(
--input--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
--input--icon--size: calc(1rem * var(--size-multiplier-lg));
}
/**
* Layout
*/
.layout {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
}
.layout,
.layout .layout,
.layout .layout-aside,
.layout .layout-header,
.layout .layout-content,
.layout .layout-footer {
box-sizing: border-box;
}
.layout.-vertical {
flex-direction: row;
height: 100%;
}
.layout.-vertical > .layout,
.layout.-vertical > .container {
overflow-x: hidden;
}
.layout > .container {
flex: auto;
}
/**
* Layout Aside
*/
.layout-aside {
transition: all 0.2s;
position: relative;
width: var(--layout-aside--width, 320px);
flex: 0 0 var(--layout-aside--width, 320px);
/* Fix firefox can't set width smaller than content on flex item */
min-width: 0;
}
.layout-aside-children {
height: 100%;
padding-top: 0.1px;
margin-top: -0.1px;
}
.layout-aside.-right {
order: 1;
}
/**
* Layout Content
*/
.layout-content {
flex: auto;
min-width: 0;
}
/**
* Layout Footer
*/
.layout-footer {
flex: 0 0 auto;
}
/**
* Layout Header
*/
.layout-header {
flex: 0 0 auto;
}
/**
* List Group
*/
.list-group {
display: flex;
flex-wrap: wrap;
flex-direction: column;
transition-property: var(--list-group--transition-property, background-color, border-color);
transition-duration: var(--list-group--transition-duration, var(--transition-duration));
transition-timing-function: var(--list-group--transition-timing-function, var(--transition-timing-function));
background-color: var(--list-group--background);
color: var(--list-group--color);
font-size: var(--list-group--font-size, var(--font-size));
border-radius: var(--list-group--border-radius, var(--list-group--border-top-left-radius, var(--border-top-left-radius)) var(--list-group--border-top-right-radius, var(--border-top-right-radius)) var(--list-group--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--list-group--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.list-group.-border {
border-width: var(--list-group--border-width, var(--list-group--border-top-width, var(--border-top-width)) var(--list-group--border-right-width, var(--border-right-width)) var(--list-group--border-bottom-width, var(--border-bottom-width)) var(--list-group--border-left-width, var(--border-left-width)));
border-style: var(--list-group--border-style, var(--list-group--border-top-style, var(--border-top-style)) var(--list-group--border-right-style, var(--border-right-style)) var(--list-group--border-bottom-style, var(--border-bottom-style)) var(--list-group--border-left-style, var(--border-left-style)));
border-color: var(--list-group--border-color, var(--list-group--border-top-color, var(--border-top-color)) var(--list-group--border-right-color, var(--border-right-color)) var(--list-group--border-bottom-color, var(--border-bottom-color)) var(--list-group--border-left-color, var(--border-left-color)));
}
/**
* Color variants
*/
.list-group.-light {
--list-group--background: var(--list-group--light--background, var(--color-white));
--list-group--color: var(--list-group--light--color, var(--contrast-text-color-white));
--list-group--border-top-color: var(
--list-group--light--border-top-color,
var(--color-light-shade-50)
);
--list-group--border-right-color: var(
--list-group--light--border-right-color,
var(--color-light-shade-50)
);
--list-group--border-bottom-color: var(
--list-group--light--border-bottom-color,
var(--color-light-shade-50)
);
--list-group--border-left-color: var(
--list-group--light--border-left-color,
var(--color-light-shade-50)
);
--list-group--active--background: var(
--list-group--light--active--background,
var(--color-primary)
);
--list-group--active--color: var(
--list-group--light--active--color,
var(--contrast-text-color-primary)
);
--list-group--active--border-top-color: var(
--list-group--light--active--border-top-color,
var(--color-primary-shade-50)
);
--list-group--active--border-right-color: var(
--list-group--light--active--border-right-color,
var(--color-primary-shade-50)
);
--list-group--active--border-bottom-color: var(
--list-group--light--active--border-bottom-color,
var(--color-primary-shade-50)
);
--list-group--active--border-left-color: var(
--list-group--light--active--border-left-color,
var(--color-primary-shade-50)
);
--list-group--disabled--color: var(
--list-group--light--disabled--color,
var(--text-color-weak)
);
}
.list-group.-dark {
--list-group--background: var(--list-group--dark--background, var(--color-dark));
--list-group--color: var(--list-group--dark--color, var(--contrast-text-color-dark));
--list-group--border-top-color: var(
--list-group--dark--border-top-color,
var(--color-dark-tint-50)
);
--list-group--border-right-color: var(
--list-group--dark--border-right-color,
var(--color-dark-tint-50)
);
--list-group--border-bottom-color: var(
--list-group--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--list-group--border-left-color: var(
--list-group--dark--border-left-color,
var(--color-dark-tint-50)
);
--list-group--active--background: var(
--list-group--dark--active--background,
var(--color-primary)
);
--list-group--active--color: var(
--list-group--dark--active--color,
var(--contrast-text-color-primary)
);
--list-group--active--border-top-color: var(
--list-group--dark--active--border-top-color,
var(--color-primary-shade-50)
);
--list-group--active--border-right-color: var(
--list-group--dark--active--border-right-color,
var(--color-primary-shade-50)
);
--list-group--active--border-bottom-color: var(
--list-group--dark--active--border-bottom-color,
var(--color-primary-shade-50)
);
--list-group--active--border-left-color: var(
--list-group--dark--active--border-left-color,
var(--color-primary-shade-50)
);
--list-group--disabled--color: var(
--list-group--dark--disabled--color,
var(--text-color-weak)
);
}
/**
* Size variants
*/
.list-group.-sm {
--list-group--border-top-left-radius: var(
--list-group--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--list-group--border-top-right-radius: var(
--list-group--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--list-group--border-bottom-right-radius: var(
--list-group--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--list-group--border-bottom-left-radius: var(
--list-group--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--list-group--font-size: var(
--list-group--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--list-group--padding-top: var(
--list-group--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--list-group--padding-right: var(
--list-group--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--list-group--padding-bottom: var(
--list-group--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--list-group--padding-left: var(
--list-group--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
}
.list-group.-md {
--list-group--border-top-left-radius: var(
--list-group--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--list-group--border-top-right-radius: var(
--list-group--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--list-group--border-bottom-right-radius: var(
--list-group--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--list-group--border-bottom-left-radius: var(
--list-group--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--list-group--font-size: var(
--list-group--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--list-group--padding-top: var(
--list-group--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--list-group--padding-right: var(
--list-group--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--list-group--padding-bottom: var(
--list-group--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--list-group--padding-left: var(
--list-group--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
}
.list-group.-lg {
--list-group--border-top-left-radius: var(
--list-group--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--list-group--border-top-right-radius: var(
--list-group--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--list-group--border-bottom-right-radius: var(
--list-group--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--list-group--border-bottom-left-radius: var(
--list-group--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--list-group--font-size: var(
--list-group--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--list-group--padding-top: var(
--list-group--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--list-group--padding-right: var(
--list-group--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--list-group--padding-bottom: var(
--list-group--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--list-group--padding-left: var(
--list-group--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
}
/**
* List Group Item
*/
.list-group .list-group-item {
display: block;
margin-bottom: 0;
border-bottom-width: var(--list-group--border-bottom-width, var(--border-bottom-width));
border-bottom-style: var(--list-group--border-bottom-style, var(--border-bottom-style));
border-bottom-color: var(--list-group--border-bottom-color, var(--border-bottom-color));
transition-property: color, border-color;
transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-timing-function);
padding: var(--list-group--padding, var(--list-group--padding-top, var(--padding-top)) var(--list-group--padding-right, var(--padding-right)) var(--list-group--padding-bottom, var(--padding-bottom)) var(--list-group--padding-left, var(--padding-left)));
}
.list-group .list-group-item.-active {
color: var(--list-group--active--color);
background: var(--list-group--active--background);
border-bottom-color: var(--list-group--active--border-color);
}
.list-group .list-group-item:first-child {
border-top-left-radius: var(--list-group--border-top-left-radius);
border-top-right-radius: var(--list-group--border-top-right-radius);
}
.list-group .list-group-item:last-child {
border-bottom-width: 0;
border-bottom-left-radius: var(--list-group--border-bottom-left-radius);
border-bottom-right-radius: var(--list-group--border-bottom-right-radius);
}
.list-group .list-group-item:hover, .list-group .list-group-item:focus {
text-decoration: none;
}
.list-group .list-group-item.-disabled {
color: var(--list-group--disabled--color);
pointer-events: none;
cursor: default;
}
/**
* Loader
*/
.loader {
display: inline-block;
position: relative;
width: var(--loader--size);
height: var(--loader--size);
}
.loader::before {
content: "";
display: block;
padding-top: 100%;
}
.loader .loader-text,
.loader > svg {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.loader .loader-text {
display: flex;
justify-content: center;
align-items: center;
}
.loader > svg {
animation: loader-rotate var(--loader--animation-duration, 1.2s) linear infinite;
transform-origin: center center;
}
.loader > svg > circle {
stroke: var(--loader--background);
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
animation: loader-dash var(--loader--animation-duration, 1.2s) ease-in-out infinite;
stroke-linecap: round;
}
.loader.-auto {
width: 100%;
height: 100%;
}
@keyframes loader-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes loader-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
/**
* Color variants
*/
.loader.-primary {
--loader--background: var(--loader--primary--background, var(--color-primary));
}
.loader.-light {
--loader--background: var(--loader--light--background, var(--color-dark));
}
.loader.-dark {
--loader--background: var(--loader--dark--background, var(--color-light));
}
/**
* Size variants
*/
.loader.-sm {
--loader--size: var(--loader--sm--size, calc(64px * var(--size-multiplier-sm)));
}
.loader.-md {
--loader--size: var(--loader--md--size, calc(64px * var(--size-multiplier-md)));
}
.loader.-lg {
--loader--size: var(--loader--lg--size, calc(64px * var(--size-multiplier-lg)));
}
/**
* Media
*/
.media {
position: relative;
display: flex;
flex-direction: row;
}
.media > .media-body {
flex: 0 1 auto;
}
.media > img,
.media > .img,
.media > .image {
align-self: flex-start;
height: auto;
flex: 0 0 auto;
margin-right: var(--media--image--margin-right, var(--margin-right));
}
/**
* Modal
*/
.modal-wrapper {
background: var(--modal--wrapper--background, rgba(0, 0, 0, 0.75));
position: fixed;
top: 0;
left: 0;
z-index: 2000;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-wrapper .modal {
text-align: left;
list-style: none;
line-height: var(--modal--line-height, var(--line-height));
display: block;
width: calc(100% - var(--modal--margin-left, var(--margin-left)) - var(--modal--margin-right, var(--margin-right)));
max-width: var(--modal--width, 480px);
border-radius: var(--modal--border-radius, var(--modal--border-top-left-radius, var(--border-top-left-radius)) var(--modal--border-top-right-radius, var(--border-top-right-radius)) var(--modal--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--modal--border-bottom-left-radius, var(--border-bottom-left-radius)));
box-shadow: var(--modal--box-shadow, var(--modal--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--modal--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--modal--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--modal--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--modal--box-shadow-color, var(--box-shadow-color)));
}
.modal-wrapper .modal > .modal-header {
display: flex;
justify-content: space-between;
background: var(--modal--header--background, var(--modal--background));
border-style: var(--modal--header--border-style, var(--modal--header--border-top-style, var(--modal--border-top-style, var(--border-top-style))) var(--modal--header--border-right-style, var(--modal--border-right-style, var(--border-right-style))) var(--modal--header--border-bottom-style, var(--modal--border-bottom-style, var(--border-bottom-style))) var(--modal--header--border-left-style, var(--modal--border-left-style, var(--border-left-style))));
border-width: var(--modal--header--border-width, var(--modal--header--border-top-width, var(--modal--border-top-width, var(--border-top-width))) var(--modal--header--border-right-width, var(--modal--border-right-width, var(--border-right-width))) var(--modal--header--border-bottom-width, var(--modal--border-bottom-width, var(--border-bottom-width))) var(--modal--header--border-left-width, var(--modal--border-left-width, var(--border-left-width))));
border-color: var(--modal--header--border-color, var(--modal--header--border-top-color, var(--modal--border-top-color, var(--border-top-color))) var(--modal--header--border-right-color, var(--modal--border-right-color, var(--border-right-color))) var(--modal--header--border-bottom-color, var(--modal--border-bottom-color, var(--border-bottom-color))) var(--modal--header--border-left-color, var(--modal--border-left-color, var(--border-left-color))));
padding: var(--modal--header--padding, var(--modal--header--padding-top, var(--modal--padding-top, var(--padding-top))) var(--modal--header--padding-right, var(--modal--padding-right, var(--padding-right))) var(--modal--header--padding-bottom, var(--modal--padding-bottom, var(--padding-bottom))) var(--modal--header--padding-left, var(--modal--padding-left, var(--padding-left))));
color: var(--modal--header--color, var(--modal--color));
}
.modal-wrapper .modal > .modal-header > .close {
display: flex;
justify-content: center;
align-items: center;
height: 1.5rem;
width: 1.5rem;
line-height: 1.5rem;
font-size: 0.5rem;
cursor: pointer;
padding: 0;
border: 0;
transition: background-color 0.3s ease;
background-color: transparent;
border-radius: var(--modal--border-radius, var(--modal--border-top-left-radius, var(--border-top-left-radius)) var(--modal--border-top-right-radius, var(--border-top-right-radius)) var(--modal--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--modal--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.modal-wrapper .modal > .modal-header > .close > .icon {
mask-image: url('data:image/svg+xml; utf8, ');
-webkit-mask-image: url('data:image/svg+xml; utf8, ');
mask-position: center center;
-webkit-mask-position: center center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: calc(var(--modal--font-size, var(--font-size)) / 2);
-webkit-mask-size: calc(var(--modal--font-size, var(--font-size)) / 2);
background-color: var(--modal--header--color, var(--modal--color));
width: var(--modal--font-size, var(--font-size));
height: var(--modal--font-size, var(--font-size));
}
.modal-wrapper .modal > .modal-header > .close:hover, .modal-wrapper .modal > .modal-header > .close:focus {
outline: none;
background-color: rgba(0, 0, 0, 0.1);
}
.modal-wrapper .modal > .modal-header > .close:active {
background-color: rgba(0, 0, 0, 0.15);
}
.modal-wrapper .modal > .modal-body {
display: flex;
flex-direction: row;
background: var(--modal--body--background, var(--modal--background));
color: var(--modal--body--color, var(--modal--color));
border-style: var(--modal--body--border-style, var(--modal--body--border-top-style, var(--modal--border-top-style, var(--border-top-style))) var(--modal--body--border-right-style, var(--modal--border-right-style, var(--border-right-style))) var(--modal--body--border-bottom-style, var(--modal--border-bottom-style, var(--border-bottom-style))) var(--modal--body--border-left-style, var(--modal--border-left-style, var(--border-left-style))));
border-width: var(--modal--body--border-width, var(--modal--body--border-top-width, var(--modal--border-top-width, var(--border-top-width))) var(--modal--body--border-right-width, var(--modal--border-right-width, var(--border-right-width))) var(--modal--body--border-bottom-width, var(--modal--border-bottom-width, var(--border-bottom-width))) var(--modal--body--border-left-width, var(--modal--border-left-width, var(--border-left-width))));
border-color: var(--modal--body--border-color, var(--modal--body--border-top-color, var(--modal--border-top-color, var(--border-top-color))) var(--modal--body--border-right-color, var(--modal--border-right-color, var(--border-right-color))) var(--modal--body--border-bottom-color, var(--modal--border-bottom-color, var(--border-bottom-color))) var(--modal--body--border-left-color, var(--modal--border-left-color, var(--border-left-color))));
padding: var(--modal--body--padding, var(--modal--body--padding-top, var(--modal--padding-top, var(--padding-top))) var(--modal--body--padding-right, var(--modal--padding-right, var(--padding-right))) var(--modal--body--padding-bottom, var(--modal--padding-bottom, var(--padding-bottom))) var(--modal--body--padding-left, var(--modal--padding-left, var(--padding-left))));
}
.modal-wrapper .modal > .modal-body .modal-icon {
margin-right: var(--modal--icon--margin-right, var(--modal--body--padding-right, var(--padding-right)));
}
.modal-wrapper .modal > .modal-body .modal-content {
width: 100%;
display: block;
}
.modal-wrapper .modal > .modal-footer {
background: var(--modal--footer--background, var(--modal--background));
color: var(--modal--footer--color, var(--modal--color));
border-style: var(--modal--footer--border-style, var(--modal--footer--border-top-style, var(--modal--border-top-style, var(--border-top-style))) var(--modal--footer--border-right-style, var(--modal--border-right-style, var(--border-right-style))) var(--modal--footer--border-bottom-style, var(--modal--border-bottom-style, var(--border-bottom-style))) var(--modal--footer--border-left-style, var(--modal--border-left-style, var(--border-left-style))));
border-width: var(--modal--footer--border-width, var(--modal--footer--border-top-width, var(--modal--border-top-width, var(--border-top-width))) var(--modal--footer--border-right-width, var(--modal--border-right-width, var(--border-right-width))) var(--modal--footer--border-bottom-width, var(--modal--border-bottom-width, var(--border-bottom-width))) var(--modal--footer--border-left-width, var(--modal--border-left-width, var(--border-left-width))));
border-color: var(--modal--footer--border-color, var(--modal--footer--border-top-color, var(--modal--border-top-color, var(--border-top-color))) var(--modal--footer--border-right-color, var(--modal--border-right-color, var(--border-right-color))) var(--modal--footer--border-bottom-color, var(--modal--border-bottom-color, var(--border-bottom-color))) var(--modal--footer--border-left-color, var(--modal--border-left-color, var(--border-left-color))));
padding: var(--modal--footer--padding, var(--modal--footer--padding-top, var(--modal--padding-top, var(--padding-top))) var(--modal--footer--padding-right, var(--modal--padding-right, var(--padding-right))) var(--modal--footer--padding-bottom, var(--modal--padding-bottom, var(--padding-bottom))) var(--modal--footer--padding-left, var(--modal--padding-left, var(--padding-left))));
}
.modal-wrapper .modal > *:first-child {
border-top-left-radius: var(--modal--border-top-left-radius, var(--border-top-left-radius));
border-top-right-radius: var(--modal--border-top-right-radius, var(--border-top-right-radius));
}
.modal-wrapper .modal > *:last-child {
border-bottom-left-radius: var(--modal--border-bottom-left-radius, var(--border-bottom-left-radius));
border-bottom-right-radius: var(--modal--border-bottom-right-radius, var(--border-bottom-right-radius));
}
.modal-wrapper .modal > .modal-header + .modal-body,
.modal-wrapper .modal > .modal-header + .modal-footer,
.modal-wrapper .modal > .modal-body + .modal-footer,
.modal-wrapper .modal > .modal-body + .modal-body {
border-top-width: 0;
}
.modal-wrapper.-fullscreen {
display: block;
}
.modal-wrapper.-fullscreen > .modal {
width: 100%;
height: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
}
.modal-wrapper.-fullscreen > .modal > .modal-header {
border-radius: var(--modal--fullscreen--header--border-radius, 0);
}
.modal-wrapper.-fullscreen > .modal > .modal-body {
border-radius: var(--modal--fullscreen--body--border-radius, 0);
flex: 1;
overflow: auto;
}
.modal-wrapper.-fullscreen > .modal > .modal-footer {
border-radius: var(--modal--fullscreen--footer--border-radius, 0);
}
.modal-wrapper.-alert > .modal > .modal-footer, .modal-wrapper.-confirm > .modal > .modal-footer, .modal-wrapper.-prompt > .modal > .modal-footer {
display: flex;
justify-content: flex-end;
}
.modal-wrapper.-alert > .modal > .modal-footer .button + .button, .modal-wrapper.-confirm > .modal > .modal-footer .button + .button, .modal-wrapper.-prompt > .modal > .modal-footer .button + .button {
margin-left: var(--modal--footer--button--margin-left, var(--margin-left-1-2));
}
/**
* Color variants
*/
.modal-wrapper.-primary {
--modal--background: var(--modal--primary--background, var(--color-primary));
--modal--border-top-color: var(
--modal--primary--border-top-color,
var(--color-primary-shade-50)
);
--modal--border-right-color: var(
--modal--primary--border-right-color,
var(--color-primary-shade-50)
);
--modal--border-bottom-color: var(
--modal--primary--border-bottom-color,
var(--color-primary-shade-50)
);
--modal--border-left-color: var(
--modal--primary--border-left-color,
var(--color-primary-shade-50)
);
--modal--color: var(--modal--primary--color, var(--contrast-text-color-primary));
--modal--header--background: var(
--modal--primary--header--background,
var(--color-primary-shade-50)
);
--modal--footer--background: var(
--modal--primary--footer--background,
var(--color-primary-shade-50)
);
}
.modal-wrapper.-secondary {
--modal--background: var(--modal--secondary--background, var(--color-secondary));
--modal--border-top-color: var(
--modal--secondary--border-top-color,
var(--color-secondary-shade-50)
);
--modal--border-right-color: var(
--modal--secondary--border-right-color,
var(--color-secondary-shade-50)
);
--modal--border-bottom-color: var(
--modal--secondary--border-bottom-color,
var(--color-secondary-shade-50)
);
--modal--border-left-color: var(
--modal--secondary--border-left-color,
var(--color-secondary-shade-50)
);
--modal--color: var(--modal--secondary--color, var(--contrast-text-color-secondary));
--modal--header--background: var(
--modal--secondary--header--background,
var(--color-secondary-shade-50)
);
--modal--footer--background: var(
--modal--secondary--footer--background,
var(--color-secondary-shade-50)
);
}
.modal-wrapper.-light {
--modal--background: var(--modal--light--background, var(--color-white));
--modal--border-top-color: var(--modal--light--border-top-color, var(--color-light));
--modal--border-right-color: var(--modal--light--border-right-color, var(--color-light));
--modal--border-bottom-color: var(--modal--light--border-bottom-color, var(--color-light));
--modal--border-left-color: var(--modal--light--border-left-color, var(--color-light));
--modal--color: var(--modal--light--color, var(--contrast-text-color-white));
--modal--header--background: var(--modal--light--header--background, var(--color-gray-50));
--modal--footer--background: var(--modal--light--footer--background, var(--color-gray-50));
}
.modal-wrapper.-dark {
--modal--background: var(--modal--dark--background, var(--color-dark));
--modal--border-top-color: var(--modal--dark--border-top-color, var(--color-dark-tint-50));
--modal--border-right-color: var(
--modal--dark--border-right-color,
var(--color-dark-tint-50)
);
--modal--border-bottom-color: var(
--modal--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--modal--border-left-color: var(
--modal--dark--border-left-color,
var(--color-dark-tint-50)
);
--modal--color: var(--modal--dark--color, var(--contrast-text-color-dark));
--modal--header--background: var(
--modal--dark--header--background,
var(--color-dark-tint-50)
);
--modal--footer--background: var(
--modal--dark--footer--background,
var(--color-dark-tint-50)
);
}
.modal-wrapper.-info {
--modal--background: var(--modal--info--background, var(--color-info));
--modal--border-top-color: var(--modal--info--border-top-color, var(--color-info-shade-50));
--modal--border-right-color: var(
--modal--info--border-right-color,
var(--color-info-shade-50)
);
--modal--border-bottom-color: var(
--modal--info--border-bottom-color,
var(--color-info-shade-50)
);
--modal--border-left-color: var(
--modal--info--border-left-color,
var(--color-info-shade-50)
);
--modal--color: var(--modal--info--color, var(--contrast-text-color-info));
--modal--header--background: var(
--modal--info--header--background,
var(--color-info-shade-50)
);
--modal--footer--background: var(
--modal--info--footer--background,
var(--color-info-shade-50)
);
}
.modal-wrapper.-success {
--modal--background: var(--modal--success--background, var(--color-success));
--modal--border-top-color: var(
--modal--success--border-top-color,
var(--color-success-shade-50)
);
--modal--border-right-color: var(
--modal--success--border-right-color,
var(--color-success-shade-50)
);
--modal--border-bottom-color: var(
--modal--success--border-bottom-color,
var(--color-success-shade-50)
);
--modal--border-left-color: var(
--modal--success--border-left-color,
var(--color-success-shade-50)
);
--modal--color: var(--modal--success--color, var(--contrast-text-color-success));
--modal--header--background: var(
--modal--success--header--background,
var(--color-success-shade-50)
);
--modal--footer--background: var(
--modal--success--footer--background,
var(--color-success-shade-50)
);
}
.modal-wrapper.-warning {
--modal--background: var(--modal--warning--background, var(--color-warning));
--modal--border-top-color: var(
--modal--warning--border-top-color,
var(--color-warning-shade-50)
);
--modal--border-right-color: var(
--modal--warning--border-right-color,
var(--color-warning-shade-50)
);
--modal--border-bottom-color: var(
--modal--warning--border-bottom-color,
var(--color-warning-shade-50)
);
--modal--border-left-color: var(
--modal--warning--border-left-color,
var(--color-warning-shade-50)
);
--modal--color: var(--modal--warning--color, var(--contrast-text-color-warning));
--modal--header--background: var(
--modal--warning--header--background,
var(--color-warning-shade-50)
);
--modal--footer--background: var(
--modal--warning--footer--background,
var(--color-warning-shade-50)
);
}
.modal-wrapper.-danger {
--modal--background: var(--modal--danger--background, var(--color-danger));
--modal--border-top-color: var(
--modal--danger--border-top-color,
var(--color-danger-shade-50)
);
--modal--border-right-color: var(
--modal--danger--border-right-color,
var(--color-danger-shade-50)
);
--modal--border-bottom-color: var(
--modal--danger--border-bottom-color,
var(--color-danger-shade-50)
);
--modal--border-left-color: var(
--modal--danger--border-left-color,
var(--color-danger-shade-50)
);
--modal--color: var(--modal--danger--color, var(--contrast-text-color-danger));
--modal--header--background: var(
--modal--danger--header--background,
var(--color-danger-shade-50)
);
--modal--footer--background: var(
--modal--danger--footer--background,
var(--color-danger-shade-50)
);
}
/**
* Size variants
*/
.modal-wrapper.-sm {
--modal--border-top-left-radius: var(
--modal--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--modal--border-top-right-radius: var(
--modal--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--modal--border-bottom-right-radius: var(
--modal--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--modal--border-bottom-left-radius: var(
--modal--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--modal--font-size: var(
--modal--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--modal--margin-top: var(
--modal--sm--margin-top,
calc(var(--margin-top) * var(--size-multiplier-sm))
);
--modal--margin-right: var(
--modal--sm--margin-right,
calc(var(--margin-right) * var(--size-multiplier-sm))
);
--modal--margin-bottom: var(
--modal--sm--margin-bottom,
calc(var(--margin-bottom) * var(--size-multiplier-sm))
);
--modal--margin-left: var(
--modal--sm--margin-left,
calc(var(--margin-left) * var(--size-multiplier-sm))
);
--modal--padding-top: var(
--modal--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--modal--padding-right: var(
--modal--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--modal--padding-bottom: var(
--modal--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--modal--padding-left: var(
--modal--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
--modal--width: var(--modal--sm--width, calc(480px * var(--size-multiplier-sm)));
}
.modal-wrapper.-md {
--modal--border-top-left-radius: var(
--modal--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--modal--border-top-right-radius: var(
--modal--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--modal--border-bottom-right-radius: var(
--modal--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--modal--border-bottom-left-radius: var(
--modal--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--modal--font-size: var(
--modal--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--modal--margin-top: var(
--modal--md--margin-top,
calc(var(--margin-top) * var(--size-multiplier-md))
);
--modal--margin-right: var(
--modal--md--margin-right,
calc(var(--margin-right) * var(--size-multiplier-md))
);
--modal--margin-bottom: var(
--modal--md--margin-bottom,
calc(var(--margin-bottom) * var(--size-multiplier-md))
);
--modal--margin-left: var(
--modal--md--margin-left,
calc(var(--margin-left) * var(--size-multiplier-md))
);
--modal--padding-top: var(
--modal--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--modal--padding-right: var(
--modal--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--modal--padding-bottom: var(
--modal--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--modal--padding-left: var(
--modal--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
--modal--width: var(--modal--md--width, calc(480px * var(--size-multiplier-md)));
}
.modal-wrapper.-lg {
--modal--border-top-left-radius: var(
--modal--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--modal--border-top-right-radius: var(
--modal--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--modal--border-bottom-right-radius: var(
--modal--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--modal--border-bottom-left-radius: var(
--modal--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--modal--font-size: var(
--modal--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--modal--margin-top: var(
--modal--lg--margin-top,
calc(var(--margin-top) * var(--size-multiplier-lg))
);
--modal--margin-right: var(
--modal--lg--margin-right,
calc(var(--margin-right) * var(--size-multiplier-lg))
);
--modal--margin-bottom: var(
--modal--lg--margin-bottom,
calc(var(--margin-bottom) * var(--size-multiplier-lg))
);
--modal--margin-left: var(
--modal--lg--margin-left,
calc(var(--margin-left) * var(--size-multiplier-lg))
);
--modal--padding-top: var(
--modal--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--modal--padding-right: var(
--modal--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--modal--padding-bottom: var(
--modal--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--modal--padding-left: var(
--modal--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
--modal--width: var(--modal--lg--width, calc(480px * var(--size-multiplier-lg)));
}
/**
* Modal Container
*/
.modal-container {
position: relative;
}
/**
* Nav
*/
.nav {
display: flex;
flex-wrap: wrap;
align-items: center;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav.-vertical {
flex-direction: column;
align-items: flex-start;
}
/**
* Color variants
*/
.nav.-light {
--nav--color: var(--nav--light--color, var(--contrast-text-color-light));
--nav--active--color: var(--nav--light--active--color, var(--contrast-text-color-light));
--nav--disabled--color: var(--nav--light--disabled--color, var(--text-color-weak));
}
.nav.-dark {
--nav--color: var(--nav--dark--color, var(--contrast-text-color-dark));
--nav--active--color: var(--nav--primary--active--color, var(--contrast-text-color-dark));
--nav--disabled--color: var(--nav--dark--disabled--color, var(--text-color-weak));
}
/**
* Size variants
*/
.nav.-sm {
--nav--font-size: var(
--nav--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--nav--padding-top: var(
--nav--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--nav--padding-right: var(
--nav--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--nav--padding-bottom: var(
--nav--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--nav--padding-left: var(
--nav--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
}
.nav.-md {
--nav--font-size: var(
--nav--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--nav--padding-top: var(
--nav--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--nav--padding-right: var(
--nav--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--nav--padding-bottom: var(
--nav--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--nav--padding-left: var(
--nav--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
}
.nav.-lg {
--nav--font-size: var(
--nav--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--nav--padding-top: var(
--nav--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--nav--padding-right: var(
--nav--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--nav--padding-bottom: var(
--nav--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--nav--padding-left: var(
--nav--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
}
/**
* Nav Item
*/
.nav .nav-item {
display: block;
margin-bottom: 0;
transition-property: var(--nav--transition-property, background-color, border-color, color);
transition-timing-function: var(--nav--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--nav--transition-duration, var(--transition-duration));
padding: var(--nav--padding, var(--nav--padding-top, var(--padding-top)) var(--nav--padding-right, var(--padding-right)) var(--nav--padding-bottom, var(--padding-bottom)) var(--nav--padding-left, var(--padding-left)));
color: var(--nav--color);
font-size: var(--nav--font-size, var(--font-size));
}
.nav .nav-item:hover, .nav .nav-item:focus {
text-decoration: none;
outline: 0;
}
.nav .nav-item.-disabled {
pointer-events: none;
cursor: default;
color: var(--nav--disabled--color);
}
.nav .nav-item.-active {
color: var(--nav--active--color);
font-weight: bold;
}
.nav .nav-item[to], .nav .nav-item[href] {
cursor: pointer;
}
/**
* Navbar
*/
/**
* Breakpoint mixins
*/
.navbar {
color: var(--navbar--color);
background: var(--navbar--background);
padding: var(--navbar--padding, var(--navbar--padding-top, var(--padding-top)) var(--navbar--padding-right, var(--padding-right)) var(--navbar--padding-bottom, var(--padding-bottom)) var(--navbar--padding-left, var(--padding-left)));
font-size: var(--navbar--font-size, var(--font-size));
box-shadow: var(--navbar--box-shadow, var(--navbar--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--navbar--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--navbar--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--navbar--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--navbar--box-shadow-color, var(--box-shadow-color)));
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
border-width: var(--navbar--border-width, var(--navbar--border-top-width, var(--border-top-width)) var(--navbar--border-right-width, var(--border-right-width)) var(--navbar--border-bottom-width, var(--border-bottom-width)) var(--navbar--border-left-width, var(--border-left-width)));
border-style: var(--navbar--border-style, var(--navbar--border-top-style, var(--border-top-style)) var(--navbar--border-right-style, var(--border-right-style)) var(--navbar--border-bottom-style, var(--border-bottom-style)) var(--navbar--border-left-style, var(--border-left-style)));
border-color: var(--navbar--border-color, var(--navbar--border-top-color, var(--border-top-color)) var(--navbar--border-right-color, var(--border-right-color)) var(--navbar--border-bottom-color, var(--border-bottom-color)) var(--navbar--border-left-color, var(--border-left-color)));
border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
transition-property: var(--navbar--transition-property, background-color, border-color);
transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}
.navbar > .container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.navbar > .container.-fluid {
padding: 0;
}
.navbar .navbar-collapsible .nav-item {
color: var(--navbar--item--color);
padding: var(--navbar--item--padding, var(--navbar--item--padding-top, var(--navbar--padding-top, var(--padding-top))) var(--navbar--item--padding-right, var(--navbar--padding-right, var(--padding-right))) var(--navbar--item--padding-bottom, var(--navbar--padding-bottom, var(--padding-bottom))) var(--navbar--item--padding-left, var(--navbar--padding-left, var(--padding-left))));
font-size: var(--navbar--item--font-size, var(--navbar--font-size, var(--font-size)));
border-radius: var(--navbar--item--border-radius, var(--navbar--item--border-top-left-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius))) var(--navbar--item--border-top-right-radius, var(--navbar--border-top-right-radius, var(--border-top-right-radius))) var(--navbar--item--border-bottom-right-radius, var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius))) var(--navbar--item--border-bottom-left-radius, var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius))));
background: var(--navbar--background);
}
.navbar .navbar-collapsible .nav-item.-focused, .navbar .navbar-collapsible .nav-item.-hovered, .navbar .navbar-collapsible .nav-item:focus, .navbar .navbar-collapsible .nav-item:hover {
color: var(--navbar--item--hover--color, var(--navbar--item--color));
background: var(--navbar--item--hover--background, var(--navbar--item--background));
}
.navbar .navbar-collapsible .nav-item.-active {
cursor: pointer;
}
.navbar.-collapsible .navbar-collapsible {
background: var(--navbar--collapsed--background);
}
.navbar.-collapsible .navbar-collapsible .nav-item {
background: var(--navbar--collapsed--item--background, var(--navbar--item--background));
color: var(--navbar--collapsed--item--color, var(--navbar--item--color));
}
.navbar.-collapsible .navbar-collapsible .nav-item:hover {
color: var(--navbar--collapsed--item--hover--color, var(--navbar--item--hover--color));
background: var(--navbar--collapsed--item--hover--background, var(--navbar--item--hover--background));
}
.navbar .collapse-toggle {
display: none;
}
@media screen and (max-width: 575.99px) {
.navbar.-collapse-xs .navbar-collapsible {
position: relative;
display: block;
width: 100%;
border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.navbar.-collapse-xs .navbar-collapsible .nav {
flex-direction: column;
align-items: flex-start;
}
.navbar.-collapse-xs .navbar-collapsible .nav:first-of-type {
margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
}
.navbar.-collapse-xs .navbar-collapsible .nav .nav-item {
width: 100%;
transition-property: var(--navbar--transition-property, background-color, color);
transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}
.navbar.-collapse-xs .navbar-collapsible .nav .dropdown-wrapper {
width: 100%;
}
.navbar.-collapse-xs .navbar-collapsible .nav .dropdown-wrapper .dropdown {
width: 100%;
position: relative !important;
left: auto !important;
top: auto !important;
transform-origin: center top;
}
.navbar.-collapse-xs .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
display: none;
}
.navbar.-collapse-xs .collapse-toggle {
display: inline-block;
}
.navbar.-collapse-xs .collapse-toggle + .navbar-brand {
order: -1;
}
}
@media screen and (max-width: 767.99px) {
.navbar.-collapse-sm .navbar-collapsible {
position: relative;
display: block;
width: 100%;
border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.navbar.-collapse-sm .navbar-collapsible .nav {
flex-direction: column;
align-items: flex-start;
}
.navbar.-collapse-sm .navbar-collapsible .nav:first-of-type {
margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
}
.navbar.-collapse-sm .navbar-collapsible .nav .nav-item {
width: 100%;
transition-property: var(--navbar--transition-property, background-color, color);
transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}
.navbar.-collapse-sm .navbar-collapsible .nav .dropdown-wrapper {
width: 100%;
}
.navbar.-collapse-sm .navbar-collapsible .nav .dropdown-wrapper .dropdown {
width: 100%;
position: relative !important;
left: auto !important;
top: auto !important;
transform-origin: center top;
}
.navbar.-collapse-sm .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
display: none;
}
.navbar.-collapse-sm .collapse-toggle {
display: inline-block;
}
.navbar.-collapse-sm .collapse-toggle + .navbar-brand {
order: -1;
}
}
@media screen and (max-width: 991.99px) {
.navbar.-collapse-md .navbar-collapsible {
position: relative;
display: block;
width: 100%;
border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.navbar.-collapse-md .navbar-collapsible .nav {
flex-direction: column;
align-items: flex-start;
}
.navbar.-collapse-md .navbar-collapsible .nav:first-of-type {
margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
}
.navbar.-collapse-md .navbar-collapsible .nav .nav-item {
width: 100%;
transition-property: var(--navbar--transition-property, background-color, color);
transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}
.navbar.-collapse-md .navbar-collapsible .nav .dropdown-wrapper {
width: 100%;
}
.navbar.-collapse-md .navbar-collapsible .nav .dropdown-wrapper .dropdown {
width: 100%;
position: relative !important;
left: auto !important;
top: auto !important;
transform-origin: center top;
}
.navbar.-collapse-md .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
display: none;
}
.navbar.-collapse-md .collapse-toggle {
display: inline-block;
}
.navbar.-collapse-md .collapse-toggle + .navbar-brand {
order: -1;
}
}
@media screen and (max-width: 1199.99px) {
.navbar.-collapse-lg .navbar-collapsible {
position: relative;
display: block;
width: 100%;
border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.navbar.-collapse-lg .navbar-collapsible .nav {
flex-direction: column;
align-items: flex-start;
}
.navbar.-collapse-lg .navbar-collapsible .nav:first-of-type {
margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
}
.navbar.-collapse-lg .navbar-collapsible .nav .nav-item {
width: 100%;
transition-property: var(--navbar--transition-property, background-color, color);
transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}
.navbar.-collapse-lg .navbar-collapsible .nav .dropdown-wrapper {
width: 100%;
}
.navbar.-collapse-lg .navbar-collapsible .nav .dropdown-wrapper .dropdown {
width: 100%;
position: relative !important;
left: auto !important;
top: auto !important;
transform-origin: center top;
}
.navbar.-collapse-lg .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
display: none;
}
.navbar.-collapse-lg .collapse-toggle {
display: inline-block;
}
.navbar.-collapse-lg .collapse-toggle + .navbar-brand {
order: -1;
}
}
@media screen and (max-width: 1399.99px) {
.navbar.-collapse-xl .navbar-collapsible {
position: relative;
display: block;
width: 100%;
border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.navbar.-collapse-xl .navbar-collapsible .nav {
flex-direction: column;
align-items: flex-start;
}
.navbar.-collapse-xl .navbar-collapsible .nav:first-of-type {
margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
}
.navbar.-collapse-xl .navbar-collapsible .nav .nav-item {
width: 100%;
transition-property: var(--navbar--transition-property, background-color, color);
transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}
.navbar.-collapse-xl .navbar-collapsible .nav .dropdown-wrapper {
width: 100%;
}
.navbar.-collapse-xl .navbar-collapsible .nav .dropdown-wrapper .dropdown {
width: 100%;
position: relative !important;
left: auto !important;
top: auto !important;
transform-origin: center top;
}
.navbar.-collapse-xl .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
display: none;
}
.navbar.-collapse-xl .collapse-toggle {
display: inline-block;
}
.navbar.-collapse-xl .collapse-toggle + .navbar-brand {
order: -1;
}
}
.navbar.-collapse-2xl .navbar-collapsible {
position: relative;
display: block;
width: 100%;
border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.navbar.-collapse-2xl .navbar-collapsible .nav {
flex-direction: column;
align-items: flex-start;
}
.navbar.-collapse-2xl .navbar-collapsible .nav:first-of-type {
margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
}
.navbar.-collapse-2xl .navbar-collapsible .nav .nav-item {
width: 100%;
transition-property: var(--navbar--transition-property, background-color, color);
transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}
.navbar.-collapse-2xl .navbar-collapsible .nav .dropdown-wrapper {
width: 100%;
}
.navbar.-collapse-2xl .navbar-collapsible .nav .dropdown-wrapper .dropdown {
width: 100%;
position: relative !important;
left: auto !important;
top: auto !important;
transform-origin: center top;
}
.navbar.-collapse-2xl .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
display: none;
}
.navbar.-collapse-2xl .collapse-toggle {
display: inline-block;
}
.navbar.-collapse-2xl .collapse-toggle + .navbar-brand {
order: -1;
}
.navbar.-collapse-true .navbar-collapsible {
position: relative;
display: block;
width: 100%;
border-radius: var(--navbar--border-radius, var(--navbar--border-top-left-radius, var(--border-top-left-radius)) var(--navbar--border-top-right-radius, var(--border-top-right-radius)) var(--navbar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--navbar--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.navbar.-collapse-true .navbar-collapsible .nav {
flex-direction: column;
align-items: flex-start;
}
.navbar.-collapse-true .navbar-collapsible .nav:first-of-type {
margin-top: var(--navbar--collapsed--margin-top, var(--margin-top));
}
.navbar.-collapse-true .navbar-collapsible .nav .nav-item {
width: 100%;
transition-property: var(--navbar--transition-property, background-color, color);
transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}
.navbar.-collapse-true .navbar-collapsible .nav .dropdown-wrapper {
width: 100%;
}
.navbar.-collapse-true .navbar-collapsible .nav .dropdown-wrapper .dropdown {
width: 100%;
position: relative !important;
left: auto !important;
top: auto !important;
transform-origin: center top;
}
.navbar.-collapse-true .navbar-collapsible .nav .dropdown-wrapper .dropdown [data-popper-arrow] {
display: none;
}
.navbar.-collapse-true .collapse-toggle {
display: inline-block;
}
.navbar.-collapse-true .collapse-toggle + .navbar-brand {
order: -1;
}
/**
* Color variants
*/
.navbar.-light {
--navbar--background: var(--navbar--light--background, var(--color-light));
--navbar--border-top-color: var(
--navbar--light--border-top-color,
var(--color-light-shade-50)
);
--navbar--border-right-color: var(
--navbar--light--border-right-color,
var(--color-light-shade-50)
);
--navbar--border-bottom-color: var(
--navbar--light--border-bottom-color,
var(--color-light-shade-50)
);
--navbar--border-left-color: var(
--navbar--light--border-left-color,
var(--color-light-shade-50)
);
--navbar--color: var(--navbar--light--color, var(--contrast-text-color-light));
--navbar--item--background: var(--navbar--light--item--background, var(--color-light));
--navbar--item--hover--background: var(
--navbar--light--item--hover--background,
var(--color-light-shade-50)
);
--navbar--collapsed--background: var(
--navbar--light--collapsed--background,
var(--color-light)
);
}
.navbar.-dark {
--navbar--background: var(--navbar--dark--background, var(--color-dark));
--navbar--border-top-color: var(
--navbar--dark--border-top-color,
var(--color-dark-tint-50)
);
--navbar--border-right-color: var(
--navbar--dark--border-right-color,
var(--color-dark-tint-50)
);
--navbar--border-bottom-color: var(
--navbar--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--navbar--border-left-color: var(
--navbar--dark--border-left-color,
var(--color-dark-tint-50)
);
--navbar--color: var(--navbar--dark--color, var(--contrast-text-color-dark));
--navbar--item--background: var(--navbar--dark--item--background, var(--color-dark));
--navbar--item--hover--background: var(
--navbar--dark--item--hover--background,
var(--color-dark-tint-50)
);
--navbar--collapsed--background: var(
--navbar--dark--collapsed--background,
var(--color-dark)
);
}
/**
* Size variants
*/
.navbar.-sm {
--navbar--border-top-left-radius: var(
--navbar--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--navbar--border-top-right-radius: var(
--navbar--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--navbar--border-bottom-right-radius: var(
--navbar--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--navbar--border-bottom-left-radius: var(
--navbar--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--navbar--font-size: var(
--navbar--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--navbar--padding-top: var(
--navbar--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--navbar--padding-right: var(
--navbar--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--navbar--padding-bottom: var(
--navbar--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--navbar--padding-left: var(
--navbar--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
--navbar--item--padding-top: var(
--navbar--sm--item--padding-top,
calc(calc(var(--padding-top) / 2) * var(--size-multiplier-sm))
);
--navbar--item--padding-right: var(
--navbar--sm--item--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--navbar--item--padding-bottom: var(
--navbar--sm--item--padding-bottom,
calc(calc(var(--padding-bottom) / 2) * var(--size-multiplier-sm))
);
--navbar--item--padding-left: var(
--navbar--sm--item--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
}
.navbar.-md {
--navbar--border-top-left-radius: var(
--navbar--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--navbar--border-top-right-radius: var(
--navbar--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--navbar--border-bottom-right-radius: var(
--navbar--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--navbar--border-bottom-left-radius: var(
--navbar--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--navbar--font-size: var(
--navbar--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--navbar--padding-top: var(
--navbar--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--navbar--padding-right: var(
--navbar--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--navbar--padding-bottom: var(
--navbar--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--navbar--padding-left: var(
--navbar--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
--navbar--item--padding-top: var(
--navbar--md--item--padding-top,
calc(calc(var(--padding-top) / 2) * var(--size-multiplier-md))
);
--navbar--item--padding-right: var(
--navbar--md--item--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--navbar--item--padding-bottom: var(
--navbar--md--item--padding-bottom,
calc(calc(var(--padding-bottom) / 2) * var(--size-multiplier-md))
);
--navbar--item--padding-left: var(
--navbar--md--item--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
}
.navbar.-lg {
--navbar--border-top-left-radius: var(
--navbar--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--navbar--border-top-right-radius: var(
--navbar--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--navbar--border-bottom-right-radius: var(
--navbar--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--navbar--border-bottom-left-radius: var(
--navbar--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--navbar--font-size: var(
--navbar--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--navbar--padding-top: var(
--navbar--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--navbar--padding-right: var(
--navbar--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--navbar--padding-bottom: var(
--navbar--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--navbar--padding-left: var(
--navbar--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
--navbar--item--padding-top: var(
--navbar--lg--item--padding-top,
calc(calc(var(--padding-top) / 2) * var(--size-multiplier-lg))
);
--navbar--item--padding-right: var(
--navbar--lg--item--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--navbar--item--padding-bottom: var(
--navbar--lg--item--padding-bottom,
calc(calc(var(--padding-bottom) / 2) * var(--size-multiplier-lg))
);
--navbar--item--padding-left: var(
--navbar--lg--item--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
}
/**
* Navbar Brand
*/
.navbar .navbar-brand {
display: inline-flex;
color: var(--navbar--color);
padding: var(--navbar--item--padding, var(--navbar--item--padding-top, var(--navbar--padding-top, var(--padding-top))) var(--navbar--item--padding-right, var(--navbar--padding-right, var(--padding-right))) var(--navbar--item--padding-bottom, var(--navbar--padding-bottom, var(--padding-bottom))) var(--navbar--item--padding-left, var(--navbar--padding-left, var(--padding-left))));
font-size: var(--navbar--brand--font-size, var(--navbar--font-size, var(--font-size)));
margin-right: var(--navbar--brand--margin-right, var(--margin-right));
line-height: inherit;
white-space: nowrap;
align-items: center;
}
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
text-decoration: none;
}
.navbar .navbar-brand[to], .navbar .navbar-brand[href] {
cursor: pointer;
}
.navbar .navbar-brand > .h1,
.navbar .navbar-brand > .h2,
.navbar .navbar-brand > .h3,
.navbar .navbar-brand > .h4,
.navbar .navbar-brand > .h5,
.navbar .navbar-brand > .h6,
.navbar .navbar-brand > h1,
.navbar .navbar-brand > h2,
.navbar .navbar-brand > h3,
.navbar .navbar-brand > h4,
.navbar .navbar-brand > h5,
.navbar .navbar-brand > h6 {
margin-top: 0;
margin-bottom: 0;
}
/**
* Navbar Collapsible
*/
.navbar-collapsible {
display: flex;
flex-wrap: nowrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: space-between;
align-items: center;
transition-property: var(--navbar--transition-property, height, background-color, border-color);
transition-timing-function: var(--navbar--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--navbar--transition-duration, var(--transition-duration));
}
/**
* Pagination
*/
.pagination {
display: flex;
max-width: 100%;
font-size: var(--pagination--font-size, var(--font-size));
}
.pagination .pagination-items {
list-style: none;
margin-bottom: 0;
padding-left: 0;
display: flex;
align-items: center;
}
.pagination .pagination-item {
display: inline-flex;
border-color: var(--pagination--border-color, var(--pagination--border-top-color, var(--border-top-color)) var(--pagination--border-right-color, var(--border-right-color)) var(--pagination--border-bottom-color, var(--border-bottom-color)) var(--pagination--border-left-color, var(--border-left-color)));
border-width: var(--pagination--border-width, var(--pagination--border-top-width, var(--border-top-width)) var(--pagination--border-right-width, var(--border-right-width)) var(--pagination--border-bottom-width, var(--border-bottom-width)) var(--pagination--border-left-width, var(--border-left-width)));
border-style: var(--pagination--border-style, var(--pagination--border-top-style, var(--border-top-style)) var(--pagination--border-right-style, var(--border-right-style)) var(--pagination--border-bottom-style, var(--border-bottom-style)) var(--pagination--border-left-style, var(--border-left-style)));
border-radius: var(--pagination--border-radius, var(--pagination--border-top-left-radius, var(--border-top-left-radius)) var(--pagination--border-top-right-radius, var(--border-top-right-radius)) var(--pagination--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--pagination--border-bottom-left-radius, var(--border-bottom-left-radius)));
box-shadow: var(--pagination--box-shadow, var(--pagination--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--pagination--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--pagination--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--pagination--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--pagination--box-shadow-color, var(--box-shadow-color)));
padding: var(--pagination--padding, var(--pagination--padding-top, var(--padding-top)) var(--pagination--padding-right, var(--padding-right)) var(--pagination--padding-bottom, var(--padding-bottom)) var(--pagination--padding-left, var(--padding-left)));
min-width: var(--pagination--min-width, 40px);
color: var(--pagination--color);
background-color: var(--pagination--background);
margin: var(--pagination--margin, var(--pagination--margin-top, var(--margin-top)) var(--pagination--margin-right, var(--margin-right)) var(--pagination--margin-bottom, var(--margin-bottom)) var(--pagination--margin-left, var(--margin-left)));
text-align: center;
justify-content: center;
cursor: pointer;
transition-property: var(--pagination--transition-property, background, color, border);
transition-timing-function: var(--pagination--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--pagination--transition-duration, var(--transition-duration));
}
.pagination .pagination-item:hover:not(.-disabled), .pagination .pagination-item:focus:not(.-disabled) {
background: var(--pagination--hover--background);
}
.pagination .pagination-item.-active {
background: var(--pagination--active--background, var(--pagination--background));
border-color: var(--pagination--active--border-color, var(--pagination--active--border-top-color, var(--pagination--border-top-color, var(--border-top-color))) var(--pagination--active--border-right-color, var(--pagination--border-right-color, var(--border-right-color))) var(--pagination--active--border-bottom-color, var(--pagination--border-bottom-color, var(--border-bottom-color))) var(--pagination--active--border-left-color, var(--pagination--border-left-color, var(--border-left-color))));
color: var(--pagination--active--color, var(--pagination--color));
font-weight: bold;
}
.pagination .pagination-item.-active:hover, .pagination .pagination-item.-active:focus {
background: var(--pagination--active--background, var(--pagination--background));
}
.pagination .pagination-item.-disabled {
cursor: default;
color: var(--pagination--disabled--color, var(--pagination--color));
opacity: var(--pagination--disabled--opacity, 0.75);
}
.pagination .pagination-item.-quick-next.-disabled, .pagination .pagination-item.-quick-previous.-disabled {
color: var(--pagination--quick--disabled--border-color, var(--pagination--disabled--color));
border-color: var(--pagination--quick--disabled--border-color, var(--pagination--background));
opacity: var(--pagination--quick--disabled--opacity, var(--pagination--disabled--opacity, 0.75));
}
/**
* Color variants
*/
.pagination.-light {
--pagination--background: var(--pagination--light--background, var(--color-light));
--pagination--border-top-color: var(
--pagination--light--border-top-color,
var(--color-light-shade-50)
);
--pagination--border-right-color: var(
--pagination--light--border-right-color,
var(--color-light-shade-50)
);
--pagination--border-bottom-color: var(
--pagination--light--border-bottom-color,
var(--color-light-shade-50)
);
--pagination--border-left-color: var(
--pagination--light--border-left-color,
var(--color-light-shade-50)
);
--pagination--color: var(--pagination--light--color, var(--contrast-text-color-light));
--pagination--hover--background: var(
--pagination--light--hover--background,
var(--color-light-shade-50)
);
--pagination--active--background: var(
--pagination--light--active--background,
var(--color-primary)
);
--pagination--active--border-top-color: var(
--pagination--light--border-top-color--active,
var(--color-primary-shade-50)
);
--pagination--active--border-right-color: var(
--pagination--light--border-right-color--active,
var(--color-primary-shade-50)
);
--pagination--active--border-bottom-color: var(
--pagination--light--border-bottom-color--active,
var(--color-primary-shade-50)
);
--pagination--active--border-left-color: var(
--pagination--light--border-left-color--active,
var(--color-primary-shade-50)
);
--pagination--active--color: var(
--pagination--light--active--color,
var(--contrast-text-color-primary)
);
--pagination--disabled--color: var(
--pagination--light--disabled--color,
var(--text-color-weak)
);
}
.pagination.-dark {
--pagination--background: var(--pagination--dark--background, var(--color-dark));
--pagination--border-top-color: var(
--pagination--dark--border-top-color,
var(--color-dark-tint-50)
);
--pagination--border-right-color: var(
--pagination--dark--border-right-color,
var(--color-dark-tint-50)
);
--pagination--border-bottom-color: var(
--pagination--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--pagination--border-left-color: var(
--pagination--dark--border-left-color,
var(--color-dark-tint-50)
);
--pagination--color: var(--pagination--dark--color, var(--contrast-text-color-dark));
--pagination--hover--background: var(
--pagination--dark--hover--background,
var(--color-dark-tint-50)
);
--pagination--active--background: var(
--pagination--dark--active--background,
var(--color-primary)
);
--pagination--active--border-top-color: var(
--pagination--dark--border-top-color--active,
var(--color-primary-shade-50)
);
--pagination--active--border-right-color: var(
--pagination--dark--border-right-color--active,
var(--color-primary-shade-50)
);
--pagination--active--border-bottom-color: var(
--pagination--dark--border-bottom-color--active,
var(--color-primary-shade-50)
);
--pagination--active--border-left-color: var(
--pagination--dark--border-left-color--active,
var(--color-primary-shade-50)
);
--pagination--active--color: var(
--pagination--dark--active--color,
var(--contrast-text-color-primary)
);
--pagination--disabled--color: var(
--pagination--dark--disabled--color,
var(--text-color-weak)
);
}
/**
* Size variants
*/
.pagination.-sm {
--pagination--border-top-left-radius: var(
--pagination--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--pagination--border-top-right-radius: var(
--pagination--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--pagination--border-bottom-right-radius: var(
--pagination--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--pagination--border-bottom-left-radius: var(
--pagination--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--pagination--font-size: var(
--pagination--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--pagination--margin-right: var(
--pagination--sm--margin-right,
calc(calc(var(--margin-right) / 4) * var(--size-multiplier-sm))
);
--pagination--margin-left: var(
--pagination--sm--margin-left,
calc(calc(var(--margin-left) / 4) * var(--size-multiplier-sm))
);
--pagination--min-width: var(
--pagination--sm--min-width,
calc(40px * var(--size-multiplier-sm))
);
--pagination--padding-top: var(
--pagination--sm--padding-top,
calc(var(--padding-top) / 2 * var(--size-multiplier-sm))
);
--pagination--padding-right: var(
--pagination--sm--padding-right,
calc(var(--padding-right) / 2 * var(--size-multiplier-sm))
);
--pagination--padding-bottom: var(
--pagination--sm--padding-bottom,
calc(var(--padding-bottom) / 2 * var(--size-multiplier-sm))
);
--pagination--padding-left: var(
--pagination--sm--padding-left,
calc(var(--padding-left) / 2 * var(--size-multiplier-sm))
);
}
.pagination.-md {
--pagination--border-top-left-radius: var(
--pagination--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--pagination--border-top-right-radius: var(
--pagination--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--pagination--border-bottom-right-radius: var(
--pagination--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--pagination--border-bottom-left-radius: var(
--pagination--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--pagination--font-size: var(
--pagination--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--pagination--margin-right: var(
--pagination--md--margin-right,
calc(var(--margin-right) / 4 * var(--size-multiplier-md))
);
--pagination--margin-left: var(
--pagination--md--margin-left,
calc(var(--margin-left) / 4 * var(--size-multiplier-md))
);
--pagination--min-width: var(
--pagination--md--min-width,
calc(40px * var(--size-multiplier-md))
);
--pagination--padding-top: var(
--pagination--md--padding-top,
calc(var(--padding-top) / 2 * var(--size-multiplier-md))
);
--pagination--padding-right: var(
--pagination--md--padding-right,
calc(var(--padding-right) / 2 * var(--size-multiplier-md))
);
--pagination--padding-bottom: var(
--pagination--md--padding-bottom,
calc(var(--padding-bottom) / 2 * var(--size-multiplier-md))
);
--pagination--padding-left: var(
--pagination--md--padding-left,
calc(var(--padding-left) / 2 * var(--size-multiplier-md))
);
}
.pagination.-lg {
--pagination--border-top-left-radius: var(
--pagination--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--pagination--border-top-right-radius: var(
--pagination--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--pagination--border-bottom-right-radius: var(
--pagination--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--pagination--border-bottom-left-radius: var(
--pagination--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--pagination--font-size: var(
--pagination--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--pagination--margin-right: var(
--pagination--lg--margin-right,
calc(var(--margin-right) / 4 * var(--size-multiplier-lg))
);
--pagination--margin-left: var(
--pagination--lg--margin-left,
calc(var(--margin-left) / 4 * var(--size-multiplier-lg))
);
--pagination--min-width: var(
--pagination--lg--min-width,
calc(40px * var(--size-multiplier-lg))
);
--pagination--padding-top: var(
--pagination--lg--padding-top,
calc(calc(var(--padding-top) / 2) * var(--size-multiplier-lg))
);
--pagination--padding-right: var(
--pagination--lg--padding-right,
calc(var(--padding-right) / 2 * var(--size-multiplier-lg))
);
--pagination--padding-bottom: var(
--pagination--lg--padding-bottom,
calc(var(--padding-bottom) / 2 * var(--size-multiplier-lg))
);
--pagination--padding-left: var(
--pagination--lg--padding-left,
calc(var(--padding-left) / 2 * var(--size-multiplier-lg))
);
}
/**
* Breakpoint mixins
*/
/**
* Popover
*/
.popover-wrapper {
display: inline-block;
position: relative;
}
.popover-wrapper .popover {
position: absolute;
z-index: var(--popover--z-index, 2000);
word-wrap: break-word;
width: max-content;
top: 0;
left: 0;
text-align: left;
list-style: none;
line-height: var(--popover--line-height, var(--line-height));
box-shadow: var(--popover--box-shadow, var(--popover--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--popover--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--popover--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--popover--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--popover--box-shadow-color, var(--box-shadow-color)));
background-clip: padding-box;
display: inline-block;
white-space: normal;
width: var(--popover--width, 280px);
max-width: var(--popover--max-width, 90vw);
color: var(--popover--color);
font-size: var(--popover--font-size, var(--font-size));
}
.popover-wrapper .popover:focus:hover {
outline-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=top] {
transform-origin: center bottom;
}
.popover-wrapper .popover[data-popup-placement^=bottom] {
transform-origin: center top;
}
.popover-wrapper .popover[data-popup-placement^=right] {
transform-origin: left center;
}
.popover-wrapper .popover[data-popup-placement^=left] {
transform-origin: right center;
}
.popover-wrapper .popover > .arrow {
position: absolute;
}
.popover-wrapper .popover > .arrow,
.popover-wrapper .popover > .arrow::after {
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
position: absolute;
}
.popover-wrapper .popover > .arrow::after {
content: "";
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow {
border-bottom-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow::after {
border-bottom-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=bottom] > .arrow {
border-top-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=bottom] > .arrow::after {
border-top-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=right] > .arrow {
border-left-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=right] > .arrow::after {
border-left-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow {
border-right-width: 0;
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow::after {
border-right-width: 0;
}
.popover-wrapper .popover > .arrow {
width: var(--popover--arrow--size, 6px);
height: var(--popover--arrow--size, 6px);
}
.popover-wrapper .popover > .arrow, .popover-wrapper .popover > .arrow::after {
border-width: var(--popover--arrow--size, 6px);
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow::after, .popover-wrapper .popover[data-popup-placement^=bottom] > .arrow::after {
margin-left: calc(var(--popover--arrow--size, 6px) * -1);
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow::after, .popover-wrapper .popover[data-popup-placement^=right] > .arrow::after {
margin-top: calc(var(--popover--arrow--size, 6px) * -1);
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow {
bottom: calc(var(--popover--arrow--size, 6px) * -1);
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow::after {
bottom: 1px;
}
.popover-wrapper .popover[data-popup-placement^=bottom] > .arrow {
top: calc(var(--popover--arrow--size, 6px) * -1);
}
.popover-wrapper .popover[data-popup-placement^=bottom] > .arrow::after {
top: 1px;
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow {
right: calc(var(--popover--arrow--size, 6px) * -1);
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow::after {
right: 1px;
}
.popover-wrapper .popover[data-popup-placement^=right] > .arrow {
left: calc(var(--popover--arrow--size, 6px) * -1);
}
.popover-wrapper .popover[data-popup-placement^=right] > .arrow::after {
left: 1px;
}
.popover-wrapper .popover > .popover-header {
border-style: var(--popover--header--border-style, var(--popover--header--border-top-style, var(--popover--border-top-style, var(--border-top-style))) var(--popover--header--border-right-style, var(--popover--border-right-style, var(--border-right-style))) var(--popover--header--border-bottom-style, var(--popover--border-bottom-style, var(--border-bottom-style))) var(--popover--header--border-left-style, var(--popover--border-left-style, var(--border-left-style))));
border-width: var(--popover--header--border-width, var(--popover--header--border-top-width, var(--popover--border-top-width, var(--border-top-width))) var(--popover--header--border-right-width, var(--popover--border-right-width, var(--border-right-width))) var(--popover--header--border-bottom-width, 0) var(--popover--header--border-left-width, var(--popover--border-left-width, var(--border-left-width))));
border-color: var(--popover--header--border-color, var(--popover--header--border-top-color, var(--popover--border-top-color, var(--border-top-color))) var(--popover--header--border-right-color, var(--popover--border-right-color, var(--border-right-color))) var(--popover--header--border-bottom-color, var(--popover--border-bottom-color, var(--border-bottom-color))) var(--popover--header--border-left-color, var(--popover--border-left-color, var(--border-left-color))));
padding: var(--popover--header--padding, var(--popover--header--padding-top, var(--popover--padding-top, var(--padding-top))) var(--popover--header--padding-right, var(--popover--padding-right, var(--padding-right))) var(--popover--header--padding-bottom, var(--popover--padding-bottom, var(--padding-bottom))) var(--popover--header--padding-left, var(--popover--padding-left, var(--padding-left))));
background-color: var(--popover--header--background, var(--popover--background));
}
.popover-wrapper .popover > .popover-body {
border-style: var(--popover--body--border-style, var(--popover--body--border-top-style, var(--popover--border-top-style, var(--border-top-style))) var(--popover--body--border-right-style, var(--popover--border-right-style, var(--border-right-style))) var(--popover--body--border-bottom-style, var(--popover--border-bottom-style, var(--border-bottom-style))) var(--popover--body--border-left-style, var(--popover--border-left-style, var(--border-left-style))));
border-width: var(--popover--body--border-width, var(--popover--body--border-top-width, var(--popover--border-top-width, var(--border-top-width))) var(--popover--body--border-right-width, var(--popover--border-right-width, var(--border-right-width))) var(--popover--body--border-bottom-width, var(--popover--border-bottom-width, var(--border-bottom-width))) var(--popover--body--border-left-width, var(--popover--border-left-width, var(--border-left-width))));
border-color: var(--popover--body--border-color, var(--popover--body--border-top-color, var(--popover--border-top-color, var(--border-top-color))) var(--popover--body--border-right-color, var(--popover--border-right-color, var(--border-right-color))) var(--popover--body--border-bottom-color, var(--popover--border-bottom-color, var(--border-bottom-color))) var(--popover--body--border-left-color, var(--popover--border-left-color, var(--border-left-color))));
padding: var(--popover--body--padding, var(--popover--body--padding-top, var(--popover--padding-top, var(--padding-top))) var(--popover--body--padding-right, var(--popover--padding-right, var(--padding-right))) var(--popover--body--padding-bottom, var(--popover--padding-bottom, var(--padding-bottom))) var(--popover--body--padding-left, var(--popover--padding-left, var(--padding-left))));
background-color: var(--popover--body--background, var(--popover--background));
}
.popover-wrapper .popover > .popover-footer {
border-style: var(--popover--footer--border-style, var(--popover--footer--border-top-style, var(--popover--border-top-style, var(--border-top-style))) var(--popover--footer--border-right-style, var(--popover--border-right-style, var(--border-right-style))) var(--popover--footer--border-bottom-style, var(--popover--border-bottom-style, var(--border-bottom-style))) var(--popover--footer--border-left-style, var(--popover--border-left-style, var(--border-left-style))));
border-width: var(--popover--footer--border-width, var(--popover--footer--border-top-width, 0) var(--popover--footer--border-right-width, var(--popover--border-right-width, var(--border-right-width))) var(--popover--footer--border-bottom-width, var(--popover--border-bottom-width, var(--border-bottom-width))) var(--popover--footer--border-left-width, var(--popover--border-left-width, var(--border-left-width))));
border-color: var(--popover--footer--border-color, var(--popover--footer--border-top-color, var(--popover--border-top-color, var(--border-top-color))) var(--popover--footer--border-right-color, var(--popover--border-right-color, var(--border-right-color))) var(--popover--footer--border-bottom-color, var(--popover--border-bottom-color, var(--border-bottom-color))) var(--popover--footer--border-left-color, var(--popover--border-left-color, var(--border-left-color))));
padding: var(--popover--footer--padding, var(--popover--footer--padding-top, var(--popover--padding-top, var(--padding-top))) var(--popover--footer--padding-right, var(--popover--padding-right, var(--padding-right))) var(--popover--footer--padding-bottom, var(--popover--padding-bottom, var(--padding-bottom))) var(--popover--footer--padding-left, var(--popover--padding-left, var(--padding-left))));
background-color: var(--popover--footer--background, var(--popover--background));
}
.popover-wrapper .popover > div:first-of-type {
border-top-left-radius: var(--popover--border-top-left-radius, var(--border-top-left-radius));
border-top-right-radius: var(--popover--border-top-right-radius, var(--border-top-right-radius));
}
.popover-wrapper .popover > div:last-of-type {
border-bottom-left-radius: var(--popover--border-bottom-left-radius, var(--border-bottom-left-radius));
border-bottom-right-radius: var(--popover--border-bottom-right-radius, var(--border-bottom-right-radius));
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow {
border-top-color: var(--popover--border-bottom-color, var(--border-bottom-color));
}
.popover-wrapper .popover[data-popup-placement^=top] > .arrow::after {
border-top-color: var(--popover--background);
}
.popover-wrapper .popover[data-popup-placement^=right] > .arrow {
border-right-color: var(--popover--border-left-color, var(--border-left-color));
}
.popover-wrapper .popover[data-popup-placement^=right] > .arrow::after {
border-right-color: var(--popover--background);
}
.popover-wrapper .popover[data-popup-placement^=bottom] > .arrow {
border-bottom-color: var(--popover--border-top-color, var(--border-top-color));
}
.popover-wrapper .popover[data-popup-placement^=bottom] > .arrow::after {
border-bottom-color: var(--popover--background);
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow {
border-left-color: var(--popover--border-right-color, var(--border-right-color));
}
.popover-wrapper .popover[data-popup-placement^=left] > .arrow::after {
border-left-color: var(--popover--background);
}
/**
* Color variants
*/
.popover-wrapper.-light {
--popover--background: var(--popover--light--background, var(--color-white));
--popover--border-top-color: var(
--popover--light--border-top-color,
var(--color-light-shade-50)
);
--popover--border-right-color: var(
--popover--light--border-right-color,
var(--color-light-shade-50)
);
--popover--border-bottom-color: var(
--popover--light--border-bottom-color,
var(--color-light-shade-50)
);
--popover--border-left-color: var(
--popover--light--border-left-color,
var(--color-light-shade-50)
);
--popover--color: var(--popover--light--color, var(--contrast-text-color-white));
--popover--header--background: var(
--popover--light--header--background,
var(--color-gray-50)
);
--popover--footer--background: var(
--popover--light--footer--background,
var(--color-gray-50)
);
}
.popover-wrapper.-dark {
--popover--background: var(--popover--dark--background, var(--color-dark));
--popover--border-top-color: var(
--popover--dark--border-top-color,
var(--color-dark-tint-50)
);
--popover--border-right-color: var(
--popover--dark--border-right-color,
var(--color-dark-tint-50)
);
--popover--border-bottom-color: var(
--popover--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--popover--border-left-color: var(
--popover--dark--border-left-color,
var(--color-dark-tint-50)
);
--popover--color: var(--popover--dark--color, var(--contrast-text-color-dark));
--popover--header--background: var(
--popover--dark--header--background,
var(--color-dark-tint-50)
);
--popover--footer--background: var(
--popover--dark--footer--background,
var(--color-dark-tint-50)
);
}
/**
* Size variants
*/
.popover-wrapper.-sm {
--popover--border-top-left-radius: var(
--popover--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--popover--border-top-right-radius: var(
--popover--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--popover--border-bottom-right-radius: var(
--popover--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--popover--border-bottom-left-radius: var(
--popover--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--popover--font-size: var(
--popover--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--popover--margin-top: var(
--popover--sm--margin-top,
calc(calc(var(--margin-top) / 2) * var(--size-multiplier-sm))
);
--popover--margin-right: var(
--popover--sm--margin-right,
calc(calc(var(--margin-right) / 2) * var(--size-multiplier-sm))
);
--popover--margin-bottom: var(
--popover--sm--margin-bottom,
calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-sm))
);
--popover--margin-left: var(
--popover--sm--margin-left,
calc(calc(var(--margin-left) / 2) * var(--size-multiplier-sm))
);
--popover--padding-top: var(
--popover--sm--padding-top,
calc(calc(var(--padding-top) * 3 / 4) * var(--size-multiplier-sm))
);
--popover--padding-right: var(
--popover--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--popover--padding-bottom: var(
--popover--sm--padding-bottom,
calc(calc(var(--padding-bottom) * 3 / 4) * var(--size-multiplier-sm))
);
--popover--padding-left: var(
--popover--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
--popover--header--padding-bottom: var(
--popover--sm--header--padding-bottom,
var(----padding-bottom-sm)
);
--popover--header--padding-left: var(
--popover--sm--header--padding-left,
var(----padding-left-sm)
);
--popover--body--padding-bottom: var(
--popover--sm--body--padding-bottom,
var(----padding-bottom-sm)
);
--popover--body--padding-left: var(
--popover--sm--body--padding-left,
var(----padding-left-sm)
);
--popover--footer--padding-bottom: var(
--popover--sm--footer--padding-bottom,
var(----padding-bottom-sm)
);
--popover--footer--padding-left: var(
--popover--sm--footer--padding-left,
var(----padding-left-sm)
);
}
.popover-wrapper.-md {
--popover--border-top-left-radius: var(
--popover--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--popover--border-top-right-radius: var(
--popover--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--popover--border-bottom-right-radius: var(
--popover--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--popover--border-bottom-left-radius: var(
--popover--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--popover--font-size: var(
--popover--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--popover--margin-top: var(
--popover--md--margin-top,
calc(calc(var(--margin-top) / 2) * var(--size-multiplier-md))
);
--popover--margin-right: var(
--popover--md--margin-right,
calc(calc(var(--margin-right) / 2) * var(--size-multiplier-md))
);
--popover--margin-bottom: var(
--popover--md--margin-bottom,
calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-md))
);
--popover--margin-left: var(
--popover--md--margin-left,
calc(calc(var(--margin-left) / 2) * var(--size-multiplier-md))
);
--popover--padding-top: var(
--popover--md--padding-top,
calc(calc(var(--padding-top) * 3 / 4) * var(--size-multiplier-md))
);
--popover--padding-right: var(
--popover--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--popover--padding-bottom: var(
--popover--md--padding-bottom,
calc(calc(var(--padding-bottom) * 3 / 4) * var(--size-multiplier-md))
);
--popover--padding-left: var(
--popover--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
--popover--header--padding-bottom: var(
--popover--md--header--padding-bottom,
var(----padding-bottom-md)
);
--popover--header--padding-left: var(
--popover--md--header--padding-left,
var(----padding-left-md)
);
--popover--body--padding-bottom: var(
--popover--md--body--padding-bottom,
var(----padding-bottom-md)
);
--popover--body--padding-left: var(
--popover--md--body--padding-left,
var(----padding-left-md)
);
--popover--footer--padding-bottom: var(
--popover--md--footer--padding-bottom,
var(----padding-bottom-md)
);
--popover--footer--padding-left: var(
--popover--md--footer--padding-left,
var(----padding-left-md)
);
}
.popover-wrapper.-lg {
--popover--border-top-left-radius: var(
--popover--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--popover--border-top-right-radius: var(
--popover--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--popover--border-bottom-right-radius: var(
--popover--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--popover--border-bottom-left-radius: var(
--popover--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--popover--font-size: var(
--popover--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--popover--margin-top: var(
--popover--lg--margin-top,
calc(calc(var(--margin-top) / 2) * var(--size-multiplier-lg))
);
--popover--margin-right: var(
--popover--lg--margin-right,
calc(calc(var(--margin-right) / 2) * var(--size-multiplier-lg))
);
--popover--margin-bottom: var(
--popover--lg--margin-bottom,
calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-lg))
);
--popover--margin-left: var(
--popover--lg--margin-left,
calc(calc(var(--margin-left) / 2) * var(--size-multiplier-lg))
);
--popover--padding-top: var(
--popover--lg--padding-top,
calc(calc(var(--padding-top) * 3 / 4) * var(--size-multiplier-lg))
);
--popover--padding-right: var(
--popover--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--popover--padding-bottom: var(
--popover--lg--padding-bottom,
calc(calc(var(--padding-bottom) * 3 / 4) * var(--size-multiplier-lg))
);
--popover--padding-left: var(
--popover--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
--popover--header--padding-bottom: var(
--popover--lg--header--padding-bottom,
var(----padding-bottom-lg)
);
--popover--header--padding-left: var(
--popover--lg--header--padding-left,
var(----padding-left-lg)
);
--popover--body--padding-bottom: var(
--popover--lg--body--padding-bottom,
var(----padding-bottom-lg)
);
--popover--body--padding-left: var(
--popover--lg--body--padding-left,
var(----padding-left-lg)
);
--popover--footer--padding-bottom: var(
--popover--lg--footer--padding-bottom,
var(----padding-bottom-lg)
);
--popover--footer--padding-left: var(
--popover--lg--footer--padding-left,
var(----padding-left-lg)
);
}
/**
* Progress
*/
.progress {
display: flex;
flex-basis: 100%;
position: relative;
overflow: hidden;
background: var(--progress--background);
border-radius: var(--progress--border-radius, var(--progress--border-top-left-radius, var(--border-top-left-radius)) var(--progress--border-top-right-radius, var(--border-top-right-radius)) var(--progress--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--progress--border-bottom-left-radius, var(--border-bottom-left-radius)));
border-color: var(--progress--border-color, var(--progress--border-top-color, var(--border-top-color)) var(--progress--border-right-color, var(--border-right-color)) var(--progress--border-bottom-color, var(--border-bottom-color)) var(--progress--border-left-color, var(--border-left-color)));
border-style: var(--progress--border-style, var(--progress--border-top-style, var(--border-top-style)) var(--progress--border-right-style, var(--border-right-style)) var(--progress--border-bottom-style, var(--border-bottom-style)) var(--progress--border-left-style, var(--border-left-style)));
border-width: var(--progress--border-width, var(--progress--border-top-width, var(--border-top-width)) var(--progress--border-right-width, var(--border-right-width)) var(--progress--border-bottom-width, var(--border-bottom-width)) var(--progress--border-left-width, var(--border-left-width)));
box-shadow: var(--progress--box-shadow, var(--progress--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--progress--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--progress--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--progress--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--progress--box-shadow-color, var(--box-shadow-color)));
height: var(--progress--height);
}
/**
* Color variants
*/
.progress.-light {
--progress--background: var(--progress--light--background, var(--color-light));
--progress--border-top-color: var(
--progress--light--border-top-color,
var(--color-light-shade-50)
);
--progress--border-right-color: var(
--progress--light--border-right-color,
var(--color-light-shade-50)
);
--progress--border-bottom-color: var(
--progress--light--border-bottom-color,
var(--color-light-shade-50)
);
--progress--border-left-color: var(
--progress--light--border-left-color,
var(--color-light-shade-50)
);
}
.progress.-dark {
--progress--background: var(--progress--dark--background, var(--color-dark));
--progress--border-top-color: var(
--progress--dark--border-top-color,
var(--color-dark-tint-50)
);
--progress--border-right-color: var(
--progress--dark--border-right-color,
var(--color-dark-tint-50)
);
--progress--border-bottom-color: var(
--progress--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--progress--border-left-color: var(
--progress--dark--border-left-color,
var(--color-dark-tint-50)
);
}
/**
* Size variants
*/
.progress.-sm {
--progress--border-top-left-radius: var(
--progress--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--progress--border-top-right-radius: var(
--progress--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--progress--border-bottom-right-radius: var(
--progress--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--progress--border-bottom-left-radius: var(
--progress--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--progress--height: var(--progress--sm--height, calc(0.75rem * var(--size-multiplier-sm)));
}
.progress.-md {
--progress--border-top-left-radius: var(
--progress--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--progress--border-top-right-radius: var(
--progress--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--progress--border-bottom-right-radius: var(
--progress--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--progress--border-bottom-left-radius: var(
--progress--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--progress--height: var(--progress--md--height, calc(0.75rem * var(--size-multiplier-md)));
}
.progress.-lg {
--progress--border-top-left-radius: var(
--progress--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--progress--border-top-right-radius: var(
--progress--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--progress--border-bottom-right-radius: var(
--progress--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--progress--border-bottom-left-radius: var(
--progress--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--progress--height: var(--progress--lg--height, calc(0.75rem * var(--size-multiplier-lg)));
}
/**
* Progress bar
*/
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
white-space: nowrap;
height: 100%;
color: var(--progress-bar--color);
background: var(--progress-bar--background);
}
/**
* Color variants
*/
.progress-bar.-primary {
--progress-bar--color: var(
--progress-bar--primary--color,
var(--contrast-text-color-primary)
);
--progress-bar--background: var(--progress-bar--primary--background, var(--color-primary));
}
.progress-bar.-secondary {
--progress-bar--color: var(
--progress-bar--secondary--color,
var(--contrast-text-color-secondary)
);
--progress-bar--background: var(
--progress-bar--secondary--background,
var(--color-secondary)
);
}
.progress-bar.-light {
--progress-bar--color: var(--progress-bar--light--color, var(--contrast-text-color-light));
--progress-bar--background: var(--progress-bar--light--background, var(--color-white));
}
.progress-bar.-dark {
--progress-bar--color: var(--progress-bar--dark--color, var(--contrast-text-color-dark));
--progress-bar--background: var(--progress-bar--dark--background, var(--color-dark));
}
.progress-bar.-info {
--progress-bar--color: var(--progress-bar--info--color, var(--contrast-text-color-info));
--progress-bar--background: var(--progress-bar--info--background, var(--color-info));
}
.progress-bar.-success {
--progress-bar--color: var(
--progress-bar--success--color,
var(--contrast-text-color-success)
);
--progress-bar--background: var(--progress-bar--success--background, var(--color-success));
}
.progress-bar.-warning {
--progress-bar--color: var(
--progress-bar--warning--color,
var(--contrast-text-color-warning)
);
--progress-bar--background: var(--progress-bar--warning--background, var(--color-warning));
}
.progress-bar.-danger {
--progress-bar--color: var(
--progress-bar--danger--color,
var(--contrast-text-color-danger)
);
--progress-bar--background: var(--progress-bar--danger--background, var(--color-danger));
}
/**
* Radio
*/
.radio {
position: relative;
display: inline-flex;
align-items: center;
white-space: nowrap;
outline: none;
margin-right: var(--radio--margin-right, var(--margin-right));
}
.radio:last-of-type {
margin-right: 0;
}
.radio.-disabled {
cursor: default;
}
.radio.-disabled .radio-label::before, .radio.-disabled .radio-label::after {
cursor: not-allowed;
}
.radio .radio-label {
cursor: pointer;
margin-bottom: 0;
display: inline-flex;
align-items: center;
position: relative;
transition-property: var(--radio--transition-property, color);
transition-duration: var(--radio--transition-duration, var(--transition-duration));
transition-timing-function: var(--radio--transition-timing-function, var(--transition-timing-function));
color: var(--radio--label--color);
font-size: var(--radio--label--font-size);
}
.radio .radio-label::before, .radio .radio-label::after {
width: var(--radio--size);
height: var(--radio--size);
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.radio .radio-label::before {
content: "";
user-select: none;
border-color: var(--radio--border-color, var(--radio--border-top-color, var(--border-top-color)) var(--radio--border-right-color, var(--border-right-color)) var(--radio--border-bottom-color, var(--border-bottom-color)) var(--radio--border-left-color, var(--border-left-color)));
border-style: var(--radio--border-style, var(--radio--border-top-style, var(--border-top-style)) var(--radio--border-right-style, var(--border-right-style)) var(--radio--border-bottom-style, var(--border-bottom-style)) var(--radio--border-left-style, var(--border-left-style)));
border-width: var(--radio--border-width, var(--radio--border-top-width, var(--border-top-width)) var(--radio--border-right-width, var(--border-right-width)) var(--radio--border-bottom-width, var(--border-bottom-width)) var(--radio--border-left-width, var(--border-left-width)));
border-radius: 100%;
box-shadow: var(--radio--box-shadow, var(--radio--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--radio--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--radio--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--radio--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--radio--box-shadow-color, var(--box-shadow-color)));
margin-right: var(--radio--margin-right, var(--margin-right-1-2));
transition-property: var(--radio--transition-property, background-color, border-color);
transition-duration: var(--radio--transition-duration, var(--transition-duration));
transition-timing-function: var(--radio--transition-timing-function, var(--transition-timing-function));
background-color: var(--radio--background);
}
.radio .radio-label::after {
position: absolute;
top: 50%;
left: 0;
z-index: 1;
text-align: center;
background-color: var(--radio--color);
margin-top: calc(var(--radio--size) / -2);
mask-image: url('data:image/svg+xml; utf8, ');
-webkit-mask-image: url('data:image/svg+xml; utf8, ');
mask-size: var(--radio--checkmark--size) var(--radio--checkmark--size);
-webkit-mask-size: var(--radio--checkmark--size) var(--radio--checkmark--size);
}
.radio input {
top: 0;
left: 0;
position: absolute;
z-index: 0;
opacity: 0;
height: 0;
width: 0;
}
.radio input:focus, .radio input:active {
outline: none;
}
.radio input:checked ~ .radio-label::before {
border-color: var(--radio--checked--border-color, var(--radio--border-color));
background: var(--radio--checked--background, var(--radio--background));
}
.radio input:checked ~ .radio-label::after {
content: "";
mask-position: center center;
-webkit-mask-position: center center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
}
.radio input:disabled ~ .radio-label, .radio input[readonly] ~ .radio-label {
color: var(--radio--disabled--label--color, var(--radio--label--color));
}
.radio input:disabled:checked ~ .radio-label::before, .radio input[readonly]:checked ~ .radio-label::before {
border-color: var(--radio--checked--disabled--border-color, var(--radio--border-color));
background: var(--radio--checked--disabled--background, var(--radio--background));
}
.radio input:disabled:checked ~ .radio-label::after, .radio input[readonly]:checked ~ .radio-label::after {
cursor: not-allowed;
background: var(--radio--disabled--color, var(--radio--color));
}
.radio.-native input {
top: auto;
left: auto;
position: relative;
opacity: 1;
height: auto;
width: auto;
margin-right: var(--radio--margin-right, var(--margin-right-1-2));
}
.radio.-native .radio-label::after, .radio.-native .radio-label::before {
display: none;
}
/**
* Color variants
*/
.radio.-light {
--radio--background: var(--radio--light--background, var(--color-white));
--radio--checked--background: var(
--radio--light--checked--background,
var(--color-primary)
);
--radio--disabled--background: var(
--radio--light--disabled--background,
var(--color-light-200)
);
--radio--checked--disabled--background: var(
--radio--light--checked--disabled--background,
var(--color-primary-200)
);
--radio--border-color: var(--radio--light--border-color, var(--color-light-shade-50));
--radio--checked--border-color: var(
--radio--light--checked--border-color,
var(--color-primary-shade-50)
);
--radio--disabled--border-color: var(
--radio--light--disabled--border-color,
var(--color-light)
);
--radio--checked--disabled--border-color: var(
--radio--light--checked--disabled--border-color,
var(--color-primary-300)
);
--radio--color: var(--radio--light--color, var(--color-white));
--radio--disabled--color: var(--radio--light--disabled--color, var(--color-light-200));
--radio--label--color: var(--radio--light--label--color, var(--contrast-text-color-light));
--radio--disabled--label--color: var(
--radio--light--disabled--label--color,
var(--color-light-700)
);
}
.radio.-dark {
--radio--background: var(--radio--dark--background, var(--color-dark));
--radio--checked--background: var(--radio--dark--checked--background, var(--color-primary));
--radio--disabled--background: var(
--radio--dark--disabled--background,
var(--color-dark-200)
);
--radio--checked--disabled--background: var(
--radio--dark--checked--disabled--background,
var(--color-primary-700)
);
--radio--border-color: var(--radio--dark--border-color, var(--color-dark-tint-50));
--radio--checked--border-color: var(
--radio--dark--checked--border-color,
var(--color-primary-lighten-50)
);
--radio--disabled--border-color: var(
--radio--dark--disabled--border-color,
var(--color-dark)
);
--radio--checked--disabled--border-color: var(
--radio--dark--checked--disabled--border-color,
var(--color-primary-700)
);
--radio--color: var(--radio--light--color, var(--color-white));
--radio--disabled--color: var(--radio--dark--disabled--color, var(--color-dark-200));
--radio--label--color: var(--radio--dark--label--color, var(--contrast-text-color-dark));
--radio--disabled--label--color: var(
--radio--dark--disabled--label--color,
var(--color-dark-300)
);
}
/**
* Size variants
*/
.radio.-sm {
--radio--size: var(--radio--sm--size, calc(1rem * var(--size-multiplier-sm)));
--radio--checkmark--size: var(
--radio--sm--checkmark--size,
calc(8px * var(--size-multiplier-sm))
);
--radio--label--font-size: var(
--radio--sm--label--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
}
.radio.-md {
--radio--size: var(--radio--md--size, calc(1rem * var(--size-multiplier-md)));
--radio--checkmark--size: var(
--radio--md--checkmark--size,
calc(8px * var(--size-multiplier-md))
);
--radio--label--font-size: var(
--radio--md--label--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
}
.radio.-lg {
--radio--size: var(--radio--lg--size, calc(1rem * var(--size-multiplier-lg)));
--radio--checkmark--size: var(
--radio--lg--checkmark--size,
calc(8px * var(--size-multiplier-lg))
);
--radio--label--font-size: var(
--radio--lg--label--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
}
/**
* Radio Group
*/
.radio-group {
display: flex;
flex-direction: column;
}
.radio-group.-inline {
flex-direction: row;
}
/**
* Breakpoint mixins
*/
/**
* Row
*/
.row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-left: calc(var(--grid--xs--gutter) / -2);
margin-right: calc(var(--grid--xs--gutter) / -2);
}
@media screen and (min-width: 576px) {
.row {
margin-left: calc(var(--grid--sm--gutter) / -2);
margin-right: calc(var(--grid--sm--gutter) / -2);
}
}
@media screen and (min-width: 768px) {
.row {
margin-left: calc(var(--grid--md--gutter) / -2);
margin-right: calc(var(--grid--md--gutter) / -2);
}
}
@media screen and (min-width: 992px) {
.row {
margin-left: calc(var(--grid--lg--gutter) / -2);
margin-right: calc(var(--grid--lg--gutter) / -2);
}
}
@media screen and (min-width: 1200px) {
.row {
margin-left: calc(var(--grid--xl--gutter) / -2);
margin-right: calc(var(--grid--xl--gutter) / -2);
}
}
@media screen and (min-width: 1400px) {
.row {
margin-left: calc(var(--grid--2xl--gutter) / -2);
margin-right: calc(var(--grid--2xl--gutter) / -2);
}
}
.row.-reverse {
flex-direction: row-reverse;
}
.row.-no-gutter {
margin-left: 0;
margin-right: 0;
}
.row.-no-gutter > .column {
padding-left: 0;
padding-right: 0;
}
.row.-no-collapse {
flex-flow: row nowrap;
}
.row.-start-xs {
justify-content: flex-start;
text-align: start;
}
.row.-center-xs {
justify-content: center;
text-align: center;
}
.row.-end-xs {
justify-content: flex-end;
text-align: end;
}
.row.-top-xs {
align-items: flex-start;
}
.row.-middle-xs {
align-items: center;
}
.row.-bottom-xs {
align-items: flex-end;
}
.row.-around-xs {
justify-content: space-around;
}
.row.-between-xs {
justify-content: space-between;
}
.row.-reverse-xs {
flex-direction: row-reverse;
}
@media screen and (min-width: 576px) {
.row.-start-sm {
justify-content: flex-start;
text-align: start;
}
.row.-center-sm {
justify-content: center;
text-align: center;
}
.row.-end-sm {
justify-content: flex-end;
text-align: end;
}
.row.-top-sm {
align-items: flex-start;
}
.row.-middle-sm {
align-items: center;
}
.row.-bottom-sm {
align-items: flex-end;
}
.row.-around-sm {
justify-content: space-around;
}
.row.-between-sm {
justify-content: space-between;
}
.row.-reverse-sm {
flex-direction: row-reverse;
}
}
@media screen and (min-width: 768px) {
.row.-start-md {
justify-content: flex-start;
text-align: start;
}
.row.-center-md {
justify-content: center;
text-align: center;
}
.row.-end-md {
justify-content: flex-end;
text-align: end;
}
.row.-top-md {
align-items: flex-start;
}
.row.-middle-md {
align-items: center;
}
.row.-bottom-md {
align-items: flex-end;
}
.row.-around-md {
justify-content: space-around;
}
.row.-between-md {
justify-content: space-between;
}
.row.-reverse-md {
flex-direction: row-reverse;
}
}
@media screen and (min-width: 992px) {
.row.-start-lg {
justify-content: flex-start;
text-align: start;
}
.row.-center-lg {
justify-content: center;
text-align: center;
}
.row.-end-lg {
justify-content: flex-end;
text-align: end;
}
.row.-top-lg {
align-items: flex-start;
}
.row.-middle-lg {
align-items: center;
}
.row.-bottom-lg {
align-items: flex-end;
}
.row.-around-lg {
justify-content: space-around;
}
.row.-between-lg {
justify-content: space-between;
}
.row.-reverse-lg {
flex-direction: row-reverse;
}
}
@media screen and (min-width: 1200px) {
.row.-start-xl {
justify-content: flex-start;
text-align: start;
}
.row.-center-xl {
justify-content: center;
text-align: center;
}
.row.-end-xl {
justify-content: flex-end;
text-align: end;
}
.row.-top-xl {
align-items: flex-start;
}
.row.-middle-xl {
align-items: center;
}
.row.-bottom-xl {
align-items: flex-end;
}
.row.-around-xl {
justify-content: space-around;
}
.row.-between-xl {
justify-content: space-between;
}
.row.-reverse-xl {
flex-direction: row-reverse;
}
}
@media screen and (min-width: 1400px) {
.row.-start-2xl {
justify-content: flex-start;
text-align: start;
}
.row.-center-2xl {
justify-content: center;
text-align: center;
}
.row.-end-2xl {
justify-content: flex-end;
text-align: end;
}
.row.-top-2xl {
align-items: flex-start;
}
.row.-middle-2xl {
align-items: center;
}
.row.-bottom-2xl {
align-items: flex-end;
}
.row.-around-2xl {
justify-content: space-around;
}
.row.-between-2xl {
justify-content: space-between;
}
.row.-reverse-2xl {
flex-direction: row-reverse;
}
}
.row.-start {
justify-content: flex-start;
text-align: start;
}
.row.-center {
justify-content: center;
text-align: center;
}
.row.-end {
justify-content: flex-end;
text-align: end;
}
.row.-top {
align-items: flex-start;
}
.row.-middle {
align-items: center;
}
.row.-bottom {
align-items: flex-end;
}
.row.-around {
justify-content: space-around;
}
.row.-between {
justify-content: space-between;
}
.row.-reverse {
flex-direction: row-reverse;
}
/**
* Breakpoint mixins
*/
/**
* Select
*/
.select-wrapper {
display: block;
position: relative;
}
.select-wrapper .select {
position: absolute;
z-index: var(--select--z-index, 2000);
word-wrap: break-word;
width: max-content;
top: 0;
left: 0;
text-align: left;
list-style: none;
line-height: var(--select-line-height);
display: block;
white-space: normal;
width: 100%;
min-width: var(--select--min-width, 240px);
max-width: var(--select--max-width, 90vw);
color: var(--select--color);
font-size: var(--select--font-size, var(--font-size));
box-shadow: var(--select--box-shadow, var(--select--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--select--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--select--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--select--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--select--box-shadow-color, var(--box-shadow-color)));
}
.select-wrapper .select:focus:hover {
outline-width: 0;
}
.select-wrapper .select[data-popup-placement^=top] {
transform-origin: center bottom;
}
.select-wrapper .select[data-popup-placement^=bottom] {
transform-origin: center top;
}
.select-wrapper .select[data-popup-placement^=right] {
transform-origin: left center;
}
.select-wrapper .select[data-popup-placement^=left] {
transform-origin: right center;
}
.select-wrapper .select > .arrow {
position: absolute;
}
.select-wrapper .select > .arrow,
.select-wrapper .select > .arrow::after {
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
position: absolute;
}
.select-wrapper .select > .arrow::after {
content: "";
}
.select-wrapper .select[data-popup-placement^=top] > .arrow {
border-bottom-width: 0;
}
.select-wrapper .select[data-popup-placement^=top] > .arrow::after {
border-bottom-width: 0;
}
.select-wrapper .select[data-popup-placement^=bottom] > .arrow {
border-top-width: 0;
}
.select-wrapper .select[data-popup-placement^=bottom] > .arrow::after {
border-top-width: 0;
}
.select-wrapper .select[data-popup-placement^=right] > .arrow {
border-left-width: 0;
}
.select-wrapper .select[data-popup-placement^=right] > .arrow::after {
border-left-width: 0;
}
.select-wrapper .select[data-popup-placement^=left] > .arrow {
border-right-width: 0;
}
.select-wrapper .select[data-popup-placement^=left] > .arrow::after {
border-right-width: 0;
}
.select-wrapper .select > .arrow {
width: var(--select--arrow--size, 6px);
height: var(--select--arrow--size, 6px);
}
.select-wrapper .select > .arrow, .select-wrapper .select > .arrow::after {
border-width: var(--select--arrow--size, 6px);
}
.select-wrapper .select[data-popup-placement^=top] > .arrow::after, .select-wrapper .select[data-popup-placement^=bottom] > .arrow::after {
margin-left: calc(var(--select--arrow--size, 6px) * -1);
}
.select-wrapper .select[data-popup-placement^=left] > .arrow::after, .select-wrapper .select[data-popup-placement^=right] > .arrow::after {
margin-top: calc(var(--select--arrow--size, 6px) * -1);
}
.select-wrapper .select[data-popup-placement^=top] > .arrow {
bottom: calc(var(--select--arrow--size, 6px) * -1);
}
.select-wrapper .select[data-popup-placement^=top] > .arrow::after {
bottom: 1px;
}
.select-wrapper .select[data-popup-placement^=bottom] > .arrow {
top: calc(var(--select--arrow--size, 6px) * -1);
}
.select-wrapper .select[data-popup-placement^=bottom] > .arrow::after {
top: 1px;
}
.select-wrapper .select[data-popup-placement^=left] > .arrow {
right: calc(var(--select--arrow--size, 6px) * -1);
}
.select-wrapper .select[data-popup-placement^=left] > .arrow::after {
right: 1px;
}
.select-wrapper .select[data-popup-placement^=right] > .arrow {
left: calc(var(--select--arrow--size, 6px) * -1);
}
.select-wrapper .select[data-popup-placement^=right] > .arrow::after {
left: 1px;
}
.select-wrapper .select > .select-header {
border-style: var(--select--header--border-style, var(--select--header--border-top-style, var(--select--border-top-style, var(--border-top-style))) var(--select--header--border-right-style, var(--select--border-right-style, var(--border-right-style))) var(--select--header--border-bottom-style, var(--select--border-bottom-style, var(--border-bottom-style))) var(--select--header--border-left-style, var(--select--border-left-style, var(--border-left-style))));
border-width: var(--select--header--border-width, var(--select--header--border-top-width, var(--select--border-top-width, var(--border-top-width))) var(--select--header--border-right-width, var(--select--border-right-width, var(--border-right-width))) var(--select--header--border-bottom-width, 0) var(--select--header--border-left-width, var(--select--border-left-width, var(--border-left-width))));
border-color: var(--select--header--border-color, var(--select--header--border-top-color, var(--select--border-top-color, var(--border-top-color))) var(--select--header--border-right-color, var(--select--border-right-color, var(--border-right-color))) var(--select--header--border-bottom-color, var(--select--border-bottom-color, var(--border-bottom-color))) var(--select--header--border-left-color, var(--select--border-left-color, var(--border-left-color))));
background-color: var(--select--header--background, var(--select--background));
padding: var(--select--header--padding, var(--select--header--padding-top, var(--select--padding-top, var(--padding-top))) var(--select--header--padding-right, var(--select--padding-right, var(--padding-right))) var(--select--header--padding-bottom, var(--select--padding-bottom, var(--padding-bottom))) var(--select--header--padding-left, var(--select--padding-left, var(--padding-left))));
}
.select-wrapper .select > .select-body {
overflow: auto;
border-style: var(--select--body--border-style, var(--select--body--border-top-style, var(--select--border-top-style, var(--border-top-style))) var(--select--body--border-right-style, var(--select--border-right-style, var(--border-right-style))) var(--select--body--border-bottom-style, var(--select--border-bottom-style, var(--border-bottom-style))) var(--select--body--border-left-style, var(--select--border-left-style, var(--border-left-style))));
border-width: var(--select--body--border-width, var(--select--body--border-top-width, var(--select--border-top-width, var(--border-top-width))) var(--select--body--border-right-width, var(--select--border-right-width, var(--border-right-width))) var(--select--body--border-bottom-width, var(--select--border-bottom-width, var(--border-bottom-width))) var(--select--body--border-left-width, var(--select--border-left-width, var(--border-left-width))));
border-color: var(--select--body--border-color, var(--select--body--border-top-color, var(--select--border-top-color, var(--border-top-color))) var(--select--body--border-right-color, var(--select--border-right-color, var(--border-right-color))) var(--select--body--border-bottom-color, var(--select--border-bottom-color, var(--border-bottom-color))) var(--select--body--border-left-color, var(--select--border-left-color, var(--border-left-color))));
background-color: var(--select--body--background, var(--select--background));
padding: var(--select--body--padding, var(--select--body--padding-top, var(--select--padding-top, var(--padding-top))) var(--select--body--padding-right, var(--select--padding-right, var(--padding-right))) var(--select--body--padding-bottom, var(--select--padding-bottom, var(--padding-bottom))) var(--select--body--padding-left, var(--select--padding-left, var(--padding-left))));
max-height: var(--select--max-height, 300px);
}
.select-wrapper .select > .select-body .select-divider {
background-color: var(--select--divider--border-color, var(--select--border-top, var(--border-top-color)));
}
.select-wrapper .select > .select-body .select-no-results {
text-align: center;
}
.select-wrapper .select > .select-footer {
border-style: var(--select--footer--border-style, var(--select--footer--border-top-style, var(--select--border-top-style, var(--border-top-style))) var(--select--footer--border-right-style, var(--select--border-right-style, var(--border-right-style))) var(--select--footer--border-bottom-style, var(--select--border-bottom-style, var(--border-bottom-style))) var(--select--footer--border-left-style, var(--select--border-left-style, var(--border-left-style))));
border-width: var(--select--footer--border-width, var(--select--footer--border-top-width, 0) var(--select--footer--border-right-width, var(--select--border-right-width, var(--border-right-width))) var(--select--footer--border-bottom-width, var(--select--border-bottom-width, var(--border-bottom-width))) var(--select--footer--border-left-width, var(--select--border-left-width, var(--border-left-width))));
border-color: var(--select--footer--border-color, var(--select--footer--border-top-color, var(--select--border-top-color, var(--border-top-color))) var(--select--footer--border-right-color, var(--select--border-right-color, var(--border-right-color))) var(--select--footer--border-bottom-color, var(--select--border-bottom-color, var(--border-bottom-color))) var(--select--footer--border-left-color, var(--select--border-left-color, var(--border-left-color))));
background-color: var(--select--footer--background, var(--select--background));
padding: var(--select--footer--padding, var(--select--footer--padding-top, var(--select--padding-top, var(--padding-top))) var(--select--footer--padding-right, var(--select--padding-right, var(--padding-right))) var(--select--footer--padding-bottom, var(--select--padding-bottom, var(--padding-bottom))) var(--select--footer--padding-left, var(--select--padding-left, var(--padding-left))));
}
.select-wrapper .select > div:first-of-type {
border-top-left-radius: var(--select--border-top-left-radius, var(--border-top-left-radius));
border-top-right-radius: var(--select--border-top-right-radius, var(--border-top-right-radius));
}
.select-wrapper .select > div:last-of-type {
border-bottom-left-radius: var(--select--border-bottom-left-radius, var(--border-bottom-left-radius));
border-bottom-right-radius: var(--select--border-bottom-right-radius, var(--border-bottom-right-radius));
}
.select-wrapper .select[data-popup-placement^=top] > .arrow {
border-top-color: var(--select--border-bottom-color, var(--border-bottom-color));
}
.select-wrapper .select[data-popup-placement^=top] > .arrow::after {
border-top-color: var(--select--background);
}
.select-wrapper .select[data-popup-placement^=right] > .arrow {
border-right-color: var(--select--border-left-color, var(--border-left-color));
}
.select-wrapper .select[data-popup-placement^=right] > .arrow::after {
border-right-color: var(--select--background);
}
.select-wrapper .select[data-popup-placement^=bottom] > .arrow {
border-bottom-color: var(--select--border-top-color, var(--border-top-color));
}
.select-wrapper .select[data-popup-placement^=bottom] > .arrow::after {
border-bottom-color: var(--select--background);
}
.select-wrapper .select[data-popup-placement^=left] > .arrow {
border-left-color: var(--select--border-right-color, var(--border-right-color));
}
.select-wrapper .select[data-popup-placement^=left] > .arrow::after {
border-left-color: var(--select--background);
}
.select-wrapper.-error > .input-wrapper .input {
border-color: var(--input--error--border-color, var(--color-danger));
}
.select-wrapper .input-wrapper .input-icon {
margin-right: var(--margin-left);
}
.select-wrapper .input-wrapper .input-suffix > .select-caret {
cursor: pointer;
mask-image: url('data:image/svg+xml; utf8, ');
-webkit-mask-image: url('data:image/svg+xml; utf8, ');
mask-position: center center;
-webkit-mask-position: center center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
background-color: var(--select--color);
height: var(--select--font-size, var(--font-size));
width: var(--select--font-size, var(--font-size));
mask-size: var(--select--font-size, var(--font-size)) var(--font-size);
margin-left: var(--select--caret--margin-left, var(--select--margin-left));
}
/**
* Color variants
*/
.select-wrapper.-light {
--select--background: var(--select--light--background, var(--color-white));
--select--border-top-color: var(
--select--light--border-top-color,
var(--color-light-shade-50)
);
--select--border-right-color: var(
--select--light--border-right-color,
var(--color-light-shade-50)
);
--select--border-bottom-color: var(
--select--light--border-bottom-color,
var(--color-light-shade-50)
);
--select--border-left-color: var(
--select--light--border-left-color,
var(--color-light-shade-50)
);
--select--color: var(--select--light--color, var(--contrast-text-color-white));
--select--option--hover--background: var(
--select--light--option--hover--background,
var(--color-gray-50)
);
--select--option--disabled--background: var(
--select--light--option--disabled--background,
transparent
);
--select--option--disabled--color: var(
--select--light--option--disabled--color,
var(--text-color-weaker)
);
--select--header--background: var(
--select--light--header--background,
var(--color-gray-50)
);
--select--footer--background: var(
--select--light--footer--background,
var(--color-gray-50)
);
}
.select-wrapper.-dark {
--select--background: var(--select--dark--background, var(--color-dark));
--select--border-top-color: var(
--select--dark--border-top-color,
var(--color-dark-tint-50)
);
--select--border-right-color: var(
--select--dark--border-right-color,
var(--color-dark-tint-50)
);
--select--border-bottom-color: var(
--select--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--select--border-left-color: var(
--select--dark--border-left-color,
var(--color-dark-tint-50)
);
--select--color: var(--select--dark--color, var(--contrast-text-color-dark));
--select--option--hover--background: var(
--select--dark--option--hover--background,
var(--color-dark-tint-50)
);
--select--option--disabled--background: var(
--select--dark--option--disabled--background,
transparent
);
--select--option--disabled--color: var(
--select--dark--option--disabled--color,
var(--text-color-weaker)
);
--select--header--background: var(
--select--dark--header--background,
var(--color-dark-tint-50)
);
--select--footer--background: var(
--select--dark--footer--background,
var(--color-dark-tint-50)
);
}
/**
* Size variants
*/
.select-wrapper.-sm {
--select--border-top-left-radius: var(
--select--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--select--border-top-right-radius: var(
--select--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--select--border-bottom-right-radius: var(
--select--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--select--border-bottom-left-radius: var(
--select--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--select--font-size: var(
--select--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--select--margin-top: var(
--select--sm--margin-top,
calc(calc(var(--margin-top) / 2) * var(--size-multiplier-sm))
);
--select--margin-right: var(
--select--sm--margin-right,
calc(calc(var(--margin-right) / 2) * var(--size-multiplier-sm))
);
--select--margin-bottom: var(
--select--sm--margin-bottom,
calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-sm))
);
--select--margin-left: var(
--select--sm--margin-left,
calc(calc(var(--margin-left) / 2) * var(--size-multiplier-sm))
);
--select--padding-top: var(
--select--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--select--padding-right: var(
--select--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--select--padding-bottom: var(
--select--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--select--padding-left: var(
--select--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
--select--option--padding-top: var(
--select--sm--option--padding-top,
calc(calc(var(--select--padding-top) / 2) * var(--size-multiplier-sm))
);
--select--option--padding-bottom: var(
--select--sm--option--padding-bottom,
calc(calc(var(--select--padding-bottom) / 2) * var(--size-multiplier-sm))
);
--select--header--padding-top: var(
--select--sm--header--padding-top,
calc(calc(var(--select--padding-top) * 3 / 4) * var(--size-multiplier-sm))
);
--select--header--padding-bottom: var(
--select--sm--header--padding-bottom,
calc(calc(var(--select--padding-bottom) * 3 / 4) * var(--size-multiplier-sm))
);
--select--body--padding-right: var(--select--sm--body--padding-right, 0);
--select--body--padding-left: var(--select--sm--body--padding-left, 0);
--select--footer--padding-top: var(
--select--sm--footer--padding-top,
calc(calc(var(--select--padding-top) * 3 / 4) * var(--size-multiplier-sm))
);
--select--footer--padding-bottom: var(
--select--sm--footer--padding-bottom,
calc(calc(var(--select--padding-bottom) * 3 / 4) * var(--size-multiplier-sm))
);
}
.select-wrapper.-md {
--select--border-top-left-radius: var(
--select--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--select--border-top-right-radius: var(
--select--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--select--border-bottom-right-radius: var(
--select--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--select--border-bottom-left-radius: var(
--select--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--select--font-size: var(
--select--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--select--margin-top: var(
--select--md--margin-top,
calc(calc(var(--margin-top) / 2) * var(--size-multiplier-md))
);
--select--margin-right: var(
--select--md--margin-right,
calc(calc(var(--margin-right) / 2) * var(--size-multiplier-md))
);
--select--margin-bottom: var(
--select--md--margin-bottom,
calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-md))
);
--select--margin-left: var(
--select--md--margin-left,
calc(calc(var(--margin-left) / 2) * var(--size-multiplier-md))
);
--select--padding-top: var(
--select--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--select--padding-right: var(
--select--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--select--padding-bottom: var(
--select--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--select--padding-left: var(
--select--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
--select--option--padding-top: var(
--select--md--option--padding-top,
calc(calc(var(--select--padding-top) / 2) * var(--size-multiplier-md))
);
--select--option--padding-bottom: var(
--select--md--option--padding-bottom,
calc(calc(var(--select--padding-bottom) / 2) * var(--size-multiplier-md))
);
--select--header--padding-top: var(
--select--md--header--padding-top,
calc(calc(var(--select--padding-top) * 3 / 4) * var(--size-multiplier-md))
);
--select--header--padding-bottom: var(
--select--md--header--padding-bottom,
calc(calc(var(--select--padding-bottom) * 3 / 4) * var(--size-multiplier-md))
);
--select--body--padding-right: var(--select--md--body--padding-right, 0);
--select--body--padding-left: var(--select--md--body--padding-left, 0);
--select--footer--padding-top: var(
--select--md--footer--padding-top,
calc(calc(var(--select--padding-top) * 3 / 4) * var(--size-multiplier-md))
);
--select--footer--padding-bottom: var(
--select--md--footer--padding-bottom,
calc(calc(var(--select--padding-bottom) * 3 / 4) * var(--size-multiplier-md))
);
}
.select-wrapper.-lg {
--select--border-top-left-radius: var(
--select--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--select--border-top-right-radius: var(
--select--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--select--border-bottom-right-radius: var(
--select--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--select--border-bottom-left-radius: var(
--select--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--select--font-size: var(
--select--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--select--margin-top: var(
--select--lg--margin-top,
calc(calc(var(--margin-top) / 2) * var(--size-multiplier-lg))
);
--select--margin-right: var(
--select--lg--margin-right,
calc(calc(var(--margin-right) / 2) * var(--size-multiplier-lg))
);
--select--margin-bottom: var(
--select--lg--margin-bottom,
calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-lg))
);
--select--margin-left: var(
--select--lg--margin-left,
calc(calc(var(--margin-left) / 2) * var(--size-multiplier-lg))
);
--select--padding-top: var(
--select--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--select--padding-right: var(
--select--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--select--padding-bottom: var(
--select--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--select--padding-left: var(
--select--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
--select--option--padding-top: var(
--select--lg--option--padding-top,
calc(calc(var(--select--padding-top) / 2) * var(--size-multiplier-lg))
);
--select--option--padding-bottom: var(
--select--lg--option--padding-bottom,
calc(calc(var(--select--padding-bottom) / 2) * var(--size-multiplier-lg))
);
--select--header--padding-top: var(
--select--lg--header--padding-top,
calc(calc(var(--select--padding-top) * 3 / 4) * var(--size-multiplier-lg))
);
--select--header--padding-bottom: var(
--select--lg--header--padding-bottom,
calc(calc(var(--select--padding-bottom) * 3 / 4) * var(--size-multiplier-lg))
);
--select--body--padding-right: var(--select--lg--body--padding-right, 0);
--select--body--padding-left: var(--select--lg--body--padding-left, 0);
--select--footer--padding-top: var(
--select--lg--footer--padding-top,
calc(calc(var(--select--padding-top) * 3 / 4) * var(--size-multiplier-lg))
);
--select--footer--padding-bottom: var(
--select--lg--footer--padding-bottom,
calc(calc(var(--select--padding-bottom) * 3 / 4) * var(--size-multiplier-lg))
);
}
/**
* Select option
*/
.select .select-option {
border-color: var(--select--option--border-color, var(--select--option--border-top-color, var(--select--border-top-color, var(--border-top-color))) var(--select--option--border-right-color, var(--select--border-right-color, var(--border-right-color))) var(--select--option--border-bottom-color, var(--select--border-bottom-color, var(--border-bottom-color))) var(--select--option--border-left-color, var(--select--border-left-color, var(--border-left-color))));
padding: var(--select--option--padding, var(--select--option--padding-top, var(--select--padding-top, var(--padding-top))) var(--select--option--padding-right, var(--select--padding-right, var(--padding-right))) var(--select--option--padding-bottom, var(--select--padding-bottom, var(--padding-bottom))) var(--select--option--padding-left, var(--select--padding-left, var(--padding-left))));
color: var(--select--option--color, var(--select--color));
background: var(--select--option--background, var(--select--background));
display: block;
width: 100%;
clear: both;
margin-bottom: 0;
border: 0;
cursor: pointer;
transition-property: var(--select--option--transition-property, background-color, border-color, color);
transition-timing-function: var(--select--option--transition-timing-function, var(--transition-timing-function));
transition-duration: var(--select--option--transition-duration, var(--transition-duration));
}
.select .select-option mark {
padding-left: 0;
padding-right: 0;
}
.select .select-option:not(.-disabled, .-plaintext):hover, .select .select-option:not(.-disabled, .-plaintext):focus {
outline: 0;
text-decoration: none;
color: var(--select--option--hover--color);
background: var(--select--option--hover--background);
}
.select .select-option.-disabled {
pointer-events: none;
cursor: not-allowed;
color: var(--select--option--disabled--color);
background: var(--select--option--disabled--background, var(--select--background));
}
.select .select-option.-active {
font-weight: bold;
color: var(--select--option--active--color, var(--select--color));
background: var(--select--option--active--background, var(--select--background));
}
/**
* Breakpoint mixins
*/
/**
* Sidebar
*/
.sidebar-wrapper {
position: relative;
min-height: 100%;
min-width: 0;
overflow: hidden;
z-index: var(--sidebar--z-index, 1030);
flex-grow: 0;
flex-shrink: 0;
width: var(--sidebar--width, 14rem);
}
.sidebar-wrapper .sidebar {
position: absolute;
height: 100%;
z-index: 1;
color: var(--sidebar--color);
background: var(--sidebar--background);
width: var(--sidebar--width, 14rem);
transition-property: var(--sidebar--transition-property, background-color, color, border-color, transform);
transition-duration: var(--sidebar--transition-duration, var(--transition-duration));
transition-timing-function: var(--sidebar--transition-timing-function, var(--transition-timing-function));
box-shadow: var(--sidebar--box-shadow, var(--sidebar--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--sidebar--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--sidebar--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--sidebar--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--sidebar--box-shadow-color, var(--box-shadow-color)));
border-width: var(--sidebar--border-width, var(--sidebar--border-top-width, var(--border-top-width)) var(--sidebar--border-right-width, var(--border-right-width)) var(--sidebar--border-bottom-width, var(--border-bottom-width)) var(--sidebar--border-left-width, var(--border-left-width)));
border-style: var(--sidebar--border-style, var(--sidebar--border-top-style, var(--border-top-style)) var(--sidebar--border-right-style, var(--border-right-style)) var(--sidebar--border-bottom-style, var(--border-bottom-style)) var(--sidebar--border-left-style, var(--border-left-style)));
border-color: var(--sidebar--border-color, var(--sidebar--border-top-color, var(--border-top-color)) var(--sidebar--border-right-color, var(--border-right-color)) var(--sidebar--border-bottom-color, var(--border-bottom-color)) var(--sidebar--border-left-color, var(--border-left-color)));
border-radius: var(--sidebar--border-radius, var(--sidebar--border-top-left-radius, var(--border-top-left-radius)) var(--sidebar--border-top-right-radius, var(--border-top-right-radius)) var(--sidebar--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--sidebar--border-bottom-left-radius, var(--border-bottom-left-radius)));
padding: var(--sidebar--padding, var(--sidebar--padding-top, var(--padding-top)) var(--sidebar--padding-right, var(--padding-right)) var(--sidebar--padding-bottom, var(--padding-bottom)) var(--sidebar--padding-left, var(--padding-left)));
}
.sidebar-wrapper .sidebar .sidebar-content {
height: 100%;
width: 100%;
overflow: auto;
display: flex;
flex-direction: column;
padding-top: 0.1px;
margin-top: -0.1px;
}
.sidebar-wrapper .sidebar .sidebar-content .nav.-vertical .nav-item {
width: 100%;
}
.sidebar-wrapper .sidebar .sidebar-content .collapsible {
width: 100%;
}
.sidebar-wrapper.-collapse-relative.-placement-left .sidebar {
right: 0;
}
.sidebar-wrapper.-collapse-relative.-placement-right .sidebar {
left: 0;
}
.sidebar-wrapper.-collapse-absolute.-placement-left .sidebar, .sidebar-wrapper.-collapse-fixed.-placement-left .sidebar {
left: 0;
}
.sidebar-wrapper.-collapse-absolute.-placement-right .sidebar, .sidebar-wrapper.-collapse-fixed.-placement-right .sidebar {
right: 0;
}
.sidebar-wrapper .sidebar-overlay {
width: 100%;
height: 100%;
z-index: 0;
background: var(--sidebar--overlay--background, rgba(0, 0, 0, 0.5));
border-top-left-radius: var(--sidebar--border-top-left-radius, var(--border-top-left-radius));
border-bottom-left-radius: var(--sidebar--border-bottom-left-radius, var(--border-bottom-left-radius));
}
@media screen and (max-width: 575.99px) {
.sidebar-wrapper.-collapse-xs.-collapse-fixed {
position: fixed;
top: 0;
}
.sidebar-wrapper.-collapse-xs.-collapse-absolute {
position: absolute;
}
.sidebar-wrapper.-collapse-xs.-collapse-fixed, .sidebar-wrapper.-collapse-xs.-collapse-absolute {
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 767.99px) {
.sidebar-wrapper.-collapse-sm.-collapse-fixed {
position: fixed;
top: 0;
}
.sidebar-wrapper.-collapse-sm.-collapse-absolute {
position: absolute;
}
.sidebar-wrapper.-collapse-sm.-collapse-fixed, .sidebar-wrapper.-collapse-sm.-collapse-absolute {
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 991.99px) {
.sidebar-wrapper.-collapse-md.-collapse-fixed {
position: fixed;
top: 0;
}
.sidebar-wrapper.-collapse-md.-collapse-absolute {
position: absolute;
}
.sidebar-wrapper.-collapse-md.-collapse-fixed, .sidebar-wrapper.-collapse-md.-collapse-absolute {
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 1199.99px) {
.sidebar-wrapper.-collapse-lg.-collapse-fixed {
position: fixed;
top: 0;
}
.sidebar-wrapper.-collapse-lg.-collapse-absolute {
position: absolute;
}
.sidebar-wrapper.-collapse-lg.-collapse-fixed, .sidebar-wrapper.-collapse-lg.-collapse-absolute {
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 1399.99px) {
.sidebar-wrapper.-collapse-xl.-collapse-fixed {
position: fixed;
top: 0;
}
.sidebar-wrapper.-collapse-xl.-collapse-absolute {
position: absolute;
}
.sidebar-wrapper.-collapse-xl.-collapse-fixed, .sidebar-wrapper.-collapse-xl.-collapse-absolute {
width: 100%;
height: 100%;
}
}
.sidebar-wrapper.-collapse-2xl.-collapse-fixed {
position: fixed;
top: 0;
}
.sidebar-wrapper.-collapse-2xl.-collapse-absolute {
position: absolute;
}
.sidebar-wrapper.-collapse-2xl.-collapse-fixed, .sidebar-wrapper.-collapse-2xl.-collapse-absolute {
width: 100%;
height: 100%;
}
.sidebar-wrapper.-collapse-true.-collapse-fixed {
position: fixed;
top: 0;
}
.sidebar-wrapper.-collapse-true.-collapse-absolute {
position: absolute;
}
.sidebar-wrapper.-collapse-true.-collapse-fixed, .sidebar-wrapper.-collapse-true.-collapse-absolute {
width: 100%;
height: 100%;
}
.sidebar-wrapper.sidebar-wrapper-transition-enter-to, .sidebar-wrapper.sidebar-wrapper-transition-leave {
width: var(--sidebar--width, 14rem);
}
/**
* Sidebar animation
*/
.sidebar-wrapper-transition-enter-active,
.sidebar-wrapper-transition-leave-active {
transition: width var(--sidebar--transition-duration, var(--transition-duration)) var(--sidebar--transition-timing-function, var(--transition-timing-function));
}
.sidebar-wrapper-none-transition-enter-active,
.sidebar-wrapper-none-transition-leave-active {
transition: none var(--sidebar--transition-duration, var(--transition-duration)) var(--sidebar--transition-timing-function, var(--transition-timing-function));
}
.sidebar-wrapper-transition-enter-from,
.sidebar-wrapper-transition-leave-to {
width: 0;
}
.sidebar-transition-enter-active,
.sidebar-transition-leave-active {
transform-origin: left;
}
.sidebar-transition-enter-from,
.sidebar-transition-leave-to {
transform: translateX(-100%);
}
.sidebar-transition-enter-to,
.sidebar-transition-leave-from {
transform: translateX(0);
}
.sidebar-wrapper.-placement-right .sidebar-transition-enter-active,
.sidebar-wrapper.-placement-right .sidebar-transition-leave-active {
transform-origin: right;
}
.sidebar-wrapper.-placement-right .sidebar-transition-enter-from,
.sidebar-wrapper.-placement-right .sidebar-transition-leave-to {
transform: translateX(100%);
}
.sidebar-overlay-transition-enter-active,
.sidebar-overlay-transition-leave-active {
transition: opacity var(--sidebar--transition-duration, var(--transition-duration)) var(--sidebar--transition-timing-function, var(--transition-timing-function));
}
.sidebar-overlay-transition-enter-from,
.sidebar-overlay-transition-leave-to,
.sidebar-overlay-transition-leave-active {
opacity: 0;
}
/**
* Color variants
*/
.sidebar-wrapper.-light {
--sidebar--background: var(--sidebar--light--background, var(--color-light));
--sidebar--border-top-color: var(
--sidebar--light--border-top-color,
var(--color-light-shade-50)
);
--sidebar--border-right-color: var(
--sidebar--light--border-right-color,
var(--color-light-shade-50)
);
--sidebar--border-bottom-color: var(
--sidebar--light--border-bottom-color,
var(--color-light-shade-50)
);
--sidebar--border-left-color: var(
--sidebar--light--border-left-color,
var(--color-light-shade-50)
);
--sidebar--color: var(--sidebar--light--color, var(--contrast-text-color-light));
--sidebar--item--color: var(
--sidebar--light--item--color,
var(--contrast-text-color-light)
);
--sidebar--item--hover--color: var(
--sidebar--light--item--hover--color,
var(--contrast-text-color-light)
);
--sidebar--item--background: var(--sidebar--light--item--background, var(--color-light));
--sidebar--item--hover--background: var(
--sidebar--light--item--hover--background,
var(--color-light-shade-50)
);
}
.sidebar-wrapper.-dark {
--sidebar--background: var(--sidebar--dark--background, var(--color-dark));
--sidebar--border-top-color: var(
--sidebar--dark--border-top-color,
var(--color-dark-tint-50)
);
--sidebar--border-right-color: var(
--sidebar--dark--border-right-color,
var(--color-dark-tint-50)
);
--sidebar--border-bottom-color: var(
--sidebar--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--sidebar--border-left-color: var(
--sidebar--dark--border-left-color,
var(--color-dark-tint-50)
);
--sidebar--color: var(--sidebar--dark--color, var(--contrast-text-color-dark));
--sidebar--item--color: var(--sidebar--dark--item--color, var(--contrast-text-color-dark));
--sidebar--item--hover--color: var(
--sidebar--dark--item--hover--color,
var(--contrast-text-color-dark)
);
--sidebar--item--background: var(--sidebar--dark--item--background, var(--color-dark));
--sidebar--item--hover--background: var(
--sidebar--dark--item--hover--background,
var(--color-dark-tint-50)
);
}
/**
* Size variants
*/
.sidebar-wrapper.-sm {
--sidebar--border-top-left-radius: var(
--sidebar--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--sidebar--border-top-right-radius: var(
--sidebar--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--sidebar--border-bottom-right-radius: var(
--sidebar--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--sidebar--border-bottom-left-radius: var(
--sidebar--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--sidebar--font-size: var(
--sidebar--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--sidebar--padding-top: var(
--sidebar--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--sidebar--padding-right: var(
--sidebar--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--sidebar--padding-bottom: var(
--sidebar--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--sidebar--padding-left: var(
--sidebar--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
--sidebar--width: var(--sidebar--sm--width, calc(14rem * var(--size-multiplier-sm)));
--sidebar--item--padding-top: var(
--sidebar--sm--item--padding-top,
calc(calc(var(--padding-top) / 2) * var(--size-multiplier-sm))
);
--sidebar--item--padding-right: var(
--sidebar--sm--item--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--sidebar--item--padding-bottom: var(
--sidebar--sm--item--padding-bottom,
calc(calc(var(--padding-bottom) / 2) * var(--size-multiplier-sm))
);
--sidebar--item--padding-left: var(
--sidebar--sm--item--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
}
.sidebar-wrapper.-md {
--sidebar--border-top-left-radius: var(
--sidebar--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--sidebar--border-top-right-radius: var(
--sidebar--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--sidebar--border-bottom-right-radius: var(
--sidebar--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--sidebar--border-bottom-left-radius: var(
--sidebar--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--sidebar--font-size: var(
--sidebar--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--sidebar--padding-top: var(
--sidebar--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--sidebar--padding-right: var(
--sidebar--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--sidebar--padding-bottom: var(
--sidebar--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--sidebar--padding-left: var(
--sidebar--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
--sidebar--width: var(--sidebar--md--width, calc(14rem * var(--size-multiplier-md)));
--sidebar--item--padding-top: var(
--sidebar--md--item--padding-top,
calc(calc(var(--padding-top) / 2) * var(--size-multiplier-md))
);
--sidebar--item--padding-right: var(
--sidebar--md--item--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--sidebar--item--padding-bottom: var(
--sidebar--md--item--padding-bottom,
calc(calc(var(--padding-bottom) / 2) * var(--size-multiplier-md))
);
--sidebar--item--padding-left: var(
--sidebar--md--item--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
}
.sidebar-wrapper.-lg {
--sidebar--border-top-left-radius: var(
--sidebar--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--sidebar--border-top-right-radius: var(
--sidebar--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--sidebar--border-bottom-right-radius: var(
--sidebar--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--sidebar--border-bottom-left-radius: var(
--sidebar--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--sidebar--font-size: var(
--sidebar--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--sidebar--padding-top: var(
--sidebar--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--sidebar--padding-right: var(
--sidebar--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--sidebar--padding-bottom: var(
--sidebar--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--sidebar--padding-left: var(
--sidebar--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
--sidebar--width: var(--sidebar--lg--width, calc(14rem * var(--size-multiplier-lg)));
--sidebar--item--padding-top: var(
--sidebar--lg--item--padding-top,
calc(calc(var(--padding-top) / 2) * var(--size-multiplier-lg))
);
--sidebar--item--padding-right: var(
--sidebar--lg--item--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--sidebar--item--padding-bottom: var(
--sidebar--lg--item--padding-bottom,
calc(calc(var(--padding-bottom) / 2) * var(--size-multiplier-lg))
);
--sidebar--item--padding-left: var(
--sidebar--lg--item--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
}
/**
* Breakpoint mixins
*/
/**
* Table
*/
.table-wrapper {
display: block;
position: relative;
}
@media screen and (max-width: 575.99px) {
.table-wrapper.-responsive-xs {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-wrapper.-responsive-xs .table.-border {
border: none;
}
}
@media screen and (max-width: 767.99px) {
.table-wrapper.-responsive-sm {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-wrapper.-responsive-sm .table.-border {
border: none;
}
}
@media screen and (max-width: 991.99px) {
.table-wrapper.-responsive-md {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-wrapper.-responsive-md .table.-border {
border: none;
}
}
@media screen and (max-width: 1199.99px) {
.table-wrapper.-responsive-lg {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-wrapper.-responsive-lg .table.-border {
border: none;
}
}
@media screen and (max-width: 1399.99px) {
.table-wrapper.-responsive-xl {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-wrapper.-responsive-xl .table.-border {
border: none;
}
}
.table-wrapper.-responsive-2xl {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-wrapper.-responsive-2xl .table.-border {
border: none;
}
.table-wrapper .table {
width: 100%;
max-width: 100%;
margin-bottom: var(--table--margin-bottom, var(--margin-bottom));
border-top-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
color: var(--table--color);
}
.table-wrapper .table th,
.table-wrapper .table td {
padding: var(--table--padding, var(--table--padding-top, var(--padding-top)) var(--table--padding-right, var(--padding-right)) var(--table--padding-bottom, var(--padding-bottom)) var(--table--padding-left, var(--padding-left)));
vertical-align: top;
border-style: var(--table--border-style, var(--table--border-top-style, var(--border-top-style)) var(--table--border-right-style, var(--border-right-style)) var(--table--border-bottom-style, var(--border-bottom-style)) var(--table--border-left-style, var(--border-left-style)));
border-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
border-width: var(--table--border-width, var(--table--border-top-width, 0) var(--table--border-right-width, 0) var(--table--border-bottom-width, var(--border-bottom-width)) var(--table--border-left-width, 0));
background-color: var(--table--background);
transition-duration: var(--table--transition-duration, var(--transition-duration));
transition-timing-function: var(--table--transition-timing-function, var(--transition-timing-function));
transition-property: var(--table--transition-property, color, background-color, border);
}
.table-wrapper .table thead th {
vertical-align: bottom;
border-bottom-width: var(--table--thead--th--border-bottom-width, var(--table--border-bottom-width, var(--border-bottom-width)));
}
.table-wrapper .table tbody + tbody {
border-top-style: var(--table--tbody--adjacent--border-top-style, solid);
border-top-width: var(--table--tbody--adjacent--border-top-width, var(--table--border-top-width, var(--border-top-width)));
border-top-color: var(--table--tbody--adjacent--border-top-color, transparent);
}
.table-wrapper .table th,
.table-wrapper .table td,
.table-wrapper .table tbody + tbody {
border-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
}
.table-wrapper.-condensed .table th,
.table-wrapper.-condensed .table td {
padding: var(--table--condensed--padding, var(--table--condensed--padding-top, calc(var(--table--padding-top, var(--padding-top)) * 0.5)) var(--table--condensed--padding-right, calc(var(--table--padding-right, var(--padding-right)) * 0.5)) var(--table--condensed--padding-bottom, calc(var(--table--padding-bottom, var(--padding-bottom)) * 0.5)) var(--table--condensed--padding-left, calc(var(--table--padding-left, var(--padding-left)) * 0.5)));
}
.table-wrapper.-border .table {
border-style: var(--table--border-style, var(--table--border-top-style, var(--border-top-style)) var(--table--border-right-style, var(--border-right-style)) var(--table--border-bottom-style, var(--border-bottom-style)) var(--table--border-left-style, var(--border-left-style)));
border-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
border-width: var(--table--border-width, var(--table--border-top-width, var(--border-top-width)) var(--table--border-right-width, var(--border-right-width)) var(--table--border-bottom-width, var(--border-bottom-width)) var(--table--border-left-width, var(--border-left-width)));
}
.table-wrapper.-border .table th,
.table-wrapper.-border .table td {
border-style: var(--table--border-style, var(--table--border-top-style, var(--border-top-style)) var(--table--border-right-style, var(--border-right-style)) var(--table--border-bottom-style, var(--border-bottom-style)) var(--table--border-left-style, var(--border-left-style)));
border-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
border-width: var(--table--border-width, var(--table--border-top-width, var(--border-top-width)) var(--table--border-right-width, var(--border-right-width)) var(--table--border-bottom-width, var(--border-bottom-width)) var(--table--border-left-width, var(--border-left-width)));
}
.table-wrapper.-nowrap .table th,
.table-wrapper.-nowrap .table td {
white-space: nowrap;
}
.table-wrapper.-striped .table > tr:nth-of-type(odd) th,
.table-wrapper.-striped .table > tr:nth-of-type(odd) td,
.table-wrapper.-striped .table tbody > tr:nth-of-type(odd) th,
.table-wrapper.-striped .table tbody > tr:nth-of-type(odd) td {
background: var(--table--striped--background);
}
.table-wrapper.-hover .table tbody tr th,
.table-wrapper.-hover .table tbody tr td {
transition-property: var(--table--transition-property, color, background-color, border);
transition-duration: var(--table--transition-duration, var(--transition-duration));
transition-timing-function: var(--table--transition-timing-function, var(--transition-timing-function));
}
.table-wrapper.-hover .table tbody tr:hover th,
.table-wrapper.-hover .table tbody tr:hover td {
background: var(--table--hover--background);
}
/**
* Color variants
*/
.table-wrapper.-primary {
--table--background: var(--table--primary--background, var(--color-primary));
--table--hover--background: var(
--table--primary--hover--background,
var(--color-primary-shade-100)
);
--table--striped--background: var(
--table--primary--striped--background,
var(--color-primary-shade-50)
);
--table--border-color: var(--table--primary--border-color, var(--color-primary-shade-50));
--table--color: var(--table--primary--color, var(--contrast-text-color-primary));
}
.table-wrapper.-secondary {
--table--background: var(--table--secondary--background, var(--color-secondary));
--table--hover--background: var(
--table--secondary--hover--background,
var(--color-secondary-shade-100)
);
--table--striped--background: var(
--table--secondary--striped--background,
var(--color-secondary-shade-50)
);
--table--border-color: var(
--table--secondary--border-color,
var(--color-secondary-shade-50)
);
--table--color: var(--table--secondary--color, var(--contrast-text-color-secondary));
}
.table-wrapper.-light {
--table--background: var(--table--light--background, var(--color-white));
--table--hover--background: var(--table--light--hover--background, var(--color-gray-100));
--table--striped--background: var(
--table--light--striped--background,
var(--color-gray-50)
);
--table--border-color: var(--table--light--border-color, var(--color-gray-50));
--table--color: var(--table--light--color, var(--contrast-text-color-light));
}
.table-wrapper.-dark {
--table--background: var(--table--dark--background, var(--color-dark));
--table--hover--background: var(
--table--dark--hover--background,
var(--color-dark-tint-100)
);
--table--striped--background: var(
--table--dark--striped--background,
var(--color-dark-tint-50)
);
--table--border-color: var(--table--dark--border-color, var(--color-dark-tint-50));
--table--color: var(--table--dark--color, var(--contrast-text-color-dark));
}
.table-wrapper.-info {
--table--background: var(--table--info--background, var(--color-info));
--table--hover--background: var(
--table--hover--info--background,
var(--color-info-shade-100)
);
--table--striped--background: var(
--table--info--striped--background,
var(--color-info-shade-50)
);
--table--border-color: var(--table--info--border-color, var(--color-info-shade-50));
--table--color: var(--table--info--color, var(--contrast-text-color-info));
}
.table-wrapper.-success {
--table--background: var(--table--success--background, var(--color-success));
--table--hover--background: var(
--table--success--hover--background,
var(--color-success-shade-100)
);
--table--striped--background: var(
--table--success--striped--background,
var(--color-success-shade-50)
);
--table--border-color: var(--table--success--border-color, var(--color-success-shade-50));
--table--color: var(--table--success--color, var(--contrast-text-color-success));
}
.table-wrapper.-warning {
--table--background: var(--table--warning--background, var(--color-warning));
--table--hover--background: var(
--table--warning--hover--background,
var(--color-warning-shade-100)
);
--table--striped--background: var(
--table--warning--striped--background,
var(--color-warning-shade-50)
);
--table--border-color: var(--table--warning--border-color, var(--color-warning-shade-50));
--table--color: var(--table--warning--color, var(--contrast-text-color-warning));
}
.table-wrapper.-danger {
--table--background: var(--table--danger--background, var(--color-danger));
--table--hover--background: var(
--table--danger--hover--background,
var(--color-danger-shade-100)
);
--table--striped--background: var(
--table--danger--striped--background,
var(--color-danger-shade-50)
);
--table--border-color: var(--table--danger--border-color, var(--color-danger-shade-50));
--table--color: var(--table--danger--color, var(--contrast-text-color-danger));
}
/**
* Tabs
*/
.tabs {
position: relative;
display: block;
}
.tabs .tabs-header {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
align-items: center;
border-color: var(--tabs--header--border-color, var(--tabs--header--border-top-color, var(--tabs--border-top-color, var(--border-top-color))) var(--tabs--header--border-right-color, var(--tabs--border-right-color, var(--border-right-color))) var(--tabs--header--border-bottom-color, var(--tabs--border-bottom-color, var(--border-bottom-color))) var(--tabs--header--border-left-color, var(--tabs--border-left-color, var(--border-left-color))));
border-style: var(--tabs--header--border-style, var(--tabs--header--border-top-style, var(--tabs--border-top-style, var(--border-top-style))) var(--tabs--header--border-right-style, var(--tabs--border-right-style, var(--border-right-style))) var(--tabs--header--border-bottom-style, var(--tabs--border-bottom-style, var(--border-bottom-style))) var(--tabs--header--border-left-style, var(--tabs--border-left-style, var(--border-left-style))));
border-width: var(--tabs--header--border-width, var(--tabs--header--border-top-width, var(--tabs--border-top-width, var(--border-top-width))) var(--tabs--header--border-right-width, var(--tabs--border-right-width, var(--border-right-width))) var(--tabs--header--border-bottom-width, var(--tabs--border-bottom-width, var(--border-bottom-width))) var(--tabs--header--border-left-width, var(--tabs--border-left-width, var(--border-left-width))));
font-size: var(--tabs--header--font-size, var(--tabs--font-size, var(--font-size)));
border-radius: var(--tabs--header--border-radius, var(--tabs--border-radius, var(--tabs--header--border-top-left-radius, var(--tabs--border-top-left-radius, var(--border-top-left-radius))) var(--tabs--header--border-top-right-radius, var(--tabs--border-top-right-radius, var(--border-top-right-radius))) var(--tabs--header--border-bottom-right-radius, var(--tabs--border-bottom-right-radius, var(--border-bottom-right-radius))) var(--tabs--header--border-bottom-left-radius, var(--tabs--border-bottom-left-radius, var(--border-bottom-left-radius)))));
margin-bottom: var(--tabs--header--margin-bottom, var(--tabs--margin-bottom, var(--margin-bottom)));
overflow: auto;
color: var(--tabs--header--color, var(--tabs--color));
background: var(--tabs--header--background, var(--tabs--background));
}
.tabs.-stretch .tabs-header .tab-title {
flex-grow: 1;
}
/**
* Color variants
*/
.tabs.-light {
--tabs--background: var(--tabs--light--background, var(--color-white));
--tabs--border-top-color: var(--tabs--light--border-top-color, var(--color-light-shade-50));
--tabs--border-right-color: var(
--tabs--light--border-right-color,
var(--color-light-shade-50)
);
--tabs--border-bottom-color: var(
--tabs--light--border-bottom-color,
var(--color-light-shade-50)
);
--tabs--border-left-color: var(
--tabs--light--border-left-color,
var(--color-light-shade-50)
);
--tabs--color: var(--tabs--light--color, var(--contrast-text-color-white));
--tabs--title--background: var(--tabs--light--title--background, var(--color-white));
--tabs--title--active--background: var(
--tabs--light--title--active--background,
var(--color-gray-50)
);
--tabs--title--hover--background: var(
--tabs--hover--light--title--background,
var(--color-gray-50)
);
}
.tabs.-dark {
--tabs--background: var(--tabs--dark--background, var(--color-dark));
--tabs--border-top-color: var(--tabs--dark--border-top-color, var(--color-dark-tint-50));
--tabs--border-right-color: var(
--tabs--dark--border-right-color,
var(--color-dark-tint-50)
);
--tabs--border-bottom-color: var(
--tabs--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--tabs--border-left-color: var(--tabs--dark--border-left-color, var(--color-dark-tint-50));
--tabs--color: var(--tabs--dark--color, var(--contrast-text-color-dark));
--tabs--title--background: var(--tabs--dark--title--background, var(--color-dark));
--tabs--title--active--background: var(
--tabs--dark--title--active--background,
var(--color-dark-tint-50)
);
--tabs--title--hover--background: var(
--tabs--dark--title--hover--background,
var(--color-dark-tint-50)
);
}
/**
* Size variants
*/
.tabs.-sm {
--tabs--border-top-left-radius: var(
--tabs--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--tabs--border-top-right-radius: var(
--tabs--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--tabs--border-bottom-right-radius: var(
--tabs--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--tabs--border-bottom-left-radius: var(
--tabs--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--tabs--font-size: var(
--tabs--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--tabs--padding-top: var(
--tabs--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--tabs--padding-right: var(
--tabs--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--tabs--padding-bottom: var(
--tabs--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--tabs--padding-left: var(
--tabs--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
}
.tabs.-md {
--tabs--border-top-left-radius: var(
--tabs--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--tabs--border-top-right-radius: var(
--tabs--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--tabs--border-bottom-right-radius: var(
--tabs--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--tabs--border-bottom-left-radius: var(
--tabs--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--tabs--font-size: var(
--tabs--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--tabs--padding-top: var(
--tabs--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--tabs--padding-right: var(
--tabs--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--tabs--padding-bottom: var(
--tabs--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--tabs--padding-left: var(
--tabs--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
}
.tabs.-lg {
--tabs--border-top-left-radius: var(
--tabs--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--tabs--border-top-right-radius: var(
--tabs--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--tabs--border-bottom-right-radius: var(
--tabs--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--tabs--border-bottom-left-radius: var(
--tabs--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--tabs--font-size: var(
--tabs--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--tabs--padding-top: var(
--tabs--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--tabs--padding-right: var(
--tabs--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--tabs--padding-bottom: var(
--tabs--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--tabs--padding-left: var(
--tabs--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
}
/**
* Tab
*/
.tabs .tab {
position: relative;
display: block;
transition-property: var(--tabs--tab--transition-property, var(--tabs--transition-property, background-color, border-color, color));
transition-duration: var(--tabs--tab--transition-duration, var(--tabs--transition-duration, var(--transition-duration)));
transition-timing-function: var(--tabs--tab--transition-timing-function, var(--tabs--transition-timing-function, var(--transition-timing-function)));
color: var(--tabs--tab--color, var(--tabs--color));
background: var(--tabs--tab--background, var(--tabs--background));
border-color: var(--tabs--tab--border-color, var(--tabs--tab--border-top-color, var(--tabs--border-top-color, var(--border-top-color))) var(--tabs--tab--border-right-color, var(--tabs--border-right-color, var(--border-right-color))) var(--tabs--tab--border-bottom-color, var(--tabs--border-bottom-color, var(--border-bottom-color))) var(--tabs--tab--border-left-color, var(--tabs--border-left-color, var(--border-left-color))));
border-style: var(--tabs--tab--border-style, var(--tabs--tab--border-top-style, var(--tabs--border-top-style, var(--border-top-style))) var(--tabs--tab--border-right-style, var(--tabs--border-right-style, var(--border-right-style))) var(--tabs--tab--border-bottom-style, var(--tabs--border-bottom-style, var(--border-bottom-style))) var(--tabs--tab--border-left-style, var(--tabs--border-left-style, var(--border-left-style))));
border-width: var(--tabs--tab--border-width, var(--tabs--tab--border-top-width, var(--tabs--border-top-width, var(--border-top-width))) var(--tabs--tab--border-right-width, var(--tabs--border-right-width, var(--border-right-width))) var(--tabs--tab--border-bottom-width, var(--tabs--border-bottom-width, var(--border-bottom-width))) var(--tabs--tab--border-left-width, var(--tabs--border-left-width, var(--border-left-width))));
border-radius: var(--tabs--tab--border-radius, var(--tabs--border-radius, var(--tabs--tab--border-top-left-radius, var(--tabs--border-top-left-radius, var(--border-top-left-radius))) var(--tabs--tab--border-top-right-radius, var(--tabs--border-top-right-radius, var(--border-top-right-radius))) var(--tabs--tab--border-bottom-right-radius, var(--tabs--border-bottom-right-radius, var(--border-bottom-right-radius))) var(--tabs--tab--border-bottom-left-radius, var(--tabs--border-bottom-left-radius, var(--border-bottom-left-radius)))));
}
.tabs .tab > .tab-body {
display: block;
position: relative;
font-size: var(--tabs--tab--font-size, var(--tabs--font-size, var(--font-size)));
padding: var(--tabs--tab--padding, var(--tabs--tab--padding-top, var(--tabs--padding-top, var(--padding-top))) var(--tabs--tab--padding-right, var(--tabs--padding-right, var(--padding-right))) var(--tabs--tab--padding-bottom, var(--tabs--padding-bottom, var(--padding-bottom))) var(--tabs--tab--padding-left, var(--tabs--padding-left, var(--padding-left))));
}
/**
* Tab Title
*/
.tabs .tab-title {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-style: var(--tabs--title--border-style, var(--tabs--title--border-top-style, var(--tabs--border-top-style, var(--border-top-style))) var(--tabs--title--border-right-style, var(--tabs--border-right-style, var(--border-right-style))) var(--tabs--title--border-bottom-style, var(--tabs--border-bottom-style, var(--border-bottom-style))) var(--tabs--title--border-left-style, var(--tabs--border-left-style, var(--border-left-style))));
border-width: var(--tabs--title--border-width, var(--tabs--title--border-top-width, 0) var(--tabs--title--border-right-width, var(--tabs--border-right-width, var(--border-right-width))) var(--tabs--title--border-bottom-width, 0) var(--tabs--title--border-left-width, 0));
border-color: var(--tabs--title--border-color, var(--tabs--title--border-top-color, var(--tabs--border-top-color, var(--border-top-color))) var(--tabs--title--border-right-color, var(--tabs--border-right-color, var(--border-right-color))) var(--tabs--title--border-bottom-color, var(--tabs--border-bottom-color, var(--border-bottom-color))) var(--tabs--title--border-left-color, var(--tabs--border-left-color, var(--border-left-color))));
padding: var(--tabs--title--padding, var(--tabs--title--padding-top, var(--tabs--padding-top, var(--padding-top))) var(--tabs--title--padding-right, var(--tabs--padding-right, var(--padding-right))) var(--tabs--title--padding-bottom, var(--tabs--padding-bottom, var(--padding-bottom))) var(--tabs--title--padding-left, var(--tabs--padding-left, var(--padding-left))));
font-size: var(--tabs--title--font-size, var(--tabs--font-size, var(--font-size)));
transition-property: var(--tabs--title--transition-property, var(--tabs--transition-property, background-color, border-color, color));
transition-duration: var(--tabs--title--transition-duration, var(--tabs--transition-duration, var(--transition-duration)));
transition-timing-function: var(--tabs--title--transition-timing-function, var(--tabs--transition-timing-function, var(--transition-timing-function)));
color: var(--tabs--title--color, var(--tabs--color));
background: var(--tabs--title--background, var(--tabs--background));
}
.tabs .tab-title.-active {
color: var(--tabs--title--active--color, var(--tabs--title--color, var(--tabs--color)));
background: var(--tabs--title--active--background, var(--tabs--title--background, var(--tabs--background)));
border-color: var(--tabs--title--border-color, var(--tabs--title--active--border-top-color, var(--tabs--title--border-top-color, var(--tabs--border-top-color, var(--border-top-color)))) var(--tabs--title--active--border-right-color, var(--tabs--title--border-right-color, var(--tabs--border-right-color, var(--border-right-color)))) var(--tabs--title--active--border-bottom-color, var(--tabs--title--border-bottom-color, var(--tabs--border-bottom-color, var(--border-bottom-color)))) var(--tabs--title--active--border-left-color, var(--tabs--title--border-left-color, var(--tabs--border-left-color, var(--border-left-color)))));
font-weight: var(--tabs--title--active--font-weight, var(--font-weight-semibold));
}
.tabs .tab-title:hover, .tabs .tab-title:focus {
background: var(--tabs--title--hover--background, var(--tabs--title--background));
cursor: pointer;
outline: none;
}
.tabs.-stretch .tab > .tabs-header .tab-title {
flex-grow: 1;
}
.tabs.-stretch .tab > .tabs-header .tab-title:last-of-type {
border-right-width: var(--tabs--stretch--title--border-right-width, 0);
}
/**
* Toast
*/
.toast {
position: relative;
display: flex;
flex-direction: row;
flex: 1 1 auto;
min-width: 0;
word-wrap: break-word;
overflow: hidden;
border-style: var(--toast--border-style, var(--toast--border-top-style, var(--border-top-style)) var(--toast--border-right-style, var(--border-right-style)) var(--toast--border-bottom-style, var(--border-bottom-style)) var(--toast--border-left-style, var(--border-left-style)));
border-width: var(--toast--border-width, var(--toast--border-top-width, var(--border-top-width)) var(--toast--border-right-width, var(--border-right-width)) var(--toast--border-bottom-width, var(--border-bottom-width)) var(--toast--border-left-width, var(--border-left-width)));
border-color: var(--toast--border-color, var(--toast--border-top-color, var(--border-top-color)) var(--toast--border-right-color, var(--border-right-color)) var(--toast--border-bottom-color, var(--border-bottom-color)) var(--toast--border-left-color, var(--border-left-color)));
border-radius: var(--toast--border-radius, var(--toast--border-top-left-radius, var(--border-top-left-radius)) var(--toast--border-top-right-radius, var(--border-top-right-radius)) var(--toast--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--toast--border-bottom-left-radius, var(--border-bottom-left-radius)));
font-size: var(--toast--font-size, var(--font-size));
box-shadow: var(--toast--box-shadow, var(--toast--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--toast--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--toast--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--toast--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--toast--box-shadow-color, var(--box-shadow-color)));
background: var(--toast--background);
color: var(--toast--color);
background-clip: border-box;
transition-property: var(--toast--transition-property, background-color, color, border-color);
transition-duration: var(--toast--transition-duration, var(--transition-duration));
transition-timing-function: var(--toast--transition-timing-function, var(--transition-timing-function));
align-items: center;
}
.toast a {
color: var(--toast--link--color, var(--toast--color));
font-weight: 600;
transition-property: var(--toast--link--transition-property, color);
transition-duration: var(--toast--transition-duration, var(--transition-duration));
transition-timing-function: var(--toast--transition-timing-function, var(--transition-timing-function));
}
.toast a:hover, .toast a:focus {
color: var(--toast--link-color, var(--color));
}
.toast code {
background: var(--toast--code--background);
color: var(--toast--code--color);
}
.toast > .toast-content {
padding: var(--toast--padding, var(--toast--padding-top, var(--padding-top)) var(--toast--padding-right, var(--padding-right)) var(--toast--padding-bottom, var(--padding-bottom)) var(--toast--padding-left, var(--padding-left)));
}
.toast > .toast-content > .toast-title {
font-weight: var(--toast--title--font-weight, var(--font-weight-semibold));
}
.toast > .toast-icon {
padding-left: var(--toast--padding-left, var(--padding-left));
border-color: var(--toast--border-color, var(--toast--border-top-color, var(--border-top-color)) var(--toast--border-right-color, var(--border-right-color)) var(--toast--border-bottom-color, var(--border-bottom-color)) var(--toast--border-left-color, var(--border-left-color)));
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.toast > .toast-dismiss {
flex: 0 0 auto;
cursor: pointer;
display: inline-block;
text-align: center;
margin-right: var(--toast--padding-left, var(--padding-left));
}
.toast > .toast-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: var(--toast--progress--height, 0.25rem);
background: var(--toast--progress--background);
z-index: 1;
}
.toast > .toast-progress .toast-progress-bar {
animation: toast-duration var(--toast--duration) forwards;
transform-origin: left center;
width: 100%;
height: 100%;
background: var(--toast--progress-bar--background);
}
.toast,
.toast > .toast-content {
flex: 0 1 100%;
}
.toast > hr,
.toast > .toast-content > hr {
margin-right: 0;
margin-left: 0;
}
.toast > *:first-of-type,
.toast > .toast-content > *:first-of-type {
margin-top: 0;
}
.toast > *:last-of-type,
.toast > .toast-content > *:last-of-type {
margin-bottom: 0;
}
@keyframes toast-duration {
to {
/* More performant than animating `width` */
transform: scaleX(0);
}
}
/**
* Color variants
*/
.toast.-light {
--toast--background: var(--toast--light--background, var(--color-white));
--toast--border-top-color: var(
--toast--light--border-top-color,
var(--color-light-shade-50)
);
--toast--border-right-color: var(
--toast--light--border-right-color,
var(--color-light-shade-50)
);
--toast--border-bottom-color: var(
--toast--light--border-bottom-color,
var(--color-light-shade-50)
);
--toast--border-left-color: var(
--toast--light--border-left-color,
var(--color-light-shade-50)
);
--toast--color: var(--toast--light--color, var(--contrast-text-color-light));
--toast--progress--background: var(
--toast--light--progress--background,
rgba(0, 0, 0, 0.05)
);
--toast--progress-bar--background: var(
--toast--light--progress-bar--background,
rgba(0, 0, 0, 0.15)
);
}
.toast.-dark {
--toast--background: var(--toast--dark--background, var(--color-dark));
--toast--border-top-color: var(--toast--dark--border-top-color, var(--color-dark-tint-50));
--toast--border-right-color: var(
--toast--dark--border-right-color,
var(--color-dark-tint-50)
);
--toast--border-bottom-color: var(
--toast--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--toast--border-left-color: var(
--toast--dark--border-left-color,
var(--color-dark-tint-50)
);
--toast--color: var(--toast--dark--color, var(--contrast-text-color-dark));
--toast--progress--background: var(
--toast--dark--progress--background,
rgba(255, 255, 255, 0.05)
);
--toast--progress-bar--background: var(
--toast--dark--progress-bar--background,
rgba(255, 255, 255, 0.15)
);
}
.toast.-info {
--toast--background: var(--toast--info--background, var(--color-info-100));
--toast--border-top-color: var(--toast--info--border-top-color, var(--color-info-500));
--toast--border-right-color: var(--toast--info--border-right-color, var(--color-info-500));
--toast--border-bottom-color: var(
--toast--info--border-bottom-color,
var(--color-info-500)
);
--toast--border-left-color: var(--toast--info--border-left-color, var(--color-info-500));
--toast--color: var(--toast--info--color, var(--color-info-800));
--toast--progress--background: var(
--toast--info--progress--background,
rgba(0, 0, 0, 0.05)
);
--toast--progress-bar--background: var(
--toast--info--progress-bar--background,
rgba(0, 0, 0, 0.15)
);
}
.toast.-success {
--toast--background: var(--toast--success--background, var(--color-success-100));
--toast--border-top-color: var(
--toast--success--border-top-color,
var(--color-success-500)
);
--toast--border-right-color: var(
--toast--success--border-right-color,
var(--color-success-500)
);
--toast--border-bottom-color: var(
--toast--success--border-bottom-color,
var(--color-success-500)
);
--toast--border-left-color: var(
--toast--success--border-left-color,
var(--color-success-500)
);
--toast--color: var(--toast--success--color, var(--color-success-800));
--toast--progress--background: var(
--toast--success--progress--background,
rgba(0, 0, 0, 0.05)
);
--toast--progress-bar--background: var(
--toast--success--progress-bar--background,
rgba(0, 0, 0, 0.15)
);
}
.toast.-warning {
--toast--background: var(--toast--warning--background, var(--color-warning-100));
--toast--border-top-color: var(
--toast--warning--border-top-color,
var(--color-warning-500)
);
--toast--border-right-color: var(
--toast--warning--border-right-color,
var(--color-warning-500)
);
--toast--border-bottom-color: var(
--toast--warning--border-bottom-color,
var(--color-warning-500)
);
--toast--border-left-color: var(
--toast--warning--border-left-color,
var(--color-warning-500)
);
--toast--color: var(--toast--warning--color, var(--color-warning-800));
--toast--progress--background: var(
--toast--warning--progress--background,
rgba(0, 0, 0, 0.05)
);
--toast--progress-bar--background: var(
--toast--warning--progress-bar--background,
rgba(0, 0, 0, 0.15)
);
}
.toast.-danger {
--toast--background: var(--toast--danger--background, var(--color-danger-100));
--toast--border-top-color: var(--toast--danger--border-top-color, var(--color-danger-500));
--toast--border-right-color: var(
--toast--danger--border-right-color,
var(--color-danger-500)
);
--toast--border-bottom-color: var(
--toast--danger--border-bottom-color,
var(--color-danger-500)
);
--toast--border-left-color: var(
--toast--danger--border-left-color,
var(--color-danger-500)
);
--toast--color: var(--toast--danger--color, var(--color-danger-800));
--toast--progress--background: var(
--toast--danger--progress--background,
rgba(0, 0, 0, 0.05)
);
--toast--progress-bar--background: var(
--toast--danger--progress-bar--background,
rgba(0, 0, 0, 0.15)
);
}
/**
* Size variants
*/
.toast.-sm {
--toast--border-top-left-radius: var(
--toast--sm--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--toast--border-top-right-radius: var(
--toast--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--toast--border-bottom-right-radius: var(
--toast--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--toast--border-bottom-left-radius: var(
--toast--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--toast--font-size: var(
--toast--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--toast--padding-top: var(
--toast--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--toast--padding-right: var(
--toast--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--toast--padding-bottom: var(
--toast--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--toast--padding-left: var(
--toast--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
}
.toast.-md {
--toast--border-top-left-radius: var(
--toast--md--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--toast--border-top-right-radius: var(
--toast--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--toast--border-bottom-right-radius: var(
--toast--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--toast--border-bottom-left-radius: var(
--toast--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--toast--font-size: var(
--toast--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--toast--padding-top: var(
--toast--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--toast--padding-right: var(
--toast--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--toast--padding-bottom: var(
--toast--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--toast--padding-left: var(
--toast--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
}
.toast.-lg {
--toast--border-top-left-radius: var(
--toast--lg--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--toast--border-top-right-radius: var(
--toast--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--toast--border-bottom-right-radius: var(
--toast--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--toast--border-bottom-left-radius: var(
--toast--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--toast--font-size: var(
--toast--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--toast--padding-top: var(
--toast--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--toast--padding-right: var(
--toast--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--toast--padding-bottom: var(
--toast--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--toast--padding-left: var(
--toast--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
}
/**
* Toast Container
*/
.toast-container {
position: relative;
}
.toast-container .toast-position {
position: fixed;
width: 320px;
max-width: 100%;
z-index: var(--toast-container--z-index, 2010);
margin: var(--toast-container--margin, var(--toast-container--margin-top, var(--margin-top)) var(--toast-container--margin-right, var(--margin-right)) var(--toast-container--margin-bottom, var(--margin-bottom)) var(--toast-container--margin-left, var(--margin-left)));
max-height: 100%;
overflow: visible;
}
.toast-container .toast-position.-top-left {
top: var(--toast-container--top, 0);
left: var(--toast-container--left, 0);
}
.toast-container .toast-position.-top {
top: var(--toast-container--top, 0);
left: 50%;
transform: translateX(-50%);
}
.toast-container .toast-position.-top-right {
top: var(--toast-container--top, 0);
right: var(--toast-container--right, 0);
}
.toast-container .toast-position.-right {
top: 50%;
right: var(--toast-container--right, 0);
transform: translateY(-50%);
}
.toast-container .toast-position.-bottom-right {
bottom: var(--toast-container--bottom, 0);
right: var(--toast-container--right, 0);
}
.toast-container .toast-position.-bottom {
bottom: var(--toast-container--bottom, 0);
left: 50%;
transform: translateX(-50%);
}
.toast-container .toast-position.-bottom-left {
bottom: var(--toast-container--bottom, 0);
left: var(--toast-container--left, 0);
}
.toast-container .toast-position.-left {
top: 50%;
left: var(--toast-container--left, 0);
transform: translateY(-50%);
}
.toast-container .toast-position > .toast {
width: 320px;
max-width: 100%;
margin-bottom: var(--toast-container--toast--margin-bottom, var(--margin-bottom));
}
.toast-container .toast-position > .toast:last-of-type {
margin-bottom: 0;
}
.toast-transition-move,
.toast-transition-enter-active,
.toast-transition-leave-active {
transition-property: var(--toast-container--toast--transition-property, transform, opacity);
transition-duration: var(--toast-container--toast--transition-duration, var(--transition-duration));
transition-timing-function: var(--toast-container--toast--transition-timing-function, var(--transition-timing-function));
}
.toast-transition-enter-from,
.toast-transition-leave-to {
opacity: 0;
}
/* ensure leaving items are taken out of layout flow so that moving
animations can be calculated correctly. */
.toast-transition-leave-active {
position: absolute;
}
/**
* Toggle
*/
.toggle {
position: relative;
margin-bottom: 0;
display: flex;
}
.toggle > input {
opacity: 0;
width: 0;
height: 0;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
}
.toggle > input:checked + .toggle-label::before {
background: var(--toggle--checked--background, var(--color-primary));
border-color: var(--toggle--checked--border-color, var(--toggle--checked--border-top-color, var(--color-primary)) var(--toggle--checked--border-right-color, var(--color-primary)) var(--toggle--checked--border-bottom-color, var(--color-primary)) var(--toggle--checked--border-left-color, var(--color-primary)));
}
.toggle > input:checked + .toggle-label::after {
background: var(--toggle--checked--indicator--background, var(--color-white));
transform: translate(calc(var(--toggle--width, 40px) * 0.5), 0);
}
.toggle > input:focus + .toggle-label::before {
box-shadow: 0 0 1px var(--toggle--checked--background);
}
.toggle > input:disabled + .toggle-label, .toggle > input[readonly] + .toggle-label {
cursor: default;
color: var(--toggle--disabled--label--color);
}
.toggle > input:disabled + .toggle-label::before, .toggle > input[readonly] + .toggle-label::before {
background: var(--toggle--disabled--background);
border-color: var(--toggle--disabled--border-color, var(--toggle--disabled--border-top-color, var(--toggle--border-top-color, var(--border-top-color))) var(--toggle--disabled--border-right-color, var(--toggle--border-right-color, var(--border-right-color))) var(--toggle--disabled--border-bottom-color, var(--toggle--border-bottom-color, var(--border-bottom-color))) var(--toggle--disabled--border-left-color, var(--toggle--border-left-color, var(--border-left-color))));
}
.toggle > input:disabled + .toggle-label::after, .toggle > input[readonly] + .toggle-label::after {
background: var(--toggle--disabled--indicator--background);
}
.toggle > input:disabled:checked + .toggle-label::before, .toggle > input[readonly]:checked + .toggle-label::before {
background: var(--toggle--checked--disabled--background);
border-color: var(--toggle--checked--disabled--border-color, var(--toggle--checked--disabled--border-top-color, var(--color-primary)) var(--toggle--checked--disabled--border-right-color, var(--color-primary)) var(--toggle--checked--disabled--border-bottom-color, var(--color-primary)) var(--toggle--checked--disabled--border-left-color, var(--color-primary)));
}
.toggle > input:disabled:checked + .toggle-label::after, .toggle > input[readonly]:checked + .toggle-label::after {
background: var(--toggle--checked--disabled--indicator--background);
}
.toggle .toggle-label {
display: flex;
align-items: center;
position: relative;
margin: 0;
color: var(--toggle--label--color, var(--toggle--color));
font-size: var(--toggle--label--font-size, var(--toggle--font-size, var(--font-size)));
}
.toggle .toggle-label::before {
content: "";
position: relative;
display: inline-block;
cursor: pointer;
transition-duration: var(--toggle--transition-duration, var(--transition-duration));
transition-property: var(--toggle--transition-property, background-color, border-color, transform);
transition-timing-function: var(--toggle--transition-timing-function, var(--transition-timing-function));
border-width: var(--toggle--border-width, var(--toggle--border-top-width, var(--border-top-width)) var(--toggle--border-right-width, var(--border-right-width)) var(--toggle--border-bottom-width, var(--border-bottom-width)) var(--toggle--border-left-width, var(--border-left-width)));
border-style: var(--toggle--border-style, var(--toggle--border-top-style, var(--border-top-style)) var(--toggle--border-right-style, var(--border-right-style)) var(--toggle--border-bottom-style, var(--border-bottom-style)) var(--toggle--border-left-style, var(--border-left-style)));
border-color: var(--toggle--border-color, var(--toggle--border-top-color, var(--border-top-color)) var(--toggle--border-right-color, var(--border-right-color)) var(--toggle--border-bottom-color, var(--border-bottom-color)) var(--toggle--border-left-color, var(--border-left-color)));
margin-right: var(--toggle--margin-right, var(--margin-right));
flex-shrink: 0;
flex-grow: 0;
background-color: var(--toggle--background);
width: var(--toggle--width, 40px);
height: var(--toggle--height, 20px);
border-radius: var(--toggle--border-radius, var(--toggle--border-top-left-radius, var(--border-top-left-radius)) var(--toggle--border-top-right-radius, var(--border-top-right-radius)) var(--toggle--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--toggle--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.toggle .toggle-label::after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 0;
z-index: 1;
transform: translate(0, 0);
transition-duration: var(--toggle--transition-duration, var(--transition-duration));
transition-property: var(--toggle--transition-property, background-color, border-color, transform);
transition-timing-function: var(--toggle--transition-timing-function, var(--transition-timing-function));
background-color: var(--toggle--indicator--background);
height: var(--toggle--indicator--width, 16px);
width: var(--toggle--indicator--height, 16px);
border-radius: var(--toggle--indicator--border-radius, var(--toggle--indicator--border-top-left-radius, var(--toggle--border-top-left-radius, var(--border-top-left-radius))) var(--toggle--indicator--border-top-right-radius, var(--toggle--border-top-right-radius, var(--border-top-right-radius))) var(--toggle--indicator--border-bottom-right-radius, var(--toggle--border-bottom-right-radius, var(--border-bottom-right-radius))) var(--toggle--indicator--border-bottom-left-radius, var(--toggle--border-bottom-left-radius, var(--border-bottom-left-radius))));
margin-top: calc(var(--toggle--indicator--height, 16px) / -2);
margin-left: calc(var(--toggle--height, 20px) / 2 - var(--toggle--indicator--height, 16px) / 2);
}
.toggle.-rounded .toggle-label::before {
border-radius: var(--toggle--rounded--border-radius, var(--toggle--rounded--border-top-left-radius, var(--toggle--height)) var(--toggle--rounded--border-top-right-radius, var(--toggle--height)) var(--toggle--rounded--border-bottom-right-radius, var(--toggle--height)) var(--toggle--rounded--border-bottom-left-radius, var(--toggle--height)));
}
.toggle.-rounded .toggle-label::after {
border-radius: var(--toggle--rounded--indicator--border-radius, var(--toggle--rounded--indicator--border-top-left-radius, 50%) var(--toggle--rounded--indicator--border-top-right-radius, 50%) var(--toggle--rounded--indicator--border-bottom-right-radius, 50%) var(--toggle--rounded--indicator--border-bottom-left-radius, 50%));
}
/**
* Color variants
*/
.toggle.-light {
--toggle--background: var(--toggle--light--background, var(--color-light));
--toggle--border-top-color: var(
--toggle--light--border-top-color,
var(--color-light-shade-50)
);
--toggle--border-right-color: var(
--toggle--light--border-right-color,
var(--color-light-shade-50)
);
--toggle--border-bottom-color: var(
--toggle--light--border-bottom-color,
var(--color-light-shade-50)
);
--toggle--border-left-color: var(
--toggle--light--border-left-color,
var(--color-light-shade-50)
);
--toggle--indicator--background: var(
--toggle--light--indicator--background,
var(--color-white)
);
--toggle--label--color: var(
--toggle--light--label--color,
var(--contrast-text-color-white)
);
--toggle--checked--background: var(
--toggle--light--checked--background,
var(--color-primary)
);
--toggle--checked--border-top-color: var(
--toggle--light--checked--border-top-color,
var(--color-primary-shade-50)
);
--toggle--checked--border-right-color: var(
--toggle--light--checked--border-right-color,
var(--color-primary-shade-50)
);
--toggle--checked--border-bottom-color: var(
--toggle--light--checked--border-bottom-color,
var(--color-primary-shade-50)
);
--toggle--checked--border-left-color: var(
--toggle--light--checked--border-left-color,
var(--color-primary-shade-50)
);
--toggle--disabled--background: var(
--toggle--light--disabled--background,
var(--color-light-shade-50)
);
--toggle--disabled--border-top-color: var(
--toggle--light--disabled--border-top-color,
var(--color-light-shade-50)
);
--toggle--disabled--border-right-color: var(
--toggle--light--disabled--border-right-color,
var(--color-light-shade-50)
);
--toggle--disabled--border-bottom-color: var(
--toggle--light--disabled--border-bottom-color,
var(--color-light-shade-50)
);
--toggle--disabled--border-left-color: var(
--toggle--light--disabled--border-left-color,
var(--color-light-shade-50)
);
--toggle--disabled--indicator--background: var(
--toggle--disabled--light--indicator--background,
var(--color-gray-50)
);
--toggle--disabled--label--color: var(
--toggle--light--disabled--label--color,
var(--text-color-weak)
);
--toggle--checked--disabled--background: var(
--toggle--light--checked--disabled--background,
var(--color-primary-200)
);
--toggle--checked--disabled--border-color: var(
--toggle--light--checked--disabled--border-color,
var(--color-primary-300)
);
--toggle--checked--disabled--indicator--background: var(
--toggle--checked--light--indicator--disabled--background,
var(--color-gray-50)
);
}
.toggle.-dark {
--toggle--background: var(--toggle--dark--background, var(--color-dark));
--toggle--border-top-color: var(
--toggle--dark--border-top-color,
var(--color-dark-tint-50)
);
--toggle--border-right-color: var(
--toggle--dark--border-right-color,
var(--color-dark-tint-50)
);
--toggle--border-bottom-color: var(
--toggle--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--toggle--border-left-color: var(
--toggle--dark--border-left-color,
var(--color-dark-tint-50)
);
--toggle--indicator--background: var(
--toggle--light--indicator--background,
var(--color-white)
);
--toggle--label--color: var(--toggle--dark--label--color, var(--contrast-text-color-dark));
--toggle--checked--background: var(
--toggle--dark--checked--background,
var(--color-primary)
);
--toggle--checked--border-top-color: var(
--toggle--dark--checked--border-top-color,
var(--color-primary-tint-50)
);
--toggle--checked--border-right-color: var(
--toggle--dark--checked--border-right-color,
var(--color-primary-tint-50)
);
--toggle--checked--border-bottom-color: var(
--toggle--dark--checked--border-bottom-color,
var(--color-primary-tint-50)
);
--toggle--checked--border-left-color: var(
--toggle--dark--checked--border-left-color,
var(--color-primary-tint-50)
);
--toggle--disabled--background: var(
--toggle--dark--disabled--background,
var(--color-dark-tint-100)
);
--toggle--disabled--border-color: var(
--toggle--dark--disabled--border-color,
var(--color-dark-tint-50)
);
--toggle--disabled--indicator--background: var(
--toggle--dark--disabled--indicator--background,
var(--color-gray-400)
);
--toggle--disabled--label--color: var(
--toggle--dark--disabled--label--color,
var(--text-color-weak)
);
--toggle--checked--disabled--background: var(
--toggle--dark--checked--disabled--background,
var(--color-primary-800)
);
--toggle--checked--disabled--border-color: var(
--toggle--dark--checked--disabled--border-color,
var(--color-primary-900)
);
--toggle--checked--disabled--indicator--background: var(
--toggle--dark--checked--disabled--indicator--background,
var(--color-gray-300)
);
}
/**
* Size variants
*/
.toggle.-sm {
--toggle--width: var(--toggle--sm--width, calc(40px * var(--size-multiplier-sm)));
--toggle--height: var(--toggle--sm--height, calc(20px * var(--size-multiplier-sm)));
--toggle--border-top-left-radius: var(
--toggle--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--toggle--border-top-right-radius: var(
--toggle--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--toggle--border-bottom-right-radius: var(
--toggle--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--toggle--border-bottom-left-radius: var(
--toggle--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--toggle--indicator--width: var(
--toggle--sm--indicator--width,
calc(16px * var(--size-multiplier-sm))
);
--toggle--indicator--height: var(
--toggle--sm--indicator--height,
calc(16px * var(--size-multiplier-sm))
);
--toggle--label--font-size: var(
--toggle--sm--label--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
}
.toggle.-md {
--toggle--width: var(--toggle--md--width, calc(40px * var(--size-multiplier-md)));
--toggle--height: var(--toggle--md--height, calc(20px * var(--size-multiplier-md)));
--toggle--border-top-left-radius: var(
--toggle--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--toggle--border-top-right-radius: var(
--toggle--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--toggle--border-bottom-right-radius: var(
--toggle--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--toggle--border-bottom-left-radius: var(
--toggle--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--toggle--indicator--width: var(
--toggle--md--indicator--width,
calc(16px * var(--size-multiplier-md))
);
--toggle--indicator--height: var(
--toggle--md--indicator--height,
calc(16px * var(--size-multiplier-md))
);
--toggle--label--font-size: var(
--toggle--md--label--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
}
.toggle.-lg {
--toggle--width: var(--toggle--lg--width, calc(40px * var(--size-multiplier-lg)));
--toggle--height: var(--toggle--lg--height, calc(20px * var(--size-multiplier-lg)));
--toggle--border-top-left-radius: var(
--toggle--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--toggle--border-top-right-radius: var(
--toggle--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--toggle--border-bottom-right-radius: var(
--toggle--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--toggle--border-bottom-left-radius: var(
--toggle--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--toggle--indicator--width: var(
--toggle--lg--indicator--width,
calc(16px * var(--size-multiplier-lg))
);
--toggle--indicator--height: var(
--toggle--lg--indicator--height,
calc(16px * var(--size-multiplier-lg))
);
--toggle--label--font-size: var(
--toggle--lg--label--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
}
/**
* Breakpoint mixins
*/
/**
* Tooltip
*/
.tooltip-wrapper {
display: inline-block;
position: relative;
}
.tooltip-wrapper .tooltip {
position: absolute;
z-index: var(--tooltip--z-index, 2000);
word-wrap: break-word;
width: max-content;
top: 0;
left: 0;
text-align: left;
list-style: none;
background-clip: padding-box;
display: inline-block;
white-space: nowrap;
line-height: var(--tooltip--line-height, var(--line-height));
border-width: var(--tooltip--border-width, var(--tooltip--border-top-width, var(--border-top-width)) var(--tooltip--border-right-width, var(--border-right-width)) var(--tooltip--border-bottom-width, var(--border-bottom-width)) var(--tooltip--border-left-width, var(--border-left-width)));
border-style: var(--tooltip--border-style, var(--tooltip--border-top-style, var(--border-top-style)) var(--tooltip--border-right-style, var(--border-right-style)) var(--tooltip--border-bottom-style, var(--border-bottom-style)) var(--tooltip--border-left-style, var(--border-left-style)));
color: var(--tooltip--color);
background-color: var(--tooltip--background);
border-color: var(--tooltip--border-color, var(--tooltip--border-top-color, var(--border-top-color)) var(--tooltip--border-right-color, var(--border-right-color)) var(--tooltip--border-bottom-color, var(--border-bottom-color)) var(--tooltip--border-left-color, var(--border-left-color)));
border-radius: var(--tooltip--border-radius, var(--tooltip--border-top-left-radius, var(--border-top-left-radius)) var(--tooltip--border-top-right-radius, var(--border-top-right-radius)) var(--tooltip--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--tooltip--border-bottom-left-radius, var(--border-bottom-left-radius)));
font-size: var(--tooltip--font-size, var(--font-size));
padding: var(--tooltip--padding, var(--tooltip--padding-top, var(--padding-top)) var(--tooltip--padding-right, var(--padding-right)) var(--tooltip--padding-bottom, var(--padding-bottom)) var(--tooltip--padding-left, var(--padding-left)));
box-shadow: var(--tooltip--box-shadow, var(--tooltip--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--tooltip--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--tooltip--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--tooltip--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--tooltip--box-shadow-color, var(--box-shadow-color)));
}
.tooltip-wrapper .tooltip:focus:hover {
outline-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] {
transform-origin: center bottom;
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] {
transform-origin: center top;
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] {
transform-origin: left center;
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] {
transform-origin: right center;
}
.tooltip-wrapper .tooltip > .arrow {
position: absolute;
}
.tooltip-wrapper .tooltip > .arrow,
.tooltip-wrapper .tooltip > .arrow::after {
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
position: absolute;
}
.tooltip-wrapper .tooltip > .arrow::after {
content: "";
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow {
border-bottom-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow::after {
border-bottom-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow {
border-top-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow::after {
border-top-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow {
border-left-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow::after {
border-left-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow {
border-right-width: 0;
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow::after {
border-right-width: 0;
}
.tooltip-wrapper .tooltip > .arrow {
width: var(--tooltip--arrow--size, 6px);
height: var(--tooltip--arrow--size, 6px);
}
.tooltip-wrapper .tooltip > .arrow, .tooltip-wrapper .tooltip > .arrow::after {
border-width: var(--tooltip--arrow--size, 6px);
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow::after, .tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow::after {
margin-left: calc(var(--tooltip--arrow--size, 6px) * -1);
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow::after, .tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow::after {
margin-top: calc(var(--tooltip--arrow--size, 6px) * -1);
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow {
bottom: calc(var(--tooltip--arrow--size, 6px) * -1);
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow::after {
bottom: 1px;
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow {
top: calc(var(--tooltip--arrow--size, 6px) * -1);
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow::after {
top: 1px;
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow {
right: calc(var(--tooltip--arrow--size, 6px) * -1);
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow::after {
right: 1px;
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow {
left: calc(var(--tooltip--arrow--size, 6px) * -1);
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow::after {
left: 1px;
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow {
border-top-color: var(--tooltip--border-top-color, var(--border-top-color));
}
.tooltip-wrapper .tooltip[data-popup-placement^=top] > .arrow::after {
border-top-color: var(--tooltip--background);
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow {
border-right-color: var(--tooltip--border-right-color, var(--border-right-color));
}
.tooltip-wrapper .tooltip[data-popup-placement^=right] > .arrow::after {
border-right-color: var(--tooltip--background);
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow {
border-bottom-color: var(--tooltip--border-bottom-color, var(--border-bottom-color));
}
.tooltip-wrapper .tooltip[data-popup-placement^=bottom] > .arrow::after {
border-bottom-color: var(--tooltip--background);
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow {
border-left-color: var(--tooltip--border-left-color, var(--border-left-color));
}
.tooltip-wrapper .tooltip[data-popup-placement^=left] > .arrow::after {
border-left-color: var(--tooltip--background);
}
/**
* Color variants
*/
.tooltip-wrapper.-light {
--tooltip--background: var(--tooltip--light--background, var(--color-white));
--tooltip--border-top-color: var(--tooltip--light--border-top-color, var(--color-light));
--tooltip--border-right-color: var(
--tooltip--light--border-right-color,
var(--color-light)
);
--tooltip--border-bottom-color: var(
--tooltip--light--border-bottom-color,
var(--color-light)
);
--tooltip--border-left-color: var(--tooltip--light--border-left-color, var(--color-light));
--tooltip--color: var(--tooltip--light--color, var(--contrast-text-color-white));
}
.tooltip-wrapper.-dark {
--tooltip--background: var(--tooltip--dark--background, var(--color-dark));
--tooltip--border-top-color: var(--tooltip--dark--border-top-color, var(--color-dark-600));
--tooltip--border-right-color: var(
--tooltip--dark--border-right-color,
var(--color-dark-600)
);
--tooltip--border-bottom-color: var(
--tooltip--dark--border-bottom-color,
var(--color-dark-600)
);
--tooltip--border-left-color: var(
--tooltip--dark--border-left-color,
var(--color-dark-600)
);
--tooltip--color: var(--tooltip--dark--color, var(--contrast-text-color-dark));
}
/**
* Size variants
*/
.tooltip-wrapper.-sm {
--tooltip--border-top-left-radius: var(
--tooltip--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--tooltip--border-top-right-radius: var(
--tooltip--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--tooltip--border-bottom-right-radius: var(
--tooltip--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--tooltip--border-bottom-left-radius: var(
--tooltip--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--tooltip--font-size: var(
--tooltip--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--tooltip--margin-top: var(
--tooltip--sm--margin-top,
calc(calc(var(--margin-top) / 2) * var(--size-multiplier-sm))
);
--tooltip--margin-right: var(
--tooltip--sm--margin-right,
calc(calc(var(--margin-right) / 2) * var(--size-multiplier-sm))
);
--tooltip--margin-bottom: var(
--tooltip--sm--margin-bottom,
calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-sm))
);
--tooltip--margin-left: var(
--tooltip--sm--margin-left,
calc(calc(var(--margin-left) / 2) * var(--size-multiplier-sm))
);
--tooltip--padding-top: var(
--tooltip--sm--padding-top,
calc(calc(var(--padding-top) * 3 / 4) * var(--size-multiplier-sm))
);
--tooltip--padding-right: var(
--tooltip--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--tooltip--padding-bottom: var(
--tooltip--sm--padding-bottom,
calc(calc(var(--padding-bottom) * 3 / 4) * var(--size-multiplier-sm))
);
--tooltip--padding-left: var(
--tooltip--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
}
.tooltip-wrapper.-md {
--tooltip--border-top-left-radius: var(
--tooltip--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--tooltip--border-top-right-radius: var(
--tooltip--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--tooltip--border-bottom-right-radius: var(
--tooltip--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--tooltip--border-bottom-left-radius: var(
--tooltip--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--tooltip--font-size: var(
--tooltip--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--tooltip--margin-top: var(
--tooltip--md--margin-top,
calc(calc(var(--margin-top) / 2) * var(--size-multiplier-md))
);
--tooltip--margin-right: var(
--tooltip--md--margin-right,
calc(calc(var(--margin-right) / 2) * var(--size-multiplier-md))
);
--tooltip--margin-bottom: var(
--tooltip--md--margin-bottom,
calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-md))
);
--tooltip--margin-left: var(
--tooltip--md--margin-left,
calc(calc(var(--margin-left) / 2) * var(--size-multiplier-md))
);
--tooltip--padding-top: var(
--tooltip--md--padding-top,
calc(calc(var(--padding-top) * 3 / 4) * var(--size-multiplier-md))
);
--tooltip--padding-right: var(
--tooltip--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--tooltip--padding-bottom: var(
--tooltip--md--padding-bottom,
calc(calc(var(--padding-bottom) * 3 / 4) * var(--size-multiplier-md))
);
--tooltip--padding-left: var(
--tooltip--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
}
.tooltip-wrapper.-lg {
--tooltip--border-top-left-radius: var(
--tooltip--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--tooltip--border-top-right-radius: var(
--tooltip--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--tooltip--border-bottom-right-radius: var(
--tooltip--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--tooltip--border-bottom-left-radius: var(
--tooltip--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--tooltip--font-size: var(
--tooltip--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--tooltip--margin-top: var(
--tooltip--lg--margin-top,
calc(calc(var(--margin-top) / 2) * var(--size-multiplier-lg))
);
--tooltip--margin-right: var(
--tooltip--lg--margin-right,
calc(calc(var(--margin-right) / 2) * var(--size-multiplier-lg))
);
--tooltip--margin-bottom: var(
--tooltip--lg--margin-bottom,
calc(calc(var(--margin-bottom) / 2) * var(--size-multiplier-lg))
);
--tooltip--margin-left: var(
--tooltip--lg--margin-left,
calc(calc(var(--margin-left) / 2) * var(--size-multiplier-lg))
);
--tooltip--padding-top: var(
--tooltip--lg--padding-top,
calc(calc(var(--padding-top) * 3 / 4) * var(--size-multiplier-lg))
);
--tooltip--padding-right: var(
--tooltip--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--tooltip--padding-bottom: var(
--tooltip--lg--padding-bottom,
calc(calc(var(--padding-bottom) * 3 / 4) * var(--size-multiplier-lg))
);
--tooltip--padding-left: var(
--tooltip--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
}
/**
* Checkable Buttons
*/
.checkable-button-group.-default {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
background: var(--checkable-button-group--background);
color: var(--checkable-button-group--color);
border-style: var(--checkable-button-group--border-style, var(--checkable-button-group--border-top-style, var(--border-top-style)) var(--checkable-button-group--border-right-style, var(--border-right-style)) var(--checkable-button-group--border-bottom-style, var(--border-bottom-style)) var(--checkable-button-group--border-left-style, var(--border-left-style)));
border-width: var(--checkable-button-group--border-width, var(--checkable-button-group--border-top-width, var(--border-top-width)) var(--checkable-button-group--border-right-width, var(--border-right-width)) var(--checkable-button-group--border-bottom-width, var(--border-bottom-width)) var(--checkable-button-group--border-left-width, var(--border-left-width)));
border-color: var(--checkable-button-group--border-color, var(--checkable-button-group--border-top-color, var(--border-top-color)) var(--checkable-button-group--border-right-color, var(--border-right-color)) var(--checkable-button-group--border-bottom-color, var(--border-bottom-color)) var(--checkable-button-group--border-left-color, var(--border-left-color)));
border-radius: var(--checkable-button-group--border-radius, var(--checkable-button-group--border-top-left-radius, var(--border-top-left-radius)) var(--checkable-button-group--border-top-right-radius, var(--border-top-right-radius)) var(--checkable-button-group--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--checkable-button-group--border-bottom-left-radius, var(--border-bottom-left-radius)));
box-shadow: var(--checkable-button-group--box-shadow, var(--checkable-button-group--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--checkable-button-group--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--checkable-button-group--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--checkable-button-group--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--checkable-button-group--box-shadow-color, var(--box-shadow-color)));
padding: var(--checkable-button-group--padding, var(--checkable-button-group--padding-top, var(--padding-top-1-2)) var(--checkable-button-group--padding-right, var(--padding-right-1-2)) var(--checkable-button-group--padding-bottom, var(--padding-bottom-1-2)) var(--checkable-button-group--padding-left, var(--padding-left-1-2)));
transition-property: var(--checkable-button-group--transition-property, background-color, border-color);
transition-duration: var(--checkable-button-group--transition-duration, var(--transition-duration));
transition-timing-function: var(--checkable-button-group--transition-timing-function, var(--transition-timing-function));
}
.checkable-button-group.-default > .button {
margin-right: var(--checkable-button-group--gap, var(--margin-right-1-2));
}
.checkable-button-group.-default > .button:not(:disabled):not(:hover):not(:focus):not(.-disabled).-active {
background: var(--checkable-button-group--button--active--background, var(--button--background));
}
.checkable-button-group.-default > .button:not(.-active) {
color: inherit;
background: var(--checkable-button-group--button--background, transparent) !important;
border-color: var(--checkable-button-group--button--border-color, transparent);
box-shadow: var(--checkable-button-group--button--box-shadow, none);
}
.checkable-button-group.-default > .button:not(.-active):not(.-disabled):hover, .checkable-button-group.-default > .button:not(.-active):not(.-disabled):focus {
border-top-color: var(--button--border-top-color);
border-right-color: var(--button--border-top-color);
border-bottom-color: var(--button--border-top-color);
border-left-color: var(--button--border-top-color);
}
.checkable-button-group.-default > .button:last-child {
margin-right: 0;
}
/**
* Color variants
*/
.checkable-button-group.-light {
--checkable-button-group--background: var(
--checkable-button-group--light--background,
var(--color-light-tint-100)
);
--checkable-button-group--color: var(
--checkable-button-group--light--color,
var(--contrast-text-color-light)
);
--checkable-button-group--border-top-color: var(
--checkable-button-group--light--border-top-color,
var(--color-light-shade-50)
);
--checkable-button-group--border-right-color: var(
--checkable-button-group--light--border-right-color,
var(--color-light-shade-50)
);
--checkable-button-group--border-bottom-color: var(
--checkable-button-group--light--border-bottom-color,
var(--color-light-shade-50)
);
--checkable-button-group--border-left-color: var(
--checkable-button-group--light--border-left-color,
var(--color-light-shade-50)
);
}
.checkable-button-group.-dark {
--checkable-button-group--background: var(
--checkable-button-group--dark--background,
var(--color-dark-shade-100)
);
--checkable-button-group--color: var(
--checkable-button-group--dark--color,
var(--contrast-text-color-dark)
);
--checkable-button-group--border-top-color: var(
--checkable-button-group--dark--border-top-color,
var(--color-dark-tint-50)
);
--checkable-button-group--border-right-color: var(
--checkable-button-group--dark--border-right-color,
var(--color-dark-tint-50)
);
--checkable-button-group--border-bottom-color: var(
--checkable-button-group--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--checkable-button-group--border-left-color: var(
--checkable-button-group--dark--border-left-color,
var(--color-dark-tint-50)
);
}
/**
* Size variants
*/
.checkable-button-group.-sm {
--checkable-button-group--border-top-left-radius: var(
--checkable-button-group--sm--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--checkable-button-group--border-top-right-radius: var(
--checkable-button-group--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--checkable-button-group--border-bottom-right-radius: var(
--checkable-button-group--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--checkable-button-group--border-bottom-left-radius: var(
--checkable-button-group--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--checkable-button-group--padding-top: var(
--checkable-button-group--sm--padding-top,
calc(calc(var(--padding-top) * var(--size-multiplier-sm)) * 0.5)
);
--checkable-button-group--padding-right: var(
--checkable-button-group--sm--padding-right,
calc(calc(var(--padding-right) * var(--size-multiplier-sm)) * 0.5)
);
--checkable-button-group--padding-bottom: var(
--checkable-button-group--sm--padding-bottom,
calc(calc(var(--padding-bottom) * var(--size-multiplier-sm)) * 0.5)
);
--checkable-button-group--padding-left: var(
--checkable-button-group--sm--padding-left,
calc(calc(var(--padding-left) * var(--size-multiplier-sm)) * 0.5)
);
}
.checkable-button-group.-md {
--checkable-button-group--border-top-left-radius: var(
--checkable-button-group--md--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--checkable-button-group--border-top-right-radius: var(
--checkable-button-group--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--checkable-button-group--border-bottom-right-radius: var(
--checkable-button-group--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--checkable-button-group--border-bottom-left-radius: var(
--checkable-button-group--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--checkable-button-group--padding-top: var(
--checkable-button-group--md--padding-top,
calc(calc(var(--padding-top) * var(--size-multiplier-md)) * 0.5)
);
--checkable-button-group--padding-right: var(
--checkable-button-group--md--padding-right,
calc(calc(var(--padding-right) * var(--size-multiplier-md)) * 0.5)
);
--checkable-button-group--padding-bottom: var(
--checkable-button-group--md--padding-bottom,
calc(calc(var(--padding-bottom) * var(--size-multiplier-md)) * 0.5)
);
--checkable-button-group--padding-left: var(
--checkable-button-group--md--padding-left,
calc(calc(var(--padding-left) * var(--size-multiplier-md)) * 0.5)
);
}
.checkable-button-group.-lg {
--checkable-button-group--border-top-left-radius: var(
--checkable-button-group--lg--border-top-left-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--checkable-button-group--border-top-right-radius: var(
--checkable-button-group--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--checkable-button-group--border-bottom-right-radius: var(
--checkable-button-group--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--checkable-button-group--border-bottom-left-radius: var(
--checkable-button-group--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--checkable-button-group--padding-top: var(
--checkable-button-group--lg--padding-top,
calc(calc(var(--padding-top) * var(--size-multiplier-lg)) * 0.5)
);
--checkable-button-group--padding-right: var(
--checkable-button-group--lg--padding-right,
calc(calc(var(--padding-right) * var(--size-multiplier-lg)) * 0.5)
);
--checkable-button-group--padding-bottom: var(
--checkable-button-group--lg--padding-bottom,
calc(calc(var(--padding-bottom) * var(--size-multiplier-lg)) * 0.5)
);
--checkable-button-group--padding-left: var(
--checkable-button-group--lg--padding-left,
calc(calc(var(--padding-left) * var(--size-multiplier-lg)) * 0.5)
);
}