html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
-webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
[hidden],
template {
display: none;
}
*,
:after,
:before {
box-sizing: border-box;
}
body,
html {
background: var(--jaze-color-background-primary, #fff);
color: var(--jaze-color-text-primary, #525461);
font-family: var(--jaze-typography-font-family, "Inter", "Helvetica Neue", "Helvetica", "Arial", "sans-serif");
font-size: 12px;
line-height: 1;
}
a {
text-decoration: none;
}
:root {
--jaze-color-DN60: #151725;
--jaze-color-DN55: #1c1e2d;
--jaze-color-DN50: #242635;
--jaze-color-DN40: #333543;
--jaze-color-DN30: #525461;
--jaze-color-DN20: #7e8190;
--jaze-color-DN10: #a4a7b5;
--jaze-color-DN0: #c2c4ce;
--jaze-color-N0: #fff;
--jaze-color-N10: #fbfbfc;
--jaze-color-N20: #f8f8f9;
--jaze-color-N30: #f4f4f5;
--jaze-color-N40: #f1f2f4;
--jaze-color-N50: #e5e7ed;
--jaze-color-N60: #d6d9e2;
--jaze-color-N70: #c2c4ce;
--jaze-color-BN0: #010a19;
--jaze-color-BN10: #0b1527;
--jaze-color-BN20: #101a2b;
--jaze-color-BN30: #151f30;
--jaze-color-BN40: #1a2535;
--jaze-color-BN50: #1f2b3b;
--jaze-color-P0: #003c9e;
--jaze-color-P10: var(--color-400);
--jaze-color-P20: var(--color-500);
--jaze-color-P25: var(--color-400);
--jaze-color-P30: #46c7fd;
--jaze-color-P40: #39cc64;
--jaze-color-P50: #bfe041;
--jaze-color-P55: #ffdb1a;
--jaze-color-P60: #f5a623;
--jaze-color-P70: #f03a3e;
--jaze-color-P80: #a252e3;
--jaze-color-P90: #6b34e0;
--jaze-color-P100: #7e8190;
--jaze-color-primary-D0: var(--color-300);
--jaze-color-primary-L0: var(--color-200);
--jaze-color-primary-L10: var(--color-400);
--jaze-color-primary-L20: #bfdbff;
--jaze-color-primary-L30: var(--color-200);
--jaze-color-primary-L40: var(--color-50);
--jaze-color-primary-L50: var(--color-100);
--jaze-color-primary-T5: rgba(0, 111, 255, 0.05);
--jaze-color-primary-T20: rgba(0, 111, 255, 0.2);
--jaze-color-primary-T40: rgba(0, 111, 255, 0.4);
--jaze-color-primary-T50: rgba(0, 111, 255, 0.5);
--jaze-color-success-T40: rgba(57, 204, 100, 0.4);
--jaze-color-danger: #f03a3e;
--jaze-color-warning: #f5a623;
--jaze-color-success: #39cc64;
--jaze-color-primary: var(--color-500);
--jaze-color-text-link: var(--color-500);
--jaze-color-text-link-hover: var(--color-400);
}
:root {
--jaze-layout-grid-base: 4px;
--jaze-layout-content-horizontal-rhythm-multiplier: 8;
--jaze-layout-secondary-content-horizontal-rhythm-multiplier: 5;
--jaze-layout-global-header-panel-height: 50px;
--jaze-layout-global-side-nav-width: 50px;
--jaze-layout-global-side-panel-width: 400px;
--jaze-layout-z-index-tooltip: 400;
--jaze-layout-z-index-popover: 500;
--jaze-layout-z-index-header-panel: 600;
--jaze-layout-z-index-side-panel: 700;
--jaze-layout-z-index-global-header: 800;
--jaze-layout-z-index-modal: 900;
--jaze-layout-z-index-modal-blackout: 1000;
--jaze-layout-z-index-toasts: 1100;
}
:root {
--jaze-typography-font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
}
.jaze-mod-dark {
--jaze-color-text-primary: #a4a7b5;
--jaze-color-text-secondary: #7e8190;
--jaze-color-text-tertiary: #525461;
--jaze-color-background-primary: #1c1e2d;
--jaze-color-background-secondary: #333543;
--jaze-color-background-tertiary: #242635;
--jaze-color-border-primary: #333543;
--jaze-color-border-secondary: #525461;
--jaze-color-border-tertiary: #333543;
--jaze-color-drop-shadow: rgba(0, 0, 0, 0.37);
--jaze-color-scrollbar-thumb: #333543;
}
.jaze-mod-portal {
--jaze-color-background-primary: #0d3369;
--jaze-color-text-primary: #fff;
}
.jaze-mod-reset-color,
:root {
--jaze-color-text-primary: #525461;
--jaze-color-text-secondary: #a4a7b5;
--jaze-color-text-tertiary: #7e8190;
--jaze-color-text-quaternary: #c2c4ce;
--jaze-color-background-primary: #fff;
--jaze-color-background-secondary: #f1f2f4;
--jaze-color-background-tertiary: #f4f4f5;
--jaze-color-border-primary: #d6d9e2;
--jaze-color-border-secondary: #c2c4ce;
--jaze-color-border-tertiary: #e5e7ed;
--jaze-color-drop-shadow: rgba(21, 23, 37, 0.2);
--jaze-color-scrollbar-thumb: #c2c4ce;
}
.color-text-primary {
color: var(--jaze-color-text-primary, #525461) !important;
}
.color-text-secondary {
color: var(--jaze-color-text-secondary, #a4a7b5) !important;
}
.color-text-tertiary {
color: var(--jaze-color-text-tertiary, #7e8190) !important;
}
.color-success {
color: #39cc64 !important;
}
.color-warning {
color: #f5a623 !important;
}
.color-danger {
color: #f03a3e !important;
}
.color-primary {
color: var(--color-500) !important;
}
.color-current {
color: currentColor !important;
}
.d-none {
display: none !important;
}
.d-block {
display: block !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-flex {
display: flex !important;
}
.d-inline-flex {
display: inline-flex !important;
}
.justify-around {
justify-content: space-around !important;
}
.justify-between {
justify-content: space-between !important;
}
.justify-start {
justify-content: flex-start !important;
}
.justify-end {
justify-content: flex-end !important;
}
.justify-center {
justify-content: center !important;
}
.align-start {
align-items: flex-start !important;
}
.align-end {
align-items: flex-end !important;
}
.align-center {
align-items: center !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-no-wrap {
flex-wrap: nowrap !important;
}
.flex-none {
flex: none !important;
}
.flex-auto {
flex: auto !important;
}
.flex-ungrowable {
flex-grow: 0 !important;
}
.flex-unshrinkable {
flex-shrink: 0 !important;
}
.flex-centered {
display: flex;
justify-content: center;
align-items: center;
}
.flex-space-between {
display: flex;
justify-content: space-between;
}
.flex-centered-vertically {
display: flex;
align-items: center;
}
.flex-columns {
display: flex;
flex-direction: column;
}
.container {
--default-container-cell-horizontal-padding: 0;
padding-left: var(--container-cell-horizontal-padding, var(--default-container-cell-horizontal-padding));
padding-right: var(--container-cell-horizontal-padding, var(--default-container-cell-horizontal-padding));
width: 100%;
}
.container--centered {
margin-left: auto;
margin-right: auto;
}
.container--horizontal-smash,
.container--smash {
--container-cell-horizontal-padding: 0;
}
.container--condensed,
.container--horizontal-condensed {
--container-cell-horizontal-padding: 4px;
}
.container--cozy,
.container--horizontal-cozy {
--container-cell-horizontal-padding: 8px;
}
.container--comfy,
.container--horizontal-comfy {
--container-cell-horizontal-padding: 16px;
}
.container--smash,
.container--vertical-smash {
--container-row-vertical-rhythm-multiplier: 0;
}
.container--condensed,
.container--vertical-condensed {
--container-row-vertical-rhythm-multiplier: 0.5;
}
.container--cozy,
.container--vertical-cozy {
--container-row-vertical-rhythm-multiplier: 1;
}
.container--comfy,
.container--vertical-comfy {
--container-row-vertical-rhythm-multiplier: 2;
}
.container--chubby,
.container--vertical-chubby {
--container-row-vertical-rhythm-multiplier: 4;
}
.container--flush > .row {
margin-left: calc(-2 * var(--container-cell-horizontal-padding, var(--default-container-cell-horizontal-padding)));
margin-right: calc(-2 * var(--container-cell-horizontal-padding, var(--default-container-cell-horizontal-padding)));
}
.container--bordered {
--default-container-border-width: 1px;
padding-bottom: var(--container-border-width, var(--default-container-border-width));
}
.container--bordered > .row {
margin-left: calc(-1 * (var(--container-cell-horizontal-padding, var(--default-container-cell-horizontal-padding)) + var(--container-border-width, var(--default-container-border-width))));
margin-right: calc(-1 * (var(--container-cell-horizontal-padding, var(--default-container-cell-horizontal-padding)) + var(--container-border-width, var(--default-container-border-width))));
}
.container--bordered > .row .col,
.container--bordered > .row .col-1,
.container--bordered > .row .col-2,
.container--bordered > .row .col-3,
.container--bordered > .row .col-4,
.container--bordered > .row .col-5,
.container--bordered > .row .col-6,
.container--bordered > .row .col-7,
.container--bordered > .row .col-8,
.container--bordered > .row .col-9,
.container--bordered > .row .col-10,
.container--bordered > .row .col-11,
.container--bordered > .row .col-12,
.container--bordered > .row .col-auto,
.container--bordered > .row .col-lg-1,
.container--bordered > .row .col-lg-2,
.container--bordered > .row .col-lg-3,
.container--bordered > .row .col-lg-4,
.container--bordered > .row .col-lg-5,
.container--bordered > .row .col-lg-6,
.container--bordered > .row .col-lg-7,
.container--bordered > .row .col-lg-8,
.container--bordered > .row .col-lg-9,
.container--bordered > .row .col-lg-10,
.container--bordered > .row .col-lg-11,
.container--bordered > .row .col-lg-12,
.container--bordered > .row .col-lg-auto,
.container--bordered > .row .col-lg-shrink,
.container--bordered > .row .col-md-1,
.container--bordered > .row .col-md-2,
.container--bordered > .row .col-md-3,
.container--bordered > .row .col-md-4,
.container--bordered > .row .col-md-5,
.container--bordered > .row .col-md-6,
.container--bordered > .row .col-md-7,
.container--bordered > .row .col-md-8,
.container--bordered > .row .col-md-9,
.container--bordered > .row .col-md-10,
.container--bordered > .row .col-md-11,
.container--bordered > .row .col-md-12,
.container--bordered > .row .col-md-auto,
.container--bordered > .row .col-md-shrink,
.container--bordered > .row .col-shrink,
.container--bordered > .row .col-sm-1,
.container--bordered > .row .col-sm-2,
.container--bordered > .row .col-sm-3,
.container--bordered > .row .col-sm-4,
.container--bordered > .row .col-sm-5,
.container--bordered > .row .col-sm-6,
.container--bordered > .row .col-sm-7,
.container--bordered > .row .col-sm-8,
.container--bordered > .row .col-sm-9,
.container--bordered > .row .col-sm-10,
.container--bordered > .row .col-sm-11,
.container--bordered > .row .col-sm-12,
.container--bordered > .row .col-sm-auto,
.container--bordered > .row .col-sm-shrink,
.container--bordered > .row .col-xl-1,
.container--bordered > .row .col-xl-2,
.container--bordered > .row .col-xl-3,
.container--bordered > .row .col-xl-4,
.container--bordered > .row .col-xl-5,
.container--bordered > .row .col-xl-6,
.container--bordered > .row .col-xl-7,
.container--bordered > .row .col-xl-8,
.container--bordered > .row .col-xl-9,
.container--bordered > .row .col-xl-10,
.container--bordered > .row .col-xl-11,
.container--bordered > .row .col-xl-12,
.container--bordered > .row .col-xl-auto,
.container--bordered > .row .col-xl-shrink,
.container--bordered > .row .col-xx-1,
.container--bordered > .row .col-xx-2,
.container--bordered > .row .col-xx-3,
.container--bordered > .row .col-xx-4,
.container--bordered > .row .col-xx-5,
.container--bordered > .row .col-xx-6,
.container--bordered > .row .col-xx-7,
.container--bordered > .row .col-xx-8,
.container--bordered > .row .col-xx-9,
.container--bordered > .row .col-xx-10,
.container--bordered > .row .col-xx-11,
.container--bordered > .row .col-xx-12,
.container--bordered > .row .col-xx-auto,
.container--bordered > .row .col-xx-shrink {
box-shadow: var(--container-border-width, var(--default-container-border-width)) 0 0 0 var(--container-border-color, #d6d9e2),
0 var(--container-border-width, var(--default-container-border-width)) 0 0 var(--container-border-color, #d6d9e2),
var(--container-border-width, var(--default-container-border-width)) var(--container-border-width, var(--default-container-border-width)) 0 0 var(--container-border-color, #d6d9e2),
var(--container-border-width, var(--default-container-border-width)) 0 0 0 var(--container-border-color, #d6d9e2) inset,
0 var(--container-border-width, var(--default-container-border-width)) 0 0 var(--container-border-color, #d6d9e2) inset;
}
.row {
padding-bottom: calc(4px * var(--container-row-vertical-rhythm-multiplier, 0));
padding-top: calc(4px * var(--container-row-vertical-rhythm-multiplier, 0));
display: flex;
flex-wrap: wrap;
margin-left: calc(-1 * var(--container-cell-horizontal-padding, var(--default-container-cell-horizontal-padding)));
margin-right: calc(-1 * var(--container-cell-horizontal-padding, var(--default-container-cell-horizontal-padding)));
}
.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-auto,
.col-lg-shrink,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-auto,
.col-md-shrink,
.col-shrink,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-auto,
.col-sm-shrink,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-auto,
.col-xl-shrink,
.col-xx-1,
.col-xx-2,
.col-xx-3,
.col-xx-4,
.col-xx-5,
.col-xx-6,
.col-xx-7,
.col-xx-8,
.col-xx-9,
.col-xx-10,
.col-xx-11,
.col-xx-12,
.col-xx-auto,
.col-xx-shrink {
min-height: 1px;
padding-left: var(--container-cell-horizontal-padding, var(--default-container-cell-horizontal-padding));
padding-right: var(--container-cell-horizontal-padding, var(--default-container-cell-horizontal-padding));
position: relative;
width: 100%;
}
.col-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-1 {
margin-left: 8.333333333333332%;
}
.order-1 {
order: 1;
}
.col-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-2 {
margin-left: 16.666666666666664%;
}
.order-2 {
order: 2;
}
.col-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-3 {
margin-left: 25%;
}
.order-3 {
order: 3;
}
.col-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-4 {
margin-left: 33.33333333333333%;
}
.order-4 {
order: 4;
}
.col-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-5 {
margin-left: 41.66666666666667%;
}
.order-5 {
order: 5;
}
.col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-6 {
margin-left: 50%;
}
.order-6 {
order: 6;
}
.col-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-7 {
margin-left: 58.333333333333336%;
}
.order-7 {
order: 7;
}
.col-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-8 {
margin-left: 66.66666666666666%;
}
.order-8 {
order: 8;
}
.col-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-9 {
margin-left: 75%;
}
.order-9 {
order: 9;
}
.col-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-10 {
margin-left: 83.33333333333334%;
}
.order-10 {
order: 10;
}
.col-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-11 {
margin-left: 91.66666666666666%;
}
.order-11 {
order: 11;
}
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-12 {
margin-left: 100%;
}
.order-12 {
order: 12;
}
.col {
flex: 1 1 0;
max-width: 100%;
}
.col-auto {
flex: 0 0 auto;
max-width: none;
}
.col-shrink {
flex: 0 1 0;
max-width: none;
}
.order-first {
order: -1;
}
.order-last {
order: 13;
}
@media only screen and (min-width: 421px) and (max-width: 600px) {
.col-sm-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-sm-1 {
margin-left: 8.333333333333332%;
}
.order-sm-1 {
order: 1;
}
.col-sm-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-sm-2 {
margin-left: 16.666666666666664%;
}
.order-sm-2 {
order: 2;
}
.col-sm-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-sm-3 {
margin-left: 25%;
}
.order-sm-3 {
order: 3;
}
.col-sm-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-sm-4 {
margin-left: 33.33333333333333%;
}
.order-sm-4 {
order: 4;
}
.col-sm-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-sm-5 {
margin-left: 41.66666666666667%;
}
.order-sm-5 {
order: 5;
}
.col-sm-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-sm-6 {
margin-left: 50%;
}
.order-sm-6 {
order: 6;
}
.col-sm-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-sm-7 {
margin-left: 58.333333333333336%;
}
.order-sm-7 {
order: 7;
}
.col-sm-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-sm-8 {
margin-left: 66.66666666666666%;
}
.order-sm-8 {
order: 8;
}
.col-sm-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-sm-9 {
margin-left: 75%;
}
.order-sm-9 {
order: 9;
}
.col-sm-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-sm-10 {
margin-left: 83.33333333333334%;
}
.order-sm-10 {
order: 10;
}
.col-sm-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-sm-11 {
margin-left: 91.66666666666666%;
}
.order-sm-11 {
order: 11;
}
.col-sm-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-sm-12 {
margin-left: 100%;
}
.order-sm-12 {
order: 12;
}
.col-sm-auto {
flex: 0 0 auto;
max-width: none;
}
.col-sm-shrink {
flex: 0 1 0;
max-width: none;
}
.order-sm-first {
order: -1;
}
.order-sm-last {
order: 13;
}
}
@media only screen and (min-width: 601px) and (max-width: 900px) {
.col-md-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-md-1 {
margin-left: 8.333333333333332%;
}
.order-md-1 {
order: 1;
}
.col-md-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-md-2 {
margin-left: 16.666666666666664%;
}
.order-md-2 {
order: 2;
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-md-3 {
margin-left: 25%;
}
.order-md-3 {
order: 3;
}
.col-md-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-md-4 {
margin-left: 33.33333333333333%;
}
.order-md-4 {
order: 4;
}
.col-md-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-md-5 {
margin-left: 41.66666666666667%;
}
.order-md-5 {
order: 5;
}
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-md-6 {
margin-left: 50%;
}
.order-md-6 {
order: 6;
}
.col-md-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-md-7 {
margin-left: 58.333333333333336%;
}
.order-md-7 {
order: 7;
}
.col-md-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-md-8 {
margin-left: 66.66666666666666%;
}
.order-md-8 {
order: 8;
}
.col-md-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-md-9 {
margin-left: 75%;
}
.order-md-9 {
order: 9;
}
.col-md-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-md-10 {
margin-left: 83.33333333333334%;
}
.order-md-10 {
order: 10;
}
.col-md-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-md-11 {
margin-left: 91.66666666666666%;
}
.order-md-11 {
order: 11;
}
.col-md-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-md-12 {
margin-left: 100%;
}
.order-md-12 {
order: 12;
}
.col-md-auto {
flex: 0 0 auto;
max-width: none;
}
.col-md-shrink {
flex: 0 1 0;
max-width: none;
}
.order-md-first {
order: -1;
}
.order-md-last {
order: 13;
}
}
@media only screen and (min-width: 901px) and (max-width: 1200px) {
.col-lg-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-lg-1 {
margin-left: 8.333333333333332%;
}
.order-lg-1 {
order: 1;
}
.col-lg-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-lg-2 {
margin-left: 16.666666666666664%;
}
.order-lg-2 {
order: 2;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-lg-3 {
margin-left: 25%;
}
.order-lg-3 {
order: 3;
}
.col-lg-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-lg-4 {
margin-left: 33.33333333333333%;
}
.order-lg-4 {
order: 4;
}
.col-lg-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-lg-5 {
margin-left: 41.66666666666667%;
}
.order-lg-5 {
order: 5;
}
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-lg-6 {
margin-left: 50%;
}
.order-lg-6 {
order: 6;
}
.col-lg-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-lg-7 {
margin-left: 58.333333333333336%;
}
.order-lg-7 {
order: 7;
}
.col-lg-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-lg-8 {
margin-left: 66.66666666666666%;
}
.order-lg-8 {
order: 8;
}
.col-lg-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-lg-9 {
margin-left: 75%;
}
.order-lg-9 {
order: 9;
}
.col-lg-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-lg-10 {
margin-left: 83.33333333333334%;
}
.order-lg-10 {
order: 10;
}
.col-lg-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-lg-11 {
margin-left: 91.66666666666666%;
}
.order-lg-11 {
order: 11;
}
.col-lg-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-lg-12 {
margin-left: 100%;
}
.order-lg-12 {
order: 12;
}
.col-lg-auto {
flex: 0 0 auto;
max-width: none;
}
.col-lg-shrink {
flex: 0 1 0;
max-width: none;
}
.order-lg-first {
order: -1;
}
.order-lg-last {
order: 13;
}
}
@media only screen and (min-width: 1201px) and (max-width: 1800px) {
.col-xl-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-xl-1 {
margin-left: 8.333333333333332%;
}
.order-xl-1 {
order: 1;
}
.col-xl-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-xl-2 {
margin-left: 16.666666666666664%;
}
.order-xl-2 {
order: 2;
}
.col-xl-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-xl-3 {
margin-left: 25%;
}
.order-xl-3 {
order: 3;
}
.col-xl-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-xl-4 {
margin-left: 33.33333333333333%;
}
.order-xl-4 {
order: 4;
}
.col-xl-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-xl-5 {
margin-left: 41.66666666666667%;
}
.order-xl-5 {
order: 5;
}
.col-xl-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-xl-6 {
margin-left: 50%;
}
.order-xl-6 {
order: 6;
}
.col-xl-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-xl-7 {
margin-left: 58.333333333333336%;
}
.order-xl-7 {
order: 7;
}
.col-xl-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-xl-8 {
margin-left: 66.66666666666666%;
}
.order-xl-8 {
order: 8;
}
.col-xl-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-xl-9 {
margin-left: 75%;
}
.order-xl-9 {
order: 9;
}
.col-xl-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-xl-10 {
margin-left: 83.33333333333334%;
}
.order-xl-10 {
order: 10;
}
.col-xl-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-xl-11 {
margin-left: 91.66666666666666%;
}
.order-xl-11 {
order: 11;
}
.col-xl-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-xl-12 {
margin-left: 100%;
}
.order-xl-12 {
order: 12;
}
.col-xl-auto {
flex: 0 0 auto;
max-width: none;
}
.col-xl-shrink {
flex: 0 1 0;
max-width: none;
}
.order-xl-first {
order: -1;
}
.order-xl-last {
order: 13;
}
}
@media only screen and (min-width: 1801px) {
.col-xx-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-xx-1 {
margin-left: 8.333333333333332%;
}
.order-xx-1 {
order: 1;
}
.col-xx-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-xx-2 {
margin-left: 16.666666666666664%;
}
.order-xx-2 {
order: 2;
}
.col-xx-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-xx-3 {
margin-left: 25%;
}
.order-xx-3 {
order: 3;
}
.col-xx-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-xx-4 {
margin-left: 33.33333333333333%;
}
.order-xx-4 {
order: 4;
}
.col-xx-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-xx-5 {
margin-left: 41.66666666666667%;
}
.order-xx-5 {
order: 5;
}
.col-xx-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-xx-6 {
margin-left: 50%;
}
.order-xx-6 {
order: 6;
}
.col-xx-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-xx-7 {
margin-left: 58.333333333333336%;
}
.order-xx-7 {
order: 7;
}
.col-xx-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-xx-8 {
margin-left: 66.66666666666666%;
}
.order-xx-8 {
order: 8;
}
.col-xx-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-xx-9 {
margin-left: 75%;
}
.order-xx-9 {
order: 9;
}
.col-xx-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-xx-10 {
margin-left: 83.33333333333334%;
}
.order-xx-10 {
order: 10;
}
.col-xx-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-xx-11 {
margin-left: 91.66666666666666%;
}
.order-xx-11 {
order: 11;
}
.col-xx-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-xx-12 {
margin-left: 100%;
}
.order-xx-12 {
order: 12;
}
.col-xx-auto {
flex: 0 0 auto;
max-width: none;
}
.col-xx-shrink {
flex: 0 1 0;
max-width: none;
}
.order-xx-first {
order: -1;
}
.order-xx-last {
order: 13;
}
}
@media only screen and (min-width: 421px) {
.col-sm-up-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-sm-up-1 {
margin-left: 8.333333333333332%;
}
.order-sm-up-1 {
order: 1;
}
.col-sm-up-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-sm-up-2 {
margin-left: 16.666666666666664%;
}
.order-sm-up-2 {
order: 2;
}
.col-sm-up-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-sm-up-3 {
margin-left: 25%;
}
.order-sm-up-3 {
order: 3;
}
.col-sm-up-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-sm-up-4 {
margin-left: 33.33333333333333%;
}
.order-sm-up-4 {
order: 4;
}
.col-sm-up-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-sm-up-5 {
margin-left: 41.66666666666667%;
}
.order-sm-up-5 {
order: 5;
}
.col-sm-up-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-sm-up-6 {
margin-left: 50%;
}
.order-sm-up-6 {
order: 6;
}
.col-sm-up-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-sm-up-7 {
margin-left: 58.333333333333336%;
}
.order-sm-up-7 {
order: 7;
}
.col-sm-up-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-sm-up-8 {
margin-left: 66.66666666666666%;
}
.order-sm-up-8 {
order: 8;
}
.col-sm-up-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-sm-up-9 {
margin-left: 75%;
}
.order-sm-up-9 {
order: 9;
}
.col-sm-up-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-sm-up-10 {
margin-left: 83.33333333333334%;
}
.order-sm-up-10 {
order: 10;
}
.col-sm-up-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-sm-up-11 {
margin-left: 91.66666666666666%;
}
.order-sm-up-11 {
order: 11;
}
.col-sm-up-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-sm-up-12 {
margin-left: 100%;
}
.order-sm-up-12 {
order: 12;
}
.col-sm-up-auto {
flex: 0 0 auto;
max-width: none;
}
.col-sm-up-shrink {
flex: 0 1 0;
max-width: none;
}
.order-sm-up-first {
order: -1;
}
.order-sm-up-last {
order: 13;
}
}
@media only screen and (min-width: 601px) {
.col-md-up-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-md-up-1 {
margin-left: 8.333333333333332%;
}
.order-md-up-1 {
order: 1;
}
.col-md-up-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-md-up-2 {
margin-left: 16.666666666666664%;
}
.order-md-up-2 {
order: 2;
}
.col-md-up-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-md-up-3 {
margin-left: 25%;
}
.order-md-up-3 {
order: 3;
}
.col-md-up-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-md-up-4 {
margin-left: 33.33333333333333%;
}
.order-md-up-4 {
order: 4;
}
.col-md-up-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-md-up-5 {
margin-left: 41.66666666666667%;
}
.order-md-up-5 {
order: 5;
}
.col-md-up-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-md-up-6 {
margin-left: 50%;
}
.order-md-up-6 {
order: 6;
}
.col-md-up-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-md-up-7 {
margin-left: 58.333333333333336%;
}
.order-md-up-7 {
order: 7;
}
.col-md-up-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-md-up-8 {
margin-left: 66.66666666666666%;
}
.order-md-up-8 {
order: 8;
}
.col-md-up-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-md-up-9 {
margin-left: 75%;
}
.order-md-up-9 {
order: 9;
}
.col-md-up-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-md-up-10 {
margin-left: 83.33333333333334%;
}
.order-md-up-10 {
order: 10;
}
.col-md-up-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-md-up-11 {
margin-left: 91.66666666666666%;
}
.order-md-up-11 {
order: 11;
}
.col-md-up-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-md-up-12 {
margin-left: 100%;
}
.order-md-up-12 {
order: 12;
}
.col-md-up-auto {
flex: 0 0 auto;
max-width: none;
}
.col-md-up-shrink {
flex: 0 1 0;
max-width: none;
}
.order-md-up-first {
order: -1;
}
.order-md-up-last {
order: 13;
}
}
@media only screen and (min-width: 901px) {
.col-lg-up-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-lg-up-1 {
margin-left: 8.333333333333332%;
}
.order-lg-up-1 {
order: 1;
}
.col-lg-up-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-lg-up-2 {
margin-left: 16.666666666666664%;
}
.order-lg-up-2 {
order: 2;
}
.col-lg-up-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-lg-up-3 {
margin-left: 25%;
}
.order-lg-up-3 {
order: 3;
}
.col-lg-up-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-lg-up-4 {
margin-left: 33.33333333333333%;
}
.order-lg-up-4 {
order: 4;
}
.col-lg-up-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-lg-up-5 {
margin-left: 41.66666666666667%;
}
.order-lg-up-5 {
order: 5;
}
.col-lg-up-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-lg-up-6 {
margin-left: 50%;
}
.order-lg-up-6 {
order: 6;
}
.col-lg-up-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-lg-up-7 {
margin-left: 58.333333333333336%;
}
.order-lg-up-7 {
order: 7;
}
.col-lg-up-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-lg-up-8 {
margin-left: 66.66666666666666%;
}
.order-lg-up-8 {
order: 8;
}
.col-lg-up-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-lg-up-9 {
margin-left: 75%;
}
.order-lg-up-9 {
order: 9;
}
.col-lg-up-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-lg-up-10 {
margin-left: 83.33333333333334%;
}
.order-lg-up-10 {
order: 10;
}
.col-lg-up-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-lg-up-11 {
margin-left: 91.66666666666666%;
}
.order-lg-up-11 {
order: 11;
}
.col-lg-up-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-lg-up-12 {
margin-left: 100%;
}
.order-lg-up-12 {
order: 12;
}
.col-lg-up-auto {
flex: 0 0 auto;
max-width: none;
}
.col-lg-up-shrink {
flex: 0 1 0;
max-width: none;
}
.order-lg-up-first {
order: -1;
}
.order-lg-up-last {
order: 13;
}
}
@media only screen and (min-width: 1201px) {
.col-xl-up-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-xl-up-1 {
margin-left: 8.333333333333332%;
}
.order-xl-up-1 {
order: 1;
}
.col-xl-up-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-xl-up-2 {
margin-left: 16.666666666666664%;
}
.order-xl-up-2 {
order: 2;
}
.col-xl-up-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-xl-up-3 {
margin-left: 25%;
}
.order-xl-up-3 {
order: 3;
}
.col-xl-up-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-xl-up-4 {
margin-left: 33.33333333333333%;
}
.order-xl-up-4 {
order: 4;
}
.col-xl-up-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-xl-up-5 {
margin-left: 41.66666666666667%;
}
.order-xl-up-5 {
order: 5;
}
.col-xl-up-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-xl-up-6 {
margin-left: 50%;
}
.order-xl-up-6 {
order: 6;
}
.col-xl-up-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-xl-up-7 {
margin-left: 58.333333333333336%;
}
.order-xl-up-7 {
order: 7;
}
.col-xl-up-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-xl-up-8 {
margin-left: 66.66666666666666%;
}
.order-xl-up-8 {
order: 8;
}
.col-xl-up-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-xl-up-9 {
margin-left: 75%;
}
.order-xl-up-9 {
order: 9;
}
.col-xl-up-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-xl-up-10 {
margin-left: 83.33333333333334%;
}
.order-xl-up-10 {
order: 10;
}
.col-xl-up-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-xl-up-11 {
margin-left: 91.66666666666666%;
}
.order-xl-up-11 {
order: 11;
}
.col-xl-up-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-xl-up-12 {
margin-left: 100%;
}
.order-xl-up-12 {
order: 12;
}
.col-xl-up-auto {
flex: 0 0 auto;
max-width: none;
}
.col-xl-up-shrink {
flex: 0 1 0;
max-width: none;
}
.order-xl-up-first {
order: -1;
}
.order-xl-up-last {
order: 13;
}
}
@media only screen and (min-width: 1801px) {
.col-xx-up-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-xx-up-1 {
margin-left: 8.333333333333332%;
}
.order-xx-up-1 {
order: 1;
}
.col-xx-up-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-xx-up-2 {
margin-left: 16.666666666666664%;
}
.order-xx-up-2 {
order: 2;
}
.col-xx-up-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-xx-up-3 {
margin-left: 25%;
}
.order-xx-up-3 {
order: 3;
}
.col-xx-up-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-xx-up-4 {
margin-left: 33.33333333333333%;
}
.order-xx-up-4 {
order: 4;
}
.col-xx-up-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-xx-up-5 {
margin-left: 41.66666666666667%;
}
.order-xx-up-5 {
order: 5;
}
.col-xx-up-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-xx-up-6 {
margin-left: 50%;
}
.order-xx-up-6 {
order: 6;
}
.col-xx-up-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-xx-up-7 {
margin-left: 58.333333333333336%;
}
.order-xx-up-7 {
order: 7;
}
.col-xx-up-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-xx-up-8 {
margin-left: 66.66666666666666%;
}
.order-xx-up-8 {
order: 8;
}
.col-xx-up-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-xx-up-9 {
margin-left: 75%;
}
.order-xx-up-9 {
order: 9;
}
.col-xx-up-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-xx-up-10 {
margin-left: 83.33333333333334%;
}
.order-xx-up-10 {
order: 10;
}
.col-xx-up-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-xx-up-11 {
margin-left: 91.66666666666666%;
}
.order-xx-up-11 {
order: 11;
}
.col-xx-up-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-xx-up-12 {
margin-left: 100%;
}
.order-xx-up-12 {
order: 12;
}
.col-xx-up-auto {
flex: 0 0 auto;
max-width: none;
}
.col-xx-up-shrink {
flex: 0 1 0;
max-width: none;
}
.order-xx-up-first {
order: -1;
}
.order-xx-up-last {
order: 13;
}
}
@media only screen and (max-width: 600px) {
.col-sm-down-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-sm-down-1 {
margin-left: 8.333333333333332%;
}
.order-sm-down-1 {
order: 1;
}
.col-sm-down-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-sm-down-2 {
margin-left: 16.666666666666664%;
}
.order-sm-down-2 {
order: 2;
}
.col-sm-down-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-sm-down-3 {
margin-left: 25%;
}
.order-sm-down-3 {
order: 3;
}
.col-sm-down-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-sm-down-4 {
margin-left: 33.33333333333333%;
}
.order-sm-down-4 {
order: 4;
}
.col-sm-down-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-sm-down-5 {
margin-left: 41.66666666666667%;
}
.order-sm-down-5 {
order: 5;
}
.col-sm-down-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-sm-down-6 {
margin-left: 50%;
}
.order-sm-down-6 {
order: 6;
}
.col-sm-down-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-sm-down-7 {
margin-left: 58.333333333333336%;
}
.order-sm-down-7 {
order: 7;
}
.col-sm-down-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-sm-down-8 {
margin-left: 66.66666666666666%;
}
.order-sm-down-8 {
order: 8;
}
.col-sm-down-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-sm-down-9 {
margin-left: 75%;
}
.order-sm-down-9 {
order: 9;
}
.col-sm-down-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-sm-down-10 {
margin-left: 83.33333333333334%;
}
.order-sm-down-10 {
order: 10;
}
.col-sm-down-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-sm-down-11 {
margin-left: 91.66666666666666%;
}
.order-sm-down-11 {
order: 11;
}
.col-sm-down-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-sm-down-12 {
margin-left: 100%;
}
.order-sm-down-12 {
order: 12;
}
.col-sm-down-auto {
flex: 0 0 auto;
max-width: none;
}
.col-sm-down-shrink {
flex: 0 1 0;
max-width: none;
}
.order-sm-down-first {
order: -1;
}
.order-sm-down-last {
order: 13;
}
}
@media only screen and (max-width: 900px) {
.col-md-down-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-md-down-1 {
margin-left: 8.333333333333332%;
}
.order-md-down-1 {
order: 1;
}
.col-md-down-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-md-down-2 {
margin-left: 16.666666666666664%;
}
.order-md-down-2 {
order: 2;
}
.col-md-down-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-md-down-3 {
margin-left: 25%;
}
.order-md-down-3 {
order: 3;
}
.col-md-down-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-md-down-4 {
margin-left: 33.33333333333333%;
}
.order-md-down-4 {
order: 4;
}
.col-md-down-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-md-down-5 {
margin-left: 41.66666666666667%;
}
.order-md-down-5 {
order: 5;
}
.col-md-down-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-md-down-6 {
margin-left: 50%;
}
.order-md-down-6 {
order: 6;
}
.col-md-down-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-md-down-7 {
margin-left: 58.333333333333336%;
}
.order-md-down-7 {
order: 7;
}
.col-md-down-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-md-down-8 {
margin-left: 66.66666666666666%;
}
.order-md-down-8 {
order: 8;
}
.col-md-down-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-md-down-9 {
margin-left: 75%;
}
.order-md-down-9 {
order: 9;
}
.col-md-down-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-md-down-10 {
margin-left: 83.33333333333334%;
}
.order-md-down-10 {
order: 10;
}
.col-md-down-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-md-down-11 {
margin-left: 91.66666666666666%;
}
.order-md-down-11 {
order: 11;
}
.col-md-down-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-md-down-12 {
margin-left: 100%;
}
.order-md-down-12 {
order: 12;
}
.col-md-down-auto {
flex: 0 0 auto;
max-width: none;
}
.col-md-down-shrink {
flex: 0 1 0;
max-width: none;
}
.order-md-down-first {
order: -1;
}
.order-md-down-last {
order: 13;
}
}
@media only screen and (max-width: 1200px) {
.col-lg-down-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-lg-down-1 {
margin-left: 8.333333333333332%;
}
.order-lg-down-1 {
order: 1;
}
.col-lg-down-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-lg-down-2 {
margin-left: 16.666666666666664%;
}
.order-lg-down-2 {
order: 2;
}
.col-lg-down-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-lg-down-3 {
margin-left: 25%;
}
.order-lg-down-3 {
order: 3;
}
.col-lg-down-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-lg-down-4 {
margin-left: 33.33333333333333%;
}
.order-lg-down-4 {
order: 4;
}
.col-lg-down-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-lg-down-5 {
margin-left: 41.66666666666667%;
}
.order-lg-down-5 {
order: 5;
}
.col-lg-down-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-lg-down-6 {
margin-left: 50%;
}
.order-lg-down-6 {
order: 6;
}
.col-lg-down-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-lg-down-7 {
margin-left: 58.333333333333336%;
}
.order-lg-down-7 {
order: 7;
}
.col-lg-down-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-lg-down-8 {
margin-left: 66.66666666666666%;
}
.order-lg-down-8 {
order: 8;
}
.col-lg-down-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-lg-down-9 {
margin-left: 75%;
}
.order-lg-down-9 {
order: 9;
}
.col-lg-down-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-lg-down-10 {
margin-left: 83.33333333333334%;
}
.order-lg-down-10 {
order: 10;
}
.col-lg-down-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-lg-down-11 {
margin-left: 91.66666666666666%;
}
.order-lg-down-11 {
order: 11;
}
.col-lg-down-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-lg-down-12 {
margin-left: 100%;
}
.order-lg-down-12 {
order: 12;
}
.col-lg-down-auto {
flex: 0 0 auto;
max-width: none;
}
.col-lg-down-shrink {
flex: 0 1 0;
max-width: none;
}
.order-lg-down-first {
order: -1;
}
.order-lg-down-last {
order: 13;
}
}
@media only screen and (max-width: 1800px) {
.col-xl-down-1 {
flex: 0 0 8.333333333333332%;
max-width: 8.333333333333332%;
}
.offset-xl-down-1 {
margin-left: 8.333333333333332%;
}
.order-xl-down-1 {
order: 1;
}
.col-xl-down-2 {
flex: 0 0 16.666666666666664%;
max-width: 16.666666666666664%;
}
.offset-xl-down-2 {
margin-left: 16.666666666666664%;
}
.order-xl-down-2 {
order: 2;
}
.col-xl-down-3 {
flex: 0 0 25%;
max-width: 25%;
}
.offset-xl-down-3 {
margin-left: 25%;
}
.order-xl-down-3 {
order: 3;
}
.col-xl-down-4 {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
.offset-xl-down-4 {
margin-left: 33.33333333333333%;
}
.order-xl-down-4 {
order: 4;
}
.col-xl-down-5 {
flex: 0 0 41.66666666666667%;
max-width: 41.66666666666667%;
}
.offset-xl-down-5 {
margin-left: 41.66666666666667%;
}
.order-xl-down-5 {
order: 5;
}
.col-xl-down-6 {
flex: 0 0 50%;
max-width: 50%;
}
.offset-xl-down-6 {
margin-left: 50%;
}
.order-xl-down-6 {
order: 6;
}
.col-xl-down-7 {
flex: 0 0 58.333333333333336%;
max-width: 58.333333333333336%;
}
.offset-xl-down-7 {
margin-left: 58.333333333333336%;
}
.order-xl-down-7 {
order: 7;
}
.col-xl-down-8 {
flex: 0 0 66.66666666666666%;
max-width: 66.66666666666666%;
}
.offset-xl-down-8 {
margin-left: 66.66666666666666%;
}
.order-xl-down-8 {
order: 8;
}
.col-xl-down-9 {
flex: 0 0 75%;
max-width: 75%;
}
.offset-xl-down-9 {
margin-left: 75%;
}
.order-xl-down-9 {
order: 9;
}
.col-xl-down-10 {
flex: 0 0 83.33333333333334%;
max-width: 83.33333333333334%;
}
.offset-xl-down-10 {
margin-left: 83.33333333333334%;
}
.order-xl-down-10 {
order: 10;
}
.col-xl-down-11 {
flex: 0 0 91.66666666666666%;
max-width: 91.66666666666666%;
}
.offset-xl-down-11 {
margin-left: 91.66666666666666%;
}
.order-xl-down-11 {
order: 11;
}
.col-xl-down-12 {
flex: 0 0 100%;
max-width: 100%;
}
.offset-xl-down-12 {
margin-left: 100%;
}
.order-xl-down-12 {
order: 12;
}
.col-xl-down-auto {
flex: 0 0 auto;
max-width: none;
}
.col-xl-down-shrink {
flex: 0 1 0;
max-width: none;
}
.order-xl-down-first {
order: -1;
}
.order-xl-down-last {
order: 13;
}
}
.overflow-visible {
overflow: visible !important;
}
.overflow-auto {
overflow: auto !important;
}
.pos-absolute {
position: absolute !important;
}
.pos-relative {
position: relative !important;
}
.pos-fixed {
position: fixed !important;
}
.pos-top {
top: 0 !important;
}
.pos-bottom {
bottom: 0 !important;
}
.pos-left {
left: 0 !important;
}
.pos-right {
right: 0 !important;
}
@media only screen and (max-width: 420px) {
.visible-lg,
.visible-lg-up,
.visible-md,
.visible-md-up,
.visible-sm,
.visible-sm-up,
.visible-xl,
.visible-xl-up,
.visible-xx,
.visible-xx-up {
display: none !important;
}
}
@media only screen and (min-width: 421px) and (max-width: 600px) {
.visible-lg,
.visible-lg-up,
.visible-md,
.visible-md-up,
.visible-xl,
.visible-xl-up,
.visible-xs,
.visible-xx,
.visible-xx-up {
display: none !important;
}
}
@media only screen and (min-width: 601px) and (max-width: 900px) {
.visible-lg,
.visible-lg-up,
.visible-sm,
.visible-sm-down,
.visible-xl,
.visible-xl-up,
.visible-xs,
.visible-xx,
.visible-xx-up {
display: none !important;
}
}
@media only screen and (min-width: 901px) and (max-width: 1200px) {
.visible-md,
.visible-md-down,
.visible-sm,
.visible-sm-down,
.visible-xl,
.visible-xl-up,
.visible-xs,
.visible-xx,
.visible-xx-up {
display: none !important;
}
}
@media only screen and (min-width: 1201px) and (max-width: 1800px) {
.visible-lg,
.visible-lg-down,
.visible-md,
.visible-md-down,
.visible-sm,
.visible-sm-down,
.visible-xs,
.visible-xx,
.visible-xx-up {
display: none !important;
}
}
@media only screen and (min-width: 1801px) {
.visible-lg,
.visible-lg-down,
.visible-md,
.visible-md-down,
.visible-sm,
.visible-sm-down,
.visible-xl,
.visible-xl-down,
.visible-xs {
display: none !important;
}
}
.mt-0 {
margin-top: 0 !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.ml-0 {
margin-left: 0 !important;
}
.mr-0,
.mx-0 {
margin-right: 0 !important;
}
.mx-0 {
margin-left: 0 !important;
}
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.m-0 {
margin: 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pl-0 {
padding-left: 0 !important;
}
.pr-0,
.px-0 {
padding-right: 0 !important;
}
.px-0 {
padding-left: 0 !important;
}
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-0 {
padding: 0 !important;
}
.mt-1 {
margin-top: 4px !important;
}
.mb-1 {
margin-bottom: 4px !important;
}
.ml-1 {
margin-left: 4px !important;
}
.mr-1,
.mx-1 {
margin-right: 4px !important;
}
.mx-1 {
margin-left: 4px !important;
}
.my-1 {
margin-top: 4px !important;
margin-bottom: 4px !important;
}
.m-1 {
margin: 4px !important;
}
.pt-1 {
padding-top: 4px !important;
}
.pb-1 {
padding-bottom: 4px !important;
}
.pl-1 {
padding-left: 4px !important;
}
.pr-1,
.px-1 {
padding-right: 4px !important;
}
.px-1 {
padding-left: 4px !important;
}
.py-1 {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
.p-1 {
padding: 4px !important;
}
.mt-2 {
margin-top: 8px !important;
}
.mb-2 {
margin-bottom: 8px !important;
}
.ml-2 {
margin-left: 8px !important;
}
.mr-2,
.mx-2 {
margin-right: 8px !important;
}
.mx-2 {
margin-left: 8px !important;
}
.my-2 {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.m-2 {
margin: 8px !important;
}
.pt-2 {
padding-top: 8px !important;
}
.pb-2 {
padding-bottom: 8px !important;
}
.pl-2 {
padding-left: 8px !important;
}
.pr-2,
.px-2 {
padding-right: 8px !important;
}
.px-2 {
padding-left: 8px !important;
}
.py-2 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.p-2 {
padding: 8px !important;
}
.mt-3 {
margin-top: 12px !important;
}
.mb-3 {
margin-bottom: 12px !important;
}
.ml-3 {
margin-left: 12px !important;
}
.mr-3,
.mx-3 {
margin-right: 12px !important;
}
.mx-3 {
margin-left: 12px !important;
}
.my-3 {
margin-top: 12px !important;
margin-bottom: 12px !important;
}
.m-3 {
margin: 12px !important;
}
.pt-3 {
padding-top: 12px !important;
}
.pb-3 {
padding-bottom: 12px !important;
}
.pl-3 {
padding-left: 12px !important;
}
.pr-3,
.px-3 {
padding-right: 12px !important;
}
.px-3 {
padding-left: 12px !important;
}
.py-3 {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.p-3 {
padding: 12px !important;
}
.mt-4 {
margin-top: 16px !important;
}
.mb-4 {
margin-bottom: 16px !important;
}
.ml-4 {
margin-left: 16px !important;
}
.mr-4,
.mx-4 {
margin-right: 16px !important;
}
.mx-4 {
margin-left: 16px !important;
}
.my-4 {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.m-4 {
margin: 16px !important;
}
.pt-4 {
padding-top: 16px !important;
}
.pb-4 {
padding-bottom: 16px !important;
}
.pl-4 {
padding-left: 16px !important;
}
.pr-4,
.px-4 {
padding-right: 16px !important;
}
.px-4 {
padding-left: 16px !important;
}
.py-4 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.p-4 {
padding: 16px !important;
}
.mt-5 {
margin-top: 20px !important;
}
.mb-5 {
margin-bottom: 20px !important;
}
.ml-5 {
margin-left: 20px !important;
}
.mr-5,
.mx-5 {
margin-right: 20px !important;
}
.mx-5 {
margin-left: 20px !important;
}
.my-5 {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
.m-5 {
margin: 20px !important;
}
.pt-5 {
padding-top: 20px !important;
}
.pb-5 {
padding-bottom: 20px !important;
}
.pl-5 {
padding-left: 20px !important;
}
.pr-5,
.px-5 {
padding-right: 20px !important;
}
.px-5 {
padding-left: 20px !important;
}
.py-5 {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.p-5 {
padding: 20px !important;
}
.mt-6 {
margin-top: 24px !important;
}
.mb-6 {
margin-bottom: 24px !important;
}
.ml-6 {
margin-left: 24px !important;
}
.mr-6,
.mx-6 {
margin-right: 24px !important;
}
.mx-6 {
margin-left: 24px !important;
}
.my-6 {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.m-6 {
margin: 24px !important;
}
.pt-6 {
padding-top: 24px !important;
}
.pb-6 {
padding-bottom: 24px !important;
}
.pl-6 {
padding-left: 24px !important;
}
.pr-6,
.px-6 {
padding-right: 24px !important;
}
.px-6 {
padding-left: 24px !important;
}
.py-6 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.p-6 {
padding: 24px !important;
}
.mt-7 {
margin-top: 28px !important;
}
.mb-7 {
margin-bottom: 28px !important;
}
.ml-7 {
margin-left: 28px !important;
}
.mr-7,
.mx-7 {
margin-right: 28px !important;
}
.mx-7 {
margin-left: 28px !important;
}
.my-7 {
margin-top: 28px !important;
margin-bottom: 28px !important;
}
.m-7 {
margin: 28px !important;
}
.pt-7 {
padding-top: 28px !important;
}
.pb-7 {
padding-bottom: 28px !important;
}
.pl-7 {
padding-left: 28px !important;
}
.pr-7,
.px-7 {
padding-right: 28px !important;
}
.px-7 {
padding-left: 28px !important;
}
.py-7 {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
.p-7 {
padding: 28px !important;
}
.mt-8 {
margin-top: 32px !important;
}
.mb-8 {
margin-bottom: 32px !important;
}
.ml-8 {
margin-left: 32px !important;
}
.mr-8,
.mx-8 {
margin-right: 32px !important;
}
.mx-8 {
margin-left: 32px !important;
}
.my-8 {
margin-top: 32px !important;
margin-bottom: 32px !important;
}
.m-8 {
margin: 32px !important;
}
.pt-8 {
padding-top: 32px !important;
}
.pb-8 {
padding-bottom: 32px !important;
}
.pl-8 {
padding-left: 32px !important;
}
.pr-8,
.px-8 {
padding-right: 32px !important;
}
.px-8 {
padding-left: 32px !important;
}
.py-8 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.p-8 {
padding: 32px !important;
}
.mt-neg-0 {
margin-top: 0 !important;
}
.mb-neg-0 {
margin-bottom: 0 !important;
}
.ml-neg-0 {
margin-left: 0 !important;
}
.mr-neg-0 {
margin-right: 0 !important;
}
.mt-neg-1 {
margin-top: -4px !important;
}
.mb-neg-1 {
margin-bottom: -4px !important;
}
.ml-neg-1 {
margin-left: -4px !important;
}
.mr-neg-1 {
margin-right: -4px !important;
}
.mt-neg-2 {
margin-top: -8px !important;
}
.mb-neg-2 {
margin-bottom: -8px !important;
}
.ml-neg-2 {
margin-left: -8px !important;
}
.mr-neg-2 {
margin-right: -8px !important;
}
.mt-neg-3 {
margin-top: -12px !important;
}
.mb-neg-3 {
margin-bottom: -12px !important;
}
.ml-neg-3 {
margin-left: -12px !important;
}
.mr-neg-3 {
margin-right: -12px !important;
}
.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.width-full {
width: 100% !important;
}
.width-smash {
width: 0 !important;
}
.width-auto {
width: auto !important;
}
.height-full {
height: 100% !important;
}
.height-smash {
height: 0 !important;
}
.type-100 {
font-weight: 100 !important;
}
.type-300 {
font-weight: 300 !important;
}
.type-400 {
font-weight: 400 !important;
}
.type-700 {
font-weight: 700 !important;
}
.type-900 {
font-weight: 900 !important;
}
.type-smallest {
font-size: 9px !important;
}
.type-smaller {
font-size: 10px !important;
}
.type-small {
font-size: 11px !important;
}
.type-regular {
font-size: 12px !important;
}
.type-large {
font-size: 13px !important;
}
.type-larger {
font-size: 20px !important;
}
.type-largest {
font-size: 28px !important;
}
.type-left {
text-align: left !important;
}
.type-center {
text-align: center !important;
}
.type-right {
text-align: right !important;
}
.type-uppercase {
text-transform: uppercase !important;
}
.type-no-case {
text-transform: none !important;
}
.type-no-wrap {
white-space: nowrap !important;
}
.type-comfy-line-height {
line-height: 1.5em;
}
.type-normal-line-height {
line-height: normal !important;
}
.type-smash-line-height {
line-height: 1 !important;
}
.type-ellipsis {
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.type-jaze-title {
letter-spacing: 0.5px;
text-transform: uppercase;
}
.type-jaze-title,
.type-jaze-title-secondary {
color: var(--jaze-color-text-primary, #525461);
font-size: 11px;
font-weight: 700;
}
.type-jaze-title-secondary {
letter-spacing: normal;
text-transform: none;
}
.type-jaze-title-tertiary {
font-size: 13px;
}
.type-reset,
.type-jaze-title-tertiary {
color: var(--jaze-color-text-primary, #525461);
}
.type-reset {
font-size: 12px;
font-weight: 400;
letter-spacing: normal;
line-height: normal;
text-align: left;
text-transform: none;
white-space: normal;
}
.jazeAccordion .jazeAccordionLabel {
padding-bottom: 20px;
padding-top: 20px;
}
.jazeAccordion--condensed .jazeAccordionLabel {
padding-bottom: 12px;
padding-top: 12px;
}
.jazeAccordion--indented .jazeAccordionLabel {
padding-left: 28px;
padding-right: 28px;
}
.jazeAccordion--smash .jazeAccordionLabel {
margin-padding: 0px;
}
.jazeAccordion--standalone {
border-top: 1px solid var(--accordion-border-color, #d6d9e2);
}
.jazeAccordion--standalone,
.jazeAccordion__item {
border-bottom: 1px solid var(--accordion-border-color, #d6d9e2);
}
.jazeAccordion__item:last-child {
border-bottom: 0;
}
.jazeAccordion__item:not(.is-accordion-expanded) .jazeAccordionContent {
max-height: 0;
}
.jazeAccordionContent {
max-height: 2000px;
overflow: hidden;
transition: max-height 0.4s ease;
}
.jazeBlock {
margin-left: calc(4px * var(--block-horizontal-rhythm-multiplier, 0));
margin-right: calc(4px * var(--block-horizontal-rhythm-multiplier, 0));
margin-bottom: calc(4px * var(--block-vertical-rhythm-multiplier, 0));
margin-top: calc(4px * var(--block-vertical-rhythm-multiplier, 0));
align-items: center;
background-color: var(--block-background-color, transparent);
box-shadow: var(--block-box-shadow);
color: var(--block-font-color, #a4a7b5);
cursor: pointer;
display: flex;
border-radius: 4px;
flex-direction: column;
position: relative;
width: var(--block-width, auto);
height: var(--block-height, auto);
}
.jazeBlock:hover:not(.is-item-selected) {
--block-box-shadow: 0 var(--block-drop-shadow-size) calc(3 * var(--block-drop-shadow-size)) 0 rgba(21, 23, 37, 0.2);
background-color: var(--block-hover-background-color, var(--block-background-color));
box-shadow: var(--block-hover-box-shadow, var(--block-box-shadow));
}
.jazeBlock:hover .is-hidden-on-hover,
.jazeBlock:not(:hover) .is-visible-on-hover {
display: none;
}
.jazeBlock.is-item-selected {
background-color: var(--block-selected-background-color, rgba(0, 111, 255, 0.05));
box-shadow: 0 0 0 1px var(--block-selected-border-color, var(--color-500));
}
.jazeBlock.is-item-disabled {
pointer-events: none;
opacity: 0.2;
}
.jazeBlock.is-item-muted {
opacity: 0.5;
}
.jazeBlock--small {
--block-section-horizontal-rhythm-multiplier: 2;
--block-section-image-height: 68px;
--block-alerts-offset: 8px;
color: var(--block-small-font-color, #525461);
}
.jazeBlock--medium {
--block-section-horizontal-rhythm-multiplier: 5;
--block-section-icon-height: 128px;
--block-section-image-height: 128px;
--block-alerts-offset: 14px;
}
.jazeBlock--large {
--block-section-horizontal-rhythm-multiplier: 5;
--block-section-icon-height: 144px;
--block-section-image-height: 188px;
--block-alerts-offset: 14px;
}
.jazeBlock__section {
padding-left: calc(4px * var(--block-section-horizontal-rhythm-multiplier));
padding-right: calc(4px * var(--block-section-horizontal-rhythm-multiplier));
align-items: center;
display: flex;
height: var(--block-section-height, auto);
flex-direction: column;
justify-content: center;
position: relative;
width: 100%;
}
.jazeBlock__section--headerIcon {
--block-section-horizontal-rhythm-multiplier: 0;
--block-section-height: var(--block-section-icon-height);
}
.jazeBlock__section--image {
padding-left: 0px;
padding-right: 0px;
--block-section-height: var(--block-section-image-height);
overflow: hidden;
}
.jazeBlock__section--image:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.jazeBlock__section--withIcons {
margin-top: 8px;
padding-bottom: 16px;
}
.jazeBlock__section--withIcons:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.jazeBlock:hover .jazeBlock__section--withIcons {
--block-row-divider-color: transparent;
background-color: var(--block-hover-section-with-icons-background-color, #f4f4f5);
}
.jazeBlock__section--below {
position: absolute;
bottom: -20px;
}
.jazeBlock__row {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.jazeBlock__row--withDivider {
padding-top: 12px;
border-top: 1px solid var(--block-row-divider-color, #d6d9e2);
}
.jazeBlock__row--imageData {
padding-left: calc(4px * var(--block-section-horizontal-rhythm-multiplier));
padding-right: calc(4px * var(--block-section-horizontal-rhythm-multiplier));
padding-bottom: 12px;
bottom: 0;
color: #fff;
left: 0;
position: absolute;
right: 0;
}
.jazeBlock__title {
color: var(--block-title-font-color, #525461);
font-size: 13px;
font-weight: 700;
}
.jazeBlock__subTitle,
.jazeBlock__title {
margin-bottom: 4px;
margin-top: 4px;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.jazeBlock__subTitle {
font-size: 11px;
}
.jazeBlock__subTitle--uppercase {
font-size: 9px;
letter-spacing: 0.1rem;
text-transform: uppercase;
}
.jazeBlock__iconTextGroup {
display: flex;
flex-wrap: no-wrap;
}
.jazeBlock__alerts {
align-items: center;
display: flex;
position: absolute;
right: var(--block-alerts-offset);
top: var(--block-alerts-offset);
}
.jazeBlockContainer {
display: flex;
flex: 1 0 auto;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: var(--block-margin-bottom, calc((var(--block-drop-shadow-size) * 3 / 2) + var(--block-drop-shadow-size) - (var(--block-vertical-rhythm-multiplier) * 4px)));
}
.jazeBlockContainer--small {
--block-width: 112px;
--block-height: 112px;
--block-horizontal-rhythm-multiplier: 1;
--block-vertical-rhythm-multiplier: 4;
--block-drop-shadow-size: 7px;
}
.jazeBlockContainer--medium {
--block-width: 232px;
--block-height: 232px;
--block-horizontal-rhythm-multiplier: 2;
--block-vertical-rhythm-multiplier: 4;
--block-drop-shadow-size: 15px;
}
.jazeBlockContainer--large {
--block-width: 290px;
--block-height: 290px;
--block-horizontal-rhythm-multiplier: 4;
--block-vertical-rhythm-multiplier: 4;
--block-drop-shadow-size: 15px;
}
.jazeBlockContainer--flush {
margin-left: calc(4px * (-1 * var(--block-horizontal-rhythm-multiplier, 0)));
margin-right: calc(4px * (-1 * var(--block-horizontal-rhythm-multiplier, 0)));
}
.jazeBlockContainer--switcher {
--block-width: 50%;
--block-vertical-rhythm-multiplier: 2;
--block-drop-shadow-size: 0;
--block-margin-bottom: 0;
}
.jazeBlockContainer--switcher .jazeBlock:hover {
background-color: var(--block-background-color);
box-shadow: var(--block-box-shadow);
}
.jazeButton {
background: var(--button-background-color, transparent);
border-radius: 6px;
border: 1px solid var(--button-border-color, var(--button-background-color));
color: var(--button-font-color);
cursor: pointer;
display: inline-block;
font-size: var(--button-font-size, 11px);
font-weight: var(--button-font-weight, normal);
letter-spacing: 0.25px;
line-height: 14px;
outline: none;
padding: var(--button-padding-vertical, 7px) var(--button-padding-horizontal, 24px);
position: relative;
text-align: center;
}
.jazeButton.is-disabled,
.jazeButton:disabled {
cursor: default;
opacity: var(--button-disabled-opacity, 0.5);
pointer-events: none;
}
.jazeButton[type="button"],
.jazeButton[type="reset"],
.jazeButton[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.jazeButton--noWrap {
white-space: nowrap;
}
.jazeButton--fullWidth {
padding-left: 0;
padding-right: 0;
width: 100%;
}
.jazeButton--pill {
border-radius: 20px;
}
.jazeButton--primary {
--button-background-color: var(--button-primary-background-color, var(--color-50));
--button-border-color: var(--button-primary-border-color, var(--button-background-color));
--button-font-color: var(--button-primary-font-color, var(--color-500));
}
.jazeButton--primary:hover {
--button-background-color: var(--button-primary-hover-background-color, var(--color-100));
}
.jazeButton--primary:active {
--button-background-color: var(--button-primary-active-background-color, var(--color-200));
}
.jazeButton--primary:focus {
--button-border-color: var(--button-primary-focus-border-color, var(--color-400));
}
.jazeButton--pagination,
.jazeButton--secondary {
--button-background-color: var(--button-secondary-background-color, #fff);
--button-border-color: var(--button-secondary-border-color, #d6d9e2);
--button-font-color: var(--button-secondary-font-color, #7e8190);
}
.jazeButton--pagination:hover,
.jazeButton--secondary:hover {
--button-border-color: var(--button-secondary-hover-border-color, #e5e7ed);
}
.jazeButton--pagination:active,
.jazeButton--secondary:active {
--button-border-color: var(--button-secondary-active-border-color, #d6d9e2);
}
.jazeButton--pagination:focus,
.jazeButton--secondary:focus {
--button-border-color: var(--button-secondary-focus-border-color, var(--color-400));
}
.jazeButton--link,
.jazeButton--textPrimary,
.jazeButton--textSecondary {
--button-background-color: transparent;
padding: 0;
}
.jazeButton--link {
--button-font-color: var(--color-500);
}
.jazeButton--link:hover {
--button-font-color: var(--color-400);
}
.jazeButton--textPrimary {
--button-font-color: var(--button-text-primary-font-color, #525461);
}
.jazeButton--textSecondary {
--button-font-color: var(--button-text-secondary-font-color, #a4a7b5);
}
.jazeButton--danger {
--button-font-color: #fff;
}
.jazeButton--danger,
.jazeButton--danger:hover {
--button-background-color: #f03a3e;
}
.jazeButton--danger:active {
--button-background-color: #da383c;
}
.jazeButton--success {
--button-font-color: #fff;
}
.jazeButton--success,
.jazeButton--success:hover {
--button-background-color: #5cb85c;
}
.jazeButton--success:active {
--button-background-color: #4cae4c;
}
.jazeButton--info {
--button-font-color: #fff;
}
.jazeButton--info,
.jazeButton--info:hover {
--button-background-color: #269abc;
}
.jazeButton--info:active {
--button-background-color: #1b6d85;
}
.jazeButton--warning {
--button-font-color: #fff;
}
.jazeButton--warning,
.jazeButton--warning:hover {
--button-background-color: #f5a623;
}
.jazeButton--warning:active {
--button-background-color: #985f0d;
}
.jazeButton--grey {
--button-font-color: #000;
}
.jazeButton--grey,
.jazeButton--grey:hover {
--button-background-color: #DCDCDC;
}
.jazeButton--grey:active {
--button-background-color: #808080;
}
.btn-xs {
padding: var(--button-padding-vertical, 3px) var(--button-padding-horizontal, 5px);
border-radius: 2px;
}
.btn-sm {
padding: var(--button-padding-vertical, 5px) var(--button-padding-horizontal, 10px);
border-radius: 4px;
}
.btn-lg {
padding: var(--button-padding-vertical, 14px) var(--button-padding-horizontal, 36px);
}
.jazeButton--pagination {
--button-icon-height: 12px;
--button-icon-width: 12px;
padding: 4px 7px;
}
.jazeButton--icon,
.jazeButton--iconLink,
.jazeButton--iconNeutral,
.jazeButton--iconPrimary {
--icon-width: var(--button-icon-width, 16px);
--icon-height: var(--button-icon-height, 16px);
--icon-color: var(--button-icon-color);
border: none;
}
.jazeButton--icon,
.jazeButton--iconLink {
border-radius: 0;
padding: 0;
}
.jazeButton--icon {
--button-icon-color: var(--button-icon-basic-color, #a4a7b5);
}
.jazeButton--icon:hover {
--button-icon-color: var(--button-hover-icon-color, #525461);
}
.jazeButton--icon.is-active,
.jazeButton--icon:active {
--button-icon-color: var(--button-active-icon-color, #525461);
}
.jazeButton--iconLink {
--button-icon-color: var(--color-500);
}
.jazeButton--iconLink:hover {
--button-icon-color: var(--color-400);
}
.jazeButton--iconNeutral,
.jazeButton--iconPrimary {
border-radius: 100%;
padding: 11px;
}
.jazeButton--iconNeutral:hover,
.jazeButton--iconPrimary:hover {
--button-background-color: var(--button-icon-hover-background-color);
}
.jazeButton--iconNeutral.is-active,
.jazeButton--iconNeutral:active,
.jazeButton--iconPrimary.is-active,
.jazeButton--iconPrimary:active {
--button-background-color: var(--button-icon-active-background-color);
}
.jazeButton--iconPrimary {
--button-background-color: var(--color-500);
--button-icon-hover-background-color: var(--color-400);
--button-icon-active-background-color: var(--color-500);
--button-icon-color: #fff;
}
.jazeButton--iconNeutral {
--button-background-color: var(--button-icon-neutral-background-color, #c2c4ce);
--button-icon-hover-background-color: var(--button-icon-neutral-hover-background-color, #d6d9e2);
--button-icon-active-background-color: var(--color-500);
--button-icon-color: #fff;
}
.jazeButton__icon {
color: var(--button-icon-color);
display: block;
height: var(--button-icon-height, 16px);
width: var(--button-icon-width, 16px);
vertical-align: middle;
}
.jazeButtonGroup {
align-items: center;
display: inline-flex;
flex: none;
vertical-align: middle;
white-space: nowrap;
}
.jazeButtonGroup + .jazeButtonGroup {
margin-left: 32px;
}
.jazeButtonGroup--vertical {
flex-direction: column;
}
.jazeButtonGroup--wrapped {
flex-wrap: wrap;
justify-content: flex-end;
width: 100%;
}
.jazeButtonGroup--playerControls {
--button-icon-color: var(--button-group-player-controls-icon-color, #c2c4ce);
--button-hover-icon-color: var(--button-group-player-controls-hover-icon-color, #d6d9e2);
--button-active-icon-color: var(--color-500);
--button-icon-width: 24px;
--button-icon-height: 24px;
background-color: var(--button-group-player-controls-background-color, #f8f8f9);
border-radius: 22px;
height: 44px;
justify-content: space-between;
padding-left: 42px;
padding-right: 42px;
}
.jazeButtonGroup--playerControls > .jazeButton {
padding: 11px;
}
.jazeButtonGroup--playerControls > .jazeButton--iconPrimary {
padding: 12px;
}
.jazeButtonGroup--joined:not(.jazeButtonGroup--vertical) > .jazeButton:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: -1px;
}
.jazeButtonGroup--joined:not(.jazeButtonGroup--vertical) > .jazeButton:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.jazeButtonGroup--joined.jazeButtonGroup--vertical > .jazeButton:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: -1px;
}
.jazeButtonGroup--joined.jazeButtonGroup--vertical > .jazeButton:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.jazeButtonGroup--joined .jazeButton:hover {
z-index: 1;
}
.jazeButtonGroup--joined .jazeButton:focus {
z-index: 2;
}
.jazeButtonGroup--comfy.jazeButtonGroup--vertical > .jazeButton + .jazeButton {
margin-top: 16px;
}
.jazeButtonGroup--cozy:not(.jazeButtonGroup--vertical) > .jazeButton + .jazeButton {
margin-left: 16px;
}
.jazeButtonGroup--cozy:not(.jazeButtonGroup--vertical).jazeButtonGroup--wrapped {
margin-top: -16px;
}
.jazeButtonGroup--cozy:not(.jazeButtonGroup--vertical).jazeButtonGroup--wrapped > .jazeButton {
margin-top: 16px;
}
.jazeButtonGroup--cozy.jazeButtonGroup--vertical > .jazeButton + .jazeButton {
margin-top: 8px;
}
.jazeButtonGroup--condensed:not(.jazeButtonGroup--vertical) > .jazeButton + .jazeButton {
margin-left: 8px;
}
.jazeButtonGroup--condensed:not(.jazeButtonGroup--vertical).jazeButtonGroup--wrapped {
margin-top: -8px;
}
.jazeButtonGroup--condensed:not(.jazeButtonGroup--vertical).jazeButtonGroup--wrapped > .jazeButton {
margin-top: 8px;
}
.jazeButtonGroup--smash:not(.jazeButtonGroup--vertical) > .jazeButton + .jazeButton {
margin-left: 0px;
}
.jazeButtonGroup--smash.jazeButtonGroup--vertical > .jazeButton + .jazeButton {
margin-top: 0px;
}
.jazeCalendar__header {
margin-top: 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.jazeCalendarTitle {
color: var(--calendar-title-font-color, #525461);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.jazeCalendarGrid {
margin-bottom: 12px;
margin-top: 12px;
--calendar-grid-item-width: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: calc(7 * var(--calendar-grid-item-width));
}
.jazeCalendarGrid--weekdays {
border-bottom: 1px solid var(--calendar-grid-weekdays-border-color, #e5e7ed);
border-top: 1px solid var(--calendar-grid-weekdays-border-color, #e5e7ed);
}
.jazeCalendarGrid__item {
align-items: center;
color: var(--calendar-grid-item-font-color, #7e8190);
display: flex;
font-size: 11px;
height: var(--calendar-grid-item-width);
justify-content: center;
padding: 6px;
width: var(--calendar-grid-item-width);
overflow: hidden;
position: relative;
z-index: 1;
}
.jazeCalendarGrid__item.is-muted {
opacity: 0.25;
}
.jazeCalendarGrid__item.is-start {
border-top-left-radius: 100%;
border-bottom-left-radius: 100%;
}
.jazeCalendarGrid__item.is-end {
border-top-right-radius: 100%;
border-bottom-right-radius: 100%;
}
.jazeCalendarGrid__item.is-highlighted,
.jazeCalendarGrid__item.is-selected {
color: var(--color-500);
}
.jazeCalendarGrid__item.is-highlighted:before,
.jazeCalendarGrid__item.is-selected:before {
background-color: var(--color-50);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -2;
}
.jazeCalendarGrid__item.is-selected.is-end,
.jazeCalendarGrid__item.is-selected.is-start {
color: #fff;
}
.jazeCalendarGrid__item.is-selected.is-end:after,
.jazeCalendarGrid__item.is-selected.is-start:after {
border-radius: 100%;
background-color: var(--color-500);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.jazeCalendarPanels {
display: grid;
grid-template-areas: "a b" "c c";
grid-template-columns: 1fr 132px;
grid-template-rows: 1fr 80px;
}
.jazeCalendarPanels .jazeCalendar {
padding-left: 24px;
padding-right: 24px;
grid-area: a;
}
.jazeCalendarPanels .jazeCalendarRangePresets {
padding-left: 24px;
padding-right: 24px;
border-left: 1px solid var(--calendar-panel-group-border-color, #e5e7ed);
grid-area: b;
}
.jazeCalendarPanels .jazeCalendarRangeInputs {
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;
padding-top: 16px;
border-top: 1px solid var(--calendar-panel-group-border-color, #e5e7ed);
grid-area: c;
}
.jazeCalendarRangeInputs,
.jazeCalendarRangePresets {
align-items: center;
display: flex;
flex: none;
}
.jazeCalendarRangeInputs {
flex-direction: row;
justify-content: space-between;
overflow: hidden;
}
.jazeCard {
box-shadow: 0 15px 45px 0 var(--card-drop-shadow-color, rgba(21, 23, 37, 0.2));
padding-left: 16px;
padding-right: 16px;
align-items: center;
background-image: var(
--card-drag-icon-background,
url('data:image/svg+xml;utf8,')
);
background-position: 4px;
background-repeat: no-repeat;
background-size: 7px;
border-radius: 4px;
display: flex;
flex-direction: row;
height: 50px;
overflow: hidden;
width: 200px;
}
.jazeCard.is-dragging {
width: 84px;
}
.jazeCard__image {
border-radius: 4px;
display: flex;
flex: none;
height: 42px;
overflow: hidden;
width: 63px;
}
.is-item-disabled .jazeCard__image {
opacity: 0.1;
}
.jazeCard__title {
margin-left: 8px;
min-width: 0;
min-height: 0;
overflow: hidden;
color: var(--card-title-color, #525461);
display: flex;
flex: 1;
font-size: 11px;
font-weight: 700;
}
.is-item-disabled .jazeCard__title {
opacity: 0.3;
}
.jazeCard__icon {
margin-left: 8px;
display: flex;
flex: none;
}
.jazeCardContainer {
display: flex;
flex-direction: column;
}
.jazeCardContainer--tolerant > div:not(:first-child),
.jazeCardContainer .jazeCard + .jazeCard {
margin-top: 12px;
}
.jazeChip {
--local-chip-height: var(--chip-height, 30px);
align-items: center;
background-color: var(--chip-background-color, #f1f2f4);
border-radius: calc(var(--local-chip-height) / 2);
display: inline-flex;
flex-direction: row;
height: var(--local-chip-height);
justify-content: space-between;
width: var(--chip-width, auto);
}
.jazeChip--actionable {
cursor: pointer;
}
.jazeChip--invalid {
opacity: 0.5;
}
.jazeChip--success {
--chip-custom-font-color: #fff;
--chip-icon-custom-background-color: #39cc64;
--chip-icon-custom-font-color: #fff;
background-color: rgba(57, 204, 100, 0.4);
}
.jazeChip--primary {
--chip-custom-font-color: #fff;
--chip-icon-custom-background-color: var(--color-500);
--chip-icon-custom-font-color: #fff;
background-color: rgba(0, 111, 255, 0.4);
}
.jazeChip--withCount,
.jazeChip--withIcon,
.jazeChip--withImage {
--chip-text-left-rhythm-multiplier: 2;
--chip-text-justify-content: flex-start;
}
.jazeChip--withCount:not(.jazeChip--withAction),
.jazeChip--withIcon:not(.jazeChip--withAction),
.jazeChip--withImage:not(.jazeChip--withAction) {
--chip-text-right-rhythm-multiplier: 6;
}
.jazeChip--withAction {
--chip-text-right-rhythm-multiplier: 2;
--chip-text-justify-content: flex-start;
}
.jazeChip--withAction:not(.jazeChip--withCount):not(.jazeChip--withIcon):not(.jazeChip--withImage) {
--chip-text-left-rhythm-multiplier: 4;
--chip-text-right-rhythm-multiplier: 2;
}
.jazeChip__count {
background: var(--chip-count-background-color, transparent);
border: 1px solid var(--chip-count-border-color, #d6d9e2);
border-radius: 100%;
color: var(--chip-count-font-color, #525461);
font-size: 13px;
}
.jazeChip__count,
.jazeChip__icon {
align-items: center;
display: flex;
flex: none;
height: var(--local-chip-height);
justify-content: center;
width: var(--local-chip-height);
}
.jazeChip__icon {
background: var(--chip-icon-custom-background-color, var(--chip-icon-background-color, transparent));
border-radius: 100%;
color: var(--chip-icon-custom-font-color, var(--chip-icon-font-color, #525461));
}
.jazeChip__image {
background: var(--chip-image-background-color, #fff);
border-radius: 100%;
height: var(--local-chip-height);
width: var(--local-chip-height);
}
.jazeChip__image--outline {
border: 1px solid var(--chip-image-border-color, #d6d9e2);
height: calc(var(--local-chip-height) - 2px);
width: calc(var(--local-chip-height) - 2px);
}
.jazeChip__text {
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: calc(4px * var(--chip-text-left-rhythm-multiplier, 8));
padding-right: calc(4px * var(--chip-text-right-rhythm-multiplier, 8));
color: var(--chip-custom-font-color, var(--chip-font-color, #7e8190));
display: flex;
flex: 1;
font-size: 11px;
justify-content: var(--chip-text-justify-content, center);
}
.jazeChip__action {
padding-right: 12px;
color: var(--chip-action-font-color, #c2c4ce);
cursor: pointer;
}
.jazeChipContainer {
--chip-horizontal-rhythm-multiplier: 1;
--chip-vertical-rhythm-multiplier: 1;
margin-left: calc(4px * (-1 * var(--chip-horizontal-rhythm-multiplier)));
margin-right: calc(4px * (-1 * var(--chip-horizontal-rhythm-multiplier)));
margin-bottom: calc(4px * (-1 * var(--chip-vertical-rhythm-multiplier)));
margin-top: calc(4px * (-1 * var(--chip-vertical-rhythm-multiplier)));
display: flex;
flex-wrap: wrap;
}
.jazeChipContainer .jazeChip {
margin-left: calc(4px * var(--chip-horizontal-rhythm-multiplier));
margin-right: calc(4px * var(--chip-horizontal-rhythm-multiplier));
margin-bottom: calc(4px * var(--chip-vertical-rhythm-multiplier));
margin-top: calc(4px * var(--chip-vertical-rhythm-multiplier));
}
.jazeCount {
padding-left: 4px;
padding-right: 4px;
--local-count-size: var(--count-size, 20px);
background-color: var(--count-background-color);
border-radius: var(--local-count-size);
color: var(--count-font-color, #fff);
font-size: 11px;
height: var(--local-count-size);
line-height: var(--local-count-size);
text-align: center;
min-width: var(--local-count-size);
}
.jazeCount--success {
background-color: #39cc64;
}
.jazeCount--warning {
background-color: #f5a623;
}
.jazeCount--danger {
background-color: #f03a3e;
}
.jazeCount--primary {
background-color: var(--color-500);
}
.jazeCount--neutral {
background-color: #c2c4ce;
}
.jazeCount--comfy {
--count-size: 24px;
font-size: 13px;
}
.jazeCount--topLeft {
position: absolute;
top: 0;
left: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.jazeCount--topRight {
position: absolute;
top: 0;
right: 0;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
.jazeCount--bottomLeft {
position: absolute;
bottom: 0;
left: 0;
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
.jazeCount--bottomRight {
position: absolute;
bottom: 0;
right: 0;
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}
.jazeDropdown {
box-shadow: 0 15px 45px 0 var(--dropdown-drop-shadow-color, rgba(21, 23, 37, 0.2));
background-color: var(--dropdown-background-color, #fff);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
z-index: var(--dropdown-z-index, 1);
}
.is-child-dropdown-expanded .jazeDropdown,
.jazeDropdown.is-dropdown-expanded {
max-height: 800px;
}
.jazeDropdown--bottomLeft {
position: absolute;
left: 0;
top: 100%;
}
.jazeDropdown--bottomRight {
position: absolute;
right: 0;
top: 100%;
}
.jazeDropdown__item {
padding-left: 28px;
padding-right: 28px;
padding-bottom: 12px;
padding-top: 12px;
border-bottom: 1px solid var(--dropdown-border-color, #e5e7ed);
display: block;
font-size: 11px;
color: var(--dropdown-font-color, #7e8190);
position: relative;
}
.jazeDropdown__item:hover {
color: var(--dropdown-hover-font-color, #525461);
}
.jazeDropdown__item:first-child {
border-top: 1px solid var(--dropdown-border-color, #e5e7ed);
}
.jazeDropdown__item:last-child {
border-bottom: 0;
}
.jazeDropdown__item.is-disabled {
pointer-events: none;
}
.jazeDropdown__item.is-disabled:after {
background-color: var(--dropdown-background-color, #fff);
bottom: 0;
content: "";
left: 0;
opacity: 0.6;
position: absolute;
right: 0;
top: 0;
}
.jazeDropdownContainer {
position: relative;
}
.jazeFilter {
display: flex;
flex-direction: row;
flex: 1;
}
.jazeFilter + .jazeFilter {
margin-top: 4px;
}
.jazeFilter__label,
.jazeFilter__value {
color: var(--filter-item-font-color, #525461);
font-size: 11px;
line-height: 16px;
}
.jazeFilter__label {
cursor: pointer;
display: flex;
flex: 1;
}
.jazeFilter__label + .jazeFilter__value {
margin-left: 4px;
}
.jazeFilter__value {
justify-content: flex-end;
}
.jazeFooter {
align-items: center;
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
}
.jazeFooter--wrappable {
flex-wrap: wrap;
}
.jazeFooter__buttons {
display: flex;
flex: 1 0 auto;
justify-content: flex-end;
}
.jazeForm.jazeFormComponent--box,
.jazeForm input[type="color"],
.jazeForm input[type="date"],
.jazeForm input[type="datetime-local"],
.jazeForm input[type="datetime"],
.jazeForm input[type="email"],
.jazeForm input[type="file"],
.jazeForm input[type="image"],
.jazeForm input[type="month"],
.jazeForm input[type="number"],
.jazeForm input[type="password"],
.jazeForm input[type="search"],
.jazeForm input[type="tel"],
.jazeForm input[type="text"],
.jazeForm input[type="time"],
.jazeForm input[type="url"],
.jazeForm input[type="week"],
.jazeForm output,
.jazeForm textarea,
.jazeIconInput,
.jazeInputBox,
.jazeTextarea {
padding-left: calc(4px * var(--form-box-horizontal-rhythm-multiplier, 0));
padding-right: calc(4px * var(--form-box-horizontal-rhythm-multiplier, 0));
background-color: var(--form-box-background-color, transparent);
border: var(--form-box-border, none);
border-bottom: var(--form-box-border-bottom, 1px solid var(--form-box-border-color, #e5e7ed));
border-radius: var(--form-box-border-radius, 0);
color: var(--form-box-font-color, #7e8190);
font-size: var(--form-box-font-size, 11px);
font-weight: var(--form-box-font-weight, normal);
vertical-align: top;
width: var(--form-box-width, 360px);
}
.jazeForm.jazeFormComponent--box:not(textarea),
.jazeForm input[type="color"]:not(textarea),
.jazeForm input[type="date"]:not(textarea),
.jazeForm input[type="datetime-local"]:not(textarea),
.jazeForm input[type="datetime"]:not(textarea),
.jazeForm input[type="email"]:not(textarea),
.jazeForm input[type="file"]:not(textarea),
.jazeForm input[type="image"]:not(textarea),
.jazeForm input[type="month"]:not(textarea),
.jazeForm input[type="number"]:not(textarea),
.jazeForm input[type="password"]:not(textarea),
.jazeForm input[type="search"]:not(textarea),
.jazeForm input[type="tel"]:not(textarea),
.jazeForm input[type="text"]:not(textarea),
.jazeForm input[type="time"]:not(textarea),
.jazeForm input[type="url"]:not(textarea),
.jazeForm input[type="week"]:not(textarea),
.jazeForm output:not(textarea),
.jazeForm textarea:not(textarea),
.jazeIconInput:not(textarea),
.jazeInputBox:not(textarea),
.jazeTextarea:not(textarea) {
height: var(--form-box-height, 30px);
}
.jazeForm.jazeFormComponent--box::-webkit-input-placeholder,
.jazeForm input[type="color"]::-webkit-input-placeholder,
.jazeForm input[type="date"]::-webkit-input-placeholder,
.jazeForm input[type="datetime-local"]::-webkit-input-placeholder,
.jazeForm input[type="datetime"]::-webkit-input-placeholder,
.jazeForm input[type="email"]::-webkit-input-placeholder,
.jazeForm input[type="file"]::-webkit-input-placeholder,
.jazeForm input[type="image"]::-webkit-input-placeholder,
.jazeForm input[type="month"]::-webkit-input-placeholder,
.jazeForm input[type="number"]::-webkit-input-placeholder,
.jazeForm input[type="password"]::-webkit-input-placeholder,
.jazeForm input[type="search"]::-webkit-input-placeholder,
.jazeForm input[type="tel"]::-webkit-input-placeholder,
.jazeForm input[type="text"]::-webkit-input-placeholder,
.jazeForm input[type="time"]::-webkit-input-placeholder,
.jazeForm input[type="url"]::-webkit-input-placeholder,
.jazeForm input[type="week"]::-webkit-input-placeholder,
.jazeForm output::-webkit-input-placeholder,
.jazeForm textarea::-webkit-input-placeholder,
.jazeIconInput::-webkit-input-placeholder,
.jazeInputBox::-webkit-input-placeholder,
.jazeTextarea::-webkit-input-placeholder {
color: var(--form-box-autofill-font-color, #c2c4ce);
font-weight: 300;
}
.jazeForm.jazeFormComponent--box:-ms-input-placeholder,
.jazeForm.jazeFormComponent--box::-ms-input-placeholder,
.jazeForm input[type="color"]:-ms-input-placeholder,
.jazeForm input[type="color"]::-ms-input-placeholder,
.jazeForm input[type="date"]:-ms-input-placeholder,
.jazeForm input[type="date"]::-ms-input-placeholder,
.jazeForm input[type="datetime-local"]:-ms-input-placeholder,
.jazeForm input[type="datetime-local"]::-ms-input-placeholder,
.jazeForm input[type="datetime"]:-ms-input-placeholder,
.jazeForm input[type="datetime"]::-ms-input-placeholder,
.jazeForm input[type="email"]:-ms-input-placeholder,
.jazeForm input[type="email"]::-ms-input-placeholder,
.jazeForm input[type="file"]:-ms-input-placeholder,
.jazeForm input[type="file"]::-ms-input-placeholder,
.jazeForm input[type="image"]:-ms-input-placeholder,
.jazeForm input[type="image"]::-ms-input-placeholder,
.jazeForm input[type="month"]:-ms-input-placeholder,
.jazeForm input[type="month"]::-ms-input-placeholder,
.jazeForm input[type="number"]:-ms-input-placeholder,
.jazeForm input[type="number"]::-ms-input-placeholder,
.jazeForm input[type="password"]:-ms-input-placeholder,
.jazeForm input[type="password"]::-ms-input-placeholder,
.jazeForm input[type="search"]:-ms-input-placeholder,
.jazeForm input[type="search"]::-ms-input-placeholder,
.jazeForm input[type="tel"]:-ms-input-placeholder,
.jazeForm input[type="tel"]::-ms-input-placeholder,
.jazeForm input[type="text"]:-ms-input-placeholder,
.jazeForm input[type="text"]::-ms-input-placeholder,
.jazeForm input[type="time"]:-ms-input-placeholder,
.jazeForm input[type="time"]::-ms-input-placeholder,
.jazeForm input[type="url"]:-ms-input-placeholder,
.jazeForm input[type="url"]::-ms-input-placeholder,
.jazeForm input[type="week"]:-ms-input-placeholder,
.jazeForm input[type="week"]::-ms-input-placeholder,
.jazeForm output:-ms-input-placeholder,
.jazeForm output::-ms-input-placeholder,
.jazeForm textarea:-ms-input-placeholder,
.jazeForm textarea::-ms-input-placeholder,
.jazeIconInput:-ms-input-placeholder,
.jazeIconInput::-ms-input-placeholder,
.jazeInputBox:-ms-input-placeholder,
.jazeInputBox::-ms-input-placeholder,
.jazeTextarea:-ms-input-placeholder,
.jazeTextarea::-ms-input-placeholder {
color: var(--form-box-autofill-font-color, #c2c4ce);
font-weight: 300;
}
.jazeForm.jazeFormComponent--box::placeholder,
.jazeForm input[type="color"]::placeholder,
.jazeForm input[type="date"]::placeholder,
.jazeForm input[type="datetime-local"]::placeholder,
.jazeForm input[type="datetime"]::placeholder,
.jazeForm input[type="email"]::placeholder,
.jazeForm input[type="file"]::placeholder,
.jazeForm input[type="image"]::placeholder,
.jazeForm input[type="month"]::placeholder,
.jazeForm input[type="number"]::placeholder,
.jazeForm input[type="password"]::placeholder,
.jazeForm input[type="search"]::placeholder,
.jazeForm input[type="tel"]::placeholder,
.jazeForm input[type="text"]::placeholder,
.jazeForm input[type="time"]::placeholder,
.jazeForm input[type="url"]::placeholder,
.jazeForm input[type="week"]::placeholder,
.jazeForm output::placeholder,
.jazeForm textarea::placeholder,
.jazeIconInput::placeholder,
.jazeInputBox::placeholder,
.jazeTextarea::placeholder {
color: var(--form-box-autofill-font-color, #c2c4ce);
font-weight: 300;
}
.jazeForm.jazeFormComponent--box:focus,
.jazeForm input[type="color"]:focus,
.jazeForm input[type="date"]:focus,
.jazeForm input[type="datetime-local"]:focus,
.jazeForm input[type="datetime"]:focus,
.jazeForm input[type="email"]:focus,
.jazeForm input[type="file"]:focus,
.jazeForm input[type="image"]:focus,
.jazeForm input[type="month"]:focus,
.jazeForm input[type="number"]:focus,
.jazeForm input[type="password"]:focus,
.jazeForm input[type="search"]:focus,
.jazeForm input[type="tel"]:focus,
.jazeForm input[type="text"]:focus,
.jazeForm input[type="time"]:focus,
.jazeForm input[type="url"]:focus,
.jazeForm input[type="week"]:focus,
.jazeForm output:focus,
.jazeForm textarea:focus,
.jazeIconInput:focus,
.jazeInputBox:focus,
.jazeTextarea:focus {
border-color: var(--form-box-focus-border-color, var(--color-500));
color: var(--form-box-focus-font-color, #333543);
}
.jazeForm.jazeFormComponent--box:disabled,
.jazeForm input[type="color"]:disabled,
.jazeForm input[type="date"]:disabled,
.jazeForm input[type="datetime-local"]:disabled,
.jazeForm input[type="datetime"]:disabled,
.jazeForm input[type="email"]:disabled,
.jazeForm input[type="file"]:disabled,
.jazeForm input[type="image"]:disabled,
.jazeForm input[type="month"]:disabled,
.jazeForm input[type="number"]:disabled,
.jazeForm input[type="password"]:disabled,
.jazeForm input[type="search"]:disabled,
.jazeForm input[type="tel"]:disabled,
.jazeForm input[type="text"]:disabled,
.jazeForm input[type="time"]:disabled,
.jazeForm input[type="url"]:disabled,
.jazeForm input[type="week"]:disabled,
.jazeForm output:disabled,
.jazeForm textarea:disabled,
.jazeIconInput:disabled,
.jazeInputBox:disabled,
.jazeTextarea:disabled {
opacity: 0.5;
}
.jazeForm.jazeFormComponent--box.is-invalid,
.jazeForm input[type="color"].is-invalid,
.jazeForm input[type="date"].is-invalid,
.jazeForm input[type="datetime-local"].is-invalid,
.jazeForm input[type="datetime"].is-invalid,
.jazeForm input[type="email"].is-invalid,
.jazeForm input[type="file"].is-invalid,
.jazeForm input[type="image"].is-invalid,
.jazeForm input[type="month"].is-invalid,
.jazeForm input[type="number"].is-invalid,
.jazeForm input[type="password"].is-invalid,
.jazeForm input[type="search"].is-invalid,
.jazeForm input[type="tel"].is-invalid,
.jazeForm input[type="text"].is-invalid,
.jazeForm input[type="time"].is-invalid,
.jazeForm input[type="url"].is-invalid,
.jazeForm input[type="week"].is-invalid,
.jazeForm output.is-invalid,
.jazeForm textarea.is-invalid,
.jazeIconInput.is-invalid,
.jazeInputBox.is-invalid,
.jazeTextarea.is-invalid {
border-color: #f03a3e;
color: #f03a3e;
}
.jazeForm.jazeFormComponent--box:-webkit-autofill,
.jazeForm.jazeFormComponent--box:-webkit-autofill:active,
.jazeForm.jazeFormComponent--box:-webkit-autofill:focus,
.jazeForm.jazeFormComponent--box:-webkit-autofill:hover,
.jazeForm input[type="color"]:-webkit-autofill,
.jazeForm input[type="color"]:-webkit-autofill:active,
.jazeForm input[type="color"]:-webkit-autofill:focus,
.jazeForm input[type="color"]:-webkit-autofill:hover,
.jazeForm input[type="date"]:-webkit-autofill,
.jazeForm input[type="date"]:-webkit-autofill:active,
.jazeForm input[type="date"]:-webkit-autofill:focus,
.jazeForm input[type="date"]:-webkit-autofill:hover,
.jazeForm input[type="datetime-local"]:-webkit-autofill,
.jazeForm input[type="datetime-local"]:-webkit-autofill:active,
.jazeForm input[type="datetime-local"]:-webkit-autofill:focus,
.jazeForm input[type="datetime-local"]:-webkit-autofill:hover,
.jazeForm input[type="datetime"]:-webkit-autofill,
.jazeForm input[type="datetime"]:-webkit-autofill:active,
.jazeForm input[type="datetime"]:-webkit-autofill:focus,
.jazeForm input[type="datetime"]:-webkit-autofill:hover,
.jazeForm input[type="email"]:-webkit-autofill,
.jazeForm input[type="email"]:-webkit-autofill:active,
.jazeForm input[type="email"]:-webkit-autofill:focus,
.jazeForm input[type="email"]:-webkit-autofill:hover,
.jazeForm input[type="file"]:-webkit-autofill,
.jazeForm input[type="file"]:-webkit-autofill:active,
.jazeForm input[type="file"]:-webkit-autofill:focus,
.jazeForm input[type="file"]:-webkit-autofill:hover,
.jazeForm input[type="image"]:-webkit-autofill,
.jazeForm input[type="image"]:-webkit-autofill:active,
.jazeForm input[type="image"]:-webkit-autofill:focus,
.jazeForm input[type="image"]:-webkit-autofill:hover,
.jazeForm input[type="month"]:-webkit-autofill,
.jazeForm input[type="month"]:-webkit-autofill:active,
.jazeForm input[type="month"]:-webkit-autofill:focus,
.jazeForm input[type="month"]:-webkit-autofill:hover,
.jazeForm input[type="number"]:-webkit-autofill,
.jazeForm input[type="number"]:-webkit-autofill:active,
.jazeForm input[type="number"]:-webkit-autofill:focus,
.jazeForm input[type="number"]:-webkit-autofill:hover,
.jazeForm input[type="password"]:-webkit-autofill,
.jazeForm input[type="password"]:-webkit-autofill:active,
.jazeForm input[type="password"]:-webkit-autofill:focus,
.jazeForm input[type="password"]:-webkit-autofill:hover,
.jazeForm input[type="search"]:-webkit-autofill,
.jazeForm input[type="search"]:-webkit-autofill:active,
.jazeForm input[type="search"]:-webkit-autofill:focus,
.jazeForm input[type="search"]:-webkit-autofill:hover,
.jazeForm input[type="tel"]:-webkit-autofill,
.jazeForm input[type="tel"]:-webkit-autofill:active,
.jazeForm input[type="tel"]:-webkit-autofill:focus,
.jazeForm input[type="tel"]:-webkit-autofill:hover,
.jazeForm input[type="text"]:-webkit-autofill,
.jazeForm input[type="text"]:-webkit-autofill:active,
.jazeForm input[type="text"]:-webkit-autofill:focus,
.jazeForm input[type="text"]:-webkit-autofill:hover,
.jazeForm input[type="time"]:-webkit-autofill,
.jazeForm input[type="time"]:-webkit-autofill:active,
.jazeForm input[type="time"]:-webkit-autofill:focus,
.jazeForm input[type="time"]:-webkit-autofill:hover,
.jazeForm input[type="url"]:-webkit-autofill,
.jazeForm input[type="url"]:-webkit-autofill:active,
.jazeForm input[type="url"]:-webkit-autofill:focus,
.jazeForm input[type="url"]:-webkit-autofill:hover,
.jazeForm input[type="week"]:-webkit-autofill,
.jazeForm input[type="week"]:-webkit-autofill:active,
.jazeForm input[type="week"]:-webkit-autofill:focus,
.jazeForm input[type="week"]:-webkit-autofill:hover,
.jazeForm output:-webkit-autofill,
.jazeForm output:-webkit-autofill:active,
.jazeForm output:-webkit-autofill:focus,
.jazeForm output:-webkit-autofill:hover,
.jazeForm textarea:-webkit-autofill,
.jazeForm textarea:-webkit-autofill:active,
.jazeForm textarea:-webkit-autofill:focus,
.jazeForm textarea:-webkit-autofill:hover,
.jazeIconInput:-webkit-autofill,
.jazeIconInput:-webkit-autofill:active,
.jazeIconInput:-webkit-autofill:focus,
.jazeIconInput:-webkit-autofill:hover,
.jazeInputBox:-webkit-autofill,
.jazeInputBox:-webkit-autofill:active,
.jazeInputBox:-webkit-autofill:focus,
.jazeInputBox:-webkit-autofill:hover,
.jazeTextarea:-webkit-autofill,
.jazeTextarea:-webkit-autofill:active,
.jazeTextarea:-webkit-autofill:focus,
.jazeTextarea:-webkit-autofill:hover {
-webkit-transition-delay: 99999s;
}
.jazeForm.jazeFormComponent--textarea,
.jazeForm textarea,
.jazeTextarea {
padding-top: var(--form-box-textarea-padding-top, 8px);
}
@media only screen and (max-width: 600px) {
.jazeForm--responsive.jazeFormComponent--box,
.jazeForm--responsive input[type="color"],
.jazeForm--responsive input[type="date"],
.jazeForm--responsive input[type="datetime-local"],
.jazeForm--responsive input[type="datetime"],
.jazeForm--responsive input[type="email"],
.jazeForm--responsive input[type="file"],
.jazeForm--responsive input[type="image"],
.jazeForm--responsive input[type="month"],
.jazeForm--responsive input[type="number"],
.jazeForm--responsive input[type="password"],
.jazeForm--responsive input[type="search"],
.jazeForm--responsive input[type="tel"],
.jazeForm--responsive input[type="text"],
.jazeForm--responsive input[type="time"],
.jazeForm--responsive input[type="url"],
.jazeForm--responsive input[type="week"],
.jazeForm--responsive output,
.jazeForm--responsive textarea,
.jazeIconInput--responsive,
.jazeInputBox--responsive,
.jazeTextarea--responsive {
--form-box-width: 200px;
}
}
.jazeCheckbox,
.jazeForm.jazeFormComponent--checkbox,
.jazeForm input[type="checkbox"] {
margin-right: calc(4px * var(--form-checkbox-horizontal-rhythm-multiplier, 3));
background-color: var(--form-checkbox-background-color, transparent);
border-radius: 3px;
border: var(--form-checkbox-border, 1px solid var(--form-checkbox-border-color, #d6d9e2));
color: var(--form-checkbox-icon-color, #525461);
height: var(--form-checkbox-size, 16px);
min-width: var(--form-checkbox-size, 16px);
position: relative;
vertical-align: middle;
width: var(--form-checkbox-size, 16px);
-moz-appearance: checkbox !important;
}
.jazeCheckbox:before,
.jazeForm.jazeFormComponent--checkbox:before,
.jazeForm input[type="checkbox"]:before {
background-image: var(
--form-checkbox-icon-background,
url('data:image/svg+xml;utf8,')
);
background-position: 50%;
background-repeat: no-repeat;
background-size: 70%;
bottom: 0;
content: "";
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}
.jazeCheckbox:indeterminate:before,
.jazeForm.jazeFormComponent--checkbox:indeterminate:before,
.jazeForm input[type="checkbox"]:indeterminate:before {
background-image: var(
--form-checkbox-indeterminate-icon-background,
url('data:image/svg+xml;utf8,')
);
}
.jazeCheckbox:hover:not(:disabled):not(:focus),
.jazeForm.jazeFormComponent--checkbox:hover:not(:disabled):not(:focus),
.jazeForm input[type="checkbox"]:hover:not(:disabled):not(:focus) {
border-color: var(--form-checkbox-hover-border-color, #a4a7b5);
}
.jazeCheckbox:focus,
.jazeForm.jazeFormComponent--checkbox:focus,
.jazeForm input[type="checkbox"]:focus {
border-color: var(--color-400);
}
.jazeCheckbox:disabled,
.jazeForm.jazeFormComponent--checkbox:disabled,
.jazeForm input[type="checkbox"]:disabled {
opacity: 0.5;
}
.jazeCheckbox:checked:before,
.jazeCheckbox:indeterminate:before,
.jazeForm.jazeFormComponent--checkbox:checked:before,
.jazeForm.jazeFormComponent--checkbox:indeterminate:before,
.jazeForm input[type="checkbox"]:checked:before,
.jazeForm input[type="checkbox"]:indeterminate:before {
opacity: 1;
}
.jazeCheckbox--secondary,
.jazeForm--secondary.jazeFormComponent--checkbox,
.jazeForm--secondary input[type="checkbox"] {
--form-checkbox-horizontal-rhythm-multiplier: 1;
background-color: transparent;
border: none;
}
.jazeCheckbox,
.jazeForm.jazeFormComponent,
.jazeFormComponent,
.jazeForm input,
.jazeForm output,
.jazeForm select,
.jazeForm textarea,
.jazeIconInput,
.jazeInputBox,
.jazeRadio,
.jazeRangeSlider,
.jazeSelect,
.jazeTextarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
}
.jazeFormDropdown {
box-shadow: 0 15px 45px 0 var(--form-dropdown-drop-shadow-color, rgba(21, 23, 37, 0.2));
--local-form-dropdown-horizontal-rhythm: calc(var(--form-dropdown-horizontal-rhythm-multiplier, 5) * 4px);
--local-form-dropdown-vertical-rhythm: calc(var(--form-dropdown-vertical-rhythm-multiplier, 4) * 4px);
--local-form-dropdown-top-padding: var(--form-dropdown-top-padding, 50px);
--local-form-dropdown-box-width: var(--form-dropdown-width, 100%);
background-color: var(--form-dropdown-background-color, #fff);
border-radius: var(--form-dropdown-border-radius, 4px);
border: 1px solid var(--form-dropdown-border-color, #d6d9e2);
color: var(--form-dropdown-font-color, #525461);
left: calc(var(--local-form-dropdown-horizontal-rhythm) * -1);
min-height: calc(100% + (var(--local-form-dropdown-vertical-rhythm) * 2));
opacity: var(--form-dropdown-opacity, 1);
padding-bottom: var(--local-form-dropdown-vertical-rhythm);
padding-left: var(--local-form-dropdown-horizontal-rhythm);
padding-right: var(--local-form-dropdown-horizontal-rhythm);
padding-top: calc(var(--local-form-dropdown-top-padding) + var(--local-form-dropdown-vertical-rhythm));
pointer-events: var(--form-dropdown-pointer-events, all);
position: absolute;
top: calc(var(--local-form-dropdown-vertical-rhythm) * -1);
transition: opacity 0.4s ease;
width: calc(var(--local-form-dropdown-box-width) + (var(--local-form-dropdown-horizontal-rhythm) * 2));
z-index: var(--form-dropdown-z-index, auto);
}
.jazeFormDropdown--below {
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0;
min-height: auto;
padding-top: var(--local-form-dropdown-vertical-rhythm);
top: calc(100% + 7px);
width: var(--local-form-dropdown-box-width);
}
.jazeFormDropdown--below.jazeFormDropdown--overflow {
min-width: var(--local-form-dropdown-box-width);
width: auto;
}
.jazeFormDropdown--below.jazeFormDropdown--overflow.jazeFormDropdown--alignRight {
left: auto;
right: 0;
}
.jazeFormDropdown__main {
scrollbar-width: thin;
max-height: var(--form-dropdown-max-height, 200px);
overflow: auto;
transition: max-height 0.4s ease;
}
.jazeFormDropdown__main::-webkit-scrollbar {
height: 14px;
width: 14px;
}
.jazeFormDropdown__main::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: var(--form-dropdown-scrollbar-thumb-color, #c2c4ce);
border-radius: 14px;
border: 4px solid transparent;
min-height: 60px;
}
.jazeFormDropdown__main::-webkit-scrollbar-track {
background: transparent;
border-radius: 14px;
}
.jazeFormDropdown__main::-webkit-scrollbar-corner {
background-color: transparent;
}
.jazeFormDropdown__footer {
margin-top: 12px;
padding-top: 20px;
padding-bottom: 8px;
border-top: 1px solid var(--form-dropdown-footer-border-color, #e5e7ed);
}
.jazeFormGroup {
position: relative;
}
.jazeFormGroup label {
display: block;
}
.jazeFormGroup--fullWidth {
--form-box-width: 100%;
--form-select-width: 100%;
width: 100%;
}
.jazeFormGroup--flex {
align-items: center;
display: flex;
}
.jazeFormGroup--checkbox {
--form-group-label-vertical-rhythm-multiplier: 0;
--form-checkbox-horizontal-rhythm-multiplier: 3;
}
.jazeFormGroup--checkbox.jazeFormGroup--condensed {
--form-checkbox-horizontal-rhythm-multiplier: 1;
}
.jazeFormGroup--radio {
--form-group-label-vertical-rhythm-multiplier: 0;
--form-radio-horizontal-rhythm-multiplier: 3;
}
.jazeFormGroup--radio.jazeFormGroup--condensed {
--form-radio-horizontal-rhythm-multiplier: 1;
}
.jazeFormGroup--checkbox,
.jazeFormGroup--radio {
margin-bottom: calc(4px * var(--form-group-vertical-rhythm-multiplier, 1));
margin-top: calc(4px * var(--form-group-vertical-rhythm-multiplier, 1));
margin-right: calc(4px * var(--form-group-horizontal-rhythm-multiplier, 3));
}
.jazeFormGroup--checkbox:not(.jazeFormGroup--flex),
.jazeFormGroup--radio:not(.jazeFormGroup--flex) {
display: inline-block;
}
.jazeFormGroup--checkbox:last-child,
.jazeFormGroup--radio:last-child {
--form-group-horizontal-rhythm-multiplier: 0;
}
.jazeFormGroup--checkbox label,
.jazeFormGroup--radio label {
display: inline-block;
}
.jazeFormGroup--transition label {
position: absolute;
top: 0;
transition: all 0.3s ease;
}
.jazeFormGroup--transition:not(.is-focused):not(.is-filled) label {
color: var(--form-group-transition-label-font-color, #c2c4ce);
font-size: var(--form-group-transition-label-font-size, 11px);
font-weight: var(--form-group-transition-label-font-weight, normal);
pointer-events: none;
top: var(--form-group-transition-label-top, 18px);
}
.jazeFormGroup--transition .is-hidden-when-form-group-is-active,
.jazeFormGroup--transition .is-hidden-when-form-group-is-inactive {
transition: opacity 0.4s ease;
}
.jazeFormGroup--transition.is-filled .is-hidden-when-form-group-is-active,
.jazeFormGroup--transition.is-focused .is-hidden-when-form-group-is-active,
.jazeFormGroup--transition:not(.is-focused):not(.is-filled) .is-hidden-when-form-group-is-inactive {
opacity: 0;
}
.jazeFormGroup--transition input,
.jazeFormGroup--transition select {
margin-top: var(--form-group-transition-input-top, 9px);
}
.jazeFormGroup--transition .jazeIconInputContainer .jazeIcon {
margin-top: calc(var(--form-group-transition-input-top, 9px) / 2);
}
.jazeFormGroup--withDropdown {
--local-form-group-dropdown-width: var(--form-group-dropdown-width, 360px);
--form-dropdown-width: var(--local-form-group-dropdown-width);
--form-box-width: var(--local-form-group-dropdown-width);
--icon-input-container-width: var(--local-form-group-dropdown-width);
}
.jazeFormGroup--withDropdown.is-dropdown-visible {
--form-dropdown-z-index: 10;
}
.jazeFormGroup--withDropdown.is-dropdown-visible .jazeIconInputContainer,
.jazeFormGroup--withDropdown.is-dropdown-visible input,
.jazeFormGroup--withDropdown.is-dropdown-visible label {
z-index: 20;
}
.jazeFormGroup--withDropdown:not(.is-dropdown-visible) {
--form-dropdown-pointer-events: none;
--form-dropdown-max-height: 0;
--form-dropdown-opacity: 0;
}
.jazeFormGroup--headerSearch {
--form-group-dropdown-width: 280px;
--icon-input-container-width: 280px;
}
.jazeForm.jazeIconInput,
.jazeForm input.jazeIconInput,
.jazeIconInput {
background-repeat: no-repeat;
background-size: var(--icon-input-icon-size, 14px);
}
.jazeForm.jazeIconInput--before,
.jazeForm input.jazeIconInput--before,
.jazeIconInput--before {
background-position: var(--icon-input-background-horizontal-offset, 0) 50%;
padding-left: var(--icon-input-padding-size, 22px);
}
.jazeForm.jazeIconInput--after,
.jazeForm input.jazeIconInput--after,
.jazeIconInput--after {
background-position: calc(100% - var(--icon-input-background-horizontal-offset, 0px)) 50%;
padding-right: var(--icon-input-padding-size, 22px);
}
.jazeForm.jazeIconInput--bookend,
.jazeForm input.jazeIconInput--bookend,
.jazeIconInput--bookend {
padding-left: var(--icon-input-padding-size, 22px);
padding-right: var(--icon-input-padding-size, 22px);
}
.jazeForm.jazeIconInput--search,
.jazeForm input.jazeIconInput--search,
.jazeIconInput--search {
background-image: var(
--icon-input-search-icon-background,
url('data:image/svg+xml;utf8,')
);
}
.jazeForm.jazeIconInput--standalone,
.jazeForm input.jazeIconInput--standalone,
.jazeIconInput--standalone {
--form-box-border-bottom: none;
--icon-input-background-horizontal-offset: 0px;
caret-color: var(--color-500);
}
.jazeIconInputContainer {
position: relative;
}
.jazeIconInputContainer .jazeIcon {
--icon-height: var(--icon-input-icon-size, 14px);
--icon-width: var(--icon-input-icon-size, 14px);
--icon-color: var(--icon-input-icon-color, #a4a7b5);
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.jazeIconInputContainer .jazeIconInput--before + .jazeIcon,
.jazeIconInputContainer .jazeIconInput--before + .jazeIconInput__icon .jazeIcon,
.jazeIconInputContainer .jazeIconInput--bookend + .jazeIcon:first-of-type,
.jazeIconInputContainer .jazeIconInput--bookend + .jazeIconInput__icon:first-of-type .jazeIcon {
left: var(--icon-input-background-horizontal-offset, 0);
}
.jazeIconInputContainer .jazeIcon:first-of-type + .jazeIcon:last-of-type,
.jazeIconInputContainer .jazeIconInput--after + .jazeIcon,
.jazeIconInputContainer .jazeIconInput--after + .jazeIconInput__icon .jazeIcon,
.jazeIconInputContainer .jazeIconInput__icon:first-of-type + .jazeIconInput__icon:last-of-type .jazeIcon {
right: var(--icon-input-background-horizontal-offset, 0);
}
.jazeIconInputContainer--transition {
--form-box-width: 100%;
transition: width 0.4s ease;
width: var(--icon-input-container-width, 360px);
}
.jazeIconInputContainer--transition .is-hidden-when-icon-input-is-inactive,
.jazeIconInputContainer--transition input {
transition: opacity 0.4s ease;
}
.jazeIconInputContainer--transition:not(.is-input-visible) {
width: calc(var(--icon-input-background-horizontal-offset, 0px) + var(--icon-input-icon-size, 14px));
overflow: hidden;
}
.jazeIconInputContainer--transition:not(.is-input-visible) .is-hidden-when-icon-input-is-inactive {
opacity: 0;
pointer-events: none;
}
.jazeIconInputContainer--transition:not(.is-input-visible) input {
opacity: 0;
}
.jazeForm.jazeFormComponent--radio,
.jazeForm input[type="radio"],
.jazeRadio {
margin-right: calc(4px * var(--form-radio-horizontal-rhythm-multiplier, 3));
background-color: var(--form-radio-background-color, transparent);
border-radius: 100%;
border: 1px solid var(--form-radio-border-color, #d6d9e2);
color: var(--form-radio-icon-color, #525461);
cursor: pointer;
height: var(--form-radio-size, 16px);
min-width: var(--form-radio-size, 16px);
position: relative;
vertical-align: middle;
width: var(--form-radio-size, 16px);
-moz-appearance: radio !important;
}
.jazeForm.jazeFormComponent--radio:before,
.jazeForm input[type="radio"]:before,
.jazeRadio:before {
background-image: var(
--form-radio-icon-background,
url('data:image/svg+xml;utf8,')
);
background-position: 50%;
background-repeat: no-repeat;
bottom: 0;
content: "";
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}
.jazeForm.jazeFormComponent--radio:hover:not(:disabled):not(:focus),
.jazeForm input[type="radio"]:hover:not(:disabled):not(:focus),
.jazeRadio:hover:not(:disabled):not(:focus) {
--form-radio-border-color: var(--form-radio-hover-border-color, #a4a7b5);
}
.jazeForm.jazeFormComponent--radio:focus,
.jazeForm input[type="radio"]:focus,
.jazeRadio:focus {
--form-radio-border-color: var(--color-400);
}
.jazeForm.jazeFormComponent--radio:disabled,
.jazeForm input[type="radio"]:disabled,
.jazeRadio:disabled {
opacity: 0.5;
}
.jazeForm.jazeFormComponent--radio:checked:before,
.jazeForm input[type="radio"]:checked:before,
.jazeRadio:checked:before {
opacity: 1;
}
.jazeRadioUnderlinedGroup {
display: inline-block;
margin-bottom: 5px;
}
input[type="radio"].jazeRadioUnderlined {
display: none;
}
input[type="radio"].jazeRadioUnderlined + label {
border-bottom: 2px solid var(--radio-underlined-border-color, transparent);
color: var(--radio-underlined-font-color, #a4a7b5);
cursor: pointer;
font-size: 11px;
padding-bottom: 2px;
text-align: center;
}
input[type="radio"].jazeRadioUnderlined + label:hover {
--radio-underlined-border-color: var(--radio-underlined-hover-border-color, #bfdbff);
}
input[type="radio"].jazeRadioUnderlined:checked + label {
--radio-underlined-border-color: var(--color-500);
--radio-underlined-font-color: var(--radio-underlined-selected-font-color, #525461);
}
input[type="radio"].jazeRadioUnderlined:disabled + label {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
.jazeForm.jazeFormComponent--range,
.jazeForm input[type="range"],
.jazeRangeSlider {
--val: 50;
--min: 0;
--max: 100;
--range: calc(var(--max) - var(--min));
--percent: calc(var(--val) - var(--min)) / var(--range);
--position: calc(var(--percent) * 100%);
--local-progress-color: var(--color-500);
--local-progress-height: 3px;
--local-range-height: var(--range-box-height, 15px);
--local-thumb-size: var(--range-thumb-size, 15px);
--local-track-color: var(--range-slider-track-color, #e5e7ed);
--local-track-height: 1px;
background: transparent;
height: var(--local-range-height);
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.jazeForm.jazeFormComponent--range::-moz-focus-outer,
.jazeForm input[type="range"]::-moz-focus-outer,
.jazeRangeSlider::-moz-focus-outer {
border: 0;
}
.jazeForm.jazeFormComponent--range:focus .jazeRangeSlider__thumb,
.jazeForm input[type="range"]:focus .jazeRangeSlider__thumb,
.jazeRangeSlider:focus .jazeRangeSlider__thumb {
border-color: var(--local-progress-color);
box-shadow: 0 0 1px 1px rgba(0, 111, 255, 0.5);
margin-top: 0;
position: absolute;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.jazeForm.jazeFormComponent--range:focus::-webkit-slider-thumb,
.jazeForm input[type="range"]:focus::-webkit-slider-thumb,
.jazeRangeSlider:focus::-webkit-slider-thumb {
border-color: var(--local-progress-color);
box-shadow: 0 0 1px 1px rgba(0, 111, 255, 0.5);
}
.jazeForm.jazeFormComponent--range:focus::-moz-range-thumb,
.jazeForm input[type="range"]:focus::-moz-range-thumb,
.jazeRangeSlider:focus::-moz-range-thumb {
border-color: var(--local-progress-color);
box-shadow: 0 0 1px 1px rgba(0, 111, 255, 0.5);
}
.jazeForm.jazeFormComponent--range:focus::-ms-thumb,
.jazeForm input[type="range"]:focus::-ms-thumb,
.jazeRangeSlider:focus::-ms-thumb {
border-color: var(--local-progress-color);
box-shadow: 0 0 1px 1px rgba(0, 111, 255, 0.5);
margin-top: 0;
}
.jazeForm.jazeFormComponent--range .jazeRangeSlider__track,
.jazeForm input[type="range"] .jazeRangeSlider__track,
.jazeRangeSlider .jazeRangeSlider__track {
background: var(--local-track-color);
border: none;
box-sizing: border-box;
height: var(--local-track-height);
z-index: 0;
left: 0;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.jazeForm.jazeFormComponent--range::-webkit-slider-runnable-track,
.jazeForm input[type="range"]::-webkit-slider-runnable-track,
.jazeRangeSlider::-webkit-slider-runnable-track {
background: var(--local-track-color);
border: none;
box-sizing: border-box;
height: var(--local-track-height);
z-index: 0;
}
.jazeForm.jazeFormComponent--range::-moz-range-track,
.jazeForm input[type="range"]::-moz-range-track,
.jazeRangeSlider::-moz-range-track {
background: var(--local-track-color);
border: none;
box-sizing: border-box;
height: var(--local-track-height);
z-index: 0;
}
.jazeForm.jazeFormComponent--range::-ms-track,
.jazeForm input[type="range"]::-ms-track,
.jazeRangeSlider::-ms-track {
background: var(--local-track-color);
border: none;
box-sizing: border-box;
height: var(--local-track-height);
z-index: 0;
}
.jazeForm.jazeFormComponent--range::-ms-fill-lower,
.jazeForm input[type="range"]::-ms-fill-lower,
.jazeRangeSlider::-ms-fill-lower {
background-color: var(--local-track-color);
}
@media (-webkit-min-device-pixel-ratio: 0) {
.jazeForm.jazeFormComponent--range::-webkit-slider-runnable-track,
.jazeForm input[type="range"]::-webkit-slider-runnable-track,
.jazeRangeSlider::-webkit-slider-runnable-track {
background: var(--local-track-color);
border: none;
box-sizing: border-box;
height: var(--local-track-height);
z-index: 0;
}
}
.jazeForm.jazeFormComponent--range .jazeRangeSlider__progress,
.jazeForm input[type="range"] .jazeRangeSlider__progress,
.jazeRangeSlider .jazeRangeSlider__progress {
background: var(--local-progress-color);
border-radius: 3px;
height: 3px;
left: 0;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: var(--position);
z-index: 1;
}
.jazeForm.jazeFormComponent--range::-moz-range-progress,
.jazeForm input[type="range"]::-moz-range-progress,
.jazeRangeSlider::-moz-range-progress {
background: var(--local-progress-color);
border-radius: 3px;
height: 3px;
}
.jazeForm.jazeFormComponent--range::-ms-fill-upper,
.jazeForm input[type="range"]::-ms-fill-upper,
.jazeRangeSlider::-ms-fill-upper {
background-color: var(--local-progress-color);
}
@media (-webkit-min-device-pixel-ratio: 0) {
.jazeForm.jazeFormComponent--range::-webkit-slider-runnable-track,
.jazeForm input[type="range"]::-webkit-slider-runnable-track,
.jazeRangeSlider::-webkit-slider-runnable-track {
background: var(--local-progress-color);
border-radius: 3px;
height: 3px;
background: linear-gradient(var(--local-progress-color), var(--local-progress-color)) 0 / var(--position) no-repeat var(--local-track-color);
}
}
.jazeForm.jazeFormComponent--range .jazeRangeSlider__thumb,
.jazeForm input[type="range"] .jazeRangeSlider__thumb,
.jazeRangeSlider .jazeRangeSlider__thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-radius: var(--local-thumb-size);
border: var(--range-slider-thumb-border, 1px) solid #a4a7b5;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
height: var(--local-thumb-size);
margin-top: calc(0.5 * (var(--local-track-height) - var(--local-thumb-size)));
width: var(--local-thumb-size);
z-index: 2;
margin-left: var(--position);
margin-top: 0;
position: absolute;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.jazeForm.jazeFormComponent--range::-webkit-slider-thumb,
.jazeForm input[type="range"]::-webkit-slider-thumb,
.jazeRangeSlider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background-color: #fff;
border-radius: var(--local-thumb-size);
border: var(--range-slider-thumb-border, 1px) solid #a4a7b5;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
height: var(--local-thumb-size);
margin-top: calc(0.5 * (var(--local-track-height) - var(--local-thumb-size)));
width: var(--local-thumb-size);
z-index: 2;
}
.jazeForm.jazeFormComponent--range::-moz-range-thumb,
.jazeForm input[type="range"]::-moz-range-thumb,
.jazeRangeSlider::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-radius: var(--local-thumb-size);
border: var(--range-slider-thumb-border, 1px) solid #a4a7b5;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
height: var(--local-thumb-size);
margin-top: calc(0.5 * (var(--local-track-height) - var(--local-thumb-size)));
width: var(--local-thumb-size);
z-index: 2;
}
.jazeForm.jazeFormComponent--range::-ms-thumb,
.jazeForm input[type="range"]::-ms-thumb,
.jazeRangeSlider::-ms-thumb {
appearance: none;
background-color: #fff;
border-radius: var(--local-thumb-size);
border: var(--range-slider-thumb-border, 1px) solid #a4a7b5;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
height: var(--local-thumb-size);
margin-top: calc(0.5 * (var(--local-track-height) - var(--local-thumb-size)));
width: var(--local-thumb-size);
z-index: 2;
margin-top: 0;
}
.jazeRangeSlider--small {
--range-thumb-size: 11px;
--range-box-height: 11px;
}
.jazeRangeSlider--vertical {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
height: 100%;
width: auto;
}
.jazeForm.jazeFormComponent--select,
.jazeForm select,
.jazeSelect {
padding-left: calc(4px * var(--form-select-horizontal-rhythm-left-multiplier, 0));
padding-right: calc(4px * var(--form-select-horizontal-rhythm-right-multiplier, 7));
background-color: var(--form-select-background-color, transparent);
border: var(--form-select-border, none);
border-bottom: var(--form-select-border-bottom, 1px solid var(--form-select-border-color, #e5e7ed));
border-radius: var(--form-select-border-radius, 0);
color: var(--form-select-font-color, #7e8190);
cursor: pointer;
font-size: var(--form-select-font-size, 11px);
font-weight: var(--form-select-font-weight, normal);
outline: 0;
vertical-align: top;
width: var(--form-select-width, auto);
}
.jazeForm.jazeFormComponent--select:not([multiple]),
.jazeForm select:not([multiple]),
.jazeSelect:not([multiple]) {
background-image: var(
--form-select-icon-background,
url('data:image/svg+xml;utf8,')
);
background-position: calc(100% - 8px) 50%;
background-repeat: no-repeat;
background-size: var(--form-select-background-size, 10px);
height: var(--form-select-height, 30px);
line-height: var(--form-select-height, 30px);
}
.jazeForm.jazeFormComponent--select:not([multiple]):hover,
.jazeForm select:not([multiple]):hover,
.jazeSelect:not([multiple]):hover {
--form-select-font-color: var(--form-select-hover-font-color, #525461);
}
.jazeForm.jazeFormComponent--select:not([multiple]) option,
.jazeForm select:not([multiple]) option,
.jazeSelect:not([multiple]) option {
color: initial;
}
.jazeForm.jazeFormComponent--select[multiple],
.jazeForm select[multiple],
.jazeSelect[multiple] {
scrollbar-width: thin;
--form-select-horizontal-rhythm-right-multiplier: 0;
}
.jazeForm.jazeFormComponent--select[multiple]::-webkit-scrollbar,
.jazeForm select[multiple]::-webkit-scrollbar,
.jazeSelect[multiple]::-webkit-scrollbar {
height: 14px;
width: 14px;
}
.jazeForm.jazeFormComponent--select[multiple]::-webkit-scrollbar-thumb,
.jazeForm select[multiple]::-webkit-scrollbar-thumb,
.jazeSelect[multiple]::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: var(--form-select-scrollbar-thumb-color, #c2c4ce);
border-radius: 14px;
border: 4px solid transparent;
min-height: 60px;
}
.jazeForm.jazeFormComponent--select[multiple]::-webkit-scrollbar-track,
.jazeForm select[multiple]::-webkit-scrollbar-track,
.jazeSelect[multiple]::-webkit-scrollbar-track {
background: transparent;
border-radius: 14px;
}
.jazeForm.jazeFormComponent--select[multiple]::-webkit-scrollbar-corner,
.jazeForm select[multiple]::-webkit-scrollbar-corner,
.jazeSelect[multiple]::-webkit-scrollbar-corner {
background-color: transparent;
}
.jazeForm.jazeFormComponent--select[multiple] option,
.jazeForm select[multiple] option,
.jazeSelect[multiple] option {
color: var(--form-select-font-color, #7e8190);
padding-top: var(--form-select-multiple-option-vertical-padding, 4px);
padding-bottom: var(--form-select-multiple-option-vertical-padding, 4px);
}
.jazeForm.jazeFormComponent--select[multiple] option:hover,
.jazeForm select[multiple] option:hover,
.jazeSelect[multiple] option:hover {
color: var(--form-select-hover-font-color, #525461);
}
.jazeForm.jazeFormComponent--select:focus,
.jazeForm select:focus,
.jazeSelect:focus {
border-color: var(--color-500);
}
.jazeForm.jazeFormComponent--select:disabled,
.jazeForm select:disabled,
.jazeSelect:disabled {
opacity: 0.5;
}
.jazeForm.jazeFormComponent--select.is-invalid,
.jazeForm select.is-invalid,
.jazeSelect.is-invalid {
border-color: #f03a3e;
color: #f03a3e;
}
div.jazeFormComponent--select,
div.jazeSelect {
display: inline-block;
}
.jazeSelect--link {
--form-select-height: auto;
--form-select-horizontal-rhythm-left-multiplier: 3;
--form-select-horizontal-rhythm-right-multiplier: 6;
--form-select-icon-background: url('data:image/svg+xml;utf8,');
background-color: transparent;
border-bottom: none;
color: var(--color-500);
}
.jazeSelect--link:hover {
--form-select-font-color: var(--color-400);
}
.jazeSelect--popup {
--form-select-background-size: 8px;
--form-select-icon-background: url('data:image/svg+xml;utf8,');
}
.jazeGrid--descriptionList {
color: var(--grid-description-list-font-color, #7e8190);
font-size: 10px;
}
.jazeGrid--descriptionList .row .col:last-child {
text-align: right;
}
.jazeHeader {
align-items: center;
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
}
.jazeHeader--centered .jazeHeader__title {
text-align: center;
}
.jazeHeader--fullHeight {
height: 100%;
}
.jazeHeader--global {
padding-right: 32px;
height: 100%;
overflow: visible;
}
.jazeHeader--navigation {
overflow: visible;
}
.jazeHeader__logo {
align-items: center;
background: var(--color-500);
color: #fff;
display: flex;
flex: 0 0 50px;
height: 100%;
justify-content: center;
}
.jazeHeader__logo + .jazeHeader__image {
margin-left: 28px;
}
.jazeHeader__image img {
vertical-align: middle;
}
.jazeHeader__image + .jazeHeader__title {
margin-left: 12px;
}
.jazeHeader__title {
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
overflow: hidden;
}
.jazeHeader__title + .jazeHeader__actions {
margin-left: 8px;
}
.jazeHeader__title--primary {
color: var(--header-title-primary-font-color, #525461);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.jazeHeader__title--secondary {
color: var(--header-title-secondary-font-color, #525461);
font-size: 11px;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
}
.jazeHeader__title--tertiary {
color: var(--header-title-tertiary-font-color, #525461);
font-size: 13px;
}
.jazeHeader__title--actionable {
cursor: pointer;
}
.jazeHeader__actions {
align-items: center;
display: flex;
color: var(--header-action-color, #a4a7b5);
flex-direction: row;
}
.jazeHeaderGroup {
bottom: 0;
display: flex;
left: 0;
padding: inherit;
position: absolute;
right: 0;
top: 0;
}
.jazeHeaderGroup .jazeHeader + .jazeHeader {
margin-left: 16px;
border-left: 1px solid var(--header-group-border-color, #d6d9e2);
}
.jazeIcon {
color: currentColor;
color: var(--icon-color);
flex: none;
vertical-align: middle;
}
.jazeIcon:not(.jazeIcon--auto) {
height: var(--icon-height, 16px);
width: var(--icon-width, 16px);
}
.jazeIcon--globalHeader {
--icon-color: #a4a7b5;
--icon-height: 24px;
--icon-width: 24px;
cursor: pointer;
}
.jazeIcon--navigation {
--icon-height: 22px;
--icon-width: 22px;
}
.jazeIcon--headerNav {
--icon-height: 20px;
--icon-width: 20px;
}
.jazeIcon--smaller {
--icon-height: 10px;
--icon-width: 10px;
}
.jazeIcon--small {
--icon-height: 14px;
--icon-width: 14px;
}
.jazeIcon--large {
--icon-height: 24px;
--icon-width: 24px;
}
.jazeIcon--logo {
--icon-height: 28px;
--icon-width: 28px;
}
.jazeIcon--actionable {
--icon-color: var(--icon-actionable-color, #a4a7b5);
cursor: pointer;
}
.jazeIcon--actionable:hover {
--icon-color: var(--icon-actionable-hover-color, #525461);
}
.jazeIcon--actionable.is-active {
--icon-color: var(--icon-actionable-active-color, #525461);
}
.jazeIcon--transparent {
opacity: 0.35;
}
.jazeIconContainer {
align-items: center;
background-color: var(--icon-container-background-color);
color: #fff;
display: flex;
flex: none;
height: 32px;
justify-content: center;
width: 32px;
}
.jazeIconContainer--round {
border-radius: 100%;
}
.jazeIconContainer--success {
background-color: #39cc64;
}
.jazeIconContainer--warning {
background-color: #f5a623;
}
.jazeIconContainer--danger {
background-color: #f03a3e;
}
.jazeIconContainer--primary {
background-color: var(--color-500);
}
.jazeIconContainer--neutral {
background-color: #c2c4ce;
}
.jazeIconContainer--bordered {
--icon-color: #c2c4ce;
--icon-height: 19px;
--icon-width: 19px;
border: 1px solid var(--icon-container-border-color, #c2c4ce);
border-radius: 3px;
height: 27px;
width: 27px;
}
.jazeIconContainer--expander {
--icon-color: var(--icon-expanded-icon-color, #525461);
--icon-height: 12px;
--icon-width: 12px;
border: 1px solid var(--icon-expanded-border-color, #c2c4ce);
border-radius: 3px;
cursor: pointer;
height: 16px;
width: 16px;
}
.jazeIconGroup {
align-items: center;
color: var(--icon-group-color, #a4a7b5);
display: flex;
position: relative;
}
.jazeIconGroup + .jazeIconGroup:not(.jazeIconGroup--noSpacer) {
margin-left: 16px;
padding-left: 24px;
}
.jazeIconGroup + .jazeIconGroup:not(.jazeIconGroup--noSpacer):after {
margin-left: 4px;
background-color: var(--icon-group-spacer, currentColor);
content: "";
display: block;
height: 20px;
left: 0;
opacity: 0.4;
position: absolute;
top: -2px;
width: 1px;
}
.jazeIconGroup .jazeIcon + .jazeIcon {
margin-left: calc(4px * var(--icon-group-horizontal-rhythm-multiplier, 4));
}
.jazeIconGroup--cozy {
--icon-group-horizontal-rhythm-multiplier: 3;
}
.jazeIconText {
align-items: center;
color: var(--icon-text-color, #a4a7b5);
display: flex;
flex: none;
flex-direction: var(--icon-text-flex-direction, row);
overflow: hidden;
}
.jazeIconText--multiline {
align-items: flex-start;
}
.jazeIconText--withTextRight .jazeIconText__text {
margin-left: calc(4px * var(--icon-text-horizontal-rhythm-multiplier, 2));
}
.jazeIconText--withTextLeft {
--icon-text-icon-order: 2;
--icon-text-text-order: 1;
}
.jazeIconText--withTextLeft .jazeIconText__icon {
margin-left: calc(4px * var(--icon-text-horizontal-rhythm-multiplier, 2));
}
.jazeIconText--withTextBelow {
--icon-text-flex-direction: column;
}
.jazeIconText--withTextBelow .jazeIconText__icon {
align-self: center;
}
.jazeIconText--withTextBelow .jazeIconText__text {
margin-top: 4px;
text-align: center;
}
.jazeIconText--fullStack {
flex: 1;
height: 100%;
justify-content: flex-end;
width: 100%;
}
.jazeIconText--fullStack .jazeIconText__text {
display: flex;
flex: 0.55;
flex-direction: column;
justify-content: flex-start;
}
.jazeIconText--fullShelf {
width: 100%;
}
.jazeIconText--fullShelf .jazeIconText__text {
display: block;
flex: 1 1 auto;
}
.jazeIconText--tinyIcon {
--icon-text-icon-height: 9px;
--icon-text-icon-width: 9px;
--icon-text-horizontal-rhythm-multiplier: 1;
}
.jazeIconText--largeIcon {
--icon-text-icon-height: 24px;
--icon-text-icon-width: 24px;
--icon-text-horizontal-rhythm-multiplier: 3;
}
.jazeIconText--currentTextSize {
--icon-text-text-font-size: auto;
}
.jazeIconText--regularText {
--icon-text-text-font-size: 12px;
}
.jazeIconText--largerText {
--icon-text-text-font-size: 20px;
}
.jazeIconText--header {
--icon-text-icon-color: var(--icon-text-header-icon-color, #a4a7b5);
--icon-text-text-color: var(--icon-text-header-text-color, #525461);
--icon-text-text-font-weight: bold;
--icon-text-text-letter-spacing: 0.5px;
--icon-text-text-transform: uppercase;
}
.jazeIconText--currentColor {
--icon-text-color: currentColor;
--icon-text-text-color: currentColor;
--icon-text-icon-color: currentColor;
}
.jazeIconText--currentColor,
.jazeIconText--currentColor .jazeIconText__icon,
.jazeIconText--currentColor .jazeIconText__text {
color: currentColor;
}
.jazeIconText--actionable {
cursor: pointer;
}
.jazeIconText--actionable.is-active,
.jazeIconText--actionable.is-hover,
.jazeIconText--actionable:hover {
--icon-text-icon-color: var(--icon-text-actionable-icon-color, #525461);
--icon-text-text-color: var(--icon-text-actionable-text-color, #525461);
}
.jazeIconText--actionable.is-disabled,
.jazeIconText--actionable[disabled="disabled"] {
cursor: not-allowed;
opacity: 0.4;
pointer-events: none;
}
.jazeIconText__icon {
color: var(--icon-text-icon-color, var(--icon-text-basic-icon-color, #a4a7b5));
flex-shrink: 0;
height: var(--icon-text-icon-height, 16px);
order: var(--icon-text-icon-order, 1);
width: var(--icon-text-icon-width, 16px);
}
.jazeIconText__text {
color: var(--icon-text-text-color, var(--icon-text-basic-text-color, #a4a7b5));
font-size: var(--icon-text-text-font-size, 11px);
font-weight: var(--icon-text-text-font-weight);
letter-spacing: var(--icon-text-text-letter-spacing);
line-height: normal;
order: var(--icon-text-text-order, 2);
text-transform: var(--icon-text-text-transform);
}
.jazeIconText__text--centered {
--icon-text-justify-text: center;
}
.jazeLabel {
color: var(--label-font-color, #c2c4ce);
font-size: var(--label-font-size, 9px);
line-height: var(--label-line-height);
}
.jazeLabel--primary {
color: var(--label-primary-font-color, #525461);
font-size: var(--label-primary-font-size, 11px);
}
.jazeLabel--secondary {
color: var(--label-secondary-font-color, #a4a7b5);
font-size: var(--label-secondary-font-size, 11px);
line-height: var(--label-secondary-line-height);
}
.jazeLabel--checkbox,
.jazeLabel--radio {
cursor: pointer;
display: inline-block;
font-size: 11px;
line-height: 16px;
vertical-align: middle;
}
.jazeLabel--checkbox {
color: var(--label-checkbox-font-color, #a4a7b5);
}
.jazeLabel--radio {
color: var(--label-radio-font-color, #a4a7b5);
}
.jazeLabel--disabled {
cursor: default;
opacity: 0.5;
}
.jazeLabelGroup {
display: block;
--label-primary-font-size: 13px;
--label-secondary-font-size: 11px;
--label-secondary-line-height: 18px;
}
.jazeLabelGroup .jazeLabel + .jazeLabel {
margin-top: 4px;
}
.jazeLabelGroup.is-inactive {
opacity: 0.5;
}
.jazeLabelGroup--actionable,
.jazeLabelGroup--actionable > .jazeLabel {
cursor: pointer;
}
.jazeLabelGroup--subNavigation {
padding-left: 32px;
padding-right: 32px;
padding-bottom: 24px;
padding-top: 24px;
}
.jazeLabelGroup--subNavigation:not(.is-inactive) {
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), var(--label-group-navigation-background-color, #fff) 40%);
}
.jazeLink {
color: var(--color-500);
text-decoration: none;
}
.jazeLink:hover {
color: var(--color-400);
}
.jazeModal {
box-shadow: 0 15px 45px 0 var(--modal-drop-shadow-color, rgba(21, 23, 37, 0.2));
background: var(--modal-background-color, #fff);
border-radius: 4px;
color: var(--modal-font-color, #525461);
display: flex;
flex-direction: column;
max-height: calc(100vh - 40px);
max-width: calc(100vw - 40px);
overflow: hidden;
position: relative;
}
.jazeModal:focus {
outline: 0;
}
.jazeModal--small {
width: var(--modal-small-width, 428px);
}
.jazeModal--medium {
width: var(--modal-medium-width, 680px);
}
.jazeModal--large {
width: var(--modal-large-width, 840px);
}
.jazeModal__header {
margin-left: calc(4px * var(--modal-main-horizontal-rhythm-multiplier, 8));
margin-right: calc(4px * var(--modal-main-horizontal-rhythm-multiplier, 8));
padding-bottom: calc(4px * var(--modal-header-vertical-rhythm-multiplier, 6));
padding-top: calc(4px * var(--modal-header-vertical-rhythm-multiplier, 6));
color: var(--modal-header-font-color, #525461);
font-size: var(--modal-header-font-size, 20px);
font-weight: 700;
}
.jazeModal__header--empty {
padding: 0;
margin: 0;
}
.jazeModal__close {
position: absolute;
top: 16px;
right: 16px;
}
.jazeModal__footer {
margin-left: calc(4px * var(--modal-main-horizontal-rhythm-multiplier, 8));
margin-right: calc(4px * var(--modal-main-horizontal-rhythm-multiplier, 8));
padding-bottom: calc(4px * var(--modal-footer-vertical-rhythm-multiplier, 6));
padding-top: calc(4px * var(--modal-footer-vertical-rhythm-multiplier, 6));
color: var(--modal-footer-font-color, #a4a7b5);
display: flex;
flex: 1 0 auto;
justify-content: flex-end;
}
.jazeModal__main {
scrollbar-width: thin;
padding-left: calc(4px * var(--modal-main-horizontal-rhythm-multiplier, 8));
padding-right: calc(4px * var(--modal-main-horizontal-rhythm-multiplier, 8));
display: flex;
flex-direction: column;
flex: auto;
overflow: auto;
}
.jazeModal__main::-webkit-scrollbar {
height: 14px;
width: 14px;
}
.jazeModal__main::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: var(--modal-scrollbar-thumb-color, #c2c4ce);
border-radius: 14px;
border: 4px solid transparent;
min-height: 60px;
}
.jazeModal__main::-webkit-scrollbar-track {
background: transparent;
border-radius: 14px;
}
.jazeModal__main::-webkit-scrollbar-corner {
background-color: transparent;
}
.jazeModalContent {
padding-bottom: calc(4px * var(--modal-main-vertical-rhythm-multiplier, 6));
padding-top: calc(4px * var(--modal-main-vertical-rhythm-multiplier, 6));
}
.jazeModalContent--flush {
--modal-main-vertical-rhythm-multiplier: 0;
}
.jazeModalContainer {
position: absolute;
z-index: var(--modal-z-index, 900);
}
.jazeModalContainer--centered {
align-items: center;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.jazeModalContainer--blackout {
--modal-z-index: 1000;
background: var(--modal-blackout-color, rgba(0, 0, 0, 0.4));
}
.jazeModalContainer--blackoutMinor {
--modal-z-index: 1000;
background: var(--modal-blackout-minor-color, rgba(0, 0, 0, 0.1));
}
.jazeModalContainer--blackoutMajor {
--modal-z-index: 1000;
background: var(--modal-blackout-major-color, rgba(0, 0, 0, 0.5));
}
.jazeNavigation {
padding-bottom: calc(4px * var(--navigation-bottom-rhythm-multiplier, 3));
padding-top: calc(4px * var(--navigation-top-rhythm-multiplier, 1));
--navigation-align-items: flex-start;
--navigation-item-width: 50px;
align-items: var(--navigation-align-items);
background-color: var(--navigation-background-color, #f4f4f5);
display: flex;
flex: 1;
flex-direction: var(--navigation-flex-direction, column);
height: 100%;
justify-content: space-between;
}
.jazeNavigation--horizontal {
--navigation-align-items: center;
--navigation-flex-direction: row;
--navigation-bottom-rhythm-multiplier: 0;
--navigation-top-rhythm-multiplier: 0;
--navigation-item-vertical-rhythm-multiplier: 0;
--navigation-item-horizontal-rhythm-multiplier: 0;
--navigation-item-width: 20px;
}
.jazeNavigation__group {
align-items: var(--navigation-align-items);
display: flex;
flex-direction: var(--navigation-flex-direction, column);
justify-content: space-between;
width: 100%;
}
.jazeNavigation__item {
margin-bottom: calc(4px * var(--navigation-item-vertical-rhythm-multiplier, 3));
margin-top: calc(4px * var(--navigation-item-vertical-rhythm-multiplier, 3));
--tooltip-display: none;
align-items: center;
align-self: var(--navigation-align-items);
color: var(--navigation-icon-color, #a4a7b5);
cursor: pointer;
display: flex;
flex: none;
flex-direction: column;
justify-content: center;
overflow: visible;
position: relative;
text-align: center;
width: var(--navigation-item-width);
}
.jazeNavigation__item.is-item-selected {
--navigation-icon-color: var(--navigation-selected-icon-color, var(--color-500));
}
.jazeNavigation__item:hover {
--tooltip-display: block;
}
.jazeNavigation__item:hover:not(.is-item-selected) {
--navigation-icon-color: var(--navigation-hover-icon-color, #7e8190);
}
.jazeNavigation__item--withNotification:before {
background-color: var(--navigation-notification-color, #f5a623);
border-radius: 100%;
border: 1px solid var(--navigation-background-color, #f4f4f5);
content: "";
display: block;
height: 10px;
position: absolute;
right: 11px;
top: 0;
width: 10px;
}
.jazeNavigation__item--withDivider,
.jazeNavigation__item--withDividerAfter {
margin-bottom: 40px;
}
.jazeNavigation__item--withDivider:after,
.jazeNavigation__item--withDividerAfter:after {
margin-top: 24px;
background-color: var(--navigation-spacer-color, #d6d9e2);
content: "";
display: block;
height: 1px;
left: 50%;
pointer-events: none;
position: absolute;
top: 100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 24px;
}
.jazeNavigation__item--withDividerBefore {
margin-top: 40px;
}
.jazeNavigation__item--withDividerBefore:after {
margin-bottom: 24px;
background-color: var(--navigation-spacer-color, #d6d9e2);
content: "";
display: block;
height: 1px;
left: 50%;
pointer-events: none;
position: absolute;
bottom: 100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 24px;
}
.is-navigation-collapsed.jazeNavigation:not(.jazeNavigation--horizontal) {
--navigation-secondary-height: 48px;
}
.is-navigation-collapsed .jazeNavigation__group--primary {
scrollbar-width: none;
margin-bottom: calc(var(--navigation-secondary-height) - 12px);
}
.is-navigation-collapsed .jazeNavigation__group--primary::-webkit-scrollbar {
display: none;
}
.is-navigation-collapsed .jazeNavigation__group--secondary {
--navigation-icon-opacity: 0;
background-color: var(--navigation-background-color, #f4f4f5);
border-top: 1px solid var(--navigation-spacer-color, #d6d9e2);
bottom: 0;
box-shadow: 0 -4px 22px -4px rgba(21, 23, 37, 0.2);
max-height: var(--navigation-secondary-height);
position: absolute;
transition: max-height 0.4s ease;
z-index: 1;
}
.is-navigation-collapsed .jazeNavigation__group--secondary:before {
background-image: var(
--navigation-overflow-icon-background,
url('data:image/svg+xml;utf8,')
);
background-position: 50% calc((var(--navigation-secondary-height) - 24px) / 2);
background-repeat: no-repeat;
background-size: 50%;
bottom: 0;
content: "";
left: 0;
opacity: 1;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.4s ease;
}
.is-navigation-collapsed .jazeNavigation__group--secondary.is-visible,
.is-navigation-collapsed .jazeNavigation__group--secondary:hover {
--navigation-icon-opacity: 1;
max-height: 100%;
}
.is-navigation-collapsed .jazeNavigation__group--secondary.is-visible:before,
.is-navigation-collapsed .jazeNavigation__group--secondary:hover:before {
opacity: 0;
}
.is-navigation-collapsed .jazeNavigation__item {
opacity: var(--navigation-icon-opacity, 1);
transition: opacity 0.4s ease;
}
.jazeNoContent {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
margin: var(--no-content-margin-top, 100px) auto 16px auto;
max-width: 250px;
}
.jazeNoContent__icon {
--icon-width: 100%;
--icon-height: 100%;
background-color: var(--no-content-icon-background-color, #f4f4f5);
border-radius: 100%;
color: var(--no-content-icon-color, #c2c4ce);
height: 250px;
overflow: hidden;
width: 250px;
}
.jazeNoContent__title {
margin-top: 24px;
color: var(--no-content-title-font-color, #242635);
font-size: 19px;
font-weight: 700;
text-align: center;
}
.jazeNoContent__details {
margin-top: 12px;
color: var(--no-content-details-font-color, #c2c4ce);
font-size: 13px;
line-height: 18px;
text-align: center;
}
@media only screen and (max-width: 600px) {
.jazeNoContent {
--no-content-margin-top: 60px;
}
}
.jazeNotification {
padding-left: calc(4px * var(--notification-horizontal-rhythm-multiplier, 8));
padding-right: calc(4px * var(--notification-horizontal-rhythm-multiplier, 8));
padding-bottom: calc(4px * var(--notification-vertical-rhythm-multiplier, 2));
padding-top: calc(4px * var(--notification-vertical-rhythm-multiplier, 2));
align-items: center;
align-self: stretch;
background-color: var(--notification-background-color, #151725);
color: var(--notification-font-color, #fff);
display: flex;
flex-direction: column;
justify-content: center;
min-height: var(--notification-height, 50px);
width: 100%;
}
.jazeNotification a {
color: currentColor;
font-weight: 700;
}
.jazeNotification__close {
margin-right: 32px;
color: #fff;
cursor: pointer;
position: absolute;
right: 0;
}
.jazeNotification--dismissible {
--notification-horizontal-rhythm-multiplier: 18;
}
.jazeNotification--normal {
background-color: #151725;
}
.jazeNotification--normal + .jazeNotification--normal {
border-top: 1px solid hsla(0, 0%, 100%, 0.3);
}
.jazeNotification--normal:last-child {
border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
}
.jazeNotification--danger {
background-color: #f03a3e;
}
.jazeNotification--danger + .jazeNotification--danger {
border-top: 1px solid hsla(0, 0%, 100%, 0.3);
}
.jazeNotification--warning {
background-color: #f5a623;
}
.jazeNotification--warning + .jazeNotification--warning {
border-top: 1px solid hsla(0, 0%, 100%, 0.3);
}
.jazeNotification--success {
background-color: #39cc64;
}
.jazeNotification--success + .jazeNotification--success {
border-top: 1px solid hsla(0, 0%, 100%, 0.3);
}
.jazeFooterPanel {
padding-left: calc(4px * var(--footer-panel-content-horizontal-rhythm-multiplier, 0));
padding-right: calc(4px * var(--footer-panel-content-horizontal-rhythm-multiplier, 0));
--default-footer-panel-height: 60px;
background: var(--footer-panel-background-color, #fff);
border-top: 1px solid var(--footer-panel-border-color, #d6d9e2);
color: var(--footer-panel-font-color, #7e8190);
display: flex;
flex: 0 0 auto;
height: var(--footer-panel-height, var(--default-footer-panel-height));
}
.jazeFooterPanel--expandable {
height: auto;
min-height: var(--footer-panel-height, var(--default-footer-panel-height));
}
.jazeFooterPanel--primary,
.jazeFooterPanel--secondary,
.jazeFooterPanel--tertiary {
--footer-panel-content-horizontal-rhythm-multiplier: 8;
}
.jazeFooterPanel--secondary {
font-size: 11px;
}
.jazeHeaderPanel {
padding-left: calc(4px * var(--header-panel-content-horizontal-rhythm-multiplier, 0));
padding-right: calc(4px * var(--header-panel-content-horizontal-rhythm-multiplier, 0));
padding-bottom: 0px;
padding-top: 0px;
--default-header-panel-height: 50px;
align-items: center;
background: var(--header-panel-background-color, #fff);
border-bottom: 1px solid var(--header-panel-border-color, #d6d9e2);
color: var(--header-panel-font-color, #525461);
display: flex;
flex: 0 0 auto;
height: var(--header-panel-height, var(--default-header-panel-height));
position: relative;
z-index: var(--header-panel-z-index, 600);
}
.jazeHeaderPanel--expandable {
height: auto;
min-height: var(--header-panel-height, var(--default-header-panel-height));
}
.jazeHeaderPanel--global {
--header-panel-height: 50px;
--header-panel-z-index: 800;
background-color: var(--header-panel-global-background-color, #f4f4f5);
border: none;
color: var(--header-panel-global-font-color, #7e8190);
}
.jazeHeaderPanel--primary,
.jazeHeaderPanel--search,
.jazeHeaderPanel--secondary,
.jazeHeaderPanel--tertiary {
--header-panel-content-horizontal-rhythm-multiplier: 8;
}
.jazeHeaderPanel--search,
.jazeHeaderPanel--secondary {
border-top: 1px solid var(--header-panel-border-color, #d6d9e2);
}
.jazeHeaderPanel--tertiary {
background-color: var(--header-panel-tertiary-background-color, #f4f4f5);
}
.jazeHeaderPanel--notifications {
border: none;
flex: none;
flex-direction: column;
height: auto;
}
.jazeMainPanel {
min-width: 0;
min-height: 0;
overflow: hidden;
background-color: var(--main-panel-background-color, #fff);
color: var(--main-panel-font-color, #525461);
display: flex;
flex: 1;
flex-direction: column;
flex-wrap: nowrap;
position: relative;
}
.jazeMainPanel--cards .jazePanelContent,
.jazeMainPanel--feature .jazePanelContent,
.jazeMainPanel--filters .jazePanelContent,
.jazeMainPanel--properties .jazePanelContent {
padding-left: 32px;
padding-right: 32px;
}
.jazeMainPanel--cards .jazePanelContent .jazePanelContent__flush,
.jazeMainPanel--feature .jazePanelContent .jazePanelContent__flush,
.jazeMainPanel--filters .jazePanelContent .jazePanelContent__flush,
.jazeMainPanel--properties .jazePanelContent .jazePanelContent__flush {
margin-left: -32px;
margin-right: -32px;
}
.jazeMainPanel--cards .jazePanelContent,
.jazeMainPanel--feature .jazePanelContent,
.jazeMainPanel--filters .jazePanelContent {
padding-bottom: 16px;
}
.jazeMainPanel--cards .jazePanelContent {
padding-top: 32px;
}
.jazeMainPanel--filters .jazePanelContent {
padding-top: 8px;
}
.jazePanelContainer {
min-width: 0;
min-height: 0;
overflow: hidden;
flex: 1;
flex-wrap: nowrap;
position: relative;
}
.jazePanelContainer--viewport {
max-height: 100vh;
min-height: 100vh;
width: 100%;
}
.jazePanelContainer--vertical,
.jazePanelContainer--withSidePanel {
display: flex;
}
.jazePanelContainer--vertical > .jazeMainPanel,
.jazePanelContainer--withSidePanel > .jazeMainPanel {
max-width: 100%;
}
.jazePanelContainer--horizontal,
.jazePanelContainer--withHeaderPanel {
display: flex;
flex-direction: column;
}
.jazePanelContent {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.jaze-box {
padding: 1.5rem 2rem;
margin: 1rem 0.5rem;
border-radius: 6px;
background-color: #F9F9F9;
box-shadow: 0px 2px 4px rgba(126,142,177,0.12);
}
.jazePanelContent--overflow {
overflow: visible;
}
.jazePanelContent--scrollable {
scrollbar-width: thin;
overflow: auto;
}
.jazePanelContent--scrollable::-webkit-scrollbar {
height: 14px;
width: 14px;
}
.jazePanelContent--scrollable::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: var(--panel-content-scrollbar-thumb-color, #c2c4ce);
border-radius: 14px;
border: 4px solid transparent;
min-height: 60px;
}
.jazePanelContent--scrollable::-webkit-scrollbar-track {
background: transparent;
border-radius: 14px;
}
.jazePanelContent--scrollable::-webkit-scrollbar-corner {
background-color: transparent;
}
.jazeSidePanel {
background: var(--side-panel-background-color, #fff);
border-left: var(--side-panel-border-left);
border-right: var(--side-panel-border-right);
color: var(--side-panel-font-color, #525461);
display: flex;
flex-direction: column;
max-width: var(--side-panel-width);
position: relative;
width: var(--side-panel-width);
z-index: var(--side-panel-z-index, 700);
}
.jazeSidePanel--collapsible {
transition: width 0.3s ease-in-out;
}
.jazeSidePanel--collapsible:not(.is-side-panel-open) {
border: none;
box-shadow: none;
width: 0;
}
.jazeSidePanel--shiftable {
transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
}
.jazeSidePanel--shiftable:not(.is-side-panel-open) {
box-shadow: none;
}
.jazeSidePanel--shiftable:not(.is-side-panel-open).jazeSidePanel--leftPanel {
margin-left: calc(-1 * var(--side-panel-current-width, var(--side-panel-width)));
}
.jazeSidePanel--shiftable:not(.is-side-panel-open).jazeSidePanel--rightPanel {
margin-right: calc(-1 * var(--side-panel-current-width, var(--side-panel-width)));
}
.jazeSidePanel--navigation {
--side-panel-width: 50px;
--side-panel-z-index: 710;
}
.jazeSidePanel--subNavigation {
--side-panel-width: 320px;
background-color: var(--side-panel-sub-navigation-background-color, #fff);
box-shadow: inset -3px 0 10px 0 rgba(0, 0, 0, 0.25);
}
.jazeSidePanel--global {
--side-panel-width: 400px;
--side-panel-z-index: 705;
--side-panel-border-left: 1px solid var(--side-panel-border-color, #d6d9e2);
box-shadow: -6px -2px 40px 0 var(--side-panel-drop-shadow-color, rgba(0, 0, 0, 0.1));
flex: initial;
max-width: calc(100vw - 50px);
}
.jazeSidePanel--filters {
--side-panel-width: 256px;
--side-panel-border-right: 1px solid var(--side-panel-border-color, #d6d9e2);
box-shadow: 6px -2px 40px 0 var(--side-panel-drop-shadow-color, rgba(0, 0, 0, 0.1));
}
.jazeSidePanel--cards {
--side-panel-width: 256px;
--side-panel-border-left: 1px solid var(--side-panel-border-color, #d6d9e2);
box-shadow: -6px -2px 40px 0 var(--side-panel-drop-shadow-color, rgba(0, 0, 0, 0.1));
}
.jazeSidePanel--withDarkMainPanel {
--side-panel-border-color: #333543;
}
.jazeSidePanel--fixedRight {
bottom: 0;
position: absolute;
right: 0;
top: 0;
}
.jazeSidePanel--fixedLeft {
bottom: 0;
left: 0;
position: absolute;
top: 0;
}
.jazeSidePanelTabs {
--side-panel-tabs-width: 56px;
display: flex;
flex-direction: column;
position: absolute;
}
.jazeSidePanelTabs--left {
left: calc(-1 * var(--side-panel-tabs-width));
}
.jazeSidePanelTabs__item {
box-shadow: 0 15px 45px 0 var(--side-panel-tabs-drop-shadow-color, rgba(21, 23, 37, 0.2));
align-items: center;
background: var(--side-panel-tabs-background-color, #fff);
border: 1px solid var(--side-panel-tabs-border-color, #d6d9e2);
display: flex;
-webkit-filter: brightness(90%);
filter: brightness(90%);
height: 50px;
justify-content: center;
width: var(--side-panel-tabs-width);
}
.jazeSidePanelTabs__item:not(:first-child) {
border-top: none;
}
.jazeSidePanelTabs__item.is-selected {
-webkit-filter: brightness(100%);
filter: brightness(100%);
padding-right: 1px;
width: calc(var(--side-panel-tabs-width) + 1px);
}
.jazeSidePanelTabs__item:only-child {
display: none;
}
.jazePopover {
box-shadow: 0 15px 45px 0 var(--popover-drop-shadow-color, rgba(21, 23, 37, 0.2));
color: var(--popover-font-color, #525461);
display: none;
background-color: var(--popover-background-color, #fff);
border-radius: var(--popover-border-radius, 4px);
border: 1px solid var(--popover-border-color, #d6d9e2);
flex-direction: column;
height: var(--popover-height, auto);
max-height: calc(100vh - 50px);
max-width: calc(100vw - 50px);
width: var(--popover-width, 268px);
z-index: var(--popover-z-index, 500);
}
.jazePopover.is-visible {
display: flex;
}
.jazePopover--scaled {
--popover-width: auto;
}
.jazePopover--chips {
--popover-height: 150px;
--popover-width: 450px;
}
.jazePopover--bottomCenter,
.jazePopover--bottomLeft,
.jazePopover--bottomRight,
.jazePopover--topCenter,
.jazePopover--topLeft,
.jazePopover--topRight {
--default-popover-horizontal-offset: 0px;
--default-popover-vertical-offset: 10px;
}
.jazePopover--rightDown {
left: calc(100% + var(--popover-horizontal-offset, 12px));
position: absolute;
top: var(--popover-vertical-offset, 0);
}
.jazePopover--onHeaderButton {
--popover-vertical-offset: 15px;
}
.jazePopover--onTableIcon {
--popover-vertical-offset: 8px;
}
.jazePopover--onTableHeaderIcon {
--popover-vertical-offset: 14px;
}
.jazePopover--appLauncher {
--popover-horizontal-offset: -63px;
--popover-vertical-offset: -37px;
}
.jazePopover--bottomCenter .jazePopover__main:before,
.jazePopover--bottomLeft .jazePopover__main:before,
.jazePopover--bottomRight .jazePopover__main:before {
background: transparent;
content: "";
height: var(--popover-vertical-offset, var(--default-popover-vertical-offset));
position: absolute;
top: calc(-1 * var(--popover-vertical-offset, var(--default-popover-vertical-offset)));
width: 100%;
}
.jazePopover--topCenter .jazePopover__main:before,
.jazePopover--topLeft .jazePopover__main:before,
.jazePopover--topRight .jazePopover__main:before {
background: transparent;
content: "";
height: var(--popover-vertical-offset, var(--default-popover-vertical-offset));
position: absolute;
bottom: calc(-1 * var(--popover-vertical-offset, var(--default-popover-vertical-offset)));
width: 100%;
}
.jazePopover--bottomCenter,
.jazePopover--bottomLeft,
.jazePopover--bottomRight,
.jazePopover--topCenter,
.jazePopover--topLeft,
.jazePopover--topRight {
bottom: var(--popover-position-bottom);
left: var(--popover-position-left);
position: absolute;
right: var(--popover-position-right);
top: var(--popover-position-top);
-webkit-transform: var(--popover-transform);
transform: var(--popover-transform);
}
.jazePopover--bottomCenter,
.jazePopover--bottomLeft,
.jazePopover--bottomRight {
--popover-position-top: calc(100% + var(--popover-vertical-offset, var(--default-popover-vertical-offset)));
}
.jazePopover--topCenter,
.jazePopover--topLeft,
.jazePopover--topRight {
--popover-position-bottom: calc(100% + var(--popover-vertical-offset, var(--default-popover-vertical-offset)));
}
.jazePopover--bottomLeft,
.jazePopover--topLeft {
--popover-position-right: var(--popover-horizontal-offset, var(--default-popover-horizontal-offset));
}
.jazePopover--bottomRight,
.jazePopover--topRight {
--popover-position-left: var(--popover-horizontal-offset, var(--default-popover-horizontal-offset));
}
.jazePopover--bottomCenter,
.jazePopover--topCenter {
--popover-position-left: 50%;
--popover-transform: translateX(-50%);
}
.jazePopover__header {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 16px;
padding-top: 16px;
background: var(--popover-header-background-color, transparent);
color: var(--popover-header-font-color, #525461);
display: flex;
flex: none;
}
.jazePopover__header:not(:last-child) {
border-bottom: 1px solid var(--popover-header-border-color, #d6d9e2);
}
.jazePopover__footer {
background: var(--popover-footer-background-color, #f1f2f4);
color: var(--popover-footer-font-color, #a4a7b5);
}
.jazePopover__footer:not(:first-child) {
border-top: 1px solid var(--popover-footer-border-color, #d6d9e2);
}
.jazePopover__footer:last-child {
border-bottom-left-radius: var(--popover-border-radius, 4px);
border-bottom-right-radius: var(--popover-border-radius, 4px);
}
.jazePopover__main {
scrollbar-width: thin;
display: flex;
flex-direction: column;
flex: auto;
overflow: auto;
}
.jazePopover__main::-webkit-scrollbar {
height: 14px;
width: 14px;
}
.jazePopover__main::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: var(--popover-scrollbar-thumb-color, #c2c4ce);
border-radius: 14px;
border: 4px solid transparent;
min-height: 60px;
}
.jazePopover__main::-webkit-scrollbar-track {
background: transparent;
border-radius: 14px;
}
.jazePopover__main::-webkit-scrollbar-corner {
background-color: transparent;
}
.jazePopover__main:first-child {
border-top-left-radius: var(--popover-border-radius, 4px);
border-top-right-radius: var(--popover-border-radius, 4px);
}
.jazePopover__main:last-child {
border-bottom-left-radius: var(--popover-border-radius, 4px);
border-bottom-right-radius: var(--popover-border-radius, 4px);
}
.jazePopoverContent {
padding-left: calc(4px * var(--popover-main-horizontal-rhythm-multiplier, 5));
padding-right: calc(4px * var(--popover-main-horizontal-rhythm-multiplier, 5));
padding-bottom: calc(4px * var(--popover-main-vertical-rhythm-multiplier, 6));
padding-top: calc(4px * var(--popover-main-vertical-rhythm-multiplier, 6));
width: 100%;
}
.jazePopoverContent--flush {
--popover-main-horizontal-rhythm-multiplier: 0;
--popover-main-vertical-rhythm-multiplier: 0;
}
.jazePopoverContainer {
display: inline-block;
position: relative;
}
.jazePort {
--icon-height: 12px;
--icon-width: 12px;
align-items: center;
background-color: var(--port-background-color, #c2c4ce);
border-radius: 2px;
color: var(--port-color, #fff);
display: flex;
height: var(--port-height, 20px);
justify-content: center;
width: var(--port-width, 20px);
}
.jazePort.is-spacer {
--port-background-color: transparent;
}
.jazePort.is-selected {
--port-border-color: transparent;
outline: 4px solid var(--port-is-selected-outline-color, #bfdbff);
}
.jazePort + .jazePort {
margin-left: 8px;
}
.jazePort--withBorder {
border: 1px solid var(--port-border-color);
}
.jazePort--disconnected {
--port-background-color: #525461;
--port-border-color: var(--port-disconnected-border-color, var(--port-background-color));
}
.jazePort--100 {
--port-background-color: #f5a623;
--port-border-color: var(--port-100-border-color, var(--port-background-color));
}
.jazePort--1000 {
--port-background-color: #39cc64;
--port-border-color: var(--port-1000-border-color, var(--port-background-color));
}
.jazePort--10000 {
--port-background-color: #fff;
--port-border-color: var(--port-10000-border-color, #d6d9e2);
--port-color: #c2c4ce;
}
.jazePort--sfp {
--port-height: var(--port-height-sfp, 16px);
}
.jazePortDiagram {
display: flex;
flex-direction: column;
float: left;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.jazePortRow {
align-items: flex-end;
display: flex;
flex: 1 1 var(--port-row-height, 20px);
}
.jazePortRow + .jazePortRow {
margin-top: 8px;
}
.jazePortGroup {
align-self: flex-start;
display: flex;
flex-wrap: wrap;
}
.jazePortGroup + .jazePortGroup {
margin-left: 20px;
}
@media only screen and (max-width: 420px) {
.jazePortDiagram--scaled {
--port-height: 16px;
--port-height-sfp: 12px;
--port-width: 16px;
--port-row-height: 16px;
}
}
.jazeProperties {
display: flex;
flex-direction: column;
}
.jazeProperties--maximized {
width: 100%;
height: 100%;
}
.jazeProperties__overview {
padding-left: 32px;
padding-right: 32px;
padding-top: 32px;
padding-bottom: 24px;
background: var(--properties-overview-background-color, #f4f4f5);
border-bottom: 1px solid var(--properties-overview-border-color, #d6d9e2);
display: flex;
flex: none;
flex-direction: column;
}
.jazeProperties__navigation {
margin: 0;
padding: 0;
}
.jazeProperties__section {
padding-bottom: 20px;
padding-top: 20px;
}
.jazePropertiesNavigation {
display: flex;
flex: none;
flex-wrap: wrap;
flex-direction: row;
margin: -1px -1px 0 -1px;
width: 100%;
}
.jazePropertiesNavigation__item {
--properties-navigation-item-grid-shadow: 1px 0 0 0 var(--properties-navigation-grid-border-color, #d6d9e2), 0 1px 0 0 var(--properties-navigation-grid-border-color, #d6d9e2),
1px 1px 0 0 var(--properties-navigation-grid-border-color, #d6d9e2), 1px 0 0 0 var(--properties-navigation-grid-border-color, #d6d9e2) inset, 0 1px 0 0 var(--properties-navigation-grid-border-color, #d6d9e2) inset;
--properties-navigation-item-hover-shadow: 0 15px 45px 0 var(--properties-navigation-item-hover-shadow-color, rgba(21, 23, 37, 0.2));
align-items: center;
box-shadow: var(--properties-navigation-item-grid-shadow);
color: #7e8190;
cursor: pointer;
display: flex;
flex-direction: column;
height: 112px;
justify-content: center;
width: 50%;
}
.jazePropertiesNavigation__item:hover {
box-shadow: var(--properties-navigation-item-grid-shadow), var(--properties-navigation-item-hover-shadow);
cursor: pointer;
}
.jazeScrollable {
scrollbar-width: thin;
overflow: auto;
}
.jazeScrollable::-webkit-scrollbar {
height: 14px;
width: 14px;
}
.jazeScrollable::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: var(--scrollable-scrollbar-thumb-color, #1050cf);
border-radius: 14px;
border: 4px solid transparent;
min-height: 60px;
}
.jazeScrollable::-webkit-scrollbar-track {
background: transparent;
border-radius: 14px;
}
.jazeScrollable::-webkit-scrollbar-corner {
background-color: transparent;
}
.jazeScrollableHorizontal {
scrollbar-width: thin;
overflow-x: auto;
overflow-y: hidden;
}
.jazeScrollableHorizontal::-webkit-scrollbar {
height: 14px;
width: 14px;
}
.jazeScrollableHorizontal::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: var(--scrollable-scrollbar-thumb-color, #646464);
border-radius: 14px;
border: 4px solid transparent;
min-height: 60px;
}
.jazeScrollableHorizontal::-webkit-scrollbar-track {
background: transparent;
border-radius: 14px;
}
.jazeScrollableHorizontal::-webkit-scrollbar-corner {
background-color: transparent;
}
.jazeScrollableVertical {
scrollbar-width: thin;
overflow-x: hidden;
overflow-y: auto;
}
.jazeScrollableVertical::-webkit-scrollbar {
height: 14px;
width: 14px;
}
.jazeScrollableVertical::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: var(--scrollable-scrollbar-thumb-color, #c2c4ce);
border-radius: 14px;
border: 4px solid transparent;
min-height: 60px;
}
.jazeScrollableVertical::-webkit-scrollbar-track {
background: transparent;
border-radius: 14px;
}
.jazeScrollableVertical::-webkit-scrollbar-corner {
background-color: transparent;
}
.jazeStatusBall {
background-color: var(--status-ball-color);
border-radius: 100%;
display: inline-block;
flex-shrink: 0;
height: var(--status-ball-height, 8px);
width: var(--status-ball-width, 8px);
}
.jazeStatusBall--cozy {
height: 6px;
width: 6px;
}
.jazeStatusBall--comfy {
height: 10px;
width: 10px;
}
.jazeStatusBall--currentColor {
background-color: currentColor;
}
.jazeStatusBall--success {
background-color: #39cc64;
}
.jazeStatusBall--warning {
background-color: #f5a623;
}
.jazeStatusBall--danger {
background-color: #f03a3e;
}
.jazeStatusBall--neutral {
background-color: #7e8190;
}
.jazeStatusBall--color0 {
background-color: #4a5467;
}
.jazeStatusBall--color1 {
background-color: #e462ff;
}
.jazeStatusBall--color2 {
background-color: #586ced;
}
.jazeStatusBall--color3 {
background-color: #84d9ff;
}
.jazeStatusBall--color4 {
background-color: #19ddcc;
}
.jazeStatusBall--color5 {
background-color: #b9f872;
}
.jazeStatusBall--color6 {
background-color: #ffdb1a;
}
.jazeStatusBall--color7 {
background-color: #ff8500;
}
.jazeStatusBall--color8 {
background-color: #ff0075;
}
.jazeStatusBall--color9 {
background-color: #8a55e7;
}
.jazeStatusBall--color10 {
background-color: #3ca7ff;
}
.jazeStatusBall--color11 {
background-color: #00faff;
}
.jazeStatusBall--color12 {
background-color: #61e066;
}
.jazeStatusBall--color13 {
background-color: #eefa76;
}
.jazeStatusBall--color14 {
background-color: #ffb600;
}
.jazeStatusBall--color15 {
background-color: #ff3e00;
}
.jazeStatusBall--color16 {
background-color: #d800a3;
}
.jazeStatusBar {
--local-status-bar-background-color: var(--status-bar-background-color, #d6d9e2);
--local-status-bar-height: var(--status-bar-height, 2px);
background-color: var(--local-status-bar-background-color);
display: inline-block;
height: var(--local-status-bar-height);
width: var(--status-bar-width, 100%);
}
.jazeStatusBar--small {
--status-bar-height: 1px;
}
.jazeStatusBar--large {
--status-bar-height: 10px;
}
.jazeStatusBar--combo {
background-color: transparent;
display: flex;
flex: none;
}
.jazeStatusBar--combo .jazeStatusBar__status + .jazeStatusBar__status {
margin-left: 1px;
}
.jazeStatusBar--combo .jazeStatusBar__status--empty {
display: flex;
flex: 1;
}
.jazeStatusBar--overflow {
height: 1px;
overflow: visible;
position: relative;
}
.jazeStatusBar--overflow .jazeStatusBar__status {
border-radius: 3px;
height: 3px;
left: 0;
position: absolute;
top: -1px;
}
.jazeStatusBar--dotted {
background: linear-gradient(90deg, var(--local-status-bar-background-color) 75%, transparent 0);
background-size: 4px 4px;
}
.jazeStatusBar--dotted .jazeStatusBar__status {
background: linear-gradient(90deg, var(--status-bar-color, #d6d9e2) 75%, transparent 0);
background-size: 4px 4px;
}
.jazeStatusBar--rounded {
border-radius: var(--local-status-bar-height);
}
.jazeStatusBar--rounded .jazeStatusBar__status:first-child {
border-top-left-radius: var(--local-status-bar-height);
border-bottom-left-radius: var(--local-status-bar-height);
}
.jazeStatusBar--rounded .jazeStatusBar__status:last-child {
border-top-right-radius: var(--local-status-bar-height);
border-bottom-right-radius: var(--local-status-bar-height);
}
.jazeStatusBar__status {
background-color: var(--status-bar-color);
display: block;
height: 100%;
}
.jazeStatusBar--primary,
.jazeStatusBar__status--primary {
--status-bar-color: var(--color-500);
}
.jazeStatusBar--success,
.jazeStatusBar__status--success {
--status-bar-color: #39cc64;
}
.jazeStatusBar--warning,
.jazeStatusBar__status--warning {
--status-bar-color: #f5a623;
}
.jazeStatusBar--danger,
.jazeStatusBar__status--danger {
--status-bar-color: #f03a3e;
}
.jazeStatusBar--empty,
.jazeStatusBar__status--empty {
--status-bar-color: var(--status-bar-background-color, #d6d9e2);
}
.jazeStatusBox {
background-color: var(--status-box-color);
display: inline-block;
height: var(--status-box-height, 7px);
width: var(--status-box-width, 7px);
}
.jazeStatusBox--success {
background-color: #39cc64;
}
.jazeStatusBox--warning {
background-color: #f5a623;
}
.jazeStatusBox--danger {
background-color: #f03a3e;
}
.jazeStatusBox--primary {
background-color: var(--color-500);
}
.jazeStatusBox--neutralDark {
background-color: #525461;
}
.jazeStatusBox--neutralLight {
background-color: #c2c4ce;
}
.jazeStatusKeyGroup {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--status-key-group-border-color, #d6d9e2);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.jazeStatusKey {
padding-bottom: 4px;
padding-top: 4px;
font-size: 9px;
color: var(--status-key-font-color, #a4a7b5);
display: flex;
align-items: center;
}
.jazeStatusKey__text {
margin-left: 4px;
}
.jazeStatusText {
color: var(--status-text-color);
display: inline-block;
font-size: 10px;
text-transform: uppercase;
}
.jazeStatusText--success {
color: #39cc64;
}
.jazeStatusText--warning {
color: #f5a623;
}
.jazeStatusText--danger {
color: #f03a3e;
}
.jazeStatusText--primary {
color: var(--color-500);
}
.jazeStatusText--neutral {
color: #c2c4ce;
}
.table,
table {
display: table;
}
.thead,
thead {
display: table-header-group;
}
.tfoot,
tfoot {
display: table-footer-group;
}
.tbody,
tbody {
display: table-row-group;
}
.tr,
tr {
display: table-row;
}
.td,
.th,
td,
th {
display: table-cell;
}
.jazeTable {
background-color: var(--table-background-color, transparent);
border-collapse: collapse;
border-spacing: 0;
color: var(--table-font-color, #525461);
width: 100%;
}
.jazeTable .thead,
.jazeTable thead {
background-color: var(--table-header-background-color, transparent);
}
.jazeTable .tfoot,
.jazeTable tfoot {
--table-body-cell-border-width: 0;
}
.jazeTable .tbody .tr.is-row-selected,
.jazeTable .tbody tr.is-row-selected,
.jazeTable tbody .tr.is-row-selected,
.jazeTable tbody tr.is-row-selected {
--table-row-background-color: var(--table-row-selected-background-color, var(--color-100));
}
.jazeTable .tbody .tr.is-row-disabled .td,
.jazeTable .tbody .tr.is-row-disabled td,
.jazeTable .tbody tr.is-row-disabled .td,
.jazeTable .tbody tr.is-row-disabled td,
.jazeTable tbody .tr.is-row-disabled .td,
.jazeTable tbody .tr.is-row-disabled td,
.jazeTable tbody tr.is-row-disabled .td,
.jazeTable tbody tr.is-row-disabled td {
opacity: var(--table-row-disabled-opacity, 0.4);
pointer-events: none;
}
.jazeTable .tbody .tr.is-row-muted .td:not(.jazeTableCell--withActions),
.jazeTable .tbody .tr.is-row-muted td:not(.jazeTableCell--withActions),
.jazeTable .tbody tr.is-row-muted .td:not(.jazeTableCell--withActions),
.jazeTable .tbody tr.is-row-muted td:not(.jazeTableCell--withActions),
.jazeTable tbody .tr.is-row-muted .td:not(.jazeTableCell--withActions),
.jazeTable tbody .tr.is-row-muted td:not(.jazeTableCell--withActions),
.jazeTable tbody tr.is-row-muted .td:not(.jazeTableCell--withActions),
.jazeTable tbody tr.is-row-muted td:not(.jazeTableCell--withActions) {
opacity: var(--table-row-disabled-opacity, 0.4);
}
.jazeTable .tbody .td.is-cell-muted,
.jazeTable .tbody td.is-cell-muted,
.jazeTable tbody .td.is-cell-muted,
.jazeTable tbody td.is-cell-muted {
opacity: 0.4;
}
.jazeTable .tr,
.jazeTable tr {
background-color: var(--table-row-background-color, transparent);
}
.jazeTable .th,
.jazeTable th {
padding-left: calc(4px * var(--table-header-cell-horizontal-rhythm-multiplier, 2));
padding-right: calc(4px * var(--table-header-cell-horizontal-rhythm-multiplier, 2));
padding-bottom: calc(4px * var(--table-header-cell-vertical-rhythm-multiplier, 4));
padding-top: calc(4px * var(--table-header-cell-vertical-rhythm-multiplier, 4));
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--table-header-font-color, #525461);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-align: left;
text-transform: uppercase;
z-index: 1;
}
.jazeTable .th.is-column-sortable,
.jazeTable th.is-column-sortable {
cursor: pointer;
}
.jazeTable .th.is-column-sorted,
.jazeTable th.is-column-sorted {
color: var(--table-header-cell-sorted-color, var(--color-500));
}
.jazeTable .td,
.jazeTable td {
padding-left: calc(4px * var(--table-body-cell-horizontal-rhythm-multiplier, 2));
padding-right: calc(4px * var(--table-body-cell-horizontal-rhythm-multiplier, 2));
padding-top: calc(4px * var(--table-body-cell-vertical-rhythm-multiplier, 2));
padding-bottom: calc(4px * var(--table-body-cell-vertical-rhythm-multiplier, 2));
border-color: var(--table-body-cell-border-color, #e5e7ed);
border-style: solid;
border-width: var(--table-body-cell-border-width, 1px 0);
color: var(--table-body-cell-font-color, #525461);
font-size: var(--table-body-font-size, 11px);
line-height: var(--table-body-line-height, 16px);
}
.jazeTable.noBorder td {
border-style: none;
}
.jazeTable--virtualized.table,
.jazeTable--virtualized .tbody,
.jazeTable--virtualized .td,
.jazeTable--virtualized .tfoot,
.jazeTable--virtualized .th,
.jazeTable--virtualized .thead {
display: block;
}
.jazeTable--virtualized .tr {
display: flex;
}
.jazeTable--virtualized .tr:not(:last-child) .td {
border-bottom: none;
}
.jazeTable--fixed {
table-layout: fixed;
}
.jazeTable--secondary {
--table-header-cell-vertical-rhythm-multiplier: 2;
}
.jazeTable--secondary .th,
.jazeTable--secondary th {
border-color: var(--table-body-cell-border-color, #e5e7ed);
border-style: solid;
border-width: 0 0 1px 0;
color: var(--table-secondary-header-font-color, #525461);
font-weight: 700;
letter-spacing: normal;
text-transform: none;
}
.jazeTable--count {
--table-body-line-height: normal;
}
.jazeTable--list,
.jazeTable--open .tbody:not(.jazeTableBody--highlight) .tr:first-child .td,
.jazeTable--open .tbody:not(.jazeTableBody--highlight) .tr:first-child td,
.jazeTable--open .tbody:not(.jazeTableBody--highlight) .tr:last-child .td,
.jazeTable--open .tbody:not(.jazeTableBody--highlight) .tr:last-child td,
.jazeTable--open .tbody:not(.jazeTableBody--highlight) tr:first-child .td,
.jazeTable--open .tbody:not(.jazeTableBody--highlight) tr:first-child td,
.jazeTable--open .tbody:not(.jazeTableBody--highlight) tr:last-child .td,
.jazeTable--open .tbody:not(.jazeTableBody--highlight) tr:last-child td,
.jazeTable--open tbody:not(.jazeTableBody--highlight) .tr:first-child .td,
.jazeTable--open tbody:not(.jazeTableBody--highlight) .tr:first-child td,
.jazeTable--open tbody:not(.jazeTableBody--highlight) .tr:last-child .td,
.jazeTable--open tbody:not(.jazeTableBody--highlight) .tr:last-child td,
.jazeTable--open tbody:not(.jazeTableBody--highlight) tr:first-child .td,
.jazeTable--open tbody:not(.jazeTableBody--highlight) tr:first-child td,
.jazeTable--open tbody:not(.jazeTableBody--highlight) tr:last-child .td,
.jazeTable--open tbody:not(.jazeTableBody--highlight) tr:last-child td {
--table-body-cell-border-width: 0;
}
.jazeTable--list {
--table-body-cell-font-color: #7e8190;
}
.jazeTable--list .is-row-selected {
--table-body-cell-font-color: var(--color-500);
}
.jazeTable--noWrap .td,
.jazeTable--noWrap .th,
.jazeTable--noWrap td,
.jazeTable--noWrap th {
white-space: nowrap;
}
.jazeTable--flush .td:first-child,
.jazeTable--flush .th:first-child,
.jazeTable--flush td:first-child,
.jazeTable--flush th:first-child {
padding-left: 0;
}
.jazeTable--flush .td:last-child,
.jazeTable--flush .th:last-child,
.jazeTable--flush td:last-child,
.jazeTable--flush th:last-child {
padding-right: 0;
}
.jazeTable--actionable tr {
cursor: pointer;
}
.jazeTable--hoverable .tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-row-disabled):not(.is-hover-disabled),
.jazeTable--hoverable .tbody .tr:hover:not(.is-row-selected):not(.is-row-disabled):not(.is-hover-disabled),
.jazeTable--hoverable .tbody tr.is-row-hovered:not(.is-row-selected):not(.is-row-disabled):not(.is-hover-disabled),
.jazeTable--hoverable .tbody tr:hover:not(.is-row-selected):not(.is-row-disabled):not(.is-hover-disabled),
.jazeTable--hoverable tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-row-disabled):not(.is-hover-disabled),
.jazeTable--hoverable tbody .tr:hover:not(.is-row-selected):not(.is-row-disabled):not(.is-hover-disabled),
.jazeTable--hoverable tbody tr.is-row-hovered:not(.is-row-selected):not(.is-row-disabled):not(.is-hover-disabled),
.jazeTable--hoverable tbody tr:hover:not(.is-row-selected):not(.is-row-disabled):not(.is-hover-disabled) {
--table-row-background-color: var(--table-row-hover-background-color, #f8f8f9);
}
.jazeTable--flush.jazeTable--hoverable {
--default-table-row-hover-overflow: 16px;
}
.jazeTable--flush.jazeTable--hoverable .tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td,
.jazeTable--flush.jazeTable--hoverable .tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td,
.jazeTable--flush.jazeTable--hoverable .tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td,
.jazeTable--flush.jazeTable--hoverable .tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) td,
.jazeTable--flush.jazeTable--hoverable .tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td,
.jazeTable--flush.jazeTable--hoverable .tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td,
.jazeTable--flush.jazeTable--hoverable .tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td,
.jazeTable--flush.jazeTable--hoverable .tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) td,
.jazeTable--flush.jazeTable--hoverable tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td,
.jazeTable--flush.jazeTable--hoverable tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td,
.jazeTable--flush.jazeTable--hoverable tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td,
.jazeTable--flush.jazeTable--hoverable tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) td,
.jazeTable--flush.jazeTable--hoverable tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td,
.jazeTable--flush.jazeTable--hoverable tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td,
.jazeTable--flush.jazeTable--hoverable tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td,
.jazeTable--flush.jazeTable--hoverable tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) td {
position: relative;
}
.jazeTable--flush.jazeTable--hoverable .tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after {
background-color: var(--table-row-background-color);
bottom: 0;
content: "";
position: absolute;
top: 0;
width: var(--table-row-hover-overflow, var(--default-table-row-hover-overflow));
}
.jazeTable--flush.jazeTable--hoverable .tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable .tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:first-child:before,
.jazeTable--flush.jazeTable--hoverable tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:first-child:before {
left: calc(-1 * var(--table-row-hover-overflow, var(--default-table-row-hover-overflow)));
}
.jazeTable--flush.jazeTable--hoverable .tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable .tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody .tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody .tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody tr.is-row-hovered:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) .td:last-child:after,
.jazeTable--flush.jazeTable--hoverable tbody tr:hover:not(.is-row-selected):not(.is-hover-disabled) td:last-child:after {
right: calc(-1 * var(--table-row-hover-overflow, var(--default-table-row-hover-overflow)));
}
.jazeTableBody + .jazeTableBody:before {
content: "";
display: block;
height: 36px;
}
.jazeTableBody--withSpaceBefore:before {
content: "";
display: block;
height: 20px;
}
.jazeTableBody--withSpaceBefore:not(.jazeTableBody--highlight) .tr:first-child .td,
.jazeTableBody--withSpaceBefore:not(.jazeTableBody--highlight) .tr:first-child td,
.jazeTableBody--withSpaceBefore:not(.jazeTableBody--highlight) tr:first-child .td,
.jazeTableBody--withSpaceBefore:not(.jazeTableBody--highlight) tr:first-child td {
--table-body-cell-border-width: 0;
}
.jazeTableBody--highlight,
.jazeTableRow--highlight {
--table-body-cell-border-width: 1px;
--table-body-cell-border-color: var(--table-row-highlight-border-color, #bfdbff);
}
.jazeTableBody--highlight .td:not(:first-child),
.jazeTableBody--highlight td:not(:first-child),
.jazeTableRow--highlight .td:not(:first-child),
.jazeTableRow--highlight td:not(:first-child) {
border-left-style: none;
}
.jazeTableBody--highlight .td:not(:last-child),
.jazeTableBody--highlight td:not(:last-child),
.jazeTableRow--highlight .td:not(:last-child),
.jazeTableRow--highlight td:not(:last-child) {
border-right-style: none;
}
.jazeTableRow--highlight + .jazeTableRow--spacer .td,
.jazeTableRow--highlight + .jazeTableRow--spacer td {
--table-row-disabled-opacity: 1;
border-top: 1px solid var(--table-row-highlight-border-color, #bfdbff);
}
.tr.jazeTableRow--flex,
tr.jazeTableRow--flex {
display: flex;
}
.jazeTableRow--flex .td,
.jazeTableRow--flex .th,
.jazeTableRow--flex td,
.jazeTableRow--flex th {
display: block;
}
.td.jazeTableCell--withActions,
.th.jazeTableCell--withActions,
td.jazeTableCell--withActions,
th.jazeTableCell--withActions {
overflow: visible;
position: relative;
}
.jazeTableCell--smash {
width: 1px;
}
.jazeTableCell--treeStart {
--table-body-cell-horizontal-rhythm-multiplier: 0;
position: relative;
text-align: center;
width: 40px;
}
.jazeTableCell--treeStart.is-expanded:before {
border-left: var(--table-body-cell-expandable-tree-color, #c2c4ce) solid 1px;
bottom: 0;
content: "";
left: 50%;
position: absolute;
right: 0;
top: calc(50% + 8px);
}
.jazeTableCell--treeEnd,
.jazeTableCell--treeMiddle {
--table-body-cell-horizontal-rhythm-multiplier: 0;
position: relative;
width: 40px;
}
.jazeTableCell--treeEnd:before,
.jazeTableCell--treeMiddle:before {
border-top: var(--table-body-cell-expandable-tree-color, #c2c4ce) solid 1px;
bottom: 0;
content: "";
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
.jazeTableCell--treeEnd:after,
.jazeTableCell--treeMiddle:after {
border-left: var(--table-body-cell-expandable-tree-color, #c2c4ce) solid 1px;
bottom: 0;
content: "";
left: 50%;
position: absolute;
right: 0;
top: -1px;
}
.jazeTableCell--treeEnd:after {
bottom: 50%;
}
.jazeTableCell--checkbox {
--table-header-cell-vertical-rhythm-multiplier: 0;
--table-body-cell-vertical-rhythm-multiplier: 0;
width: 16px;
}
.jazeTableCell__actions {
padding-left: calc(4px * var(--table-body-cell-horizontal-rhythm-multiplier));
padding-right: calc(4px * var(--table-body-cell-horizontal-rhythm-multiplier));
color: var(--table-action-icon-color, #a4a7b5);
}
.jazeTableCell__actions--popover {
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.jazeTableCell__actions--inline {
background-color: var(--table-row-background-color);
bottom: 0;
display: flex;
position: absolute;
right: 0;
top: 0;
}
.tr.is-hover-disabled .jazeTableCell__actions--inline,
.tr:not(:hover):not(.is-row-hovered) .jazeTableCell__actions--inline,
tr.is-hover-disabled .jazeTableCell__actions--inline,
tr:not(:hover):not(.is-row-hovered) .jazeTableCell__actions--inline {
display: none;
}
.jazeTableCell__actions--inline:before {
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), var(--table-row-background-color));
bottom: 0;
content: "";
pointer-events: none;
position: absolute;
right: 100%;
top: 0;
width: 180px;
}
.jazeTableCell__image {
vertical-align: middle;
}
.jazeTableCell__sortIcon {
margin-left: 4px;
color: var(--table-sort-icon-color, #a4a7b5);
width: 8px;
height: 8px;
visibility: hidden;
}
.is-column-sortable:hover .jazeTableCell__sortIcon,
.is-column-sorted .jazeTableCell__sortIcon {
visibility: visible;
}
.is-column-sorted .jazeTableCell__sortIcon {
--table-sort-icon-color: var(--color-500);
}
.jazeTableCell__sortIcon:first-child {
margin-left: 0;
}
.jazeTabs {
align-self: flex-end;
display: flex;
min-width: 0;
}
.jazeTabs--centered {
flex: 1;
justify-content: center;
}
.jazeTabs--wrapped {
flex-wrap: wrap;
}
.jazeTabs--overlapBorder {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
.jazeTabs__item {
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: calc(4px * var(--tab-item-horizontal-rhythm-padding-multiplier, 6));
padding-right: calc(4px * var(--tab-item-horizontal-rhythm-padding-multiplier, 6));
border-bottom: 2px solid var(--tab-item-border-color, transparent);
border-top: 2px solid transparent;
color: var(--tab-item-font-color, #a4a7b5);
cursor: pointer;
flex: none;
font-size: var(--tab-item-font-size, 13px);
letter-spacing: 0.5px;
max-width: var(--tab-item-max-width, 180px);
padding-bottom: var(--tab-item-vertical-padding, 14.5px);
padding-top: var(--tab-item-vertical-padding, 14.5px);
text-align: center;
}
.jazeTabs__item:hover {
--tab-item-border-color: var(--tab-item-hover-border-color, #bfdbff);
}
.jazeTabs__item.is-tab-selected {
--tab-item-border-color: var(--color-500);
--tab-item-font-color: var(--tab-item-selected-font-color, #525461);
}
.jazeTabs__item.is-tab-disabled {
cursor: not-allowed;
pointer-events: none;
}
.jazeTabs__item a {
color: currentColor;
}
.jazeTabs__icon {
padding-left: 12px;
padding-right: 12px;
align-items: center;
cursor: pointer;
display: flex;
flex: none;
}
.jazeTabs__icon:first-child {
padding-left: 0;
}
.jazeTabs__icon:last-child {
padding-right: 0;
}
.jazeTabsContainer {
display: flex;
justify-content: center;
width: 100%;
}
.jazeTabsContainer--standalone {
border-bottom: 1px solid var(--tabs-container-border-color, #d6d9e2);
}
.jazeTabsGroup {
display: flex;
}
.jazeTabsGroup--scrollable {
overflow-y: auto;
scroll-behavior: smooth;
scrollbar-width: none;
}
.jazeTabsGroup--scrollable::-webkit-scrollbar {
display: none;
}
.jazeToast {
box-shadow: 0 15px 45px 0 var(--toast-drop-shadow-color, rgba(21, 23, 37, 0.2));
margin-bottom: 8px;
margin-top: 8px;
align-items: stretch;
background: var(--toast-background-color, #fff);
border-radius: 4px;
display: flex;
flex-direction: row;
flex: none;
margin-left: 16px;
margin-right: 16px;
max-width: calc(100vw - 30px);
pointer-events: all;
position: relative;
width: 370px;
}
.jazeToast.is-child-dropdown-expanded {
border-bottom-right-radius: 0;
}
.jazeToast--stack {
flex-direction: column;
}
.jazeToast__item {
padding-bottom: 24px;
padding-top: 24px;
padding-left: 16px;
padding-right: 16px;
color: var(--toast-item-font-color, #a4a7b5);
font-size: 11px;
}
.jazeToast__item + .jazeToast__item {
border-top: 1px solid var(--toast-border-color, #e5e7ed);
}
.jazeToast__image {
align-items: center;
display: flex;
border-right: 1px solid var(--toast-border-color, #e5e7ed);
z-index: 1;
}
.jazeToast__body,
.jazeToast__image {
padding-left: 16px;
padding-right: 16px;
}
.jazeToast__body {
padding-bottom: 20px;
padding-top: 20px;
width: 100%;
}
.jazeToast__title {
align-items: center;
color: var(--toast-title-font-color, #525461);
display: flex;
font-size: 11px;
font-weight: 700;
}
.jazeToast__title + .jazeToast__details {
margin-top: 8px;
}
.jazeToast__details {
margin-right: 24px;
color: var(--toast-details-font-color, #7e8190);
font-size: 11px;
line-height: 16px;
word-break: break-word;
}
.jazeToast__actions {
margin-top: 16px;
margin-right: 4px;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.jazeToast__close {
color: var(--toast-close-font-color, #a4a7b5);
display: none;
position: absolute;
right: 12px;
top: 12px;
}
.jazeToast:hover .jazeToast__close {
display: block;
}
.jazeToast__dropdown {
position: absolute;
right: 0;
top: 100%;
z-index: 1;
}
.jazeToast__dropdown:before {
background-color: var(--toast-background-color, #fff);
content: "";
height: 12px;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: -12px;
transition: opacity 0s ease 0.4s;
}
.is-child-dropdown-expanded .jazeToast__dropdown:before {
opacity: 1;
transition-delay: 0s;
}
@media (hover: none) {
.jazeToast__close {
display: block;
}
}
.jazeToastContainer {
scrollbar-width: none;
align-items: flex-end;
display: flex;
flex-direction: column;
max-height: 100vh;
overflow: auto;
pointer-events: none;
position: absolute;
z-index: var(--toast-container-z-index, 1100);
}
.jazeToastContainer::-webkit-scrollbar {
display: none;
}
.jazeToastContainer:not(.jazeToastContainer--bottomRight):not(.jazeToastContainer--bottomCenter):not(.jazeToastContainer--bottomLeft):not(.jazeToastContainer--topRight):not(.jazeToastContainer--topCenter):not(.jazeToastContainer--topLeft) {
bottom: 0;
padding-bottom: 36px;
padding-left: 24px;
padding-top: 56px;
right: 0;
top: 0;
}
.jazeToastContainer--topCenter,
.jazeToastContainer--topLeft,
.jazeToastContainer--topRight {
bottom: 0;
padding-bottom: 36px;
padding-top: 56px;
top: 0;
}
.jazeToastContainer--bottomCenter,
.jazeToastContainer--bottomLeft,
.jazeToastContainer--bottomRight {
bottom: 0;
flex-direction: column-reverse;
padding-bottom: 8px;
top: 0;
}
.jazeToastContainer--bottomLeft,
.jazeToastContainer--topLeft {
left: 50px;
padding-right: 24px;
}
.jazeToastContainer--bottomRight,
.jazeToastContainer--topRight {
padding-left: 24px;
right: 0;
}
.jazeToastContainer--bottomCenter,
.jazeToastContainer--topCenter {
left: 50%;
padding-left: 24px;
padding-right: 24px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.jazeToggle {
--local-toggle-width: var(--toggle-width, 40px);
--local-toggle-height: var(--toggle-height, 24px);
--local-toggle-border-width: var(--toggle-border-width, 2px);
display: inline-block;
height: var(--local-toggle-height);
min-width: var(--local-toggle-width);
position: relative;
width: var(--local-toggle-width);
}
.jazeToggle input[type="checkbox"] {
display: none;
}
.jazeToggle label {
background-color: var(--toggle-background-off-color, #d6d9e2);
border-radius: var(--local-toggle-height);
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.4s;
}
.jazeToggle label:before {
background-color: var(--toggle-button-off-color, #fff);
border-radius: 50%;
bottom: var(--local-toggle-border-width);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
content: "";
height: calc(var(--local-toggle-height) - (var(--local-toggle-border-width) * 2));
left: var(--local-toggle-border-width);
position: absolute;
transition: 0.4s;
width: calc(var(--local-toggle-height) - (var(--local-toggle-border-width) * 2));
}
.jazeToggle input:checked + label {
background-color: var(--toggle-background-on-color, var(--color-500));
}
.jazeToggle input:checked + label:before {
background-color: var(--toggle-button-on-color, #fff);
left: auto;
right: var(--local-toggle-border-width);
}
.jazeToggle input:disabled + label {
opacity: 0.4;
}
.jazeTooltip {
box-shadow: 0 5px 25px 0 var(--tooltip-drop-shadow-color, rgba(21, 23, 37, 0.2));
--default-tooltip-background-color: #fff;
--default-tooltip-border-color: #c2c4ce;
display: var(--tooltip-display, block);
background-color: var(--tooltip-background-color, var(--default-tooltip-background-color));
border-radius: 3px;
border: 1px solid var(--tooltip-border-color, var(--default-tooltip-border-color));
color: var(--tooltip-font-color, #525461);
font-size: var(--tooltip-font-size, 12px);
letter-spacing: 0.25px;
line-height: 1em;
z-index: var(--tooltip-z-index, 400);
}
.jazeTooltip--navigation {
padding-left: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-top: 12px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left-style: none;
border-width: 0.9px;
left: 64px;
max-width: 360px;
position: absolute;
text-transform: uppercase;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
white-space: nowrap;
}
.jazeTooltip--navigation:before {
background-color: var(--tooltip-background-color, var(--default-tooltip-background-color));
border-left: 1px solid var(--tooltip-border-color, var(--default-tooltip-border-color));
border-bottom: 1px solid var(--tooltip-border-color, var(--default-tooltip-border-color));
content: "";
display: block;
height: 26px;
left: -13px;
pointer-events: none;
position: absolute;
top: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 26px;
z-index: -1;
}
.jazeTooltip--headerNav {
padding-left: 12px;
padding-right: 12px;
padding-bottom: 8px;
padding-top: 8px;
border: none;
color: #7e8190;
font-size: 11px;
left: 50%;
top: calc(100% + var(--tooltip-distance, 8px));
position: absolute;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.jazeTooltip--bottomCenter,
.jazeTooltip--bottomLeft,
.jazeTooltip--bottomRight,
.jazeTooltip--topCenter,
.jazeTooltip--topLeft,
.jazeTooltip--topRight {
padding-left: 12px;
padding-right: 12px;
padding-bottom: 12px;
padding-top: 12px;
--default-tooltip-arrow-size: 10px;
--default-tooltip-arrow-horizontal-offset: 28px;
--default-tooltip-arrow-vertical-offset: 4px;
width: var(--tooltip-width, auto);
bottom: var(--tooltip-position-bottom);
left: var(--tooltip-position-left);
position: absolute;
right: var(--tooltip-position-right);
top: var(--tooltip-position-top);
-webkit-transform: var(--tooltip-transform);
transform: var(--tooltip-transform);
}
.jazeTooltip--bottomCenter:after,
.jazeTooltip--bottomCenter:before,
.jazeTooltip--bottomLeft:after,
.jazeTooltip--bottomLeft:before,
.jazeTooltip--bottomRight:after,
.jazeTooltip--bottomRight:before,
.jazeTooltip--topCenter:after,
.jazeTooltip--topCenter:before,
.jazeTooltip--topLeft:after,
.jazeTooltip--topLeft:before,
.jazeTooltip--topRight:after,
.jazeTooltip--topRight:before {
border-color: transparent;
border-style: solid;
border-width: var(--tooltip-arrow-size, var(--default-tooltip-arrow-size));
content: "";
display: block;
height: 0;
left: var(--tooltip-arrow-position-left);
right: var(--tooltip-arrow-position-right);
pointer-events: none;
position: absolute;
-webkit-transform: var(--tooltip-arrow-transform);
transform: var(--tooltip-arrow-transform);
width: 0;
}
.jazeTooltip--bottomCenter,
.jazeTooltip--bottomLeft,
.jazeTooltip--bottomRight {
--tooltip-position-top: calc(100% + (var(--tooltip-arrow-size, var(--default-tooltip-arrow-size)) + var(--tooltip-arrow-vertical-offset, var(--default-tooltip-arrow-vertical-offset))));
}
.jazeTooltip--bottomCenter:after,
.jazeTooltip--bottomLeft:after,
.jazeTooltip--bottomRight:after {
border-bottom-color: var(--tooltip-background-color, var(--default-tooltip-background-color));
top: calc(-1 * (var(--tooltip-arrow-size, var(--default-tooltip-arrow-size)) * 2));
}
.jazeTooltip--bottomCenter:before,
.jazeTooltip--bottomLeft:before,
.jazeTooltip--bottomRight:before {
border-bottom-color: var(--tooltip-border-color, var(--default-tooltip-border-color));
top: calc((-1 * (var(--tooltip-arrow-size, var(--default-tooltip-arrow-size)) * 2)) - 1px);
}
.jazeTooltip--topCenter,
.jazeTooltip--topLeft,
.jazeTooltip--topRight {
--tooltip-position-bottom: calc(100% + (var(--tooltip-arrow-size, var(--default-tooltip-arrow-size)) + var(--tooltip-arrow-vertical-offset, var(--default-tooltip-arrow-vertical-offset))));
}
.jazeTooltip--topCenter:after,
.jazeTooltip--topLeft:after,
.jazeTooltip--topRight:after {
border-top-color: var(--tooltip-background-color, var(--default-tooltip-background-color));
bottom: calc(-1 * (var(--tooltip-arrow-size, var(--default-tooltip-arrow-size)) * 2));
}
.jazeTooltip--topCenter:before,
.jazeTooltip--topLeft:before,
.jazeTooltip--topRight:before {
border-top-color: var(--tooltip-border-color, var(--default-tooltip-border-color));
bottom: calc((-1 * (var(--tooltip-arrow-size, var(--default-tooltip-arrow-size)) * 2)) - 1px);
}
.jazeTooltip--bottomLeft,
.jazeTooltip--topLeft {
--tooltip-position-right: calc(50% - var(--tooltip-arrow-horizontal-offset, var(--default-tooltip-arrow-horizontal-offset)));
--tooltip-arrow-position-right: calc(var(--tooltip-arrow-horizontal-offset, var(--default-tooltip-arrow-horizontal-offset)) - 1px);
--tooltip-arrow-transform: translateX(50%);
}
.jazeTooltip--bottomRight,
.jazeTooltip--topRight {
--tooltip-position-left: calc(50% - var(--tooltip-arrow-horizontal-offset, var(--default-tooltip-arrow-horizontal-offset)));
--tooltip-arrow-position-left: calc(var(--tooltip-arrow-horizontal-offset, var(--default-tooltip-arrow-horizontal-offset)) - 1px);
--tooltip-arrow-transform: translateX(-50%);
}
.jazeTooltip--bottomCenter,
.jazeTooltip--topCenter {
--tooltip-position-left: 50%;
--tooltip-transform: translateX(-50%);
--tooltip-arrow-position-left: 50%;
--tooltip-arrow-transform: translateX(-50%);
}
.jazeTooltipContainer {
position: relative;
}
.jazeTooltipContainer:not(.jazeTooltipContainer--withoutDisplay) {
display: inline-block;
}
.jazeTooltipContainer--hoverable {
--tooltip-display: none;
}
.jazeTooltipContainer--hoverable:hover {
--tooltip-display: block;
}
.jazeTooltipContainer--withSmallType {
position: relative;
top: 4px;
}
.jaze-mod-dark.jazeAccordion,
.jaze-mod-dark .jazeAccordion,
.jazeAccordion--dark {
--accordion-border-color: #333543;
}
.jaze-mod-reset-color.jazeAccordion,
.jaze-mod-reset-color .jazeAccordion {
--accordion-border-color: initial;
}
.jaze-mod-dark.jazeBlock,
.jaze-mod-dark .jazeBlock,
.jazeBlock--dark {
--block-font-color: #7e8190;
--block-hover-background-color: rgba(0, 111, 255, 0.05);
--block-hover-box-shadow: 0 0 0 1px var(--color-500);
--block-hover-section-with-icons-background-color: #242635;
--block-row-divider-color: #333543;
--block-selected-background-color: rgba(0, 111, 255, 0.2);
--block-selected-border-color: rgba(0, 111, 255, 0.2);
--block-small-font-color: #a4a7b5;
--block-title-font-color: #fff;
}
.jaze-mod-reset-color.jazeBlock,
.jaze-mod-reset-color .jazeBlock {
--block-font-color: initial;
--block-hover-background-color: initial;
--block-hover-box-shadow: initial;
--block-hover-section-with-icons-background-color: initial;
--block-row-divider-color: initial;
--block-selected-background-color: initial;
--block-selected-border-color: initial;
--block-small-font-color: initial;
--block-title-font-color: initial;
}
.jaze-mod-chubby.jazeButton,
.jaze-mod-chubby .jazeButton,
.jazeButton--chubby {
--button-font-size: 13px;
--button-font-weight: bold;
--button-padding-horizontal: 36px;
--button-padding-vertical: 12px;
}
.jaze-mod-comfy.jazeButton,
.jaze-mod-comfy .jazeButton,
.jazeButton--comfy {
--button-font-size: 13px;
--button-font-weight: bold;
--button-padding-horizontal: 24px;
--button-padding-vertical: 9px;
}
.jaze-mod-condensed.jazeButton,
.jaze-mod-condensed .jazeButton,
.jazeButton--condensed {
--button-padding-vertical: 4px;
--button-padding-horizontal: 12px;
}
.jaze-mod-cozy.jazeButton,
.jaze-mod-cozy .jazeButton,
.jazeButton--cozy {
--button-icon-height: 12px;
--button-icon-width: 12px;
}
.jaze-mod-dark.jazeButtonGroup.jazeButtonGroup--playerControls,
.jaze-mod-dark .jazeButtonGroup.jazeButtonGroup--playerControls,
.jazeButtonGroup--dark.jazeButtonGroup--playerControls {
--button-group-player-controls-background-color: #151f30;
--button-group-player-controls-hover-icon-color: #7e8190;
--button-group-player-controls-icon-color: #525461;
}
.jaze-mod-dark.jazeButton,
.jaze-mod-dark .jazeButton,
.jazeButton--dark {
--button-icon-basic-color: #7e8190;
}
.jaze-mod-dark.jazeButton.jazeButton--primary,
.jaze-mod-dark .jazeButton.jazeButton--primary,
.jazeButton--dark.jazeButton--primary {
--button-primary-active-background-color: var(--color-300);
--button-primary-background-color: var(--color-500);
--button-primary-font-color: #fff;
--button-primary-hover-background-color: var(--color-200);
}
.jaze-mod-dark.jazeButton.jazeButton--pagination,
.jaze-mod-dark .jazeButton.jazeButton--pagination,
.jaze-mod-dark.jazeButton.jazeButton--secondary,
.jaze-mod-dark .jazeButton.jazeButton--secondary,
.jazeButton--dark.jazeButton--pagination,
.jazeButton--dark.jazeButton--secondary {
--button-secondary-active-border-color: #525461;
--button-secondary-background-color: #242635;
--button-secondary-border-color: #525461;
--button-secondary-font-color: #7e8190;
--button-secondary-hover-border-color: #7e8190;
}
.jaze-mod-dark.jazeButton.jazeButton--textPrimary,
.jaze-mod-dark .jazeButton.jazeButton--textPrimary,
.jazeButton--dark.jazeButton--textPrimary {
--button-text-primary-font-color: #7e8190;
}
.jaze-mod-dark.jazeButton.jazeButton--textSecondary,
.jaze-mod-dark .jazeButton.jazeButton--textSecondary,
.jazeButton--dark.jazeButton--textSecondary {
--button-text-secondary-font-color: #525461;
}
.jaze-mod-dark.jazeButton.jazeButton--iconNeutral,
.jaze-mod-dark .jazeButton.jazeButton--iconNeutral,
.jazeButton--dark.jazeButton--iconNeutral {
--button-icon-neutral-background-color: #333543;
--button-icon-neutral-hover-background-color: #525461;
}
.jaze-mod-dark.jazeButton.jazeButton--icon,
.jaze-mod-dark .jazeButton.jazeButton--icon,
.jazeButton--dark.jazeButton--icon {
--button-active-icon-color: #a4a7b5;
--button-hover-icon-color: #a4a7b5;
}
.jaze-mod-portal.jazeButton.jazeButton--primary,
.jaze-mod-portal .jazeButton.jazeButton--primary,
.jazeButton--portal.jazeButton--primary {
--button-primary-active-background-color: hsla(0, 0%, 100%, 0.2);
--button-primary-background-color: hsla(0, 0%, 100%, 0.2);
--button-primary-border-color: transparent;
--button-primary-focus-border-color: #fff;
--button-primary-font-color: #fff;
--button-primary-hover-background-color: hsla(0, 0%, 100%, 0.4);
}
.jaze-mod-portal.jazeButton.jazeButton--secondary,
.jaze-mod-portal .jazeButton.jazeButton--secondary,
.jazeButton--portal.jazeButton--secondary {
--button-secondary-active-border-color: hsla(0, 0%, 100%, 0.2);
--button-secondary-background-color: transparent;
--button-secondary-border-color: hsla(0, 0%, 100%, 0.2);
--button-secondary-focus-border-color: #fff;
--button-secondary-font-color: #fff;
--button-secondary-hover-border-color: hsla(0, 0%, 100%, 0.4);
}
.jaze-mod-reset-color.jazeButtonGroup.jazeButtonGroup--playerControls,
.jaze-mod-reset-color .jazeButtonGroup.jazeButtonGroup--playerControls {
--button-group-player-controls-background-color: initial;
--button-group-player-controls-hover-icon-color: initial;
--button-group-player-controls-icon-color: initial;
}
.jaze-mod-reset-size.jazeButton,
.jaze-mod-reset-size .jazeButton {
--button-font-size: initial;
--button-font-weight: initial;
--button-padding-horizontal: initial;
--button-padding-vertical: initial;
--button-icon-height: initial;
--button-icon-width: initial;
}
.jaze-mod-reset-color.jazeButton,
.jaze-mod-reset-color .jazeButton {
--button-icon-basic-color: initial;
}
.jaze-mod-reset-color.jazeButton.jazeButton--primary,
.jaze-mod-reset-color .jazeButton.jazeButton--primary {
--button-primary-active-background-color: initial;
--button-primary-background-color: initial;
--button-primary-font-color: initial;
--button-primary-hover-background-color: initial;
}
.jaze-mod-reset-color.jazeButton.jazeButton--pagination,
.jaze-mod-reset-color .jazeButton.jazeButton--pagination,
.jaze-mod-reset-color.jazeButton.jazeButton--secondary,
.jaze-mod-reset-color .jazeButton.jazeButton--secondary {
--button-secondary-active-border-color: initial;
--button-secondary-background-color: initial;
--button-secondary-border-color: initial;
--button-secondary-font-color: initial;
--button-secondary-hover-border-color: initial;
}
.jaze-mod-reset-color.jazeButton.jazeButton--textPrimary,
.jaze-mod-reset-color .jazeButton.jazeButton--textPrimary {
--button-text-primary-font-color: initial;
}
.jaze-mod-reset-color.jazeButton.jazeButton--textSecondary,
.jaze-mod-reset-color .jazeButton.jazeButton--textSecondary {
--button-text-secondary-font-color: initial;
}
.jaze-mod-reset-color.jazeButton.jazeButton--iconNeutral,
.jaze-mod-reset-color .jazeButton.jazeButton--iconNeutral {
--button-icon-neutral-background-color: initial;
--button-icon-neutral-hover-background-color: initial;
}
.jaze-mod-reset-color.jazeButton.jazeButton--icon,
.jaze-mod-reset-color .jazeButton.jazeButton--icon {
--button-active-icon-color: initial;
--button-hover-icon-color: initial;
}
.jaze-mod-dark.jazeCalendarPanels,
.jaze-mod-dark .jazeCalendarPanels,
.jazeCalendarPanels--dark {
--calendar-panel-group-border-color: #333543;
}
.jaze-mod-dark.jazeCalendar,
.jaze-mod-dark .jazeCalendar,
.jazeCalendar--dark {
--calendar-grid-item-font-color: #525461;
--calendar-grid-weekdays-border-color: #333543;
--calendar-title-font-color: #a4a7b5;
}
.jaze-mod-reset-color.jazeCalendarPanels,
.jaze-mod-reset-color .jazeCalendarPanels {
--calendar-panel-group-border-color: initial;
}
.jaze-mod-reset-color.jazeCalendar,
.jaze-mod-reset-color .jazeCalendar {
--calendar-grid-item-font-color: initial;
--calendar-grid-weekdays-border-color: initial;
--calendar-title-font-color: initial;
}
.jaze-mod-dark.jazeCard,
.jaze-mod-dark .jazeCard,
.jazeCard--dark {
--card-drop-shadow-color: rgba(0, 0, 0, 0.37);
--card-title-color: #a4a7b5;
}
.jaze-mod-reset-color.jazeCard,
.jaze-mod-reset-color .jazeCard {
--card-drop-shadow-color: initial;
--card-title-color: initial;
}
.jaze-mod-dark.jazeChip,
.jaze-mod-dark .jazeChip,
.jazeChip--dark {
--chip-background-color: #525461;
--chip-count-border-color: #fff;
--chip-count-font-color: #fff;
--chip-font-color: #c2c4ce;
--chip-icon-font-color: #fff;
--chip-image-background-color: #fff;
--chip-image-border-color: #fff;
}
.jaze-mod-reset-color.jazeChip,
.jaze-mod-reset-color .jazeChip {
--chip-background-color: initial;
--chip-count-border-color: initial;
--chip-count-font-color: initial;
--chip-font-color: initial;
--chip-icon-font-color: initial;
--chip-image-background-color: initial;
--chip-image-border-color: initial;
}
.jaze-mod-dark.jazeDropdown,
.jaze-mod-dark .jazeDropdown,
.jazeDropdown--dark {
--dropdown-background-color: #242635;
--dropdown-border-color: #333543;
--dropdown-drop-shadow-color: rgba(0, 0, 0, 0.37);
--dropdown-font-color: #a4a7b5;
--dropdown-hover-font-color: #7e8190;
}
.jaze-mod-reset-color.jazeDropdown,
.jaze-mod-reset-color .jazeDropdown {
--dropdown-background-color: initial;
--dropdown-border-color: initial;
--dropdown-drop-shadow-color: initial;
--dropdown-font-color: initial;
--dropdown-hover-font-color: initial;
}
.jaze-mod-dark.jazeFilter,
.jaze-mod-dark .jazeFilter,
.jazeFilter--dark {
--filter-item-font-color: #a4a7b5;
}
.jaze-mod-reset-color.jazeFilter,
.jaze-mod-reset-color .jazeFilter {
--filter-item-font-color: initial;
}
.jaze-mod-chubby.jazeForm,
.jaze-mod-chubby .jazeForm,
.jaze-mod-chubby.jazeFormComponent,
.jaze-mod-chubby .jazeFormComponent,
.jaze-mod-chubby.jazeIconInput,
.jaze-mod-chubby .jazeIconInput,
.jaze-mod-chubby.jazeInputBox,
.jaze-mod-chubby .jazeInputBox,
.jaze-mod-chubby.jazeTextarea,
.jaze-mod-chubby .jazeTextarea,
.jazeForm--chubby,
.jazeFormComponent--chubby,
.jazeIconInput--chubby,
.jazeInputBox--chubby,
.jazeTextarea--chubby {
--form-box-font-size: 20px;
--form-box-font-weight: 300;
--form-box-height: 44px;
--form-box-textarea-padding-top: 10px;
}
.jaze-mod-chubby.jazeForm,
.jaze-mod-chubby .jazeForm,
.jaze-mod-chubby.jazeFormComponent,
.jaze-mod-chubby .jazeFormComponent,
.jaze-mod-chubby.jazeSelect,
.jaze-mod-chubby .jazeSelect,
.jazeForm--chubby,
.jazeFormComponent--chubby,
.jazeSelect--chubby {
--form-select-font-size: 20px;
--form-select-font-weight: 300;
--form-select-height: 44px;
}
.jaze-mod-chubby.jazeForm,
.jaze-mod-chubby .jazeForm,
.jaze-mod-chubby.jazeIconInput,
.jaze-mod-chubby .jazeIconInput,
.jaze-mod-chubby.jazeIconInputContainer,
.jaze-mod-chubby .jazeIconInputContainer,
.jazeForm--chubby,
.jazeIconInput--chubby,
.jazeIconInputContainer--chubby {
--icon-input-icon-size: 20px;
--icon-input-padding-size: 30px;
}
.jaze-mod-chubby.jazeForm,
.jaze-mod-chubby .jazeForm,
.jaze-mod-chubby.jazeFormGroup,
.jaze-mod-chubby .jazeFormGroup,
.jazeForm--chubby,
.jazeFormGroup--chubby {
--form-dropdown-top-padding: 60px;
--form-group-transition-label-font-size: 20px;
--form-group-transition-label-font-weight: 300;
--form-group-transition-label-top: 20px;
}
.jaze-mod-comfy.jazeForm,
.jaze-mod-comfy .jazeForm,
.jaze-mod-comfy.jazeFormComponent,
.jaze-mod-comfy .jazeFormComponent,
.jaze-mod-comfy.jazeIconInput,
.jaze-mod-comfy .jazeIconInput,
.jaze-mod-comfy.jazeInputBox,
.jaze-mod-comfy .jazeInputBox,
.jaze-mod-comfy.jazeTextarea,
.jaze-mod-comfy .jazeTextarea,
.jazeForm--comfy,
.jazeFormComponent--comfy,
.jazeIconInput--comfy,
.jazeInputBox--comfy,
.jazeTextarea--comfy {
--form-box-font-size: 13px;
--form-box-height: 34px;
--form-box-textarea-padding-top: 9px;
}
.jaze-mod-comfy.jazeForm,
.jaze-mod-comfy .jazeForm,
.jaze-mod-comfy.jazeFormComponent,
.jaze-mod-comfy .jazeFormComponent,
.jaze-mod-comfy.jazeSelect,
.jaze-mod-comfy .jazeSelect,
.jazeForm--comfy,
.jazeFormComponent--comfy,
.jazeSelect--comfy {
--form-select-font-size: 13px;
--form-select-height: 34px;
}
.jaze-mod-comfy.jazeForm,
.jaze-mod-comfy .jazeForm,
.jaze-mod-comfy.jazeIconInput,
.jaze-mod-comfy .jazeIconInput,
.jaze-mod-comfy.jazeIconInputContainer,
.jaze-mod-comfy .jazeIconInputContainer,
.jazeForm--comfy,
.jazeIconInput--comfy,
.jazeIconInputContainer--comfy {
--icon-input-icon-size: 16px;
--icon-input-padding-size: 24px;
}
.jaze-mod-comfy.jazeForm,
.jaze-mod-comfy .jazeForm,
.jaze-mod-comfy.jazeFormGroup,
.jaze-mod-comfy .jazeFormGroup,
.jazeForm--comfy,
.jazeFormGroup--comfy {
--form-group-transition-label-font-size: 13px;
--form-group-transition-label-top: 19px;
}
.jaze-mod-cozy.jazeForm,
.jaze-mod-cozy .jazeForm,
.jaze-mod-cozy.jazeFormComponent,
.jaze-mod-cozy .jazeFormComponent,
.jaze-mod-cozy.jazeIconInput,
.jaze-mod-cozy .jazeIconInput,
.jaze-mod-cozy.jazeInputBox,
.jaze-mod-cozy .jazeInputBox,
.jaze-mod-cozy.jazeTextarea,
.jaze-mod-cozy .jazeTextarea,
.jazeForm--cozy,
.jazeFormComponent--cozy,
.jazeIconInput--cozy,
.jazeInputBox--cozy,
.jazeTextarea--cozy {
--form-box-height: 22px;
--form-box-font-size: 11px;
--form-box-textarea-padding-top: 5px;
}
.jaze-mod-cozy.jazeForm,
.jaze-mod-cozy .jazeForm,
.jaze-mod-cozy.jazeFormComponent,
.jaze-mod-cozy .jazeFormComponent,
.jaze-mod-cozy.jazeSelect,
.jaze-mod-cozy .jazeSelect,
.jazeForm--cozy,
.jazeFormComponent--cozy,
.jazeSelect--cozy {
--form-select-height: 22px;
--form-select-font-size: 11px;
}
.jaze-mod-cozy.jazeForm,
.jaze-mod-cozy .jazeForm,
.jaze-mod-cozy.jazeFormComponent,
.jaze-mod-cozy .jazeFormComponent,
.jaze-mod-cozy.jazeRangeSlider,
.jaze-mod-cozy .jazeRangeSlider,
.jazeForm--cozy,
.jazeFormComponent--cozy,
.jazeRangeSlider--cozy {
--range-box-height: 11px;
--range-thumb-size: 11px;
}
.jaze-mod-cozy.jazeForm,
.jaze-mod-cozy .jazeForm,
.jaze-mod-cozy.jazeIconInput,
.jaze-mod-cozy .jazeIconInput,
.jaze-mod-cozy.jazeIconInputContainer,
.jaze-mod-cozy .jazeIconInputContainer,
.jazeForm--cozy,
.jazeIconInput--cozy,
.jazeIconInputContainer--cozy {
--icon-input-icon-size: 12px;
--icon-input-padding-size: 18px;
}
.jaze-mod-cozy.jazeForm,
.jaze-mod-cozy .jazeForm,
.jaze-mod-cozy.jazeFormGroup,
.jaze-mod-cozy .jazeFormGroup,
.jazeForm--cozy,
.jazeFormGroup--cozy {
--form-group-transition-label-font-size: 11px;
}
.jaze-mod-dark.jazeForm,
.jaze-mod-dark .jazeForm,
.jaze-mod-dark.jazeFormComponent,
.jaze-mod-dark .jazeFormComponent,
.jaze-mod-dark.jazeIconInput,
.jaze-mod-dark .jazeIconInput,
.jaze-mod-dark.jazeInputBox,
.jaze-mod-dark .jazeInputBox,
.jaze-mod-dark.jazeTextarea,
.jaze-mod-dark .jazeTextarea,
.jazeForm--dark,
.jazeFormComponent--dark,
.jazeIconInput--dark,
.jazeInputBox--dark,
.jazeTextarea--dark {
--form-box-autofill-font-color: #7e8190;
--form-box-border-color: #c2c4ce;
--form-box-font-color: #c2c4ce;
--form-box-focus-font-color: #fff;
}
.jaze-mod-dark.jazeForm,
.jaze-mod-dark .jazeForm,
.jaze-mod-dark.jazeFormComponent,
.jaze-mod-dark .jazeFormComponent,
.jaze-mod-dark.jazeSelect,
.jaze-mod-dark .jazeSelect,
.jazeForm--dark,
.jazeFormComponent--dark,
.jazeSelect--dark {
--form-select-border-color: #c2c4ce;
--form-select-font-color: #c2c4ce;
--form-select-hover-font-color: #fff;
--form-select-scrollbar-thumb-color: #333543;
}
.jaze-mod-dark.jazeCheckbox,
.jaze-mod-dark .jazeCheckbox,
.jaze-mod-dark.jazeForm,
.jaze-mod-dark .jazeForm,
.jaze-mod-dark.jazeFormComponent,
.jaze-mod-dark .jazeFormComponent,
.jazeCheckbox--dark,
.jazeForm--dark,
.jazeFormComponent--dark {
--form-checkbox-border-color: #525461;
--form-checkbox-hover-border-color: #7e8190;
--form-checkbox-icon-background: url('data:image/svg+xml;utf8,');
--form-checkbox-icon-color: #a4a7b5;
--form-checkbox-indeterminate-icon-background: url('data:image/svg+xml;utf8,');
}
.jaze-mod-dark.jazeForm,
.jaze-mod-dark .jazeForm,
.jaze-mod-dark.jazeFormComponent,
.jaze-mod-dark .jazeFormComponent,
.jaze-mod-dark.jazeRadio,
.jaze-mod-dark .jazeRadio,
.jazeForm--dark,
.jazeFormComponent--dark,
.jazeRadio--dark {
--form-radio-border-color: #333543;
--form-radio-hover-border-color: #7e8190;
--form-radio-icon-background: url('data:image/svg+xml;utf8,');
--form-radio-icon-color: #a4a7b5;
}
.jaze-mod-dark.jazeForm,
.jaze-mod-dark .jazeForm,
.jaze-mod-dark.jazeFormComponent,
.jaze-mod-dark .jazeFormComponent,
.jaze-mod-dark.jazeRangeSlider,
.jaze-mod-dark .jazeRangeSlider,
.jazeForm--dark,
.jazeFormComponent--dark,
.jazeRangeSlider--dark {
--range-slider-thumb-border: 0px;
--range-slider-track-color: #525461;
}
.jaze-mod-dark.jazeForm,
.jaze-mod-dark .jazeForm,
.jaze-mod-dark.jazeRadioUnderlinedGroup,
.jaze-mod-dark .jazeRadioUnderlinedGroup,
.jazeForm--dark,
.jazeRadioUnderlinedGroup--dark {
--radio-underlined-font-color: #7e8190;
--radio-underlined-hover-border-color: #f4f4f5;
--radio-underlined-selected-font-color: #a4a7b5;
}
.jaze-mod-dark.jazeForm,
.jaze-mod-dark .jazeForm,
.jaze-mod-dark.jazeIconInput,
.jaze-mod-dark .jazeIconInput,
.jaze-mod-dark.jazeIconInputContainer,
.jaze-mod-dark .jazeIconInputContainer,
.jazeForm--dark,
.jazeIconInput--dark,
.jazeIconInputContainer--dark {
--icon-input-icon-color: #a4a7b5;
--icon-input-search-icon-background: url('data:image/svg+xml;utf8,');
}
.jaze-mod-dark.jazeForm,
.jaze-mod-dark .jazeForm,
.jaze-mod-dark.jazeFormGroup,
.jaze-mod-dark .jazeFormGroup,
.jazeForm--dark,
.jazeFormGroup--dark {
--form-group-transition-label-font-color: #7e8190;
}
.jaze-mod-dark.jazeForm,
.jaze-mod-dark .jazeForm,
.jaze-mod-dark.jazeFormDropdown,
.jaze-mod-dark .jazeFormDropdown,
.jazeForm--dark,
.jazeFormDropdown--dark {
--form-dropdown-background-color: #242635;
--form-dropdown-border-color: #525461;
--form-dropdown-drop-shadow-color: rgba(0, 0, 0, 0.37);
--form-dropdown-font-color: #a4a7b5;
--form-dropdown-footer-border-color: #525461;
--form-dropdown-scrollbar-thumb-color: #333543;
}
.jaze-mod-portal.jazeForm,
.jaze-mod-portal .jazeForm,
.jaze-mod-portal.jazeFormComponent,
.jaze-mod-portal .jazeFormComponent,
.jaze-mod-portal.jazeIconInput,
.jaze-mod-portal .jazeIconInput,
.jaze-mod-portal.jazeInputBox,
.jaze-mod-portal .jazeInputBox,
.jaze-mod-portal.jazeTextarea,
.jaze-mod-portal .jazeTextarea,
.jazeForm--portal,
.jazeFormComponent--portal,
.jazeIconInput--portal,
.jazeInputBox--portal,
.jazeTextarea--portal {
--form-box-border-color: hsla(0, 0%, 100%, 0.2);
--form-box-focus-border-color: #fff;
--form-box-focus-font-color: #fff;
--form-box-font-color: #fff;
}
.jaze-mod-portal.jazeForm,
.jaze-mod-portal .jazeForm,
.jaze-mod-portal.jazeFormComponent,
.jaze-mod-portal .jazeFormComponent,
.jaze-mod-portal.jazeSelect,
.jaze-mod-portal .jazeSelect,
.jazeForm--portal,
.jazeFormComponent--portal,
.jazeSelect--portal {
--form-select-border-color: hsla(0, 0%, 100%, 0.2);
--form-select-font-color: #fff;
--form-select-hover-font-color: #fff;
}
.jaze-mod-portal.jazeForm,
.jaze-mod-portal .jazeForm,
.jaze-mod-portal.jazeIconInput,
.jaze-mod-portal .jazeIconInput,
.jaze-mod-portal.jazeIconInputContainer,
.jaze-mod-portal .jazeIconInputContainer,
.jazeForm--portal,
.jazeIconInput--portal,
.jazeIconInputContainer--portal {
--icon-input-icon-color: #fff;
}
.jazeInputBox {
padding: 0.375rem 0.75rem;
line-height: 1.5;
color: #495057 !important;
background-color: #fff !important;
background-clip: padding-box;
border: 2px solid #dde2ec !important;
border-radius: 4px !important;
margin: 0.25rem 0rem;
}
.jazeAlert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 6px;
}
.jazeAlert--success {
color: #3c763d;
background-color: #C3FABF;
border-color: #87CA79;
}
.jazeAlert--info {
color: #31708f;
background-color: #d9edf7;
border-color: #99DCE9;
}
.jazeAlert--warning {
color: #8a6d3b;
background-color: #F6E5AC;
border-color: #D7BD67;
}
.jazeAlert--danger {
color: #a94442;
background-color: #FFD7D7;
border-color: #F5B6B6;
}
.jaze-mod-reset-size.jazeForm,
.jaze-mod-reset-size .jazeForm,
.jaze-mod-reset-size.jazeFormComponent,
.jaze-mod-reset-size .jazeFormComponent,
.jaze-mod-reset-size.jazeIconInput,
.jaze-mod-reset-size .jazeIconInput,
.jaze-mod-reset-size.jazeInputBox,
.jaze-mod-reset-size .jazeInputBox,
.jaze-mod-reset-size.jazeTextarea,
.jaze-mod-reset-size .jazeTextarea {
--form-box-font-size: initial;
--form-box-font-weight: initial;
--form-box-height: initial;
--form-box-textarea-padding-top: initial;
}
.jaze-mod-reset-size.jazeForm,
.jaze-mod-reset-size .jazeForm,
.jaze-mod-reset-size.jazeFormComponent,
.jaze-mod-reset-size .jazeFormComponent,
.jaze-mod-reset-size.jazeSelect,
.jaze-mod-reset-size .jazeSelect {
--form-select-font-size: initial;
--form-select-font-weight: initial;
--form-select-height: initial;
}
.jaze-mod-reset-size.jazeForm,
.jaze-mod-reset-size .jazeForm,
.jaze-mod-reset-size.jazeIconInput,
.jaze-mod-reset-size .jazeIconInput,
.jaze-mod-reset-size.jazeIconInputContainer,
.jaze-mod-reset-size .jazeIconInputContainer {
--icon-input-icon-size: initial;
--icon-input-padding-size: initial;
}
.jaze-mod-reset-size.jazeForm,
.jaze-mod-reset-size .jazeForm,
.jaze-mod-reset-size.jazeFormGroup,
.jaze-mod-reset-size .jazeFormGroup {
--form-dropdown-top-padding: initial;
--form-group-transition-label-font-size: initial;
--form-group-transition-label-font-weight: initial;
--form-group-transition-label-top: initial;
}
.jaze-mod-reset-color.jazeForm,
.jaze-mod-reset-color .jazeForm,
.jaze-mod-reset-color.jazeFormComponent,
.jaze-mod-reset-color .jazeFormComponent,
.jaze-mod-reset-color.jazeIconInput,
.jaze-mod-reset-color .jazeIconInput,
.jaze-mod-reset-color.jazeInputBox,
.jaze-mod-reset-color .jazeInputBox,
.jaze-mod-reset-color.jazeTextarea,
.jaze-mod-reset-color .jazeTextarea {
--form-box-autofill-font-color: initial;
--form-box-border-color: initial;
--form-box-font-color: initial;
--form-box-focus-font-color: initial;
}
.jaze-mod-reset-color.jazeForm,
.jaze-mod-reset-color .jazeForm,
.jaze-mod-reset-color.jazeFormComponent,
.jaze-mod-reset-color .jazeFormComponent,
.jaze-mod-reset-color.jazeSelect,
.jaze-mod-reset-color .jazeSelect {
--form-select-border-color: initial;
--form-select-font-color: initial;
--form-select-hover-font-color: initial;
--form-select-scrollbar-thumb-color: initial;
}
.jaze-mod-reset-color.jazeCheckbox,
.jaze-mod-reset-color .jazeCheckbox,
.jaze-mod-reset-color.jazeForm,
.jaze-mod-reset-color .jazeForm,
.jaze-mod-reset-color.jazeFormComponent,
.jaze-mod-reset-color .jazeFormComponent {
--form-checkbox-border-color: initial;
--form-checkbox-hover-border-color: initial;
--form-checkbox-icon-background: initial;
--form-checkbox-icon-color: initial;
--form-checkbox-indeterminate-icon-background: initial;
}
.jaze-mod-reset-color.jazeForm,
.jaze-mod-reset-color .jazeForm,
.jaze-mod-reset-color.jazeFormComponent,
.jaze-mod-reset-color .jazeFormComponent,
.jaze-mod-reset-color.jazeRadio,
.jaze-mod-reset-color .jazeRadio {
--form-radio-border-color: initial;
--form-radio-hover-border-color: initial;
--form-radio-icon-background: initial;
--form-radio-icon-color: initial;
}
.jaze-mod-reset-color.jazeForm,
.jaze-mod-reset-color .jazeForm,
.jaze-mod-reset-color.jazeFormComponent,
.jaze-mod-reset-color .jazeFormComponent,
.jaze-mod-reset-color.jazeRangeSlider,
.jaze-mod-reset-color .jazeRangeSlider {
--range-slider-thumb-border: initial;
--range-slider-track-color: initial;
}
.jaze-mod-reset-color.jazeForm,
.jaze-mod-reset-color .jazeForm,
.jaze-mod-reset-color.jazeRadioUnderlinedGroup,
.jaze-mod-reset-color .jazeRadioUnderlinedGroup {
--radio-underlined-font-color: initial;
--radio-underlined-hover-border-color: initial;
--radio-underlined-selected-font-color: initial;
}
.jaze-mod-reset-color.jazeForm,
.jaze-mod-reset-color .jazeForm,
.jaze-mod-reset-color.jazeIconInput,
.jaze-mod-reset-color .jazeIconInput,
.jaze-mod-reset-color.jazeIconInputContainer,
.jaze-mod-reset-color .jazeIconInputContainer {
--icon-input-icon-color: initial;
--icon-input-search-icon-background: initial;
}
.jaze-mod-reset-color.jazeForm,
.jaze-mod-reset-color .jazeForm,
.jaze-mod-reset-color.jazeFormGroup,
.jaze-mod-reset-color .jazeFormGroup {
--form-group-transition-label-font-color: initial;
}
.jaze-mod-reset-color.jazeForm,
.jaze-mod-reset-color .jazeForm,
.jaze-mod-reset-color.jazeFormDropdown,
.jaze-mod-reset-color .jazeFormDropdown {
--form-dropdown-background-color: initial;
--form-dropdown-border-color: initial;
--form-dropdown-drop-shadow-color: initial;
--form-dropdown-font-color: initial;
--form-dropdown-footer-border-color: initial;
--form-dropdown-scrollbar-thumb-color: initial;
}
.jaze-mod-dark.jazeGrid,
.jaze-mod-dark .jazeGrid,
.jazeGrid--dark {
--grid-description-list-font-color: #525461;
}
.jaze-mod-reset-color.jazeGrid,
.jaze-mod-reset-color .jazeGrid {
--grid-description-list-font-color: initial;
}
.jaze-mod-dark.jazeHeaderGroup,
.jaze-mod-dark .jazeHeaderGroup,
.jazeHeaderGroup--dark {
--header-group-border-color: #333543;
}
.jaze-mod-dark.jazeHeader,
.jaze-mod-dark .jazeHeader,
.jazeHeader--dark {
--header-action-color: #7e8190;
--header-title-primary-font-color: #a4a7b5;
--header-title-secondary-font-color: #a4a7b5;
--header-title-tertiary-font-color: #a4a7b5;
}
.jaze-mod-portal.jazeHeaderGroup,
.jaze-mod-portal .jazeHeaderGroup,
.jazeHeaderGroup--portal {
--header-group-border-color: #333543;
}
.jaze-mod-portal.jazeHeader .jazeHeader__actions,
.jaze-mod-portal .jazeHeader .jazeHeader__actions,
.jazeHeader--portal .jazeHeader__actions {
--header-action-color: #7e8190;
}
.jaze-mod-reset-color.jazeHeaderGroup,
.jaze-mod-reset-color .jazeHeaderGroup {
--header-group-border-color: initial;
}
.jaze-mod-reset-color.jazeHeader,
.jaze-mod-reset-color .jazeHeader {
--header-action-color: initial;
--header-title-primary-font-color: initial;
--header-title-secondary-font-color: initial;
--header-title-tertiary-font-color: initial;
}
.jaze-mod-dark.jazeIconContainer,
.jaze-mod-dark .jazeIconContainer,
.jazeIconContainer--dark {
--icon-container-border-color: #525461;
--icon-expanded-border-color: #525461;
--icon-expanded-icon-color: #a4a7b5;
}
.jaze-mod-dark.jazeIconGroup,
.jaze-mod-dark .jazeIconGroup,
.jazeIconGroup--dark {
--icon-group-color: #7e8190;
}
.jaze-mod-dark.jazeIcon.jazeIcon--actionable,
.jaze-mod-dark .jazeIcon.jazeIcon--actionable,
.jazeIcon--dark.jazeIcon--actionable {
--icon-actionable-active-color: #a4a7b5;
--icon-actionable-color: #7e8190;
--icon-actionable-hover-color: #a4a7b5;
}
.jaze-mod-reset-color.jazeIconContainer,
.jaze-mod-reset-color .jazeIconContainer {
--icon-container-border-color: initial;
--icon-expanded-border-color: initial;
--icon-expanded-icon-color: initial;
}
.jaze-mod-reset-color.jazeIconGroup,
.jaze-mod-reset-color .jazeIconGroup {
--icon-group-color: initial;
}
.jaze-mod-reset-color.jazeIcon.jazeIcon--actionable,
.jaze-mod-reset-color .jazeIcon.jazeIcon--actionable {
--icon-actionable-active-color: initial;
--icon-actionable-color: initial;
--icon-actionable-hover-color: initial;
}
.jaze-mod-dark.jazeIconText,
.jaze-mod-dark .jazeIconText,
.jazeIconText--dark {
--icon-text-basic-icon-color: #7e8190;
--icon-text-basic-text-color: #7e8190;
--icon-text-color: #7e8190;
}
.jaze-mod-dark.jazeIconText.jazeIconText--header,
.jaze-mod-dark .jazeIconText.jazeIconText--header,
.jazeIconText--dark.jazeIconText--header {
--icon-text-header-icon-color: #7e8190;
--icon-text-header-text-color: #a4a7b5;
}
.jaze-mod-dark.jazeIconText.jazeIconText--actionable,
.jaze-mod-dark .jazeIconText.jazeIconText--actionable,
.jazeIconText--dark.jazeIconText--actionable {
--icon-text-actionable-icon-color: #a4a7b5;
--icon-text-actionable-text-color: #a4a7b5;
}
.jaze-mod-reset-color.jazeIconText,
.jaze-mod-reset-color .jazeIconText {
--icon-text-basic-icon-color: initial;
--icon-text-basic-text-color: initial;
--icon-text-color: initial;
}
.jaze-mod-reset-color.jazeIconText.jazeIconText--header,
.jaze-mod-reset-color .jazeIconText.jazeIconText--header {
--icon-text-header-icon-color: initial;
--icon-text-header-text-color: initial;
}
.jaze-mod-reset-color.jazeIconText.jazeIconText--actionable,
.jaze-mod-reset-color .jazeIconText.jazeIconText--actionable {
--icon-text-actionable-icon-color: initial;
--icon-text-actionable-text-color: initial;
}
.jaze-mod-dark.jazeLabelGroup,
.jaze-mod-dark .jazeLabelGroup,
.jazeLabelGroup--dark {
--label-group-navigation-background-color: #1c1e2d;
}
.jaze-mod-dark.jazeLabel,
.jaze-mod-dark .jazeLabel,
.jazeLabel--dark {
--label-font-color: #7e8190;
}
.jaze-mod-dark.jazeLabel.jazeLabel--primary,
.jaze-mod-dark .jazeLabel.jazeLabel--primary,
.jazeLabel--dark.jazeLabel--primary {
--label-primary-font-color: #fff;
}
.jaze-mod-dark.jazeLabel.jazeLabel--secondary,
.jaze-mod-dark .jazeLabel.jazeLabel--secondary,
.jazeLabel--dark.jazeLabel--secondary {
--label-secondary-font-color: #7e8190;
}
.jaze-mod-dark.jazeLabel.jazeLabel--checkbox,
.jaze-mod-dark .jazeLabel.jazeLabel--checkbox,
.jazeLabel--dark.jazeLabel--checkbox {
--label-checkbox-font-color: #a4a7b5;
}
.jaze-mod-dark.jazeLabel.jazeLabel--radio,
.jaze-mod-dark .jazeLabel.jazeLabel--radio,
.jazeLabel--dark.jazeLabel--radio {
--label-radio-font-color: #a4a7b5;
}
.jaze-mod-portal.jazeLabel,
.jaze-mod-portal .jazeLabel,
.jazeLabel--portal {
--label-font-color: hsla(0, 0%, 100%, 0.3);
}
.jaze-mod-portal.jazeLabel.jazeLabel--primary,
.jaze-mod-portal .jazeLabel.jazeLabel--primary,
.jazeLabel--portal.jazeLabel--primary {
--label-primary-font-color: #fff;
}
.jaze-mod-portal.jazeLabel.jazeLabel--secondary,
.jaze-mod-portal .jazeLabel.jazeLabel--secondary,
.jazeLabel--portal.jazeLabel--secondary {
--label-secondary-font-color: hsla(0, 0%, 100%, 0.3);
}
.jaze-mod-portal.jazeLabel.jazeLabel--checkbox,
.jaze-mod-portal .jazeLabel.jazeLabel--checkbox,
.jazeLabel--portal.jazeLabel--checkbox {
--label-checkbox-font-color: hsla(0, 0%, 100%, 0.3);
}
.jaze-mod-portal.jazeLabel.jazeLabel--radio,
.jaze-mod-portal .jazeLabel.jazeLabel--radio,
.jazeLabel--portal.jazeLabel--radio {
--label-radio-font-color: hsla(0, 0%, 100%, 0.3);
}
.jaze-mod-reset-color.jazeLabelGroup,
.jaze-mod-reset-color .jazeLabelGroup {
--label-group-navigation-background-color: initial;
}
.jaze-mod-reset-color.jazeLabel.jazeLabel--primary,
.jaze-mod-reset-color .jazeLabel.jazeLabel--primary {
--label-primary-font-color: initial;
}
.jaze-mod-reset-color.jazeLabel.jazeLabel--secondary,
.jaze-mod-reset-color .jazeLabel.jazeLabel--secondary {
--label-secondary-font-color: initial;
}
.jaze-mod-reset-color.jazeLabel.jazeLabel--checkbox,
.jaze-mod-reset-color .jazeLabel.jazeLabel--checkbox {
--label-checkbox-font-color: initial;
}
.jaze-mod-reset-color.jazeLabel.jazeLabel--radio,
.jaze-mod-reset-color .jazeLabel.jazeLabel--radio {
--label-radio-font-color: initial;
}
.jaze-mod-dark.jazeModal,
.jaze-mod-dark .jazeModal,
.jazeModal--dark {
--modal-background-color: #242635;
--modal-drop-shadow-color: rgba(0, 0, 0, 0.37);
--modal-font-color: #7e8190;
--modal-footer-font-color: #7e8190;
--modal-header-font-color: #7e8190;
--modal-scrollbar-thumb-color: #333543;
}
.jaze-mod-reset-color.jazeModal,
.jaze-mod-reset-color .jazeModal {
--modal-background-color: initial;
--modal-drop-shadow-color: initial;
--modal-font-color: initial;
--modal-footer-font-color: initial;
--modal-header-font-color: initial;
--modal-scrollbar-thumb-color: initial;
}
.jaze-mod-dark.jazeNavigation,
.jaze-mod-dark .jazeNavigation,
.jazeNavigation--dark {
--navigation-background-color: #242635;
--navigation-hover-icon-color: #7e8190;
--navigation-icon-color: #a4a7b5;
--navigation-overflow-icon-background: url('data:image/svg+xml;utf8,');
--navigation-selected-icon-color: #fff;
--navigation-spacer-color: #525461;
}
.jaze-mod-reset-color.jazeNavigation,
.jaze-mod-reset-color .jazeNavigation {
--navigation-background-color: initial;
--navigation-hover-icon-color: initial;
--navigation-icon-color: initial;
--navigation-overflow-icon-background: initial;
--navigation-selected-icon-color: initial;
--navigation-spacer-color: initial;
}
.jaze-mod-dark.jazeNoContent,
.jaze-mod-dark .jazeNoContent,
.jazeNoContent--dark {
--no-content-details-font-color: #525461;
--no-content-icon-background-color: #242635;
--no-content-icon-color: #7e8190;
--no-content-title-font-color: #fff;
}
.jaze-mod-reset-color.jazeNoContent,
.jaze-mod-reset-color .jazeNoContent {
--no-content-details-font-color: initial;
--no-content-icon-background-color: initial;
--no-content-icon-color: initial;
--no-content-title-font-color: initial;
}
.jaze-mod-dark.jazeHeaderPanel,
.jaze-mod-dark .jazeHeaderPanel,
.jazeHeaderPanel--dark {
--header-panel-background-color: #1c1e2d;
--header-panel-border-color: #333543;
--header-panel-font-color: #a4a7b5;
}
.jaze-mod-dark.jazeHeaderPanel.jazeHeaderPanel--global,
.jaze-mod-dark .jazeHeaderPanel.jazeHeaderPanel--global,
.jazeHeaderPanel--dark.jazeHeaderPanel--global {
--header-panel-global-background-color: #242635;
--header-panel-global-font-color: #fff;
}
.jaze-mod-dark.jazeHeaderPanel.jazeHeaderPanel--tertiary,
.jaze-mod-dark .jazeHeaderPanel.jazeHeaderPanel--tertiary,
.jazeHeaderPanel--dark.jazeHeaderPanel--tertiary {
--header-panel-tertiary-background-color: #242635;
}
.jaze-mod-dark.jazeFooterPanel,
.jaze-mod-dark .jazeFooterPanel,
.jazeFooterPanel--dark {
--footer-panel-font-color: #a4a7b5;
--footer-panel-background-color: #1c1e2d;
--footer-panel-border-color: #333543;
}
.jaze-mod-dark.jazeMainPanel,
.jaze-mod-dark .jazeMainPanel,
.jazeMainPanel--dark {
--main-panel-background-color: #1c1e2d;
--main-panel-font-color: #a4a7b5;
}
.jaze-mod-dark.jazeSidePanel,
.jaze-mod-dark .jazeSidePanel,
.jazeSidePanel--dark {
--side-panel-drop-shadow-color: rgba(0, 0, 0, 0.25);
--side-panel-background-color: #1c1e2d;
--side-panel-border-color: #333543;
--side-panel-font-color: #a4a7b5;
}
.jaze-mod-dark.jazeSidePanel.jazeSidePanel--subNavigation,
.jaze-mod-dark .jazeSidePanel.jazeSidePanel--subNavigation,
.jazeSidePanel--dark.jazeSidePanel--subNavigation {
--side-panel-sub-navigation-background-color: #151725;
}
.jaze-mod-dark.jazeSidePanelTabs,
.jaze-mod-dark .jazeSidePanelTabs,
.jazeSidePanelTabs--dark {
--side-panel-tabs-background-color: #1c1e2d;
--side-panel-tabs-border-color: #333543;
--side-panel-tabs-drop-shadow-color: rgba(0, 0, 0, 0.37);
}
.jaze-mod-dark.jazePanelContent,
.jaze-mod-dark .jazePanelContent,
.jazePanelContent--dark {
--panel-content-scrollbar-thumb-color: #333543;
}
.jaze-mod-portal.jazeHeaderPanel.jazeHeaderPanel--global,
.jaze-mod-portal .jazeHeaderPanel.jazeHeaderPanel--global,
.jazeHeaderPanel--portal.jazeHeaderPanel--global {
--header-panel-global-background-color: transparent;
--header-panel-global-font-color: #fff;
}
.jaze-mod-portal.jazeMainPanel,
.jaze-mod-portal .jazeMainPanel,
.jazeMainPanel--portal {
--main-panel-background-color: transparent;
}
.jaze-mod-reset-color.jazeHeaderPanel,
.jaze-mod-reset-color .jazeHeaderPanel {
--header-panel-background-color: initial;
--header-panel-border-color: initial;
--header-panel-font-color: initial;
}
.jaze-mod-reset-color.jazeHeaderPanel.jazeHeaderPanel--global,
.jaze-mod-reset-color .jazeHeaderPanel.jazeHeaderPanel--global {
--header-panel-global-background-color: initial;
--header-panel-global-font-color: initial;
}
.jaze-mod-reset-color.jazeHeaderPanel.jazeHeaderPanel--tertiary,
.jaze-mod-reset-color .jazeHeaderPanel.jazeHeaderPanel--tertiary {
--header-panel-tertiary-background-color: initial;
}
.jaze-mod-reset-color.jazeFooterPanel,
.jaze-mod-reset-color .jazeFooterPanel {
--footer-panel-background-color: initial;
--footer-panel-border-color: initial;
--footer-panel-font-color: initial;
}
.jaze-mod-reset-color.jazeMainPanel,
.jaze-mod-reset-color .jazeMainPanel {
--main-panel-background-color: initial;
--main-panel-font-color: initial;
}
.jaze-mod-reset-color.jazeSidePanel,
.jaze-mod-reset-color .jazeSidePanel {
--side-panel-background-color: initial;
--side-panel-border-color: initial;
--side-panel-drop-shadow-color: initial;
--side-panel-font-color: initial;
}
.jaze-mod-reset-color.jazeSidePanel.jazeSidePanel--subNavigation,
.jaze-mod-reset-color .jazeSidePanel.jazeSidePanel--subNavigation {
--side-panel-sub-navigation-background-color: initial;
}
.jaze-mod-reset-color.jazeSidePanelTabs,
.jaze-mod-reset-color .jazeSidePanelTabs {
--side-panel-tabs-background-color: initial;
--side-panel-tabs-border-color: initial;
--side-panel-tabs-drop-shadow-color: initial;
}
.jaze-mod-reset-color.jazePanelContent,
.jaze-mod-reset-color .jazePanelContent {
--panel-content-scrollbar-thumb-color: initial;
}
.jaze-mod-dark.jazePopover,
.jaze-mod-dark .jazePopover,
.jazePopover--dark {
--popover-background-color: #242635;
--popover-border-color: #525461;
--popover-drop-shadow-color: rgba(0, 0, 0, 0.37);
--popover-font-color: #a4a7b5;
--popover-footer-background-color: #525461;
--popover-footer-border-color: #525461;
--popover-footer-font-color: #7e8190;
--popover-header-border-color: #525461;
--popover-header-font-color: #a4a7b5;
--popover-scrollbar-thumb-color: #333543;
}
.jaze-mod-reset-color.jazePopover,
.jaze-mod-reset-color .jazePopover {
--popover-background-color: initial;
--popover-border-color: initial;
--popover-drop-shadow-color: initial;
--popover-font-color: initial;
--popover-footer-background-color: initial;
--popover-footer-border-color: initial;
--popover-footer-font-color: initial;
--popover-header-border-color: initial;
--popover-header-font-color: initial;
--popover-scrollbar-thumb-color: initial;
}
.jaze-mod-dark.jazePort,
.jaze-mod-dark .jazePort,
.jazePort--dark {
--port-is-selected-outline-color: #7e8190;
--port-10000-border-color: #fff;
}
.jaze-mod-reset-color.jazePort,
.jaze-mod-reset-color .jazePort {
--port-is-selected-outline-color: initial;
--port-10000-border-color: initial;
}
.jaze-mod-dark.jazeProperties,
.jaze-mod-dark .jazeProperties,
.jazeProperties--dark {
--properties-overview-background-color: #242635;
--properties-overview-border-color: #333543;
}
.jaze-mod-dark.jazePropertiesNavigation,
.jaze-mod-dark .jazePropertiesNavigation,
.jazePropertiesNavigation--dark {
--properties-navigation-grid-border-color: #333543;
--properties-navigation-item-hover-shadow-color: rgba(0, 0, 0, 0.37);
}
.jaze-mod-reset-color.jazeProperties,
.jaze-mod-reset-color .jazeProperties {
--properties-overview-background-color: initial;
--properties-overview-border-color: initial;
}
.jaze-mod-reset-color.jazePropertiesNavigation,
.jaze-mod-reset-color .jazePropertiesNavigation {
--properties-navigation-grid-border-color: initial;
--properties-navigation-item-hover-shadow-color: initial;
}
.jaze-mod-dark.jazeScrollable,
.jaze-mod-dark .jazeScrollable,
.jazeScrollable--dark {
--scrollable-scrollbar-thumb-color: #333543;
}
.jaze-mod-reset-color.jazeScrollable,
.jaze-mod-reset-color .jazeScrollable {
--scrollable-scrollbar-thumb-color: initial;
}
.jaze-mod-dark.jazeStatusBar,
.jaze-mod-dark .jazeStatusBar,
.jazeStatusBar--dark {
--status-bar-background-color: #333543;
}
.jaze-mod-reset-color.jazeStatusBar,
.jaze-mod-reset-color .jazeStatusBar {
--status-bar-background-color: initial;
}
.jaze-mod-dark.jazeStatusKeyGroup,
.jaze-mod-dark .jazeStatusKeyGroup,
.jazeStatusKeyGroup--dark {
--status-key-group-border-color: #333543;
}
.jaze-mod-dark.jazeStatusKey,
.jaze-mod-dark .jazeStatusKey,
.jazeStatusKey--dark {
--status-key-font-color: #7e8190;
}
.jaze-mod-reset-color.jazeStatusKeyGroup,
.jaze-mod-reset-color .jazeStatusKeyGroup {
--status-key-group-border-color: initial;
}
.jaze-mod-reset-color.jazeStatusKey,
.jaze-mod-reset-color .jazeStatusKey {
--status-key-font-color: initial;
}
.jaze-mod-comfy.jazeTable,
.jaze-mod-comfy .jazeTable,
.jazeTable--comfy {
--table-body-cell-horizontal-rhythm-multiplier: 3;
--table-body-cell-vertical-rhythm-multiplier: 4;
--table-header-cell-horizontal-rhythm-multiplier: 3;
}
.jaze-mod-cozy.jazeTable,
.jaze-mod-cozy .jazeTable,
.jazeTable--cozy {
--table-body-cell-vertical-rhythm-multiplier: 1;
--table-body-font-size: 10px;
--table-body-line-height: normal;
}
.jaze-mod-dark.jazeTable,
.jaze-mod-dark .jazeTable,
.jazeTable--dark {
--table-action-icon-color: #7e8190;
--table-body-cell-border-color: #333543;
--table-body-cell-expandable-tree-color: #525461;
--table-body-cell-font-color: #7e8190;
--table-font-color: #a4a7b5;
--table-header-font-color: #fff;
--table-row-highlight-border-color: #333543;
--table-row-hover-background-color: #151725;
--table-row-selected-background-color: #242635;
--table-secondary-header-font-color: #7e8190;
--table-sort-icon-color: #7e8190;
}
.jaze-mod-reset-size.jazeTable,
.jaze-mod-reset-size .jazeTable {
--table-body-cell-vertical-rhythm-multiplier: initial;
--table-body-cell-horizontal-rhythm-multiplier: initial;
--table-header-cell-horizontal-rhythm-multiplier: initial;
}
.jaze-mod-reset-color.jazeTable,
.jaze-mod-reset-color .jazeTable {
--table-action-icon-color: initial;
--table-body-cell-border-color: initial;
--table-body-cell-expandable-tree-color: initial;
--table-body-cell-font-color: initial;
--table-font-color: initial;
--table-header-font-color: initial;
--table-row-highlight-border-color: initial;
--table-row-hover-background-color: initial;
--table-row-selected-background-color: initial;
--table-secondary-header-font-color: initial;
--table-sort-icon-color: initial;
}
.jaze-mod-cozy.jazeTabs,
.jaze-mod-cozy .jazeTabs,
.jazeTabs--cozy {
--tab-item-horizontal-rhythm-padding-multiplier: 4;
--tab-item-vertical-padding: 4px;
}
.jaze-mod-dark.jazeTabsContainer,
.jaze-mod-dark .jazeTabsContainer,
.jazeTabsContainer--dark {
--tabs-container-border-color: #333543;
}
.jaze-mod-dark.jazeTabs,
.jaze-mod-dark .jazeTabs,
.jazeTabs--dark {
--tab-item-font-color: #7e8190;
--tab-item-hover-border-color: #f4f4f5;
--tab-item-selected-font-color: #a4a7b5;
}
.jaze-mod-portal.jazeTabs,
.jaze-mod-portal .jazeTabs,
.jazeTabs--portal {
--tab-item-font-color: hsla(0, 0%, 100%, 0.5);
--tab-item-hover-border-color: #fff;
--tab-item-selected-font-color: #fff;
}
.jaze-mod-reset-color.jazeTabsContainer,
.jaze-mod-reset-color .jazeTabsContainer {
--tabs-container-border-color: initial;
}
.jaze-mod-reset-size.jazeTabs,
.jaze-mod-reset-size .jazeTabs {
--tab-item-horizontal-rhythm-padding-multiplier: initial;
--tab-item-vertical-padding: initial;
}
.jaze-mod-reset-color.jazeTabs,
.jaze-mod-reset-color .jazeTabs {
--tab-item-font-color: initial;
--tab-item-hover-border-color: initial;
--tab-item-selected-font-color: initial;
}
.jaze-mod-dark.jazeToast,
.jaze-mod-dark .jazeToast,
.jazeToast--dark {
--toast-background-color: #242635;
--toast-border-color: #333543;
--toast-close-font-color: #7e8190;
--toast-details-font-color: #a4a7b5;
--toast-drop-shadow-color: rgba(0, 0, 0, 0.37);
--toast-item-font-color: #7e8190;
--toast-title-font-color: #fff;
}
.jaze-mod-reset-color.jazeToast,
.jaze-mod-reset-color .jazeToast {
--toast-background-color: initial;
--toast-border-color: initial;
--toast-close-font-color: initial;
--toast-details-font-color: initial;
--toast-drop-shadow-color: initial;
--toast-item-font-color: initial;
--toast-title-font-color: initial;
}
.jaze-mod-comfy.jazeToggle,
.jaze-mod-comfy .jazeToggle,
.jazeToggle--comfy {
--toggle-height: 30px;
--toggle-width: 50px;
}
.jaze-mod-dark.jazeToggle,
.jaze-mod-dark .jazeToggle,
.jazeToggle--dark {
--toggle-background-off-color: #333543;
--toggle-background-on-color: var(--color-500);
--toggle-button-off-color: #7e8190;
--toggle-button-on-color: #fff;
}
.jaze-mod-portal.jazeToggle,
.jaze-mod-portal .jazeToggle,
.jazeToggle--portal {
--toggle-background-off-color: hsla(0, 0%, 100%, 0.2);
--toggle-background-on-color: var(--color-500);
--toggle-button-off-color: hsla(0, 0%, 100%, 0.2);
--toggle-button-on-color: #fff;
}
.jaze-mod-reset-size.jazeToggle,
.jaze-mod-reset-size .jazeToggle {
--toggle-height: initial;
--toggle-width: initial;
}
.jaze-mod-reset-color.jazeToggle,
.jaze-mod-reset-color .jazeToggle {
--toggle-background-off-color: initial;
--toggle-background-on-color: initial;
--toggle-button-off-color: initial;
--toggle-button-on-color: initial;
}
.jaze-mod-dark.jazeTooltip,
.jaze-mod-dark .jazeTooltip,
.jazeTooltip--dark {
--tooltip-background-color: #151725;
--tooltip-border-color: #525461;
--tooltip-drop-shadow-color: rgba(0, 0, 0, 0.37);
--tooltip-font-color: #a4a7b5;
}
.jaze-mod-reset-color.jazeTooltip,
.jaze-mod-reset-color .jazeTooltip {
--tooltip-background-color: initial;
--tooltip-border-color: initial;
--tooltip-drop-shadow-color: initial;
--tooltip-font-color: initial;
}
.mini-stats {
border-left: 1px solid #DDDDDD;
list-style: none;
margin: 0;
padding: 0;
}
.mini-stats li {
border-left: 1px solid #FFFFFF;
border-right: 1px solid #DDDDDD;
padding-bottom: 6px;
text-align: center;
}
.mini-stats .sparkline_bar_good, .mini-stats .sparkline_bar_neutral, .mini-stats .sparkline_bar_bad {
font-size: 12px;
font-weight: bold;
text-align: center;
}
.mini-stats li:last-child {
border-right: 0 none;
}
.mini-stats .values {
font-size: 12px;
padding: 10px 0;
}
.mini-stats .values strong {
display: block;
margin-bottom: 2px;
}
.mini-stats .sparkline_bar_good, .mini-stats .sparkline_bar_neutral, .mini-stats .sparkline_bar_bad {
font-size: 12px;
font-weight: bold;
text-align: center;
}
.mini-stats .sparkline_bar_good {
color: #459D30;
}
.mini-stats .sparkline_bar_neutral {
color: #757575;
}
.mini-stats .sparkline_bar_bad {
color: #BA1E20;
}
.easy-pie-chart {
position: relative;
text-align: center;
}
.easy-pie-chart .number {
position: relative;
display: inline-block;
width: 70px;
height: 70px;
text-align: center;
}
.easy-pie-chart canvas {
position: absolute;
top: 0;
left: 0;
}
.percent {
display: inline-block;
line-height: 70px;
z-index: 2;
}
.percent:after {
content: '%';
margin-left: 0.1em;
font-size: .8em;
}
.status-pill {
width: 8px;
height: 8px;
border-radius: 30px;
background-color: #eee;
display: inline-block;
vertical-align: middle;
}
.status-pill.yellow {
background-color: #f8bc34;
}
.status-pill.red {
background-color: #c21a1a;
}
.status-pill.green {
background-color: #71c21a;
}
.status-pill.smaller {
width: 8px;
height: 8px;
}
.status-pill + span {
margin-left: 10px;
display: inline-block;
vertical-align: middle;
}
.appDescriptionList dt{
font-weight:bold;
font-size:10px;
color:#969ba3
}
.appDescriptionList dd{
font-size:11px
}
.appDescriptionList--stacked{
margin-bottom:12px
}
.appDescriptionList--stacked dt,.appDescriptionList--stacked dd{
display:block
}.appDescriptionList--stacked dt{
margin-bottom:6px
}
.appDescriptionList--inline{
display:table;
width:100%
}
.appDescriptionList__header{
margin-bottom:5px;
font-size:11px
}
.appDescriptionList__group{
display:table-row-group
}
.appDescriptionListRow{
display:table-row;
width:100%;
line-height:18px
}
.appDescriptionListRow dt,.appDescriptionListRow dd{
display:table-cell;
width:50%
}.appDescriptionListRow dd{
padding-left:10px
}
.appDescriptionListRow--cozy{
line-height:13px
}.appDescriptionList--divider{
padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc
}
.appDescriptionList--divider:last-child{
padding-bottom:0;
margin-bottom:0;
border-bottom:none
}
.appDescriptionList--longDefinition .appDescriptionListRow dt{
width:35%
}
.appDescriptionList--longDefinition .appDescriptionListRow dd{
width:65%
}
.moduleHeaderLegend__statusBall--success {
background-color: var(--modular-module-color-success, var(--ubnt-color-success));
}
.moduleHeaderLegend__statusBall--danger {
background-color: var(--modular-module-color-danger, var(--jaze-color-danger));
}
.appStatusBall--smash {
width: 6px;
height: 6px;
}
.appStatusBall {
vertical-align: middle;
width: 14px;
height: 14px;
background-color: rgba(0,0,0,0.13);
}
.statusBall {
width: .875em;
height: .875em;
font-size: inherit;
display: inline-block;
border-radius: 100%;
vertical-align: bottom;
}