html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.btn {
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
margin: 0 5px;
padding: 0px 30px;
height: 40px;
border: none;
cursor: pointer;
line-height: 40px;
font-family: "PlusJakartaSans", "Montserrat", sans-serif;
}
.btn.disabled {
cursor: not-allowed;
}
.btn.primary {
color: #ffffff;
color: var(--button-color-text, #ffffff);
background: var(--color-primary);
}
.btn.primary.disabled {
background-color: var(--color-state-focus);
}
.btn.link {
padding: 0px 15px;
color: #141414;
color: var(--color-body-on-default);
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
background: none;
}
.btn.link.disabled {
color: var(--color-state-focus);
}
.btn.bordered-link {
color: #141414;
color: var(--color-body-on-default);
background: none;
border: 1px solid var(--color-primary);
}
.btn.bordered-link.disabled {
color: var(--color-state-focus);
border-color: var(--color-state-focus);
}
.btn .gravity-icon-wrapper gv-icon {
display: flex;
width: 16px;
height: 16px;
margin-left: 1px;
filter: invert(100%) brightness(130%) contrast(100%);
}
.btn .gravity-icon-wrapper gv-icon svg {
padding-left: 4px;
}
.icon {
display: inline-block;
width: 12px;
height: 9px;
background-repeat: no-repeat;
background-position: 50%;
background-size: 18px;
margin-left: 5px;
}
.icon.confirm {
background-image: url(//mail.group-cdn.one/v51.1.15/media/confirm.f0cc792c.svg);
}
html[data-theme="dark"] .btn.primary.disabled {
opacity: 0.45;
background-color: var(--color-primary);
}
html[data-theme="dark"] .btn.primary.disabled .gravity-icon-wrapper gv-icon svg {
filter: none;
}
/*# sourceMappingURL=ActionButton.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.error-page {
height: 100vh;
}
.error-content {
display: flex;
align-items: flex-start;
justify-content: center;
background-color: white;
padding: 96px 196px;
border-radius: 4px;
}
.error-text {
width: 548px;
height: 100%;
padding: 20px 0;
}
.headingContainer .heading {
width: 100%;
font-size: 40px;
font-weight: 400;
color: #3c3c3c;
line-height: 50px;
letter-spacing: 0.25px;
}
.headingContainer p {
font-size: 18px;
font-weight: 500;
color: #3c3c3c;
line-height: 28px;
margin: 8px 0 0 0;
}
.subHeadingContainer p {
font-size: 16px;
font-weight: 500;
color: #3c3c3c;
line-height: 24px;
letter-spacing: 0.5px;
margin-bottom: 0;
}
.subHeadingContainer ul {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #3c3c3c;
margin: 0 0 30px 0;
}
.subHeadingContainer li {
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
}
.back-button {
cursor: pointer;
padding: 12px 24px;
font-size: 14px;
line-height: 22px;
border-radius: 4px;
font-weight: 500;
letter-spacing: 0.25px;
color: white;
background: #0066aa;
background: var(--color-state-form-active);
border: 1px solid #0066aa;
border: 1px solid var(--color-state-form-active);
text-decoration: none;
width: 160px;
display: flex;
justify-content: space-around;
}
.back-button .gravity-icon-wrapper {
fill: #ffffff;
}
.back-button .back-arrow-errorBoundary {
margin-top: 3px;
width: 16px;
height: 16px;
}
.back-button .back-arrow-errorBoundary svg {
filter: none;
}
.back-button:hover {
background-color: #0066aa;
background-color: var(--color-state-form-active);
}
.support-text {
color: #3c3c3c;
font-size: 0.9rem;
margin-top: 30px;
}
.support-text-link {
font-weight: 500;
text-decoration: underline;
cursor: pointer;
}
.support-text a {
color: #3c3c3c;
text-decoration: underline;
}
.error-image .errorBoundary {
width: 500px;
height: 400px;
background-image: url(//mail.group-cdn.one/v51.1.15/media/errorBoundary.3993fb6b.svg);
}
/*# sourceMappingURL=ErrorBoundaryUI.css.map */
.gv-toast-alert gv-icon,
.gv-toast-success gv-icon {
filter: invert(1);
}
[data-theme~="dark"] .gv-toast-warning gv-icon svg,
[data-theme~="dark"] .gv-toast-info gv-icon svg {
filter: none;
}
.gv-activated .gv-toast .gv-button {
text-wrap: nowrap;
}
/*# sourceMappingURL=Toast.css.map */
.Notification {
box-sizing: border-box;
text-align: left;
margin: auto;
max-width: 80%;
padding: 8px 14px;
color: #c09853;
background-color: #fcf8e3;
border: 1px solid #fbeed5;
border-radius: 0 0 4px 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.Notification.error {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
}
.Notification .gravity-icon-wrapper {
cursor: pointer;
font-size: 20px;
font-weight: bold;
color: #000;
opacity: 0.2;
float: right;
}
.gv-toast-alert gv-icon,
.gv-toast-success gv-icon {
filter: invert(1);
}
[data-theme~="dark"] .gv-toast-warning gv-icon svg,
[data-theme~="dark"] .gv-toast-info gv-icon svg {
filter: none;
}
/*# sourceMappingURL=Notification.css.map */
.notification-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
/*# sourceMappingURL=NotificationStack.css.map */
.NotificationManager {
z-index: 10000001;
position: absolute;
left: 0;
right: 0;
top: 0;
}
.NotificationManager-transition-enter {
transform: translate3d(0, -5rem, 0);
}
.NotificationManager-transition-enter-active {
transform: translate3d(0, 0, 0);
transition: transform 300ms ease-out;
}
.NotificationManager-transition-exit {
transform: translate3d(0, 0, 0);
}
.NotificationManager-transition-exit-active {
transform: translate3d(0, -5rem, 0);
transition: transform 300ms ease-out;
}
/*# sourceMappingURL=NotificationManager.css.map */
.LoadingPage {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
background-size: 110%;
z-index: 999;
line-height: 20px;
}
.LoadingPage p {
position: absolute;
top: 50%;
margin-top: -10px;
text-align: center;
width: 100%;
height: 46px;
font-size: 20px;
}
.darkBg {
background-color: #1c1920;
}
/*# sourceMappingURL=LoadingPage.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.shortcuts {
z-index: 999999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
color: #141414;
color: var(--color-body-on-default);
}
.shortcuts-container {
position: fixed;
display: flex;
right: 50%;
top: 50%;
background-color: #ffffff;
background-color: var(--color-surface-bright);
color: #141414;
color: var(--color-body-on-default);
flex-direction: column;
padding: 10px;
min-width: 250px;
font-weight: normal;
list-style: none;
margin: 0;
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.2);
box-shadow: 0px 4px 17px var(--primary-box-shadow-color);
border-radius: 4px;
z-index: 99999;
transform: translate(50%, -50%);
}
.shortcuts-dialog {
max-height: 80%;
width: 540px;
padding: 10px;
}
.shortcuts-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.shortcuts-heading {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
font-size: 16px;
margin: 0;
font-weight: var(--button-font-weight);
}
.shortcuts .cancelIcon {
background-size: 12px 12px;
}
.shortcuts-table {
display: flex;
padding: 12px 0;
}
.shortcuts-table-left {
width: 50%;
}
.shortcuts-table-right {
width: 50%;
margin-left: 20px;
}
.shortcuts-table-header {
padding-top: 10px;
font-size: 14px;
font-weight: 500;
font-weight: var(--button-font-weight);
line-height: 13px;
color: #141414;
color: var(--color-body-on-default);
}
.shortcuts-table-effect {
font-size: 12px;
font-weight: 400;
font-weight: var(--normal-font-weight);
line-height: 11px;
text-align: left;
padding: 10px 0;
}
.shortcuts-table-key {
font-size: 12px;
font-weight: 400;
line-height: 11px;
margin-top: -23px;
color: #69686b;
color: var(--color-body-on-alternative);
background: #e2e2e2;
background: var(--color-border-alt);
padding: 2px;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
border-radius: 2px;
}
.shortcuts-table .mailActions {
margin-top: 10px;
}
.shortcuts-table .applications {
margin-top: 55px;
}
.cancelIcon {
height: 20px;
width: 20px;
background-repeat: no-repeat;
background-size: 12px 12px;
cursor: pointer;
}
/*# sourceMappingURL=KeyboardShortcuts.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.tourGuide {
position: fixed;
z-index: 100322;
width: 100%;
height: 100%;
overflow: auto;
right: 0;
top: 0;
}
.tourGuide .hole {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
position: absolute;
}
.tourGuide .hole.firstStep {
top: 0;
left: 0px;
width: 73px;
height: 100vh;
}
.tourGuide .hole.secondStep {
top: 0;
left: 0;
width: 73px;
height: 100vh;
}
.tourGuide .hole.thirdStep {
top: 0;
right: 0px;
width: 228px;
height: 54px;
}
.tourGuide .hole.fourthStep {
top: 0;
left: 0;
width: 1px;
height: 1px;
}
.tourGuide .hole.fifthStep {
top: 55px;
left: 250px;
width: 40px;
height: calc(100vh - 55px);
}
.tourGuide .hole.seventhStep {
top: 55px;
right: 80px;
width: 60px;
height: 46px;
}
.tourGuide .hole.seventhStep.calenderHide {
right: 15px;
}
.tourGuide .hole .autoCompose {
position: absolute;
padding-top: 10px;
pointer-events: none;
}
.tourGuide .dummyDragHandle {
height: 100vh;
width: 44px;
position: absolute;
background: #ffffff;
background: var(--color-surface-bright);
overflow-y: hidden;
}
.tourGuide .dummyDragHandle-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding-top: 55px;
height: 100%;
}
.tourGuide .dummyDragHandle-container .dragHandle {
width: 5px;
height: 100%;
background-color: var(--color-primary);
}
.tourGuide-container {
background-color: #f7f7f7;
background-color: var(--color-surface-dim);
margin: auto;
width: 100%;
max-width: 604px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
padding: 26px 48px;
}
.tourGuide-container.stepCard {
width: 252px;
transform: none;
margin: 0;
padding: 24px;
}
.tourGuide-container.stepCard.firstStep {
top: 55px;
left: 99px;
}
.tourGuide-container.stepCard.firstStep .arrow {
top: 28px;
}
.tourGuide-container.stepCard.secondStep {
top: 55px;
left: 99px;
}
.tourGuide-container.stepCard.secondStep .arrow {
top: 104px;
}
.tourGuide-container.stepCard.thirdStep {
float: right;
right: 510px;
left: auto;
top: 229px;
}
.tourGuide-container.stepCard.fourthStep {
top: 295px;
float: right;
right: 316px;
}
.tourGuide-container.stepCard.fifthStep {
top: 50%;
left: 332px;
transform: translate(0%, -50%);
}
.tourGuide-container.stepCard.sixthStep {
bottom: 256px;
float: right;
right: 134px;
left: auto;
top: auto;
top: initial;
}
.tourGuide-container.stepCard.seventhStep {
top: 127px;
float: right;
right: 41px;
left: auto;
height: -moz-fit-content;
height: fit-content;
width: -moz-max-content;
width: max-content;
}
.tourGuide-container.stepCard.seventhStep.calenderHide {
right: 15px;
}
.tourGuide-container .cancelIcon {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
margin-right: 0px;
}
.tourGuide-container .cancelIcon svg path {
transform: scale(1.4);
transform-origin: center;
}
.tourGuide-container-body svg {
width: 72px;
height: 72px;
margin-top: 20px;
}
.tourGuide-container-body-description {
max-width: 604px;
}
.tourGuide-container-body .dummyMail {
display: flex;
justify-content: flex-start;
top: 190px;
position: fixed;
left: 293px;
width: 100%;
max-width: 490px;
height: 81px;
background: #ffffff;
background: var(--color-surface-bright);
pointer-events: none;
color: #141414;
color: var(--color-body-on-default);
}
.tourGuide-container-body .dummyMail.mailListDisable {
height: 65px;
}
.tourGuide-container-body .dummyMail .primaryAction {
display: flex;
position: relative;
width: 83px;
}
.tourGuide-container-body .dummyMail .primaryAction .gravity-icon-wrapper {
width: 18px;
height: 18px;
left: 22px;
position: relative;
}
.tourGuide-container-body .dummyMail .primaryAction .gravity-icon-wrapper gv-icon svg {
width: 16px;
height: 16px;
}
.tourGuide-container-body .dummyMail .primaryAction span:nth-child(3) svg {
filter: none;
}
.tourGuide-container-body .dummyMail .primaryAction span:nth-child(3) svg path {
transform: scale(2.3);
transform-origin: center;
fill: #0066aa;
fill: var(--color-state-form-active);
}
.tourGuide-container-body .dummyMail .primaryAction input {
width: 12px;
height: 12px;
top: 13px;
position: absolute;
left: 22px;
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.tourGuide-container-body .dummyMail .primaryAction .readIcon {
position: absolute;
top: 16px;
left: 60px;
height: 12px;
display: block;
width: 12px;
border-radius: 100%;
background-color: var(--color-primary);
background-position: center;
filter: none;
}
.tourGuide-container-body .dummyMail .primaryAction .mailStar {
position: absolute;
top: 14px;
left: 42px;
height: 15px;
display: block;
width: 15px;
background-position: center;
}
.tourGuide-container-body .dummyMail .mailBody {
position: relative;
width: 100%;
max-width: calc(100% - 180px);
white-space: nowrap;
}
.tourGuide-container-body .dummyMail .mailBody .displayName {
font-weight: 600;
max-width: 247px;
font-size: 14px;
line-height: 17px;
position: relative;
top: 13px;
text-overflow: ellipsis;
overflow: hidden;
margin-top: 7px;
}
.tourGuide-container-body .dummyMail .mailBody .subject {
font-weight: 600;
font-size: 12px;
line-height: 15px;
position: relative;
top: 5px;
text-overflow: ellipsis;
overflow: hidden;
}
.tourGuide-container-body .dummyMail .secondaryAction {
position: relative;
width: 100px;
}
.tourGuide-container-body .dummyMail .secondaryAction .gravity-icon-wrapper gv-icon svg {
width: 16px;
height: 16px;
}
.tourGuide-container-body .dummyMail .secondaryAction .moreVerticalIcon {
position: relative;
width: 16px;
display: block;
height: 16px;
cursor: pointer;
margin-left: 64px;
top: 0px;
}
.tourGuide-container-body .dummyMail .secondaryAction .date {
margin-top: 3px;
font-weight: 400;
font-size: 12px;
line-height: 15px;
color: #69686b;
color: var(--color-body-on-alternative);
position: relative;
top: 23px;
margin-right: 24px;
text-align: right;
}
.tourGuide-container-body .dummyMail.wide-list {
height: 45px;
}
.tourGuide-container-body .dummyMail.wide-list .mailBody {
display: flex;
align-items: center;
}
.tourGuide-container-body .dummyMail.wide-list .mailBody .displayName {
margin: 0;
top: 0;
width: 30%;
padding-right: 30px;
flex: 0 0 auto;
}
.tourGuide-container-body .dummyMail.wide-list .mailBody .subject {
top: 0;
margin: 0;
flex: 1 1 auto;
padding-right: 20px;
}
.tourGuide-container-body .dummyMail.wide-list .secondaryAction {
display: flex;
align-items: center;
flex-direction: row-reverse;
}
.tourGuide-container-body .dummyMail.wide-list .secondaryAction .moreVerticalIcon {
top: 0;
margin: 0;
right: 13px;
}
.tourGuide-container-body .dummyMail.wide-list .secondaryAction .date {
top: 0;
margin: 0;
right: 45px;
}
.tourGuide-container-body .mailActionDialogContainer {
overflow-y: auto;
position: absolute;
width: 250px;
padding: 6px 0px;
z-index: 999999;
background: #ffffff;
background: var(--color-surface-bright);
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.1);
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 10px;
font-weight: normal;
border: 1px solid none;
border: 1px solid var(--sub-menus-border-color);
top: -80px;
left: -288px;
pointer-events: none;
}
.tourGuide-container-body .mailActionDialogContainer.leftPosition {
top: -110px;
right: calc(-100% + 24px);
left: auto;
}
.tourGuide-container-body .mailActionDialogContainer-actionContainer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px;
cursor: pointer;
}
.tourGuide-container-body .mailActionDialogContainer-actionContainer .actionWrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.tourGuide-container-body .mailActionDialogContainer-actionContainer-item {
margin: 0;
display: flex;
gap: 16px;
width: 100%;
font-weight: 400;
font-weight: var(--font-weight-light-bold);
}
.tourGuide-container-body .mailActionDialogContainer-actionContainer-item .gravity-icon-wrapper .gv-activated svg {
width: 20px;
height: 20px;
margin-top: 0px;
}
.tourGuide-container-body .mailActionDialogContainer-actionContainer-item span {
font-size: 12px;
line-height: 15px;
color: #141414;
color: var(--color-body-on-default);
}
.tourGuide-container-body .mailActionDialogContainer-actionContainer-item span.chevronIcon {
margin-left: auto;
background-size: 16px;
transform: rotate(88deg);
}
.tourGuide-container-body .mailActionDialogContainer-actionContainer-item span[class^="Icon"] {
min-width: 16px;
}
.tourGuide-container-body .mailActionDialogContainer-actionContainer-item :nth-child(3) {
margin-left: auto;
}
.tourGuide-container-body .mailActionDialogContainer-border {
display: block;
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
}
.tourGuide-container-body .tourGuide-welcome-heading {
letter-spacing: 0.15px;
color: #141414;
color: var(--color-body-on-default);
margin: 20px 0 9px;
}
.tourGuide-container-body .tourGuide-welcome-description {
letter-spacing: 0.1px;
color: #141414;
color: var(--color-body-on-default);
margin-top: 16px;
}
.tourGuide-container-body .tourGuide-welcome-description2 {
letter-spacing: 0.1px;
padding-left: 3px;
color: #141414;
color: var(--color-body-on-default);
}
.tourGuide-container-body .tourGuide-welcome-Actions {
margin-top: 30px;
}
.tourGuide-container-body .tourGuide-welcome-Actions button {
padding: 12px 24px;
}
.tourGuide-container-body .tourGuide-welcome-Actions button:first-child {
margin-right: 20px;
margin-bottom: 20px;
color: #141414;
color: var(--color-body-on-default);
background: transparent;
}
.tourGuide-container-body .tourGuide-welcome-Actions .grey {
border-color: #69686b;
border-color: var(--color-body-on-alternative);
color: #141414;
color: var(--color-body-on-default);
background: transparent;
letter-spacing: 0.25px;
}
.tourGuide-container-body .tourGuide-welcome-Actions button:nth-child(2) {
letter-spacing: 0.25px;
}
.tourGuide-container-body .tourGuide-card-head {
margin-bottom: 0px;
margin-top: 9px;
color: #141414;
color: var(--color-body-on-default);
}
.tourGuide-container-body .tourGuide-card-description {
letter-spacing: 0.25px;
margin-bottom: 20px;
margin-top: 0px;
width: 228px;
color: #141414;
color: var(--color-body-on-default);
}
.tourGuide-container-body .tourGuide-card-buttons button {
line-height: 30px;
}
.tourGuide-container-body .tourGuide-card-buttons button:first-child {
margin-right: 10px;
color: #141414;
color: var(--color-body-on-default);
background: transparent;
}
.tourGuide-container-body .tourGuide-card-buttons .grey {
font-weight: 500;
border-color: #69686b;
border-color: var(--color-body-on-alternative);
color: #141414;
color: var(--color-body-on-default);
background: transparent;
}
.tourGuide-container-body .steps-Head {
color: #3a383e;
color: var(--invite-date-color);
position: relative;
bottom: 4px;
letter-spacing: 0.4px;
margin: 0px;
}
.tourGuide-container-body .left-right-cursor {
position: absolute;
top: 50%;
left: -46px;
width: 18px;
height: 18px;
transform: translateY(-50%);
}
.tourGuide-container-body .arrow {
position: absolute;
width: 15px;
height: 15px;
background: #f7f7f7;
background: var(--color-surface-dim);
}
.tourGuide-container-body .arrow.leftArrow {
left: -8px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.tourGuide-container-body .arrow.rightArrow {
right: -8px;
top: 50%;
transform: translateY(-50%) rotate(225deg);
}
.tourGuide-container-body .arrow.topArrow {
right: 55px;
top: -1px;
transform: translateY(-50%) rotate(135deg);
}
.tourGuide-container-body .arrow.topArrow.calenderHide {
right: 15px;
}
.tourGuide-container-body .arrow.bottomArrow {
width: 27px;
height: 15px;
left: 38px;
transform: translateX(-50%) rotate(225deg);
bottom: -4px;
}
.tourGuide .dummyAutoComposeBtn {
display: flex;
width: -moz-fit-content;
width: fit-content;
align-items: center;
margin-bottom: 12px;
margin-left: 20px;
z-index: 9;
}
.tourGuide .dummyAutoComposeBtn .hollowButton-small-blue {
display: flex;
align-items: center;
box-shadow: #ffffff 0px 0px 0px 3px;
box-shadow: var(--color-surface-bright) 0px 0px 0px 3px;
background: #ffffff;
background: var(--color-surface-bright);
}
.tourGuide .autoComposeBtn {
display: none !important;
}
/*# sourceMappingURL=TourGuide.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.whatsNew-container {
z-index: 999999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
color: #141414;
color: var(--color-body-on-default);
}
.whatsNew-header {
border-right: 1px solid #e2e2e2;
border-right: 1px solid var(--color-border-alt);
display: flex;
align-items: center;
white-space: nowrap;
flex-grow: 0;
justify-content: flex-end;
padding-left: 22px;
}
.whatsNew-header-text {
padding-right: 22px;
margin-top: 2px;
color: #0066aa;
color: var(--color-state-form-active);
cursor: pointer;
}
.whatsNew-header .newMailNotify {
background-color: #76b82a;
width: 12px;
height: 12px;
margin-right: 5px;
border-radius: 50%;
}
.whatsNew-header .newMailNotified {
display: none;
}
.whatsNew-dialog {
position: fixed;
right: 0;
top: 60px;
width: 360px;
background: #ffffff;
background: var(--color-surface-bright);
height: calc(100% - 65px);
border-radius: 4px;
margin: 0 5px 5px 0;
}
.whatsNew-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 43px;
padding: 0 14px 0 18px;
border-bottom: 1px solid #d4d4d4;
color: #141414;
color: var(--color-body-on-default);
}
.whatsNew-dialog-header-text {
display: inline-flex;
align-items: center;
justify-items: center;
height: 43px;
vertical-align: middle;
border-bottom: 1px solid #006fcd;
font-size: 13px;
cursor: text;
}
.whatsNew-dialog-header-button {
display: inline-block;
width: 10px;
height: 10px;
margin: 0;
cursor: pointer;
}
.whatsNew-dialog-header .gravity-icon-wrapper {
display: inline-block;
width: 20px;
height: 20px;
margin: 0;
cursor: pointer;
background-size: 10px 10px;
background-repeat: no-repeat;
background-position: center center;
}
.whatsNew-dialog-header .gravity-icon-wrapper .cancelIcon {
top: 12px !important;
height: 20px !important;
width: 14px !important;
}
.whatsNew-dialog-header .gravity-icon-wrapper .cancelIcon {
right: 4px;
padding: 0px;
}
.whatsNew-dialog-body {
height: calc(100% - 46px);
overflow: auto;
}
.whatsNew-dialog-body-list {
margin: 0;
padding: 0;
list-style-type: none;
}
.whatsNew-dialog-body-list-item {
cursor: auto;
cursor: initial;
margin: 5px 10px;
padding: 14px 17px;
position: relative;
border-radius: 2px;
background-color: #f7f7f7;
background-color: var(--color-surface-dim);
}
.whatsNew-dialog-body-list-item-icon {
margin-bottom: 6px;
}
.whatsNew-dialog-body-list-item-icon .aidaIcon {
position: relative;
top: 0;
width: 52px;
height: 16px;
background-image: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
background-image: var(--aida-logo);
}
.whatsNew-dialog-body-list-item-date {
color: #141414;
color: var(--color-body-on-default);
}
.whatsNew-dialog-body-list-item-title {
white-space: pre-wrap;
color: #141414;
color: var(--color-body-on-default);
margin-top: 3px;
}
.whatsNew-dialog-body-list-item-description {
white-space: pre-wrap;
margin-top: 4px;
line-height: 17px;
color: #141414;
color: var(--color-body-on-default);
}
.whatsNew-dialog-body-list-item-link {
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
height: 17px;
margin-top: 5px;
color: #0066aa;
color: var(--color-state-form-active);
}
.displayNone {
display: none;
}
/*# sourceMappingURL=whatsNewDialog.css.map */
.Scrollable {
position: absolute;
left: 0;
right: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.Scrollable-wrapper {
position: relative;
}
/*# sourceMappingURL=Scrollable.css.map */
.customTooltip-container {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.customTooltip {
display: flex;
position: fixed;
max-width: 200px;
z-index: 999999;
padding: 4px 8px;
text-align: center;
text-decoration: none;
background-color: #000000;
color: #fff;
border-radius: 4px;
white-space: nowrap;
opacity: 0.8;
}
.customTooltip.top .arrow-left {
top: 19px;
left: 45%;
transform: rotate(270deg);
}
.customTooltip.left .arrow-left {
transform: rotate(180deg);
}
.customTooltip.right {
transform: translateY(-88%);
left: 18%;
max-height: 34px;
display: flex;
}
.customTooltip.bottom {
transform: translateX(-50%);
top: 100%;
}
.customTooltip.bottom .arrow-left {
top: -13px;
left: 50%;
transform: rotate(90deg);
}
.arrow-left {
display: block;
position: relative;
right: 14px;
top: 3px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 6px solid black;
border-bottom: 6px solid transparent;
}
.txt {
margin-left: -6px;
min-height: 18px;
white-space: normal;
word-break: break-all;
}
/*# sourceMappingURL=CustomTooltip.css.map */
.help-header {
border-right: 1px solid var(--color-border-alt);
padding: 0px 22px;
font-size: 12px;
line-height: 22px;
color: var(--color-body-on-default);
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.help-header-text {
color: var(--color-body-on-default);
margin-top: 2px;
margin-right: 5px;
}
.help-header .gravity-icon-wrapper .keyboard_arrow_down,
.help-header .gravity-icon-wrapper .keyboard_arrow_up {
width: 16px;
height: 16px;
}
.help-header-body {
position: absolute;
z-index: 9999;
right: 13%;
top: 60px;
display: block;
}
.help-header-container {
position: relative;
background-color: var(--color-surface-bright);
color: var(--color-body-on-default);
flex-direction: column;
padding: 10px 0px;
min-width: 215px;
font-weight: normal;
list-style: none;
margin: 0;
box-shadow: 0px 4px 17px var(--primary-box-shadow-color);
border-radius: 4px;
border: 1px solid var(--sub-menus-border-color);
}
.help-header-container .whatsNewSection {
border-bottom: 1px solid var(--color-border-alt);
padding: 10px 20px;
display: flex;
align-items: center;
}
.help-header-menu-item {
display: flex;
font-size: 14px;
cursor: pointer;
padding: 10px 20px;
}
.help-header-menu-item:hover {
background-color: var(--color-state-hover);
}
.help-header-menu-item-text {
font-size: 14px;
font-weight: var(--font-weight-light-bold);
overflow: hidden;
align-items: center;
justify-items: center;
position: relative;
margin-left: 10px;
color: var(--color-body-on-default);
}
.help .chevronIcon {
background-size: 16px 16px;
height: 16px;
width: 16px;
background-repeat: no-repeat;
transform: rotate(180deg);
}
.help .Icon {
height: 20px;
width: 20px;
background-repeat: no-repeat;
background-size: contain;
}
.helpRef .help-body {
position: absolute;
z-index: 9999;
right: 13%;
top: 60px;
display: block;
}
.helpRef .help-body .help-container {
position: relative;
background-color: #ffffff;
background-color: var(--color-surface-bright);
color: #3c3c3c;
color: var(--color-body-on-default);
flex-direction: column;
padding: 10px 0px;
min-width: 215px;
font-weight: normal;
list-style: none;
margin: 0;
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.2);
box-shadow: 0px 4px 17px var(--primary-box-shadow-color);
border-radius: 4px;
border: none;
border: 1px solid var(--sub-menus-border-color);
}
.helpRef .help-body .help-container .help-body-list .help-menu-item {
display: flex;
font-size: 14px;
cursor: pointer;
padding: 10px 20px;
}
.helpRef .help-body .help-container .help-body-list .help-menu-item .help-menu-item-text {
font-size: 14px;
font-weight: 400;
font-weight: var(--font-weight-light-bold);
overflow: hidden;
align-items: center;
justify-items: center;
position: relative;
margin-left: 10px;
color: #3c3c3c;
color: var(--color-body-on-default);
}
.helpRef .help-body .help-container .help-body-list .displayNone {
display: none;
}
/*# sourceMappingURL=helpSection.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.container-ham {
cursor: pointer;
max-width: 180px;
font-weight: 400;
font-weight: var(--font-weight-light-bold);
}
.container-ham-email {
max-width: 150px;
color: #3c3c3c;
text-overflow: ellipsis;
white-space: nowrap;
}
.container-ham-email {
color: var(--accordian-text-color);
}
.hamburgerRef .gv-tooltip {
z-index: 10000001 !important;
}
.customTooltip {
z-index: 999999999;
}
.selected .container-ham-arrowIcon {
transform: rotate(180deg);
}
.context-menu-popup {
z-index: 10000000;
display: flex;
flex-direction: column;
padding: 10px 0px;
position: absolute;
min-width: 260px;
height: auto;
right: 17px;
top: 60px;
background: #ffffff;
background: var(--color-surface-bright);
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.2);
box-shadow: 0px 4px 17px var(--primary-box-shadow-color);
border-radius: 4px;
border: none;
border: var(--sub-menus-border-color);
}
.context-menu-popup-display-used {
margin-top: 10px;
padding: 2px 4px;
font-size: 10px;
font-weight: 600;
border: 0.5px solid #0078c8;
border-radius: 4px;
align-self: center;
color: #141414;
color: var(--color-body-on-default);
}
.context-menu-popup .profile_info {
width: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 20px;
}
.context-menu-popup .profile_info .customTooltip-container {
max-width: 210px;
}
.context-menu-popup-profile-skelton {
margin-bottom: 10px;
background-image: url(//mail.group-cdn.one/v51.1.15/media/profile.55ea6b5d.svg);
background-repeat: no-repeat;
width: 48px;
height: 48px;
align-self: center;
background-size: contain;
}
.context-menu-popup-display-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
align-self: center;
color: #141414;
color: var(--color-body-on-default);
}
.context-menu-popup-display-name-email {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
align-self: center;
padding-left: 5px;
color: #69686b;
color: var(--color-body-on-alternative);
cursor: auto;
cursor: initial;
}
.context-menu-popup-display-name-linkToOldMail {
line-height: 17px;
font-size: 14px;
font-weight: 600;
font-weight: var(--linkToOldMail);
color: var(--color-primary);
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
margin-top: 8px;
}
.context-menu-popup-menu-links {
padding-top: 10px;
width: 100%;
border-top: 1px solid #e2e2e2;
border-top: 1px solid var(--color-border-alt);
}
.context-menu-popup-menu-links .icons {
display: flex;
align-items: center;
justify-items: center;
font-size: 14px;
cursor: pointer;
padding: 10px 20px 10px 30px;
max-width: 215px;
box-sizing: content-box;
box-sizing: initial;
}
.context-menu-popup-menu-links .icons:hover,
.context-menu-popup-menu-links .icons.active {
background-color: var(--color-state-hover);
}
.context-menu-popup-menu-links .icons span.gravity-icon-wrapper:nth-of-type(2) {
height: 24px;
width: 24px;
margin-left: auto;
margin-top: -2px;
cursor: pointer;
}
.context-menu-popup-menu-links .icons .language {
background-repeat: no-repeat;
width: 20px;
height: 20px;
background-size: contain;
}
.context-menu-popup-menu-links .icons .themes {
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
.context-menu-popup-menu-links .icons .colorIcon {
background-repeat: no-repeat;
width: 20px;
height: 20px;
background-size: contain;
}
.context-menu-popup-menu-links .icons .logout {
background-repeat: no-repeat;
width: 20px;
height: 20px;
background-size: contain;
}
.context-menu-popup-menu-links .icons .settings {
background-repeat: no-repeat;
width: 20px;
height: 20px;
background-size: contain;
}
.context-menu-popup-menu-links .icons .Dropdown {
margin-left: 15px;
}
.context-menu-popup-menu-links .icons .Dropdown .caret {
display: none;
}
.context-menu-popup-menu-links .icons .Dropdown-button {
font-weight: 500;
font-size: 14px;
line-height: 13px;
color: #3c3c3c;
}
.context-menu-popup-menu-links .icons .Dropdown .open {
top: -180px;
left: auto;
right: 159px;
}
.context-menu-popup-menu-links .icons .action {
margin-left: 15px;
color: #141414;
color: var(--color-body-on-default);
cursor: pointer;
}
.context-menu-popup-menu-links .icons.colorTheme {
position: relative;
}
.context-menu-popup-menu-links .icons.colorTheme span.gravity-icon-wrapper:nth-of-type(2) {
display: flex;
align-items: center;
justify-content: center;
height: 24px;
width: 24px;
margin-left: auto;
margin-top: -2px;
cursor: pointer;
}
.context-menu-popup-menu-links .icons.colorTheme:hover .colorTheme-menu {
display: block;
}
.context-menu-popup-menu-links .icons .colorTheme-text {
color: #141414;
color: var(--color-body-on-default);
margin-left: 15px;
}
.context-menu-popup-menu-links .icons .colorTheme-menu {
display: none;
position: absolute;
right: 240px;
width: 226px;
top: -25px;
background: #ffffff;
background: var(--color-surface-bright);
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.2);
box-shadow: 0px 4px 17px var(--primary-box-shadow-color);
border-radius: 4px;
padding: 10px 0px;
border: none;
border: var(--sub-menus-border-color);
}
.context-menu-popup-menu-links .setting-main {
text-decoration: none;
}
.context-menu-popup-menu-links .separator {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #e2e2e2;
border-top: 1px solid var(--color-border-alt);
}
[data-theme~="dark"] .context-menu-popup-profile-skelton {
filter: invert(100%) brightness(250%) contrast(100%);
}
[data-theme~="dark"] .container-ham-arrowIcon svg,
[data-theme~="dark"] .gvIcon svg {
filter: none;
}
/*# sourceMappingURL=HamburgerMenu.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.ThemeContextMenu {
width: 100%;
}
.ThemeContextMenu .theme {
margin: 0px;
padding: 16px 25px 16px 20px;
cursor: pointer;
display: flex;
align-items: center;
}
.ThemeContextMenu .theme:hover {
background-color: var(--color-state-hover);
}
.ThemeContextMenu .theme .gravity-icon-wrapper {
position: absolute;
right: 20px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
.ThemeContextMenu .theme .circle {
height: 25px;
width: 25px;
min-width: 25px;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
border: 1px solid none;
border: 1px solid var(--color-theme-picker-border);
}
.ThemeContextMenu .theme .circle.blue {
background-color: #0078c8;
}
.ThemeContextMenu .theme .circle.pink {
background-color: #e00070;
}
.ThemeContextMenu .theme .circle.torquoise {
background-color: #05736d;
}
.ThemeContextMenu .theme .circle.dark {
background-color: #000000;
}
.ThemeContextMenu .theme-name {
width: 91%;
color: #141414;
color: var(--color-body-on-default);
}
.ThemeContextMenu .contextText {
color: #69686b;
color: var(--color-body-on-alternative);
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 10px 20px 0px;
gap: 1px;
margin: 0 0 1px;
}
.ThemeContextMenu .disableItem {
cursor: not-allowed;
}
.ThemeContextMenu .disableItem .theme {
pointer-events: none;
opacity: 0.5;
}
.ThemeContextMenu .disableItem .theme:hover {
background-color: #ffffff;
background-color: var(--color-surface-bright);
}
.ThemeContextMenu .separator {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #e2e2e2;
border-top: 1px solid var(--color-border-alt);
}
/*# sourceMappingURL=ThemeContextMenu.css.map */
.LanguagePicker {
cursor: pointer;
}
.LanguagePicker .LanguagePickerList-selected {
margin-left: 15px;
color: var(--color-body-on-default);
cursor: pointer;
}
.LanguagePickerList {
position: fixed;
display: flex;
right: 265px;
top: 115px;
background: var(--color-surface-bright);
color: var(--color-body-on-default);
flex-direction: column;
width: 258px;
font-weight: normal;
list-style: none;
margin: 0;
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.1);
border-radius: 4px;
padding: 10px 0px;
border: var(--sub-menus-border-color);
}
.LanguagePickerList .LanguageListItem {
padding: 10px 20px;
display: flex;
flex-direction: row;
cursor: pointer;
min-width: 154px;
}
.LanguagePickerList .LanguageListItem:hover {
background-color: var(--color-state-hover);
border-radius: 0px;
}
.LanguagePickerList .LanguageListItem .text {
color: var(--color-body-on-default);
white-space: nowrap;
}
.LanguagePickerList .LanguageListItem .checkmark {
width: 22px;
height: 22px;
margin-left: auto;
display: inline-block;
vertical-align: bottom;
color: var(--color-body-on-default);
}
.LanguagePickerList .LanguageListItem.active .checkmark {
display: inline-block;
margin-left: auto;
}
.LanguagePickerList-selected {
margin-left: 15px;
color: var(--color-body-on-default);
cursor: pointer;
}
.oldHeader .LanguagePickerList .LanguageListItem .checkmark {
width: 18px;
height: 18px;
margin-left: auto;
display: inline-block;
vertical-align: bottom;
background-size: 50%;
}
.oldHeader .Dropdown .Dropdown-button {
border: none;
}
.oldHeader .Dropdown .DropdownAnimationWrapper .Dropdown-content .LanguagePickerList {
border: none;
}
/*# sourceMappingURL=LanguagePicker.css.map */
.gv-activated gv-logo {
margin-top: 10px;
}
.gv-activated .header-container {
gap: 24px;
height: var(--navigation-bar-height);
}
.gv-activated .header-container .right-container {
gap: 115px;
}
.gv-activated .header-container .right-container .tooltipContainer {
left: calc(50% - 150px);
top: 58px;
transform: translateX(-150%);
width: 100%;
max-width: -moz-fit-content;
max-width: fit-content;
}
.gv-activated .ask-aida-btn gv-icon svg {
filter: none;
}
/*# sourceMappingURL=SwitchBar.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 700;
--font-weight-bolder: 600;
--font-weight-light-bold: 500;
--color-theme-picker-border: none;
--accordian-font-weight: 500;
--toggleSwitch-font: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 700;
--mailFilter-group: 500;
--linkToOldMail: 600;
--help-text: 500;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 700;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 500;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 500;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 500;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 500;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
html {
--size-xs: 4px;
--size-sm: 8px;
--size-md: 16px;
--size-lg: 24px;
--size-xl: 32px;
--size-xxl: 48px;
}
.header-xxxl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: 700;
letter-spacing: 0;
line-height: 78px;
}
.header-xxl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 48px;
font-weight: 700;
letter-spacing: 0;
line-height: 62px;
}
.header-xl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 40px;
font-weight: 700;
letter-spacing: 0.1px;
line-height: 52px;
}
.header-lg {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 32px;
font-weight: 700;
letter-spacing: 0.05px;
line-height: 39px;
}
.header-md {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.04px;
line-height: 36px;
}
.header-sm {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 700;
letter-spacing: 0.04px;
line-height: 31px;
}
.header-xs {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.03px;
line-height: 26px;
}
.text-xl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 400;
letter-spacing: 0;
line-height: 36px;
}
.text-xl.bold {
font-weight: 600;
}
.text-lg {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0;
line-height: 27px;
}
.text-lg.bold {
font-weight: 600;
}
.text-md {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.08px;
line-height: 24px;
}
.text-md.bold {
font-weight: 600;
}
.text-sm {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04px;
line-height: 21px;
}
.text-sm.bold {
font-weight: 600;
}
.caption-lg {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.05px;
line-height: 18px;
}
.caption-lg.bold {
font-weight: 600;
}
.caption-sm {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.05px;
line-height: 15px;
}
.caption-sm.bold {
font-weight: 600;
}
.searchContainer {
position: relative;
height: 100%;
flex-grow: 1;
min-width: 226px;
max-width: 536px;
}
.searchBar {
display: flex;
flex-direction: column;
width: 100%;
}
.searchBar .form-search {
height: 42px;
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
padding: 0 16px;
background: #f7f7f7;
background: var(--color-surface-dim);
border-radius: 4px;
}
.searchBar .form-search input {
font-family: inherit;
}
.searchBar .gv-input-search.highlightError {
border: 1px solid #b30016;
border: 1px solid var(--color-validation-error);
}
.searchBar .gv-input-search.highlightError:focus {
border: 1px solid #b30016;
border: 1px solid var(--color-validation-error);
}
.searchBar .search-field {
width: 100%;
height: 100%;
padding-left: 18px;
border: none;
box-sizing: border-box;
background: inherit;
outline: none;
box-shadow: none;
border-radius: inherit;
color: #141414;
color: var(--color-body-on-default);
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04px;
line-height: 21px;
}
.searchBar .search-field:focus {
outline: none;
}
.searchBar ::-webkit-input-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04px;
line-height: 21px;
}
.searchBar ::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04px;
line-height: 21px;
}
.searchBar gv-icon,
.searchBar .icon-search {
cursor: pointer;
}
.searchBar .advance-search-toggle gv-icon {
vertical-align: text-top;
}
.searchBar .icon-search {
box-sizing: border-box;
width: 29px;
height: 29px;
background-size: 29px;
}
.searchBar .advance-search-popup {
position: absolute;
top: 100%;
z-index: 1000;
min-width: 536px;
}
.searchBar .advance-search-toggle + .icon-search {
border-left: 1px solid #323036;
}
/*# sourceMappingURL=SearchBar.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.checkboxDropdown {
min-width: 0;
}
.checkboxDropdown .selectedWrapper {
color: #141414;
color: var(--color-body-on-default);
display: flex;
padding: 3px 16px;
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
border-radius: 4px;
gap: 8px;
cursor: pointer;
}
.checkboxDropdown .selectedWrapper .extraSelection {
padding: 3px 5px;
background: var(--color-state-active);
border-radius: 4px;
height: 24px;
}
.checkboxDropdown .selectedWrapper .chevron {
display: flex;
}
.checkboxDropdown .selectedWrapper .chevron gv-icon svg {
filter: none;
}
.checkboxDropdown .selectedWrapper .chevron.active {
transform: rotate(180deg);
}
.checkboxDropdown .selectedWrapper .customTooltip-container {
display: flex;
gap: 8px;
align-items: center;
}
.checkboxDropdown .selectedWrapper .customTooltip-container .customTooltip .arrow-left {
left: 43%;
}
.checkboxDropdown .selectedWrapper .customTooltip-container .selectedField {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.checkboxDropdown .dropdownWrapper {
display: flex;
flex-direction: column;
position: fixed;
z-index: 9999;
width: 100%;
max-width: 300px;
padding: 16px 0px 16px 24px;
background: #ffffff;
background: var(--color-surface-bright);
border-radius: 4px;
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
margin-top: 4px;
}
.checkboxDropdown .dropdownWrapper .optionsWrapper {
max-height: 300px;
overflow: auto;
}
.checkboxDropdown .dropdownWrapper .optionsWrapper::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.checkboxDropdown .dropdownWrapper .optionsWrapper::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.checkboxDropdown .dropdownWrapper .optionsWrapper::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.checkboxDropdown .dropdownWrapper .optionsWrapper .option {
color: #141414;
color: var(--color-body-on-default);
display: flex;
padding: 8px 0;
gap: 8px;
align-items: center;
}
.checkboxDropdown .dropdownWrapper .optionsWrapper .option .gv-checkbox {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.checkboxDropdown .dropdownWrapper .optionsWrapper .option p {
overflow: hidden;
text-overflow: ellipsis;
}
.checkboxDropdown .dropdownWrapper .actionButtons {
display: flex;
gap: 16px;
margin-top: 16px;
}
.checkboxDropdown.gravityEnabled {
width: 100%;
}
.checkboxDropdown.gravityEnabled .selectedWrapper {
width: 100%;
}
.checkboxDropdown.gravityEnabled .selectedWrapper .customTooltip-container {
width: 100%;
padding: var(--size-xs) var(--size-md);
}
.checkboxDropdown.gravityEnabled .selectedWrapper .customTooltip-container .selectedField {
width: calc(100% - 35px);
}
.checkboxDropdown.gravityEnabled .dropdownWrapper {
max-width: 399px;
}
/*# sourceMappingURL=SelectDropdownWithCheckbox.css.map */
.searchFolderSelector {
vertical-align: middle;
overflow-x: hidden;
margin: 0;
display: flex;
gap: 8px;
}
.searchFolderSelector .searchInText {
display: flex;
align-items: center;
flex-basis: 92%;
gap: 5px;
letter-spacing: 0.1px;
color: var(--color-body-on-default);
flex: 0 1 auto;
white-space: nowrap;
}
/*# sourceMappingURL=SearchIn.css.map */
html {
--size-xs: 4px;
--size-sm: 8px;
--size-md: 16px;
--size-lg: 24px;
--size-xl: 32px;
--size-xxl: 48px;
}
.header-xxxl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: 500;
letter-spacing: 0;
line-height: 78px;
}
.header-xxl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 48px;
font-weight: 500;
letter-spacing: 0;
line-height: 62px;
}
.header-xl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 40px;
font-weight: 500;
letter-spacing: 0.1px;
line-height: 52px;
}
.header-lg {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 32px;
font-weight: 500;
letter-spacing: 0.05px;
line-height: 39px;
}
.header-md {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 500;
letter-spacing: 0.04px;
line-height: 36px;
}
.header-sm {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 500;
letter-spacing: 0.04px;
line-height: 31px;
}
.header-xs {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.03px;
line-height: 26px;
}
.text-xl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 400;
letter-spacing: 0;
line-height: 36px;
}
.text-xl.bold {
font-weight: 600;
}
.text-lg {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0;
line-height: 27px;
}
.text-lg.bold {
font-weight: 600;
}
.text-md {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.08px;
line-height: 24px;
}
.text-md.bold {
font-weight: 600;
}
.text-sm {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04px;
line-height: 21px;
}
.text-sm.bold {
font-weight: 600;
}
.caption-lg {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.05px;
line-height: 18px;
}
.caption-lg.bold {
font-weight: 600;
}
.caption-sm {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.05px;
line-height: 15px;
}
.caption-sm.bold {
font-weight: 600;
}
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.gv-activated .advance-search-popup-main table {
width: 100%;
border-collapse: separate;
border-spacing: 0 24px;
border-spacing: 0 var(--size-lg);
}
.gv-activated .advance-search-popup-main table tr td:first-child {
padding-right: 16px;
padding-right: var(--size-md);
}
.gv-activated .advance-search-popup-main table tr td .gv-input-select gv-icon svg {
filter: none;
}
.gv-activated .advance-search-popup-main table .gv-label {
white-space: nowrap;
}
.gv-activated .advance-search-popup-main .inputContainer {
position: relative;
}
.gv-activated .advance-search-popup-main .recipientsField {
display: flex;
overflow-x: auto;
}
.gv-activated .advance-search-popup-main .recipientsField .RecipientsInput {
margin-left: 0;
padding: 0;
flex-wrap: nowrap;
flex-shrink: 0;
}
.gv-activated .advance-search-popup-main .recipientsField .RecipientInput {
padding-top: 0px;
width: 100%;
margin: 0px;
flex: 1 0;
}
.gv-activated .advance-search-popup-main .recipientsField .recipientScroll {
position: absolute;
z-index: 999;
}
.gv-activated .advance-search-popup-main .recipientsField .RecipientSuggestions {
position: absolute;
z-index: 2;
padding: 10px 0px;
background-color: #ffffff;
background-color: var(--color-surface-bright);
box-shadow: 0px 4px 17px 0px rgba(0,0,0,0.10196);
border-radius: 4px;
width: 100%;
}
.gv-activated .advance-search-popup-main .recipientsField .RecipientSuggestions mark {
color: #0066aa;
color: var(--color-state-form-active);
}
.gv-activated .advance-search-popup-main .recipientsField .RecipientSuggestions ul {
list-style: none;
background-color: #ffffff;
background-color: var(--color-surface-bright);
}
.gv-activated .advance-search-popup-main .recipientsField .RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result {
display: flex;
justify-content: space-between;
}
.gv-activated .advance-search-popup-main .recipientsField .RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result span {
line-height: 14px;
font-size: 12px;
display: flex;
}
.gv-activated .advance-search-popup-main .recipientsField .RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result span:first-child {
margin-bottom: 1px;
}
.gv-activated .advance-search-popup-main .recipientsField .RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result span mark {
color: var(--color-primary);
}
.gv-activated .advance-search-popup-main .recipientsField .RecipientSuggestions ul .RecipientSuggestionRow .displayName span {
font-size: 14px;
}
.gv-activated .advance-search-popup-main .recipientsField .RecipientSuggestions ul .RecipientSuggestionRow:hover {
background-color: var(--color-state-hover);
}
.gv-activated .advance-search-popup-main .Recipient {
font-size: 14px;
overflow-x: auto;
top: 12.5px;
position: relative;
line-height: 25px;
white-space: nowrap;
color: #69686b;
color: var(--color-body-on-alternative);
max-width: 100%;
z-index: 1;
padding: 0;
display: flex;
align-items: center;
margin: 0;
background-color: transparent;
}
.gv-activated .advance-search-popup-main .Recipient-RemoveIcon {
width: 10px;
height: 10px;
cursor: pointer;
margin-left: 4px;
margin-top: 0px;
margin-right: 0px;
background-size: 10px;
align-self: initial;
}
.gv-activated .advance-search-popup-main .Recipient.invalid {
background-color: transparent;
}
.gv-activated .advance-search-popup-main .Recipient > .address {
width: 100%;
text-overflow: clip;
}
.gv-activated .advance-search-popup-main .contactCard {
position: absolute;
z-index: 999;
}
.gv-activated .advance-search-popup-main .searchFolderSelector .checkboxDropdown .selectedWrapper {
max-width: 400px;
}
.gv-activated .advance-search-popup-main .searchFolderSelector .checkboxDropdown .selectedWrapper .chevron gv-icon svg {
filter: none;
}
.gv-activated .advance-search-popup-main .advance-search-size-options,
.gv-activated .advance-search-popup-main .advance-search-footer {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
gap: var(--size-md);
}
.gv-activated .advance-search-popup-main .advance-search-size-options .gv-input-number {
max-width: 100px;
}
.gv-activated .advance-search-popup-main .advance-search-size-options .gv-input-select:first-child {
flex: 3;
}
.gv-activated .advance-search-popup-main .advance-search-size-options input {
padding: 0px 0px 0px 16px;
max-width: 80px;
}
.gv-activated .advance-search-popup-main .advance-search-size-options .gv-input-select:last-child {
flex: 2;
}
.gv-activated .advance-search-popup-main .advance-search-size-options select:not(:disabled):not([readonly]) {
padding-right: 66px;
}
.gv-activated .advance-search-popup-main .advance-search-custom-date-range {
display: flex;
gap: 8px;
gap: var(--size-sm);
}
.gv-activated .advance-search-popup-main .advance-search-custom-date-range .gv-input .gv-addon gv-icon svg {
filter: none;
}
.gv-activated .advance-search-popup-main .advance-search-toError {
color: #b30016;
color: var(--color-signal-alert);
min-height: 18px;
}
/*# sourceMappingURL=AdvanceSearchPopup.css.map */
.Recipient {
position: relative;
padding: 0 16px 0 6px;
margin: 2px 0 2px 2px;
background-color: #ebebeb;
display: inline-block;
line-height: 18px;
white-space: nowrap;
color: #424d53;
box-sizing: border-box;
max-width: 100%;
z-index: 1;
}
.Recipient .gravity-icon-wrapper {
height: 16px;
width: 20px;
}
.Recipient .gravity-icon-wrapper .cancelAutoCompleteIcon svg {
width: 16px;
height: 16px;
}
.Recipient.invalid {
background-color: #fdd7d7;
}
.Recipient > .address {
width: 95%;
}
.Recipient > span {
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.Recipient.draggedElem {
opacity: 0.5;
}
.Recipient .Recipient-RemoveIcon {
cursor: pointer;
margin-left: 2px;
margin-top: 2px;
}
.Recipient .Recipient-RemoveIcon svg path {
transform: scale(0.7);
transform-origin: top;
}
/*# sourceMappingURL=Recipient.css.map */
.RecipientInput {
display: inline-block;
min-width: 45px;
margin-left: 2px;
flex-grow: 1;
flex-basis: 0;
padding-top: 2px;
}
.RecipientInput.edit {
flex-basis: auto;
flex-grow: 0;
}
.RecipientInput input {
display: inline-block;
width: 100%;
margin: 1px;
font-size: 13px;
line-height: 18px;
color: #424d53;
border: none;
outline: none;
}
/*# sourceMappingURL=RecipientInput.css.map */
.RecipientsInput {
display: flex;
flex-wrap: wrap;
border: none;
outline: none;
margin-left: 65px;
clear: right;
padding: 2px 2px;
overflow: hidden;
}
/*# sourceMappingURL=RecipientsInput.css.map */
.OneBar {
-webkit-font-smoothing: antialiased;
background: #ffffff;
color: #3c3c3c;
height: 54px;
font-size: 14px;
display: flex;
flex-direction: row;
line-height: 20px;
min-width: 700px;
}
.OneBar ul {
display: block;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.OneBar .OneBar-Logo {
height: 100%;
width: 97px;
background-size: 81px auto;
background-repeat: no-repeat;
background-position: 50%;
background-image: url(//mail.group-cdn.one/v51.1.15/media/one-logo.e5170b1e.svg);
flex-shrink: 0;
padding-left: 24px;
}
.OneBar .OneBar-Link {
cursor: pointer;
}
.OneBar .OneBar-Link:hover {
color: #396fc9;
transition: #396fc9 0.15s linear;
}
.OneBar .applications {
display: flex;
flex-direction: row;
}
.OneBar .applications > li {
padding: 14px 26px;
font-weight: 400px;
cursor: pointer;
flex-shrink: 0;
}
.OneBar .applications > li a {
color: #3c3c3c;
text-decoration: none;
}
.OneBar .applications > li.active {
background-color: #e0eff8;
transition: background-color 0.15s linear;
}
.OneBar .applications > li.active:hover {
background-color: #e0eff8;
transition: background-color 0.15s linear;
}
.OneBar .applications > li:hover {
background-color: #eef5fc;
transition: background-color 0.15s linear;
}
.OneBar .applications > div {
margin: 14px 0px;
padding: 0px 10px;
}
.OneBar .controls {
margin-left: auto;
font-size: 13px;
display: flex;
flex-direction: row;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-right: 8px;
}
.OneBar .controls > li {
margin: 14px 0px;
font-weight: 400px;
border-left: 1px solid #ccc;
flex-shrink: 0;
}
.OneBar .controls > li:first-child {
border-left: none;
color: #8a8989;
}
.OneBar .controls > li li {
font-weight: 400;
}
/*# sourceMappingURL=OneBar.css.map */
.NavigationTabs {
height: 100%;
width: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e5e5e5;
font-family: inherit;
font-size: 14px;
color: #000;
line-height: 1.42857143;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.NavigationTabs ul {
display: block;
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid #e5e5e5;
}
.NavigationTabs ul li {
display: block;
padding: 32px 15px;
border-bottom: 1px solid #e5e5e5;
border-left: 8px solid transparent;
cursor: pointer;
}
.NavigationTabs ul li.active {
background-color: #fff;
border-right: 1px solid #fff;
margin-right: -1px;
}
/*# sourceMappingURL=NavigationTabs.css.map */
.Checkbox {
display: flex;
position: relative;
width: -moz-max-content;
width: max-content;
font-family: inherit;
font-size: 11px;
font-weight: 400;
color: #666;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.Checkbox.disabled {
opacity: 0.5;
}
.Checkbox.disabled .Checkbox-input {
cursor: not-allowed;
}
.Checkbox .Checkbox-input {
width: 12px;
height: 12px;
vertical-align: top;
box-sizing: content-box;
background-image: url(//mail.group-cdn.one/v51.1.15/media/checkbox-outline.ada8556a.svg);
border-radius: 0;
padding-left: 0;
margin: 0;
margin-right: 9px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
outline: none;
cursor: pointer;
transition: border 0.25s linear, box-shadow 0.25s linear;
}
.Checkbox .Checkbox-input.without-label {
margin-right: 0;
}
.Checkbox .Checkbox-input::-ms-check {
color: #396fc9;
}
.Checkbox .Checkbox-input:checked {
background-size: 10px 10px;
background-position: 50%;
background-image: url(//mail.group-cdn.one/v51.1.15/media/checkbox-checked.8f8b4515.svg);
background-repeat: no-repeat;
background-color: transparent;
}
.Checkbox .Checkbox-input:focus {
border-color: #7eaaf5;
}
.Checkbox .Checkbox-input.invalid {
border-color: #ea5959;
}
/*# sourceMappingURL=Checkbox.css.map */
.Dropdown {
position: relative;
}
.Dropdown-button {
display: flex;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
}
.Dropdown-button .caret {
margin-left: 4px;
width: 14px;
height: 8px;
background-image: url(//mail.group-cdn.one/v51.1.15/media/down-arrow.3deb3598.svg);
margin-top: 2px;
}
.Dropdown-content {
padding: 0;
margin: 0;
}
.Dropdown > .DropdownAnimationWrapper {
position: absolute;
top: 100%;
left: 0;
padding: 0;
margin: 0;
z-index: 10;
}
.Dropdown > .DropdownAnimationWrapper.open {
animation: dropdownTemplateOpen 100ms forwards;
}
.Dropdown > .DropdownAnimationWrapper.close {
animation: dropdownTemplateClosed 100ms forwards;
}
@keyframes dropdownTemplateOpen {
from {
opacity: 0;
transform: translateY(-5px);
}
}
@keyframes dropdownTemplateClosed {
to {
opacity: 0;
transform: translateY(-5px);
}
}
/*# sourceMappingURL=Dropdown.css.map */
.LanguagePicker .caret {
display: none;
}
.LanguagePicker .Dropdown-button {
font-weight: 400;
}
.LanguagePicker .DropdownAnimationWrapper {
left: auto;
right: -10px;
}
.LanguagePicker .DropdownAnimationWrapper .Dropdown-content {
min-width: 250px;
padding: 5px;
background-color: #fff;
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.1);
border-radius: 4px;
list-style: none;
}
.LanguagePicker .Dropdown-content::after {
content: " ";
position: absolute;
left: 260px;
top: 180px;
border-style: solid;
border-width: 7px 0 7px 7px;
border-color: transparent transparent transparent #fff;
}
.LanguagePickerList .LanguageItem {
padding: 10px 10px 10px 20px;
display: flex;
flex-direction: row;
cursor: pointer;
min-width: 154px;
font-family: inherit;
font-size: 14px;
line-height: 18px;
}
.LanguagePickerList .LanguageItem:hover {
color: #000;
background-color: #eef5fc;
border-radius: 10px;
}
.LanguagePickerList .LanguageItem .text {
color: #333;
white-space: nowrap;
}
.LanguagePickerList .LanguageItem .checkmark {
width: 22px;
height: 22px;
margin-left: auto;
display: inline-block;
vertical-align: bottom;
background: url(//mail.group-cdn.one/v51.1.15/media/checkmark.3028b10f.svg) no-repeat 50%;
background-size: 100%;
}
.LanguagePickerList .LanguageItem.active .checkmark {
display: inline-block;
margin-left: auto;
}
.LanguagePickerList .LanguageItem .flag-en_us {
position: relative;
top: 3px;
height: 15px;
width: 20px;
display: inline-block;
background-image: url(//mail.group-cdn.one/v51.1.15/media/us.b72cde50.png);
}
.LanguagePickerList .LanguageItem .flag-en_gb {
position: relative;
top: 3px;
height: 15px;
width: 20px;
display: inline-block;
background-image: url(//mail.group-cdn.one/v51.1.15/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v51.1.15/media/gb.83e5633f.png);
}
.LanguagePickerList .LanguageItem .flag-da {
position: relative;
top: 3px;
height: 15px;
width: 20px;
display: inline-block;
background-image: url(//mail.group-cdn.one/v51.1.15/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v51.1.15/media/da.ac122dcf.png);
}
.LanguagePickerList .LanguageItem .flag-de {
position: relative;
top: 3px;
height: 15px;
width: 20px;
display: inline-block;
background-image: url(//mail.group-cdn.one/v51.1.15/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v51.1.15/media/de.dd6833f4.png);
}
.LanguagePickerList .LanguageItem .flag-sv {
position: relative;
top: 3px;
height: 15px;
width: 20px;
display: inline-block;
background-image: url(//mail.group-cdn.one/v51.1.15/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v51.1.15/media/se.feb548ae.png);
}
.LanguagePickerList .LanguageItem .flag-nb {
position: relative;
top: 3px;
height: 15px;
width: 20px;
display: inline-block;
background-image: url(//mail.group-cdn.one/v51.1.15/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v51.1.15/media/nb.37de62b5.png);
}
.LanguagePickerList .LanguageItem .flag-nl {
position: relative;
top: 3px;
height: 15px;
width: 20px;
display: inline-block;
background-image: url(//mail.group-cdn.one/v51.1.15/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v51.1.15/media/nl.cc26ac6a.png);
}
.LanguagePickerList .LanguageItem .flag-fr {
position: relative;
top: 3px;
height: 15px;
width: 20px;
display: inline-block;
background-image: url(//mail.group-cdn.one/v51.1.15/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v51.1.15/media/fr.77723db0.png);
}
.LanguagePickerList .LanguageItem .flag-es {
position: relative;
top: 3px;
height: 15px;
width: 20px;
display: inline-block;
background-image: url(//mail.group-cdn.one/v51.1.15/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v51.1.15/media/es.029b93b8.png);
}
.LanguagePickerList .LanguageItem .flag-it {
position: relative;
top: 3px;
height: 15px;
width: 20px;
display: inline-block;
background-image: url(//mail.group-cdn.one/v51.1.15/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v51.1.15/media/it.d6ff7402.png);
}
.LanguagePickerList .LanguageItem .flag-pt {
position: relative;
top: 3px;
height: 15px;
width: 20px;
display: inline-block;
background-image: url(//mail.group-cdn.one/v51.1.15/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v51.1.15/media/pt.215e6c09.png);
}
.LanguagePickerList .LanguageItem .flag-fi {
position: relative;
top: 3px;
height: 15px;
width: 20px;
display: inline-block;
background-image: url(//mail.group-cdn.one/v51.1.15/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v51.1.15/media/fi.76e2d39b.png);
}
/*# sourceMappingURL=LanguagePicker.css.map */
.Tooltip {
position: relative;
display: inline-block;
}
.Tooltip:not(.is-touch):hover .Tooltip-popup,
.Tooltip .Tooltip-popup.is-opened {
visibility: visible;
opacity: 1;
}
.Tooltip:not(.is-touch):hover .Tooltip-popup {
transition-delay: 1s;
}
.Tooltip-popup {
z-index: 9;
position: absolute;
visibility: hidden;
max-width: 200px;
margin-top: -24px;
padding: 1px 8px;
font-size: 11px;
line-height: 16px;
color: #fff;
text-align: center;
background-color: #000;
border: 1px solid #000;
border-radius: 4px;
opacity: 0;
transition: opacity 100ms;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.Tooltip-popup-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.Tooltip-popup-arrow {
content: '';
position: absolute;
bottom: -4px;
width: 0;
height: 0;
margin-left: -4px;
border-width: 4px 4px 0;
border-color: transparent;
border-style: solid;
border-top-color: #000;
}
.Tooltip-popup.top-left .Tooltip-popup-arrow {
left: 4px;
}
.Tooltip-popup.top-center {
left: 50%;
transform: translateX(-50%);
}
.Tooltip-popup.top-center .Tooltip-popup-arrow {
left: 50%;
}
.Tooltip-popup.top-right {
right: -4px;
transform: translateX(0);
}
.Tooltip-popup.top-right .Tooltip-popup-arrow {
right: 4px;
}
.Tooltip-popup.right {
left: 100%;
margin-top: 0;
margin-left: 6px;
top: 50%;
transform: translateY(-50%);
}
.Tooltip-popup.right .Tooltip-popup-arrow {
top: 6px;
left: -4px;
bottom: auto;
margin-left: 0;
border-width: 4px 4px 4px 0;
border-color: transparent;
border-right-color: #000;
}
.Tooltip-wrapper {
display: flex;
}
/*# sourceMappingURL=Tooltip.css.map */
.Button {
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: 400;
line-height: 18px;
border: none;
border-radius: 0;
text-shadow: none;
background-color: transparent;
height: 28px;
cursor: pointer;
}
.Button:focus {
outline: none;
}
.Button:disabled {
cursor: not-allowed;
opacity: 0.65;
}
/*# sourceMappingURL=Button.css.map */
.Form .exampleInlineFields {
width: 100%;
display: flex;
justify-content: space-between;
}
.Form .exampleInlineFields .InPlaceEditor,
.Form .exampleInlineFields .SelectDropdown,
.Form .exampleInlineFields .FileInput {
width: 49%;
}
.Form .exampleInlineButtons {
width: 100%;
display: flex;
justify-content: flex-end;
}
.Form .exampleInlineButtons button:first-child {
margin-right: 5px;
}
.Form .exampleInlineButtons button:last-child {
margin-left: 5px;
}
/*# sourceMappingURL=Form.css.map */
.Inset {
padding: 20px;
}
/*# sourceMappingURL=Inset.css.map */
.CheckboxInput {
position: relative;
display: inline-block;
}
.CheckboxInput .extend-height {
display: block;
height: 20px;
}
.CheckboxInput label {
position: relative;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 11px;
font-weight: 400;
color: #666;
display: flex;
cursor: pointer;
height: 26px;
line-height: 11px;
}
.CheckboxInput label > .Checkbox {
margin: 6px 0 6px 0;
}
.CheckboxInput label > span {
margin-top: 7px;
}
.CheckboxInput .validationError {
width: 100%;
margin-left: 23px;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 11px;
font-weight: 400;
color: #666;
color: #ea5959;
}
.GravityCheckboxInput label .Checkbox {
margin: 0;
}
.GravityCheckboxInput label .Checkbox input {
width: 24px;
height: 24px;
border: 1.3px solid #3c3c3c;
}
.GravityCheckboxInput label .Checkbox input:focus {
border: 1.3px solid #3c3c3c;
}
/*# sourceMappingURL=CheckboxInput.css.map */
.Icon {
display: inline-block;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-position: 50%;
background-size: 18px;
}
.Icon--disabled {
cursor: not-allowed;
opacity: 0.65;
}
.Icon.arrow-left {
background-image: url(//mail.group-cdn.one/v51.1.15/media/arrow-left.fe25247d.svg);
}
.Icon.arrow-right {
background-image: url(//mail.group-cdn.one/v51.1.15/media/arrow-right.dfb56cc8.svg);
}
.Icon.back {
background-image: url(//mail.group-cdn.one/v51.1.15/media/back.5bbd641d.svg);
}
.Icon.burger {
background-image: url(//mail.group-cdn.one/v51.1.15/media/burger.5be1c600.svg);
}
.Icon.confirm {
background-image: url(//mail.group-cdn.one/v51.1.15/media/confirm.3028b10f.svg);
}
.Icon.draghandle {
background-image: url(//mail.group-cdn.one/v51.1.15/media/draghandle.33b435ff.svg);
width: 6px;
background-size: auto;
background-repeat: repeat-y;
cursor: move;
cursor: -moz-grabbing;
}
.Icon.gear {
background-image: url(//mail.group-cdn.one/v51.1.15/media/gear.06552ac8.svg);
}
.Icon.calendar {
background-image: url(//mail.group-cdn.one/v51.1.15/media/calendar.fb7a309a.svg);
}
.Icon.check-circle-outline {
background-image: url(//mail.group-cdn.one/v51.1.15/media/check-circle-outline.404322d2.svg);
}
.Icon.contacts {
background-image: url(//mail.group-cdn.one/v51.1.15/media/contacts.b7505361.svg);
}
.Icon.filters {
background-image: url(//mail.group-cdn.one/v51.1.15/media/filters.ffe79ec7.svg);
}
.Icon.blocked {
background-image: url(//mail.group-cdn.one/v51.1.15/media/block.55910f66.svg);
}
.Icon.lock {
background-image: url(//mail.group-cdn.one/v51.1.15/media/lock.32ec4326.svg);
}
.Icon.auto-reply {
background-image: url(//mail.group-cdn.one/v51.1.15/media/auto-reply.4eabbc60.svg);
}
.Icon.features {
background-image: url(//mail.group-cdn.one/v51.1.15/media/features.c0ac2ce3.svg);
}
.Icon.save {
background-image: url(//mail.group-cdn.one/v51.1.15/media/save.4dc7e798.svg);
}
.Icon.pencil {
background-image: url(//mail.group-cdn.one/v51.1.15/media/pencil.0f898d89.svg);
}
.Icon.plus {
background-image: url(//mail.group-cdn.one/v51.1.15/media/plus.ded1098e.svg);
}
.Icon.trash {
background-image: url(//mail.group-cdn.one/v51.1.15/media/trash.36f0387c.svg);
}
.Icon.cross {
background-image: url(//mail.group-cdn.one/v51.1.15/media/cross.a4d3d540.svg);
}
.Icon.gravity-cross {
background-image: url(//mail.group-cdn.one/v51.1.15/media/gravity-cross.f3d608bc.svg);
}
.Icon.search {
background-image: url(//mail.group-cdn.one/v51.1.15/media/search.a7bbc667.svg);
}
.Icon.warning {
background-image: url(//mail.group-cdn.one/v51.1.15/media/warning.a56d7cff.svg);
}
.Icon.update {
background-image: url(//mail.group-cdn.one/v51.1.15/media/update.87ee58f5.svg);
}
.Icon.chevron-down {
background-image: url(//mail.group-cdn.one/v51.1.15/media/chevron-down.966d572f.svg);
}
.Icon.chevron-up {
background-image: url(//mail.group-cdn.one/v51.1.15/media/chevron-up.7ae08529.svg);
transform: rotate(90deg);
}
.Icon.cancel-cross {
background: url(//mail.group-cdn.one/v51.1.15/media/cancel-cross.a4d3d540.svg) no-repeat;
}
.Icon.auto-reply--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/auto-reply--white.694ba661.svg);
}
.Icon.arrow-left--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/arrow-left--white.694ba661.svg);
}
.Icon.arrow-right--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/arrow-right--white.84f5a9f3.svg);
}
.Icon.back--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/back--white.c4e4a340.svg);
}
.Icon.blocked--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/block--white.d5a004f5.svg);
}
.Icon.burger--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/burger--white.3a3330ab.svg);
}
.Icon.calendar--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/calendar--white.d48f1689.svg);
}
.Icon.cancel-cross--white {
background: url(//mail.group-cdn.one/v51.1.15/media/cancel-cross--white.836bebff.svg) no-repeat;
}
.Icon.confirm--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/confirm--white.d9bc21c6.svg);
}
.Icon.contacts--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/contacts--white.0f847c99.svg);
}
.Icon.check-circle-outline--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/check-circle-outline--white.086ef5f6.svg);
}
.Icon.chevron-down--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/chevron-down--white.2e609fa2.svg);
}
.Icon.cross--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/cross--white.79a3fd34.svg);
}
.Icon.features--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/features--white.5b4259ea.svg);
}
.Icon.filters--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/filters--white.bec06bad.svg);
}
.Icon.gear--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/gear--white.00bb49e4.svg);
}
.Icon.lock--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/lock--white.675a9a56.svg);
}
.Icon.pencil--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/pencil--white.1344cf69.svg);
}
.Icon.plus--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/plus--white.fa14df81.svg);
}
.Icon.save--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/save--white.6e55405d.svg);
}
.Icon.search--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/search--white.5a5af545.svg);
}
.Icon.trash--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/trash--white.c88e0454.svg);
}
.Icon.update--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/update--white.339d2efb.svg);
}
.Icon.warning--white {
background-image: url(//mail.group-cdn.one/v51.1.15/media/warning--white.3b16e215.svg);
}
.Icon.addon {
background-image: url(//mail.group-cdn.one/v51.1.15/media/addon.e686c44c.svg);
}
.Icon.alt-image {
background-image: url(//mail.group-cdn.one/v51.1.15/media/alt-image.c5882f51.svg);
}
.Icon.attachments-download {
background-image: url(//mail.group-cdn.one/v51.1.15/media/attachments-download.ccc5df00.svg);
}
/*# sourceMappingURL=Icon.css.map */
.FileInput {
height: 38px;
}
.FileInput.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.FileInput.disabled .inputContainer {
pointer-events: none;
}
.FileInput .validationError {
width: 100%;
text-align: right;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 11px;
font-weight: 400;
line-height: 18px;
color: #666;
color: #ea5959;
}
.FileInput .inputContainer {
display: inline-block;
position: relative;
min-height: 18px;
width: 100%;
padding-top: 15px;
border-bottom: 1px solid #ccc;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: 400;
line-height: 18px;
color: #666;
transition: border 0.25s linear, box-shadow 0.25s linear;
}
.FileInput .inputContainer:hover,
.FileInput .inputContainer.focus {
border-color: #7eaaf5;
}
.FileInput .inputContainer.invalid {
border-color: #ea5959;
}
.FileInput .inputContainer.empty {
padding-bottom: 4px;
}
.FileInput .inputContainer label {
height: 18px;
width: 100%;
z-index: 1;
left: 0;
transition: all 0.25s ease-in;
color: #b5b5b5;
cursor: pointer;
}
.FileInput .inputContainer .selectedFile {
display: inline-block;
position: relative;
height: 18px;
overflow: hidden;
background-color: #def5fa;
padding: 0 0 0 6px;
z-index: 999;
cursor: default;
}
.FileInput .inputContainer .selectedFile span {
display: inline-block;
margin-right: 3px;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 2px;
vertical-align: top;
color: #000;
}
.FileInput .inputContainer .selectedFile .removeFileIcon {
display: inline-block;
height: 18px;
margin-left: 3px;
background-position: 0 center;
background-size: 8px;
vertical-align: inherit;
}
.FileInput .inputContainer input {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
opacity: 0;
font-size: 23px;
border-radius: 0;
cursor: pointer;
}
.FileInput .inputContainer input::-webkit-file-upload-button {
cursor: pointer;
}
/*# sourceMappingURL=FileInput.css.map */
.FormButton {
border: 1px solid #787676;
color: #333;
}
.FormButton:hover:not(:disabled) {
background-color: #a4a4a4;
color: white;
border-color: #a4a4a4;
}
.FormButton:disabled {
border-color: #d1d1d1;
}
/*# sourceMappingURL=FormButton.css.map */
.InPlaceEditor {
height: 46px;
width: 100%;
display: inline-block;
}
.InPlaceEditor.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.InPlaceEditor.disabled .inputContainer {
pointer-events: none;
}
.InPlaceEditor .inputContainer {
position: relative;
padding-top: 20px;
}
.InPlaceEditor .inputContainer label span {
position: absolute;
transition: all 100ms ease-in;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: 400;
line-height: 18px;
color: #666;
color: #b5b5b5;
margin-top: 3px;
}
.InPlaceEditor .inputContainer label span.floating {
margin-top: -14px;
font-size: 11px;
color: #666;
}
.InPlaceEditor .inputContainer label span.floating::after {
content: ':';
}
[dir="ltr"] .InPlaceEditor .inputContainer label input {
text-align: left;
}
[dir="rtl"] .InPlaceEditor .inputContainer label input {
text-align: right;
}
.InPlaceEditor .inputContainer label input {
width: 100%;
height: 25px;
padding: 0px;
background-color: transparent;
border: none;
border-radius: 0;
border-bottom: 1px solid #ccc;
box-shadow: none;
outline: none;
vertical-align: middle;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: 400;
line-height: 18px;
color: #666;
transition: border 0.25s linear, box-shadow 0.25s linear;
}
.InPlaceEditor .inputContainer label input:hover {
border-bottom: 1px solid #7eaaf5;
}
.InPlaceEditor .inputContainer label input:focus {
border-bottom: 1px solid #7eaaf5;
}
.InPlaceEditor .inputContainer label input.invalid {
border-color: #ea5959;
}
.InPlaceEditor .inputContainer label .InPlaceEditor-input::-ms-clear,
.InPlaceEditor .inputContainer label .InPlaceEditor-input::-ms-reveal {
display: none;
}
.InPlaceEditor .inputContainer .validationError {
position: absolute;
width: 100%;
text-align: right;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 11px;
font-weight: 400;
line-height: 18px;
color: #666;
color: #ea5959;
}
.Gravity-InPlaceEditor {
display: flex;
width: 100%;
}
.Gravity-InPlaceEditor.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.Gravity-InPlaceEditor.disabled .inputContainer {
pointer-events: none;
}
.Gravity-InPlaceEditor.hasFloatingLabel .inputContainer {
padding-top: 10px;
}
.Gravity-InPlaceEditor .inputContainer {
display: flex;
width: 100%;
flex-direction: column;
}
.Gravity-InPlaceEditor .inputContainer label {
display: flex;
align-items: center;
}
.Gravity-InPlaceEditor .inputContainer label span {
position: absolute;
transition: all 100ms ease-in;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
font-weight: 400;
line-height: 18px;
color: #666;
color: #b5b5b5;
padding: 0 20px;
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
transform: translate(0, -1.875rem);
font-size: 12px;
color: #666;
}
.Gravity-InPlaceEditor .inputContainer label span.validationError {
color: #ea5959;
}
.Gravity-InPlaceEditor .inputContainer label span.notFloating {
display: none;
}
.Gravity-InPlaceEditor .inputContainer label input {
width: 100%;
height: 40px;
padding: 0 20px;
background-color: #FFFFFF;
border: 1px solid #BBBBBB;
box-sizing: border-box;
border-radius: 100px;
box-shadow: none;
outline: none;
--webkit-appearance: none;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
font-weight: 400;
line-height: 18px;
color: #666;
}
.Gravity-InPlaceEditor .inputContainer label input:hover {
border: 1px solid #8A8989;
}
.Gravity-InPlaceEditor .inputContainer label input:focus {
border: 1px solid #8A8989;
}
.Gravity-InPlaceEditor .inputContainer label input.invalid {
border: 1px solid #D20019;
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-input::-ms-clear,
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-input::-ms-reveal {
display: none;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
padding: 0 20px;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 12px;
font-weight: 400;
line-height: 18px;
color: #666;
color: #ea5959;
}
/*# sourceMappingURL=InPlaceEditor.css.map */
.SectionHeading {
display: block;
margin-bottom: 6px;
font-weight: 700;
}
/*# sourceMappingURL=SectionHeading.css.map */
.SelectDropdown {
width: 100%;
position: relative;
display: inline-block;
}
.SelectDropdown label {
position: absolute;
display: block;
width: 100%;
margin-top: 2px;
text-align: inherit;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 11px;
font-weight: 400;
line-height: 18px;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.SelectDropdown.hasLabel .Dropdown {
margin-top: 20px;
}
.SelectDropdown .Dropdown {
height: 26px;
}
.SelectDropdown .Dropdown .DropdownAnimationWrapper {
width: 100%;
}
.SelectDropdown .Dropdown .caret {
display: none;
}
.SelectDropdown .Dropdown-button {
height: 26px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
}
.SelectDropdown .Dropdown-button:not(.disabled) {
cursor: pointer;
}
.SelectDropdown .Dropdown-button:not(.disabled):hover,
.SelectDropdown .Dropdown-button:not(.disabled):focus {
border-color: #7eaaf5;
}
.SelectDropdown .Dropdown-button.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.SelectDropdown .Dropdown-button.expanded {
border: 1px solid #7eaaf5;
border-bottom-color: #ccc;
}
.SelectDropdown-control {
outline: none;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: 400;
line-height: 18px;
color: #666;
line-height: 26px;
position: absolute;
bottom: 0;
left: 0;
right: 24px;
vertical-align: bottom;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.SelectDropdown-control.expanded {
padding-left: 21px;
}
.SelectDropdown .Icon {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
background-size: 12px 12px;
vertical-align: middle;
pointer-events: auto;
z-index: 2;
}
.SelectDropdown .Icon.expanded {
transform: rotate(180deg);
}
.SelectDropdown ul {
width: 100%;
max-height: 150px;
margin: 0px;
padding: 3px 0;
box-sizing: border-box;
overflow-y: auto;
list-style: none;
background: #fff;
box-shadow: none;
border: 1px solid #7eaaf5;
border-top: none;
outline: none;
}
.SelectDropdown ul li {
padding: 3px 20px;
list-style: none;
cursor: pointer;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: 400;
line-height: 18px;
color: #666;
}
.SelectDropdown ul li:hover,
.SelectDropdown ul li:focus,
.SelectDropdown ul li.active {
outline: none;
background: #eee;
}
.Gravity-SelectDropdown .fieldDropdown {
width: 100%;
height: 42px;
}
.Gravity-SelectDropdown .contactFieldDropdown {
width: 130px;
height: 26px;
}
.Gravity-SelectDropdown .Dropdown .contactDropSelection {
padding-right: 45px;
display: flex;
justify-content: center;
align-items: center;
}
.Gravity-SelectDropdown .Dropdown .chevIcon {
right: 8px;
}
.Gravity-SelectDropdown .Dropdown .contactFieldDropdownContent {
width: 130%;
}
.Gravity-SelectDropdown .contactListOption {
border: 1px solid #8a8989;
max-height: 100%;
}
.Gravity-SelectDropdown .Dropdown .DropdownAnimationWrapper .Dropdown-content .contactList {
border: none;
margin: 0;
padding: 0;
max-height: 100%;
font-size: 8px;
}
.Gravity-SelectDropdown .Dropdown .DropdownAnimationWrapper ul .optGrpSelectItem {
color: var(--dropdown-item-font);
font-size: 12px;
}
.Gravity-SelectDropdown .optionHeading {
display: flex;
margin-left: 10px;
color: #b9b9b9;
}
.Gravity-SelectDropdown .dropdownName {
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 12px;
font-weight: 400;
line-height: 18px;
color: #666;
color: var(--dropdown-item-font);
}
.Gravity-SelectDropdown .disableitem {
pointer-events: none;
opacity: 0.4;
}
.Gravity-SelectDropdown {
display: flex;
width: 100%;
flex-direction: column;
margin: 0;
}
.Gravity-SelectDropdown label {
display: flex;
width: 100%;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 12px;
font-weight: 400;
line-height: 18px;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 20px;
}
.Gravity-SelectDropdown .Dropdown {
display: flex;
}
.Gravity-SelectDropdown .Dropdown .DropdownAnimationWrapper {
width: 100%;
}
.Gravity-SelectDropdown .Dropdown .caret {
display: none;
}
.Gravity-SelectDropdown .Dropdown-button {
height: 100%;
width: 100%;
box-sizing: border-box;
border: 1px solid #bbbbbb;
border-radius: 4px;
background: #ffffff;
}
.Gravity-SelectDropdown .Dropdown-button:not(.disabled) {
cursor: pointer;
}
.Gravity-SelectDropdown .Dropdown-button:not(.disabled):hover,
.Gravity-SelectDropdown .Dropdown-button:not(.disabled):focus {
border-color: #8a8989;
}
.Gravity-SelectDropdown .Dropdown-button.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.Gravity-SelectDropdown .Dropdown-button.expanded {
border: 1px solid #8a8989;
}
.Gravity-SelectDropdown-control {
outline: none;
position: relative;
left: 0;
text-indent: 20px;
height: 100%;
width: 100%;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
font-weight: 400;
line-height: 18px;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 40px;
z-index: 3;
}
.Gravity-SelectDropdown-control.expanded {
padding-left: 0px;
}
.Gravity-SelectDropdown .Icon {
background-size: 10px;
pointer-events: auto;
z-index: 2;
position: absolute;
right: 20px;
}
.Gravity-SelectDropdown .Icon.expanded {
transform: rotate(180deg);
}
.Gravity-SelectDropdown ul {
width: 100%;
max-height: 212px;
margin: 10px 0 0 0;
padding: 20px 5px;
box-sizing: border-box;
overflow-y: auto;
list-style: none;
background: #fff;
box-shadow: none;
border: 1px solid #8a8989;
border-radius: 10px;
outline: none;
}
.Gravity-SelectDropdown ul li {
display: flex;
align-items: center;
height: 30px;
padding: 0px 0px 0px 15px;
margin-bottom: 5px;
list-style: none;
cursor: pointer;
border-radius: 100px;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
font-weight: 400;
line-height: 18px;
color: #666;
}
.Gravity-SelectDropdown ul li:last-of-type {
margin-bottom: 0;
}
.Gravity-SelectDropdown ul li:hover,
.Gravity-SelectDropdown ul li:focus {
outline: none;
background: #f7f7f7;
}
.Gravity-SelectDropdown ul li.active {
outline: none;
background: #ededed;
}
.Gravity-SelectDropdown ul::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.Gravity-SelectDropdown ul::-webkit-scrollbar-track {
width: 10px;
background-color: white;
border-radius: 7px;
border: 1.5px solid white;
}
.Gravity-SelectDropdown ul::-webkit-scrollbar-thumb {
width: 7px;
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.Gravity-SelectDropdown ul::-webkit-scrollbar-button:start:decrement,
.Gravity-SelectDropdown ul::-webkit-scrollbar-button:end:increment {
height: 10px;
display: block;
background-color: transparent;
}
[data-theme~="dark"] .dropdownName {
font-weight: 600;
}
/*# sourceMappingURL=SelectDropdown.css.map */
.SelectDropdownMobile {
width: 100%;
position: relative;
display: inline-block;
}
.SelectDropdownMobile label {
position: relative;
height: 24px;
display: block;
text-align: inherit;
padding-top: 0;
bottom: 0;
margin-top: 2px;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 11px;
font-weight: 400;
line-height: 18px;
color: #666;
}
.SelectDropdownMobile label.hasLabel {
margin-top: 22px;
}
.SelectDropdownMobile label .label {
position: absolute;
top: -18px;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.SelectDropdownMobile label .control {
position: absolute;
padding: 1px 10px 0 0;
width: 100%;
height: 24px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
vertical-align: bottom;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: 400;
line-height: 18px;
color: #666;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.SelectDropdownMobile label .control.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.SelectDropdownMobile label .Icon {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
background-size: 24px;
vertical-align: middle;
pointer-events: auto;
cursor: pointer;
}
.SelectDropdownMobile label .Icon.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.SelectDropdownMobile select {
position: absolute;
width: 100%;
height: 24px;
left: 0;
bottom: 0;
outline: none;
opacity: 0;
}
.Gravity-SelectDropdownMobile {
display: flex;
width: 100%;
flex-direction: column;
margin: 10px 0;
}
.Gravity-SelectDropdownMobile label {
position: relative;
height: 40px;
display: block;
text-align: inherit;
padding-top: 0;
bottom: 0;
margin-top: 0px;
box-sizing: border-box;
border: 1px solid #BBBBBB;
border-radius: 4px;
background: #FFFFFF;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
font-weight: 400;
line-height: 18px;
color: #666;
}
.Gravity-SelectDropdownMobile label .label {
position: absolute;
top: -18px;
left: 20px;
white-space: nowrap;
width: calc(100% - 40px);
overflow: hidden;
text-overflow: ellipsis;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 12px;
font-weight: 400;
line-height: 18px;
color: #666;
}
.Gravity-SelectDropdownMobile label .control {
position: absolute;
padding-top: 10px;
width: calc(100% - 66px);
height: 40px;
box-sizing: border-box;
left: 20px;
vertical-align: bottom;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
font-weight: 400;
line-height: 18px;
color: #666;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.Gravity-SelectDropdownMobile label .control.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.Gravity-SelectDropdownMobile label .Icon {
position: absolute;
top: 8px;
right: 20px;
width: 24px;
height: 24px;
background-size: 24px;
vertical-align: middle;
pointer-events: auto;
cursor: pointer;
}
.Gravity-SelectDropdownMobile label .Icon.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.Gravity-SelectDropdownMobile select {
position: absolute;
width: 100%;
height: 40px;
left: 0;
outline: none;
opacity: 0;
}
/*# sourceMappingURL=SelectDropdownMobile.css.map */
.Textarea {
position: relative;
width: 100%;
padding: 0;
margin: 0;
}
.Textarea.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.Textarea.disabled label {
pointer-events: none;
}
.Textarea label {
display: block;
margin-top: 20px;
margin-left: 3px;
text-align: inherit;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 11px;
font-weight: 400;
line-height: 20px;
color: #666;
}
.Textarea label textarea {
display: inline-block;
width: 100%;
height: 200px;
resize: none;
padding: 4px 6px;
box-sizing: border-box;
border-radius: 0;
border: 1px solid #ccc;
background: white;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
outline: none;
transition: border 0.25s linear, box-shadow 0.25s linear;
text-align: left;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: 400;
line-height: 20px;
color: #666;
}
.Textarea label textarea:focus {
border-color: #7eaaf5;
}
.Textarea label textarea.invalid {
border-color: #ea5959;
}
.Textarea .validationError {
position: absolute;
width: 100%;
text-align: left;
padding-left: 10px;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 12px;
font-weight: 400;
line-height: 20px;
color: #666;
color: #ea5959;
}
.Gravity-TextArea {
width: 100%;
}
.Gravity-TextArea.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.Gravity-TextArea.disabled .inputContainer {
pointer-events: none;
}
.Gravity-TextArea.hasFloatingLabel .inputContainer {
padding-top: 10px;
}
.Gravity-TextArea label {
margin: 10px 0px;
}
.Gravity-TextArea label span {
position: absolute;
transition: all 100ms ease-in;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #666;
color: #b5b5b5;
padding: 0 20px;
top: 20px;
z-index: 1;
}
.Gravity-TextArea label span.floating {
margin-top: -40px;
font-size: 12px;
color: #666;
}
.Gravity-TextArea label span.validationError {
color: #ea5959;
}
.Gravity-TextArea label span.notFloating {
display: none;
}
.Gravity-TextArea label input {
width: 100%;
height: 40px;
padding: 0 20px;
background-color: #FFFFFF;
border: 1px solid #BBBBBB;
box-sizing: border-box;
border-radius: 100px;
box-shadow: none;
outline: none;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #666;
}
.Gravity-TextArea label input:hover {
border: 1px solid #8A8989;
}
.Gravity-TextArea label input:focus {
border: 1px solid #8A8989;
}
.Gravity-TextArea label input.invalid {
border: 1px solid #D20019;
}
.Gravity-TextArea label textarea {
padding: 20px;
}
.Gravity-TextArea label .InPlaceEditor-input::-ms-clear,
.Gravity-TextArea label .InPlaceEditor-input::-ms-reveal {
display: none;
}
.Gravity-TextArea .validationError {
padding: 0 20px;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 12px;
font-weight: 400;
line-height: 20px;
color: #666;
color: #ea5959;
}
/*# sourceMappingURL=Textarea.css.map */
.SearchField {
position: relative;
display: inline-block;
width: 100%;
height: 34px;
}
.SearchField .Icon.search {
position: absolute;
top: 8px;
left: 8px;
cursor: pointer;
z-index: 2;
}
.SearchField .Icon.cross {
position: absolute;
top: 8px;
right: 8px;
background-size: 14px;
cursor: pointer;
z-index: 3;
}
[dir="ltr"] .SearchField input {
text-align: left;
}
[dir="rtl"] .SearchField input {
text-align: right;
}
.SearchField input {
position: relative;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: 400;
line-height: 18px;
color: #666;
width: 100%;
height: 100%;
padding: 0 28px 0 38px;
border: none;
border-radius: 0;
box-shadow: none;
background-color: transparent;
outline: none;
vertical-align: middle;
box-sizing: border-box;
z-index: 1;
}
/*# sourceMappingURL=SearchField.css.map */
.TimeframePicker {
display: flex;
vertical-align: middle;
}
.TimeframePicker-Element {
flex-grow: 1;
display: inline-block;
text-align: center;
line-height: 48px;
padding: 0 15px;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: 400;
color: #000;
border-top: 1px solid #d4d4d4;
border-bottom: 1px solid #d4d4d4;
border-right: 1px solid #d4d4d4;
cursor: pointer;
}
.TimeframePicker-Element:first-child {
border-left: 1px solid #d4d4d4;
}
.TimeframePicker-Element:hover {
border-color: #62862d;
border-left-color: #d4d4d4;
background-color: #62862d;
color: #fff;
transition-property: border-color background-color;
transition-duration: 0.15s;
transition-timing-function: linear;
}
.TimeframePicker-Element--active {
border-color: #75a13f;
border-left-color: #d4d4d4;
background-color: #75a13f;
color: #fff;
}
/*# sourceMappingURL=TimeframePicker.css.map */
.DateGrid {
width: 198px;
height: 201px;
display: inline-block;
position: absolute;
z-index: 9999;
padding: 10px 10px;
background-color: #fff;
color: #333;
border: 1px solid #d4d4d4;
font-size: 12px;
font-weight: 400;
line-height: 1.42857143;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-top: none;
}
.DateGrid .grid-container {
width: 100%;
}
.DateGrid .grid-container .grid-header {
display: flex;
flex-direction: column;
justify-content: flex-end;
font-weight: 400;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: default;
}
.DateGrid .grid-container .grid-header .month-selector {
height: 3em;
display: flex;
justify-content: space-between;
align-items: center;
}
.DateGrid .grid-container .grid-header .month-selector .month-navigation {
font-weight: 700;
color: #9c9c9c;
cursor: pointer;
padding: 0px;
}
.DateGrid .grid-container .grid-header .month-selector .month-navigation .icon-arrow {
display: inline-block;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-size: 24px 24px;
}
.DateGrid .grid-container .grid-header .month-selector .month-navigation .icon-prev-arrow {
display: inline-block;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-size: 24px 24px;
background-image: url(//mail.group-cdn.one/v51.1.15/media/chevron-up.7ae08529.svg);
}
.DateGrid .grid-container .grid-header .month-selector .month-navigation .icon-next-arrow {
display: inline-block;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-size: 24px 24px;
background-image: url(//mail.group-cdn.one/v51.1.15/media/chevron-up.7ae08529.svg);
transform: scaleX(-1);
}
.DateGrid .grid-container .grid-header .weekday-labels {
display: flex;
justify-content: space-around;
}
.DateGrid .grid-container .grid-header .weekday-labels .day-names {
width: 24px;
display: flex;
justify-content: center;
color: #9c9c9c;
}
.DateGrid .grid-container .grid-body {
display: flex;
flex-direction: column;
}
.DateGrid .grid-container .grid-body .grid-row {
display: flex;
justify-content: space-around;
}
.DateGrid .grid-container .grid-body .grid-row div {
height: 24px;
width: 24px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.DateGrid .grid-container .grid-body .grid-row div.selected {
background-color: #3b6dc7;
color: #fff;
}
.DateGrid .grid-container .grid-body .grid-row div.outofmonth {
color: #c7c7c7;
}
/*# sourceMappingURL=DateGrid.css.map */
@keyframes spinner-animation-keyframes {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.Icon {
display: inline-block;
width: 18px;
height: 18px;
margin: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: 18px 18px;
}
/*# sourceMappingURL=Icon.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.RecipientSuggestions ul {
margin: 0 0;
display: block;
padding: 0 0;
box-sizing: border-box;
background-color: #f9f9f9;
}
.RecipientSuggestions ul .RecipientSuggestionRow {
box-sizing: border-box;
cursor: pointer;
padding: 10px 20px;
list-style: none;
color: #141414;
color: var(--color-body-on-default);
}
.RecipientSuggestions ul .RecipientSuggestionRow.focused {
background-color: var(--color-state-hover);
}
.RecipientSuggestions ul .RecipientSuggestionRow.selected {
background-color: var(--color-illustration-200);
}
.RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
align-items: center;
}
.RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result .check-mark {
width: 20px;
height: 20px;
background-size: 20px 20px;
}
.RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result .selected {
background-color: #e7e7e7;
}
.RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result span {
white-space: nowrap;
}
.RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result .email-type {
margin-left: 20px;
border: 1px solid #69686b;
border: 1px solid var(--color-body-on-alternative);
padding: 6px;
border-radius: 4px;
text-transform: capitalize;
}
.RecipientSuggestions mark {
background-color: transparent;
font-weight: bold;
color: #316692;
}
.recipientScroll {
overflow-y: auto;
max-height: 300px;
display: flex;
flex-direction: column;
}
.recipientScroll::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.recipientScroll::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.recipientScroll::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
/*# sourceMappingURL=RecipientSuggestions.css.map */
.Modal {
position: absolute;
display: flex;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background-color: rgba(229, 229, 229, 0.65);
z-index: 100;
padding: 20px;
box-sizing: border-box;
align-items: center;
justify-content: center;
}
.Modal-inner {
position: relative;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
color: #666464;
background-color: #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
max-height: 540px;
max-width: 700px;
}
/*# sourceMappingURL=Modal.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.welcomeModal {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.65);
z-index: 99999;
}
.welcomeModal .Modal-inner {
width: 600px;
background-color: #ffffff;
background-color: var(--color-surface-bright);
color: #141414;
color: var(--color-body-on-default);
overflow: auto;
}
.welcomeModal .Modal-inner div .Icon.cancelIcon {
background-size: 12px 12px;
}
.welcomeModal .Modal-inner .welcomeBody {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 60px 70px;
}
[dir="ltr"] .welcomeModal .Modal-inner .welcomeBody > span {
text-align: left;
}
[dir="rtl"] .welcomeModal .Modal-inner .welcomeBody > span {
text-align: right;
}
.welcomeModal .Modal-inner .welcomeBody > span {
letter-spacing: 0.2px;
color: #141414;
color: var(--color-body-on-default);
margin: 0;
}
.welcomeModal .Modal-inner .welcomeBody > svg {
top: 0;
left: 0;
width: 144px;
height: 144px;
position: relative;
margin: 20px 0;
transform: none;
}
[dir="ltr"] .welcomeModal .Modal-inner .welcomeBody-description {
text-align: left;
}
[dir="rtl"] .welcomeModal .Modal-inner .welcomeBody-description {
text-align: right;
}
.welcomeModal .Modal-inner .welcomeBody-description {
letter-spacing: 0.1px;
color: #141414;
color: var(--color-body-on-default);
max-width: 460px;
margin-top: 0px;
margin-bottom: 26px;
}
.welcomeModal .Modal-inner .welcomeBody-inputBox {
padding: 15px 20px;
gap: 10px;
width: 400px;
border: 1px solid #bbbbbb;
border-radius: 4px;
margin: 0;
background-color: #f7f7f7;
background-color: var(--color-surface-dim);
color: #141414;
color: var(--color-body-on-default);
}
.welcomeModal .Modal-inner .welcomeBody-inputBox::-webkit-input-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.welcomeModal .Modal-inner .welcomeBody-inputBox ::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.welcomeModal .Modal-inner .welcomeBody-inputBox.focus-visible {
outline: none;
}
.welcomeModal .Modal-inner .welcomeBody-inputBox:focus-visible {
outline: none;
}
.welcomeModal .Modal-inner .welcomeBody .errorMessage {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
color: #b30016;
color: var(--color-signal-alert);
font-size: 12px;
line-height: 22px;
padding: 0px 20px;
font-weight: var(--font-weight-light-bold);
}
.welcomeModal .Modal-inner .welcomeBody-Actions {
display: flex;
flex-direction: row;
margin-top: 30px;
}
.welcomeModal .Modal-inner .welcomeBody-Actions .saveButton {
cursor: pointer;
padding: 12px 24px;
gap: 10px;
background: var(--color-primary);
border: 1px solid var(--color-primary);
color: white;
color: var(--button-color-text, white);
border-radius: 4px;
}
.welcomeModal .Modal-inner .welcomeBody-Actions .cancelButton {
cursor: pointer;
margin-right: 20px;
color: #141414;
color: var(--color-body-on-default);
background-color: #f7f7f7;
background-color: var(--color-surface-dim);
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
}
.Icon.cancelIcon {
position: absolute;
top: 12px;
right: 10px;
align-self: flex-end;
background-repeat: no-repeat;
padding: 6px;
border: none;
cursor: pointer;
width: 30px;
height: 30px;
background-size: 16px 16px;
}
.Icon.cancelIcon svg path {
transform: scale(1.3);
transform-origin: center;
}
.displayNone {
display: none;
}
/*# sourceMappingURL=WelcomeModal.css.map */
.FeedbackForm {
position: fixed;
z-index: 99999999;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: rgba(60, 60, 60, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
.FeedbackForm .FeedbackOverlay {
max-width: 1021px;
margin: 0;
flex-grow: 1;
background-color: white;
position: relative;
overflow: auto;
max-height: 70vh;
}
.FeedbackForm .FeedbackOverlay .gravity-icon-wrapper .gravity-cross {
position: absolute;
width: 20px;
height: 20px;
background-size: 12px;
z-index: 1;
right: 10px;
top: 15px;
margin: 0;
}
.FeedbackForm .FeedbackOverlay .gravity-icon-wrapper .gravity-cross svg {
filter: none;
}
.FeedbackForm-Container {
display: flex;
align-items: flex-end;
}
.FeedbackForm-Container h2 {
font-size: 44px;
font-weight: 400;
line-height: 1.25;
letter-spacing: 0.2px;
color: #3c3c3c;
}
/*# sourceMappingURL=FeedbackFormDialog.css.map */
.gv-activated .gv-modal {
min-height: 700px;
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-close gv-icon svg {
filter: none;
}
.gv-activated .gv-modal .gv-modal-content .disabled-action-btn {
color: var(--color-body-on-disabled);
}
.gv-activated .gv-modal .gv-modal-content .disabled-action-btn gv-icon svg {
fill: var(--color-body-on-disabled);
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-progress.footer {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-progress.footer > .gv-flex {
justify-self: start;
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-progress.footer > .gv-progress-bullets {
justify-self: center;
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-progress.footer > .gv-progress-bullets .gv-bullet {
cursor: pointer;
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-progress.footer > .gv-button-primary {
justify-self: end;
}
.gv-activated .gv-modal .framesWrapper {
display: flex;
}
.gv-activated .gv-modal .framesWrapper .gv-modal-body {
width: 100%;
flex: 1 0 auto;
}
.gv-activated .gv-modal .framesWrapper .gv-modal-body.hidden {
visibility: hidden;
margin-left: -100%;
}
.gv-activated .gv-modal .framesWrapper .gv-modal-body .settingContainer {
margin-top: 15px;
}
.gv-activated .gv-modal .framesWrapper .gv-modal-body .settingContainer gv-icon svg {
filter: none;
}
.card-content {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
.card-content .whatsNewImg {
width: 100%;
}
.card-content .text-wrapper {
margin-top: 8px;
}
.card-content .description {
margin-top: 8px;
white-space: pre-wrap;
}
.carouselButton {
display: flex;
justify-content: space-between;
}
/*# sourceMappingURL=WhatsNewCarousel.css.map */
.FeebackWidget-Container {
display: flex;
justify-content: flex-end;
}
.FeebackWidget-Container .FeedbackWidget {
position: fixed;
display: flex;
z-index: 999;
}
.FeebackWidget-Container .FeedbackWidget > .btn-feedback {
width: 30px;
padding: 16px 8px;
line-height: 1;
outline: 0;
cursor: pointer;
background: var(--feedback-background);
color: var(--color-body-on-default);
border: 1px solid var(--color-border);
border-right: none;
}
.FeebackWidget-Container .FeedbackWidget > .btn-feedback > span {
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.FeebackWidget-Container .FeedbackWidget > .Tooltip {
position: relative;
}
.FeebackWidget-Container .FeedbackWidget.isNewWebmail {
bottom: 50px;
left: 0;
}
.FeebackWidget-Container .FeedbackWidget.isNewWebmail .Feedback-Tooltip.tooltip-pointing-right {
margin-left: 45px;
right: inherit;
left: inherit;
}
.FeebackWidget-Container .FeedbackWidget.isNewWebmail .Feedback-Tooltip.tooltip-pointing-right::after,
.FeebackWidget-Container .FeedbackWidget.isNewWebmail .Feedback-Tooltip.tooltip-pointing-right::before {
left: auto;
right: 100%;
top: 50%;
transform: rotate(180deg) translateY(50%);
}
.FeebackWidget-Container .FeedbackWidget.isNewWebmail > .btn-feedback {
border: 1px solid var(--color-border);
border-left: none;
}
/*# sourceMappingURL=FeedbackWidget.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.SideNavBar-Container nav.gv-app-rail {
height: 100vh;
}
.SideNavBar-Container .gv-item-icon gv-icon svg {
filter: none;
}
.SideNavBar-Container .gv-icon-custom-wsb {
background-image: url(//mail.group-cdn.one/v51.1.15/media/wsb-custom.ee620a87.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 24px;
height: 24px;
margin-bottom: -4px;
}
.SideNavBar-Container .gv-icon-custom-wsb svg {
display: none;
}
[data-theme~="dark"] nav.gv-app-rail li:hover {
background: transparent;
}
.LoadingPage.MiniCRMLoadingOverlay {
background-color: rgba(255, 255, 255, 0.5);
background-color: var(--loader-background);
z-index: 99999999;
}
/*# sourceMappingURL=SideNavBar.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.hoverScroll {
overflow: hidden;
}
.hoverScroll:hover {
overflow: auto;
}
.composeContainer {
display: flex;
justify-content: center;
align-items: center;
height: 45px;
border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid var(--color-border-alt);
flex: 0 0 auto;
}
.composeContainer .customTooltip-container {
width: 100%;
display: flex;
justify-content: center;
}
.composeContainer .customTooltip-container .composeEmail {
display: flex;
flex: calc(100% - 16px) 0 1;
flex-direction: row;
justify-content: center;
align-items: center;
max-width: 172px;
height: 30px;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
border: 1px solid var(--color-primary);
border: 1px solid var(--color-button-bg-primary, var(--color-primary));
box-sizing: border-box;
border-radius: 4px;
cursor: pointer;
}
.composeContainer .customTooltip-container .composeEmail .composeText {
color: #fff;
color: var(--button-color-text, #fff);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.composeContainer .customTooltip-container .composeEmail .gravity-icon-wrapper .plus-icon {
margin: 0px;
height: 20px;
width: 20px;
fill: #fff;
fill: var(--button-color-text, #fff);
}
.composeContainer.sidebar-collapsed .composeText {
display: none;
}
.folderListWrapper {
flex: 1 0 auto;
position: relative;
}
.folderList {
border-top: 1px solid #e2e2e2;
border-top: 1px solid var(--color-border-alt);
border-width: 0;
overflow: hidden;
padding: 10px 4px;
outline-width: 0;
cursor: pointer;
}
.folderList::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.folderList::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.folderList::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.folderList-container {
display: flex;
flex-direction: column;
overflow-x: visible;
}
.folderList-container .customTooltip-container {
margin-right: 0px;
}
.folderList-item {
position: relative;
padding: 5px 5px 6px 20px;
width: auto;
white-space: nowrap;
line-height: 15px;
overflow-x: hidden;
border-radius: 4px;
font-size: 12px;
color: #141414;
color: var(--color-body-on-default);
display: flex;
align-items: center;
height: 25px;
}
.folderList-item:hover {
background-color: var(--color-state-hover);
transition: background-color 0.15s linear;
}
.folderList-item:hover .moreVerticalIcon {
margin-right: 0;
display: block;
}
.folderList-item:hover .indicator,
.folderList-item:hover .alert {
display: none;
}
.folderList-item.hidden {
display: none;
}
.folderList-item .inputBox.focus-visible {
border: none;
outline: none;
box-shadow: none;
}
.folderList-item .inputBox:focus-visible {
border: none;
outline: none;
box-shadow: none;
}
.sidebar-collapsed .folderList-item.customChildFolder {
height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
}
.sidebar-collapsed .folderList-item.customChildFolder.hidden {
display: none;
}
.folderList-item.draggedElem {
opacity: 0.5;
}
.folderList-label {
position: relative;
display: flex;
align-items: center;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 170px;
min-width: 2px;
flex: 1 1 auto;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.folderList-label .gravity-icon-wrapper {
flex: 0 0 auto;
}
.folderList .active {
background-color: var(--color-state-active);
transition: background-color 0.15s linear;
outline-width: 0;
}
.folderList-name {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
font-weight: var(--normal-font-weight);
line-height: 15px;
font-size: 12px;
letter-spacing: 0.1px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 0px;
margin-left: 6px;
}
.folderList-fade {
margin-left: auto;
display: flex;
padding-right: 5px;
}
.folderList-fade .moreVerticalIcon {
display: none;
}
.folderList-fade .alert {
fill: #d20019;
width: 16px;
height: 16px;
background-size: 14px 14px;
background-repeat: no-repeat;
background-position: center center;
color: transparent;
filter: initial;
margin-right: 4px;
}
.folderList-fade .alert svg {
filter: none;
}
.folderList .unreadCount {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
font-weight: var(--normal-font-weight);
padding: 0 10px;
text-align: right;
position: relative;
left: 5px;
margin-left: 4px;
}
.folderList-addFolder {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
font-weight: 600;
margin: 8px;
cursor: default;
}
.folderList-addFolder-heading {
position: relative;
padding: 5px 5px 6px 12px;
white-space: nowrap;
line-height: 15px;
overflow: hidden;
border-radius: 4px;
font-size: 12px;
color: #141414;
color: var(--color-body-on-default);
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1px;
padding-bottom: 0px;
text-transform: uppercase;
}
.folderList-addFolder-heading-icon {
display: none;
}
.folderList-addFolder-heading .folderIcon {
display: none;
}
.folderList-addFolder-icon {
position: relative;
white-space: nowrap;
line-height: 15px;
border-radius: 4px;
font-size: 12px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
left: 5px;
}
.folderList-addFolder-icon:hover {
background-color: var(--color-state-hover);
transition: background-color 0.15s linear;
}
.drag-over {
background-color: #e2e2e2;
background-color: var(--color-border-alt);
}
.Icon {
height: 16px;
width: 16px;
background-size: 16px 16px;
background-repeat: no-repeat;
}
.folderIcon {
flex: 0 0 auto;
}
.collapse-button {
display: inline-block;
position: absolute;
background: none;
border: none;
left: -22px;
cursor: pointer;
text-align: center;
padding: 6px 0px;
margin-right: 5px;
background-repeat: no-repeat;
background-position: center center;
outline: none;
}
.collapse-button.closed {
transform: scaleY(-1);
}
.collapse-button .chevronIcon {
background-size: 12px 12px;
margin-left: 4px;
}
.addItemIcon {
margin: 0px 4px 0px 0px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center center;
background-size: 18px 18px;
}
.addItemIcon + .customTooltip .arrow-left {
top: 1.5px;
}
.LoadingPageFolder {
flex: 1 1 auto;
min-height: 0;
}
.LoadingPageFolder .LoadingPage > p {
height: 30px;
}
.sidebar-collapsed .collapse-button,
.sidebar-collapsed .folderList-name,
.sidebar-collapsed .folderList-addFolder-heading-label {
display: none;
}
.sidebar-collapsed .folderList-addFolder-heading-icon {
display: block;
}
.sidebar-collapsed.customChildFolder {
display: none;
}
.sidebar-collapsed .folderList-fade span,
.sidebar-collapsed .unreadCount {
display: block;
width: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar-collapsed .folderList-fade .gravity-icon-wrapper {
width: 15px;
}
.sidebar-collapsed .folderList-fade .gravity-icon-wrapper[\:has\(.moreVerticalIcon\)] {
display: none;
}
.sidebar-collapsed .folderList-fade .gravity-icon-wrapper:has(.moreVerticalIcon) {
display: none;
}
.sidebar-collapsed .folderList-item:hover .gravity-icon-wrapper[\:has\(.moreVerticalIcon\)] {
display: block;
}
.sidebar-collapsed .folderList-item:hover .gravity-icon-wrapper:has(.moreVerticalIcon) {
display: block;
}
html[data-theme="dark"] .composeContainer .plus-icon {
filter: invert(100%) brightness(130%) contrast(100%);
}
/*# sourceMappingURL=FolderList.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.contextMenuList {
padding: 0;
margin: 0;
list-style: none;
}
.contextMenuList-item {
margin: 0px;
padding: 10px 20px;
}
.contextMenuList-item:hover {
color: #141414;
color: var(--color-body-on-default);
background-color: var(--color-state-hover);
}
.hideItem {
display: none;
}
.folderContextMenu .Dropdown {
margin-left: auto;
}
.folderContextMenu .Dropdown .caret {
display: none;
}
.folderContextMenu .Dropdown .Icon.gear {
cursor: pointer;
}
.folderContextMenu .Dropdown-content {
position: relative;
background-color: #ffffff;
background-color: var(--color-surface-bright);
border-radius: 4px;
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.2);
box-shadow: 0px 4px 17px var(--primary-box-shadow-color);
border: 1px solid none;
border: 1px solid var(--sub-menus-border-color);
color: #141414;
color: var(--color-body-on-default);
margin-top: 3px;
white-space: nowrap;
}
.folderContextMenu .Dropdown-content ul {
padding: 10px 0px;
margin: 0;
list-style-type: none;
}
.folderContextMenu .Dropdown-content ul li {
padding: 10px 20px;
clear: both;
color: #141414;
color: var(--color-body-on-default);
-webkit-font-smoothing: antialiased;
cursor: pointer;
}
.folderContextMenu .Dropdown-content ul li:hover {
background-color: var(--color-state-hover);
}
.folderContextMenu .Dropdown .DropdownAnimationWrapper {
min-width: 139px;
margin-top: 8px;
position: fixed;
}
.folderContextMenu .Dropdown .DropdownAnimationWrapper .Dropdown-content ul {
background-color: transparent;
border: none;
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #69686b;
color: var(--color-body-on-alternative);
padding-left: 0px;
padding-right: 0px;
}
.folderContextMenu .Dropdown .DropdownAnimationWrapper .Dropdown-content ul li {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
font-weight: var(--font-weight-light-bold);
}
.folderContextMenu .Dropdown .DropdownAnimationWrapper .Dropdown-content ul li:hover {
background-color: var(--color-state-hover);
border-radius: 0;
border-radius: initial;
}
.folderContextMenu .Dropdown .DropdownAnimationWrapper .Dropdown-content ul li.active {
background-color: var(--color-state-active);
}
/*# sourceMappingURL=FolderContextMenu.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
/* ------------------------ */
/* LESS mixin for CSS arrow */
/* ------------------------ */
/* Repository
* https://github.com/HugoGiraudel/LESS-Mixin-for-CSS-arrows
*/
/* Usage
* .arrow(size, color, direction, offset, border-size, border-color);
*/
/* Where
* Size is the with of the arrow
* Color is the color of the arrow (plain color required)
* Direction is the orientation of the arrow (top, right, bottom, left)
* Offset is the position of the arrow on its axis (px / em)
* Border-size is the width of the border if there is one (optional; default "0")
* Border-color is the color of the border if there is one (optional; default "inherit");
*/
/* Extra
* Drop-shadows can be used on the element to create a shadow on the arrow as well
*/
.custom-folder {
position: relative;
display: flex;
align-items: center;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
}
.custom-folder .inputBox {
margin-top: 1px;
margin-left: 5px;
padding: 2px 0 2px 4px;
background-color: var(--color-state-hover);
color: #141414;
color: var(--color-body-on-default);
box-shadow: none;
border: none;
}
.custom-folder .inputBox::-webkit-input-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.custom-folder .inputBox ::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.custom-folder .collapse-container {
position: absolute;
top: 0;
}
.error-dialog {
padding: 3px 9px;
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
background-color: var(--color-state-hover);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1000;
margin-left: 4px;
position: fixed;
left: 262px;
line-height: 20px;
}
.error-dialog:after,
.error-dialog:before {
content: "";
position: absolute;
width: 0;
height: 0;
}
.error-dialog:after {
right: 100%;
top: 50%;
margin-top: -7px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid var(--color-state-hover);
}
.error-dialog:before {
right: 100%;
top: 50%;
margin-top: -7px + 2px;
border-top: 7px + 2px solid transparent;
border-bottom: 7px + 2px solid transparent;
border-right: 7px + 2px solid;
border-right-color: #e2e2e2;
border-right-color: var(--color-border-alt);
}
.error-text {
color: #b30016;
color: var(--color-validation-error);
}
.displayNone {
display: none;
}
.input-dialog[\:not-has\(\%2B\%20.displayNone\)] .inputBox {
border: 1px solid none;
border: 1px solid var(--error-inputField-border);
}
.input-dialog[\:not-has\(\%2B\%20.displayNone\)] .inputBox {
border: 1px solid none;
border: 1px solid var(--error-inputField-border);
}
.input-dialog:not(:has(+ .displayNone)) .inputBox {
border: 1px solid none;
border: 1px solid var(--error-inputField-border);
}
/*# sourceMappingURL=CustomFolderInput.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.mailQuota {
top: auto;
z-index: 1;
box-shadow: none;
box-sizing: border-box;
}
.mailQuota-body {
display: inline-block;
align-content: center;
align-self: center;
width: 100%;
height: 100%;
cursor: default;
color: #141414;
color: var(--color-body-on-default);
}
.mailQuota-body span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mailQuota-body span:hover {
cursor: default;
}
/*# sourceMappingURL=UsageQuota.css.map */
.promotionCard-icon {
margin-top: 2px;
}
.promotionCard-content {
flex: 1;
}
.promotionCard-content-title {
color: var(--color-body-on-default);
white-space: pre-wrap;
}
.promotionCard-content-description {
white-space: pre-wrap;
color: var(--color-body-on-alternative);
}
.promotionCard-content-link {
cursor: pointer;
color: var(--color-state-form-active);
}
/*# sourceMappingURL=PromotionCard.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.MailList {
height: 100%;
border-radius: 4px 4px 0px 0px;
background-color: #ffffff;
background-color: var(--color-surface-bright);
}
.MailList div {
outline-width: 0;
}
.MailList-Container {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
}
.MailList-title {
border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid var(--color-border-alt);
vertical-align: middle;
overflow-x: hidden;
margin: 0;
padding: 16px 20px 14px 20px;
}
.MailList-title .searchFor {
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
display: flex;
align-items: center;
flex-basis: 92%;
gap: 5px;
letter-spacing: 0.1px;
color: #141414;
color: var(--color-body-on-default);
}
.MailList-listContainer {
position: relative;
height: calc(100% - 92px);
outline: none;
overflow-x: hidden;
overflow-y: auto;
}
.MailList-listContainer::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.MailList-listContainer::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.MailList-listContainer::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.MailList-listContainer .PromotionsWrapper {
display: flex;
flex-direction: column;
margin: var(--size-md) var(--size-md) var(--size-sm);
gap: 10px;
}
.MailList-listContainer .PromotionsWrapper:empty {
display: none;
}
.MailList-listContainer .mailListWrapper {
position: relative;
}
.MailList-listContainer .mailListWrapper .mailListFolder > p {
position: sticky;
top: 0;
padding: 8px 20px;
border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid var(--color-border-alt);
margin: 0;
background: #ffffff;
background: var(--color-surface-bright);
z-index: 2;
display: flex;
color: #141414;
color: var(--color-body-on-default);
}
.MailList-listContainer .mailListWrapper .mailListFolder > p .displayName {
display: flex;
color: #69686b;
white-space: nowrap;
overflow: hidden;
}
.MailList-listContainer .mailListWrapper .mailListFolder > p .displayName span:last-child {
color: #69686b;
color: var(--color-body-on-alternative);
overflow: hidden;
text-overflow: ellipsis;
}
.MailList-listContainer .mailListWrapper .mailListFolder > p .displayName .customTooltip-container {
flex-shrink: 0;
}
.MailList-listContainer .mailListWrapper .mailListFolder > p .displayName .customTooltip-container .customTooltip {
max-width: 400px;
}
.MailList-listContainer .mailListWrapper .mailListFolder > p .displayName .customTooltip-container .customTooltip .txt {
color: #fff;
}
.MailList-listContainer .gv-activated .gv-notice {
padding: 20px;
}
.MailList-listContainer .gv-activated .gv-notice gv-icon {
flex: 0 0 auto;
}
.MailList-listContainer.advanceSearchActive {
height: calc(100% - 148px);
}
.MailList .horizontalView {
height: calc(100% - 91px);
}
.MailList .horizontalView .MailList-message-wrapper .MailList-no-results {
flex-direction: row;
}
.MailList .horizontalView .MailList-message-wrapper .MailList-no-results .folderGroup-container {
width: auto;
margin-top: 28px;
}
.MailList-message-wrapper {
position: relative;
top: 50px;
left: 0px;
right: 0px;
align-items: center;
display: flex;
flex-grow: 1;
}
.MailList-message-wrapper .MailList-no-results svg {
width: 72px;
height: 72px;
}
.MailList-no-results {
flex-grow: 1;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
}
.MailList-no-results .folderGroup-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
width: auto;
text-align: center;
margin: 5px 40px;
}
.MailList-no-results .folderGroup-container .empty-message-content {
font-size: 12px;
line-height: 18px;
color: #69686b;
color: var(--color-body-on-alternative);
font-weight: 400;
letter-spacing: 0.4px;
}
.MailList-no-results .folderGroup-container button {
height: -moz-fit-content;
height: fit-content;
}
.MailList-no-results .folderGroup-container .empty-message,
.MailList-no-results .folderGroup-container .selected-message {
font-size: 14px;
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.MailList-no-results .folderGroup-container > .empty-message {
margin-top: 5px;
}
.MailList-no-results .empty-group-icon {
margin-bottom: 20px;
background-image: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
background-image: var(--empty-group);
width: 72px;
height: 72px;
}
.LoadingPage {
position: absolute;
}
/*# sourceMappingURL=MailList.css.map */
.SortAndFilter {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
padding-left: 22px;
padding-right: 16px;
background-color: var(--color-surface-bright);
color: var(--color-body-on-default);
border-bottom: 1px solid var(--color-border-alt);
}
.SortAndFilter .sortfilterpopup {
position: fixed;
left: 47px;
top: 189px;
}
.SortAndFilter-container {
height: 37px;
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
color: var(--color-surface-bright);
}
.SortAndFilter-container-label {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-body-on-default);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-weight: var(--mailFilterRow-cell);
font-size: 12px;
line-height: 15px;
cursor: pointer;
}
.SortAndFilter-container-label .Icon {
margin-left: 6px;
}
.SortAndFilter-container-Text {
white-space: nowrap;
display: flex;
align-items: center;
gap: 5px;
color: var(--color-body-on-default);
cursor: pointer;
font-weight: var(--font-weight-light-bold);
}
.SortAndFilter-container-Text .customTooltip-container {
display: flex;
}
.SortAndFilter-container-Text .onHover {
height: 22px;
width: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.SortAndFilter-container-Text .onHover:hover {
background-color: var(--color-state-hover);
border-radius: 4px;
}
.SortAndFilter-container-Text .paginationMenu {
display: flex;
gap: 5px;
align-items: center;
position: relative;
}
.SortAndFilter-container-Text .paginationMenuDisabled {
cursor: text;
}
.SortAndFilter-container-Text .Icon {
background-size: 18px 18px;
cursor: pointer;
}
.SortAndFilter-container-Text b {
cursor: pointer;
display: inline-block;
width: 0;
height: 0;
margin-top: 4px;
border: 4px solid transparent;
border-top-color: #797979;
content: "";
}
.SortAndFilter-container-Text .forward-arrow {
transform: rotate(180deg);
}
.SortAndFilter-container-Text.paginationInfoOnSearch {
cursor: default;
}
.SortAndFilter-container .nestedPopup {
display: block;
position: fixed;
top: 300px;
}
.SortAndFilter-container-leftPortion {
display: flex;
align-items: center;
gap: 12px;
}
.SortAndFilter-container-leftPortion input {
margin-left: 0px;
margin-right: 0px;
height: 14px;
width: 14px;
background: transparent;
box-sizing: border-box;
z-index: 1;
display: block;
border: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url(//mail.group-cdn.one/v51.1.15/media/checkbox-outline.ada8556a.svg);
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
}
.SortAndFilter-container-leftPortion input:checked {
background-image: url(//mail.group-cdn.one/v51.1.15/media/check-box.8f8b4515.svg);
}
.SortAndFilter-container-leftPortion input:focus {
outline: none;
}
.SortAndFilter-container .Webmail-Popup .Webmail-Popup-element {
height: 30px;
margin: 0px;
}
.SortAndFilter-container .Webmail-Popup .Webmail-Popup-element .divider {
border-top: 1px solid var(--color-border-alt);
}
.SortAndFilter-container .Webmail-Popup .Webmail-Popup-element p {
margin: 0px;
padding: 7px 0px;
}
.SortAndFilter-container .Webmail-Popup .Webmail-Popup-element p .check-mark {
margin: 0px;
}
.SortAndFilter-container-checkBox {
cursor: pointer;
}
.SortAndFilter-container .openFilter {
transform: rotate(180deg);
transition: transform 100ms linear;
}
[data-theme="dark"] .SortAndFilter-container-Text .caret {
filter: invert(100%) brightness(300%) contrast(100%);
}
.disabledArrow {
opacity: 0.4;
}
/*# sourceMappingURL=SortAndFilter.css.map */
.Webmail-Popup {
box-sizing: border-box;
position: absolute;
z-index: 9999;
padding: 10px 0px;
border: 1px solid var(--sub-menus-border-color);
background-color: var(--color-surface-bright);
box-shadow: 0px 4px 17px var(--primary-box-shadow-color);
border-radius: 4px;
color: var(--color-body-on-default);
font-weight: var(--font-weight-light-bold);
width: 220px;
}
.Webmail-Popup-element {
height: 32px;
padding: 1px 20px 1px 20px;
cursor: pointer;
margin-top: 7px;
margin-bottom: 0px;
}
.Webmail-Popup-element-text {
display: flex;
justify-content: space-between;
align-items: center;
}
.Webmail-Popup-element:hover {
background-color: var(--color-state-hover);
}
.Webmail-Popup.pagination {
top: 22px;
right: 0;
width: -moz-fit-content;
width: fit-content;
padding: 8px;
}
.Webmail-Popup.pagination .Webmail-Popup-element {
padding-left: 8px;
padding-right: 15px;
}
.Webmail-Popup.pagination .Webmail-Popup-element .bold {
font-weight: 700;
}
.Webmail-Popup.pagination .Webmail-Popup-element .normal {
font-weight: normal;
}
.horizontal {
position: fixed;
}
/*# sourceMappingURL=Popup.css.map */
.MailCard {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 13px 12px 8px 0;
margin: 0;
border-radius: 4px;
background-color: var(--color-surface-bright);
color: var(--color-body-on-default);
border-bottom: 1px solid var(--color-border-alt);
gap: 8px;
min-height: 42px;
border-left: none;
}
.MailCard:hover {
background-color: var(--color-state-hover);
cursor: pointer;
}
.MailCard:hover .MailCardControls .dragHandler {
opacity: 1;
}
.MailCard:hover .MailCardMoreActions .trashIcon {
visibility: visible;
}
.MailCard:hover .MailCardMoreActions .trashContainer {
display: block;
}
.MailCard:hover .MailCardMoreActions .MailCardMoreActions-date .mailDate {
opacity: 0;
}
.MailCard:hover .MailCardMoreActions .MailCardMoreActions-date .mailSize {
opacity: 1;
display: flex;
justify-content: flex-end;
}
.MailCard.failedSending {
background-color: var(--color-signal-warning-light);
}
.MailCard.failedSending:hover {
background-color: var(--color-signal-warning-light);
}
.MailCard .MailCardControls .unreadIcon {
background-size: 17px;
}
.MailCard.draggedElem {
opacity: 0.5;
}
.MailCard-Title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
overflow-x: hidden;
}
.MailCard-Title p {
white-space: nowrap;
margin: 0;
}
.MailCard-Title-From {
display: flex;
width: 100%;
color: var(--color-body-on-default);
font-size: 14px;
line-height: 17px;
overflow: hidden;
text-overflow: ellipsis;
font-weight: var(--font-weight-light-bold);
}
.MailCard-Title-From .MailCard-mail {
text-overflow: ellipsis;
overflow: hidden;
}
.MailCard-Title-From .MailCard-mail .searchTerm {
color: var(--color-primary);
}
.MailCard-Title-Subject {
width: 100%;
color: var(--color-body-on-default);
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.MailCard-Title-Subject .searchTerm {
color: var(--color-primary);
}
.MailCard-Title-Preview {
line-height: 17px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.MailCard-Title-Preview-Txt {
overflow-x: hidden;
text-overflow: ellipsis;
color: var(--invite-date-color);
margin-top: 0px;
margin-bottom: 0px;
padding-right: 12px;
font-weight: var(--font-weight-light-bold);
}
.MailCard-Title-Preview-Txt .searchTerm {
color: var(--color-primary);
}
.MailCard-Title-ActionIcons {
display: flex;
align-items: center;
margin: 0px 10px;
}
.MailCard-Title-ActionIcons:last-child {
margin: 0 10px;
}
.MailCard-Title-ActionIcons .replyIcon,
.MailCard-Title-ActionIcons .forwarIcon {
margin-left: 10px;
}
.MailCard-RightPart {
margin-top: 1px;
width: calc(100% - 90px);
display: flex;
flex-direction: column;
gap: 3px;
justify-content: space-between;
}
.MailCard-RightPart .MailCardMoreActions {
max-height: 39px;
}
.MailCard-RightPart .MailCardMoreActions .MailCardMoreActions-date {
color: var(--invite-date-color);
width: -moz-max-content;
width: max-content;
margin: 0px 5px 0px 0px;
}
.MailCard-RightPart .MailCardMoreActions .MailCardMoreActions-date .mailSize {
opacity: 0;
}
.MailCard-RightPart .RightInnerPart {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex: 1;
}
.MailCard-active {
background-color: var(--color-state-active);
}
.MailCard-active .MailCard-RightPart .MailCardMoreActions .MailCardMoreActions-date {
color: var(--invite-date-color);
}
.MailCard-active .MailCard-RightPart .MailCard-Title-Preview .MailCard-Title-Preview-Txt {
color: var(--invite-date-color);
}
.MailCard-active:hover {
background-color: var(--color-state-active);
}
.MailCard-NotSeen .MailCard-RightPart .MailCard-Title .MailCard-Title-From,
.MailCard-NotSeen .MailCard-RightPart .MailCard-Title .MailCard-Title-Subject {
color: var(--color-body-on-default);
}
.MailCard-NotSeen .MailCard-RightPart .MailCard-Title-Preview .MailCard-Title-Preview-Txt {
color: var(--invite-date-color);
}
.MailCard-NotSeen .MailCard-RightPart .MailCardMoreActions .MailCardMoreActions-date {
font-weight: var(--unread-Date);
}
.mailCardHorizontalView,
.isFullScreenView {
min-height: 18px;
}
.mailCardHorizontalView .MailCardControls,
.isFullScreenView .MailCardControls {
max-height: 17px;
}
.mailCardHorizontalView .MailCard-RightPart,
.isFullScreenView .MailCard-RightPart {
font-size: 14px;
flex-direction: row;
width: calc(100% - 274px);
gap: 14px;
}
.mailCardHorizontalView .MailCard-RightPart .RightInnerPart,
.isFullScreenView .MailCard-RightPart .RightInnerPart {
width: 100%;
}
.mailCardHorizontalView .MailCard-RightPart .RightInnerPart .MailCard-Title,
.isFullScreenView .MailCard-RightPart .RightInnerPart .MailCard-Title {
flex-direction: row;
}
.mailCardHorizontalView .MailCard-RightPart .RightInnerPart .MailCard-Title .MailCard-Title-From,
.isFullScreenView .MailCard-RightPart .RightInnerPart .MailCard-Title .MailCard-Title-From {
min-width: 280px;
max-width: 234px;
}
.mailCardHorizontalView .MailCard-RightPart .RightInnerPart .MailCard-Title .MailCard-Title-Subject,
.isFullScreenView .MailCard-RightPart .RightInnerPart .MailCard-Title .MailCard-Title-Subject {
font-size: 14px;
}
.mailCardHorizontalView .MailCard-RightPart .RightInnerPart .MailCardMoreActions,
.isFullScreenView .MailCard-RightPart .RightInnerPart .MailCardMoreActions {
position: absolute;
right: 10px;
flex-direction: row-reverse;
}
.mailCardHorizontalView .MailCard-RightPart .RightInnerPart .MailCardMoreActions-date,
.isFullScreenView .MailCard-RightPart .RightInnerPart .MailCardMoreActions-date {
height: 16px;
}
[data-theme~="dark"] .MailCard .MailCardControls .svg {
filter: invert(100%) brightness(220%) contrast(200%);
}
[data-theme~="dark"] .MailCard-Title-ActionIcons .replyIcon,
[data-theme~="dark"] .MailCard-Title-ActionIcons .forwarIcon {
filter: invert(10%) brightness(110%) contrast(100%);
}
@media print {
.top-pane,
.panel1,
.topActionBarContainer,
.MailList {
display: none;
}
.summaryByai {
display: none;
}
.shapeWithAiContainer {
display: none;
}
.mailView-container {
display: block;
position: fixed;
left: 0;
right: 0;
}
}
/*# sourceMappingURL=MailCard.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.MailCardControls {
display: flex;
justify-content: flex-end;
align-items: flex-start;
align-self: stretch;
gap: 3px;
}
.MailCardControls svg,
.MailCardControls .gravity-icon-wrapper {
filter: none;
margin-right: 0px;
}
.MailCardControls svg .mailStared,
.MailCardControls .gravity-icon-wrapper .mailStared {
margin-right: 0px;
background-color: #f8cf38;
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.MailCardControls svg .mailStared svg,
.MailCardControls .gravity-icon-wrapper .mailStared svg {
opacity: 0;
}
.MailCardControls svg .circle-filled,
.MailCardControls .gravity-icon-wrapper .circle-filled {
width: 14px;
fill: #0066aa;
fill: var(--color-state-form-active);
}
.MailCardControls svg .circle-filled svg,
.MailCardControls .gravity-icon-wrapper .circle-filled svg {
filter: none;
}
.MailCardControls svg .circle-filled svg path,
.MailCardControls .gravity-icon-wrapper .circle-filled svg path {
transform: scale(2.3);
transform-origin: center;
}
.MailCardControls svg .circle,
.MailCardControls .gravity-icon-wrapper .circle {
width: 14px;
}
.MailCardControls-checkButton {
position: relative;
margin-left: 0px;
height: 14px;
width: 14px;
background: transparent;
box-sizing: border-box;
z-index: 1;
display: block;
border: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url(//mail.group-cdn.one/v51.1.15/media/checkbox-outline.ada8556a.svg);
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
}
.MailCardControls .gravity-icon-wrapper .MailCardControls-checkIcon {
position: absolute;
top: 1px;
}
.MailCardControls-checkButton:checked {
background-image: url(//mail.group-cdn.one/v51.1.15/media/check-box.8f8b4515.svg);
}
.MailCardControls-checkButton:checked-checkIcon {
position: absolute;
font-size: 16px;
cursor: pointer;
}
.MailCardControls .mailStar,
.MailCardControls .unreadIcon {
margin-right: 0px;
}
.MailCardControls .mailCheckbox {
position: relative;
right: 5px;
bottom: 2px;
width: 10px;
height: 10px;
background-size: 10px 10px;
background-repeat: no-repeat;
}
.MailCardControls .dragHandler {
position: relative;
left: 5px;
width: 16px;
height: 16px;
cursor: move;
background-size: 16px;
opacity: 0;
transition: opacity 0.2s linear;
}
.MailCardControls .showOnChecked {
opacity: 1;
}
/*# sourceMappingURL=MailCardControls.css.map */
.MailCardMoreActions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
color: var(--color-body-on-alternative);
}
.MailCardMoreActions .mailListVerticalIcon {
margin: 0px;
display: block;
cursor: pointer;
}
.MailCardMoreActions .customTooltip-container .alert {
margin-right: 0px;
}
.MailCardMoreActions-date {
margin: 0;
}
.MailCardMoreActions-icons {
display: flex;
gap: 6px;
align-content: center;
cursor: pointer;
}
.MailCardMoreActions-icons .trashIcon {
margin-right: 0;
visibility: hidden;
}
.MailCardMoreActions-icons .mailAttachment,
.MailCardMoreActions-icons .moreVerticalIcon {
margin: 0px;
}
.MailCardMoreActions-icons .trashContainer {
display: none;
}
.MailCardMoreActions-icons .alert {
fill: #d20019;
}
.MailCardMoreActions .MailCardMoreActions-icons .customTooltip-container {
height: 16px;
}
.MailCardMoreActions .MailCardMoreActions-icons span .customTooltip-container {
display: flex;
}
[data-theme~="dark"] .MailCardMoreActions-icons .customTooltip-container .alert svg {
filter: none;
}
/*# sourceMappingURL=MailCardMoreActions.css.map */
.ReusablePortal {
z-index: 1003;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.ReusablePortal .gravity-icon-wrapper {
background-size: 12px 12px;
position: relative;
top: 10px;
left: 425px;
cursor: pointer;
width: 20px;
}
.ReusablePortal .gravity-icon-wrapper gv-icon {
display: flex;
width: 20px;
height: 20px;
}
.ReusablePortal-body {
box-shadow: 0px 4px 17px var(--primary-box-shadow-color);
border-radius: 4px;
background-color: var(--color-surface-bright);
width: 428px;
height: 334px;
padding: 0 26px 26px 26px;
}
.ReusablePortal-body-content-heading {
margin: 34px 0 22px 0;
color: var(--color-body-on-default);
}
.ReusablePortal-body-content-description {
color: var(--color-body-on-default);
font-weight: var(--font-weight-light-bold);
margin-bottom: 10px;
}
.ReusablePortal-body-actions {
margin-top: 30px;
padding: 0 0 26px 26px;
display: flex;
flex-direction: row-reverse;
position: relative;
bottom: -30%;
}
.ReusablePortal-body-actions .button {
box-sizing: border-box;
border-radius: 4px;
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-left: 14px;
height: 30px;
padding: 2px 8px;
width: 90px;
}
.ReusablePortal-body-actions-ok {
color: #ffffff;
background-color: var(--color-signal-alert);
border: 1px solid var(--color-signal-alert);
}
.ReusablePortal-body-actions-cancel {
background: var(--color-surface-bright);
border: 1px solid var(--color-border-alt);
color: var(--color-body-on-default);
}
/*# sourceMappingURL=ModalWithPortal.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.ContextMenu {
position: fixed;
width: 250px;
padding: 6px 0px;
z-index: 99999;
background: #ffffff;
background: var(--color-surface-bright);
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.1);
border-radius: 4px;
left: 60px;
top: 40px;
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 10px;
font-weight: normal;
border: 1px solid none;
border: 1px solid var(--sub-menus-border-color);
}
.ContextMenu .action-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px;
cursor: pointer;
height: 16px;
}
.ContextMenu .action-container .action-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 16px;
}
.ContextMenu .action-container .action-wrapper .action-item {
margin: 0;
display: flex;
align-items: center;
gap: 16px;
width: 100%;
color: #141414;
color: var(--color-body-on-default);
}
.ContextMenu .action-container .action-wrapper .action-item span:nth-child(3) {
margin-left: auto;
}
.ContextMenu .action-container .action-wrapper .action-item .chevronIcon {
transform: rotate(0deg);
}
.ContextMenu .action-container .action-wrapper .action-item .gravity-icon-wrapper .mailStared {
background-color: #f8cf38;
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.ContextMenu .action-container .action-wrapper .action-item .gravity-icon-wrapper .mailStared svg {
opacity: 0;
}
.ContextMenu .action-container.border-bottom {
display: block;
border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid var(--color-border-alt);
}
.ContextMenu .action-container:hover {
background-color: var(--color-state-hover);
}
/*# sourceMappingURL=Contextmenu.css.map */
.inputField_container {
display: flex;
flex: 1;
flex-direction: column;
min-height: 32px;
gap: 4px;
}
.inputField_container .inputField_input {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 0 0;
padding: 4px 20px;
align-items: center;
gap: 16px;
align-self: stretch;
border-radius: 4px;
border: 1px solid var(--color-border-alt);
background: var(--color-surface-form);
min-height: 22px;
color: var(--color-body-on-default);
white-space: nowrap;
}
.inputField_container .inputField_input.error {
border: 1px solid var(--color-signal-alert);
}
.inputField_container .inputField_input:focus {
outline: none;
}
.inputField_container .inputField_error {
color: var(--color-signal-alert);
font-size: 12px;
}
/*# sourceMappingURL=InputField.css.map */
.dialog {
position: fixed;
background: var(--color-surface-bright);
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.1);
border-radius: 4px;
max-width: 330px;
border: 1px solid var(--sub-menus-border-color);
z-index: 1000;
width: 100%;
}
.dialog .folderList {
overflow: auto;
max-height: 250px;
min-width: 172px;
max-width: 330px;
padding: 10px 0px;
overflow-x: hidden;
}
.dialog .folderList p {
margin: 0;
padding: 10px 20px;
}
.dialog .folderList .folderName {
color: var(--color-body-on-default);
cursor: pointer;
padding: 10px 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
list-style: none;
align-items: center;
margin: 0 5px;
border-radius: 4px;
}
.dialog .folderList .folderName .searchTerm {
color: var(--color-primary);
}
.dialog .folderList .folderName.focused {
background-color: var(--color-state-hover);
}
.dialog .inputField_container input {
padding: 8px 16px;
margin: 10px 8px 5px 8px;
max-width: 275px;
border-radius: 4px;
border: none;
box-shadow: none;
color: var(--color-body-on-default);
background: var(--color-surface-dim);
}
/*# sourceMappingURL=MoveToFolderDialog.css.map */
.ApplicationPicker .TimeframePicker-Element {
padding: 0 11px;
border: none;
line-height: 44px;
}
.ApplicationPicker .TimeframePicker-Element:first-child {
border-left: none;
}
.ApplicationPicker .TimeframePicker-Element:hover,
.ApplicationPicker .TimeframePicker-Element--active {
background-color: #f9f9f9;
border-color: #f9f9f9;
color: #000000;
}
.ApplicationPicker .TimeframePicker-Element--active {
font-weight: 700;
}
/*# sourceMappingURL=ApplicationPicker.css.map */
.ImportEmailsPromotionBanner .gv-notice .gv-notice-icon {
display: none;
}
.ImportEmailsPromotionBanner-content {
gap: var(--size-lg);
}
.ImportEmailsPromotionBanner-icon {
width: 40px !important;
height: 40px !important;
}
.ImportEmailsPromotionBanner-icon {
margin-top: 2px;
align-self: center;
background: #bce1f4;
display: flex;
border-radius: 50%;
justify-content: center;
align-items: center;
}
.ImportEmailsPromotionBanner-icon svg {
height: 20px;
width: 20px;
justify-content: center;
align-items: center;
align-content: center;
}
.ImportEmailsPromotionBanner-icon svg path {
transform: scale(0.7);
transform-origin: center;
fill: var(--color-state-form-active);
}
[data-theme="dark"] .ImportEmailsPromotionBanner gv-icon svg {
filter: none;
}
[data-theme="dark"] .ImportEmailsPromotionBanner-icon svg path {
fill: #0066aa;
}
/*# sourceMappingURL=ImportEmailsPromotionBanner.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.mailViewData {
background-color: #f7f7f7;
background-color: var(--color-surface-dim);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mailViewData .animation .noMailsSelected .noMailsSelectedInner {
display: flex;
gap: 9px;
flex-direction: column;
align-items: center;
}
.mailSectionWrapper {
display: flex;
height: 100%;
}
.mailSectionWrapper.horizontalView,
.mailSectionWrapper.fullScreenView {
gap: var(--size-md);
}
.mailSectionWrapper.horizontalView .mailView-container,
.mailSectionWrapper.fullScreenView .mailView-container {
margin-right: 0;
}
.mailSectionWrapper .aida-chat-wrapper {
margin-right: var(--size-md);
}
.mailSplitterContainer {
flex: 1;
min-width: 0;
position: relative;
}
.fullscreenMailList .MailList {
position: absolute;
height: calc(100% - 32px);
width: 100%;
}
.fullscreenMailList .draftListContainer {
bottom: 0px;
width: 100%;
background: #f7f7f7;
background: var(--color-surface-dim);
}
.fullscreenMailList.fullheight .MailList {
height: 100%;
}
/*# sourceMappingURL=MailsSection.css.map */
.mailViewSection {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.mailViewSection .mailView-container {
outline: none;
}
.mailViewSection .viewArea {
flex: 5 0 auto;
position: relative;
height: 100%;
display: flex;
width: 100%;
justify-content: center;
}
.mailViewSection .maxHeightAdd.horizontalView .composerSection,
.mailViewSection .maxHeightAdd .composerSection,
.mailViewSection .maxHeightAdd.horizontalView .mailView-container,
.mailViewSection .maxHeightAdd .mailView-container {
max-height: calc(100% - 12px);
}
.mailViewSection .maxHeightAdd {
max-height: calc(100% - 42px);
}
.mailViewSection .maxHeightAdd .composerSection,
.mailViewSection .maxHeightAdd .mailView-container {
max-height: 100%;
}
.mailViewSection .horizontalView .mailViewData .animation .animation {
flex-direction: row;
}
.mailViewSection .horizontalView .mailViewData .animation .noMailsSelected {
flex-direction: row;
gap: 0px;
}
.mailViewSection .horizontalView .mailViewData .animation .noMailsSelected .noMailsSelectedInner {
align-items: flex-start;
align-self: flex-end;
margin-bottom: 16px;
}
.mailViewSection .horizontalView .mailView-container {
margin-top: 14px;
outline: none;
}
.mailViewSection .fullScreenView {
background-color: var(--color-surface-dim);
}
.mailViewSection .fullScreenView .composerSection {
max-height: calc(100% - 13px);
}
.mailViewSection .bottomAccLayout {
bottom: 0px;
}
.mailViewSection .actionText {
width: 100%;
font-size: 24px;
color: #cfcdcd;
font-weight: 400;
text-align: center;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.draftSaveIcon {
animation: spinner-animation-keyframes 0.7s steps(8, end) infinite;
}
/*# sourceMappingURL=MailViewSection.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.mailView-container {
margin: 0px 14px 8px 14px;
background: #ffffff;
background: var(--color-surface-bright);
border-radius: 4px;
overflow: auto;
height: -moz-fit-content;
height: fit-content;
max-height: calc(100% - 54px);
width: 100%;
}
.mailView-container::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.mailView-container::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.mailView-container::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.mailView-container .loadText {
position: relative;
min-height: 150px;
z-index: 1;
}
.mailView-container .loadText:hover {
z-index: 1;
}
.mailView-container .subject {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 15px 20px 16px 22px;
border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid var(--color-border-alt);
}
.mailView-container .subject .subject-text {
color: #141414;
color: var(--color-body-on-default);
margin: 0;
}
.mailView-container .subject .action {
display: flex;
gap: 12px;
margin-right: -8px;
}
.mailView-container .subject .action .Icon {
cursor: pointer;
}
.mailView-container .subject .action .iconClearNight,
.mailView-container .subject .action .iconClearDay {
height: 16px;
width: 16px;
background-size: 16px 16px;
background-repeat: no-repeat;
margin-right: 4px;
cursor: pointer;
display: inline-block;
}
.mailView-container .mailView-header {
padding: 24px 22px;
border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid var(--color-border-alt);
}
.mailView-container .mailView-header-sender {
display: flex;
align-items: center;
justify-content: space-between;
}
.mailView-container .mailView-header-sender .contact-details {
display: flex;
flex-wrap: wrap;
gap: 5px;
position: relative;
}
.mailView-container .mailView-header-sender .contact-details .name {
color: #141414;
color: var(--color-body-on-default);
margin: 0;
}
.mailView-container .mailView-header-sender .contact-details .email {
color: #69686b;
color: var(--color-body-on-alternative);
}
.mailView-container .mailView-header-sender .contact-details .bimiVerifiedTooltip .gv-tooltip-text {
display: flex;
}
.mailView-container .mailView-header-sender .date {
color: #69686b;
color: var(--color-body-on-alternative);
margin: 0;
text-transform: lowercase;
flex: 1 0 auto;
}
.mailView-container .mailView-header-sender .date .seperator:before {
content: "-";
padding: 0 5px;
}
.mailView-container .mailView-header-to p,
.mailView-container .mailView-header-cc p,
.mailView-container .mailView-header-bcc p {
display: flex;
flex-direction: row;
position: relative;
margin-top: 10px;
color: #141414;
color: var(--color-body-on-default);
}
.mailView-container .mailView-header-to p span,
.mailView-container .mailView-header-cc p span,
.mailView-container .mailView-header-bcc p span {
margin-right: 5px;
}
.mailView-container .mailView-header-to .list,
.mailView-container .mailView-header-cc .list,
.mailView-container .mailView-header-bcc .list {
display: flex;
margin-top: 10px;
color: #141414;
color: var(--color-body-on-default);
}
.mailView-container .mailView-header-to .list span,
.mailView-container .mailView-header-cc .list span,
.mailView-container .mailView-header-bcc .list span {
margin-right: 5px;
}
.mailView-container .mailView-header a {
text-decoration: none;
}
.mailView-container .attachment {
padding-left: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid var(--color-border-alt);
}
.mailView-container .attachment .attachment-section {
display: flex;
flex-direction: row;
}
.mailView-container .mailBody {
margin: 0;
display: block;
padding: 12px 12px 25px 22px;
color: #141414;
color: var(--color-body-on-default);
background-color: #ffffff;
background-color: var(--color-surface-bright);
}
.mailView-container .mailBody .MailPartHtml .oneComWebmail-html .oneComWebmail-body blockquote {
margin-right: 0;
margin-left: 0;
padding-left: 8px;
}
.mailView-container .mailBody .MailPartHtml .oneComWebmail-html .oneComWebmail-body p {
margin: 0;
}
.mailView-container .whiteBackground {
background-color: #ffffff;
color: #3c3c3c;
}
.mailView-container .mailActions {
display: flex;
padding: 0px 20px;
border-top: 1px solid #e2e2e2;
border-top: 1px solid var(--color-border-alt);
gap: 25px;
position: sticky;
bottom: 0;
background-color: #ffffff;
background-color: var(--color-surface-bright);
z-index: 8;
}
.mailView-container .mailActions .action {
display: flex;
padding: 15px 0px;
cursor: pointer;
gap: 5px;
color: #141414;
color: var(--color-body-on-default);
}
.mailView-container .mailActions .action .icon {
padding: 2px;
margin: 0;
}
.mailView-container .mailActions .action .resendButton {
display: flex;
align-items: center;
margin-right: 10px;
}
/*# sourceMappingURL=MailView.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.attachment-section .attachments {
list-style-type: none;
margin: 8px 0 0 0;
padding: 0;
max-height: 120px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
}
.attachment-section .attachments.multiLine-close {
margin-bottom: 16px;
}
.attachment-section .attachments.multiLine-open {
margin-bottom: 4px;
}
.attachment-section .attachments .attachment {
margin-top: -3px;
}
.attachment-section .attachments a {
color: #396fc9;
text-decoration: none;
}
.attachment-section .attachments a:hover {
color: #366108;
}
.attachment-section .attachments li {
clear: left;
margin-bottom: 16px;
margin-right: 16px;
overflow: hidden;
display: inline-block;
padding: 0;
z-index: 0;
}
.attachment-section .attachments .displayNameFornotThumbnail {
position: absolute;
width: 100%;
height: 26%;
background-color: #ffffff;
background-color: var(--color-surface-bright);
bottom: 0;
padding: 6px 8px;
box-sizing: border-box;
overflow: hidden;
display: flex;
}
.attachment-section .attachments .displayNameFornotThumbnail .iconDocument,
.attachment-section .attachments .displayNameFornotThumbnail .iconImage {
width: 16px;
height: 16px;
}
.attachment-section .attachments .displayNameFornotThumbnail .nameOnBottom {
color: #141414;
color: var(--color-body-on-default);
width: 100%;
max-width: 130px;
white-space: nowrap;
text-transform: none;
text-shadow: none;
display: flex;
align-items: center;
box-sizing: border-box;
margin-left: 10px;
}
.attachment-section .attachments .displayNameFornotThumbnail .nameOnBottom .fileName {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.attachment-section .attachments .mime-icon,
.attachment-section .attachments .attachment-thumbnail {
position: relative;
float: left;
height: 115px;
width: 172px;
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
border-radius: 4px;
}
.attachment-section .attachments .mime-icon .attachmentWrapper .fileType,
.attachment-section .attachments .attachment-thumbnail .attachmentWrapper .fileType {
max-width: 35px;
position: absolute;
left: 50%;
background: #ffffff;
background: var(--color-surface-bright);
border: 1px solid;
line-height: 8px;
text-align: center;
padding: 2px 5px;
top: 50%;
z-index: 1;
font-size: 7px;
overflow: hidden;
transform: translate(calc(-50% - 13px), calc(-50% - 7px));
text-overflow: ellipsis;
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
}
.attachment-section .attachments .mime-icon .attachmentWrapper .svgWrapper,
.attachment-section .attachments .attachment-thumbnail .attachmentWrapper .svgWrapper {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% - 10px));
}
.attachment-section .attachments .mime-icon .preview,
.attachment-section .attachments .attachment-thumbnail .preview {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: inline-block;
}
.attachment-section .attachments .mime-icon .preview img,
.attachment-section .attachments .attachment-thumbnail .preview img {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% - 10px));
}
.attachment-section .attachments .mime-icon .mask,
.attachment-section .attachments .attachment-thumbnail .mask {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 172px;
height: 115px;
background-color: #f7f7f7;
box-sizing: border-box;
transition: all 0.2s ease-in-out;
opacity: 0;
z-index: 99;
cursor: pointer;
}
.attachment-section .attachments .mime-icon .mask .preview,
.attachment-section .attachments .attachment-thumbnail .mask .preview {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: inline-block;
}
.attachment-section .attachments .mime-icon .mask .displayNameForThumbnail,
.attachment-section .attachments .attachment-thumbnail .mask .displayNameForThumbnail {
position: absolute;
width: 100%;
height: 100%;
top: 0;
padding: 8px;
box-sizing: border-box;
overflow: hidden;
}
.attachment-section .attachments .mime-icon .mask .displayNameForThumbnail .logo-title-wrapper,
.attachment-section .attachments .attachment-thumbnail .mask .displayNameForThumbnail .logo-title-wrapper {
display: flex;
gap: 10px;
align-items: center;
}
.attachment-section .attachments .mime-icon .mask .displayNameForThumbnail .logo-title-wrapper .nameOnTop,
.attachment-section .attachments .attachment-thumbnail .mask .displayNameForThumbnail .logo-title-wrapper .nameOnTop {
display: -webkit-box;
-webkit-line-clamp: 3;
-moz-line-clamp: 3;
-ms-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
-ms-box-orient: vertical;
color: #141414;
color: var(--color-body-on-default);
position: relative;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: break-spaces;
word-break: break-all;
}
.attachment-section .attachments .mime-icon .mask .displayNameForThumbnail .displaySize,
.attachment-section .attachments .attachment-thumbnail .mask .displayNameForThumbnail .displaySize {
color: #141414;
color: var(--color-body-on-default);
display: block;
position: absolute;
width: 100%;
bottom: 12px;
}
.attachment-section .attachments .mime-icon a,
.attachment-section .attachments .attachment-thumbnail a {
position: absolute;
left: 20%;
height: 24px;
bottom: 14%;
display: inline-block;
}
.attachment-section .attachments .mime-icon .downloadIcon,
.attachment-section .attachments .attachment-thumbnail .downloadIcon {
width: 20px;
height: 20px;
background-size: 24px;
}
.attachment-section .attachments .mime-icon .download,
.attachment-section .attachments .attachment-thumbnail .download {
position: absolute;
left: 80%;
height: 24px;
bottom: 7px;
display: none;
}
.attachment-section .attachments .mime-icon .preview-icon,
.attachment-section .attachments .attachment-thumbnail .preview-icon {
position: absolute;
left: 40%;
height: 24px;
bottom: 14%;
display: inline-block;
opacity: 0;
cursor: pointer;
}
.attachment-section .attachments .mime-icon .preview-thumbnail,
.attachment-section .attachments .attachment-thumbnail .preview-thumbnail {
position: absolute;
left: 35%;
height: 24px;
bottom: 14%;
display: inline-block;
cursor: pointer;
}
.attachment-section .attachments .mime-icon:hover .mask,
.attachment-section .attachments .attachment-thumbnail:hover .mask {
opacity: 1;
}
.attachment-section .attachments .mime-icon:hover .download,
.attachment-section .attachments .attachment-thumbnail:hover .download {
display: inline-block;
z-index: 99;
}
.attachment-section .attachments .mime-icon:hover .preview-icon,
.attachment-section .attachments .attachment-thumbnail:hover .preview-icon {
opacity: 1;
}
.attachment-section .attachments .mime-icon,
.attachment-section .attachments .attachment {
position: relative;
float: left;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.attachment-section .attachments .mime-icon,
.attachment-section .attachments .mime-httpd {
background-size: 26px !important;
background-position: center 35% !important;
}
.attachment-section .attachments .mime-icon,
.attachment-section .attachments .mime-httpd {
margin: 0;
width: 172px;
height: 115px;
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
border-radius: 4px;
background-color: var(--color-state-hover);
z-index: 8;
}
.attachment-section .attachments .mime-icon .preview,
.attachment-section .attachments .mime-httpd .preview,
.attachment-section .attachments .mime-icon .downloadLink,
.attachment-section .attachments .mime-httpd .downloadLink {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: inline-block;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
[data-theme~="dark"] .attachment-section .attachments .attachment-thumbnail .mask {
background-color: var(--color-state-hover);
}
[data-theme~="dark"] .attachment-section .attachments .mime-icon .fileType {
background-color: #141414;
background-color: var(--color-body-on-default);
color: #ffffff;
color: var(--color-surface-bright);
}
/*# sourceMappingURL=AttachmentPart.css.map */
.textPartContainer {
position: relative;
}
.textPartContainer .MailPartHtml {
margin: 0 0 12px;
border: none;
position: relative;
line-height: normal;
}
.textPartContainer .MailPartHtml .externalImgPlaceholder {
background-position-x: center;
background-position-y: center;
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 22px;
}
.textPartContainer .MailPartHtml .iconAltImage {
background-image: url(//mail.group-cdn.one/v51.1.15/media/alt-image.37c68ee9.svg);
}
.textPartContainer .MailPartHtml .oneComWebmail-html .oneComWebmail-body blockquote,
.textPartContainer .MailPartHtml .oneComWebmail-mail .oneComWebmail-body blockquote {
border-left: 2px solid #d3d3d3;
}
.textPartContainer .MailPartHtml .oneComWebmail-html .oneComWebmail-body blockquote .oneComWebmail-body,
.textPartContainer .MailPartHtml .oneComWebmail-mail .oneComWebmail-body blockquote .oneComWebmail-body {
color: #676767;
}
.textPartContainer .MailPartHtml .oneComWebmail-html a[href],
.textPartContainer .MailPartHtml .oneComWebmail-mail a[href] {
text-decoration: underline;
color: var(--color-state-form-active);
}
.textPartContainer .MailPartTooBig {
margin-top: 30px;
margin-bottom: 60px;
}
.textPartContainer .MailPartTooBig a[href] {
cursor: pointer;
text-decoration: underline;
}
.textPartContainer .MailPartTooBig a[href]:hover {
color: #0000ee;
}
.textPartContainer .MailPartTooBig a[href]:visited:hover {
color: #551a8b;
}
.textPartContainer .MailPartTooBig h1 {
font-size: 2em;
margin: 0.67em 0;
font-weight: bold;
color: #959595;
}
/*# sourceMappingURL=TextPart.css.map */
.inlineImagePartImg {
max-width: 100%;
display: block;
height: auto;
}
.inlineImagePartImg.zoomAble {
cursor: zoom-in;
}
.inlineImagePartImg.zoomAble.zoomed {
cursor: zoom-out;
max-width: none;
}
/*# sourceMappingURL=InlineImagePart.css.map */
.mailExternalActions a {
margin-top: 3px;
cursor: pointer;
color: #396fc9;
text-decoration: none;
}
.mailExternalActions a:hover {
text-decoration: underline;
}
.mailExternalActions a:first-child {
padding: 0px 10px 0px 0px;
}
.mailExternalActions a:nth-child(2) {
padding: 0px 0px 0px 10px;
border-left: 1px solid;
}
/*# sourceMappingURL=MailBody.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.modal {
position: fixed;
display: flex;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background-color: rgba(60,60,60,0.6);
background-color: var(--modal-backgroundOverlay);
z-index: 100;
padding: 20px;
box-sizing: border-box;
align-items: center;
justify-content: center;
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.modal-dialog {
width: 100%;
max-width: 480px;
padding: 50px 60px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
box-shadow: none;
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 0px;
}
.modal-dialog p {
margin: 0;
}
.modal-dialog svg {
margin-bottom: 20px;
}
.modal-dialog .svgWrapper {
position: inherit;
transform: none;
}
.modal-dialog .cancelIcon {
position: absolute;
top: 18px;
right: 18px;
align-self: flex-end;
background-color: transparent;
width: 22px;
height: 22px;
padding: 0px;
border: none;
cursor: pointer;
z-index: 1;
background-size: 16px 16px;
}
.modal-heading {
font-weight: 400;
line-height: 20px;
font-size: 14px;
font-size: 24px;
color: #141414;
color: var(--color-body-on-default);
line-height: 36px;
font-weight: var(--font-weight-light-bold);
}
.modal-label {
font-weight: 400;
line-height: 15px;
font-size: 12px;
line-height: 24px;
color: #141414;
color: var(--color-body-on-default);
font-size: 15px;
margin-top: 10px;
text-align: left;
font-weight: var(--font-weight-light-bold);
}
.modal-actions {
margin-top: 25px;
}
.modal-actions .cancelButton {
color: #141414;
color: var(--color-body-on-default);
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
line-height: 40px;
margin-right: 20px;
font-weight: 600;
font-size: 14px;
}
.modal-actions .submitButton {
line-height: 40px;
font-size: 14px;
}
/*# sourceMappingURL=Modal.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.attachment-container {
width: 100%;
margin: 0;
display: block;
padding-top: 14px;
font-size: 12px;
line-height: 15px;
color: #141414;
color: var(--color-body-on-default);
}
.attachment-container .download-link {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24px;
}
.attachment-container .download-link .attachment-heading {
font-weight: 500;
color: #141414;
color: var(--color-body-on-default);
}
.attachment-container .download-link a {
display: flex;
align-items: center;
text-decoration: none;
color: #141414;
color: var(--color-body-on-default);
text-align: right;
}
.attachment-container .download-link a:hover {
color: #141414;
color: var(--color-body-on-default);
text-decoration: none;
}
.attachment-container .download-link .downloadIcon {
background-size: 24px;
width: 20px;
height: 20px;
margin-left: 10px;
}
.attachment-container .download-link.compact-view {
flex-direction: column;
align-items: flex-start;
}
.attachment-container .download-link.compact-view .download-all-attachments {
flex-direction: column;
align-items: flex-start;
margin-left: 0;
}
.attachment-container .download-link.compact-view .download-all-attachments .show-all-attachment {
margin-left: 0;
}
.download-all-attachments {
margin-right: 15px;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 0;
}
.download-all-attachments a span {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
font-weight: var(--font-weight-light-bold);
}
.show-all-attachment {
cursor: pointer;
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
line-height: 15px;
color: #141414;
color: var(--color-body-on-default);
margin: 0 0 0 20px;
text-align: right;
font-weight: 400;
font-weight: var(--font-weight-light-bold);
}
.show-all-attachment .icon-chevron {
flex: 1 0 auto;
}
.show-all-attachment .attachmentChevron {
background-size: 18px 18px;
}
.show-all-attachment .rotateIcon.icon-chevron {
transform: rotate(180deg);
}
/*# sourceMappingURL=AttachmentMailView.css.map */
.modalAttach {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(60,60,60,0.94902);
z-index: 9999999;
}
.modal-main {
position: fixed;
height: 80%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.modal-main iframe {
width: 80%;
}
.modal-main img {
width: auto;
max-width: 80%;
height: auto;
display: block;
}
.modal-main .gravity-icon-wrapper .iconForwardArrow,
.modal-main .gravity-icon-wrapper .iconBackArrow {
width: 36px;
height: 36px;
}
.modal-main .gravity-icon-wrapper .iconForwardArrow svg,
.modal-main .gravity-icon-wrapper .iconBackArrow svg {
filter: none;
}
.display-block {
display: block;
}
.display-none {
display: none;
}
.fileStyle {
font-family: Helvetica, Arial, sans-serif;
max-height: 100%;
}
.iFrameStyle {
width: 100%;
height: 100%;
}
.fileHeader {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 10px;
height: 50px;
}
.fileHeader .cancelIcon {
border: none !important;
text-decoration: none !important;
}
.fileHeader .cancelIcon {
margin-right: 20px;
background-repeat: no-repeat;
cursor: pointer;
height: 10px;
width: 10px;
background-size: 10px 10px;
display: inline-block;
position: relative;
z-index: 1;
filter: invert(100%) brightness(250%) contrast(100%);
}
.fileName {
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 50px;
color: white;
}
p .gravity-icon-wrapper .cancelIcon {
display: flex;
padding: 0px;
height: 18px;
width: 18px;
}
.forward-prev-icons {
filter: invert(100%) brightness(200%) contrast(100%);
cursor: pointer;
}
.disable {
opacity: 0.2;
}
.hide {
visibility: hidden;
}
/*# sourceMappingURL=AttachmentPreview.css.map */
.contact-card {
position: fixed;
margin-top: 7px;
box-sizing: border-box;
min-width: 240px;
padding: 9px;
background-color: var(--color-surface-dim);
color: var(--color-body-on-default);
font-weight: var(--font-weight-light-bold);
z-index: 10030;
text-align: center;
border: 1px solid var(--sub-menus-border-color);
box-shadow: 0 4px 17px rgba(0, 0, 0, 0.3);
border-radius: 4px;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-card::before {
content: " ";
position: absolute;
top: -7px;
left: 15px;
border-style: solid;
border-width: 0 7px 7px 7px;
border-color: transparent transparent var(--color-surface-dim) transparent;
}
.contact-card--count {
display: block;
height: 18px;
}
.contact-card--count .currentCount {
margin-right: 0;
}
.contact-card--photo {
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
align-content: flex-end;
background-image: url(//mail.group-cdn.one/v51.1.15/media/user-profile.dd947b01.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin-top: 10px;
}
.contact-card--photo .gravity-icon-wrapper {
align-items: center;
width: 36px;
display: flex;
height: 36px;
}
.contact-card--photo .gravity-icon-wrapper gv-icon {
display: flex;
width: 36px;
height: 36px;
}
.contact-card--photo .gravity-icon-wrapper gv-icon svg {
filter: none;
}
.contact-card--photo .gravity-icon-wrapper gv-icon svg path {
transform: scale(1.9);
transform-origin: center;
}
.contact-card--buttons {
display: flex;
flex-direction: column;
}
.contact-card--buttons .mail-button a,
.contact-card--buttons .mail-button a:visited,
.contact-card--buttons .mail-button a:hover,
.contact-card--buttons .mail-button a:active {
text-decoration: none;
}
.contact-card--buttons .card-button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 2px 8px;
background: var(--color-primary);
border: 1px solid var(--color-primary);
color: #ffffff;
color: var(--color-button-fg-on-primary, #ffffff);
box-sizing: border-box;
border-radius: 4px;
cursor: pointer;
line-height: 30px;
}
.contact-card--buttons .card-button:hover {
text-decoration: none;
color: #ffffff;
color: var(--color-button-fg-on-primary, #ffffff);
}
.contact-card--buttons .card-button:nth-child(2) {
background: var(--color-surface-bright);
border: 1px solid var(--color-primary);
color: var(--color-body-on-default);
margin-top: 3px;
margin-bottom: 6px;
padding: 8px 12px;
}
.contact-card--switcher {
vertical-align: inherit;
cursor: pointer;
margin: 28px 0;
}
.contact-card--labels {
margin-top: 8px;
margin-bottom: 8px;
}
.contact-card--labelsWithoutButton {
margin-top: 12px;
margin-bottom: 12px;
}
.contact-card--displayname {
font-size: 13px;
line-height: 17px;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-body-on-default);
}
.contact-card--email {
color: var(--color-body-on-default);
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*# sourceMappingURL=ContactCard.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.emailList {
display: flex;
flex-wrap: wrap;
gap: 5px;
position: relative;
}
.emailList .truncatedText {
color: var(--color-primary);
text-decoration: none;
cursor: pointer;
font-weight: bold;
}
/*# sourceMappingURL=EmailList.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.loadText {
position: relative;
min-height: 200px;
z-index: 1;
}
.loadText:hover {
z-index: 1;
}
.calendar-invite {
width: 100%;
display: flex;
border: 1px solid #e2e2e2;
border-radius: 4px;
}
.calendar-invite-date-details {
width: 100px;
padding: 24px;
background: var(--color-state-hover);
display: flex;
align-items: center;
justify-content: center;
}
.calendar-invite-date-details .date-icon {
font-weight: 600;
width: 96px;
height: 96px;
}
.calendar-invite-date-details .date-icon .month {
background: #282629;
background: var(--color-gray-700);
color: white;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: 1px solid #3c3c3c;
font-size: 14px;
font-weight: 600;
text-align: center;
line-height: 24px;
}
.calendar-invite-date-details .date-icon .date {
display: flex;
flex-direction: column;
justify-content: center;
border-bottom-left-radius: 4px;
background: white;
font-size: 36px;
text-align: center;
height: 66px;
border: 1px solid #141414;
border: 1px solid var(--color-body-on-default);
color: #282629;
color: var(--color-gray-700);
}
.calendar-invite-date-details .date-icon .date span:first-child {
font-weight: 400;
font-size: 24px;
line-height: 30px;
letter-spacing: 0.15px;
position: relative;
top: 8px;
}
.calendar-invite-date-details .date-icon .date .day {
display: block;
line-height: 22px;
margin: 0px 15px;
padding: 4px 10px 10px 10px;
font-weight: 500;
font-size: 14px;
}
.calendar-invite-event-details {
width: 100px;
flex: 2 0 auto;
padding: 16px 24px;
}
.calendar-invite-event-details .subjectInvite {
padding-bottom: 8px;
word-break: break-all;
}
.calendar-invite-event-details .who-cancelled span {
color: red;
}
.calendar-invite-event-details .who-cancelled span span:last-child {
display: none;
}
.calendar-invite-event-details .when {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
line-height: 16px;
padding: 5px 0px;
word-break: break-all;
font-weight: 500;
padding-bottom: 0px;
}
.calendar-invite-event-details .when span:first-child {
margin-right: 10px;
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.calendar-invite-event-details .when .fmt {
color: #141414 !important;
color: var(--color-body-on-default) !important;
}
.calendar-invite-event-details .when .fmt {
font-weight: 400;
}
.calendar-invite-event-details .when .fmt-fromTime {
margin-right: 0 !important;
color: #141414 !important;
color: var(--color-body-on-default) !important;
}
.calendar-invite-event-details .who {
padding: 5px 0px;
word-break: break-all;
}
.calendar-invite-event-details .who span:first-child {
margin-right: 10px;
}
.calendar-invite-event-details .actions {
padding-top: 16px;
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.calendar-invite-event-details .actions button {
border-radius: 4px;
border: 1px solid #ededed;
background: #f7f7f7;
padding: 5px 15px;
margin-right: 5px;
letter-spacing: 0.25px;
cursor: pointer;
}
.calendar-invite-event-details .actions button.yes,
.calendar-invite-event-details .actions button.maybe,
.calendar-invite-event-details .actions button.no {
display: flex;
align-items: center;
background-color: #d9ebf7;
background-color: var(--color-signal-info-light);
}
.calendar-invite-event-details .actions button.yes .accepted,
.calendar-invite-event-details .actions button.maybe .accepted,
.calendar-invite-event-details .actions button.no .accepted {
background-repeat: no-repeat;
margin-right: 7px;
width: 16px;
height: 18px;
}
.calendar-invite-event-details .actions button.navigate {
padding: 6px 24px;
gap: 6px;
height: 30px;
background: #0078c8;
border-radius: 4px;
color: white;
border: none;
}
.calendar-invite-event-details .description {
display: flex;
align-items: center;
gap: 8px;
margin: 1em 0;
cursor: pointer;
}
.calendar-invite-event-details .description .chevronIcon {
transform: rotate(180deg);
}
.calendar-invite-event-details .description .chevronIcon.selected {
transform: rotate(0deg);
}
.calendar-invite-event-details .invite-description {
word-break: break-word;
white-space: break-spaces;
}
.footerButtons {
margin-top: 8px;
text-align: left;
margin-left: auto;
}
.footerButtons .commonButtons {
padding: 6px 24px;
}
.footerButtons .action-buttons {
color: #141414;
color: var(--color-body-on-default);
font-size: 13px;
border: 1px solid #ffffff;
border: 1px solid var(--color-surface-bright);
background-color: transparent;
font-weight: 500;
font-weight: var(--font-weight-bold);
border-radius: 4px;
margin-right: 16px;
cursor: pointer;
}
.footerButtons .action-buttons:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.footerButtons .action-buttons.filled {
background: var(--color-primary);
color: #ffffff;
border: 1px solid var(--color-primary);
}
.notification-containerInvite {
background: #d9ebf7;
margin-bottom: 10px;
display: flex;
align-items: center;
padding: 24px;
gap: 18px;
}
.notification-containerInvite .information {
width: 24px;
height: 24px;
background-repeat: no-repeat;
}
.notification-containerInvite .message {
line-height: 22px;
letter-spacing: 0.25px;
color: #3c3c3c;
margin: 0;
}
.notification-containerInvite.cancelled {
background: #f8d9dd;
background: var(--color-signal-alert-light);
}
.notification-containerInvite.cancelled .alert {
min-width: 25px;
fill: #d20019;
}
.notification-containerInvite.cancelled .alert svg {
filter: none;
}
.notification-containerInvite.updated {
background: #ffedd9;
background: var(--color-signal-warning-light);
}
.notification-containerInvite.updated .warning {
min-width: 25px;
}
.notification-containerInvite.updated .warning svg {
filter: none;
fill: #d20019;
}
.notification-containerInvite.updated dialog-footer-buttons {
margin-left: auto;
}
.notification-containerInvite.updated dialog-footer-buttons .footerButtons {
display: flex;
margin-top: 0px;
gap: 5px;
flex-wrap: wrap;
}
[data-theme~="dark"] .calendar-invite {
border: 1px solid #3a3a3a;
}
[data-theme~="dark"] .notification-containerInvite .message {
color: #ffffff;
}
[data-theme~="dark"] .notification-containerInvite .action-buttons.filled {
border: 1px solid #f7f7f7;
background: transparent;
}
[data-theme~="dark"] .calendar-invite-event-details .subjectInvite {
color: #ffffff;
}
[data-theme~="dark"] .calendar-invite-event-details .when span,
[data-theme~="dark"] .calendar-invite-event-details .who span {
font-weight: 500;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.25px;
color: #bbbbbb;
}
[data-theme~="dark"] .calendar-invite-event-details .who-cancelled span {
color: red;
}
[data-theme~="dark"] .calendar-invite-event-details .actions button {
background: #414141;
color: #f7f7f7;
font-weight: 500;
border: 1px solid #8a8989;
}
[data-theme~="dark"] .calendar-invite-event-details .actions button.yes,
[data-theme~="dark"] .calendar-invite-event-details .actions button.maybe,
[data-theme~="dark"] .calendar-invite-event-details .actions button.no {
background-color: #d9ebf7;
background-color: var(--color-signal-info-light);
}
[data-theme~="dark"] .calendar-invite-event-details .when span:nth-child(2) {
color: #ffffff;
}
[data-theme~="dark"] .eventInfo-label {
color: #bbb;
font-weight: 500;
}
[data-theme~="dark"] .eventInfo-value {
color: #bbb;
font-weight: 500;
}
[data-theme~="dark"] .eventInfo-value.fmttime {
color: #fff;
font-weight: 600;
}
.eventInfo {
border-collapse: collapse;
border-spacing: 0;
}
.eventInfo td:nth-child(1) {
padding-right: 24px;
/* Adjust this value to control the gap */
}
.eventInfo tr {
vertical-align: top;
}
.eventInfo tr td:nth-child(2) {
word-break: break-all;
}
.eventInfo-container {
display: flex;
justify-content: flex-start;
gap: 24px;
letter-spacing: 0.25px;
align-items: flex-start;
}
.eventInfo-label {
color: #8a8989;
font-weight: 500;
}
.eventInfo-value {
color: #8a8989;
}
.eventInfo-value.exdates {
margin: 0;
color: red;
}
.eventInfo-value.fmttime {
color: #3c3c3c;
}
.eventInfo-value.fmttime .time {
text-transform: uppercase;
}
.eventInfo .orgName {
cursor: text;
}
.eventInfo .customTooltip .arrow-left {
top: 37px;
}
/*# sourceMappingURL=InviteEmail.css.map */
.avatar {
max-width: var(--size-xl);
height: var(--size-xl);
}
.avatar .imageContainer {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.gv-activated .avatar .gv-initials {
width: var(--size-xl);
max-height: var(--size-xl);
height: 100%;
}
/*# sourceMappingURL=Bimi.css.map */
.summaryContainer {
gap: var(--size-sm);
background-color: var(--color-surface-toned);
padding-bottom: 10px;
padding-top: 10px;
}
.summaryContainer .aida-logo {
width: 16px;
height: 16px;
background-image: var(--aida-logo);
background-repeat: no-repeat;
}
.summaryContainer .smallGap {
gap: var(--size-sm);
}
.summaryContainer .cursorPointer {
cursor: pointer;
}
.summaryContainer .summaryToggleBtn gv-icon svg {
filter: none;
}
.summaryContainer .summaryGenerateBtn {
color: var(--color-state-form-active);
cursor: pointer;
}
.summaryContainer .summarySkeleton {
padding-bottom: 5px;
gap: var(--size-md);
}
.summaryContainer .summaryAlert .summaryAlertLink {
text-decoration: underline;
}
.summaryContainer .SummaryHtml {
white-space: pre-line;
}
.summaryContainer .SummaryHtml ul {
list-style-type: disc;
padding-left: var(--size-md);
display: flex;
flex-direction: column;
}
.summaryContainer .aiContent {
color: var(--color-body-on-alternative);
}
[data-theme="dark"] .summaryContainer .summaryAlert .gv-notice-icon {
filter: invert(1);
}
/*# sourceMappingURL=SummaryAi.css.map */
.trust-sender-modal .trust-sender-modal-address {
text-decoration: underline;
}
/*# sourceMappingURL=TrustSenderModal.css.map */
.quota-exceeded-modal .gv-modal-content .gv-button.gv-button-cancel {
border: none;
}
/*# sourceMappingURL=QuotaExceedModal.css.map */
.feedback-by-ai {
gap: var(--size-sx);
}
.feedback-by-ai .feedback-by-ai-btn {
cursor: pointer;
}
.feedback-by-ai .feedback-by-ai-btn gv-icon svg {
filter: none;
}
.feedback-by-ai .feedback-by-ai-btn:hover {
background-color: var(--color-state-hover);
}
.filled svg path {
fill: var(--color-state-form-active);
}
/*# sourceMappingURL=Feedback.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.attachmentsSection {
display: flex;
min-height: 45px;
border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid var(--color-border-alt);
padding: 0px 20px;
align-items: center;
}
.attachmentsSection .attachmentListContainer {
padding: 15px 0px;
width: 100%;
}
.attachmentsSection .attachmentListContainer .attachment-label {
color: #141414;
color: var(--color-body-on-default);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0;
}
.attachmentsSection .attachmentListContainer .attachment-label-container {
display: flex;
align-items: center;
gap: 14px;
}
.attachmentsSection .attachmentListContainer .attachment-label-addmore {
color: #0066aa;
color: var(--color-state-form-active);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.attachmentsSection .attachmentListContainer .attachment-label-addmore .gravity-icon-wrapper .add {
fill: #0066aa;
fill: var(--color-state-form-active);
}
.attachmentsSection .attachmentListContainer .attachment-label-addmore .gravity-icon-wrapper .add svg {
filter: none;
}
.attachmentsSection .attachmentListContainer .attachment-label-container-showAllText-label {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
color: #141414;
color: var(--color-body-on-default);
}
.attachmentsSection .attachmentListContainer .attachment-label-container-showAllText-label .rotate {
transform: rotate(0deg);
}
.attachmentsSection .attachmentListContainer .attachmentsList {
display: flex;
gap: 15px 12px;
flex-wrap: wrap;
margin-top: 15px;
}
.attachmentsSection .attachmentListContainer .attachmentsList .attachmentUpload {
padding: 8px 8px 14px;
display: flex;
background-color: #e2e2e2;
background-color: var(--color-border-alt);
border-radius: 4px;
flex-direction: column;
width: -moz-fit-content;
width: fit-content;
cursor: auto;
}
.attachmentsSection .attachmentListContainer .attachmentsList .attachmentUpload p {
margin: 0;
height: 18px;
display: flex;
width: 131px;
margin-bottom: 5px;
}
.attachmentsSection .attachmentListContainer .attachmentsList .attachmentUpload p .Icon {
margin: 0;
}
.attachmentsSection .attachmentListContainer .attachmentsList .attachmentUpload p .Icon.iconNewCross {
background-size: 10px;
cursor: pointer;
}
.attachmentsSection .attachmentListContainer .attachmentsList .attachmentUpload p span {
color: #141414;
color: var(--color-body-on-default);
width: 80px;
padding: 0px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.attachmentsSection .attachmentListContainer .attachmentsList .attachmentUpload span {
padding-left: 26px;
color: #69686b;
color: var(--color-body-on-alternative);
}
.attachmentsSection .attachmentListContainer .attachmentsList .attachmentUpload.previewable {
cursor: pointer;
}
.attachmentsSection .attachmentListContainer .attachmentsList .attachmentUpload p span:nth-of-type(1),
.attachmentsSection .attachmentListContainer .attachmentsList .attachmentUpload p span:nth-of-type(3) {
display: inline-block;
width: 16px;
padding: 0px;
}
.attachmentsSection.listAvailable {
max-height: 120px;
overflow: hidden;
align-items: flex-start;
}
.attachmentsSection.error {
border-bottom: thin solid #b30016;
border-bottom: thin solid var(--color-signal-alert);
}
.attachmentsSection input[type="file"] {
display: none;
}
/*# sourceMappingURL=AttachmentsList.css.map */
.composer-toolbar {
display: flex;
width: 100%;
align-items: center;
border-bottom: 1px solid var(--color-border-alt);
border-top: 1px solid var(--color-border-alt);
padding: 0px 12px;
min-height: 42px;
background: var(--color-surface-bright);
}
.composer-toolbar .composer-toolbar-button {
display: flex;
align-items: center;
height: 22px;
width: 22px;
padding: 3px;
cursor: pointer;
justify-content: center;
border-radius: 2px;
}
.composer-toolbar .composer-toolbar-button .gravity-icon-wrapper .border_color {
margin-bottom: 4px;
}
.composer-toolbar .composer-toolbar-button .Icon {
margin: 0;
width: 22px;
height: 20px;
background-size: auto;
}
.composer-toolbar .composer-toolbar-button.rte-font-style {
display: flex;
color: var(--color-body-on-default);
font-weight: var(--font-weight-light-bold);
font-size: 12px;
width: 95px;
justify-content: space-between;
}
.composer-toolbar .composer-toolbar-button.rte-font-style .Icon {
width: 16px;
height: 18px;
}
.composer-toolbar .composer-toolbar-button.rte-font-size {
display: flex;
width: 40px;
height: 22px;
color: var(--color-body-on-default);
font-weight: var(--font-weight-light-bold);
font-size: 12px;
}
.composer-toolbar .composer-toolbar-button.rte-font-size .rte-size-icon {
margin-right: 4px;
}
.composer-toolbar .composer-toolbar-button.rte-font-size .rte-dropdown-arrow-icon {
width: 16px;
height: 18px;
}
.composer-toolbar .composer-toolbar-button.rte-ai-tool {
width: var(--size-xl);
height: var(--size-lg);
gap: var(--size-xs);
}
.composer-toolbar .composer-toolbar-button.rte-ai-tool.active {
background-color: var(--color-state-active);
}
.composer-toolbar .composer-toolbar-button.rte-ai-tool:hover {
background-color: var(--color-state-hover);
}
.composer-toolbar .composer-toolbar-button.rte-ai-tool svg {
fill: var(--color-state-form-active);
}
.composer-toolbar .composer-toolbar-button.rte-ai-tool .aiText {
color: var(--color-state-form-active);
}
.composer-toolbar .composer-toolbar-button.selected {
background-color: var(--color-state-active);
}
.composer-toolbar .toolbar-input {
width: calc(100% - 14px);
border: 1px solid #cccccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
display: inline-block;
height: 18px;
padding: 4px 6px;
background-color: var(--color-surface-dim);
color: var(--color-body-on-default);
margin-bottom: 9px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.composer-toolbar .toolbar-input:focus {
border-color: var(--color-state-focus);
}
.composer-toolbar .toolbar-input.focus-visible {
outline: none;
}
.composer-toolbar .toolbar-input:focus-visible {
outline: none;
}
.composer-toolbar .toolbar-input::-moz-placeholder {
color: var(--color-body-on-alternative);
}
.composer-toolbar .toolbar-input::placeholder {
color: var(--color-body-on-alternative);
}
.composer-toolbar .submission-button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 3px 25px;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: #ffffff;
color: var(--button-color-text, #ffffff);
border: 1px solid var(--color-primary);
border: 1px solid var(--color-button-bg-primary, var(--color-primary));
box-sizing: border-box;
border-radius: 4px;
cursor: pointer;
margin-left: auto;
font-size: 12px;
font-weight: normal;
line-height: 18px;
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.composer-toolbar .rte-pipe-icon {
height: 12px;
width: 1px;
margin: 0;
padding: 3px;
border-left: 1px solid #eeeeee;
}
.composer-toolbar .hidden {
display: none;
opacity: 0;
transform: translateX(10px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.composer-toolbar .overflow-container .customTooltip {
width: 50px;
}
.composer-toolbar .overflow-container .customTooltip .arrow-left {
top: 37px;
}
[data-theme~="dark"] .composer-toolbar .rte-pipe-icon {
filter: invert(100%) brightness(200%) contrast(100%);
}
[data-theme~="dark"] .composer-toolbar .rte-ai-tool svg {
filter: none;
}
/*# sourceMappingURL=Toolbar.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.toolbar-overflow {
position: fixed;
z-index: 9999;
}
.toolbar-overflow.hidden {
display: none;
}
.toolbar-overflow > .popupMenu {
position: absolute;
z-index: auto;
z-index: initial;
bottom: 26px;
left: auto;
right: -30px;
width: 250px;
max-height: 310px;
overflow-x: hidden;
overflow-y: auto;
}
.toolbar-overflow > .popupMenu::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.toolbar-overflow > .popupMenu::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.toolbar-overflow > .popupMenu::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.toolbar-overflow > .popupMenu .composer-toolbar-button {
width: 250px;
padding: 6px 14px;
justify-content: left;
display: flex;
gap: 15px;
}
.toolbar-overflow > .popupMenu .composer-toolbar-button:hover,
.toolbar-overflow > .popupMenu .composer-toolbar-button.active {
background-color: var(--color-state-hover);
}
.toolbar-overflow > .popupMenu .composer-toolbar-button span {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
font-weight: var(--font-weight-light-bold);
}
.toolbar-overflow .popupMenu {
cursor: pointer;
}
/*# sourceMappingURL=OverflowToolsMenu.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.popupMenu {
overflow-y: auto;
padding: 6px 0;
z-index: 99999;
left: 90px;
background: #ffffff;
background: var(--color-surface-bright);
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.1);
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 10px;
font-weight: normal;
border: 1px solid none;
border: 1px solid var(--sub-menus-border-color);
}
/*# sourceMappingURL=PopupMenu.css.map */
.toolbar-fonts {
position: fixed;
z-index: 1;
}
.toolbar-fonts.hidden {
display: none;
}
.toolbar-fonts .popupMenu {
position: absolute;
bottom: 30px;
left: -14px;
}
.toolbar-fonts .popupMenu p {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
margin: 0;
}
.toolbar-fonts .popupMenu p:hover {
background-color: var(--color-state-hover);
}
/*# sourceMappingURL=FontPopup.css.map */
.toolbar-fonts {
position: fixed;
z-index: 1;
}
.toolbar-fonts.hidden {
display: none;
}
.toolbar-fonts .popupMenu {
position: absolute;
bottom: 30px;
}
.toolbar-fonts .popupMenu p {
display: flex;
padding: 3px 6px;
cursor: pointer;
white-space: nowrap;
margin: 0;
color: var(--color-body-on-default);
}
.toolbar-fonts .popupMenu p:hover {
background-color: var(--color-state-hover);
}
.toolbar-fonts .popupMenu p.sizeSelected {
background-color: var(--color-state-active);
}
.toolbar-fonts .popupMenu p.sizeMenu--small-sample {
font-size: x-small;
}
.toolbar-fonts .popupMenu p.sizeMenu--medium-sample {
font-size: medium;
}
.toolbar-fonts .popupMenu p.sizeMenu--large-sample {
line-height: normal;
font-size: x-large;
}
.toolbar-fonts .popupMenu p.sizeMenu--huge-sample {
line-height: normal;
font-size: xx-large;
}
/*# sourceMappingURL=FontSizePopup.css.map */
.colorGrid {
display: flex;
width: 144px;
height: 144px;
flex-wrap: wrap;
}
.colorGrid span {
display: inline-block;
height: 14px;
width: 14px;
margin: 2px;
}
/*# sourceMappingURL=ColorGrid.css.map */
.toolbar-fontsColor {
position: fixed;
z-index: 1;
}
.toolbar-fontsColor.hidden {
display: none;
}
.toolbar-fontsColor .popupMenu {
position: absolute;
bottom: 26px;
right: -35px;
left: auto;
left: initial;
padding: 2px;
}
/*# sourceMappingURL=FontColorPopup.css.map */
.imageUpload {
position: fixed;
}
.imageUpload.hidden {
display: none;
}
.imageUpload .popupMenu {
position: absolute;
bottom: 30px;
left: -290px;
box-shadow: 0px 4px 17px var(--primary-box-shadow-color);
border-radius: 5px;
padding: 15px;
width: 260px;
background-color: var(--color-surface-dim);
color: var(--color-body-on-default);
}
.imageUpload .popupMenu .imageUpload-container {
color: var(--color-body-on-default);
}
.imageUpload .popupMenu .imageUpload-container--dialog--label {
display: block;
margin-bottom: 10px;
}
.imageUpload .popupMenu .imageUpload-container--imageDialog--sourceSelector {
float: right;
margin-left: 14px;
}
.imageUpload .popupMenu .imageUpload-container--imageDialog--sourceSelector.disabled {
color: #999999;
cursor: default;
}
.imageUpload .popupMenu .imageUpload-container--imageDialog--file {
margin-top: 16px;
margin-bottom: 5px;
display: flex;
justify-content: center;
flex-direction: column;
}
.imageUpload .popupMenu .imageUpload-container--imageDialog--file input[type="file"] {
display: none;
}
.imageUpload .popupMenu .imageUpload-container--imageDialog--file--item {
display: flex;
white-space: nowrap;
max-width: 240px;
background-color: var(--color-state-hover);
color: var(--color-gray-650);
border-radius: 4px;
padding: 5px 5px 5px 10px;
margin: 2px;
}
.imageUpload .popupMenu .imageUpload-container--imageDialog--file--item .iconNewCross {
flex: 1 0 auto;
}
.imageUpload .popupMenu .imageUpload-container--imageDialog--file--selected {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
flex: 0 1 auto;
}
.imageUpload .popupMenu .imageUpload-container--imageDialog--file--selectButton {
text-align: center;
}
.imageUpload .popupMenu .imageUpload-container--imageDialog--file--selectButton .submission-button {
display: inline-block;
}
.imageUpload .popupMenu .imageUpload-container--dialog--field {
margin-bottom: 15px;
}
/*# sourceMappingURL=ImagePopup.css.map */
.linkPopup {
position: fixed;
}
.linkPopup.hidden {
display: none;
}
.linkPopup .popupMenu {
position: absolute;
bottom: 30px;
left: -290px;
box-shadow: 0px 4px 17px var(--primary-box-shadow-color);
border-radius: 5px;
padding: 15px;
width: 260px;
background-color: var(--color-surface-dim);
color: var(--color-body-on-default);
}
.linkPopup-container-dialog--label {
display: block;
margin-bottom: 10px;
}
.linkPopup-container-dialog--field {
text-align: center;
max-height: 155px;
overflow-y: auto;
margin-bottom: 15px;
}
.linkPopup-container-dialog--field .validation-warning {
color: var(--color-signal-alert);
font-size: 11px;
clear: both;
text-align: right;
}
/*# sourceMappingURL=LinkPopup.css.map */
.editor-container {
height: 100%;
}
.editor-container .hide {
display: none;
}
.editor-container .rteEditor {
min-height: 200px;
padding: 12px 12px 60px 12px;
color: var(--color-body-on-default);
line-height: normal;
line-height: initial;
box-sizing: border-box;
font-size: 10pt;
position: relative;
}
.editor-container .rteEditor.inlineImageDropzone {
height: 100%;
border: 1px dashed var(--color-body-on-alternative);
}
.editor-container .rteEditor.inlineImageDropzone.active {
border: 1px dashed var(--color-primary);
}
.editor-container .rteEditor.inlineImageDropzone.inactive {
border: 1px dashed var(--color-body-on-alternative);
border-top: 1px dashed var(--color-primary);
}
.editor-container .rteEditor:focus {
outline: none;
}
.editor-container .rteEditor blockquote {
margin-right: 0;
margin-left: 0;
padding-left: 8px;
border-left: 2px solid var(--color-border-alt);
color: var(--color-body-on-alternative);
}
.editor-container .rteEditor p {
margin: 0px;
}
.editor-container .rteEditor ol,
.editor-container .rteEditor ul {
all: revert;
}
.editor-container .toolbarWrapper {
position: absolute;
bottom: 60px;
width: 100%;
}
.editor-container .toolbarWrapper .aiInputContainer {
padding: 0 12px 8px;
}
.composer.has-wrapped-actions-2 .editor-container .toolbarWrapper {
bottom: 100px;
}
.composer.has-wrapped-actions-3 .editor-container .toolbarWrapper {
bottom: 130px;
}
.editor-container .toolbarWrapper .autoCompleteDescription {
position: absolute;
left: 215px;
top: 17px;
transform: translate(0px, -50%);
z-index: 1;
padding: 54px 32px 32px;
border: 1px solid var(--color-border);
}
.editor-container .toolbarWrapper .autoCompleteDescription .leftArrow {
left: -9px;
border-left: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.editor-container .toolbarWrapper .autoCompleteDescription .arrow {
top: 50%;
transform: translate(0, -50%) rotate(45deg);
}
.editor-container .toolbarWrapper .autoCompleteDescription.top {
left: -10px;
bottom: 60px;
top: auto;
top: initial;
transform: none;
width: 235px;
}
.editor-container .toolbarWrapper .autoCompleteDescription.top .arrow {
top: 100%;
left: 50px;
transform: translate(-50%, -47%) rotate(315deg);
}
.editor-container .toolbarWrapper .autoCompleteDescription .head {
color: var(--color-body-on-default);
font-weight: 400;
margin: 0;
margin-bottom: 16px;
}
.editor-container .toolbarWrapper .autoCompleteDescription .description {
color: var(--color-body-on-default);
margin: 0;
}
.editor-container .composer-toolbar {
width: calc(100% - 24px);
}
.editor-container a:visited {
color: var(--color-state-active);
}
.editor-container a[href] {
text-decoration: underline;
color: var(--color-state-form-active);
}
/*# sourceMappingURL=RteEditor.css.map */
.rte-imagehandler,
.rte-linkhandler {
background: #f9f9f9;
position: relative;
z-index: 1;
min-width: 200px;
}
.rte-linkhandler {
border-radius: 4px;
word-break: break-all;
padding: 0px 5px;
margin-right: 20px;
background: var(--color-surface-dim);
color: var(--color-body-on-default);
width: -moz-fit-content;
width: fit-content;
}
.imagehandler--frame,
.linkhandler--frame {
background: var(--color-surface-dim);
color: var(--color-body-on-alternative);
cursor: pointer;
padding: 3px;
display: flex;
min-width: -moz-fit-content;
min-width: fit-content;
}
.imagehandler--sizeMenu,
.linkhandler--commandList {
list-style-type: none;
margin: 0;
padding-left: 3px;
}
.imagehandler--sizeMenuItem,
.linkhandler--command {
display: inline-block;
flex-direction: row;
}
.imagehandler--sizeMenuItemInactive {
display: none;
}
.imagehandler--command {
padding: 0 5px;
}
.imagehandler--command:hover {
cursor: pointer;
}
.imagehandler--commandSelected {
color: #999;
}
.imagehandler--commandSelected:hover {
color: #999;
}
li {
line-height: 18px;
}
.imagehandler--spacer,
.linkhandler--spacer {
padding: 0 5px;
color: #396fc9;
}
.editor-container .linkhandler--command .linkhandler--link {
color: #396fc9;
text-decoration: none;
cursor: pointer;
}
.linkhandler--link {
padding-left: 3px;
}
.linkhandler--link.wraplink {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
/*# sourceMappingURL=ImageHandler.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.gv-activated .gv-input-ai .aidaIconContainer {
align-self: center;
}
.gv-activated .gv-input-ai .textAreaContainer {
overflow: hidden !important;
}
.gv-activated .gv-input-ai .gv-input-textarea.textAreaContainer {
height: auto !important;
overflow: hidden !important;
}
.gv-activated .gv-input-ai .gv-input-textarea.textAreaContainer {
min-height: var(--size-xl);
}
.gv-activated .gv-input-ai .gv-input-textarea.textAreaContainer:hover {
border: 1px solid #cecece;
border: 1px solid var(--color-input-textarea-hover-border);
}
.gv-activated .gv-input-ai .gv-input-textarea.textAreaContainer[focus-within] {
border: 1px solid #0066aa;
border: 1px solid var(--color-state-form-active);
}
.gv-activated .gv-input-ai .gv-input-textarea.textAreaContainer[focus-within] {
border: 1px solid #0066aa;
border: 1px solid var(--color-state-form-active);
}
.gv-activated .gv-input-ai .gv-input-textarea.textAreaContainer:focus-within {
border: 1px solid #0066aa;
border: 1px solid var(--color-state-form-active);
}
.gv-activated .gv-input-ai .gv-input-textarea .gv-input-toolbar {
right: var(--size-sm);
top: 1px;
}
.gv-activated .gv-input-ai .gv-input-textarea.gv-input textarea {
min-height: var(--size-xl) !important;
padding: 14px var(--size-xl) 14px var(--size-sm) !important;
}
.gv-activated .gv-input-ai .gv-input-textarea.gv-input textarea {
height: var(--size-xl);
max-height: 240px;
line-height: 20px;
box-sizing: border-box;
resize: none;
overflow-y: hidden;
}
.gv-activated .gv-input-ai .gv-input-textarea.gv-input textarea::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.gv-activated .gv-input-ai .gv-input-textarea.gv-input textarea::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.gv-activated .gv-input-ai .gv-input-textarea.gv-input textarea::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.gv-activated .gv-input-ai .gv-input-textarea.gv-input textarea::-moz-placeholder {
line-height: 20px;
white-space: pre-wrap;
}
.gv-activated .gv-input-ai .gv-input-textarea.gv-input textarea::placeholder {
line-height: 20px;
white-space: pre-wrap;
}
.gv-activated .gv-input-ai .gv-input-textarea.gv-input textarea::-webkit-scrollbar-thumb {
background: #69686b;
background: var(--color-gray-500);
border: none;
}
.gv-activated .gv-input-ai .gv-input-textarea.gv-input textarea::-webkit-scrollbar-track {
background-color: #e2e2e2;
background-color: var(--color-gray-300);
border-radius: 7px;
}
[data-theme~="dark"] .gv-input-ai gv-icon svg {
filter: none;
}
/*# sourceMappingURL=InputAI.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.gv-activated {
/* Style wrapper specifically targetting parsed markdown */
}
.gv-activated .shape-with-ai-panel {
bottom: 0;
z-index: 100;
border-top: 1px solid #e2e2e2;
border-top: 1px solid var(--color-border-alt);
}
.gv-activated .shape-with-ai-panel_header {
border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .shape-with-ai-panel_header gv-icon svg {
height: 20px;
width: 20px;
}
.gv-activated .shape-with-ai-panel_wrapper {
height: 152px;
overflow-y: auto;
position: relative;
}
.gv-activated .shape-with-ai-panel_wrapper::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.gv-activated .shape-with-ai-panel_wrapper::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.gv-activated .shape-with-ai-panel_wrapper::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.gv-activated .shape-with-ai-panel_wrapper::-webkit-scrollbar-thumb {
background: #69686b;
background: var(--color-gray-500);
border: none;
}
.gv-activated .shape-with-ai-panel_wrapper::-webkit-scrollbar-track {
background-color: #e2e2e2;
background-color: var(--color-gray-300);
border-radius: 7px;
}
.gv-activated .shape-with-ai-panel_wrapper::before,
.gv-activated .shape-with-ai-panel_wrapper::after {
content: "";
position: sticky;
display: block;
height: 16px;
z-index: 1;
pointer-events: none;
}
.gv-activated .shape-with-ai-panel_wrapper::before {
top: 0;
margin-bottom: -24px;
transform: rotate(180deg);
background: linear-gradient(180deg, transparent 0%, #ffffff 83.33%);
background: linear-gradient(180deg, transparent 0%, var(--color-surface-bright) 83.33%);
}
.gv-activated .shape-with-ai-panel_wrapper::after {
bottom: 0;
margin-top: -24px;
background: linear-gradient(180deg, transparent 0%, #ffffff 83.33%);
background: linear-gradient(180deg, transparent 0%, var(--color-surface-bright) 83.33%);
}
.gv-activated .shape-with-ai-panel_wrapper[\:has\(.shape-with-ai-panel_error\)]::before {
display: none;
}
.gv-activated .shape-with-ai-panel_wrapper:has(.shape-with-ai-panel_error)::before {
display: none;
}
.gv-activated .shape-with-ai-panel_loader span {
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--color-primary);
animation: shape-ai-dot-pulse 1.2s ease-in-out infinite;
opacity: 0.4;
}
.gv-activated .shape-with-ai-panel_loader span:nth-child(1) {
animation-delay: 0s;
}
.gv-activated .shape-with-ai-panel_loader span:nth-child(2) {
animation-delay: 0.2s;
}
.gv-activated .shape-with-ai-panel_loader span:nth-child(3) {
animation-delay: 0.4s;
}
.gv-activated .shape-with-ai-panel_generated {
overflow: visible;
height: auto;
}
.gv-activated .shape-with-ai-panel_generated-text {
white-space: normal;
}
.gv-activated .shape-with-ai-panel.close-rejected {
animation: horizontal-shake 0.5s ease-in-out;
}
.gv-activated .bottomPos {
bottom: -42px;
}
.gv-activated .markdown-status-container {
line-height: 1.5;
}
.gv-activated .markdown-status-container p {
margin: 0 0 1em;
}
.gv-activated .markdown-status-container p:last-child {
margin-bottom: 0;
}
.gv-activated .markdown-status-container blockquote {
margin-right: 0;
margin-left: 0;
padding-left: 8px;
border-left: 2px solid #e2e2e2;
border-left: 2px solid var(--color-border-alt);
color: #69686b;
color: var(--color-body-on-alternative);
}
.gv-activated .markdown-status-container a {
text-decoration: underline;
color: #0066aa;
color: var(--color-state-form-active);
}
.gv-activated .markdown-status-container a:visited {
color: var(--color-state-active);
}
.gv-activated .markdown-status-container h1 {
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
}
.gv-activated .markdown-status-container h2 {
font-size: 1.5em;
font-weight: bold;
margin: 0.83em 0;
}
.gv-activated .markdown-status-container h3 {
font-size: 1.17em;
font-weight: bold;
margin: 1em 0;
}
.gv-activated .markdown-status-container h4 {
font-size: 1em;
font-weight: bold;
margin: 1.33em 0;
}
.gv-activated .markdown-status-container h5 {
font-size: 0.83em;
font-weight: bold;
margin: 1.67em 0;
}
.gv-activated .markdown-status-container h6 {
font-size: 0.67em;
font-weight: bold;
margin: 2.33em 0;
}
.gv-activated .markdown-status-container hr {
border: none;
border-top: 1px solid #e2e2e2;
border-top: 1px solid var(--color-border-alt);
margin: 0.5em 0;
}
.gv-activated .markdown-status-container ul,
.gv-activated .markdown-status-container ol {
padding-left: 1.5rem;
margin: 0.25em 0;
}
.gv-activated .markdown-status-container ul {
list-style-type: disc;
}
.gv-activated .markdown-status-container ol {
list-style-type: decimal;
}
.gv-activated .markdown-status-container li {
display: list-item;
margin: 0.15rem 0;
}
@keyframes shape-ai-dot-pulse {
0% {
opacity: 1;
}
33% {
opacity: 0.7;
}
66% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
@keyframes horizontal-shake {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-5px);
}
40% {
transform: translateX(5px);
}
60% {
transform: translateX(-5px);
}
80% {
transform: translateX(5px);
}
100% {
transform: translateX(0);
}
}
[data-theme~="dark"] .shape-with-ai-panel gv-icon svg {
filter: none;
}
/*# sourceMappingURL=ShapeWithAIPanel.css.map */
.cancelIcon {
background: transparent;
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center center;
padding: 0px;
border: none;
cursor: pointer;
z-index: 1;
}
.aidaIcon {
position: absolute;
top: 23px;
display: flex;
align-items: center;
gap: 3px;
width: 52px;
height: 16px;
background-image: var(--aida-logo);
}
.autoComposeBtn {
display: flex;
width: -moz-fit-content;
width: fit-content;
align-items: center;
margin-left: 20px;
position: absolute;
bottom: 71px;
z-index: 1;
}
.autoComposeBtn .hollowButton-small-blue {
display: flex;
align-items: center;
box-shadow: var(--color-surface-bright) 0px 0px 0px 3px;
background: var(--color-surface-bright);
}
.autoComposeBtn .hollowButton-small-blue .chatBotIcon {
margin-right: 6px;
position: relative;
width: 24px;
height: 24px;
fill: var(--color-primary);
}
.autoComposeBtn .hollowButton-small-blue.focus-visible {
outline: none;
}
.autoComposeBtn .hollowButton-small-blue:focus-visible {
outline: none;
}
.rte-tools {
width: 100%;
position: relative;
}
[data-theme~="dark"] .autoComposeBtn .hollowButton-small-blue {
color: var(--color-body-on-default);
border-color: var(--color-primary);
border-color: var(--color-button-bg-primary, var(--color-primary));
}
[data-theme~="dark"] .autoComposeBtn .hollowButton-small-blue .chatBotIcon {
fill: #ffffff;
}
[data-theme~="dark"] .autoComposeBtn .hollowButton-small-blue .chatBotIcon svg {
filter: none;
}
/*# sourceMappingURL=AutoComposeButton.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.autoComposePopup {
width: 100%;
position: fixed;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.65);
z-index: 99999;
overflow: auto;
display: flex;
}
.autoComposePopup .gravity-icon-wrapper:first-child {
background-size: 13px 13px;
position: absolute;
top: 24px;
right: 22px;
cursor: pointer;
z-index: 11;
}
.autoComposePopup .desc-header {
display: flex;
cursor: pointer;
}
.autoComposePopup .desc-header .gravity-icon-wrapper {
position: relative;
top: 3px;
background-size: 16px 16px;
transform: rotate(180deg);
}
.autoComposePopup .desc-header .gravity-icon-wrapper svg path {
transform: scale(1.5);
transform-origin: top;
}
.autoComposePopup .desc-header .active-desc {
transform: rotate(180deg);
}
.autoComposePopup .desc-header > span {
flex: 4;
}
.autoComposePopup-container {
max-width: 700px;
background: #ffffff;
background: var(--color-surface-bright);
position: relative;
margin: auto;
}
.autoComposePopup-container-box {
padding: 45px 48px 24px 48px;
min-width: 600px;
position: relative;
z-index: 10;
}
.autoComposePopup-container-box-form {
display: flex;
flex-direction: column;
}
.autoComposePopup-container-box-form .heading {
display: inline-flex;
color: #141414;
color: var(--color-body-on-default);
}
.autoComposePopup-container-box-form .heading .aidaIcon {
position: relative;
margin: 9px 0 9px 8px;
}
.autoComposePopup-container-box-form .containerScrollbar {
width: 624px;
height: 534px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
.autoComposePopup-container-box-form .containerScrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.autoComposePopup-container-box-form .containerScrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.autoComposePopup-container-box-form .containerScrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.autoComposePopup-container-box-form-details {
display: flex;
flex-direction: column;
margin-right: 24px;
gap: 8px;
}
.autoComposePopup-container-box-form-details .description {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.25px;
font-weight: var(--font-weight-light-bold);
display: flex;
flex-direction: column;
padding: 8px 0px;
border-bottom: 1px solid #cecece;
max-width: 600px;
margin-bottom: 16px;
}
.autoComposePopup-container-box-form-details .description p {
margin-top: 16px;
}
.autoComposePopup-container-box-form-details .description > span {
margin-top: 16px;
}
.autoComposePopup-container-box-form-details .description > span a {
color: #0066aa;
color: var(--color-state-form-active);
text-decoration: underline;
font-weight: 500;
font-weight: var(--button-font-weight);
}
.autoComposePopup-container-box-form-details .langAndGender selection-dropdown:first-child {
margin-right: 24px;
}
.autoComposePopup-container-box-form-details .tonalityOptions {
display: flex;
width: 100%;
}
.autoComposePopup-container-box-form-details .tonalityOptions .langSelect {
margin-right: 24px;
}
.autoComposePopup-container-box-form-details .tonalityOptions .selection-dropdown .dropdown-input {
box-sizing: border-box;
position: relative;
height: 35px;
margin: auto;
cursor: pointer;
border: 1px solid #cccccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
padding: 4px 6px;
}
.autoComposePopup-container-box-form-details .tonalityOptions .selection-dropdown .dropdown-input .gravity-icon-wrapper .keyboard_arrow_up {
cursor: inherit;
}
.autoComposePopup-container-box-form-details .tonalityOptions .selection-dropdown .dropdown-input span {
display: block;
padding: 3px 5px;
}
.autoComposePopup-container-box-form-details .tonalityOptions .selection-dropdown .popupDropdown.dropdown-list {
z-index: 99999;
width: 100%;
margin-top: 5px;
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
}
.autoComposePopup-container-box-form-details .tonalityOptions .chevron-down {
filter: brightness(0);
transform: rotate(180deg);
height: 12px;
width: 12px;
border: none;
top: 8px;
right: 0px;
position: absolute;
margin-right: 10px;
flex: 0 0 auto;
}
.autoComposePopup-container-box-form-details .tonalityOptions .SelectDropdown .Dropdown {
width: 100%;
border: 1px solid #cccccc;
box-sizing: border-box;
position: relative;
height: 35px;
margin: auto;
cursor: pointer;
color: #141414;
color: var(--color-body-on-default);
border-radius: 4px;
background-color: #ffffff;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
font-size: 12px;
line-height: 18px;
padding: 4px 6px;
display: inline-block;
}
.autoComposePopup-container-box-form-details .tonalityOptions .SelectDropdown .Dropdown-button {
border: none;
gap: 8px;
align-items: center;
}
.autoComposePopup-container-box-form-details .tonalityOptions .SelectDropdown .Dropdown-button .SelectDropdown-control {
color: #69686b;
color: var(--color-body-on-alternative);
position: relative;
font-weight: 400;
font-weight: var(--normal-font-weight);
font-size: 12px;
}
.autoComposePopup-container-box-form-details .tonalityOptions .SelectDropdown .Dropdown-button .SelectDropdown-control.expanded {
padding-left: 0;
}
.autoComposePopup-container-box-form-details .tonalityOptions .SelectDropdown .Dropdown-button .Icon {
position: relative;
}
.autoComposePopup-container-box-form-details .tonalityOptions .SelectDropdown .Dropdown-content {
border-radius: 4px;
background: #ffffff;
background: var(--color-surface-bright);
box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.1);
}
.autoComposePopup-container-box-form-details .tonalityOptions .SelectDropdown .Dropdown-content ul {
min-width: 276px;
padding: 10px 5px;
margin-top: 1px;
box-shadow: 0px 4px 16px rgba(60, 60, 60, 0.1);
border-radius: 4px;
border: 1px solid #bbbbbb;
max-height: 336px;
}
.autoComposePopup-container-box-form-details .tonalityOptions .SelectDropdown .Dropdown-content ul li {
padding: 5px 15px;
margin: 0;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
justify-content: space-between;
font-size: 12px;
clear: both;
font-weight: normal;
cursor: pointer;
position: relative;
}
.autoComposePopup-container-box-form-details .tonalityOptions .SelectDropdown .Dropdown-content ul li:hover {
background-color: var(--color-state-hover);
}
.autoComposePopup-container-box-form-details .tonalityOptions .SelectDropdown .Dropdown-content ul li .active {
background: none;
}
.autoComposePopup-container-box-form-details .tonalityOptions .SelectDropdown .Dropdown .DropdownAnimationWrapper {
z-index: 99;
min-width: 276px;
}
.autoComposePopup-container-box-form-details .tonalityOptions label {
color: #141414;
color: var(--color-body-on-default);
margin-bottom: 4px;
}
.autoComposePopup-container-box-form-details .tonalityOptions .disabled-Dropdown label,
.autoComposePopup-container-box-form-details .tonalityOptions .disabled-Dropdown > div,
.autoComposePopup-container-box-form-details .tonalityOptions .disabled-Dropdown .selection-dropdown,
.autoComposePopup-container-box-form-details .tonalityOptions .disabled-Dropdown .dropdown-input,
.autoComposePopup-container-box-form-details .tonalityOptions .disabled-Dropdown .Dropdown {
cursor: not-allowed;
color: #bbbbbb;
}
.autoComposePopup-container-box-form-details .languageDropdown {
width: 100%;
display: flex;
flex-direction: column;
}
.autoComposePopup-container-box-form-details .textareaContainer {
position: relative;
width: 595px;
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
border-radius: 4px;
}
.autoComposePopup-container-box-form-details .error-Border {
border: 1px solid #b30016;
border: 1px solid var(--color-signal-alert);
}
.autoComposePopup-container-box-form-details textarea,
.autoComposePopup-container-box-form-details .overlayContainer {
overflow: hidden;
min-height: 200px;
box-sizing: border-box;
border: none;
padding: 10px 20px;
font-size: 16px;
letter-spacing: 0.5px;
line-height: 24px;
font-weight: 400;
font-weight: var(--font-weight-light-bold);
outline: none;
}
.autoComposePopup-container-box-form-details textarea {
position: relative;
width: 595px;
z-index: 1;
margin: 0;
height: auto;
resize: none;
color: #141414;
color: var(--color-body-on-default);
background-color: transparent;
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.autoComposePopup-container-box-form-details textarea::-moz-placeholder {
font-size: 16px;
font-weight: 400;
font-weight: var(--font-weight-light-bold);
color: #69686b;
color: var(--color-body-on-alternative);
}
.autoComposePopup-container-box-form-details textarea::placeholder {
font-size: 16px;
font-weight: 400;
font-weight: var(--font-weight-light-bold);
color: #69686b;
color: var(--color-body-on-alternative);
}
.autoComposePopup-container-box-form-details textarea.error-text {
border: 1px solid #b30016;
border: 1px solid var(--color-signal-alert);
}
.autoComposePopup-container-box-form-details .overlayContainer {
position: absolute;
top: 0px;
left: 1px;
width: 100%;
white-space: pre-wrap;
line-height: 24px;
color: transparent;
word-wrap: break-word;
pointer-events: none;
z-index: 0;
}
.autoComposePopup-container-box-form-details .highlight {
background-color: var(--color-state-hover);
}
.autoComposePopup-container-box-form-details .showInfo p {
position: relative;
margin: 0px;
margin-bottom: 4px;
line-height: 22px;
color: #141414;
color: var(--color-body-on-default);
font-size: 14px;
}
.autoComposePopup-container-box-form-details .showInfo .errorMessage {
font-size: 14px;
color: #b30016;
color: var(--color-signal-alert);
line-height: 22px;
letter-spacing: 0.25px;
flex: 1 0 auto;
width: 534px;
}
.autoComposePopup-container-box-form-details .showInfo .errorContainer {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 8px;
}
.autoComposePopup-container-box-form-details .showInfo .errorContainer .charCount {
flex: 1 1 auto;
text-align: right;
margin-top: 4px;
color: #141414;
color: var(--color-body-on-default);
}
.autoComposePopup-container-box-form-details .showInfo .errorContainer .error-text {
color: #b30016;
color: var(--color-signal-alert);
}
.autoComposePopup-container-box-form-details .showInfo .error-text {
height: auto;
padding: 0;
color: #b30016;
color: var(--color-signal-alert);
}
.autoComposePopup-container-box-form-details .label {
display: flex;
margin: 0px;
flex-direction: column;
width: -moz-fit-content;
width: fit-content;
}
.autoComposePopup-container-box-form-details .label > div {
display: flex;
align-items: center;
}
.autoComposePopup-container-box-form-details .label > div input {
margin: 0;
margin-right: 8px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 14px;
height: 14px;
z-index: 9;
cursor: pointer;
background-size: 20px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(//mail.group-cdn.one/v51.1.15/media/checkbox-outline.ada8556a.svg);
}
.autoComposePopup-container-box-form-details .label > div input:checked {
background-image: url(//mail.group-cdn.one/v51.1.15/media/check-box.8f8b4515.svg);
}
.autoComposePopup-container-box-form-details .label > div input.error-text {
border: 1px solid #b30016;
border: 1px solid var(--color-signal-alert);
padding: 0;
}
.autoComposePopup-container-box-form-details .label > div .gravity-icon-wrapper {
position: absolute;
}
.autoComposePopup-container-box-form-details .label > div p {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
margin: 0;
font-weight: var(--font-weight-light-bold);
letter-spacing: 0.25px;
}
.autoComposePopup-container-box-form-details .label > div p a {
color: #0066aa;
color: var(--color-state-form-active);
font-weight: 500;
font-weight: var(--button-font-weight);
text-decoration: underline;
}
.autoComposePopup-container-box-form-details .label > div p a:hover {
color: #0066aa;
color: var(--color-state-form-active);
}
.autoComposePopup-container-box-form-details .label .errorMessage {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
color: #b30016;
color: var(--color-signal-alert);
line-height: 22px;
}
.autoComposePopup-container-box-buttons {
margin-top: 24px;
}
.autoComposePopup-container-box-buttons button {
cursor: pointer;
padding: 12px 24px;
border: none;
border-radius: 4px;
margin-right: 16px;
}
.autoComposePopup-container-box-buttons button.cancel {
color: #141414;
color: var(--color-body-on-default);
background: transparent;
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
}
.autoComposePopup-container-box-buttons button.submit {
color: #ffffff;
color: var(--color-button-fg-on-primary, #ffffff);
background-color: var(--color-primary);
background-color: var(--color-button-bg-primary, var(--color-primary));
}
.autoComposePopup-container-error {
padding: 46px 48px 48px 48px;
}
.autoComposePopup-container-error .robo-illustration {
width: 72px;
height: 72px;
display: flex;
}
.autoComposePopup-container-error h1 {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
font-size: 24px;
letter-spacing: 0.15px;
line-height: 30px;
margin: 0;
margin-top: 16px;
}
.autoComposePopup-container-error p {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
line-height: 22px;
font-size: 14px;
margin: 0;
margin-top: 16px;
}
.autoComposePopup-container .autoComposeDropdownCheck .popupDropdown.dropdown-list {
min-width: 590px;
width: 100%;
}
.writingAssistantLoadText {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.writingAssistantLoadText .autoComposeLoader {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--color-state-hover);
width: 100%;
height: 100%;
}
@media (max-height: 720px) {
.autoComposePopup-container-box-form .containerScrollbar {
height: auto;
}
.autoComposePopup-container-box-form-details {
height: 340px;
}
}
[data-theme~="dark"] .autoComposePopup-container-box-form-details .tonalityOptions .dropdown-input {
background-color: #f7f7f7;
background-color: var(--color-surface-dim);
border: none;
font-weight: 600;
}
[data-theme~="dark"] .autoComposePopup-container-box-form-details .showInfo p {
font-weight: 600;
}
[data-theme~="dark"] .autoComposePopup .disabled-Dropdown {
opacity: 0.5;
font-weight: 600;
}
[data-theme~="dark"] .autoComposePopup .textareaContainer {
background-color: #f7f7f7;
background-color: var(--color-surface-dim);
border: 1px solid #ffffff;
border: 1px solid var(--color-surface-bright);
}
[data-theme~="dark"] .autoComposePopup .error-Border {
border: 1px solid #b30016;
border: 1px solid var(--color-signal-alert);
}
[data-theme~="dark"] .autoComposePopup textarea {
border: none;
background-color: transparent;
}
[data-theme~="dark"] .autoComposePopup textarea.error-text {
border: 1px solid #b30016;
border: 1px solid var(--color-signal-alert);
}
[data-theme~="dark"] .autoComposePopup .highlight {
background-color: var(--color-state-hover);
}
[data-theme~="dark"] .autoComposePopup .charCount {
margin-top: 4px;
}
[data-theme~="dark"] .autoComposePopup .label input.error-text {
border: 1px solid #b30016;
border: 1px solid var(--color-signal-alert);
}
[data-theme~="dark"] .autoComposePopup .heading .beta {
padding: 2px 8px;
font-weight: 400;
font-weight: var(--font-weight-light-bold);
border: 1px solid #141414;
border: 1px solid var(--color-body-on-default);
background: var(--chip-invalid-bg);
}
[data-theme~="dark"] .autoComposePopup button {
font-weight: 400;
font-weight: var(--font-weight-light-bold);
}
[data-theme~="dark"] .autoComposePopup .robo-illustration {
background-image: url(//mail.group-cdn.one/v51.1.15/media/robo_dark.60d1e004.svg);
}
[data-theme~="dark"] .autoComposePopup .errorMessage {
color: #b30016;
color: var(--color-signal-alert);
}
[data-theme~="dark"] .autoComposePopup .writingAssistantLoadText {
background-color: rgba(14, 13, 16, 0.75);
}
/*# sourceMappingURL=AutoComposeModal.css.map */
.selection-dropdown .dropdown-input {
width: 100%;
height: 30px;
position: absolute;
color: var(--color-body-on-default);
border-radius: 4px;
background-color: #ffffff;
}
.selection-dropdown .dropdown-input .gravity-icon-wrapper,
.selection-dropdown .dropdown-input .chevronIcon {
transform: rotate(180deg);
height: 12px;
width: 12px;
border: none;
top: 13px;
right: -6px;
position: absolute;
margin-right: 10px;
flex: 0 0 auto;
}
.selection-dropdown .disabledDropdown {
pointer-events: none;
color: #bbbbbb;
opacity: 0;
}
.selection-dropdown .dropdownLabel {
padding-left: 30px;
padding-right: 10px;
}
.selection-dropdown .content {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
.selection-dropdown .dropdown-container {
position: fixed;
z-index: 9;
}
.popupDropdown.dropdown-list {
min-width: 276px;
padding: 10px 5px;
margin-top: 1px;
box-shadow: 0px 4px 16px rgba(60, 60, 60, 0.1);
border-radius: 4px;
border: 1px solid #bbbbbb;
max-height: 336px;
position: absolute;
z-index: 9999;
background-color: white;
}
.popupDropdown.dropdown-list .selector-dropdown-item {
padding: 5px 15px;
margin: 0;
width: auto;
display: flex;
justify-content: space-between;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.popupDropdown.dropdown-list .selector-dropdown-item .check-mark {
width: 16px;
display: block;
height: 16px;
}
.popupDropdown.dropdown-list .dropdown-item {
cursor: pointer;
}
.popupDropdown.dropdown-list .dropdown-item .list-item {
padding-left: 0;
border: none;
min-height: 0;
}
.popupDropdown.dropdown-list .dropdown-item .list-item:hover {
background-color: var(--color-state-hover);
}
.popupDropdown.dropdown-list .dropdown-item:hover {
border-radius: 4px;
background-color: var(--color-state-hover);
}
[data-theme~="dark"] .Dropdown .DropdownAnimationWrapper .Dropdown-content ul {
background-color: var(--color-surface-bright);
padding: 10px 5px;
margin-top: 1px;
box-shadow: 0px 4px 16px rgba(60, 60, 60, 0.1);
border-radius: 4px;
}
[data-theme~="dark"] li:hover {
border-radius: 4px;
background-color: var(--color-state-hover);
}
[data-theme~="dark"] .selection-dropdown .dropdown-input {
background-color: var(--color-surface-dim);
border: none;
}
[data-theme~="dark"] .selection-dropdown .dropdown-input .caret,
[data-theme~="dark"] .selection-dropdown .dropdown-input .chevronIcon {
filter: invert(100%) brightness(250%) contrast(100%);
}
/*# sourceMappingURL=CheckmarkDropdown.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 700;
--font-weight-bolder: 600;
--font-weight-light-bold: 500;
--color-theme-picker-border: none;
--accordian-font-weight: 500;
--toggleSwitch-font: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 700;
--mailFilter-group: 500;
--linkToOldMail: 600;
--help-text: 500;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 700;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 500;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 500;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 500;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 500;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
html {
--size-xs: 4px;
--size-sm: 8px;
--size-md: 16px;
--size-lg: 24px;
--size-xl: 32px;
--size-xxl: 48px;
}
.header-xxxl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: 700;
letter-spacing: 0;
line-height: 78px;
}
.header-xxl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 48px;
font-weight: 700;
letter-spacing: 0;
line-height: 62px;
}
.header-xl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 40px;
font-weight: 700;
letter-spacing: 0.1px;
line-height: 52px;
}
.header-lg {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 32px;
font-weight: 700;
letter-spacing: 0.05px;
line-height: 39px;
}
.header-md {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.04px;
line-height: 36px;
}
.header-sm {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 700;
letter-spacing: 0.04px;
line-height: 31px;
}
.header-xs {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.03px;
line-height: 26px;
}
.text-xl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 400;
letter-spacing: 0;
line-height: 36px;
}
.text-xl.bold {
font-weight: 600;
}
.text-lg {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0;
line-height: 27px;
}
.text-lg.bold {
font-weight: 600;
}
.text-md {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.08px;
line-height: 24px;
}
.text-md.bold {
font-weight: 600;
}
.text-sm {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04px;
line-height: 21px;
}
.text-sm.bold {
font-weight: 600;
}
.caption-lg {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.05px;
line-height: 18px;
}
.caption-lg.bold {
font-weight: 600;
}
.caption-sm {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.05px;
line-height: 15px;
}
.caption-sm.bold {
font-weight: 600;
}
.composer {
position: relative;
margin: 0px 10px 10px 10px;
height: 100%;
background: #ffffff;
background: var(--color-surface-bright);
border-radius: 4px;
display: flex;
flex-direction: column;
}
.composer:focus {
outline: none;
}
.composer .scrollable {
overflow-y: auto;
height: calc(100% - 120px);
display: flex;
flex-direction: column;
}
.composer .scrollable::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.composer .scrollable::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.composer .scrollable::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.composer .scrollable:focus {
outline: none;
}
.composer .scrollable .summaryInComposer {
padding-left: 16px;
padding-left: var(--size-md);
}
.composer .composer-actions {
width: 100%;
flex-wrap: wrap;
}
.composer .composer-actions gv-icon svg {
filter: none;
}
.composer .composer-actions .editWithAIBtn {
overflow: clip;
}
.composer .recipientContainer {
position: relative;
}
.composer .recipientContainer .recipientInput {
display: flex;
min-height: 45px;
border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid var(--color-border-alt);
padding: 0px 20px;
position: relative;
}
.composer .recipientContainer .recipientInput input {
color: #141414;
color: var(--color-body-on-default);
flex: 1;
gap: 20px;
width: 100%;
min-height: 24px;
margin: 11px 0 8px 10px;
overflow: hidden;
text-overflow: ellipsis;
background: #ffffff;
background: var(--color-surface-bright);
border: none;
}
.composer .recipientContainer .recipientInput input:focus {
border: none;
outline: none;
}
.composer .recipientContainer .recipientInput .recipientsField {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput {
margin-left: 10px;
padding: 10px 0px;
gap: 5px;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .RecipientInput {
padding-top: 0px;
width: 100%;
margin: 0px;
flex: 1 0;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .RecipientInput input {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04px;
line-height: 21px;
margin: 0px;
padding: 0px;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .Recipient {
padding: 4px 12px;
display: flex;
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
border-radius: 50px;
align-items: center;
margin: 0px;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .Recipient .gravity-icon-wrapper {
display: flex;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .Recipient .gravity-icon-wrapper .cancelAutoCompleteIcon {
display: flex;
justify-content: center;
align-items: center;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .Recipient .gravity-icon-wrapper .cancelAutoCompleteIcon svg path {
transform: scale(1.2);
transform-origin: center;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .Recipient .address {
margin-right: 3px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #141414;
color: var(--color-body-on-default);
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .Recipient-RemoveIcon {
cursor: pointer;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
background-size: 10px;
top: auto;
top: initial;
align-self: initial;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .Recipient.invalid {
background-color: #f7f7f7;
background-color: var(--color-surface-dim);
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .Recipient.invalid .address {
color: #b30016;
color: var(--color-signal-alert);
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .Recipient.invalid .gravity-icon-wrapper {
display: flex;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .Recipient.invalid .gravity-icon-wrapper .cancelAutoCompleteIcon {
display: flex;
justify-content: center;
align-items: center;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .Recipient.invalid .gravity-icon-wrapper .cancelAutoCompleteIcon svg {
width: 12px;
height: 16px;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientsInput .Recipient.invalid .gravity-icon-wrapper .cancelAutoCompleteIcon svg path {
transform: scale(1.6);
transform-origin: center;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientSuggestions {
position: absolute;
z-index: 2;
padding: 10px 0px;
background-color: #ffffff;
background-color: var(--color-surface-bright);
box-shadow: 0px 4px 17px 0px rgba(0,0,0,0.10196);
border-radius: 4px;
width: 100%;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientSuggestions mark {
color: #0066aa;
color: var(--color-state-form-active);
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientSuggestions ul {
list-style: none;
background-color: #ffffff;
background-color: var(--color-surface-bright);
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result {
display: flex;
justify-content: space-between;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result span {
line-height: 14px;
font-size: 12px;
display: flex;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result span:first-child {
margin-bottom: 1px;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientSuggestions ul .RecipientSuggestionRow .suggestion-result span mark {
color: var(--color-primary);
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientSuggestions ul .RecipientSuggestionRow .displayName span {
font-size: 14px;
}
.composer .recipientContainer .recipientInput .recipientsField .RecipientSuggestions ul .RecipientSuggestionRow:hover {
background-color: var(--color-state-hover);
}
.composer .recipientContainer .attachmentDropzone {
background-color: rgba(246, 246, 246, 0.5);
background-color: var(--attachmentDropzoneBgInactive);
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 15px;
line-height: 24px;
gap: 5px;
border: 1px dashed #69686b;
border: 1px dashed var(--color-body-on-alternative);
border-bottom: none;
pointer-events: none;
box-sizing: border-box;
}
.composer .recipientContainer .attachmentDropzone.hide {
display: none;
}
.composer .recipientContainer .attachmentDropzone.active {
background-color: rgba(0, 120, 200, 0.05);
background-color: var(--attachmentDropzoneBgActive);
border: 1px dashed var(--color-primary);
border-bottom: none;
}
.composer-to {
color: #3a383e;
color: var(--invite-date-color);
margin-top: 14px;
}
.composer-cc,
.composer-bcc {
cursor: pointer;
padding-left: 5px;
color: #0066aa;
color: var(--color-state-form-active);
margin-top: 14px;
}
.composer-actions {
width: calc(100% - 40px);
display: flex;
flex-direction: row;
padding: 14px 20px;
position: absolute;
bottom: 0px;
gap: 10px;
background: #ffffff;
background: var(--color-surface-bright);
border-radius: 4px;
}
.composer-actions button {
display: flex;
align-items: center;
padding: 0px 25px;
line-height: 30px;
font-weight: 500;
font-weight: var(--button-font-weight);
}
.composer-actions button .sent-icon svg {
fill: white;
fill: var(--button-color-text, white);
}
.composer-actions button .sent-icon svg {
filter: none;
}
.composer-actions button.discard {
border: 1px solid var(--color-primary);
border: 1px solid var(--color-button-bg-primary, var(--color-primary));
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
font-weight: var(--button-font-weight);
background: #ffffff;
background: var(--color-surface-bright);
}
.composer .with-terms-checkbox {
border-radius: var(--border-radius);
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
}
.composer .with-terms-checkbox .toolbar-options {
border: none;
box-shadow: none;
}
.composer .draftContentLoading {
width: 100%;
height: 100%;
}
.streamingOverlay {
width: 100%;
height: 100%;
position: fixed;
z-index: 99999999;
left: 0;
top: 0;
}
/*# sourceMappingURL=Composer.css.map */
.composer-actions .emailTemplates .gv-modal .gv-modal-content .gv-modal-body .gv-tab-list {
margin-bottom: 16px;
}
.composer-actions .emailTemplates .gv-modal .gv-modal-content .gv-modal-body .gv-tab-panel .overwrite-list {
max-height: 138px;
}
.composer-actions .emailTemplates .gv-modal .gv-modal-content .gv-modal-body .gv-tab-panel .overwrite-list .template-name {
height: 46px;
}
.composer-actions .emailTemplates .chooseTemplateModal .gv-modal-body .gv-modal-title {
margin-bottom: var(--size-lg) !important;
}
.composer-actions .emailTemplates .chooseTemplateModal .gv-modal-body div .gv-action {
margin-bottom: var(--size-lg);
padding: 0 var(--size-md);
}
.composer-actions .emailTemplates .chooseTemplateModal .gv-modal-body div .gv-action gv-icon svg {
fill: var(--color-state-form-active);
}
.composer-actions .emailTemplates .chooseTemplateModal .templates-list {
max-height: 168px;
}
.composer-actions .emailTemplates .chooseTemplateModal .templates-list .template-row {
padding: 0 var(--size-md) !important;
}
.composer-actions .emailTemplates .chooseTemplateModal .template-row {
font-weight: var(--font-weight-regular);
height: 56px;
}
.composer-actions .emailTemplates .emailTemplates-menu {
bottom: 100%;
right: 0;
width: 100%;
max-width: 250px;
min-width: 250px;
}
.composer-actions .emailTemplates .emailTemplates-menu .gv-menu {
gap: 10px;
padding: 10px 0;
}
.composer-actions .emailTemplates .emailTemplates-menu .gv-tooltip-text {
width: 100%;
word-wrap: break-word;
display: block;
}
.composer-actions .emailTemplates .emailTemplates-menu .gv-menu-item {
font-weight: var(--font-weight-light-bold);
padding: 1px 20px;
}
.composer-actions .emailTemplates .emailTemplates-menu .gv-menu-item.gv-disabled,
.composer-actions .emailTemplates .emailTemplates-menu .gv-menu-item:disabled {
cursor: auto;
opacity: var(--opacity-disabled-elements);
pointer-events: none;
}
.composer-actions .emailTemplates .emailTemplates-menu .emailTemplates-menu-title {
padding: 1px 20px;
}
.composer-actions .emailTemplates .emailTemplates-menu .emailTemplates-menu-empty:hover {
background-color: transparent;
}
.VerticalSplit.splitter-layout.mailSection > .layout-pane.layout-pane-primary[\:has\(.emailTemplates-menu\)] {
overflow: visible;
}
.VerticalSplit.splitter-layout.mailSection > .layout-pane.layout-pane-primary:has(.emailTemplates-menu) {
overflow: visible;
}
/*# sourceMappingURL=EmailTemplates.css.map */
.gv-activated .template-name .radioMinWidth {
min-width: 16px;
}
/*# sourceMappingURL=SaveTemplateModal.css.map */
.composerSection {
position: absolute;
width: 100%;
height: 100%;
}
.composerSection .hidden {
display: none;
}
.composerSection .composerWrapper {
height: 100%;
}
.composerSection .draftListContainer {
display: flex;
margin: 0;
padding: 0 14px;
}
.composerSection .draftListContainer .draft {
box-sizing: border-box;
padding: 0 1rem;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-right: 2px;
position: relative;
min-width: 197px;
width: 197px;
height: 34px;
line-height: 34px;
cursor: pointer;
overflow: hidden;
background: var(--color-state-hover);
border-radius: 4px 4px 0px 0px;
border: 1px solid var(--color-border-alt);
color: var(--color-body-on-default);
font-weight: var(--font-weight-bold);
}
.composerSection .draftListContainer .draft-title-holder {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.composerSection .draftListContainer .draft-title {
position: absolute;
left: 35px;
right: 35px;
top: 0;
bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.composerSection .draftListContainer .draft.active {
background: var(--color-surface-bright);
}
.composerSection .draftListContainer .show-more {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 5px;
width: 99px;
cursor: pointer;
line-height: 34px;
height: 34px;
padding: 0 1em;
background: var(--color-state-hover);
border-radius: 4px 4px 0px 0px;
border: 1px solid var(--color-border-alt);
color: var(--color-body-on-default);
font-weight: var(--font-weight-bold);
margin: 0;
justify-content: space-between;
position: absolute;
}
.composerSection .draftListContainer .show-more-text-container {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.composerSection .draftListContainer .show-more .chevronIcon {
transform: rotate(0deg);
}
.composerSection .draftListContainer .show-more .mail-tab-list {
position: absolute;
width: 214px;
bottom: 40px;
right: 0px;
z-index: 999;
background: var(--color-surface-bright);
box-shadow: 0px 1px 17px rgba(0, 0, 0, 0.1);
border-radius: 4px;
padding: 10px 0;
color: var(--color-body-on-default);
border: 1px solid var(--sub-menus-border-color);
display: flex;
flex-direction: column;
gap: 10px;
}
.composerSection .draftListContainer .show-more .mail-tab-list .draft {
border: none;
background: none;
width: 100%;
}
.composerSection .draftListContainer .show-more .mail-tab-list .draft:hover {
background-color: var(--color-state-hover);
}
.composerSection .actionText {
width: 100%;
font-size: 24px;
color: #cfcdcd;
font-weight: 400;
text-align: center;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
/*# sourceMappingURL=ComposerWrapper.css.map */
.draftListContainer {
display: flex;
margin: 0;
padding: 0 14px;
position: absolute;
flex: 1 0 auto;
bottom: 0;
}
.draftListContainer .draft {
box-sizing: border-box;
padding: 0 1rem;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-right: 2px;
position: relative;
min-width: 197px;
width: 197px;
height: 34px;
line-height: 34px;
cursor: pointer;
overflow: hidden;
background: var(--color-state-hover);
border-radius: 4px 4px 0px 0px;
border: 1px solid var(--color-border-alt);
color: var(--color-body-on-default);
}
.draftListContainer .draft-title-holder {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.draftListContainer .draft .spinner {
display: inline-block;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-position: 50%;
background-size: 18px;
background-image: url(//mail.group-cdn.one/v51.1.15/media/spinner.4012eda5.svg);
animation: spinner-animation-keyframes 0.7s steps(8, end) infinite;
}
@keyframes spinner-animation-keyframes {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.draftListContainer .draft-title {
position: absolute;
left: 38px;
right: 35px;
top: 0;
bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.draftListContainer .draft.active {
background: var(--color-surface-bright);
border: 1px solid var(--color-border-alt);
font-weight: var(--mailFilterRow-cell);
}
.draftListContainer .show-more {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 5px;
width: 99px;
cursor: pointer;
line-height: 34px;
height: 34px;
padding: 0 1em;
background: var(--color-state-hover);
border-radius: 4px 4px 0px 0px;
border: 1px solid var(--color-border-alt);
color: var(--color-body-on-default);
font-weight: var(--font-weight-bold);
margin: 0 0 0;
justify-content: space-between;
position: absolute;
}
.draftListContainer .show-more-text-container {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
white-space: nowrap;
}
.draftListContainer .show-more .chevronIcon {
transform: rotate(0deg);
}
.draftListContainer .show-more .mail-tab-list {
position: absolute;
width: 214px;
bottom: 40px;
right: 0px;
z-index: 999;
background: var(--color-surface-bright);
box-shadow: 0px 1px 17px rgba(0, 0, 0, 0.1);
border-radius: 4px;
padding: 10px 0;
color: var(--color-body-on-default);
border: 1px solid var(--sub-menus-border-color);
display: flex;
flex-direction: column;
gap: 10px;
}
.draftListContainer .show-more .mail-tab-list .draft {
border: none;
background: none;
width: 100%;
}
.draftListContainer .show-more .mail-tab-list .draft:hover {
background-color: var(--color-state-hover);
}
/*# sourceMappingURL=DraftTabs.css.map */
.noMailsSelected {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
.noMailsSelected-mainHeading {
margin-top: 6px;
color: var(--invite-date-color);
}
.noMailsSelected-subTitle {
color: var(--invite-date-color);
}
.animation {
display: flex;
flex-direction: column;
align-items: center;
}
.animation .selector {
display: block;
width: 114px;
height: 102px;
}
/*# sourceMappingURL=MailSelectionAnimationAndIcons.css.map */
.splitter-layout {
position: absolute;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
overflow: hidden;
}
.splitter-layout .layout-splitter {
background-color: transparent;
transition: background-color 0.2s ease-in-out;
z-index: 9000;
flex: 0 0 auto;
cursor: move;
}
.splitter-layout .layout-splitter:hover {
background-color: var(--color-primary);
}
.splitter-layout .layout-splitter.active {
background-color: var(--color-primary);
cursor: move;
}
.splitter-layout .layout-splitter.dragging {
opacity: 0.1;
cursor: col-resize;
}
.splitter-layout .horizontal {
position: absolute;
width: 100%;
height: 4px;
}
.splitter-layout .vertical {
height: auto;
width: 4px;
}
.folderListSplitter .leftContainer-folderListSplitter {
min-width: 80px;
max-width: 226px;
}
.folderListSplitter .rightContainer-folderListSplitter {
position: relative;
}
.VerticalSplit.splitter-layout .layout-pane {
display: flex;
flex-direction: column;
background-color: var(--color-surface-dim);
overflow: hidden;
border-bottom: solid thin var(--color-border-alt);
}
.VerticalSplit.splitter-layout .layout-pane:first-child {
border-right: 1px solid var(--color-border-alt);
}
.VerticalSplit.splitter-layout .layout-pane:last-child {
margin-left: -4px;
}
.VerticalSplit.splitter-layout.mailSection .layout-pane:first-child {
border-right: none;
}
.VerticalSplit.splitter-layout .layout-splitter {
background-color: transparent;
transition: background-color 0.2s ease-in-out;
z-index: 8;
}
.VerticalSplit.splitter-layout .layout-splitter:hover {
background-color: var(--color-primary);
}
.VerticalSplit.splitter-layout.layout-changing > .layout-splitter {
background-color: var(--color-primary);
opacity: 0.7;
}
.VerticalSplit .splitter-layout .rightContainer-mailViewSplitter {
min-height: 200px;
min-width: 350px;
}
.VerticalSplit .splitter-layout .leftContainer-mailViewSplitter {
min-height: 210px;
min-width: 280px;
}
/*# sourceMappingURL=SplitterLayout.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.aida-chat-container {
min-height: 0;
}
.aida-chat-container .chat-header {
flex: 0 0 auto;
}
.aida-chat-container .gv-chat {
flex: 1;
min-height: 0;
height: auto;
}
.aida-chat-container .gv-chat .aida-chat-input gv-icon svg {
fill: white;
fill: var(--button-color-text, white);
}
.aida-chat-container .gv-chat .aida-chat-input .gv-input-textarea textarea {
overflow-y: auto;
}
.aida-chat-hidden {
display: none;
}
.tableHeader {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border-radius: var(--border-radius);
}
.gv-activated .aida-chat-container .gv-loader-container {
flex-direction: row;
}
.gv-activated .aida-chat-container .gv-chat-list {
flex: 1 0 0;
}
.gv-activated .aida-chat-container .gv-chat-list .aida-html-content ol,
.gv-activated .aida-chat-container .gv-chat-list .aida-html-content ul {
list-style: revert;
padding: var(--size-md);
}
.gv-activated .aida-chat-container .gv-chat-list .aida-html-content h4 {
font-size: revert;
margin-bottom: var(--size-sm);
}
.gv-activated .aida-chat-container .gv-notice-content {
width: -moz-min-content;
width: min-content;
}
[data-theme~="dark"] .aida-chat-container gv-icon svg {
filter: none;
}
/* Large desktop (> 1440px) -> uses default values from gravity
--chat-side-panel-max-w: 480px;
--chat-side-panel-min-w: 375px;
*/
/* Medium Desktop */
@media (min-width: 1024px) and (max-width: 1439px) {
.gv-activated .aida-chat-container .gv-chat {
max-width: 360px;
width: 100%;
}
}
/* Small Desktop & Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
.gv-activated .aida-chat-container .gv-chat {
max-width: 240px;
width: 100%;
}
}
/*# sourceMappingURL=AidaChat.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.Layout {
display: flex;
position: fixed;
width: 100%;
height: 100%;
z-index: 9;
}
.Layout .overlay {
height: 100%;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
z-index: 999;
}
.Layout .panel1 {
position: relative;
height: 100%;
}
.Layout .main-container {
display: flex;
flex-direction: column;
flex-grow: 1;
position: relative;
top: 56px;
height: calc(100% - 56px);
}
.Layout .top-pane {
border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid var(--color-border-alt);
}
.Layout .layout-pane .panel1 {
max-width: 223px;
display: flex;
flex-direction: column;
}
.Layout .layout-pane .panel1 .Scrollable {
top: 0;
}
.Layout .layout-pane .panel1 .Scrollable::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.Layout .layout-pane .panel1 .Scrollable::-webkit-scrollbar-track {
background-color: #f7f7f7;
background-color: var(--color-surface-dim);
border: none;
padding: 10px;
}
.Layout .layout-pane .panel1 .Scrollable::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.Layout .layout-pane .panel1 .panel1-footer {
display: flex;
flex-direction: column;
flex: 0 0 auto;
border-top: 1px solid #e2e2e2;
border-top: 1px solid var(--color-border-alt);
padding: 15px 12px 12px 10px;
}
.Layout .layout-pane .splitter-layout .layout-pane-primary {
background: #f7f7f7;
background: var(--color-surface-dim);
}
.Layout .bottom-pane {
display: flex;
flex-direction: row;
height: 100%;
}
.Layout .bottom-pane .left-pane {
width: 260px;
background-color: #f7f7f7;
background-color: var(--color-surface-dim);
position: relative;
}
.Layout .bottom-pane .left-pane--isCollapsed {
width: 70px;
}
.Layout .bottom-pane .right-pane {
position: relative;
flex: 1;
background-color: #ffffff;
background-color: var(--color-surface-bright);
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
height: 100%;
}
.Layout .bottom-pane .fullscreenLoader {
background-color: rgba(255, 255, 255, 0.5);
background-color: var(--loader-background);
z-index: 99999;
}
@media screen and (orientation: portrait) {
.Layout .bottom-pane {
overflow-x: auto;
}
}
/*# sourceMappingURL=Layout.css.map */
html {
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
--color-illustration-line: var(--color-gray-900);
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #0066aa;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-400);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--invite-date-color: var(--color-gray-600);
--color-signal-success-light: #ddedca;
--color-signal-warning-light: #ffedd9;
--color-signal-alert-light: #f8d9dd;
--color-signal-alert: #b30016;
--color-signal-info-light: #d9ebf7;
--primary-box-shadow-color: rgba(0, 0, 0, 0.2);
--sub-menus-border-color: none;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-light-bold: 400;
--color-theme-picker-border: none;
--accordian-font-weight: 400;
--toggleSwitch-font: 500;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/contact-newsletter.b130d8a4.svg);
--cancelButton-background: #ffffff;
--mailFilterRow-cell: 500;
--mailFilter-group: 400;
--linkToOldMail: 600;
--help-text: 400;
--error-inputField-border: none;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 400;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo.fff54979.svg);
--unread-Date: 600;
--button-font-weight: 500;
--attachmentDropzoneBgInactive: rgba(246, 246, 246, 0.5);
--attachmentDropzoneBgActive: rgba(0, 120, 200, 0.05);
--modal-backgroundOverlay: rgba(60,60,60,0.6);
--loader-background: rgba(255, 255, 255, 0.5);
--form-active-bg: #0066aa;
--color-validation-error: #b30016;
--feedback-background: #ffffff;
}
html[data-theme="dark"] {
--color-gray-100: #141414;
--color-gray-200: #1e1d1f;
--color-gray-250: #282629;
--color-gray-300: #312f34;
--color-gray-400: #3a383e;
--color-gray-500: #69686b;
--color-gray-600: #cecece;
--color-gray-650: #f1f1f1;
--color-gray-800: #f7f7f7;
--color-gray-900: #ffffff;
--color-illustration-line: var(--color-gray-250);
--color-illustration-background: var(--color-gray-500);
--color-illustration-gray: var(--color-gray-800);
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-state-form-active: #29a9ff;
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-border-alt: var(--color-gray-300);
--color-border: var(--color-gray-400);
--color-input-textarea-hover-border: var(--color-gray-500);
--color-surface-form: var(--color-gray-200);
--color-border-form: var(--color-border);
--color-signal-success-light: #34560d;
--color-signal-warning-light: #856304;
--color-signal-alert-light: #850d0a;
--color-signal-alert: #d2011a;
--color-signal-info-light: #235c9d;
--invite-date-color: var(--color-gray-600);
--sub-menus-border-color: 1px solid #323036;
--font-weight-bold: 600;
--font-weight-bolder: 700;
--empty-group: url(//mail.group-cdn.one/v51.1.15/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v51.1.15/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v51.1.15/media/aida_logo_dark.1cf08d6d.svg);
--color-theme-picker-border: 1px solid #f7f7f7;
--accordian-font-weight: 600;
--toggleSwitch-font: 600;
--cancelButton-background: #1c1920;
--mailFilterRow-cell: 700;
--mailFilter-group: 700;
--linkToOldMail: 700;
--help-text: 500;
--error-inputField-border: 1px solid #ec5553;
--calendar-box-shadow: rgba(60, 60, 60, 0.1);
--normal-font-weight: 600;
--xxlg-font: 800;
--chatBot-img: url(//mail.group-cdn.one/v51.1.15/media/chatBot_dark.b4f4a747.svg);
--button-font-weight: 700;
--modal-backgroundOverlay: rgba(0, 0, 0, 0.4);
--loader-background: rgba(70, 70, 70, 0.5);
--color-validation-error: #fe485d;
--feedback-background: #2c4e82;
}
.customDragElem {
top: 0;
opacity: 0;
position: fixed;
z-index: 8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 4px;
width: -moz-fit-content;
width: fit-content;
height: 46px;
background-color: #0066aa;
background-color: var(--color-state-form-active);
border: 1px solid var(--color-primary);
box-sizing: border-box;
border-radius: 4px;
}
.customDragElem .mailEnvelopeIcon {
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
fill: #ffffff;
}
.customDragElem .mailEnvelopeIcon svg {
filter: none;
}
.customDragElem .text {
color: #fff;
font-weight: 600;
font-weight: var(--font-weight-bolder);
font-size: 14px;
line-height: 22px;
margin: 0px 10px;
}
.drag-overlay {
z-index: 1070;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: move;
background-color: white;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-overlay.drop-rejected {
cursor: no-drop;
}
.boldestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 700;
line-height: 20px;
font-size: 15px;
}
.normalText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.smallerText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
}
.lightestText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 20px;
font-size: 14px;
}
.subHeadText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 500;
line-height: 20px;
font-size: 15px;
}
.largeBtnText {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.smallbtnText {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.bolderText {
color: #141414;
color: var(--color-body-on-default);
font-weight: 600;
line-height: 34px;
font-size: 12px;
}
.textInput {
display: inline-block;
height: 18px;
font-size: 12px;
line-height: 18px;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.textInput::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.textInput::placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.maskedStar {
-webkit-mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
mask-image: url(//mail.group-cdn.one/v51.1.15/media/mail-stared-new.984c703b.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
}
.maskedStar svg {
opacity: 0;
}
.hollowButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.hollowButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--color-primary);
background: #ffffff;
background: var(--color-surface-bright);
color: var(--body-on-default);
}
.solidButton-large-blue {
line-height: 50px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.solidButton-small-blue {
line-height: 30px;
padding: 0px 30px;
border-radius: 4px;
border: 1px solid var(--color-primary);
cursor: pointer;
background: var(--color-primary);
background: var(--color-button-bg-primary, var(--color-primary));
color: white;
color: var(--button-color-text, white);
}
.Gravity-InPlaceEditor .inputContainer label .InPlaceEditor-label {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label span.floating {
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
}
.Gravity-InPlaceEditor .inputContainer label .Gravity-InPlaceEditor-input {
border: 1px solid #e2e2e2;
border: 1px solid var(--color-border-alt);
font-weight: 400;
font-weight: var(--accordian-font-weight);
color: #3a383e;
color: var(--invite-date-color);
background-color: var(--inputField);
border-radius: 4px;
}
.Gravity-InPlaceEditor .inputContainer .validationError {
color: #b30016;
color: var(--color-signal-alert);
font-weight: 400;
font-weight: var(--accordian-font-weight);
}
svg {
color: #141414;
color: var(--color-illustration-line);
}
svg .gv-stroke-alert {
stroke: #b30016;
stroke: var(--color-signal-alert);
}
svg .gv-fill-bg {
fill: #ffffff;
fill: var(--color-illustration-background);
}
svg .gv-fill-gray {
fill: #f7f7f7;
fill: var(--color-illustration-gray);
}
svg .gv-fill-line {
fill: #141414;
fill: var(--color-illustration-line);
}
svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
svg .gv-fill-alert-light {
fill: #f8d9dd;
fill: var(--color-signal-alert-light);
}
.topActionBarContainer {
min-height: 45px;
height: 45px;
display: flex;
flex-direction: row;
align-items: center;
}
.topActionBarContainer .divider {
height: 20px;
width: 1px;
display: flex;
margin: 0px 10px;
background-color: #e2e2e2;
background-color: var(--color-border-alt);
}
.topActionBarContainer-left {
align-items: center;
display: flex;
justify-content: flex-start;
}
.topActionBarContainer-right {
display: flex;
flex: auto;
justify-content: flex-end;
align-items: center;
}
.topActionBarContainer .stickySlidein {
position: sticky;
right: 0px;
z-index: 999;
background-color: #f7f7f7;
background-color: var(--color-surface-dim);
}
.topActionBarContainer .stickySlidein.open {
transition-timing-function: ease-in;
transition: 0.2s;
transition-delay: 0.1s;
/* Hide thing by pushing it outside by default */
right: 440px;
position: relative;
z-index: 9999999;
}
.topActionBarContainer .stickySlidein.open .agendaHead {
background-color: #0066aa;
background-color: var(--color-state-form-active);
color: #ffffff;
padding-left: 4px;
}
.topActionBarContainer .stickySlidein.open .agendaHead .keyboard_double_arrow_left path,
.topActionBarContainer .stickySlidein.open .agendaHead .keyboard_double_arrow_right path {
fill: #ffffff;
}
.topActionBarContainer .customTooltip-container {
margin-right: 0;
}
.topActionBarContainer .customTooltip-container .actionButton {
padding-left: 0px;
margin-left: 10px;
}
.topActionBarContainer .actionButton {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
line-height: 15px;
font-size: 12px;
padding: 10px;
height: 100%;
display: flex;
align-items: center;
gap: 2px;
cursor: pointer;
border-radius: 4px;
margin-right: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
font-weight: var(--font-weight-light-bold);
white-space: nowrap;
}
.topActionBarContainer .actionButton:hover {
background-color: var(--color-state-active);
}
.topActionBarContainer .actionButton gv-icon {
margin-right: 2px;
}
.topActionBarContainer .actionButton .refreshIcon {
margin-right: 4px;
margin-left: 10px;
}
.topActionBarContainer .actionButton .label-text {
color: #141414;
color: var(--color-body-on-default);
}
.topActionBarContainer .actionButton:first-child {
margin-right: 0;
margin-left: 10px;
padding-left: 0;
}
.topActionBarContainer .composeButton {
color: #141414;
color: var(--color-body-on-default);
font-weight: 400;
font-size: 12px;
display: flex;
gap: 2px;
align-items: center;
line-height: 15px;
cursor: pointer;
border-radius: 4px;
padding: 20px 10px;
margin-right: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
font-weight: var(--font-weight-light-bold);
white-space: nowrap;
}
.topActionBarContainer .composeButton .gravity-icon-wrapper .saveFloppyDiskIcon,
.topActionBarContainer .composeButton .gravity-icon-wrapper .attachment {
cursor: inherit;
}
.topActionBarContainer .composeButton .gravity-icon-wrapper .saveFloppyDiskIcon svg path,
.topActionBarContainer .composeButton .gravity-icon-wrapper .attachment svg path {
transform: scale(1.1);
transform-origin: center;
}
.topActionBarContainer .composeButton:hover {
background-color: var(--color-state-hover);
}
.topActionBarContainer .Button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.topActionBarContainer .Button:disabled:hover {
background-color: transparent;
}
.topActionBarContainer .layoutSetting {
display: flex;
cursor: pointer;
padding: 10px;
border-radius: 4px;
align-items: center;
height: -moz-fit-content;
height: fit-content;
}
.topActionBarContainer .layoutSetting:hover {
background-color: var(--color-state-active);
}
.topActionBarContainer .layoutSetting .layoutSettingText {
display: flex;
align-items: center;
}
.topActionBarContainer .layoutSetting .layoutSettingText gv-icon {
width: 16px;
height: 16px;
}
.topActionBarContainer .layoutSetting .layoutSettingText .gravity-icon-wrapper .layoutStackIcon,
.topActionBarContainer .layoutSetting .layoutSettingText .gravity-icon-wrapper .layoutHorizontalIcon,
.topActionBarContainer .layoutSetting .layoutSettingText .gravity-icon-wrapper .layoutSplitIcon {
margin-bottom: 7px;
}
.topActionBarContainer .layoutSetting .layoutSettingText .gravity-icon-wrapper .layoutStackIcon svg path,
.topActionBarContainer .layoutSetting .layoutSettingText .gravity-icon-wrapper .layoutHorizontalIcon svg path,
.topActionBarContainer .layoutSetting .layoutSettingText .gravity-icon-wrapper .layoutSplitIcon svg path {
transform: scale(0.8);
transform-origin: center;
}
.topActionBarContainer .layoutSetting .layoutSettingText .gravity-icon-wrapper .keyboard_arrow_down {
display: flex;
}
.topActionBarContainer .layoutSetting .chevronIcon {
margin-left: 6px;
transition: transform 100ms linear;
}
.topActionBarContainer .layoutSetting .layoutText {
display: flex;
font-weight: 400;
font-size: 12px;
line-height: 15px;
color: #141414;
color: var(--color-body-on-default);
padding-left: 8px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.topActionBarContainer .layoutSetting .layoutStackIcon {
margin-right: 0;
}
.topActionBarContainer .layoutContainer {
position: fixed;
top: 105px;
right: 60px;
padding: 0;
width: 250px;
}
.topActionBarContainer .layoutContainer .Webmail-Popup-element {
margin: 0px;
padding: 10px 20px;
cursor: pointer;
display: flex;
align-items: center;
height: 20px;
}
.topActionBarContainer .layoutContainer .Webmail-Popup-element:hover {
background-color: var(--color-state-hover);
}
.topActionBarContainer .layoutContainer .Webmail-Popup-element span:nth-child(3) {
margin-left: auto;
}
.topActionBarContainer .layoutContainer .Webmail-Popup-element .checkmarkIcon {
background-size: 20px 20px;
}
.topActionBarContainer .layoutContainer .Webmail-Popup-element .layoutStackIcon,
.topActionBarContainer .layoutContainer .Webmail-Popup-element .layoutHorizontalIcon,
.topActionBarContainer .layoutContainer .Webmail-Popup-element .layoutSplitIcon {
background-size: 18px 18px;
margin-right: 12px;
margin-bottom: 6px;
}
.rotateIcon {
transform: rotate(180deg);
}
.Icon {
height: 16px;
width: 16px;
background-size: 16px 16px;
background-repeat: no-repeat;
margin-right: 4px;
}
.guidesIcon,
.tourIcon,
.keyboardIcon {
height: 20px;
width: 20px;
background-size: 20px 20px;
background-repeat: no-repeat;
margin-right: 0;
}
.shiftHeading {
position: relative;
right: 440px;
display: flex;
align-items: center;
flex-direction: row;
pointer-events: auto;
cursor: pointer;
z-index: 99;
background-color: #0066aa;
background-color: var(--color-state-form-active);
color: #ffffff;
width: 73px;
height: 44px;
border: none;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding-right: 4px;
border-radius: 4px 0 0 4px;
}
.agendaHead {
display: flex;
align-items: center;
flex-direction: row;
pointer-events: auto;
cursor: pointer;
position: relative;
z-index: 1;
color: #0066aa;
color: var(--color-state-form-active);
background: #f7f7f7;
background: var(--color-surface-dim);
width: 56px;
height: 44px;
border: none;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding-right: 14px;
border-radius: 4px 0 0 4px;
}
.agendaHead .gravity-icon-wrapper {
width: 25px;
}
.agendaHead .gravity-icon-wrapper .keyboard_double_arrow_left,
.agendaHead .gravity-icon-wrapper .keyboard_double_arrow_right {
fill: #0066aa;
fill: var(--color-state-form-active);
}
.agendaHead .gravity-icon-wrapper .keyboard_double_arrow_left svg,
.agendaHead .gravity-icon-wrapper .keyboard_double_arrow_right svg {
filter: none;
}
.agendaHead .gravity-icon-wrapper .webmail-dark svg path {
fill: #29a9ff;
}
.dateAgenda {
align-items: center;
display: flex;
flex-direction: column;
flex: 1;
}
.slideInToggleWhite {
width: 25px;
height: 18px;
background-size: 25px 18px;
}
.slide-in-container {
width: 100%;
z-index: 1003;
}
.frameDate {
display: none;
}
.slide-in-overlay {
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
will-change: opacity;
transition: opacity 0.3s cubic-bezier(0, 0, 0.25, 1);
z-index: 1002;
}
[data-theme~="dark"] .slideInToggle {
filter: none;
}
[data-theme~="dark"] .slideInToggleWhite {
filter: none;
}
[data-theme~="dark"] .topActionBarContainer {
border-bottom: 1px solid #323036;
}
/*# sourceMappingURL=TopActionBar.css.map */
.gv-activated *::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.gv-activated *::-webkit-scrollbar-track {
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.gv-activated *::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.gv-activated.Layout {
display: flex;
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
.gv-activated.Layout .right-pane {
min-width: 0;
}
.gv-activated.Layout .navigation-tab-btns .gv-tab-list {
border-bottom: none;
}
/*# sourceMappingURL=Layout.css.map */
.CalendarGroupHeader {
cursor: pointer;
}
.CalendarGroupHeader .title.gv-caption-lg {
font-weight: var(--font-weight-semibold);
}
.CalendarGroupHeader-more {
display: flex;
align-items: center;
visibility: hidden;
cursor: pointer;
}
.CalendarGroupHeader--external {
min-width: 0;
}
.CalendarGroupHeader--external .CalendarGroupHeader-more {
visibility: visible;
}
.CalendarGroupHeader--external .CalendarGroupHeader-main {
min-width: 0;
flex: 1;
}
.CalendarGroupHeader--external .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.CalendarGroupHeader-error-icon {
width: var(--size-icon-sm);
height: var(--size-icon-sm);
display: inline-flex;
align-items: center;
justify-content: center;
}
.CalendarGroupHeader-error-icon gv-icon svg {
color: var(--color-validation-error);
}
/*# sourceMappingURL=CalendarGroupHeader.css.map */
.CalendarRow {
height: 36px;
padding: var(--size-sm) 0;
gap: var(--size-sm);
}
.CalendarRow-info {
flex: 1;
min-width: 0;
}
.CalendarRow-error-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
}
.CalendarRow-error-icon svg {
color: var(--color-validation-error);
}
.CalendarRow--error {
cursor: default;
}
.CalendarRow-more {
cursor: pointer;
visibility: hidden;
}
.CalendarRow:hover .CalendarRow-more {
visibility: visible;
}
.CalendarRow input[type="checkbox"].gv-checkbox {
margin: 0;
flex: 0 0 auto;
align-self: center;
position: relative;
}
.CalendarRow input[type="checkbox"].gv-checkbox::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: var(--size-border) solid var(--calendar-color);
border-radius: inherit;
pointer-events: none;
}
.CalendarRow input[type="checkbox"].gv-checkbox:checked {
--checkbox-color-fill-checked: var(--calendar-color);
background-color: var(--calendar-color);
}
.CalendarRow .gv-activated .CalendarRow input[type="checkbox"].gv-checkbox:checked,
.CalendarRow .CalendarRow .gv-activated input[type="checkbox"].gv-checkbox:checked,
.CalendarRow .gv-activated input[type="checkbox"].gv-checkbox:checked {
--checkbox-color-fill-checked: var(--calendar-color);
background-color: var(--calendar-color);
}
/*# sourceMappingURL=CalendarRow.css.map */
.gv-activated .color-palette {
height: 24px;
width: 24px;
border-radius: 4px;
}
.gv-activated .color-palette:hover {
cursor: pointer;
}
.gv-activated .color-palette:hover gv-icon {
opacity: 1;
}
.gv-activated .color-palette gv-icon {
color: var(--color-gray-100);
opacity: 0;
}
.gv-activated .color-palette gv-icon svg {
fill: white;
}
.gv-activated .color-palette.selected gv-icon {
opacity: 1;
}
.gv-activated .color-palette.disabled {
cursor: not-allowed;
opacity: 0.5;
}
.gv-activated .color-palette.disabled:hover {
cursor: not-allowed;
}
/*# sourceMappingURL=ColorPalette.css.map */
.gv-activated .gv-modal .gv-modal-content.calendar-options-modal {
width: 100%;
max-width: 328px;
min-height: 297px;
padding: var(--size-lg);
}
.gv-activated .gv-modal .gv-modal-content.calendar-options-modal .gv-modal-body .gv-modal-title {
font-size: 20px;
}
.gv-activated .gv-modal .gv-modal-content.calendar-options-modal .gv-modal-body .gv-input {
height: 30px;
width: 100%;
}
.gv-activated .gv-modal .gv-modal-content.calendar-options-modal .gv-modal-body .gv-input.gv-error input {
transform: translateY(-10px);
}
.gv-activated .gv-modal .gv-modal-content.calendar-options-modal .gv-modal-body .gv-toggle {
transform: scale(0.67);
transform-origin: left center;
}
.gv-activated .gv-modal .gv-modal-content.calendar-options-modal .gv-button-group .gv-button-primary {
min-width: 66px;
height: 30px;
margin-top: 5px;
}
/*# sourceMappingURL=CalendarOptions.css.map */
.calendar-list .CalendarGroup-reconnect-link {
margin-left: var(--size-xl);
align-self: flex-start;
background: transparent;
border: none;
color: var(--color-state-form-active);
cursor: pointer;
padding: 0;
text-decoration: none;
}
.calendar-list .CalendarGroup-reconnect-link:hover {
text-decoration: underline;
}
.calendar-list .gv-contextual-menu .gv-menu-item {
flex-direction: row-reverse;
}
.calendar-list .gv-modal.fitContent {
width: -moz-fit-content;
width: fit-content;
height: -moz-fit-content;
height: fit-content;
background-color: transparent;
padding: 0;
}
/*# sourceMappingURL=CalendarList.css.map */
.gv-activated .gv-modal .gv-modal-content.import-events-modal {
width: 100%;
max-width: 328px;
min-height: 251px;
padding: var(--size-lg);
}
.gv-activated .gv-modal .gv-modal-content.import-events-modal .gv-modal-body .gv-modal-title {
font-size: 20px;
}
.gv-activated .gv-modal .gv-modal-content.import-events-modal .gv-modal-body .gv-chip {
width: -moz-fit-content;
width: fit-content;
background: var(--color-surface-bright);
}
.gv-activated .gv-modal .gv-modal-content.import-events-modal .gv-modal-body .gv-chip-active {
background: var(--color-state-active);
border: 1px solid var(--color-state-focus);
}
.gv-activated .gv-modal .gv-modal-content.import-events-modal .gv-button-group .gv-button-primary {
min-width: 66px;
height: 30px;
}
/*# sourceMappingURL=ImportEvents.css.map */
.gv-activated .gv-modal .gv-modal-content.share-options-modal {
max-width: 528px;
padding: var(--size-lg);
}
.gv-activated .gv-modal .gv-modal-content.share-options-modal .max-height {
max-height: 180px;
}
.gv-activated .gv-modal .gv-modal-content.share-options-modal .gv-modal-body {
margin: 0;
}
.gv-activated .gv-modal .gv-modal-content.share-links-modal {
max-width: 528px;
padding: var(--size-lg);
}
.gv-activated .gv-modal .gv-modal-content.share-links-modal textarea {
white-space: pre-wrap;
word-wrap: anywhere;
word-break: break-word;
}
.gv-activated .gv-modal .extraHeight {
height: 158px;
}
.gv-activated .share-column {
color: var(--color-state-form-active);
cursor: pointer;
}
.gv-activated .share-column svg {
color: var(--color-state-form-active);
}
.gv-activated .share-options-add-link-btn {
flex: 0 0 auto;
}
.gv-activated .delete-icon,
.gv-activated .copy-icon {
cursor: pointer;
}
/*# sourceMappingURL=ShareCalendarOptions.css.map */
.gv-activated .gv-modal .gv-modal-content.show-caldav-url-modal {
max-width: 528px;
padding: var(--size-lg);
}
.gv-activated .gv-modal .gv-modal-content.show-caldav-url-modal .gv-modal-body {
margin: 0;
}
.gv-activated .gv-modal .gv-modal-content.show-caldav-url-modal .copy-icon {
cursor: pointer;
}
/*# sourceMappingURL=ShowCalDAVUrlModal.css.map */
.external-calendar-modal,
.connect-with-calendar-modal {
min-height: 300px;
}
.external-calendar-modal .gv-rich-option-group-item input[type="radio"],
.connect-with-calendar-modal .gv-rich-option-group-item input[type="radio"] {
position: relative;
width: 24px;
height: 24px;
}
.external-calendar-modal .icon,
.connect-with-calendar-modal .icon {
display: block;
background-size: 48px;
height: 48px;
width: 48px;
background-repeat: no-repeat;
padding: 5px;
position: relative;
top: 5px;
}
.external-calendar-modal .google-icon,
.connect-with-calendar-modal .google-icon {
background-image: url(//mail.group-cdn.one/v51.1.15/media/google-calendar.25922012.svg);
}
.external-calendar-modal .shore-icon,
.connect-with-calendar-modal .shore-icon {
background-image: url(//mail.group-cdn.one/v51.1.15/media/shore-icon.f7b4e37a.svg);
}
.external-calendar-modal .other-calendar-icon,
.connect-with-calendar-modal .other-calendar-icon {
background-image: url(//mail.group-cdn.one/v51.1.15/media/other-calendars.60599f2d.svg);
}
.external-calendar-modal.loading,
.connect-with-calendar-modal.loading {
min-height: 300px;
}
[data-theme~="dark"] .external-calendar-modal .shore-icon,
[data-theme~="dark"] .connect-with-calendar-modal .shore-icon {
filter: invert(100%) brightness(250%) contrast(100%);
}
[data-theme~="dark"] .external-calendar-modal .other-calendar-icon,
[data-theme~="dark"] .connect-with-calendar-modal .other-calendar-icon {
background-image: url(//mail.group-cdn.one/v51.1.15/media/other-calendars-dark.5ce38be1.svg);
}
/*# sourceMappingURL=ExternalCalendarModal.css.map */
.SideMenu {
height: 100%;
width: 232px;
}
.SideMenu .addNewBtn-wrapper {
height: 54px;
}
.SideMenu .addNewBtn-wrapper .addNewBtn {
height: 32px;
}
.SideMenu .addNewBtn-wrapper .addNewBtn gv-icon svg {
fill: white;
}
.SideMenu .addNewBtn-wrapper .gravity-icon-wrapper {
width: var(--size-icon-sm);
height: var(--size-icon-sm);
}
.SideMenu .addCalendar-wrapper {
position: relative;
}
.SideMenu .gv-contextual-menu {
width: 100%;
max-width: 300px;
padding: 8px;
}
.SideMenu > div:last-child {
overflow-y: auto;
overflow-x: hidden;
flex: 1;
min-height: 0;
}
/*# sourceMappingURL=SideMenu.css.map */
.gv-activated .gv-modal .gv-modal-content.subscribe-calendar-modal {
width: 100%;
max-width: 528px;
min-height: 174px;
padding: var(--size-lg);
}
.gv-activated .gv-modal .gv-modal-content.subscribe-calendar-modal .gv-modal-body .gv-modal-title {
font-size: 20px;
}
.gv-activated .gv-modal .gv-modal-content.subscribe-calendar-modal .gv-modal-body .gv-input {
height: 30px;
width: 100%;
}
.gv-activated .gv-modal .gv-modal-content.subscribe-calendar-modal .gv-button-group .gv-button {
height: 30px;
}
.gv-activated .gv-modal .gv-modal-content.subscribe-calendar-modal .gv-button-group .gv-button-cancel {
min-width: 85px;
}
.gv-activated .gv-modal .gv-modal-content.subscribe-calendar-modal .gv-button-group .gv-button-primary {
min-width: 102px;
}
/*# sourceMappingURL=SubscribeCalendarModal.css.map */
@keyframes shake {
0%,
100% {
transform: translate(0, 0);
}
25% {
transform: translate(-5px, 0);
}
50% {
transform: translate(5px, 0);
}
75% {
transform: translate(-5px, 0);
}
}
.eventDialogWrapper-newEvent {
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}
.eventDialogWrapper-newEvent.eventDialog-shake {
animation: shake 0.4s ease-in-out;
}
.eventDialogWrapper .eventDialog {
width: 100%;
max-width: 528px;
height: -moz-fit-content;
height: fit-content;
z-index: 1100;
overflow: auto;
box-sizing: border-box;
}
.eventDialogWrapper .eventDialog.max-height {
max-height: 95%;
}
.eventDialogWrapper .eventDialog-shake {
animation: shake 0.4s ease-in-out;
}
.eventDialogWrapper .eventDialog-body .view-container-text {
word-break: break-word;
}
.eventDialogWrapper .eventDialog .closeIcon {
display: flex;
justify-content: end;
padding: var(--size-sm);
}
.eventDialogWrapper .eventDialog .closeIcon .iconSize {
width: var(--size-icon-sm);
height: var(--size-icon-sm);
}
.eventDialogWrapper .eventDialog .calendarColor {
width: var(--size-md);
height: var(--size-md);
position: relative;
margin-right: 5px;
border-radius: 2.67px;
}
.eventDialogWrapper .eventDialog .dot-symbol {
display: inline-block;
transform: scale(2);
}
.eventDialogWrapper .eventDialog-backToAgenda {
cursor: pointer;
z-index: 1;
color: var(--color-state-form-active);
}
.eventDialogWrapper .eventDialog .loading-event-container .event-loading {
position: static;
}
.eventDialogWrapper .eventDialog .loading-event-container .event-loading p {
position: static;
}
.eventDialogWrapper .eventDialog .gv-input.gv-timepicker {
overflow: visible;
}
.eventDialogWrapper .eventDialog .gv-input.gv-timepicker.gv-timepicker-open {
z-index: 2001;
}
.eventDialogWrapper .gv-overlay.gv-state-open.transparent {
background-color: transparent;
}
.gv-activated .recurEventOptions .gv-modal {
background-color: transparent;
}
.gv-activated .recurEventOptions .gv-modal .gv-modal-content.recurEventOptions {
padding: var(--size-lg);
}
/*# sourceMappingURL=EventDialog.css.map */
.day-view-container {
min-height: 1px;
}
.day-view-container.focus-visible {
outline: none;
}
.day-view-container:focus-visible {
outline: none;
}
/*# sourceMappingURL=DaysView.css.map */
.week-view-container {
min-height: 1px;
}
.week-view-container.focus-visible {
outline: none;
}
.week-view-container:focus-visible {
outline: none;
}
/*# sourceMappingURL=WeekView.css.map */
/***
The new CSS reset - version 1.7.3 (last updated 7.8.2022)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Customized reset:
- Added .gv-activated class
- Moved all:unset; display: revert; part to component level
- Added reset for buttons and form elements
*/
.gv-activated {
/* Preferred box-sizing value */
/* Remove margins around the body */
/* Reset buttons and form elements */
/* Set cursor for interactive elements */
/* Remove list styles (bullets/numbers) */
/* For images to not be able to exceed their container */
/* removes spacing between cells in tables */
/* revert the 'white-space' property for textarea elements on Safari */
/* minimum style to allow to style meter element */
/* reset default text opacity of input placeholder */
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
/* apply back the draggable feature - exist only in Chromium and Safari */
}
.gv-activated,
.gv-activated *,
.gv-activated *::before,
.gv-activated *::after {
box-sizing: border-box;
}
body.gv-activated {
margin: 0;
}
.gv-activated button,
.gv-activated input,
.gv-activated optgroup,
.gv-activated select,
.gv-activated textarea {
color: inherit;
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
margin: 0;
padding: 0;
}
.gv-activated button:focus,
.gv-activated input:focus,
.gv-activated optgroup:focus,
.gv-activated select:focus,
.gv-activated textarea:focus {
outline: none;
}
.gv-activated button,
.gv-activated select {
text-transform: none;
}
.gv-activated button,
.gv-activated [type="button"],
.gv-activated [type="reset"],
.gv-activated [type="submit"] {
background-color: transparent;
background-image: none;
border: none;
-webkit-user-select: none;
user-select: none;
}
.gv-activated input,
.gv-activated textarea {
box-shadow: none;
outline: none;
/* Safari - solving issue when using user-select:none on the text input doesn't working */
-webkit-user-select: auto;
user-select: auto;
}
.gv-activated a[href],
.gv-activated button:not(:disabled),
.gv-activated [role="button"] {
cursor: pointer;
}
.gv-activated :disabled {
cursor: default;
}
.gv-activated ol,
.gv-activated ul,
.gv-activated menu {
list-style: none;
margin: 0;
padding: 0;
}
.gv-activated img {
max-width: 100%;
}
.gv-activated table {
border-collapse: collapse;
}
.gv-activated textarea {
white-space: revert;
}
.gv-activated meter {
appearance: revert;
}
.gv-activated ::placeholder {
color: inherit;
}
.gv-activated :where([hidden]) {
display: none;
}
.gv-activated :where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
word-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
user-select: auto;
}
.gv-activated :where([draggable="true"]) {
-webkit-user-drag: element;
}
/* Fluid */
/* Typography
* Mixins to reuse text styles in other components
*/
/* Storefront */
/* Truncate */
/* Fluid space */
/* Container */
/* Content container */
/* Stack space */
/* Flex layout */
/* Condensed */
/* Skip link */
/* Progress circle */
/* Background states */
/* Focus visible */
/* Reset */
/* Spacers for margin, paddings, etc. */
/* Fluid sizes */
/* Icons sizes */
/* Breakpoints */
/* Fine grained break points */
/* Min and Max container sizes. */
/* Media queries */
/* Colors (for LESS functions) */
/* Z-level indexes
* TODO: Would be nice to generate levels automatically by a constant number, based
* on a list - LESS does not offer a solution for this currently without drawbacks
*/
@font-face {
font-display: swap;
font-family: PlusJakartaSans;
font-style: normal;
font-weight: 400 700;
src: url(//mail.group-cdn.one/v51.1.15/media/PlusJakartaSans.fe809dce.woff2) format("woff2"), url(//mail.group-cdn.one/v51.1.15/media/PlusJakartaSans.2f5e58f9.ttf) format("truetype");
}
@font-face {
font-display: swap;
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400 700;
src: url(//mail.group-cdn.one/v51.1.15/media/JetBrainsMono.cc66df4d.woff2) format("woff2"), url(//mail.group-cdn.one/v51.1.15/media/JetBrainsMono.0db4490d.ttf) format("truetype");
}
@font-face {
font-display: swap;
font-family: Gellix;
font-style: normal;
font-weight: 400 700;
src: url(//mail.group-cdn.one/v51.1.15/media/Gellix-SemiBold.3e90f86c.woff2) format("woff2"), url(//mail.group-cdn.one/v51.1.15/media/Gellix-SemiBold.1758bbd9.ttf) format("truetype");
}
.gv-activated {
/* Mode visibility */
}
.gv-activated.gv-text-non-fluid,
.gv-activated .gv-text-non-fluid {
/* Font size */
--font-size-heading-xxxl-min: var(--font-size-heading-xxxl-max);
--font-size-heading-xxl-min: var(--font-size-heading-xxl-max);
--font-size-heading-xl-min: var(--font-size-heading-xl-max);
--font-size-heading-lg-min: var(--font-size-heading-lg-max);
--font-size-heading-md-min: var(--font-size-heading-md-max);
--font-size-heading-sm-min: var(--font-size-heading-sm-max);
--font-size-heading-xs-min: var(--font-size-heading-xs-max);
--font-size-text-xl-min: var(--font-size-text-xl-max);
--font-size-text-lg-min: var(--font-size-text-lg-max);
--font-size-text-md-min: var(--font-size-text-md-max);
/* Letterspacing */
--letterspacing-heading-xxxl-min: var(--letterspacing-heading-xxxl-max);
--letterspacing-heading-xxl-min: var(--letterspacing-heading-xxl-max);
--letterspacing-heading-xl-min: var(--letterspacing-heading-xl-max);
--letterspacing-heading-lg-min: var(--letterspacing-heading-lg-max);
--letterspacing-heading-md-min: var(--letterspacing-heading-md-max);
--letterspacing-heading-sm-min: var(--letterspacing-heading-sm-max);
--letterspacing-heading-xs-min: var(--letterspacing-heading-xs-max);
--letterspacing-text-lg-min: var(--letterspacing-text-lg-max);
--letterspacing-text-md-min: var(--letterspacing-text-md-max);
}
.gv-activated .gv-mode-condensed {
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
@media (max-width: 599px ) {
.gv-activated .gv-max-mob-mode-condensed {
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
}
@media (min-width: 600px ) {
.gv-activated .gv-tab-mode-condensed {
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
}
@media (max-width: 767px ) {
.gv-activated .gv-max-tab-sm-mode-condensed {
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
}
@media (min-width: 768px ) {
.gv-activated .gv-tab-lg-mode-condensed {
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
}
@media (max-width: 1023px ) {
.gv-activated .gv-max-tab-mode-condensed {
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
}
@media (min-width: 1024px ) {
.gv-activated .gv-desk-mode-condensed {
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
}
.gv-activated .gv-on-dark {
display: none;
}
.gv-activated .gv-accordion .gv-acc-item:not(:first-child) {
border-top: var(--size-border) solid var(--color-border);
}
.gv-activated .gv-accordion .gv-acc-header {
display: block;
width: 100%;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-accordion .gv-acc-header {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-accordion .gv-acc-header {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-accordion .gv-acc-header {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-accordion .gv-acc-header {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-accordion .gv-acc-header {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-accordion .gv-acc-header {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger {
display: flex;
flex-direction: column;
gap: var(--size-xs);
padding: var(--size-md) 0 var(--size-md) 0;
position: relative;
text-align: left;
width: 100%;
}
.gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger .gv-acc-title {
display: block;
padding-right: var(--size-xl);
position: relative;
width: 100%;
}
.gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger .gv-acc-title::after {
background-color: var(--color-body-on-default);
content: "";
display: block;
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/chevron-down.966453af.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/chevron-down.966453af.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: var(--size-icon-md);
right: var(--size-sm);
position: absolute;
top: 0;
width: var(--size-icon-md);
}
.gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger.gv-expanded {
padding-bottom: 0;
}
.gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger.gv-expanded .gv-acc-title::after {
transform: rotate(180deg);
}
.gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger:hover {
color: var(--color-state-form-active);
}
.gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger:hover .gv-acc-title::after {
background-color: var(--color-state-form-active);
}
.gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger:active {
color: var(--color-state-form-active);
opacity: var(--opacity-active-links);
}
.gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger:active .gv-acc-title::after {
background-color: var(--color-state-form-active);
}
.gv-activated .gv-accordion .gv-acc-content {
padding: var(--size-xs) var(--size-xl) var(--size-lg) 0;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
@media (min-width: 600px ) {
.gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger {
gap: var(--size-sm);
padding: var(--size-lg) 0 var(--size-lg) 0;
}
}
.gv-activated .gv-action {
align-items: center;
color: var(--color-state-form-active);
cursor: pointer;
display: inline-flex;
flex-wrap: nowrap;
gap: 4px;
text-decoration: none;
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-action:hover {
color: var(--color-state-form-active);
text-decoration: underline;
}
.gv-activated .gv-action:active {
color: var(--color-state-form-active);
opacity: var(--opacity-active-links);
text-decoration: underline;
}
.gv-activated .gv-action:disabled {
color: var(--color-body-on-disabled);
cursor: auto;
pointer-events: none;
}
.gv-activated .gv-action.gv-mode-condensed {
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-chat {
display: flex;
flex-direction: column;
gap: var(--size-md);
}
.gv-activated .gv-app-rail {
--app-rail-width: 73px;
background-color: var(--color-surface-dim);
border-right: 1px solid var(--color-border-alt);
flex: 0 0 var(--app-rail-width);
padding: var(--size-md) 0;
width: var(--app-rail-width);
}
.gv-activated .gv-app-rail .gv-nav-list {
padding-left: var(--size-xs);
padding-right: var(--size-xs);
}
.gv-activated .gv-app-rail .gv-nav-list > *:not(:last-child) {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-app-rail .gv-nav-list > li {
position: relative;
}
.gv-activated .gv-app-rail .gv-item {
align-items: center;
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
gap: var(--size-xs);
padding-bottom: var(--size-sm);
position: relative;
text-align: center;
text-decoration: none;
width: 100%;
-webkit-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-app-rail .gv-item .gv-indicator {
position: absolute;
right: var(--size-xs);
top: var(--size-xs);
}
.gv-activated .gv-app-rail .gv-item .gv-item-icon {
border-radius: var(--border-radius);
display: inline-block;
padding: 6px var(--size-sm);
}
.gv-activated .gv-app-rail .gv-item.gv-new {
background-color: var(--color-signal-info-light);
}
.gv-activated .gv-app-rail .gv-item.gv-active.gv-new,
.gv-activated .gv-app-rail .gv-item.gv-active .gv-item-icon {
background-color: var(--color-state-active);
}
.gv-activated .gv-app-rail .gv-item.gv-new:hover,
.gv-activated .gv-app-rail .gv-item:hover .gv-item-icon {
background-color: var(--color-state-hover);
}
.gv-activated .gv-app-rail .gv-divider {
margin: var(--size-sm);
width: auto;
}
.gv-activated .gv-app-rail.gv-app-rail-minimal {
--app-rail-width: var(--size-xl);
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
.gv-activated .gv-app-rail.gv-app-rail-minimal .gv-checkbox {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-app-rail.gv-app-rail-minimal .gv-radio {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-app-rail.gv-app-rail-minimal .gv-radio:checked::after {
border-width: 5px;
}
.gv-activated .gv-app-rail.gv-app-rail-minimal .gv-input.gv-input-number button {
padding: 0;
}
.gv-activated .gv-app-rail.gv-app-rail-minimal .gv-toggle {
--toggle-height: 16px;
--toggle-width: 28px;
--toggle-dot-indent: 2px;
}
.gv-activated .gv-app-rail.gv-app-rail-minimal gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-app-rail.gv-app-rail-minimal .gv-item {
margin-left: auto;
margin-right: auto;
padding-bottom: 0;
width: 32px;
}
.gv-activated .gv-app-rail.gv-app-rail-minimal .gv-item .gv-item-icon {
padding: 6px;
}
.gv-activated .gv-app-rail.gv-app-rail-minimal .gv-item .gv-tooltip {
left: calc(100% + var(--size-sm));
opacity: 0;
pointer-events: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s;
word-break: normal;
}
.gv-activated .gv-app-rail.gv-app-rail-minimal .gv-item:hover .gv-tooltip,
.gv-activated .gv-app-rail.gv-app-rail-minimal .gv-item.focus-visible .gv-tooltip {
opacity: 1;
pointer-events: auto;
}
.gv-activated .gv-app-rail.gv-app-rail-minimal .gv-item:hover .gv-tooltip,
.gv-activated .gv-app-rail.gv-app-rail-minimal .gv-item:focus-visible .gv-tooltip {
opacity: 1;
pointer-events: auto;
}
.gv-activated .gv-app-rail .gv-overflow-menu {
bottom: 0;
left: calc(100% + var(--size-sm) + var(--size-xs));
}
.gv-activated .gv-overflow-menu {
position: absolute;
width: 300px;
z-index: 1100;
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
.gv-activated .gv-overflow-menu .gv-checkbox {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-overflow-menu .gv-radio {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-overflow-menu .gv-radio:checked::after {
border-width: 5px;
}
.gv-activated .gv-overflow-menu .gv-input.gv-input-number button {
padding: 0;
}
.gv-activated .gv-overflow-menu .gv-toggle {
--toggle-height: 16px;
--toggle-width: 28px;
--toggle-dot-indent: 2px;
}
.gv-activated .gv-overflow-menu gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-overflow-menu .gv-menu {
background-color: var(--color-surface-bright);
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
box-shadow: var(--color-shadow-elevated);
display: flex;
flex-direction: column;
padding-bottom: var(--size-md);
width: 100%;
}
.gv-activated .gv-overflow-menu .gv-menu-header {
padding: var(--size-md);
}
.gv-activated .gv-overflow-menu .gv-menu-title {
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-overflow-menu .gv-menu-content {
max-height: 182px;
overflow-y: auto;
padding: 0 var(--size-md);
}
.gv-activated .gv-overflow-menu .gv-menu-list {
display: grid;
grid-gap: var(--size-sm) var(--size-md);
gap: var(--size-sm) var(--size-md);
grid-template-columns: repeat(3, 1fr);
}
.gv-activated .gv-overflow-menu .gv-item {
align-items: center;
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
gap: 0;
padding-bottom: var(--size-sm);
position: relative;
text-align: center;
text-decoration: none;
width: 100%;
-webkit-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-overflow-menu .gv-item .gv-indicator {
position: absolute;
right: var(--size-xs);
top: var(--size-xs);
}
.gv-activated .gv-overflow-menu .gv-item .gv-item-icon {
border-radius: var(--border-radius);
display: inline-block;
padding: 6px;
}
.gv-activated .gv-overflow-menu .gv-item.gv-new {
background-color: var(--color-signal-info-light);
}
.gv-activated .gv-overflow-menu .gv-item.gv-active.gv-new,
.gv-activated .gv-overflow-menu .gv-item.gv-active .gv-item-icon {
background-color: var(--color-state-active);
}
.gv-activated .gv-overflow-menu .gv-item.gv-new:hover,
.gv-activated .gv-overflow-menu .gv-item:hover .gv-item-icon {
background-color: var(--color-state-hover);
}
.gv-activated .gv-sidedrawer .gv-app-rail {
background: none;
border: none;
flex: 0 0 auto;
padding: 0;
width: auto;
}
.gv-activated .gv-sidedrawer .gv-app-rail .gv-logo {
display: block;
margin: var(--size-sm) var(--size-xl) var(--size-md) var(--size-sm);
}
.gv-activated .gv-sidedrawer .gv-app-rail .gv-nav-list {
padding-left: 0;
padding-right: 0;
}
.gv-activated .gv-sidedrawer .gv-app-rail .gv-item {
flex-direction: row;
padding-bottom: var(--size-xs);
padding-top: var(--size-xs);
text-align: left;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-sidedrawer .gv-app-rail .gv-item.gv-active {
background-color: var(--color-state-active);
}
.gv-activated .gv-sidedrawer .gv-app-rail .gv-item:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-sidedrawer .gv-app-rail .gv-item .gv-indicator {
left: 30px;
right: auto;
}
.gv-activated .gv-sidedrawer .gv-app-rail .gv-item .gv-item-icon {
padding-bottom: 2px;
padding-top: 2px;
}
.gv-activated .gv-sidedrawer .gv-app-rail .gv-item .gv-item-chevron {
flex-shrink: 0;
margin-left: auto;
}
.gv-activated .gv-sidedrawer .gv-side-menu .gv-btn-back {
align-items: center;
color: var(--color-body-on-alternative);
display: inline-flex;
margin-bottom: var(--size-md);
padding: var(--size-md) 0;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-sidedrawer .gv-side-menu .gv-btn-back gv-icon {
margin-right: var(--size-xs);
}
.gv-activated .gv-badge {
--badge-color-background: inherit;
--badge-color-border: inherit;
background-color: var(--badge-color-background);
border: var(--size-border) solid var(--badge-color-border);
border-radius: var(--border-radius);
color: var(--color-body-on-default);
display: inline-block;
/* text-overflow doesn't work on flex or inline-flex, so use inline-block to keep the component simple */
height: 1.625rem;
/* 26px */
max-width: 100%;
padding: calc(var(--size-xs) - var(--size-border)) var(--size-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-badge gv-logo {
flex-shrink: 0;
}
.gv-activated .gv-badge.gv-badge-generic {
--badge-color-background: var(--color-surface-bright);
--badge-color-border: var(--color-border);
}
.gv-activated .gv-badge.gv-badge-alert {
--badge-color-background: var(--color-signal-alert-light);
--badge-color-border: var(--color-signal-alert);
}
.gv-activated .gv-badge.gv-badge-warning {
--badge-color-background: var(--color-signal-warning-light);
--badge-color-border: var(--color-signal-warning);
}
.gv-activated .gv-badge.gv-badge-info {
--badge-color-background: var(--color-signal-info-light);
--badge-color-border: var(--color-signal-info);
}
.gv-activated .gv-badge.gv-badge-success {
--badge-color-background: var(--color-signal-success-light);
--badge-color-border: var(--color-signal-success);
}
.gv-activated .gv-badge.gv-badge-discount {
--badge-color-background: #f9df79;
--badge-color-border: #f6c844;
color: var(--color-on-fixed-black);
}
.gv-activated .gv-badge.gv-badge-aida {
--badge-color-background: var(--color-surface-bright);
--badge-color-border: var(--color-surface-accent);
align-items: center;
display: inline-flex;
gap: var(--size-xs);
max-width: none;
max-width: initial;
overflow: visible;
overflow: initial;
text-overflow: initial;
white-space: inherit;
}
.gv-activated .gv-badge.gv-badge-aida svg {
height: 14px;
width: auto;
}
.gv-activated .gv-breadcrumbs {
align-items: center;
color: var(--color-body-on-alternative);
display: inline-flex;
flex-wrap: wrap;
gap: var(--size-sm);
padding: 0;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
/* Back link */
}
.gv-activated .gv-breadcrumbs li {
align-items: center;
display: inline-flex;
list-style: none;
margin: 0;
}
.gv-activated .gv-breadcrumbs li:last-child {
color: var(--color-body-on-default);
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-breadcrumbs li gv-icon {
margin-left: var(--size-sm);
}
.gv-activated .gv-breadcrumbs a,
.gv-activated .gv-breadcrumbs span {
/* Apply values to calculate em_based margins that work with any font size */
}
.gv-activated .gv-breadcrumbs a::before,
.gv-activated .gv-breadcrumbs span::before {
margin-bottom: calc(-0.375em + 0px);
}
.gv-activated .gv-breadcrumbs a::after,
.gv-activated .gv-breadcrumbs span::after {
margin-top: calc(-0.3125em + 0px);
}
.gv-activated .gv-breadcrumbs a::before,
.gv-activated .gv-breadcrumbs span::before,
.gv-activated .gv-breadcrumbs a::after,
.gv-activated .gv-breadcrumbs span::after {
content: "";
display: block;
height: 0;
width: 0;
}
.gv-activated .gv-breadcrumbs a {
color: var(--color-body-on-alternative);
text-decoration: none;
}
.gv-activated .gv-breadcrumbs a:hover {
color: var(--color-state-form-active);
}
.gv-activated .gv-breadcrumbs a:active {
color: var(--color-state-form-active);
opacity: var(--opacity-active-links);
}
.gv-activated .gv-breadcrumbs > a {
align-items: center;
display: inline-flex;
}
.gv-activated .gv-breadcrumbs > a gv-icon {
margin-right: var(--size-xs);
}
/* Button group mixin */
/* Button component */
.gv-activated .gv-button {
--button-color-background: inherit;
--button-color-border: transparent;
--button-color-text: inherit;
--button-height: var(--form-element-height);
--color-link: var(--button-color-text);
align-items: center;
background: var(--button-color-background);
border: var(--size-border) solid var(--button-color-border);
border-radius: var(--button-radius);
color: var(--button-color-text);
cursor: pointer;
display: inline-flex;
gap: var(--size-xs);
height: var(--button-height);
font-family: inherit;
font-weight: var(--font-weight-semibold);
justify-content: center;
outline: none;
padding: var(--button-padding-tb) var(--button-padding-lr);
text-align: center;
text-decoration: none;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-button.gv-button-primary {
--button-color-background: var(--color-button-bg-primary);
--button-color-border: var(--color-button-border-primary);
--button-color-text: var(--color-button-fg-on-primary);
}
.gv-activated .gv-button.gv-button-secondary {
--button-color-background: var(--color-surface-bright);
--button-color-border: var(--color-button-border-secondary);
--button-color-text: var(--color-body-on-default);
}
.gv-activated .gv-button.gv-button-cta {
--button-color-background: var(--color-button-bg-cta);
--button-color-border: var(--color-button-bg-cta);
--button-color-text: var(--color-button-fg-on-cta);
}
.gv-activated .gv-button.gv-button-cancel {
--button-color-background: transparent;
--button-color-border: var(--color-border);
--button-color-text: var(--color-body-on-default);
}
.gv-activated .gv-button.gv-button-destructive {
--button-color-background: var(--color-signal-alert);
--button-color-border: var(--color-signal-alert);
--button-color-text: var(--color-on-fixed-white);
}
.gv-activated .gv-button.gv-button-neutral {
--button-color-background: var(--color-on-fixed-white);
--button-color-border: var(--color-on-fixed-white);
--button-color-text: var(--color-on-fixed-black);
}
.gv-activated .gv-button.gv-button-upgrade {
--button-color-background: var(--color-button-bg-upgrade);
--button-color-border: var(--color-button-bg-upgrade);
--button-color-text: var(--color-on-fixed-white);
}
.gv-activated .gv-button.gv-button-aida {
--button-color-background: var(--color-button-bg-aida);
--button-color-border: var(--color-button-border-aida);
--button-color-text: var(--color-button-fg-on-aida);
}
.gv-activated .gv-button.gv-button-fab,
.gv-activated .gv-button.gv-button-icon-only,
.gv-activated .gv-button.gv-button-icon,
.gv-activated .gv-button.gv-button-icon-inline {
padding-left: 0;
padding-right: 0;
width: var(--button-height);
}
.gv-activated .gv-button.gv-button-fab,
.gv-activated .gv-button.gv-button-icon {
border-radius: var(--button-height);
}
.gv-activated .gv-button:active {
color: var(--button-color-text);
opacity: var(--opacity-active-elements);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.gv-activated .gv-button:hover {
color: var(--button-color-text);
opacity: var(--opacity-active-elements);
text-decoration: none;
}
}
.gv-activated .gv-button.gv-disabled,
.gv-activated .gv-button:disabled {
cursor: auto;
opacity: var(--opacity-disabled-elements);
pointer-events: none;
}
.gv-activated .gv-button gv-icon {
flex-shrink: 0;
}
@media (max-width: 599px ) {
.gv-activated .gv-button {
width: 100%;
}
}
.gv-activated .gv-button-group {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
gap: var(--size-md);
}
.gv-activated .gv-button-group.gv-vertical {
align-items: stretch;
flex-direction: column;
gap: var(--size-sm);
width: 100%;
}
@media (max-width: 599px ) {
.gv-activated .gv-button-group {
align-items: stretch;
flex-direction: column;
gap: var(--size-sm);
width: 100%;
}
}
.gv-activated .gv-button-toggle-group {
--color-toggle-button-bg: transparent;
--color-toggle-button-text: var(--color-body-on-alternative);
display: flex;
flex-wrap: nowrap;
}
.gv-activated .gv-button-toggle-group .gv-button-toggle {
align-items: center;
background: var(--color-toggle-button-bg);
border-radius: var(--border-radius);
color: var(--color-toggle-button-text);
cursor: pointer;
display: inline-flex;
font-family: inherit;
height: var(--form-element-height);
justify-content: center;
padding: var(--size-sm) var(--size-md);
}
.gv-activated .gv-button-toggle-group .gv-button-toggle:hover {
--color-toggle-button-bg: var(--color-state-hover);
}
.gv-activated .gv-button-toggle-group .gv-button-toggle.gv-active {
--color-toggle-button-bg: var(--color-state-active);
--color-toggle-button-text: var(--color-body-on-default);
}
.gv-activated .gv-button-toggle-group .gv-button-toggle gv-icon {
flex-shrink: 0;
}
.gv-activated .gv-button-toggle-group.gv-toggle-view {
background: var(--color-surface-form);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
display: inline-flex;
}
.gv-activated .gv-button-toggle-group.gv-toggle-view.gv-on-surface-dim {
background-color: var(--color-surface-bright);
}
.gv-activated .gv-button-toggle-group.gv-toggle-view .gv-button-toggle {
border-radius: 0;
color: var(--color-body-on-default);
gap: var(--size-xs);
padding: var(--size-xs);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-button-toggle-group.gv-toggle-view .gv-button-toggle:first-child {
border-bottom-left-radius: var(--border-radius);
border-top-left-radius: var(--border-radius);
}
.gv-activated .gv-button-toggle-group.gv-toggle-view .gv-button-toggle:last-child {
border-bottom-right-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-divider-button {
align-items: center;
display: flex;
gap: var(--size-md);
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
.gv-activated .gv-divider-button .gv-checkbox {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-divider-button .gv-radio {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-divider-button .gv-radio:checked::after {
border-width: 5px;
}
.gv-activated .gv-divider-button .gv-input.gv-input-number button {
padding: 0;
}
.gv-activated .gv-divider-button .gv-toggle {
--toggle-height: 16px;
--toggle-width: 28px;
--toggle-dot-indent: 2px;
}
.gv-activated .gv-divider-button gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-divider-button .gv-divider {
--divider-color: var(--color-border-alt);
}
.gv-activated .gv-divider-button .gv-button {
white-space: nowrap;
}
.gv-activated .gv-divider-button .gv-button[aria-expanded="true"] gv-icon:last-child {
transform: rotate(180deg);
}
.gv-activated .gv-callout {
background: var(--color-surface-bright);
align-items: center;
display: flex;
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
flex-direction: row;
gap: var(--size-lg);
padding: var(--size-lg);
position: relative;
}
.gv-activated .gv-callout gv-tile {
flex: 0 0 auto;
}
.gv-activated .gv-callout .gv-text {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.gv-activated .gv-callout .gv-text .gv-title {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-callout .gv-text .gv-title {
letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-callout .gv-text .gv-title {
letter-spacing: calc((var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-callout .gv-text .gv-title {
letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-callout .gv-text .gv-title {
font-size: calc(var(--font-size-text-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-callout .gv-text .gv-title {
font-size: calc((var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-callout .gv-text .gv-title {
font-size: calc(var(--font-size-text-lg-max) * 1rem);
}
}
.gv-activated .gv-callout .gv-text .gv-description {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-callout .gv-button {
width: auto;
}
.gv-activated .gv-callout .gv-close {
border-radius: var(--border-radius);
height: 40px;
width: 40px;
}
.gv-activated .gv-callout .gv-close:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-callout .gv-close:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-callout.gv-callout-vertical {
align-items: flex-start;
flex-direction: column;
}
.gv-activated .gv-callout.gv-callout-vertical .gv-button {
width: 100%;
}
[dir="ltr"] .gv-activated .gv-callout.gv-callout-vertical .gv-close {
right: var(--size-lg);
}
[dir="rtl"] .gv-activated .gv-callout.gv-callout-vertical .gv-close {
left: var(--size-lg);
}
.gv-activated .gv-callout.gv-callout-vertical .gv-close {
position: absolute;
top: var(--size-md);
}
.gv-activated .gv-callout.gv-callout-emphasis {
background: var(--color-surface-highlight);
}
@media (max-width: 599px ) {
.gv-activated .gv-callout {
align-items: flex-start;
flex-direction: column;
}
.gv-activated .gv-callout .gv-button {
width: 100%;
}
[dir="ltr"] .gv-activated .gv-callout .gv-close {
right: var(--size-lg);
}
[dir="rtl"] .gv-activated .gv-callout .gv-close {
left: var(--size-lg);
}
.gv-activated .gv-callout .gv-close {
position: absolute;
top: var(--size-md);
}
}
.gv-activated .gv-card {
background: var(--color-surface-bright);
border-radius: var(--border-radius);
border: var(--size-border) solid var(--color-border-alt);
box-shadow: var(--color-shadow-subtle);
color: var(--color-body-on-default);
display: flex;
flex-direction: column;
max-width: 100%;
position: relative;
text-decoration: none;
}
.gv-activated .gv-card .gv-card-image {
background: var(--color-surface-dim);
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
height: 200px;
margin: var(--size-lg) var(--size-lg) 0 var(--size-lg);
overflow: hidden;
position: relative;
text-align: center;
width: calc(100% - var(--size-xl));
}
.gv-activated .gv-card .gv-card-image img {
height: 220px;
left: 50%;
max-width: none;
position: absolute;
top: 16px;
transform: translateX(-50%);
width: 280px;
}
.gv-activated .gv-card .gv-card-illustration,
.gv-activated .gv-card .gv-card-tile,
.gv-activated .gv-card .gv-card-score {
padding: var(--size-lg) var(--size-lg) 0;
}
.gv-activated .gv-card .gv-card-resource {
margin-top: var(--size-sm);
}
.gv-activated .gv-card .gv-card-legend {
position: relative;
}
.gv-activated .gv-card .gv-card-legend .gv-card-title {
padding-right: var(--size-lg);
}
.gv-activated .gv-card .gv-card-legend .gv-legend-info {
color: var(--color-body-on-default);
}
.gv-activated .gv-card .gv-card-legend .gv-legend-info .gv-score {
margin-right: var(--size-sm);
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-card .gv-card-legend gv-icon[class*="gv-legend-"] {
position: absolute;
top: calc(var(--size-lg));
right: var(--size-lg);
}
.gv-activated .gv-card .gv-card-logo {
padding: var(--size-md) var(--size-lg) 0;
}
.gv-activated .gv-card .gv-card-logo:first-child {
padding-top: var(--size-lg);
}
.gv-activated .gv-card .gv-card-content {
color: var(--color-body-on-alternative);
flex-grow: 1;
padding: var(--size-md) var(--size-lg) 0;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-card .gv-card-content > *:not(:last-child) {
margin-bottom: var(--size-xs);
}
.gv-activated .gv-card .gv-card-content .gv-card-resource {
color: var(--color-body-on-default);
margin: var(--size-sm) 0 var(--size-md) 0;
}
.gv-activated .gv-card .gv-card-content:first-child {
padding-top: var(--size-lg);
}
.gv-activated .gv-card .gv-card-content:last-child {
padding-bottom: var(--size-lg);
}
.gv-activated .gv-card .gv-card-content + .gv-notice-addon {
margin-top: var(--size-lg);
}
.gv-activated .gv-card .gv-card-title {
color: var(--color-body-on-default);
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-card .gv-card-footer {
padding: var(--size-md) var(--size-lg) var(--size-lg);
}
.gv-activated .gv-card .gv-card-footer .gv-button {
width: 100%;
}
.gv-activated .gv-card.gv-hug-button .gv-card-footer .gv-button {
width: auto;
}
@media (max-width: 599px ) {
.gv-activated .gv-card.gv-hug-button .gv-card-footer .gv-button {
width: 100%;
}
}
.gv-activated a.gv-card:hover {
background-color: var(--color-state-hover);
}
.gv-activated a.gv-card:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-carousel {
container-type: inline-size;
display: flex;
flex-direction: column;
gap: var(--size-sm);
width: 100%;
}
.gv-activated .gv-carousel-slider {
display: flex;
flex-direction: row;
max-width: 100%;
min-width: 0;
width: 100%;
}
.gv-activated .gv-carousel-slider.gv-scrollable {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-snap-align: start;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.gv-activated .gv-carousel-slider.gv-scrollable::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-carousel-slider.gv-scrollable .gv-item {
scroll-snap-align: start;
}
.gv-activated .gv-carousel-nav {
align-items: center;
display: flex;
gap: var(--size-md);
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.gv-activated .gv-carousel-button {
--color-button-icon: var(--color-body-on-default);
color: var(--color-button-icon);
}
.gv-activated .gv-carousel-button:disabled {
--color-button-icon: var(--color-body-on-disabled);
pointer-events: none;
}
.gv-activated .gv-carousel-button:not(.gv-storefront-section .gv-carousel-button) {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-carousel-button:not(.gv-storefront-section .gv-carousel-button):hover {
background-color: var(--color-state-hover);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover);
}
.gv-activated .gv-carousel-button:not(.gv-storefront-section .gv-carousel-button):active {
background-color: var(--color-state-active);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active);
}
.gv-activated .gv-carousel-pagination {
align-items: center;
display: flex;
gap: var(--size-sm);
justify-content: center;
min-width: 164px;
}
.gv-activated .gv-carousel-pagination .gv-dot {
background: var(--color-gray-400);
border-radius: var(--size-sm);
color: transparent;
cursor: pointer;
display: block;
height: var(--size-sm);
width: var(--size-sm);
}
.gv-activated .gv-carousel-pagination .gv-dot.gv-active {
background: var(--color-primary);
}
/* Shared slider mixins */
/* Product table mixins */
/* Comparison table mixins */
/* Shared css */
.gv-activated .gv-features-table {
--slider-px-max: var(--size-fluid-max-value);
--slider-px-min: var(--size-fluid-min-value);
--table-sidebar-width: calc(0 * 1px);
/* Ensures unit is preserved for calc() used in mixins */
--table-slider-gap: calc(0 * 1px);
/* Ensures unit is preserved for calc() used in mixins */
--recommended-label-height: 0;
--slider-dots-height: var(--size-lg);
--slider-dots-space: calc(var(--slider-dots-height) + var(--size-sm));
--table-zebra-even: var(--color-zebra-odd);
--table-zebra-odd: var(--color-zebra-even);
/* Slider navigation */
/* Table content */
/* Product table css */
/* Comparison table css */
/* Deprecated recommended class */
}
.gv-activated .gv-features-table.gv-products-2 .gv-product,
.gv-activated .gv-features-table.gv-products-2 .gv-cell {
max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (2 - 1))) / 2);
}
.gv-activated .gv-features-table.gv-products-3 .gv-product,
.gv-activated .gv-features-table.gv-products-3 .gv-cell {
max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (3 - 1))) / 3);
}
.gv-activated .gv-features-table.gv-products-4 .gv-product,
.gv-activated .gv-features-table.gv-products-4 .gv-cell {
max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (4 - 1))) / 4);
}
.gv-activated .gv-features-table.gv-products-5 .gv-product,
.gv-activated .gv-features-table.gv-products-5 .gv-cell {
max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (5 - 1))) / 5);
}
.gv-activated .gv-features-table .gv-dots-scroll-area {
position: relative;
}
.gv-activated .gv-features-table .gv-slider-pagination {
display: none;
justify-content: center;
bottom: var(--size-lg);
position: sticky;
z-index: 199;
width: 100%;
}
.gv-activated .gv-features-table .gv-slider-pagination .gv-dots {
align-items: center;
background-color: transparent;
border: 1px solid transparent;
border-radius: var(--border-radius);
display: flex;
gap: var(--size-sm);
height: var(--slider-dots-height);
padding: 0 var(--size-md);
transition: all 1s;
}
.gv-activated .gv-features-table .gv-slider-pagination .gv-dots > * {
background: var(--color-gray-400);
border-radius: var(--size-sm);
color: transparent;
cursor: pointer;
display: block;
height: var(--size-sm);
width: var(--size-sm);
}
.gv-activated .gv-features-table .gv-slider-pagination .gv-dots > *.gv-active {
background: var(--color-primary);
}
.gv-activated .gv-features-table .gv-slider-pagination.gv-state-top {
bottom: 100%;
transform: translateY(calc(var(--slider-dots-space) * -1));
}
.gv-activated .gv-features-table .gv-slider-pagination.gv-state-overlay .gv-dots {
background-color: rgb(from var(--color-surface-bright) r g b / 90%);
border: 1px solid var(--color-border);
}
.gv-activated .gv-features-table .gv-slider-nav {
display: none;
position: sticky;
top: 0;
width: 100%;
z-index: 199;
}
.gv-activated .gv-features-table .gv-slider-nav.gv-state-bottom {
top: auto !important;
}
.gv-activated .gv-features-table .gv-slider-nav.gv-state-bottom {
position: absolute;
/* Override value added by Javascript */
}
.gv-activated .gv-features-table .gv-slider-nav:not(.gv-state-bottom) {
bottom: auto !important;
}
.gv-activated .gv-features-table .gv-slider-nav:not(.gv-state-bottom) {
/* Override value added by Javascript */
}
.gv-activated .gv-features-table .gv-slider-nav .gv-nav-button {
align-items: center;
background-color: var(--color-primary);
border-radius: var(--border-radius);
color: var(--color-button-fg-on);
display: flex;
height: 40px;
justify-content: center;
position: absolute;
top: 0;
width: 40px;
}
.gv-activated .gv-features-table .gv-slider-nav .gv-nav-button.gv-previous {
left: 0;
transform: translate(-50%, -50%);
}
.gv-activated .gv-features-table .gv-slider-nav .gv-nav-button.gv-next {
right: 0;
transform: translate(50%, -50%);
}
.gv-activated .gv-features-table .gv-slider-nav .gv-nav-button.gv-disabled {
cursor: auto;
opacity: var(--opacity-disabled-elements);
pointer-events: none;
}
.gv-activated .gv-features-table .gv-table-container {
position: relative;
}
.gv-activated .gv-features-table .gv-table {
box-sizing: content-box;
padding-top: var(--recommended-label-height);
}
.gv-activated .gv-features-table .gv-section .gv-table-row {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-features-table .gv-table-row {
display: flex;
flex-wrap: nowrap;
position: relative;
}
.gv-activated .gv-features-table .gv-table-row:nth-child(odd) .gv-cell-info,
.gv-activated .gv-features-table .gv-table-row:nth-child(odd) .gv-cell {
background: var(--table-zebra-odd);
}
.gv-activated .gv-features-table .gv-table-row:nth-child(even) .gv-cell-info,
.gv-activated .gv-features-table .gv-table-row:nth-child(even) .gv-cell {
background: var(--table-zebra-even);
}
.gv-activated .gv-features-table .gv-product,
.gv-activated .gv-features-table .gv-cell {
flex: 1;
position: relative;
}
.gv-activated .gv-features-table .gv-header-info,
.gv-activated .gv-features-table .gv-product {
background: var(--table-zebra-odd);
border-color: var(--color-border);
border-style: solid;
border-width: 1px 1px 0 0;
}
.gv-activated .gv-features-table .gv-cell-info,
.gv-activated .gv-features-table .gv-cell {
border-color: var(--color-border);
border-style: solid;
border-width: 0 1px 0 0;
display: flex;
gap: var(--size-sm);
padding: var(--size-sm) var(--size-lg);
}
.gv-activated .gv-features-table .gv-cell-info .gv-tooltip-button,
.gv-activated .gv-features-table .gv-cell .gv-tooltip-button {
color: var(--color-body-on-alternative);
}
.gv-activated .gv-features-table .gv-product {
display: flex;
flex-direction: column;
}
.gv-activated .gv-features-table .gv-product .gv-recommended-label {
background: var(--color-recommended-bg);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
color: var(--color-recommended-fg-on);
left: -1px;
opacity: 1;
padding: var(--size-xs) var(--size-sm);
position: absolute;
right: -1px;
text-align: center;
top: 0;
transform: translateY(-100%);
transition: opacity 0.2s linear 0s;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-features-table .gv-product .gv-content {
border-bottom: 1px solid var(--color-border);
color: var(--color-body-on-alternative);
flex-grow: 1;
padding: var(--size-lg);
position: relative;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-features-table .gv-product .gv-content .gv-title {
color: var(--color-body-on-default);
margin-bottom: var(--size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: 0;
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table .gv-product .gv-content .gv-title {
font-size: calc(var(--font-size-text-xl-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table .gv-product .gv-content .gv-title {
font-size: calc((var(--font-size-text-xl-min) * 1rem) + (var(--font-size-text-xl-max) - var(--font-size-text-xl-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-xl-min) * 1rem) + (var(--font-size-text-xl-max) - var(--font-size-text-xl-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table .gv-product .gv-content .gv-title {
font-size: calc(var(--font-size-text-xl-max) * 1rem);
}
}
.gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle {
display: block;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-features-table .gv-product .gv-bottom {
padding: var(--size-lg);
position: relative;
}
.gv-activated .gv-features-table .gv-product .gv-bottom > *:not(:last-child) {
margin-bottom: 24px;
}
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-discount,
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-with-badge {
align-content: flex-start;
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--size-sm);
}
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-old {
color: var(--color-body-on-alternative);
text-decoration: line-through;
}
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
gap: var(--size-sm);
}
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text {
white-space: nowrap;
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-md);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text {
letter-spacing: calc(var(--letterspacing-heading-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text {
letter-spacing: calc((var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text {
letter-spacing: calc(var(--letterspacing-heading-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text {
font-size: calc(var(--font-size-heading-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text {
font-size: calc((var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text {
font-size: calc(var(--font-size-heading-md-max) * 1rem);
}
}
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-period {
padding-bottom: var(--size-xs);
white-space: nowrap;
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-info {
color: var(--color-body-on-alternative);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label {
color: var(--color-state-form-active);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-tooltip-container {
display: inline-block;
vertical-align: middle;
}
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-tooltip-container gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-features-table .gv-product .gv-bottom .gv-button {
width: 100%;
}
.gv-activated .gv-features-table .gv-cell > *:not(.gv-sr-only) {
position: relative;
}
.gv-activated .gv-features-table .gv-cell .gv-cell-text {
flex-grow: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-current-1:not(.gv-recommended-1) .gv-product:nth-child(1),
.gv-activated .gv-features-table.gv-product-table.gv-current-1:not(.gv-recommended-1) .gv-cell:nth-child(1) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-2:not(.gv-recommended-2) .gv-product:nth-child(2),
.gv-activated .gv-features-table.gv-product-table.gv-current-2:not(.gv-recommended-2) .gv-cell:nth-child(2) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-3:not(.gv-recommended-3) .gv-product:nth-child(3),
.gv-activated .gv-features-table.gv-product-table.gv-current-3:not(.gv-recommended-3) .gv-cell:nth-child(3) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-4:not(.gv-recommended-4) .gv-product:nth-child(4),
.gv-activated .gv-features-table.gv-product-table.gv-current-4:not(.gv-recommended-4) .gv-cell:nth-child(4) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(5),
.gv-activated .gv-features-table.gv-product-table.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(5) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table[data-current="1"] .gv-row-cell:nth-child(1) {
--table-col-bg: var(--table-current-bg-default);
--table-col-bg-dim: var(--table-current-bg-dim);
--table-col-border: var(--color-border-alt);
}
.gv-activated .gv-features-table.gv-product-table[data-current="1"] .gv-row-cell:nth-child(1):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table[data-current="1"]:not([data-recommended="0"]) .gv-row-cell:nth-child(1) {
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-2:not(.gv-recommended-2) .gv-product:nth-child(2),
.gv-activated .gv-features-table.gv-product-table.gv-current-2:not(.gv-recommended-2) .gv-cell:nth-child(2) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-3:not(.gv-recommended-3) .gv-product:nth-child(3),
.gv-activated .gv-features-table.gv-product-table.gv-current-3:not(.gv-recommended-3) .gv-cell:nth-child(3) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-4:not(.gv-recommended-4) .gv-product:nth-child(4),
.gv-activated .gv-features-table.gv-product-table.gv-current-4:not(.gv-recommended-4) .gv-cell:nth-child(4) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(5),
.gv-activated .gv-features-table.gv-product-table.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(5) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table[data-current="2"] .gv-row-cell:nth-child(2) {
--table-col-bg: var(--table-current-bg-default);
--table-col-bg-dim: var(--table-current-bg-dim);
--table-col-border: var(--color-border-alt);
}
.gv-activated .gv-features-table.gv-product-table[data-current="2"] .gv-row-cell:nth-child(2):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table[data-current="2"]:not([data-recommended="1"]) .gv-row-cell:nth-child(2) {
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-3:not(.gv-recommended-3) .gv-product:nth-child(3),
.gv-activated .gv-features-table.gv-product-table.gv-current-3:not(.gv-recommended-3) .gv-cell:nth-child(3) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-4:not(.gv-recommended-4) .gv-product:nth-child(4),
.gv-activated .gv-features-table.gv-product-table.gv-current-4:not(.gv-recommended-4) .gv-cell:nth-child(4) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(5),
.gv-activated .gv-features-table.gv-product-table.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(5) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table[data-current="3"] .gv-row-cell:nth-child(3) {
--table-col-bg: var(--table-current-bg-default);
--table-col-bg-dim: var(--table-current-bg-dim);
--table-col-border: var(--color-border-alt);
}
.gv-activated .gv-features-table.gv-product-table[data-current="3"] .gv-row-cell:nth-child(3):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table[data-current="3"]:not([data-recommended="2"]) .gv-row-cell:nth-child(3) {
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-4:not(.gv-recommended-4) .gv-product:nth-child(4),
.gv-activated .gv-features-table.gv-product-table.gv-current-4:not(.gv-recommended-4) .gv-cell:nth-child(4) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(5),
.gv-activated .gv-features-table.gv-product-table.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(5) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table[data-current="4"] .gv-row-cell:nth-child(4) {
--table-col-bg: var(--table-current-bg-default);
--table-col-bg-dim: var(--table-current-bg-dim);
--table-col-border: var(--color-border-alt);
}
.gv-activated .gv-features-table.gv-product-table[data-current="4"] .gv-row-cell:nth-child(4):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table[data-current="4"]:not([data-recommended="3"]) .gv-row-cell:nth-child(4) {
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(5),
.gv-activated .gv-features-table.gv-product-table.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(5) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-product-table[data-current="5"] .gv-row-cell:nth-child(5) {
--table-col-bg: var(--table-current-bg-default);
--table-col-bg-dim: var(--table-current-bg-dim);
--table-col-border: var(--color-border-alt);
}
.gv-activated .gv-features-table.gv-product-table[data-current="5"] .gv-row-cell:nth-child(5):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table[data-current="5"]:not([data-recommended="4"]) .gv-row-cell:nth-child(5) {
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-1 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-product:nth-child(1),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-cell:nth-child(1) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-product:nth-child(1)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-cell:nth-child(1)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-product:nth-child(1)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-cell:nth-child(1)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-table-row:nth-child(even) .gv-cell:nth-child(1)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(1) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-product:nth-child(2),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-cell:nth-child(2) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-product:nth-child(2)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-cell:nth-child(2)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-product:nth-child(2)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-cell:nth-child(2)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-table-row:nth-child(even) .gv-cell:nth-child(2)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(2) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-product:nth-child(3),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-cell:nth-child(3) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-product:nth-child(3)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-cell:nth-child(3)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-product:nth-child(3)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-cell:nth-child(3)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-table-row:nth-child(even) .gv-cell:nth-child(3)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(3) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-table-row:nth-child(even) .gv-cell:nth-child(4)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(4) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table[data-recommended="1"] .gv-row-cell:nth-child(1) {
--table-col-bg: var(--table-recommended-bg-default);
--table-col-bg-dim: var(--table-recommended-bg-dim);
--table-col-border: var(--table-recommended);
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table[data-recommended="1"] .gv-row-cell:nth-child(1):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-product:nth-child(2),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-cell:nth-child(2) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-product:nth-child(2)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-cell:nth-child(2)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-product:nth-child(2)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-cell:nth-child(2)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-table-row:nth-child(even) .gv-cell:nth-child(2)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(2) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-product:nth-child(3),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-cell:nth-child(3) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-product:nth-child(3)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-cell:nth-child(3)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-product:nth-child(3)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-cell:nth-child(3)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-table-row:nth-child(even) .gv-cell:nth-child(3)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(3) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-table-row:nth-child(even) .gv-cell:nth-child(4)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(4) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table[data-recommended="2"] .gv-row-cell:nth-child(2) {
--table-col-bg: var(--table-recommended-bg-default);
--table-col-bg-dim: var(--table-recommended-bg-dim);
--table-col-border: var(--table-recommended);
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table[data-recommended="2"] .gv-row-cell:nth-child(2):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-product:nth-child(3),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-cell:nth-child(3) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-product:nth-child(3)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-cell:nth-child(3)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-product:nth-child(3)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-cell:nth-child(3)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-table-row:nth-child(even) .gv-cell:nth-child(3)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(3) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-table-row:nth-child(even) .gv-cell:nth-child(4)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(4) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table[data-recommended="3"] .gv-row-cell:nth-child(3) {
--table-col-bg: var(--table-recommended-bg-default);
--table-col-bg-dim: var(--table-recommended-bg-dim);
--table-col-border: var(--table-recommended);
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table[data-recommended="3"] .gv-row-cell:nth-child(3):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-table-row:nth-child(even) .gv-cell:nth-child(4)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(4) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table[data-recommended="4"] .gv-row-cell:nth-child(4) {
--table-col-bg: var(--table-recommended-bg-default);
--table-col-bg-dim: var(--table-recommended-bg-dim);
--table-col-border: var(--table-recommended);
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table[data-recommended="4"] .gv-row-cell:nth-child(4):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5),
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5)::before,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5)::after,
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-product-table[data-recommended="5"] .gv-row-cell:nth-child(5) {
--table-col-bg: var(--table-recommended-bg-default);
--table-col-bg-dim: var(--table-recommended-bg-dim);
--table-col-border: var(--table-recommended);
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-features-table.gv-product-table[data-recommended="5"] .gv-row-cell:nth-child(5):not(:last-child) {
border-right-color: var(--table-col-border);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table.gv-product-table .gv-table-slider {
scroll-padding: calc(var(--slider-px-min) * 1px);
padding-left: calc(var(--slider-px-min) * 1px);
padding-right: calc(var(--slider-px-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table.gv-product-table .gv-table-slider {
scroll-padding: calc((var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080));
scroll-padding: calc(calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080));
padding-left: calc((var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080));
padding-left: calc(calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080));
padding-right: calc((var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080));
padding-right: calc(calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table.gv-product-table .gv-table-slider {
scroll-padding: calc(var(--slider-px-max) * 1px);
padding-left: calc(var(--slider-px-max) * 1px);
padding-right: calc(var(--slider-px-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table.gv-product-table .gv-table-slider {
margin-left: calc((var(--slider-px-min) * 1px) * -1);
margin-right: calc((var(--slider-px-min) * 1px) * -1);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table.gv-product-table .gv-table-slider {
margin-left: calc((calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080)) * -1);
margin-right: calc((calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080)) * -1);
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table.gv-product-table .gv-table-slider {
margin-left: calc((var(--slider-px-max) * 1px) * -1);
margin-right: calc((var(--slider-px-max) * 1px) * -1);
}
}
.gv-activated .gv-features-table.gv-product-table .gv-product {
scroll-snap-align: start;
}
.gv-activated .gv-features-table.gv-product-table .gv-product .gv-bottom {
border-bottom: 1px solid var(--color-border);
}
.gv-activated .gv-features-table.gv-product-table .gv-product:first-child,
.gv-activated .gv-features-table.gv-product-table .gv-cell:first-child {
border-left-width: 1px;
}
.gv-activated .gv-features-table.gv-product-table .gv-section-header {
display: flex;
flex-wrap: nowrap;
position: relative;
}
.gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-cell {
padding-top: var(--size-md);
}
.gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title {
position: relative;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-features-table.gv-product-table .gv-icons {
display: grid;
grid-gap: var(--size-sm);
gap: var(--size-sm);
grid-template-columns: repeat(3, minmax(0, 1fr));
text-align: center;
width: 100%;
}
.gv-activated .gv-features-table.gv-product-table .gv-icons .gv-item {
align-items: center;
display: flex;
flex-direction: column;
}
.gv-activated .gv-features-table.gv-product-table .gv-icons .gv-item-label {
color: var(--color-body-on-alternative);
display: block;
width: 100%;
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-features-table.gv-product-table .gv-section:last-child .gv-table-row:last-child .gv-cell {
border-bottom-width: 1px;
}
@media (max-width: 599px ) {
.gv-activated .gv-features-table.gv-product-table.gv-products-2,
.gv-activated .gv-features-table.gv-product-table.gv-products-3 {
--table-slider-gap: var(--size-md);
}
.gv-activated .gv-features-table.gv-product-table.gv-products-2.gv-products-2 .gv-product,
.gv-activated .gv-features-table.gv-product-table.gv-products-3.gv-products-2 .gv-product,
.gv-activated .gv-features-table.gv-product-table.gv-products-2.gv-products-2 .gv-cell,
.gv-activated .gv-features-table.gv-product-table.gv-products-3.gv-products-2 .gv-cell {
max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (2 - 1))) / 2);
}
.gv-activated .gv-features-table.gv-product-table.gv-products-2.gv-products-3 .gv-product,
.gv-activated .gv-features-table.gv-product-table.gv-products-3.gv-products-3 .gv-product,
.gv-activated .gv-features-table.gv-product-table.gv-products-2.gv-products-3 .gv-cell,
.gv-activated .gv-features-table.gv-product-table.gv-products-3.gv-products-3 .gv-cell {
max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (3 - 1))) / 3);
}
.gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-slider-nav,
.gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-slider-nav,
.gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-slider-pagination,
.gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-slider-pagination {
display: flex;
}
.gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-dots-scroll-area,
.gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-dots-scroll-area {
padding-top: var(--slider-dots-space);
}
.gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-table-slider,
.gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-table-slider {
margin-bottom: var(--size-lg);
overflow-x: auto;
overscroll-behavior-x: none;
position: relative;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-table-slider::-webkit-scrollbar,
.gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-table-slider::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-table-row,
.gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-table-row {
gap: var(--table-slider-gap);
}
.gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-product,
.gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-product,
.gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-cell,
.gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-cell {
border-left-width: 1px;
}
.gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-table {
width: calc(100% + (1 * var(--table-slider-gap)) + (1 * ((100% - (var(--table-slider-gap) * (1 - 1))) / 1)));
}
.gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-table {
width: calc(100% + (2 * var(--table-slider-gap)) + (2 * ((100% - (var(--table-slider-gap) * (1 - 1))) / 1)));
}
.gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-table {
width: calc(100% + (3 * var(--table-slider-gap)) + (3 * ((100% - (var(--table-slider-gap) * (1 - 1))) / 1)));
}
.gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-table {
width: calc(100% + (4 * var(--table-slider-gap)) + (4 * ((100% - (var(--table-slider-gap) * (1 - 1))) / 1)));
}
}
@media (min-width: 600px ) {
.gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-table-slider,
.gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-table-slider {
margin: 0;
padding: 0;
}
}
@media (min-width: 600px ) and (max-width: 1023px ) {
.gv-activated .gv-features-table.gv-product-table .gv-slider-pagination .gv-dots > *:last-child {
display: none;
}
.gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-slider-pagination .gv-dots > *:nth-last-child(-n + 2),
.gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-slider-pagination .gv-dots > *:nth-last-child(-n + 2) {
display: none;
}
.gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-table {
width: calc(100% + (1 * var(--table-slider-gap)) + (1 * ((100% - (var(--table-slider-gap) * (3 - 1))) / 3)));
}
.gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-table {
width: calc(100% + (2 * var(--table-slider-gap)) + (2 * ((100% - (var(--table-slider-gap) * (3 - 1))) / 3)));
}
}
@media (max-width: 1023px ) {
.gv-activated .gv-features-table.gv-product-table.gv-products-4,
.gv-activated .gv-features-table.gv-product-table.gv-products-5 {
--table-slider-gap: var(--size-md);
}
.gv-activated .gv-features-table.gv-product-table.gv-products-4.gv-products-4 .gv-product,
.gv-activated .gv-features-table.gv-product-table.gv-products-5.gv-products-4 .gv-product,
.gv-activated .gv-features-table.gv-product-table.gv-products-4.gv-products-4 .gv-cell,
.gv-activated .gv-features-table.gv-product-table.gv-products-5.gv-products-4 .gv-cell {
max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (4 - 1))) / 4);
}
.gv-activated .gv-features-table.gv-product-table.gv-products-4.gv-products-5 .gv-product,
.gv-activated .gv-features-table.gv-product-table.gv-products-5.gv-products-5 .gv-product,
.gv-activated .gv-features-table.gv-product-table.gv-products-4.gv-products-5 .gv-cell,
.gv-activated .gv-features-table.gv-product-table.gv-products-5.gv-products-5 .gv-cell {
max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (5 - 1))) / 5);
}
.gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-slider-nav,
.gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-slider-nav,
.gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-slider-pagination,
.gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-slider-pagination {
display: flex;
}
.gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-dots-scroll-area,
.gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-dots-scroll-area {
padding-top: var(--slider-dots-space);
}
.gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-table-slider,
.gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-table-slider {
margin-bottom: var(--size-lg);
overflow-x: auto;
overscroll-behavior-x: none;
position: relative;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-table-slider::-webkit-scrollbar,
.gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-table-slider::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-table-row,
.gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-table-row {
gap: var(--table-slider-gap);
}
.gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-product,
.gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-product,
.gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-cell,
.gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-cell {
border-left-width: 1px;
}
}
@media (min-width: 1024px ) {
.gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-table-slider,
.gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-table-slider {
margin: 0;
padding: 0;
}
}
.gv-activated .gv-features-table.gv-comparison-table {
--table-sidebar-width: 220px;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-current-1:not(.gv-recommended-1) .gv-product:nth-child(2),
.gv-activated .gv-features-table.gv-comparison-table.gv-current-1:not(.gv-recommended-1) .gv-cell:nth-child(2) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-current-2:not(.gv-recommended-2) .gv-product:nth-child(3),
.gv-activated .gv-features-table.gv-comparison-table.gv-current-2:not(.gv-recommended-2) .gv-cell:nth-child(3) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-current-3:not(.gv-recommended-3) .gv-product:nth-child(4),
.gv-activated .gv-features-table.gv-comparison-table.gv-current-3:not(.gv-recommended-3) .gv-cell:nth-child(4) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-current-4:not(.gv-recommended-4) .gv-product:nth-child(5),
.gv-activated .gv-features-table.gv-comparison-table.gv-current-4:not(.gv-recommended-4) .gv-cell:nth-child(5) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(6),
.gv-activated .gv-features-table.gv-comparison-table.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(6) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-product:nth-child(2),
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-cell:nth-child(2) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-product:nth-child(2)::before,
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-cell:nth-child(2)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-product:nth-child(2)::after,
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-cell:nth-child(2)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-table-row:nth-child(even) .gv-cell:nth-child(2)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(2) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-product:nth-child(3),
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-cell:nth-child(3) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-product:nth-child(3)::before,
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-cell:nth-child(3)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-product:nth-child(3)::after,
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-cell:nth-child(3)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-table-row:nth-child(even) .gv-cell:nth-child(3)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(3) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-product:nth-child(4),
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-cell:nth-child(4) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-product:nth-child(4)::before,
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-cell:nth-child(4)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-product:nth-child(4)::after,
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-cell:nth-child(4)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-table-row:nth-child(even) .gv-cell:nth-child(4)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(4) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-product:nth-child(5),
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-cell:nth-child(5) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-product:nth-child(5)::before,
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-cell:nth-child(5)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-product:nth-child(5)::after,
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-cell:nth-child(5)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 {
--recommended-label-height: 26px;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-product:nth-child(6),
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-cell:nth-child(6) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-product:nth-child(6)::before,
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-cell:nth-child(6)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-product:nth-child(6)::after,
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-cell:nth-child(6)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(6)::before {
opacity: 0.18;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(6) {
border-bottom-color: var(--color-recommended-bg);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider {
padding-right: calc(var(--slider-px-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider {
padding-right: calc((var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080));
padding-right: calc(calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider {
padding-right: calc(var(--slider-px-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider {
margin-right: calc((var(--slider-px-min) * 1px) * -1);
margin-right: calc(calc(var(--slider-px-min) * 1px) * -1);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider {
margin-right: calc((calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080)) * -1);
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider {
margin-right: calc((var(--slider-px-max) * 1px) * -1);
margin-right: calc(calc(var(--slider-px-max) * 1px) * -1);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider .gv-table {
padding-right: calc(var(--slider-px-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider .gv-table {
padding-right: calc((var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080));
padding-right: calc(calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider .gv-table {
padding-right: calc(var(--slider-px-max) * 1px);
}
}
.gv-activated .gv-features-table.gv-comparison-table .gv-table-container::before,
.gv-activated .gv-features-table.gv-comparison-table .gv-table-container::after {
background-color: var(--color-border);
bottom: 0;
content: "";
position: absolute;
top: var(--recommended-label-height);
width: 1px;
z-index: 198;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-table-container::before {
left: 0;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-table-container::after {
right: 0;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-product {
border-bottom-width: 1px;
scroll-snap-align: end;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-table-info {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-features-table.gv-comparison-table .gv-table-info.gv-header-info {
border-bottom-width: 1px;
padding: var(--size-lg);
}
.gv-activated .gv-features-table.gv-comparison-table .gv-bottom-info {
display: none;
padding: var(--size-lg) 0 0;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-header-info,
.gv-activated .gv-features-table.gv-comparison-table .gv-cell-info {
border-right: 1px solid var(--color-border);
flex: 0 0 var(--table-sidebar-width);
left: 0;
position: sticky;
width: var(--table-sidebar-width);
z-index: 190;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-section-header {
background-color: var(--color-surface-bright);
border-right: 1px solid var(--color-border);
position: relative;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title {
display: block;
left: 0;
padding: var(--size-md) 0 var(--size-md) var(--size-lg);
position: sticky;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-features-table.gv-comparison-table .gv-cell-info .gv-cell-label {
flex-grow: 1;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-cell {
justify-content: center;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-cell .gv-cell-text {
text-align: center;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-section-header + .gv-table-row .gv-cell-info,
.gv-activated .gv-features-table.gv-comparison-table .gv-section-header + .gv-table-row .gv-cell {
border-top-width: 1px;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-section .gv-table-row:last-child .gv-cell-info,
.gv-activated .gv-features-table.gv-comparison-table .gv-section .gv-table-row:last-child .gv-cell {
border-bottom-width: 1px;
}
@media (max-width: 599px ) {
.gv-activated .gv-features-table.gv-comparison-table.gv-products-1 .gv-header-info {
display: none;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-bottom-info {
display: block;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-table {
width: calc(var(--table-sidebar-width) + (100% * 2));
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-section-title .gv-title {
width: calc(((100% - var(--table-sidebar-width)) / 2) - 1px);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-slider-nav,
.gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-slider-pagination {
display: flex;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-dots-scroll-area {
padding-top: var(--slider-dots-space);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-table-slider {
margin-bottom: var(--size-lg);
overflow-x: auto;
overscroll-behavior-x: none;
position: relative;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-table-slider::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-table-row {
gap: var(--table-slider-gap);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-table {
width: calc(var(--table-sidebar-width) + (100% * 3));
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-section-title .gv-title {
width: calc(((100% - var(--table-sidebar-width)) / 3) - 1px);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-table {
width: calc(var(--table-sidebar-width) + (100% * 4));
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-section-title .gv-title {
width: calc(((100% - var(--table-sidebar-width)) / 4) - 1px);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-table {
width: calc(var(--table-sidebar-width) + (100% * 5));
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-section-title .gv-title {
width: calc(((100% - var(--table-sidebar-width)) / 5) - 1px);
}
.gv-activated .gv-features-table.gv-comparison-table:not(.gv-products-1) .gv-table-container::after {
display: none;
}
.gv-activated .gv-features-table.gv-comparison-table:not(.gv-products-1) .gv-product {
scroll-snap-align: start !important;
}
.gv-activated .gv-features-table.gv-comparison-table:not(.gv-products-1) .gv-header-info {
opacity: 0;
pointer-events: none;
}
.gv-activated .gv-features-table.gv-comparison-table:not(.gv-products-1) .gv-cell {
padding-left: calc(var(--table-sidebar-width) + var(--size-lg));
}
}
@media (min-width: 600px ) and (max-width: 1023px ) {
.gv-activated .gv-features-table.gv-comparison-table .gv-slider-pagination .gv-dots > *:last-child {
display: none;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-table {
width: calc(100% + ((100% - var(--table-sidebar-width)) / 2 * 1));
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-section-title .gv-title {
width: calc(var(--table-sidebar-width) - 1px + (((100% - var(--table-sidebar-width)) / 3) * 2));
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-table {
width: calc(100% + ((100% - var(--table-sidebar-width)) / 2 * 2));
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-section-title .gv-title {
width: calc(var(--table-sidebar-width) - 1px + (((100% - var(--table-sidebar-width)) / 4) * 2));
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-table {
width: calc(100% + ((100% - var(--table-sidebar-width)) / 2 * 3));
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-section-title .gv-title {
width: calc(var(--table-sidebar-width) - 1px + (((100% - var(--table-sidebar-width)) / 5) * 2));
}
}
@media (min-width: 600px ) {
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider {
margin-right: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider {
/* Override fluid */
/* Override fluid */
}
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider .gv-table {
padding-right: 0 !important;
}
.gv-activated .gv-features-table.gv-comparison-table .gv-table-slider .gv-table {
/* Override fluid */
}
.gv-activated .gv-features-table.gv-comparison-table .gv-product .gv-recommended-label.gv-off-view {
opacity: 0;
}
}
@media (max-width: 1023px ) {
.gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-slider-nav,
.gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-slider-nav,
.gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-slider-pagination,
.gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-slider-pagination {
display: flex;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-dots-scroll-area,
.gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-dots-scroll-area {
padding-top: var(--slider-dots-space);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-table-slider,
.gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-table-slider {
margin-bottom: var(--size-lg);
overflow-x: auto;
overscroll-behavior-x: none;
position: relative;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-table-slider::-webkit-scrollbar,
.gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-table-slider::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-table-row,
.gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-table-row {
gap: var(--table-slider-gap);
}
}
@media (max-width: 1279px ) {
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-slider-nav,
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-slider-pagination {
display: flex;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-dots-scroll-area {
padding-top: var(--slider-dots-space);
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-table-slider {
margin-bottom: var(--size-lg);
overflow-x: auto;
overscroll-behavior-x: none;
position: relative;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-table-slider::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-table-row {
gap: var(--table-slider-gap);
}
}
@media (min-width: 1024px ) and (max-width: 1279px ) {
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-table {
width: calc(100% + ((100% - var(--table-sidebar-width)) / 4 * 1));
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-section-title .gv-title {
width: calc(var(--table-sidebar-width) - 1px + (((100% - var(--table-sidebar-width)) / 5) * 4));
}
.gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-slider-pagination .gv-dots > *:nth-last-child(-n + 3) {
display: none;
}
}
.gv-activated .gv-features-table.gv-has-recommended {
--recommended-label-height: 26px;
}
.gv-activated .gv-feature-item {
--color-feature-icon: var(--color-signal-success);
align-items: flex-start;
display: flex;
gap: var(--size-sm);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-feature-item.gv-key-feature {
--color-feature-icon: var(--color-body-on-alternative);
}
.gv-activated .gv-feature-item gv-icon {
color: var(--color-feature-icon);
flex-shrink: 0;
}
.gv-activated .gv-feature-item .gv-content {
display: flex;
flex-wrap: wrap;
gap: var(--size-sm);
}
.gv-activated .gv-feature-item .gv-text {
padding-top: 1px;
}
.gv-activated .gv-top-features {
display: grid;
grid-gap: var(--size-lg);
gap: var(--size-lg);
}
.gv-activated .gv-top-features .gv-feature-item {
background: var(--color-surface-bright);
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
padding: var(--size-md) var(--size-lg);
}
@media (min-width: 768px ) {
.gv-activated .gv-top-features {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.gv-activated .gv-table-slider-nav {
display: flex;
position: absolute;
top: 0;
width: 100%;
z-index: 199;
}
.gv-activated .gv-table-slider-nav .gv-nav-button {
align-items: center;
background-color: var(--color-button-bg-primary);
border-radius: 50%;
color: var(--color-button-fg-on-primary);
display: flex;
height: 40px;
justify-content: center;
position: absolute;
top: 0;
width: 40px;
}
.gv-activated .gv-table-slider-nav .gv-nav-button.gv-previous {
left: 0;
transform: translate(-50%, -50%);
}
.gv-activated .gv-table-slider-nav .gv-nav-button.gv-next {
right: 0;
transform: translate(50%, -50%);
}
.gv-activated .gv-table-slider-nav .gv-nav-button[disabled] {
cursor: auto;
opacity: var(--opacity-disabled-elements);
pointer-events: none;
}
.gv-activated .gv-table-features {
--table-col-bg: var(--color-surface-bright);
--table-col-border: var(--color-border-alt);
--table-col-gap: 0;
--table-radius: var(--border-radius);
--table-slider-x-max: var(--size-fluid-max-value);
--table-slider-x-min: var(--size-fluid-min-value);
--table-slider-px: 0;
--recommended-label-height: 0;
position: relative;
/* Deprecated order price details and button */
}
.gv-activated .gv-table-features.gv-cq-columns {
container-type: inline-size;
}
.gv-activated .gv-table-features .gv-table-slider-nav {
display: none;
}
.gv-activated .gv-table-features .gv-table-slider {
position: relative;
}
.gv-activated .gv-table-features .gv-table-slider.gv-slider-scrollable {
display: flex;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-features .gv-table-slider.gv-slider-scrollable {
--table-slider-px: calc(var(--table-slider-x-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-features .gv-table-slider.gv-slider-scrollable {
--table-slider-px: calc(calc(var(--table-slider-x-min) * 1px) + (var(--table-slider-x-max) - var(--table-slider-x-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-features .gv-table-slider.gv-slider-scrollable {
--table-slider-px: calc(var(--table-slider-x-max) * 1px);
}
}
.gv-activated .gv-table-features .gv-table {
flex-shrink: 0;
position: relative;
}
.gv-activated .gv-table-features .gv-recommended-label {
background: var(--table-recommended);
border-top-left-radius: var(--table-radius);
border-top-right-radius: var(--table-radius);
color: var(--table-recommended-fg-on);
display: block;
height: var(--recommended-label-height);
left: -1px;
padding: var(--size-xs) var(--size-sm);
position: absolute;
right: -1px;
text-align: center;
top: 0;
transform: translateY(-100%);
}
.gv-activated .gv-table-features .gv-order-details {
display: flex;
flex-direction: column;
}
.gv-activated .gv-table-features .gv-order-details > .gv-price-container .gv-price-old {
color: var(--color-body-on-alternative);
text-decoration: line-through;
}
.gv-activated .gv-table-features .gv-order-details > .gv-price-container .gv-period {
white-space: nowrap;
}
.gv-activated .gv-table-features .gv-order-details > .gv-price-container .gv-price-info {
color: var(--color-body-on-alternative);
}
.gv-activated .gv-table-features .gv-order-details > .gv-price-container .gv-info-label {
color: var(--color-state-form-active);
}
.gv-activated .gv-table-features .gv-order-details > .gv-price-container .gv-tooltip-container {
display: inline-block;
vertical-align: middle;
}
.gv-activated .gv-table-features .gv-order-details > .gv-price-container .gv-tooltip-container gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-table-features .gv-order-button .gv-button {
width: 100%;
}
.gv-activated .gv-table-comparison {
--table-col-bg-dim: var(--color-surface-dim);
--table-col-border-left: transparent;
--table-row-header-height: 27px;
/* Deprecated order price details and button */
}
.gv-activated .gv-table-comparison.gv-current-1:not(.gv-recommended-1) .gv-product:nth-child(1),
.gv-activated .gv-table-comparison.gv-current-1:not(.gv-recommended-1) .gv-cell:nth-child(1) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison.gv-current-2:not(.gv-recommended-2) .gv-product:nth-child(2),
.gv-activated .gv-table-comparison.gv-current-2:not(.gv-recommended-2) .gv-cell:nth-child(2) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison.gv-current-3:not(.gv-recommended-3) .gv-product:nth-child(3),
.gv-activated .gv-table-comparison.gv-current-3:not(.gv-recommended-3) .gv-cell:nth-child(3) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison.gv-current-4:not(.gv-recommended-4) .gv-product:nth-child(4),
.gv-activated .gv-table-comparison.gv-current-4:not(.gv-recommended-4) .gv-cell:nth-child(4) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(5),
.gv-activated .gv-table-comparison.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(5) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison[data-current="1"] .gv-row-cell:nth-child(1) {
--table-col-bg: var(--table-current-bg-default);
--table-col-bg-dim: var(--table-current-bg-dim);
--table-col-border: var(--color-border-alt);
}
.gv-activated .gv-table-comparison[data-current="1"] .gv-row-cell:nth-child(1):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-table-comparison[data-current="1"]:not([data-recommended="0"]) .gv-row-cell:nth-child(1) {
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-table-comparison.gv-current-2:not(.gv-recommended-2) .gv-product:nth-child(2),
.gv-activated .gv-table-comparison.gv-current-2:not(.gv-recommended-2) .gv-cell:nth-child(2) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison.gv-current-3:not(.gv-recommended-3) .gv-product:nth-child(3),
.gv-activated .gv-table-comparison.gv-current-3:not(.gv-recommended-3) .gv-cell:nth-child(3) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison.gv-current-4:not(.gv-recommended-4) .gv-product:nth-child(4),
.gv-activated .gv-table-comparison.gv-current-4:not(.gv-recommended-4) .gv-cell:nth-child(4) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(5),
.gv-activated .gv-table-comparison.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(5) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison[data-current="2"] .gv-row-cell:nth-child(2) {
--table-col-bg: var(--table-current-bg-default);
--table-col-bg-dim: var(--table-current-bg-dim);
--table-col-border: var(--color-border-alt);
}
.gv-activated .gv-table-comparison[data-current="2"] .gv-row-cell:nth-child(2):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-table-comparison[data-current="2"]:not([data-recommended="1"]) .gv-row-cell:nth-child(2) {
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-table-comparison.gv-current-3:not(.gv-recommended-3) .gv-product:nth-child(3),
.gv-activated .gv-table-comparison.gv-current-3:not(.gv-recommended-3) .gv-cell:nth-child(3) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison.gv-current-4:not(.gv-recommended-4) .gv-product:nth-child(4),
.gv-activated .gv-table-comparison.gv-current-4:not(.gv-recommended-4) .gv-cell:nth-child(4) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(5),
.gv-activated .gv-table-comparison.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(5) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison[data-current="3"] .gv-row-cell:nth-child(3) {
--table-col-bg: var(--table-current-bg-default);
--table-col-bg-dim: var(--table-current-bg-dim);
--table-col-border: var(--color-border-alt);
}
.gv-activated .gv-table-comparison[data-current="3"] .gv-row-cell:nth-child(3):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-table-comparison[data-current="3"]:not([data-recommended="2"]) .gv-row-cell:nth-child(3) {
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-table-comparison.gv-current-4:not(.gv-recommended-4) .gv-product:nth-child(4),
.gv-activated .gv-table-comparison.gv-current-4:not(.gv-recommended-4) .gv-cell:nth-child(4) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(5),
.gv-activated .gv-table-comparison.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(5) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison[data-current="4"] .gv-row-cell:nth-child(4) {
--table-col-bg: var(--table-current-bg-default);
--table-col-bg-dim: var(--table-current-bg-dim);
--table-col-border: var(--color-border-alt);
}
.gv-activated .gv-table-comparison[data-current="4"] .gv-row-cell:nth-child(4):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-table-comparison[data-current="4"]:not([data-recommended="3"]) .gv-row-cell:nth-child(4) {
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-table-comparison.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(5),
.gv-activated .gv-table-comparison.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(5) {
--table-zebra-even: var(--color-surface-toned);
--table-zebra-odd: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison[data-current="5"] .gv-row-cell:nth-child(5) {
--table-col-bg: var(--table-current-bg-default);
--table-col-bg-dim: var(--table-current-bg-dim);
--table-col-border: var(--color-border-alt);
}
.gv-activated .gv-table-comparison[data-current="5"] .gv-row-cell:nth-child(5):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-table-comparison[data-current="5"]:not([data-recommended="4"]) .gv-row-cell:nth-child(5) {
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-table-comparison.gv-recommended-1 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-1 .gv-product:nth-child(1),
.gv-activated .gv-table-comparison.gv-recommended-1 .gv-cell:nth-child(1) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-1 .gv-product:nth-child(1)::before,
.gv-activated .gv-table-comparison.gv-recommended-1 .gv-cell:nth-child(1)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-1 .gv-product:nth-child(1)::after,
.gv-activated .gv-table-comparison.gv-recommended-1 .gv-cell:nth-child(1)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-1 .gv-table-row:nth-child(even) .gv-cell:nth-child(1)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-1 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(1) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-2 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-product:nth-child(2),
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-cell:nth-child(2) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-product:nth-child(2)::before,
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-cell:nth-child(2)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-product:nth-child(2)::after,
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-cell:nth-child(2)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-table-row:nth-child(even) .gv-cell:nth-child(2)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(2) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-3 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-product:nth-child(3),
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-cell:nth-child(3) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-product:nth-child(3)::before,
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-cell:nth-child(3)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-product:nth-child(3)::after,
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-cell:nth-child(3)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-table-row:nth-child(even) .gv-cell:nth-child(3)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(3) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-4 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-product:nth-child(4),
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-cell:nth-child(4) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-product:nth-child(4)::before,
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-cell:nth-child(4)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-product:nth-child(4)::after,
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-cell:nth-child(4)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-table-row:nth-child(even) .gv-cell:nth-child(4)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(4) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-5 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5),
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5)::before,
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5)::after,
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison[data-recommended="1"] .gv-row-cell:nth-child(1) {
--table-col-bg: var(--table-recommended-bg-default);
--table-col-bg-dim: var(--table-recommended-bg-dim);
--table-col-border: var(--table-recommended);
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-table-comparison[data-recommended="1"] .gv-row-cell:nth-child(1):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-table-comparison.gv-recommended-2 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-product:nth-child(2),
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-cell:nth-child(2) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-product:nth-child(2)::before,
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-cell:nth-child(2)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-product:nth-child(2)::after,
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-cell:nth-child(2)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-table-row:nth-child(even) .gv-cell:nth-child(2)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-2 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(2) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-3 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-product:nth-child(3),
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-cell:nth-child(3) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-product:nth-child(3)::before,
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-cell:nth-child(3)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-product:nth-child(3)::after,
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-cell:nth-child(3)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-table-row:nth-child(even) .gv-cell:nth-child(3)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(3) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-4 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-product:nth-child(4),
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-cell:nth-child(4) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-product:nth-child(4)::before,
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-cell:nth-child(4)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-product:nth-child(4)::after,
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-cell:nth-child(4)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-table-row:nth-child(even) .gv-cell:nth-child(4)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(4) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-5 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5),
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5)::before,
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5)::after,
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison[data-recommended="2"] .gv-row-cell:nth-child(2) {
--table-col-bg: var(--table-recommended-bg-default);
--table-col-bg-dim: var(--table-recommended-bg-dim);
--table-col-border: var(--table-recommended);
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-table-comparison[data-recommended="2"] .gv-row-cell:nth-child(2):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-table-comparison.gv-recommended-3 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-product:nth-child(3),
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-cell:nth-child(3) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-product:nth-child(3)::before,
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-cell:nth-child(3)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-product:nth-child(3)::after,
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-cell:nth-child(3)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-table-row:nth-child(even) .gv-cell:nth-child(3)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-3 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(3) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-4 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-product:nth-child(4),
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-cell:nth-child(4) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-product:nth-child(4)::before,
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-cell:nth-child(4)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-product:nth-child(4)::after,
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-cell:nth-child(4)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-table-row:nth-child(even) .gv-cell:nth-child(4)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(4) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-5 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5),
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5)::before,
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5)::after,
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison[data-recommended="3"] .gv-row-cell:nth-child(3) {
--table-col-bg: var(--table-recommended-bg-default);
--table-col-bg-dim: var(--table-recommended-bg-dim);
--table-col-border: var(--table-recommended);
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-table-comparison[data-recommended="3"] .gv-row-cell:nth-child(3):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-table-comparison.gv-recommended-4 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-product:nth-child(4),
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-cell:nth-child(4) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-product:nth-child(4)::before,
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-cell:nth-child(4)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-product:nth-child(4)::after,
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-cell:nth-child(4)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-table-row:nth-child(even) .gv-cell:nth-child(4)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-4 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(4) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-5 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5),
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5)::before,
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5)::after,
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison[data-recommended="4"] .gv-row-cell:nth-child(4) {
--table-col-bg: var(--table-recommended-bg-default);
--table-col-bg-dim: var(--table-recommended-bg-dim);
--table-col-border: var(--table-recommended);
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-table-comparison[data-recommended="4"] .gv-row-cell:nth-child(4):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-table-comparison.gv-recommended-5 {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5),
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5) {
border-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5)::before,
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5)::before {
background-color: var(--color-recommended-bg);
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
position: absolute;
z-index: 0;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-product:nth-child(5)::after,
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-cell:nth-child(5)::after {
background-color: var(--color-recommended-bg);
bottom: 0;
content: "";
left: -1px;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before {
opacity: 0.18;
}
.gv-activated .gv-table-comparison.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) {
border-bottom-color: var(--color-recommended-bg);
}
.gv-activated .gv-table-comparison[data-recommended="5"] .gv-row-cell:nth-child(5) {
--table-col-bg: var(--table-recommended-bg-default);
--table-col-bg-dim: var(--table-recommended-bg-dim);
--table-col-border: var(--table-recommended);
--table-col-border-left: var(--table-col-border);
}
.gv-activated .gv-table-comparison[data-recommended="5"] .gv-row-cell:nth-child(5):not(:last-child) {
border-right-color: var(--table-col-border);
}
.gv-activated .gv-table-comparison[\:has\(.gv-recommended-label\)] {
--recommended-label-height: 16px;
}
.gv-activated .gv-table-comparison:has(.gv-recommended-label) {
--recommended-label-height: 16px;
}
.gv-activated .gv-table-comparison .gv-recommended-label {
padding-bottom: 1px;
padding-top: 0;
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-table-comparison .gv-table-slider-nav {
top: 0;
top: var(--table-slider-nav-top, 0);
}
.gv-activated .gv-table-comparison .gv-slider-content {
flex: 1;
position: relative;
}
.gv-activated .gv-table-comparison .gv-rows {
width: 100%;
}
.gv-activated .gv-table-comparison .gv-table-row {
min-width: 100%;
}
.gv-activated .gv-table-comparison .gv-table-row:first-child .gv-row-cell:first-child {
border-top-left-radius: var(--table-radius);
}
.gv-activated .gv-table-comparison .gv-table-row:first-child .gv-row-cell:last-child {
border-top-right-radius: var(--table-radius);
}
.gv-activated .gv-table-comparison .gv-table-row:last-child .gv-row-cell:first-child {
border-bottom-left-radius: var(--table-radius);
}
.gv-activated .gv-table-comparison .gv-table-row:last-child .gv-row-cell:last-child {
border-bottom-right-radius: var(--table-radius);
}
.gv-activated .gv-table-comparison .gv-table-row:not(:first-child) .gv-row-cell {
border-top: none;
}
.gv-activated .gv-table-comparison .gv-table-row:not(:first-child) .gv-row-cell::after {
border-top: 1px solid var(--color-border-alt);
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: -1px;
z-index: 1;
}
.gv-activated .gv-table-comparison .gv-row-cells {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
grid-auto-rows: auto;
}
.gv-activated .gv-table-comparison .gv-row-cell {
background: var(--table-col-bg);
border: 1px solid var(--table-col-border);
position: relative;
transform: translateZ(0);
}
.gv-activated .gv-table-comparison .gv-row-cell:nth-child(n + 2) {
border-left: none;
}
.gv-activated .gv-table-comparison .gv-row-cell:nth-child(n + 2)::before {
border-left: 1px solid var(--table-col-border-left);
bottom: -1px;
content: "";
display: block;
left: -1px;
position: absolute;
top: -1px;
z-index: 1;
}
.gv-activated .gv-table-comparison .gv-row-cell gv-icon {
flex-shrink: 0;
}
.gv-activated .gv-table-comparison .gv-row-cell gv-icon.gv-available {
color: var(--color-signal-success);
}
.gv-activated .gv-table-comparison .gv-row-cell gv-icon.gv-unavailable {
color: var(--color-body-on-alternative);
}
.gv-activated .gv-table-comparison .gv-table-header {
position: sticky;
width: 100%;
z-index: 198;
}
.gv-activated .gv-table-comparison .gv-table-header .gv-sticky-bg {
height: 50%;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.gv-activated .gv-table-comparison .gv-table-header .gv-rows {
background-color: var(--color-surface-bright);
border-radius: var(--border-radius);
padding-top: var(--recommended-label-height);
position: relative;
}
.gv-activated .gv-table-comparison .gv-table-header .gv-row-cell {
display: grid;
grid-template-rows: subgrid;
grid-row: span 999;
}
.gv-activated .gv-table-comparison .gv-table-header .gv-header-text {
padding: var(--size-sm);
}
.gv-activated .gv-table-comparison .gv-table-header .gv-header-text .gv-title {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-xs);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-comparison .gv-table-header .gv-header-text .gv-title {
letter-spacing: calc(var(--letterspacing-heading-xs-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-comparison .gv-table-header .gv-header-text .gv-title {
letter-spacing: calc((var(--letterspacing-heading-xs-min) * 1px) + (var(--letterspacing-heading-xs-max) - var(--letterspacing-heading-xs-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-xs-min) * 1px) + (var(--letterspacing-heading-xs-max) - var(--letterspacing-heading-xs-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-comparison .gv-table-header .gv-header-text .gv-title {
letter-spacing: calc(var(--letterspacing-heading-xs-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-comparison .gv-table-header .gv-header-text .gv-title {
font-size: calc(var(--font-size-heading-xs-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-comparison .gv-table-header .gv-header-text .gv-title {
font-size: calc((var(--font-size-heading-xs-min) * 1rem) + (var(--font-size-heading-xs-max) - var(--font-size-heading-xs-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-xs-min) * 1rem) + (var(--font-size-heading-xs-max) - var(--font-size-heading-xs-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-comparison .gv-table-header .gv-header-text .gv-title {
font-size: calc(var(--font-size-heading-xs-max) * 1rem);
}
}
.gv-activated .gv-table-comparison .gv-table-section .gv-section-title {
left: var(--table-slider-px);
max-width: 100cqw;
padding: var(--size-md) 0 var(--size-sm);
position: sticky;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-table-comparison .gv-table-section .gv-table-row:first-child {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-table-comparison .gv-table-section .gv-table-row:last-child {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-table-comparison .gv-table-section .gv-table-row:nth-child(odd) {
background-color: var(--color-surface-bright);
}
.gv-activated .gv-table-comparison .gv-table-section .gv-table-row:nth-child(even) {
background-color: var(--color-surface-dim);
}
.gv-activated .gv-table-comparison .gv-table-section .gv-table-row:nth-child(even) .gv-row-cell {
background-color: var(--table-col-bg-dim);
}
.gv-activated .gv-table-comparison .gv-table-section .gv-row-header {
background: transparent;
color: var(--color-body-on-alternative);
height: var(--table-row-header-height);
margin-bottom: calc(var(--table-row-header-height) * -1);
max-width: 312px;
position: sticky;
left: var(--table-slider-px);
z-index: 1;
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-table-comparison .gv-table-section .gv-row-header .gv-row-title {
display: inline-block;
padding: var(--size-sm) var(--size-sm) var(--size-xs);
}
.gv-activated .gv-table-comparison .gv-table-section .gv-row-cell {
padding: var(--table-row-header-height) var(--size-sm) var(--size-sm);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-table-comparison .gv-table-section .gv-row-cell:not(:last-child) {
border-right-color: transparent;
}
@media (max-width: 1023px ) {
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(3\)\)] .gv-table-slider-nav {
display: flex;
}
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(3)) .gv-table-slider-nav {
display: flex;
}
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(3\)\)] .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(3\)\)] .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(3)) .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(3\)\)] .gv-slider-scrollable::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(3)) .gv-slider-scrollable::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(3\)\)] .gv-slider-scrollable::after,
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(3\)\)] .gv-slider-scrollable::before {
content: "";
flex: 0 0 var(--table-slider-px);
}
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(3)) .gv-slider-scrollable::after,
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(3)) .gv-slider-scrollable::before {
content: "";
flex: 0 0 var(--table-slider-px);
}
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(3\)\)].gv-cq-columns .gv-rows {
width: max-content;
}
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(3)).gv-cq-columns .gv-rows {
width: max-content;
}
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(3\)\)].gv-cq-columns .gv-row-cell {
width: calc(100cqw / 2);
}
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(3)).gv-cq-columns .gv-row-cell {
width: calc(100cqw / 2);
}
}
@media (min-width: 1024px ) and (max-width: 1279px ) {
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(5\)\)] .gv-table-slider-nav {
display: flex;
}
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(5)) .gv-table-slider-nav {
display: flex;
}
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(5\)\)] .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(5\)\)] .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(5)) .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(5\)\)] .gv-slider-scrollable::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(5)) .gv-slider-scrollable::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(5\)\)] .gv-slider-scrollable::after,
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(5\)\)] .gv-slider-scrollable::before {
content: "";
flex: 0 0 var(--table-slider-px);
}
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(5)) .gv-slider-scrollable::after,
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(5)) .gv-slider-scrollable::before {
content: "";
flex: 0 0 var(--table-slider-px);
}
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(5\)\)].gv-cq-columns .gv-rows {
width: max-content;
}
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(5)).gv-cq-columns .gv-rows {
width: max-content;
}
.gv-activated .gv-table-comparison[\:has\(.gv-table-header\%20.gv-row-cell\:nth-child\(5\)\)].gv-cq-columns .gv-row-cell {
width: calc(100cqw / 4);
}
.gv-activated .gv-table-comparison:has(.gv-table-header .gv-row-cell:nth-child(5)).gv-cq-columns .gv-row-cell {
width: calc(100cqw / 4);
}
}
.gv-activated .gv-table-comparison .gv-order-details > .gv-price-container {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
gap: var(--size-sm);
justify-content: space-between;
padding: var(--size-sm);
}
.gv-activated .gv-table-comparison .gv-order-details > .gv-price-container .gv-price {
align-items: center;
display: flex;
}
.gv-activated .gv-table-comparison .gv-order-details > .gv-price-container .gv-price-text {
white-space: nowrap;
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-table-comparison .gv-order-details > .gv-price-container .gv-price-old,
.gv-activated .gv-table-comparison .gv-order-details > .gv-price-container .gv-period {
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-table-comparison .gv-order-details > .gv-price-container .gv-price-toggle {
display: none;
}
.gv-activated .gv-table-comparison .gv-order-details > .gv-price-container .gv-price-info {
flex: 1 1 100%;
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-table-comparison .gv-order-details > .gv-price-container .gv-info-label {
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
@media (max-width: 599px ) {
.gv-activated .gv-table-comparison .gv-order-details > .gv-price-container .gv-price-main {
flex: 1 1 100%;
position: relative;
}
.gv-activated .gv-table-comparison .gv-order-details > .gv-price-container .gv-price-main[\:has\(.gv-price-toggle\)] {
padding-right: var(--size-icon-md);
}
.gv-activated .gv-table-comparison .gv-order-details > .gv-price-container .gv-price-main:has(.gv-price-toggle) {
padding-right: var(--size-icon-md);
}
.gv-activated .gv-table-comparison .gv-order-details > .gv-price-container .gv-price-toggle {
align-items: center;
display: flex;
top: 0;
right: 0;
bottom: 0;
left: 0;
justify-content: flex-end;
position: absolute;
z-index: 1;
}
}
.gv-activated .gv-table-comparison .gv-order-button {
padding: 0 var(--size-sm) var(--size-sm) var(--size-sm);
}
.gv-activated .gv-table-comparison[data-price-details="open"] .gv-order-details > .gv-price-container .gv-price-toggle gv-icon {
transform: rotate(180deg);
}
@media (max-width: 599px ) {
.gv-activated .gv-table-comparison:not([data-price-details="open"]) .gv-order-details > .gv-price-container .gv-badge-discount,
.gv-activated .gv-table-comparison:not([data-price-details="open"]) .gv-order-details > .gv-price-container .gv-price-info {
display: none;
}
}
.gv-activated .gv-table-product {
--table-col-gap: var(--size-lg);
--table-radius: var(--outer-container-radius);
/* Deprecated order price details and button */
}
.gv-activated .gv-table-product .gv-current {
--table-col-bg: var(--table-current-bg-default);
}
.gv-activated .gv-table-product .gv-recommended {
--table-col-bg: var(--table-recommended-bg-default);
--table-col-border: var(--table-recommended);
}
.gv-activated .gv-table-product[\:has\(.gv-recommended-label\)] {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-product:has(.gv-recommended-label) {
--recommended-label-height: 26px;
}
.gv-activated .gv-table-product .gv-recommended-label {
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-table-product .gv-table-slider-nav {
top: calc(0 + 0);
top: calc(var(--recommended-label-height, 0) + var(--table-slider-nav-top, 0));
}
.gv-activated .gv-table-product .gv-slider-scrollable {
scroll-snap-type: x mandatory;
}
.gv-activated .gv-table-product .gv-table {
align-items: start;
-webkit-column-gap: var(--table-col-gap);
grid-column-gap: var(--table-col-gap);
column-gap: var(--table-col-gap);
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-auto-rows: auto;
padding-top: var(--recommended-label-height);
width: 100%;
}
.gv-activated .gv-table-product .gv-table-col {
background: var(--table-col-bg);
border: 1px solid var(--table-col-border);
border-radius: var(--table-radius);
display: grid;
grid-template-rows: subgrid;
grid-row: span 999;
position: relative;
scroll-snap-align: start;
transform: translateZ(0);
}
.gv-activated .gv-table-product .gv-table-col.gv-recommended {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.gv-activated .gv-table-product .gv-header-text {
padding: var(--size-lg);
}
.gv-activated .gv-table-product .gv-header-text .gv-title {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-lg);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-product .gv-header-text .gv-title {
letter-spacing: calc(var(--letterspacing-heading-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-product .gv-header-text .gv-title {
letter-spacing: calc((var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-product .gv-header-text .gv-title {
letter-spacing: calc(var(--letterspacing-heading-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-product .gv-header-text .gv-title {
font-size: calc(var(--font-size-heading-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-product .gv-header-text .gv-title {
font-size: calc((var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-product .gv-header-text .gv-title {
font-size: calc(var(--font-size-heading-lg-max) * 1rem);
}
}
.gv-activated .gv-table-product .gv-header-text .gv-subtitle {
line-height: var(--line-height-body);
font-weight: var(--font-weight-semibold);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-product .gv-header-text .gv-subtitle {
letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-product .gv-header-text .gv-subtitle {
letter-spacing: calc((var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-product .gv-header-text .gv-subtitle {
letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-product .gv-header-text .gv-subtitle {
font-size: calc(var(--font-size-text-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-product .gv-header-text .gv-subtitle {
font-size: calc((var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-product .gv-header-text .gv-subtitle {
font-size: calc(var(--font-size-text-lg-max) * 1rem);
}
}
.gv-activated .gv-table-product .gv-header-text .gv-description {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-table-product .gv-order-details {
border-top: 1px solid var(--color-border-alt);
}
.gv-activated .gv-table-product .gv-section-key-features {
border-top: 1px solid var(--color-border-alt);
padding: var(--size-lg);
}
.gv-activated .gv-table-product .gv-section-header {
border-top: 1px solid var(--color-border-alt);
padding: var(--size-lg) var(--size-lg) var(--size-md);
}
.gv-activated .gv-table-product .gv-section-title {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-product .gv-section-title {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-product .gv-section-title {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-product .gv-section-title {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-product .gv-section-title {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-product .gv-section-title {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-product .gv-section-title {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-table-product .gv-section-features {
padding: 0 var(--size-lg) var(--size-lg) var(--size-lg);
}
.gv-activated .gv-table-product .gv-features-list {
display: flex;
flex-direction: column;
gap: var(--size-sm);
}
@media (max-width: 599px ) {
.gv-activated .gv-table-product {
--table-col-gap: var(--size-sm);
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(2\)\)] .gv-table-slider-nav {
display: flex;
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(2)) .gv-table-slider-nav {
display: flex;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(2\)\)] .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(2\)\)] .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(2)) .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(2\)\)] .gv-slider-scrollable::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(2)) .gv-slider-scrollable::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(2\)\)] .gv-slider-scrollable::after,
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(2\)\)] .gv-slider-scrollable::before {
content: "";
flex: 0 0 var(--table-slider-px);
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(2)) .gv-slider-scrollable::after,
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(2)) .gv-slider-scrollable::before {
content: "";
flex: 0 0 var(--table-slider-px);
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(2\)\)].gv-cq-columns .gv-table {
width: max-content;
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(2)).gv-cq-columns .gv-table {
width: max-content;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(2\)\)].gv-cq-columns .gv-table-col {
width: calc((100cqw - ((1 - 1) * var(--table-col-gap))) / 1);
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(2)).gv-cq-columns .gv-table-col {
width: calc((100cqw - ((1 - 1) * var(--table-col-gap))) / 1);
}
}
@media (min-width: 600px ) and (max-width: 1023px ) {
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(3\)\)] .gv-table-slider-nav {
display: flex;
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(3)) .gv-table-slider-nav {
display: flex;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(3\)\)] .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(3\)\)] .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(3)) .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(3\)\)] .gv-slider-scrollable::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(3)) .gv-slider-scrollable::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(3\)\)] .gv-slider-scrollable::after,
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(3\)\)] .gv-slider-scrollable::before {
content: "";
flex: 0 0 var(--table-slider-px);
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(3)) .gv-slider-scrollable::after,
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(3)) .gv-slider-scrollable::before {
content: "";
flex: 0 0 var(--table-slider-px);
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(3\)\)].gv-cq-columns .gv-table {
width: max-content;
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(3)).gv-cq-columns .gv-table {
width: max-content;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(3\)\)].gv-cq-columns .gv-table-col {
width: calc((100cqw - ((2 - 1) * var(--table-col-gap))) / 2);
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(3)).gv-cq-columns .gv-table-col {
width: calc((100cqw - ((2 - 1) * var(--table-col-gap))) / 2);
}
}
@media (min-width: 1024px ) and (max-width: 1279px ) {
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(5\)\)] .gv-table-slider-nav {
display: flex;
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(5)) .gv-table-slider-nav {
display: flex;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(5\)\)] .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(5\)\)] .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(5)) .gv-slider-scrollable {
margin-left: calc(var(--table-slider-px) * -1);
margin-right: calc(var(--table-slider-px) * -1);
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-left: var(--table-slider-px);
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(5\)\)] .gv-slider-scrollable::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(5)) .gv-slider-scrollable::-webkit-scrollbar {
display: none;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(5\)\)] .gv-slider-scrollable::after,
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(5\)\)] .gv-slider-scrollable::before {
content: "";
flex: 0 0 var(--table-slider-px);
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(5)) .gv-slider-scrollable::after,
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(5)) .gv-slider-scrollable::before {
content: "";
flex: 0 0 var(--table-slider-px);
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(5\)\)].gv-cq-columns .gv-table {
width: max-content;
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(5)).gv-cq-columns .gv-table {
width: max-content;
}
.gv-activated .gv-table-product[\:has\(.gv-table-col\:nth-child\(5\)\)].gv-cq-columns .gv-table-col {
width: calc((100cqw - ((4 - 1) * var(--table-col-gap))) / 4);
}
.gv-activated .gv-table-product:has(.gv-table-col:nth-child(5)).gv-cq-columns .gv-table-col {
width: calc((100cqw - ((4 - 1) * var(--table-col-gap))) / 4);
}
}
.gv-activated .gv-table-product .gv-order-details > .gv-price-container {
padding: var(--size-lg);
}
.gv-activated .gv-table-product .gv-order-details > .gv-price-container > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-price-discount,
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-price-with-badge {
align-content: flex-start;
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--size-sm);
}
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-price {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
gap: var(--size-sm);
}
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-price-text {
white-space: nowrap;
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-md);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-price-text {
letter-spacing: calc(var(--letterspacing-heading-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-price-text {
letter-spacing: calc((var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-price-text {
letter-spacing: calc(var(--letterspacing-heading-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-price-text {
font-size: calc(var(--font-size-heading-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-price-text {
font-size: calc((var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-price-text {
font-size: calc(var(--font-size-heading-md-max) * 1rem);
}
}
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-period {
padding-bottom: var(--size-xs);
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-price-info {
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-info-label {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-info-label {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-info-label {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-info-label {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-info-label {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-info-label {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-table-product .gv-order-details > .gv-price-container .gv-info-label {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-table-product .gv-order-deal {
padding: 0 var(--size-lg) var(--size-sm) var(--size-lg);
}
.gv-activated .gv-table-product .gv-order-deal .gv-deal-badge {
align-items: center;
background: var(--color-signal-info-light);
border-radius: var(--border-radius);
display: flex;
gap: var(--size-sm);
justify-content: center;
padding: var(--size-xs) var(--size-sm);
width: 100%;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-table-product .gv-order-deal .gv-deal-badge gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-table-product .gv-order-button {
padding: 0 var(--size-lg) var(--size-lg) var(--size-lg);
}
.gv-activated .gv-content-container {
background-color: var(--color-surface-bright);
border: var(--size-border) solid var(--color-border-alt);
border-radius: var(--border-radius);
box-shadow: var(--color-shadow-subtle);
}
.gv-activated .gv-contextual-menu {
z-index: 1100;
}
.gv-activated .gv-contextual-menu .gv-menu {
background-color: var(--color-surface-bright);
padding: var(--size-sm);
width: 100%;
}
.gv-activated .gv-contextual-menu .gv-menu > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-contextual-menu .gv-btn-close {
border-radius: var(--border-radius);
display: none;
padding: 8px;
position: absolute;
right: var(--size-sm);
top: var(--size-sm);
}
.gv-activated .gv-contextual-menu .gv-btn-close:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-contextual-menu .gv-btn-close:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-contextual-menu ul {
list-style: none;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-contextual-menu ul > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-contextual-menu ul li {
display: flex;
flex-direction: column;
gap: var(--size-sm);
}
.gv-activated .gv-contextual-menu .gv-menu-item {
align-items: center;
border-radius: var(--border-radius);
display: flex;
gap: var(--size-sm);
height: var(--size-xl);
padding: 0 var(--size-sm);
position: relative;
text-align: left;
text-decoration: none;
width: 100%;
}
.gv-activated .gv-contextual-menu .gv-menu-item:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-contextual-menu .gv-menu-item:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-contextual-menu .gv-menu-item.gv-active,
.gv-activated .gv-contextual-menu .gv-menu-item[aria-selected="true"] {
background-color: var(--color-state-active);
}
.gv-activated .gv-contextual-menu .gv-menu-item[target="_blank"] {
padding-right: 32px;
}
.gv-activated .gv-contextual-menu .gv-menu-item[target="_blank"] .gv-indicator {
margin-left: var(--size-xs);
margin-right: var(--size-sm);
}
.gv-activated .gv-contextual-menu .gv-menu-item[target="_blank"]::after {
background-color: var(--color-body-on-default);
content: "";
display: block;
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/open_in_new.788496d1.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/open_in_new.788496d1.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: 100%;
right: var(--size-sm);
position: absolute;
top: 0;
width: var(--size-icon-md);
}
.gv-activated .gv-contextual-menu .gv-menu-item gv-icon {
flex-shrink: 0;
}
.gv-activated .gv-contextual-menu .gv-menu-item > span {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-contextual-menu .gv-divider {
margin-top: var(--size-md);
}
@media (max-width: 599px ) {
.gv-activated .gv-contextual-menu {
bottom: 0;
background: var(--color-overlay-dark);
left: 0;
position: fixed;
right: 0;
top: 0;
}
.gv-activated .gv-contextual-menu .gv-menu {
bottom: 0;
left: 0;
padding-top: var(--size-xl);
position: absolute;
}
.gv-activated .gv-contextual-menu .gv-btn-close {
display: block;
}
}
@media (min-width: 600px ) {
.gv-activated .gv-contextual-menu {
max-width: 300px;
min-width: 200px;
position: absolute;
}
.gv-activated .gv-contextual-menu .gv-menu {
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
box-shadow: var(--color-shadow-elevated);
}
.gv-activated .gv-contextual-menu .gv-menu gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-contextual-menu .gv-menu-item {
height: 30px;
}
.gv-activated .gv-contextual-menu .gv-menu-item[target="_blank"]::after {
width: var(--size-icon-sm);
}
}
.gv-activated .gv-chat {
--chat-padding: var(--size-lg);
--chat-side-panel-max-w: none;
--chat-side-panel-min-w: none;
align-items: center;
display: flex;
height: 100%;
position: relative;
}
.gv-activated .gv-chat.gv-chat-side-panel {
--chat-padding: var(--size-md);
max-width: var(--chat-side-panel-max-w);
min-width: var(--chat-side-panel-min-w);
width: 100%;
}
.gv-activated .gv-chat.gv-show-scroll .gv-chat-scroll-bottom {
display: flex;
}
.gv-activated .gv-chat footer {
display: flex;
flex-direction: column;
flex-shrink: 0;
position: relative;
width: 100%;
z-index: 100;
}
.gv-activated .gv-chat footer .gv-chat-scroll-bottom {
background: linear-gradient(to bottom, transparent 0%, var(--color-surface-bright) 100%);
bottom: 100%;
display: none;
justify-content: center;
left: 0;
position: absolute;
right: 0;
}
.gv-activated .gv-chat footer .gv-chat-footer {
background: var(--color-surface-bright);
padding: var(--chat-padding);
}
.gv-activated .gv-chat footer .gv-suggestions {
color: var(--color-body-on-alternative);
margin-bottom: var(--size-md);
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-chat footer .gv-suggestions .gv-suggestions-list {
display: none;
}
.gv-activated .gv-chat footer .gv-suggestions .gv-suggestions-list li {
color: var(--color-body-on-default);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-chat footer .gv-suggestions .gv-suggestions-list li:not(:last-child) {
border-bottom: 1px dashed var(--color-border-alt);
}
.gv-activated .gv-chat footer .gv-suggestions .gv-suggestions-list li button {
color: inherit;
font: inherit;
padding: var(--size-xs) var(--size-sm);
text-align: left;
width: 100%;
}
.gv-activated .gv-chat footer .gv-suggestions .gv-suggestions-toggle {
height: var(--size-lg);
position: relative;
text-align: left;
width: 100%;
}
.gv-activated .gv-chat footer .gv-suggestions .gv-suggestions-toggle::after {
background-color: var(--color-body-on-default);
content: "";
display: block;
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/chevron-down.966453af.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/chevron-down.966453af.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: var(--size-icon-md);
position: absolute;
right: 0;
top: calc(-1 * var(--size-xs));
transform: rotate(180deg);
width: var(--size-icon-md);
}
.gv-activated .gv-chat footer .gv-suggestions.gv-expanded .gv-suggestions-list {
display: block;
}
.gv-activated .gv-chat footer .gv-suggestions.gv-expanded .gv-suggestions-toggle::after {
transform: rotate(0deg);
}
@media (min-width: 1024px ) {
.gv-activated .gv-chat.gv-chat-side-panel {
--chat-side-panel-max-w: 480px;
--chat-side-panel-min-w: 375px;
}
.gv-activated .gv-chat .gv-chat-list,
.gv-activated .gv-chat footer {
max-width: 696px;
}
}
.gv-activated .gv-chat-list {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--size-md);
overflow-y: auto;
padding: var(--chat-padding);
width: 100%;
}
.gv-activated .gv-chat-list .gv-stream-loader {
color: var(--color-on-body-default);
display: flex;
flex-direction: column;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-chat-list .gv-stream-loader .gv-step-done,
.gv-activated .gv-chat-list .gv-stream-loader .gv-step-loading,
.gv-activated .gv-chat-list .gv-stream-loader .gv-step-working,
.gv-activated .gv-chat-list .gv-stream-loader .gv-step-todo {
color: var(--color-body-on-alternative);
padding-left: var(--size-lg);
position: relative;
}
.gv-activated .gv-chat-list .gv-stream-loader .gv-step-done::before,
.gv-activated .gv-chat-list .gv-stream-loader .gv-step-loading::before,
.gv-activated .gv-chat-list .gv-stream-loader .gv-step-working::before,
.gv-activated .gv-chat-list .gv-stream-loader .gv-step-todo::before {
background-color: var(--color-state-form-active);
content: "";
height: var(--size-icon-sm);
left: calc(var(--size-lg) / 2);
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/check.4da40e17.svg) no-repeat 0% 50% / var(--size-icon-sm) var(--size-icon-sm);
mask: url(//mail.group-cdn.one/v51.1.15/media/check.4da40e17.svg) no-repeat 0% 50% / var(--size-icon-sm) var(--size-icon-sm);
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: var(--size-icon-sm);
}
.gv-activated .gv-chat-list .gv-stream-loader .gv-step-loading::before,
.gv-activated .gv-chat-list .gv-stream-loader .gv-step-working::before {
animation: gv-spin 1s linear infinite;
background-color: transparent;
border: 3px solid var(--color-loader-primary);
border-bottom-color: var(--color-loader-secondary);
border-radius: 50%;
height: var(--size-md);
left: 4px;
mask: none;
-webkit-mask: none;
top: 2px;
width: var(--size-md);
}
.gv-activated .gv-chat-list .gv-stream-loader .gv-step-todo::before {
display: none;
}
.gv-activated .gv-chat-list .gv-stream-loader .gv-step-done::before {
background-color: var(--color-body-on-alternative);
}
.gv-activated .gv-chat-list .gv-chat-message {
display: flex;
flex-direction: column;
gap: var(--size-xs);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-chat-list .gv-chat-message .gv-meta {
color: var(--color-body-on-alternative);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-chat-list .gv-chat-message .gv-meta .gv-meta-user::after {
content: "•";
display: inline;
padding: 0 var(--size-xs);
}
.gv-activated .gv-chat-list .gv-chat-message .gv-chat-message-body {
max-width: 320px;
position: relative;
width: fit-content;
z-index: 10;
}
.gv-activated .gv-chat-list .gv-chat-message .gv-chat-message-feedback {
display: flex;
}
.gv-activated .gv-chat-list .gv-chat-message .gv-chat-message-feedback button {
display: block;
height: 30px;
position: relative;
width: 30px;
}
.gv-activated .gv-chat-list .gv-chat-message .gv-chat-message-feedback button::after {
background-color: var(--color-body-on-default);
content: "";
display: block;
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/thumb-off.4b9c4380.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/thumb-off.4b9c4380.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: var(--size-icon-sm);
left: 6px;
position: absolute;
top: var(--size-xs);
width: var(--size-icon-sm);
}
.gv-activated .gv-chat-list .gv-chat-message .gv-chat-message-feedback button.gv-feedback-negative {
transform: rotate(180deg);
}
.gv-activated .gv-chat-list .gv-chat-message .gv-chat-message-feedback button.gv-active::after {
background-color: var(--color-state-form-active);
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/thumb-filled.025f2c1d.svg);
mask: url(//mail.group-cdn.one/v51.1.15/media/thumb-filled.025f2c1d.svg);
}
.gv-activated .gv-chat-list .gv-chat-message.gv-chat-incoming {
align-items: flex-start;
}
.gv-activated .gv-chat-list .gv-chat-message.gv-chat-incoming .gv-chat-message-body {
margin-right: var(--size-lg);
}
.gv-activated .gv-chat-list .gv-chat-message.gv-chat-outgoing {
align-items: flex-end;
}
.gv-activated .gv-chat-list .gv-chat-message.gv-chat-outgoing .gv-chat-message-body {
background: var(--color-surface-highlight);
border-radius: var(--border-radius);
margin-left: var(--size-lg);
padding: var(--size-sm);
}
.gv-activated .gv-chat-reference {
background: var(--color-surface-dim);
border: 1px solid var(--color-border-alt);
border-bottom: none;
border-radius: var(--border-radius) var(--border-radius) 0 0;
color: var(--color-body-on-alternative);
margin-bottom: calc(-1 * var(--size-xs));
padding: var(--size-xs) var(--size-lg) var(--size-sm) var(--size-sm);
position: relative;
width: fit-content;
z-index: 0;
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-chat-reference::after {
background-color: var(--color-body-on-alternative);
content: "";
display: block;
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/close.2e5708e8.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/close.2e5708e8.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: 16px;
right: var(--size-xs);
position: absolute;
top: var(--size-xs);
width: 16px;
}
.gv-activated .gv-chat-message .gv-chat-reference {
margin-bottom: calc(-1 * var(--size-sm));
padding-left: var(--size-xs);
padding-right: var(--size-xs);
}
.gv-activated .gv-chat-message .gv-chat-reference::after {
display: none;
}
.gv-activated .gv-chip {
--chip-color-background: var(--color-surface-dim);
--chip-color-border: var(--color-border);
--chip-color-text: var(--color-body-on-default);
--chip-height: 1.75rem;
/* 28px */
background-color: var(--chip-color-background);
border: var(--size-border) solid var(--chip-color-border);
border-radius: var(--chip-radius);
color: var(--chip-color-text);
cursor: pointer;
display: inline-block;
/* text-overflow doesn't work on flex or inline-flex, so use inline-block to keep the component simple */
height: var(--chip-height);
max-width: 100%;
padding: var(--size-xs) var(--size-md);
position: relative;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-chip.gv-chip-active {
--chip-color-background: var(--color-state-active);
--chip-color-border: var(--color-state-focus);
}
.gv-activated .gv-chip.gv-chip-active:not(.gv-chip-radio) {
padding-right: calc(var(--size-md) + var(--size-icon-sm) + var(--size-xs));
/* Padding-right + icon size + gap */
}
.gv-activated .gv-chip.gv-chip-active:not(.gv-chip-radio)::after {
background-color: var(--chip-color-text);
content: "";
display: block;
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/close.2e5708e8.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/close.2e5708e8.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: 100%;
right: var(--size-md);
position: absolute;
top: 0;
width: var(--size-icon-sm);
}
.gv-activated .gv-chip.gv-chip-active.gv-chip-radio {
cursor: default;
}
.gv-activated .gv-chip-labels {
--chip-label-height: 1rem;
/* 16px */
display: flex;
flex-wrap: wrap;
gap: var(--size-xs);
}
.gv-activated .gv-chip-labels .gv-item {
background-color: var(--color-state-active);
border-radius: var(--size-md);
color: var(--color-body-on-default);
height: var(--chip-label-height);
line-height: var(--chip-label-height);
padding: 0 var(--size-sm);
text-transform: uppercase;
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-chip-labels .gv-more-item:not(.gv-hidden) {
display: block;
}
.gv-activated .gv-chip-labels .gv-more {
color: var(--color-state-form-active);
line-height: var(--chip-label-height);
margin: calc(var(--size-sm) * -1) 0;
padding: var(--size-sm);
position: relative;
text-decoration: none;
white-space: nowrap;
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-chip-labels .gv-more::before {
content: "+";
display: block;
left: 0;
position: absolute;
top: calc(var(--size-sm) - 1px);
}
.gv-activated .gv-data-field {
display: flex;
flex-direction: column;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-data-field .gv-label {
align-items: center;
color: var(--color-body-on-alternative);
display: flex;
flex-wrap: nowrap;
gap: 4px;
}
.gv-activated .gv-data-field .gv-label gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-data-field .gv-content {
align-items: center;
display: flex;
flex-wrap: nowrap;
gap: 4px;
}
.gv-activated .gv-data-field .gv-content span {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-field .gv-content button {
flex-shrink: 0;
}
/* Data table mixins */
.gv-activated .gv-data-table {
background-color: var(--color-surface-bright);
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
box-shadow: var(--color-shadow-subtle);
overflow: hidden;
width: 100%;
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-data-table .gv-checkbox {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-data-table .gv-radio {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-data-table .gv-radio:checked::after {
border-width: 5px;
}
.gv-activated .gv-data-table .gv-input.gv-input-number button {
padding: 0;
}
.gv-activated .gv-data-table .gv-toggle {
--toggle-height: 16px;
--toggle-width: 28px;
--toggle-dot-indent: 2px;
}
.gv-activated .gv-data-table .gv-col-1-text-right tr > *:nth-child(1) {
text-align: right;
}
.gv-activated .gv-data-table .gv-col-1-shrink tr > *:nth-child(1) {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-1-truncate tr > *:nth-child(1) {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-col-2-text-right tr > *:nth-child(2) {
text-align: right;
}
.gv-activated .gv-data-table .gv-col-2-shrink tr > *:nth-child(2) {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-2-truncate tr > *:nth-child(2) {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-col-3-text-right tr > *:nth-child(3) {
text-align: right;
}
.gv-activated .gv-data-table .gv-col-3-shrink tr > *:nth-child(3) {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-3-truncate tr > *:nth-child(3) {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-col-4-text-right tr > *:nth-child(4) {
text-align: right;
}
.gv-activated .gv-data-table .gv-col-4-shrink tr > *:nth-child(4) {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-4-truncate tr > *:nth-child(4) {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-col-5-text-right tr > *:nth-child(5) {
text-align: right;
}
.gv-activated .gv-data-table .gv-col-5-shrink tr > *:nth-child(5) {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-5-truncate tr > *:nth-child(5) {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-col-6-text-right tr > *:nth-child(6) {
text-align: right;
}
.gv-activated .gv-data-table .gv-col-6-shrink tr > *:nth-child(6) {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-6-truncate tr > *:nth-child(6) {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-col-7-text-right tr > *:nth-child(7) {
text-align: right;
}
.gv-activated .gv-data-table .gv-col-7-shrink tr > *:nth-child(7) {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-7-truncate tr > *:nth-child(7) {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-col-8-text-right tr > *:nth-child(8) {
text-align: right;
}
.gv-activated .gv-data-table .gv-col-8-shrink tr > *:nth-child(8) {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-8-truncate tr > *:nth-child(8) {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-col-9-text-right tr > *:nth-child(9) {
text-align: right;
}
.gv-activated .gv-data-table .gv-col-9-shrink tr > *:nth-child(9) {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-9-truncate tr > *:nth-child(9) {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-col-10-text-right tr > *:nth-child(10) {
text-align: right;
}
.gv-activated .gv-data-table .gv-col-10-shrink tr > *:nth-child(10) {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-10-truncate tr > *:nth-child(10) {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-col-11-text-right tr > *:nth-child(11) {
text-align: right;
}
.gv-activated .gv-data-table .gv-col-11-shrink tr > *:nth-child(11) {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-11-truncate tr > *:nth-child(11) {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-col-12-text-right tr > *:nth-child(12) {
text-align: right;
}
.gv-activated .gv-data-table .gv-col-12-shrink tr > *:nth-child(12) {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-12-truncate tr > *:nth-child(12) {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-empty-state {
gap: 16px;
padding: var(--size-lg);
}
.gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content > *:not(:last-child) {
margin-bottom: 0;
}
.gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title {
letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title {
letter-spacing: calc((var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title {
letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title {
font-size: calc(var(--font-size-text-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title {
font-size: calc((var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title {
font-size: calc(var(--font-size-text-lg-max) * 1rem);
}
}
.gv-activated .gv-data-table .gv-load-more {
padding: 16px 24px;
text-align: center;
}
.gv-activated .gv-data-table table {
line-height: var(--line-height-body);
width: 100%;
}
.gv-activated .gv-data-table thead {
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .gv-data-table tbody tr:nth-child(even) {
background-color: var(--color-zebra-even);
}
.gv-activated .gv-data-table tbody tr:nth-child(even):hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-data-table tbody tr:nth-child(even):active {
background-color: var(--color-state-active);
}
.gv-activated .gv-data-table tbody tr:nth-child(even) td a:not(.gv-button):not(.gv-action)[\:has\(\%3E\%20gv-icon\:only-child\)] {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-data-table tbody tr:nth-child(even) td a:not(.gv-button):not(.gv-action):has(> gv-icon:only-child) {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-data-table tbody tr:nth-child(even) td button:not(.gv-button):not(.gv-action)[\:has\(\%3E\%20gv-icon\:only-child\)] {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-data-table tbody tr:nth-child(even) td button:not(.gv-button):not(.gv-action):has(> gv-icon:only-child) {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-data-table tbody tr:nth-child(even) td a:not(.gv-button):not(.gv-action)[\:has\(\%3E\%20gv-icon\:only-child\)]:hover {
background-color: var(--color-state-hover);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover);
}
.gv-activated .gv-data-table tbody tr:nth-child(even) td a:not(.gv-button):not(.gv-action):has(> gv-icon:only-child):hover {
background-color: var(--color-state-hover);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover);
}
.gv-activated .gv-data-table tbody tr:nth-child(even) td button:not(.gv-button):not(.gv-action)[\:has\(\%3E\%20gv-icon\:only-child\)]:hover {
background-color: var(--color-state-hover);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover);
}
.gv-activated .gv-data-table tbody tr:nth-child(even) td button:not(.gv-button):not(.gv-action):has(> gv-icon:only-child):hover {
background-color: var(--color-state-hover);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover);
}
.gv-activated .gv-data-table tbody tr:nth-child(even) td a:not(.gv-button):not(.gv-action)[\:has\(\%3E\%20gv-icon\:only-child\)]:active {
background-color: var(--color-state-active);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active);
}
.gv-activated .gv-data-table tbody tr:nth-child(even) td a:not(.gv-button):not(.gv-action):has(> gv-icon:only-child):active {
background-color: var(--color-state-active);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active);
}
.gv-activated .gv-data-table tbody tr:nth-child(even) td button:not(.gv-button):not(.gv-action)[\:has\(\%3E\%20gv-icon\:only-child\)]:active {
background-color: var(--color-state-active);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active);
}
.gv-activated .gv-data-table tbody tr:nth-child(even) td button:not(.gv-button):not(.gv-action):has(> gv-icon:only-child):active {
background-color: var(--color-state-active);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active);
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) {
background-color: var(--color-zebra-odd);
}
.gv-activated .gv-data-table tbody tr:nth-child(odd):hover {
background-color: var(--color-state-hover-dim);
}
.gv-activated .gv-data-table tbody tr:nth-child(odd):active {
background-color: var(--color-state-active-dim);
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) td a:not(.gv-button):not(.gv-action)[\:has\(\%3E\%20gv-icon\:only-child\)] {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) td a:not(.gv-button):not(.gv-action):has(> gv-icon:only-child) {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) td button:not(.gv-button):not(.gv-action)[\:has\(\%3E\%20gv-icon\:only-child\)] {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) td button:not(.gv-button):not(.gv-action):has(> gv-icon:only-child) {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) td a:not(.gv-button):not(.gv-action)[\:has\(\%3E\%20gv-icon\:only-child\)]:hover {
background-color: var(--color-state-hover-dim);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover-dim);
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) td a:not(.gv-button):not(.gv-action):has(> gv-icon:only-child):hover {
background-color: var(--color-state-hover-dim);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover-dim);
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) td button:not(.gv-button):not(.gv-action)[\:has\(\%3E\%20gv-icon\:only-child\)]:hover {
background-color: var(--color-state-hover-dim);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover-dim);
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) td button:not(.gv-button):not(.gv-action):has(> gv-icon:only-child):hover {
background-color: var(--color-state-hover-dim);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover-dim);
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) td a:not(.gv-button):not(.gv-action)[\:has\(\%3E\%20gv-icon\:only-child\)]:active {
background-color: var(--color-state-active-dim);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active-dim);
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) td a:not(.gv-button):not(.gv-action):has(> gv-icon:only-child):active {
background-color: var(--color-state-active-dim);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active-dim);
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) td button:not(.gv-button):not(.gv-action)[\:has\(\%3E\%20gv-icon\:only-child\)]:active {
background-color: var(--color-state-active-dim);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active-dim);
}
.gv-activated .gv-data-table tbody tr:nth-child(odd) td button:not(.gv-button):not(.gv-action):has(> gv-icon:only-child):active {
background-color: var(--color-state-active-dim);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active-dim);
}
.gv-activated .gv-data-table.gv-data-table-alternative tbody tr {
background-color: var(--color-zebra-even);
}
.gv-activated .gv-data-table.gv-data-table-alternative tbody tr:not(:last-child) {
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .gv-data-table th,
.gv-activated .gv-data-table td {
padding: 8px 16px;
white-space: nowrap;
}
.gv-activated .gv-data-table th {
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-data-table th:not(.gv-text-right) {
text-align: left;
}
.gv-activated .gv-data-table th .gv-th-sort {
align-items: center;
border-radius: var(--border-radius);
display: inline-flex;
flex-wrap: nowrap;
gap: var(--size-sm);
}
.gv-activated .gv-data-table th .gv-th-tooltip {
align-items: center;
display: inline-flex;
flex-wrap: nowrap;
gap: var(--size-sm);
}
.gv-activated .gv-data-table th .gv-th-tooltip gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-data-table .gv-col-shrink {
width: 1px;
}
.gv-activated .gv-data-table .gv-col-truncate {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-underline {
color: var(--color-body-on-alternative);
display: block;
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table .gv-text-icon {
align-items: center;
max-width: 100%;
}
.gv-activated .gv-data-table .gv-text-icon gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-data-table .gv-text-icon span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-data-table a[target="_blank"]:not(.gv-button):not(.gv-no-external-icon):not(.gv-thumbnail-link) {
padding-right: calc(var(--size-icon-sm) + var(--size-xs));
position: relative;
}
.gv-activated .gv-data-table a[target="_blank"]:not(.gv-button):not(.gv-no-external-icon):not(.gv-thumbnail-link)::after {
background-color: var(--color-body-on-default);
content: "";
display: block;
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/open_in_new.788496d1.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/open_in_new.788496d1.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: 100%;
right: 0;
position: absolute;
top: 0;
width: var(--size-icon-sm);
}
.gv-activated .gv-data-table a[target="_blank"]:not(.gv-button):not(.gv-no-external-icon):not(.gv-thumbnail-link).gv-action::after {
background-color: var(--color-state-form-active);
}
.gv-activated .gv-data-table .gv-thumbnail-image {
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
display: block;
height: 80px;
max-width: none;
object-fit: cover;
width: 112px;
}
.gv-activated .gv-data-table .gv-thumbnail-link {
border-radius: var(--border-radius);
display: block;
overflow: hidden;
position: relative;
}
.gv-activated .gv-data-table .gv-thumbnail-link .gv-thumbnail-overlay {
align-items: center;
background: var(--color-overlay-dark);
color: var(--color-on-fixed-white);
display: flex;
top: 0;
right: 0;
bottom: 0;
left: 0;
justify-content: center;
position: absolute;
opacity: 0;
transition: opacity 0.3s;
}
.gv-activated .gv-data-table .gv-thumbnail-link:hover .gv-thumbnail-overlay {
opacity: 1;
}
@media (max-width: 599px ) {
.gv-activated .gv-data-table .gv-max-mob-col-1-hidden tr > *:nth-child(1) {
display: none;
}
.gv-activated .gv-data-table .gv-max-mob-col-2-hidden tr > *:nth-child(2) {
display: none;
}
.gv-activated .gv-data-table .gv-max-mob-col-3-hidden tr > *:nth-child(3) {
display: none;
}
.gv-activated .gv-data-table .gv-max-mob-col-4-hidden tr > *:nth-child(4) {
display: none;
}
.gv-activated .gv-data-table .gv-max-mob-col-5-hidden tr > *:nth-child(5) {
display: none;
}
.gv-activated .gv-data-table .gv-max-mob-col-6-hidden tr > *:nth-child(6) {
display: none;
}
.gv-activated .gv-data-table .gv-max-mob-col-7-hidden tr > *:nth-child(7) {
display: none;
}
.gv-activated .gv-data-table .gv-max-mob-col-8-hidden tr > *:nth-child(8) {
display: none;
}
.gv-activated .gv-data-table .gv-max-mob-col-9-hidden tr > *:nth-child(9) {
display: none;
}
.gv-activated .gv-data-table .gv-max-mob-col-10-hidden tr > *:nth-child(10) {
display: none;
}
.gv-activated .gv-data-table .gv-max-mob-col-11-hidden tr > *:nth-child(11) {
display: none;
}
.gv-activated .gv-data-table .gv-max-mob-col-12-hidden tr > *:nth-child(12) {
display: none;
}
}
@media (max-width: 767px ) {
.gv-activated .gv-data-table .gv-max-tab-sm-col-1-hidden tr > *:nth-child(1) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-sm-col-2-hidden tr > *:nth-child(2) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-sm-col-3-hidden tr > *:nth-child(3) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-sm-col-4-hidden tr > *:nth-child(4) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-sm-col-5-hidden tr > *:nth-child(5) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-sm-col-6-hidden tr > *:nth-child(6) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-sm-col-7-hidden tr > *:nth-child(7) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-sm-col-8-hidden tr > *:nth-child(8) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-sm-col-9-hidden tr > *:nth-child(9) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-sm-col-10-hidden tr > *:nth-child(10) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-sm-col-11-hidden tr > *:nth-child(11) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-sm-col-12-hidden tr > *:nth-child(12) {
display: none;
}
}
@media (max-width: 1023px ) {
.gv-activated .gv-data-table .gv-max-tab-col-1-hidden tr > *:nth-child(1) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-col-2-hidden tr > *:nth-child(2) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-col-3-hidden tr > *:nth-child(3) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-col-4-hidden tr > *:nth-child(4) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-col-5-hidden tr > *:nth-child(5) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-col-6-hidden tr > *:nth-child(6) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-col-7-hidden tr > *:nth-child(7) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-col-8-hidden tr > *:nth-child(8) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-col-9-hidden tr > *:nth-child(9) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-col-10-hidden tr > *:nth-child(10) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-col-11-hidden tr > *:nth-child(11) {
display: none;
}
.gv-activated .gv-data-table .gv-max-tab-col-12-hidden tr > *:nth-child(12) {
display: none;
}
}
.gv-activated .gv-pagination {
--pagination-btn-size: 40px;
align-items: center;
border-top: 1px solid var(--color-border-alt);
display: flex;
flex-flow: column nowrap;
gap: var(--size-sm);
padding: var(--size-sm) var(--size-md);
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-pagination .gv-checkbox {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-pagination .gv-radio {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-pagination .gv-radio:checked::after {
border-width: 5px;
}
.gv-activated .gv-pagination .gv-input.gv-input-number button {
padding: 0;
}
.gv-activated .gv-pagination .gv-toggle {
--toggle-height: 16px;
--toggle-width: 28px;
--toggle-dot-indent: 2px;
}
.gv-activated .gv-pagination gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-pagination nav ul {
display: flex;
flex-wrap: nowrap;
list-style: none;
padding: 0;
}
.gv-activated .gv-pagination nav li {
display: block;
height: var(--pagination-btn-size);
}
.gv-activated .gv-pagination nav li.gv-page-select {
align-items: center;
display: flex;
padding-left: var(--size-xs);
padding-right: var(--size-xs);
}
.gv-activated .gv-pagination nav li.gv-page-select .gv-input-select {
width: 112px;
}
.gv-activated .gv-pagination nav li:not(.gv-page-select) {
width: var(--pagination-btn-size);
}
.gv-activated .gv-pagination nav li:not(.gv-page-select) > * {
align-items: center;
display: inline-flex;
justify-content: center;
height: 100%;
width: 100%;
}
.gv-activated .gv-pagination nav li:not(.gv-page-select) > *:not(span) {
border-radius: var(--border-radius);
text-decoration: none;
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-pagination nav li:not(.gv-page-select) > *:not(span):hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-pagination nav li:not(.gv-page-select) > *:not(span):active {
background-color: var(--color-state-active);
}
.gv-activated .gv-pagination nav li:not(.gv-page-select).gv-active > * {
background-color: var(--color-state-active);
pointer-events: none;
}
.gv-activated .gv-pagination nav li:not(.gv-page-select).gv-disabled > * {
color: var(--color-body-on-alternative);
pointer-events: none;
}
.gv-activated .gv-pagination .gv-amount-select {
align-items: center;
display: flex;
gap: var(--size-sm);
white-space: nowrap;
}
.gv-activated .gv-pagination .gv-amount-select .gv-input-select {
width: 120px;
}
@media (max-width: 599px ) {
.gv-activated .gv-pagination nav li.gv-page {
display: none;
}
}
@media (min-width: 600px ) {
.gv-activated .gv-pagination nav li.gv-first,
.gv-activated .gv-pagination nav li.gv-last,
.gv-activated .gv-pagination nav li.gv-page-select {
display: none;
}
}
@media (min-width: 1024px ) {
.gv-activated .gv-pagination {
flex-flow: row-reverse wrap;
justify-content: space-between;
}
.gv-activated .gv-pagination .gv-note {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.gv-activated .gv-divider {
--divider-color: var(--color-border);
--divider-color-alternative: var(--color-border-alt);
border-top: 1px solid var(--divider-color);
border-right: 0;
border-bottom: 0;
border-left: 0;
display: block;
height: 1px;
width: 100%;
}
.gv-activated .gv-divider.gv-divider-vertical {
border-left: 1px solid var(--divider-color);
border-top: 0;
height: 100%;
min-height: var(--size-md);
width: 1px;
}
.gv-activated .gv-divider.gv-divider-dashed {
border-style: dashed;
}
.gv-activated .gv-divider.gv-divider-light {
border-color: var(--divider-color-alternative);
}
.gv-activated .gv-donut-chart {
align-items: center;
display: flex;
height: 72px;
justify-content: center;
width: 72px;
}
.gv-activated .gv-donut-chart .gv-progress-circle {
background-color: var(--color-surface-dim);
color: var(--color-body-on-alternative);
align-items: center;
border-radius: 50%;
display: flex;
height: 60px;
justify-content: center;
position: relative;
width: 60px;
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-donut-chart .gv-progress-circle gv-indicator {
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: rotate(-90deg);
transform-origin: center;
width: 100%;
}
.gv-activated .gv-donut-chart .gv-progress-circle .gv-circle-top {
transition: stroke-dashoffset 400ms ease-in-out;
}
.gv-activated .gv-donut-chart .gv-progress-circle[data-progress-percent="20"] .gv-circle-top {
stroke-dasharray: 188.49555922;
stroke-dashoffset: 150.79644737;
}
.gv-activated .gv-donut-chart .gv-progress-circle[data-progress-percent="40"] .gv-circle-top {
stroke-dasharray: 188.49555922;
stroke-dashoffset: 113.09733553;
}
.gv-activated .gv-donut-chart .gv-progress-circle[data-progress-percent="60"] .gv-circle-top {
stroke-dasharray: 188.49555922;
stroke-dashoffset: 75.39822369;
}
.gv-activated .gv-donut-chart .gv-progress-circle[data-progress-percent="80"] .gv-circle-top {
stroke-dasharray: 188.49555922;
stroke-dashoffset: 37.69911184;
}
.gv-activated .gv-donut-chart .gv-progress-circle[data-progress-percent="100"] .gv-circle-top {
stroke-dasharray: 188.49555922;
stroke-dashoffset: 0;
}
.gv-activated .gv-donut-chart .gv-progress-circle circle {
stroke-width: 3px;
}
.gv-activated .gv-donut-chart .gv-progress-circle.gv-state-success {
background-color: var(--color-signal-success-light);
color: var(--color-body-on-default);
}
.gv-activated .gv-donut-chart .gv-progress-circle.gv-state-success circle {
color: var(--color-signal-success);
}
.gv-activated .gv-donut-chart .gv-progress-circle.gv-state-warning {
background-color: var(--color-signal-warning-light);
color: var(--color-body-on-default);
}
.gv-activated .gv-donut-chart .gv-progress-circle.gv-state-warning circle {
color: var(--color-signal-warning);
}
.gv-activated .gv-donut-chart .gv-progress-circle.gv-state-alert {
background-color: var(--color-signal-alert-light);
color: var(--color-body-on-default);
}
.gv-activated .gv-donut-chart .gv-progress-circle.gv-state-alert circle {
color: var(--color-signal-alert);
}
.gv-activated .gv-empty-state {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--size-lg);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-empty-state {
padding: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-empty-state {
padding: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-empty-state {
padding: 48px;
}
}
.gv-activated .gv-empty-state .gv-empty-state-content {
text-align: center;
}
.gv-activated .gv-empty-state .gv-empty-state-content > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-empty-state .gv-empty-state-content .gv-title {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-sm);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-empty-state .gv-empty-state-content .gv-title {
letter-spacing: calc(var(--letterspacing-heading-sm-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-empty-state .gv-empty-state-content .gv-title {
letter-spacing: calc((var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-empty-state .gv-empty-state-content .gv-title {
letter-spacing: calc(var(--letterspacing-heading-sm-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-empty-state .gv-empty-state-content .gv-title {
font-size: calc(var(--font-size-heading-sm-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-empty-state .gv-empty-state-content .gv-title {
font-size: calc((var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-empty-state .gv-empty-state-content .gv-title {
font-size: calc(var(--font-size-heading-sm-max) * 1rem);
}
}
.gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content,
.gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title,
.gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title,
.gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title,
.gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title,
.gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title,
.gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title,
.gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title,
.gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-filter-options {
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
.gv-activated .gv-filter-options .gv-checkbox {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-filter-options .gv-radio {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-filter-options .gv-radio:checked::after {
border-width: 5px;
}
.gv-activated .gv-filter-options .gv-input.gv-input-number button {
padding: 0;
}
.gv-activated .gv-filter-options .gv-toggle {
--toggle-height: 16px;
--toggle-width: 28px;
--toggle-dot-indent: 2px;
}
.gv-activated .gv-filter-options .gv-filter-search {
padding-bottom: var(--size-sm);
}
.gv-activated .gv-filter-options .gv-state-info {
text-align: center;
width: 100%;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-filter-options .gv-state-info > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-filter-options .gv-state-info .gv-title {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-filter-options .gv-state-info .gv-title {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-filter-options .gv-state-info .gv-title {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-filter-options .gv-state-info .gv-title {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-filter-options .gv-state-info .gv-title {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-filter-options .gv-state-info .gv-title {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-filter-options .gv-state-info .gv-title {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-filter-options .gv-state-info gv-loader {
height: var(--size-lg);
width: var(--size-lg);
}
.gv-activated .gv-filter-options .gv-options {
border: none;
margin: 0;
min-width: 0;
padding: 0;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-filter-options .gv-option {
align-items: center;
cursor: pointer;
display: flex;
gap: var(--size-sm);
padding: var(--size-sm) 0;
text-align: left;
text-decoration: none;
width: 100%;
}
.gv-activated .gv-filter-options .gv-option .gv-checkbox,
.gv-activated .gv-filter-options .gv-option .gv-radio {
flex-shrink: 0;
}
.gv-activated .gv-filter-options .gv-option .gv-item-text {
display: inline-flex;
gap: var(--size-xs);
min-width: 0;
}
.gv-activated .gv-filter-options .gv-option .gv-item-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-filter-options .gv-option .gv-item-count {
color: var(--color-body-on-alternative);
flex-shrink: 0;
}
@media (min-width: 600px ) {
.gv-activated .gv-filter-options .gv-options-scrollable {
overflow-y: auto;
}
}
.gv-activated .gv-filter-bar {
--filter-button-background: var(--color-surface-bright);
position: relative;
}
.gv-activated .gv-filter-bar.gv-filters-transparent {
--filter-button-background: transparent;
}
.gv-activated .gv-filter-bar .gv-bar {
display: flex;
flex-direction: row;
gap: var(--size-sm);
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.gv-activated .gv-filter-bar .gv-filter-button {
align-items: center;
background: var(--filter-button-background);
border: 1px solid var(--color-border-alt);
border-radius: var(--chip-radius);
display: flex;
flex-shrink: 0;
gap: var(--size-sm);
min-width: 0;
padding: var(--size-xs) var(--size-md);
position: relative;
scroll-snap-align: start;
}
.gv-activated .gv-filter-bar .gv-filter-button:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-filter-bar .gv-filter-button:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-filter-bar .gv-filter-button.gv-all-filters {
border: none;
padding-left: var(--size-sm);
padding-right: var(--size-sm);
}
.gv-activated .gv-filter-bar .gv-filter-button.gv-expanded gv-icon:last-child {
transform: rotate(180deg);
}
.gv-activated .gv-filter-bar .gv-filter-button .gv-button-label {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-filter-bar .gv-filter-button gv-icon {
flex-shrink: 0;
}
.gv-activated .gv-filter-bar .gv-filter-button .gv-total-selected {
align-items: center;
background-color: var(--color-surface-highlight);
border-radius: var(--border-radius);
flex-shrink: 0;
height: var(--size-lg);
justify-content: center;
width: var(--size-lg);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-filter-bar .gv-filter-button .gv-total-selected:not(.gv-hidden) {
display: flex;
}
.gv-activated .gv-filter-bar .gv-bar-actions {
align-items: stretch;
display: flex;
flex-shrink: 0;
gap: var(--size-sm);
}
.gv-activated .gv-filter-bar .gv-bar-actions .gv-action-reset {
border-left: 1px solid var(--color-border);
padding-left: var(--size-md);
}
.gv-activated .gv-filter-panel {
left: 0;
}
.gv-activated .gv-filter-panel .gv-filter-options {
background-color: var(--color-surface-bright);
}
.gv-activated .gv-filter-panel .gv-filter-options .gv-panel-header {
margin-bottom: var(--size-lg);
}
.gv-activated .gv-filter-panel .gv-filter-options .gv-panel-header .gv-btn-close {
border-radius: var(--border-radius);
padding: var(--size-sm);
position: absolute;
right: var(--size-md);
top: var(--size-md);
}
.gv-activated .gv-filter-panel .gv-filter-options .gv-panel-header .gv-btn-close:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-filter-panel .gv-filter-options .gv-panel-header .gv-btn-close:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-filter-panel .gv-filter-options .gv-button-group {
padding-top: var(--size-md);
}
.gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name {
display: block;
padding-bottom: var(--size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-filters-drawer .gv-side-header {
padding: var(--size-md) var(--size-sm) var(--size-sm);
}
.gv-activated .gv-filters-drawer .gv-filter-options {
flex: 1;
overflow-y: auto;
padding-left: var(--size-sm);
}
.gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title {
margin-bottom: var(--size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-filters-drawer .gv-filter-options .gv-options .gv-filter-name {
padding: var(--size-sm) 0 var(--size-md);
}
.gv-activated .gv-filters-drawer .gv-filter-options .gv-options:not(:last-child) {
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--size-md);
}
.gv-activated .gv-filters-drawer .gv-filter-options .gv-options:not(:first-child) .gv-filter-name {
padding-top: var(--size-lg);
}
.gv-activated .gv-filters-drawer .gv-side-footer {
padding: var(--size-md) var(--size-sm);
}
@media (max-width: 599px ) {
.gv-activated .gv-filter-panel {
left: 0 !important;
}
.gv-activated .gv-filter-panel {
background-color: var(--color-overlay-dark);
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-end;
padding-top: var(--size-xl);
position: fixed;
top: 0;
width: 100%;
z-index: 1100;
}
.gv-activated .gv-filter-panel .gv-filter-options {
display: flex;
flex-direction: column;
flex-shrink: 1;
min-height: 0;
padding: var(--size-lg);
position: relative;
}
.gv-activated .gv-filter-panel .gv-options-content {
overflow-y: auto;
}
.gv-activated .gv-filter-panel .gv-button-group {
flex-shrink: 0;
}
.gv-activated .gv-filter-panel .gv-button-group .gv-clear {
display: none;
}
.gv-activated .gv-sidedrawer.gv-filters-drawer {
padding-top: var(--size-xl);
}
.gv-activated .gv-sidedrawer.gv-filters-drawer.gv-sidedrawer-open {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.gv-activated .gv-sidedrawer.gv-filters-drawer .gv-side-content {
flex-shrink: 1;
height: auto;
min-height: 0;
padding: var(--size-sm) var(--size-md);
position: relative;
width: 100%;
}
.gv-activated .gv-sidedrawer.gv-filters-drawer .gv-side-content .gv-btn-close {
top: var(--size-md);
}
.gv-activated .gv-sidedrawer.gv-filters-drawer .gv-side-footer {
padding-top: 0;
}
}
@media (min-width: 600px ) {
.gv-activated .gv-filter-panel {
position: absolute;
top: calc(100% + var(--size-xs));
z-index: 200;
}
.gv-activated .gv-filter-panel .gv-filter-options {
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
padding: var(--size-md) var(--size-lg);
width: 300px;
}
.gv-activated .gv-filter-panel .gv-panel-header,
.gv-activated .gv-filter-panel .gv-button-group .gv-cancel {
display: none;
}
.gv-activated .gv-filter-bar .gv-filter-panel .gv-filter-name {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
}
.gv-activated gv-flag {
width: var(--size-icon-md);
height: var(--size-icon-md);
display: inline-block;
vertical-align: text-bottom;
font-size: 0;
}
.gv-activated gv-flag svg {
height: 100%;
width: 100%;
}
.gv-activated .gv-mode-condensed gv-flag,
.gv-activated gv-flag.gv-mode-condensed {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-footer {
background-color: var(--color-surface-bright);
color: var(--color-body-on-default);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
/* Hide border if support block is added/visible */
}
.gv-activated .gv-footer .gv-footer-content {
margin-left: auto;
margin-right: auto;
max-width: 1536px;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-footer .gv-footer-content {
padding-left: 24px;
padding-right: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-footer .gv-footer-content {
padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-footer .gv-footer-content {
padding-left: 48px;
padding-right: 48px;
}
}
.gv-activated .gv-footer .gv-footer-support {
background-color: var(--color-surface-highlight);
}
.gv-activated .gv-footer .gv-footer-support .gv-footer-content {
display: flex;
flex-direction: column;
gap: 16px;
padding-bottom: 24px;
padding-top: 16px;
}
.gv-activated .gv-footer .gv-footer-support .gv-support-text {
align-items: center;
display: flex;
gap: 24px;
}
.gv-activated .gv-footer .gv-footer-support gv-tile,
.gv-activated .gv-footer .gv-footer-support .gv-button {
flex-shrink: 0;
}
.gv-activated .gv-footer .gv-footer-bar {
background-color: var(--color-surface-bright);
border-top: 1px solid var(--color-border-alt);
}
.gv-activated .gv-footer .gv-footer-bar .gv-footer-content {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 24px;
padding-top: 24px;
}
.gv-activated .gv-footer .gv-footer-support:not(.gv-hidden) + .gv-footer-bar {
border: none;
}
.gv-activated .gv-footer ul.gv-footer-links {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
padding: 0;
}
.gv-activated .gv-footer ul.gv-footer-links li {
margin: 0;
}
.gv-activated .gv-footer ul.gv-footer-links a {
color: var(--color-body-on-default);
text-decoration: none;
white-space: nowrap;
}
.gv-activated .gv-footer .gv-footer-copyright {
color: var(--color-body-on-alternative);
}
@media (min-width: 600px ) {
.gv-activated .gv-footer .gv-footer-support .gv-footer-content {
align-items: center;
flex-direction: row;
gap: 24px;
justify-content: center;
padding-bottom: 16px;
}
}
@media (min-width: 1024px ) {
.gv-activated .gv-footer .gv-footer-bar .gv-footer-content {
flex-direction: row;
gap: 24px;
justify-content: space-between;
}
.gv-activated .gv-footer ul.gv-footer-links {
align-items: center;
flex-direction: row;
gap: 16px;
}
.gv-activated .gv-footer ul.gv-footer-links li:not(:last-child) {
border-right: 1px solid var(--color-border-alt);
padding-right: 16px;
}
}
.gv-activated .gv-global-nav {
background-color: var(--color-surface-dim);
border-right: 1px solid var(--color-border-alt);
flex: 0 0 73px;
padding: var(--size-lg) var(--size-md);
width: 73px;
}
.gv-activated .gv-global-nav .gv-nav-list > *:not(:last-child) {
margin-bottom: var(--size-md);
}
/* Start grid mixins */
/* Grid template columns */
/* Grid item width */
/* Column start */
/* End grid mixins */
.gv-activated .gv-grid {
display: grid;
}
.gv-activated .gv-grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-grid-container {
gap: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-grid-container {
gap: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-grid-container {
gap: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-grid-container {
padding-left: 24px;
padding-right: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-grid-container {
padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-grid-container {
padding-left: 48px;
padding-right: 48px;
}
}
.gv-activated .gv-grid-container > * {
grid-column: auto / span 12;
max-width: 100%;
}
.gv-activated .gv-grid-container > * > .gv-grid-container {
padding-left: 0;
padding-right: 0;
}
.gv-activated .gv-grid-dense {
grid-auto-flow: dense;
}
.gv-activated .gv-span-1 {
grid-column: auto / span 1;
}
.gv-activated .gv-span-2 {
grid-column: auto / span 2;
}
.gv-activated .gv-span-3 {
grid-column: auto / span 3;
}
.gv-activated .gv-span-4 {
grid-column: auto / span 4;
}
.gv-activated .gv-span-5 {
grid-column: auto / span 5;
}
.gv-activated .gv-span-6 {
grid-column: auto / span 6;
}
.gv-activated .gv-span-7 {
grid-column: auto / span 7;
}
.gv-activated .gv-span-8 {
grid-column: auto / span 8;
}
.gv-activated .gv-span-9 {
grid-column: auto / span 9;
}
.gv-activated .gv-span-10 {
grid-column: auto / span 10;
}
.gv-activated .gv-span-11 {
grid-column: auto / span 11;
}
.gv-activated .gv-span-12 {
grid-column: auto / span 12;
}
.gv-activated .gv-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gv-activated .gv-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gv-activated .gv-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gv-activated .gv-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gv-activated .gv-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.gv-activated .gv-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.gv-activated .gv-grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.gv-activated .gv-grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.gv-activated .gv-grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.gv-activated .gv-grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.gv-activated .gv-grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.gv-activated .gv-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.gv-activated .gv-start-1 {
grid-column-start: 1;
}
.gv-activated .gv-start-2 {
grid-column-start: 2;
}
.gv-activated .gv-start-3 {
grid-column-start: 3;
}
.gv-activated .gv-start-4 {
grid-column-start: 4;
}
.gv-activated .gv-start-5 {
grid-column-start: 5;
}
.gv-activated .gv-start-6 {
grid-column-start: 6;
}
.gv-activated .gv-start-7 {
grid-column-start: 7;
}
.gv-activated .gv-start-8 {
grid-column-start: 8;
}
.gv-activated .gv-start-9 {
grid-column-start: 9;
}
.gv-activated .gv-start-10 {
grid-column-start: 10;
}
.gv-activated .gv-start-11 {
grid-column-start: 11;
}
.gv-activated .gv-start-12 {
grid-column-start: 12;
}
@media (min-width: 600px ) {
.gv-activated .gv-tab-span-1 {
grid-column: auto / span 1;
}
.gv-activated .gv-tab-span-2 {
grid-column: auto / span 2;
}
.gv-activated .gv-tab-span-3 {
grid-column: auto / span 3;
}
.gv-activated .gv-tab-span-4 {
grid-column: auto / span 4;
}
.gv-activated .gv-tab-span-5 {
grid-column: auto / span 5;
}
.gv-activated .gv-tab-span-6 {
grid-column: auto / span 6;
}
.gv-activated .gv-tab-span-7 {
grid-column: auto / span 7;
}
.gv-activated .gv-tab-span-8 {
grid-column: auto / span 8;
}
.gv-activated .gv-tab-span-9 {
grid-column: auto / span 9;
}
.gv-activated .gv-tab-span-10 {
grid-column: auto / span 10;
}
.gv-activated .gv-tab-span-11 {
grid-column: auto / span 11;
}
.gv-activated .gv-tab-span-12 {
grid-column: auto / span 12;
}
.gv-activated .gv-tab-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gv-activated .gv-tab-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gv-activated .gv-tab-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gv-activated .gv-tab-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gv-activated .gv-tab-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.gv-activated .gv-tab-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.gv-activated .gv-tab-grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.gv-activated .gv-tab-grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.gv-activated .gv-tab-grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.gv-activated .gv-tab-grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.gv-activated .gv-tab-grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.gv-activated .gv-tab-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.gv-activated .gv-tab-start-1 {
grid-column-start: 1;
}
.gv-activated .gv-tab-start-2 {
grid-column-start: 2;
}
.gv-activated .gv-tab-start-3 {
grid-column-start: 3;
}
.gv-activated .gv-tab-start-4 {
grid-column-start: 4;
}
.gv-activated .gv-tab-start-5 {
grid-column-start: 5;
}
.gv-activated .gv-tab-start-6 {
grid-column-start: 6;
}
.gv-activated .gv-tab-start-7 {
grid-column-start: 7;
}
.gv-activated .gv-tab-start-8 {
grid-column-start: 8;
}
.gv-activated .gv-tab-start-9 {
grid-column-start: 9;
}
.gv-activated .gv-tab-start-10 {
grid-column-start: 10;
}
.gv-activated .gv-tab-start-11 {
grid-column-start: 11;
}
.gv-activated .gv-tab-start-12 {
grid-column-start: 12;
}
}
@media (min-width: 768px ) {
.gv-activated .gv-tab-lg-span-1 {
grid-column: auto / span 1;
}
.gv-activated .gv-tab-lg-span-2 {
grid-column: auto / span 2;
}
.gv-activated .gv-tab-lg-span-3 {
grid-column: auto / span 3;
}
.gv-activated .gv-tab-lg-span-4 {
grid-column: auto / span 4;
}
.gv-activated .gv-tab-lg-span-5 {
grid-column: auto / span 5;
}
.gv-activated .gv-tab-lg-span-6 {
grid-column: auto / span 6;
}
.gv-activated .gv-tab-lg-span-7 {
grid-column: auto / span 7;
}
.gv-activated .gv-tab-lg-span-8 {
grid-column: auto / span 8;
}
.gv-activated .gv-tab-lg-span-9 {
grid-column: auto / span 9;
}
.gv-activated .gv-tab-lg-span-10 {
grid-column: auto / span 10;
}
.gv-activated .gv-tab-lg-span-11 {
grid-column: auto / span 11;
}
.gv-activated .gv-tab-lg-span-12 {
grid-column: auto / span 12;
}
.gv-activated .gv-tab-lg-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gv-activated .gv-tab-lg-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gv-activated .gv-tab-lg-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gv-activated .gv-tab-lg-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gv-activated .gv-tab-lg-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.gv-activated .gv-tab-lg-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.gv-activated .gv-tab-lg-grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.gv-activated .gv-tab-lg-grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.gv-activated .gv-tab-lg-grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.gv-activated .gv-tab-lg-grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.gv-activated .gv-tab-lg-grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.gv-activated .gv-tab-lg-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.gv-activated .gv-tab-lg-start-1 {
grid-column-start: 1;
}
.gv-activated .gv-tab-lg-start-2 {
grid-column-start: 2;
}
.gv-activated .gv-tab-lg-start-3 {
grid-column-start: 3;
}
.gv-activated .gv-tab-lg-start-4 {
grid-column-start: 4;
}
.gv-activated .gv-tab-lg-start-5 {
grid-column-start: 5;
}
.gv-activated .gv-tab-lg-start-6 {
grid-column-start: 6;
}
.gv-activated .gv-tab-lg-start-7 {
grid-column-start: 7;
}
.gv-activated .gv-tab-lg-start-8 {
grid-column-start: 8;
}
.gv-activated .gv-tab-lg-start-9 {
grid-column-start: 9;
}
.gv-activated .gv-tab-lg-start-10 {
grid-column-start: 10;
}
.gv-activated .gv-tab-lg-start-11 {
grid-column-start: 11;
}
.gv-activated .gv-tab-lg-start-12 {
grid-column-start: 12;
}
}
@media (min-width: 1024px ) {
.gv-activated .gv-desk-span-1 {
grid-column: auto / span 1;
}
.gv-activated .gv-desk-span-2 {
grid-column: auto / span 2;
}
.gv-activated .gv-desk-span-3 {
grid-column: auto / span 3;
}
.gv-activated .gv-desk-span-4 {
grid-column: auto / span 4;
}
.gv-activated .gv-desk-span-5 {
grid-column: auto / span 5;
}
.gv-activated .gv-desk-span-6 {
grid-column: auto / span 6;
}
.gv-activated .gv-desk-span-7 {
grid-column: auto / span 7;
}
.gv-activated .gv-desk-span-8 {
grid-column: auto / span 8;
}
.gv-activated .gv-desk-span-9 {
grid-column: auto / span 9;
}
.gv-activated .gv-desk-span-10 {
grid-column: auto / span 10;
}
.gv-activated .gv-desk-span-11 {
grid-column: auto / span 11;
}
.gv-activated .gv-desk-span-12 {
grid-column: auto / span 12;
}
.gv-activated .gv-desk-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gv-activated .gv-desk-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gv-activated .gv-desk-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gv-activated .gv-desk-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gv-activated .gv-desk-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.gv-activated .gv-desk-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.gv-activated .gv-desk-grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.gv-activated .gv-desk-grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.gv-activated .gv-desk-grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.gv-activated .gv-desk-grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.gv-activated .gv-desk-grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.gv-activated .gv-desk-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.gv-activated .gv-desk-start-1 {
grid-column-start: 1;
}
.gv-activated .gv-desk-start-2 {
grid-column-start: 2;
}
.gv-activated .gv-desk-start-3 {
grid-column-start: 3;
}
.gv-activated .gv-desk-start-4 {
grid-column-start: 4;
}
.gv-activated .gv-desk-start-5 {
grid-column-start: 5;
}
.gv-activated .gv-desk-start-6 {
grid-column-start: 6;
}
.gv-activated .gv-desk-start-7 {
grid-column-start: 7;
}
.gv-activated .gv-desk-start-8 {
grid-column-start: 8;
}
.gv-activated .gv-desk-start-9 {
grid-column-start: 9;
}
.gv-activated .gv-desk-start-10 {
grid-column-start: 10;
}
.gv-activated .gv-desk-start-11 {
grid-column-start: 11;
}
.gv-activated .gv-desk-start-12 {
grid-column-start: 12;
}
}
@media (min-width: 1280px ) {
.gv-activated .gv-desk-lg-span-1 {
grid-column: auto / span 1;
}
.gv-activated .gv-desk-lg-span-2 {
grid-column: auto / span 2;
}
.gv-activated .gv-desk-lg-span-3 {
grid-column: auto / span 3;
}
.gv-activated .gv-desk-lg-span-4 {
grid-column: auto / span 4;
}
.gv-activated .gv-desk-lg-span-5 {
grid-column: auto / span 5;
}
.gv-activated .gv-desk-lg-span-6 {
grid-column: auto / span 6;
}
.gv-activated .gv-desk-lg-span-7 {
grid-column: auto / span 7;
}
.gv-activated .gv-desk-lg-span-8 {
grid-column: auto / span 8;
}
.gv-activated .gv-desk-lg-span-9 {
grid-column: auto / span 9;
}
.gv-activated .gv-desk-lg-span-10 {
grid-column: auto / span 10;
}
.gv-activated .gv-desk-lg-span-11 {
grid-column: auto / span 11;
}
.gv-activated .gv-desk-lg-span-12 {
grid-column: auto / span 12;
}
.gv-activated .gv-desk-lg-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gv-activated .gv-desk-lg-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gv-activated .gv-desk-lg-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gv-activated .gv-desk-lg-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gv-activated .gv-desk-lg-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.gv-activated .gv-desk-lg-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.gv-activated .gv-desk-lg-grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.gv-activated .gv-desk-lg-grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.gv-activated .gv-desk-lg-grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.gv-activated .gv-desk-lg-grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.gv-activated .gv-desk-lg-grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.gv-activated .gv-desk-lg-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.gv-activated .gv-desk-lg-start-1 {
grid-column-start: 1;
}
.gv-activated .gv-desk-lg-start-2 {
grid-column-start: 2;
}
.gv-activated .gv-desk-lg-start-3 {
grid-column-start: 3;
}
.gv-activated .gv-desk-lg-start-4 {
grid-column-start: 4;
}
.gv-activated .gv-desk-lg-start-5 {
grid-column-start: 5;
}
.gv-activated .gv-desk-lg-start-6 {
grid-column-start: 6;
}
.gv-activated .gv-desk-lg-start-7 {
grid-column-start: 7;
}
.gv-activated .gv-desk-lg-start-8 {
grid-column-start: 8;
}
.gv-activated .gv-desk-lg-start-9 {
grid-column-start: 9;
}
.gv-activated .gv-desk-lg-start-10 {
grid-column-start: 10;
}
.gv-activated .gv-desk-lg-start-11 {
grid-column-start: 11;
}
.gv-activated .gv-desk-lg-start-12 {
grid-column-start: 12;
}
}
.gv-activated .gv-page-header .gv-header-content {
display: flex;
gap: var(--size-lg);
}
.gv-activated .gv-page-header .gv-header-content .gv-content {
flex: 1;
min-width: 0;
}
.gv-activated .gv-page-header .gv-header-content .gv-button-group {
flex-shrink: 0;
}
.gv-activated .gv-page-header .gv-description {
max-width: var(--text-max-width);
}
.gv-activated .gv-page-header .gv-description > *:not(:last-child) {
margin-bottom: var(--size-md);
}
.gv-activated .gv-page-header .gv-header-actions {
display: flex;
flex-direction: column;
gap: var(--size-xs);
}
.gv-activated .gv-page-header .gv-header-status {
display: flex;
flex-wrap: wrap;
gap: var(--size-xs) var(--size-md);
}
.gv-activated .gv-page-header .gv-header-status .gv-status {
color: var(--color-body-on-alternative);
display: flex;
flex: 0 0 auto;
gap: var(--size-xs);
}
.gv-activated .gv-page-header .gv-header-status .gv-status .gv-text {
display: inline-flex;
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-page-header .gv-header-status .gv-status gv-icon,
.gv-activated .gv-page-header .gv-header-status .gv-status .gv-title {
flex-shrink: 0;
}
.gv-activated .gv-page-header .gv-header-status .gv-status .gv-separator {
padding-right: var(--size-xs);
}
@media (max-width: 599px ) {
.gv-activated .gv-page-header .gv-header-status {
flex-direction: column;
}
.gv-activated .gv-page-header .gv-header-content {
flex-direction: column;
gap: 0;
}
}
@media (min-width: 600px ) {
.gv-activated .gv-page-header .gv-header-content .gv-button-group {
flex-direction: row-reverse;
}
}
.gv-activated .gv-page-header.gv-header .gv-breadcrumbs {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-page-header.gv-header .gv-header-status .gv-status .gv-text {
align-items: center;
}
.gv-activated .gv-page-header.gv-header .gv-header-top {
display: flex;
align-items: flex-start;
gap: var(--size-sm);
margin-bottom: var(--size-sm);
}
.gv-activated .gv-page-header.gv-header .gv-header-top .gv-breadcrumbs {
margin-bottom: 0;
}
.gv-activated .gv-page-header.gv-header .gv-header-top > :not(.gv-header-utility) {
min-width: 0;
}
[dir="ltr"] .gv-activated .gv-page-header.gv-header .gv-header-utility {
margin-left: auto;
}
[dir="rtl"] .gv-activated .gv-page-header.gv-header .gv-header-utility {
margin-right: auto;
}
.gv-activated .gv-page-header.gv-header .gv-header-utility {
color: var(--color-body-on-alternative);
display: flex;
flex: 0 0 auto;
align-items: center;
-webkit-margin-start: auto;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-content {
padding-top: 2px;
}
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-content > *:not(:last-child) {
margin-bottom: var(--size-xs);
}
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-title {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-lg);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-title {
letter-spacing: calc(var(--letterspacing-heading-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-title {
letter-spacing: calc((var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-title {
letter-spacing: calc(var(--letterspacing-heading-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-title {
font-size: calc(var(--font-size-heading-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-title {
font-size: calc((var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-title {
font-size: calc(var(--font-size-heading-lg-max) * 1rem);
}
}
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle {
color: var(--color-body-on-alternative);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-sm);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle {
letter-spacing: calc(var(--letterspacing-heading-sm-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle {
letter-spacing: calc((var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle {
letter-spacing: calc(var(--letterspacing-heading-sm-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle {
font-size: calc(var(--font-size-heading-sm-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle {
font-size: calc((var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle {
font-size: calc(var(--font-size-heading-sm-max) * 1rem);
}
}
.gv-activated .gv-page-header.gv-header .gv-header-status,
.gv-activated .gv-page-header.gv-header .gv-description {
margin-top: var(--size-sm);
}
.gv-activated .gv-page-header.gv-header .gv-header-actions {
margin-bottom: var(--size-sm);
margin-top: var(--size-xs);
}
@media (max-width: 599px ) {
.gv-activated .gv-page-header.gv-header .gv-button-group {
margin-top: var(--size-md);
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
}
.gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-content {
align-items: center;
display: flex;
gap: var(--size-sm);
}
.gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title {
min-width: 0;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title {
letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title {
letter-spacing: calc((var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title {
letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title {
font-size: calc(var(--font-size-text-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title {
font-size: calc((var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title {
font-size: calc(var(--font-size-text-lg-max) * 1rem);
}
}
.gv-activated .gv-page-header.gv-subheader .gv-description {
margin-top: var(--size-xs);
}
.gv-activated .gv-page-header.gv-subheader .gv-button-group {
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
@media (max-width: 599px ) {
.gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-content {
justify-content: space-between;
}
.gv-activated .gv-page-header.gv-subheader .gv-button-group {
margin-top: var(--size-xs);
}
}
.gv-activated .gv-help-centre > *:not(:last-child) {
margin-bottom: var(--size-md);
}
.gv-activated .gv-help-centre .gv-header > *:not(:last-child) {
margin-bottom: var(--size-xs);
}
.gv-activated .gv-help-centre .gv-header .gv-title {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-help-centre .gv-header .gv-title {
letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-help-centre .gv-header .gv-title {
letter-spacing: calc((var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-help-centre .gv-header .gv-title {
letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-help-centre .gv-header .gv-title {
font-size: calc(var(--font-size-text-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-help-centre .gv-header .gv-title {
font-size: calc((var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-help-centre .gv-header .gv-title {
font-size: calc(var(--font-size-text-lg-max) * 1rem);
}
}
.gv-activated .gv-help-centre .gv-header .gv-description {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-help-centre .gv-content {
display: grid;
grid-gap: var(--size-md);
gap: var(--size-md);
grid-template-columns: 1fr;
}
.gv-activated .gv-help-centre .gv-content-container {
padding: var(--size-lg);
}
.gv-activated .gv-help-centre .gv-content-container > *:not(:last-child) {
margin-bottom: var(--size-md);
}
.gv-activated .gv-help-centre .gv-help-list {
list-style: none;
}
.gv-activated .gv-help-centre .gv-help-list > *:not(:last-child) {
margin-bottom: var(--size-md);
}
.gv-activated .gv-help-centre .gv-help-link {
display: block;
min-height: var(--size-icon-md);
padding-right: calc(var(--size-icon-md) + var(--size-sm));
position: relative;
text-decoration: none;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-help-centre .gv-help-link::after {
background-color: var(--color-body-on-default);
content: "";
display: block;
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/open_in_new.788496d1.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/open_in_new.788496d1.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: var(--size-icon-md);
right: 0;
position: absolute;
top: 0;
width: var(--size-icon-md);
}
.gv-activated .gv-help-centre .gv-help-link .gv-link-label {
display: block;
padding-top: 1px;
}
@media (min-width: 1280px ) {
.gv-activated .gv-help-centre .gv-content {
grid-template-columns: repeat(2, 1fr);
}
}
.gv-activated .gv-legend-normal {
color: var(--color-body-on-default);
}
.gv-activated .gv-legend-poor {
color: var(--color-signal-alert);
}
.gv-activated .gv-legend-improve {
color: var(--color-signal-warning);
}
.gv-activated .gv-legend-good {
color: var(--color-signal-success);
}
.gv-activated .gv-legend .gv-legend-bar {
display: flex;
flex-direction: row;
margin-bottom: 16px;
}
.gv-activated .gv-legend .gv-legend-bar li {
align-items: center;
display: flex;
margin-right: 16px;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-legend .gv-legend-bar li gv-icon {
margin-right: 4px;
}
@media (max-width: 599px ) {
.gv-activated .gv-legend .gv-legend-bar {
flex-direction: column;
}
.gv-activated .gv-legend .gv-legend-bar li {
margin-bottom: 8px;
}
}
.gv-activated .gv-micro-interface {
border: var(--size-border) solid var(--color-border-alt);
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
}
.gv-activated .gv-micro-interface:not(:first-child) {
margin-top: var(--size-xs);
}
.gv-activated .gv-micro-interface .gv-micro-interface-top {
align-items: center;
background: var(--color-surface-dim);
border-bottom: var(--size-border) solid var(--color-border-alt);
color: var(--color-body-on-alternative);
display: flex;
padding: var(--size-sm);
width: 100%;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content {
padding: var(--size-md);
position: relative;
width: 100%;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content[\:has\(.gv-option-key\)] {
padding-left: var(--size-sm);
padding-right: var(--size-sm);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content:has(.gv-option-key) {
padding-left: var(--size-sm);
padding-right: var(--size-sm);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content[\:has\(.gv-option-key\)] .gv-option-group .gv-option-group-label {
padding-left: var(--size-xs);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content:has(.gv-option-key) .gv-option-group .gv-option-group-label {
padding-left: var(--size-xs);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content[\:has\(.gv-option-key\)] .gv-option-group .gv-option-group-types {
gap: var(--size-xs);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content:has(.gv-option-key) .gv-option-group .gv-option-group-types {
gap: var(--size-xs);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-inline .gv-label {
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key {
align-items: flex-start;
background: var(--color-surface-bright);
border-radius: var(--border-radius);
cursor: pointer;
padding: var(--size-xs);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key[\:has\(input.focus-visible\)] {
background-color: var(--color-state-hover);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key:has(input.focus-visible) {
background-color: var(--color-state-hover);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key[\:has\(input\:focus-visible\)] {
background-color: var(--color-state-hover);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key:has(input:focus-visible) {
background-color: var(--color-state-hover);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key[\:has\(input\:checked\)] {
background-color: var(--color-state-active);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key:has(input:checked) {
background-color: var(--color-state-active);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key .gv-key {
align-items: center;
background: var(--color-surface-dim);
border: var(--size-border) solid var(--color-border-alt);
border-radius: var(--border-radius);
display: flex;
flex-shrink: 0;
height: var(--size-lg);
justify-content: center;
width: var(--size-lg);
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key .gv-label::before,
.gv-activated .gv-micro-interface .gv-micro-interface-content .gv-option-key .gv-label::after {
margin: 0;
}
.gv-activated .gv-micro-interface .gv-micro-interface-bottom {
align-items: center;
background: var(--color-surface-dim);
border-top: var(--size-border) solid var(--color-border-alt);
display: flex;
gap: var(--size-sm);
justify-content: flex-end;
padding: var(--size-sm);
width: 100%;
}
.gv-activated .gv-micro-interface .gv-micro-interface-bottom .gv-bottom-info {
color: var(--color-body-on-alternative);
flex: 1 0 0;
min-width: 0;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-micro-interface .gv-micro-interface-bottom .gv-button {
width: auto;
}
.gv-activated .gv-micro-interface.gv-error .gv-micro-interface-bottom .gv-bottom-info {
color: var(--color-signal-alert);
}
.gv-activated .gv-micro-interface.gv-content-only {
border: none;
border-radius: 0;
}
.gv-activated .gv-micro-interface.gv-content-only .gv-micro-interface-content {
padding: 0;
}
.gv-activated gv-icon {
width: var(--size-icon-md);
height: var(--size-icon-md);
display: inline-block;
vertical-align: text-bottom;
font-size: 0;
}
.gv-activated gv-icon svg {
width: 100%;
height: 100%;
fill: currentcolor;
}
.gv-activated .gv-mode-condensed gv-icon,
.gv-activated gv-icon.gv-mode-condensed,
.gv-activated gv-icon[size="small"] {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-mode-condensed-xs gv-icon,
.gv-activated gv-icon.gv-mode-condensed-xs,
.gv-activated gv-icon[size="xsmall"] {
height: var(--size-icon-xs);
width: var(--size-icon-xs);
}
.gv-activated gv-illustration {
align-items: center;
display: flex;
}
.gv-activated gv-illustration svg,
.gv-activated gv-tile svg {
color: var(--color-illustration-line);
height: 100%;
width: 100%;
}
.gv-activated gv-illustration svg .gv-stroke-alert,
.gv-activated gv-tile svg .gv-stroke-alert {
stroke: var(--color-signal-alert);
}
.gv-activated gv-illustration svg .gv-fill-bg,
.gv-activated gv-tile svg .gv-fill-bg {
fill: var(--color-illustration-background);
}
.gv-activated gv-illustration svg .gv-fill-gray,
.gv-activated gv-tile svg .gv-fill-gray {
fill: var(--color-illustration-gray);
}
.gv-activated gv-illustration svg .gv-fill-line,
.gv-activated gv-tile svg .gv-fill-line {
fill: var(--color-illustration-line);
}
.gv-activated gv-illustration svg .gv-fill-100,
.gv-activated gv-tile svg .gv-fill-100 {
fill: var(--color-illustration-100);
}
.gv-activated gv-illustration svg .gv-fill-200,
.gv-activated gv-tile svg .gv-fill-200 {
fill: var(--color-illustration-200);
}
.gv-activated gv-illustration svg .gv-fill-300,
.gv-activated gv-tile svg .gv-fill-300 {
fill: var(--color-illustration-300);
}
.gv-activated gv-illustration svg .gv-fill-alert-light,
.gv-activated gv-tile svg .gv-fill-alert-light {
fill: var(--color-signal-alert-light);
}
.gv-activated .gv-indicator {
--indicator-color-background: var(--color-signal-info);
background-color: var(--indicator-color-background);
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
height: 8px;
width: 8px;
}
.gv-activated .gv-indicator.gv-state-attention {
/* This colour is intentionally hardcoded */
--indicator-color-background: #d27401;
}
.gv-activated .gv-indicator.gv-state-blank {
--indicator-color-background: var(--color-surface-bright);
}
.gv-activated .gv-indicator.gv-state-busy {
--indicator-color-background: var(--color-signal-info);
}
.gv-activated .gv-indicator.gv-state-critical {
--indicator-color-background: var(--color-signal-alert);
}
.gv-activated .gv-indicator.gv-state-informative {
--indicator-color-background: var(--color-gray-400);
}
.gv-activated .gv-indicator.gv-state-positive {
--indicator-color-background: var(--color-signal-success);
}
.gv-activated .gv-text-indicator {
align-items: center;
display: inline-flex;
gap: 8px;
max-width: 100%;
}
.gv-activated .gv-text-indicator > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-icon-indicator {
position: relative;
}
.gv-activated .gv-icon-indicator::before {
background-color: var(--color-primary);
border: 1px solid var(--color-body-on-default);
border-radius: 50%;
content: "";
display: block;
position: absolute;
right: 0;
top: 2px;
height: 8px;
width: 8px;
}
.gv-activated gv-indicator {
display: inline-block;
font-size: 0;
}
.gv-activated gv-indicator svg {
height: 100%;
width: 100%;
}
.gv-activated .gv-sort {
align-items: center;
color: var(--color-body-on-alternative);
display: flex;
flex: 0 0 var(--size-icon-sm);
flex-direction: column;
gap: 4px;
height: var(--size-icon-sm);
justify-content: center;
width: var(--size-icon-sm);
}
.gv-activated .gv-sort gv-indicator {
height: 6px;
width: 9px;
}
.gv-activated .gv-sort.gv-asc gv-indicator:first-child {
color: var(--color-body-on-default);
}
.gv-activated .gv-sort.gv-desc gv-indicator:last-child {
color: var(--color-body-on-default);
}
.gv-activated .gv-initials {
align-items: center;
background-color: var(--color-surface-highlight);
border-radius: var(--size-xl);
color: var(--color-body-on-default);
display: flex;
height: var(--size-xl);
justify-content: center;
text-transform: uppercase;
width: var(--size-xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-initials {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-initials {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-initials {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-initials {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-initials {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-initials {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-initials > span {
/* Apply values to calculate em_based margins that work with any font size */
}
.gv-activated .gv-initials > span::before {
margin-bottom: calc(-0.375em + 0px);
}
.gv-activated .gv-initials > span::after {
margin-top: calc(-0.3125em + 0px);
}
.gv-activated .gv-initials > span::before,
.gv-activated .gv-initials > span::after {
content: "";
display: block;
height: 0;
width: 0;
}
.gv-activated .gv-mode-condensed .gv-initials,
.gv-activated .gv-initials.gv-mode-condensed {
height: var(--size-lg);
width: var(--size-lg);
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-input-ai {
display: flex;
flex-direction: column;
position: relative;
}
.gv-activated .gv-input-ai .gv-input.gv-input-textarea {
height: auto;
padding: 0;
}
.gv-activated .gv-input-ai .gv-input.gv-input-textarea textarea {
min-height: 100px;
padding: var(--input-padding) var(--input-padding) var(--size-sm);
}
.gv-activated .gv-input-ai .gv-input.gv-input-textarea .gv-input-toolbar + textarea {
padding-top: var(--size-sm);
}
.gv-activated .gv-autocomplete .gv-input:not(.gv-input-search) .gv-expanded gv-icon {
transform: rotate(180deg);
}
.gv-activated .gv-autocomplete .gv-input [aria-expanded="true"] + .gv-clear {
visibility: visible;
}
.gv-activated .gv-autocomplete-panel {
background: var(--color-surface-bright);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: var(--size-sm);
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 0;
width: 100%;
z-index: 200;
}
.gv-activated .gv-autocomplete-panel .gv-state-info {
padding: var(--size-sm);
width: 100%;
}
.gv-activated .gv-autocomplete-panel .gv-state-info > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-autocomplete-panel .gv-listbox {
max-height: 40vh;
overflow: auto;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-autocomplete-panel .gv-listbox > *:not(:last-child) {
margin-bottom: 4px;
}
.gv-activated .gv-autocomplete-panel .gv-listbox .gv-option {
border-radius: var(--border-radius);
cursor: pointer;
min-height: 40px;
padding: var(--size-sm);
text-align: left;
text-decoration: none;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-autocomplete-panel .gv-listbox .gv-option:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-autocomplete-panel .gv-listbox .gv-option[aria-selected="true"],
.gv-activated .gv-autocomplete-panel .gv-listbox .gv-option:focus {
background-color: var(--color-state-active);
}
.gv-activated .gv-autocomplete-panel .gv-listbox .gv-option.gv-option-row {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--size-sm);
}
.gv-activated .gv-autocomplete-panel .gv-listbox .gv-option .gv-highlight {
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-autocomplete-panel .gv-listbox .gv-option .gv-text-icon {
align-items: center;
display: flex;
}
.gv-activated .gv-autocomplete-panel .gv-listbox .gv-option .gv-text-icon span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-autocomplete-panel .gv-listbox .gv-option .gv-with-underline {
display: flex;
flex-direction: column;
}
.gv-activated .gv-autocomplete-panel .gv-listbox .gv-option .gv-with-underline span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-autocomplete-panel .gv-listbox .gv-option .gv-with-underline .gv-underline {
color: var(--color-body-on-alternative);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-char-counter-input {
position: relative;
}
.gv-activated .gv-char-counter-input:hover[\:not-has\(.gv-label\:hover\)][\:not-has\(input\:disabled\,\%20textarea\:disabled\,\%20input\[readonly\]\,\%20textarea\[readonly\]\,\%20.gv-disabled\,\%20.gv-read-only\)] .gv-highlighted,
.gv-activated .gv-char-counter-input[focus-within][\:not-has\(input\:disabled\,\%20textarea\:disabled\,\%20input\[readonly\]\,\%20textarea\[readonly\]\,\%20.gv-disabled\,\%20.gv-read-only\)] .gv-highlighted {
--input-color-background: var(--color-surface-toned);
}
.gv-activated .gv-char-counter-input:hover:not(.gv-form-option:has(.gv-label:hover) .gv-char-counter-input):not(:has(input:disabled, textarea:disabled, input[readonly], textarea[readonly], .gv-disabled, .gv-read-only)) .gv-highlighted,
.gv-activated .gv-char-counter-input[focus-within]:not(:has(input:disabled, textarea:disabled, input[readonly], textarea[readonly], .gv-disabled, .gv-read-only)) .gv-highlighted {
--input-color-background: var(--color-surface-toned);
}
.gv-activated .gv-char-counter-input:hover[\:not-has\(.gv-label\:hover\)][\:not-has\(input\:disabled\,\%20textarea\:disabled\,\%20input\[readonly\]\,\%20textarea\[readonly\]\,\%20.gv-disabled\,\%20.gv-read-only\)] .gv-highlighted,
.gv-activated .gv-char-counter-input[focus-within][\:not-has\(input\:disabled\,\%20textarea\:disabled\,\%20input\[readonly\]\,\%20textarea\[readonly\]\,\%20.gv-disabled\,\%20.gv-read-only\)] .gv-highlighted {
--input-color-background: var(--color-surface-toned);
}
.gv-activated .gv-char-counter-input:hover[\:not-has\(.gv-label\:hover\)][\:not-has\(input\:disabled\,\%20textarea\:disabled\,\%20input\[readonly\]\,\%20textarea\[readonly\]\,\%20.gv-disabled\,\%20.gv-read-only\)] .gv-highlighted,
.gv-activated .gv-char-counter-input:focus-within[\:not-has\(input\:disabled\,\%20textarea\:disabled\,\%20input\[readonly\]\,\%20textarea\[readonly\]\,\%20.gv-disabled\,\%20.gv-read-only\)] .gv-highlighted {
--input-color-background: var(--color-surface-toned);
}
.gv-activated .gv-char-counter-input:hover:not(.gv-form-option:has(.gv-label:hover) .gv-char-counter-input):not(:has(input:disabled, textarea:disabled, input[readonly], textarea[readonly], .gv-disabled, .gv-read-only)) .gv-highlighted,
.gv-activated .gv-char-counter-input:focus-within:not(:has(input:disabled, textarea:disabled, input[readonly], textarea[readonly], .gv-disabled, .gv-read-only)) .gv-highlighted {
--input-color-background: var(--color-surface-toned);
}
.gv-activated .gv-char-counter-input .gv-highlighted {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: transparent;
z-index: 0;
pointer-events: none;
}
.gv-activated .gv-char-counter-input .gv-highlighted .gv-exceed {
background-color: var(--color-signal-alert-light);
color: transparent;
}
.gv-activated .gv-char-counter-input .gv-highlighted:not(.gv-input-textarea) {
white-space: nowrap;
}
.gv-activated .gv-char-counter-input .gv-highlighted.gv-input-textarea {
white-space: pre-wrap;
}
.gv-activated .gv-char-counter-input input,
.gv-activated .gv-char-counter-input textarea {
position: relative;
z-index: 1;
}
.gv-activated .gv-char-counter-info {
display: flex;
gap: var(--size-xs);
justify-content: flex-end;
}
.gv-activated .gv-char-counter-info .gv-input-message {
flex-grow: 1;
}
.gv-activated .gv-char-counter-info .gv-char-counter {
color: var(--color-body-on-alternative);
white-space: nowrap;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-error .gv-char-counter-input input,
.gv-activated .gv-char-counter-input.gv-error input,
.gv-activated .gv-error .gv-char-counter-input textarea,
.gv-activated .gv-char-counter-input.gv-error textarea {
background: transparent;
}
.gv-activated .gv-error .gv-char-counter {
color: var(--color-signal-alert);
}
.gv-activated .gv-checkbox {
--checkbox-color-fill: var(--color-surface-form);
--checkbox-color-border: var(--color-border-form);
--checkbox-color-fill-checked: var(--color-state-form-active);
--checkbox-color-border-checked: transparent;
--checkbox-color-icon-checked: var(--color-fg-form-on);
--checkbox-border-radius: 4px;
all: unset;
box-sizing: border-box;
display: revert;
border-radius: var(--checkbox-border-radius);
cursor: pointer;
height: var(--size-lg);
position: relative;
width: var(--size-lg);
/* The custom unchecked appearance: */
/* The custom ticked appearance: */
}
.gv-activated .gv-checkbox:disabled {
cursor: default;
opacity: var(--opacity-disabled-elements);
pointer-events: none;
}
.gv-activated .gv-checkbox::before {
background-color: var(--checkbox-color-fill);
border: var(--size-border) solid var(--checkbox-color-border);
border-radius: var(--checkbox-border-radius);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.gv-activated .gv-checkbox:checked::before {
align-items: center;
background-color: var(--checkbox-color-fill-checked);
border-color: var(--checkbox-color-border-checked);
}
.gv-activated .gv-checkbox:checked::after {
background-color: var(--checkbox-color-icon-checked);
content: "";
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/check.4da40e17.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/check.4da40e17.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.gv-activated .gv-checkbox.gv-checkbox-mixed:checked::after {
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/mixed.d54eb3f8.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/mixed.d54eb3f8.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
}
.gv-activated .gv-mode-condensed .gv-checkbox,
.gv-activated .gv-checkbox.gv-mode-condensed {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-date-range-picker {
--color-day-bg: transparent;
--color-day-fg-on: var(--color-body-on-default);
--color-day-active: var(--color-state-form-active);
--color-day-hover: color-mix(in srgb, var(--color-on-fixed-white) 80%, var(--color-state-form-active));
--color-day-current: color-mix(in srgb, var(--color-on-fixed-white) 45%, var(--color-state-form-active));
--opacity-range: 0.2;
flex: none;
width: fit-content;
}
.gv-activated .gv-date-range-picker.gv-date-range-picker-overlay {
background: var(--color-surface-bright);
border-radius: var(--border-radius);
border: var(--size-border) solid var(--color-border-alt);
box-shadow: var(--color-shadow-elevated);
padding: var(--size-md);
}
.gv-activated .gv-date-range-picker .gv-content {
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-date-range-picker .gv-month-selector {
align-items: center;
display: flex;
}
.gv-activated .gv-date-range-picker .gv-month-selector .gv-previous,
.gv-activated .gv-date-range-picker .gv-month-selector .gv-next {
flex-shrink: 0;
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-date-range-picker .gv-month-selector .gv-previous:hover,
.gv-activated .gv-date-range-picker .gv-month-selector .gv-next:hover {
background-color: var(--color-state-hover);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover);
}
.gv-activated .gv-date-range-picker .gv-month-selector .gv-previous:active,
.gv-activated .gv-date-range-picker .gv-month-selector .gv-next:active {
background-color: var(--color-state-active);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active);
}
.gv-activated .gv-date-range-picker .gv-month-selector .gv-label {
flex-grow: 1;
text-align: center;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-date-range-picker .gv-month .gv-row {
display: grid;
grid-gap: 1px;
gap: 1px;
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-auto-rows: auto;
}
.gv-activated .gv-date-range-picker .gv-month .gv-row.gv-row-header {
color: var(--color-body-on-alternative);
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell {
align-items: center;
display: flex;
flex: 1;
height: var(--size-lg);
justify-content: center;
position: relative;
width: var(--size-lg);
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-week-nr {
color: var(--color-body-on-alternative);
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-week-nr.gv-active {
color: var(--color-state-form-active);
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day {
background-color: var(--color-day-bg);
color: var(--color-day-fg-on);
border-radius: 50%;
z-index: 1;
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day:hover {
--color-day-bg: var(--color-day-hover);
--color-day-fg-on: var(--color-on-fixed-black);
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day:active,
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day.gv-start,
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day.gv-end {
--color-day-bg: var(--color-day-active);
--color-day-fg-on: var(--color-body-on-inverted);
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day.gv-current {
--color-day-bg: var(--color-day-current);
--color-day-fg-on: var(--color-on-fixed-black);
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day.gv-past {
--color-day-fg-on: var(--color-body-on-alternative);
pointer-events: none;
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day.gv-range::before {
background-color: var(--color-day-active);
content: "";
height: 100%;
left: -1px;
opacity: var(--opacity-range);
right: 0;
position: absolute;
z-index: -1;
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day.gv-range.gv-start::before {
left: 50%;
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day.gv-range.gv-end::before {
right: 50%;
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day.gv-range:nth-child(2)::before {
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day.gv-range:nth-child(2).gv-end::before {
display: none;
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day.gv-range:last-child::before {
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.gv-activated .gv-date-range-picker .gv-month .gv-row .gv-cell.gv-day.gv-range:last-child.gv-start::before {
display: none;
}
.gv-activated .gv-input-file-picker {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
gap: 16px;
width: 100%;
}
.gv-activated .gv-input-file-picker .gv-form-option {
flex: 1 1 auto;
}
.gv-activated .gv-input-file-picker .gv-button[focus-within] {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-input-file-picker .gv-button:focus-within {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-input-file-picker .gv-input-message {
display: block;
width: 100%;
}
.gv-activated .gv-input-file-picker.gv-error .gv-button {
margin-bottom: 22px;
}
@media (max-width: 599px ) {
.gv-activated .gv-input-file-picker {
align-items: flex-start;
flex-direction: column;
}
.gv-activated .gv-input-file-picker .gv-form-option {
width: 100%;
}
}
.gv-activated .gv-input {
--input-color-background: var(--color-surface-form);
--input-color-text: var(--color-body-on-default);
--input-color-border: var(--color-border-form);
--input-padding: var(--size-md);
background: var(--input-color-background);
border: var(--size-border) solid var(--input-color-border);
border-radius: var(--input-radius);
color: var(--input-color-text);
cursor: text;
font-family: inherit;
font-size: calc(var(--font-size-text-form) * 1rem);
font-weight: var(--font-weight-regular);
height: var(--form-element-height);
letter-spacing: 0.035px;
line-height: var(--form-element-height);
overflow: hidden;
padding: 0 var(--input-padding);
text-align: left;
width: 100%;
}
.gv-activated .gv-input input,
.gv-activated .gv-input select,
.gv-activated .gv-input textarea {
all: unset;
box-sizing: border-box;
display: revert;
height: 100%;
width: 100%;
}
.gv-activated .gv-input:not(.gv-disabled):not(.gv-read-only) select:not(:disabled):not([readonly]) {
background: var(--input-color-background);
}
.gv-activated .gv-input:hover[\:not-has\(.gv-label\:hover\)]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-toned);
--input-color-border: var(--color-state-form-active);
}
.gv-activated .gv-input:hover:not(.gv-form-option:has(.gv-label:hover) .gv-input):not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-toned);
--input-color-border: var(--color-state-form-active);
}
.gv-activated .gv-input:hover[\:not-has\(.gv-label\:hover\)]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-toned);
--input-color-border: var(--color-state-form-active);
}
.gv-activated .gv-input:hover:not(.gv-form-option:has(.gv-label:hover) .gv-input):not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-toned);
--input-color-border: var(--color-state-form-active);
}
.gv-activated .gv-input:hover[\:not-has\(.gv-label\:hover\)]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-toned);
--input-color-border: var(--color-state-form-active);
}
.gv-activated .gv-input:hover[\:not-has\(.gv-label\:hover\)]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input:focus-within:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-toned);
--input-color-border: var(--color-state-form-active);
}
.gv-activated .gv-input:hover:not(.gv-form-option:has(.gv-label:hover) .gv-input):not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input:focus-within:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-toned);
--input-color-border: var(--color-state-form-active);
}
.gv-activated .gv-input:disabled,
.gv-activated .gv-input.gv-disabled {
cursor: default;
pointer-events: none;
}
.gv-activated .gv-input:disabled,
.gv-activated .gv-input.gv-disabled,
.gv-activated .gv-input[readonly],
.gv-activated .gv-input.gv-read-only {
--input-color-background: var(--color-surface-form-disabled);
--input-color-text: var(--color-body-on-disabled);
--input-color-border: var(--color-border-form-disabled);
}
.gv-activated .gv-input[readonly] .gv-addon,
.gv-activated .gv-input.gv-read-only .gv-addon,
.gv-activated .gv-input[readonly] .gv-prefix,
.gv-activated .gv-input.gv-read-only .gv-prefix {
color: var(--color-body-on-default);
}
.gv-activated .gv-input.gv-input-select.gv-read-only {
pointer-events: none;
}
.gv-activated .gv-input::placeholder,
.gv-activated .gv-input input::placeholder,
.gv-activated .gv-input textarea::placeholder,
.gv-activated .gv-input.gv-has-placeholder {
color: var(--color-body-on-placeholder);
opacity: 1;
}
.gv-activated .gv-input.gv-input-textarea {
min-height: 100px;
line-height: var(--line-height-body);
padding: var(--input-padding);
overflow: auto;
resize: none;
word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
}
.gv-activated .gv-input.gv-input-textarea textarea {
line-height: var(--line-height-body);
}
.gv-activated .gv-input.gv-input-select {
padding: 0;
position: relative;
}
.gv-activated .gv-input.gv-input-select select {
cursor: pointer;
line-height: calc(var(--form-element-height) - (var(--size-border) * 2));
padding-left: var(--input-padding);
padding-right: 72px;
}
.gv-activated .gv-input.gv-input-select gv-icon {
border-left: var(--size-border) solid var(--input-color-border);
box-sizing: content-box;
height: 100%;
padding: 0 var(--size-md);
pointer-events: none;
position: absolute;
right: 0;
top: 0;
width: 24px;
}
.gv-activated .gv-input.gv-with-addon,
.gv-activated .gv-input.gv-input-search {
align-items: center;
display: flex;
padding: 0;
}
.gv-activated .gv-input.gv-with-addon input,
.gv-activated .gv-input.gv-input-search input {
padding: 0 var(--input-padding);
}
.gv-activated .gv-input.gv-with-addon .gv-addon,
.gv-activated .gv-input.gv-input-search .gv-addon,
.gv-activated .gv-input.gv-with-addon .gv-prefix,
.gv-activated .gv-input.gv-input-search .gv-prefix {
align-items: center;
display: flex;
height: 100%;
max-width: 156px;
padding: 0 var(--input-padding);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-input.gv-with-addon .gv-addon gv-icon,
.gv-activated .gv-input.gv-input-search .gv-addon gv-icon,
.gv-activated .gv-input.gv-with-addon .gv-prefix gv-icon,
.gv-activated .gv-input.gv-input-search .gv-prefix gv-icon {
height: 100%;
}
.gv-activated .gv-input.gv-with-addon .gv-addon,
.gv-activated .gv-input.gv-input-search .gv-addon {
border-left: var(--size-border) solid var(--input-color-border);
}
.gv-activated .gv-input.gv-with-addon .gv-prefix,
.gv-activated .gv-input.gv-input-search .gv-prefix {
border-right: var(--size-border) solid var(--input-color-border);
}
.gv-activated .gv-input.gv-input-date input::-webkit-date-and-time-value {
text-align: left;
}
.gv-activated .gv-input.gv-input-date.gv-with-addon {
position: relative;
}
.gv-activated .gv-input.gv-input-date.gv-with-addon .gv-addon {
background: var(--input-color-background);
pointer-events: none;
position: absolute;
right: 0;
}
.gv-activated .gv-input.gv-input-date.gv-with-addon.gv-read-only .gv-addon {
color: var(--color-body-on-disabled);
}
.gv-activated .gv-input.gv-input-textarea.gv-with-addon textarea {
padding: var(--input-padding);
}
.gv-activated .gv-input.gv-input-textarea.gv-with-addon .gv-addon {
align-items: flex-start;
padding: var(--input-padding);
}
.gv-activated .gv-input.gv-input-textarea.gv-with-addon .gv-addon gv-icon {
height: var(--size-icon-md);
}
.gv-activated .gv-input.gv-input-search.gv-with-clear input[type="search"]::-ms-clear,
.gv-activated .gv-input.gv-input-search.gv-with-clear input[type="search"]::-ms-reveal {
display: none;
height: 0;
width: 0;
}
.gv-activated .gv-input.gv-input-search.gv-with-clear input[type="search"]::-webkit-search-decoration,
.gv-activated .gv-input.gv-input-search.gv-with-clear input[type="search"]::-webkit-search-cancel-button,
.gv-activated .gv-input.gv-input-search.gv-with-clear input[type="search"]::-webkit-search-results-button,
.gv-activated .gv-input.gv-input-search.gv-with-clear input[type="search"]::-webkit-search-results-decoration {
display: none;
}
.gv-activated .gv-input .gv-clear,
.gv-activated .gv-input .gv-filters {
align-items: center;
display: flex;
height: 100%;
padding: 0 var(--input-padding) 0 0;
}
.gv-activated .gv-input .gv-clear gv-icon,
.gv-activated .gv-input .gv-filters gv-icon {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-input .gv-clear gv-icon:hover,
.gv-activated .gv-input .gv-filters gv-icon:hover {
background-color: var(--color-state-hover);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover);
}
.gv-activated .gv-input .gv-clear gv-icon:active,
.gv-activated .gv-input .gv-filters gv-icon:active {
background-color: var(--color-state-active);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active);
}
.gv-activated .gv-input .gv-clear {
visibility: hidden;
}
.gv-activated .gv-input:hover .gv-clear,
.gv-activated .gv-input[focus-within] .gv-clear {
visibility: visible;
}
.gv-activated .gv-input:hover .gv-clear,
.gv-activated .gv-input:focus-within .gv-clear {
visibility: visible;
}
.gv-activated .gv-input .gv-shortcut {
align-items: center;
background-color: var(--color-surface-dim);
border: var(--size-border) solid var(--color-border-alt);
border-radius: var(--border-radius);
box-shadow: var(--color-shadow-subtle);
display: flex;
flex-wrap: nowrap;
gap: var(--size-xs);
height: 18px;
margin-right: var(--input-padding);
padding: 0 var(--size-xs);
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-input.gv-input-domain-checker {
--checker-padding: calc(var(--size-xs) - var(--size-border));
display: flex;
height: calc(var(--form-element-height) + (var(--size-xs) * 2));
padding: var(--checker-padding) var(--checker-padding) var(--checker-padding) 0;
}
.gv-activated .gv-input.gv-input-domain-checker input {
padding: 0 var(--input-padding);
}
.gv-activated .gv-input.gv-input-number {
align-items: center;
display: flex;
gap: var(--size-md);
padding: 0 var(--size-sm);
}
.gv-activated .gv-input.gv-input-number input[type="number"] {
appearance: textfield;
text-align: center;
}
.gv-activated .gv-input.gv-input-number input[type="number"]::-webkit-inner-spin-button,
.gv-activated .gv-input.gv-input-number input[type="number"]::-webkit-outer-spin-button {
appearance: none;
margin: 0;
}
.gv-activated .gv-input.gv-input-number button {
background-color: var(--color-surface-bright);
border-radius: var(--border-radius);
color: var(--color-body-on-default);
padding: var(--size-xs);
}
.gv-activated .gv-input.gv-input-number button:disabled,
.gv-activated .gv-input.gv-input-number button.gv-disabled {
cursor: default;
opacity: var(--opacity-disabled-elements);
pointer-events: none;
}
@media (max-width: 599px ) {
.gv-activated .gv-input .gv-button {
width: auto;
}
.gv-activated .gv-input.gv-input-domain-checker .gv-button span {
display: none;
}
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px ) {
.gv-activated .gv-input {
--font-size-text-form: var(--font-size-text-sm);
}
}
@supports (hanging-punctuation: first) and (font: -apple-system-body) and
(-webkit-appearance: none) {
.gv-activated .gv-input[data-date-placeholder],
.gv-activated .gv-input input[data-date-placeholder] {
color: transparent;
}
.gv-activated .gv-input[data-date-placeholder]::before,
.gv-activated .gv-input input[data-date-placeholder]::before {
color: var(--color-body-on-default);
content: attr(data-date-placeholder);
pointer-events: none;
position: absolute;
}
.gv-activated .gv-input[data-date-placeholder][focus-within]::before,
.gv-activated .gv-input input[data-date-placeholder][focus-within]::before {
display: none;
}
.gv-activated .gv-input[data-date-placeholder]:focus-within::before,
.gv-activated .gv-input input[data-date-placeholder]:focus-within::before {
display: none;
}
.gv-activated .gv-input[data-date-placeholder].gv-has-value,
.gv-activated .gv-input input[data-date-placeholder].gv-has-value {
color: inherit;
}
.gv-activated .gv-input[data-date-placeholder].gv-has-value::before,
.gv-activated .gv-input input[data-date-placeholder].gv-has-value::before {
display: none;
}
}
@media (min-width: 600px ) {
.gv-activated .gv-input:not(.gv-w-full).gv-input-country-number,
.gv-activated .gv-input:not(.gv-w-full).gv-input-zipcode {
width: var(--size-input-sm);
}
.gv-activated .gv-input:not(.gv-w-full).gv-input-date {
width: var(--size-input-md);
}
.gv-activated .gv-input-sm {
max-width: var(--size-input-sm);
}
.gv-activated .gv-input-md {
max-width: var(--size-input-md);
}
.gv-activated .gv-input-lg {
max-width: var(--size-input-lg);
}
}
.gv-activated .gv-mode-condensed .gv-input.gv-input-number button,
.gv-activated .gv-input.gv-mode-condensed.gv-input-number button {
padding: 0;
}
.gv-activated .gv-on-surface-dim .gv-input,
.gv-activated .gv-input.gv-on-surface-dim {
--input-color-background: var(--color-surface-bright);
}
.gv-activated .gv-on-surface-dim .gv-input:hover[\:not-has\(.gv-label\:hover\)]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:hover[\:not-has\(.gv-label\:hover\)]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-bright);
}
.gv-activated .gv-on-surface-dim .gv-input:hover:not(.gv-form-option:has(.gv-label:hover) .gv-input):not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:hover:not(.gv-form-option:has(.gv-label:hover) .gv-input):not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-bright);
}
.gv-activated .gv-on-surface-dim .gv-input:hover[\:not-has\(.gv-label\:hover\)]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:hover[\:not-has\(.gv-label\:hover\)]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-bright);
}
.gv-activated .gv-on-surface-dim .gv-input:hover:not(.gv-form-option:has(.gv-label:hover) .gv-input):not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:hover:not(.gv-form-option:has(.gv-label:hover) .gv-input):not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-bright);
}
.gv-activated .gv-on-surface-dim .gv-input:hover[\:not-has\(.gv-label\:hover\)]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:hover[\:not-has\(.gv-label\:hover\)]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim[focus-within]:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-bright);
}
.gv-activated .gv-on-surface-dim .gv-input:hover[\:not-has\(.gv-label\:hover\)]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:hover[\:not-has\(.gv-label\:hover\)]:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input:focus-within:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:focus-within:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-bright);
}
.gv-activated .gv-on-surface-dim .gv-input:hover:not(.gv-form-option:has(.gv-label:hover) .gv-input):not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:hover:not(.gv-form-option:has(.gv-label:hover) .gv-input):not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:focus:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-on-surface-dim .gv-input:focus-within:not([readonly]):not(.gv-read-only):not(.gv-disabled),
.gv-activated .gv-input.gv-on-surface-dim:focus-within:not([readonly]):not(.gv-read-only):not(.gv-disabled) {
--input-color-background: var(--color-surface-bright);
}
.gv-activated .gv-input-message {
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-error .gv-input,
.gv-activated .gv-input.gv-error {
--input-color-border: var(--color-validation-error);
}
.gv-activated .gv-error .gv-input-message:not(.gv-message-info),
.gv-activated .gv-input-message.gv-error:not(.gv-message-info) {
color: var(--color-validation-error);
}
.gv-activated .gv-deleted .gv-input {
--input-color-background: var(--color-surface-form-deleted);
--input-color-border: var(--color-border-form-deleted);
--input-color-text: var(--color-body-on-deleted);
}
.gv-activated .gv-input-otp {
border: 0;
display: flex;
flex-flow: row wrap;
gap: var(--size-sm);
margin: 0;
min-width: 0;
padding: 0;
}
.gv-activated .gv-input-otp .gv-input {
flex: 0 0 auto;
min-width: 0;
padding-left: 0;
padding-right: 0;
text-align: center;
width: var(--form-element-height);
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-password {
display: flex;
flex-direction: column;
gap: var(--size-md);
}
.gv-activated .gv-password .gv-password-form .gv-strength {
align-items: flex-end;
display: flex;
flex-direction: column;
margin-top: var(--size-sm);
position: relative;
}
.gv-activated .gv-password .gv-password-form .gv-strength .gv-strength-label {
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-password .gv-requirements {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-password .gv-requirements > *:not(:last-child) {
margin-bottom: var(--size-md);
}
.gv-activated .gv-password .gv-requirements .gv-title {
margin-bottom: var(--size-xs);
margin-top: var(--size-sm);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-password .gv-requirements .gv-list {
list-style: none;
padding: 0;
}
.gv-activated .gv-password .gv-requirements .gv-list > *:not(:last-child) {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-password .gv-requirements .gv-list li {
align-items: flex-start;
color: var(--color-body-on-disabled);
display: flex;
flex-wrap: wrap;
gap: var(--size-xs);
padding-left: calc(var(--size-icon-sm) + var(--size-xs));
position: relative;
}
.gv-activated .gv-password .gv-requirements .gv-list li::before {
background-color: var(--color-body-on-default);
content: "";
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/remove.990778e9.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/remove.990778e9.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: var(--size-icon-sm);
left: 0;
position: absolute;
top: 0;
width: var(--size-icon-sm);
}
.gv-activated .gv-password .gv-requirements .gv-list li.gv-valid {
color: var(--color-body-on-default);
}
.gv-activated .gv-password .gv-requirements .gv-list li.gv-valid::before {
background-color: var(--color-signal-success);
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/check.4da40e17.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/check.4da40e17.svg) no-repeat 50% 50%;
}
.gv-activated .gv-password .gv-requirements .gv-list li .gv-tooltip-container {
color: var(--color-body-on-default);
}
.gv-activated .gv-input-phone {
display: flex;
}
.gv-activated .gv-input-phone .gv-input-country-number {
border-radius: var(--border-radius) 0 0 var(--border-radius);
position: relative;
}
.gv-activated .gv-input-phone .gv-input-country-number gv-icon {
border-left: none;
}
.gv-activated .gv-input-phone .gv-input-country-number .gv-country-selected {
background: var(--input-color-background);
left: 0;
padding-left: var(--size-md);
pointer-events: none;
position: absolute;
width: 100%;
}
.gv-activated .gv-input-phone input.gv-input {
border-radius: 0 var(--border-radius) var(--border-radius) 0;
border-left: transparent;
}
.gv-activated .gv-input-phone input.gv-input:focus,
.gv-activated .gv-input-phone input.gv-input:hover {
border-left: 1px solid var(--color-state-form-active);
}
.gv-activated .gv-input-quantity-select {
color: var(--color-body-on-default);
display: flex;
flex-direction: column;
}
.gv-activated .gv-input-quantity-select > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-input-quantity-select .gv-header {
display: flex;
flex-direction: column;
}
.gv-activated .gv-input-quantity-select .gv-header .gv-title {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-input-quantity-select .gv-header .gv-description {
color: var(--color-body-on-alternative);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-items {
display: flex;
flex-flow: row wrap;
gap: var(--size-sm);
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item label {
align-items: center;
background: var(--color-surface-form);
border: 1px solid var(--color-border-form);
border-radius: var(--border-radius);
cursor: pointer;
display: flex;
height: var(--size-xl);
justify-content: center;
width: var(--size-xl);
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item label input[type="radio"] {
opacity: 0;
position: absolute;
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item label input[type="radio"]:not(:disabled) {
cursor: pointer;
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item label[\:has\(input.focus-visible\)] {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item label:has(input.focus-visible) {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item label[\:has\(input\:focus-visible\)] {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item label:has(input:focus-visible) {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item label[\:has\(input\:checked\)] {
border-color: var(--color-state-form-active);
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item label:has(input:checked) {
border-color: var(--color-state-form-active);
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item label[\:has\(input\:disabled\)] {
cursor: default;
opacity: 0.5;
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item label:has(input:disabled) {
cursor: default;
opacity: 0.5;
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item .gv-content {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-input-quantity-select .gv-input-quantity-item.gv-tooltip-container {
width: var(--size-xl);
}
.gv-activated .gv-input-quantity-select .gv-input-number {
max-width: 312px;
}
.gv-activated .gv-radio {
--radio-color-fill: var(--color-surface-form);
--radio-color-border: var(--color-border-form);
--radio-color-fill-selected: var(--color-fg-form-on);
--radio-color-border-selected: var(--color-state-form-active);
all: unset;
box-sizing: border-box;
display: revert;
border-radius: 100%;
cursor: pointer;
height: var(--size-lg);
position: relative;
width: var(--size-lg);
/* The custom unchecked appearance: */
/* The custom checked appearance: */
}
.gv-activated .gv-radio:disabled {
cursor: default;
opacity: var(--opacity-disabled-elements);
pointer-events: none;
}
.gv-activated .gv-radio::after {
background-color: var(--radio-color-fill);
border: var(--size-border) solid var(--radio-color-border);
border-radius: 100%;
box-sizing: border-box;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.gv-activated .gv-radio:checked::after {
background-color: var(--radio-color-fill-selected);
border-color: var(--radio-color-border-selected);
border-width: 7px;
}
.gv-activated .gv-mode-condensed .gv-radio,
.gv-activated .gv-radio.gv-mode-condensed {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-mode-condensed .gv-radio:checked::after,
.gv-activated .gv-radio.gv-mode-condensed:checked::after {
border-width: 5px;
}
.gv-activated .gv-rich-option-group-item {
align-items: center;
background: var(--color-surface-bright);
border-radius: var(--border-radius);
border: 1px solid var(--color-border-alt);
cursor: pointer;
display: flex;
gap: 16px;
padding: 24px;
position: relative;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-rich-option-group-item:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-rich-option-group-item:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-rich-option-group-item[\:has\(input\:checked\)] {
border-color: var(--color-state-form-active);
}
.gv-activated .gv-rich-option-group-item:has(input:checked) {
border-color: var(--color-state-form-active);
}
.gv-activated .gv-rich-option-group-item .gv-radio,
.gv-activated .gv-rich-option-group-item gv-tile,
.gv-activated .gv-rich-option-group-item gv-icon {
flex: 0 0 auto;
}
.gv-activated .gv-rich-option-group-item .gv-radio {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.gv-activated .gv-rich-option-group-item .gv-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.gv-activated .gv-rich-option-group-item .gv-content .gv-title {
line-height: var(--line-height-body);
font-weight: var(--font-weight-semibold);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-rich-option-group-item .gv-content .gv-title {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-rich-option-group-item .gv-content .gv-title {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-rich-option-group-item .gv-content .gv-title {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-rich-option-group-item .gv-content .gv-title {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-rich-option-group-item .gv-content .gv-title {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-rich-option-group-item .gv-content .gv-title {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-rich-option-group-item .gv-content .gv-description {
color: var(--color-body-on-alternative);
}
.gv-activated .gv-rich-option-group-item.gv-mode-condensed {
padding: 16px;
}
.gv-activated .gv-rich-option-group-item.gv-mode-condensed .gv-content .gv-title {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-rich-option-group-item.gv-mode-condensed .gv-content .gv-description {
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-form-title {
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-divider-label {
align-items: center;
color: var(--color-body-on-alternative);
display: flex;
gap: var(--size-sm);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-divider-label .gv-divider {
--divider-color: var(--color-border-alt);
}
.gv-activated .gv-repeatable-fields {
display: flex;
gap: var(--size-xs);
flex-direction: column;
}
.gv-activated .gv-repeatable-fields .gv-row,
.gv-activated .gv-repeatable-fields .gv-fields {
display: flex;
gap: var(--size-md);
}
.gv-activated .gv-repeatable-fields .gv-fields {
flex: 1;
}
.gv-activated .gv-repeatable-fields .gv-fields > * {
width: 100%;
}
.gv-activated .gv-repeatable-fields .gv-button {
flex-shrink: 0;
}
@media (max-width: 599px ) {
.gv-activated .gv-repeatable-fields {
border-bottom: 1px solid var(--color-border-alt);
padding-bottom: var(--size-md);
}
.gv-activated .gv-repeatable-fields .gv-fields {
align-items: flex-start;
flex-direction: column;
}
.gv-activated .gv-repeatable-fields .gv-button {
width: auto;
}
}
@media (min-width: 600px ) {
.gv-activated .gv-repeatable-fields .gv-fields .gv-form-option:nth-child(2) {
max-width: var(--size-input-md);
}
}
.gv-activated .gv-input.gv-input-rte {
--rte-code-surface: var(--color-surface-muted);
cursor: default;
display: flex;
flex-direction: column;
line-height: var(--line-height-body);
min-height: calc(var(--form-element-height) * 3);
overflow: hidden;
padding: 0;
resize: vertical;
}
.gv-activated .gv-input.gv-input-rte.gv-on-surface-dim {
--rte-code-surface: var(--color-surface-dim);
}
.gv-activated .gv-input.gv-input-rte.gv-read-only,
.gv-activated .gv-input.gv-input-rte.gv-disabled {
resize: none;
}
.gv-activated .gv-input.gv-input-rte.gv-disabled .gv-input-rte-body {
overflow: hidden;
}
.gv-activated .gv-input-rte-body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
position: relative;
}
.gv-activated .gv-input-rte-content {
min-height: 100%;
outline: none;
padding: var(--input-padding);
}
.gv-activated .gv-input-rte-content blockquote,
.gv-activated .gv-input-rte-content pre {
margin: 0;
}
.gv-activated .gv-input-rte-content > * + * {
margin-top: var(--size-md);
}
.gv-activated .gv-input-rte-content h1 {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-lg);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-input-rte-content h1 {
letter-spacing: calc(var(--letterspacing-heading-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-input-rte-content h1 {
letter-spacing: calc((var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-input-rte-content h1 {
letter-spacing: calc(var(--letterspacing-heading-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-input-rte-content h1 {
font-size: calc(var(--font-size-heading-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-input-rte-content h1 {
font-size: calc((var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-input-rte-content h1 {
font-size: calc(var(--font-size-heading-lg-max) * 1rem);
}
}
.gv-activated .gv-input-rte-content h2 {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-md);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-input-rte-content h2 {
letter-spacing: calc(var(--letterspacing-heading-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-input-rte-content h2 {
letter-spacing: calc((var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-input-rte-content h2 {
letter-spacing: calc(var(--letterspacing-heading-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-input-rte-content h2 {
font-size: calc(var(--font-size-heading-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-input-rte-content h2 {
font-size: calc((var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-input-rte-content h2 {
font-size: calc(var(--font-size-heading-md-max) * 1rem);
}
}
.gv-activated .gv-input-rte-content h3 {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-sm);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-input-rte-content h3 {
letter-spacing: calc(var(--letterspacing-heading-sm-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-input-rte-content h3 {
letter-spacing: calc((var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-input-rte-content h3 {
letter-spacing: calc(var(--letterspacing-heading-sm-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-input-rte-content h3 {
font-size: calc(var(--font-size-heading-sm-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-input-rte-content h3 {
font-size: calc((var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-input-rte-content h3 {
font-size: calc(var(--font-size-heading-sm-max) * 1rem);
}
}
.gv-activated .gv-input-rte-content h4,
.gv-activated .gv-input-rte-content h5,
.gv-activated .gv-input-rte-content h6 {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-xs);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-input-rte-content h4,
.gv-activated .gv-input-rte-content h5,
.gv-activated .gv-input-rte-content h6 {
letter-spacing: calc(var(--letterspacing-heading-xs-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-input-rte-content h4,
.gv-activated .gv-input-rte-content h5,
.gv-activated .gv-input-rte-content h6 {
letter-spacing: calc((var(--letterspacing-heading-xs-min) * 1px) + (var(--letterspacing-heading-xs-max) - var(--letterspacing-heading-xs-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-xs-min) * 1px) + (var(--letterspacing-heading-xs-max) - var(--letterspacing-heading-xs-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-input-rte-content h4,
.gv-activated .gv-input-rte-content h5,
.gv-activated .gv-input-rte-content h6 {
letter-spacing: calc(var(--letterspacing-heading-xs-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-input-rte-content h4,
.gv-activated .gv-input-rte-content h5,
.gv-activated .gv-input-rte-content h6 {
font-size: calc(var(--font-size-heading-xs-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-input-rte-content h4,
.gv-activated .gv-input-rte-content h5,
.gv-activated .gv-input-rte-content h6 {
font-size: calc((var(--font-size-heading-xs-min) * 1rem) + (var(--font-size-heading-xs-max) - var(--font-size-heading-xs-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-xs-min) * 1rem) + (var(--font-size-heading-xs-max) - var(--font-size-heading-xs-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-input-rte-content h4,
.gv-activated .gv-input-rte-content h5,
.gv-activated .gv-input-rte-content h6 {
font-size: calc(var(--font-size-heading-xs-max) * 1rem);
}
}
.gv-activated .gv-input-rte-content ul,
.gv-activated .gv-input-rte-content ol {
padding-left: var(--size-lg);
}
.gv-activated .gv-input-rte-content ul li + li,
.gv-activated .gv-input-rte-content ol li + li {
margin-top: var(--size-sm);
}
.gv-activated .gv-input-rte-content ul ul,
.gv-activated .gv-input-rte-content ol ul,
.gv-activated .gv-input-rte-content ul ol,
.gv-activated .gv-input-rte-content ol ol {
margin-top: var(--size-sm);
}
.gv-activated .gv-input-rte-content ul {
list-style-type: disc;
}
.gv-activated .gv-input-rte-content ul ul {
list-style-type: circle;
}
.gv-activated .gv-input-rte-content ol {
list-style-type: decimal;
}
.gv-activated .gv-input-rte-content ol ol {
list-style-type: lower-alpha;
}
.gv-activated .gv-input-rte-content strong,
.gv-activated .gv-input-rte-content b {
font-weight: var(--font-weight-bold);
}
.gv-activated .gv-input-rte-content em,
.gv-activated .gv-input-rte-content i {
font-style: italic;
}
.gv-activated .gv-input-rte-content u,
.gv-activated .gv-input-rte-content .gv-input-rte-underline {
text-decoration: underline;
}
.gv-activated .gv-input-rte-content s,
.gv-activated .gv-input-rte-content del,
.gv-activated .gv-input-rte-content .gv-input-rte-strikethrough {
text-decoration: line-through;
}
.gv-activated .gv-input-rte-content .gv-input-rte-underline-strikethrough {
text-decoration: line-through;
-webkit-text-decoration: line-through solid currentColor;
text-decoration: line-through solid currentColor;
}
.gv-activated .gv-input-rte-content sub,
.gv-activated .gv-input-rte-content sup {
font-size: calc(var(--font-size-caption-sm) * 1rem);
}
.gv-activated .gv-input-rte-content sub {
vertical-align: sub;
}
.gv-activated .gv-input-rte-content sup {
vertical-align: super;
}
.gv-activated .gv-input-rte-content mark {
background: var(--color-surface-highlight);
}
.gv-activated .gv-input-rte-content a {
color: var(--color-signal-info);
cursor: pointer;
text-decoration: underline;
}
.gv-activated .gv-input-rte-content blockquote {
border-left: calc(var(--size-border) * 3) solid var(--color-border);
color: var(--color-body-on-alternative);
padding-left: var(--size-md);
}
.gv-activated .gv-input-rte-content code {
background: var(--color-surface-dim);
background: var(--rte-code-surface, var(--color-surface-dim));
border-radius: var(--border-radius);
font-family: "JetBrains Mono", monospace;
padding: 0 var(--size-xs);
}
.gv-activated .gv-input-rte-content pre,
.gv-activated .gv-input-rte-content code[data-highlight-language] {
background: var(--color-surface-dim);
background: var(--rte-code-surface, var(--color-surface-dim));
border-radius: var(--border-radius);
display: block;
font-family: "JetBrains Mono", monospace;
overflow-x: auto;
padding: var(--size-md);
position: relative;
tab-size: 2;
white-space: pre-wrap;
}
.gv-activated .gv-input-rte-content pre code,
.gv-activated .gv-input-rte-content code[data-highlight-language] code {
background: none;
padding: 0;
}
.gv-activated .gv-input-rte-content [data-gutter] {
padding-left: calc(var(--size-xl) + var(--size-sm));
}
.gv-activated .gv-input-rte-content [data-gutter]::before {
background: var(--color-surface-muted);
border-radius: var(--border-radius) 0 0 var(--border-radius);
border-right: var(--size-border) solid var(--color-border-alt);
box-sizing: border-box;
color: var(--color-body-on-alternative);
content: attr(data-gutter);
height: 100%;
left: 0;
min-width: var(--size-xl);
padding: var(--size-md) var(--size-sm);
position: absolute;
text-align: right;
top: 0;
-webkit-user-select: none;
user-select: none;
white-space: pre;
}
.gv-activated .gv-input-rte-content hr {
background: var(--color-border-alt);
border: 0;
height: var(--size-border);
}
.gv-activated .gv-input-rte-content img {
border-radius: var(--border-radius);
height: auto;
max-width: 100%;
}
.gv-activated .gv-input-rte-placeholder {
color: var(--color-body-on-placeholder);
left: var(--input-padding);
pointer-events: none;
position: absolute;
top: var(--input-padding);
-webkit-user-select: none;
user-select: none;
}
.gv-activated .gv-input-rte-toolbar {
align-items: center;
background: var(--color-surface-bright);
border-top: var(--size-border) solid var(--color-border-alt);
display: flex;
flex: none;
gap: var(--size-xs);
padding: var(--size-xs) var(--size-sm);
}
.gv-activated .gv-input-rte-toolbar.gv-input-rte-toolbar-top {
border-bottom: var(--size-border) solid var(--color-border-alt);
border-top: 0;
}
.gv-activated .gv-input-rte-toolbar-content {
align-items: center;
display: flex;
flex: 1 1 0%;
flex-wrap: nowrap;
gap: var(--size-xs);
min-width: 0;
overflow: hidden;
}
.gv-activated .gv-input-rte-group {
align-items: center;
display: flex;
flex: none;
gap: var(--size-xs);
}
.gv-activated .gv-input-rte-divider {
align-self: stretch;
background: var(--color-border-alt);
flex: none;
margin: var(--size-xs) 0;
width: var(--size-border);
}
.gv-activated .gv-input-rte-btn {
align-items: center;
background: transparent;
border: 0;
border-radius: var(--border-radius);
color: var(--color-body-on-default);
cursor: pointer;
display: inline-flex;
flex: none;
font-family: inherit;
gap: var(--size-xs);
justify-content: center;
padding: var(--size-xs);
}
.gv-activated .gv-input-rte-btn gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-input-rte-btn:hover {
background: var(--color-state-hover);
}
.gv-activated .gv-input-rte-btn.gv-active {
background: var(--color-state-active);
}
.gv-activated .gv-input-rte-btn.focus-visible {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
outline-offset: calc(var(--size-border) * -1);
}
.gv-activated .gv-input-rte-btn:focus-visible {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
outline-offset: calc(var(--size-border) * -1);
}
.gv-activated .gv-input-rte-btn:disabled {
cursor: default;
opacity: var(--opacity-disabled-elements);
}
.gv-activated .gv-input-rte-btn:disabled:hover {
background: transparent;
}
.gv-activated .gv-input-rte-btn.gv-input-rte-btn-text {
padding: var(--size-xs) var(--size-sm);
white-space: nowrap;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-input-rte-btn[aria-haspopup] gv-icon:last-child {
height: var(--size-icon-xs);
width: var(--size-icon-xs);
}
.gv-activated .gv-input-rte-btn-label {
max-width: 12ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-input-rte-more {
flex: none;
position: relative;
}
.gv-activated .gv-input-rte-more-panel {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--size-xs) var(--size-sm);
padding: var(--size-xs);
}
.gv-activated .gv-input-rte-more-panel .gv-input-rte-divider {
display: none;
}
.gv-activated .gv-input-rte-floating .gv-menu,
.gv-activated .gv-input-rte-link .gv-menu {
padding: var(--size-xs);
}
.gv-activated .gv-input-rte-floating {
max-width: none;
min-width: 0;
width: max-content;
z-index: 1100;
}
@media (max-width: 599px ) {
.gv-activated .gv-input-rte-floating {
background: none;
bottom: auto;
right: auto;
}
.gv-activated .gv-input-rte-floating .gv-menu {
bottom: auto;
left: auto;
padding: var(--size-xs);
position: static;
}
}
.gv-activated .gv-input-rte-toolbar-row {
align-items: center;
display: flex;
gap: var(--size-xs);
}
.gv-activated .gv-input-rte-link-box {
align-items: center;
display: flex;
gap: var(--size-xs);
}
.gv-activated .gv-input-rte-link-box .gv-input {
width: var(--size-input-md);
}
.gv-activated .gv-input-rte-swatches {
display: grid;
grid-gap: var(--size-xs);
gap: var(--size-xs);
grid-template-columns: repeat(4, 1fr);
padding: var(--size-xs);
}
.gv-activated .gv-input-rte-swatch {
aspect-ratio: 1;
background: transparent;
background: var(--rte-swatch, transparent);
border: var(--size-border) solid var(--color-border);
border-radius: var(--border-radius);
cursor: pointer;
width: var(--size-lg);
}
.gv-activated .gv-input-rte-swatch.gv-active {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-input-toolbar {
flex: none;
}
.gv-activated .gv-input.gv-input-rte.gv-read-only .gv-input-rte-toolbar,
.gv-activated .gv-input.gv-input-rte.gv-read-only .gv-input-toolbar {
display: none;
}
.gv-activated .gv-search-advanced {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1100;
}
.gv-activated .gv-search-advanced .gv-search-container {
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: 1536px;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-search-advanced .gv-search-container {
padding-bottom: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-search-advanced .gv-search-container {
padding-bottom: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-search-advanced .gv-search-container {
padding-bottom: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-search-advanced .gv-search-container {
padding-left: 24px;
padding-right: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-search-advanced .gv-search-container {
padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-search-advanced .gv-search-container {
padding-left: 48px;
padding-right: 48px;
}
}
.gv-activated .gv-search-advanced .gv-search-content {
display: flex;
flex-direction: column;
height: 100%;
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel {
overflow-y: auto;
padding: var(--size-lg);
position: relative;
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel > *:not(:last-child) {
margin-bottom: 24px;
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info {
padding: 0;
text-align: center;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info gv-loader {
height: var(--size-lg);
width: var(--size-lg);
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips {
position: relative;
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips .gv-slide-button {
height: 100%;
position: absolute;
top: 0;
z-index: 1;
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips .gv-slide-button.gv-previous {
background: linear-gradient(270deg, rgb(from var(--color-surface-bright) r g b / 0%) 0%, var(--color-surface-bright) 40%);
left: calc(-1 * var(--size-lg));
padding: 0 var(--size-sm) 0 var(--size-lg);
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips .gv-slide-button.gv-next {
background: linear-gradient(270deg, var(--color-surface-bright) 60%, rgb(from var(--color-surface-bright) r g b / 0%) 100%);
padding: 0 var(--size-lg) 0 var(--size-sm);
right: calc(-1 * var(--size-lg));
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips .gv-bar {
overflow: hidden;
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips .gv-items {
display: flex;
gap: var(--size-md);
transition: transform 0.2s ease;
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips .gv-chip {
flex-shrink: 0;
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-results > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-header {
display: flex;
gap: var(--size-md);
justify-content: space-between;
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-header .gv-title {
color: var(--color-body-on-alternative);
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-listbox {
max-height: none;
overflow: visible;
}
@media (max-width: 1023px ) {
.gv-activated .gv-search-advanced {
background-color: var(--color-surface-bright);
}
.gv-activated .gv-search-advanced .gv-search-container {
padding: 0;
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel {
border: none;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info {
align-items: center;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
}
.gv-activated .gv-search-advanced .gv-search-header {
display: flex;
gap: var(--size-md);
padding: var(--size-lg) var(--size-lg) 0;
}
.gv-activated .gv-search-advanced .gv-search-header .gv-button {
width: auto;
}
}
@media (min-width: 1024px ) {
.gv-activated .gv-search-advanced {
background-color: var(--color-overlay-dark);
}
.gv-activated .gv-search-advanced .gv-search-container {
display: flex;
justify-content: flex-end;
}
.gv-activated .gv-search-advanced .gv-search-content {
width: 360px;
}
.gv-activated .gv-search-advanced .gv-search-header {
padding-top: var(--size-xs);
}
.gv-activated .gv-search-advanced .gv-search-header .gv-button-cancel {
display: none;
}
}
.gv-activated .gv-survey > *:not(:last-child) {
margin-bottom: var(--size-lg);
}
.gv-activated .gv-survey-list > *:not(:last-child) {
margin-bottom: var(--size-md);
}
.gv-activated .gv-survey-actions > *:not(:last-child) {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-survey-item {
background: var(--color-surface-bright);
border-radius: var(--border-radius);
border: 1px solid var(--color-border-alt);
display: flex;
flex-direction: column;
position: relative;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-survey-item:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-survey-item[\:not-has\(.gv-survey-item-label\%20input\:checked\)]:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-survey-item:not(:has(.gv-survey-item-label input:checked)):active {
background-color: var(--color-state-active);
}
.gv-activated .gv-survey-item .gv-survey-item-label {
align-items: flex-start;
cursor: pointer;
display: flex;
gap: var(--size-sm);
padding: var(--size-md);
}
.gv-activated .gv-survey-item .gv-survey-item-label .gv-label {
padding-top: 3px;
/* Apply values to calculate em_based margins that work with any font size */
}
.gv-activated .gv-survey-item .gv-survey-item-label .gv-label::before {
margin-bottom: calc(-0.375em + 0px);
}
.gv-activated .gv-survey-item .gv-survey-item-label .gv-label::after {
margin-top: calc(-0.3125em + 0px);
}
.gv-activated .gv-survey-item .gv-survey-item-label .gv-label::before,
.gv-activated .gv-survey-item .gv-survey-item-label .gv-label::after {
content: "";
display: block;
height: 0;
width: 0;
}
.gv-activated .gv-survey-item .gv-survey-item-content {
display: none;
padding: 0 var(--size-md) var(--size-md) calc(var(--size-md) + var(--size-md) + var(--size-sm));
}
.gv-activated .gv-survey-item .gv-survey-item-content .gv-option-group-types {
gap: var(--size-sm);
}
.gv-activated .gv-survey-item[\:has\(.gv-survey-item-label\%20input\:checked\)] {
border-color: var(--color-state-form-active);
}
.gv-activated .gv-survey-item:has(.gv-survey-item-label input:checked) {
border-color: var(--color-state-form-active);
}
.gv-activated .gv-survey-item[\:has\(.gv-survey-item-label\%20input\:checked\)] .gv-survey-item-content {
display: block;
}
.gv-activated .gv-survey-item:has(.gv-survey-item-label input:checked) .gv-survey-item-content {
display: block;
}
.gv-activated .gv-option-group .gv-option-group-label {
margin-bottom: 8px;
}
.gv-activated .gv-option-group .gv-option-group-types {
gap: var(--size-md);
}
.gv-activated .gv-option-group .gv-input-message {
margin-top: 8px;
}
.gv-activated .gv-option-group .gv-options {
border: none;
margin: 0;
min-width: 0;
padding: 0;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-input-rating {
border: 0;
color: var(--color-body-on-default);
display: flex;
flex-direction: column;
margin: 0;
min-width: 0;
padding: 0;
}
.gv-activated .gv-input-rating > *:not(:last-child) {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-input-rating legend.gv-label {
padding: 0;
}
.gv-activated .gv-input-rating .gv-input-rating-items {
display: flex;
flex-flow: row wrap;
gap: var(--size-sm);
}
.gv-activated .gv-input-rating .gv-input-rating-item label {
align-items: center;
background: var(--color-surface-form);
border: 1px solid var(--color-border-form);
border-radius: var(--border-radius);
cursor: pointer;
display: flex;
height: var(--size-xl);
justify-content: center;
width: var(--size-xl);
}
.gv-activated .gv-input-rating .gv-input-rating-item label input[type="radio"] {
opacity: 0;
position: absolute;
}
.gv-activated .gv-input-rating .gv-input-rating-item label input[type="radio"]:not(:disabled) {
cursor: pointer;
}
.gv-activated .gv-input-rating .gv-input-rating-item label[\:has\(input.focus-visible\)] {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-input-rating .gv-input-rating-item label:has(input.focus-visible) {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-input-rating .gv-input-rating-item label[\:has\(input\:focus-visible\)] {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-input-rating .gv-input-rating-item label:has(input:focus-visible) {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-input-rating .gv-input-rating-item label[\:has\(input\:checked\)] {
background: var(--color-state-active);
border-color: var(--color-state-focus);
}
.gv-activated .gv-input-rating .gv-input-rating-item label:has(input:checked) {
background: var(--color-state-active);
border-color: var(--color-state-focus);
}
.gv-activated .gv-toggle {
--toggle-color-on: var(--color-state-form-active);
--toggle-color-off: var(--color-border-form);
--toggle-color-dot: var(--color-fg-form-on);
--toggle-height: 24px;
--toggle-width: 42px;
--toggle-dot-indent: 3px;
--toggle-dot-size: calc(var(--toggle-height) - (var(--toggle-dot-indent) * 2));
display: inline-block;
position: relative;
}
.gv-activated .gv-toggle .gv-toggle-slider {
background-color: var(--toggle-color-off);
border-radius: 100px;
height: var(--toggle-height);
position: relative;
width: var(--toggle-width);
}
.gv-activated .gv-toggle .gv-toggle-slider::before {
background-color: var(--toggle-color-dot);
border-radius: 100px;
box-sizing: content-box;
content: "";
display: block;
height: var(--toggle-dot-size);
left: var(--toggle-dot-indent);
position: absolute;
top: var(--toggle-dot-indent);
transition: all 0.2s ease-out;
width: var(--toggle-dot-size);
}
.gv-activated .gv-toggle input[type="checkbox"] {
all: unset;
box-sizing: border-box;
display: revert;
cursor: pointer;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.gv-activated .gv-toggle input[type="checkbox"]:checked + .gv-toggle-slider {
background-color: var(--toggle-color-on);
}
.gv-activated .gv-toggle input[type="checkbox"]:checked + .gv-toggle-slider::before {
transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
}
.gv-activated .gv-toggle input[type="checkbox"]:disabled {
cursor: default;
opacity: var(--opacity-disabled-elements);
pointer-events: none;
}
.gv-activated .gv-toggle input[type="checkbox"]:disabled + .gv-toggle-slider {
opacity: var(--opacity-disabled-elements);
}
.gv-activated .gv-mode-condensed .gv-toggle,
.gv-activated .gv-toggle.gv-mode-condensed {
--toggle-height: 16px;
--toggle-width: 28px;
--toggle-dot-indent: 2px;
}
.gv-activated .gv-input-toolbar {
--toolbar-gap: var(--size-sm);
padding: var(--size-sm);
}
.gv-activated .gv-input-toolbar,
.gv-activated .gv-input-toolbar .gv-toolbar-content,
.gv-activated .gv-input-toolbar .gv-toolbar-end {
align-items: flex-end;
display: flex;
flex-direction: row;
gap: var(--toolbar-gap);
}
.gv-activated .gv-input-toolbar .gv-toolbar-content {
flex-wrap: wrap;
}
.gv-activated .gv-input-toolbar .gv-toolbar-end {
flex-grow: 1;
justify-content: flex-end;
}
.gv-activated .gv-input-toolbar .gv-button.gv-active {
--button-color-background: var(--color-button-bg-primary);
--button-color-border: var(--color-button-bg-primary);
--button-color-text: var(--color-button-fg-on-primary);
}
.gv-activated .gv-input-toolbar .gv-chip {
padding-left: var(--size-sm);
padding-right: var(--size-sm);
}
.gv-activated .gv-input-toolbar .gv-attachment {
align-items: center;
background-color: var(--color-surface-bright);
border: 1px solid var(--color-border);
display: inline-flex;
gap: var(--size-xs);
max-width: calc(50% - (var(--toolbar-gap) / 2));
}
.gv-activated .gv-input-toolbar .gv-attachment .gv-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-input-toolbar .gv-attachment img {
border-radius: var(--border-radius);
height: var(--size-icon-sm);
object-fit: cover;
width: var(--size-icon-sm);
}
@media (max-width: 599px ) {
.gv-activated .gv-input-toolbar .gv-button.gv-button-fab,
.gv-activated .gv-input-toolbar .gv-button.gv-button-icon-only,
.gv-activated .gv-input-toolbar .gv-button.gv-button-icon,
.gv-activated .gv-input-toolbar .gv-button.gv-button-icon-inline {
width: var(--button-height);
}
}
.gv-activated .gv-form-option {
display: flex;
gap: var(--size-xs);
flex-direction: column;
}
.gv-activated .gv-form-option .gv-label-with-action {
align-items: flex-end;
display: flex;
justify-content: space-between;
}
.gv-activated .gv-form-option .gv-input-action {
color: var(--color-state-form-active);
text-decoration: none;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-form-option .gv-option-inline {
align-items: flex-start;
display: flex;
flex-wrap: nowrap;
gap: var(--size-sm);
/* Icon between the input and the label */
}
.gv-activated .gv-form-option .gv-option-inline .gv-checkbox,
.gv-activated .gv-form-option .gv-option-inline .gv-radio,
.gv-activated .gv-form-option .gv-option-inline .gv-toggle {
flex-shrink: 0;
}
.gv-activated .gv-form-option .gv-option-inline > gv-icon {
cursor: pointer;
flex-shrink: 0;
}
.gv-activated .gv-form-option .gv-option-inline .gv-label {
cursor: pointer;
font-weight: var(--font-weight-regular);
padding-top: 6px;
line-height: var(--line-height-body);
/* Apply values to calculate em_based margins that work with any font size */
}
@media screen and (max-width: 360px) {
.gv-activated .gv-form-option .gv-option-inline .gv-label {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-form-option .gv-option-inline .gv-label {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-form-option .gv-option-inline .gv-label {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-form-option .gv-option-inline .gv-label {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-form-option .gv-option-inline .gv-label {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-form-option .gv-option-inline .gv-label {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-form-option .gv-option-inline .gv-label::before {
margin-bottom: calc(-0.375em + 0px);
}
.gv-activated .gv-form-option .gv-option-inline .gv-label::after {
margin-top: calc(-0.3125em + 0px);
}
.gv-activated .gv-form-option .gv-option-inline .gv-label::before,
.gv-activated .gv-form-option .gv-option-inline .gv-label::after {
content: "";
display: block;
height: 0;
width: 0;
}
.gv-activated .gv-form-option .gv-option-inline .gv-description {
color: var(--color-body-on-alternative);
display: block;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-form-option .gv-option-inline .gv-label-with-tooltip {
align-items: flex-start;
display: flex;
flex-wrap: nowrap;
gap: var(--size-sm);
}
.gv-activated .gv-mode-condensed .gv-option-inline .gv-label {
padding-top: 3px;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-mode-condensed .gv-option-inline[\:has\(\%3E\%20gv-icon\)] .gv-checkbox,
.gv-activated .gv-mode-condensed .gv-option-inline[\:has\(\%3E\%20gv-icon\)] .gv-radio,
.gv-activated .gv-mode-condensed .gv-option-inline[\:has\(\%3E\%20gv-icon\)] .gv-toggle {
margin-top: calc((var(--size-icon-sm) - var(--size-md)) / 2);
}
.gv-activated .gv-mode-condensed .gv-option-inline:has(> gv-icon) .gv-checkbox,
.gv-activated .gv-mode-condensed .gv-option-inline:has(> gv-icon) .gv-radio,
.gv-activated .gv-mode-condensed .gv-option-inline:has(> gv-icon) .gv-toggle {
margin-top: calc((var(--size-icon-sm) - var(--size-md)) / 2);
}
.gv-activated .gv-mode-condensed .gv-option-inline[\:has\(\%3E\%20gv-icon\)] .gv-label {
padding-top: 6px;
}
.gv-activated .gv-mode-condensed .gv-option-inline:has(> gv-icon) .gv-label {
padding-top: 6px;
}
.gv-activated .gv-label {
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-label[\:has\(.gv-label-optional\)] {
align-items: flex-end;
display: inline-flex;
flex-wrap: wrap;
column-gap: var(--size-sm);
}
.gv-activated .gv-label:has(.gv-label-optional) {
align-items: flex-end;
display: inline-flex;
flex-wrap: wrap;
column-gap: var(--size-sm);
}
.gv-activated .gv-label .gv-label-optional {
color: var(--color-body-on-alternative);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-label.gv-label-with-icon {
align-items: center;
display: flex;
gap: var(--size-xs);
}
.gv-activated .gv-label.gv-label-with-icon gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated ul.gv-list-items {
list-style: none;
padding: 0;
}
.gv-activated ul.gv-list-items > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated ul.gv-list-items li {
padding-left: 32px;
position: relative;
}
.gv-activated ul.gv-list-items li::before {
background-color: var(--color-body-on-default);
content: "";
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/remove.990778e9.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/remove.990778e9.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: 24px;
left: 0;
position: absolute;
top: 0;
width: 24px;
}
.gv-activated ul.gv-list-items.gv-list-check li::before {
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/check.4da40e17.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/check.4da40e17.svg) no-repeat 50% 50%;
}
.gv-activated ul.gv-list-items.gv-list-cross li::before {
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/close.2e5708e8.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/close.2e5708e8.svg) no-repeat 50% 50%;
}
.gv-activated ul.gv-list-items.gv-list-bullet li::before {
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/gv-bullet.64ab6efc.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/gv-bullet.64ab6efc.svg) no-repeat 50% 50%;
}
.gv-activated ul.gv-list-items.gv-mode-condensed li {
padding-left: 28px;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated ul.gv-list-items.gv-mode-condensed li::before {
height: 20px;
top: 2px;
width: 20px;
}
.gv-activated .gv-list-table {
text-align: left;
width: 100%;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
.gv-activated .gv-list-table tr:nth-child(even) {
background-color: var(--color-zebra-even);
}
.gv-activated .gv-list-table tr:nth-child(even):hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-list-table tr:nth-child(even):active {
background-color: var(--color-state-active);
}
.gv-activated .gv-list-table tr:nth-child(odd) {
background-color: var(--color-zebra-odd);
}
.gv-activated .gv-list-table tr:nth-child(odd):hover {
background-color: var(--color-state-hover-dim);
}
.gv-activated .gv-list-table tr:nth-child(odd):active {
background-color: var(--color-state-active-dim);
}
.gv-activated .gv-list-table th {
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-list-table .gv-col-action {
width: 1px;
}
.gv-activated .gv-list-table th,
.gv-activated .gv-list-table td:not(.gv-col-action) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 599px ) {
.gv-activated .gv-list-table,
.gv-activated .gv-list-table tbody {
display: block;
}
.gv-activated .gv-list-table tr {
display: flex;
flex-direction: column;
}
.gv-activated .gv-list-table th {
padding: var(--size-sm) var(--size-md);
}
.gv-activated .gv-list-table td:not(.gv-col-action) {
padding: 0 var(--size-md) var(--size-sm);
}
.gv-activated .gv-list-table td.gv-col-action {
padding: 0 var(--size-md);
}
.gv-activated .gv-list-table td.gv-col-action > * {
margin-bottom: var(--size-sm);
}
}
@media (min-width: 600px ) {
.gv-activated .gv-list-table th,
.gv-activated .gv-list-table td {
padding: var(--size-sm) var(--size-md);
}
.gv-activated .gv-list-table th {
max-width: 200px;
width: 200px;
}
.gv-activated .gv-list-table td:not(.gv-col-action) {
max-width: 1px;
}
}
.gv-activated .gv-rich-text > * + * {
margin-top: var(--size-md);
}
.gv-activated .gv-rich-text ul,
.gv-activated .gv-rich-text ol {
padding-left: var(--size-lg);
}
.gv-activated .gv-rich-text ul li + li,
.gv-activated .gv-rich-text ol li + li {
margin-top: var(--size-sm);
}
.gv-activated .gv-rich-text ul ul,
.gv-activated .gv-rich-text ol ul,
.gv-activated .gv-rich-text ul ol,
.gv-activated .gv-rich-text ol ol {
margin-top: var(--size-sm);
}
.gv-activated .gv-rich-text ul {
list-style-type: disc;
}
.gv-activated .gv-rich-text ul ul {
list-style-type: circle;
}
.gv-activated .gv-rich-text ol {
list-style-type: decimal;
}
.gv-activated .gv-rich-text ol ol {
list-style-type: lower-alpha;
}
.gv-activated gv-loader {
align-items: center;
animation: gv-spin 1s linear infinite;
display: inline-flex;
height: var(--size-xl);
width: var(--size-xl);
}
.gv-activated gv-loader svg {
height: 100%;
width: 100%;
}
.gv-activated gv-loader .gv-primary-color {
fill: var(--color-loader-primary);
}
.gv-activated gv-loader .gv-secondary-color {
fill: var(--color-loader-secondary);
}
.gv-activated .gv-mode-condensed gv-loader,
.gv-activated gv-loader.gv-mode-condensed {
height: var(--size-lg);
width: var(--size-lg);
}
.gv-activated .gv-loader-container {
align-items: center;
background-color: var(--color-overlay-light);
display: flex;
flex-direction: column;
gap: var(--size-sm);
padding: var(--size-lg);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-loader-container gv-loader {
height: var(--size-lg);
width: var(--size-lg);
}
.gv-activated gv-logo {
align-items: center;
display: inline-flex;
height: 40px;
}
.gv-activated gv-logo svg {
max-width: 100%;
}
.gv-activated gv-logo[fit="auto"] {
height: auto;
}
.gv-activated.gv-dark-mode gv-logo .gv-mode-color {
fill: var(--color-gray-100);
}
.gv-activated .gv-catalog-header {
background-color: var(--color-surface-toned);
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
gap: var(--size-fluid);
min-height: 320px;
overflow: clip;
width: 100%;
}
.gv-activated .gv-catalog-header .gv-content {
display: flex;
flex: 1 1 100%;
flex-direction: column;
gap: var(--size-sm);
justify-content: center;
padding: var(--size-fluid);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-catalog-header .gv-content .gv-title {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-xl);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-catalog-header .gv-content .gv-title {
letter-spacing: calc(var(--letterspacing-heading-xl-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-catalog-header .gv-content .gv-title {
letter-spacing: calc((var(--letterspacing-heading-xl-min) * 1px) + (var(--letterspacing-heading-xl-max) - var(--letterspacing-heading-xl-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-xl-min) * 1px) + (var(--letterspacing-heading-xl-max) - var(--letterspacing-heading-xl-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-catalog-header .gv-content .gv-title {
letter-spacing: calc(var(--letterspacing-heading-xl-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-catalog-header .gv-content .gv-title {
font-size: calc(var(--font-size-heading-xl-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-catalog-header .gv-content .gv-title {
font-size: calc((var(--font-size-heading-xl-min) * 1rem) + (var(--font-size-heading-xl-max) - var(--font-size-heading-xl-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-xl-min) * 1rem) + (var(--font-size-heading-xl-max) - var(--font-size-heading-xl-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-catalog-header .gv-content .gv-title {
font-size: calc(var(--font-size-heading-xl-max) * 1rem);
}
}
.gv-activated .gv-catalog-header .gv-image {
align-items: flex-end;
display: flex;
min-width: 270px;
overflow: clip;
}
.gv-activated .gv-catalog-header .gv-image:first-child {
justify-content: flex-end;
}
.gv-activated .gv-catalog-header .gv-image img {
max-width: none;
}
@media (min-width: 600px ) {
.gv-activated .gv-catalog-header {
align-items: stretch;
flex-direction: row;
justify-content: space-between;
}
}
@media (max-width: 1279px ) {
.gv-activated .gv-catalog-header .gv-image:first-child {
display: none;
}
}
@media (min-width: 1280px ) {
.gv-activated .gv-catalog-header .gv-content {
max-width: 500px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
}
.gv-activated .gv-catalog-carousel .gv-item {
width: 100cqw;
}
.gv-activated .gv-catalog-carousel .gv-catalog-card {
height: 100%;
}
@media (min-width: 1280px ) {
.gv-activated .gv-catalog-carousel .gv-item {
width: calc(50cqw - (var(--size-lg) / 2));
}
.gv-activated .gv-catalog-carousel .gv-carousel-pagination .gv-dot:last-child {
display: none;
}
}
.gv-activated .gv-catalog-card {
background-color: var(--color-surface-highlight);
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
gap: var(--size-lg);
overflow: clip;
padding-top: var(--size-fluid);
width: 100%;
}
.gv-activated .gv-catalog-card .gv-card-top {
padding-left: var(--size-fluid);
padding-right: var(--size-fluid);
}
.gv-activated .gv-catalog-card .gv-card-content {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
}
.gv-activated .gv-catalog-card .gv-card-main {
display: flex;
flex-direction: column;
gap: var(--size-lg);
justify-content: space-between;
min-width: 0;
padding: 0 var(--size-fluid) var(--size-fluid);
}
.gv-activated .gv-catalog-card .gv-card-footer {
align-items: center;
display: flex;
gap: var(--size-md);
}
.gv-activated .gv-catalog-card .gv-card-footer .gv-button {
flex-shrink: 0;
width: auto;
}
.gv-activated .gv-catalog-card .gv-card-footer .gv-price {
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-catalog-card .gv-card-footer .gv-price-info {
color: var(--color-body-on-alternative);
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-catalog-card .gv-card-image {
align-items: flex-end;
display: flex;
min-width: 0;
overflow: clip;
padding-left: var(--size-fluid);
}
.gv-activated .gv-catalog-card .gv-card-image img {
max-width: none;
}
@media (min-width: 600px ) {
.gv-activated .gv-catalog-card .gv-card-content {
align-items: stretch;
flex-direction: row;
}
.gv-activated .gv-catalog-card .gv-card-main {
flex: 1 1 50%;
}
.gv-activated .gv-catalog-card .gv-card-image {
flex: 1 1 50%;
padding-left: 0;
}
}
.gv-activated .gv-modal {
--modal-max-width: 700px;
--modal-compact-min-width: 360px;
--modal-compact-max-width: 528px;
--modal-product-max-width: 978px;
--modal-product-mob-max-image-height: 255px;
align-items: center;
background-color: var(--color-overlay-dark);
display: flex;
height: 100%;
justify-content: center;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 1100;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal {
padding: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal {
padding: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal {
padding: 48px;
}
}
.gv-activated .gv-modal.gv-no-overlay {
background: none;
border-radius: var(--border-radius);
display: block;
height: auto;
max-height: calc(100vh - (var(--size-xl) * 2));
max-width: var(--modal-max-width);
padding: 0;
width: calc(100vw - (var(--size-xl) * 2));
}
.gv-activated .gv-modal.gv-modal-compact .gv-modal-content {
padding: var(--size-lg);
}
@media (min-width: 600px ) {
.gv-activated .gv-modal.gv-modal-compact {
--modal-max-width: var(--modal-compact-max-width);
}
.gv-activated .gv-modal.gv-modal-compact.gv-no-overlay {
width: auto;
}
.gv-activated .gv-modal.gv-modal-compact.gv-modal-overlay-tab-hidden {
background-color: transparent;
}
.gv-activated .gv-modal.gv-modal-compact .gv-modal-content {
border: var(--size-border) solid var(--color-border-alt);
box-shadow: var(--color-shadow-elevated);
min-width: var(--modal-compact-min-width);
width: auto;
}
}
.gv-activated .gv-modal .gv-modal-content {
background-color: var(--color-surface-bright);
border-radius: var(--border-radius);
color: var(--color-body-on-default);
margin: auto;
max-width: var(--modal-max-width);
position: relative;
width: 100%;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal .gv-modal-content {
padding: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal .gv-modal-content {
padding: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal .gv-modal-content {
padding: 48px;
}
}
.gv-activated .gv-modal .gv-modal-content > *:not(:last-child) {
margin-bottom: 24px;
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-close {
border-radius: var(--border-radius);
cursor: pointer;
padding: var(--size-sm);
position: absolute;
right: 0;
top: 0;
z-index: 200;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-close {
right: 8px;
top: 8px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-close {
right: calc(8px + 8 * ((100vw - 360px ) / 1080 ));
top: calc(8px + 8 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-close {
right: 16px;
top: 16px;
}
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-close:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-close:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-body > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-title {
margin-right: 24px;
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-sm);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-title {
letter-spacing: calc(var(--letterspacing-heading-sm-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-title {
letter-spacing: calc((var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-title {
letter-spacing: calc(var(--letterspacing-heading-sm-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-title {
font-size: calc(var(--font-size-heading-sm-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-title {
font-size: calc((var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-title {
font-size: calc(var(--font-size-heading-sm-max) * 1rem);
}
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle {
letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle {
letter-spacing: calc((var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle {
letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle {
font-size: calc(var(--font-size-text-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle {
font-size: calc((var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle {
font-size: calc(var(--font-size-text-lg-max) * 1rem);
}
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-progress {
align-items: center;
display: flex;
gap: 16px;
justify-content: space-between;
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-close {
background: var(--color-surface-bright);
border-radius: var(--border-radius);
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title {
margin-right: 24px;
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-lg);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title {
letter-spacing: calc(var(--letterspacing-heading-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title {
letter-spacing: calc((var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title {
letter-spacing: calc(var(--letterspacing-heading-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title {
font-size: calc(var(--font-size-heading-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title {
font-size: calc((var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title {
font-size: calc(var(--font-size-heading-lg-max) * 1rem);
}
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-content {
display: flex;
flex-wrap: wrap;
max-width: var(--modal-product-max-width);
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body {
flex: 0 0 calc(50% - 16px);
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro {
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro {
letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro {
letter-spacing: calc((var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro {
letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro {
font-size: calc(var(--font-size-text-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro {
font-size: calc((var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro {
font-size: calc(var(--font-size-text-lg-max) * 1rem);
}
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price {
margin: 24px 0;
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount {
display: flex;
gap: 8px;
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old {
color: var(--color-body-on-alternative);
text-decoration: line-through;
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-md);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price {
letter-spacing: calc(var(--letterspacing-heading-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price {
letter-spacing: calc((var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price {
letter-spacing: calc(var(--letterspacing-heading-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price {
font-size: calc(var(--font-size-heading-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price {
font-size: calc((var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price {
font-size: calc(var(--font-size-heading-md-max) * 1rem);
}
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period {
margin-left: 4px;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-info,
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-key-benefits,
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-more-info {
display: flex;
flex-direction: column;
gap: 16px;
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-info,
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-key-benefits {
margin-bottom: 24px;
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-image {
height: 100%;
position: absolute;
right: 0;
top: 0;
width: calc(50% - 16px);
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-image img {
display: block;
height: 100%;
object-fit: cover;
object-position: left top;
width: 100%;
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-button-group {
flex: 0 0 100%;
margin-bottom: 0;
}
.gv-activated .gv-modal .gv-progress-bullets {
align-items: center;
display: flex;
gap: 8px;
}
.gv-activated .gv-modal .gv-progress-bullets > span {
background-color: var(--color-state-hover);
border-radius: 50%;
display: block;
height: 8px;
width: 8px;
}
.gv-activated .gv-modal .gv-progress-bullets > span.gv-bullet-current {
background-color: var(--color-state-focus);
}
.gv-activated .gv-modal .gv-progress-bullets > span.gv-bullet-done {
background-color: var(--color-state-active);
}
@media (max-width: 599px ) {
.gv-activated .gv-modal {
align-items: flex-end;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
.gv-activated .gv-modal.gv-no-overlay {
border-radius: 0;
bottom: 0;
left: 0;
max-height: calc(100vh - var(--size-lg));
top: auto;
transform: none;
width: 100%;
}
.gv-activated .gv-modal .gv-modal-content {
border-radius: 0;
margin: 0;
max-height: 100%;
overflow: auto;
}
.gv-activated .gv-modal .gv-modal-content .gv-modal-progress .gv-button {
width: auto;
}
.gv-activated .gv-modal .gv-button-group {
flex-direction: column-reverse;
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body {
flex: 0 0 100%;
padding-top: var(--modal-product-mob-max-image-height);
}
.gv-activated .gv-modal.gv-upgrade-modal .gv-modal-image {
right: 0;
left: 0;
height: var(--modal-product-mob-max-image-height);
width: 100%;
}
}
.gv-activated .gv-main-header {
background-color: var(--color-surface-bright);
border-bottom: 1px solid var(--color-border-alt);
height: var(--navigation-bar-height);
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.gv-activated .gv-main-header .gv-header-nav {
align-items: center;
display: flex;
flex-wrap: nowrap;
gap: 24px;
height: var(--navigation-bar-height);
justify-content: space-between;
position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: 1536px;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-main-header .gv-header-nav {
padding-left: 24px;
padding-right: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-main-header .gv-header-nav {
padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-main-header .gv-header-nav {
padding-left: 48px;
padding-right: 48px;
}
}
.gv-activated .gv-main-header .gv-nav-left {
align-items: center;
display: flex;
gap: 24px;
flex-wrap: nowrap;
}
.gv-activated .gv-main-header .gv-nav-left .gv-btn-menu {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-main-header .gv-nav-left .gv-btn-menu:hover {
background-color: var(--color-state-hover);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover);
}
.gv-activated .gv-main-header .gv-nav-left .gv-btn-menu:active {
background-color: var(--color-state-active);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active);
}
.gv-activated .gv-main-header .gv-nav-menu {
align-items: center;
display: flex;
flex-wrap: nowrap;
gap: 24px;
}
.gv-activated .gv-main-header .gv-nav-menu > * {
display: block;
position: relative;
text-decoration: none;
}
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-notification,
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-search {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-notification:hover,
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-search:hover {
background-color: var(--color-state-hover);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover);
}
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-notification:active,
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-search:active {
background-color: var(--color-state-active);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active);
}
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-cart {
display: inline-flex;
}
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-account {
align-items: center;
display: flex;
gap: var(--size-sm);
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-account:hover {
background-color: var(--color-state-hover);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover);
}
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-account:active {
background-color: var(--color-state-active);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active);
}
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-account .gv-btn-label {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
/* Apply values to calculate em_based margins that work with any font size */
}
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-account .gv-btn-label::before {
margin-bottom: calc(-0.375em + 0px);
}
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-account .gv-btn-label::after {
margin-top: calc(-0.3125em + 0px);
}
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-account .gv-btn-label::before,
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-account .gv-btn-label::after {
content: "";
display: block;
height: 0;
width: 0;
}
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-account.gv-icon-indicator::before {
left: calc(var(--size-icon-md) - var(--size-sm));
right: auto;
}
@media (max-width: 599px ) {
.gv-activated .gv-main-header .gv-nav-menu .gv-btn-account .gv-btn-label {
display: none;
}
}
@media (max-width: 1023px ) {
.gv-activated .gv-main-header .gv-nav-links,
.gv-activated .gv-main-header .gv-btn-notification,
.gv-activated .gv-main-header .gv-btn-search {
display: none;
}
}
@media (min-width: 1024px ) {
.gv-activated .gv-main-header .gv-btn-menu {
display: none;
}
.gv-activated .gv-main-header .gv-header-nav {
padding-left: var(--size-lg);
padding-right: var(--size-lg);
}
.gv-activated .gv-main-header .gv-nav-links ul {
display: flex;
list-style: none;
padding: 0;
}
.gv-activated .gv-main-header .gv-nav-links ul a {
border-bottom: 1px solid var(--color-border-alt);
display: block;
font-weight: var(--font-weight-medium);
height: var(--navigation-bar-height);
padding: 16px 24px;
text-decoration: none;
white-space: nowrap;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-main-header .gv-nav-links ul a:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-main-header .gv-nav-links ul a:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-main-header .gv-nav-links ul a.gv-active,
.gv-activated .gv-main-header .gv-nav-links ul li.gv-active a {
background-color: var(--color-state-active);
border-color: var(--color-border);
}
}
.gv-activated .gv-btn-cart {
--color-bg-empty: var(--color-surface-muted);
--color-on-empty: var(--color-body-on-placeholder);
--color-bg-filled: var(--color-cta);
--color-on-filled: var(--color-button-fg-on-cta);
align-items: center;
color: var(--color-body-on-default);
display: inline-flex;
flex-wrap: nowrap;
gap: var(--size-xs);
position: relative;
text-decoration: none;
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-btn-cart:hover {
background-color: var(--color-state-hover);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover);
}
.gv-activated .gv-btn-cart:active {
background-color: var(--color-state-active);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active);
}
.gv-activated .gv-btn-cart:hover {
color: var(--color-body-on-default);
}
.gv-activated .gv-btn-cart.gv-alternative {
/* Force dark-theme colors here, since this variant sits on a dark surface
regardless of whether the page itself is in dark mode. */
/* On body */
--color-body-on-default: var(--color-gray-200);
--color-body-on-alternative: var(--color-gray-400);
--color-body-on-inverted: var(--color-gray-900);
--color-body-on-placeholder: var(--color-gray-400);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-body-on-deleted: rgba(247, 247, 247, 0.8);
/* Surface */
--color-surface-bright: var(--color-gray-700);
--color-surface-dim: var(--color-gray-800);
--color-surface-toned: var(--color-gray-650);
--color-surface-muted: var(--color-gray-600);
--color-surface-inverted: var(--color-gray-100);
--color-surface-form: var(--color-gray-600);
--color-surface-form-disabled: rgba(58, 56, 62, 0.5);
--color-surface-form-deleted: rgba(133, 13, 10, 0.5);
/* Illustration */
--color-illustration-background: var(--color-gray-700);
--color-illustration-gray: var(--color-gray-500);
--color-illustration-line: var(--color-gray-200);
/* Shades */
--color-overlay-dark: rgba(20, 20, 20, 0.8);
--color-overlay-light: rgba(20, 20, 20, 0.8);
/* Opacity */
--opacity-state-hover: 10%;
--opacity-state-active: 20%;
/* Signal colors */
--color-signal-alert: #d2011a;
--color-signal-alert-light: #850d0a;
--color-signal-info: #017ed2;
--color-signal-info-light: #235c9d;
--color-signal-success: #4a7b13;
--color-signal-success-light: #34560d;
--color-signal-warning: #d27401;
--color-signal-warning-light: #856304;
--color-signal-upgrade-light: #7d2b87;
/* Borders */
--color-border: var(--color-gray-500);
--color-border-alt: var(--color-gray-600);
--color-border-form: var(--color-border);
--color-border-form-disabled: rgba(105, 104, 107, 0.5);
/* Icon */
--color-icon-upgrade-bg: var(--color-gray-100);
--color-icon-upgrade-flash: #733183;
/* Chart */
--color-chart-100: #d9ebf7;
--color-chart-200: #b28b00;
--color-chart-300: #453963;
--color-chart-400: #029697;
--color-chart-500: #965592;
--color-chart-600: #6b8aa4;
--color-chart-700: #c55986;
--color-chart-800: #89a8c2;
--color-chart-neutral: #a5a5a5;
--color-chart-100-hover: #98a4ad;
--color-chart-200-hover: #7f6300;
--color-chart-300-hover: #736398;
--color-chart-400-hover: #01696a;
--color-chart-500-hover: #a66fa2;
--color-chart-600-hover: #4b6173;
--color-chart-700-hover: #9e476b;
--color-chart-800-hover: #acc2d4;
--color-chart-neutral-hover: #7c7c7c;
/* Form */
--color-state-form-active: #29a9ff;
--color-fg-form-on: var(--color-gray-900);
--color-validation-error: #fe485d;
/* Tile */
--color-tile-shadow-color: rgba(255, 255, 255, 0.15);
/* Mode visibility */
/* figma:sync:start:base-dark */
--bg-pattern-color-on-dark: #ffffff;
--bg-pattern-color-on-light: #ffffff;
--bg-pattern-color-on-medium: #ffffff;
--color-on-surface-accent: var(--color-on-fixed-black);
--color-on-surface-accent-light: var(--color-on-fixed-black);
--color-on-surface-contrast: var(--color-on-fixed-black);
--color-on-surface-core: var(--color-on-fixed-black);
--color-on-surface-core-light: var(--color-on-fixed-black);
--color-on-surface-gradient: var(--color-on-fixed-white);
--color-section-bar-bg: var(--color-primary);
--color-section-bar-on: var(--color-on-fixed-black);
--color-section-glass-strong: rgba(251, 251, 251, 0.2);
--color-section-gradient-1: rgba(0, 0, 0, 0);
--color-section-gradient-2: rgba(0, 0, 0, 0);
--color-section-gradient-3: rgba(0, 0, 0, 0);
--color-section-logo-dark-mark: #fec600;
--color-section-logo-dark-text: #ffffff;
--color-section-logo-light-mark: #fec600;
--color-section-logo-light-text: #141414;
--color-section-steps-bg-accent: var(--color-surface-dim);
--color-section-steps-bg-accent-light: var(--color-surface-dim);
--color-section-steps-bg-contrast: var(--color-surface-dim);
--color-section-steps-bg-core: var(--color-surface-dim);
--color-section-steps-bg-core-light: var(--color-surface-dim);
--color-section-steps-bg-gradient: var(--color-surface-dim);
--color-section-steps-border-accent: var(--color-border-alt);
--color-section-steps-border-accent-light: var(--color-border-alt);
--color-section-steps-border-contrast: var(--color-border-alt);
--color-section-steps-border-core: var(--color-border-alt);
--color-section-steps-border-core-light: var(--color-border-alt);
--color-section-steps-border-gradient: var(--color-border-alt);
--color-section-steps-on-accent: var(--color-on-fixed-black);
--color-section-steps-on-accent-light: var(--color-on-fixed-black);
--color-section-steps-on-contrast: var(--color-on-fixed-black);
--color-section-steps-on-core: var(--color-on-fixed-black);
--color-section-steps-on-core-light: var(--color-on-fixed-black);
--color-section-steps-on-gradient: var(--color-on-fixed-black);
--color-section-tab-bg-default: var(--color-on-fixed-black);
--color-section-tab-bg-emphasized: var(--color-primary);
--color-section-usp-bg-default: var(--color-primary);
--color-section-usp-on-default: var(--color-on-fixed-black);
--color-surface-accent: #ffffff;
--color-surface-accent-light: #ffffff;
--color-surface-contrast: #ffffff;
--color-surface-core: #ffffff;
--color-surface-core-light: #ffffff;
--color-surface-gradient: var(--color-gray-800);
/* figma:sync:end:base-dark */
--color-illustration-100: #bcc4b2;
--color-illustration-200: #aebaca;
--color-illustration-300: #87a1c8;
--color-state-active: #203649;
--color-state-hover: #242e39;
--color-surface-highlight: #00426e;
/* Tile */
--color-tile-200: #17537f;
}
.gv-activated .gv-btn-cart.gv-alternative .gv-fill-3rd-party {
filter: brightness(0) invert(1);
}
.gv-activated .gv-btn-cart.gv-alternative .gv-on-dark {
display: block;
}
.gv-activated .gv-btn-cart.gv-alternative .gv-on-light {
display: none;
}
.gv-activated .gv-btn-cart .gv-amount {
background-color: var(--color-bg-empty);
border-radius: var(--border-radius);
color: var(--color-on-empty);
line-height: 1;
padding: var(--size-xs);
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-btn-cart.gv-filled .gv-amount {
background-color: var(--color-bg-filled);
color: var(--color-on-filled);
}
.gv-activated .gv-notice {
--notice-color-background: inherit;
align-items: center;
background: var(--notice-color-background);
border-radius: var(--notice-radius);
color: var(--color-body-on-default);
display: flex;
flex-wrap: nowrap;
gap: var(--size-md);
padding: var(--size-lg);
position: relative;
}
.gv-activated .gv-notice .gv-notice-icon {
flex-shrink: 0;
}
.gv-activated .gv-notice .gv-notice-content {
flex-grow: 1;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-notice .gv-notice-content > *:not(:last-child) {
margin-bottom: var(--size-xs);
}
.gv-activated .gv-notice .gv-notice-title {
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-notice .gv-button {
flex-shrink: 0;
}
.gv-activated .gv-notice .gv-notice-close {
cursor: pointer;
padding: var(--size-sm);
}
.gv-activated .gv-notice.gv-notice-alert {
--notice-color-background: var(--color-signal-alert-light);
}
.gv-activated .gv-notice.gv-notice-warning {
--notice-color-background: var(--color-signal-warning-light);
}
.gv-activated .gv-notice.gv-notice-success {
--notice-color-background: var(--color-signal-success-light);
}
.gv-activated .gv-notice.gv-notice-info {
--notice-color-background: var(--color-signal-info-light);
}
.gv-activated .gv-notice.gv-notice-upgrade {
--notice-color-background: var(--color-signal-upgrade-light);
}
.gv-activated .gv-notice.gv-notice-upgrade .gv-notice-icon .gv-upgrade-icon-bg {
fill: var(--color-icon-upgrade-bg);
}
.gv-activated .gv-notice.gv-notice-upgrade .gv-notice-icon .gv-upgrade-icon-flash {
fill: var(--color-icon-upgrade-flash);
}
.gv-activated .gv-notice.gv-notice-system {
--notice-color-background: var(--color-surface-inverted);
color: var(--color-body-on-inverted);
}
.gv-activated .gv-notice.gv-notice-system .gv-button {
--button-color-text: var(--color-body-on-inverted);
}
.gv-activated .gv-notice.gv-notice-addon {
border-top-left-radius: 0;
border-top-right-radius: 0;
padding: var(--size-sm) var(--size-lg);
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
@media (max-width: 599px ) {
.gv-activated .gv-notice {
flex-wrap: wrap;
gap: var(--size-sm);
justify-content: space-between;
}
.gv-activated .gv-notice .gv-notice-content {
width: 100%;
}
.gv-activated .gv-notice .gv-button {
margin-top: var(--size-sm);
}
.gv-activated .gv-notice .gv-notice-close {
position: absolute;
right: var(--size-lg);
top: var(--size-md);
}
}
.gv-activated .gv-mode-condensed .gv-notice,
.gv-activated .gv-notice.gv-mode-condensed {
gap: var(--size-sm);
padding: var(--size-sm);
}
.gv-activated .gv-mode-condensed .gv-notice .gv-notice-content,
.gv-activated .gv-notice.gv-mode-condensed .gv-notice-content {
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
@media (max-width: 599px ) {
.gv-activated .gv-mode-condensed .gv-notice .gv-notice-close,
.gv-activated .gv-notice.gv-mode-condensed .gv-notice-close {
right: var(--size-sm);
top: 0;
}
}
.gv-activated .gv-main-header .gv-nav-select .gv-btn-select {
border-radius: var(--border-radius);
display: flex;
gap: var(--size-xs);
padding: var(--size-xs) 0 var(--size-xs) var(--size-sm);
}
.gv-activated .gv-main-header .gv-nav-select .gv-btn-select:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-main-header .gv-nav-select .gv-btn-select:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-main-header .gv-nav-select .gv-nav-dropdown {
background-color: var(--color-surface-bright);
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
display: none;
padding: 16px;
position: absolute;
right: 0;
top: 100%;
width: 200px;
}
.gv-activated .gv-main-header .gv-nav-select .gv-nav-dropdown ul {
list-style: none;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-main-header .gv-nav-select .gv-nav-dropdown ul > *:not(:last-child) {
margin-bottom: 4px;
}
.gv-activated .gv-main-header .gv-nav-select .gv-nav-dropdown li {
display: flex;
flex-direction: column;
gap: 8px;
}
.gv-activated .gv-main-header .gv-nav-select [aria-expanded="true"] gv-icon:last-child {
transform: rotate(180deg);
}
.gv-activated .gv-main-header .gv-nav-select [aria-expanded="true"] + .gv-nav-dropdown {
display: block;
}
.gv-activated .gv-main-header .gv-btn-help {
border-radius: calc(var(--border-radius) - var(--size-xs));
}
.gv-activated .gv-main-header .gv-btn-help:hover {
background-color: var(--color-state-hover);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-hover);
}
.gv-activated .gv-main-header .gv-btn-help:active {
background-color: var(--color-state-active);
box-shadow: 0 0 0 var(--size-xs) var(--color-state-active);
}
.gv-activated .gv-main-header .gv-btn-logout {
white-space: nowrap;
}
.gv-activated .gv-overlay {
background-color: var(--color-overlay-dark);
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
position: fixed;
pointer-events: none;
z-index: 1100;
}
.gv-activated .gv-overlay.gv-overlay-light {
background-color: var(--color-overlay-light);
}
.gv-activated .gv-overlay.gv-state-open,
.gv-activated .gv-overlay[data-state="open"] {
animation: gv-fade-in 0.3s ease-out forwards;
pointer-events: auto;
}
.gv-activated .gv-overlay.gv-state-closed,
.gv-activated .gv-overlay[data-state="closed"] {
animation: gv-fade-out 0.3s ease-in forwards;
}
.gv-activated gv-pay-icon {
display: inline-block;
height: 26px;
width: auto;
font-size: 0;
vertical-align: text-bottom;
}
.gv-activated gv-pay-icon svg {
width: 100%;
height: 100%;
}
.gv-activated .gv-perspective {
display: grid;
grid-gap: var(--size-lg);
gap: var(--size-lg);
}
.gv-activated .gv-perspective .gv-card {
--color-perspective-card-bg: var(--color-surface-bright);
--color-perspective-list-icon: var(--color-body-on-default);
background: var(--color-perspective-card-bg);
border: none;
gap: var(--size-md);
padding: var(--size-lg);
}
.gv-activated .gv-perspective .gv-card.gv-perspective-positive {
--color-perspective-card-bg: var(--color-signal-success-light);
--color-perspective-list-icon: var(--color-signal-success);
}
.gv-activated .gv-perspective .gv-card.gv-perspective-negative {
--color-perspective-card-bg: var(--color-signal-alert-light);
--color-perspective-list-icon: var(--color-signal-alert);
}
.gv-activated .gv-perspective .gv-card .gv-card-tile,
.gv-activated .gv-perspective .gv-card .gv-card-footer {
padding: 0;
}
.gv-activated .gv-perspective .gv-card .gv-card-header > *:not(:last-child) {
margin-bottom: var(--size-xs);
}
.gv-activated .gv-perspective .gv-card .gv-card-list {
flex-grow: 1;
}
.gv-activated .gv-perspective .gv-card .gv-card-list .gv-list-items > *:not(:last-child) {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-perspective .gv-card .gv-card-list .gv-list-items li::before {
background-color: var(--color-perspective-list-icon);
}
@media (min-width: 600px ) {
.gv-activated .gv-perspective {
grid-auto-columns: 1fr;
grid-auto-flow: column;
}
}
.gv-activated .gv-layout-product {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "nav" "header" "table" "details" "content";
}
@media screen and (max-width: 360px) {
.gv-activated .gv-layout-product {
gap: calc(var(--size-fluid-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-layout-product {
gap: calc((var(--size-fluid-min-value) * 1px) + (var(--size-fluid-max-value) - var(--size-fluid-min-value)) * ((100vw - 360px) / 1080));
gap: calc(calc(var(--size-fluid-min-value) * 1px) + (var(--size-fluid-max-value) - var(--size-fluid-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-layout-product {
gap: calc(var(--size-fluid-max-value) * 1px);
}
}
.gv-activated .gv-layout-product > * {
min-width: 0;
}
.gv-activated .gv-layout-product .gv-area-nav {
grid-area: nav;
}
.gv-activated .gv-layout-product .gv-area-header {
grid-area: header;
}
.gv-activated .gv-layout-product .gv-area-table {
grid-area: table;
}
.gv-activated .gv-layout-product .gv-area-details {
grid-area: details;
}
.gv-activated .gv-layout-product .gv-area-content {
grid-area: content;
}
.gv-activated .gv-layout-product .gv-product-header {
background: var(--color-surface-highlight);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
overflow: hidden;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-layout-product .gv-product-header .gv-content {
padding: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-layout-product .gv-product-header .gv-content {
padding: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-layout-product .gv-product-header .gv-content {
padding: 48px;
}
}
.gv-activated .gv-layout-product .gv-product-header .gv-image {
position: relative;
}
.gv-activated .gv-layout-product .gv-product-header .gv-image img {
display: block;
height: auto;
max-width: 480px;
object-fit: cover;
object-position: left top;
width: 100%;
}
@media (min-width: 768px ) {
.gv-activated .gv-layout-product.gv-product-single {
grid-template-columns: 1fr 1fr;
grid-template-areas: "nav nav" "header table" "details table" "content content";
}
.gv-activated .gv-layout-product:not(.gv-product-single) .gv-product-header {
align-items: center;
flex-direction: row;
}
.gv-activated .gv-layout-product:not(.gv-product-single) .gv-product-header .gv-content {
flex: 0 0 50%;
min-width: 0;
}
.gv-activated .gv-layout-product:not(.gv-product-single) .gv-product-header .gv-image {
flex: 0 0 50%;
height: 100%;
min-height: 360px;
min-width: 0;
}
.gv-activated .gv-layout-product:not(.gv-product-single) .gv-product-header .gv-image picture {
align-items: stretch;
display: flex;
height: 100%;
}
.gv-activated .gv-layout-product:not(.gv-product-single) .gv-product-header .gv-image img {
height: 100%;
width: auto;
max-width: none;
}
}
@media (min-width: 1024px ) {
.gv-activated .gv-layout-product.gv-product-single {
grid-template-columns: 2fr 1fr;
}
.gv-activated .gv-layout-product.gv-product-single .gv-product-header {
align-items: center;
flex-direction: row;
}
.gv-activated .gv-layout-product.gv-product-single .gv-product-header .gv-content {
flex: 0 0 50%;
min-width: 0;
}
.gv-activated .gv-layout-product.gv-product-single .gv-product-header .gv-image {
flex: 0 0 50%;
height: 100%;
min-height: 360px;
min-width: 0;
}
.gv-activated .gv-layout-product.gv-product-single .gv-product-header .gv-image picture {
align-items: stretch;
display: flex;
height: 100%;
}
.gv-activated .gv-layout-product.gv-product-single .gv-product-header .gv-image img {
height: 100%;
width: auto;
max-width: none;
}
}
.gv-activated .gv-resource {
display: flex;
flex-direction: column;
gap: 8px;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-resource .gv-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.gv-activated .gv-resource .gv-amount {
font-weight: var(--font-weight-semibold);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-resource .gv-description {
color: var(--color-body-on-alternative);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: normal;
}
.gv-activated .gv-progress {
background-color: var(--color-border-alt);
border-radius: var(--border-radius);
height: 8px;
overflow: hidden;
position: relative;
width: 100%;
}
.gv-activated .gv-progress .gv-bar {
background-color: var(--color-signal-info);
border-radius: var(--border-radius);
display: block;
height: 100%;
transition: width 400ms ease-in-out;
}
.gv-activated .gv-progress .gv-bar.gv-alert {
background-color: var(--color-signal-alert);
}
.gv-activated .gv-progress .gv-bar.gv-good {
background-color: var(--color-signal-success);
}
.gv-activated .gv-progress .gv-bar.gv-warning {
background-color: var(--color-signal-warning);
}
.gv-activated .gv-resource-card {
background-color: var(--color-surface-bright);
border: var(--size-border) solid var(--color-border-alt);
border-radius: var(--border-radius);
box-shadow: var(--color-shadow-subtle);
display: flex;
flex-direction: column;
gap: var(--size-md);
min-width: 0;
padding: var(--size-lg);
}
.gv-activated .gv-resource-card .gv-title {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-resource-card .gv-title {
letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-resource-card .gv-title {
letter-spacing: calc((var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-resource-card .gv-title {
letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-resource-card .gv-title {
font-size: calc(var(--font-size-text-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-resource-card .gv-title {
font-size: calc((var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-resource-card .gv-title {
font-size: calc(var(--font-size-text-lg-max) * 1rem);
}
}
.gv-activated .gv-resource-card .gv-resource {
flex-grow: 1;
}
.gv-activated .gv-shortcut {
gap: var(--size-md);
}
.gv-activated .gv-shortcut .gv-content .gv-status {
align-items: center;
color: var(--color-body-on-default);
display: flex;
gap: var(--size-sm);
max-width: 100%;
}
.gv-activated .gv-shortcut .gv-content .gv-status > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-shortcut .gv-content .gv-status.gv-active .gv-indicator {
--indicator-color-background: var(--color-signal-success);
}
.gv-activated .gv-shortcut .gv-content .gv-status.gv-inactive-prio-high .gv-indicator {
/* This colour is intentionally hardcoded */
--indicator-color-background: #d27401;
}
.gv-activated .gv-shortcut .gv-content .gv-status.gv-inactive-prio-low .gv-indicator {
--indicator-color-background: var(--color-gray-400);
}
.gv-activated .gv-shortcut .gv-content .gv-status.gv-new .gv-indicator {
--indicator-color-background: var(--color-signal-info);
}
.gv-activated .gv-shortcut-tile .gv-content {
padding-left: var(--size-md);
padding-right: calc(var(--size-icon-md) + var(--size-md));
position: relative;
}
.gv-activated .gv-shortcut-tile .gv-content .gv-description > gv-icon {
bottom: 0;
position: absolute;
right: 0;
}
.gv-activated .gv-shortcut-tile .gv-content + .gv-button {
margin-left: calc(var(--size-icon-md) * -1);
}
.gv-activated .gv-shortcut,
.gv-activated .gv-shortcut-tile {
align-items: center;
cursor: pointer;
display: flex;
padding: var(--size-lg);
text-decoration: none;
background-color: var(--color-surface-bright);
border: var(--size-border) solid var(--color-border-alt);
border-radius: var(--border-radius);
box-shadow: var(--color-shadow-subtle);
}
.gv-activated .gv-shortcut:hover,
.gv-activated .gv-shortcut-tile:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-shortcut:active,
.gv-activated .gv-shortcut-tile:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-shortcut gv-icon,
.gv-activated .gv-shortcut-tile gv-icon,
.gv-activated .gv-shortcut gv-tile,
.gv-activated .gv-shortcut-tile gv-tile {
flex-shrink: 0;
}
.gv-activated .gv-shortcut .gv-content,
.gv-activated .gv-shortcut-tile .gv-content {
color: var(--color-body-on-alternative);
flex: 1;
min-width: 0;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-shortcut .gv-content .gv-extra-info,
.gv-activated .gv-shortcut-tile .gv-content .gv-extra-info {
color: var(--color-body-on-default);
}
.gv-activated .gv-shortcut .gv-content .gv-title,
.gv-activated .gv-shortcut-tile .gv-content .gv-title {
color: var(--color-body-on-default);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-shortcut .gv-content .gv-title,
.gv-activated .gv-shortcut-tile .gv-content .gv-title {
letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-shortcut .gv-content .gv-title,
.gv-activated .gv-shortcut-tile .gv-content .gv-title {
letter-spacing: calc((var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-shortcut .gv-content .gv-title,
.gv-activated .gv-shortcut-tile .gv-content .gv-title {
letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-shortcut .gv-content .gv-title,
.gv-activated .gv-shortcut-tile .gv-content .gv-title {
font-size: calc(var(--font-size-text-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-shortcut .gv-content .gv-title,
.gv-activated .gv-shortcut-tile .gv-content .gv-title {
font-size: calc((var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-shortcut .gv-content .gv-title,
.gv-activated .gv-shortcut-tile .gv-content .gv-title {
font-size: calc(var(--font-size-text-lg-max) * 1rem);
}
}
.gv-activated .gv-shortcut .gv-content .gv-price,
.gv-activated .gv-shortcut-tile .gv-content .gv-price {
color: var(--color-body-on-default);
padding-top: var(--size-xs);
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text,
.gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text {
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text,
.gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text {
letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text,
.gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text {
letter-spacing: calc((var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text,
.gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text {
letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text,
.gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text {
font-size: calc(var(--font-size-text-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text,
.gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text {
font-size: calc((var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text,
.gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text {
font-size: calc(var(--font-size-text-lg-max) * 1rem);
}
}
.gv-activated .gv-shortcut .gv-content gv-icon,
.gv-activated .gv-shortcut-tile .gv-content gv-icon {
color: var(--color-body-on-default);
}
.gv-activated .gv-shortcut .gv-content + gv-icon,
.gv-activated .gv-shortcut-tile .gv-content + gv-icon {
align-self: flex-end;
}
.gv-activated .gv-shortcut .gv-button,
.gv-activated .gv-shortcut-tile .gv-button {
width: auto;
}
.gv-activated .gv-sidedrawer {
--side-content-width: 300px;
display: none;
opacity: 0;
position: fixed;
z-index: 1100;
}
.gv-activated .gv-sidedrawer:not(.gv-no-overlay) {
background-color: var(--color-overlay-dark);
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.gv-activated .gv-sidedrawer.gv-no-overlay {
top: 0;
bottom: 0;
max-width: var(--side-content-width);
width: 100%;
}
.gv-activated .gv-sidedrawer.gv-no-overlay:not(.gv-pos-right) {
left: 0;
}
.gv-activated .gv-sidedrawer.gv-sidedrawer-open,
.gv-activated .gv-sidedrawer.gv-state-open,
.gv-activated .gv-sidedrawer[data-state="open"] {
display: block;
}
.gv-activated .gv-sidedrawer.gv-sidedrawer-open:not(.gv-slide-in),
.gv-activated .gv-sidedrawer.gv-state-open:not(.gv-slide-in),
.gv-activated .gv-sidedrawer[data-state="open"]:not(.gv-slide-in) {
opacity: 1;
}
.gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in:not(.gv-no-overlay),
.gv-activated .gv-sidedrawer.gv-state-open.gv-slide-in:not(.gv-no-overlay),
.gv-activated .gv-sidedrawer[data-state="open"].gv-slide-in:not(.gv-no-overlay) {
animation: gv-fade-in 0.3s ease-out forwards;
}
.gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in:not(.gv-no-overlay) .gv-side-content:not(.gv-pos-right),
.gv-activated .gv-sidedrawer.gv-state-open.gv-slide-in:not(.gv-no-overlay) .gv-side-content:not(.gv-pos-right),
.gv-activated .gv-sidedrawer[data-state="open"].gv-slide-in:not(.gv-no-overlay) .gv-side-content:not(.gv-pos-right) {
animation: gv-slide-in-from-left 0.3s ease-in-out forwards;
}
.gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in:not(.gv-no-overlay) .gv-side-content.gv-pos-right,
.gv-activated .gv-sidedrawer.gv-state-open.gv-slide-in:not(.gv-no-overlay) .gv-side-content.gv-pos-right,
.gv-activated .gv-sidedrawer[data-state="open"].gv-slide-in:not(.gv-no-overlay) .gv-side-content.gv-pos-right {
animation: gv-slide-in-from-right 0.3s ease-in-out forwards;
}
.gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in.gv-no-overlay,
.gv-activated .gv-sidedrawer.gv-state-open.gv-slide-in.gv-no-overlay,
.gv-activated .gv-sidedrawer[data-state="open"].gv-slide-in.gv-no-overlay {
opacity: 1;
}
.gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in.gv-no-overlay:not(.gv-pos-right),
.gv-activated .gv-sidedrawer.gv-state-open.gv-slide-in.gv-no-overlay:not(.gv-pos-right),
.gv-activated .gv-sidedrawer[data-state="open"].gv-slide-in.gv-no-overlay:not(.gv-pos-right) {
animation: gv-slide-in-from-left 0.3s ease-in-out forwards;
}
.gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in.gv-no-overlay.gv-pos-right,
.gv-activated .gv-sidedrawer.gv-state-open.gv-slide-in.gv-no-overlay.gv-pos-right,
.gv-activated .gv-sidedrawer[data-state="open"].gv-slide-in.gv-no-overlay.gv-pos-right {
animation: gv-slide-in-from-right 0.3s ease-in-out forwards;
}
.gv-activated .gv-sidedrawer.gv-state-closed,
.gv-activated .gv-sidedrawer[data-state="closed"] {
display: block;
pointer-events: none;
}
.gv-activated .gv-sidedrawer.gv-state-closed.gv-slide-in:not(.gv-no-overlay),
.gv-activated .gv-sidedrawer[data-state="closed"].gv-slide-in:not(.gv-no-overlay) {
animation: gv-fade-out 0.3s ease-in forwards;
}
.gv-activated .gv-sidedrawer.gv-state-closed.gv-slide-in:not(.gv-no-overlay) .gv-side-content:not(.gv-pos-right),
.gv-activated .gv-sidedrawer[data-state="closed"].gv-slide-in:not(.gv-no-overlay) .gv-side-content:not(.gv-pos-right) {
animation: gv-slide-out-from-left 0.3s ease-in-out forwards;
}
.gv-activated .gv-sidedrawer.gv-state-closed.gv-slide-in:not(.gv-no-overlay) .gv-side-content.gv-pos-right,
.gv-activated .gv-sidedrawer[data-state="closed"].gv-slide-in:not(.gv-no-overlay) .gv-side-content.gv-pos-right {
animation: gv-slide-out-from-right 0.3s ease-in-out forwards;
}
.gv-activated .gv-sidedrawer.gv-state-closed.gv-slide-in.gv-no-overlay,
.gv-activated .gv-sidedrawer[data-state="closed"].gv-slide-in.gv-no-overlay {
opacity: 1;
}
.gv-activated .gv-sidedrawer.gv-state-closed.gv-slide-in.gv-no-overlay:not(.gv-pos-right),
.gv-activated .gv-sidedrawer[data-state="closed"].gv-slide-in.gv-no-overlay:not(.gv-pos-right) {
animation: gv-slide-out-from-left 0.3s ease-in-out forwards;
}
.gv-activated .gv-sidedrawer.gv-state-closed.gv-slide-in.gv-no-overlay.gv-pos-right,
.gv-activated .gv-sidedrawer[data-state="closed"].gv-slide-in.gv-no-overlay.gv-pos-right {
animation: gv-slide-out-from-right 0.3s ease-in-out forwards;
}
.gv-activated .gv-sidedrawer .gv-side-content {
background: var(--color-surface-bright);
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
overscroll-behavior: contain;
padding: 24px 16px;
position: absolute;
top: 0;
width: var(--side-content-width);
}
.gv-activated .gv-sidedrawer .gv-side-content > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated .gv-sidedrawer .gv-side-content:not(.gv-pos-right) {
left: 0;
}
.gv-activated .gv-sidedrawer .gv-side-content .gv-btn-close {
border-radius: var(--border-radius);
padding: 8px;
position: absolute;
right: 16px;
top: 8px;
}
.gv-activated .gv-sidedrawer .gv-side-content .gv-btn-close:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-sidedrawer .gv-side-content .gv-btn-close:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-sidedrawer .gv-side-content .gv-side-account {
padding: 16px 8px;
}
.gv-activated .gv-sidedrawer .gv-side-content .gv-side-account > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-sidedrawer .gv-side-content .gv-side-account .gv-account-info {
padding-right: 24px;
}
.gv-activated .gv-sidedrawer .gv-side-content .gv-side-account .gv-account-info > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-sidedrawer .gv-side-content .gv-side-account .gv-name {
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-sidedrawer .gv-side-content .gv-side-account .gv-sub {
color: var(--color-body-on-alternative);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-sidedrawer .gv-side-content .gv-side-account .gv-name,
.gv-activated .gv-sidedrawer .gv-side-content .gv-side-account .gv-sub {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-sidedrawer .gv-side-content .gv-side-dropdown {
display: none;
padding: 0 8px 0 32px;
}
.gv-activated .gv-sidedrawer .gv-side-content [aria-expanded="true"] gv-icon:last-child {
transform: rotate(180deg);
}
.gv-activated .gv-sidedrawer .gv-side-content [aria-expanded="true"] + .gv-side-dropdown {
display: block;
}
.gv-activated .gv-sidebar {
--sidebar-px: var(--size-md);
--sidebar-py: var(--size-lg);
--sidebar-width: 232px;
border-right: 1px solid var(--color-border-alt);
flex: 0 0 var(--sidebar-width);
padding: var(--sidebar-py) var(--sidebar-px);
width: var(--sidebar-width);
}
.gv-activated .gv-sidebar > *:not(:last-child) {
margin-bottom: var(--size-md);
}
.gv-activated .gv-sidebar.gv-sidebar-compact .gv-side-nav {
--side-submenu-pl: var(--sidebar-px);
}
.gv-activated .gv-sidebar.gv-sidebar-minimal {
--sidebar-px: var(--size-sm);
--sidebar-py: var(--size-md);
--sidebar-width: 200px;
}
.gv-activated .gv-sidebar.gv-sidebar-minimal .gv-side-nav {
--side-submenu-pl: var(--sidebar-px);
}
.gv-activated .gv-sidedrawer .gv-side-nav .gv-has-submenu[\:not-has\(.gv-nav-item\%20gv-icon\:first-child\)] {
--side-submenu-pl: var(--size-md);
}
.gv-activated .gv-sidedrawer .gv-side-nav .gv-has-submenu:not(:has(.gv-nav-item gv-icon:first-child)) {
--side-submenu-pl: var(--size-md);
}
.gv-activated .gv-side-nav {
--side-submenu-pl: calc(var(--size-icon-md) + var(--size-sm));
}
.gv-activated .gv-side-nav ul {
list-style: none;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-side-nav ul > *:not(:last-child) {
margin-bottom: var(--size-xs);
}
.gv-activated .gv-side-nav ul li {
display: flex;
flex-direction: column;
gap: var(--size-sm);
}
.gv-activated .gv-side-nav ul li.gv-has-submenu ul {
display: none;
padding: 0 var(--size-sm) 0 var(--side-submenu-pl);
}
.gv-activated .gv-side-nav ul li.gv-has-submenu > .gv-nav-item::after {
background-color: var(--color-body-on-default);
content: "";
height: var(--size-icon-md);
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/chevron-down.966453af.svg) no-repeat 50% 50% / contain;
mask: url(//mail.group-cdn.one/v51.1.15/media/chevron-down.966453af.svg) no-repeat 50% 50% / contain;
position: absolute;
right: var(--size-sm);
top: var(--size-sm);
transition: transform 0.3s ease;
width: var(--size-icon-md);
}
.gv-activated .gv-side-nav ul li.gv-has-submenu.gv-expanded ul {
display: block;
}
.gv-activated .gv-side-nav ul li.gv-has-submenu.gv-expanded > .gv-nav-item::after {
transform: rotate(180deg);
}
.gv-activated .gv-side-label {
color: var(--color-body-on-alternative);
margin-bottom: var(--size-sm);
padding: 0 var(--size-sm) var(--size-sm);
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-nav-item {
align-items: flex-start;
border-radius: var(--border-radius);
display: flex;
gap: var(--size-sm);
-webkit-hyphens: auto;
hyphens: auto;
min-height: 40px;
word-wrap: break-word;
padding: var(--size-sm);
position: relative;
text-align: left;
text-decoration: none;
width: 100%;
word-break: break-word;
word-wrap: break-word;
}
.gv-activated .gv-nav-item:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-nav-item:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-nav-item.gv-active,
.gv-activated .gv-nav-item[aria-selected="true"] {
background-color: var(--color-state-active);
}
.gv-activated .gv-nav-item gv-icon {
flex-shrink: 0;
}
.gv-activated .gv-nav-item > span {
flex-grow: 1;
padding-top: 1px;
}
.gv-activated .gv-skeleton {
animation: gv-pulse 2s ease-in-out infinite;
background-color: var(--color-surface-muted);
border-radius: var(--border-radius);
min-width: var(--size-md);
}
.gv-activated .gv-skeleton::before {
content: "\00a0";
display: inline-block;
}
.gv-activated .gv-split-button {
--dropdown-padding-lr: 12px;
align-items: stretch;
display: flex;
}
.gv-activated .gv-split-button .gv-button.gv-button-main {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-right: none;
}
.gv-activated .gv-split-button .gv-button.gv-button-dropdown {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding-left: var(--dropdown-padding-lr);
padding-right: var(--dropdown-padding-lr);
}
.gv-activated .gv-split-button .gv-button.gv-button-dropdown.gv-button-primary {
border-left-color: var(--button-color-text);
}
.gv-activated .gv-split-button .gv-button[aria-expanded="true"] gv-icon {
transform: rotate(180deg);
}
.gv-activated .gv-mode-condensed .gv-split-button,
.gv-activated .gv-split-button.gv-mode-condensed {
--dropdown-padding-lr: 5px;
}
/* Stepper component */
.gv-activated {
--size-stepper-dot: 20px;
}
.gv-activated .gv-stepper {
align-items: flex-start;
color: var(--color-body-on-default);
display: flex;
padding-bottom: var(--size-md);
padding-top: var(--size-md);
position: relative;
width: 100%;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-stepper {
gap: 24px;
padding-left: 24px;
padding-right: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-stepper {
gap: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-stepper {
gap: 48px;
padding-left: 48px;
padding-right: 48px;
}
}
.gv-activated .gv-stepper .gv-stepper-back a {
align-items: center;
color: var(--color-body-on-default);
display: inline-flex;
gap: var(--size-xs);
text-decoration: none;
}
.gv-activated .gv-stepper .gv-stepper-back a:hover {
color: var(--color-body-on-alternative);
}
.gv-activated .gv-stepper .gv-stepper-back a span {
/* Apply values to calculate em_based margins that work with any font size */
}
.gv-activated .gv-stepper .gv-stepper-back a span::before {
margin-bottom: calc(-0.375em + 0px);
}
.gv-activated .gv-stepper .gv-stepper-back a span::after {
margin-top: calc(-0.3125em + 0px);
}
.gv-activated .gv-stepper .gv-stepper-back a span::before,
.gv-activated .gv-stepper .gv-stepper-back a span::after {
content: "";
display: block;
height: 0;
width: 0;
}
.gv-activated .gv-stepper .gv-stepper-collapsed {
align-items: center;
background-color: var(--color-surface-dim);
cursor: pointer;
display: flex;
flex: 1;
gap: var(--size-md);
padding: var(--size-md) var(--size-lg);
}
.gv-activated .gv-stepper .gv-stepper-collapsed .gv-step-label {
flex-grow: 1;
text-align: left;
}
.gv-activated .gv-stepper .gv-stepper-progress {
background-color: var(--color-state-active);
color: var(--color-body-on-default);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
align-items: center;
border-radius: 50%;
display: flex;
height: 32px;
justify-content: center;
position: relative;
width: 32px;
}
.gv-activated .gv-stepper .gv-stepper-progress gv-indicator {
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: rotate(-90deg);
transform-origin: center;
width: 100%;
}
.gv-activated .gv-stepper .gv-stepper-progress .gv-circle-top {
transition: stroke-dashoffset 400ms ease-in-out;
}
.gv-activated .gv-stepper .gv-stepper-progress[data-progress-percent="20"] .gv-circle-top {
stroke-dasharray: 100.53096491;
stroke-dashoffset: 80.42477193;
}
.gv-activated .gv-stepper .gv-stepper-progress[data-progress-percent="40"] .gv-circle-top {
stroke-dasharray: 100.53096491;
stroke-dashoffset: 60.31857895;
}
.gv-activated .gv-stepper .gv-stepper-progress[data-progress-percent="60"] .gv-circle-top {
stroke-dasharray: 100.53096491;
stroke-dashoffset: 40.21238597;
}
.gv-activated .gv-stepper .gv-stepper-progress[data-progress-percent="80"] .gv-circle-top {
stroke-dasharray: 100.53096491;
stroke-dashoffset: 20.10619298;
}
.gv-activated .gv-stepper .gv-stepper-progress[data-progress-percent="100"] .gv-circle-top {
stroke-dasharray: 100.53096491;
stroke-dashoffset: 0;
}
.gv-activated .gv-stepper .gv-stepper-list {
align-items: center;
color: var(--color-body-on-default);
display: flex;
flex: 1;
flex-wrap: nowrap;
padding: 0;
}
.gv-activated .gv-stepper .gv-step {
align-items: center;
display: inline-flex;
flex: 1;
list-style: none;
position: relative;
}
.gv-activated .gv-stepper .gv-step.gv-step-last {
max-width: 20px;
}
.gv-activated .gv-stepper .gv-step.gv-step-last .gv-step-content {
align-items: flex-end;
}
.gv-activated .gv-stepper .gv-step .gv-step-line {
background-color: var(--color-border);
height: 1px;
left: 0;
position: absolute;
top: 10px;
width: 100%;
}
.gv-activated .gv-stepper .gv-step .gv-step-content {
cursor: default;
display: inline-flex;
gap: var(--size-sm);
flex-direction: column;
max-width: 100%;
position: relative;
text-decoration: none;
z-index: 1;
}
.gv-activated .gv-stepper .gv-step .gv-step-type {
align-items: center;
background-color: var(--color-surface-muted);
border-radius: 50%;
display: flex;
flex-shrink: 0;
height: var(--size-stepper-dot);
justify-content: center;
width: var(--size-stepper-dot);
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-stepper .gv-step .gv-step-type gv-icon {
color: var(--color-link);
display: none;
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-stepper .gv-step .gv-step-label {
white-space: nowrap;
/* Apply values to calculate em_based margins that work with any font size */
}
.gv-activated .gv-stepper .gv-step .gv-step-label::before {
margin-bottom: calc(-0.375em + 0px);
}
.gv-activated .gv-stepper .gv-step .gv-step-label::after {
margin-top: calc(-0.3125em + 0px);
}
.gv-activated .gv-stepper .gv-step .gv-step-label::before,
.gv-activated .gv-stepper .gv-step .gv-step-label::after {
content: "";
display: block;
height: 0;
width: 0;
}
.gv-activated .gv-stepper .gv-step.gv-step-current .gv-step-type {
background-color: var(--color-primary);
color: var(--color-button-fg-on-primary);
}
.gv-activated .gv-stepper .gv-step.gv-step-done .gv-step-line {
background-color: var(--color-state-focus);
}
.gv-activated .gv-stepper .gv-step.gv-step-done .gv-step-type {
background-color: var(--color-state-active);
}
.gv-activated .gv-stepper .gv-step.gv-step-done .gv-step-type gv-icon {
display: block;
}
.gv-activated .gv-stepper .gv-step.gv-step-done .gv-step-type .gv-step-nr {
display: none;
}
.gv-activated .gv-stepper .gv-step.gv-step-done .gv-step-type,
.gv-activated .gv-stepper .gv-step.gv-step-done .gv-step-label {
cursor: pointer;
}
@media (max-width: 599px ) {
.gv-activated .gv-stepper {
--size-stepper-dot: 32px;
background-color: var(--color-overlay-dark);
padding: 0;
}
.gv-activated .gv-stepper .gv-stepper-back {
display: none;
}
.gv-activated .gv-stepper .gv-stepper-button-close {
border-radius: var(--border-radius);
cursor: pointer;
display: block;
margin: calc(var(--size-sm) * -1) calc(var(--size-sm) * -1) calc(var(--size-sm) * -1) 0;
padding: var(--size-sm);
}
.gv-activated .gv-stepper .gv-stepper-button-close:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-stepper .gv-stepper-button-close:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-stepper .gv-stepper-list {
align-items: flex-start;
background-color: var(--color-surface-dim);
display: none;
flex-direction: column;
padding: var(--size-md) var(--size-lg);
}
.gv-activated .gv-stepper .gv-step {
width: 100%;
}
.gv-activated .gv-stepper .gv-step:not(.gv-step-last) {
padding-bottom: var(--size-lg);
}
.gv-activated .gv-stepper .gv-step.gv-step-last {
align-items: center;
max-width: none;
}
.gv-activated .gv-stepper .gv-step.gv-step-last .gv-step-content {
align-items: center;
}
.gv-activated .gv-stepper .gv-step .gv-step-line {
bottom: 0;
height: var(--size-lg);
left: calc(var(--size-stepper-dot) / 2);
width: 1px;
top: auto;
}
.gv-activated .gv-stepper .gv-step .gv-step-content {
align-items: center;
flex-direction: row;
flex-grow: 1;
}
.gv-activated .gv-stepper .gv-step .gv-step-type {
height: var(--size-stepper-dot);
width: var(--size-stepper-dot);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-stepper .gv-step .gv-step-label {
flex-grow: 1;
}
.gv-activated .gv-stepper.gv-stepper-open {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: var(--navigation-bar-height);
z-index: 900;
}
.gv-activated .gv-stepper.gv-stepper-open .gv-stepper-collapsed {
display: none;
}
.gv-activated .gv-stepper.gv-stepper-open .gv-stepper-list {
display: flex;
}
}
@media (min-width: 600px ) {
.gv-activated .gv-stepper .gv-stepper-collapsed,
.gv-activated .gv-stepper .gv-stepper-button-close {
display: none;
}
}
@media (min-width: 600px ) and (max-width: 1279px ) {
.gv-activated .gv-stepper {
align-items: center;
}
.gv-activated .gv-stepper .gv-step {
align-items: center;
flex-direction: row;
}
.gv-activated .gv-stepper .gv-step .gv-step-line {
flex-grow: 1;
position: relative;
top: auto;
width: auto;
}
.gv-activated .gv-stepper .gv-step .gv-step-content {
align-items: center;
flex-direction: row;
}
.gv-activated .gv-stepper .gv-step.gv-step-last {
flex: 0 1 auto;
max-width: none;
}
.gv-activated .gv-stepper .gv-step.gv-step-last .gv-step-content {
align-items: center;
flex-direction: row-reverse;
}
.gv-activated .gv-stepper .gv-step.gv-step-last .gv-step-label {
padding-left: var(--size-sm);
}
.gv-activated .gv-stepper .gv-step:not(.gv-step-last) .gv-step-label {
padding-right: var(--size-sm);
}
.gv-activated .gv-stepper .gv-step:not(.gv-step-current) .gv-step-label {
display: none;
}
}
.gv-activated .gv-stepper-vertical {
align-items: flex-start;
color: var(--color-body-on-default);
counter-reset: list-number;
display: flex;
flex-direction: column;
position: relative;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-stepper-vertical .gv-step {
align-items: flex-start;
display: inline-flex;
gap: var(--size-sm);
list-style: none;
position: relative;
width: 100%;
}
.gv-activated .gv-stepper-vertical .gv-step:not(:last-child) {
padding-bottom: var(--size-lg);
}
.gv-activated .gv-stepper-vertical .gv-step:not(:last-child)::after {
background-color: var(--color-border);
bottom: 0;
content: "";
height: auto;
left: calc(var(--size-stepper-dot) / 2);
position: absolute;
top: 20px;
width: 1px;
}
.gv-activated .gv-stepper-vertical .gv-step::before {
align-items: center;
background-color: var(--color-primary);
border-radius: 50%;
color: var(--color-button-fg-on);
content: counter(list-number);
counter-increment: list-number;
display: flex;
flex-shrink: 0;
height: var(--size-stepper-dot);
justify-content: center;
padding-top: 1px;
width: var(--size-stepper-dot);
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-sticky-bar .gv-stepper {
padding: 0;
align-items: center;
}
.gv-activated .gv-sticky-bar .gv-stepper .gv-step {
align-items: center;
flex-direction: row;
}
.gv-activated .gv-sticky-bar .gv-stepper .gv-step .gv-step-line {
flex-grow: 1;
position: relative;
top: auto;
width: auto;
}
.gv-activated .gv-sticky-bar .gv-stepper .gv-step .gv-step-content {
align-items: center;
flex-direction: row;
}
.gv-activated .gv-sticky-bar .gv-stepper .gv-step.gv-step-last {
flex: 0 1 auto;
max-width: none;
}
.gv-activated .gv-sticky-bar .gv-stepper .gv-step.gv-step-last .gv-step-content {
align-items: center;
flex-direction: row-reverse;
}
.gv-activated .gv-sticky-bar .gv-stepper .gv-step.gv-step-last .gv-step-label {
padding-left: var(--size-sm);
}
.gv-activated .gv-sticky-bar .gv-stepper .gv-step:not(.gv-step-last) .gv-step-label {
padding-right: var(--size-sm);
}
.gv-activated .gv-sticky-bar .gv-stepper .gv-step:not(.gv-step-current) .gv-step-label {
display: none;
}
.gv-activated .gv-sticky-bar {
display: none;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-sticky-bar .gv-sticky-content {
padding-left: 24px;
padding-right: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-sticky-bar .gv-sticky-content {
padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-sticky-bar .gv-sticky-content {
padding-left: 48px;
padding-right: 48px;
}
}
@media (min-width: 600px ) {
.gv-activated .gv-sticky-bar {
background-color: var(--color-surface-dim);
box-shadow: var(--color-shadow-elevated);
left: 0;
position: fixed;
top: var(--navigation-bar-height);
width: 100%;
z-index: 900;
}
.gv-activated .gv-sticky-bar.gv-sticky-visible {
display: block;
}
.gv-activated .gv-sticky-bar .gv-sticky-content {
padding-bottom: var(--size-md);
padding-top: var(--size-md);
width: 100%;
}
}
.gv-activated .gv-system-wide {
--notice-color-background: var(--color-surface-inverted);
--notice-radius: 0;
align-items: center;
padding: var(--size-sm) var(--size-fluid);
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
.gv-activated .gv-system-wide .gv-checkbox {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-system-wide .gv-radio {
height: var(--size-md);
width: var(--size-md);
}
.gv-activated .gv-system-wide .gv-radio:checked::after {
border-width: 5px;
}
.gv-activated .gv-system-wide .gv-input.gv-input-number button {
padding: 0;
}
.gv-activated .gv-system-wide .gv-toggle {
--toggle-height: 16px;
--toggle-width: 28px;
--toggle-dot-indent: 2px;
}
.gv-activated .gv-system-wide gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-system-wide .gv-notice-content {
color: var(--color-body-on-inverted);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-system-wide .gv-notice-icon {
color: var(--color-body-on-inverted);
}
.gv-activated .gv-system-wide .gv-notice-close {
color: var(--color-body-on-inverted);
}
.gv-activated .gv-system-wide .gv-button {
--button-color-background: transparent;
--button-color-border: var(--color-border);
--button-color-text: var(--color-body-on-inverted);
}
@media (max-width: 599px ) {
.gv-activated .gv-system-wide .gv-notice-close {
right: var(--size-sm);
top: 0;
}
}
.gv-activated .gv-tab-list {
--tab-color-text: var(--color-body-on-alternative);
display: flex;
max-width: 100%;
border-bottom: var(--size-border) solid var(--color-border);
}
.gv-activated .gv-tab-list .gv-tab {
align-items: center;
background: none;
border: none;
color: var(--tab-color-text);
cursor: pointer;
display: flex;
flex: 0 1 auto;
flex-wrap: nowrap;
gap: 8px;
height: 54px;
margin-bottom: calc(var(--size-border) * -1);
min-width: 0;
padding: 0 24px;
text-decoration: none;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-tab-list .gv-tab.gv-tab-active {
--tab-color-text: var(--color-body-on-default);
border-bottom: var(--size-border) solid var(--color-primary);
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-tab-list .gv-tab gv-icon {
flex-shrink: 0;
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-tab-list .gv-tab .gv-tab-content {
display: block;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-tab-list .gv-tab:hover .gv-tab-content {
color: var(--color-body-on-default);
}
.gv-activated .gv-tab-list .gv-tab .gv-tab-counter {
align-items: center;
background-color: var(--color-surface-muted);
border-radius: var(--border-radius);
color: var(--color-body-on-alternative);
display: flex;
flex-shrink: 0;
height: var(--size-lg);
justify-content: center;
min-width: var(--size-lg);
padding: 0 var(--size-xs);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
@media (max-width: 599px ) {
.gv-activated .gv-tab-select + .gv-tab-list {
display: none;
}
}
@media (min-width: 600px ) {
.gv-activated .gv-tab-select {
display: none;
}
}
.gv-activated .gv-tab-panel {
display: none;
}
.gv-activated .gv-tab-panel.gv-panel-active {
display: block;
}
.gv-activated .gv-rounded-tabs .gv-tab-bar {
align-items: center;
display: flex;
gap: var(--size-sm);
justify-content: space-between;
}
.gv-activated .gv-rounded-tabs .gv-tab-bar .gv-tab-list {
border: none;
flex: 0 1 auto;
gap: var(--size-xs);
min-width: 0;
}
.gv-activated .gv-rounded-tabs .gv-tab-bar .gv-tab-list .gv-tab {
border: var(--size-border) solid var(--color-border);
border-bottom: none;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-rounded-tabs .gv-tab-bar .gv-tab-list .gv-tab.gv-tab-active {
background-color: var(--color-surface-bright);
border-bottom: none;
}
.gv-activated .gv-rounded-tabs .gv-tab-bar .gv-tabs-addon {
flex-shrink: 0;
padding: var(--size-sm);
}
.gv-activated .gv-rounded-tabs .gv-tab-panel {
background: var(--color-surface-bright);
border: var(--size-border) solid var(--color-border);
border-radius: var(--border-radius);
padding: var(--size-md);
}
@media (max-width: 599px ) {
.gv-activated .gv-rounded-tabs .gv-tab-bar {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-rounded-tabs .gv-tab-bar .gv-tab-list {
display: none;
}
}
@media (min-width: 600px ) {
.gv-activated .gv-rounded-tabs .gv-tab-bar .gv-input-select {
display: none;
}
.gv-activated .gv-rounded-tabs .gv-tab-panel {
border-top-left-radius: 0;
}
}
.gv-activated gv-tile {
display: inline-block;
vertical-align: text-bottom;
font-size: 0;
height: var(--size-tile-sm);
width: var(--size-tile-sm);
}
.gv-activated.gv-dark-mode gv-tile .gv-mode-color {
fill: var(--color-gray-100);
}
.gv-activated .gv-tile-100 {
fill: var(--color-tile-100);
}
.gv-activated .gv-tile-200 {
fill: var(--color-tile-200);
}
.gv-activated[size="xs"] {
height: var(--size-tile-xs);
width: var(--size-tile-xs);
}
.gv-activated[size="md"] {
height: var(--size-tile-md);
width: var(--size-tile-md);
}
.gv-activated[size="lg"] {
height: var(--size-tile-lg);
width: var(--size-tile-lg);
}
.gv-activated[size="xl"] {
height: var(--size-tile-xl);
width: var(--size-tile-xl);
}
.gv-activated[variant="duotone"]:not([size="xs"]),
.gv-activated[src*="/duotone/"]:not([size="xs"]) {
background: var(--color-tile-bg);
border-radius: var(--color-tile-radius);
box-shadow: var(--color-tile-box-shadow);
}
.gv-activated .gv-toast {
--toast-color-background: inherit;
--toast-color-text: var(--color-body-on-default);
align-items: center;
background: var(--toast-color-background);
border-radius: var(--notice-radius);
color: var(--toast-color-text);
display: flex;
flex-wrap: nowrap;
gap: var(--size-sm);
min-width: 240px;
max-width: 360px;
overflow: hidden;
padding: var(--size-sm) var(--size-md);
position: relative;
width: fit-content;
}
.gv-activated .gv-toast gv-icon {
flex-shrink: 0;
}
.gv-activated .gv-toast .gv-toast-content {
flex-grow: 1;
min-width: 0;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-toast .gv-toast-content > *:not(:last-child) {
margin-bottom: var(--size-xs);
}
.gv-activated .gv-toast .gv-toast-title {
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-toast .gv-button {
--button-color-border: var(--toast-color-text);
--button-color-text: var(--toast-color-text);
margin-left: var(--size-md);
white-space: nowrap;
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
.gv-activated .gv-toast .gv-toast-close {
cursor: pointer;
margin-left: var(--size-sm);
padding: var(--size-sm);
}
.gv-activated .gv-toast.gv-toast-alert {
--toast-color-background: var(--color-signal-alert);
--toast-color-text: var(--color-on-fixed-white);
}
.gv-activated .gv-toast.gv-toast-warning {
--toast-color-background: var(--color-signal-warning-light);
}
.gv-activated .gv-toast.gv-toast-success {
--toast-color-background: var(--color-signal-success);
--toast-color-text: var(--color-on-fixed-white);
}
.gv-activated .gv-toast.gv-toast-info {
--toast-color-background: var(--color-signal-info-light);
}
@media (max-width: 599px ) {
.gv-activated .gv-toast {
max-width: 100%;
width: 312px;
}
}
.gv-activated .gv-toast-container {
box-sizing: content-box;
display: flex;
flex-direction: column-reverse;
gap: var(--size-sm);
pointer-events: none;
position: fixed;
right: 0;
top: 0;
z-index: 999999;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-toast-container {
padding: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-toast-container {
padding: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-toast-container {
padding: 48px;
}
}
.gv-activated .gv-toast-container .gv-toast {
opacity: 0;
pointer-events: all;
transform: scale(0.7) translateY(-30px);
transition: all 0.25s;
}
.gv-activated .gv-toast-container .gv-toast + .gv-toast {
margin-bottom: -50px;
}
.gv-activated .gv-toast-container .gv-toast.gv-visible {
margin-bottom: var(--size-xs);
opacity: 1;
transform: scale(1) translateY(0);
}
.gv-activated .gv-toast-container .gv-toast.gv-remove {
opacity: 0;
transform: scale(1) translateY(0) translateX(25px);
}
@media (max-width: 599px ) {
.gv-activated .gv-toast-container {
bottom: 0;
flex-direction: column;
left: 0;
right: 0;
top: auto;
}
.gv-activated .gv-toast-container .gv-toast {
margin-left: auto;
margin-right: auto;
}
.gv-activated .gv-toast-container .gv-toast.gv-remove {
transform: scale(1) translateY(25px) translateX(0);
}
}
.gv-activated .gv-to-do {
background-color: var(--color-surface-bright);
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
}
.gv-activated .gv-to-do .gv-item {
list-style: none;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-to-do .gv-item:first-child .gv-trigger {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-to-do .gv-item:last-child .gv-trigger {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-to-do .gv-item:not(:last-child) {
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .gv-to-do .gv-item .gv-trigger {
display: flex;
gap: var(--size-md);
padding: var(--size-md) var(--size-lg);
text-align: left;
text-decoration: none;
width: 100%;
}
.gv-activated .gv-to-do .gv-item .gv-trigger gv-icon {
margin-top: 1px;
}
.gv-activated .gv-to-do .gv-item .gv-trigger:hover {
color: var(--color-state-form-active);
}
.gv-activated .gv-to-do .gv-item .gv-trigger:active {
color: var(--color-state-form-active);
opacity: var(--opacity-active-links);
}
.gv-activated .gv-to-do .gv-item .gv-trigger-content {
display: flex;
flex: 1;
flex-direction: row-reverse;
gap: var(--size-sm);
justify-content: flex-end;
}
.gv-activated .gv-to-do .gv-item .gv-text {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: var(--size-sm);
justify-content: center;
min-height: 26px;
}
.gv-activated .gv-to-do .gv-item .gv-title {
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-to-do .gv-item .gv-badge,
.gv-activated .gv-to-do .gv-item gv-icon {
flex-shrink: 0;
}
.gv-activated .gv-to-do.gv-task-list .gv-trigger {
align-items: center;
}
.gv-activated .gv-to-do.gv-task-list .gv-trigger-content {
align-items: center;
}
.gv-activated .gv-to-do.gv-task-list .gv-description {
color: var(--color-body-on-alternative);
}
.gv-activated .gv-to-do.gv-task-accordion .gv-trigger.gv-expanded gv-icon {
transform: rotate(180deg);
}
.gv-activated .gv-to-do.gv-task-accordion .gv-trigger-content {
align-items: flex-start;
}
.gv-activated .gv-to-do.gv-task-accordion .gv-body-content {
padding: 0 var(--size-xl) var(--size-md) var(--size-lg);
}
.gv-activated .gv-to-do.gv-task-accordion .gv-body-content > *:not(:last-child) {
margin-bottom: 16px;
}
@media (max-width: 599px ) {
.gv-activated .gv-to-do .gv-trigger-content {
flex-wrap: wrap;
}
.gv-activated .gv-to-do .gv-trigger-content .gv-text {
width: 100%;
}
}
.gv-activated .gv-tooltip {
--tooltip-max-width: 200px;
background: var(--color-surface-inverted);
border-radius: var(--border-radius);
color: var(--color-body-on-inverted);
max-width: var(--tooltip-max-width);
padding: var(--size-md);
position: fixed;
text-align: left;
width: fit-content;
z-index: 200;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-tooltip.gv-mode-condensed {
padding: var(--size-sm);
}
.gv-activated .gv-tooltip::before {
background: var(--color-surface-inverted);
content: "";
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/tooltip-arrow.a6a9cfb6.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/tooltip-arrow.a6a9cfb6.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
position: absolute;
width: 17px;
height: 6px;
transform-origin: center;
z-index: -1;
}
.gv-activated .gv-tooltip[class*="gv-arrow-top"] {
margin-top: 6px;
}
.gv-activated .gv-tooltip[class*="gv-arrow-top"]::before {
top: -6px;
}
.gv-activated .gv-tooltip[class*="gv-arrow-bottom"] {
margin-bottom: 6px;
}
.gv-activated .gv-tooltip[class*="gv-arrow-bottom"]::before {
bottom: -6px;
transform: rotate(180deg);
}
.gv-activated .gv-tooltip.gv-arrow-bottom-left::before,
.gv-activated .gv-tooltip.gv-arrow-top-left::before {
left: 8px;
}
.gv-activated .gv-tooltip.gv-arrow-bottom-right::before,
.gv-activated .gv-tooltip.gv-arrow-top-right::before {
right: 8px;
}
.gv-activated .gv-tooltip.gv-arrow-bottom-center::before {
right: 50%;
transform: rotate(180deg) translateX(-50%);
}
.gv-activated .gv-tooltip.gv-arrow-top-center::before {
left: 50%;
transform: translateX(-50%);
}
.gv-activated .gv-tooltip-button {
text-align: left;
}
.gv-activated .gv-tooltip-container {
display: inline-block;
position: relative;
}
.gv-activated .gv-tooltip-container .gv-tooltip {
display: none;
min-width: max-content;
position: absolute;
}
.gv-activated .gv-tooltip-container .gv-tooltip > * {
max-width: var(--tooltip-max-width);
}
.gv-activated .gv-tooltip-container:hover .gv-tooltip,
.gv-activated .gv-tooltip-container .gv-tooltip-button:focus + .gv-tooltip {
display: block;
}
.gv-activated .gv-tooltip-container[class*="gv-tooltip-top"] .gv-tooltip {
bottom: 100%;
}
.gv-activated .gv-tooltip-container[class*="gv-tooltip-bottom"] .gv-tooltip {
top: 100%;
}
.gv-activated .gv-tooltip-container.gv-tooltip-top-left .gv-tooltip,
.gv-activated .gv-tooltip-container.gv-tooltip-bottom-left .gv-tooltip {
left: 50%;
transform: translateX(-16px);
}
.gv-activated .gv-tooltip-container.gv-tooltip-top-left[\:has\(.gv-text-dotted\)] .gv-tooltip,
.gv-activated .gv-tooltip-container.gv-tooltip-bottom-left[\:has\(.gv-text-dotted\)] .gv-tooltip {
left: 0;
transform: translateX(0);
}
.gv-activated .gv-tooltip-container.gv-tooltip-top-left:has(.gv-text-dotted) .gv-tooltip,
.gv-activated .gv-tooltip-container.gv-tooltip-bottom-left:has(.gv-text-dotted) .gv-tooltip {
left: 0;
transform: translateX(0);
}
.gv-activated .gv-tooltip-container.gv-tooltip-top-center .gv-tooltip,
.gv-activated .gv-tooltip-container.gv-tooltip-bottom-center .gv-tooltip {
left: 50%;
transform: translateX(-50%);
}
.gv-activated .gv-tooltip-container.gv-tooltip-top-right .gv-tooltip,
.gv-activated .gv-tooltip-container.gv-tooltip-bottom-right .gv-tooltip {
right: 50%;
transform: translateX(16px);
}
.gv-activated .gv-tooltip-container.gv-tooltip-top-right[\:has\(.gv-text-dotted\)] .gv-tooltip,
.gv-activated .gv-tooltip-container.gv-tooltip-bottom-right[\:has\(.gv-text-dotted\)] .gv-tooltip {
right: 0;
transform: translateX(0);
}
.gv-activated .gv-tooltip-container.gv-tooltip-top-right:has(.gv-text-dotted) .gv-tooltip,
.gv-activated .gv-tooltip-container.gv-tooltip-bottom-right:has(.gv-text-dotted) .gv-tooltip {
right: 0;
transform: translateX(0);
}
.gv-activated .gv-tour,
.gv-activated .gv-tour-with-media {
display: flex;
position: relative;
z-index: 200;
}
.gv-activated .gv-tour {
--color-state-focus-visible: var(--color-body-on-inverted);
background: var(--color-surface-inverted);
border-radius: var(--border-radius);
color: var(--color-body-on-inverted);
flex-direction: column;
gap: var(--size-md);
padding: var(--size-lg);
width: 300px;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-tour::before {
background: var(--color-surface-inverted);
content: "";
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/tour-arrow.ba678bbd.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/tour-arrow.ba678bbd.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
position: absolute;
width: 27px;
height: 11px;
transform-origin: center;
}
.gv-activated .gv-tour[class*="gv-arrow-top"],
.gv-activated .gv-tour[class*="gv-arrow-top"] + .gv-tour-media {
margin-top: 11px;
}
.gv-activated .gv-tour[class*="gv-arrow-top"]::before {
top: -11px;
}
.gv-activated .gv-tour[class*="gv-arrow-bottom"],
.gv-activated .gv-tour[class*="gv-arrow-bottom"] + .gv-tour-media {
margin-bottom: 11px;
}
.gv-activated .gv-tour[class*="gv-arrow-bottom"]::before {
bottom: -11px;
transform: rotate(180deg);
}
.gv-activated .gv-tour.gv-arrow-bottom-left::before,
.gv-activated .gv-tour.gv-arrow-top-left::before {
left: 24px;
}
.gv-activated .gv-tour.gv-arrow-bottom-right::before,
.gv-activated .gv-tour.gv-arrow-top-right::before {
right: 24px;
}
.gv-activated .gv-tour.gv-arrow-left {
margin-left: 11px;
}
.gv-activated .gv-tour.gv-arrow-left::before {
left: -19px;
top: 24px;
transform: rotate(270deg);
}
.gv-activated .gv-tour.gv-arrow-right {
margin-right: 11px;
}
.gv-activated .gv-tour.gv-arrow-right::before {
right: -19px;
top: 24px;
transform: rotate(90deg);
}
.gv-activated .gv-tour .gv-tour-steps {
display: flex;
gap: var(--size-xs);
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-tour .gv-tour-body {
padding-right: var(--size-icon-md);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-tour .gv-tour-body > *:not(:last-child) {
margin-bottom: var(--size-xs);
}
.gv-activated .gv-tour .gv-tour-body .gv-tour-title {
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-tour .gv-button-group {
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
.gv-activated .gv-tour .gv-button-group .gv-button-cancel {
color: var(--color-body-on-inverted);
}
.gv-activated .gv-tour .gv-tour-close {
cursor: pointer;
padding: var(--size-sm);
position: absolute;
right: 12px;
top: 12px;
}
.gv-activated .gv-tour-with-media {
align-items: stretch;
flex-flow: nowrap row;
}
.gv-activated .gv-tour-with-media .gv-tour-media {
overflow: hidden;
position: relative;
width: 300px;
}
.gv-activated .gv-tour-with-media .gv-tour-media img {
display: block;
}
.gv-activated .gv-tour-with-media .gv-tour-media iframe {
border: none;
max-width: 100%;
}
@media (max-width: 767px ) {
.gv-activated .gv-tour-with-media .gv-tour-media {
display: none;
}
}
@media (min-width: 768px ) {
.gv-activated .gv-tour-with-media .gv-arrow-left.gv-tour,
.gv-activated .gv-tour-with-media .gv-arrow-top-left.gv-tour,
.gv-activated .gv-tour-with-media .gv-arrow-bottom-left.gv-tour {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.gv-activated .gv-tour-with-media .gv-arrow-left + .gv-tour-media,
.gv-activated .gv-tour-with-media .gv-arrow-top-left + .gv-tour-media,
.gv-activated .gv-tour-with-media .gv-arrow-bottom-left + .gv-tour-media {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-tour-with-media .gv-arrow-right.gv-tour,
.gv-activated .gv-tour-with-media .gv-arrow-top-right.gv-tour,
.gv-activated .gv-tour-with-media .gv-arrow-bottom-right.gv-tour {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.gv-activated .gv-tour-with-media .gv-arrow-right + .gv-tour-media,
.gv-activated .gv-tour-with-media .gv-arrow-top-right + .gv-tour-media,
.gv-activated .gv-tour-with-media .gv-arrow-bottom-right + .gv-tour-media {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
order: -1;
}
}
.gv-activated {
color: var(--color-body-on-default);
font-family: PlusJakartaSans, Arial, Verdana, sans-serif;
-webkit-font-variant-ligatures: none;
font-feature-settings: none;
font-variant-ligatures: none;
font-weight: var(--font-weight-regular);
-webkit-font-smoothing: antialiased;
/* Headings */
/* Body text */
/* Captions */
/* Links */
/* Font-weight */
/* Text with icon */
/* Text width */
}
.gv-activated .gv-font-mono {
font-family: "JetBrains Mono", monospace;
}
.gv-activated h1,
.gv-activated h2,
.gv-activated h3,
.gv-activated h4,
.gv-activated h5,
.gv-activated h6 {
margin: 0;
}
.gv-activated .gv-heading-xxxl {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-xxxl);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-heading-xxxl {
letter-spacing: calc(var(--letterspacing-heading-xxxl-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-heading-xxxl {
letter-spacing: calc((var(--letterspacing-heading-xxxl-min) * 1px) + (var(--letterspacing-heading-xxxl-max) - var(--letterspacing-heading-xxxl-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-xxxl-min) * 1px) + (var(--letterspacing-heading-xxxl-max) - var(--letterspacing-heading-xxxl-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-heading-xxxl {
letter-spacing: calc(var(--letterspacing-heading-xxxl-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-heading-xxxl {
font-size: calc(var(--font-size-heading-xxxl-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-heading-xxxl {
font-size: calc((var(--font-size-heading-xxxl-min) * 1rem) + (var(--font-size-heading-xxxl-max) - var(--font-size-heading-xxxl-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-xxxl-min) * 1rem) + (var(--font-size-heading-xxxl-max) - var(--font-size-heading-xxxl-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-heading-xxxl {
font-size: calc(var(--font-size-heading-xxxl-max) * 1rem);
}
}
.gv-activated h1,
.gv-activated .gv-heading-xxl {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-xxl);
}
@media screen and (max-width: 360px) {
.gv-activated h1,
.gv-activated .gv-heading-xxl {
letter-spacing: calc(var(--letterspacing-heading-xxl-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated h1,
.gv-activated .gv-heading-xxl {
letter-spacing: calc((var(--letterspacing-heading-xxl-min) * 1px) + (var(--letterspacing-heading-xxl-max) - var(--letterspacing-heading-xxl-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-xxl-min) * 1px) + (var(--letterspacing-heading-xxl-max) - var(--letterspacing-heading-xxl-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated h1,
.gv-activated .gv-heading-xxl {
letter-spacing: calc(var(--letterspacing-heading-xxl-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated h1,
.gv-activated .gv-heading-xxl {
font-size: calc(var(--font-size-heading-xxl-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated h1,
.gv-activated .gv-heading-xxl {
font-size: calc((var(--font-size-heading-xxl-min) * 1rem) + (var(--font-size-heading-xxl-max) - var(--font-size-heading-xxl-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-xxl-min) * 1rem) + (var(--font-size-heading-xxl-max) - var(--font-size-heading-xxl-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated h1,
.gv-activated .gv-heading-xxl {
font-size: calc(var(--font-size-heading-xxl-max) * 1rem);
}
}
.gv-activated h2,
.gv-activated .gv-heading-xl {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-xl);
}
@media screen and (max-width: 360px) {
.gv-activated h2,
.gv-activated .gv-heading-xl {
letter-spacing: calc(var(--letterspacing-heading-xl-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated h2,
.gv-activated .gv-heading-xl {
letter-spacing: calc((var(--letterspacing-heading-xl-min) * 1px) + (var(--letterspacing-heading-xl-max) - var(--letterspacing-heading-xl-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-xl-min) * 1px) + (var(--letterspacing-heading-xl-max) - var(--letterspacing-heading-xl-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated h2,
.gv-activated .gv-heading-xl {
letter-spacing: calc(var(--letterspacing-heading-xl-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated h2,
.gv-activated .gv-heading-xl {
font-size: calc(var(--font-size-heading-xl-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated h2,
.gv-activated .gv-heading-xl {
font-size: calc((var(--font-size-heading-xl-min) * 1rem) + (var(--font-size-heading-xl-max) - var(--font-size-heading-xl-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-xl-min) * 1rem) + (var(--font-size-heading-xl-max) - var(--font-size-heading-xl-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated h2,
.gv-activated .gv-heading-xl {
font-size: calc(var(--font-size-heading-xl-max) * 1rem);
}
}
.gv-activated h3,
.gv-activated .gv-heading-lg {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-lg);
}
@media screen and (max-width: 360px) {
.gv-activated h3,
.gv-activated .gv-heading-lg {
letter-spacing: calc(var(--letterspacing-heading-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated h3,
.gv-activated .gv-heading-lg {
letter-spacing: calc((var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated h3,
.gv-activated .gv-heading-lg {
letter-spacing: calc(var(--letterspacing-heading-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated h3,
.gv-activated .gv-heading-lg {
font-size: calc(var(--font-size-heading-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated h3,
.gv-activated .gv-heading-lg {
font-size: calc((var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated h3,
.gv-activated .gv-heading-lg {
font-size: calc(var(--font-size-heading-lg-max) * 1rem);
}
}
.gv-activated h4,
.gv-activated .gv-heading-md {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-md);
}
@media screen and (max-width: 360px) {
.gv-activated h4,
.gv-activated .gv-heading-md {
letter-spacing: calc(var(--letterspacing-heading-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated h4,
.gv-activated .gv-heading-md {
letter-spacing: calc((var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated h4,
.gv-activated .gv-heading-md {
letter-spacing: calc(var(--letterspacing-heading-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated h4,
.gv-activated .gv-heading-md {
font-size: calc(var(--font-size-heading-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated h4,
.gv-activated .gv-heading-md {
font-size: calc((var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated h4,
.gv-activated .gv-heading-md {
font-size: calc(var(--font-size-heading-md-max) * 1rem);
}
}
.gv-activated h5,
.gv-activated .gv-heading-sm {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-sm);
}
@media screen and (max-width: 360px) {
.gv-activated h5,
.gv-activated .gv-heading-sm {
letter-spacing: calc(var(--letterspacing-heading-sm-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated h5,
.gv-activated .gv-heading-sm {
letter-spacing: calc((var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated h5,
.gv-activated .gv-heading-sm {
letter-spacing: calc(var(--letterspacing-heading-sm-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated h5,
.gv-activated .gv-heading-sm {
font-size: calc(var(--font-size-heading-sm-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated h5,
.gv-activated .gv-heading-sm {
font-size: calc((var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated h5,
.gv-activated .gv-heading-sm {
font-size: calc(var(--font-size-heading-sm-max) * 1rem);
}
}
.gv-activated h6,
.gv-activated .gv-heading-xs {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-xs);
}
@media screen and (max-width: 360px) {
.gv-activated h6,
.gv-activated .gv-heading-xs {
letter-spacing: calc(var(--letterspacing-heading-xs-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated h6,
.gv-activated .gv-heading-xs {
letter-spacing: calc((var(--letterspacing-heading-xs-min) * 1px) + (var(--letterspacing-heading-xs-max) - var(--letterspacing-heading-xs-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-xs-min) * 1px) + (var(--letterspacing-heading-xs-max) - var(--letterspacing-heading-xs-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated h6,
.gv-activated .gv-heading-xs {
letter-spacing: calc(var(--letterspacing-heading-xs-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated h6,
.gv-activated .gv-heading-xs {
font-size: calc(var(--font-size-heading-xs-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated h6,
.gv-activated .gv-heading-xs {
font-size: calc((var(--font-size-heading-xs-min) * 1rem) + (var(--font-size-heading-xs-max) - var(--font-size-heading-xs-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-xs-min) * 1rem) + (var(--font-size-heading-xs-max) - var(--font-size-heading-xs-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated h6,
.gv-activated .gv-heading-xs {
font-size: calc(var(--font-size-heading-xs-max) * 1rem);
}
}
.gv-activated p {
margin: 0;
}
.gv-activated .gv-text-xl {
letter-spacing: 0;
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-text-xl {
font-size: calc(var(--font-size-text-xl-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-text-xl {
font-size: calc((var(--font-size-text-xl-min) * 1rem) + (var(--font-size-text-xl-max) - var(--font-size-text-xl-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-xl-min) * 1rem) + (var(--font-size-text-xl-max) - var(--font-size-text-xl-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-text-xl {
font-size: calc(var(--font-size-text-xl-max) * 1rem);
}
}
.gv-activated .gv-text-lg {
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-text-lg {
letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-text-lg {
letter-spacing: calc((var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-text-lg {
letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-text-lg {
font-size: calc(var(--font-size-text-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-text-lg {
font-size: calc((var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-text-lg {
font-size: calc(var(--font-size-text-lg-max) * 1rem);
}
}
.gv-activated,
.gv-activated .gv-text-md,
.gv-activated .gv-text-non-fluid {
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated,
.gv-activated .gv-text-md,
.gv-activated .gv-text-non-fluid {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated,
.gv-activated .gv-text-md,
.gv-activated .gv-text-non-fluid {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated,
.gv-activated .gv-text-md,
.gv-activated .gv-text-non-fluid {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated,
.gv-activated .gv-text-md,
.gv-activated .gv-text-non-fluid {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated,
.gv-activated .gv-text-md,
.gv-activated .gv-text-non-fluid {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated,
.gv-activated .gv-text-md,
.gv-activated .gv-text-non-fluid {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-text-sm {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-caption-lg {
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-caption-sm {
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated a {
color: var(--color-link);
font-weight: var(--font-weight-regular);
text-decoration: underline;
}
.gv-activated a:hover {
color: var(--color-link);
}
.gv-activated b,
.gv-activated strong,
.gv-activated .gv-text-bold {
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-text-icon {
display: inline-flex;
gap: 4px;
}
.gv-activated .gv-text-icon gv-icon {
flex-shrink: 0;
}
.gv-activated .gv-text-max {
max-width: var(--text-max-width);
}
/* Accessibility */
.gv-activated a.focus-visible,
.gv-activated button.focus-visible,
.gv-activated .gv-button.focus-visible,
.gv-activated input[type="checkbox"].focus-visible,
.gv-activated .gv-checkbox.focus-visible,
.gv-activated input[type="radio"].focus-visible,
.gv-activated .gv-radio.focus-visible,
.gv-activated .gv-autocomplete-panel .gv-option.focus-visible {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated a:focus-visible,
.gv-activated button:focus-visible,
.gv-activated .gv-button:focus-visible,
.gv-activated input[type="checkbox"]:focus-visible,
.gv-activated .gv-checkbox:focus-visible,
.gv-activated input[type="radio"]:focus-visible,
.gv-activated .gv-radio:focus-visible,
.gv-activated .gv-autocomplete-panel .gv-option:focus-visible {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-toggle input[type="checkbox"].focus-visible + .gv-toggle-slider {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-toggle input[type="checkbox"]:focus-visible + .gv-toggle-slider {
outline: 2px solid var(--color-state-focus-visible);
outline-offset: 2px;
}
.gv-activated .gv-autocomplete-panel .gv-option.focus-visible,
.gv-activated .gv-chip.focus-visible,
.gv-activated .gv-filter-bar .gv-bar button.focus-visible,
.gv-activated .gv-input button.focus-visible,
.gv-activated .gv-main-header .gv-nav-links a.focus-visible,
.gv-activated .gv-tab-list .gv-tab.focus-visible {
outline-offset: -2px;
}
.gv-activated .gv-autocomplete-panel .gv-option:focus-visible,
.gv-activated .gv-chip:focus-visible,
.gv-activated .gv-filter-bar .gv-bar button:focus-visible,
.gv-activated .gv-input button:focus-visible,
.gv-activated .gv-main-header .gv-nav-links a:focus-visible,
.gv-activated .gv-tab-list .gv-tab:focus-visible {
outline-offset: -2px;
}
.gv-activated .gv-button-toggle.focus-visible,
.gv-activated .gv-card.focus-visible,
.gv-activated .gv-shortcut.focus-visible,
.gv-activated .gv-accordion .gv-acc-trigger.focus-visible,
.gv-activated .gv-to-do .gv-trigger.focus-visible {
outline-offset: 0;
}
.gv-activated .gv-button-toggle:focus-visible,
.gv-activated .gv-card:focus-visible,
.gv-activated .gv-shortcut:focus-visible,
.gv-activated .gv-accordion .gv-acc-trigger:focus-visible,
.gv-activated .gv-to-do .gv-trigger:focus-visible {
outline-offset: 0;
}
.gv-activated .gv-accordion .gv-acc-trigger.focus-visible,
.gv-activated .gv-to-do .gv-trigger.focus-visible {
border-radius: var(--border-radius);
}
.gv-activated .gv-accordion .gv-acc-trigger:focus-visible,
.gv-activated .gv-to-do .gv-trigger:focus-visible {
border-radius: var(--border-radius);
}
/* Order flow */
.gv-activated .gv-order-product-button {
display: flex;
flex: 1;
flex-direction: column;
padding: var(--size-lg);
width: 100%;
/* Deprecated price info */
}
.gv-activated .gv-order-product-button .gv-price-container {
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
gap: var(--size-sm);
margin-bottom: var(--size-lg);
}
.gv-activated .gv-order-product-button .gv-price-container .gv-price-with-badge {
align-content: flex-start;
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--size-sm);
}
.gv-activated .gv-order-product-button .gv-price-container .gv-price-old {
color: var(--color-body-on-alternative);
text-decoration: line-through;
}
.gv-activated .gv-order-product-button .gv-price-container .gv-price {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
gap: var(--size-sm);
}
.gv-activated .gv-order-product-button .gv-price-container .gv-price-text {
white-space: nowrap;
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-md);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-order-product-button .gv-price-container .gv-price-text {
letter-spacing: calc(var(--letterspacing-heading-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-order-product-button .gv-price-container .gv-price-text {
letter-spacing: calc((var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-order-product-button .gv-price-container .gv-price-text {
letter-spacing: calc(var(--letterspacing-heading-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-order-product-button .gv-price-container .gv-price-text {
font-size: calc(var(--font-size-heading-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-order-product-button .gv-price-container .gv-price-text {
font-size: calc((var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-order-product-button .gv-price-container .gv-price-text {
font-size: calc(var(--font-size-heading-md-max) * 1rem);
}
}
.gv-activated .gv-order-product-button .gv-price-container .gv-period {
padding-bottom: var(--size-xs);
white-space: nowrap;
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-order-product-button .gv-price-container .gv-price-info {
color: var(--color-body-on-alternative);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-order-product-button .gv-price-container .gv-info-label {
color: var(--color-state-form-active);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-order-product-button .gv-price-container .gv-info-label {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-order-product-button .gv-price-container .gv-info-label {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-order-product-button .gv-price-container .gv-info-label {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-order-product-button .gv-price-container .gv-info-label {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-order-product-button .gv-price-container .gv-info-label {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-order-product-button .gv-price-container .gv-info-label {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-order-product-button .gv-price-container .gv-tooltip-container {
display: inline-block;
vertical-align: middle;
}
.gv-activated .gv-order-product-button .gv-price-container .gv-tooltip-container gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-order-product-button .gv-deal-badge {
align-items: center;
background: var(--color-signal-info-light);
border-radius: var(--border-radius);
display: flex;
gap: var(--size-sm);
justify-content: center;
margin-bottom: var(--size-sm);
padding: var(--size-xs) var(--size-sm);
width: 100%;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-order-product-button .gv-deal-badge gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-order-product-button .gv-button {
width: 100%;
}
.gv-activated .gv-order-product-button.gv-compact {
padding: var(--size-sm);
/* Form */
--button-padding-lr: var(--size-sm);
--form-element-height: 32px;
}
.gv-activated .gv-order-product-button.gv-compact .gv-price-container {
align-content: flex-start;
align-items: flex-start;
flex-flow: row wrap;
justify-content: space-between;
margin-bottom: var(--size-sm);
}
.gv-activated .gv-order-product-button.gv-compact .gv-price-container .gv-price {
align-items: center;
}
.gv-activated .gv-order-product-button.gv-compact .gv-price-container .gv-price-text {
font-weight: var(--font-weight-semibold);
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-order-product-button.gv-compact .gv-price-container .gv-price-old,
.gv-activated .gv-order-product-button.gv-compact .gv-price-container .gv-period {
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-order-product-button.gv-compact .gv-price-container .gv-period {
padding-bottom: 0;
}
.gv-activated .gv-order-product-button.gv-compact .gv-price-container .gv-price-toggle {
display: none;
}
.gv-activated .gv-order-product-button.gv-compact .gv-price-container .gv-price-info {
flex: 1 1 100%;
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
.gv-activated .gv-order-product-button.gv-compact .gv-price-container .gv-info-label {
font-size: calc(var(--font-size-caption-sm) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04px;
line-height: var(--line-height-body);
}
@media (max-width: 599px ) {
.gv-activated .gv-order-product-button.gv-compact .gv-price-container .gv-price-main {
flex: 1 1 100%;
position: relative;
}
.gv-activated .gv-order-product-button.gv-compact .gv-price-container .gv-price-main[\:has\(.gv-price-toggle\)] {
padding-right: var(--size-icon-md);
}
.gv-activated .gv-order-product-button.gv-compact .gv-price-container .gv-price-main:has(.gv-price-toggle) {
padding-right: var(--size-icon-md);
}
.gv-activated .gv-order-product-button.gv-compact .gv-price-container .gv-price-toggle {
align-items: center;
display: flex;
top: 0;
right: 0;
bottom: 0;
left: 0;
justify-content: flex-end;
position: absolute;
z-index: 1;
}
}
.gv-activated .gv-order-product-button.gv-compact[data-price-details="open"] .gv-price-container .gv-price-toggle gv-icon,
.gv-activated .gv-order-product-button.gv-compact.gv-price-details-open .gv-price-container .gv-price-toggle gv-icon {
transform: rotate(180deg);
}
@media (max-width: 599px ) {
.gv-activated .gv-order-product-button.gv-compact:not([data-price-details="open"]):not(.gv-price-details-open) .gv-price-container .gv-badge-discount,
.gv-activated .gv-order-product-button.gv-compact:not([data-price-details="open"]):not(.gv-price-details-open) .gv-price-container .gv-price-info {
display: none;
}
}
.gv-activated .gv-order-product-button .gv-order-product-price {
align-items: flex-end;
display: flex;
}
.gv-activated .gv-order-product-button .gv-order-product-price .gv-price {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-md);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-order-product-button .gv-order-product-price .gv-price {
letter-spacing: calc(var(--letterspacing-heading-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-order-product-button .gv-order-product-price .gv-price {
letter-spacing: calc((var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-order-product-button .gv-order-product-price .gv-price {
letter-spacing: calc(var(--letterspacing-heading-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-order-product-button .gv-order-product-price .gv-price {
font-size: calc(var(--font-size-heading-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-order-product-button .gv-order-product-price .gv-price {
font-size: calc((var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-order-product-button .gv-order-product-price .gv-price {
font-size: calc(var(--font-size-heading-md-max) * 1rem);
}
}
.gv-activated .gv-order-product-button .gv-order-product-price .gv-price-period {
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-order-product-button .gv-order-product-information {
color: var(--color-body-on-alternative);
display: flex;
flex-direction: column;
height: 54px;
margin-bottom: var(--size-lg);
margin-top: var(--size-sm);
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
/* Storefront */
.gv-activated {
--animations-duration: 0.65s;
--animations-duration-fast: 0.35s;
--animations-duration-slow: 0.9s;
--animations-duration-cinematic: 1.3s;
--animations-delay: 0s;
--animations-delay-short: 0.1s;
--animations-delay-medium: 0.25s;
--animations-delay-late: 0.4s;
--animations-ease: cubic-bezier(0.22, 1, 0.36, 1);
--animations-ease-smooth: ease-in-out;
--animations-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--animations-ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--animations-ease-clip: cubic-bezier(0.16, 1, 0.3, 1);
}
.gv-activated [data-gv-animate],
.gv-activated [data-gv-stagger] > * {
opacity: 0;
will-change: transform, opacity;
}
.gv-activated [data-gv-animate].gv-animated,
.gv-activated [data-gv-stagger] > *.gv-animated {
opacity: 1;
}
.gv-activated [data-gv-animate^="clip-"] {
opacity: 1;
}
.gv-activated [data-gv-animate^="clip-"].gv-animated {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.gv-activated [data-gv-animate],
.gv-activated [data-gv-stagger] > * {
opacity: 1 !important;
transform: none !important;
filter: none !important;
clip-path: none !important;
transition: none !important;
animation: none !important;
}
}
@keyframes gv-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes gv-fade-up {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes gv-fade-down {
from {
opacity: 0;
transform: translateY(-24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes gv-fade-left {
from {
opacity: 0;
transform: translateX(32px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes gv-fade-right {
from {
opacity: 0;
transform: translateX(-32px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes gv-scale-up {
from {
opacity: 0;
transform: scale(0.82);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes gv-clip-up {
from {
clip-path: inset(100% 0 0 0);
}
to {
clip-path: inset(0% 0 0 0);
}
}
@keyframes gv-clip-down {
from {
clip-path: inset(0 0 100% 0);
}
to {
clip-path: inset(0 0 0% 0);
}
}
@keyframes gv-clip-left {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0% 0 0);
}
}
@keyframes gv-clip-right {
from {
clip-path: inset(0 0 0 100%);
}
to {
clip-path: inset(0 0 0 0%);
}
}
@keyframes gv-blur-in {
from {
opacity: 0;
filter: blur(14px);
}
to {
opacity: 1;
filter: blur(0);
}
}
@keyframes gv-blur-up {
from {
opacity: 0;
filter: blur(10px);
transform: translateY(16px);
}
to {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
}
@keyframes gv-rise {
from {
opacity: 0;
transform: translateY(40px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.gv-activated [data-gv-animate].gv-animated {
animation-fill-mode: both;
animation-duration: var(--animations-duration);
animation-delay: var(--animations-delay);
animation-timing-function: var(--animations-ease);
}
.gv-activated [data-gv-animate="fade"].gv-animated {
animation-name: gv-fade;
}
.gv-activated [data-gv-animate="fade-up"].gv-animated {
animation-name: gv-fade-up;
}
.gv-activated [data-gv-animate="fade-down"].gv-animated {
animation-name: gv-fade-down;
}
.gv-activated [data-gv-animate="fade-left"].gv-animated {
animation-name: gv-fade-left;
}
.gv-activated [data-gv-animate="fade-right"].gv-animated {
animation-name: gv-fade-right;
}
.gv-activated [data-gv-animate="scale-up"].gv-animated {
animation-name: gv-scale-up;
}
.gv-activated [data-gv-animate="clip-up"].gv-animated {
animation-name: gv-clip-up;
animation-timing-function: var(--animations-ease-clip);
}
.gv-activated [data-gv-animate="clip-down"].gv-animated {
animation-name: gv-clip-down;
animation-timing-function: var(--animations-ease-clip);
}
.gv-activated [data-gv-animate="clip-left"].gv-animated {
animation-name: gv-clip-left;
animation-timing-function: var(--animations-ease-clip);
}
.gv-activated [data-gv-animate="clip-right"].gv-animated {
animation-name: gv-clip-right;
animation-timing-function: var(--animations-ease-clip);
}
.gv-activated [data-gv-animate="blur-in"].gv-animated {
animation-name: gv-blur-in;
}
.gv-activated [data-gv-animate="blur-up"].gv-animated {
animation-name: gv-blur-up;
}
.gv-activated [data-gv-animate="rise"].gv-animated {
animation-name: gv-rise;
animation-duration: var(--animations-duration);
}
.gv-activated [data-gv-stagger] > * {
animation-fill-mode: both;
animation-duration: var(--animations-duration);
animation-delay: var(--animations-delay);
animation-timing-function: var(--animations-ease);
}
.gv-activated [data-gv-stagger][data-gv-stagger-type="fade"] > *.gv-animated {
animation-name: gv-fade;
}
.gv-activated [data-gv-stagger][data-gv-stagger-type="fade-up"] > *.gv-animated {
animation-name: gv-fade-up;
}
.gv-activated [data-gv-stagger][data-gv-stagger-type="fade-down"] > *.gv-animated {
animation-name: gv-fade-down;
}
.gv-activated [data-gv-stagger][data-gv-stagger-type="fade-left"] > *.gv-animated {
animation-name: gv-fade-left;
}
.gv-activated [data-gv-stagger][data-gv-stagger-type="fade-right"] > *.gv-animated {
animation-name: gv-fade-right;
}
.gv-activated [data-gv-stagger][data-gv-stagger-type="scale-up"] > *.gv-animated {
animation-name: gv-scale-up;
}
.gv-activated [data-gv-stagger][data-gv-stagger-type="clip-up"] > *.gv-animated {
animation-name: gv-clip-up;
animation-timing-function: var(--animations-ease-clip);
}
.gv-activated [data-gv-stagger][data-gv-stagger-type="clip-left"] > *.gv-animated {
animation-name: gv-clip-left;
animation-timing-function: var(--animations-ease-clip);
}
.gv-activated [data-gv-stagger][data-gv-stagger-type="clip-right"] > *.gv-animated {
animation-name: gv-clip-right;
animation-timing-function: var(--animations-ease-clip);
}
.gv-activated [data-gv-stagger][data-gv-stagger-type="blur-in"] > *.gv-animated {
animation-name: gv-blur-in;
}
.gv-activated [data-gv-stagger][data-gv-stagger-type="blur-up"] > *.gv-animated {
animation-name: gv-blur-up;
}
.gv-activated [data-gv-stagger][data-gv-stagger-type="rise"] > *.gv-animated {
animation-name: gv-rise;
animation-duration: var(--animations-duration);
}
.gv-activated [data-gv-stagger]:not([data-gv-stagger-type]) > *.gv-animated {
animation-name: gv-fade-up;
}
.gv-activated [data-gv-parallax] {
will-change: transform;
}
.gv-activated .gv-storefront-section {
--bg-pattern-color: rgba(20, 20, 20, 0.15);
--bg-pattern-size-max: 3;
--bg-pattern-size-min: 1.5;
--bg-pattern-spacing-max: 48;
--bg-pattern-spacing-min: 24;
--font-family-heading: var(--font-heading-storefront);
--font-weight-heading: var(--font-weight-heading-storefront);
/* Font size rem values */
--sf-font-size-h1-max: 7.5;
/* 120px */
--sf-font-size-h1-min: 3.25;
/* 52px */
--sf-font-size-h2-max: 4.5;
/* 72px */
--sf-font-size-h2-min: 2.875;
/* 46px */
--sf-font-size-h3-max: 3;
/* 48px */
--sf-font-size-h3-min: 2.25;
/* 36px */
--sf-font-size-h4-max: 2.25;
/* 36px */
--sf-font-size-h4-min: 1.75;
/* 28px */
--sf-font-size-h5-max: 1.625;
/* 26px */
--sf-font-size-h5-min: 1.375;
/* 22px */
--sf-font-size-body-lg-max: 1.3125;
/* 21px */
--sf-font-size-body-lg-min: 1.125;
/* 18px */
--sf-font-size-body-md: 1;
/* 16px */
--sf-font-size-body-sm: 0.875;
/* 14px */
--sf-font-size-body-xs: 0.75;
/* 12px */
/* Line-heights */
--line-height-body: 1.5;
--line-height-body-lg: 1.35;
--line-height-heading: 1;
/* Letterspacing px values */
--sf-letterspacing-h1-max: -3;
--sf-letterspacing-h1-min: -0.4;
--sf-letterspacing-h2-max: -3;
--sf-letterspacing-h2-min: -0.4;
--sf-letterspacing-h3-max: -1;
--sf-letterspacing-h3-min: -0.3;
--sf-letterspacing-h4-max: -1;
--sf-letterspacing-h4-min: -0.2;
--sf-letterspacing-h5-max: -1;
--sf-letterspacing-h5-min: -0.2;
--sf-letterspacing-body-lg-max: 0;
--sf-letterspacing-body-lg-min: 0.4;
--sf-letterspacing-body-md: 0.08;
--sf-letterspacing-body-sm: 0.04;
--sf-letterspacing-body-xs: 0.05;
/* Max container width */
--sf-max-container-width: 1296px;
/* Text styles */
/* On a pseudo-element so it can layer over a surface background; isolation
* keeps the negative z-index in place. */
/* Marquee */
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section {
--section-px: calc(var(--section-x-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section {
--section-px: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section {
--section-px: calc(var(--section-x-max-value) * 1px);
}
}
.gv-activated .gv-storefront-section .gv-sf-heading-1 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-sf-heading-1 {
letter-spacing: calc(var(--sf-letterspacing-h1-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-sf-heading-1 {
letter-spacing: calc((var(--sf-letterspacing-h1-min) * 1px) + (var(--sf-letterspacing-h1-max) - var(--sf-letterspacing-h1-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h1-min) * 1px) + (var(--sf-letterspacing-h1-max) - var(--sf-letterspacing-h1-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-sf-heading-1 {
letter-spacing: calc(var(--sf-letterspacing-h1-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-sf-heading-1 {
font-size: calc(var(--sf-font-size-h1-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-sf-heading-1 {
font-size: calc((var(--sf-font-size-h1-min) * 1rem) + (var(--sf-font-size-h1-max) - var(--sf-font-size-h1-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h1-min) * 1rem) + (var(--sf-font-size-h1-max) - var(--sf-font-size-h1-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-sf-heading-1 {
font-size: calc(var(--sf-font-size-h1-max) * 1rem);
}
}
.gv-activated .gv-storefront-section .gv-sf-heading-2 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-sf-heading-2 {
letter-spacing: calc(var(--sf-letterspacing-h2-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-sf-heading-2 {
letter-spacing: calc((var(--sf-letterspacing-h2-min) * 1px) + (var(--sf-letterspacing-h2-max) - var(--sf-letterspacing-h2-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h2-min) * 1px) + (var(--sf-letterspacing-h2-max) - var(--sf-letterspacing-h2-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-sf-heading-2 {
letter-spacing: calc(var(--sf-letterspacing-h2-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-sf-heading-2 {
font-size: calc(var(--sf-font-size-h2-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-sf-heading-2 {
font-size: calc((var(--sf-font-size-h2-min) * 1rem) + (var(--sf-font-size-h2-max) - var(--sf-font-size-h2-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h2-min) * 1rem) + (var(--sf-font-size-h2-max) - var(--sf-font-size-h2-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-sf-heading-2 {
font-size: calc(var(--sf-font-size-h2-max) * 1rem);
}
}
.gv-activated .gv-storefront-section .gv-sf-heading-3 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-sf-heading-3 {
letter-spacing: calc(var(--sf-letterspacing-h3-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-sf-heading-3 {
letter-spacing: calc((var(--sf-letterspacing-h3-min) * 1px) + (var(--sf-letterspacing-h3-max) - var(--sf-letterspacing-h3-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h3-min) * 1px) + (var(--sf-letterspacing-h3-max) - var(--sf-letterspacing-h3-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-sf-heading-3 {
letter-spacing: calc(var(--sf-letterspacing-h3-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-sf-heading-3 {
font-size: calc(var(--sf-font-size-h3-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-sf-heading-3 {
font-size: calc((var(--sf-font-size-h3-min) * 1rem) + (var(--sf-font-size-h3-max) - var(--sf-font-size-h3-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h3-min) * 1rem) + (var(--sf-font-size-h3-max) - var(--sf-font-size-h3-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-sf-heading-3 {
font-size: calc(var(--sf-font-size-h3-max) * 1rem);
}
}
.gv-activated .gv-storefront-section .gv-sf-heading-4 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-sf-heading-4 {
letter-spacing: calc(var(--sf-letterspacing-h4-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-sf-heading-4 {
letter-spacing: calc((var(--sf-letterspacing-h4-min) * 1px) + (var(--sf-letterspacing-h4-max) - var(--sf-letterspacing-h4-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h4-min) * 1px) + (var(--sf-letterspacing-h4-max) - var(--sf-letterspacing-h4-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-sf-heading-4 {
letter-spacing: calc(var(--sf-letterspacing-h4-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-sf-heading-4 {
font-size: calc(var(--sf-font-size-h4-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-sf-heading-4 {
font-size: calc((var(--sf-font-size-h4-min) * 1rem) + (var(--sf-font-size-h4-max) - var(--sf-font-size-h4-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h4-min) * 1rem) + (var(--sf-font-size-h4-max) - var(--sf-font-size-h4-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-sf-heading-4 {
font-size: calc(var(--sf-font-size-h4-max) * 1rem);
}
}
.gv-activated .gv-storefront-section .gv-sf-heading-5 {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-sf-heading-5 {
letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-sf-heading-5 {
letter-spacing: calc((var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-sf-heading-5 {
letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-sf-heading-5 {
font-size: calc(var(--sf-font-size-h5-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-sf-heading-5 {
font-size: calc((var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-sf-heading-5 {
font-size: calc(var(--sf-font-size-h5-max) * 1rem);
}
}
.gv-activated .gv-storefront-section .gv-sf-body-lg {
font-weight: var(--font-weight-medium);
line-height: var(--line-height-body-lg);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-sf-body-lg {
letter-spacing: calc(var(--sf-letterspacing-body-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-sf-body-lg {
letter-spacing: calc((var(--sf-letterspacing-body-lg-min) * 1px) + (var(--sf-letterspacing-body-lg-max) - var(--sf-letterspacing-body-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-body-lg-min) * 1px) + (var(--sf-letterspacing-body-lg-max) - var(--sf-letterspacing-body-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-sf-body-lg {
letter-spacing: calc(var(--sf-letterspacing-body-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-sf-body-lg {
font-size: calc(var(--sf-font-size-body-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-sf-body-lg {
font-size: calc((var(--sf-font-size-body-lg-min) * 1rem) + (var(--sf-font-size-body-lg-max) - var(--sf-font-size-body-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-body-lg-min) * 1rem) + (var(--sf-font-size-body-lg-max) - var(--sf-font-size-body-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-sf-body-lg {
font-size: calc(var(--sf-font-size-body-lg-max) * 1rem);
}
}
.gv-activated .gv-storefront-section,
.gv-activated .gv-storefront-section .gv-sf-body-md {
font-size: calc(var(--sf-font-size-body-md) * 1rem);
line-height: var(--line-height-body);
letter-spacing: calc(var(--sf-letterspacing-body-md) * 1px);
}
.gv-activated .gv-storefront-section .gv-sf-body-sm {
font-size: calc(var(--sf-font-size-body-sm) * 1rem);
letter-spacing: calc(var(--sf-letterspacing-body-sm) * 1px);
line-height: var(--line-height-body);
}
.gv-activated .gv-storefront-section .gv-sf-body-xs {
font-size: calc(var(--sf-font-size-body-xs) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: calc(var(--sf-letterspacing-body-xs) * 1px);
line-height: var(--line-height-body);
}
.gv-activated .gv-storefront-section .gv-section-content {
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
max-width: 1536px;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-section-content {
gap: calc(var(--section-gap-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-section-content {
gap: calc((var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080));
gap: calc(calc(var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-section-content {
gap: calc(var(--section-gap-max-value) * 1px);
}
}
.gv-activated .gv-storefront-section.gv-bg-pattern,
.gv-activated .gv-storefront-section .gv-bg-pattern {
isolation: isolate;
position: relative;
}
.gv-activated .gv-storefront-section.gv-bg-pattern::before,
.gv-activated .gv-storefront-section .gv-bg-pattern::before {
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
position: absolute;
z-index: -1;
--bg-pattern-size: calc(var(--bg-pattern-size-min) * 1px);
--bg-pattern-spacing: calc(var(--bg-pattern-spacing-min) * 1px);
background-repeat: repeat;
background-image: radial-gradient(var(--bg-pattern-color) var(--bg-pattern-size), transparent var(--bg-pattern-size));
background-size: var(--bg-pattern-spacing) var(--bg-pattern-spacing);
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section.gv-bg-pattern::before,
.gv-activated .gv-storefront-section .gv-bg-pattern::before {
--bg-pattern-size: calc(calc(var(--bg-pattern-size-min) * 1px) + (var(--bg-pattern-size-max) - var(--bg-pattern-size-min)) * ((100vw - 360px) / 1080));
--bg-pattern-spacing: calc(calc(var(--bg-pattern-spacing-min) * 1px) + (var(--bg-pattern-spacing-max) - var(--bg-pattern-spacing-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section.gv-bg-pattern::before,
.gv-activated .gv-storefront-section .gv-bg-pattern::before {
--bg-pattern-size: calc(var(--bg-pattern-size-max) * 1px);
--bg-pattern-spacing: calc(var(--bg-pattern-spacing-max) * 1px);
}
}
.gv-activated .gv-storefront-section .gv-marquee {
display: grid;
grid-gap: var(--size-lg);
gap: var(--size-lg);
}
.gv-activated .gv-storefront-section .gv-marquee .gv-track {
animation: gv-marquee 40s linear infinite;
display: flex;
gap: var(--size-lg);
width: max-content;
will-change: transform;
}
.gv-activated .gv-storefront-section .gv-marquee .gv-lane {
overflow: hidden;
}
.gv-activated .gv-storefront-section .gv-marquee .gv-lane.gv-lane-slow .gv-track {
animation-duration: 60s;
}
.gv-activated .gv-storefront-section .gv-marquee .gv-lane.gv-lane-fast .gv-track {
animation-duration: 20s;
}
.gv-activated .gv-storefront-section .gv-marquee .gv-lane.gv-lane-reverse .gv-track {
animation-direction: reverse;
}
.gv-activated .gv-storefront-section .gv-marquee .gv-lane:hover .gv-track {
animation-play-state: paused;
}
.gv-activated .gv-storefront-section .gv-marquee .gv-set {
display: flex;
gap: var(--size-lg);
}
@keyframes gv-marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.gv-activated .gv-storefront-section .gv-marquee .gv-track {
animation: none;
}
}
.gv-activated [class*="gv-bento-"] {
display: grid;
grid-gap: var(--size-lg);
gap: var(--size-lg);
}
@media (min-width: 600px ) and (max-width: 1023px ) {
.gv-activated [class*="gv-bento-"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gv-activated .gv-bento-5a > *:last-child,
.gv-activated .gv-bento-5c > *:first-child {
grid-column: auto / span 2;
}
}
@media (min-width: 1024px ) {
.gv-activated [class*="gv-bento-"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gv-activated .gv-bento-4a > *:first-child,
.gv-activated .gv-bento-4a > *:last-child {
grid-column: auto / span 3;
}
.gv-activated .gv-bento-5a > *:first-child {
grid-column: auto / span 2;
}
.gv-activated .gv-bento-5a > *:last-child {
grid-column: auto / span 3;
}
.gv-activated .gv-bento-5b > *:nth-child(2) {
grid-column: auto / span 3;
}
.gv-activated .gv-bento-5b > *:nth-child(3) {
grid-column: auto / span 2;
}
.gv-activated .gv-bento-5c > *:first-child {
grid-column: auto / span 3;
}
.gv-activated .gv-bento-5c > *:last-child {
grid-column: auto / span 2;
}
}
.gv-activated .gv-section-body > *:not(:last-child) {
margin-bottom: var(--size-lg);
}
.gv-activated .gv-section-body .gv-content {
display: flex;
flex-flow: nowrap column;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-section-body .gv-content {
column-gap: calc(var(--section-gap-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-section-body .gv-content {
column-gap: calc((var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080));
column-gap: calc(calc(var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-section-body .gv-content {
column-gap: calc(var(--section-gap-max-value) * 1px);
}
}
.gv-activated .gv-section-body .gv-content[\:has\(.gv-text\)] {
row-gap: var(--size-sm);
}
.gv-activated .gv-section-body .gv-content:has(.gv-text) {
row-gap: var(--size-sm);
}
.gv-activated .gv-section-body .gv-title {
flex: 1;
}
.gv-activated .gv-section-body .gv-text,
.gv-activated .gv-section-body .gv-button-only {
flex: 1;
min-width: calc(50% - (var(--size-lg) / 2));
}
.gv-activated .gv-section-body .gv-text > *:not(:last-child),
.gv-activated .gv-section-body .gv-button-only > *:not(:last-child) {
margin-bottom: var(--size-lg);
}
.gv-activated .gv-section-body .gv-button-only {
display: flex;
flex-direction: column;
width: 100%;
}
.gv-activated .gv-section-body .gv-description > *:not(:last-child) {
margin-bottom: var(--size-md);
}
.gv-activated .gv-section-body.gv-section-body-vertical {
text-align: center;
}
.gv-activated .gv-section-body.gv-section-body-vertical .gv-content {
align-items: center;
flex-direction: column;
}
.gv-activated .gv-section-body.gv-section-body-vertical .gv-button-only {
align-items: center;
padding-top: var(--size-lg);
}
.gv-activated .gv-section-body.gv-section-body-vertical .gv-button-group {
justify-content: center;
}
@media (min-width: 768px ) {
.gv-activated .gv-section-body .gv-content {
flex-direction: row;
}
}
@media (max-width: 767px ) {
.gv-activated .gv-section-body .gv-button-only {
padding-top: var(--size-lg);
}
}
.gv-activated .gv-section-card {
background: var(--section-card-bg);
border: 1px solid var(--section-card-border);
border-radius: var(--outer-container-radius);
color: var(--section-card-text);
display: flex;
flex-direction: column;
max-width: 100%;
overflow: hidden;
position: relative;
text-decoration: none;
font-size: calc(var(--sf-font-size-body-md) * 1rem);
line-height: var(--line-height-body);
letter-spacing: calc(var(--sf-letterspacing-body-md) * 1px);
}
.gv-activated .gv-section-card:hover {
color: var(--section-card-text);
}
.gv-activated .gv-section-card .gv-card-content {
flex-grow: 1;
padding: 34px var(--size-lg) var(--size-lg) var(--size-lg);
}
.gv-activated .gv-section-card .gv-card-content > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated .gv-section-card .gv-link-title {
align-items: flex-start;
display: flex;
gap: var(--size-lg);
justify-content: space-between;
}
.gv-activated .gv-section-card .gv-link-title gv-icon {
flex-shrink: 0;
}
.gv-activated .gv-section-card .gv-card-title {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-section-card .gv-card-title {
letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-section-card .gv-card-title {
letter-spacing: calc((var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-section-card .gv-card-title {
letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-section-card .gv-card-title {
font-size: calc(var(--sf-font-size-h5-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-section-card .gv-card-title {
font-size: calc((var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-section-card .gv-card-title {
font-size: calc(var(--sf-font-size-h5-max) * 1rem);
}
}
.gv-activated .gv-section-card .gv-card-image {
position: relative;
width: 100%;
}
.gv-activated .gv-section-card .gv-card-image img {
display: block;
height: auto;
width: 100%;
}
.gv-activated a.gv-section-card .gv-card-title {
padding-right: var(--size-xl);
position: relative;
}
.gv-activated a.gv-section-card .gv-card-title::after {
background-color: var(--section-card-text);
content: "";
display: block;
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/arrow-right.86e8d179.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/arrow-right.86e8d179.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: var(--size-icon-md);
right: 0;
position: absolute;
top: 0;
width: var(--size-icon-md);
}
.gv-activated .gv-carousel-card {
--card-height: 495px;
--card-padding: var(--size-sm);
--card-width: 290px;
background: var(--color-surface-dim);
border-radius: var(--outer-container-radius);
display: block;
height: var(--card-height);
overflow: clip;
position: relative;
text-decoration: none;
width: var(--card-width);
}
.gv-activated .gv-carousel-card img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.gv-activated .gv-carousel-card .gv-card-button {
background: var(--color-surface-bright);
border-radius: var(--inner-container-radius);
bottom: var(--card-padding);
display: flex;
gap: var(--size-xs);
justify-content: space-between;
left: var(--card-padding);
padding: var(--size-lg);
position: absolute;
right: var(--card-padding);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-carousel-card .gv-card-button {
letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-carousel-card .gv-card-button {
letter-spacing: calc((var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-carousel-card .gv-card-button {
letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-carousel-card .gv-card-button {
font-size: calc(var(--sf-font-size-h5-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-carousel-card .gv-card-button {
font-size: calc((var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-carousel-card .gv-card-button {
font-size: calc(var(--sf-font-size-h5-max) * 1rem);
}
}
.gv-activated .gv-carousel-card .gv-card-button gv-icon {
flex-shrink: 0;
}
.gv-activated .gv-storefront-section .gv-table-product {
--table-slider-x-max: var(--section-x-max-value);
--table-slider-x-min: var(--section-x-min-value);
}
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-title {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-title {
letter-spacing: calc(var(--sf-letterspacing-h4-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-title {
letter-spacing: calc((var(--sf-letterspacing-h4-min) * 1px) + (var(--sf-letterspacing-h4-max) - var(--sf-letterspacing-h4-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h4-min) * 1px) + (var(--sf-letterspacing-h4-max) - var(--sf-letterspacing-h4-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-title {
letter-spacing: calc(var(--sf-letterspacing-h4-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-title {
font-size: calc(var(--sf-font-size-h4-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-title {
font-size: calc((var(--sf-font-size-h4-min) * 1rem) + (var(--sf-font-size-h4-max) - var(--sf-font-size-h4-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h4-min) * 1rem) + (var(--sf-font-size-h4-max) - var(--sf-font-size-h4-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-title {
font-size: calc(var(--sf-font-size-h4-max) * 1rem);
}
}
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-subtitle {
font-weight: var(--font-weight-regular);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-body-lg);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-subtitle {
letter-spacing: calc(var(--sf-letterspacing-body-lg-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-subtitle {
letter-spacing: calc((var(--sf-letterspacing-body-lg-min) * 1px) + (var(--sf-letterspacing-body-lg-max) - var(--sf-letterspacing-body-lg-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-body-lg-min) * 1px) + (var(--sf-letterspacing-body-lg-max) - var(--sf-letterspacing-body-lg-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-subtitle {
letter-spacing: calc(var(--sf-letterspacing-body-lg-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-subtitle {
font-size: calc(var(--sf-font-size-body-lg-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-subtitle {
font-size: calc((var(--sf-font-size-body-lg-min) * 1rem) + (var(--sf-font-size-body-lg-max) - var(--sf-font-size-body-lg-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-body-lg-min) * 1rem) + (var(--sf-font-size-body-lg-max) - var(--sf-font-size-body-lg-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-table-product .gv-table-header .gv-subtitle {
font-size: calc(var(--sf-font-size-body-lg-max) * 1rem);
}
}
.gv-activated .gv-storefront-section .gv-table-product .gv-section-title {
font-size: calc(var(--sf-font-size-body-md) * 1rem);
line-height: var(--line-height-body);
letter-spacing: calc(var(--sf-letterspacing-body-md) * 1px);
}
.gv-activated .gv-section-footer a {
text-decoration: none;
}
.gv-activated .gv-section-footer .gv-section-footer-top {
background: var(--color-section-bar-bg);
color: var(--color-section-bar-on);
padding-bottom: var(--size-lg);
padding-top: var(--size-lg);
text-align: center;
font-size: calc(var(--sf-font-size-body-md) * 1rem);
line-height: var(--line-height-body);
letter-spacing: calc(var(--sf-letterspacing-body-md) * 1px);
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-section-footer .gv-section-footer-content {
display: flex;
flex-direction: row;
gap: var(--size-lg);
padding-bottom: var(--size-xl);
padding-top: var(--size-xl);
}
.gv-activated .gv-section-footer .gv-section-footer-content .gv-logo {
flex: 2 1 0;
}
.gv-activated .gv-section-footer .gv-section-footer-content .gv-links {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
}
.gv-activated .gv-section-footer .gv-section-footer-content .gv-links button.gv-title {
display: flex;
padding-right: var(--size-xl);
position: relative;
text-align: left;
width: 100%;
}
.gv-activated .gv-section-footer .gv-section-footer-content .gv-links button.gv-title,
.gv-activated .gv-section-footer .gv-section-footer-content .gv-links span.gv-title {
font-size: calc(var(--sf-font-size-body-md) * 1rem);
line-height: var(--line-height-body);
letter-spacing: calc(var(--sf-letterspacing-body-md) * 1px);
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-section-footer .gv-section-footer-content .gv-links ul {
display: flex;
flex-direction: column;
gap: var(--size-sm);
margin-top: var(--size-md);
font-size: calc(var(--sf-font-size-body-sm) * 1rem);
letter-spacing: calc(var(--sf-letterspacing-body-sm) * 1px);
line-height: var(--line-height-body);
}
@media (max-width: 1023px ) {
.gv-activated .gv-section-footer .gv-section-footer-content {
flex-direction: column;
}
.gv-activated .gv-section-footer .gv-section-footer-content .gv-links {
border-top: 1px solid var(--color-border-alt);
padding-top: var(--size-md);
}
.gv-activated .gv-section-footer .gv-section-footer-content .gv-links button.gv-title::after {
background-color: var(--color-on-surface-contrast);
content: "";
display: block;
-webkit-mask: url(//mail.group-cdn.one/v51.1.15/media/chevron-down.966453af.svg) no-repeat 50% 50%;
mask: url(//mail.group-cdn.one/v51.1.15/media/chevron-down.966453af.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
height: var(--size-icon-md);
right: var(--size-sm);
position: absolute;
top: 0;
width: var(--size-icon-md);
}
.gv-activated .gv-section-footer .gv-section-footer-content .gv-links .gv-title {
display: none;
}
.gv-activated .gv-section-footer .gv-section-footer-content .gv-links ul {
display: none;
}
.gv-activated .gv-section-footer .gv-section-footer-content .gv-links.gv-expanded button.gv-title::after {
transform: rotate(180deg);
}
.gv-activated .gv-section-footer .gv-section-footer-content .gv-links.gv-expanded ul {
display: flex;
}
}
@media (min-width: 1024px ) {
.gv-activated .gv-section-footer .gv-section-footer-content .gv-links button.gv-title {
display: none;
}
}
.gv-activated .gv-section-footer .gv-section-footer-bottom {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-bottom: var(--size-xl);
font-size: calc(var(--sf-font-size-body-sm) * 1rem);
letter-spacing: calc(var(--sf-letterspacing-body-sm) * 1px);
line-height: var(--line-height-body);
}
.gv-activated .gv-section-footer .gv-section-footer-bottom .gv-section-footer-social {
display: flex;
gap: var(--size-sm);
}
.gv-activated .gv-section-footer .gv-section-footer-bottom .gv-section-footer-social a {
align-items: center;
border: 1px solid var(--color-on-fixed-white);
border-radius: 72px;
display: flex;
height: 36px;
justify-content: center;
width: 36px;
}
.gv-activated .gv-section-footer .gv-section-footer-bottom .gv-section-footer-social a gv-icon {
height: var(--size-icon-sm);
width: var(--size-icon-sm);
}
.gv-activated .gv-section-footer .gv-section-footer-bottom ul {
display: flex;
gap: var(--size-md);
opacity: 0.8;
}
.gv-activated .gv-section-footer .gv-section-footer-bottom span {
opacity: 0.8;
}
@media (max-width: 1023px ) {
.gv-activated .gv-section-footer .gv-section-footer-bottom {
align-items: flex-start;
flex-direction: column;
gap: var(--size-lg);
}
.gv-activated .gv-section-footer .gv-section-footer-bottom ul {
flex-direction: column;
}
}
.gv-activated .gv-section-full-width-image {
align-items: center;
display: flex;
flex-direction: column;
position: relative;
}
.gv-activated .gv-section-full-width-image .gv-bg-image {
border-radius: var(--outer-container-radius);
height: 100%;
max-width: var(--sf-max-container-width);
overflow: hidden;
width: 100%;
}
.gv-activated .gv-section-full-width-image .gv-bg-image img {
display: block;
height: 100%;
object-fit: none;
object-position: center center;
width: 100%;
}
.gv-activated .gv-section-full-width-image .gv-section-content {
align-items: center;
position: relative;
width: 100%;
}
.gv-activated .gv-section-full-width-image.gv-text-inside .gv-bg-image {
position: absolute;
z-index: 0;
}
.gv-activated .gv-section-full-width-image.gv-text-inside .gv-section-content {
color: var(--color-on-fixed-white);
max-width: var(--sf-max-container-width);
}
@media (max-width: 767px ) {
.gv-activated .gv-section-full-width-image.gv-text-inside .gv-bg-image img {
display: none;
}
}
.gv-activated .gv-section-full-width-image.gv-text-outside {
flex-direction: column-reverse;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-section-full-width-image.gv-text-outside {
gap: calc(var(--section-gap-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-section-full-width-image.gv-text-outside {
gap: calc((var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080));
gap: calc(calc(var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-section-full-width-image.gv-text-outside {
gap: calc(var(--section-gap-max-value) * 1px);
}
}
.gv-activated .gv-section-full-width-image.gv-text-outside .gv-bg-image img {
object-fit: cover;
}
.gv-activated .gv-section-footer-language .gv-language-title {
display: block;
margin-bottom: var(--size-md);
margin-top: var(--size-lg);
font-size: calc(var(--sf-font-size-body-md) * 1rem);
line-height: var(--line-height-body);
letter-spacing: calc(var(--sf-letterspacing-body-md) * 1px);
font-weight: var(--font-weight-semibold);
}
.gv-activated .gv-section-footer-language .gv-language-switcher {
align-items: center;
border: 1px solid var(--color-on-surface-contrast);
border-radius: var(--border-radius);
display: flex;
gap: var(--size-sm);
max-width: 100%;
padding: var(--size-sm);
font-size: calc(var(--sf-font-size-body-sm) * 1rem);
letter-spacing: calc(var(--sf-letterspacing-body-sm) * 1px);
line-height: var(--line-height-body);
}
.gv-activated .gv-section-footer-language .gv-language-switcher gv-flag {
min-width: var(--size-icon-md);
}
.gv-activated .gv-section-footer-language .gv-language-switcher span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 1023px ) {
.gv-activated .gv-section-footer-language .gv-language-title {
border-top: 1px solid var(--color-border-alt);
padding-top: var(--size-md);
}
}
.gv-activated .gv-languages {
display: grid;
grid-row-gap: var(--size-xs);
row-gap: var(--size-xs);
-webkit-column-gap: var(--size-lg);
grid-column-gap: var(--size-lg);
column-gap: var(--size-lg);
margin: var(--size-md) 0;
}
.gv-activated .gv-languages .gv-language {
align-items: center;
border-radius: var(--border-radius);
cursor: pointer;
display: flex;
gap: var(--size-xs);
padding: var(--size-xs);
}
.gv-activated .gv-languages .gv-language label {
display: block;
}
.gv-activated .gv-languages .gv-language input[type="radio"] {
opacity: 0;
position: absolute;
}
.gv-activated .gv-languages .gv-language[\:has\(input\:checked\)] {
background: var(--color-state-active);
}
.gv-activated .gv-languages .gv-language:has(input:checked) {
background: var(--color-state-active);
}
@media (max-width: 1023px ) {
.gv-activated .gv-languages {
max-height: 60vh;
overflow-y: scroll;
}
}
@media (min-width: 600px ) {
.gv-activated .gv-languages {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.gv-activated .gv-storefront-section.gv-section-header {
--header-body-max-width: 750px;
display: flex;
flex-direction: column;
position: relative;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section.gv-section-header {
gap: calc(var(--section-gap-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section.gv-section-header {
gap: calc((var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080));
gap: calc(calc(var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section.gv-section-header {
gap: calc(var(--section-gap-max-value) * 1px);
}
}
.gv-activated .gv-storefront-section.gv-section-header .gv-bg-image {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-bg-image img {
display: block;
height: 100%;
object-fit: none;
object-position: center;
width: 100%;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-section-content {
align-items: center;
position: relative;
width: 100%;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--size-lg);
max-width: var(--header-body-max-width);
text-align: center;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-text {
display: flex;
flex-direction: column;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-text {
gap: 8px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-text {
gap: calc(8px + 16 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-text {
gap: 24px;
}
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container > *:not(:last-child) {
margin-bottom: var(--size-xs);
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text {
letter-spacing: calc(var(--sf-letterspacing-h4-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text {
letter-spacing: calc((var(--sf-letterspacing-h4-min) * 1px) + (var(--sf-letterspacing-h4-max) - var(--sf-letterspacing-h4-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h4-min) * 1px) + (var(--sf-letterspacing-h4-max) - var(--sf-letterspacing-h4-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text {
letter-spacing: calc(var(--sf-letterspacing-h4-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text {
font-size: calc(var(--sf-font-size-h4-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text {
font-size: calc((var(--sf-font-size-h4-min) * 1rem) + (var(--sf-font-size-h4-max) - var(--sf-font-size-h4-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h4-min) * 1rem) + (var(--sf-font-size-h4-max) - var(--sf-font-size-h4-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text {
font-size: calc(var(--sf-font-size-h4-max) * 1rem);
}
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period {
letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period {
letter-spacing: calc((var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period {
letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period {
font-size: calc(var(--sf-font-size-h5-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period {
font-size: calc((var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period {
font-size: calc(var(--sf-font-size-h5-max) * 1rem);
}
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-info {
font-size: calc(var(--sf-font-size-body-xs) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: calc(var(--sf-letterspacing-body-xs) * 1px);
line-height: var(--line-height-body);
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-gallery {
--gallery-bleed: 40%;
--span-wide: 2;
--span-tall: 1;
--ratio-wide: 16 / 9;
--ratio-tall: 9 / 16;
--item-aspect-ratio: var(--ratio-wide);
--item-column-span: var(--span-wide);
overflow-x: clip;
width: 100%;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-gallery .gv-grid {
align-items: end;
gap: var(--size-lg);
grid-auto-rows: auto;
grid-template-columns: repeat(7, minmax(0, 1fr));
margin-left: calc(var(--gallery-bleed) * -1);
margin-right: calc(var(--gallery-bleed) * -1);
position: relative;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-gallery .gv-grid:last-child {
align-items: start;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-gallery .gv-item {
aspect-ratio: var(--item-aspect-ratio);
background: var(--color-surface-bright);
grid-column: span var(--item-column-span);
width: 100%;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-gallery .gv-item.gv-tall {
--item-aspect-ratio: var(--ratio-tall);
--item-column-span: var(--span-tall);
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-gallery .gv-item img {
height: 100%;
object-fit: cover;
object-position: top center;
width: 100%;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-domain-checker {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--size-md);
max-width: var(--header-body-max-width);
width: 100%;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-domain-checker form {
margin: 0;
width: 100%;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-tlds {
text-align: center;
width: 100%;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-tlds > *:not(:last-child) {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-storefront-section.gv-section-header .gv-tld-card {
background-color: var(--color-surface-bright);
border: var(--size-border) solid var(--color-border-alt);
border-radius: var(--border-radius);
padding: var(--size-lg) var(--size-lg) var(--size-xl);
text-align: left;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-tld-card > *:not(:last-child) {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-storefront-section.gv-section-header .gv-tld-card .gv-card-content > *:not(:last-child) {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-storefront-section.gv-section-header .gv-tld-card .gv-card-content .gv-price-info {
color: var(--color-body-on-alternative);
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview {
align-items: center;
display: grid;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview {
padding-left: calc(var(--section-x-min-value) * 1px);
padding-right: calc(var(--section-x-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview {
padding-left: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
padding-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
padding-right: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
padding-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview {
padding-left: calc(var(--section-x-max-value) * 1px);
padding-right: calc(var(--section-x-max-value) * 1px);
}
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-header-body {
align-items: flex-start;
text-align: left;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-header-body {
padding-right: calc(var(--section-gap-min-value) * 1px);
padding-top: calc(var(--section-y-min-value) * 1px);
padding-bottom: calc(var(--section-y-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-header-body {
padding-right: calc((var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080));
padding-right: calc(calc(var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080));
padding-top: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
padding-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
padding-bottom: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
padding-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-header-body {
padding-right: calc(var(--section-gap-max-value) * 1px);
padding-top: calc(var(--section-y-max-value) * 1px);
padding-bottom: calc(var(--section-y-max-value) * 1px);
}
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-image img {
display: block;
}
.gv-activated .gv-storefront-section.gv-section-header.gv-big-title {
--header-body-max-width: 875px;
--section-padding-y: 168px;
}
.gv-activated .gv-storefront-section.gv-section-header.gv-big-title .gv-section-content {
padding-bottom: var(--section-padding-y);
padding-top: var(--size-xl);
}
.gv-activated .gv-storefront-section.gv-section-header.gv-big-title .gv-header-body {
padding-top: calc(var(--section-padding-y) - var(--size-xl));
}
.gv-activated .gv-storefront-section.gv-section-header.gv-big-title .gv-domain-checker {
max-width: 500px;
}
.gv-activated .gv-storefront-section.gv-section-header.gv-big-title .gv-domain-checker + .gv-header-body {
padding-top: 0;
}
@media (max-width: 1023px ) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-header-body {
padding-right: 0;
}
}
@media (min-width: 600px ) and (max-width: 1023px ) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-gallery {
--gallery-bleed: 24%;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-image img {
margin: 0 auto;
}
}
@media (min-width: 1024px ) {
.gv-activated .gv-storefront-section.gv-section-header .gv-header-gallery {
--gallery-bleed: 4%;
}
.gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-right: 0;
}
}
.gv-activated .gv-storefront-section .gv-quote-card {
background: var(--color-surface-dim);
border-radius: var(--outer-container-radius);
display: grid;
grid-gap: var(--size-md);
gap: var(--size-md);
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
height: 524px;
overflow: clip;
padding: var(--size-md);
position: relative;
text-decoration: none;
width: 100%;
}
.gv-activated .gv-storefront-section .gv-quote-card .gv-bg-image {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
}
.gv-activated .gv-storefront-section .gv-quote-card .gv-bg-image img {
display: block;
height: 100%;
width: 100%;
}
.gv-activated .gv-storefront-section .gv-quote-card .gv-card-content {
background-color: var(--color-surface-bright);
border-radius: var(--inner-container-radius);
color: var(--color-body-on-default);
display: flex;
flex-direction: column;
gap: var(--size-md);
justify-content: space-between;
min-width: 0;
padding: var(--size-lg);
position: relative;
}
.gv-activated .gv-storefront-section .gv-quote-card .gv-card-content .gv-quote {
overflow: clip;
padding-bottom: 2px;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
white-space: normal;
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-quote-card .gv-card-content .gv-quote {
letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-quote-card .gv-card-content .gv-quote {
letter-spacing: calc((var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-quote-card .gv-card-content .gv-quote {
letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-quote-card .gv-card-content .gv-quote {
font-size: calc(var(--sf-font-size-h5-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-quote-card .gv-card-content .gv-quote {
font-size: calc((var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-quote-card .gv-card-content .gv-quote {
font-size: calc(var(--sf-font-size-h5-max) * 1rem);
}
}
.gv-activated .gv-storefront-section .gv-quote-card .gv-card-content .gv-details {
align-items: center;
display: flex;
gap: var(--size-md);
}
.gv-activated .gv-storefront-section .gv-quote-card .gv-card-content .gv-image {
border: 1px solid var(--color-border);
border-radius: 50%;
height: var(--size-xl);
object-fit: cover;
object-position: center;
overflow: clip;
width: var(--size-xl);
}
.gv-activated .gv-storefront-section .gv-quote-card .gv-card-content .gv-name {
font-size: calc(var(--sf-font-size-body-md) * 1rem);
line-height: var(--line-height-body);
letter-spacing: calc(var(--sf-letterspacing-body-md) * 1px);
font-weight: var(--font-weight-semibold);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (min-width: 600px ) {
.gv-activated .gv-storefront-section .gv-quote-card {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
.gv-activated .gv-storefront-section .gv-quote-card .gv-card-content .gv-quote {
-webkit-line-clamp: 14;
}
}
.gv-activated .gv-storefront-section .gv-carousel .gv-quote-card {
width: calc(100cqw - (var(--section-px) * 2));
}
@container (min-width: 1536px) {
.gv-activated .gv-storefront-section .gv-carousel .gv-quote-card {
width: calc(100cqw - (100cqw - var(--size-container-max)) - (var(--section-px) * 2));
}
}
.gv-activated .gv-section-steps .gv-section-main {
counter-reset: counter;
}
.gv-activated .gv-section-steps .gv-numbered-title {
counter-increment: counter;
}
.gv-activated .gv-section-steps .gv-numbered-title .gv-title::before {
content: counter(counter) ". ";
}
.gv-activated .gv-section-socialproof.gv-section-socialproof-small {
align-items: center;
display: flex;
height: 100px;
justify-content: center;
overflow: hidden;
}
.gv-activated .gv-section-socialproof.gv-section-socialproof-small .gv-section-socialproof-widget {
max-width: 1296px;
text-align: center;
width: 100%;
}
.gv-activated .gv-section-socialproof .gv-item {
border: 1px solid var(--color-border-alt);
border-radius: var(--border-radius);
padding: var(--size-lg);
width: 300px;
line-height: var(--line-height-body);
}
.gv-activated .gv-section-socialproof .gv-item > *:not(:last-child) {
margin-bottom: var(--size-md);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-section-socialproof .gv-item {
letter-spacing: calc(var(--letterspacing-text-md-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-section-socialproof .gv-item {
letter-spacing: calc((var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-section-socialproof .gv-item {
letter-spacing: calc(var(--letterspacing-text-md-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-section-socialproof .gv-item {
font-size: calc(var(--font-size-text-md-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-section-socialproof .gv-item {
font-size: calc((var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-section-socialproof .gv-item {
font-size: calc(var(--font-size-text-md-max) * 1rem);
}
}
.gv-activated .gv-section-socialproof .gv-item .gv-item-meta {
color: var(--color-body-on-alternative);
display: flex;
justify-content: space-between;
font-size: calc(var(--font-size-caption-lg) * 1rem);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.048px;
line-height: var(--line-height-body);
}
.gv-activated .gv-section-socialproof .gv-item .gv-item-meta .gv-meta-user {
display: flex;
flex-direction: column;
}
.gv-activated .gv-section-socialproof .gv-item .gv-item-meta .gv-meta-user .gv-meta-score gv-icon {
height: 16px;
width: 16px;
}
.gv-activated .gv-section-socialproof .gv-item p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: normal;
}
.gv-activated .gv-storefront-section .gv-card-item {
align-items: flex-start;
background-color: var(--color-surface-dim);
border: solid 1px var(--color-border-alt);
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
position: relative;
padding: var(--size-lg);
}
.gv-activated .gv-storefront-section .gv-card-item > *:not(:last-child) {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-storefront-section .gv-card-item .gv-number {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-card-item .gv-number {
letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-card-item .gv-number {
letter-spacing: calc((var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-card-item .gv-number {
letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-card-item .gv-number {
font-size: calc(var(--sf-font-size-h5-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-card-item .gv-number {
font-size: calc((var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-card-item .gv-number {
font-size: calc(var(--sf-font-size-h5-max) * 1rem);
}
}
.gv-activated .gv-storefront-section .gv-card-item .gv-title {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-card-item .gv-title {
letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-card-item .gv-title {
letter-spacing: calc((var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-card-item .gv-title {
letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-card-item .gv-title {
font-size: calc(var(--sf-font-size-h5-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-card-item .gv-title {
font-size: calc((var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-card-item .gv-title {
font-size: calc(var(--sf-font-size-h5-max) * 1rem);
}
}
.gv-activated .gv-storefront-section .gv-card-item .gv-text {
font-size: calc(var(--sf-font-size-body-sm) * 1rem);
letter-spacing: calc(var(--sf-letterspacing-body-sm) * 1px);
line-height: var(--line-height-body);
}
.gv-activated .gv-storefront-section .gv-card-item .gv-numbered-title .gv-title {
display: flex;
gap: var(--size-xs);
}
.gv-activated .gv-storefront-section .gv-card-item .gv-card-content {
margin-bottom: var(--size-xl);
}
.gv-activated .gv-storefront-section .gv-card-item .gv-card-footer {
margin-top: auto;
}
.gv-activated .gv-storefront-section .gv-section-controls {
--color-control-bg: var(--color-surface-bright);
--color-control-border: var(--section-control-bg);
--color-control-text: var(--color-body-on-default);
border: none;
display: flex;
flex-wrap: nowrap;
gap: var(--size-sm);
max-width: 1536px;
padding: 0;
width: 100%;
font-size: calc(var(--sf-font-size-body-xs) * 1rem);
font-weight: var(--font-weight-medium);
letter-spacing: calc(var(--sf-letterspacing-body-xs) * 1px);
line-height: var(--line-height-body);
}
.gv-activated .gv-storefront-section .gv-section-controls .gv-control {
background: var(--color-control-bg);
border: 1px solid var(--color-control-border);
border-radius: var(--border-radius);
color: var(--color-control-text);
flex-shrink: 0;
padding: var(--size-xs) var(--size-sm);
}
.gv-activated .gv-storefront-section .gv-section-controls .gv-control.gv-active,
.gv-activated .gv-storefront-section .gv-section-controls .gv-control.gv-tab-active {
--color-control-bg: var(--section-control-bg);
--color-control-text: var(--section-control-active-text);
}
.gv-activated .gv-storefront-section .gv-carousel {
gap: var(--size-lg);
}
.gv-activated .gv-storefront-section .gv-carousel-slider.gv-scrollable {
scroll-padding-left: var(--section-px);
}
.gv-activated .gv-storefront-section .gv-carousel-slider.gv-scrollable::after,
.gv-activated .gv-storefront-section .gv-carousel-slider.gv-scrollable::before {
content: "";
flex: 0 0 var(--section-px);
}
.gv-activated .gv-storefront-section .gv-carousel-nav {
gap: var(--size-md);
max-width: 1536px;
width: 100%;
}
.gv-activated .gv-storefront-section .gv-carousel-nav .gv-carousel-button {
--color-button-border: var(--color-body-on-default);
border: 1px solid var(--color-button-border);
border-radius: 50%;
height: var(--size-xl);
width: var(--size-xl);
}
.gv-activated .gv-storefront-section .gv-carousel-nav .gv-carousel-button:disabled {
--color-button-border: var(--color-border-form-disabled);
}
@media (min-width: 1024px ) {
.gv-activated .gv-storefront-section .gv-carousel-nav {
justify-content: flex-end;
}
}
.gv-activated .gv-storefront-section .gv-scroll-row {
display: flex;
flex-direction: row;
max-width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-align: start;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
width: 100%;
}
.gv-activated .gv-storefront-section .gv-scroll-row .gv-control {
scroll-snap-align: start;
}
.gv-activated .gv-storefront-section .gv-scroll-row.gv-wide-center,
.gv-activated .gv-storefront-section .gv-scroll-row.gv-wide-left {
scroll-padding-left: var(--section-px);
}
.gv-activated .gv-storefront-section .gv-scroll-row.gv-wide-center::after,
.gv-activated .gv-storefront-section .gv-scroll-row.gv-wide-left::after,
.gv-activated .gv-storefront-section .gv-scroll-row.gv-wide-center::before,
.gv-activated .gv-storefront-section .gv-scroll-row.gv-wide-left::before {
content: "";
flex: 0 0 var(--section-px);
}
.gv-activated .gv-storefront-section .gv-scroll-row.gv-wide-center .gv-section-controls {
margin-left: auto;
margin-right: auto;
width: max-content;
}
@media screen and (min-width: 1536px) {
.gv-activated .gv-storefront-section .gv-scroll-row.gv-wide-left {
scroll-padding-left: calc(((100% - var(--size-container-max)) / 2) + var(--section-px));
}
.gv-activated .gv-storefront-section .gv-scroll-row.gv-wide-left::after,
.gv-activated .gv-storefront-section .gv-scroll-row.gv-wide-left::before {
flex-basis: calc(((100% - var(--size-container-max)) / 2) + var(--section-px));
}
}
@container (min-width: 1536px) {
.gv-activated .gv-storefront-section .gv-carousel-slider.gv-scrollable {
scroll-padding-left: calc(((100% - var(--size-container-max)) / 2) + var(--section-px));
}
.gv-activated .gv-storefront-section .gv-carousel-slider.gv-scrollable::after,
.gv-activated .gv-storefront-section .gv-carousel-slider.gv-scrollable::before {
flex-basis: calc(((100% - var(--size-container-max)) / 2) + var(--section-px));
}
}
.gv-activated .gv-section-steps .gv-card-item {
background-color: var(--color-section-steps-bg);
border-color: var(--color-section-steps-border);
color: var(--color-section-steps-on);
}
.gv-activated .gv-storefront-section.gv-section-splitview .gv-section-content {
gap: var(--size-xl);
}
.gv-activated .gv-storefront-section .gv-splitview {
display: grid;
grid-row-gap: var(--size-xl);
row-gap: var(--size-xl);
}
.gv-activated .gv-storefront-section .gv-splitview > * {
min-width: 0;
}
.gv-activated .gv-storefront-section .gv-splitview .gv-content {
display: flex;
flex-direction: column;
gap: var(--size-lg);
}
.gv-activated .gv-storefront-section .gv-splitview .gv-text {
display: flex;
flex-direction: column;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-storefront-section .gv-splitview .gv-text {
gap: 8px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-storefront-section .gv-splitview .gv-text {
gap: calc(8px + 16 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-storefront-section .gv-splitview .gv-text {
gap: 24px;
}
}
.gv-activated .gv-storefront-section .gv-splitview .gv-image {
border-radius: var(--outer-container-radius);
overflow: hidden;
position: relative;
}
.gv-activated .gv-storefront-section .gv-splitview .gv-image img {
height: auto;
max-height: none;
max-width: none;
width: auto;
}
@media (max-width: 1023px ) {
.gv-activated .gv-storefront-section .gv-splitview .gv-content {
padding: 0;
}
.gv-activated .gv-storefront-section .gv-splitview .gv-image {
order: 2;
}
.gv-activated .gv-storefront-section .gv-splitview .gv-image img {
left: 50%;
position: relative;
transform: translate(-50%, 0);
}
}
@media (min-width: 1024px ) {
.gv-activated .gv-storefront-section.gv-section-splitview .gv-section-content {
padding-left: 0;
padding-right: 0;
}
.gv-activated .gv-storefront-section .gv-splitview {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gv-activated .gv-storefront-section .gv-splitview .gv-image {
min-height: 500px;
}
.gv-activated .gv-storefront-section .gv-splitview .gv-image img {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
}
.gv-activated .gv-storefront-section.gv-section-tabs .gv-panel-content {
display: flex;
flex-direction: column;
gap: var(--size-lg);
}
.gv-activated .gv-storefront-section.gv-section-tabs .gv-panel-text {
font-size: calc(var(--sf-font-size-body-sm) * 1rem);
letter-spacing: calc(var(--sf-letterspacing-body-sm) * 1px);
line-height: var(--line-height-body);
}
.gv-activated .gv-storefront-section.gv-section-tabs .gv-panel-text > *:not(:last-child) {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-storefront-section.gv-section-tabs .gv-button-toggle-group {
flex-direction: column;
}
.gv-activated .gv-storefront-section.gv-section-tabs .gv-button-toggle-group .gv-button-toggle {
--color-toggle-button-text: var(--color-section-body-on-default);
border-radius: var(--outer-container-radius);
justify-content: space-between;
height: auto;
text-align: left;
padding: var(--size-md);
}
.gv-activated .gv-storefront-section.gv-section-tabs .gv-button-toggle-group .gv-button-toggle.gv-active {
--color-toggle-button-bg: var(--section-tab-card-bg);
--color-toggle-button-text: var(--color-body-on-default);
}
.gv-activated .gv-storefront-section.gv-section-tabs .gv-button-toggle-group .gv-button-toggle:hover {
--color-toggle-button-text: var(--color-body-on-default);
}
@media (min-width: 1024px ) {
.gv-activated .gv-storefront-section.gv-section-tabs .gv-section-content {
padding-left: 0;
padding-right: 0;
}
}
.gv-activated .gv-storefront-section.gv-section-tabs-splitview .gv-section-main {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--size-xl);
width: 100%;
}
.gv-activated .gv-storefront-section.gv-section-tabs-splitview .gv-section-main .gv-tab-panel {
max-width: 1536px;
width: 100%;
}
@media (min-width: 1024px ) {
.gv-activated .gv-storefront-section.gv-section-tabs-splitview .gv-section-main .gv-splitview {
padding-left: 0;
padding-right: 0;
}
}
.gv-activated .gv-section-templates .gv-section-main {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--size-lg);
width: 100%;
}
.gv-activated .gv-section-templates .gv-templates {
--row-h: 295px;
--col-w: 78px;
--span-wide: 5;
--span-tall: 2;
--item-column-span: var(--span-wide);
}
.gv-activated .gv-section-templates .gv-templates .gv-grid {
grid-template-rows: repeat(2, var(--row-h));
grid-auto-flow: column dense;
grid-auto-columns: var(--col-w);
gap: var(--size-lg);
width: max-content;
}
.gv-activated .gv-section-templates .gv-templates .gv-grid .gv-item {
border-radius: var(--outer-container-radius);
grid-column: span var(--item-column-span);
height: 100%;
min-width: 0;
overflow: clip;
}
.gv-activated .gv-section-templates .gv-templates .gv-grid .gv-item.gv-tall {
--item-column-span: var(--span-tall);
}
.gv-activated .gv-section-templates .gv-templates .gv-grid .gv-item img {
height: 100%;
object-fit: cover;
object-position: top center;
width: 100%;
}
.gv-activated .gv-section-usp .gv-usp {
display: flex;
flex-direction: column;
}
.gv-activated .gv-section-usp .gv-usp > *:not(:last-child) {
margin-bottom: var(--size-sm);
}
.gv-activated .gv-section-usp .gv-usp .gv-title {
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-section-usp .gv-usp .gv-title {
letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-section-usp .gv-usp .gv-title {
letter-spacing: calc((var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-section-usp .gv-usp .gv-title {
letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-section-usp .gv-usp .gv-title {
font-size: calc(var(--sf-font-size-h5-min) * 1rem);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-section-usp .gv-usp .gv-title {
font-size: calc((var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-section-usp .gv-usp .gv-title {
font-size: calc(var(--sf-font-size-h5-max) * 1rem);
}
}
.gv-activated .gv-section-usp .gv-usp .gv-text {
font-size: calc(var(--sf-font-size-body-sm) * 1rem);
letter-spacing: calc(var(--sf-letterspacing-body-sm) * 1px);
line-height: var(--line-height-body);
}
.gv-activated .gv-grid-usp-product {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "body" "table" "content";
}
.gv-activated .gv-grid-usp-product .gv-section-body {
grid-area: body;
}
.gv-activated .gv-grid-usp-product .gv-section-body .gv-content {
flex-direction: column;
}
.gv-activated .gv-grid-usp-product .gv-table-features {
grid-area: table;
}
.gv-activated .gv-grid-usp-product .gv-section-main {
grid-area: content;
}
@media (min-width: 1024px ) {
.gv-activated .gv-grid-usp-product {
grid-template-columns: 1fr minmax(312px, 400px);
grid-template-areas: "body table" "content table";
}
}
/* Utility classes */
@keyframes gv-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes gv-fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes gv-slide-in-from-left {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes gv-slide-out-from-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes gv-slide-in-from-right {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes gv-slide-out-from-right {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@keyframes gv-pulse {
50% {
opacity: 0.4;
}
}
@keyframes gv-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.gv-activated {
/* Add animation overrides here to tone down animations to avoid vestibular motion triggers. */
}
.gv-activated .gv-overlay,
.gv-activated .gv-sidedrawer,
.gv-activated .gv-sidedrawer .gv-side-content {
animation-duration: 0.001ms !important;
}
}
/* Utility mixins */
/* figma:sync:start:surfaces */
/* Generated by `yarn figma:storefront` — do not edit by hand. */
/* Call these from the matching .gv-surface-* rule. */
/* figma:sync:end:surfaces */
.gv-activated {
/* Accessibility */
/* Background */
/* Border */
/* Flexbox */
/* Flex layout */
/* Gap */
/* Full page */
/* Overflow */
/* Position */
/* Object */
/* Aspect ratio */
/* Shadow */
/* Sizing */
/* Text */
/* Spacing */
/* Fluid default */
/* Fluid storefront sections */
/* Fluid default */
/* Fluid storefront sections */
/* Filters */
/* Breakpoint classes */
/* Border */
/* Flexbox and grid */
/* Hide */
/* Spacing */
/* Text */
}
.gv-activated .gv-sr-only,
.gv-activated .gv-skip-link:not(:focus):not(:active) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.gv-activated .gv-skip-link:active,
.gv-activated .gv-skip-link:focus {
align-items: center;
background: var(--color-surface-bright);
border: 2px solid var(--color-state-focus-visible);
border-radius: var(--button-radius);
color: var(--color-body-on-default);
display: inline-flex;
font-weight: var(--font-weight-semibold);
height: var(--form-element-height);
left: 0;
margin: var(--size-md);
outline-offset: -2px;
padding: var(--button-padding-tb) var(--button-padding-lr);
position: absolute;
text-decoration: none;
top: 0;
z-index: 999999;
font-size: calc(var(--font-size-text-sm) * 1rem);
letter-spacing: 0.035px;
line-height: var(--line-height-body);
}
.gv-activated .gv-surface-bright,
.gv-activated.gv-surface-bright {
background-color: var(--color-surface-bright);
--bg-pattern-color: var(--bg-pattern-color-on-light);
--color-section-body-on-alternative: var(--color-body-on-alternative);
--color-section-body-on-default: var(--color-body-on-default);
--color-section-body-on-disabled: var(--color-body-on-disabled);
--color-section-logo-mark: var(--color-section-logo-light-mark);
--color-section-logo-text: var(--color-section-logo-light-text);
--color-section-stats-bg: var(--color-section-bar-bg);
--color-section-stats-on: var(--color-section-bar-on);
--color-section-steps-bg: var(--color-surface-dim);
--color-section-steps-border: var(--color-border-alt);
--color-section-steps-on: var(--color-on-fixed-black);
--color-section-tab-bg: var(--color-section-tab-bg-default);
--color-section-tab-on-active: var(--color-on-fixed-white);
--color-section-usp-bg: var(--color-section-usp-bg-default);
--color-section-usp-on: var(--color-section-usp-on-default);
}
.gv-activated .gv-surface-dim,
.gv-activated.gv-surface-dim {
background-color: var(--color-surface-dim);
--bg-pattern-color: var(--bg-pattern-color-on-light);
--color-section-body-on-alternative: var(--color-body-on-alternative);
--color-section-body-on-default: var(--color-body-on-default);
--color-section-body-on-disabled: var(--color-body-on-disabled);
--color-section-logo-mark: var(--color-section-logo-light-mark);
--color-section-logo-text: var(--color-section-logo-light-text);
--color-section-stats-bg: var(--color-section-bar-bg);
--color-section-stats-on: var(--color-section-bar-on);
--color-section-steps-bg: var(--color-surface-dim);
--color-section-steps-border: var(--color-border-alt);
--color-section-steps-on: var(--color-on-fixed-black);
--color-section-tab-bg: var(--color-section-tab-bg-default);
--color-section-tab-on-active: var(--color-on-fixed-white);
--color-section-usp-bg: var(--color-section-usp-bg-default);
--color-section-usp-on: var(--color-section-usp-on-default);
}
.gv-activated .gv-surface-muted {
background-color: var(--color-surface-muted);
}
.gv-activated .gv-surface-form {
background-color: var(--color-surface-form);
}
.gv-activated .gv-surface-highlight {
background-color: var(--color-surface-highlight);
}
.gv-activated .gv-surface-accent {
background-color: var(--color-surface-accent);
--bg-pattern-color: var(--bg-pattern-color-on-medium);
--color-section-body-on-alternative: var(--color-body-on-alternative);
--color-section-body-on-default: var(--color-on-surface-accent);
--color-section-body-on-disabled: var(--color-body-on-disabled);
--color-section-logo-mark: var(--color-section-logo-light-mark);
--color-section-logo-text: var(--color-section-logo-light-text);
--color-section-stats-bg: var(--color-section-usp-bg-default);
--color-section-stats-on: var(--color-section-usp-on-default);
--color-section-steps-bg: var(--color-section-steps-bg-accent);
--color-section-steps-border: var(--color-section-steps-border-accent);
--color-section-steps-on: var(--color-section-steps-on-accent);
--color-section-tab-bg: var(--color-section-tab-bg-default);
--color-section-tab-on-active: var(--color-on-fixed-white);
--color-section-usp-bg: var(--color-section-usp-bg-default);
--color-section-usp-on: var(--color-section-usp-on-default);
color: var(--color-section-body-on-default);
--color-link: var(--color-section-body-on-default);
}
.gv-activated .gv-surface-accent .gv-mode-color {
fill: var(--color-section-body-on-default);
}
.gv-activated .gv-surface-accent-light {
background-color: var(--color-surface-accent-light);
--bg-pattern-color: var(--bg-pattern-color-on-light);
--color-section-body-on-alternative: var(--color-body-on-alternative);
--color-section-body-on-default: var(--color-on-surface-accent-light);
--color-section-body-on-disabled: var(--color-body-on-disabled);
--color-section-logo-mark: var(--color-section-logo-light-mark);
--color-section-logo-text: var(--color-section-logo-light-text);
--color-section-stats-bg: var(--color-section-usp-bg-default);
--color-section-stats-on: var(--color-section-usp-on-default);
--color-section-steps-bg: var(--color-section-steps-bg-accent-light);
--color-section-steps-border: var(--color-section-steps-border-accent-light);
--color-section-steps-on: var(--color-section-steps-on-accent-light);
--color-section-tab-bg: var(--color-section-tab-bg-default);
--color-section-tab-on-active: var(--color-on-fixed-white);
--color-section-usp-bg: var(--color-section-usp-bg-default);
--color-section-usp-on: var(--color-section-usp-on-default);
color: var(--color-section-body-on-default);
--color-link: var(--color-section-body-on-default);
}
.gv-activated .gv-surface-accent-light .gv-mode-color {
fill: var(--color-section-body-on-default);
}
.gv-activated .gv-surface-core {
background-color: var(--color-surface-core);
--bg-pattern-color: var(--bg-pattern-color-on-medium);
--color-section-body-on-alternative: var(--color-body-on-alternative);
--color-section-body-on-default: var(--color-on-surface-core);
--color-section-body-on-disabled: var(--color-body-on-disabled);
--color-section-logo-mark: var(--color-section-logo-light-mark);
--color-section-logo-text: var(--color-section-logo-light-text);
--color-section-stats-bg: var(--color-section-bar-bg);
--color-section-stats-on: var(--color-section-bar-on);
--color-section-steps-bg: var(--color-section-steps-bg-core);
--color-section-steps-border: var(--color-section-steps-border-core);
--color-section-steps-on: var(--color-section-steps-on-core);
--color-section-tab-bg: var(--color-section-tab-bg-default);
--color-section-tab-on-active: var(--color-on-fixed-white);
--color-section-usp-bg: var(--color-section-usp-bg-default);
--color-section-usp-on: var(--color-section-usp-on-default);
color: var(--color-section-body-on-default);
--color-link: var(--color-section-body-on-default);
}
.gv-activated .gv-surface-core .gv-mode-color {
fill: var(--color-section-body-on-default);
}
.gv-activated .gv-surface-core-light {
background-color: var(--color-surface-core-light);
--bg-pattern-color: var(--bg-pattern-color-on-light);
--color-section-body-on-alternative: var(--color-body-on-alternative);
--color-section-body-on-default: var(--color-on-surface-core-light);
--color-section-body-on-disabled: var(--color-body-on-disabled);
--color-section-logo-mark: var(--color-section-logo-light-mark);
--color-section-logo-text: var(--color-section-logo-light-text);
--color-section-stats-bg: var(--color-section-bar-bg);
--color-section-stats-on: var(--color-section-bar-on);
--color-section-steps-bg: var(--color-section-steps-bg-core-light);
--color-section-steps-border: var(--color-section-steps-border-core-light);
--color-section-steps-on: var(--color-section-steps-on-core-light);
--color-section-tab-bg: var(--color-section-tab-bg-default);
--color-section-tab-on-active: var(--color-on-fixed-white);
--color-section-usp-bg: var(--color-section-usp-bg-default);
--color-section-usp-on: var(--color-section-usp-on-default);
color: var(--color-section-body-on-default);
--color-link: var(--color-section-body-on-default);
}
.gv-activated .gv-surface-core-light .gv-mode-color {
fill: var(--color-section-body-on-default);
}
.gv-activated .gv-surface-contrast {
background-color: var(--color-surface-contrast);
--bg-pattern-color: var(--bg-pattern-color-on-dark);
--color-section-body-on-alternative: var(--color-body-on-inverted);
--color-section-body-on-default: var(--color-on-surface-contrast);
--color-section-body-on-disabled: rgba(255, 255, 255, 0.5);
--color-section-logo-mark: var(--color-section-logo-dark-mark);
--color-section-logo-text: var(--color-section-logo-dark-text);
--color-section-stats-bg: var(--color-section-usp-bg-default);
--color-section-stats-on: var(--color-section-usp-on-default);
--color-section-steps-bg: var(--color-section-steps-bg-contrast);
--color-section-steps-border: var(--color-section-steps-border-contrast);
--color-section-steps-on: var(--color-section-steps-on-contrast);
--color-section-tab-bg: var(--color-section-tab-bg-emphasized);
--color-section-tab-on-active: var(--color-on-fixed-black);
--color-section-usp-bg: var(--color-section-usp-bg-default);
--color-section-usp-on: var(--color-section-usp-on-default);
color: var(--color-section-body-on-default);
--color-link: var(--color-section-body-on-default);
}
.gv-activated .gv-surface-contrast .gv-mode-color {
fill: var(--color-section-body-on-default);
}
.gv-activated .gv-surface-gradient {
background-color: var(--color-surface-gradient);
--bg-pattern-color: var(--bg-pattern-color-on-dark);
--color-section-body-on-alternative: var(--color-body-on-inverted);
--color-section-body-on-default: var(--color-on-surface-gradient);
--color-section-body-on-disabled: rgba(255, 255, 255, 0.5);
--color-section-logo-mark: var(--color-section-logo-dark-mark);
--color-section-logo-text: var(--color-section-logo-dark-text);
--color-section-stats-bg: var(--color-section-usp-bg-default);
--color-section-stats-on: var(--color-section-usp-on-default);
--color-section-steps-bg: var(--color-section-steps-bg-gradient);
--color-section-steps-border: var(--color-section-steps-border-gradient);
--color-section-steps-on: var(--color-section-steps-on-gradient);
--color-section-tab-bg: var(--color-section-tab-bg-emphasized);
--color-section-tab-on-active: var(--color-on-fixed-black);
--color-section-usp-bg: var(--color-section-usp-bg-default);
--color-section-usp-on: var(--color-section-usp-on-default);
color: var(--color-section-body-on-default);
--color-link: var(--color-section-body-on-default);
/* Anchors are inverted on purpose: the layers outgrow the section. */
background-image: radial-gradient(closest-side ellipse at center, color-mix(in srgb, var(--color-section-gradient-1) 80%, transparent) 0%, color-mix(in srgb, var(--color-section-gradient-1) 80%, transparent) 35%, transparent), radial-gradient(closest-side ellipse at center, color-mix(in srgb, var(--color-section-gradient-3) 80%, transparent) 0%, color-mix(in srgb, var(--color-section-gradient-3) 80%, transparent) 35%, transparent), radial-gradient(closest-side ellipse at center, color-mix(in srgb, var(--color-section-gradient-2) 80%, transparent) 0%, color-mix(in srgb, var(--color-section-gradient-2) 80%, transparent) 35%, transparent);
background-size: 113.7% 428px, 124% 719px, 115.4% 830px;
background-position: left 58% top 79px, left 58% top 132px, left 58% top 0;
background-repeat: no-repeat;
}
.gv-activated .gv-surface-gradient .gv-mode-color {
fill: var(--color-section-body-on-default);
}
.gv-activated .gv-surface-gradient.gv-surface-gradient-top {
background-image: radial-gradient(closest-side ellipse at center, color-mix(in srgb, var(--color-section-gradient-1) 70%, transparent) 0%, color-mix(in srgb, var(--color-section-gradient-1) 70%, transparent) 35%, transparent), radial-gradient(closest-side ellipse at center, color-mix(in srgb, var(--color-section-gradient-3) 70%, transparent) 0%, color-mix(in srgb, var(--color-section-gradient-3) 70%, transparent) 35%, transparent), radial-gradient(closest-side ellipse at center, color-mix(in srgb, var(--color-section-gradient-2) 70%, transparent) 0%, color-mix(in srgb, var(--color-section-gradient-2) 70%, transparent) 35%, transparent);
background-size: 113.7% 428px, 124% 719px, 115.4% 830px;
background-position: left 58% bottom 79px, left 58% bottom 132px, left 58% bottom 0;
background-repeat: no-repeat;
}
.gv-activated .gv-surface-interactive:hover {
background-color: var(--color-state-hover);
}
.gv-activated .gv-surface-interactive:active {
background-color: var(--color-state-active);
}
.gv-activated .gv-surface-interactive-dim:hover {
background-color: var(--color-state-hover-dim);
}
.gv-activated .gv-surface-interactive-dim:active {
background-color: var(--color-state-active-dim);
}
.gv-activated .gv-border-form {
border: 1px solid var(--color-border-form);
}
.gv-activated .gv-flex {
display: flex;
}
.gv-activated .gv-inline-flex {
display: inline-flex;
}
.gv-activated .gv-flex-1 {
flex: 1 1 0;
}
.gv-activated .gv-flex-auto {
flex: 1 1 auto;
}
.gv-activated .gv-flex-none {
flex: none;
}
.gv-activated .gv-flex-shrink {
flex-shrink: 1;
}
.gv-activated .gv-flex-shrink-0 {
flex-shrink: 0;
}
.gv-activated .gv-flex-grow {
flex-grow: 1;
}
.gv-activated .gv-flex-grow-0 {
flex-grow: 0;
}
.gv-activated .gv-flex-wrap {
flex-wrap: wrap;
}
.gv-activated .gv-flex-nowrap {
flex-wrap: nowrap;
}
.gv-activated .gv-flex-row-xs {
display: flex;
flex-direction: row;
gap: 4px;
}
.gv-activated .gv-flex-row-sm {
display: flex;
flex-direction: row;
gap: 8px;
}
.gv-activated .gv-flex-row-md {
display: flex;
flex-direction: row;
gap: 16px;
}
.gv-activated .gv-flex-row-lg {
display: flex;
flex-direction: row;
gap: 24px;
}
.gv-activated .gv-flex-column-xs {
display: flex;
flex-direction: column;
gap: 4px;
}
.gv-activated .gv-flex-column-sm {
display: flex;
flex-direction: column;
gap: 8px;
}
.gv-activated .gv-flex-column-md {
display: flex;
flex-direction: column;
gap: 16px;
}
.gv-activated .gv-flex-column-lg {
display: flex;
flex-direction: column;
gap: 24px;
}
@media screen and (max-width: 360px) {
.gv-activated .gv-gap-fluid {
gap: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-gap-fluid {
gap: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-gap-fluid {
gap: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-gap-section {
gap: calc(var(--section-gap-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-gap-section {
gap: calc((var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080));
gap: calc(calc(var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-gap-section {
gap: calc(var(--section-gap-max-value) * 1px);
}
}
.gv-activated.gv-full-page,
.gv-activated .gv-full-page {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
.gv-activated .gv-overflow-auto {
overflow: auto;
}
.gv-activated .gv-overflow-x-auto {
overflow-x: auto;
}
.gv-activated .gv-overflow-y-auto {
overflow-y: auto;
}
.gv-activated .gv-overflow-hidden {
overflow: hidden;
}
.gv-activated .gv-overflow-x-hidden {
overflow-x: hidden;
}
.gv-activated .gv-overflow-y-hidden {
overflow-y: hidden;
}
.gv-activated .gv-overflow-scroll {
overflow: scroll;
}
.gv-activated .gv-overflow-x-scroll {
overflow-x: scroll;
}
.gv-activated .gv-overflow-y-scroll {
overflow-y: scroll;
}
.gv-activated .gv-pos-fixed {
position: fixed;
}
.gv-activated .gv-pos-absolute {
position: absolute;
}
.gv-activated .gv-pos-relative {
position: relative;
}
.gv-activated .gv-pos-sticky {
position: sticky;
}
.gv-activated .gv-pos-bottom {
bottom: 0;
}
.gv-activated .gv-pos-left {
left: 0;
}
.gv-activated .gv-pos-right {
right: 0;
}
.gv-activated .gv-pos-top {
top: 0;
}
.gv-activated .gv-pos-top-nav {
top: var(--navigation-bar-height);
}
.gv-activated .gv-pos-x-center {
left: 50%;
transform: translateX(-50%);
}
.gv-activated .gv-pos-y-center {
top: 50%;
transform: translateY(-50%);
}
.gv-activated .gv-pos-center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.gv-activated .gv-object-pos-bottom {
object-position: bottom;
}
.gv-activated .gv-object-pos-center {
object-position: center;
}
.gv-activated .gv-object-pos-left {
object-position: left;
}
.gv-activated .gv-object-pos-left-bottom {
object-position: left bottom;
}
.gv-activated .gv-object-pos-left-top {
object-position: left top;
}
.gv-activated .gv-object-pos-right {
object-position: right;
}
.gv-activated .gv-object-pos-right-bottom {
object-position: right bottom;
}
.gv-activated .gv-object-pos-right-top {
object-position: right top;
}
.gv-activated .gv-object-pos-top {
object-position: top;
}
.gv-activated .gv-object-contain {
object-fit: contain;
}
.gv-activated .gv-object-cover {
object-fit: cover;
}
.gv-activated .gv-object-fill {
object-fit: fill;
}
.gv-activated .gv-object-none {
object-fit: none;
}
.gv-activated .gv-aspect-video {
aspect-ratio: 16 / 9;
}
.gv-activated .gv-shadow-subtle {
box-shadow: var(--color-shadow-subtle);
}
.gv-activated .gv-shadow-elevated {
box-shadow: var(--color-shadow-elevated);
}
.gv-activated .gv-h-full {
height: 100%;
}
.gv-activated .gv-w-auto {
width: auto;
}
.gv-activated .gv-w-full {
width: 100%;
}
.gv-activated .gv-w-max-container {
max-width: 1536px;
}
.gv-activated .gv-w-max-form {
max-width: var(--form-max-width);
}
.gv-activated .gv-w-max-features-table {
max-width: var(--features-table-max-width);
}
.gv-activated .gv-min-w-0 {
min-width: 0;
}
.gv-activated .gv-children-min-w-0 > * {
min-width: 0;
}
.gv-activated .gv-text-on-default {
color: var(--color-body-on-default);
}
.gv-activated .gv-text-on-alternative {
color: var(--color-body-on-alternative);
}
.gv-activated .gv-text-on-inverted {
color: var(--color-body-on-inverted);
}
.gv-activated .gv-text-primary {
color: var(--color-primary);
}
.gv-activated .gv-text-secondary {
color: var(--color-secondary);
}
.gv-activated .gv-text-dotted {
text-decoration-line: underline;
text-decoration-style: dotted;
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
text-decoration-thickness: 10%;
text-underline-offset: auto;
text-underline-position: from-font;
}
.gv-activated .gv-text-uppercase {
text-transform: uppercase;
}
.gv-activated .gv-text-capitalize {
text-transform: capitalize;
}
.gv-activated .gv-text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-activated .gv-white-space-nowrap {
white-space: nowrap;
}
.gv-activated .gv-break-word {
word-wrap: break-word;
}
.gv-activated .gv-break-all {
word-break: break-all;
}
.gv-activated .gv-list-unstyled {
list-style: none;
padding-left: 0;
}
.gv-activated .gv-text-trim {
/* Apply values to calculate em_based margins that work with any font size */
}
.gv-activated .gv-text-trim::before {
margin-bottom: calc(-0.375em + 0px);
}
.gv-activated .gv-text-trim::after {
margin-top: calc(-0.3125em + 0px);
}
.gv-activated .gv-text-trim::before,
.gv-activated .gv-text-trim::after {
content: "";
display: block;
height: 0;
width: 0;
}
.gv-activated.gv-pt-nav,
.gv-activated .gv-pt-nav {
padding-top: var(--navigation-bar-height);
}
@media screen and (max-width: 360px) {
.gv-activated .gv-m-fluid {
margin: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-m-fluid {
margin: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-m-fluid {
margin: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-mt-fluid {
margin-top: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-mt-fluid {
margin-top: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-mt-fluid {
margin-top: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-mb-fluid {
margin-bottom: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-mb-fluid {
margin-bottom: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-mb-fluid {
margin-bottom: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-ml-fluid {
margin-left: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-ml-fluid {
margin-left: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-ml-fluid {
margin-left: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-mr-fluid {
margin-right: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-mr-fluid {
margin-right: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-mr-fluid {
margin-right: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-mx-fluid {
margin-left: 24px;
margin-right: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-mx-fluid {
margin-left: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
margin-right: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-mx-fluid {
margin-left: 48px;
margin-right: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-my-fluid {
margin-top: 24px;
margin-bottom: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-my-fluid {
margin-top: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
margin-bottom: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-my-fluid {
margin-top: 48px;
margin-bottom: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-m-section {
margin-left: calc(var(--section-x-min-value) * 1px);
margin-right: calc(var(--section-x-min-value) * 1px);
margin-top: calc(var(--section-y-min-value) * 1px);
margin-bottom: calc(var(--section-y-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-m-section {
margin-left: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
margin-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
margin-right: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
margin-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
margin-top: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
margin-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
margin-bottom: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
margin-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-m-section {
margin-left: calc(var(--section-x-max-value) * 1px);
margin-right: calc(var(--section-x-max-value) * 1px);
margin-top: calc(var(--section-y-max-value) * 1px);
margin-bottom: calc(var(--section-y-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-mt-section {
margin-top: calc(var(--section-y-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-mt-section {
margin-top: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
margin-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-mt-section {
margin-top: calc(var(--section-y-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-mb-section {
margin-bottom: calc(var(--section-y-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-mb-section {
margin-bottom: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
margin-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-mb-section {
margin-bottom: calc(var(--section-y-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-ml-section {
margin-left: calc(var(--section-x-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-ml-section {
margin-left: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
margin-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-ml-section {
margin-left: calc(var(--section-x-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-mr-section {
margin-right: calc(var(--section-x-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-mr-section {
margin-right: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
margin-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-mr-section {
margin-right: calc(var(--section-x-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-mx-section {
margin-left: calc(var(--section-x-min-value) * 1px);
margin-right: calc(var(--section-x-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-mx-section {
margin-left: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
margin-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
margin-right: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
margin-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-mx-section {
margin-left: calc(var(--section-x-max-value) * 1px);
margin-right: calc(var(--section-x-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-my-section {
margin-top: calc(var(--section-y-min-value) * 1px);
margin-bottom: calc(var(--section-y-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-my-section {
margin-top: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
margin-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
margin-bottom: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
margin-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-my-section {
margin-top: calc(var(--section-y-max-value) * 1px);
margin-bottom: calc(var(--section-y-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-p-fluid {
padding: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-p-fluid {
padding: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-p-fluid {
padding: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-pt-fluid {
padding-top: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-pt-fluid {
padding-top: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-pt-fluid {
padding-top: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-pb-fluid {
padding-bottom: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-pb-fluid {
padding-bottom: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-pb-fluid {
padding-bottom: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-pl-fluid {
padding-left: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-pl-fluid {
padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-pl-fluid {
padding-left: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-pr-fluid {
padding-right: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-pr-fluid {
padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-pr-fluid {
padding-right: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-px-fluid {
padding-left: 24px;
padding-right: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-px-fluid {
padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-px-fluid {
padding-left: 48px;
padding-right: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-py-fluid {
padding-top: 24px;
padding-bottom: 24px;
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-py-fluid {
padding-top: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
padding-bottom: calc(24px + 24 * ((100vw - 360px ) / 1080 ));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-py-fluid {
padding-top: 48px;
padding-bottom: 48px;
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-p-section {
padding-left: calc(var(--section-x-min-value) * 1px);
padding-right: calc(var(--section-x-min-value) * 1px);
padding-top: calc(var(--section-y-min-value) * 1px);
padding-bottom: calc(var(--section-y-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-p-section {
padding-left: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
padding-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
padding-right: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
padding-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
padding-top: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
padding-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
padding-bottom: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
padding-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-p-section {
padding-left: calc(var(--section-x-max-value) * 1px);
padding-right: calc(var(--section-x-max-value) * 1px);
padding-top: calc(var(--section-y-max-value) * 1px);
padding-bottom: calc(var(--section-y-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-pt-section {
padding-top: calc(var(--section-y-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-pt-section {
padding-top: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
padding-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-pt-section {
padding-top: calc(var(--section-y-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-pb-section {
padding-bottom: calc(var(--section-y-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-pb-section {
padding-bottom: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
padding-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-pb-section {
padding-bottom: calc(var(--section-y-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-pl-section {
padding-left: calc(var(--section-x-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-pl-section {
padding-left: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
padding-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-pl-section {
padding-left: calc(var(--section-x-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-pr-section {
padding-right: calc(var(--section-x-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-pr-section {
padding-right: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
padding-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-pr-section {
padding-right: calc(var(--section-x-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-px-section {
padding-left: calc(var(--section-x-min-value) * 1px);
padding-right: calc(var(--section-x-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-px-section {
padding-left: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
padding-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
padding-right: calc((var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
padding-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-px-section {
padding-left: calc(var(--section-x-max-value) * 1px);
padding-right: calc(var(--section-x-max-value) * 1px);
}
}
@media screen and (max-width: 360px) {
.gv-activated .gv-py-section {
padding-top: calc(var(--section-y-min-value) * 1px);
padding-bottom: calc(var(--section-y-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated .gv-py-section {
padding-top: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
padding-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
padding-bottom: calc((var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
padding-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated .gv-py-section {
padding-top: calc(var(--section-y-max-value) * 1px);
padding-bottom: calc(var(--section-y-max-value) * 1px);
}
}
.gv-activated .gv-grayscale {
filter: grayscale(100%);
}
.gv-activated .gv-border {
border: 1px solid var(--color-border);
}
.gv-activated .gv-border-t {
border-top: 1px solid var(--color-border);
}
.gv-activated .gv-border-b {
border-bottom: 1px solid var(--color-border);
}
.gv-activated .gv-border-l {
border-left: 1px solid var(--color-border);
}
.gv-activated .gv-border-r {
border-right: 1px solid var(--color-border);
}
.gv-activated .gv-border-alt {
border: 1px solid var(--color-border-alt);
}
.gv-activated .gv-border-alt-t {
border-top: 1px solid var(--color-border-alt);
}
.gv-activated .gv-border-alt-b {
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .gv-border-alt-l {
border-left: 1px solid var(--color-border-alt);
}
.gv-activated .gv-border-alt-r {
border-right: 1px solid var(--color-border-alt);
}
.gv-activated .gv-border-0 {
border: none !important;
}
.gv-activated .gv-radius {
border-radius: var(--border-radius);
}
.gv-activated .gv-radius-tl {
border-top-left-radius: var(--border-radius);
}
.gv-activated .gv-radius-tr {
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-radius-bl {
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-radius-br {
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-radius-t {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-radius-r {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-radius-b {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-radius-l {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-radius-0 {
border-radius: 0 !important;
}
.gv-activated .gv-flex-row {
flex-direction: row;
}
.gv-activated .gv-flex-row-reverse {
flex-direction: row-reverse;
}
.gv-activated .gv-flex-col {
flex-direction: column;
}
.gv-activated .gv-flex-col-reverse {
flex-direction: column-reverse;
}
.gv-activated .gv-content-center {
align-content: center;
}
.gv-activated .gv-items-start {
align-items: flex-start;
}
.gv-activated .gv-items-end {
align-items: flex-end;
}
.gv-activated .gv-items-center {
align-items: center;
}
.gv-activated .gv-items-baseline {
align-items: baseline;
}
.gv-activated .gv-items-stretch {
align-items: stretch;
}
.gv-activated .gv-justify-start {
justify-content: flex-start;
}
.gv-activated .gv-justify-end {
justify-content: flex-end;
}
.gv-activated .gv-justify-center {
justify-content: center;
}
.gv-activated .gv-justify-between {
justify-content: space-between;
}
.gv-activated .gv-justify-around {
justify-content: space-around;
}
.gv-activated .gv-justify-evenly {
justify-content: space-evenly;
}
.gv-activated .gv-order-first {
order: -1;
}
.gv-activated .gv-order-last {
order: 99;
}
.gv-activated .gv-gap-xs {
gap: 4px;
}
.gv-activated .gv-gap-sm {
gap: 8px;
}
.gv-activated .gv-gap-md {
gap: 16px;
}
.gv-activated .gv-gap-lg {
gap: 24px;
}
.gv-activated .gv-gap-0 {
gap: 0 !important;
}
.gv-activated .gv-flex {
display: flex;
}
.gv-activated .gv-block {
display: block;
}
.gv-activated .gv-inline {
display: inline;
}
.gv-activated .gv-inline-block {
display: inline-block;
}
.gv-activated .gv-hidden {
display: none;
}
.gv-activated .gv-invisible {
visibility: hidden;
}
.gv-activated .gv-collapse {
visibility: collapse;
}
.gv-activated .gv-m-0 {
margin: 0 !important;
}
.gv-activated .gv-mt-0 {
margin-top: 0 !important;
}
.gv-activated .gv-mb-0 {
margin-bottom: 0 !important;
}
.gv-activated .gv-ml-0 {
margin-left: 0 !important;
}
.gv-activated .gv-mr-0 {
margin-right: 0 !important;
}
.gv-activated .gv-mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-my-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-m-xs {
margin: 4px;
}
.gv-activated .gv-mt-xs {
margin-top: 4px;
}
.gv-activated .gv-mb-xs {
margin-bottom: 4px;
}
.gv-activated .gv-ml-xs {
margin-left: 4px;
}
.gv-activated .gv-mr-xs {
margin-right: 4px;
}
.gv-activated .gv-mx-xs {
margin-left: 4px;
margin-right: 4px;
}
.gv-activated .gv-my-xs {
margin-top: 4px;
margin-bottom: 4px;
}
.gv-activated .gv-m-sm {
margin: 8px;
}
.gv-activated .gv-mt-sm {
margin-top: 8px;
}
.gv-activated .gv-mb-sm {
margin-bottom: 8px;
}
.gv-activated .gv-ml-sm {
margin-left: 8px;
}
.gv-activated .gv-mr-sm {
margin-right: 8px;
}
.gv-activated .gv-mx-sm {
margin-left: 8px;
margin-right: 8px;
}
.gv-activated .gv-my-sm {
margin-top: 8px;
margin-bottom: 8px;
}
.gv-activated .gv-m-md {
margin: 16px;
}
.gv-activated .gv-mt-md {
margin-top: 16px;
}
.gv-activated .gv-mb-md {
margin-bottom: 16px;
}
.gv-activated .gv-ml-md {
margin-left: 16px;
}
.gv-activated .gv-mr-md {
margin-right: 16px;
}
.gv-activated .gv-mx-md {
margin-left: 16px;
margin-right: 16px;
}
.gv-activated .gv-my-md {
margin-top: 16px;
margin-bottom: 16px;
}
.gv-activated .gv-m-lg {
margin: 24px;
}
.gv-activated .gv-mt-lg {
margin-top: 24px;
}
.gv-activated .gv-mb-lg {
margin-bottom: 24px;
}
.gv-activated .gv-ml-lg {
margin-left: 24px;
}
.gv-activated .gv-mr-lg {
margin-right: 24px;
}
.gv-activated .gv-mx-lg {
margin-left: 24px;
margin-right: 24px;
}
.gv-activated .gv-my-lg {
margin-top: 24px;
margin-bottom: 24px;
}
.gv-activated .gv-m-auto {
margin: auto;
}
.gv-activated .gv-mt-auto {
margin-top: auto;
}
.gv-activated .gv-mb-auto {
margin-bottom: auto;
}
.gv-activated .gv-ml-auto {
margin-left: auto;
}
.gv-activated .gv-mr-auto {
margin-right: auto;
}
.gv-activated .gv-mx-auto {
margin-left: auto;
margin-right: auto;
}
.gv-activated .gv-my-auto {
margin-top: auto;
margin-bottom: auto;
}
.gv-activated .gv-p-0 {
padding: 0 !important;
}
.gv-activated .gv-pt-0 {
padding-top: 0 !important;
}
.gv-activated .gv-pb-0 {
padding-bottom: 0 !important;
}
.gv-activated .gv-pl-0 {
padding-left: 0 !important;
}
.gv-activated .gv-pr-0 {
padding-right: 0 !important;
}
.gv-activated .gv-px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-py-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-p-xs {
padding: 4px;
}
.gv-activated .gv-pt-xs {
padding-top: 4px;
}
.gv-activated .gv-pb-xs {
padding-bottom: 4px;
}
.gv-activated .gv-pl-xs {
padding-left: 4px;
}
.gv-activated .gv-pr-xs {
padding-right: 4px;
}
.gv-activated .gv-px-xs {
padding-left: 4px;
padding-right: 4px;
}
.gv-activated .gv-py-xs {
padding-top: 4px;
padding-bottom: 4px;
}
.gv-activated .gv-p-sm {
padding: 8px;
}
.gv-activated .gv-pt-sm {
padding-top: 8px;
}
.gv-activated .gv-pb-sm {
padding-bottom: 8px;
}
.gv-activated .gv-pl-sm {
padding-left: 8px;
}
.gv-activated .gv-pr-sm {
padding-right: 8px;
}
.gv-activated .gv-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.gv-activated .gv-py-sm {
padding-top: 8px;
padding-bottom: 8px;
}
.gv-activated .gv-p-md {
padding: 16px;
}
.gv-activated .gv-pt-md {
padding-top: 16px;
}
.gv-activated .gv-pb-md {
padding-bottom: 16px;
}
.gv-activated .gv-pl-md {
padding-left: 16px;
}
.gv-activated .gv-pr-md {
padding-right: 16px;
}
.gv-activated .gv-px-md {
padding-left: 16px;
padding-right: 16px;
}
.gv-activated .gv-py-md {
padding-top: 16px;
padding-bottom: 16px;
}
.gv-activated .gv-p-lg {
padding: 24px;
}
.gv-activated .gv-pt-lg {
padding-top: 24px;
}
.gv-activated .gv-pb-lg {
padding-bottom: 24px;
}
.gv-activated .gv-pl-lg {
padding-left: 24px;
}
.gv-activated .gv-pr-lg {
padding-right: 24px;
}
.gv-activated .gv-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.gv-activated .gv-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.gv-activated .gv-stack-space-xs > *:not(:last-child) {
margin-bottom: 4px;
}
.gv-activated .gv-stack-space-sm > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-stack-space-md > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated .gv-stack-space-lg > *:not(:last-child) {
margin-bottom: 24px;
}
.gv-activated .gv-text-left {
text-align: left;
}
.gv-activated .gv-text-center {
text-align: center;
}
.gv-activated .gv-text-right {
text-align: right;
}
@media (max-width: 599px ) {
.gv-activated {
/* Border */
/* Flexbox and grid */
/* Hide */
/* Spacing */
/* Text */
}
.gv-activated .gv-max-mob-border {
border: 1px solid var(--color-border);
}
.gv-activated .gv-max-mob-border-t {
border-top: 1px solid var(--color-border);
}
.gv-activated .gv-max-mob-border-b {
border-bottom: 1px solid var(--color-border);
}
.gv-activated .gv-max-mob-border-l {
border-left: 1px solid var(--color-border);
}
.gv-activated .gv-max-mob-border-r {
border-right: 1px solid var(--color-border);
}
.gv-activated .gv-max-mob-border-alt {
border: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-mob-border-alt-t {
border-top: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-mob-border-alt-b {
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-mob-border-alt-l {
border-left: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-mob-border-alt-r {
border-right: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-mob-border-0 {
border: none !important;
}
.gv-activated .gv-max-mob-radius {
border-radius: var(--border-radius);
}
.gv-activated .gv-max-mob-radius-tl {
border-top-left-radius: var(--border-radius);
}
.gv-activated .gv-max-mob-radius-tr {
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-max-mob-radius-bl {
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-max-mob-radius-br {
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-max-mob-radius-t {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-max-mob-radius-r {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-max-mob-radius-b {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-max-mob-radius-l {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-max-mob-radius-0 {
border-radius: 0 !important;
}
.gv-activated .gv-max-mob-flex-row {
flex-direction: row;
}
.gv-activated .gv-max-mob-flex-row-reverse {
flex-direction: row-reverse;
}
.gv-activated .gv-max-mob-flex-col {
flex-direction: column;
}
.gv-activated .gv-max-mob-flex-col-reverse {
flex-direction: column-reverse;
}
.gv-activated .gv-max-mob-content-center {
align-content: center;
}
.gv-activated .gv-max-mob-items-start {
align-items: flex-start;
}
.gv-activated .gv-max-mob-items-end {
align-items: flex-end;
}
.gv-activated .gv-max-mob-items-center {
align-items: center;
}
.gv-activated .gv-max-mob-items-baseline {
align-items: baseline;
}
.gv-activated .gv-max-mob-items-stretch {
align-items: stretch;
}
.gv-activated .gv-max-mob-justify-start {
justify-content: flex-start;
}
.gv-activated .gv-max-mob-justify-end {
justify-content: flex-end;
}
.gv-activated .gv-max-mob-justify-center {
justify-content: center;
}
.gv-activated .gv-max-mob-justify-between {
justify-content: space-between;
}
.gv-activated .gv-max-mob-justify-around {
justify-content: space-around;
}
.gv-activated .gv-max-mob-justify-evenly {
justify-content: space-evenly;
}
.gv-activated .gv-max-mob-order-first {
order: -1;
}
.gv-activated .gv-max-mob-order-last {
order: 99;
}
.gv-activated .gv-max-mob-gap-xs {
gap: 4px;
}
.gv-activated .gv-max-mob-gap-sm {
gap: 8px;
}
.gv-activated .gv-max-mob-gap-md {
gap: 16px;
}
.gv-activated .gv-max-mob-gap-lg {
gap: 24px;
}
.gv-activated .gv-max-mob-gap-0 {
gap: 0 !important;
}
.gv-activated .gv-max-mob-flex {
display: flex;
}
.gv-activated .gv-max-mob-block {
display: block;
}
.gv-activated .gv-max-mob-inline {
display: inline;
}
.gv-activated .gv-max-mob-inline-block {
display: inline-block;
}
.gv-activated .gv-max-mob-hidden {
display: none;
}
.gv-activated .gv-max-mob-invisible {
visibility: hidden;
}
.gv-activated .gv-max-mob-collapse {
visibility: collapse;
}
.gv-activated .gv-max-mob-m-0 {
margin: 0 !important;
}
.gv-activated .gv-max-mob-mt-0 {
margin-top: 0 !important;
}
.gv-activated .gv-max-mob-mb-0 {
margin-bottom: 0 !important;
}
.gv-activated .gv-max-mob-ml-0 {
margin-left: 0 !important;
}
.gv-activated .gv-max-mob-mr-0 {
margin-right: 0 !important;
}
.gv-activated .gv-max-mob-mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-max-mob-my-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-max-mob-m-xs {
margin: 4px;
}
.gv-activated .gv-max-mob-mt-xs {
margin-top: 4px;
}
.gv-activated .gv-max-mob-mb-xs {
margin-bottom: 4px;
}
.gv-activated .gv-max-mob-ml-xs {
margin-left: 4px;
}
.gv-activated .gv-max-mob-mr-xs {
margin-right: 4px;
}
.gv-activated .gv-max-mob-mx-xs {
margin-left: 4px;
margin-right: 4px;
}
.gv-activated .gv-max-mob-my-xs {
margin-top: 4px;
margin-bottom: 4px;
}
.gv-activated .gv-max-mob-m-sm {
margin: 8px;
}
.gv-activated .gv-max-mob-mt-sm {
margin-top: 8px;
}
.gv-activated .gv-max-mob-mb-sm {
margin-bottom: 8px;
}
.gv-activated .gv-max-mob-ml-sm {
margin-left: 8px;
}
.gv-activated .gv-max-mob-mr-sm {
margin-right: 8px;
}
.gv-activated .gv-max-mob-mx-sm {
margin-left: 8px;
margin-right: 8px;
}
.gv-activated .gv-max-mob-my-sm {
margin-top: 8px;
margin-bottom: 8px;
}
.gv-activated .gv-max-mob-m-md {
margin: 16px;
}
.gv-activated .gv-max-mob-mt-md {
margin-top: 16px;
}
.gv-activated .gv-max-mob-mb-md {
margin-bottom: 16px;
}
.gv-activated .gv-max-mob-ml-md {
margin-left: 16px;
}
.gv-activated .gv-max-mob-mr-md {
margin-right: 16px;
}
.gv-activated .gv-max-mob-mx-md {
margin-left: 16px;
margin-right: 16px;
}
.gv-activated .gv-max-mob-my-md {
margin-top: 16px;
margin-bottom: 16px;
}
.gv-activated .gv-max-mob-m-lg {
margin: 24px;
}
.gv-activated .gv-max-mob-mt-lg {
margin-top: 24px;
}
.gv-activated .gv-max-mob-mb-lg {
margin-bottom: 24px;
}
.gv-activated .gv-max-mob-ml-lg {
margin-left: 24px;
}
.gv-activated .gv-max-mob-mr-lg {
margin-right: 24px;
}
.gv-activated .gv-max-mob-mx-lg {
margin-left: 24px;
margin-right: 24px;
}
.gv-activated .gv-max-mob-my-lg {
margin-top: 24px;
margin-bottom: 24px;
}
.gv-activated .gv-max-mob-m-auto {
margin: auto;
}
.gv-activated .gv-max-mob-mt-auto {
margin-top: auto;
}
.gv-activated .gv-max-mob-mb-auto {
margin-bottom: auto;
}
.gv-activated .gv-max-mob-ml-auto {
margin-left: auto;
}
.gv-activated .gv-max-mob-mr-auto {
margin-right: auto;
}
.gv-activated .gv-max-mob-mx-auto {
margin-left: auto;
margin-right: auto;
}
.gv-activated .gv-max-mob-my-auto {
margin-top: auto;
margin-bottom: auto;
}
.gv-activated .gv-max-mob-p-0 {
padding: 0 !important;
}
.gv-activated .gv-max-mob-pt-0 {
padding-top: 0 !important;
}
.gv-activated .gv-max-mob-pb-0 {
padding-bottom: 0 !important;
}
.gv-activated .gv-max-mob-pl-0 {
padding-left: 0 !important;
}
.gv-activated .gv-max-mob-pr-0 {
padding-right: 0 !important;
}
.gv-activated .gv-max-mob-px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-max-mob-py-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-max-mob-p-xs {
padding: 4px;
}
.gv-activated .gv-max-mob-pt-xs {
padding-top: 4px;
}
.gv-activated .gv-max-mob-pb-xs {
padding-bottom: 4px;
}
.gv-activated .gv-max-mob-pl-xs {
padding-left: 4px;
}
.gv-activated .gv-max-mob-pr-xs {
padding-right: 4px;
}
.gv-activated .gv-max-mob-px-xs {
padding-left: 4px;
padding-right: 4px;
}
.gv-activated .gv-max-mob-py-xs {
padding-top: 4px;
padding-bottom: 4px;
}
.gv-activated .gv-max-mob-p-sm {
padding: 8px;
}
.gv-activated .gv-max-mob-pt-sm {
padding-top: 8px;
}
.gv-activated .gv-max-mob-pb-sm {
padding-bottom: 8px;
}
.gv-activated .gv-max-mob-pl-sm {
padding-left: 8px;
}
.gv-activated .gv-max-mob-pr-sm {
padding-right: 8px;
}
.gv-activated .gv-max-mob-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.gv-activated .gv-max-mob-py-sm {
padding-top: 8px;
padding-bottom: 8px;
}
.gv-activated .gv-max-mob-p-md {
padding: 16px;
}
.gv-activated .gv-max-mob-pt-md {
padding-top: 16px;
}
.gv-activated .gv-max-mob-pb-md {
padding-bottom: 16px;
}
.gv-activated .gv-max-mob-pl-md {
padding-left: 16px;
}
.gv-activated .gv-max-mob-pr-md {
padding-right: 16px;
}
.gv-activated .gv-max-mob-px-md {
padding-left: 16px;
padding-right: 16px;
}
.gv-activated .gv-max-mob-py-md {
padding-top: 16px;
padding-bottom: 16px;
}
.gv-activated .gv-max-mob-p-lg {
padding: 24px;
}
.gv-activated .gv-max-mob-pt-lg {
padding-top: 24px;
}
.gv-activated .gv-max-mob-pb-lg {
padding-bottom: 24px;
}
.gv-activated .gv-max-mob-pl-lg {
padding-left: 24px;
}
.gv-activated .gv-max-mob-pr-lg {
padding-right: 24px;
}
.gv-activated .gv-max-mob-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.gv-activated .gv-max-mob-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.gv-activated .gv-max-mob-stack-space-xs > *:not(:last-child) {
margin-bottom: 4px;
}
.gv-activated .gv-max-mob-stack-space-sm > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-max-mob-stack-space-md > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated .gv-max-mob-stack-space-lg > *:not(:last-child) {
margin-bottom: 24px;
}
.gv-activated .gv-max-mob-text-left {
text-align: left;
}
.gv-activated .gv-max-mob-text-center {
text-align: center;
}
.gv-activated .gv-max-mob-text-right {
text-align: right;
}
}
@media (min-width: 600px ) {
.gv-activated {
/* Border */
/* Flexbox and grid */
/* Hide */
/* Spacing */
/* Text */
}
.gv-activated .gv-tab-border {
border: 1px solid var(--color-border);
}
.gv-activated .gv-tab-border-t {
border-top: 1px solid var(--color-border);
}
.gv-activated .gv-tab-border-b {
border-bottom: 1px solid var(--color-border);
}
.gv-activated .gv-tab-border-l {
border-left: 1px solid var(--color-border);
}
.gv-activated .gv-tab-border-r {
border-right: 1px solid var(--color-border);
}
.gv-activated .gv-tab-border-alt {
border: 1px solid var(--color-border-alt);
}
.gv-activated .gv-tab-border-alt-t {
border-top: 1px solid var(--color-border-alt);
}
.gv-activated .gv-tab-border-alt-b {
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .gv-tab-border-alt-l {
border-left: 1px solid var(--color-border-alt);
}
.gv-activated .gv-tab-border-alt-r {
border-right: 1px solid var(--color-border-alt);
}
.gv-activated .gv-tab-border-0 {
border: none !important;
}
.gv-activated .gv-tab-radius {
border-radius: var(--border-radius);
}
.gv-activated .gv-tab-radius-tl {
border-top-left-radius: var(--border-radius);
}
.gv-activated .gv-tab-radius-tr {
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-tab-radius-bl {
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-tab-radius-br {
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-tab-radius-t {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-tab-radius-r {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-tab-radius-b {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-tab-radius-l {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-tab-radius-0 {
border-radius: 0 !important;
}
.gv-activated .gv-tab-flex-row {
flex-direction: row;
}
.gv-activated .gv-tab-flex-row-reverse {
flex-direction: row-reverse;
}
.gv-activated .gv-tab-flex-col {
flex-direction: column;
}
.gv-activated .gv-tab-flex-col-reverse {
flex-direction: column-reverse;
}
.gv-activated .gv-tab-content-center {
align-content: center;
}
.gv-activated .gv-tab-items-start {
align-items: flex-start;
}
.gv-activated .gv-tab-items-end {
align-items: flex-end;
}
.gv-activated .gv-tab-items-center {
align-items: center;
}
.gv-activated .gv-tab-items-baseline {
align-items: baseline;
}
.gv-activated .gv-tab-items-stretch {
align-items: stretch;
}
.gv-activated .gv-tab-justify-start {
justify-content: flex-start;
}
.gv-activated .gv-tab-justify-end {
justify-content: flex-end;
}
.gv-activated .gv-tab-justify-center {
justify-content: center;
}
.gv-activated .gv-tab-justify-between {
justify-content: space-between;
}
.gv-activated .gv-tab-justify-around {
justify-content: space-around;
}
.gv-activated .gv-tab-justify-evenly {
justify-content: space-evenly;
}
.gv-activated .gv-tab-order-first {
order: -1;
}
.gv-activated .gv-tab-order-last {
order: 99;
}
.gv-activated .gv-tab-gap-xs {
gap: 4px;
}
.gv-activated .gv-tab-gap-sm {
gap: 8px;
}
.gv-activated .gv-tab-gap-md {
gap: 16px;
}
.gv-activated .gv-tab-gap-lg {
gap: 24px;
}
.gv-activated .gv-tab-gap-0 {
gap: 0 !important;
}
.gv-activated .gv-tab-flex {
display: flex;
}
.gv-activated .gv-tab-block {
display: block;
}
.gv-activated .gv-tab-inline {
display: inline;
}
.gv-activated .gv-tab-inline-block {
display: inline-block;
}
.gv-activated .gv-tab-hidden {
display: none;
}
.gv-activated .gv-tab-invisible {
visibility: hidden;
}
.gv-activated .gv-tab-collapse {
visibility: collapse;
}
.gv-activated .gv-tab-m-0 {
margin: 0 !important;
}
.gv-activated .gv-tab-mt-0 {
margin-top: 0 !important;
}
.gv-activated .gv-tab-mb-0 {
margin-bottom: 0 !important;
}
.gv-activated .gv-tab-ml-0 {
margin-left: 0 !important;
}
.gv-activated .gv-tab-mr-0 {
margin-right: 0 !important;
}
.gv-activated .gv-tab-mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-tab-my-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-tab-m-xs {
margin: 4px;
}
.gv-activated .gv-tab-mt-xs {
margin-top: 4px;
}
.gv-activated .gv-tab-mb-xs {
margin-bottom: 4px;
}
.gv-activated .gv-tab-ml-xs {
margin-left: 4px;
}
.gv-activated .gv-tab-mr-xs {
margin-right: 4px;
}
.gv-activated .gv-tab-mx-xs {
margin-left: 4px;
margin-right: 4px;
}
.gv-activated .gv-tab-my-xs {
margin-top: 4px;
margin-bottom: 4px;
}
.gv-activated .gv-tab-m-sm {
margin: 8px;
}
.gv-activated .gv-tab-mt-sm {
margin-top: 8px;
}
.gv-activated .gv-tab-mb-sm {
margin-bottom: 8px;
}
.gv-activated .gv-tab-ml-sm {
margin-left: 8px;
}
.gv-activated .gv-tab-mr-sm {
margin-right: 8px;
}
.gv-activated .gv-tab-mx-sm {
margin-left: 8px;
margin-right: 8px;
}
.gv-activated .gv-tab-my-sm {
margin-top: 8px;
margin-bottom: 8px;
}
.gv-activated .gv-tab-m-md {
margin: 16px;
}
.gv-activated .gv-tab-mt-md {
margin-top: 16px;
}
.gv-activated .gv-tab-mb-md {
margin-bottom: 16px;
}
.gv-activated .gv-tab-ml-md {
margin-left: 16px;
}
.gv-activated .gv-tab-mr-md {
margin-right: 16px;
}
.gv-activated .gv-tab-mx-md {
margin-left: 16px;
margin-right: 16px;
}
.gv-activated .gv-tab-my-md {
margin-top: 16px;
margin-bottom: 16px;
}
.gv-activated .gv-tab-m-lg {
margin: 24px;
}
.gv-activated .gv-tab-mt-lg {
margin-top: 24px;
}
.gv-activated .gv-tab-mb-lg {
margin-bottom: 24px;
}
.gv-activated .gv-tab-ml-lg {
margin-left: 24px;
}
.gv-activated .gv-tab-mr-lg {
margin-right: 24px;
}
.gv-activated .gv-tab-mx-lg {
margin-left: 24px;
margin-right: 24px;
}
.gv-activated .gv-tab-my-lg {
margin-top: 24px;
margin-bottom: 24px;
}
.gv-activated .gv-tab-m-auto {
margin: auto;
}
.gv-activated .gv-tab-mt-auto {
margin-top: auto;
}
.gv-activated .gv-tab-mb-auto {
margin-bottom: auto;
}
.gv-activated .gv-tab-ml-auto {
margin-left: auto;
}
.gv-activated .gv-tab-mr-auto {
margin-right: auto;
}
.gv-activated .gv-tab-mx-auto {
margin-left: auto;
margin-right: auto;
}
.gv-activated .gv-tab-my-auto {
margin-top: auto;
margin-bottom: auto;
}
.gv-activated .gv-tab-p-0 {
padding: 0 !important;
}
.gv-activated .gv-tab-pt-0 {
padding-top: 0 !important;
}
.gv-activated .gv-tab-pb-0 {
padding-bottom: 0 !important;
}
.gv-activated .gv-tab-pl-0 {
padding-left: 0 !important;
}
.gv-activated .gv-tab-pr-0 {
padding-right: 0 !important;
}
.gv-activated .gv-tab-px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-tab-py-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-tab-p-xs {
padding: 4px;
}
.gv-activated .gv-tab-pt-xs {
padding-top: 4px;
}
.gv-activated .gv-tab-pb-xs {
padding-bottom: 4px;
}
.gv-activated .gv-tab-pl-xs {
padding-left: 4px;
}
.gv-activated .gv-tab-pr-xs {
padding-right: 4px;
}
.gv-activated .gv-tab-px-xs {
padding-left: 4px;
padding-right: 4px;
}
.gv-activated .gv-tab-py-xs {
padding-top: 4px;
padding-bottom: 4px;
}
.gv-activated .gv-tab-p-sm {
padding: 8px;
}
.gv-activated .gv-tab-pt-sm {
padding-top: 8px;
}
.gv-activated .gv-tab-pb-sm {
padding-bottom: 8px;
}
.gv-activated .gv-tab-pl-sm {
padding-left: 8px;
}
.gv-activated .gv-tab-pr-sm {
padding-right: 8px;
}
.gv-activated .gv-tab-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.gv-activated .gv-tab-py-sm {
padding-top: 8px;
padding-bottom: 8px;
}
.gv-activated .gv-tab-p-md {
padding: 16px;
}
.gv-activated .gv-tab-pt-md {
padding-top: 16px;
}
.gv-activated .gv-tab-pb-md {
padding-bottom: 16px;
}
.gv-activated .gv-tab-pl-md {
padding-left: 16px;
}
.gv-activated .gv-tab-pr-md {
padding-right: 16px;
}
.gv-activated .gv-tab-px-md {
padding-left: 16px;
padding-right: 16px;
}
.gv-activated .gv-tab-py-md {
padding-top: 16px;
padding-bottom: 16px;
}
.gv-activated .gv-tab-p-lg {
padding: 24px;
}
.gv-activated .gv-tab-pt-lg {
padding-top: 24px;
}
.gv-activated .gv-tab-pb-lg {
padding-bottom: 24px;
}
.gv-activated .gv-tab-pl-lg {
padding-left: 24px;
}
.gv-activated .gv-tab-pr-lg {
padding-right: 24px;
}
.gv-activated .gv-tab-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.gv-activated .gv-tab-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.gv-activated .gv-tab-stack-space-xs > *:not(:last-child) {
margin-bottom: 4px;
}
.gv-activated .gv-tab-stack-space-sm > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-tab-stack-space-md > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated .gv-tab-stack-space-lg > *:not(:last-child) {
margin-bottom: 24px;
}
.gv-activated .gv-tab-text-left {
text-align: left;
}
.gv-activated .gv-tab-text-center {
text-align: center;
}
.gv-activated .gv-tab-text-right {
text-align: right;
}
}
@media (max-width: 767px ) {
.gv-activated {
/* Border */
/* Flexbox and grid */
/* Hide */
/* Spacing */
/* Text */
}
.gv-activated .gv-max-tab-sm-border {
border: 1px solid var(--color-border);
}
.gv-activated .gv-max-tab-sm-border-t {
border-top: 1px solid var(--color-border);
}
.gv-activated .gv-max-tab-sm-border-b {
border-bottom: 1px solid var(--color-border);
}
.gv-activated .gv-max-tab-sm-border-l {
border-left: 1px solid var(--color-border);
}
.gv-activated .gv-max-tab-sm-border-r {
border-right: 1px solid var(--color-border);
}
.gv-activated .gv-max-tab-sm-border-alt {
border: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-tab-sm-border-alt-t {
border-top: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-tab-sm-border-alt-b {
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-tab-sm-border-alt-l {
border-left: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-tab-sm-border-alt-r {
border-right: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-tab-sm-border-0 {
border: none !important;
}
.gv-activated .gv-max-tab-sm-radius {
border-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-sm-radius-tl {
border-top-left-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-sm-radius-tr {
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-sm-radius-bl {
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-sm-radius-br {
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-sm-radius-t {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-sm-radius-r {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-sm-radius-b {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-sm-radius-l {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-sm-radius-0 {
border-radius: 0 !important;
}
.gv-activated .gv-max-tab-sm-flex-row {
flex-direction: row;
}
.gv-activated .gv-max-tab-sm-flex-row-reverse {
flex-direction: row-reverse;
}
.gv-activated .gv-max-tab-sm-flex-col {
flex-direction: column;
}
.gv-activated .gv-max-tab-sm-flex-col-reverse {
flex-direction: column-reverse;
}
.gv-activated .gv-max-tab-sm-content-center {
align-content: center;
}
.gv-activated .gv-max-tab-sm-items-start {
align-items: flex-start;
}
.gv-activated .gv-max-tab-sm-items-end {
align-items: flex-end;
}
.gv-activated .gv-max-tab-sm-items-center {
align-items: center;
}
.gv-activated .gv-max-tab-sm-items-baseline {
align-items: baseline;
}
.gv-activated .gv-max-tab-sm-items-stretch {
align-items: stretch;
}
.gv-activated .gv-max-tab-sm-justify-start {
justify-content: flex-start;
}
.gv-activated .gv-max-tab-sm-justify-end {
justify-content: flex-end;
}
.gv-activated .gv-max-tab-sm-justify-center {
justify-content: center;
}
.gv-activated .gv-max-tab-sm-justify-between {
justify-content: space-between;
}
.gv-activated .gv-max-tab-sm-justify-around {
justify-content: space-around;
}
.gv-activated .gv-max-tab-sm-justify-evenly {
justify-content: space-evenly;
}
.gv-activated .gv-max-tab-sm-order-first {
order: -1;
}
.gv-activated .gv-max-tab-sm-order-last {
order: 99;
}
.gv-activated .gv-max-tab-sm-gap-xs {
gap: 4px;
}
.gv-activated .gv-max-tab-sm-gap-sm {
gap: 8px;
}
.gv-activated .gv-max-tab-sm-gap-md {
gap: 16px;
}
.gv-activated .gv-max-tab-sm-gap-lg {
gap: 24px;
}
.gv-activated .gv-max-tab-sm-gap-0 {
gap: 0 !important;
}
.gv-activated .gv-max-tab-sm-flex {
display: flex;
}
.gv-activated .gv-max-tab-sm-block {
display: block;
}
.gv-activated .gv-max-tab-sm-inline {
display: inline;
}
.gv-activated .gv-max-tab-sm-inline-block {
display: inline-block;
}
.gv-activated .gv-max-tab-sm-hidden {
display: none;
}
.gv-activated .gv-max-tab-sm-invisible {
visibility: hidden;
}
.gv-activated .gv-max-tab-sm-collapse {
visibility: collapse;
}
.gv-activated .gv-max-tab-sm-m-0 {
margin: 0 !important;
}
.gv-activated .gv-max-tab-sm-mt-0 {
margin-top: 0 !important;
}
.gv-activated .gv-max-tab-sm-mb-0 {
margin-bottom: 0 !important;
}
.gv-activated .gv-max-tab-sm-ml-0 {
margin-left: 0 !important;
}
.gv-activated .gv-max-tab-sm-mr-0 {
margin-right: 0 !important;
}
.gv-activated .gv-max-tab-sm-mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-max-tab-sm-my-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-max-tab-sm-m-xs {
margin: 4px;
}
.gv-activated .gv-max-tab-sm-mt-xs {
margin-top: 4px;
}
.gv-activated .gv-max-tab-sm-mb-xs {
margin-bottom: 4px;
}
.gv-activated .gv-max-tab-sm-ml-xs {
margin-left: 4px;
}
.gv-activated .gv-max-tab-sm-mr-xs {
margin-right: 4px;
}
.gv-activated .gv-max-tab-sm-mx-xs {
margin-left: 4px;
margin-right: 4px;
}
.gv-activated .gv-max-tab-sm-my-xs {
margin-top: 4px;
margin-bottom: 4px;
}
.gv-activated .gv-max-tab-sm-m-sm {
margin: 8px;
}
.gv-activated .gv-max-tab-sm-mt-sm {
margin-top: 8px;
}
.gv-activated .gv-max-tab-sm-mb-sm {
margin-bottom: 8px;
}
.gv-activated .gv-max-tab-sm-ml-sm {
margin-left: 8px;
}
.gv-activated .gv-max-tab-sm-mr-sm {
margin-right: 8px;
}
.gv-activated .gv-max-tab-sm-mx-sm {
margin-left: 8px;
margin-right: 8px;
}
.gv-activated .gv-max-tab-sm-my-sm {
margin-top: 8px;
margin-bottom: 8px;
}
.gv-activated .gv-max-tab-sm-m-md {
margin: 16px;
}
.gv-activated .gv-max-tab-sm-mt-md {
margin-top: 16px;
}
.gv-activated .gv-max-tab-sm-mb-md {
margin-bottom: 16px;
}
.gv-activated .gv-max-tab-sm-ml-md {
margin-left: 16px;
}
.gv-activated .gv-max-tab-sm-mr-md {
margin-right: 16px;
}
.gv-activated .gv-max-tab-sm-mx-md {
margin-left: 16px;
margin-right: 16px;
}
.gv-activated .gv-max-tab-sm-my-md {
margin-top: 16px;
margin-bottom: 16px;
}
.gv-activated .gv-max-tab-sm-m-lg {
margin: 24px;
}
.gv-activated .gv-max-tab-sm-mt-lg {
margin-top: 24px;
}
.gv-activated .gv-max-tab-sm-mb-lg {
margin-bottom: 24px;
}
.gv-activated .gv-max-tab-sm-ml-lg {
margin-left: 24px;
}
.gv-activated .gv-max-tab-sm-mr-lg {
margin-right: 24px;
}
.gv-activated .gv-max-tab-sm-mx-lg {
margin-left: 24px;
margin-right: 24px;
}
.gv-activated .gv-max-tab-sm-my-lg {
margin-top: 24px;
margin-bottom: 24px;
}
.gv-activated .gv-max-tab-sm-m-auto {
margin: auto;
}
.gv-activated .gv-max-tab-sm-mt-auto {
margin-top: auto;
}
.gv-activated .gv-max-tab-sm-mb-auto {
margin-bottom: auto;
}
.gv-activated .gv-max-tab-sm-ml-auto {
margin-left: auto;
}
.gv-activated .gv-max-tab-sm-mr-auto {
margin-right: auto;
}
.gv-activated .gv-max-tab-sm-mx-auto {
margin-left: auto;
margin-right: auto;
}
.gv-activated .gv-max-tab-sm-my-auto {
margin-top: auto;
margin-bottom: auto;
}
.gv-activated .gv-max-tab-sm-p-0 {
padding: 0 !important;
}
.gv-activated .gv-max-tab-sm-pt-0 {
padding-top: 0 !important;
}
.gv-activated .gv-max-tab-sm-pb-0 {
padding-bottom: 0 !important;
}
.gv-activated .gv-max-tab-sm-pl-0 {
padding-left: 0 !important;
}
.gv-activated .gv-max-tab-sm-pr-0 {
padding-right: 0 !important;
}
.gv-activated .gv-max-tab-sm-px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-max-tab-sm-py-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-max-tab-sm-p-xs {
padding: 4px;
}
.gv-activated .gv-max-tab-sm-pt-xs {
padding-top: 4px;
}
.gv-activated .gv-max-tab-sm-pb-xs {
padding-bottom: 4px;
}
.gv-activated .gv-max-tab-sm-pl-xs {
padding-left: 4px;
}
.gv-activated .gv-max-tab-sm-pr-xs {
padding-right: 4px;
}
.gv-activated .gv-max-tab-sm-px-xs {
padding-left: 4px;
padding-right: 4px;
}
.gv-activated .gv-max-tab-sm-py-xs {
padding-top: 4px;
padding-bottom: 4px;
}
.gv-activated .gv-max-tab-sm-p-sm {
padding: 8px;
}
.gv-activated .gv-max-tab-sm-pt-sm {
padding-top: 8px;
}
.gv-activated .gv-max-tab-sm-pb-sm {
padding-bottom: 8px;
}
.gv-activated .gv-max-tab-sm-pl-sm {
padding-left: 8px;
}
.gv-activated .gv-max-tab-sm-pr-sm {
padding-right: 8px;
}
.gv-activated .gv-max-tab-sm-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.gv-activated .gv-max-tab-sm-py-sm {
padding-top: 8px;
padding-bottom: 8px;
}
.gv-activated .gv-max-tab-sm-p-md {
padding: 16px;
}
.gv-activated .gv-max-tab-sm-pt-md {
padding-top: 16px;
}
.gv-activated .gv-max-tab-sm-pb-md {
padding-bottom: 16px;
}
.gv-activated .gv-max-tab-sm-pl-md {
padding-left: 16px;
}
.gv-activated .gv-max-tab-sm-pr-md {
padding-right: 16px;
}
.gv-activated .gv-max-tab-sm-px-md {
padding-left: 16px;
padding-right: 16px;
}
.gv-activated .gv-max-tab-sm-py-md {
padding-top: 16px;
padding-bottom: 16px;
}
.gv-activated .gv-max-tab-sm-p-lg {
padding: 24px;
}
.gv-activated .gv-max-tab-sm-pt-lg {
padding-top: 24px;
}
.gv-activated .gv-max-tab-sm-pb-lg {
padding-bottom: 24px;
}
.gv-activated .gv-max-tab-sm-pl-lg {
padding-left: 24px;
}
.gv-activated .gv-max-tab-sm-pr-lg {
padding-right: 24px;
}
.gv-activated .gv-max-tab-sm-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.gv-activated .gv-max-tab-sm-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.gv-activated .gv-max-tab-sm-stack-space-xs > *:not(:last-child) {
margin-bottom: 4px;
}
.gv-activated .gv-max-tab-sm-stack-space-sm > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-max-tab-sm-stack-space-md > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated .gv-max-tab-sm-stack-space-lg > *:not(:last-child) {
margin-bottom: 24px;
}
.gv-activated .gv-max-tab-sm-text-left {
text-align: left;
}
.gv-activated .gv-max-tab-sm-text-center {
text-align: center;
}
.gv-activated .gv-max-tab-sm-text-right {
text-align: right;
}
}
@media (min-width: 768px ) {
.gv-activated {
/* Border */
/* Flexbox and grid */
/* Hide */
/* Spacing */
/* Text */
}
.gv-activated .gv-tab-lg-border {
border: 1px solid var(--color-border);
}
.gv-activated .gv-tab-lg-border-t {
border-top: 1px solid var(--color-border);
}
.gv-activated .gv-tab-lg-border-b {
border-bottom: 1px solid var(--color-border);
}
.gv-activated .gv-tab-lg-border-l {
border-left: 1px solid var(--color-border);
}
.gv-activated .gv-tab-lg-border-r {
border-right: 1px solid var(--color-border);
}
.gv-activated .gv-tab-lg-border-alt {
border: 1px solid var(--color-border-alt);
}
.gv-activated .gv-tab-lg-border-alt-t {
border-top: 1px solid var(--color-border-alt);
}
.gv-activated .gv-tab-lg-border-alt-b {
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .gv-tab-lg-border-alt-l {
border-left: 1px solid var(--color-border-alt);
}
.gv-activated .gv-tab-lg-border-alt-r {
border-right: 1px solid var(--color-border-alt);
}
.gv-activated .gv-tab-lg-border-0 {
border: none !important;
}
.gv-activated .gv-tab-lg-radius {
border-radius: var(--border-radius);
}
.gv-activated .gv-tab-lg-radius-tl {
border-top-left-radius: var(--border-radius);
}
.gv-activated .gv-tab-lg-radius-tr {
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-tab-lg-radius-bl {
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-tab-lg-radius-br {
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-tab-lg-radius-t {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-tab-lg-radius-r {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-tab-lg-radius-b {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-tab-lg-radius-l {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-tab-lg-radius-0 {
border-radius: 0 !important;
}
.gv-activated .gv-tab-lg-flex-row {
flex-direction: row;
}
.gv-activated .gv-tab-lg-flex-row-reverse {
flex-direction: row-reverse;
}
.gv-activated .gv-tab-lg-flex-col {
flex-direction: column;
}
.gv-activated .gv-tab-lg-flex-col-reverse {
flex-direction: column-reverse;
}
.gv-activated .gv-tab-lg-content-center {
align-content: center;
}
.gv-activated .gv-tab-lg-items-start {
align-items: flex-start;
}
.gv-activated .gv-tab-lg-items-end {
align-items: flex-end;
}
.gv-activated .gv-tab-lg-items-center {
align-items: center;
}
.gv-activated .gv-tab-lg-items-baseline {
align-items: baseline;
}
.gv-activated .gv-tab-lg-items-stretch {
align-items: stretch;
}
.gv-activated .gv-tab-lg-justify-start {
justify-content: flex-start;
}
.gv-activated .gv-tab-lg-justify-end {
justify-content: flex-end;
}
.gv-activated .gv-tab-lg-justify-center {
justify-content: center;
}
.gv-activated .gv-tab-lg-justify-between {
justify-content: space-between;
}
.gv-activated .gv-tab-lg-justify-around {
justify-content: space-around;
}
.gv-activated .gv-tab-lg-justify-evenly {
justify-content: space-evenly;
}
.gv-activated .gv-tab-lg-order-first {
order: -1;
}
.gv-activated .gv-tab-lg-order-last {
order: 99;
}
.gv-activated .gv-tab-lg-gap-xs {
gap: 4px;
}
.gv-activated .gv-tab-lg-gap-sm {
gap: 8px;
}
.gv-activated .gv-tab-lg-gap-md {
gap: 16px;
}
.gv-activated .gv-tab-lg-gap-lg {
gap: 24px;
}
.gv-activated .gv-tab-lg-gap-0 {
gap: 0 !important;
}
.gv-activated .gv-tab-lg-flex {
display: flex;
}
.gv-activated .gv-tab-lg-block {
display: block;
}
.gv-activated .gv-tab-lg-inline {
display: inline;
}
.gv-activated .gv-tab-lg-inline-block {
display: inline-block;
}
.gv-activated .gv-tab-lg-hidden {
display: none;
}
.gv-activated .gv-tab-lg-invisible {
visibility: hidden;
}
.gv-activated .gv-tab-lg-collapse {
visibility: collapse;
}
.gv-activated .gv-tab-lg-m-0 {
margin: 0 !important;
}
.gv-activated .gv-tab-lg-mt-0 {
margin-top: 0 !important;
}
.gv-activated .gv-tab-lg-mb-0 {
margin-bottom: 0 !important;
}
.gv-activated .gv-tab-lg-ml-0 {
margin-left: 0 !important;
}
.gv-activated .gv-tab-lg-mr-0 {
margin-right: 0 !important;
}
.gv-activated .gv-tab-lg-mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-tab-lg-my-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-tab-lg-m-xs {
margin: 4px;
}
.gv-activated .gv-tab-lg-mt-xs {
margin-top: 4px;
}
.gv-activated .gv-tab-lg-mb-xs {
margin-bottom: 4px;
}
.gv-activated .gv-tab-lg-ml-xs {
margin-left: 4px;
}
.gv-activated .gv-tab-lg-mr-xs {
margin-right: 4px;
}
.gv-activated .gv-tab-lg-mx-xs {
margin-left: 4px;
margin-right: 4px;
}
.gv-activated .gv-tab-lg-my-xs {
margin-top: 4px;
margin-bottom: 4px;
}
.gv-activated .gv-tab-lg-m-sm {
margin: 8px;
}
.gv-activated .gv-tab-lg-mt-sm {
margin-top: 8px;
}
.gv-activated .gv-tab-lg-mb-sm {
margin-bottom: 8px;
}
.gv-activated .gv-tab-lg-ml-sm {
margin-left: 8px;
}
.gv-activated .gv-tab-lg-mr-sm {
margin-right: 8px;
}
.gv-activated .gv-tab-lg-mx-sm {
margin-left: 8px;
margin-right: 8px;
}
.gv-activated .gv-tab-lg-my-sm {
margin-top: 8px;
margin-bottom: 8px;
}
.gv-activated .gv-tab-lg-m-md {
margin: 16px;
}
.gv-activated .gv-tab-lg-mt-md {
margin-top: 16px;
}
.gv-activated .gv-tab-lg-mb-md {
margin-bottom: 16px;
}
.gv-activated .gv-tab-lg-ml-md {
margin-left: 16px;
}
.gv-activated .gv-tab-lg-mr-md {
margin-right: 16px;
}
.gv-activated .gv-tab-lg-mx-md {
margin-left: 16px;
margin-right: 16px;
}
.gv-activated .gv-tab-lg-my-md {
margin-top: 16px;
margin-bottom: 16px;
}
.gv-activated .gv-tab-lg-m-lg {
margin: 24px;
}
.gv-activated .gv-tab-lg-mt-lg {
margin-top: 24px;
}
.gv-activated .gv-tab-lg-mb-lg {
margin-bottom: 24px;
}
.gv-activated .gv-tab-lg-ml-lg {
margin-left: 24px;
}
.gv-activated .gv-tab-lg-mr-lg {
margin-right: 24px;
}
.gv-activated .gv-tab-lg-mx-lg {
margin-left: 24px;
margin-right: 24px;
}
.gv-activated .gv-tab-lg-my-lg {
margin-top: 24px;
margin-bottom: 24px;
}
.gv-activated .gv-tab-lg-m-auto {
margin: auto;
}
.gv-activated .gv-tab-lg-mt-auto {
margin-top: auto;
}
.gv-activated .gv-tab-lg-mb-auto {
margin-bottom: auto;
}
.gv-activated .gv-tab-lg-ml-auto {
margin-left: auto;
}
.gv-activated .gv-tab-lg-mr-auto {
margin-right: auto;
}
.gv-activated .gv-tab-lg-mx-auto {
margin-left: auto;
margin-right: auto;
}
.gv-activated .gv-tab-lg-my-auto {
margin-top: auto;
margin-bottom: auto;
}
.gv-activated .gv-tab-lg-p-0 {
padding: 0 !important;
}
.gv-activated .gv-tab-lg-pt-0 {
padding-top: 0 !important;
}
.gv-activated .gv-tab-lg-pb-0 {
padding-bottom: 0 !important;
}
.gv-activated .gv-tab-lg-pl-0 {
padding-left: 0 !important;
}
.gv-activated .gv-tab-lg-pr-0 {
padding-right: 0 !important;
}
.gv-activated .gv-tab-lg-px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-tab-lg-py-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-tab-lg-p-xs {
padding: 4px;
}
.gv-activated .gv-tab-lg-pt-xs {
padding-top: 4px;
}
.gv-activated .gv-tab-lg-pb-xs {
padding-bottom: 4px;
}
.gv-activated .gv-tab-lg-pl-xs {
padding-left: 4px;
}
.gv-activated .gv-tab-lg-pr-xs {
padding-right: 4px;
}
.gv-activated .gv-tab-lg-px-xs {
padding-left: 4px;
padding-right: 4px;
}
.gv-activated .gv-tab-lg-py-xs {
padding-top: 4px;
padding-bottom: 4px;
}
.gv-activated .gv-tab-lg-p-sm {
padding: 8px;
}
.gv-activated .gv-tab-lg-pt-sm {
padding-top: 8px;
}
.gv-activated .gv-tab-lg-pb-sm {
padding-bottom: 8px;
}
.gv-activated .gv-tab-lg-pl-sm {
padding-left: 8px;
}
.gv-activated .gv-tab-lg-pr-sm {
padding-right: 8px;
}
.gv-activated .gv-tab-lg-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.gv-activated .gv-tab-lg-py-sm {
padding-top: 8px;
padding-bottom: 8px;
}
.gv-activated .gv-tab-lg-p-md {
padding: 16px;
}
.gv-activated .gv-tab-lg-pt-md {
padding-top: 16px;
}
.gv-activated .gv-tab-lg-pb-md {
padding-bottom: 16px;
}
.gv-activated .gv-tab-lg-pl-md {
padding-left: 16px;
}
.gv-activated .gv-tab-lg-pr-md {
padding-right: 16px;
}
.gv-activated .gv-tab-lg-px-md {
padding-left: 16px;
padding-right: 16px;
}
.gv-activated .gv-tab-lg-py-md {
padding-top: 16px;
padding-bottom: 16px;
}
.gv-activated .gv-tab-lg-p-lg {
padding: 24px;
}
.gv-activated .gv-tab-lg-pt-lg {
padding-top: 24px;
}
.gv-activated .gv-tab-lg-pb-lg {
padding-bottom: 24px;
}
.gv-activated .gv-tab-lg-pl-lg {
padding-left: 24px;
}
.gv-activated .gv-tab-lg-pr-lg {
padding-right: 24px;
}
.gv-activated .gv-tab-lg-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.gv-activated .gv-tab-lg-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.gv-activated .gv-tab-lg-stack-space-xs > *:not(:last-child) {
margin-bottom: 4px;
}
.gv-activated .gv-tab-lg-stack-space-sm > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-tab-lg-stack-space-md > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated .gv-tab-lg-stack-space-lg > *:not(:last-child) {
margin-bottom: 24px;
}
.gv-activated .gv-tab-lg-text-left {
text-align: left;
}
.gv-activated .gv-tab-lg-text-center {
text-align: center;
}
.gv-activated .gv-tab-lg-text-right {
text-align: right;
}
}
@media (max-width: 1023px ) {
.gv-activated {
/* Border */
/* Flexbox and grid */
/* Hide */
/* Spacing */
/* Text */
}
.gv-activated .gv-max-tab-border {
border: 1px solid var(--color-border);
}
.gv-activated .gv-max-tab-border-t {
border-top: 1px solid var(--color-border);
}
.gv-activated .gv-max-tab-border-b {
border-bottom: 1px solid var(--color-border);
}
.gv-activated .gv-max-tab-border-l {
border-left: 1px solid var(--color-border);
}
.gv-activated .gv-max-tab-border-r {
border-right: 1px solid var(--color-border);
}
.gv-activated .gv-max-tab-border-alt {
border: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-tab-border-alt-t {
border-top: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-tab-border-alt-b {
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-tab-border-alt-l {
border-left: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-tab-border-alt-r {
border-right: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-tab-border-0 {
border: none !important;
}
.gv-activated .gv-max-tab-radius {
border-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-radius-tl {
border-top-left-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-radius-tr {
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-radius-bl {
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-radius-br {
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-radius-t {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-radius-r {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-radius-b {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-radius-l {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-max-tab-radius-0 {
border-radius: 0 !important;
}
.gv-activated .gv-max-tab-flex-row {
flex-direction: row;
}
.gv-activated .gv-max-tab-flex-row-reverse {
flex-direction: row-reverse;
}
.gv-activated .gv-max-tab-flex-col {
flex-direction: column;
}
.gv-activated .gv-max-tab-flex-col-reverse {
flex-direction: column-reverse;
}
.gv-activated .gv-max-tab-content-center {
align-content: center;
}
.gv-activated .gv-max-tab-items-start {
align-items: flex-start;
}
.gv-activated .gv-max-tab-items-end {
align-items: flex-end;
}
.gv-activated .gv-max-tab-items-center {
align-items: center;
}
.gv-activated .gv-max-tab-items-baseline {
align-items: baseline;
}
.gv-activated .gv-max-tab-items-stretch {
align-items: stretch;
}
.gv-activated .gv-max-tab-justify-start {
justify-content: flex-start;
}
.gv-activated .gv-max-tab-justify-end {
justify-content: flex-end;
}
.gv-activated .gv-max-tab-justify-center {
justify-content: center;
}
.gv-activated .gv-max-tab-justify-between {
justify-content: space-between;
}
.gv-activated .gv-max-tab-justify-around {
justify-content: space-around;
}
.gv-activated .gv-max-tab-justify-evenly {
justify-content: space-evenly;
}
.gv-activated .gv-max-tab-order-first {
order: -1;
}
.gv-activated .gv-max-tab-order-last {
order: 99;
}
.gv-activated .gv-max-tab-gap-xs {
gap: 4px;
}
.gv-activated .gv-max-tab-gap-sm {
gap: 8px;
}
.gv-activated .gv-max-tab-gap-md {
gap: 16px;
}
.gv-activated .gv-max-tab-gap-lg {
gap: 24px;
}
.gv-activated .gv-max-tab-gap-0 {
gap: 0 !important;
}
.gv-activated .gv-max-tab-flex {
display: flex;
}
.gv-activated .gv-max-tab-block {
display: block;
}
.gv-activated .gv-max-tab-inline {
display: inline;
}
.gv-activated .gv-max-tab-inline-block {
display: inline-block;
}
.gv-activated .gv-max-tab-hidden {
display: none;
}
.gv-activated .gv-max-tab-invisible {
visibility: hidden;
}
.gv-activated .gv-max-tab-collapse {
visibility: collapse;
}
.gv-activated .gv-max-tab-m-0 {
margin: 0 !important;
}
.gv-activated .gv-max-tab-mt-0 {
margin-top: 0 !important;
}
.gv-activated .gv-max-tab-mb-0 {
margin-bottom: 0 !important;
}
.gv-activated .gv-max-tab-ml-0 {
margin-left: 0 !important;
}
.gv-activated .gv-max-tab-mr-0 {
margin-right: 0 !important;
}
.gv-activated .gv-max-tab-mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-max-tab-my-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-max-tab-m-xs {
margin: 4px;
}
.gv-activated .gv-max-tab-mt-xs {
margin-top: 4px;
}
.gv-activated .gv-max-tab-mb-xs {
margin-bottom: 4px;
}
.gv-activated .gv-max-tab-ml-xs {
margin-left: 4px;
}
.gv-activated .gv-max-tab-mr-xs {
margin-right: 4px;
}
.gv-activated .gv-max-tab-mx-xs {
margin-left: 4px;
margin-right: 4px;
}
.gv-activated .gv-max-tab-my-xs {
margin-top: 4px;
margin-bottom: 4px;
}
.gv-activated .gv-max-tab-m-sm {
margin: 8px;
}
.gv-activated .gv-max-tab-mt-sm {
margin-top: 8px;
}
.gv-activated .gv-max-tab-mb-sm {
margin-bottom: 8px;
}
.gv-activated .gv-max-tab-ml-sm {
margin-left: 8px;
}
.gv-activated .gv-max-tab-mr-sm {
margin-right: 8px;
}
.gv-activated .gv-max-tab-mx-sm {
margin-left: 8px;
margin-right: 8px;
}
.gv-activated .gv-max-tab-my-sm {
margin-top: 8px;
margin-bottom: 8px;
}
.gv-activated .gv-max-tab-m-md {
margin: 16px;
}
.gv-activated .gv-max-tab-mt-md {
margin-top: 16px;
}
.gv-activated .gv-max-tab-mb-md {
margin-bottom: 16px;
}
.gv-activated .gv-max-tab-ml-md {
margin-left: 16px;
}
.gv-activated .gv-max-tab-mr-md {
margin-right: 16px;
}
.gv-activated .gv-max-tab-mx-md {
margin-left: 16px;
margin-right: 16px;
}
.gv-activated .gv-max-tab-my-md {
margin-top: 16px;
margin-bottom: 16px;
}
.gv-activated .gv-max-tab-m-lg {
margin: 24px;
}
.gv-activated .gv-max-tab-mt-lg {
margin-top: 24px;
}
.gv-activated .gv-max-tab-mb-lg {
margin-bottom: 24px;
}
.gv-activated .gv-max-tab-ml-lg {
margin-left: 24px;
}
.gv-activated .gv-max-tab-mr-lg {
margin-right: 24px;
}
.gv-activated .gv-max-tab-mx-lg {
margin-left: 24px;
margin-right: 24px;
}
.gv-activated .gv-max-tab-my-lg {
margin-top: 24px;
margin-bottom: 24px;
}
.gv-activated .gv-max-tab-m-auto {
margin: auto;
}
.gv-activated .gv-max-tab-mt-auto {
margin-top: auto;
}
.gv-activated .gv-max-tab-mb-auto {
margin-bottom: auto;
}
.gv-activated .gv-max-tab-ml-auto {
margin-left: auto;
}
.gv-activated .gv-max-tab-mr-auto {
margin-right: auto;
}
.gv-activated .gv-max-tab-mx-auto {
margin-left: auto;
margin-right: auto;
}
.gv-activated .gv-max-tab-my-auto {
margin-top: auto;
margin-bottom: auto;
}
.gv-activated .gv-max-tab-p-0 {
padding: 0 !important;
}
.gv-activated .gv-max-tab-pt-0 {
padding-top: 0 !important;
}
.gv-activated .gv-max-tab-pb-0 {
padding-bottom: 0 !important;
}
.gv-activated .gv-max-tab-pl-0 {
padding-left: 0 !important;
}
.gv-activated .gv-max-tab-pr-0 {
padding-right: 0 !important;
}
.gv-activated .gv-max-tab-px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-max-tab-py-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-max-tab-p-xs {
padding: 4px;
}
.gv-activated .gv-max-tab-pt-xs {
padding-top: 4px;
}
.gv-activated .gv-max-tab-pb-xs {
padding-bottom: 4px;
}
.gv-activated .gv-max-tab-pl-xs {
padding-left: 4px;
}
.gv-activated .gv-max-tab-pr-xs {
padding-right: 4px;
}
.gv-activated .gv-max-tab-px-xs {
padding-left: 4px;
padding-right: 4px;
}
.gv-activated .gv-max-tab-py-xs {
padding-top: 4px;
padding-bottom: 4px;
}
.gv-activated .gv-max-tab-p-sm {
padding: 8px;
}
.gv-activated .gv-max-tab-pt-sm {
padding-top: 8px;
}
.gv-activated .gv-max-tab-pb-sm {
padding-bottom: 8px;
}
.gv-activated .gv-max-tab-pl-sm {
padding-left: 8px;
}
.gv-activated .gv-max-tab-pr-sm {
padding-right: 8px;
}
.gv-activated .gv-max-tab-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.gv-activated .gv-max-tab-py-sm {
padding-top: 8px;
padding-bottom: 8px;
}
.gv-activated .gv-max-tab-p-md {
padding: 16px;
}
.gv-activated .gv-max-tab-pt-md {
padding-top: 16px;
}
.gv-activated .gv-max-tab-pb-md {
padding-bottom: 16px;
}
.gv-activated .gv-max-tab-pl-md {
padding-left: 16px;
}
.gv-activated .gv-max-tab-pr-md {
padding-right: 16px;
}
.gv-activated .gv-max-tab-px-md {
padding-left: 16px;
padding-right: 16px;
}
.gv-activated .gv-max-tab-py-md {
padding-top: 16px;
padding-bottom: 16px;
}
.gv-activated .gv-max-tab-p-lg {
padding: 24px;
}
.gv-activated .gv-max-tab-pt-lg {
padding-top: 24px;
}
.gv-activated .gv-max-tab-pb-lg {
padding-bottom: 24px;
}
.gv-activated .gv-max-tab-pl-lg {
padding-left: 24px;
}
.gv-activated .gv-max-tab-pr-lg {
padding-right: 24px;
}
.gv-activated .gv-max-tab-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.gv-activated .gv-max-tab-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.gv-activated .gv-max-tab-stack-space-xs > *:not(:last-child) {
margin-bottom: 4px;
}
.gv-activated .gv-max-tab-stack-space-sm > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-max-tab-stack-space-md > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated .gv-max-tab-stack-space-lg > *:not(:last-child) {
margin-bottom: 24px;
}
.gv-activated .gv-max-tab-text-left {
text-align: left;
}
.gv-activated .gv-max-tab-text-center {
text-align: center;
}
.gv-activated .gv-max-tab-text-right {
text-align: right;
}
}
@media (min-width: 1024px ) {
.gv-activated {
/* Border */
/* Flexbox and grid */
/* Hide */
/* Spacing */
/* Text */
}
.gv-activated .gv-desk-border {
border: 1px solid var(--color-border);
}
.gv-activated .gv-desk-border-t {
border-top: 1px solid var(--color-border);
}
.gv-activated .gv-desk-border-b {
border-bottom: 1px solid var(--color-border);
}
.gv-activated .gv-desk-border-l {
border-left: 1px solid var(--color-border);
}
.gv-activated .gv-desk-border-r {
border-right: 1px solid var(--color-border);
}
.gv-activated .gv-desk-border-alt {
border: 1px solid var(--color-border-alt);
}
.gv-activated .gv-desk-border-alt-t {
border-top: 1px solid var(--color-border-alt);
}
.gv-activated .gv-desk-border-alt-b {
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .gv-desk-border-alt-l {
border-left: 1px solid var(--color-border-alt);
}
.gv-activated .gv-desk-border-alt-r {
border-right: 1px solid var(--color-border-alt);
}
.gv-activated .gv-desk-border-0 {
border: none !important;
}
.gv-activated .gv-desk-radius {
border-radius: var(--border-radius);
}
.gv-activated .gv-desk-radius-tl {
border-top-left-radius: var(--border-radius);
}
.gv-activated .gv-desk-radius-tr {
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-desk-radius-bl {
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-desk-radius-br {
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-desk-radius-t {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-desk-radius-r {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-desk-radius-b {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-desk-radius-l {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-desk-radius-0 {
border-radius: 0 !important;
}
.gv-activated .gv-desk-flex-row {
flex-direction: row;
}
.gv-activated .gv-desk-flex-row-reverse {
flex-direction: row-reverse;
}
.gv-activated .gv-desk-flex-col {
flex-direction: column;
}
.gv-activated .gv-desk-flex-col-reverse {
flex-direction: column-reverse;
}
.gv-activated .gv-desk-content-center {
align-content: center;
}
.gv-activated .gv-desk-items-start {
align-items: flex-start;
}
.gv-activated .gv-desk-items-end {
align-items: flex-end;
}
.gv-activated .gv-desk-items-center {
align-items: center;
}
.gv-activated .gv-desk-items-baseline {
align-items: baseline;
}
.gv-activated .gv-desk-items-stretch {
align-items: stretch;
}
.gv-activated .gv-desk-justify-start {
justify-content: flex-start;
}
.gv-activated .gv-desk-justify-end {
justify-content: flex-end;
}
.gv-activated .gv-desk-justify-center {
justify-content: center;
}
.gv-activated .gv-desk-justify-between {
justify-content: space-between;
}
.gv-activated .gv-desk-justify-around {
justify-content: space-around;
}
.gv-activated .gv-desk-justify-evenly {
justify-content: space-evenly;
}
.gv-activated .gv-desk-order-first {
order: -1;
}
.gv-activated .gv-desk-order-last {
order: 99;
}
.gv-activated .gv-desk-gap-xs {
gap: 4px;
}
.gv-activated .gv-desk-gap-sm {
gap: 8px;
}
.gv-activated .gv-desk-gap-md {
gap: 16px;
}
.gv-activated .gv-desk-gap-lg {
gap: 24px;
}
.gv-activated .gv-desk-gap-0 {
gap: 0 !important;
}
.gv-activated .gv-desk-flex {
display: flex;
}
.gv-activated .gv-desk-block {
display: block;
}
.gv-activated .gv-desk-inline {
display: inline;
}
.gv-activated .gv-desk-inline-block {
display: inline-block;
}
.gv-activated .gv-desk-hidden {
display: none;
}
.gv-activated .gv-desk-invisible {
visibility: hidden;
}
.gv-activated .gv-desk-collapse {
visibility: collapse;
}
.gv-activated .gv-desk-m-0 {
margin: 0 !important;
}
.gv-activated .gv-desk-mt-0 {
margin-top: 0 !important;
}
.gv-activated .gv-desk-mb-0 {
margin-bottom: 0 !important;
}
.gv-activated .gv-desk-ml-0 {
margin-left: 0 !important;
}
.gv-activated .gv-desk-mr-0 {
margin-right: 0 !important;
}
.gv-activated .gv-desk-mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-desk-my-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-desk-m-xs {
margin: 4px;
}
.gv-activated .gv-desk-mt-xs {
margin-top: 4px;
}
.gv-activated .gv-desk-mb-xs {
margin-bottom: 4px;
}
.gv-activated .gv-desk-ml-xs {
margin-left: 4px;
}
.gv-activated .gv-desk-mr-xs {
margin-right: 4px;
}
.gv-activated .gv-desk-mx-xs {
margin-left: 4px;
margin-right: 4px;
}
.gv-activated .gv-desk-my-xs {
margin-top: 4px;
margin-bottom: 4px;
}
.gv-activated .gv-desk-m-sm {
margin: 8px;
}
.gv-activated .gv-desk-mt-sm {
margin-top: 8px;
}
.gv-activated .gv-desk-mb-sm {
margin-bottom: 8px;
}
.gv-activated .gv-desk-ml-sm {
margin-left: 8px;
}
.gv-activated .gv-desk-mr-sm {
margin-right: 8px;
}
.gv-activated .gv-desk-mx-sm {
margin-left: 8px;
margin-right: 8px;
}
.gv-activated .gv-desk-my-sm {
margin-top: 8px;
margin-bottom: 8px;
}
.gv-activated .gv-desk-m-md {
margin: 16px;
}
.gv-activated .gv-desk-mt-md {
margin-top: 16px;
}
.gv-activated .gv-desk-mb-md {
margin-bottom: 16px;
}
.gv-activated .gv-desk-ml-md {
margin-left: 16px;
}
.gv-activated .gv-desk-mr-md {
margin-right: 16px;
}
.gv-activated .gv-desk-mx-md {
margin-left: 16px;
margin-right: 16px;
}
.gv-activated .gv-desk-my-md {
margin-top: 16px;
margin-bottom: 16px;
}
.gv-activated .gv-desk-m-lg {
margin: 24px;
}
.gv-activated .gv-desk-mt-lg {
margin-top: 24px;
}
.gv-activated .gv-desk-mb-lg {
margin-bottom: 24px;
}
.gv-activated .gv-desk-ml-lg {
margin-left: 24px;
}
.gv-activated .gv-desk-mr-lg {
margin-right: 24px;
}
.gv-activated .gv-desk-mx-lg {
margin-left: 24px;
margin-right: 24px;
}
.gv-activated .gv-desk-my-lg {
margin-top: 24px;
margin-bottom: 24px;
}
.gv-activated .gv-desk-m-auto {
margin: auto;
}
.gv-activated .gv-desk-mt-auto {
margin-top: auto;
}
.gv-activated .gv-desk-mb-auto {
margin-bottom: auto;
}
.gv-activated .gv-desk-ml-auto {
margin-left: auto;
}
.gv-activated .gv-desk-mr-auto {
margin-right: auto;
}
.gv-activated .gv-desk-mx-auto {
margin-left: auto;
margin-right: auto;
}
.gv-activated .gv-desk-my-auto {
margin-top: auto;
margin-bottom: auto;
}
.gv-activated .gv-desk-p-0 {
padding: 0 !important;
}
.gv-activated .gv-desk-pt-0 {
padding-top: 0 !important;
}
.gv-activated .gv-desk-pb-0 {
padding-bottom: 0 !important;
}
.gv-activated .gv-desk-pl-0 {
padding-left: 0 !important;
}
.gv-activated .gv-desk-pr-0 {
padding-right: 0 !important;
}
.gv-activated .gv-desk-px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-desk-py-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-desk-p-xs {
padding: 4px;
}
.gv-activated .gv-desk-pt-xs {
padding-top: 4px;
}
.gv-activated .gv-desk-pb-xs {
padding-bottom: 4px;
}
.gv-activated .gv-desk-pl-xs {
padding-left: 4px;
}
.gv-activated .gv-desk-pr-xs {
padding-right: 4px;
}
.gv-activated .gv-desk-px-xs {
padding-left: 4px;
padding-right: 4px;
}
.gv-activated .gv-desk-py-xs {
padding-top: 4px;
padding-bottom: 4px;
}
.gv-activated .gv-desk-p-sm {
padding: 8px;
}
.gv-activated .gv-desk-pt-sm {
padding-top: 8px;
}
.gv-activated .gv-desk-pb-sm {
padding-bottom: 8px;
}
.gv-activated .gv-desk-pl-sm {
padding-left: 8px;
}
.gv-activated .gv-desk-pr-sm {
padding-right: 8px;
}
.gv-activated .gv-desk-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.gv-activated .gv-desk-py-sm {
padding-top: 8px;
padding-bottom: 8px;
}
.gv-activated .gv-desk-p-md {
padding: 16px;
}
.gv-activated .gv-desk-pt-md {
padding-top: 16px;
}
.gv-activated .gv-desk-pb-md {
padding-bottom: 16px;
}
.gv-activated .gv-desk-pl-md {
padding-left: 16px;
}
.gv-activated .gv-desk-pr-md {
padding-right: 16px;
}
.gv-activated .gv-desk-px-md {
padding-left: 16px;
padding-right: 16px;
}
.gv-activated .gv-desk-py-md {
padding-top: 16px;
padding-bottom: 16px;
}
.gv-activated .gv-desk-p-lg {
padding: 24px;
}
.gv-activated .gv-desk-pt-lg {
padding-top: 24px;
}
.gv-activated .gv-desk-pb-lg {
padding-bottom: 24px;
}
.gv-activated .gv-desk-pl-lg {
padding-left: 24px;
}
.gv-activated .gv-desk-pr-lg {
padding-right: 24px;
}
.gv-activated .gv-desk-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.gv-activated .gv-desk-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.gv-activated .gv-desk-stack-space-xs > *:not(:last-child) {
margin-bottom: 4px;
}
.gv-activated .gv-desk-stack-space-sm > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-desk-stack-space-md > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated .gv-desk-stack-space-lg > *:not(:last-child) {
margin-bottom: 24px;
}
.gv-activated .gv-desk-text-left {
text-align: left;
}
.gv-activated .gv-desk-text-center {
text-align: center;
}
.gv-activated .gv-desk-text-right {
text-align: right;
}
}
@media (max-width: 1279px ) {
.gv-activated {
/* Border */
/* Flexbox and grid */
/* Hide */
/* Spacing */
/* Text */
}
.gv-activated .gv-max-desk-sm-border {
border: 1px solid var(--color-border);
}
.gv-activated .gv-max-desk-sm-border-t {
border-top: 1px solid var(--color-border);
}
.gv-activated .gv-max-desk-sm-border-b {
border-bottom: 1px solid var(--color-border);
}
.gv-activated .gv-max-desk-sm-border-l {
border-left: 1px solid var(--color-border);
}
.gv-activated .gv-max-desk-sm-border-r {
border-right: 1px solid var(--color-border);
}
.gv-activated .gv-max-desk-sm-border-alt {
border: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-desk-sm-border-alt-t {
border-top: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-desk-sm-border-alt-b {
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-desk-sm-border-alt-l {
border-left: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-desk-sm-border-alt-r {
border-right: 1px solid var(--color-border-alt);
}
.gv-activated .gv-max-desk-sm-border-0 {
border: none !important;
}
.gv-activated .gv-max-desk-sm-radius {
border-radius: var(--border-radius);
}
.gv-activated .gv-max-desk-sm-radius-tl {
border-top-left-radius: var(--border-radius);
}
.gv-activated .gv-max-desk-sm-radius-tr {
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-max-desk-sm-radius-bl {
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-max-desk-sm-radius-br {
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-max-desk-sm-radius-t {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-max-desk-sm-radius-r {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-max-desk-sm-radius-b {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-max-desk-sm-radius-l {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-max-desk-sm-radius-0 {
border-radius: 0 !important;
}
.gv-activated .gv-max-desk-sm-flex-row {
flex-direction: row;
}
.gv-activated .gv-max-desk-sm-flex-row-reverse {
flex-direction: row-reverse;
}
.gv-activated .gv-max-desk-sm-flex-col {
flex-direction: column;
}
.gv-activated .gv-max-desk-sm-flex-col-reverse {
flex-direction: column-reverse;
}
.gv-activated .gv-max-desk-sm-content-center {
align-content: center;
}
.gv-activated .gv-max-desk-sm-items-start {
align-items: flex-start;
}
.gv-activated .gv-max-desk-sm-items-end {
align-items: flex-end;
}
.gv-activated .gv-max-desk-sm-items-center {
align-items: center;
}
.gv-activated .gv-max-desk-sm-items-baseline {
align-items: baseline;
}
.gv-activated .gv-max-desk-sm-items-stretch {
align-items: stretch;
}
.gv-activated .gv-max-desk-sm-justify-start {
justify-content: flex-start;
}
.gv-activated .gv-max-desk-sm-justify-end {
justify-content: flex-end;
}
.gv-activated .gv-max-desk-sm-justify-center {
justify-content: center;
}
.gv-activated .gv-max-desk-sm-justify-between {
justify-content: space-between;
}
.gv-activated .gv-max-desk-sm-justify-around {
justify-content: space-around;
}
.gv-activated .gv-max-desk-sm-justify-evenly {
justify-content: space-evenly;
}
.gv-activated .gv-max-desk-sm-order-first {
order: -1;
}
.gv-activated .gv-max-desk-sm-order-last {
order: 99;
}
.gv-activated .gv-max-desk-sm-gap-xs {
gap: 4px;
}
.gv-activated .gv-max-desk-sm-gap-sm {
gap: 8px;
}
.gv-activated .gv-max-desk-sm-gap-md {
gap: 16px;
}
.gv-activated .gv-max-desk-sm-gap-lg {
gap: 24px;
}
.gv-activated .gv-max-desk-sm-gap-0 {
gap: 0 !important;
}
.gv-activated .gv-max-desk-sm-flex {
display: flex;
}
.gv-activated .gv-max-desk-sm-block {
display: block;
}
.gv-activated .gv-max-desk-sm-inline {
display: inline;
}
.gv-activated .gv-max-desk-sm-inline-block {
display: inline-block;
}
.gv-activated .gv-max-desk-sm-hidden {
display: none;
}
.gv-activated .gv-max-desk-sm-invisible {
visibility: hidden;
}
.gv-activated .gv-max-desk-sm-collapse {
visibility: collapse;
}
.gv-activated .gv-max-desk-sm-m-0 {
margin: 0 !important;
}
.gv-activated .gv-max-desk-sm-mt-0 {
margin-top: 0 !important;
}
.gv-activated .gv-max-desk-sm-mb-0 {
margin-bottom: 0 !important;
}
.gv-activated .gv-max-desk-sm-ml-0 {
margin-left: 0 !important;
}
.gv-activated .gv-max-desk-sm-mr-0 {
margin-right: 0 !important;
}
.gv-activated .gv-max-desk-sm-mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-max-desk-sm-my-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-max-desk-sm-m-xs {
margin: 4px;
}
.gv-activated .gv-max-desk-sm-mt-xs {
margin-top: 4px;
}
.gv-activated .gv-max-desk-sm-mb-xs {
margin-bottom: 4px;
}
.gv-activated .gv-max-desk-sm-ml-xs {
margin-left: 4px;
}
.gv-activated .gv-max-desk-sm-mr-xs {
margin-right: 4px;
}
.gv-activated .gv-max-desk-sm-mx-xs {
margin-left: 4px;
margin-right: 4px;
}
.gv-activated .gv-max-desk-sm-my-xs {
margin-top: 4px;
margin-bottom: 4px;
}
.gv-activated .gv-max-desk-sm-m-sm {
margin: 8px;
}
.gv-activated .gv-max-desk-sm-mt-sm {
margin-top: 8px;
}
.gv-activated .gv-max-desk-sm-mb-sm {
margin-bottom: 8px;
}
.gv-activated .gv-max-desk-sm-ml-sm {
margin-left: 8px;
}
.gv-activated .gv-max-desk-sm-mr-sm {
margin-right: 8px;
}
.gv-activated .gv-max-desk-sm-mx-sm {
margin-left: 8px;
margin-right: 8px;
}
.gv-activated .gv-max-desk-sm-my-sm {
margin-top: 8px;
margin-bottom: 8px;
}
.gv-activated .gv-max-desk-sm-m-md {
margin: 16px;
}
.gv-activated .gv-max-desk-sm-mt-md {
margin-top: 16px;
}
.gv-activated .gv-max-desk-sm-mb-md {
margin-bottom: 16px;
}
.gv-activated .gv-max-desk-sm-ml-md {
margin-left: 16px;
}
.gv-activated .gv-max-desk-sm-mr-md {
margin-right: 16px;
}
.gv-activated .gv-max-desk-sm-mx-md {
margin-left: 16px;
margin-right: 16px;
}
.gv-activated .gv-max-desk-sm-my-md {
margin-top: 16px;
margin-bottom: 16px;
}
.gv-activated .gv-max-desk-sm-m-lg {
margin: 24px;
}
.gv-activated .gv-max-desk-sm-mt-lg {
margin-top: 24px;
}
.gv-activated .gv-max-desk-sm-mb-lg {
margin-bottom: 24px;
}
.gv-activated .gv-max-desk-sm-ml-lg {
margin-left: 24px;
}
.gv-activated .gv-max-desk-sm-mr-lg {
margin-right: 24px;
}
.gv-activated .gv-max-desk-sm-mx-lg {
margin-left: 24px;
margin-right: 24px;
}
.gv-activated .gv-max-desk-sm-my-lg {
margin-top: 24px;
margin-bottom: 24px;
}
.gv-activated .gv-max-desk-sm-m-auto {
margin: auto;
}
.gv-activated .gv-max-desk-sm-mt-auto {
margin-top: auto;
}
.gv-activated .gv-max-desk-sm-mb-auto {
margin-bottom: auto;
}
.gv-activated .gv-max-desk-sm-ml-auto {
margin-left: auto;
}
.gv-activated .gv-max-desk-sm-mr-auto {
margin-right: auto;
}
.gv-activated .gv-max-desk-sm-mx-auto {
margin-left: auto;
margin-right: auto;
}
.gv-activated .gv-max-desk-sm-my-auto {
margin-top: auto;
margin-bottom: auto;
}
.gv-activated .gv-max-desk-sm-p-0 {
padding: 0 !important;
}
.gv-activated .gv-max-desk-sm-pt-0 {
padding-top: 0 !important;
}
.gv-activated .gv-max-desk-sm-pb-0 {
padding-bottom: 0 !important;
}
.gv-activated .gv-max-desk-sm-pl-0 {
padding-left: 0 !important;
}
.gv-activated .gv-max-desk-sm-pr-0 {
padding-right: 0 !important;
}
.gv-activated .gv-max-desk-sm-px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-max-desk-sm-py-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-max-desk-sm-p-xs {
padding: 4px;
}
.gv-activated .gv-max-desk-sm-pt-xs {
padding-top: 4px;
}
.gv-activated .gv-max-desk-sm-pb-xs {
padding-bottom: 4px;
}
.gv-activated .gv-max-desk-sm-pl-xs {
padding-left: 4px;
}
.gv-activated .gv-max-desk-sm-pr-xs {
padding-right: 4px;
}
.gv-activated .gv-max-desk-sm-px-xs {
padding-left: 4px;
padding-right: 4px;
}
.gv-activated .gv-max-desk-sm-py-xs {
padding-top: 4px;
padding-bottom: 4px;
}
.gv-activated .gv-max-desk-sm-p-sm {
padding: 8px;
}
.gv-activated .gv-max-desk-sm-pt-sm {
padding-top: 8px;
}
.gv-activated .gv-max-desk-sm-pb-sm {
padding-bottom: 8px;
}
.gv-activated .gv-max-desk-sm-pl-sm {
padding-left: 8px;
}
.gv-activated .gv-max-desk-sm-pr-sm {
padding-right: 8px;
}
.gv-activated .gv-max-desk-sm-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.gv-activated .gv-max-desk-sm-py-sm {
padding-top: 8px;
padding-bottom: 8px;
}
.gv-activated .gv-max-desk-sm-p-md {
padding: 16px;
}
.gv-activated .gv-max-desk-sm-pt-md {
padding-top: 16px;
}
.gv-activated .gv-max-desk-sm-pb-md {
padding-bottom: 16px;
}
.gv-activated .gv-max-desk-sm-pl-md {
padding-left: 16px;
}
.gv-activated .gv-max-desk-sm-pr-md {
padding-right: 16px;
}
.gv-activated .gv-max-desk-sm-px-md {
padding-left: 16px;
padding-right: 16px;
}
.gv-activated .gv-max-desk-sm-py-md {
padding-top: 16px;
padding-bottom: 16px;
}
.gv-activated .gv-max-desk-sm-p-lg {
padding: 24px;
}
.gv-activated .gv-max-desk-sm-pt-lg {
padding-top: 24px;
}
.gv-activated .gv-max-desk-sm-pb-lg {
padding-bottom: 24px;
}
.gv-activated .gv-max-desk-sm-pl-lg {
padding-left: 24px;
}
.gv-activated .gv-max-desk-sm-pr-lg {
padding-right: 24px;
}
.gv-activated .gv-max-desk-sm-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.gv-activated .gv-max-desk-sm-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.gv-activated .gv-max-desk-sm-stack-space-xs > *:not(:last-child) {
margin-bottom: 4px;
}
.gv-activated .gv-max-desk-sm-stack-space-sm > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-max-desk-sm-stack-space-md > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated .gv-max-desk-sm-stack-space-lg > *:not(:last-child) {
margin-bottom: 24px;
}
.gv-activated .gv-max-desk-sm-text-left {
text-align: left;
}
.gv-activated .gv-max-desk-sm-text-center {
text-align: center;
}
.gv-activated .gv-max-desk-sm-text-right {
text-align: right;
}
}
@media (min-width: 1280px ) {
.gv-activated {
/* Border */
/* Flexbox and grid */
/* Hide */
/* Spacing */
/* Text */
}
.gv-activated .gv-desk-lg-border {
border: 1px solid var(--color-border);
}
.gv-activated .gv-desk-lg-border-t {
border-top: 1px solid var(--color-border);
}
.gv-activated .gv-desk-lg-border-b {
border-bottom: 1px solid var(--color-border);
}
.gv-activated .gv-desk-lg-border-l {
border-left: 1px solid var(--color-border);
}
.gv-activated .gv-desk-lg-border-r {
border-right: 1px solid var(--color-border);
}
.gv-activated .gv-desk-lg-border-alt {
border: 1px solid var(--color-border-alt);
}
.gv-activated .gv-desk-lg-border-alt-t {
border-top: 1px solid var(--color-border-alt);
}
.gv-activated .gv-desk-lg-border-alt-b {
border-bottom: 1px solid var(--color-border-alt);
}
.gv-activated .gv-desk-lg-border-alt-l {
border-left: 1px solid var(--color-border-alt);
}
.gv-activated .gv-desk-lg-border-alt-r {
border-right: 1px solid var(--color-border-alt);
}
.gv-activated .gv-desk-lg-border-0 {
border: none !important;
}
.gv-activated .gv-desk-lg-radius {
border-radius: var(--border-radius);
}
.gv-activated .gv-desk-lg-radius-tl {
border-top-left-radius: var(--border-radius);
}
.gv-activated .gv-desk-lg-radius-tr {
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-desk-lg-radius-bl {
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-desk-lg-radius-br {
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-desk-lg-radius-t {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.gv-activated .gv-desk-lg-radius-r {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-desk-lg-radius-b {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.gv-activated .gv-desk-lg-radius-l {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.gv-activated .gv-desk-lg-radius-0 {
border-radius: 0 !important;
}
.gv-activated .gv-desk-lg-flex-row {
flex-direction: row;
}
.gv-activated .gv-desk-lg-flex-row-reverse {
flex-direction: row-reverse;
}
.gv-activated .gv-desk-lg-flex-col {
flex-direction: column;
}
.gv-activated .gv-desk-lg-flex-col-reverse {
flex-direction: column-reverse;
}
.gv-activated .gv-desk-lg-content-center {
align-content: center;
}
.gv-activated .gv-desk-lg-items-start {
align-items: flex-start;
}
.gv-activated .gv-desk-lg-items-end {
align-items: flex-end;
}
.gv-activated .gv-desk-lg-items-center {
align-items: center;
}
.gv-activated .gv-desk-lg-items-baseline {
align-items: baseline;
}
.gv-activated .gv-desk-lg-items-stretch {
align-items: stretch;
}
.gv-activated .gv-desk-lg-justify-start {
justify-content: flex-start;
}
.gv-activated .gv-desk-lg-justify-end {
justify-content: flex-end;
}
.gv-activated .gv-desk-lg-justify-center {
justify-content: center;
}
.gv-activated .gv-desk-lg-justify-between {
justify-content: space-between;
}
.gv-activated .gv-desk-lg-justify-around {
justify-content: space-around;
}
.gv-activated .gv-desk-lg-justify-evenly {
justify-content: space-evenly;
}
.gv-activated .gv-desk-lg-order-first {
order: -1;
}
.gv-activated .gv-desk-lg-order-last {
order: 99;
}
.gv-activated .gv-desk-lg-gap-xs {
gap: 4px;
}
.gv-activated .gv-desk-lg-gap-sm {
gap: 8px;
}
.gv-activated .gv-desk-lg-gap-md {
gap: 16px;
}
.gv-activated .gv-desk-lg-gap-lg {
gap: 24px;
}
.gv-activated .gv-desk-lg-gap-0 {
gap: 0 !important;
}
.gv-activated .gv-desk-lg-flex {
display: flex;
}
.gv-activated .gv-desk-lg-block {
display: block;
}
.gv-activated .gv-desk-lg-inline {
display: inline;
}
.gv-activated .gv-desk-lg-inline-block {
display: inline-block;
}
.gv-activated .gv-desk-lg-hidden {
display: none;
}
.gv-activated .gv-desk-lg-invisible {
visibility: hidden;
}
.gv-activated .gv-desk-lg-collapse {
visibility: collapse;
}
.gv-activated .gv-desk-lg-m-0 {
margin: 0 !important;
}
.gv-activated .gv-desk-lg-mt-0 {
margin-top: 0 !important;
}
.gv-activated .gv-desk-lg-mb-0 {
margin-bottom: 0 !important;
}
.gv-activated .gv-desk-lg-ml-0 {
margin-left: 0 !important;
}
.gv-activated .gv-desk-lg-mr-0 {
margin-right: 0 !important;
}
.gv-activated .gv-desk-lg-mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-desk-lg-my-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gv-activated .gv-desk-lg-m-xs {
margin: 4px;
}
.gv-activated .gv-desk-lg-mt-xs {
margin-top: 4px;
}
.gv-activated .gv-desk-lg-mb-xs {
margin-bottom: 4px;
}
.gv-activated .gv-desk-lg-ml-xs {
margin-left: 4px;
}
.gv-activated .gv-desk-lg-mr-xs {
margin-right: 4px;
}
.gv-activated .gv-desk-lg-mx-xs {
margin-left: 4px;
margin-right: 4px;
}
.gv-activated .gv-desk-lg-my-xs {
margin-top: 4px;
margin-bottom: 4px;
}
.gv-activated .gv-desk-lg-m-sm {
margin: 8px;
}
.gv-activated .gv-desk-lg-mt-sm {
margin-top: 8px;
}
.gv-activated .gv-desk-lg-mb-sm {
margin-bottom: 8px;
}
.gv-activated .gv-desk-lg-ml-sm {
margin-left: 8px;
}
.gv-activated .gv-desk-lg-mr-sm {
margin-right: 8px;
}
.gv-activated .gv-desk-lg-mx-sm {
margin-left: 8px;
margin-right: 8px;
}
.gv-activated .gv-desk-lg-my-sm {
margin-top: 8px;
margin-bottom: 8px;
}
.gv-activated .gv-desk-lg-m-md {
margin: 16px;
}
.gv-activated .gv-desk-lg-mt-md {
margin-top: 16px;
}
.gv-activated .gv-desk-lg-mb-md {
margin-bottom: 16px;
}
.gv-activated .gv-desk-lg-ml-md {
margin-left: 16px;
}
.gv-activated .gv-desk-lg-mr-md {
margin-right: 16px;
}
.gv-activated .gv-desk-lg-mx-md {
margin-left: 16px;
margin-right: 16px;
}
.gv-activated .gv-desk-lg-my-md {
margin-top: 16px;
margin-bottom: 16px;
}
.gv-activated .gv-desk-lg-m-lg {
margin: 24px;
}
.gv-activated .gv-desk-lg-mt-lg {
margin-top: 24px;
}
.gv-activated .gv-desk-lg-mb-lg {
margin-bottom: 24px;
}
.gv-activated .gv-desk-lg-ml-lg {
margin-left: 24px;
}
.gv-activated .gv-desk-lg-mr-lg {
margin-right: 24px;
}
.gv-activated .gv-desk-lg-mx-lg {
margin-left: 24px;
margin-right: 24px;
}
.gv-activated .gv-desk-lg-my-lg {
margin-top: 24px;
margin-bottom: 24px;
}
.gv-activated .gv-desk-lg-m-auto {
margin: auto;
}
.gv-activated .gv-desk-lg-mt-auto {
margin-top: auto;
}
.gv-activated .gv-desk-lg-mb-auto {
margin-bottom: auto;
}
.gv-activated .gv-desk-lg-ml-auto {
margin-left: auto;
}
.gv-activated .gv-desk-lg-mr-auto {
margin-right: auto;
}
.gv-activated .gv-desk-lg-mx-auto {
margin-left: auto;
margin-right: auto;
}
.gv-activated .gv-desk-lg-my-auto {
margin-top: auto;
margin-bottom: auto;
}
.gv-activated .gv-desk-lg-p-0 {
padding: 0 !important;
}
.gv-activated .gv-desk-lg-pt-0 {
padding-top: 0 !important;
}
.gv-activated .gv-desk-lg-pb-0 {
padding-bottom: 0 !important;
}
.gv-activated .gv-desk-lg-pl-0 {
padding-left: 0 !important;
}
.gv-activated .gv-desk-lg-pr-0 {
padding-right: 0 !important;
}
.gv-activated .gv-desk-lg-px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-desk-lg-py-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gv-activated .gv-desk-lg-p-xs {
padding: 4px;
}
.gv-activated .gv-desk-lg-pt-xs {
padding-top: 4px;
}
.gv-activated .gv-desk-lg-pb-xs {
padding-bottom: 4px;
}
.gv-activated .gv-desk-lg-pl-xs {
padding-left: 4px;
}
.gv-activated .gv-desk-lg-pr-xs {
padding-right: 4px;
}
.gv-activated .gv-desk-lg-px-xs {
padding-left: 4px;
padding-right: 4px;
}
.gv-activated .gv-desk-lg-py-xs {
padding-top: 4px;
padding-bottom: 4px;
}
.gv-activated .gv-desk-lg-p-sm {
padding: 8px;
}
.gv-activated .gv-desk-lg-pt-sm {
padding-top: 8px;
}
.gv-activated .gv-desk-lg-pb-sm {
padding-bottom: 8px;
}
.gv-activated .gv-desk-lg-pl-sm {
padding-left: 8px;
}
.gv-activated .gv-desk-lg-pr-sm {
padding-right: 8px;
}
.gv-activated .gv-desk-lg-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.gv-activated .gv-desk-lg-py-sm {
padding-top: 8px;
padding-bottom: 8px;
}
.gv-activated .gv-desk-lg-p-md {
padding: 16px;
}
.gv-activated .gv-desk-lg-pt-md {
padding-top: 16px;
}
.gv-activated .gv-desk-lg-pb-md {
padding-bottom: 16px;
}
.gv-activated .gv-desk-lg-pl-md {
padding-left: 16px;
}
.gv-activated .gv-desk-lg-pr-md {
padding-right: 16px;
}
.gv-activated .gv-desk-lg-px-md {
padding-left: 16px;
padding-right: 16px;
}
.gv-activated .gv-desk-lg-py-md {
padding-top: 16px;
padding-bottom: 16px;
}
.gv-activated .gv-desk-lg-p-lg {
padding: 24px;
}
.gv-activated .gv-desk-lg-pt-lg {
padding-top: 24px;
}
.gv-activated .gv-desk-lg-pb-lg {
padding-bottom: 24px;
}
.gv-activated .gv-desk-lg-pl-lg {
padding-left: 24px;
}
.gv-activated .gv-desk-lg-pr-lg {
padding-right: 24px;
}
.gv-activated .gv-desk-lg-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.gv-activated .gv-desk-lg-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.gv-activated .gv-desk-lg-stack-space-xs > *:not(:last-child) {
margin-bottom: 4px;
}
.gv-activated .gv-desk-lg-stack-space-sm > *:not(:last-child) {
margin-bottom: 8px;
}
.gv-activated .gv-desk-lg-stack-space-md > *:not(:last-child) {
margin-bottom: 16px;
}
.gv-activated .gv-desk-lg-stack-space-lg > *:not(:last-child) {
margin-bottom: 24px;
}
.gv-activated .gv-desk-lg-text-left {
text-align: left;
}
.gv-activated .gv-desk-lg-text-center {
text-align: center;
}
.gv-activated .gv-desk-lg-text-right {
text-align: right;
}
}
/* Brand bootstrapping */
.gv-activated {
/* Universal sizes */
--size-xs: 4px;
--size-sm: 8px;
--size-md: 16px;
--size-lg: 24px;
--size-xl: 48px;
--size-border: 1px;
--size-container-max: 1536px;
/* Fluid */
--size-fluid-max-value: 48;
--size-fluid-min-value: 24;
--size-fluid: var(--size-fluid-min-value);
/* Icon sizes */
--size-icon-xs: var(--size-md);
--size-icon-sm: 20px;
--size-icon-md: var(--size-lg);
/* Tile sizes */
--size-tile-xs: 24px;
--size-tile-sm: 48px;
--size-tile-md: 72px;
--size-tile-lg: 96px;
--size-tile-xl: 144px;
/* Input sizes */
--size-input-sm: 134px;
--size-input-md: 270px;
--size-input-lg: 420px;
/* Font size rem values */
--font-size-heading-xxxl-max: 3.75;
/* 60px */
--font-size-heading-xxxl-min: 1.625;
/* 26px */
--font-size-heading-xxl-max: 3;
/* 48px */
--font-size-heading-xxl-min: 1.375;
/* 22px */
--font-size-heading-xl-max: 2.5;
/* 40px */
--font-size-heading-xl-min: 1.125;
/* 18px */
--font-size-heading-lg-max: 2;
/* 32px */
--font-size-heading-lg-min: 1;
/* 16px */
--font-size-heading-md-max: 1.75;
/* 28px */
--font-size-heading-md-min: 1;
/* 16px */
--font-size-heading-sm-max: 1.5;
/* 24px */
--font-size-heading-sm-min: 0.875;
/* 14px */
--font-size-heading-xs-max: 1.25;
/* 20px */
--font-size-heading-xs-min: 0.875;
/* 14px */
--font-size-text-xl-max: 1.5;
/* 24px */
--font-size-text-xl-min: 1;
/* 16px */
--font-size-text-lg-max: 1.125;
/* 18px */
--font-size-text-lg-min: 0.875;
/* 14px */
--font-size-text-md-max: 1;
/* 16px */
--font-size-text-md-min: 0.875;
/* 14px */
--font-size-text-sm: 0.875;
/* 14px */
--font-size-text-form: 1;
/* 16px */
--font-size-caption-lg: 0.75;
/* 12px */
--font-size-caption-sm: 0.625;
/* 10px */
/* Letterspacing px values */
--letterspacing-heading-xxxl-max: 0;
--letterspacing-heading-xxxl-min: 0.04;
--letterspacing-heading-xxl-max: 0;
--letterspacing-heading-xxl-min: 0.04;
--letterspacing-heading-xl-max: 0.1;
--letterspacing-heading-xl-min: 0;
--letterspacing-heading-lg-max: 0.05;
--letterspacing-heading-lg-min: 0;
--letterspacing-heading-md-max: 0.04;
--letterspacing-heading-md-min: 0.05;
--letterspacing-heading-sm-max: 0.04;
--letterspacing-heading-sm-min: 0.05;
--letterspacing-heading-xs-max: 0.03;
--letterspacing-heading-xs-min: 0.05;
--letterspacing-text-lg-max: 0;
--letterspacing-text-lg-min: 0.035;
--letterspacing-text-md-max: 0.08;
--letterspacing-text-md-min: 0.035;
/* Font family */
--font-heading-storefront: plusjakartasans, arial, verdana, sans-serif;
/* Font weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-heading-default: var(--font-weight-bold);
--font-weight-heading-storefront: var(--font-weight-semibold);
--font-weight-heading: var(--font-weight-heading-default);
/* Line-heights */
--line-height-body: 1.5;
--line-height-heading: 1.3;
--line-height-heading-xxxl: var(--line-height-heading);
--line-height-heading-xxl: var(--line-height-heading);
--line-height-heading-xl: var(--line-height-heading);
--line-height-heading-lg: var(--line-height-heading);
--line-height-heading-md: var(--line-height-heading);
--line-height-heading-sm: var(--line-height-heading);
--line-height-heading-xs: var(--line-height-heading);
/**
* Generic colors, these are defined by the gravity design system. If you want the brand specific colors, use the
* "[brand]-styles.less" file.
*/
--color-gray-100: #ffffff;
--color-gray-200: #f7f7f7;
--color-gray-250: #f1f1f1;
--color-gray-300: #e2e2e2;
--color-gray-400: #cecece;
--color-gray-500: #69686b;
--color-gray-600: #3a383e;
--color-gray-650: #312f34;
--color-gray-700: #282629;
--color-gray-800: #1e1d1f;
--color-gray-900: #141414;
/* On fixed */
--color-on-fixed-white: var(--color-gray-100);
--color-on-fixed-black: var(--color-gray-900);
--color-on-fixed-alternative: var(--color-gray-500);
/* On body */
--color-body-on-default: var(--color-gray-900);
--color-body-on-alternative: var(--color-gray-500);
--color-body-on-inverted: var(--color-gray-200);
--color-body-on-placeholder: var(--color-gray-500);
--color-body-on-disabled: rgba(20, 20, 20, 0.5);
--color-body-on-deleted: rgba(20, 20, 20, 0.8);
/* Button */
--color-button-bg-primary: var(--color-primary);
--color-button-bg-cta: var(--color-cta);
--color-button-bg-upgrade: #733183;
--color-button-bg-aida: var(--color-primary);
--color-button-border-aida: var(--color-primary);
--color-button-border-primary: var(--color-primary);
--color-button-border-secondary: var(--color-primary);
--color-button-fg-on: var(--color-on-fixed-white);
--color-button-fg-on-primary: var(--color-button-fg-on);
--color-button-fg-on-cta: var(--color-button-fg-on);
--color-button-fg-on-aida: var(--color-on-fixed-black);
/* State */
--color-state-tint: var(--color-primary);
--color-state-active: color-mix(in srgb, var(--color-state-tint) var(--opacity-state-active), var(--color-surface-bright));
--color-state-active-dim: color-mix(in srgb, var(--color-state-tint) var(--opacity-state-active), var(--color-surface-dim));
--color-state-hover: color-mix(in srgb, var(--color-state-tint) var(--opacity-state-hover), var(--color-surface-bright));
--color-state-hover-dim: color-mix(in srgb, var(--color-state-tint) var(--opacity-state-hover), var(--color-surface-dim));
/* Icon */
--color-icon-upgrade-bg: #733183;
--color-icon-upgrade-flash: var(--color-gray-100);
/* Tile */
--color-tile-100: var(--color-gray-200);
--color-tile-200: var(--color-gray-300);
--color-tile-bg: var(--color-surface-bright);
--color-tile-radius: 8px;
--color-tile-shadow-color: rgba(20, 20, 20, 0.15);
--color-tile-box-shadow: 0 2px 8px var(--color-tile-shadow-color);
/* Chart */
--color-chart-100: #0066aa;
--color-chart-200: #fec600;
--color-chart-300: #63528d;
--color-chart-400: #029697;
--color-chart-500: #965592;
--color-chart-600: #7ebdf0;
--color-chart-700: #c55986;
--color-chart-800: #89a8c2;
--color-chart-neutral: #cecece;
--color-chart-100-hover: #004777;
--color-chart-200-hover: #b28b00;
--color-chart-300-hover: #453963;
--color-chart-400-hover: #01696a;
--color-chart-500-hover: #693c66;
--color-chart-600-hover: #5884a8;
--color-chart-700-hover: #9e476b;
--color-chart-800-hover: #6e869b;
--color-chart-neutral-hover: #909090;
/* Calendar */
--color-event-100: #b30016;
--color-event-200: #d86b33;
--color-event-300: #fec600;
--color-event-400: #009959;
--color-event-500: #029697;
--color-event-600: #005b99;
--color-event-700: #7ebdf0;
--color-event-800: #63528d;
--color-event-900: #c55986;
/* Link */
--color-link: var(--color-body-on-default);
/* Surface */
--color-surface-bright: var(--color-gray-100);
--color-surface-dim: var(--color-gray-200);
--color-surface-toned: var(--color-gray-250);
--color-surface-muted: var(--color-gray-300);
--color-surface-inverted: var(--color-gray-700);
--color-surface-form: var(--color-gray-200);
--color-surface-form-disabled: rgba(247, 247, 247, 0.5);
--color-surface-form-deleted: rgba(248, 217, 221, 0.5);
--color-surface-highlight: var(--color-state-active);
/* Illustration */
--color-illustration-background: var(--color-gray-100);
--color-illustration-gray: var(--color-gray-200);
--color-illustration-line: var(--color-gray-900);
/* Shades */
--color-overlay-dark: color-mix(in srgb, var(--color-gray-900) 60%, transparent);
--color-overlay-light: color-mix(in srgb, var(--color-gray-100) 90%, transparent);
--color-event-overlay-accepted: color-mix(in srgb, var(--color-surface-bright) 60%, transparent);
--color-event-overlay-tentative: color-mix(in srgb, var(--color-surface-bright) 75%, transparent);
--color-event-overlay-unconfirmed: color-mix(in srgb, var(--color-surface-bright) 90%, transparent);
--color-shadow-subtle: 0 1px 1px 0 color-mix(in srgb, var(--color-gray-900) 5%, transparent);
--color-shadow-elevated: 0 0 12px 0 color-mix(in srgb, var(--color-gray-900) 16%, transparent);
/* Opacity */
--opacity-active-elements: 0.7;
--opacity-active-links: 0.75;
--opacity-disabled-elements: 0.5;
--opacity-state-hover: 5%;
--opacity-state-active: 10%;
/**
* Signal colors, these are not separated by brand.
* They are used in things like badges and notices.
* While it may seem like there is duplication here with brand colors, these are fixed between brands.
*/
--color-signal-alert: #b30016;
--color-signal-alert-light: #f8d9dd;
--color-signal-info: #0066aa;
--color-signal-info-light: #d9ebf7;
--color-signal-success: #467412;
--color-signal-success-light: #ddedca;
--color-signal-warning: #a35700;
--color-signal-warning-light: #ffedd9;
--color-signal-upgrade-light: #ecdfed;
/* Borders */
--color-border: var(--color-gray-400);
--color-border-alt: var(--color-gray-300);
--color-border-form: var(--color-border);
--color-border-form-disabled: rgba(206, 206, 206, 0.5);
--color-border-form-deleted: var(--color-border-form-disabled);
--border-radius: 6px;
--input-radius: var(--border-radius);
--card-radius: var(--border-radius);
--notice-radius: var(--border-radius);
--chip-radius: 100px;
--inner-container-radius: 6px;
--outer-container-radius: 12px;
/* Form */
--button-radius: var(--border-radius);
--button-padding-lr: var(--size-md);
--button-padding-tb: var(--size-sm);
--color-state-form-active: #0066aa;
--color-fg-form-on: var(--color-gray-100);
--color-validation-error: var(--color-signal-alert);
--form-element-height: 48px;
--form-max-width: 700px;
/* Focus */
--color-state-focus-visible: var(--color-state-form-active);
/* Zebra */
--color-zebra-odd: var(--color-surface-dim);
--color-zebra-even: var(--color-surface-bright);
--color-zebra-hover: var(--color-state-hover);
/* Navigation */
--navigation-bar-height: 56px;
/* Text */
--text-max-width: 700px;
/* Tables */
--features-table-max-width: 672px;
--table-recommended: var(--color-button-bg-cta);
--table-recommended-fg-on: var(--color-button-fg-on-cta);
--table-recommended-bg-default: color-mix(in srgb, var(--color-button-bg-cta) 25%, transparent);
--table-recommended-bg-dim: color-mix(in srgb, var(--color-button-bg-cta) 30%, transparent);
--table-current-bg-default: var(--color-surface-dim);
--table-current-bg-dim: var(--color-surface-toned);
/* Deprecated table colors */
--color-recommended-bg: var(--color-button-bg-cta);
--color-recommended-fg-on: var(--color-button-fg-on-cta);
/* Storefront sections */
--section-y-max-value: 144;
--section-y-min-value: 48;
--section-x-max-value: 120;
--section-x-min-value: 24;
--section-px: 0;
--section-gap-max-value: 96;
--section-gap-min-value: 48;
--section-body-on-default: var(--color-body-on-default);
--section-card-bg: var(--color-surface-dim);
--section-card-border: var(--color-surface-dim);
--section-card-text: var(--color-body-on-default);
--section-control-active-text: var(--color-on-fixed-white);
--section-control-bg: var(--color-surface-contrast);
--section-tab-card-bg: var(--color-state-active);
/* figma:sync:start:base-light */
--bg-pattern-color-on-dark: #ffffff;
--bg-pattern-color-on-light: #ffffff;
--bg-pattern-color-on-medium: #ffffff;
--color-on-surface-accent: var(--color-on-fixed-black);
--color-on-surface-accent-light: var(--color-on-fixed-black);
--color-on-surface-contrast: var(--color-on-fixed-black);
--color-on-surface-core: var(--color-on-fixed-black);
--color-on-surface-core-light: var(--color-on-fixed-black);
--color-on-surface-gradient: var(--color-on-fixed-white);
--color-section-bar-bg: var(--color-primary);
--color-section-bar-on: var(--color-on-fixed-black);
--color-section-glass-strong: rgba(251, 251, 251, 0.2);
--color-section-gradient-1: rgba(0, 0, 0, 0);
--color-section-gradient-2: rgba(0, 0, 0, 0);
--color-section-gradient-3: rgba(0, 0, 0, 0);
--color-section-logo-dark-mark: #fec600;
--color-section-logo-dark-text: #ffffff;
--color-section-logo-light-mark: #fec600;
--color-section-logo-light-text: #141414;
--color-section-steps-bg-accent: var(--color-surface-dim);
--color-section-steps-bg-accent-light: var(--color-surface-dim);
--color-section-steps-bg-contrast: var(--color-surface-dim);
--color-section-steps-bg-core: var(--color-surface-dim);
--color-section-steps-bg-core-light: var(--color-surface-dim);
--color-section-steps-bg-gradient: var(--color-surface-dim);
--color-section-steps-border-accent: var(--color-border-alt);
--color-section-steps-border-accent-light: var(--color-border-alt);
--color-section-steps-border-contrast: var(--color-border-alt);
--color-section-steps-border-core: var(--color-border-alt);
--color-section-steps-border-core-light: var(--color-border-alt);
--color-section-steps-border-gradient: var(--color-border-alt);
--color-section-steps-on-accent: var(--color-on-fixed-black);
--color-section-steps-on-accent-light: var(--color-on-fixed-black);
--color-section-steps-on-contrast: var(--color-on-fixed-black);
--color-section-steps-on-core: var(--color-on-fixed-black);
--color-section-steps-on-core-light: var(--color-on-fixed-black);
--color-section-steps-on-gradient: var(--color-on-fixed-black);
--color-section-tab-bg-default: var(--color-on-fixed-black);
--color-section-tab-bg-emphasized: var(--color-primary);
--color-section-usp-bg-default: var(--color-primary);
--color-section-usp-on-default: var(--color-on-fixed-black);
--color-surface-accent: #ffffff;
--color-surface-accent-light: #ffffff;
--color-surface-contrast: var(--color-on-fixed-white);
--color-surface-core: #ffffff;
--color-surface-core-light: #ffffff;
--color-surface-gradient: var(--color-gray-800);
/* figma:sync:end:base-light */
--color-primary: #0078c8;
--color-secondary: #76b82a;
--color-cta: var(--color-secondary);
--color-illustration-100: #ebf5df;
--color-illustration-200: #d9ebf7;
--color-illustration-300: #a6d0ec;
--color-state-active: #e5f1f9;
--color-state-hover: #f2f8fc;
--color-state-focus: #59a7db;
--color-loader-primary: var(--color-primary);
--color-loader-secondary: #b3d7ef;
--color-button-bg-cta: var(--color-primary);
--color-recommended-bg: var(--color-cta);
--color-recommended-fg-on: var(--color-body-on-default);
--color-button-fg-on-aida: var(--color-on-fixed-white);
/* Tile */
--color-tile-100: #0078c8;
--color-tile-200: #94c4e4;
}
@media screen and (max-width: 360px) {
.gv-activated {
--size-fluid: calc(var(--size-fluid-min-value) * 1px);
}
}
@media screen and (min-width: 361px) and (max-width: 1439px) {
.gv-activated {
--size-fluid: calc(calc(var(--size-fluid-min-value) * 1px) + (var(--size-fluid-max-value) - var(--size-fluid-min-value)) * ((100vw - 360px) / 1080));
}
}
@media screen and (min-width: 1440px) {
.gv-activated {
--size-fluid: calc(var(--size-fluid-max-value) * 1px);
}
}
.gv-activated.gv-dark-mode {
/* On body */
--color-body-on-default: var(--color-gray-200);
--color-body-on-alternative: var(--color-gray-400);
--color-body-on-inverted: var(--color-gray-900);
--color-body-on-placeholder: var(--color-gray-400);
--color-body-on-disabled: rgba(247, 247, 247, 0.5);
--color-body-on-deleted: rgba(247, 247, 247, 0.8);
/* Surface */
--color-surface-bright: var(--color-gray-700);
--color-surface-dim: var(--color-gray-800);
--color-surface-toned: var(--color-gray-650);
--color-surface-muted: var(--color-gray-600);
--color-surface-inverted: var(--color-gray-100);
--color-surface-form: var(--color-gray-600);
--color-surface-form-disabled: rgba(58, 56, 62, 0.5);
--color-surface-form-deleted: rgba(133, 13, 10, 0.5);
/* Illustration */
--color-illustration-background: var(--color-gray-700);
--color-illustration-gray: var(--color-gray-500);
--color-illustration-line: var(--color-gray-200);
/* Shades */
--color-overlay-dark: rgba(20, 20, 20, 0.8);
--color-overlay-light: rgba(20, 20, 20, 0.8);
/* Opacity */
--opacity-state-hover: 10%;
--opacity-state-active: 20%;
/* Signal colors */
--color-signal-alert: #d2011a;
--color-signal-alert-light: #850d0a;
--color-signal-info: #017ed2;
--color-signal-info-light: #235c9d;
--color-signal-success: #4a7b13;
--color-signal-success-light: #34560d;
--color-signal-warning: #d27401;
--color-signal-warning-light: #856304;
--color-signal-upgrade-light: #7d2b87;
/* Borders */
--color-border: var(--color-gray-500);
--color-border-alt: var(--color-gray-600);
--color-border-form: var(--color-border);
--color-border-form-disabled: rgba(105, 104, 107, 0.5);
/* Icon */
--color-icon-upgrade-bg: var(--color-gray-100);
--color-icon-upgrade-flash: #733183;
/* Chart */
--color-chart-100: #d9ebf7;
--color-chart-200: #b28b00;
--color-chart-300: #453963;
--color-chart-400: #029697;
--color-chart-500: #965592;
--color-chart-600: #6b8aa4;
--color-chart-700: #c55986;
--color-chart-800: #89a8c2;
--color-chart-neutral: #a5a5a5;
--color-chart-100-hover: #98a4ad;
--color-chart-200-hover: #7f6300;
--color-chart-300-hover: #736398;
--color-chart-400-hover: #01696a;
--color-chart-500-hover: #a66fa2;
--color-chart-600-hover: #4b6173;
--color-chart-700-hover: #9e476b;
--color-chart-800-hover: #acc2d4;
--color-chart-neutral-hover: #7c7c7c;
/* Form */
--color-state-form-active: #29a9ff;
--color-fg-form-on: var(--color-gray-900);
--color-validation-error: #fe485d;
/* Tile */
--color-tile-shadow-color: rgba(255, 255, 255, 0.15);
/* Mode visibility */
/* figma:sync:start:base-dark */
--bg-pattern-color-on-dark: #ffffff;
--bg-pattern-color-on-light: #ffffff;
--bg-pattern-color-on-medium: #ffffff;
--color-on-surface-accent: var(--color-on-fixed-black);
--color-on-surface-accent-light: var(--color-on-fixed-black);
--color-on-surface-contrast: var(--color-on-fixed-black);
--color-on-surface-core: var(--color-on-fixed-black);
--color-on-surface-core-light: var(--color-on-fixed-black);
--color-on-surface-gradient: var(--color-on-fixed-white);
--color-section-bar-bg: var(--color-primary);
--color-section-bar-on: var(--color-on-fixed-black);
--color-section-glass-strong: rgba(251, 251, 251, 0.2);
--color-section-gradient-1: rgba(0, 0, 0, 0);
--color-section-gradient-2: rgba(0, 0, 0, 0);
--color-section-gradient-3: rgba(0, 0, 0, 0);
--color-section-logo-dark-mark: #fec600;
--color-section-logo-dark-text: #ffffff;
--color-section-logo-light-mark: #fec600;
--color-section-logo-light-text: #141414;
--color-section-steps-bg-accent: var(--color-surface-dim);
--color-section-steps-bg-accent-light: var(--color-surface-dim);
--color-section-steps-bg-contrast: var(--color-surface-dim);
--color-section-steps-bg-core: var(--color-surface-dim);
--color-section-steps-bg-core-light: var(--color-surface-dim);
--color-section-steps-bg-gradient: var(--color-surface-dim);
--color-section-steps-border-accent: var(--color-border-alt);
--color-section-steps-border-accent-light: var(--color-border-alt);
--color-section-steps-border-contrast: var(--color-border-alt);
--color-section-steps-border-core: var(--color-border-alt);
--color-section-steps-border-core-light: var(--color-border-alt);
--color-section-steps-border-gradient: var(--color-border-alt);
--color-section-steps-on-accent: var(--color-on-fixed-black);
--color-section-steps-on-accent-light: var(--color-on-fixed-black);
--color-section-steps-on-contrast: var(--color-on-fixed-black);
--color-section-steps-on-core: var(--color-on-fixed-black);
--color-section-steps-on-core-light: var(--color-on-fixed-black);
--color-section-steps-on-gradient: var(--color-on-fixed-black);
--color-section-tab-bg-default: var(--color-on-fixed-black);
--color-section-tab-bg-emphasized: var(--color-primary);
--color-section-usp-bg-default: var(--color-primary);
--color-section-usp-on-default: var(--color-on-fixed-black);
--color-surface-accent: #ffffff;
--color-surface-accent-light: #ffffff;
--color-surface-contrast: #ffffff;
--color-surface-core: #ffffff;
--color-surface-core-light: #ffffff;
--color-surface-gradient: var(--color-gray-800);
/* figma:sync:end:base-dark */
--color-illustration-100: #bcc4b2;
--color-illustration-200: #aebaca;
--color-illustration-300: #87a1c8;
--color-state-active: #203649;
--color-state-hover: #242e39;
--color-surface-highlight: #00426e;
/* Tile */
--color-tile-200: #17537f;
}
.gv-activated.gv-dark-mode .gv-fill-3rd-party {
filter: brightness(0) invert(1);
}
.gv-activated.gv-dark-mode .gv-on-dark {
display: block;
}
.gv-activated.gv-dark-mode .gv-on-light {
display: none;
}
.eventChip-tile{width:calc(100% - 12px);position:relative;border-radius:var(--size-xs);overflow:hidden;background-color:var(--color-signal-info);pointer-events:auto;cursor:pointer;color:var(--color-body-on-default)}.eventChip-tile-resizing{opacity:.85;box-shadow:0 2px 8px rgba(0,0,0,0.2)}.eventChip-tile-ghost{opacity:.65;border:1px dashed rgba(0,0,0,.35);box-shadow:none}.eventChip-tile .event-resize-handle{position:absolute;left:0;width:100%;height:6px;cursor:ns-resize;z-index:3}.eventChip-tile .event-resize-handle-top{top:0}.eventChip-tile .event-resize-handle-bottom{bottom:0}.eventChip-tile-details{position:relative;padding:0 var(--size-sm)}.eventChip-tile-details-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;line-height:12px;z-index:2;margin:0;flex:1}.eventChip-tile-details-title.strikeThrough{text-decoration:line-through}.eventChip-tile-details-meta{display:flex;align-items:center;gap:var(--size-sm);position:relative;z-index:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:var(--size-2xs)}.eventChip-tile-details-time.strikeThrough{text-decoration:line-through}.eventChip-tile-details-organizer{overflow:hidden;text-overflow:ellipsis}.eventChip-tile-details-organizer.strikeThrough{text-decoration:line-through}.eventChip-tile-details.monthView-event-details{display:flex;align-items:center;height:24px;justify-content:space-between}.eventChip-tile-details.monthView-event-details .eventChip-tile-details-time{z-index:1;white-space:nowrap}.eventChip-tile .all-day-resize-handle{position:absolute;top:0;width:8px;height:100%;cursor:ew-resize;z-index:2;border-radius:0 var(--border-radius) var(--border-radius) 0}.eventChip-tile .all-day-resize-handle.right{right:-2px}.eventChip-tile .all-day-resize-handle.left{left:-2px}.eventChip-tile .all-day-resize-handle:hover{background-color:rgba(0,0,0,0.14902)}.calendar-g2{font-family:inherit;color:var(--color-body-on-default);background:var(--color-surface-bright);border:var(--size-border) solid var(--color-border-alt);overflow:hidden;width:100%;display:flex;flex-direction:column;height:100%}.cg2-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--size-sm) var(--size-md);border-bottom:var(--size-border) solid var(--color-border-alt);background:var(--color-surface-bright)}.cg2-header__left{display:flex;align-items:center;gap:var(--size-xs)}.cg2-header__today{display:inline-flex;align-items:center;justify-content:center;height:var(--form-element-height);padding:0 var(--size-md);border:var(--size-border) solid var(--color-button-border-secondary);border-radius:var(--button-radius);background:var(--color-surface-bright);color:var(--color-body-on-default);font-size:calc(var(--font-size-text-sm) * 1rem);font-weight:var(--font-weight-semibold);white-space:nowrap;transition:background .12s}.cg2-header__today:hover{background:var(--color-state-hover)}.cg2-header__arrow{display:inline-flex;align-items:center;justify-content:center;width:var(--form-element-height);height:var(--form-element-height);border-radius:var(--button-radius);color:var(--color-body-on-default);font-size:1rem;transition:background .12s}.cg2-header__arrow:hover{background:var(--color-state-hover)}.cg2-header__title{font-size:calc(var(--font-size-text-md) * 1rem);font-weight:var(--font-weight-semibold);margin:0;color:var(--color-body-on-default);white-space:nowrap}.cg2-header__tabs{display:flex;align-items:center;gap:0}.cg2-header__tab{display:inline-flex;align-items:center;justify-content:center;padding:var(--size-sm) var(--size-md);font-size:calc(var(--font-size-text-sm) * 1rem);font-weight:var(--font-weight-medium);color:var(--color-body-on-alternative);position:relative;white-space:nowrap;transition:color .12s}.cg2-header__tab:hover{color:var(--color-body-on-default)}.cg2-header__tab--active{color:var(--color-body-on-default);font-weight:var(--font-weight-semibold)}.cg2-header__tab--active:after{content:"";position:absolute;bottom:0;left:var(--size-md);right:var(--size-md);height:calc(var(--size-border) * 2);background:var(--color-button-bg-primary);border-radius:var(--size-border)}.cg2-month-grid{display:flex;flex-direction:column;width:100%;flex:1;min-height:0;background:var(--color-surface-bright);overflow:hidden}.cg2-month-grid__head{position:relative;display:flex;height:calc(var(--form-element-height)+1);border-bottom:var(--size-border) solid var(--color-border-alt);background:var(--color-surface-bright)}.cg2-month-grid__head:after{content:"";position:absolute;top:0;bottom:0;left:53px;width:var(--size-border);background:var(--color-border-alt);pointer-events:none}.cg2-month-grid__wk-label{width:53px;height:var(--form-element-height);flex-shrink:0;background:var(--color-surface-bright)}.cg2-month-grid__col-header{flex:1;display:flex;align-items:center;height:var(--form-element-height);padding:0 var(--size-sm);border-right:var(--size-border) solid var(--color-border-alt);background:var(--color-surface-bright);font-size:calc(var(--font-size-text-sm) * 1rem);font-weight:var(--font-weight-medium);color:var(--color-body-on-alternative);text-align:left;flex:1 1 0;min-width:0}.cg2-month-grid__col-header--weekend{color:var(--color-body-on-alternative);background:var(--color-surface-dim)}.cg2-month-grid__col-header--today{color:var(--color-state-form-active);font-weight:var(--font-weight-semibold)}.cg2-month-grid__head>:last-child{border-right:none}.cg2-month-grid__row{display:flex;flex:1 1 0;min-height:0;border-bottom:var(--size-border) solid var(--color-border-alt)}.cg2-month-grid__row:last-child{border-bottom:none}.cg2-month-grid__week-num{width:53px;flex-shrink:0;padding:var(--size-sm) var(--size-sm) 0;font-size:calc(var(--font-size-text-sm) * 1rem);font-weight:var(--font-weight-medium);color:var(--color-body-on-alternative);text-align:center;border-right:var(--size-border) solid var(--color-border-alt);background:var(--color-surface-bright)}.cg2-month-grid__week-num--current{color:var(--color-state-form-active);font-weight:var(--font-weight-semibold)}.cg2-month-grid__cell{flex:1 1 0;min-width:0;min-height:0;padding:var(--size-xs);border-right:var(--size-border) solid var(--color-border-alt);background:var(--color-surface-bright);display:flex;flex-direction:column;overflow:hidden}.cg2-month-grid__cell:last-child{border-right:none}.cg2-month-grid__cell--weekend,.cg2-month-grid__cell--outside{background:var(--color-surface-dim)}.cg2-month-grid__cell--outside .cg2-month-grid__day-num{color:var(--color-body-on-alternative)}.cg2-month-grid__day-num{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;width:var(--size-md);height:var(--size-md);font-size:calc(var(--font-size-caption-sm) * 1rem);font-weight:var(--font-weight-medium);color:var(--color-body-on-default);border-radius:0;line-height:calc(var(--font-size-caption-sm) * 1rem);flex-shrink:0;margin-bottom:var(--size-xs)}.cg2-month-grid__day-num--today{width:var(--size-md);height:var(--size-md);border-radius:50%;background:var(--color-button-bg-primary);color:var(--color-button-fg-on-primary);font-size:calc(var(--font-size-caption-lg) * 1rem);font-weight:var(--font-weight-semibold)}.cg2-month-grid__events{display:flex;flex-direction:column;gap:var(--size-xs);min-height:0;overflow-y:hidden;overflow-x:hidden;align-items:stretch}.cg2-month-grid__events::-webkit-scrollbar{width:4px}.cg2-month-grid__events::-webkit-scrollbar-track{background:transparent}.cg2-month-grid__events::-webkit-scrollbar-thumb{background:var(--color-border-alt);border-radius:2px}.cg2-month-grid__events::-webkit-scrollbar-thumb:hover{background:var(--color-body-on-alternative)}.cg2-month-chip{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;grid-gap:var(--size-xs);gap:var(--size-xs);height:24px;padding:0 var(--size-sm);border-radius:var(--border-radius);border-left:var(--size-xs) solid var(--color-signal-info);background:var(--color-signal-info-light);color:var(--color-body-on-default);cursor:pointer;transition:filter .12s ease;width:100%;min-width:0;flex-shrink:0}.cg2-month-chip:hover{filter:brightness(.96)}.cg2-month-chip__title{font-size:calc(var(--font-size-caption-lg) * 1rem);font-weight:var(--font-weight-medium);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}@media(min-width:1200px){.calendar-g2{min-height:600px}}@media(max-width:1199px)and (min-width:768px){.calendar-g2{min-height:550px}.cg2-month-grid__col-header{font-size:calc(var(--font-size-text-sm) * .95rem);padding:0 var(--size-xs)}.cg2-header__title{font-size:calc(var(--font-size-text-md) * .95rem)}}@media(max-width:767px)and (min-width:480px){.calendar-g2{min-height:500px;border-radius:calc(var(--border-radius) * .8)}.cg2-header{flex-wrap:wrap;padding:var(--size-sm) var(--size-sm);gap:var(--size-xs)}.cg2-header__left{order:1;width:100%;justify-content:flex-start}.cg2-header__tabs{order:2;width:100%;justify-content:flex-start}.cg2-header__title{font-size:calc(var(--font-size-text-md) * .85rem)}.cg2-header__today{font-size:calc(var(--font-size-text-sm) * .85rem);padding:0 var(--size-sm)}.cg2-month-grid__col-header{font-size:calc(var(--font-size-text-sm) * .85rem);padding:0 var(--size-xs)}.cg2-month-grid__day-num{font-size:calc(var(--font-size-caption-sm) * 1rem);margin-bottom:var(--size-xs)}.cg2-month-grid__day-num--today{width:calc(var(--size-md) + var(--size-sm));height:calc(var(--size-md) + var(--size-sm))}.cg2-month-grid__events{gap:calc(var(--size-xs) / 3)}}@media(max-width:479px){.calendar-g2{min-height:450px;border-radius:calc(var(--border-radius) * .6)}.cg2-header{flex-direction:column;padding:var(--size-xs) var(--size-sm);gap:var(--size-xs)}.cg2-header__left{width:100%;justify-content:space-between}.cg2-header__tabs{width:100%;justify-content:space-around}.cg2-header__title{font-size:calc(var(--font-size-text-md) * .75rem)}.cg2-header__today{font-size:calc(var(--font-size-text-sm) * .75rem);padding:0 var(--size-xs);height:calc(var(--form-element-height) * .9)}.cg2-month-grid__col-header{font-size:calc(var(--font-size-text-sm) * .75rem);padding:0 var(--size-xs)}.cg2-month-grid__day-num{font-size:calc(var(--font-size-caption-sm) * 1rem);margin-bottom:var(--size-xs)}.cg2-month-grid__day-num--today{width:var(--size-lg);height:var(--size-lg)}.cg2-month-grid__events{gap:2px}.cg2-month-grid__week-num{width:40px;font-size:calc(var(--font-size-text-sm) * .7rem)}.cg2-month-grid__head:after{left:40px}}.cg2-month-chip__time{font-size:calc(var(--font-size-caption-lg) * 1rem);font-weight:var(--font-weight-medium);line-height:1;white-space:nowrap;margin-left:var(--size-xs);flex-shrink:0;opacity:1}.cg2-month-grid__overflow{display:inline-flex;align-items:center;justify-content:flex-start;align-self:flex-start;font-size:calc(var(--font-size-caption-lg) * .95rem);font-weight:var(--font-weight-medium);color:var(--color-state-form-active);min-height:20px;height:20px;padding:0 var(--size-sm);border-radius:var(--button-radius);transition:background .12s;border:none;background:transparent;cursor:pointer;flex-shrink:0}.cg2-month-grid__overflow:hover{background:var(--color-state-hover)}.agendaView{background-color:var(--color-surface-bright);overflow-y:auto}.agendaView .agendaView-eventChips{max-width:460px;box-sizing:border-box}.agendaView .agenda-day-group{cursor:pointer;min-width:0;box-sizing:border-box;gap:var(--size-xs)}.agendaView .textContainer{color:var(--color-body-on-alternative)}.agendaView .event-tile{height:25px;overflow:hidden}.agendaView .event-tile-details{left:2px;height:25px}.agendaView .event-tile-details .event-tile-bg-shade{left:0;top:0;z-index:1}.agendaView .event-tile-details-title{color:var(--color-body-on-default);z-index:2;gap:var(--size-sm)}.agendaView .loadMore{color:var(--color-state-form-active);cursor:pointer}.daysView-grid{position:relative;width:100%;overflow:auto}.daysView-grid.focus-visible{outline:none}.daysView-grid:focus-visible{outline:none}.daysView-grid .grid-table{table-layout:fixed}.daysView-grid .grid-table tr{height:1px}.daysView-grid .grid-table td{padding:0}.daysView-grid .grid-table td.time-column{position:sticky;top:0;color:var(--color-body-on-alternative);width:60px;min-width:60px;z-index:1;background-color:var(--color-surface-bright)}.daysView-grid .grid-table td.time-column .timezone-label{position:absolute;bottom:0;width:100%;height:100%;text-align:center}.daysView-grid .grid-table td.days-label{height:inherit;position:sticky;z-index:1;top:0;background-color:var(--color-surface-bright);color:var(--color-body-on-alternative)}.daysView-grid .grid-table .date-day-column{display:flex;flex-direction:column;min-height:var(--size-xl);color:var(--color-body-on-alternative);height:100%}.daysView-grid .grid-table .date-day-column .date{width:20px;min-width:20px;height:20px;border-radius:50%;flex-shrink:0}.daysView-grid .grid-table .date-day-column.highlighted{color:var(--color-state-form-active)}.daysView-grid .grid-table .date-day-column.highlighted .date{background-color:var(--color-state-form-active);color:var(--color-fg-form-on)}.daysView-grid .grid-table .date-day-column .all-day-chips-column{display:flex;flex-direction:column;gap:3px;padding:var(--size-xs) var(--size-xs) var(--size-xs)}.daysView-grid .grid-table .date-day-column .all-day-chips-column .all-day-chip{background-color:var(--color-signal-info);border-radius:var(--border-radius);height:20px;display:flex;align-items:center;padding:0 var(--size-xs);cursor:pointer;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box}.daysView-grid .grid-table .date-day-column .all-day-chips-column .all-day-chip:hover{filter:brightness(.9)}.daysView-grid .grid-table .date-day-column .all-day-chips-column .all-day-chip .all-day-chip-title{color:var(--color-fg-form-on);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:12px;width:100%}.daysView-grid .grid-table .days-header-row td.time-column,.daysView-grid .grid-table .days-header-row td.days-label{z-index:4}.daysView-grid .grid-table .all-day-events-row td.all-day-time-cell{position:sticky;top:var(--days-label-row-height);background-color:var(--color-surface-bright);width:60px;min-width:60px;z-index:4}.daysView-grid .grid-table .all-day-events-row td.all-day-time-cell.time-column-secondary{border-right:none}.daysView-grid .grid-table .all-day-events-row td.all-day-time-cell .gv-pos-absolute{top:0}.daysView-grid .grid-table .all-day-events-row td.all-day-events-cell{position:sticky;top:var(--days-label-row-height);background-color:var(--color-surface-bright);z-index:3}.daysView-grid .grid-table .all-day-events-row .all-day-events-container{position:relative;width:100%}.daysView-grid .grid-table .all-day-events-row .all-day-events-container .all-day-more-label{cursor:pointer;padding-left:var(--size-xs)}.daysView-grid .grid-table .all-day-events-row .all-day-events-container .all-day-more-label .moreLabel{color:var(--color-state-form-active)}.daysView-grid .grid-table .all-day-events-row .all-day-events-container .all-day-col-separators{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;pointer-events:none}.daysView-grid .grid-table .all-day-events-row .all-day-events-container .all-day-col-separators .all-day-col-sep{flex:1;pointer-events:auto;cursor:pointer}.daysView-grid .grid-table .all-day-events-row .all-day-events-container .all-day-col-separators .all-day-col-sep:last-child{border-right:none}.daysView-grid .grid-table .all-day-events-row .all-day-events-container .all-day-show-more{position:absolute;cursor:pointer}.daysView-grid .grid-table .all-day-events-row .all-day-events-container .all-day-col-sep.is-drag-over{background-color:color-mix(in srgb,var(--color-state-form-active) 12%,transparent)}.daysView-grid .grid-table .time-slots-row .event-table{position:relative;background-color:var(--color-surface-bright)}.daysView-grid .grid-table .time-slots-row .event-table .time-slot,.daysView-grid .grid-table .time-slots-row .event-table .clock-column{color:var(--color-body-on-alternative);height:calc(var(--size-xl) * 2);white-space:nowrap}.daysView-grid .grid-table .time-slots-row .event-table .time-slot .time-slot-half-1,.daysView-grid .grid-table .time-slots-row .event-table .clock-column .time-slot-half-1,.daysView-grid .grid-table .time-slots-row .event-table .time-slot .time-slot-half-2,.daysView-grid .grid-table .time-slots-row .event-table .clock-column .time-slot-half-2{height:var(--size-xl)}.daysView-grid .grid-table .time-slots-row .event-table .time-slot .time-slot-half-1,.daysView-grid .grid-table .time-slots-row .event-table .clock-column .time-slot-half-1{border-bottom:var(--color-surface-toned) 1px solid}.daysView-grid .grid-table .time-slots-row .event-table .clock-column{text-transform:lowercase}.daysView-grid .grid-table .time-slots-row .event-table .weekendDayCell{background-color:var(--color-surface-dim)}.daysView-grid .grid-table .time-slots-row .event-table .event-plotting-column{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none}.daysView-grid .grid-table .time-slots-row .event-table .drag-selection-overlay{position:absolute;left:0;width:100%;z-index:1;pointer-events:none;background-color:color-mix(in srgb,var(--color-state-form-active) 20%,var(--color-surface-bright));border:1px solid color-mix(in srgb,var(--color-state-form-active) 65%,white);border-radius:4px;box-sizing:border-box}.daysView-grid .grid-table .time-slots-row .event-table .drag-selection-label{position:sticky;z-index:1;top:2px;left:4px;display:inline-block;margin:2px 4px;padding:2px 6px;border-radius:999px;color:var(--color-fg-form-on);background-color:color-mix(in srgb,var(--color-state-form-active) 82%,black)}.daysView-grid .current-time-indicator-line{position:absolute;width:100%;z-index:3;pointer-events:none}.daysView-grid .current-time-indicator-line .current-time-indicator-label{color:var(--color-state-form-active);position:absolute;top:-8px;transform:translate(-100%);text-transform:lowercase;width:-moz-fit-content;width:fit-content;text-align:right}.daysView-grid .current-time-indicator-line .current-time-indicator-label-primary,.daysView-grid .current-time-indicator-line .current-time-indicator-label-secondary{width:60px}.daysView-grid .current-time-indicator-line-dotted{background:radial-gradient(circle closest-side,var(--color-state-form-active) 90%,transparent) 0 0 / 8px 100%,linear-gradient(90deg,var(--color-state-form-active) 50%,transparent 0) 0 0 / 8px 100%;height:1px;position:relative}.daysView-grid .current-time-indicator-line-solid{height:1px;background:var(--color-state-form-active);position:relative;top:-1px}.daysView-grid .current-time-indicator-line .current-time-indicator-dot{position:absolute;width:8px;height:8px;background:var(--color-state-form-active);border-radius:50%;transform:translateY(-70%)}.gv-activated .gv-customTooltip.gv-tooltip-container .gv-tooltip{position:fixed;z-index:10}.gv-activated .gv-customTooltip.gv-tooltip-container .gv-tooltip .gv-whitespace-normal{white-space:normal;word-break:break-all}.gv-activated .gv-tab-list{border-bottom:none}.eventDialog-container.customPadding{padding-top:28px}.eventDialog-container .closeIcon{cursor:pointer}.eventDialog-container .calendar-color{width:16px;height:16px;border-radius:2.67px;margin:2px}.eventDialog-container .attendee-row:hover{background-color:var(--color-state-hover)}.eventDialog-container .attendee-row .closeEvent{padding:0}.eventDialog-container .closeEvent{cursor:pointer;right:0;top:0}.eventDialog-container .description-link>.link-color{color:var(--color-state-form-active)}.eventDialog-container .recurStringBlock{padding:0 var(--size-md)}.eventDialog-container .recurStringBlock .editString{color:var(--color-state-form-active)}.eventDialog-container .event-error-text{color:var(--color-signal-alert)}.eventDialog-container .view-container-text{word-break:break-word}.eventDialog-container .strikeThrough{text-decoration:line-through}.eventDialog-container .eventDialog-body .white-space-br{word-break:break-word;white-space:break-spaces}.eventDialog-container .eventDialog-body .white-space-br a{color:var(--color-state-form-active);text-decoration:underline;cursor:pointer}.gv-timepicker{cursor:pointer;overflow:visible}.gv-input.gv-timepicker{overflow:visible}.gv-input.gv-timepicker.gv-timepicker-open{z-index:30}.gv-timepicker input{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.gv-timepicker input:hover,.gv-timepicker input:focus,.gv-timepicker .gv-addon:hover{cursor:pointer!important}.gv-timepicker .gv-addon{pointer-events:auto}.gv-timepicker-dropdown{top:calc(100% + 4px);left:0;right:0;z-index:120000;max-height:200px;margin:0;padding:4px;list-style:none;background:var(--color-surface-form)}.gv-timepicker-option{cursor:pointer}.gv-timepicker-option:hover{background:var(--color-state-hover)}.gv-timepicker-option-selected{background:var(--color-state-active)}.gv-timepicker-option-empty{cursor:default;color:var(--color-body-on-placeholder)}.gv-activated .recurModal.gv-modal{max-width:528px;min-height:360px;top:50%;left:50%;transform:translate(-50%,-50%);padding:0;background-color:transparent}.gv-activated .recurModal.gv-modal .gv-modal-content{padding:var(--size-lg)}.gv-activated .recurModal.gv-modal .number-input{max-width:111px}.gv-activated .recurModal.gv-modal .weekly-option{width:24px;height:24px;background-color:var(--color-surface-toned);border-radius:100px;padding:3px 4px}.gv-activated .recurModal.gv-modal .selected-day{background-color:var(--color-primary)}.mini-calendar th,.mini-calendar td,.mini-calendar button{height:var(--size-lg);width:var(--size-lg);padding:0}.mini-calendar td.day{text-align:center;vertical-align:middle}.mini-calendar td.day .gv-caption-lg{display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;vertical-align:middle;box-sizing:border-box;border-radius:100%}.mini-calendar td.day:not(.present):hover .gv-caption-lg:not(.selected):not(.multi-selected){background-color:color-mix(in srgb,var(--color-state-form-active) 50%,transparent);border-radius:100%;cursor:pointer}.mini-calendar td.day.range-start{background-color:var(--color-surface-toned);border-radius:6px 0 0 6px}.mini-calendar td.day.range-end{background-color:var(--color-surface-toned);border-radius:0 5px 5px 0}.mini-calendar td.day.in-range{background-color:var(--color-surface-toned);border-radius:0}.mini-calendar td.day.in-range:not(.present):hover .gv-caption-lg,.mini-calendar td.day.range-start:not(.present):hover .gv-caption-lg,.mini-calendar td.day.range-end:not(.present):hover .gv-caption-lg{background-color:color-mix(in srgb,var(--color-state-form-active) 50%,transparent)}.mini-calendar td.day.present:hover .gv-caption-lg{background-color:var(--color-primary)}.mini-calendar td.day.present:hover,.mini-calendar td.day:hover .gv-caption-lg.selected{cursor:pointer}.mini-calendar .week-number{text-align:center;color:var(--color-body-on-alternative);cursor:pointer}.mini-calendar .day-names,.mini-calendar .outsideMonth .gv-caption-lg{color:var(--color-body-on-alternative)}.mini-calendar .previous-container,.mini-calendar .next-container{cursor:pointer}.mini-calendar .selected{background-color:color-mix(in srgb,var(--color-state-form-active) 80%,transparent);border-radius:100%;color:var(--color-body-on-default)}.mini-calendar .present{background-color:var(--color-primary);border-radius:100%;color:var(--color-button-fg-on)}.mini-calendar .multi-selected{background-color:transparent;border-radius:100%}.mini-calendar .multi-selected:hover{background-color:transparent}.mini-calendar .multi-selected.present:hover{background-color:var(--color-primary)}.mini-calendar .selectWeekNumber{color:var(--color-state-form-active)}
.calendarsListDropdown {
position: relative;
}
.calendarsListDropdown .header-box {
border: var(--size-border) solid var(--color-border);
width: 100%;
padding: 0 var(--size-sm);
border-radius: var(--border-radius);
cursor: pointer;
}
.calendarsListDropdown .dropdown-content {
background-color: var(--color-surface-bright);
z-index: 3;
border-radius: var(--border-radius);
margin-top: var(--size-xs);
border: var(--size-border) solid var(--color-border);
width: 100%;
max-height: 200px;
opacity: 1;
padding: var(--size-sm);
}
.calendarsListDropdown .dropdown-content-list {
flex-shrink: 0;
min-height: 1px;
}
/*# sourceMappingURL=CalendarsListDropdown.css.map */
.gv-activated.calenderSlideIn {
position: fixed;
left: 0;
width: 100%;
height: 100%;
top: 0;
z-index: 1;
}
.gv-activated.calenderSlideIn.display-none {
display: none;
}
.gv-activated.calenderSlideIn .gv-sidedrawer.gv-no-overlay.gv-pos-right {
top: 0px;
max-width: 100%;
}
.gv-activated.calenderSlideIn .gv-sidedrawer.gv-no-overlay.gv-pos-right .gv-btn-close {
margin-bottom: 0;
}
.gv-activated.calenderSlideIn .gv-sidedrawer.gv-no-overlay.gv-pos-right .gv-side-content {
width: 100%;
max-width: 440px;
top: 56px;
height: calc(100% - 56px);
}
.gv-activated.calenderSlideIn gv-icon svg {
filter: none;
}
.calendar-slide-in-shell {
background: var(--color-surface-bright);
border-left: 3px solid var(--color-state-form-active);
box-sizing: border-box;
overflow: visible;
}
.calendar-slide-in-color-dot {
width: 16px;
height: 16px;
border-radius: 2.67px;
}
[data-theme~="dark"] .calendar-slide-in-view-event gv-icon svg {
filter: none;
}
/*# sourceMappingURL=CalendarSlideIn.css.map */
.gv-modal {
z-index: 99999 !important;
}
.gv-modal-image {
background: var(--color-surface-dim);
}
.gv-modal-image .gv-object-pos-center {
-o-object-fit: none !important;
object-fit: none !important;
-o-object-position: center !important;
object-position: center !important;
}
[data-theme~="dark"] .gv-modal gv-icon svg {
filter: none;
}
[data-theme~="dark"] .gv-modal li:hover {
background: none;
}
@media (max-width: 768px) {
.gv-modal .gv-modal-image .gv-object-pos-center {
-o-object-fit: contain !important;
object-fit: contain !important;
}
}
/*# sourceMappingURL=ProductInfoModal.css.map */
body {
margin: 0;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 18px;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.Dropdown .Dropdown-button {
font-weight: var(--accordian-font-weight);
color: var(--color-body-on-alternative);
background-color: var(--color-surface-form);
border: 1px solid var(--color-border-alt);
border-radius: 4px;
}
.Dropdown .Dropdown-button .Gravity-SelectDropdown-control {
font-weight: var(--accordian-font-weight);
color: var(--color-signal-info-light);
}
.Dropdown .DropdownAnimationWrapper .Dropdown-content ul {
background-color: var(--color-surface-bright);
border: 1px solid var(--color-border);
font-weight: var(--accordian-font-weight);
color: var(--color-body-on-alternative);
}
.Dropdown .DropdownAnimationWrapper .Dropdown-content ul li {
color: var(--invite-date-color);
font-weight: var(--accordian-font-weight);
}
.Dropdown .DropdownAnimationWrapper .Dropdown-content ul li:hover {
background-color: var(--color-state-hover);
}
.Dropdown .DropdownAnimationWrapper .Dropdown-content ul li.active {
background-color: var(--color-state-active);
}
.standalone .SideNavBar-Container {
display: none;
}
.standalone .top-pane .searchContainer,
.standalone .top-pane .controls {
display: none;
}
.standalone .gv-main-header {
display: none;
}
.standalone .main-container {
top: 0;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane {
display: none;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary {
width: 100% !important;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary {
display: flex;
overflow: auto;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .topActionBarContainer {
display: none;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailViewSection .viewArea .mailView-container .mailView-header .mailView-header-sender .contact-details {
pointer-events: none;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailViewSection .viewArea .mailView-container .mailView-header .mailView-header-to .list .emailList,
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailViewSection .viewArea .mailView-container .mailView-header .mailView-header-cc .list .emailList,
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailViewSection .viewArea .mailView-container .mailView-header .mailView-header-bcc .list .emailList {
pointer-events: none;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailViewSection .viewArea .mailView-container .mailView-header .mailView-header-to .list .emailList .truncatedText,
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailViewSection .viewArea .mailView-container .mailView-header .mailView-header-cc .list .emailList .truncatedText,
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailViewSection .viewArea .mailView-container .mailView-header .mailView-header-bcc .list .emailList .truncatedText {
pointer-events: all;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container {
max-height: 100%;
height: 100%;
overflow: visible;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailActions {
display: none;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .subject .action .customTooltip-container {
pointer-events: all;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit.mailSection {
top: 0px;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit.mailSection .layout-pane {
display: none;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit.mailSection .layout-pane.layout-pane-primary {
display: flex;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit.mailSection .layout-pane.layout-pane-primary .mailView-container {
max-height: 100%;
height: 100%;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit.mailSection .layout-pane.layout-pane-primary .mailView-container .mailActions {
display: none;
}
.standalone .bottom-pane .splitter-layout.VerticalSplit.mailSection .layout-pane.layout-pane-primary .mailView-container .subject .action .customTooltip-container {
pointer-events: all;
}
.standalone .bottom-pane .LoadingPage {
position: fixed;
background-color: var(--color-surface-bright);
top: 0px;
bottom: 0px;
z-index: 99999999;
}
.standalone .FeebackWidget-Container {
display: none;
}
@media print {
.NotificationManager {
display: none;
}
.customDragElem {
display: none;
}
.SideNavBar-Container {
display: none;
}
.top-pane .searchContainer,
.top-pane .controls {
display: none;
}
.Layout {
height: -moz-fit-content;
height: fit-content;
position: relative;
}
.Layout *::-webkit-scrollbar {
display: none !important;
}
.Layout .gv-main-header {
display: none;
}
.Layout .main-container {
height: -moz-fit-content;
height: fit-content;
}
.Layout .main-container .bottom-pane {
height: -moz-fit-content;
height: fit-content;
}
.Layout .main-container .bottom-pane .layout-pane,
.Layout .main-container .bottom-pane .layout-pane-primary {
border: none !important;
}
.Layout .main-container .bottom-pane .right-pane {
height: -moz-fit-content;
height: fit-content;
}
.Layout .main-container .bottom-pane .right-pane .split-view {
height: auto !important;
height: initial !important;
}
.Layout .main-container .bottom-pane .right-pane .split-view .topActionBarContainer {
border: none !important;
}
.Layout .main-container .bottom-pane .right-pane .split-view .folderListSplitter {
display: none;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit {
position: static;
overflow: auto;
display: inline-block;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane {
display: none;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary {
width: 100% !important;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary {
display: inline-block;
overflow: auto;
position: static;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .topActionBarContainer,
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .draftListContainer {
display: none;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .composerSection {
max-height: none;
max-height: initial;
height: -moz-fit-content;
height: fit-content;
width: 100%;
margin: 0;
position: relative;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .composerSection .composer .composer-actions {
display: none;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .composerSection .composer .scrollable .recipientContainer {
display: none;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .composerSection .composer .scrollable .editor-container .toolbarWrapper {
display: none;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .composerSection .composer .scrollable .editor-container .rteEditor .oneComWebmail-html .oneComWebmail-mail .oneComWebmail-body div {
color: black !important;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container {
max-height: none;
max-height: initial;
height: -moz-fit-content;
height: fit-content;
width: 100%;
margin: 0;
position: relative;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailActions {
display: none;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header {
border-width: 2px !important;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .avatar {
display: none;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td h1,
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td h2,
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td h3,
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td h4,
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td h5,
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td h6,
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td div,
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td span,
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td a,
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td p {
color: black !important;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailExternalActions {
display: none;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .subject .action .customTooltip-container .Icon {
display: none;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .subject .action .customTooltip-container .dayNight {
display: inline-block;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .draftListContainer {
display: none;
}
.Layout .main-container .bottom-pane .right-pane .split-view .splitter-layout.VerticalSplit #rightContainer .mailViewSection .viewArea .mailView-container .subject .action .mailViewMenuRef .ContextMenu {
display: none;
}
.Layout .main-container .bottom-pane .LoadingPage {
position: fixed;
background-color: var(--color-surface-bright);
top: 56px;
bottom: 0px;
z-index: 99999999;
}
.FeebackWidget-Container {
display: none !important;
}
[data-theme="dark"] .bottom-pane .layout-pane,
[data-theme="dark"] .bottom-pane .layout-pane-primary {
border: none !important;
}
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .subject .subject-text {
color: black !important;
}
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header {
color: black !important;
border-bottom: 2px solid black !important;
}
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-sender .list,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-to .list {
color: #646464 !important;
}
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-sender .list .emailList .email,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-to .list .emailList .email {
color: #646464 !important;
}
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-sender .contact-details,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-to .contact-details,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-sender .date,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-to .date {
color: #646464 !important;
}
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-sender .contact-details .name,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-to .contact-details .name,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-sender .date .name,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-to .date .name {
color: #646464 !important;
}
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-sender .contact-details .name div .email,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-to .contact-details .name div .email,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-sender .date .name div .email,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-to .date .name div .email {
color: #646464 !important;
}
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-sender .emailList,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .mailView-header .mailView-header-to .emailList {
color: black !important;
}
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body {
color: black !important;
}
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td h1,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td h2,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td h3,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td h4,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td h5,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td h6,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td div,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td span,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td a,
[data-theme="dark"] .bottom-pane .split-view .splitter-layout.VerticalSplit .layout-pane.layout-pane-primary .mailView-container .MailPartHtml .oneComWebmail-mail .oneComWebmail-body table tbody tr td p {
color: black !important;
}
.summaryByai {
display: none;
}
.shapeWithAiContainer {
display: none;
}
}
.gravity-icon-wrapper {
display: flex;
}
.gravity-icon-wrapper gv-icon {
background-image: none !important;
}
.gravity-icon-wrapper gv-icon {
display: inline-block;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-position: 50%;
background-size: 18px;
cursor: pointer;
}
.gravity-icon-wrapper gv-icon .Icon--disabled {
cursor: not-allowed;
opacity: 0.45;
}
.gv-icon-scale-110 svg path {
transform: scale(1.1);
transform-origin: center;
}
.gv-icon-scale-120 svg path {
transform: scale(1.2);
transform-origin: center;
}
.gv-icon-scale-130 svg path {
transform: scale(1.3);
transform-origin: center;
}
.gv-icon-scale-140 svg path {
transform: scale(1.4);
transform-origin: center;
}
.gv-icon-scale-150 svg path {
transform: scale(1.5);
transform-origin: center;
}
.gv-icon-scale-160 svg path {
transform: scale(1.6);
transform-origin: center;
}
.gv-icon-scale-200 svg path {
transform: scale(2);
transform-origin: center;
}
[data-theme~="dark"] gv-icon svg,
[data-theme~="dark"] .spinner,
[data-theme~="dark"] .SortAndFilter-container-checkBox,
[data-theme~="dark"] .MailCardControls-checkButton,
[data-theme~="dark"] .checkButton,
[data-theme~="dark"] .icon-image,
[data-theme~="dark"] .iconAltImage {
filter: invert(100%) brightness(250%) contrast(100%);
}
/*# sourceMappingURL=Root.css.map */
html {
--size-xs: 4px;
--size-sm: 8px;
--size-md: 16px;
--size-lg: 24px;
--size-xl: 32px;
--size-xxl: 48px;
}
.header-xxxl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: 700;
letter-spacing: 0;
line-height: 78px;
}
.header-xxl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 48px;
font-weight: 700;
letter-spacing: 0;
line-height: 62px;
}
.header-xl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 40px;
font-weight: 700;
letter-spacing: 0.1px;
line-height: 52px;
}
.header-lg {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 32px;
font-weight: 700;
letter-spacing: 0.05px;
line-height: 39px;
}
.header-md {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.04px;
line-height: 36px;
}
.header-sm {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 700;
letter-spacing: 0.04px;
line-height: 31px;
}
.header-xs {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.03px;
line-height: 26px;
}
.text-xl {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 400;
letter-spacing: 0;
line-height: 36px;
}
.text-xl.bold {
font-weight: 600;
}
.text-lg {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0;
line-height: 27px;
}
.text-lg.bold {
font-weight: 600;
}
.text-md {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.08px;
line-height: 24px;
}
.text-md.bold {
font-weight: 600;
}
.text-sm {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04px;
line-height: 21px;
}
.text-sm.bold {
font-weight: 600;
}
.caption-lg {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.05px;
line-height: 18px;
}
.caption-lg.bold {
font-weight: 600;
}
.caption-sm {
font-family: "PlusJakartaSans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.05px;
line-height: 15px;
}
.caption-sm.bold {
font-weight: 600;
}
/*# sourceMappingURL=fonts.css.map */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aX8.ttf) format('truetype');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Hw5aX8.ttf) format('truetype');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w5aX8.ttf) format('truetype');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM73w5aX8.ttf) format('truetype');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvr73w5aX8.ttf) format('truetype');
}
/*# sourceMappingURL=fonts.css.map */
body {
font-family: 'PlusJakartaSans', 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
/*# sourceMappingURL=webmail.css.map*/