body.default {
--font-family: "Open Sans";
--font-line-height: 1.36;
--font-size: 14px;
--font-size-giant: 2em;
--font-size-large: 1.538em;
--font-size-medium: 1.23em;
--font-size-small: 0.923em;
--font-size-tiny: 0.85em;
--font-color: #212427;
--font-color-opposite: #ffffff;
--color-primary: #0267C3;
--color-primary-light: #2e9afd;
--color-primary-dark: #01325e;
--color-primary-soft: #acd7fe;
--color-primary-softer: #dfefff;
--color-secondary: #C35E01;
--color-secondary-light: #fe912c;
--color-secondary-dark: #5e2d00;
--color-secondary-soft: #ffd3ab;
--color-neutral: #929598;
--color-neutral-light: #acafb1;
--color-neutral-lighter: #c6c8ca;
--color-neutral-lightest: #e6e7e7;
--color-neutral-dark: #787c7f;
--color-neutral-darker: #5f6265;
--color-neutral-darkest: #46494b;
--color-danger: #db1212;
--color-danger-light: #f26161;
--color-danger-dark: #7d0a0a;
--color-danger-soft: #fcd7d7;
--color-warning: #E4C903;
--color-warning-light: #fde850;
--color-warning-dark: #7f7002;
--color-warning-soft: #fef9ce;
--color-success: #008A1C;
--color-success-light: #00bd26;
--color-success-dark: #002407;
--color-success-soft: #71ff8d;
--border-color: #929598;
}
body.client {
--font-family: Calibri;
--font-size: 20px;
--font-color: green;
--font-color-opposite: #ff7fff;
--color-primary: #0267C3;
--color-primary-light: #2e9afd;
--color-primary-dark: #01325e;
--color-primary-soft: #acd7fe;
--color-secondary: #C35E01;
--color-secondary-light: #fe912c;
--color-secondary-dark: #5e2d00;
--color-secondary-soft: #ffd3ab;
--color-neutral: #929598;
--color-neutral-light: #acafb1;
--color-neutral-lighter: #c6c8ca;
--color-neutral-lightest: #e6e7e7;
--color-neutral-dark: #787c7f;
--color-neutral-darker: #5f6265;
--color-neutral-darkest: #46494b;
--color-danger: #db1212;
--color-danger-light: #f26161;
--color-danger-dark: #7d0a0a;
--color-danger-soft: #fcd7d7;
--color-warning: #E4C903;
--color-warning-light: #fde850;
--color-warning-dark: #7f7002;
--color-warning-soft: #fef9ce;
--color-success: #008A1C;
--color-success-light: #00bd26;
--color-success-dark: #002407;
--color-success-soft: #71ff8d;
--border-color: #929598;
}
.icon-add {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-success);
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-add-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-add-blue {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-add-dispense {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-success);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-add-dispense-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-add-patient {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-success);
display: inline-flex;
height: 22px;
width: 22px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-add-patient-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 22px;
width: 22px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-edit {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-edit-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-identification {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-success);
display: inline-flex;
height: 18px;
width: 18px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-identification-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-remove {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-danger);
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-remove-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-save {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-success);
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-save-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-search {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-search-light {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-neutral-lightest);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-search-action {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-lock {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-lock:hover {
background-color: #ffffff;
}
.icon-lock-light {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-neutral-lightest);
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-unlock {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-unlock-light {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-neutral-lightest);
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-phone {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-phone-light {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-neutral-lightest);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-phone-blue {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-print {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 18px;
width: 18px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-print-light {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-neutral-lightest);
display: inline-flex;
height: 18px;
width: 18px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-print-blue {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 18px;
width: 18px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-filter {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 21px;
width: 21px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-filter-light {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-neutral-lightest);
display: inline-flex;
height: 21px;
width: 21px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-filter-blue {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 21px;
width: 21px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-chevron-right {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-chevron-right-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-chevron-left {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-chevron-left-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-chevron-up {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-chevron-up-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-chevron-down {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-chevron-down-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-triangle-up {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 10px;
width: 10px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-triangle-down {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 10px;
width: 10px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-subdirectory-right {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-subdirectory-right-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-person-alert {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 21px;
width: 21px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-person-alert-light {
--svg: url('data:image/svg+xml, ');
background-color: #FFFFFF;
display: inline-flex;
height: 21px;
width: 21px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-clear {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-info {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-neutral-darkest);
display: inline-flex;
height: 16px;
width: 16px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-warning {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-secondary);
display: inline-flex;
height: 16px;
width: 16px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-warning-dark {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 16px;
width: 16px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-error {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-error-red {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-danger);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-error-light {
--svg: url('data:image/svg+xml, ');
background-color: #ffffff;
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-calendar {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-neutral-darkest);
display: inline-flex;
height: 16px;
width: 16px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-calendar-blue {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 16px;
width: 16px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-upload {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-upload-new-file {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-pause {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-failure {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-danger);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-file {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-download {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-download-action {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-refresh {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-refresh-blue {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-go-to {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 16px;
width: 16px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-view {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-print {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-trash {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-danger);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-clock {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-clock-light {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-neutral-lightest);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-history {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-history-light {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-neutral-lightest);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-arrow-left {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 16px;
width: 16px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-arrow-right {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-arrow-right-light {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-neutral-lightest);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-play {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-success);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-open-modal {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-circle {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-checkmark-with-circle {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-success);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-email {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-perform-check {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-columns {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 21px;
width: 21px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-value-map {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-data-source {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 22px;
width: 22px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-source-file {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 22px;
width: 22px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-star {
--svg: url('data:image/svg+xml, ');
background-color: #ad9015;
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-copy {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-copy-dark {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-filter {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-dot {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-success);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-house {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-location {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-location-blue {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-person {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-person-blue {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-fax {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 18px;
width: 18px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-fax-blue {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 18px;
width: 18px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-website {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 18px;
width: 18px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-website-blue {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 18px;
width: 18px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-dispenser {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-prescriber {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-page-next {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 10px;
width: 10px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-page-prev {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 10px;
width: 10px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-distance {
--svg: url('data:image/svg+xml, ');
background-color: var(--font-color);
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-distance-blue {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 15px;
width: 15px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-query {
--svg: url('data:image/svg+xml, ');
background-color: var(--color-primary);
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
mask: var(--svg) center no-repeat;
-webkit-mask: var(--svg) center no-repeat;
}
.icon-confidence-high {
--svg: url("data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzgyNV81NDY0KSI+CjxwYXRoIGQ9Ik01LjA4NjU5IDIuMzgwNkM1LjY5MzIxIDIuMTI5MzMgNi4zNDMzOSAyIDcgMkM3LjY1NjYxIDIgOC4zMDY3OSAyLjEyOTMzIDguOTEzNDIgMi4zODA2QzkuNTIwMDUgMi42MzE4OCAxMC4wNzEyIDMuMDAwMTcgMTAuNTM1NSAzLjQ2NDQ3QzEwLjk5OTggMy45Mjg3NiAxMS4zNjgxIDQuNDc5OTYgMTEuNjE5NCA1LjA4NjU4QzExLjg3MDcgNS42OTMyMSAxMiA2LjM0MzM5IDEyIDdDMTIgNy42NTY2MSAxMS44NzA3IDguMzA2NzkgMTEuNjE5NCA4LjkxMzQyQzExLjM2ODEgOS41MjAwNSAxMC45OTk4IDEwLjA3MTIgMTAuNTM1NSAxMC41MzU1QzEwLjA3MTIgMTAuOTk5OCA5LjUyMDA0IDExLjM2ODEgOC45MTM0MiAxMS42MTk0QzguMzA2NzkgMTEuODcwNyA3LjY1NjYxIDEyIDcgMTJDNi4zNDMzOSAxMiA1LjY5MzIxIDExLjg3MDcgNS4wODY1OCAxMS42MTk0QzQuNDc5OTUgMTEuMzY4MSAzLjkyODc2IDEwLjk5OTggMy40NjQ0NiAxMC41MzU1QzMuMDEzMTQgMTAuMDg0MiAyLjY1MjUyIDkuNTUwNzYgMi40MDE5MyA4Ljk2NDExTDAuNTYyNjk3IDkuNzQ5NzVDMC45MTM1MjggMTAuNTcxMSAxLjQxODM5IDExLjMxNzkgMi4wNTAyNSAxMS45NDk3QzIuNzAwMjYgMTIuNTk5OCAzLjQ3MTkzIDEzLjExNTQgNC4zMjEyMSAxMy40NjcyQzUuMTcwNDkgMTMuODE4OSA2LjA4MDc0IDE0IDcgMTRDNy45MTkyNSAxNCA4LjgyOTUgMTMuODE4OSA5LjY3ODc4IDEzLjQ2NzJDMTAuNTI4MSAxMy4xMTU0IDExLjI5OTcgMTIuNTk5OCAxMS45NDk3IDExLjk0OTdDMTIuNTk5OCAxMS4yOTk3IDEzLjExNTQgMTAuNTI4MSAxMy40NjcyIDkuNjc4NzhDMTMuODE4OSA4LjgyOTUxIDE0IDcuOTE5MjUgMTQgN0MxNCA2LjA4MDc1IDEzLjgxODkgNS4xNzA1IDEzLjQ2NzIgNC4zMjEyMkMxMy4xMTU0IDMuNDcxOTQgMTIuNTk5OCAyLjcwMDI2IDExLjk0OTcgMi4wNTAyNUMxMS4yOTk3IDEuNDAwMjQgMTAuNTI4MSAwLjg4NDYyNiA5LjY3ODc4IDAuNTMyODQzQzguODI5NSAwLjE4MTA2IDcuOTE5MjUgMCA3IDBDNi4wODA3NSAwIDUuMTcwNSAwLjE4MTA1OSA0LjMyMTIyIDAuNTMyODQyQzMuNDcxOTQgMC44ODQ2MjQgMi43MDAyNyAxLjQwMDI0IDIuMDUwMjYgMi4wNTAyNUMxLjQwMDI0IDIuNzAwMjYgMC44ODQ2MjggMy40NzE5MyAwLjUzMjg0NSA0LjMyMTIxQzAuMTgxMDYxIDUuMTcwNDkgMCA2LjA4MDc0IDAgN0MwIDcuMjgwNCAwLjAxNjg0NjMgNy41NTk5NiAwLjA1MDI0NTYgNy44MzcyMUwyLjAzNTg5IDcuNTk3OThDMi4wMTIwMyA3LjM5OTk1IDIgNy4yMDAyNyAyIDdDMiA2LjM0MzM5IDIuMTI5MzMgNS42OTMyMSAyLjM4MDYgNS4wODY1OEMyLjYzMTg4IDQuNDc5OTUgMy4wMDAxNyAzLjkyODc2IDMuNDY0NDcgMy40NjQ0NkMzLjkyODc2IDMuMDAwMTcgNC40Nzk5NiAyLjYzMTg3IDUuMDg2NTkgMi4zODA2WiIgZmlsbD0iI0U4RThFOCIvPgo8cGF0aCBkPSJNMC4yNTc5NDMgOC44ODI3M0MwLjI0NDc0NCA4LjgzNTQ2IDAuMjMyMDQ0IDguNzg4MDcgMC4yMTk4NDYgOC43NDA1NUwwLjI1Nzk0MyA4Ljg4MjczWiIgZmlsbD0iI0U4RThFOCIvPgo8cGF0aCBkPSJNNyAwQzYuNDQ3NzIgMCA2IDAuNDQ3NzE1IDYgMUM2IDEuNTUyMjggNi40NDc3MiAyIDcgMkM4LjA4MDI2IDIgOS4xMzE0NyAyLjM0OTg2IDkuOTk2MjggMi45OTcyMUMxMC44NjExIDMuNjQ0NTYgMTEuNDkzIDQuNTU0NTggMTEuNzk3NCA1LjU5MTA3QzEyLjEwMTggNi42Mjc1NSAxMi4wNjIzIDcuNzM0NzQgMTEuNjg0OSA4Ljc0NjkyQzExLjMwNzUgOS43NTkxIDEwLjYxMjQgMTAuNjIxOCA5LjcwMzY4IDExLjIwNkM4Ljc5NDk4IDExLjc5MDEgNy43MjE1MyAxMi4wNjQyIDYuNjQ0MDEgMTEuOTg3M0M1LjU2NjUgMTEuOTEwNCA0LjU0Mjg3IDExLjQ4NjYgMy43MjYzNCAxMC43NzkzQzMuMTQ5NzcgMTAuMjc5OSAyLjY5ODM3IDkuNjU4MDcgMi40MDE5MyA4Ljk2NDExTDAuNTYyNjk1IDkuNzQ5NzVDMC45Nzc3MTEgMTAuNzIxMyAxLjYwOTY4IDExLjU5MTggMi40MTY4OCAxMi4yOTFDMy41NjAwMSAxMy4yODEyIDQuOTkzMDkgMTMuODc0NiA2LjUwMTYyIDEzLjk4MjJDOC4wMTAxNCAxNC4wODk5IDkuNTEyOTcgMTMuNzA2MSAxMC43ODUyIDEyLjg4ODNDMTIuMDU3MyAxMi4wNzA2IDEzLjAzMDUgMTAuODYyNyAxMy41NTg5IDkuNDQ1NjlDMTQuMDg3MyA4LjAyODY0IDE0LjE0MjUgNi40Nzg1NyAxMy43MTYzIDUuMDI3NDlDMTMuMjkwMiAzLjU3NjQyIDEyLjQwNTUgMi4zMDIzOCAxMS4xOTQ4IDEuMzk2MDlDOS45ODQwNiAwLjQ4OTgwMiA4LjUxMjM3IDAgNyAwWiIgZmlsbD0iIzAwQjYyOCIvPgo8cGF0aCBkPSJNMC4yNTc5MjIgOC44ODI2NUwwLjIxOTkxNyA4Ljc0MDgxQzAuMjMyMDk4IDguNzg4MjYgMC4yNDQ3NjggOC44MzU1NCAwLjI1NzkyMiA4Ljg4MjY1WiIgZmlsbD0iIzAwQjYyOCIvPgo8cGF0aCBkPSJNMC4wNTAyNDM0IDcuODM3MjFMMi4wMzU4OSA3LjU5Nzk4QzEuOTI2MzEgNi42ODg0MiAyLjA2ODQ4IDUuNzYyODggMi40NTEzOCA0LjkyMzk1QzIuNjgwNjkgNC40MjE1MiAyLjQ1OTI5IDMuODI4MzMgMS45NTY4NiAzLjU5OTAyQzEuNDU0NDMgMy4zNjk3IDAuODYxMjM4IDMuNTkxMTEgMC42MzE5MjUgNC4wOTM1M0MwLjA5NTg2MTEgNS4yNjgwNSAtMC4xMDMxNjkgNi41NjM4MSAwLjA1MDI0MzQgNy44MzcyMVoiIGZpbGw9IiMwMEI2MjgiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF84MjVfNTQ2NCI+CjxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
background-color: transparent !important;
background-image: var(--svg);
background-repeat: no-repeat;
background-position: center;
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
}
.icon-confidence-medium {
--svg: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzgyNV81NDU0KSI+CjxwYXRoIGQ9Ik01LjA4NjU5IDIuMzgwNkM1LjY5MzIxIDIuMTI5MzMgNi4zNDMzOSAyIDcgMkM3LjY1NjYxIDIgOC4zMDY3OSAyLjEyOTMzIDguOTEzNDIgMi4zODA2QzkuNTIwMDUgMi42MzE4OCAxMC4wNzEyIDMuMDAwMTcgMTAuNTM1NSAzLjQ2NDQ3QzEwLjk5OTggMy45Mjg3NiAxMS4zNjgxIDQuNDc5OTYgMTEuNjE5NCA1LjA4NjU4QzExLjg3MDcgNS42OTMyMSAxMiA2LjM0MzM5IDEyIDdDMTIgNy42NTY2MSAxMS44NzA3IDguMzA2NzkgMTEuNjE5NCA4LjkxMzQyQzExLjM2ODEgOS41MjAwNSAxMC45OTk4IDEwLjA3MTIgMTAuNTM1NSAxMC41MzU1QzEwLjA3MTIgMTAuOTk5OCA5LjUyMDA0IDExLjM2ODEgOC45MTM0MiAxMS42MTk0QzguMzA2NzkgMTEuODcwNyA3LjY1NjYxIDEyIDcgMTJDNi4zNDMzOSAxMiA1LjY5MzIxIDExLjg3MDcgNS4wODY1OCAxMS42MTk0QzQuNjk4OTQgMTEuNDU4OCA0LjMzMzk0IDExLjI1MDUgMy45OTk3OCAxMC45OTk4TDIuNzk5NzggMTIuNTk5OEMzLjI2NzU4IDEyLjk1MDcgMy43Nzg1NSAxMy4yNDI0IDQuMzIxMjEgMTMuNDY3MkM1LjE3MDQ5IDEzLjgxODkgNi4wODA3NCAxNCA3IDE0QzcuOTE5MjUgMTQgOC44Mjk1IDEzLjgxODkgOS42Nzg3OCAxMy40NjcyQzEwLjUyODEgMTMuMTE1NCAxMS4yOTk3IDEyLjU5OTggMTEuOTQ5NyAxMS45NDk3QzEyLjU5OTggMTEuMjk5NyAxMy4xMTU0IDEwLjUyODEgMTMuNDY3MiA5LjY3ODc5QzEzLjgxODkgOC44Mjk1MSAxNCA3LjkxOTI1IDE0IDdDMTQgNi4wODA3NSAxMy44MTg5IDUuMTcwNSAxMy40NjcyIDQuMzIxMjJDMTMuMTE1NCAzLjQ3MTk0IDEyLjU5OTggMi43MDAyNiAxMS45NDk3IDIuMDUwMjVDMTEuMjk5NyAxLjQwMDI0IDEwLjUyODEgMC44ODQ2MjYgOS42Nzg3OCAwLjUzMjg0M0M4LjgyOTUgMC4xODEwNiA3LjkxOTI1IDAgNyAwQzYuMDgwNzUgMCA1LjE3MDUgMC4xODEwNTkgNC4zMjEyMiAwLjUzMjg0MkMzLjQ3MTk0IDAuODg0NjI0IDIuNzAwMjcgMS40MDAyNCAyLjA1MDI2IDIuMDUwMjVDMS40MDAyNCAyLjcwMDI2IDAuODg0NjI4IDMuNDcxOTMgMC41MzI4NDUgNC4zMjEyMUMwLjE4MTA2MSA1LjE3MDQ5IDAgNi4wODA3NCAwIDdDMCA3LjkxOTI1IDAuMTgxMDU5IDguODI5NSAwLjUzMjg0MiA5LjY3ODc4QzAuNzU3NTYgMTAuMjIxMyAxLjA0OTEzIDEwLjczMjEgMS4zOTk4OCAxMS4xOTk4TDIuOTk5ODggOS45OTk4NEMyLjc0OTM2IDkuNjY1NzkgMi41NDExMSA5LjMwMDkxIDIuMzgwNiA4LjkxMzQxQzIuMTI5MzMgOC4zMDY3OSAyIDcuNjU2NjEgMiA3QzIgNi4zNDMzOSAyLjEyOTMzIDUuNjkzMjEgMi4zODA2IDUuMDg2NThDMi42MzE4OCA0LjQ3OTk1IDMuMDAwMTcgMy45Mjg3NiAzLjQ2NDQ3IDMuNDY0NDZDMy45Mjg3NiAzLjAwMDE3IDQuNDc5OTYgMi42MzE4NyA1LjA4NjU5IDIuMzgwNloiIGZpbGw9IiNFQUVDRjAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02IDFDNiAwLjQ0NzcxNSA2LjQ0NzcyIDAgNyAwQzguNzU5NiAwIDEwLjQ1NDcgMC42NjI2ODYgMTEuNzQ3NyAxLjg1NjExQzEzLjA0MDcgMy4wNDk1NCAxMy44MzY4IDQuNjg2MTYgMTMuOTc3NiA2LjQ0MDEyQzE0LjExODMgOC4xOTQwOCAxMy41OTMzIDkuOTM2NzEgMTIuNTA3MSAxMS4zMjFDMTEuNDIxIDEyLjcwNTQgOS44NTMyNSAxMy42Mjk5IDguMTE2MTcgMTMuOTEwNEM3LjU3MDk1IDEzLjk5ODUgNy4wNTc1NyAxMy42Mjc5IDYuOTY5NTEgMTMuMDgyN0M2Ljg4MTQ1IDEyLjUzNzUgNy4yNTIwNCAxMi4wMjQxIDcuNzk3MjYgMTEuOTM2QzkuMDM4MDQgMTEuNzM1NiAxMC4xNTc4IDExLjA3NTMgMTAuOTMzNyAxMC4wODY1QzExLjcwOTUgOS4wOTc2NSAxMi4wODQ1IDcuODUyOTIgMTEuOTg0IDYuNjAwMDlDMTEuODgzNSA1LjM0NzI2IDExLjMxNDggNC4xNzgyNCAxMC4zOTEyIDMuMzI1OEM5LjQ2NzYxIDIuNDczMzUgOC4yNTY4NSAyIDcgMkM2LjQ0NzcyIDIgNiAxLjU1MjI4IDYgMVoiIGZpbGw9IiNGM0RCMDAiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF84MjVfNTQ1NCI+CjxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
background-color: transparent !important;
background-image: var(--svg);
background-repeat: no-repeat;
background-position: center;
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
}
.icon-confidence-low {
--svg: url("data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzgyNV81NDU5KSI+CjxwYXRoIGQ9Ik01LjA4NjU5IDIuMzgwNkM1LjY5MzIxIDIuMTI5MzMgNi4zNDMzOSAyIDcgMkM3LjY1NjYxIDIgOC4zMDY3OSAyLjEyOTMzIDguOTEzNDIgMi4zODA2QzkuNTIwMDUgMi42MzE4OCAxMC4wNzEyIDMuMDAwMTcgMTAuNTM1NSAzLjQ2NDQ3QzEwLjk5OTggMy45Mjg3NiAxMS4zNjgxIDQuNDc5OTYgMTEuNjE5NCA1LjA4NjU4QzExLjg3MDcgNS42OTMyMSAxMiA2LjM0MzM5IDEyIDdDMTIgNy42NTY2MSAxMS44NzA3IDguMzA2NzkgMTEuNjE5NCA4LjkxMzQyQzExLjM2ODEgOS41MjAwNSAxMC45OTk4IDEwLjA3MTIgMTAuNTM1NSAxMC41MzU1QzEwLjA3MTIgMTAuOTk5OCA5LjUyMDA0IDExLjM2ODEgOC45MTM0MiAxMS42MTk0QzguMzA2NzkgMTEuODcwNyA3LjY1NjYxIDEyIDcgMTJDNi4zNDMzOSAxMiA1LjY5MzIxIDExLjg3MDcgNS4wODY1OCAxMS42MTk0QzQuNjk4OTQgMTEuNDU4OCA0LjMzMzk0IDExLjI1MDUgMy45OTk3OCAxMC45OTk4TDIuNzk5NzggMTIuNTk5OEMzLjI2NzU4IDEyLjk1MDcgMy43Nzg1NSAxMy4yNDI0IDQuMzIxMjEgMTMuNDY3MkM1LjE3MDQ5IDEzLjgxODkgNi4wODA3NCAxNCA3IDE0QzcuOTE5MjUgMTQgOC44Mjk1IDEzLjgxODkgOS42Nzg3OCAxMy40NjcyQzEwLjUyODEgMTMuMTE1NCAxMS4yOTk3IDEyLjU5OTggMTEuOTQ5NyAxMS45NDk3QzEyLjU5OTggMTEuMjk5NyAxMy4xMTU0IDEwLjUyODEgMTMuNDY3MiA5LjY3ODc5QzEzLjgxODkgOC44Mjk1MSAxNCA3LjkxOTI1IDE0IDdDMTQgNi4wODA3NSAxMy44MTg5IDUuMTcwNSAxMy40NjcyIDQuMzIxMjJDMTMuMTE1NCAzLjQ3MTk0IDEyLjU5OTggMi43MDAyNiAxMS45NDk3IDIuMDUwMjVDMTEuMjk5NyAxLjQwMDI0IDEwLjUyODEgMC44ODQ2MjYgOS42Nzg3OCAwLjUzMjg0M0M4LjgyOTUgMC4xODEwNiA3LjkxOTI1IDAgNyAwQzYuMDgwNzUgMCA1LjE3MDUgMC4xODEwNTkgNC4zMjEyMiAwLjUzMjg0MkMzLjQ3MTk0IDAuODg0NjI0IDIuNzAwMjcgMS40MDAyNCAyLjA1MDI2IDIuMDUwMjVDMS40MDAyNCAyLjcwMDI2IDAuODg0NjI4IDMuNDcxOTMgMC41MzI4NDUgNC4zMjEyMUMwLjE4MTA2MSA1LjE3MDQ5IDAgNi4wODA3NCAwIDdDMCA3LjkxOTI1IDAuMTgxMDU5IDguODI5NSAwLjUzMjg0MiA5LjY3ODc4QzAuNzU3NTYgMTAuMjIxMyAxLjA0OTEzIDEwLjczMjEgMS4zOTk4OCAxMS4xOTk4TDIuOTk5ODggOS45OTk4NEMyLjc0OTM2IDkuNjY1NzkgMi41NDExMSA5LjMwMDkxIDIuMzgwNiA4LjkxMzQxQzIuMTI5MzMgOC4zMDY3OSAyIDcuNjU2NjEgMiA3QzIgNi4zNDMzOSAyLjEyOTMzIDUuNjkzMjEgMi4zODA2IDUuMDg2NThDMi42MzE4OCA0LjQ3OTk1IDMuMDAwMTcgMy45Mjg3NiAzLjQ2NDQ3IDMuNDY0NDZDMy45Mjg3NiAzLjAwMDE3IDQuNDc5OTYgMi42MzE4NyA1LjA4NjU5IDIuMzgwNloiIGZpbGw9IiNFQUVDRjAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02IDFDNiAwLjQ0NzcxNSA2LjQ0NzcyIDAgNyAwQzguMDI0NjIgMCA5LjAzNjc1IDAuMjI0OTM1IDkuOTY0OTIgMC42NTg5MjJDMTAuODkzMSAxLjA5MjkxIDExLjcxNDcgMS43MjUzNyAxMi4zNzE2IDIuNTExNjRDMTMuMDI4NiAzLjI5NzkxIDEzLjUwNSA0LjIxODgyIDEzLjc2NzEgNS4yMDkzNUMxNC4wMjkyIDYuMTk5ODggMTQuMDcwNyA3LjIzNTg3IDEzLjg4ODUgOC4yNDQxN0MxMy43OTA0IDguNzg3NjYgMTMuMjcwMiA5LjE0ODY3IDEyLjcyNjcgOS4wNTA1MUMxMi4xODMyIDguOTUyMzUgMTEuODIyMiA4LjQzMjE5IDExLjkyMDQgNy44ODg2OUMxMi4wNTA1IDcuMTY4NDggMTIuMDIwOSA2LjQyODQ4IDExLjgzMzYgNS43MjA5NkMxMS42NDY0IDUuMDEzNDQgMTEuMzA2MiA0LjM1NTY1IDEwLjgzNjkgMy43OTQwM0MxMC4zNjc2IDMuMjMyNCA5Ljc4MDc4IDIuNzgwNjUgOS4xMTc4IDIuNDcwNjZDOC40NTQ4MiAyLjE2MDY3IDcuNzMxODcgMiA3IDJDNi40NDc3MiAyIDYgMS41NTIyOCA2IDFaIiBmaWxsPSIjRTE1NTU1Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfODI1XzU0NTkiPgo8cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
background-color: transparent !important;
background-image: var(--svg);
background-repeat: no-repeat;
background-position: center;
display: inline-flex;
height: 20px;
width: 20px;
margin-right: 5px;
}
html {
line-height: 1.16;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main {
display: block;
}
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;
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.2;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
button [type=button]::-moz-focus-inner,
button [type=reset]::-moz-focus-inner,
button [type=submit]::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=button] [type=button]::-moz-focus-inner,
[type=button] [type=reset]::-moz-focus-inner,
[type=button] [type=submit]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=reset] [type=button]::-moz-focus-inner,
[type=reset] [type=reset]::-moz-focus-inner,
[type=reset] [type=submit]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
[type=submit] [type=button]::-moz-focus-inner,
[type=submit] [type=reset]::-moz-focus-inner,
[type=submit] [type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
button [type=button]:-moz-focusring,
button [type=reset]:-moz-focusring,
button [type=submit]:-moz-focusring,
[type=button]:-moz-focusring,
[type=button] [type=button]:-moz-focusring,
[type=button] [type=reset]:-moz-focusring,
[type=button] [type=submit]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=reset] [type=button]:-moz-focusring,
[type=reset] [type=reset]:-moz-focusring,
[type=reset] [type=submit]:-moz-focusring,
[type=submit]:-moz-focusring,
[type=submit] [type=button]:-moz-focusring,
[type=submit] [type=reset]:-moz-focusring,
[type=submit] [type=submit]:-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;
}
template {
display: none;
}
[data-tooltip] {
position: relative;
}
[data-tooltip]:before {
background: var(--color-neutral-darker);
border: 1px solid var(--color-neutral-darker);
border-radius: 8px;
bottom: initial;
color: #ffffff;
content: attr(data-tooltip);
display: none;
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
font-family: "Calibri";
font-size: 14px;
left: 50%;
margin: initial;
margin-left: 0;
margin-right: 0;
margin-top: 25px;
max-width: 200px;
min-width: 150px;
padding: 15px 0;
position: absolute;
transform: translate(-50%, 0);
text-align: center;
text-wrap: wrap;
top: 50%;
z-index: 1;
}
[data-tooltip]:after { /* arrow */
border: 10px solid var(--color-neutral-darker);
border-color: transparent transparent var(--color-neutral-darker) transparent;
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
content: "";
display: none;
left: calc(50% - 9px);
margin: initial;
margin-right: 15px;
position: absolute;
right: initial;
transform: translateY(-50%);
top: 100%;
z-index: 1;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after {
display: flex;
}
[data-tooltip].tt-left:before {
bottom: 50%;
left: initial;
margin: initial;
margin-right: 10px;
right: 100%;
top: initial;
transform: translate(0, 50%);
}
[data-tooltip].tt-left:after {
border-color: transparent transparent transparent var(--color-neutral-darker);
bottom: 0;
left: initial;
margin: initial;
margin-right: -9px;
right: 100%;
top: 50%;
transform: translate(0, -50%);
}
[data-tooltip].tt-right:before {
left: 100%;
margin: initial;
margin-left: 10px;
right: initial;
top: 50%;
transform: translate(0%, -50%);
}
[data-tooltip].tt-right:after {
border-color: transparent var(--color-neutral-darker) transparent transparent;
left: initial;
margin: initial;
margin-right: 0;
margin-left: 0;
right: -10px;
top: 50%;
transform: translate(0, -50%);
}
[data-tooltip].tt-up:before { /* up */
bottom: calc(100% - 10px);
left: 50%;
margin: initial;
margin-right: 0;
top: initial;
transform: translate(-50%, -50%);
}
[data-tooltip].tt-up:after {
border-color: var(--color-neutral-darker) transparent transparent transparent;
bottom: 100%;
left: calc(50% - 10px);
margin: initial;
margin-right: 15px;
right: initial;
top: 0;
}
[data-tooltip].tt-down:before {
bottom: initial;
left: 50%;
margin: initial;
margin-right: 0;
margin-top: 20px;
transform: translate(-50%, 0);
}
*, *::before, *::after {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
color: var(--font-color);
display: block;
font-family: var(--font-family);
font-size: var(--font-size);
line-height: var(--font-line-height);
width: 100%;
}
a {
color: var(--color-primary);
text-decoration: none;
}
a:hover, a:focus, a:focus-within {
color: var(--color-primary-light);
}
ul {
list-style: none;
}
i {
font-weight: 400;
font-style: italic;
}
sb {
font-weight: 600;
}
b {
font-weight: 700;
}
[aria-invalid=true][aria-invalid=true] {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--color-danger);
outline: 2px solid var(--color-danger);
}
.error-message {
color: var(--color-danger);
display: none;
font-size: var(--font-size-tiny);
max-width: 500px;
overflow-wrap: break-word;
margin: 5px 0;
position: absolute;
top: calc(100% - 4px);
z-index: 1;
background: white;
padding: 5px;
border: 1px solid var(--color-danger);
border-radius: 8px;
left: 0;
width: 100%;
}
.error-message.up {
bottom: calc(100% - 3px);
top: unset;
}
[aria-invalid=true] .error-message {
display: block;
}
[hidden] {
display: none !important;
}
lo-input:not([internal]), lo-toggle, lo-dropdown, lo-datepicker {
animation: fade-in 0.2s ease-in;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
*[data-required=true]::after {
content: "*";
color: var(--color-danger);
font-size: var(--font-size-medium);
font-weight: 600;
line-height: 1;
position: relative;
top: -1px;
}
*[disabled][data-required=true]::after {
display: none;
}
app-ucf-main [data-lastpass-root], #testbed [data-lastpass-root], app-ucf-main [data-lastpass-icon-root=true], #testbed [data-lastpass-icon-root=true] {
display: none !important;
}
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px !important;
}
.required-hide [data-required=true]::after {
display: none;
}
[data-popper-reference-hidden] {
visibility: hidden;
pointer-events: none;
}
[data-popper-reference-hidden] lo-checkbox div[checkbox], [data-popper-reference-hidden] lo-tree lo-checkbox div[checkbox][checked=true] {
visibility: hidden !important;
}
[col="12"] {
--cols: 1;
display: flex;
flex-basis: 100%;
max-width: 100%;
}
@container (min-width: 35em) and (max-width: 50em) {
[col="12"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 2;
--cols: 1;
}
}
@container (min-width: 50em) and (max-width: 60em) {
[col="12"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 3;
--cols: 1;
}
}
@container (min-width: 60em) {
[col="12"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
}
@container (min-width: 50em) and (max-width: 60em) {
[col="12"] {
--cols: 1;
}
}
[col="10"] {
display: flex;
flex-basis: 100%;
max-width: 100%;
}
@container (min-width: 35em) and (max-width: 50em) {
[col="10"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 2;
}
}
@container (min-width: 50em) and (max-width: 60em) {
[col="10"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 3;
}
}
@container (min-width: 60em) {
[col="10"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
}
@container (min-width: 60em) {
[col="10"] {
flex-basis: 83.3333333%;
max-width: 83.3333333%;
}
}
[col="9"] {
display: flex;
flex-basis: 100%;
max-width: 100%;
}
@container (min-width: 35em) and (max-width: 50em) {
[col="9"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 2;
}
}
@container (min-width: 50em) and (max-width: 60em) {
[col="9"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 3;
}
}
@container (min-width: 60em) {
[col="9"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
}
@container (min-width: 60em) {
[col="9"] {
flex-basis: 75%;
max-width: 75%;
}
}
[col="8"] {
display: flex;
flex-basis: 100%;
max-width: 100%;
}
@container (min-width: 35em) and (max-width: 50em) {
[col="8"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 2;
}
}
@container (min-width: 50em) and (max-width: 60em) {
[col="8"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 3;
}
}
@container (min-width: 60em) {
[col="8"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
}
@container (min-width: 60em) {
[col="8"] {
flex-basis: 66.3%;
max-width: 66.3%;
}
}
[col="7"] {
display: flex;
flex-basis: 100%;
max-width: 100%;
}
@container (min-width: 35em) and (max-width: 50em) {
[col="7"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 2;
}
}
@container (min-width: 50em) and (max-width: 60em) {
[col="7"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 3;
}
}
@container (min-width: 60em) {
[col="7"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
}
@container (min-width: 60em) {
[col="7"] {
flex-basis: 57.92%;
max-width: 57.92%;
}
}
[col="6"] {
display: flex;
flex-basis: 100%;
max-width: 100%;
--cols: 2;
}
@container (min-width: 35em) and (max-width: 50em) {
[col="6"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 2;
}
}
@container (min-width: 50em) and (max-width: 60em) {
[col="6"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 3;
}
}
@container (min-width: 60em) {
[col="6"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
}
[col="5"] {
display: flex;
flex-basis: 100%;
max-width: 100%;
}
@container (min-width: 35em) and (max-width: 50em) {
[col="5"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 2;
}
}
@container (min-width: 50em) and (max-width: 60em) {
[col="5"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 3;
}
}
@container (min-width: 60em) {
[col="5"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
}
@container (min-width: 60em) {
[col="5"] {
flex-basis: 40.89%;
max-width: 40.89%;
}
}
[col="4"] {
display: flex;
flex-basis: 100%;
max-width: 100%;
grid-auto-rows: 1fr;
--cols: 3;
}
@container (min-width: 35em) and (max-width: 50em) {
[col="4"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 2;
}
}
@container (min-width: 50em) and (max-width: 60em) {
[col="4"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 3;
}
}
@container (min-width: 60em) {
[col="4"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
}
[col="3"] {
display: flex;
flex-basis: 100%;
max-width: 100%;
grid-auto-rows: 1fr;
--cols: 4;
}
@container (min-width: 35em) and (max-width: 50em) {
[col="3"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 2;
}
}
@container (min-width: 50em) and (max-width: 60em) {
[col="3"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 3;
}
}
@container (min-width: 60em) {
[col="3"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
}
[col="2"] {
display: flex;
flex-basis: 100%;
max-width: 100%;
--cols: 6;
}
@container (min-width: 35em) and (max-width: 50em) {
[col="2"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 2;
}
}
@container (min-width: 50em) and (max-width: 60em) {
[col="2"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 3;
}
}
@container (min-width: 60em) {
[col="2"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
}
[col="1"] {
display: flex;
flex-basis: 100%;
max-width: 100%;
--cols: 12;
}
@container (min-width: 35em) and (max-width: 50em) {
[col="1"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 2;
}
}
@container (min-width: 50em) and (max-width: 60em) {
[col="1"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
--cols: 3;
}
}
@container (min-width: 60em) {
[col="1"] {
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
lo-button[variant=basic],
lo-button[variant=save],
lo-button[variant=danger],
lo-button[variant=action],
lo-button[variant=cancel] {
min-width: fit-content;
width: -webkit-fill-available;
}
lo-button[variant=basic] button,
lo-button[variant=save] button,
lo-button[variant=danger] button,
lo-button[variant=action] button,
lo-button[variant=cancel] button {
min-width: fit-content;
}
}
lo-grandmaster {
background-color: #F6F5F5;
container-type: inline-size;
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
width: 100%;
}
lo-grandmaster > lo-container {
box-sizing: border-box;
height: 100%;
min-height: 100vh;
}
lo-grandmaster > lo-overlay {
width: 100%;
}
lo-container {
--gap: 10px;
align-items: stretch;
align-content: flex-start;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
gap: var(--gap);
padding: 10px;
width: 100%;
}
lo-container lo-container {
padding: 0;
}
lo-container .title {
align-items: center;
border-bottom: 1px solid var(--border-color);
display: flex;
font-size: var(--font-size-large);
font-weight: 700;
margin: 0 0 10px 0;
width: 100%;
white-space: nowrap;
}
lo-container [variant=section] {
margin-bottom: 20px;
}
lo-container [variant=subsection] {
margin: 20px 0 20px 20px;
}
lo-container [variant=subsection] .title {
border-bottom: 1px solid var(--border-color);
display: inline-flex;
font-size: var(--font-size-medium);
font-weight: 700;
width: 100%;
white-space: nowrap;
}
lo-container [variant=subsection] .title > span:first-of-type {
bottom: 2px;
height: 18px;
position: relative;
width: 18px;
}
lo-container [variant=subsection] .title .icon-chevron-right {
height: 15px;
margin-left: 3px;
margin-right: 0;
width: 15px;
}
lo-container [variant=division] {
margin-top: 20px;
}
lo-container [variant=division] .title {
font-size: var(--font-size);
font-weight: 500;
justify-content: center;
}
lo-container [variant=division] .title span:first-of-type {
bottom: 0;
width: auto;
}
lo-container [variant=division] .title span.material-symbols-outlined {
font-size: 20px;
}
lo-container [variant=division] .title .icon-chevron-right {
height: 13px;
margin-left: 5px;
margin-right: 3px;
width: 13px;
}
lo-container [variant=actionbar] {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-bottom: -10px;
position: relative;
top: -10px;
}
lo-container .container-text {
width: 100%;
}
lo-container.overflowHidden {
overflow: hidden;
}
lo-container.overflowXAuto {
height: 100%;
overflow-x: auto;
}
lo-table {
border: 1px solid var(--color-neutral-light);
border-radius: 8px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
overflow: visible;
position: relative;
width: auto;
}
lo-table[variant=no-borders] lo-row, lo-table[variant=no-borders] lo-cell {
border: 0;
}
lo-table[variant=no-borders] lo-row[background=light] {
font-family: "Courier New", sans-serif;
}
lo-table[variant=no-borders] lo-row:last-of-type {
border: 0;
}
lo-table > lo-container {
flex-grow: 1;
gap: 0;
overflow: auto;
height: calc(100vh - 203px);
}
lo-table lo-row {
background-color: #FCFCFD;
border-bottom: 1px solid var(--color-neutral-lighter);
display: grid;
width: 100%;
}
lo-table lo-row[variant=head] {
background-color: var(--color-neutral-lightest);
border-left: 1px solid var(--color-neutral-lightest);
border-right: 1px solid var(--color-neutral-lightest);
color: var(--font-color);
font-weight: bold;
}
lo-table lo-row[variant=head][background=light] {
background-color: var(--color-neutral-lightest);
border-left: 1px solid var(--color-neutral-lighter);
border-right: 1px solid var(--color-neutral-lighter);
color: unset;
font-weight: bold;
}
lo-table lo-row[variant=head] lo-cell {
flex-wrap: nowrap;
font-size: var(--font-size-small);
}
lo-table lo-row[variant=body] {
font-family: "Courier New", Courier, monospace;
}
lo-table lo-row[variant=body]:hover {
background-color: var(--color-primary-softer);
}
lo-table lo-row:first-of-type {
border-radius: 8px 8px 0 0;
}
lo-table lo-row:last-of-type {
border-radius: 0 0 8px 8px;
border-bottom: 1px solid var(--color-neutral-lighter);
}
lo-table lo-cell {
align-items: center;
border-left: 1px solid var(--color-neutral-lightest);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 5px 10px;
position: relative;
word-break: break-word;
}
lo-table lo-cell:first-of-type {
border-left: 0;
}
lo-table lo-cell:focus, lo-table lo-cell:focus-within {
background-color: var(--color-primary-softer);
}
lo-table lo-cell > div {
align-items: center;
display: flex;
}
lo-table lo-cell[role=columnheader]:hover {
cursor: default;
}
lo-table lo-cell[variant=filter][role=columnheader]:hover {
background-color: var(--color-neutral-lighter);
cursor: pointer;
}
lo-table lo-cell[huge] {
grid-column-end: span 10;
}
lo-table lo-cell[large] {
grid-column-end: span 8;
}
lo-table lo-cell[default] {
grid-column-end: span 4;
}
lo-table lo-cell[medium] {
grid-column-end: span 3;
}
lo-table lo-cell[small] {
grid-column-end: span 2;
}
lo-table lo-cell[row] {
grid-column-end: span 12;
}
lo-table lo-cell[variant=checkbox], lo-table lo-cell[variant=button], lo-table lo-cell[position=center] {
justify-content: center;
text-align: center;
}
lo-table lo-cell[variant=labeled-text] .cell-label, lo-table lo-cell[variant=labeled-text] .cell-text, lo-table lo-cell[variant=labeled-date] .cell-label, lo-table lo-cell[variant=labeled-date] .cell-text, lo-table lo-cell[variant=labeled-tel] .cell-label, lo-table lo-cell[variant=labeled-tel] .cell-text {
align-items: center;
display: flex;
font-family: "Courier New", sans-serif;
}
lo-table lo-cell[variant=labeled-text] .cell-label, lo-table lo-cell[variant=labeled-date] .cell-label, lo-table lo-cell[variant=labeled-tel] .cell-label {
color: var(--font-color);
font-weight: bold;
margin-right: 5px;
}
lo-table lo-cell[variant=radiogroup] lo-radiogroup {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
justify-items: center;
padding: 0;
width: 100%;
--cols: 0;
}
lo-table lo-cell[variant=radiogroup] lo-radiogroup lo-checkbox [checkbox-pair] {
gap: 0;
}
lo-table lo-cell[variant=filter] .filter-button {
box-sizing: initial;
cursor: pointer;
height: 8px;
margin-right: 0;
}
lo-table lo-cell[variant=filter] .filter-button:focus, lo-table lo-cell[variant=filter] .filter-button:focus-within, lo-table lo-cell[variant=filter] .filter-button:active, lo-table lo-cell[variant=filter] .filter-button:hover {
background-color: var(--color-primary-light);
}
lo-table lo-cell.columns1 {
grid-column-end: span 1;
}
lo-table lo-cell.columns2 {
grid-column-end: span 2;
}
lo-table lo-cell.columns3 {
grid-column-end: span 3;
}
lo-table lo-cell.columns4 {
grid-column-end: span 4;
}
lo-table lo-cell.columns5 {
grid-column-end: span 5;
}
lo-table lo-cell.columns6 {
grid-column-end: span 6;
}
lo-table lo-cell.columns7 {
grid-column-end: span 7;
}
lo-table lo-cell.columns8 {
grid-column-end: span 8;
}
lo-table lo-cell.columns9 {
grid-column-end: span 9;
}
lo-table lo-cell.columns10 {
grid-column-end: span 10;
}
lo-table .sticky {
position: sticky;
top: 0;
z-index: 1;
}
lo-table lo-pagination {
background-color: var(--color-neutral-lightest);
bottom: 0;
flex-grow: 0;
height: 30px;
margin-top: 0;
max-height: 39px;
padding: 8px 0;
position: sticky;
z-index: 1;
}
lo-modal {
display: flex;
flex-direction: column;
position: absolute;
height: calc(100% - 80px);
overflow: hidden;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 5;
}
lo-modal [modal-header] {
border-radius: 8px 8px 0 0;
align-items: center;
background-color: #ffffff;
border: 1px solid #ffffff;
color: var(--font-color);
display: flex;
font-size: var(--font-size-medium);
font-weight: bold;
padding: 10px;
}
lo-modal [modal-body] {
background-color: #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
display: flex;
overflow: auto;
position: relative;
width: 100%;
}
lo-modal [modal-body] .modal-body-text {
margin: 20px 10px;
}
lo-modal [modal-footer] {
border-radius: 0 0 8px 8px;
background-color: #ffffff;
display: flex;
flex-direction: row-reverse;
padding: 10px;
}
lo-modal [modal-footer] lo-button {
margin-left: 5px;
width: auto;
}
lo-modal [modal-footer] lo-button.left {
margin-right: auto;
}
lo-modal[modalsize=alert] {
height: fit-content;
width: 400px;
z-index: 10;
}
lo-modal[modalsize=alert] [modal-body] .modal-body-text {
margin: 0 10px;
}
lo-modal[modalsize=small] {
width: 50%;
}
lo-modal[modalsize=medium] {
width: 70%;
}
lo-modal[modalsize=large] {
width: 90%;
}
lo-modal lo-overlay {
width: 100%;
}
lo-tabscontainer {
display: flex;
flex-direction: column;
position: relative;
}
lo-tabscontainer .tabs {
display: flex;
flex-direction: row;
gap: 10px;
width: fit-content;
}
lo-tabscontainer .tab {
display: flex;
align-items: center;
gap: 5px;
border-bottom: 3px solid transparent;
color: var(--color-neutral-darker);
padding-bottom: 5px;
padding-top: 5px;
position: relative;
top: -1px;
width: auto;
}
lo-tabscontainer .tab[disabled] {
opacity: 0.5;
}
lo-tabscontainer .tab[disabled]:hover {
cursor: not-allowed;
}
lo-tabscontainer .tab.active-below {
border-bottom: 2px solid var(--color-primary);
color: var(--font-color);
font-weight: bold;
}
lo-tabscontainer .tab.active-above {
border-top: 2px solid var(--color-primary);
color: var(--font-color);
font-weight: bold;
}
lo-tabscontainer .tab:hover {
cursor: pointer;
}
lo-tabscontainer .tab .tab-count {
background-color: var(--color-primary);
color: white;
font-size: 12px;
font-weight: bold;
padding: 2px 6px;
border-radius: 4px;
display: inline-block;
min-width: 18px;
text-align: center;
}
lo-tabscontainer .tab .tab-count.disabled {
background-color: var(--color-neutral);
color: var(--color-neutral-darker);
}
lo-tab {
width: 100%;
}
lo-tab[active] .tab-content {
display: flex;
}
lo-tab .tab-content {
display: none;
flex-wrap: wrap;
margin: 10px 0;
width: 100%;
}
lo-tab .highlight-below .tabs .tab.active {
border-bottom: 3px solid var(--color-primary);
padding-bottom: 5px;
color: var(--color-primary);
font-weight: bold;
}
lo-carousel {
background-color: #ffffff;
display: flex;
justify-content: center;
margin-bottom: 15px;
padding: 10px 0;
position: relative;
width: 100%;
}
lo-carousel .slides-container {
display: flex;
justify-content: center;
width: calc(100% - 84px);
z-index: 1;
}
lo-carousel .carousel-controls {
align-items: center;
background-color: #ffffff;
display: flex;
height: calc(100% + 50px);
justify-content: space-between;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
lo-carousel .carousel-controls .carousel-button {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
align-items: center;
background: linear-gradient(to bottom, var(--color-neutral-lightest) 5%, #F6F5F5 100%);
background-color: var(--color-neutral-lightest);
border-radius: 50%;
box-shadow: 0px 0px 0px 2px var(--color-neutral-lightest);
display: flex;
font-size: 19px;
height: 30px;
justify-content: center;
position: relative;
text-decoration: none;
text-shadow: 0px 1px 0px var(--color-neutral-lightest);
width: 30px;
}
lo-carousel .carousel-controls .carousel-button:hover {
background: linear-gradient(to bottom, #F6F5F5 5%, var(--color-neutral-lightest) 100%);
background-color: #476e9e;
cursor: pointer;
}
lo-carousel .carousel-controls .carousel-button .icon {
height: 20px;
margin: 0;
width: 20px;
}
lo-carousel .carousel-controls .carousel-button.previous {
left: 10px;
}
lo-carousel .carousel-controls .carousel-button.previous .icon {
margin: 0 3px 0 0;
filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.4));
}
lo-carousel .carousel-controls .carousel-button.next {
right: 10px;
}
lo-carousel .carousel-controls .carousel-button.next .icon {
margin: 0 0 0 4px;
filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.4));
}
lo-carousel .carousel-controls .current-slide-number {
border-top: 1px solid var(--color-neutral-lighter);
bottom: 0;
left: 50%;
padding: 5px 20px;
position: absolute;
text-transform: capitalize;
transform: translateX(-50%);
}
lo-slide {
display: none;
}
lo-slide.active {
display: flex;
}
lo-input {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
background-color: #ffffff;
position: relative;
width: 100%;
}
lo-input.textarea {
border: 0;
background-color: transparent;
}
lo-input.textarea:focus-within {
outline: 0;
}
lo-input:focus-within {
border-radius: 8px;
outline: 2px solid var(--color-primary);
}
lo-input .input-container {
box-sizing: border-box;
display: flex;
position: relative;
width: 100%;
}
lo-input .input-container:hover {
cursor: text;
}
lo-input input, lo-input textarea {
appearance: none;
-webkit-appearance: none;
border: 0;
border-radius: 8px;
padding: 30px 8px 3px 8px;
text-overflow: ellipsis;
white-space: pre-wrap;
width: calc(100% - 20px);
}
lo-input input::placeholder, lo-input textarea::placeholder {
color: transparent;
}
lo-input input:focus ~ label, lo-input input:focus-within ~ label, lo-input textarea:focus ~ label, lo-input textarea:focus-within ~ label {
background-color: transparent;
color: var(--color-neutral-darkest);
display: flex;
font-size: var(--font-size-small);
margin-left: 8px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
top: 13px;
transform: translateY(-8px);
}
lo-input input:focus::placeholder, lo-input input:focus-within::placeholder, lo-input textarea:focus::placeholder, lo-input textarea:focus-within::placeholder {
color: var(--color-neutral);
text-transform: lowercase;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
}
lo-input input:focus ~ lo-info, lo-input input:focus-within ~ lo-info, lo-input textarea:focus ~ lo-info, lo-input textarea:focus-within ~ lo-info {
align-items: flex-start;
position: relative;
top: 5px;
transform: none;
}
lo-input input:focus ~ lo-info .info-label, lo-input input:focus-within ~ lo-info .info-label, lo-input textarea:focus ~ lo-info .info-label, lo-input textarea:focus-within ~ lo-info .info-label {
bottom: -10px;
}
lo-input input:not(:placeholder-shown) ~ label, lo-input textarea:not(:placeholder-shown) ~ label {
background-color: transparent;
color: var(--color-neutral-darkest);
display: flex;
font-size: var(--font-size-small);
margin-left: 8px;
overflow: hidden;
text-wrap-mode: nowrap;
text-overflow: ellipsis;
top: 13px;
transform: translateY(-8px);
}
lo-input input:not(:placeholder-shown) ~ lo-button[variant=basic-icon].clear-button, lo-input textarea:not(:placeholder-shown) ~ lo-button[variant=basic-icon].clear-button {
bottom: 0;
display: grid !important;
}
lo-input input:not(:placeholder-shown) ~ lo-info, lo-input textarea:not(:placeholder-shown) ~ lo-info {
align-items: flex-start;
position: relative;
top: 5px;
transform: none;
}
lo-input input:not(:placeholder-shown) ~ lo-info .info-label, lo-input textarea:not(:placeholder-shown) ~ lo-info .info-label {
bottom: -10px;
}
lo-input textarea {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
background-color: #ffffff;
width: 100%;
}
lo-input textarea:focus, lo-input textarea:focus-within {
border-radius: 8px;
outline: 2px solid var(--color-primary);
}
lo-input textarea:focus::placeholder, lo-input textarea:focus-within::placeholder {
color: var(--color-neutral);
text-transform: lowercase;
text-overflow: unset;
white-space: unset;
}
lo-input label {
color: var(--color-neutral-darker);
display: flex;
margin-left: 8px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
width: calc(100% - 20px);
}
lo-input label:hover {
cursor: text;
}
lo-input.no-label input, lo-input.no-label textarea {
padding: 8px;
}
lo-input.no-label input:not(:placeholder-shown) ~ label, lo-input.no-label textarea:not(:placeholder-shown) ~ label {
display: none !important;
}
lo-input.no-label input:not(:placeholder-shown) ~ lo-button[variant=basic-icon].clear-button, lo-input.no-label textarea:not(:placeholder-shown) ~ lo-button[variant=basic-icon].clear-button {
bottom: 2px;
}
lo-input.no-label input:focus ~ label, lo-input.no-label input:focus-within ~ label, lo-input.no-label textarea:focus ~ label, lo-input.no-label textarea:focus-within ~ label {
display: none !important;
}
lo-input.no-label textarea {
overflow-y: hidden;
padding: 12px;
}
lo-input.no-label textarea:focus, lo-input.no-label textarea:focus-within {
overflow-y: auto;
}
lo-input.placeholder-only label {
display: none !important;
}
lo-input.placeholder-only input, lo-input.placeholder-only textarea {
padding: 8px;
}
lo-input.placeholder-only input::placeholder, lo-input.placeholder-only textarea::placeholder {
color: var(--color-neutral);
text-transform: lowercase;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
}
lo-input.placeholder-only input:not(:placeholder-shown) ~ label, lo-input.placeholder-only textarea:not(:placeholder-shown) ~ label {
display: none !important;
}
lo-input.placeholder-only textarea {
overflow-y: hidden;
padding: 12px;
}
lo-input.placeholder-only textarea:focus, lo-input.placeholder-only textarea:focus-within {
overflow-y: auto;
}
lo-input lo-info {
height: fit-content;
padding: 0;
right: 2px;
top: 50%;
transform: translate(0, -50%);
z-index: 100;
}
lo-input lo-info .info-label {
bottom: unset;
}
lo-input lo-button[variant=basic-icon].clear-button {
display: none !important;
padding: 0;
position: absolute;
right: 0;
}
lo-button[variant=basic], lo-button[variant=basic-icon] {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--color-neutral-light);
background-color: #ffffff;
color: var(--font-color);
display: flex;
justify-content: center;
line-height: 0;
transition: background 0.8s;
}
lo-button[variant=basic] button, lo-button[variant=basic-icon] button {
align-items: center;
appearance: none;
background: inherit;
border: 0;
border-radius: 8px;
color: inherit;
cursor: pointer;
display: inline-flex;
justify-content: center;
min-height: 32px;
min-width: 86px;
outline: 0;
padding: 5px 10px;
width: 100%;
}
lo-button[variant=basic] button[icon-position=icon-right], lo-button[variant=basic-icon] button[icon-position=icon-right] {
flex-direction: row-reverse;
}
lo-button[variant=basic] button[icon-position=icon-right] span, lo-button[variant=basic-icon] button[icon-position=icon-right] span {
margin-left: 5px;
margin-right: 5px;
}
lo-button[variant=basic] button.icon-only, lo-button[variant=basic-icon] button.icon-only {
background-color: transparent;
border: 1px solid transparent;
border-radius: 50%;
display: grid;
min-height: 0;
min-width: 0;
outline: none;
padding: 5px;
}
lo-button[variant=basic] button.icon-only:hover, lo-button[variant=basic] button.icon-only:focus, lo-button[variant=basic] button.icon-only:focus-within, lo-button[variant=basic-icon] button.icon-only:hover, lo-button[variant=basic-icon] button.icon-only:focus, lo-button[variant=basic-icon] button.icon-only:focus-within {
background-color: transparent;
}
lo-button[variant=basic] button.icon-only:hover span, lo-button[variant=basic] button.icon-only:focus span, lo-button[variant=basic] button.icon-only:focus-within span, lo-button[variant=basic-icon] button.icon-only:hover span, lo-button[variant=basic-icon] button.icon-only:focus span, lo-button[variant=basic-icon] button.icon-only:focus-within span {
background-color: var(--font-color);
}
lo-button[variant=basic] button.icon-only span, lo-button[variant=basic-icon] button.icon-only span {
display: inline-block;
margin-right: 0;
}
lo-button[variant=basic] button.icon-only:disabled:hover span, lo-button[variant=basic] button.icon-only[disabled]:hover span, lo-button[variant=basic-icon] button.icon-only:disabled:hover span, lo-button[variant=basic-icon] button.icon-only[disabled]:hover span {
background-color: var(--color-neutral);
}
lo-button[variant=basic]:hover, lo-button[variant=basic-icon]:hover {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--color-neutral);
background: var(--color-neutral-lightest) radial-gradient(circle, transparent 1%, var(--color-neutral-lightest) 1%) center/15000%;
color: var(--font-color);
cursor: pointer;
}
lo-button[variant=basic]:hover span, lo-button[variant=basic-icon]:hover span {
background-color: var(--font-color);
}
lo-button[variant=basic]:active, lo-button[variant=basic-icon]:active {
background-color: #ffffff;
background-size: 100%;
transition: background 0s;
}
lo-button[variant=basic]:focus, lo-button[variant=basic]:focus-within, lo-button[variant=basic-icon]:focus, lo-button[variant=basic-icon]:focus-within {
outline: 2px solid var(--color-primary);
}
lo-button[variant=basic]:disabled, lo-button[variant=basic][disabled], lo-button[variant=basic-icon]:disabled, lo-button[variant=basic-icon][disabled] {
background: var(--color-neutral-lightest);
border: 1px solid var(--color-neutral-dark);
color: var(--color-neutral-dark);
cursor: not-allowed;
box-shadow: none;
transition: none;
}
lo-button[variant=basic]:disabled button:hover, lo-button[variant=basic][disabled] button:hover, lo-button[variant=basic-icon]:disabled button:hover, lo-button[variant=basic-icon][disabled] button:hover {
cursor: not-allowed;
}
lo-button[variant=basic]:disabled span, lo-button[variant=basic][disabled] span, lo-button[variant=basic-icon]:disabled span, lo-button[variant=basic-icon][disabled] span {
background-color: var(--color-neutral);
}
lo-button[variant=basic]:disabled:hover, lo-button[variant=basic][disabled]:hover, lo-button[variant=basic-icon]:disabled:hover, lo-button[variant=basic-icon][disabled]:hover {
cursor: not-allowed;
}
lo-button[variant=basic][variant=link]:active, lo-button[variant=basic-icon][variant=link]:active {
background-color: transparent;
text-decoration: underline;
text-decoration-thickness: 1px;
}
lo-button[variant=basic][variant=link]:hover button.link, lo-button[variant=basic-icon][variant=link]:hover button.link {
color: var(--color-primary-light);
}
lo-button[variant=basic][variant=link] button.link, lo-button[variant=basic-icon][variant=link] button.link {
border: 0;
color: var(--color-primary);
padding: 0;
}
lo-button[variant=basic].icon-only, lo-button[variant=basic-icon].icon-only {
background-color: transparent;
border: 1px solid transparent;
border-radius: 50%;
display: grid;
min-height: 0;
min-width: 0;
outline: none;
padding: 5px;
}
lo-button[variant=basic].icon-only:hover, lo-button[variant=basic].icon-only:focus, lo-button[variant=basic].icon-only:focus-within, lo-button[variant=basic-icon].icon-only:hover, lo-button[variant=basic-icon].icon-only:focus, lo-button[variant=basic-icon].icon-only:focus-within {
background-color: transparent;
}
lo-button[variant=basic].icon-only:hover span, lo-button[variant=basic].icon-only:focus span, lo-button[variant=basic].icon-only:focus-within span, lo-button[variant=basic-icon].icon-only:hover span, lo-button[variant=basic-icon].icon-only:focus span, lo-button[variant=basic-icon].icon-only:focus-within span {
background-color: var(--color-neutral-darkest);
}
lo-button[variant=basic].icon-only span, lo-button[variant=basic-icon].icon-only span {
display: inline-block;
margin-right: 0;
}
lo-button[variant=basic].icon-only:disabled:hover span, lo-button[variant=basic].icon-only[disabled]:hover span, lo-button[variant=basic-icon].icon-only:disabled:hover span, lo-button[variant=basic-icon].icon-only[disabled]:hover span {
background-color: var(--color-neutral);
}
lo-button[variant=action], lo-button[variant=action-icon] {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--color-primary);
background-color: #ffffff;
color: var(--color-primary);
display: flex;
justify-content: center;
line-height: 0;
transition: background 0.8s;
}
lo-button[variant=action] button, lo-button[variant=action-icon] button {
align-items: center;
appearance: none;
background: inherit;
border: 0;
border-radius: 8px;
color: inherit;
cursor: pointer;
display: inline-flex;
justify-content: center;
min-height: 32px;
min-width: 86px;
outline: 0;
padding: 5px 10px;
width: 100%;
}
lo-button[variant=action] button[icon-position=icon-right], lo-button[variant=action-icon] button[icon-position=icon-right] {
flex-direction: row-reverse;
}
lo-button[variant=action] button[icon-position=icon-right] span, lo-button[variant=action-icon] button[icon-position=icon-right] span {
margin-left: 5px;
margin-right: 5px;
}
lo-button[variant=action] button.icon-only, lo-button[variant=action-icon] button.icon-only {
background-color: transparent;
border: 1px solid transparent;
border-radius: 50%;
display: grid;
min-height: 0;
min-width: 0;
outline: none;
padding: 5px;
}
lo-button[variant=action] button.icon-only:hover, lo-button[variant=action] button.icon-only:focus, lo-button[variant=action] button.icon-only:focus-within, lo-button[variant=action-icon] button.icon-only:hover, lo-button[variant=action-icon] button.icon-only:focus, lo-button[variant=action-icon] button.icon-only:focus-within {
background-color: transparent;
}
lo-button[variant=action] button.icon-only:hover span, lo-button[variant=action] button.icon-only:focus span, lo-button[variant=action] button.icon-only:focus-within span, lo-button[variant=action-icon] button.icon-only:hover span, lo-button[variant=action-icon] button.icon-only:focus span, lo-button[variant=action-icon] button.icon-only:focus-within span {
background-color: var(--font-color);
}
lo-button[variant=action] button.icon-only span, lo-button[variant=action-icon] button.icon-only span {
display: inline-block;
margin-right: 0;
}
lo-button[variant=action] button.icon-only:disabled:hover span, lo-button[variant=action] button.icon-only[disabled]:hover span, lo-button[variant=action-icon] button.icon-only:disabled:hover span, lo-button[variant=action-icon] button.icon-only[disabled]:hover span {
background-color: var(--color-neutral);
}
lo-button[variant=action]:hover, lo-button[variant=action-icon]:hover {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--color-primary);
background: var(--color-primary-light) radial-gradient(circle, transparent 1%, var(--color-primary-light) 1%) center/15000%;
color: var(--font-color-opposite);
cursor: pointer;
}
lo-button[variant=action]:hover span, lo-button[variant=action-icon]:hover span {
background-color: var(--font-color-opposite);
}
lo-button[variant=action]:active, lo-button[variant=action-icon]:active {
background-color: #ffffff;
background-size: 100%;
transition: background 0s;
}
lo-button[variant=action]:focus, lo-button[variant=action]:focus-within, lo-button[variant=action-icon]:focus, lo-button[variant=action-icon]:focus-within {
outline: 2px solid var(--color-primary);
}
lo-button[variant=action]:disabled, lo-button[variant=action][disabled], lo-button[variant=action-icon]:disabled, lo-button[variant=action-icon][disabled] {
background: var(--color-neutral-lightest);
border: 1px solid var(--color-neutral-dark);
color: var(--color-neutral-dark);
cursor: not-allowed;
box-shadow: none;
transition: none;
}
lo-button[variant=action]:disabled button:hover, lo-button[variant=action][disabled] button:hover, lo-button[variant=action-icon]:disabled button:hover, lo-button[variant=action-icon][disabled] button:hover {
cursor: not-allowed;
}
lo-button[variant=action]:disabled span, lo-button[variant=action][disabled] span, lo-button[variant=action-icon]:disabled span, lo-button[variant=action-icon][disabled] span {
background-color: var(--color-neutral);
}
lo-button[variant=action]:disabled:hover, lo-button[variant=action][disabled]:hover, lo-button[variant=action-icon]:disabled:hover, lo-button[variant=action-icon][disabled]:hover {
cursor: not-allowed;
}
lo-button[variant=action][variant=link]:active, lo-button[variant=action-icon][variant=link]:active {
background-color: transparent;
text-decoration: underline;
text-decoration-thickness: 1px;
}
lo-button[variant=action][variant=link]:hover button.link, lo-button[variant=action-icon][variant=link]:hover button.link {
color: var(--color-primary-light);
}
lo-button[variant=action][variant=link] button.link, lo-button[variant=action-icon][variant=link] button.link {
border: 0;
color: var(--color-primary);
padding: 0;
}
lo-button[variant=action].icon-only, lo-button[variant=action-icon].icon-only {
background-color: transparent;
border: 1px solid transparent;
border-radius: 50%;
display: grid;
min-height: 0;
min-width: 0;
outline: none;
padding: 5px;
}
lo-button[variant=action].icon-only:hover, lo-button[variant=action].icon-only:focus, lo-button[variant=action].icon-only:focus-within, lo-button[variant=action-icon].icon-only:hover, lo-button[variant=action-icon].icon-only:focus, lo-button[variant=action-icon].icon-only:focus-within {
background-color: transparent;
}
lo-button[variant=action].icon-only:hover span, lo-button[variant=action].icon-only:focus span, lo-button[variant=action].icon-only:focus-within span, lo-button[variant=action-icon].icon-only:hover span, lo-button[variant=action-icon].icon-only:focus span, lo-button[variant=action-icon].icon-only:focus-within span {
background-color: var(--color-primary-dark);
}
lo-button[variant=action].icon-only span, lo-button[variant=action-icon].icon-only span {
display: inline-block;
margin-right: 0;
}
lo-button[variant=action].icon-only:disabled:hover span, lo-button[variant=action].icon-only[disabled]:hover span, lo-button[variant=action-icon].icon-only:disabled:hover span, lo-button[variant=action-icon].icon-only[disabled]:hover span {
background-color: var(--color-neutral);
}
lo-button[variant=save], lo-button[variant=save-icon] {
--mainColor: var(--color-success);
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--color-success);
background-color: #ffffff;
color: var(--color-success);
display: flex;
justify-content: center;
line-height: 0;
transition: background 0.8s;
}
lo-button[variant=save] button, lo-button[variant=save-icon] button {
align-items: center;
appearance: none;
background: inherit;
border: 0;
border-radius: 8px;
color: inherit;
cursor: pointer;
display: inline-flex;
justify-content: center;
min-height: 32px;
min-width: 86px;
outline: 0;
padding: 5px 10px;
width: 100%;
}
lo-button[variant=save] button[icon-position=icon-right], lo-button[variant=save-icon] button[icon-position=icon-right] {
flex-direction: row-reverse;
}
lo-button[variant=save] button[icon-position=icon-right] span, lo-button[variant=save-icon] button[icon-position=icon-right] span {
margin-left: 5px;
margin-right: 5px;
}
lo-button[variant=save] button.icon-only, lo-button[variant=save-icon] button.icon-only {
background-color: transparent;
border: 1px solid transparent;
border-radius: 50%;
display: grid;
min-height: 0;
min-width: 0;
outline: none;
padding: 5px;
}
lo-button[variant=save] button.icon-only:hover, lo-button[variant=save] button.icon-only:focus, lo-button[variant=save] button.icon-only:focus-within, lo-button[variant=save-icon] button.icon-only:hover, lo-button[variant=save-icon] button.icon-only:focus, lo-button[variant=save-icon] button.icon-only:focus-within {
background-color: transparent;
}
lo-button[variant=save] button.icon-only:hover span, lo-button[variant=save] button.icon-only:focus span, lo-button[variant=save] button.icon-only:focus-within span, lo-button[variant=save-icon] button.icon-only:hover span, lo-button[variant=save-icon] button.icon-only:focus span, lo-button[variant=save-icon] button.icon-only:focus-within span {
background-color: var(--font-color);
}
lo-button[variant=save] button.icon-only span, lo-button[variant=save-icon] button.icon-only span {
display: inline-block;
margin-right: 0;
}
lo-button[variant=save] button.icon-only:disabled:hover span, lo-button[variant=save] button.icon-only[disabled]:hover span, lo-button[variant=save-icon] button.icon-only:disabled:hover span, lo-button[variant=save-icon] button.icon-only[disabled]:hover span {
background-color: var(--color-neutral);
}
lo-button[variant=save]:hover, lo-button[variant=save-icon]:hover {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--color-success);
background: var(--color-success-light) radial-gradient(circle, transparent 1%, var(--color-success-light) 1%) center/15000%;
color: var(--font-color-opposite);
cursor: pointer;
}
lo-button[variant=save]:hover span, lo-button[variant=save-icon]:hover span {
background-color: var(--font-color-opposite);
}
lo-button[variant=save]:active, lo-button[variant=save-icon]:active {
background-color: #ffffff;
background-size: 100%;
transition: background 0s;
}
lo-button[variant=save]:focus, lo-button[variant=save]:focus-within, lo-button[variant=save-icon]:focus, lo-button[variant=save-icon]:focus-within {
outline: 2px solid var(--color-success);
}
lo-button[variant=save]:disabled, lo-button[variant=save][disabled], lo-button[variant=save-icon]:disabled, lo-button[variant=save-icon][disabled] {
background: var(--color-neutral-lightest);
border: 1px solid var(--color-neutral-dark);
color: var(--color-neutral-dark);
cursor: not-allowed;
box-shadow: none;
transition: none;
}
lo-button[variant=save]:disabled button:hover, lo-button[variant=save][disabled] button:hover, lo-button[variant=save-icon]:disabled button:hover, lo-button[variant=save-icon][disabled] button:hover {
cursor: not-allowed;
}
lo-button[variant=save]:disabled span, lo-button[variant=save][disabled] span, lo-button[variant=save-icon]:disabled span, lo-button[variant=save-icon][disabled] span {
background-color: var(--color-neutral);
}
lo-button[variant=save]:disabled:hover, lo-button[variant=save][disabled]:hover, lo-button[variant=save-icon]:disabled:hover, lo-button[variant=save-icon][disabled]:hover {
cursor: not-allowed;
}
lo-button[variant=save][variant=link]:active, lo-button[variant=save-icon][variant=link]:active {
background-color: transparent;
text-decoration: underline;
text-decoration-thickness: 1px;
}
lo-button[variant=save][variant=link]:hover button.link, lo-button[variant=save-icon][variant=link]:hover button.link {
color: var(--color-primary-light);
}
lo-button[variant=save][variant=link] button.link, lo-button[variant=save-icon][variant=link] button.link {
border: 0;
color: var(--color-primary);
padding: 0;
}
lo-button[variant=save].icon-only, lo-button[variant=save-icon].icon-only {
background-color: transparent;
border: 1px solid transparent;
border-radius: 50%;
display: grid;
min-height: 0;
min-width: 0;
outline: none;
padding: 5px;
}
lo-button[variant=save].icon-only:hover, lo-button[variant=save].icon-only:focus, lo-button[variant=save].icon-only:focus-within, lo-button[variant=save-icon].icon-only:hover, lo-button[variant=save-icon].icon-only:focus, lo-button[variant=save-icon].icon-only:focus-within {
background-color: transparent;
}
lo-button[variant=save].icon-only:hover span, lo-button[variant=save].icon-only:focus span, lo-button[variant=save].icon-only:focus-within span, lo-button[variant=save-icon].icon-only:hover span, lo-button[variant=save-icon].icon-only:focus span, lo-button[variant=save-icon].icon-only:focus-within span {
background-color: var(--color-success-dark);
}
lo-button[variant=save].icon-only span, lo-button[variant=save-icon].icon-only span {
display: inline-block;
margin-right: 0;
}
lo-button[variant=save].icon-only:disabled:hover span, lo-button[variant=save].icon-only[disabled]:hover span, lo-button[variant=save-icon].icon-only:disabled:hover span, lo-button[variant=save-icon].icon-only[disabled]:hover span {
background-color: var(--color-neutral);
}
lo-button[variant=danger], lo-button[variant=danger-icon] {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--color-danger);
background-color: #ffffff;
color: var(--color-danger);
display: flex;
justify-content: center;
line-height: 0;
transition: background 0.8s;
}
lo-button[variant=danger] button, lo-button[variant=danger-icon] button {
align-items: center;
appearance: none;
background: inherit;
border: 0;
border-radius: 8px;
color: inherit;
cursor: pointer;
display: inline-flex;
justify-content: center;
min-height: 32px;
min-width: 86px;
outline: 0;
padding: 5px 10px;
width: 100%;
}
lo-button[variant=danger] button[icon-position=icon-right], lo-button[variant=danger-icon] button[icon-position=icon-right] {
flex-direction: row-reverse;
}
lo-button[variant=danger] button[icon-position=icon-right] span, lo-button[variant=danger-icon] button[icon-position=icon-right] span {
margin-left: 5px;
margin-right: 5px;
}
lo-button[variant=danger] button.icon-only, lo-button[variant=danger-icon] button.icon-only {
background-color: transparent;
border: 1px solid transparent;
border-radius: 50%;
display: grid;
min-height: 0;
min-width: 0;
outline: none;
padding: 5px;
}
lo-button[variant=danger] button.icon-only:hover, lo-button[variant=danger] button.icon-only:focus, lo-button[variant=danger] button.icon-only:focus-within, lo-button[variant=danger-icon] button.icon-only:hover, lo-button[variant=danger-icon] button.icon-only:focus, lo-button[variant=danger-icon] button.icon-only:focus-within {
background-color: transparent;
}
lo-button[variant=danger] button.icon-only:hover span, lo-button[variant=danger] button.icon-only:focus span, lo-button[variant=danger] button.icon-only:focus-within span, lo-button[variant=danger-icon] button.icon-only:hover span, lo-button[variant=danger-icon] button.icon-only:focus span, lo-button[variant=danger-icon] button.icon-only:focus-within span {
background-color: var(--font-color);
}
lo-button[variant=danger] button.icon-only span, lo-button[variant=danger-icon] button.icon-only span {
display: inline-block;
margin-right: 0;
}
lo-button[variant=danger] button.icon-only:disabled:hover span, lo-button[variant=danger] button.icon-only[disabled]:hover span, lo-button[variant=danger-icon] button.icon-only:disabled:hover span, lo-button[variant=danger-icon] button.icon-only[disabled]:hover span {
background-color: var(--color-neutral);
}
lo-button[variant=danger]:hover, lo-button[variant=danger-icon]:hover {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--color-danger);
background: var(--color-danger-light) radial-gradient(circle, transparent 1%, var(--color-danger-light) 1%) center/15000%;
color: var(--font-color-opposite);
cursor: pointer;
}
lo-button[variant=danger]:hover span, lo-button[variant=danger-icon]:hover span {
background-color: var(--font-color-opposite);
}
lo-button[variant=danger]:active, lo-button[variant=danger-icon]:active {
background-color: #ffffff;
background-size: 100%;
transition: background 0s;
}
lo-button[variant=danger]:focus, lo-button[variant=danger]:focus-within, lo-button[variant=danger-icon]:focus, lo-button[variant=danger-icon]:focus-within {
outline: 2px solid var(--color-danger);
}
lo-button[variant=danger]:disabled, lo-button[variant=danger][disabled], lo-button[variant=danger-icon]:disabled, lo-button[variant=danger-icon][disabled] {
background: var(--color-neutral-lightest);
border: 1px solid var(--color-neutral-dark);
color: var(--color-neutral-dark);
cursor: not-allowed;
box-shadow: none;
transition: none;
}
lo-button[variant=danger]:disabled button:hover, lo-button[variant=danger][disabled] button:hover, lo-button[variant=danger-icon]:disabled button:hover, lo-button[variant=danger-icon][disabled] button:hover {
cursor: not-allowed;
}
lo-button[variant=danger]:disabled span, lo-button[variant=danger][disabled] span, lo-button[variant=danger-icon]:disabled span, lo-button[variant=danger-icon][disabled] span {
background-color: var(--color-neutral);
}
lo-button[variant=danger]:disabled:hover, lo-button[variant=danger][disabled]:hover, lo-button[variant=danger-icon]:disabled:hover, lo-button[variant=danger-icon][disabled]:hover {
cursor: not-allowed;
}
lo-button[variant=danger][variant=link]:active, lo-button[variant=danger-icon][variant=link]:active {
background-color: transparent;
text-decoration: underline;
text-decoration-thickness: 1px;
}
lo-button[variant=danger][variant=link]:hover button.link, lo-button[variant=danger-icon][variant=link]:hover button.link {
color: var(--color-primary-light);
}
lo-button[variant=danger][variant=link] button.link, lo-button[variant=danger-icon][variant=link] button.link {
border: 0;
color: var(--color-primary);
padding: 0;
}
lo-button[variant=danger].icon-only, lo-button[variant=danger-icon].icon-only {
background-color: transparent;
border: 1px solid transparent;
border-radius: 50%;
display: grid;
min-height: 0;
min-width: 0;
outline: none;
padding: 5px;
}
lo-button[variant=danger].icon-only:hover, lo-button[variant=danger].icon-only:focus, lo-button[variant=danger].icon-only:focus-within, lo-button[variant=danger-icon].icon-only:hover, lo-button[variant=danger-icon].icon-only:focus, lo-button[variant=danger-icon].icon-only:focus-within {
background-color: transparent;
}
lo-button[variant=danger].icon-only:hover span, lo-button[variant=danger].icon-only:focus span, lo-button[variant=danger].icon-only:focus-within span, lo-button[variant=danger-icon].icon-only:hover span, lo-button[variant=danger-icon].icon-only:focus span, lo-button[variant=danger-icon].icon-only:focus-within span {
background-color: var(--color-danger-dark);
}
lo-button[variant=danger].icon-only span, lo-button[variant=danger-icon].icon-only span {
display: inline-block;
margin-right: 0;
}
lo-button[variant=danger].icon-only:disabled:hover span, lo-button[variant=danger].icon-only[disabled]:hover span, lo-button[variant=danger-icon].icon-only:disabled:hover span, lo-button[variant=danger-icon].icon-only[disabled]:hover span {
background-color: var(--color-neutral);
}
lo-button[variant=cancel] {
border-radius: 8px 8px 8px 8px;
border: 1px solid transparent;
background-color: transparent;
color: var(--color-danger);
display: flex;
justify-content: center;
line-height: 0;
transition: background 0.8s;
}
lo-button[variant=cancel] button {
align-items: center;
appearance: none;
background: inherit;
border: 0;
border-radius: 8px;
color: inherit;
cursor: pointer;
display: inline-flex;
justify-content: center;
min-height: 32px;
min-width: 86px;
outline: 0;
padding: 5px 10px;
width: 100%;
}
lo-button[variant=cancel] button[icon-position=icon-right] {
flex-direction: row-reverse;
}
lo-button[variant=cancel] button[icon-position=icon-right] span {
margin-left: 5px;
margin-right: 5px;
}
lo-button[variant=cancel] button.icon-only {
background-color: transparent;
border: 1px solid transparent;
border-radius: 50%;
display: grid;
min-height: 0;
min-width: 0;
outline: none;
padding: 5px;
}
lo-button[variant=cancel] button.icon-only:hover, lo-button[variant=cancel] button.icon-only:focus, lo-button[variant=cancel] button.icon-only:focus-within {
background-color: transparent;
}
lo-button[variant=cancel] button.icon-only:hover span, lo-button[variant=cancel] button.icon-only:focus span, lo-button[variant=cancel] button.icon-only:focus-within span {
background-color: var(--font-color);
}
lo-button[variant=cancel] button.icon-only span {
display: inline-block;
margin-right: 0;
}
lo-button[variant=cancel] button.icon-only:disabled:hover span, lo-button[variant=cancel] button.icon-only[disabled]:hover span {
background-color: var(--color-neutral);
}
lo-button[variant=cancel]:hover {
border-radius: 8px 8px 8px 8px;
border: 1px solid transparent;
background: transparent radial-gradient(circle, transparent 1%, transparent 1%) center/15000%;
color: var(--color-danger);
cursor: pointer;
}
lo-button[variant=cancel]:hover span {
background-color: var(--color-danger);
}
lo-button[variant=cancel]:active {
background-color: var(--color-neutral-lightest);
background-size: 100%;
transition: background 0s;
}
lo-button[variant=cancel]:focus, lo-button[variant=cancel]:focus-within {
outline: 2px solid var(--color-danger);
}
lo-button[variant=cancel]:disabled, lo-button[variant=cancel][disabled] {
background: var(--color-neutral-lightest);
border: 1px solid var(--color-neutral-dark);
color: var(--color-neutral-dark);
cursor: not-allowed;
box-shadow: none;
transition: none;
}
lo-button[variant=cancel]:disabled button:hover, lo-button[variant=cancel][disabled] button:hover {
cursor: not-allowed;
}
lo-button[variant=cancel]:disabled span, lo-button[variant=cancel][disabled] span {
background-color: var(--color-neutral);
}
lo-button[variant=cancel]:disabled:hover, lo-button[variant=cancel][disabled]:hover {
cursor: not-allowed;
}
lo-button[variant=cancel][variant=link]:active {
background-color: transparent;
text-decoration: underline;
text-decoration-thickness: 1px;
}
lo-button[variant=cancel][variant=link]:hover button.link {
color: var(--color-primary-light);
}
lo-button[variant=cancel][variant=link] button.link {
border: 0;
color: var(--color-primary);
padding: 0;
}
lo-button[variant=link] {
border-radius: 8px 8px 8px 8px;
border: 1px solid transparent;
background-color: transparent;
color: var(--color-primary);
display: flex;
justify-content: center;
line-height: 0;
transition: background 0.8s;
}
lo-button[variant=link] button {
align-items: center;
appearance: none;
background: inherit;
border: 0;
border-radius: 8px;
color: inherit;
cursor: pointer;
display: inline-flex;
justify-content: center;
min-height: 32px;
min-width: 86px;
outline: 0;
padding: 5px 10px;
width: 100%;
}
lo-button[variant=link] button[icon-position=icon-right] {
flex-direction: row-reverse;
}
lo-button[variant=link] button[icon-position=icon-right] span {
margin-left: 5px;
margin-right: 5px;
}
lo-button[variant=link] button.icon-only {
background-color: transparent;
border: 1px solid transparent;
border-radius: 50%;
display: grid;
min-height: 0;
min-width: 0;
outline: none;
padding: 5px;
}
lo-button[variant=link] button.icon-only:hover, lo-button[variant=link] button.icon-only:focus, lo-button[variant=link] button.icon-only:focus-within {
background-color: transparent;
}
lo-button[variant=link] button.icon-only:hover span, lo-button[variant=link] button.icon-only:focus span, lo-button[variant=link] button.icon-only:focus-within span {
background-color: var(--font-color);
}
lo-button[variant=link] button.icon-only span {
display: inline-block;
margin-right: 0;
}
lo-button[variant=link] button.icon-only:disabled:hover span, lo-button[variant=link] button.icon-only[disabled]:hover span {
background-color: var(--color-neutral);
}
lo-button[variant=link]:hover {
border-radius: 8px 8px 8px 8px;
border: 1px solid transparent;
background: transparent radial-gradient(circle, transparent 1%, transparent 1%) center/15000%;
color: var(--color-primary);
cursor: pointer;
}
lo-button[variant=link]:hover span {
background-color: var(--color-primary);
}
lo-button[variant=link]:active {
background-color: var(--color-primary-soft);
background-size: 100%;
transition: background 0s;
}
lo-button[variant=link]:disabled, lo-button[variant=link][disabled] {
background: var(--color-neutral-lightest);
border: 1px solid var(--color-neutral-dark);
color: var(--color-neutral-dark);
cursor: not-allowed;
box-shadow: none;
transition: none;
}
lo-button[variant=link]:disabled button:hover, lo-button[variant=link][disabled] button:hover {
cursor: not-allowed;
}
lo-button[variant=link]:disabled span, lo-button[variant=link][disabled] span {
background-color: var(--color-neutral);
}
lo-button[variant=link]:disabled:hover, lo-button[variant=link][disabled]:hover {
cursor: not-allowed;
}
lo-button[variant=link][variant=link]:active {
background-color: transparent;
text-decoration: underline;
text-decoration-thickness: 1px;
}
lo-button[variant=link][variant=link]:hover button.link {
color: var(--color-primary-light);
}
lo-button[variant=link][variant=link] button.link {
border: 0;
color: var(--color-primary);
padding: 0;
}
lo-button[variant=link]:hover {
color: var(--color-primary-light);
}
lo-button[variant=text] {
border-radius: 8px 8px 8px 8px;
border: 1px solid transparent;
background-color: transparent;
color: var(--font-color);
display: flex;
justify-content: center;
line-height: 0;
transition: background 0.8s;
}
lo-button[variant=text] button {
align-items: center;
appearance: none;
background: inherit;
border: 0;
border-radius: 8px;
color: inherit;
cursor: pointer;
display: inline-flex;
justify-content: center;
min-height: 32px;
min-width: 86px;
outline: 0;
padding: 5px 10px;
width: 100%;
}
lo-button[variant=text] button[icon-position=icon-right] {
flex-direction: row-reverse;
}
lo-button[variant=text] button[icon-position=icon-right] span {
margin-left: 5px;
margin-right: 5px;
}
lo-button[variant=text] button.icon-only {
background-color: transparent;
border: 1px solid transparent;
border-radius: 50%;
display: grid;
min-height: 0;
min-width: 0;
outline: none;
padding: 5px;
}
lo-button[variant=text] button.icon-only:hover, lo-button[variant=text] button.icon-only:focus, lo-button[variant=text] button.icon-only:focus-within {
background-color: transparent;
}
lo-button[variant=text] button.icon-only:hover span, lo-button[variant=text] button.icon-only:focus span, lo-button[variant=text] button.icon-only:focus-within span {
background-color: var(--font-color);
}
lo-button[variant=text] button.icon-only span {
display: inline-block;
margin-right: 0;
}
lo-button[variant=text] button.icon-only:disabled:hover span, lo-button[variant=text] button.icon-only[disabled]:hover span {
background-color: var(--color-neutral);
}
lo-button[variant=text]:hover {
border-radius: 8px 8px 8px 8px;
border: 1px solid transparent;
background: transparent radial-gradient(circle, transparent 1%, transparent 1%) center/15000%;
color: var(--font-color);
cursor: pointer;
}
lo-button[variant=text]:hover span {
background-color: var(--font-color);
}
lo-button[variant=text]:active {
background-color: var(--font-color);
background-size: 100%;
transition: background 0s;
}
lo-button[variant=text]:disabled, lo-button[variant=text][disabled] {
background: var(--color-neutral-lightest);
border: 1px solid var(--color-neutral-dark);
color: var(--color-neutral-dark);
cursor: not-allowed;
box-shadow: none;
transition: none;
}
lo-button[variant=text]:disabled button:hover, lo-button[variant=text][disabled] button:hover {
cursor: not-allowed;
}
lo-button[variant=text]:disabled span, lo-button[variant=text][disabled] span {
background-color: var(--color-neutral);
}
lo-button[variant=text]:disabled:hover, lo-button[variant=text][disabled]:hover {
cursor: not-allowed;
}
lo-button[variant=text][variant=link]:active {
background-color: transparent;
text-decoration: underline;
text-decoration-thickness: 1px;
}
lo-button[variant=text][variant=link]:hover button.link {
color: var(--color-primary-light);
}
lo-button[variant=text][variant=link] button.link {
border: 0;
color: var(--color-primary);
padding: 0;
}
lo-button {
display: flex;
align-items: center;
align-self: center;
height: fit-content;
}
lo-button[tooltip] {
position: relative;
}
lo-button[tooltip] lo-tooltip span {
color: var(--color-neutral-darkest);
background-color: #ffffff !important;
}
lo-dropdown {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
background-color: #ffffff;
display: flex;
min-height: 30px;
position: relative;
width: 100%;
}
lo-dropdown:focus, lo-dropdown:focus-within {
outline: 2px solid var(--color-primary);
}
lo-dropdown:focus label, lo-dropdown:focus-within label {
background-color: transparent;
color: var(--color-neutral-darkest);
display: flex;
font-size: var(--font-size-small);
margin-left: 8px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
top: 13px;
transform: translateY(-8px);
}
lo-dropdown:focus div[input][placeholder]:empty:before, lo-dropdown:focus-within div[input][placeholder]:empty:before {
color: var(--color-neutral);
content: attr(placeholder);
text-transform: lowercase;
}
lo-dropdown:hover {
cursor: pointer;
}
lo-dropdown label:hover, lo-dropdown div[input]:hover {
cursor: pointer;
}
lo-dropdown.not-empty label {
background-color: transparent;
color: var(--color-neutral-darkest);
display: flex;
font-size: var(--font-size-small);
margin-left: 8px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
top: 13px;
transform: translateY(-8px);
}
lo-dropdown.no-label div[input] {
align-items: center;
padding: 8px;
}
lo-dropdown.no-label div[input][placeholder]:empty:before {
color: transparent;
content: attr(placeholder);
text-transform: lowercase;
}
lo-dropdown.no-label:focus div[input][placeholder]:empty:before, lo-dropdown.no-label:focus-within div[input][placeholder]:empty:before {
color: var(--color-neutral);
content: attr(placeholder);
text-transform: lowercase;
}
lo-dropdown.no-label:focus label, lo-dropdown.no-label:focus-within label {
display: none !important;
}
lo-dropdown.placeholder-only label {
display: none !important;
}
lo-dropdown.placeholder-only div[input] {
padding: 8px;
}
lo-dropdown.placeholder-only div[input][placeholder]:empty:before {
color: var(--color-neutral);
content: attr(placeholder);
text-transform: lowercase;
}
lo-dropdown.not-empty.no-label label {
display: none !important;
}
lo-dropdown label {
color: var(--color-neutral-darker);
margin-left: 8px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
width: calc(100% - 20px);
}
lo-dropdown label:hover {
cursor: pointer;
}
lo-dropdown .input-container {
box-sizing: border-box;
display: flex;
position: relative;
width: 100%;
}
lo-dropdown .input-container::after {
background-color: var(--color-primary);
bottom: 10px;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
content: " ";
display: block;
flex-shrink: 0;
height: 7px;
position: absolute;
right: 5px;
width: 10px;
position: relative;
bottom: -25px;
right: 10px;
top: 50%;
transform: translate(0, -50%);
}
lo-dropdown .input-container[no-arrow]::after {
display: none;
}
lo-dropdown .input-container.open::after {
clip-path: polygon(50% 0%, 100% 100%, 50% 100%, 0% 100%);
}
lo-dropdown[disabled] {
background-color: var(--color-neutral-lighter);
cursor: not-allowed;
}
lo-dropdown[disabled] label {
color: var(--color-neutral-dark);
}
lo-dropdown[disabled] label:hover {
cursor: not-allowed;
}
lo-dropdown[disabled] div[input] {
background-color: var(--color-neutral-lighter);
text-align: center;
}
lo-dropdown[disabled] div[input]:hover {
cursor: not-allowed;
}
lo-dropdown[disabled] div[input]::after {
display: none;
}
lo-dropdown[disabled] .input-container::after {
display: none;
}
lo-dropdown div[input] {
align-items: flex-end;
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
display: flex;
padding: 30px 8px 3px 8px;
text-overflow: ellipsis;
white-space: pre-wrap;
width: 100%;
}
lo-dropdown div[input][placeholder]:empty:before {
color: transparent;
content: attr(placeholder);
text-transform: lowercase;
}
lo-dropdown[variant=button], lo-dropdown[variant=button-basic] {
background-color: transparent;
border: 0;
justify-content: center;
padding: 0;
}
lo-dropdown[variant=button].left-align, lo-dropdown[variant=button-basic].left-align {
justify-content: flex-start;
}
lo-dropdown[variant=button].button-shrink, lo-dropdown[variant=button-basic].button-shrink {
flex-basis: fit-content;
}
lo-dropdown[variant=button]:focus, lo-dropdown[variant=button]:focus-within, lo-dropdown[variant=button-basic]:focus, lo-dropdown[variant=button-basic]:focus-within {
box-shadow: none;
outline: 0;
}
lo-dropdown[variant=button] lo-button, lo-dropdown[variant=button-basic] lo-button {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
background-color: #ffffff;
display: flex;
text-align: center;
width: fit-content;
}
lo-dropdown lo-info {
height: fit-content;
padding: 0;
right: 5px;
top: 50%;
transform: translate(0, -50%);
z-index: 100;
}
lo-dropdown lo-info .info-label {
bottom: unset;
}
lo-dropdown:focus, lo-dropdown:focus-within, lo-dropdown:focus-visible, lo-dropdown:active {
outline: 2px solid var(--color-primary);
}
lo-dropdown:focus [dropopen-container], lo-dropdown:focus-within [dropopen-container], lo-dropdown:focus-visible [dropopen-container], lo-dropdown:active [dropopen-container] {
display: block;
}
lo-dropdown[disabled]:focus, lo-dropdown[disabled]:focus-within, lo-dropdown[disabled]:focus-visible, lo-dropdown[disabled]:active {
box-shadow: none;
outline: 0;
}
lo-dropdown[disabled] [dropopen-container] {
display: none;
}
lo-dropdown:hover {
cursor: pointer;
}
lo-dropdown:hover[disabled] {
cursor: not-allowed;
}
lo-dropdown [dropopen-container], lo-dropdown [select-dropopen-container] {
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: 0 0 8px 8px;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.25);
cursor: default;
display: none;
left: 0;
list-style: none;
min-width: 150px;
max-height: 300px;
overflow: auto;
padding: 0;
position: absolute;
top: calc(100% - 0px);
z-index: 2;
}
lo-dropdown [dropopen-container] ul, lo-dropdown [select-dropopen-container] ul {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0;
padding: 0;
}
lo-dropdown .opened[select-dropopen-container] {
display: block;
}
lo-dropdown.list-up [dropopen-container], lo-dropdown.list-up [select-dropopen-container] {
border-radius: 8px 8px 0 0;
top: unset;
bottom: 100%;
}
lo-dropdown.list-left [dropopen-container], lo-dropdown.list-left [select-dropopen-container] {
border-radius: 8px 0 8px 8px;
right: 0;
}
lo-dropdown [select-dropopen-container] {
width: 100%;
}
lo-dropdown div[input][dropdown-filter] {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
box-sizing: border-box;
margin: 8px 8px 0 8px;
padding: 5px 28px;
width: calc(100% - 16px);
--svg: url('data:image/svg+xml, ');
background-image: var(--svg);
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: 3px 50%;
}
lo-dropdown [dropopen-container][tree] {
height: 300px;
}
lo-dropdown .filter-container {
background-color: #ffffff;
border-bottom: 1px solid var(--color-neutral);
padding-bottom: 8px;
position: sticky;
top: 0;
z-index: 2;
position: relative;
}
lo-dropdown .filter-container:focus-within lo-button[icon=clear] {
display: block;
}
lo-dropdown .filter-container lo-button[icon=clear] {
display: none;
padding: 0;
position: absolute;
right: 12px;
top: 50%;
transform: translate(0, -69%);
}
lo-dropdown .filter-container lo-button[icon=clear]:hover {
cursor: pointer;
}
lo-dropdown .filter-container lo-button[icon=clear] button:focus {
outline: 2px solid var(--color-primary);
}
lo-dropdown .filter-container div[input]:not([textContent=""]) ~ lo-button[icon=clear] {
display: block;
}
lo-dropdown .no-results {
background: rgb(172, 215, 254);
background: rgba(172, 215, 254, 0.3);
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
box-sizing: border-box;
display: flex;
font-size: var(--font-size-small);
gap: 10px;
justify-content: space-between;
margin: 5px;
padding: 5px;
width: calc(100% - 10px);
}
lo-dropdown .no-results .no-results-add {
color: var(--color-primary);
}
lo-dropdown .no-results .no-results-add:focus-visible {
border: 0;
font-weight: bold;
outline: none;
}
lo-dropdown .no-results .no-results-add-text {
font-weight: bold;
margin-left: auto;
text-decoration: underline;
}
lo-dropdown .pill-container {
background-color: #ffffff;
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;
padding: 0 5px 5px 5px;
position: sticky;
top: 0;
z-index: 1;
}
lo-dropdown .option {
align-items: center;
display: flex;
justify-content: center;
margin: 0 1px 0 2px;
}
lo-dropdown .option span.icon {
margin-left: 5px;
}
lo-dropdown .option lo-image {
align-items: center;
display: flex;
justify-content: center;
margin: 5px 5px 5px 0;
}
lo-dropdown .option:hover {
background-color: var(--color-primary-soft);
border-radius: 8px;
outline: 0;
}
lo-dropdown .option:focus, lo-dropdown .option:focus-within {
outline: 2px solid var(--color-primary);
border-radius: 8px;
}
lo-dropdown .option:first-of-type {
margin-top: 2px;
}
lo-dropdown .option:last-of-type {
margin-bottom: 2px;
}
lo-dropdown lo-checkbox {
margin: 2px 5px;
width: calc(100% - 10px);
}
lo-dropdown lo-checkbox div[checkbox] {
visibility: hidden;
}
lo-dropdown lo-checkbox div[checkbox][checked=true] {
visibility: visible;
}
lo-dropdown lo-checkbox div[checkbox][value=default][checked=true] {
visibility: hidden;
}
lo-dropdown lo-checkbox label {
width: 100%;
}
lo-dropdown lo-checkbox[value=default] {
color: var(--color-neutral);
margin-top: 3px;
text-align: center;
width: calc(100% - 10px);
}
lo-dropdown lo-tree {
border: 0;
margin: 5px 0;
padding: 0;
}
lo-dropdown lo-tree:focus {
outline: 2px solid var(--color-primary);
}
lo-dropdown lo-tree:focus-within {
outline: 0;
}
lo-dropdown lo-tree .level {
margin: 0 0 0 9px;
}
lo-dropdown lo-tree lo-checkbox {
margin-top: 2px;
margin-bottom: 2px;
padding: 0;
}
lo-dropdown lo-tree lo-checkbox div[checkbox] {
visibility: visible;
}
lo-dropdown lo-tree lo-checkbox:focus, lo-dropdown lo-tree lo-checkbox:focus-within {
outline: 2px solid var(--color-primary);
border-radius: 8px;
}
lo-dropdown div[multiselect] .icon {
margin: 0 0 0 6px;
}
lo-dropdown div[multiselect] .icon + lo-checkbox[hidebox=true] {
margin: 5px 5px 5px 0;
width: calc(100% - 31px);
}
lo-dropdown div[multiselect] .icon + lo-checkbox {
margin: 5px 5px 5px 10px;
width: calc(100% - 37px);
}
lo-dropdown div[multiselect] lo-image {
margin: 0 10px 0 5px;
}
lo-dropdown div[multiselect] lo-image img {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
}
lo-dropdown div[multiselect][multiselect] lo-checkbox.selected {
background-color: transparent;
color: var(--font-color);
}
lo-dropdown div[multiselect][multiselect] lo-checkbox.selected:hover {
background-color: var(--color-primary-soft);
}
lo-datepicker {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
background-color: #ffffff;
display: flex;
position: relative;
width: 100%;
}
lo-datepicker:focus, lo-datepicker:focus-within {
outline: 2px solid var(--color-primary);
}
lo-datepicker:focus label, lo-datepicker:focus-within label {
background-color: transparent;
color: var(--color-neutral-darkest);
display: block;
font-size: var(--font-size-small);
margin-left: 8px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
top: 13px;
transform: translateY(-8px);
}
lo-datepicker:focus input::placeholder, lo-datepicker:focus-within input::placeholder {
color: var(--color-neutral);
text-transform: lowercase;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
}
lo-datepicker:hover, lo-datepicker label {
cursor: pointer;
}
lo-datepicker input {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
padding: 30px 8px 3px 8px;
text-overflow: ellipsis;
white-space: pre-wrap;
width: calc(100% - 35px);
}
lo-datepicker input::placeholder {
color: transparent;
}
lo-datepicker input:focus ~ label, lo-datepicker input:focus-within ~ label {
background-color: transparent;
color: var(--color-neutral-darkest);
display: block;
font-size: var(--font-size-small);
margin-left: 8px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
top: 13px;
transform: translateY(-8px);
}
lo-datepicker input:focus::placeholder, lo-datepicker input:focus-within::placeholder {
color: var(--color-neutral);
text-transform: lowercase;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
}
lo-datepicker input:not(:placeholder-shown) ~ label {
background-color: transparent;
color: var(--color-neutral-darkest);
display: block;
font-size: var(--font-size-small);
margin-left: 8px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
top: 13px;
transform: translateY(-8px);
}
lo-datepicker input:not(:placeholder-shown) ~ lo-button[variant=basic-icon].clear-button {
bottom: 0;
display: grid !important;
}
lo-datepicker input:not(:placeholder-shown) ~ lo-button[variant=basic-icon].clear-button button {
padding: 5px 5px 2px 5px;
}
lo-datepicker label {
color: var(--color-neutral-darker);
margin-left: 8px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
width: calc(100% - 20px);
}
lo-datepicker label:hover {
cursor: text;
}
lo-datepicker label lo-info {
padding: 0 0 0 10px;
}
lo-datepicker label lo-info .icon-info {
height: 12px;
width: 12px;
}
lo-datepicker label lo-info .info-label {
bottom: -50%;
left: 75%;
}
lo-datepicker.no-label input {
padding: 8px;
}
lo-datepicker.no-label input:not(:placeholder-shown) ~ label {
display: none !important;
}
lo-datepicker.no-label input:focus ~ label, lo-datepicker.no-label input:focus-within ~ label {
display: none !important;
}
lo-datepicker.no-label lo-button[variant=action-icon].icon-only.datepicker-open {
bottom: unset;
}
lo-datepicker.no-label lo-button[variant=action-icon].icon-only.datepicker-open button {
padding: 5px;
}
lo-datepicker.placeholder-only label {
display: none !important;
}
lo-datepicker.placeholder-only input {
padding: 8px;
}
lo-datepicker.placeholder-only input::placeholder {
color: var(--color-neutral);
text-transform: lowercase;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
}
lo-datepicker.placeholder-only input:not(:placeholder-shown) ~ label {
display: none !important;
}
lo-datepicker.placeholder-only input:not(:placeholder-shown) ~ lo-button[variant=basic-icon].clear-button {
bottom: 50%;
transform: translate(0, 50%);
}
lo-datepicker.placeholder-only input:not(:placeholder-shown) ~ lo-button[variant=basic-icon].clear-button button {
padding: 5px;
}
lo-datepicker.placeholder-only lo-button[variant=action-icon].icon-only.datepicker-open {
bottom: 50%;
transform: translate(0, 50%);
}
lo-datepicker.placeholder-only lo-button[variant=action-icon].icon-only.datepicker-open button {
padding: 5px;
}
lo-datepicker lo-button[variant=action-icon].icon-only.datepicker-open {
bottom: 0;
padding: 0;
position: absolute;
right: 0;
}
lo-datepicker lo-button[variant=action-icon].icon-only.datepicker-open button {
padding: 5px 5px 3px 5px;
}
lo-datepicker lo-button[variant=action-icon].icon-only.datepicker-open button:hover, lo-datepicker lo-button[variant=action-icon].icon-only.datepicker-open button:focus {
background: var(--color-primary-soft) radial-gradient(circle, transparent 1%, var(--color-primary-soft) 1%) center/15000%;
}
lo-datepicker lo-button[variant=action-icon].icon-only.datepicker-open button:active {
background-color: #ffffff;
background-size: 100%;
transition: background 0s;
}
lo-datepicker[disabled] {
background-color: var(--color-neutral-lighter);
cursor: not-allowed;
}
lo-datepicker[disabled] label {
color: var(--color-neutral-dark);
}
lo-datepicker[disabled] label:hover {
cursor: not-allowed;
}
lo-datepicker[disabled] div[input] {
background-color: var(--color-neutral-lighter);
text-align: center;
}
lo-datepicker[disabled] div[input]:hover {
cursor: not-allowed;
}
lo-datepicker[disabled] div[input]::after {
display: none;
}
lo-datepicker[disabled] div[valueInput] {
background-color: var(--color-neutral-lighter);
}
lo-datepicker .input-container {
align-items: center;
display: flex;
gap: 10px;
justify-content: space-between;
width: 100%;
}
lo-datepicker .input-container::after {
background-color: var(--color-primary);
bottom: 10px;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
content: " ";
display: block;
flex-shrink: 0;
height: 7px;
position: absolute;
right: 5px;
width: 10px;
position: relative;
bottom: unset;
right: unset;
top: 3px;
}
lo-datepicker .input-container::after {
display: none;
}
lo-datepicker .input-container.open::after {
clip-path: polygon(50% 0%, 100% 100%, 50% 100%, 0% 100%);
}
lo-datepicker:focus, lo-datepicker:focus-within, lo-datepicker:focus-visible, lo-datepicker:active {
outline: 2px solid var(--color-primary);
}
lo-datepicker:focus [dropopen-container], lo-datepicker:focus-within [dropopen-container], lo-datepicker:focus-visible [dropopen-container], lo-datepicker:active [dropopen-container] {
display: block;
}
lo-datepicker[disabled]:focus, lo-datepicker[disabled]:focus-within, lo-datepicker[disabled]:focus-visible, lo-datepicker[disabled]:active {
box-shadow: none;
outline: 0;
}
lo-datepicker[disabled] [dropopen-container] {
display: none;
}
lo-datepicker:hover {
cursor: pointer;
}
lo-datepicker:hover[disabled] {
cursor: not-allowed;
}
lo-datepicker [dropopen-container], lo-datepicker [select-dropopen-container] {
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: 0 0 8px 8px;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.25);
cursor: default;
display: none;
left: 0;
list-style: none;
min-width: 150px;
max-height: 300px;
overflow: auto;
padding: 0;
position: absolute;
top: calc(100% - 0px);
z-index: 2;
}
lo-datepicker [dropopen-container] ul, lo-datepicker [select-dropopen-container] ul {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0;
padding: 0;
}
lo-datepicker .opened[select-dropopen-container] {
display: block;
}
lo-datepicker.list-up [dropopen-container], lo-datepicker.list-up [select-dropopen-container] {
border-radius: 8px 8px 0 0;
top: unset;
bottom: 100%;
}
lo-datepicker.list-left [dropopen-container], lo-datepicker.list-left [select-dropopen-container] {
border-radius: 8px 0 8px 8px;
right: 0;
}
lo-datepicker [select-dropopen-container] {
margin-left: 6px !important;
padding: 5px;
width: 365px;
}
lo-datepicker [calendar-top] {
cursor: default;
display: flex;
text-align: center;
}
lo-datepicker [calendar-top] lo-content[internal] {
align-items: center;
}
lo-datepicker [calendar-top] lo-content[internal] lo-column {
justify-content: center;
}
lo-datepicker [calendar-top] lo-content[internal] lo-column[col="2"] {
--cols: 6;
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}
lo-datepicker [calendar-top] lo-content[internal] lo-column[col="8"] {
flex-basis: 66.6666667%;
max-width: 66.6666667%;
}
lo-datepicker [calendar-top] .display-date {
--cols: 1;
align-items: center;
border-bottom: 1px solid transparent;
cursor: pointer;
display: flex;
font-size: var(--font-size-medium);
justify-content: center;
padding-left: 5px;
padding-right: 25px;
position: relative;
}
lo-datepicker [calendar-top] .display-date:hover, lo-datepicker [calendar-top] .display-date:focus {
border-bottom: 1px solid var(--color-primary);
outline: none;
}
lo-datepicker [calendar-top] .display-date::after {
background-color: var(--color-primary);
bottom: 10px;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
content: " ";
display: block;
flex-shrink: 0;
height: 7px;
position: absolute;
right: 5px;
width: 10px;
bottom: unset;
top: 11px;
}
lo-datepicker [calendar-top] .display-date[no-arrow] {
padding-right: 5px;
}
lo-datepicker [calendar-top] .display-date[no-arrow]::after {
display: none;
}
lo-datepicker [calendar-top] .calendar-arrow {
color: var(--color-primary);
cursor: pointer;
display: block;
font-size: var(--font-size-large);
position: relative;
top: -2px;
}
lo-datepicker [calendar-top] .calendar-arrow:hover, lo-datepicker [calendar-top] .calendar-arrow:focus {
outline: none;
text-decoration: underline;
}
lo-datepicker [calendar-body] {
position: relative;
}
lo-datepicker div.week, lo-datepicker div.month {
cursor: default;
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
lo-datepicker [calendar-header], lo-datepicker .days {
color: var(--font-color);
font-size: var(--font-size-medium);
font-weight: bold;
}
lo-datepicker [calendar-header]:hover, lo-datepicker .days:hover {
background-color: transparent;
}
lo-datepicker [calendar-body] div.month div {
color: var(--color-primary);
cursor: default;
padding: 5px 3px;
position: relative;
text-align: center;
}
lo-datepicker [calendar-body] div.month div[value]:hover {
background-color: var(--color-primary);
border-radius: 20%;
color: #ffffff;
cursor: pointer;
outline: 0;
}
lo-datepicker [calendar-body] div.month div[value]:focus {
border-radius: 20%;
cursor: pointer;
outline: 2px solid var(--color-primary);
}
lo-datepicker [calendar-body] div.month div.days {
color: var(--font-color);
font-size: var(--font-size-medium);
font-weight: bold;
}
lo-datepicker [calendar-body] div.month div.days:hover {
background-color: transparent;
}
lo-datepicker [calendar-body] div.month div.grey {
color: var(--color-neutral);
}
lo-datepicker [calendar-body] div.month div.today {
font-size: var(--font-size-medium);
font-weight: bold;
line-height: 1.15;
}
lo-datepicker [calendar-body] div.month div[disabled] {
color: var(--color-neutral);
text-decoration: line-through;
pointer-events: none;
}
lo-datepicker [calendar-body] div.month div[value].selected {
background-color: var(--color-primary-soft);
border-radius: 20%;
color: var(--font-color);
}
lo-datepicker .yearPicker div.years, lo-datepicker .monthPicker div.months {
background-color: #ffffff;
cursor: default;
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
height: 100%;
width: 100%;
}
lo-datepicker .yearPicker div.years div, lo-datepicker .monthPicker div.months div {
align-items: center;
color: var(--color-primary);
cursor: pointer;
display: flex;
justify-content: center;
}
lo-datepicker .yearPicker div.years div[value]:hover, lo-datepicker .monthPicker div.months div[value]:hover {
background-color: var(--color-primary-light);
border-radius: 8px;
cursor: pointer;
outline: 0;
}
lo-datepicker .yearPicker div.years div[value]:focus, lo-datepicker .monthPicker div.months div[value]:focus {
border-radius: 8px;
cursor: pointer;
outline: 2px solid var(--color-primary);
}
lo-datepicker .yearPicker div.years div.today, lo-datepicker .monthPicker div.months div.today {
font-size: var(--font-size-medium);
font-weight: bold;
line-height: 1.15;
}
lo-datepicker .yearPicker div.years div[disabled], lo-datepicker .monthPicker div.months div[disabled] {
color: var(--color-neutral);
}
lo-datepicker .yearPicker div.years div[value].selected, lo-datepicker .monthPicker div.months div[value].selected {
background-color: var(--color-primary-soft);
border-radius: 8px;
}
lo-datepicker .monthPicker div.months {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
lo-datepicker lo-button[variant=basic-icon].clear-button {
display: none !important;
padding: 0;
position: absolute;
right: 20px;
}
lo-toggle {
align-items: center;
display: flex;
}
lo-toggle .toggle {
--width: 60px;
--height: 25px;
align-items: center;
border: 0;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
border-radius: var(--height);
cursor: pointer;
display: inline-flex;
height: var(--height);
position: relative;
}
lo-toggle .toggle div[type=checkbox] {
display: none;
}
lo-toggle .toggle .slider {
background-color: #ccc;
border-radius: var(--height);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
height: 100%;
position: relative;
transition: all 0.2s ease-in-out;
width: var(--width);
}
lo-toggle .toggle .slider:focus {
outline: 2px solid var(--color-primary);
outline: none;
}
lo-toggle .toggle .slider::before {
background-color: #fff;
border-radius: calc(var(--height) / 2);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
content: "";
height: calc(var(--height));
left: 0;
position: absolute;
top: 0;
transition: all 0.2s ease-in-out;
width: calc(var(--height));
}
lo-toggle .toggle div[checked=true] ~ .slider {
background-color: var(--color-primary);
}
lo-toggle .toggle div[checked=true] ~ .slider::before {
transform: translateX(calc(var(--width) - var(--height)));
}
lo-toggle .toggle .toggle-label {
margin: 0 10px;
}
lo-toggle .toggle.two-labels div[checked=false] ~ .toggle-label.left {
color: var(--color-primary);
text-shadow: 0.25px 0px 0.1px, -0.25px 0px 0.1px;
}
lo-toggle .toggle.two-labels div[checked=true] ~ .toggle-label.right {
color: var(--color-primary);
text-shadow: 0.25px 0px 0.1px, -0.25px 0px 0.1px;
}
lo-toggle .toggle.two-labels div[checked=true] ~ .toggle-label.left {
color: var(--font-color);
font-weight: normal;
text-shadow: none;
}
lo-toggle .toggle div[checked=false] ~ .toggle-label.left {
color: var(--color-primary);
text-shadow: 0.25px 0px 0.1px, -0.25px 0px 0.1px;
}
lo-toggle .toggle div[checked=true] ~ .toggle-label.right {
color: var(--color-primary);
text-shadow: 0.25px 0px 0.1px, -0.25px 0px 0.1px;
}
lo-toggle[disabled] *:hover {
cursor: not-allowed;
}
lo-toggle[disabled] .slider:focus {
box-shadow: none;
}
lo-toggle[disabled] .toggle input:checked ~ .slider {
background-color: var(--color-neutral-light);
}
lo-toggle[disabled] .toggle input:checked ~ .toggle-label.left {
color: var(--font-color);
}
lo-toggle[disabled] .toggle.two-labels input:not(:checked) ~ .toggle-label.left, lo-toggle[disabled] .toggle.two-labels input:checked ~ .toggle-label.right {
color: var(--color-neutral-darkest);
text-shadow: 0.25px 0px 0.1px, -0.25px 0px 0.1px;
}
lo-checkbox {
align-items: center;
display: flex;
}
lo-checkbox:hover, lo-checkbox:focus {
outline: 0;
}
lo-checkbox:hover div[checkbox], lo-checkbox:focus div[checkbox] {
outline: 2px solid var(--color-primary);
}
lo-checkbox [checkbox-pair] {
align-items: center;
display: flex;
position: relative;
width: 100%;
}
lo-checkbox [checkbox-pair]:hover {
cursor: pointer;
}
lo-checkbox [checkbox-pair] div[label] {
cursor: pointer;
margin-left: 10px;
max-width: 90%;
}
lo-checkbox [checkbox-pair] lo-tooltip[position=below] {
left: -100%;
}
lo-checkbox div[checkbox] {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
border-radius: 3px;
background-color: #ffffff;
cursor: pointer;
flex-shrink: 0;
position: relative;
vertical-align: text-top;
-webkit-appearance: none;
}
lo-checkbox div[checkbox][hidebox] {
display: none;
}
lo-checkbox div[checkbox][type=checkbox] {
height: 20px;
width: 20px;
}
lo-checkbox div[checkbox][type=checkbox][checked=true] {
background-color: var(--color-primary);
border: var(--color-primary);
}
lo-checkbox div[checkbox][type=checkbox][checked=true]:before {
border: 1px solid #ffffff;
border-width: 0 2px 2px 0;
content: "";
height: 12px;
margin: -1px -1px 0 -1px;
position: absolute;
right: 50%;
transform: rotate(45deg) translate(-50%, -50%);
top: 50%;
width: 5px;
}
lo-checkbox div[checkbox][type=checkbox][checked=true][indeterminate] {
background-color: var(--color-primary);
border: var(--color-primary);
}
lo-checkbox div[checkbox][type=checkbox][checked=true][indeterminate]:before {
border: solid white;
border-width: 2px 0 0 0;
content: "";
display: block;
height: 10px;
left: 6px;
position: absolute;
top: 10px;
transform: none;
width: 10px;
}
lo-checkbox div[checkbox][radio] {
border-radius: 50%;
height: 20px;
width: 20px;
}
lo-checkbox div[checkbox][radio][checked=true] {
background-color: var(--color-primary);
border: var(--color-primary);
}
lo-checkbox div[checkbox][radio][checked=true]::before {
background: #ffffff;
border-radius: 50%;
content: "";
display: flex;
height: 12px;
left: 5px;
position: absolute;
top: 5px;
transform: none;
width: 12px;
}
lo-checkbox:disabled div[checkbox], lo-checkbox:disabled div[checkbox][checked=true], lo-checkbox[disabled] div[checkbox], lo-checkbox[disabled] div[checkbox][checked=true], lo-checkbox[checked=true][disabled] div[checkbox], lo-checkbox[checked=true][disabled] div[checkbox][checked=true] {
background: var(--color-neutral-lighter);
}
lo-checkbox:disabled:hover [checkbox-pair], lo-checkbox[disabled]:hover [checkbox-pair], lo-checkbox[checked=true][disabled]:hover [checkbox-pair] {
cursor: not-allowed;
}
lo-checkbox:disabled:hover div[checkbox], lo-checkbox:disabled:hover [label], lo-checkbox[disabled]:hover div[checkbox], lo-checkbox[disabled]:hover [label], lo-checkbox[checked=true][disabled]:hover div[checkbox], lo-checkbox[checked=true][disabled]:hover [label] {
box-shadow: none;
cursor: not-allowed;
outline: 2px solid transparent;
}
lo-radiogroup {
align-items: center;
align-content: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 5px;
position: relative;
}
lo-radiogroup > div[label] {
display: flex;
font-weight: 600;
margin-bottom: 2px;
width: 100%;
word-break: break-word;
}
lo-pill {
align-items: center;
background-color: var(--color-primary);
border: 1px solid transparent;
border-radius: 25px;
color: #ffffff;
cursor: default;
display: flex;
gap: 10px;
padding: 0px 10px;
}
lo-pill label {
margin-right: 10px;
}
lo-pill label::selection {
background: transparent;
}
lo-pill:focus-within {
outline: 2px solid var(--color-primary);
}
lo-pill .pill-close:hover {
color: var(--color-primary-dark);
cursor: pointer;
}
lo-pill[filter] {
background-color: var(--color-primary-soft);
color: var(--color-primary-dark);
}
lo-pill[filter][close] {
background-color: var(--color-primary-soft);
}
lo-pill[filter][close]:hover {
border: 1px solid var(--color-primary-dark);
}
lo-pill[basic] {
background-color: var(--color-neutral-lighter);
color: var(--font-color);
}
lo-pill[basic] label {
margin-right: 0;
}
lo-pillgroup {
display: flex;
}
lo-pillgroup .faux-pill {
--gap: 0;
align-items: center;
background-color: var(--color-primary);
border: 1px solid transparent;
border-radius: 25px;
color: #ffffff;
display: flex;
line-height: 1;
padding: 5px 30px 5px 10px;
position: relative;
}
lo-pillgroup .faux-pill:hover {
cursor: pointer;
}
lo-pillgroup .faux-pill .pills-label {
margin-right: 10px;
}
lo-pillgroup .faux-pill .pills-label:hover {
cursor: pointer;
}
lo-pillgroup .faux-pill .pills-label::selection {
background: transparent;
}
lo-pillgroup .faux-pill .pills-plus {
font-size: 20px;
font-weight: 400;
line-height: 1;
margin-right: 3px;
}
lo-pillgroup .faux-pill .pills-plus::selection {
background: transparent;
}
lo-pillgroup .faux-pill .pills-amount {
position: relative;
}
lo-pillgroup .faux-pill .pills-amount::selection {
background: transparent;
}
lo-pillgroup .faux-pill::after {
background-color: var(--color-primary);
bottom: 10px;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
content: " ";
display: block;
flex-shrink: 0;
height: 7px;
position: absolute;
right: 5px;
width: 10px;
background-color: #ffffff;
right: 10px;
top: 50%;
transform: translate(0, -50%);
}
lo-pillgroup .faux-pill.empty {
background-color: transparent;
border: 0;
padding: 0;
}
lo-pillgroup.single-pill .faux-pill {
padding: 8px 10px;
}
lo-pillgroup.single-pill .faux-pill::after {
display: none;
}
lo-pillgroup:focus, lo-pillgroup:focus-within, lo-pillgroup:focus-visible, lo-pillgroup:active {
outline: 2px solid var(--color-primary);
}
lo-pillgroup:focus [dropopen-container], lo-pillgroup:focus-within [dropopen-container], lo-pillgroup:focus-visible [dropopen-container], lo-pillgroup:active [dropopen-container] {
display: block;
}
lo-pillgroup[disabled]:focus, lo-pillgroup[disabled]:focus-within, lo-pillgroup[disabled]:focus-visible, lo-pillgroup[disabled]:active {
box-shadow: none;
outline: 0;
}
lo-pillgroup[disabled] [dropopen-container] {
display: none;
}
lo-pillgroup:hover {
cursor: pointer;
}
lo-pillgroup:hover[disabled] {
cursor: not-allowed;
}
lo-pillgroup [dropopen-container], lo-pillgroup [select-dropopen-container] {
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: 0 0 8px 8px;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.25);
cursor: default;
display: none;
left: 0;
list-style: none;
min-width: 150px;
max-height: 300px;
overflow: auto;
padding: 0;
position: absolute;
top: calc(100% - 0px);
z-index: 2;
}
lo-pillgroup [dropopen-container] ul, lo-pillgroup [select-dropopen-container] ul {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0;
padding: 0;
}
lo-pillgroup .opened[select-dropopen-container] {
display: block;
}
lo-pillgroup.list-up [dropopen-container], lo-pillgroup.list-up [select-dropopen-container] {
border-radius: 8px 8px 0 0;
top: unset;
bottom: 100%;
}
lo-pillgroup.list-left [dropopen-container], lo-pillgroup.list-left [select-dropopen-container] {
border-radius: 8px 0 8px 8px;
right: 0;
}
lo-pillgroup [select-dropopen-container] {
border-radius: 0 8px 8px 8px;
width: 100%;
}
lo-pillgroup [select-dropopen-container] lo-pill {
border: 1px solid var(--color-primary);
display: inline-flex;
height: fit-content;
padding: 5px 10px;
width: fit-content;
}
lo-pillgroup [select-dropopen-container] lo-pill .pill-close:hover {
color: #ffffff;
}
lo-pillgroup .opened[select-dropopen-container] {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 5px;
}
lo-pillgroup[aria-expanded=true] .faux-pill::after {
clip-path: polygon(50% 0%, 100% 100%, 50% 100%, 0% 100%);
}
lo-pillgroup[aria-expanded=true] .faux-pill {
background-color: var(--color-primary-softer);
color: var(--color-primary-dark);
outline: 2px solid var(--color-primary);
}
lo-pillgroup[aria-expanded=true] .faux-pill::after {
background-color: var(--color-primary-dark);
}
lo-pillgroup[aria-expanded=true].empty .faux-pill {
background-color: transparent;
outline: 0;
}
lo-pillgroup:focus, lo-pillgroup:focus-within, lo-pillgroup:active {
outline: 0;
}
lo-pillgroup:focus .faux-pill, lo-pillgroup:focus-within .faux-pill, lo-pillgroup:active .faux-pill {
background-color: var(--color-primary-softer);
color: var(--color-primary-dark);
outline: 2px solid var(--color-primary);
}
lo-pillgroup:focus .faux-pill::after, lo-pillgroup:focus-within .faux-pill::after, lo-pillgroup:active .faux-pill::after {
background-color: var(--color-primary-dark);
}
lo-accordion {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
align-items: center;
background-color: #ffffff;
display: flex;
flex-wrap: wrap;
position: relative;
}
lo-accordion:focus {
outline: 2px solid var(--color-primary);
outline: none;
}
lo-accordion[variant=tree] {
border: 0;
}
lo-accordion .accordion-bar {
align-items: center;
display: flex;
flex-wrap: nowrap;
gap: 10px;
padding: 5px;
width: 100%;
}
lo-accordion .accordion-bar:hover {
border-radius: 8px 8px 8px 8px;
background-color: var(--color-primary-soft);
cursor: pointer;
}
lo-accordion .accordion-bar [arrow-spacer] {
width: 21px;
}
lo-accordion .accordion-bar [add-arrow] {
background-color: var(--color-primary);
bottom: 10px;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
content: " ";
display: block;
flex-shrink: 0;
height: 7px;
position: absolute;
right: 5px;
width: 10px;
position: relative;
bottom: unset;
right: unset;
}
lo-accordion .accordion-bar.open[add-arrow] {
clip-path: polygon(50% 0%, 100% 100%, 50% 100%, 0% 100%);
}
lo-accordion .accordion-bar.open:hover {
background-color: transparent;
}
lo-accordion .accordion-bar > label {
flex: none;
}
lo-accordion .accordion-bar > label:hover {
cursor: pointer;
}
lo-accordion .accordion-bar .accordion-hr {
border-bottom: 1px solid var(--border-color);
width: 100%;
}
lo-accordion .accordion-bar .accordion-hr.open .accordion-hr {
border-bottom: 1px solid var(--color-neutral);
}
lo-accordion .accordion-content {
max-height: 0;
position: relative;
transition: height 0.2s ease-in-out;
width: 100%;
}
lo-accordion .accordion-content [accordioncontents] {
display: none;
}
lo-accordion .accordion-content > * {
opacity: 0;
transition: height 0.2s ease-in-out;
}
lo-accordion .accordion-content.open {
max-height: fit-content;
outline: 0;
padding: 10px;
}
lo-accordion .accordion-content.open [accordioncontents] {
display: block;
}
lo-accordion .accordion-content.open > * {
opacity: 1;
}
lo-tree {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
background-color: #ffffff;
display: flex;
flex-direction: column;
padding: 5px 0 10px;
}
lo-tree .level {
margin: 0 0 0 14px;
position: relative;
width: 100%;
}
lo-tree .level1 > lo-checkbox {
margin-left: 19px;
width: calc(100% - 19px);
}
lo-tree .level1 > .accordion-content {
margin: 0 0 0 49px;
}
lo-tree > lo-checkbox {
margin-left: 34px;
}
lo-tree lo-checkbox {
border-radius: 8px 8px 8px 8px;
padding: 3px 0 3px 3px;
width: calc(100% - 39px);
}
lo-tree lo-checkbox:hover {
background-color: var(--color-primary-soft);
}
lo-tree lo-accordion {
border: 0;
}
lo-tree lo-accordion.level {
width: calc(100% - 20px);
}
lo-tree lo-accordion .accordion-bar {
padding: 0;
}
lo-tree lo-accordion .accordion-content.open {
padding: 0;
}
lo-overlay {
align-items: center;
background-color: rgba(0, 0, 0, 0.6);
box-sizing: border-box;
display: flex;
height: 100%;
justify-content: center;
position: absolute;
top: 0;
width: calc(100% - 20px);
z-index: 4;
}
lo-pagination {
display: flex;
justify-content: center;
margin-top: 10px;
width: 100%;
position: relative;
}
lo-pagination [role=button] {
background-color: #ffffff;
border: 1px solid var(--color-neutral);
border-right: 0;
color: var(--color-primary);
cursor: pointer;
height: 23px;
padding: 2px 7px;
}
lo-pagination [role=button]:hover {
color: var(--color-primary-light);
}
lo-pagination [role=button][disabled] {
color: var(--color-neutral);
cursor: not-allowed;
}
lo-pagination [role=button]:first-child {
border-radius: 8px 0 0 8px;
}
lo-pagination [role=button]:last-child {
border-radius: 0 8px 8px 0;
border-right: 1px solid var(--color-neutral);
}
lo-pagination [role=button].page-next, lo-pagination [role=button].page-prev {
align-items: center;
display: flex;
}
lo-pagination [role=button].page-next .icon-page-next, lo-pagination [role=button].page-next .icon-page-prev, lo-pagination [role=button].page-prev .icon-page-next, lo-pagination [role=button].page-prev .icon-page-prev {
margin-right: 0;
}
lo-pagination [role=button].page-next[disabled] .icon-page-next, lo-pagination [role=button].page-next[disabled] .icon-page-prev, lo-pagination [role=button].page-prev[disabled] .icon-page-next, lo-pagination [role=button].page-prev[disabled] .icon-page-prev {
background-color: var(--color-neutral);
}
lo-pagination [role=button].page-next {
border-radius: 0 8px 8px 0;
border-right: 1px solid var(--color-neutral);
}
lo-pagination .current-page[disabled] {
background: rgb(2, 103, 195);
background: rgba(2, 103, 195, 0.2);
color: var(--font-color);
pointer-events: none;
}
lo-pagination .per-page {
align-items: center;
display: flex;
position: absolute;
right: 10px;
top: 5px;
}
lo-pagination .per-page.left {
left: 0;
right: unset;
}
lo-pagination .per-page .per-page-label {
font-size: var(--font-size-small);
}
lo-pagination .per-page lo-dropdown {
margin-left: 5px;
width: 50px;
}
lo-pagination .per-page lo-dropdown.no-label div[input] {
padding: 1px 5px;
}
lo-pagination .per-page lo-dropdown .opened[select-dropopen-container] {
max-width: 75px;
min-width: 50px;
}
lo-loader {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
position: absolute;
width: 100%;
z-index: 6;
}
lo-loader .loader-container {
height: 80px;
position: relative;
width: 80px;
}
lo-loader div {
position: absolute;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
animation: spinner 1.2s linear infinite;
}
lo-loader div:nth-child(1) {
animation-delay: 0s;
top: 37px;
left: 66px;
}
lo-loader div:nth-child(2) {
animation-delay: -0.1s;
top: 22px;
left: 62px;
}
lo-loader div:nth-child(3) {
animation-delay: -0.2s;
top: 11px;
left: 52px;
}
lo-loader div:nth-child(4) {
animation-delay: -0.3s;
top: 7px;
left: 37px;
}
lo-loader div:nth-child(5) {
animation-delay: -0.4s;
top: 11px;
left: 22px;
}
lo-loader div:nth-child(6) {
animation-delay: -0.5s;
top: 22px;
left: 11px;
}
lo-loader div:nth-child(7) {
animation-delay: -0.6s;
left: 7px;
top: 37px;
}
lo-loader div:nth-child(8) {
animation-delay: -0.7s;
left: 11px;
top: 52px;
}
lo-loader div:nth-child(9) {
animation-delay: -0.8s;
left: 22px;
top: 62px;
}
lo-loader div:nth-child(10) {
animation-delay: -0.9s;
left: 37px;
top: 66px;
}
lo-loader div:nth-child(11) {
animation-delay: -1s;
left: 52px;
top: 62px;
}
lo-loader div:nth-child(12) {
animation-delay: -1.1s;
left: 62px;
top: 52px;
}
@keyframes spinner {
0%, 20%, 80%, 100% {
transform: scale(1);
color: white;
}
50% {
transform: scale(1.5);
background: var(--color-primary);
}
}
[tooltip]:hover button {
position: relative;
}
[tooltip]:hover lo-tooltip {
display: flex;
}
[tooltip] .cell-label {
text-decoration: underline;
}
[tooltip] .cell-label:hover {
cursor: pointer;
}
lo-tooltip {
border-radius: 8px 8px 8px 8px;
position: absolute;
background: #ffffff;
border: 4px solid #ffffff;
box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
display: none;
font-family: "Courier New", sans-serif;
font-size: var(--font-size);
left: 100%;
max-width: 400px;
padding: 10px;
width: max-content;
z-index: 3;
}
lo-tooltip[data-popper-placement=right] [data-popper-arrow] {
display: block;
position: relative;
top: 100%;
}
lo-tooltip[data-popper-placement=right] [data-popper-arrow]:after, lo-tooltip[data-popper-placement=right] [data-popper-arrow]:before {
right: calc(100% + 10px);
top: 0;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
-webkit-filter: drop-shadow(-1px 0px 0px rgba(0, 0, 0, 0.2));
filter: drop-shadow(-1px 0px 0px rgba(0, 0, 0, 0.2));
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}
lo-tooltip[data-popper-placement=right] [data-popper-arrow]:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: #ffffff;
border-width: 10px;
margin-top: -10px;
}
lo-tooltip[data-popper-placement=right] [data-popper-arrow]:before {
border-color: rgba(194, 225, 245, 0);
border-right-color: #ffffff;
border-width: 14px;
margin-top: -14px;
}
lo-tooltip[data-popper-placement=left] [data-popper-arrow] {
display: block;
left: 100%;
top: 100%;
position: relative;
}
lo-tooltip[data-popper-placement=left] [data-popper-arrow]:after, lo-tooltip[data-popper-placement=left] [data-popper-arrow]:before {
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
-webkit-filter: drop-shadow(3px 1px 1px rgba(0, 0, 0, 0.2));
filter: drop-shadow(3px 1px 1px rgba(0, 0, 0, 0.2));
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}
lo-tooltip[data-popper-placement=left] [data-popper-arrow]:after {
border-color: transparent;
border-left-color: #ffffff;
border-width: 10px;
margin-top: -10px;
}
lo-tooltip[data-popper-placement=left] [data-popper-arrow]:before {
border-color: transparent;
border-left-color: #ffffff;
border-width: 14px;
margin-top: -14px;
}
lo-tooltip[data-popper-placement=bottom] [data-popper-arrow] {
display: block;
margin-left: 0 !important;
position: relative;
top: 0;
}
lo-tooltip[data-popper-placement=bottom] [data-popper-arrow]:after, lo-tooltip[data-popper-placement=bottom] [data-popper-arrow]:before {
bottom: 100%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
-webkit-filter: drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.2));
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}
lo-tooltip[data-popper-placement=bottom] [data-popper-arrow]:after {
border-color: transparent;
border-bottom-color: #ffffff;
border-width: 10px;
margin-left: -10px;
margin-top: unset;
}
lo-tooltip[data-popper-placement=bottom] [data-popper-arrow]:before {
border-color: transparent;
border-bottom-color: #ffffff;
border-width: 14px;
margin-left: -14px;
margin-top: unset;
}
lo-tooltip[data-popper-placement=top] [data-popper-arrow] {
display: block;
margin-left: 0 !important;
position: relative;
top: 100%;
}
lo-tooltip[data-popper-placement=top] [data-popper-arrow]:after, lo-tooltip[data-popper-placement=top] [data-popper-arrow]:before {
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
-webkit-filter: drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.2));
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}
lo-tooltip[data-popper-placement=top] [data-popper-arrow]:after {
border-color: transparent;
border-top-color: #ffffff;
border-width: 10px;
margin-left: -10px;
margin-top: unset;
}
lo-tooltip[data-popper-placement=top] [data-popper-arrow]:before {
border-color: transparent;
border-top-color: #ffffff;
border-width: 14px;
margin-left: -14px;
margin-top: unset;
}
lo-info {
align-items: center;
border-radius: 8px;
color: var(--font-color);
display: flex;
font-size: var(--font-size-small);
justify-content: center;
padding: 5px 10px;
position: relative;
}
lo-info[warning] {
background-color: var(--color-secondary-soft);
}
lo-info[action] {
background-color: var(--color-primary-soft);
}
lo-info:hover {
cursor: help;
}
lo-info .info-label {
background-color: #ffffff;
border: 1px solid var(--color-neutral-darkest);
border-radius: 8px;
bottom: 50%;
color: var(--color-neutral-darkest);
left: calc(50% + 10px);
max-width: 400px;
opacity: 0;
padding: 10px;
position: absolute;
text-align: center;
transition: opacity 0.3s;
visibility: hidden;
width: max-content;
z-index: 1000;
}
lo-info .info-label.left {
left: unset;
right: calc(100% - 10px);
}
lo-info .info-label.bottom {
bottom: unset;
top: 100%;
}
lo-info .icon-info {
margin-right: 0;
}
lo-info.hover-disabled .info-label {
visibility: visible !important;
background-color: transparent;
color: revert;
z-index: revert;
position: revert;
opacity: 1;
padding: 5px;
border: revert;
border-radius: revert;
transform: revert;
}
lo-info.hover-enabled:hover .info-label {
visibility: visible;
opacity: 1;
}
lo-attachment {
display: flex;
flex-direction: column;
width: 100%;
}
lo-attachment:focus .file-upload-container, lo-attachment:focus-within .file-upload-container {
outline: 2px solid var(--color-primary);
}
lo-attachment[disabled]:hover .file-upload-container, lo-attachment[disabled]:focus .file-upload-container {
cursor: not-allowed;
outline: 0;
}
lo-attachment[disabled] .file-upload-container, lo-attachment[disabled] .upload-icon {
background-color: var(--color-neutral-lightest);
}
lo-attachment[disabled] .file-upload-container .icon-upload, lo-attachment[disabled] .upload-icon .icon-upload {
background-color: var(--color-neutral-dark);
}
lo-attachment[disabled] .instructions, lo-attachment[disabled] .accepted-file-types, lo-attachment[disabled] .maxsize {
color: var(--color-neutral-dark);
}
lo-attachment .file-upload-label {
display: flex;
font-weight: 600;
margin-bottom: 10px;
word-break: break-word;
}
lo-attachment .attachment-container {
display: flex;
}
lo-attachment .attachment-container.vertical {
flex-direction: column;
gap: 10px;
}
lo-attachment .attachment-container.vertical .files-container {
max-height: 200px;
max-width: 300px;
}
lo-attachment .attachment-container.vertical .files-container .file:last-of-type {
margin-bottom: 10px;
}
lo-attachment .attachment-container.horizontal {
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
lo-attachment .attachment-container.horizontal .files-container {
max-height: 140px;
width: calc(100% - 310px);
}
lo-attachment[aria-invalid=true][aria-invalid=true] {
border: none;
outline: 0;
}
lo-attachment[aria-invalid=true][aria-invalid=true] .file-upload-container {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--color-danger);
outline: 2px solid var(--color-danger);
}
lo-attachment .file-upload-container {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
align-items: center;
background-color: #ffffff;
cursor: pointer;
display: flex;
flex-direction: column;
flex-shrink: 0;
height: 140px;
justify-content: center;
padding: 10px;
position: relative;
width: 300px;
}
lo-attachment .file-upload-container:hover, lo-attachment .file-upload-container:focus, lo-attachment .file-upload-container:focus-within {
outline: 2px solid var(--color-primary);
}
lo-attachment .file-upload-container.fileover {
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
}
lo-attachment .upload-icon {
border: 1px solid var(--color-neutral-lighter);
align-items: center;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
display: flex;
justify-items: center;
margin-bottom: 10px;
padding: 8px 10px;
}
lo-attachment .upload-icon .icon {
margin-right: 0;
}
lo-attachment .instructions {
color: var(--color-primary);
font-weight: 500;
}
lo-attachment .accepted-file-types {
display: flex;
font-size: var(--font-size-small);
justify-content: center;
}
lo-attachment .accepted-file-types .accepted {
font-size: var(--font-size-small);
margin-right: 5px;
}
lo-attachment .accepted-file-types .accepted:last-child {
margin-right: 0;
}
lo-attachment .maxsize {
font-size: var(--font-size-small);
}
lo-attachment .files-container {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
background-color: var(--color-neutral-lightest);
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: 10px;
overflow: auto;
padding: 10px;
width: 100%;
}
lo-attachment .file {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
align-items: center;
background-color: #ffffff;
display: flex;
max-height: 78px;
padding: 10px 20px;
width: 300px;
}
lo-attachment .file .file-info {
margin: 0 10px;
width: 100%;
}
lo-attachment .file .file-info .file-name {
display: -webkit-box;
font-weight: 500;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break: break-word;
}
lo-attachment .file .file-info .file-size {
font-size: var(--font-size-small);
}
lo-attachment .file .file-icon, lo-attachment .file lo-button[icon=trash] {
align-items: center;
display: flex;
justify-content: center;
}
lo-attachment .file lo-button[icon=trash] {
margin-left: auto;
width: 60px;
}
lo-attachment .file .icon-file {
background-color: var(--color-neutral-light);
height: 30px;
width: 30px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
lo-text .label, lo-text .text {
align-items: center;
display: flex;
}
lo-text .label {
color: var(--color-primary);
font-weight: bold;
margin-right: 5px;
}
lo-notificationcenter {
display: flex;
flex-direction: column;
width: 100%;
z-index: 10;
}
lo-notificationcenter.bottom {
bottom: 8px;
position: fixed;
right: 50%;
transform: translate(50%, 0px);
}
lo-notificationcenter.top {
position: fixed;
right: 50%;
transform: translate(50%, 0px);
top: 8px;
}
lo-notificationcenter.top-right {
position: fixed;
right: 8px;
top: 8px;
}
lo-notification {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
align-items: center;
animation: notification-fade-in ease-in 0.5s;
animation-fill-mode: forwards;
background-color: #ffffff;
display: flex;
flex-grow: 1;
justify-items: center;
margin-bottom: 10px;
opacity: 0;
padding: 10px;
transition: opacity 2s linear;
width: 100%;
visibility: visible;
}
lo-notification.fade-out {
animation: notification-fade-out ease-out 0.5s;
animation-fill-mode: forwards;
}
lo-notification .notification-icon {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
align-items: center;
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1);
display: flex;
justify-items: center;
margin-right: 10px;
padding: 5px;
width: 32px;
}
lo-notification .notification-icon span {
margin-right: 0;
}
lo-notification .notification-text {
flex-grow: 2;
margin-right: 10px;
}
lo-notification .notification-button {
flex: 0;
margin-right: 10px;
width: fit-content;
}
lo-notification .notification-clear {
flex-basis: 36px;
flex-grow: 0;
flex-shrink: 0;
}
@keyframes notification-fade-in {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes notification-fade-out {
from {
transform: translateX(8px);
opacity: 1;
}
to {
transform: translateX(500px);
opacity: 0;
}
}
@keyframes notification-fade-in-and-out {
0% {
top: 50px;
opacity: 0;
}
10% {
top: 8px;
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
lo-filter {
border-radius: 8px 8px 8px 8px;
position: relative;
width: 100%;
}
lo-filter lo-dropdown,
lo-filter lo-input,
lo-filter lo-datepicker {
background-color: #FCFCFD;
border: 0;
border-bottom: 1px solid var(--border-color);
border-radius: 0;
display: flex;
padding-left: 25px;
}
lo-filter lo-dropdown:focus-within,
lo-filter lo-input:focus-within,
lo-filter lo-datepicker:focus-within {
border-radius: 8px 8px 8px 8px;
}
lo-filter lo-dropdown label, lo-filter lo-dropdown > [label],
lo-filter lo-input label,
lo-filter lo-input > [label],
lo-filter lo-datepicker label,
lo-filter lo-datepicker > [label] {
display: none !important;
}
lo-filter lo-dropdown .input-container,
lo-filter lo-input .input-container,
lo-filter lo-datepicker .input-container {
min-height: 20px;
}
lo-filter lo-dropdown input, lo-filter lo-dropdown div[input],
lo-filter lo-input input,
lo-filter lo-input div[input],
lo-filter lo-datepicker input,
lo-filter lo-datepicker div[input] {
border: 0;
padding: 8px 8px 5px 8px;
}
lo-filter lo-dropdown.placeholder-only input, lo-filter lo-dropdown.placeholder-only div[input],
lo-filter lo-input.placeholder-only input,
lo-filter lo-input.placeholder-only div[input],
lo-filter lo-datepicker.placeholder-only input,
lo-filter lo-datepicker.placeholder-only div[input] {
padding: 8px 8px 5px 8px;
}
lo-filter .icon-filter {
position: absolute;
left: 1px;
bottom: 5px;
width: 18px;
z-index: 1;
}
lo-slider {
display: flex;
flex-direction: column;
justify-content: center;
}
lo-slider .label {
align-items: flex-start;
color: var(--font-color);
display: flex;
font-weight: bold;
padding-bottom: 5px;
width: 100%;
}
lo-slider .slider-container {
display: flex;
flex-direction: row;
align-items: center;
}
lo-slider .slider {
accent-color: var(--color-primary);
flex: 0 0 75%;
}
lo-slider .slider:focus {
outline: 2px solid var(--color-primary-soft);
}
lo-slider .value {
padding-left: 4px;
flex: 0 0 25%;
}
lo-googleautofill {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
background-color: #ffffff;
display: flex;
flex-basis: 100%;
flex-direction: column;
justify-content: space-between;
padding: 5px;
position: relative;
width: 100%;
}
lo-googleautofill:hover {
cursor: text;
}
lo-googleautofill:focus-within {
outline: 2px solid var(--color-primary);
}
lo-googleautofill:focus-within lo-button[variant=basic-icon].icon-only {
display: block;
}
lo-googleautofill[disabled] {
background-color: var(--color-neutral-lighter);
color: var(--color-neutral-dark);
}
lo-googleautofill[disabled]:hover {
cursor: not-allowed;
}
lo-googleautofill label {
color: var(--color-neutral-darker);
margin-left: 8px;
position: absolute;
text-transform: lowercase;
top: 50%;
transform: translateY(-50%);
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
width: calc(100% - 20px);
}
lo-googleautofill label:hover {
cursor: text;
}
lo-googleautofill label lo-info {
padding: 0 0 0 10px;
}
lo-googleautofill label lo-info .icon-info {
height: 12px;
width: 12px;
}
lo-googleautofill label lo-info .info-label {
bottom: -50%;
left: 75%;
}
lo-googleautofill input {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
padding: 30px 8px 3px 8px;
text-overflow: ellipsis;
white-space: pre-wrap;
width: calc(100% - 20px);
}
lo-googleautofill input::placeholder {
color: transparent;
}
lo-googleautofill input:focus ~ label, lo-googleautofill input:focus-within ~ label {
background-color: transparent;
color: var(--color-neutral-darkest);
display: block;
font-size: var(--font-size-small);
margin-left: 8px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
top: 10px;
transform: translateY(-8px);
}
lo-googleautofill input:focus::placeholder, lo-googleautofill input:focus-within::placeholder {
color: var(--color-neutral);
text-transform: lowercase;
overflow: hidden;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
}
lo-googleautofill input:not(:placeholder-shown) ~ label {
background-color: transparent;
color: var(--color-neutral-darkest);
display: block;
font-size: var(--font-size-small);
margin-left: 8px;
text-wrap-mode: nowrap;
top: 10px;
transform: translateY(-8px);
}
lo-googleautofill input:not(:placeholder-shown) ~ lo-button[variant=basic-icon].clear-button {
bottom: 3px;
display: grid !important;
}
lo-googleautofill lo-button[variant=basic-icon].clear-button {
display: none !important;
padding: 0;
position: absolute;
right: 0;
}
lo-link a:focus, lo-link a:focus-within {
text-decoration: underline;
text-decoration-thickness: 1px;
}
lo-image a {
cursor: pointer;
display: flex;
}
body.default {
--font-family: "Open Sans";
--font-line-height: 1.36;
--font-size: 14px;
--font-size-giant: 2em;
--font-size-large: 1.538em;
--font-size-medium: 1.23em;
--font-size-small: 0.923em;
--font-size-tiny: 0.85em;
--font-color: #212427;
--font-color-opposite: #ffffff;
--color-primary: #0267C3;
--color-primary-light: #2e9afd;
--color-primary-dark: #01325e;
--color-primary-soft: #acd7fe;
--color-primary-softer: #dfefff;
--color-secondary: #C35E01;
--color-secondary-light: #fe912c;
--color-secondary-dark: #5e2d00;
--color-secondary-soft: #ffd3ab;
--color-neutral: #929598;
--color-neutral-light: #acafb1;
--color-neutral-lighter: #c6c8ca;
--color-neutral-lightest: #e6e7e7;
--color-neutral-dark: #787c7f;
--color-neutral-darker: #5f6265;
--color-neutral-darkest: #46494b;
--color-danger: #db1212;
--color-danger-light: #f26161;
--color-danger-dark: #7d0a0a;
--color-danger-soft: #fcd7d7;
--color-warning: #E4C903;
--color-warning-light: #fde850;
--color-warning-dark: #7f7002;
--color-warning-soft: #fef9ce;
--color-success: #008A1C;
--color-success-light: #00bd26;
--color-success-dark: #002407;
--color-success-soft: #71ff8d;
--border-color: #929598;
}
body.client {
--font-family: Calibri;
--font-size: 20px;
--font-color: green;
--font-color-opposite: #ff7fff;
--color-primary: #0267C3;
--color-primary-light: #2e9afd;
--color-primary-dark: #01325e;
--color-primary-soft: #acd7fe;
--color-secondary: #C35E01;
--color-secondary-light: #fe912c;
--color-secondary-dark: #5e2d00;
--color-secondary-soft: #ffd3ab;
--color-neutral: #929598;
--color-neutral-light: #acafb1;
--color-neutral-lighter: #c6c8ca;
--color-neutral-lightest: #e6e7e7;
--color-neutral-dark: #787c7f;
--color-neutral-darker: #5f6265;
--color-neutral-darkest: #46494b;
--color-danger: #db1212;
--color-danger-light: #f26161;
--color-danger-dark: #7d0a0a;
--color-danger-soft: #fcd7d7;
--color-warning: #E4C903;
--color-warning-light: #fde850;
--color-warning-dark: #7f7002;
--color-warning-soft: #fef9ce;
--color-success: #008A1C;
--color-success-light: #00bd26;
--color-success-dark: #002407;
--color-success-soft: #71ff8d;
--border-color: #929598;
}
#tg-top-buttons {
background-color: #F6F5F5;
container-type: inline-size;
display: flex;
width: 100%;
}
#test-container {
container-type: inline-size;
}
.grr-cell-with-tooltip:hover .grr-cell-tooltip {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
}
testing-grounds lo-grandmaster {
overflow-y: auto !important;
}
.newQueryButton {
min-width: 120px;
width: 120px;
flex-basis: 120px;
}
.newQueryButton [select-dropopen-container] {
border-radius: 0 8px 8px 8px;
width: 120px;
}
.queryTypeDropdown {
min-width: 120px;
width: 120px;
flex-basis: 120px;
}
.queryTypeDropdown [select-dropopen-container] {
border-radius: 0 8px 8px 8px;
width: 120px;
}
[data-lastpass-icon-root] {
display: none !important;
}
#resolveTicketButton3_1 {
width: 100%;
display: flex;
position: absolute;
left: 50%;
}
#tgButton3_1 {
position: absolute;
top: 2px;
right: 10px;
}
styleguide .sg-info {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
background-color: #ffffff;
height: 300px;
overflow: auto;
padding: 10px;
width: 100%;
}
styleguide .sg-info .container-text {
white-space: pre-line;
}
styleguide .sg-info .container-text pre {
white-space: pre-wrap;
}
styleguide .sg-examples {
width: 100%;
}
styleguide .sg-examples lo-html > .injected-html-container {
width: 100%;
}
styleguide .sg-examples .sg-code-topbar {
align-items: center;
display: flex;
justify-items: center;
margin-bottom: 5px;
}
styleguide .sg-examples .sg-code-copy {
align-items: center;
background-color: transparent;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
padding: 8px;
transition: background 0.8s;
}
styleguide .sg-examples .sg-code-copy .icon {
margin-right: 0;
}
styleguide .sg-examples .sg-code-copy span {
display: inline-block;
margin-right: 0;
}
styleguide .sg-examples .sg-code-copy:hover {
background: var(--color-primary) radial-gradient(circle, transparent 1%, var(--color-primary) 1%) center/15000%;
cursor: pointer;
}
styleguide .sg-examples .sg-code-copy:hover .icon {
background-color: #ffffff;
}
styleguide .sg-examples .sg-code-copy:focus, styleguide .sg-examples .sg-code-copy:focus-within {
outline: 2px solid var(--color-primary);
background-color: var(--color-primary);
background-size: 100%;
transition: background 0s;
}
styleguide .sg-examples .sg-code-copy:focus .icon, styleguide .sg-examples .sg-code-copy:focus-within .icon {
background-color: #ffffff;
}
styleguide .sg-examples .sg-copy-copied {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
background-color: #ffffff;
display: none;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
margin-left: 10px;
padding: 5px;
position: relative;
}
styleguide .sg-examples .sg-copy-copied.copied {
animation: copy-fade-out ease-out 3s;
animation-fill-mode: forwards;
display: flex;
}
styleguide .sg-examples .sg-copy-copied:after, styleguide .sg-examples .sg-copy-copied:before {
right: 100%;
top: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
-webkit-filter: drop-shadow(-1px 0px 0px rgba(0, 0, 0, 0.2));
filter: drop-shadow(-1px 0px 0px rgba(0, 0, 0, 0.2));
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}
styleguide .sg-examples .sg-copy-copied:before {
border-color: rgba(194, 225, 245, 0);
border-right-color: #ffffff;
border-width: 8px;
margin-top: -8px;
}
styleguide .sg-examples .sg-code-title {
display: block;
font-weight: bold;
margin-right: 10px;
}
styleguide .sg-examples .sg-code-example {
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
background-color: white;
padding: 10px;
width: 100%;
}
styleguide .sg-example-title {
display: block;
font-weight: bold;
}
styleguide .sg-icon .injected-html-container {
align-items: center;
display: flex;
}
styleguide .sg-overlay-holder {
height: 100px;
position: relative;
width: 500px;
}
styleguide .sg-loader-container {
position: relative;
height: 100px;
}
styleguide .sg-modal-holder {
position: relative;
height: 500px;
}
@keyframes copy-fade-out {
0% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.ucf {
--gap: 0;
border-radius: 3px 3px 3px 3px;
border: 1px solid var(--border-color);
box-sizing: border-box;
display: flex;
flex-direction: row;
height: calc(100vh - 73px);
overflow: hidden;
position: relative;
width: 100%;
}
.ucf .sidebar {
box-sizing: border-box;
container-type: inline-size;
font-size: var(--font-size-medium);
height: calc(100vh - 73px);
max-width: 252px;
min-width: 252px;
overflow: auto;
padding: 10px;
}
@container (max-width: 35em) {
.ucf .sidebar[col="3"] {
max-width: 100%;
min-width: 100%;
}
}
@container (max-width: 50em) {
.ucf .sidebar[col="3"] {
height: auto;
max-width: 100%;
min-width: 100%;
}
}
.ucf .sidebar .sidebar_link_container {
--gap: 0;
border-bottom: 1px solid var(--color-neutral);
display: flex;
justify-content: flex-end;
padding-bottom: 10px;
}
.ucf .sidebar .sidebar_link_container:last-of-type {
border-bottom: 0;
}
.ucf .sidebar .sidebar_link_container .sidebar_link {
align-items: center;
display: flex;
margin-right: auto;
}
.ucf .sidebar .sidebar_link_container .sidebar_button {
margin-left: 10px;
padding: 0;
}
.ucf .sidebar .sidebar_link_container .sidebar_button button:hover, .ucf .sidebar .sidebar_link_container .sidebar_button button:focus, .ucf .sidebar .sidebar_link_container .sidebar_button button:focus-within {
border: 1px solid;
}
.ucf .sidebar .sidebar_link_container .sidebar_dispense_subdir {
margin-left: 8px;
}
.ucf .sidebar .sidebar_link_container .sidebar_dispense_subdir .icon-subdirectory-right {
color: var(--color-neutral-dark);
height: 16px;
width: 16px;
margin-right: 0;
position: relative;
}
.ucf .sidebar lo-tooltip {
margin: 11px 0 0 -183px !important;
}
.ucf .main {
background-color: #ffffff;
border-left: 1px solid var(--color-neutral);
box-sizing: border-box;
container-type: inline-size;
flex: 1;
height: calc(100vh - 76px);
overflow: auto;
position: relative;
}
.ucf .main > lo-container {
padding: 10px;
}
.ucf .main[col="9"] {
--cols: 1;
max-width: 100%;
}
@container (min-width: 35em) and (max-width: 50em) {
.ucf .main[col="9"] {
height: 100%;
max-width: 100%;
}
}
@container (max-width: 50em) {
.ucf .main[col="9"] {
border-left: 0;
border-top: 1px solid var(--color-neutral);
height: 100%;
max-width: 100%;
}
}
.ucf .main .visible {
visibility: visible;
}
.ucf .main .invisible {
visibility: hidden;
}
.ucf .footer {
background-color: #ffffff;
border-top: 1px solid var(--border-color);
bottom: -1px;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
position: sticky;
width: 100%;
}
.ucf [data-lastpass-icon-root] {
display: none !important;
}
.rxconnect {
--gap: 0;
overflow: auto;
}
.rxconnect .patient-info-container {
align-items: flex-end;
background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(249, 222, 208) 100%);
border-radius: 8px 8px 0 0;
display: flex;
padding: 20px;
position: relative;
}
.rxconnect .data-failure-display {
background-color: rgba(209, 60, 15, 0.8);
border-radius: 8px;
color: #ffffff;
font-weight: 500;
right: 20px;
padding: 20px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: auto;
}
.rxconnect .patient-info-container-top .patient-info-name, .rxconnect .patient-info-container-top .patient-info-gender, .rxconnect .patient-info-container-top .patient-info-age {
color: var(--color-primary-dark);
}
.rxconnect .patient-info-container-top .patient-info-name h1 {
font-size: var(--font-size-large);
font-weight: bold;
line-height: 1;
margin: 0;
}
.rxconnect .patient-info-container-top .patient-info-gender, .rxconnect .patient-info-container-top .patient-info-age {
font-size: var(--font-size-medium);
}
.rxconnect .patient-info-container-bottom {
--gap: 20px;
border-radius: 8px 8px 8px 8px;
border: 1px solid var(--border-color);
align-items: center;
background-color: #ffffff;
display: flex;
padding: 5px 10px;
width: auto;
}
.rxconnect .patient-info-container-bottom .patient-info-dob-container, .rxconnect .patient-info-container-bottom .patient-info-address-container {
align-items: center;
color: var(--color-neutral-darker);
display: flex;
font-size: var(--font-size-small);
width: auto;
}
.rxconnect .patient-info-container-bottom .patient-info-dob-container .icon, .rxconnect .patient-info-container-bottom .patient-info-address-container .icon {
margin-right: 0;
vertical-align: middle;
}
.rxconnect .patient-info-container-bottom .patient-info-dob-container lo-text, .rxconnect .patient-info-container-bottom .patient-info-address-container lo-text {
position: relative;
top: 1px;
}
.rxconnect .patient-info-container-bottom .patient-info-dob-container .icon {
position: relative;
top: -1px;
}
.rxconnect .rxc-container {
--gap: 20px;
background-color: #eea57d;
padding: 20px;
}
.rxconnect .rxc-container .rxc-container-title h2 {
color: var(--color-primary-dark);
font-size: var(--font-size-medium);
font-weight: 600;
margin:0;
width: 100%;
}
.rxconnect .rxc-alerts-container, .rxconnect .rxc-table-container {
background-color: #ffffff;
border-radius: 8px;
padding: 20px;
}
.rxconnect .rxc-alerts-container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.rxconnect .rxc-alerts-container .rxc-alerts-tiles {
display: flex;
flex-wrap: nowrap;
width: 100%;
}
.rxconnect .rxc-alerts-container .tile-container {
background: rgba(238, 165, 125, 0.2);
border-radius: 8px;
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
padding: 5px 0 5px 5px;
}
.rxconnect .rxc-alerts-container .tile-container .tile-container-left {
align-content: center;
border-radius: 8px;
color: #8D2300;
display: flex;
font-size: var(--font-size-medium);
font-weight: bold;
padding: 2px;
width: 33%;
}
.rxconnect .rxc-alerts-container .tile-container .tile-container-left .tile-container-left-top, .rxconnect .rxc-alerts-container .tile-container .tile-container-left .tile-container-left-bottom {
background: rgba(238, 165, 125, 0.4);
border-radius: 8px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
padding: 5px;
}
.rxconnect .rxc-alerts-container .tile-container .tile-container-left .tile-container-left-top .tile-container-left-icon, .rxconnect .rxc-alerts-container .tile-container .tile-container-left .tile-container-left-bottom .tile-container-left-icon {
display: flex;
}
.rxconnect .rxc-alerts-container .tile-container .tile-container-left .tile-container-left-top .tile-container-left-icon .injected-html-container, .rxconnect .rxc-alerts-container .tile-container .tile-container-left .tile-container-left-bottom .tile-container-left-icon .injected-html-container {
align-items: center;
display: flex;
}
.rxconnect .rxc-alerts-container .tile-container .tile-container-left .tile-container-left-top .tile-container-left-text, .rxconnect .rxc-alerts-container .tile-container .tile-container-left .tile-container-left-bottom .tile-container-left-text {
background-color: transparent;
padding: 0;
width: unset;
}
.rxconnect .rxc-alerts-container .tile-container .tile-container-left .tile-container-left-text {
align-items: center;
background-color: rgba(238, 165, 125, 0.4);
border-radius: 8px;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
.rxconnect .rxc-alerts-container .tile-container .tile-container-left .icon {
background-color: #8D2300;
margin: 0;
}
.rxconnect .rxc-alerts-container .tile-container .tile-container-right {
align-content: center;
align-items: center;
position: relative;
text-align: center;
}
.rxconnect .rxc-alerts-container .tile-container .tile-container-right .tile-container-right-title {
font-weight: 600;
width: 100%;
}
.rxconnect .rxc-alerts-container .tile-container .tile-container-right .tile-container-right-time {
font-size: var(--font-size-small);
width: 100%;
}
.rxconnect .rxc-alerts-container .tile-container .tile-container-right .tile-container-right-info {
position: absolute;
right: 5px;
top: 5px;
}
.rxconnect .rxc-alerts-container .tile-container.error {
background: rgba(158, 0, 0, 0.4);
}
.rxconnect .rxc-alerts-container .tile-container.error .tile-container-left {
color: #ffffff;
}
.rxconnect .rxc-alerts-container .tile-container.error .tile-container-left .icon {
background-color: #ffffff;
}
.rxconnect .rxc-alerts-container .tile-container.error .tile-container-left-top, .rxconnect .rxc-alerts-container .tile-container.error .tile-container-left-bottom, .rxconnect .rxc-alerts-container .tile-container.error .tile-container-left-text {
background: rgb(158, 0, 0);
}
.rxconnect .rxc-alerts-container .tile-container.error .tile-container-right-info .icon-info {
background-color: #ffffff;
}
.carefindr .result-name {
font-size: var(--font-size-giant);
font-weight: bold;
}
.carefindr .icon.icon-email {
height: 18px;
width: 18px;
}
.carefindr .icon.icon-person-blue {
height: 18px;
width: 18px;
}
@keyframes cdk-text-field-autofill-start { /*!*/ }
@keyframes cdk-text-field-autofill-end { /*!*/ }
.cdk-text-field-autofill-monitored:-webkit-autofill {
animation: cdk-text-field-autofill-start 0s 1ms;
}
.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
animation: cdk-text-field-autofill-end 0s 1ms;
}