/* @import 'tailwindcss/base'; */
/* @import 'tailwindcss/components';
@import 'tailwindcss/utilities'; */
/* Basic */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* Fonts
========================================================================== */
@font-face {
font-family: "basier-circle";
src: url(/fonts/basiercircle-regular-webfont.woff2?75ed1573a0428232374b0a00550fec8b) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "basier-circle";
src: url(/fonts/basiercircle-regularitalic-webfont.woff2?ad6f13abf357f2b2af4055601d7258b5) format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "basier-circle";
src: url(/fonts/basiercircle-medium-webfont.woff2?4c8fef82fcd80265b420404779923344) format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "basier-circle";
src: url(/fonts/basiercircle-mediumitalic-webfont.woff2?61b84896c8917541d88cb35f474bb0e1) format("woff2");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "basier-circle";
src: url(/fonts/basiercircle-bold-webfont.woff2?81100782b3e156f9110751d02d8f12d1) format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "basier-circle";
src: url(/fonts/basiercircle-bolditalic-webfont.woff2?cc4d74159d5b16ccddd58b2aac67a491) format("woff2");
font-weight: 700;
font-style: italic;
font-display: swap;
}
:root {
/* ==========================================================================
Fonts
========================================================================== */
--font-brand: basier-circle, sans-serif;
/* Fonts weights */
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;
/* ==========================================================================
Colors
========================================================================== */
/* Brand
========================================================================== */
--brand-xxtradark: #060a2c;
--brand-xtradark: #303a8a;
--brand-dark: #0f1ea2;
--brand-xtramedium: #5a6f86;
--brand-xxtramedium: hsl(250, 60%, 57%);
--brand-mediumlight: color-mix(in srgb, var(--brand) 60%, white);
--brand-medium: #ccd9e8;
--brand: hsl(250, 82%, 57%);
--brand-light: #eaf1f9;
--brand-xtralight: #f7fafe;
--orza-pro: var(--secondary);
/* Secondary
========================================================================== */
--secondary-xtradark: hsl(160, 88%, 17%);
--secondary-dark: hsl(160, 80%, 38%);
--secondary: hsl(160, 80%, 45%);
--secondary-medium: hsl(160, 71%, 86%);
--secondary-light: hsl(160, 67%, 94%);
--secondary-xtralight: hsl(160, 65%, 97%);
/* Secondary
========================================================================== */
--terciary-xtramedium: #777567;
--terciary-xtralight: #eeecdd;
/* Neutral
========================================================================== */
--neutral-xxtradark: hsl(255, 13%, 11%);
--neutral-xtradark: hsl(254, 12%, 21%);
--neutral-dark: hsl(254, 13%, 32%);
--neutral: #6c6a76;
--neutral-medium: #a6a6a8;
--neutral-light: #dad9dd;
--neutral-mediumlight: #e6e6e8;
--neutral-xtralightmedium: #f2f2f2;
--neutral-xtralight: #fafafa;
--neutral-white: #ffffff;
/* Message
========================================================================== */
--destructive-dark: #b90000;
--destructive: #f06666;
--destructive-light: #fac9c9;
--error-dark: #cd0101;
--error: #f06666;
--error-light: #f8d4d4;
--warning: #fffbba;
--warning-dark: #ffe261;
/* ==========================================================================
Font sizes
========================================================================== */
/* Font sizes */
--font-size-1: 13px;
--font-size-2: 14px;
--font-size-3: 16px;
--font-size-4: 19px;
--font-size-5: 22px;
--font-size-6: 26px;
--font-size-7: 42px;
--font-size-8: 68px;
/* Font sizes names */
--font-display: var(--fw-bold) var(--font-size-8) / 1.12 var(--font-brand);
--font-title: var(--fw-bold) var(--font-size-7) / 1.25 var(--font-brand);
--font-heading: var(--fw-bold) var(--font-size-6) / 1.25 var(--font-brand);
--font-body-l: var(--font-size-5) / 1.2 var(--font-brand);
--font-body-m: var(--font-size-4) / 1.37 var(--font-brand);
--font-body: var(--font-size-3) / 1.45 var(--font-brand);
--font-caption: var(--font-size-2) / 1.4 var(--font-brand);
--font-caption-s: var(--font-size-1) / 1.2 var(--font-brand);
--font-title-variable: clamp(var(--font-size-5),5vw,var(--font-size-7));
--font-heading-variable: clamp(var(--font-size-5),5vw,var(--font-size-6));
--font-display-variable: clamp(var(--font-size-6),6vw,var(--font-size-8));
/* ==========================================================================
Spacing
========================================================================== */
--spacing-0: 0px;
--spacing-1: 7px;
--spacing-2: 14px;
--spacing-3: 28px;
--spacing-4: 42px;
--spacing-5: 56px;
--spacing-6: 70px;
--spacing-7: 84px;
--spacing-8: 98px;
--spacing-9: 112px;
--spacing-10: 126px;
--spacing-11: 140px;
--spacing-12: 154px;
--spacing-13: 168px;
--spacing-14: 182px;
--spacing-15: 196px;
--spacing-16: 210px;
--spacing-17: 224px;
--spacing-18: 238px;
--spacing-19: 252px;
--spacing-20: 266px;
--spacing-21: 280px;
--spacing-22: 294px;
--spacing-23: 308px;
--spacing-24: 322px;
/* ==========================================================================
Border-radius
========================================================================== */
--border-radius-none: 0;
--border-radius-s: calc(var(--spacing-1) / 2);
--border-radius-m: var(--spacing-1);
--border-radius-ml: var(--spacing-2);
--border-radius-l: var(--spacing-3);
--border-radius-xl: 50%;
/* ==========================================================================
Sizes for layout
========================================================================== */
--menu-width: var(--spacing-18);
--submenu-width: var(--spacing-20);
--header-height: 70px;
--main-options-height: 66px;
--banner-height: 64px;
}
@media (min-width: 1441px) {
:root {
--menu-width: var(--spacing-21)
}
}
/* ==========================================================================
Breakpoints
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* avoid white bounce space on scroll */
html {
/* overflow-y: hidden; */
/* height: 100%; */
}
body {
/* overflow-y: auto; */
/* min-height: 100%; */
font-family: var(--font-brand);
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
b, strong {
font-weight: var(--fw-bold);
}
i, em {
font-style: italic;
}
code {
word-wrap: break-word;
}
/* Layout */
/* .wrapper,
.wrapper-s,
.wrapper-m,
.wrapper-l {
width: 100%;
padding-left: var(--spacing-2);
padding-right: var(--spacing-2);
margin-left: auto;
margin-right: auto;
}
.wrapper-s {
max-width: 768px;
}
.wrapper-m {
max-width: 960px;
}
.wrapper-l {
max-width: 1280px;
}
.wrapper-xl {
max-width: 1440px;
} */
/* delete padding in a div inside the wrapper */
/* .reset-padding {
margin-left: calc(-1 * var(--spacing-2));
width: calc(100% + var(--spacing-2) * 2);
}
@media (--screen-m) {
.wrapper {
padding-left: var(--spacing-4);
padding-right: var(--spacing-4);
}
.reset-padding {
margin-left: calc(-1 * var(--spacing-4));
width: calc(100% + (var(--spacing-4) * 2));
}
}
@media (--screen-l) {
.wrapper{
padding-left: var(--spacing-9);
padding-right: var(--spacing-9);
}
} */
.wrapper-content {
width: 100%;
padding-inline: var(--spacing-2);
}
/* @media (--max-screen-ml) {
padding-inline: var(--spacing-2);
} */
@media (min-width: 1024px) {
.wrapper-content {
padding-inline: var(--spacing-3)
}
}
@media (min-width: 1281px) {
.wrapper-content {
padding-inline: var(--spacing-4)
}
}
.wrapper-l {
width: min(90%, 1200px);
margin-inline: auto;
}
.wrapper-s{
width: min(90%, 720px);
margin-inline: auto;
}
.wrapper-xs {
width: min(90%, 480px);
margin-inline: auto;
}
.ly-grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(255px,1fr));
grid-column-gap: var(--spacing-2);
grid-row-gap: var(--spacing-3);
}
.ly-grid.align-start {
align-items: start;
}
.ly-grid.row-gap-s {
grid-row-gap: var(--spacing-2);
}
.ly-grid-sm {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
grid-column-gap: var(--spacing-2);
grid-row-gap: var(--spacing-3);
}
.ly-grid-s {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
grid-column-gap: var(--spacing-2);
grid-row-gap: var(--spacing-3);
}
.ly-grid-50 {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 960px) {
.ly-grid-50.is-responsive {
grid-template-columns:1fr 1fr
}
}
.ly-grid-xs {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
grid-column-gap: var(--spacing-1);
grid-row-gap: var(--spacing-1);
}
.ly-grid-xs .escape-grid {
grid-column: 1 / -1;
}
.ly-grid-row-full {
grid-column: 1 / -1;
}
.ly-grid-row-half{
grid-column: 1 / -1;
}
@media (min-width: 960px) {
.ly-grid-row-half{
grid-column: 1 / 5
}
}
.ly-grid-center {
display: grid;
place-items: center;
}
.ly-inflex {
display: inline-flex;
}
.ly-inflex.gap-m {
gap: var(--spacing-3);
}
.ly-flex {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
gap: var(--spacing-2);
}
.ly-flex.is-column {
flex-direction: column;
}
.ly-flex.ly3-1 > *:first-child {
flex-grow: 9999;
flex-basis: 100%;
}
.ly-flex.ly3-1 > *:last-child {
flex-grow: 1;
min-width: 300px;
}
.ly-flex.row-s {
flex-direction: column;
}
.ly-flex.row-s > * {
width: 100%;
}
@media (min-width: 960px) {
.ly-flex.row-s {
flex-direction: row
}
}
.ly-flex.no-gap {
gap: 0;
}
.ly-flex.gap-xxs {
gap: 1px;
}
.ly-flex.gap-xs {
gap: var(--spacing-1);
}
.ly-flex.gap-s {
gap: var(--spacing-2);
}
.ly-flex.gap-m {
gap: var(--spacing-3);
}
.ly-flex.gap-ml {
gap: var(--spacing-4);
row-gap: var(--spacing-2);
}
.ly-flex.gap-l {
gap: var(--spacing-6);
row-gap: var(--spacing-3);
}
.ly-flex.flex-start {
align-items: flex-start;
}
.ly-flex.flex-stretch {
align-items: stretch;
}
.ly-flex.flex-end {
align-items: flex-end;
}
.ly-flex.justify-start {
justify-content: flex-start;
}
.ly-flex.justify-center {
justify-content: center;
}
.ly-flex.justify-end {
justify-content: flex-end;
}
.ly-flex.is-responsive {
flex-wrap: wrap;
}
.ly-flex.is-responsive-m {
flex-wrap: wrap;
}
@media (min-width: 960px) {
.ly-flex.is-responsive-m {
flex-wrap: nowrap
}
}
.ly-flex.is-responsive-l {
flex-wrap: wrap;
}
@media (min-width: 1281px) {
.ly-flex.is-responsive-l {
flex-wrap: nowrap
}
}
.ly-flex.has-columns > * {
flex-grow: 1;
flex-basis: 0;
}
.ly-flex.has-columns > .flex-grow-xs {
flex-grow: 0.5;
}
.ly-flex.has-columns > .flex-grow-sm {
flex-grow: 1.5;
}
.ly-flex.has-columns > .flex-grow-m {
flex-grow: 2;
}
.ly-flex.has-columns > .flex-grow-l {
/* fix subpixel */
flex-grow: 2.1;
}
.ly-flex.has-columns > .flex-grow-0 {
flex-grow: 0;
flex-basis: 1;
}
.ly-flex.has-columns.is-responsive > * {
flex-basis: 0;
flex-shrink: 1;
min-width: 150px
}
@media (min-width: 1281px) {
.ly-flex.has-columns.is-responsive {
flex-wrap: wrap
}
}
@media (max-width: 960px) {
.ly-flex.has-columns.is-responsive:has(.flatpickr-wrapper) > * {
flex-basis: 100%;
}
}
.ly-flex.has-columns.is-responsive-l > * {
flex-basis: 0;
flex-shrink: 1;
/* hack to prevent issue with v-select plugin */
min-width: 150px
}
.ly-flex.has-columns.is-responsive-l {
flex-wrap: wrap;
}
@media (min-width: 1281px) {
.ly-flex.has-columns.is-responsive-l {
flex-wrap: nowrap
}
}
.flex-center {
align-items: center;
}
/* TEST HAS */
/* @supports ly-app-main(:has){
--menu-width:80px;
&:has(.main-nav:hover) {
--menu-width:var(--spacing-21);
}
} */
/* Main layout app */
.ly-app-main {
display: grid;
grid-template-columns: var(--menu-width) 1fr;
grid-template-rows: var(--header-height) 1fr;
min-height: 100vh;
}
/* State with banner on top */
.ly-app-main.has-banner {
min-height: calc(100vh - var(--banner-height));
}
/* State to show menu and overlay */
@media (max-width: 769px) {
.ly-app-main.is-expanded .main-nav {
transform: translateX(0);
box-shadow: 10px 0px 10px -5px rgba(0, 0, 0, 0.3)
}
.ly-app-main.is-expanded .main-content * {
pointer-events: none;
}
.ly-app-main.is-expanded .main-content::after{
left: 0;
opacity: .6;
}
}
.ly-app-primary {
background-color: var(--neutral-xtralight);
}
.ly-app-primary:has(.empty-state) {
background-color: revert;
}
.ly-app-primary.has-aside {
--aside-max: 450px;
--aside-width: max(100%, var(--aside-max));
display: flex;
flex-flow: column;
}
@media (min-width: 1441px) {
.ly-app-primary.has-aside {
flex-flow: row
}
}
@media (min-width: 960px) {
.ly-app-primary.has-aside.media-ml {
flex-flow: row
}
}
@media (min-width: 960px) {
.ly-app-primary.has-aside.media-ml:has(>.actions) .primary-content {
min-height: calc(100vh - var(--header-height) - var(--main-options-height))
}
}
.ly-app-primary.has-aside .primary-content {
width: 100%;
}
@media (min-width: 1441px) and (max-width: 1679px) {
.ly-app-primary.has-aside .primary-content {
max-width: 800px
}
}
.ly-app-primary.has-aside .primary-content {
min-height: 100vh;
}
@media (min-width: 1441px) {
.ly-app-primary.has-aside .primary-content {
width: min(100%, 1024px)
}
}
.ly-app-primary.has-aside >.actions {
padding-left: var(--spacing-2);
margin: 0;
width: 100%;
}
@media (min-width: 1024px) {
.ly-app-primary.has-aside >.actions {
padding-inline: var(--spacing-3)
}
}
@media (min-width: 1281px) {
.ly-app-primary.has-aside >.actions {
padding-inline: var(--spacing-4)
}
}
.ly-app-primary.has-aside:has(>.actions) {
flex-wrap: wrap;
}
.ly-app-primary.has-aside:has(>.actions) .primary-content {
padding-top: var(--spacing-4);
flex-shrink: 1;
min-height: 0;
}
@media (min-width: 1441px) {
.ly-app-primary.has-aside:has(>.actions) .primary-content {
min-height: calc(100vh - var(--header-height) - var(--main-options-height))
}
}
.ly-app-primary.has-aside:has(>.actions) .primary-aside {
height: auto;
flex-shrink: 1;
flex-grow: 0;
}
@media (min-width: 960px) {
.ly-app-primary.has-aside:has(>.actions) .primary-aside {
width: calc(100% - 480px)
}
}
@media (min-width: 1281px) {
.ly-app-primary.has-aside:has(>.actions) .primary-aside {
width: calc(100% - 768px)
}
}
@media (min-width: 1441px) {
.ly-app-primary.has-aside:has(>.actions) .primary-aside {
width: calc(100% - 800px)
}
}
@media (min-width: 1680px) {
.ly-app-primary.has-aside:has(>.actions) .primary-aside {
width: calc(100% - 1024px)
}
}
.invert-aside-l .primary-content {
order: 2;
}
.invert-aside-l .primary-aside {
order: 1;
}
@media (min-width: 960px) {
.invert-aside-l .primary-content {
order: 1;
}
.invert-aside-l .primary-aside {
order: 2;
}
}
.primary-aside {
position: fixed;
top: calc(var(--header-height) + var(--main-options-height));
right: 0;
z-index: 1;
height: calc(100vh - var(--header-height) - var(--main-options-height));
width: min(100% - var(--spacing-5), calc(var(--spacing-17) * 2));
transform: translateX(100%);
transition: transform 400ms cubic-bezier(.09,.77,.38,.98);
overflow-y: auto;
overflow-x: visible;
}
.primary-aside.is-expanded {
transform: translateX(0);
box-shadow: 0 5px 20px 8px hsla(0, 0%, 0%, 0.2);
}
@media (min-width: 1441px) {
.primary-aside {
position: relative;
width: var(--aside-width);
/* test max width */
max-width: var(--aside-max);
top:0;
height: auto;
overflow-y: revert;
overflow-x: revert;
/* z-index: 0; */
/* top: var(--main-options-height);
height: calc(100vh - var(--header-height)); */
box-shadow: none;
transform: translateX(0)
}
.primary-aside.is-expanded {
box-shadow: none;
}
}
.primary-aside.is-visible {
transform: translateX(0);
width: 100%;
position: relative;
top: 0;
}
.primary-aside.is-visible.has-info {
position: relative;
top: calc(var(--header-height) - var(--spacing-1));
height: auto;
}
@media (min-width: 960px) {
.primary-aside.is-visible.has-info {
height: calc(100vh - var(--header-height) + var(--spacing-1))
}
}
.primary-aside-toggle:hover {
opacity: .6;
}
@media (min-width: 1441px) {
.primary-aside-toggle {
display: none
}
}
.primary-aside-content {
position: sticky;
top: calc(var(--spacing-2));
}
@media (min-width: 1441px) {
.primary-aside-content {
width: min(100%, var(--aside-max));
top: calc(var(--header-height) + var(--main-options-height) + var(--spacing-2))
}
}
.primary-content {
padding-bottom: var(--spacing-8);
padding-inline: var(--spacing-2);
max-width: 1024px;
min-height: calc(100vh - var(--header-height) - var(--main-options-height));
border-right: 1px solid var(--neutral-mediumlight);
}
@media (min-width: 1024px) {
.primary-content {
padding-inline: var(--spacing-3)
}
}
@media (min-width: 1281px) {
.primary-content {
padding-inline: var(--spacing-4)
}
}
.primary-content.screen-xl {
max-width: 1440px;
}
@media (min-width: 960px) {
.primary-content.screen-xs {
max-width: 480px
}
}
@media (min-width: 1281px) {
.primary-content.screen-xs {
max-width: 768px
}
}
@media (min-width: 1441px) {
.primary-content.screen-xs {
max-width: 1024px
}
}
.primary-content .has-offset {
margin-left: calc(var(--spacing-2) * -1);
width: calc(100% + var(--spacing-2) * 2);
}
@media (min-width: 1024px) {
.primary-content .has-offset {
margin-left: calc(var(--spacing-3) * -1);
width: calc(100% + var(--spacing-3) * 2)
}
}
@media (min-width: 1281px) {
.primary-content .has-offset {
margin-left: calc(var(--spacing-4) * -1);
width: calc(100% + var(--spacing-4) * 2)
}
}
div.logo {
position: sticky;
z-index: 21;
top:0;
grid-column: 1 / 2;
grid-row: 1 / 2;
transition: ease-in-out 250ms;
transform: translateX(0);
}
@media (max-width: 769px) {
div.logo {
transform: translateX(calc(var(--menu-width) * -1))
}
}
.toggle-nav {
display: none;
}
@media (max-width: 769px) {
.toggle-nav {
display: inline-block
}
}
.header {
position: sticky;
top: 0;
z-index: 30;
grid-column: 2 / -1;
grid-row: 1 / 2;
}
@media (max-width: 769px) {
.header {
grid-column: 1 / -1
}
}
.main-nav {
z-index: 20;
grid-column: 1 / 2;
grid-row: 2 / -1;
transition: ease-in-out 250ms all;
}
@media (max-width: 769px) {
.main-nav {
transform: translateX(calc(var(--menu-width) * -1))
}
}
.main-content {
z-index: 15;
grid-column: 2 / -1;
grid-row: 2 / -1;
min-width: 0;
overflow-y: visible;
}
@media (max-width: 769px) {
.main-content {
grid-column: 1 / -1
}
.main-content::after{
display: block;
content: "";
position: fixed;
z-index: 16;
top: 0;
left: -100vw;
width: 100vw;
height: 100%;
background-color: var(--neutral-xtradark);
opacity: 0;
transition: opacity 250ms ease-in;
}
}
/* avoid scroll when body has dialog component */
body:has(.dialog) {
overflow-y: hidden;
}
/* Secondary layout to use with secondary navigation */
.ly-app-secondary {
padding-bottom: var(--spacing-8);
}
@media (min-width: 1024px) {
.ly-app-secondary {
display: flex;
justify-content: flex-start;
/* Default stretch for empty states */
/* align-items: flex-start; */
gap: var(--spacing-3)
}
}
@media (min-width: 1441px) {
.ly-app-secondary {
gap: var(--spacing-5)
}
}
@media (max-width: 769px) {
.secondary-nav {
width: calc(100vw - var(--spacing-3) - var(--spacing-3));
margin-bottom: var(--spacing-2)
}
}
@media (min-width: 768px) {
.secondary-nav {
width: calc(100vw - var(--menu-width) - var(--spacing-3) - var(--spacing-3));
margin-bottom: var(--spacing-3)
}
}
@media (min-width: 1024px) {
.secondary-nav {
max-width: var(--submenu-width);
margin-bottom: 0;
margin-top: var(--spacing-3)
}
}
.secondary-nav-content {
margin: 0 calc(var(--spacing-3) * -.5);
}
@media (max-width: 1024px) {
.secondary-nav-content {
width: calc( 100% + var(--spacing-3) * 2 )
}
}
.secondary-content {
width: 100%;
min-width: 0;
margin-top: var(--spacing-3);
}
@media (min-width: 1024px) {
.secondary-content {
max-width: calc(var(--spacing-22) * 2.25)
}
}
@media (min-width: 1441px) {
.secondary-content {
max-width: calc(var(--spacing-21) * 3)
}
}
.ly-app-tertiary {
display: flex;
flex-direction: column;
}
.ly-app-tertiary.is-inverted .tertiary-main{
order: 1;
}
.ly-app-tertiary.is-inverted .tertiary-aside {
order: 2;
}
@media (min-width: 960px) {
.ly-app-tertiary {
flex-direction: row;
justify-content: flex-start;
/* gap: var(--spacing-3); */
}
.ly-app-tertiary.is-inverted .tertiary-main {
order: 2;
}
.ly-app-tertiary.is-inverted .tertiary-aside {
order: 1;
}
}
@media (min-width: 1441px) {
.ly-app-tertiary {
/* gap: var(--spacing-5); */
}
}
.ly-app-tertiary {
--column-width-offset: 340px;
}
.tertiary-aside {
background-color: var(--brand-light);
}
@media (min-width: 960px) {
.tertiary-aside {
flex-basis: calc(50% - var(--column-width-offset));
min-width: var( --column-width-offset);
display: flex;
justify-content: flex-end;
min-height: calc(100vh - var(--banner-height))
}
}
/* state with banner */
@media (min-width: 960px) {
.has-banner .tertiary-aside {
min-height: calc(100vh - (var(--banner-height) * 2))
}
}
.tertiary-aside-content {
width: 100%;
padding: var(--spacing-2);
}
@media (min-width: 960px) {
.tertiary-aside-content {
max-width: calc(var(--column-width-offset) * 2);
padding: var(--spacing-4)
}
}
.tertiary-main {
background-color: var(--neutral-xtralight);
flex-basis: calc(50% + var(--column-width-offset));
/* display: grid;
place-items: center; */
}
.tertiary-main-content {
padding: var(--spacing-2);
}
@media (min-width: 960px) {
.tertiary-main-content {
max-width: 1280px;
/* max-width: calc(930px); */
/* margin-right: 20%; */
/* margin-left: 0; */
padding: var(--spacing-4)
}
}
/*
.ly-app-tertiary {
display: grid;
grid-template-columns: 1fr minmax(320px, 400px) minmax(320px, 400px) 1fr;
@media (--screen-m) {
gap: var(--spacing-3);
}
@media (--screen-xl) {
gap: var(--spacing-5);
}
}
.tertiary-aside {
background-color: orange;
grid-column: 2 / 3;
@media (--screen-m) {
}
}
.tertiary-aside-content {
background-color: green;
@media (--screen-m) {
}
}
.tertiary-main {
background-color: red;
grid-column:3/ 4;
}
.tertiary-main-content {
background-color: blue;
@media (--screen-m) {
}
}
*/
/* Components */
.label {
display: block;
margin-bottom: var(--spacing-1);
}
.label.is-required .label-txt::after {
content: "*";
margin-left: calc(var(--spacing-1) / 3);
color: var(--error);
}
.label-txt {
font: var(--font-caption);
color: var(--neutral);
}
.textarea,
.input {
--border: var(--neutral-light);
--color: var(--neutral-dark);
--background: var(--neutral-white);
--focus: var(--brand-light);
display: block;
width: 100%;
padding: var(--spacing-2);
margin: 0;
color: var(--color);
background-color: var(--background);
border: 1px solid var(--border);
border-radius: var(--border-radius-m);
outline: 0;
text-decoration: none;
}
.textarea::-moz-placeholder, .input::-moz-placeholder {
color: var(--neutral-medium);
opacity: 1;
}
.textarea::placeholder, .input::placeholder {
color: var(--neutral-medium);
opacity: 1;
}
.textarea:focus,
.textarea:focus:hover,
.input:focus,
.input:focus:hover {
--border: var(--brand);
box-shadow: 0 0 0 4px var(--focus);
}
.textarea:focus[readonly], .textarea:focus:hover[readonly], .input:focus[readonly], .input:focus:hover[readonly] {
box-shadow: none;
--border: var(--neutral-light);
}
.textarea:hover, .input:hover {
--border: var(--neutral-medium);
}
.textarea:hover[readonly], .input:hover[readonly] {
--border: var(--neutral-light);
}
.textarea:invalid,
.textarea.is-invalid,
.input:invalid,
.input.is-invalid {
--border: var(--error);
--color: var(--error);
box-shadow: none;
}
.textarea:invalid:focus, .textarea.is-invalid:focus, .input:invalid:focus, .input.is-invalid:focus {
box-shadow: 0 0 0 4px var(--error-light);
}
.textarea:invalid:hover, .textarea.is-invalid:hover, .input:invalid:hover, .input.is-invalid:hover {
--border: var(--error-dark);
}
.textarea:disabled, .input:disabled {
--background: var(--neutral-xtralight);
--color: var(--neutral-light);
cursor: not-allowed;
}
/* pointer-events: none; */
.textarea:disabled::-moz-placeholder, .input:disabled::-moz-placeholder {
opacity: 0;
}
.textarea:disabled::placeholder, .input:disabled::placeholder {
opacity: 0;
}
.textarea[readonly], .input[readonly] {
box-shadow: none;
background-color: var(--neutral-xtralight);
cursor: default;
}
/* Turn off iPhone/Safari input element rounding */
input[type=search]{
-webkit-appearance: none;
}
.textarea {
padding: var(--spacing-2);
min-height: var(--spacing-10);
resize: vertical;
font: var(--font-body);
}
.textarea.as-input {
min-height: var(--spacing-1);
height: 50.5px;
}
.textarea.as-input.has-xtraline {
min-height: var(--spacing-1);
height: 72px;
}
.input[type="file"] {
/* height: auto; */
padding-block: calc(var(--spacing-2) - 2px);
/* Fallback para navegadores más antiguos */
/* &::-webkit-file-upload-button {
padding: var(--spacing-1) var(--spacing-2);
margin-right: var(--spacing-2);
border: 1px solid var(--neutral-light);
border-radius: var(--border-radius-s);
background-color: var(--neutral-xtralight);
color: var(--neutral-dark);
font: var(--font-caption);
cursor: pointer;
&:hover {
background-color: var(--neutral-light);
border-color: var(--neutral-medium);
}
} */
}
.input[type="file"]::file-selector-button {
margin-right: var(--spacing-2);
border: 1px solid var(--neutral-light);
border-radius: var(--border-radius-s);
background-color: var(--neutral-xtralight);
color: var(--neutral-dark);
cursor: pointer;
}
.input[type="file"]::file-selector-button:hover {
background-color: var(--neutral-light);
border-color: var(--neutral-medium);
}
.input[type="file"]::file-selector-button:active {
background-color: var(--neutral-medium);
}
.select {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
max-width: 100%;
border: 1px solid var(--neutral-light);
background-color: var(--neutral-white);
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-position: calc(100% - var(--spacing-1)) center ;
border-radius: var(--border-radius-m);
font: var(--font-body);
padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) calc(var(--spacing-1) + var(--spacing-1)/2);
outline: 0;
white-space: nowrap;
text-decoration: none;
cursor: initial;
}
@media (prefers-color-scheme: light) {
.select {
color: var(--neutral-dark)
}
}
.select:hover {
border-color: var(--neutral-medium);
}
.select:focus-visible {
color: var(--black);
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-light);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
.select:invalid,
.select.is-invalid {
color: var(--error);
border-color: var(--error);
box-shadow: none;
}
.select:invalid:focus-visible, .select.is-invalid:focus-visible {
box-shadow: 0 0 0 4px var(--error-light);
}
.select:disabled {
color: var(--neutral-light);
border-color: var(--neutral-xtralight);
cursor: not-allowed;
}
.select:disabled::-moz-placeholder {
opacity: 0;
}
.select:disabled::placeholder {
opacity: 0;
}
.select option {
/* firefox font */
font: -moz-pull-down-menu;
}
select.select {
padding-bottom: calc(var(--spacing-2) - 2.2px);
}
.checkbox {
position: relative;
display: inline-block;
z-index: 1;
}
.checkbox-input {
position: absolute;
opacity: 0;
}
.checkbox-label {
display: flex;
align-items: center;
}
.checkbox-label::before {
--color: var(--neutral-light);
content: "";
display: block;
width: 24px;
height: 24px;
border: 1px solid;
border-radius: 3px;
flex: 0 0 auto;
margin-right: var(--spacing-2);
color: var(--color);
z-index: 2;
}
.checkbox-input:checked ~ .checkbox-label::before {
background-color: transparent;
color: var(--neutral-light);
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-position: center center;
}
.checkbox-input:hover ~ .checkbox-label::before {
color: var(--neutral-dark);
}
.checkbox-input:focus ~ .checkbox-label::before {
color: var(--brand);
background-color: transparent;
box-shadow: 0 0 0 4px var(--brand-light);
}
.nav-link {
display: flex;
align-items: center;
/* icon at the end */
/* justify-content: space-between; */
text-decoration: none;
color: var(--brand-dark);
padding: var(--spacing-1) var(--spacing-2);
border-radius: var(--border-radius-m);
vertical-align: middle;
}
.nav-link.is-active,
.nav-link.is-focus,
.nav-link:hover,
.nav-link:focus {
background-color: var(--brand-light);
outline: none;
}
.nav-link.is-active svg > *, .nav-link.is-focus svg > *, .nav-link:hover svg > *, .nav-link:focus svg > * {
fill: var(--brand);
}
.nav-link.is-active .nav-link-action > *, .nav-link.is-focus .nav-link-action > *, .nav-link:hover .nav-link-action > *, .nav-link:focus .nav-link-action > * {
fill: var(--brand);
}
/* svg {
order: 2;
} */
.nav-link.hover-bg-brand-dark svg > * {
fill: var(--brand);
}
.nav-link.hover-bg-brand-dark .nav-link-action > * {
fill: var(--neutral-white);
}
.nav-link.hover-bg-brand-dark:hover {
/* img {
mix-blend-mode: difference;
background-color: var(--brand-dark);
} */
}
.nav-link.hover-bg-brand-dark:hover svg > * {
fill: var(--brand-dark);
}
.nav-link.hover-bg-brand-dark:hover {
background-color: var(--brand-dark);
}
.nav-link.hover-bg-brand-dark:hover .nav-link-action > * {
fill: var(--neutral-white);
}
.nav-link {
font-weight: var(--fw-medium);
}
/* icon at the end */
@media (min-width: 768px) {
.nav-link {
font-weight: var(--fw-medium)
}
}
.nav-link svg {
min-width: 22px;
margin-right: calc( var(--spacing-1));
}
/* margin-right: var(--spacing-2); */
@media (min-width: 768px) {
.nav-link svg {
/* icon at the end */
margin-right: calc( var(--spacing-2))
/* margin-left: calc( var(--spacing-2) + var(--spacing-1)); */
}
}
/* icon at the end */
.nav-link svg > * {
fill: var(--brand-medium);
}
.nav-link svg.nav-link-action > * {
fill: var(--neutral-medium);
}
.nav-link svg.margin-0 {
margin: 0;
}
/* Refactor button to button-multiple */
.button {
--color: var(--brand);
--color-hover: var(--brand-dark);
--color-active: var(--brand-dark);
--color-selected: var(--neutral-xtradark);
--color-unselected: var(--neutral);
--icon-size: 20px;
--background: transparent;
--background-hover: transparent;
--background-active: var(--neutral);
--background-selected: var(--neutral-xtralight);
--background-unselected: var(--neutral-white);
--shadow-focus: var(--brand-medium);
--border: currentColor;
--border-hover: currentColor;
--border-selected: var(--neutral-light);
--border-unselected: currentColor;
display: inline-flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
text-align: center;
max-width: 100%;
padding: var(--spacing-1) calc(var(--spacing-1) * 3);
color: var(--color);
background: none;
background-color: var(--background);
border: none;
border-color: var(--border);
cursor: pointer;
border-radius: var(--border-radius-m);
font: var(--font-body);
font-weight: var(--fw-bold);
outline: 0;
/* white-space: nowrap; */
text-decoration: none;
vertical-align: middle;
}
.button:hover {
color: var(--color-hover);
background-color: var(--background-hover);
border-color: var(--border-hover);
}
.button:focus-visible {
box-shadow: 0 0 0 4px var(--shadow-focus);
}
.button:active {
color: var(--color-active);
background-color: var(--background-active);
}
.button.is-block {
width: 100%;
}
.button svg {
width: 22px;
}
.button svg + span {
margin-left: var(--spacing-1);
}
/* Default button component */
.button.is-primary {
--background: var(--brand);
--background-hover: var(--brand-dark);
--color: var(--neutral-white);
--color-hover: var(--neutral-white);
--shadow-focus: var(--brand-medium);
--color-active: var(--neutral-white);
--background-active: var(--brand-xtradark);
}
.button.is-primary svg > * {
fill: var(--neutral-white);
}
.button.is-primary.is-link {
--color: var(--brand);
--color-hover: var(--brand-dark);
--shadow-focus: var(--brand-medium);
}
.button.is-secondary {
--background: var(--neutral-dark);
--background-hover: var(--neutral-xtradark);
--color: var(--neutral-white);
--color-hover: var(--neutral-white);
--shadow-focus: var(--neutral-medium);
--color-active: var(--neutral-white);
--background-active: var(--neutral-xtradark);
}
.button.is-secondary svg > * {
fill: var(--neutral-white);
}
.button.is-pro {
--background: var(--secondary);
--background-hover: var(--secondary-dark);
--color: var(--neutral-white);
--color-hover: var(--neutral-white);
--shadow-focus: var(--secondary-medium);
--color-active: var(--neutral-white);
--background-active: var(--secondary-xtradark);
}
.button.is-neutral {
--background: var(--neutral-white);
--background-hover: var(--neutral-white);
--color: var(--neutral-dark);
--color-hover: var(--neutral-xtradark);
--shadow-focus: var(--neutral-light);
--color-active: var(--neutral);
--background-active: var(--neutral-white);
border-width: 1px;
border-style: solid;
--border: var(--neutral-medium);
--border-hover: var(--neutral-dark);
padding: calc(var(--spacing-1) - 1px) calc(var(--spacing-1) * 3);
}
.button.is-danger {
--background: var(--destructive);
--background-hover: var(--destructive-dark);
--color: var(--neutral-white);
--color-hover: var(--neutral-white);
--shadow-focus: var(--destructive-light);
--color-active: var(--neutral-white);
--background-active: var(--destructive-dark);
}
.button.is-danger.is-link {
--color: var(--destructive);
--color-hover: var(--destructive-dark);
--shadow-focus: var(--destructive-light);
}
.button.is-danger.has-background-hover:hover {
--background-hover: var(--destructive);
--color-hover: var(--neutral-white);
}
.button.is-busy {
color: var(--neutral-white);
background-color: var(--neutral-light);
--shadow-focus: var(--neutral-medium);
cursor: wait;
}
/* pointer-events: none; */
.button.is-busy.is-neutral {
background-color: var(--neutral-xtralight);
--border: var(--neutral-light);
color: var(--neutral-light);
}
.button.is-link {
cursor: pointer;
min-width: 0;
padding-left: 0;
padding-right: 0;
border-radius: 0;
border: none;
text-decoration: none;
--background: transparent;
--background-hover: transparent;
--background-active: transparent;
}
.button.is-link:active {
color: var(--brand-dark);
background-color: transparent;
--background-hover: transparent;
}
.button.is-link.is-destructive {
color: var(--destructive);
}
.button.is-link.is-destructive:hover {
color: var(--destructive-dark);
}
.button.is-icon .button-text {
position: absolute;
width: 1px;
height: 1px;
border: 0;
clip: rect(0, 0, 0,0);
margin: -1px;
padding: 0;
overflow: hidden;
}
.button.is-icon.has-tooltip {
border: 10px solid red;
position: relative;
}
.button.is-icon.has-tooltip:hover .button-text {
clip: auto;
width: -moz-min-content;
width: min-content;
height: auto;
padding: var(--spacing-1);
font: var(--font-caption-s);
oveerflow: visible;
background-color: var(--neutral-xtradark);
}
.button .button-text {
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
overflow: hidden;
text-overflow: ellipsis;
/* PROVISIONAL HACK - component */
display: flex;
align-items: center;
}
.button .button-text svg {
margin-right: var(--spacing-1);
vertical-align: middle;
}
/* Specific sizes for buttons */
.button.font-caption-s {
font: var(--font-caption-s);
font-weight: var(--fw-bold);
padding: var(--spacing-1) calc(var(--spacing-3) / 1.25 );
}
.button.font-caption-s svg {
width: 16px;
}
.button.font-caption {
font: var(--font-caption);
font-weight: var(--fw-bold);
padding: var(--spacing-1) calc(var(--spacing-3) / 1.25 );
}
.button.font-caption svg {
width: 16px;
}
.button.font-body-m {
font: var(--font-body-m);
font-weight: var(--fw-bold);
padding: var(--spacing-2) var(--spacing-3);
}
/* Use this class to unify input and button height */
.button.as-input {
padding: var(--spacing-2) var(--spacing-3);
}
.button.is-disable,
.button.is-disabled,
.button:disabled {
--background: transparent;
--background-hover: var(--neutral-light);
--color: var(--neutral-medium);
--color-hover: var(--neutral-medium);
pointer-events: none;
filter: grayscale(100%);
opacity: 0.5;
}
.button-multiple {
--color: var(--brand);
--color-hover: var(--brand-dark);
--color-active: var(--brand-dark);
--color-selected: var(--neutral-xtradark);
--color-unselected: var(--neutral);
--icon-size: 20px;
--background: transparent;
--background-hover: transparent;
--background-active: var(--neutral);
--background-selected: var(--neutral-xtralight);
--background-unselected: var(--neutral-white);
--shadow-focus: var(--brand-medium);
--border: currentColor;
--border-hover: currentColor;
--border-selected: var(--neutral-light);
--border-unselected: currentColor;
/* defautl button is-primary */
--color: var(--neutral-white);
--color-hover: var(--neutral-white);
--color-active: var(--neutral-white);
--background: var(--brand);
--background-hover: var(--brand-dark);
--background-active: var(--brand-xtradark);
--shadow-focus: var(--brand-medium);
display: inline-flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
text-align: center;
max-width: 100%;
padding: var(--spacing-1) calc(var(--spacing-1) * 3);
color: var(--color);
background: none;
background-color: var(--background);
border: none;
border-color: var(--border);
cursor: pointer;
border-radius: var(--border-radius-m);
font: var(--font-body);
font-weight: var(--fw-bold);
outline: 0;
/* white-space: nowrap; */
text-decoration: none;
vertical-align: middle;
}
.button-multiple:hover {
color: var(--color-hover);
background-color: var(--background-hover);
border-color: var(--border-hover);
}
.button-multiple.is-focus,
.button-multiple:focus-visible {
box-shadow: 0 0 0 4px var(--shadow-focus);
}
.button-multiple:active {
color: var(--color-active);
background-color: var(--background-active);
}
.button-multiple svg {
width: var(--icon-size);
height: var(--icon-size);
vertical-align: middle;
}
.button-multiple svg > * {
fill: currentColor;
}
.button-multiple .button-pre {
display: inherit;
}
.button-multiple .button-pre svg {
margin-right: calc(var(--spacing-2)/1.25);
}
.button-multiple .button-text {
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
overflow: hidden;
text-overflow: ellipsis;
}
.button-multiple .button-next {
display: inherit;
}
.button-multiple .button-next svg {
margin-left: calc(var(--spacing-2)/1.25);
}
/* &.is-primary {
--background: var(--brand);
--background-hover: var(--brand-dark);
--color: var(--neutral-white);
--color-hover: var(--neutral-white);
--shadow-focus: var(--brand-medium);
--color-active: var(--neutral-white);
--background-active: var(--brand-xtradark);
} */
.button-multiple.is-secondary {
--background: var(--neutral-dark);
--background-hover: var(--neutral-xtradark);
--color: var(--neutral-white);
--color-hover: var(--neutral-white);
--shadow-focus: var(--neutral-medium);
--color-active: var(--neutral-white);
--background-active: var(--neutral-xtradark);
}
/* Default button component */
.button-multiple.is-tertiary {
--background: var(--neutral-white);
--background-hover: var(--neutral-white);
--color: var(--neutral-dark);
--color-hover: var(--neutral-xtradark);
--shadow-focus: var(--neutral-light);
--color-active: var(--neutral);
--background-active: var(--neutral-white);
border-width: 1px;
border-style: solid;
--border: var(--neutral-medium);
--border-hover: var(--neutral-dark);
padding: calc(var(--spacing-1) - 1px) calc(var(--spacing-1) * 3);
}
.button-multiple.is-pro {
text-transform: uppercase;
--background: var(--secondary);
--background-hover: var(--secondary-dark);
--color: var(--neutral-white);
--color-hover: var(--neutral-white);
--shadow-focus: var(--secondary-medium);
--color-active: var(--neutral-white);
--background-active: var(--secondary-xtradark);
}
.button-multiple.is-destructive {
--background: var(--destructive);
--background-hover: var(--destructive-dark);
--color: var(--neutral-white);
--color-hover: var(--neutral-white);
--shadow-focus: var(--destructive-light);
--color-active: var(--neutral-white);
--background-active: var(--destructive-dark);
}
.button-multiple.is-disabled,
.button-multiple:disabled {
--background: var(--neutral-light);
--background-hover: var(--neutral-light);
--color: var(--neutral-medium);
--color-hover: var(--neutral-medium);
pointer-events: none;
}
.button-multiple.is-busy {
color: var(--neutral-white);
background-color: var(--neutral-light);
--shadow-focus: var(--neutral-medium);
cursor: wait;
}
/* pointer-events: none; */
.button-multiple.is-busy.is-tertiary {
background-color: var(--neutral-xtralight);
--border: var(--neutral-light);
color: var(--neutral-light);
}
.button-multiple.is-icon {
--icon-size: 22px;
aspect-ratio: 1;
padding: var(--spacing-1);
}
.button-multiple.is-icon .button-text {
position: absolute;
width: 1px;
height: 1px;
border: 0;
clip: rect(0, 0, 0,0);
margin: -1px;
padding: 0;
overflow: hidden;
}
.button-multiple.is-icon .button-pre svg, .button-multiple.is-icon .button-next svg {
margin: 0;
}
.button-multiple.is-icon.is-mini {
--icon-size: 15px;
padding: calc(var(--spacing-2) / 1.75);
}
.button-multiple.is-icon.has-tooltip {
position: relative;
}
.button-multiple.is-icon.has-tooltip::before {
display: none;
position: absolute;
content: '';
width: 0;
height: 0;
border-left: var(--spacing-1) solid transparent;
border-right: var(--spacing-1) solid transparent;
border-bottom: var(--spacing-1) solid var(--neutral-xtradark);
z-index: 1;
bottom: -6px;
}
.button-multiple.is-icon.has-tooltip:hover .button-text {
clip: auto;
width: -moz-max-content;
width: max-content;
max-width: 110px;
top: calc(100% + var(--spacing-1));
height: auto;
padding: var(--spacing-1);
font: var(--font-caption-s);
background-color: var(--neutral-xtradark);
color: var(--neutral-white);
border-radius: var(--border-radius-s);
}
.button-multiple.is-icon.has-tooltip:hover::before {
display: inline-block;
}
.button-multiple.is-block svg {
margin-right: 0;
margin-top: calc(var(--spacing-1)/2);
}
.button-multiple.is-block {
flex-direction: column;
gap: var(--spacing-1);
}
.button-multiple.is-multiline .button-text {
white-space: normal;
}
.button-multiple.is-fluid {
width: 100%;
}
.button-multiple.is-link {
cursor: pointer;
min-width: 0;
padding-left: 0;
padding-right: 0;
border-radius: 0;
border: none;
text-decoration: none;
--background: transparent;
--background-hover: transparent;
--background-active: transparent;
--shadow-focus:transparent;
}
.button-multiple.is-link:active {
color: var(--brand-dark);
background-color: transparent;
--background-hover: transparent;
}
/* svg {
--baseline-distance: calc(var(--font-size-3) * 1.38);
--icon-offset: calc(var(--baseline-distance) - var(--icon-size) / 2);
transform: translateY(calc(var(--icon-offset) * -1));
} */
.button-multiple.is-link.is-destructive {
--color: var(--destructive);
--color-hover: var(--destructive-dark);
color: var(--color);
}
.button-multiple.is-link.is-destructive:hover {
color: var(--color-hover);
}
.button-multiple.is-link.is-pro {
--color: var(--secondary-dark);
--color-hover: var(--secondary-xtradark);
color: var(--color);
}
.button-multiple.is-link.is-pro:hover {
color: var(--color-hover);
}
/* Use this class to unify input and button height */
.button-multiple.as-input {
padding: var(--spacing-2) calc(var(--spacing-1) * 3);
}
/* Specific sizes for buttons */
.button-multiple.font-caption-s {
--icon-size: 18px;
font: var(--font-caption-s);
font-weight: var(--fw-bold);
}
.button-multiple.font-caption {
font: var(--font-caption);
font-weight: var(--fw-bold);
}
.button-multiple.font-body-m {
--icon-size: 22px;
font: var(--font-body-m);
font-weight: var(--fw-bold);
padding-block: calc(var(--spacing-1) * 1.75);
}
.msg {
position: relative;
font: var(--font-caption);
--color: var(--neutral-white);
--background: var(--neutral-dark);
--border: var(--neutral-xtradark);
color: var(--color);
background-color: var(--background);
border: 1px solid var(--border);
border-radius: var(--border-radius-m);
padding: var(--spacing-2) var(--spacing-3);
}
.msg:has(> svg) {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.msg::before {
content:"";
display: block;
position: absolute;
top: -1px;
left: -1px;
width: calc(var(--spacing-2) / 1.25);
height: calc(100% + 2px);
background-color: var(--border);
border-radius: var(--border-radius-m) 0 0 var(--border-radius-m);
}
.msg ul {
margin: 0;
padding-left: var(--spacing-3);
}
.msg ul li {
padding-left: var(--spacing-1);
}
.msg ul li:not(:last-child) {
margin-bottom: var(--spacing-1);
}
.msg ul > ::marker {
/* content: "ⓘ"; */
content: "➔";
font: var(--font-caption);
}
.msg > p {
margin: 0;
}
.msg > h2 {
margin-top: 0;
}
.msg.is-error {
--background: var(--error);
--border: var(--error-dark);
}
.msg.is-info {
--background: var(--brand-light);
--border: var(--brand-medium);
--color: var(--brand);
}
/* display: flex;
align-items: center; */
.msg.is-info::before {
background-color: var(--brand);
}
.msg.is-locked {
display: flex;
align-items: center;
--background: hsl(48, 92%, 90%);
--border: hsl(47, 90%, 62%);
--color: hsl(47, 26%, 34%);
margin-inline: auto;
}
.msg.is-locked::before {
/* background-color: var(--border); */
}
.msg.is-locked svg {
margin-right: var(--spacing-2);
vertical-align: middle;
min-width: 44px;
min-height: 44px;
}
.msg.is-locked svg > * {
fill: var(--border);
}
.msg.border-radius-0 {
border-radius: 0;
}
.msg.border-radius-0::before {
border-radius: 0;
}
/* icons */
.has-icon {
display: inline-flex;
align-items: center;
}
.has-icon::before {
display: inline-block;
content: "";
width: 22px;
height: 22px;
min-width: 22px;
margin-right: calc( var(--spacing-1) + (var(--spacing-1) / 2));
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
}
/* icon sizes */
.has-icon.icon-m::before {
width: var(--font-size-7);
height: var(--font-size-7);
min-width: var(--font-size-7);
}
.has-icon.icon-l::before {
width: var(--font-size-8);
height: var(--font-size-8);
min-width: var(--font-size-8);
}
.has-icon.icon-block {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--spacing-1);
}
/* change default color icon https://codepen.io/sosuke/pen/Pjoqqp */
/* .icon-color-brand::before {
filter: invert(24%) sepia(97%) saturate(1799%) hue-rotate(239deg) brightness(92%) contrast(113%) !important;
} */
/*
.icon-color-brand-medium::before {
filter: invert(73%) sepia(8%) saturate(1844%) hue-rotate(183deg) brightness(91%) contrast(90%) !important;
} */
svg {
vertical-align: middle;
}
svg.icon-link > * {
fill: currentcolor;
}
svg.icon-color-neutral-white > * {
fill: var(--neutral-white);
}
svg.icon-color-brand > * {
fill: var(--brand);
}
svg.icon-color-brand-medium > * {
fill: var(--brand-medium);
}
svg.icon-color-destructive > * {
fill: var(--destructive);
}
svg.icon-xs{
width: var(--font-size-2);
height: var(--font-size-2);
min-width: var(--font-size-2);
}
svg.icon-s{
width: var(--font-size-4);
height: var(--font-size-4);
min-width: var(--font-size-4);
}
svg.icon-sm{
width: var(--font-size-6);
height: var(--font-size-6);
min-width: var(--font-size-6);
}
svg.icon-m{
width: var(--font-size-7);
height: var(--font-size-7);
min-width: var(--font-size-7);
}
svg.icon-l {
width: var(--font-size-8);
height: var(--font-size-8);
min-width: var(--font-size-8);
}
svg.icon-xl {
width: var(--spacing-9);
height: var(--spacing-9);
min-width: var(--spacing-9);
}
svg.icon-reduce-xs {
padding: 1px;
}
svg.icon-block {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--spacing-1);
}
.has-hover:hover.icon-color-destructive > * {
fill: var(--destructive-dark);
}
/* .icon-color-neutral::before {
filter: invert(44%) sepia(12%) saturate(326%) hue-rotate(210deg) brightness(90%) contrast(90%);
} */
/* .icon-color-neutral-white::before {
filter: invert(99%) sepia(49%) saturate(2%) hue-rotate(239deg) brightness(113%) contrast(100%) !important;
} */
/* icons */
/* .icon-world::before {
background-image: url(../media/icon/world.svg);
}
.icon-calendar::before {
background-image: url(../media/icon/calendar.svg);
}
.icon-clock::before {
background-image: url(../media/icon/clock.svg);
} */
/* .icon-money::before {
background-image: url(../media/icon/money.svg);
} */
/* .icon-info::before {
background-image: url(../media/icon/info.svg);
} */
/* .icon-arrow-right::before {
background-image: url(../media/icon/arrow-right.svg);
} */
/*
.icon-arrow-left::before {
background-image: url(../media/icon/arrow-left.svg);
} */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .dropdown-action {
z-index: 1;
}
.dropdown .dropdown-action svg {
transform: rotate(0deg);
transition: ease-in-out 150ms;
}
.dropdown .dropdown-action[aria-expanded="true"]{
/* svg {
transform: rotate(-45deg);
} */
}
.dropdown .dropdown-action[aria-expanded="true"]::after {
bottom: -14px;
right: 32px;
position: absolute;
z-index: 3;
content:"";
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-bottom: 13px solid var(--neutral-white);
}
.dropdown .dropdown-action[aria-expanded="true"]::before {
bottom: -14px;
right: 31px;
position: absolute;
z-index: 2;
content:"";
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-bottom: 14px solid var(--neutral-light);
}
.dropdown .dropdown-content {
position: absolute;
z-index:2;
width: var(--spacing-22);
max-height: 80vh;
overflow-y: auto;
padding: var(--spacing-1);
border: 1px solid var(--neutral-light);
background-color: var(--neutral-white);
border-radius: var(--border-radius-m);
box-shadow: 0 0 var(--spacing-2) var(--spacing-1) hsla(0, 0%, 9%, 0.15);
transform-origin: top right;
right: 0;
margin-top: calc(var(--spacing-2) - 1px);
}
/* todo: new common style for this? */
.dropdown .dropdown-content ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.actions .dropdown-action button, .actions-button .dropdown-action button {
transition: ease-in-out 250ms all;
}
.actions .dropdown-action[aria-expanded="true"] button,.actions-button .dropdown-action[aria-expanded="true"] button{
transform: rotate(90deg);
opacity: .5;
}
.actions .dropdown-action[aria-expanded="true"]::after, .actions-button .dropdown-action[aria-expanded="true"]::after {
right: 13px;
}
.actions .dropdown-action[aria-expanded="true"]::before, .actions-button .dropdown-action[aria-expanded="true"]::before {
right: 12px;
}
.actions .dropdown-content .is-tertiary, .actions-button .dropdown-content .is-tertiary {
/* border-radius: 0; */
border: none;
height: 100%;
background-color: var(--brand-xtralight);
color: var(--brand-xtramedium);
border: 1px solid var(--brand-light);
}
.actions .dropdown-content .is-tertiary.is-focus,
.actions .dropdown-content .is-tertiary:hover,
.actions-button .dropdown-content .is-tertiary.is-focus,
.actions-button .dropdown-content .is-tertiary:hover {
/* background-color: var(--brand-light); */
color: var(--brand-dark);
border-color: var(--brand-medium);
}
.actions .dropdown-content .is-tertiary.is-focus svg > *,.actions .dropdown-content .is-tertiary:hover svg > *,.actions-button .dropdown-content .is-tertiary.is-focus svg > *,.actions-button .dropdown-content .is-tertiary:hover svg > *{
fill: var(--brand-dark);
}
.actions .dropdown-content button:hover, .actions-button .dropdown-content button:hover {
box-shadow: 0 0 0 0px var(--shadow-focus);
}
.actions .dropdown-content .is-focus,.actions-button .dropdown-content .is-focus{
box-shadow: 0 0 0 3px var(--shadow-focus);
}
.actions .dropdown-content .button-pre, .actions-button .dropdown-content .button-pre {
display: block;
width: 100%;
}
.actions .dropdown-content .button-text, .actions-button .dropdown-content .button-text {
font-weight: var(--fw-medium);
}
.actions .dropdown-content svg, .actions-button .dropdown-content svg {
width: 28px;
height: 28px;
}
.actions .dropdown-content svg > *, .actions-button .dropdown-content svg > * {
fill: var(--brand-medium);
}
/* State to add some space on tables */
.actions .actions-button .dropdown-action button, .is-action .actions-button .dropdown-action button {
margin-right: var(--spacing-1);
}
.is-action .actions-button .dropdown-action button {
border-color: var(--neutral-light);
}
.is-action .actions-button .dropdown-action button:hover {
border-color: var(--neutral);
}
.is-action .actions-button .dropdown-action[aria-expanded="true"]::after {
right: 17px;
}
.is-action .actions-button .dropdown-action[aria-expanded="true"]::before {
right: 16px;
}
.product-grid {
display: flex;
justify-content: space-between;
gap: var(--spacing-2);
}
.product-grid .textarea{
min-height: auto;
}
.simple-grid {
position: relative;
/* display: flex;
justify-content: space-between;
gap: var(--spacing-2); */
}
.simple-grid-header {
background-color: var(--neutral-xtralight);
text-align: center;
padding: var(--spacing-2);
}
.draggable {
/* order: 1; */
width: 100%;
padding: var(--spacing-3) var(--spacing-2);
border: 1px solid var(--neutral-mediumlight);
background-color: var(--neutral-white);
}
@media (min-width: 960px) {
.draggable {
border-radius: var(--border-radius-ml)
}
}
/* state inside primary-content */
.primary-content .draggable {
margin-left: calc(var(--spacing-2) * -1);
width: calc(100% + var(--spacing-2) * 2);
}
@media (min-width: 960px) {
.primary-content .draggable {
padding: var(--spacing-3);
margin-left: 0;
width: 100%
}
}
.draggable-content .rich-editor-container {
margin-top: var(--spacing-1);
}
.draggable-content:not(:last-child) {
margin-bottom: var(--spacing-3);
}
.draggable-content:not(:last-child)::after {
display: block;
position: relative;
content: "";
bottom: calc(var(--spacing-1) * -2.25);
left: calc((var(--spacing-2) + 1px) * -1);
width: calc(100% + var(--spacing-2) * 2 + 2px);
height: 1px;
background-color: var(--neutral-mediumlight);
}
@media (min-width: 960px) {
.draggable-content:not(:last-child)::after {
left: calc((var(--spacing-3) + 1px) * -1);
width: calc(100% + var(--spacing-3) * 2 + 2px)
}
}
.draggable-content .draggable-item:not(:last-child) {
margin-bottom: 0;
}
.draggable-content .draggable-item:not(:last-child)::after {
display: none;
}
.or {
width: 100%;
text-align: center;
margin-block: 0;
}
@media (min-width: 960px) {
.or {
width: auto;
margin-block: var(--spacing-2)
}
}
.fluid-responsive-m {
width: 100%;
}
@media (min-width: 960px) {
.fluid-responsive-m {
width: auto
}
}
.draggable-item {
display: flex;
align-items: center;
background-color: var(--neutral-white);
position: relative;
border-radius: var(--border-radius-s);
cursor: move;
padding: var(--spacing-1);
border: 1px solid var(--neutral-light);
}
.draggable-item:not(:last-child) {
margin-bottom: var(--spacing-3);
}
.draggable-item:not(:last-child)::after {
display: block;
position: absolute;
content: "";
bottom: calc(var(--spacing-1) * -2.25);
left: calc((var(--spacing-2) + 1px) * -1);
width: calc(100% + var(--spacing-2) * 2 + 2px);
height: 1px;
background-color: var(--neutral-mediumlight);
}
@media (min-width: 960px) {
.draggable-item:not(:last-child)::after {
left: calc((var(--spacing-3) + 1px) * -1);
width: calc(100% + var(--spacing-3) * 2 + 2px)
}
}
.draggable-item:hover,
.draggable-item.sortable-chosen {
position: relative;
border: 1px dashed var(--neutral);
}
/* background-color: var(--neutral-white); */
.draggable-item:hover::before, .draggable-item.sortable-chosen::before {
position: absolute;
content: "";
top: 0;
left: calc((var(--spacing-2) + 1px) * -1);
width: var(--spacing-1);
height: 100%;
background-color: var(--neutral);
}
.draggable-item.draggable-ghost {
position: relative;
}
.draggable-item.draggable-ghost::before {
position: absolute;
content: "";
top: 0;
left: calc((var(--spacing-2) + 2px) * -1);
width: var(--spacing-1);
height: 100%;
background-color: var(--neutral);
}
.simple-grid-footer ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.simple-grid-footer ul li:not(:last-child) {
margin-bottom: var(--spacing-1);
}
.notification {
/* position: relative; */
position: fixed;
bottom: var(--spacing-3);
right: var(--spacing-3);
--background: var(--neutral-dark);
--color: var(--neutral-light);
--border: var(--neutral-xtradark);
--button-color: var(--neutral-light);
--button-color-hover: var(--neutral-white);
background-color: var(--background);
color: var(--color);
border: 1px solid var(--border);
border-radius: var( --border-radius-m);
padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-3);
font: var(--font-caption-s);
width: 100%;
max-width: var(--spacing-24);
z-index: 16;
}
.notification + .notification {
transform: translateY(-100%);
}
.notification + .notification + .notification {
transform: translateY(-200%);
}
.notification button {
position: absolute;
right: var(--spacing-1);
top: calc(var(--spacing-1) - calc(var(--spacing-1) / 3));
}
.notification button svg {
transform: translateY(-2px);
}
.notification button svg > * {
fill: var(--button-color);
}
.notification button:hover svg > * {
fill: var(--button-color-hover);
}
.notification::before {
content:"";
display: block;
position: absolute;
top: 0;
left: 0;
width: var(--spacing-2);
height: 100%;
background-color: var(--border);
border-radius: var(--border-radius-m) 0 0 var(--border-radius-m);
}
.notification p {
margin: 0;
}
.notification.success {
--background: var(--brand-light);
--border: var(--brand);
--color: var(--brand);
--button-color: var(--brand);
--button-color-hover: var(--brand-dark);
}
.notification.info {
--background: var(--neutral);
--color: var(--neutral-light);
--border: var(--neutral-dark);
}
.notification.locked {
--background: hsl(48, 92%, 90%);
--border: hsl(47, 90%, 62%);
--color: hsl(47, 26%, 34%);
}
.notification.error {
--background: var(--error-light);
--color: var(--error-dark);
--border: var(--error);
--button-color: var(--error);
--button-color-hover: var(--error-dark);
}
.notification.danger {
--background: var(--error-light);
--color: var(--error-dark);
--border: var(--error);
--button-color: var(--error);
--button-color-hover: var(--error-dark);
}
.notification.fade-enter-active,
.notification.fade-leave-active {
transition: opacity 250ms ease;
}
.notification.fade-enter-from,
.notification.fade-leave-to {
opacity: 0;
}
.breadcrumbs {
width: 100%;
height: 100%;
overflow-x: auto;
scrollbar-width: thin;
display: flex;
align-items: center;
}
.breadcrumbs svg{
vertical-align: baseline ;
}
.breadcrumbs svg > * {
fill: var(--brand-medium);
}
.breadcrumbs {
font-weight: var(--fw-medium);
}
.breadcrumbs-list {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex: 1 1 auto;
justify-content: flex-start;
align-items: center;
width: 0;
}
.breadcrumbs-list.has-levels .breadcrumbs-list-item:last-child a {
pointer-events: none;
color: var(--neutral);
}
.breadcrumbs-list-item {
display: flex;
}
.breadcrumbs-list-item a {
display: block;
text-decoration: none;
color: var(--neutral);
}
.breadcrumbs-list-item a:hover {
color: var(--neutral-medium);
}
.breadcrumbs-list-item a:hover svg > * {
fill: var(--brand);
}
.breadcrumbs-list-item:not(:first-child) a {
white-space: nowrap;
overflow: hidden;
max-width: var(--spacing-14);
text-overflow: ellipsis;
color: var(--brand);
}
.breadcrumbs-list-item:not(:first-child) a:hover {
color: var(--brand-dark);
}
@media (min-width: 1281px) {
.breadcrumbs-list-item:not(:first-child) a {
max-width: var(--spacing-19)
}
}
@media (min-width: 1441px) {
.breadcrumbs-list-item:not(:first-child) a {
max-width: calc(var(--spacing-24) * 1.25)
}
}
/* @todo, review this if there´s mor2 than 2 levels */
.breadcrumbs-list-item:nth-child(2) a {
font-weight: var(--fw-medium);
}
.breadcrumbs-list-item:not(:last-child) {
display: flex;
justify-content: flex-start;
align-items: center;
}
.breadcrumbs-list-item:not(:last-child)::after {
content: "/";
margin: 0 var(--spacing-1);
color: var(--neutral-light);
}
.dialog,
.dialog-orza {
position: fixed;
z-index: 70;
background-color: rgba(0, 0, 0, .5);
inset: 0;
overflow-y: auto;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 480px) {
.dialog,
.dialog-orza {
/* padding-bottom: var(--spacing-8); */
align-items: flex-end
}
}
/* state on dialog component */
@media (min-width: 480px) {
.dialog .rich-editor .rich-editor-nav, .dialog-orza .rich-editor .rich-editor-nav {
top: 0
}
}
.sticky-bottom {
position: sticky;
bottom: 0;
z-index: 1;
border-top: 1px solid var(--neutral-light);
}
.dialog-content {
position: relative;
background-color: var(--neutral-white);
width: min(100% - var(--spacing-3), calc(var(--spacing-15) * 2.25));
/* max-height: calc(100dvh - var(--spacing-5)); */
max-height: 100dvh;
overflow-y: auto;
padding: var(--spacing-3);
border-radius: var(--border-radius-m );
box-shadow: 0 10px 15px 5px rgba(0, 0, 0, .25);
text-align: center;
/* svg {
margin-bottom: var(--spacing-1);
} */
}
.dialog-content .button-close {
position: absolute;
top: var(--spacing-1);
right: var(--spacing-1);
}
.dialog-content .txt-left {
text-align: left;
}
.dialog-content :where(p) {
margin-top: 0;
/* color: var(--neutral); */
font: var(--font-caption);
}
.dialog-content h2 {
margin-top: 0;
margin-bottom: var(--spacing-1);
font: var(--font-body-m);
font-weight: var(--fw-medium);
}
.dialog-content h2 + .dialog-content h2:where(p) {
margin-top: 0;
color: var(--neutral-dark);
font: var(--font-caption);
font-weight: var(--fw-medium);
}
/* fix icons align middle */
.dialog-content .font-body-m svg {
transform: translateY(-2px);
}
/* Review ul direct child */
.dialog-content > ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.dialog-content > ul a {
text-decoration: none;
color: var(--brand);
}
.dialog-content > ul a:hover.shadow-s {
background-color: var(--brand-dark);
color: var(--neutral-white);
}
.dialog-content > ul a:hover.shadow-s svg > * {
fill: var(--neutral-white);
}
.dialog-content > ul a:active {
color: var(--brand);
}
.dialog-content .dialog-content-actions {
margin-top: var(--spacing-3);
}
.dialog-content.screen-s {
width: min(100% - var(--spacing-3), 780px);
}
/* .radio-group {
} */
.radio-group-content {
cursor: pointer;
background-color: var(--brand-light);
border: 1px solid var(--brand-medium);
padding: var(--spacing-2);
border-radius: var(--border-radius-m);
}
.radio-group-content:not(:last-child) {
margin-bottom: var(--spacing-1);
}
.radio-group-content.is-active {
border-color: var(--brand);
}
.radio-group-content.is-checked {
background-color: var(--brand);
}
.radio-group-content.is-checked svg > *{
fill: var(--neutral-white);
}
.radio-group-content:focus-visible {
box-shadow: 0 0 0 4px var(--brand-light);
outline: 1px solid var(--brand);
}
.radio-group-content-main {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.radio-group-label {
margin: 0 0 var(--spacing-1) 0;
font: var(--font-body);
font-weight: var(--fw-medium);
color: var(--brand-dark);
}
.radio-group-label.is-checked {
color: var(--neutral-white);
}
.radio-group-description {
font: var(--font-caption-s);
color: var(--brand-xtramedium);
}
.radio-group-description.is-checked {
color: var(--brand-medium);
}
.radio-group-content-check {
margin-left: var(--spacing-2);
}
.radio-group-content-check svg > *{
fill: var(--brand);
}
/* State with columns */
.has-columns .radio-group {
/* display: grid;
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
grid-column-gap: var(--spacing-2);
grid-row-gap: var(--spacing-2); */
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
}
.has-columns .radio-group-content {
flex: 1;
margin-bottom: 0;
}
/* radio button simple */
.radio:checked,
.radio:not(:checked) {
position: absolute;
left: -9999px;
}
.radio:checked + label,
.radio:not(:checked) + label
{
position: relative;
padding-left: var(--spacing-3);
cursor: pointer;
line-height: 120%;
display: inline-block;
}
.radio:checked + label:before,
.radio:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid var(--neutral-medium);
border-radius: 100%;
background: var(--neutral-white);
}
.radio:checked + label:after,
.radio:not(:checked) + label:after {
content: '';
width: 12px;
height: 12px;
background: var(--brand);
position: absolute;
top: 3px;
left: 3px;
border-radius: 100%;
transition: all 0.2s ease;
}
.radio:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
.radio:checked + label:after {
opacity: 1;
transform: scale(1);
}
.switch {
display: flex;
align-items: center;
margin: 0;
}
.switch button {
position: relative;
display: inline-flex;
justify-content: flex-start;
align-items: center;
padding: calc(var(--spacing-1) * 1.15) var(--spacing-1);
width: var(--spacing-5);
min-width: var(--spacing-5);
cursor: pointer;
/* aspect-ratio: 16 / 9; */
background-color: var(--brand-light);
border: 1px solid var(--brand-medium);
border-radius: var(--border-radius-l);
transition: ease-in-out 250ms;
}
.switch button.is-active {
background-color: var(--brand);
border-color: var(--brand-dark);
}
.switch button span {
width: calc(var(--spacing-2) * 1.15);
aspect-ratio: 1;
background-color: var(--brand-medium);
border-radius: 50%;
transition: ease-in-out 250ms;
}
.switch button span.is-active {
background-color: var(--brand-light);
transform: translateX(calc(var(--spacing-3) / 1.10));
}
.switch button:focus-visible {
box-shadow: 0 0 0 4px var(--brand-light);
outline: none;
}
.switch .txt-label {
margin-left: var(--spacing-2);
cursor: pointer;
color: var(--neutral);
}
.pagination {
display: flex;
align-items: center;
flex-flow: row wrap;
gap: calc(var(--spacing-1) * 1.05);
font: var(--font-caption);
font-weight: var(--fw-medium);
margin-top: var(--spacing-5);
margin-bottom: var(--spacing-2);
}
/* span:first-child,
a:first-child {
&::before {
content: "<";
margin-right: 10px;
}
}
span:last-child,
a:last-child {
&::after {
content: ">";
margin-left: 10px;
}
} */
.pagination .pagination-page {
text-decoration: none;
color: var(--neutral-dark);
padding: calc(var(--spacing-1) * 1.5) calc(var(--spacing-2) * 1.5);
vertical-align: middle;
border-radius: var(--border-radius-m);
border: 1px solid var(--neutral-mediumlight);
background-color: var(--neutral-white);
/* &:focus {
box-shadow: 0 0 0 4px var(--brand);
border: none;
} */
}
.pagination .pagination-page:hover {
/* background-color: var(--neutral-xtralightmedium); */
border-color: var(--neutral);
color: var(--neutral-xtradark);
}
.pagination .is-disabled {
color: var(--neutral-medium);
border: 1px solid var(--neutral-mediumlight);
border-radius: var(--border-radius-m);
background-color: var(--neutral-xtralightmedium);
padding: calc(var(--spacing-1) * 1.5) calc(var(--spacing-2) * 1.5);
}
.pagination .is-active {
background-color: var(--neutral-dark);
border-color: var(--neutral-dark);
color: var(--neutral-white);
pointer-events: none;
}
.pills {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
gap: var(--spacing-2);
flex-wrap: wrap;
font: var(--font-caption);
font-weight: var(--fw-medium);
}
.pills a {
display: inline-flex;
align-items: center;
width: -moz-max-content;
width: max-content;
text-decoration: none;
color: var(--neutral);
border: 1px solid var(--neutral-light);
padding: var(--spacing-1) var(--spacing-2);
border-radius: var(--border-radius-l);
background-color: var(--neutral-white);
}
.pills a svg {
width: 18px;
}
.pills a svg > * {
fill: var(--neutral-medium);
}
.pills a svg:first-child {
margin-right: var(--spacing-1);
margin-left: Calc(var(--spacing-1) * -1);
}
.pills a svg:last-child{
margin-left: calc(var(--spacing-2) + var(--spacing-1));
margin-right: Calc(var(--spacing-1) * -1);
}
.pills a:hover {
/* color: var(--neutral-dark); */
border-color: var(--neutral);
}
.pills a:hover svg:last-child > * {
fill: var(--neutral-dark);
}
.banner {
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
height: var(--banner-height);
}
.banner.is-success {
background-color: var(--brand);
}
.banner.is-danger {
background-color: var(--error);
}
.banner svg {
min-width: 22px;
}
.banner > svg {
margin-right: var(--spacing-2);
margin-left: auto;
width: 22px;
}
.banner >div,
.banner .banner-txt {
margin-right: auto;
margin-block: 0;
}
.banner .banner-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.banner .banner-list li {
display: inline-block;
}
.banner .banner-list li:not(:last-child)::after {
content: "|";
margin-inline: var(--spacing-1);
opacity: .5;
}
.banner button {
background-color: var(--neutral-white);
border-radius: 50%;
margin-left: var(--spacing-2);
align-items: center;
aspect-ratio: 1;
padding: var(--spacing-1);
}
.banner button:hover {
background-color: var(--neutral-white);
opacity: .7;
}
.banner button.is-success svg > * {
fill: var(--brand);
}
.banner button.is-danger svg > * {
fill: var(--error);
}
.modal {
position: fixed;
z-index: 50;
top: 0;
right: 0;
width: 100%;
height: 100%;
overflow-y: hidden;
}
.modal-container {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
/* background-color: rgba(255, 255, 255, 0.5); */
}
.modal-right {
animation: slide 400ms cubic-bezier(.09,.77,.38,.98);
position: fixed;
overflow-y: auto;
z-index: 60;
top: 0;
right: 0;
width: min(100% - var(--spacing-5), calc(var(--spacing-24) * 2));
height: 100%;
background-color: var(--neutral-xtralight);
box-shadow: 0 5px 20px 8px hsla(0, 0%, 0%, 0.2);
}
.modal-right .button-close {
position: relative;
top: var(--spacing-2);
left: var(--spacing-3);
display: none;
}
.modal-right code {
display: inline-block;
font: var(--font-caption-s);
background-color: var(--neutral-mediumlight);
padding: var(--spacing-1);
border-radius: var(--border-radius-s);
}
@keyframes slide {
0% {
fade: 0;
right: calc(var(--spacing-24) * -2);
}
100% {
fade: 1;
right: 0;
}
}
.modal-right-transition{
transition: 400ms cubic-bezier(.09,.77,.38,.98);
}
.modal-right-transition-to {
right: calc(var(--spacing-24) * -2);
fade: 0;
}
.is-standalone {
padding: var(--spacing-3);
padding-top: calc(var(--spacing-1) * .25);
}
.is-standalone .actions {
top: calc(var(--spacing-1) * .5);;
background-color: var(--neutral-xtralight);
box-shadow: 0 0 0 4px var(--neutral-xtralight);
border-image-source: none;
border-color: var(--neutral-light);
border-top: 0;
border-bottom-width: 1px;
width: calc(100% + var(--spacing-3) * 2);
margin-left: calc(var(--spacing-3) * -1);
padding-inline: var(--spacing-3);
}
.removeBtn{
background: #f5f5f5;
border: none;
color: red;
font-size: 1.5em;
cursor: pointer;
}
.upload {
border: 1px dashed var(--neutral-medium);
padding: var(--spacing-3);
text-align: center;
cursor: pointer;
}
.upload p {
margin-top: var(--spacing-1);
margin-bottom: 0;
font: var(--font-body);
font-weight: var(--fw-medium);
color: var(--neutral-xtradark);
}
.upload p span {
display: block;
font: var(--font-caption);
color: var(--neutral);
}
.upload ul {
list-style: none;
margin: 0;
padding: 0;
}
.upload progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--neutral-light);
}
.upload progress[value] {
width: 100%;
height: 40px;
}
.upload ::-moz-progress-bar {
background-color: var(--brand);
}
.upload ::-webkit-progress-bar {
background-color: var(--neutral-light);
}
.upload ::-webkit-progress-value {
background-color: var(--brand);
}
.upload:hover {
border-color: var(--neutral-xtradark);
background-color: var(--neutral-xtralight);
}
.upload-item{
text-align: left;
font: var(--font-caption);
}
.upload-item:not(:last-child){
margin-bottom: var(--spacing-4);
}
.upload-item p,.upload-item span {
margin-top: 0;
margin-bottom: var(--spacing-1);
}
.global-search {
position: fixed;
inset: 0;
z-index: 50;
padding: var(--spacing-2);
display: flex;
justify-content: center;
align-items: center;
}
.global-search-overlay {
position: fixed;
background-color: var(--neutral-xtradark);
inset: 0;
opacity: .6;
transition: all ease-in-out 250ms;
}
.dialog-search-content {
position: relative;
width: min(100%, 680px);
background-color: var(--neutral-white);
border-radius: var(--spacing-2);
padding: var(--spacing-2);
box-shadow: 0 0 15px 5px var(--neutral-dark);
}
.dialog-search-content .icon-search {
position: absolute;
top: calc(var(--spacing-3) + 4px);
left: var(--spacing-3);
}
.dialog-search-content-input input {
padding-left: calc(var(--spacing-4) + var(--spacing-1));
}
.dialog-search-content-list {
list-style-type: none;
margin: 0;
border-radius: 0 0 var(--spacing-2) var(--spacing-2);
background-color: var(--neutral-xtralight);
transform: translateY(var(--spacing-2));
padding: var(--spacing-2);
position: relative;
left: calc(var(--spacing-2) * -1);
width: calc(100% + var(--spacing-2) * 2);
overflow-x: auto;
max-height: 350px;
font: var(--font-caption-s);
}
/* background-color: var(--neutral-xtralight); */
.dialog-search-content-list h2 {
font: var(--font-caption-s);
margin: var(--spacing-1) 0 0 0;
color: var(--neutral);
padding-block: var(--spacing-2);
border-top: 1px solid var(--neutral-light);
font-weight: var(--fw-regular);
}
.dialog-search-content-list li:first-child h2 {
padding-top: 0;
border-top: none;
}
.dialog-search-content-list ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.dialog-search-content-list ul li {
font: var(--font-caption);
font-weight: var(--fw-medium);
padding: var(--spacing-1);
border-radius: var(--border-radius-s);
color: var(--neutral-dark);
cursor: pointer;
}
.dialog-search-content-list ul li.is-active {
background-color: var(--brand);
color: var(--neutral-white);
}
.dialog-search-content-list ul li svg {
margin-right: var(--spacing-1);
transform: translateY(-1px);
}
.dialog-search-content-list ul li svg > * {
fill: currentColor;
}
.only-payment {
background-color: var(--secondary);
color: var(--secondary-xtradark);
padding: var(--spacing-1) var(--spacing-2);
border-radius: var(--border-radius-m);
margin-bottom: var(--spacing-1);
width: -moz-max-content;
width: max-content;
}
.only-payment p {
display: inline-block;
font: var(--font-caption-s);
font-weight: var(--fw-medium);
margin: 0;
text-transform: uppercase;
}
/* Modules */
.select-lang {
text-align: left;
background-color: var(--neutral-xtradark);
}
.select-lang h4 {
display: flex;
-moz-column-gap: var(--spacing-2);
column-gap: var(--spacing-2);
align-items: center;
font: var(--font-body);
margin-top: 0;
color: var(--neutral-light);
border-bottom: 1px solid var(--neutral-dark);
padding-bottom: var(--spacing-2);
}
.select-lang svg > * {
fill: var(--neutral-light);
}
.select-lang .close {
position: absolute;
top: var(--spacing-3);
right: var(--spacing-3);
}
.select-lang .close:hover {
opacity: .6;
}
.select-lang ul{
font: var(--font-caption-s);
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: var(--spacing-3);
column-gap: var(--spacing-3);
}
.select-lang ul li a {
color: var(--neutral-medium);
}
.select-lang ul li a:hover {
color: var(--neutral-white);
}
.select-lang ul li:not(:last-child) {
margin-bottom: var(--spacing-2);
}
.select-lang ul li.is-active {
color: var(--neutral-white);
}
.auth {
min-height: 100vh;
background-color: var(--neutral-xtralight);
}
.auth a {
text-decoration: none;
color: var(--brand);
}
.auth a:hover {
color: var(--brand-dark);
}
/*
.logo {
position: absolute;
top: var(--spacing-2);
left: var(--spacing-2);
margin-bottom: var(--spacing-2);
}
.logo-orza,
.logo-me {
fill: var(--neutral-white);
} */
.auth .button {
margin-top: var(--spacing-4);
}
@media (min-width: 768px) {
.auth {
display: flex;
justify-content: center;
align-items: center
/* .logo {
position: relative;
top: var(--spacing-0);
left: var(--spacing-0);
}
.logo-orza,
.logo-me {
fill: var(--brand);
} */
}
}
.auth .nav-lang {
position: absolute;
top: calc(var(--spacing-2) * 1.35);
right: var(--spacing-3);
display: inline-flex;
align-items: center;
-moz-column-gap: var(--spacing-1);
column-gap: var(--spacing-1);
font: var(--font-caption-s);
}
.auth .nav-lang svg {
min-width: 22px;
}
.auth .nav-lang svg * {
fill: currentColor;
}
.auth .nav-lang span {
display: inline-block;
}
svg.logo .logo-orza {
transform: translateY(0px);
transition: 200ms ease-out 400ms;
}
svg.logo .logo-line {
width: 56px;
transform:translateX(0px);
transition: 200ms ease-in-out 200ms;
}
svg.logo:hover .logo-orza {
transform: translateY(-11px);
transition: 200ms ease-in 50ms;
}
svg.logo:hover .logo-line {
width: 140px;
transform:translateX(-84px);
}
.auth-content {
min-height: 100vh;
display: flex;
flex-flow: column;
}
/* background-color: var(--neutral-white); */
.auth-content > div {
width: 100%;
}
/* max-width: 1024px; */
@media (min-width: 768px) {
.auth-content {
flex-flow: row;
width: 100%
}
.auth-content > div {
width: 50%;
}
}
.auth-card {
padding: var(--spacing-2);
order: 1;
display: grid;
place-content: center;
}
.auth-card .logo {
display: inline-block;
margin-bottom: var(--spacing-3);
}
@media (min-width: 768px) {
.auth-card {
padding: var(--spacing-3) var(--spacing-4);
order:2
}
.auth-card .logo {
display: none;
}
}
.auth-card-container {
max-width: 400px;
}
.auth-decoration {
display: none;
position: relative;
background-color: var(--brand);
order: 2;
overflow: hidden;
}
.auth-decoration img {
width: 100%;
height: 100vh;
vertical-align: middle;
-o-object-fit: cover;
object-fit: cover;
/* mix-blend-mode: lighten; */
}
.auth-decoration .logo {
position: absolute;
top: var(--spacing-3);
left: var(--spacing-3);
z-index: 1;
}
.auth-decoration .logo > * {
fill: var(--neutral-white);
}
@media (min-width: 768px) {
.auth-decoration {
order: 1;
display: block
}
}
.auth-title {
font: var(--font-heading);
color: var(--neutral-dark);
margin-bottom: var(--spacing-1);
margin-top: 0;
}
.auth-description {
color: var(--neutral);
font: var(--font-body);
margin-bottom: var(--spacing-4);
}
.auth-form {
margin-top: var(--spacing-2);
}
.auth-input {
border: 1px solid var(--neutral-light);
border-radius: var(--border-radius-m);
}
.auth-input .auth-input-item {
position: relative;
}
.auth-input .auth-input-item:not(:first-child) .input:focus {
border-top-left-radius: 0;
border-bottom-left-radius: var(--border-radius-m);
}
.auth-input .auth-input-item:not(:first-child):not(:last-child) .input:focus {
border-radius: 0;
}
.auth-input .auth-input-item:not(:last-child) {
border-bottom: 1px solid var(--neutral-light);
}
.auth-input .auth-input-item:not(:last-child) .input:focus {
border-top-left-radius: var(--border-radius-m);
border-bottom-left-radius: 0;
}
.auth-input .ly-columns .auth-input-item {
border-bottom: 0;
}
.auth-input .ly-columns .auth-input-item:not(:last-child) {
border-right: 1px solid var(--neutral-light);
}
.auth-input .ly-columns .auth-input-item:not(:last-child) .input:focus {
border-top-left-radius: 0;
border-bottom-left-radius: var(--border-radius-m);
}
.auth-input .ly-columns .auth-input-item:not(:first-child) .input:focus {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.auth-input .input {
padding: var(--spacing-3) var(--spacing-1) Var(--spacing-2);
border: none;
box-shadow: none !important;
border-left: var(--spacing-1) solid transparent;
}
.auth-input .input:focus {
border-color: var(--brand);
}
.auth-input .label {
position: absolute;
padding: var(--spacing-1) calc(var(--spacing-1) + var(--spacing-1));
}
.auth-options {
font: var(--font-caption);
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--spacing-2);
}
.auth-options .checkbox-label {
align-items: flex-start;
}
.auth-alternatives {
text-align: center;
font: var(--font-caption);
color: var(--neutral);
margin-top: var(--spacing-4);
margin-bottom: var(--spacing-0);
}
/* @TODO: move this a component layout */
.ly-columns {
display: flex;
}
.auth-terms {
list-style-type: "";
margin: 0;
padding: 0;
font: var(--font-caption);
-webkit-margin-before: var(--spacing-5);
margin-block-start: var(--spacing-5);
border-top: 1px solid var(--neutral-light);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--spacing-2);
padding-top: var(--spacing-1);
}
.auth-terms a {
color: var(--neutral-dark);
}
.auth-terms a:hover {
color: var(--neutral);
}
.setup {
min-height: 100vh;
padding: var(--spacing-4) var(--spacing-2);
}
@media (min-width: 768px) {
.setup {
padding: var(--spacing-6) var(--spacing-8)
}
}
/* @media (--screen-s) {
display: flex;
justify-content: center;
align-items: center;
} */
.setup::after {
content: "";
position: fixed;
bottom: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 75vh;
background-color: var(--brand);
}
.setup-content {
max-width: 1024px;
margin: 0 auto;
padding-bottom: var(--spacing-4);
background-color: var(--neutral-white);
box-shadow: 0 0 var(--spacing-3) var(--spacing-1) hsla(0, 0%, 9%, 0.25);
border-radius: var(--spacing-3);
}
.setup-nav {
padding: var(--spacing-2);
background-color: var(--brand-xtralight);
border-bottom: 1px solid var(--brand-light);
border-radius: var(--spacing-3) var(--spacing-3) 0 0;
}
@media (min-width: 768px) {
.setup-nav {
padding: var(--spacing-2) var(--spacing-5)
}
}
@media (min-width: 960px) {
.setup-nav {
padding: var(--spacing-2) var(--spacing-10)
}
}
.setup-nav ol {
display: flex;
flex-wrap: wrap;
-moz-column-gap: var(--spacing-4);
column-gap: var(--spacing-4);
row-gap: var(--spacing-2);
list-style-type: none;
padding: 0;
padding: 0;
}
.setup-nav li {
flex: 1;
font: var(--font-body);
font-weight: var(--fw-bold);
color: var(--neutral);
}
.setup-nav li.is-active {
color: var(--brand);
}
.setup-nav li.is-active span::before {
background-color: var(--brand);
}
.setup-nav span {
display: block;
font: var(--font-caption);
}
.setup-nav span::before {
content: '';
display: block;
widht: 100%;
height: var(--spacing-1);
background-color: var(--neutral-light);
margin: var(--spacing-1) 0;
}
.setup-info {
padding: var(--spacing-2);
}
@media (min-width: 768px) {
.setup-info {
padding: var(--spacing-2) var(--spacing-5)
}
}
@media (min-width: 960px) {
.setup-info {
padding: var(--spacing-2) var(--spacing-10)
}
}
.setup-title {
font: var(--font-heading);
margin-bottom: var(--spacing-0);
}
.setup-description {
color: var(--neutral);
font: var(--font-body);
margin-bottom: var(--spacing-4);
margin-top: var(--spacing-1);
}
.setup-description a {
text-decoration: none;
color: var(--brand);
}
.setup-description a:hover {
color: var(--neutral-dark);
}
.setup-form {
padding: var(--spacing-0) var(--spacing-2);
}
@media (min-width: 768px) {
.setup-form {
padding: var(--spacing-0) var(--spacing-5)
}
}
@media (min-width: 960px) {
.setup-form {
padding: var(--spacing-0) var(--spacing-10)
}
}
.setup-input {
border: 1px solid var(--neutral-light);
border-radius: var(--border-radius-m);
}
.setup-input .setup-input-item {
position: relative;
}
.setup-input .setup-input-item.is-alone:first-child .input {
border-bottom-left-radius: var(--border-radius-m) !important;
}
.setup-input .setup-input-item:first-child .input {
border-bottom-left-radius: 0;
}
.setup-input .setup-input-item:not(:first-child) .input:focus {
border-top-left-radius: 0;
border-bottom-left-radius: var(--border-radius-m);
}
.setup-input .setup-input-item:not(:first-child):not(:last-child) .input:focus {
border-radius: 0;
}
.setup-input .setup-input-item:not(:last-child) {
border-bottom: 1px solid var(--neutral-light);
}
.setup-input .setup-input-item:not(:last-child) .input:focus {
border-top-left-radius: var(--border-radius-m);
border-bottom-left-radius: 0;
}
.setup-input .setup-input-item.is-invalid .input {
border-color: var(--error);
}
.setup-input .setup-input-item.is-invalid .input:not(:first-child) {
border-radius: 0;
}
@media (min-width: 1024px) {
.setup-input.ly-inline {
display: flex
}
.setup-input.ly-inline > .setup-input-item {
border-bottom: none;
flex-grow: 1;
}
.setup-input.ly-inline > .setup-input-item + .setup-input-item {
border-left: 1px solid var(--neutral-light);
}
}
.setup-input .ly-columns:first-child .setup-input-item:first-child .input:focus {
border-top-left-radius: var(--border-radius-m);
border-bottom-left-radius: 0;
}
.setup-input .ly-columns:not(:first-child):not(:last-child) .setup-input-item:first-child .input:focus {
border-radius: 0;
}
.setup-input .ly-columns:not(:last-child) {
border-bottom: 1px solid var(--neutral-light);
}
.setup-input .ly-columns > div {
flex-grow: 1;
width: 50%;
}
.setup-input .ly-columns .setup-input-item {
border-bottom: 0;
}
.setup-input .ly-columns .setup-input-item:not(:last-child) {
border-right: 1px solid var(--neutral-light);
}
.setup-input .ly-columns .setup-input-item:not(:last-child) .input:focus {
border-top-left-radius: 0;
border-bottom-left-radius: var(--border-radius-m);
}
.setup-input .ly-columns .setup-input-item:not(:first-child) .input:focus {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.setup-input .input{
position: relative;
z-index: 1;
background-color: transparent;
padding: var(--spacing-3) var(--spacing-1) Var(--spacing-2);
border: none;
box-shadow: none !important;
border-left: var(--spacing-1) solid transparent;
background-color: transparent;
}
.setup-input .input:focus {
border-color: var(--brand);
}
.setup-input .label {
position: absolute;
padding: var(--spacing-1) calc(var(--spacing-1) + var(--spacing-1));
}
.setup-input .select{
position: relative;
z-index: 1;
background-color: transparent;
background-position: calc(100% - var(--spacing-1)) var(--spacing-3) ;
padding-top: var(--spacing-3);
padding-bottom: var(--spacing-1);
padding-left: var(--spacing-2);
box-shadow: none;
border: none;
}
.setup-input .select:focus {
border-color: var(--brand);
}
.setup-form-nav {
display: block;
display: flex;
justify-content: center;
gap: var(--spacing-6);
padding-top: var(--spacing-4);
text-align: center;
}
.setup-form-nav .button {
font-weight: var(--fw-regular);
font: var(--font-caption);
}
.setup-form-nav .button::before {
filter: invert(24%) sepia(97%) saturate(1799%) hue-rotate(239deg) brightness(92%) contrast(113%) !important;
}
.setup-form-nav .button:hover {
color: var(--neutral);
}
.setup-form-nav .button:hover::before {
filter: invert(43%) sepia(8%) saturate(504%) hue-rotate(210deg) brightness(93%) contrast(85%) !important;
}
.setup-form-nav .button.is-busy {
color: var(--neutral);
}
.setup-form-nav .button.is-busy::before {
filter: invert(43%) sepia(8%) saturate(504%) hue-rotate(210deg) brightness(93%) contrast(85%) !important;
}
.setup-form-nav .button.is-busy {
background-color: transparent !important;
pointer-events: none;
opacity: .7;
}
.setup-options {
text-align: center;
font: var(--font-caption);
max-width: 480px;
color: var(--brand-medium);
margin: var(--spacing-3) auto;
}
.setup-options a {
color: var(--neutral-white);
text-decoration: none;
}
.setup-options a:hover {
color: var(--brand-medium);
}
.setup-resume {
position: relative;
border-radius: var(--border-radius-l);
border: 1px solid var(--neutral-light);
box-shadow: 0 0 var(--spacing-3) var(--spacing-1) hsla(0, 0%, 9%, 0.25);
margin-left: auto;
margin-right: auto;
}
.setup-resume > svg {
position: absolute;
right: var(--spacing-2);
top: var(--spacing-2);
width: 30px;
}
.setup-resume-main {
padding: var(--spacing-3) var(--spacing-3);
}
.setup-resume-main p {
margin: 0;
}
.setup-resume-main p:not(:last-child) {
margin-bottom: var(--spacing-1);
}
.setup-resume-main p {
color: var(--neutral);
}
.setup-resume-main p:first-child {
font-weight: var(--fw-bold);
color: var(--neutral-dark);
}
.setup-resume-secondary {
display: flex;
flex-flow: row wrap;
}
.setup-resume-secondary > * {
/* flex: 1 1 50%; */
width: 50%;
}
@media (min-width: 960px) {
.setup-resume-secondary > * {
/* flex: 1 1 auto; */
/* flex-grow: 1; */
width: 25%;
}
}
.setup-resume-secondary .coin {
font: var(--font-body-m);
color: var(--brand-mediumlight);
font-weight: var(--fw-medium);
color: var(--brand-mediumlight);
line-height: 0;
}
.setup-resume-secondary {
border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
color: var(--neutral-white);
background-color: var(--brand);
}
.setup-resume-secondary .setup-resume-secondary-item {
display: flex;
justify-content: center;
align-items: center;
-moz-column-gap: var(--spacing-1);
column-gap: var(--spacing-1);
padding: calc(var(--spacing-2) + var(--spacing-1)) var(--spacing-2);
font: var(--font-caption-s);
margin: 0;
border-top: 1px solid var(--brand-medium);
}
.setup-resume-secondary .setup-resume-secondary-item svg * {
fill: var(--brand-mediumlight);
}
.setup-resume-secondary .setup-resume-secondary-item:nth-child(3),
.setup-resume-secondary .setup-resume-secondary-item:first-child {
border-right: 1px solid var(--brand-medium);
}
@media (min-width: 960px) {
.setup-resume-secondary .setup-resume-secondary-item {
border-top: none
}
.setup-resume-secondary .setup-resume-secondary-item + .setup-resume-secondary-item {
border-left: 1px solid var(--brand-medium);
}.setup-resume-secondary .setup-resume-secondary-item:nth-child(3),
.setup-resume-secondary .setup-resume-secondary-item:first-child {
border-right: none;
}
}
.header {
background-color: var(--neutral-white);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--neutral-light);
}
@media (max-width: 960px) {
.header {
justify-content: flex-end
}
.header .breadcrumbs {
position: absolute;
width: 1px;
height: 1px;
border: 0;
clip: rect(0, 0, 0,0);
margin: -1px;
padding: 0;
overflow: hidden;
}
}
@media (max-width: 769px) {
.header {
justify-content: space-between
}
}
.header.wrapper-content {
padding-right: 0;
}
.header-content {
display: flex;
/* align-items: center; */
}
/* indicator for pro on bussiness name*/
.header-content .is-pro {
/* background-color: var(--orza-pro); */
/* linear gradien bran and secondary*/
background: linear-gradient(45deg, var(--brand) 0%, var(--orza-pro) 80%);
color: var(--neutral-white);
text-transform: uppercase;
font-size: calc(var(--font-size-1) * 1);
}
/* pro account beside the name */
.header-content b.is-pro {
padding: 2px 6px;
display: inline-block;
margin-right: 2px;
border-radius: 6px;
}
.command-search {
font: var(--font-caption-s);
font-weight: var(--fw-bold);
border-right: 1px solid var(--neutral-light);
border-left: 1px solid var(--neutral-light);
display: inline-flex;
align-items: center;
text-decoration: none;
padding-inline: var(--spacing-2);
margin-bottom: 1px;
}
.command-search span {
border: 1px solid var(--neutral-light);
border-radius: var(--border-radius-s);
padding: calc(var(--spacing-1) / 3) var(--spacing-1);
background-color: var(--neutral-white);
display: block;
margin-left: var(--spacing-1);
/* @media (--max-screen-s) {
display: none;
} */
}
.command-search svg {
min-width: 18px;
width: 18px;
}
.command-search svg > * {
fill: var(--neutral);
}
.command-search:hover {
background-color: var(--neutral-xtralight);
}
.command-search:hover span {
animation: shake 1s infinite linear;
}
@media (prefers-reduced-motion) {
.command-search:hover span {
animation: none
}
}
@keyframes shake {
0% {
transform: rotate();
}
10% {
transform: rotate(4deg);
}
30% {
transform: rotate(-4deg);
}
40% {
transform: rotate(0);
}
100% {
transform: rotate(0);
}
}
div.logo {
/* TEST A */
/* background-color: var(--brand-xtralight);
border-right: 1px solid var(--brand-light); */
padding: var(--spacing-2) var(--spacing-3);
background-color: var(--brand);
display: flex;
align-items: center;
}
div.logo svg.logo {
width: 110px;
}
/* CASE B */
div.logo svg.logo > * {
fill: var(--brand-light);
}
svg.logo {
width: 110px;
/* height: 33px; */
}
/* TEST A-B WITH COLOR BRAND */
/* div.logo {
background-color: var(--brand);
border-right: none;
&.color-neutral-white {
svg.logo > * {
fill: var(--neutral-white);
}
}
} */
.toggle-nav {
border: none;
background-color: transparent;
padding: 0;
margin: 0;
cursor: pointer;
}
.toggle-nav span {
display: none;
}
.toggle-nav svg path {
transition: ease-in-out 250ms all;
}
.toggle-nav[aria-expanded="true"] .top {
transform: rotate(45deg) translateX(4px) translateY(-3px);
}
.toggle-nav[aria-expanded="true"] .medium {
display: none;
}
.toggle-nav[aria-expanded="true"] .bottom {
transform: rotate(-45deg) translateX(-11px) translateY(-4px);
}
@media (max-width: 769px) {
.toggle-nav {
margin-right: var(--spacing-2)
}
}
/* Header elements */
.add-content {
align-self: center;
}
.add-content .dropdown-content {
width: var(--spacing-17);
transform: translateY(-17px);
}
.add-content .dropdown-action::before,
.add-content .dropdown-action::after {
transform: translateX(-30px) translateY(-17px);
}
.add-content .dropdown-action[aria-expanded="true"] .button-multiple svg {
transform: rotate(45deg);
}
.add-content .button-multiple {
border-radius: 0;
border-color: transparent;
padding-inline: calc(var(--spacing-1) * 4);
color: var(--neutral-dark);
height: calc(var(--header-height) - 1px);
text-transform: uppercase;
}
.add-content .button-multiple:hover {
background-color: var(--neutral-xtralight);
}
@media (max-width: 769px) {
.add-content .button-multiple {
width: var(--header-height);
padding-inline: calc(var(--spacing-1) * 1);
}
.add-content .button-text {
display: none;
}
.add-content .button-pre svg {
margin-right: 0;
}
.add-content .dropdown-content{
left: 0;
}
.add-content .dropdown-action::before,
.add-content .dropdown-action::after {
transform: translateX(10px) translateY(-17px);
}
}
.manage-account {
border-left: 1px solid var(--neutral-light);
}
/* custom dropdow action */
.manage-account .dropdown-action::before,
.manage-account .dropdown-action::after {
transform: translateY(-17px) translateX(7px);
}
.manage-account .dropdown-action[aria-expanded="true"] .button svg {
transform: rotate(90deg);
}
.manage-account .dropdown-action .button {
height: var(--header-height);
font: var(--font-caption);
text-align: left;
padding-left: var(--spacing-2);
padding-right: var(--spacing-3);
background: none;
border-radius: 0;
transform: translateY(-1px);
}
.manage-account .dropdown-action .button span {
display: block;
width: var(--spacing-12);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--neutral);
}
.manage-account .dropdown-action .button span:first-child {
font-weight: var(--fw-bold);
color: var(--neutral-dark);
}
@media (max-width: 769px) {
.manage-account .dropdown-action .button span {
width: var(--spacing-10)
}
}
.manage-account .dropdown-action .button svg {
margin-left: var(--spacing-1);
transition: ease-in-out 200ms transform;
}
.manage-account .dropdown-action .button svg > * {
fill: var(--neutral-medium);
}
.manage-account .dropdown-action .button:hover {
background-color: var(--neutral-xtralight);
}
.manage-account .dropdown-action .button:hover svg > * {
fill: var(--neutral-dark);
}
.manage-account .dropdown-content {
transform: translateY(-17px);
right: calc(var(--spacing-2) * 1);
padding-top: var(--spacing-2);
/* background-color: var(--neutral-xtralight); */
padding-bottom: 0;
/* fix component overflow scroll */
overflow-x: hidden;
}
@media (max-width: 1024px) {
.manage-account .dropdown-content {
right: 0
}
}
.manage-account .dropdown-content > div:not(:first-child) .manage-account-title {
margin-top: var(--spacing-2);
border-top: 1px solid var(--brand-light);
}
.manage-account .dropdown-content > div:not(:first-child) .manage-account-title::before {
display: block;
content:"";
width: 25px;
transform: translateY(-15px);
height: 1px;
background-color: var(--brand);
}
/* .button {
margin-left: var(--spacing-2);
max-width: calc(100% - (var(--spacing-2) * 2));
} */
.manage-account .dropdown-content img {
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
aspect-ratio: 1 / 1;
width: var(--spacing-5);
border: 1px solid var(--neutral-light);
}
/* ul {
font: var(--font-caption);
margin: var(--spacing-2);
li {
margin-bottom: var(--spacing-1);
a {
background-color: var(--brand-xtralight);
&:hover {
background-color: var(--brand-light);
}
}
}
} */
.manage-account .dropdown-content .nav-link {
/* background-color: var(--neutral-white);
border: 1px solid var(--brand-light);
&:hover,
&.is-focus {
background-color: var(--brand-light);
} */
color: var(--neutral-dark);
}
.manage-account .dropdown-content .nav-link svg {
margin-right: 0;
}
.manage-account .dropdown-content .nav-link svg > * {
fill: var(--neutral-light);
}
.manage-account .dropdown-content .nav-link svg.nav-link-action > * {
fill: var(--neutral-medium);
}
.manage-account .dropdown-content .nav-link.is-focus,
.manage-account .dropdown-content .nav-link:hover {
color: var(--brand-dark);
}
.manage-account .dropdown-content .nav-link.is-focus svg > *, .manage-account .dropdown-content .nav-link:hover svg > * {
fill: var(--brand-dark);
}
.manage-account .dropdown-content .nav-link.is-focus .manage-account-name + p, .manage-account .dropdown-content .nav-link:hover .manage-account-name + p {
color: var(--brand-xtramedium);
}
.manage-account .dropdown-content .is-inset {
margin-left: var(--spacing-2);
width: calc(100% - (var(--spacing-2) * 2));
}
.manage-account .dropdown-content .is-offset {
margin-left: calc(var(--spacing-1) * -1);
width: calc(100% + (var(--spacing-1) * 2));
}
.manage-account .dropdown-content .button-multiple:last-child:hover {
box-shadow: none;
}
.manage-account .manage-account-title {
font: var(--font-caption-s);
font-weight: var(--fw-medium);
color: var(--neutral);
margin: 0;
padding: var(--spacing-2) calc(var(--spacing-2) + var(--spacing-1)) var(--spacing-1);
text-transform: uppercase;
margin-left: calc(var(--spacing-1) * -1);
width: calc(100% + (var(--spacing-1) * 2));
}
.manage-account .manage-account-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: var(--fw-medium);
margin: 0;
}
.manage-account .manage-account-name + p {
margin: 0;
color: var(--neutral);
font: var(--font-caption-s);
}
.manage-account .truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 140px;
}
.manage-account svg > * {
fill: var(--brand-medium);
}
.actions {
position: sticky;
z-index: 2;
top: var(--header-height);
/* padding: calc(var(--spacing-2) + var(--spacing-1)) var(--spacing-2); */
padding-top: var(--spacing-2);
padding-bottom: var(--spacing-2);
margin-bottom: var(--spacing-4);
background-color: var(--neutral-white);
border-top: 1px solid;
border-bottom: 1px solid;
border-color: var(--brand-medium);
}
/* box-shadow: 0 0 0 4px var(--neutral-white); */
.actions h2 {
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 960px) {
.actions h2 {
font: var(--font-body)
}
}
/* border-image-slice: 1;
border-image-source: linear-gradient(to left, var(--brand), var(--brand-light)); */
@media (max-width: 960px) {
.actions button {
font: var(--font-caption);
font-weight: var(--fw-medium)
}
}
.actions .is-back {
padding: calc(var(--spacing-1) * 1.45);
}
.actions .is-back .button-text {
position: absolute;
width: 1px;
height: 1px;
border: 0;
clip: rect(0, 0, 0,0);
margin: -1px;
padding: 0;
overflow: hidden;
}
.actions .is-back svg {
margin-right: 0;
}
.actions.sticky-m {
top: calc(var(--header-height) + var(--main-options-height));
}
.actions.is-extended {
border-top: none;
border-image-source: none;
border-bottom-width: 1px;
border-bottom-color: var(--neutral-light);
margin-inline: calc(var(--spacing-2) * -1);
padding-inline: var(--spacing-2);
width: calc(100% + var(--spacing-2) * 2);
}
@media (min-width: 1024px) {
.actions.is-extended {
width: calc(100vw - var(--menu-width));
margin-inline: calc(var(--spacing-3) * -1);
padding-inline: var(--spacing-3)
}
}
@media (min-width: 1281px) {
.actions.is-extended {
margin-inline: calc(var(--spacing-4) * -1);
padding-inline: var(--spacing-4)
}
}
@media (min-width: 1920px) {
.actions.is-extended {
justify-content: flex-start
}
.actions.is-extended > h2 {
max-width: 665px;
}
.actions.is-extended > div {
max-width: 260px;
}
}
@media (max-width: 769px) {
.actions .actions-button .dropdown-content{
left: calc(var(--spacing-10) * -1);
}
}
/* state when ly-app-primary has aside (primary-aside) */
@media (min-width: 1920px) {
.ly-app-primary.has-aside .is-extended > h2 {
max-width: 1130px;
}
}
.is-standalone .is-extended {
width: calc(100% + var(--spacing-3) * 2);
margin-inline: calc(var(--spacing-2) * -2);
padding-inline: var(--spacing-3);
}
@media (min-width: 1024px) {
.is-standalone .is-extended {
width: calc(100% + var(--spacing-3) * 2)
}
}
.is-standalone .is-back svg {
display: none;
}
.is-standalone .is-back {
padding: var(--spacing-1) var(--spacing-2);
}
.is-standalone .is-back .button-text {
position: relative;
width: auto;
height: auto;
border: 0;
margin: 0;
padding: 0;
overflow: visible;
}
/* Main menu for the app */
.main-nav {
/* CASE A */
/* background-color: var(--brand-xtralight);
border-right: 1px solid var(--brand-light); */
padding: var(--spacing-2);
position: relative;
}
.main-nav-content {
position: sticky;
top: calc(var(--header-height) + var(--spacing-2));
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100vh - calc(var(--header-height) + var(--spacing-2)*2));
overflow-y: auto;
font: var(--font-caption);
/* CASE A */
/* .nav-link {
&.is-active,
&.is-focus {
background-color: var(--brand-light);
}
} */
}
.main-nav-content ul {
list-style-type: none;
padding: 0;
margin: 0;
margin-top: var(--spacing-1);
}
@media (min-width: 1281px) {
.main-nav-content {
font: var(--font-body)
}
}
/* Specify for menu nav */
.main-nav-content .margin-bottom-m {
/* CASE A */
/* border-bottom: 1px solid var(--brand-light); */
/* padding-bottom: var(--spacing-1); */
margin-bottom: var(--spacing-1);
}
@media (min-width: 1441px) {
.main-nav-content .margin-bottom-m {
margin-bottom: var(--spacing-2);
padding-bottom: var(--spacing-2)
}
}
/* State when the page has banner */
.has-banner .main-nav-content {
height: calc(100vh - calc(var(--header-height) + var(--spacing-2)*2) - var(--banner-height));
}
/* TEST A-B TO SEE IF WORKS BETTER WITH BRAND BACKGROUND COLOR */
.main-nav {
background-color: var(--brand);
border-right: none;
}
.main-nav-content .nav-link {
color: var(--brand-light);
margin-bottom: var(--spacing-1);
}
.main-nav-content .nav-link.is-active,
.main-nav-content .nav-link.is-focus,
.main-nav-content .nav-link:focus {
background-color: var(--neutral-white);
color: var(--brand-dark);
}
.main-nav-content .nav-link.is-active svg, .main-nav-content .nav-link.is-focus svg, .main-nav-content .nav-link:focus svg {
opacity: 1;
}
.main-nav-content .nav-link:hover {
color: var(--brand-dark);
}
.main-nav-content .nav-link:hover svg {
opacity: 1;
}
.main-nav-content .nav-link {
justify-content: space-between;
}
.main-nav-content .nav-link svg {
opacity: .5;
order: 2;
}
@media (min-width: 768px) {
.main-nav-content .nav-link svg {
/* icon at the end */
margin-left: calc( var(--spacing-2) + var(--spacing-1))
}
}
.main-nav-content .margin-bottom-m {
padding-bottom: 0;
border-bottom: 1px solid var(--brand-xxtramedium);
}
.main-nav-content .has-border-top {
border-top: 1px solid var(--brand-xxtramedium);
padding-top: var(--spacing-1);
}
.main-options {
position: relative;
z-index: 25;
}
/* background-color: var(--neutral-xtralight); */
.main-options.sticky-s {
position: sticky;
top: var(--header-height);
}
.main-options-content{
display: flex;
justify-content: space-between;
/* @media (--max-screen-s) {
max-width: 250px;
} */
}
.main-options-content-primary {
display: flex;
align-items: center;
flex-grow: 1;
overflow-x: auto;
font: var(--font-caption);
font-weight: var(--fw-medium);
padding-left: var(--spacing-2);
background-color: var(--neutral-white);
}
.main-options-content-primary::after {
position: absolute;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
z-index: 0;
content: "";
background-color: var(--neutral-light);
//display: none;
}
@media (min-width: 1024px) {
.main-options-content-primary::after {
display: block
}
}
.main-options-content-primary svg {
width: 18px;
}
.main-options-content-primary button {
font: var(--font-caption-s);
font-weight: var(--fw-bold);
margin-right: var(--spacing-2);
aspect-ratio: 1;
margin-block: var(--spacing-1);
padding: var(--spacing-2);
width: 45px;
height: 45px;
}
.main-options-content-primary button .button-text {
display: none;
}
.main-options-content-primary button .button-pre svg {
margin-right: 0;
}
@media (min-width: 1024px) {
.main-options-content-primary {
font: var(--font-body);
font-weight: var(--fw-medium);
padding-left: var(--spacing-3)
}
.main-options-content-primary button {
aspect-ratio: revert;
font: var(--font-caption);
font-weight: var(--fw-bold);
padding: var(--spacing-1) var(--spacing-2);
width: auto;
height: auto;
}
.main-options-content-primary button .button-text {
display: inline-block;
}
.main-options-content-primary button .button-pre svg {
margin-right: calc(var(--spacing-2)/1.25);
}
}
@media (min-width: 1281px) {
.main-options-content-primary {
padding-left: var(--spacing-4)
}
}
.main-options-nav {
overflow-x: auto;
touch-action: pan-x;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: thin;
flex-grow: 1;
}
.main-options-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.main-options-nav ul a {
display: block;
width: -moz-max-content;
width: max-content;
overflow: visible;
padding: calc(var(--spacing-2) + var(--spacing-1)) var(--spacing-2);
text-decoration: none;
scroll-snap-align: start;
color: var(--neutral-dark);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
.main-options-nav ul a:hover {
color: var(--neutral);
background-color: var(--neutral-white);
}
.main-options-nav ul .is-active {
position: relative;
z-index: 1;
background-color: var(--neutral-white);
border-color: var(--neutral-light);
border-bottom: 1px solid var(--neutral-white);
}
.main-options-nav.has-bg .is-active {
background-color: var(--neutral-xtralight);
border-bottom-width: 0;
/* border-bottom: 1px solid var(--neutral-xtralight); */
}
.main-options-content-secondary {
display: flex;
}
.main-options-content-secondary .is-icon {
padding: calc(var(--spacing-1) * 3) var(--spacing-3);
max-height: 100%;
aspect-ratio: unset;
background-color: var(--neutral-xtralight);
border-width: 0;
border-radius: 0;
border-bottom: 1px solid var(--neutral-light);
height: 100%;
border-left: 1px solid var(--neutral-light);
}
/* background-color: var(--neutral-white); */
.main-options-content-secondary .is-icon:hover svg {
opacity: .5;
}
.main-options-content-secondary .is-icon.is-active {
position: relative;
border-bottom-color: var(--neutral-white);
/* background-color: var(--neutral-white); */
}
.main-options-content-secondary::after {
position: absolute;
width: 100%;
height: 1px;
bottom: 65px;
left: 0;
z-index: 0;
content: "";
background-color: var(--neutral-light);
display: block;
}
@media (min-width: 1024px) {
.main-options-content-secondary::after {
display: none
}
}
/* State when filter button is alone without search */
.main-options-content-secondary:has(.search-container) .is-icon {
border-left: 0;
}
.search-container {
position: relative;
/* width: 100%; */
width: 191px;
/* @media (--max-screen-s) {
display: none;
} */
}
.search-container input {
height: 100%;
border-radius: 1px;
border-top: 1px solid transparent;
padding-left: var(--spacing-2);
padding-block: calc(var(--spacing-1) * 3.02);
}
.search-container input:hover{
border-top: 1px solid var(--neutral-medium);
}
.search-container input:focus {
border-top: 1px solid var(--brand);
}
.search-container >svg {
position: absolute;
left: var(--spacing-2);
top: calc(50% - 11px);
}
.search-container >svg > * {
fill: var(--neutral);
}
@media(min-width: 768px) {
.search-container {
width: 292px
}
}
@media(min-width: 1281px) {
.search-container {
width: 368px
}
}
.main-options-filters {
position: absolute;
left: 0;
width: 100%;
background-color: var(--neutral-xtralight);
/* box-shadow: 0 14px 20px 1px hsla(0, 0%, 0%, 0.2); */
box-shadow: 0px 20px 18px -2px hsla(0, 0%, 0%, 0.2)
}
.main-options-filters-content {
padding: var(--spacing-3);
}
@media (min-width: 1281px) {
.main-options-filters-content {
padding-inline: var(--spacing-4)
}
}
@media (max-width: 769px) {
.main-options-filters-content {
overflow-y: scroll;
height: calc(100svh - var(--header-height) * 2.5)
}
}
.main-options-filters-content .flatpickr-wrapper input.form-control.input,
.main-options-filters-content .vs__dropdown-toggle,
.main-options-filters-content .checkbox-label::before {
background-color: var(--neutral-white);
}
.picker-content {
position: relative;
}
/* vendor class by defaultis inline-block */
.picker-content .flatpickr-wrapper {
display: block;
}
.picker-content .icon-close {
position: absolute;
right: var(--spacing-2);
top: calc(50% - 11px);
}
/* Secondary menu for the app */
.secondary-nav {}
.secondary-nav-content {
display: grid;
grid-auto-flow: column;
grid-auto-columns: auto;
overflow-x: auto;
list-style-type: none;
padding: 0;
touch-action: pan-x;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
font: var(--font-caption);
border: 1px solid var(--brand-light);
border-top-width: 0px;
}
@media (min-width: 1024px) {
.secondary-nav-content {
display: block;
margin: 0;
overflow: hidden;
border-top-width: 1px;
border-radius: var(--border-radius-m)
}
}
@media (min-width: 1281px) {
.secondary-nav-content {
font: var(--font-body)
}
}
.secondary-nav-content li {
scroll-snap-align: start;
}
.secondary-nav-content li + li {
border-left: 1px solid var(--brand-light);
}
.secondary-nav-content li:first-child .is-active::before {
border-radius: 0;
}
@media (min-width: 1024px) {
.secondary-nav-content li + li {
border-left: none;
border-top: 1px solid var(--brand-light);
}
.secondary-nav-content li:first-child .is-active::before {
border-radius: var(--border-radius-m) 0 0 0;
}
.secondary-nav-content li:last-child .is-active::before {
border-radius: 0 0 0 var(--border-radius-m);
}
}
.secondary-nav-content a {
position: relative;
display: block;
padding: calc(var(--spacing-1) * 1.5) var(--spacing-3) var(--spacing-3) calc(var(--spacing-1) * 1.5);
text-decoration: none;
color: var(--brand-dark);
white-space: nowrap;
}
@media (min-width: 1024px) {
.secondary-nav-content a {
padding: calc(var(--spacing-1) * 1.5) var(--spacing-3)
/* white-space: none; */
}
}
.secondary-nav-content a:hover {
background-color: var(--brand-xtralight);
}
.secondary-nav-content a.is-active {
background-color: var(--brand-xtralight);
}
.secondary-nav-content a.is-active::before {
content: "";
display: block;
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
width: 100%;
height: calc(var(--spacing-1) * 1.5);
background-color: var(--brand);
}
@media (min-width: 1024px) {
.secondary-nav-content a.is-active::before {
top: 0;
width: var(--spacing-1);
height: 100%
}
}
.tertiary-nav {
list-style-type: none;
padding: 0;
margin: 0;
font: var(--font-caption);
font-weight: var(--fw-medium);
}
.tertiary-nav li {
display: inline-block;
}
.tertiary-nav li:not(:last-child) {
margin-right: var(--spacing-4);
}
.tertiary-nav a {
text-decoration: none;
color: var(--neutral-dark);
}
/* text-decoration-style: wavy; */
.tertiary-nav a:hover {
color: var(--brand);
/* text-decoration-style: solid; */
}
.tertiary-nav a.is-active {
color: var(--brand);
}
.disclosure {
border: 1px solid var(--brand-light);
padding: var(--spacing-2);
border-radius: var(--border-radius-m);
margin-bottom: var(--spacing-2);
/* background-color: var(--neutral-xtralight); */
background-color: var(--brand-xtralight);
}
.disclosure button {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
font-size: clamp(var(--font-size-3), 1.5vw, var(--font-size-4));
font-weight: var(--fw-medium);
padding-bottom: 0;
padding-top: 0;
color: var(--brand-xtradark) !important;
text-align: left;
}
.disclosure button svg {
min-width: 22px;
margin-left: var(--spacing-1);
vertical-align: middle;
transform: translateY(calc(var(--spacing-1)/ 3));
}
.disclosure button svg > * {
fill: var(--brand-xtradark);
}
.disclosure button:hover,
.disclosure button:active,
.disclosure button:focus-visible {
opacity: .8;
}
.disclosure button[aria-expanded="false"] svg:last-child {
display: none;
}
.disclosure button[aria-expanded="true"] svg:first-child {
display: none;
}
.disclosure p {
margin-top: var(--spacing-2);
color: var(--brand-xtramedium);
font-size: clamp(var(--font-size-2), 1.15vw, var(--font-size-3));
line-height: 1.4em;
}
.disclosure p:last-child {
margin-bottom: 0;
}
/* State when disclosure is inside the primary-content */
.primary-content .disclosure {
background-color: var(--neutral-white);
box-shadow:
1px 2px 4px hsla(0, 0%, 80%, 0.15),
2px 4px 6px hsla(0, 0%, 80%, 0.15),
3px 6px 8px hsla(0, 0%, 80%, 0.15);
}
.create-form-variables {
list-style-type: none;
margin: 0;
padding: 0;
}
.create-form-variables a {
flex: 1 1 auto;
padding: var(--spacing-1);
font: var(--font-caption);
color: var(--neutral-dark);
text-decoration: none;
border-radius: var(--border-radius-s);
}
.create-form-variables a:hover {
background-color: var(--brand);
color: var(--neutral-white);
}
.create-form-variables >li {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-1);
border: 1px solid var(--neutral-light);
}
.create-form-variables >li h3 {
width: 100%;
margin-left: var(--spacing-1);
margin-bottom: 0;
margin-top: var(--spacing-3);
}
.create-form-variables >li:not(:last-child) {
border-bottom: 0;
}
.create-form-variables >li:first-child{
border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
}
.create-form-variables >li:last-child{
border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);
}
.create-form-variables >li ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
.create-form-variables >li ul >li {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--spacing-1);
padding-block: var(--spacing-1);
border-top: 1px solid var(--neutral-mediumlight);
}
.list {
list-style-type: none;
padding: 0;
margin: 0 0 var(--spacing-3);
border-left: 1px solid var(--brand-light);
border-right: 1px solid var(--brand-light);
}
.list li {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-2);
padding: 0 var(--spacing-2) 0 0;
border-bottom: 1px solid var(--brand-light);
}
.list li:first-child {
border-top: 1px solid var(--brand-light);
}
.list li:nth-child(odd) {
background-color: var(--neutral-xtralight);
}
/* &:hover {
background-color: var(--brand-light);
} */
.list li.is-selected {
border-bottom: 1px solid var(--brand-medium);
}
.list li.is-selected a{
background-color: var(--brand-light);
color: var(--brand-xtramedium);
}
.list li.is-selected a:hover {
color: var(--brand);
background-color: var(--brand-xtralight);
}
.list li > * {
flex-grow: 1;
flex-shrink: 1;
}
.list li .button-multiple,
.list li button {
flex-grow: 0;
}
.list li.wrap {
flex-wrap: wrap;
}
.list li.is-corrective a{
color: var(--terciary-xtramedium);
}
.list li.is-corrective a:hover {
color: var(--brand);
}
.list li.is-corrective.is-selected .truncate svg > * {
fill: var(--terciary-xtramedium);
opacity: .3;
}
.list li.is-corrective.is-selected a {
background-color: var(--terciary-xtralight);
}
.list li.is-corrective.is-selected a:hover {
background-color: var(--brand-xtralight);
}
.list li.is-corrective.is-selected a:hover svg > * {
fill: var(--brand);
opacity: 1;
}
.list a {
/* display: block;
width: 100%; */
padding: calc(var(--spacing-2) + var(--spacing-1)) var(--spacing-2);
text-decoration: none;
color: var(--neutral);
transition: ease-in-out 200ms;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border-left: 2px solid transparent;
}
.list a:hover {
padding-left: var(--spacing-4);
color: var(--brand);
/* background-color: var(--brand-xtralight); */
border-color: currentcolor;
}
.list a:hover svg > * {
fill: var(--brand);
}
.list svg {
vertical-align: middle;
margin-right: calc(var(--spacing-1) / 3) ;
}
.list svg > * {
fill: var(--brand-medium);
}
.list svg.icon-check > *{
fill: currentcolor;
}
.reset-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.list-test {
list-style-type: none;
padding: 0;
margin: 0 0 var(--spacing-3);
}
/* div {
border: 1px solid blue;
} */
.list-test li {
margin-bottom: var(--spacing-2);
border: 1px solid var(--brand-light);
}
@media (min-width: 960px) {
.list-test li {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-2);
margin-bottom: 0;
border-top: none
}
}
.list-test li:first-child {
border-top: 1px solid var(--brand-light);
}
.list-test li:nth-child(odd) {
background-color: var(--neutral-xtralight);
}
.list-test li > div.list-edit {
width: min(100%, calc(var(--spacing-12) * 4.25));
}
@media (min-width: 960px) {
.list-test li > div.list-edit {
border-right: 1px solid var(--brand-light)
}
}
.list-test li > div.list-edit > a {
border-left: 2px solid transparent;
border-bottom: 1px solid var(--brand-light);
padding: calc(var(--spacing-2) + var(--spacing-1)) var(--spacing-2);
}
.list-test li > div.list-edit > a:hover {
padding-left: var(--spacing-4);
border-left-color: currentcolor;
}
.list-test li > div.list-edit > div {
margin-bottom: var(--spacing-2);
}
.list-test li .list-actions {
padding-right: var(--spacing-2);
}
@media (max-width: 960px) {
.list-test li .list-actions {
padding-top: var(--spacing-2);
padding-bottom: var(--spacing-2);
padding-left: var(--spacing-4);
background-color: var(--destructive-light)
}
}
.list-test svg {
vertical-align: middle;
}
.list-test a {
display: block;
text-decoration: none;
color: var(--neutral);
transition: ease-in-out 200ms;
}
.list-test a:hover {
color: var(--brand);
}
.list-test a:hover svg > * {
fill: var(--brand);
}
.list-test .button-multiple {
display: inline-flex;
}
.list-test .button-multiple:hover {
color: currentColor;
}
/* .table-container {
overflow-x: auto;
height: calc(100vh - var(--header-height) * 3);
} */
.table {
--neutral-light: #e4e4e4;
overflow-x: hidden;
position: relative;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
text-align: left;
font: var(--font-caption);
color: var(--neutral);
overflow: visible;
/* border: 1px solid var(--neutral-light); */
/* fix text overflow */
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
.table thead th {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: var(--neutral-xtralight);
padding: calc(var(--spacing-2) * 1.25) 0;
font-weight: var(--fw-medium);
color: var(--neutral-xtradark);
}
.table thead th::after {
--neutral-medium: #c3c3c3;
display: block;
height: 1px;
background-color: var(--neutral-medium);
width: calc(100% + var(--spacing-2) * 2);
margin-left: calc(var(--spacing-2) * -1);
content: "";
transform: translateY(calc(var(--spacing-2) * 1.25 - 1px));
}
.table thead th > * {
vertical-align: middle;
}
.table tbody tr {
transition: ease-in-out .250s;
}
.table tbody tr:hover {
background-color: var(--neutral-white);
}
.table td {
padding: calc(var(--spacing-2) * 1.25) calc(var(--spacing-2) * 1.25) calc(var(--spacing-2) * 1.25) 0;
border-bottom: 1px solid var(--neutral-light);
width: auto;
}
/* fix pills overflow */
.table td a:not(.is-edit) {
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
/* force with column. Apply on thead th */
.table .width-s {
width: 300px;
}
@media (max-width: 960px) {
.table .width-s {
width: 280px
}
}
.table .is-fluid {
width: 100%;
}
@media (min-width: 960px) {
.table.is-sticky thead th {
position: sticky;
z-index: 1;
top: calc(var(--header-height) + var(--main-options-height) - 2px)
}
}
.table .is-responsive {
display: none;
}
.table .table-sort {
display: block;
width: -moz-max-content;
width: max-content;
text-decoration: none;
font-weight: var(--fw-medium);
color: var(--neutral-xtradark);
}
.table .table-sort:focus {
color: var(--neutral);
}
.table .table-sort:hover {
color: var(--brand)
}
.table .table-sort svg {
transform: translateY(-1px);
}
.table .table-sort svg > * {
--neutral-light: var(--neutral-medium);
}
.table .icon-close {
width: 16px;
height: 16px;
}
.table .icon-close > * {
fill: var(--neutral-medium);
}
.table .icon-close:hover > * {
fill: var(--brand);
}
.table .is-edit {
text-decoration: none;
color: var(--brand);
display: block;
position: relative;
padding: var(--spacing-1);
padding-right: calc(var(--spacing-2) * 1.25);
border-radius: var(--border-radius-m);
transition: ease-in-out .250s;
}
.table .is-edit svg {
display: none;
vertical-align: middle;
position: absolute;
right: calc(var(--spacing-1));
top: calc(var(--spacing-1) * 2);
}
.table .is-edit svg > * {
fill: var(--neutral-white);
}
.table .is-edit > div {
color: var(--neutral);
}
.table .is-edit:hover {
background-color: var(--brand);
color: var(--neutral-white);
}
.table .is-edit:hover svg {
display: inline-block;
}
.table .is-edit:hover > div {
color: var(--brand-medium);
}
.table .is-right {
text-align: right;
padding-right: 0;
}
.table .is-center {
text-align: center;
}
/* .is-action {
} */
.table .is-tertiary {
padding: calc(var(--spacing-1) / 1.5) calc(var(--spacing-1) * 1.75);
font-weight: var(--fw-medium);
color: var(--neutral);
}
.table .is-secondary {
padding: calc(var(--spacing-1) / 1.5) calc(var(--spacing-1) * 1.75);
font-weight: var(--fw-medium);
}
@media (max-width: 960px) {
.table .is-responsive {
display: block;
}
.table thead th:not(:first-child):not(:last-child) {
display: none;
}
.table tbody td:not(:first-child):not(:last-child) {
display: none;
}
}
.tabs {
position: relative;
list-style-type: none;
padding: 0;
margin: 0;
font: var(--font-caption);
font-weight: var(--fw-medium);
display: flex;
gap: var(--spacing-4);
overflow-x: scroll;
touch-action: pan-x;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: thin;
will-change: scroll-position;
border-bottom: 1px solid var(--neutral-light);
}
/* &::after {
display: block;
content: '';
position: absolute;
z-index: 0;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: var(--neutral-light);
} */
.tabs svg > * {
fill: var(--neutral);
}
.tabs a {
position: relative;
display: inline-flex;
align-items: center;
-moz-column-gap: var(--spacing-1);
column-gap: var(--spacing-1);
width: -moz-max-content;
width: max-content;
text-decoration: none;
color: var(--neutral);
padding-bottom: var(--spacing-2);
}
/* border-radius: var(--border-radius-m); */
.tabs a:hover {
color: var(--neutral-xtradark);
}
.tabs a:hover svg > * {
fill: var(--neutral-xtradark);
}
/* padding: calc(var(--spacing-1) * 1.25) var(--spacing-2); */
.tabs a.is-active {
overflow: visible;
color: var(--neutral-xxtradark);
}
/* box-shadow: inset 0 0 10px 1px var(--neutral-light); */
.tabs a.is-active svg > * {
fill: var(--neutral-xxtradark);
}
/* background-color: var(--neutral-xtralightmedium); */
.tabs a.is-active::after {
display: block;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: var(--neutral-xxtradark);
}
.card {
list-style-type: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(270px,1fr));
grid-column-gap: var(--spacing-3);
grid-row-gap: var(--spacing-3);
}
.card a {
text-decoration: none;
font-weight: var(--fw-medium);
}
.card .button-multiple,
.card button {
font-weight: var(--fw-medium);
border-radius: 0;
}
.card .is-alone {
display: block;
background-color: var(--neutral-light);
color: var(--neutral-light);
height: 19px;
}
/* user-select: none; */
.card .is-alone svg {
display: none;
}
.card .is-alone.is-half {
width: 50%;
}
.card .is-alone.is-third {
width: 75%;
}
.card .is-alone.is-four {
width: 25%;
}
.card .icon-check {
position: absolute;
right: calc(var(--spacing-2) * 1.5);
top: calc(var(--spacing-3));
}
.card .icon-check > * {
fill: var(--brand);
}
.card li {
position: relative;
background-color: var(--neutral-white);
box-shadow: var(--shadow-s);
border-radius: var(--border-radius-m);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* background-color: var(--brand);
svg {
display: block;
margin: 0 auto var(--spacing-1);
* {
fill: var(--neutral-white);
}
}
a {
font-weight: var(--fw-bold);
background-color: var(--brand);
display: flex;
flex-direction: column;
padding: var(--spacing-3);
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
color: var(--neutral-white);
&:hover {
background-color: var(--brand-dark);
}
} */
.card li:first-child svg {
display: block;
margin: 0 auto var(--spacing-1);
}
.card li:first-child svg * {
fill: var(--brand);
}
/* Option with blue */
.card li:first-child a {
font-weight: var(--fw-bold);
display: flex;
flex-direction: column;
padding: var(--spacing-3);
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
color: var(--brand);
}
.card li:first-child a:hover {
color: var(--neutral-white);
background-color: var(--brand-dark);
}
.card li:first-child a:hover svg * {
fill: var(--neutral-white);
}
.empty-state {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
}
.empty-state svg > * {
fill: var(--neutral-dark);
}
.empty-state.has-height-auto {
height: auto;
}
.empty-state-title,
.empty-state-description {
max-width: calc(var(--spacing-24) * 1.6);
}
.empty-state-title {
font: var(--font-heading);
font-weight: var(--fw-medium);
margin-bottom: 0;
}
.empty-state-description {
margin-top: var(--spacing-1);
font: var(--font-body);
color: var(--neutral);
}
.empty-state-description a {
text-decoration: none;
color: var(--brand);
}
.empty-state-description a:hover {
color: var(--neutral-dark);
}
.main-content:has(.main-options) .empty-state {
height: calc(100% - var(--main-options-height));
}
.templates ol {
padding-left: var(--spacing-2);
}
@media (max-width: 769px) {
.templates ol {
padding-left: var(--spacing-3)
}
}
.templates ul {
list-style-type: none;
padding: 0;
margin: 0;
font: var(--font-body);
}
/* overwrites ly-grid-xs-gap */
.templates ul.ly-grid-xs,
.templates ul.ly-grid-sm {
-moz-column-gap: 1px;
column-gap: 1px;
row-gap: 1px;
grid-template-columns: repeat(auto-fit,minmax(110px,1fr));
border: 1px solid var(--neutral-light);
border-radius: 9px;
overflow: hidden;
background-color: var(--neutral-light);
}
.templates ul.ly-grid-xs li:not(:last-child), .templates ul.ly-grid-sm li:not(:last-child) {
margin-bottom: 0 !important;
}
/* &:not(:last-child) {
margin-bottom: var(--spacing-1);
} */
.templates ul li a {
display: block;
padding: var(--spacing-2);
text-decoration: none;
background-color: var(--neutral-white);
color: var(--neutral-dark);
}
.templates ul li a:active {
color: var(--neutral);
}
.templates ul li a:hover{
background-color: var(--neutral-dark);
color: var(--neutral-white);
}
.templates ul li.is-selected a {
background-color: var(--neutral-dark);
color: var(--neutral-white);
}
.templates ul li.is-selected a span {
display: flex;
justify-content: space-between;
}
.templates ul li.is-selected a span::after {
content: "⦿";
margin-left: var(--spacing-1);
}
.templates ul li.is-selected a:hover {
background-color: var(--neutral-dark);
}
.templates ul li img {
aspect-ratio: 1 /1.4142;
width: 100%;
height: auto;
vertical-align: middle;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
margin-bottom: var(--spacing-1);
}
.templates ul li span {
display: block;
font: var(--font-caption);
font-weight: var(--fw-medium);
}
/* .draggable-ly-grid {
container: draggable-ly-grid / inline-size;
}
@container draggable-ly-grid (min-width: 450px) {
.draggable-ly-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
grid-column-gap: var(--spacing-2);
aling-items: start;
}
} */
.preferences ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.preferences ul li:not(:last-child) {
margin-bottom: var(--spacing-1);
}
.preferences-title {
font: var(--font-caption);
font-weight: var(--fw-medium);
margin: 0;
border-bottom: 1px solid var(--neutral-light);
}
.preferences-title a {
display: flex;
align-items: center;
justify-content: space-between;
-moz-column-gap: var(--spacing-1);
column-gap: var(--spacing-1);
padding-block: var(--spacing-2);
text-decoration: none;
color: var(--neutral-xtradark);
}
.preferences-title a:hover {
color: var(--brand);
}
.preferences-title a:hover svg > * {
fill: var(--brand);
}
.preferences-title a.is-active svg {
transform: rotate(-90deg);
}
.preferences-title svg {
transform: rotate(-180deg);
transition: ease-in-out 0.250s;
}
.estimation-state {
display: inline-block;
min-width: .688rem;
aspect-ratio: 1/1;
border-radius: 50%;
}
.estimation-state.is-1 {
background-color: var(--neutral);
}
.estimation-state.is-2 {
background-color: #f5cd3a;
}
.estimation-state.is-3 {
background-color: var(--secondary);
}
.estimation-state.is-4 {
background-color: var(--brand);
}
.estimation-state.is-5 {
background-color: var(--error);
}
.invoice-state {
display: inline-block;
min-width: .688rem;
aspect-ratio: 1/1;
border-radius: 50%;
}
.invoice-state svg {
vertical-align: middle;
width: 16px;
height: 18px;
/* > * {
fill: var(--neutral-white);
} */
}
.invoice-state.is-1 {
background-color: var(--neutral);
}
.invoice-state.is-1 svg * {
fill: var(--neutral) !important;
}
.invoice-state.is-2 {
background-color: #f5cd3a;
}
.invoice-state.is-2 svg * {
fill: #f5cd3a !important;
}
.invoice-state.is-3 {
background-color: var(--secondary);
}
.invoice-state.is-3 svg * {
fill: var(--secondary) !important;
}
/* display: grid;
place-content: center; */
.invoice-state:has(svg).is-1,
.invoice-state:has(svg).is-2,
.invoice-state:has(svg).is-3 {
background-color: transparent;
}
.invoice-state:has(svg).is-1 svg, .invoice-state:has(svg).is-2 svg, .invoice-state:has(svg).is-3 svg {
position: relative;
top: 0px;
}
.invoice-state:has(svg).is-1 + span.truncate, .invoice-state:has(svg).is-2 + span.truncate, .invoice-state:has(svg).is-3 + span.truncate {
vertical-align: middle;
position: relative;
margin-bottom: 1px;
display: inline-block;
}
.form-block {
background-color: var(--neutral-white);
border: 1px solid var(--neutral-mediumlight);
margin-bottom: var(--spacing-4);
padding: var(--spacing-3) var(--spacing-2);
}
/* box-shadow: 0 0 15px 2px rgba(10, 10, 10, 0.15); */
@media (min-width: 960px) {
.form-block {
border-radius: var(--border-radius-ml)
}
}
.form-block.is-disabled {
opacity: 1;
}
.form-block.is-disabled > * {
opacity: .4;
pointer-events: none;
}
.is-disabled {
opacity: .4;
pointer-events: none;
}
/* state inside primary-content */
.primary-content .form-block {
margin-left: calc(var(--spacing-2) * -1);
width: calc(100% + var(--spacing-2) * 2);
}
@media (min-width: 960px) {
.primary-content .form-block {
padding: var(--spacing-3);
margin-left: 0;
width: 100%
}
}
.state-log,
.state-log ul {
list-style-type: none;
padding: 0;
margin: 0;
font: var(--font-caption);
color: var(--neutral);
}
.state-log {
background-color: var(--neutral-white);
border: 1px solid var(--neutral-mediumlight);
border-radius: var(--border-radius-m);
padding: var(--spacing-2);
}
.state-log > li {
padding-left: var(--spacing-3);
position: relative;
}
.state-log > li:not(:last-child)::after {
display: block;
position: relative;
content: "";
left: calc(var(--spacing-2) * -3);
width: calc(100% + var(--spacing-2)*4);
height: 1px;
background-color: var(--neutral-mediumlight);
}
.state-log > li.padding-left-0 {
padding-left: 0;
}
.state-log > li li {
margin-bottom: var(--spacing-1);
}
.state-log ul {
margin-top: var(--spacing-2);
}
.state-log a {
text-decoration: none;
color: var(--brand);
display: block;
}
.state-log a:hover {
color: var(--neutral);
}
.state-log .estimation-state {
position: absolute;
top: 5px;
left: 0;
}
.state-log .invoice-state {
position: absolute;
top: 4px;
left: 0;
}
.state-log .invoice-state.is-1:has(svg), .state-log .invoice-state.is-2:has(svg), .state-log .invoice-state.is-3:has(svg) {
top: -1px;
}
.state-log .state-log-comments {
background-color: var(--neutral-xtralightmedium);
color: var(--neutral-dark);
padding: var(--spacing-2);
margin-left: calc(var(--spacing-2) * -2);
margin-bottom: var(--spacing-2);
}
.state-log .state-log-comments label {
margin: 0;
}
.state-log .state-log-comments p {
margin-top:0;
}
.state-log .state-log-comments p:last-child {
margin-bottom: 0;
}
.desktop {
/* --card-bg-color: var(--neutral-dark);
--card-fg-color: var(--neutral-white);
--card-fg-color-hover: var(--neutral-medium);
--card-fg-color-alt: var(--neutral-light);
--card-padding: calc(var(--spacing-1) * 2.75);
--card-separator: var(--neutral); */
--card-bg-color: var(--neutral-xtralightmedium);
--card-fg-color: var(--neutral-dark);
--card-fg-color-alt: var(--neutral);
--card-padding: calc(var(--spacing-1) * 2.75);
--card-separator: var(--neutral-light);
}
.desktop > .primary-content {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: auto auto;
align-content: start;
-moz-column-gap: var(--spacing-2);
column-gap: var(--spacing-2);
padding-bottom: 0;
min-height: calc(100vh - var(--header-height));
background-color: var(--neutral-xtralight);
}
.desktop > .primary-content:has(.desktop-verifactu) {
padding-top: 0;
}
.desktop-card {
-webkit-padding-after: var(--spacing-4);
padding-block-end: var(--spacing-4);
}
.desktop-card h2 {
font: var(--font-body-l);
color: var(--neutral-dark);
font-weight: var(--fw-medium);
-webkit-margin-before: 0;
margin-block-start: 0;
padding-top: var(--spacing-2);
width: 100%;
}
.desktop-card :where(ul){
list-style-type: none;
padding: 0;
margin: 0;
}
.desktop-card a {
font: var(--font-caption);
text-decoration: none;
border: 1px solid currentColor;
padding: var(--spacing-1) var(--spacing-2);
border-radius: var(--border-radius-s);
display: inline-block;
}
.desktop-estimations ul,
.desktop-estimations ul li a,
.desktop-invoices-info > *,
.desktop-invoices-chart,
.desktop-invoices-resume,
.desktop-balance ul,
.balance-info,
.desktop-balance >div:last-child {
border: 1px solid var(--neutral-light);
}
/* .desktop-balance ul,
.balance-info, */
.desktop-invoices-info > *,
.desktop-invoices-chart,
.desktop-invoices-resume {
--card-bg-color: var(--neutral-dark);
--card-fg-color: var(--neutral-white);
--card-fg-color-alt: var(--neutral-light);
--card-separator: var(--neutral);
border: none;
}
.desktop-estimations,
.desktop-verifactu,
.desktop-invoices,
.desktop-expenses,
.desktop-balance {
grid-column: 1 / -1;
}
@media (min-width: 1281px) {
.desktop-invoices{
grid-column: 1 / 7
}
}
@media (min-width: 1281px) {
.desktop-expenses{
grid-column: 7 / 9
}
}
.has-offset {
padding-inline: var(--spacing-2);
}
@media (min-width: 1024px) {
.has-offset {
padding-inline: var(--spacing-3)
}
}
@media (min-width: 1281px) {
.has-offset {
padding-inline: var(--spacing-4)
}
}
.desktop-verifactu {
border-bottom: 1px solid var(--neutral-light);
padding-block: var(--spacing-3);
background-color: var(--neutral-white);
display: flex;
justify-content: space-between;
gap: var(--spacing-4);
align-items: center;
}
.desktop-estimations{
border-bottom: 1px solid var(--neutral-light);
}
.desktop-estimations ul {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
padding: var(--spacing-2);
border-radius: var(--border-radius-ml);
background-color: var(--card-bg-color);
}
.desktop-estimations li {
--card-bg-color: var(--neutral-white);
--card-fg-color: var(--neutral-dark);
--card-fg-color-alt: var(--neutral);
flex: 1 0 250px;
border-radius: var(--border-radius-m);
}
.desktop-estimations li:first-child{
background-color: var(--neutral-dark);
padding: var(--card-padding);
}
.desktop-estimations li:first-child h3{
color: var(--card-bg-color);
font: var(--font-caption);
margin: 0;
}
.desktop-estimations li:first-child p {
font: var(--font-display);
color: var(--secondary);
-webkit-margin-after: var(--spacing-3);
margin-block-end: var(--spacing-3);
}
.desktop-estimations li:first-child a {
-webkit-margin-before: auto;
margin-block-start: auto;
color: var(--card-bg-color);
}
.desktop-estimations li:not(:first-child) > a {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: var(--card-padding);
width: 100%;
height: 100%;
background-color: var(--card-bg-color);
color: var(--card-fg-color);
border-radius: var(--border-radius-m);
}
.desktop-estimations li:not(:first-child) > a:hover {
border-color: var(--card-fg-color-alt);
}
.desktop-estimations h3 {
font: var(--font-body-m);
font-weight: var(--fw-medium);
-webkit-margin-before: calc(var(--spacing-1)/2);
margin-block-start: calc(var(--spacing-1)/2);
-webkit-margin-after: var(--spacing-3);
margin-block-end: var(--spacing-3);
}
.desktop-estimations p {
margin: 0;
font: var(--font-caption-s);
color: var(--card-fg-color-alt);
}
.desktop-estimations p:last-child {
display: flex;
align-items: center;
gap: var(--spacing-1);
-webkit-margin-before: auto;
margin-block-start: auto;
-webkit-margin-after: 0;
margin-block-end: 0;
font: var(--font-caption);
font-weight: var(--fw-medium);
color: var(--card-fg-color-alt);
}
.desktop-estimations .state-1::before, .desktop-estimations .state-2::before, .desktop-estimations .state-3::before {
content: '';
display: block;
width: calc(var(--spacing-2) * 1.25);
border-radius: 50%;
aspect-ratio: 1;
}
.desktop-estimations .state-1::before {
background-color: var(--secondary);
}
.desktop-estimations .state-2::before {
background-color: var(--warning-dark);
}
.desktop-estimations .state-3::before {
background-color: var(--destructive);
}
.desktop-invoices > div {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
}
.desktop-invoices > div > * {
flex: 1 0 auto;
}
.desktop-invoices .desktop-invoices-info {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
gap: var(--spacing-2);
}
.desktop-invoices .desktop-invoices-info p {
flex: 1 0 auto;
}
.desktop-invoices .desktop-invoices-info p.is-overdue span {
color: var(--error);
}
.desktop-invoices .desktop-invoices-info > *,
.desktop-invoices .desktop-invoices-resume,
.desktop-invoices .desktop-invoices-chart {
background-color: var(--card-bg-color);
color: var(--card-fg-color-alt);
border-radius: var(--border-radius-m);
padding: var(--card-padding);
}
.desktop-invoices p {
font: var(--font-caption);
margin: 0;
}
.desktop-invoices span {
display: block;
font: var(--font-title);
color: var(--card-fg-color);
}
.desktop-invoices .desktop-invoices-resume {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.desktop-invoices .desktop-invoices-resume p {
-webkit-margin-after: var(--spacing-2);
margin-block-end: var(--spacing-2);
}
.desktop-invoices .desktop-invoices-resume p + p {
max-width: 250px;
}
.desktop-invoices .desktop-invoices-resume a {
-webkit-margin-before: auto;
margin-block-start: auto;
color: var(--card-fg-color);
}
.desktop-invoices-chart{
display: grid;
place-content: center;
}
/* vendor css for apexchart */
.desktop-invoices-chart .apexcharts-legend {
display: none;
}
.desktop-invoices-chart .apexcharts-tooltip-text-y-label {
font: var(--font-caption);
}
.desktop-invoices-chart .apexcharts-tooltip-y-group > * {
color: var(--card-bg-color);
}
.desktop-expenses {
--card-bg-color: var(--warning-dark);
--card-fg-color: var(--neutral-dark);
}
.desktop-expenses > div{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background-color: var(--card-bg-color);
color: var(--card-fg-color);
border-radius: var(--border-radius-m);
padding: var(--card-padding);
height: calc(100% - 58px);
}
.desktop-expenses > div > p {
font: var(--font-caption);
margin: 0;
}
.desktop-expenses > div > div {
-webkit-margin-before: auto;
margin-block-start: auto;
}
.desktop-expenses > div > div p {
font: var(--font-bddy);
font-weight: var(--fw-bold);
}
.desktop-expenses a {
color: var(--card-fg-color);
}
.desktop-expenses span {
display: flex;
align-items: center;
-moz-column-gap: calc(var(--spacing-1) * 1.5);
column-gap: calc(var(--spacing-1) * 1.5);
font: var(--font-title);
}
.desktop-expenses svg {
/* fix subpixel */
height: 27px;
}
.desktop-expenses svg * {
fill: var(--card-fg-color);
}
/* State for desktop balance inside a primary-aside */
.primary-aside .desktop-balance:first-child{
border: none;
}
.primary-aside .desktop-balance:first-child h2 {
padding-top: 0;
}
.primary-aside .desktop-balance h3 + p {
font: var(--font-heading);
}
.primary-aside .desktop-balance li:last-child p {
margin-bottom: 0;
padding-bottom: 0;
}
@media (min-width: 1024px) {
.desktop-balance {
display: grid;
grid-template-columns: 40% calc(60% - var(--spacing-2));
gap: var(--spacing-2)
}
.desktop-balance >.w-100 {
grid-column: 1 / -1;
}
}
.desktop-balance.no-grid {
display: block;
}
.desktop-balance {
-webkit-border-before: 1px solid var(--neutral-light);
border-block-start: 1px solid var(--neutral-light);
}
.desktop-balance h3 {
font: var(--font-caption);
color: var(--card-fg-color-alt);
margin: 0;
-webkit-margin-after: calc(var(--spacing-1) / 2);
margin-block-end: calc(var(--spacing-1) / 2);
}
.desktop-balance h3 + p {
display: flex;
align-items: center;
-webkit-margin-before: 0;
margin-block-start: 0;
-webkit-margin-after: var(--spacing-1);
margin-block-end: var(--spacing-1);
-webkit-padding-after: var(--spacing-1);
padding-block-end: var(--spacing-1);
color: var(--card-fg-color);
font: var(--font-title);
font-weight: var(--fw-bold);
}
.desktop-balance h3 + p span {
margin: 0;
font: var(--font-heading);
font-weight: var(--fw-bold);
}
.desktop-balance h3 + p.is-negative {
color: var(--destructive);
}
.desktop-balance h3 + p.is-negative svg * {
fill: var(--destructive);
}
.desktop-balance h3 + p.is-positive {
color: var(--secondary);
}
.desktop-balance h3 + p.is-positive svg * {
fill: var(--secondary);
}
/* where ul */
.desktop-balance :where(ul) {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
-moz-column-gap: var(--spacing-2);
column-gap: var(--spacing-2);
padding: var(--card-padding);
background-color: var(--card-bg-color);
border-radius: var(--border-radius-m);
}
.desktop-balance :where(ul) li {
flex: 1 0 auto;
}
.desktop-balance :where(ul) li:last-child {
width: 100%;
flex-grow: 1;
border-top: 1px solid var(--card-separator);
-webkit-padding-before: var(--spacing-2);
padding-block-start: var(--spacing-2);
}
.desktop-balance :where(ul) li span {
-webkit-margin-before: var(--spacing-1);
margin-block-start: var(--spacing-1);
display: inline-block;
font: var(--font-caption-s);
}
.desktop-balance :where(ul) li span:not(:last-child) {
color: var(--secondary);
border: 1px solid currentColor;
border-radius: var(--border-radius-m);
padding: 3px 7px;
margin-right: var(--spacing-1);
}
.desktop-balance :where(ul) li span.is-negative {
color: var(--destructive);
}
.desktop-balance :where(ul) li span:last-child {
color: var(--card-fg-color-alt);
}
.desktop-balance :where(ul) svg {
margin-right: var(--spacing-2);
}
.desktop-balance :where(ul):has(+ .balance-info) {
border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
}
.desktop-balance :where(ul) + ul {
-webkit-margin-before: var(--spacing-2);
margin-block-start: var(--spacing-2);
}
.desktop-balance >div:last-child{
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: var(--card-bg-color);
border-radius: var(--border-radius-m);
padding: var(--card-padding);
-webkit-margin-before: var(--spacing-2);
margin-block-start: var(--spacing-2);
min-height: 400px;
}
@media (min-width: 1024px) {
.desktop-balance >div:last-child{
height: calc(100% - 59px);
-webkit-margin-before: 59px;
margin-block-start: 59px
}
}
.apexcharts-legend,
.apexcharts-menu-icon {
display: none !important;
}
.balance-info {
border-top: 0;
padding: var(--card-padding);
background-color: var(--card-bg-color);
border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);
}
.balance-info p {
font: var(--font-caption);
color: var(--card-fg-color-alt);
-webkit-margin-before: 0;
margin-block-start: 0;
}
.balance-info a {
color: var(--card-fg-color);
}
.balance-info a:hover {
background-color: var(--card-fg-color);
color: var(--neutral-white);
}
.card-price {
position: relative;
box-shadow: var(--shadow-s);
flex-basis: 100%;
transition: ease-in-out 250ms;
border-radius: var(--border-radius-m);
color: var(--neutral);
padding: var(--spacing-2);
padding-top: var(--spacing-3);
text-align: center;
border: 1px solid transparent;
background-color: var(--neutral-white);
}
/* display: flex;
flex-flow: row;
justify-content: space-between; */
.card-price:hover {
--shadow-s: 0 5px 15px 2px rgba(10, 10, 10, 0.15);
}
.card-price.is-active {
/* background-color: var(--brand);
color: var(--brand-light);
.card-price-title,
.card-price-pricing{
color: var(--neutral-white);
}
.card-price-features svg > * {
fill: var(--neutral-white);
}
.card-price-features {
color: var(--neutral-white);
background-color: var(--brand-dark);
} */
border-color: var(--brand);
/* &:hover {
transform: translateY(0);
} */
}
.card-price .card-price-features {
margin: var(--spacing-3) calc(var(--spacing-2) * -1);
}
.card-price-title {
font: var(--font-heading);
font-weight: var(--fw-bold);
color: var(--brand);
margin: 0;
}
.card-price-description {
font: var(--font-caption-s);
margin-top: 0;
}
.card-price-pricing {
display: block;
color: var(--brand);
font: var(--font-title);
line-height: 2rem;
margin-top: 1.75rem;
font-weight: var(--fw-normal);
}
.card-price-draw svg {
width: 100%;
height: auto;
}
.card-price-features {
list-style-type: none;
padding: var(--spacing-2);
margin: var(--spacing-3) 0;
text-align: left;
font: var(--font-caption-s);
background-color: var(--neutral-xtralight);
}
/* border-block: 1px solid var(--neutral-mediumlight); */
.card-price-features li:not(:last-child) {
margin-bottom: calc(var(--spacing-1) * 1.75);
}
.card-price-features li {
display: flex;
gap: var(--spacing-1);
}
.card-price-features svg {
flex-shrink: 0;
}
.card-price-features svg > * {
fill: var(--brand);
}
.card-price-features svg.icon-color-destructive > * {
fill: var(--destructive);
}
.card-price-features svg.icon-color-destructive + span {
color: var(--neutral-medium);
}
.card-price-resume {
list-style-type: none;
padding: 0;
margin: 0;
font: var(--font-caption);
font-weight: var(--fw-medium);
color: var(--nenutral);
}
.card-price-resume li {
padding-block: var(--spacing-2);
display: flex;
justify-content: space-between;
}
.card-price-resume li:last-child {
color: var(--brand);
}
.card-price-resume li:not(:last-child) {
border-bottom: 1px solid var(--brand-medium);
}
.card-price-sub {
background-color: var(--secondary);
display: inline-block;
position: absolute;
z-index: 1;
top: -2.5%;
left: 50%;
transform: translateX(-50%);
border-radius: var(--border-radius-s);
}
.card-price-sub p {
font: var(--font-caption-s);
font-weight: var(--fw-medium);
color: var(--neutral-white);
margin: 0;
padding: calc(var(--spacing-1) * 0.75) var(--spacing-1);
text-transform: uppercase;
}
.credit-card {
background-color: var(--brand-xtradark);
background: linear-gradient(45deg,var(--brand), var(--brand-dark));
aspect-ratio: 1.618 / 1;
max-width: 324px;
border-radius: 10px;
padding: var(--spacing-3);
color:var(--neutral-white);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.credit-card h3 {
margin: 0;
margin-bottom: var(--spacing-6);
font: var(--font-body);
font-weight: var(--fw-medium);
}
.credit-card span {
display: block;
font: var(--font-body-l);
}
.credit-card span:last-child {
font: var(--font-caption-s);
color: var(--brand-medium);
}
.billing-banner{
background-color: var(--secondary);
background-image: linear-gradient(
36deg,
var(--secondary),
var(--secondary),
var(--brand),
var(--brand),
var(--terciary-xtramedium),
var(--brand),
var(--brand),
var(--secondary),
var(--secondary)
);
animation: colors 50s linear infinite;
background-size: 500%;
color: var(--neutral-white);
min-height: 30vh;
display: grid;
place-items: center;
/* place-content: center; */
padding-block: var(--spacing-4);
}
.billing-banner h2 {
max-width: 960px;
margin: 0 0 var(--spacing-2) 0;
text-transform: uppercase;
font-size: clamp(var(--font-size-6), 6vw, var(--font-size-8));
}
.billing-banner h2 + div {
max-width: 500px;
}
@keyframes colors {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
/* Specific pages */
/* Utilities */
/* COLORS */
/* Brand
========================================================================== */
.bg-color-brand-xtradark {
background-color: var(--brand-xtradark);
}
.bg-color-brand-dark {
background-color: var(--brand-dark);
}
.bg-color-brand-medium {
background-color: var(--brand-medium);
}
.bg-color-brand {
background-color: var(--brand);
}
.bg-color-brand-light {
background-color: var(--brand-light);
}
.bg-color-brand-xtralight {
background-color: var(--brand-xtralight);
}
.bg-color-neutral-gradient {
background: radial-gradient(circle, var(--neutral-white) 30%, var(--neutral-dark) 130%);
}
.bg-color-brand-gradient {
background: linear-gradient(180deg,var(--brand), var(--brand-dark));
}
/* Secondary
========================================================================== */
.bg-color-secondary-xtradark {
background-color: var(--secondary-xtradark);
}
.bg-color-secondary-dark {
background-color: var(--secondary-dark);
}
.bg-color-secondary {
background-color: var(--secondary);
}
.bg-color-secondary-medium {
background-color: var(--secondary-medium);
}
.bg-color-secondary-light {
background-color: var(--secondary-light);
}
.bg-color-secondary-xtralight {
background-color: var(--secondary-xtralight);
}
/* Neutral
========================================================================== */
.bg-color-neutral-xtradark {
background-color: var(--neutral-xtradark);
}
.bg-color-neutral-dark {
background-color: var(--neutral-dark);
}
.bg-color-neutral {
background-color: var(--neutral);
}
.bg-color-neutral-medium {
background-color: var(--neutral-medium);
}
.bg-color-neutral-mediumlight {
background-color: var(--neutral-mediumlight);
}
.bg-color-neutral-light {
background-color: var(--neutral-light);
}
.bg-color-neutral-xtralightmedium {
background-color: var(--neutral-xtralightmedium);
}
.bg-color-neutral-xtralight {
background-color: var(--neutral-xtralight);
}
.bg-color-neutral-white {
background-color: var(--neutral-white);
}
/* Message
========================================================================== */
.bg-color-destructive-dark {
background-color: var(--destructive-dark);
}
.bg-color-destructive {
background-color: var(--destructive);
}
.bg-color-destructive-light {
background-color: var(--destructive-light);
}
.bg-color-error-dark {
background-color: var(--error-dark);
}
.bg-color-error {
background-color: var(--error);
}
.bg-color-error-light {
background-color: var(--error-light);
}
.bg-color-warning {
background-color: var(--warning);
}
/* COLORS */
/* Brand
========================================================================== */
:where(html) .color-brand-xtradark {
color: var(--brand-xtradark);
}
:where(html) .color-brand-dark {
color: var(--brand-dark);
}
:where(html) .color-brand-xtramedium {
color: var(--brand-xtramedium);
}
:where(html) .color-brand-medium {
color: var(--brand-medium);
}
:where(html) .color-brand {
color: var(--brand);
}
:where(html) .color-brand-light {
color: var(--brand-light);
}
:where(html) .color-brand-xtralight {
color: var(--brand-xtralight);
}
:where(html) .color-inherit {
color: inherit;
}
/* Secondary
========================================================================== */
.color-secondary-xtradark {
color: var(--secondary-xtradark);
}
.color-secondary-dark {
color: var(--secondary-dark);
}
.color-secondary {
color: var(--secondary);
}
.color-secondary-medium {
color: var(--secondary-medium);
}
.color-secondary-light {
color: var(--secondary-light);
}
.color-secondary-xtralight {
color: var(--secondary-xtralight);
}
/* Neutral
========================================================================== */
.color-neutral-xtradark {
color: var(--neutral-xtradark);
}
.color-neutral-dark {
color: var(--neutral-dark);
}
.color-neutral {
color: var(--neutral);
}
.color-neutral-medium {
color: var(--neutral-medium);
}
.color-neutral-light {
color: var(--neutral-light);
}
.color-neutral-mediumlight {
color: var(--neutral-mediumlight);
}
.color-neutral-xtralight {
color: var(--neutral-xtralight);
}
.color-neutral-white {
color: var(--neutral-white);
}
/* Message
========================================================================== */
.color-destructive-dark {
color: var(--destructive-dark);
}
.color-destructive {
color: var(--destructive);
}
.color-destructive-light {
color: var(--destructive-light);
}
.color-error-dark {
color: var(--error-dark);
}
.color-error {
color: var(--error);
}
.color-error-light {
color: var(--error-light);
}
.color-waring {
color: var(--warning);
}
/* COLOR ON SVG */
svg.color-brand-xtradark > * {
fill: var(--brand-xtradark);
}
svg.color-brand-dark > * {
fill: var(--brand-dark);
}
svg.color-brand-medium > * {
fill: var(--brand-medium);
}
svg.color-brand > * {
fill: var(--brand);
}
svg.color-brand-light > * {
fill: var(--brand-light);
}
svg.color-brand-xtralight > * {
fill: var(--brand-xtralight);
}
svg.color-secondary-xtradark > * {
fill: var(--secondary-xtradark);
}
svg.color-secondary-dark > * {
fill: var(--secondary-dark);
}
svg.color-secondary > * {
fill: var(--secondary);
}
svg.color-secondary-medium > * {
fill: var(--secondary-medium);
}
svg.color-secondary-light > * {
fill: var(--secondary-light);
}
svg.color-secondary-xtralight > * {
fill: var(--secondary-xtralight);
}
svg.color-neutral-xtradark > * {
fill: var(--neutral-xtradark);
}
svg.color-neutral-dark > * {
fill: var(--neutral-dark);
}
svg.color-neutral > * {
fill: var(--neutral:);
}
svg.color-neutral-medium > * {
fill: var(--neutral-medium);
}
svg.color-neutral-light > * {
fill: var(--neutral-light);
}
svg.color-neutral-xtralight > * {
fill: var(--neutral-xtralight);
}
svg.color-neutral-white > * {
fill: var(--neutral-white);
}
svg.color-destructive-dark > * {
fill: var(--destructive-dark);
}
svg.color-destructrive > * {
fill: var(--destructrive:);
}
svg.color-destructive-light > * {
fill: var(--destructive-light);
}
svg.color-error-dark > * {
fill: var(--error-dark);
}
svg.color-error > * {
fill: var(--error);
}
svg.color-error-light > * {
fill: var(--error-light);
}
.reset-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.reset-list.has-border-bottom > * {
padding-block: calc(var(--spacing-1));
}
.reset-list.has-border-bottom > *:not(:last-child) {
border-bottom: 1px solid var(--neutral-mediumlight);
}
.margin-0 {
margin: 0;
}
.margin-top-0 {
margin-top: 0;
}
.margin-top-s {
margin-top: var(--spacing-1);
}
.margin-top-m {
margin-top: var(--spacing-2);
}
.margin-top-ml {
margin-top: var(--spacing-3);
}
.margin-top-l {
margin-top: var(--spacing-4);
}
.margin-top-xl {
margin-top: var(--spacing-6);
}
.margin-top-xxl {
margin-top: var(--spacing-8);
}
.margin-right-s {
margin-right: var(--spacing-1);
}
.margin-right-m {
margin-right: var(--spacing-2);
}
.margin-right-l {
margin-right: var(--spacing-4);
}
.margin-left-a {
margin-left: auto;
}
.margin-left-s {
margin-left: var(--spacing-1);
}
.margin-left-m {
margin-left: var(--spacing-2);
}
.margin-left-ml {
margin-left: var(--spacing-3);
}
.margin-left-l {
margin-left: var(--spacing-4);
}
.margin-bottom-a {
margin-bottom: auto;
}
.margin-bottom-0 {
margin-bottom: 0;
}
.margin-bottom-s {
margin-bottom: var(--spacing-1);
}
.margin-bottom-m {
margin-bottom: var(--spacing-2);
}
.margin-bottom-ml {
margin-bottom: var(--spacing-3);
}
.margin-bottom-l {
margin-bottom: var(--spacing-4);
}
.margin-bottom-xl {
margin-bottom: var(--spacing-6);
}
.margin-bottom-xxl {
margin-bottom: var(--spacing-8);
}
.margin-inline-a {
margin-inline: auto;
}
.padding-0 {
padding: 0;
}
.padding-xs {
padding: calc(var(--spacing-1) / 2);
}
.padding-s {
padding: var(--spacing-1);
}
.padding-m {
padding: var(--spacing-2);
}
.padding-ml {
padding: var(--spacing-3);
}
.padding-l {
padding: var(--spacing-4);
}
.padding-top-0 {
padding-top: 0;
}
.padding-top-s {
padding-top: var(--spacing-1);
}
.padding-top-m {
padding-top: var(--spacing-2);
}
.padding-top-ml {
padding-top: var(--spacing-3);
}
.padding-top-l {
padding-top: var(--spacing-4);
}
.padding-top-xxl {
padding-top: var(--spacing-6);
}
.padding-right-s {
padding-right: var(--spacing-1);
}
.padding-right-m {
padding-right: var(--spacing-2);
}
/*: where html*/
.padding-left-0 {
padding-left: 0;
}
.padding-left-s {
padding-left: var(--spacing-1);
}
.padding-left-m {
padding-left: var(--spacing-2);
}
.padding-left-ml {
padding-left: var(--spacing-3);
}
.padding-left-l {
padding-left: var(--spacing-4);
}
.padding-bottom-0 {
padding-bottom: 0;
}
.padding-bottom-s {
padding-bottom: var(--spacing-1);
}
.padding-bottom-m {
padding-bottom: var(--spacing-2);
}
.padding-bottom-ml {
padding-bottom: var(--spacing-3);
}
.padding-bottom-l {
padding-bottom: var(--spacing-4);
}
.padding-bottom-xl {
padding-bottom: var(--spacing-6);
}
.padding-bottom-xxl {
padding-bottom: var(--spacing-8);
}
.pading-block-xxl {
padding-block: var(--spacing-11);
}
/* Available for screen readers */
.visually-hide {
position: absolute;
width: 1px;
height: 1px;
border: 0;
clip: rect(0, 0, 0,0);
margin: -1px;
padding: 0;
overflow: hidden;
}
.hide {
display: none;
}
@media(min-width: 1441px) {
.hide-xl,
a.hide-xl {
display: none
}
}
.hide-show-ml {
position: absolute;
width: 1px;
height: 1px;
clip: rect(0, 0, 0,0);
overflow: hidden;
opacity: 0;
}
@media(min-width: 1024px) {
.hide-show-ml {
position: relative;
width: auto;
height: auto;
clip: inherit;
opacity: 1
}
}
.hide-show-xl {
position: absolute;
width: 1px;
height: 1px;
clip: rect(0, 0, 0,0);
overflow: hidden;
opacity: 0;
}
@media(min-width: 1441px) {
.hide-show-xl {
position: relative;
width: auto;
height: auto;
clip: inherit;
opacity: 1
}
}
.font-display {
font: var(--font-display);
}
.font-title {
font: var(--font-title);
}
.font-heading {
font: var(--font-heading);
}
.font-body-l {
font: var(--font-body-l);
}
.font-body-m {
font: var(--font-body-m);
}
.font-body {
font: var(--font-body);
}
.font-caption {
font: var(--font-caption);
}
.font-caption-s {
font: var(--font-caption-s);
}
.font-display-body {
font-size: clamp(var(--font-size-3), 4vw, var(--font-size-8));
}
.font-title-variable {
font-size: var(--font-title-variable);
}
.font-heading-variable {
font-size: var(--font-heading-variable);
}
.font-display-variable {
font-size: var(--font-display-variable);
}
.fw-regular {
font-weight: var(--fw-regular);
}
.fw-medium {
font-weight: var(--fw-medium);
}
.fw-bold {
font-weight: var(--fw-bold);
}
.border-radius-0 {
border-radius: var(--border-radius-none);
}
.border-radius-s {
border-radius: var(--border-radius-s);
}
.border-radius-m {
border-radius: var(--border-radius-m);
}
.border-radius-l {
border-radius: var(--border-radius-l);
}
.border-radius-ml {
border-radius: var(--border-radius-ml);
}
.border-radius-xl {
border-radius: var(--border-radius-xl);
}
.border-top-right-0 {
border-top-right-radius: 0;
}
.border-bottom-right-0 {
border-bottom-right-radius: 0;
}
.border-top-left-0 {
border-top-left-radius: 0;
}
.border-bottom-left-0 {
border-bottom-left-radius: 0;
}
.bw-t-1 {
border-top: 1px solid currentColor;
}
.bw-b-1 {
border-bottom: 1px solid currentColor;
}
.bw-1 {
border: 1px solid currentColor;
}
.bw-2 {
border: 2px solid currentColor;
}
.bw-s {
border: 3px solid currentColor;
}
.bw-block-1 {
border-block: 1px solid currentColor;
}
.w-s {
width: var(--spacing-5);
}
.w-m {
width: var(--spacing-8);
}
.w-100 {
width: 100%;
}
.w-min-s {
min-width: 115px;
}
.w-min-sm {
min-width: 170px;
}
.w-min-m {
min-width: 225px;
}
.w-min-0 {
min-width: 0;
}
.w-max-xs {
max-width: 90px;
}
.w-max-s {
max-width: 115px;
}
.w-max-sm {
max-width: 150px;
}
.w-max-m {
max-width: 250px;
}
.w-max-ml {
max-width: 460px;
}
.w-max-l {
max-width: calc(var(--spacing-24) * 1.5);
}
.w-max-xl {
max-width: calc(var(--spacing-24) * 2);
}
.w-max-xxl {
max-width: calc(var(--spacing-24) * 3);
}
.w-max-content {
max-width: -moz-max-content;
max-width: max-content;
}
.w-max-100 {
max-width: 100%;
}
.h-max-xs {
max-height: 90px;
}
.h-max-s {
max-height: 115px;
}
.h-100 {
height: 100%;
}
.min-h-100 {
min-height: 100vh;
}
.min-h-62 {
min-height: calc(100% - 62px) !important;
}
.header-height {
height: var(--header-height);
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.display-block {
display: block;
}
.display-inblock {
display: inline-block;
}
.is-link {
text-decoration: none;
color: var(--brand);
display: inline-block;
}
.is-link:hover {
color: var(--neutral);
}
.is-link.color-secondary {
color: var(--secondary);
}
.is-link.color-secondary svg * {
fill: currentColor;
}
.is-link.color-secondary:hover {
color: var(--neutral);
}
:where(.ly-flex).is-link{
display: inline-flex;
width: auto;
}
:where(html) {
--shadow-s: 0 0 15px 2px rgba(10, 10, 10, 0.15);
}
.shadow-s {
box-shadow: var(--shadow-s);
}
.ratio-1 {
aspect-ratio: 1;
width: attr(width);
-o-object-fit: cover;
object-fit: cover;
}
.ratio-1.w-s {
width: var(--spacing-5);
}
.ratio-1.w-m {
width: var(--spacing-8);
}
.txt-center {
text-align: center;
}
.txt-right {
text-align: right;
}
.txt-left {
text-align: left;
}
/* default vue transition */
.v-enter-active,
.v-leave-active {
transition: opacity 150ms ease-in-out;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
@media (prefers-reduced-motion) {
.v-enter-active,
.v-leave-active {
transition: none;
}
}
.loader {
position: relative;
overflow: hidden;
background-color: var(--neutral-light);
width: max(30%, 30px);
height: 3px;
margin-top: 2px;
}
.loader::before {
position: absolute;
display: inline-block;
content: "";
bottom: 0;
width: 80%;
height: 100%;
background-color: var(--neutral-xtradark);
animation: line 1s linear infinite;
}
.loader.w-100 {
width: 100%;
}
.loader span {
position: absolute;
width: 1px;
height: 1px;
border: 0;
clip: rect(0, 0, 0,0);
margin: -1px;
padding: 0;
overflow: hidden;
}
@keyframes line {
0% {
left: -80%;
}
50% {
left: 50%;
}
100% {
left: 180%;
}
}
/* Vendors */
/* https://vue-select.org/guide/css.html#overriding-default-styles */
.orza-select {
width: 100%;
}
/* &.vs--single {} */
.orza-select .vs__selected {
white-space: normal;
}
.orza-select.vs--multiple .vs__selected {
/* margin: 0 0 0 var(--spacing-1); */
background-color: var(--neutral-xtralight);
border: 1px solid var(--neutral-light);
border-radius: var(--border-radius-s);
color: var(--neutral-dark);
padding: calc(var(--spacing-1)/2) var(--spacing-1) ;
font: var(--font-caption);
/* & + .vs__selected {
margin-left: calc(var(--spacing-1) + var(--spacing-1)/2);
} */
}
.orza-select.vs--multiple .vs__deselect {
margin-left: calc(var(--spacing-1) + var(--spacing-1)/2);
}
.orza-select.vs--multiple .vs__deselect svg {
fill: var(--neutral-dark);
}
.orza-select .vs__dropdown-toggle {
border: 1px solid var(--neutral-light);
background-color: var(--neutral-white);
border-radius: var(--border-radius-m);
min-height: 50.5px;
padding: calc(var(--spacing-1) - 1px) var(--spacing-0) calc(var(--spacing-1) + 4px) calc(var(--spacing-1)/4 + var(--spacing-1)/2);
}
.orza-select .vs__dropdown-option {
padding-left: var(--spacing-2);
color: var(--brand);
}
.orza-select .vs__dropdown-option--highlight {
background-color: var(--brand);
color: var(--neutral-white);
}
.orza-select .vs__clear {
background-color: var(--error);
width: 24px;
height: 24px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.orza-select .vs__clear svg {
fill: var(--neutral-white);
}
.orza-select .vs__clear:hover {
background-color: var(--error-dark);
}
.orza-select:hover .vs__dropdown-toggle {
border-color: var(--neutral-medium);
}
.orza-select .vs__open-indicator,
.orza-select .vs__clear {
transform: translateY(-2px);
}
.orza-select .vs__spinner {
border: .9em solid var(--brand-light);
border-left-color: var(--brand-medium);
}
.orza-select .vs__selected-options {
white-space: nowrap;
overflow-x: hidden;
flex-wrap: wrap;
}
.orza-select .vs__selected-options .vs__selected {
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
/* width: 100% !important; */
}
.orza-select .vs__selected-options .vs__search {
padding: 0;
}
.orza-select .vs__dropdown-option,
.orza-select .vs__dropdown-option-selected,
.orza-select .vs__dropdown-option--highlight {
white-space: normal;
/* word-break: break-all; */
-webkit-hyphens: auto;
hyphens: auto;
}
.orza-select.vs--single .vs__selected-options {
flex-wrap: nowrap;
}
.orza-select .vs__actions {
transform: translateY(3px);
}
/* .vs__open-indicator,
.vs__clear {
}
.vs__dropdown-option,
.vs__selected-options,
.vs__search,
.vs__selected,
.vs__selected {
}
.vs__selected-options {
padding: 0;
}
.vs__search {
padding: calc(var(--spacing-1)/2) var(--spacing-1);
} */
.orza-select.is-search .vs__open-indicator {
transform: rotate(0deg) translateY(-2px);
}
.orza-select .vs__dropdown-menu {
/* hack height plugin to avoid overflow caused for position absolute */
max-height: 150px;
}
.flatpickr-calendar .flatpickr-day {
display: flex;
justify-content: center;
align-items: center;
}
.flatpickr-calendar .flatpickr-day.selected {
background: var(--brand);
border-color: var(--brand);
}
.flatpickr-calendar .flatpickr-day.today {
border-color: var(--brand);
}
.flatpickr-calendar .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
color: var(--neutral-white);
}
@media (prefers-color-scheme: light) {
.flatpickr-calendar .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
color: var(--neutral-dark)
}
}
.flatpickr-calendar .flatpickr-month .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
font: var(--font-caption);
font-family: var(--font-brand);
}
/* Align Right
========================================================================== */
/* Aligns the date picker to the right side of its container */
.align-right .flatpickr-calendar {
right: 0;
left: auto;
}
.align-right .arrowTop::before,
.align-right .arrowTop::after {
right: 22px;
left: auto;
}
.block-date-picker .flatpickr-wrapper {
display: block;
}
/* date fix overflow */
.flatpickr-wrapper input.form-control.input {
padding-right: var(--spacing-4);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flatpickr-wrapper input[readonly] {
box-shadow: none;
background-color: transparent;
cursor: pointer;
}
.flatpickr-wrapper input:hover {
--border: var(--neutral-medium);
}
.flatpickr-wrapper input:hover[readonly] {
--border: var(--neutral-medium);
}
.flatpickr-wrapper input:focus,
.flatpickr-wrapper input:focus:hover {
--border: var(--brand);
box-shadow: 0 0 0 4px var(--brand-light);
}
.flatpickr-wrapper input:focus[readonly], .flatpickr-wrapper input:focus:hover[readonly] {
--border: var(--brand);
box-shadow: 0 0 0 4px var(--brand-light);
}
/* Basic editor styles */
.rich-editor {
width: 100%;
color: var(--neutral-dark);
border: 1px solid var(--neutral-light);
border-radius: var(--border-radius-m);
background-color: var(--neutral-white);
}
/* editor menu navigation */
.rich-editor .rich-editor-nav {
background-color: var(--neutral-mediumlight);
display: flex;
padding: calc(var(--spacing-1) / 2.25);
gap: calc(var(--spacing-1) / 2.25);
flex-wrap: wrap;
border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
border-bottom: 1px solid var(--neutral-light);
}
/* sticky for nav on desktop */
@media (min-width: 480px) {
.rich-editor .rich-editor-nav {
position: sticky;
top: calc(var(--header-height) + var(--main-options-height));
z-index: 1
/* fix top on touch screens */
}
@media (hover: none) and (pointer: coarse){
.rich-editor .rich-editor-nav {
position: revert
}
}
}
/* overflow: hidden; */
.rich-editor .rich-editor-nav button{
position: relative;
cursor: pointer;
display: flex;
align-items: center;
border-radius: var(--border-radius-s);
justify-content: center;
flex: 0 1 auto;
padding: calc(var(--spacing-1) * 1.5);
font: var(--font-caption-s);
background-color: var(--neutral-white);
text-align: center;
border: none;
}
.rich-editor .rich-editor-nav button span {
display: none;
position: absolute;
z-index: 1;
background-color: var(--neutral-xtradark);
border-radius: var(--border-radius-s);
padding: var(--spacing-1);
bottom: -89%;
left: 0;
width: -moz-max-content;
width: max-content;
pointer-events: none;
}
.rich-editor .rich-editor-nav button span::before {
content: '';
width: 0;
height: 0;
border-left: var(--spacing-1) solid transparent;
border-right: var(--spacing-1) solid transparent;
border-bottom: var(--spacing-1) solid var(--neutral-xtradark);
position: absolute;
top: -6px;
left: 6px;
}
.rich-editor .rich-editor-nav button svg {
width: calc(var(--spacing-5) / 3);
height: calc(var(--spacing-5) / 3);
}
.rich-editor .rich-editor-nav button svg > *{
fill: var(--neutral);
vertical-align: middle;
}
.rich-editor .rich-editor-nav button:hover,
.rich-editor .rich-editor-nav button.is-active {
background-color: var(--neutral-xtradark);
color: var(--neutral-white);
}
.rich-editor .rich-editor-nav button:hover svg > *,.rich-editor .rich-editor-nav button.is-active svg > *{
fill: var(--neutral-white);
}
.rich-editor .rich-editor-nav button:hover span {
display: block;
}
/* editor container */
.rich-editor .ProseMirror {
padding: var(--spacing-2);
resize: vertical;
overflow: auto;
min-height: 120px;
line-height: 130%;
}
/* Char counter */
.rich-editor .counter {
position: relative;
padding: calc(var(--spacing-1) * 1.5);
font: var(--font-caption-s);
font-weight: var(--fw-medium);
margin: 0;
border-top: 1px solid var(--neutral-light);
}
.rich-editor .counter.has-limit {
color: var(--error);
}
/* Placeholder (at the top) */
.rich-editor .ProseMirror p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
position: absolute;
color: var(--neutral-light);
pointer-events: none;
}
.rich-editor .ProseMirror > * + * {
margin-top: 0.75em;
}
.rich-editor .ProseMirror ul,
.rich-editor .ProseMirror ol {
padding: 0 1rem;
}
.rich-editor .ProseMirror h1,
.rich-editor .ProseMirror h2,
.rich-editor .ProseMirror h3,
.rich-editor .ProseMirror h4,
.rich-editor .ProseMirror h5,
.rich-editor .ProseMirror h6 {
line-height: 135%;
font-weight: 400;
}
.rich-editor .ProseMirror h1.strong, .rich-editor .ProseMirror h2.strong, .rich-editor .ProseMirror h3.strong, .rich-editor .ProseMirror h4.strong, .rich-editor .ProseMirror h5.strong, .rich-editor .ProseMirror h6.strong {
font-weight: 700;
}
.rich-editor .ProseMirror h1 {
font-size: 1.5rem;
}
.rich-editor .ProseMirror h2 {
font-size: 1.375;
}
.rich-editor .ProseMirror h3 {
font-size: 1.25rem;
}
.rich-editor .ProseMirror h4 {
font-size: 1.125rem;
}
.rich-editor .ProseMirror code {
background-color: rgba(#616161, 0.1);
color: #616161;
}
.rich-editor .ProseMirror pre {
background: #0d0d0d;
color: #fff;
font-family: "JetBrainsMono", monospace;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
}
.rich-editor .ProseMirror pre code {
color: inherit;
padding: 0;
background: none;
font-size: 0.8rem;
}
.rich-editor .ProseMirror a {
color: var(--brand);
}
.rich-editor .ProseMirror img {
max-width: 100%;
height: auto;
}
.rich-editor .ProseMirror blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0d0d0d, 0.1);
}
.rich-editor .ProseMirror hr {
border: none;
border-top: 1px solid var(--neutral-light);
margin: var(--spacing-2) 0;
}
.rich-editor .ProseMirror-focused {
outline: 1px solid var(--brand);
/* box-shadow: 0 0 0 5px var(--brand-light); */
/* border-radius: 0 0 var(--border-radius-m) var(--border-radius-m); */
resize: vertical;
overflow: auto;
min-height: 120px;
}
/* OrzaMe custom action to use fullscreen on rich editor */
/* parent elements */
@media (min-width: 768px) {
.has-editorfull .main-nav {
transform: translateX(calc(var(--menu-width) * -1))
}
}
.has-editorfull .dropdown .dropdown-action[aria-expanded="true"]::before,
.has-editorfull .dropdown .dropdown-action[aria-expanded="true"]::after {
position: absolute;
z-index: 16;
}
/* hack to hide content on multiple rich editor */
.has-editorfull .ly-app-primary,
.has-editorfull .ly-app-secondary {
overflow: hidden;
height: var(--spacing-1);
}
.has-editorfull .logo,
.has-editorfull .breadcrumbs {
pointer-events: none;
}
/* fix top on touch screens */
@media (hover: none) and (pointer: coarse){
.has-editorfull .header {
position: fixed;
}
}
/* rich editor */
.is-fullscreen {
position: absolute;
top: var(--header-height);
left: 0;
width: 100%;
min-height: calc(100vh - var(--header-height));
z-index: 13;
background-color: var(--neutral-xtralight);
}
.is-fullscreen .rich-editor-nav {
position: sticky;
top: var(--header-height);
z-index: 14;
}
/* fix top on touch screens */
@media (hover: none) and (pointer: coarse){
.is-fullscreen .rich-editor-nav {
position: fixed
}
}
.is-fullscreen .counter {
position: sticky;
bottom: 0;
z-index: 14;
background-color: var(--neutral-white);
}
/* fix top on touch screens */
@media (hover: none) and (pointer: coarse){
.is-fullscreen .counter {
position: fixed
}
}
.is-fullscreen .ProseMirror{
width: calc(100% - var(--spacing-2));
background-color: var(--neutral-white);
height: 90vh;
}
/* fix top on touch screens */
@media (hover: none) and (pointer: coarse){
.is-fullscreen .ProseMirror{
top: calc(var(--header-height) * 2 + var(--spacing-1))
}
}
.ly-app-main.is-expanded .is-fullscreen {
transition: 0s;
position: fixed;
overflow-y: hidden;
top:0;
height: 100%;
}
.vc-color-wrap {
width: var(--spacing-5) !important;
height: var(--spacing-5) !important;
border-radius: var(--border-radius-l);
}
#nprogress .bar {
background: var(--neutral-xtradark) !important;
height: 6px !important;
}
#nprogress .peg {
box-shadow: none !important;
}
/* @TODO: TEST COMPONENTS */
.test {
width: 100%;
max-width: 960px;
margin: var(--spacing-4) auto;
padding: var(--spacing-2);
}
.test > h2, .test > h3 {
margin-top: var(--spacing-6);
}
.test > h2 {
border-bottom: 1px solid var(--neutral-dark);
padding-bottom: var(--spacing-1)
}
.test > h3 {
border-bottom: 1px solid var(--neutral-medium);
color: var(--neutral);
padding-bottom: var(--spacing-1)
}
.test-component {
margin-bottom: var(--spacing-4);
}