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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/media/errorBoundary.3993fb6b.svg);
}
.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;
}
.gv-activated .gv-toast-container .gv-toast .gv-toast-content {
word-break: break-word;
}
.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;
}
.notification-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
.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;
}
.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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
.Scrollable {
position: absolute;
left: 0;
right: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.Scrollable-wrapper {
position: relative;
}
.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;
}
.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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
.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/v50.15.18/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;
}
.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;
}
.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/v50.15.18/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/v50.15.18/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;
}
.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/v50.15.18/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);
}
}
.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/v50.15.18/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/v50.15.18/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/v50.15.18/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/us.b72cde50.png);
background-image: url(//mail.group-cdn.one/v50.15.18/media/fi.76e2d39b.png);
}
.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;
}
.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;
}
.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;
}
.Inset {
padding: 20px;
}
.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;
}
.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/v50.15.18/media/arrow-left.fe25247d.svg);
}
.Icon.arrow-right {
background-image: url(//mail.group-cdn.one/v50.15.18/media/arrow-right.dfb56cc8.svg);
}
.Icon.back {
background-image: url(//mail.group-cdn.one/v50.15.18/media/back.5bbd641d.svg);
}
.Icon.burger {
background-image: url(//mail.group-cdn.one/v50.15.18/media/burger.5be1c600.svg);
}
.Icon.confirm {
background-image: url(//mail.group-cdn.one/v50.15.18/media/confirm.3028b10f.svg);
}
.Icon.draghandle {
background-image: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/gear.06552ac8.svg);
}
.Icon.calendar {
background-image: url(//mail.group-cdn.one/v50.15.18/media/calendar.fb7a309a.svg);
}
.Icon.check-circle-outline {
background-image: url(//mail.group-cdn.one/v50.15.18/media/check-circle-outline.404322d2.svg);
}
.Icon.contacts {
background-image: url(//mail.group-cdn.one/v50.15.18/media/contacts.b7505361.svg);
}
.Icon.filters {
background-image: url(//mail.group-cdn.one/v50.15.18/media/filters.ffe79ec7.svg);
}
.Icon.blocked {
background-image: url(//mail.group-cdn.one/v50.15.18/media/block.55910f66.svg);
}
.Icon.lock {
background-image: url(//mail.group-cdn.one/v50.15.18/media/lock.32ec4326.svg);
}
.Icon.auto-reply {
background-image: url(//mail.group-cdn.one/v50.15.18/media/auto-reply.4eabbc60.svg);
}
.Icon.features {
background-image: url(//mail.group-cdn.one/v50.15.18/media/features.c0ac2ce3.svg);
}
.Icon.save {
background-image: url(//mail.group-cdn.one/v50.15.18/media/save.4dc7e798.svg);
}
.Icon.pencil {
background-image: url(//mail.group-cdn.one/v50.15.18/media/pencil.0f898d89.svg);
}
.Icon.plus {
background-image: url(//mail.group-cdn.one/v50.15.18/media/plus.ded1098e.svg);
}
.Icon.trash {
background-image: url(//mail.group-cdn.one/v50.15.18/media/trash.36f0387c.svg);
}
.Icon.cross {
background-image: url(//mail.group-cdn.one/v50.15.18/media/cross.a4d3d540.svg);
}
.Icon.gravity-cross {
background-image: url(//mail.group-cdn.one/v50.15.18/media/gravity-cross.f3d608bc.svg);
}
.Icon.search {
background-image: url(//mail.group-cdn.one/v50.15.18/media/search.a7bbc667.svg);
}
.Icon.warning {
background-image: url(//mail.group-cdn.one/v50.15.18/media/warning.a56d7cff.svg);
}
.Icon.update {
background-image: url(//mail.group-cdn.one/v50.15.18/media/update.87ee58f5.svg);
}
.Icon.chevron-down {
background-image: url(//mail.group-cdn.one/v50.15.18/media/chevron-down.966d572f.svg);
}
.Icon.chevron-up {
background-image: url(//mail.group-cdn.one/v50.15.18/media/chevron-up.7ae08529.svg);
transform: rotate(90deg);
}
.Icon.cancel-cross {
background: url(//mail.group-cdn.one/v50.15.18/media/cancel-cross.a4d3d540.svg) no-repeat;
}
.Icon.auto-reply--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/auto-reply--white.694ba661.svg);
}
.Icon.arrow-left--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/arrow-left--white.694ba661.svg);
}
.Icon.arrow-right--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/arrow-right--white.84f5a9f3.svg);
}
.Icon.back--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/back--white.c4e4a340.svg);
}
.Icon.blocked--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/block--white.d5a004f5.svg);
}
.Icon.burger--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/burger--white.3a3330ab.svg);
}
.Icon.calendar--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/calendar--white.d48f1689.svg);
}
.Icon.cancel-cross--white {
background: url(//mail.group-cdn.one/v50.15.18/media/cancel-cross--white.836bebff.svg) no-repeat;
}
.Icon.confirm--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/confirm--white.d9bc21c6.svg);
}
.Icon.contacts--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/contacts--white.0f847c99.svg);
}
.Icon.check-circle-outline--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/check-circle-outline--white.086ef5f6.svg);
}
.Icon.chevron-down--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/chevron-down--white.2e609fa2.svg);
}
.Icon.cross--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/cross--white.79a3fd34.svg);
}
.Icon.features--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/features--white.5b4259ea.svg);
}
.Icon.filters--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/filters--white.bec06bad.svg);
}
.Icon.gear--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/gear--white.00bb49e4.svg);
}
.Icon.lock--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/lock--white.675a9a56.svg);
}
.Icon.pencil--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/pencil--white.1344cf69.svg);
}
.Icon.plus--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/plus--white.fa14df81.svg);
}
.Icon.save--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/save--white.6e55405d.svg);
}
.Icon.search--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/search--white.5a5af545.svg);
}
.Icon.trash--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/trash--white.c88e0454.svg);
}
.Icon.update--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/update--white.339d2efb.svg);
}
.Icon.warning--white {
background-image: url(//mail.group-cdn.one/v50.15.18/media/warning--white.3b16e215.svg);
}
.Icon.addon {
background-image: url(//mail.group-cdn.one/v50.15.18/media/addon.e686c44c.svg);
}
.Icon.alt-image {
background-image: url(//mail.group-cdn.one/v50.15.18/media/alt-image.c5882f51.svg);
}
.Icon.attachments-download {
background-image: url(//mail.group-cdn.one/v50.15.18/media/attachments-download.ccc5df00.svg);
}
.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;
}
.FormButton {
border: 1px solid #787676;
color: #333;
}
.FormButton:hover:not(:disabled) {
background-color: #a4a4a4;
color: white;
border-color: #a4a4a4;
}
.FormButton:disabled {
border-color: #d1d1d1;
}
.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;
}
.SectionHeading {
display: block;
margin-bottom: 6px;
font-weight: 700;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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/v50.15.18/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/v50.15.18/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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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 {
display: flex;
padding: 7px 8px;
margin-top: 1px;
}
.container-ham {
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
max-width: 180px;
font-weight: 400;
font-weight: var(--font-weight-light-bold);
}
.container-ham-email {
max-width: 150px;
color: #3c3c3c;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 5px;
}
.container-ham-arrowIcon,
.container-ham .gv-activated {
height: 16px;
width: 16px;
cursor: pointer;
margin-top: 3px;
background-repeat: no-repeat;
background-size: 16px 16px;
transform: rotate(180deg);
}
.customTooltip {
z-index: 999999999;
}
.selected .container-ham-arrowIcon {
transform: rotate(0deg);
}
.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/v50.15.18/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%);
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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);
}
.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 .LanguageItem {
padding: 10px 20px;
display: flex;
flex-direction: row;
cursor: pointer;
min-width: 154px;
}
.LanguagePickerList .LanguageItem:hover {
background-color: var(--color-state-hover);
border-radius: 0px;
}
.LanguagePickerList .LanguageItem .text {
color: var(--color-body-on-default);
white-space: nowrap;
}
.LanguagePickerList .LanguageItem .checkmark {
width: 22px;
height: 22px;
margin-left: auto;
display: inline-block;
vertical-align: bottom;
}
.LanguagePickerList .LanguageItem.active .checkmark {
display: inline-block;
margin-left: auto;
}
.oldHeader .LanguagePickerList .LanguageItem .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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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);
}
.SwitcherBar {
height: 55px;
}
.SwitcherBar.oldWebmail {
height: 48px;
}
.SwitcherBar .oldHeader .LanguagePicker .Dropdown-button {
border: none;
}
.SwitcherBar .oldHeader .LanguagePicker .Dropdown-button .caret {
display: block;
}
.SwitcherBar .oldHeader .LanguagePicker .Dropdown-content {
min-width: auto;
background-color: #fff;
list-style: none;
border-radius: 0px;
padding: 0;
}
.SwitcherBar .oldHeader .LanguagePicker .Dropdown-content .LanguagePickerList {
position: inherit;
box-shadow: none;
border-radius: none;
width: inherit;
border: none;
}
.SwitcherBar .oldHeader .LanguagePicker .Dropdown-content .LanguagePickerList .LanguageItem {
padding: 3px 10px 3px 20px;
display: flex;
flex-direction: row;
cursor: pointer;
min-width: 154px;
font-family: inherit;
font-size: 13px;
line-height: 18px;
}
.gv-activated gv-logo {
margin-top: 10px;
}
.OneBar {
-webkit-font-smoothing: antialiased;
background-color: #ffffff;
background-color: var(--color-surface-bright);
color: #141414;
color: var(--color-body-on-default);
display: flex;
flex-direction: row;
align-items: center;
padding-left: 0;
}
.OneBar .OneBar-Logo {
height: 100%;
flex-grow: 1;
flex-shrink: 10;
margin-left: 20px;
min-width: 100px;
max-width: 212px;
background-position: 0% 50%;
padding-left: 0;
}
.OneBar .searchContainer .searchBar .form-search .search-field::-webkit-input-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.OneBar .searchContainer .searchBar .form-search .search-field ::-moz-placeholder {
color: #69686b;
color: var(--color-body-on-alternative);
}
.OneBar .controls {
margin-right: 0px;
padding: 0px;
}
.OneBar .controls > li {
border: none;
padding: 0px;
display: flex;
align-items: center;
}
.OneBar .controls > li .container {
padding: 7px 22px;
}
.OneBar .controls > li:hover {
background-color: none;
}
.OneBar .controls > li .whatsNew-header .whatsNew-container .Scrollable .Scrollable-wrapper .whatsNew-dialog .whatsNew-dialog-header .cancelIcon {
top: 17px;
height: 10px;
width: 10px;
}
.OneBar .controls > li .whatsNew-header .whatsNew-container .Scrollable .Scrollable-wrapper .whatsNew-dialog .whatsNew-dialog-body::-webkit-scrollbar {
width: 8px;
border: none;
height: 8px;
}
.OneBar .controls > li .whatsNew-header .whatsNew-container .Scrollable .Scrollable-wrapper .whatsNew-dialog .whatsNew-dialog-body::-webkit-scrollbar-track {
background-color: #ffffff;
background-color: var(--color-surface-bright);
border: none;
padding: 10px;
}
.OneBar .controls > li .whatsNew-header .whatsNew-container .Scrollable .Scrollable-wrapper .whatsNew-dialog .whatsNew-dialog-body::-webkit-scrollbar-thumb {
border: 1px solid #d5d5d5;
border-radius: 7px;
background: #d6d6d6;
}
.OneBar .controls > li .whatsNew-header .whatsNew-container .Scrollable .Scrollable-wrapper .whatsNew-dialog .whatsNew-dialog-body-list-item:hover {
background-color: var(--color-state-hover);
}
.OneBar .controls .container-ham-email {
color: #141414;
color: var(--color-body-on-default);
}
.OneBar .Tooltip-popup {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
min-width: 250px;
background: #3c3c3c;
border-radius: 5px;
z-index: 99;
padding: 6px;
font-size: 12px;
color: #ffffff;
line-height: 15px;
position: absolute;
left: calc(50% - 150px);
top: 58px;
transform: translateX(-150%);
text-align: left;
}
.OneBar .Tooltip-popup-text {
white-space: normal;
}
.OneBar .Tooltip-popup-arrow {
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #3c3c3c transparent;
bottom: 100%;
left: 50%;
}
[data-theme~="dark"] .main-container .top-pane .SwitcherBar .controls li:hover {
background-color: transparent;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
position: absolute;
flex-direction: column;
top: 12px;
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 #d20019;
}
.searchBar .gv-input-search.highlightError:focus {
border: 1px solid #d20019;
}
.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 {
z-index: 1000;
min-width: 536px;
}
.searchBar .advance-search-toggle + .icon-search {
border-left: 1px solid #323036;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
.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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
.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;
}
.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;
}
.RecipientsInput {
display: flex;
flex-wrap: wrap;
border: none;
outline: none;
margin-left: 65px;
clear: right;
padding: 2px 2px;
overflow: hidden;
}
@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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
.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;
}
.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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
.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;
}
.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;
}
.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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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%);
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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);
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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);
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
.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);
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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% - 138px);
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/v50.15.18/media/empty-group.305a7dbe.svg);
background-image: var(--empty-group);
width: 72px;
height: 72px;
}
.LoadingPage {
position: absolute;
}
.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/v50.15.18/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/v50.15.18/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;
}
.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;
}
.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;
}
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
.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;
}
.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);
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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);
}
.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;
}
.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);
}
.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;
}
.mailViewData {
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;
}
.fullscreenMailList .MailList {
position: absolute;
height: calc(100% - 32px);
width: 100%;
}
.fullscreenMailList .draftListContainer {
bottom: 0px;
width: 100%;
background: var(--color-surface-dim);
}
.fullscreenMailList.fullheight .MailList {
height: 100%;
}
.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% - 35px);
}
.mailViewSection .maxHeightAdd .composerSection,
.mailViewSection .maxHeightAdd .mailView-container {
max-height: calc(100% - 54px);
}
.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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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);
}
.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/v50.15.18/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;
}
.inlineImagePartImg {
max-width: 100%;
display: block;
height: auto;
}
.inlineImagePartImg.zoomAble {
cursor: zoom-in;
}
.inlineImagePartImg.zoomAble.zoomed {
cursor: zoom-out;
max-width: none;
}
.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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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);
}
.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;
}
.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/v50.15.18/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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
.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%;
}
.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 .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);
}
.quota-exceeded-modal .gv-modal-content .gv-button.gv-button-cancel {
border: none;
}
.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);
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
.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 {
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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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);
}
.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);
}
.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;
}
.colorGrid {
display: flex;
width: 144px;
height: 144px;
flex-wrap: wrap;
}
.colorGrid span {
display: inline-block;
height: 14px;
width: 14px;
margin: 2px;
}
.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;
}
.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;
}
.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;
}
.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);
}
.editor-container .close-rejected {
animation: horizontal-shake 0.5s ease-in-out;
}
@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);
}
}
.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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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 .gv-input-textarea.textAreaContainer {
height: auto !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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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 .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;
}
}
[data-theme~="dark"] .shape-with-ai-panel gv-icon svg {
filter: none;
}
.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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/media/checkbox-outline.ada8556a.svg);
}
.autoComposePopup-container-box-form-details .label > div input:checked {
background-image: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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);
}
.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%);
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
.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%);
}
.draftListContainer {
display: flex;
margin: 0;
padding: 0 14px;
position: absolute;
flex: 1 0 auto;
bottom: 45px;
}
.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/v50.15.18/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);
}
.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;
}
.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 {
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 {
top: 46px;
}
.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;
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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;
}
.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 {
height: calc(100% - 55px);
display: flex;
flex-direction: row;
}
.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;
}
}
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/v50.15.18/media/empty-group.305a7dbe.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/chatBot_default.1ef20beb.svg);
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/media/dark-empty-group.2e809831.svg);
--contact-news-letter: url(//mail.group-cdn.one/v50.15.18/media/dark-contact-newsletter.767a4a18.svg);
--font-weight-light-bold: 600;
--aida-logo: url(//mail.group-cdn.one/v50.15.18/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/v50.15.18/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/v50.15.18/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/v50.15.18/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: 9;
background-color: #f7f7f7;
background-color: var(--color-surface-dim);
}
.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: 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 .gravity-icon-wrapper {
width: 25px;
}
.agendaHead .gravity-icon-wrapper .keyboard_double_arrow_left {
fill: #0066aa;
fill: var(--color-state-form-active);
}
.agendaHead .gravity-icon-wrapper .keyboard_double_arrow_left svg {
filter: none;
}
.agendaHead .gravity-icon-wrapper .webmail-dark svg path {
fill: #29a9ff;
}
.dateAgenda {
align-items: center;
display: flex;
flex-direction: column;
}
.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;
}
.iFrameOverlay {
pointer-events: none;
display: none;
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;
}
.slide-inFrame.visible {
display: block;
position: fixed;
right: 0;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
pointer-events: auto;
z-index: 99;
}
.slide-inFrame {
display: none;
overflow: hidden;
pointer-events: none;
right: 0;
top: 0;
left: auto;
bottom: auto;
height: 44px;
}
.slide-inFrame.visible .slide-in-container-frame {
transform: none;
}
.slide-inFrame.visible .iFrameOverlay {
opacity: 1;
pointer-events: auto;
}
.slide-inFrame .slide-in-container-frame {
height: 100%;
width: 100%;
left: auto;
transform: translateX(100%);
z-index: 1010;
}
.displayFrame {
display: block;
}
.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;
}
}
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 .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: 56px;
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 .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%);
}
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;
}
@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');
}
body {
font-family: 'PlusJakartaSans', 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
/*# sourceMappingURL=webmail.css.map*/