@charset "UTF-8";
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * jQuery Timepicker
 * http://timepicker.co
 *
 * Enhances standard form input fields helping users to select (or type) times.
 *
 * Copyright (c) 2016 Willington Vega; Licensed MIT, GPL
 */
.ui-timepicker-container {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
}

.ui-timepicker {
  box-sizing: content-box;
  display: block;
  height: 205px;
  list-style: none outside none;
  margin: 0;
  padding: 0 1px;
  text-align: center;
}

.ui-timepicker-viewport {
  box-sizing: content-box;
  display: block;
  height: 205px;
  margin: 0;
  padding: 0;
  overflow: auto;
  overflow-x: hidden; /* IE */
}

.ui-timepicker-standard {
  /* overwrites .ui-widget */
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.1em;
  /* overwrites .ui-widget-content */
  background-color: #FFF;
  border: 1px solid #AAA;
  color: #222;
  /* overwrites .ui-menu */
  margin: 0;
  padding: 2px;
}

.ui-timepicker-standard a {
  border: 1px solid transparent;
  color: #222;
  display: block;
  padding: 0.2em 0.4em;
  text-decoration: none;
}

.ui-timepicker-standard .ui-state-hover {
  /* overwrites .ui-state-hover */
  background-color: #DADADA;
  border: 1px solid #999;
  font-weight: normal;
  color: #212121;
}

.ui-timepicker-standard .ui-menu-item {
  /* overwrites .ui-menu and .ui-menu-item */
  /*clear: left;
  float: left;*/
  margin: 0;
  padding: 0;
}

.ui-timepicker-corners,
.ui-timepicker-corners .ui-corner-all {
  border-radius: 4px;
}

.ui-timepicker-hidden {
  /* overwrites .ui-helper-hidden */
  display: none;
}

.ui-timepicker-no-scrollbar .ui-timepicker {
  border: none;
}

/***********************
***** Media queries ****
***********************/
/* z-indices */
/**
 * Modals should be higher than everything else except notifications, contact form and timepicker.
 * Remember to change z-index passed to time-picker if you change this value.
 */
/**
 * Needs to be above modal overlay.
 */
:root {
  --color-white: #FFF;
  --color-orange: #D57F73;
  --color-red: #D57F73;
  --color-red-2: #CF061D;
  --color-red-dark: #A84F43;
  --color-purple: #6650A0;
  --color-dark-grey: #4A4A4A;
  --color-dark-grey-2: #5C5050;
  --color-dark-grey-3: #B0A7A8;
  --color-grey: #9B9B9B;
  --color-grey-2: #95989A;
  --color-light-grey: #CCCCCC;
  --color-light-grey-2: #5E5E5E;
  --color-light-grey-3: #F2F2F2;
  --color-light-grey-4: #EFF4F5;
  --color-light-grey-5: #5C50504D;
  --color-light-grey-6: #B0A7A88F;
  --color-light-grey-7: #DEE6EF;
  --color-light-grey-8: #F4F4F4;
  --color-light-grey-9: #F8F8F8;
  --color-light-grey-10: #EAEAEA;
  --color-yellow: #CC9D00;
  --color-light-blue: #C7D7D7;
  --color-light-blue-2: #1297AC1A;
  --color-light-blue-3: #CAE0E4;
  --color-dark-blue: #305C94;
}

[data-theme=theme-green] {
  --main-color: #1297AC;
  --main-color-dark: #056B7A;
  --main-color-dark-2: #0D7383;
  --main-color-dark-3: #1397AC;
  --main-color-dark-4: #1297AC;
  --main-color-dark-5: #267E83;
  --main-color-dark-6: #035461;
  --main-color-dark-7: #056B7A;
  --main-color-dark-8: #0B7B8C;
  --main-color-transparent: rgba(18, 151, 172, 0.1019607843);
  --main-color-hover: #056B7A;
  --main-color-light: #64BBC9;
  --main-color-light-2: #DAF5FA;
  --main-color-light-3: #E0F1F4;
  --main-color-light-4: #C7D7D7;
  --main-color-light-5: #E3ECEE;
  --main-color-light-6: #98B7B7;
  --main-color-light-7: #CBDBDB;
  --main-color-light-8: #C0DBE0;
  --main-color-light-9: #D2DFDF;
  --main-color-light-10: #DDE7E7;
  --main-color-light-11: #E3F4F6;
  --main-color-light-12: #E3F0F2;
  --main-color-light-13: #CBDADA;
  --main-color-light-14: #CAE0E4;
  --main-color-light-15: #DFE8E8;
  --main-color-light-16: #EFF4F5;
  --main-color-light-17: #D8E4E4;
  --main-color-light-18: #F2F6F7;
  --main-color-light-19: #C7D7D7;
  --main-color-light-20: #F1F6F7;
  --main-color-light-21: #D2D8D8;
  --main-color-light-22: #9AA9A9;
  --main-color-light-23: #F4FBFC;
  --main-color-light-24: #B9CECE;
  --main-color-light-25: #C8D8D8;
  --main-color-light-26: #CBEEFA;
  --main-color-light-27: #C5E5EB;
  --main-color-light-28: #EFF4F5;
  --main-color-light-29: #C7D7D7;
  --main-color-light-30: #DBEFF2;
  --main-color-light-31: #D8E4E4;
  --main-color-light-32: #B3DBE1;
  --main-color-light-33: #DFEDEE;
  --main-color-light-34: #A6CED0;
  --main-color-light-35: #F1F9FA;
  --main-background-color: #FFF;
  --main-background-color-2: #DCEDF0;
  --main-background-color-3: rgba(18, 151, 172, 0.7019607843);
  --main-color-contrast-2: #1297AC;
  --main-color-contrast: #056B7A;
  --main-border-color: rgba(92, 80, 80, 0.3019607843);
  --main-border-color-2: #0D7383;
  --main-border-color-3: #0D7383;
  --main-border-color-4: #1297AC;
  --main-border-color-5: #056B7A;
  --main-text-color: #1297AC;
  --text-contrast-1: #FFF;
  --text-contrast-2: #000;
  --main-selected-color: #F4FBFC;
  --main-current-color: #F4FBFC;
  --user-title-hover-active-background-color: #CAE0E4;
  --user-title-avatar-background-color: #BDB6CF;
  --header-nav-label-font-size: 12px;
  --header-nav-label-desktop-min-width: 90px;
  --header-nav-label-tablet-min-width: 70px;
  --layout-body-color: #C0DBE0;
  --contact-form-footer-background: #0D7383;
  --contact-form-close-hover-background-color: rgba(0, 0, 0, 0.1019607843);
  --label-plus-thin-width: 25px;
  --lighter-main-color: #C4E1E7;
  --lighter-border-color: #D9E4E6;
  --main-menu-color: #DCEDF0;
  --main-menu-body-color: #E9F6F8;
  --main-menu-link-color-hover: #CAE0E4;
  --main-menu-item-color: #CAE0E4;
  --main-menu-lighter-color: #F4FBFC;
  --main-menu-lighter-header-color: #E3F4F6;
  --layout-body-color: #C0DBE0;
  --contact-form-footer-background: #0D7383;
  --contact-form-close-hover-background-color: rgba(0, 0, 0, 0.1019607843);
  --label-plus-thin-width: 25px;
  --link-icon-add-after: url("/assets/images/icons/plus-light-green.svg");
  --link-icon-add-hover-focus: url("/assets/images/icons/plus-green.svg");
  --link-action-add-after: url("/assets/images/icons/plus-light-green.svg");
  --link-action-add-white-after: none;
  --link-action-add-new-background-image: url("/assets/images/icons/plus-light-green.svg");
  --custom-checkbox-label-custom-input-hover-border-color: #B0A7A8;
  --custom-radio-label-custom-input-hover-box-shadow: none;
  --empty-card-icon-type-notes-margin-bottom: 35px;
  --file-picker-padding: 0 10px;
  --file-picker-font-size: ;
  --file-picker-file-justify-content: ;
  --file-picker-file-background-color: ;
  --file-picker-file-color: ;
  --file-picker-file-before-background: url("/assets/images/icons/file-picked.svg") left center no-repeat;
  --file-picker-file-name-padding-left: 0;
  --file-picker-file-name-background: none;
  --file-picker-file-name-background-size: 0;
  --file-picker-file-remove-width: 20px;
  --file-picker-file-remove-background-image: url("/assets/images/icons/x-red.svg");
  --x-dropdown-trigger-background-color: #1297AC;
  --x-dropdown-trigger-color: #FFF;
  --x-dropdown-trigger-border: none;
  --x-dropdown-trigger-arrow-dir-down-background-image: url("/assets/images/icons/arrow-up-white.svg");
  --smart-input-is-disabled-background-color: transparent;
  --smart-input-is-disabled-color: #9A8E8F;
  --smart-input-is-disabled-border: solid 1px #C7D7D7;
  --smart-input-is-disabled-input-border: none;
  --field-box-justify-content: center;
  --lighter-main-color: #C4E1E7;
  --lighter-border-color: #D9E4E6;
  --button-action-add-inverted-background-image: url("/assets/images/icons/plus-light-green.svg");
  --button-loading-background-image: linear-gradient(to right, var(--main-color) 50%, var(--main-color-light) 50%);
  --svg-x-sign-white: url("/assets/images/icons/x-sign-white.svg");
  --svg-x-red: url("/assets/images/icons/x-red.svg");
  --svg-green-filter: url("/assets/images/icons/green-filter.svg");
  --svg-red-filter: url("/assets/images/icons/red-filter.svg");
  --svg-suspensions: url("/assets/images/icons/suspensions.svg");
  --svg-suspensions-disabled: url("/assets/images/icons/suspensions-disabled.svg");
  --svg-error-exclamation-red: url("/assets/images/error-exclamation.svg");
  --svg-error-exclamation-green: url("/assets/images/themes/green/icons/error-exclamation.svg");
  --svg-error-exclamation-grey: url("/assets/images/error-exclamation-grey.svg");
  --svg-blue-download: url("/assets/images/icons/blue-download.svg");
  --svg-back: url("/assets/images/themes/green/icons/back.svg");
  --svg-field-error: url("/assets/images/icons/field-error.svg");
  --svg-field-error-white: url("/assets/images/icons/field-error-white.svg");
  --svg-plus-grey-thin: url("/assets/images/icons/plus-grey-thin.svg");
  --svg-plus-blue: ;
  --svg-disclaimer: url("/assets/images/icons/disclaimer.svg");
  --svg-left-arrow: url("/assets/images/icons/arrow-left-green.svg");
  --svg-dashboard: url("/assets/images/icons/dashboard.svg");
  --svg-settings: url("/assets/images/icons/settings.svg");
  --svg-unfilled-settings: url("/assets/images/icons/unfilled-settings.svg");
  --svg-pencil: url("/assets/images/icons/pencil.svg");
  --svg-plus: url("/assets/images/icons/plus-light-green.svg");
  --svg-union: url("/assets/images/icons/union.svg");
  --svg-switch: url("/assets/images/icons/switch.svg");
  --svg-switch-vertical: ;
  --svg-excel: url("/assets/images/icons/excel.svg");
  --svg-eye: url("/assets/images/icons/eye-green.svg");
  --svg-eye-2: url("/assets/images/icons/eye.svg");
  --svg-edit: url("/assets/images/icons/edit.svg");
  --svg-paper-plane: url("/assets/images/icons/paper-plane.svg");
  --svg-minus-light: url("/assets/images/icons/minus-light-green.svg");
  --svg-minus: url("/assets/images/icons/minus-green.svg");
  --svg-arrow-down-thin: url("/assets/images/icons/arrow-down-green-thin.svg");
  --svg-eye-slashed: url("/assets/images/icons/eye-slashed-green.svg");
  --svg-plus-hover: url("/assets/images/icons/plus-green.svg");
  --svg-chrome: url("/assets/images/icons/chrome-green.svg");
  --svg-firefox: url("/assets/images/icons/firefox-green.svg");
  --svg-safari: url("/assets/images/icons/safari-green.svg");
  --svg-edge: url("/assets/images/icons/edge-green.svg");
  --svg-history: url("/assets/images/icons/history-green.svg");
  --svg-copy: url("/assets/images/icons/copy-green.svg");
  --svg-sidebar-toggle: url("/assets/images/icons/sidebar-toggle-icon-green.svg");
  --svg-no-employees: url("/assets/images/no-employees.svg");
  --svg-search: url("/assets/images/icons/search.svg");
  --svg-search-with-file: url("/assets/images/icons/search-with-file.svg");
  --svg-group: url("/assets/images/icons/group.svg");
  --svg-employee: url("/assets/images/icons/employee.svg");
  --svg-employee-main-menu: url("/assets/images/icons/main-menu/employee.svg");
  --svg-invite: url("/assets/images/icons/invite.svg");
  --svg-employees: url("/assets/images/icons/employees.svg");
  --svg-right-arrow: url("/assets/images/icons/right-arrow-green.svg");
  --svg-round-check: url("/assets/images/icons/round-check.svg");
  --svg-folder: url("/assets/images/icons/folder.svg");
  --svg-billing: url("/assets/images/icons/billing.svg");
  --svg-waves: url("/assets/images/icons/waves.svg");
  --svg-reports-queue: url("/assets/images/icons/reports-queue.svg");
  --svg-alerts: url("/assets/images/icons/alerts.svg");
  --svg-self-service: url("/assets/images/icons/self-service.svg");
  --svg-contact: url("/assets/images/icons/contact.svg");
  --svg-calculator: url("/assets/images/icons/calculator.svg");
  --svg-clock: url("/assets/images/icons/clock.svg");
  --svg-print: url("/assets/images/icons/print.svg");
  --svg-check: url("/assets/images/icons/check.svg");
  --svg-building: url("/assets/images/icons/building.svg");
  --svg-contacts-empty: url("/assets/images/icons/contacts-empty.svg");
  --svg-suit-man: url("/assets/images/themes/green/icons/suit-man.svg");
  --svg-associations: url("/assets/images/themes/green/icons/associations.svg");
  --svg-subgroups: url("/assets/images/icons/subgroups.svg");
  --svg-documents: url("/assets/images/icons/documents.svg");
  --svg-empty-bills: url("/assets/images/icons/empty-bills.svg");
  --svg-reports-empty: url("/assets/images/icons/reports-empty.svg");
  --svg-receipts: url("/assets/images/icons/receipts.svg");
  --svg-invoices: url("/assets/images/icons/invoices-icon.svg");
  --svg-users-empty: url("/assets/images/icons/users-empty.svg");
  --svg-links: url("/assets/images/icons/links.svg");
  --svg-employees-clear: url("/assets/images/icons/employees-clear.svg");
  --svg-dependents-light: url("/assets/images/icons/dependents-light.svg");
  --svg-umbrella-light: url("/assets/images/icons/umbrella-light.svg");
  --svg-benefits-light: url("/assets/images/icons/benefits-light.svg");
  --svg-two-hearts: url("/assets/images/icons/two-hearts.svg");
  --svg-activity: url("/assets/images/icons/activity-icons.svg");
  --svg-permissions: url("/assets/images/icons/permissions.svg");
  --svg-classes: url("/assets/images/icons/classes.svg");
  --svg-not-found: url("/assets/images/themes/green/icons/not-found.svg");
  --svg-bank-details: url("/assets/images/icons/bank-details.svg");
  --svg-employer-contacts: url("/assets/images/icons/employer-contacts.svg");
  --svg-hand-click: url("/assets/images/icons/hand-click.svg");
  --svg-member: url("/assets/images/icons/member.svg");
  --svg-briefcase: url("/assets/images/icons/briefcase.svg");
  --svg-heart: url("/assets/images/icons/heart.svg");
  --svg-notes: url("/assets/images/themes/green/icons/notes.svg");
  --svg-go-green: url("/assets/images/icons/go-green.svg");
  --svg-statement: url("/assets/images/icons/statement.svg");
  --svg-money: url("/assets/images/icons/money.svg");
  --svg-reporting: url("/assets/images/icons/reporting.svg");
  --svg-beneficiaries: url("/assets/images/icons/beneficiaries.svg");
  --svg-required-star: url("/assets/images/icons/required-star.svg");
  --svg-question-mark-focus: url("/assets/images/icons/question-mark-active.svg");
  --svg-question-mark-modal: url("/assets/images/icons/question-mark-active.svg");
  --svg-upload: url("/assets/images/icons/upload.svg");
  --svg-file-picked: url("/assets/images/icons/file-picked.svg");
  --svg-three-dots: url("/assets/images/icons/three-dots-green.svg");
  --svg-restore-dependent: url("/assets/images/icons/restore-dependent.svg");
  --svg-restore-employee: url("/assets/images/icons/restore-employee.svg");
  --svg-arrow-up-dark: url("/assets/images/icons/arrow-up-dark-blue.svg");
  --svg-arrow-up: url("/assets/images/icons/arrow-up-blue.svg");
  --svg-date: url("/assets/images/icons/date.svg");
  --svg-arrow: url("/assets/images/arrow.svg");
  --svg-empty-alert: url("/assets/images/icons/empty-alert.svg");
  --svg-cobra: url("/assets/images/icons/cobra.svg");
  --svg-retiree: url("/assets/images/icons/retiree.svg");
  --svg-employment: url("/assets/images/icons/employment.svg");
  --svg-class: url("/assets/images/icons/class-icon.svg");
  --svg-edit-dark: url("/assets/images/icons/edit-dark-green.svg");
  --svg-dependent-male: url("/assets/images/icons/dependent-male.svg");
  --svg-dependent-female: url("/assets/images/icons/dependent-female.svg");
  --svg-neutral: url("/assets/images/icons/neutral.svg");
  --svg-plus-thick: url("/assets/images/icons/plus-light-green.svg");
  --svg-tick: url("/assets/images/icons/green-tick.svg");
  --svg-pdf: url("/assets/images/icons/pdf.svg");
  --svg-right-arrow-dark: url("/assets/images/icons/right-arrow-dark-green.svg");
  --svg-left-arrow-thin: url("/assets/images/icons/left-arrow-green.svg");
  --svg-export: url("/assets/images/themes/green/icons/export.svg");
  --svg-trust: url("/assets/images/icons/trust.svg");
  --svg-pointer-right: url("/assets/images/icons/pointer-right.svg");
  --svg-waived: url("/assets/images/icons/waived.svg");
  --svg-cart: url("/assets/images/icons/cart.svg");
  --svg-empty-contact: url("/assets/images/icons/empty-contact.svg");
  --svg-compare-empty: url("/assets/images/icons/compare-empty.svg");
  --svg-filter: url("/assets/images/icons/green-filter.svg");
}

[data-theme=theme-blue] {
  --main-color: #034FA8;
  --main-color-dark: #03336B;
  --main-color-dark-2: ;
  --main-color-dark-3: ;
  --main-color-dark-4: ;
  --main-color-dark-5: ;
  --main-color-dark-6: ;
  --main-color-dark-7: ;
  --main-color-dark-8: ;
  --main-color-transparent: ;
  --main-color-hover: #B7CBE2;
  --main-color-light: ;
  --main-color-light-2: ;
  --main-color-light-3: ;
  --main-color-light-4: #C7D7D7;
  --main-color-light-5: ;
  --main-color-light-6: #98B7B7;
  --main-color-light-7: ;
  --main-color-light-8: ;
  --main-color-light-9: ;
  --main-color-light-10: #DDE7E7;
  --main-color-light-11: ;
  --main-color-light-12: ;
  --main-color-light-13: ;
  --main-color-light-14: ;
  --main-color-light-15: ;
  --main-color-light-16: #E2E9F1;
  --main-color-light-17: #034FA8;
  --main-color-light-18: ;
  --main-color-light-19: #DDE7E7;
  --main-color-light-20: ;
  --main-color-light-21: ;
  --main-color-light-22: ;
  --main-color-light-23: ;
  --main-color-light-24: ;
  --main-color-light-25: ;
  --main-color-light-26: ;
  --main-color-light-27: ;
  --main-color-light-28: ;
  --main-color-light-29: ;
  --main-color-light-30: ;
  --main-color-light-31: ;
  --main-color-light-32: ;
  --main-color-light-33: ;
  --main-color-light-34: ;
  --main-color-light-35: ;
  --main-background-color: ;
  --main-background-color-2: rgba(3, 79, 168, 0.2);
  --main-background-color-3: #034FA8;
  --main-color-contrast-2: #03336B;
  --main-color-contrast: #034FA8;
  --main-border-color: rgba(92, 80, 80, 0.5019607843);
  --main-border-color-2: #034FA8;
  --main-border-color-3: #03336B;
  --main-border-color-4: #979797;
  --main-border-color-5: #979797;
  --main-text-color: #5C5050;
  --text-contrast-1: #000;
  --text-contrast-2: #FFF;
  --main-selected-color: #034FA8;
  --main-current-color: rgba(2, 36, 76, 0.8);
  --user-title-hover-active-background-color: #B7CBE2;
  --user-title-avatar-background-color: #034FA8;
  --header-nav-label-font-size: 10px;
  --header-nav-label-desktop-min-width: 0;
  --header-nav-label-tablet-min-width: 0;
  --layout-body-color: #B2C8E0;
  --contact-form-footer-background: #03336B;
  --contact-form-close-hover-background-color: #03336B;
  --label-plus-thin-width: 20px;
  --main-menu-color: #C7D6E7;
  --main-menu-body-color: #DEE6EF;
  --main-menu-link-color-hover: #B7CBE2;
  --main-menu-item-color: #B0C5DE;
  --main-menu-lighter-color: ;
  --main-menu-lighter-header-color: ;
  --layout-body-color: #B2C8E0;
  --contact-form-footer-background: #03336B;
  --contact-form-close-hover-background-color: #03336B;
  --label-plus-thin-width: 20px;
  --link-icon-add-after: url("/assets/images/themes/blue/icons/plus.svg");
  --link-icon-add-hover-focus: url("/assets/images/themes/blue/icons/plus.svg") center center no-repeat;
  --link-action-add-after: url("/assets/images/themes/blue/icons/plus.svg");
  --link-action-add-white-after: url("/assets/images/themes/blue/icons/plus.svg");
  --link-action-add-new-background-image: url("/assets/images/themes/blue/icons/plus.svg");
  --custom-checkbox-label-custom-input-hover-border-color: #034FA8;
  --custom-radio-label-custom-input-hover-box-shadow: 0 0 5px #03336B;
  --empty-card-icon-type-notes-margin-bottom: 15px;
  --file-picker-padding: 0;
  --file-picker-font-size: 14px;
  --file-picker-file-justify-content: space-between;
  --file-picker-file-background-color: #034FA8;
  --file-picker-file-color: #FFF;
  --file-picker-file-before-background: none;
  --file-picker-file-name-padding-left: 20px;
  --file-picker-file-name-background: url("/assets/images/icons/white-check.svg") left center no-repeat;
  --file-picker-file-name-background-size: 11px 9px;
  --file-picker-file-remove-width: 50px;
  --file-picker-file-remove-background-image: url("/assets/images/icons/x-sign-white.svg");
  --x-dropdown-trigger-background-color: transparent;
  --x-dropdown-trigger-color: #034FA8;
  --x-dropdown-trigger-border: 1px solid #034FA8;
  --x-dropdown-trigger-arrow-dir-down-background-image: url("/assets/images/themes/blue/icons/arrow-up.svg");
  --smart-input-is-disabled-background-color: #F8F8F8;
  --smart-input-is-disabled-color: inherit;
  --smart-input-is-disabled-border: solid 1px #DDE7E7;
  --smart-input-is-disabled-input-border: transparent;
  --field-box-justify-content: space-between;
  --button-action-add-inverted-background-image: url("/assets/images/themes/blue/icons/plus.svg");
  --button-loading-background-image: linear-gradient(to right, #03336B 50%, #034FA8 50%);
  --svg-x-sign-white: url("/assets/images/icons/x-sign-white.svg");
  --svg-x-red: url("/assets/images/icons/x-red.svg");
  --svg-green-filter: url("/assets/images/icons/green-filter.svg");
  --svg-red-filter: url("/assets/images/icons/red-filter.svg");
  --svg-suspensions: url("/assets/images/icons/suspensions.svg");
  --svg-suspensions-disabled: url("/assets/images/icons/suspensions-disabled.svg");
  --svg-error-exclamation-red: url("/assets/images/error-exclamation.svg");
  --svg-error-exclamation-green: url("/assets/images/themes/green/icons/error-exclamation.svg");
  --svg-error-exclamation-grey: url("/assets/images/error-exclamation-grey.svg");
  --svg-blue-download: url("/assets/images/icons/blue-download.svg");
  --svg-back: url("/assets/images/themes/green/icons/back.svg");
  --svg-field-error: url("/assets/images/icons/field-error.svg");
  --svg-field-error-white: url("/assets/images/icons/field-error-white.svg");
  --svg-plus-grey-thin: url("/assets/images/icons/plus-grey-thin.svg");
  --svg-plus-blue: ;
  --svg-disclaimer: url("/assets/images/icons/disclaimer.svg");
  --svg-left-arrow: url("/assets/images/icons/arrow-left-blue.svg");
  --svg-dashboard: url("/assets/images/themes/blue/icons/dashboard.svg");
  --svg-settings: url("/assets/images/themes/blue/icons/settings.svg");
  --svg-unfilled-settings: ;
  --svg-pencil: url("/assets/images/themes/blue/icons/pencil.svg");
  --svg-plus: url("/assets/images/themes/blue/icons/plus-thin.svg");
  --svg-union: url("/assets/images/themes/blue/icons/union.svg");
  --svg-switch: url("/assets/images/themes/blue/icons/switch.svg");
  --svg-switch-vertical: url("/assets/images/icons/switch-vertical.svg");
  --svg-excel: ;
  --svg-eye: ;
  --svg-eye-2: ;
  --svg-edit: url("/assets/images/themes/blue/icons/edit.svg");
  --svg-paper-plane: ;
  --svg-minus-light: ;
  --svg-minus: ;
  --svg-arrow-down-thin: ;
  --svg-eye-slashed: ;
  --svg-plus-hover: ;
  --svg-chrome: url("/assets/images/icons/chrome.svg");
  --svg-firefox: url("/assets/images/icons/firefox.svg");
  --svg-safari: url("/assets/images/icons/safari.svg");
  --svg-edge: url("/assets/images/icons/edge.svg");
  --svg-history: ;
  --svg-copy: url("/assets/images/icons/copy-blue.svg");
  --svg-sidebar-toggle: ;
  --svg-no-employees: ;
  --svg-search: url("/assets/images/themes/blue/icons/search.svg");
  --svg-search-with-file: ;
  --svg-group: ;
  --svg-employee: ;
  --svg-employee-main-menu: ;
  --svg-invite: ;
  --svg-employees: ;
  --svg-right-arrow: ;
  --svg-round-check: ;
  --svg-folder: ;
  --svg-billing: ;
  --svg-waves: ;
  --svg-reports-queue: ;
  --svg-alerts: ;
  --svg-self-service: ;
  --svg-contact: ;
  --svg-calculator: ;
  --svg-clock: ;
  --svg-print: ;
  --svg-check: ;
  --svg-building: ;
  --svg-contacts-empty: ;
  --svg-suit-man: ;
  --svg-associations: ;
  --svg-subgroups: ;
  --svg-documents: ;
  --svg-empty-bills: ;
  --svg-reports-empty: ;
  --svg-receipts: ;
  --svg-invoices: ;
  --svg-users-empty: ;
  --svg-links: ;
  --svg-employees-clear: ;
  --svg-dependents-light: ;
  --svg-umbrella-light: ;
  --svg-benefits-light: ;
  --svg-two-hearts: ;
  --svg-activity: ;
  --svg-permissions: ;
  --svg-classes: ;
  --svg-not-found: ;
  --svg-bank-details: ;
  --svg-employer-contacts: ;
  --svg-hand-click: ;
  --svg-member: ;
  --svg-briefcase: ;
  --svg-heart: ;
  --svg-notes: url("/assets/images/themes/blue/icons/notes.svg");
  --svg-go-green: ;
  --svg-statement: ;
  --svg-money: ;
  --svg-reporting: ;
  --svg-beneficiaries: ;
  --svg-required-star: url("/assets/images/icons/required-star-dark-blue.svg");
  --svg-question-mark-focus: url("/assets/images/themes/blue/icons/question-mark-active.svg");
  --svg-question-mark-modal: url("/assets/images/themes/blue/icons/question-mark-clicked.svg");
  --svg-upload: url("/assets/images/themes/blue/icons/upload.svg");
  --svg-file-picked: ;
  --svg-three-dots: url("/assets/images/icons/three-dots-blue.svg");
  --svg-restore-dependent: ;
  --svg-restore-employee: ;
  --svg-arrow-up-dark: url("/assets/images/themes/blue/icons/arrow-up.svg");
  --svg-arrow-up: ;
  --svg-date: url("/assets/images/themes/blue/icons/date.svg");
  --svg-arrow: ;
  --svg-empty-alert: ;
  --svg-cobra: ;
  --svg-retiree: ;
  --svg-employment: ;
  --svg-class: ;
  --svg-edit-dark: ;
  --svg-dependent-male: ;
  --svg-dependent-female: ;
  --svg-neutral: ;
  --svg-plus-thick: url("/assets/images/themes/blue/icons/plus.svg");
  --svg-tick: url("/assets/images/icons/tick-blue.svg");
  --svg-pdf: ;
  --svg-right-arrow-dark: ;
  --svg-left-arrow-thin: ;
  --svg-export: url("/assets/images/themes/blue/icons/export.svg");
  --svg-trust: ;
  --svg-pointer-right: ;
  --svg-waived: ;
  --svg-cart: ;
  --svg-empty-contact: ;
  --svg-compare-empty: ;
  --svg-filter: url("/assets/images/themes/blue/icons/filter.svg");
}

[data-theme=theme-custom] {
  --main-color: var(--runtime-main-color, #1297AC);
  --main-color-dark: var(--runtime-main-color-dark, #056B7A);
  --main-color-dark-2: var(--runtime-main-color-dark-2, #0D7383);
  --main-color-dark-3: var(--runtime-main-color-dark-3, #1397AC);
  --main-color-dark-4: var(--runtime-main-color-dark-4, #1297AC);
  --main-color-dark-5: var(--runtime-main-color-dark-5, #267E83);
  --main-color-dark-6: var(--runtime-main-color-dark-6, #035461);
  --main-color-dark-7: var(--runtime-main-color-dark-7, #056B7A);
  --main-color-dark-8: var(--runtime-main-color-dark-8, #0B7B8C);
  --main-color-transparent: var(--runtime-main-color-transparent, rgba(18, 151, 172, 0.1019607843));
  --main-color-hover: var(--runtime-main-color-hover, #056B7A);
  --main-color-light: var(--runtime-main-color-light, #64BBC9);
  --main-color-light-2: var(--runtime-main-color-light-2, #DAF5FA);
  --main-color-light-3: var(--runtime-main-color-light-3, #E0F1F4);
  --main-color-light-4: var(--runtime-main-color-light-4, #C7D7D7);
  --main-color-light-5: var(--runtime-main-color-light-5, #E3ECEE);
  --main-color-light-6: var(--runtime-main-color-light-6, #98B7B7);
  --main-color-light-7: var(--runtime-main-color-light-7, #CBDBDB);
  --main-color-light-8: var(--runtime-main-color-light-8, #C0DBE0);
  --main-color-light-9: var(--runtime-main-color-light-9, #D2DFDF);
  --main-color-light-10: var(--runtime-main-color-light-10, #DDE7E7);
  --main-color-light-11: ;
  --main-color-light-12: var(--runtime-main-color-light-12, #E3F0F2);
  --main-color-light-13: var(--runtime-main-color-light-13, #CBDADA);
  --main-color-light-14: var(--runtime-main-color-light-14, #CAE0E4);
  --main-color-light-15: var(--runtime-main-color-light-15, #DFE8E8);
  --main-color-light-16: var(--runtime-main-color-light-16, #EFF4F5);
  --main-color-light-17: var(--runtime-main-color-light-17, #D8E4E4);
  --main-color-light-18: var(--runtime-main-color-light-18, #F2F6F7);
  --main-color-light-19: var(--runtime-main-color-light-19, #C7D7D7);
  --main-color-light-20: var(--runtime-main-color-light-20, #F1F6F7);
  --main-color-light-21: var(--runtime-main-color-light-21, #D2D8D8);
  --main-color-light-22: var(--runtime-main-color-light-22, #9AA9A9);
  --main-color-light-23: var(--runtime-main-color-light-23, #F4FBFC);
  --main-color-light-24: var(--runtime-main-color-light-24, #B9CECE);
  --main-color-light-25: var(--runtime-main-color-light-25, #C8D8D8);
  --main-color-light-26: var(--runtime-main-color-light-26, #CBEEFA);
  --main-color-light-27: var(--runtime-main-color-light-27, #C5E5EB);
  --main-color-light-28: var(--runtime-main-color-light-28, #EFF4F5);
  --main-color-light-29: var(--runtime-main-color-light-29, #C7D7D7);
  --main-color-light-30: var(--runtime-main-color-light-30, #DBEFF2);
  --main-color-light-31: var(--runtime-main-color-light-31, #D8E4E4);
  --main-color-light-32: var(--runtime-main-color-light-32, #B3DBE1);
  --main-color-light-33: var(--runtime-main-color-light-33, #DFEDEE);
  --main-color-light-34: var(--runtime-main-color-light-34, #A6CED0);
  --main-color-light-35: var(--runtime-main-color-light-35, #F1F9FA);
  --main-background-color: var(--runtime-main-background-color, #FFF);
  --main-background-color-2: var(--runtime-main-background-color-2, #DCEDF0);
  --main-background-color-3: var(--runtime-main-background-color-3, rgba(18, 151, 172, 0.7019607843));
  --main-color-contrast-2: var(--runtime-main-color-contrast-2, #1297AC);
  --main-color-contrast: var(--runtime-main-color-contrast, #056B7A);
  --main-border-color: var(--runtime-main-border-color, rgba(92, 80, 80, 0.3019607843));
  --main-border-color-2: var(--runtime-main-border-color-2, #0D7383);
  --main-border-color-3: var(--runtime-main-border-color-3, #0D7383);
  --main-border-color-4: var(--runtime-main-border-color-4, #1297AC);
  --main-border-color-5: var(--runtime-main-border-color-5, #056B7A);
  --main-text-color: var(--runtime-main-text-color, #1297AC);
  --text-contrast-1: var(--runtime-text-contrast-1, #FFF);
  --text-contrast-2: var(--runtime-text-contrast-2, #000);
  --main-selected-color: var(--runtime-main-selected-color, #F4FBFC);
  --main-current-color: var(--runtime-main-current-color, #F4FBFC);
  --user-title-hover-active-background-color: var(--runtime-user-title-hover-active-background-color, #CAE0E4);
  --user-title-avatar-background-color: var(--runtime-user-title-avatar-background-color, #BDB6CF);
  --header-nav-label-font-size: var(--runtime-header-nav-label-font-size, 12px);
  --header-nav-label-desktop-min-width: var(--runtime-header-nav-label-desktop-min-width, 90px);
  --header-nav-label-tablet-min-width: var(--runtime-header-nav-label-tablet-min-width, 70px);
  --layout-body-color: var(--runtime-layout-body-color, #C0DBE0);
  --contact-form-footer-background: var(--runtime-contact-form-footer-background, #0D7383);
  --contact-form-close-hover-background-color: var(--runtime-contact-form-close-hover-background-color, rgba(0, 0, 0, 0.1019607843));
  --label-plus-thin-width: var(--runtime-label-plus-thin-width, 25px);
  --lighter-main-color: var(--runtime-lighter-main-color, #C4E1E7);
  --lighter-border-color: var(--runtime-lighter-border-color, #D9E4E6);
  --main-menu-color: var(--runtime-main-menu-color, #DCEDF0);
  --main-menu-body-color: var(--runtime-main-menu-body-color, #E9F6F8);
  --main-menu-link-color-hover: var(--runtime-main-menu-link-color-hover, #CAE0E4);
  --main-menu-item-color: var(--runtime-main-menu-item-color, #CAE0E4);
  --main-menu-lighter-color: var(--runtime-main-menu-lighter-color, #F4FBFC);
  --main-menu-lighter-header-color: var(--runtime-main-menu-lighter-header-color, #E3F4F6);
  --layout-body-color: var(--runtime-layout-body-color, #C0DBE0);
  --contact-form-footer-background: var(--runtime-contact-form-footer-background, #0D7383);
  --contact-form-close-hover-background-color: var(--runtime-contact-form-close-hover-background-color, rgba(0, 0, 0, 0.1019607843));
  --label-plus-thin-width: var(--runtime-label-plus-thin-width, 25px);
  --link-icon-add-after: url("/assets/images/icons/plus-light-green.svg");
  --link-icon-add-hover-focus: url("/assets/images/icons/plus-green.svg");
  --link-action-add-after: url("/assets/images/icons/plus-light-green.svg");
  --link-action-add-white-after: none;
  --link-action-add-new-background-image: url("/assets/images/icons/plus-light-green.svg");
  --custom-checkbox-label-custom-input-hover-border-color: #B0A7A8;
  --custom-radio-label-custom-input-hover-box-shadow: none;
  --empty-card-icon-type-notes-margin-bottom: 35px;
  --file-picker-padding: 0 10px;
  --file-picker-font-size: ;
  --file-picker-file-justify-content: ;
  --file-picker-file-background-color: ;
  --file-picker-file-color: ;
  --file-picker-file-before-background: url("/assets/images/icons/file-picked.svg") left center no-repeat;
  --file-picker-file-name-padding-left: 0;
  --file-picker-file-name-background: none;
  --file-picker-file-name-background-size: 0;
  --file-picker-file-remove-width: 20px;
  --file-picker-file-remove-background-image: url("/assets/images/icons/x-red.svg");
  --x-dropdown-trigger-background-color: var(--runtime-x-dropdown-trigger-background-color, #1297AC);
  --x-dropdown-trigger-color: var(--runtime-x-dropdown-trigger-color, #FFF);
  --x-dropdown-trigger-border: var(--runtime-x-dropdown-trigger-border, none);
  --x-dropdown-trigger-arrow-dir-down-background-image: var(--runtime-x-dropdown-trigger-arrow-dir-down-background-image, url("/assets/images/icons/arrow-up-white.svg"));
  --smart-input-is-disabled-background-color: transparent;
  --smart-input-is-disabled-color: #9A8E8F;
  --smart-input-is-disabled-border: solid 1px #C7D7D7;
  --smart-input-is-disabled-input-border: none;
  --field-box-justify-content: center;
  --lighter-main-color: var(--runtime-lighter-main-color, #C4E1E7);
  --lighter-border-color: var(--runtime-lighter-border-color, #D9E4E6);
  --button-action-add-inverted-background-image: url("/assets/images/icons/plus-light-green.svg");
  --button-loading-background-image: linear-gradient(to right, var(--main-color) 50%, var(--main-color-light) 50%);
  --svg-x-sign-white: url("/assets/images/icons/x-sign-white.svg");
  --svg-x-red: url("/assets/images/icons/x-red.svg");
  --svg-green-filter: url("/assets/images/icons/green-filter.svg");
  --svg-red-filter: url("/assets/images/icons/red-filter.svg");
  --svg-suspensions: url("/assets/images/icons/suspensions.svg");
  --svg-suspensions-disabled: url("/assets/images/icons/suspensions-disabled.svg");
  --svg-error-exclamation-red: url("/assets/images/error-exclamation.svg");
  --svg-error-exclamation-green: url("/assets/images/themes/green/icons/error-exclamation.svg");
  --svg-error-exclamation-grey: url("/assets/images/error-exclamation-grey.svg");
  --svg-blue-download: url("/assets/images/icons/blue-download.svg");
  --svg-back: url("/assets/images/themes/green/icons/back.svg");
  --svg-field-error: url("/assets/images/icons/field-error.svg");
  --svg-field-error-white: url("/assets/images/icons/field-error-white.svg");
  --svg-plus-grey-thin: url("/assets/images/icons/plus-grey-thin.svg");
  --svg-plus-blue: ;
  --svg-disclaimer: url("/assets/images/icons/disclaimer.svg");
  --svg-left-arrow: url("/assets/images/icons/arrow-left-green.svg");
  --svg-dashboard: url("/assets/images/icons/dashboard.svg");
  --svg-settings: url("/assets/images/icons/settings.svg");
  --svg-unfilled-settings: url("/assets/images/icons/unfilled-settings.svg");
  --svg-pencil: url("/assets/images/icons/pencil.svg");
  --svg-plus: url("/assets/images/icons/plus-light-green.svg");
  --svg-union: url("/assets/images/icons/union.svg");
  --svg-switch: url("/assets/images/icons/switch.svg");
  --svg-switch-vertical: ;
  --svg-excel: url("/assets/images/icons/excel.svg");
  --svg-eye: url("/assets/images/icons/eye-green.svg");
  --svg-eye-2: url("/assets/images/icons/eye.svg");
  --svg-edit: url("/assets/images/icons/edit.svg");
  --svg-paper-plane: url("/assets/images/icons/paper-plane.svg");
  --svg-minus-light: url("/assets/images/icons/minus-light-green.svg");
  --svg-minus: url("/assets/images/icons/minus-green.svg");
  --svg-arrow-down-thin: url("/assets/images/icons/arrow-down-green-thin.svg");
  --svg-eye-slashed: url("/assets/images/icons/eye-slashed-green.svg");
  --svg-plus-hover: url("/assets/images/icons/plus-green.svg");
  --svg-chrome: url("/assets/images/icons/chrome-green.svg");
  --svg-firefox: url("/assets/images/icons/firefox-green.svg");
  --svg-safari: url("/assets/images/icons/safari-green.svg");
  --svg-edge: url("/assets/images/icons/edge-green.svg");
  --svg-history: url("/assets/images/icons/history-green.svg");
  --svg-copy: url("/assets/images/icons/copy-green.svg");
  --svg-sidebar-toggle: url("/assets/images/icons/sidebar-toggle-icon-green.svg");
  --svg-no-employees: url("/assets/images/no-employees.svg");
  --svg-search: url("/assets/images/icons/search.svg");
  --svg-search-with-file: url("/assets/images/icons/search-with-file.svg");
  --svg-group: url("/assets/images/icons/group.svg");
  --svg-employee: url("/assets/images/icons/employee.svg");
  --svg-employee-main-menu: url("/assets/images/icons/main-menu/employee.svg");
  --svg-invite: url("/assets/images/icons/invite.svg");
  --svg-employees: url("/assets/images/icons/employees.svg");
  --svg-right-arrow: url("/assets/images/icons/right-arrow-green.svg");
  --svg-round-check: url("/assets/images/icons/round-check.svg");
  --svg-folder: url("/assets/images/icons/folder.svg");
  --svg-billing: url("/assets/images/icons/billing.svg");
  --svg-waves: url("/assets/images/icons/waves.svg");
  --svg-reports-queue: url("/assets/images/icons/reports-queue.svg");
  --svg-alerts: url("/assets/images/icons/alerts.svg");
  --svg-self-service: url("/assets/images/icons/self-service.svg");
  --svg-contact: url("/assets/images/icons/contact.svg");
  --svg-calculator: url("/assets/images/icons/calculator.svg");
  --svg-clock: url("/assets/images/icons/clock.svg");
  --svg-print: url("/assets/images/icons/print.svg");
  --svg-check: url("/assets/images/icons/check.svg");
  --svg-building: url("/assets/images/icons/building.svg");
  --svg-contacts-empty: url("/assets/images/icons/contacts-empty.svg");
  --svg-suit-man: url("/assets/images/themes/green/icons/suit-man.svg");
  --svg-associations: url("/assets/images/themes/green/icons/associations.svg");
  --svg-subgroups: url("/assets/images/icons/subgroups.svg");
  --svg-documents: url("/assets/images/icons/documents.svg");
  --svg-empty-bills: url("/assets/images/icons/empty-bills.svg");
  --svg-reports-empty: url("/assets/images/icons/reports-empty.svg");
  --svg-receipts: url("/assets/images/icons/receipts.svg");
  --svg-invoices: url("/assets/images/icons/invoices-icon.svg");
  --svg-users-empty: url("/assets/images/icons/users-empty.svg");
  --svg-links: url("/assets/images/icons/links.svg");
  --svg-employees-clear: url("/assets/images/icons/employees-clear.svg");
  --svg-dependents-light: url("/assets/images/icons/dependents-light.svg");
  --svg-umbrella-light: url("/assets/images/icons/umbrella-light.svg");
  --svg-benefits-light: url("/assets/images/icons/benefits-light.svg");
  --svg-two-hearts: url("/assets/images/icons/two-hearts.svg");
  --svg-activity: url("/assets/images/icons/activity-icons.svg");
  --svg-permissions: url("/assets/images/icons/permissions.svg");
  --svg-classes: url("/assets/images/icons/classes.svg");
  --svg-not-found: url("/assets/images/themes/green/icons/not-found.svg");
  --svg-bank-details: url("/assets/images/icons/bank-details.svg");
  --svg-employer-contacts: url("/assets/images/icons/employer-contacts.svg");
  --svg-hand-click: url("/assets/images/icons/hand-click.svg");
  --svg-member: url("/assets/images/icons/member.svg");
  --svg-briefcase: url("/assets/images/icons/briefcase.svg");
  --svg-heart: url("/assets/images/icons/heart.svg");
  --svg-notes: url("/assets/images/themes/green/icons/notes.svg");
  --svg-go-green: url("/assets/images/icons/go-green.svg");
  --svg-statement: url("/assets/images/icons/statement.svg");
  --svg-money: url("/assets/images/icons/money.svg");
  --svg-reporting: url("/assets/images/icons/reporting.svg");
  --svg-beneficiaries: url("/assets/images/icons/beneficiaries.svg");
  --svg-required-star: url("/assets/images/icons/required-star.svg");
  --svg-question-mark-focus: url("/assets/images/icons/question-mark-active.svg");
  --svg-question-mark-modal: url("/assets/images/icons/question-mark-active.svg");
  --svg-upload: url("/assets/images/icons/upload.svg");
  --svg-file-picked: url("/assets/images/icons/file-picked.svg");
  --svg-three-dots: url("/assets/images/icons/three-dots-green.svg");
  --svg-restore-dependent: url("/assets/images/icons/restore-dependent.svg");
  --svg-restore-employee: url("/assets/images/icons/restore-employee.svg");
  --svg-arrow-up-dark: url("/assets/images/icons/arrow-up-dark-blue.svg");
  --svg-arrow-up: url("/assets/images/icons/arrow-up-blue.svg");
  --svg-date: url("/assets/images/icons/date.svg");
  --svg-arrow: url("/assets/images/arrow.svg");
  --svg-empty-alert: url("/assets/images/icons/empty-alert.svg");
  --svg-cobra: url("/assets/images/icons/cobra.svg");
  --svg-retiree: url("/assets/images/icons/retiree.svg");
  --svg-employment: url("/assets/images/icons/employment.svg");
  --svg-class: url("/assets/images/icons/class-icon.svg");
  --svg-edit-dark: url("/assets/images/icons/edit-dark-green.svg");
  --svg-dependent-male: url("/assets/images/icons/dependent-male.svg");
  --svg-dependent-female: url("/assets/images/icons/dependent-female.svg");
  --svg-neutral: url("/assets/images/icons/neutral.svg");
  --svg-plus-thick: url("/assets/images/icons/plus-light-green.svg");
  --svg-tick: url("/assets/images/icons/green-tick.svg");
  --svg-pdf: url("/assets/images/icons/pdf.svg");
  --svg-right-arrow-dark: url("/assets/images/icons/right-arrow-dark-green.svg");
  --svg-left-arrow-thin: url("/assets/images/icons/left-arrow-green.svg");
  --svg-export: url("/assets/images/themes/green/icons/export.svg");
  --svg-trust: url("/assets/images/icons/trust.svg");
  --svg-pointer-right: url("/assets/images/icons/pointer-right.svg");
  --svg-waived: url("/assets/images/icons/waived.svg");
  --svg-cart: url("/assets/images/icons/cart.svg");
  --svg-empty-contact: url("/assets/images/icons/empty-contact.svg");
  --svg-compare-empty: url("/assets/images/icons/compare-empty.svg");
  --svg-filter: url("/assets/images/icons/green-filter.svg");
}

@keyframes global-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}
@keyframes g-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes g-slide-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
* {
  font-family: "Source Sans Pro", sans-serif;
  /**
   * Removes background tap color on
   * mobile safari and chrome.
   */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
  color: inherit;
  text-decoration: none;
}

html,
body {
  min-height: 100%;
  height: 100%;
}

/**
 * Disable yellow background on autofilled inputs (in Chrome for example).
 *
 * 1. Infinite transition. Since we can't remove the yellow color we just make
 * it transition real slow.
 */
input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-transition: background-color 900000s ease-in-out 0s;
  transition: background-color 900000s ease-in-out 0s; /* 1 */
}

/**
 * Since we have to use the transition trick to keep the input color from changing
 * when autofilled (see above), we need to set a default color first (otherwise
 * transition on background won't work).
 */
input {
  background-color: transparent; /* 1 */
}

/**
 * Removes the input's built-in X (clear button) added by Microsoft Edge.
 * When needed, we are adding a custom X ourselves.
 */
input::-ms-clear {
  display: none;
}

/**
 * Reset button css.
 */
button {
  background: none;
  border: 0;
  font: inherit;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: none;
  cursor: pointer;
  color: inherit;
}

p {
  padding: 0;
  margin: 0;
}

/**
 * When we want the body to scroll.
 */
body.is-full-page {
  overflow-y: scroll;
  color: #5C5050;
}

/* stylelint-disable declaration-no-important  */
/**
 * Generic utility methods that you can apply to blocks. Try to avoid as much
 * as possible.
 */
/**
 * Hide this element on mobile breakpoints.
 *
 * @utility mobile-hidden
 */
@media (max-width: 47.99em) {
  .u-mobile-hidden {
    display: none !important;
  }
}

.u-visibility-hidden {
  visibility: hidden;
}

.u-z-index-3 {
  z-index: 3;
}

.u-z-index-4 {
  z-index: 4;
}

.u-opacity-faded {
  opacity: 0.7;
}

.u-bottom-0 {
  bottom: 0;
}

.u-top-0 {
  top: 0;
}

.u-top-40 {
  top: 40px;
}

.u-display-inline {
  display: inline;
}

.u-display-inline-block {
  display: inline-block;
}

.u-has-all-pointer-events {
  pointer-events: all;
}

.u-cursor-pointer {
  cursor: pointer;
}

/**
 * @utility full-width
 */
.u-full-width {
  width: 100% !important;
}

.u-half-width {
  width: 50%;
}

.u-width-600 {
  width: 600px;
}

.u-width-700 {
  width: 700px;
}

.u-width-fit-content {
  width: -moz-fit-content;
  width: fit-content;
}

.u-position-relative {
  position: relative !important;
}

.u-position-sticky {
  position: sticky;
}

/**
 * Show this element only on mobile.
 *
 * @utility mobile-only
 */
@media (min-width: 48em) {
  .u-mobile-only {
    display: none !important;
  }
}

/**
 * Show on tablet only.
 *
 * @utility tablet-only
 */
@media (max-width: 47.99em) {
  .u-tablet-only {
    display: none !important;
  }
}
@media (min-width: 64em) {
  .u-tablet-only {
    display: none !important;
  }
}

/**
 * Show on mobile-plus only.
 *
 * @utility mobile-plus-only
 */
@media (max-width: 31.24em) {
  .u-mobile-plus-only {
    display: none !important;
  }
}
@media (min-width: 48em) {
  .u-mobile-plus-only {
    display: none !important;
  }
}

/**
 * Hides on mobile-plus.
 *
 * @utility mobile-plus-hidden
 */
@media (min-width: 31.25em) and (max-width: 47.99em) {
  .u-mobile-plus-hidden {
    display: none !important;
  }
}

/**
 * Show on tablet and desktop only.
 *
 * @utility tablet-desktop-only
 */
@media (max-width: 47.99em) {
  .u-tablet-desktop-only {
    display: none !important;
  }
}
@media (min-width: 81.25em) {
  .u-tablet-desktop-only {
    display: none !important;
  }
}

@media (min-width: 48em) and (max-width: 81.24em) {
  .u-tablet-desktop-hidden {
    display: none !important;
  }
}

@media (min-width: 48em) {
  .u-from-tablet-hidden {
    display: none !important;
  }
}

@media (max-width: 47.99em) {
  .u-until-tablet-hidden {
    display: none !important;
  }
}

@media (min-width: 93.75em) {
  .u-from-1500-hidden {
    display: none !important;
  }
}

@media (min-width: 64em) {
  .u-from-desktop-hidden {
    display: none !important;
  }
}

@media (min-width: 73.125em) {
  .u-from-1170-hidden {
    display: none !important;
  }
}

@media (min-width: 51.875em) {
  .u-from-830-hidden {
    display: none !important;
  }
}

@media (max-width: 51.865em) {
  .u-until-830-hidden {
    display: none !important;
  }
}

@media (min-width: 56.25em) {
  .u-from-900-hidden {
    display: none !important;
  }
}

@media (max-width: 56.24em) {
  .u-until-900-hidden {
    display: none !important;
  }
}

@media (max-width: 63.99em) {
  .u-until-desktop-hidden {
    display: none !important;
  }
}

/**
 * Does not include the mobile_plus breakpoint.
 *
 * @utility mobile-small-only
 */
@media (min-width: 31.25em) {
  .u-mobile-small-only {
    display: none !important;
  }
}

/**
 * Show only elements in mobile and tablet
 *
 * @utility desktop-hidden
 */
@media (min-width: 64em) {
  .u-desktop-hidden {
    display: none !important;
  }
}

/**
 * Hide on desktop only
 *
 * @utility desktop-small-hidden
 */
@media (min-width: 64em) and (max-width: 81.24em) {
  .u-desktop-small-hidden {
    display: none !important;
  }
}

@media (max-width: 74.99em) {
  .u-until-desktop-medium-hidden {
    display: none !important;
  }
}

/**
 * Show only elements in mobile and desktop
 *
 * @utility tablet-hidden
 */
@media (min-width: 48em) and (max-width: 63.99em) {
  .u-tablet-hidden {
    display: none !important;
  }
}

/**
 * Show elements only in desktop
 *
 * @utility desktop-only
 */
@media (max-width: 63.99em) {
  .u-desktop-only {
    display: none !important;
  }
}

.u-capitalize {
  text-transform: capitalize;
}

.u-uppercase {
  text-transform: uppercase;
}

.u-underline {
  text-decoration: underline;
}

/**
 * Show elements only after desktop.
 */
@media (min-width: 64em) {
  .u-until-desktop {
    display: none !important;
  }
}

/**
 * Only show on desktop-plus.
 *
 * @utility desktop-plus-only
 */
@media (max-width: 81.24em) {
  .u-desktop-plus-only {
    display: none !important;
  }
}

@media (max-width: 31.24em) {
  .u-until-mobile-plus-hidden {
    display: none !important;
  }
}

@media (min-width: 31.25em) {
  .u-from-mobile-plus-hidden {
    display: none !important;
  }
}

/**
 * Hide on desktop-plus.
 *
 * @utility desktop-plus-hidden
 */
@media (min-width: 81.25em) {
  .u-desktop-plus-hidden {
    display: none !important;
  }
}

/**
 * Only hiden on small mobiles (visible on mobile plus and up).
 *
 * @utility mobile-small-hidden
 */
@media (max-width: 31.24em) {
  .u-mobile-small-hidden {
    display: none !important;
  }
}

.u-font-family-inherit {
  font-family: inherit;
}

.u-font-inherit {
  font: inherit;
}

/**
 * @utility hidden
 */
.u-hidden {
  display: none !important;
}

@media (min-width: 81.25em) {
  .u-hidden-from-1300 {
    display: none !important;
  }
}

@media (max-width: 63.99em) {
  .u-hidden-until-desktop {
    display: none !important;
  }
}

.u-outline-none {
  outline: none;
}

.u-size-9 {
  font-size: 9px;
}

.u-size-10 {
  font-size: 10px;
}

.u-size-11 {
  font-size: 11px;
}

.u-size-12 {
  font-size: 12px;
}

.u-size-13 {
  font-size: 13px;
}

.u-size-14 {
  font-size: 14px;
}

.u-size-15 {
  font-size: 15px;
}

.u-size-16 {
  font-size: 16px;
}

.u-size-18 {
  font-size: 18px;
}

.u-size-19 {
  font-size: 19px;
}

.u-size-22 {
  font-size: 22px;
}

/**
 * @utility full-height
 */
.u-full-height {
  height: 100%;
}

.u-scroll-vertical {
  overflow-y: scroll;
}

@media (max-width: 47.99em) {
  .u-scroll-vertical-mobile {
    overflow-y: scroll;
  }
}

/**
 * Shake animation usually indicating refusal to proceed to the next step
 * due to an invalid value.
 *
 * @utility shake
 */
.u-shake {
  animation: global-shake 0.8s !important;
  animation-fill-mode: both;
  overflow: hidden;
  /**
   * @modifier can-overflow
   * @for u-shake
   */
}
.u-shake_can-overflow {
  overflow: visible;
}

.u-inline-flex {
  display: inline-flex;
}

.u-inline {
  display: inline;
}

.u-background-white {
  background: white;
}

.u-justify-content-center {
  justify-content: center;
}

.u-align-items-center {
  align-items: center;
}

.u-align-items-flex-start {
  align-items: flex-start;
}

.u-align-items-flex-end {
  align-items: flex-end;
}

@media (min-width: 48em) and (max-width: 63.99em) {
  .u-tablet-align-items-center {
    align-items: center;
  }
}

@media (min-width: 48em) and (max-width: 81.24em) {
  .u-tablet-desktop-justify-content-flex-end {
    justify-content: flex-end;
  }
}

.u-display-flex {
  display: flex;
}

.u-flex-wrap {
  flex-wrap: wrap;
}

.u-gap-5 {
  gap: 5px;
}

.u-gap-10 {
  gap: 10px;
}

.u-gap-20 {
  gap: 20px;
}

.u-gap-25 {
  gap: 25px;
}

.u-justify-content-flex-end {
  justify-content: flex-end;
}

.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

@media (min-width: 48em) and (max-width: 63.99em) {
  .u-tablet-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
  }
}

.u-justify-end {
  display: flex;
  justify-content: flex-end;
}

.u-justify-content-space-between {
  display: flex;
  justify-content: space-between;
}

.u-flex-1 {
  flex: 1;
}

.u-flex-shrink-none {
  flex-shrink: 0;
}

.u-vertically-center {
  display: flex;
  align-items: center;
  height: 100%;
}

.u-text-align-left {
  text-align: left;
}

.u-text-align-center {
  text-align: center;
}

.u-text-align-right {
  text-align: right;
}

@media (min-width: 87.5em) {
  .u-from-1400-hidden {
    display: none !important;
  }
}

@media (min-width: 93.75em) {
  .u-from-1500-hidden {
    display: none !important;
  }
}

@media (min-width: 100em) {
  .u-from-1600-hidden {
    display: none !important;
  }
}

@media (min-width: 75em) {
  .u-from-desktop-medium-hidden {
    display: none !important;
  }
}

@media (max-width: 87.49em) {
  .u-until-1400-hidden {
    display: none !important;
  }
}

@media (max-width: 81.24em) {
  .u-until-desktop-plus-hidden {
    display: none !important;
  }
}

@media (min-width: 81.25em) {
  .u-from-desktop-plus-hidden {
    display: none !important;
  }
}

@media (min-width: 71.875em) {
  .u-from-1150-hidden {
    display: none !important;
  }
}

@media (max-width: 71.865em) {
  .u-until-1150-hidden {
    display: none !important;
  }
}

.u-icon-error-box {
  width: 12px;
  height: 12px;
  background: var(--svg-field-error) center no-repeat;
  background-size: 12px 12px;
  position: absolute;
  top: 0;
  right: 0;
}

.u-icon-search-with-file {
  width: 45px;
  height: 40px;
  background: var(--svg-search-with-file) center no-repeat;
  background-size: auto 100%;
}

.u-icon-date-red:before {
  content: "";
  display: inline-block;
  width: 12px;
  margin-right: 3px;
  height: 12px;
  background: url("/assets/images/icons/date-red.svg") left no-repeat;
  background-size: 12px 12px;
}

.u-color-main {
  color: var(--main-color);
}

.u-color-red {
  color: var(--color-red);
}

.u-color-dark-red {
  color: #D52D15;
}

.u-color-semi-grey {
  color: #A2A2A2;
}

.u-color-faded-grey {
  color: rgba(176, 167, 168, 0.5607843137);
}

.u-color-grey {
  color: #9B9B9B;
}

.u-color-dark-grey {
  color: #858585;
}

.u-color-darker-grey {
  color: #4A4A4A;
}

.u-color-semi-dark-grey {
  color: #5E5E5E;
}

.u-color-dark-grey-2 {
  color: var(--color-grey-2);
}

.u-color-dark-grey-3 {
  color: #494949;
}

.u-color-green {
  color: #1297AC;
}

.u-color-blue {
  color: #034FA8;
}

.u-color-faded-white {
  color: #B0A7A8;
}

.u-color-default {
  color: var(--color-dark-grey-2);
}

/**
 * To add bold to an element. Use carefully. Only use when the bold
 * really does not make sense, like when it's for just one word in the middle
 * of a sentence. Otherwise use BEM.
 *
 * @utility bold
 */
.u-bold {
  font-weight: bold;
}

.u-text-semibold {
  font-weight: 600;
}

.u-text-normal {
  font-weight: 400;
}

.u-font-weight-light {
  font-weight: 300;
}

.u-padded {
  padding: 10px;
}

.u-margin-0 {
  margin: 0;
}

.u-padding-top-5 {
  padding-top: 5px;
}

.u-padding-top-10 {
  padding-top: 10px;
}

.u-padding-top-15 {
  padding-top: 15px;
}

.u-padding-top-20 {
  padding-top: 20px;
}

.u-padding-top-25 {
  padding-top: 25px;
}

.u-padding-top-40 {
  padding-top: 40px;
}

.u-padding-left-2 {
  padding-left: 2px;
}

.u-padding-left-5 {
  padding-left: 5px;
}

.u-padding-left-10 {
  padding-left: 10px;
}

.u-padding-left-20 {
  padding-left: 20px;
}

.u-padding-left-27 {
  padding-left: 27px;
}

.u-padding-left-55 {
  padding-left: 55px;
}

.u-padding-right-5 {
  padding-right: 5px;
}

.u-padding-right-10 {
  padding-right: 10px;
}

.u-padding-right-15 {
  padding-right: 15px;
}

.u-padding-right-20 {
  padding-right: 20px;
}

.u-only-padding-right-20 {
  padding: 0 0 0 20px;
}

.u-box-sizing-border-box {
  box-sizing: border-box;
}

.u-top-box-shadow-black {
  box-shadow: 0 -4px 8px -2px rgba(0, 0, 0, 0.1);
}

.u-font-style-italic {
  font-style: italic;
}

.u-padding-bottom-5 {
  padding-bottom: 5px;
}

.u-padding-bottom-7 {
  padding-bottom: 7px;
}

.u-padding-bottom-10 {
  padding-bottom: 10px;
}

@media (max-width: 47.99em) {
  .u-until-tablet-padding-bottom-10 {
    padding-bottom: 10px;
  }
}

.u-padding-bottom-13 {
  padding-bottom: 13px;
}

.u-padding-bottom-20 {
  padding-bottom: 20px;
}

.u-padding-bottom-30 {
  padding-bottom: 30px;
}

/**
 * 1. Alias for overflow-wrap, needed for IE 11 and Microsoft Edge < 18.
 */
.u-wrap-break-word {
  min-width: 0;
  word-wrap: break-word; /* [1] */
  overflow-wrap: break-word;
}

.u-word-break-break-word {
  word-break: break-word;
}

.u-one-line-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/**
 * 1. Necessary hack to get line-clamp to work.
 *
 * Autoprefixer is removing the `-webkit-box-orient` from the compiled CSS.
 * To disable `autoprefixer` we use `autoprefixer: off` or `autoprefixer: ignore next`.
 * The "off" command disables autoprefixer for the entire block, so "ignore next" is the ideal solution.
 *
 * However, "ignore next" is failing for some reason,
 * so the workaround was moving `-webkit-box-orient: vertical;` into its own block.
 */
.u-two-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -moz-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.u-two-line-ellipsis { /* [1] */
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
}

.u-display-block {
  display: block;
}

@media (max-width: 71.865em) {
  .u-display-block-until-1150 {
    display: block !important;
  }
}

.u-width-100p {
  width: 100%;
}

.u-width-20p {
  width: 20%;
}

.u-width-25p {
  width: 25%;
}

.u-width-30p {
  width: 30%;
}

.u-width-40p {
  width: 40%;
}

.u-width-50p {
  width: 50%;
}

@media (min-width: 64em) {
  .u-width-50p-from-desktop {
    width: 50%;
  }
}

.u-width-75p {
  width: 75%;
}

.u-width-25 {
  width: 25px;
}

.u-width-35 {
  width: 35px;
}

.u-width-40 {
  width: 40px;
}

.u-width-50 {
  width: 50px;
}

.u-width-55 {
  width: 55px;
}

.u-width-75 {
  width: 75px;
}

.u-width-80 {
  width: 80px;
}

.u-width-85 {
  width: 85px;
}

.u-width-100 {
  width: 100px;
}

.u-width-105 {
  width: 105px;
}

.u-width-200 {
  width: 200px;
}

.u-width-140 {
  width: 140px;
}

.u-width-400 {
  width: 400px;
}

.u-width-410 {
  width: 410px;
}

.u-min-width-0 {
  min-width: 0;
}

.u-max-width-540 {
  max-width: 540px;
}

.u-max-width-50p {
  max-width: 50%;
}

.u-max-width-80p {
  max-width: 80%;
}

.u-max-width-95p {
  max-width: 95%;
}

.u-max-width-98p {
  max-width: 98%;
}

.u-height-6 {
  height: 6px;
}

.u-height-20 {
  height: 20px;
}

.u-height-25 {
  height: 25px;
}

.u-height-40 {
  height: 40px;
}

.u-height-45 {
  height: 45px;
}

.u-height-50 {
  height: 50px;
}

.u-height-60 {
  height: 60px;
}

.u-height-70 {
  height: 70px;
}

.u-height-75 {
  height: 75px !important;
}

.u-height-80 {
  height: 80px;
}

.u-height-100vh {
  height: 100vh;
}

.u-min-height-0 {
  min-height: 0;
}

.u-min-height-30 {
  min-height: 30px;
}

.u-min-height-36 {
  min-height: 36px;
}

.u-min-height-40 {
  min-height: 40px;
}

.u-min-height-280 {
  min-height: 280px;
}

.u-max-height-50 {
  max-height: 50px;
}

.u-max-height-60 {
  max-height: 60px;
}

.u-max-width-260 {
  max-width: 260px;
}

.u-max-width-300 {
  max-width: 300px;
}

.u-max-width-500 {
  max-width: 500px;
}

.u-margin-10 {
  margin: 10px;
}

.u-margin-15 {
  margin: 15px;
}

.u-margin-20 {
  margin: 20px;
}

.u-margin-left-5 {
  margin-left: 5px;
}

.u-margin-left-10 {
  margin-left: 10px !important;
}

.u-margin-left-12 {
  margin-left: 12px;
}

.u-margin-left-15 {
  margin-left: 15px !important;
}

.u-margin-left-20 {
  margin-left: 20px;
}

.u-margin-left-30 {
  margin-left: 30px;
}

.u-margin-left-35 {
  margin-left: 35px;
}

.u-margin-left-40 {
  margin-left: 40px;
}

.u-margin-left-auto {
  margin-left: auto;
}

.u-margin-right-5 {
  margin-right: 5px;
}

.u-margin-right-7 {
  margin-right: 7px;
}

.u-margin-right-10 {
  margin-right: 10px;
}

.u-margin-right-15 {
  margin-right: 15px;
}

.u-margin-right-20 {
  margin-right: 20px;
}

.u-margin-right-22 {
  margin-right: 22px;
}

.u-margin-right-24 {
  margin-right: 24px;
}

.u-margin-right-35 {
  margin-right: 35px;
}

.u-margin-right-40 {
  margin-right: 40px;
}

.u-margin-right-50 {
  margin-right: 50px;
}

.u-margin-right-auto {
  margin-right: auto;
}

.u-margin-top-1 {
  margin-top: 1px;
}

.u-margin-top-5 {
  margin-top: 5px;
}

.u-margin-top-7 {
  margin-top: 7px;
}

.u-margin-top-10 {
  margin-top: 10px;
}

.u-margin-top-12 {
  margin-top: 12px;
}

.u-margin-top-15 {
  margin-top: 15px;
}

.u-margin-top-20 {
  margin-top: 20px;
}

.u-margin-top-25 {
  margin-top: 25px;
}

.u-margin-top-30 {
  margin-top: 30px;
}

.u-margin-bottom-1 {
  margin-bottom: 1px;
}

.u-margin-bottom-5 {
  margin-bottom: 5px;
}

.u-margin-bottom-10 {
  margin-bottom: 10px;
}

.u-margin-bottom-15 {
  margin-bottom: 15px;
}

.u-margin-bottom-18 {
  margin-bottom: 18px;
}

.u-margin-bottom-20 {
  margin-bottom: 20px;
}

.u-margin-bottom-25 {
  margin-bottom: 25px;
}

.u-margin-bottom-30 {
  margin-bottom: 30px;
}

.u-margin-bottom-40 {
  margin-bottom: 40px;
}

.u-margin-horizontal-5 {
  margin-left: 5px;
  margin-right: 5px;
}

.u-margin-horizontal-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.u-margin-horizontal-15 {
  margin-left: 15px;
  margin-right: 15px;
}

.u-margin-horizontal-25 {
  margin-left: 25px;
  margin-right: 25px;
}

.u-padding-horizontal-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.u-padding-horizontal-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.u-padding-horizontal-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.u-padding-vertical-9 {
  padding-top: 9px;
  padding-bottom: 9px;
}

.u-padding-vertical-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.u-padding-vertical-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.u-padding-vertical-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.u-padding-10 {
  padding: 10px;
}

.u-padding-15 {
  padding: 15px;
}

.u-padding-20 {
  padding: 20px;
}

.u-label-font {
  font-family: "Montserrat", sans-serif;
}

.u-overflow-auto {
  overflow: auto;
}

.u-overflow-hidden {
  overflow: hidden;
}

.u-min-height-100 {
  min-height: 100px;
}

.u-line-height-21 {
  line-height: 21px;
}

.u-line-height-22 {
  line-height: 22px;
}

.u-flex-direction-column {
  flex-direction: column;
}

.u-height-auto {
  height: auto !important;
}

.u-border-none {
  border: none;
}

.u-border-top-green {
  border-top: solid 1px #C8D8D8;
}

.u-border-green {
  border: solid 1px #C8D8D8;
}

.u-border-grey {
  border: solid 1px #DBDBDB;
}

.u-border-transparent {
  border: solid 1px transparent;
}

.u-border-bottom {
  border-bottom: solid 1px #DBDBDB;
}

.u-border-bottom-light-grey {
  border-bottom: solid 1px #EAEAEA;
}

.u-border-bottom-light-grey-5 {
  border-bottom: solid 1px var(--color-light-grey-5);
}

.u-border-bottom-thin-dark-grey {
  border-bottom: solid 0.5px #5C5050;
}

.u-border-bottom-light-blue {
  border-bottom: solid 1px #D8E4E4;
}

.u-border-red {
  border: solid 1px var(--color-red);
}

.u-border-top-red {
  border-top: solid 1px var(--color-red);
}

.u-border-left-red {
  border-left: solid 1px var(--color-red);
}

.u-border-right-red {
  border-right: solid 1px var(--color-red);
}

.u-border-top-grey {
  border-top: solid 1px #D8E4E4;
}

.u-white-space-nowrap {
  white-space: nowrap;
}

.u-separator {
  height: 1px;
  background-color: #DBDBDB;
}

.u-background-color-white {
  background-color: #FFF;
}

.u-background-color-grey {
  background-color: #EAEAEA;
}

.u-background-color-green {
  background-color: #D0EED5;
}

.u-background-color-blue {
  background-color: #E3F4F6;
}

.u-background-color-yellow {
  background-color: #FFF4E8;
}

@media (max-width: 63.99em) {
  .u-until-desktop-flex-direction-column {
    flex-direction: column !important;
  }
}

@media (max-width: 63.99em) {
  .u-until-desktop-half-width {
    width: 50% !important;
  }
}

@media (min-width: 64em) {
  .u-from-desktop-margin-right-5 {
    margin-right: 5px !important;
  }
}

@media (min-width: 48em) {
  .u-from-tablet-margin-top-10 {
    margin-top: 10px !important;
  }
}

@media (min-width: 64em) {
  .u-from-desktop-border-top {
    border-top: solid 1px #D8E4E4;
  }
}

@media (max-width: 74.99em) {
  .u-until-desktop-medium-border-top {
    border-top: solid 1px #D8E4E4;
  }
}

@media (max-width: 47.99em) {
  .u-until-tablet-margin-left-20 {
    margin-left: 20px !important;
  }
}

@media (min-width: 64em) {
  .u-from-desktop-full-width {
    width: 100% !important;
  }
}

.u-container-type-inline {
  container-type: inline-size;
}

/* stylelint-enable declaration-no-important  */
/**
 * @mixin benefit-card-info-compact
 */
/**
 * Used to allow space for contact support in lists/tables/pages.
 */
/**
 * Used to create modifiers for grid children.
 * ex:
 *
 * @include create-grid-modifiers(name, family-name, parent)
 *
 *  &_type_name
 *  &_type_family-name
 *  &_type_parent
 *
 * Also notice the super cool destructuring.
 */
/**
 * Used to style iframes and make them responsive.
 * Taken from: https://avexdesigns.com/responsive-youtube-embed/
 *
 * @mixin iframe
 */
/**
 * Changes a large-table's breakpoints.
 *
 * @mixin large-table-normal
 */
/**
 * Changes a q-large-table's breakpoints.
 *
 * Note: make sure to ':not' all the rest when adding a new breakpoint.
 */
/**
 * Resets an inputs default styles.
 *
 * @mixin reset-input
 */
.ember-basic-dropdown {
  position: relative;
}

.ember-basic-dropdown,
.ember-basic-dropdown-content,
.ember-basic-dropdown-content * {
  box-sizing: border-box;
}

.ember-basic-dropdown-content {
  position: absolute;
  width: auto;
  z-index: 1000;
  background-color: #ffffff;
}

.ember-basic-dropdown-content--left {
  left: 0;
}

.ember-basic-dropdown-content--right {
  right: 0;
}

.ember-basic-dropdown-overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  pointer-events: none;
}

.ember-basic-dropdown-content-wormhole-origin {
  display: inline;
}

.ember-power-select-dropdown * {
  box-sizing: border-box;
}

.ember-power-select-trigger {
  position: relative;
  border-top: none;
  border-bottom: 1px solid #aaaaaa;
  border-right: none;
  border-left: none;
  border-radius: 0;
  background-color: #ffffff;
  line-height: 1.75;
  overflow-x: hidden;
  text-overflow: ellipsis;
  min-height: 1.75em;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  color: inherit;
  /* Minimum clearfix for modern browsers */
}
.ember-power-select-trigger:after {
  content: "";
  display: table;
  clear: both;
}

.ember-power-select-trigger:focus,
.ember-power-select-trigger--active {
  border-top: none;
  border-bottom: 1px solid #0D7383;
  border-right: none;
  border-left: none;
  box-shadow: none;
  outline: none;
}

.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded=true],
.ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded=true] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded=true] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ember-power-select-placeholder {
  color: #999999;
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ember-power-select-status-icon {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-style: solid;
  border-width: 7px 4px 0 4px;
  border-color: #aaaaaa transparent transparent transparent;
}
.ember-basic-dropdown-trigger[aria-expanded=true] .ember-power-select-status-icon {
  transform: rotate(180deg);
}

.ember-power-select-clear-btn {
  position: absolute;
  cursor: pointer;
}

.ember-power-select-trigger-multiple-input {
  font-family: inherit;
  font-size: inherit;
  border: none;
  display: inline-block;
  line-height: inherit;
  -webkit-appearance: none;
  outline: none;
  padding: 0;
  float: left;
  background-color: transparent;
  text-indent: 2px;
  /* There's a browser bug where this selectos cannot be chained with commas */
}
.ember-power-select-trigger-multiple-input:disabled {
  background-color: #eeeeee;
}
.ember-power-select-trigger-multiple-input::-moz-placeholder {
  opacity: 1;
  color: #999999;
}
.ember-power-select-trigger-multiple-input::placeholder {
  opacity: 1;
  color: #999999;
}
.ember-power-select-trigger-multiple-input::-webkit-input-placeholder {
  opacity: 1;
  color: #999999;
}
.ember-power-select-trigger-multiple-input::-moz-placeholder {
  opacity: 1;
  color: #999999;
}
.ember-power-select-trigger-multiple-input::-ms-input-placeholder {
  opacity: 1;
  color: #999999;
}

.ember-power-select-multiple-options {
  padding: 0;
  margin: 0;
}

.ember-power-select-multiple-option {
  border: 1px solid gray;
  border-radius: 0;
  color: #333333;
  background-color: #e4e4e4;
  padding: 0 4px;
  display: inline-block;
  line-height: 1.45;
  float: left;
  margin: 2px 0 2px 3px;
}

.ember-power-select-multiple-remove-btn {
  cursor: pointer;
}
.ember-power-select-multiple-remove-btn:not(:hover) {
  opacity: 0.5;
}

.ember-power-select-search {
  padding: 4px;
}

.ember-power-select-search-input {
  border: 1px solid #aaaaaa;
  border-radius: 0;
  width: 100%;
  font-size: inherit;
  line-height: inherit;
  padding: 0 5px;
}
.ember-power-select-search-input:focus {
  border: 1px solid #0D7383;
  box-shadow: none;
  outline: none;
}

.ember-power-select-dropdown {
  border-left: 1px solid #0D7383;
  border-right: 1px solid #0D7383;
  line-height: 1.75;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  color: inherit;
}

.ember-power-select-dropdown.ember-basic-dropdown-content--above {
  border-top: 1px solid #0D7383;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ember-power-select-dropdown.ember-basic-dropdown-content--below, .ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  border-top: none;
  border-bottom: 1px solid #0D7383;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  width: 100%;
}

.ember-power-select-options {
  list-style: none;
  margin: 0;
  padding: 0;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.ember-power-select-options[role=listbox] {
  overflow-y: auto; /* in firefox in windows this can cause a word-break issue. Try `overflow-y: scroll` if that happens */
  -webkit-overflow-scrolling: touch;
  max-height: 12.25em;
}

.ember-power-select-option {
  cursor: pointer;
  padding: 0 8px;
}

.ember-power-select-group[aria-disabled=true] {
  color: #999999;
  cursor: not-allowed;
}

.ember-power-select-group[aria-disabled=true] .ember-power-select-option,
.ember-power-select-option[aria-disabled=true] {
  color: #999999;
  pointer-events: none;
  cursor: not-allowed;
}

.ember-power-select-option[aria-selected=true] {
  background-color: rgba(188, 216, 218, 0.7);
}

.ember-power-select-option[aria-current=true] {
  background-color: #1297AC;
  color: #ffffff;
}

.ember-power-select-group-name {
  cursor: default;
  font-weight: bold;
}

.ember-power-select-trigger[aria-disabled=true] {
  background-color: #eeeeee;
}

.ember-power-select-trigger {
  padding: 0 16px 0 0;
}

.ember-power-select-selected-item, .ember-power-select-placeholder {
  margin-left: 8px;
}

.ember-power-select-status-icon {
  right: 5px;
}

.ember-power-select-clear-btn {
  right: 25px;
}

.ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-left: 24px;
}
.ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-left: 40px;
}
.ember-power-select-group .ember-power-select-option {
  padding-left: 24px;
}
.ember-power-select-group .ember-power-select-group-name {
  padding-left: 8px;
}

.ember-power-select-trigger[dir=rtl] {
  padding: 0 0 0 16px;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-selected-item, .ember-power-select-trigger[dir=rtl] .ember-power-select-placeholder {
  margin-right: 8px;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-multiple-option {
  float: right;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-trigger-multiple-input {
  float: right;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-status-icon {
  left: 5px;
  right: initial;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-clear-btn {
  left: 25px;
  right: initial;
}

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-right: 24px;
}
.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-right: 40px;
}
.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-option {
  padding-right: 24px;
}
.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group-name {
  padding-right: 8px;
}

.ember-power-select-trigger {
  line-height: 18px;
  min-height: 20px;
  border-color: var(--color-light-grey-5);
}
.ember-power-select-trigger_is-borderless, .ember-power-select-trigger_is-borderless:focus {
  border: 0;
}
.ember-power-select-trigger_is-paddingless {
  padding: 0;
}
.ember-power-select-trigger.ember-power-select-trigger_border-bottom-color_red {
  border-bottom-color: var(--color-red);
}
.ember-power-select-trigger_font-size_14 {
  font-size: 14px;
}
.ember-power-select-trigger_background-color_transparent {
  background-color: transparent;
}
.ember-power-select-trigger_padding_10 {
  padding: 10px;
}
.ember-power-select-trigger_has-thin-arrow {
  /**
  * 1. Account for clear (x) button.
  */
}
.ember-power-select-trigger_has-thin-arrow .ember-power-select-status-icon {
  width: 10px;
  height: 5px;
  right: 10px;
  border: none;
  background: url("/assets/images/icons/arrow-down-grey-thin.svg") center no-repeat;
}
.ember-power-select-trigger_has-thin-arrow .ember-power-select-selected-item, .ember-power-select-trigger_has-thin-arrow .ember-power-select-placeholder {
  margin-right: 11px; /* 1 */
}
.ember-power-select-trigger_padding-left_5 {
  padding-left: 5px;
}

.ember-power-select-search_padding_8 {
  padding: 8px;
}

.ember-power-select-search-input,
.ember-power-select-search-input:focus {
  border-top: none;
  border-right: none;
  border-left: none;
}

/**
 * 1. Needs to be less than the fixed headers which are also
 * ember-wormholes.
 */
.ember-basic-dropdown-content {
  z-index: 5; /* 1 */
}

.ember-power-select-trigger {
  transition: all 200ms ease;
}

/**
 * 1. Needed for when there are extra lines hidden by the overflow, making
 * the clear button disappear, so we make it appear right above the trigger's
 * bottom border.
 */
.ember-power-select-trigger_no-overflow {
  max-height: 38px;
  overflow-y: hidden;
}
.ember-power-select-trigger_no-overflow .ember-power-select-clear-btn {
  bottom: 0; /* 1 */
}

.ember-power-select-trigger_clear-btn-bottom_11 .ember-power-select-clear-btn {
  bottom: 11px;
}

.ember-power-select-placeholder {
  overflow: hidden;
  color: var(--color-light-grey-6);
}

/**
 * 1. Account for clear (x) button.
 */
.ember-power-select-selected-item, .ember-power-select-placeholder {
  margin-left: 0;
  margin-right: 7px; /* 1 */
}

.ember-power-select-trigger_selected-item-display_flex .ember-power-select-selected-item {
  display: flex;
}

@keyframes ember-power-select__above {
  0% {
    opacity: 0;
    transform: scale(0);
    transform-origin: top;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ember-power-select__below {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.ember-power-select_slide-fade.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
  transform-origin: top;
  animation: ember-power-select__above 0.2s;
}
.ember-power-select_slide-fade.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-out {
  animation: ember-power-select__above 0.2s reverse;
}
.ember-power-select_slide-fade.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-in {
  transform-origin: bottom;
  animation: ember-power-select__below 0.2s;
}
.ember-power-select_slide-fade.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
  transform-origin: bottom;
  animation: ember-power-select__below 0.2s reverse;
}

/**
 * Stops the power-select dropdown from leaving an artifact on the screen
 * by forcing the browser to use the GPU to do all the rendering.
 * Note: This bug appeared only in Chrome on Windows.
 */
.ember-power-select-search-input {
  transform: translateZ(0);
}
.ember-power-select-search-input_font-size_14 {
  font-size: 14px;
}
.ember-power-select-search-input_has-icon {
  background: url("/assets/images/icons/search.svg") right no-repeat;
  background-size: 16px 16px;
}

/**
 * @modifier is-in-modal
 */
.ember-power-select-dropdown_is-in-modal {
  z-index: 13;
}

.ember-power-select-trigger[aria-disabled=true] {
  background-color: transparent;
  color: #9A8E8F;
  -webkit-text-fill-color: #9A8E8F;
  border-bottom: 0;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.ember-power-select-trigger[aria-disabled=true] .ember-power-select-status-icon {
  display: none;
}

.ember-power-select-dropdown.ember-basic-dropdown-content--below,
.ember-power-select-dropdown.ember-basic-dropdown-content--above,
.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  border-color: #0D7383;
}

.ember-power-select-dropdown.ember-basic-dropdown-content--below.ember-power-select-dropdown_has-border-top {
  border-top: 1px solid #0D7383;
}

.ember-power-select_theme_blue.ember-basic-dropdown-content--below, .ember-power-select_theme_blue.ember-basic-dropdown-content--above, .ember-power-select_theme_blue.ember-basic-dropdown-content--in-place {
  border-color: #03336B;
}
.ember-power-select_theme_blue .ember-power-select-search-input:focus {
  border-color: #03336B;
}
.ember-power-select_theme_blue .ember-power-select-option[aria-selected=true] {
  background-color: #034FA8;
  color: #FFF;
}
.ember-power-select_theme_blue .ember-power-select-option[aria-current=true] {
  background-color: rgba(2, 36, 76, 0.8);
}

.ember-application:not(#ember-testing) .power-select_theme_blue .ember-power-select-trigger:focus:not(.ember-power-select-trigger_border-bottom-color_red),
.ember-application:not(#ember-testing) .power-select_theme_blue .ember-power-select-trigger--active:not(.ember-power-select-trigger_border-bottom-color_red) {
  border-bottom-color: #03336B;
}

#ember-testing .power-select_theme_blue .ember-power-select-trigger:focus:not(.ember-power-select-trigger_border-bottom-color_red),
#ember-testing .power-select_theme_blue .ember-power-select-trigger--active:not(.ember-power-select-trigger_border-bottom-color_red) {
  border-bottom-color: rgba(92, 80, 80, 0.3);
}

.ember-power-select_has-placeholder-error .ember-power-select-placeholder {
  color: var(--color-red);
}

.ember-power-select-trigger_has-clear-icon {
  padding-right: 35px;
}

.ember-power-select-option {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ember-power-select-option_font-size_14 {
  font-size: 14px;
}
.ember-power-select-option_theme_light-green .ember-power-select-option[aria-current=true] {
  color: #000;
  background-color: #F4FBFC;
}
.ember-power-select-option_theme_light-green .ember-power-select-option[aria-selected=true] {
  color: #000;
  background-color: #F4FBFC;
}
.ember-power-select-option_overflow_visible {
  overflow: visible;
}

.ember-power-select-create-new-holder {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  color: #1297AC;
  font-size: 14px;
}
.ember-power-select-create-new-holder:hover {
  background-color: #1297AC;
  color: #FFF;
}
.ember-power-select-create-new-holder:hover .ember-power-select-create-plus {
  display: flex;
  align-items: center;
}
.ember-power-select-create-new-holder:hover .ember-power-select-create-plus::before {
  content: "";
  height: 20px;
  width: 14px;
  background-image: var(--svg-plus);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 7px 7px;
  background-image: url("/assets/images/icons/plus.svg");
}
.ember-power-select-create-new-holder .ember-power-select-create-plus {
  display: flex;
  align-items: center;
}
.ember-power-select-create-new-holder .ember-power-select-create-plus::before {
  content: "";
  height: 20px;
  width: 14px;
  background-image: var(--svg-plus);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 7px 7px;
  background-image: var(--svg-plus);
}

.ember-power-select-empty-search {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 5px;
}

.ember-power-select-empty-search-text {
  font-weight: 600;
  text-align: center;
}

.gt-pikaday .is-today .pika-button {
  color: var(--main-color);
}
.gt-pikaday .is-selected .pika-button {
  background: var(--main-background-color-3);
  box-shadow: none;
  color: #FFFFFF;
}
.gt-pikaday .pika-button:hover {
  background: var(--main-color-contrast-2);
  color: #FFFFFF;
}

/**
 * 1. Must be less than fixed headers (when scrolled).
 */
.pika-single {
  z-index: 5; /* 1 */
}

/**
 * @modifier is-in-modal
 */
.gt-pikaday_is-in-modal {
  z-index: 13;
}

.ui-timepicker-container {
  font-size: 16px;
}

.ui-timepicker-standard a {
  color: #5C5050;
  cursor: pointer;
}

.ui-timepicker-standard .ui-state-hover {
  background-color: var(--main-color);
  color: #FFF;
}

.pcr-app[data-theme=classic] {
  box-sizing: border-box;
  width: 100%;
  box-shadow: none;
  padding: 0;
  background-color: inherit;
  flex: 1;
}
.pcr-app[data-theme=classic] .pcr-selection {
  flex-direction: column;
  justify-content: flex-start;
}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette {
  width: 100%;
  height: unset;
  aspect-ratio: 1/1;
}
@media (max-width: 81.24em) {
  .pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette {
    aspect-ratio: 2/1;
  }
}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser {
  margin-top: 0.75em;
  margin-left: 0;
  width: 100%;
  justify-content: center;
}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-hue {
  background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
  width: 100%;
  height: 15px;
}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker {
  transform: none;
}

.g-coverage-icon-1 {
  background-image: url("/assets/images/icons/coverage-types/unknown-1.svg");
}

.g-coverage-icon-1-empty {
  background-image: url("/assets/images/icons/coverage-types/unknown-1-empty.svg");
}

.g-coverage-icon-1-empty-green {
  background-image: url("/assets/images/icons/coverage-types/unknown-empty-green.svg");
}

.g-coverage-icon-1-white {
  background-image: url("/assets/images/icons/coverage-types/unknown-white.svg");
}

.g-coverage-icon-1-green {
  background-image: url("/assets/images/icons/coverage-types/unknown-green.svg");
}

.g-coverage-color-1 {
  color: #C78181;
}

.g-coverage-background-color-1 {
  background-color: #C78181;
}

.g-coverage-icon-2 {
  background-image: url("/assets/images/icons/coverage-types/unknown-2.svg");
}

.g-coverage-icon-2-empty {
  background-image: url("/assets/images/icons/coverage-types/unknown-2-empty.svg");
}

.g-coverage-icon-2-empty-green {
  background-image: url("/assets/images/icons/coverage-types/unknown-empty-green.svg");
}

.g-coverage-icon-2-white {
  background-image: url("/assets/images/icons/coverage-types/unknown-white.svg");
}

.g-coverage-icon-2-green {
  background-image: url("/assets/images/icons/coverage-types/unknown-green.svg");
}

.g-coverage-color-2 {
  color: #8FC1C9;
}

.g-coverage-background-color-2 {
  background-color: #8FC1C9;
}

.g-coverage-icon-3 {
  background-image: url("/assets/images/icons/coverage-types/unknown-3.svg");
}

.g-coverage-icon-3-empty {
  background-image: url("/assets/images/icons/coverage-types/unknown-3-empty.svg");
}

.g-coverage-icon-3-empty-green {
  background-image: url("/assets/images/icons/coverage-types/unknown-empty-green.svg");
}

.g-coverage-icon-3-white {
  background-image: url("/assets/images/icons/coverage-types/unknown-white.svg");
}

.g-coverage-icon-3-green {
  background-image: url("/assets/images/icons/coverage-types/unknown-green.svg");
}

.g-coverage-color-3 {
  color: #9D81AF;
}

.g-coverage-background-color-3 {
  background-color: #9D81AF;
}

.g-coverage-icon-4 {
  background-image: url("/assets/images/icons/coverage-types/unknown-4.svg");
}

.g-coverage-icon-4-empty {
  background-image: url("/assets/images/icons/coverage-types/unknown-4-empty.svg");
}

.g-coverage-icon-4-empty-green {
  background-image: url("/assets/images/icons/coverage-types/unknown-empty-green.svg");
}

.g-coverage-icon-4-white {
  background-image: url("/assets/images/icons/coverage-types/unknown-white.svg");
}

.g-coverage-icon-4-green {
  background-image: url("/assets/images/icons/coverage-types/unknown-green.svg");
}

.g-coverage-color-4 {
  color: #7086BE;
}

.g-coverage-background-color-4 {
  background-color: #7086BE;
}

.g-coverage-icon-medical {
  background-image: url("/assets/images/icons/coverage-types/medical.svg");
}

.g-coverage-icon-medical-empty {
  background-image: url("/assets/images/icons/coverage-types/medical-empty.svg");
}

.g-coverage-icon-medical-empty-green {
  background-image: url("/assets/images/icons/coverage-types/medical-empty-green.svg");
}

.g-coverage-icon-medical-white {
  background-image: url("/assets/images/icons/coverage-types/medical-white.svg");
}

.g-coverage-icon-medical-green {
  background-image: url("/assets/images/icons/coverage-types/medical-green.svg");
}

.g-coverage-color-medical {
  color: #BC2D19;
}

.g-coverage-background-color-medical {
  background-color: #BC2D19;
}

.g-coverage-icon-dental {
  background-image: url("/assets/images/icons/coverage-types/dental.svg");
}

.g-coverage-icon-dental-empty {
  background-image: url("/assets/images/icons/coverage-types/dental-empty.svg");
}

.g-coverage-icon-dental-empty-green {
  background-image: url("/assets/images/icons/coverage-types/dental-empty-green.svg");
}

.g-coverage-icon-dental-white {
  background-image: url("/assets/images/icons/coverage-types/dental-white.svg");
}

.g-coverage-icon-dental-green {
  background-image: url("/assets/images/icons/coverage-types/dental-green.svg");
}

.g-coverage-color-dental {
  color: #456FA8;
}

.g-coverage-background-color-dental {
  background-color: #456FA8;
}

.g-coverage-icon-vision {
  background-image: url("/assets/images/icons/coverage-types/vision.svg");
}

.g-coverage-icon-vision-empty {
  background-image: url("/assets/images/icons/coverage-types/vision-empty.svg");
}

.g-coverage-icon-vision-empty-green {
  background-image: url("/assets/images/icons/coverage-types/vision-empty-green.svg");
}

.g-coverage-icon-vision-white {
  background-image: url("/assets/images/icons/coverage-types/vision-white.svg");
}

.g-coverage-icon-vision-green {
  background-image: url("/assets/images/icons/coverage-types/vision-green.svg");
}

.g-coverage-color-vision {
  color: #76C2AE;
}

.g-coverage-background-color-vision {
  background-color: #76C2AE;
}

.g-coverage-icon-life {
  background-image: url("/assets/images/icons/coverage-types/life.svg");
}

.g-coverage-icon-life-empty {
  background-image: url("/assets/images/icons/coverage-types/life-empty.svg");
}

.g-coverage-icon-life-empty-green {
  background-image: url("/assets/images/icons/coverage-types/life-empty-green.svg");
}

.g-coverage-icon-life-white {
  background-image: url("/assets/images/icons/coverage-types/life-white.svg");
}

.g-coverage-icon-life-green {
  background-image: url("/assets/images/icons/coverage-types/life-green.svg");
}

.g-coverage-color-life {
  color: #744888;
}

.g-coverage-background-color-life {
  background-color: #744888;
}

.g-coverage-icon-waived {
  background-image: url("/assets/images/icons/coverage-types/waived.svg");
}

.g-coverage-icon-waived-empty {
  background-image: url("/assets/images/icons/coverage-types/waived-empty.svg");
}

.g-coverage-icon-waived-empty-green {
  background-image: url("/assets/images/icons/coverage-types/waived-empty-green.svg");
}

.g-coverage-icon-waived-white {
  background-image: url("/assets/images/icons/coverage-types/waived-white.svg");
}

.g-coverage-icon-waived-green {
  background-image: url("/assets/images/icons/coverage-types/waived-green.svg");
}

.g-coverage-color-waived {
  color: #E57463;
}

.g-coverage-background-color-waived {
  background-color: #E57463;
}

.g-coverage-icon-no-coverages {
  background-image: url("/assets/images/icons/coverage-types/no-coverages.svg");
}

.g-coverage-icon-no-coverages-empty {
  background-image: url("/assets/images/icons/coverage-types/no-coverages-empty.svg");
}

.g-coverage-icon-no-coverages-empty-green {
  background-image: url("/assets/images/icons/coverage-types/no-coverages-empty-green.svg");
}

.g-coverage-icon-no-coverages-white {
  background-image: url("/assets/images/icons/coverage-types/no-coverages-white.svg");
}

.g-coverage-icon-no-coverages-green {
  background-image: url("/assets/images/icons/coverage-types/no-coverages-green.svg");
}

.g-coverage-color-no-coverages {
  color: #E57463;
}

.g-coverage-background-color-no-coverages {
  background-color: #E57463;
}

.g-coverage-icon-physician-access {
  background-image: url("/assets/images/icons/coverage-types/physician-access.svg");
}

.g-coverage-icon-physician-access-empty {
  background-image: url("/assets/images/icons/coverage-types/physician-access-empty.svg");
}

.g-coverage-icon-physician-access-empty-green {
  background-image: url("/assets/images/icons/coverage-types/physician-access-empty-green.svg");
}

.g-coverage-icon-physician-access-white {
  background-image: url("/assets/images/icons/coverage-types/physician-access-white.svg");
}

.g-coverage-icon-physician-access-green {
  background-image: url("/assets/images/icons/coverage-types/physician-access-green.svg");
}

.g-coverage-color-physician-access {
  color: #E0B831;
}

.g-coverage-background-color-physician-access {
  background-color: #E0B831;
}

.g-coverage-icon-chiropractic {
  background-image: url("/assets/images/icons/coverage-types/chiropractic.svg");
}

.g-coverage-icon-chiropractic-empty {
  background-image: url("/assets/images/icons/coverage-types/chiropractic-empty.svg");
}

.g-coverage-icon-chiropractic-empty-green {
  background-image: url("/assets/images/icons/coverage-types/chiropractic-empty-green.svg");
}

.g-coverage-icon-chiropractic-white {
  background-image: url("/assets/images/icons/coverage-types/chiropractic-white.svg");
}

.g-coverage-icon-chiropractic-green {
  background-image: url("/assets/images/icons/coverage-types/chiropractic-green.svg");
}

.g-coverage-color-chiropractic {
  color: #69BEF8;
}

.g-coverage-background-color-chiropractic {
  background-color: #69BEF8;
}

.g-coverage-icon-accident {
  background-image: url("/assets/images/icons/coverage-types/accident.svg");
}

.g-coverage-icon-accident-empty {
  background-image: url("/assets/images/icons/coverage-types/accident-empty.svg");
}

.g-coverage-icon-accident-empty-green {
  background-image: url("/assets/images/icons/coverage-types/accident-empty-green.svg");
}

.g-coverage-icon-accident-white {
  background-image: url("/assets/images/icons/coverage-types/accident-white.svg");
}

.g-coverage-icon-accident-green {
  background-image: url("/assets/images/icons/coverage-types/accident-green.svg");
}

.g-coverage-color-accident {
  color: #D57200;
}

.g-coverage-background-color-accident {
  background-color: #D57200;
}

.g-coverage-icon-personal-accident {
  background-image: url("/assets/images/icons/coverage-types/accident.svg");
}

.g-coverage-icon-personal-accident-empty {
  background-image: url("/assets/images/icons/coverage-types/accident-empty.svg");
}

.g-coverage-icon-personal-accident-empty-green {
  background-image: url("/assets/images/icons/coverage-types/accident-empty-green.svg");
}

.g-coverage-icon-personal-accident-white {
  background-image: url("/assets/images/icons/coverage-types/accident-white.svg");
}

.g-coverage-icon-personal-accident-green {
  background-image: url("/assets/images/icons/coverage-types/accident-green.svg");
}

.g-coverage-color-personal-accident {
  color: #D57200;
}

.g-coverage-background-color-personal-accident {
  background-color: #D57200;
}

.g-coverage-icon-eap {
  background-image: url("/assets/images/icons/coverage-types/eap.svg");
}

.g-coverage-icon-eap-empty {
  background-image: url("/assets/images/icons/coverage-types/eap-empty.svg");
}

.g-coverage-icon-eap-empty-green {
  background-image: url("/assets/images/icons/coverage-types/eap-empty-green.svg");
}

.g-coverage-icon-eap-white {
  background-image: url("/assets/images/icons/coverage-types/eap-white.svg");
}

.g-coverage-icon-eap-green {
  background-image: url("/assets/images/icons/coverage-types/eap-green.svg");
}

.g-coverage-color-eap {
  color: #52C7B5;
}

.g-coverage-background-color-eap {
  background-color: #52C7B5;
}

.g-coverage-icon-hearing {
  background-image: url("/assets/images/icons/coverage-types/hearing.svg");
}

.g-coverage-icon-hearing-empty {
  background-image: url("/assets/images/icons/coverage-types/hearing-empty.svg");
}

.g-coverage-icon-hearing-empty-green {
  background-image: url("/assets/images/icons/coverage-types/hearing-empty-green.svg");
}

.g-coverage-icon-hearing-white {
  background-image: url("/assets/images/icons/coverage-types/hearing-white.svg");
}

.g-coverage-icon-hearing-green {
  background-image: url("/assets/images/icons/coverage-types/hearing-green.svg");
}

.g-coverage-color-hearing {
  color: #1872AF;
}

.g-coverage-background-color-hearing {
  background-color: #1872AF;
}

.g-coverage-icon-pre-paid-legal-service {
  background-image: url("/assets/images/icons/coverage-types/pre-paid-legal-service.svg");
}

.g-coverage-icon-pre-paid-legal-service-empty {
  background-image: url("/assets/images/icons/coverage-types/pre-paid-legal-service-empty.svg");
}

.g-coverage-icon-pre-paid-legal-service-empty-green {
  background-image: url("/assets/images/icons/coverage-types/pre-paid-legal-service-empty-green.svg");
}

.g-coverage-icon-pre-paid-legal-service-white {
  background-image: url("/assets/images/icons/coverage-types/pre-paid-legal-service-white.svg");
}

.g-coverage-icon-pre-paid-legal-service-green {
  background-image: url("/assets/images/icons/coverage-types/pre-paid-legal-service-green.svg");
}

.g-coverage-color-pre-paid-legal-service {
  color: #A26F29;
}

.g-coverage-background-color-pre-paid-legal-service {
  background-color: #A26F29;
}

.g-coverage-icon-wellness {
  background-image: url("/assets/images/icons/coverage-types/wellness.svg");
}

.g-coverage-icon-wellness-empty {
  background-image: url("/assets/images/icons/coverage-types/wellness-empty.svg");
}

.g-coverage-icon-wellness-empty-green {
  background-image: url("/assets/images/icons/coverage-types/wellness-empty-green.svg");
}

.g-coverage-icon-wellness-white {
  background-image: url("/assets/images/icons/coverage-types/wellness-white.svg");
}

.g-coverage-icon-wellness-green {
  background-image: url("/assets/images/icons/coverage-types/wellness-green.svg");
}

.g-coverage-color-wellness {
  color: #8AC349;
}

.g-coverage-background-color-wellness {
  background-color: #8AC349;
}

.g-coverage-icon-alternative-care {
  background-image: url("/assets/images/icons/coverage-types/alternative-care.svg");
}

.g-coverage-icon-alternative-care-empty {
  background-image: url("/assets/images/icons/coverage-types/alternative-care-empty.svg");
}

.g-coverage-icon-alternative-care-empty-green {
  background-image: url("/assets/images/icons/coverage-types/alternative-care-empty-green.svg");
}

.g-coverage-icon-alternative-care-white {
  background-image: url("/assets/images/icons/coverage-types/alternative-care-white.svg");
}

.g-coverage-icon-alternative-care-green {
  background-image: url("/assets/images/icons/coverage-types/alternative-care-green.svg");
}

.g-coverage-color-alternative-care {
  color: #8AC349;
}

.g-coverage-background-color-alternative-care {
  background-color: #8AC349;
}

.g-coverage-icon-advocacy-program {
  background-image: url("/assets/images/icons/coverage-types/advocacy-program.svg");
}

.g-coverage-icon-advocacy-program-empty {
  background-image: url("/assets/images/icons/coverage-types/advocacy-program-empty.svg");
}

.g-coverage-icon-advocacy-program-empty-green {
  background-image: url("/assets/images/icons/coverage-types/advocacy-program-empty-green.svg");
}

.g-coverage-icon-advocacy-program-white {
  background-image: url("/assets/images/icons/coverage-types/advocacy-program-white.svg");
}

.g-coverage-icon-advocacy-program-green {
  background-image: url("/assets/images/icons/coverage-types/advocacy-program-green.svg");
}

.g-coverage-color-advocacy-program {
  color: #2D80B7;
}

.g-coverage-background-color-advocacy-program {
  background-color: #2D80B7;
}

.g-coverage-icon-rx {
  background-image: url("/assets/images/icons/coverage-types/rx.svg");
}

.g-coverage-icon-rx-empty {
  background-image: url("/assets/images/icons/coverage-types/rx-empty.svg");
}

.g-coverage-icon-rx-empty-green {
  background-image: url("/assets/images/icons/coverage-types/rx-empty-green.svg");
}

.g-coverage-icon-rx-white {
  background-image: url("/assets/images/icons/coverage-types/rx-white.svg");
}

.g-coverage-icon-rx-green {
  background-image: url("/assets/images/icons/coverage-types/rx-green.svg");
}

.g-coverage-color-rx {
  color: #95989A;
}

.g-coverage-background-color-rx {
  background-color: #95989A;
}

/**
 * Used to style the vertical-collection addon for lazy rendering.
 * This only applies to the `lazy-list` component not any usage of the addon.
 */
vertical-item {
  display: block;
  width: 100%;
  min-height: 1px;
  position: relative;
}

/**
 * @block activity-card
 */
.activity-card {
  position: relative;
  display: block;
  height: 129px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--main-color-light-7);
  background-color: #FFF;
}
.activity-card:not(.activity-card_is-mask):hover {
  background-color: var(--main-color-light-18);
}

/**
 * @element icon
 */
.activity-card__icon {
  position: absolute;
  top: 10px;
  left: 7px;
}

/**
 * @element status
 */
.activity-card__status {
  position: absolute;
  top: 11px;
  right: 11px;
}

/**
 * @element link
 */
.activity-card__link {
  position: absolute;
  bottom: 11px;
  right: 11px;
}

/**
 * @element content
 */
.activity-card__content {
  height: 100%;
  box-sizing: border-box;
  padding: 7px 0 0 28px;
}

/**
 * @element employee-name
 */
.activity-card__employee-name {
  color: #5C5050;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 1px;
  display: inline-block;
  cursor: pointer;
}
.activity-card__employee-name:hover, .activity-card__employee-name:focus {
  color: var(--main-color);
}
.activity-card__employee-name:active {
  color: var(--main-color-dark);
}

/**
 * @element change-reason
 */
.activity-card__change-reason {
  height: 18px;
  color: #5C5050;
  font-size: 14px;
  margin-bottom: 5px;
}

/**
 * @element description
 */
.activity-card__description {
  display: flex;
  flex-direction: column;
  color: #B0A7A8;
  font-size: 12px;
  margin-bottom: 5px;
}
.activity-card__description > span {
  white-space: pre;
}

@media screen and (min-width: 440px) {
  /**
   * @block activity-card
   */
  .activity-card {
    height: 88px;
  }
  /**
   * @element change-reason
   */
  .activity-card__change-reason {
    margin-bottom: 3px;
  }
  /**
   * @element description
   */
  .activity-card__description {
    flex-direction: row;
    margin-bottom: 2px;
  }
}
@media screen and (min-width: 768px) and (max-width: 900.9px) {
  /**
   * @block activity-card
   */
  .activity-card {
    height: 129px;
  }
  /**
   * @element description
   */
  .activity-card__description {
    flex-direction: column;
    margin-bottom: 5px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1140.9px) {
  /**
   * @block activity-card
   */
  .activity-card {
    height: 129px;
  }
  /**
   * @element description
   */
  .activity-card__description {
    flex-direction: column;
    margin-bottom: 5px;
  }
}
/**
 * @block activity-icon
 */
.activity-icon {
  content: "";
  width: 15px;
  height: 15px;
  background-image: url("/assets/images/icons/waves-clear.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  /**
   * @modifier type
   * @value flag
   * @for icon
   */
  /**
   * @modifier type
   * @value adoption-legal-guardianship
   * @for icon
   */
  /**
   * @modifier type
   * @value beneficiary-change
   * @for icon
   */
  /**
   * @modifier type
   * @value benefits-change
   * @for icon
   */
  /**
   * @modifier type
   * @value birth-of-a-child
   * @for icon
   */
  /**
   * @modifier type
   * @value cdhp-contribution-change
   * @for icon
   */
  /**
   * @modifier type
   * @value chip-premium-assistance
   * @for icon
   */
  /**
   * @modifier type
   * @value court-order
   * @for icon
   */
  /**
   * @modifier type
   * @value demographic-change
   * @for icon
   */
  /**
   * @modifier type
   * @value loss-of-coverage
   * @for icon
   */
  /**
   * @modifier type
   * @value marriage-declaration-of-domestic-partner
   * @for icon
   */
  /**
   * @modifier type
   * @value new-group-data-import
   * @for icon
   */
  /**
   * @modifier type
   * @value new-hire
   * @for icon
   */
  /**
   * @modifier type
   * @value new-to-eligible-class
   * @for icon
   */
  /**
   * @modifier type
   * @value open-enrollment
   * @for icon
   */
  /**
   * @modifier type
   * @value new-group-enrollment
   * @for icon
   */
  /**
   * @modifier type
   * @value termination
   * @for icon
   */
  /**
   * @modifier type
   * @value change-of-status
   * @for icon
   */
  /**
   * @modifier type
   * @value simon-invite
   * @for icon
   */
}
.activity-icon_type_flag {
  background-image: url("/assets/images/icons/red-flag.svg");
  background-size: 9px 12px;
}
.activity-icon_type_adoption-legal-guardianship {
  background-image: url("/assets/images/icons/hand-holding-hand.svg");
}
.activity-icon_type_beneficiary-change {
  background-image: url("/assets/images/icons/umbrella.svg");
}
.activity-icon_type_benefits-change {
  background-image: url("/assets/images/icons/pencil.svg");
}
.activity-icon_type_birth-of-a-child {
  background-image: url("/assets/images/icons/baby-cart.svg");
}
.activity-icon_type_cdhp-contribution-change {
  background-image: url("/assets/images/icons/money-bag.svg");
}
.activity-icon_type_chip-premium-assistance {
  background-image: url("/assets/images/icons/building.svg");
}
.activity-icon_type_court-order {
  background-image: url("/assets/images/icons/documents.svg");
}
.activity-icon_type_demographic-change {
  background-image: url("/assets/images/icons/contact.svg");
}
.activity-icon_type_loss-of-coverage {
  background-image: url("/assets/images/icons/heart.svg");
}
.activity-icon_type_marriage-declaration-of-domestic-partner {
  background-image: url("/assets/images/icons/couple.svg");
}
.activity-icon_type_new-group-data-import {
  background-image: url("/assets/images/icons/group.svg");
}
.activity-icon_type_new-hire {
  background-image: url("/assets/images/icons/person.svg");
}
.activity-icon_type_new-to-eligible-class {
  background-image: url("/assets/images/icons/up-arrow-in-circle.svg");
}
.activity-icon_type_open-enrollment {
  background-image: url("/assets/images/icons/folder.svg");
}
.activity-icon_type_new-group-enrollment {
  background-image: url("/assets/images/icons/group.svg");
}
.activity-icon_type_termination {
  background-image: url("/assets/images/icons/green-x-sign.svg");
}
.activity-icon_type_change-of-status {
  background-image: url("/assets/images/icons/pulse.svg");
}
.activity-icon_type_simon-invite {
  background-image: url("/assets/images/icons/hand-click.svg");
  background-size: 13px 13px;
}

:root {
  --age-based-rates-table-content-row-height: 0;
  --age-based-rates-table-content-row-mobile: 0;
}

.age-based-rates-table {
  background-color: #FFFFFF;
}

.age-based-rates-table__content-holder {
  height: calc(4 * var(--age-based-rates-table-content-row-height));
  overflow: hidden;
}
@media (max-width: 47.99em) {
  .age-based-rates-table__content-holder {
    height: calc(4 * var(--age-based-rates-table-content-row-height-mobile));
  }
}
.age-based-rates-table__content-holder_has-six-rows {
  height: calc(6 * var(--age-based-rates-table-content-row-height));
}
@media (max-width: 47.99em) {
  .age-based-rates-table__content-holder_has-six-rows {
    height: calc(6 * var(--age-based-rates-table-content-row-height-mobile));
  }
}

.age-based-rates-table__scrollable-content {
  height: 100%;
  transition: transform 400ms ease;
}

.age-based-rates-table__header {
  height: 70px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.age-based-rates-table__header_height_50 {
  height: 50px;
}
.age-based-rates-table__header_has-border-bottom {
  border-bottom: solid thin #DADADA;
}

.age-based-rates-table__header-bottom {
  display: flex;
  align-items: center;
  min-height: 30px;
}

.age-based-rates-table__header-right {
  display: flex;
  align-items: center;
  height: 100%;
}

.age-based-rates-table__refresh-container {
  height: 100%;
  margin-right: 15px;
}

.age-based-rates-table__header-left-split {
  flex: 1;
  display: flex;
}

.age-based-rates-table__title {
  font-size: 16px;
  font-weight: 700;
}

.age-based-rates-table__rates-notice {
  font-size: 14px;
}

/**
 * @block alert-card
 */
.alert-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 18px;
  height: 110px;
  box-sizing: border-box;
  /**
   * @modifier is-unread
   */
  /**
   * 1. Disables hover.
   *
   * @modifier is-loading
   */
}
.alert-card_is-unread .alert-card__title {
  font-weight: bold;
}
.alert-card_is-unread .alert-card__info {
  font-weight: 600;
}
.alert-card_is-loading {
  pointer-events: none; /* 1 */
}
.alert-card:hover, .alert-card:focus {
  background-color: #F2F6F7;
  outline: none;
}
.alert-card_is-active:not(.alert-card_is-loading), .alert-card_is-active:hover {
  background-color: #E3ECEE;
}

/**
 * @element header
 */
.alert-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/**
 * @element info
 */
.alert-card__info {
  color: #B0A7A8;
  font-size: 13px;
}

/**
 * @element title
 */
.alert-card__title {
  color: #5C5050;
  font-size: 16px;
}

.alert-criteria {
  display: block;
}

/**
 * When using liquid if, the top border of the the first field box in this div
 * overlaps with the liquid container when that field box is hovering. The small
 * spacing given here fixes that.
 */
.alert-criteria__criteria {
  margin-top: 1px; /* 1 */
  margin-bottom: 10px;
}

.alert-criteria__title {
  margin-bottom: 15px;
}

.alert-criteria__class-coverage {
  height: 70px;
}

.alert-criteria__add-another-action {
  margin-top: 20px;
  height: 20px;
}

.alert-criteria__class-coverage-delete {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5px;
}

.alert-criteria__viewable-by {
  margin-bottom: 25px;
}

.alert-criteria__section-label {
  margin-bottom: 10px;
}

.alert-criteria__audience-checkbox {
  margin-bottom: 10px;
}

.alert-criteria__radio {
  margin-bottom: 10px;
}
.alert-criteria__radio:last-child {
  margin-bottom: 0;
}

/**
 * 1. When using liquid if, the radio button hover effects overlaps with the liquid container
 * on the left side. The small spacing given here fixes that. (had to be more than 1px due to
 * the size of the hover effect)
 */
.alert-criteria__selection-type-section {
  margin-bottom: 10px;
  margin-left: 3px; /** 1 **/
}

.alert-criteria__filter-by-input-field {
  height: 70px;
}

.alert-criteria__edit-warning {
  margin-bottom: 10px;
}

.alert-criteria__base-alert-container {
  margin-bottom: 20px;
}

.alert-criteria__base-alert-warning {
  margin-top: 10px;
}

/**
 * @block alert-dialog
 */
.alert-dialog {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  width: 100%;
  min-height: 0;
  /**
   * @modifier is-in-modal-form
   */
}
.alert-dialog_is-in-modal-form {
  height: auto;
}
.alert-dialog_is-in-modal-form .alert-dialog__header-title {
  margin-bottom: 5px;
}
.alert-dialog_is-in-modal-form .alert-dialog__header-text {
  margin-bottom: 12px;
}
.alert-dialog_is-in-modal-form .alert-dialog__header {
  padding: 5px 5px 0 5px;
}

/**
 * @element content
 */
.alert-dialog__content {
  min-height: 0;
  flex: 1;
  overflow: hidden;
  height: 100%;
  border-top: solid 1px #CBDBDB;
}

/**
 * @element header
 */
.alert-dialog__header {
  padding: 18px 20px 18px 35px;
}

/**
 * @element header-title
 */
.alert-dialog__header-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/**
 * @element header-text
 */
.alert-dialog__header-text {
  margin-bottom: 10px;
  color: #5C5050;
  font-size: 14px;
}

/**
 * @element header-clear
 */
.alert-dialog__header-clear {
  font-size: 14px;
  color: #D57F73;
}
.alert-dialog__header-clear:hover {
  opacity: 0.8;
}
.alert-dialog__header-clear:active {
  opacity: 0.6;
}

/**
 * @element header-actions
 */
.alert-dialog__header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.assign-dialog {
  display: block;
}

.assign-dialog__body {
  padding-bottom: 30px;
}

.assign-dialog__header {
  margin-bottom: 20px;
}

.assign-dialog__assignee {
  width: 320px;
}

.assign-dialog__bulk-notice {
  margin-bottom: 20px;
}

.assign-dialog__option {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}
.assign-dialog__option_is-unassigned {
  padding-left: 30px;
  position: relative;
}
.assign-dialog__option_is-unassigned::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 19px;
  height: 100%;
  background: url("/assets/images/icons/unassigned.svg") center center no-repeat;
  background-size: 100% 100%;
}

.assign-dialog__field {
  height: 70px;
  margin-top: 15px;
}
@media (min-width: 48em) {
  .assign-dialog__field {
    width: 55%;
  }
}

/**
 * @block alert
 */
@media (max-width: 47.99em) {
  .alert {
    height: 100%;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .alert {
    padding: 0 14px 50px;
  }
}
@media (min-width: 81.25em) {
  .alert {
    height: 100%;
    box-sizing: border-box;
    padding: 0 35px 50px;
  }
}
.alert_padding_0 {
  padding: 0;
}

/**
 * @element container
 */
.alert__container {
  display: flex;
  flex-direction: column;
  background: #FFF;
  border-top: solid 1px var(--color-light-blue);
}
@media (max-width: 47.99em) {
  .alert__container {
    height: 100%;
  }
}
@media (min-width: 48em) {
  .alert__container {
    border: solid 1px var(--color-light-blue);
  }
}
.alert__container_is-borderless {
  border: none;
}
.alert__container_background_none {
  background: none;
}

/**
 * @element body
 */
.alert__body {
  padding: 18px;
  flex: 1;
  background-color: #FFF;
}
@media (max-width: 47.99em) {
  .alert__body {
    padding-bottom: 50px;
  }
}
.alert__body_background_none {
  background: none;
}

/**
 * @element header
 */
.alert__header {
  min-height: 70px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 18px;
  border-bottom: solid 1px var(--main-color-light-7);
}

/**
 * @element header-value
 */
.alert__header-value {
  margin-top: 3px;
  color: #5C5050;
  font-size: 14px;
}

/**
 * @element info
 */
.alert__info {
  margin-bottom: 3px;
  color: #B0A7A8;
  font-size: 13px;
}

/**
 * @element edit
 */
.alert__edit {
  display: inline-block;
}

/**
 * @element title
 */
.alert__title {
  margin: 7px 0 15px;
  color: #5C5050;
  font-size: 16px;
  font-weight: bold;
}

/**
 * @element content
 */
.alert__content h1 {
  font-size: 22px;
}
.alert__content a {
  text-decoration: underline;
}
.alert__content p {
  margin-bottom: 10px;
}

/**
 * @element footer
 */
.alert__footer {
  flex-shrink: 0;
}
@media (max-width: 47.99em) {
  .alert__footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
@media (min-width: 48em) {
  .alert__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 60px;
    padding: 0 18px;
    border-top: solid 1px var(--main-color-light-7);
  }
}

/**
 * 1. Liquid-container and liquid-child's height depend
 * on the height of their content, Therefore if the content height is
 * not fixed we have to set the liquid-container/child height to 100%;
 *
 * Another option would be to use viewport height on the child, but
 * that would introduce another set of problems on mobile.
 */
.x-modal-workflow {
  height: 100%;
}
.x-modal-workflow > .liquid-container {
  height: 100%; /* [1] */
}
.x-modal-workflow > .liquid-container > .liquid-child {
  height: 100%; /* [1] */
}

.amount-table {
  background-color: #FFFFFF;
  border-top: solid 1px var(--main-color-light-29);
  box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.05);
  padding: 2px 10px;
}

.amount-table__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 9px;
  padding-bottom: 9px;
}
.amount-table__row:not(:last-child) {
  border-bottom: 0.5px var(--main-color-light-13) solid;
}

.amount-table__row-label {
  font-family: "Montserrat", sans-serif;
  color: #ADADAD;
  font-size: 10px;
  text-transform: uppercase;
}
.amount-table__row-label_color_light-main {
  color: var(--main-color);
}

.amount-table__row-value {
  font-family: "Montserrat", sans-serif;
  color: #5C5050;
  font-size: 14px;
  font-weight: 500;
}
.amount-table__row-value_is-total-amount {
  color: var(--main-color);
  font-size: 16px;
  font-weight: 400;
}

.animated-border {
  position: absolute;
  /**
   * 1. Decides the width which will be 100% + 2px to account for the border
   * on both sides.
   */
  /**
   * 1. Decides the height which will be 100% + 2px to account for the border
   * on both sides.
   */
}
.animated-border:before, .animated-border:after {
  position: absolute;
  content: "";
  background-color: var(--main-color-dark);
  bottom: 0;
}
.animated-border_position_bottom, .animated-border_position_top {
  left: -1px; /* 1 */
  right: -1px; /* 1 */
  height: 0;
}
.animated-border_position_bottom:before, .animated-border_position_bottom:after, .animated-border_position_top:before, .animated-border_position_top:after {
  height: 1px;
  width: 0;
}
.animated-border_position_bottom:before, .animated-border_position_top:before {
  left: 50%;
}
.animated-border_position_bottom:after, .animated-border_position_top:after {
  right: 50%;
}
.animated-border_position_top {
  top: 0;
  bottom: auto;
}
.animated-border_position_bottom {
  top: auto;
  bottom: -1px;
}
.animated-border_position_left, .animated-border_position_right {
  top: -1px; /* 1 */
  bottom: -1px; /* 1 */
  width: 0;
}
.animated-border_position_left:before, .animated-border_position_left:after, .animated-border_position_right:before, .animated-border_position_right:after {
  height: 0;
  width: 1px;
}
.animated-border_position_left:before, .animated-border_position_right:before {
  top: 0;
}
.animated-border_position_left:after, .animated-border_position_right:after {
  bottom: 0;
}
.animated-border_position_left {
  left: -1px;
  right: auto;
}
.animated-border_position_right {
  right: 0;
  left: auto;
}

.animated-border_is-focused:before, .animated-border_is-focused:after {
  transition: all 150ms ease;
}
.animated-border_is-focused.animated-border_position_top:before, .animated-border_is-focused.animated-border_position_top:after, .animated-border_is-focused.animated-border_position_bottom:before, .animated-border_is-focused.animated-border_position_bottom:after {
  width: 50%;
}
.animated-border_is-focused.animated-border_position_left:before, .animated-border_is-focused.animated-border_position_left:after, .animated-border_is-focused.animated-border_position_right:before, .animated-border_is-focused.animated-border_position_right:after {
  height: 50%;
  transition-delay: 150ms;
}

/**
 * A search input that expands and contracts.
 * Has an icon and a close button.
 */
.animated-search {
  height: 100%;
  display: flex;
  box-sizing: border-box;
}

.animated-search__window {
  width: 100%;
  position: relative;
}

.animated-search__content {
  position: absolute;
  left: 0;
  height: 100%;
  background-color: #FFF;
  display: flex;
  transition: transform 300ms linear;
  overflow-x: hidden;
}
.animated-search__content_has-border-bottom {
  border-bottom: solid thin #EAEAEA;
}
.animated-search__content_box-sizing_border-box {
  box-sizing: border-box;
}

.animated-search__icon {
  cursor: pointer;
  background: url("/assets/images/icons/search.svg") center no-repeat;
  background-size: 20px 22px;
}
.animated-search__icon_is-small-size {
  background-size: 14px 14px;
  background-position: left center;
  background-position-x: 18px;
}

.animated-search__input {
  background-color: #FFF;
  flex: 1;
  height: 100%;
}

.animated-search__action {
  width: 40px;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  /**
   * @for action
   */
  /**
   * @for action
   */
}
.animated-search__action:hover, .animated-search__action:focus {
  opacity: 0.8;
}
.animated-search__action:active {
  opacity: 0.5;
}
.animated-search__action_icon_clear {
  background-image: url("/assets/images/icons/x-sign-clear.svg");
  background-size: 17px 17px;
}
.animated-search__action_icon_close {
  background-image: url("/assets/images/icons/right-arrow-minimize.svg");
  background-size: 18px 18px;
}
.animated-search__action:last-child {
  margin-right: 10px;
}
.animated-search__action_margin-right_45:last-child {
  margin-right: 45px;
}

.animated-search_theme_blue .animated-search__icon {
  background-image: url("/assets/images/themes/blue/icons/search.svg");
}

/**
 * @block available-coverage-card
 */
.available-coverage-card {
  padding: 10px 25px 0;
}

/**
 * @element content
 */
.available-coverage-card__content {
  border-bottom: solid 1px #CBDADA;
  display: flex;
  padding-bottom: 10px;
}

/**
 * @element header
 */
.available-coverage-card__header {
  display: flex;
  flex: 1;
}

/**
 * @element actions
 */
.available-coverage-card__actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

/**
 * Last in a group, so no border bottom.
 *
 * @modifier is-last
 */
.available-coverage-card_is-last .available-coverage-card__content {
  border-bottom: 0;
}

.appearance-card {
  background-color: #FFF;
  border: 1px solid #C7D7D7;
}
.appearance-card__content {
  padding: 20px;
}
@media (max-width: 47.99em) {
  .appearance-card__content {
    border-bottom: 1px solid #C7D7D7;
  }
}
.appearance-card__title {
  margin-bottom: 15px;
  font-weight: bold;
}
.appearance-card__description {
  margin-bottom: 5px;
}
.appearance-card__container {
  margin-top: 20px;
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .appearance-card__container {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}
.appearance-card__body {
  width: 100%;
  min-width: 0;
}
@media (min-width: 64em) {
  .appearance-card__body {
    margin-bottom: 20px;
  }
}
.appearance-card__body-content {
  display: flex;
  gap: 10px;
  align-items: center;
}
@media (max-width: 47.99em) {
  .appearance-card__body-content {
    flex-direction: column;
    align-items: normal;
  }
}
.appearance-card__footer {
  display: flex;
}
.appearance-card__action {
  flex: 1;
}
.appearance-card__buttons {
  display: flex;
  gap: 20px;
  margin-top: 25px;
}
.appearance-card__reset-to-default-button {
  display: flex;
  align-items: center;
  gap: 5px;
  text-wrap: nowrap;
}
.appearance-card__logo-holder {
  padding: 10px 10px;
  border: 1px solid #C7D7D7;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 70px;
  box-sizing: border-box;
}
@media (max-width: 47.99em) {
  .appearance-card__logo-holder {
    width: auto;
  }
}
.appearance-card__logo {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.appearance-card__file-picker {
  flex: 1;
  min-width: 0;
}
.appearance-card__field-box {
  margin-top: 25px;
}

.appearance-theme {
  display: flex;
  align-items: center;
  gap: 5px;
}
.appearance-theme_align-items_flex-start {
  align-items: flex-start;
}
.appearance-theme__palette {
  display: flex;
}
.appearance-theme__palette :nth-child(n) {
  height: 28px;
  width: 20px;
}

.bad-browser {
  height: 100%;
  overflow: auto;
}
.bad-browser_theme_green .bad-browser__title {
  color: #1297AC;
}
.bad-browser_theme_green .bad-browser__browser-icon {
  background-image: url("/assets/images/icons/browser-green.svg");
}

.bad-browser__container {
  min-height: 100%;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bad-browser__browser-icon {
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("/assets/images/icons/browser.svg");
  width: 122px;
  height: 111px;
  background-size: 100% 100%;
}

.bad-browser__button {
  min-width: 170px;
}
@media (max-width: 63.99em) {
  .bad-browser__button {
    padding-bottom: 20px;
    min-width: 190px;
  }
}

.bad-browser__logo {
  text-align: center;
}

.bad-browser__description {
  text-align: center;
  margin-top: 20px;
  max-width: 800px;
}

.bad-browser__title {
  text-align: center;
  font-size: 50px;
  margin-top: 30px;
  color: #034FA8;
  font-weight: lighter;
}

.bad-browser__button-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  flex-wrap: wrap;
}
@media (max-width: 63.99em) {
  .bad-browser__button-container {
    max-width: 420px;
  }
}
@media (max-width: 47.99em) {
  .bad-browser__button-container {
    max-width: 220px;
    justify-content: center;
  }
}

.bad-browser__center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 40px 30px;
}
@media (min-width: 64em) {
  .bad-browser__center {
    max-width: 800px;
  }
}
@media (max-width: 47.99em) {
  .bad-browser__center {
    padding: 80px 20px;
  }
}

.bad-browser__user-title {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4;
}

.bad-browser__close-button {
  position: fixed;
  right: 10px;
  top: 10px;
}

.bank-account-form_margin-top_20 {
  margin-top: 20px;
}
.bank-account-form_has-border-bottom {
  border-bottom: solid 1px #979797;
}
.bank-account-form_padding-bottom_20 {
  padding-bottom: 20px;
}

.bank-account-form__top-container {
  display: flex;
  align-items: baseline;
  margin-bottom: 20px;
}
.bank-account-form__top-container_justify-content_space-between {
  justify-content: space-between;
}
.bank-account-form__top-container_justify-content_flex-end {
  justify-content: flex-end;
}

.bank-account-form__payment-option {
  margin-top: 10px;
}

.bank-account-form__payment-option-text_color_grey {
  color: #9B9B9B;
}

.bank-account-form__save-account {
  padding-top: 20px;
}

.bank-account-form__auto-pay {
  padding-top: 12px;
}

.bank-account-form__auto-pay-checkbox {
  font-size: 14px;
}

.bank-account-form__auto-pay-checkbox-note {
  font-size: 13px;
  margin-top: 7px;
}
.bank-account-form__auto-pay-checkbox-note_is-disabled {
  color: #9A8E8F;
}

/**
 * @block bank-detail-card
 */
.bank-detail-card {
  border-bottom: solid thin #CBDBDB;
  /**
   * @modifier size
   * @value large
   */
  /**
   * @modifier background
   * @value white
   */
  /**
   * @modifier fill-parent
   */
  /**
   * @modifier is-loading
   */
}
.bank-detail-card:last-child {
  border-bottom: none;
}
@media (min-width: 31.25em) {
  .bank-detail-card_size_large {
    border: solid thin #EFEFEF;
    border-radius: 5px;
    margin: 17px;
    padding-bottom: 10px;
    background: #F8F8F8;
  }
  .bank-detail-card_size_large:last-child {
    border-bottom: solid thin #EFEFEF;
  }
}
.bank-detail-card_background_white {
  background: #FFF;
}
.bank-detail-card_fill-parent {
  margin: 0;
}
.bank-detail-card_is-loading {
  background: transparent;
}
.bank-detail-card_padding-top_10 {
  padding-top: 10px;
}

/**
 * @element header
 */
.bank-detail-card__header {
  height: 72px;
  display: flex;
  padding: 0 18px;
  flex-direction: column;
  justify-content: center;
  /**
   * @modifier is-tablet-plus-small
   */
}
@media (min-width: 31.25em) {
  .bank-detail-card__header_is-tablet-plus-small {
    height: 60px;
  }
}

/**
 * @element header-top
 */
.bank-detail-card__header-top {
  display: flex;
  align-items: center;
}

/**
 * @element header-content
 */
.bank-detail-card__header-content {
  display: flex;
  align-items: center;
  flex: 1;
}

@media (min-width: 31.25em) {
  .bank-detail-card__content {
    display: flex;
  }
}

/**
 * @element group
 */
.bank-detail-card__group {
  flex: 1;
}

/**
 * @element extra-cell
 */
.bank-detail-card__extra-cell {
  display: flex;
  box-sizing: border-box;
  padding-right: 18px;
}
@media (max-width: 31.24em) {
  .bank-detail-card__extra-cell {
    align-items: center;
    justify-content: space-between;
  }
}
@media (min-width: 31.25em) {
  .bank-detail-card__extra-cell {
    width: 140px;
    justify-content: flex-end;
    align-items: flex-end;
  }
}

/**
 * @element name
 */
.bank-detail-card__name {
  margin-right: 20px;
  color: #5C5050;
  font-size: 18px;
  font-weight: bold;
}
.bank-detail-card__name_flex_1 {
  flex: 1;
}

/**
 * @element type
 */
.bank-detail-card__type {
  color: #5C5050;
  font-size: 16px;
}

.bank-detail-card__labels-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/**
 * @element labels
 */
.bank-detail-card__labels {
  height: 22px;
  padding: 0 18px;
  margin-top: 9px;
  margin-bottom: 14px;
}

/**
 * @element label
 */
.bank-detail-card__label {
  display: inline-block;
  height: 19px;
  padding-left: 22px;
  padding-right: 7px;
  margin-right: 12px;
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  color: #FFF;
  text-transform: uppercase;
  line-height: 19px;
  background-position: 7px center;
  background-repeat: no-repeat;
  border-radius: 10px;
  /**
   * @modifier type
   * @value default
   */
  /**
   * @modifier type
   * @value auto-pay
   */
}
.bank-detail-card__label_type_default {
  background-color: #43BC69;
  background-image: url("/assets/images/icons/tick.svg");
  background-size: 9px 8px;
}
.bank-detail-card__label_type_auto-pay {
  background-color: #8A6D9D;
  background-image: url("/assets/images/icons/auto-pay.svg");
  background-size: 10px 9px;
}

.billing-info__remove-account {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 9px 22px 14px 0;
}

.bank-detail-card__updated {
  font-size: 13px;
  color: #95989A;
  padding: 0 18px 20px;
}
.bank-detail-card__updated_margin-top-5 {
  margin-top: 5px;
}
.bank-detail-card__updated_padding-bottom-10 {
  padding-bottom: 10px;
}

/**
 * @block bank-detail-form
 */
.bank-detail-form {
  display: block;
}
.bank-detail-form_is-going-next {
  animation: bank-detail-form__next-bank-detail-animation 500ms ease-in-out;
}
.bank-detail-form_is-going-back {
  animation: bank-detail-form__previous-bank-detail-animation 500ms ease-in-out;
}

/**
 * 1. Side margin needs to match the grid cell is-form padding.
 *
 * @element content
 */
.bank-detail-form__content {
  margin: 0 5px; /* 1 */
}

.bank-detail-form__skip-notice {
  margin-bottom: 20px;
  font-size: 14px;
}

/**
 * @element last-updated
 */
.bank-detail-form__last-updated {
  color: #95989A;
  font-size: 13px;
  padding-bottom: 15px;
}

.bank-detail-form__required-field-notice {
  margin: 10px 0 5px;
}

/**
 * @element checkboxes
 */
.bank-detail-form__checkboxes {
  padding-top: 25px;
  font-size: 14px;
}

/**
 * @element checkbox
 */
.bank-detail-form__checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.bank-detail-form__checkbox:last-child {
  margin-bottom: 0;
}

/**
 * @element checkbox-tip
 */
.bank-detail-form__checkbox-tip {
  margin-left: 5px;
}

/**
 * @element checkbox-note
 */
.bank-detail-form__checkbox-note {
  padding-top: 10px;
  font-size: 13px;
  margin-left: 23px;
}

@keyframes bank-detail-form__next-bank-detail-animation {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }
  50% {
    opacity: 0;
    transform: translateX(-100%);
  }
  51% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes bank-detail-form__previous-bank-detail-animation {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }
  50% {
    opacity: 0;
    transform: translateX(100%);
  }
  51% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
/**
 * The benefit card info. Contains logo, carrier and plan.
 *
 * @block benefit-card-info
 */
.benefit-card-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #5C5050;
  font-size: 14px;
}
@media (min-width: 48em) {
  .benefit-card-info {
    font-size: 16px;
  }
}

.benefit-card-info__type {
  padding-bottom: 10px;
  box-sizing: border-box;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.benefit-card-info__type-icon {
  height: 11px;
  width: 11px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

.benefit-card-info__top {
  display: flex;
  flex-direction: column;
}
@media (max-width: 47.99em) {
  .benefit-card-info__top {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
  }
}

/**
 * @element logo
 */
.benefit-card-info__logo {
  width: 100px;
  margin-right: 17px;
  height: 50px;
  display: flex;
  align-items: center;
  order: 1;
}
.benefit-card-info__logo_flex-shrink_0 {
  flex-shrink: 0;
}
.benefit-card-info__logo_is-small {
  max-height: 40px;
  min-width: 100px;
  justify-content: flex-start;
}
.benefit-card-info__logo_is-small .benefit-card-info__img {
  width: auto;
  max-width: 100%;
}

/**
 * @element img
 */
.benefit-card-info__img {
  width: 100%;
  max-height: 100%;
}

/**
 * @element main
 */
.benefit-card-info__main {
  margin-bottom: 5px;
  font-weight: bold;
}

/**
 * @element content
 */
.benefit-card-info__content {
  order: 2;
}

/**
 * @element cost
 */
.benefit-card-info__cost {
  order: 3;
  text-align: right;
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.benefit-card-info__cost_is-inline-notification {
  text-align: left;
  margin-left: 10px;
  min-width: 190px;
}
@media (max-width: 47.99em) {
  .benefit-card-info__cost_is-inline-notification {
    min-width: 100%;
    justify-content: left;
    margin-left: 0;
    margin-bottom: 13px;
  }
}

.benefit-card-info__cost-content {
  display: flex;
}

.benefit-card-info__amount-container:last-child {
  margin-left: 20px;
}
@media (max-width: 47.99em) {
  .benefit-card-info__amount-container:last-child {
    margin-left: 15px;
  }
}

/**
 * @element cost-amount
 */
.benefit-card-info__cost-amount {
  font-size: 25px;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 5px;
}
.benefit-card-info__cost-amount_is-main-color {
  color: var(--main-color);
}
@media (max-width: 47.99em) {
  .benefit-card-info__cost-amount {
    font-size: 22px;
  }
}

/**
 * Orders the elements such that they fit well when the component
 * has a small width.
 *
 * @modifier is-always-compact
 */
.benefit-card-info_is-always-compact {
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.benefit-card-info_is-always-compact .benefit-card-info__logo {
  margin-right: 0;
}
.benefit-card-info_is-always-compact .benefit-card-info__main {
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
}
.benefit-card-info_is-always-compact .benefit-card-info__content {
  order: 3;
  min-width: 100%;
}
.benefit-card-info_is-always-compact .benefit-card-info__cost {
  order: 2;
}
.benefit-card-info_is-always-compact .benefit-card-info__plan {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
}

/**
 * @modifier is-compact
 */
@media (max-width: 47.99em) {
  .benefit-card-info_is-compact {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .benefit-card-info_is-compact .benefit-card-info__logo {
    margin-right: 0;
  }
  .benefit-card-info_is-compact .benefit-card-info__main {
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
  }
  .benefit-card-info_is-compact .benefit-card-info__content {
    order: 3;
    min-width: 100%;
  }
  .benefit-card-info_is-compact .benefit-card-info__cost {
    order: 2;
  }
  .benefit-card-info_is-compact .benefit-card-info__plan {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
  }
}

.new-benefit-card-info {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  color: #5C5050;
  font-size: 14px;
}
@media (min-width: 48em) {
  .new-benefit-card-info {
    font-size: 16px;
  }
}

.new-benefit-card-info__type {
  box-sizing: border-box;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.new-benefit-card-info__type-icon {
  height: 11px;
  width: 11px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

.new-benefit-card-info__top {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.new-benefit-card-info__logo {
  width: 100px;
  height: 50px;
  display: flex;
  align-items: center;
}
.new-benefit-card-info__logo_has-margin-right {
  margin-right: 17px;
}
.new-benefit-card-info__logo_height_35 {
  height: 35px;
}

.new-benefit-card-info__img {
  width: 100%;
  max-height: 100%;
}

.new-benefit-card-info__main {
  font-weight: bold;
  display: flex;
  align-items: center;
}

.new-benefit-card-info__edit-icon {
  width: 12px;
  height: 12px;
  margin-left: 7px;
  background: url("/assets/images/icons/pencil.svg") center no-repeat;
  background-size: 12px 12px;
  flex-shrink: 0;
}
.new-benefit-card-info__edit-icon:hover {
  cursor: pointer;
  width: 15px;
  height: 15px;
  background-size: 15px 15px;
}

.new-benefit-card-info__row-wrapper {
  display: flex;
  margin-top: 10px;
  align-items: center;
}
.new-benefit-card-info__row-wrapper_no-margin-top {
  margin-top: 0;
}

.new-benefit-card-info__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 14px;
  flex: 1;
}

/**
 * The ESS Benefit card. Can be collapsed or expanded as a modal.
 *
 * @block benefit-card
 */
.benefit-card {
  display: block;
}
.benefit-card_is-changed {
  background-color: #FFF4E8;
}

/**
 * The coverage type. Only visible in the collapsed state.
 *
 * @element type
 */
.benefit-card__type {
  padding-bottom: 10px;
  padding-top: 15px;
  box-sizing: border-box;
  font-weight: bold;
  display: flex;
  align-items: center;
}
@media (max-width: 47.99em) {
  .benefit-card__type {
    padding-left: 20px;
  }
}

/**
 * @element type-name
 */
.benefit-card__type-name {
  flex: 1;
}

/**
 * Used in the enrollment summary.
 *
 * @element type-waived
 */
.benefit-card__type-waived {
  color: var(--color-red);
}

/**
 * @element type-icon
 */
.benefit-card__type-icon {
  height: 11px;
  width: 11px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

/**
 * @element content
 */
.benefit-card__content {
  position: relative;
  background: #FFF;
  /**
   * @modifier borders
   * @value all
   */
  /**
   * @modifier borders
   * @value left
   * @for content
   */
  /**
   * @modifier has-star
   * @for content
   */
  /**
   * @modifier border-color
   * @value green
   * @for content
   */
  /**
   * @modifier border-color
   * @value blue
   * @for content
   */
  /**
   * @modifier border-color
   * @value purple
   * @for content
   */
  /**
   * @modifier border-color
   * @value orange
   * @for content
   */
  /**
   * @modifier border-color
   * @value aqua
   * @for content
   */
}
.benefit-card__content_is-changed {
  background-color: #FFF4E8;
}
.benefit-card__content_borders_all {
  border: solid 1px #C7D7D7;
}
.benefit-card__content_borders_left {
  border-left: solid 1px;
}
.benefit-card__content_has-star {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.benefit-card__content_border-color_green {
  border-color: #45A873;
}
.benefit-card__content_border-color_blue {
  border-color: #456FA8;
}
.benefit-card__content_border-color_purple {
  border-color: #8645A8;
}
.benefit-card__content_border-color_orange {
  border-color: #EBA217;
}
.benefit-card__content_border-color_aqua {
  border-color: #58BAC9;
}
.benefit-card__content_no-border-bottom {
  border-bottom: none;
}
@media (max-width: 47.99em) {
  .benefit-card__content_no-border-bottom-mobile {
    border-bottom: none;
  }
}

/**
 * @element close
 */
.benefit-card__close {
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 2;
}

/**
 * @element section
 */
.benefit-card__section {
  position: relative;
  padding: 20px 0;
  /**
   * @modifier is-disabled
   * @for section
   */
  /**
   * @modifier small-padding
   * @for section
   */
  /**
   * @modifier no-padding
   * @for section
   */
  /**
   * @modifier font
   * @value small
   * @for section
   */
}
.benefit-card__section_is-changed {
  background-color: #FFF4E8;
}
.benefit-card__section_is-disabled {
  pointer-events: none;
  opacity: 0.4;
}
.benefit-card__section:last-child {
  border-bottom: 0;
}
.benefit-card__section_small-padding {
  padding: 10px 0;
}
.benefit-card__section_no-padding {
  padding: 0;
}
.benefit-card__section_font_small {
  font-size: 13px;
}
@media (max-width: 47.99em) {
  .benefit-card__section {
    /**
     * @modifier no-mobile-padding-bottom
     * @for section
     */
  }
  .benefit-card__section_no-mobile-padding-bottom {
    padding-bottom: 0;
  }
}

/**
 * @element section-header
 */
.benefit-card__section-header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

/**
 * @element section-title
 */
.benefit-card__section-title {
  font-weight: bold;
  flex: 1;
}

/**
 * @element section-padding
 */
.benefit-card__section-padding {
  padding-left: 20px;
  padding-right: 20px;
  /**
   * @modifier is-flagged
   * @for section-padding
   */
  /**
   * @modifier font
   * @value small
   * @for section-padding
   */
}
.benefit-card__section-padding_is-flagged {
  border-left: solid 4px var(--color-red);
  padding-top: 15px;
  padding-bottom: 15px;
}
.benefit-card__section-padding_font_small {
  font-size: 13px;
}

.benefit-card__my-contribution {
  min-height: 40px;
  background-color: #EFF4F5;
  margin: 0 20px 10px 20px;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.benefit-card__add-contribution {
  display: flex;
  flex-direction: column;
  font-weight: 500;
}

/**
 * A line that separates sections from each other.
 *
 * @element separator
 */
.benefit-card__separator {
  margin-left: 20px;
  margin-right: 20px;
  border-bottom: solid 1px #C7D7D7;
}

/**
 * @element header
 */
.benefit-card__header {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /**
   * The header on the card acts as a block,
   * and this modifier acts as a block modifier.
   * since benefit-card__header is extracted into a separtate component.
   *
   * @modifier is-linked
   * @for header
   */
  /**
   * Ovverides the padding.
   *
   * @modifier is-always-compact
   * @for header
   */
  /**
   * @modifier height
   * @value thin
   */
  /**
   * @modifier height
   * @value free
   */
  /**
   * @modifier height
   * @value large
   */
}
@media (max-width: 47.99em) {
  .benefit-card__header {
    padding: 20px 0;
  }
}
@media (min-width: 48em) {
  .benefit-card__header {
    height: 84px;
    justify-content: center;
  }
}
@media (max-width: 47.99em) {
  .benefit-card__header_is-linked {
    padding: 0 0 20px;
  }
}
@media (min-width: 48em) {
  .benefit-card__header_is-linked {
    padding: 10px 0;
    height: auto;
  }
}
.benefit-card__header_is-always-compact {
  padding: 0;
}
@media (min-width: 48em) {
  .benefit-card__header_height_thin {
    height: 75px;
  }
}
.benefit-card__header_height_free {
  height: auto;
}
.benefit-card__header_height_large {
  height: 90px;
}
.benefit-card__header_padding-bottom_10 {
  padding-bottom: 10px;
}

/**
 * @element benefit-card__info
 */
.benefit-card__info {
  flex: 1;
}

/**
 * @element grid
 */
.benefit-card__grid {
  width: 100%;
  overflow: hidden;
}

/**
 * Such as volume or cdhp amount at the bottom of the card.
 *
 * @element special-amount
 */
.benefit-card__special-amount {
  display: flex;
  align-items: center;
}

/**
 * @element special-amount-number
 */
.benefit-card__special-amount-number {
  padding-left: 10px;
}

/**
 * @element extra-section
 */
.benefit-card__extra-section {
  padding: 0 20px;
}

/**
 * @element extra-section-title
 */
.benefit-card__extra-section-title {
  font-weight: bold;
  padding-bottom: 20px;
}

/**
 * @element extra-section-field
 */
.benefit-card__extra-section-field {
  padding: 10px 0;
}

/**
 * Used for "Add to cart" buttons in the ESS benefit form.
 *
 * @element footer
 */
.benefit-card__footer {
  display: flex;
  align-items: center;
  height: 55px;
}

/**
 * @element footer-left
 */
.benefit-card__footer-left {
  flex: 1;
}

/**
 * @element actions
 */
.benefit-card__actions {
  display: flex;
  align-items: center;
}

/**
 * @element action
 */
.benefit-card__action {
  margin-left: 20px;
}
.benefit-card__action_is-footer {
  flex: 1;
  height: 45px;
  margin-left: 0;
}

/**
 * @modifier is-expanded
 */
@media (max-width: 47.99em) {
  .benefit-card_is-expanded {
    height: 100%;
  }
}
.benefit-card_is-expanded .benefit-card__content {
  display: flex;
  flex-direction: column;
}
@media (max-width: 47.99em) {
  .benefit-card_is-expanded .benefit-card__content {
    height: 100%;
  }
}
.benefit-card_is-expanded .benefit-card__header {
  position: relative;
  padding-right: 30px;
}
.benefit-card_is-expanded .benefit-card__inner-content {
  overflow: auto;
  flex: 1;
}
@media (min-width: 48em) {
  .benefit-card_is-expanded .benefit-card__inner-content {
    max-height: calc(100vh - 84px);
  }
}

/**
 * Highlight red border when coverage is required.
 *
 * @modifier is-error
 */
.benefit-card_is-error .benefit-card__content {
  border-color: var(--color-red);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

/**
 * Used in the enrollment summary where benefit cards are grouped together.
 *
 * @modifier is-grouped
 */
.benefit-card_is-grouped {
  border-bottom: solid 1px #98B7B7;
}
.benefit-card_is-grouped:first-child {
  border-top: solid 1px #98B7B7;
}
.benefit-card_is-grouped:last-child {
  border-bottom: 0;
}
.benefit-card_is-grouped .benefit-card__type {
  padding-left: 20px;
  padding-right: 20px;
}
.benefit-card_is-grouped .benefit-card__content,
.benefit-card_is-grouped .benefit-card__content_has-borders {
  border: 0;
}

/**
 * Used in the enrollment summary.
 *
 * @modifier is-waived
 */
.benefit-card_is-waived .benefit-card__type {
  height: 65px;
}

/**
 * @element header-container
 */
.benefit-card__header-container {
  /**
   * @modifier is-disabled
   * @for is-disabled
   */
}
.benefit-card__header-container_is-disabled {
  pointer-events: none;
  opacity: 0.4;
}
.benefit-card__header-container_is-changed {
  background-color: #FFF4E8;
}

/**
 * @element header-section
 */
.benefit-card__header-section {
  display: flex;
  width: 100%;
}

/**
 * @element content-star
 */
.benefit-card__content-star {
  position: absolute;
  top: 0;
  left: 0;
}

/**
 * The cart in the ESS Benefit form.
 *
 * @block benefit-cart
 */
.benefit-cart {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * 1. One point higher than the `footer` element so the box shadow shows correctly.
 * 2. Needed by FF
 *
 * @element upper
 */
.benefit-cart__upper {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  min-height: 0; /* 2 */
  display: flex;
  flex-direction: column;
  background: #FFF;
  z-index: 2; /* 1 */
}

/**
 * @element upper-header
 */
.benefit-cart__upper-header {
  height: 40px;
  background: var(--main-color);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
}
.benefit-cart__upper-header:before {
  content: "";
  height: 100%;
  width: 15px;
  margin-right: 15px;
  background: url("/assets/images/icons/cart-left-white.svg") left center no-repeat;
}

/**
 * @element title
 */
.benefit-cart__title {
  flex: 1;
  color: white;
  font-weight: bold;
}

/**
 * @element remaining-amount
 */
.benefit-cart__remaining-amount {
  height: 40px;
  background: var(--main-color-light-33);
  padding: 0 20px;
  display: flex;
  align-items: center;
}

/**
 * @element remaining-amount-title
 */
.benefit-cart__remaining-amount-title {
  font-size: 14px;
  flex: 1;
}

/**
 * @element remaining-amount-value
 */
.benefit-cart__remaining-amount-value {
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
}

/**
 * 1. Needed for scroll animation calculation.
 *
 * @element content
 */
.benefit-cart__content {
  position: relative; /* 1 */
  flex: 1;
  overflow-y: auto;
  min-height: auto;
  /**
   * @modifier force-scroll
   * @for content
   */
}
.benefit-cart__content_force-scroll {
  overflow-y: scroll;
}

/**
 * @element empty
 */
.benefit-cart__empty {
  box-sizing: border-box;
  padding-top: 55px;
  padding-bottom: 15px;
  font-size: 14px;
  color: #B0A7A8;
  background: url("/assets/images/icons/coverage-types/medical-empty.svg") no-repeat;
  background-position: center 20px;
  background-size: 25px 25px;
  text-align: center;
  border: dashed 1px var(--main-color-light-34);
  /**
   * @modifier icon
   * @value waived
   */
}
.benefit-cart__empty_icon_waived {
  background-image: var(--svg-x-red);
  color: var(--color-red);
}
.benefit-cart__empty_icon_no-coverages {
  background-image: var(--svg-waived);
}

/**
 * @element benefits
 */
.benefit-cart__benefits {
  display: block;
}

/**
 * @element benefit-item
 */
.benefit-cart__benefit-item {
  border-bottom: solid 1px var(--main-color-light-29);
  position: relative;
  transition: box-shadow 200ms linear;
}
.benefit-cart__benefit-item:last-child {
  border-bottom: 0;
}
.benefit-cart__benefit-item:hover, .benefit-cart__benefit-item:focus {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.benefit-cart__benefit-item_is-error {
  border: solid 1px var(--color-red);
}

/**
 * 1. Since we're using `<a>` tag its default is inline.
 *
 * @element benefit-header-container
 */
.benefit-cart__benefit-header-container {
  display: block; /* 1 */
  cursor: pointer;
}

/**
 * @element benefit-header
 */
.benefit-cart__benefit-header {
  display: flex;
  align-items: center;
  padding: 20px 20px 0;
}

/**
 * @element benefit-type
 */
.benefit-cart__benefit-type {
  flex: 1;
  font-weight: bold;
  display: flex;
  align-items: center;
}

/**
 * @element benefit-type-icon
 */
.benefit-cart__benefit-type-icon {
  height: 10px;
  width: 10px;
  margin-right: 5px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/**
 * @element benefit-cost
 */
.benefit-cart__benefit-cost {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
}

/**
 * @element benefit-subheader
 */
.benefit-cart__benefit-subheader {
  font-weight: bold;
  padding: 10px 20px 10px;
}

.benefit-cart__carrier-name {
  padding: 0 20px 20px;
}

/**
 * @element benefit-list
 */
.benefit-cart__benefit-list {
  padding: 0 20px 10px;
}

/**
 * @element extra-amount
 */
.benefit-cart__extra-amount {
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 35px;
  font-size: 14px;
  /**
   * @modifier is-highlighted
   */
}
.benefit-cart__extra-amount_is-highlighted {
  background: var(--main-color-light-28);
}

/**
 * @element extra-amount-name
 */
.benefit-cart__extra-amount-name {
  flex: 1;
}

/**
 * @element extra-amount-value
 */
.benefit-cart__extra-amount-value {
  font-family: "Montserrat", sans-serif;
}

.benefit-cart_contribution-amount-warning {
  padding: 0 20px;
  margin-bottom: 20px;
}

/**
 * @element remove-benefit
 */
.benefit-cart__remove-benefit {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

/**
 * 1. One point lower than the `upper` element so that upper's
 * bottom box shadow would show.
 *
 * 2. Fixes tablet bug in landscape.
 *
 * @element footer
 */
.benefit-cart__footer {
  z-index: 1; /* 1 */
  flex-shrink: 0; /* 1 */
}

/**
 * @element cost
 */
.benefit-cart__costs {
  padding: 0 20px;
  background: #FFF;
}

/**
 * @element cost-item
 */
.benefit-cart__cost-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #B0A7A8;
  height: 30px;
}
.benefit-cart__cost-item:first-child {
  padding-top: 10px;
}
.benefit-cart__cost-item:last-child {
  padding-bottom: 10px;
}

.benefit-cart__cycle-cost-label-container {
  text-align: right;
}
.benefit-cart__cycle-cost-label-container:last-child {
  padding-bottom: 10px;
}

.benefit-cart__cycle-cost-label {
  text-transform: uppercase;
  font-size: 11px;
}

/**
 * @element cost-name
 */
.benefit-cart__cost-name {
  flex: 1;
}

/**
 * @element cost-amount
 */
.benefit-cart__cost-amount {
  font-family: "Montserrat", sans-serif;
}

.benefit-cart__subscriber-section {
  margin-top: 15px;
}
.benefit-cart__subscriber-section:first-child {
  margin-top: 0;
}

/**
 * @modifier is-total
 * @for cost-item
 */
.benefit-cart__cost-item_is-total {
  color: #5C5050;
}
.benefit-cart__cost-item_is-total .benefit-cart__cost-name {
  font-weight: bold;
}
.benefit-cart__cost-item_is-total .benefit-cart__cost-amount {
  font-size: 20px;
}

.benefit-costs {
  display: block;
}
@media (max-width: 47.99em) {
  .benefit-costs .benefit-costs__boxes {
    flex-wrap: wrap;
  }
  .benefit-costs .benefit-costs__box:nth-child(1):not(.benefit-costs__box_is-alone):not(.benefit-costs__box_is-employee-pay-cycle), .benefit-costs .benefit-costs__box:nth-child(2) {
    width: 50%;
    flex: none;
  }
  .benefit-costs .benefit-costs__box:nth-child(1):not(.benefit-costs__box_is-alone):not(.benefit-costs__box_is-employee-pay-cycle):not(.benefit-costs__box_no-border-bottom), .benefit-costs .benefit-costs__box:nth-child(2):not(.benefit-costs__box_no-border-bottom) {
    border-bottom: solid 1px var(--main-color-light-4);
  }
}
@media (min-width: 48em) {
  .benefit-costs .benefit-costs__box_is-employee-pay-cycle {
    flex: 2;
  }
}

.benefit-costs__header {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  align-items: center;
  background-color: #EBEBEB;
  border-top: solid 1px var(--main-color-light-4);
  font-weight: 600;
}

.benefit-costs__boxes {
  display: flex;
  border-top: solid 1px var(--main-color-light-4);
}
.benefit-costs__boxes_is-borderless {
  border: none;
}

.benefit-costs__box {
  flex: 1;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15px;
  height: 70px;
  background-color: #FFF;
}
.benefit-costs__box_is-changed {
  background-color: #FFF4E8;
}

.benefit-costs__label {
  height: 13px;
}

.benefit-costs__value {
  font-family: "Montserrat", sans-serif;
}

.benefit-costs__amount {
  font-size: 20px;
}

.benefit-costs__amount-label {
  font-size: 10px;
  margin-left: -3px;
  text-transform: uppercase;
}

.benefit-costs__label_visibility_hidden {
  visibility: hidden;
}

.benefit-costs__single-cost {
  text-align: right;
  flex: 1;
}

.benefit-costs__single-cost-amount {
  font-size: 25px;
  font-family: "Montserrat", sans-serif;
  color: var(--main-color-dark);
  margin-bottom: 5px;
}

.benefit-costs_is-standalone {
  border-right: solid 1px var(--main-color-light-4);
  border-left: solid 1px var(--main-color-light-4);
  border-bottom: solid 1px var(--main-color-light-4);
}

.benefit-costs_background_main-color .benefit-costs__box:not(.benefit-costs__box_is-changed) {
  background-color: var(--main-color-light-12);
}

.benefit-costs_labels_black .benefit-costs__box .benefit-costs__label > .label {
  color: #5C5050;
}

.benefit-costs_highlighted-you-pay .benefit-costs__box_is-employee-pay .benefit-costs__label > .label,
.benefit-costs_highlighted-you-pay .benefit-costs__box_is-employee-pay-cycle .benefit-costs__label > .label {
  color: var(--main-color);
}
.benefit-costs_highlighted-you-pay .benefit-costs__box_is-employee-pay .benefit-costs__value,
.benefit-costs_highlighted-you-pay .benefit-costs__box_is-employee-pay-cycle .benefit-costs__value {
  color: var(--main-color-dark);
}

@media (max-width: 78.115em) {
  .benefit-costs_is-details-page .benefit-costs__boxes {
    flex-wrap: wrap;
  }
  .benefit-costs_is-details-page .benefit-costs__box:nth-child(1):not(.benefit-costs__box_is-alone):not(.benefit-costs__box_is-employee-pay-cycle), .benefit-costs_is-details-page .benefit-costs__box:nth-child(2) {
    width: 50%;
    flex: none;
  }
  .benefit-costs_is-details-page .benefit-costs__box:nth-child(1):not(.benefit-costs__box_is-alone):not(.benefit-costs__box_is-employee-pay-cycle):not(.benefit-costs__box_no-border-bottom), .benefit-costs_is-details-page .benefit-costs__box:nth-child(2):not(.benefit-costs__box_no-border-bottom) {
    border-bottom: solid 1px var(--main-color-light-4);
  }
}
@media (min-width: 78.125em) {
  .benefit-costs_is-details-page .benefit-costs__box_is-employee-pay-cycle {
    flex: 2;
  }
}

.benefit-costs_is-in-workflow .benefit-costs__boxes {
  border-top: none;
}
.benefit-costs_is-in-workflow .benefit-costs__box:not(.benefit-costs__box_is-changed) {
  background-color: var(--main-color-light-12);
}
@media (min-width: 64em) {
  .benefit-costs_is-in-workflow {
    margin-bottom: 10px;
  }
}
@media (min-width: 64em) and (max-width: 92.1775em) {
  .benefit-costs_is-in-workflow .benefit-costs__boxes {
    flex-wrap: wrap;
  }
  .benefit-costs_is-in-workflow .benefit-costs__box:nth-child(1):not(.benefit-costs__box_is-alone):not(.benefit-costs__box_is-employee-pay-cycle), .benefit-costs_is-in-workflow .benefit-costs__box:nth-child(2) {
    width: 50%;
    flex: none;
  }
  .benefit-costs_is-in-workflow .benefit-costs__box:nth-child(1):not(.benefit-costs__box_is-alone):not(.benefit-costs__box_is-employee-pay-cycle):not(.benefit-costs__box_no-border-bottom), .benefit-costs_is-in-workflow .benefit-costs__box:nth-child(2):not(.benefit-costs__box_no-border-bottom) {
    border-bottom: solid 1px var(--main-color-light-4);
  }
}
@media (min-width: 64em) and (min-width: 92.1875em) {
  .benefit-costs_is-in-workflow .benefit-costs__box_is-employee-pay-cycle {
    flex: 2;
  }
}

.benefit-costs__disclaimer {
  font-style: italic;
  font-size: 14px;
}
.benefit-costs__disclaimer_margin-top_10 {
  margin-top: 10px;
}
.benefit-costs__disclaimer_background_main-color {
  background-color: var(--main-color-light-12);
}
.benefit-costs__disclaimer_padding-left_15 {
  padding-left: 15px;
}
.benefit-costs__disclaimer_padding-bottom_10 {
  padding-bottom: 10px;
}
.benefit-costs__disclaimer_is-changed {
  background-color: #FFF4E8;
}
@media (max-width: 47.99em) {
  .benefit-costs__disclaimer_padding-left-mobile_15 {
    padding-left: 15px;
  }
}

/**
 * 1. Avoid empty block scss error.
 *
 * @block benefit-dialog
 */
.benefit-dialog {
  display: block; /* 1 */
}

/**
 * 1. Side padding should be the same as grid field padding.
 *
 * @element header
 */
.benefit-dialog__header {
  padding: 0 5px; /* 1 */
}

/**
 * @element description
 */
.benefit-dialog__description {
  padding: 10px 0;
}

.benefit-dialog__reminder {
  margin-top: 10px;
  margin-bottom: 20px;
}

.benefit-dialog__section_min-height_200 {
  min-height: 200px;
}
.benefit-dialog__section_is-calculate-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  color: #1297AC;
  min-height: 220px;
}
.benefit-dialog__section_margin-bottom_20 {
  margin-bottom: 20px;
}
.benefit-dialog__section_margin-top_10 {
  margin-top: 10px;
}

/**
 * @block benefit-document
 */
.benefit-document {
  padding-left: 26px;
  margin-right: 10px;
  display: inline-block;
  color: #525252;
  font-size: 14px;
  line-height: 25px;
  cursor: pointer;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /**
   * @modifier type
   * @value video
   */
  /**
   * @modifier type
   * @value pdf
   */
  /**
   * @modifier type
   * @value website
   */
}
.benefit-document:hover {
  text-decoration: underline;
}
.benefit-document_type_video {
  background-size: 14px 11px;
  background-image: url("/assets/images/icons/video.svg");
}
.benefit-document_type_pdf {
  background-size: 11px 15px;
  background-image: url("/assets/images/icons/pdf.svg");
}
.benefit-document_type_website {
  background-size: 16px 14px;
  background-image: url("/assets/images/icons/mouse.svg");
}

/**
 * @block benefit-form
 */
.benefit-form {
  height: 100%;
  /**
  * @modifier is-flex
  * @for form
  */
}
.benefit-form_is-flex {
  display: flex;
  flex-direction: column;
}

/**
 * @element content
 */
.benefit-form__content {
  box-sizing: border-box;
  display: flex;
  height: 100%;
}
@media (min-width: 48em) {
  .benefit-form__content {
    padding-top: calc(60px + 15px);
  }
}
@media (max-width: 47.99em) {
  .benefit-form__content {
    padding-bottom: 55px;
    /**
    * @modifier has-mobile-checkbox
    */
  }
  .benefit-form__content_has-mobile-checkbox {
    padding-bottom: 110px;
  }
}
.benefit-form__content_min-height_0 {
  min-height: 0;
}
@media (max-width: 81.24em) {
  .benefit-form__content_padding-top-until-1300_0 {
    padding-top: 0;
  }
}
.benefit-form__content_padding-top_0 {
  padding-top: 0;
}

/**
 * @element left
 */
@media (max-width: 81.24em) {
  .benefit-form__left {
    display: none;
  }
}
@media (min-width: 81.25em) {
  .benefit-form__left {
    box-sizing: border-box;
    height: 100%;
    width: 270px;
    margin-left: 50px;
  }
}

/**
 * 1. On desktop small and tablet the center becomes the left side
 * so we need to align it with the left side of the wizard.
 *
 * 2. Don't let overflowed content stretch it.
 *
 * @element center
 */
.benefit-form__center {
  height: 100%;
  flex: 1;
  padding: 0 30px;
  min-width: 0; /* 2 */
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .benefit-form__center {
    padding-left: 50px; /* 1 */
  }
}
@media (max-width: 47.99em) {
  .benefit-form__center {
    padding: 0;
  }
}

/**
 * @element right
 */
.benefit-form__right {
  /**
  * If page overlaps with the contact support
  * we add padding bottom.
  *
  * @modifier is-overlapping-contact-support
  */
}
@media (max-width: 63.99em) {
  .benefit-form__right {
    display: none;
  }
}
@media (min-width: 64em) {
  .benefit-form__right {
    box-sizing: border-box;
    height: 100%;
    width: 390px;
    margin-right: 30px;
  }
}
@media (min-width: 64em) {
  .benefit-form__right_is-overlapping-contact-support {
    padding-bottom: 50px;
  }
}

.benefit-form__alert {
  margin: calc(60px + 20px) 30px 20px 50px;
}
@media (max-width: 47.99em) {
  .benefit-form__alert {
    margin: 5px 15px 15px 15px;
  }
}

/**
 * @element cart
 */
.benefit-form__cart {
  height: 100%;
}

/**
 * @element change-date
 */
.benefit-form__change-date {
  height: 60px;
}

/**
 * @element groups
 */
.benefit-form__groups {
  width: 100%;
  background: #FFF;
  height: calc(100% - 60px);
  overflow: auto;
}

.benefit-form__groups-options {
  height: 60px;
  padding: 0 22px;
  background-color: rgba(213, 127, 115, 0.1);
  font-weight: 600;
  font-size: 13px;
  transition: background-color 300ms ease;
}
.benefit-form__groups-options_is-checked {
  background-color: #D57F73;
}

/**
 * @element group-item
 */
.benefit-form__group-item {
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 85px;
  padding: 0 25px;
  transition: all 200ms linear;
  /**
   * @modifier is-disabled
   * @for group-item
   */
  /**
   * @modifier is-selected
   * @for group-item
   */
}
.benefit-form__group-item:not(.benefit-form__group-item_is-disabled):hover, .benefit-form__group-item:not(.benefit-form__group-item_is-disabled):focus {
  background-color: #EAEAEA;
}
.benefit-form__group-item:not(.benefit-form__group-item_is-disabled):hover .benefit-form__coverage-group-icon {
  transform: scale(1.1);
}
.benefit-form__group-item_is-disabled {
  cursor: default;
  opacity: 0.3;
}
.benefit-form__group-item_is-selected {
  background-color: var(--main-color-light-35);
}
.benefit-form__group-item_is-selected:after {
  content: "";
  width: 10px;
  height: 100%;
  background: url("/assets/images/icons/arrow-right.svg") right center no-repeat;
}

.benefit-form__group-item-options {
  height: 52px;
  background-color: #D57F73;
  font-weight: 600;
  font-size: 13px;
  padding: 0 25px;
}

/**
 * Acts as a block.
 *
 * @element coverage-group
 */
.benefit-form__coverage-group {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}

/**
 * @element coverage-group-icon
 */
.benefit-form__coverage-group-icon {
  width: 40px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 30px 100%;
  background-position: left center;
  transition: transform linear 200ms;
}

/**
 * @element coverage-group-content
 */
.benefit-form__coverage-group-content {
  flex: 1;
  padding-left: 5px;
}

/**
 * @element coverage-grou-name
 */
.benefit-form__coverage-group-name {
  font-weight: bold;
}

/**
 * @element coverage-group-note
 */
.benefit-form__coverage-group-note {
  font-size: 14px;
  display: flex;
  align-items: center;
  /**
   * @modifier icon
   * @value check
   * @for coverage-group-note
   */
  /**
   * @modifier icon
   * @value waived
   * @for coverage-group-note
   */
}
.benefit-form__coverage-group-note_icon_check:before {
  content: "";
  margin-right: 5px;
  width: 8px;
  height: 8px;
  background: var(--svg-check) left center no-repeat;
  background-size: 100% 100%;
}
.benefit-form__coverage-group-note_icon_waived:before {
  content: "";
  margin-right: 5px;
  width: 10px;
  height: 10px;
  background: var(--svg-x-red) left center no-repeat;
  background-size: 100% 100%;
}

/**
 * @element coverages
 */
.benefit-form__coverages {
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 64em) and (max-width: 81.24em) {
  .benefit-form__coverages {
    height: calc(100% - 60px);
  }
}

/**
 * @element coverages-header
 */
.benefit-form__coverages-header {
  height: 60px;
  display: flex;
  /**
   * @modifier dir
   * @value column
   */
  /**
   * @modifier is-tablet-large
   * @for coverages-header
   */
}
@media (min-width: 81.25em) {
  .benefit-form__coverages-header {
    overflow-x: auto;
  }
}
@media (max-width: 47.99em) {
  .benefit-form__coverages-header {
    padding: 0 15px;
  }
}
.benefit-form__coverages-header_justify_end {
  justify-content: flex-end;
}
@media (min-width: 81.25em) {
  .benefit-form__coverages-header_justify_end {
    overflow-x: visible;
  }
}
.benefit-form__coverages-header_dir_column {
  flex-direction: column;
}
@media (max-width: 63.99em) {
  .benefit-form__coverages-header_is-tablet-large {
    height: 80px;
  }
}

/**
 * 1. Needed by FF otherwise it will no longer be clickable.
 * 2. Align it to the far right to fit under the cart link.
 *
 * @element dependents-filter
 */
.benefit-form__dependents-filter {
  width: 40px; /* 1 */
  height: 40px; /* 1 */
}
@media (max-width: 63.99em) {
  .benefit-form__dependents-filter {
    margin-right: -12px; /* 2 */
    margin-top: 2px; /* 2 */
  }
}
.benefit-form__dependents-filter_with-label {
  width: 140px;
}

/**
 * @element dependents
 */
.benefit-form__dependents {
  display: flex;
}

/**
 * @element dependent-item
 */
.benefit-form__dependent-item {
  padding-right: 25px;
  font-size: 14px;
}

/**
 * @element waived
 */
.benefit-form__waived,
.benefit-form__no-coverages {
  height: 100%;
  display: flex;
  overflow: auto;
  align-items: center;
  text-align: center;
  animation: benefit-form--entry 400ms linear;
}

/**
 * @element waived-content
 */
.benefit-form__waived-content,
.benefit-form__no-coverages-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media (max-width: 81.24em) {
  .benefit-form__waived-content,
  .benefit-form__no-coverages-content {
    padding: 0 10px;
  }
}
@media (min-width: 81.25em) {
  .benefit-form__waived-content,
  .benefit-form__no-coverages-content {
    padding: 0 60px;
  }
}
@media (min-width: 64em) {
  .benefit-form__waived-content,
  .benefit-form__no-coverages-content {
    padding: 0 60px;
    transform: translateY(-80%);
  }
}
.benefit-form__waived-content::before,
.benefit-form__no-coverages-content::before {
  content: "";
  background-size: 100% 100%;
}
.benefit-form__waived-content.benefit-form__waived-content::before,
.benefit-form__no-coverages-content.benefit-form__waived-content::before {
  width: 55px;
  height: 55px;
  background: url("/assets/images/icons/waived-red.svg") top center no-repeat;
}
.benefit-form__waived-content.benefit-form__no-coverages-content::before,
.benefit-form__no-coverages-content.benefit-form__no-coverages-content::before {
  width: 38px;
  height: 38px;
  background: var(--svg-waived) top center no-repeat;
}

/**
 * @element waived-title
 */
.benefit-form__waived-title {
  font-size: 26px;
  font-weight: lighter;
  color: var(--color-red);
  padding: 20px 0;
}

.benefit-form__no-coverages-title {
  font-size: 25px;
  color: var(--main-color);
  padding: 25px 0 10px 0;
  font-weight: 400;
  text-transform: capitalize;
}

/**
 * @element waived-description
 */
.benefit-form__waived-description {
  font-size: 14px;
}

.benefit-form__no-coverages-description {
  color: #5E5E5E;
  line-height: 24px;
}

/**
 * @element coverage-list
 */
@media (min-width: 64em) {
  .benefit-form__coverage-list {
    flex: 1;
    overflow-y: scroll;
  }
}

/**
 * @element coverage-item
 */
.benefit-form__coverage-item {
  margin-bottom: 35px;
  animation: benefit-form--entry 400ms linear;
}
.benefit-form__coverage-item:last-child {
  margin-bottom: 0;
}

@keyframes benefit-form--entry {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/**
 * @element footer
 */
.benefit-form__footer {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  background: #FFF;
}

/**
 * @element footer-actions
 */
.benefit-form__footer-actions {
  width: 100%;
}

/**
 * 1. Top border like shadow to separate it from the content.
 *
 * @element footer-top
 */
.benefit-form__footer-top {
  height: 55px;
  display: flex;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -4px 8px -2px rgba(0, 0, 0, 0.1); /* 1 */
  width: 100%;
  background: var(--color-red);
  color: #FFF;
}

/**
 * @element footer-bottom
 */
.benefit-form__footer-bottom {
  display: flex;
  border-top: solid 1px var(--main-color-light-13);
}

/**
 * @elemenet footer-bottom-action
 */
.benefit-form__footer-bottom-action {
  flex: 1;
}

.benefit-form__header {
  height: 60px;
  display: flex;
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  background: #EAEAEA;
}

.benefit-form__header-right {
  box-sizing: border-box;
  height: 100%;
  width: 390px;
  margin-right: 30px;
}

@media (max-width: 81.24em) {
  .benefit-form__header-left {
    display: none;
  }
}
@media (min-width: 81.25em) {
  .benefit-form__header-left {
    box-sizing: border-box;
    height: 100%;
    width: 270px;
    margin-left: 50px;
    display: flex;
    align-items: center;
  }
}

.benefit-form__header-center {
  height: 100%;
  flex: 1;
  padding: 0 30px;
  min-width: 0;
  display: flex;
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .benefit-form__header-center {
    padding-left: 50px;
  }
}
@media (max-width: 47.99em) {
  .benefit-form__header-center {
    padding: 0;
  }
}

.benefit-form__header-content {
  height: 100%;
  display: flex;
  align-items: center;
}

.benefit-form__header-content-left {
  display: flex;
  flex: 1;
}

.benefit-form__header-content-right {
  display: flex;
  align-items: center;
}

.benefit-form__waive-coverage {
  font-size: 14px;
}

/**
 * @element intro
 */
.benefit-form__intro {
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
 * 1. Want it to be a bit above the vertical center.
 *
 * @element intro-content
 */
.benefit-form__intro-content {
  box-sizing: border-box;
  padding-top: 80px;
  background: var(--svg-heart) top center no-repeat;
  background-size: 55px 55px;
  text-align: center;
}
@media (max-width: 63.99em) {
  .benefit-form__intro-content {
    max-width: 400px;
  }
}
@media (min-width: 64em) {
  .benefit-form__intro-content {
    max-width: 600px;
  }
}
@media screen and (min-height: 600px) and (min-width: 1024px) {
  .benefit-form__intro-content {
    padding-top: 100px;
    transform: translateY(-50px); /* 1 */
  }
}

/**
 * @element intro-title
 */
.benefit-form__intro-title {
  font-size: 23px;
  font-weight: lighter;
  color: var(--main-color);
  padding-bottom: 15px;
}

/**
 * @element intro-description
 */
.benefit-form__intro-description {
  padding-bottom: 30px;
}

/**
 * @element coverages-header-right
 */
.benefit-form__coverages-header-right {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

/**
 * @element cart-link
 */
.benefit-form__cart-link {
  display: block;
  font-size: 13px;
  border-bottom: solid 1px #95989A;
  color: #95989A;
  cursor: pointer;
}
.benefit-form__cart-link:after {
  display: inline-block;
  content: "";
  background: url("/assets/images/icons/cart-grey.svg") left center no-repeat;
  width: 11px;
  height: 10px;
}
.benefit-form__cart-link:hover, .benefit-form__cart-link:focus {
  color: var(--main-color);
  border-bottom-color: var(--main-color);
}
.benefit-form__cart-link:hover:after, .benefit-form__cart-link:focus:after {
  background-image: var(--svg-cart);
}

/**
 * @element required-set-header
 */
.benefit-form__required-set-header {
  display: flex;
  height: 40px;
}
@media (max-width: 47.99em) {
  .benefit-form__required-set-header {
    padding: 0 15px;
  }
}

/**
 * @element required-set-title
 */
.benefit-form__required-set-title {
  margin-right: 10px;
  font-weight: 600;
}

/**
 * @element compare-button
 */
.benefit-form__compare-button {
  flex: 1;
  display: flex;
  margin-top: 10px;
  justify-content: flex-end;
  /**
   * @modifier next-to
   * @value filter
   */
}
.benefit-form__compare-button_next-to_filter {
  margin-left: 10px;
  margin-top: 0;
  flex: none;
}

/**
 * @element filter-compare-holder
 */
.benefit-form__filter-compare-holder {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

/**
 * @element coverage-group-holder
 */
.benefit-form__coverage-group-holder {
  height: 50px;
  flex: 1;
}

/**
 * Used in the ER workflow to list the benefits.
 *
 * @block benefit-list
 */
@media (min-width: 64em) {
  .benefit-list {
    width: 100%;
    overflow-y: scroll;
  }
}

/**
 * @element content
 */
.benefit-list__content {
  position: relative;
}

/**
 * 1. For the borders of the headers to overlap when the sticky header is pushing the previous header.
 */
.benefit-list__header {
  background: #EDF2F2;
  height: 35px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  border: solid 1px #C7D7D7;
  position: sticky;
  top: 0;
  z-index: 1;
  margin-bottom: -1px; /* 1 */
}

/**
 * @element header-icon
 */
.benefit-list__header-icon {
  width: 11px;
  height: 11px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

/**
 * @element header-title
 */
.benefit-list__header-title {
  padding-left: 5px;
  font-weight: bold;
}

/**
 * @element header-note
 */
.benefit-list__header-note {
  color: #B0A7A8;
  font-size: 13px;
  padding-left: 10px;
}

.benefit-list__section:last-child {
  border-bottom: solid 1px var(--color-light-blue);
}

/**
 * @element item
 */
.benefit-list__item {
  border: solid 1px var(--color-light-blue);
  border-top: 0;
}
.benefit-list__item:last-child {
  border-bottom: 0;
}

.benefit-rates {
  position: relative;
}

.benefit-rates__header {
  margin-top: 18px;
}

.benefit-rates__body {
  margin-top: 15px;
}

.benefit-rates__option {
  background: white;
  border: solid thin #C7D7D7;
  margin-bottom: 10px;
}
.benefit-rates__option:last-child {
  border-bottom: solid thin #C7D7D7;
}

.benefit-rates__remove-container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  box-sizing: border-box;
}
@media (max-width: 63.99em) {
  .benefit-rates__remove-container {
    padding-right: 15px;
    justify-content: flex-end;
  }
}

.benefit-rates__remove {
  width: 30px;
  height: 30px;
  background: var(--svg-x-red) center center no-repeat;
  background-size: 10px 10px;
  transition: all 0.3s ease;
}
.benefit-rates__remove:hover {
  transform: scale(1.2);
}

.benefit-rates__add-another {
  color: #1297AC;
  font-size: 16px;
  line-height: 28px;
  margin-top: 17px;
  font-weight: 600;
}
.benefit-rates__add-another:hover {
  text-decoration: underline;
}

.benefit-rates__empty-rates {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 25px 0;
  background: #FFF;
  margin: 15px 0 0 0;
  border: solid thin #C7D7D7;
}
.benefit-rates__empty-rates:before {
  content: "";
  display: block;
  margin-bottom: 13px;
  width: 14px;
  height: 21px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("/assets/images/icons/dollar-icon.svg");
}

.benefit-rates__empty-text {
  font-size: 18px;
  color: #1297AC;
}

.benefit-rates__empty-buttons {
  margin-top: 25px;
  display: flex;
}

.benefit-rates__empty-button_margin-right_10 {
  margin-right: 10px;
}

.benefit-row {
  display: block;
  background-color: #FFF;
  border-bottom: solid 1px var(--color-light-blue);
  padding-top: 16px;
}
.benefit-row:first-child {
  border-top: solid 1px var(--color-light-blue);
}
@media (min-width: 48em) {
  .benefit-row {
    padding-bottom: 20px;
  }
}
.benefit-row_has-footer {
  border-bottom: none;
}
@media (min-width: 48em) {
  .benefit-row_has-footer {
    padding-bottom: 0;
  }
}

.benefit-row__plan-name {
  font-weight: 600;
  margin-bottom: 5px;
}

.benefit-row__plan-info {
  font-size: 16px;
}

.benefit-row__plan-info-container {
  display: flex;
}

.benefit-row__type-icon {
  height: 11px;
  width: 11px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

.benefit-row__type {
  box-sizing: border-box;
  font-weight: bold;
  display: flex;
  align-items: center;
  flex: 1;
}

.benefit-row__type-status-container {
  padding-bottom: 7px;
  display: flex;
  align-items: center;
  height: 33px;
}

.benefit-row__bottom-border {
  height: 1px;
  background-color: var(--color-light-blue);
  position: absolute;
  bottom: 0;
}
.benefit-row__bottom-border_is-left {
  width: calc(100% + 20px);
}
.benefit-row__bottom-border_is-right {
  width: calc(100% - 20px);
  left: 0;
}
.benefit-row__bottom-border_is-last {
  display: none;
}

@media (max-width: 47.99em) {
  .benefit-row__date {
    padding-bottom: 10px;
  }
}
.benefit-row__date_color_red {
  color: var(--color-red);
}

.benefit-row__subscriber-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.benefit-row__empty-cost-container {
  display: flex;
  align-items: center;
}

.benefit-row__empty-cost-help-tip {
  margin-left: 3px;
}

.benefit-row__action {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

/**
 * The benefits section with left vertical text. Groups cards.
 *
 * @block benefits-section
 */
.benefits-section {
  display: flex;
  background-color: white;
  border-color: var(--main-color-light-29);
  border-width: thin;
  border-top-style: solid;
}
@media (min-width: 48em) {
  .benefits-section {
    border-left-style: solid;
    border-right-style: solid;
  }
}
.benefits-section:last-child {
  border-bottom-style: solid;
}

/**
 * Contains vetical text.
 *
 * @element left
 */
.benefits-section__left {
  position: relative;
  width: 36px;
  flex-shrink: 0;
  overflow: hidden;
  border-right: solid thin var(--main-color-light-29);
  /**
   * @modifier is-borderless
   */
}
@media (min-width: 48em) {
  .benefits-section__left {
    width: 50px;
  }
}
.benefits-section__left_is-borderless {
  border-right: none;
}

/**
 * @element rotate
 */
.benefits-section__rotate {
  float: left;
  text-align: center;
  transform-origin: 50% 50%;
  box-sizing: border-box;
  white-space: nowrap;
  font-family: "Montserrat", sans-serif;
  transform: translate(0, 100%) rotate(-90deg);
  /**
   * Get the height to equal the width. Solution Taken from:
   * http://kizu.ru/en/fun/rotated-text/.
   */
}
.benefits-section__rotate:before {
  float: left;
  content: "";
  margin-top: 100%;
}
@media (max-width: 47.99em) {
  .benefits-section__rotate {
    transform: translateX(-50%) translateX(18px) rotate(-90deg);
  }
}
@media (min-width: 48em) {
  .benefits-section__rotate {
    transform: translateX(-50%) translateX(25px) rotate(-90deg);
  }
}

/**
 * @element rotate-content
 */
.benefits-section__rotate-content {
  transform: translateY(-50%);
  margin-top: 50%;
}

/**
 * Vertical text inside section.
 *
 * @element name
 */
.benefits-section__name {
  color: var(--main-color);
  font-size: 13px;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0 10px;
}

/**
 * Used for example for showing (Required) next to coverage types.
 *
 * @element note
 */
.benefits-section__note {
  font-size: 12px;
  color: #B0A7A8;
  margin: 0 10px;
}

/**
 * Cards container inside the section.
 *
 * @element cards
 */
.benefits-section__cards {
  flex: 1;
}

/**
 * @block bill-preference-modal
 */
.bill-preference-modal {
  display: block;
}

/**
 * @element updated
 */
.bill-preference-modal__updated {
  color: #95989A;
  font-size: 13px;
}

/**
 * @element text
 */
.bill-preference-modal__text {
  margin-top: 20px;
  color: #5C5050;
  font-size: 16px;
  /**
   * @modifier size
   * @value small
   */
}
.bill-preference-modal__text_size_small {
  font-size: 13px;
}

/**
 * @element select-preference
 */
.bill-preference-modal__select-preference {
  margin-top: 30px;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  color: var(--main-color);
  text-transform: uppercase;
}

/**
 * @element terms-btn
 */
.bill-preference-modal__terms-btn {
  color: var(--main-color);
}
.bill-preference-modal__terms-btn:hover {
  color: var(--main-color-dark);
}
.bill-preference-modal__terms-btn:active {
  color: var(--main-color);
}

/**
 * @element radio
 */
.bill-preference-modal__radio {
  margin-top: 10px;
}

/**
 * @element radio-label
 */
.bill-preference-modal__radio-label {
  padding-left: 25px;
  color: #5C5050;
  font-size: 16px;
  background-position: left center;
  background-repeat: no-repeat;
  /**
   * @modifier type
   * @value paper
   */
  /**
   * @modifier type
   * @value electronic
   */
}
.bill-preference-modal__radio-label_type_paper {
  background-size: 11px 14px;
  background-image: url("/assets/images/icons/paper-red.svg");
}
.bill-preference-modal__radio-label_type_electronic {
  background-size: 15px 14px;
  background-image: var(--svg-go-green);
}

/**
 * @element checkbox
 */
.bill-preference-modal__checkbox {
  margin-top: 20px;
}

/**
 * @element checkbox-label
 */
.bill-preference-modal__checkbox-label {
  color: #5C5050;
  font-size: 16px;
}

/**
 * @block bill-preference
 */
.bill-preference {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 35px 15px 15px;
  border-top: solid thin var(--main-color-light-7);
  box-sizing: border-box;
}

/**
 * @element title
 */
.bill-preference__title {
  width: 190px;
  margin: 0 auto;
  font-size: 30px;
  font-family: "Montserrat", sans-serif;
  color: #5C5050;
  text-align: center;
}

/**
 * @element icon
 */
.bill-preference__icon {
  width: 100%;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 10px;
  /**
   * @modifier type
   * @value paper
   */
  /**
   * @modifier type
   * @value go-green
   */
}
.bill-preference__icon_type_paper {
  background-size: 30px 36px;
  background-image: url("/assets/images/icons/paper-red.svg");
}
.bill-preference__icon_type_go-green {
  background-size: 42px 36px;
  background-image: var(--svg-go-green);
}

/**
 * @element text
 */
.bill-preference__text {
  padding: 18px;
  font-size: 13px;
  color: var(--main-color-dark);
  background: #EFEFEF;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 30px;
  /**
   * @modifier is-loading
   */
}
.bill-preference__text_is-loading {
  height: 100px;
}

/**
 * @element btn
 */
.bill-preference__btn {
  margin-top: 15px;
  text-align: center;
}

/**
 * @element updated
 */
.bill-preference__updated {
  font-size: 13px;
  color: #95989A;
  text-align: center;
}

.bill-preference_icon-title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 30px;
}

/**
 * @block billing-info
 */
.billing-info {
  border-top: solid thin var(--main-color-light-7);
  /**
   * Used in loading states.
   *
   * @modifier no-border
   */
}
.billing-info_no-border {
  border: 0;
}

/**
 * @element empty
 */
.billing-info__empty {
  display: flex;
  min-height: 200px;
  padding: 30px 10px;
  box-sizing: border-box;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  /**
   * @modifier size
   * @value large
   */
}
.billing-info__empty_size_large {
  height: 390px;
  padding: 30px 100px;
}
@media (max-width: 31.24em) {
  .billing-info__empty_size_large {
    padding: 30px 50px;
  }
}

/**
 * @element empty-title
 */
.billing-info__empty-title {
  color: var(--main-color);
  font-size: 25px;
  font-weight: 300;
  text-align: center;
}
.billing-info__empty-title_size_large {
  font-size: 34px;
  margin-bottom: 20px;
}
@media (max-width: 31.24em) {
  .billing-info__empty-title_size_large {
    font-size: 26px;
  }
}
.billing-info__empty-title_margin-bottom_20 {
  margin-bottom: 20px;
}
.billing-info__empty-title_margin-bottom_5 {
  margin-bottom: 5;
}

/**
 * @element empty-text
 */
.billing-info__empty-text {
  color: #5C5050;
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
}

/**
 * @element empty-icon
 */
.billing-info__empty-icon {
  width: 55px;
  height: 45px;
  background: var(--svg-bank-details) center center no-repeat;
  background-size: 100% 100%;
  margin-bottom: 20px;
  /**
   * @modifier size
   * @value large
   */
}
.billing-info__empty-icon_size_large {
  width: 113px;
  height: 89px;
}
@media (max-width: 31.24em) {
  .billing-info__empty-icon_size_large {
    width: 90px;
    height: 71px;
  }
}

/**
 * @element auto-pay
 */
.billing-info__auto-pay {
  height: 170px;
  padding: 25px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.billing-info__auto-pay_height_auto {
  height: auto;
}

/**
 * @element auto-pay-icon
 */
.billing-info__auto-pay-icon {
  width: 24px;
  height: 22px;
  background: url("/assets/images/icons/auto-pay-purple.svg") center center no-repeat;
  background-size: 100% 100%;
}

/**
 * @element auto-pay-text
 */
.billing-info__auto-pay-text {
  margin: 16px 22px 20px;
  text-align: center;
  color: #5C5050;
  font-size: 16px;
}
.billing-info__auto-pay-text_margin-bottom_0 {
  margin-bottom: 0;
}

/**
 * @block billing-pay
 */
.billing-pay {
  display: block;
}

/**
 * @element content
 */
.billing-pay__content {
  margin: 0 5px;
}

.billing-pay__convenience-fee-notice {
  font-size: 14px;
  color: #5E5E5E;
  margin-bottom: 20px;
}

.billing-pay__save-new-account {
  padding: 20px 0 5px;
}

.billing-steps {
  display: block;
}

.billing-steps__checkmark {
  width: 16px;
  height: 16px;
  margin-right: 13px;
}

.billing-steps__checkmark-container {
  display: flex;
  padding-top: 13px;
}

.billing-steps__step-content {
  width: 100%;
  box-sizing: border-box;
}

.billing-steps__step {
  display: flex;
  margin-bottom: 10px;
  width: 100%;
}
.billing-steps__step:last-child {
  margin-bottom: 0;
}
.billing-steps__step_status_active .billing-steps__step-content {
  background-color: #F8F8F8;
  border-radius: 5px;
}
.billing-steps__step_status_active .billing-steps__checkmark {
  background-color: var(--main-color);
  border-radius: 50%;
}
.billing-steps__step_status_incomplete .billing-steps__checkmark {
  background-color: #E4E4E4;
  border-radius: 50%;
}
.billing-steps__step_status_incomplete .billing-steps__step-content {
  border: solid 1px #EFEFEF;
  border-radius: 5px;
}
.billing-steps__step_status_incomplete:hover .billing-steps__step-content {
  cursor: pointer;
  background-color: #F8F8F8;
}
.billing-steps__step_status_complete {
  font-weight: 600;
  color: var(--main-color);
}
.billing-steps__step_status_complete .billing-steps__checkmark {
  background-image: var(--svg-round-check);
}

.billing-steps__step-title {
  font-weight: 600;
}

.billing-steps__step-content {
  padding: 10px 14px;
}

.billing-steps__upper-content-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-steps__description {
  margin-top: 10px;
  font-size: 14px;
}

@media (max-width: 63.99em) {
  .billing-steps__action-button {
    display: none;
  }
}
@media (max-width: 81.24em) {
  .billing-steps__action-button_visible-from_desktop-plus {
    display: none;
  }
}

.billing-steps__sticky-action-button {
  width: 100%;
}
@media (min-width: 81.25em) {
  .billing-steps__sticky-action-button {
    display: none;
  }
}
@media (min-width: 64em) {
  .billing-steps__sticky-action-button_hidden-from_desktop {
    display: none;
  }
}

.billing-steps__content-container {
  width: 100%;
}

/**
 * Element containing the billing summary in the billing section.
 *
 * @block billing-summary
 */
.billing-summary {
  display: flex;
  justify-content: space-between;
  padding: 18px;
  flex-wrap: wrap;
  position: relative;
}

/**
 * @element left
 */
.billing-summary__left {
  width: 100%;
}
@media (max-width: 47.99em) {
  .billing-summary__left {
    order: 2;
  }
}
@media (min-width: 48em) {
  .billing-summary__left {
    width: 60%;
  }
}

/**
 * @element right
 */
.billing-summary__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
@media (max-width: 47.99em) {
  .billing-summary__right {
    order: 1;
    padding: 30px 0 40px;
  }
}
@media (min-width: 48em) {
  .billing-summary__right {
    width: 40%;
  }
}

/**
 * @element section-title
 */
.billing-summary__section-title {
  display: flex;
  align-items: center;
  color: #5C5050;
  font-weight: bold;
  font-size: 16px;
}

.billing-summary__section-links {
  display: flex;
  align-items: flex-start;
}
@media (max-width: 81.24em) {
  .billing-summary__section-links {
    flex-direction: column;
    align-items: flex-end;
  }
}

/**
 * @element section-pdf
 */
.billing-summary__section-pdf {
  display: flex;
  align-items: flex-start;
  color: var(--main-color);
  font-size: 13px;
  font-weight: normal;
}
@media (min-width: 81.25em) {
  .billing-summary__section-pdf {
    margin-top: 7px;
  }
}
.billing-summary__section-pdf:hover {
  color: var(--main-color-dark);
  text-decoration: underline;
}
.billing-summary__section-pdf:active {
  color: var(--main-color);
}

/**
 * @element section-pdf-icon
 */
.billing-summary__section-pdf-icon {
  display: block;
  width: 8px;
  height: 10px;
  background: var(--svg-pdf) center center no-repeat;
  background-size: 100% 100%;
  margin-right: 3px;
}

/**
 * @element section-excel
 */
.billing-summary__section-excel {
  margin-top: 7px;
}
@media (min-width: 81.25em) {
  .billing-summary__section-excel {
    margin-left: 20px;
  }
}

/**
 * @element section
 */
.billing-summary__section {
  margin-bottom: 10px;
  border: solid thin #EFEFEF;
  background-color: #F8F8F8;
  border-radius: 5px;
}

/**
 * @element section-header
 */
.billing-summary__section-header {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  height: 45px;
}

/**
 * @element section-header-left
 */
.billing-summary__section-header-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.billing-summary__section-header-left_is-loading {
  justify-content: center;
}

.billing-summary__section-bill-type {
  margin-left: 10px;
}

/**
 * @element section-date
 */
.billing-summary__section-date {
  display: flex;
  align-items: center;
}

/**
 * @element row
 */
.billing-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  margin: 0 12px;
  /**
   * @modifier is-bordered
   */
}
.billing-summary__row_is-bordered {
  border-bottom: solid thin var(--main-color-light-13);
}
.billing-summary__row:last-child {
  border-bottom: 0;
}
.billing-summary__row_margin-top_20 {
  margin-top: 20px;
}

/**
 * @element row-label
 */
.billing-summary__row-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 160px;
  color: #9B9B9B;
  font-size: 10px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
}

/**
 * @element row-value
 */
.billing-summary__row-value {
  color: #5C5050;
  font-size: 16px;
  /**
   * @modifier is-bold
   */
  /**
   * @modifier is-negative
   */
}
.billing-summary__row-value_is-bold {
  font-weight: bold;
}
.billing-summary__row-value_is-negative {
  color: #D57F73;
}

/**
 * @element loading-block
 */
.billing-summary__loading-block {
  display: inline-block;
  width: 90px;
  height: 12px;
  border-radius: 5px;
  background-color: #E4E4E4;
  /**
   * @modifier width
   * @value small
   */
  /**
   * @modifier width
   * @value large
   */
  /**
   * @modifier height
   * @value large
   */
  /**
   * @modifier height
   * @value extra-large
   */
}
.billing-summary__loading-block_color_blue {
  background-color: var(--main-color-light-30);
}
.billing-summary__loading-block_color_red {
  background-color: #F4DCD9;
}
.billing-summary__loading-block_margin-top_5 {
  margin-top: 5px;
}
.billing-summary__loading-block_width_small {
  width: 60px;
}
.billing-summary__loading-block_width_large {
  width: 105px;
}
.billing-summary__loading-block_width_extra-large {
  width: 170px;
}
.billing-summary__loading-block_height_large {
  height: 18px;
  border-radius: 9px;
}
.billing-summary__loading-block_height_extra-large {
  height: 34px;
  border-radius: 17px;
}

/**
 * @element undue-bills
 */
.billing-summary__undue-bills {
  padding: 0 20px;
  text-align: center;
  color: var(--main-color);
  font-weight: lighter;
  font-size: 25px;
}

/**
 * @element empty
 */
.billing-summary__empty {
  max-width: 425px;
  margin: 90px auto 80px;
}

/**
 * @element empty-logo
 */
.billing-summary__empty-logo {
  margin: 0 auto 20px;
  width: 45px;
  height: 50px;
  background: var(--svg-empty-bills) center center no-repeat;
  background-size: 100% 100%;
}

/**
 * @element empty-title
 */
.billing-summary__empty-title {
  margin-bottom: 10px;
  text-align: center;
  font-size: 34px;
  font-weight: 300;
  color: var(--main-color);
}

/**
 * @element empty-description
 */
.billing-summary__empty-description {
  text-align: center;
  font-size: 16px;
  color: #5C5050;
}

/**
 * @element help-tip
 */
.billing-summary__help-tip {
  margin-left: 10px;
}

/**
 * @element row-separator
 */
.billing-summary__row-separator {
  width: 100%;
  height: 1px;
  background-color: var(--main-color-light-29);
}

.billing-summary__balance {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.billing-summary__balance_flex_none {
  flex: none;
}

/**
 * @element balance-title
 */
.billing-summary__balance-title {
  margin-bottom: 14px;
  font-family: "Montserrat", sans-serif;
  color: #9B9B9B;
  font-size: 10px;
  text-transform: uppercase;
}

/**
 * 1. It just doesn't fit on variations of these breakpoints.
 *
 * @element balance-amount
 */
.billing-summary__balance-amount {
  margin-bottom: 8px;
  font-family: "Montserrat", sans-serif;
  color: #4A4A4A;
  font-size: 40px;
  text-transform: uppercase;
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .billing-summary__balance-amount {
    font-size: 30px; /* 1 */
  }
}

/**
 * @element balance-due
 */
.billing-summary__balance-due {
  margin-bottom: 18px;
  font-size: 13px;
  color: #D57F73;
}

/**
 * @element balance-btn
 */
.billing-summary__balance-btn {
  margin-bottom: 15px;
}
@media (min-width: 48em) {
  .billing-summary__balance-btn {
    margin-bottom: 20px;
  }
}

/**
 * @element pay-current-balance
 */
.billing-summary__pay-current-balance {
  font-size: 13px;
  color: #B0A7A8;
  cursor: pointer;
}
.billing-summary__pay-current-balance:hover {
  color: var(--main-color-dark);
}
.billing-summary__pay-current-balance:active {
  color: var(--main-color);
}

.billing-summary__history-button {
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (max-width: 47.99em) {
  .billing-summary__history-button {
    order: 3;
    margin: 30px 0 12px;
  }
}
.billing-summary__history-button_margin-top_30 {
  margin-top: 30px;
}

.billing-summary__view-amounts-trigger {
  text-decoration: underline;
  color: var(--main-color);
  font-size: 14px;
}
.billing-summary__view-amounts-trigger:hover {
  color: var(--main-color-dark);
}

.billing-summary__helptip-icon {
  height: 10px;
  width: 17px;
  background: var(--svg-eye-2) center center no-repeat;
  background-size: 17px 10px;
  cursor: pointer;
}

.billing-summary__amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 48em) {
  .billing-summary__amounts {
    max-height: 250px;
    overflow-y: auto;
  }
}

.billing-summary__amount {
  margin-bottom: 15px;
}

.billing-summary__amount-month {
  font-size: 10px;
  color: #9B9B9B;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.billing-summary__amount-value {
  font-size: 16px;
  color: #494949;
}

@media (max-width: 63.99em) {
  .billing-summary_is-narrowed .billing-summary__left {
    order: 2;
    width: 100%;
  }
}
@media (max-width: 63.99em) {
  .billing-summary_is-narrowed .billing-summary__right {
    order: 1;
    padding: 30px 0 40px;
    width: 100%;
  }
}
@media (min-width: 48em) {
  .billing-summary_is-narrowed .billing-summary__balance-amount {
    font-size: 40px;
  }
}
@media (max-width: 63.99em) {
  .billing-summary_is-narrowed .billing-summary__balance-btn {
    margin-bottom: 15px;
  }
}
@media (max-width: 63.99em) {
  .billing-summary_is-narrowed .billing-summary__history-button {
    order: 3;
    margin: 30px 0 12px;
  }
}

.blocked-icon {
  height: 22px;
  width: 22px;
  background: url("/assets/images/icons/x-red-circle-empty.svg") center center no-repeat;
  background-size: 22px 22px;
  cursor: pointer;
}
.blocked-icon:hover {
  opacity: 0.7;
}

.boolean-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/**
 * Used as a container for the dashboard boxes. 1 column on mobile and tablet, 2
 * columns onwards.
 *
 * @block box-holder
 */
.box-holder {
  display: flex;
}
@media (max-width: 47.99em) {
  .box-holder {
    align-items: center;
  }
}
@media (min-width: 48em) {
  .box-holder {
    justify-content: space-between;
  }
}

/**
 * 1. Fill container on mobile.
 * 2. Shrink the column even when the content is larger than the width. See spec
 *    here: https://www.w3.org/TR/css-flexbox-1/#min-size-auto
 * 3. Split into equal sized columns from tablet on.
 *
 * @element column
 */
.box-holder__column {
  flex-shrink: 0;
  width: 100%; /* [1] */
  min-width: 0; /* [2] */
}
@media (min-width: 48em) {
  .box-holder__column {
    flex: 1; /* [3] */
    /**
     * @modifier is-double
     */
  }
  .box-holder__column:nth-child(1) {
    padding-right: 17px;
  }
  .box-holder__column:nth-child(2) {
    padding-left: 17px;
  }
  .box-holder__column_is-double {
    flex: 2;
  }
}

/**
 * Box used in the dashboard.
 *
 * @block box
 */
.box {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-bottom: 22px;
  position: relative;
  max-height: 100%;
  background-color: #FFF;
  border: solid 0.5px var(--main-color-light-4);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: all 0.2s ease;
}
.box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.box_is-not-hoverable {
  box-shadow: none;
  transition: none;
}
.box_is-not-hoverable:hover {
  transform: none;
  box-shadow: none;
}

/**
 * ex: View activities page footer.
 *
 * @element footer
 */
.box__footer {
  height: 46px;
  background-color: #FFF;
  /**
   * @modifier has-border
   * @for footer
   */
}
.box__footer_has-border {
  border-top: solid 1px var(--main-color-light-7);
}
.box__footer:hover:not(.box__footer_is-loading) {
  background-color: #EFEFEF;
}

.box__footer-link {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  color: var(--main-color);
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
}

/**
 * @element header
 */
.box__header {
  height: 50px;
  padding-left: 13px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /**
   * @modifier is-large
   */
  /**
   * @modifier type
   * @value enrollment
   * @for header
   */
  /**
   * Adds billing icon to the header.
   *
   * @modifier type
   * @value billing
   * @for header
   */
  /**
   * Adds activity icon to the header.
   *
   * @modifier type
   * @value activity
   * @for header
   */
  /**
   * @modifier type
   * @value reports
   */
  /**
   * Adds alerts icon to the header.
   *
   * @modifier type
   * @value alerts
   */
  /**
   * Adds invites icon to the header.
   *
   * @modifier type
   * @value invites
   * @for header
   */
  /**
   * @for header
   */
  /**
   * @modifier type
   * @value resources
   */
  /**
   * @modifiers type
   * @value asu
   * @for header
   */
  /**
   * @modifiers type
   * @value calculator
   */
  /**
   * @modifiers type
   * @value contributions
   * @for header
   */
  /**
   * @modifiers type
   * @value employee-account
   * @for header
   */
  /**
   * @modifier has-border
   */
  /**
   * Used to hide the header icon.
   *
   * @modifier is-mask
   * @for header
   */
  /**
   * @modifier has-no-border
   * @for header
   */
}
.box__header::before {
  content: "";
  margin-right: 7px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
}
.box__header_is-large {
  height: 70px;
}
.box__header_type_enrollment::before {
  background-image: var(--svg-folder);
  width: 11px;
  height: 9px;
}
.box__header_type_billing::before {
  background-image: var(--svg-billing);
  width: 11px;
  height: 7px;
}
.box__header_type_activity {
  border-bottom: solid 1px var(--main-color-light-7);
}
.box__header_type_activity::before {
  background-image: var(--svg-waves);
  width: 9px;
  height: 9px;
}
.box__header_type_reports {
  height: 45px;
}
.box__header_type_reports::before {
  background-image: var(--svg-reports-queue);
  width: 10px;
  height: 9px;
}
.box__header_type_alerts {
  height: 45px;
}
.box__header_type_alerts:before {
  content: "";
  display: inline-block;
  background: var(--svg-alerts) center center no-repeat;
  background-size: 100% 100%;
  width: 10px;
  height: 11px;
  margin-right: 7px;
}
.box__header_type_invites::before {
  background-image: var(--svg-self-service);
  width: 11px;
  height: 15px;
}
.box__header_type_warning::before {
  background-image: var(--svg-field-error);
  width: 12px;
  height: 12px;
}
.box__header_type_resources {
  border-bottom: solid 1px var(--main-color-light-7);
}
.box__header_type_resources::before {
  background-image: var(--svg-contact);
  width: 16.5px;
  height: 18px;
}
.box__header_type_asu {
  height: 100%;
  min-height: 40px;
  padding: 10px 15px;
}
.box__header_type_asu::before {
  content: "";
  margin-right: 0;
}
.box__header_type_calculator {
  border-bottom: solid 1px var(--main-color-light-7);
  padding-right: 10px;
}
.box__header_type_calculator::before {
  background-image: var(--svg-calculator);
  width: 10px;
  height: 13px;
}
.box__header_type_contributions {
  border-bottom: solid 1px var(--main-color-light-7);
  display: flex;
  align-items: center;
  gap: 7px;
}
.box__header_type_contributions::before {
  display: none;
}
.box__header_type_employee-account {
  border-bottom: solid 1px var(--main-color-light-7);
  display: flex;
  align-items: center;
  gap: 7px;
}
.box__header_type_employee-account::before {
  display: none;
}
.box__header_has-border {
  border-bottom: solid 1px var(--main-color-light-7);
}
.box__header_is-mask {
  padding-left: 28px;
}
.box__header_is-mask::before {
  display: none;
}
.box__header_is-mask.box__header_type_asu, .box__header_is-mask.box__header_type_contributions, .box__header_is-mask.box__header_type_reports, .box__header_is-mask.box__header_type_billing, .box__header_is-mask.box__header_type_alerts {
  padding-left: 13px;
}
.box__header_is-mask.box__header_type_contributions {
  border: none;
}
.box__header_has-no-border {
  border: 0;
}

/**
 * @element header-leading-icon
 */
.box__header-leading-icon {
  color: var(--main-color);
  width: 15px;
  height: 9px;
}

/**
 * @element title
 */
.box__title {
  font-weight: bold;
  font-size: 16px;
  color: var(--main-color);
  /**
   * @modifier is-loading
   */
  /**
   * @modifier color
   * @value dark
   */
  /**
   * @for title
   */
  /**
   * @modifier is-link
   * @for title
   */
  /**
   * @modifier is-mobile-small
   * @for title
   */
}
.box__title_is-loading {
  width: 167px;
  height: 18px;
  border-radius: 9px;
  background-color: #EFF4F5;
}
.box__title_color_dark {
  color: #5C5050;
}
.box__title_color_red {
  color: var(--color-red);
}
.box__title_is-link:hover {
  text-decoration: underline;
  color: var(--main-color-dark);
}
.box__title_is-link:active {
  color: var(--main-color);
}
@media (max-width: 47.99em) {
  .box__title_is-mobile-small {
    font-size: 14px;
  }
}
.box__title_type_asu::before {
  content: "";
  margin-right: 7px;
  display: inline-block;
  background: var(--svg-clock) center no-repeat;
  width: 13px;
  height: 13px;
}

.box__title-description {
  font-size: 13px;
  color: #95989A;
}

.box__header-navigation {
  height: 40px;
  display: flex;
  align-items: center;
}

.box__optional-title {
  color: #B0A7A8;
  font-weight: normal;
}

/**
 * @element header-left
 */
.box__header-left {
  flex: 1;
}

/**
 * Clickable header action.
 *
 * @element action
 */
.box__action {
  height: 100%;
  width: 50px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  /**
   * @modifier type
   * @value refresh
   */
  /**
   * @modifier type
   * @value print
   */
  /**
   * @modifier align
   * @value right
   */
  /**
   * @modifier is-absolute
   */
}
.box__action_type_refresh {
  color: #5C5050;
}
.box__action_type_refresh:hover {
  color: var(--main-color);
}
.box__action_type_print {
  background-size: 18px 16px;
  background-image: var(--svg-print);
}
.box__action_type_print.box__action_is-disabled {
  background-image: url("/assets/images/icons/print-light-grey.svg");
  cursor: default;
}
.box__action_align_right {
  width: 40px;
  padding-right: 4px;
  justify-content: flex-end;
  background-position: 90% center;
}
.box__action_is-absolute {
  position: absolute;
  height: 50px;
  top: 0;
  right: 0;
}

.box__action-icon {
  width: 10px;
  height: 10px;
}

/**
 * @block arrow
 */
.box__arrow {
  width: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  color: #5C5050;
  /**
   * @modifier type
   * @value next
   */
  /**
   * @modifier type
   * @value back
   */
}
.box__arrow:disabled {
  opacity: 0.5;
  cursor: default;
}
.box__arrow:hover:not(:disabled) {
  color: var(--main-color);
}
.box__arrow_type_next {
  padding-left: 5px;
}
.box__arrow_type_back {
  padding-right: 5px;
  justify-content: end;
}

.box__arrow-icon {
  width: 8px;
  height: 12px;
}

.box__content_padding_15 {
  padding: 15px;
}

.box__description {
  font-size: 14px;
  margin-bottom: 15px;
}
.box__description_type_billing {
  margin-bottom: 0;
  padding: 0 13px 8px;
  color: #B0A7A8;
  font-size: 13px;
  border-bottom: solid 1px var(--main-color-light-7);
}
.box__description_is-loading {
  height: 17px;
}

.broker-card {
  display: block;
}

.broker-card__header {
  height: 50px;
  display: flex;
  align-items: center;
}

.broker-card__name {
  font-size: 16px;
  font-weight: bold;
  flex: 1;
}

.broker-option {
  display: flex;
  align-items: center;
}

.broker-option__current-user-icon {
  width: 19px;
  height: 19px;
  margin-right: 5px;
  background-image: url("/assets/images/themes/blue/icons/user.svg");
}

.broker-option__broker-name {
  margin-right: 5px;
}

.broker-info {
  display: block;
}

.broker-info__section {
  margin-bottom: 30px;
}

/**
 * The burger icon that opens the left nav.
 *
 * 1. We add text to the button for accessibility.
 *
 * @block burger-menu
 */
.burger-menu {
  display: block;
  height: 100%;
  width: 34px;
  background: url("/assets/images/icons/burger.svg") center left no-repeat;
  background-size: 19px 14px;
  font-size: 0; /* 1 */
  transition: opacity 300ms ease;
}
.burger-menu:hover {
  opacity: 0.7;
}
.burger-menu:active {
  opacity: 0.4;
}
.burger-menu_height_25 {
  height: 25px;
}

/**
 * Use a `<button>` tag.
 *
 * 2. Can't use flexbox to center because of Safari.
 * 3. For <a> tags
 *
 * @block button
 */
.button {
  display: inline-block;
  /* 3 */
  text-decoration: none;
  line-height: 45px; /* 2 */
  text-align: center; /* 2 */
  height: 45px;
  width: 100%;
  background-color: var(--main-color);
  border-radius: 28px;
  box-sizing: border-box;
  color: #FFF;
  box-shadow: 0 0 0 transparent;
  outline: none;
  transition: all 200ms ease;
  font-size: 14px;
  font-weight: bold;
  /**
   * @modifier is-terminate
   */
  /**
   * @modifier is-terminate-inverted
   */
  /**
   * Inverts the colors: white background with green text and border
   *
   * @modifier is-inverted
   */
  /**
   * 1. For the element to retain the same animation properties of the last keyframe after the animation completes.
   */
  /**
   * 1. For the element to retain the same animation properties of the last keyframe after the animation completes.
   */
  /**
   * @modifier type
   * @value cancel
   */
  /**
   * @modifier type
   * @value pending
   */
  /**
   * @modifier type
   * @value cancel-inverted
   */
  /**
   * 1. Disables hover/focus/active and javascript events.
   *
   * @modifier is-disabled
   */
  /**
   * @modifier is-grey-disabled
   */
  /**
   * Makes the buttons squares on mobile.
   *
   * @modifier mobile-square
   */
  /**
   * A button that's square even on tablet & desktop. Example the "Send"
   * button in the contact form.
   *
   * @modifier is-square
   */
  /**
   * @modifier small-screen-lesspad
   */
  /**
   * @modifier type
   * @value transparent
   */
  /**
   * @modifier height
   * @value small
   */
  /**
   * A button whose text looks like a label's text.
   *
   * @modifier is-labelish
   */
  /**
   * @modifier font-size
   * @value small
   */
  /**
   * Add button. Prefixed with a plus sign.
   *
   * @modifier action
   * @value add
   */
  /**
   * @modifier action
   * @value mobile-add
   */
  /**
   * `Go Green` action. Prefixed with a leaf icon.
   *
   * @modifier action
   * @value go-green
   */
  /**
   * Purple button
   *
   * @modifier action
   * @value manage
   */
  /**
   * Red small clear filters button
   *
   * @modifier action
   * @value clear-filters
   */
  /**
   * Button with paper plane icon.
   *
   * @modifier action
   * @value send
   */
  /**
   * On mobile breakpoint the button becomes a circle with the icon
   * in the middle. No text.
   */
  /**
   * @modifier is-borderless
   */
  /**
   * @modifier hidden
   */
  /**
   * @modifier is-relative
   * @for button
   */
}
.button .text-transform_uppercase {
  text-transform: uppercase;
}
.button:not(.button_is-disabled).button:not(.button_is-disabled-but-clickable):focus, .button:not(.button_is-disabled).button:not(.button_is-disabled-but-clickable):hover {
  background-color: var(--main-color-dark);
}
.button:not(.button_is-disabled).button:not(.button_is-disabled-but-clickable):active {
  background-color: var(--main-color);
}
.button_is-terminate {
  background-color: #D57F73;
}
.button_is-terminate:not(.button_is-disabled).button_is-terminate:not(.button_is-disabled-but-clickable):focus, .button_is-terminate:not(.button_is-disabled).button_is-terminate:not(.button_is-disabled-but-clickable):hover {
  background-color: #A84F43;
}
.button_is-terminate:not(.button_is-disabled).button_is-terminate:not(.button_is-disabled-but-clickable):active {
  background-color: #D57F73;
}
.button_is-terminate-inverted {
  background-color: #FFF;
  border: solid thin #D57F73;
  color: #D57F73;
}
.button_is-terminate-inverted:not(.button_is-disabled).button_is-terminate-inverted:not(.button_is-disabled-but-clickable):focus, .button_is-terminate-inverted:not(.button_is-disabled).button_is-terminate-inverted:not(.button_is-disabled-but-clickable):hover {
  color: #FFF;
  background-color: #D57F73;
}
.button_is-terminate-inverted:not(.button_is-disabled).button_is-terminate-inverted:not(.button_is-disabled-but-clickable):active {
  color: #FFF;
  background-color: #A84F43;
}
.button_is-inverted {
  background-color: transparent;
  border: solid thin var(--main-color);
  color: var(--main-color);
}
.button_is-inverted:not(.button_is-disabled).button_is-inverted:not(.button_is-disabled-but-clickable):focus, .button_is-inverted:not(.button_is-disabled).button_is-inverted:not(.button_is-disabled-but-clickable):hover {
  color: #FFF;
  background-color: var(--main-color);
}
.button_is-inverted:not(.button_is-disabled).button_is-inverted:not(.button_is-disabled-but-clickable):active {
  color: #FFF;
  background-color: var(--main-color-dark);
}
.button_is-inverted.button_loading {
  background-image: var(--button-loading-background-image);
  color: #FFF;
}
.button_is-inverted.button_loading:not(.button_is-disabled).button_is-inverted.button_loading:not(.button_is-disabled-but-clickable):focus, .button_is-inverted.button_loading:not(.button_is-disabled).button_is-inverted.button_loading:not(.button_is-disabled-but-clickable):hover, .button_is-inverted.button_loading:not(.button_is-disabled).button_is-inverted.button_loading:not(.button_is-disabled-but-clickable):active {
  background-color: #FFF;
  color: #FFF;
}
.button_is-inverted.button_has-top-border {
  border: 0;
  border-top: solid 1px var(--main-color);
}
.button_is-inverted.button_action_compare {
  position: relative;
  padding-left: 30px;
  /**
   *  Pre-loads the image.
   */
}
.button_is-inverted.button_action_compare:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  height: 100%;
  width: 12px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/assets/images/icons/compare.svg");
  background-size: 12px 12px;
}
.button_is-inverted.button_action_compare:hover:after, .button_is-inverted.button_action_compare:focus:after {
  background-image: url("/assets/images/icons/compare-grey.svg");
}
.button_is-inverted.button_action_compare:active:after {
  background-image: url("/assets/images/icons/compare.svg");
}
.button_is-inverted.button_action_compare:before {
  content: "";
  background-image: url("/assets/images/icons/compare-grey.svg");
}
.button_is-inverted.button_action_copy {
  position: relative;
  padding-left: 35px;
  /**
   *  Pre-loads the image.
   */
}
.button_is-inverted.button_action_copy:after {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  width: 12px;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--svg-copy);
  background-size: 12px 13px;
}
.button_is-inverted.button_action_copy:hover:after, .button_is-inverted.button_action_copy:focus:after {
  background-image: url("/assets/images/icons/copy-white.svg");
}
.button_is-inverted.button_action_copy:before {
  content: "";
  background-image: url("/assets/images/icons/copy-white.svg");
}
.button_is-inverted.button_action_copy.button_is-inverted-grey-disabled:after {
  background-image: url("/assets/images/icons/copy-grey.svg");
}
.button_is-terminate-transparent {
  border: solid thin #D57F73;
  color: #D57F73;
  background-color: transparent;
}
.button_is-terminate-transparent:not(.button_is-disabled).button_is-terminate-transparent:not(.button_is-disabled-but-clickable):focus, .button_is-terminate-transparent:not(.button_is-disabled).button_is-terminate-transparent:not(.button_is-disabled-but-clickable):hover {
  color: #FFF;
  background-color: #D57F73;
}
.button_is-terminate-transparent:not(.button_is-disabled).button_is-terminate-transparent:not(.button_is-disabled-but-clickable):active {
  color: #FFF;
  background-color: #A84F43;
}
.button_background-color_transparent {
  background-color: transparent;
}
.button_background-color_transparent:not(.button_is-disabled).button_background-color_transparent:not(.button_is-disabled-but-clickable):focus, .button_background-color_transparent:not(.button_is-disabled).button_background-color_transparent:not(.button_is-disabled-but-clickable):hover {
  background-color: #D9D9D9;
}
.button_color_dark-grey {
  color: #4A4A4A;
}
.button_border-radius_50p {
  border-radius: 50%;
}
.button_width_25 {
  width: 25px;
}
.button_height_25 {
  height: 25px;
}
.button_line-height_0 {
  line-height: 0;
}
.button_has-corners {
  border-radius: 0;
}
.button_border_none {
  border: none;
}
.button_loading {
  background-image: var(--button-loading-background-image);
  animation: button__loading-animation 150s cubic-bezier(0.1, 0.99, 0.1, 0.99) 1;
  animation-fill-mode: forwards; /* 1 */
  background-size: 200% 100%;
  cursor: default;
}
.button_loading-fast {
  background-image: var(--button-loading-background-image);
  animation: button__loading-animation-fast 20s cubic-bezier(0.1, 0.99, 0.1, 0.99) 1;
  animation-fill-mode: forwards; /* 1 */
  background-size: 200% 100%;
  cursor: default;
}
.button_color_grey {
  color: var(--main-color);
  background-color: #EBEBEB;
  border: none;
}
.button_color_grey:not(.button_is-disabled).button_color_grey:not(.button_is-disabled-but-clickable):focus, .button_color_grey:not(.button_is-disabled).button_color_grey:not(.button_is-disabled-but-clickable):hover, .button_color_grey:not(.button_is-disabled).button_color_grey:not(.button_is-disabled-but-clickable):active {
  color: #FFF;
  background-color: #95989A;
}
.button_is-transparent-red {
  color: #D57F73;
  background-color: transparent;
  border: solid thin #D57F73;
}
.button_is-transparent-red:not(.button_is-disabled).button_is-transparent-red:not(.button_is-disabled-but-clickable):focus, .button_is-transparent-red:not(.button_is-disabled).button_is-transparent-red:not(.button_is-disabled-but-clickable):hover {
  color: #FFF;
  background-color: #D57F73;
  border: solid thin #D57F73;
}
.button_is-transparent-red:not(.button_is-disabled).button_is-transparent-red:not(.button_is-disabled-but-clickable):active {
  color: #D57F73;
  background-color: transparent;
  border: solid thin #D57F73;
}
.button_hover_dark:not(.button_is-disabled):focus, .button_hover_dark:not(.button_is-disabled):hover {
  border: solid thin var(--main-color-dark);
  color: var(--main-color-dark);
  background-color: transparent;
}
.button_hover_dark:not(.button_is-disabled):active {
  border: solid thin var(--main-color);
  color: var(--main-color);
  background-color: transparent;
}
.button_background-color_white {
  background-color: #FFF;
}
.button_type_cancel {
  border: solid thin #95989A;
  color: #B0A7A8;
}
.button_type_cancel:not(.button_background-color_white) {
  background: transparent;
}
.button_type_cancel:not(.button_is-disabled).button_type_cancel:not(.button_is-disabled-but-clickable):focus, .button_type_cancel:not(.button_is-disabled).button_type_cancel:not(.button_is-disabled-but-clickable):hover {
  background-color: #95989A;
  color: #FFF;
}
.button_type_cancel:not(.button_is-disabled).button_type_cancel:not(.button_is-disabled-but-clickable):active {
  background-color: #C1C1C1;
  border-color: transparent;
  color: #FFF;
}
.button_type_pending {
  background-color: #E4A861;
  color: #FFF;
}
.button_type_pending:not(.button_is-disabled).button_type_pending:not(.button_is-disabled-but-clickable):hover, .button_type_pending:not(.button_is-disabled).button_type_pending:not(.button_is-disabled-but-clickable):focus {
  background-color: #CD9757;
}
.button_type_pending:not(.button_is-disabled).button_type_pending:not(.button_is-disabled-but-clickable):active {
  opacity: 0.7;
}
.button_type_pending.button_loading {
  background-image: linear-gradient(to right, #E4A861 50%, #CD9757 50%);
}
.button_type_cancel-inverted {
  background-color: #95989A;
  border: solid thin #95989A;
  color: #FFF;
}
.button_type_cancel-inverted:not(.button_is-disabled).button_type_cancel-inverted:not(.button_is-disabled-but-clickable):focus, .button_type_cancel-inverted:not(.button_is-disabled).button_type_cancel-inverted:not(.button_is-disabled-but-clickable):hover {
  background-color: transparent;
  color: #B0A7A8;
}
.button_type_cancel-inverted:not(.button_is-disabled).button_type_cancel-inverted:not(.button_is-disabled-but-clickable):active {
  background-color: #C1C1C1;
  border-color: transparent;
  color: #FFF;
}
.button_is-disabled {
  opacity: 0.5;
  /* 1 */
  pointer-events: none;
  cursor: default;
}
.button_is-disabled.button_is-inverted-grey-disabled {
  background-color: transparent;
  border: solid thin var(--main-color);
  color: var(--main-color);
  opacity: 1;
  color: #C1C1C1;
  border-color: #C1C1C1;
  background-color: transparent;
}
.button_is-disabled.button_is-inverted-grey-disabled:not(.button_is-disabled).button_is-disabled.button_is-inverted-grey-disabled:not(.button_is-disabled-but-clickable):focus, .button_is-disabled.button_is-inverted-grey-disabled:not(.button_is-disabled).button_is-disabled.button_is-inverted-grey-disabled:not(.button_is-disabled-but-clickable):hover {
  color: #FFF;
  background-color: var(--main-color);
}
.button_is-disabled.button_is-inverted-grey-disabled:not(.button_is-disabled).button_is-disabled.button_is-inverted-grey-disabled:not(.button_is-disabled-but-clickable):active {
  color: #FFF;
  background-color: var(--main-color-dark);
}
.button_is-disabled.button_is-inverted-grey-disabled.button_loading {
  background-image: var(--button-loading-background-image);
  color: #FFF;
}
.button_is-disabled.button_is-inverted-grey-disabled.button_loading:not(.button_is-disabled).button_is-disabled.button_is-inverted-grey-disabled.button_loading:not(.button_is-disabled-but-clickable):focus, .button_is-disabled.button_is-inverted-grey-disabled.button_loading:not(.button_is-disabled).button_is-disabled.button_is-inverted-grey-disabled.button_loading:not(.button_is-disabled-but-clickable):hover, .button_is-disabled.button_is-inverted-grey-disabled.button_loading:not(.button_is-disabled).button_is-disabled.button_is-inverted-grey-disabled.button_loading:not(.button_is-disabled-but-clickable):active {
  background-color: #FFF;
  color: #FFF;
}
.button_is-disabled.button_is-inverted-grey-disabled.button_has-top-border {
  border: 0;
  border-top: solid 1px var(--main-color);
}
.button_is-disabled.button_is-inverted-grey-disabled.button_action_compare {
  position: relative;
  padding-left: 30px;
  /**
   *  Pre-loads the image.
   */
}
.button_is-disabled.button_is-inverted-grey-disabled.button_action_compare:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  height: 100%;
  width: 12px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/assets/images/icons/compare.svg");
  background-size: 12px 12px;
}
.button_is-disabled.button_is-inverted-grey-disabled.button_action_compare:hover:after, .button_is-disabled.button_is-inverted-grey-disabled.button_action_compare:focus:after {
  background-image: url("/assets/images/icons/compare-grey.svg");
}
.button_is-disabled.button_is-inverted-grey-disabled.button_action_compare:active:after {
  background-image: url("/assets/images/icons/compare.svg");
}
.button_is-disabled.button_is-inverted-grey-disabled.button_action_compare:before {
  content: "";
  background-image: url("/assets/images/icons/compare-grey.svg");
}
.button_is-disabled.button_is-inverted-grey-disabled.button_action_copy {
  position: relative;
  padding-left: 35px;
  /**
   *  Pre-loads the image.
   */
}
.button_is-disabled.button_is-inverted-grey-disabled.button_action_copy:after {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  width: 12px;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--svg-copy);
  background-size: 12px 13px;
}
.button_is-disabled.button_is-inverted-grey-disabled.button_action_copy:hover:after, .button_is-disabled.button_is-inverted-grey-disabled.button_action_copy:focus:after {
  background-image: url("/assets/images/icons/copy-white.svg");
}
.button_is-disabled.button_is-inverted-grey-disabled.button_action_copy:before {
  content: "";
  background-image: url("/assets/images/icons/copy-white.svg");
}
.button_is-disabled.button_is-inverted-grey-disabled.button_action_copy.button_is-inverted-grey-disabled:after {
  background-image: url("/assets/images/icons/copy-grey.svg");
}
.button_is-disabled.button_is-inverted-grey-disabled:after {
  background-image: url("/assets/images/icons/plus-grey.svg");
}
.button_is-disabled-but-clickable {
  opacity: 0.5;
}
.button_is-grey-disabled {
  opacity: 1;
  background-color: #D7D2D3;
}
@media (max-width: 47.99em) {
  .button_mobile-square {
    border-radius: 0;
    border: 0;
  }
}
.button_is-square {
  border-radius: 0;
  border: 0;
}
.button_font_montserrat {
  font-family: "Montserrat", sans-serif;
}
.button_size_10 {
  font-size: 10px;
}
.button_size_compact {
  height: 35px;
  line-height: 35px;
  display: inline-block;
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.button_height_compact {
  height: 35px;
  line-height: 35px;
}
.button_padding-left_10 {
  padding-left: 10px;
}
.button_is-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button_padding-left_15 {
  padding-left: 15px;
}
.button_padding-left_60 {
  padding-left: 60px;
}
.button_padding-right_15 {
  padding-right: 15px;
}
.button_padding-right_25 {
  padding-right: 25px;
}
.button_side-padding_10 {
  padding-left: 10px;
  padding-right: 10px;
}
.button_side-padding_15 {
  padding-left: 15px;
  padding-right: 15px;
}
.button_padding_30 {
  padding-left: 30px;
  padding-right: 30px;
}
.button_padding_35 {
  padding-left: 35px;
  padding-right: 35px;
}
.button_padding_40 {
  padding-left: 40px;
  padding-right: 40px;
}
.button_padding_60 {
  padding-left: 60px;
  padding-right: 60px;
}
.button_padding_large {
  padding-left: 20px;
  padding-right: 20px;
}
.button_margin-right_10 {
  margin-right: 10px;
}
.button_margin-left_20 {
  margin-left: 20px;
}
@media screen and (max-width: 1450px) {
  .button_small-screen-lesspad {
    padding-right: 12px;
    padding-left: 12px;
  }
}
.button_type_transparent {
  background: transparent;
  border: solid thin #FFF;
  color: #FFF;
}
.button_type_transparent:not(.button_is-disabled).button_type_transparent:not(.button_is-disabled-but-clickable):focus, .button_type_transparent:not(.button_is-disabled).button_type_transparent:not(.button_is-disabled-but-clickable):hover {
  color: #FFF;
  background-color: rgba(255, 255, 255, 0.1);
  border: solid thin #FFF;
}
.button_type_transparent:not(.button_is-disabled).button_type_transparent:not(.button_is-disabled-but-clickable):active {
  color: #FFF;
  background-color: rgba(255, 255, 255, 0.2);
  border: solid thin #FFF;
}
.button_height_small {
  line-height: 28px;
  height: 30px;
}
.button_is-labelish {
  height: 35px;
  line-height: 35px;
  text-transform: uppercase;
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
}
.button_font-size_small {
  font-size: 13px;
}
.button_font-size_12 {
  font-size: 12px;
}
.button_font-size_16 {
  font-size: 16px;
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .button_font-size_small-tablet {
    font-size: 13px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .button_font-size_12-tablet {
    font-size: 12px;
  }
}
.button_font-weight_normal {
  font-weight: normal;
}
.button_font-weight_600 {
  font-weight: 600;
}
.button_width_80 {
  padding-left: 0;
  padding-right: 0;
  width: 80px;
  text-align: center;
}
.button_width_full {
  width: 100%;
}
.button_width_auto {
  width: auto;
}
@media (max-width: 47.99em) {
  .button_mobile-width_full {
    width: 100%;
  }
}
.button_action_view {
  position: relative;
  padding-left: 40px;
}
.button_action_view:after {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  height: 100%;
  width: 20px;
  background: url("/assets/images/icons/eye-inverted.svg") center center no-repeat;
  background-size: 20px 10px;
}
.button_action_view.button_is-inverted:after {
  background-image: url("/assets/images/icons/eye.svg");
}
.button_action_view.button_is-inverted:focus:after, .button_action_view.button_is-inverted:active:after, .button_action_view.button_is-inverted:hover:after {
  background-image: url("/assets/images/icons/eye-inverted.svg");
}
.button_action_add-round {
  display: flex;
  align-items: center;
  width: 25px;
  height: 25px;
}
.button_action_add-round::after {
  content: "";
  width: 100%;
  height: 100%;
  background: url("/assets/images/icons/plus.svg") center center no-repeat;
  background-size: 7px 7px;
}
.button_action_remove {
  display: flex;
  align-items: center;
  width: 16px;
  height: 16px;
}
.button_action_remove::after {
  content: "";
  width: 100%;
  height: 100%;
  background: url("/assets/images/icons/delete.svg") center center no-repeat;
  background-size: 16px 16px;
}
.button_action_remove:not(.button_is-disabled).button_action_remove:not(.button_is-disabled-but-clickable):focus, .button_action_remove:not(.button_is-disabled).button_action_remove:not(.button_is-disabled-but-clickable):hover {
  background-color: transparent;
}
.button_action_remove:not(.button_is-disabled).button_action_remove:not(.button_is-disabled-but-clickable):active {
  background-color: transparent;
}
.button_action_remove:not(.button_is-disabled).button_action_remove:not(.button_is-disabled-but-clickable):focus:after, .button_action_remove:not(.button_is-disabled).button_action_remove:not(.button_is-disabled-but-clickable):hover:after, .button_action_remove:not(.button_is-disabled).button_action_remove:not(.button_is-disabled-but-clickable):active:after {
  background-size: 19px 19px;
}
.button_action_add {
  position: relative;
  padding-left: 30px;
  /**
   * 1. change the plus icon to light green in case inverted
   * 2. white on hover since the background is green
   */
}
.button_action_add:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  height: 100%;
  width: 20px;
  background: url("/assets/images/icons/plus.svg") center center no-repeat;
  background-size: 7px 7px;
}
.button_action_add.button_is-inverted:after {
  background-image: var(--button-action-add-inverted-background-image);
}
.button_action_add.button_is-inverted:focus:after, .button_action_add.button_is-inverted:active:after, .button_action_add.button_is-inverted:hover:after, .button_action_add.button_is-inverted.button_loading:after {
  background-image: url("/assets/images/icons/plus.svg"); /* [2] */
}
.button_action_add.button_is-wide-add {
  padding-left: 50px;
  padding-right: 40px;
}
.button_action_add.button_is-wide-add:after {
  left: 30px;
}
.button_action_print {
  position: relative;
  padding-left: 33px;
}
.button_action_print:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  height: 100%;
  width: 20px;
  background: url("/assets/images/icons/print.svg") center center no-repeat;
  background-size: 13px 12px;
}
.button_action_print.button_is-inverted:focus:after, .button_action_print.button_is-inverted:active:after, .button_action_print.button_is-inverted:hover:after {
  background-image: url("/assets/images/icons/print-white.svg");
}
.button_action_dependents {
  position: relative;
  padding-left: 33px;
}
.button_action_dependents:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  height: 100%;
  width: 20px;
  background: url("/assets/images/icons/dependents.svg") center center no-repeat;
  background-size: 14px 9px;
}
.button_action_dependents.button_is-inverted:focus:after, .button_action_dependents.button_is-inverted:active:after, .button_action_dependents.button_is-inverted:hover:after {
  background-image: url("/assets/images/icons/dependents-white.svg");
}
@media (max-width: 47.99em) {
  .button_action_mobile-add {
    position: relative;
    padding-left: 30px;
  }
  .button_action_mobile-add:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    height: 100%;
    width: 20px;
    background: url("/assets/images/icons/plus.svg") center center no-repeat;
    background-size: 7px 7px;
  }
}
.button_action_expand {
  display: flex;
  align-items: center;
}
.button_action_expand::after {
  content: "";
  height: 10px;
  width: 8px;
  padding-left: 10px;
  background: url("/assets/images/icons/arrow-down-white.svg") center right no-repeat;
  background-size: 10px 8px;
}
.button_action_go-green {
  position: relative;
  padding-left: 35px;
}
.button_action_go-green:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  height: 100%;
  width: 20px;
  background: url("/assets/images/icons/leaf.svg") center center no-repeat;
  background-size: 15px 13px;
}
.button_action_go-green-square {
  position: relative;
}
.button_action_go-green-square:before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  transform: translateY(2px);
  height: 13px;
  width: 15px;
  background: url("/assets/images/icons/leaf.svg") center center no-repeat;
  background-size: 100% 100%;
}
.button_action_manage {
  color: #8A6D9D;
  background: #FFF;
  border: solid thin #8A6D9D;
}
.button_action_manage:not(.button_is-disabled).button_action_manage:not(.button_is-disabled-but-clickable):focus, .button_action_manage:not(.button_is-disabled).button_action_manage:not(.button_is-disabled-but-clickable):hover {
  color: #FFF;
  background-color: #8A6D9D;
  border-color: #8A6D9D;
}
.button_action_manage:not(.button_is-disabled).button_action_manage:not(.button_is-disabled-but-clickable):active {
  color: #FFF;
  background-color: #68467E;
  border-color: #68467E;
}
.button_action_clear-filters {
  display: inline-block;
  height: 18px;
  width: auto;
  line-height: 18px;
  border-radius: 9px;
  padding: 0 22px 0 5px;
  margin-right: 10px;
  font-weight: normal;
  background: #D57F73 var(--svg-x-sign-white) right 7px center no-repeat;
  background-size: 8px 8px;
  color: white;
  font-size: 11px;
  text-transform: uppercase;
}
.button_action_clear-filters:not(.button_is-disabled).button_action_clear-filters:not(.button_is-disabled-but-clickable):focus, .button_action_clear-filters:not(.button_is-disabled).button_action_clear-filters:not(.button_is-disabled-but-clickable):hover {
  background-color: #A84F43;
}
.button_action_clear-filters:not(.button_is-disabled).button_action_clear-filters:not(.button_is-disabled-but-clickable):active {
  background-color: #D57F73;
}
.button_action_send {
  position: relative;
}
.button_action_send:before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  transform: translateY(2px);
  height: 13px;
  width: 13px;
  background: url("/assets/images/icons/paper-plane-white.svg") center center no-repeat;
  background-size: 100% 100%;
}
.button_action_request-id-card {
  position: relative;
}
.button_action_request-id-card:before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  transform: translateY(1px);
  height: 12px;
  width: 16px;
  background: url("/assets/images/icons/id-card-white.svg") center center no-repeat;
  background-size: 16px 12px;
}
.button_action_request-id-card.button_is-inverted:before {
  background-image: url("/assets/images/icons/id-card-green.svg");
}
.button_action_request-id-card.button_is-inverted:not(.button_loading):focus:before, .button_action_request-id-card.button_is-inverted:not(.button_loading):active:before, .button_action_request-id-card.button_is-inverted:not(.button_loading):hover:before {
  background-image: url("/assets/images/icons/id-card-white.svg");
}
.button_action_request-spreadsheet {
  position: relative;
}
.button_action_request-spreadsheet:before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  transform: translateY(1px);
  height: 12px;
  width: 13px;
  background: url("/assets/images/icons/excel.svg") center center no-repeat;
  background-size: 16px 12px;
}
.button_action_request-spreadsheet:not(.button_loading):focus:before, .button_action_request-spreadsheet:not(.button_loading):active:before, .button_action_request-spreadsheet:not(.button_loading):hover:before {
  background-image: url("/assets/images/icons/excel-white.svg");
}
.button_action_request-pdf {
  position: relative;
}
.button_action_request-pdf:before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  transform: translateY(1px);
  height: 12px;
  width: 9px;
  background: url("/assets/images/icons/pdf.svg") center center no-repeat;
  background-size: 16px 12px;
}
.button_action_request-pdf:not(.button_loading):focus:before, .button_action_request-pdf:not(.button_loading):active:before, .button_action_request-pdf:not(.button_loading):hover:before {
  background-image: url("/assets/images/icons/pdf-white.svg");
}
.button_action_download:before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  transform: translateY(1px);
  height: 12px;
  width: 9px;
  background: url("/assets/images/icons/download-green.svg") center center no-repeat;
  background-size: 16px 12px;
}
.button_action_download:not(.button_loading):focus:before, .button_action_download:not(.button_loading):active:before, .button_action_download:not(.button_loading):hover:before {
  background-image: url("/assets/images/icons/download-white.svg");
}
.button_action_download-sheet {
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}
.button_action_download-sheet:before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  transform: translateY(1px);
  height: 13px;
  width: 16px;
  background: url("/assets/images/themes/blue/icons/arrow-down-underlined.svg") center center no-repeat;
  background-size: 16px 13px;
}
.button_action_download-sheet:not(.button_loading):focus:before, .button_action_download-sheet:not(.button_loading):active:before, .button_action_download-sheet:not(.button_loading):hover:before {
  background-image: url("/assets/images/themes/blue/icons/arrow-down-underlined-white.svg");
}
.button_action_edit {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button_action_edit:before {
  content: "";
  height: 10px;
  width: 10px;
  margin-right: 5px;
  background: url("/assets/images/icons/pencil.svg") center center no-repeat;
  background-size: 10px 10px;
}
.button_action_edit:not(.button_loading):focus:before, .button_action_edit:not(.button_loading):active:before, .button_action_edit:not(.button_loading):hover:before {
  background-image: url("/assets/images/icons/white-pencil.svg");
}
@media (max-width: 47.99em) {
  .button_mobile-shrink {
    font-size: 0;
    color: transparent;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    padding: 0;
  }
}
@media (max-width: 47.99em) {
  .button_mobile-shrink:after {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: 10px 10px;
  }
}
.button_is-borderless {
  border: none;
}
.button_hidden {
  display: none;
}
.button_is-relative {
  position: relative;
}
@media (min-width: 31.25em) {
  .button_has-dropdown {
    min-width: 150px;
  }
}
.button_has-main-color-border {
  border: solid thin var(--main-color);
}
.button_type_cancel-dialog {
  background: #FFF;
  border: none;
  color: #5E5E5E;
}
.button_type_cancel-dialog:not(.button_is-disabled).button_type_cancel-dialog:not(.button_is-disabled-but-clickable):focus, .button_type_cancel-dialog:not(.button_is-disabled).button_type_cancel-dialog:not(.button_is-disabled-but-clickable):hover {
  color: #5E5E5E;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
}
.button_type_cancel-dialog:not(.button_is-disabled).button_type_cancel-dialog:not(.button_is-disabled-but-clickable):active {
  color: #5E5E5E;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
}

@media (max-width: 47.99em) {
  .button_is-in-dialog {
    height: 100%;
    width: 100%;
    border-radius: 0;
    padding: 0;
  }
}

/**
 * <button> tags by default center text. Therefore we
 * can reset the line-height (which was previously used for centering).
 * This fixes multiline text buttons.
 *
 * Multiline text for <a> tags should be handled manually. Since <a> tags by default
 * do not center. (removing the line-height would break centering).
 */
@media (max-width: 47.99em) {
  button.button_is-in-dialog {
    line-height: normal;
  }
}

button.button_line-height_mobile-height {
  line-height: 45px;
}

/**
 * @for button
 * @modifier theme
 * @value inverted-grey
 */
.button_theme_inverted-grey {
  border: 0;
  color: #4A4A4A;
  background-color: transparent;
}
.button_theme_inverted-grey:not(.button_is-disabled).button_theme_inverted-grey:not(.button_is-disabled-but-clickable):focus, .button_theme_inverted-grey:not(.button_is-disabled).button_theme_inverted-grey:not(.button_is-disabled-but-clickable):hover {
  color: #FFF;
  background-color: #4A4A4A;
}
.button_theme_inverted-grey:not(.button_is-disabled).button_theme_inverted-grey:not(.button_is-disabled-but-clickable):active {
  background-color: #777575;
}

.button__text_is-inline-flex {
  display: inline-flex;
  align-items: center;
}

.button_margin-right_20 {
  margin-right: 20px;
}

@media (min-width: 48em) {
  .button_t-margin-right_20 {
    margin-right: 20px;
  }
}

.button_has-paper-plane .button__text {
  display: flex;
  align-items: center;
}
.button_has-paper-plane .button__text::before {
  content: "";
  margin-right: 5px;
  width: 12px;
  height: 12px;
  background: url("/assets/images/icons/paper-plane-white.svg") center no-repeat;
}

.button_has-browser-icon .button__text::before {
  margin-right: 5px;
  content: "";
  display: inline-block;
}
.button_has-browser-icon .button__text_browser_chrome::before {
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--svg-chrome);
}
.button_has-browser-icon .button__text_browser_firefox::before {
  width: 16px;
  height: 15px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--svg-firefox);
}
.button_has-browser-icon .button__text_browser_safari::before {
  width: 14px;
  height: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--svg-safari);
}
.button_has-browser-icon .button__text_browser_edge::before {
  width: 11px;
  height: 12px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--svg-edge);
}
.button_has-browser-icon:hover .button__text_browser_chrome::before {
  background-image: url("/assets/images/icons/chrome-white.svg");
}
.button_has-browser-icon:hover .button__text_browser_firefox::before {
  background-image: url("/assets/images/icons/firefox-white.svg");
}
.button_has-browser-icon:hover .button__text_browser_safari::before {
  background-image: url("/assets/images/icons/safari-white.svg");
}
.button_has-browser-icon:hover .button__text_browser_edge::before {
  background-image: url("/assets/images/icons/edge-white.svg");
}

.button_has-upload-icon:before {
  content: "";
  width: 11px;
  height: 11px;
  background: url("/assets/images/icons/upload-white.svg") center no-repeat;
  display: inline-block;
  margin-right: 3px;
}

.button_has-back-icon .button__text {
  position: relative;
  padding-left: 15px;
}
.button_has-back-icon .button__text:before {
  content: "";
  height: 100%;
  width: 15px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: var(--svg-back);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 5px 11px;
}
.button_has-back-icon .button__text_is-disabled {
  color: #C1C1C1;
}
.button_has-back-icon .button__text_is-disabled:before {
  background-image: url("/assets/images/themes/green/icons/back-gray.svg");
}
.button_has-back-icon:focus .button__text:before, .button_has-back-icon:hover .button__text:before, .button_has-back-icon:active .button__text:before {
  background-image: url("/assets/images/themes/green/icons/back-white.svg");
}

.button_in-table {
  cursor: pointer;
  background-color: #F2F2F2;
  border-radius: 0;
  color: var(--main-color);
}
.button_in-table:not(.button_is-disabled).button_in-table:not(.button_is-disabled-but-clickable):hover, .button_in-table:not(.button_is-disabled).button_in-table:not(.button_is-disabled-but-clickable):focus {
  background-color: #D7D7D7;
}
.button_in-table.button_background-color_semi-grey {
  background-color: #EFEFEF;
}
.button_in-table.button_background-color_dark-grey {
  background-color: #EAEAEA;
}
.button_in-table.button_background-color_light-grey {
  background-color: #F8F8F8;
}

.button_background-color_light-main-color {
  background-color: var(--main-color-light-2);
  color: var(--main-color);
}
.button_background-color_light-main-color:not(.button_is-disabled).button_background-color_light-main-color:not(.button_is-disabled-but-clickable):focus, .button_background-color_light-main-color:not(.button_is-disabled).button_background-color_light-main-color:not(.button_is-disabled-but-clickable):hover {
  color: #FFF;
}
.button_background-color_light-main-color:not(.button_is-disabled).button_background-color_light-main-color:not(.button_is-disabled-but-clickable):active {
  color: #FFF;
}

.button_left-border_white {
  border-left: 1px solid #FFF;
}

.button_right-border_white {
  border-right: 1px solid #FFF;
}

.button_top-border_light-grey {
  border-top: solid thin #F8F8F8;
}

.button_height_full {
  height: 100%;
}

.button_is-dummy {
  opacity: 0;
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 20px;
  z-index: 15;
}

/**
 * A button that is used inside tables on mobile.
 * It fills the width similar to dialog action buttons.
 */
.button_in-table-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: inherit;
  border-radius: 0;
  background-color: #E1EFF1;
  font-weight: normal;
  color: var(--main-color);
}
.button_in-table-mobile:not(.button_is-disabled).button_in-table-mobile:not(.button_is-disabled-but-clickable):hover, .button_in-table-mobile:not(.button_is-disabled).button_in-table-mobile:not(.button_is-disabled-but-clickable):focus {
  background-color: #C4E1E7;
}

.button_in-table-mobile-red {
  background-color: #F9ECEA;
  color: #D57F73;
}
.button_in-table-mobile-red:not(.button_is-disabled).button_in-table-mobile-red:not(.button_is-disabled-but-clickable):hover, .button_in-table-mobile-red:not(.button_is-disabled).button_in-table-mobile-red:not(.button_is-disabled-but-clickable):focus {
  background-color: #F0E4E1;
}

.button_is-terminate.button_loading {
  background-image: linear-gradient(to right, #A84F43 50%, #D57F73 50%);
}

.button_is-disabled.button_loading {
  background-image: linear-gradient(to right, #D7D2D3 50%, var(--main-color) 50%);
  opacity: 1;
}

.button__text_font-weight_400 {
  font-weight: 400;
}

.button_color_red {
  color: #D57F73;
}

.button_has-border-bottom {
  border-bottom: 1px solid #DADADA;
}

.button_icon_edit {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button_icon_edit:before {
  content: "";
  height: 10px;
  width: 15px;
  background: url("/assets/images/icons/pencil.svg") center center no-repeat;
  background-size: 10px 10px;
}

.button_type_edit-light-main-color {
  background-color: var(--main-color-light-3);
  color: var(--main-color);
  font-weight: 400;
}
.button_type_edit-light-main-color:hover, .button_type_edit-light-main-color:active {
  color: #FFFFFF;
}

.button_icon_edit:not(.button_loading):hover:before {
  background: url("/assets/images/icons/white-pencil.svg") center center no-repeat;
}

.button_type_terminate {
  background-color: rgba(213, 127, 115, 0.15);
  color: #D57F73;
  font-weight: 400;
}
.button_type_terminate:not(.button_is-disabled).button_type_terminate:not(.button_is-disabled-but-clickable):focus, .button_type_terminate:not(.button_is-disabled).button_type_terminate:not(.button_is-disabled-but-clickable):hover {
  color: #FFFFFF;
  background-color: #D45E4F;
}

/**
 * Currently the line-height doesn't take into account the border size, so the text
 * inside buttons that have borders won't be centered.
 * This is a temporary fix and should be fixed everywhere in a standalone ticket.
 */
.button_line-height_compact-inverted {
  line-height: calc(35px - 2px);
}

@keyframes button__loading-animation {
  0% {
    background-position: 0%;
  }
  70% {
    background-position: -95%;
  }
  100% {
    background-position: -99%;
  }
}
@keyframes button__loading-animation-fast {
  0% {
    background-position: 0%;
  }
  10% {
    background-position: -100%;
  }
  100% {
    background-position: -99%;
  }
}
.button_min-width_max-content {
  min-width: -moz-max-content;
  min-width: max-content;
}

/**
 * The carrier card modal shown in ESS when expanding a carrier for details.
 *
 * @block carrier-card
 */
.carrier-card {
  padding: 0 0 15px;
}
@media (max-width: 47.99em) {
  .carrier-card {
    height: 100%;
    overflow: auto;
  }
}
@media (min-width: 48em) {
  .carrier-card {
    border: solid 1px var(--color-light-blue);
  }
}

/**
 * @element header
 */
.carrier-card__header {
  padding: 30px 20px 15px;
  display: flex;
}

/**
 * @element info
 */
.carrier-card__info {
  flex: 1;
  display: flex;
  color: #5C5050;
}
@media (max-width: 47.99em) {
  .carrier-card__info {
    flex-direction: column;
  }
}
@media (min-width: 48em) {
  .carrier-card__info {
    flex-direction: row;
    align-items: center;
    height: 100%;
  }
}

/**
 * @element logo
 */
.carrier-card__logo {
  width: 100px;
  margin-right: 17px;
  height: 50px;
  display: flex;
  align-items: center;
}

/**
 * @element img
 */
.carrier-card__img {
  width: 100%;
  max-height: 100%;
}

/**
 * @element carrier-name
 */
.carrier-card__carrier-name {
  margin-bottom: 5px;
  font-weight: bold;
}

.edit-carrier-info {
  display: block;
}

.edit-carrier-info__body {
  margin-top: 15px;
}

.edit-carrier-info__empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 190px;
  margin-top: 8px;
  background-color: #FFFFFF;
  border: solid 1px #DDE7E7;
}
.edit-carrier-info__empty-state:before {
  content: "";
  display: block;
  margin-bottom: 17px;
  width: 22px;
  height: 22px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/employer-classes.svg");
  background-repeat: no-repeat;
}

.edit-carrier-info__empty-text {
  font-size: 20px;
  color: #1297AC;
}

.edit-carrier-info__option {
  background: white;
  border: solid thin #C7D7D7;
}
.edit-carrier-info__option:not(:last-child) {
  border-bottom: none;
}

.edit-carrier-info__subgroup-id-warning {
  margin: 20px 10px 10px;
}

/**
 * The Edit and Extra steps in the Census Import workflow.
 *
 * @block census-import-edit
 */
.census-import-edit {
  height: 100%;
  overflow-x: auto;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/**
 * @element content
 */
.census-import-edit__content {
  height: 100%;
  position: relative;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

/**
 * @element wait
 */
.census-import-edit__wait {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/**
 * @element wait-text
 */
.census-import-edit__wait-text {
  position: relative;
  padding-top: 60px;
}
.census-import-edit__wait-text:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 46px;
  background: url("/assets/images/hour-glasses/hour-glass-2.svg") top center no-repeat;
  background-size: 32px 46px;
}

/**
 * @element employee
 */
.census-import-edit__employee {
  border: solid 1px var(--color-light-blue);
  height: 100%;
  box-sizing: border-box;
  padding: 5px 15px;
}

/**
 * @element name
 */
.census-import-edit__employee-name {
  font-weight: bold;
}

/**
 * The File step in the Census Import workflow.
 *
 * @block census-import-file
 */
.census-import-file {
  display: block;
}

/**
 * 1. Margin needs to match the grid cell is-form padding.
 *
 * @element content
 */
.census-import-file__content {
  margin: 0 5px 5px; /* 1 */
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .census-import-file__content {
    padding: 0 20px;
  }
}
@media (max-width: 47.99em) {
  .census-import-file__content {
    padding: 0 10px;
  }
}

/**
 * @element box
 */
.census-import-file__box {
  border: solid 1px var(--main-color-light-29);
  padding: 30px;
  background: #FFF;
}

/**
 * @element fields
 */
.census-import-file__fields {
  padding: 20px 0;
  display: flex;
}

/**
 * @element field-list
 */
.census-import-file__field-list {
  flex: 1;
  padding-left: 20px;
  border-left: solid 1px var(--main-color-light-29);
}
.census-import-file__field-list:first-child {
  padding-left: 0;
  border-left: 0;
}
.census-import-file__field-list ul {
  padding: 5px 0;
  margin: 0;
}
.census-import-file__field-list li {
  list-style-type: none;
}

/**
 * @element link
 */
.census-import-file__link {
  color: var(--main-color);
}
.census-import-file__link:hover {
  text-decoration: underline;
}

/**
 * @element radios
 */
.census-import-file__radios {
  padding-top: 10px;
}

/**
 * @element radios-label
 */
.census-import-file__radios-label {
  margin: 0 5px 5px; /* 1 */
}

/**
 * 1. Margin needs to match the grid cell is-form padding.
 *
 * @element radio
 */
.census-import-file__radio {
  padding: 10px 0;
  margin: 0 5px 5px; /* 1 */
}

/**
 * The Mapping step in Census Import workflow.
 *
 * @block census-import-mapping
 */
@media (min-width: 64em) {
  .census-import-mapping {
    display: flex;
  }
}

/**
 * @element fields
 */
.census-import-mapping__fields {
  padding: 20px 0;
  display: flex;
  box-sizing: border-box;
}
@media (min-width: 64em) {
  .census-import-mapping__fields {
    width: 220px;
    flex-direction: column;
  }
}

/**
 * @element field-list
 */
.census-import-mapping__field-list {
  padding-left: 20px;
}
@media (min-width: 64em) {
  .census-import-mapping__field-list {
    flex: none;
    width: 100%;
    padding-left: 0;
    margin-bottom: 25px;
  }
}
.census-import-mapping__field-list:first-child {
  padding-left: 0;
}
.census-import-mapping__field-list:last-child {
  flex: 1;
}
.census-import-mapping__field-list ul {
  padding: 5px 0;
  margin: 0;
}
.census-import-mapping__field-list .census-import-mapping__field {
  list-style-type: none;
  padding-left: 18px;
}
.census-import-mapping__field-list .census-import-mapping__field_is-selected {
  background: url("/assets/images/icons/check.svg") left center no-repeat;
  background-size: 11px 10px;
}

/**
 * @element columns
 */
.census-import-mapping__columns {
  flex: 1;
}

/**
 * @element boxes
 */
.census-import-mapping__boxes {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}

/**
 * @element box
 */
.census-import-mapping__box {
  width: 242px;
  margin-right: 10px;
  margin-top: 10px;
  background: #FFF;
}

/**
 * @element rows
 */
.census-import-mapping__rows {
  border: solid 1px var(--color-light-blue);
  border-top: 0;
}

/**
 * @element row
 */
.census-import-mapping__row {
  height: 55px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

/**
 * The Summary (last) step in Census Import workflow.
 *
 * @block census-import-preview
 */
.census-import-preview {
  max-width: 810px;
  margin: auto;
}

/**
 * @element count-container
 */
.census-import__count-container {
  font-family: "Montserrat", sans-serif;
  color: var(--main-color);
  text-align: center;
  padding: 45px 0 40px;
  padding-bottom: 20px;
}

/**
 * @element count
 */
.census-import__count {
  font-size: 40px;
}

/**
 * @element stats
 */
.census-import__stats {
  display: flex;
  justify-content: space-between;
}

/**
 * @element stat-box
 */
.census-import__stat-box {
  background: #FFF;
  padding: 20px;
  box-sizing: border-box;
  width: calc(50% - 5px);
  border: solid 1px var(--main-color-light-29);
}

/**
 * @element stat-box-content
 */
.census-import__stat-box-content {
  padding-top: 10px;
}

/**
 * @element text
 */
.census-import__text {
  padding: 20px;
  margin-top: 15px;
  box-sizing: border-box;
  background: #FFF;
  border: solid 1px var(--main-color-light-29);
}
.census-import__text p {
  padding-bottom: 25px;
}
.census-import__text p:last-child {
  padding-bottom: 0;
}

/**
 * @block checkbox-list
 */
.checkbox-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

/**
 * @element text
 */
.checkbox-list__text {
  text-transform: uppercase;
  font-size: 12px;
  flex: 1;
}

/**
 * @element text-inner
 */
.checkbox-list__text-inner {
  /**
   * @modifier is-lowercase
   * @for text-inner
   */
}
.checkbox-list__text-inner_is-lowercase {
  text-transform: lowercase;
}

/**
 * @element oval-checkbox
 */
.checkbox-list__oval-checkbox {
  box-sizing: border-box;
  width: 45px;
  height: 20px;
  margin-right: 5px;
  margin-bottom: 5px;
}

/**
 * @element checkbox-list
 */
.report-schedule__checkbox-list {
  margin-bottom: 10px;
}

/**
 * @block classification
 */
.classification {
  height: 100%;
}

/**
 * @element edit-icon
 */
.classification__edit-icon {
  display: block;
  font-size: 0;
  width: 15px;
  height: 15px;
  background: url("/assets/images/icons/edit.svg") center center no-repeat;
  background-size: 11px 11px;
  cursor: pointer;
}

.classification__edit-icon-container {
  position: absolute;
  top: 10px;
  right: 20px;
}

/**
 * @element show-versions
 */
.classification__show-versions {
  font-size: 14px;
}
@media (min-width: 64em) {
  .classification__show-versions {
    padding-right: 10px;
  }
}

.clickable-area {
  height: 100%;
  padding: 0 10px;
}
.clickable-area:hover {
  background-color: #D7D7D7;
}
.clickable-area_hover-main:hover {
  background-color: var(--main-color-light-27);
}
.clickable-area_is-disabled {
  pointer-events: none;
}
.clickable-area_is-centered {
  display: flex;
  align-items: center;
}
.clickable-area_has-large-padding {
  padding: 0 25px;
}
@media (min-width: 64em) {
  .clickable-area_has-large-padding {
    padding: 0 15px;
  }
}
.clickable-area_has-no-padding {
  padding: 0;
}
.clickable-area_is-exit {
  max-width: 122px;
  background-color: var(--main-color-dark-7);
}
.clickable-area_is-exit:hover {
  background-color: var(--main-color-dark-6);
  font-weight: bold;
}
.clickable-area_cursor_pointer {
  cursor: pointer;
}
.clickable-area_width_100 {
  width: 100px;
}
.clickable-area_width_175 {
  width: 175px;
}
.clickable-area_width_200 {
  width: 200px;
}
.clickable-area_width_220 {
  width: 220px;
}
.clickable-area_width_80 {
  width: 80px;
}
.clickable-area_justify-content_center {
  justify-content: center;
}
.clickable-area_is-loading {
  background-image: linear-gradient(to right, var(--main-color-dark) 50%, var(--main-color) 50%);
  animation: clickable-area__loading-animation 150s cubic-bezier(0.1, 0.99, 0.1, 0.99) 1;
  animation-fill-mode: forwards;
  background-size: 200% 100%;
  cursor: default;
}

@keyframes clickable-area__loading-animation {
  0% {
    background-position: 0%;
  }
  70% {
    background-position: -95%;
  }
  100% {
    background-position: -99%;
  }
}
.clickable-area_min-width_max-content {
  min-width: -moz-max-content;
  min-width: max-content;
}

/**
 * An X button.
 *
 * 1. The word "Back" is usually written for accessibility.
 *
 * @block close-button
 */
.close-button {
  width: 30px;
  height: 30px;
  display: block;
  cursor: pointer;
  background: url("/assets/images/icons/x-sign-clear.svg") center no-repeat;
  background-size: 15px 15px;
  border-radius: 5px;
  font-size: 0; /* 1 */
  transition: transform linear 200ms;
  /**
   * @modifier color
   * @value white
   */
  /**
   * @modifier is-small
   */
}
.close-button:hover, .close-button:focus {
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}
.close-button_color_white {
  background-image: var(--svg-x-sign-white);
}
.close-button_is-small {
  background-size: 11px;
  width: 20px;
  height: 20px;
}
.close-button_size_large {
  width: 40px;
  height: 40px;
  background-size: 20px;
}
.close-button_margin-left_20 {
  margin-left: 20px;
}
.close-button_is-mobile {
  background-color: #D6D6D6;
  width: 60px;
  height: 60px;
  border-radius: 0;
}
.close-button_is-mobile:hover {
  transform: none;
}

/**
 * Button used to collapse boxes. Consists of an arrow
 * that rotates when box is collapsed/not-collapsed.
 *
 * @block collapser
 */
.collapser {
  width: 21px;
  height: 21px;
  background-color: #E7E7E7;
  font-size: 0;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 3px;
  transition: box-shadow 100ms ease;
}
.collapser:hover {
  box-shadow: 0 0 6px #95989A;
}
.collapser:active {
  opacity: 0.7;
}

/**
 * The arrow icon is in a separate element so that we can rotate it without
 * rotating the whole button.
 */
.collapser__icon {
  width: 100%;
  height: 100%;
  display: block;
  background: url("/assets/images/icons/collapse.svg") center center no-repeat;
  transition: transform 300ms ease;
}

.collapser_is-collapsed .collapser__icon {
  transform: rotate(-90deg);
}

.collapsible-text__read-more {
  display: inline-block;
}

.custom-appearance-theme {
  background-color: var(--color-light-grey-9);
  margin-top: 25px;
  padding: 20px;
}
.custom-appearance-theme__body {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
@media (max-width: 81.24em) {
  .custom-appearance-theme__body {
    flex-direction: column;
  }
}
.custom-appearance-theme__fields {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}
.custom-appearance-theme__actions {
  margin-top: 20px;
}

.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  min-height: 100vh;
}
.coming-soon_theme_green .coming-soon__icon {
  background-image: url("/assets/images/themes/green/icons/timer.svg");
}
.coming-soon_theme_green .coming-soon__title {
  color: #1297AC;
}

@media (max-width: 47.99em) {
  .coming-soon__content {
    padding: 0 20px;
  }
}
@media (max-width: 63.99em) {
  .coming-soon__content {
    padding: 0 50px;
  }
}

.coming-soon__icon {
  background: url("/assets/images/themes/blue/icons/timer.svg") center center no-repeat;
  background-size: 100% 100%;
  width: 81px;
  height: 95px;
}

.coming-soon__icon-container {
  display: flex;
  justify-content: center;
}

.coming-soon__description {
  text-align: center;
  margin-top: 20px;
  max-width: 800px;
}

.coming-soon__title {
  text-align: center;
  font-size: 50px;
  margin-top: 30px;
  color: #034FA8;
  font-weight: lighter;
}

.coming-soon__button {
  min-width: 170px;
}

.coming-soon__button-container {
  width: 100%;
  display: flex;
  margin-top: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.coming-soon__center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.coming-soon__footer {
  flex-shrink: 0;
  padding-bottom: 32px;
  text-align: center;
}

.coming-soon__contact {
  margin: 40px 0 30px;
  text-transform: uppercase;
  cursor: pointer;
  color: #034FA8;
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  text-decoration: underline;
}

.coming-soon__powered-by {
  position: absolute;
  bottom: 22px;
  left: 23px;
}

/**
 * The compare plans page - plan added dialog.
 *
 * @block compare-plan-added
 */
.compare-plan-added {
  display: block;
}

/**
 * @element card
 */
.compare-plan-added__card {
  background-color: #FFF;
  border: 1px solid rgba(18, 151, 172, 0.19);
  padding: 0 14px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

/**
 * The compare plans page - add plan dialog.
 *
 * @block compare-linked-plans
 */
.compare-linked-plans {
  display: block;
}

/**
 * @element card
 */
.compare-linked-plans__card {
  background-color: #FFF;
  border: 1px solid rgba(18, 151, 172, 0.19);
  padding: 0 14px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

/**
 * @element plans
 */
.compare-linked-plans__plans {
  background-color: #FFF;
  border-left: 1px solid #C7D7D7;
  border-right: 1px solid #C7D7D7;
}

/**
 * The plan card, used in the compare page.
 *
 * 1. Overlay is positioned absolute wrt it.
 *
 * @block compare-plans-card
 */
.compare-plans-card {
  width: 280px;
  height: 130px;
  background-color: #FFF;
  padding: 0 15px;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative; /* 1 */
  /**
   * @modifier is-dragged
   */
}
.compare-plans-card_is-dragged {
  background-color: rgba(0, 0, 0, 0.03);
}

/**
 * @element overlay
 */
.compare-plans-card__overlay {
  cursor: move;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/**
 * @element header
 */
.compare-plans-card__header {
  height: 30px;
  display: flex;
  align-items: center;
}

/**
 * @element header-selected
 */
.compare-plans-card__header-selected {
  display: flex;
  align-items: center;
  font-weight: 300;
  font-style: italic;
  font-size: 13px;
}
.compare-plans-card__header-selected::before {
  content: "";
  margin-right: 5px;
  width: 11px;
  height: 11px;
  background: url("/assets/images/icons/check.svg") center no-repeat;
}

/**
 * @block compare-plans-column
 */
.compare-plans-column {
  width: 272px;
  margin-right: 14px;
  background-color: #FFF;
  box-sizing: border-box;
  position: relative;
  /**
   * @modifier not is-empty
   */
  /**
   * @modifier can-drop
   */
  /**
   * Adds white overlay when dropping card.
   *
   * @modifier can-drop and not is-empty
   */
}
.compare-plans-column:last-child {
  margin-right: 0;
}
.compare-plans-column:not(.compare-plans-column_is-empty) {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.compare-plans-column_can-drop {
  background-color: rgba(0, 0, 0, 0.03);
}
.compare-plans-column_can-drop:not(.compare-plans-column_is-empty):after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #FFF;
  opacity: 0.8;
}

/**
 * @element header
 */
.compare-plans-column__header {
  padding-top: 14px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * @element empty
 */
.compare-plans-column__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

/**
 * @element empty-icon
 */
.compare-plans-column__empty-icon {
  width: 43px;
  height: 51px;
  background: var(--svg-compare-empty) center no-repeat;
  margin-bottom: 15px;
}

/**
 * @element empty-text
 */
.compare-plans-column__empty-text {
  max-width: 200px;
}

/**
 * @element header-top-icons
 */
.compare-plans-column__header-top-icons {
  height: 28px;
  padding: 0 14px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
}

/**
 * @element header-remove
 */
.compare-plans-column__header-remove {
  width: 11px;
  height: 11px;
  background: url("/assets/images/icons/x-sign-clear.svg");
}

/**
 * @element header-card
 */
.compare-plans-column__header-card {
  flex: 1;
  padding: 0 14px;
}

/**
 * @element header-button
 */
.compare-plans-column__header-button {
  background-color: var(--main-color);
  color: #FFF;
  height: 35px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  /**
   * @modifier theme
   * @value disabled
   */
  /**
   * @modifier theme
   * @value remove
   */
}
.compare-plans-column__header-button_theme_disabled {
  background-color: #B0A7A8;
}
.compare-plans-column__header-button_theme_remove {
  background-color: var(--color-red);
}

/**
 * @element is-initial-state
 */
.compare-plans-column_is-initial-state {
  opacity: 0.5;
  background-color: transparent;
}

/**
 * @element is-initial-state is-empty
 */
.compare-plans-column_is-initial-state, .compare-plans-column_is-empty {
  border-color: var(--main-color);
  border-style: dashed;
  border-width: 0 1px 1px;
}

/**
 * @modifier is-header
 */
.compare-plans-column_is-header {
  height: 180px;
  border-width: 1px 1px 0;
}

/**
 * The cells in the columns in the compare plans page.
 *
 * @block compare-plans-cell
 */
.compare-plans-cell {
  box-sizing: border-box;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  min-height: 45px;
  width: 272px;
  /**
   * @modifier is-title
   */
  /**
   * @modifier is-plan-memo-title
   */
}
.compare-plans-cell:nth-child(2n+1) {
  background-color: #EFEFEF;
}
.compare-plans-cell_is-title {
  width: 190px;
}
@media (max-width: 81.24em) {
  .compare-plans-cell_is-title {
    width: 150px;
  }
}
.compare-plans-cell_is-plan-memo-title {
  border-left: solid 4px #D57F73;
}

/**
 * The compare plans page.
 *
 * @block compare-plans
 */
.compare-plans {
  max-width: 1392px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  padding: 25px 30px 0 30px;
  box-sizing: border-box;
  position: relative;
}

/**
 * @element left
 */
.compare-plans__left {
  display: flex;
  flex-direction: column;
}

/**
 * @element left-title
 */
.compare-plans__left-title {
  height: 55px;
  width: 218px;
  flex-shrink: 0;
}

/**
 * @element left-plan-list
 */
.compare-plans__left-plan-list {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  overflow: auto;
  width: 100%;
  flex: 1;
  background-color: #FFF;
}

/**
 * @element center
 */
.compare-plans__center {
  margin-left: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/**
 * @element center-header
 */
.compare-plans__center-header {
  height: 55px;
}

/**
 * @element compare-plans-card
 */
.compare-plans__compare-plans-card {
  border-bottom: 1px solid var(--main-color-light-29);
}

/**
 * 1. For the scroll to appear in Firefox.
 *
 * @element center-compare
 */
.compare-plans__center-compare {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 1 */
}

/**
 * @element compare-top
 */
.compare-plans__compare-top {
  display: flex;
}

/**
 * @element compare-bottom
 */
.compare-plans__compare-bottom {
  overflow: auto;
  flex: 1;
  display: flex;
}

/**
 * 1. https://stackoverflow.com/a/21541021/5301678
 *
 * @element title-list
 */
.compare-plans__title-list {
  transform: translateY(-2px);
  width: 190px;
  min-height: -moz-min-content;
  min-height: min-content; /* 1 */
}
@media (max-width: 81.24em) {
  .compare-plans__title-list {
    width: 150px;
  }
}

/**
 * element plans-selected
 */
.compare-plans__plans-selected {
  width: 190px;
  box-sizing: border-box;
  padding-top: 20px;
  padding-left: 15px;
  font-family: "Montserrat", sans-serif;
}
@media (max-width: 81.24em) {
  .compare-plans__plans-selected {
    width: 150px;
  }
}

/**
 * @element plans-selected-number
 */
.compare-plans__plans-selected-number {
  color: var(--main-color);
  font-size: 25px;
}

/**
 * @element plans-selected-text
 */
.compare-plans__plans-selected-text {
  font-size: 10px;
  text-transform: uppercase;
}

/**
 * 1. We position the initial empty state wrt to it.
 *
 * @element columns
 */
.compare-plans__columns {
  position: relative;
  display: flex;
}

/**
 * @element center-disclaimer
 */
.compare-plans__center-disclaimer {
  color: #B0A7A8;
  padding-top: 20px;
  height: 110px;
  box-sizing: border-box;
  margin-left: 15px;
  font-size: 13px;
}

/**
 * @element empty
 */
.compare-plans__empty {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 500px;
  height: 80%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

/**
 * @element empty-icon
 */
.compare-plans__empty-icon {
  flex-shrink: 0;
  width: 100%;
  height: 87px;
  background: var(--svg-compare-empty) center no-repeat;
}

/**
 * @element empty-title
 */
.compare-plans__empty-title {
  color: var(--main-color);
  font-size: 30px;
  font-weight: 300;
}

.compare-plans__unavailable {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding-top: 100px;
  text-align: center;
  background-color: #F8F8F8;
}

/**
 * The fixed contact form that's available on all pages.
 * Usually minimized at the bottom right of the page. If you click it
 * it will expand.
 *
 * @modifier contact-form
 */
.contact-form {
  display: block;
}

/**
 * 1. Greater than the modal overlay
 * 2. Minimized
 *
 * @element box
 */
.contact-form__box {
  position: fixed;
  z-index: 13; /* 1 */
  bottom: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--color-white);
}
@media (max-width: 47.99em) {
  .contact-form__box {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: none;
  }
}
@media (min-width: 48em) {
  .contact-form__box {
    right: 25px;
    display: flex;
    height: 590px;
    width: 450px;
    max-height: 100%;
    transform: translateY(100%); /* 2 */
    transition: all 167ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  }
}

/**
 * @element header
 */
.contact-form__header {
  background: var(--main-color);
  color: var(--color-white);
  padding: 0 20px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.contact-form:not(.contact-form_is-open) .contact-form__header:hover {
  background-color: var(--main-color-dark);
}

/**
 * @element header-top
 */
.contact-form__header-top {
  height: 35px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/**
 * @element title
 */
.contact-form__title {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
}

/**
 * @element close
 */
.contact-form__close {
  font-size: 0;
  width: 23px;
  height: 23px;
  position: absolute;
  right: 15px;
  top: 6px;
  background: var(--svg-x-sign-white) center center no-repeat;
  background-size: 10px 10px;
  transition: transform linear 200ms;
  display: none;
  border-radius: 5px;
}
.contact-form__close:hover {
  background-color: var(--contact-form-close-hover-background-color);
  transform: scale(1.1);
}
.contact-form__close:active {
  opacity: 0.6;
}

/**
 * @element description
 */
.contact-form__description {
  animation: contact-form--display-none 167ms linear; /* 1 */
  visibility: hidden;
  font-size: 13px;
  padding-bottom: 15px;
  text-align: left;
  box-sizing: border-box;
}
@media (min-width: 48em) {
  .contact-form__description {
    width: 450px; /* Avoid flickering on open during animation */
  }
}

/**
 * 1. This animation is needed so that we delay the disappearing of the form's contact
 * while it's minimizing (because minimizing happens via a transition).
 *
 * @element content
 */
.contact-form__content {
  animation: contact-form--display-none 167ms linear; /* 1 */
  visibility: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  box-sizing: border-box;
}

/**
 * 1. input blocks take 1 extra pixel for border animation. This avoids
 * a horizontal overflow.
 *
 * @element field
 */
.contact-form__field {
  position: relative;
  width: calc(100% - 1px); /* 1 */
  /**
   * 1. So it fits the super long placeholder. Firefox textareas don't expand in
   * height to fill the placeholder.
   *
   * @modifier type
   * @value message
   */
}
.contact-form__field_type_message {
  flex: 1;
  min-height: 130px; /* 1 */
}

.contact-form__textarea-block {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: calc(100% - 1px);
}

.contact-form__field-message {
  padding: 0 12px 10px;
  color: #B0A7A8;
  font-size: 12px;
  display: flex;
}

.contact-form__textarea-label {
  display: flex;
  color: #1297AC;
  text-transform: uppercase;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  padding: 15px 26px 5px;
}

.contact-form__textarea-field {
  min-height: 90px;
  margin-bottom: 5px;
  flex: 1;
}

/**
 * @element input
 */
.contact-form__textarea-input {
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  -webkit-appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  background: #FFF;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 27px;
  padding-right: 5px;
  color: var(--color-dark-grey-2);
  font-size: 14px;
  resize: none;
}

/**
 * @element footer
 */
.contact-form__footer {
  padding: 10px;
  background: var(--contact-form-footer-background);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--color-white);
}

/**
 * @modifier is-authenticated
 */
@media (min-width: 48em) {
  .contact-form_is-authenticated .contact-form__box {
    height: 500px;
  }
}

@media (min-width: 64em) {
  /**
   * 1. We do not do translateY(calc(100% - 35px);
   * since calc in translations do not work in IE.
   *
   * @modifier is-header-visible-desktop
   */
  .contact-form_is-header-visible-desktop .contact-form__box {
    transform: translateY(100%) translateY(-35px); /* 1 */
    width: 150px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  /**
   * 1. We do not do translateY(calc(100% - 35px);
   * since calc in translations do not work in IE.
   *
   * @modifier -s-header-visible-tablet
   */
  .contact-form_is-header-visible-tablet .contact-form__box {
    transform: translateY(100%) translateY(-35px); /* 1 */
    width: 150px;
  }
}
/**
 * @modifier is-open
 */
@media (max-width: 47.99em) {
  .contact-form_is-open .contact-form__box {
    display: flex;
  }
}
@media (min-width: 48em) {
  .contact-form_is-open .contact-form__box {
    width: 450px;
    transform: translateY(0);
  }
}
.contact-form_is-open .contact-form__close {
  display: block;
}
.contact-form_is-open .contact-form__content,
.contact-form_is-open .contact-form__description {
  visibility: visible;
  animation: none;
}

/**
 * When the width does not change, no need to hide text.
 */
.contact-form_is-open.contact-form_is-header-visible-desktop {
  /**
   * 1. This animation is needed so that we delay the appearance of the footer text.
   *
   * @element footer
   */
}
@media (min-width: 48em) {
  .contact-form_is-open.contact-form_is-header-visible-desktop .contact-form__footer {
    animation: contact-form--hide-text 167ms linear; /* 1 */
  }
}

.contact-form_is-custom.contact-form_is-authenticated .contact-form__box {
  height: auto;
  background-color: var(--main-color-dark);
}
.contact-form_is-custom.contact-form_is-authenticated .contact-form__contact {
  background-color: var(--main-color-dark);
  color: var(--color-white);
  font-size: 13px;
  padding: 10px 15px;
}
.contact-form_is-custom.contact-form_is-authenticated .contact-form__contact-name {
  font-weight: bold;
  margin-bottom: 3px;
}
.contact-form_is-custom.contact-form_is-authenticated .contact-form__contact-email {
  margin-top: 3px;
  text-decoration: underline;
}

@keyframes contact-form--display-none {
  0% {
    visibility: visible;
  }
}
@keyframes contact-form--hide-text {
  0% {
    color: transparent;
  }
  99% {
    color: transparent;
  }
  100% {
    color: var(--color-white);
  }
}
/**
 * The company profile information page
 *
 * @block company-profile
 */
.company-profile {
  width: 100%;
}

/**
 * @element section
 */
.company-profile__section {
  margin-bottom: 30px;
}

/**
 * @element box
 */
.company-profile__box {
  background-color: #FFF;
  border: solid 0.5px var(--main-color-light-29);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

/**
 * @element grid
 */
.company-profile__grid {
  padding: 10px 0;
  position: relative;
}

.company-profile__grid-fixed-action {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1;
}

/**
 * @element empty-state
 */
.company-profile__empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /**
   * @modifier type
   * @value group-contact
   */
}
.company-profile__empty-state_type_group-contact {
  height: 235px;
}

/**
 * @element empty-state-icon
 */
.company-profile__empty-state-icon {
  width: 58px;
  height: 69px;
  margin-bottom: 25px;
  background: var(--svg-empty-contact) center no-repeat;
}

/**
 * @element empty-state-title
 */
.company-profile__empty-state-title {
  font-size: 30px;
  font-weight: 300;
  color: var(--main-color);
  text-align: center;
  padding: 0 10px;
  line-height: 24px;
  margin-bottom: 10px;
}

/**
 * @element empty-state-description
 */
.company-profile__empty-state-description {
  text-align: center;
  padding: 0 10px;
  font-size: 14px;
}

@media (min-width: 31.25em) and (max-width: 47.99em) {
  /**
   * @element empty-state
   */
  .company-profile__empty-state {
    /**
     * @modifier type
     * @value group-contact
     */
  }
  .company-profile__empty-state_type_group-contact {
    height: 180px;
  }
  /**
   * @element empty-state-icon
   */
  .company-profile__empty-state-icon {
    margin-bottom: 15px;
  }
  /**
   * @element empty-state-title
   */
  .company-profile__empty-state-title {
    margin-bottom: 5px;
  }
}
.company-profile-section {
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
  background-color: #FFF;
}

.company-profile-section__header {
  height: 60px;
  display: flex;
  align-items: center;
  padding-left: 15px;
  background-color: #EBEBEB;
  font-size: 18px;
}
.company-profile-section__header:before {
  content: "";
  margin-right: 15px;
}
.company-profile-section__header_type_broker-house:before {
  background: url("/assets/images/icons/building.svg") center no-repeat;
  width: 12px;
  height: 15px;
}
.company-profile-section__header_type_broker-contact:before {
  background: url("/assets/images/icons/contact.svg") center no-repeat;
  width: 16px;
  height: 19px;
}
.company-profile-section__header_type_group-contact:before {
  background: url("/assets/images/icons/contact.svg") center no-repeat;
  width: 16px;
  height: 19px;
}
.company-profile-section__header_type_additional-information:before {
  background: url("/assets/images/icons/extra-info.svg") center no-repeat;
  width: 16px;
  height: 19px;
}

.company-profile-section__header-right {
  padding-right: 20px;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.company-profile-section__card {
  background-color: #FFF;
  border-bottom: 0.5px solid #CBDADA;
}
.company-profile-section__card_side-padding_15 {
  padding-left: 15px;
  padding-right: 15px;
}
.company-profile-section__card:last-child {
  border-bottom: none;
}

.company-profile-section__additional-information {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-row-gap: 30px;
  grid-column-gap: 10px;
  padding: 20px 15px;
}
@media (max-width: 63.99em) {
  .company-profile-section__additional-information {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 47.99em) {
  .company-profile-section__additional-information {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contribution-strategy-card {
  background-color: white;
  padding: 20px;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 20px;
  border: solid 1px #C8D8D8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contribution-strategy-card_padding_10_20 {
  padding: 10px 20px;
}
.contribution-strategy-card_background-color_grey {
  background: #F8F8F8;
}

.contribution-strategy-card__header {
  margin-top: 15px;
}
.contribution-strategy-card__header_margin-top_10 {
  margin-top: 10px;
}

.contribution-strategy-card__radio-buttons-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contribution-strategy-card__radio-buttons-container_gap_15 {
  gap: 15px;
}

.contribution-strategy-card__radio-button {
  display: flex;
  gap: 10px;
}

.contribution-strategy-card__title {
  font-weight: 600;
}

.contribution-strategy-card__field-box-description {
  margin-bottom: 20px;
  margin-top: 10px;
  font-size: 14px;
}
.contribution-strategy-card__field-box-description_no-margin-top {
  margin-top: 0;
}
.contribution-strategy-card__field-box-description_font-size_16 {
  font-size: 16px;
}

.contribution-strategy-card__field-box-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .contribution-strategy-card__field-box-inputs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 47.99em) {
  .contribution-strategy-card__field-box-inputs {
    grid-template-columns: repeat(1, 1fr);
  }
}

.contribution-strategy-card__employer-plans {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contribution-strategy-card__members {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contribution-strategy-card__container {
  padding: 15px 10px;
  background-color: #F8F8F8;
}
.contribution-strategy-card__container_margin-top_10 {
  margin-top: 10px;
}

.contribution-strategy-card__employer-plan {
  display: flex;
  align-items: center;
  height: 36px;
  margin-bottom: 20px;
}

.contribution-strategy-card__employer-plan-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contribution-strategy-workflow-summary {
  display: flex;
  background-color: white;
  flex-direction: column;
  border: solid 1px #C8D8D8;
}

.contribution-strategy-workflow-summary__edit {
  display: flex;
  align-items: center;
  color: #1297AC;
  font-size: 14px;
  background: url("/assets/images/icons/edit.svg") left center no-repeat;
  background-size: 9px 9px;
  padding-left: 13px;
  font-weight: 600;
  cursor: pointer;
  /**
   * @modifier is-loading
   */
}
.contribution-strategy-workflow-summary__edit:not(.contribution-strategy-workflow-summary__edit_is-loading):hover {
  opacity: 0.7;
  color: #0D7383;
}
.contribution-strategy-workflow-summary__edit:active {
  color: #1297AC;
}
.contribution-strategy-workflow-summary__edit_is-loading {
  cursor: default;
  opacity: 0.5;
}

.contribution-strategy-workflow-summary__header {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: solid 1px #C8D8D8;
}

.contribution-strategy-workflow-summary__amounts {
  background-color: #F8F8F8;
  padding: 15px 10px;
  margin-top: 20px;
}

.contribution-strategy-workflow-summary__title {
  font-weight: 700;
  font-size: 16px;
}

.contribution-strategy-workflow-summary__content {
  padding: 20px 15px;
}

.contribution-strategy-workflow-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-left: 10px;
}
.contribution-strategy-workflow-summary__grid_display_flex {
  display: flex;
}
.contribution-strategy-workflow-summary__grid_grid-column_span-2 {
  grid-column: span 2;
}

.contribution-strategy-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.contribution-strategy__header-action {
  height: 60px;
  width: 88px;
  background-color: #F3F3F3;
}
.contribution-strategy__header-action_width_50 {
  width: 50px;
}

.contribution-strategy__regular-search {
  width: 290px;
  height: 59px;
  background-color: #FFF;
}

.contribution-strategy__animated-search {
  height: 59px;
  width: 68px;
}

.contribution-strategy__sort-menu {
  height: 59px;
  width: 88px;
}

.contribution-strategy__table {
  display: flex;
  flex-direction: column;
  background-color: #F8F8F8;
  position: relative;
  overflow-y: hidden;
  flex: 1;
}

.contribution-strategy__table-body {
  flex: 1;
  box-sizing: border-box;
  z-index: 0;
}

.contribution-strategy__table-header {
  background-color: #FFF;
  display: flex;
  height: 20px;
  justify-content: space-between;
  padding: 10px 12px 10px 0;
}

.contribution-strategy__no-strategy-cell {
  display: flex;
  align-items: center;
  height: 100%;
  font-style: italic;
  color: #5E5E5E;
  font-size: 14px;
  background-color: #FFF;
}

.contribution-strategy__class-header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #EAEAEA;
  box-sizing: border-box;
  position: sticky;
  height: 40px;
  top: 42px;
  z-index: 4;
}
@media (max-width: 47.99em) {
  .contribution-strategy__class-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: 70px;
  }
}

.contribution-strategy__info-card {
  padding: 20px;
  background-color: white;
  margin: 24px 20px;
  border: solid 1px #C8D8D8;
}

.contribution-strategy__edit {
  font-size: 14px;
  color: #1297AC;
  background-image: url("/assets/images/themes/blue/icons/pencil.svg");
}

.contribution-strategy__view-plans {
  overflow: hidden;
}

.contribution-strategy__view-plans-table {
  /* to account for the header heights */
  max-height: calc(100vh - 160px);
}

/**
 * 1. For the background color to cover the entire number.
 */
.count-indicator {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: normal;
  border-radius: 6.5px;
  color: white;
  background: #D57F73;
  min-width: 7px;
  height: 13px;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  text-align: center;
  padding: 0 4px; /* 1 */
}
.count-indicator_margin-left_5 {
  margin-left: 5px;
}

/**
 * Represents a coverage by logo, carrier name, plan name.
 * Used in the benefit dialogs in the benefit form.
 *
 * @block coverage-card
 */
.coverage-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}
@media (min-width: 48em) {
  .coverage-card {
    flex-direction: row;
  }
}

/**
 * @element logo
 */
.coverage-card__logo {
  width: 100px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
@media (min-width: 48em) {
  .coverage-card__logo {
    margin-bottom: 0;
    margin-right: 35px;
  }
}

/**
 * @element img
 */
.coverage-card__img {
  width: 100%;
}

/**
 * @element info-content
 */
.coverage-card__info-content {
  flex: 1;
}

/**
 * @element carrier-name
 */
.coverage-card__carrier-name {
  color: #5C5050;
  font-size: 16px;
  font-weight: bold;
}

/**
 * @element plan
 */
.coverage-card__plan {
  color: #5C5050;
  font-size: 16px;
}

.coverage-type {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
}
.coverage-type_font-weight_semi-bold {
  font-weight: 600;
}
.coverage-type_text-transform_capitalize {
  text-transform: capitalize;
}
.coverage-type_font-size_16 {
  font-size: 16px;
}
.coverage-type_font-size_18 {
  font-size: 18px;
}

.coverage-type__icon {
  height: 11px;
  width: 11px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

/**
 * @block custom-checkbox
 *
 * custom-checkbox
 * |-original-input
 * |-label
 * |--label-custom-input
*/
.custom-checkbox {
  position: relative;
  height: 100%;
  display: flex;
}
.custom-checkbox_full-width {
  width: 100%;
}
.custom-checkbox_display_inline {
  display: inline-flex;
}
.custom-checkbox_min-width_140 {
  min-width: 140px;
}

/**
 * @element label
 */
.custom-checkbox__label {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: none;
  color: #55524F;
  /**
   * @modifier has-padding
   * @for label
   */
  /**
   * Needed when we have a multiple line label and we want to align the checkbox
   * with the top of the first line instead of getting it to be centered in the middle
   * of the lines.
   *
   * @for label
   */
}
.custom-checkbox__label_has-padding {
  padding: 0 8px 0 12px;
}
.custom-checkbox__label_align-items_flex-start {
  align-items: flex-start;
}
.custom-checkbox__label_margin-top_2 {
  margin-top: 2px;
}
.custom-checkbox__label_font-weight_semi-bold {
  font-weight: 600;
}
.custom-checkbox__label_color_dark-grey-2 {
  color: var(--color-grey-2);
}
.custom-checkbox__label:hover .custom-checkbox__label-custom-input, .custom-checkbox__label:focus .custom-checkbox__label-custom-input {
  box-shadow: 0 0 5px var(--main-color-contrast-2);
  border: solid thin var(--custom-checkbox-label-custom-input-hover-border-color);
}
.custom-checkbox__label_is-not-centered {
  align-items: baseline;
}
.custom-checkbox__label_font-size_14 {
  font-size: 14px;
}
.custom-checkbox__label_font-size_16 {
  font-size: 16px;
}
.custom-checkbox__label_margin-bottom_10 {
  margin-bottom: 10px;
}
.custom-checkbox__label_color_grey {
  color: #5E5E5E;
}
.custom-checkbox__label_color_dark-grey {
  color: #494949;
}

.custom-checkbox__label-custom-input {
  position: relative;
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  margin-right: 10px;
  flex-shrink: 0;
  border-radius: 2px;
  border: solid thin #B0A7A8;
  transition: all 200ms linear;
  /**
   * @for label-custom-input
   */
}
.custom-checkbox__label-custom-input:after {
  position: absolute;
  width: 80%;
  height: 100%;
  content: "";
  left: 50%;
  transform: translateX(-50%);
}
.custom-checkbox__label-custom-input_is-error {
  border-color: var(--color-red);
}
.custom-checkbox__label-custom-input_margin-right_0 {
  margin-right: 0;
}
.custom-checkbox__label-custom-input_is-grey-disabled {
  background-color: var(--color-light-grey-9);
  border-color: var(--color-light-grey-10);
}

.custom-checkbox__label-yield {
  flex: 1;
}

.custom-checkbox_is-checked .custom-checkbox__label .custom-checkbox__label-custom-input {
  background: var(--main-color);
  border-color: var(--main-color);
}
.custom-checkbox_is-checked .custom-checkbox__label .custom-checkbox__label-custom-input:after {
  background: url("/assets/images/icons/tick.svg") center center no-repeat;
}

.custom-checkbox_is-intermediate .custom-checkbox__label .custom-checkbox__label-custom-input {
  background: var(--main-color);
  border-color: var(--main-color);
}
.custom-checkbox_is-intermediate .custom-checkbox__label .custom-checkbox__label-custom-input:after {
  background: url("/assets/images/icons/line.svg") center center no-repeat;
}

/**
 * @modifier color
 * @value red
 */
.custom-checkbox_color_red .custom-checkbox__label {
  color: var(--color-red);
}
.custom-checkbox_color_red .custom-checkbox__label:hover .custom-checkbox__label-custom-input {
  box-shadow: 0 0 5px #FFF;
}
.custom-checkbox_color_red .custom-checkbox__label .custom-checkbox__label-custom-input {
  border-color: var(--color-red);
}

.custom-checkbox_color_red.custom-checkbox_is-checked .custom-checkbox__label .custom-checkbox__label-custom-input {
  background: var(--color-red);
  border-color: var(--color-red);
}
.custom-checkbox_color_red.custom-checkbox_is-checked .custom-checkbox__label .custom-checkbox__label-custom-input:after {
  background: url("/assets/images/icons/tick-red.svg") center center no-repeat;
}

/**
 * @modifier color
 * @value white
 */
.custom-checkbox_color_white .custom-checkbox__label {
  color: #FFF;
}
.custom-checkbox_color_white .custom-checkbox__label:hover .custom-checkbox__label-custom-input {
  box-shadow: 0 0 5px #FFF;
}
.custom-checkbox_color_white .custom-checkbox__label .custom-checkbox__label-custom-input {
  border-color: #FFF;
}
.custom-checkbox_color_white .custom-checkbox__label .custom-checkbox__label-custom-input_color_red {
  background: var(--color-red);
}

.custom-checkbox__label-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--main-color);
}

.custom-checkbox__label-comment {
  font-size: 14px;
  font-style: italic;
  color: #9B9B9B;
}

.custom-checkbox_color_white.custom-checkbox_is-checked .custom-checkbox__label .custom-checkbox__label-custom-input {
  background: #FFF;
  border-color: #FFF;
}
.custom-checkbox_color_white.custom-checkbox_is-checked .custom-checkbox__label .custom-checkbox__label-custom-input:after {
  background: url("/assets/images/icons/tick-white.svg") center center no-repeat;
}

/**
 * @modifier size
 * @value large
 */
.custom-checkbox_size_large .custom-checkbox__label-custom-input {
  width: 17px;
  height: 17px;
}

.custom-checkbox_height_auto {
  height: auto;
}

/**
 * A green check used instead of the custom input when the checkbox is always "selected" and
 * therefore read-only.
 *
 * @element label-check
 */
.custom-checkbox__label-check {
  width: 13px;
  height: 13px;
  margin-right: 10px;
  display: inline-block;
  border: none;
  background: var(--svg-check) center center no-repeat;
  background-size: 100% 100%;
}
.custom-checkbox__label-check:after {
  display: none;
}

/**
 * Just empty space where the checkbox box should've been. (Used for cases
 * where we don't want to show the box input).
 *
 * @element filler
 */
.custom-checkbox__filler {
  width: 13px;
  height: 13px;
  margin-right: 10px;
}

.custom-checkbox__box-container_margin-top_2 {
  margin-top: 2px;
}

/**
 * When the checkbox is disabled.
 *
 * @modifier is-disabled
 */
.custom-checkbox_is-disabled {
  pointer-events: none;
}
.custom-checkbox_is-disabled .custom-checkbox__label .custom-checkbox__label-custom-input {
  border-color: #D8D8D8;
}
.custom-checkbox_is-disabled.custom-checkbox_is-checked .custom-checkbox__label .custom-checkbox__label-custom-input {
  background-color: #D8D8D8;
}
.custom-checkbox_is-disabled.custom-checkbox_is-intermediate .custom-checkbox__label .custom-checkbox__label-custom-input {
  background-color: #D8D8D8;
}

/**
 * @modifier theme
 * @value large
 */
.custom-checkbox_theme_large .custom-checkbox__label-custom-input {
  width: 17px;
  height: 18px;
  margin-right: 15px;
}

/**
 * We should always use this modifier for new checkboxes, as
 * we are trying to faze out the old implementation. This is a temporary solution
 * until the below TODO is completed.
 *
 * TODO: Change all the checkboxes to this new style.
 */
.custom-checkbox_is-new-style {
  height: auto;
}
.custom-checkbox_is-new-style .custom-checkbox__label {
  align-items: flex-start;
}

/**
 * @block custom-radio
 *
 * custom-radio
 * |-original-input
 * |-label
 * |--label-custom-input
*/
.custom-radio {
  position: relative;
  display: flex;
  outline: none;
  /**
   * Color border on focus, to facilitate keyboard navigation
   */
  /**
   * @modifier is-checked
   */
  /**
   * When the radio is disabled.
   *
   * @modifier is-disabled
   */
}
.custom-radio:focus .custom-radio__label-custom-input {
  border: 2px solid;
  border-color: var(--main-border-color-4);
  box-shadow: var(--custom-radio-label-custom-input-hover-box-shadow);
}
.custom-radio_is-checked .custom-radio__label-custom-input:after {
  opacity: 1;
}
.custom-radio_is-disabled {
  pointer-events: none;
}
.custom-radio_is-disabled .custom-radio__label-custom-input {
  background-color: #D8D8D8;
  border: none;
}
.custom-radio_is-readonly {
  pointer-events: none;
}
.custom-radio_is-readonly .custom-radio__label-custom-input {
  border-color: #9B9B9B;
}
.custom-radio_is-inline {
  display: inline-flex;
}
.custom-radio_color_dark-grey .custom-radio__container {
  color: #494949;
}

.custom-radio_is-readonly.custom-radio_is-checked {
  pointer-events: none;
}
.custom-radio_is-readonly.custom-radio_is-checked .custom-radio__label-custom-input:after {
  background: #9B9B9B;
}

/**
 * @element container
 */
.custom-radio__container {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  color: #5C5050;
}
.custom-radio__container:hover {
  cursor: pointer;
}
.custom-radio__container:hover .custom-radio__label-custom-input {
  box-shadow: 0 0 5px var(--main-color-contrast);
}
.custom-radio__container_cursor_pointer {
  cursor: pointer;
}

.custom-radio__container_display_grid {
  display: grid;
  grid-template-rows: 2fr;
  grid-template-columns: auto 1fr;
  grid-template-areas: "input label" ".     description";
}

.custom-radio__grid-cell_area_radio {
  grid-area: input;
}

.custom-radio__grid-cell_area_label {
  grid-area: label;
}

.custom-radio__grid-cell_area_description {
  grid-area: description;
}

.custom-radio__label {
  font-size: 14px;
  color: var(--main-color);
  font-weight: 700;
}
.custom-radio__label_margin-bottom_5 {
  margin-bottom: 5px;
}
.custom-radio__label_font-size_16 {
  font-size: 16px;
}
.custom-radio__label_weight_600 {
  font-weight: 600;
}

.custom-radio__label_color_darker-grey {
  color: #4A4A4A;
}

.custom-radio__description {
  font-size: 14px;
  font-weight: 400;
}

/**
 * @element label-custom-input
 */
.custom-radio__label-custom-input {
  position: relative;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  margin-right: 10px;
  flex-shrink: 0;
  border-radius: 6px;
  border: solid 1px var(--main-border-color-5);
  transition: all 200ms linear;
}
.custom-radio__label-custom-input:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 8px;
  height: 8px;
  background: var(--main-color);
  border-radius: 4px;
  opacity: 0;
  transition: opacity 200ms linear;
}
.custom-radio__label-custom-input_border_grey {
  border: solid thin #C1C1C1;
}

/**
 * @element label-yield
 */
.custom-radio__label-yield {
  display: block;
}

.custom-radio_fill-width .custom-radio__container {
  flex: 1;
}
.custom-radio_fill-width .custom-radio__label-yield {
  flex: 1;
}

.custom-radio_is-box {
  box-sizing: border-box;
  padding: 8px;
  min-height: 70px;
  background-color: white;
  border: 1px solid var(--main-color-light-15);
}
.custom-radio_is-box .custom-radio__container {
  cursor: pointer;
}

.custom-radio_border-color_main {
  border: 1px solid var(--main-color);
}

/**
 * The dashboard activity stream box
 *
 * @block dashboard-activity
 */
.dashboard-activity {
  overflow: hidden;
  height: 387px;
  transition: height 300ms ease;
  display: flex;
}

/**
 * 1. Safari only: A height should be explicitly set in order for the
 * child to have a percentage height.
 *
 * @element content
 */
.dashboard-activity__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: transform 400ms ease;
  height: 100%; /* [1] */
}

/**
 * Used for firefox.
 *
 * @element card
 */
.dashboard-activity__card {
  width: 100%;
}

/**
 * @element empty
 */
.dashboard-activity__empty {
  height: calc(100% - 50px);
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #1297AC;
  font-size: 14px;
}

/**
 * @element empty-icon-list
 */
.dashboard-activity__empty-icon-list {
  display: flex;
  width: 80%;
  height: 15px;
  margin-bottom: 11px;
  justify-content: space-around;
  background: url("/assets/images/icons/activity-icons.svg") center no-repeat;
}
@media screen and (max-width: 390.9px) {
  .dashboard-activity__empty-icon-list {
    width: 90%;
  }
}

@media screen and (min-width: 440px) {
  /**
   * @block dashboard-activity
   */
  .dashboard-activity {
    height: 352px;
  }
}
@media screen and (min-width: 768px) and (max-width: 900.9px) {
  /**
   * @block dashboard-activity
   */
  .dashboard-activity {
    height: 387px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1140.9px) {
  /**
   * @block dashboard-activity
   */
  .dashboard-activity {
    height: 387px;
  }
}
/**
 * The dashboard alerts box.
 *
 * @block dashboard-alerts
 */
.dashboard-alerts {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dashboard-alerts > .liquid-container {
  display: flex;
  flex-direction: column;
}
.dashboard-alerts > .liquid-container > .liquid-child {
  display: flex;
  flex-direction: column;
}

/**
 * @element subtitle
 */
.dashboard-alerts__subtitle {
  min-height: 25px;
  padding: 0 13px 5px;
  box-sizing: border-box;
  font-size: 13px;
  color: #B0A7A8;
}

/**
 * 1. Takes into account number of alerts and borders.
 *
 * @element container
 */
.dashboard-alerts__container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 321px; /* [1] */
}
.dashboard-alerts__container_justify-content_space-between {
  justify-content: space-between;
}

/**
 * Needed to wrap the cards in order to use `:last-child`.
 *
 * @element cards
 */
.dashboard-alerts__cards {
  flex-shrink: 0;
}

/**
 * Small card that contains a summary of the alert.
 *
 * 1. Remove bottom border from last card
 *
 * @element card
 */
.dashboard-alerts__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 54px;
  padding: 0 13px;
  border-top: solid 0.5px transparent;
  border-bottom: solid 0.5px var(--main-color-light-4);
  /**
   * @modifier is-loading
   */
}
.dashboard-alerts__card:hover:not(.dashboard-alerts__card_is-loading) {
  background-color: var(--main-color-light-18);
}
.dashboard-alerts__card:active:not(.dashboard-alerts__card_is-loading) {
  background-color: var(--main-color-light-5);
}
.dashboard-alerts__card:first-child {
  border-top-color: var(--main-color-light-4);
}
.dashboard-alerts__card:last-child {
  border-bottom-color: transparent; /* [1] */
}
.dashboard-alerts__card_is-loading:before, .dashboard-alerts__card_is-loading:after {
  content: "";
  width: 112px;
  height: 10px;
  border-radius: 5px;
  margin: 3px 0;
  background-color: #EAEAEA;
}

/**
 * @element card-big-title
 */
.dashboard-alerts__card-big-title {
  color: #5C5050;
  font-size: 14px;
  font-weight: bold;
}

/**
 * @element card-title
 */
.dashboard-alerts__card-title {
  color: #B0A7A8;
  font-size: 13px;
}

/**
 * The element containing the full alert.
 *
 * @element alert-content
 */
.dashboard-alerts__alert-content {
  overflow: auto;
  border-top: solid 0.5px var(--main-color-light-4);
}
@media (min-width: 48em) {
  .dashboard-alerts__alert-content {
    max-height: 390px;
  }
}

/**
 * Wrapper inside the container when displaying the cards. Needed to make
 * the inner part scrollable when height too small.
 *
 * @element content
 */
.dashboard-alerts__content {
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dashboard-alerts__content_is_centered {
  justify-content: center;
  align-items: center;
}
@media (min-width: 48em) {
  .dashboard-alerts__content {
    max-height: 390px;
  }
}

/**
 * @element alert-title
 */
.dashboard-alerts__alert-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 42px;
  padding: 0 14px;
  font-size: 13px;
  color: #B0A7A8;
}

/**
 * @element alert-summary
 */
.dashboard-alerts__alert-summary {
  padding: 0 14px;
  color: #5C5050;
  font-size: 16px;
  font-weight: bold;
}

/**
 * 1. Remove the top margin of the first element inside the memo since
 * we don't have control of the html content.
 *
 * @element alert-memo
 */
.dashboard-alerts__alert-memo {
  padding: 16px 14px 14px;
  font-size: 13px;
  color: #5C5050;
}
.dashboard-alerts__alert-memo > *:first-child {
  margin-top: 0; /* [1] */
}
.dashboard-alerts__alert-memo p {
  margin-bottom: 8px;
}

/**
 * @element alert-buttons
 */
.dashboard-alerts__alert-buttons {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 10px 20px;
  border-top: solid 0.5px var(--main-color-light-4);
}

/**
 * @element empty
 */
.dashboard-alerts__empty {
  margin-bottom: 50px;
  font-size: 13px;
  color: var(--main-color);
}

/**
 * 1. Take into account the bottom border of the card that we don't have here.
 *
 * @element bottom-action
 */
.dashboard-alerts__bottom-action {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px; /* [1] */
  flex-shrink: 0;
  border-top: solid 0.5px var(--main-color-light-4);
  color: #B0A7A8;
  font-size: 14px;
}
.dashboard-alerts__bottom-action:hover {
  color: #5C5050;
  background-color: var(--main-color-light-18);
}
.dashboard-alerts__bottom-action:active {
  color: #B0A7A8;
  background-color: var(--main-color-light-5);
}

/**
 * The billing box content in the dashboard.
 *
 * @block dashboard-billing
 */
.dashboard-billing {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 18px 35px;
  overflow: hidden;
  transition: height 300ms ease, padding 300ms ease;
  /**
   * @modifier has-go-green
   */
}
.dashboard-billing_has-go-green {
  height: 224px;
  padding-bottom: 18px;
}
@media (min-width: 86.875em) {
  .dashboard-billing_has-go-green {
    height: 211px;
  }
}
.dashboard-billing_padding_0 {
  padding: 0;
}
.dashboard-billing_height_257 {
  height: 257px;
}
.dashboard-billing_height_329 {
  height: 329px;
}

/**
 * @element title
 */
.dashboard-billing__title {
  font-size: 13px;
  text-align: center;
  color: #5C5050;
  /**
   * @modifier is-loading
   */
  /**
   * @modifier type
   * @value info
   */
}
.dashboard-billing__title_is-loading {
  width: 112px;
  height: 10px;
  border-radius: 5px;
  background-color: #EAEAEA;
  margin: 0 auto;
}
.dashboard-billing__title_type_info {
  color: var(--main-color);
}

/**
 * @element amount
 */
.dashboard-billing__amount {
  font-size: 33px;
  margin-top: 6px;
  color: var(--main-color);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  /**
   * @modifier is-loading
   */
}
.dashboard-billing__amount_is-loading {
  width: 167px;
  height: 18px;
  border-radius: 9px;
  margin: 10px auto 10px;
  background-color: #EFF4F5;
}

/**
 * Element containing the go green message. Since the go green state can
 * change after clicking the refresh button, we remove the element by fading
 * it out and setting max-height to 0.
 *
 * @element info
 */
.dashboard-billing__info {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-radius: 5px;
  padding: 8px;
  box-sizing: border-box;
  height: 127px;
  opacity: 1;
  overflow: hidden;
  max-height: 200px;
  text-align: center;
  background-color: #EFEFEF;
  transition: all 300ms ease;
  /**
   * @modifier is-hidden
   */
}
@media (min-width: 86.875em) {
  .dashboard-billing__info {
    height: 114px;
  }
}
.dashboard-billing__info_is-hidden {
  opacity: 0;
  max-height: 0;
  padding: 0;
}

/**
 * 1. Push button down
 *
 * @element info-text
 */
.dashboard-billing__info-text {
  flex: 1; /* [1] */
  font-size: 13px;
  color: var(--main-color-dark);
}
.dashboard-billing__info-text b {
  font-weight: bold;
}

.dashboard-billing__steps_has-margin-top {
  margin-top: 15px;
}

.dashboard-billing__content {
  transition: transform 400ms ease;
}

.dashboard-billing__empty {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: var(--main-color);
}

/**
 * Custom widget box found in ER and ESS dashboards.
 *
 * @block dashboard-custom-widget
 */
.dashboard-custom-widget {
  padding: 0 13px 20px;
}

.dashboard-custom-widget__content {
  font-size: 13px;
  font-weight: normal;
  color: var(--color-dark-grey-2);
}

/**
 * The dashboard self service invites box.
 *
 * @block dashboard-invites
 */
.dashboard-invites {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7px 0 17px;
  height: 265px;
}

/**
 * @element section
 */
.dashboard-invites__section {
  padding: 0 14px;
}

/**
 * @element bar-container
 */
.dashboard-invites__bar-container {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background-color: #EFEFEF;
}

/**
 * @element bar
 */
.dashboard-invites__bar {
  height: 100%;
  border-radius: 4px;
  width: 0;
  transition: width 300ms ease;
  /**
   * 1. Over-write the width set in the template
   *
   * @modifier is-loading
   */
}
.dashboard-invites__bar_is-loading {
  /* stylelint-disable declaration-no-important  */
  width: 0 !important; /* [1] */
  /* stylelint-enable declaration-no-important  */
}

/**
 * @element bar-text
 */
.dashboard-invites__bar-text {
  height: 24px;
  line-height: 24px;
  visibility: visible;
  font-size: 13px;
  color: #5C5050;
  /**
   * @modifier is-loading
   */
}
.dashboard-invites__bar-text_is-loading {
  visibility: hidden;
}

/**
 * The dashboard reports queue box
 *
 * @block dashboard-reports
 */
.dashboard-reports {
  height: 234px;
  display: flex;
  flex-direction: column;
}

/**
 * @element window
 */
.dashboard-reports__window {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/**
 * @element content
 */
.dashboard-reports__content {
  transition: transform 400ms ease;
}

/**
 * @element description
 */
.dashboard-reports__description {
  height: 26px;
  padding-left: 13px;
  z-index: 1;
  flex-shrink: 0;
  color: #B0A7A8;
  font-size: 13px;
  border-bottom: solid 1px var(--main-color-light-7);
}

/**
 * @element empty
 */
.dashboard-reports__empty {
  height: calc(100% - 45px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: var(--main-color);
}

@media screen and (max-width: 384.9px) {
  /**
   * @element description
   */
  .dashboard-reports__description {
    height: 36px;
    margin-top: -10px;
  }
}
/**
 * The small expandanble tile displayed in the dashboard.
 *
 * @block dashboard-tiles
 */
.dashboard-tiles {
  width: calc(100% + 13px);
}
.dashboard-tiles:after {
  clear: both;
  display: block;
  content: "";
  width: 100%;
}

/**
 * @element tile
 */
.dashboard-tiles__tile {
  position: relative;
  float: left;
  width: calc(50% - 13px);
  margin-right: 13px;
  box-sizing: border-box;
  margin-bottom: 13px;
  background: #FFF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: all 0.2s ease;
  /**
   * @modifier is-clickable
   */
}
@media (min-width: 81.25em) {
  .dashboard-tiles__tile {
    width: calc(33.33% - 13px);
  }
}
.dashboard-tiles__tile:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.dashboard-tiles__tile_is-clickable {
  cursor: pointer;
}

/**
 * @element tile-header
 */
.dashboard-tiles__tile-header {
  display: flex;
  height: 84px;
}

/**
 * @element tile-icon
 */
.dashboard-tiles__tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  flex-shrink: 0;
  background: #97A3C1;
}
.dashboard-tiles__tile-icon img {
  max-height: 60px;
  max-width: 60px;
}

/**
 * 1. vh is not supported on mobile.
 *
 * @element tile-content
 */
.dashboard-tiles__tile-content {
  padding: 10px;
  overflow: auto;
  box-sizing: border-box;
  max-height: calc(100vh - 84px);
  font-size: 13px;
  color: #5C5050;
}
@media (max-width: 47.99em) {
  .dashboard-tiles__tile-content {
    max-height: calc(100% - 84px); /* 1 */
  }
}

/**
 * 1. Needed so that Firefox Hack works.
 *
 * @element tile-text
 */
.dashboard-tiles__tile-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0 5px;
  overflow: hidden; /* 1 */
}

/**
 * 1. HACK: Firefox does not break words when element has
 * display flex, or width/max-width are as a percentage. So we
 * trick firefox using calc.
 */
.dashboard-tiles__tile-text-content {
  text-align: center;
  font-size: 13px;
  color: #5C5050;
  -webkit-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
  max-width: calc(100% - 1px); /* 1 */
}

.delete-appearance-theme {
  width: 100%;
  color: #5C5050;
}
.delete-appearance-theme__container {
  background-color: #FFF;
  border: solid 1px var(--color-light-blue);
  margin-top: 20px;
  margin-bottom: 25px;
}
.delete-appearance-theme__content {
  padding: 12px 20px;
}

.delete-button {
  height: 10px;
  width: 10px;
  background: var(--svg-x-red) center center no-repeat;
  background-size: 10px 10px;
  cursor: pointer;
}
.delete-button:hover {
  opacity: 0.7;
}
.delete-button_margin-right_10 {
  margin-right: 10px;
}

/**
 * Used to display document we want to delete.
 *
 * @block delete-document
 */
.delete-document {
  width: 100%;
  color: #5C5050;
}

/**
 * @element check-text
 */
.delete-document__check-text {
  margin-bottom: 20px;
}

/**
 * @element info-table
 */
.delete-document__info-table {
  background-color: #FFF;
  border: solid 1px var(--color-light-blue);
  min-height: 50px;
  display: flex;
  margin-bottom: 25px;
}
@media (max-width: 47.99em) {
  .delete-document__info-table {
    flex-direction: column;
    min-height: 140px;
  }
}

/**
 * @element cell
 */
.delete-document__cell {
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
  flex: 1;
}
.delete-document__cell:first-child {
  border-bottom: solid 1px var(--color-light-blue);
}
@media (min-width: 48em) {
  .delete-document__cell:first-child {
    flex: 2;
    border-right: solid 1px var(--color-light-blue);
    border-bottom: none;
  }
}

/**
 * @element cell-title
 */
.delete-document__cell-title {
  font-weight: bold;
  margin-bottom: 5px;
  line-height: 20px;
}

/**
 * The detail page (next to the list). For example the view containing a single
 * employee.
 *
 * 1. No screen would fit the employee details for example so no point in
 * showing or hiding the scrollbar, as it would appear to be a glitch.
 *
 * @block detail-page
 */
.detail-page {
  background: #F4F4F4;
  height: 100%;
  overflow-y: scroll; /* 1 */
  box-sizing: border-box;
}

/**
 * @element note
 */
.detail-page__note {
  padding: 13px 23px;
  background: #D57F73;
  font-size: 13px;
  color: #FFF;
  flex-shrink: 0;
}

/**
 * @element note-title
 */
.detail-page__note-title {
  margin-bottom: 5px;
  font-weight: bold;
}

/**
 * Each block of content. Can be used several times in a details page.
 *
 * @element block
 */
.detail-page__block {
  background: #FFF;
}
@media (max-width: 81.24em) {
  .detail-page__block {
    margin-bottom: 30px;
    border-top: solid 1px var(--color-light-blue);
    border-bottom: solid 1px var(--color-light-blue);
  }
}
@media (min-width: 81.25em) {
  .detail-page__block {
    border: solid 1px var(--color-light-blue);
    margin: 35px 35px 0;
  }
  .detail-page__block:first-child {
    margin-top: 0;
  }
}
@media (max-width: 47.99em) {
  .detail-page__block:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 48em) {
  .detail-page__block {
    /**
     * Add space for the contact support.
     */
  }
  .detail-page__block:last-child {
    margin-bottom: 50px; /* 1 */
  }
}
.detail-page__block_no-border {
  border: 0;
}

/**
 * 1. Needs to match the `block` element margin.
 *
 * @element top-bar
 */
.detail-page__top-bar {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
@media (max-width: 81.24em) {
  .detail-page__top-bar {
    margin: 0 14px;
  }
}
@media (min-width: 81.25em) {
  .detail-page__top-bar {
    margin: 0 35px; /* 1 */
  }
}

/**
 * @element content
 */
.detail-page__content {
  box-sizing: border-box;
  /**
   * @modifier is-flex
   */
}
.detail-page__content_is-flex {
  display: flex;
}

/**
 * @element top-arrow
 */
.detail-page__top-arrow {
  height: 100%;
  width: 40px;
  background: url("/assets/images/icons/left-arrow.svg") left center no-repeat;
  background-size: 10px 18px;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

/**
 * @element top-status
 */
@media (min-width: 81.25em) {
  .detail-page__top-status {
    padding-right: 5px;
  }
}

/**
 * @element top-text
 */
.detail-page__top-text {
  padding-right: 10px;
}

/**
 * @modifier is-mobile-large
 */
@media (max-width: 47.99em) {
  .detail-page_is-mobile-large .detail-page__top-bar {
    height: 53px;
  }
  .detail-page_is-mobile-large .detail-page__content {
    height: calc(100% - 54px);
  }
}

/**
 * Needs `:not(.trix-editor__dialog)` since trix uses
 * the `.dialog` class in the code.
 *
 * @block dialog
 */
.dialog:not(.trix-editor__dialog) {
  border: solid 1px var(--main-color-light-4);
  max-height: 100%;
}

/**
 * 1. In case we're animating in liquid-fire, we don't want the modal borders
 * to show going through the header.
 *
 * @element header
 */
.dialog__header {
  padding-left: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  border-bottom: solid 1px var(--main-color-light-4);
  box-sizing: border-box;
  background-color: #FFF; /* 1 */
}
.dialog__header_is-borderless {
  border-bottom: medium none;
}
.dialog__header_height_70 {
  height: 70px;
}
.dialog__header_padding-left_10 {
  padding-left: 10px;
}
.dialog__header_padding-left_18 {
  padding-left: 18px;
}
@media (max-width: 47.99em) {
  .dialog__header_mobile-padding-left_15 {
    padding-left: 15px;
  }
}
.dialog__header_padding-left_15 {
  padding-left: 15px;
}
.dialog__header_background-color_grey {
  background-color: #F8F8F8;
}

/**
 * @element title
 */
.dialog__title {
  font-weight: bold;
}
.dialog__title_theme_blue {
  color: #034FA8;
}
.dialog__title_has-filter {
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 11px;
}
.dialog__title_has-filter::before {
  width: 11px;
  height: 10px;
  margin-right: 10px;
  content: "";
  display: inline-block;
  background: var(--svg-filter) center center no-repeat;
}
.dialog__title_font-weight_semi-bold {
  font-weight: 600;
}

/**
 * 1. For accessibility we write "close" inside the html element.
 *
 * @element close
 */
.dialog__close {
  font-size: 0; /* 1 */
  height: 40px;
  width: 40px;
  display: block;
  margin-right: 19px;
  background: url("/assets/images/icons/x-sign-clear.svg") center center no-repeat;
  background-size: 11px;
  border-radius: 5px;
  transition: transform linear 200ms;
}
.dialog__close:not(.dialog__close_is-disabled):hover {
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}
.dialog__close:not(.dialog__close_is-disabled):active {
  opacity: 0.7;
}
.dialog__close:not(.dialog__close_is-disabled):focus {
  opacity: 0.8;
}
.dialog__close_is-disabled {
  pointer-events: none;
  cursor: default;
  background-image: url("/assets/images/icons/x-sign-disabled.svg");
}

/**
 * @element body
 */
.dialog__body {
  box-sizing: border-box;
  padding: 20px 30px;
  max-height: calc(100vh - 120px);
  overflow: auto;
  background-color: #F8F8F8;
  /*
   * In the BankDetailForm component, when switching bank details,
   * we activate an animation that causes the horizontal scrollbar to appear.
   * We hide it using overflow-x.
   */
}
.dialog__body_padding-top_30 {
  padding-top: 30px;
}
.dialog__body_padding-bottom_30 {
  padding-bottom: 30px;
}
.dialog__body_padding-sides_20 {
  padding-left: 20px;
  padding-right: 20px;
}
.dialog__body_padding-sides_0 {
  padding-left: 0;
  padding-right: 0;
}
.dialog__body_padding-bottom_0 {
  padding-bottom: 0;
}
.dialog__body_padding_10 {
  padding: 10px;
}
.dialog__body_padding_15 {
  padding: 15px;
}
.dialog__body_padding_20 {
  padding: 20px;
}
.dialog__body_padding_0 {
  padding: 0;
}
.dialog__body_overflow-x_hidden {
  overflow-x: hidden;
}

/**
 * 1. In case we're animating in liquid-fire, we don't want the modal borders
 * to show going through the footer.
 *
 * @element footer
 */
.dialog__footer {
  padding: 0 30px;
  box-sizing: border-box;
  border-top: solid 1px var(--main-color-light-4);
  background-color: #FFF; /* 1 */
}
.dialog__footer_border-top_none {
  border-top: none;
}
.dialog__footer_padding-sides_18 {
  padding-right: 18px;
  padding-left: 18px;
}
.dialog__footer_padding-sides_20 {
  padding-left: 20px;
  padding-right: 20px;
}

.dialog__footer-row {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/**
 * @element action
 */
.dialog__action {
  color: #B0A7A8;
}

.dialog__grouped-actions {
  display: flex;
  gap: 20px;
}
@media (max-width: 47.99em) {
  .dialog__grouped-actions {
    flex: 1;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
}

.dialog__accept {
  display: flex;
}
@media (max-width: 47.99em) {
  .dialog__accept {
    height: 100%;
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: var(--main-color);
  }
}

/**
 * Highlighted message inside bordered red box.
 *
 * @element message
 */
.dialog__message {
  padding: 12px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #5C5050;
  border: solid thin rgba(213, 127, 115, 0.5);
  background: #F9EDEB;
}

.dialog__footer-checkbox {
  display: inline-block;
  margin-right: 20px;
}

.dialog__footer-checkbox-label {
  color: #5C5050;
}

/**
 * In case the previous element is a float (for example the error box).
 *
 * @element checkbox-container
 */
.dialog__checkbox-container {
  clear: both; /* 1 */
  margin: 10px 5px 0;
  /**
   * @modifier is-first
   */
}
.dialog__checkbox-container_is-first {
  margin-top: 20px;
}

/**
 * Styles for the checkbox label.
 *
 * @element checkbox-content
 */
.dialog__checkbox-content {
  color: #5C5050;
  font-size: 14px;
}

/**
 * Description for the checkbox.
 *
 * @element checkbox-description
 */
.dialog__checkbox-description {
  padding-left: 29px;
  padding-top: 10px;
  color: #5C5050;
  font-size: 13px;
}

@media (max-width: 47.99em) {
  /**
   * @block dialog
   */
  .dialog:not(.trix-editor__dialog) {
    border: none;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /**
   * @element body
   */
  .dialog__body {
    overflow: auto;
    flex: 1;
  }
  /**
   * @element footer
   */
  .dialog__footer {
    padding: 0;
  }
  /**
   * @element action
   */
  .dialog__action {
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.dialog_hide-actions .dialog__body {
  max-height: calc(100vh - 60px);
}

/**
 * @modifier is-form
 */
.dialog_is-form {
  /**
   * 1. To align the form with header and footer.
   * 5px is the padding given to the grid form.
   *
   * @element body
   */
}
.dialog_is-form .dialog__body {
  padding: 20px 25px; /* [1] */
}
.dialog_is-form .dialog__body_padding_10 {
  padding: 10px;
}
.dialog_is-form .dialog__body_padding-bottom_75 {
  padding-bottom: 75px;
}
@media (max-width: 47.99em) {
  .dialog_is-form .dialog__body_mobile-padding_0 {
    padding: 0;
  }
}

@media (max-width: 47.99em) {
  .dialog_mobile-padding_0 .dialog__body {
    padding: 0;
  }
}

.dialog_padding_0 .dialog__body {
  padding: 0;
}

.dialog_padding_18 .dialog__body {
  padding: 18px;
}

.dialog_side-padding_20 .dialog__header {
  padding-left: 20px;
}
.dialog_side-padding_20 .dialog__body, .dialog_side-padding_20 .dialog__footer {
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 47.99em) {
  .dialog_side-padding_20 .dialog__footer {
    padding-left: 0;
    padding-right: 0;
  }
}

/**
 * Removes padding and makes the body flex.
 *
 * @modifier is-full-form
 */
.dialog_is-full-form {
  /**
   * @element body
   */
}
.dialog_is-full-form .dialog__body {
  padding: 0;
  background-color: #F8F8F8;
  display: flex;
  flex-direction: column;
}
@media (min-width: 48em) {
  .dialog_is-full-form .dialog__body {
    max-height: calc(100vh - 200px); /* [1] */
  }
}
.dialog_is-full-form .dialog__body_padding_15 {
  padding: 15px;
}

/**
 * @modifier is-expanding-form
 */
.dialog_is-expanding-form {
  /**
   * 1. We account for the added margin bottom and top added to modal.
   *
   * @element body
   */
}
@media (min-width: 48em) {
  .dialog_is-expanding-form .dialog__body {
    max-height: calc(100vh - 200px); /* [1] */
  }
}

@media (min-width: 48em) {
  .dialog_has-tall-footer .dialog__body {
    max-height: calc(100vh - 320px); /* [1] */
  }
}

/**
 * Useful during width transitions. Nobody likes horizontal scrollbars during animations.
 */
.dialog_body-x-overflow_hidden .dialog__body {
  overflow-x: hidden;
}

.dialog_is-expanding-display .dialog__body {
  padding: 0;
}
@media (min-width: 48em) {
  .dialog_is-expanding-display .dialog__body {
    max-height: calc(100vh - 140px); /* [1] */
  }
}

/**
 * A common pattern in the app where there's a label on top
 * and a value below it.
 *
 * 1. Just to avoid scss lint error of an empty block.
 *
 * @block display-field
 */
.display-field {
  display: block; /* 1 */
  max-width: 100%;
}
.display-field_justify-content_center {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.display-field_height_full {
  height: 100%;
}

/**
 * @element label
 */
.display-field__label {
  display: flex;
  align-items: center;
  font-weight: normal;
  margin-bottom: 5px;
}
.display-field__label_no-margin-bottom {
  margin-bottom: 0;
}
.display-field__label_margin-bottom_10 {
  margin-bottom: 10px;
}
.display-field__label_justify-content_flex-end {
  justify-content: flex-end;
}
.display-field__label_width_120 {
  width: 120px;
}

/**
 * 1. Works in Chrome and Safari for wrapping long words but not in FF
 * 2. For browsers that support `overflow-wrap: anywhere` which only includes FF
 * at the time of writing, but will hopefully encompass more browsers in the future.
 */
.display-field__value {
  position: relative;
  overflow: hidden;
  overflow-wrap: break-word; /* 1 */
  overflow-wrap: anywhere; /* 2 */
}
.display-field__value_color_red {
  color: #D57F73;
}
.display-field__value_overflow_ellipsis {
  overflow-wrap: normal;
  text-overflow: ellipsis;
}
@media (min-width: 81.25em) {
  .display-field__value_from-desktop-text-overflow_ellipsis {
    overflow-wrap: normal;
    text-overflow: ellipsis;
  }
}
@media (min-width: 48em) {
  .display-field__value_from-tablet-text-overflow_ellipsis {
    overflow-wrap: normal;
    text-overflow: ellipsis;
  }
}
.display-field__value_color_light-grey {
  color: #CCCCCC;
}
.display-field__value_color_dark-grey {
  color: #5C5050;
}
.display-field__value_color_dark-grey-2 {
  color: var(--color-grey-2);
}
.display-field__value_color_black {
  color: #494949;
}
.display-field__value_text-align_right {
  text-align: right;
}
.display-field__value_is-flex-end-centered {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.display-field__value_text-transform_uppercase {
  text-transform: uppercase;
}
.display-field__value_font-size_14 {
  font-size: 14px;
}
.display-field__value_font-size_16 {
  font-size: 16px;
}
.display-field__value_font-weight_semi-bold {
  font-weight: 600;
}
.display-field__value_font-weight_bold {
  font-weight: bold;
}
.display-field__value_font-style_italic {
  font-style: italic;
}

.display-field__error-container {
  display: flex;
  justify-content: space-between;
}

.display-field__error {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.display-field__error-icon {
  height: 13px;
  width: 13px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/x-red-circle.svg");
  margin-right: 5px;
}

.display-field__error-title {
  text-align: center;
  color: #4A4A4A;
  font-size: 14px;
}

.display-field__edit-icon {
  width: 10px;
  height: 10px;
  margin-left: 7px;
  background: url("/assets/images/icons/pencil.svg") center no-repeat;
  background-size: 10px 10px;
  flex-shrink: 0;
  cursor: pointer;
}

/**
 * Adds an icon next to the value.
 *
 * @modifier icon
 * @value date
 */
.display-field_icon_date .display-field__value:before {
  content: "";
  display: inline-block;
  width: 12px;
  margin-right: 3px;
  height: 12px;
  background: url("/assets/images/icons/date.svg") left no-repeat;
  background-size: 12px 12px;
}

.display-field_icon_date-red .display-field__value:before {
  content: "";
  display: inline-block;
  width: 12px;
  margin-right: 3px;
  height: 12px;
  background: url("/assets/images/icons/date-red.svg") left no-repeat;
  background-size: 12px 12px;
}

.display-field_icon_date-light-grey .display-field__value:before {
  content: "";
  display: inline-block;
  width: 12px;
  margin-right: 3px;
  height: 12px;
  background: url("/assets/images/icons/date-light-grey.svg") left no-repeat;
  background-size: 12px 12px;
}

.display-field_icon_permission .display-field__value:before {
  content: "";
  display: inline-block;
  width: 12px;
  margin-right: 3px;
  height: 12px;
  background: url("/assets/images/icons/lock.svg") left no-repeat;
  background-size: 12px 12px;
}

/**
 * @modifier font
 * @value medium
 */
.display-field_font_medium .display-field__value {
  font-size: 14px;
}

/**
 * Just some spacing to make it look like `grid__cell`.
 */
.display-field_in-grid {
  padding: 15px 0;
}

.display-field_theme_blue.display-field_icon_date .display-field__value:before {
  background-image: url("/assets/images/themes/blue/icons/date.svg");
}

/**
 * @block document-form
 */
.document-form {
  display: block;
}

/**
 * 1. Side margin needs to match the grid cell is-form padding.
 *
 * @element content
 */
.document-form__content {
  margin: 0 5px; /* 1 */
}
.document-form__content_has-border-top {
  border-top: 1px solid var(--color-light-blue);
}
.document-form__content_margin-top_15 {
  margin-top: 15px;
}
.document-form__content_margin-bottom_25 {
  margin-bottom: 25px;
}

/**
 * @element add-another
 */
.document-form__add-another {
  padding-top: 10px;
}
.document-form__add-another_padding-bottom_10 {
  padding-bottom: 10px;
}
.document-form__add-another_has-border-bottom {
  border-bottom: solid 1px var(--color-light-blue);
}

/**
 * @element checkbox
 */
.document-form__checkbox {
  padding-top: 25px;
  font-size: 14px;
}

.document-form__link-checkbox {
  margin-bottom: 10px;
}
.document-form__link-checkbox:last-child {
  margin-bottom: 0;
}

.document-form__link-suggestions {
  flex: 1;
}
@media (max-width: 47.99em) {
  .document-form__link-suggestions {
    margin-bottom: 15px;
  }
}

.document-form__link-suggestions-container {
  display: flex;
}
@media (max-width: 47.99em) {
  .document-form__link-suggestions-container {
    flex-direction: column;
  }
}

.document-form_document-fields-container {
  border-bottom: solid 1px var(--color-light-blue);
}

.document-form__document-field-container {
  margin-bottom: 10px;
}

.document-form__button-container {
  display: flex;
  align-items: flex-end;
}
.document-form__button-container_justify-content_flex-end {
  justify-content: flex-end;
}
.document-form__button-container_margin-bottom_10 {
  margin-bottom: 10px;
}
.document-form__button-container_margin-top_10 {
  margin-top: 10px;
}

.document-form__category {
  margin-top: 15px;
}
.document-form__category_padding-bottom_10 {
  padding-bottom: 10px;
}

.document-form__category-title {
  color: #1297AC;
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.document-form__category-title_margin-bottom_0 {
  margin-bottom: 0;
}

.document-form__category-checkbox {
  display: flex;
  align-items: center;
  height: 30px;
}
.document-form__category-checkbox_height_auto {
  height: auto;
}
.document-form__category-checkbox_padding-top_5 {
  padding-top: 5px;
}
.document-form__category-checkbox_has-border-top {
  border-top: solid 1px var(--color-light-blue);
}
.document-form__category-checkbox_is-bold {
  font-weight: 600;
}
.document-form__category-checkbox_margin-bottom_5 {
  margin-bottom: 5px;
}

.document-form__category-checkbox-text {
  font-size: 14px;
  font-family: "Source Sans Pro", sans-serif;
}

.document-form__category-checkbox-description {
  font-size: 13px;
  font-style: italic;
  color: #95989A;
}

.document-form__smart-input {
  margin-top: 10px;
  margin-bottom: 10px;
}
.document-form__smart-input_margin-bottom_0 {
  margin-bottom: 0;
}

/**
 * @block dots-menu
 */
.dots-menu {
  height: 100%;
  position: relative;
}
.dots-menu_display_flex {
  display: flex;
  align-items: center;
}

/**
 * Holds the three dots icon
 *
 * @element trigger
 */
.dots-menu__trigger {
  height: 100%;
}
.dots-menu__trigger:hover {
  /**
   * @element icon
   */
}
.dots-menu__trigger:hover .dots-menu__icon {
  background-image: var(--svg-three-dots);
}

/**
 * @element icon
 */
.dots-menu__icon {
  position: absolute;
  top: 17px;
  right: 10px;
  content: "";
  height: 18px;
  width: 16px;
  background-image: url("/assets/images/icons/three-dots.svg");
  background-repeat: no-repeat;
  background-position: center;
  /**
   * @modifier location
   * @value modal
   */
  /**
   * @modifier location
   * @value trigger
   */
  /**
   * In order to preload the image so it does not glitch when we hover.
   */
}
.dots-menu__icon_location_modal {
  top: 10px;
  right: 4px;
  background-image: var(--svg-three-dots);
  animation: dots-menu__rotate-icon 200ms linear;
  transform: rotate(90deg);
}
.dots-menu__icon_location_trigger {
  transition: transform 200ms linear;
  transform: rotate(0deg);
}
.dots-menu__icon_theme_main-color {
  position: static;
  background-image: var(--svg-three-dots);
}
.dots-menu__icon_right_0 {
  right: 0;
}
.dots-menu__icon::after {
  background-image: var(--svg-three-dots);
  content: "";
}

/**
 * 1. The dots menu modal might overlap with a 3 dots trigger.
 *
 * @element modal
 */
.dots-menu__modal {
  position: absolute;
  top: 7px;
  right: 6px;
  width: 206px;
  z-index: 2; /* [1] */
  border-radius: 3px;
  background-color: #FFF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  animation: dots-menu__fade-in 300ms linear;
}
.dots-menu__modal_z-index_3 {
  z-index: 3;
}
.dots-menu__modal_width_130 {
  width: 130px;
}
.dots-menu__modal_right_0 {
  right: 0;
}
.dots-menu__modal_is-flipped {
  top: auto;
  bottom: 10px;
}
.dots-menu__modal_is-flipped .dots-menu__modal-header {
  position: absolute;
  bottom: 10px;
  right: 0;
  height: 25px;
}

/**
 * @element modal-header
 */
.dots-menu__modal-header {
  height: 42px;
  width: 40px;
  margin-left: auto;
  position: relative;
  cursor: pointer;
}

/**
 * @element modal-body
 */
.dots-menu__modal-body {
  margin-bottom: 10px;
}

/**
 * @element modal-link
 */
.dots-menu__modal-link {
  color: var(--main-color);
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  height: 30px;
  padding-left: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  /**
   * @modifier type
   * @value edit
   * @for row
   */
  /**
   * @modifier type
   * @value enrollment
   * @for row
   */
  /**
   * @modifier type
   * @value dependents
   */
  /**
   * @modifier type
   * @value manage-beneficiaries
   */
  /**
   * @modifier type
   * @value manage-benefits
   */
  /**
   * @modifier type
   * @value print
   */
  /**
   * @modifier type
   * @value terminated
   * @for row
   */
  /**
   * @modifier type
   * @value restore
   * @for modal-link
   */
}
.dots-menu__modal-link::before {
  width: 15px;
  margin-right: 10px;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.dots-menu__modal-link:hover {
  background-color: #EDEDED;
}
.dots-menu__modal-link_type_edit::before {
  content: "";
  background-image: var(--svg-edit);
  background-size: 9px 9px;
}
.dots-menu__modal-link_type_restore-dependent::before {
  content: "";
  background-image: var(--svg-restore-dependent);
}
.dots-menu__modal-link_type_enrollment::before {
  content: "";
  background-image: var(--svg-folder);
  background-size: 11px 9px;
}
.dots-menu__modal-link_type_dependents::before {
  content: "";
  background-image: var(--svg-employees);
  background-size: 14px 9px;
}
.dots-menu__modal-link_type_manage-beneficiaries::before {
  content: "";
  background-image: var(--svg-beneficiaries);
  background-size: 14px 9px;
}
.dots-menu__modal-link_type_manage-benefits::before {
  content: "";
  background-image: var(--svg-heart);
  background-size: 14px 9px;
}
.dots-menu__modal-link_type_print::before {
  content: "";
  background-image: var(--svg-print);
  background-size: 13px 12px;
}
.dots-menu__modal-link_type_add::before {
  content: "";
  background-image: var(--svg-plus);
  background-size: 7px 7px;
}
.dots-menu__modal-link_type_terminated {
  height: 100%;
  color: #D57F73;
  font-family: "Montserrat", sans-serif;
}
.dots-menu__modal-link_type_terminate {
  color: #D57F73;
}
.dots-menu__modal-link_type_terminate::before {
  content: "";
  background-image: var(--svg-x-red);
  background-size: 7px 7px;
}
.dots-menu__modal-link_type_restore::before {
  content: "";
  background-image: var(--svg-restore-employee);
  background-size: 11px 11px;
}
.dots-menu__modal-link_padding-left_0 {
  padding-left: 0;
}

/**
 * @element modal-footer
 */
.dots-menu__modal-footer {
  height: 44px;
  border-top: 1px solid #E5E5E5;
}

/**
 * @modifier is-open
 * @for dots-menu
 */
.dots-menu_is-open {
  /**
   * @modifier locaiton
   * @value trigger
   */
}
.dots-menu_is-open .dots-menu__icon_location_trigger {
  transform: rotate(90deg);
}

@keyframes dots-menu__fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes dots-menu__rotate-icon {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(90deg);
  }
}
/**
 * @block drop-down
 *
 * drop-down
 * |-input
 * |-search__action.search__action_type_reset
 * |-search__action.search__action_type_drop
 * |-content
 * |--options
 * |--shadow
*/
.drop-down {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  transition: background-color 300ms ease;
  /**
   * @modifier type
   * @value select
   */
  /**
   * @modifier is-open
   */
}
.drop-down_type_select {
  /**
   * @element header
   */
}
.drop-down_type_select .drop-down__header {
  cursor: pointer;
  border-right: solid 1px transparent;
  border-left: solid 1px transparent;
}
.drop-down_type_select .drop-down__header:hover {
  background-color: #DDDDDD;
}
.drop-down_is-open {
  /**
   * @element action
   */
  /**
   * @element header
   */
  /**
   * @modifier type
   * @value select
   * @for drop-down
   */
}
.drop-down_is-open .drop-down__action {
  transform: rotate(180deg);
}
.drop-down_is-open .drop-down__header:hover {
  background-color: transparent;
}
.drop-down_is-open.drop-down_type_select {
  background-color: white;
  /**
   * @element header
   */
  /**
   * @element options
   */
}
.drop-down_is-open.drop-down_type_select .drop-down__header {
  border-right-color: var(--main-color-light-29);
  border-left-color: var(--main-color-light-29);
}
.drop-down_is-open.drop-down_type_select .drop-down__options {
  border-right: solid 1px var(--main-color-light-29);
  border-left: solid 1px var(--main-color-light-29);
}

/**
 * 1. Needed in safari so the child `search-input` fills 100% of the height.
 *
 * @element header
 */
.drop-down__header {
  height: 100%; /* 1 */
  flex: 1;
  display: flex;
}

/**
 * @element input
 */
.drop-down__input {
  flex: 1;
  height: 100%; /* 1 */
}

/**
 * @element action
 */
.drop-down__action {
  height: 100%;
  width: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  transition: transform 0.1s linear;
  transform: rotate(0);
  /**
   * @modifier type
   * @value reset
   */
  /**
   * @modifier type
   * @value drop
   */
}
.drop-down__action_type_reset {
  background-size: 11px 11px;
  background-image: url("/assets/images/icons/x-sign-clear.svg");
}
.drop-down__action_type_drop {
  background-size: 12px 7px;
  background-image: url("/assets/images/icons/search-drop.svg");
}

/**
 * 1. Take into account the bottom border.
 *
 * @element content
 */
.drop-down__content {
  position: absolute;
  z-index: 2;
  top: calc(100% + 1px); /* 1 */
  left: 0;
  width: 100%;
  overflow: hidden;
  display: none;
}

/**
 * @element options
 */
.drop-down__options {
  list-style: none;
  display: block;
  margin: 0;
  padding: 10px 0;
  overflow: auto;
  box-sizing: border-box;
  background: #FFF;
  border-bottom: solid 1px var(--main-color-light-29);
}
.drop-down__options_no-border-bottom {
  border-bottom: none;
}

/**
 * @element shadow
 */
.drop-down__shadow {
  position: relative;
  height: 10px;
  overflow: hidden;
}
.drop-down__shadow:after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  box-shadow: 0 0 10px 0 #000;
}

/**
 * @element selected
 */
.drop-down__selected {
  flex: 1;
  display: flex;
  flex-direction: column;
  /**
   * @modifier direction
   * @value row
   */
}
.drop-down__selected_direction_row {
  flex-direction: row;
  align-items: center;
  /**
   * @element selected-label
   */
  /**
   * @element selected-value
   */
}
.drop-down__selected_direction_row .drop-down__selected-label {
  padding-top: 0;
  padding-left: 22px;
}
.drop-down__selected_direction_row .drop-down__selected-value {
  padding-bottom: 0;
}
.drop-down__selected_padding-top_10 {
  padding-top: 10px;
}
.drop-down__selected_padding-bottom_10 {
  padding-bottom: 10px;
}

/**
 * @element selected-label
 */
.drop-down__selected-label {
  height: 22px;
  display: flex;
  align-items: center;
  padding-top: 6px;
  padding-left: 14px;
  box-sizing: border-box;
}
.drop-down__selected-label_padding-top_0 {
  padding-top: 0;
}

/**
 * @element selected-value
 */
.drop-down__selected-value {
  flex: 1;
  display: flex;
  align-items: center;
  border-left: solid 1px transparent;
  font-size: 14px;
  color: #5C5050;
  padding-bottom: 3px;
}

/**
 * @element arrow
 */
.drop-down__arrow {
  width: 0;
  height: 0;
  margin: 0 10px;
  border-left: solid 4px transparent;
  border-right: solid 4px transparent;
  /**
   * @modifier side
   * @value up
   */
  /**
   * @modifier side
   * @value down
   */
  /**
   * @modifier color
   * @value grey
   */
}
.drop-down__arrow_side_up {
  border-bottom: solid 5px var(--main-color);
}
.drop-down__arrow_side_down {
  border-top: solid 5px var(--main-color);
}
.drop-down__arrow_color_grey {
  border-top-color: #5C5050;
  border-bottom-color: #5C5050;
}

/**
 * @element option
 */
.drop-down__option {
  display: flex;
  min-height: 40px;
  padding-left: 59px;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  color: #5C5050;
  /**
   * @modifier is-selected
   */
  /**
   * @modifier is-unpadded
   */
}
.drop-down__option:hover {
  background-color: #EDEDED;
}
.drop-down__option:active {
  background-color: #E2E0E0;
}
.drop-down__option_is-selected {
  background: var(--svg-tick) 20px center no-repeat;
  background-size: 15px 13px;
}
.drop-down__option_large-icon {
  padding-left: 67px;
}
.drop-down__option_large-icon.drop-down__option_is-selected {
  background: var(--svg-tick) 25px center no-repeat;
  background-size: 20px 22px;
}
.drop-down__option_is-unpadded {
  padding-left: 0;
}

/**
 * The filter takes over a section on the right of the dropdown.
 *
 * @modifier has-filter
 */
.drop-down_has-filter .drop-down__header {
  margin-right: 40px;
}

.dropdown-filter__option {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  animation: dropdown-filter--entry 600ms ease forwards;
}

.dropdown-filter__option-name {
  display: flex;
  align-items: center;
}

.dropdown-filter__option-label {
  font-size: 14px;
  margin-right: 10px;
}

.dropdown-filter__delete {
  font-size: 14px;
  color: #D57F73;
}

@keyframes dropdown-filter--entry {
  0% {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }
  100% {
    opacity: 1;
    max-height: 100px;
    overflow: visible;
  }
}
/**
 * The email-preferences preferences of the user.
 *
 * @block email-preferences
 */
.email-preferences {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #F6F6F6;
  color: #5C5050;
}

/**
 * @element header
 */
.email-preferences__header {
  display: flex;
  height: 65px;
  align-items: center;
  z-index: 1;
  padding: 0 32px;
  background-color: #FFF;
  border-bottom: 1px solid rgba(190, 193, 193, 0.46);
}

/**
 * 1. Allows burger menu to take full height.
 *
 * @element header-left-align
 */
.email-preferences__header-left-align {
  display: flex;
  flex: 1;
  height: 100%; /* 1 */
}

/**
 * @element header-title
 */
.email-preferences__header-title {
  display: flex;
  align-items: center;
  font-size: 20px;
}

/**
 * @element title
 */
.email-preferences__title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}
@media (max-width: 47.99em) {
  .email-preferences__title {
    text-align: center;
  }
}

/**
 * @element body
 */
.email-preferences__body {
  flex: 1;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .email-preferences__body {
    padding: 20px 20px 0;
  }
}
@media (min-width: 81.25em) {
  .email-preferences__body {
    padding: 40px 60px 0;
  }
}

/**
 * @element body-content
 */
.email-preferences__body-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  min-height: 520px;
  position: relative;
}

/**
 * @element box-description
 */
.email-preferences__box-description {
  min-height: 46px;
  font-size: 16px;
}

/**
 * @element checkbox-container
 */
.email-preferences__checkbox-container {
  width: 100%;
}

/**
 * @element checkbox-row
 */
.email-preferences__checkbox-row {
  height: 42px;
  font-weight: bold;
  display: flex;
  align-items: center;
  border-bottom: solid 1px #5C5050;
}
.email-preferences__checkbox-row:last-child {
  border-bottom: none;
}

/**
 * @element checkbox-right-align
 */
.email-preferences__checkbox-right-align {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 53.74em) {
  /**
   * @element body-content
   */
  .email-preferences__body-content {
    flex-direction: column;
    min-height: 715px;
    padding: 0;
    align-items: center;
  }
  /**
   * @element box-description
   */
  .email-preferences__box-description {
    margin-bottom: 20px;
  }
}
@media (max-width: 31.24em) {
  /**
   * @element body
   */
  .email-preferences__body {
    padding: 0;
  }
  /**
   * @element body-content
   */
  .email-preferences__body-content {
    min-height: 100%;
  }
}
@media (min-width: 96.875em) {
  /**
   * @element body-content
   */
  .email-preferences__body-content {
    width: 1200px;
  }
}
/**
 * @element box
 */
.email-preferences__box {
  background-color: #FFF;
  padding: 34px 23px;
}
@media (min-width: 81.25em) {
  .email-preferences__box {
    padding: 34px 43px;
  }
}
@media (max-width: 47.99em) {
  .email-preferences__box {
    margin-bottom: 0;
    padding: 25px 17px;
  }
}

.dashboard-balance-box {
  padding: 15px;
}

.dashboard-balance-box__buttons {
  display: flex;
  margin-bottom: 5px;
  justify-content: center;
}
@media (max-width: 31.24em) {
  .dashboard-balance-box__buttons {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 31.24em) {
  .dashboard-balance-box__button:not(:last-child) {
    margin-bottom: 10px;
  }
}
@media (min-width: 31.25em) {
  .dashboard-balance-box__button:not(:last-child) {
    margin-right: 10px;
  }
}
.dashboard-balance-box__button:only-child {
  width: 50%;
  min-width: 200px;
}

.dashboard-balance-box__description {
  font-size: 14px;
  margin-bottom: 15px;
}

/**
 * Employee summary (name and status), used to display one employee in the
 * employee list.
 *
 * @block employee-card
 */
.employee-card {
  height: 80px;
  display: flex;
  justify-content: center;
  transition: width 0.3s ease;
  flex-direction: column;
  /**
   * Increases height for dependent name to fit at the bottom.
   *
   * @modifier has-dependent
   */
}
.employee-card:hover:not(.employee-card_loading), .employee-card:focus {
  background-color: var(--main-color-light-18);
  outline: none;
}
.employee-card_active:not(.employee-card_loading), .employee-card_active:hover:not(.employee-card_loading) {
  background-color: var(--main-color-light-5);
}
.employee-card_has-dependent {
  height: 100px;
}
.employee-card_status_active::before {
  background-color: #83C244;
}
.employee-card_status_pending::before {
  background-color: #F4A50D;
}
.employee-card_status_terminated::before {
  background-color: #D0021B;
}
.employee-card_is-collapsed {
  align-items: center;
  height: 49px;
  flex-direction: row;
  gap: 3px;
}
.employee-card_is-collapsed::before {
  height: 5px;
  width: 5px;
  content: "";
  margin-left: 10px;
  border-radius: 100%;
}

/**
 * @element content
 */
.employee-card__content {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
}
.employee-card__content_padding-left_20 {
  padding-left: 20px;
}
.employee-card__content_padding-right_60 {
  padding-right: 60px;
}

/**
 * The employee's initials in an avatar-like colored circle.
 *
 * @element initials
 */
.employee-card__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
}

.employee-card__info {
  font-family: "Source Sans Pro", sans-serif;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
.employee-card__info_width_60p {
  width: 60%;
}

/**
 * @property name
 */
.employee-card__name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  color: #494949;
}

.employee-card__ssn {
  font-size: 14px;
  flex: 1;
  color: #494949;
}

/**
 * @property dependent
 */
.employee-card__dependent {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 26px;
  padding-left: 78px;
  color: var(--main-color);
  font-size: 13px;
  font-weight: bold;
  background: rgba(246, 246, 246, 0.55) var(--svg-employees-clear) 30px center no-repeat;
  background-size: 16px 10px;
}

.employee-card__dependent-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 5px;
}

/**
 * The employee's status.
 * Could be active, pending, terminated.
 *
 * @element status
 */
.employee-card__status {
  position: absolute;
  top: 5px;
  right: 11px;
}

.employee-card__status-cobra,
.employee-card__status-retiree {
  position: absolute;
  top: 52px;
  right: 11px;
}
.employee-card__status-cobra_right_66,
.employee-card__status-retiree_right_66 {
  right: 66px;
}

/**
 * Employee summary (name and status), used to display one employee in the
 * employee list.
 *
 * @block employee-checkbox
 */
.employee-checkbox {
  height: 80px;
  display: flex;
  flex-direction: column;
  /**
   * @modifier size
   * @value small
   */
}
.employee-checkbox:hover, .employee-checkbox:focus {
  background-color: #F2F6F7;
  outline: none;
}
.employee-checkbox_active, .employee-checkbox_active:hover {
  background-color: #E3ECEE;
}
.employee-checkbox_size_small {
  height: 60px;
}

/**
 * @element content
 */
.employee-checkbox__content {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  padding-left: 35px;
}

/**
 * @property name
 */
.employee-checkbox__name {
  margin-left: 10px;
  font-size: 15px;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
}

/**
 * @property ssn
 */
.employee-checkbox__ssn {
  margin-left: 10px;
  font-size: 16px;
  color: #5C5050;
}

/**
 * The employee's status.
 * Could be active, pending, terminated.
 *
 * @element status
 */
.employee-checkbox__status {
  position: absolute;
  top: 16px;
  right: 28px;
}

/**
 * A card reprenting an empty state of an employee property/relationship.
 *
 * @block employee-empty-state
 */
.employee-empty-state {
  height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.employee-empty-state_has-border-bottom {
  border-bottom: 1px solid #C7D7D7;
}

/**
 * @element icon
 */
.employee-empty-state__icon {
  display: flex;
  height: 60px;
  width: 100px;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  /**
   * @modifier type
   * @value dependents
   */
  /**
   * @modifier type
   * @value benefits
   */
  /**
   * @modifier type
   * @value beneficiaries
   */
  /**
   * @modifier type
   * @value documents
   */
}
.employee-empty-state__icon_type_dependents {
  background-size: 64px 41px;
  background-image: url("/assets/images/icons/dependents-faded.svg");
}
.employee-empty-state__icon_type_benefits {
  background-size: 65px 49px;
  background-image: url("/assets/images/icons/two-hearts.svg");
}
.employee-empty-state__icon_type_beneficiaries {
  background-size: 69px 37px;
  background-image: url("/assets/images/icons/two-hands.svg");
}
.employee-empty-state__icon_type_documents {
  background-size: 57px 52px;
  background-image: url("/assets/images/icons/two-documents.svg");
}

/**
 * @element text
 */
.employee-empty-state__text {
  color: #5C5050;
  font-size: 16px;
  height: 50px;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

/**
 * @block employee-initial-step
 */
.employee-initial-step {
  display: block;
}

/**
 * @element mini-card
 */
.employee-initial-step__mini-card {
  margin: 0 5px;
}

/**
 * @element restore-text
 */
.employee-initial-step__restore-text {
  font-size: 14px;
  margin: 0 5px 10px;
}
@media (max-width: 47.99em) {
  .employee-initial-step__restore-text {
    margin: 10px;
  }
}

.employee-proxy-banner {
  display: flex;
  background-color: #EAEAEA;
  box-sizing: border-box;
  padding: 12px 35px 12px 9px;
}
@media (max-width: 74.99em) {
  .employee-proxy-banner {
    display: grid;
    align-items: start;
    grid-template-columns: 1fr 22fr;
    padding: 12px;
  }
}
@media (min-width: 75em) and (max-width: 81.24em) {
  .employee-proxy-banner {
    padding-right: 20px;
  }
}

.employee-proxy-banner__eye {
  width: 19px;
  height: 13px;
  background: var(--svg-eye) left center no-repeat;
  background-size: 17px;
  padding-right: 12px;
  margin-top: 3px;
}
@media (max-width: 74.99em) {
  .employee-proxy-banner__eye {
    padding-right: 8px;
  }
}

.employee-proxy-banner__title {
  margin-right: 40px;
  color: #5E5E5E;
  font-size: 13px;
  font-style: italic;
}
@media (max-width: 74.99em) {
  .employee-proxy-banner__title {
    margin-right: 0;
  }
}
@media (min-width: 75em) and (max-width: 81.24em) {
  .employee-proxy-banner__title {
    margin-right: 25px;
  }
}

.employee-proxy-banner__link {
  margin-left: auto;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--main-color);
}
@media (max-width: 74.99em) {
  .employee-proxy-banner__link {
    margin: 10px 0 0;
    grid-area: 2/2;
  }
}
.employee-proxy-banner__link:hover {
  color: var(--main-color-dark);
  text-decoration: underline;
}

.employee-proxy-banner__arrow {
  height: 10px;
  width: 15px;
  background: var(--svg-right-arrow) right center no-repeat;
}
@media (min-width: 75em) and (max-width: 81.24em) {
  .employee-proxy-banner__arrow {
    margin-left: 2px;
  }
}

.re-enroll-member-form {
  display: block;
}

.re-enroll-member-form__mini-card {
  margin-bottom: 30px;
}
@media (max-width: 47.99em) {
  .re-enroll-member-form__mini-card {
    margin-top: 15px;
  }
}

.re-enroll-member-form__methods {
  margin-bottom: 20px;
}
@media (max-width: 47.99em) {
  .re-enroll-member-form__methods {
    padding: 0 10px;
  }
}

.re-enroll-member-form__methods-title {
  color: #1297AC;
  font-size: 10px;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-family: "Montserrat", sans-serif;
}
@media (max-width: 47.99em) {
  .re-enroll-member-form__methods-title_mobile-margin-top_20 {
    margin-top: 20px;
  }
}

.re-enroll-member-form__methods-radio {
  margin-bottom: 12px;
}

@media (max-width: 47.99em) {
  .re-enroll-member-form__fields {
    padding: 0 15px 20px;
  }
}

.re-enroll-member-form__undo-termination-fields {
  padding: 0 5px 5px 5px;
}

.re-enroll-member-form__restore-text {
  font-size: 14px;
  margin: 0 5px 10px;
}
@media (max-width: 47.99em) {
  .re-enroll-member-form__restore-text {
    margin: 10px;
  }
}

.post-payment-adjustment__field-title {
  color: #1297AC;
  font-size: 10px;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-family: "Montserrat", sans-serif;
}

.post-payment-adjustment__field-radio {
  font-size: 16px;
  margin-bottom: 8px;
}

.post-payment-adjustment__field-textarea {
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  -webkit-appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  background: #FFF;
  resize: none;
  width: 100%;
  height: 60px;
  font-size: 14px;
  padding: 10px;
  vertical-align: top;
}
.post-payment-adjustment__field-textarea::-moz-placeholder {
  color: var(--color-light-grey-6);
  font-size: 14px;
  opacity: 1;
}
.post-payment-adjustment__field-textarea::placeholder {
  color: var(--color-light-grey-6);
  font-size: 14px;
  opacity: 1;
}
.post-payment-adjustment__field-textarea:focus {
  border-color: #056B7A;
}
@media (max-width: 47.99em) {
  .post-payment-adjustment__field-textarea {
    height: 120px;
  }
}

.post-payment-adjustment__bills-title {
  margin-top: 18px;
  margin-bottom: 13px;
  font-size: 16px;
  color: #494949;
}

.post-payment-adjustment__bill-card {
  background-color: #FFFFFF;
}
.post-payment-adjustment__bill-card_is-selected {
  background-color: #E3F4F6;
}
.post-payment-adjustment__bill-card:not(:last-child) {
  border-bottom: 1px solid #D2D8D8;
}

.post-payment-adjustment__bill-card-grid {
  height: 160px;
  padding: 21px 8px;
  box-sizing: border-box;
}
@media (max-width: 47.99em) {
  .post-payment-adjustment__bill-card-grid {
    height: 286px;
  }
}

.plan-info-card {
  display: flex;
  align-items: center;
  background-color: #FFF;
  border: 1px solid #C8D8D8;
  width: 100%;
  height: auto;
  min-height: 70px;
  padding: 20px;
  box-sizing: border-box;
}

.plan-info-card__carrier-logo {
  max-width: 120px;
  max-height: 40px;
  margin-right: 10px;
}

.plan-info-card__plan-info {
  flex: 1;
}

.plan-info-card__plan-name {
  font-weight: bold;
  font-size: 15px;
}

.plan-info-card__carrier-name {
  font-size: 14px;
  color: #5E5E5E;
}

.error-card {
  background-color: #FFF;
  height: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.error-card_height_265 {
  height: 265px;
}
.error-card_width_600 {
  width: 600px;
}
.error-card_theme_transparent {
  box-shadow: none;
  background: transparent;
}

.error-card__error {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.error-card__error-title {
  text-align: center;
  color: #4A4A4A;
  font-size: 16px;
}
.error-card__error-title_color_red {
  color: #D57F73;
}
.error-card__error-title_font-size_25 {
  font-size: 25px;
}
.error-card__error-title_margin-bottom_15 {
  margin-bottom: 15px;
}

.error-card__error-icon {
  width: 100px;
  background-position: center;
  background-repeat: no-repeat;
  height: 40px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/x-red-circle.svg");
  margin-bottom: 20px;
}

.export-button {
  display: flex;
  height: 100%;
}

.export-button__button {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  height: 100%;
  padding: 0 10px;
  transition: all 200ms ease;
  color: var(--main-color);
  /**
   * 1. For the element to retain the same animation properties of the last keyframe after the animation completes.
   */
}
.export-button__button_is-loading {
  background-image: linear-gradient(to right, transparent 50%, #D7D7D7 50%);
  animation: export__loading-animation 150s cubic-bezier(0.1, 0.99, 0.1, 0.99) 1;
  animation-fill-mode: forwards; /* 1 */
  background-size: 200% 100%;
  cursor: default;
}
.export-button__button_is-disabled {
  color: #9B9B9B;
  cursor: default;
}
.export-button__button:hover:not(.export-button__button_is-disabled) {
  background-color: #D7D7D7;
}

.export-button__icon {
  width: 10px;
  height: 10px;
  background: center no-repeat;
  margin-right: 7px;
  background-image: var(--svg-export);
}
.export-button__icon_is-disabled {
  background-image: url("/assets/images/themes/blue/icons/export-disabled.svg");
}

@keyframes export__loading-animation {
  0% {
    background-position: 0%;
  }
  70% {
    background-position: -95%;
  }
  100% {
    background-position: -99%;
  }
}
/**
 * The employee initials circle.
 *
 * @block person-initials
 */
.person-initials {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #FFF;
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /**
   * Let the circle fill the parent width while of course keeping a correct
   * circle for a perfect circle.
   *
   * @modifier size
   * @value flex
   */
  /**
   * Used for example in loading animation.
   *
   * @modifier faded
   */
}
.person-initials_size_workflow {
  width: 93px;
  height: 93px;
  font-size: 22px;
}
.person-initials_size_flex {
  width: 100%;
  padding-top: 100%;
  height: 0;
  overflow: hidden;
  font-size: 22px;
}
.person-initials_faded {
  opacity: 0.5;
}

/**
 * @element content
 */
.person-initials__content {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
 * @block employee-mini-card
 */
.employee-mini-card {
  background-color: #FFF;
  border: solid 1px #CBDBDB;
}
@media (max-width: 47.99em) {
  .employee-mini-card_border-bottom-only-mobile {
    border: none;
    border-bottom: solid 1px #CBDBDB;
  }
}
@media (max-width: 47.99em) {
  .employee-mini-card_border-top-only-mobile {
    border-top: solid 1px #CBDBDB;
  }
}
.employee-mini-card_border_none {
  border: none;
}

.employee-mini-card_margin-top_15 {
  margin-top: 15px;
}

/**
 * @element initials
 */
.employee-mini-card__initials {
  margin-right: 18px;
}
.employee-mini-card__initials_margin-right_12 {
  margin-right: 12px;
}
.employee-mini-card__initials_margin-right_10 {
  margin-right: 10px;
}

/**
* @element name-container
*/
.employee-mini-card__name-container {
  display: flex;
  flex-direction: column;
}

/**
 * @element name
 */
.employee-mini-card__name {
  font-size: 18px;
  font-weight: bold;
}
.employee-mini-card__name_font-size_16 {
  font-size: 16px;
}

/**
 * @element ssn
 */
.employee-mini-card__ssn {
  font-size: 16px;
  font-weight: normal;
}

/**
 * @element view
 */
.employee-mini-card__view {
  font-size: 14px;
}

.employee-mini-card__header {
  padding: 10px;
  display: flex;
  align-items: center;
  border-bottom: solid 1px var(--color-light-blue);
}
.employee-mini-card__header_border-bottom_none {
  border-bottom: none;
}

.employee-mini-card__header-left-aligned {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
}

.employee-mini-card__edit {
  display: flex;
  align-items: center;
  color: #1297AC;
  font-size: 14px;
  background: url("/assets/images/icons/edit.svg") left center no-repeat;
  background-size: 9px 9px;
  padding-left: 13px;
  cursor: pointer;
}
.employee-mini-card__edit:not(.employee-mini-card__edit_is-loading):hover {
  opacity: 0.7;
  color: #0D7383;
}
.employee-mini-card__edit:active {
  color: #1297AC;
}

/**
 * @block member-relations-card
 */
.member-relations-card {
  background-color: #FFF;
  border: solid 1px #CBDBDB;
}

.member-relations-card__initials {
  margin-right: 18px;
}

/**
 * @element name
 */
.member-relations-card__name {
  font-size: 16px;
}

/**
 * Used to add space between 2 blocks.
 * This prevents the need to wrap a block in an element just
 * to provide a margin.
 *
 * @blocks space
 */
.space {
  height: 100%;
  width: 20px;
  /**
   * @modifier size
   * @value small
   */
}
.space_size_small {
  width: 10px;
}

.square-checkbox {
  width: 52px;
  height: 34px;
  border: 1px solid;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background-color 200ms linear, color 200ms linear;
}
.square-checkbox_is-black {
  border-color: #4A4A4A;
}
.square-checkbox_size_extra-small {
  width: 26px;
  height: 18px;
  font-size: 10px;
}
.square-checkbox_size_large {
  width: 174px;
  font-size: 12px;
}

.square-checkbox__text {
  text-transform: uppercase;
}

.square-checkbox_is-disabled {
  pointer-events: none;
  border-color: #CFCFCF;
  color: #CFCFCF;
}
.square-checkbox_is-disabled.square-checkbox_is-checked {
  background-color: #CFCFCF;
  border: none;
  color: #FFF;
}

.square-checkbox_theme_green:not(.square-checkbox_is-disabled):not(.square-checkbox_is-black) {
  border-color: #1297AC;
  color: #1297AC;
}
.square-checkbox_theme_green:not(.square-checkbox_is-disabled):not(.square-checkbox_is-black):hover, .square-checkbox_theme_green:not(.square-checkbox_is-disabled):not(.square-checkbox_is-black):focus {
  background-color: rgba(18, 151, 172, 0.3);
  outline: none;
}
.square-checkbox_theme_green:not(.square-checkbox_is-disabled):not(.square-checkbox_is-black).square-checkbox_is-checked {
  background-color: #1297AC;
  color: #FFF;
}
.square-checkbox_theme_green:not(.square-checkbox_is-disabled):not(.square-checkbox_is-black).square-checkbox_is-checked:hover, .square-checkbox_theme_green:not(.square-checkbox_is-disabled):not(.square-checkbox_is-black).square-checkbox_is-checked:focus {
  background-color: #0F798A;
}

.square-checkbox_theme_blue:not(.square-checkbox_is-disabled):not(.square-checkbox_is-black) {
  border-color: #034FA8;
}
.square-checkbox_theme_blue:not(.square-checkbox_is-disabled):not(.square-checkbox_is-black).square-checkbox_is-checked {
  background-color: #034FA8;
  color: #FFF;
}

/**
 * @block sso-sign-out
 */
.sso-sign-out {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #E1F2F5;
  overflow: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.sso-sign-out__body {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  flex: 1;
  justify-content: center;
  width: 100%;
}

.sso-sign-out__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1;
  padding: 0 10px;
}

.sso-sign-out__description {
  margin-top: 20px;
  text-align: center;
}

.sso-sign-out__icon {
  background: url("/assets/images/icons/logout.svg") center center no-repeat;
  width: 94px;
  height: 106px;
}

.sso-sign-out__title {
  margin-top: 50px;
  color: #1297AC;
  font-weight: 200;
}
@media (max-width: 47.99em) {
  .sso-sign-out__title {
    font-size: 30px;
  }
}
@media (min-width: 48em) {
  .sso-sign-out__title {
    font-size: 50px;
  }
}

.sso-sign-out__footer {
  flex-shrink: 0;
  padding-bottom: 32px;
  text-align: center;
}

.sso-sign-out__contact {
  margin: 40px 0 30px;
  text-transform: uppercase;
  cursor: pointer;
  color: #1297AC;
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  text-decoration: underline;
}

.sso-sign-out__powered-by {
  position: absolute;
  bottom: 22px;
  left: 23px;
}

.state-box {
  color: #9B9B9B;
  font-size: 14px;
}
.state-box_state_checked {
  width: 14px;
  height: 18px;
  background: url("/assets/images/icons/green-tick.svg") center center no-repeat;
}
.state-box_state_not-set {
  width: 15px;
  height: 18px;
  background: url("/assets/images/icons/half-tick.svg") center center no-repeat;
}

/**
 * @block status-description
 */
.status-description {
  color: #B0A7A8;
  font-size: 12px;
  /**
   * @modifier theme
   * @value white
   */
}
.status-description_theme_white {
  color: #FFF;
}

/**
 * Used for the Manage Users table page.
 *
 * @block employee-users
 */
.employee-users {
  display: block;
  height: 100%;
}

/**
 * @element user-card
 */
.employee-users__user-card {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

/**
 * @element email-cell
 */
.employee-users__email-cell {
  display: flex;
  align-items: center;
  width: 100%;
}

/**
 * @element email
 */
.employee-users__email {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.employee-users__edit-container {
  display: flex;
  align-items: center;
}

/**
 * @element edit
 */
.employee-users__edit {
  display: flex;
  align-items: center;
  color: var(--main-color);
  font-size: 14px;
  background: var(--svg-edit) left center no-repeat;
  background-size: 9px 9px;
  padding-left: 13px;
  font-weight: 600;
  cursor: pointer;
  /**
   * @modifier is-loading
   */
}
.employee-users__edit:not(.employee-users__edit_is-loading):hover {
  opacity: 0.7;
  color: var(--main-color-dark);
}
.employee-users__edit:active {
  color: var(--main-color);
}
.employee-users__edit_is-loading {
  cursor: default;
  opacity: 0.5;
}

/**
 * @element edit-hourglass
 */
.employee-users__edit-hourglass {
  margin-left: 5px;
}

/**
 * @element edit-link
 */
.employee-users__edit-link {
  color: var(--main-color);
  cursor: pointer;
  font-size: 14px;
}
.employee-users__edit-link:hover {
  text-decoration: underline;
}

/**
 * An empty state card.
 */
.empty-card {
  padding: 0 20px;
  height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: #FFF;
  text-align: center;
}
.empty-card_align-items_start {
  align-items: flex-start;
}
.empty-card_height_50 {
  height: 50px;
}
.empty-card_is-small {
  height: 100px;
}
.empty-card_is-small .empty-card__icon {
  margin-bottom: 10px;
}
.empty-card_is-small .empty-card__icon_type_documents {
  height: 20px;
  width: 16px;
}
.empty-card_is-small .empty-card__icon_type_links {
  height: 19px;
  width: 19px;
}
.empty-card_is-small .empty-card__title {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
}
.empty-card_height_145 {
  height: 145px;
}
.empty-card_height_430 {
  height: 430px;
}
.empty-card_height_150 {
  height: 150px;
}
.empty-card_height_300 {
  height: 300px;
}
@media (max-width: 47.99em) {
  .empty-card_mobile-height_230 {
    height: 230px;
  }
}
@media (max-width: 47.99em) {
  .empty-card_mobile-height_280 {
    height: 280px;
  }
}
.empty-card_has-top-border {
  border-top: 1px solid var(--main-color-light-4);
}
.empty-card_height_200 {
  height: 200px;
}
.empty-card_height_auto {
  height: auto;
}
.empty-card_min-height_200 {
  min-height: 200px;
}
.empty-card_has-horizontal-borders {
  border-top: 1px solid var(--main-color-light-4);
  border-bottom: 1px solid var(--main-color-light-4);
}
.empty-card_has-borders {
  border: solid thin var(--main-color-light-9);
}
.empty-card_has-box-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.empty-card_background-color_grey {
  background-color: #F8F8F8;
}
.empty-card_top-bottom-padding_30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

/**
 * @element empty-card__icon
 */
.empty-card__icon {
  flex-shrink: 0;
  margin-bottom: 35px;
  background-repeat: no-repeat;
  background-position: center center;
  /**
   * @modifier type
   * @value contacts
   */
}
.empty-card__icon_type_broker-house {
  height: 29px;
  width: 25px;
  background-image: var(--svg-building);
}
.empty-card__icon_type_broker-contact {
  height: 29px;
  width: 26px;
  background-image: var(--svg-contact);
}
.empty-card__icon.empty-card__icon_type_contacts {
  margin-bottom: 20px;
  height: 69px;
  width: 58px;
  background-image: var(--svg-contacts-empty);
}
.empty-card__icon.empty-card__icon_type_agencies {
  margin-bottom: 20px;
  height: 37.5px;
  width: 25px;
  background-image: var(--svg-suit-man);
}
.empty-card__icon.empty-card__icon_type_associations {
  margin-bottom: 20px;
  height: 39px;
  width: 57px;
  background-image: var(--svg-associations);
}
.empty-card__icon.empty-card__icon_type_subgroups {
  margin-bottom: 20px;
  height: 36px;
  width: 36px;
  background-image: var(--svg-subgroups);
}
.empty-card__icon_type_group-contact {
  height: 29px;
  width: 26px;
  background-image: var(--svg-contact);
}
.empty-card__icon_type_documents-small {
  height: 29px;
  width: 25px;
  background-image: var(--svg-documents);
}
.empty-card__icon_type_documents {
  height: 100px;
  width: 78px;
  background-image: var(--svg-documents);
}
.empty-card__icon.empty-card__icon_type_bills-small {
  height: 50px;
  width: 45px;
  margin-bottom: 21px;
  background-image: var(--svg-empty-bills);
}
.empty-card__icon_type_bills {
  height: 101px;
  width: 91px;
  background-image: var(--svg-empty-bills);
}
.empty-card__icon_type_reports {
  height: 100px;
  width: 78px;
  background-image: var(--svg-reports-empty);
}
.empty-card__icon_type_receipts {
  width: 100px;
  height: 99px;
  background-image: var(--svg-receipts);
}
.empty-card__icon_type_invoices {
  width: 73px;
  height: 99px;
  background-image: var(--svg-invoices);
}
.empty-card__icon_type_users {
  width: 100px;
  height: 94px;
  background-image: var(--svg-users-empty);
}
.empty-card__icon_type_links {
  width: 35px;
  height: 35px;
  background-size: 100%;
  background-image: var(--svg-links);
}
.empty-card__icon_type_employees {
  width: 47px;
  height: 30px;
  background-image: var(--svg-employees-clear);
}
.empty-card__icon_type_dependents-light {
  background-image: var(--svg-dependents-light);
  width: 118px;
  height: 75px;
}
.empty-card__icon_type_umbrella-light {
  background-image: var(--svg-umbrella-light);
  width: 95px;
  height: 95px;
}
.empty-card__icon_type_benefits-light {
  background-image: var(--svg-benefits-light);
  width: 90px;
  height: 83px;
}
.empty-card__icon_type_benefits {
  width: 65px;
  height: 49px;
  background-image: var(--svg-two-hearts);
}
.empty-card__icon_type_search {
  background-image: var(--svg-search);
  width: 81px;
  height: 83px;
}
.empty-card__icon_type_activity {
  background-image: var(--svg-activity);
  height: 12px;
  width: 100%;
}
.empty-card__icon_type_permissions {
  height: 33px;
  width: 100%;
  background-image: var(--svg-permissions);
}
.empty-card__icon_type_classes {
  height: 50px;
  width: 55px;
  background-size: 100%;
  background-image: var(--svg-classes);
}
.empty-card__icon_type_not-found {
  height: 47px;
  width: 100%;
  background-image: var(--svg-not-found);
}
.empty-card__icon.empty-card__icon_type_notes {
  margin-bottom: var(--empty-card-icon-type-notes-margin-bottom);
  height: 30px;
  width: 30px;
  background-image: var(--svg-notes);
  background-size: 100%;
}
.empty-card__icon_type_tasks {
  height: 30px;
  width: 30px;
  background-image: url("/assets/images/themes/blue/icons/tasks.svg");
  background-size: 100%;
}
.empty-card__icon.empty-card__icon_type_flags {
  margin-bottom: 15px;
  height: 35px;
  width: 26px;
  background-image: url("/assets/images/themes/blue/icons/flag.svg");
  background-size: 100%;
}
.empty-card__icon_type_wallet {
  width: 55px;
  height: 45px;
  background: var(--svg-bank-details) center center no-repeat;
  background-size: 100%;
}
.empty-card__icon_type_employer-contacts {
  height: 31px;
  width: 25px;
  background-image: var(--svg-employer-contacts);
  background-size: 100%;
}
.empty-card__icon_type_users-info {
  height: 40px;
  width: 27px;
  background-image: var(--svg-hand-click);
  background-size: 100%;
}
.empty-card__icon_type_members {
  width: 81px;
  height: 83px;
  background-size: auto 100%;
  background-image: var(--svg-member);
}
.empty-card__icon_type_errors {
  height: 30px;
  width: 30px;
  background-size: 100%;
  background-image: url("/assets/images/error-exclamation.svg");
}
.empty-card__icon_type_edi-suspensions {
  width: 30px;
  height: 36px;
  background-size: 100%;
  background-image: var(--svg-suspensions);
}
.empty-card__icon_type_carrier-classes {
  width: 38px;
  height: 36px;
  background-size: 100%;
  background-image: var(--svg-briefcase);
}
.empty-card__icon_type_plan-and-product-ids {
  width: 38px;
  height: 36px;
  background-size: 100%;
  background-image: var(--svg-heart);
}
.empty-card__icon.empty-card__icon_margin-bottom_small {
  margin-bottom: 15px;
}
.empty-card__icon.empty-card__icon_margin-bottom_20 {
  margin-bottom: 20px;
}
.empty-card__icon_width_45 {
  width: 45px;
}
.empty-card__icon_height_45 {
  height: 45px;
}
.empty-card__icon_height_50 {
  height: 50px;
}

.empty-card__title {
  font-size: 34px;
  font-weight: 100;
  color: var(--main-color);
  line-height: 30px;
  margin-bottom: 10px;
}
.empty-card__title_size_small {
  font-size: 20px;
}
.empty-card__title_size_25 {
  font-size: 25px;
}
.empty-card__title_size_28 {
  font-size: 28px;
}
.empty-card__title_size_30 {
  font-size: 25px;
}
.empty-card__title_is-multiline {
  max-width: 450px;
  line-height: normal;
}
.empty-card__title_margin-bottom_large {
  margin-bottom: 25px;
}
.empty-card__title_margin-bottom_30 {
  margin-bottom: 30px;
}
.empty-card__title_margin-bottom_20 {
  margin-bottom: 20px;
}
.empty-card__title_color_red {
  color: #D57F73;
}

.empty-card__subtitle {
  font-size: 16px;
  color: #5C5050;
}

/**
 * @element empty-card__description
 */
.empty-card__description {
  margin-bottom: 30px;
}
.empty-card__description_size_16 {
  font-size: 16px;
}

@media (min-width: 48em) and (max-width: 63.99em) {
  /**
   * @element empty-card
   */
  .empty-card {
    margin: 25px;
    /**
     * @modifier is-marginless-top
     */
  }
  .empty-card_is-marginless {
    margin: 0;
  }
  .empty-card_is-marginless-top {
    margin-top: 0;
  }
  .empty-card_is-marginless {
    margin: 0;
  }
}
@media (max-width: 63.99em) {
  .empty-card__title {
    font-size: 30px;
    /**
     * @modifier size
     * @value small
     */
  }
  .empty-card__title_size_25 {
    font-size: 25px;
  }
  .empty-card__title_size_small {
    font-size: 20px;
  }
}
@media screen and (max-width: 390.9px) {
  .empty-card__title {
    font-size: 25px;
  }
  .empty-card__title_size_small {
    font-size: 20px;
  }
  /**
   * @element empty-card__description
   */
  .empty-card__description {
    font-size: 13px;
  }
}
.empty-card__buttons {
  display: flex;
}

.empty-card__button_margin-right_10 {
  margin-right: 10px;
}
.empty-card__button_margin-top_25px {
  margin-top: 25px;
}

/**
 * 1. These are used to fill the empty card.
 * We set a flex: 1 child due to height: 100% not working on safari.
 * A min-height is set since content overflows when scroll appears.
 *
 * Replacing these 2 properties with height 100% and removing display flex
 * from parent is enough for this to work in chrome.
 *
 * @modifier type
 * @value ess
 */
.empty-card_type_ess {
  border: 1px solid var(--main-color-light-4);
}
.empty-card_type_ess .empty-card__title {
  font-size: 26px;
}
.empty-card_type_ess .empty-card__description {
  font-size: 14px;
}
@media (max-width: 47.99em) {
  .empty-card_type_ess {
    flex: 1; /* 1 */
    min-height: 500px; /* 1 */
    border: 0;
    justify-content: flex-start;
    padding-top: 80px;
    padding-bottom: 10px;
  }
  .empty-card_type_ess .empty-card__icon {
    margin-bottom: 60px;
  }
  .empty-card_type_ess .empty-card__title {
    margin-bottom: 15px;
  }
  .empty-card_type_ess .empty-card__description {
    margin-bottom: 80px;
  }
}
@media (max-width: 63.99em) {
  .empty-card_type_ess {
    margin: 0;
  }
}

/**
 * @modifier type
 * @value activity
 */
.empty-card_type_activity {
  border: 1px solid var(--main-color-light-4);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-left: 0;
  height: 230px;
}

/**
 * @modifier theme
 * @value edgy
 */
.empty-card_theme_edgy {
  border: 1px solid var(--main-color-light-4);
  height: 240px;
}
.empty-card_theme_edgy .empty-card__description {
  margin-bottom: 0;
}

.empty-cost-text {
  display: block;
}
.empty-cost-text_is-flex-start .empty-cost-text__content {
  justify-content: flex-start;
}

.empty-cost-text__content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.empty-cost-text__help-tip {
  margin-left: 5px;
}

/**
 * When a form is empty (example no dependents) we have a message
 * with a call to action to "add" or "skip" for example.
 *
 * @block empty-form
 */
.empty-form {
  display: flex;
  justify-content: center;
  position: relative;
}
@media (max-height: 450px) {
  .empty-form {
    padding-top: 0;
  }
}
@media (min-height: 450px) {
  .empty-form {
    padding-top: 40px;
  }
}

/**
 * The centered content.
 *
 * @element content
 */
.empty-form__content {
  padding-top: 85px;
  background: top center no-repeat;
  background-size: 66px 42px;
}
@media (max-width: 47.99em) {
  .empty-form__content {
    padding-left: 5px;
    padding-right: 5px;
  }
}

/**
 * @element title
 */
.empty-form__title {
  font-size: 26px;
  color: #1297AC;
  text-align: center;
}

/**
 * @element description
 */
.empty-form__description {
  padding-top: 5px;
  font-size: 14px;
  text-align: center;
}
.empty-form__description_width_500 {
  max-width: 500px;
}

/**
 * @element actions
 */
.empty-form__actions {
  margin-top: 50px;
}

/**
 * @element action
 */
.empty-form__action {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/**
 * Adds the dependent icon on top.
 *
 * @modifier model
 * @value dependent
 */
.empty-form_model_dependent .empty-form__content {
  background-image: url("/assets/images/icons/dependents.svg");
}

/**
 * Adds the beneficiary icon on top.
 *
 * @modifier model
 * @value beneficiary
 */
.empty-form_model_beneficiary .empty-form__content {
  background-image: url("/assets/images/icons/umbrella.svg");
}

/**
 * The billing tile content in the dashboard.
 *
 * @block enrollment-duration
 */
.enrollment-duration {
  display: block;
}

/**
 * @element description
 */
.enrollment-duration__description {
  margin-bottom: 20px;
  text-align: center;
  font-size: 13px;
  color: #5C5050;
}

/**
 * @element tiles
 */
.enrollment-duration__tiles {
  display: flex;
  justify-content: center;
  margin-bottom: 23px;
}

/**
 * @element tile
 */
.enrollment-duration__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  height: 56px;
  margin: 0 3px;
  border-radius: 7px;
  color: white;
  background: #1297AC;
}

/**
 * @element enroll
 */
.enrollment-duration__enroll {
  text-align: center;
  margin-bottom: 26px;
}

/**
 * @element number
 */
.enrollment-duration__number {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 100%;
  border-radius: 7px;
  overflow: hidden;
  z-index: 1;
  font-family: "Montserrat", sans-serif;
  font-size: 33px;
}

/**
 * @element number-base
 */
.enrollment-duration__number-base {
  font-family: "Montserrat", sans-serif;
  padding: 0 6px;
}

/**
 * @element number-flap
 */
.enrollment-duration__number-flap {
  display: none;
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  top: 0;
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
}
.enrollment-duration__number-flap:before {
  content: attr(data-content);
  position: absolute;
  left: 50%;
}
.enrollment-duration__number-flap_is-front:before, .enrollment-duration__number-flap_is-under:before {
  top: 100%;
  transform: translate(-50%, -50%);
}
.enrollment-duration__number-flap_is-back {
  transform: rotateY(180deg);
}
.enrollment-duration__number-flap_is-back:before {
  top: 100%;
  transform: translate(-50%, -50%) rotateZ(180deg);
}
.enrollment-duration__number-flap_is-front, .enrollment-duration__number-flap_is-back {
  z-index: 2;
}
.enrollment-duration__number-flap_is-under {
  z-index: 1;
}

/**
 * @element tile-label
 */
.enrollment-duration__tile-label {
  text-transform: uppercase;
  margin-bottom: 3px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
}

/**
 * Red error box used in forms to show validation errors.
 *
 * 1. clearfix hack needed for safari to remove margin collapsing. Taken
 *    from https://stackoverflow.com/a/25137269/542642
 *
 * @block error-box
 */
.error-box {
  font-size: 13px;
  /* [1] */
}
.error-box:before, .error-box:after {
  content: " ";
  display: table;
}

/**
 * 1. Has to match the padding of the custom checkbox... :'(
 *
 * @element error
 */
.error-box__error {
  padding: 13px 39px;
  background-size: 12px 12px;
  background-image: var(--svg-field-error-white);
  background-repeat: no-repeat;
  background-position: 13px 15px;
  background-color: var(--color-red);
  color: var(--color-white);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.error-box__error_box-shadow_none {
  box-shadow: none;
}
.error-box__error_is-warning {
  background-image: var(--svg-field-error-white);
  background-color: var(--color-dark-blue);
}
.error-box__error_has-checkboxes {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 7px;
  background-image: none;
}
.error-box__error_padding-right_10 {
  padding-right: 10px;
}
.error-box__error_display_flex {
  display: flex;
}
.error-box__error_background-color_purple {
  background-color: var(--color-purple);
}

.error-box__error-child {
  flex: 1;
}

.error-box__error-list {
  background-color: var(--color-white);
  border: solid 1px var(--color-red);
}

.error-box__error-list-item {
  height: 40px;
  padding: 0 10px 0 15px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.error-box__error-list-item-left-split {
  flex: 1;
}

.error-box__standalone-error {
  padding-left: 23px;
  position: relative;
  margin-bottom: 14px;
}
.error-box__standalone-error:before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  height: 12px;
  width: 12px;
  background: var(--svg-field-error-white) center center no-repeat;
}

/**
 * @element item
 */
.error-box__item {
  padding: 13px 13px;
  background-color: var(--color-red);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
}
@media (min-width: 48em) {
  .error-box__item {
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
  }
}

/**
 * @element item-btn
 */
.error-box__item-btn {
  flex-shrink: 0;
}
@media (max-width: 47.99em) {
  .error-box__item-btn {
    margin-top: 8px;
  }
}

/**
 * @element field
 */
.error-box__field {
  display: inline-block;
  text-transform: uppercase;
  font-size: 14px;
  padding-right: 5px;
}
.error-box__field_text-transform_none {
  text-transform: none;
}

/**
 * @modifier size
 * @value small
 */
.error-box_size_small {
  /**
   * @block error-box
   */
  font-size: 12px;
  /**
   * @element field
   */
}
.error-box_size_small .error-box__error:not(.error-box__error_has-checkboxes) {
  padding: 7px 39px;
  background-position: 13px 9px;
}
.error-box_size_small .error-box__error:not(.error-box__error_has-checkboxes).error-box__error_padding-right_10 {
  padding-right: 10px;
}
.error-box_size_small .error-box__field {
  font-size: 12px;
}

/**
 * Used when the background color of the error is transparent.
 *
 * @modifier is-transparent
 */
.error-box_is-transparent {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  /**
   * @element error
   */
}
.error-box_is-transparent .error-box__error:not(.error-box__error_has-checkboxes) {
  box-shadow: none;
  background-color: transparent;
  color: var(--color-red);
  padding: 0;
  padding-top: 0;
  background-image: none;
  flex: 1;
}
.error-box_is-transparent::before {
  width: 12px;
  height: 12px;
  margin-right: 10px;
  margin-top: 2px;
  content: "";
  background: var(--svg-field-error) center center;
}

.error-box_no-padding-top {
  padding-top: 0;
}

.error-box_font-size_14 {
  font-size: 14px;
}

/**
 * Error pages like 404 and maintenance pages.
 *
 * @block error-page
 */
.error-page {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}

/**
 * @element logo-holder
 */
.error-page__logo-holder {
  position: absolute;
}
@media (max-width: 47.99em) {
  .error-page__logo-holder {
    top: 15px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}
@media (min-width: 48em) {
  .error-page__logo-holder {
    top: 20px;
    left: 20px;
  }
}

/**
 * @element logo
 */
.error-page__logo {
  height: 100px;
  width: 155px;
}

/**
 * @element logo-image
 */
.error-page__logo-image {
  max-width: 100%;
  max-height: 100%;
}

/**
 * @element body
 */
.error-page__body {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  width: 100%;
}
@media (max-width: 47.99em) {
  .error-page__body {
    align-items: flex-start;
    padding-top: 130px;
  }
}
@media (min-width: 48em) {
  .error-page__body {
    align-items: center;
    min-height: 100%;
  }
}

/**
 * @element content
 */
.error-page__content {
  background-position: top center;
  background-repeat: no-repeat;
  text-align: center;
  /**
   * @modifier icon
   * @value 404
   */
  /**
   * @modifier icon
   * @value maintenance
   */
  /**
   * @modifier icon
   * @value invalid
   */
}
@media (max-width: 47.99em) {
  .error-page__content {
    padding: 90px 15px 10px;
    background-size: 55px 74px;
  }
}
@media (min-width: 48em) {
  .error-page__content {
    padding-top: 150px;
    background-size: 100px 137px;
  }
}
.error-page__content_icon_404 {
  background-image: url("/assets/images/icons/not-found.svg");
}
.error-page__content_icon_maintenance {
  background-image: url("/assets/images/icons/maintenance.svg");
}
.error-page__content_icon_invalid {
  background-image: url("/assets/images/icons/empty-x.svg");
}

/**
 * @element title
 */
.error-page__title {
  color: #1297AC;
  font-weight: 300;
  margin-bottom: 20px;
}
@media (max-width: 47.99em) {
  .error-page__title {
    font-size: 30px;
  }
}
@media (min-width: 48em) {
  .error-page__title {
    font-size: 50px;
  }
}

/**
 * @element link
 */
.error-page__link {
  color: #1297AC;
  cursor: pointer;
}
.error-page__link:hover {
  text-decoration: underline;
  color: #0D7383;
}
.error-page__link:active {
  color: #1297AC;
}

/**
 * Mobile-only
 *
 * @element footer
 */
@media (max-width: 47.99em) {
  .error-page__footer {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media (min-width: 48em) {
  .error-page__footer {
    display: none;
  }
}

/**
 * @element contact
 */
@media (max-width: 47.99em) {
  .error-page__contact {
    margin: 20px 0;
    text-transform: uppercase;
    cursor: pointer;
    color: #1297AC;
    font-size: 11px;
    font-family: "Montserrat", sans-serif;
    text-decoration: underline;
  }
}

/**
 * The list of benefit cards in ESS My Benefits.
 *
 * @block ess-benefits
 */
.ess-benefits {
  box-sizing: border-box;
  /**
   * @modifier is-empty-state
   */
}
@media (max-width: 47.99em) {
  .ess-benefits_is-empty-state {
    width: 100%;
    flex: 1;
    display: flex;
    flex-flow: column;
  }
}
@media (min-width: 48em) {
  .ess-benefits_is-empty-state {
    padding-top: 50px;
  }
}

/**
 * @element description
 */
.ess-benefits__description {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 22px;
}
@media (max-width: 47.99em) {
  .ess-benefits__description {
    padding: 8px;
  }
}

/**
 * @element header
 */
.ess-benefits__header {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
}

.ess-benefits__left-split {
  flex: 1;
}

/**
 * Most of the code here is to make it work on Firefox.
 * When paired with a dropdown dependent filter, it needs
 * to be absolutely positioned.
 *
 * @element filter
 */
.ess-benefits__filter {
  position: relative;
  height: 100%;
  width: 45px;
}
@media (max-width: 47.99em) {
  .ess-benefits__filter {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
  }
}
.ess-benefits__filter_is-in-dropdown {
  width: 45px;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}
@media (min-width: 48em) {
  .ess-benefits__filter:not(.ess-benefits__filter_is-in-dropdown) {
    margin-right: -12px;
  }
}

/**
 * @element list-group-title
 */
.ess-benefits__list-group-title {
  height: 60px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}
@media (max-width: 47.99em) {
  .ess-benefits__list-group-title {
    padding: 0 20px;
  }
}
.ess-benefits__list-group-title:before {
  content: "";
  background: url("/assets/images/icons/benefits.svg") left center no-repeat;
  width: 12px;
  height: 100%;
  background-size: 12px 12px;
  margin-right: 10px;
}

/**
 * @element list-item
 */
.ess-benefits__list-item {
  margin-bottom: 25px;
}
.ess-benefits__list-item:last-child {
  margin-bottom: 0;
}

.ess-benefits__benefit-costs {
  margin-bottom: 10px;
}
.ess-benefits__benefit-costs:last-child {
  margin-bottom: 0;
}

.ess-benefits__standalone-filter {
  width: 70px;
}

/**
 * @block ess-intro
 */
.ess-intro {
  margin-top: 20px;
}
@media (min-width: 48em) {
  .ess-intro {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/**
 * @element box
 */
.ess-intro__box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  padding: 26px;
  box-sizing: border-box;
  background: #FFF;
}
@media (max-width: 63.99em) {
  .ess-intro__box {
    max-width: 308px;
  }
}
@media (max-width: 47.99em) {
  .ess-intro__box {
    margin: 0 auto 22px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .ess-intro__box {
    margin: 0 22px 44px;
  }
}
@media (min-width: 64em) {
  .ess-intro__box {
    width: 266px;
    margin: 0 44px 60px;
  }
}

/**
 * @element title
 */
.ess-intro__title {
  margin-bottom: 8px;
  color: #5C5050;
  font-size: 14px;
  font-weight: bold;
}

/**
 * @element description
 */
.ess-intro__description {
  color: #5C5050;
  font-size: 14px;
}

/**
 * @element icon
 */
.ess-intro__icon {
  height: 162px;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  /**
   * @modifier type
   * @value info
   */
  /**
   * @modifier type
   * @value dependents
   */
  /**
   * @modifier type
   * @value benefits
   */
}
.ess-intro__icon_type_info {
  background-size: 103px 116px;
  background-image: url("/assets/images/icons/employee-info.svg");
}
.ess-intro__icon_type_dependents {
  background-size: 145px 95px;
  background-image: url("/assets/images/icons/employee-dependents.svg");
}
.ess-intro__icon_type_benefits {
  background-size: 139px 130px;
  background-image: url("/assets/images/icons/employee-benefits.svg");
}

/**
 * Used to style the View Expense modal.
 *
 * @block expense-details
 */
.expense-details {
  display: block;
}

/**
 * @element status
 */
.expense-details__status {
  display: flex;
  justify-content: flex-end;
  height: 33px;
  align-items: center;
}

/**
 * @element documents
 */
.expense-details__documents {
  border-top: solid 1px var(--color-light-blue);
  margin: 0 20px;
}

/**
 * @element documents-title
 */
.expense-details__documents-title {
  font-weight: bold;
  height: 45px;
  display: flex;
  align-items: center;
}

/**
 * @element documents-help-tip
 */
.expense-details__documents-help-tip {
  padding-left: 10px;
}

/**
 * @element note
 */
.expense-details__note {
  font-size: 13px;
  padding-top: 30px;
}

/**
 * @element documents-item
 */
.expense-details__documents-item {
  padding-bottom: 10px;
}

/**
 * @element help-tip-list
 */
.expense-details__help-tip-list {
  padding-left: 20px;
}

/**
 * Used in the MERP expense's add documents form.
 * Contains the description of the required documents for an expense.
 *
 * @block expense-new-documents
 */
.expense-new-documents {
  display: block;
}

/**
 * @element title
 */
.expense-new-documents__title {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 20px;
}

/**
 * @element body
 */
.expense-new-documents__body {
  font-size: 13px;
}

/**
 * @element list
 */
.expense-new-documents__list {
  padding-left: 25px;
  margin: 5px 0;
}

.field-box {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  background: #FFF;
  border: solid 1px var(--main-color-light-19);
  padding: 0 10px;
  font-size: 16px;
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /**
   * Only show bottom borders and only on desktop plus. Otherwise
   * no borders.
   *
   * @modifier borders
   * @value bottom-desktop-plus
   */
  /**
   * We only want padding on desktop plus.
   *
   * @modifier padding
   * @value desktop-plus
   */
  /**
   * Use the block as an empty holder for the action button
   *
   * @modifier has-action
   */
  /**
   * @modifier no-padding
   */
  /**
   * @modifier font
   * @value is-small-on-mobile
   */
}
.field-box_height_45 {
  height: 45px;
}
.field-box_height_70 {
  height: 70px;
}
.field-box_height_75 {
  height: 75px;
}
.field-box_height_80 {
  height: 80px;
}
.field-box_margin-top_10 {
  margin-top: 10px;
}
.field-box_margin-top_15 {
  margin-top: 15px;
}
.field-box_height_fit-content {
  height: -moz-fit-content;
  height: fit-content;
}
.field-box_flex-direction_row {
  flex-direction: row;
}
.field-box.field-box_horizontal-padding_10 {
  padding: 0 10px;
}
.field-box:not(.field-box_is-borderless-paddingless).field-box:not(.field-box_is-paddingless).field-box:not(.field-box_is-kinda-padded).field-box:not(.field-box_no-padding).field-box:not(.field-box_is-bottom-padded):not(.field-box_no-padding-until-tablet):not(.field-box_has-large-padding):not(.field-box_is-only-padding-right-25):not(.field-box_has-large-vertical-padding) {
  padding: 10px 10px;
}
.field-box .field-box__label {
  height: auto;
  flex: 1;
  display: flex;
  align-items: center;
}
.field-box_borders_bottom-desktop-plus {
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
}
@media (max-width: 81.24em) {
  .field-box_borders_bottom-desktop-plus {
    border-bottom-width: 0;
  }
}
@media (max-width: 81.24em) {
  .field-box_padding-desktop-plus {
    padding-left: 0;
  }
}
.field-box_has-action {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.field-box_is-clean-holder {
  border: 0;
  background: transparent;
}
@media (max-width: 47.99em) {
  .field-box_no-padding-until-tablet {
    padding: 0;
  }
}
.field-box_no-padding {
  padding: 0;
}
.field-box_is-only-padding-right-25 {
  padding-left: 0;
  padding-right: 25px;
}
.field-box_margin-top_20 {
  margin-top: 20px;
}
@media (max-width: 47.99em) {
  .field-box_font_is-small-on-mobile {
    font-size: 13px;
  }
}
.field-box_width_full {
  width: 100%;
}
.field-box_border-left_none {
  border-left: none;
}
.field-box_font-size_14 {
  font-size: 14px;
}
.field-box_fill-parent {
  width: 100%;
  height: 100%;
}
.field-box_is-transparent {
  background-color: transparent;
}
.field-box_is-transparent .ember-power-select-trigger {
  background-color: transparent;
}
.field-box_is-grey {
  background-color: #F2F2F2;
}
.field-box_border-color_transparent {
  border-color: transparent;
}
.field-box_pointer-events_none {
  pointer-events: none;
}
.field-box:not(.field-box_center-children).field-box:not(.field-box_justify-children_end) {
  justify-content: var(--field-box-justify-content);
}

/**
 * @element add-btn
 */
.field-box__add-btn {
  color: var(--main-color);
  font-size: 14px;
}
.field-box__add-btn:hover {
  color: var(--main-color-dark);
}
.field-box__add-btn:active {
  color: var(--main-color);
}
.field-box__add-btn:before {
  content: "+";
  margin-right: 5px;
  display: inline-block;
}

.field-box__color-preview {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 4px;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

/**
 * @element label
 */
.field-box__label {
  height: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  position: relative;
}
.field-box__label_has-secondary {
  box-sizing: border-box;
  padding-top: 8px;
}

/**
 * The (Optional) text added to optional fields.
 *
 * @element optional
 */
.field-box__optional {
  text-transform: none;
  font-size: 10px;
  color: #B0A7A8;
  font-family: "Montserrat", sans-serif;
  font-weight: normal;
}
.field-box__optional_color_orange {
  color: #D57F73;
}
.field-box__optional_has-left-margin {
  margin-left: 5px;
}
.field-box__optional_is-uppercase {
  text-transform: uppercase;
}
.field-box__optional_font-style_italic {
  font-style: italic;
}
.field-box__optional_no-padding-left {
  padding-left: 0;
}

.field-box__required-symbol {
  display: inline-block;
  width: 7px;
  height: 7px;
  background-size: 7px 7px;
  background-image: var(--svg-required-star);
}
.field-box__required-symbol_color_red {
  background-image: url("/assets/images/icons/required-star-red.svg");
}
.field-box__required-symbol_color_grey {
  background-image: url("/assets/images/icons/required-star-grey.svg");
}
.field-box__required-symbol_color_dark {
  background-image: url("/assets/images/icons/required-star-dark.svg");
}

/**
 * @element input-container
 */
.field-box__input-container {
  margin-top: 7px;
}
.field-box__input-container_margin-top_0 {
  margin-top: 0;
}
.field-box__input-container_margin-top_10 {
  margin-top: 10px;
}
.field-box__input-container_checkbox {
  font-size: 13px;
  display: inline-block;
}
.field-box__input-container_is-inline {
  display: inline-block;
  width: 100%;
}
@media (min-width: 81.25em) {
  .field-box__input-container_is-inline {
    width: 60%;
  }
}
.field-box__input-container_has-color-preview {
  display: flex;
  align-items: center;
  border-bottom: solid 1px var(--color-light-grey-5);
  margin-top: 10px;
  padding-bottom: 2px;
}
.field-box__input-container_font-size_14 {
  font-size: 14px;
}
.field-box__input-container_height_full {
  height: 100%;
}
.field-box__input-container_has-bill-employer-left-border {
  position: relative;
}
.field-box__input-container_has-bill-employer-left-border::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 1px;
  height: 28px;
  background-color: var(--color-light-grey-5);
}

/**
 * @element input
 */
.field-box__input {
  box-sizing: border-box;
  background-clip: padding-box;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  -webkit-appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  color: #5C5050;
  font-size: 16px;
  border-bottom: solid 1px var(--main-border-color);
}
.field-box__input::-moz-placeholder {
  color: var(--color-light-grey-6);
  opacity: 1;
}
.field-box__input::placeholder {
  color: var(--color-light-grey-6);
  opacity: 1;
}
.field-box__input_is-bold {
  font-weight: bold;
}
.field-box__input_is-borderless {
  border: none;
}
.field-box__input_font-size_14 {
  font-size: 14px;
}
.field-box__input_font-size_13 {
  font-size: 13px;
}
.field-box__input_padding_10 {
  padding: 10px;
}
.field-box__input_padding-left_10 {
  padding-left: 10px;
}
.field-box__input_text-align_center {
  text-align: center;
}

/**
 * @element date-picker
 */
.field-box__date-picker {
  display: none;
}

/**
 * @modifier type
 * @value date
 */
.field-box_type_date .field-box__input {
  background: var(--svg-date) left center no-repeat;
  background-size: 12px 12px;
  padding-left: 15px;
}
.field-box_type_date .field-box__input_padding_10 {
  background-position-x: 10px;
  padding-left: 25px;
}

.field-box_type_stop-date .field-box__input {
  background: url("/assets/images/icons/date-red.svg") left center no-repeat;
  background-size: 12px 12px;
  padding-left: 15px;
}

.field-box__button {
  width: 17px;
  position: absolute;
  top: 37px;
  right: 11px;
  height: calc(100% - 37px - 12px);
  background: right center no-repeat;
  font-size: 0;
}
.field-box__button_type_show {
  background-size: 17px 20px;
  background-image: var(--svg-eye);
}
.field-box__button_type_hide {
  background-size: 17px 14px;
  background-image: url("/assets/images/icons/eye-slashed.svg");
}

/**
 * @element status
 */
.field-box__status {
  display: block;
  position: absolute;
  top: 15px;
  right: 10px;
  /**
   * @modifier value
   * @value warning
   * @for status
   */
  /**
   * @modifier in-line
   */
}
.field-box__status_is-tag {
  top: 35px;
  right: 20px;
}
.field-box__status_value_warning {
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: url("/assets/images/icons/field-error-blue.svg") center center no-repeat;
}
.field-box__status_left {
  position: relative;
  top: auto;
  right: auto;
  margin-left: 5px;
}
.field-box__status_in-line {
  top: 32px;
  right: 15px;
}

.field-box__status_value_error {
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: var(--svg-field-error) center center no-repeat;
}

.field-box__side-placeholder {
  display: block;
  position: absolute;
  right: 0;
  bottom: 10px;
  font-weight: 600;
  color: var(--color-light-grey-6);
}
.field-box__side-placeholder_position-right_10 {
  right: 10px;
}
.field-box__side-placeholder_color_black {
  color: #4A4A4A;
}
.field-box__side-placeholder_font_400 {
  font-weight: 400;
}
.field-box__side-placeholder_size_14 {
  font-size: 14px;
}

/**
 * @element help-tip
 */
.field-box__help-tip_margin-bottom_5 {
  margin-bottom: 5px;
}

.field-box__label-tag {
  box-sizing: border-box;
  margin-left: 20px;
  color: var(--main-color);
  text-align: center;
  border: solid 1px var(--main-color);
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  padding-right: 4px;
  padding-left: 4px;
  height: 14px;
  border-radius: 2px;
  text-transform: uppercase;
}

/**
 * @element right
 */
.field-box__right {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  font-size: 13px;
}

.field-box:hover:not(.field-box_is-read-only):not(.field-box_is-disabled):not(.field-box_is-loading-mask) {
  border-color: var(--main-color-contrast);
  z-index: 2;
}

/**
 * We disable any focus styling in testing to avoid unpredictable diffs
 * in Percy.
 *
 * @modifier is-focused
 */
.ember-application:not(#ember-testing) .field-box_is-focused {
  border-color: var(--main-color-dark);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  transform: translate(0, -1px);
  z-index: 2;
  /**
   * Sometimes we don't want the field box to translate on focus.
   * Usually because there's simply no place for it to translate.
   *
   * @modifier no-translate
   */
}
.ember-application:not(#ember-testing) .field-box_is-focused .field-box__input {
  border-color: var(--main-color-dark);
}
.ember-application:not(#ember-testing) .field-box_is-focused.field-box_is-borderless, .ember-application:not(#ember-testing) .field-box_is-focused.field-box_is-borderless-paddingless, .ember-application:not(#ember-testing) .field-box_is-focused.field-box_no-translate, .ember-application:not(#ember-testing) .field-box_is-focused.field-box_is-borderless-until-focused-or-errored {
  transform: none;
  box-shadow: none;
}
.ember-application:not(#ember-testing) .field-box_is-focused.field-box_is-error {
  border-color: #D57F73;
}
.ember-application:not(#ember-testing) .field-box_is-focused.field-box_is-error .field-box__input {
  border-color: #D57F73;
}

/**
* @modifier is-blue-warning
*/
.field-box_is-blue-warning:not(.field-box_is-loading),
.field-box_is-blue-warning:not(.field-box_is-loading):hover,
.ember-application:not(#ember-testing) .field-box_is-blue-warning:not(.field-box_is-loading),
.ember-application:not(#ember-testing) .field-box_is-blue-warning:not(.field-box_is-loading):hover {
  border-color: #305C94;
  z-index: 2;
}
.ember-application:not(#ember-testing) .field-box_is-blue-warning:not(.field-box_is-loading).field-box_is-focused .field-box__input,
.ember-application:not(#ember-testing) .field-box_is-blue-warning:not(.field-box_is-loading):hover.field-box_is-focused .field-box__input,
.ember-application:not(#ember-testing) .ember-application:not(#ember-testing) .field-box_is-blue-warning:not(.field-box_is-loading).field-box_is-focused .field-box__input,
.ember-application:not(#ember-testing) .ember-application:not(#ember-testing) .field-box_is-blue-warning:not(.field-box_is-loading):hover.field-box_is-focused .field-box__input {
  border-color: #305C94;
}

/**
* @modifier is-warning
*/
.field-box_is-warning:not(.field-box_is-loading),
.field-box_is-warning:not(.field-box_is-loading):hover,
.ember-application:not(#ember-testing) .field-box_is-warning:not(.field-box_is-loading),
.ember-application:not(#ember-testing) .field-box_is-warning:not(.field-box_is-loading):hover {
  border-color: #E39410;
  z-index: 2;
}
.ember-application:not(#ember-testing) .field-box_is-warning:not(.field-box_is-loading).field-box_is-focused .field-box__input,
.ember-application:not(#ember-testing) .field-box_is-warning:not(.field-box_is-loading):hover.field-box_is-focused .field-box__input,
.ember-application:not(#ember-testing) .ember-application:not(#ember-testing) .field-box_is-warning:not(.field-box_is-loading).field-box_is-focused .field-box__input,
.ember-application:not(#ember-testing) .ember-application:not(#ember-testing) .field-box_is-warning:not(.field-box_is-loading):hover.field-box_is-focused .field-box__input {
  border-color: #E39410;
}

/**
* @modifier is-purple
*/
.field-box_is-purple:not(.field-box_is-loading),
.field-box_is-purple:not(.field-box_is-loading):hover,
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading),
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading):hover {
  border-color: var(--color-purple);
  z-index: 2;
}
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading).field-box_is-focused .field-box__input,
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading):hover.field-box_is-focused .field-box__input,
.ember-application:not(#ember-testing) .ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading).field-box_is-focused .field-box__input,
.ember-application:not(#ember-testing) .ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading):hover.field-box_is-focused .field-box__input {
  border-color: var(--color-purple);
}
.field-box_is-purple:not(.field-box_is-loading) .field-box__input_has-colored-placeholder-error::-moz-placeholder, .field-box_is-purple:not(.field-box_is-loading):hover .field-box__input_has-colored-placeholder-error::-moz-placeholder, .ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading) .field-box__input_has-colored-placeholder-error::-moz-placeholder, .ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading):hover .field-box__input_has-colored-placeholder-error::-moz-placeholder {
  color: var(--color-purple);
  opacity: 1;
}
.field-box_is-purple:not(.field-box_is-loading) .field-box__input_has-colored-placeholder-error::placeholder,
.field-box_is-purple:not(.field-box_is-loading):hover .field-box__input_has-colored-placeholder-error::placeholder,
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading) .field-box__input_has-colored-placeholder-error::placeholder,
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading):hover .field-box__input_has-colored-placeholder-error::placeholder {
  color: var(--color-purple);
  opacity: 1;
}
.field-box_is-purple:not(.field-box_is-loading) .field-box__input_has-colored-input-error, .field-box_is-purple:not(.field-box_is-loading) .field-box__side-placeholder,
.field-box_is-purple:not(.field-box_is-loading):hover .field-box__input_has-colored-input-error,
.field-box_is-purple:not(.field-box_is-loading):hover .field-box__side-placeholder,
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading) .field-box__input_has-colored-input-error,
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading) .field-box__side-placeholder,
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading):hover .field-box__input_has-colored-input-error,
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading):hover .field-box__side-placeholder {
  color: var(--color-purple);
}
.field-box_is-purple:not(.field-box_is-loading).field-box_type_date .field-box__input,
.field-box_is-purple:not(.field-box_is-loading):hover.field-box_type_date .field-box__input,
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading).field-box_type_date .field-box__input,
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading):hover.field-box_type_date .field-box__input {
  background: url("/assets/images/icons/date-purple.svg") left center no-repeat;
}
.field-box_is-purple:not(.field-box_is-loading).field-box_type_date .field-box__input_padding_10,
.field-box_is-purple:not(.field-box_is-loading):hover.field-box_type_date .field-box__input_padding_10,
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading).field-box_type_date .field-box__input_padding_10,
.ember-application:not(#ember-testing) .field-box_is-purple:not(.field-box_is-loading):hover.field-box_type_date .field-box__input_padding_10 {
  background-position-x: 10px;
  padding-left: 25px;
}

/**
 * @modifier is-error
 */
.field-box_is-error:not(.field-box_is-loading),
.field-box_is-error:not(.field-box_is-loading):hover,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading),
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover {
  border-color: #D57F73;
  z-index: 2;
}
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading).field-box_is-focused .field-box__input,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover.field-box_is-focused .field-box__input,
.ember-application:not(#ember-testing) .ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading).field-box_is-focused .field-box__input,
.ember-application:not(#ember-testing) .ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover.field-box_is-focused .field-box__input {
  border-color: #D57F73;
}
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading).field-box_is-focused .field-box:not(.field-box_is-error) .field-box__input,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover.field-box_is-focused .field-box:not(.field-box_is-error) .field-box__input,
.ember-application:not(#ember-testing) .ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading).field-box_is-focused .field-box:not(.field-box_is-error) .field-box__input,
.ember-application:not(#ember-testing) .ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover.field-box_is-focused .field-box:not(.field-box_is-error) .field-box__input {
  border-color: var(--color-light-grey-5);
}
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading).field-box_is-focused .field-box_is-focused:not(.field-box_is-error) .field-box__input,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover.field-box_is-focused .field-box_is-focused:not(.field-box_is-error) .field-box__input,
.ember-application:not(#ember-testing) .ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading).field-box_is-focused .field-box_is-focused:not(.field-box_is-error) .field-box__input,
.ember-application:not(#ember-testing) .ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover.field-box_is-focused .field-box_is-focused:not(.field-box_is-error) .field-box__input {
  border-color: var(--main-color-dark);
}
.field-box_is-error:not(.field-box_is-loading) .field-box__input_has-colored-placeholder-error::-moz-placeholder, .field-box_is-error:not(.field-box_is-loading):hover .field-box__input_has-colored-placeholder-error::-moz-placeholder, .ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading) .field-box__input_has-colored-placeholder-error::-moz-placeholder, .ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover .field-box__input_has-colored-placeholder-error::-moz-placeholder {
  color: var(--color-red);
  opacity: 1;
}
.field-box_is-error:not(.field-box_is-loading) .field-box__input_has-colored-placeholder-error::placeholder,
.field-box_is-error:not(.field-box_is-loading):hover .field-box__input_has-colored-placeholder-error::placeholder,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading) .field-box__input_has-colored-placeholder-error::placeholder,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover .field-box__input_has-colored-placeholder-error::placeholder {
  color: var(--color-red);
  opacity: 1;
}
.field-box_is-error:not(.field-box_is-loading) .field-box__input_has-colored-input-error, .field-box_is-error:not(.field-box_is-loading) .field-box__side-placeholder,
.field-box_is-error:not(.field-box_is-loading):hover .field-box__input_has-colored-input-error,
.field-box_is-error:not(.field-box_is-loading):hover .field-box__side-placeholder,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading) .field-box__input_has-colored-input-error,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading) .field-box__side-placeholder,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover .field-box__input_has-colored-input-error,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover .field-box__side-placeholder {
  color: var(--color-red);
}
.field-box_is-error:not(.field-box_is-loading).field-box_type_date .field-box__input,
.field-box_is-error:not(.field-box_is-loading):hover.field-box_type_date .field-box__input,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading).field-box_type_date .field-box__input,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover.field-box_type_date .field-box__input {
  background: url("/assets/images/icons/date-error.svg") left center no-repeat;
}
.field-box_is-error:not(.field-box_is-loading).field-box_type_date .field-box__input_padding_10,
.field-box_is-error:not(.field-box_is-loading):hover.field-box_type_date .field-box__input_padding_10,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading).field-box_type_date .field-box__input_padding_10,
.ember-application:not(#ember-testing) .field-box_is-error:not(.field-box_is-loading):hover.field-box_type_date .field-box__input_padding_10 {
  background-position-x: 10px;
  padding-left: 25px;
}

/**
 * @modifier is-loading
 */
.field-box_is-loading {
  background-color: var(--main-color-light-16);
  border-color: var(--main-color-light-17);
  /**
   * Don't have much control over the class name as
   * power select is an addon.
   */
}
.field-box_is-loading .ember-power-select-trigger {
  background-color: var(--main-color-light-16);
}

/**
 * 1. Hide placeholder when readonly.
 *
 * @modifier is-read-only
 */
.field-box_is-read-only {
  /**
   * We do not want the scroll visible when readOnly
   */
}
.field-box_is-read-only, .field-box_is-read-only:hover:not(.field-box_is-read-only-hover-disabled), .field-box_is-read-only.field-box_is-focused {
  background: transparent;
}
.field-box_is-read-only .field-box__input, .field-box_is-read-only:hover:not(.field-box_is-read-only-hover-disabled) .field-box__input, .field-box_is-read-only.field-box_is-focused .field-box__input {
  border-color: transparent;
}
.field-box_is-read-only .field-box__input::-moz-placeholder, .field-box_is-read-only:hover:not(.field-box_is-read-only-hover-disabled) .field-box__input::-moz-placeholder, .field-box_is-read-only.field-box_is-focused .field-box__input::-moz-placeholder {
  opacity: 0; /* 1 */
}
.field-box_is-read-only .field-box__input::placeholder, .field-box_is-read-only:hover:not(.field-box_is-read-only-hover-disabled) .field-box__input::placeholder, .field-box_is-read-only.field-box_is-focused .field-box__input::placeholder {
  opacity: 0; /* 1 */
}
.field-box_is-read-only .ember-power-select-trigger[aria-disabled=true] {
  overflow-x: visible;
}

/**
 * We apply the readOnly color unless specified otherwise.
 *
 * 1. In Webkit browsers if input is readonly
 * '-webkit-text-fill-color' is applied instead of 'color'.
 */
.field-box_is-read-only:not(.field-box_read-only_normal-color):not(.field-box_read-only-color_red) .field-box__input, .field-box_is-read-only:not(.field-box_read-only_normal-color):not(.field-box_read-only-color_red):hover .field-box__input, .field-box_is-read-only:not(.field-box_read-only_normal-color):not(.field-box_read-only-color_red).field-box_is-focused .field-box__input {
  -webkit-text-fill-color: #9A8E8F; /* [1] */
  color: #9A8E8F;
}

.field-box_read-only_normal-color .ember-power-select-trigger[aria-disabled=true] {
  color: inherit;
  -webkit-text-fill-color: inherit;
}

.field-box_read-only-color_red {
  color: var(--color-red);
  -webkit-text-fill-color: var(--color-red);
}
.field-box_read-only-color_red.field-box_type_date .field-box__input {
  background: url("/assets/images/icons/date-error.svg") left center no-repeat;
}

/**
 * 1. In Webkit browsers if input is readonly
 * '-webkit-text-fill-color' is applied instead of 'color'.
 *
 * @modifier is-read-only
 */
.field-box_is-disabled, .field-box_is-disabled:hover, .field-box_is-disabled.field-box_is-focused {
  background: transparent;
}
.field-box_is-disabled .field-box__input, .field-box_is-disabled:hover .field-box__input, .field-box_is-disabled.field-box_is-focused .field-box__input {
  -webkit-text-fill-color: #9A8E8F; /* [1] */
  color: #9A8E8F;
  border-color: transparent;
}

.field-box_background_white {
  background-color: #FFF;
}

.field-box_disabled-background_white {
  background-color: #FFF;
}
.field-box_disabled-background_white:hover, .field-box_disabled-background_white.field-box_is-focused {
  background-color: #FFF;
}

.field-box_cursor_pointer {
  cursor: pointer;
}

.field-box__edit-pen {
  cursor: pointer;
  z-index: 1;
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--main-color);
}
.field-box__edit-pen::before {
  content: " ";
  margin-right: 5px;
  width: 10px;
  height: 10px;
  cursor: pointer;
  background: var(--svg-edit) center no-repeat;
}

/**
 * @element override-pen
 */
.field-box__override-pen {
  position: absolute;
  top: 0;
  right: 0;
  width: 17px;
  height: 17px;
  cursor: pointer;
  z-index: 1;
  background-color: #D57F73;
  background-image: url("/assets/images/icons/white-pencil.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 9px;
  /**
   * @modifier is-cancel
   */
}
.field-box__override-pen_is-cancel {
  background-image: var(--svg-x-sign-white);
}
@media (max-width: 47.99em) {
  .field-box__override-pen {
    width: 40px;
    height: 40px;
    background-size: 16px;
  }
}

/**
 * @element cancel
 */
.field-box__cancel {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  color: #D57F73;
  font-size: 14px;
  font-weight: 300;
  text-transform: capitalize;
  cursor: pointer;
}

/**
 * @element label-icon
 */
.field-box__label-icon {
  margin-left: 5px;
  width: 11px;
  height: 12px;
}

/**
 * When the label is larger than normal, we reduce padding a bit so the
 * label has a chance to fit on one line.
 *
 * @modifier has-large-label
 */
.field-box_has-large-label {
  padding: 0 4px;
}
.field-box_has-large-label .field-box__status_in-line {
  right: 9px;
}

/**
 * When field box is just an input (no label or anything).
 *
 * @modifier is-stand-alone
 */
.field-box_is-stand-alone .field-box__input-container {
  margin-top: 15px;
}

.field-box_is-in-table .field-box__input-container {
  margin-top: 0;
}

/**
 * When field box is used without borders and paddings.
 *
 * @modifier is-borderless-paddingless
 */
.field-box_is-borderless-paddingless {
  height: auto;
  border: 0;
  padding: 0;
  /**
   * @element status
   */
  /**
   * @element label
   */
}
.field-box_is-borderless-paddingless .field-box__status {
  display: none;
}
.field-box_is-borderless-paddingless .field-box__label {
  height: auto;
}

.field-box_is-borderless-until-focused-or-errored:not(.field-box_is-focused):not(.field-box_is-error) {
  border: 0;
}

.field-box_is-paddingless {
  padding: 0;
  height: auto;
}

.field-box_is-kinda-padded {
  padding: 0 5px;
  height: auto;
}

.field-box_is-bottom-padded {
  padding: 0 0 9px;
}

.field-box_is-borderless {
  border: 0;
}

.field-box_center-children {
  justify-content: center;
}

.field-box_justify-children_end {
  justify-content: flex-end;
}

.field-box_has-large-padding {
  padding: 10px 15px;
}

.field-box_height_auto {
  height: auto;
}

.field-box_has-large-vertical-padding {
  padding: 15px 10px;
}

/**
 * We only want to show the status on desktop plus.
 *
 * @modifier status-desktop-plus
 */
@media (max-width: 81.24em) {
  .field-box_status-desktop-plus .field-box__status {
    display: none;
  }
}

.field-box_has-dotted-border {
  border: dotted 1px var(--main-color);
}

.field-box__textarea {
  width: 100%;
  height: 145px;
  border: none;
  resize: none;
  outline: 0;
  color: var(--color-dark-grey-2);
}
.field-box__textarea::-moz-placeholder {
  color: var(--color-light-grey-6);
  opacity: 1;
}
.field-box__textarea::placeholder {
  color: var(--color-light-grey-6);
  opacity: 1;
}
.field-box__textarea_is-vertically-resizable {
  resize: vertical;
}
.field-box__textarea_height_100 {
  height: 100px;
}
.field-box__textarea_height_full {
  height: 100%;
}
.field-box__textarea_min-height_50 {
  min-height: 50px;
}
.field-box__textarea_box-sizing_border-box {
  box-sizing: border-box;
}
.field-box__textarea_border-bottom_grey {
  border-bottom: solid 1px var(--color-light-grey-5);
}
.field-box__textarea_horizontal-padding_10 {
  padding: 0 10px;
}

/**
 * Table containing fields (example Census Import - Edit step).
 *
 * 1. For box shadow to show
 *
 * @block field-table
 */
.field-table {
  padding-bottom: 5px; /* 1 */
  box-sizing: border-box;
  height: 100%;
}

/**
 * 1. Leave space for the top field boxes to translate upward on focus.
 *
 * @element body
 */
.field-table__body {
  height: calc(100% - 50px);
  padding-top: 1px; /* 1 */
  box-sizing: border-box;
  background: #FFF;
}

/**
 * @element row
 */
.field-table__row {
  display: flex;
  height: 50px;
}

/**
 * 1. 1px larger than row height so the field box borders overlap (to
 * avoid having a double border).
 *
 * @element cell
 */
.field-table__cell {
  flex: 1;
  box-sizing: border-box;
  /**
   * @modifier type
   * @value header
   */
  /**
   * @modifier type
   * @value body
   */
}
.field-table__cell_type_header {
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  align-items: center;
}
.field-table__cell_type_body {
  height: 51px; /* 1 */
}
.field-table__cell_type_body:not(:first-child) {
  margin-left: -1px;
  margin-bottom: -1px;
}

/**
 * @element cell-left
 */
.field-table__cell-left {
  flex: 1;
}

/**
 * @element row-container
 */
.field-table__row-container:last-child .field-table__cell {
  margin-bottom: 0;
}

/**
 * Encapsulates grids present in workflows that contain input fields.
 *
 * 1. Unfortunately when using liquid-if to wrap the grid, the first row will become
 * hidden under the liquid-child when focused/translated. This provides space to avoid that.
 *
 * @block fields-grid
 */
.fields-grid {
  box-sizing: border-box;
  margin-top: 1px; /* 1 */
}
.fields-grid_margin-top_0 {
  margin-top: 0;
}
.fields-grid_is-full-width {
  width: 100%;
}
.fields-grid_padding_10 {
  padding: 10px;
}
.fields-grid_padding_20 {
  padding: 20px;
}
.fields-grid_background_grey {
  background-color: #F8F8F8;
}
.fields-grid_is-changed {
  background-color: #FFF4E8;
}
.fields-grid_font-size_14 .fields-grid__cell {
  font-size: 14px;
}
.fields-grid_font-size_16 .fields-grid__cell {
  font-size: 16px;
}
.fields-grid_is-container {
  container-type: inline-size;
}

.fields-grid_font-size_13 .fields-grid__cell {
  font-size: 13px;
}

.fields-grid__grid {
  box-sizing: border-box;
}
.fields-grid__grid_has-cell-padding .fields-grid__cell {
  padding: 10px 20px;
}
.fields-grid__grid_padding-top_15 {
  padding-top: 15px;
}
.fields-grid__grid_is-changed {
  background-color: #FFF4E8;
}

/**
 * 1. Allows content to overflow outside the cells, which allows text overflow
 * styles to apply. ex: ellipsis.
 */
.fields-grid__cell {
  box-sizing: border-box;
  min-width: 0; /* 1 */
}
.fields-grid__cell_is-content-centered {
  display: flex;
  align-items: center;
}
.fields-grid__cell_is-content-baseline {
  display: flex;
  align-items: baseline;
}
.fields-grid__cell_justify-content_flex-end {
  display: flex;
  justify-content: flex-end;
}
.fields-grid__cell_justify-content_center {
  display: flex;
  justify-content: center;
}
.fields-grid__cell_align-items_flex-end {
  display: flex;
  align-items: flex-end;
}
.fields-grid__cell_align-items_center {
  display: flex;
  align-items: center;
}
.fields-grid__cell_is-padded {
  padding: 5px 0;
}
.fields-grid__cell_side-padding_10 {
  padding-right: 10px;
  padding-left: 10px;
}
.fields-grid__cell_has-border-bottom {
  border-bottom: solid 1px #C7D7D7;
}
@media (max-width: 47.99em) {
  .fields-grid__cell_has-border-bottom-only-mobile {
    border-bottom: solid 1px #C7D7D7;
  }
}
.fields-grid__cell_padding-bottom_10 {
  padding-bottom: 10px;
}
.fields-grid__cell_vertical-padding_12 {
  padding-top: 12px;
  padding-bottom: 12px;
}
.fields-grid__cell_has-filter-border {
  position: relative;
  box-sizing: border-box;
}
.fields-grid__cell_has-filter-border:after {
  position: absolute;
  content: "";
  display: block;
  left: 12px;
  right: 12px;
  height: 1px;
  bottom: 0;
  background-color: #E3EBEB;
}
.fields-grid__cell_margin-top_20 {
  margin-top: 20px;
}
.fields-grid__cell_margin-bottom_10 {
  margin-bottom: 10px;
}
.fields-grid__cell_color_dark-grey {
  color: #494949;
}
.fields-grid__cell_font-weight_bold {
  font-weight: bold;
}

/**
 * 1. To hide the right border of the rightmost cell.
 */
.fields-grid__grid_has-inner-borders {
  margin-right: -1px; /* 1 */
}
.fields-grid__grid_has-inner-borders .fields-grid__cell {
  padding-left: 20px;
  border-right: 1px solid #E9E9E9;
}

.fields-grid__grid_is-task-detail-grid {
  margin-left: 10px;
}
.fields-grid__grid_is-task-detail-grid .fields-grid__cell {
  padding: 0 10px;
}
@media (max-width: 47.99em) {
  .fields-grid__grid_is-task-detail-grid .fields-grid__cell {
    border-right: none;
  }
}

.fields-grid_is-employee-grid-partner-portal {
  margin-top: 0;
  border-bottom: 1px solid var(--color-light-blue);
}
.fields-grid_is-employee-grid-partner-portal .fields-grid__cell {
  padding: 10px 20px;
}

.fields-grid_is-salary-grid-partner-portal,
.fields-grid_is-employee-classes-grid-employer-portal,
.fields-grid_is-employee-subgroups-grid-employer-portal {
  margin-top: 0;
}
.fields-grid_is-salary-grid-partner-portal .fields-grid__cell,
.fields-grid_is-employee-classes-grid-employer-portal .fields-grid__cell,
.fields-grid_is-employee-subgroups-grid-employer-portal .fields-grid__cell {
  padding: 0 15px 5px;
}
@media (min-width: 81.25em) {
  .fields-grid_is-salary-grid-partner-portal:first-child .fields-grid__cell,
  .fields-grid_is-employee-classes-grid-employer-portal:first-child .fields-grid__cell,
  .fields-grid_is-employee-subgroups-grid-employer-portal:first-child .fields-grid__cell {
    padding-top: 15px;
  }
  .fields-grid_is-salary-grid-partner-portal:last-child .fields-grid__cell,
  .fields-grid_is-employee-classes-grid-employer-portal:last-child .fields-grid__cell,
  .fields-grid_is-employee-subgroups-grid-employer-portal:last-child .fields-grid__cell {
    padding-bottom: 15px;
  }
}
@media (max-width: 81.24em) {
  .fields-grid_is-salary-grid-partner-portal:not(:last-child),
  .fields-grid_is-employee-classes-grid-employer-portal:not(:last-child),
  .fields-grid_is-employee-subgroups-grid-employer-portal:not(:last-child) {
    border-bottom: 1px solid var(--color-light-blue);
  }
}

.fields-grid_is-employee-classes-grid-employee-portal {
  margin-top: 0;
}
.fields-grid_is-employee-classes-grid-employee-portal .fields-grid__cell {
  padding: 0 15px 5px;
}
@media (min-width: 51.875em) {
  .fields-grid_is-employee-classes-grid-employee-portal:first-child .fields-grid__cell {
    padding-top: 15px;
  }
  .fields-grid_is-employee-classes-grid-employee-portal:last-child .fields-grid__cell {
    padding-bottom: 15px;
  }
}
@media (max-width: 51.865em) {
  .fields-grid_is-employee-classes-grid-employee-portal:not(:last-child) {
    border-bottom: 1px solid var(--color-light-blue);
  }
}

/**
 * @block file-picker
 */
.file-picker {
  height: 100%;
  display: flex;
  align-items: center;
  padding: var(--file-picker-padding);
  font-size: var(--file-picker-font-size);
  /**
   * When the user has a file dragged above it.
   *
   * @modifier is-drag-over
   */
}
.file-picker_is-drag-over {
  background-color: var(--main-color);
  color: white;
}
.file-picker_has-centered-text .file-picker__button,
.file-picker_has-centered-text .file-picker__drag-over {
  justify-content: center;
}

.file-picker__drag-over {
  width: 100%;
  display: flex;
}

/**
 * 1. Let the button fill the container.
 *
 * @element button
 */
.file-picker__button {
  width: 100%; /* 1 */
  height: 100%; /* 1 */
  display: flex;
  align-items: center;
  outline: none;
}

.file-picker__button-text {
  color: var(--main-color);
  font-size: 14px;
}
.file-picker__button-text:before {
  content: "";
  width: 11px;
  height: 11px;
  background: var(--svg-upload) center no-repeat;
  display: inline-block;
  margin-right: 8px;
}

/**
 * @element file
 */
.file-picker__file {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: var(--file-picker-file-justify-content);
  background-color: var(--file-picker-file-background-color);
  color: var(--file-picker-file-color);
}
.file-picker__file:before {
  content: "";
  width: 20px;
  height: 100%;
  background: var(--file-picker-file-before-background);
  background-size: 10px 8px;
}

/**
 * @element file-name
 */
.file-picker__file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: var(--file-picker-file-name-padding-left);
  background: var(--file-picker-file-name-background);
  background-size: var(--file-picker-file-name-background-size);
}

/**
 * @element file-remove
 */
.file-picker__file-remove {
  height: 20px;
  width: var(--file-picker-file-remove-width);
  background: var(--file-picker-file-remove-background-image) center center no-repeat;
  background-size: 11px 11px;
}
.file-picker__file-remove:hover {
  opacity: 0.7;
}

/**
 * @block file-picker-overlay
 */
.file-picker-overlay {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 15;
  background-color: #FFF;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #1297AC;
  font-size: 20px;
  animation: file-picker-overlay__overlay-enter 200ms ease;
  opacity: 0.8;
}

.file-picker-overlay__arrow {
  background: url("/assets/images/icons/arrow-up-green-long.svg") center no-repeat;
  width: 26px;
  height: 43px;
  margin-bottom: 15px;
}

.file-picker-overlay_theme_blue {
  color: #034FA8;
}
.file-picker-overlay_theme_blue .file-picker-overlay__arrow {
  background-image: url("/assets/images/icons/arrow-up-blue-long.svg");
}

@keyframes file-picker-overlay__overlay-enter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}
.simple-menu {
  height: 100%;
  position: relative;
  /**
   * In some cases the simple modal is very wide.
   *
   * @modifier is-wide
   */
  /**
   * The medium width is larger than the large one.
   */
  /**
   * Used such that the modal opens above tables.
   *
   * @for modal
   */
  /**
   * Used such that the modal opens above tables with dropdowns.
   *
   * @for modal
   */
}
.simple-menu_is-wide .simple-menu__modal {
  width: 450px;
}
.simple-menu_is-super-wide .simple-menu__modal {
  width: 590px;
}
.simple-menu_is-large .simple-menu__modal {
  width: 230px;
}
.simple-menu_is-medium-width .simple-menu__modal {
  width: 300px;
}
.simple-menu_modal-width_200 .simple-menu__modal {
  width: 200px;
}
.simple-menu_modal-width_210 .simple-menu__modal {
  width: 210px;
}
.simple-menu_modal-width_250 .simple-menu__modal {
  width: 250px;
}
.simple-menu_modal-width_300 .simple-menu__modal {
  width: 300px;
}
.simple-menu_modal-width_365 .simple-menu__modal {
  width: 365px;
}
.simple-menu_modal-width_400 .simple-menu__modal {
  width: 400px;
}
.simple-menu_modal-width_800 .simple-menu__modal {
  width: 800px;
}
.simple-menu_z-index_2 .simple-menu__modal {
  z-index: 2;
}
.simple-menu_z-index_3 .simple-menu__modal {
  z-index: 3;
}
.simple-menu_is-on-right .simple-menu__modal {
  left: 13px;
}
.simple-menu_is-on-right .simple-menu__modal-header {
  justify-content: flex-start;
}
.simple-menu_icon_small {
  /**
   * @element icon
   */
  /**
   * @element modal
   */
}
.simple-menu_icon_small .simple-menu__icon {
  height: 12px;
  width: 11px;
  background-size: 100%;
  margin-top: -6px;
  margin-right: -5.5px;
  /**
   * @modifier location
   * @value modal
   */
}
.simple-menu_icon_small .simple-menu__icon_location_modal {
  margin-top: auto;
  margin-right: auto;
}
.simple-menu_icon_small .simple-menu__modal {
  margin-top: -16px;
  margin-right: -15.5px;
}
.simple-menu:hover:not(.simple-menu_is-highlighted) {
  /**
   * @element icon
   */
}
.simple-menu:hover:not(.simple-menu_is-highlighted) .simple-menu__icon {
  background-image: url("/assets/images/icons/green-filter.svg");
}

/**
 * Wraps the trigger to decouple it from wrapping
 * component.
 *
 * @element trigger-icon
 */
.simple-menu__trigger-icon {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}
.simple-menu__trigger-icon_is-vertical {
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 5px 0;
  margin-right: 10px;
}
.simple-menu__trigger-icon_is-vertical .simple-menu__label {
  padding: 0;
  margin: 0;
  flex: 1;
}

/**
 * Holds the simple icon
 *
 * @element trigger
 */
.simple-menu__trigger {
  position: relative;
  flex: 1;
  height: 100%;
}
.simple-menu__trigger_is-close-button {
  width: 40px;
  flex: none;
}
.simple-menu__trigger_min-width_30 {
  min-width: 30px;
}

/**
 * @element label
 */
.simple-menu__label {
  height: 100%;
  display: flex;
  align-items: center;
  padding-right: 10px;
  margin-left: -6px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  color: #1297AC;
  font-size: 10px;
}

/**
 * @element icon
 */
.simple-menu__icon {
  position: absolute;
  top: 50%;
  right: 50%;
  height: 18px;
  width: 16px;
  margin-top: -9px;
  margin-right: -8px;
  background-repeat: no-repeat;
  background-image: url("/assets/images/icons/filter.svg");
  /**
   * @modifier location
   * @value modal
   */
  /**
   * @modifier location
   * @value trigger
   */
  /**
   * In order to preload the image so it does not glitch when we hover.
   */
}
.simple-menu__icon_location_modal {
  background-image: url("/assets/images/icons/green-filter.svg");
  animation: simple-menu__rotate-icon 200ms linear;
  transform: rotate(90deg);
  top: 10px;
  right: 10px;
  margin-top: auto;
  margin-right: auto;
}
.simple-menu__icon_location_trigger {
  transition: transform 200ms linear;
  transform: rotate(0deg);
}
.simple-menu__icon::after {
  background-image: url("/assets/images/icons/green-filter.svg");
  content: "";
}

/**
 * 1. Make the modal scrollable.
 */
.simple-menu__modal {
  overflow: auto; /* 1 */
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -19px;
  margin-right: -18px;
  width: 158px;
  z-index: 2;
  border-radius: 3px;
  background-color: #FFF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  animation: simple-menu__fade-in 300ms linear;
  /**
   * Sometimes statuses/items don't fit in the regular width.
   *
   * @modifier width
   * @value wide
   */
}
.simple-menu__modal_width_wide {
  width: 190px;
}

/**
 * @element modal-header
 */
.simple-menu__modal-header {
  display: flex;
  justify-content: flex-end;
  height: 42px;
  flex-shrink: 0;
}
.simple-menu__modal-header_has-padding-bottom {
  padding-bottom: 3px;
}

.simple-menu__modal-body {
  margin-bottom: 15px;
}

.simple-menu_is-open .simple-menu__icon_location_trigger {
  transform: rotate(90deg);
}

.simple-menu__column-holder {
  display: flex;
}
@media (max-width: 47.99em) {
  .simple-menu__column-holder {
    padding-top: 20px;
  }
}
@media (max-width: 31.24em) {
  .simple-menu__column-holder {
    flex-direction: column;
  }
}
@media (max-width: 74.99em) {
  .simple-menu__column-holder_is-dialog-until_1200 {
    padding-top: 20px;
  }
}

.simple-menu__column {
  flex: 1;
  padding-left: 15px;
  padding-right: 10px;
  margin-bottom: 30px;
}
.simple-menu__column:last-child {
  margin-bottom: 0;
}

.simple-menu__status-title {
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  margin-bottom: 10px;
}

.simple-menu__select-all::after {
  content: "";
  display: block;
  margin: 10px 12px 10px 0;
  height: 1px;
  bottom: 0;
  background-color: #E3EBEB;
}

.simple-menu__trigger-button {
  height: 100%;
  width: 100%;
}

.simple-menu_type_filter .simple-menu__modal, .simple-menu_type_sort .simple-menu__modal {
  display: flex;
  flex-direction: column;
}
.simple-menu_type_filter .simple-menu__modal-header, .simple-menu_type_sort .simple-menu__modal-header {
  border-bottom: 1px solid #DADADA;
  height: 45.5px;
}
.simple-menu_type_filter .simple-menu__modal-body, .simple-menu_type_sort .simple-menu__modal-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  margin-bottom: 0;
}

@media (min-width: 48em) {
  .simple-menu_is-bulky {
    /**
     * @element icon
     */
    /**
     * @element modal
     */
  }
  .simple-menu_is-bulky .simple-menu__icon {
    height: 12px;
    width: 11px;
    background-size: 100%;
    margin-top: -6px;
    margin-right: -5.5px;
    /**
     * @modifier location
     * @value modal
     */
  }
  .simple-menu_is-bulky .simple-menu__icon_location_modal {
    margin-top: auto;
    margin-right: auto;
  }
  .simple-menu_is-bulky .simple-menu__modal {
    margin-top: -16px;
    margin-right: -15.5px;
  }
}
@media (max-width: 47.99em) {
  .simple-menu_is-bulky .simple-menu__trigger {
    margin-bottom: 12px;
    flex: none;
    height: auto;
  }
  .simple-menu_is-bulky .simple-menu__trigger-icon {
    padding: 0;
  }
  .simple-menu_is-bulky .simple-menu__icon {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    position: static;
    background-image: url("/assets/images/icons/green-filter.svg");
  }
  .simple-menu_is-bulky .simple-menu__label {
    height: auto;
    flex: none;
  }
}

.simple-menu_is-highlighted .simple-menu__icon {
  background-image: var(--svg-red-filter);
}

.simple-menu_theme_blue .simple-menu__label {
  color: #034FA8;
}
.simple-menu_theme_blue:hover {
  background-color: #D7D7D7;
}
.simple-menu_theme_blue:hover.simple-menu_is-light-on-hover {
  border-radius: 3px;
  background-color: #EAEAEA;
}
.simple-menu_theme_blue:not(.simple-menu_is-highlighted):hover .simple-menu__icon {
  background-image: url("/assets/images/themes/blue/icons/filter.svg");
}
.simple-menu_theme_blue:not(.simple-menu_is-highlighted) .simple-menu__icon {
  background-image: url("/assets/images/themes/blue/icons/filter.svg");
}
.simple-menu_theme_blue:not(.simple-menu_is-highlighted) .simple-menu__icon_location_modal {
  background-image: url("/assets/images/themes/blue/icons/filter.svg");
}
.simple-menu_theme_blue:not(.simple-menu_is-highlighted) .simple-menu__icon::after {
  background-image: url("/assets/images/themes/blue/icons/filter.svg");
}

.simple-menu_icon-type_sort.simple-menu_theme_blue:hover:not(.simple-menu_is-highlighted) .simple-menu__icon {
  background-image: url("/assets/images/themes/blue/icons/sort.svg");
}
.simple-menu_icon-type_sort.simple-menu_theme_blue:not(.simple-menu_is-highlighted) .simple-menu__icon {
  background-image: url("/assets/images/themes/blue/icons/sort.svg");
}
.simple-menu_icon-type_sort.simple-menu_theme_blue:not(.simple-menu_is-highlighted) .simple-menu__icon_location_modal {
  background-image: url("/assets/images/themes/blue/icons/sort.svg");
}
.simple-menu_icon-type_sort.simple-menu_theme_blue:not(.simple-menu_is-highlighted) .simple-menu__icon::after {
  background-image: url("/assets/images/themes/blue/icons/sort.svg");
}

.simple-menu_theme_green .simple-menu__label {
  color: #1297AC;
}
.simple-menu_theme_green:hover {
  background-color: #D7D7D7;
}
.simple-menu_theme_green:hover.simple-menu_is-green-on-hover {
  background-color: #C5E5EB;
}
.simple-menu_theme_green:not(.simple-menu_is-highlighted):hover .simple-menu__icon {
  background-image: url("/assets/images/icons/green-filter.svg");
}
.simple-menu_theme_green:not(.simple-menu_is-highlighted) .simple-menu__icon {
  background-image: url("/assets/images/icons/green-filter.svg");
}
.simple-menu_theme_green:not(.simple-menu_is-highlighted) .simple-menu__icon_location_modal {
  background-image: url("/assets/images/icons/green-filter.svg");
}
.simple-menu_theme_green:not(.simple-menu_is-highlighted) .simple-menu__icon::after {
  background-image: url("/assets/images/icons/green-filter.svg");
}

.simple-menu_icon-type_sort.simple-menu_theme_green:hover:not(.simple-menu_is-highlighted) .simple-menu__icon {
  background-image: url("/assets/images/themes/green/icons/sort.svg");
}
.simple-menu_icon-type_sort.simple-menu_theme_green:not(.simple-menu_is-highlighted) .simple-menu__icon {
  background-image: url("/assets/images/themes/green/icons/sort.svg");
}
.simple-menu_icon-type_sort.simple-menu_theme_green:not(.simple-menu_is-highlighted) .simple-menu__icon_location_modal {
  background-image: url("/assets/images/themes/green/icons/sort.svg");
}
.simple-menu_icon-type_sort.simple-menu_theme_green:not(.simple-menu_is-highlighted) .simple-menu__icon::after {
  background-image: url("/assets/images/themes/green/icons/sort.svg");
}

.simple-menu_icon-type_profile.simple-menu_theme_green:not(.simple-menu_is-highlighted) .simple-menu__icon {
  background-image: url("/assets/images/icons/profiles/employee.svg");
}
.simple-menu_icon-type_profile.simple-menu_theme_green:not(.simple-menu_is-highlighted) .simple-menu__icon_location_modal {
  animation: none;
  transform: none;
}
.simple-menu_icon-type_profile.simple-menu_theme_green.simple-menu_is-highlighted .simple-menu__icon {
  background-image: url("/assets/images/icons/profiles/employee-orange.svg");
}
.simple-menu_icon-type_profile.simple-menu_theme_green.simple-menu_is-highlighted .simple-menu__icon_location_modal {
  animation: none;
  transform: none;
}
.simple-menu_icon-type_profile.simple-menu_theme_green.simple-menu_is-open .simple-menu__icon_location_trigger {
  transform: none;
}

@keyframes simple-menu__fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes simple-menu__rotate-icon {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(90deg);
  }
}
.filter-errors {
  display: flex;
  align-items: center;
}

.filter-errors__counter-container {
  margin-left: 7px;
  background-color: #D57F73;
  color: #FFFFFF;
  border-radius: 50%;
  min-width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-errors__counter {
  height: 13px;
  font-weight: 600;
  font-size: 10px;
}

.filter-errors_is-reversed {
  flex-direction: row-reverse;
}
.filter-errors_is-reversed .filter-errors__counter-container {
  margin-left: 0;
  margin-right: 6px;
}

/**
 * @block flow-navigation
 */
.flow-navigation {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
@media (max-width: 47.99em) {
  .flow-navigation {
    padding: 0;
  }
}
@media (max-width: 81.24em) {
  .flow-navigation_breakpoint_1300 {
    padding-right: 15px;
  }
}
.flow-navigation_breakpoint_1300 .flow-navigation__steps {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media (max-width: 81.24em) {
  .flow-navigation_breakpoint_1300 .flow-navigation__steps {
    width: 240px;
    height: 100%;
  }
}
@media (min-width: 81.25em) {
  .flow-navigation_breakpoint_1300 .flow-navigation__steps {
    max-height: 100%;
    overflow: auto;
    flex: 1;
  }
}
@media (max-width: 47.99em) {
  .flow-navigation_breakpoint_1300 .flow-navigation__steps {
    width: 100%;
  }
}
@media (max-width: 63.99em) {
  .flow-navigation:not(.flow-navigation_breakpoint_1300) {
    padding-right: 15px;
  }
}
.flow-navigation:not(.flow-navigation_breakpoint_1300) .flow-navigation__steps {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media (max-width: 63.99em) {
  .flow-navigation:not(.flow-navigation_breakpoint_1300) .flow-navigation__steps {
    width: 240px;
    height: 100%;
  }
}
@media (min-width: 64em) {
  .flow-navigation:not(.flow-navigation_breakpoint_1300) .flow-navigation__steps {
    max-height: 100%;
    overflow: auto;
    flex: 1;
  }
}
@media (max-width: 47.99em) {
  .flow-navigation:not(.flow-navigation_breakpoint_1300) .flow-navigation__steps {
    width: 100%;
  }
}
.flow-navigation.flow-navigation_padding-right_0 {
  padding-right: 0;
}

.flow-navigation__wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
.flow-navigation__wrapper_is-horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.flow-navigation__popup {
  min-width: 240px;
}
@media (max-width: 47.99em) {
  .flow-navigation__popup {
    min-width: 100vw;
  }
}

/**
 * 1. Needed for the absolute positioning of the circle.
 */
.flow-navigation__item-link {
  display: flex;
  align-items: center;
  position: relative; /* 1 */
  height: 44px;
  width: 100%;
  box-sizing: border-box;
  padding-left: 35px;
}

/**
 * 1. Should be greater than side-line z-index.
 */
.flow-navigation__circle {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: solid 1px #034FA8;
  border-color: #034FA8;
  margin-right: 7px;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2; /* 1 */
  transition: transform 200ms ease;
  background-color: var(--color-light-grey-7);
}
.flow-navigation__circle_is-sub {
  left: 0;
  background-color: #C7D6E7;
}

.flow-navigation__side-line {
  position: absolute;
  top: 0;
  left: 24px;
  width: 1px;
  height: 100%;
  background-color: #034FA8;
}

.flow-navigation__item {
  color: #9B9B9B;
  font-size: 13px;
  position: relative;
  background-color: var(--color-light-grey-7);
  /**
   * @for item
   */
  /**
   * @for item
   */
  /**
   * @for item
   */
  /**
   * @for item
   */
  /**
   * @for item
   */
  /**
   * @for item
   */
  /**
   * @for item
   */
  /**
   * @for item
   */
  /**
   * @for item
   */
}
.flow-navigation__item_is-current {
  background-color: #C7D6E7;
}
.flow-navigation__item_is-active {
  color: #4A4A4A;
}
.flow-navigation__item_is-active .flow-navigation__item-link > .flow-navigation__circle {
  background-color: #034FA8;
}
.flow-navigation__item_is-not-clickable .flow-navigation__item-link {
  cursor: default;
}
.flow-navigation__item_is-current .flow-navigation__item-link {
  font-weight: bold;
  color: #4A4A4A;
}
.flow-navigation__item_is-current:not(.flow-navigation__item_is-clickable) .flow-navigation__item-link {
  cursor: default;
}
.flow-navigation__item:not(.flow-navigation__item_is-not-clickable).flow-navigation__item:not(.flow-navigation__item_is-current):hover {
  background-color: rgb(204, 218, 232);
}
.flow-navigation__item:not(.flow-navigation__item_is-not-clickable).flow-navigation__item:not(.flow-navigation__item_is-current):hover .flow-navigation__circle {
  transform: scale(1.3) translateY(-50%);
}
.flow-navigation__item_is-highlighted .flow-navigation__item-link {
  background-color: rgb(204, 218, 232);
}
.flow-navigation__item_height_large .flow-navigation__item-link {
  height: 60px;
}
.flow-navigation__item_is-first .flow-navigation__side-line {
  top: auto;
  bottom: 0;
  height: calc(100% - 22px);
}
.flow-navigation__item_is-last .flow-navigation__side-line {
  bottom: auto;
  top: 0;
  height: 22px;
}
.flow-navigation__item_is-first.flow-navigation__item_is-last .flow-navigation__side-line {
  height: 0;
}

.flow-navigation__sub-items {
  padding-left: 35px;
  padding-bottom: 10px;
}

@keyframes expand-sub-item {
  0% {
    height: 0;
  }
  100% {
    height: 30px;
  }
}
/**
 * 1. For the circle positioning.
 */
.flow-navigation__sub-item {
  position: relative; /* 1 */
  padding-left: 15px;
  display: flex;
  align-items: center;
  height: 30px;
  color: #9B9B9B;
  animation: expand-sub-item 100ms ease;
  /**
   * @for sub-item
   */
  /**
   * @for sub-item
   */
  /**
   * @for sub-item
   */
  /**
   * @for sub-item
   */
}
.flow-navigation__sub-item_is-active.flow-navigation__sub-item:not(.flow-navigation__sub-item_is-disabled) {
  color: #4A4A4A;
}
.flow-navigation__sub-item_is-active.flow-navigation__sub-item:not(.flow-navigation__sub-item_is-disabled) .flow-navigation__circle {
  background-color: #034FA8;
}
.flow-navigation__sub-item_is-active.flow-navigation__sub-item_is-disabled .flow-navigation__circle {
  background-color: #9B9B9B;
}
.flow-navigation__sub-item_is-disabled .flow-navigation__circle {
  border-color: #9B9B9B;
}
.flow-navigation__sub-item_is-current {
  cursor: default;
}
.flow-navigation__sub-item_is-not-clickable {
  cursor: default;
}
.flow-navigation__sub-item:not(.flow-navigation__sub-item_is-not-clickable).flow-navigation__sub-item:not(.flow-navigation__sub-item_is-current):hover .flow-navigation__circle {
  transform: scale(1.3) translateY(-50%);
}

.flow-navigation__row-container {
  /**
   * @for row-container
   */
}
.flow-navigation__row-container_is-standalone {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%;
}
.flow-navigation__row-container_is-standalone .flow-navigation__item {
  height: 100%;
  position: relative;
}
.flow-navigation__row-container_is-standalone .flow-navigation__item:after {
  content: "";
  width: 10px;
  height: 5px;
  background: url("/assets/images/icons/arrow-up.svg") center center no-repeat;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}
.flow-navigation__row-container_is-loading {
  height: 100%;
}
.flow-navigation__row-container_is-loading .flow-navigation__item {
  height: 100%;
}

/**
 * 1. Prevents scroll from appearing.
 */
.flow-navigation__buttons {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* 1 */
  flex-direction: column;
}
.flow-navigation__buttons_is-flex-row {
  flex-direction: row;
}

.flow-navigation__button-container {
  flex: 1;
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
  /**
   * @for button-container
   */
}
.flow-navigation__button-container_is-right {
  width: auto;
  min-width: 220px;
  padding: 0;
}
.flow-navigation__button-container:not(.flow-navigation__button-container_is-right) {
  margin-bottom: 10px;
}

.flow-navigation__back-button {
  margin-right: 40px;
}

.flow-navigation__row-container_theme_green .flow-navigation__item {
  background-color: #F4FBFC;
}
.flow-navigation__row-container_theme_green .flow-navigation__item_is-current {
  background-color: #E3F4F6;
}
.flow-navigation__row-container_theme_green .flow-navigation__item_is-active .flow-navigation__item-link > .flow-navigation__circle {
  background-color: #1297AC;
}
.flow-navigation__row-container_theme_green .flow-navigation__item_is-highlighted .flow-navigation__item-link {
  background-color: #E9F6F8;
}
.flow-navigation__row-container_theme_green .flow-navigation__text {
  max-width: calc(100% - 30px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.flow-navigation__row-container_theme_green .flow-navigation__side-line {
  background-color: #1297AC;
}
.flow-navigation__row-container_theme_green .flow-navigation__circle {
  border-color: #1297AC;
  background-color: #F4FBFC;
}
.flow-navigation__row-container_theme_green .flow-navigation__item:not(.flow-navigation__item_is-not-clickable).flow-navigation__item:not(.flow-navigation__item_is-current):hover {
  background-color: #E9F6F8;
}
.flow-navigation__row-container_theme_green .flow-navigation__sub-item:not(.flow-navigation__sub-item_is-disabled).flow-navigation__sub-item_is-active .flow-navigation__circle {
  background-color: #1297AC;
}

/**
 * Contains 2 columns that show next to each other on desktop and 2 separate
 * tabs on mobile that can be switched between.
 *
 * @block form-columns
 */
.form-columns {
  height: 100%;
  width: 100%;
}
.form-columns_min-height_0 {
  min-height: 0;
}
@media (min-width: 64em) {
  .form-columns {
    display: flex;
    flex-direction: column;
  }
}

/**
 * @element title
 */
.form-columns__title {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  color: #0D7383;
}

/**
 * Contains title and navigation.
 *
 * @element header
 */
.form-columns__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 13px 0 18px;
  flex-shrink: 0;
}
@media (min-width: 48em) {
  .form-columns__header {
    padding: 0;
  }
}
.form-columns__header_justify-content_flex-end {
  justify-content: flex-end;
}
.form-columns__header_margin-right_10 {
  margin-right: 10px;
}

/**
 * @element title-date
 */
.form-columns__title-date {
  display: inline-block;
  margin-left: 8px;
  color: #5C5050;
  font-size: 13px;
  font-weight: bold;
}

/**
 * @element column-header
 */
.form-columns__column-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  height: 20px;
  /**
   * @modifier is-required-set
   * @for column-header
   */
}
.form-columns__column-header_is-required-set {
  margin-top: 10px;
  margin-bottom: 10px;
  justify-content: flex-start;
  padding-right: 13px;
  height: auto;
  box-sizing: border-box;
}
@media (max-width: 63.99em) {
  .form-columns__column-header_is-required-set {
    margin-top: 17px;
  }
}
.form-columns__column-header_height_auto {
  height: auto;
}
@media (max-width: 47.99em) {
  .form-columns__column-header_mobile-horizontal-padding_13 {
    padding: 0 13px;
  }
}

/**
 * @element column-set-title
 */
.form-columns__column-set-title {
  font-weight: 600;
  margin-right: 5px;
}

/**
 * @element column-title
 */
.form-columns__column-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #5C5050;
  /**
   * @modifier type
   * @value list
   */
  /**
   * @modifier type
   * @value cart
   */
}
@media (max-width: 47.99em) {
  .form-columns__column-title {
    padding: 0 13px;
  }
}
.form-columns__column-title:before {
  content: "";
  width: 18px;
  height: 15px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 10px;
  display: block;
}
.form-columns__column-title_type_list:before {
  background-image: url("/assets/images/icons/list.svg");
}
.form-columns__column-title_type_cart:before {
  background-image: url("/assets/images/icons/cart.svg");
}

/**
 * Right section of the column header. Contains filters, clear filters buttons,
 * and back button.
 *
 * @element column-actions
 */
.form-columns__column-actions {
  display: flex;
  align-items: center;
}

/**
 * @element column-action
 */
.form-columns__column-action {
  display: flex;
  align-items: center;
  margin-left: 10px;
  /**
   * @modifier font
   * @value medium
   * @for column-action
   */
}
.form-columns__column-action_font_medium {
  font-size: 14px;
}

/**
 * Wrapper for the benefits filters.
 *
 * @element column-filters
 */
.form-columns__column-filters {
  width: 40px;
  height: 50px;
}

/**
 * Wraps the container that moves when switching columns on mobile.
 *
 * 1. Hides the overflowing column.
 * 2. Important: should be padding and not margin so that the filters are visible
 *    when overflowing.
 *
 * @element wrapper
 */
.form-columns__wrapper {
  overflow: hidden; /* [1] */
  padding-top: 15px; /* [2] */
}
@media (min-width: 64em) {
  .form-columns__wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 7px;
  }
}

/**
 * Contains the 2 columns and translates when switching columns.
 *
 * 1. Two times the width since it contains 2 columns.
 * 2. Allows scroll in Firefox.
 *
 * @element container
 */
.form-columns__container {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
@media (min-width: 64em) {
  .form-columns__container {
    max-height: 100%; /* 2 */
  }
}
@media (max-width: 47.99em) {
  .form-columns__container {
    padding-bottom: 45px;
  }
}
@media (max-width: 63.99em) {
  .form-columns__container {
    width: 200%; /* [1] */
    transform: translateX(0);
    transition: all 0.3s ease;
    /**
     * @modifier is-translated
     */
  }
  .form-columns__container_is-translated {
    transform: translateX(-50%);
  }
}

/**
 * 1. http://stackoverflow.com/a/7985973/542642
 * 2. Hide the column when not selected in order to avoid empty scroll when
 *    other, smaller column selected.
 *
 * @element column
 */
@media (max-width: 63.99em) {
  .form-columns__column {
    width: 0; /* [1] */
    flex: 1; /* [1] */
    max-height: 0; /* [2] */
    transition: 0.3s max-height 0 ease;
    /**
     * 1. Very large number since the content can be quite long.
     * 2. Instantly show selected column.
     *
     * @modifier is-selected
     */
  }
  .form-columns__column_is-selected {
    max-height: 9000px; /* [1] */
    transition: none; /* [2] */
  }
}
@media (min-width: 64em) {
  .form-columns__column {
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
  }
}

/**
 * Back button shown in header.
 *
 * @element column-back
 */
.form-columns__column-back {
  margin-right: 10px;
  font-size: 13px;
  color: #B0A7A8;
}
@media (min-width: 64em) {
  .form-columns__column-back {
    display: none;
  }
}

/**
 * Body of the column.
 *
 * 1. Scrollable full height on desktop.
 * 2. We need it to be relative because we're calculating its
 * child `offsetTop` for scrolling animation.
 *
 * @element column-content
 */
.form-columns__column-content {
  position: relative; /* 2 */
}
@media (min-width: 64em) {
  .form-columns__column-content {
    flex: 1; /* [1] */
    display: flex;
    min-height: 0;
    /**
     * If form column overlaps with the contact support
     * we add a pseudo element with a given height. We do
     * not use padding-bottom since does not take effect
     * with overflow-y: scroll in IE and Firefox.
     *
     * @modifier is-overlapping-contact-support
     */
  }
  .form-columns__column-content_is-overlapping-contact-support .form-columns__list::after {
    content: "";
    height: 50px;
    display: block;
  }
}

/**
 * @element column-empty-state
 */
.form-columns__column-empty-state {
  padding: 0 20px 0;
}
@media (max-width: 63.99em) {
  .form-columns__column-empty-state {
    padding-top: 20px;
    padding-bottom: 20px;
    background: #FFF;
    display: flex;
    justify-content: center;
  }
}
@media (min-width: 64em) {
  .form-columns__column-empty-state {
    padding-top: 50px;
  }
}

/**
 * 1. For the benefit list header animation.
 *
 * @element column-content-height
 */
.form-columns__column-content-height {
  position: relative;
  width: 100%;
}
@media (min-width: 64em) {
  .form-columns__column-content-height {
    max-height: 100%;
    display: flex;
    overflow: hidden; /* 1 */
  }
}

/**
 * @element list
 */
@media (min-width: 64em) {
  .form-columns__list {
    width: 100%;
    overflow-y: scroll;
  }
}

/**
 * @element empty-container
 */
.form-columns__empty-container {
  background: white;
  border: dashed thin #C7D7D7;
}
@media (max-width: 47.99em) {
  .form-columns__empty-container {
    margin: 0 10px;
  }
}

/**
 * Element showns when empty content.
 *
 * @element empty
 */
.form-columns__empty {
  width: 200px;
  margin: 22px;
  text-align: left;
  font-size: 14px;
  color: #5C5050;
}
.form-columns__empty:before {
  content: "";
  display: block;
  width: 31px;
  height: 28px;
  background: url("/assets/images/icons/red-heart.svg") center center no-repeat;
  background-size: 100% 100%;
  margin: 5px 10px 0 0;
  float: left;
}
@media (min-width: 48em) {
  .form-columns__empty {
    width: 162px;
    margin: 40px auto;
    text-align: center;
  }
  .form-columns__empty:before {
    margin: 0 auto 10px;
    width: 69px;
    height: 63px;
    float: none;
  }
}

/**
 * Navigation on mobile and tablet between the 2 columns.
 *
 * @element nav
 */
@media (min-width: 64em) {
  .form-columns__nav {
    display: none;
  }
}

/**
 * Tab inside the navigation.
 *
 * @element nav-el
 */
.form-columns__nav-el {
  position: relative;
  width: 18px;
  height: 15px;
  float: right;
  margin-left: 25px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  /**
   * @modifier type
   * @value list
   */
  /**
   * @modifier type
   * @value cart
   */
}
.form-columns__nav-el_type_list {
  background-image: url("/assets/images/icons/list-grey.svg");
}
.form-columns__nav-el_type_list.form-columns__nav-el_is-selected {
  background-image: url("/assets/images/icons/list.svg");
}
.form-columns__nav-el_type_cart {
  background-image: url("/assets/images/icons/cart-grey.svg");
}
.form-columns__nav-el_type_cart.form-columns__nav-el_is-selected {
  background-image: url("/assets/images/icons/cart.svg");
}

/**
 * Number shown inside the cart element.
 *
 * @element cart-size
 */
.form-columns__cart-size {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 10px;
  top: -5px;
  right: -5px;
  border-radius: 50%;
  background: #1297AC;
  color: white;
  font-size: 8px;
  font-weight: bold;
}

/**
 * 1. Needs to be in front of all other items in the `column-content-height` element.
 */
@media (min-width: 64em) {
  .form-columns__waive-overlay {
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #FFF;
    z-index: 2; /* 1 */
  }
}
/**
 * Terms and conditions component.
 *
 * @block full-modal
 *
 * full-modal
 * |-container
 * |--header
 * |---logout
 * |---logo
 * |----logo-image
 * |--title
 * |--subtitle
 * |-actions
 * |--decline
 * |--understand
 * |--buffer
*/
.full-modal {
  position: relative;
  overflow: auto;
  background: var(--main-color-light-28);
  box-sizing: border-box;
  height: 100%;
}
.full-modal_background_white {
  background: #FFF;
}
.full-modal_has-fixed-header {
  padding-top: 100px;
  overflow: hidden;
  height: auto;
  min-height: 100vh;
}
.full-modal_display_flex {
  display: flex;
  flex-direction: column;
}
@media (max-width: 47.99em) {
  .full-modal {
    display: flex;
    flex-direction: column;
    /**
    * 1. Can be used to prevent horizontal scrollbars from appearing when shaking.
    */
    /**
    * 1. So that the scrollbar touches the top of the buttons instead of sliding behind them
    * to the bottom of the page.
    */
  }
  .full-modal_overflow-x_mobile-hidden {
    overflow-x: hidden; /* [1] */
  }
  .full-modal_has-actions {
    height: calc(100% - 45px); /* [1] */
  }
}

.full-modal__header {
  padding: 0 50px;
}
.full-modal__header_to-be-fixed {
  height: 100px;
  z-index: 3;
  background: var(--main-color-light-28);
  position: absolute;
  left: 0;
  top: 25px;
  width: 100%;
  transition: height 1000ms ease, padding-top 1000ms ease;
  box-sizing: border-box;
}
.full-modal__header_has-top-margin {
  padding-top: 25px;
}
@media (max-width: 47.99em) {
  .full-modal__header_has-top-margin {
    padding-top: 30px;
  }
}
@media (max-width: 47.99em) {
  .full-modal__header_has-user-title {
    top: 50px;
  }
}
.full-modal__header_position_fixed {
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}
@media (max-width: 47.99em) {
  .full-modal__header_position_fixed {
    height: auto;
    min-height: 50px;
  }
}
@media (min-width: 48em) {
  .full-modal__header_position_fixed {
    height: 80px;
  }
}
@media (max-width: 47.99em) {
  .full-modal__header_has-mobile-padding-top {
    padding-top: 13px;
  }
}
.full-modal__header_has-buttons {
  height: 80px;
  padding: 0;
  background: var(--main-color-light-28);
  z-index: 3;
  display: flex;
  align-items: center;
}

/**
 * Sometimes giving `display: flex` to a flex item results in undesired
 * behavior (like not expanding with the content). We use this element
 * between `full-modal` and `full-modal__container` so we get a wrapping
 * element that takes full width (instead of the `max-width` of the container)
 * and expands with its content.
 *
 * @element wrapper
 */
.full-modal__wrapper {
  position: relative;
  min-height: 100%;
}
@media (max-width: 47.99em) {
  .full-modal__wrapper {
    display: flex;
    height: 100%;
    flex-direction: column;
  }
}

/**
 * 1. Account for the `powered-by` info.
 *
 * @element container
 */
.full-modal__container {
  box-sizing: border-box;
  padding-top: 22px;
  margin: 0 auto;
  width: 100%;
  /**
   * @modifier size
   * @value small
   */
  /**
   * @for container
   */
}
@media (max-width: 47.99em) {
  .full-modal__container {
    flex: 1;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .full-modal__container {
    padding-bottom: 80px; /* [1] */
    /**
     * 1. For the powered by.
     */
  }
  .full-modal__container_has-actions {
    padding-bottom: calc(80px + 45px + 25px); /* [1] */
  }
}
@media (min-width: 64em) {
  .full-modal__container {
    padding-bottom: 40px; /* [1] */
  }
}
@media (min-width: 48em) {
  .full-modal__container {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: 684px;
    /**
     * @modifier width
     * @value wide
     */
  }
  .full-modal__container_width_wide {
    max-width: 1070px;
  }
}
.full-modal__container_z-index_1 {
  position: relative;
  z-index: 1;
}
@media (max-width: 47.99em) {
  .full-modal__container_has-user-title {
    padding-top: 95px;
  }
}
@media (min-width: 48em) {
  .full-modal__container_size_small {
    max-width: 432px;
  }
}
.full-modal__container_size_large {
  height: auto;
}
@media (max-width: 47.99em) {
  .full-modal__container_size_large {
    max-width: 100%;
  }
}
@media (min-width: 48em) {
  .full-modal__container_size_large {
    max-width: 728px;
  }
}
@media (min-width: 81.25em) {
  .full-modal__container_size_large {
    max-width: 1020px;
  }
}
.full-modal__container_is-account-page {
  padding: 0 20px;
  margin-top: 25px;
  height: auto;
}
@media (max-width: 47.99em) {
  .full-modal__container_is-account-page {
    max-width: 100%;
    padding: 0;
  }
}
@media (min-width: 48em) {
  .full-modal__container_is-account-page {
    max-width: 728px;
  }
}
@media (min-width: 64em) {
  .full-modal__container_is-account-page {
    max-width: 1080px;
  }
}

.full-modal__center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/**
 * @element content
 */
.full-modal__content {
  margin-top: 21px;
}
@media (min-width: 48em) {
  .full-modal__content {
    position: relative;
    flex: 1;
    min-height: 0;
    margin-bottom: 25px;
    margin-top: 23px;
    /**
     * @modifier is-flex
     */
  }
  .full-modal__content_is-flex {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 47.99em) {
  .full-modal__content_has-padding {
    padding: 0 10px;
  }
}
.full-modal__content_has-margin {
  margin-top: 30px;
}

/**
 * @element logo
 */
.full-modal__logo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 70px;
  margin-bottom: 15px;
}

/**
 * Contains max width and max height because we don't know
 * anything about the logo that we're getting or its dimensions.
 *
 * @element logo-image
 */
.full-modal__logo-image {
  max-height: 100%;
  max-width: 183px;
}

/**
 * @element logout
 */
.full-modal__logout {
  position: absolute;
  font-size: 12px;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--main-color);
}
@media (max-width: 47.99em) {
  .full-modal__logout {
    left: 19px;
  }
}
@media (min-width: 48em) {
  .full-modal__logout {
    top: 19px;
    left: 31px;
    font-size: 14px;
  }
}
.full-modal__logout:hover {
  color: var(--main-color-dark);
}
.full-modal__logout:active {
  color: var(--main-color);
}

.full-modal__user-title {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4;
}
@media (max-width: 47.99em) {
  .full-modal__user-title {
    position: absolute;
  }
}

.full-modal__back-button {
  margin-left: 20px;
}

.full-modal__mobile-back-button {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 3;
  background: var(--main-color-light-28);
  border-top: 1px solid var(--main-color-dark-4);
}
.full-modal__mobile-back-button_is-disabled {
  border-top: 1px solid #C1C1C1;
}

.full-modal__return-to-sign-in-button {
  margin-left: auto;
  margin-right: 20px;
}

/**
 * @element footer
 */
.full-modal__footer {
  flex-shrink: 0;
  padding: 72px 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.full-modal__footer_padding-bottom_62 {
  padding-bottom: 62px;
}

/**
 * 1. Avoid overlapping with the logout button which is also positioned absolutely
 * at the top left of the page.
 *
 * @element links
 */
.full-modal__links {
  position: absolute;
}
@media (max-width: 47.99em) {
  .full-modal__links {
    display: none;
  }
}
@media (min-width: 48em) {
  .full-modal__links {
    top: 19px;
    right: 19px;
    padding-left: 100px; /* 1 */
  }
}

.full-modal__title-text {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: var(--main-color-dark-5);
  font-size: 24px;
}

/**
 * @element title
 */
.full-modal__title {
  margin-bottom: 5px;
  text-align: center;
  color: var(--main-color-dark-5);
  /**
   * @modifier weight
   * @value light
   */
  /**
   * @for title
   */
  /**
   * @for title
   */
  /**
   * @for title
   */
}
@media (max-width: 47.99em) {
  .full-modal__title {
    font-size: 18px;
    /**
     * @modifier is-mobile-padded
     */
  }
  .full-modal__title_is-mobile-padded {
    padding-top: 30px;
  }
}
@media (min-width: 48em) {
  .full-modal__title {
    font-size: 24px;
  }
}
.full-modal__title_weight_light {
  font-size: 30px;
  font-weight: 300;
}
.full-modal__title_font-color_light {
  color: var(--main-color-dark-4);
}
.full-modal__title_font-color_red {
  color: var(--color-red);
}
.full-modal__title_margin-bottom_2 {
  margin-bottom: 2px;
}

.full-modal__icon-container {
  margin-bottom: 28px;
  display: flex;
  justify-content: center;
}

.full-modal__icon {
  background-position: center center;
  background-repeat: no-repeat;
}
.full-modal__icon_type_check {
  background-image: url("/assets/images/icons/empty-round-check.svg");
  width: 60px;
  height: 60px;
}
.full-modal__icon_type_error {
  background-image: var(--svg-x-red);
  width: 60px;
  height: 60px;
}
.full-modal__icon_type_email-validation {
  background-image: url("/assets/images/icons/email-and-checked-circle.svg");
  width: 76px;
  height: 67px;
}

/**
 * @element subtitle
 */
.full-modal__subtitle {
  text-align: center;
  font-size: 14px;
  color: #5C5050;
}
@media (max-width: 47.99em) {
  .full-modal__subtitle {
    padding: 0 10px;
  }
}
@media (min-width: 48em) {
  .full-modal__subtitle {
    font-size: 16px;
  }
}

/**
 * @element actions
 */
.full-modal__actions {
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 47.99em) {
  .full-modal__actions {
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: solid thin #D5D5D5;
    background-color: #FFF;
  }
}
@media (min-width: 48em) {
  .full-modal__actions {
    box-sizing: border-box;
    padding: 0 0 25px;
  }
}
.full-modal__actions:after {
  clear: both;
  display: block;
  content: "";
}

/**
 * @lement get-started-btn
 */
.full-modal__get-started-btn {
  margin-bottom: 50px;
  text-align: center;
}

/**
 * @lement remind-me-later
 */
.full-modal__remind-me-later {
  text-align: center;
}

/**
 * @lement contact
 */
.full-modal__contact {
  margin: 40px 0 30px;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--main-color);
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  text-decoration: underline;
}

/**
 * @element understand
 */
.full-modal__understand {
  float: right;
  width: 50%;
}
@media (min-width: 48em) {
  .full-modal__understand {
    width: 200px;
  }
}

/**
 * @element decline
 */
.full-modal__decline {
  float: left;
  width: 50%;
}
@media (min-width: 48em) {
  .full-modal__decline {
    width: 160px;
  }
}

.full-modal__button-container {
  display: flex;
  justify-content: center;
}

.full-modal__button {
  display: inline-block;
  min-width: 140px;
  margin-top: 30px;
}

/**
 * @element close
 */
.full-modal__close {
  position: fixed;
  color: transparent;
  font-size: 0;
  right: 5px;
  top: 20px;
  width: 45px;
  height: 45px;
  background: url("/assets/images/icons/x-sign-clear.svg") center center no-repeat;
  cursor: pointer;
  background-size: 14px 14px;
  border-radius: 5px;
  transition: top 1000ms ease, transform linear 200ms;
}
.full-modal__close:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: scale(1.1);
}
@media (max-width: 47.99em) {
  .full-modal__close_mobile-top {
    top: 0;
  }
}

/**
 * @element powered-by
 */
.full-modal__powered-by {
  position: absolute;
  bottom: 22px;
  left: 23px;
}
@media (max-width: 47.99em) {
  .full-modal__powered-by {
    display: none;
  }
}
.full-modal__powered-by_has-margins {
  position: static;
  margin-top: auto;
  margin-bottom: 22px;
  margin-left: 23px;
}

/**
 * @element errors
 */
.full-modal__errors {
  min-height: 19px;
  padding: 10px 0;
}

.full-modal__error-item {
  padding-left: 25px;
  background: url("/assets/images/error-exclamation.svg") top left no-repeat;
  background-size: 18px 18px;
  color: #D57F73;
  font-size: 14px;
}

.full-modal__buttons-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

/**
 * Full page with header such as enrollment summary. When in a full page
 * you can't see or do anything else. Acts like a modal that takes over
 * the whole page.
 *
 * @block full-page
 */
.full-page {
  min-height: 100%;
  background: #F7F7F7;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.full-page_overflow-x_hidden {
  overflow-x: hidden;
}
.full-page_is-scrollable .full-modal__close {
  right: 20px;
}

/**
 * @element header
 */
.full-page__header {
  min-height: 54px;
  display: flex;
  align-items: center;
  background: #E9EEEF;
  animation: full-page__header-entrance 200ms ease;
}
.full-page__header_background-color_blue {
  background: #CEE5EA;
  animation-name: full-page__header-entrance-blue;
}

.full-page__content_has-full-height {
  height: calc(100% - 54px);
}

@keyframes full-page__header-entrance {
  0% {
    background-color: #FFF;
    height: 65px;
  }
  100% {
    height: 54px;
    background: #E9EEEF;
  }
}
@keyframes full-page__header-entrance_blue {
  0% {
    background-color: #FFF;
  }
  100% {
    background: #CEE5EA;
  }
}
@keyframes full-page__header-left-entrance {
  0% {
    color: transparent;
  }
  100% {
    color: inherit;
  }
}
/**
 * @element header-left
 */
.full-page__header-left {
  animation: full-page__header-left-entrance 1200ms ease;
  flex: 1;
  display: flex;
  align-items: center;
}
@media (max-width: 47.99em) {
  .full-page__header-left {
    padding-left: 20px;
  }
}
@media (min-width: 48em) {
  .full-page__header-left {
    padding-left: 35px;
  }
}

/**
 * @element title
 */
@media (max-width: 47.99em) {
  .full-page__title {
    font-size: 16px;
  }
}
@media (min-width: 48em) {
  .full-page__title {
    font-size: 20px;
  }
}

/**
 * @element sub-title
 */
.full-page__sub-title {
  font-size: 16px;
  margin-left: 5px;
  color: #A29F9F;
}

/**
 * @element header-right
 */
.full-page__header-right {
  display: flex;
  align-items: center;
}

/**
 * @element header-actions
 */
.full-page__header-actions {
  display: flex;
  align-items: center;
}
@media (max-width: 47.99em) {
  .full-page__header-actions {
    margin-right: 20px;
  }
}
@media (min-width: 48em) {
  .full-page__header-actions {
    margin-right: 35px;
  }
}

/**
 * @element header-action-item
 */
.full-page__header-action-item {
  display: flex;
  padding-right: 20px;
}
.full-page__header-action-item:last-child {
  padding-right: 0;
}

/**
 * @element header-button
 */
.full-page__header-button {
  padding: 0 7px;
}

/**
* 1. Smoothens the scroll on mobile safari + chrome (webkit).
*
 * @element body
 */
.full-page__body {
  -webkit-overflow-scrolling: touch; /* 1 */
  overflow: auto;
  flex: 1;
  transition: all linear 300ms;
  /**
   * @modifier is-faded
   * @for body
   */
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .full-page__body {
    padding: 0 20px;
  }
}
.full-page__body_is-faded {
  background-color: rgba(0, 0, 0, 0.1);
}

/**
 * @element block
 */
.full-page__block {
  border: solid 1px #C7D7D7;
  background: #FFF;
  margin: 30px auto;
  animation: full-page__block-entrance 200ms ease;
  max-width: 850px;
}
.full-page__block_is-clear {
  border: 0;
  background: transparent;
}
.full-page__block_margin-top_0 {
  margin-top: 0;
}
@media (min-width: 48em) {
  .full-page__block:last-child {
    margin-bottom: 50px;
  }
}

@keyframes full-page__block-entrance {
  0% {
    transform: translateY(18px);
    max-width: 950px;
  }
  100% {
    transform: translateY(0);
    max-width: 850px;
  }
}
@media (max-width: 47.99em) {
  .full-page__body {
    padding-bottom: 50px;
  }
  .full-page__footer {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #FFF;
    border-top: solid 1px #98B7B7;
  }
  .full-page__footer-action {
    flex: 1;
  }
}
@media (min-width: 48em) {
  .full-page__footer {
    display: none;
  }
}
.full-page__checkbox-container:not(:last-child) {
  margin-bottom: 10px;
}
@media (max-width: 47.99em) {
  .full-page__checkbox-container {
    padding: 0 20px;
  }
}

.full-page__scroll-to-bottom {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.95) 45%);
  transform: translateY(0);
}
.full-page__scroll-to-bottom:not(.full-page__scroll-to-bottom_is-hidden) {
  animation: g-slide-up 300ms ease;
}
.full-page__scroll-to-bottom_is-hidden {
  transition: transform 300ms ease;
  transform: translateY(100%);
}
@media (max-width: 47.99em) {
  .full-page__scroll-to-bottom {
    bottom: 45px;
    padding: 0 20px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }
}

.full-page__link-container {
  display: flex;
  align-items: center;
}
@media (max-width: 47.99em) {
  .full-page__link-container {
    justify-content: center;
  }
}

.global-loading {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-light-grey-4);
}
.global-loading_is-fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 15;
}

.grey-field {
  position: relative;
  box-sizing: border-box;
  height: 70px;
  border: 1px solid #D8E4E4;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #F2F2F2;
}
.grey-field_height_150 {
  height: 150px;
}

.grey-field__label {
  display: flex;
  align-items: center;
}
.grey-field__label_check-mark::after {
  content: "";
  background-image: url("/assets/images/icons/round-check.svg");
  width: 11px;
  height: 11px;
  margin-left: 4px;
}

.grey-field__label-text {
  font-size: 10px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  color: #B0A7A8;
  text-transform: uppercase;
}

.grey-field__value {
  margin-top: 10px;
}
.grey-field__value_is-bold {
  font-weight: bold;
}

.grey-field__button {
  position: absolute;
  right: 16px;
  top: calc(50% - 9px);
}

.grey-field__edit-button {
  position: absolute;
  right: 15px;
  top: 12px;
}

/**
 * Made up of cells. Used for example to render the employee details.
 *
 * 1. Allows the grid to wrap around content when content.
 *
 * @block grid
 */
.grid {
  display: block;
  overflow: hidden; /* 1 */
}
.grid_is-changed {
  background-color: #FFF4E8;
}

/**
 * 1. For the header-link
 *
 * @element header
 */
.grid__header {
  position: relative; /* 1 */
  padding: 0 20px;
  height: 52px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  /**
   * @modifier border-bottom
   */
  /**
   * @modifier important
   */
  /**
   * @modifier style
   * @value name
   * @for header
   */
  /**
   * @modifier height
   * @value medium
   * @for header
   */
  /**
   * @modifier top-margin
   * @for header
   */
  /**
   * @modifier size
   * @value big
   */
  /**
   * @modifier icon
   * @value contact
   */
  /**
   * @modifier icon
   * @value employment
   */
  /**
   * @modifier icon
   * @value dependents
   */
  /**
   * @modifier icon
   * @value benefits
   */
  /**
   * @modifier icon
   * @value beneficiaries
   */
  /**
   * @modifier icon
   * @value documents
   */
  /**
   * @modifier icon
   * @value class
   */
}
.grid__header_font-size_20 {
  font-size: 20px;
}
.grid__header_border-bottom {
  border-bottom: solid 1px var(--main-color-light-4);
}
.grid__header_has-border-top {
  border-top: solid 1px var(--main-color-light-4);
}
.grid__header_important {
  font-size: 18px;
}
.grid__header_style_name {
  display: flex;
  align-items: flex-start;
  font-size: 18px;
  color: var(--main-color-dark);
}
.grid__header_height_medium {
  height: 35px;
}
.grid__header_top-margin {
  margin-top: 20px;
}
.grid__header_size_big {
  height: 70px;
}
@media (max-width: 47.99em) {
  .grid__header_is-centered {
    justify-content: center;
  }
}
.grid__header_is-space-between {
  justify-content: space-between;
}
.grid__header:before {
  display: none;
  content: "";
  margin-right: 8px;
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.grid__header_icon_contact:before {
  display: inline-block;
  width: 16px;
  height: 18px;
  background-image: var(--svg-contact);
}
.grid__header_icon_cobra:before {
  display: inline-block;
  width: 13px;
  height: 16px;
  background-image: var(--svg-cobra);
}
.grid__header_icon_retiree:before {
  display: inline-block;
  width: 16px;
  height: 18px;
  background-image: var(--svg-retiree);
}
.grid__header_icon_employment:before {
  display: inline-block;
  width: 12px;
  height: 16px;
  background-image: var(--svg-employment);
}
.grid__header_icon_dependents:before {
  display: inline-block;
  width: 16px;
  height: 10px;
  background-image: var(--svg-employees);
}
.grid__header_icon_benefits:before {
  display: inline-block;
  width: 12px;
  height: 16px;
  background-image: var(--svg-heart);
}
.grid__header_icon_beneficiaries:before {
  display: inline-block;
  width: 18px;
  height: 10px;
  background-image: var(--svg-beneficiaries);
}
.grid__header_icon_documents:before {
  display: inline-block;
  width: 12px;
  height: 14px;
  background-image: var(--svg-documents);
}
.grid__header_icon_class:before {
  display: inline-block;
  width: 12px;
  height: 16px;
  background-image: var(--svg-class);
}
.grid__header_icon_subgroup:before {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: var(--svg-subgroups);
}

/**
 * @element header-item
 */
.grid__header-item {
  display: flex;
  height: 100%;
  align-items: center;
  /**
   * @modifier push
   * @value left
   * @for header
   */
}
.grid__header-item_push_left {
  margin-left: 15px;
}

/**
 * @element horizontal-content
 */
.grid__horizontal-content {
  display: flex;
  align-items: center;
  height: 100%;
}

/**
 * @element header-action
 */
.grid__header-action {
  font-size: 0;
  width: 30px;
  height: 100%;
  background-size: 15px 15px;
  background-position: center center;
  background-repeat: no-repeat;
  /**
   * This is here just to preload the svg image.
   */
  /**
   * @modifier icon
   * @value edit
   * @for header-action
   */
}
.grid__header-action:after {
  content: "";
  width: 0;
  height: 0;
}
.grid__header-action:active {
  opacity: 0.6;
}
.grid__header-action_icon_edit {
  background-image: url("/assets/images/icons/edit-grey.svg");
}
.grid__header-action_icon_edit:after {
  background-image: var(--svg-edit);
}
.grid__header-action_icon_edit:hover, .grid__header-action_icon_edit:focus {
  background-image: var(--svg-edit);
}
.grid__header-action_icon_print {
  background-image: url("/assets/images/icons/print-grey.svg");
}
.grid__header-action_icon_print:after {
  background-image: var(--svg-print);
}
.grid__header-action_icon_print:hover, .grid__header-action_icon_print:focus {
  background-image: var(--svg-print);
}

/**
 * Used to show the action icon AND text.
 *
 * @element verbose-header-action
 */
.grid__verbose-header-action {
  font-size: 13px;
  color: var(--main-color);
  display: flex;
  align-items: center;
  /**
   * 1. We preload the svg to avoid flicker.
   */
  /**
   * @modifier icon
   * @value edit
   * @for verbose-header-action
   */
}
.grid__verbose-header-action::before {
  margin-right: 10px;
  content: "";
}
.grid__verbose-header-action::after {
  content: "";
  width: 0;
  height: 0;
  background: var(--svg-edit-dark); /* 1 */
}
.grid__verbose-header-action_icon_edit::before {
  width: 12px;
  height: 12px;
  background: var(--svg-edit) center center no-repeat;
}
.grid__verbose-header-action:hover {
  color: var(--main-color-dark);
}
.grid__verbose-header-action:hover::before {
  background: var(--svg-edit-dark) center center no-repeat;
}

/**
 * @element header-number
 */
.grid__header-number {
  width: 32px;
  height: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--main-color);
  color: #FFF;
}

/**
 * 1. To "appear" centered next to non-caps text.
 * 2. To not stick to elements on its right on mobile.
 *
 * @element header-icon
 */
.grid__header-icon {
  margin-left: 10px;
  margin-top: 4px; /* 1 */
  margin-right: 5px; /* 2 */
}

/**
 * Contains all the elements that should be
 * left aligned in the grid header.
 *
 * @element header-left-aligned
 */
.grid__header-left-aligned {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
}
.grid__header-left-aligned_overflow_auto {
  overflow: auto;
}
.grid__header-left-aligned_width_200 {
  width: 200px;
}

/**
 * @element header-title
 */
@media (max-width: 47.99em) {
  .grid__header-title {
    font-size: 14px;
  }
}

/**
 * @element header-dots-menu
 */
.grid__header-dots-menu {
  height: 100%;
  width: 40px;
}

/**
 * @element header-link
 */
.grid__header-link {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
  /**
   * @modifier type
   * @value not-alone
   */
}
.grid__header-link_type_not-alone {
  margin-right: 10px;
}

/**
 * @element header-title
 */
.grid__header-title {
  display: flex;
}
@media (max-width: 31.24em) {
  .grid__header-title {
    display: block;
  }
}

/**
 * @element header-date
 */
.grid__header-date {
  margin-left: 20px;
  font-size: 14px;
  padding-left: 15px;
  background: var(--svg-date) left center no-repeat;
  background-size: 12px 12px;
  font-weight: normal;
  /**
   * @modifier color
   * @value red
   * @for header-date
   */
}
@media (max-width: 31.24em) {
  .grid__header-date {
    margin-left: 10px;
    padding-top: 5px;
  }
}
.grid__header-date_color_red {
  color: var(--color-red);
  background-image: url("/assets/images/icons/date-red.svg");
}

/**
 * Back button (only on mobile).
 *
 * 1. For accessibility we actual write the word "Back" but hide it.
 *
 * @element back
 */
.grid__back {
  height: 100%;
  width: 30px;
  font-size: 0; /* 1 */
  background: url("/assets/images/icons/back.svg") left center no-repeat;
  background-size: 10px 18px;
}
@media (min-width: 48em) {
  .grid__back {
    display: none;
  }
}

/**
 * @element group
 */
.grid__group {
  position: relative;
  /**
   * @modifier border_bottom
   */
  /**
   * @modifier border
   * @value top
   */
  /**
   * @modifier border
   * @value right
   */
  /**
   * @modifier border
   * @value left
   */
  /**
   * @modifier has-borders
   */
  /**
   * @modifier is-changed
   * @for group
   */
  /**
   * @modifier is-flex
   */
  /**
   * @modifier is-full-height
   */
  /**
   * @modifier has-background
   */
  /**
   * Aligns elements inside a form modal,
   * since grid-fields have inherent padding.
   *
   * @modifier align
   * @value in-form-modal
   */
  /**
   * @modifier has-large-spacing
   */
  /**
   * @modifier has-spacing
   */
  /**
   * @modifier has-bottom-space
   * @for group
   */
  /**
   * @modifier has-upper-space
   * @for group
   */
  /**
   * @modifier text
   * @value updated-by
   * @for group
   */
}
.grid__group:after {
  content: "";
  clear: both;
  display: block;
}
.grid__group_has-border-top {
  border-top: solid 1px var(--main-color-light-4);
}
.grid__group_border_bottom {
  border-bottom: solid 1px var(--main-color-light-4);
}
.grid__group_border_top {
  border-top: solid 1px var(--main-color-light-4);
}
.grid__group_border_right {
  border-right: solid 1px var(--main-color-light-4);
}
.grid__group_border_left {
  border-left: solid 1px var(--main-color-light-4);
}
.grid__group_has-borders {
  border: solid 1px var(--main-color-light-4);
}
.grid__group_is-highlighted {
  display: flex;
  background-color: var(--main-color-light-20);
}
.grid__group_is-changed {
  background-color: #FFF4E8;
}
.grid__group_is-flex {
  display: flex;
}
.grid__group_is-full-height {
  height: 100%;
}
.grid__group_is-full-width {
  width: 100%;
}
.grid__group_has-background {
  background-color: #FFF;
}
.grid__group_align_in-form-modal {
  display: inline-block;
  margin-left: 5px;
}
.grid__group_has-large-spacing {
  margin-top: 15px;
  margin-bottom: 5px;
}
.grid__group_has-spacing {
  margin-top: 5px;
  margin-bottom: 5px;
}
.grid__group_has-bottom-space {
  margin-bottom: 15px;
}
.grid__group_has-upper-space {
  margin-top: 15px;
}
.grid__group_has-left-space {
  margin-left: 5px;
}
.grid__group_text_updated-by {
  font-size: 13px;
  color: #B0A7A8;
  margin-bottom: 12px;
}
.grid__group_has-top-line {
  border-top: solid 1px var(--main-color-light-4);
  padding-top: 15px;
  width: 100%;
}
@media (max-width: 47.99em) {
  .grid__group_flex-direction-until-tablet_column {
    flex-direction: column;
  }
}

/**
 * Used to position absolute elements
 * inside the grid__group;
 *
 * @element grid__group-absolute
 */
.grid__group-absolute {
  position: absolute;
  z-index: 1;
  /**
   * @modifier type
   * @value dots-menu
   * @for group-absolute
   */
}
.grid__group-absolute_type_dots-menu {
  top: 0;
  right: 20px;
  width: 40px;
  height: 40px;
}

/**
 * @element cell-content
 */
.grid__cell-content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  overflow: hidden;
  border: solid 0 var(--main-color-light-4);
  /**
   * @modifier align
   * @value flex-end
   */
}
.grid__cell-content_align_flex-end {
  justify-content: flex-end;
  align-items: flex-end;
}
.grid__cell-content_no-padding {
  padding: 0;
}

/**
 * @element cell
 */
.grid__cell {
  position: relative;
  box-sizing: border-box;
  float: left;
  height: 70px;
  width: 20%;
  border: solid 0 var(--main-color-light-4);
  font-size: 16px;
  /**
   * @modifier is-flex
   */
  /**
   * @modifier is-display-flex
   * @for cell
   */
  /**
   * @modifier borders
   * @for cell
   */
  /**
   * @modifier center
   */
  /**
   * @modifier vertical-center
   */
  /**
   * @modifier vertical-center-text
   */
  /**
   * @modifier r
   * @value 2
   */
  /**
   * @modifier height
   * @value medium
   */
  /**
   * @modifier height
   * @value large
   * @for cell
   */
  /**
   * @modifier height
   * @value large-m-to-d-only
   * @for cell
   */
  /**
   * @modifier is-padded-top
   * @for cell
   */
  /**
   * @modifier is-changed
   * @for cell
   */
  /**
   * @modifier font
   * @value small
   * @for cell
   */
}
.grid__cell_width_auto {
  width: auto;
}
.grid__cell_is-flex {
  flex: 1;
  width: auto;
}
.grid__cell_height_auto {
  height: auto;
}
.grid__cell_is-display-flex {
  display: flex;
  align-items: center;
}
.grid__cell_borders .grid__cell-content {
  border-width: 1px;
}
.grid__cell_padding-top_10 {
  padding-top: 10px;
}
@media (min-width: 81.25em) {
  .grid__cell_c_2 {
    width: 40%;
  }
  .grid__cell_c_3 {
    width: 60%;
  }
  .grid__cell_c_4 {
    width: 80%;
  }
  .grid__cell_c_5 {
    width: 100%;
  }
  .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}
.grid__cell_center .grid__cell-content {
  justify-content: center;
  flex-direction: row;
}
.grid__cell_vertical-center .grid__cell-content {
  flex-direction: row;
  align-items: center;
}
.grid__cell_vertical-center-text .grid__cell-content {
  justify-content: center;
}
.grid__cell_align_left .grid__cell-content {
  align-items: flex-start;
}
.grid__cell_align_right .grid__cell-content {
  align-items: flex-end;
}
.grid__cell_is-flex-end .grid__cell-content {
  justify-content: flex-end;
}
.grid__cell_r_2 {
  height: 140px;
}
.grid__cell_r_4 {
  height: 280px;
}
.grid__cell_height_medium {
  height: 40px;
}
.grid__cell_height_small {
  height: 25px;
}
.grid__cell_height_micro {
  height: 10px;
}
.grid__cell_height_large {
  height: 105px;
}
@media (min-width: 31.25em) and (max-width: 81.24em) {
  .grid__cell_height_large-m-to-d-only {
    height: 105px;
  }
}
.grid__cell_is-padded-top .grid__cell-content {
  padding-top: 10px;
}
.grid__cell_is-changed {
  background-color: #FFF4E8;
}
.grid__cell_font_small .grid__value {
  font-size: 13px;
}
.grid__cell_size_14 .grid__value {
  font-size: 14px;
}
.grid__cell_color_grey .grid__cell-content {
  background-color: #F2F2F2;
}
.grid__cell_float_none {
  float: none;
}

/**
 * Don't set display flex on this element! The padding top trick (to have a
 * fixed ratio on the initials breaks in firefox if the parent is display flex).
 *
 * @element avatar
 */
.grid__avatar {
  height: 100%;
  width: 100%;
  max-width: 93px;
}

.grid__delete {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 25px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
}

.grid__separator {
  margin: 0 20px;
  border-bottom: solid 1px var(--main-color-light-4);
}

/**
 * 1. Don't set display flex on parent to center this. The padding top trick (to have a
 * fixed ratio on the initials breaks in firefox if the parent is display flex).
 *
 * @element initials
 */
.grid__initials {
  position: relative; /* 1 */
  top: 50%; /* 1 */
  transform: translateY(-50%); /* 1 */
}

/**
 * @element logo-holder
 */
.grid__logo-holder {
  display: flex;
}
.grid__logo-holder img {
  max-height: 40px;
}

/**
 * @element logo
 */
.grid__logo {
  min-width: 80px;
}

/**
 * @element logo-text
 */
.grid__logo-text {
  padding-left: 20px;
}

/**
 * For cells with variable height.
 *
 * @modifier flex
 */
.grid__group_flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.grid__group_flex .grid__cell {
  height: auto;
  min-height: 70px;
}
.grid__group_flex .grid__cell-content {
  padding-bottom: 20px;
}

/**
  * For cells with similar styling to display field component
*/
.grid__group_like-display-field .grid__cell {
  height: auto;
}
.grid__group_like-display-field .grid__cell .grid__cell-content {
  padding: 10px 20px;
}
.grid__group_like-display-field .grid__cell .grid__cell-content .grid__label {
  margin-bottom: 5px;
  height: auto;
}

/**
 * @element label
 */
.grid__label {
  height: 33px;
  display: flex;
  align-items: center;
  font-weight: normal;
}

/**
 * @element value
 */
.grid__value {
  position: relative;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  /**
   * @modifier is-flex
   * @for value
   */
}
.grid__value_is-flex {
  display: flex;
}
.grid__value_white-space_nowrap {
  white-space: nowrap;
}
.grid__value_max-width_400 {
  max-width: 400px;
}
.grid__value_max-width_300 {
  max-width: 300px;
}

/**
 * @element value-left-split
 */
.grid__value-left-split {
  flex: 1;
}

/**
 * @modifier important
 * @for cell
 */
.grid__cell_important {
  font-weight: bold;
}

/**
 * Adds an icon next to the cell's value.
 *
 * @modifier icon
 * @value date
 */
.grid__cell_icon_date .grid__value:before {
  content: "";
  display: inline-block;
  float: left;
  width: 12px;
  margin-right: 3px;
  height: 100%;
  background: var(--svg-date) left 5px no-repeat;
  background-size: 12px 12px;
}

@media (min-width: 31.25em) and (max-width: 81.24em) {
  .grid__cell {
    font-size: 14px;
    width: 33.3333333333%;
  }
  .grid__cell_tc_2 {
    width: 66.6666666667%;
  }
  .grid__cell_tc_3 {
    width: 100%;
  }
  .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid__cell_t-border-left {
    border-left-width: 1px;
  }
  .grid__cell_icon_date .grid__value:before {
    background-position: left 3px;
  }
}
@media (max-width: 31.24em) {
  .grid__cell {
    font-size: 14px;
    width: 50%;
  }
  .grid__cell_mc_2 {
    width: 100%;
  }
  .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid__cell_m-border-left {
    border-left-width: 1px;
  }
  .grid__cell_icon_date .grid__value:before {
    background-position: left 3px;
  }
}
/**
 * Icon for male.
 *
 * @modifier gender
 * @value m
 */
.grid__cell_gender_m .grid__cell-content:before {
  background: var(--svg-dependent-male) center center no-repeat;
  content: "";
  height: 38px;
  width: 38px;
  margin-right: 10px;
}

.grid__cell_margin-bottom_10 {
  margin-bottom: 15px;
}

/**
 * Icon for female.
 *
 * @modifier gender
 * @value f
 */
.grid__cell_gender_f .grid__cell-content:before {
  background: var(--svg-dependent-female) center center no-repeat;
  content: "";
  height: 38px;
  width: 38px;
  margin-right: 10px;
}

/**
 * Icon for neutral gender. (Used when we don't know the gender).
 *
 * @modifier gender
 * @value n
 */
.grid__cell_gender_n .grid__cell-content:before {
  background: var(--svg-neutral) center center no-repeat;
  content: "";
  height: 38px;
  width: 38px;
  margin-right: 10px;
}

@media (max-width: 31.24em) {
  /**
   * Small height on mobile
   *
   * @modifier m-height
   * @value small
   */
  .grid__cell_m-height_small {
    height: 40px;
  }
  .grid__cell_m-height_small .grid__label {
    display: none;
  }
  /**
   * Micro height on mobile. Usually doesn't contain content, just used
   * for padding.
   *
   * @modifier m-height
   * @value micro
   */
  .grid__cell_m-height_micro {
    height: 10px;
  }
  .grid__cell_m-height_micro .grid__label {
    display: none;
  }
}
@media (max-width: 47.99em) {
  .grid__cell_m-until-tablet-height_small {
    height: 40px;
  }
  .grid__cell_m-until-tablet-height_small .grid__label {
    display: none;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  /**
   * Micro height on tablet. Usually doesn't contain content, just used for
   * padding.
   *
   * @modifier t-height
   * @value micro
   */
  .grid__cell_t-height_micro {
    height: 10px;
  }
  .grid__cell_t-height_micro .grid__label {
    display: none;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  /**
   * Small height on tablet.
   *
   * @modifier t-height
   * @value small
   */
  .grid__cell_t-height_small {
    height: 25px;
  }
  .grid__cell_t-height_small .grid__cell-content {
    padding-bottom: 0;
  }
  .grid__cell_t-height_small .grid__label {
    display: none;
  }
  .grid__cell_t-height_small .grid__value {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
  }
  .grid__cell_t-height_medium {
    height: 40px;
  }
}
@media (min-width: 81.25em) {
  .grid__cell_d-height_small {
    height: 25px;
  }
  .grid__cell_d-height_small .grid__cell-content {
    padding-bottom: 0;
  }
  .grid__cell_d-height_small .grid__label {
    display: none;
  }
  .grid__cell_d-height_small .grid__value {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
  }
}
@media (max-width: 81.24em) {
  .grid__cell_d-only {
    display: none;
  }
}
@media (min-width: 81.25em) {
  .grid__cell_d-only {
    display: block;
  }
}

@media (min-width: 81.25em) {
  /**
   * Micro height on desktop. Usually doesn't contain content, just used for
   * padding.
   *
   * @modifier d-height
   * @value micro
   */
  .grid__cell_d-height_micro {
    height: 10px;
  }
  .grid__cell_d-height_micro .grid__label {
    display: none;
  }
  .grid__cell_d-height_15 {
    height: 15px;
  }
}
@media (min-width: 31.25em) {
  /**
   * Only show on mobile small. ("small" because it excludes mobile_plus).
   *
   * @element mobile-small-only
   */
  .grid__cell_mobile-small-only {
    display: none;
  }
}
/**
 * Form grids are a bit different.
 */
.grid_is-form {
  /**
   * 1. Account for grid bottom margin (above it)
   */
  /**
   * For things like drop downs and modals open on top of error box.
   */
}
.grid_is-form .grid__text {
  margin: 10px 5px;
}
.grid_is-form .grid__header,
.grid_is-form .grid__action {
  padding-left: 7px;
  padding-right: 6px;
}
.grid_is-form .grid__action {
  height: 40px 0 60px; /* 1 */
  display: flex;
  align-items: center;
}
.grid_is-form .grid__action_margin-bottom_10 {
  margin-bottom: 10px;
}
.grid_is-form .grid__cell {
  z-index: 2; /* 1 */
  height: 80px;
  overflow: visible; /* 1 */
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid_is-form .grid__cell_height_auto {
  height: auto;
}
.grid_is-form .grid__cell_height_30 {
  height: 30px;
}
.grid_is-form .grid__cell.grid__cell_is-full-width {
  width: 100%;
}
@media (max-width: 47.99em) {
  .grid_is-form .grid__cell_has-left-spacing {
    padding-left: 27px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_is-form .grid__cell_has-left-spacing {
    margin-left: 22px;
  }
}
.grid_is-form .grid__group_flex .grid__cell {
  height: auto;
}
.grid_is-form .grid__cell-content {
  overflow: visible;
  padding: 0;
  height: calc(100% - 10px);
  width: 100%;
}
.grid_is-form .grid__cell_r_11px {
  height: 81px;
}
@media (min-width: 81.25em) {
  .grid_is-form .grid__cell_r_2 {
    height: 160px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_is-form .grid__cell_tr_2 {
    height: 160px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_is-form {
    padding: 0 20px;
  }
  .grid_is-form .grid__cell {
    font-size: 14px;
    width: 25%;
  }
  .grid_is-form .grid__cell_tc_2 {
    width: 50%;
  }
  .grid_is-form .grid__cell_tc_3 {
    width: 75%;
  }
  .grid_is-form .grid__cell_tc_4 {
    width: 100%;
  }
}
@media (max-width: 47.99em) {
  .grid_is-form {
    padding: 0 10px;
  }
  .grid_is-form .grid__cell {
    font-size: 14px;
    width: 50%;
    /**
     * 2 columns on mobile.
     */
  }
  .grid_is-form .grid__cell_mr_2 {
    height: 160px;
  }
  .grid_is-form .grid__cell_mc_2 {
    width: 100%;
  }
}

.grid_is-form.grid_no-cell-side-padding .grid__cell {
  padding-left: 0;
  padding-right: 0;
}

/**
 * No padding in the grid cell contents.
 *
 * @modifier is-as-is
 */
.grid_is-as-is .grid__cell-content {
  padding: 0;
}

/**
 * @modifier has-paddingless-sides
 */
.grid_has-paddingless-sides {
  padding: 0;
}

/**
 * @modifier no-left-padding
 */
.grid_no-left-padding .grid__cell-content {
  padding-left: 0;
}

/**
 * @element error
 */
.grid__error {
  z-index: 10;
  position: relative;
  width: calc(100% - 10px);
  margin-top: -6px;
  margin-bottom: 5px;
  float: left;
  margin-left: 5px;
  box-sizing: border-box;
}
.grid__error_fill-parent {
  width: auto;
  margin-left: 0;
}
.grid__error_width_full {
  width: 100%;
}
.grid__error_has-margin-left {
  margin-left: 22px;
}
.grid__error_width_smaller {
  width: calc(100% - 22px);
}
.grid__error_width_medium {
  width: calc(100% - 18px);
}
.grid__error_margin_0 {
  margin: 0;
}
.grid__error_margin-top_0 {
  margin-top: 0;
}
@media (min-width: 1300px) {
  .grid__error_width_medium-field-responsive {
    width: calc(80% - 10px);
  }
}
@media (min-width: 768px) {
  .grid__error_width_small-field-responsive {
    width: calc(25% - 10px);
  }
}
@media (min-width: 1300px) {
  .grid__error_width_small-field-responsive {
    width: calc(20% - 10px);
  }
}

/**
 * @modifier is-small
 */
@media (max-width: 47.99em) {
  .grid_is-small .grid__cell {
    width: 50%;
  }
  .grid_is-small .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_is-small .grid__cell_d-border-top {
    border-top-width: 0px;
  }
  .grid_is-small .grid__cell_d-border-right {
    border-right-width: 0px;
  }
  .grid_is-small .grid__cell_d-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-small .grid__cell_d-border-left {
    border-left-width: 0px;
  }
  .grid_is-small .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-small .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-small .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-small .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_is-small .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_is-small .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_is-small .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-small .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) {
  .grid_is-small .grid__cell {
    width: 33.3333333333%;
  }
  .grid_is-small .grid__cell_c_2 {
    width: 66.6666666667%;
  }
  .grid_is-small .grid__cell_c_3 {
    width: 100%;
  }
  .grid_is-small .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-small .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-small .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-small .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_is-small .grid__cell_m-border-top {
    border-top-width: 0px;
  }
  .grid_is-small .grid__cell_m-border-right {
    border-right-width: 0px;
  }
  .grid_is-small .grid__cell_m-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-small .grid__cell_m-border-left {
    border-left-width: 0px;
  }
  .grid_is-small .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_is-small .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_is-small .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-small .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

@media (max-width: 47.99em) {
  .grid_is-medium .grid__cell {
    width: 50%;
  }
  .grid_is-medium .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_is-medium .grid__cell_d-border-top {
    border-top-width: 0px;
  }
  .grid_is-medium .grid__cell_d-border-right {
    border-right-width: 0px;
  }
  .grid_is-medium .grid__cell_d-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-medium .grid__cell_d-border-left {
    border-left-width: 0px;
  }
  .grid_is-medium .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-medium .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-medium .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-medium .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_is-medium .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_is-medium .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_is-medium .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-medium .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) {
  .grid_is-medium .grid__cell {
    width: 25%;
  }
  .grid_is-medium .grid__cell_c_2 {
    width: 50%;
  }
  .grid_is-medium .grid__cell_c_3 {
    width: 75%;
  }
  .grid_is-medium .grid__cell_c_4 {
    width: 100%;
  }
  .grid_is-medium .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-medium .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-medium .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-medium .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_is-medium .grid__cell_m-border-top {
    border-top-width: 0px;
  }
  .grid_is-medium .grid__cell_m-border-right {
    border-right-width: 0px;
  }
  .grid_is-medium .grid__cell_m-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-medium .grid__cell_m-border-left {
    border-left-width: 0px;
  }
  .grid_is-medium .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_is-medium .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_is-medium .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-medium .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

@media (max-width: 47.99em) {
  .grid_2-1-1 .grid__cell {
    width: 100%;
  }
  .grid_2-1-1 .grid__cell_mc_2 {
    width: calc(infinity * 1%);
  }
  .grid_2-1-1 .grid__cell_mc_1 {
    width: calc(infinity * 1%);
  }
  .grid_2-1-1 .grid__cell_mc_0 {
    width: calc(NaN * 1%);
  }
  .grid_2-1-1 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_2-1-1 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_2-1-1 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_2-1-1 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
  .grid_2-1-1 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_2-1-1 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_2-1-1 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_2-1-1 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_2-1-1 .grid__cell {
    width: 100%;
  }
  .grid_2-1-1 .grid__cell_tc_2 {
    width: calc(infinity * 1%);
  }
  .grid_2-1-1 .grid__cell_tc_1 {
    width: calc(infinity * 1%);
  }
  .grid_2-1-1 .grid__cell_tc_0 {
    width: calc(NaN * 1%);
  }
  .grid_2-1-1 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_2-1-1 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_2-1-1 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_2-1-1 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_2-1-1 .grid__cell {
    width: 50%;
  }
  .grid_2-1-1 .grid__cell_c_2 {
    width: 100%;
  }
  .grid_2-1-1 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_2-1-1 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_2-1-1 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_2-1-1 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

@media (max-width: 47.99em) {
  .grid_2-2-1 .grid__cell {
    width: 100%;
  }
  .grid_2-2-1 .grid__cell_mc_2 {
    width: calc(infinity * 1%);
  }
  .grid_2-2-1 .grid__cell_mc_1 {
    width: calc(infinity * 1%);
  }
  .grid_2-2-1 .grid__cell_mc_0 {
    width: calc(NaN * 1%);
  }
  .grid_2-2-1 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_2-2-1 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_2-2-1 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_2-2-1 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
  .grid_2-2-1 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_2-2-1 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_2-2-1 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_2-2-1 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_2-2-1 .grid__cell {
    width: 50%;
  }
  .grid_2-2-1 .grid__cell_tc_2 {
    width: 100%;
  }
  .grid_2-2-1 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_2-2-1 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_2-2-1 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_2-2-1 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_2-2-1 .grid__cell {
    width: 50%;
  }
  .grid_2-2-1 .grid__cell_c_2 {
    width: 100%;
  }
  .grid_2-2-1 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_2-2-1 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_2-2-1 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_2-2-1 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

/**
 * 1. Needed specificity to override the parent if this grid is a child of another grid.
 */
@media (max-width: 47.99em) {
  .grid_5-5-2 .grid__cell,
  .grid_5-5-2.grid_is-nested .grid__cell {
    width: 50%;
  }
  .grid_5-5-2 .grid__cell_mc_2,
  .grid_5-5-2.grid_is-nested .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_5-5-2 .grid__cell_m-border-top,
  .grid_5-5-2.grid_is-nested .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_5-5-2 .grid__cell_m-border-right,
  .grid_5-5-2.grid_is-nested .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_5-5-2 .grid__cell_m-border-bottom,
  .grid_5-5-2.grid_is-nested .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_5-5-2 .grid__cell_m-border-left,
  .grid_5-5-2.grid_is-nested .grid__cell_m-border-left {
    border-left-width: 1px;
  }
  .grid_5-5-2 .grid__cell_t-border-top,
  .grid_5-5-2.grid_is-nested .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_5-5-2 .grid__cell_t-border-right,
  .grid_5-5-2.grid_is-nested .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_5-5-2 .grid__cell_t-border-bottom,
  .grid_5-5-2.grid_is-nested .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_5-5-2 .grid__cell_t-border-left,
  .grid_5-5-2.grid_is-nested .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_5-5-2 .grid__cell,
  .grid_5-5-2.grid_is-nested .grid__cell {
    width: 20%;
  }
  .grid_5-5-2 .grid__cell_tc_2,
  .grid_5-5-2.grid_is-nested .grid__cell_tc_2 {
    width: 40%;
  }
  .grid_5-5-2 .grid__cell_tc_3,
  .grid_5-5-2.grid_is-nested .grid__cell_tc_3 {
    width: 60%;
  }
  .grid_5-5-2 .grid__cell_tc_4,
  .grid_5-5-2.grid_is-nested .grid__cell_tc_4 {
    width: 80%;
  }
  .grid_5-5-2 .grid__cell_tc_5,
  .grid_5-5-2.grid_is-nested .grid__cell_tc_5 {
    width: 100%;
  }
  .grid_5-5-2 .grid__cell_t-border-top,
  .grid_5-5-2.grid_is-nested .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_5-5-2 .grid__cell_t-border-right,
  .grid_5-5-2.grid_is-nested .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_5-5-2 .grid__cell_t-border-bottom,
  .grid_5-5-2.grid_is-nested .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_5-5-2 .grid__cell_t-border-left,
  .grid_5-5-2.grid_is-nested .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_5-5-2 .grid__cell,
  .grid_5-5-2.grid_is-nested .grid__cell {
    width: 20%;
  }
  .grid_5-5-2 .grid__cell_c_2,
  .grid_5-5-2.grid_is-nested .grid__cell_c_2 {
    width: 40%;
  }
  .grid_5-5-2 .grid__cell_c_3,
  .grid_5-5-2.grid_is-nested .grid__cell_c_3 {
    width: 60%;
  }
  .grid_5-5-2 .grid__cell_c_4,
  .grid_5-5-2.grid_is-nested .grid__cell_c_4 {
    width: 80%;
  }
  .grid_5-5-2 .grid__cell_c_5,
  .grid_5-5-2.grid_is-nested .grid__cell_c_5 {
    width: 100%;
  }
  .grid_5-5-2 .grid__cell_d-border-top,
  .grid_5-5-2.grid_is-nested .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_5-5-2 .grid__cell_d-border-right,
  .grid_5-5-2.grid_is-nested .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_5-5-2 .grid__cell_d-border-bottom,
  .grid_5-5-2.grid_is-nested .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_5-5-2 .grid__cell_d-border-left,
  .grid_5-5-2.grid_is-nested .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

.grid_is-account-page {
  /**
   * 1. Account for grid bottom margin (above it)
   */
  /**
   * For things like drop downs and modals open on top of error box.
   */
}
.grid_is-account-page .grid__text {
  margin: 10px 5px;
}
.grid_is-account-page .grid__header,
.grid_is-account-page .grid__action {
  padding-left: 7px;
  padding-right: 6px;
}
.grid_is-account-page .grid__action {
  height: 40px 0 60px; /* 1 */
  display: flex;
  align-items: center;
}
.grid_is-account-page .grid__action_margin-bottom_10 {
  margin-bottom: 10px;
}
.grid_is-account-page .grid__cell {
  z-index: 2; /* 1 */
  height: 80px;
  overflow: visible; /* 1 */
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid_is-account-page .grid__cell_height_auto {
  height: auto;
}
.grid_is-account-page .grid__cell_height_30 {
  height: 30px;
}
.grid_is-account-page .grid__cell.grid__cell_is-full-width {
  width: 100%;
}
@media (max-width: 47.99em) {
  .grid_is-account-page .grid__cell_has-left-spacing {
    padding-left: 27px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .grid_is-account-page .grid__cell_has-left-spacing {
    margin-left: 22px;
  }
}
.grid_is-account-page .grid__group_flex .grid__cell {
  height: auto;
}
.grid_is-account-page .grid__cell-content {
  overflow: visible;
  padding: 0;
  height: calc(100% - 10px);
  width: 100%;
}
.grid_is-account-page .grid__cell_r_11px {
  height: 81px;
}
@media (min-width: 64em) {
  .grid_is-account-page .grid__cell_r_2 {
    height: 160px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .grid_is-account-page .grid__cell_tr_2 {
    height: 160px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .grid_is-account-page {
    padding: 0 20px;
  }
  .grid_is-account-page .grid__cell {
    font-size: 14px;
    width: 25%;
  }
  .grid_is-account-page .grid__cell_tc_2 {
    width: 50%;
  }
  .grid_is-account-page .grid__cell_tc_3 {
    width: 75%;
  }
  .grid_is-account-page .grid__cell_tc_4 {
    width: 100%;
  }
}
@media (max-width: 47.99em) {
  .grid_is-account-page {
    padding: 0 10px;
  }
  .grid_is-account-page .grid__cell {
    font-size: 14px;
    width: 50%;
    /**
     * 2 columns on mobile.
     */
  }
  .grid_is-account-page .grid__cell_mr_2 {
    height: 160px;
  }
  .grid_is-account-page .grid__cell_mc_2 {
    width: 100%;
  }
}
@media (min-width: 64em) {
  .grid_is-account-page {
    padding: 0;
  }
}
@media (max-width: 63.99em) {
  .grid_is-account-page .grid__header {
    justify-content: center;
  }
}
@media (max-width: 47.99em) {
  .grid_is-account-page .grid__cell {
    width: 50%;
  }
  .grid_is-account-page .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_is-account-page .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_is-account-page .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_is-account-page .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-account-page .grid__cell_m-border-left {
    border-left-width: 1px;
  }
  .grid_is-account-page .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-account-page .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-account-page .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-account-page .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .grid_is-account-page .grid__cell {
    width: 25%;
  }
  .grid_is-account-page .grid__cell_tc_2 {
    width: 50%;
  }
  .grid_is-account-page .grid__cell_tc_3 {
    width: 75%;
  }
  .grid_is-account-page .grid__cell_tc_4 {
    width: 100%;
  }
  .grid_is-account-page .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_is-account-page .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_is-account-page .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-account-page .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 64em) {
  .grid_is-account-page .grid__cell {
    width: 20%;
  }
  .grid_is-account-page .grid__cell_c_2 {
    width: 40%;
  }
  .grid_is-account-page .grid__cell_c_3 {
    width: 60%;
  }
  .grid_is-account-page .grid__cell_c_4 {
    width: 80%;
  }
  .grid_is-account-page .grid__cell_c_5 {
    width: 100%;
  }
  .grid_is-account-page .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_is-account-page .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_is-account-page .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-account-page .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

@media (max-width: 47.99em) {
  .grid_6-4-1 .grid__cell {
    width: 100%;
  }
  .grid_6-4-1 .grid__cell_mc_2 {
    width: 200%;
  }
  .grid_6-4-1 .grid__cell_mc_1 {
    width: 100%;
  }
  .grid_6-4-1 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_6-4-1 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_6-4-1 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_6-4-1 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
  .grid_6-4-1 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_6-4-1 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_6-4-1 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_6-4-1 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .grid_6-4-1 .grid__cell {
    width: 25%;
  }
  .grid_6-4-1 .grid__cell_tc_2 {
    width: 50%;
  }
  .grid_6-4-1 .grid__cell_tc_3 {
    width: 75%;
  }
  .grid_6-4-1 .grid__cell_tc_4 {
    width: 100%;
  }
  .grid_6-4-1 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_6-4-1 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_6-4-1 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_6-4-1 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_6-4-1 .grid__cell {
    width: 16.6666666667%;
  }
  .grid_6-4-1 .grid__cell_c_2 {
    width: 33.3333333333%;
  }
  .grid_6-4-1 .grid__cell_c_3 {
    width: 50%;
  }
  .grid_6-4-1 .grid__cell_c_4 {
    width: 66.6666666667%;
  }
  .grid_6-4-1 .grid__cell_c_5 {
    width: 83.3333333333%;
  }
  .grid_6-4-1 .grid__cell_c_6 {
    width: 100%;
  }
  .grid_6-4-1 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_6-4-1 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_6-4-1 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_6-4-1 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

/**
 * @modifier 5-5-1
 */
.grid_5-5-1 {
  /**
   * 1. For some reason we need to cancel the borders out, maybe because they're being
   * defined elsewhere?
   *
   * @element cell
   */
}
@media (max-width: 47.99em) {
  .grid_5-5-1 .grid__cell {
    width: 100%;
    /* 1 */
  }
  .grid_5-5-1 .grid__cell_mc_2 {
    width: 200%;
  }
  .grid_5-5-1 .grid__cell_mc_1 {
    width: 100%;
  }
  .grid_5-5-1 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_5-5-1 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_5-5-1 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_5-5-1 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
  .grid_5-5-1 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_5-5-1 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_5-5-1 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_5-5-1 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_5-5-1 .grid__cell {
    width: 20%;
  }
  .grid_5-5-1 .grid__cell_tc_2 {
    width: 40%;
  }
  .grid_5-5-1 .grid__cell_tc_3 {
    width: 60%;
  }
  .grid_5-5-1 .grid__cell_tc_4 {
    width: 80%;
  }
  .grid_5-5-1 .grid__cell_tc_5 {
    width: 100%;
  }
  .grid_5-5-1 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_5-5-1 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_5-5-1 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_5-5-1 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_5-5-1 .grid__cell {
    width: 20%;
    /* 1 */
  }
  .grid_5-5-1 .grid__cell_c_2 {
    width: 40%;
  }
  .grid_5-5-1 .grid__cell_c_3 {
    width: 60%;
  }
  .grid_5-5-1 .grid__cell_c_4 {
    width: 80%;
  }
  .grid_5-5-1 .grid__cell_c_5 {
    width: 100%;
  }
  .grid_5-5-1 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_5-5-1 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_5-5-1 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_5-5-1 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
  .grid_5-5-1 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_5-5-1 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_5-5-1 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_5-5-1 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}

/**
 * @modifier 4-4-2
 */
@media (max-width: 47.99em) {
  .grid_4-4-2 .grid__cell {
    width: 50%;
  }
  .grid_4-4-2 .grid__cell_mc_2 {
    width: 200%;
  }
  .grid_4-4-2 .grid__cell_mc_1 {
    width: 100%;
  }
  .grid_4-4-2 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_4-4-2 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_4-4-2 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_4-4-2 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_4-4-2 .grid__cell {
    width: 25%;
  }
  .grid_4-4-2 .grid__cell_tc_2 {
    width: 50%;
  }
  .grid_4-4-2 .grid__cell_tc_3 {
    width: 75%;
  }
  .grid_4-4-2 .grid__cell_tc_4 {
    width: 100%;
  }
}
@media (min-width: 81.25em) {
  .grid_4-4-2 .grid__cell {
    width: 25%;
  }
  .grid_4-4-2 .grid__cell_c_2 {
    width: 50%;
  }
  .grid_4-4-2 .grid__cell_c_3 {
    width: 75%;
  }
  .grid_4-4-2 .grid__cell_c_4 {
    width: 100%;
  }
}

@media (max-width: 47.99em) {
  .grid_14-3-2 .grid__cell {
    width: 50%;
  }
  .grid_14-3-2 .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_14-3-2 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_14-3-2 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_14-3-2 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_14-3-2 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_14-3-2 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_14-3-2 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_14-3-2 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_14-3-2 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_14-3-2 .grid__cell {
    width: 33.3333333333%;
  }
  .grid_14-3-2 .grid__cell_tc_2 {
    width: 66.6666666667%;
  }
  .grid_14-3-2 .grid__cell_tc_3 {
    width: 100%;
  }
  .grid_14-3-2 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_14-3-2 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_14-3-2 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_14-3-2 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_14-3-2 .grid__cell {
    width: 7.1428571429%;
  }
  .grid_14-3-2 .grid__cell_c_2 {
    width: 14.2857142857%;
  }
  .grid_14-3-2 .grid__cell_c_3 {
    width: 21.4285714286%;
  }
  .grid_14-3-2 .grid__cell_c_4 {
    width: 28.5714285714%;
  }
  .grid_14-3-2 .grid__cell_c_5 {
    width: 35.7142857143%;
  }
  .grid_14-3-2 .grid__cell_c_6 {
    width: 42.8571428571%;
  }
  .grid_14-3-2 .grid__cell_c_7 {
    width: 50%;
  }
  .grid_14-3-2 .grid__cell_c_8 {
    width: 57.1428571429%;
  }
  .grid_14-3-2 .grid__cell_c_9 {
    width: 64.2857142857%;
  }
  .grid_14-3-2 .grid__cell_c_10 {
    width: 71.4285714286%;
  }
  .grid_14-3-2 .grid__cell_c_11 {
    width: 78.5714285714%;
  }
  .grid_14-3-2 .grid__cell_c_12 {
    width: 85.7142857143%;
  }
  .grid_14-3-2 .grid__cell_c_13 {
    width: 92.8571428571%;
  }
  .grid_14-3-2 .grid__cell_c_14 {
    width: 100%;
  }
  .grid_14-3-2 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_14-3-2 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_14-3-2 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_14-3-2 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

@media (max-width: 47.99em) {
  .grid_14-14-2 .grid__cell {
    width: 50%;
  }
  .grid_14-14-2 .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_14-14-2 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_14-14-2 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_14-14-2 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_14-14-2 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_14-14-2 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_14-14-2 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_14-14-2 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_14-14-2 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) {
  .grid_14-14-2 .grid__cell {
    width: 7.1428571429%;
  }
  .grid_14-14-2 .grid__cell_c_2 {
    width: 14.2857142857%;
  }
  .grid_14-14-2 .grid__cell_c_3 {
    width: 21.4285714286%;
  }
  .grid_14-14-2 .grid__cell_c_4 {
    width: 28.5714285714%;
  }
  .grid_14-14-2 .grid__cell_c_5 {
    width: 35.7142857143%;
  }
  .grid_14-14-2 .grid__cell_c_6 {
    width: 42.8571428571%;
  }
  .grid_14-14-2 .grid__cell_c_7 {
    width: 50%;
  }
  .grid_14-14-2 .grid__cell_c_8 {
    width: 57.1428571429%;
  }
  .grid_14-14-2 .grid__cell_c_9 {
    width: 64.2857142857%;
  }
  .grid_14-14-2 .grid__cell_c_10 {
    width: 71.4285714286%;
  }
  .grid_14-14-2 .grid__cell_c_11 {
    width: 78.5714285714%;
  }
  .grid_14-14-2 .grid__cell_c_12 {
    width: 85.7142857143%;
  }
  .grid_14-14-2 .grid__cell_c_13 {
    width: 92.8571428571%;
  }
  .grid_14-14-2 .grid__cell_c_14 {
    width: 100%;
  }
  .grid_14-14-2 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_14-14-2 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_14-14-2 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_14-14-2 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

@media (max-width: 47.99em) {
  .grid_10-3-2 .grid__cell {
    width: 50%;
  }
  .grid_10-3-2 .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_10-3-2 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_10-3-2 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_10-3-2 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_10-3-2 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_10-3-2 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_10-3-2 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_10-3-2 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_10-3-2 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_10-3-2 .grid__cell {
    width: 33.3333333333%;
  }
  .grid_10-3-2 .grid__cell_tc_2 {
    width: 66.6666666667%;
  }
  .grid_10-3-2 .grid__cell_tc_3 {
    width: 100%;
  }
  .grid_10-3-2 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_10-3-2 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_10-3-2 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_10-3-2 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_10-3-2 .grid__cell {
    width: 10%;
  }
  .grid_10-3-2 .grid__cell_c_2 {
    width: 20%;
  }
  .grid_10-3-2 .grid__cell_c_3 {
    width: 30%;
  }
  .grid_10-3-2 .grid__cell_c_4 {
    width: 40%;
  }
  .grid_10-3-2 .grid__cell_c_5 {
    width: 50%;
  }
  .grid_10-3-2 .grid__cell_c_6 {
    width: 60%;
  }
  .grid_10-3-2 .grid__cell_c_7 {
    width: 70%;
  }
  .grid_10-3-2 .grid__cell_c_8 {
    width: 80%;
  }
  .grid_10-3-2 .grid__cell_c_9 {
    width: 90%;
  }
  .grid_10-3-2 .grid__cell_c_10 {
    width: 100%;
  }
  .grid_10-3-2 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_10-3-2 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_10-3-2 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_10-3-2 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

@media (max-width: 47.99em) {
  .grid_10-10-2 .grid__cell {
    width: 50%;
  }
  .grid_10-10-2 .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_10-10-2 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_10-10-2 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_10-10-2 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_10-10-2 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_10-10-2 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_10-10-2 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_10-10-2 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_10-10-2 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) {
  .grid_10-10-2 .grid__cell {
    width: 10%;
  }
  .grid_10-10-2 .grid__cell_c_2 {
    width: 20%;
  }
  .grid_10-10-2 .grid__cell_c_3 {
    width: 30%;
  }
  .grid_10-10-2 .grid__cell_c_4 {
    width: 40%;
  }
  .grid_10-10-2 .grid__cell_c_5 {
    width: 50%;
  }
  .grid_10-10-2 .grid__cell_c_6 {
    width: 60%;
  }
  .grid_10-10-2 .grid__cell_c_7 {
    width: 70%;
  }
  .grid_10-10-2 .grid__cell_c_8 {
    width: 80%;
  }
  .grid_10-10-2 .grid__cell_c_9 {
    width: 90%;
  }
  .grid_10-10-2 .grid__cell_c_10 {
    width: 100%;
  }
  .grid_10-10-2 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_10-10-2 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_10-10-2 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_10-10-2 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

/**
 * @modifier 6-3-2
 */
.grid_6-3-2 {
  /**
   * 1. The borders might be defined previously across different breakpoints so we cancel
   * them.
   *
   * @element cell
   */
}
@media (max-width: 47.99em) {
  .grid_6-3-2 .grid__cell {
    width: 50%;
  }
  .grid_6-3-2 .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_6-3-2 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_6-3-2 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_6-3-2 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_6-3-2 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_6-3-2 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_6-3-2 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_6-3-2 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_6-3-2 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_6-3-2 .grid__cell {
    width: 33.3333333333%;
  }
  .grid_6-3-2 .grid__cell_tc_2 {
    width: 66.6666666667%;
  }
  .grid_6-3-2 .grid__cell_tc_3 {
    width: 100%;
  }
  .grid_6-3-2 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_6-3-2 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_6-3-2 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_6-3-2 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_6-3-2 .grid__cell {
    width: 16.6666666667%;
  }
  .grid_6-3-2 .grid__cell_c_2 {
    width: 33.3333333333%;
  }
  .grid_6-3-2 .grid__cell_c_3 {
    width: 50%;
  }
  .grid_6-3-2 .grid__cell_c_4 {
    width: 66.6666666667%;
  }
  .grid_6-3-2 .grid__cell_c_5 {
    width: 83.3333333333%;
  }
  .grid_6-3-2 .grid__cell_c_6 {
    width: 100%;
  }
  .grid_6-3-2 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_6-3-2 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_6-3-2 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_6-3-2 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

@media (max-width: 47.99em) {
  .grid_7-7-2 .grid__cell {
    width: 50%;
  }
  .grid_7-7-2 .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_7-7-2 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_7-7-2 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_7-7-2 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_7-7-2 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_7-7-2 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_7-7-2 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_7-7-2 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_7-7-2 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_7-7-2 .grid__cell {
    width: 14.2857142857%;
  }
  .grid_7-7-2 .grid__cell_tc_2 {
    width: 28.5714285714%;
  }
  .grid_7-7-2 .grid__cell_tc_3 {
    width: 42.8571428571%;
  }
  .grid_7-7-2 .grid__cell_tc_4 {
    width: 57.1428571429%;
  }
  .grid_7-7-2 .grid__cell_tc_5 {
    width: 71.4285714286%;
  }
  .grid_7-7-2 .grid__cell_tc_6 {
    width: 85.7142857143%;
  }
  .grid_7-7-2 .grid__cell_tc_7 {
    width: 100%;
  }
  .grid_7-7-2 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_7-7-2 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_7-7-2 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_7-7-2 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_7-7-2 .grid__cell {
    width: 14.2857142857%;
  }
  .grid_7-7-2 .grid__cell_c_2 {
    width: 28.5714285714%;
  }
  .grid_7-7-2 .grid__cell_c_3 {
    width: 42.8571428571%;
  }
  .grid_7-7-2 .grid__cell_c_4 {
    width: 57.1428571429%;
  }
  .grid_7-7-2 .grid__cell_c_5 {
    width: 71.4285714286%;
  }
  .grid_7-7-2 .grid__cell_c_6 {
    width: 85.7142857143%;
  }
  .grid_7-7-2 .grid__cell_c_7 {
    width: 100%;
  }
  .grid_7-7-2 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_7-7-2 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_7-7-2 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_7-7-2 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_7-7-2 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_7-7-2 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_7-7-2 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_7-7-2 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

/**
 * @modifier 6-6-2
 */
.grid_6-6-2 {
  /**
   * 1. The borders might be defined previously across different breakpoints so we cancel
   * them.
   *
   * @element cell
   */
}
@media (max-width: 47.99em) {
  .grid_6-6-2 .grid__cell {
    width: 50%;
    /* 1 */
  }
  .grid_6-6-2 .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_6-6-2 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_6-6-2 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_6-6-2 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_6-6-2 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_6-6-2 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_6-6-2 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_6-6-2 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_6-6-2 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_6-6-2 .grid__cell {
    width: 16.6666666667%;
  }
  .grid_6-6-2 .grid__cell_tc_2 {
    width: 33.3333333333%;
  }
  .grid_6-6-2 .grid__cell_tc_3 {
    width: 50%;
  }
  .grid_6-6-2 .grid__cell_tc_4 {
    width: 66.6666666667%;
  }
  .grid_6-6-2 .grid__cell_tc_5 {
    width: 83.3333333333%;
  }
  .grid_6-6-2 .grid__cell_tc_6 {
    width: 100%;
  }
  .grid_6-6-2 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_6-6-2 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_6-6-2 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_6-6-2 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_6-6-2 .grid__cell {
    width: 16.6666666667%;
    /* 1 */
  }
  .grid_6-6-2 .grid__cell_c_2 {
    width: 33.3333333333%;
  }
  .grid_6-6-2 .grid__cell_c_3 {
    width: 50%;
  }
  .grid_6-6-2 .grid__cell_c_4 {
    width: 66.6666666667%;
  }
  .grid_6-6-2 .grid__cell_c_5 {
    width: 83.3333333333%;
  }
  .grid_6-6-2 .grid__cell_c_6 {
    width: 100%;
  }
  .grid_6-6-2 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_6-6-2 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_6-6-2 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_6-6-2 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_6-6-2 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_6-6-2 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_6-6-2 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_6-6-2 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

/**
 * I feel so bad writing this.
 */
@media (max-width: 47.99em) {
  .grid_6-6-3 .grid__cell {
    width: 33.3333333333%;
  }
  .grid_6-6-3 .grid__cell_mc_2 {
    width: 66.6666666667%;
  }
  .grid_6-6-3 .grid__cell_mc_3 {
    width: 100%;
  }
  .grid_6-6-3 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_6-6-3 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_6-6-3 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_6-6-3 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_6-6-3 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_6-6-3 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_6-6-3 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_6-6-3 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_6-6-3 .grid__cell {
    width: 16.6666666667%;
  }
  .grid_6-6-3 .grid__cell_tc_2 {
    width: 33.3333333333%;
  }
  .grid_6-6-3 .grid__cell_tc_3 {
    width: 50%;
  }
  .grid_6-6-3 .grid__cell_tc_4 {
    width: 66.6666666667%;
  }
  .grid_6-6-3 .grid__cell_tc_5 {
    width: 83.3333333333%;
  }
  .grid_6-6-3 .grid__cell_tc_6 {
    width: 100%;
  }
  .grid_6-6-3 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_6-6-3 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_6-6-3 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_6-6-3 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_6-6-3 .grid__cell {
    width: 16.6666666667%;
  }
  .grid_6-6-3 .grid__cell_c_2 {
    width: 33.3333333333%;
  }
  .grid_6-6-3 .grid__cell_c_3 {
    width: 50%;
  }
  .grid_6-6-3 .grid__cell_c_4 {
    width: 66.6666666667%;
  }
  .grid_6-6-3 .grid__cell_c_5 {
    width: 83.3333333333%;
  }
  .grid_6-6-3 .grid__cell_c_6 {
    width: 100%;
  }
  .grid_6-6-3 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_6-6-3 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_6-6-3 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_6-6-3 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_6-6-3 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_6-6-3 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_6-6-3 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_6-6-3 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

/**
 * Takes into account screen resize + appearance of
 * main-menu (which may cause tiles to become smaller
 * on larger screens).
 *
 * @modifier is-box-holder
 */
.grid_is-box-holder .grid__cell {
  width: 25%;
}
.grid_is-box-holder .grid__cell_c_2 {
  width: 50%;
}
.grid_is-box-holder .grid__cell_c_3 {
  width: 75%;
}
.grid_is-box-holder .grid__cell_c_4 {
  width: 100%;
}
@media (max-width: 31.24em) {
  .grid_is-box-holder .grid__cell {
    width: 50%;
  }
  .grid_is-box-holder .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_is-box-holder .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_is-box-holder .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_is-box-holder .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-box-holder .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 31.25em) and (max-width: 47.99em) {
  .grid_is-box-holder .grid__cell {
    width: 25%;
  }
  .grid_is-box-holder .grid__cell_tc_2 {
    width: 50%;
  }
  .grid_is-box-holder .grid__cell_tc_3 {
    width: 75%;
  }
  .grid_is-box-holder .grid__cell_tc_4 {
    width: 100%;
  }
  .grid_is-box-holder .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_is-box-holder .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_is-box-holder .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-box-holder .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_is-box-holder .grid__cell {
    width: 25%;
  }
  .grid_is-box-holder .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-box-holder .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-box-holder .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-box-holder .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_is-box-holder .grid__cell_dc_2 {
    width: 50%;
  }
  .grid_is-box-holder .grid__cell_dc_3 {
    width: 75%;
  }
  .grid_is-box-holder .grid__cell_dc_4 {
    width: 100%;
  }
  .grid_is-box-holder .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_is-box-holder .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_is-box-holder .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-box-holder .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_is-box-holder .grid__cell_d-border-top {
    border-top-width: 0px;
  }
  .grid_is-box-holder .grid__cell_d-border-right {
    border-right-width: 0px;
  }
  .grid_is-box-holder .grid__cell_d-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-box-holder .grid__cell_d-border-left {
    border-left-width: 0px;
  }
  .grid_is-box-holder .grid__cell_w-border-top {
    border-top-width: 1px;
  }
  .grid_is-box-holder .grid__cell_w-border-right {
    border-right-width: 1px;
  }
  .grid_is-box-holder .grid__cell_w-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-box-holder .grid__cell_w-border-left {
    border-left-width: 1px;
  }
}

/**
 * Used in the documents form for example.
 *
 * @modifier columns
 * @value two
 */
.grid_columns_two .grid__cell {
  width: 50%;
}
.grid_columns_two .grid__cell_c_2 {
  width: 100%;
}
@media (max-width: 31.24em) {
  .grid_columns_two .grid__cell {
    width: 100%;
  }
  .grid_columns_two .grid__cell_mc_2 {
    width: 200%;
  }
  .grid_columns_two .grid__cell_mc_1 {
    width: 100%;
  }
}

/**
 * 2 columns on mobile
 * 2 columns on tablet
 * 5 columns rest
 *
 * @modifier columns
 * @value m-2-t-2-d-5-w-5
 */
.grid_columns_m-2-t-2-d-5-w-5 .grid__cell {
  width: 20%;
}
.grid_columns_m-2-t-2-d-5-w-5 .grid__cell_c_2 {
  width: 40%;
}
.grid_columns_m-2-t-2-d-5-w-5 .grid__cell_c_3 {
  width: 60%;
}
.grid_columns_m-2-t-2-d-5-w-5 .grid__cell_c_4 {
  width: 80%;
}
.grid_columns_m-2-t-2-d-5-w-5 .grid__cell_c_5 {
  width: 100%;
}
@media (max-width: 31.24em) {
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell {
    width: 50%;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 31.25em) and (max-width: 47.99em) {
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell {
    width: 50%;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_tc_2 {
    width: 100%;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell {
    width: 20%;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_dc_2 {
    width: 40%;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_dc_3 {
    width: 60%;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_dc_4 {
    width: 80%;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_dc_5 {
    width: 100%;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_d-border-top {
    border-top-width: 0px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_d-border-right {
    border-right-width: 0px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_d-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_d-border-left {
    border-left-width: 0px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_w-border-top {
    border-top-width: 1px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_w-border-right {
    border-right-width: 1px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_w-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_columns_m-2-t-2-d-5-w-5 .grid__cell_w-border-left {
    border-left-width: 1px;
  }
}

/**
 * 2 columns on mobile
 * 2 columns on tablet
 * 3 columns rest
 *
 * @modifier columns
 * @value m-2-t-2-d-3-w-3
 */
.grid_columns_m-2-t-2-d-3-w-3 .grid__cell {
  width: 33.3333333333%;
}
.grid_columns_m-2-t-2-d-3-w-3 .grid__cell_c_2 {
  width: 66.6666666667%;
}
.grid_columns_m-2-t-2-d-3-w-3 .grid__cell_c_3 {
  width: 100%;
}
@media (max-width: 31.24em) {
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell {
    width: 50%;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 31.25em) and (max-width: 47.99em) {
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell {
    width: 50%;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_tc_2 {
    width: 100%;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell {
    width: 33.3333333333%;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_dc_2 {
    width: 66.6666666667%;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_dc_3 {
    width: 100%;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_d-border-top {
    border-top-width: 0px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_d-border-right {
    border-right-width: 0px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_d-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_d-border-left {
    border-left-width: 0px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_w-border-top {
    border-top-width: 1px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_w-border-right {
    border-right-width: 1px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_w-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_columns_m-2-t-2-d-3-w-3 .grid__cell_w-border-left {
    border-left-width: 1px;
  }
}

/**
 * 2 columns on mobile
 * 3 columns on tablet
 * 3 columns rest
 *
 * @modifier columns
 * @value m-2-t-3-d-3-w-3
 */
@media (max-width: 31.24em) {
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell {
    width: 50%;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 31.25em) and (max-width: 63.99em) {
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell {
    width: 33.3333333333%;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_tc_2 {
    width: 66.6666666667%;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_tc_3 {
    width: 100%;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 64em) {
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell {
    width: 33.3333333333%;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_c_2 {
    width: 66.6666666667%;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_c_3 {
    width: 100%;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_columns_m-2-t-3-d-3-w-3 .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

/**
 * @modifier is-ess
 */
.grid_is-ess .grid__cell {
  width: 20%;
}
.grid_is-ess .grid__cell_c_2 {
  width: 40%;
}
.grid_is-ess .grid__cell_c_3 {
  width: 60%;
}
.grid_is-ess .grid__cell_c_4 {
  width: 80%;
}
.grid_is-ess .grid__cell_c_5 {
  width: 100%;
}
@media (max-width: 31.24em) {
  .grid_is-ess .grid__cell {
    width: 50%;
  }
  .grid_is-ess .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_is-ess .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_is-ess .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_is-ess .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-ess .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media screen and (min-width: 500px) and (max-width: 829.9px) {
  .grid_is-ess .grid__cell {
    width: 33.3333333333%;
  }
  .grid_is-ess .grid__cell_tc_2 {
    width: 66.6666666667%;
  }
  .grid_is-ess .grid__cell_tc_3 {
    width: 100%;
  }
  .grid_is-ess .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_is-ess .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_is-ess .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-ess .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media screen and (min-width: 830px) {
  .grid_is-ess .grid__cell {
    font-size: 16px;
  }
  .grid_is-ess .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-ess .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-ess .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-ess .grid__cell_t-border-left {
    border-left-width: 0px;
  }
  .grid_is-ess .grid__cell_d-border-top {
    border-top-width: 1px;
  }
  .grid_is-ess .grid__cell_d-border-right {
    border-right-width: 1px;
  }
  .grid_is-ess .grid__cell_d-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-ess .grid__cell_d-border-left {
    border-left-width: 1px;
  }
}

/**
 * @modifier is-modal
 */
@media (max-width: 81.24em) {
  .grid_is-modal {
    padding: 0;
  }
}

/**
 * Used to align a non-form with a grid form
 *
 * @modifier like-form
 */
.grid_like-form {
  /**
   * @element header
   */
}
.grid_like-form .grid__header {
  padding: 0 18px;
}

/**
 * @modifier margin-bottom
 */
.grid_margin-bottom {
  margin-bottom: 20px;
}

/**
 * @modifier theme
 * @value red
 * @for header
 */
.grid__header_theme_red {
  color: var(--color-red);
}
.grid__header_theme_red .grid__header-number {
  background: var(--color-red);
}

.grid__header_font-large {
  font-size: 20px;
}
@media (max-width: 47.99em) {
  .grid__header_font-large {
    font-size: 18px;
  }
}

/**
 * @modifier color
 * @value red
 * @for cell
 */
.grid__cell_color_red .grid__value {
  color: var(--color-red);
}
.grid__cell_color_red.grid__cell_icon_date .grid__value:before {
  background-image: url("/assets/images/icons/date-red.svg");
}

/**
 * @element first-standalone-text
 */
.grid__first-standalone-text {
  margin: 5px 0 20px;
}

/**
 * @modifier had-margin-bottom
 */
.grid_has-margin-bottom {
  margin-bottom: 20px;
}

/**
 * @modifier is-in-large-table
 * @for grid
 */
.grid_is-in-large-table .grid__cell-content {
  padding: 0 15px 0 25px;
}

/**
 * Grid for the group-information component.
 *
 * @modifier is-group-information
 */
.grid_is-group-information .grid__cell {
  height: auto;
  margin-bottom: 20px;
  width: 25%;
}
.grid_is-group-information .grid__cell_c_2 {
  width: 50%;
}
.grid_is-group-information .grid__cell_c_3 {
  width: 75%;
}
.grid_is-group-information .grid__cell_c_4 {
  width: 100%;
}
@media (max-width: 47.99em) {
  .grid_is-group-information .grid__cell {
    width: 100%;
  }
  .grid_is-group-information .grid__cell_mc_2 {
    width: 200%;
  }
  .grid_is-group-information .grid__cell_mc_1 {
    width: 100%;
  }
  .grid_is-group-information .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_is-group-information .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_is-group-information .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-group-information .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .grid_is-group-information .grid__cell {
    width: 33.3333333333%;
  }
  .grid_is-group-information .grid__cell_tc_2 {
    width: 66.6666666667%;
  }
  .grid_is-group-information .grid__cell_tc_3 {
    width: 100%;
  }
  .grid_is-group-information .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_is-group-information .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_is-group-information .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-group-information .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 64em) {
  .grid_is-group-information .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-group-information .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-group-information .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-group-information .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}

/**
 * @modifier is-group-contacts
 */
.grid_is-group-contacts {
  width: 100%;
}
.grid_is-group-contacts .grid__cell {
  min-height: 70px;
  height: auto;
}
@media (max-width: 47.99em) {
  .grid_is-group-contacts .grid__cell {
    width: 50%;
  }
  .grid_is-group-contacts .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_is-group-contacts .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_is-group-contacts .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_is-group-contacts .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-group-contacts .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .grid_is-group-contacts .grid__cell {
    width: 16.6666666667%;
  }
  .grid_is-group-contacts .grid__cell_tc_2 {
    width: 33.3333333333%;
  }
  .grid_is-group-contacts .grid__cell_tc_3 {
    width: 50%;
  }
  .grid_is-group-contacts .grid__cell_tc_4 {
    width: 66.6666666667%;
  }
  .grid_is-group-contacts .grid__cell_tc_5 {
    width: 83.3333333333%;
  }
  .grid_is-group-contacts .grid__cell_tc_6 {
    width: 100%;
  }
  .grid_is-group-contacts .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_is-group-contacts .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_is-group-contacts .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-group-contacts .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 81.25em) {
  .grid_is-group-contacts .grid__cell {
    width: 10%;
  }
  .grid_is-group-contacts .grid__cell_c_2 {
    width: 20%;
  }
  .grid_is-group-contacts .grid__cell_c_3 {
    width: 30%;
  }
  .grid_is-group-contacts .grid__cell_c_4 {
    width: 40%;
  }
  .grid_is-group-contacts .grid__cell_c_5 {
    width: 50%;
  }
  .grid_is-group-contacts .grid__cell_c_6 {
    width: 60%;
  }
  .grid_is-group-contacts .grid__cell_c_7 {
    width: 70%;
  }
  .grid_is-group-contacts .grid__cell_c_8 {
    width: 80%;
  }
  .grid_is-group-contacts .grid__cell_c_9 {
    width: 90%;
  }
  .grid_is-group-contacts .grid__cell_c_10 {
    width: 100%;
  }
}

.grid_is-broker-card .grid__cell-content {
  padding: 0;
}
.grid_is-broker-card .grid__cell {
  height: 105px;
  width: 12.5%;
}
.grid_is-broker-card .grid__cell_c_2 {
  width: 25%;
}
.grid_is-broker-card .grid__cell_c_3 {
  width: 37.5%;
}
.grid_is-broker-card .grid__cell_c_4 {
  width: 50%;
}
.grid_is-broker-card .grid__cell_c_5 {
  width: 62.5%;
}
.grid_is-broker-card .grid__cell_c_6 {
  width: 75%;
}
.grid_is-broker-card .grid__cell_c_7 {
  width: 87.5%;
}
.grid_is-broker-card .grid__cell_c_8 {
  width: 100%;
}
@media (max-width: 47.99em) {
  .grid_is-broker-card .grid__cell {
    width: 50%;
  }
  .grid_is-broker-card .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_is-broker-card .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_is-broker-card .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_is-broker-card .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-broker-card .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .grid_is-broker-card .grid__cell {
    width: 25%;
  }
  .grid_is-broker-card .grid__cell_tc_2 {
    width: 50%;
  }
  .grid_is-broker-card .grid__cell_tc_3 {
    width: 75%;
  }
  .grid_is-broker-card .grid__cell_tc_4 {
    width: 100%;
  }
  .grid_is-broker-card .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_is-broker-card .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_is-broker-card .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-broker-card .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 64em) {
  .grid_is-broker-card .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-broker-card .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-broker-card .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-broker-card .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}

.grid_is-group-contact-card .grid__cell {
  min-height: 105px;
  height: auto;
  width: 25%;
}
.grid_is-group-contact-card .grid__cell_c_2 {
  width: 50%;
}
.grid_is-group-contact-card .grid__cell_c_3 {
  width: 75%;
}
.grid_is-group-contact-card .grid__cell_c_4 {
  width: 100%;
}
@media (max-width: 47.99em) {
  .grid_is-group-contact-card .grid__cell {
    width: 50%;
  }
  .grid_is-group-contact-card .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_is-group-contact-card .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_is-group-contact-card .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_is-group-contact-card .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-group-contact-card .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .grid_is-group-contact-card .grid__cell {
    width: 16.6666666667%;
  }
  .grid_is-group-contact-card .grid__cell_tc_2 {
    width: 33.3333333333%;
  }
  .grid_is-group-contact-card .grid__cell_tc_3 {
    width: 50%;
  }
  .grid_is-group-contact-card .grid__cell_tc_4 {
    width: 66.6666666667%;
  }
  .grid_is-group-contact-card .grid__cell_tc_5 {
    width: 83.3333333333%;
  }
  .grid_is-group-contact-card .grid__cell_tc_6 {
    width: 100%;
  }
  .grid_is-group-contact-card .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_is-group-contact-card .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_is-group-contact-card .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-group-contact-card .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 64em) {
  .grid_is-group-contact-card .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-group-contact-card .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-group-contact-card .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-group-contact-card .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}

.grid_is-group-contact-remove .grid__cell-content {
  padding: 0 3px 0 0;
}
.grid_is-group-contact-remove .grid__cell {
  height: auto;
  width: 11.1111111111%;
}
.grid_is-group-contact-remove .grid__cell_c_2 {
  width: 22.2222222222%;
}
.grid_is-group-contact-remove .grid__cell_c_3 {
  width: 33.3333333333%;
}
.grid_is-group-contact-remove .grid__cell_c_4 {
  width: 44.4444444444%;
}
.grid_is-group-contact-remove .grid__cell_c_5 {
  width: 55.5555555556%;
}
.grid_is-group-contact-remove .grid__cell_c_6 {
  width: 66.6666666667%;
}
.grid_is-group-contact-remove .grid__cell_c_7 {
  width: 77.7777777778%;
}
.grid_is-group-contact-remove .grid__cell_c_8 {
  width: 88.8888888889%;
}
.grid_is-group-contact-remove .grid__cell_c_9 {
  width: 100%;
}
@media (max-width: 47.99em) {
  .grid_is-group-contact-remove .grid__cell {
    width: 50%;
  }
  .grid_is-group-contact-remove .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_is-group-contact-remove .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_is-group-contact-remove .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_is-group-contact-remove .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-group-contact-remove .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .grid_is-group-contact-remove .grid__cell {
    width: 16.6666666667%;
  }
  .grid_is-group-contact-remove .grid__cell_tc_2 {
    width: 33.3333333333%;
  }
  .grid_is-group-contact-remove .grid__cell_tc_3 {
    width: 50%;
  }
  .grid_is-group-contact-remove .grid__cell_tc_4 {
    width: 66.6666666667%;
  }
  .grid_is-group-contact-remove .grid__cell_tc_5 {
    width: 83.3333333333%;
  }
  .grid_is-group-contact-remove .grid__cell_tc_6 {
    width: 100%;
  }
  .grid_is-group-contact-remove .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_is-group-contact-remove .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_is-group-contact-remove .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-group-contact-remove .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 64em) {
  .grid_is-group-contact-remove .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-group-contact-remove .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-group-contact-remove .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-group-contact-remove .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}

/**
 * @modifier is-centered
 * @for value
 */
@media (min-width: 48em) {
  .grid__value_centered_from-tablet {
    display: flex;
    align-items: center;
  }
}

.grid_is-group-contact-types .grid__header {
  padding: 0 4px;
}
@media (max-width: 63.99em) {
  .grid_is-group-contact-types {
    padding: 0 20px;
  }
}
.grid_is-group-contact-types .grid__cell-content {
  padding: 0 0 0 3px;
}
.grid_is-group-contact-types .grid__cell {
  min-height: 50px;
  height: auto;
  font-size: 14px;
  width: 25%;
}
.grid_is-group-contact-types .grid__cell_c_2 {
  width: 50%;
}
.grid_is-group-contact-types .grid__cell_c_3 {
  width: 75%;
}
.grid_is-group-contact-types .grid__cell_c_4 {
  width: 100%;
}
@media (max-width: 47.99em) {
  .grid_is-group-contact-types .grid__cell {
    width: 50%;
  }
  .grid_is-group-contact-types .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_is-group-contact-types .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_is-group-contact-types .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_is-group-contact-types .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-group-contact-types .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 64em) {
  .grid_is-group-contact-types .grid__cell {
    min-height: 40px;
  }
  .grid_is-group-contact-types .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-group-contact-types .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-group-contact-types .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-group-contact-types .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}

/**
 * Main difference between this and is-form is the
 * breakpoints. Here we use desktop instead of desktop_plus.
 */
.grid_is-full-page-form .grid__header {
  padding: 0 4px;
}
@media (max-width: 63.99em) {
  .grid_is-full-page-form {
    padding: 0 20px;
  }
}
.grid_is-full-page-form .grid__cell-content {
  overflow: visible;
  padding: 0;
  height: calc(100% - 10px);
  width: 100%;
}
.grid_is-full-page-form .grid__cell {
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 20%;
}
.grid_is-full-page-form .grid__cell_c_2 {
  width: 40%;
}
.grid_is-full-page-form .grid__cell_c_3 {
  width: 60%;
}
.grid_is-full-page-form .grid__cell_c_4 {
  width: 80%;
}
.grid_is-full-page-form .grid__cell_c_5 {
  width: 100%;
}
@media (max-width: 47.99em) {
  .grid_is-full-page-form .grid__cell {
    width: 50%;
  }
  .grid_is-full-page-form .grid__cell_mc_2 {
    width: 100%;
  }
  .grid_is-full-page-form .grid__cell_m-border-top {
    border-top-width: 1px;
  }
  .grid_is-full-page-form .grid__cell_m-border-right {
    border-right-width: 1px;
  }
  .grid_is-full-page-form .grid__cell_m-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-full-page-form .grid__cell_m-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .grid_is-full-page-form .grid__cell {
    width: 25%;
  }
  .grid_is-full-page-form .grid__cell_tc_2 {
    width: 50%;
  }
  .grid_is-full-page-form .grid__cell_tc_3 {
    width: 75%;
  }
  .grid_is-full-page-form .grid__cell_tc_4 {
    width: 100%;
  }
  .grid_is-full-page-form .grid__cell_t-border-top {
    border-top-width: 1px;
  }
  .grid_is-full-page-form .grid__cell_t-border-right {
    border-right-width: 1px;
  }
  .grid_is-full-page-form .grid__cell_t-border-bottom {
    border-bottom-width: 1px;
  }
  .grid_is-full-page-form .grid__cell_t-border-left {
    border-left-width: 1px;
  }
}
@media (min-width: 64em) {
  .grid_is-full-page-form .grid__cell_t-border-top {
    border-top-width: 0px;
  }
  .grid_is-full-page-form .grid__cell_t-border-right {
    border-right-width: 0px;
  }
  .grid_is-full-page-form .grid__cell_t-border-bottom {
    border-bottom-width: 0px;
  }
  .grid_is-full-page-form .grid__cell_t-border-left {
    border-left-width: 0px;
  }
}

@media (min-width: 48em) {
  .grid_is-tablet-like-desktop .grid__cell_d-height_small {
    height: 25px;
  }
  .grid_is-tablet-like-desktop .grid__cell_d-height_small .grid__cell-content {
    padding-bottom: 0;
  }
  .grid_is-tablet-like-desktop .grid__cell_d-height_small .grid__label {
    display: none;
  }
  .grid_is-tablet-like-desktop .grid__cell_d-height_small .grid__value {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
  }
}
@media (max-width: 47.99em) {
  .grid_is-tablet-like-desktop .grid__cell_d-only {
    display: none;
  }
}
@media (min-width: 48em) {
  .grid_is-tablet-like-desktop .grid__cell_d-only {
    display: block;
  }
}

.group-contact-card {
  display: block;
}
.group-contact-card_padding-bottom_15 {
  padding-bottom: 15px;
}

.group-contact-card__header {
  height: 50px;
  display: flex;
  align-items: center;
}
.group-contact-card__header_side-padding_20 {
  padding-left: 20px;
  padding-right: 20px;
}

.group-contact-card__name {
  font-size: 16px;
  font-weight: bold;
  flex: 1;
}

.group-contact-card__dots-menu {
  margin-left: 20px;
}

.group-information-form {
  display: block;
}

.group-information-form__section {
  margin-bottom: 20px;
}

/**
 * Used for header navs that have a bottom bar that animates between the different
 * links whenever a link becomes active. Used alongside the `header-nav` component.
 *
 * @block header-nav
 */
.header-nav {
  height: 100%;
  display: flex;
  position: relative;
}
@media (min-width: 48em) {
  .header-nav_gap_40-from-tablet {
    gap: 40px;
  }
  .header-nav_padding-left_30-from-tablet {
    padding-left: 30px;
  }
}
@media (max-width: 47.99em) {
  .header-nav_padding-left_10-until-tablet {
    padding-left: 10px;
  }
}

/**
 * 1. Display none because we don't want it to appear until the first child registers,
 * and so that the bar doesn't animate on the first child. We only want it to animate
 * when switching _between_ children.
 */
.header-nav__bar {
  position: absolute;
  bottom: 0;
  display: none; /* 1 */
  height: 4px;
  transition: all 300ms ease;
  background-color: var(--main-color);
}

.header-nav__item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
}
.header-nav__item_max-width_100 {
  max-width: 100px;
}
.header-nav__item_margin-right_20 {
  margin-right: 20px;
}
.header-nav__item_flex-shrink_0 {
  flex-shrink: 0;
}

/**
 * 1. For the background color to cover the entire number.
 */
.header-nav__indicator {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: normal;
  border-radius: 6.5px;
  color: white;
  background: #D57F73;
  min-width: 7px;
  height: 13px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  display: inline-block;
  text-align: center;
  padding: 0 4px; /* 1 */
}
.header-nav__indicator_background_purple {
  background: var(--color-purple);
}

.header-nav__label {
  font-family: "Montserrat", sans-serif;
  font-size: var(--header-nav-label-font-size);
  font-weight: bolder;
  color: #9B9B9B;
  text-transform: uppercase;
  min-width: var(--header-nav-label-desktop-min-width);
}
@media (max-width: 63.99em) {
  .header-nav__label {
    min-width: var(--header-nav-label-tablet-min-width);
  }
}
@media (max-width: 47.99em) {
  .header-nav__label {
    font-size: 10px;
  }
}
.header-nav__label_min-width_70 {
  min-width: 70px;
}
.header-nav__label_in-quoting-settings {
  font-weight: normal;
  color: #5E5E5E;
}
.header-nav__label_is-subdued-text {
  font-weight: normal;
  font-size: 10px;
  color: #5E5E5E;
}
.header-nav__label_is-active {
  color: var(--main-color);
}
.header-nav__label_is-active.header-nav__label_in-quoting-settings {
  font-weight: 600;
}
.header-nav__label_is-active.header-nav__label_is-subdued-text {
  font-weight: 600;
}
.header-nav__label_font-weight_semi-bold {
  font-weight: 600;
}
.header-nav__label_font-weight_regular {
  font-weight: 400;
}
.header-nav__label_font-weight_600 {
  font-weight: 600;
}
.header-nav__label_font-weight_bold {
  font-weight: 700;
}
.header-nav__label_font-size_10 {
  font-size: 10px;
}
.header-nav__label_min-width_0 {
  min-width: 0;
}
.header-nav__label_color_dark-grey {
  color: #5E5E5E;
}
.header-nav__label_color_dark-grey-2 {
  color: #494949;
}

@media (max-width: 47.99em) {
  .header-nav {
    width: 100%;
  }
}
.header-nav_theme_main-color .header-nav__bar {
  background-color: var(--main-color);
}
.header-nav_theme_main-color .header-nav__label {
  font-size: 12px;
  min-width: 90px;
}
@supports not (zoom: 1) {
  .header-nav_theme_main-color .header-nav__label.header-nav__label_is-preview {
    font-size: 7.5px;
    min-width: 67.5px;
  }
}
@media (max-width: 63.99em) {
  .header-nav_theme_main-color .header-nav__label {
    min-width: 70px;
  }
}
@media (max-width: 47.99em) {
  .header-nav_theme_main-color .header-nav__label {
    font-size: 10px;
  }
}
.header-nav_theme_main-color .header-nav__label_min-width_70 {
  min-width: 70px;
}
.header-nav_theme_main-color .header-nav__label_in-quoting-settings {
  font-weight: normal;
  color: #5E5E5E;
}
.header-nav_theme_main-color .header-nav__label_is-subdued-text {
  font-weight: normal;
  font-size: 10px;
  color: #5E5E5E;
}
.header-nav_theme_main-color .header-nav__label_is-active {
  color: var(--main-color);
}
.header-nav_theme_main-color .header-nav__label_is-active.header-nav__label_in-quoting-settings {
  font-weight: 600;
}
.header-nav_theme_main-color .header-nav__label_is-active.header-nav__label_is-subdued-text {
  font-weight: 600;
}
.header-nav_theme_main-color .header-nav__label_font-weight_semi-bold {
  font-weight: 600;
}
.header-nav_theme_main-color .header-nav__label_font-weight_regular {
  font-weight: 400;
}
.header-nav_theme_main-color .header-nav__label_font-weight_600 {
  font-weight: 600;
}
.header-nav_theme_main-color .header-nav__label_font-weight_bold {
  font-weight: 700;
}
.header-nav_theme_main-color .header-nav__label_font-size_10 {
  font-size: 10px;
}
.header-nav_theme_main-color .header-nav__label_min-width_0 {
  min-width: 0;
}
.header-nav_theme_main-color .header-nav__label_color_dark-grey {
  color: #5E5E5E;
}
.header-nav_theme_main-color .header-nav__label_color_dark-grey-2 {
  color: #494949;
}

:root {
  --icon-size: 15px;
  --modal-offset: 10px;
}

/**
 * Icon (Question mark by default) that opens into a help modal.
 */
.help-tip {
  min-height: var(--icon-size);
  position: relative;
  z-index: 3;
}
.help-tip_margin-top {
  margin-top: 4px;
}
.help-tip_display_inline-flex {
  display: inline-flex;
}
.help-tip_min-height_13 {
  min-height: 13px;
}
.help-tip_z-index_1 {
  z-index: 1;
}

.help-tip__item {
  color: #5C5050;
}
.help-tip__item:not(:last-child) {
  margin-bottom: 15px;
}

.help-tip__trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.help-tip__icon-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: absolute;
}

.help-tip__icon {
  display: flex;
  align-items: center;
  height: 15px;
  width: 15px;
  background: url("/assets/images/icons/question-mark.svg") center center no-repeat;
  background-size: 13px 13px;
  /**
   * Preload active question mark image
   */
}
.help-tip__icon:after {
  width: 0;
  height: 0;
  background: var(--svg-question-mark-active);
}
.help-tip__icon_location_modal {
  cursor: pointer;
  position: absolute;
}
.help-tip__icon_height_13 {
  height: 13px;
}

.help-tip__path {
  fill: #B0A7A8;
  stroke-width: 2;
}

.help-tip__title {
  margin-bottom: 15px;
}

.help-tip__heading {
  margin: 15px 0;
}

.help-tip__text {
  margin-bottom: 10px;
}

.help-tip__trigger-component {
  display: flex;
  align-items: center;
}

.help-tip__modal {
  box-sizing: border-box;
  position: absolute;
  top: calc(-1 * var(--modal-offset));
  left: calc(-1 * var(--modal-offset));
  width: 276px;
  border-radius: 3px;
  background-color: #FFF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  animation: dots-menu__fade-in 300ms linear;
  font-size: 13px;
  padding: 12px;
  /**
   * When there is no space left or right we shrink the width.
   */
}
.help-tip__modal_overflow_scroll {
  overflow: auto;
  max-height: 50vh;
  /**
  * When the content is scrollable and the help-tip is flipped,
  * we render the icon on the top. We add padding to support that.
  */
}
.help-tip__modal_overflow_scroll:not(.help-tip__modal_vertical_bottom) {
  padding-top: calc(var(--icon-size) + var(--modal-offset) + 10px);
}
.help-tip__modal_is-shrinked {
  width: 150px;
}
.help-tip__modal_border-radius_10 {
  border-radius: 10px;
}
.help-tip__modal_width_172 {
  width: 172px;
}
.help-tip__modal_width_300 {
  width: 300px;
}
.help-tip__modal_width_410 {
  width: 410px;
}
.help-tip__modal_width_500 {
  width: 500px;
}
.help-tip__modal_width_550 {
  width: 550px;
}
.help-tip__modal_width_110 {
  width: 110px;
}
.help-tip__modal_is-scrollable {
  padding-right: 0;
  padding-bottom: 0;
}
.help-tip__modal_background_pink {
  background-color: #F6E8E7;
}
.help-tip__modal_background-color_red {
  background-color: var(--color-red);
}
.help-tip__modal_background-color_main {
  background-color: var(--main-color);
}
.help-tip__modal_horizontal_right .help-tip__icon-container, .help-tip__modal_horizontal_right .help-tip__icon {
  left: var(--modal-offset);
}
.help-tip__modal_horizontal_left {
  left: auto;
  right: calc(-1 * var(--icon-size) - var(--modal-offset));
}
.help-tip__modal_horizontal_left .help-tip__icon-container, .help-tip__modal_horizontal_left .help-tip__icon {
  right: var(--modal-offset);
}
.help-tip__modal_vertical_top {
  top: auto;
  bottom: calc(-1 * var(--icon-size) - var(--modal-offset));
  padding-bottom: calc(var(--icon-size) + var(--modal-offset) + 10px);
}
.help-tip__modal_vertical_top .help-tip__icon-container, .help-tip__modal_vertical_top .help-tip__icon {
  bottom: var(--modal-offset);
}
.help-tip__modal_vertical_top .help-tip__icon-container_is-content-scrollable, .help-tip__modal_vertical_top .help-tip__icon_is-content-scrollable {
  bottom: auto;
  top: var(--modal-offset);
}
.help-tip__modal_vertical_bottom {
  padding-top: calc(var(--icon-size) + var(--modal-offset) + 10px);
}
.help-tip__modal_vertical_bottom .help-tip__icon-container, .help-tip__modal_vertical_bottom .help-tip__icon {
  top: var(--modal-offset);
}
.help-tip__modal_direction_row {
  padding-top: 12px;
  padding-bottom: 12px;
}
.help-tip__modal_direction_row.help-tip__modal_horizontal_left {
  padding-right: calc(var(--icon-size) + var(--modal-offset) + 10px);
}
.help-tip__modal_direction_row.help-tip__modal_horizontal_right {
  padding-left: calc(var(--icon-size) + var(--modal-offset) + 10px);
}
.help-tip__modal_is-discard-restore {
  --modal-offset: 0;
  height: 20px;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
  border-radius: 50px;
  padding-top: 0;
  padding-bottom: 0;
}
.help-tip__modal_is-discard-restore.help-tip__modal_horizontal_left {
  padding-right: calc(var(--icon-size) + 10px);
}
.help-tip__modal_is-discard-restore.help-tip__modal_horizontal_right {
  padding-left: calc(var(--icon-size) + 10px);
}

.help-tip__list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.help-tip__list li {
  padding-top: 5px;
}
.help-tip__list li:first-child {
  padding-top: 0;
}
.help-tip__list_is-styled {
  list-style: disc;
  margin-left: 20px;
}

.help-tip__trigger:hover .help-tip__icon,
*:focus .help-tip__trigger .help-tip__icon {
  background-image: var(--svg-question-mark-focus);
  opacity: 0.8;
}

.help-tip__icon_location_modal {
  background-image: var(--svg-question-mark-modal);
}

.help-tip__icon_location_modal:focus {
  background-image: var(--svg-question-mark-focus);
}

/**
 * 1. Despite being in the ember wormhole, the modal will first be rendered in place
 * (inside the help tip component) and then in the outer `popups` element.
 * Being rendered in place caused the help tip modal to push surrounding elements.
 * The solution is to never actually display the modal when it's mistakenly rendered
 * in place.
 */
.help-tip .help-tip__modal {
  display: none; /* [1] */
}

.help-tip__disabled-icon {
  height: 15px;
  width: 15px;
  background: url("/assets/images/icons/question-mark.svg");
}

.help-tip_theme_white .help-tip__trigger .help-tip__icon {
  background-image: url("/assets/images/icons/question-mark-white.svg");
}

.help-tip_color_red .help-tip__trigger .help-tip__icon {
  background-image: url("/assets/images/icons/question-mark-red.svg");
}

/**
 * Shows an animated hour glass to indicate that the something is loading.
 *
 * @block hour-glass
 * -- icon icon_num_1
 * -- icon icon_num_2
 * -- icon icon_num_3
 * -- icon icon_num_4
 * -- icon icon_num_5
 */
.hour-glass {
  position: relative;
  width: 32px;
  height: 46px;
}
.hour-glass_size_small {
  width: 25px;
  height: 37px;
}
.hour-glass_size_centi {
  width: 22px;
  height: 32px;
}
.hour-glass_size_micro {
  width: 11px;
  height: 16px;
}
.hour-glass_size_nano {
  width: 9px;
  height: 13px;
}

/**
 * @element icon
 */
.hour-glass__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: hour-glass__fade-in-out 2.5s linear infinite;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  opacity: 0;
  /**
   * @modifier num
   * @value 1
   */
  /**
   * @modifier num
   * @value 2
   */
  /**
   * @modifier num
   * @value 3
   */
  /**
   * @modifier num
   * @value 4
   */
  /**
   * @modifier num
   * @value 5
   */
}
.hour-glass__icon_num_1 {
  animation-name: hour-glass__fade-out;
  background-image: url("/assets/images/hour-glasses/hour-glass-5.svg");
  transform: rotate(180deg);
}
.hour-glass__icon_num_2 {
  background-image: url("/assets/images/hour-glasses/hour-glass-2.svg");
}
.hour-glass__icon_num_3 {
  animation-delay: 0.5s;
  background-image: url("/assets/images/hour-glasses/hour-glass-3.svg");
}
.hour-glass__icon_num_4 {
  animation-delay: 1s;
  background-image: url("/assets/images/hour-glasses/hour-glass-4.svg");
}
.hour-glass__icon_num_5 {
  animation-delay: 1.5s;
  background-image: url("/assets/images/hour-glasses/hour-glass-5.svg");
  animation-name: hour-glass__fade-in-out-turn;
}

.hour-glass_theme_blue .hour-glass__icon_num_1 {
  background-image: url("/assets/images/themes/blue/hour-glasses/hour-glass-5.svg");
}
.hour-glass_theme_blue .hour-glass__icon_num_2 {
  background-image: url("/assets/images/themes/blue/hour-glasses/hour-glass-2.svg");
}
.hour-glass_theme_blue .hour-glass__icon_num_3 {
  background-image: url("/assets/images/themes/blue/hour-glasses/hour-glass-3.svg");
}
.hour-glass_theme_blue .hour-glass__icon_num_4 {
  background-image: url("/assets/images/themes/blue/hour-glasses/hour-glass-4.svg");
}
.hour-glass_theme_blue .hour-glass__icon_num_5 {
  background-image: url("/assets/images/themes/blue/hour-glasses/hour-glass-5.svg");
}

@keyframes hour-glass__fade-out {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}
@keyframes hour-glass__fade-in-out {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@keyframes hour-glass__fade-in-out-turn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: rotate(0deg);
  }
  40% {
    opacity: 1;
    transform: rotate(180deg);
  }
  60% {
    opacity: 1;
    transform: rotate(180deg);
  }
  61% {
    opacity: 0;
  }
}
/**
 * Page containing an index list such as the list of employees.
 *
 * Divided into a header and the content that contains the list and the
 * detail view.
 *
 * 1. In order to preserve height flow.
 *
 * @block index
 */
.index {
  display: flex;
  flex-direction: column;
  height: 100%; /* 1 */
  /**
   * @modifier background
   * @value white
   */
}
.index_background_white {
  background-color: #FFF;
}

/**
 * @element header
 */
.index__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  padding: 0 15px;
  border-bottom: solid 1px var(--color-light-blue);
  background-color: #FFF;
}

.index__content {
  flex: 1;
  overflow: hidden;
}
.index__content > .liquid-container {
  height: 100%; /* 2 */
}
.index__content > .liquid-container > .liquid-child {
  height: 100%; /* 2 */
}
.index__content_background_grey {
  background-color: #F8F8F8;
}
.index__content_overflow-y_scroll {
  overflow-y: scroll;
}

/**
 * On mobile and tablet exclusively, we show the title of the page along with the
 * burger icon to open the left nav.
 *
 * This section is hidden on desktop as the left nav is always visible.
 *
 * @element mobile-header
 */
.index__mobile-header {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 18px;
}

/**
 * On Desktop exclusively, we show the employees filter status
 * This section is hidden on mobile and tablet.
 *
 * @element mobile-header
 */
.index__desktop-header {
  height: 100%;
  display: flex;
  align-items: center;
  width: 300px;
  /**
   * @for desktop-header
   */
}
@media (max-width: 63.99em) {
  .index__desktop-header {
    display: none;
  }
}
@media (min-width: 64em) and (max-width: 74.99em) {
  .index__desktop-header_is-hidden-desktop-medium {
    display: none;
  }
}
.index__desktop-header_can-expand {
  width: auto;
}
.index__desktop-header_employees-list {
  height: auto;
  width: auto;
  flex-direction: column;
  align-items: flex-start;
  margin: 10px 0;
  gap: 6px;
}
.index__desktop-header_has-border-right {
  border-right: solid 1px rgba(18, 151, 172, 0.1019607843);
}

/**
 * The title of the page. Only needed on < desktop breakpoints because
 * we can't see the current page view the active left nav item (since left
 * nav is hidden).
 *
 * @element title
 */
.index__title {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 20px;
}
@media (max-width: 47.99em) {
  .index__title {
    font-size: 17px;
  }
}

/**
 * 1. In order to preserve height flow.
 *
 * @element left
 */
.index__left {
  height: 100%; /* [1] */
  flex: 1;
}
.index__left_display_flex {
  display: flex;
}
.index__left_gap_20 {
  gap: 20px;
}

/**
 * Right part of the header.
 *
 * @element right
 */
.index__right {
  display: flex;
  align-items: center;
}

/**
 * @element header-action
 */
.index__header-action {
  margin-left: 20px;
  display: flex;
  align-items: center;
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .index__header-action_tablet-shrink {
    margin-left: 10px;
  }
  .index__header-action_tablet-shrink:first-child {
    margin-left: 0;
  }
}

/**
 * @element header-menu
 */
.index__header-menu {
  margin-left: 20px;
  width: 40px;
  height: 52px;
}
.index__header-menu_margin-left-5 {
  margin-left: 5px;
}

@media (min-width: 48em) and (max-width: 63.99em) {
  .index__mobile-header {
    font-size: 20px;
  }
}
@media (min-width: 64em) {
  .index__mobile-header {
    display: none;
  }
}
@media (min-width: 64em) and (max-width: 74.99em) {
  .index__mobile-header_is-visible-desktop-medium {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 20px;
  }
}
@media (min-width: 64em) {
  .index__header {
    padding: 0 25px;
  }
}
/**
 * Used for example in the Print Enrollment Summary page.
 *
 * @modifier with-checkbox
 * @for header
 */
.index__header_with-checkbox {
  /**
   * 1. Align top checkbox with the rest of the checkboxes in the list.
   */
  /**
   * 1. Align top checkbox with the rest of the checkboxes in the list.
   */
}
.index__header_with-checkbox .index__desktop-header {
  padding-left: 10px; /* 1 */
}
.index__header_with-checkbox .index__mobile-header {
  padding-left: 20px; /* 1 */
}

.index__desktop-header-title {
  color: #95989A;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  line-height: 18px;
  text-transform: uppercase;
}

/**
 * The modal that opens when we click on the tiles/links that open iframe, etc..
 *
 * @block info-modal
 */
.info-modal {
  max-height: 100%;
}
@media (max-width: 47.99em) {
  .info-modal {
    height: 100%;
  }
}

/**
 * @element header
 */
.info-modal__header {
  position: relative;
  display: flex;
  align-items: center;
  height: 78px;
  width: 100%;
}

/**
 * @element title
 */
.info-modal__title {
  font-size: 16px;
  /**
   * @modifier has-margin
   * @value title
   */
}
.info-modal__title_has-margin {
  margin-left: 10px;
}

/**
 * @element icon
 */
.info-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 78px;
  height: 78px;
  margin-right: 20px;
  padding: 4px;
}
.info-modal__icon img {
  max-width: 100%;
  max-height: 100%;
}

/**
 * @element header-right
 */
.info-modal__header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
}

/**
 * @element close
 */
.info-modal__close {
  width: 45px;
  height: 45px;
  cursor: pointer;
  font-size: 0;
  color: transparent;
  background: url("/assets/images/icons/x-sign-clear.svg") center center no-repeat;
  background-size: 14px 14px;
  border-radius: 5px;
  transition: transform linear 200ms;
}
.info-modal__close:hover {
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}
.info-modal__close:active {
  opacity: 0.7;
}
.info-modal__close:focus {
  opacity: 0.8;
}

/**
 * @element content
 */
.info-modal__content {
  padding: 25px 15px;
  box-sizing: border-box;
  font-size: 13px;
  max-height: calc(100vh - 78px);
  overflow: auto;
  /**
   * @modifier type
   * @value iframe
   */
}
.info-modal__content_type_iframe {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.info-modal__content_type_iframe iframe, .info-modal__content_type_iframe object, .info-modal__content_type_iframe embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.info-modal__content a {
  text-decoration: underline;
  color: var(--main-color);
  cursor: pointer;
}
.info-modal__content a:hover, .info-modal__content a:focus {
  color: var(--main-color-dark);
}
.info-modal__content a:active {
  color: var(--main-color);
}

/**
 * @modifier theme
 * @value main color
 */
.info-modal_theme_main {
  background-color: var(--main-color);
  color: #FFF;
}
.info-modal_theme_main .info-modal__close {
  background-image: var(--svg-x-sign-white);
}
.info-modal_theme_main .info-modal__content a:not(:hover):not(:focus) {
  color: #FFF;
}
.info-modal_theme_main .info-modal__content a:active {
  color: var(--main-color-dark);
  opacity: 0.7;
}

.info-table {
  background: white;
  border: solid thin #DADADA;
  color: #4A4A4A;
  font-size: 16px;
}
.info-table_theme_green {
  border: none;
}
.info-table_has-top-border {
  border-top: solid thin #CBDADA;
}
.info-table_is-attached {
  border-bottom: 0;
}
.info-table_font_small {
  font-size: 14px;
}
.info-table_padding-left_19 {
  padding-left: 19px;
}
.info-table_padding-right_10 {
  padding-right: 10px;
}
.info-table_background-color_grey {
  background-color: #F8F8F8;
}
.info-table_background-color_dark-grey {
  background-color: #F5F5F5;
}
.info-table_no-left-padding-per-cell .info-table__cell {
  padding-left: 0;
}
.info-table_no-padding .info-table__row {
  padding: 0 !important;
}
.info-table_border_none {
  border: none;
}
.info-table_border_grey {
  border: 1px solid #C8D8D8;
}

.info-table__row {
  display: flex;
  align-items: center;
  border-bottom: solid thin #DADADA;
  padding: 10px 0;
  box-sizing: border-box;
}
@media (min-width: 48em) {
  .info-table__row {
    padding: 16px 0;
  }
}
.info-table__row_cursor_pointer {
  cursor: pointer;
}
.info-table__row_align-items_flex-start {
  align-items: flex-start;
}
@media (max-width: 47.99em) {
  .info-table__row_until-tablet-align-items_flex-start {
    align-items: flex-start;
  }
}
.info-table__row_no-align-items {
  align-items: unset;
}
@media (max-width: 63.99em) {
  .info-table__row_until-desktop-hidden {
    display: none;
  }
}
.info-table__row:last-child.info-table__row:not(.info-table__row_has-last-border):not(.info-table__row_has-full-border-until-tablet):not(.info-table__row_has-full-border-from-tablet):not(.info-table__row_border_light-grey-2) {
  border-bottom: 0;
}
.info-table__row_no-border-bottom {
  border-bottom: 0;
}
.info-table__row_is-header {
  background: #F4F4F4;
  border-bottom: 0;
  padding: 16px 0;
}
.info-table__row_is-padding-small {
  padding: 12px 0;
}
.info-table__row_is-highlighted {
  background: #FAF0EF;
}
.info-table__row_background-color_white {
  background-color: #FFFFFF;
}
.info-table__row_margin-bottom_10 {
  margin-bottom: 10px;
}
.info-table__row_margin-bottom_10:last-child {
  margin-bottom: 0;
}
.info-table__row_margin-bottom_30 {
  margin-bottom: 30px;
}
.info-table__row_no-padding {
  padding: 0;
}
@media (max-width: 47.99em) {
  .info-table__row_no-mobile-padding {
    padding: 0;
  }
}
.info-table__row_no-vertical-padding {
  padding-top: 0;
  padding-bottom: 0;
}
.info-table__row_border-radius_5 {
  border-radius: 5px;
}
.info-table__row_border-bottom-color_light {
  border-color: #EFEFEF;
}
.info-table__row_border-bottom_light-grey {
  border-bottom: 1px solid #EAEAEA;
}
.info-table__row_border-bottom_light-grey-2 {
  border-bottom: 1px solid #C8D8D8;
}
.info-table__row_border-bottom_dark-grey {
  border-bottom: 1px solid #D2D8D8;
}
.info-table__row_border_light-grey-2 {
  border: 1px solid #C8D8D8;
}
.info-table__row_border_light-grey-2:last-child {
  border-bottom: 1px solid #C8D8D8;
}
.info-table__row_is-sticky {
  position: sticky;
  top: var(--filter-top);
  z-index: 1;
}
.info-table__row_no-border-bottom-last-child:last-child {
  border-bottom: 0;
}
@media (min-width: 48em) {
  .info-table__row_has-full-border-from-tablet {
    border: 1px solid #C8D8D8;
    border-bottom: none;
  }
  .info-table__row_has-full-border-from-tablet:last-child {
    border-bottom: 1px solid #C8D8D8;
  }
}
@media (max-width: 47.99em) {
  .info-table__row_has-full-border-until-tablet {
    border: 1px solid #C8D8D8;
    border-bottom: none;
  }
  .info-table__row_has-full-border-until-tablet:last-child {
    border-bottom: 1px solid #C8D8D8;
  }
}

.info-table__cell {
  padding-left: 16px;
}
.info-table__cell_is-warning {
  font-style: italic;
  color: #D57F73;
}
.info-table__cell_has-padding {
  padding: 15px 16px;
}
.info-table__cell_has_border_right {
  border-right: solid thin #DADADA;
}
.info-table__cell_padding-right_small {
  padding-right: 16px;
}
.info-table__cell_align_top {
  align-self: flex-start;
}
.info-table__cell_justify-self_flex-end {
  justify-self: flex-end;
}
.info-table__cell_height_full {
  height: 100%;
}
.info-table__cell_no-left-padding {
  padding-left: 0;
}
.info-table__cell_padding-left_10 {
  padding-left: 10px;
}
.info-table__cell_is-cornered {
  justify-self: flex-end;
  padding-right: 18px;
}
.info-table__cell_has-left-border {
  border-left: solid thin #CBDADA;
}
.info-table__cell_has-vertical-padding {
  padding-top: 16px;
  padding-bottom: 16px;
}
@media (max-width: 47.99em) {
  .info-table__cell_has-vertical-padding {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.info-table__cell_is-highlighted {
  background-color: #FAF0EF;
}
.info-table__cell_text-align_end {
  text-align: end;
}
.info-table__cell_font-weight_bold {
  font-weight: bold;
}
.info-table__cell_font-weight_semi-bold {
  font-weight: 600;
}

.info-table__image {
  width: 130px;
  height: 45px;
  padding-top: 5px;
}

.info-table__text {
  font-size: 14px;
}
.info-table__text_size_16 {
  font-size: 16px;
}
.info-table__text_is-bold {
  font-weight: bold;
}
.info-table__text_is-capitalized {
  text-transform: capitalize;
}

.info-table__contribution-conversion {
  color: #9B9B9B;
  font-weight: 600;
}
.info-table__contribution-conversion_is-loading {
  font-style: italic;
}
.info-table__contribution-conversion_is-failed {
  color: #D57F73;
  font-weight: normal;
}

.info-table__title {
  font-weight: 600;
  display: flex;
  align-items: flex-start;
}
.info-table__title:before {
  content: "";
  display: block;
  min-width: 14px;
  height: 14px;
  margin-top: 3px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/coverage-types/unknown-1.svg");
}
.info-table__title_type_medical:before {
  background-image: url("/assets/images/icons/coverage-types/medical.svg");
}
.info-table__title_type_vision:before {
  background-image: url("/assets/images/icons/coverage-types/vision.svg");
}
.info-table__title_type_dental:before {
  background-image: url("/assets/images/icons/coverage-types/dental.svg");
}
.info-table__title_type_life:before {
  background-image: url("/assets/images/icons/coverage-types/life.svg");
}
.info-table__title_type_short-term-disability:before {
  background-image: url("/assets/images/icons/coverage-types/accident.svg");
}
.info-table__title_type_long-term-disability:before {
  background-image: url("/assets/images/icons/coverage-types/accident.svg");
}
.info-table__title_type_accidental-death-and-dismemberment:before {
  background-image: url("/assets/images/icons/coverage-types/ad&d.svg");
}

.info-table__subtitle {
  font-size: 16px;
  padding-left: 22px;
  margin-top: 2px;
}

.info-table_theme_green .info-table__row_is-header {
  background-color: #EBEBEB;
}
@media (max-width: 63.99em) {
  .info-table_theme_green .info-table__row_is-header {
    background-color: var(--color-light-blue-2);
  }
}
.info-table_theme_green .info-table__row_background-color_grey {
  background-color: #F4F4F4;
}
.info-table_theme_green .info-table__row_background-color_grey-2 {
  background-color: #F8F8F8;
}
.info-table_theme_green .info-table__row_background-color_dark-grey {
  background-color: #EAEAEA;
}
.info-table_theme_green .info-table__row_background-color_white {
  background-color: #FFF;
}
.info-table_theme_green .info-table__row_is-darker {
  background-color: #DCDCDC;
}

.info-table__arrows {
  display: flex;
  justify-content: flex-end;
}

.info-table__scrollable-content-holder {
  height: 200px;
  overflow: hidden;
}

.info-table__scrollable-content {
  height: 100%;
  transition: transform 400ms ease;
}

.info-table_has-top-border {
  border-top: solid thin #CBDADA;
}

.inline-notification {
  padding: 0 10px;
  border: solid 1px #267E83;
  background: #EFF4F5;
  border-radius: 20px;
  font-size: 14px;
}
.inline-notification_margin_10 {
  margin: 10px;
}
.inline-notification_margin-bottom_10 {
  margin-bottom: 10px;
}
.inline-notification_margin-bottom_20 {
  margin-bottom: 20px;
}
.inline-notification_padding_5 {
  padding: 5px;
}
.inline-notification_padding-bottom_10 {
  padding-bottom: 10px;
}
.inline-notification_border_none {
  border: none;
}
.inline-notification_border-top-only {
  border-left: none;
  border-right: none;
  border-bottom: none;
}
.inline-notification_radius_0 {
  border-radius: 0;
}
.inline-notification_style_italic {
  font-style: italic;
}
.inline-notification_radius_4 {
  border-radius: 4px;
}
.inline-notification_radius_10 {
  border-radius: 10px;
}
.inline-notification_radius_20 {
  border-radius: 20px;
}
.inline-notification_side-padding_15 {
  padding-left: 15px;
  padding-right: 15px;
}
.inline-notification_side-padding_20 {
  padding-left: 20px;
  padding-right: 20px;
}
.inline-notification_vertical-padding_5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.inline-notification_vertical-padding_15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.inline-notification_font-size_13 {
  font-size: 13px;
}
.inline-notification_margin-top_5 {
  margin-top: 5px;
}
.inline-notification_margin-top_15 {
  margin-top: 15px;
}
.inline-notification_margin-top_20 {
  margin-top: 20px;
}
.inline-notification_no-icon .inline-notification__header::before {
  display: none;
}

.inline-notification__header {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 40px;
  padding: 5px 0;
}
.inline-notification__header:before {
  content: "";
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: url("/assets/images/icons/notification/check.svg") center center no-repeat;
  background-color: #0D7383;
  background-size: 10px 8px;
  margin-right: 8px;
}
.inline-notification__header_align-items_flex-start {
  align-items: flex-start;
}

/**
 * flex: 1 does not work on ie.
 */
.inline-notification__title {
  width: 100%; /* 1 */
}
.inline-notification__title_color_default {
  color: var(--color-dark-grey-2);
}
.inline-notification__title_font-weight_semi-bold {
  font-weight: 600;
}
.inline-notification__title_has-vertical-padding {
  padding-top: 6px;
  padding-bottom: 6px;
}

.inline-notification__title-content {
  max-width: 325px;
  padding-right: 6px;
}
.inline-notification__title-content_has-vertical-padding {
  padding-top: 6px;
  padding-bottom: 6px;
}

.inline-notification__link {
  margin-top: 7px;
}

.inline-notification_type_error {
  border-color: #D57F73;
  background: #F9EDEB;
}
.inline-notification_type_error .inline-notification__title {
  color: #D57F73;
}
.inline-notification_type_error .inline-notification__title_color_default {
  color: var(--color-dark-grey-2);
}
.inline-notification_type_error .inline-notification__header:before {
  background-image: url("/assets/images/icons/notification/error.svg");
  background-size: 7px 7px;
  background-color: #D57F73;
}

.inline-notification_type_alert {
  border-color: #305C94;
  background: #E5EBF3;
}
.inline-notification_type_alert .inline-notification__title {
  color: #305C94;
}
.inline-notification_type_alert .inline-notification__title_color_default {
  color: var(--color-dark-grey-2);
}
.inline-notification_type_alert .inline-notification__title_color_dark-gray {
  color: #5A5A5A;
}
.inline-notification_type_alert .inline-notification__title_font-size_16 {
  font-size: 16px;
}
.inline-notification_type_alert .inline-notification__title_font-weight_600 {
  font-weight: 600;
}
.inline-notification_type_alert .inline-notification__header:before {
  background-image: url("/assets/images/icons/bell.svg");
  background-size: 11px 12px;
  background-color: #305C94;
}

.inline-notification_type_red-alert {
  border-color: #D57F73;
  background: #F9EDEB;
}
.inline-notification_type_red-alert .inline-notification__title {
  color: #4A4A4A;
}
.inline-notification_type_red-alert .inline-notification__header:before {
  background-image: url("/assets/images/icons/bell.svg");
  background-size: 11px 12px;
  background-color: #D57F73;
}

.inline-notification_type_warning {
  border-color: #E39410;
  background: #FDF7E3;
}
.inline-notification_type_warning .inline-notification__title {
  color: var(--color-dark-grey-2);
}
.inline-notification_type_warning .inline-notification__title_font-size_16 {
  font-size: 16px;
}
.inline-notification_type_warning .inline-notification__header:before {
  background-image: url("/assets/images/icons/yellow-exclamation.svg");
  background-size: 26px 26px;
  background-color: #FDF7E3;
}

.inline-notification_size_large {
  border-radius: 10px;
  padding: 5px 10px 10px;
}
.inline-notification_size_large .inline-notification__header {
  font-weight: bold;
  color: #0D7383;
  font-size: 16px;
}
.inline-notification_size_large .inline-notification__close {
  transform: translateY(-10px);
}
.inline-notification_size_large .inline-notification__body {
  padding-top: 10px;
}
.inline-notification_size_large .inline-notification__body_padding-top_0 {
  padding-top: 0;
}
.inline-notification_size_large .inline-notification__body_padding-left_35 {
  padding-left: 35px;
}

.inline-notification_is-rectangular {
  border-radius: 0;
}

.inline-notification__body {
  box-sizing: border-box;
  position: relative;
}

.inline-notification_horizontal-margin_5 {
  margin: 0 5px;
}

/**
 * @block inner-nav-page
 */
.inner-nav-page {
  position: relative;
  width: 100%;
  /**
   * @modifier is-fixed
   */
}
@media (min-width: 64em) {
  .inner-nav-page_is-fixed {
    height: 100%;
  }
  .inner-nav-page_is-fixed .inner-nav-page__body {
    height: calc(100% - 50px);
    /**
     * @modifier is-header-large
     * @for body
     */
  }
  .inner-nav-page_is-fixed .inner-nav-page__body_is-header-large {
    height: calc(100% - 60px);
  }
}

/**
 * @element refresh-container
 */
.inner-nav-page__right-el {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: flex-end;
  min-height: 40px;
  /**
   * @modifier is-above-table
   * @for refresh-container
   */
}
.inner-nav-page__right-el_is-above-table {
  padding-right: 22px;
}

.inner-nav-page__nav-container {
  display: flex;
  height: 40px;
  align-items: center;
  min-height: 40px;
  padding-left: 22px;
}

.inner-nav-page__left-el {
  flex: 1;
}

/**
 * @element header
 */
.inner-nav-page__header {
  display: flex;
  height: 50px;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  /**
   * @modifier is-dark
   * @for header
   */
  /**
   * @modifier height
   * @value large
   */
  /**
   * @modifier type
   * @value filters
   */
}
@media (min-width: 31.25em) {
  .inner-nav-page__header:not(.inner-nav-page__header_is-paddingless) {
    padding-right: 22px;
  }
}
.inner-nav-page__header_padding-left_20 {
  padding-left: 20px;
}
.inner-nav-page__header_height_60 {
  height: 60px;
}
.inner-nav-page__header_margin-bottom_20 {
  margin-bottom: 20px;
}
.inner-nav-page__header_is-dark {
  background-color: #EAEAEA;
  border-top: solid thin #EAEAEA;
  border-bottom: solid thin #EAEAEA;
}
.inner-nav-page__header_height_large {
  height: 60px;
}
@media (max-width: 63.99em) {
  .inner-nav-page__header {
    /**
     * @modifier is-bordered-small
     */
  }
  .inner-nav-page__header.inner-nav-page__header_is-bordered-bottom-small {
    border-bottom: solid thin #EAEAEA;
  }
}
@media (max-width: 63.99em) {
  .inner-nav-page__header {
    /**
     * @modifier is-bordered-small
     */
  }
  .inner-nav-page__header.inner-nav-page__header_is-bordered-small {
    border-top: solid thin #C7D7D8;
    border-bottom: solid thin #C7D7D8;
  }
}
@media (min-width: 64em) {
  .inner-nav-page__header {
    /**
     * @modifier is-desktop-dark
     */
  }
  .inner-nav-page__header_is-desktop-dark {
    background-color: #EAEAEA;
    border-top: solid thin #EAEAEA;
    border-bottom: solid thin #EAEAEA;
  }
}
.inner-nav-page__header_type_filters {
  background: #EDEDED;
}
@media (max-width: 47.99em) {
  .inner-nav-page__header_type_filters {
    border-top: solid 1px #C7D7D7;
    height: 45px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .inner-nav-page__header_type_filters:not(.inner-nav-page__header_is-marginless) {
    margin-bottom: 28px;
  }
}
@media (max-width: 63.99em) {
  .inner-nav-page__header_type_filters.inner-nav-page__header_is-bordered-small {
    border-top: solid thin #EDEDED;
    border-bottom: solid thin #EDEDED;
  }
}

/**
 * @element header-search
 */
.inner-nav-page__header-search {
  height: 100%;
  background: white;
  width: 300px;
}
@media (max-width: 47.99em) {
  .inner-nav-page__header-search {
    width: 100%;
  }
}

/**
 * @element header-filter
 */
.inner-nav-page__header-filter {
  width: 85px;
  height: 100%;
  background: #E5E5E5;
}
.inner-nav-page__header-filter:hover {
  background-color: #D7D7D7;
}
@media (min-width: 64em) {
  .inner-nav-page__header-filter {
    margin-left: 20px;
  }
}
.inner-nav-page__header-filter_background-color_transparent {
  background-color: transparent;
}
.inner-nav-page__header-filter_has-no-margin-left {
  margin-left: 0;
}
@media (max-width: 47.99em) {
  .inner-nav-page__header-filter_mobile_vertical {
    width: auto;
    min-width: 50px;
  }
}

/**
 * @element nav
 */
.inner-nav-page__nav {
  display: flex;
  flex: 1;
  padding-left: 22px;
  /**
   * @modifier is-full
   */
  /**
   * 1. In order for box shadow to stay above elements when scrolled.
   *
   * @modifier is-scrolled
   * @for nav
   */
}
.inner-nav-page__nav_is-full {
  padding-left: 0;
  height: 100%;
}
.inner-nav-page__nav_is-scrolled {
  z-index: 1; /* 1 */
  box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.1);
  position: relative;
}

/**
 * @element filters
 */
.inner-nav-page__filters {
  height: 100%;
  width: 50px;
}

/**
 * @element nav-el
 */
.inner-nav-page__nav-el {
  min-width: 120px;
  color: #B0A7A8;
  font-size: 16px;
  text-align: left;
  text-transform: capitalize;
  /**
   * @modifier is-selected
   */
  /**
   * @modifier is-large
   */
}
.inner-nav-page__nav-el_is-selected, .inner-nav-page__nav-el:hover {
  color: #5C5050;
  font-weight: bold;
}
.inner-nav-page__nav-el_is-large {
  min-width: 190px;
  margin-right: 10px;
}
@media (max-width: 31.24em) {
  .inner-nav-page__nav-el_is-large {
    min-width: 150px;
  }
}
@media (max-width: 47.99em) {
  .inner-nav-page__nav-el {
    font-size: 14px;
  }
}

/**
 * @element body
 */
.inner-nav-page__body {
  /**
   * @modifier has-padding
   */
  /**
   * If page overlaps with the contact support
   * we add padding bottom.
   *
   * @modifier is-overlapping-contact-support
   */
}
.inner-nav-page__body_has-padding {
  padding: 0 15px;
}
@media (min-width: 48em) {
  .inner-nav-page__body_is-overlapping-contact-support {
    padding-bottom: 50px;
  }
}

/**
 * @element empty
 */
.inner-nav-page__empty {
  display: flex;
  height: 390px;
  background: white;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  text-align: center;
  border: solid thin #C7D7D7;
}

/**
 * @element empty-benefits-icon
 */
.inner-nav-page__empty-benefits-icon {
  width: 93px;
  height: 85px;
  background: url("/assets/images/icons/green-empty-heart.svg") center center no-repeat;
  margin-bottom: 45px;
}

/**
 * @element empty-title
 */
.inner-nav-page__empty-title {
  margin-bottom: 10px;
  font-weight: 300;
  color: #1297AC;
  font-size: 34px;
}

/**
 * @element empty-description
 */
.inner-nav-page__empty-description {
  color: #5C5050;
  font-size: 16px;
}

.inner-nav-page__header-sort {
  width: 260px;
  background-color: #F3F3F3;
}
@media (max-width: 47.99em) {
  .inner-nav-page__header-sort {
    width: 174px;
  }
}

.inner-nav-page__header-mobile-search {
  width: 60px;
  height: 100%;
}

.inner-nav-page__header-left {
  height: 100%;
  display: flex;
}

.inner-nav-page__header-left-split {
  padding-left: 20px;
  display: flex;
  flex: 1;
}

/**
 * Generally contains the search bar/filters.
 *
 * @element header-right
 */
.inner-nav-page__header-right {
  height: 100%;
  display: flex;
  align-items: center;
  /**
   * @modifiers can-push
   * @for header-right
   */
  /**
   * @modifer is-mobile-hidden
   * @for header-right
   */
  /**
   * @modifier content
   * @value not-centered
   */
}
.inner-nav-page__header-right_can-push {
  justify-content: flex-end;
  flex: 1;
}
@media screen and (max-width: 570.9px) {
  .inner-nav-page__header-right_is-mobile-hidden {
    display: none;
  }
}
.inner-nav-page__header-right_content_not-centered {
  align-items: flex-start;
}

/**
 * @element search-holder
 */
.inner-nav-page__search-holder {
  height: 45px;
  width: 100%;
  display: flex;
  position: relative;
}

/**
 * @element search
 */
.inner-nav-page__search {
  height: 40px;
  background: #FFF;
  border: solid 1px #CBDADA;
  border-top: 0;
}
@media (max-width: 47.99em) {
  .inner-nav-page__search {
    width: 280px;
  }
}
@media (min-width: 48em) {
  .inner-nav-page__search {
    width: 300px;
  }
}

/**
 * 1. Oh my god don't even ask. Related to filter-menu vertical centering.
 *
 * @element filter
 */
.inner-nav-page__filter {
  position: absolute;
  width: 41px;
  height: 100%;
  top: -5px;
  right: 0;
}

/**
 * @element refresh
 */
.inner-nav-page__refresh {
  height: 100%;
  margin-left: 20px;
}

/**
 * Used as a container for inputs (field-boxes).
 *
 * @element input-container
 */
.inner-nav-page__input-container {
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #FFF;
  padding: 0 22px;
  box-sizing: border-box;
  width: 400px;
}
@media (max-width: 47.99em) {
  .inner-nav-page__input-container {
    /**
     * @modifier is-expanded-on-mobile
     */
  }
  .inner-nav-page__input-container_is-expanded-on-mobile {
    width: 100%;
  }
}

.inner-nav-page__terminated-checkbox-container {
  height: 100%;
  display: flex;
}
.inner-nav-page__terminated-checkbox-container_has-margin-left {
  margin-left: 22px;
}

.inner-nav-page__switch-views-container {
  height: 100%;
  display: flex;
  min-width: 82px;
  box-sizing: border-box;
}
@media (min-width: 48em) {
  .inner-nav-page__switch-views-container {
    margin-left: 10px;
  }
}

/**
 * The inner page layout of the app.
 *
 * @block inner-page
 */
.inner-page {
  height: 100%;
  background-color: #F4F4F4;
  display: flex;
  flex-direction: column;
}
@supports not (zoom: 1) {
  .inner-page_is-preview .inner-page__title {
    font-size: 15px;
  }
  .inner-page_is-preview .inner-page__header {
    height: 48.75px;
  }
}

/**
 * @element header
 */
.inner-page__header {
  height: 65px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  background-color: #FFF;
  border-bottom: 1px solid #C7D7D7;
}
.inner-page__header_is-borderless {
  border-bottom: 0;
}

.inner-page__header-right-item {
  margin-left: 20px;
}

/**
 * @element empty-state-refresh
 */
.inner-page__empty-state-refresh {
  height: 40px;
  padding-right: 22px;
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

/**
 * @element header-left-align
 */
.inner-page__header-left-align {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
}

/**
 * @element title
 */
.inner-page__title {
  font-size: 20px;
  /**
   * @modifier is-mobile-small
   * @for title
   */
}
@media (max-width: 47.99em) {
  .inner-page__title_is-mobile-small {
    font-size: 16px;
  }
}

.inner-page__header-help {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
}
.inner-page__header-help:after {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #1297AC;
  content: "?";
  font-size: 18px;
  color: #FFF;
}

.inner-page__subheader {
  display: flex;
  align-items: center;
  background-color: #EFEFEF;
  padding: 0 22px;
  height: 60px;
}

.inner-page__subheader-button {
  margin-right: 22px;
}

/**
 * 1. center the text vertically
 *
 * @element subheader-text
 */
.inner-page__subheader-text {
  flex: 1;
  color: #1297AC;
  font-size: 16px;
  display: flex;
  align-items: center; /* 1 */
}

.inner-page__nav {
  display: flex;
  background: #F9F9F9;
  height: 62px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  padding: 0 22px;
}
@media (max-width: 47.99em) {
  .inner-page__nav {
    padding: 0 12px;
  }
}

/**
 * @element nav-link
 */
.inner-page__nav-link {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  color: #5C5050;
  font-size: 13px;
  text-transform: capitalize;
  /**
   * @modifier is-active
   * @for nav-link
   */
}
@media (max-width: 47.99em) {
  .inner-page__nav-link {
    flex: 1;
    justify-content: center;
  }
}
@media (min-width: 48em) {
  .inner-page__nav-link {
    font-size: 16px;
    padding: 0 12px;
    margin-right: 40px;
  }
}
.inner-page__nav-link:after {
  position: absolute;
  content: "";
  height: 4px;
  background-color: #1297AC;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.inner-page__nav-link:hover:after, .inner-page__nav-link_is-active:after {
  opacity: 1;
}
.inner-page__nav-link_is-active {
  font-weight: bold;
}

/**
 * @element ess-section
 */
.inner-page__ess-section {
  margin: 0 auto 50px auto;
  max-width: 950px;
  box-sizing: border-box;
}
.inner-page__ess-section_max-width_1030 {
  max-width: 1030px;
}
@media (max-width: 47.99em) {
  .inner-page__ess-section {
    flex: 1;
    width: 100%;
    border-left: 0;
    border-right: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    /**
     * @modifier has-mobile-padding
     * @for ess-section
     */
  }
  .inner-page__ess-section_has-mobile-padding {
    margin-top: 20px;
    width: calc(100% - 30px);
  }
}
@media (min-width: 48em) {
  .inner-page__ess-section {
    width: calc(100% - 70px);
    margin-top: 35px;
  }
}
.inner-page__ess-section_width_full {
  margin: 0 0 50px 0;
  max-width: none;
  width: 100%;
}

/**
 * 1. These are added in order to fix card not filling in Safari.
 * This is used along with flex: 1 on the child.
 *
 * @element ess-section-empty-card
 */
@media (max-width: 47.99em) {
  .inner-page__ess-section-empty-card {
    flex: 1;
    display: flex; /* 1 */
    flex-direction: column; /* 1 */
  }
}

/**
 * @element ess-section-status
 */
.inner-page__ess-section-status {
  flex-shrink: 0;
  height: 35px;
  display: flex;
  align-items: center;
  color: #FFF;
  font-size: 12px;
  background-color: #B0A7A8;
  padding: 0 14px;
}

/**
 * 1. On mobile there is no space between the grid and the header,
 * Therefore in order to remove the extra border we lift the grid by 1px.
 *
 * @element grid
 */
.inner-page__grid {
  background-color: #FFF;
  border: 1px solid #C7D7D7;
  /**
   * @modifier type
   * @value dependents
   * @for grid
   */
  /**
   * @modifier type
   * @value beneficiaries
   * @for grid
   */
}
.inner-page__grid_type_dependents {
  border-top: 0;
}
.inner-page__grid_type_beneficiaries {
  border-top: 0;
}
@media (max-width: 47.99em) {
  .inner-page__grid {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    margin-top: -1px; /* 1 */
  }
}

/**
 * @element header-dots-menu
 */
.inner-page__header-dots-menu {
  width: 40px;
  margin-left: 20px;
  height: 54px;
}
@media (max-width: 47.99em) {
  .inner-page__header-dots-menu {
    margin-left: 0;
  }
}

/**
 * 1. Smoothens the scroll on mobile safari + chrome (webkit).
 *
 * @element body
 */
.inner-page__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 1 */
  flex: 1;
  /**
   * The scrollbar showing and hiding based on content causes the layout
   * to jump. This at least makes it consistent.
   *
   * @modifier force-scrollbar
   */
  /**
   * Needed to keep the search icon from adding a horizontal scrollbar on mobile.
   */
}
.inner-page__body_force-scrollbar {
  overflow-y: scroll;
}
@media (max-width: 47.99em) {
  .inner-page__body_overflow-x_hidden {
    overflow-x: hidden;
  }
}

/**
 * @element body-content
 */
.inner-page__body-content {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /**
   * @modifier is-parent-filled
   */
}
@media (min-width: 48em) {
  .inner-page__body-content {
    margin-bottom: 60px;
    padding: 30px;
  }
}
.inner-page__body-content_is-parent-filled {
  margin: 0;
  padding: 0;
  max-width: none;
  height: 100%;
}

/**
 * @element x-dropdown
 */
.inner-page__x-dropdown {
  margin-right: 8px;
}

/**
 * Example: "Export To CSV" next to the button.
 *
 * @element header-action
 */
@media (max-width: 47.99em) {
  .inner-page__header-action {
    margin-right: 10px;
  }
}
@media (min-width: 48em) {
  .inner-page__header-action {
    margin-right: 25px;
  }
  .inner-page__header-action_margin-rigth_20 {
    margin-right: 20px;
  }
}

/**
 * @element empty-state
 */
@media (min-width: 64em) {
  .inner-page__empty-state {
    padding-top: 60px;
    box-sizing: border-box;
    /**
     * @modifier is-small-padding
     */
    /**
     * @modifier has-no-padding
     * @for empty-state
     */
  }
  .inner-page__empty-state_is-small-padding {
    padding-top: 40px;
  }
  .inner-page__empty-state_has-no-padding {
    padding-top: 0;
  }
}

/**
 * @modifier no-top-padding
 */
.inner-page_no-top-padding .inner-page__ess-section {
  margin-top: 0;
}

/**
 * @element burger-menu
 */
.inner-page__burger-menu {
  flex-shrink: 0;
  height: 100%;
}

/**
 * The container of the field-box error-box.
 *
 * 1. The field-box / smart-input translate upward when focused.
 *
 * @block field-box-error
 */
.field-box-error {
  margin-top: -1px; /* 1 */
  z-index: 1;
}
.field-box-error_is-sticky {
  margin-top: 0;
  display: flex;
  width: 100%;
  background-color: #D57F73;
}
.field-box-error_background-color_purple {
  background-color: var(--color-purple);
}
.field-box-error_margin-top_0 {
  margin-top: 0;
}
.field-box-error_position_absolute {
  position: absolute;
}
.field-box-error_full-width {
  width: 100%;
}

/**
 * 1. Leave the 20px to the left empty to account for the vertical scrollbar width.
 */
.field-box-error__sticky-error {
  position: sticky;
  left: 0;
  width: calc(100vw - 20px); /* 1 */
}
@media (min-width: 64em) {
  .field-box-error__sticky-error_is-workflow {
    width: calc(100vw - 222px - 20px);
  }
}

/**
 * @block login
 *
 * The login page.
 *
 * input
 * |-bar
 * |-content
 * |--field
 * |--label
*/
.input {
  position: relative;
  height: 60px;
  border: solid 1px var(--main-color-light-29);
  background-color: var(--color-white);
  padding-left: 27px;
  padding-right: 60px;
  /**
   * 1. Share border with sibling to avoid a double border.
   *
   * @modifier position
   * @value bottom
   */
  /**
   * When an input is invalid.
   *
   * 1. Bring to front so its red border shows.
   *
   * @modfier is-invalid
   */
  /**
   * When disabled.
   *
   * @modifier is-disabled
   */
}
.input_position_bottom {
  margin-top: -1px; /* 1 */
}
.input_is-invalid {
  border-color: var(--color-red);
  z-index: 1; /* 1 */
}
.input_is-disabled {
  opacity: 0.6;
  background: var(--color-light-grey-3);
}

/**
 * @element content
 */
.input__content {
  position: relative;
  height: 100%;
}

/**
 * 1. Reset the browser's default <input> styles.
 *
 * @element field
 */
.input__field {
  /* 1 */
  box-sizing: border-box;
  background-clip: padding-box;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  -webkit-appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  display: block;
  color: var(--color-dark-grey-2);
  font-size: 16px;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all 150ms ease; /* 2 */
}

/**
 * Floating Label: the label is first visible in a placeholder position.
 * When the input is focused, the label moves upward out of the text's way.
 *
 * 1. Center vertically.
 * 2. Transition the upward floating.
 *
 * @element label
 */
.input__label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 60px;
  transition: all 150ms ease; /* 2 */
  display: flex;
}

/**
 * Often used for the `(Optional)` text next to the label.
 *
 * @element secondary-label
 */
.input__secondary-label {
  font-size: 10px;
  color: var(--color-dark-grey-3);
  font-family: "Montserrat", sans-serif;
  font-weight: normal;
  padding-left: 5px;
}

/**
 * When input has a value, the label floats upward.
 */
.input_is-focused .input__label,
.input_has-value .input__label {
  height: 37px;
  line-height: 37px;
  top: 0;
}
.input_is-focused .input__field,
.input_has-value .input__field {
  height: 20px;
  top: 30px;
}

/**
 * 1. Bottom or middle input may have their borders hidden (to avoid double
 * borders and look like they share the border with their sibling). When we focus
 * we want the border to be highlighted so we bring them to the top.
 */
.input_is-focused {
  z-index: 2; /* 1 */
}

/**
 * Right side icons.
 */
.input:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 60px;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px;
}

/**
 * @modifier icon
 * @value email
 */
.input_icon_email:after {
  background-image: url("/assets/images/inputs/email.svg");
}

/**
 * @modifier icon
 * @value username
 */
.input_icon_username:after {
  background-image: url("/assets/images/inputs/username.svg");
}

/**
 * @modifier icon
 * @value {password}
 */
.input_icon_password:after {
  background-image: url("/assets/images/inputs/password.svg");
}

.input_in-contact-form {
  border-left: 0;
  border-right: 0;
}
.input_in-contact-form .input__bar_position_left {
  display: none;
}
.input_in-contact-form .input__bar_position_right {
  display: none;
}
.input_in-contact-form.input_is-invalid {
  border-top-color: var(--main-color-light-29);
}

/**
 * @block invite-code
 */
.invite-code {
  display: block;
}

/**
 * @element description
 */
.invite-code__description {
  margin-bottom: 30px;
}

/**
 * @element link
 */
.invite-code__link {
  margin-bottom: 20px;
}

/**
 * @element label
 */
.invite-code__label {
  margin-bottom: 5px;
}

/**
 * The blue label above field/inputs.
 *
 * @block label
 */
.label {
  display: block;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  color: var(--main-color);
  cursor: text;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 10px;
  /**
   * @modifier color
   * @value yellow
   */
  /**
   * @modifier color
   * @value yellow
   */
  /**
   * @modifier color
   * @value normal
   */
  /**
   * @modifier color
   * @value dark-main
   */
  /**
   * @modifier margin-right
   * @value 5
   */
}
.label_padding-right_2 {
  padding-right: 2px;
}
.label_color_white {
  color: var(--color-white);
}
.label_color_light-grey {
  color: var(--color-light-grey);
}
.label_color_light-grey-2 {
  color: var(--color-light-grey-2);
}
.label_text-align_start {
  text-align: start;
}
.label_color_yellow {
  color: var(--color-yellow);
}
.label_color_orange {
  color: var(--color-orange);
}
.label_color_dark-grey-2 {
  color: var(--color-dark-grey-2);
}
.label_color_grey {
  color: var(--color-grey);
}
.label_color_grey.label_icon_add:before {
  background-image: var(--svg-plus-grey-thin);
}
.label_color_grey-2 {
  color: var(--color-grey-2);
}
.label_color_dark-grey {
  color: var(--color-dark-grey);
}
.label_color_dark {
  color: var(--color-dark-grey-2);
}
.label_color_red {
  color: var(--color-red);
}
.label_weight_bolder {
  font-weight: bolder;
}
.label_weight_600 {
  font-weight: 600;
}
.label_weight_lighter {
  font-weight: lighter;
}
.label_text_normal {
  text-transform: none;
}
.label_font-size_9 {
  font-size: 9px;
}
.label_font-size_11 {
  font-size: 11px;
}
.label_font-size_12 {
  font-size: 12px;
}
.label_color_dark-main {
  color: #0D7383;
}
.label_margin-right_5 {
  margin-right: 5px;
}
.label_margin-bottom_5 {
  margin-bottom: 5px;
}
.label_display_flex {
  display: flex;
}
.label_align-items_center {
  align-items: center;
}
.label_cursor_inherit {
  cursor: inherit;
}
.label_padding-bottom_7 {
  padding-bottom: 7px;
}
.label_position_stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.label_position_stacked:before {
  content: "";
  height: 20px;
  width: 15px;
}
.label_icon_add-top:before {
  background: var(--svg-plus) center center no-repeat;
  background-size: 10px 10px;
}
.label_icon_edit-top:before {
  background: var(--svg-pencil) center center no-repeat;
  background-size: 10px 10px;
}
.label_icon_delete-top:before {
  background: var(--svg-x-red) center center no-repeat;
  background-size: 10px 10px;
}
.label_icon_add {
  display: flex;
  align-items: center;
}
.label_icon_add:before {
  content: "";
  height: 10px;
  width: var(--label-plus-thin-width);
  background: var(--svg-plus) center center no-repeat;
  background-size: 7px 7px;
}
.label_icon_settings {
  display: flex;
  align-items: center;
}
.label_icon_settings:before {
  content: "";
  height: 12px;
  width: 12px;
  margin-right: 4px;
  background: var(--svg-unfilled-settings) center center no-repeat;
  background-size: 12px 12px;
}
.label_icon_green-filter {
  display: flex;
  align-items: center;
}
.label_icon_green-filter:before {
  content: "";
  height: 11px;
  width: 11px;
  margin-right: 4px;
  background: var(--svg-green-filter) center center no-repeat;
  background-size: 11px 11px;
}
.label_icon_red-filter {
  display: flex;
  align-items: center;
}
.label_icon_red-filter:before {
  content: "";
  height: 11px;
  width: 11px;
  margin-right: 4px;
  background: var(--svg-red-filter);
  background-size: 11px 11px;
}
.label_icon_green-error-exclamation {
  display: flex;
  align-items: center;
}
.label_icon_green-error-exclamation:before {
  content: "";
  height: 11px;
  width: 11px;
  margin-right: 4px;
  background: var(--svg-error-exclamation-green) center center no-repeat;
  background-size: 11px 11px;
}
.label_icon_red-error-exclamation {
  display: flex;
  align-items: center;
}
.label_icon_red-error-exclamation:before {
  content: "";
  height: 11px;
  width: 11px;
  margin-right: 4px;
  background-image: var(--svg-error-exclamation-red);
  background-size: 11px 11px;
}
.label_icon_grey-error-exclamation {
  display: flex;
  align-items: center;
}
.label_icon_grey-error-exclamation:before {
  content: "";
  height: 11px;
  width: 11px;
  margin-right: 4px;
  background-image: var(--svg-error-exclamation-grey);
  background-size: 11px 11px;
}
.label_icon_edit {
  display: flex;
  align-items: center;
}
.label_icon_edit:before {
  content: "";
  height: 10px;
  width: 25px;
  background: var(--svg-pencil) center no-repeat;
  background-size: 10px 10px;
}
.label_icon_download {
  display: flex;
  align-items: center;
}
.label_icon_download:before {
  content: "";
  width: 8px;
  height: 12px;
  display: block;
  margin-right: 5px;
  background: var(--svg-blue-download) center no-repeat;
}
.label_icon_back {
  display: flex;
  align-items: center;
}
.label_icon_back:before {
  content: "";
  width: 22px;
  height: 11px;
  display: block;
  margin-right: 5px;
  background: var(--svg-back) center no-repeat;
  background-size: 22px 11px;
}
.label_icon_suspensions {
  display: flex;
  align-items: center;
}
.label_icon_suspensions:before {
  content: "";
  height: 11px;
  width: 20px;
  background: var(--svg-suspensions) center center no-repeat;
  background-size: 9px 11px;
}
.label_icon_suspensions-disabled {
  display: flex;
  align-items: center;
}
.label_icon_suspensions-disabled:before {
  content: "";
  height: 11px;
  width: 20px;
  background: var(--svg-suspensions-disabled) center center no-repeat;
  background-size: 9px 11px;
}

.label__text {
  font-family: "Montserrat", sans-serif;
}

.label_is-clickable {
  cursor: pointer;
}
.label_is-clickable:hover {
  opacity: 0.7;
}
.label_is-clickable:focus {
  opacity: 0.9;
}

.label_is-required::after {
  content: "";
  margin-right: 4px;
  display: inline-block;
  background: var(--svg-required-star) center center no-repeat;
  height: 7px;
  width: 7px;
}

.label_icon-dimensions_15-30:before {
  width: 15px;
  height: 30px;
  background-size: 15px 30px;
}

/**
 * A block used in the filter menus for table filters.
 * 1. To make the body scrollable while having a sticky header and footer.
 */
.large-table-filter {
  display: flex;
  flex-direction: column;
  min-height: 0; /* 1 */
}

.large-table-filter__body {
  overflow-y: auto;
  background-color: #F8F8F8;
}
@media (min-width: 48em) {
  .large-table-filter__body {
    padding: 15px 0;
  }
}
@media (max-width: 47.99em) {
  .large-table-filter__body {
    padding: 20px 18px;
  }
}
.large-table-filter__body_padding_0 {
  padding: 0;
}
.large-table-filter__body_side-padding_10 {
  padding-left: 10px;
  padding-right: 10px;
}

.large-table-filter__submit-container {
  display: flex;
  flex-direction: column;
  background-color: #FFF;
}

.large-table-filter__submit-buttons {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
  min-height: 60px;
}
@media (max-width: 71.865em) {
  .large-table-filter__submit-buttons {
    padding: 0 30px;
  }
}

.large-table-filter__action {
  font-size: 16px;
  color: #4A4A4A;
}
.large-table-filter__action:hover {
  color: #7E7C7F;
  text-decoration: underline;
}
.large-table-filter__action:active {
  color: #4A4A4A;
  opacity: 0.9;
}
.large-table-filter__action:focus {
  color: #7E7C7F;
  text-decoration: underline;
}
.large-table-filter__action_theme_blue {
  color: #034FA8;
}
.large-table-filter__action_theme_blue:hover, .large-table-filter__action_theme_blue:focus {
  color: #03336B;
}
.large-table-filter__action_theme_blue:active {
  color: #034FA8;
}
.large-table-filter__action_theme_green {
  color: #1297AC;
}
.large-table-filter__action_theme_green:hover, .large-table-filter__action_theme_green:focus {
  color: #056B7A;
}
.large-table-filter__action_theme_green:active {
  color: #1297AC;
}
@media (max-width: 47.99em) {
  .large-table-filter__action_is-inverted {
    flex: 1;
    height: 100%;
  }
  .large-table-filter__action_is-inverted.large-table-filter__action_theme_blue {
    color: #FFF;
    background-color: #034FA8;
  }
  .large-table-filter__action_is-inverted.large-table-filter__action_theme_blue:hover, .large-table-filter__action_is-inverted.large-table-filter__action_theme_blue:focus, .large-table-filter__action_is-inverted.large-table-filter__action_theme_blue:active {
    color: #FFF;
    text-decoration: none;
    background-color: #03336B;
    transition: background-color 300ms ease;
  }
}

.large-table-filter__line {
  width: 100%;
  height: 1px;
  background-color: #DADADA;
}

.large-table-filter__text {
  padding-left: 12px;
  padding-right: 12px;
  color: #4A4A4A;
  margin-bottom: 24px;
  font-size: 14px;
  font-style: italic;
}

.large-table-filter__divider {
  position: relative;
  margin: auto;
  content: "";
  display: block;
  top: -15px;
  height: 1px;
  width: calc(100% - 56px);
  background-color: #E3EBEB;
}
@media (max-width: 47.99em) {
  .large-table-filter__divider {
    width: calc(100% - 25px);
  }
}
.large-table-filter__divider_is-compact {
  width: calc(100% - 25px);
}

.large-table-filter__category {
  position: relative;
  margin-bottom: 13px;
  padding-bottom: 4px;
}
.large-table-filter__category:after {
  position: absolute;
  content: "";
  display: block;
  left: 12px;
  right: 12px;
  height: 1px;
  bottom: 0;
  background-color: #E3EBEB;
}
.large-table-filter__category_no-border-bottom:after {
  display: none;
}
.large-table-filter__category_margin-bottom_0 {
  margin-bottom: 0;
}
.large-table-filter__category:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.large-table-filter__category:last-child:after {
  display: none;
}
.large-table-filter__category:last-child .large-table-filter__date-category {
  margin-bottom: 0;
}

.large-table-filter__id-input-field {
  margin: 10px;
}

.large-table-filter__category-container {
  display: flex;
  align-items: center;
  height: 15px;
}

.large-table-filter__category-name {
  padding-left: 12px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  color: #B0A7A8;
  font-size: 11px;
}

.large-table-filter__checkbox {
  height: 35px;
  display: flex;
  align-items: center;
}
.large-table-filter__checkbox_padding-left_12 {
  padding-left: 12px;
}

.large-table-filter__select-all {
  color: #9B9B9B;
  font-size: 14px;
  font-style: italic;
  font-family: "Source Sans Pro", sans-serif;
  text-transform: none;
}

.large-table-filter__checkbox-content {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: normal;
  font-family: "Montserrat", sans-serif;
}

.large-table-filter__date-category {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 0;
  box-sizing: border-box;
}
.large-table-filter__date-category_margin-bottom_15 {
  margin-bottom: 15px;
}

.large-table-filter__date-input {
  width: 45%;
  height: 70px;
  box-sizing: border-box;
}
.large-table-filter__date-input_height_60 {
  height: 60px;
}

.large-table-filter_is-modal {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.large-table-filter_is-modal .large-table-filter__body {
  flex: 1;
  overflow: auto;
}
.large-table-filter_is-modal .large-table-filter__submit-buttons {
  min-height: 55px;
}
.large-table-filter_is-modal .large-table-filter__submit-buttons_button-view-in-modal {
  padding: 0;
  min-height: 45px;
}

.large-table-filter_is-compact .large-table-filter__date-category {
  flex-direction: column;
  padding: 10px 0 0;
}
.large-table-filter_is-compact .large-table-filter__date-input {
  width: 100%;
  padding: 0 10px;
}

.large-table-filter__column-holder {
  display: flex;
}

.large-table-filter__column {
  flex: 1;
  padding-left: 15px;
  padding-right: 10px;
  margin-bottom: 30px;
}
.large-table-filter__column:last-child {
  margin-bottom: 0;
}
.large-table-filter__column_padding_0 {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 48em) {
  .large-table-filter__column_padding-bottom-from-tablet_30 {
    padding-bottom: 30px;
  }
}

@media (min-width: 48em) {
  .large-table-filter__full-row {
    padding-left: 15px;
    padding-right: 10px;
  }
}

.large-table-filter__dropdown {
  padding: 10px;
}

.large-table-filter__error-container {
  padding: 0 10px 15px;
}

@media (max-width: 47.99em) {
  .large-table-filter__column-holder_single-column_until-tablet {
    flex-direction: column;
  }
  .large-table-filter__column-holder_single-column_until-tablet .large-table-filter__column {
    position: relative;
    margin-bottom: 13px;
    padding-right: 0;
    padding-left: 0;
  }
  .large-table-filter__column-holder_single-column_until-tablet .large-table-filter__column:after {
    position: absolute;
    content: "";
    display: block;
    left: 12px;
    right: 12px;
    height: 1px;
    bottom: 0;
    background-color: #E3EBEB;
  }
  .large-table-filter__column-holder_single-column_until-tablet .large-table-filter__column:last-child:after {
    display: none;
  }
}

/**
 * A table consisting of a header/body/rows/cells.
 *
 * @block large-table
 */
.large-table {
  height: 100%;
  position: relative;
  box-sizing: border-box;
  /**
   * @modifier thin-header
   */
}
.large-table_thin-header {
  /**
   * @element header
   */
}
.large-table_thin-header .large-table__header {
  /**
   * @element cell
   */
}
.large-table_thin-header .large-table__header .large-table__cell {
  height: 40px;
}

/**
 * @element header
 */
.large-table__header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /**
   * @element cell
   */
}
.large-table__header .large-table__cell {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.large-table__header .large-table__cell_align-right-full {
  justify-content: flex-end;
}

/**
 * @element header-refresh
 */
.large-table__header-refresh {
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

/**
 * @element body
 */
.large-table__body {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

/**
 * @element row
 */
.large-table__row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-wrap: wrap;
  width: 100%;
  /**
   * In some cases we have rows that are loading
   * outside of a loading table. ex: infinite-scroll
   */
  /**
   * @modifier is-header
   * @for row
   */
}
.large-table__row:not(.large-table__row_is-header) {
  background: #FFF;
  border: solid 1px var(--main-color-light-4);
  border-bottom: 0;
  /**
   * @modifier is-highlighted
   * @for row
   */
}
.large-table__row:not(.large-table__row_is-header):last-child {
  border-bottom: solid 1px var(--main-color-light-4);
}
.large-table__row:not(.large-table__row_is-header).large-table__row_is-highlighted {
  background-color: var(--main-color-light-20);
}
.large-table__row_is-last-row:not(.large-table__row_is-header) {
  border-bottom: solid 1px var(--main-color-light-4);
}
.large-table__row_is-load-more:not(.large-table__row_is-header) {
  border-top: none;
  border-bottom: solid 1px var(--main-color-light-4);
}
.large-table__row:not(.large-table__row_is-header):not(.large-table__row_is-loading):hover {
  background-color: var(--main-color-light-20);
}
.large-table__row_is-header {
  background-color: transparent;
}
.large-table__row_no-border-top {
  border-top: none !important;
}

/**
 * @element cell
 */
.large-table__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  padding-left: 25px;
  /**
   * @modifier text
   * @value capitalize
   */
  /**
   * @modifier align-right-full
   */
  /**
   * @modifier m-padding
   * @value small
   * @for cell
   */
  /**
   * @for cell
   */
}
.large-table__cell_text_capitalize {
  text-transform: capitalize;
}
.large-table__cell_align-right-full {
  align-items: flex-end;
  margin-right: 15px;
}
@media (max-width: 47.99em) {
  .large-table__cell_m-padding_none {
    padding: 0;
  }
}
@media (max-width: 47.99em) {
  .large-table__cell_m-padding_small {
    padding: 10px;
  }
}
@media (min-width: 81.25em) {
  .large-table__cell_dp-right-padding_small {
    padding-right: 5px;
  }
}

/**
 * @element main
 */
.large-table__main {
  font-weight: bold;
  /**
   * @modifier is-link
   */
  /**
  * @modifier is-disabled
  * @for main
  */
  /**
  * @modifier is-flex
  */
}
.large-table__main_is-link {
  color: var(--main-color);
}
.large-table__main_is-link:hover {
  cursor: pointer;
  text-decoration: underline;
}
.large-table__main_is-disabled {
  cursor: default;
  text-decoration: none;
  pointer-events: none;
}
.large-table__main_is-flex {
  display: flex;
  align-items: center;
}
.large-table__main_margin-bottom_3 {
  margin-bottom: 3px;
}

/**
 * @element main-icon
 */
.large-table__main-icon {
  height: 11px;
  width: 11px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

/**
 * @element logo
 */
.large-table__logo {
  width: 100%;
  max-height: 100%;
}

/**
 * Text inside the cell that goes under the `main` element.
 * Used for example as a link to add claim documents.
 *
 * @element submain
 */
.large-table__submain {
  margin-top: 5px;
}

/**
 * @element main-document
 */
.large-table__main-document {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  color: var(--main-color);
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
}
.large-table__main-document:hover {
  color: var(--main-color-dark);
}
.large-table__main-document:active {
  color: var(--main-color);
}

/**
 * @element pdf-icon
 */
.large-table__pdf-icon {
  display: block;
  width: 10px;
  height: 14px;
  background: var(--svg-pdf) center center no-repeat;
  background-size: 100% 100%;
  margin-right: 3px;
}

/**
 * @element split
 */
.large-table__split {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  /**
   * @modifier is-centered
   * @for split
   */
}
.large-table__split_position_relative {
  position: relative;
}
.large-table__split_is-centered {
  align-items: center;
}

/**
 * 1. Fixes an overflow issue on the children (the children were
 * forcing it not to shrink).
 *
 * @element split-left
 */
.large-table__split-left {
  flex: 1;
  min-width: 0; /* 1 */
}

/**
 * @element split-right
 */
.large-table__split-right {
  padding: 0 15px;
  /**
   * @modifier is-flex
   */
  /**
   * @modifier is-flex-right
   */
}
.large-table__split-right_is-flex {
  display: flex;
}
.large-table__split-right_is-flex-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/**
 * @modifier is-loading
 */
.large-table_is-loading {
  /**
   * @element row
   */
}
.large-table_is-loading .large-table__row:not(.large-table__row_is-header):hover {
  background-color: #FFF;
}

/**
 * @element x-status
 */
.large-table__x-status {
  display: inline-block;
}

.large-table___load-more-button {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/**
 * @element align-self-right
 */
.large-table__align-self-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
}

/**
 * @element action
 */
.large-table__action {
  margin-right: 10px;
}
.large-table__action_weight_600 {
  font-weight: 600;
}

.large-table__label {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
}

.large-table__sortable-label-container {
  width: 100%;
  height: 100%;
}

/**
 * @element sortable-label
 */
.large-table__sortable-label {
  display: flex;
  align-items: center;
  text-align: left;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  color: var(--main-color);
  font-size: 10px;
  /**
   * @modifier arrow-side
   * @value up
   */
  /**
   * @modifier arrow-side
   * @value down
   */
  /**
   * In case we put an element inside it.
   */
}
.large-table__sortable-label:hover {
  color: var(--main-color-dark-2);
}
.large-table__sortable-label:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  margin-left: 10px;
  border-left: solid 4px transparent;
  border-right: solid 4px transparent;
}
.large-table__sortable-label_arrow-side_up:after {
  border-bottom: solid 5px var(--main-color);
}
.large-table__sortable-label_arrow-side_down:after {
  border-top: solid 5px var(--main-color);
}
.large-table__sortable-label > div, .large-table__sortable-label > span {
  font-family: "Montserrat", sans-serif;
}

/**
 * Normal large table that changes at desktop breakpoint.
 *
 * 1. Give extra space such that the contact support does not hide content.
 *
 * @modifier type
 * @value normal
 */
.large-table_type_normal {
  /**
   * @element conditional-split
   */
  /**
   * @element conditional-split-first
   */
  /**
   * Media queries might still apply even if we change the
   * breakpoints in the mixin, this prevents that.
   */
}
.large-table_type_normal .large-table__conditional-split {
  display: flex;
  align-items: center;
}
.large-table_type_normal .large-table__conditional-split-first {
  display: flex;
  align-items: center;
  padding-right: 10px;
}
@media (max-width: 47.99em) {
  .large-table_type_normal:not(.large-table_has-many-columns) {
    /**
    * @element cell
    */
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell {
    height: 70px;
    width: 100%;
    flex: none;
    font-size: 14px;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_m-height_50 {
    height: 50px;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_m-no-padding {
    padding-left: 0;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_m-height_none {
    height: auto;
    padding-bottom: 15px;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_mc_1 {
    flex: 1;
  }
}
@media (min-width: 48em) {
  .large-table_type_normal:not(.large-table_has-many-columns) {
    /**
     * @element cell
     */
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell {
    font-size: 16px;
    height: 60px;
    /**
     * @modifier d-align-right
     */
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_font_small {
    font-size: 14px;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_d-align-right {
    align-items: flex-end;
    padding-right: 25px;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_ct_1 {
    flex: 1;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_ct_2 {
    flex: 2;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_ct_3 {
    flex: 3;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_ct_4 {
    flex: 4;
  }
}
@media (max-width: 63.99em) {
  .large-table_type_normal:not(.large-table_has-many-columns) {
    /**
     * @modifier thin-header
     * @for large-table
     */
    /**
     * @element header
     */
  }
  .large-table_type_normal:not(.large-table_has-many-columns).large-table_thin-header {
    padding-top: 0;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__header {
    display: none;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .large-table_type_normal:not(.large-table_has-many-columns) {
    padding: 22px 22px 50px;
    /**
     * @modifier t-wrap
     * @for row
     */
    /**
     * @element cell
     */
    /**
     * @modifier thin-header
     * @for large-table
     */
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__row_t-wrap {
    /**
     * @element cell
     */
    /**
     * @for large-table__row_t-wrap
     */
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__row_t-wrap .large-table__cell {
    border-left: none;
    height: 70px;
    width: 100%;
    flex: none;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__row_t-wrap .large-table__cell_t-is-large {
    height: 100px;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__row_t-wrap_height_auto .large-table__cell {
    min-height: 70px;
    height: auto;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell {
    border-left: solid 1px var(--main-color-light-4);
    /**
     * @modifier t-no-padding
     */
    /**
     * @modifier t-no-borders
     * @for cell
     */
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell:first-child {
    border: none;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_t-no-padding {
    padding-left: 0;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_t-no-borders {
    border: none;
  }
  .large-table_type_normal:not(.large-table_has-many-columns).large-table_thin-header {
    padding-top: 0;
  }
}
@media (min-width: 64em) {
  .large-table_type_normal:not(.large-table_has-many-columns) {
    padding-top: 60px;
    /**
     * @modifier thin-header
     * @for large-table
     */
    /**
     * 1. We give extra bottom padding so the contact support
     * does not hide the last row.
     *
     * @element body
     */
  }
  .large-table_type_normal:not(.large-table_has-many-columns).large-table_thin-header {
    padding-top: 40px;
  }
  .large-table_type_normal:not(.large-table_has-many-columns).large-table_thin-header .large-table__header {
    /**
     * @element cell
     */
  }
  .large-table_type_normal:not(.large-table_has-many-columns).large-table_thin-header .large-table__header .large-table__cell {
    height: 40px;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__body {
    height: 100%;
    box-sizing: border-box;
    overflow-y: scroll;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell {
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_c_1 {
    flex: 1;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_c_2 {
    flex: 2;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_c_3 {
    flex: 3;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_c_4 {
    flex: 4;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_c_logo {
    width: 100px;
    padding: 5px 0;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_max-width_150 {
    max-width: 150px;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_min-width_140 {
    min-width: 140px;
  }
  .large-table_type_normal:not(.large-table_has-many-columns) .large-table__cell_min-width_110 {
    min-width: 110px;
  }
}
@media (max-width: 47.99em) {
  .large-table_type_normal.large-table_has-many-columns {
    /**
    * @element cell
    */
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell {
    height: 70px;
    width: 100%;
    flex: none;
    font-size: 14px;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_m-height_50 {
    height: 50px;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_m-no-padding {
    padding-left: 0;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_m-height_none {
    height: auto;
    padding-bottom: 15px;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_mc_1 {
    flex: 1;
  }
}
@media (min-width: 48em) {
  .large-table_type_normal.large-table_has-many-columns {
    /**
     * @element cell
     */
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell {
    font-size: 16px;
    height: 60px;
    /**
     * @modifier d-align-right
     */
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_font_small {
    font-size: 14px;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_d-align-right {
    align-items: flex-end;
    padding-right: 25px;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_ct_1 {
    flex: 1;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_ct_2 {
    flex: 2;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_ct_3 {
    flex: 3;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_ct_4 {
    flex: 4;
  }
}
@media (max-width: 81.24em) {
  .large-table_type_normal.large-table_has-many-columns {
    /**
     * @modifier thin-header
     * @for large-table
     */
    /**
     * @element header
     */
  }
  .large-table_type_normal.large-table_has-many-columns.large-table_thin-header {
    padding-top: 0;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__header {
    display: none;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .large-table_type_normal.large-table_has-many-columns {
    padding: 22px 22px 50px;
    /**
     * @modifier t-wrap
     * @for row
     */
    /**
     * @element cell
     */
    /**
     * @modifier thin-header
     * @for large-table
     */
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__row_t-wrap {
    /**
     * @element cell
     */
    /**
     * @for large-table__row_t-wrap
     */
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__row_t-wrap .large-table__cell {
    border-left: none;
    height: 70px;
    width: 100%;
    flex: none;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__row_t-wrap .large-table__cell_t-is-large {
    height: 100px;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__row_t-wrap_height_auto .large-table__cell {
    min-height: 70px;
    height: auto;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell {
    border-left: solid 1px var(--main-color-light-4);
    /**
     * @modifier t-no-padding
     */
    /**
     * @modifier t-no-borders
     * @for cell
     */
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell:first-child {
    border: none;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_t-no-padding {
    padding-left: 0;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_t-no-borders {
    border: none;
  }
  .large-table_type_normal.large-table_has-many-columns.large-table_thin-header {
    padding-top: 0;
  }
}
@media (min-width: 81.25em) {
  .large-table_type_normal.large-table_has-many-columns {
    padding-top: 60px;
    /**
     * @modifier thin-header
     * @for large-table
     */
    /**
     * 1. We give extra bottom padding so the contact support
     * does not hide the last row.
     *
     * @element body
     */
  }
  .large-table_type_normal.large-table_has-many-columns.large-table_thin-header {
    padding-top: 40px;
  }
  .large-table_type_normal.large-table_has-many-columns.large-table_thin-header .large-table__header {
    /**
     * @element cell
     */
  }
  .large-table_type_normal.large-table_has-many-columns.large-table_thin-header .large-table__header .large-table__cell {
    height: 40px;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__body {
    height: 100%;
    box-sizing: border-box;
    overflow-y: scroll;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell {
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_c_1 {
    flex: 1;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_c_2 {
    flex: 2;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_c_3 {
    flex: 3;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_c_4 {
    flex: 4;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_c_logo {
    width: 100px;
    padding: 5px 0;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_max-width_150 {
    max-width: 150px;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_min-width_140 {
    min-width: 140px;
  }
  .large-table_type_normal.large-table_has-many-columns .large-table__cell_min-width_110 {
    min-width: 110px;
  }
}

/**
 * Inner large table that breaks at desktop plus and is padding-less. Used
 * when inside a `list__detail` element since the allocated width is smaller
 * than normal.
 *
 * Needs much less CSS than the normal table.
 *
 * @modifier type
 * @value inner
 * @for large-table
 */
.large-table_type_inner {
  /**
   * 1. Always scrollable even on mobile and tablet.
   *
   * @element body
   */
  /**
   * 1. Remove the left border since the parent already has one.
   *
   * @element row
   */
}
.large-table_type_inner .large-table__body {
  overflow-y: scroll; /* 1 */
  height: 100%;
  box-shadow: none;
}
.large-table_type_inner .large-table__row {
  border-left: none; /* 1 */
}
.large-table_type_inner .large-table__row_is-header {
  border-bottom: solid 1px var(--main-color-light-4);
}
@media (max-width: 81.24em) {
  .large-table_type_inner {
    padding-top: 0;
    /**
     * @element split
     */
    /**
     * No header on smaller breakpoints
     *
     * @element header
     */
    /**
     * @element row
     */
    /**
     * @element cell
     */
  }
  .large-table_type_inner .large-table__split {
    padding-left: 20px;
  }
  .large-table_type_inner .large-table__header {
    display: none;
  }
  .large-table_type_inner .large-table__row:first-of-type {
    border-top: none;
  }
  .large-table_type_inner .large-table__cell {
    height: 70px;
    width: 100%;
    padding-left: 0;
    flex: none;
    font-size: 14px;
  }
}
@media (min-width: 81.25em) {
  .large-table_type_inner {
    padding-top: 40px;
    /**
     * @element cell
     */
  }
  .large-table_type_inner .large-table__cell {
    font-size: 16px;
    height: 60px;
    /**
     * @modifier d-align-right
     */
  }
  .large-table_type_inner .large-table__cell_d-align-right {
    align-items: flex-end;
    padding-right: 25px;
  }
  .large-table_type_inner .large-table__cell_c_1 {
    flex: 1;
  }
  .large-table_type_inner .large-table__cell_c_2 {
    flex: 2;
  }
  .large-table_type_inner .large-table__cell_c_3 {
    flex: 3;
  }
  .large-table_type_inner .large-table__cell_c_4 {
    flex: 4;
  }
}

@media (min-width: 48em) and (max-width: 63.99em) {
  .large-table:not(.large-table_without-contact-support-space)::after {
    content: "";
    height: 50px;
    display: block;
  }
}
@media (min-width: 64em) {
  .large-table:not(.large-table_without-contact-support-space) .large-table__body {
    /**
    * padding-bottom does not work on firefox and IE11 when
    * there is a overflow-y. This works across all browsers.
    */
  }
  .large-table:not(.large-table_without-contact-support-space) .large-table__body::after {
    content: "";
    height: 50px;
    display: block;
  }
}
/**
 * @element activity-icon
 */
.large-table__activity-icon {
  margin-top: 2px;
  margin-right: 10px;
}

/**
 * 1. The width changes when we collapse the main-menu, therefore we animate it.
 */
.large-table_transition-header-width .large-table__header {
  transition: width 500ms linear; /* 1 */
}

/**
 * The styling has become too complex, and most of it does not follow BEM!
 * Specificity rules reign supreme and each dev is on his own. Therefore
 * I had to summon the kill switch and use !important.
 *
 * TODO: Refactor this file.
 */
.large-table_side-padding_0-important {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/**
 * @block last-updated
 */
.last-updated {
  color: #B0A7A8;
  font-size: 13px;
  height: 100%;
  display: flex;
  align-items: center;
}

/**
 * The app layout when the user is signed in. Consists of a left side bar
 * and the dynamic content is to the right.
 *
 * SHOULD NOT HAVE Z-INDEX
 *
 * @block layout
 */
.layout {
  display: flex;
  height: 100%;
  overflow: visible;
  animation: g-fade-in 300ms linear;
}
.layout_is-partner-billing {
  height: calc(100% - 50px);
}
.layout_is-preview {
  box-shadow: 0 7.05px 17.63px 3.53px rgba(0, 0, 0, 0.1);
  border: 1.75px solid #C8D8D8;
  zoom: 75%;
}
@supports not (zoom: 1) {
  .layout_is-preview .layout__left-collapser {
    width: 7.5px;
  }
}

/**
 * The left sidebar.
 *
 * 1. To preserve height so that children can be scrolled.
 * 2. The main-menu might overflow over when animating the collapse.
 *
 * @element left
 */
.layout__left {
  box-sizing: border-box;
  width: 220px;
  height: 100%; /* [1] */
  border-right: solid 1px var(--color-light-blue);
  display: flex;
  transition: width 300ms ease;
  overflow-x: hidden; /* 2 */
}
@supports not (zoom: 1) {
  .layout__left_is-preview {
    width: 165px;
    font-size: 8px;
  }
}

.layout__left-menu {
  flex: 1;
  min-width: 0;
}

.layout__left-collapser {
  width: 10px;
  background-color: var(--layout-body-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 100ms linear;
  /**
   * Used to preload image.
   */
}
.layout__left-collapser::after {
  width: 8px;
  height: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--svg-left-arrow);
  content: "";
}
.layout__left-collapser::before {
  content: "";
  background-image: url("/assets/images/icons/arrow-left-white.svg");
}
.layout__left-collapser:hover {
  background-color: var(--main-color);
}
.layout__left-collapser:hover::after {
  background-image: url("/assets/images/icons/arrow-left-white.svg");
}

/**
 * The dynamic content. Content inside it depends on the current route.
 * (The outlet).
 *
 * 1. Do not remove this!! If you remove it you will cause tables deep down
 * the hierarchy have a horizontal scrollbar when content doesn't fit
 * instead of hiding said content. See https://css-tricks.com/flexbox-truncated-text/
 * for more info.
 *
 * 2. Account for liquid-outlet such as in the prospects page.
 *
 * @element content
 */
.layout__content {
  z-index: 0;
  flex: 1;
  height: 100%;
  min-width: 0; /* 1 */
  /**
   * @modifier is-menu-open
   */
}
.layout__content_is-menu-open {
  overflow: hidden;
}
.layout__content > .liquid-container {
  height: 100%; /* 2 */
}
.layout__content > .liquid-container > .liquid-child {
  height: 100%; /* 2 */
}

/**
 * layout's mobile look applied to desktop. Example in forms where main
 * menu is hidden.
 *
 * @modifier full-page
 */
.layout_full-page {
  position: relative;
  /**
   * Sidebar is hidden on small screens.
   *
   * 1. To be above the overlay when transitioning between
   * a mobile open menu and a closed one.
   *
   * 2. Background color is set since on mobile the layout-left would be positioned
   * absolute and we do not want it to be transparent.
   *
   *
   * @element left
   */
  /**
   * ex: when main menu opened.
   *
   * @element overlay
   */
}
.layout_full-page .layout__left:not(.layout__left_is-preview) {
  width: 240px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8; /* [1] */
  background-color: #E9F6F8; /* [2] */
  transform: translateX(-100%);
}
.layout_full-page .layout__left:not(.layout__left_is-preview).layout__left_is-mobile-open {
  transform: translateX(0);
  display: flex;
}
.layout_full-page .layout__left:not(.layout__left_is-preview):not(.layout__left_is-mobile-open) {
  visibility: hidden;
}
.layout_full-page .layout__overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 7;
  background-color: rgba(255, 255, 255, 0.8);
}

.layout_full-page.layout_has-animation {
  /**
   * Sidebar is hidden on small screens.
   *
   * 1. To be above the overlay when transitioning between
   * a mobile open menu and a closed one.
   *
   * 2. Background color is set since on mobile the layout-left would be positioned
   * absolute and we do not want it to be transparent.
   *
   *
   * @element left
   */
  /**
   * ex: when main menu opened.
   *
   * @element overlay
   */
}
.layout_full-page.layout_has-animation .layout__left:not(.layout__left_is-preview) {
  width: 240px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8; /* [1] */
  background-color: #E9F6F8; /* [2] */
  transform: translateX(-100%);
}
.layout_full-page.layout_has-animation .layout__left:not(.layout__left_is-preview).layout__left_is-mobile-open {
  transform: translateX(0);
  display: flex;
  transition: transform 300ms ease;
}
.layout_full-page.layout_has-animation .layout__left:not(.layout__left_is-preview):not(.layout__left_is-mobile-open) {
  visibility: hidden;
  transition-property: transform, visibility;
}
.layout_full-page.layout_has-animation .layout__overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 7;
  background-color: rgba(255, 255, 255, 0.8);
  animation: layout__fade-in 400ms;
}

/**
 * @modifier is-modal-open
 */
.layout_is-modal-open {
  /**
   * 1. This removes the scroll from the body
   * when a modal is open.
   *
   * @element content
   */
}
.layout_is-modal-open .layout__content {
  overflow: hidden; /* [1] */
}

@media (max-width: 63.99em) {
  /**
   * layout on small screens
   *
   * @block layout
   */
  .layout {
    position: relative;
  }
  /**
   * Sidebar is hidden on small screens.
   *
   * 1. To be above the overlay when transitioning between
   * a mobile open menu and a closed one.
   *
   * 2. Background color is set since on mobile the layout-left would be positioned
   * absolute and we do not want it to be transparent.
   *
   *
   * @element left
   */
  .layout__left:not(.layout__left_is-preview) {
    width: 240px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8; /* [1] */
    background-color: #E9F6F8; /* [2] */
    transform: translateX(-100%);
  }
  .layout__left:not(.layout__left_is-preview).layout__left_is-mobile-open {
    transform: translateX(0);
    display: flex;
    transition: transform 300ms ease;
  }
  .layout__left:not(.layout__left_is-preview):not(.layout__left_is-mobile-open) {
    visibility: hidden;
    transition-property: transform, visibility;
  }
  /**
   * ex: when main menu opened.
   *
   * @element overlay
   */
  .layout__overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 7;
    background-color: rgba(255, 255, 255, 0.8);
    animation: layout__fade-in 400ms;
  }
}
@keyframes layout__fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.layout__left_is-collapsed {
  width: 50px;
}

.layout_is-lighter-color .layout__left-collapser {
  background-color: var(--main-menu-lighter-color);
  border-left: 1px solid var(--lighter-border-color);
}
.layout_is-lighter-color .layout__left-collapser:hover {
  background-color: var(--lighter-main-color);
}
.layout_is-lighter-color .layout__left-collapser:hover::after {
  background-image: var(--svg-left-arrow);
}

/**
 * 4-dotted line used in the dashboard boxes to indicate empty space below.
 *
 * @block line-dots
 */
.line-dots {
  position: relative;
  flex: 1;
  background: url("/assets/images/icons/4dots.svg") center center no-repeat;
  background-size: 35px;
  overflow: hidden;
  /**
   * Make the border as a pseudo element in order to hide it when the height
   * is 0.
   *
   * @modifier is-bordered
   */
}
.line-dots_is-bordered:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.5px;
  content: "";
  background: #C7D7D7;
}

/**
 * Plain old regular link.
 */
.link {
  color: var(--main-color);
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}
.link:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  color: var(--main-color-dark);
  text-decoration-line: underline;
}
.link:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  color: var(--main-color);
}
.link:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus {
  color: var(--main-color-dark);
  text-decoration-line: underline;
}
.link_text-align_left {
  text-align: left;
}
.link_text-align_right {
  text-align: right;
}
.link_text_uppercase {
  text-transform: uppercase;
}
.link_font_montserrat {
  font-family: "Montserrat", sans-serif;
}
.link_size_10 {
  font-size: 10px;
}
.link_size_11 {
  font-size: 11px;
}
.link_size_12 {
  font-size: 12px;
}
.link_size_13 {
  font-size: 13px;
}
.link_size_15 {
  font-size: 15px;
}
.link_size_16 {
  font-size: 16px;
}
.link_display_block {
  display: block;
}
.link_display_inline-block {
  display: inline-block;
}
.link_size_default {
  font-size: inherit;
}
.link_color_default {
  color: inherit;
}
.link_interaction_obvious:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  opacity: 0.7;
}
.link_interaction_obvious:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  opacity: 0.5;
}
.link_no-underline:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover, .link_no-underline:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus {
  text-decoration: none;
}
.link_no-focus-color:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus {
  color: #1297AC;
}
.link_no-focus-color:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  color: #0D7383;
}
.link_color_red {
  color: var(--color-red);
}
.link_color_red:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  color: var(--color-red-dark);
}
.link_color_red:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus {
  color: var(--color-red-dark);
}
.link_color_red:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  color: var(--color-red);
}
.link_color_white {
  color: #FFF;
}
.link_color_white:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover, .link_color_white:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus {
  color: #FFF;
  opacity: 0.7;
}
.link_color_white:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  color: #FFF;
  opacity: 0.5;
}
.link_color_light-green {
  color: #1297AC;
}
.link_color_faded {
  color: #B0A7A8;
}
.link_color_green {
  color: #7ECA2A;
}
.link_color_salmon {
  color: #D57F73;
}
.link_weight_bold {
  font-weight: bold;
}
.link_weight_semi-bold {
  font-weight: 600;
}
.link_weight_500 {
  font-weight: 500;
}
.link_is-lowercase {
  text-transform: lowercase;
}
.link_margin-bottom_10 {
  margin-bottom: 10px;
}
.link_margin-bottom_20 {
  margin-bottom: 20px;
}
.link_margin-top_10 {
  margin-top: 10px;
}
.link_margin-top_15 {
  margin-top: 15px;
}
.link_margin-top_20 {
  margin-top: 20px;
}
.link_margin-vertical_15 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.link_padding-horizontal_10 {
  margin-right: 10px;
  margin-left: 10px;
}
.link_icon_disclaimer {
  display: flex;
  align-items: center;
}
.link_icon_disclaimer:before {
  content: "";
  height: 13px;
  width: 18px;
  background: var(--svg-disclaimer) left center no-repeat;
  background-size: 13px 10px;
}
.link_icon_edit {
  display: flex;
  align-items: center;
}
.link_icon_edit:before {
  content: "";
  height: 10px;
  width: 25px;
  background: var(--svg-pencil) center center no-repeat;
  background-size: 10px 10px;
}
.link_icon_edit_color_dark-green:before {
  height: 12px;
  background-size: 12px 12px;
}
.link_icon_edit_color_dark-green:hover, .link_icon_edit_color_dark-green:focus {
  color: #0D7383;
}
.link_icon_edit_color_dark-green:hover::before, .link_icon_edit_color_dark-green:focus::before {
  background: url("/assets/images/icons/edit-dark-green.svg") center center no-repeat;
}
.link_icon_edit_color_grey:before {
  height: 15px;
  background: url("/assets/images/icons/edit-grey.svg") center center no-repeat;
  background-size: 15px 15px;
}
.link_icon_edit_color_grey:hover:before, .link_icon_edit_color_grey:focus:before {
  background: var(--svg-pencil) center center no-repeat;
  background-size: 15px 15px;
}
.link_icon_edit.link_is-in-dialog:before {
  display: none;
}
.link_icon_edit.link_is-in-dialog .link__text {
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.link_icon_edit.link_is-in-dialog .link__text::before {
  content: "";
  height: 12px;
  width: 16px;
  background: var(--svg-pencil) center center no-repeat;
  background-size: 16px 12px;
}
.link_icon_edit.link_is-in-summary:before {
  content: "";
  height: 10px;
  width: 10px;
  background: var(--svg-pencil) center center no-repeat;
  background-size: 10px 10px;
  margin-right: 10px;
}
.link_icon_path {
  display: flex;
  align-items: center;
}
.link_icon_path:before {
  content: "";
  height: 12px;
  min-width: 16px;
  margin-right: 3px;
  background: var(--svg-union) center center no-repeat;
  background-size: 16px 12px;
}
.link_icon_path.link_is-in-dialog:before {
  display: none;
}
.link_icon_path.link_is-in-dialog .link__text {
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.link_icon_path.link_is-in-dialog .link__text::before {
  content: "";
  height: 12px;
  width: 16px;
  background: var(--svg-union) center center no-repeat;
  background-size: 16px 12px;
}
.link_icon_arrow-up-right {
  display: flex;
  align-items: center;
}
.link_icon_arrow-up-right:before {
  content: "";
  height: 10px;
  width: 20px;
  background: url("/assets/images/themes/blue/icons/arrow-up-right.svg") center center no-repeat;
  background-size: 14px 14px;
}
.link_icon_edit.link_is-faded-while-disabled:before {
  background-image: url("/assets/images/icons/pencil-grey.svg");
}
.link_icon_edit-hidden {
  display: flex;
  align-items: center;
}
.link_icon_edit-hidden:before {
  content: " ";
  height: 10px;
  width: 25px;
}
.link_icon_spreadsheet {
  display: flex;
  align-items: center;
}
.link_icon_spreadsheet:before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 7px;
  background: var(--svg-excel) center center no-repeat;
  background-size: 100% 100%;
}
@media (max-width: 47.99em) {
  .link_icon_spreadsheet.link_mobile-icon {
    font-size: 0;
  }
  .link_icon_spreadsheet.link_mobile-icon:before {
    width: 20px;
    height: 20px;
  }
}
.link_icon_back {
  display: flex;
  align-items: center;
}
.link_icon_back:before {
  content: "";
  height: 11px;
  width: 15px;
  background-image: var(--svg-back);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 5px 11px;
}
.link_icon_back-disabled {
  display: flex;
  align-items: center;
}
.link_icon_back-disabled:before {
  content: "";
  height: 11px;
  width: 15px;
  background-image: url("/assets/images/themes/green/icons/back-gray.svg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 5px 11px;
}
.link_icon_cancel {
  width: 7px;
  height: 7px;
  display: block;
  background: var(--svg-x-sign-white) center no-repeat;
  background-size: 10px 10px;
  border-radius: 5px;
}
.link_icon_history {
  display: flex;
  align-items: center;
  justify-content: center;
}
.link_icon_history:before {
  content: "";
  width: 15px;
  height: 15px;
  background: var(--svg-history) left center no-repeat;
  background-size: 15px 15px;
  padding-right: 5px;
}
.link_icon_history-light-grey-disabled {
  display: flex;
  align-items: center;
  justify-content: center;
}
.link_icon_history-light-grey-disabled:before {
  content: "";
  width: 15px;
  height: 15px;
  background: url("/assets/images/icons/history-light-grey-disabled.svg") left center no-repeat;
  background-size: 15px 15px;
  padding-right: 5px;
}
.link__icon_position_after-text {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.link_is-capitalized {
  text-transform: capitalize;
}
.link_padding-right_15 {
  padding-right: 15px;
}
.link_padding-horizontal_15 {
  padding: 0 15px;
}
.link_padding-horizontal_5 {
  padding-left: 5px;
  padding-right: 5px;
}
.link_is-underlined {
  text-decoration: underline;
}
.link_margin-left_5 {
  margin-left: 5px;
}
.link_margin-left_10 {
  margin-left: 10px;
}
.link_margin-left_20 {
  margin-left: 20px;
}
.link_margin-left_30 {
  margin-left: 30px;
}
.link_margin-right_5 {
  margin-right: 5px;
}
.link_margin-right_10 {
  margin-right: 10px;
}
.link_margin-right_15 {
  margin-right: 15px;
}
.link_margin-right_20 {
  margin-right: 20px;
}
.link_margin-right_30 {
  margin-right: 30px;
}
.link_height_20 {
  height: 20px;
}
.link_type_edit {
  color: #1297AC;
  background: var(--svg-edit) left center no-repeat;
  background-size: 9px 9px;
  padding-left: 13px;
}
.link_color_dark-grey {
  color: #6E6E6E;
}
.link_color_dark-grey:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  color: #676666;
}
.link_color_dark-blue {
  color: #305C94;
}
.link_color_dark-blue:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  color: #24456F;
}
.link_color_dark-blue:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus {
  color: #24456F;
}
.link_color_dark-blue:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  color: #24456F;
}
.link_color_blue {
  color: #305C94;
}
.link_color_blue:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  color: #24456F;
}
.link_color_blue:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus {
  color: #24456F;
}
.link_color_blue:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  color: #24456F;
}
.link_color_yellow {
  color: #CC9D00;
}
.link_color_yellow:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  color: #A27D01;
}
.link_color_yellow:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus {
  color: #A27D01;
}
.link_color_yellow:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  color: #A27D01;
}
.link_color_grey {
  color: #B0A7A8;
}
.link_color_grey:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  color: #8D8788;
}
.link_color_grey:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus {
  color: #8D8788;
}
.link_color_grey:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  color: #8D8788;
}
.link_color_dark-grey {
  color: #5C5050;
}
.link_color_dark-grey-2 {
  color: #5E5E5E;
}
.link_color_black {
  color: #4A4A4A;
}
.link_color_black:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  color: #7E7C7F;
}
.link_color_black:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  color: #4A4A4A;
}
.link_color_black:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus {
  color: #7E7C7F;
  text-decoration: underline;
}
.link_height_full {
  height: 100%;
}
.link_width_75 {
  width: 75px;
}
.link_width_full {
  width: 100%;
}
.link_line-height_small {
  line-height: 1.2;
}
.link_pointer-events_none {
  pointer-events: none;
}
.link_justify-content_center {
  justify-content: center;
}
.link_fill-parent {
  width: 100%;
  height: 100%;
}
.link_padding-left_10 {
  padding-left: 10px;
}

.link__text {
  display: flex;
  justify-content: center;
  align-items: center;
}
.link__text_justify-content_end {
  justify-content: flex-end;
}

.link_has-paper-plane {
  color: #1297AC;
}
.link_has-paper-plane.link_is-disabled, .link_has-paper-plane.link_is-light-grey-disabled {
  opacity: 0.5;
  color: #1297AC;
}
.link_has-paper-plane .link__text::before {
  margin-right: 5px;
  height: 13px;
  width: 13px;
  content: "";
  background: var(--svg-paper-plane) center no-repeat;
}

/**
 * When the link looks like an inverted button.
 * Used for example when secondary dialog buttons
 * are just as important as the primary button.
 * Example: Send Self Service Invite button in Add Employee modal.
 *
 */
@media (min-width: 48em) {
  .link_is-button-large-screen {
    border-radius: 28px;
    border: solid thin #1297AC;
    box-sizing: border-box;
    height: 35px;
    line-height: 35px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.link_is-terminate {
  color: var(--color-red);
}
.link_is-terminate:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  color: var(--color-red-dark);
}
.link_is-terminate:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  color: var(--color-red);
}
.link_is-terminate:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus {
  color: var(--color-red-dark);
}

.link_is-in-dialog {
  display: block;
  width: 100%;
  height: 100%;
}

.link_action_add {
  position: relative;
  padding-left: 30px;
  display: inline-block;
}
.link_action_add::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  height: 100%;
  width: 20px;
  background-image: var(--link-action-add-after);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 7px 7px;
}

.link_action_add-white {
  position: relative;
  padding-left: 12px;
  display: inline-block;
}
.link_action_add-white::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  height: 100%;
  width: 20px;
  background-image: url("/assets/images/icons/plus.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 7px 7px;
}
.link_action_add-white::after {
  background-image: var(--link-action-add-white-after);
}

.link_hover_blue:not(.link_is-terminate):not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  color: #03336B;
}
.link_hover_blue:not(.link_is-terminate):not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  color: #034FA8;
  opacity: 0.9;
}
.link_hover_blue:not(.link_is-terminate):not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus {
  color: #03336B;
}

.link_hover_main:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover {
  color: var(--main-color-dark);
}

.link_action_add-new {
  display: flex;
  align-items: center;
}
.link_action_add-new::before {
  content: "";
  height: 20px;
  width: 14px;
  background-image: var(--svg-plus);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 7px 7px;
  background-image: var(--link-action-add-new-background-image);
}

.link_icon_undo {
  position: relative;
  padding-left: 20px;
  display: inline-block;
}
.link_icon_undo::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 13px;
  background-size: 13px 10px;
  background-position: center center;
  background-repeat: no-repeat;
}
.link_icon_undo::after {
  background-image: url("/assets/images/themes/blue/icons/undo.svg");
}
.link_icon_undo:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover:after, .link_icon_undo:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus:after {
  background-image: url("/assets/images/themes/blue/icons/undo-light.svg");
}

.link_icon_undo.link_is-disabled, .link_icon_undo.link_is-light-grey-disabled {
  color: #BBBBBB;
}
.link_icon_undo.link_is-disabled::after, .link_icon_undo.link_is-light-grey-disabled::after {
  background-image: url("/assets/images/icons/undo.svg");
}

.link_icon_x {
  position: relative;
  display: inline-block;
  padding-left: 10px;
}
.link_icon_x::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 7px;
  background: var(--svg-x-red) center center no-repeat;
  background-size: 7px 7px;
}

.link_icon_add {
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.link_icon_add::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20px;
  background: var(--link-icon-add-after) center center no-repeat;
  background-size: 7px 7px;
}
.link_icon_add:hover:after, .link_icon_add:focus:after {
  background-image: var(--link-icon-add-hover-focus);
}
.link_icon_add.link_is-disabled-add {
  color: #9B9B9B;
}
.link_icon_add.link_is-disabled-add::after {
  background-image: url("/assets/images/icons/plus-dark-grey.svg");
}

.link_icon_plus {
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.link_icon_plus::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20px;
  background: var(--svg-plus) center center no-repeat;
  background-size: 7px 7px;
}
.link_icon_plus:hover:after {
  background-image: var(--svg-plus-hover);
}

.link_icon_minus {
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.link_icon_minus::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 100%;
  width: 20px;
  background: var(--svg-minus-light) center center no-repeat;
  background-size: 7px 7px;
}
.link_icon_minus:hover:after {
  background-image: var(--svg-minus);
}

.link_icon_switch {
  position: relative;
  padding-left: 25px;
  display: inline-block;
}
.link_icon_switch::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20px;
  background: var(--svg-switch) center center no-repeat;
  background-size: 15px 11px;
}

.link_icon_switch-vertical {
  padding-left: 0;
}
.link_icon_switch-vertical .link__text {
  justify-content: center;
  gap: 7px;
}
.link_icon_switch-vertical .link__text::before {
  content: "";
  height: 14px;
  width: 14px;
  background: var(--svg-switch-vertical) center center no-repeat;
  background-size: 14px 10px;
}

.link_icon-no-padding {
  padding-left: 15px;
}
.link_icon-no-padding::after {
  left: 0;
  background-position: left center;
}

.link_is-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.link_white-space_nowrap {
  white-space: nowrap;
}

.link_type_inner-links {
  color: #B0A7A8;
  min-width: 190px;
  margin-right: 10px;
}
@media (max-width: 47.99em) {
  .link_type_inner-links {
    min-width: 150px;
  }
}
.link_type_inner-links:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover, .link_type_inner-links:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus, .link_type_inner-links:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  color: #5C5050;
  font-weight: bold;
  text-decoration: none;
}
.link_type_inner-links_is-selected {
  color: #5C5050;
  font-weight: bold;
  text-decoration: none;
}

.link_type_table-inner-links {
  min-width: 120px;
  color: #B0A7A8;
  font-size: 16px;
  text-transform: capitalize;
}
@media (max-width: 47.99em) {
  .link_type_table-inner-links {
    font-size: 14px;
  }
}
.link_type_table-inner-links:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):hover, .link_type_table-inner-links:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):focus, .link_type_table-inner-links:not(.link_is-disabled):not(.link_is-light-grey-disabled):not(.link_text-decoration_none):active {
  color: #5C5050;
  font-weight: bold;
  text-decoration: none;
}
.link_type_table-inner-links-is-selected {
  color: #5C5050;
  font-weight: bold;
  text-decoration: none;
}

.link_min-width_110 {
  min-width: 110px;
}

.link_has-collapse-arrow::after,
.link_has-expand-arrow::after,
.link_has-collapse-arrow-thin::after,
.link_has-expand-arrow-thin::after {
  content: "";
  margin-left: 5px;
  display: inline-block;
  width: 7px;
  height: 10px;
  background: var(--svg-left-arrow) center no-repeat;
  transition: transform 200ms ease;
}

.link_has-back-arrow-before {
  display: flex;
  align-items: center;
}

.link_has-back-arrow-before::before,
.link_has-collapse-arrow-before::before,
.link_has-expand-arrow-before::before {
  content: "";
  margin-right: 5px;
  display: inline-block;
  width: 7px;
  height: 10px;
  background: var(--svg-left-arrow) center no-repeat;
  transition: transform 200ms ease;
}

.link_has-collapse-arrow-thin-before::before,
.link_has-expand-arrow-thin-before::before {
  content: "";
  margin-right: 5px;
  margin-bottom: 1px;
  display: inline-block;
  width: 10px;
  height: 5px;
  background: var(--svg-arrow-down-thin) center no-repeat;
  background-size: 10px 5px;
  transition: transform 200ms ease;
}
@media (max-width: 47.99em) {
  .link_has-collapse-arrow-thin-before::before,
  .link_has-expand-arrow-thin-before::before {
    margin-right: auto;
    margin-left: auto;
    display: block;
    margin-bottom: 5px;
  }
}

.link_has-collapse-arrow::after {
  transform: rotate(0deg);
  background-image: var(--svg-arrow-up-dark);
  height: 8px;
  width: 12px;
  margin-top: 2px;
}

.link_has-expand-arrow::after {
  transform: rotate(180deg);
  background-image: var(--svg-arrow-up-dark);
  height: 8px;
  width: 12px;
  margin-top: 2px;
}

.link_has-collapse-arrow-before::before {
  transform: rotate(90deg);
}

.link_has-expand-arrow-before::before {
  transform: rotate(270deg);
}

.link_has-collapse-arrow-thin-before::before {
  transform: rotate(180deg);
}

.link_has-expand-arrow-thin-before::before {
  transform: rotate(0deg);
}

.link_has-collapse-arrow-thin::after,
.link_has-expand-arrow-thin::after {
  width: 8px;
  height: 6px;
  background: var(--svg-arrow-down-thin) center no-repeat;
}

.link_has-collapse-arrow-thin::after {
  transform: rotate(180deg);
}

.link_side-margin_2 {
  margin-left: 2px;
  margin-right: 2px;
}

.link_eye_slashed-green {
  padding-left: 19px;
  background: left no-repeat;
  background-image: var(--svg-eye-slashed);
}

.link_eye_green {
  padding-left: 19px;
  background: left no-repeat;
  background-image: var(--svg-eye);
}

.link_is-disabled {
  color: #5C5050;
  pointer-events: none;
}

.link_is-faded-while-disabled {
  color: #B0A7A8;
  pointer-events: none;
}

.link_is-light-grey-disabled {
  color: #C1C1C1;
  pointer-events: none;
}

.link_is-dark-grey-disabled {
  color: #95989A;
  pointer-events: none;
}

/**
 * @block linked-coverages
 */
.linked-coverages:first-child:not(.linked-coverages_no-border-top) {
  border-top: 1px solid #C7D7D7;
}

/**
 * @element title
 */
.linked-coverages__title {
  border-bottom: 1px solid #C7D7D7;
  font-size: 13px;
  min-height: 40px;
  background-color: #DFEDEE;
  display: flex;
  align-items: center;
  padding: 5px 20px;
}
.linked-coverages__title_type_linked-coverages .linked-coverages__title-text {
  font-weight: bold;
}
.linked-coverages__title_type_linked-coverages .linked-coverages__title-text::before {
  background-image: url("/assets/images/icons/links-thick.svg");
}
.linked-coverages__title_type_blocked-coverages {
  background-color: #EED7D4;
}
.linked-coverages__title_type_blocked-coverages .linked-coverages__title-text {
  color: var(--color-red);
  font-weight: bold;
}
.linked-coverages__title_type_blocked-coverages .linked-coverages__title-text::before {
  background-image: url("/assets/images/icons/x-red-thick.svg");
  width: 13px;
  height: 13px;
}

/**
 * @element title-text
 */
.linked-coverages__title-text {
  flex: 1;
  color: #1297AC;
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.linked-coverages__title-text::before {
  content: "";
  width: 14px;
  height: 14px;
  background: url("/assets/images/icons/links.svg") center/100% no-repeat;
  margin-right: 10px;
}

/**
 * @element title-toggle
 */
.linked-coverages__title-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  /**
   * @modifier is-open
   * @for title-toggle
   */
}
.linked-coverages__title-toggle::after {
  margin-left: 5px;
  transition: transform 300ms linear;
  content: "";
  width: 7px;
  height: 5px;
  background: url("/assets/images/icons/triangle-brown.svg") center no-repeat;
  transform: rotate(-180deg);
}
.linked-coverages__title-toggle_is-open::after {
  transform: rotate(0);
}

/**
 * @element coverage
 */
.linked-coverages__coverage {
  border-bottom: 1px solid #ADB9B9;
  min-height: 135px;
  padding-top: 10px;
}

/**
 * @element coverage-row
 */
.linked-coverages__coverage-row {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

/**
 * @element link-type
 */
.linked-coverages__link-type {
  flex: 1;
  color: #5C5050;
  font-size: 11px;
  text-transform: uppercase;
}

/**
 * @element groupo
 */
.linked-coverages__group {
  flex: 1;
  display: flex;
  align-items: center;
}

/**
 * @element group-icon
 */
.linked-coverages__group-icon {
  height: 10px;
  width: 10px;
  margin-right: 5px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/**
 * @element checkbox
 */
.linked-coverages__checkbox {
  color: #B0A7A8;
  font-size: 11px;
  font-weight: bold;
}

/**
 * @element coverage-type
 */
.linked-coverages__coverage-type {
  flex: 1;
}

/**
 * @element coverage-card-header
 */
.linked-coverages__coverage-card-header {
  padding: 0 20px;
}

/**
 * @element modifiers has-blocked-children, has-blocker-parents
 */
.linked-coverages_has-blocked-children .linked-coverages__title,
.linked-coverages_has-blocker-parents .linked-coverages__title,
.linked-coverages_has-unblocker-parents .linked-coverages__title {
  background-color: rgba(213, 127, 115, 0.15);
}
.linked-coverages_has-blocked-children .linked-coverages__title-text,
.linked-coverages_has-blocker-parents .linked-coverages__title-text,
.linked-coverages_has-unblocker-parents .linked-coverages__title-text {
  color: #D57F73;
}
.linked-coverages_has-blocked-children .linked-coverages__title-text::before,
.linked-coverages_has-blocker-parents .linked-coverages__title-text::before,
.linked-coverages_has-unblocker-parents .linked-coverages__title-text::before {
  background: url("/assets/images/icons/x-thick.svg") center no-repeat;
}

/**
 * @element checkbox-label
 */
.linked-coverages__checkbox-label {
  text-transform: uppercase;
  color: #5C5050;
}

/**
 * 1. This property is very important as it prevents a horizontal scrollbar because of
 * the link item's `after` item which is absolutely positioned to the right.
 *
 * @block links-nav
 */
.links-nav {
  padding-right: 3px; /* 1 */
  /**
   * @modifier color
   * @value white
   */
}
.links-nav_color_white .links-nav__item {
  color: #FFF;
}
.links-nav_color_white .links-nav__item:hover {
  color: #FFF;
}
.links-nav_color_white .links-nav__item:after {
  background: #FFF;
}
.links-nav_margin-bottom_25 {
  margin-bottom: 25px;
}

/**
 * @element item
 */
.links-nav__item {
  position: relative;
  display: inline-block;
  padding: 0 5px;
  box-sizing: border-box;
  color: #B0A7A8;
  text-decoration: underline;
  font-size: 13px;
}
.links-nav__item:after {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  content: "";
  right: -3px;
  bottom: 6px;
  background: #B0A7A8;
  border-radius: 50%;
}
.links-nav__item:hover {
  color: #5C5050;
}
.links-nav__item:last-child:after {
  display: none;
}

/**
 * List summary (name and status), used to display one card in the
 * details page list.
 */
.list-card {
  height: 70px;
  display: flex;
  flex-direction: column;
}
.list-card:hover:not(.list-card_loading), .list-card:focus {
  background-color: #EDF1F5;
  outline: none;
}
.list-card_active:not(.list-card_loading), .list-card_active:hover:not(.list-card_loading) {
  background-color: #EDF1F5;
}
.list-card_cursor_pointer {
  cursor: pointer;
}

/**
 * @element content
 */
.list-card__content {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
}

.list-card__name {
  margin: 0 20px;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  color: #034FA8;
  margin-top: 4px;
  font-size: 14px;
}
.list-card__name_color_main-text {
  color: var(--color-dark-grey-2);
}

/**
 * The prospect's status.
 * Could be active or inactive.
 *
 * @element status
 */
.list-card__status {
  position: absolute;
  top: 6px;
  right: 8px;
}

/**
 * Builds the CSS for the list vs detail breakpoint switching where one of them takes all the screen
 * on small screens. Pass the breakpoint where the layout switch should happen.

 * 1. So that the flex parent don't change the navigation width to fit the content.
 */
/**
 * A list of items on the left with a details section on the right.
 * The idea is a user can click on one item on the left and view its
 * details to the right.
 *
 * An important property of this is that on mobile it only shows one
 * section or the other.
 *
 * One example is the employee list.
 *
 * @block list
 */
.list {
  height: 100%;
  width: 100%;
  display: flex;
  position: relative;
  box-sizing: border-box;
  /**
   * Makes the navigation take full width. Used when we need the list in a
   * modal.
   *
   * @modifier is-full
   */
  /**
   * @modifier has-mobile-footer
   */
}
.list_is-full {
  display: flex;
  flex-direction: column;
}
@media (min-width: 48em) {
  .list_is-full .list__navigation {
    width: 100%;
    border-right: none;
  }
}
.list_is-full .list__item:last-of-type {
  border-bottom: none;
}
@media (max-width: 47.99em) {
  .list_has-mobile-footer {
    padding-bottom: 45px;
  }
}
.list_full-width {
  width: 100vw;
}

/**
 * @element navigation
 */
.list__navigation {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  background: #FFF;
  /**
   * When the navigation doesn't contain a list of elements like employee cards.
   *
   * @modifier type
   * @value text
   */
}
.list__navigation_type_text {
  overflow: auto;
  padding: 17px;
  background: #F4F4F4;
}
.list__navigation_liquid-container-height_full > .liquid-container,
.list__navigation_liquid-container-height_full > .liquid-container > .liquid-child {
  height: 100%;
}
.list__navigation_type_print-enrollment > .liquid-container,
.list__navigation_type_print-enrollment > .liquid-container > .liquid-child {
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.list__navigation_width_100p {
  width: 100%;
}

.list__navigation_is-collapsed .list__navigation-header {
  display: none;
}
.list__navigation_is-collapsed .list__search {
  display: none;
}
.list__navigation_is-collapsed .list__actions {
  display: none;
}
.list__navigation_is-collapsed .list__items {
  scrollbar-width: thin;
}
.list__navigation_is-collapsed .list__items ::-webkit-scrollbar {
  width: 11px;
}
.list__navigation_is-collapsed .list__items-meta-container {
  display: none;
}

.list__navigation-collapser {
  width: 10px;
  background-color: var(--main-color-light-8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.list__navigation-collapser::after {
  width: 8px;
  height: 8px;
  background: var(--svg-sidebar-toggle) center no-repeat;
  transform: rotate(180deg);
  content: "";
}
.list__navigation-collapser:hover {
  background-color: var(--main-color);
}
.list__navigation-collapser:hover::after {
  background: url("/assets/images/icons/sidebar-toggle-icon-white.svg") center no-repeat;
}

.list__navigation__expander {
  width: 54px;
  height: 50px;
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: #F5F5F5;
  box-sizing: content-box;
  border-bottom: solid 1px var(--main-color-light-4);
}
.list__navigation__expander::after {
  width: 16px;
  height: 16px;
  background: var(--svg-sidebar-toggle) center no-repeat;
  content: "";
}
.list__navigation__expander:hover {
  background-color: var(--main-color);
}
.list__navigation__expander:hover::after {
  background: url("/assets/images/icons/sidebar-toggle-icon-white.svg") center no-repeat;
}

/**
 * @element navigation-section-title
 */
.list__navigation-section-title {
  margin-bottom: 5px;
  color: #5C5050;
  font-size: 12px;
  text-transform: uppercase;
}

/**
 * @element navigation-text
 */
.list__navigation-text {
  margin-bottom: 28px;
  color: #95989A;
  font-size: 13px;
}

/**
 * @element navigation-field
 */
.list__navigation-field {
  height: 70px;
  margin-bottom: 45px;
  flex-shrink: 0;
}

/**
 * 1. In order to align the search drop down
 * to it.
 *
 * @element header
 */
.list__navigation-header {
  display: flex;
  height: 52px;
  position: relative; /* [1] */
  flex-shrink: 0;
  border-bottom: solid 1px var(--color-light-blue);
}

/**
 * @element search
 */
.list__search {
  height: 100%;
  flex: 1;
}

/**
 * @element filter-menu
 */
.list__filter-menu {
  height: 100%;
}

/**
 * @element items
 */
.list__items {
  position: relative;
  flex: 1;
  overflow: auto;
}
.list__items_min-height_120 {
  min-height: 120px;
}

/**
 * @element item
 */
.list__item {
  border-bottom: solid 1px var(--color-light-blue);
}

/**
 * Detail is hidden by default on mobile.
 *
 * 1. Limits height to apply the scroll.
 * 2. Smoothens the scroll on mobile safari + chrome (webkit).
 *
 * @element detail
 */
.list__detail {
  display: none;
  flex: 1;
  background: rgba(244, 244, 244, 0.8);
  height: 100%; /* [1] */
  -webkit-overflow-scrolling: touch; /* [2] */
  /**
   * 1. Weird flex hack so the element doesn't grow in width to fit content.
   *
   * @modifier type
   * @value table
   */
}
.list__detail_type_table {
  background: #FFF;
  min-width: 0; /* 1 */
}
.list__detail_width_full {
  width: 100%;
}
.list__detail_display_block {
  display: block;
}
.list__detail_overflow_hidden {
  overflow: hidden;
}

/**
 * The list's placeholder container.
 *
 * @element placeholder
 */
.list__placeholder {
  height: 100%;
}

/**
 * @element actions
 */
.list__actions {
  display: flex;
  height: 45px;
  position: relative;
  border-bottom: solid 1px var(--main-color-light-4);
  /**
   * @for actions
   */
}
.list__actions_has-background {
  background-color: #EDEDED;
}

/**
 * @element action-label
 */
.list__action-label {
  display: flex;
  align-items: center;
  height: 45px;
  padding: 0 12px;
  /**
   * @modifier is-unpadded-left
   */
  /**
   * @modifier is-small-padding-right
   */
}
.list__action-label_is-unpadded-left {
  padding-left: 0;
}
.list__action-label_is-small-padding-right {
  padding-right: 8px;
}

/**
 * @element action
 */
.list__action {
  background-color: #EDEDED;
  /**
   * @modifier is-flex
   */
  /**
   * @modifier type
   * @value filter
   */
  /**
   * @for action
   */
  /**
   * @for action
   */
  /**
   * @for action
   */
  /**
   * @for action
   */
}
.list__action_is-flex {
  flex: 1;
}
.list__action_type_filter {
  width: 75px;
  background-color: #E5E5E5;
}
.list__action_type_filter:hover {
  background-color: #D7D7D7;
}
.list__action_color_dark-grey {
  background-color: #DADADA;
}
.list__action_has-disappearing-sibling {
  margin-right: 75px;
}
.list__action_did-disappear {
  transition: all 300ms linear;
  margin-right: 0;
}
.list__action_is-outside-flow {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.list__items-meta-container {
  display: flex;
  height: 30px;
  background-color: var(--main-color-transparent);
  align-items: center;
}
.list__items-meta-container_has-filters {
  min-height: 50px;
  height: auto;
  padding: 10px;
  flex-wrap: wrap;
  gap: 10px;
  box-sizing: border-box;
}
.list__items-meta-container_background-color_grey-9 {
  background-color: var(--color-light-grey-9);
}

.list__items-meta-container__count-text-container {
  display: flex;
  align-items: baseline;
}

.list__items-meta-container__count-text {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  padding-left: 10px;
  text-transform: uppercase;
  font-weight: 300;
  color: #494949;
}
.list__items-meta-container__count-text_padding_0 {
  padding: 0;
}

.list__footer {
  padding-top: 30px;
  box-sizing: border-box;
  border-top: solid 1px var(--color-light-blue);
}

/**
 * When the list is empty.
 *
 * 1. For height flow.
 *
 * @element empty
 */
.list__empty {
  height: 100%; /* 1 */
  box-sizing: border-box;
}
@media (min-width: 48em) {
  .list__empty {
    padding-top: 30px;
  }
}
@media (max-width: 47.99em) {
  .list__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/**
 * @element empty-content
 */
.list__empty-content {
  background: var(--svg-no-employees) center 0 no-repeat;
  background-size: 36px 40px;
  text-align: center;
  justify-content: center;
  padding: 70px 15px 40px;
  /**
   * @modifier type
   * @value search
   */
  /**
   * @for empty-content
   */
}
.list__empty-content_type_search {
  background-image: var(--svg-search);
  background-size: 37px 38px;
}
.list__empty-content_type_prospect {
  background-image: url("/assets/images/themes/blue/icons/prospect.svg");
  background-size: 44px 36px;
  background-repeat: no-repeat;
  background-position: top;
}
.list__empty-content_type_tasks {
  background-image: url("/assets/images/themes/blue/icons/tasks.svg");
  background-size: 35px 29px;
  background-repeat: no-repeat;
  background-position: top;
}
.list__empty-content_type_employers {
  background-image: var(--svg-group);
  background-size: 65px 55px;
}
.list__empty-content_type_individuals {
  background-image: var(--svg-employee);
  background-size: 65px 50px;
}
.list__empty-content_type_invite {
  background-image: var(--svg-invite);
  background-size: 28px 36px;
}
.list__empty-content_has-small-padding {
  padding: 40px 15px 20px;
}

.list__middle-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  height: 100%;
}

.list__middle-text {
  text-align: center;
}

/**
 * @element empty-action
 */
.list__empty-action {
  padding-top: 50px;
}

.list__employees-icon {
  width: 24px;
  height: 16px;
  background: var(--svg-employees) center no-repeat;
  margin-bottom: 8px;
}

/**
 * When actions are moved to the bottom (only) on mobile.
 *
 * @element bottom-actions
 */
.list__bottom-actions {
  /**
   * @modifier type
   * @value fixed
   */
}
@media (max-width: 47.99em) {
  .list__bottom-actions {
    display: flex;
    background: #FFF;
    border-top: solid 1px var(--color-light-blue);
  }
}
@media (min-width: 48em) {
  .list__bottom-actions {
    display: none;
  }
}
.list__bottom-actions_type_fixed {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/**
 * @element bottom-action
 */
.list__bottom-action {
  height: 45px;
  flex: 1;
}

.list_is-header-large .list__navigation-header,
.list_is-header-large .list__actions {
  height: 60px;
}

@media (min-width: 48em) {
  .list:not(.list_is-content-wide):not(.list_is-full) .list__detail {
    display: block;
  }
  .list:not(.list_is-content-wide):not(.list_is-full) .list__detail_is-flex {
    display: flex;
    flex-direction: column;
  }
  .list:not(.list_is-content-wide):not(.list_is-full) .list__navigation {
    width: 300px;
    transition: width 0.3s ease;
    flex-shrink: 0; /* 1 */
    border-right: solid 1px var(--color-light-blue);
  }
}
@media (min-width: 48em) and (min-width: 64em) {
  .list:not(.list_is-content-wide):not(.list_is-full) .list__navigation_desktop-width_wider {
    width: 360px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .list:not(.list_is-content-wide):not(.list_is-full) .list__navigation_until-desktop-plus-width_250 {
    width: 250px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .list:not(.list_is-content-wide):not(.list_is-full) .list__navigation_tablet-width_258 {
    width: 258px;
  }
}
@media (min-width: 48em) {
  .list:not(.list_is-content-wide):not(.list_is-full) .list__navigation_width_240 {
    width: 240px;
  }
  .list:not(.list_is-content-wide):not(.list_is-full) .list__navigation_is-collapsed {
    width: 55px;
  }
}
@media (max-width: 47.99em) {
  .list:not(.list_is-content-wide):not(.list_is-full) {
    /**
     * Show the detail view on mobile (and hide the list).
     *
     * @modifier view
     * @value detail
     */
  }
  .list:not(.list_is-content-wide):not(.list_is-full) .list__navigation {
    flex: 1;
  }
  .list:not(.list_is-content-wide):not(.list_is-full).list_view_detail .list__detail {
    display: flex;
    flex-direction: column;
  }
  .list:not(.list_is-content-wide):not(.list_is-full).list_view_detail .list__placeholder {
    flex: 1;
    height: auto;
  }
  .list:not(.list_is-content-wide):not(.list_is-full).list_view_detail .list__navigation {
    display: none;
  }
}

@media (min-width: 64em) {
  .list_is-content-wide .list__detail {
    display: block;
  }
  .list_is-content-wide .list__detail_is-flex {
    display: flex;
    flex-direction: column;
  }
  .list_is-content-wide .list__navigation {
    width: 300px;
    transition: width 0.3s ease;
    flex-shrink: 0; /* 1 */
    border-right: solid 1px var(--color-light-blue);
  }
}
@media (min-width: 64em) and (min-width: 64em) {
  .list_is-content-wide .list__navigation_desktop-width_wider {
    width: 360px;
  }
}
@media (min-width: 64em) and (max-width: 81.24em) {
  .list_is-content-wide .list__navigation_until-desktop-plus-width_250 {
    width: 250px;
  }
}
@media (min-width: 64em) and (max-width: 63.99em) {
  .list_is-content-wide .list__navigation_tablet-width_258 {
    width: 258px;
  }
}
@media (min-width: 64em) {
  .list_is-content-wide .list__navigation_width_240 {
    width: 240px;
  }
  .list_is-content-wide .list__navigation_is-collapsed {
    width: 55px;
  }
}
@media (max-width: 63.99em) {
  .list_is-content-wide {
    /**
     * Show the detail view on mobile (and hide the list).
     *
     * @modifier view
     * @value detail
     */
  }
  .list_is-content-wide .list__navigation {
    flex: 1;
  }
  .list_is-content-wide.list_view_detail .list__detail {
    display: flex;
    flex-direction: column;
  }
  .list_is-content-wide.list_view_detail .list__placeholder {
    flex: 1;
    height: auto;
  }
  .list_is-content-wide.list_view_detail .list__navigation {
    display: none;
  }
}

.list__select-year-container {
  padding-top: 20px;
}
@media (min-width: 64em) {
  .list__select-year-container {
    padding-left: 35px;
    padding-right: 35px;
  }
}
@media (max-width: 63.99em) {
  .list__select-year-container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.list__info-section {
  background-color: #F8F8F8;
  padding: 15px 20px;
}

.list__field {
  height: 70px;
}

.list__mobile-select-year-container {
  height: 100%;
  background-color: #F8F8F8;
  padding: 20px 20px;
}

.list__select-year-text {
  margin-bottom: 15px;
}

.list__selected-year-text {
  font-size: 14px;
  color: #B7B7B7;
  margin-bottom: 15px;
}

.list__select-employees-text {
  margin-bottom: 10px;
}

.list__selected-employees {
  height: 100%;
  background-color: #F8F8F8;
}

.list__selected-year-container {
  display: flex;
  flex-direction: column;
  padding: 15px 0 10px 20px;
  border-bottom: solid thin var(--main-color-light-6);
}

.list__checkbox-container {
  height: auto;
  padding: 15px 0 15px 20px;
}

/**
 * Loading placeholder that usually replaces text before it loads.
 *
 * You can set the width directly as style.
 *
 * @block loading-mask
 */
.loading-mask {
  height: 20px;
  display: block;
  border-radius: 10px;
  background-color: #E4E4E4;
  background-image: linear-gradient(to right, #E4E4E4 0%, #F4F4F4 35%, #E4E4E4 65%, #E4E4E4 100%);
  background-repeat: no-repeat;
  background-size: 700px 700px;
  animation: 3s linear infinite loading-mask__animation;
  /**
   * Used for example to show a loading label.
   *
   * @modifier color
   * @value blue
   */
  /**
   * @modifier type
   * @value thin
   * @for loading-mask
   */
  /**
   * @modifier with-corners
   */
}
.loading-mask_inline {
  display: inline-block;
}
.loading-mask_color_blue {
  background-color: #EFF4F5;
  background-image: linear-gradient(to right, #EFF4F5 0%, #DEEBEC 35%, #EFF4F5 65%, #EFF4F5 100%);
}
.loading-mask_color_dark-blue {
  background-color: #E2E9F1;
  background-image: linear-gradient(to right, #E2E9F1 0%, #DEEBEC 35%, #E2E9F1 65%, #E2E9F1 100%);
}
.loading-mask_color_darker-blue {
  background-color: #C7D6E7;
  background-image: linear-gradient(to right, #C7D6E7 0%, #DEEBEC 35%, #C7D6E7 65%, #C7D6E7 100%);
}
.loading-mask_color_grey {
  background-color: #DADADA;
  background-image: linear-gradient(to right, #DADADA 0%, #F4F4F4 35%, #DADADA 65%, #DADADA 100%);
}
.loading-mask_color_red {
  background-color: #F4DCD9;
  background-image: linear-gradient(to right, #EEE0DF 0%, #F0DFDD 35%, #F2DDDB 65%, #F4DCD9 100%);
}
.loading-mask_color_green {
  background-color: #DBEFF2;
  background-image: linear-gradient(to right, #DBEFF2 0%, #EDF7F9 35%, #DBEFF2 65%, #DBEFF2 100%);
}
.loading-mask_type_thin {
  height: 10px;
}
.loading-mask_type_moderate {
  height: 12px;
}
.loading-mask_type_medium {
  height: 15px;
}
.loading-mask_with-corners {
  border-radius: 0;
}
.loading-mask_border-radius_20 {
  border-radius: 20px;
}

@keyframes loading-mask__animation {
  from {
    background-position: -400px 0;
  }
  to {
    background-position: 400px 0;
  }
}
/**
 * The welcome page. This page is a container for the login form, or password
 * recovery form, or user locked message, etc.
 *
 * 1. Make it scrollable when the text overflows (on mobile) so we can disable
 * it when modal is open.
 *
 * 2. Welcome text comes after the login form in the html, but is shown to the left
 * on the desktop breakpoint.
 *
 * @block login-page
 */
.login-page {
  overflow: auto; /* 1 */
  height: 100%; /* 1 */
  display: flex;
  flex-direction: column;
  /**
   * 1. This removes the scroll from the body
   * when a modal is open.
   *
   * @element content
   */
}
@media (min-width: 64em) {
  .login-page {
    flex-direction: row-reverse; /* 2 */
  }
}
.login-page_is-modal-open {
  overflow: hidden; /* [1] */
}

/**
 * The welcome text section. Contains the (multiple) backgrounds and
 * the welcome title and text.
 *
 * 1. It can't be bigger than the background image.
 *
 * @element welcome
 */
.login-page__welcome {
  position: relative;
  flex: 1;
}
@media (min-width: 64em) {
  .login-page__welcome {
    flex: 3;
    height: 100%;
    overflow-y: scroll;
    max-width: 820px; /* 1 */
  }
}

/**
 * Contains the welcome text (centered vertically).
 *
 * 1. Fill the page if the text is not long enough.
 *
 * 2. The blurring of the content background color extends to outside the div
 * borders therefore overflow hidden is needed to keep a strict border.
 *
 * @element welcome-content
 */
.login-page__welcome-content {
  min-height: 100%; /* 1 */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden; /* [2] */
}
@media (min-width: 64em) {
  .login-page__welcome-content {
    box-sizing: border-box;
  }
}

/**
 * 1. In front of the background (welcome-bg).
 *
 * @element tiles
 */
.login-page__tiles {
  z-index: 2; /* 1 */
  position: relative;
  margin-bottom: 30px;
  width: 100%;
}
@media (max-width: 31.24em) {
  .login-page__tiles {
    margin-bottom: 0;
    margin-top: 20px; /* 2 */
  }
}

/**
 * Contains the actual welcome text.
 *
 * 1. In front of the background (welcome-bg).
 *
 * @element welcome-content-text
 */
.login-page__welcome-content-text {
  flex: 1;
  position: relative; /* 1 */
  z-index: 2; /* 1 */
  padding: 30px 70px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /**
   * We have to use the wildcard and `!important` because we have no control
   * over the html that arrives from the API.
   */
  /**
   * Needed to set a minimum height for < desktop breakpoints, otherwise, if
   * there's not text yet it won't have a height.
   *
   * @modifier is-loading
   */
}
.login-page__welcome-content-text * {
  /* stylelint-disable declaration-no-important  */
  font-family: "Source Sans Pro", sans-serif !important;
  color: #FFF !important;
  /* stylelint-enable */
}
.login-page__welcome-content-text_is-loading {
  min-height: 300px;
}

/**
 * Contains the welcome page backgrounds. Consists of a semi-transparent
 * background fill in front of an image. The image needs to blurred too.
 *
 * 1. Image needs to be behind the background fill.
 *
 * 3. The fill can't have full opacity or the image behind it won't be visible.
 *
 * @element welcome-bg
 */
.login-page__welcome-bg {
  background: url("/assets/images/welcome-background-5a00cccd02c3fe1c2d6b649812742006.png") top left no-repeat;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  filter: blur(4px);
  z-index: 1; /* 1 */
}
.login-page__welcome-bg:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* 1 */
  content: "";
  background-color: rgba(18, 151, 172, 0.82); /* 3 */
}

/**
 * The login form or any other child route.
 *
 * 1. Takes two-thirds the of the page width.
 * 2. For the liquid fire animation to work
 * 3. Smoothens scroll in webkit browsers (chrome/safari)
 *
 * @element form
 */
.login-page__form {
  position: relative;
  -webkit-overflow-scrolling: touch; /* 3 */
}
@media (min-width: 64em) {
  .login-page__form {
    flex: 2; /* 1 */
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.login-page__form > .liquid-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 20em) and (max-width: 47.99em) {
  .login-page__form > .liquid-container {
    padding: 30px 0;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .login-page__form > .liquid-container {
    padding: 60px 0;
  }
}
@media (min-width: 64em) {
  .login-page__form > .liquid-container {
    min-height: calc(100% - 230px);
    padding: 30px 70px 0;
    box-sizing: border-box;
  }
}
.login-page__form > .liquid-container > .liquid-child {
  width: 100%;
}

/**
 * @element form-footer
 */
.login-page__form-footer {
  height: 180px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 0 23px 23px;
  align-items: flex-end;
  flex-shrink: 0;
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .login-page__form-footer {
    margin-bottom: 25px;
  }
}

/**
 * 1. Height is needed for its sibling (below it) to calculate its percentage height correctly.
 * However, we use min-height (instead of height) because we don't know how many
 * links this will contain, and if it ever overflows (greater than the given height),
 * we'd rather have a scrollbar on the child than this element overflowing from the
 * top of the screen.
 *
 * @element form-links
 */
.login-page__form-links {
  min-height: 50px; /* 1 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-right: 23px;
  padding-left: 23px;
}

.login-page__copyright {
  flex: 1;
}

/**
 * @element contact
 */
.login-page__contact {
  text-align: right;
  flex: 2;
}
@media screen and (min-width: 1020px) and (max-width: 1215px) {
  .login-page__contact {
    flex: 3;
  }
}

/**
 * @element contact-text
 */
.login-page__contact-text {
  margin-top: 10px;
  font-size: 12px;
  color: #B0A7A8;
  /**
   * @modifier location
   * @value footer
   */
}
.login-page__contact-text_location_footer {
  margin-top: 14px;
  text-align: center;
  color: #FFF;
  font-size: 13px;
}

/**
 * @element footer
 */
.login-page__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 30px;
  z-index: 1;
  position: relative;
}

.login-page__copyright {
  flex: 2;
}

.login-page__image_is-simon {
  width: 150px;
  height: 36px;
}

/**
 * @element footer-contact
 */
.login-page__footer-contact {
  margin: 55px 0 35px;
  text-align: center;
}

/**
 * @element contact-btn
 */
.login-page__contact-btn {
  text-transform: uppercase;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  color: #1297AC;
  font-size: 11px;
}
.login-page__contact-btn:hover {
  color: #0D7383;
}
@media (max-width: 47.99em) {
  .login-page__contact-btn {
    color: #FFF;
    text-decoration: underline;
  }
  .login-page__contact-btn:hover {
    color: #FFF;
  }
}

.login-powered-by {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-powered-by__logo-container {
  display: flex;
  margin-bottom: 25px;
}
@media (max-width: 47.99em) {
  .login-powered-by__logo-container {
    flex-direction: column;
    margin-bottom: 0;
  }
}

.login-powered-by__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 48em) {
  .login-powered-by__logo {
    justify-content: flex-end;
    padding: 0 20px;
  }
  .login-powered-by__logo:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.5);
  }
}
@media (max-width: 47.99em) {
  .login-powered-by__logo {
    padding-bottom: 35px;
  }
}

.login-powered-by__logo-powered-by-text {
  color: #FFF;
  font-size: 13px;
  margin-bottom: 5px;
}
@media (max-width: 47.99em) {
  .login-powered-by__logo-powered-by-text {
    margin: 10px 0 26px;
  }
}

.login-powered-by__copyright-container {
  margin: 0 50px;
}

.login-powered-by__copyright-text {
  color: #FFF;
  font-size: 12px;
}

.login-powered-by__image_is-vimly {
  width: 220px;
  height: 64px;
}
@media (max-width: 47.99em) {
  .login-powered-by__image_is-vimly {
    width: 145px;
    height: 44px;
  }
}
.login-powered-by__image_is-hitrust {
  width: 150px;
  height: 72px;
}
.login-powered-by__image_is-simon {
  width: 100px;
  height: 24px;
}

/**
 * @block login
 *
 * The login page.
 *
 * login
 * |-box
 * |--logo
 * |---logo-image
 * |--content
 * |---fields
 * |---actions
 * |----submit
 * |----forgot
*/
.login {
  /**
   * Shake the box (to indicate invalid username/password)
   *
   * @modifier is-shaking
   */
}
.login_is-shaking {
  overflow: hidden;
}
.login_is-shaking .login__box {
  /**
   * If you change this make sure to change
   * the delay duration in the login controller
  */
  animation: login__shake 0.8s;
  animation-fill-mode: both;
}

/**
 * @element box
 */
.login__box {
  position: relative;
  padding: 0 10px 10px;
  max-width: 600px;
  margin: auto;
}
@media (max-width: 47.99em) {
  .login__box_mobile-side-padding_20 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/**
 * @element logo
 */
.login__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
}

/**
 * @element register
 */
.login__register {
  font-size: 13px;
  color: #5C5050;
  text-align: center;
  margin: 40px 0 20px;
}

/**
 * @element logo-image
 */
.login__logo-image {
  max-width: 215px;
  max-height: 100%;
}

/**
 * @element title
 */
.login__title {
  font-size: 30px;
  font-weight: 300;
  color: #0D7383;
  text-align: center;
  padding-top: 25px;
}
.login__title_is-paddingless {
  padding-top: 0;
}

/**
 * @element description
 */
.login__description {
  font-size: 16px;
  text-align: center;
  padding-top: 15px;
}

/**
 * @element fields
 */
.login__fields {
  padding: 25px 0 0;
}

/**
 * @element field-row
 */
.login__field-row {
  display: flex;
  justify-content: space-between;
}

/**
 * @element field
 */
.login__field {
  height: 70px;
  /**
   * @modifier is-flex
   */
}
.login__field_is-flex {
  flex: 1;
}
.login__field_is-flex:first-child {
  margin-right: 6px;
}
.login__field_is-flex:last-child {
  margin-left: 6px;
}
.login__field_has-padding-bottom {
  padding-bottom: 14px;
}

/**
 * 1. To align error over field border.
 *
 * @element field-error
 */
.login__field-error {
  margin-top: -1px; /* 1 */
  margin-bottom: 8px;
}

/**
 * @element field-hint
 */
.login__field-hint {
  margin-bottom: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  color: #B0A7A8;
}

.login__forgot {
  color: #B0A7A8;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  text-decoration: underline;
}
.login__forgot:hover:enabled, .login__forgot:focus {
  color: #0D7383;
}
.login__forgot:active {
  color: #1297AC;
}
.login__forgot:disabled {
  opacity: 0.5;
  cursor: default;
}

.login__forgot-text {
  color: #B0A7A8;
  font-size: 12px;
  margin-right: 5px;
}

.login__forgot-container {
  display: flex;
  margin-top: 7px;
}

.login__hourglass {
  margin-left: 6px;
  margin-top: 1px;
}

/**
 * @element actions
 */
.login__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 47.99em) {
  .login__actions {
    flex-direction: column-reverse;
    justify-content: space-between;
    height: 80px;
  }
  .login__actions_height_large {
    height: 200px;
  }
}
@media (min-width: 48em) {
  .login__actions_is-flex-end {
    justify-content: flex-end;
  }
}
.login__actions_has-padding-top {
  padding-top: 38px;
}
.login__actions_padding-top_50 {
  padding-top: 50px;
}
.login__actions_padding-top_15 {
  padding-top: 15px;
}

/**
 * @element submit
 */
.login__submit {
  display: inline-block;
  min-width: 160px;
}
.login__submit_has-left-padding {
  padding-left: 14px;
}
@media (min-width: 64em) {
  .login__submit_from-desktop-margin-left_10 {
    margin-left: 10px;
  }
}
.login__submit_min-width_0 {
  min-width: 0;
}
@media (min-width: 48em) {
  .login__submit_from-tablet-margin-left_auto {
    margin-left: auto;
  }
}
.login__submit_display_flex {
  display: flex;
}
.login__submit_flex-shrink_0 {
  flex-shrink: 0;
}

.login__description {
  text-align: center;
}

.login__action-buttons {
  display: flex;
}
@media (max-width: 47.99em) {
  .login__action-buttons {
    width: 100%;
    justify-content: space-between;
  }
}

/**
 * Contains the list of errors.
 *
 * @element errors
 */
.login__errors {
  min-height: 19px;
  padding: 10px 0;
}

/**
 * One error item.
 *
 * @element error-item
 */
.login__error-item {
  padding-left: 25px;
  background: url("/assets/images/error-exclamation.svg") top left no-repeat;
  background-size: 18px 18px;
  color: #D57F73;
  font-size: 14px;
  animation: login__fade-in 0.8s;
}

/**
 * Shown when the user locked out of their account due to multiple failed
 * attempts.
 *
 * @element lock
 */
.login__card {
  background: #FFF;
  margin-top: 36px;
  border: solid 1px;
  padding: 75px 5px 35px;
  max-width: 580px;
  position: relative;
  text-align: center;
}
@media (min-width: 48em) {
  .login__card {
    padding-left: 50px;
    padding-right: 50px;
  }
}
.login__card:after {
  content: "";
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 21px;
  height: 28px;
  background-position: center center;
  background-repeat: no-repeat;
}

/**
 * @element lock-title
 */
.login__card-title {
  font-size: 20px;
  padding-bottom: 15px;
}

/**
 * @element lock-body
 */
.login__card-body {
  font-size: 16px;
}

/**
 * @element lock-actions
 */
.login__card-actions {
  display: flex;
  justify-content: center;
  margin-top: 45px;
  align-items: center;
}
.login__card-actions_has-return {
  justify-content: space-between;
}
.login__card-actions_margin-top_30 {
  margin-top: 30px;
}

.login__card_type_lock {
  border-color: #D57F73;
}
.login__card_type_lock:after {
  background-image: url("/assets/images/login-user-lock.svg");
}
.login__card_type_lock .login__card-title {
  color: #D57F73;
}

/**
 * @modifier type
 * @value inbox
 * @for card
 */
.login__card_type_inbox {
  animation: login__zoom-in 0.8s;
  border-color: #0D7383;
}
.login__card_type_inbox:after {
  background-image: url("/assets/images/login-inbox.svg");
}
.login__card_type_inbox .login__card-title {
  color: #0D7383;
}

.login__row-container {
  padding-bottom: 14px;
}

.login__authenticators {
  margin: 25px 0 20px;
}

.login__authenticator:not(:last-child) {
  margin-bottom: 10px;
}

.login__timer {
  color: #B0A7A8;
  font-size: 13px;
  font-style: italic;
  padding: 5px 0;
}

@media (max-width: 47.99em) {
  .login__action-buttons-container {
    width: 100%;
  }
}

@media (min-width: 64em) and (max-width: 89.0525em) {
  .login__actions_desktop_column {
    flex-direction: column-reverse;
  }
  .login__submit_has-padding-bottom {
    padding-bottom: 15px;
  }
  .login__submit_has-left-padding {
    padding-left: 0;
  }
  .login__action-buttons {
    width: 100%;
    justify-content: space-between;
  }
  .login__action-buttons-container {
    width: 100%;
  }
}
.login__check-icon {
  background-image: url("/assets/images/icons/round-check.svg");
  width: 11px;
  height: 11px;
}

@keyframes login__zoom-in {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes login__shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}
@keyframes login__fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.mobile-actions {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
}

.mobile-actions__header {
  background-color: #FFFFFF;
  color: #494949;
  font-size: 16px;
  font-weight: 700;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #C8D8D8;
  box-sizing: border-box;
}

.mobile-actions__content {
  background: #F8F8F8;
  padding: 20px 20px 25px;
  overflow: auto;
}

.mobile-actions__action-container {
  padding-bottom: 30px;
}
.mobile-actions__action-container_has-border-top {
  border-top: 1px solid #EAEAEA;
}
.mobile-actions__action-container_padding-top_30 {
  padding-top: 30px;
}
.mobile-actions__action-container_icon_add {
  display: flex;
  align-items: center;
}
.mobile-actions__action-container_icon_add::before {
  content: "";
  height: 20px;
  width: 14px;
  background-image: var(--svg-plus);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 7px 7px;
}

.mobile-actions__cancel-action-container {
  padding-top: 30px;
  border-top: 1px solid #EAEAEA;
}

.mobile-actions__button {
  color: #1297AC;
}
.mobile-actions__button_color_red {
  color: var(--color-red);
}
.mobile-actions__button_color_grey {
  color: #95989A;
}

/**
 * The menu item that contains the link and other sublinks.
 *
 * @block main-menu-item
 */
.main-menu-item {
  display: block;
}
.main-menu-item.main-menu-item_is-item-group .main-menu-item__link_type_employers::before {
  background-image: url("/assets/images/themes/blue/icons/agency-grey.svg");
}

.main-menu-item__link {
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 48px;
  text-transform: uppercase;
  padding-left: 18px;
  cursor: pointer;
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: solid 3px transparent;
  /**
   * @modifier is-active
   */
  /**
   * @for link
   */
  /**
   * @for link
   */
  /**
   * @modifier type
   * @value employees
   */
  /**
   * @modifier type
   * @value reporting
   */
  /**
   * @modifier type
   * @value manage-users
   */
  /**
   * @modifier type
   * @value alerts
   */
  /**
   * @for link
   */
  /**
   * @modifier type
   * @value settings
   */
  /**
   * @for link
   */
  /**
   * @for link
   */
  /**
   * @for link
   */
  /**
   * @for link
   */
  /**
   * @for link
   */
  /**
   * @for link
   */
  /**
   * @for link
   */
  /**
   * @for link
   */
  /**
   * @for link
   */
  /**
   * @for link
   */
}
.main-menu-item__link::before {
  content: "";
  width: 12px;
  height: 15px;
  margin-right: 10px;
  transition: transform 300ms ease;
  background-repeat: no-repeat;
  background-position: center;
}
.main-menu-item__link_is-disabled {
  pointer-events: none;
  cursor: default;
}
.main-menu-item__link:hover {
  background-color: var(--main-menu-link-color-hover);
}
.main-menu-item__link:hover:before {
  transform: scale(1.3);
}
.main-menu-item__link_is-active {
  border-left: solid 3px var(--main-color);
  background-color: var(--main-menu-color);
}
@supports not (zoom: 1) {
  .main-menu-item__link_is-preview {
    height: 36px;
    font-size: 8.25px;
  }
  .main-menu-item__link_is-preview::before {
    width: 9px;
    height: 11.25px;
  }
}
.main-menu-item__link_type_dashboard::before {
  background-image: var(--svg-dashboard);
}
.main-menu-item__link_type_my-plan::before {
  background-image: var(--svg-dashboard);
}
.main-menu-item__link_type_my-claims::before {
  background-size: 11px 13px;
  background-image: var(--svg-statement);
}
.main-menu-item__link_type_my-statement::before {
  background-image: var(--svg-money);
}
.main-menu-item__link_type_employees::before {
  background-image: var(--svg-employees);
}
.main-menu-item__link_type_billing::before, .main-menu-item__link_type_summary::before, .main-menu-item__link_type_history::before {
  background-size: 11px 8px;
  background-image: var(--svg-billing);
}
.main-menu-item__link_type_reporting::before {
  background-image: var(--svg-reporting);
}
.main-menu-item__link_type_manage-users::before {
  background-image: var(--svg-self-service);
}
.main-menu-item__link_type_alerts::before {
  background-image: var(--svg-alerts);
}
.main-menu-item__link_type_resources::before, .main-menu-item__link_type_documents::before {
  background-image: var(--svg-documents);
  background-size: 12px 12px;
}
.main-menu-item__link_type_settings::before {
  background-image: var(--svg-settings);
}
.main-menu-item__link_type_my-details::before {
  background-image: var(--svg-employee-main-menu);
  background-size: 11px 11px;
}
.main-menu-item__link_type_my-dependents::before {
  background-image: var(--svg-employees);
  background-size: 13px 13px;
}
.main-menu-item__link_type_benefits::before, .main-menu-item__link_type_my-benefits::before {
  background-image: var(--svg-heart);
  background-size: 11px 11px;
}
.main-menu-item__link_type_my-beneficiaries::before {
  background-image: var(--svg-beneficiaries);
  background-size: 17px 8px;
}
.main-menu-item__link_type_sub-link::before {
  border-radius: 50%;
  background-color: var(--main-color);
}
.main-menu-item__link_type_prospects::before {
  background-image: url("/assets/images/themes/blue/icons/prospects.svg");
}
.main-menu-item__link_type_clients::before {
  background-image: url("/assets/images/themes/blue/icons/clients.svg");
}
.main-menu-item__link_type_quotes::before {
  background-image: url("/assets/images/themes/blue/icons/quotes.svg");
}
.main-menu-item__link_type_messages::before {
  background-image: url("/assets/images/themes/blue/icons/messages.svg");
}
.main-menu-item__link_type_reports::before {
  background-image: url("/assets/images/themes/blue/icons/reports.svg");
}
.main-menu-item__link_type_agencies::before {
  background-image: url("/assets/images/themes/blue/icons/agency.svg");
}
.main-menu-item__link_type_brokers::before {
  background-image: url("/assets/images/themes/blue/icons/broker.svg");
}
.main-menu-item__link_type_employers::before {
  background-image: url("/assets/images/themes/blue/icons/employer.svg");
}
.main-menu-item__link_type_renewals::before {
  background-image: url("/assets/images/themes/blue/icons/renewals.svg");
  background-size: 12px 13px;
}
.main-menu-item__link_type_tasks::before {
  background-image: url("/assets/images/themes/blue/icons/tasks.svg");
  background-size: 12px 10px;
}
.main-menu-item__link_type_notes::before {
  background-image: var(--svg-notes);
  width: 15px;
  background-size: 14px 13px;
}
.main-menu-item__link_type_applications::before {
  background-image: url("/assets/images/themes/blue/icons/applications.svg");
  background-size: 12px 15px;
}
.main-menu-item__link_type_rate-sheets::before {
  background-image: url("/assets/images/themes/blue/icons/rate-sheets.svg");
}

.main-menu-item__tooltip {
  height: 32px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  background-color: var(--main-menu-item-color);
  position: relative;
  border-radius: 5px;
  font-size: 13px;
  text-transform: uppercase;
}
.main-menu-item__tooltip::before {
  position: absolute;
  left: -5px;
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid var(--main-menu-item-color);
}

.main-menu-item__text {
  font-family: "Montserrat", sans-serif;
}

.main-menu-item__text_has-indicator {
  display: inline-block;
  margin-right: 5px;
}

.main-menu-item_is-lighter-color .main-menu-item__link {
  font-size: 12px;
  background-color: var(--main-menu-lighter-color);
}
.main-menu-item_is-lighter-color .main-menu-item__link_is-active {
  border: none;
}
.main-menu-item_is-lighter-color .main-menu-item__link:hover {
  background-color: var(--main-menu-lighter-header-color);
}
.main-menu-item_is-lighter-color .main-menu-item__sub-links {
  border-left: none;
}
.main-menu-item_is-lighter-color .main-menu-item_is-sub-link .main-menu-item__link:hover, .main-menu-item_is-lighter-color .main-menu-item_is-sub-link .main-menu-item__link_is-active {
  font-weight: bold;
  background-color: var(--main-menu-lighter-header-color);
  color: var(--main-color);
}

.main-menu-item__sub-links {
  transition: all 0.3s ease;
  border-left: solid 3px var(--main-color);
  background-color: var(--main-background-color-2);
}

.main-menu-item_is-sub-link {
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.main-menu-item_is-sub-link .main-menu-item__link {
  text-transform: capitalize;
  font-weight: 400;
  border-left: none;
}
.main-menu-item_is-sub-link .main-menu-item__link_is-active {
  color: var(--main-color-dark-2);
}
.main-menu-item_is-sub-link .main-menu-item__link:hover {
  color: var(--main-color-dark-2);
  background-color: var(--main-color-light-14);
}

.main-menu-item_is-inside-group .main-menu-item__link {
  padding-left: 38px;
  text-transform: capitalize;
  font-size: 12px;
}

.main-menu-item__indicator {
  margin-left: 5px;
}

.main-menu-item_is-collapsed {
  position: relative;
}
.main-menu-item_is-collapsed .main-menu-item__link {
  padding: 0;
  justify-content: center;
  font-size: 0;
}
.main-menu-item_is-collapsed .main-menu-item__link::before {
  width: 14px;
  height: 17px;
  margin-right: 0;
  transition: all 300ms ease;
}
.main-menu-item_is-collapsed .main-menu-item__link_type_sub-link::before {
  width: 6px;
  height: 6px;
}
.main-menu-item_is-collapsed .main-menu-item__indicator {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  margin-left: 0;
}

/**
 * @block main-menu
 *
 * 1. Needed to limit height in order for
 * scrolling to apply.
 */
.main-menu {
  height: 100%; /* [1] */
  width: 100%;
  display: flex; /* [1] */
  flex-direction: column; /* [1] */
  background-color: var(--main-menu-color);
}
@supports not (zoom: 1) {
  .main-menu_is-preview .main-menu__logo-image {
    max-height: calc(75% - 20px);
    max-width: 115px;
  }
  .main-menu_is-preview .main-menu__employer-name {
    font-size: 12px;
  }
  .main-menu_is-preview .main-menu__logo-holder {
    height: 60px;
  }
  .main-menu_is-preview .main-menu__header {
    min-height: 90px;
  }
}

/**
 * Contains the logo and close button on small
 * screens.
 *
 * @element header
 */
.main-menu__header {
  background-color: var(--main-menu-color);
  padding-left: 20px;
  padding-right: 20px;
  min-height: 120px;
  box-sizing: border-box;
  width: 100%;
  transition: width 300ms linear;
  position: relative;
}

.main-menu__expander {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: pointer;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  transition: background-color 100ms linear;
  /**
   * Used to preload image.
   */
}
.main-menu__expander::after {
  width: 8px;
  height: 8px;
  transform: rotate(180deg);
  background: var(--svg-left-arrow) center no-repeat;
  content: "";
}
.main-menu__expander::before {
  content: "";
  background: url("/assets/images/icons/arrow-left-white.svg") center no-repeat;
}
.main-menu__expander:hover {
  background-color: var(--main-color);
}
.main-menu__expander:hover::after {
  background: url("/assets/images/icons/arrow-left-white.svg") center no-repeat;
}

/**
 * 1. When expanding the menu, the text overlaps which causes the
 * header to jump/glitch. Transitioning the font fixes that by making
 * the space the text is taking smaller.
 *
 * @element employer-name
 */
.main-menu__employer-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  opacity: 1;
  transition: opacity 50ms linear 300ms, font-size 300ms ease; /* 1 */
}
.main-menu__employer-name_is-collapsed {
  font-size: 0;
  transition: none;
  opacity: 0;
}

/**
 * Contains the user name and navigation section.
 * Is the area the can be scrolled.
 *
 * 1. On IOS tablet the power by overlaps with the menu items,
 * we remove flex in order to fix that.
 *
 * 2. Removes horizontal scroll due to powered-by icon.
 *
 * @element scrollable
 */
.main-menu__scrollable {
  position: relative;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--main-menu-body-color);
  overflow-x: hidden; /* 2 */
}
@media screen and (max-height: 750px) {
  .main-menu__scrollable:not(.main-menu__scrollable_empty-nav) {
    display: block; /* 1 */
  }
}

.main-menu__divider {
  height: 5px;
  margin-left: 20px;
  margin-right: 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #C7D6E7;
}

/**
 * @element powered-by
 */
.main-menu__powered-by {
  padding: 25px;
}

/**
 * Contains the logo.
 *
 * 1. Limit requested by design. Higher than that is too much.
 *
 * @element logo-holder
 */
.main-menu__logo-holder {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 80px; /* 1 */
}

/**
 * We use max width and max height because we don't know anything about
 * the logo we're getting or its dimensions.
 *
 * @element logo-image
 */
.main-menu__logo-image {
  max-height: calc(100% - 20px);
  max-width: 153px;
}

.main-menu__viewing-as {
  padding: 10px 0 10px 22px;
  background-color: rgba(18, 151, 172, 0.1);
  margin-bottom: 12px;
}

.main-menu__employee-status {
  display: flex;
}

/**
 * Only displayed on small screens.
 */
.main-menu__close-container {
  position: relative;
  height: 15px;
  margin: 15px;
}

/**
 * Only displayed on small screens.
 *
 * @element close-sign
 */
.main-menu__close-sign {
  display: none;
  position: absolute;
  top: 0;
  right: -20px;
  width: 54px;
  height: 100%;
  cursor: pointer;
  content: "";
  background: url("/assets/images/icons/x-sign.svg") center no-repeat;
  background-size: 14px 14px;
}
.main-menu__close-sign:hover {
  opacity: 0.7;
}
.main-menu__close-sign:active {
  opacity: 0.4;
}

/**
 * Contains the user navigation options.
 * which includes the dashboard, employees, billings links etc.
 *
 * 1. Needed to push the powered by element to the bottom.
 *
 * @element nav
 */
.main-menu__nav {
  display: block;
  flex: 1; /* [1] */
}

/**
 * Button to open the contact form. Only needed on mobile.
 *
 * @element contact-support
 */
.main-menu__contact-support {
  margin: 20px auto 10px;
  width: 195px;
}

@media (max-width: 63.99em) {
  /**
   * @element close-sign
   */
  .main-menu__close-sign {
    display: block;
  }
}
.main-menu_is-lighter-color {
  background-color: var(--main-menu-lighter-color);
}
.main-menu_is-lighter-color .main-menu__header {
  background-color: var(--main-menu-lighter-header-color);
}
.main-menu_is-lighter-color .main-menu__expander:hover {
  background-color: var(--lighter-main-color);
}
.main-menu_is-lighter-color .main-menu__scrollable {
  background-color: var(--main-menu-lighter-color);
}

.main-menu_is-collapsed .main-menu__header {
  width: 100%;
  padding: 0;
}
.main-menu_is-collapsed .main-menu__contact-support {
  display: none;
}
.main-menu_is-collapsed .main-menu__powered-by {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  border-left: 3px solid transparent;
}

.manage-members-filter {
  display: flex;
}
@media (max-width: 87.49em) {
  .manage-members-filter_is-in-workflow {
    flex-direction: column;
  }
}
@media (max-width: 87.49em) {
  .manage-members-filter_is-in-workflow .manage-members-filter__split {
    margin: 4px 12px 0;
    border-bottom: 1px solid #E3EBEB;
  }
}
@media (min-width: 87.5em) {
  .manage-members-filter_is-in-workflow .manage-members-filter__split {
    border-right: 1px solid #E3EBEB;
  }
}
@media (min-width: 87.5em) {
  .manage-members-filter_is-in-workflow .manage-members-filter__section {
    padding: 15px 0;
  }
}
@media (max-width: 87.49em) {
  .manage-members-filter_is-in-workflow .manage-members-filter__section {
    padding: 15px 0 0;
  }
}
@media (max-width: 71.865em) {
  .manage-members-filter_is-in-page {
    flex-direction: column;
  }
}
@media (max-width: 71.865em) {
  .manage-members-filter_is-in-page .manage-members-filter__split {
    margin: 4px 12px 0;
    border-bottom: 1px solid #E3EBEB;
  }
}
@media (min-width: 71.875em) {
  .manage-members-filter_is-in-page .manage-members-filter__split {
    border-right: 1px solid #E3EBEB;
  }
}
@media (min-width: 71.875em) {
  .manage-members-filter_is-in-page .manage-members-filter__section {
    padding: 15px 0;
  }
}
@media (max-width: 71.865em) {
  .manage-members-filter_is-in-page .manage-members-filter__section {
    padding: 15px 0 0;
  }
}

.manage-members-filter__section {
  flex: 1;
}

.manage-members-filter__pair-container {
  position: relative;
  margin-bottom: 13px;
  padding-bottom: 4px;
  display: flex;
}
.manage-members-filter__pair-container:after {
  position: absolute;
  content: "";
  display: block;
  left: 12px;
  right: 12px;
  height: 1px;
  bottom: 0;
  background-color: #E3EBEB;
}

/**
 * @block menu-modal
 */
.menu-modal {
  height: 100%;
  position: relative;
}

/**
 * @element trigger
 */
.menu-modal__trigger {
  display: block;
  height: 100%;
  width: 100%;
}
.menu-modal__trigger_is-click-disabled {
  cursor: default;
}
.menu-modal__trigger_background_light-green {
  background-color: #B3DBE1;
  padding: 2px 6px;
  border-radius: 20%;
}
.menu-modal__trigger_height_auto {
  height: auto;
}

/**
 * Element inside the trigger, since the trigger is a button and doesn't
 * play nicely with `display: flex` on firefox.
 *
 * @element trigger-container
 */
.menu-modal__trigger-container {
  display: flex;
  height: 100%;
  width: 100%;
}
.menu-modal__trigger-container_is-centered {
  justify-content: center;
}

/**
 * Sometimes rendered outside the block in the DOM when using ember wormhole.
 * Don't style this as a child of a parent's modifier. Apply modifiers directly
 * to the element.
 *
 * 1. Since the menu-modal can be opened inside an x-modal
 * we have to make it visible.
 *
 * @element popup
 */
.menu-modal__popup {
  position: absolute;
  z-index: 12; /* [1] */
}

/**
 * 1. Needed when opened from InputField::Select
 **/
.menu-modal__popup_has-large-z-index {
  z-index: 13; /* [1] */
}

.manual-paginator-arrows {
  display: flex;
}

.manual-paginator-arrows__arrow {
  width: 30px;
  height: 30px;
  background-image: url("/assets/images/icons/arrow-right-white.svg");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-color: #1297AC;
  border-radius: 50%;
  background-size: 13px 13px;
}
.manual-paginator-arrows__arrow_direction_left {
  margin-right: 10px;
  background-image: url("/assets/images/icons/back-white.svg");
  background-position: 7px center;
}
.manual-paginator-arrows__arrow_has-no-background-color {
  background-color: inherit;
  background-image: url("/assets/images/icons/right-arrow-dark-grey.svg");
}
.manual-paginator-arrows__arrow_direction_left.manual-paginator-arrows__arrow_has-no-background-color {
  background-image: url("/assets/images/icons/left-arrow-dark-grey.svg");
}
.manual-paginator-arrows__arrow_is-disabled {
  background-color: #EAEAEA;
  background-image: url("/assets/images/icons/arrow-right-gray.svg");
  cursor: default;
}
.manual-paginator-arrows__arrow_direction_left.manual-paginator-arrows__arrow_is-disabled {
  background-image: url("/assets/images/icons/back-gray.svg");
}
.manual-paginator-arrows__arrow:hover.manual-paginator-arrows__arrow:not(.manual-paginator-arrows__arrow_is-disabled):not(.manual-paginator-arrows__arrow_has-no-background-color) {
  background-color: #0D7383;
}

/**
 * The Merp benefit options displayed in the calculator.
 *
 * @block merp-accelerated-benefits
 */
.merp-accelerated-benefits {
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
}

/**
 * @element title
 */
.merp-accelerated-benefits__title {
  display: flex;
  align-items: center;
  height: 20px;
  margin-bottom: 5px;
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  color: #1297AC;
}

/**
 * @element option
 */
.merp-accelerated-benefits__option {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #CBDADA;
  margin-bottom: 5px;
}
.merp-accelerated-benefits__option:last-child {
  border-bottom: none;
}

/**
 * @element row
 */
.merp-accelerated-benefits__row {
  display: flex;
  align-items: center;
  height: 30px;
}

/**
 * @element row-title
 */
.merp-accelerated-benefits__row-title {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  color: #1297AC;
  flex: 1;
  /**
   * @modifier has-tooltip
   * @for row-title
   */
}
.merp-accelerated-benefits__row-title_margin-right_3 {
  margin-right: 3px;
}
.merp-accelerated-benefits__row-title_is-bold {
  font-weight: 700;
}
.merp-accelerated-benefits__row-title_has-tooltip {
  margin-right: 5px;
  flex: none;
}

/**
 * @element row-amount
 */
.merp-accelerated-benefits__row-amount {
  color: #5C5050;
  font-size: 18px;
  font-weight: bold;
}

/**
 * Paginated Merp ASU history box.
 *
 * @block merp-asu-box
 */
.merp-asu-box {
  display: block;
}

/**
 * @element window
 */
.merp-asu-box__window {
  height: 240px;
  overflow: hidden;
}

/**
 * @element content
 */
.merp-asu-box__content {
  display: flex;
  flex-direction: column;
  transition: transform 400ms ease;
}

.merp-asu-box__asu-total {
  height: 40px;
  width: 100%;
  background-color: #EAEAEA;
}

.merp-asu-box__loading-header {
  height: 45px;
  background-color: #F8F8F8;
  display: flex;
  align-items: center;
}

.merp-asu-box__loading-total {
  height: 40px;
  display: flex;
  align-items: center;
  background-color: #EAEAEA;
}

.merp-asu-box__asu-total-title {
  font-size: 10px;
  color: #4A4A4A;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  flex: 1;
}

.merp-asu-box__total-count {
  color: var(--main-color);
  font-size: 20px;
  font-weight: 600;
}
.merp-asu-box__total-count_text-align_right {
  text-align: right;
}

.merp-asu-box__total-contribution {
  color: var(--main-color);
  font-size: 20px;
  text-align: right;
  font-weight: 700;
}

.merp-asu-box__table-row-loading {
  height: 60px;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/**
 * @element asu-title
 */
.merp-asu-box__asu-title {
  font-weight: bold;
  font-size: 16px;
  color: var(--color-dark-grey-2);
}
@media (max-width: 74.99em) {
  .merp-asu-box__asu-title {
    font-size: 14px;
  }
}

/**
 * @element asu-date
 */
.merp-asu-box__asu-date {
  font-size: 14px;
  color: #95989A;
}

.merp-asu-box__value {
  font-size: 18px;
  color: var(--color-dark-grey-2);
}
@media (max-width: 74.99em) {
  .merp-asu-box__value {
    font-size: 16px;
  }
}
.merp-asu-box__value_text-align_right {
  text-align: right;
}

.merp-asu-box__empty-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 270px;
}

.merp-asu-box__empty-clock {
  margin-bottom: 15px;
  width: 32px;
  height: 32px;
  background: var(--svg-clock) no-repeat center;
}

.merp-asu-box__empty-text {
  color: var(--main-color-dark-3);
  font-size: 18px;
  margin-top: 15px;
  text-align: center;
}
@media (max-width: 31.24em) {
  .merp-asu-box__empty-text {
    font-size: 13px;
  }
}

/**
 * A box than contains an input and button that is
 * used to calculate the retirement age.
 */
.merp-calculator-box {
  position: relative;
}

.merp-calculator-box__content {
  display: flex;
  flex-direction: column;
}

.merp-calculator-box__row {
  margin-bottom: 20px;
}
.merp-calculator-box__row_margin-bottom_0 {
  margin-bottom: 0;
}
.merp-calculator-box__row_margin-bottom_10 {
  margin-bottom: 10px;
}
.merp-calculator-box__row:last-child {
  margin-bottom: 0;
}

.merp-calculator-box__row-columns {
  display: flex;
  flex: 1;
}
@media (max-width: 31.24em) {
  .merp-calculator-box__row-columns {
    flex-direction: column;
  }
}

.merp-calculator-box__field {
  height: 70px;
  box-sizing: border-box;
  flex: 1;
  margin-top: 10px;
}
.merp-calculator-box__field_margin-right_10 {
  margin-right: 10px;
}
@media (max-width: 31.24em) {
  .merp-calculator-box__field_margin-right_10 {
    margin-right: 0;
  }
}

.merp-calculator-box__button {
  margin-left: 10px;
  max-width: 100px;
}

.merp-calculator-box__bottom-button {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
@media (max-width: 31.24em) {
  .merp-calculator-box__bottom-button {
    margin-top: 10px;
    justify-content: center;
  }
  .merp-calculator-box__bottom-button_margin-top_0 {
    margin-top: 0;
  }
}

.merp-calculator-box__checkbox {
  display: flex;
}

.merp-calculator-box__column {
  width: 50%;
}
.merp-calculator-box__column_width_100 {
  width: 100%;
}
@media (max-width: 31.24em) {
  .merp-calculator-box__column {
    width: 100%;
  }
}

/**
 * The calculations that contain the estimates
 * for the merp user.
 *
 * @block merp-calculator-estimate
 */
.merp-calculator-estimate {
  display: block;
}

/**
 * @element lifetime-estimate
 */
.merp-calculator-estimate__lifetime-estimate {
  display: flex;
  height: 20px;
  align-items: center;
  font-weight: 700;
  padding-left: 15px;
  padding-right: 15px;
}
.merp-calculator-estimate__lifetime-estimate_margin-top_21 {
  margin-top: 21px;
}

/**
 * @element lifetime-content
 */
.merp-calculator-estimate__lifetime-content {
  flex: 1;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}

/**
 * @element lifetime-title
 */
.merp-calculator-estimate__lifetime-title {
  color: #1297AC;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  margin-right: 5px;
}

/**
 * @element lifetime-amount
 */
.merp-calculator-estimate__lifetime-amount {
  margin-left: 20px;
  flex-shrink: 0;
  text-align: right;
  font-size: 18px;
  font-weight: bold;
}

/**
 * The merp calculator page.
 *
 * @block merp-calculator
 */
.merp-calculator {
  display: flex;
  flex-direction: column;
  padding: 25px;
  background-color: #FFF;
  border-radius: 5px;
  border: 1px solid #EFEFEF;
  min-height: 450px;
}

/**
 * @element description
 */
.merp-calculator__description {
  font-size: 14px;
  margin-bottom: 15px;
}

/**
 * @element fields
 */
.merp-calculator__fields {
  flex: 1;
  width: 100%;
}

/**
 * @element button
 */
.merp-calculator__button {
  margin-left: 10px;
  margin-top: 7px;
  display: flex;
  align-items: center;
  /**
   * @modifier is-centered
   */
}
.merp-calculator__button_is-centered {
  margin-bottom: 0;
}

/**
 * @element sections
 */
.merp-calculator__sections {
  display: flex;
}

/**
 * @element left-section
 */
.merp-calculator__left-section {
  flex: 1;
  margin-right: 25px;
  /**
   * @modifier is-alone
   * @for left-section
   */
}
.merp-calculator__left-section_is-alone {
  margin-right: 0;
}

/**
 * @element right-section
 */
.merp-calculator__right-section {
  margin-left: 25px;
  flex: 1;
}

/**
 * @element error
 */
.merp-calculator__error {
  margin-top: 10px;
  min-height: 50px;
}

/**
 * @element disclaimer
 */
.merp-calculator__disclaimer {
  margin-top: 10px;
  font-size: 13px;
  color: #B0A7A8;
}

/**
 * @element empty
 */
.merp-calculator__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: lighter;
  color: #62A8AD;
  text-align: center;
  box-sizing: border-box;
  padding-bottom: 50px;
  min-height: 300px;
}

@media (max-width: 47.99em) {
  /**
   * @block merp-calculator
   */
  .merp-calculator {
    padding: 15px 10px;
  }
}
@media (max-width: 63.99em) {
  /**
   * @element top
   */
  .merp-calculator__top {
    width: auto;
  }
  /**
   * @element button
   */
  .merp-calculator__button {
    display: flex;
    justify-content: flex-end;
  }
  /**
   * @element sections
   */
  .merp-calculator__sections {
    flex-direction: column;
  }
  /**
   * @element left-section
   */
  .merp-calculator__left-section {
    margin-right: 0;
    margin-bottom: 26px;
  }
  /**
   * @element right-section
   */
  .merp-calculator__right-section {
    margin-left: 0;
  }
}
.merp-calculator__fields {
  margin-bottom: 20px;
}

/**
 * @block merp-contribution-box
 */
.merp-contribution-box {
  padding: 15px;
}

/**
 * The form used to upload a new Claim document in MERP.
 *
 * @block merp-claims-form
 */
.merp-claims-form {
  display: block;
}

/**
 * @element step
 */
.merp-claims-form__step {
  display: flex;
  padding-bottom: 25px;
  /**
   * @modifier icon
   * @value download
   */
  /**
   * @modifier icon
   * @value print
   */
  /**
   * @modifier icon
   * @value upload
   */
}
.merp-claims-form__step:before {
  content: "";
  background-size: 40px 35px;
  width: 50px;
  min-height: 35px;
  background-position: top left;
  background-repeat: no-repeat;
}
.merp-claims-form__step_icon_download:before {
  background-image: url("/assets/images/icons/claims/download.svg");
}
.merp-claims-form__step_icon_print:before {
  background-image: url("/assets/images/icons/claims/print.svg");
}
.merp-claims-form__step_icon_upload:before {
  background-image: url("/assets/images/icons/claims/upload.svg");
}

/**
 * @element step-content
 */
.merp-claims-form__step-content {
  flex: 1;
}

/**
 * @element step-title
 */
.merp-claims-form__step-title {
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 2px;
}

/**
 * @element step-text
 */
.merp-claims-form__step-text {
  font-size: 13px;
  padding-bottom: 5px;
}

.merp-claims-form__file-container-separator {
  width: 100%;
  background-color: #C8D8D8;
  height: 1px;
  margin: 20px 0 10px 0;
}

.merp-claims-form__file-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-bottom: 15px;
}

.merp-claims-form__document-title {
  width: 100%;
  margin-bottom: 11px;
  margin-top: 1px;
}

.merp-claims-form__document-type {
  width: 100%;
  margin-bottom: 10px;
}

.merp-claims-form__file {
  width: 100%;
  margin-bottom: 10px;
}

.merp-claims-form__file-field {
  height: 70px;
}

/**
 * @block micro-benefit
 */
.micro-benefit {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/**
 * @element type-icon
 */
.micro-benefit__type-icon {
  height: 10px;
  width: 10px;
  margin-right: 5px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/**
 * @element group-name
 */
.micro-benefit__group-name {
  margin-right: 10px;
}

/**
 * @element carrier-name
 */
.micro-benefit__carrier-name {
  margin-left: 10px;
  margin-right: 10px;
}

/**
 * @element plan-name
 */
.micro-benefit__plan-name {
  margin-left: 10px;
}

.mfa-card {
  background-color: #FFF;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
}

.mfa-card__header {
  height: 50px;
  display: flex;
  align-items: center;
}

.mfa-card__title {
  font-weight: 700;
  font-size: 20px;
  flex: 1;
}

.mfa-card__header-actions {
  display: flex;
  align-items: center;
}

.mfa-card__header-refresh {
  height: 40px;
}

.mfa-card__header-toggle-mfa {
  display: flex;
}

.mfa-card__description {
  font-size: 16px;
  font-weight: 400;
}

.mfa-card__email {
  width: 60%;
  margin-top: 20px;
}
@media (max-width: 63.99em) {
  .mfa-card__email {
    width: 100%;
  }
}

.mfa-card__phone {
  margin-top: 10px;
}

.mfa-card__phone-card {
  width: 60%;
}
@media (max-width: 63.99em) {
  .mfa-card__phone-card {
    width: 100%;
  }
}

.mfa-card__phone-section {
  display: flex;
  align-items: center;
}
@media (max-width: 63.99em) {
  .mfa-card__phone-section {
    flex-direction: column;
    align-items: flex-start;
  }
}

.mfa-card__phone-fields-section {
  width: 60%;
}
@media (max-width: 63.99em) {
  .mfa-card__phone-fields-section {
    width: 100%;
  }
}

.mfa-card__phone-fields {
  display: flex;
}

.mfa-card__phone-buttons-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 70px;
  margin-left: auto;
  margin-bottom: auto;
}
.mfa-card__phone-buttons-section_justify-content_flex-end {
  justify-content: flex-end;
}

.mfa-card__phone-buttons {
  position: relative;
  display: flex;
}
.mfa-card__phone-buttons_margin-bottom_6 {
  margin-bottom: 6px;
}

.mfa-card__timer {
  color: #B0A7A8;
  font-size: 13px;
  font-style: italic;
  padding: 5px 0;
}
.mfa-card__timer_padding_0 {
  padding: 0;
}

.mfa-card__error-item {
  padding-left: 25px;
  background: url("/assets/images/error-exclamation.svg") top left no-repeat;
  background-size: 18px 18px;
  color: #D57F73;
  font-size: 14px;
  animation: mfa-card__fade-in 0.8s;
}

@keyframes mfa-card__fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.account-info {
  background-color: #FFF;
  padding: 20px;
  /**
   * Shake the box
   *
   * @modifier is-shaking
   */
}
.account-info_is-shaking {
  overflow: hidden;
  animation: account-info__shake 0.8s;
  animation-fill-mode: both;
}

.account-info__header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account-info__title {
  font-size: 20px;
  font-weight: bold;
}

.account-info__avatar-box {
  box-sizing: border-box;
  border: 1px solid #D8E4E4;
  background-color: #F2F2F2;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 47.99em) {
  .account-info__avatar-box {
    background-color: #FFF;
    border: 0;
    height: auto;
  }
}

.account-info__avatar-icon {
  width: 78px;
  height: 78px;
  position: relative;
  flex-shrink: 0;
  background-color: #7D7086;
  border-radius: 50%;
}
.account-info__avatar-icon::after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  background: url("/assets/images/icons/user.svg") center no-repeat;
}

.account-info__check-icon {
  background-image: url("/assets/images/icons/round-check.svg");
  width: 11px;
  height: 11px;
}

.account-info__error-item {
  padding-left: 25px;
  background: url("/assets/images/error-exclamation.svg") top left no-repeat;
  background-size: 18px 18px;
  color: #D57F73;
  font-size: 14px;
  animation: account-info__error-fade-in 0.8s;
}

.account-info__timer {
  color: #B0A7A8;
  font-size: 13px;
  font-style: italic;
  padding: 5px 0;
  text-align: center;
}

@keyframes account-info__shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}
@keyframes account-info__error-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/**
 * An action that opens a modal to filter or sort on mobile above tables in Quoting.
 *
 * @block mobile-table-action
 */
.mobile-table-action {
  height: 100%;
  width: 80px;
}
.mobile-table-action_width_large {
  width: 70px;
}
.mobile-table-action_width_90 {
  width: 90px;
}
.mobile-table-action_width_85 {
  width: 85px;
}
.mobile-table-action_width_small {
  width: 60px;
}
.mobile-table-action_width_55 {
  width: 55px;
}
.mobile-table-action_width_100 {
  width: 100px;
}
.mobile-table-action_width_125 {
  width: 125px;
}
.mobile-table-action_max-width_110 {
  max-width: 110px;
}
.mobile-table-action_full-width {
  width: 100%;
}

.mobile-table-action__button {
  box-shadow: 0 0 0 transparent;
  outline: none;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mobile-table-action__button:not(.mobile-table-action__button_is-loading):not(.mobile-table-action__button_is-disabled):hover, .mobile-table-action__button:not(.mobile-table-action__button_is-loading):not(.mobile-table-action__button_is-disabled):focus {
  background-color: #D7D7D7;
}
.mobile-table-action__button:active {
  opacity: 0.5;
}
.mobile-table-action__button_no-padding {
  padding: 0;
}
.mobile-table-action__button_is-loading {
  background-image: linear-gradient(to right, transparent 50%, #D7D7D7 50%);
  animation: export__loading-animation 150s cubic-bezier(0.1, 0.99, 0.1, 0.99) 1;
  background-size: 200% 100%;
  cursor: default;
}
.mobile-table-action__button_is-disabled {
  cursor: default;
}
.mobile-table-action__button_content-padding_24 .mobile-table-action__button-content {
  padding-top: 24px;
}

.mobile-table-action__button-content {
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 30px;
}
.mobile-table-action__button-content_padding-top_20 {
  padding-top: 20px;
}

.mobile-table-action__button_icon_sort .mobile-table-action__button-content {
  background-size: 16px 20px;
  background-image: url("/assets/images/themes/blue/icons/mobile-sort.svg");
}

.mobile-table-action__button_icon_plus .mobile-table-action__button-content {
  background-size: 14px 14px;
  background-image: url("/assets/images/themes/blue/icons/plus-thin.svg");
}

.mobile-table-action__button_icon_filter .mobile-table-action__button-content {
  background-size: 17px 18px;
  background-image: url("/assets/images/themes/blue/icons/mobile-filter.svg");
}

.mobile-table-action__button_icon_export .mobile-table-action__button-content {
  background-size: 11px 14px;
  background-position: center 6px;
  background-image: url("/assets/images/themes/blue/icons/export.svg");
}

.mobile-table-action__button_icon_check .mobile-table-action__button-content {
  background-size: 17px 18px;
  background-image: url("/assets/images/themes/blue/icons/check-long.svg");
}

.mobile-table-action_theme_green .mobile-table-action__button_icon_filter .mobile-table-action__button-content {
  background-image: url("/assets/images/icons/mobile-filter.svg");
}
.mobile-table-action_theme_green .mobile-table-action__button_icon_sort .mobile-table-action__button-content {
  background-image: url("/assets/images/themes/green/icons/mobile-sort.svg");
}
.mobile-table-action_theme_green .mobile-table-action__button_icon_export .mobile-table-action__button-content {
  background-image: url("/assets/images/themes/green/icons/export.svg");
}

.mobile-table-action__button_icon_download .mobile-table-action__button-content {
  background-size: 17px 18px;
  background-image: url("/assets/images/themes/blue/icons/download-thin.svg");
}

.mobile-table-action__button_icon_heart .mobile-table-action__button-content {
  background-size: 17px 18px;
  background-image: url("/assets/images/themes/blue/icons/heart.svg");
}

.mobile-table-action__button_icon_edit .mobile-table-action__button-content {
  background-size: 17px 18px;
  background-image: url("/assets/images/themes/blue/icons/edit.svg");
}

.mobile-table-action__button_icon_switch .mobile-table-action__button-content {
  background-size: 16px 12px;
  background-image: url("/assets/images/icons/switch.svg");
}

.mobile-table-action__button_icon_export.mobile-table-action__button_is-disabled .mobile-table-action__button-content {
  background-image: url("/assets/images/themes/blue/icons/export-disabled.svg");
}

.mobile-table-action__button_icon_suspensions .mobile-table-action__button-content {
  background-size: 13px 16px;
  background-image: var(--svg-suspensions);
}

.mobile-table-action__button_icon_suspensions-disabled .mobile-table-action__button-content {
  background-size: 13px 16px;
  background-image: var(--svg-suspensions-disabled);
}

@keyframes export__loading-animation {
  0% {
    background-position: 0%;
  }
  70% {
    background-position: -95%;
  }
  100% {
    background-position: -99%;
  }
}
/**
 * Basic modal with overlay.
 *
 * 1. Higher than fixed header such as the wizard bottom header.
 *
 * @block modal
 */
.modal {
  z-index: 12; /* 1 */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal_large-z-index {
  z-index: 13;
}
.modal_overflow_auto {
  overflow: auto;
}

/**
 * @element overlay
 */
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #EFF4F5;
  opacity: 0.95;
  animation: modal__overlay-enter 300ms ease;
}
.modal__overlay_animation_none {
  animation: none;
}

.modal__box {
  z-index: 3;
  box-sizing: border-box;
  max-height: 100vh;
  background: #FFF;
  animation: modal__box-enter 300ms ease;
  /**
   * Makes the element always take the full width and height. Needed for example
   * for the terms and conditions of Go Green.
   *
   * @modifier is-full
   * @for box
   */
}
@media (max-width: 47.99em) {
  .modal__box {
    width: 100%;
    height: 100%;
  }
}
@media (min-width: 48em) {
  .modal__box {
    width: 580px;
  }
}
.modal__box_is-full {
  width: 100%;
  height: 100%; /* 1 */
}
@media (min-width: 48em) {
  .modal__box_is-full {
    width: 100%;
  }
}
.modal__box_is-animation-disabled {
  animation: none;
}
.modal__box_has-bottom-placement {
  position: absolute;
  bottom: 0;
  height: auto;
}

@media (min-width: 48em) {
  .modal_is-form .modal__box {
    width: 588px;
  }
}

@media (min-width: 48em) {
  .modal_width-from-tablet_588 .modal__box {
    width: 588px;
  }
}

@media (min-width: 48em) {
  .modal_width-from-tablet_540 .modal__box {
    width: 540px;
  }
}

@media (min-width: 48em) {
  .modal_width-from-tablet_645 .modal__box {
    width: 645px;
  }
}

/**
 * @modifier is-expanding-form
 */
.modal_is-expanding-form {
  align-items: flex-start;
  margin: 40px 0;
}
@media (max-width: 47.99em) {
  .modal_is-expanding-form {
    margin: 0;
  }
}

.modal_is-expanding-display {
  align-items: flex-start;
  margin: 40px 0;
}
@media (max-width: 47.99em) {
  .modal_is-expanding-display {
    margin: 0;
  }
}

@media (min-width: 48em) {
  .modal_is-medium-sized .modal__box {
    width: 670px;
  }
}

@media (min-width: 48em) {
  .modal_width-from-tablet_670 .modal__box {
    width: 670px;
  }
}

@media (min-width: 48em) {
  .modal_width_550 .modal__box {
    width: 550px;
  }
}

@media (min-width: 48em) {
  .modal_width_520 .modal__box {
    width: 520px;
  }
}

@media (min-width: 48em) {
  .modal_width_530 .modal__box {
    width: 530px;
  }
}

@media (min-width: 48em) {
  .modal_width_600 .modal__box {
    width: 600px;
  }
}

@media (min-width: 48em) {
  .modal_width_711 .modal__box {
    width: 711px;
  }
}

@media (min-width: 48em) {
  .modal_width_732 .modal__box {
    width: 732px;
  }
}

@media (min-width: 48em) {
  .modal_width_762 .modal__box {
    width: 762px;
  }
}

@media (min-width: 48em) {
  .modal_width_862 .modal__box {
    width: 862px;
  }
}

@media (min-width: 48em) {
  .modal_width_650 .modal__box {
    width: 650px;
  }
}

@media (min-width: 48em) {
  .modal_width_900 .modal__box {
    width: 900px;
  }
}

@media (min-width: 48em) {
  .modal_width-from-tablet_1185 .modal__box {
    width: 1185px;
  }
}

@media (min-width: 48em) {
  .modal_is-small-sized .modal__box {
    width: 500px;
  }
}

/**
 * Larger width.
 *
 * @modifier is-large
 */
@media (min-width: 48em) {
  .modal_is-large .modal__box {
    width: 750px;
  }
}

.modal_theme_blue .modal__overlay {
  background-color: #C8D8EB;
}

.modal_background-color_green .modal__overlay {
  background-color: #E5F4F6;
}

.modal_is-background-transparent .modal__box {
  background-color: transparent;
}

.modal_has-width-transition .modal__box {
  transition: width 300ms ease;
}

/**
 * When it contains a dialog that has invisible content (happens during fade in/out transitions).
 * Allows for nicer transitions.
 */
.modal_with-dialog-body-background .modal__box {
  background-color: var(--color-light-grey-9);
}

.modal_box-and-overlay-background_transparent .modal__box {
  background-color: transparent;
}
.modal_box-and-overlay-background_transparent .modal__overlay {
  background-color: transparent;
}

.modal_fly-up .modal__box {
  animation: modal_fly-up 1.5s ease forwards;
}

@keyframes modal_fly-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1000px);
  }
}
@keyframes modal__box-enter {
  0% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes modal__overlay-enter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.95;
  }
}
.month-box {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1297AC;
  border: 1px solid #1297AC;
  border-radius: 3px;
  font-size: 14px;
  width: 52px;
  height: 33px;
  font-weight: 600;
  box-sizing: border-box;
  cursor: pointer;
}
.month-box_selected {
  color: #FFFFFF;
  font-weight: bold;
  background-color: #1297AC;
}
.month-box_disabled {
  color: #C1C1C1;
  border: 1px solid #C1C1C1;
  background-color: #F8F8F8;
  cursor: default;
}
.month-box_error {
  color: #D57F73;
  border: 1px solid #D57F73;
}
.month-box_is-selected-error {
  color: #FFFFFF;
  background-color: #D57F73;
}

.month-options {
  color: #1297AC;
  padding: 10px 0 20px;
}

.month-options__title {
  margin-bottom: 10px;
}

/**
 * A trigger with a popup.
 *
 * @block more-fields
 */
.more-fields {
  display: flex;
}
.more-fields_fill_parent {
  width: 100%;
  height: 100%;
}

.more-fields__field {
  text-transform: uppercase;
  padding: 10px 0;
  font-size: 10px;
  display: inline-block;
  width: 100%;
}
.more-fields__field_is-select-all {
  font-size: 12px;
  font-style: italic;
  text-transform: none;
  padding-top: 7px;
}

.more-fields__trigger {
  display: flex;
  align-items: center;
}
.more-fields__trigger_is-hoverable:hover .more-fields__trigger-text {
  opacity: 0.8;
  color: #034FA8;
}

.more-fields__trigger-text {
  height: 20px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  color: #034FA8;
  font-size: 10px;
  position: relative;
  display: flex;
  align-items: center;
}
.more-fields__trigger-text_has-plus-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("/assets/images/themes/blue/icons/plus-thin.svg") center center no-repeat;
  background-size: 7px 7px;
}
.more-fields__trigger-text.more-fields__trigger-text_has-plus-icon_is-highlighted::before {
  background-image: url("/assets/images/themes/blue/icons/plus-thin-red.svg");
}
.more-fields__trigger-text_mobile-view {
  height: 100%;
  width: 90px;
  flex-direction: column;
  text-align: center;
}
.more-fields__trigger-text_mobile-view.more-fields__trigger-text_has-plus-icon::before {
  height: 30px;
  background-size: 17px 18px;
}

.more-fields__popup-body {
  overflow-y: auto;
  max-height: calc(100vh - 210px);
  padding-left: 10px;
}

.more-fields__fields-container {
  -moz-column-count: 2;
       column-count: 2;
}

.more-fields__fields-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.more-fields__popup {
  background-color: #FFF;
  border-radius: 3px;
}
.more-fields__popup_width_163 {
  width: 163px;
}
.more-fields__popup_width_200 {
  width: 200px;
}
.more-fields__popup_width_400 {
  width: 400px;
}

.more-fields__popup-header {
  height: 40px;
  display: flex;
  padding: 0 10px;
  justify-content: flex-end;
}
.more-fields__popup-header_justify-content_flex-start {
  justify-content: flex-start;
}

.more-fields_theme_green .more-fields__trigger_is-hoverable:hover .more-fields__trigger-text {
  color: #1297AC;
}
.more-fields_theme_green .more-fields__trigger-text {
  color: #1297AC;
}
.more-fields_theme_green .more-fields__trigger-text_has-plus-icon::before {
  background: var(--svg-plus) center center no-repeat;
  background-size: 7px 7px;
}

.more-fields__footer {
  display: flex;
  align-items: center;
}

.more-fields__footer-action {
  height: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #C7D7D7;
  flex: 1;
  display: flex;
}
.more-fields__footer-action_has-padding-right {
  padding-right: 30px;
}
.more-fields__footer-action_justify-content_flex-end {
  justify-content: flex-end;
}
.more-fields__footer-action_has-padding-left {
  padding-left: 30px;
}

.new-benefit-card {
  background-color: #FFF;
  border: 1px solid #C7D7D7;
}
.new-benefit-card_no-border-bottom {
  border-bottom: none;
}
.new-benefit-card_is-error {
  border: solid 1px var(--color-red);
}
.new-benefit-card_border-color_green-15 {
  border-color: #E3F4F6;
}
.new-benefit-card_border_none {
  border: none;
}

.new-benefit-card__content {
  display: flex;
  flex-direction: column;
}

.new-benefit-card__top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 0 20px;
}

.new-benefit-card__label {
  font-size: 11px;
  text-transform: uppercase;
}

.new-benefit-card__header {
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.new-benefit-card__error {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: var(--svg-field-error) center center no-repeat;
}

.new-benefit-card__title-container {
  display: flex;
}
.new-benefit-card__title-container_has-button {
  justify-content: space-between;
}

.new-benefit-card__plan-rates-table {
  width: 50%;
}
.new-benefit-card__plan-rates-table_has-premium {
  width: 80%;
}

.new-benefit-card__subscriber-section {
  margin-top: 15px;
}
.new-benefit-card__subscriber-section:first-child {
  margin-top: 0;
}

.new-benefit-card__close {
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 1;
}

.new-benefit-card__plan-memo {
  padding: 15px 20px;
  padding-right: 20px;
  border-left: solid 4px var(--color-red);
  font-size: 13px;
}

.new-benefit-card__subscribers {
  margin: 0 20px;
  padding-top: 15px;
  box-sizing: border-box;
}

.new-benefit-card__subscribers-header {
  padding: 0 20px;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
}

.new-benefit-card__plan-details {
  flex: 1;
  padding-top: 15px;
}

.new-benefit-card__section-title {
  position: relative;
  font-weight: bold;
  margin-bottom: 13px;
}
.new-benefit-card__section-title_is-plan-details {
  margin-left: 20px;
  margin-right: 20px;
}
.new-benefit-card__section-title_margin-bottom_0 {
  margin-bottom: 0;
}

.new-benefit-card__status {
  margin-left: 13px;
}

.new-benefit-card__title-edit-link {
  position: absolute;
  right: 0;
  top: 0;
}

.new-benefit-card__plan-rates {
  padding: 15px 20px;
}
.new-benefit-card__plan-rates_no-padding {
  padding: 0;
}

.new-benefit-card__documents {
  padding: 5px 20px 0;
  margin-bottom: 20px;
}

.new-benefit-card__inline-extra {
  padding: 0 20px 20px;
}
.new-benefit-card__inline-extra:before {
  content: "";
  display: flex;
  margin-bottom: 15px;
  border-bottom: solid 1px #C7D7D7;
}

.new-benefit-card__extra-section {
  margin-bottom: 20px;
}
.new-benefit-card__extra-section_has-separator:before {
  content: "";
  display: flex;
  margin-bottom: 15px;
  border-bottom: solid 1px #C7D7D7;
}

.new-benefit-card__extra-section-field {
  margin: 10px 0;
  font-size: 13px;
}

.new-benefit-card__footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.new-benefit-card__actions-container {
  display: flex;
  padding: 10px 20px;
}

.new-benefit-card__actions {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.new-benefit-card__action:not(:last-child) {
  margin-right: 11px;
}

.new-benefit-card__amount-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.new-benefit-card__amount {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.new-benefit-card__footer-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 50px;
}

.new-benefit-card__footer-field-value {
  font-size: 13px;
  margin-top: 10px;
}

.new-benefit-card__amount-value {
  font-size: 13px;
}

.new-benefit-card__cost-container {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.new-benefit-card__costs {
  width: 266px;
  align-self: center;
  display: flex;
  flex-direction: column;
  background-color: #F8F8F8;
  border: 1px solid #F3F3F3;
  border-radius: 8px;
  padding: 8px 10px;
}

.new-benefit-card__cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.new-benefit-card__cost-row:not(:last-child) {
  border-bottom: 1px solid #CBDADA;
}

.new-benefit-card__notification {
  font-size: 14px;
  background-color: #1297AC;
  padding: 7px 20px;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.new-benefit-card__field {
  display: flex;
  align-items: center;
  height: 35px;
  border-top: solid 1px #C7D7D7;
}

.new-benefit-card__cost-amount {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
}
.new-benefit-card__cost-amount_is-total {
  font-weight: bold;
  font-size: 14px;
}

.new-benefit-card__info {
  flex: 1;
}

.new-benefit-card__footer-info {
  display: flex;
}

.new-benefit-card_is-expanded {
  height: 100%;
}
.new-benefit-card_is-expanded .new-benefit-card__content {
  max-height: 100vh;
}
.new-benefit-card_is-expanded .new-benefit-card__body {
  overflow: auto;
}

.new-benefit-card__title {
  display: flex;
  margin-top: 5px;
}
.new-benefit-card__title_margin-top_0 {
  margin-top: 0;
}

.new-benefit-card_is-workflow-benefits-step {
  margin-bottom: 10px;
}
@media (min-width: 64em) and (max-width: 90.4275em) {
  .new-benefit-card_is-workflow-benefits-step .new-benefit-card__title {
    display: block;
    margin: 0;
    width: 100%;
    padding-right: 0;
  }
  .new-benefit-card_is-workflow-benefits-step .new-benefit-card__title-container {
    flex-direction: column;
  }
  .new-benefit-card_is-workflow-benefits-step .new-benefit-card__actions-container {
    flex-direction: column;
    padding-top: 8px;
  }
  .new-benefit-card_is-workflow-benefits-step .new-benefit-card__actions {
    justify-content: center;
    padding: 25px 0;
  }
  .new-benefit-card_is-workflow-benefits-step .new-benefit-card__action {
    flex: 1;
  }
  .new-benefit-card_is-workflow-benefits-step .new-benefit-card__cost-container {
    margin-top: 18px;
    justify-content: center;
    width: 100%;
  }
  .new-benefit-card_is-workflow-benefits-step .new-benefit-card__costs {
    width: 100%;
  }
  .new-benefit-card_is-workflow-benefits-step .new-benefit-card__plan-rates-table {
    width: 100%;
  }
}
@media (min-width: 64em) {
  .new-benefit-card_is-workflow-benefits-step .new-benefit-card_is-expanded .new-benefit-card__header {
    padding-top: 15px;
  }
  .new-benefit-card_is-workflow-benefits-step .new-benefit-card_is-expanded .new-benefit-card__content {
    max-height: inherit;
    height: 100%;
  }
}

.new-benefit-card_is-employee-details {
  border: none;
  border-bottom: 1px solid #C7D7D7;
}
@media (max-width: 81.24em) {
  .new-benefit-card_is-employee-details .new-benefit-card__title {
    display: block;
    margin: 0;
    width: 100%;
    padding-right: 0;
  }
  .new-benefit-card_is-employee-details .new-benefit-card__title-container {
    flex-direction: column;
  }
  .new-benefit-card_is-employee-details .new-benefit-card__actions-container {
    flex-direction: column;
    padding-top: 8px;
  }
  .new-benefit-card_is-employee-details .new-benefit-card__actions {
    justify-content: center;
    padding: 25px 0;
  }
  .new-benefit-card_is-employee-details .new-benefit-card__action {
    flex: 1;
  }
  .new-benefit-card_is-employee-details .new-benefit-card__cost-container {
    margin-top: 18px;
    justify-content: center;
    width: 100%;
  }
  .new-benefit-card_is-employee-details .new-benefit-card__costs {
    width: 100%;
  }
  .new-benefit-card_is-employee-details .new-benefit-card__plan-rates-table {
    width: 100%;
  }
}
.new-benefit-card_is-employee-details .new-benefit-card_is-expanded .new-benefit-card__header {
  padding-top: 15px;
}
.new-benefit-card_is-employee-details .new-benefit-card_is-expanded .new-benefit-card__content {
  max-height: inherit;
  height: 100%;
}

.new-benefit-card__loading-row {
  padding: 5px 20px;
  display: flex;
  align-items: center;
}

.new-benefit-card__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 110px;
  margin-left: 20px;
  margin-right: 20px;
}
.new-benefit-card__empty:before {
  content: "";
  display: block;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  margin-bottom: 13px;
}
.new-benefit-card__empty_type_rates:before {
  width: 14px;
  height: 21px;
  background-image: url("/assets/images/icons/dollar-icon.svg");
}
.new-benefit-card__empty_type_edi:before {
  width: 18px;
  height: 18px;
  background-image: url("/assets/images/icons/edi-icon.svg");
}

.new-benefit-card__empty-text {
  font-size: 18px;
  color: #1297AC;
}

.new-benefit-card__empty-benefit-amount-icon {
  margin-bottom: 13px;
  width: 22px;
  height: 22px;
}
.new-benefit-card__empty-benefit-amount-icon_type_life {
  width: 21px;
}

.new-benefit-card__select-button {
  align-self: flex-end;
}

@media (max-width: 47.99em) and (max-width: 47.99em) {
  .new-benefit-card__title {
    display: block;
    margin: 0;
    width: 100%;
    padding-right: 0;
  }
  .new-benefit-card__title-container {
    flex-direction: column;
  }
  .new-benefit-card__actions-container {
    flex-direction: column;
    padding-top: 8px;
  }
  .new-benefit-card__actions {
    justify-content: center;
    padding: 25px 0;
  }
  .new-benefit-card__action {
    flex: 1;
  }
  .new-benefit-card__cost-container {
    margin-top: 18px;
    justify-content: center;
    width: 100%;
  }
  .new-benefit-card__costs {
    width: 100%;
  }
  .new-benefit-card__plan-rates-table {
    width: 100%;
  }
}
@media (max-width: 47.99em) {
  .new-benefit-card_is-expanded .new-benefit-card__header {
    padding-top: 15px;
  }
  .new-benefit-card_is-expanded .new-benefit-card__content {
    max-height: inherit;
    height: 100%;
  }
}
.new-benefit-card_is-expanded:not(.new-benefit-card_has-margin-separation) .new-benefit-card__section:first-child:before {
  content: normal;
}
.new-benefit-card_is-expanded:not(.new-benefit-card_has-margin-separation) .new-benefit-card__header {
  padding-bottom: 0;
}
.new-benefit-card_is-expanded:not(.new-benefit-card_has-margin-separation) .new-benefit-card__header:after {
  content: "";
  display: flex;
  margin-bottom: 15px;
  border-bottom: solid 1px #C7D7D7;
  margin-top: 20px;
  margin-bottom: 0;
  border-bottom: none;
}
.new-benefit-card_is-expanded:not(.new-benefit-card_has-margin-separation) .new-benefit-card__header_has-border:after {
  border-bottom: solid 1px #C7D7D7;
}

.new-benefit-card:not(.new-benefit-card_has-margin-separation) .new-benefit-card__empty_has-separator {
  border-top: solid 1px #C7D7D7;
}
.new-benefit-card:not(.new-benefit-card_has-margin-separation) .new-benefit-card__section:before {
  content: "";
  display: flex;
  margin-bottom: 15px;
  border-bottom: solid 1px #C7D7D7;
  margin: 0 20px;
}
.new-benefit-card:not(.new-benefit-card_has-margin-separation) .new-benefit-card__section_background-color_transparent {
  background-color: transparent;
}
.new-benefit-card:not(.new-benefit-card_has-margin-separation) .new-benefit-card__section_margin_0 {
  margin: 0;
}

.new-benefit-card_has-margin-separation .new-benefit-card__header {
  padding-bottom: 20px;
}
.new-benefit-card_has-margin-separation .new-benefit-card__documents {
  padding-bottom: 10px;
}
.new-benefit-card_has-margin-separation .new-benefit-card__section {
  background-color: #FFF;
  margin: 20px;
}
.new-benefit-card_has-margin-separation .new-benefit-card__empty {
  margin: 20px;
  background-color: #FFF;
}
.new-benefit-card_has-margin-separation .new-benefit-card__body {
  background-color: #F8F8F8;
}
@media (max-width: 47.99em) {
  .new-benefit-card_has-margin-separation .new-benefit-card__body {
    height: 100%;
  }
}
.new-benefit-card_has-margin-separation .new-benefit-card__extra-section {
  background-color: #FFF;
}
.new-benefit-card_has-margin-separation .new-benefit-card__extra {
  background-color: #FFF;
  margin: 20px;
  padding: 15px 20px;
}

.notes-helptip__icon {
  height: 10px;
  width: 17px;
  background: url("/assets/images/icons/eye.svg") center center no-repeat;
  background-size: 17px 10px;
  cursor: pointer;
}

.notes-helptip__view-note-trigger {
  color: #1297AC;
  font-size: 14px;
}

/**
 * Global notification. Can indicate success or error.
 *
 * @block notification
 */
.notification {
  position: fixed;
  top: 10px;
  padding: 0 10px;
  border: solid 1px var(--main-color-dark-5);
  background: var(--main-color-light-28);
  border-radius: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  animation: notification__bounce-out 600ms ease;
  /**
   * @modifier is-active
   */
}
@media (min-width: 48em) {
  .notification {
    font-size: 14px;
  }
}
@media (max-width: 47.99em) {
  .notification {
    font-size: 13px;
  }
}
.notification_is-active {
  z-index: 13;
  animation: notification__bounce-in 600ms ease;
}

/**
 * Contains the icon, title, and checkbox.
 *
 * @element header
 */
.notification__header {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 40px;
  padding: 5px 0;
}
.notification__header:before {
  content: "";
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: url("/assets/images/icons/notification/check.svg") center center no-repeat;
  background-color: var(--main-color-dark);
  background-size: 10px 8px;
  margin-right: 8px;
}
.notification__header_align-items_flex-start {
  align-items: flex-start;
}
.notification__header_max-width_500 {
  max-width: 500px;
}

/**
 * flex: 1 does not work on ie.
 *
 * @element title
 */
.notification__title {
  width: 100%; /* 1 */
}

.notification__title-content {
  max-width: 325px;
  padding-right: 6px;
}
.notification__title-content_has-vertical-padding {
  padding-top: 6px;
  padding-bottom: 6px;
}

.notification__link {
  margin-top: 7px;
}

/**
 * @element close
 */
.notification__close {
  width: 20px;
  height: 20px;
  background: url("/assets/images/icons/x-sign-clear.svg") center center no-repeat;
  background-size: 10px 10px;
  opacity: 0.8;
  font-size: 0;
}

/**
 * @modifier type
 * @value error
 */
.notification_type_error {
  border: solid 1px #D57F73;
  background: #F9EDEB;
}
.notification_type_error .notification__title {
  color: #D57F73;
}
.notification_type_error .notification__header:before {
  background-image: url("/assets/images/icons/notification/error.svg");
  background-size: 7px 7px;
  background-color: #D57F73;
}
.notification_type_error .notification__text {
  display: inline;
  color: #D57F73;
}

/**
 * @modifier type
 * @value alert
 */
.notification_type_alert {
  border: solid 1px #305C94;
  background: #E5EBF3;
}
.notification_type_alert .notification__title {
  color: #305C94;
}
.notification_type_alert .notification__header:before {
  background-image: url("/assets/images/icons/bell.svg");
  background-size: 11px 12px;
  background-color: #305C94;
}

/**
 * @element required-coverage-icons
 */
.notification__required-coverage-icons {
  display: inline-block;
  margin-left: 34px;
  margin-bottom: 10px;
}

/**
 * @modifier type
 * @value info
 */
.notification_type_info {
  border: solid 1px #305C94;
  background: #DEE6F0;
}
.notification_type_info .notification__header:before {
  background-image: url("/assets/images/icons/notification/info.svg");
  background-size: 10px 12px;
  background-color: #305C94;
}

/**
 * @modifier size
 * @value large
 */
.notification_size_large {
  border-radius: 10px;
  padding: 5px 5px 10px 15px;
}
.notification_size_large .notification__header {
  font-weight: bold;
  color: var(--main-color-dark);
  font-size: 16px;
}
.notification_size_large .notification__close {
  transform: translateY(-10px);
}
.notification_size_large .notification__body {
  padding-top: 10px;
}

/**
 * @element body
 */
.notification__body {
  box-sizing: border-box;
  padding-right: 20px;
  position: relative;
  max-width: 400px;
}
.notification__body_max-width_500 {
  max-width: 500px;
}

/**
 * @element description
 */
.notification__description {
  font-size: 14px;
  padding-bottom: 20px;
}
.notification__description:last-child {
  padding-bottom: 0;
}
.notification__description_padding-bottom_10 {
  padding-bottom: 10px;
}
.notification__description_style_note {
  font-style: italic;
  font-size: 13px;
}
.notification__description b {
  font-weight: bold;
}

.notification__error-detail {
  background: #F0CCC8;
  border-radius: 5px;
  text-align: center;
  padding: 8px;
  margin-top: 10px;
  font-family: "Source Code Pro", sans-serif;
  font-size: 12px;
}

.notification__error-description {
  margin-right: 25px;
  margin-left: 35px;
}

.notification__bottom-links {
  display: flex;
  justify-content: space-between;
}

@keyframes notification__bounce-in {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.3);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
  70% {
    transform: translateX(-50%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
@keyframes notification__bounce-out {
  0% {
    opacity: 1;
    z-index: 13;
    transform: translateX(-50%) scale(1);
  }
  25% {
    transform: translateX(-50%) scale(0.95);
  }
  50% {
    transform: translateX(-50%) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.3);
  }
}
/**
 * A table used to display titles (left-aligned)
 * and numbers (right aligned).
 *
 * The titles may include a help-tip.
 *
 * @block number-table
 */
.number-table {
  border: 1px solid #EFEFEF;
  background-color: #F8F8F8;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 5px 15px;
}
.number-table_has-header {
  padding: 0;
}
.number-table_has-header .number-table__row {
  margin: 0 15px;
}

.number-table__header-row {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  background-color: #EEEEEE;
  padding: 5px 15px;
  font-weight: bold;
  text-align: left;
}
.number-table__header-row:hover {
  background-color: #D7D7D7;
}
.number-table__header-row_is-disabled {
  cursor: default;
}
.number-table__header-row_is-disabled:hover {
  background-color: #EEEEEE;
}

.number-table__header-title {
  flex: 1;
  margin-right: 5px;
}

.number-table__header-text {
  font-weight: 700;
  font-size: 16px;
  color: #4A4A4A;
  margin-right: 13px;
}

/**
 * @element row
 */
.number-table__row {
  display: flex;
  height: 40px;
  align-items: center;
  border-bottom: 1px solid var(--main-color-light-13);
}
.number-table__row:last-child {
  border-bottom: none;
}

/**
 * @element row-content
 */
.number-table__row-content {
  flex: 1;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  /**
   * @modifier is-default-text
   * @for row-content
   */
}
.number-table__row-content_is-default-text {
  text-transform: none;
}

/**
 * @element title
 */
.number-table__title {
  color: var(--main-color);
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  margin-right: 5px;
}

/**
 * @element amount
 */
.number-table__amount {
  margin-left: 20px;
  flex-shrink: 0;
  text-align: right;
  font-size: 16px;
}

.number-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--main-color);
  color: #FFF;
}

/**
 * An oval shaped checkbox.
 *
 * @block oval-checkbox
 */
.oval-checkbox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF;
  color: #1297AC;
  border-radius: 38px;
  border: 1px solid #D8E4E4;
  transition: all 100ms linear;
}
.oval-checkbox:hover:not(.oval-checkbox_is-checked):not(.oval-checkbox_is-intermediate):not(.oval-checkbox_is-disabled) {
  background-color: #D8E4E4;
  color: #1297AC;
  border: none;
}
.oval-checkbox:active {
  background-color: #1297AC;
  color: #FFF;
  border: none;
}

.oval-checkbox_has-check.oval-checkbox_is-checked {
  position: relative;
}
.oval-checkbox_has-check.oval-checkbox_is-checked::after {
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  background: url("/assets/images/icons/arrow-white.svg") center no-repeat;
}

/**
 * @modifier is-checked
 * @for oval-checkbox
 */
.oval-checkbox_is-checked {
  background-color: #1297AC;
  color: #FFF;
  border: none;
}
.oval-checkbox_is-checked:hover {
  box-shadow: 0 0 5px #1297AC;
}

.oval-checkbox_is-intermediate {
  background-color: #1297AC;
  color: #FFF;
  border: none;
  position: relative;
}
.oval-checkbox_is-intermediate:hover {
  box-shadow: 0 0 5px #1297AC;
}
.oval-checkbox_is-intermediate::after {
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  background: url("/assets/images/icons/line.svg") center no-repeat;
}

.oval-checkbox_theme_blue {
  border-color: #979797;
}
.oval-checkbox_theme_blue:hover:not(.oval-checkbox_is-checked):not(.oval-checkbox_is-intermediate):not(.oval-checkbox_is-disabled) {
  background-color: #B7CBE2;
}
.oval-checkbox_theme_blue:active {
  background-color: #034FA8;
}
.oval-checkbox_theme_blue.oval-checkbox_is-checked, .oval-checkbox_theme_blue.oval-checkbox_is-intermediate {
  background-color: #034FA8;
}
.oval-checkbox_theme_blue.oval-checkbox_is-checked:hover, .oval-checkbox_theme_blue.oval-checkbox_is-intermediate:hover {
  box-shadow: 0 0 5px #034FA8;
}

.oval-checkbox_is-disabled {
  pointer-events: none;
  background-color: #CCC;
  opacity: 0.2;
}

.sso-no-access-page {
  box-sizing: border-box;
  height: 100%;
  padding: 0 23px 23px;
  display: flex;
  flex-direction: column;
}
.sso-no-access-page__header {
  height: 50px;
  display: flex;
  justify-content: right;
  align-items: center;
}
.sso-no-access-page__header_justify-content_space-between {
  justify-content: space-between;
}
.sso-no-access-page__logo {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 185px;
  height: 40px;
  top: 30px;
}
@media (max-width: 63.99em) {
  .sso-no-access-page__logo {
    position: unset;
    margin-top: 50px;
  }
}
@media (max-width: 47.99em) {
  .sso-no-access-page__logo {
    margin-top: 10px;
  }
}
.sso-no-access-page__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sso-no-access-page__title {
  color: var(--color-red);
  margin-bottom: 5px;
  font-size: 25px;
}
.sso-no-access-page__message {
  max-width: 500px;
  text-align: center;
  line-height: 24px;
}
@media (max-width: 47.99em) {
  .sso-no-access-page__message {
    max-width: 300px;
  }
}
.sso-no-access-page__lock {
  width: 30px;
  height: 40px;
  margin-bottom: 25px;
}
@media (max-width: 47.99em) {
  .sso-no-access-page__footer {
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
  }
}

/**
 * A modal that opens across all the page. It has a title and a close icon.
 *
 * @block page-modal
 */
.page-modal {
  width: 100%;
  height: 100%;
  background-color: #FFF;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12;
}

/**
 * @element header
 */
.page-modal__header {
  height: 64px;
  padding: 0 30px;
  display: flex;
  align-items: center;
}

/**
 * @element title
 */
.page-modal__title {
  font-size: 20px;
  flex: 1;
}

/**
 * @element content
 */
.page-modal__content {
  background-color: #F8F8F8;
  height: calc(100% - 64px);
}

.pcp-info {
  display: block;
}

.pcp-info__member-name {
  font-weight: bold;
  margin-bottom: 5px;
  padding-left: 5px;
}

.pcp-info__header {
  padding-left: 5px;
}

.pcp-info__description {
  margin: 10px 5px;
}
.pcp-info__description a {
  color: var(--main-color-dark-4);
  text-decoration: underline;
}

.pcp-info__separator {
  border-bottom: solid 1px var(--main-color-light-29);
  margin: 20px 5px;
}

.pcp-info__note {
  margin: 10px 5px 14px;
}

/**
 * When the detail view does not have anything to show (for example
 * when no employee is selected), we show a placeholder view such as
 * a user greeting.
 *
 * @block placeholder-view
 */
.placeholder-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

/**
 * Arrow used to point to a button as a hint. For example we point to the
 * "Add Employee" button on the Employees page to show the user where
 * to create an Employee.
 *
 * @element arrow
 */
.placeholder-view__arrow {
  position: absolute;
  width: 145px;
  top: 45px;
  right: 175px;
  color: var(--main-color);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  text-align: center;
}
.placeholder-view__arrow:after {
  position: absolute;
  content: "";
  width: 47px;
  height: 48px;
  left: 100%;
  bottom: 15px;
  margin-left: 10px;
  background: var(--svg-arrow) center center no-repeat;
}

/**
 * 1. Needs to be infront of the arrow element.
 *
 * @element content
 */
.placeholder-view__content {
  position: relative; /* 1 */
  z-index: 2; /* 1 */
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/**
 * 1. Can't set a padding top because it would break the flex vertical centering.
 *
 * @element title
 */
.placeholder-view__title {
  padding-bottom: 15px; /* 1 */
  color: var(--main-color);
  font-size: 34px;
  font-weight: 100;
}

/**
 * @element text
 */
.placeholder-view__text {
  font-size: 16px;
  max-width: 450px;
}

/**
 * @element icon
 */
.placeholder-view__icon {
  width: 94px;
  height: 101px;
  margin: 0 auto 10px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  /**
   * @modifier type
   * @value alert
   */
}
.placeholder-view__icon_type_alert {
  background-image: var(--svg-empty-alert);
}

/**
 * "Powered by SIMON".
 *
 * @block powered-by
 */
.powered-by {
  display: block;
  /**
   * @modifier is-centered
   */
  /**
   * @modifier color
   * @value white
   */
}
.powered-by_is-centered {
  text-align: center;
}
.powered-by_is-centered .powered-by__logo-container {
  width: auto;
}
.powered-by_color_white .powered-by__text,
.powered-by_color_white .powered-by__copyright {
  color: #FFF;
}

/**
 * @element text
 */
.powered-by__text {
  color: #B0A7A8;
  font-size: 13px;
  width: 100%;
}

.powered-by__copyright {
  padding-top: 5px;
  font-size: 13px;
  color: #B0A7A8;
}

.powered-by__logo-container {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.powered-by__simon-logo-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.powered-by__simon-logo-container_flex-direction_column-reverse {
  flex-direction: column-reverse;
}

.powered-by__vimly-logo-container {
  margin-top: 11px;
  margin-bottom: 8px;
}

.powered-by_is-collapsed {
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  margin-bottom: 5px;
}
.powered-by_is-collapsed .powered-by__logo {
  width: 100%;
}
.powered-by_is-collapsed .powered-by__text {
  width: 100px;
  position: absolute;
  top: 0;
  transform: rotate(90deg) translateX(50px);
  padding: 0;
}
@media screen and (max-height: 750px) {
  .powered-by_is-collapsed {
    height: 50px;
  }
  .powered-by_is-collapsed .powered-by__text {
    display: none;
  }
}

/**
 * Used to fix animation when main menu is expanding after a collapse.
 */
.powered-by_has-fixed-height .powered-by__copyright {
  height: 50px;
  overflow: hidden;
}

/**
 * The tiles that show on the login page.
 *
 * @block pre-auth-tiles
 */
.pre-auth-tiles {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

/**
 * @element container
 */
.pre-auth-tiles__container {
  display: flex;
  overflow: hidden;
  /**
   * Added in js when the container is non-scrollable.
   *
   * 1. Remove the last element's margin in order to exactly center
   * the elements.
   * 2. On mobile the width should exactly fit 3 tiles + their margins. Add
   * `!important` to over-ride any width added in js.
   *
   * @modifier is-centered
   */
}
.pre-auth-tiles__container_is-centered {
  justify-content: center;
}
.pre-auth-tiles__container_is-centered .pre-auth-tiles__tile:last-of-type {
  margin-right: 0; /* 1 */
}
@media (max-width: 31.24em) {
  .pre-auth-tiles__container {
    /* stylelint-disable declaration-no-important  */
    width: 336px !important; /* 2 */
    /* stylelint-enable declaration-no-important  */
  }
}

/**
 * 1. Needed to animate the translation done in js.
 * 2. Disable translation on mobile.
 *
 * @element content
 */
.pre-auth-tiles__content {
  display: flex;
  transition: transform 0.3s ease; /* 1 */
  padding: 15px 0;
}
@media (max-width: 31.24em) {
  .pre-auth-tiles__content {
    width: 100%;
    flex-wrap: wrap;
    /* stylelint-disable declaration-no-important  */
    transform: none !important; /* 2 */
    /* stylelint-enable declaration-no-important  */
    justify-content: space-between;
    padding-bottom: 0;
  }
}

/**
 * @element tile
 */
.pre-auth-tiles__tile {
  width: 102px;
  height: 102px;
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-shrink: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  background-color: #0D7383;
  transition: all 0.2s ease;
  /**
   * @modifier is-clickable
   */
  /**
   * A dummy element needed on mobile to make sure the wrapped flex elements
   * float to the left in case the last row has 2 elements.
   *
   * @modifier type
   * @value dummy
   */
}
@media (max-width: 31.24em) {
  .pre-auth-tiles__tile {
    margin-bottom: 15px;
  }
}
@media (min-width: 31.25em) {
  .pre-auth-tiles__tile {
    margin-right: 20px;
  }
}
.pre-auth-tiles__tile_is-clickable {
  cursor: pointer;
}
.pre-auth-tiles__tile_is-clickable:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.pre-auth-tiles__tile_type_dummy {
  opacity: 0;
  height: auto;
  margin-bottom: 0;
}
@media (min-width: 31.25em) {
  .pre-auth-tiles__tile_type_dummy {
    display: none;
  }
}

/**
 * @element tile-text
 */
.pre-auth-tiles__tile-text {
  display: flex;
  align-items: center;
  padding: 8px 0;
  flex-shrink: 0;
  text-align: center;
  font-size: 13px;
  color: #FFF;
}

/**
 * @element tile-icon
 */
.pre-auth-tiles__tile-icon {
  flex: 1;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pre-auth-tiles__tile-icon img {
  height: 100%;
  max-width: 50px;
  max-height: 50px;
}

/**
 * @element arrow
 */
.pre-auth-tiles__arrow {
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
  /**
   * @modifier type
   * @value previous
   */
  /**
   * @modifier is-disabled
   */
  /**
   * 1. zoom the x sign when we hover
   */
}
.pre-auth-tiles__arrow:after {
  content: "";
  width: 7px;
  height: 13px;
  background: url("/assets/images/icons/white-arrow.svg") center center no-repeat;
  background-size: 100% 100%;
  transition: all 0.2s ease;
}
.pre-auth-tiles__arrow_type_previous {
  transform: rotate(180deg);
}
.pre-auth-tiles__arrow_is-disabled {
  cursor: default;
  opacity: 0.4;
  pointer-events: none;
}
.pre-auth-tiles__arrow:hover:after {
  transform: scale(1.3); /* 1 */
}
@media (max-width: 31.24em) {
  .pre-auth-tiles__arrow {
    display: none;
  }
}

.print-enrollment-select-year {
  display: block;
}

.print-enrollment-select-year__field {
  height: 70px;
}
@media (min-width: 48em) {
  .print-enrollment-select-year__field {
    width: 165px;
  }
}

.print-enrollment-select-year__input-container {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.print-enrollment-select-year__apply-button {
  margin-left: 15px;
}

.print-enrollment-select-year__select-employees {
  margin-top: 10px;
}

.production-banner {
  z-index: 14;
  position: fixed;
  width: 100%;
  background: #D57F73;
  padding: 8px 0;
  display: flex;
}
.production-banner_position_bottom {
  bottom: 0;
}
.production-banner_position_top {
  top: 0;
}
.production-banner_position_top .production-banner__arrow {
  transform: rotate(180deg);
}

.production-banner__text {
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  flex: 1;
}

.production-banner__arrow {
  width: 35px;
  background-size: 14px 22px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/assets/images/icons/arrow-up-white.svg");
  height: 20px;
}

.product-types {
  text-align: center;
  width: 102px;
  font-size: 13px;
  font-style: italic;
}

.product-types__empty-text {
  color: #CCCCCC;
}
.product-types__empty-text_is-selected {
  color: #FFFFFF;
  opacity: 80%;
}

.product-types__modal {
  overflow: auto;
  position: absolute;
  top: -7px;
  right: -17.5px;
  width: 137px;
  z-index: 2;
  border-radius: 4px;
  background-color: #FFFFFF;
  padding: 7px 0 11px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  animation: product-types__fade-in 300ms linear;
  cursor: default;
}

.product-types__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  width: 100%;
  line-height: 20px;
}

.product-types__product-type {
  font-style: normal;
  text-overflow: ellipsis;
  max-width: 90%;
  white-space: nowrap;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  overflow: hidden;
  color: #494949;
}

@keyframes product-types__fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/**
 * Similar to the detail page, used in prospect detail.
 *
 * @block profile-page
 */
.profile-page {
  height: 100%;
}
@media (max-width: 47.99em) {
  .profile-page .profile-page__header {
    display: block;
    height: 120px;
    overflow-y: hidden;
  }
  .profile-page .profile-page__body {
    height: calc(100% - 120px);
  }
  .profile-page .profile-page__header-content {
    display: flex;
    flex-direction: column;
    height: auto;
    align-items: flex-start;
  }
  .profile-page .profile-page__header-actions,
  .profile-page .profile-page__header-nav {
    width: 100%;
  }
  .profile-page .profile-page__header-actions {
    height: 60px;
    flex-shrink: 0;
    order: 1;
    box-sizing: border-box;
    border-bottom: solid 1px #DADADA;
  }
  .profile-page .profile-page__header-action:first-child {
    flex: 1;
  }
  .profile-page .profile-page__header-nav {
    order: 2;
    height: auto;
    height: 77px;
    overflow-x: scroll;
  }
  .profile-page .profile-page__header-nav-item {
    padding: 0;
    flex: 1;
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 71.865em) {
  .profile-page_split-header-until_1150 .profile-page__header {
    display: block;
    height: 120px;
    overflow-y: hidden;
  }
  .profile-page_split-header-until_1150 .profile-page__body {
    height: calc(100% - 120px);
  }
  .profile-page_split-header-until_1150 .profile-page__header-content {
    display: flex;
    flex-direction: column;
    height: auto;
    align-items: flex-start;
  }
  .profile-page_split-header-until_1150 .profile-page__header-actions,
  .profile-page_split-header-until_1150 .profile-page__header-nav {
    width: 100%;
  }
  .profile-page_split-header-until_1150 .profile-page__header-actions {
    height: 60px;
    flex-shrink: 0;
    order: 1;
    box-sizing: border-box;
    border-bottom: solid 1px #DADADA;
  }
  .profile-page_split-header-until_1150 .profile-page__header-action:first-child {
    flex: 1;
  }
  .profile-page_split-header-until_1150 .profile-page__header-nav {
    order: 2;
    height: auto;
    height: 77px;
    overflow-x: scroll;
  }
  .profile-page_split-header-until_1150 .profile-page__header-nav-item {
    padding: 0;
    flex: 1;
    display: flex;
    justify-content: center;
  }
}

.profile-page__header {
  background-color: #EAEAEA;
  height: 60px;
}

.profile-page__header-content {
  height: 100%;
  display: flex;
  align-items: center;
}

/**
 * 1. WAT?! Looks like this element is never used?
 */
.profile-page__title {
  font-size: 20px;
  padding-left: 20px;
  display: none; /* 1 */
}

@media (min-width: 48em) {
  .profile-page__header-nav {
    flex: 1;
  }
}

.profile-page__header-nav-content {
  display: flex;
  width: 100%;
  height: 60px;
}

.profile-page__header-nav-menu {
  display: flex;
  width: 22px;
  align-items: center;
  margin-left: 18px;
}

.profile-page__header-actions {
  display: flex;
  align-items: center;
}
@media (min-width: 48em) {
  .profile-page__header-actions {
    justify-content: flex-start;
  }
}
.profile-page__header-actions_height_100 {
  height: 100%;
}

.profile-page__header-right {
  display: flex;
  align-items: center;
}

.profile-page__header-left {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  height: 100%;
}
@media (max-width: 47.99em) {
  .profile-page__header-left {
    justify-content: flex-start;
  }
}

.profile-page__box-actions {
  display: flex;
  align-items: center;
}

.profile-page__refresh {
  height: 40px;
  margin-left: 10px;
  position: relative;
  width: 40px;
}
@media (min-width: 48em) {
  .profile-page__refresh {
    display: none;
  }
}

.profile-page__header-action {
  padding-left: 10px;
  padding-right: 15px;
}
.profile-page__header-action_padding-right_5 {
  padding-right: 5px;
}
.profile-page__header-action_height_100 {
  height: 100%;
}

.profile-page__body {
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px);
  overflow: scroll;
}
.profile-page__body_without_scroll {
  overflow: visible;
}
.profile-page__body_without_scroll .profile-page__side,
.profile-page__body_without_scroll .profile-page__box,
.profile-page__body_without_scroll .profile-page__box-content {
  height: 100%;
  overflow: auto;
  padding: 0;
}

/**
 * 1. Don't want the bottom rows of the mini tables to stick to the bottom,
 * especially if they have a drop menu.
 */
.profile-page__side,
.profile-page__main {
  flex: 1;
}
@media (min-width: 48em) {
  .profile-page__side,
  .profile-page__main {
    padding-bottom: 60px; /* 1 */
  }
}

.profile-page__side {
  background-color: #F8F8F8;
}
.profile-page__side .profile-page__box {
  padding: 0;
  background-color: #FFFFFF;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
}
@media (min-width: 48em) {
  .profile-page__side .profile-page__box {
    margin: 20px;
  }
}
.profile-page__side .profile-page__box-content {
  padding: 0;
}
.profile-page__side .profile-page__box-header {
  border-bottom: solid 1px #E9E9E9;
}

.profile-page__box {
  padding: 10px 0;
}
.profile-page__box:first-child {
  padding-top: 0;
}

.profile-page__box-header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 55px;
}
@media (min-width: 48em) {
  .profile-page__box-header_is-hidden-from-desktop {
    display: none;
  }
}

.profile-page__box-left {
  flex: 1;
  display: flex;
}

.profile-page__box-collapser {
  padding-right: 15px;
}

.profile-page__box-title {
  font-weight: bold;
  font-size: 16;
  color: #4A4A4A;
  display: flex;
  align-items: center;
}
.profile-page__box-title_icon_building:before {
  content: "";
  margin-right: 4px;
  width: 10px;
  height: 12px;
  background: url("/assets/images/themes/blue/icons/building.svg") center no-repeat;
}
.profile-page__box-title_icon_contact:before {
  content: "";
  margin-right: 4px;
  width: 13px;
  height: 15px;
  background: url("/assets/images/themes/blue/icons/contact.svg") center no-repeat;
}

.profile-page__box.profile-page__box_is-loading {
  border: 0;
}
.profile-page__box.profile-page__box_is-loading .profile-page__box-title {
  padding-left: 0;
  /**
   * @for box-title
   */
}
.profile-page__box.profile-page__box_is-loading .profile-page__box-title_padding-left_10 {
  padding-left: 10px;
}

.profile-page__box-content {
  padding: 0 20px;
}
.profile-page__box-content_desktop-only-padding {
  padding: 0;
}

.profile-page__empty-box-header {
  height: 45px;
  background-color: #F8F8F8;
  position: relative;
}
@media (max-width: 47.99em) {
  .profile-page__empty-box-header {
    display: none;
  }
}

.profile-page__empty-box-container {
  border-top: 1px solid #DADADA;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.profile-page__empty-box-content {
  padding-top: 60px;
  background-position: top center;
  background-repeat: no-repeat;
}

.profile-page__empty-box-refresh {
  position: absolute;
  right: 10px;
  top: 0;
  height: 100%;
  width: 40px;
}

.profile-page__empty-box-text {
  font-size: 25px;
  color: #034FA8;
  padding-bottom: 20px;
  text-align: center;
}
@media (max-width: 47.99em) {
  .profile-page__empty-box-text {
    font-size: 20px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

.profile-page__empty-box-action {
  display: flex;
  justify-content: center;
}

.profile-page__empty-box_type_quotes .profile-page__empty-box-content {
  background-image: url("/assets/images/themes/blue/icons/quotes.svg");
  background-size: 50px 42px;
}

.profile-page__empty-box_type_documents .profile-page__empty-box-content {
  background-image: url("/assets/images/themes/blue/icons/documents.svg");
  background-size: 46px 53px;
}

.profile-page_without-header .profile-page__body {
  height: 100%;
}

/**
 * @block profiles
 *
 * 1. On FF if you select the text in the list, you can no longer drag
 * the scrollbar. So we disable selection.
 *
 * search-input
 * |-search
 * |-container
 * |--profile
 * |---icon
 * |---info
 * |----title
 * |----subtitle
*/
.profiles {
  height: 100%;
  display: block;
  background: #FFF;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none; /* 1 */
}
@media (min-width: 48em) {
  .profiles {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    border: solid thin #C7D7D7;
  }
}

/**
 * @element container
 */
@media (min-width: 48em) {
  .profiles__container {
    flex: 1;
    overflow: auto;
  }
}

/**
 * @element type-options
 */
.profiles__type-options {
  display: flex;
  background: #F9F9F9;
  height: 62px;
  border-bottom: solid thin #C7D7D7;
}
@media (max-width: 47.99em) {
  .profiles__type-options {
    border-top: solid thin #C7D7D7;
  }
}

/**
 * @element type-option
 */
.profiles__type-option {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  color: #5C5050;
  font-size: 14px;
  padding: 0 30px;
  cursor: pointer;
}
.profiles__type-option:after {
  position: absolute;
  content: "";
  height: 4px;
  background-color: #1297AC;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.profiles__type-option:hover:after, .profiles__type-option_is-active:after {
  opacity: 1;
}
.profiles__type-option_is-active {
  font-weight: bold;
}

/**
 * @element search
 */
.profiles__search {
  height: 52px;
  border-bottom: solid thin #C7D7D7;
}

/**
 * 1. Needed to absolutely position the user-type element.
 *
 * @element profile
 */
.profiles__profile {
  display: flex;
  position: relative; /* [1] */
  flex-direction: row;
  height: 74px;
  box-sizing: border-box;
  border-bottom: solid thin #C7D7D7;
}
.profiles__profile:hover {
  background-color: #F2F6F7;
}

@media (max-width: 47.99em) {
  .profiles__profile-empty {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-items: center;
    height: 250px;
    border-bottom: solid thin #C7D7D7;
  }
}

/**
 * @element info
 */
.profiles__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/**
 * @element icon
 */
.profiles__icon {
  width: 59px;
  background: center center no-repeat;
  /**
   * @modifier type
   * @for icon
   * @value EE
   */
  /**
   * @modifier type
   * @for icon
   * @value CE
   */
  /**
   * @modifier type
   * @for icon
   * @value ER
   */
  /**
   * @modifier type
   * @for icon
   * @value EP
   */
  /**
   * @modifier type
   * @for icon
   * @value PR
   */
  /**
   * @modifier type
   * @for icon
   * @value GA
   */
  /**
   * @modifier type
   * @for icon
   * @value BS
   */
}
.profiles__icon_type_EE {
  background-image: url("/assets/images/icons/profiles/employee-purple.svg");
  background-size: 18px 18.6px;
}
.profiles__icon_type_CE {
  background-image: url("/assets/images/icons/profiles/employee-orange.svg");
  background-size: 18px 18.6px;
}
.profiles__icon_type_ER {
  background-image: url("/assets/images/icons/profiles/group-red.svg");
  background-size: 25px 16.3px;
}
.profiles__icon_type_EP {
  background-image: url("/assets/images/icons/profiles/group-orange.svg");
  background-size: 25px 16.3px;
}
.profiles__icon_type_PR {
  background-image: url("/assets/images/icons/profiles/group-green.svg");
  background-size: 25px 16.3px;
}
.profiles__icon_type_GA {
  background-image: url("/assets/images/icons/profiles/group-blue.svg");
  background-size: 25px 16.3px;
}
.profiles__icon_type_BS {
  background-image: url("/assets/images/icons/profiles/group-purple.svg");
  background-size: 25px 16.3px;
}

/**
 * @element user-type
 */
.profiles__user-type {
  position: absolute;
  top: 10px;
  right: 10px;
}

/**
 * @element title
 */
.profiles__title {
  font-weight: bold;
  color: #5C5050;
  font-size: 16px;
  margin-bottom: 2px;
}

/**
 * @element subtitle
 */
.profiles__subtitle {
  color: #939393;
  font-size: 12px;
  margin-bottom: 2px;
}

/**
 * The dots menu in quoting.
 */
.dots-menu-vertical {
  display: block;
}
.dots-menu-vertical_color_transparent .dots-menu-vertical__trigger {
  background-color: transparent;
}
.dots-menu-vertical_color_grey .dots-menu-vertical__trigger {
  background-color: #D6D6D6;
}

.dots-menu-vertical__trigger {
  width: 22px;
  height: 30px;
  background-color: #E7E7E7;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dots-menu-vertical__trigger::after {
  content: "";
  background: url("/assets/images/icons/three-dots.svg") center no-repeat;
  width: 16px;
  height: 4px;
  transform: rotate(90deg);
  transition: transform 300ms linear;
}
.dots-menu-vertical__trigger::before {
  background-image: var(--svg-three-dots);
  content: "";
}
.dots-menu-vertical__trigger:hover::after, .dots-menu-vertical__trigger:focus::after {
  background: var(--svg-three-dots) center no-repeat;
}
.dots-menu-vertical__trigger_is-dark {
  background-color: #D8D8D8;
}

.dots-menu-vertical_is-open .dots-menu-vertical__trigger::after {
  transform: rotate(0);
}

.dots-menu-vertical__popup {
  width: 245px;
  background-color: #FFF;
  border-radius: 3px;
}

.dots-menu-vertical__popup-header {
  height: 30px;
  display: flex;
  justify-content: flex-end;
  padding-right: 14px;
}

.dots-menu-vertical__popup-close-button {
  width: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0;
  position: relative;
}
.dots-menu-vertical__popup-close-button::after {
  animation: dots-menu-vertical__rotate 300ms linear;
  content: "";
  background: var(--svg-three-dots) center no-repeat;
  width: 16px;
  height: 4px;
}

.dots-menu-vertical__popup-content {
  padding-bottom: 15px;
}

.dots-menu-vertical__section {
  margin-bottom: 10px;
  /**
   * @for section
   */
}
.dots-menu-vertical__section_has-border:after {
  height: 1px;
  background-color: #DADADA;
  content: "";
  display: block;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 10px;
}
.dots-menu-vertical__section:first-child {
  padding-top: 0;
}

.dots-menu-vertical__section-title {
  color: #9B9B9B;
  font-size: 11px;
  height: 26px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  padding-left: 20px;
}
.dots-menu-vertical__section-title:before {
  margin-right: 5px;
  content: "";
}
.dots-menu-vertical__section-title_icon_document:before {
  width: 10px;
  height: 12px;
  background: url("/assets/images/themes/blue/icons/document.svg") center no-repeat;
}
.dots-menu-vertical__section-title_icon_link:before {
  width: 13px;
  height: 7px;
  background: url("/assets/images/themes/blue/icons/link.svg") center no-repeat;
}

.dots-menu-vertical__item {
  min-height: 26px;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 10px;
}
.dots-menu-vertical__item:not(.dots-menu-vertical__item_is-disabled):hover {
  background-color: #EDEDED;
}
.dots-menu-vertical__item_font-weight_600 {
  font-weight: 600;
}
.dots-menu-vertical__item_min-height_20 {
  min-height: 20px;
}
.dots-menu-vertical__item_is-negative {
  color: var(--color-red);
}
.dots-menu-vertical__item_is-positive {
  color: var(--main-color);
}
.dots-menu-vertical__item_is-disabled {
  color: #9B9B9B;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dots-menu-vertical__item_icon-eye {
  display: flex;
  align-items: center;
}
.dots-menu-vertical__item_icon-eye:before {
  content: "";
  width: 15px;
  height: 8px;
  margin-right: 5px;
  background: var(--svg-eye-2) left center no-repeat;
  background-size: 100% 100%;
}
.dots-menu-vertical__item_icon-pdf {
  display: flex;
  align-items: center;
}
.dots-menu-vertical__item_icon-pdf:before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 7px;
  background: var(--svg-pdf) center center no-repeat;
  background-size: 100% 100%;
}
.dots-menu-vertical__item_icon-spreadsheet {
  display: flex;
  align-items: center;
}
.dots-menu-vertical__item_icon-spreadsheet:before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 7px;
  background: var(--svg-excel) center center no-repeat;
  background-size: 100% 100%;
}
.dots-menu-vertical__item_icon-delete {
  display: flex;
  align-items: center;
}
.dots-menu-vertical__item_icon-delete:before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 7px;
  background: url("/assets/images/icons/red-delete.svg") center center no-repeat;
  background-size: 100% 100%;
}
.dots-menu-vertical__item_icon-add {
  display: flex;
  align-items: center;
  gap: 7px;
}
.dots-menu-vertical__item_icon-add:before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--svg-plus) center center no-repeat;
  background-size: 100% 100%;
}

@keyframes dots-menu-vertical__rotate {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0);
  }
}
:root {
  --table-header-top: 0;
}

/**
 * The block responsible for tables in quoting.
 * Tables can only be displayed using `display: grid`.
 *
 * Follow the implementation of the `for_(table-name)` modifier
 * to build the table.
 *
 * 1. Allows for smoother scroll
 */
.q-large-table {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: scroll;
  transform: translateZ(0); /* 1 */
  will-change: transform; /* 1 */
}
.q-large-table_overflow-y_hidden {
  overflow-y: hidden;
}
.q-large-table_max-height_30vh {
  max-height: 30vh;
}
.q-large-table_has-horizontal-scrollbar {
  overflow-x: scroll;
}
.q-large-table_overflow_hidden {
  overflow: hidden;
}
.q-large-table_grey-border {
  border: 1px solid var(--main-color-light-25);
}
.q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) {
  /**
   * 1. If the cell is viewed on desktop it is always centered.
   **/
}
@media (max-width: 63.99em) {
  .q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) {
    /**
     * 1. The default padding such that the row will not stick to the top.
     */
    /**
    * 1. On tablet/mobile the scroll is not on the table body.
    */
  }
  .q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row {
    padding-top: 18px; /* 1 */
  }
  .q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__body {
    overflow-y: visible; /* 1 */
    box-shadow: none;
  }
}
@media (min-width: 64em) {
  .q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell {
    display: flex;
    align-items: center; /* 1 */
    /**
     * @for cell
     */
    /**
     * @for cell
     */
  }
  .q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_in-header {
    align-items: flex-start;
  }
  .q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_flex-start {
    align-items: flex-start;
  }
  .q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_justify-content_flex-start {
    justify-content: flex-start;
  }
  .q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_center {
    align-items: center;
  }
  .q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_right {
    align-items: flex-end;
  }
}
@media (max-width: 47.99em) {
  .q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__paginator {
    height: 50px;
  }
}
@media (max-width: 47.99em) {
  .q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__paginator {
    cursor: pointer;
    height: 50px;
  }
}
@media (max-width: 63.99em) {
  .q-large-table:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__header-container_has-small-screen-header {
    height: 40px;
    flex-shrink: 0;
  }
}
.q-large-table_has-main-color-header .q-large-table__cell_in-header {
  color: var(--main-color);
  font-weight: 500;
  font-size: 10px;
}
@media (max-width: 63.99em) {
  .q-large-table_scrollable-from_desktop {
    overflow: unset;
  }
}
.q-large-table_desktop-at_1150:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) {
  /**
   * 1. If the cell is viewed on desktop it is always centered.
   **/
}
@media (max-width: 71.865em) {
  .q-large-table_desktop-at_1150:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) {
    /**
     * 1. The default padding such that the row will not stick to the top.
     */
    /**
    * 1. On tablet/mobile the scroll is not on the table body.
    */
  }
  .q-large-table_desktop-at_1150:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row {
    padding-top: 18px; /* 1 */
  }
  .q-large-table_desktop-at_1150:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__body {
    overflow-y: visible; /* 1 */
    box-shadow: none;
  }
}
@media (min-width: 71.875em) {
  .q-large-table_desktop-at_1150:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell {
    display: flex;
    align-items: center; /* 1 */
    /**
     * @for cell
     */
    /**
     * @for cell
     */
  }
  .q-large-table_desktop-at_1150:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_in-header {
    align-items: flex-start;
  }
  .q-large-table_desktop-at_1150:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_flex-start {
    align-items: flex-start;
  }
  .q-large-table_desktop-at_1150:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_justify-content_flex-start {
    justify-content: flex-start;
  }
  .q-large-table_desktop-at_1150:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_center {
    align-items: center;
  }
  .q-large-table_desktop-at_1150:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_right {
    align-items: flex-end;
  }
}
@media (max-width: 47.99em) {
  .q-large-table_desktop-at_1150:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__paginator {
    height: 50px;
  }
}
.q-large-table_desktop-at_1200:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) {
  /**
   * 1. If the cell is viewed on desktop it is always centered.
   **/
}
@media (max-width: 74.99em) {
  .q-large-table_desktop-at_1200:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) {
    /**
     * 1. The default padding such that the row will not stick to the top.
     */
    /**
    * 1. On tablet/mobile the scroll is not on the table body.
    */
  }
  .q-large-table_desktop-at_1200:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row {
    padding-top: 18px; /* 1 */
  }
  .q-large-table_desktop-at_1200:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__body {
    overflow-y: visible; /* 1 */
    box-shadow: none;
  }
}
@media (min-width: 75em) {
  .q-large-table_desktop-at_1200:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell {
    display: flex;
    align-items: center; /* 1 */
    /**
     * @for cell
     */
    /**
     * @for cell
     */
  }
  .q-large-table_desktop-at_1200:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_in-header {
    align-items: flex-start;
  }
  .q-large-table_desktop-at_1200:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_flex-start {
    align-items: flex-start;
  }
  .q-large-table_desktop-at_1200:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_justify-content_flex-start {
    justify-content: flex-start;
  }
  .q-large-table_desktop-at_1200:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_center {
    align-items: center;
  }
  .q-large-table_desktop-at_1200:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_right {
    align-items: flex-end;
  }
}
@media (max-width: 47.99em) {
  .q-large-table_desktop-at_1200:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__paginator {
    height: 50px;
  }
}
.q-large-table_desktop-at_1300:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) {
  /**
   * 1. If the cell is viewed on desktop it is always centered.
   **/
}
@media (max-width: 81.24em) {
  .q-large-table_desktop-at_1300:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) {
    /**
     * 1. The default padding such that the row will not stick to the top.
     */
    /**
    * 1. On tablet/mobile the scroll is not on the table body.
    */
  }
  .q-large-table_desktop-at_1300:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row {
    padding-top: 18px; /* 1 */
  }
  .q-large-table_desktop-at_1300:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__body {
    overflow-y: visible; /* 1 */
    box-shadow: none;
  }
}
@media (min-width: 81.25em) {
  .q-large-table_desktop-at_1300:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell {
    display: flex;
    align-items: center; /* 1 */
    /**
     * @for cell
     */
    /**
     * @for cell
     */
  }
  .q-large-table_desktop-at_1300:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_in-header {
    align-items: flex-start;
  }
  .q-large-table_desktop-at_1300:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_flex-start {
    align-items: flex-start;
  }
  .q-large-table_desktop-at_1300:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_justify-content_flex-start {
    justify-content: flex-start;
  }
  .q-large-table_desktop-at_1300:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_center {
    align-items: center;
  }
  .q-large-table_desktop-at_1300:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_right {
    align-items: flex-end;
  }
}
@media (max-width: 47.99em) {
  .q-large-table_desktop-at_1300:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__paginator {
    height: 50px;
  }
}
@media (max-width: 81.24em) {
  .q-large-table_desktop-at_1300 .q-large-table__header-container_has-small-screen-header {
    height: 40px;
  }
}
.q-large-table_desktop-at_1400:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) {
  /**
   * 1. If the cell is viewed on desktop it is always centered.
   **/
}
@media (max-width: 87.49em) {
  .q-large-table_desktop-at_1400:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) {
    /**
     * 1. The default padding such that the row will not stick to the top.
     */
    /**
    * 1. On tablet/mobile the scroll is not on the table body.
    */
  }
  .q-large-table_desktop-at_1400:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row {
    padding-top: 18px; /* 1 */
  }
  .q-large-table_desktop-at_1400:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__body {
    overflow-y: visible; /* 1 */
    box-shadow: none;
  }
}
@media (min-width: 87.5em) {
  .q-large-table_desktop-at_1400:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell {
    display: flex;
    align-items: center; /* 1 */
    /**
     * @for cell
     */
    /**
     * @for cell
     */
  }
  .q-large-table_desktop-at_1400:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_in-header {
    align-items: flex-start;
  }
  .q-large-table_desktop-at_1400:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_flex-start {
    align-items: flex-start;
  }
  .q-large-table_desktop-at_1400:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_justify-content_flex-start {
    justify-content: flex-start;
  }
  .q-large-table_desktop-at_1400:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_center {
    align-items: center;
  }
  .q-large-table_desktop-at_1400:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_right {
    align-items: flex-end;
  }
}
@media (max-width: 47.99em) {
  .q-large-table_desktop-at_1400:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__paginator {
    height: 50px;
  }
}
.q-large-table_desktop-at_1600:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) {
  /**
   * 1. If the cell is viewed on desktop it is always centered.
   **/
}
@media (max-width: 99.99em) {
  .q-large-table_desktop-at_1600:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) {
    /**
     * 1. The default padding such that the row will not stick to the top.
     */
    /**
    * 1. On tablet/mobile the scroll is not on the table body.
    */
  }
  .q-large-table_desktop-at_1600:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row {
    padding-top: 18px; /* 1 */
  }
  .q-large-table_desktop-at_1600:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__body {
    overflow-y: visible; /* 1 */
    box-shadow: none;
  }
}
@media (min-width: 100em) {
  .q-large-table_desktop-at_1600:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell {
    display: flex;
    align-items: center; /* 1 */
    /**
     * @for cell
     */
    /**
     * @for cell
     */
  }
  .q-large-table_desktop-at_1600:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_in-header {
    align-items: flex-start;
  }
  .q-large-table_desktop-at_1600:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_flex-start {
    align-items: flex-start;
  }
  .q-large-table_desktop-at_1600:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_justify-content_flex-start {
    justify-content: flex-start;
  }
  .q-large-table_desktop-at_1600:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_center {
    align-items: center;
  }
  .q-large-table_desktop-at_1600:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_align_right {
    align-items: flex-end;
  }
}
@media (max-width: 47.99em) {
  .q-large-table_desktop-at_1600:not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__paginator {
    height: 50px;
  }
}

/**
 * 1. Add z-index so the box-shadow shows on top of next element.
 */
.q-large-table__header-container {
  top: 0;
  position: sticky;
  z-index: 1; /* 1 */
  flex-shrink: 0;
  background-color: #F8F8F8;
}
@media (max-width: 63.99em) {
  .q-large-table__header-container_header-from_desktop .q-large-table__refresh {
    display: none;
  }
}
@media (max-width: 71.865em) {
  .q-large-table__header-container_header-from_1150 .q-large-table__refresh {
    display: none;
  }
}
@media (max-width: 74.99em) {
  .q-large-table__header-container_header-from_1200 .q-large-table__refresh {
    display: none;
  }
}
@media (max-width: 81.24em) {
  .q-large-table__header-container_header-from_1300 .q-large-table__refresh {
    display: none;
  }
}
@media (max-width: 87.49em) {
  .q-large-table__header-container_header-from_1400 .q-large-table__refresh {
    display: none;
  }
}
@media (max-width: 99.99em) {
  .q-large-table__header-container_header-from_1600 .q-large-table__refresh {
    display: none;
  }
}
@media (max-width: 47.99em) {
  .q-large-table__header-container_header-from_tablet .q-large-table__refresh {
    display: none;
  }
}
.q-large-table__header-container_has-box-shadow {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}
.q-large-table__header-container_top_table-header-top {
  top: var(--table-header-top);
}
.q-large-table__header-container_has-light-border-bottom {
  border-bottom: 1px solid #EAEAEA;
}
.q-large-table__header-container_top_50 {
  top: 50px;
}
.q-large-table__header-container_position_relative {
  position: relative;
}

.q-large-table__refresh {
  display: block;
  position: absolute;
  right: 10px;
  top: 0;
  height: 100%;
  width: 40px;
}

.q-large-table__row {
  display: none;
  box-sizing: border-box;
  grid-column-gap: 10px;
  background-color: #FFF;
  border-bottom: 1px solid #DADADA;
}
.q-large-table__row_is-error {
  box-sizing: border-box;
  border: 1px solid #D57F73;
  position: relative;
}
.q-large-table__row_is-error::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--svg-field-error);
  width: 12px;
  height: 12px;
}
.q-large-table__row_text-size_14 {
  font-size: 14px;
}
.q-large-table__row_text-size_16 {
  font-size: 16px;
}
.q-large-table__row_is-borderless {
  border: 0;
  border-top: 0;
}
.q-large-table__row_is-highlighted {
  background-color: var(--main-color-light-11);
}
.q-large-table__row_has-border-top {
  border-top: 1px solid #DADADA;
}
.q-large-table__row_last-row_border-bottom:last-child {
  border-bottom: 1px solid #DADADA;
}
@media (min-width: 48em) {
  .q-large-table__row_has-border-bottom-from-tablet {
    border-bottom: 1px solid #DADADA;
  }
}
@media (max-width: 47.99em) {
  .q-large-table__row_has-full-border-until-tablet {
    border: 1px solid var(--main-color-light-21);
    border-bottom: none;
  }
  .q-large-table__row_has-full-border-until-tablet:last-child {
    border-bottom: 1px solid var(--main-color-light-21);
  }
}
.q-large-table__row_has-border-bottom {
  border-bottom: 1px solid #DADADA;
}
.q-large-table__row_font_light {
  font-weight: 200;
}
.q-large-table__row_has-padding {
  padding-top: 20px;
}
.q-large-table__row_has-padding-vertical_15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.q-large-table__row_border-top_dark-grey {
  border-top: 1px solid var(--main-color-light-22);
}
.q-large-table__row_border-top_light-grey {
  border-top: 1px solid #EAEAEA;
}
.q-large-table__row_background-color_light-grey {
  background-color: #EAEAEA;
}
.q-large-table__row_background-color_main {
  background-color: var(--main-color-light-23);
}
.q-large-table__row_border-bottom_none {
  border-bottom: none;
}
.q-large-table__row_has-light-border-bottom {
  border-bottom: 1px solid #EAEAEA;
}
.q-large-table__row_border-bottom_light-blue {
  border-bottom: 1px solid var(--main-color-light-24);
}
.q-large-table__row_border-bottom_grey {
  border-bottom: 1px solid var(--main-color-light-29);
}
.q-large-table__row_border-bottom_last-child_none:last-child {
  border-bottom: none;
}
@media (min-width: 48em) {
  .q-large-table__row_from-tablet_border-bottom_last-child_none:last-child {
    border-bottom: none;
  }
}
.q-large-table__row_has-box-shadow {
  box-shadow: 4px 2px 4px 0 rgba(0, 0, 0, 0.12);
}
.q-large-table__row_grid-column-gap_0 {
  grid-column-gap: 0;
}
.q-large-table__row_grey-border {
  border: 1px solid var(--main-color-light-25);
}

.q-large-table__header {
  display: none;
  box-sizing: border-box;
  grid-column-gap: 10px;
  width: 100%;
  border: 0;
}
.q-large-table__header_grid-column-gap_0 {
  grid-column-gap: 0;
}
.q-large-table__header_grey-border {
  border: 1px solid var(--main-color-light-25);
}
.q-large-table__header_color_dark-grey {
  background-color: #EAEAEA;
}

.q-large-table__info {
  font-family: "Montserrat", sans-serif;
  text-transform: none;
  color: #9B9B9B;
  font-size: 10px;
}

.q-large-table__body {
  flex: 1;
  box-sizing: border-box;
  z-index: 0;
}
.q-large-table__body_last-row_border-bottom_none .q-large-table__row:last-child {
  border-bottom: none;
}

/**
 * 1. Allows content to overflow outside the cells, which allows text overflow
 * styles to apply. ex: ellipsis.
 */
.q-large-table__cell {
  cursor: default;
  min-width: 0; /* 1 */
  /**
   * for cell
   */
  /**
   * We add an arrow if it's sortable.
   *
   * @for cell
   */
  /**
   * @for cell
   */
  /**
   * @for cell
   */
}
.q-large-table__cell_in-header {
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.q-large-table__cell_in-header * {
  font-family: inherit;
}
.q-large-table__cell_is-error {
  color: var(--color-red);
}
.q-large-table__cell_is-error.q-large-table__cell_is-sortable:hover {
  color: var(--color-red-dark);
  font-weight: 700;
}
.q-large-table__cell_is-error.q-large-table__cell_is-sortable .q-large-table__sort-arrow_dir_asc {
  border-bottom: solid 5px var(--color-red);
}
.q-large-table__cell_is-error.q-large-table__cell_is-sortable .q-large-table__sort-arrow_dir_desc {
  border-top: solid 5px var(--color-red);
}
.q-large-table__cell_color_red {
  color: var(--color-red);
}
.q-large-table__cell_is-aligned-end {
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.q-large-table__cell_is-top-right {
  display: flex;
  justify-content: flex-end;
  align-self: start;
}
.q-large-table__cell_is-centered {
  display: flex;
  justify-content: center;
}
.q-large-table__cell_is-sortable:not(.q-large-table__cell_is-error) {
  color: var(--main-color);
}
.q-large-table__cell_is-sortable:not(.q-large-table__cell_is-error):hover {
  font-weight: 700;
  color: var(--main-color-dark);
}
.q-large-table__cell_is-sortable:not(.q-large-table__cell_is-error):not(.q-large-table__cell_align_right) .q-large-table__sort-arrow-container {
  min-width: 0;
}
.q-large-table__cell_is-clickable {
  cursor: pointer;
}
.q-large-table__cell_in-header.q-large-table__cell_is-clickable:not(.q-large-table__cell_is-error):hover {
  font-weight: 700;
  color: var(--main-color-dark);
}
@media (max-width: 71.865em) {
  .q-large-table__cell_display_block-until-1150 {
    display: block;
  }
}
.q-large-table__cell_padding-left_10 {
  padding-left: 10px;
}
.q-large-table__cell_padding-left_15 {
  padding-left: 15px;
}
.q-large-table__cell_padding-left_20 {
  padding-left: 20px;
}
.q-large-table__cell_padding-bottom_20 {
  padding-bottom: 20px;
}
.q-large-table__cell_padding_20 {
  padding: 20px;
}
.q-large-table__cell_padding_10 {
  padding: 10px;
}
.q-large-table__cell_display_flex {
  display: flex;
}
.q-large-table__cell_padding-left_25 {
  padding-left: 25px;
}
.q-large-table__cell_justify-content_flex-end {
  justify-content: flex-end;
}
.q-large-table__cell_align-items_center {
  align-items: center;
}
.q-large-table__cell_padding-vertical_10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.q-large-table__cell_padding-horizontal_10 {
  padding-left: 10px;
  padding-right: 10px;
}
.q-large-table__cell_padding-horizontal_20 {
  padding: 0 20px;
}
.q-large-table__cell_padding-top_20 {
  padding-top: 20px;
}
.q-large-table__cell_has-border-left {
  border: solid 0 var(--main-color-light-29);
  border-left-width: 1px;
}
.q-large-table__cell_has-dark-border-left {
  border: solid 0 var(--main-color-light-25);
  border-left-width: 1px;
}

.q-large-table__sort-arrow-container {
  min-width: 20px;
  display: inline-block;
}

.q-large-table__sort-arrow {
  display: inline-block;
  transform: translateY(-1px);
  margin-right: 4px;
  margin-left: 10px;
  border-left: solid 4px transparent;
  border-right: solid 4px transparent;
  /**
   * @for sort-arrow
   */
  /**
   * @for sort-arrow
   */
}
.q-large-table__sort-arrow_dir_asc {
  border-bottom: solid 5px var(--main-color);
}
.q-large-table__sort-arrow_dir_desc {
  border-top: solid 5px var(--main-color);
}

.q-large-table__header_is-mobile-centered .q-large-table__cell {
  display: flex;
}

.q-large-table__paginator {
  height: 35px;
  box-sizing: border-box;
  background-color: #EDF1F5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.q-large-table__paginator:hover {
  opacity: 0.8;
}
.q-large-table__paginator:active {
  opacity: 1;
}
.q-large-table__paginator:last-child {
  border-bottom: 1px solid #DADADA;
}
.q-large-table__paginator_has-border {
  border-bottom: 1px solid #DADADA;
  border-top: 1px solid #DADADA;
}

/**
  * 1. The width changes when we collapse the main-menu, therefore we animate it.
 */
.q-large-table_transition-header-width .q-large-table__header {
  transition: width 300ms linear; /* 1 */
}

.q-large-table_non-scrollable {
  height: auto;
  overflow: unset;
}

.q-large-table_overflow-hidden {
  overflow: hidden;
}

.q-large-table_overflow-visible {
  overflow: visible;
}

@media (max-width: 71.865em) {
  .q-large-table_theme_er-permissions {
    border-top: 1px solid var(--main-color-light-13);
  }
}
.q-large-table_theme_er-permissions .q-large-table__header-container {
  background-color: #EBEBEB;
}
.q-large-table_theme_er-permissions .q-large-table__header {
  background-color: #EBEBEB;
}
.q-large-table_theme_er-permissions .q-large-table__cell_in-header {
  color: var(--main-color);
}

.q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row {
  padding-left: 10px;
  font-size: 14px;
}
@media (max-width: 47.99em) {
  .q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row_has-mobile-padding {
    padding-left: 20px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row_has-tablet-padding {
    padding-left: 20px;
  }
}
.q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row:first-child {
  border-top: 1px solid #DADADA;
}
@media (min-width: 48em) {
  .q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row {
    padding-top: 0;
  }
}
@media (min-width: 81.25em) {
  .q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row_no-desktop-padding {
    padding-left: 0;
  }
}
@media (max-width: 47.99em) {
  .q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row_no-mobile-padding {
    padding-left: 0;
  }
}
.q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row_is-borderless, .q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row_is-borderless:first-child {
  border: 0;
  border-top: 0;
}
.q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__header-container {
  box-shadow: 0 0 0;
}
.q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__header {
  padding-left: 10px;
  font-size: 14px;
  background-color: #EAEAEA;
}
@media (max-width: 47.99em) {
  .q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__header_has-mobile-padding {
    padding-left: 20px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__header_has-tablet-padding {
    padding-left: 20px;
  }
}
.q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__header_color_light-grey {
  background-color: #F8F8F8;
}
@media (min-width: 48em) {
  .q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell {
    display: flex;
    align-items: center;
  }
  .q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_in-header {
    align-items: flex-start;
  }
}
@media (max-width: 47.99em) {
  .q-large-table_is-mini:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__cell_has-mobile-padding {
    padding-left: 10px;
  }
}

.q-large-table:not(.q-large-table_is-mini):not(.q-large-table_for_quoting-choose-plans):not(.q-large-table_has-no-space-for-contact-support) .q-large-table__body::after {
  content: "";
  height: 50px;
  display: block;
}

.q-large-table_is-loading .q-large-table__row:first-child {
  border-top: 0;
}
.q-large-table_is-loading_overflow-y_visible {
  overflow-y: visible;
}

@media (min-width: 48em) and (max-width: 63.99em) {
  .q-large-table_row-alignment_centered:not(.q-large-table_desktop-at_1150):not(.q-large-table_desktop-at_1200):not(.q-large-table_desktop-at_1300):not(.q-large-table_desktop-at_1400):not(.q-large-table_desktop-at_1600):not(.q-large-table_for_cancel-tablet):not(.q-large-table_for_cancel-desktop):not(.q-large-table_for_cancel-mobile-tablet) .q-large-table__row {
    padding-top: 0;
    align-items: center;
  }
}

.q-large-table_has-box-shadow .q-large-table__row:last-child {
  box-shadow: 4px 2px 4px 0 rgba(0, 0, 0, 0.12);
}

/**
 * This looks hacky but that's because tablet has a different layout usually,
 * but this time we need it to look exactly like desktop. So this basically
 * cancels the "tablet" layout and uses the desktop one for all.
 */
.q-large-table_for_cancel-tablet {
  /**
   * 1. If the cell is viewed on desktop it is always centered.
   **/
}
@media (max-width: 47.99em) {
  .q-large-table_for_cancel-tablet {
    /**
     * 1. The default padding such that the row will not stick to the top.
     */
    /**
    * 1. On tablet/mobile the scroll is not on the table body.
    */
  }
  .q-large-table_for_cancel-tablet .q-large-table__row {
    padding-top: 18px; /* 1 */
  }
  .q-large-table_for_cancel-tablet .q-large-table__body {
    overflow-y: visible; /* 1 */
    box-shadow: none;
  }
}
@media (min-width: 48em) {
  .q-large-table_for_cancel-tablet .q-large-table__cell {
    display: flex;
    align-items: center; /* 1 */
    /**
     * @for cell
     */
    /**
     * @for cell
     */
  }
  .q-large-table_for_cancel-tablet .q-large-table__cell_in-header {
    align-items: flex-start;
  }
  .q-large-table_for_cancel-tablet .q-large-table__cell_align_flex-start {
    align-items: flex-start;
  }
  .q-large-table_for_cancel-tablet .q-large-table__cell_justify-content_flex-start {
    justify-content: flex-start;
  }
  .q-large-table_for_cancel-tablet .q-large-table__cell_align_center {
    align-items: center;
  }
  .q-large-table_for_cancel-tablet .q-large-table__cell_align_right {
    align-items: flex-end;
  }
}
@media (max-width: 47.99em) {
  .q-large-table_for_cancel-tablet .q-large-table__paginator {
    height: 50px;
  }
}

/**
 * This looks hacky but that's because tablet / mobile have a different layout usually,
 * but this time we need them to look exactly like desktop. So this basically
 * cancels the "tablet" and "mobile" layout and uses the desktop one for all.
 */
.q-large-table_for_cancel-mobile-tablet {
  /**
   * 1. If the cell is viewed on desktop it is always centered.
   **/
}
@media (max-width: 0.0625em) {
  .q-large-table_for_cancel-mobile-tablet {
    /**
     * 1. The default padding such that the row will not stick to the top.
     */
    /**
    * 1. On tablet/mobile the scroll is not on the table body.
    */
  }
  .q-large-table_for_cancel-mobile-tablet .q-large-table__row {
    padding-top: 18px; /* 1 */
  }
  .q-large-table_for_cancel-mobile-tablet .q-large-table__body {
    overflow-y: visible; /* 1 */
    box-shadow: none;
  }
}
@media (min-width: 0.0625em) {
  .q-large-table_for_cancel-mobile-tablet .q-large-table__cell {
    display: flex;
    align-items: center; /* 1 */
    /**
     * @for cell
     */
    /**
     * @for cell
     */
  }
  .q-large-table_for_cancel-mobile-tablet .q-large-table__cell_in-header {
    align-items: flex-start;
  }
  .q-large-table_for_cancel-mobile-tablet .q-large-table__cell_align_flex-start {
    align-items: flex-start;
  }
  .q-large-table_for_cancel-mobile-tablet .q-large-table__cell_justify-content_flex-start {
    justify-content: flex-start;
  }
  .q-large-table_for_cancel-mobile-tablet .q-large-table__cell_align_center {
    align-items: center;
  }
  .q-large-table_for_cancel-mobile-tablet .q-large-table__cell_align_right {
    align-items: flex-end;
  }
}
@media (max-width: 0.0625em) {
  .q-large-table_for_cancel-mobile-tablet .q-large-table__paginator {
    height: 50px;
  }
}

.q-large-table_background-color_light-grey {
  background-color: #F8F8F8;
}

.q-large-table_background-color_x-page-grey {
  background-color: var(--color-light-grey-8);
}

.q-large-table__header_background-color_x-page-grey {
  background-color: var(--color-light-grey-8);
}

.q-large-table__header_background-color_x-page-dark-grey {
  background-color: #EAEAEA;
}

.q-large-table_is-scrolled .q-large-table__cell_has-box-shadow-on-scroll::after {
  content: "";
  height: 100%;
  width: 6px;
  right: -6px;
  position: absolute;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0));
}
.q-large-table_is-scrolled .q-large-table__cell_has-box-shadow-on-scroll_top_0::after {
  top: 0;
}

.q-large-table_is-scrolled-to-right-end .q-large-table__cell_has-left-box-shadow-on-scroll::before {
  content: none;
}
.q-large-table_is-scrolled-to-right-end .q-large-table__cell_has-inset-bottom-box-shadow-on-scroll {
  box-shadow: none;
}
.q-large-table_is-scrolled-to-right-end .q-large-table__cell_has-bottom-box-shadow-on-scroll {
  box-shadow: none;
}

.q-large-table__cell_has-left-box-shadow-on-scroll::before {
  content: "";
  height: 100%;
  width: 6px;
  left: -6px;
  position: absolute;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0));
}
.q-large-table__cell_has-left-box-shadow-on-scroll_top_0::before {
  top: 0;
}

.q-large-table__cell_has-inset-bottom-box-shadow-on-scroll {
  box-shadow: inset 0 -4px 4px -4px rgba(0, 0, 0, 0.14);
}

.q-large-table__cell_has-bottom-box-shadow-on-scroll {
  box-shadow: 0 5px 5px -4px rgba(0, 0, 0, 0.14);
}

.q-large-table_is-header-dark .q-large-table__header-container {
  background-color: #EAEAEA;
}

/**
 * The quoting table search input. It is an animated-search on mobile/tablet and
 * a normal search input on desktop.
 */
.q-table-search {
  height: 100%;
  display: flex;
}

.q-table-search__search {
  background-color: #FFF;
  border-left: solid 1px #C7D7D7;
  width: 278px;
  /**
   * @for search
   */
}
.q-table-search__search_is-animated {
  width: 67px;
}
.q-table-search__search_type_quoting-settings {
  border-left: none;
}

/**
 * A super customizable block used for table cells.
 *
 * Exposes a flex parent element that should be used to align content.
 */
.table-cell {
  display: block;
  max-width: 100%;
  position: relative;
}
.table-cell_fill_width {
  width: 100%;
}
.table-cell_fill_height {
  height: 100%;
}
.table-cell_height_30 {
  height: 30px;
}
.table-cell_height_45 {
  height: 45px;
}
.table-cell_height_60 {
  height: 60px;
}
.table-cell_fill_parent {
  width: 100%;
  height: 100%;
}
@media (min-width: 48em) {
  .table-cell_desktop-height_70 {
    height: 70px;
  }
}
.table-cell_align_bottom {
  display: flex;
  align-items: flex-end;
}
@media (max-width: 47.99em) {
  .table-cell_mobile-fill_height {
    height: 100%;
  }
}
@media (min-width: 48em) {
  .table-cell_from-tablet-fill_height {
    height: 100%;
  }
}
.table-cell_background-color_light-blue {
  background-color: #E0F1F4;
}
.table-cell_margin-top_10 {
  margin-top: 10px;
}

.table-cell_is-error {
  border: 1px solid #D57F73;
  box-sizing: border-box;
}

.table-cell__flex-parent {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  /**
   * @for flex-parent
   */
  /**
   * @for flex-parent
   */
  /**
   * @for flex-parent
   */
  /**
   * @for flex-parent
   */
  /**
   * @for is-centered
   */
  /**
   * @for flex-parent
   */
}
.table-cell__flex-parent_is-flex-wrap {
  flex-wrap: wrap;
}
.table-cell__flex-parent_dir_column {
  flex-direction: column;
}
.table-cell__flex-parent_justify_end {
  justify-content: flex-end;
}
.table-cell__flex-parent_justify_space-between {
  justify-content: space-between;
}
@media (min-width: 48em) {
  .table-cell__flex-parent_justify_end-from-tablet {
    justify-content: flex-end;
  }
}
@media (max-width: 81.24em) {
  .table-cell__flex-parent_justify_end-until-desktop-plus {
    justify-content: flex-end;
  }
}
.table-cell__flex-parent_align_center {
  align-items: center;
}
.table-cell__flex-parent_align_baseline {
  align-items: baseline;
}
.table-cell__flex-parent_align_start {
  align-items: flex-start;
}
.table-cell__flex-parent_align_end {
  align-items: flex-end;
}
@media (max-width: 63.99em) {
  .table-cell__flex-parent_align_end-until-desktop {
    align-items: flex-end;
  }
}
@media (max-width: 63.99em) {
  .table-cell__flex-parent_align_start-until-desktop {
    align-items: flex-start;
  }
}
.table-cell__flex-parent_justify_center {
  justify-content: center;
}
.table-cell__flex-parent_is-centered {
  align-items: center;
  justify-content: center;
}
.table-cell__flex-parent_text-align_end {
  text-align: end;
}
.table-cell__flex-parent_padding-right_5 {
  padding-right: 5px;
}
.table-cell__flex-parent_padding-top_5 {
  padding-top: 5px;
}
.table-cell__flex-parent_padding-top_15 {
  padding-top: 15px;
}
.table-cell__flex-parent_padding-right_9 {
  padding-right: 9px;
}
.table-cell__flex-parent_padding-right_10 {
  padding-right: 10px;
}
.table-cell__flex-parent_padding-right_15 {
  padding-right: 15px;
}
@media (min-width: 64em) {
  .table-cell__flex-parent_from-desktop_align-center {
    align-items: center;
  }
}
.table-cell__flex-parent_padding-right_25 {
  padding-right: 25px;
}
.table-cell__flex-parent_padding-left_25 {
  padding-left: 25px;
}
.table-cell__flex-parent_padding-left_10 {
  padding-left: 10px;
}
.table-cell__flex-parent_padding-left_13 {
  padding-left: 13px;
}
.table-cell__flex-parent_padding-bottom_5 {
  padding-bottom: 5px;
}
.table-cell__flex-parent_background-color_light-blue {
  background-color: #E0F1F4;
}
.table-cell__flex-parent_margin-top_1 {
  margin-top: 1px;
}
.table-cell__flex-parent_margin-right_1 {
  margin-right: 1px;
}

.table-cell__flex-child_flex_1 {
  flex: 1;
}

.table-cell__error-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: url(/assets/images/icons/field-error.svg) center no-repeat;
}

.table-cell__content {
  box-sizing: border-box;
}
.table-cell__content_padding-top_5 {
  padding-top: 5px;
}
.table-cell__content_padding-top_10 {
  padding-top: 10px;
}
.table-cell__content_padding-top_20 {
  padding-top: 20px;
}
.table-cell__content_padding-bottom_10 {
  padding-bottom: 10px;
}
.table-cell__content_padding-bottom_12 {
  padding-bottom: 12px;
}
.table-cell__content_margin-right_10 {
  margin-right: 10px;
}
.table-cell__content_margin-right_5 {
  margin-right: 5px;
}
.table-cell__content_horizontal-margin_15 {
  margin: 0 15px;
}
.table-cell__content_max-width_50 {
  max-width: 50%;
}
.table-cell__content_max-width_190 {
  max-width: 190px;
}

.table-cell__oval-checkbox {
  width: 20px;
  height: 20px;
}
.table-cell__oval-checkbox_size_small {
  width: 16px;
  height: 16px;
}

.table-cell__custom-checkbox {
  width: 20px;
  height: 20px;
}
.table-cell__custom-checkbox_size_small {
  width: 16px;
  height: 16px;
}

.table-cell__text_font_semi-bold {
  font-weight: 600;
}
.table-cell__text_is-italic {
  font-style: italic;
}
.table-cell__text_font_label {
  font-family: "Montserrat", sans-serif;
}
.table-cell__text_size_12 {
  font-size: 12px;
}
.table-cell__text_size_13 {
  font-size: 13px;
}
.table-cell__text_size_14 {
  font-size: 14px;
}
.table-cell__text_size_16 {
  font-size: 16px;
}
.table-cell__text_font_light {
  font-weight: 200;
}
.table-cell__text_font_bold {
  font-weight: bold;
}
.table-cell__text_color_grey {
  color: #9B9B9B;
}
.table-cell__text_color_light-grey {
  color: #B0A7A8;
}
.table-cell__text_color_dark-grey {
  color: #494949;
}
.table-cell__text_color_semi-dark-grey {
  color: #5E5E5E;
}
.table-cell__text_color_green {
  color: #1297AC;
}
.table-cell__text_padding-left_15 {
  padding-left: 15px;
}
.table-cell__text_padding-left_5 {
  padding-left: 5px;
}
.table-cell__text_is-full-width {
  width: 100%;
}
.table-cell__text_align_end {
  text-align: end;
}
.table-cell__text_line-height_small {
  line-height: 1.2;
}

.table-cell__oval-checkbox-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (min-width: 64em) {
  .table-cell__oval-checkbox-container:not(.table-cell__oval-checkbox-container_desktop-at_1400):not(.table-cell__oval-checkbox-container_desktop-at_1150) {
    align-items: center;
  }
}
@media (min-width: 71.875em) {
  .table-cell__oval-checkbox-container_desktop-at_1150 {
    align-items: center;
  }
}
@media (min-width: 87.5em) {
  .table-cell__oval-checkbox-container_desktop-at_1400 {
    align-items: center;
  }
}
.table-cell__oval-checkbox-container_align-items_flex-start {
  align-items: flex-start;
}

.table-cell__custom-checkbox-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (min-width: 64em) {
  .table-cell__custom-checkbox-container:not(.table-cell__custom-checkbox-container_desktop-at_1400):not(.table-cell__custom-checkbox-container_desktop-at_1150) {
    align-items: center;
  }
}
@media (min-width: 71.875em) {
  .table-cell__custom-checkbox-container_desktop-at_1150 {
    align-items: center;
  }
}
@media (min-width: 87.5em) {
  .table-cell__custom-checkbox-container_desktop-at_1400 {
    align-items: center;
  }
}
.table-cell__custom-checkbox-container_align-items_flex-start {
  align-items: flex-start;
}

.table-cell__button-action {
  display: flex;
  align-items: flex-start;
}
@media (min-width: 64em) {
  .table-cell__button-action:not(.table-cell__button-action_desktop-at_1150):not(.table-cell__button-action_desktop-at_1400):not(.table-cell__button-action_is-centered-from-tablet) {
    align-items: center;
  }
}
@media (min-width: 87.5em) {
  .table-cell__button-action_desktop-at_1400 {
    align-items: center;
  }
}
@media (min-width: 71.875em) {
  .table-cell__button-action_desktop-at_1150 {
    align-items: center;
  }
}
@media (min-width: 48em) {
  .table-cell__button-action_is-centered-from-tablet {
    align-items: center;
  }
}

.table-cell__sortable-right-aligned {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
}

.table-cell__label {
  display: flex;
  align-items: center;
  font-weight: normal;
  margin-bottom: 5px;
}

.table-cell__er-permission-cell {
  height: 100%;
  box-sizing: border-box;
}
@media (min-width: 71.875em) {
  .table-cell__er-permission-cell {
    padding-top: 15px;
  }
}
@media (max-width: 71.865em) {
  .table-cell__er-permission-cell {
    display: flex;
    align-items: center;
  }
}
.table-cell__er-permission-cell_expands-on-tablet {
  display: block;
}
.table-cell__er-permission-cell_is-button {
  padding-top: 10px;
}
@media (max-width: 71.865em) {
  .table-cell__er-permission-cell_is-button {
    padding-top: 0;
  }
}
.table-cell__er-permission-cell_is-switched {
  padding-top: 0;
}
@media (min-width: 71.875em) {
  .table-cell__er-permission-cell_is-switched {
    height: 50px;
    display: flex;
    align-items: center;
  }
}

/**
 * Contains the table headers that usually contain
 * the search input, filter, etc.
 */
.table-page-headers {
  background-color: #EAEAEA;
  box-sizing: border-box;
  border-bottom: solid 1px #C7D7D7;
  height: 60px;
}
@media (max-width: 47.99em) {
  .table-page-headers {
    height: 67px;
  }
}
@media (max-width: 47.99em) {
  .table-page-headers_mobile-height_small {
    height: 60px;
  }
}
.table-page-headers_is-reset {
  background-color: inherit;
  border-bottom: 0;
  height: 100%;
}
.table-page-headers_type_quoting-settings {
  height: 60px;
  background-color: #F8F8F8;
  border-bottom: solid 1px #F8F8F8;
}

/**
 * 1. In order to avoid a horizontal scrollbar from the animated search.
 */
.table-page-headers__header {
  height: 100%;
  display: flex;
}
@media (max-width: 47.99em) {
  .table-page-headers__header {
    overflow: hidden; /* 1 */
  }
}
@media (max-width: 47.99em) {
  .table-page-headers__header {
    padding-left: 40px;
  }
  .table-page-headers__header_has-less-mobile-padding {
    padding-left: 20px;
  }
  .table-page-headers__header_has-no-mobile-padding {
    padding-left: 0;
  }
}
.table-page-headers__header_justify_end {
  justify-content: flex-end;
}
.table-page-headers__header_justify_end .table-page-headers__mobile-actions {
  justify-content: flex-end;
}
.table-page-headers__header_justify-content_flex-start {
  justify-content: flex-start;
}
.table-page-headers__header_justify-content_space-between {
  justify-content: space-between;
}
.table-page-headers__header_has-padding-right {
  padding-right: 15px;
}
@media (max-width: 47.99em) {
  .table-page-headers__header_has-padding-right {
    padding-right: 10px;
  }
}

.table-page-headers__header-action {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
}

.table-page-headers__mobile-actions {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
}

.table-page-headers__mobile-action {
  height: 100%;
}

.table-page-headers__filter-menu {
  width: 88px;
  height: 100%;
}
.table-page-headers__filter-menu_margin-right_20 {
  margin-right: 20px;
}
@media (max-width: 47.99em) {
  .table-page-headers__filter-menu {
    width: 80px;
  }
  .table-page-headers__filter-menu_is-m-small {
    width: 60px;
  }
  .table-page-headers__filter-menu:hover {
    background-color: #D7D7D7;
  }
}

.table-page-headers__sort-menu {
  width: 88px;
  height: 100%;
}

.table-page-headers__download {
  width: 110px;
}

.table-page-headers__more-fields {
  width: 100px;
}

/**
 * Used for any page that contains a table.
 * (Acts as the inner-nav-page but simpler)
 *
 * Adds a scroll for the table to scroll on mobile/tablet.
 *
 * 1. Empty state is positioned relative to it.
 */
.table-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #F8F8F8;
  position: relative; /* 1 */
}
.table-page_background-color_transparent {
  background-color: transparent;
}

/**
 * 1. Table scrolling in Firefox.
 */
.table-page__table {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 1 */
}

/**
 * Element used to preserve flow without letting the block leak into children.
 * Since q-table-page__table uses `display: flex`.
 */
.table-page__table-content {
  height: 100%;
}
.table-page__table-content_is-scrollable {
  overflow-y: scroll;
}
@media (max-width: 63.99em) {
  .table-page__table-content_is-scrollable-until-desktop {
    overflow-y: scroll;
  }
}

.table-page__empty {
  box-sizing: border-box;
  height: 100%;
  overflow-y: scroll;
}
.table-page__empty_overflow-y_visible {
  overflow-y: visible;
}
.table-page__empty_is-tasks {
  background-color: #F8F8F8;
  height: 100%;
}
.table-page__empty_is-tasks .table-page__empty-header {
  background-color: #F1F1F1;
  height: 60px;
}
.table-page__empty_is-tasks .table-page__empty-content {
  border: none;
  background: none;
}

.table-page__empty-header {
  position: relative;
  background-color: #F8F8F8;
}
@media (max-width: 63.99em) {
  .table-page__empty-header {
    height: 40px;
  }
}
@media (min-width: 64em) {
  .table-page__empty-header {
    height: 60px;
  }
}
.table-page__empty-header_height_40 {
  height: 40px;
}
.table-page__empty-header_height_45 {
  height: 45px;
}
.table-page__empty-header_background-color_x-page-grey {
  background-color: var(--color-light-grey-8);
}

.table-page__empty-button_has-margin:not(:last-child) {
  margin-right: 10px;
}

.table-page__empty-buttons-container {
  display: flex;
  width: 100%;
  justify-content: center;
}
.table-page__empty-buttons-container_margin-top_15 {
  margin-top: 15px;
}
.table-page__empty-buttons-container_margin-top_25 {
  margin-top: 25px;
}
.table-page__empty-buttons-container_margin-top_45 {
  margin-top: 45px;
}

.table-page__empty-content {
  height: 283px;
  background: #FFF;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  border-bottom: solid 1px #C7D7D7;
  border-top: solid 1px #C7D7D7;
}
.table-page__empty-content_border-top_none {
  border-top: none;
}
.table-page__empty-content_border_none {
  border: none;
}
.table-page__empty-content_border-radius_5 {
  border-radius: 5px;
}
@media (max-width: 63.99em) {
  .table-page__empty-content_is-borderless-top-until-desktop {
    border-top: none;
  }
}
@media (max-width: 71.865em) {
  .table-page__empty-content_is-borderless-top-until-1150 {
    border-top: none;
  }
}
@media (max-width: 81.24em) {
  .table-page__empty-content_is-borderless-top-until-1300 {
    border-top: none;
  }
}
.table-page__empty-content_is-borderless-top {
  border-top: none;
}
@media (max-width: 87.49em) {
  .table-page__empty-content_is-borderless-top-until-1400 {
    border-top: none;
  }
}
.table-page__empty-content_height_350 {
  height: 350px;
}
.table-page__empty-content_is-borderless {
  border: none;
}
.table-page__empty-content_margin-top_40 {
  margin-top: 40px;
}
.table-page__empty-content_margin-top_20 {
  margin-top: 20px;
}
@media (min-width: 64em) {
  .table-page__empty-content_horizontal-margin-from-desktop_20 {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.table-page__empty-refresh {
  position: absolute;
  right: 10px;
  top: 0;
  height: 100%;
  width: 40px;
}

.table-page__empty-icon {
  width: 100px;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 30px;
  /**
   * @for empty-icon
   */
  /**
   * @for empty-icon
   */
  /**
   * @for empty-icon
   */
  /**
   * @for empty-icon
   */
}
.table-page__empty-icon_type_prospects {
  height: 36px;
  background-image: url("/assets/images/icons/binoculars-blue.svg");
}
.table-page__empty-icon_type_clients {
  height: 59px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/blue/icons/clients.svg");
}
.table-page__empty-icon_type_quotes {
  height: 59px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/blue/icons/quotes.svg");
}
.table-page__empty-icon_type_agencies {
  height: 40px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/blue/icons/agency.svg");
}
.table-page__empty-icon_type_brokers {
  height: 49px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/blue/icons/broker.svg");
}
.table-page__empty-icon_type_renewals {
  height: 37px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/blue/icons/renewals.svg");
}
.table-page__empty-icon_type_applications {
  height: 34px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/blue/icons/applications.svg");
}
.table-page__empty-icon_type_flags {
  height: 44px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/blue/icons/flag.svg");
}
.table-page__empty-icon_type_tasks {
  height: 29px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/blue/icons/tasks.svg");
}
.table-page__empty-icon_type_notes {
  height: 39px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/green/icons/notes.svg");
}
.table-page__empty-icon_type_blue-notes {
  height: 39px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/blue/icons/notes.svg");
}
.table-page__empty-icon_type_activity {
  height: 26px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/green/icons/activity.svg");
}
.table-page__empty-icon_type_check {
  height: 29px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/blue/icons/check.svg");
}
.table-page__empty-icon_type_benefits {
  height: 39px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/heart.svg");
}
.table-page__empty-icon_type_suspensions {
  height: 39px;
  background-size: auto 100%;
  background-image: var(--svg-suspensions);
}
.table-page__empty-icon_type_reports {
  height: 35px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/reports-queue.svg");
}
.table-page__empty-icon_type_blue-reports {
  height: 35px;
  background-size: auto 100%;
  background-image: url("/assets/images/themes/blue/icons/reports.svg");
}
.table-page__empty-icon_type_documents {
  height: 32px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/documents.svg");
}
.table-page__empty-icon_type_folders {
  height: 32px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/folder.svg");
}
.table-page__empty-icon_type_subgroups {
  height: 36px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/subgroups.svg");
}
.table-page__empty-icon_type_group {
  height: 36px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/group.svg");
}
.table-page__empty-icon_type_bills {
  height: 45px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/empty-bills.svg");
}
.table-page__empty-icon_type_payments {
  height: 45px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/payment.svg");
  background-repeat: no-repeat;
}
.table-page__empty-icon_type_invite-users {
  height: 54px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/hand-click.svg");
  background-repeat: no-repeat;
}
.table-page__empty-icon_type_members {
  height: 35px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/member.svg");
  background-repeat: no-repeat;
}
.table-page__empty-icon_type_statement {
  height: 34px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/statement.svg");
  background-repeat: no-repeat;
}
.table-page__empty-icon_type_classes {
  height: 32px;
  width: 32px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/employer-classes.svg");
  background-repeat: no-repeat;
}
.table-page__empty-icon_type_eligibility-history {
  height: 37px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/eligibility-icon.svg");
}
.table-page__empty-icon_type_pads {
  height: 37px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/pads-icon.svg");
}
.table-page__empty-icon_type_adjustments {
  height: 37px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/adjustment-icon.svg");
}
.table-page__empty-icon_type_contribution-box {
  height: 37px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/contribution-box.svg");
}
.table-page__empty-icon_type_search {
  width: 35px;
  height: 35px;
  background-image: url("/assets/images/icons/search.svg");
}
.table-page__empty-icon_type_select {
  width: 36px;
  height: 36px;
  background-image: url("/assets/images/icons/select.svg");
}
.table-page__empty-icon_type_employee-list-tasks {
  width: 36px;
  height: 36px;
  background-image: url("/assets/images/themes/green/icons/tasks-icon.svg");
}
.table-page__empty-icon_height_48 {
  height: 48px;
}
.table-page__empty-icon_height_35 {
  height: 35px;
}
.table-page__empty-icon_is-small {
  height: 28px;
}
.table-page__empty-icon_margin-bottom_small {
  margin-bottom: 20px;
}

.table-page__empty-title {
  text-align: center;
  font-size: 25px;
  color: #034FA8;
  margin-bottom: 10px;
}
.table-page__empty-title_margin-bottom_large {
  margin-bottom: 25px;
}
@media (max-width: 47.99em) {
  .table-page__empty-title_is-small-mobile {
    font-size: 21px;
  }
}
.table-page__empty-title_max-width_500 {
  max-width: 500px;
}
.table-page__empty-title_theme_green {
  color: #1297AC;
}

.table-page__empty-subtitle {
  text-align: center;
  font-size: 16px;
  margin-bottom: 25px;
}

.table-page__empty_theme_green .table-page__empty-title {
  color: #1297AC;
}
.table-page__empty_theme_green .table-page__empty-icon_type_tasks {
  background-image: url("/assets/images/themes/green/icons/tasks.svg");
}
.table-page__empty_theme_green .table-page__empty-header {
  height: 50px;
}
.table-page__empty_theme_green .table-page__empty-header_height_40 {
  height: 40px;
}

.table-page__empty-description {
  text-align: center;
  color: #4A4A4A;
  max-width: 500px;
  margin: 0 auto;
}
.table-page__empty-description_max-width_550 {
  max-width: 550px;
}
.table-page__empty-description_color_light-grey {
  color: #5E5E5E;
}

:root {
  --filter-top: 0;
}

.table-top {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: solid thin #DADADA;
  min-height: 40px;
  box-sizing: border-box;
  background-color: #F8F8F8;
  padding-right: 50px;
}
.table-top_background-color_white {
  background-color: #FFF;
}
.table-top_is-sticky {
  position: sticky;
  top: var(--filter-top);
  z-index: 1;
}
.table-top_filters_empty .table-top__filter-tags {
  display: none;
}
.table-top_is-empty-header-hidden.table-top_filters_empty {
  display: none;
}
.table-top_min-height_50 {
  min-height: 50px;
}
.table-top_min-height_50 .table-top__refresh {
  max-height: 50px;
}
.table-top_min-height_60 {
  min-height: 60px;
}
.table-top_min-height_60 .table-top__refresh {
  max-height: 60px;
}
.table-top_min-height_auto {
  min-height: auto;
}
.table-top_border-bottom_none {
  border-bottom: none;
}
.table-top_no-padding-right {
  padding-right: 0;
}
.table-top_horizontal-padding_10 {
  padding-left: 10px;
  padding-right: 10px;
}
.table-top_horizontal-padding_20 {
  padding-left: 20px;
  padding-right: 20px;
}
.table-top_background-color_x-page-grey {
  background-color: var(--color-light-grey-8);
}
.table-top_background-color_grey {
  background-color: #F5F5F5;
}
.table-top_background-color_light-grey {
  background-color: #F3F3F3;
}
.table-top_background-color_dark-grey {
  background-color: #EAEAEA;
}
.table-top_top_60 {
  top: 60px;
}
.table-top_has-box-shadow {
  z-index: 1;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13);
}
.table-top_justify-content_space-between {
  justify-content: space-between;
}
.table-top_justify-content_flex-end {
  justify-content: flex-end;
}
.table-top_type_quoting-settings {
  background-color: white;
}
@media (max-width: 87.49em) {
  .table-top_type_quoting-settings {
    z-index: 1;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
  }
}

.table-top__refresh {
  position: absolute;
  right: 10px;
  bottom: 0;
  height: 100%;
  max-height: 40px;
  width: 40px;
}
.table-top__refresh_max-height_50 {
  max-height: 50px;
}
.table-top__refresh_width_30 {
  width: 30px;
}

.table-top__filter-tags {
  width: 100%;
}

.table-top__bottom-container {
  height: 30px;
  display: flex;
  align-items: center;
}
.table-top__bottom-container_has-margin-left {
  margin-left: 11px;
}

.table-top__oval-checkbox-container {
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-top__oval-checkbox {
  width: 16px;
  height: 16px;
}

.table-top__custom-checkbox-container {
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-top__custom-checkbox {
  width: 16px;
  height: 16px;
}
.table-top__custom-checkbox_height_14 {
  height: 14px;
}

.table-top__results-count-container {
  display: flex;
}

.table-top__results-count {
  margin-left: 4px;
}

.table-top__error-icon {
  background: url("/assets/images/icons/x-thick.svg") center center no-repeat;
  width: 13px;
  height: 13px;
  background-size: 13px 13px;
}

.table-top__error-icon-container {
  margin-right: 10px;
}

.table-top__total-results-error-container {
  display: flex;
  align-items: center;
}

.table-top__last-refreshed {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  font-size: 13px;
  color: #858585;
}

@media (min-width: 64em) {
  .table-top_hidden-from_desktop {
    background-color: white;
    padding-right: 33px;
  }
  .table-top_hidden-from_desktop.table-top_is-hidden {
    display: none;
    min-height: 0;
  }
  .table-top_hidden-from_desktop .table-top__refresh {
    display: none;
  }
  .table-top_hidden-from_desktop .table-top__oval-checkbox-container {
    display: none;
  }
  .table-top_hidden-from_desktop .table-top__custom-checkbox-container {
    display: none;
  }
  .table-top_hidden-from_desktop .table-top__results-count-container {
    margin-left: 11px;
  }
  .table-top_hidden-from_desktop .table-top__bottom-container_has-margin-left {
    margin-left: 0;
  }
}

@media (min-width: 71.875em) {
  .table-top_hidden-from_1150 {
    background-color: white;
    padding-right: 33px;
  }
  .table-top_hidden-from_1150.table-top_is-hidden {
    display: none;
    min-height: 0;
  }
  .table-top_hidden-from_1150 .table-top__refresh {
    display: none;
  }
  .table-top_hidden-from_1150 .table-top__oval-checkbox-container {
    display: none;
  }
  .table-top_hidden-from_1150 .table-top__custom-checkbox-container {
    display: none;
  }
  .table-top_hidden-from_1150 .table-top__results-count-container {
    margin-left: 11px;
  }
  .table-top_hidden-from_1150 .table-top__bottom-container_has-margin-left {
    margin-left: 0;
  }
}

@media (min-width: 75em) {
  .table-top_hidden-from_1200 {
    background-color: white;
    padding-right: 33px;
  }
  .table-top_hidden-from_1200.table-top_is-hidden {
    display: none;
    min-height: 0;
  }
  .table-top_hidden-from_1200 .table-top__refresh {
    display: none;
  }
  .table-top_hidden-from_1200 .table-top__oval-checkbox-container {
    display: none;
  }
  .table-top_hidden-from_1200 .table-top__custom-checkbox-container {
    display: none;
  }
  .table-top_hidden-from_1200 .table-top__results-count-container {
    margin-left: 11px;
  }
  .table-top_hidden-from_1200 .table-top__bottom-container_has-margin-left {
    margin-left: 0;
  }
}

@media (min-width: 81.25em) {
  .table-top_hidden-from_1300 {
    background-color: white;
    padding-right: 33px;
  }
  .table-top_hidden-from_1300.table-top_is-hidden {
    display: none;
    min-height: 0;
  }
  .table-top_hidden-from_1300 .table-top__refresh {
    display: none;
  }
  .table-top_hidden-from_1300 .table-top__oval-checkbox-container {
    display: none;
  }
  .table-top_hidden-from_1300 .table-top__custom-checkbox-container {
    display: none;
  }
  .table-top_hidden-from_1300 .table-top__results-count-container {
    margin-left: 11px;
  }
  .table-top_hidden-from_1300 .table-top__bottom-container_has-margin-left {
    margin-left: 0;
  }
}

@media (min-width: 87.5em) {
  .table-top_hidden-from_1400 {
    background-color: white;
    padding-right: 33px;
  }
  .table-top_hidden-from_1400.table-top_is-hidden {
    display: none;
    min-height: 0;
  }
  .table-top_hidden-from_1400 .table-top__refresh {
    display: none;
  }
  .table-top_hidden-from_1400 .table-top__oval-checkbox-container {
    display: none;
  }
  .table-top_hidden-from_1400 .table-top__custom-checkbox-container {
    display: none;
  }
  .table-top_hidden-from_1400 .table-top__results-count-container {
    margin-left: 11px;
  }
  .table-top_hidden-from_1400 .table-top__bottom-container_has-margin-left {
    margin-left: 0;
  }
}

@media (min-width: 48em) {
  .table-top_hidden-from_tablet {
    background-color: white;
    padding-right: 33px;
  }
  .table-top_hidden-from_tablet.table-top_is-hidden {
    display: none;
    min-height: 0;
  }
  .table-top_hidden-from_tablet .table-top__refresh {
    display: none;
  }
  .table-top_hidden-from_tablet .table-top__oval-checkbox-container {
    display: none;
  }
  .table-top_hidden-from_tablet .table-top__custom-checkbox-container {
    display: none;
  }
  .table-top_hidden-from_tablet .table-top__results-count-container {
    margin-left: 11px;
  }
  .table-top_hidden-from_tablet .table-top__bottom-container_has-margin-left {
    margin-left: 0;
  }
}

.table-top_padding_0 {
  padding: 0;
}

.appearance-theme-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.appearance-theme-option_padding_8 {
  padding: 8px;
}
.appearance-theme-option__content {
  display: flex;
  gap: 14px;
  align-items: center;
}
.appearance-theme-option__icon-check {
  background: url("/assets/images/icons/file-picked.svg") center no-repeat;
  width: 14px;
  height: 14px;
}
.appearance-theme-option__dots-menu {
  height: 52px;
}
.appearance-theme-option__create-new-holder {
  transform: translateX(-15px);
}
.appearance-theme-option__dropdown-arrow {
  background-image: url("/assets/images/icons/arrow-down-grey-thinner.svg");
  background-position: right;
  background-size: 13px;
  background-repeat: no-repeat;
  height: 30px;
  width: 50px;
}

/**
 * @block recent-bill-activity
 */
.recent-bill-activity {
  border-top: 1px solid #CBDBDB;
}

/**
 * @element card
 */
.recent-bill-activity__card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 19px;
  height: 77px;
  box-sizing: border-box;
  border-bottom: 1px solid #CBDBDB;
}
@media (max-width: 47.99em) {
  .recent-bill-activity__card {
    height: 145px;
  }
}

/**
 * @element container
 */
.recent-bill-activity__container {
  flex: 1;
  display: flex;
  justify-content: center;
}
@media (max-width: 47.99em) {
  .recent-bill-activity__container {
    flex-direction: column;
  }
}
@media (min-width: 48em) {
  .recent-bill-activity__container {
    align-items: center;
  }
}

/**
 * @element group
 */
.recent-bill-activity__group {
  flex: 1;
  /**
   * @modifier size
   * @value large
   */
}
.recent-bill-activity__group:not(:last-child) {
  margin-right: 5px;
}
.recent-bill-activity__group_size_large {
  flex: 1.5;
}
@media (max-width: 47.99em) {
  .recent-bill-activity__group:not(:last-child) {
    margin-bottom: 12px;
  }
}

@media (max-width: 47.99em) {
  .recent-bill-activity__amount-group {
    height: 100%;
    padding-top: 19px;
    box-sizing: border-box;
  }
}

/**
 * @element field
 */
.recent-bill-activity__field {
  box-sizing: border-box;
  margin-bottom: 3px;
  font-size: 14px;
  color: #5C5050;
  /**
   * @modifier is-bold
   */
  /**
   * @modifier is-negative
   */
  /**
   * @modifier type
   * @value amount
   */
}
.recent-bill-activity__field_is-bold {
  font-weight: bold;
}
.recent-bill-activity__field_is-negative {
  color: #D57F73;
}
.recent-bill-activity__field_type_amount {
  width: 75px;
  text-align: right;
  font-size: 16px;
  font-weight: 600;
}
.recent-bill-activity__field_type_date {
  color: #9B9B9B;
  font-style: italic;
}
.recent-bill-activity__field_type_name {
  font-weight: 600;
  font-size: 16px;
}

/**
 * @element label
 */
.recent-bill-activity__label {
  font-size: 10px;
  color: #9B9B9B;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-bottom: 8px;
}
@media (max-width: 47.99em) {
  .recent-bill-activity__label {
    margin-bottom: 4px;
  }
}
.recent-bill-activity__label_type_amount {
  text-align: right;
}

/**
 * @element window
 */
.recent-bill-activity__window {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 308px;
  box-sizing: border-box;
}
@media (max-width: 47.99em) {
  .recent-bill-activity__window {
    height: 580px;
  }
}

/**
 * @element empty
 */
.recent-bill-activity__empty {
  display: flex;
  box-sizing: border-box;
  height: 308px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 20px;
}
@media (max-width: 47.99em) {
  .recent-bill-activity__empty {
    height: 230px;
  }
}

/**
 * @element empty-title
 */
.recent-bill-activity__empty-title {
  margin-bottom: 20px;
  text-align: center;
  color: #1297AC;
  font-weight: 300;
  font-size: 34px;
}

/**
 * @element empty-description
 */
.recent-bill-activity__empty-description {
  max-width: 575px;
  margin: 0 auto;
  text-align: center;
  color: #5C5050;
  font-size: 16px;
}

/**
 * @element content
 */
.recent-bill-activity__content {
  transition: transform 400ms ease;
}

/**
 * @element print
 */
.recent-bill-activity__print * {
  font-family: "Segoe UI", Optima, "Lucida Grande", Arial, Verdana, sans-serif;
  font-size: 10pt;
}

/**
 * @element print-header
 */
.recent-bill-activity__print-header {
  font-weight: bold;
}

/**
 * @element print-total
 */
.recent-bill-activity__print-total {
  text-align: right;
  font-weight: bold;
}

@media (max-width: 63.99em) {
  .recent-bill-activity_is-narrowed .recent-bill-activity__card {
    height: 145px;
  }
}
@media (max-width: 63.99em) {
  .recent-bill-activity_is-narrowed .recent-bill-activity__container {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 63.99em) {
  .recent-bill-activity_is-narrowed .recent-bill-activity__group:not(:last-child) {
    margin-bottom: 12px;
  }
}
@media (max-width: 63.99em) {
  .recent-bill-activity_is-narrowed .recent-bill-activity__amount-group {
    height: 100%;
    padding-top: 19px;
    box-sizing: border-box;
  }
}
@media (max-width: 63.99em) {
  .recent-bill-activity_is-narrowed .recent-bill-activity__label {
    margin-bottom: 4px;
  }
}
@media (max-width: 63.99em) {
  .recent-bill-activity_is-narrowed .recent-bill-activity__window {
    height: 580px;
  }
}

/**
 * A refresh button.
 *
 * @block refresh-button
 */
.refresh-button {
  height: 100%;
  width: 40px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-image: url("/assets/images/icons/reload.svg");
  /**
   * This is used for preloading.
   */
}
.refresh-button:hover {
  background-image: url("/assets/images/icons/reload-green.svg");
}
.refresh-button_size_fixed {
  display: block;
  height: 18px;
  width: 18px;
}
.refresh-button_is-large {
  background-image: url("/assets/images/icons/light-grey-reload.svg");
  background-size: 17px 17px;
}
.refresh-button_is-small {
  background-size: 10px 10px;
}
.refresh-button_is-inline-with-text {
  pointer-events: none;
  background-size: 9px 9px;
  display: inline-block;
  height: 9px;
  width: 9px;
}
.refresh-button::after {
  width: 0;
  height: 0;
  content: "";
  background-image: url("/assets/images/icons/reload-green.svg");
}
.refresh-button_theme_blue:hover, .refresh-button_theme_blue:focus {
  background-image: url("/assets/images/icons/reload-blue.svg");
}
.refresh-button_theme_blue::after {
  background-image: url("/assets/images/icons/reload-blue.svg");
}
.refresh-button_is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/**
 * @block remove-bank-detail
 */
.remove-bank-detail {
  display: block;
}

/**
 * @element content
 */
.remove-bank-detail__content {
  margin: 0 5px;
}

/**
 * @element top-text
 */
.remove-bank-detail__top-text {
  padding-bottom: 20px;
}

/**
 * @element default-account-text
 */
.remove-bank-detail__default-account-text {
  padding: 20px 0 10px;
}

/**
 * @block remove-benefits-dialog
 */
.remove-benefits-dialog {
  display: block;
}

/**
 * @element title
 */
.remove-benefits-dialog__title {
  margin-bottom: 15px;
}

.remove-benefits-dialog__section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.remove-benefits-dialog__section:not(:last-child) {
  border-bottom: solid 1px #C7D7D7;
  margin-bottom: 15px;
}

/**
 * The report card used in the reports queue in the dashboard.
 *
 * @block report-card
 */
.report-card {
  box-sizing: border-box;
  height: 52px;
  position: relative;
  display: block;
  border-bottom: 1px solid var(--main-color-light-7);
  padding-left: 13px;
  padding-top: 8px;
}
.report-card:not(.report-card_is-mask):hover {
  background-color: var(--main-color-light-18);
}
.report-card:not(.report-card_is-mask):active {
  background-color: var(--main-color-light-5);
}

/**
 * @element title
 */
.report-card__title {
  color: #5C5050;
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 3px;
}

/**
 * @element date
 */
.report-card__date {
  color: #B0A7A8;
  font-size: 13px;
}

/**
 * @element status
 */
.report-card__status {
  position: absolute;
  top: 11px;
  right: 11px;
}

.report-category_is-flex {
  flex: 1;
  width: auto;
}
.report-category_has-margin-top {
  margin-top: 15px;
}

.report-category__title {
  color: #1297AC;
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}
.report-category__title_margin-bottom_10 {
  margin-bottom: 10px;
}
.report-category__title_margin-bottom_5 {
  margin-bottom: 5px;
}
.report-category__title_padding-left_12 {
  padding-left: 12px;
}

.report-category__note {
  color: #9B9B9B;
  font-size: 14px;
  margin-bottom: 10px;
  font-style: italic;
}

.report-category__checkbox-container {
  max-height: 500px;
  display: flex;
  flex-flow: column wrap;
}
@media (max-width: 63.99em) {
  .report-category__checkbox-container {
    max-height: 630px;
  }
}
@media (max-width: 47.99em) {
  .report-category__checkbox-container {
    max-height: none;
  }
}

.report-category__checkbox {
  height: 35px;
  display: flex;
  align-items: center;
}
.report-category__checkbox_height_30 {
  height: 30px;
}
.report-category__checkbox_width_350 {
  width: 350px;
}
.report-category__checkbox_height_100p {
  height: 100%;
}

.report-category__checkbox-text-content {
  display: flex;
  font-size: 14px;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: normal;
}
.report-category__checkbox-text-content_flex-direction_column {
  flex-direction: column;
}
.report-category__checkbox-text-content_gap_5 {
  gap: 5px;
}
.report-category__checkbox-text-content_color_light-grey {
  color: #5E5E5E;
}
.report-category__checkbox-text-content_font-size_10 {
  font-size: 10px;
}
.report-category__checkbox-text-content_font-family_labels {
  font-family: "Montserrat", sans-serif;
}
.report-category__checkbox-text-content_text-transform_uppercase {
  text-transform: uppercase;
}
.report-category__checkbox-text-content_is-side-note {
  color: #9B9B9B;
  font-style: italic;
}

.report-category__select-all {
  color: #9B9B9B;
  font-size: 14px;
  font-style: italic;
  font-family: "Source Sans Pro", sans-serif;
  text-transform: none;
}

/**
 * The form responsible for scheduling a report.
 *
 * @block report-schedule
 */
.report-schedule {
  width: 100%;
}

/**
 * @element frequency-label
 */
.report-schedule__frequency-label {
  margin-bottom: 10px;
}
.report-schedule__frequency-label_margin-bottom_0 {
  margin-bottom: 0;
}

/**
 * @element radio
 */
.report-schedule__radio {
  margin-bottom: 10px;
}
.report-schedule__radio_display_flex {
  display: flex;
}

/**
 * @element checkbox-list
 */
.report-schedule__checkbox-list {
  margin-bottom: 10px;
}

.required-field-notice {
  display: block;
  font-size: 13px;
}
.required-field-notice::before {
  content: "";
  margin-right: 4px;
  display: inline-block;
  background: var(--svg-required-star) center center no-repeat;
  height: 7px;
  width: 8px;
}
.required-field-notice_color_grey::before {
  background-image: url("/assets/images/icons/required-star-dark-grey.svg");
}
.required-field-notice_has-margins {
  margin: 20px 0;
}
@media (max-width: 63.99em) {
  .required-field-notice_has-margins {
    margin-left: 20px;
  }
}
.required-field-notice.required-field-notice_font-size-10 {
  font-size: 10px;
}

/**
 * The star icon used on the benefit card when it belongs to a required set.
 *
 * @block required-set-icon
 */
.required-set-icon {
  display: block;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  /**
   * @modifier color
   * @value green
   */
  /**
   * @modifier color
   * @value blue
   */
  /**
   * @modifier color
   * @value purple
   */
  /**
   * @modifier color
   * @value orange
   */
  /**
   * @modifier color
   * @value aqua
   */
}
.required-set-icon_color_green {
  background-image: url("/assets/images/icons/star-green.svg");
}
.required-set-icon_color_blue {
  background-image: url("/assets/images/icons/star-blue.svg");
}
.required-set-icon_color_purple {
  background-image: url("/assets/images/icons/star-purple.svg");
}
.required-set-icon_color_orange {
  background-image: url("/assets/images/icons/star-orange.svg");
}
.required-set-icon_color_aqua {
  background-image: url("/assets/images/icons/star-aqua.svg");
}

.required-set-icon_display_inline {
  display: inline-block;
  height: auto;
  background-position-x: left;
  background-size: 17px;
  padding-left: 20px;
}

.required-set-icon-container {
  display: inline-block;
  margin-left: 2px;
}

.required-symbol {
  width: 7px;
  height: 7px;
  background-size: 7px 7px;
  background-image: url("/assets/images/icons/required-star.svg");
  margin-left: 3px;
  margin-top: 2px;
}
.required-symbol_color_red {
  background-image: url("/assets/images/icons/required-star-red.svg");
}
.required-symbol_color_grey {
  background-image: url("/assets/images/icons/required-star-dark-grey.svg");
}
.required-symbol_margin-top_0 {
  margin-top: 0;
}
.required-symbol_margin-left_0 {
  margin-left: 0;
}
.required-symbol_is-for-input {
  position: absolute;
  display: inline-block;
  bottom: 7px;
  right: 7px;
}
.required-symbol_is-inline {
  position: absolute;
  display: inline-block;
  top: 0;
  right: -15px;
}
.required-symbol_is-inline-block {
  display: inline-block;
}

.resources-remove-contact {
  display: block;
}

.resources-remove-contact__title {
  margin-bottom: 20px;
}

.resources-remove-contact__contact {
  background-color: #FFF;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

/**
 * Text area containg the trix editor. Most of the editor css classes are
 * defined in `trix-editor.scss` file.
 *
 * @block rich-editor
 */
.rich-editor {
  margin-top: 5px;
  padding: 5px;
}
.rich-editor_is-paddingless {
  padding: 0;
}

/**
 * @element label
 */
.rich-editor__label {
  margin-bottom: 5px;
}

.scheduled-appearance-themes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.scheduled-appearance-themes__box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background-color: var(--color-light-grey-9);
}
@media (max-width: 63.99em) {
  .scheduled-appearance-themes__box {
    flex-direction: column;
    align-items: normal;
    gap: 10px;
  }
}

/**
 * @block search-input
 *
 * search-input
 * |-icon
 * |-input
*/
.search-input {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  position: relative;
}

/**
 * @element icon
 */
.search-input__icon {
  width: 59px;
  background: url("/assets/images/icons/search.svg") center center no-repeat;
  background-size: 16px 16px;
}

/**
 * @element input
 */
.search-input__input {
  border: 0;
  padding: 0;
  margin: 0;
  flex: 1;
  font-size: 12px;
  color: #5C5050;
  outline: none;
}
.search-input__input::-moz-placeholder {
  color: #B0A7A8;
}
.search-input__input::placeholder {
  color: #B0A7A8;
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .search-input__input::-moz-placeholder {
    font-size: 11px;
  }
  .search-input__input::placeholder {
    font-size: 11px;
  }
}
.search-input__input_z-index_1 {
  z-index: 1;
}
.search-input__input_height_100p {
  height: 100%;
}

.search-input__input-placeholder {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--color-light-grey-6);
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .search-input__input-placeholder {
    font-size: 11px;
  }
}
.search-input__input-placeholder_has-search-icon {
  left: 59px;
}

.search-input_theme_blue .search-input__icon {
  background-image: url("/assets/images/themes/blue/icons/search.svg");
}

.search-input__action {
  height: 100%;
  width: 50px;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  /**
   * @for action
   */
}
.search-input__action:hover, .search-input__action:focus {
  opacity: 0.7;
}
.search-input__action:active {
  opacity: 0.5;
}
.search-input__action_type_reset {
  background-size: 11px 11px;
  background-image: url("/assets/images/icons/x-sign-clear.svg");
}

.select-products {
  display: flex;
}
.select-products_flex-wrap_wrap {
  flex-wrap: wrap;
}
@media (max-width: 63.99em) {
  .select-products_until-desktop-justify-content_center {
    justify-content: center;
  }
}

.select-products__cell {
  width: 137px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.select-products__cell_has-spacing {
  margin: 10px 10px 0 0;
}
.select-products__cell_has-spacing:last-child {
  margin-right: 0;
}

.select-products__product-icon {
  transition: background-image 100ms ease-in;
  background-position: center center;
  background-repeat: no-repeat;
}

.select-products__product-name {
  transition: all 100ms ease-in;
  font-weight: normal;
  max-width: 100px;
  text-align: center;
}
.select-products__product-name_select-all {
  color: #95989A;
  font-style: italic;
}

.select-products__product {
  width: 137px;
  height: 137px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.select-products__tick {
  background-image: url("/assets/images/icons/tick.svg");
  background-size: 14px 11px;
  width: 14px;
  height: 11px;
  position: absolute;
  top: 15px;
  right: 13px;
  animation: g-fade-in 200ms ease-in;
}

.select-products__product-button {
  transition: all 100ms ease-in;
  transition-property: width, height, background-color;
  width: 137px;
  height: 137px;
  border-radius: 4px;
  border-style: solid;
  border-color: #9B9B9B;
  border-width: 1px;
}
.select-products__product-button:not(.select-products__product-button_is-selected), .select-products__product-button_is-disabled {
  background-color: #FFF;
}
.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled), .select-products__product-button_has-effective-date {
  width: 123px;
  height: 123px;
}
.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) {
  border: none;
}
.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) .select-products__product-name {
  color: #FFF;
  font-weight: 600;
}
.select-products__product-button_is-disabled {
  cursor: default;
  border: none;
}
.select-products__product-button_is-disabled .select-products__product-name {
  color: #9B9B9B;
}
.select-products__product-button_is-disabled.select-products__product-button_has-effective-date {
  background-color: #D1D1D1;
}
.select-products__product-button .select-products__product-icon {
  background-size: 32px 32px;
  width: 32px;
  height: 32px;
}
.select-products__product-button_type_medical .select-products__product-icon {
  background-size: 32px 32px;
  width: 32px;
  height: 32px;
}
.select-products__product-button_type_medical.select-products__product-button_is-disabled .select-products__product-icon {
  background-image: url("/assets/images/icons/medical-disabled.svg");
}
.select-products__product-button_type_medical:not(.select-products__product-button_is-disabled):not(.select-products__product-button_is-selected) .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/medical.svg");
}
.select-products__product-button_type_medical.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) {
  background-color: #BC2D19;
  border: none;
}
.select-products__product-button_type_medical.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) .select-products__product-icon {
  background-image: url("/assets/images/icons/medical-white.svg");
}
.select-products__product-button_type_dental .select-products__product-icon {
  background-size: 25px 30px;
  width: 25px;
  height: 30px;
}
.select-products__product-button_type_dental.select-products__product-button_is-disabled .select-products__product-icon {
  background-image: url("/assets/images/icons/dental-disabled.svg");
}
.select-products__product-button_type_dental:not(.select-products__product-button_is-disabled):not(.select-products__product-button_is-selected) .select-products__product-icon {
  background-image: url("/assets/images/icons/dental.svg");
}
.select-products__product-button_type_dental.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) {
  background-color: #4771A9;
}
.select-products__product-button_type_dental.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) .select-products__product-icon {
  background-image: url("/assets/images/icons/dental-white.svg");
}
.select-products__product-button_type_vision .select-products__product-icon {
  background-size: 28px 28px;
  width: 28px;
  height: 28px;
}
.select-products__product-button_type_vision.select-products__product-button_is-disabled .select-products__product-icon {
  background-image: url("/assets/images/icons/vision-disabled.svg");
}
.select-products__product-button_type_vision:not(.select-products__product-button_is-disabled):not(.select-products__product-button_is-selected) .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/vision.svg");
}
.select-products__product-button_type_vision.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) {
  background-color: #76C2AE;
}
.select-products__product-button_type_vision.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) .select-products__product-icon {
  background-image: url("/assets/images/icons/vision-white.svg");
}
.select-products__product-button_type_life .select-products__product-icon {
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
}
.select-products__product-button_type_life.select-products__product-button_is-disabled .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/life-disabled.svg");
}
.select-products__product-button_type_life:not(.select-products__product-button_is-disabled):not(.select-products__product-button_is-selected) .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/life.svg");
}
.select-products__product-button_type_life.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) {
  background-color: #744888;
}
.select-products__product-button_type_life.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/life-white.svg");
}
.select-products__product-button_type_std .select-products__product-icon {
  background-size: 28px 30px;
  width: 28px;
  height: 30px;
}
.select-products__product-button_type_std.select-products__product-button_is-disabled .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/disability-disabled.svg");
}
.select-products__product-button_type_std:not(.select-products__product-button_is-disabled):not(.select-products__product-button_is-selected) .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/disability.svg");
}
.select-products__product-button_type_std.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) {
  background-color: #D57200;
}
.select-products__product-button_type_std.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/disability-white.svg");
}
.select-products__product-button_type_ltd .select-products__product-icon {
  background-size: 28px 30px;
  width: 28px;
  height: 30px;
}
.select-products__product-button_type_ltd.select-products__product-button_is-disabled .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/disability-disabled.svg");
}
.select-products__product-button_type_ltd:not(.select-products__product-button_is-disabled):not(.select-products__product-button_is-selected) .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/disability.svg");
}
.select-products__product-button_type_ltd.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) {
  background-color: #D57200;
}
.select-products__product-button_type_ltd.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/disability-white.svg");
}
.select-products__product-button_type_ad-d .select-products__product-icon {
  background-size: 32px 32px;
  width: 32px;
  height: 32px;
}
.select-products__product-button_type_ad-d.select-products__product-button_is-disabled .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/ad&d-disabled.svg");
}
.select-products__product-button_type_ad-d:not(.select-products__product-button_is-disabled):not(.select-products__product-button_is-selected) .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/ad&d.svg");
}
.select-products__product-button_type_ad-d.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) {
  background-color: #BC2D19;
}
.select-products__product-button_type_ad-d.select-products__product-button_is-selected:not(.select-products__product-button_is-disabled) .select-products__product-icon {
  background-image: url("/assets/images/icons/coverage-types/ad&d-white.svg");
}
.select-products__product-button_type_select-all .select-products__product-icon {
  background-size: 25px 30px;
  width: 32px;
  height: 32px;
}
.select-products__product-button_type_select-all.select-products__product-button_theme_blue .select-products__product-icon {
  background-image: url("/assets/images/icons/tick-blue.svg");
}
.select-products__product-button_type_select-all.select-products__product-button_theme_green .select-products__product-icon {
  background-image: url("/assets/images/icons/green-tick.svg");
}
.select-products__product-button_type_select-all.select-products__product-button_is-selected .select-products__product-name {
  font-weight: normal;
}
.select-products__product-button_type_select-all.select-products__product-button_is-selected .select-products__product-icon {
  background-image: url("/assets/images/icons/tick.svg");
}
.select-products__product-button_type_select-all.select-products__product-button_is-selected.select-products__product-button_theme_blue:not(.select-products__product-button_is-disabled) {
  background-color: #034FA8;
}
.select-products__product-button_type_select-all.select-products__product-button_is-selected.select-products__product-button_theme_green:not(.select-products__product-button_is-disabled) {
  background-color: #1297AC;
}
.select-products__product-button_type_select-all.select-products__product-button_is-disabled .select-products__product-icon {
  background-image: url("/assets/images/icons/tick-disabled.svg");
}

.select-products__product-content-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-products__product-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 75px;
  margin-top: 7px;
}
.select-products__product-content_height_100 {
  height: 100px;
}

.select-products__product-types {
  margin-top: 7px;
  padding-top: 5px;
}
.select-products__product-types_has-border-top {
  border-top: solid 1px #CCCCCC;
}

.select-products__already-effective {
  padding: 10px 0;
  font-size: 14px;
  text-align: center;
}

.select-products__already-effective-date {
  color: var(--color-red);
}

.select-products__loading-box {
  height: 123px;
  width: 123px;
  background-color: #FFF;
  position: relative;
  margin-right: 10px;
  display: flex;
  justify-content: center;
}

/**
 * A list containing summaries of selected employees. Used for example
 * in the Print Enrollment Summary.
 *
 * @block selected-employees
 */
.selected-employees {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (min-width: 81.25em) {
  .selected-employees {
    padding-left: 35px;
    padding-right: 35px;
  }
}

/**
 * @element title
 */
.selected-employees__title {
  height: 45px;
  display: flex;
  align-items: center;
}
@media (max-width: 63.99em) {
  .selected-employees__title {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 64em) and (max-width: 81.24em) {
  .selected-employees__title {
    padding-left: 35px;
    padding-right: 35px;
  }
}

/**
 * @element list
 */
.selected-employees__list {
  flex: 1;
  overflow-y: auto;
}
@media (min-width: 48em) {
  .selected-employees__list::after {
    content: "";
    height: 50px;
    display: block;
  }
}

/**
 * @element checkbox
 */
.selected-employees__checkbox {
  animation: g-fade-in 500ms ease;
}

/**
 * @element row
 */
.selected-employees__row {
  background: #FFF;
  box-sizing: border-box;
  display: flex;
  height: 70px;
  align-items: center;
  border: solid 1px #98B7B7;
  border-top-width: 0;
}
@media (max-width: 81.24em) {
  .selected-employees__row {
    border-left: 0;
    border-right: 0;
  }
}

.selected-employees__liquid-row:first-child .selected-employees__row,
.selected-employees__liquid-row.liquid-animation .selected-employees__row {
  border-top-width: 1px;
}

/**
 * @element avatar
 */
.selected-employees__avatar {
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/**
 * @element content
 */
.selected-employees__content {
  flex: 1;
  display: flex;
  height: 100%;
}

/**
 * @element main-container
 */
.selected-employees__main-container {
  display: flex;
  align-items: center;
  flex: 2;
  border-right: solid 1px #98B7B7;
  /**
   * @modifier no-border
   * @for main-container
   */
}
.selected-employees__main-container_no-border {
  border-right: 0;
}

/**
 * @element name
 */
.selected-employees__name {
  font-size: 18px;
  font-weight: bold;
}

/**
 * @element date
 */
.selected-employees__date {
  height: 70px;
  flex: 1;
  padding-left: 10px;
  display: flex;
  align-items: center;
}

/**
 * @element email
 */
.selected-employees__email {
  flex: 2;
  margin-bottom: -1px;
}

/**
 * @element action
 */
.selected-employees__action {
  padding: 0 25px;
}

@media (max-width: 81.24em) {
  .selected-employees__row {
    height: 145px;
    padding-top: 20px;
    align-items: flex-start;
  }
  .selected-employees__content {
    display: block;
  }
  .selected-employees__main-container {
    border-right: none;
  }
  .selected-employees__date {
    padding-left: 0;
  }
}
/**
 * @modifier light-border
 */
.selected-employees_light-border .selected-employees__row {
  border-color: var(--color-light-grey-5);
}
@media (max-width: 81.24em) {
  .selected-employees_light-border .selected-employees__row_is-error {
    border: solid 1px var(--color-red);
  }
}
.selected-employees_light-border .selected-employees__main-container {
  border-color: var(--color-light-grey-5);
}
@media (min-width: 81.25em) {
  .selected-employees_light-border .selected-employees__email {
    border-right: solid 1px var(--color-light-grey-5);
  }
}

/**
 * @block settings-card
 */
.settings-card {
  background-color: #FFF;
  padding-left: 20px;
  padding-top: 30px;
  border: 1px solid #C7D7D7;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  /**
   * @modifier is-pure-block
   */
}
.settings-card_is-pure-block {
  box-shadow: none;
  border: none;
}
.settings-card_box-shadow_none {
  box-shadow: none;
}

/**
 * @element label
 */
.settings-card__label {
  margin-bottom: 20px;
}

/**
 * @element header
 */
.settings-card__header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

/**
 * @element title
 */
.settings-card__title {
  flex: 1;
  font-weight: bold;
}

/**
 * @element description
 */
.settings-card__description {
  padding-bottom: 30px;
  padding-right: 80px;
}
@media (max-width: 47.99em) {
  .settings-card__description {
    padding-right: 10px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .settings-card__description {
    padding-right: 40px;
  }
}

.settings-card__content_type_appearance-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/**
 * @element settings
 */
.settings-card__checkbox {
  margin-right: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/**
 * @element warning
 */
.settings-card__warning {
  color: #D57F73;
}

.settings-card_is-small {
  padding-left: 15px;
  padding-top: 15px;
}
.settings-card_is-small .settings-card__description {
  padding-bottom: 15px;
}

/**
 * @block signature-form
 */
.signature-form {
  display: block;
}

/**
 * @element text
 */
.signature-form__text {
  margin-bottom: 15px;
}

/**
 * @element field-label
 */
.signature-form__field-label {
  margin-bottom: 12px;
}

/**
 * @element field-label
 */
.signature-form__field-label {
  margin-bottom: 12px;
}

/**
 * @element textarea
 */
.signature-form__textarea {
  width: 100%;
  height: 110px;
  border: solid thin #D8E4E4;
}

.signature-form__loading-container {
  min-height: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.signature-form__loading-text {
  width: 180px;
  font-size: 18px;
  color: #1297AC;
  text-align: center;
  margin-top: 15px;
}

/**
 * @block signature
 */
.signature {
  display: block;
}

/**
 * @element checkbox
 */
.signature__checkbox {
  margin-bottom: 20px;
}

/**
 * @element clear
 */
.signature__clear {
  position: absolute;
  right: 0;
  bottom: calc(100% + 15px);
  font-size: 13px;
  color: #D57F73;
}
.signature__clear:hover {
  text-decoration: underline;
}

/**
 * @element canvas-container
 */
.signature__canvas-container {
  position: relative;
}

/**
 * @element canvas
 */
.signature__canvas {
  width: 100%;
  height: 110px;
  border: solid thin #D8E4E4;
  background: #FFF;
  /**
   * @modifier is-disabled
   */
}
.signature__canvas_is-disabled {
  opacity: 0.5;
}

/**
 * @element label
 */
.signature__label {
  font-size: 29px;
  /**
   * @modifier font
   * @value cookie
   */
  /**
   * @modifier font
   * @value dancing-script
   */
  /**
   * @modifier font
   * @value great-vibes
   */
}
.signature__label_font_cookie {
  font-family: "Cookie", cursive;
}
.signature__label_font_dancing-script {
  font-family: "Dancing Script", cursive;
}
.signature__label_font_great-vibes {
  font-family: "Great Vibes", cursive;
}

/**
 * @block slide-checkbox
 */
.slide-checkbox {
  height: 20px;
  width: 45px;
  position: relative;
  box-sizing: border-box;
  border-radius: 35px;
  color: #FFF;
  text-transform: uppercase;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  cursor: default;
  background-color: #CBCBCB;
}
.slide-checkbox:not(.slide-checkbox_is-disabled) {
  background-color: #D57F73;
  cursor: pointer;
}
.slide-checkbox:not(.slide-checkbox_is-disabled):hover, .slide-checkbox:not(.slide-checkbox_is-disabled):focus {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.slide-checkbox::after {
  position: absolute;
  content: "";
  width: 14px;
  height: 14px;
  left: 2px;
  top: 50%;
  border-radius: 50%;
  background-color: #FFF;
  transition: all linear 200ms;
  transform: translateY(-50%);
}

/**
 * @element text
 */
.slide-checkbox__text {
  float: right;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 14px);
}

/**
 * @modifier is-checked
 * @for slide-checkbox
 */
.slide-checkbox_is-checked {
  /**
   * @element text
   */
}
.slide-checkbox_is-checked:not(.slide-checkbox_is-disabled) {
  background-color: var(--main-color);
  cursor: pointer;
}
.slide-checkbox_is-checked::after {
  left: 29px;
}
.slide-checkbox_is-checked .slide-checkbox__text {
  float: left;
  justify-content: center;
}

.smart-input {
  height: 70px;
  padding: 10px 10px 10px;
  border: solid 1px var(--main-color-light-10);
  transition: all 200ms ease;
  position: relative;
  box-sizing: border-box;
  background: #FFF;
}
.smart-input:hover:not(.smart-input_is-error):not(.smart-input_is-disabled) {
  border-color: var(--main-border-color-2);
}
.smart-input_flex_1 {
  flex: 1;
}
.smart-input_height_100p {
  height: 100%;
}
.smart-input_is_paddingless {
  padding: 0;
}
.smart-input_is_borderless {
  border: none;
}
.smart-input_padding-sides_0 {
  padding-left: 0;
  padding-right: 0;
}
.smart-input_background_transparent {
  background: transparent;
}
.smart-input_min-width_0 {
  min-width: 0;
}
.smart-input_input-holder-height_100p .smart-input__input-holder {
  height: 100%;
}
.smart-input_font-size_14 .smart-input__input {
  font-size: 14px;
}
.smart-input_font-size_10 .smart-input__input {
  font-size: 10px;
}
.smart-input_input-field-border_none .smart-input__input {
  border: none;
}
.smart-input_input-field-background_transparent .smart-input__input {
  background-color: transparent;
}
.smart-input_input-field-color_grey .smart-input__input {
  color: #5C5050;
}
.smart-input_input-field-text-transform_uppercase .smart-input__input {
  text-transform: uppercase;
}
.smart-input_selected-text_uppercase .smart-input__selected {
  text-transform: uppercase;
}
.smart-input_clear-button-top_2 .smart-input__clear {
  top: 2px;
}
.smart-input_is-filter {
  display: flex;
  height: 40px;
  border-radius: 3px;
  padding: 0 10px 0 0;
  align-items: center;
}
.smart-input_is-filter .smart-input__input-holder {
  flex: 1;
}
.smart-input_is-filter .smart-input__input {
  border-bottom: none;
  font-size: 13px;
}
.smart-input_is-filter::before {
  content: "";
  width: 36px;
  height: 100%;
  background: var(--svg-search) center center no-repeat;
  background-size: 11px 11px;
}

.smart-input__label {
  margin-bottom: 7px;
  height: 20px;
  display: flex;
  align-items: center;
}

.smart-input__optional {
  font-size: 10px;
  color: #B0A7A8;
  font-family: "Montserrat", sans-serif;
}

.smart-input__input-holder {
  position: relative;
  height: 22px;
}
.smart-input__input-holder_is-underlined {
  border-bottom: 1px solid #CDCACA;
  margin-bottom: 2px;
}

.smart-input__clear {
  position: absolute;
  right: 0;
  top: 6px;
  background: url("/assets/images/icons/x-sign-clear.svg");
  width: 10px;
  height: 10px;
  cursor: pointer;
}

.smart-input__input {
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  -webkit-appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  background: #FFF;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  border-bottom: solid 1px var(--color-light-grey-5);
}
.smart-input__input::-moz-placeholder {
  color: var(--color-light-grey-6);
  opacity: 1;
}
.smart-input__input::placeholder {
  color: var(--color-light-grey-6);
  opacity: 1;
}
.smart-input__input_has-arrow {
  background-image: url("/assets/images/icons/arrow-down-grey-thinner.svg");
  background-position: center right;
  background-size: 13px;
  background-repeat: no-repeat;
}

.smart-input__error-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: url(/assets/images/icons/field-error.svg) center no-repeat;
}

.ember-application:not(#ember-testing) .smart-input_is-focused:not(.smart-input_is-disabled):not(.smart-input_is-error) {
  border-color: var(--main-border-color-3);
}
.ember-application:not(#ember-testing) .smart-input_is-focused:not(.smart-input_is-disabled):not(.smart-input_is-error) .smart-input__input {
  border-color: var(--main-border-color-3);
}

.smart-input_is-error {
  border-bottom: 0;
  border-color: var(--color-red);
}

.smart-input_has-selected .smart-input__input {
  border-bottom: 0;
}

.smart-input__dropdown {
  height: 100px;
  display: flex;
  flex-direction: column;
  background-color: #FFF;
  border-width: 0 1px 1px;
  border-color: var(--main-border-color-3);
  border-style: solid;
  box-sizing: border-box;
}
.smart-input__dropdown_is-filter {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.smart-input__dropdown_is-filter .smart-input__option {
  font-size: 13px;
}

.smart-input__empty-search {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smart-input__empty-search-text {
  transform: translateY(-10px);
  font-weight: 600;
  text-align: center;
}

.smart-input__selected {
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
  cursor: default;
}

.smart-input__option {
  display: flex;
  align-items: center;
  height: 33px;
  padding: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
  color: #4A4A4A;
  /**
  * Can be manually set to active from keyboard navigation.
  * And natively on click.
  */
  /**
   * @for option
   */
}
.smart-input__option_is-active, .smart-input__option:active {
  background-color: rgb(244, 245, 247);
}
.smart-input__option_height_30 {
  height: 30px;
}
.smart-input__option:hover {
  background-color: var(--main-background-color-2);
}
.smart-input__option_is-loading-mask {
  cursor: default;
}
.smart-input__option_is-loading-mask:hover {
  background-color: #FFF;
}

.smart-input__scroll-window {
  overflow-y: auto;
  flex: 1;
}

.smart-input__create-new-holder {
  flex-shrink: 0;
  height: 55px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 10px 5px 5px 10px;
  cursor: pointer;
  border-top: 1px solid var(--main-color-light-6);
  color: var(--main-color);
  font-weight: 600;
}
.smart-input__create-new-holder:hover {
  background-color: var(--main-color);
  color: #FFF;
}

.smart-input__create-value {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-left: 11px;
}

.smart-input__new-icon {
  position: absolute;
  top: 0;
  right: 20px;
  text-transform: uppercase;
  color: #FFF;
  padding: 4px 5px;
  border-radius: 3px;
  background-color: var(--main-color);
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
}

.smart-input_is-tier-dropdown:not(.smart-input_is-error):not(.smart-input_is-focused) {
  border: none;
}
.smart-input_is-tier-dropdown .smart-input__input-holder {
  flex: 1;
}
@media (min-width: 64em) {
  .smart-input_is-tier-dropdown {
    display: flex;
    align-items: center;
  }
}

.smart-input_is-member-search-bar {
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 0;
}

.smart-input_is-disabled {
  background-color: var(--smart-input-is-disabled-background-color);
  color: var(--smart-input-is-disabled-color);
  border: var(--smart-input-is-disabled-border);
}
.smart-input_is-disabled .smart-input__input {
  color: #9A8E8F;
  background-color: #F8F8F8;
  border-color: var(--smart-input-is-disabled-input-border);
}

.smart-input__dropdown_options_5 {
  height: 166px;
}

.smart-input__dropdown_can_create {
  height: 155px;
  /**
   * We want to center the empty text a little more in this case.
   */
}
.smart-input__dropdown_can_create .smart-input__empty-search-text {
  transform: translateY(-5px);
}

.smart-input__create-new-holder .smart-input__create-plus {
  display: flex;
  align-items: center;
}
.smart-input__create-new-holder .smart-input__create-plus::before {
  content: "";
  height: 20px;
  width: 14px;
  background-image: var(--svg-plus);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 7px 7px;
  background-image: var(--svg-plus-thick);
}
.smart-input__create-new-holder:hover .smart-input__create-plus {
  display: flex;
  align-items: center;
}
.smart-input__create-new-holder:hover .smart-input__create-plus::before {
  content: "";
  height: 20px;
  width: 14px;
  background-image: var(--svg-plus);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 7px 7px;
  background-image: url("/assets/images/icons/plus.svg");
}

.smart-input__dropdown_is-loading .smart-input__option:hover {
  background-color: #FFF;
}

.smart-input__dropdown_is-error {
  border-color: var(--color-red);
}

.smart-input__dropdown_is-flipped {
  border-width: 1px 1px 0;
}

.smart-input_without-width-hardcoding .smart-input__selected {
  max-width: calc(100% - 20px);
}

.smart-input__required-symbol {
  margin-left: 2px;
  width: 7px;
  height: 7px;
  background-size: 7px 7px;
  background-image: var(--svg-required-star);
}
.smart-input__required-symbol_color_red {
  background-image: url("/assets/images/icons/required-star-red.svg");
}
.smart-input__required-symbol_color_grey {
  background-image: url("/assets/images/icons/required-star-grey.svg");
}
.smart-input__required-symbol_color_dark {
  background-image: url("/assets/images/icons/required-star-dark.svg");
}
.smart-input__required-symbol_color_normal {
  background-image: url("/assets/images/icons/required-star-dark-grey.svg");
}
.smart-input__required-symbol_color_blue {
  background-image: url("/assets/images/icons/required-star-dark-blue.svg");
}

.smart-input__help-tip-holder {
  margin-left: 2px;
}

/**
 * Modal containing the list of fields to sort from.
 * Currently only used on mobile screens.
 *
 * @block sort-modal
 */
.sort-modal {
  display: block;
}

.sort-modal__option {
  cursor: pointer;
  height: 50px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.sort-modal__option:hover {
  background-color: #B7CBE2;
}
.sort-modal__option_is-selected {
  background-color: #CDDCEE;
}

.sort-modal__option-content {
  padding: 0 17px;
  display: flex;
  align-items: center;
}

.sort-modal__arrow {
  width: 0;
  height: 0;
  margin-right: 10px;
  border-left: solid 4px transparent;
  border-right: solid 4px transparent;
  /**
   * @for arrow
   */
  /**
   * @for arrow
   */
}
.sort-modal__arrow_side_up {
  border-bottom: solid 5px #034FA8;
}
.sort-modal__arrow_side_down {
  border-top: solid 5px #034FA8;
}

.sort-modal_theme_green .sort-modal__option:hover {
  background-color: #EDEDED;
}
.sort-modal_theme_green .sort-modal__option_is-selected {
  background-color: #E2E0E0;
}
.sort-modal_theme_green .sort-modal__arrow_side_up {
  border-bottom: solid 5px #1297AC;
}
.sort-modal_theme_green .sort-modal__arrow_side_down {
  border-top: solid 5px #1297AC;
}

/**
 * A Block containing the status filters
 * of an employee.
 *
 * @block status-filter
 */
.status-filter {
  width: 100%;
  display: flex;
  /**
   * @modifer is-vertical
   */
}
.status-filter_is-vertical {
  flex-direction: column;
}
.status-filter_is-vertical .status-filter__custom-checkbox {
  margin-bottom: 20px;
}
:not(.status-filter_is-vertical) .status-filter__custom-checkbox {
  margin-right: 20px;
}
@media (max-width: 47.99em) {
  .status-filter_is-in-modal {
    box-sizing: border-box;
    padding: 20px 20px;
  }
}

/**
 * @element custom-checkbox
 */
.status-filter__custom-checkbox {
  display: flex;
  align-items: center;
}
.status-filter__custom-checkbox:last-child {
  margin-bottom: 0;
}

/**
 * @element checkbox-content
 */
.status-filter__checkbox-content {
  display: flex;
}
.status-filter__checkbox-content_font-size_13 {
  font-size: 13px;
}

/**
 * @element text
 */
.status-filter__text {
  text-transform: uppercase;
  font-size: 11px;
  color: #5C5050;
  /**
   * @for text
   */
}
.status-filter__text_size_10 {
  font-size: 10px;
}
.status-filter__text_is-select-all {
  font-size: 13px;
  text-transform: none;
  font-style: italic;
}

/**
 * @element number
 */
.status-filter__number {
  font-size: 11px;
  color: #5C5050;
  width: 35px;
  padding-left: 3px;
}

/**
 * @element category
 */
.status-filter__category:after {
  content: "";
  display: block;
  margin: 15px 12px;
  height: 1px;
  bottom: 0;
  background-color: #E3EBEB;
}
.status-filter__category:last-child, .status-filter__category_is-last {
  margin-bottom: 0;
  padding-bottom: 0;
}
.status-filter__category:last-child:after, .status-filter__category_is-last:after {
  display: none;
}

/**
 * @element category-name
 */
.status-filter__category-name {
  padding-left: 12px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: "Montserrat", sans-serif;
  color: #B0A7A8;
  font-size: 11px;
}

.status-filter__inputs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 0;
  box-sizing: border-box;
}
.status-filter__inputs_is-vertical {
  flex-direction: column;
  padding: 10px 0 0;
}

.status-filter__input {
  width: 45%;
  height: 70px;
  box-sizing: border-box;
}
.status-filter__input_width_full {
  width: 100%;
  padding: 0 10px;
}

.stretchy-textarea {
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  -webkit-appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  background: #FFF;
  margin-top: 8px;
  width: 100%;
  min-height: 140px;
  border: solid thin var(--main-color-light-31);
  vertical-align: top;
  padding: 10px;
  border-radius: 2px;
  transition: border-color 300ms ease;
  resize: vertical;
  font-size: 16px;
  line-height: 22px;
}
@media (min-width: 48em) {
  .stretchy-textarea {
    min-height: 85px;
  }
}
.stretchy-textarea:focus {
  border-color: var(--main-color-dark);
}
.stretchy-textarea::-moz-placeholder {
  color: var(--color-light-grey-6);
  font-size: 14px;
  opacity: 1;
}
.stretchy-textarea::placeholder {
  color: var(--color-light-grey-6);
  font-size: 14px;
  opacity: 1;
}
.stretchy-textarea_has-margin-bottom {
  margin-bottom: 20px;
}
.stretchy-textarea_is-error {
  border-color: #D57F73;
}
.stretchy-textarea_font-size_14 {
  font-size: 14px;
}
.stretchy-textarea_is-borderless {
  border: none;
}
.stretchy-textarea_margin-top_0 {
  margin-top: 0;
}
.stretchy-textarea_line-height_18 {
  line-height: 18px;
}
.stretchy-textarea_color_grey {
  color: #5C5050;
}
@media (max-width: 63.99em) {
  .stretchy-textarea_min-height_30-until-desktop {
    min-height: 30px;
  }
}
@media (min-width: 64em) {
  .stretchy-textarea_min-height_50-from-desktop {
    min-height: 50px;
  }
}
@media (max-width: 63.99em) {
  .stretchy-textarea_padding_0-until-desktop {
    padding: 0;
  }
}
@media (max-width: 63.99em) {
  .stretchy-textarea_has-border-bottom-until-desktop {
    border-bottom: solid 1px #5C5050;
  }
  .stretchy-textarea_has-border-bottom-until-desktop:focus {
    border-color: #5C5050;
  }
}

/**
 * @block table
 */
.table {
  display: table;
  width: 100%;
  /**
   * @modifier margin-top
   */
}
.table_margin-top {
  margin-top: 40px;
}

/**
 * @element row
 */
.table__row {
  display: table-row;
  /**
   * @modifier is-disabled
   * @for row
   */
}
.table__row_is-disabled {
  opacity: 0.7;
}

/**
 * @element cell
 */
.table__cell {
  display: table-cell;
  border-right: solid 1px var(--color-light-blue);
  box-sizing: border-box;
  padding-left: 15px;
  font-size: 13px;
  padding-bottom: 10px;
  /**
   * @modifier color
   * @value red
   * @for cell
   */
}
.table__cell:first-child {
  padding-left: 0;
}
.table__cell:last-child {
  border-right: none;
}
.table__cell_align_right {
  text-align: right;
}
.table__cell_color_red {
  color: var(--color-red);
}
.table__cell_is-borderless {
  border: none;
}

.table__editable-content {
  display: flex;
  align-items: center;
  padding-right: 8px;
}
.table__editable-content_is-padded {
  padding-left: 23px;
}

.table__edit-btn {
  width: 17px;
  height: 17px;
  background: url("/assets/images/icons/edit.svg") center center no-repeat;
  background-size: 9px 9px;
  margin-left: auto;
  cursor: pointer;
}
.table__edit-btn:hover {
  background-image: url("/assets/images/icons/edit-dark-green.svg");
}
.table__edit-btn_is-sticky {
  margin-left: 5px;
}

/**
 * @modifier is-last-unpadded
 * @for row
 */
.table__row_is-last-unpadded:last-child .table__cell {
  padding-bottom: 0;
}

/**
 * Changes mobile layout from table to flex. Changes order of the columns.
 * Used in places like elected benefit cards.
 *
 * @modifier is-mobile-flex
 */
@media (max-width: 47.99em) {
  .table_is-mobile-flex .table__row {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 10px;
    border-bottom: solid thin #C7D7D7;
  }
  .table_is-mobile-flex .table__row:first-child {
    display: none;
  }
  .table_is-mobile-flex .table__row:last-child {
    border-bottom: none;
  }
  .table_is-mobile-flex .table__cell {
    display: block;
    border-right: none;
    box-sizing: border-box;
    width: 50%;
    padding: 0;
  }
  .table_is-mobile-flex .table__cell:nth-child(1) {
    order: 1;
    margin-bottom: 5px;
  }
  .table_is-mobile-flex .table__cell:nth-child(2) {
    order: 3;
    padding-left: 22px;
  }
  .table_is-mobile-flex .table__cell:nth-child(3) {
    order: 2;
    margin-bottom: 5px;
  }
  .table_is-mobile-flex .table__cell:nth-child(4) {
    order: 4;
  }
}

/**
 * Represents the terminate dependents modal
 *
 * @block terminate-dependents-modal
 */
.terminate-dependents-modal {
  height: 100%;
}

/**
 * @element select-dependent
 */
.terminate-dependents-modal__select-dependent {
  margin: -5px 5px 15px;
  color: #1297AC;
  font-size: 10px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
}

/**
 * @element different-reasons
 */
.terminate-dependents-modal__different-reasons {
  margin: 15px 5px 10px;
  display: inline-block;
  color: #5C5050;
}

/**
 * @element name
 */
.terminate-dependents-modal__name {
  display: inline-block;
  width: 100%;
  margin: 5px 5px;
  font-size: 18px;
  font-weight: bold;
  color: #5C5050;
}

/**
 * @element edit-before-checkbox
 */
.terminate-dependents-modal__edit-before-checkbox {
  margin: 10px 5px 0;
  display: inline-block;
}

/**
 * Terms and conditions component.
 *
 * @block terms
 *
 * terms
 * |-text
 * |--check
 * |---check-text
 * |-hint
*/
.terms {
  width: 100%;
  margin: 0 auto;
  background-color: #FFF;
}
@media (min-width: 48em) {
  .terms {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .terms_position_absolute {
    position: absolute;
  }
}

/**
 * @element text
 */
.terms__text {
  width: 100%;
  height: 100%;
  font-size: 14px;
  box-sizing: border-box;
  padding: 19px 19px 50px;
  color: #5C5050;
}
.terms__text p {
  margin: 0 0 10px;
}
.terms__text a {
  color: #B0A7A8;
}
.terms__text a:hover {
  color: var(--main-color-dark);
}
.terms__text a:active {
  color: var(--main-color);
}
.terms__text_has-no-paragraph-spacing p {
  margin: 0;
}
.terms__text_is-scrollable {
  overflow: auto;
}

.terms__checkboxes-parent {
  margin-top: 30px;
}

.terms__checkbox-container:not(:last-child) {
  margin-bottom: 10px;
}

/**
 * @element hint
 */
.terms__hint {
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  visibility: visible;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.95) 45%);
  opacity: 1;
  color: var(--main-color-dark);
  transition: all 0.3s linear;
  position: fixed;
  bottom: 0;
  /**
   * @modifier is-hidden
   */
}
@media (min-width: 48em) {
  .terms__hint {
    width: 728px;
  }
}
@media (min-width: 81.25em) {
  .terms__hint {
    width: 1020px;
  }
}
@media (max-width: 47.99em) {
  .terms__hint {
    bottom: 45px;
  }
}
.terms__hint_is-hidden {
  visibility: hidden;
  opacity: 0;
}

/**
 * @element check
 */
@media (max-width: 47.99em) {
  .terms__check {
    margin: 15px 0;
  }
}
@media (min-width: 48em) {
  .terms__check {
    margin-top: 35px;
  }
}

/**
 * @element check-text
 */
.terms__check-text {
  font-size: 16px;
}

/**
 * @element bold
 */
.terms__bold {
  font-weight: bold;
}

.terms__section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.terms__section {
  margin-top: 20px;
}

.title-validation-error {
  display: block;
}

.title-validation-error__title_has-error {
  color: var(--color-red);
}

/**
 * @block transaction-approval
 */
.transaction-approval {
  width: 100%;
  padding-bottom: 50px;
}

/**
 * @element last-updated
 */
.transaction-approval__last-updated {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

trix-editor {
  border: 1px solid #BBB;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 7em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #BBB;
  border-top-color: #CCC;
  border-bottom-color: #888;
  border-radius: 3px;
}

trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #DDD;
  border-radius: 0;
  background: transparent;
}

trix-toolbar .trix-button:not(:last-child) {
  border-right: 1px solid #CCC;
}

trix-toolbar .trix-button.trix-active {
  background: var(--main-color-light-26);
  color: black;
}

trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}

trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}

trix-toolbar .trix-button--icon-attach::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
  top: 8%;
  bottom: 4%;
}

trix-toolbar .trix-button--icon-bold::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-italic::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-link::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-strike::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-quote::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-code::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-undo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-redo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-dialogs {
  position: relative;
}

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #FFF;
  box-shadow: 0 0.3em 1em #CCC;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #BBB;
  background-color: #FFF;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0 0 1.5px 1px;
}

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}

trix-toolbar .trix-dialog--link {
  max-width: 600px;
}

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}

trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}

trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection,
trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}

trix-editor [data-trix-mutable]::-moz-selection, trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection,
trix-editor [data-trix-mutable] ::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}

trix-editor .attachment {
  position: relative;
}

trix-editor .attachment:hover {
  cursor: default;
}

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}

trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}

trix-editor .trix-button-group {
  display: inline-flex;
}

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}

trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #CCC;
}

trix-editor .trix-button.trix-active {
  background: var(--main-color-light-26);
}

trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #FFF;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}

trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}

trix-editor .trix-button--remove:hover {
  border-color: #333;
}

trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}

trix-editor .attachment__metadata-container {
  position: relative;
}

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}

trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
  background: #FFF;
}
.trix-content_is-error {
  border-color: #D57F73;
}

.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}

.trix-content blockquote {
  border: 0 solid #CCC;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}

.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}

.trix-content li {
  margin-left: 1em;
}

.trix-content a {
  color: var(--main-color);
}
.trix-content a:hover {
  color: var(--main-color-dark);
  text-decoration: underline;
}

.trix-content [dir=rtl] li {
  margin-right: 1em;
}

.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #EEE;
  overflow-x: auto;
}

.trix-content img {
  max-width: 100%;
  height: auto;
}

.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}

.trix-content .attachment a:hover,
.trix-content .attachment a:visited:hover {
  color: inherit;
}

.trix-content .attachment__caption {
  text-align: center;
}

.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " · ";
}

.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}

.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}

.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #BBB;
  border-radius: 5px;
}

.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

/**
 * Used as a menu for user relevant
 * links.
 *
 * @block user-menu
 */
.user-menu {
  background-color: #FFF;
  border: 1px solid #C7D7D7;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  min-width: 160px;
}

/**
 * @element header
 */
.user-menu__header {
  padding-bottom: 10px;
  border-bottom: 1px solid #C7D7D7;
}

/**
 * @element section
 */
.user-menu__section {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E2E0E0;
}

/**
 * @element link
 */
.user-menu__link {
  height: 28px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-left: 20px;
  color: #5C5050;
  font-size: 13px;
  /**
   * @modifier icon
   * @value switch-profiles
   * @for link
   */
  /**
   * Footer links are a bit bigger in height.
   *
   * @modifier type
   * @value footer
   * @for link
   */
  /**
   * @modifier color
   * @value red
   * @for link
   */
}
.user-menu__link:hover {
  background-color: #EDEDED;
}
.user-menu__link:active {
  background-color: #E2E0E0;
}
.user-menu__link_icon_switch-profiles:before {
  content: "";
  width: 13px;
  height: 12px;
  margin-right: 10px;
  background: url("/assets/images/icons/switch-profiles.svg") center center no-repeat;
  background-size: 100% 100%;
}
.user-menu__link_type_footer {
  height: 33px;
}
.user-menu__link_color_red {
  color: var(--color-red);
}

/**
 * @element footer
 */
.user-menu__footer {
  padding: 10px 0;
}

/**
 * The user permissions page.
 *
 * @block user-permissions
 */
.user-permissions {
  padding: 10px 15px;
}
@media (min-width: 48em) {
  .user-permissions {
    padding-bottom: 50px;
  }
}

/**
 * @element last-updated
 */
.user-permissions__last-updated {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

/**
 * @element section
 */
.user-permissions__section {
  margin-bottom: 20px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border: 1px solid #C7D7D7;
}
@media (min-width: 48em) {
  .user-permissions__section:last-child {
    margin-bottom: 0;
  }
}

/**
 * @element section-label
 */
.user-permissions__section-label {
  padding-top: 30px;
  background-color: #FFF;
  padding-left: 20px;
}

/**
 * @element settings-card
 */
.user-permissions__settings-card {
  border-bottom: 1px solid #C7D7D7;
}

/**
 * The trigger for the user-dropdown
 * contains the user avatar, name,
 * and drop down arrow.
 *
 * 1. Avoid squashing if inside a flex element and siblings larger
 * than parent.
 *
 * @block user-title
 */
.user-title {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* [1] */
  height: 62px;
  padding-left: 13px;
  cursor: pointer;
}
.user-title:hover {
  background-color: #EDEDED;
}
.user-title:active {
  background-color: #E2E0E0;
}
@supports not (zoom: 1) {
  .user-title_is-preview.user-title_type_trigger {
    height: 60px;
  }
}
@supports not (zoom: 1) {
  .user-title_is-preview .user-title__name {
    font-size: 10.5px;
  }
  .user-title_is-preview .user-title__avatar {
    width: 28.5px;
    height: 28.5px;
  }
}

/**
 * Contains the user's avatar.
 *
 * @element title-avatar
 */
.user-title__avatar {
  width: 38px;
  height: 38px;
  position: relative;
  flex-shrink: 0;
  margin-right: 9px;
  background-color: var(--user-title-avatar-background-color);
  border-radius: 50%;
}
.user-title__avatar::after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  background: url("/assets/images/icons/user.svg") center no-repeat;
}

.user-title__status {
  margin-top: 4px;
  display: inline-block;
}

/**
 * Contains the user's full name and the drop down arrow.
 *
 * @element title-name-holder
 */
.user-title__name-holder {
  display: flex;
  overflow: hidden;
}

.user-title__viewing-as-container {
  max-width: 100%;
}

/**
 * The user's name.
 *
 * @element name
 */
.user-title__name {
  color: #5C5050;
  font-size: 14px;
  font-weight: bold;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
 * The drop down arrow.
 *
 * 1. Applied when user-menu is opened so it rotates on initial render.
 *
 * @element arrow
 */
.user-title__arrow {
  flex-shrink: 0;
  width: 40px;
  margin-top: 2px;
  background: url("/assets/images/icons/arrow-up.svg") center no-repeat;
  background-size: 10px 6px;
  transition: transform 300ms linear;
}
.user-title__arrow_in-popup {
  animation: user-title__arrow-rotate 300ms linear; /* 1 */
}

.user-title__name-and-arrow-container {
  display: flex;
}

/**
 * @element info
 */
.user-title__info {
  flex: 1;
  min-width: 0;
}

/**
 * @element trigger
 */
.user-title_type_trigger {
  height: 80px;
  padding-left: 23px;
  padding-right: 10px;
  /**
   * @modifier dir
   * @value down
   * @for arrow
   */
}
.user-title_type_trigger:hover {
  background-color: var(--user-title-hover-active-background-color);
}
.user-title_type_trigger:active {
  background-color: var(--user-title-hover-active-background-color);
}
.user-title_type_trigger .user-title__arrow:not(.user-title_is-preview) {
  transform: rotate(-180deg);
  transition: transform 300ms linear;
}

/**
 * @modifier user-title_rotate_clockwise
 */
.user-title_rotate_clockwise {
  /**
   * @element arrow
   */
}
.user-title_rotate_clockwise .user-title__arrow {
  transform: rotate(0);
}

@keyframes user-title__arrow-rotate {
  0% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(0);
  }
}
.user-title_is-collapsed {
  padding: 0;
  justify-content: center;
}
.user-title_is-collapsed .user-title__avatar {
  margin: 0;
}

/**
 * Green check indicating that a value has been successfully validated.
 *
 * @block validated-icon
 */
.validated-icon {
  display: block;
  width: 18px;
  height: 15px;
  background: url("/assets/images/icons/check.svg") center center no-repeat;
  animation: validated-icon__enter 300ms ease;
}
.validated-icon_theme_blue {
  background: url("/assets/images/themes/blue/icons/check.svg") center center no-repeat;
}
.validated-icon_animation_none {
  animation: none;
}
.validated-icon_size_small {
  width: 13px;
  height: 11px;
}

@keyframes validated-icon__enter {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.viewing-as {
  display: flex;
  flex-direction: column;
}

.viewing-as__title {
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  color: #9C9C9C;
  margin-top: 4px;
  white-space: nowrap;
}

.viewing-as__name {
  margin-top: 3px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #4A4A4A;
  font-size: 14px;
}

.viewing-as_theme_green .viewing-as__title {
  color: #38A1B7;
}

.waive-modal {
  display: block;
}

.waive-modal__section-padding {
  padding: 20px 5px 0;
}

/**
 * Used in the enrollment summary.
 *
 * @block waived-card
 */
.waived-card {
  /**
   * @modifier is-grouped
   */
}
.waived-card_is-grouped {
  border-bottom: solid 1px #98B7B7;
}
.waived-card_is-grouped:first-child {
  border-top: solid 1px #98B7B7;
}
.waived-card_is-grouped:last-child {
  border-bottom: 0;
}
.waived-card_is-changed {
  background-color: #FFF4E8;
}

/**
 * @element section-padding
 */
.waived-card__section-padding {
  padding-left: 20px;
  padding-right: 20px;
}

/**
 * @element type
 */
.waived-card__type {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-top: 15px;
  box-sizing: border-box;
  font-weight: bold;
  display: flex;
  align-items: center;
}
@media (max-width: 47.99em) {
  .waived-card__type {
    padding-left: 20px;
  }
}

/**
 * @element type-name
 */
.waived-card__type-name {
  flex: 1;
}

/**
 * Used in the enrollment summary.
 *
 * @element type-waived
 */
.waived-card__type-waived {
  color: var(--color-red);
}

/**
 * @element type-icon
 */
.waived-card__type-icon {
  height: 11px;
  width: 11px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

/**
 * @element all-waived
 */
.waived-card__all-waived {
  padding: 20px 20px 0;
  color: #D78B80;
  font-size: 26px;
  font-weight: lighter;
}

.waived-card__none-to-waive {
  padding: 20px 20px 0;
  color: #1297AC;
  font-size: 26px;
  font-weight: lighter;
}

/**
 * @element reason
 */
.waived-card__reason {
  padding: 15px 0;
}
.waived-card__reason_is-changed {
  background-color: #FFF4E8;
}

/**
 * @element fields
 */
.waived-card__fields {
  display: flex;
}
.waived-card__fields_is-changed {
  background-color: #FFF4E8;
}

/**
 * @element field
 */
.waived-card__field {
  padding: 15px 0;
}
@media (max-width: 47.99em) {
  .waived-card__field {
    padding-right: 20px;
  }
}
@media (min-width: 48em) {
  .waived-card__field {
    padding-right: 60px;
  }
}

/**
 * @block waived-state
 */
.waived-state {
  height: 100%;
  display: flex;
  overflow: auto;
  align-items: center;
  text-align: center;
  justify-content: center;
  /**
   * @modifier in-preview
   */
}
.waived-state_in-preview {
  border-top: solid 1px var(--color-light-blue);
  padding: 40px 0;
}

/**
 * @element content
 */
.waived-state__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 81.24em) {
  .waived-state__content {
    padding: 0 10px;
  }
}
@media (min-width: 81.25em) {
  .waived-state__content {
    padding: 0 60px;
  }
}
.waived-state__content:before {
  content: "";
  background: url("/assets/images/icons/waived.svg") top center no-repeat;
  width: 55px;
  height: 55px;
  background-size: 100% 100%;
}

/**
 * @element title
 */
.waived-state__title {
  font-size: 26px;
  font-weight: lighter;
  color: #1297AC;
  padding: 20px 0;
}

/**
 * @element description
 */
.waived-state__description {
  font-size: 14px;
}

/**
 * A form separated into many steps. This block takes over the entire page.
 *
 * @block wizard
 */
.wizard {
  background-color: #F8F8F8;
  min-height: 100%;
  position: relative;
}

/**
 * @element header
 */
.wizard__header {
  z-index: 2;
}

/**
 * @element header-top
 */
.wizard__header-top {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  padding: 0 15px;
  border-bottom: solid 1px var(--color-light-blue);
  background-color: #FFF;
  padding-right: 30px;
}

/**
 * @element left
 */
.wizard__left {
  height: 100%;
  display: flex;
  align-items: center;
}

/**
 * @element title
 */
@media (max-width: 47.99em) {
  .wizard__title {
    font-size: 16px;
  }
}
@media (min-width: 48em) {
  .wizard__title {
    font-size: 20px;
  }
}

/**
 * @element right
 */
.wizard__right {
  display: flex;
}

/**
 * @element header-action
 */
@media (min-width: 48em) {
  .wizard__header-action {
    margin-left: 30px;
  }
}

/**
 * This element is not a DOM child of the wizard (for z-index and position: fixed
 * reasons). As a result it should not be styled while assuming it's a child
 * of wizard.
 *
 * @element header-bottom
 */
.wizard__header-bottom {
  z-index: 2;
  position: absolute;
  background-color: #F8F8F8;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  top: 65px;
  left: 0;
  width: 100%;
  transition: height 300ms linear;
}
@media (max-width: 47.99em) {
  .wizard__header-bottom {
    padding-left: 20px;
  }
}
@media (min-width: 48em) {
  .wizard__header-bottom {
    padding-left: 50px;
  }
}

/**
 * @element steps
 */
.wizard__steps {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transform: translateY(-10px);
}

/**
 * @element step
 */
.wizard__step {
  font-size: 13px;
  display: block;
  position: relative;
  height: 28px;
  margin-right: 8px;
  text-align: left;
  color: #B0A7A8;
  pointer-events: none;
  overflow: hidden;
}
@media (max-width: 63.99em) {
  .wizard__step {
    width: 200px;
  }
  .wizard__step:not(.wizard__step_current) {
    display: none;
  }
}
@media (min-width: 64em) and (max-width: 81.24em) {
  .wizard__step {
    width: 112px;
  }
}
@media (min-width: 81.25em) and (max-width: 89.0525em) {
  .wizard__step {
    width: 150px;
  }
}
@media (min-width: 89.0625em) {
  .wizard__step {
    width: 200px;
  }
}

/**
 * @element step-bar
 */
.wizard__step-bar {
  display: block;
  height: 6px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transition: transform 300ms ease;
  background-color: #1297AC;
  /**
   * A filter on top of the bar to render its color paler.
   *
   * @modifier is-filter
   * @for step-bar
   */
}
.wizard__step-bar_is-filter {
  border-radius: 0;
  transform: translateX(0);
  background: #F8F8F8;
  opacity: 0.7;
}

/**
 * @element step-square
 */
.wizard__step-square {
  width: 13px;
  height: 10px;
  position: absolute;
  bottom: 0;
  right: -5px;
  background: #F8F8F8;
}
.wizard__step-square:first-child {
  transform: translateY(-6px) rotate(40deg);
}
.wizard__step-square:last-child {
  transform: translateY(10px) rotate(-40deg);
}

.wizard__step:focus, .wizard__step:hover {
  color: inherit;
  outline: none;
}
.wizard__step:focus .wizard__step-bar, .wizard__step:hover .wizard__step-bar {
  background-color: rgba(18, 151, 172, 0.7);
}

.wizard__step:active {
  opacity: 0.8;
}

/**
 * When a step is active (highlighted and clickable). Usually applied
 * to current and previous steps.
 *
 * @modifier active
 * @for step
 */
.wizard__step_active {
  pointer-events: auto;
  cursor: pointer;
}
.wizard__step_active .wizard__step-bar_is-filter {
  transform: translateX(100%);
}

/**
 * @modifier active
 * @for step
 */
.wizard__step_active,
.wizard__step_active:hover {
  color: inherit;
}

/**
 * @element actions
 */
.wizard__actions {
  display: flex;
  align-items: center;
}

.wizard__action {
  margin-right: 30px;
}

/**
 * 1. Account for the bottom header since it's absolutely positioned so
 * out of flow.
 */
.wizard__body {
  padding-top: 85px; /* 1 */
  z-index: 1;
  animation: wizard--entrance 300ms ease-in;
}

/**
 * 1. Allow children to have absolute positioning.
 *
 * @element form
 */
.wizard__form {
  position: relative; /* 1 */
  box-sizing: border-box;
  max-width: 950px;
  margin: auto;
  padding-top: 10px;
  height: 100%;
  /**
   * @modifier expand
   * @for form
   */
  /**
   * @modifier touch-sides
   * @for form
   */
  /**
   * @modifier is-flex
   * @for form
   */
  /**
   * @modifier is-benefits-form
   */
}
.wizard__form_expand {
  max-width: none;
  margin-left: 50px;
  margin-right: 50px;
}
.wizard__form_touch-sides {
  padding: 0;
  max-width: 0;
}
.wizard__form_is-flex {
  display: flex;
  flex-direction: column;
}
@media (min-width: 48em) {
  .wizard__form {
    padding-bottom: 50px;
    /**
     * @modifier has-no-bottom-padding
     */
  }
  .wizard__form_has-no-bottom-padding {
    padding-bottom: 0;
  }
}
@media (min-width: 64em) {
  .wizard__form_is-benefits-form {
    padding-bottom: 0;
  }
}

/**
 * Modifier can't be on the parent because technically
 * this element is not a child of the parent (rendered using ember-wormhole)
 *
 * 1. Must be higher than everything! This includes all modals/dialogs such as
 * power select, date picker, menu modals...
 *
 * @modifier is-scrolled
 * @for header-bottom
 */
.wizard__header-bottom_is-scrolled {
  z-index: 11; /* 1 */
  height: 65px;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}

@keyframes wizard--entrance {
  0% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
@media (max-width: 47.99em) {
  /**
   * @modifier has-bottom-mobile-actions
   */
  .wizard__form_has-bottom-mobile-actions {
    padding-bottom: 50px;
  }
  /**
   * @modifier has-bottom-mobile-footer
   */
  .wizard__form_has-bottom-mobile-footer {
    padding-bottom: 50px;
  }
  /**
   * @element bottom-mobile-footer
   */
  .wizard__bottom-mobile-footer {
    position: fixed;
    bottom: 45px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    font-size: 14px;
    box-shadow: 0 -4px 8px -2px rgba(0, 0, 0, 0.1); /* 1 */
    background: #EBEBEB;
  }
  /**
   * @element bottom-actions
   */
  .wizard__bottom-actions {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #FFF;
    border-top: solid 1px #98B7B7;
  }
  /**
   * @element bottom-action
   */
  .wizard__bottom-action {
    flex: 1;
  }
}
/**
 * Fills height on desktop when the content itself is scrollable (like benefits).
 *
 * @modifier height
 * @value fixed
 * @for wizard
 */
@media (min-width: 64em) {
  .wizard_height_fixed {
    height: 100%;
  }
}
.wizard_height_fixed .wizard__body {
  box-sizing: border-box;
  height: calc(100% - 65px);
}
.wizard_height_fixed .wizard__body > .liquid-container, .wizard_height_fixed .wizard__body > .liquid-container > .liquid-child {
  height: 100%;
}
.wizard_height_fixed .wizard__form {
  max-width: none;
  height: 100%;
}
@media (min-width: 48em) {
  .wizard_height_fixed .wizard__form:not(.wizard__form_touch-sides) {
    padding-left: 50px;
    padding-right: 30px;
  }
}

/**
 * The difference form `height_fixed` is that we even fix it on mobile.
 *
 * @modifier height
 * @value always-fixed
 */
.wizard_height_always-fixed {
  height: 100%;
}
.wizard_height_always-fixed .wizard__body {
  box-sizing: border-box;
  height: calc(100% - 65px);
}
.wizard_height_always-fixed .wizard__body > .liquid-container, .wizard_height_always-fixed .wizard__body > .liquid-container > .liquid-child {
  height: 100%;
}
.wizard_height_always-fixed .wizard__form {
  max-width: none;
  height: 100%;
}

/**
 * 1. The 5px to the left is equal to the grid cell field margin in the form below it.
 *
 * @element form-title
 */
.wizard__form-title {
  padding: 0 0 14px 5px; /* 1 */
}

.wizard__form-name {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  color: #0D7383;
}

.wizard__form-date {
  display: inline-block;
  margin-left: 8px;
  color: #5C5050;
  font-size: 13px;
  font-weight: bold;
}

.wizard-form__alert {
  margin-bottom: 20px;
}
@media (max-width: 47.99em) {
  .wizard-form__alert {
    margin: 0 13px 20px 18px;
  }
}

/**
 * The message to tell the user that a certain feature does not support
 * a specific screen size (Example Census Import on mobile).
 *
 * @element screen-unavailable
 */
.wizard__screen-unavailable {
  padding: 0 10px;
  text-align: center;
}

/**
 * Block used to wrap workflows in quoting.
 */
.workflow {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.workflow_background_white {
  background: #FFF;
}
.workflow_height_auto {
  height: auto;
}
.workflow_breakpoint_1300 {
  /**
  * 1. For scroll to work on Firefox.
  * 2. When we shake the child (outlet-container) we don't want this element to show horizontal scroll-bars.
  */
}
.workflow_breakpoint_1300 .workflow__body {
  flex: 1;
  display: flex;
  min-height: 0; /* 1 */
  overflow-x: hidden; /* 2 */
}
@media (max-width: 81.24em) {
  .workflow_breakpoint_1300 .workflow__body {
    flex-direction: column;
  }
}
.workflow:not(.workflow_breakpoint_1300) {
  /**
  * 1. For scroll to work on Firefox.
  * 2. When we shake the child (outlet-container) we don't want this element to show horizontal scroll-bars.
  */
}
.workflow:not(.workflow_breakpoint_1300) .workflow__body {
  flex: 1;
  display: flex;
  min-height: 0; /* 1 */
  overflow-x: hidden; /* 2 */
}
@media (max-width: 63.99em) {
  .workflow:not(.workflow_breakpoint_1300) .workflow__body {
    flex-direction: column;
  }
}

.workflow__header {
  display: flex;
  justify-content: space-between;
  height: 65px;
  padding: 0 30px 0 15px;
  border-bottom: solid 1px var(--color-light-blue);
  background-color: #FFF;
}
.workflow__header_no-border {
  border-bottom: 0;
}
@media (min-width: 64em) and (max-width: 74.99em) {
  .workflow__header_until-desktop-medium-shrink {
    padding: 0 15px;
  }
  .workflow__header_until-desktop-medium-shrink .workflow__header-nav-button, .workflow__header_until-desktop-medium-shrink .workflow__header-cancel {
    margin-left: 10px;
  }
}

.workflow__grey-header {
  height: 60px;
  background-color: #EAEAEA;
  box-sizing: border-box;
  padding: 18px;
  font-size: 18px;
  font-weight: 600;
}

.workflow__header-left {
  flex: 1;
  display: flex;
  height: 100%;
  align-items: center;
}

.workflow__header-right {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.workflow__header-nav {
  display: flex;
  align-items: center;
}

.workflow__header-nav-button {
  margin-left: 30px;
}

/**
 * Used to align the text on the same base-line.
 */
.workflow__header-text-container {
  display: flex;
  align-items: center;
}

.workflow__header-title {
  font-size: 18px;
  margin-right: 10px;
}

.workflow__header-save-info {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.workflow__header-undo-delete-container {
  margin-left: 15px;
}

.workflow__header-saved {
  display: flex;
  align-items: flex-end;
  margin-right: 10px;
  font-size: 14px;
}

.workflow__header-background-error {
  display: flex;
  align-items: flex-end;
  margin-right: 10px;
  font-size: 14px;
  color: var(--color-red);
}

.workflow__header-save-now {
  display: flex;
  align-items: flex-end;
  min-width: 60px;
}

.workflow__header-action {
  margin-left: 10px;
  width: 160px;
  flex-shrink: 0;
}

.workflow__header-save-exit {
  color: #034FA8;
}

.workflow__header-cancel {
  margin-left: 30px;
}

.workflow__screen-notice {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

/**
 * 1. Weird flex hack so the element doesn't grow in height to fit content
 * on tablet.
 *
 * 2. Weird flex hack so the element doesn't grow in width to fit content.
 */
.workflow__outlet-container {
  position: relative;
  flex: 1;
  background-color: #F8F8F8;
  min-height: 0; /* 1 */
  min-width: 0; /* 2 */
  /**
   * Account for two possible liquid-outlets
   */
}
.workflow__outlet-container > .liquid-container,
.workflow__outlet-container > .liquid-container > .liquid-child,
.workflow__outlet-container > .liquid-container > .liquid-child > .liquid-container,
.workflow__outlet-container > .liquid-container > .liquid-child > .liquid-container > .liquid-child {
  height: 100%;
}
.workflow__outlet-container_contains-x-page {
  background-color: var(--color-light-grey-8);
}

.workflow__content-container {
  overflow: auto;
  height: 100%;
}
.workflow__content-container_is-modal-like {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
  z-index: 2;
}
.workflow__content-container_background-color_lighter-grey {
  background-color: #F8F8F8;
}

.workflow__content {
  width: 100%;
  box-sizing: border-box;
}
.workflow__content_is-centered, .workflow__content_is-centered-large {
  padding: 25px 20px 0;
  margin: 0 auto 40px;
}
.workflow__content_is-centered {
  max-width: 814px;
}
.workflow__content_is-centered-large {
  max-width: 1100px;
}
.workflow__content_is-centered-large-only {
  max-width: 1100px;
  margin: auto;
}
.workflow__content_is-padded {
  padding: 25px 20px 0;
}
.workflow__content_margin-top_25 {
  margin-top: 25px;
}
.workflow__content_margin-bottom_40 {
  margin-bottom: 40px;
}
@media (max-width: 63.99em) {
  .workflow__content_no-padding-until-desktop {
    padding: 0;
  }
}

.workflow__section-header {
  display: flex;
  margin-bottom: 15px;
  margin-top: 10px;
  align-items: center;
}
@media (max-width: 47.99em) {
  .workflow__section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.workflow__section-title-container {
  display: flex;
  align-items: baseline;
}

.workflow__section-right {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}

.workflow__section-title {
  display: flex;
  font-size: 18px;
  font-weight: 500;
  align-items: center;
}
@media (max-width: 47.99em) {
  .workflow__section-title {
    margin-bottom: 10px;
  }
}
.workflow__section-title_font_large {
  font-size: 26px;
}
@media (max-width: 63.99em) {
  .workflow__section-title_font_large {
    font-size: 23px;
  }
}
.workflow__section-title_font-small {
  font-size: 16px;
  font-weight: bold;
}
.workflow__section-title_margin-right_20 {
  margin-right: 20px;
}

.workflow__section-title-icon {
  margin-left: 10px;
}

.workflow__section-description {
  font-size: 14px;
}
.workflow__section-description_margin-top_10 {
  margin-top: 10px;
}
.workflow__section-description_margin-bottom_15 {
  margin-bottom: 15px;
}

.workflow__section-contacts-conditions {
  padding: 15px 0;
  font-weight: 600;
  font-size: 14px;
}

.workflow__section-contacts-condition-item {
  padding-bottom: 5px;
}

.workflow__contact-section {
  margin-bottom: 40px;
  border: solid 1px #D2DFDF;
  padding: 20px 15px;
  background: #FFF;
}

.workflow__contact-section-delete-container {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 25px;
}

.workflow__header-checkbox {
  font-size: 14px;
}

.workflow__add-another {
  margin-bottom: 40px;
}

.workflow__flow-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.workflow__line-separator {
  border-top: 1px solid #5C5050;
  margin: 20px 0;
}
.workflow__line-separator_color_grey {
  border-top-color: #95989A;
}
.workflow__line-separator_margin-top_5 {
  margin-top: 5px;
}
.workflow__line-separator_vertical-margins_30 {
  margin: 30px 0;
}

.workflow__sub-section-title {
  margin-bottom: 10px;
}

.workflow__margin-bottom_25 {
  margin-bottom: 25px;
}

.workflow__scroll-to-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.95) 45%);
  transform: translateY(0);
}
.workflow__scroll-to-bottom:not(.workflow__scroll-to-bottom_is-hidden) {
  animation: g-slide-up 300ms ease;
}
.workflow__scroll-to-bottom_is-hidden {
  transition: transform 300ms ease;
  transform: translateY(100%);
}

.workflow__quote-name-date-container {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.workflow__quote-name {
  flex: 4;
}

.workflow__effective-date {
  flex: 1;
  justify-content: flex-end;
  display: flex;
}
.workflow__effective-date_justify-content_flex-start {
  justify-content: flex-start;
}

.workflow__step-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.workflow__step-buttons {
  width: 100%;
  height: 60px;
  padding: 0 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #E9F6F8;
  box-shadow: 0 4px 3px -4px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.workflow-checklist {
  padding-bottom: 30px;
}
.workflow-checklist_is-standalone {
  background-color: #F8F8F8;
  padding-bottom: 0;
}
.workflow-checklist_is-standalone .workflow-checklist__info {
  padding-bottom: 0;
}

.workflow-checklist__info {
  padding: 25px 20px 40px;
}

.workflow-checklist__title {
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 15px;
}

.workflow-checklist__list {
  list-style-type: none;
  padding: 15px 0;
  margin: 0;
}

.workflow-checklist__list-item {
  padding-bottom: 8px;
}

.workflow-checklist__note {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  padding: 15px;
  border: solid 1px #034FA8;
  background-color: #E6ECF4;
  border-radius: 4px;
}

.workflow-checklist__documents-empty-state {
  box-sizing: border-box;
  height: 215px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 115px;
  background: center 50px url("/assets/images/themes/blue/icons/documents.svg") no-repeat;
  background-size: 35px 40px;
  background-color: #FFFFFF;
  box-shadow: 0 1px 1px #B6B6B6;
}

.workflow-checklist__documents-empty-state-description {
  padding-bottom: 25px;
}

.workflow-checklist__upload-document-types {
  padding-left: 10px;
}

.workflow-checklist__upload-document-checkboxes {
  list-style-type: none;
  padding: 0;
  padding-top: 10px;
  margin: 0;
}

.workflow-checklist__upload-document-checkbox {
  padding-top: 8px;
}

.terminate-employer-workflow-details {
  display: block;
}

.terminate-employer-workflow-details__deposits-and-payments-question {
  margin-top: 47px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 600;
}

.terminate-employer-workflow-details__deposits-and-payments-text {
  margin-top: 14px;
}

.terminate-employer-workflow-details__fields {
  width: 600px;
}

.terminate-employer-workflow-details__error-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.workflow-summary {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #F8F8F8;
}
.workflow-summary_is-loading .workflow-summary__cell,
.workflow-summary .workflow-summary__section_is-loading .workflow-summary__cell {
  box-shadow: none;
}
.workflow-summary_is-loading .workflow-summary__header,
.workflow-summary .workflow-summary__section_is-loading .workflow-summary__header {
  border-bottom: solid thin #D2DFDF;
}
.workflow-summary_is-loading .workflow-summary__internal-section,
.workflow-summary .workflow-summary__section_is-loading .workflow-summary__internal-section {
  border: none;
}
.workflow-summary_is-borderless .workflow-summary__body {
  border: 1px solid #D2DFDF;
}
.workflow-summary_is-borderless .workflow-summary__cell {
  box-shadow: none;
}
.workflow-summary_background-color_grey {
  background-color: #F4F4F4;
}

.workflow-summary__content {
  width: 100%;
}
@media (min-width: 64em) {
  .workflow-summary__content {
    max-width: 820px;
  }
}
.workflow-summary__content_is-padded {
  padding-bottom: 25px;
}
@media (min-width: 20em) and (max-width: 63.99em) {
  .workflow-summary__content_is-padded {
    padding-top: 53px;
  }
}
@media (min-width: 64em) {
  .workflow-summary__content_is-padded {
    padding-top: 32px;
  }
}
.workflow-summary__content_is-fully-padded {
  box-sizing: border-box;
  padding: 23px 20px 32px 20px;
}
@media (min-width: 64em) {
  .workflow-summary__content_is-fully-padded {
    max-width: 860px;
  }
}
.workflow-summary__content_is-centered {
  margin: auto;
}

.workflow-summary__block:nth-child(n+2) {
  margin-top: 20px;
}

.workflow-summary__section_is-sub-section .workflow-summary__header {
  background: #F4F4F4;
}
.workflow-summary__section_is-sub-section .workflow-summary__header-action {
  font-size: 14px;
}
.workflow-summary__section_has-box-shadow {
  box-shadow: 0 2px 4px #DCDCDC;
}

.workflow-summary__header {
  height: 46px;
  background-color: #F4F4F4;
  border-top: solid thin #D2DFDF;
  border-left: solid thin #D2DFDF;
  border-right: solid thin #D2DFDF;
  padding: 0 22px 0 16px;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title  action";
}
.workflow-summary__header_is-main {
  background: #EAEAEA;
}
.workflow-summary__header_is-main .workflow-summary__title {
  font-weight: bold;
  font-size: 18px;
}
.workflow-summary__header_has-title-info {
  grid-template-columns: auto 10px 1fr auto;
  grid-template-areas: "title . info action";
}
@media (max-width: 47.99em) {
  .workflow-summary__header_has-title-info {
    height: 65px;
    grid-template-columns: 1fr auto;
    grid-template-areas: ".      ." "title  action" "info   info";
    grid-template-rows: 11px 27px 27px;
  }
}

.workflow-summary__header-action {
  font-size: 15px;
  display: flex;
  align-items: center;
  grid-area: action;
}

.workflow-summary__header-action-item {
  margin-left: 10px;
}

.workflow-summary__title {
  grid-area: title;
  font-size: 16px;
  color: #5C5050;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.workflow-summary__title_is-main {
  font-size: 18px;
  font-weight: bold;
}

.workflow-summary__title-info {
  grid-area: info;
  font-size: 13px;
  color: #858585;
  display: flex;
  align-items: center;
}

.workflow-summary__body {
  background: white;
}
.workflow-summary__body_is-bordered {
  box-shadow: 1px 0 0 0 #D2DFDF, 0 1px 0 0 #D2DFDF, 1px 1px 0 0 #D2DFDF, 1px 0 0 0 #D2DFDF inset, 0 1px 0 0 #D2DFDF inset;
}
.workflow-summary__body_is-highlighted {
  background-color: #FAF0EF;
}

.workflow-summary__cell {
  padding: 17px 20px;
  min-width: 0;
  /**
   * Use `box-shadow` instead of borders since we want the borders to
   * collapse into each other.
   */
  box-shadow: 1px 0 0 0 #D2DFDF, 0 1px 0 0 #D2DFDF, 1px 1px 0 0 #D2DFDF, 1px 0 0 0 #D2DFDF inset, 0 1px 0 0 #D2DFDF inset;
}
.workflow-summary__cell_no-border-bottom {
  box-shadow: 1px 0 0 0 #D2DFDF, 1px 0 0 0 #D2DFDF inset, 0 1px 0 0 #D2DFDF inset;
}
.workflow-summary__cell_no-border-top {
  box-shadow: 1px 0 0 0 #D2DFDF, 0 1px 0 0 #D2DFDF, 1px 1px 0 0 #D2DFDF, 1px 0 0 0 #D2DFDF inset;
}
.workflow-summary__cell_no-border-right {
  box-shadow: 0 1px 0 0 #D2DFDF, 1px 0 0 0 #D2DFDF inset, 0 1px 0 0 #D2DFDF inset;
}
.workflow-summary__cell_no-border-left {
  box-shadow: 1px 0 0 0 #D2DFDF, 0 1px 0 0 #D2DFDF, 1px 1px 0 0 #D2DFDF, 0 1px 0 0 #D2DFDF inset;
}
.workflow-summary__cell_is-highlighted {
  background-color: #FAF0EF;
}
.workflow-summary__cell_is-borderless {
  box-shadow: none;
}
.workflow-summary__cell_height_65 {
  box-sizing: border-box;
  height: 65px;
}

.workflow-summary__header-icon {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.workflow-summary__header-icon_type_medical {
  background-image: url("/assets/images/icons/coverage-types/medical.svg");
}
.workflow-summary__header-icon_type_vision {
  background-image: url("/assets/images/icons/coverage-types/vision.svg");
}
.workflow-summary__header-icon_type_dental {
  background-image: url("/assets/images/icons/coverage-types/dental.svg");
}

.workflow-summary__contribution-footnote {
  font-size: 16px;
  color: #9B9B9B;
  margin-top: 15px;
}
@media (max-width: 63.99em) {
  .workflow-summary__contribution-footnote_has-horizontal-padding-until-desktop {
    margin: 15px 15px 0;
  }
}

.workflow-summary__empty {
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: solid thin #D2DFDF;
  flex-direction: column;
}

.workflow-summary__empty-icon {
  width: 35px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin-bottom: 20px;
}
.workflow-summary__empty-icon_type_document {
  background-image: url("/assets/images/themes/blue/icons/documents.svg");
}

.workflow-summary__empty-text {
  color: #4A4A4A;
  font-size: 16px;
}

.workflow-summary__internal-section {
  border-top: solid 1px #9B9B9B;
}
.workflow-summary__internal-section:first-child {
  border: none;
}

.workflow-summary__effective-date-holder {
  display: flex;
  margin-left: 16px;
  margin-right: 18px;
}

.workflow-summary__effective-date-holder-left {
  flex: 1;
  font-weight: bold;
  font-size: 18px;
}

.x-banner {
  font-size: 14px;
  font-weight: 600;
  color: #676767;
  width: 100%;
  background-color: #F0DEDB;
  display: flex;
  padding: 10px 30px;
  box-sizing: border-box;
}

.x-banner__content {
  flex: 1;
  display: flex;
}
@media (max-width: 47.99em) {
  .x-banner__content {
    flex-direction: column;
  }
}

.x-banner__text {
  position: relative;
  padding-left: 20px;
}
.x-banner__text::before {
  top: 2px;
  left: 0;
  position: absolute;
  content: "";
  background: url("/assets/images/icons/x-thick.svg") center center no-repeat;
  width: 13px;
  height: 13px;
  background-size: 13px 13px;
}

.x-banner__left {
  display: flex;
  flex: 4;
}
@media (min-width: 48em) {
  .x-banner__left {
    align-items: center;
  }
}

@media (min-width: 48em) {
  .x-banner__right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
}
@media (max-width: 47.99em) {
  .x-banner__right {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
}

.x-banner_theme_blue-alert {
  padding: 10px 8px;
  background-color: #E6ECF4;
}
.x-banner_theme_blue-alert .x-banner__text {
  padding-left: 35px;
}
.x-banner_theme_blue-alert .x-banner__text::before {
  top: -3px;
  background-image: url("/assets/images/themes/blue/icons/bell.svg");
  background-size: 26px;
  width: 26px;
  height: 26px;
}

/**
 * Button when clicked opens a dropdown
 *
 * 1. Needs to be at least as wide as the drop down.
 *
 * @block x-dropdown
 */
.x-dropdown {
  position: relative;
  color: #5C5050;
  display: flex;
  align-items: center;
}

/**
 * @element trigger
 */
.x-dropdown__trigger {
  cursor: pointer;
  color: var(--main-color);
}
.x-dropdown__trigger:hover {
  color: var(--main-color-dark);
}
.x-dropdown__trigger:hover .x-dropdown__arrow.x-dropdown__arrow_dir_down {
  background: var(--svg-arrow-up-dark) center no-repeat;
}
.x-dropdown__trigger:active {
  color: var(--main-color);
}
.x-dropdown__trigger:focus {
  color: var(--main-color-dark);
}
.x-dropdown__trigger_is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}
.x-dropdown__trigger_is-loading {
  background-image: var(--button-loading-background-image);
  animation: button__loading-animation 20s cubic-bezier(0.1, 0.99, 0.1, 0.99) 1;
  animation-fill-mode: forwards;
  background-size: 200% 100%;
  cursor: default;
  pointer-events: none;
}

/**
 * @element arrow-parent
 */
.x-dropdown__arrow-parent {
  position: relative;
  font-size: 14px;
  font-weight: normal;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.x-dropdown__arrow-parent::first-letter {
  text-transform: uppercase;
}

/**
 * @element arrow
 */
.x-dropdown__arrow {
  width: 10px;
  height: 8px;
  margin-left: 10px;
  content: "";
  /**
   * @modifier dir
   * @value down
   * @for arrow
   */
  /**
   * @modifier dir
   * @value up
   * @for arrow
   */
}
.x-dropdown__arrow_dir_down {
  background: var(--svg-arrow-up) center no-repeat;
  transform: rotate(-180deg);
  transition: transform 300ms linear;
  /**
   * preloads image
   */
}
.x-dropdown__arrow_dir_down::after {
  content: "";
  background-image: var(--svg-arrow-up-dark);
}
.x-dropdown__arrow_dir_up {
  background: url("/assets/images/icons/arrow-up.svg") center no-repeat;
  animation: x-dropdown--arrow-rotate 300ms linear;
  transform: rotate(0);
}

/**
 * @modifier x-dropdown__is-menu-open
 */
.x-dropdown_is-menu-open {
  /**
   * @modifier dir
   * @value down
   * @for x-dropdown__arrow
   */
  /**
   * @modifier dir
   * @value up
   * @for x-dropdown__arrow
   */
}
.x-dropdown_is-menu-open .x-dropdown__arrow_dir_down {
  transform: rotate(0);
}
.x-dropdown_is-menu-open .x-dropdown__arrow_dir_up {
  transform: rotate(0);
}

/**
 * 1. In order to be above inner nav links
 * 2. The -1 is to take into account the borders.
 *
 * @element menu
 */
.x-dropdown__menu {
  box-sizing: border-box;
  position: absolute;
  width: calc(100% + 20px);
  top: -11px; /* 2 */
  left: -21px; /* 2 */
  z-index: 1; /* [1] */
  min-width: 180px;
  background-color: #FFF;
  border: 1px solid var(--main-color-light-4);
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  animation: x-dropdown--fade-in 200ms linear;
}
.x-dropdown__menu_is-extra-wide {
  width: calc(100% + 280px);
}
.x-dropdown__menu_is-wide {
  width: calc(100% + 80px);
}
.x-dropdown__menu_is-semi-wide {
  width: calc(100% + 40px);
}
.x-dropdown__menu_is-medium {
  width: calc(100% + 10px);
}
.x-dropdown__menu_z-index_2 {
  z-index: 2;
}
.x-dropdown__menu_z-index_4 {
  z-index: 4;
}
.x-dropdown__menu_top_25 {
  top: 25px;
}
.x-dropdown__menu_top_3 {
  top: 3px;
}
.x-dropdown__menu_left_negative-5 {
  left: -5px;
}
.x-dropdown__menu_top_35 {
  top: 35px;
}
.x-dropdown__menu_left_negative-125 {
  left: -125px;
}
.x-dropdown__menu_left_negative-55 {
  left: -55px;
}
.x-dropdown__menu_min-width_150 {
  min-width: 150px;
}

/**
 * @element menu-title
 */
.x-dropdown__menu-title {
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}
.x-dropdown__menu-title:hover {
  background-color: #EDEDED;
}
.x-dropdown__menu-title:active {
  background-color: #E2E0E0;
}

/**
 * @element body
 */
.x-dropdown__body {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  padding-top: 5px;
}
.x-dropdown__body_padding-top_10 {
  padding-top: 10px;
}

/**
 * @element link
 */
.x-dropdown__link {
  font-size: 13px;
  padding: 8px 0;
  padding-left: 20px;
  padding-right: 2px;
  text-transform: capitalize;
  font-weight: normal;
  cursor: pointer;
  /**
   * @modifier is-not-capitalized
   * @for link
   */
}
.x-dropdown__link:hover {
  background-color: #EDEDED;
}
.x-dropdown__link:active {
  background-color: #E2E0E0;
}
.x-dropdown__link_is-not-capitalized {
  text-transform: none;
}
.x-dropdown__link_color_main {
  color: var(--main-color);
}
.x-dropdown__link_font_weight_600 {
  font-weight: 600;
}
.x-dropdown__link_font-size_14 {
  font-size: 14px;
}
.x-dropdown__link_padding-right_20 {
  padding-right: 20px;
}
.x-dropdown__link_vertical-padding_5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.x-dropdown__link_text-align_left {
  text-align: left;
}
.x-dropdown__link_action_add {
  position: relative;
  padding-left: 30px;
}
.x-dropdown__link_action_add:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  height: 100%;
  width: 20px;
  background: var(--svg-plus) center center no-repeat;
  background-size: 7px 7px;
}

@keyframes x-dropdown--fade-in {
  0% {
    color: #FFF;
    opacity: 0;
  }
  100% {
    color: #000;
    opacity: 1;
  }
}
@keyframes x-dropdown--arrow-rotate {
  0% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(0);
  }
}
/**
 * This theme changes the link colors and arrow to the terminate color (ex: red).
 *
 * @modifier theme
 * @value terminate
 */
.x-dropdown_theme_terminate .x-dropdown__trigger {
  color: var(--color-red);
}
.x-dropdown_theme_terminate .x-dropdown__trigger:active {
  color: var(--color-red);
}
.x-dropdown_theme_terminate .x-dropdown__trigger:focus {
  color: var(--color-red-dark);
}
.x-dropdown_theme_terminate .x-dropdown__trigger:hover {
  color: var(--color-red-dark);
}
.x-dropdown_theme_terminate .x-dropdown__trigger:hover .x-dropdown__arrow.x-dropdown__arrow_dir_down {
  background: url("/assets/images/icons/arrow-up-dark-red.svg") center no-repeat;
}
.x-dropdown_theme_terminate .x-dropdown__arrow_dir_down {
  background: url("/assets/images/icons/arrow-up-red.svg") center no-repeat;
  /**
   * preloads image
   */
}
.x-dropdown_theme_terminate .x-dropdown__arrow_dir_down::after {
  content: "";
  background-image: url("/assets/images/icons/arrow-up-dark-red.svg");
}
.x-dropdown_theme_terminate .x-dropdown__link {
  color: var(--color-red);
}

/**
 * This modifier changes the dropdown trigger to a button.
 *
 * @modifier trigger-type
 * @value button
 */
.x-dropdown_trigger-type_button .x-dropdown__arrow-parent {
  font-weight: bold;
}
.x-dropdown_trigger-type_button .x-dropdown__menu {
  left: -1px;
  min-width: auto;
}
.x-dropdown_trigger-type_button .x-dropdown__menu-title {
  height: 35px;
  line-height: 35px;
}
.x-dropdown_trigger-type_button .x-dropdown__trigger {
  height: 35px;
  line-height: 35px;
  padding-left: 20px;
  padding-right: 20px;
  color: var(--x-dropdown-trigger-color);
  background-color: var(--x-dropdown-trigger-background-color);
  border: var(--x-dropdown-trigger-border);
  border-radius: 28px;
  box-sizing: border-box;
}
.x-dropdown_trigger-type_button .x-dropdown__trigger:hover {
  color: #FFF;
  background-color: var(--main-color-contrast);
}
.x-dropdown_trigger-type_button .x-dropdown__trigger:hover .x-dropdown__arrow.x-dropdown__arrow_dir_down {
  background: url("/assets/images/icons/arrow-up-white.svg") center no-repeat;
}
.x-dropdown_trigger-type_button .x-dropdown__trigger .x-dropdown__arrow_dir_down {
  background: var(--x-dropdown-trigger-arrow-dir-down-background-image) center no-repeat;
}
.x-dropdown_trigger-type_button:focus .x-dropdown__trigger {
  color: #FFF;
  background-color: var(--main-color-dark);
}

:root {
  --header-row-top: 0;
}

.x-page {
  height: 100%;
  background-color: var(--color-light-grey-8);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.x-page_type_workflow {
  position: absolute;
  width: 100%;
  top: 0;
}
.x-page_type_modal-workflow {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 12;
}
.x-page_type_workflow-step {
  background-color: #F8F8F8;
}
.x-page_type_table {
  background-color: #F8F8F8;
}
.x-page_type_no-scroll {
  overflow: visible;
  height: auto;
}
.x-page_overflow_visible {
  overflow: visible;
}
.x-page_overflow_hidden {
  overflow: hidden;
}

.x-page__row {
  display: flex;
  flex-shrink: 0;
  height: 50px;
}
.x-page__row_z-index_1 {
  z-index: 1;
}
.x-page__row_is-sticky {
  position: sticky;
  top: var(--header-row-top);
  z-index: 2;
}
.x-page__row_type_cool-filters {
  background-color: #EAEAEA;
  box-sizing: border-box;
  border-bottom: solid 1px var(--main-color-light-29);
  height: 60px;
}
.x-page__row_type_title {
  height: 65px;
  background-color: #FFF;
  padding: 0 22px;
}
.x-page__row_height_40 {
  height: 40px;
}
.x-page__row_height_45 {
  height: 45px;
}
.x-page__row_height_50 {
  height: 50px !important;
}
.x-page__row_min-height_55 {
  min-height: 55px;
}
.x-page__row_height_auto {
  height: auto;
}
.x-page__row_height_60 {
  height: 60px;
}
.x-page__row_type_header {
  height: 50px;
  background-color: var(--main-color-dark-8);
  padding: 0 22px;
}
.x-page__row_type_menu-links {
  height: 62px;
  background: #F9F9F9;
  border-top: solid 1px var(--main-color-light-29);
  padding-left: 22px;
}
@media (max-width: 47.99em) {
  .x-page__row_type_menu-links {
    padding-left: 12px;
  }
}
.x-page__row_type_inner-links {
  display: flex;
  align-items: center;
}
.x-page__row_type_filters {
  background-color: #EAEAEA;
  z-index: 1;
  justify-content: flex-end;
}
@media (max-width: 63.99em) {
  .x-page__row_type_filters {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
  }
}
.x-page__row_type_table-refresh {
  padding-left: 22px;
}
.x-page__row_type_status-description {
  flex-shrink: 0;
  height: 35px;
  display: flex;
  align-items: center;
  color: #FFF;
  font-size: 12px;
  background-color: #B0A7A8;
  padding: 0 14px;
}
.x-page__row_type_grey-bar {
  background-color: #EAEAEA;
  height: 60px;
  padding: 0 22px;
}
.x-page__row_type_form-header {
  height: 50px;
  background-color: var(--main-color-light-32);
  padding: 0 20px;
}
.x-page__row_background_grey {
  background-color: #EAEAEA;
}
.x-page__row_has-side-paddings {
  padding: 0 22px;
}
.x-page__row_type_go-green {
  display: flex;
  align-items: center;
  background-color: #EFEFEF;
  padding: 0 22px;
  height: 60px;
}
.x-page__row_type_reports-refresh-bar {
  height: 40px;
  padding: 0 36px 0 0;
  background-color: #F4F4F4;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}
.x-page__row_has-box-shadow {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
.x-page__row_has-light-box-shadow {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.03);
}
@media (max-width: 81.24em) {
  .x-page__row_has-box-shadow-until-1300 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
  }
}
.x-page__row_has-bottom-border {
  border-bottom: solid 1px var(--main-color-light-29);
}
.x-page__row_has-light-grey-bottom-border {
  border-bottom: solid 1px #EAEAEA;
}
@media (min-width: 64em) {
  .x-page__row_from-desktop-has-top-border {
    border-top: solid 1px var(--main-color-light-29);
  }
}
.x-page__row_type_bottom-actions {
  height: auto;
  border-top: solid thin var(--main-color-light-7);
}
.x-page__row_type_checkbox-and-list-title {
  height: 65px;
  background-color: #FFF;
  padding: 0 22px 0 20px;
  border-bottom: solid 1px var(--main-color-light-29);
}
@media (min-width: 48em) {
  .x-page__row_type_checkbox-and-list-title {
    padding: 0 35px;
  }
}
.x-page__row_padding-right_0 {
  padding-right: 0;
}
.x-page__row_padding-right_20 {
  padding-right: 20px;
}
.x-page__row_padding-left_0 {
  padding-left: 0;
}
.x-page__row_padding-left_20 {
  padding-left: 20px;
}
.x-page__row_padding-left_30 {
  padding-left: 30px;
}
.x-page__row_padding_0 {
  padding: 0;
}
.x-page__row_vertical-padding_20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.x-page__row_padding-top_20 {
  padding-top: 20px;
}
@media (min-width: 64em) {
  .x-page__row_desktop-padding-left_0 {
    padding-left: 0;
  }
}
.x-page__row_type_table-empty-header {
  height: 28px;
}
.x-page__row_has-padding-left {
  padding-left: 22px;
}
@media (max-width: 47.99em) {
  .x-page__row_has-padding-left {
    padding-left: 12px;
  }
}
.x-page__row_position_sticky {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
}
.x-page__row_z-index_2 {
  z-index: 2;
}
.x-page__row_border-top_none {
  border-top: none;
}
.x-page__row_background-color_light-grey {
  background-color: #F8F8F8;
}
.x-page__row_type_workflow-header {
  height: 70px;
  background-color: #FFF;
  padding: 15px 20px;
  box-sizing: border-box;
}
@media (max-width: 63.99em) {
  .x-page__row_type_workflow-header {
    border-bottom: 1px solid #DADADA;
  }
}
.x-page__row_type_workflow-info-bar {
  height: 70px;
  background-color: #F8F8F8;
  padding: 15px 20px;
  box-sizing: border-box;
}
@media (max-width: 63.99em) {
  .x-page__row_type_workflow-info-bar {
    border-bottom: 1px solid #DADADA;
  }
}
.x-page__row_type_subheader {
  height: auto;
  background-color: #F8F8F8;
  padding: 15px 20px;
  box-sizing: border-box;
}
.x-page__row_justify-content_flex-end {
  justify-content: flex-end;
}
.x-page__row_align-items_center {
  align-items: center;
}
.x-page__row_background-color_white {
  background-color: #FFF;
}
.x-page__row_background-color_green {
  background-color: var(--main-color-light-11);
}
.x-page__row_direction_column {
  flex-direction: column;
}
.x-page__row_border-top_light-grey {
  border-top: solid thin #F8F8F8;
}
.x-page__row_margin-top_5 {
  margin-top: 5px;
}
.x-page__row_overflow-x_scroll {
  overflow-x: scroll;
}
.x-page__row_scrollbar_hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.x-page__row_scrollbar_hidden::-webkit-scrollbar {
  display: none;
}
.x-page__row_border-bottom_none {
  border-bottom: none;
}
@supports not (zoom: 1) {
  .x-page__row_is-preview {
    height: 37.5px !important;
  }
}

.x-page__row-left-split {
  flex: 1;
  display: flex;
}
.x-page__row-left-split_justify-content_space-around {
  justify-content: space-around;
}
.x-page__row-left-split_justify-content_flex-end {
  justify-content: flex-end;
}
.x-page__row-left-split_margin-right_20 {
  margin-right: 20px;
}
.x-page__row-left-split_justify-content_space-between {
  justify-content: space-between;
}
.x-page__row-left-split_flex_1-5 {
  flex: 1.5;
}
.x-page__row-left-split_flex_2 {
  flex: 2;
}
.x-page__row-left-split_padding-left_20 {
  padding-left: 20px;
}
.x-page__row-left-split_align-items_center {
  align-items: center;
}
.x-page__row-left-split_align-items_baseline {
  align-items: baseline;
}
.x-page__row-left-split_padding-bottom_10 {
  padding-bottom: 10px;
}
.x-page__row-left-split_flex_0 {
  flex: 0;
}
.x-page__row-left-split_overflow-x_clip {
  overflow-x: clip;
}

.x-page__menu-links {
  display: flex;
  background: #F9F9F9;
  height: 62px;
}
@media (min-width: 48em) {
  .x-page__menu-links {
    padding: 0 30px;
  }
}
@media (min-width: 64em) {
  .x-page__menu-links {
    display: none;
  }
}

.x-page__scrollable {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
@media (min-width: 48em) {
  .x-page__scrollable_type_table {
    overflow-y: auto;
  }
}
.x-page__scrollable_type_auto {
  overflow-y: auto;
}

.x-page__row-item {
  box-sizing: border-box;
  height: 100%;
}
.x-page__row-item_vertical-padding_20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.x-page__row-item_type_row-action {
  margin-left: 20px;
  display: flex;
  align-items: center;
}
.x-page__row-item_type_subtitle {
  font-size: 12px;
  display: flex;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
}
.x-page__row-item_type_subheader {
  font-size: 18px;
  display: flex;
  align-items: center;
}
.x-page__row-item_type_header {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #FFF;
}
.x-page__row-item_type_header::before {
  content: "";
  width: 11px;
  height: 10px;
  background: var(--svg-trust) center no-repeat;
  margin-right: 5px;
  flex-shrink: 0;
}
.x-page__row-item_type_title {
  font-size: 20px;
  display: flex;
  align-items: center;
}
.x-page__row-item_type_filter {
  width: 85px;
}
.x-page__row-item_type_filter:hover:not(.x-page__row-item_disabled-hover) {
  background-color: #D7D7D7;
}
@media (max-width: 47.99em) {
  .x-page__row-item_type_filter {
    width: 55px;
  }
}
@media (max-width: 47.99em) {
  .x-page__row-item_filter-mobile-width_60 {
    width: 60px;
  }
}
.x-page__row-item_type_search {
  width: 290px;
  background-color: #FFF;
  border-top: solid thin #EAEAEA;
}
@media (max-width: 47.99em) {
  .x-page__row-item_mobile-width_full {
    width: 100%;
  }
}
@media (max-width: 47.99em) {
  .x-page__row-item_mobile-margin-left_10 {
    margin-left: 10px;
  }
}
.x-page__row-item_type_sort {
  background-color: #F3F3F3;
  flex: 1;
}
@media (min-width: 48em) {
  .x-page__row-item_type_sort {
    max-width: 350px;
  }
}
.x-page__row-item_type_cool-sort {
  width: 88px;
}
.x-page__row-item_type_cool-sort:hover {
  background-color: #D7D7D7;
}
.x-page__row-item_type_animated-search {
  width: 68px;
}
.x-page__row-item_type_back-button, .x-page__row-item_type_termination-control {
  display: flex;
  align-items: center;
}
.x-page__row-item_type_inner-links {
  display: flex;
  align-items: center;
}
.x-page__row-item_type_inner-links:first-child {
  padding-left: 22px;
}
.x-page__row-item_type_dots-menu {
  width: 40px;
  height: 52px;
  margin: auto 0 auto 20px;
}
.x-page__row-item_type_go-green-button {
  margin-right: 22px;
  height: auto;
}
.x-page__row-item_type_go-green-text {
  flex: 1;
  color: var(--main-color);
  font-size: 16px;
  display: flex;
  align-items: center;
}
.x-page__row-item_type_banner {
  display: flex;
  align-items: center;
}
.x-page__row-item_type_banner::before {
  content: "";
  width: 16px;
  height: 14px;
  background: var(--svg-pointer-right) center no-repeat;
  margin-right: 8px;
  flex-shrink: 0;
}
.x-page__row-item_type_alerts-refresh {
  margin-right: 35px;
}
@media (max-width: 81.24em) {
  .x-page__row-item_type_alerts-refresh {
    margin-right: 14px;
  }
}
.x-page__row-item_is-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
}
.x-page__row-item_border-top_none {
  border-top: none;
}
.x-page__row-item_has-border-bottom {
  border-bottom: solid thin #EAEAEA;
}
.x-page__row-item_margin-right_5 {
  margin-right: 5px;
}
.x-page__row-item_margin-right_10 {
  margin-right: 10px;
}
.x-page__row-item_margin-right_20 {
  margin-right: 20px;
}
.x-page__row-item_margin-right_40 {
  margin-right: 40px;
}
.x-page__row-item_margin-right_60 {
  margin-right: 60px;
}
.x-page__row-item_margin-left_22 {
  margin-left: 22px;
}
.x-page__row-item_margin-left_10 {
  margin-left: 10px;
}
.x-page__row-item_margin-left_0 {
  margin-left: 0;
}
.x-page__row-item_padding-left_0 {
  padding-left: 0;
}
.x-page__row-item_padding-left_11 {
  padding-left: 11px;
}
.x-page__row-item_flex-shrink_0 {
  flex-shrink: 0;
}
@media (min-width: 64em) {
  .x-page__row-item_desktop-padding-left_0 {
    padding-left: 0;
  }
  .x-page__row-item_desktop-padding-left_0:first-child {
    padding-left: 0;
  }
}
@media (max-width: 47.99em) {
  .x-page__row-item_mobile-padding-left_0 {
    padding-left: 0;
  }
  .x-page__row-item_mobile-padding-left_0:first-child {
    padding-left: 0;
  }
}
.x-page__row-item_align-items_center {
  display: flex;
  align-items: center;
}
.x-page__row-item_direction_column {
  display: flex;
  flex-direction: column;
}
.x-page__row-item_justify-content_center {
  display: flex;
  justify-content: center;
}
.x-page__row-item_justify-content_flex-end {
  display: flex;
  justify-content: flex-end;
}
.x-page__row-item_align-items_flex-start {
  display: flex;
  align-items: flex-start;
}
.x-page__row-item_align-items_flex-end {
  display: flex;
  align-items: flex-end;
}
.x-page__row-item_height_auto {
  height: auto;
}
@media (max-width: 47.99em) {
  .x-page__row-item_until-tablet-font_16 {
    font-size: 16px;
  }
}
@media (min-width: 64em) {
  .x-page__row-item_has-border-bottom-desktop {
    border-bottom: solid thin #EAEAEA;
  }
}
.x-page__row-item_font-size_14 {
  font-size: 14px;
}
.x-page__row-item_font-size_16 {
  font-size: 16px;
}
.x-page__row-item_font-size_18 {
  font-size: 18px;
}
.x-page__row-item_padding-top_5 {
  padding-top: 5px;
}
.x-page__row-item_font-weight_semi-bold {
  font-weight: 600;
}
.x-page__row-item_font-weight_bold {
  font-weight: bold;
}
.x-page__row-item_display_flex {
  display: flex;
}
.x-page__row-item_full-width {
  width: 100%;
}
@media (min-width: 81.25em) {
  .x-page__row-item_width-from-desktop-plus_50p {
    width: 50%;
  }
}
.x-page__row-item_flex_1 {
  flex: 1;
}
.x-page__row-item_gap_5 {
  gap: 5px;
}
.x-page__row-item_gap_10 {
  gap: 10px;
}
.x-page__row-item_padding-bottom_10 {
  padding-bottom: 10px;
}
.x-page__row-item_padding-bottom_20 {
  padding-bottom: 20px;
}
.x-page__row-item_padding-top_20 {
  padding-top: 20px;
}
.x-page__row-item_padding-horizontal_10 {
  padding: 0 10px;
}
.x-page__row-item_max-width_85 {
  max-width: 85px;
}
.x-page__row-item_width_94 {
  width: 94px;
}
.x-page__row-item_width_130 {
  width: 130px;
}
.x-page__row-item_width_213 {
  width: 213px;
}
.x-page__row-item_width_250 {
  width: 250px;
}
.x-page__row-item_width_255 {
  width: 255px;
}
.x-page__row-item_background-color_white {
  background-color: #FFF;
}

.x-page__content {
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  flex: 1;
}
.x-page__content_background-color_darker-grey {
  background-color: #F8F8F8;
}
@media (max-width: 47.99em) {
  .x-page__content {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }
}
.x-page__content_type_centered {
  margin: 0 auto 50px auto;
  max-width: 1020px;
  min-height: auto;
  flex: initial;
}
@media (min-width: 48em) {
  .x-page__content_type_centered {
    width: 100%;
    padding: 0 35px;
    margin-top: 35px;
  }
}
@media (max-width: 47.99em) {
  .x-page__content_type_centered {
    width: 100%;
    flex: 1;
  }
}
.x-page__content_type_centered-with-mobile {
  margin: 35px auto 50px auto;
  max-width: 1020px;
  min-height: auto;
  flex: initial;
  width: 100%;
  padding: 0 35px;
}
@media (max-width: 47.99em) {
  .x-page__content_type_centered-with-mobile {
    flex: 1;
  }
}
.x-page__content_width_wide {
  max-width: 1135px;
}
.x-page__content_type_cool-table {
  display: flex;
  flex-direction: column;
}
.x-page__content_type_details {
  margin: 0 0 50px 0;
  padding: 0;
  flex: initial;
  min-height: auto;
}
.x-page__content_type_print-enrollment {
  overflow: auto;
  min-height: auto;
}
@media (min-width: 48em) {
  .x-page__content_type_print-enrollment {
    padding: 0;
  }
}
.x-page__content_overflow_hidden {
  overflow: hidden;
}
.x-page__content_type_dashboard {
  max-width: 1190px;
  box-sizing: border-box;
  margin: 20px auto;
  padding: 0 20px;
  flex: initial;
}
@media (max-width: 47.99em) {
  .x-page__content_type_dashboard {
    margin-top: 20px;
    padding: 0;
  }
}
@media (max-width: 47.99em) {
  .x-page__content_until-tablet-padding_0 {
    padding: 0;
  }
}
@media (min-width: 48em) {
  .x-page__content_from-tablet-margin-top_5 {
    margin-top: 5px;
  }
}
.x-page__content_min-height_0 {
  min-height: 0;
}
.x-page__content_max-width_none {
  max-width: none;
}
.x-page__content_overflow_auto {
  overflow: auto;
}
.x-page__content_margin-top_0 {
  margin-top: 0;
}
.x-page__content_margin-top_16 {
  margin-top: 16px;
}
.x-page__content_margin-top_25 {
  margin-top: 25px;
}
.x-page__content_margin-bottom_0 {
  margin-bottom: 0;
}
.x-page__content_margin-bottom_20 {
  margin-bottom: 20px;
}
.x-page__content_z-index_0 {
  z-index: 0;
  position: relative;
}
.x-page__content_is-wide {
  max-width: 1200px;
}
.x-page__content_type_quoting-settings {
  margin: 0 auto 50px auto;
  max-width: 1148px;
  min-height: auto;
  flex: initial;
}
@media (min-width: 64em) {
  .x-page__content_type_quoting-settings {
    padding: 0 20px;
  }
}
@media (max-width: 47.99em) {
  .x-page__content_type_quoting-settings {
    margin-bottom: 20px;
  }
}
.x-page__content_has-border-bottom {
  border-bottom: solid 1px #DADADA;
}
.x-page__content_type_two-table-page {
  overflow: auto;
  max-height: calc(100vh - 60px);
}
.x-page__content_padding_20 {
  padding: 20px;
}

.x-permission {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.x-permission_type_private::before {
  content: "";
  width: 7px;
  height: 10px;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  margin-right: 5px;
  background-image: url("/assets/images/icons/lock.svg");
}
.x-permission_size_16 {
  font-size: 16px;
}
.x-permission_size_16.x-permission_type_private::before {
  width: 8px;
  height: 11px;
}

/**
 * Used to hold all popups. Part of the popup service api.
 * The position of the popup is adjusted using inline styles.
 *
 * @block popup
 */
.popup {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  animation: g-fade-in 300ms ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
}

.popup__content {
  overflow-y: auto;
}

.popup_is-smart-input {
  animation: g-fade-in 100ms ease;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.popup_is-smart-input-flipped {
  animation: g-fade-in 100ms ease;
  box-shadow: none;
}

.x-priority {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.x-priority::before {
  content: "";
  width: 7px;
  height: 9px;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  margin-right: 5px;
}
.x-priority_type_5 {
  color: #C80808;
}
.x-priority_type_5::before {
  background-image: url("/assets/images/icons/priority/highest.svg");
}
.x-priority_type_4 {
  color: #C80808;
}
.x-priority_type_4::before {
  background-image: url("/assets/images/icons/priority/high.svg");
}
.x-priority_type_3 {
  color: #8E14BB;
}
.x-priority_type_3::before {
  width: 8px;
  height: 10px;
  background-image: url("/assets/images/icons/priority/medium.svg");
}
.x-priority_type_2 {
  color: #3D96DF;
}
.x-priority_type_2::before {
  background-image: url("/assets/images/icons/priority/low.svg");
}
.x-priority_type_1 {
  color: #3D96DF;
}
.x-priority_type_1::before {
  background-image: url("/assets/images/icons/priority/lowest.svg");
}

/**
 * A text surrounded by a colored block.
 *
 * 1. Sum of the horizontal padding of the inner text for text to wrap to the
 * next line if the text padding can't fit within the width;
 */
.x-type {
  position: relative;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: normal;
  line-height: 18px;
}
.x-type_color_green .x-type__text {
  background-color: #2DBB5D;
}
.x-type_color_orange .x-type__text {
  background-color: #F4A50D;
}
.x-type_color_yellow-orange .x-type__text {
  background-color: #F8CB01;
}
.x-type_color_inverted-orange .x-type__text {
  border: solid thin #F4A50D;
  color: #F4A50D;
}
.x-type_color_red .x-type__text {
  background-color: #D0021B;
}
.x-type_color_inverted-red .x-type__text {
  border: solid thin #D0021B;
  color: #D0021B;
}
.x-type_color_red-1 .x-type__text {
  background-color: var(--color-red-2);
}
.x-type_color_yellow .x-type__text {
  background-color: #FFD800;
}
.x-type_color_blue .x-type__text {
  background-color: #034FA8;
}
.x-type_color_purple .x-type__text {
  background-color: #6650A0;
}
.x-type_color_dark-purple .x-type__text {
  border: solid thin #7D7086;
  color: #7D7086;
}
.x-type_color_grey .x-type__text {
  background-color: #9B9B9B;
}
.x-type_color_yellow2 .x-type__text {
  background-color: #E4D627;
}
.x-type_color_sushi .x-type__text {
  background-color: #83C244;
}
.x-type_color_mint-green .x-type__text {
  background-color: #0DA7AA;
}
.x-type_color_teal .x-type__text {
  background-color: #1297AC;
}
.x-type_color_inverted-sushi .x-type__text {
  border: solid thin #83C244;
  color: #83C244;
}
.x-type_color_inverted-teal .x-type__text {
  border: solid thin #1397AC;
  color: #1397AC;
}
.x-type_color_light-sea-green .x-type__text {
  background-color: #26B5B4;
}
.x-type_color_inverted-blue .x-type__text {
  border: solid thin #034FA8;
  color: #034FA8;
}
.x-type_color_inverted-grey .x-type__text {
  border: solid thin #9C9C9C;
  color: #9C9C9C;
}
.x-type_color_spanish-grey .x-type__text {
  background-color: #95989A;
}
.x-type_color_inverted-cyan .x-type__text {
  border: solid thin #26B5B4;
  color: #26B5B4;
}
.x-type_color_transparent .x-type__text {
  color: #000;
}
.x-type_line-height_20 {
  line-height: 20px;
}
.x-type_line-height_normal {
  line-height: normal;
}
.x-type_margin-right_5 {
  margin-right: 5px;
}
.x-type_margin-right_0 {
  margin-right: 0;
}
.x-type_margin-bottom_5 {
  margin-bottom: 5px;
}
.x-type_margin-bottom_0 {
  margin-bottom: 0;
}
.x-type_margin-left_5 {
  margin-left: 5px;
}
.x-type_font-size_11 {
  font-size: 11px;
}
.x-type_color_white {
  color: #FFF;
}

.x-type__text {
  color: #FFF;
  font-family: "Montserrat", sans-serif;
  padding: 1px 3px;
  border-radius: 2px;
  border-width: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.x-type__text_vertical-padding_0 {
  padding-top: 0;
  padding-bottom: 0;
}
.x-type__text_is-centered {
  display: flex;
  align-items: center;
}

.x-type__count {
  font-size: 11px;
  color: #5C5050;
  width: 35px;
  padding-left: 5px;
}

.invoice-card {
  height: 65px;
  padding: 10px 13px;
  border-bottom: 1px solid #CBDBDB;
}
.invoice-card:hover {
  background-color: #F2F6F7;
}
.invoice-card:nth-child(3n) {
  border-bottom: none;
}

.invoice-card__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.invoice-card__row_margin-bottom_10 {
  margin-bottom: 10px;
}

.invoice-card__title {
  color: #494949;
  font-weight: 700;
  font-size: 14px;
}

.employee-class-table {
  display: block;
}
.employee-class-table_has-border-bottom {
  border-bottom: solid 1px var(--color-light-blue);
}

.employee-class-table__section:not(:last-child) {
  border-bottom: 1px solid var(--color-light-blue);
}

.benefits-details {
  background-color: #FFF;
  border: solid 1px #C7D7D7;
  border-bottom: 0;
}
.benefits-details_has-border-bottom {
  border-bottom: solid 1px #C7D7D7;
}
@media (max-width: 81.24em) {
  .benefits-details {
    border-right: none;
    border-left: none;
  }
}

.benefits-details__header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 52px;
}

.benefits-details__header-left {
  flex: 1;
}

.benefits-details__header-right {
  display: flex;
  justify-content: flex-end;
}

.benefits-details__title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}
.benefits-details__title:before {
  content: "";
  width: 12px;
  height: 16px;
  margin-right: 10px;
  background: url("/assets/images/icons/benefits.svg") center no-repeat;
}

.benefits-details__sub-header {
  height: 60px;
  background-color: #EAEAEA;
  display: flex;
  border: 1px solid #C7D7D7;
  border-width: 1px 0;
}
.benefits-details__sub-header_no-top-border {
  border-top: 0;
}

.benefits-details__sub-header-left {
  display: flex;
}

.benefits-details__sub-header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.benefits-details__sub-header-sort {
  width: 260px;
  background-color: #F3F3F3;
}
@media (max-width: 47.99em) {
  .benefits-details__sub-header-sort {
    width: 230px;
  }
}

.benefits-details__sub-header-filter {
  min-width: 80px;
  margin: 0 10px;
}

.benefits-details__show-terminated-benefits {
  padding: 0 10px;
}

.benefits-details__subsection {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 60px;
}

.field-warning {
  display: flex;
  align-items: center;
  min-height: 20px;
  padding: 5px;
  background-color: #FDF7E3;
  font-size: 13px;
  color: #301106;
  box-sizing: border-box;
}
.field-warning:before {
  content: "";
  min-width: 14px;
  height: 14px;
  background: url("/assets/images/icons/field-warning.svg") center center no-repeat;
  background-size: 14px 14px;
  margin-right: 4px;
}
.field-warning_border-bottom_light-grey {
  border-bottom: 1px solid #EAEAEA;
}
.field-warning_has-sign-margins:before {
  margin-left: 7px;
  margin-right: 13px;
}

.request-error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  font-size: 14px;
  gap: 25px;
  align-items: center;
  height: 350px;
  width: 100%;
  padding: 50px;
}
.request-error_height_large {
  height: calc(60vh + 100px);
}
.request-error_height_auto {
  height: auto;
}
.request-error_height_500 {
  height: 500px;
}
.request-error_has-borders {
  border-bottom: 1px solid #C7D7D7;
  border-top: 1px solid #C7D7D7;
}
.request-error_background-color_white {
  background-color: #FFF;
}
.request-error_border-top_none {
  border-top: none;
}
.request-error_border-bottom_none {
  border-bottom: none;
}
.request-error_min-height_296 {
  min-height: 296px;
}
@media (max-width: 47.99em) {
  .request-error_has-borders-mobile {
    border: 1px solid #C7D7D7;
  }
}

.request-error__icon {
  width: 116px;
  height: 40px;
  background-image: url("/assets/images/icons/disconnected.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.request-error__text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}

.request-error__title {
  font-size: 25px;
  color: var(--color-red);
  margin-bottom: 10px;
}

.request-error__description {
  color: #5E5E5E;
  font-size: 16px;
  line-height: 24px;
  max-width: 500px;
}
@media (max-width: 47.99em) {
  .request-error__description {
    max-width: 340px;
  }
}

.grey-tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.grey-tag-container__grey-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  background-color: #EAEAEA;
  color: #535353;
  padding: 2px 6px 2px;
  font-size: 14px;
}

.grey-tag-container__edit-icon {
  width: 12px;
  height: 12px;
  margin-left: 10px;
  background: url("/assets/images/icons/pencil.svg") center no-repeat;
  background-size: 12px 12px;
  flex-shrink: 0;
}
.grey-tag-container__edit-icon:hover {
  cursor: pointer;
  width: 15px;
  height: 15px;
  background-size: 15px 15px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 5px;
}
@media screen and (max-width: 1300px) {
  .tags-container {
    padding-top: 5px;
  }
}
.tags-container_padding-top_0 {
  padding-top: 0;
}

.tags-smart-input-option {
  height: 30px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  background-color: #FFF;
}
.tags-smart-input-option:not(.tags-smart-input-option_is-loading) {
  cursor: pointer;
}
.tags-smart-input-option:not(.tags-smart-input-option_is-loading):hover {
  background-color: rgba(19, 151, 172, 0.07);
}

.coverage-type-nav {
  display: flex;
}

.coverage-type-nav__window {
  width: 600px;
  overflow: hidden;
  height: 100%;
  margin-left: 5px;
  margin-right: 5px;
}
.coverage-type-nav__window_margin-left_15 {
  margin-left: 15px;
}
@media (max-width: 63.99em) {
  .coverage-type-nav__window {
    width: 360px;
  }
}
@media (max-width: 47.99em) {
  .coverage-type-nav__window {
    width: 240px;
  }
}

.coverage-type-nav__content {
  display: flex;
  height: 100%;
  transition: transform 400ms ease;
}

.coverage-type-nav__card {
  width: 120px;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  border-bottom: 3px solid transparent;
  text-align: center;
  padding: 0 5px;
  transition: all 300ms ease;
}
.coverage-type-nav__card:hover {
  background-color: #D7D7D7;
}
.coverage-type-nav__card_is-active {
  border-color: var(--main-color);
}

.coverage-type-nav__arrow {
  width: 30px;
  height: 100%;
  background-size: 8px 12px;
  background-repeat: no-repeat;
  /**
   * @modifier type
   * @value next
   */
  /**
   * @modifier type
   * @value back
   */
  /**
   * @modifier is-disabled
   */
}
.coverage-type-nav__arrow_type_next {
  background-position: 30% center;
  background-image: url("/assets/images/icons/right-arrow.svg");
  /**
   * preload so it does not glitch
   */
}
.coverage-type-nav__arrow_type_next:hover {
  background-image: var(--svg-right-arrow-dark);
}
.coverage-type-nav__arrow_type_next::after {
  content: "";
  background-image: var(--svg-right-arrow-dark);
}
.coverage-type-nav__arrow_type_back {
  background-position: 80% center;
  background-image: url("/assets/images/icons/left-arrow.svg");
  /**
   * preload so it does not glitch
   */
}
.coverage-type-nav__arrow_type_back:hover {
  background-image: var(--svg-left-arrow-thin);
}
.coverage-type-nav__arrow_type_back::after {
  content: "";
  background-image: var(--svg-left-arrow-thin);
}
.coverage-type-nav__arrow_is-disabled {
  opacity: 0.5;
  cursor: default;
}
.coverage-type-nav__arrow_is-disabled.coverage-type-nav__arrow_type_next:hover {
  background-image: url("/assets/images/icons/right-arrow.svg");
}
.coverage-type-nav__arrow_is-disabled.coverage-type-nav__arrow_type_back:hover {
  background-image: url("/assets/images/icons/left-arrow.svg");
}

.workflow-section {
  margin-bottom: 35px;
}
.workflow-section:last-child {
  margin-bottom: 0;
}
.workflow-section_margin-bottom_20 {
  margin-bottom: 20px;
}

.workflow-section__header {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 15px;
}

.workflow-section__header-icon {
  display: flex;
  align-items: center;
}
.workflow-section__header-icon_type_house:before {
  content: "";
  height: 16px;
  width: 14px;
  background: url("/assets/images/icons/house.svg") center no-repeat;
  background-size: 16px 14px;
}
.workflow-section__header-icon_type_contact:before {
  content: "";
  height: 16px;
  width: 14px;
  background: url("/assets/images/icons/contact.svg") center no-repeat;
  background-size: 16px 14px;
}
.workflow-section__header-icon_type_employment:before {
  content: "";
  height: 16px;
  width: 14px;
  background: url("/assets/images/icons/employment.svg") center no-repeat;
  background-size: 16px 14px;
}
.workflow-section__header-icon_type_dependent:before {
  content: "";
  height: 15px;
  width: 15px;
  background: url("/assets/images/icons/dependents.svg") center no-repeat;
  background-size: 15px 15px;
}
.workflow-section__header-icon_type_beneficiary:before {
  content: "";
  height: 15px;
  width: 15px;
  background: url("/assets/images/icons/beneficiaries.svg") center no-repeat;
  background-size: 15px 15px;
}

.workflow-section__header-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.workflow-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
}

.workflow-empty-state__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.workflow-empty-state__icon {
  height: 60px;
  width: 60px;
  background: top center no-repeat;
  background-size: 60px 60px;
}
.workflow-empty-state__icon_type_dependent {
  background-image: url("/assets/images/icons/dependents.svg");
}
.workflow-empty-state__icon_type_beneficiary {
  background-image: url("/assets/images/icons/beneficiaries.svg");
}

.workflow-empty-state__title {
  font-size: 26px;
  color: #1297AC;
  text-align: center;
}

.workflow-empty-state__description {
  font-size: 14px;
  text-align: center;
  max-width: 500px;
}

.workflow-empty-state__actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.summary {
  display: block;
  width: 100%;
  animation: summary__entrance 500ms ease;
}

@media (max-width: 63.99em) {
  .summary__fields {
    margin: 20px 25px;
  }
}
@media (max-width: 47.99em) {
  .summary__fields {
    margin: 10px;
  }
}

.summary__block {
  margin-top: 20px;
  font-size: 14px;
}
.summary__block_has-white-background {
  background-color: #FFF;
}
.summary__block_border_light-blue {
  border: 1px solid #D8E4E4;
}
.summary__block_border-bottom_none {
  border-bottom: none;
}

.summary__section {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.09);
}
.summary__section_box-shadow_none {
  box-shadow: none;
}

.summary__card {
  background-color: #F7F7F7;
  border: 1px solid rgba(199, 215, 215, 0.43);
  margin: 10px;
  margin-top: 0;
}
.summary__card_is-joined-card:not(:last-child) {
  margin-bottom: 0;
  border-bottom: none;
}
.summary__card_is-joined-card:not(:first-child) {
  border-top: none;
}

.summary__card-separator {
  margin-left: 16px;
  margin-right: 16px;
  border-bottom: solid 1px #DBDBDB;
}
.summary__card-separator_no-side-margins {
  margin-left: 0;
  margin-right: 0;
}

.summary__header {
  height: 65px;
  background-color: #FFF;
  display: flex;
  align-items: center;
  border-bottom: solid thin #CBDADA;
  padding: 0 20px;
}
@media (max-width: 63.99em) {
  .summary__header {
    height: 55px;
  }
}
.summary__header_is-borderless {
  border-bottom: none;
}
.summary__header_height_small {
  height: 50px;
}
.summary__header_type_sub-header {
  height: 45px;
  background-color: #F4F4F4;
}
.summary__header_is-centered {
  justify-content: center;
}
.summary__header_height_auto {
  height: auto;
}
.summary__header_vertical-padding_15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.summary__header_text-align_center {
  text-align: center;
}
.summary__header_flex-direction_column {
  flex-direction: column;
}
.summary__header_align-items_flex-start {
  align-items: flex-start;
}
.summary__header_gap_5 {
  gap: 5px;
}

.summary__header-buttons {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.summary__header-item {
  margin-left: 10px;
  min-width: -moz-max-content;
  min-width: max-content;
}
.summary__header-item_width_90 {
  width: 90px;
}

.summary__title-count {
  font-weight: 600;
  margin-left: 10px;
}

.summary__title {
  font-size: 18px;
  font-weight: 600;
  flex: 1;
}
.summary__title_is-semi-bold {
  font-weight: 600;
}
.summary__title_is-bold {
  font-weight: bold;
}
.summary__title_size_small {
  font-size: 16px;
}
.summary__title_icon_house {
  display: flex;
  align-items: center;
}
.summary__title_icon_house:before {
  content: "";
  height: 12px;
  width: 10px;
  margin-right: 10px;
  background: url("/assets/images/icons/house.svg") center no-repeat;
  background-size: 12px 10px;
}
.summary__title_icon_beneficiaries {
  display: flex;
  align-items: center;
}
.summary__title_icon_beneficiaries:before {
  content: "";
  height: 16px;
  width: 16px;
  margin-right: 8px;
  background: url("/assets/images/icons/beneficiaries.svg") center no-repeat;
  background-size: 16px 16px;
}
.summary__title_icon_building {
  display: flex;
  align-items: center;
}
.summary__title_icon_building:before {
  content: "";
  height: 12px;
  width: 10px;
  margin-right: 10px;
  background: url("/assets/images/icons/building.svg") center center no-repeat;
  background-size: 12px 10px;
}
.summary__title_icon_document {
  display: flex;
  align-items: center;
}
.summary__title_icon_document:before {
  content: "";
  height: 12px;
  width: 11px;
  margin-right: 10px;
  background: url("/assets/images/icons/documents.svg") center no-repeat;
  background-size: 12px 11px;
}
.summary__title_icon_note {
  display: flex;
  align-items: center;
}
.summary__title_icon_note:before {
  content: "";
  height: 13px;
  width: 14px;
  margin-right: 10px;
  background: url("/assets/images/themes/green/icons/notes.svg") center no-repeat;
  background-size: 14px 13px;
}
.summary__title_icon_employer-classes {
  display: flex;
  align-items: center;
}
.summary__title_icon_employer-classes:before {
  content: "";
  height: 14px;
  width: 14px;
  margin-right: 10px;
  background: url("/assets/images/icons/employer-classes.svg") center center no-repeat;
  background-size: 14px 14px;
}
.summary__title_icon_contact {
  display: flex;
  align-items: center;
}
.summary__title_icon_contact:before {
  content: "";
  height: 15px;
  width: 13px;
  margin-right: 10px;
  background: url("/assets/images/icons/contact.svg") center center no-repeat;
  background-size: 15px 13px;
}
.summary__title_icon_location-pin {
  display: flex;
  align-items: center;
}
.summary__title_icon_location-pin:before {
  content: "";
  height: 19px;
  width: 14px;
  margin-right: 10px;
  background: url("/assets/images/icons/location-pin.svg") center center no-repeat;
  background-size: 19px 14px;
}
.summary__title_icon_suit-man {
  display: flex;
  align-items: center;
}
.summary__title_icon_suit-man:before {
  content: "";
  height: 18px;
  width: 12px;
  margin-right: 10px;
  background: url("/assets/images/themes/green/icons/suit-man.svg") center center no-repeat;
  background-size: 18px 12px;
}
.summary__title_icon_white-suit-man {
  display: flex;
  align-items: center;
}
.summary__title_icon_white-suit-man:before {
  content: "";
  height: 16px;
  width: 13px;
  margin-right: 10px;
  background: url("/assets/images/icons/employment.svg") center no-repeat;
  background-size: 16px 13px;
}
.summary__title_icon_associations {
  display: flex;
  align-items: center;
}
.summary__title_icon_associations:before {
  content: "";
  height: 13px;
  width: 19px;
  margin-right: 10px;
  background: url("/assets/images/themes/green/icons/associations.svg") center center no-repeat;
  background-size: 19px 13px;
}
.summary__title_icon_subgroups {
  display: flex;
  align-items: center;
}
.summary__title_icon_subgroups:before {
  content: "";
  height: 14px;
  width: 14px;
  margin-right: 10px;
  background: url("/assets/images/icons/subgroups.svg") center center no-repeat;
  background-size: cover;
}
.summary__title_icon_bill {
  display: flex;
  align-items: center;
}
.summary__title_icon_bill:before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  width: 10px;
  height: 7px;
  background: url("/assets/images/themes/green/icons/invoice.svg") center no-repeat;
  background-size: 10px 7px;
}
.summary__title_icon_employer-contacts {
  display: flex;
  align-items: center;
}
.summary__title_icon_employer-contacts:before {
  content: "";
  height: 16px;
  width: 13px;
  margin-right: 10px;
  background: url("/assets/images/icons/employer-contacts.svg") center center no-repeat;
  background-size: 16px 13px;
}
.summary__title_icon_cobra-information {
  display: flex;
  align-items: center;
}
.summary__title_icon_cobra-information:before {
  content: "";
  height: 13px;
  width: 14px;
  margin-right: 10px;
  background: url("/assets/images/icons/green-empty-heart-bold.svg") center center no-repeat;
  background-size: 13px 14px;
}
.summary__title_icon_users {
  display: flex;
  align-items: center;
}
.summary__title_icon_users:before {
  content: "";
  height: 14px;
  width: 14px;
  margin-right: 10px;
  background: url("/assets/images/icons/hand-click.svg") center center no-repeat;
  background-size: 14px 14px;
}
.summary__title_icon_benefits {
  display: flex;
  align-items: center;
}
.summary__title_icon_benefits:before {
  content: "";
  height: 11px;
  width: 10px;
  margin-right: 10px;
  background: url("/assets/images/icons/heart.svg") center center no-repeat;
  background-size: 100%;
}
.summary__title_icon_dependents {
  display: flex;
  align-items: center;
}
.summary__title_icon_dependents:before {
  content: "";
  height: 14px;
  width: 14px;
  margin-right: 10px;
  background: url("/assets/images/icons/dependents.svg") center no-repeat;
  background-size: 14px 14px;
}
.summary__title_icon_members {
  display: flex;
  align-items: center;
}
.summary__title_icon_members:before {
  content: "";
  height: 18px;
  width: 23px;
  margin-right: 10px;
  background: url("/assets/images/icons/employees.svg") center center no-repeat;
  background-size: 18px 23px;
}
.summary__title_icon_contribution-percentage {
  display: flex;
  align-items: center;
}
.summary__title_icon_contribution-percentage:before {
  content: "";
  height: 15px;
  width: 14px;
  margin-right: 10px;
  background: url("/assets/images/icons/icon_contribution-percentage.svg") center center no-repeat;
  background-size: 13px 14px;
}

.summary__icon {
  width: 14px;
  height: 14px;
  margin-right: 7px;
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 47.99em) {
  .summary__body-container {
    padding: 0 16px;
  }
}
.summary__body-container_has-border-top {
  border-top: solid thin #CBDADA;
}

.summary__body {
  background-color: #FFF;
}
.summary__body_has-top-border {
  border-top: solid thin #CBDADA;
}
.summary__body_has-grey-background {
  background-color: #F7F7F7;
}
.summary__body_has-bottom-border {
  border-bottom: solid thin #CBDADA;
}
.summary__body_padding-top_10 {
  padding-top: 10px;
}
.summary__body_padding-top_15 {
  padding-top: 15px;
}
.summary__body_padding-bottom_15 {
  padding-bottom: 15px;
}
.summary__body_background-color_transparent {
  background-color: transparent;
}

.summary__cell {
  padding: 15px 16px;
}
.summary__cell_is-cornered {
  justify-self: flex-end;
  padding-right: 18px;
}
.summary__cell_is-centered {
  align-self: center;
}
.summary__cell_padding-left_0 {
  padding-left: 0;
}
.summary__cell_padding-left_10 {
  padding-left: 10px;
}
.summary__cell_padding-left_20 {
  padding-left: 20px;
}
.summary__cell_padding-right_20 {
  padding-right: 20px;
}
.summary__cell_padding-top_0 {
  padding-top: 0;
}
.summary__cell_display_flex {
  display: flex;
}
.summary__cell_align-items_center {
  align-items: center;
}
.summary__cell_justify-content_flex-end {
  justify-content: flex-end;
}
.summary__cell_min-width_135 {
  min-width: 135px;
}
.summary__cell_color_grey {
  color: #9B9B9B;
}
.summary__cell_background-color_yellow {
  background-color: #FFF4E8;
}
.summary__cell_font-style_italic {
  font-style: italic;
}
.summary__cell_border-top_grey {
  border-top: solid 1px #DBDBDB;
}
.summary__cell_border-bottom_grey:not(:last-child) {
  border-bottom: solid 1px #DBDBDB;
}
.summary__cell_margin-left_16 {
  margin-left: 16px;
}
.summary__cell_margin-right_16 {
  margin-right: 16px;
}
.summary__cell_has-gender-icon .summary__cell-text-content::before {
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  height: 38px;
  width: 38px;
  margin-right: 10px;
}
.summary__cell_gender_f .summary__cell-text-content::before {
  background-image: var(--svg-dependent-female);
}
.summary__cell_gender_m .summary__cell-text-content::before {
  background-image: var(--svg-dependent-male);
}
.summary__cell_gender_n .summary__cell-text-content::before {
  background-image: var(--svg-neutral);
}
.summary__cell-text-content {
  display: flex;
  align-items: center;
  padding: 5px 20px;
}
.summary__cell_has-stop-date {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
}

.summary__mobile-top-actions {
  height: 50px;
  display: flex;
}

@keyframes summary__entrance {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.summary__cobra-eligibility-period-table-holder {
  margin-top: 10px;
  margin-right: 20px;
  margin-left: 20px;
}

.summary__cobra-eligibility-period-table-holder:last-child {
  margin-bottom: 20px;
}

.summary__scroll-to-bottom {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.95) 45%);
  transform: translateY(0);
}
.summary__scroll-to-bottom:not(.summary__scroll-to-bottom_is-hidden) {
  animation: g-slide-up 300ms ease;
}
.summary__scroll-to-bottom_is-hidden {
  transition: transform 300ms ease;
  transform: translateY(100%);
}
@media (max-width: 47.99em) {
  .summary__scroll-to-bottom {
    padding: 0 20px;
    text-align: center;
  }
}

.benefit-name-and-carrier {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.benefit-name-and-carrier__carrier-logo {
  max-width: 100px;
  max-height: 37px;
}

.benefit-name-and-carrier__plan-info {
  width: 100%;
}

.benefit-name-and-carrier__plan-name {
  font-weight: bold;
  font-size: 14px;
}

.benefit-name-and-carrier__carrier-name {
  font-size: 13px;
  color: #5E5E5E;
}

.contribution-strategy-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contribution-strategy-details__product-card {
  border: 1px solid #C8D8D8;
}
.contribution-strategy-details__product-card_border_none {
  border: none;
}
.contribution-strategy-details__product-card_padding_10 {
  padding: 10px;
}
.contribution-strategy-details__product-card_background-color_white {
  background-color: #FFFFFF;
}
.contribution-strategy-details__product-card:not(:last-child) {
  margin-bottom: 20px;
}

.contribution-strategy-details__product-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 20px;
  background-color: #EAEAEA;
}
.contribution-strategy-details__product-card-header_border-bottom_grey {
  border-bottom: 1px solid #C8D8D8;
}
.contribution-strategy-details__product-card-header_background-color_white {
  background-color: #FFFFFF;
}
.contribution-strategy-details__product-card-header_no-padding {
  padding: 0;
}
.contribution-strategy-details__product-card-header_margin-bottom_20 {
  margin-bottom: 20px;
}

.contribution-strategy-details__product-card-body {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contribution-strategy-details__product-card-body_padding_10 {
  padding: 10px;
}

.contribution-strategy-details__age-banded-card {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 5px 20px;
  background-color: #F5F5F5;
}
.contribution-strategy-details__age-banded-card_gap_20 {
  gap: 20px;
}

.contribution-strategy-details__age-banded-card-title {
  display: flex;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}

.contribution-strategy-details__age-banded-card-age-band {
  background-color: #26B5B4;
  width: 35px;
  height: 12px;
  padding: 4px;
  border-radius: 2px;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  line-height: 11px;
}

.contribution-strategy-details__member-card {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
}
.contribution-strategy-details__member-card_background-color_grey {
  background-color: #F5F5F5;
}
.contribution-strategy-details__member-card_border_grey {
  border: 1px solid #C8D8D8;
}
.contribution-strategy-details__member-card_padding_10 {
  padding: 10px;
}

.contribution-strategy-details__member-card-title {
  font-size: 16px;
  font-weight: 600;
}
.contribution-strategy-details__member-card-title_padding_15-0-0-15 {
  padding: 15px 0 0 15px;
}
.contribution-strategy-details__member-card-title_margin-bottom_20 {
  margin-bottom: 20px;
}
.contribution-strategy-details__member-card-title_font-size_14 {
  font-size: 14px;
}
.contribution-strategy-details__member-card-title_margin_10_0 {
  margin: 10px 0 0 10px;
}

/**
 * Colored Bullet Points.
 */
.x-type-bullet {
  display: flex;
  align-items: flex-start;
  font-weight: normal;
  gap: 5px;
}

.x-type-bullet_color_green {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #2DBB5D;
  border: none;
}

.x-type-bullet_color_orange {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #F4A50D;
  border: none;
}

.x-type-bullet_color_yellow-orange {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #F8CB01;
  border: none;
}

.x-type-bullet_color_red {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #D0021B;
  border: none;
}

.x-type-bullet_color_red-1 {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: var(--color-red-2);
  border: none;
}

.x-type-bullet_color_yellow {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #FFD800;
  border: none;
}

.x-type-bullet_color_blue {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #034FA8;
  border: none;
}

.x-type-bullet_color_purple {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #6650A0;
  border: none;
}

.x-type-bullet_color_grey {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #9B9B9B;
  border: none;
}

.x-type-bullet_color_yellow2 {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #E4D627;
  border: none;
}

.x-type-bullet_color_sushi {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #83C244;
  border: none;
}

.x-type-bullet_color_mint-green {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #0DA7AA;
  border: none;
}

.x-type-bullet_color_teal {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #1297AC;
  border: none;
}

.x-type-bullet_color_light-sea-green {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #26B5B4;
  border: none;
}

.x-type-bullet_color_spanish-grey {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #95989A;
  border: none;
}

.x-type-bullet_color_inverted-orange {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: transparent;
  border: solid thin #F4A50D;
}

.x-type-bullet_color_inverted-red {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: transparent;
  border: solid thin #D0021B;
}

.x-type-bullet_color_dark-purple {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: transparent;
  border: solid thin #7D7086;
}

.x-type-bullet_color_inverted-sushi {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: transparent;
  border: solid thin #83C244;
}

.x-type-bullet_color_inverted-teal {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: transparent;
  border: solid thin #1397AC;
}

.x-type-bullet_color_inverted-blue {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: transparent;
  border: solid thin #034FA8;
}

.x-type-bullet_color_inverted-grey {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: transparent;
  border: solid thin #9C9C9C;
}

.x-type-bullet_color_inverted-cyan {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: transparent;
  border: solid thin #26B5B4;
}

.x-type-bullet_color_transparent {
  height: 10px;
  width: 10px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: transparent;
  border: solid thin #000;
}

/**
 * Represents the affiliated companies page in the applications flow.
 */
.affiliated-companies {
  display: block;
}

.affiliated-companies__main-description {
  margin-bottom: 15px;
}

.affiliated-companies__list-affiliated-description {
  margin-top: 15px;
  margin-bottom: 20px;
}

.affiliated-companies__more-details {
  margin-top: 20px;
  margin-bottom: 30px;
  font-style: italic;
}

.affiliated-companies__note {
  display: flex;
}
.affiliated-companies__note_upload_letter {
  margin-top: 15px;
}

.affiliated-companies__white-block {
  background-color: #FFF;
  border: 1px solid #D2DFDF;
  padding: 15px;
  margin-bottom: 18px;
}

.affiliated-companies__fields-text {
  margin-bottom: 15px;
}

.affiliated-companies__white-block-footer {
  display: flex;
  justify-content: space-between;
}

.affiliated-companies__delete {
  display: flex;
  align-items: flex-end;
}

.alternate-renewal-header {
  display: flex;
  background-color: #FAF0EF;
  padding: 13px 20px;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 1;
}
@media (max-width: 47.99em) {
  .alternate-renewal-header {
    flex-direction: column;
    padding: 20px 10px 15px 10px;
  }
}

.alternate-renewal-header__left {
  flex: 1;
  color: #D57F73;
  font-size: 16px;
  font-weight: bold;
}
@media (max-width: 47.99em) {
  .alternate-renewal-header__left {
    margin-bottom: 15px;
  }
}

.assign-plans-modal__section {
  padding-bottom: 10px;
}
.assign-plans-modal__section:not(:last-child) {
  border-bottom: 1px solid #DADADA;
  margin-bottom: 20px;
}

.assign-plans-modal__section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.assign-plans-modal__field {
  margin-bottom: 20px;
}
.assign-plans-modal__field_margin-bottom_10 {
  margin-bottom: 10px;
}
.assign-plans-modal__field_display_flex {
  display: flex;
  align-items: center;
}
.assign-plans-modal__field:last-child {
  margin-bottom: 0;
}

.assign-plans-modal__field-input {
  flex: 1;
  margin-right: 20px;
}

.assign-plans-modal__field-action {
  width: 50px;
}

.assign-plans-modal__note {
  margin: 0 70px 20px 0;
}

.case-assignee-option_is-unassigned {
  padding-left: 30px;
  position: relative;
}
.case-assignee-option_is-unassigned::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 19px;
  height: 100%;
  background: url("/assets/images/icons/unassigned.svg") center center no-repeat;
  background-size: 100% 100%;
}

.contribution-strategy {
  display: block;
}

.contribution-strategy__section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}
.contribution-strategy__section-title_font-weight_semi-bold {
  font-weight: 600;
}
.contribution-strategy__section-title_font-size_16 {
  font-size: 16px;
}

.contribution-strategy__description {
  margin-bottom: 3px;
}

.contribution-strategy__requirements {
  color: #9B9B9B;
  margin-bottom: 27px;
  font-style: italic;
}

.contribution-strategy__footnote {
  font-size: 16px;
  color: #9B9B9B;
  margin-top: 15px;
}

/**
 * @block create-quote-prospect-step
 */
.create-quote-prospect-step {
  display: block;
}

.create-quote-prospect-step__title {
  padding-bottom: 15px;
}
@media (max-width: 47.99em) {
  .create-quote-prospect-step__title {
    font-size: 18px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .create-quote-prospect-step__title {
    font-size: 23px;
  }
}
@media (min-width: 81.25em) {
  .create-quote-prospect-step__title {
    font-size: 26px;
  }
}

.create-quote-prospect-step__message {
  font-size: 16px;
  display: flex;
  align-items: center;
  height: 100%;
  font-weight: 400;
}

.create-quote-prospect-step__field-box-status {
  position: absolute;
  bottom: 15px;
  right: 20px;
  text-transform: uppercase;
  color: #FFF;
  padding: 4px 5px;
  border-radius: 3px;
  background-color: #034FA8;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
}

.dashboard-greeting {
  display: flex;
  height: 100%;
  background-color: #FFF;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0 10px;
}

@media (min-width: 48em) {
  .dashboard-greeting_has-margin-right-from-tablet {
    margin-right: 10px;
  }
}
@media (min-width: 64em) {
  .dashboard-greeting_has-margin-right-from-tablet {
    margin-right: 20px;
  }
}

.dashboard-greeting__icon {
  background: url(/assets/images/icons/greeting.svg) center no-repeat;
  background-size: cover;
  width: 37px;
  height: 37px;
  margin-bottom: 12px;
}

.dashboard-greeting__title {
  font-size: 25px;
  color: #034FA8;
  text-align: center;
  line-height: 1.1;
}
@media (max-width: 63.99em) {
  .dashboard-greeting__title {
    font-size: 22px;
  }
}

.dashboard-greeting__text {
  font-size: 16px;
  color: #484848;
  text-align: center;
}
@media (max-width: 63.99em) {
  .dashboard-greeting__text {
    font-size: 14px;
  }
}

.dashboard-widget {
  background-color: #FFF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px 20px;
}
@media (max-width: 63.99em) {
  .dashboard-widget {
    padding: 0 10px 20px;
  }
}

.dashboard-widget__header {
  display: flex;
  align-items: center;
  height: 57px;
}
@media (max-width: 47.99em) {
  .dashboard-widget__header_multiline-on-mobile {
    padding: 15px 0;
    align-items: flex-start;
  }
  .dashboard-widget__header_multiline-on-mobile .dashboard-widget__filter-menu {
    transform: translateY(-5px);
  }
  .dashboard-widget__header_multiline-on-mobile .dashboard-widget__refresh-button {
    padding-top: 3px;
  }
}

.dashboard-widget__title-and-months {
  display: flex;
  flex: 1;
}
@media (min-width: 48em) {
  .dashboard-widget__title-and-months {
    align-items: center;
  }
}
@media (max-width: 47.99em) {
  .dashboard-widget__title-and-months_vertical-on-mobile {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard-widget__title-and-months_vertical-on-mobile .dashboard-widget__title {
    margin-bottom: 15px;
  }
}

.dashboard-widget__title {
  font-size: 16px;
  color: #034FA8;
  font-weight: bold;
  margin-right: 13px;
}
.dashboard-widget__title:hover {
  color: #03336B;
}

.dashboard-widget__months-nav {
  display: flex;
  flex: 1;
}
.dashboard-widget__months-nav_has-margin-right {
  margin-right: 18px;
}
@media (max-width: 47.99em) {
  .dashboard-widget__months-nav {
    justify-content: flex-end;
  }
}

.dashboard-widget__months-nav-item {
  background-color: #EFEFEF;
  border-radius: 3px;
  width: 33px;
  height: 17px;
  margin-right: 12px;
  color: #4A4A4A;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard-widget__months-nav-item:last-child {
  margin-right: 15px;
}
.dashboard-widget__months-nav-item:hover:not(.dashboard-widget__months-nav-item_is-selected), .dashboard-widget__months-nav-item:focus:not(.dashboard-widget__months-nav-item_is-selected) {
  background-color: #BFBFBF;
}
.dashboard-widget__months-nav-item_is-selected, .dashboard-widget__months-nav-item:active:not(.dashboard-widget__months-nav-item_is-selected) {
  background-color: #034FA8;
  color: #FFF;
}

.dashboard-widget__filter-menu {
  width: 70px;
  height: 35px;
  margin-right: 10px;
}

.dashboard-widget__filter-tags {
  margin-bottom: 10px;
}

.dashboard-widget__card {
  height: 100%;
  background-color: #F8F8F8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  cursor: pointer;
}
.dashboard-widget__card_is-loading {
  pointer-events: none;
}
.dashboard-widget__card_has-border {
  border: solid 1px #D2D2D2;
}
.dashboard-widget__card_type_pencil:hover, .dashboard-widget__card_type_pencil:focus {
  border: solid 2px #6650A0;
}
.dashboard-widget__card_type_pencil .dashboard-widget__icon {
  background: url("/assets/images/icons/purple-pen.svg") center no-repeat;
}
.dashboard-widget__card_type_pencil .dashboard-widget__number {
  color: #6650A0;
}
.dashboard-widget__card_type_flag:hover, .dashboard-widget__card_type_flag:focus {
  border: solid 2px #F4A50D;
}
.dashboard-widget__card_type_flag .dashboard-widget__icon {
  background: url("/assets/images/icons/yellow-flag.svg") center no-repeat;
  width: 19px;
  height: 25px;
}
.dashboard-widget__card_type_flag .dashboard-widget__number {
  color: #F4A50D;
}
.dashboard-widget__card_type_mag:hover, .dashboard-widget__card_type_mag:focus {
  border: solid 2px #034FA8;
}
.dashboard-widget__card_type_mag .dashboard-widget__icon {
  background: url("/assets/images/icons/blue-mag.svg") center no-repeat;
  width: 32px;
  height: 32px;
}
.dashboard-widget__card_type_mag .dashboard-widget__number {
  color: #034FA8;
}
.dashboard-widget__card_type_nib:hover, .dashboard-widget__card_type_nib:focus {
  border: solid 2px #27B5B4;
}
.dashboard-widget__card_type_nib .dashboard-widget__icon {
  background: url("/assets/images/icons/blue-nib.svg") center no-repeat;
  width: 27px;
  height: 27px;
}
.dashboard-widget__card_type_nib .dashboard-widget__number {
  color: #27B5B4;
}
.dashboard-widget__card_type_check:hover, .dashboard-widget__card_type_check:focus {
  border: solid 2px #83C244;
}
.dashboard-widget__card_type_check .dashboard-widget__icon {
  background: url("/assets/images/icons/green-check.svg") center no-repeat;
}
.dashboard-widget__card_type_check .dashboard-widget__number {
  color: #83C244;
}
.dashboard-widget__card_type_hold:hover, .dashboard-widget__card_type_hold:focus {
  border: solid 2px #9B9B9B;
}
.dashboard-widget__card_type_hold .dashboard-widget__icon {
  background: url("/assets/images/icons/grey-hold.svg") center no-repeat;
  width: 32px;
  height: 32px;
}
.dashboard-widget__card_type_hold .dashboard-widget__number {
  color: #9B9B9B;
}
.dashboard-widget__card_type_check-mark:hover, .dashboard-widget__card_type_check-mark:focus {
  border: solid 2px #83C244;
}
.dashboard-widget__card_type_check-mark .dashboard-widget__icon {
  background: url("/assets/images/icons/green-check-mark.svg") center no-repeat;
  width: 27px;
  height: 31px;
}
.dashboard-widget__card_type_check-mark .dashboard-widget__number {
  color: #83C244;
}
.dashboard-widget__card_type_check-alternate:hover, .dashboard-widget__card_type_check-alternate:focus {
  border: solid 2px #83C244;
}
.dashboard-widget__card_type_check-alternate .dashboard-widget__icon {
  background: url("/assets/images/icons/green-check-alternate.svg") center no-repeat;
  width: 29px;
  height: 32px;
}
.dashboard-widget__card_type_check-alternate .dashboard-widget__number {
  color: #83C244;
}
.dashboard-widget__card_justify-content_flex-end {
  justify-content: flex-end;
}

.dashboard-widget__icon {
  margin-bottom: 10px;
  background-size: 100%;
  width: 26px;
  height: 21px;
}

.dashboard-widget__number {
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 10px;
}

.dashboard-widget__status {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  text-align: center;
}

.dashboard-widget__refresh {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--color-red);
}

.dashboard-widget__error-text {
  font-size: 14;
  margin-bottom: 9px;
}

.dashboard-widget__error-icon {
  width: 26px;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 16px;
  height: 26px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/x-red-circle.svg");
}

.dashboard-widget__error-card {
  background-color: #F8F8F8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  height: 156px;
  border: solid 1px #D2D2D2;
}
@media (max-width: 47.99em) {
  .dashboard-widget__error-card {
    height: 250px;
  }
}
@media (min-width: 64em) {
  .dashboard-widget__error-card {
    height: 120px;
  }
}

.download-confirmation-modal__description {
  margin-bottom: 17px;
  font-size: 16px;
}

.download-confirmation-modal__options {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
@media (max-width: 47.99em) {
  .download-confirmation-modal__options {
    flex-direction: column;
  }
}

.download-confirmation-modal__option {
  box-sizing: border-box;
  background-color: #FFF;
  display: flex;
  flex-direction: column;
  border: solid 1px #F3F3F3;
}
@media (min-width: 48em) {
  .download-confirmation-modal__option {
    padding: 20px 15px;
    height: 214px;
    width: 292px;
  }
}
@media (max-width: 47.99em) {
  .download-confirmation-modal__option {
    width: 100%;
  }
}
@media (max-width: 47.99em) {
  .download-confirmation-modal__option:first-child {
    margin-bottom: 20px;
  }
}

.download-confirmation-modal__option-title {
  font-size: 16px;
  font-weight: 600;
}
@media (min-width: 48em) {
  .download-confirmation-modal__option-title {
    margin-bottom: 14px;
  }
}
@media (max-width: 47.99em) {
  .download-confirmation-modal__option-title {
    padding: 19px 12px 0 12px;
  }
}

.download-confirmation-modal__option-description {
  flex: 1;
  font-size: 14px;
}
@media (max-width: 47.99em) {
  .download-confirmation-modal__option-description {
    padding: 15px 12px;
  }
}

@media (max-width: 47.99em) {
  .download-confirmation-modal__option-button {
    height: 41px;
  }
}

.flow-start-modal {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.flow-start-modal__group-name {
  font-size: 26px;
  padding-left: 5px;
}

.flow-start-modal__employee-number {
  font-size: 14px;
  padding-left: 5px;
}

.flow-start-modal__field {
  margin-top: 15px;
  height: 70px;
}
.flow-start-modal__field_height_auto {
  height: auto;
}

/**
 * 1. Padding bottom needs to account for the contact form.
 */
.footer-disclaimer {
  color: #B0A7A8;
  font-size: 13px;
}
.footer-disclaimer_has-padding {
  padding: 15px 15px 40px 15px; /* 1 */
}
.footer-disclaimer_padding-bottom_20 {
  padding-bottom: 20px; /* 1 */
}
.footer-disclaimer_padding-bottom_40 {
  padding-bottom: 40px;
}
.footer-disclaimer_padding-bottom_50 {
  padding-bottom: 50px;
}
.footer-disclaimer_has-margin-top {
  margin-top: 20px;
}
.footer-disclaimer_text-align_center {
  text-align: center;
}
@media (max-width: 89.99em) {
  .footer-disclaimer_is-scrollable-until-1440 {
    overflow-y: auto;
    max-height: 150px;
  }
}
.footer-disclaimer_is-in-table {
  margin-top: 25px;
  padding-left: 15px;
  padding-right: 15px;
}

/**
 * The eligibility and enrollment page in the applications flow.
 */
.eligibility-enroll {
  display: block;
}

.eligibility-enroll__eff-date {
  width: 300px;
}

.eligibility-enroll__address {
  margin-top: 20px;
}

.eligibility-enroll__address-fields {
  margin-top: 10px;
}

.eligibility-enroll__products-title {
  margin-top: 15px;
}

.eligibility-enroll__products {
  margin-top: 15px;
}

.eligibility-enroll__employees-title {
  margin-top: 20px;
  margin-bottom: 10px;
}

.eligibility-enroll__employees-classes-title {
  margin-top: 20px;
  margin-bottom: 10px;
}

.eligibility-enroll__employees-classes-field {
  margin-bottom: 15px;
}

.eligibility-enroll__note {
  margin-top: 15px;
  display: flex;
}

.eligibility-enroll__section-icon {
  margin-left: 10px;
}

.eligibility-enroll__address-header {
  display: flex;
}

.eligibility-enroll__coverage-date-title {
  display: flex;
  margin-bottom: 15px;
  margin-top: 10px;
}

.enrollment-information {
  display: block;
}

.enrollment-information__classifications-description {
  margin-top: 12px;
  margin-bottom: 20px;
}

.enrollment-information__statement-checkbox-container {
  margin-top: 25px;
}

.enum-error-notification {
  padding: 0 10px 10px;
}

.filter-tags {
  display: flex;
  padding: 5px 0 0 12px;
  min-height: 40px;
  box-sizing: border-box;
}
.filter-tags_no-padding {
  padding: 0;
}
.filter-tags_align-items_center {
  align-items: center;
}
@media (max-width: 47.99em) {
  .filter-tags_newline-on-mobile {
    flex-direction: column;
  }
}

.filter-tags__items {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.filter-tags__items_is-empty {
  background: none;
}
.filter-tags__items_theme_green .filter-tags__tag-close:hover {
  background-image: url("/assets/images/icons/green-x-sign.svg");
}

.filter-tags__label {
  background: url("/assets/images/themes/blue/icons/filter.svg") 0 9.5px no-repeat;
  background-size: 12px 12px;
  min-height: 12px;
  padding: 10px 12px;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 300;
  color: #5E5E5E;
  text-transform: uppercase;
}
.filter-tags__label_theme_green {
  background-image: url("/assets/images/icons/green-filter.svg");
}
.filter-tags__label_has-text {
  background-position-y: 12px;
  flex-shrink: 0;
  padding: 12px 10px 0 20px;
}
@media (max-width: 47.99em) {
  .filter-tags__label_has-text {
    margin-bottom: 8px;
  }
}

.filter-tags__tag {
  background-color: #EAEAEA;
  border-radius: 3px;
  box-sizing: border-box;
  margin-right: 10px;
  display: flex;
  margin-bottom: 5px;
}
.filter-tags__tag_margin_0 {
  margin: 0;
}

.filter-tags__clear-all {
  background-color: #EAEAEA;
  border-radius: 3px;
  box-sizing: border-box;
  display: inline-flex;
  margin-left: 15px;
}

.filter-tags__tag-label {
  padding: 5px 0 5px 7px;
}

.filter-tags__tag-close {
  min-width: 22px;
  background: url("/assets/images/icons/x-sign-dark-grey.svg") center center no-repeat;
  background-size: 8px 8px;
  cursor: pointer;
}
.filter-tags__tag-close:hover {
  background-image: url("/assets/images/icons/x-sign-blue.svg");
}
.filter-tags__tag-close_color_red {
  background-image: var(--svg-x-red);
}
.filter-tags__tag-close_color_red:hover {
  background-image: var(--svg-x-red);
}

.filter-tags__refresh {
  position: absolute;
  right: 10px;
  top: 0;
  height: 100%;
  max-height: 45px;
  width: 40px;
}

.generate-proposal {
  font-size: 16px;
  color: #4A4A4A;
}

.generate-proposal__container {
  margin-top: 25px;
  margin-bottom: 18px;
}

.generate-proposal__checkboxes {
  border: solid thin #D2DFDF;
  background: white;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
}

.generate-proposal__checkbox {
  display: flex;
  align-items: center;
  height: 47px;
  width: 33.3333333333%;
}

.groups-reuse-modal {
  display: block;
}

.groups-reuse-modal__title {
  margin-bottom: 20px;
}

.groups-reuse-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 30px 30px 30px 30px 30px;
}

.icon-text {
  text-transform: uppercase;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  display: flex;
  align-items: center;
  color: #4A4A4A;
}
.icon-text::before {
  content: "";
  margin-right: 6px;
  background-repeat: no-repeat;
  background-position: center;
}
.icon-text_type_client::before {
  width: 9px;
  height: 10px;
  background-image: url("/assets/images/themes/blue/icons/clients.svg");
}
.icon-text_type_prospect::before {
  width: 12px;
  height: 9px;
  background-image: url("/assets/images/themes/blue/icons/prospects.svg");
}

.map-plans__title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 15px;
}

.map-plans__instructions {
  margin-bottom: 20px;
}

.map-plans__table {
  margin-top: 10px;
}

.map-plans__table-row {
  position: relative;
}
.map-plans__table-row_type_header {
  background-color: #E0E0E0;
  text-transform: uppercase;
  font-size: 10px;
}
.map-plans__table-row_type_header .map-plans__table-cell {
  font-family: "Montserrat", sans-serif;
  color: #034FA8;
}
.map-plans__table-row_type_body {
  background-color: #FFFFFF;
  color: #4A4A4A;
}
.map-plans__table-row_type_body:not(:last-child) {
  border-bottom: solid 1px #DADADA;
}
.map-plans__table-row_is-error {
  border: solid 1px var(--color-red);
}

.map-plans__table-cell {
  display: flex;
  align-items: center;
  padding-left: 13px;
  padding-right: 13px;
}
.map-plans__table-cell_type_error {
  padding: 0;
}
.map-plans__table-cell_type_keep-group-number-toggle {
  padding-bottom: 10px;
}

.map-plans__keep-group-number-toggle-container {
  width: 100%;
  padding: 8px 10px;
  border: solid 1px rgba(3, 79, 168, 0.1);
  border-radius: 5px;
  background-color: #EFEFEF;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-plans__full-width-container {
  width: 100%;
}

.map-plans__table-product-header {
  height: 46px;
  background-color: rgba(234, 234, 234, 0.5);
  display: flex;
  align-items: center;
  padding: 0 22px 0 16px;
}

.map-plans__product-name {
  flex: 1;
  font-weight: 600;
  color: #4A4A4A;
  display: flex;
  align-items: center;
}
.map-plans__product-name:before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.map-plans__product-name_type_medical:before {
  background-image: url("/assets/images/icons/coverage-types/medical.svg");
}
.map-plans__product-name_type_vision:before {
  background-image: url("/assets/images/icons/coverage-types/vision.svg");
}
.map-plans__product-name_type_dental:before {
  background-image: url("/assets/images/icons/coverage-types/dental.svg");
}
.map-plans__product-name_is-loading:before {
  display: none;
}

.map-plans__plans-count {
  font-size: 14px;
  color: #5C5050;
}

.member-summary {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/**
 * 1. Needed for flex child that has an overflow container.
 */
.member-summary__table {
  min-height: 0; /* 1 */
  flex: 1;
}

.member-summary__header {
  border-top: solid 1px #DADADA;
  height: 60px;
  background-color: #EAEAEA;
}

/**
 * The Mapping step in Membership Details.
 *
 * @block members-import-mapping
 */
.members-import-mapping {
  display: flex;
  height: 100%;
  overflow: auto;
}

.members-import-mapping__fields {
  position: relative;
  z-index: 3;
  display: flex;
  box-sizing: border-box;
  width: 210px;
  flex-direction: column;
  background: #EAEAEA;
  padding: 17px 14px;
  box-shadow: 3px 1px 2px 0 rgba(0, 0, 0, 0.14);
  flex-shrink: 0;
  height: 100%;
  overflow: auto;
}

.members-import-mapping__field-list {
  margin-bottom: 25px;
}
.members-import-mapping__field-list ul {
  padding: 5px 0;
  margin: 0;
}

.members-import-mapping__field {
  list-style-type: none;
  padding-left: 18px;
  font-size: 16px;
  color: #5C5050;
}
.members-import-mapping__field_is-selected {
  background: url("/assets/images/icons/blue-check.svg") left center no-repeat;
  background-size: 11px 10px;
}

.members-import-mapping__table {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-x: auto;
  background: white;
}

.members-import-mapping__table-header {
  display: flex;
  flex-shrink: 0;
}

.members-import-mapping__table-body {
  flex: 1;
  overflow-y: auto;
  width: fit-content;
  width: -moz-fit-content;
}

.members-import-mapping__table-row {
  display: flex;
  height: 54px;
  border-bottom: solid 1px #DDE7E7;
}

.members-import-mapping__table-cell {
  width: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}
.members-import-mapping__table-cell_has-content {
  padding: 0 20px;
}

.members-import-mapping__field-box {
  height: 68px;
  margin-right: -1px;
}

.membership-details {
  display: block;
}
.membership-details_is-flex {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.membership-details__content {
  flex: 1;
  height: 100%;
  min-height: 0;
}

.membership-details__header-container {
  padding: 10px 20px 20px;
}

.membership-details__section-header {
  display: flex;
  margin-bottom: 15px;
  margin-top: 10px;
}
@media (max-width: 47.99em) {
  .membership-details__section-header {
    flex-direction: column;
  }
}

.membership-details__section-title {
  display: flex;
  font-weight: bold;
  flex: 1;
  font-size: 18px;
}
@media (max-width: 47.99em) {
  .membership-details__section-title {
    margin-bottom: 10px;
  }
}
@media (max-width: 63.99em) {
  .membership-details__section-title {
    font-size: 23px;
  }
}

.membership-details__input-fields-container {
  display: flex;
  width: 100%;
  margin: 35px 0 0;
}

.membership-details__top-fields-container {
  margin-bottom: 20px;
}

.membership-details__input-field {
  height: 70px;
  width: 50%;
}
.membership-details__input-field_has-right-padding {
  padding-right: 7px;
}

.membership-details__text_weight_semi-bold {
  font-weight: 600;
}
.membership-details__text_margin-top {
  margin-top: 10px;
}

.membership-details__field-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #034FA8;
  padding: 0 10px;
  font-size: 14px;
}
.membership-details__field-content:hover {
  text-decoration: underline;
}

.membership-details__upload-steps {
  width: 100%;
  margin-top: 18px;
}

.membership-details__fields {
  display: block;
  width: 100%;
  background-color: #FFF;
  border: solid 1px var(--color-light-blue);
  margin-top: 18px;
}

.membership-details__fields-box {
  display: flex;
  padding: 25px;
}

.membership-details__fields-column {
  border-left: solid 1px var(--color-light-blue);
  padding-left: 25px;
  flex: 1;
}
.membership-details__fields-column:first-child {
  border-left: 0;
  padding-left: 0;
}

.membership-details__fields-column-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.membership-details__fields-column-content_width_large {
  width: 340px;
}
.membership-details__fields-column-content_can-wrap {
  flex-wrap: wrap;
}
.membership-details__fields-column-content_can-wrap .membership-details__optional-field,
.membership-details__fields-column-content_can-wrap .membership-details__required-field {
  width: 50%;
}

.membership-details__required-field {
  margin-bottom: 3px;
}
.membership-details__required-field:last-child {
  margin-bottom: 0;
}

.membership-details__optional-field {
  margin-bottom: 3px;
}
.membership-details__optional-field:last-child {
  margin-bottom: 0;
}

.membership-details__field-description {
  font-style: italic;
  padding-right: 20px;
}

.membership-details__disclaimer {
  margin-top: 15px;
  margin-bottom: 30px;
  color: #B0A7A8;
  font-size: 13px;
}

.membership-details_workflow_create-quote .membership-details__fields-column_type_required .membership-details__required-field {
  margin-bottom: 15px;
}
.membership-details_workflow_create-quote .membership-details__fields-column_type_required .membership-details__required-field:last-child {
  margin-bottom: 0;
}
.membership-details_workflow_create-quote .membership-details__fields-column_type_optional .membership-details__optional-field {
  margin-bottom: 15px;
}
.membership-details_workflow_create-quote .membership-details__fields-column_type_optional .membership-details__optional-field:last-child {
  margin-bottom: 0;
}
.membership-details_workflow_create-quote .membership-details__fields-column-content_can-wrap {
  height: 480px;
}

.membership-details_workflow_create-application .membership-details__fields-column_type_required .membership-details__required-field {
  margin-bottom: 15px;
}
.membership-details_workflow_create-application .membership-details__fields-column_type_required .membership-details__required-field:last-child {
  margin-bottom: 0;
}
.membership-details_workflow_create-application .membership-details__fields-column_type_optional .membership-details__optional-field {
  margin-bottom: 15px;
}
.membership-details_workflow_create-application .membership-details__fields-column_type_optional .membership-details__optional-field:last-child {
  margin-bottom: 0;
}
.membership-details_workflow_create-application .membership-details__fields-column-content_can-wrap {
  height: 470px;
}

.msp-aca {
  color: #4A4A4A;
}

.msp-aca__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  margin-top: 10px;
}

.msp-aca__employee-count {
  margin: 15px 0 35px;
}

.msp-aca__employee-count-field {
  display: flex;
  align-items: center;
}

.msp-aca__market-size-calculator-link {
  margin-left: 30px;
}

.msp-aca__subdescription {
  color: #9B9B9B;
  margin-top: 5px;
}

.msp-aca__list {
  color: #9B9B9B;
  list-style: none;
  margin: 0;
  padding-left: 8px;
}
@media (max-width: 63.99em) {
  .msp-aca__list {
    margin-top: 25px;
  }
}
@media (min-width: 64em) {
  .msp-aca__list {
    margin-top: 5px;
  }
}

.msp-aca__list-item:before {
  display: inline-block;
  content: "-";
  width: 8px;
  margin-left: -8px;
}

.msp-aca__radios {
  margin-top: 20px;
}

.msp-aca__radio {
  margin-bottom: 10px;
}

.msp-aca__more {
  color: #9B9B9B;
  margin: 35px 0 30px;
}

.msp-aca__note-link {
  margin-top: 8px;
}

.new-task-form__checkbox {
  color: #5C5050;
}

.new-task-form__field {
  margin-bottom: 15px;
}
@media (min-width: 48em) {
  .new-task-form__field_app-id {
    width: 65%;
  }
}

.new-note-form__field:not(:last-child) {
  margin-bottom: 10px;
}
@media (min-width: 48em) {
  .new-note-form__field_width_medium {
    width: 65%;
  }
}
@media (max-width: 47.99em) {
  .new-note-form__field_width_small {
    width: 50%;
  }
}
@media (min-width: 48em) {
  .new-note-form__field_width_small {
    width: 35%;
  }
}

.note-card {
  background-color: #FFF;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  padding: 0 10px;
  border-radius: 4px;
}
.note-card_is-highlighted {
  border: 1px solid #034FA8;
}

.note-card__title {
  color: #4A4A4A;
  font-weight: bold;
  font-size: 16px;
}

.note-card__description {
  padding-bottom: 15px;
  border-bottom: solid 1px #ECECEC;
  color: #5E5E5E;
  font-size: 14px;
}

.note-card__added-by {
  color: #4A4A4A;
  font-size: 14px;
}

.note-card__added-on {
  color: #9B9B9B;
  font-size: 14px;
}

.quoting-ownership-sponsorship {
  display: block;
}

.quoting-ownership-sponsorship__sub-section-title {
  margin-top: 10px;
  margin-bottom: 12px;
}
.quoting-ownership-sponsorship__sub-section-title_margin-top_20 {
  margin-top: 20px;
}

.quoting-ownership-sponsorship__radio {
  margin-bottom: 10px;
  display: flex;
}

.quoting-ownership-sponsorship__field {
  margin-top: 15px;
  margin-bottom: 1px;
  width: 320px;
}

.paginated-box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  border-radius: 3px;
}

.paginated-box__header {
  display: flex;
  align-items: center;
  background-color: #EAEAEA;
  height: 50px;
  padding: 0 10px;
  border-radius: 3px 3px 0 0;
}

.paginated-box__title {
  flex: 1;
  color: #454545;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.paginated-box__count {
  margin-left: 5px;
  display: flex;
}

/**
 * 1. Hide all the rows except the ones in the current page.
 */
.paginated-box__content-container {
  flex: 1;
  overflow: hidden; /* 1 */
  display: flex;
  background-color: #FFF;
  border-radius: 0 0 3px 3px;
}

.paginated-box__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: transform 400ms ease;
  height: 100%;
}

.paginated-box__row {
  border-bottom: solid 1px #CBDADA;
  box-sizing: border-box;
  flex-shrink: 0;
}

.paginated-box__arrow {
  width: 25px;
  height: 100%;
  background-size: 8px 12px;
  background-repeat: no-repeat;
}
.paginated-box__arrow_type_next {
  background-position: 30% center;
  background-image: url("/assets/images/icons/right-arrow.svg");
}
.paginated-box__arrow_type_next:hover, .paginated-box__arrow_type_next:focus {
  background-image: url("/assets/images/icons/right-arrow-blue.svg");
}
.paginated-box__arrow_type_next::after {
  content: "";
  background-image: url("/assets/images/icons/right-arrow-blue.svg");
}
.paginated-box__arrow_type_back {
  background-position: 80% center;
  background-image: url("/assets/images/icons/left-arrow.svg");
}
.paginated-box__arrow_type_back:hover, .paginated-box__arrow_type_back:focus {
  background-image: url("/assets/images/icons/left-arrow-blue.svg");
}
.paginated-box__arrow_type_back::after {
  content: "";
  background-image: url("/assets/images/icons/left-arrow-blue.svg");
}
.paginated-box__arrow_is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.plain-note {
  font-size: 14px;
}
.plain-note a {
  color: var(--main-color);
}
.plain-note a:hover {
  color: var(--main-color-dark);
  text-decoration: underline;
}

.profile-dashboard {
  background-color: #F8F8F8;
  padding: 10px 15px 40px;
  flex: 1;
  overflow: auto;
}
@media (min-width: 71.875em) {
  .profile-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
  }
}

@media (min-width: 71.875em) {
  .profile-dashboard__sticky-container {
    position: sticky;
    top: 0;
  }
}

.profile-dashboard__section {
  margin-bottom: 20px;
}

.workflow-summary-page {
  display: block;
}

.workflow-summary-page__header {
  display: flex;
  padding-bottom: 20px;
}
.workflow-summary-page__header_no-padding {
  padding-bottom: 0;
}

.workflow-summary-page__sub-header {
  padding-bottom: 20px;
}

.workflow-summary-page__title {
  font-size: 26px;
  padding-bottom: 10px;
}

.workflow-summary-page__header-left {
  flex: 1;
}

.product-types-table {
  display: block;
  padding-top: 10px;
}

.product-types-table__row {
  position: relative;
  border: solid 1px #DADADA;
  border-bottom: 0;
}
.product-types-table__row_type_header {
  display: grid;
  grid-template-columns: 1.5fr 1fr 3fr;
  grid-template-rows: 50px;
  background-color: #EAEAEA;
  text-transform: uppercase;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
}
.product-types-table__row_has-equal-cells {
  grid-template-columns: 1fr 1fr 1fr;
}
.product-types-table__row_type_body {
  background-color: #FFF;
}
.product-types-table__row:last-child:not(.product-types-table__row_is-error) {
  border: solid 1px #DADADA;
}
.product-types-table__row_is-error {
  border: solid 1px var(--color-red);
}

.product-types-table__cell {
  display: flex;
  align-items: center;
  padding-left: 13px;
  padding-right: 13px;
}
.product-types-table__cell_has-error-box {
  padding: 0;
}
.product-types-table__cell_type_header {
  font-family: "Montserrat", sans-serif;
}

.product-types-table__select {
  width: 100%;
}

.product-types-table__full-width-container {
  width: 100%;
}

.product-types-table__error-icon {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: var(--svg-field-error) center center no-repeat;
}

.product-types-table__unit {
  color: #9B9B9B;
  text-transform: uppercase;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  border: solid 1px #9B9B9B;
  padding: 4px 6px;
  margin-right: 11px;
}
.product-types-table__unit_is-selected {
  color: #FFF;
  border-color: #034FA8;
  background-color: #034FA8;
}

.prospect-application {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #F8F8F8;
}
.prospect-application_is-scrollable {
  overflow-y: scroll;
}

.prospect-application__content {
  width: 100%;
}
@media (min-width: 20em) and (max-width: 47.99em) {
  .prospect-application__content {
    margin-top: 35px;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .prospect-application__content {
    margin-top: 50px;
  }
}
@media (min-width: 64em) {
  .prospect-application__content {
    margin: 35px auto;
    max-width: 820px;
  }
}
@media (max-width: 63.99em) {
  .prospect-application__content_has-mobile-bottom-margin {
    margin-bottom: 35px;
  }
}
.prospect-application__content_margin-top_small {
  margin-top: 15px;
}

/**
 * The prospect's contact details.
 *
 * @block prospect-contact-info
 */
.prospect-contact-info {
  display: block;
}

.prospect-contact-info__contact {
  border-bottom: solid 1px #D2DFDF;
}
.prospect-contact-info__contact:last-child {
  border-bottom: none;
}

@media (max-width: 47.99em) {
  .prospect-documents-table__left-cell {
    padding-left: 10px;
  }
}

.prospect-documents-table__actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.prospect-documents-table__action {
  margin-left: 22px;
}

/**
 * The Quotes table inside a prospect detail. This is more of a namespace
 * than a block, while we use `q-large-table` for the actual table styling,
 * any customizations inside individual cells is an element of this block.
 *
 *
 * @block prospect-quotes-table
 */
.prospect-quotes-table__actions {
  display: flex;
  width: 100%;
  align-items: center;
  height: 100%;
}

.prospect-quotes-table__action {
  cursor: pointer;
  color: #034FA8;
  display: block;
}
.prospect-quotes-table__action:focus {
  opacity: 0.9;
}
.prospect-quotes-table__action:hover {
  opacity: 0.8;
}
.prospect-quotes-table__action:active {
  opacity: 0.5;
}
.prospect-quotes-table__action_color_green {
  color: #7ECA2A;
}
.prospect-quotes-table__action_color_salmon {
  color: #D57F73;
}
.prospect-quotes-table__action:nth-child(n+2) {
  margin-left: 15px;
}

.prospect-quotes-table__id,
.prospect-quotes-table__quote-name,
.prospect-quotes-table__effective-date,
.prospect-quotes-table__type {
  width: 100%;
  box-sizing: border-box;
}

.prospect-quotes-table__status {
  width: 100%;
}

@media (max-width: 47.99em) {
  .prospect-quotes-table__status {
    text-align: right;
  }
  .prospect-quotes-table__id,
  .prospect-quotes-table__quote-name,
  .prospect-quotes-table__type {
    padding-left: 10px;
  }
  .prospect-quotes-table__actions {
    justify-content: center;
  }
  .prospect-quotes-table__action {
    background-color: #F2F2F2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 47px;
  }
  .prospect-quotes-table__action:nth-child(n+1) {
    margin-left: 0;
  }
}
/**
 * @block quotes-enter-fields
 */
.quotes-enter-fields {
  overflow: auto;
  background: white;
}

/**
 * 1. Align it with the text field bottom borders in the same row
 */
.quotes-enter-fields__oval-checkbox {
  margin-top: 7px; /* 1 */
}

/**
 * 1. Align it with the text field bottom borders in the same row
 */
.quotes-enter-fields__remove-button {
  height: 20px;
  width: 20px;
  background: var(--svg-x-red) center center no-repeat;
  background-size: 11px 11px;
  cursor: pointer;
  margin-top: 8px; /* 1 */
}
.quotes-enter-fields__remove-button:hover {
  opacity: 0.7;
}

.quotes-products-page {
  display: block;
}

.quotes-products-page__section-header {
  display: flex;
  margin-bottom: 15px;
  margin-top: 10px;
}
@media (max-width: 47.99em) {
  .quotes-products-page__section-header {
    flex-direction: column;
  }
}

.quotes-products-page__section-title {
  display: flex;
  font-weight: 500;
  flex: 1;
}
@media (max-width: 47.99em) {
  .quotes-products-page__section-title {
    margin-bottom: 10px;
  }
}
.quotes-products-page__section-title_font_large {
  font-size: 26px;
}
@media (max-width: 63.99em) {
  .quotes-products-page__section-title_font_large {
    font-size: 23px;
  }
}
.quotes-products-page__section-title_font_small {
  font-size: 16px;
  font-weight: 600;
}

.quotes-products-page__effective-date-container {
  margin-bottom: 30px;
}

.quotes-products-page__effective-date {
  height: 70px;
  width: 300px;
}

.quotes-products-page__products {
  margin-top: 20px;
  display: flex;
}

/**
 * The page that contains the table to shop for plans during workflows.
 *
 * @block quoting-choose-plans
 */
.quoting-choose-plans {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.quoting-choose-plans__table {
  flex: 1;
  min-height: 0;
}
.quoting-choose-plans__table_is-scrollable {
  overflow-y: scroll;
}

/**
 * 1. Padding bottom needs to account for the contact form.
 */
.quoting-choose-plans__footer {
  z-index: 2;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
  color: #B0A7A8;
  font-size: 13px;
  padding: 15px 15px 40px 15px; /* 1 */
}

.quoting-choose-plans__carrier {
  display: flex;
  align-items: center;
}

.quoting-choose-plans__carrier-logo-container {
  max-width: 130px;
  max-height: 100%;
}
@media (min-width: 48em) {
  .quoting-choose-plans__carrier-logo-container {
    width: 130px;
    margin-right: 20px;
  }
}

.quoting-choose-plans__carrier-logo {
  max-width: 100%;
  max-height: 100%;
}

.quoting-choose-plans__logo-img {
  max-width: 100%;
}

.quoting-choose-plans__carrier-name {
  flex: 1;
  font-size: 14px;
}

.quoting-choose-plans__plan-name {
  font-size: 14px;
}
@media (max-width: 63.99em) {
  .quoting-choose-plans__plan-name {
    font-weight: bold;
  }
}

.quoting-choose-plans__carrier-name-under-plan {
  font-size: 14px;
  padding-top: 5px;
}

.quoting-choose-plans__actions {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-right: 20px;
  min-width: 150px;
}

.quoting-choose-plans__actions-button {
  flex: 1;
}

.quoting-choose-plans__empty {
  margin-top: 50px;
  background-color: #FFF;
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}
@media (max-width: 63.99em) {
  .quoting-choose-plans__empty_has-margin-top {
    margin-top: 0;
  }
}

.quoting-choose-plans__empty-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  margin-bottom: 30px;
}
.quoting-choose-plans__empty-icon_type_medical {
  width: 32px;
  height: 32px;
  background-image: url("/assets/images/themes/blue/icons/medical.svg");
}
.quoting-choose-plans__empty-icon_type_dental {
  width: 25px;
  height: 30px;
  background-image: url("/assets/images/themes/blue/icons/dental.svg");
}
.quoting-choose-plans__empty-icon_type_vision {
  width: 27px;
  height: 27px;
  background-image: url("/assets/images/themes/blue/icons/vision.svg");
}

.quoting-choose-plans__empty-title {
  text-align: center;
  font-size: 25px;
  color: #034FA8;
  margin-bottom: 10px;
}

.quoting-choose-plans__empty-description {
  text-align: center;
  color: #4A4A4A;
  max-width: 500px;
  margin: 0 auto;
}

.quoting-choose-plans__empty-button {
  margin-top: 35px;
}

.quoting-choose-plans__carrier-header-cell {
  padding-left: 150px;
  display: inline-block;
}

.quoting-choose-plans__stamp {
  display: inline-block;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  cursor: text;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 10px;
  padding: 10px 5px;
  background: #E7E7E7;
  border-radius: 3px;
}

.quoting-choose-plans__compare-plans-footer {
  color: #B0A7A8;
  font-size: 13px;
}

.quoting-plan-card {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px 10px 0 14px;
  box-sizing: border-box;
}

.quoting-plan-card__logo {
  max-width: 50%;
  max-height: 100%;
  position: relative;
}
.quoting-plan-card__logo:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.quoting-plan-card__logo-img {
  max-width: 100%;
  pointer-events: none;
}

.quoting-plan-card__cost-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 1;
}

.quoting-plan-card__cost {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  color: #034FA8;
}

.quoting-plan-card__cost-description {
  font-size: 10px;
  text-transform: uppercase;
}

.quoting-plan-card__name-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.quoting-plan-card__name {
  font-weight: bold;
}

.quoting-plan-card__name-description {
  font-size: 14px;
}

.quoting-contact-form__checkboxes {
  padding-top: 15px;
  display: flex;
  flex-wrap: wrap;
}

.quoting-contact-form__checkbox-container {
  padding-bottom: 10px;
}
@media (max-width: 47.99em) {
  .quoting-contact-form__checkbox-container {
    width: 100%;
  }
}
@media (min-width: 48em) {
  .quoting-contact-form__checkbox-container {
    width: 33%;
  }
}

.quoting-contact-form__address-header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

.quoting-contact-form__address-header-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.quoting-contact-form__address-checkbox-container {
  font-size: 14px;
}

.quoting-contact-form__address-validator {
  margin-left: 10px;
}

.quoting-plan-card {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px 10px 0 14px;
  box-sizing: border-box;
}

.quoting-plan-card__logo {
  max-width: 50%;
  max-height: 100%;
  position: relative;
}
.quoting-plan-card__logo:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.quoting-plan-card__logo-img {
  max-width: 100%;
  pointer-events: none;
}

.quoting-plan-card__cost-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 1;
}

.quoting-plan-card__cost {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  color: #034FA8;
}

.quoting-plan-card__cost-description {
  font-size: 10px;
  text-transform: uppercase;
}

.quoting-plan-card__name-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.quoting-plan-card__name {
  font-weight: bold;
}

.quoting-plan-card__name-description {
  font-size: 14px;
}

.rate-sheets {
  height: 100%;
  overflow-y: scroll;
}

.rate-sheets__container {
  max-width: 815px;
  margin: 22px auto 32px;
  padding: 0 23px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 47.99em) {
  .rate-sheets__container {
    margin: 16px auto;
    padding: 0;
  }
}

.rate-sheets__required-notice {
  margin-bottom: 10px;
}
@media (max-width: 47.99em) {
  .rate-sheets__required-notice {
    padding-left: 15px;
  }
}

.rate-sheets__section {
  background-color: #FFF;
  width: 100%;
  margin-bottom: 20px;
}
@media (min-width: 48em) {
  .rate-sheets__section {
    border: solid 1px #C7D7D7;
  }
}

.rate-sheets__body {
  padding: 18px 15px;
}

.rate-sheets__section-header {
  height: 55px;
  background-color: #EAEAEA;
  border-bottom: solid 1px #D2DFDF;
  padding: 0 10px 0 22px;
  display: flex;
  justify-content: space-between;
}

.rate-sheets__section-header-title {
  font-size: 16px;
  color: #5C5050;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.rate-sheets__section-header-icon {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.rate-sheets__section-header-icon_type_medical {
  background-image: url("/assets/images/icons/coverage-types/medical.svg");
}
.rate-sheets__section-header-icon_type_vision {
  background-image: url("/assets/images/icons/coverage-types/vision.svg");
}
.rate-sheets__section-header-icon_type_dental {
  background-image: url("/assets/images/icons/coverage-types/dental.svg");
}

.rate-sheets__section-header-action {
  display: flex;
  align-items: center;
}

.rate-sheets__button-container {
  height: 45px;
  margin-top: 16px;
}

.rate-sheets__select-title {
  display: flex;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
}

.rate-sheets__select-plans-placeholder {
  font-style: italic;
  font-size: 16px;
  color: #B0A7A8;
}

.rate-sheets__plan-checkbox-container {
  margin-top: 5px;
  font-size: 16px;
  width: -moz-fit-content;
  width: fit-content;
}

.rate-sheets__plans-checkboxes {
  padding-left: 3px;
}

.rate-sheets_select-all-plans-checkbox {
  color: #9B9B9B;
  font-style: italic;
  font-family: "Source Sans Pro", sans-serif;
}

.rate-sheets__no-plans-available {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rate-sheets__no-plans-available-icon {
  width: 51px;
  height: 47px;
  background: url("/assets/images/themes/blue/icons/rate-sheets-no-plans.svg") center no-repeat;
  margin-bottom: 15px;
}

.rate-sheets__no-plans-available-title {
  text-align: center;
  font-size: 16px;
}

.rate-sheets__area-type-radio:first-child {
  margin-bottom: 15px;
}

/**
 * @block renewal-displayer
 */
.renewal-displayer {
  height: 100%;
  width: 100%;
}

.renewal-displayer__header {
  background-color: #EAEAEA;
  height: 100%;
  width: 100%;
  display: flex;
  white-space: nowrap;
}
@media (max-width: 63.99em) {
  .renewal-displayer__header_scroll_horizontal {
    height: calc(100% + 17px);
    overflow-x: scroll;
    overflow-y: hidden;
  }
}

.renewal-displayer__header-container {
  height: 60px;
  box-sizing: border-box;
  overflow: hidden;
}
.renewal-displayer__header-container_border_bottom {
  border-bottom: 1px solid #DADADA;
}
.renewal-displayer__header-container_overflow_visible {
  overflow: visible;
}

.renewal-displayer__title {
  font-size: 20px;
  padding-left: 20px;
}

.renewal-displayer__header-nav {
  flex: 1;
  height: 60px;
}

.renewal-displayer__header-nav-menu {
  display: flex;
  width: 40px;
  align-items: center;
}

.renewal-displayer__header-actions {
  display: flex;
  align-items: center;
}

.renewal-displayer__header-right {
  display: flex;
  align-items: center;
  padding-right: 20px;
  flex: 1;
  justify-content: flex-end;
}
.renewal-displayer__header-right_height_60 {
  height: 60px;
}

.renewal-displayer__header-renewal-status {
  margin-left: 25px;
  text-align: right;
  white-space: normal;
}
.renewal-displayer__header-renewal-status_has-margin-right {
  margin-right: 20px;
}

.renewal-displayer__header-left {
  display: flex;
  align-items: center;
}

@media (max-width: 47.99em) {
  .renewal-displayer__header-actions,
  .renewal-displayer__header-nav {
    flex: 1;
    width: 100%;
  }
  .renewal-displayer__header-actions {
    order: 1;
    box-sizing: border-box;
    border-bottom: solid 1px #DADADA;
  }
  .renewal-displayer__header-nav {
    order: 2;
  }
  .renewal-displayer__header-nav-item {
    padding: 0;
    flex: 1;
    display: flex;
    justify-content: center;
  }
}
.renewal-displayer__body {
  display: flex;
  height: calc(100% - 60px);
}

.renewal-displayer__header-container-mobile {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #EAEAEA;
  border-bottom: 1px solid #DADADA;
  box-sizing: border-box;
  height: 60px;
}

.renewal-displayer__mobile-actions {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
}

@media (max-width: 47.99em) {
  .renewal-displayer__body {
    height: calc(100% - 120px);
  }
}
@media (min-width: 48em) and (max-width: 71.865em) {
  .renewal-displayer__body {
    height: calc(100% - 120px);
  }
}
.renewal-page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
@media (max-width: 63.99em) {
  .renewal-page {
    overflow-y: scroll;
  }
}

@media (min-width: 64em) {
  .renewal-page__body {
    overflow-y: scroll;
  }
}

@media (min-width: 64em) {
  .renewal-page__body-content {
    margin: 35px auto;
    max-width: 820px;
  }
}

.renewal-subheader__header {
  background-color: #EAEAEA;
  padding: 10px 15px 0;
  border-top: 1px solid #DADADA;
}
@media (max-width: 63.99em) {
  .renewal-subheader__header {
    background-color: #FFFFFF;
    margin: 22px 0;
    border: 1px solid #DBE6E6;
    padding-top: 10px;
  }
}
.renewal-subheader__header_no-margin-bottom {
  margin-bottom: 0;
}
.renewal-subheader__header_no-padding-top {
  padding-top: 0;
}

.renewal-choose-plans {
  width: 100%;
}

.renewal-choose-plans__description {
  font-weight: 600;
  margin-bottom: 25px;
}

.renewal-choose-plans__product-section {
  background-color: #FFFFFF;
  width: 100%;
  margin-bottom: 15px;
}
.renewal-choose-plans__product-section_is-error {
  border: 1px solid #D57F73;
}

.renewal-choose-plans__product-section-header {
  height: 45px;
  background-color: #EAEAEA;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.renewal-choose-plans__carrier-logo-container {
  max-width: 130px;
  max-height: 100%;
}

.renewal-choose-plans__logo-img {
  max-width: 100%;
}

.renewal-choose-plans__carrier {
  display: flex;
  align-items: center;
}

.renewal-choose-plans__plan-name {
  font-weight: 700;
}

.renewal-choose-plans__add-plan {
  height: 63px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.renewals-bulk-modal {
  margin-bottom: 20px;
}

.renewals-bulk-modal__checks {
  margin-top: 15px;
}

.renewals-bulk-modal__check {
  margin-bottom: 14px;
}

.renewals-bulk-modal__check-content {
  display: flex;
  align-items: center;
}

.renewals-bulk-modal__check-status {
  margin-left: 10px;
  margin-top: 3px;
}

.renewals-bulk-modal__select-wrapper {
  width: 300px;
}

.renewals-bulk-modal__select {
  height: 70px;
  margin-top: 20px;
}

.review-notes-section__header {
  display: flex;
  align-items: center;
  background-color: #EAEAEA;
  height: 50px;
  padding: 0 10px;
}
.review-notes-section__header_has-margin-bottom {
  margin-bottom: 10px;
}

.review-notes-section__title {
  flex: 1;
  color: #454545;
  font-weight: bold;
  font-size: 18px;
}

.review-notes-section__refresh {
  margin: 0 5px 0 15px;
}

.side-compare-initial-state {
  display: flex;
  flex-direction: column;
}

.side-compare-initial-state__icon {
  flex-shrink: 0;
  width: 100%;
  height: 87px;
  background: url("/assets/images/themes/blue/icons/compare-empty.svg") center no-repeat;
}

.side-compare-initial-state__title {
  color: rgba(3, 79, 168, 0.6);
  font-size: 30px;
  font-weight: 300;
}

.side-compare-initial-state__description {
  color: rgba(92, 80, 80, 0.8);
}

.side-compare-list-card {
  display: flex;
  flex-direction: column;
}

.side-compare-list-card__header {
  height: 20px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}

.side-compare-list-card__header-selected {
  font-style: italic;
  font-size: 13px;
  background-color: var(--color-red);
  width: 84px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
}

.side-compare {
  height: 100%;
  display: flex;
  overflow-x: auto;
}

.side-compare__list {
  height: 100%;
  width: 290px;
  overflow-y: scroll;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding-bottom: 5px;
  background-color: #FFF;
  box-sizing: border-box;
  flex-shrink: 0;
}

.side-compare__main {
  display: flex;
  flex-direction: column;
}

.side-compare__body {
  flex: 1;
  padding: 12px 12px 0;
  display: flex;
  flex-direction: column;
  position: relative;
  /**
   * We need to specify max-width in order to stop the footer from widening the body.
   * The 20px is for the scroll.
   */
}
.side-compare__body_number-of-columns_2 {
  max-width: 606px;
}
.side-compare__body_number-of-columns_3 {
  max-width: 904px;
}
.side-compare__body_has-padding-bottom {
  padding-bottom: 40px;
}

.side-compare__body-content {
  flex: 1;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
}

.side-compare__column-parent {
  display: flex;
  flex: 1;
}

.side-compare__card {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  height: 168px;
  border-bottom: 1px solid #ADA8A8;
  background-color: #FFF;
  display: flex;
  flex-direction: column;
  position: relative;
  border-left: 3px solid transparent;
}
.side-compare__card_is-dragging {
  opacity: 0.5;
}
.side-compare__card_is-selected {
  border-left: 3px solid #034FA8;
}

.side-compare__card-content {
  flex: 1;
}

.side-compare__header {
  height: 200px;
  display: flex;
}

.side-compare__column {
  width: 288px;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  background-color: #FFF;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  position: relative;
}
.side-compare__column:last-child {
  margin-right: 0;
}
.side-compare__column_is-initial-state {
  background-color: transparent;
}
.side-compare__column_is-empty {
  box-shadow: none;
  border-color: rgba(73, 143, 226, 0.5);
  border-style: dashed;
  border-width: 0 1px 1px;
}
.side-compare__column_is-header:not(.side-compare__column_is-empty) {
  cursor: move;
}
.side-compare__column_is-header.side-compare__column_is-empty {
  border-width: 1px 1px 0;
}
.side-compare__column_is-dragged-over.side-compare__column_is-empty {
  transition: background-color 100ms linear;
  background-color: rgba(0, 0, 0, 0.03);
}
.side-compare__column_is-dragged-over:not(.side-compare__column_is-empty), .side-compare__column_is-dragging {
  position: relative;
}
.side-compare__column_is-dragged-over:not(.side-compare__column_is-empty):after, .side-compare__column_is-dragging:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #FFF;
  opacity: 0.8;
}

.side-compare__card-overlay {
  cursor: move;
  position: absolute;
  top: 0;
  left: -3px;
  width: calc(100% + 3px);
  height: 100%;
  z-index: 1;
}
.side-compare__card-overlay:hover {
  background-color: rgba(3, 79, 168, 0.07);
}

/**
 * We cannnot center the empty state without using absolute positioning
 * since the columns are split into 2 parts.
 */
.side-compare__column-empty {
  position: absolute; /* 1 */
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.side-compare__column-empty-text {
  width: 200px;
  text-align: center;
}

.side-compare__column-empty-icon {
  width: 100%;
  height: 57px;
  background: url("/assets/images/themes/blue/icons/compare-empty.svg") center no-repeat;
  margin-bottom: 10px;
}

.side-compare__column-top-strip {
  height: 30px;
  display: flex;
  padding-left: 15px;
}

.side-compare__column-strip-left {
  flex: 1;
  display: flex;
  align-items: center;
}

.side-compare__column-strip-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.side-compare__column-strip-left-text {
  font-style: italic;
  color: #9B9B9B;
  font-size: 13px;
}

.side-compare__column-remove-icon {
  background: url("/assets/images/icons/x-sign-clear.svg") center no-repeat;
  background-size: 13px 13px;
  width: 40px;
  height: 100%;
}

.side-compare__column-action {
  flex-shrink: 0;
  height: 35px;
}

.side-compare__column-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.side-compare__cell {
  box-sizing: border-box;
  min-height: 64px;
  padding: 15px 10px 5px 15px;
  flex-shrink: 0;
  background-color: #FFF;
}
.side-compare__cell_is-dark {
  background-color: #EFEFEF;
}

.side-compare__field-label-container {
  color: #9B9B9B;
}

.side-compare__field-value {
  margin-top: 5px;
}

.side-compare__initial-state {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-49%, -40%);
  width: 475px;
  display: flex;
  flex-direction: column;
  text-align: center;
  z-index: 1;
}

.side-compare__link {
  color: #034FA8;
  display: flex;
  margin-bottom: 5px;
}
.side-compare__link:before {
  margin-top: 5px;
  margin-right: 10px;
  content: "";
}
.side-compare__link_type_document:before {
  width: 14px;
  height: 14px;
  background: url("/assets/images/themes/blue/icons/pdf.svg") center no-repeat;
}
.side-compare__link_type_video:before {
  width: 14px;
  height: 11px;
  background: url("/assets/images/themes/blue/icons/video.svg") center no-repeat;
}
.side-compare__link_type_website:before {
  width: 15px;
  height: 14px;
  background: url("/assets/images/themes/blue/icons/mouse.svg") center no-repeat;
}

.sign-and-submit-modal {
  display: block;
}

.sign-and-submit-modal__fields {
  margin-top: 15px;
}

.sign-and-submit-modal__upload-button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  cursor: pointer;
}
.sign-and-submit-modal__upload-button_is-loading {
  cursor: default;
}

.sign-and-submit-modal__upload-text {
  color: #034FA8;
  font-size: 16px;
}
.sign-and-submit-modal__upload-text:before {
  content: "";
  width: 11px;
  height: 11px;
  background: url("/assets/images/themes/blue/icons/download.svg") center no-repeat;
  display: inline-block;
  margin-right: 8px;
}

.sign-and-submit-modal__optional-text {
  color: #9B9B9B;
}

.sticky-header {
  height: 60px;
}
@media (max-width: 47.99em) {
  .sticky-header {
    height: 78px;
  }
}

.sticky-header__content {
  display: flex;
  justify-content: flex-end;
  background-color: #F8F8F8;
  z-index: 1;
  height: 60px;
}
@media (max-width: 47.99em) {
  .sticky-header__content {
    height: 78px;
  }
}

.sticky-header__content_is-fixed {
  position: fixed;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

.table-error {
  box-sizing: border-box;
}

.table-error__header {
  position: relative;
  background-color: #F8F8F8;
  height: 60px;
}
@media (max-width: 47.99em) {
  .table-error__header_hidden-until_tablet {
    display: none;
  }
}
@media (max-width: 71.865em) {
  .table-error__header_hidden-until_1150 {
    display: none;
  }
}
@media (max-width: 81.24em) {
  .table-error__header_hidden-until_1300 {
    display: none;
  }
}
@media (max-width: 87.49em) {
  .table-error__header_hidden-until_1400 {
    display: none;
  }
}
@media (max-width: 63.99em) {
  .table-error__header_hidden-until_desktop {
    display: none;
  }
}

.table-error__content {
  height: 283px;
  background: #FFF;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  border-bottom: solid 1px #C7D7D7;
  border-top: solid 1px #C7D7D7;
}
.table-error__content_border-top_none {
  border-top: none;
}
.table-error__content_border-bottom_none {
  border-bottom: none;
}
.table-error__content_is-borderless {
  border-bottom: none;
  border-top: none;
}
@media (min-width: 48em) {
  .table-error__content_is-borderless-from-tablet {
    border: none;
  }
}
@media (max-width: 47.99em) {
  .table-error__content_is-borderless-top-until-tablet {
    border-top: none;
  }
}
@media (max-width: 63.99em) {
  .table-error__content_is-borderless-top-until-desktop {
    border-top: none;
  }
}
@media (max-width: 71.865em) {
  .table-error__content_is-borderless-top-until-1150 {
    border-top: none;
  }
}
@media (max-width: 81.24em) {
  .table-error__content_is-borderless-top-until-1300 {
    border-top: none;
  }
}
@media (max-width: 87.49em) {
  .table-error__content_is-borderless-top-until-1400 {
    border-top: none;
  }
}
@media (max-width: 47.99em) {
  .table-error__content_has-borders-until-tablet {
    border: solid 1px #C7D7D7;
  }
}
.table-error__content_height_small {
  height: 180px;
}
.table-error__content_has-horizontal-margin {
  margin-left: 20px;
  margin-right: 20px;
}
.table-error__content_has-border-radius {
  border-radius: 5px;
}

.table-error__refresh {
  position: absolute;
  right: 10px;
  top: 0;
  height: 100%;
  width: 40px;
}

.table-error__icon {
  width: 100px;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 30px;
  height: 46px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/x-red-circle.svg");
}
.table-error__icon_type-disconnected {
  width: 116px;
  height: 40px;
  background-image: url("/assets/images/icons/disconnected.svg");
}

.table-error__title {
  text-align: center;
  color: #D57F73;
  font-size: 25px;
  margin-bottom: 15px;
}

.table-error__description {
  text-align: center;
  color: #4A4A4A;
  max-width: 306px;
  margin: 0 auto;
  margin-bottom: 15px;
}

.table-error_is-header-small .table-error__header {
  height: 40px;
}

.table-error_is-header-dark .table-error__header {
  background-color: #EAEAEA;
}

.table-error_is-content-borderless .table-error__content {
  border: none;
}

.table-error_is-tiny {
  margin: 0 20px;
}
.table-error_is-tiny .table-error__content {
  height: 60px;
  flex-direction: row;
  border: none;
}
.table-error_is-tiny .table-error__icon {
  display: none;
}
.table-error_is-tiny .table-error__description {
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 0;
  margin-right: 20px;
}

.task-page {
  height: 100%;
}

.task-page__header {
  background-color: #EAEAEA;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.task-page__body {
  display: flex;
  height: calc(100% - 60px);
  background-color: #F8F8F8;
  flex-direction: column;
  overflow: auto;
  box-sizing: border-box;
}
@media (min-width: 48em) {
  .task-page__body {
    overflow: visible;
    padding-bottom: 20px;
  }
}

.task-page__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8F8F8;
  height: 100%;
}

.task-page__header-actions {
  display: flex;
  align-items: center;
  height: 100%;
}

/**
 * 1. we had to give this overflow hidden because of a hack to hide borders using
 * margin: -1px in its children.
 *
 * 2. To prevent shrinking of the summary and trigger the scroll of the parent div instead.
 **/
.task-page__summary {
  background-color: #FFF;
  overflow: hidden; /* 1 */
  flex-shrink: 0; /* 2 */
}
@media (min-width: 48em) {
  .task-page__summary {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07);
  }
}

.task-page__details {
  flex: 1;
}
@media (min-width: 48em) {
  .task-page__details {
    overflow-y: scroll;
  }
}

.task-page__title {
  font-weight: bold;
  font-size: 16px;
  margin-top: 25px;
  margin-bottom: 7px;
}
@media (max-width: 47.99em) {
  .task-page__title {
    padding-left: 18px;
  }
}

@media (max-width: 47.99em) {
  .task-page__description {
    padding-left: 18px;
  }
}

.task-details {
  overflow: hidden;
}
@media (min-width: 48em) {
  .task-details {
    padding: 0 11px;
    margin-bottom: 50px;
  }
}

.task-details__section {
  padding-top: 20px;
  padding-bottom: 10px;
}
@media (min-width: 64em) {
  .task-details__section .task-details__title {
    padding-left: 7px;
  }
  .task-details__section .task-details__text {
    padding-left: 9px;
  }
}
@media (max-width: 47.99em) {
  .task-details__section {
    padding-bottom: 0;
  }
  .task-details__section .task-details__title, .task-details__section .task-details__text {
    padding-left: 17px;
  }
}

.task-details__title {
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 13px;
}
.task-details__title_has-border-bottom {
  border-bottom: solid 1px #C7D7D7;
}

.task-details__text_has-padding-top {
  padding-top: 15px;
}

.task-details__comment-box {
  border-bottom: solid 1px #C7D7D7;
  padding: 15px 0;
}

/**
 * 1. Since it has a tooltip, it looks nicer as an arrow (default) instead of text cursor.
 */
.task-details__comment-box-date {
  cursor: default; /* 1 */
}

.task-details__comment-box-body {
  font-size: 14px;
}

.task-details__form {
  padding: 0;
}

.task-details__form-title {
  font-family: "Montserrat", sans-serif;
  margin: 16px 0 10px;
  font-size: 10px;
  text-transform: uppercase;
  color: #9B9B9B;
}
@media (max-width: 47.99em) {
  .task-details__form-title {
    padding: 0 17px;
  }
}
@media (min-width: 64em) {
  .task-details__form-title {
    padding: 0 9px;
  }
}

@media (min-width: 48em) {
  .task-details__text-area-container {
    margin-bottom: 20px;
  }
}

.task-details__textarea {
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  -webkit-appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  background: #FFF;
  width: 100%;
  height: 140px;
  border: solid thin #DDE7E7;
  vertical-align: top;
  padding: 8px;
  border-radius: 2px;
  transition: border-color 300ms ease;
  resize: none;
  font-size: 14px;
}
@media (max-width: 47.99em) {
  .task-details__textarea {
    border-left: 0;
    border-right: 0;
    padding: 8px 20px;
  }
}
@media (min-width: 48em) {
  .task-details__textarea {
    height: 93px;
  }
}
.task-details__textarea:focus {
  border-color: #03336B;
}
.task-details__textarea::-moz-placeholder {
  color: var(--color-light-grey-6);
  font-size: 14px;
  opacity: 1;
}
.task-details__textarea::placeholder {
  color: var(--color-light-grey-6);
  font-size: 14px;
  opacity: 1;
}

.task-details__actions {
  display: flex;
}
@media (max-width: 47.99em) {
  .task-details__actions {
    height: 50px;
    width: 100%;
    background-color: #FFF;
  }
}
@media (min-width: 48em) {
  .task-details__actions {
    align-items: center;
    justify-content: flex-end;
  }
}

@media (max-width: 47.99em) {
  .task-details__button {
    flex: 1;
  }
}
@media (min-width: 48em) {
  .task-details__button_is-secondary {
    margin-right: 20px;
  }
}

.tooltip_display_inline-block {
  display: inline-block;
}

.tooltip_is-full-height {
  height: 100%;
}

.tooltip__text-container {
  z-index: 14;
  animation: tooltip--fade-in 1000ms ease-in;
}
.tooltip__text-container_speed_fast {
  animation-duration: 300ms;
}

.tooltip__text {
  background-color: #F8F8F8;
  color: #4A4A4A;
  font-size: 14px;
  border: 1px solid #D9D9D9;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17);
  padding: 6px 10px;
}

@keyframes tooltip--fade-in {
  0% {
    opacity: 0;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.tooltip-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container_justify-content_flex-end {
  justify-content: flex-end;
}

.tooltipped-label {
  display: flex;
  align-items: center;
}
.tooltipped-label_is-semibold {
  color: #545454;
  font-weight: 600;
}

.tooltipped-label__broker-name {
  margin-right: 5px;
}

.upload-steps {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.upload-steps__card {
  width: 266px;
  min-height: 241px;
  background-color: #FFF;
  border: solid 1px var(--color-light-blue);
  box-sizing: border-box;
  margin-right: 9px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 63.99em) {
  .upload-steps__card {
    width: 235px;
  }
}
.upload-steps__card:last-child {
  margin-right: 0;
}

.upload-steps__card-content {
  padding: 20px 10px 0;
  margin-bottom: 10px;
}

.upload-steps__icon {
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0 auto 10px;
}
.upload-steps__icon_type_download {
  background-image: url("/assets/images/themes/blue/icons/download-circle.svg");
}
.upload-steps__icon_type_required {
  background-image: url("/assets/images/themes/blue/icons/required-circle.svg");
}
.upload-steps__icon_type_upload {
  background-image: url("/assets/images/themes/blue/icons/upload-circle.svg");
}

.upload-steps__card-button {
  font-size: 14px;
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid thin transparent;
  background-color: #034FA8;
  color: #FFF;
}
.upload-steps__card-button:focus, .upload-steps__card-button:hover {
  background-color: #03336B;
}
.upload-steps__card-button_is-inverted {
  border: solid thin #034FA8;
  background-color: white;
  color: #034FA8;
}
.upload-steps__card-button_is-inverted:focus, .upload-steps__card-button_is-inverted:hover {
  background-color: #034FA8;
  color: #FFF;
}

.upload-steps__card-description {
  font-size: 14px;
  padding-top: 10px;
}

/**
 * The block responsible to the left navigation menu in a quote workflow,
 * and the top navigation menu on small screens.
 */
.workflow-nav {
  width: 222px;
  background-color: var(--color-light-grey-7);
}
@media (max-width: 81.24em) {
  .workflow-nav_breakpoint_1300 {
    width: 100%;
    height: 60px;
  }
}
.workflow-nav_breakpoint_1300 .workflow-nav__header {
  display: flex;
  align-items: center;
  height: 60px;
  background-color: rgba(3, 79, 168, 0.1);
  padding: 0 20px;
  margin-bottom: 20px;
}
@media (max-width: 81.24em) {
  .workflow-nav_breakpoint_1300 .workflow-nav__header {
    height: 100%;
    margin-bottom: 0;
    float: left;
    background-color: transparent;
  }
}
.workflow-nav_breakpoint_1300 .workflow-nav__content {
  display: flex;
  flex-direction: column;
}
@media (max-width: 81.24em) {
  .workflow-nav_breakpoint_1300 .workflow-nav__content {
    height: 100%;
    display: block;
  }
}
@media (max-width: 63.99em) {
  .workflow-nav:not(.workflow-nav_breakpoint_1300) {
    width: 100%;
    height: 60px;
  }
}
.workflow-nav:not(.workflow-nav_breakpoint_1300) .workflow-nav__header {
  display: flex;
  align-items: center;
  height: 60px;
  background-color: rgba(3, 79, 168, 0.1);
  padding: 0 20px;
  margin-bottom: 20px;
}
@media (max-width: 63.99em) {
  .workflow-nav:not(.workflow-nav_breakpoint_1300) .workflow-nav__header {
    height: 100%;
    margin-bottom: 0;
    float: left;
    background-color: transparent;
  }
}
.workflow-nav:not(.workflow-nav_breakpoint_1300) .workflow-nav__content {
  display: flex;
  flex-direction: column;
}
@media (max-width: 63.99em) {
  .workflow-nav:not(.workflow-nav_breakpoint_1300) .workflow-nav__content {
    height: 100%;
    display: block;
  }
}

.workflow-nav__title {
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.workflow-nav__title::before {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  content: "";
  margin-right: 8px;
  background-color: #034FA8;
}

.workflow-nav_theme_green {
  background-color: #F4FBFC;
}

/**
 * @block workflow-table-page
 */
.workflow-table-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 63.99em) {
  .workflow-table-page_scroll_mobile-tablet {
    overflow-y: scroll;
  }
}

.workflow-table-page__header {
  height: 60px;
  display: flex;
  background: #EAEAEA;
}
.workflow-table-page__header_has-border-top {
  border-top: 1px solid #D8D8D8;
}
.workflow-table-page__header_padding_15 {
  padding: 0 15px;
}
@media (max-width: 63.99em) {
  .workflow-table-page__header_background_mobile-tablet-light {
    background-color: #F8F8F8;
  }
}
@media (max-width: 63.99em) {
  .workflow-table-page__header_has-border-bottom-on-mobile-tablet {
    border-bottom: 1px solid #D8D8D8;
  }
}
.workflow-table-page__header_margin-top_1 {
  margin-top: 1px;
}
.workflow-table-page__header_fade-in-background-color_green {
  background-color: #B2DAE1;
  animation: workflow-table-header--fade-in-background-green 200ms linear;
}

.workflow-table-page__header-item {
  padding: 0 20px;
  box-sizing: border-box;
}
@media (min-width: 64em) {
  .workflow-table-page__header-item_d-padding_large {
    padding: 0 30px;
  }
}
.workflow-table-page__header-item_width_85 {
  width: 85px;
}
.workflow-table-page__header-item_full_height {
  height: 100%;
}
.workflow-table-page__header-item_padding_none {
  padding: 0;
}
.workflow-table-page__header-item_side-padding_10 {
  padding-left: 10px;
  padding-right: 10px;
}
.workflow-table-page__header-item_padding-left_none {
  padding-left: 0;
}
.workflow-table-page__header-item_margin-right_15 {
  margin-right: 15px;
}
.workflow-table-page__header-item_hover_dark:hover {
  background-color: #D7D7D7;
}

.workflow-table-page__header-notice {
  padding: 10px 10px;
  box-sizing: border-box;
  font-size: 14px;
  background-color: #F8F8F8;
  display: flex;
}
.workflow-table-page__header-notice:before {
  content: "";
  height: 18px;
  width: 18px;
  margin-right: 10px;
  background: url("/assets/images/icons/blue-bell.svg") center center no-repeat;
  background-size: 100% 100%;
}

.workflow-table-page__header-title {
  font-weight: 600;
}

.workflow-table-page__header-left {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
}
.workflow-table-page__header-left_min-width_285 {
  min-width: 285px;
}

.workflow-table-page__header-right {
  display: flex;
  align-items: center;
  height: 100%;
}
.workflow-table-page__header-right_padding-right_20 {
  padding-right: 20px;
}
.workflow-table-page__header-right_padding-right_40 {
  padding-right: 40px;
}

.workflow-table-page__filter-menu {
  width: 84px;
  height: 100%;
}

/**
 * 1. So as not to eat height from the header. A weird flex hack.
 */
.workflow-table-page__body {
  flex: 1;
  min-height: 0; /* 1 */
}
.workflow-table-page__body_has-horizontal-scroll {
  overflow: auto;
  background-color: #FFF;
}

.workflow-table-page__bulk-assign {
  text-transform: uppercase;
  color: #9B9B9B;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  cursor: default;
  height: 100%;
  padding: 0 10px;
}
.workflow-table-page__bulk-assign_is-clickable {
  color: #034FA8;
  cursor: pointer;
}
.workflow-table-page__bulk-assign_is-clickable:hover {
  background-color: #D7D7D7;
}

.workflow-table-page__reset {
  text-transform: uppercase;
  color: #034FA8;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  height: 100%;
  padding: 0 10px;
}
.workflow-table-page__reset:hover:not(.workflow-table-page__reset_is-disabled) {
  background-color: #D7D7D7;
}
.workflow-table-page__reset_is-disabled {
  cursor: default;
  color: #9B9B9B;
}

.workflow-table-page__subheader {
  height: 50px;
  display: flex;
  align-items: center;
}
.workflow-table-page__subheader_color_blue {
  background: #E6ECF4;
}

.workflow-table-page__note {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.workflow-table-page__note:before {
  content: "";
  background-image: url("/assets/images/themes/blue/icons/bell.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 26px;
  width: 26px;
  margin-right: 20px;
}

.workflow-table-page__refresh-container {
  width: 40px;
  height: 100%;
  margin-right: 10px;
}

.workflow-table-page_tasks .workflow-table-page__header {
  background: #FFF;
  border-bottom: solid 1px #C7D7D7;
}
.workflow-table-page_tasks .workflow-table-page__header-title {
  font-size: 20px;
  font-weight: normal;
}

.workflow-table-page__header-filter {
  height: 100%;
  display: flex;
  align-items: center;
}

.workflow-table-page__header-filter-title {
  color: #9B9B9B;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  flex-shrink: 0;
}

.workflow-table-page__header-filter-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.workflow-table-page__header-filter-item {
  margin: 3px 0 3px 15px;
}

.workflow-table-page__header-filter-helptip {
  margin-left: 5px;
}

@keyframes workflow-table-header--fade-in-background-green {
  from {
    background-color: #EAEAEA;
  }
  to {
    background-color: #B2DAE1;
  }
}
.x-note {
  border: 1px solid #034FA8;
  border-radius: 20px;
  padding: 22px;
  background-color: #DEE6F0;
  width: 100%;
  box-sizing: border-box;
}
.x-note_size_small {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
}
.x-note_has-margins {
  margin: 10px 0;
}

.x-note__title {
  margin-bottom: 13px;
  font-weight: bold;
}

.x-tag {
  padding: 3px 7px;
  background-color: #E7E7E7;
  text-transform: uppercase;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  border-radius: 3px;
  white-space: nowrap;
}

.benefit-member-card {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  font-size: 14px;
  box-sizing: border-box;
  padding: 7px 0;
  border: 1px solid #1297AC;
  background-color: #EFF4F5;
  padding-right: 5px;
}
.benefit-member-card:not(.benefit-member-card_is-loading):before {
  content: "";
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 10px 8px;
  background-image: url("/assets/images/icons/notification/check.svg");
  background-color: #0D7383;
  margin: 0 10px;
}
.benefit-member-card_is-not-found {
  border: 1px solid #D57F73;
  background-color: #F9EDEB;
}
.benefit-member-card_is-not-found:not(.benefit-member-card_is-loading):before {
  background-image: url("/assets/images/icons/notification/error.svg");
  background-color: #D57F73;
}
.benefit-member-card_margin-top_20 {
  margin-top: 20px;
}
.benefit-member-card_is-loading {
  padding-left: 10px;
  min-height: 40px;
}

.benefit-member-card__text {
  margin-right: 5px;
}

.choose-payment-method {
  display: block;
}

.choose-payment-method__title {
  padding-bottom: 20px;
}

.choose-payment-method__options {
  display: flex;
}
@media (max-width: 31.24em) {
  .choose-payment-method__options {
    flex-direction: column;
  }
}

/**
 * 1. Needed for smooth animation
 */
.choose-payment-method__option {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  padding: 25px 8px;
  border: solid 1px #F3F3F3;
  position: relative;
}
@media (min-width: 64em) {
  .choose-payment-method__option {
    height: 280px; /* 1 */
  }
}
@media (max-width: 31.24em) {
  .choose-payment-method__option {
    margin-bottom: 10px;
  }
  .choose-payment-method__option:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 31.25em) {
  .choose-payment-method__option {
    margin-right: 10px;
  }
  .choose-payment-method__option:last-child {
    margin-right: 0;
  }
}

.choose-payment-method__option-title {
  padding-bottom: 15px;
}

.choose-payment-method__option-text {
  font-size: 14px;
  flex: 1;
}

.choose-payment-method__breakdown {
  padding: 25px 0;
}

.choose-payment-method__action {
  display: flex;
  justify-content: center;
}

/**
 * 1. Needed for smooth animation between dialogs
 */
.choose-payment-method__disclaimer {
  position: relative;
  padding-left: 10px;
  margin-top: 15px;
}
@media (min-width: 48em) {
  .choose-payment-method__disclaimer {
    height: 50px; /* 1 */
  }
}
.choose-payment-method__disclaimer:before {
  position: absolute;
  left: 0;
  top: 2px;
  content: "*";
  font-size: 15px;
  color: #1297AC;
  font-family: "Montserrat", sans-serif;
}

.coverage-type {
  display: flex;
  align-items: center;
  height: 100%;
}

.coverage-type__icon {
  height: 11px;
  width: 11px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

.disclaimer-language-modal {
  background: #EFF4F5;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.disclaimer-language-modal__header {
  position: relative;
  height: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.disclaimer-language-modal__logo {
  height: 70px;
  width: 183px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.disclaimer-language-modal__logo-image {
  max-height: 100%;
  max-width: 100%;
}

.disclaimer-language-modal__title {
  color: var(--main-color-dark-5);
  font-size: 24px;
}
@media (max-width: 47.99em) {
  .disclaimer-language-modal__title {
    font-size: 18px;
  }
}

.disclaimer-language-modal__close {
  position: fixed;
  width: 45px;
  height: 45px;
  top: 20px;
  right: 5px;
  background: url("/assets/images/icons/x-sign-clear.svg") center center no-repeat;
  cursor: pointer;
  background-size: 14px 14px;
  border-radius: 5px;
  transition: top 1000ms ease, transform linear 200ms;
}
.disclaimer-language-modal__close:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: scale(1.1);
}

.disclaimer-language-modal__content {
  width: 100%;
  flex: 1;
  margin: 30px auto;
  padding: 20px;
  box-sizing: border-box;
  max-width: 684px;
  background-color: #FFF;
  z-index: 1;
}
@media (min-width: 64em) {
  .disclaimer-language-modal__content {
    margin-bottom: 50px;
  }
}
@media (min-width: 48em) {
  .disclaimer-language-modal__content {
    overflow: auto;
  }
}
@media (max-width: 47.99em) {
  .disclaimer-language-modal__content {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.disclaimer-language-modal__content-text {
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #5C5050;
}
.disclaimer-language-modal__content-text p {
  margin: 0 0 10px;
}
.disclaimer-language-modal__content-text a {
  color: #B0A7A8;
}
.disclaimer-language-modal__content-text a:hover {
  color: var(--main-color-dark);
}
.disclaimer-language-modal__content-text a:active {
  color: var(--main-color);
}

.disclaimer-language-modal__footer {
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.disclaimer-language-modal__floating-footer {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 0;
}

.disclaimer-language-modal__contact {
  margin-bottom: 30px;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--main-color);
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  text-decoration: underline;
}

.group-contact-form {
  padding-top: 35px;
}

.group-contact-form__section {
  margin-bottom: 20px;
}
.group-contact-form__section_margin_small {
  margin-bottom: 5px;
}

.group-contact-form__user-permissions-section {
  margin-bottom: 20px;
  padding: 0 5px;
}
@media (max-width: 63.99em) {
  .group-contact-form__user-permissions-section {
    padding: 0 25px;
  }
}

.group-contact-form__mismatch-fields {
  margin: 15px 5px 0 5px;
}
@media (max-width: 63.99em) {
  .group-contact-form__mismatch-fields {
    margin: 15px 25px 0 25px;
  }
}

.group-contact-form__title {
  display: flex;
  align-items: center;
}
@media (max-width: 63.99em) {
  .group-contact-form__title {
    padding: 0 20px;
  }
}

.group-contact-form__title-number {
  border-radius: 50%;
  background-color: #62A8AD;
  font-size: 18px;
  color: #FFF;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.group-contact-form__full-name {
  font-weight: bold;
}

.group-contact-form__title-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.manage-contacts {
  padding-top: 30px;
  max-width: 950px;
  margin: 0 auto;
}

@media (max-width: 63.99em) {
  .manage-contacts__types {
    padding: 0 20px;
  }
}

.manage-contacts__types-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.manage-contacts__types-description {
  font-size: 14px;
}

.manage-contacts__types-rules {
  padding: 15px 0;
  font-weight: 600;
  font-size: 14px;
}

.manage-contacts__types-rule-item {
  margin-bottom: 8px;
}

.manage-contacts__add-another-contact {
  margin-bottom: 50px;
}
@media (max-width: 63.99em) {
  .manage-contacts__add-another-contact {
    padding: 0 20px;
  }
}

.merp-statement-summary-box {
  width: 100%;
  height: 100%;
  background-color: #FFF;
  border: 1px solid var(--main-color-light-29);
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.merp-statement-summary-box_border-right_none {
  border-right: none;
}

.merp-statement-summary-box__value {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  color: var(--main-color);
}

.monthly-cost-holder {
  display: block;
}

.monthly-cost-holder__content {
  display: flex;
}

.monthly-cost-holder__amount_with_margin-left {
  margin-left: 20px;
}
@media (max-width: 47.99em) {
  .monthly-cost-holder__amount_with_margin-left {
    margin-left: 15px;
  }
}

.pay-bill-amount-breakdown {
  display: block;
}

.pay-bill-amount-breakdown__row {
  display: flex;
  align-items: center;
  padding: 3px;
  height: 30px;
  box-sizing: border-box;
  border-bottom: solid 1px #CBDADA;
}

.pay-bill-amount-breakdown__row-label {
  flex: 1;
}

.pay-bill-amount-breakdown__row-value {
  font-size: 14px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}

.pay-bill-amount-breakdown__row_is-total {
  border-bottom: none;
}
.pay-bill-amount-breakdown__row_is-total .pay-bill-amount-breakdown__row-value {
  font-size: 16px;
  font-weight: normal;
}

.pay-bill-amount-breakdown__asterisk {
  font-size: 13px;
}

.pay-bill-amount-breakdown_theme_green .pay-bill-amount-breakdown__row_is-total .pay-bill-amount-breakdown__row-value {
  color: #1297AC;
}
.pay-bill-amount-breakdown_theme_green .pay-bill-amount-breakdown__asterisk {
  color: #1297AC;
}
.pay-bill-amount-breakdown_theme_green .pay-bill-amount-breakdown__row-value_is-highlighted {
  color: #1297AC;
}

.pay-bill-amount-breakdown_theme_blue .pay-bill-amount-breakdown__row_is-total .pay-bill-amount-breakdown__row-value {
  color: #034FA8;
}
.pay-bill-amount-breakdown_theme_blue .pay-bill-amount-breakdown__asterisk {
  color: #034FA8;
}
.pay-bill-amount-breakdown_theme_blue .pay-bill-amount-breakdown__row-value_is-highlighted {
  color: #034FA8;
}

/**
 * 1. Liquid fire divs have overflow hidden which is
 * preventing the checkbox shadow from displaying properly.
 */
.pay-bill-card {
  display: block;
  padding-left: 3px; /* 1 */
}

.pay-bill-card__title {
  padding-bottom: 15px;
}

.pay-bill-card__section {
  margin-bottom: 25px;
}
.pay-bill-card__section:last-child {
  margin-bottom: 0;
}
.pay-bill-card__section_width_short {
  max-width: 430px;
}

.pay-bill-card__breakdown {
  background: #FFF;
  box-sizing: border-box;
  padding: 5px 10px;
  border: solid 1px #F3F3F3;
}

.pay-bill-card__card-collector {
  position: relative;
  height: 40px;
}
.pay-bill-card__card-collector .StripeElement {
  box-sizing: border-box;
  height: 40px;
  padding: 10px 12px;
  border: 1px dashed #CBDADA;
  background-color: #FFFFFF;
  transition: border-color 300ms ease;
}
.pay-bill-card__card-collector .StripeElement--focus {
  border: solid 1px var(--color-light-blue);
}
.pay-bill-card__card-collector .StripeElement--webkit-autofill {
  background-color: #FEFDE5 !important;
}

.pay-bill-card__check-icon {
  opacity: 0;
  width: 15px;
  height: 15px;
  background: url("/assets/images/icons/check.svg") center center no-repeat;
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 500ms ease;
}

.pay-bill-card__card-collector_state_error .StripeElement {
  border: 1px solid var(--color-red);
}

.pay-bill-card__card-collector_state_complete .pay-bill-card__check-icon {
  opacity: 1;
}

.pay-bill-card__label {
  display: inline-block;
  padding-bottom: 10px;
}

/**
 * 1. Needed for smooth animation.
 * 2. International modal doesn't have any liquid-fire entry animation so doesn't need a min-height.
 */
.pay-bill-card__fee-terms-checkbox {
  min-height: 100px; /* 1 */
}
.pay-bill-card__fee-terms-checkbox_is-international {
  min-height: 0; /* 2 */
}

.pay-bill {
  display: block;
}

.pay-bill__page {
  padding: 20px 25px;
}

/**
 * We hide the page content during transitions because they look awkward when the width is changing.
 * Content starts fading in once the width transition is complete.
 */
@media (min-width: 48em) {
  .pay-bill_animates .pay-bill__page {
    animation: pay-bill__fade-in 500ms linear;
  }
}

@keyframes pay-bill__fade-in {
  0%, 60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.payment-method-title {
  font-size: 18px;
  font-weight: 600;
}
.payment-method-title:before {
  content: "";
  display: inline-block;
  margin-right: 3px;
  background-repeat: no-repeat;
  background-position: left center;
}
.payment-method-title_icon_credit-card:before {
  width: 21px;
  height: 13px;
  background-image: url("/assets/images/themes/green/icons/credit-card.svg");
}
.payment-method-title_icon_ach:before {
  width: 23px;
  height: 13px;
  background-image: url("/assets/images/themes/green/icons/ach.svg");
}

.subscribers-table {
  display: block;
}

.subscribers-table__row {
  display: flex;
}
.subscribers-table__row_is-disabled {
  opacity: 0.7;
}

.subscribers-table__cell {
  flex: 1;
  border-right: solid 1px var(--color-light-blue);
  box-sizing: border-box;
  font-size: 13px;
  padding: 0 0 10px 15px;
}
.subscribers-table__cell:first-child {
  padding-left: 0;
}
.subscribers-table__cell:last-child {
  border-right: none;
}
.subscribers-table__cell_color_red {
  color: var(--color-red);
}
.subscribers-table__cell_is-name {
  flex: 1.5;
}
.subscribers-table__cell_is-relationship {
  min-width: 93px;
}
.subscribers-table__cell_is-pcp {
  flex: 1;
  display: flex;
  padding-right: 5px;
}

.subscribers-table__pcp-info-text {
  margin-right: 5px;
}

.subscribers-table__edit-btn {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  background: url("/assets/images/icons/edit.svg") center center no-repeat;
  background-size: 9px 9px;
  cursor: pointer;
  margin-left: auto;
}
.subscribers-table__edit-btn:hover {
  background-image: url("/assets/images/icons/edit-dark-green.svg");
}

.subscriber-section {
  font-size: 14px;
}
.subscriber-section_is-disabled {
  opacity: 0.7;
}

.subscriber-section__relationship {
  padding-left: 23px;
  margin-bottom: 15px;
}
.subscriber-section__relationship_padding-left_0 {
  padding-left: 0;
}

.subscriber-section__pcp-dates {
  display: flex;
}

.subscriber-section__pcp {
  flex: 1;
  border-right: solid 1px var(--color-light-blue);
  padding-bottom: 10px;
  padding-right: 5px;
}

.subscriber-section__pcp-edit {
  margin-left: 10px;
  transform: translateY(-2px);
}

.subscribers-table__dates {
  margin-left: 10px;
  padding-bottom: 10px;
  flex: 1;
}

.subscriber-section__label {
  margin-bottom: 5px;
}

.subscriber-section__label-container {
  display: flex;
}

.subscriber-section_is-compact {
  display: flex;
}
.subscriber-section_is-compact .subscriber-section__name-holder {
  flex: 1;
}
.subscriber-section_is-compact .subscriber-section__pcp-dates {
  flex: 1;
}

.drag-handle-icon {
  display: flex;
  align-items: center;
}
.drag-handle-icon::before {
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 12px;
  background-image: url("/assets/images/icons/drag-handle.svg");
}

.agencies-brokers-table__row {
  display: flex;
  flex-direction: column;
  min-height: 140px;
  min-width: 300px;
  box-sizing: border-box;
  border-bottom: 1px solid #DBDBDB;
  background-color: #FFFFFF;
}
.agencies-brokers-table__row_border-bottom_none {
  border-bottom: none;
}
@media (max-width: 81.24em) {
  .agencies-brokers-table__row {
    min-height: 200px;
  }
}
@media (max-width: 47.99em) {
  .agencies-brokers-table__row {
    min-height: 310px;
  }
}
.agencies-brokers-table__row_has-larger-min-height {
  min-height: 200px;
}
@media (max-width: 81.24em) {
  .agencies-brokers-table__row_has-larger-min-height {
    min-height: 310px;
  }
}
@media (max-width: 47.99em) {
  .agencies-brokers-table__row_has-larger-min-height {
    min-height: 480px;
  }
}

.agencies-brokers-table__content {
  padding: 18px 22px;
  flex: 1;
}

.agencies-brokers-table__mobile-actions {
  display: flex;
  height: 50px;
}

.agencies-brokers-table__row-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-row-gap: 20px;
  grid-column-gap: 15px;
}
@media (max-width: 81.24em) {
  .agencies-brokers-table__row-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
  }
}
@media (max-width: 47.99em) {
  .agencies-brokers-table__row-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(7, auto);
  }
}
.agencies-brokers-table__row-grid_is-agency {
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(1, auto);
}
@media (max-width: 81.24em) {
  .agencies-brokers-table__row-grid_is-agency {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
  }
}
@media (max-width: 47.99em) {
  .agencies-brokers-table__row-grid_is-agency {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
  }
}

@media (min-width: 81.25em) {
  .agencies-brokers-table__row-grid-field_is-bottom-field {
    grid-row-start: 2;
  }
}
.agencies-brokers-table__row-grid-field_grid-column_span-2 {
  grid-column: span 2;
}
@media (max-width: 47.99em) {
  .agencies-brokers-table__row-grid-field_grid-column-until-tablet_span-2 {
    grid-column: span 2;
  }
}
@media (max-width: 81.24em) {
  .agencies-brokers-table__row-grid-field_order-until-desktop-plus_1 {
    order: 1;
  }
}
.agencies-brokers-table__row-grid-field_is-pair-container {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15px;
}

.agencies-brokers-table__row-header {
  display: flex;
  width: 100%;
  margin-bottom: 25px;
}

.agencies-brokers-table__row-title {
  display: flex;
  align-items: center;
}

.agencies-brokers-table__row-name {
  margin-right: 15px;
  font-weight: bold;
  color: #494949;
  /* One-line ellipsis*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 47.99em) {
  .agencies-brokers-table__row-name {
    max-width: 500px;
  }
}
@media (max-width: 31.24em) {
  .agencies-brokers-table__row-name {
    max-width: 200px;
  }
}

.agencies-brokers-table__row-actions {
  display: flex;
  width: 280px;
  margin-left: auto;
}
@media (max-width: 47.99em) {
  .agencies-brokers-table__row-actions {
    width: auto;
  }
}

.agencies-brokers-table__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 110px 20px 90px;
  background-color: #FFFFFF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.agencies-brokers-table__empty-text {
  text-align: center;
  font-size: 25px;
  color: #1297AC;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.agencies-brokers-table__empty-text_icon_suit-man:before {
  content: "";
  width: 20px;
  height: 30px;
  margin-bottom: 15px;
  background: url("/assets/images/themes/green/icons/suit-man.svg") center center no-repeat;
  background-size: 20px 30px;
}
.agencies-brokers-table__empty-text_icon_agencies:before {
  content: "";
  width: 31px;
  height: 35px;
  margin-bottom: 10px;
  background: url("/assets/images/themes/green/icons/agencies.svg") center center no-repeat;
  background-size: 31px 35px;
}

.agency-smart-input-option {
  width: 100%;
  height: 265px;
  box-sizing: border-box;
  background-color: #FFF;
  border-bottom: 1px solid #DADADA;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  color: #5C5050;
}
.agency-smart-input-option:not(.agency-smart-input-option_is-loading) {
  cursor: pointer;
}
.agency-smart-input-option:not(.agency-smart-input-option_is-loading):hover {
  background-color: rgba(19, 151, 172, 0.07);
}
.agency-smart-input-option:not(.agency-smart-input-option_is-loading):active, .agency-smart-input-option:not(.agency-smart-input-option_is-loading).agency-smart-input-option_is-active {
  background-color: rgb(244, 245, 247);
}
.agency-smart-input-option_height-medium {
  height: 250px;
}
.agency-smart-input-option_height-small {
  height: 195px;
}
.agency-smart-input-option_height_175 {
  height: 175px;
}

.agency-smart-input-option__name {
  font-weight: bold;
  font-size: 16px;
}

.animation-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  animation: animation-modal_background_green 1.5s ease forwards;
}
.animation-modal_no-animation {
  animation: none;
  background-color: #DCEDF0;
}
.animation-modal_no-animation .animation-modal__bottom-section {
  transition: none;
}

.animation-modal__bottom-section {
  transform: translate(-8px, 135px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all ease-in 500ms;
  opacity: 1;
}
.animation-modal__bottom-section_is-hidden {
  opacity: 0;
}

.animation-modal__message {
  color: #1297AC;
  font-size: 30px;
  margin-bottom: 120px;
  text-align: center;
}

.animation-modal__button {
  border: none;
  color: #5E5E5E;
  background: transparent;
  font-size: 20px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}
.animation-modal__button:hover {
  text-decoration: underline;
}

@media (max-width: 53.74em) {
  .animation-modal__bottom-section {
    transform: translate(0, 135px);
  }
}
@keyframes animation-modal_background_green {
  100% {
    background-color: #DCEDF0;
  }
}
:root {
  --delay: 0ms ;
}

.animation-container {
  width: 100%;
  height: 100%;
  position: absolute;
}

.animation-container_type_you-rock {
  transform: translateY(-30px);
  height: 75%;
}
.animation-container_type_you-rock * {
  opacity: 0;
  animation: animation-container_type_you-rock var(--delay) ease forwards;
}

@keyframes animation-container_type_you-rock {
  100% {
    opacity: 1;
  }
}
.assign-plans-bill-employer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-bottom: solid 1px var(--color-light-grey-5);
  height: 28px;
  width: 100%;
  margin-top: 3px;
}

.association-card {
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 5px;
}
.association-card_margin-top_20 {
  margin-top: 20px;
}
.association-card_border-radius_0 {
  border-radius: 0;
}
.association-card_has-borders {
  border: solid 1px rgba(199, 215, 215, 0.43);
}
.association-card_border-top_light-grey {
  border-top: solid 1px #DBDBDB;
}
.association-card_border-top_dark-grey {
  border-top: solid 1px #B1B1B1;
}
@media (max-width: 47.99em) {
  .association-card {
    padding: 20px 10px;
  }
}

.association-card__actions-and-status {
  display: flex;
  align-items: center;
  margin-left: auto;
  height: 100%;
}
.association-card__actions-and-status_width_312 {
  width: 312px;
}
.association-card__actions-and-status_justify-content_flex-end {
  justify-content: flex-end;
}
.association-card__actions-and-status_justify-content_space-between {
  justify-content: space-between;
}

.association-card__mobile-actions {
  height: 50px;
  display: flex;
}

.association-card__linkage-type-section {
  background-color: #F7F7F7;
  border: solid 1px rgba(199, 215, 215, 0.43);
  padding: 13px 10px;
}
.association-card__linkage-type-section_margin-top_10 {
  margin-top: 10px;
}

.association-card__linkage-type-section-header {
  display: flex;
  justify-content: space-between;
}

.association-card__linkage-type-section-row {
  padding-top: 15px;
}
.association-card__linkage-type-section-row_padding-bottom_15 {
  padding-bottom: 15px;
}
.association-card__linkage-type-section-row_has-border-bottom {
  border-bottom: 1px solid #DBDBDB;
}

.association-card__membership-section {
  margin-top: 20px;
}

.association-card__membership-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #5C5050;
}

.association-card__membership-section-row {
  padding-top: 15px;
}
.association-card__membership-section-row_padding-bottom_15 {
  padding-bottom: 15px;
}
.association-card__membership-section-row_has-border-bottom {
  border-bottom: 1px solid #DBDBDB;
}

.association-form {
  overflow: auto;
  height: 100%;
}

.association-form__content {
  padding: 15px 40px;
  max-width: 990px;
  margin: 0 auto;
}
@media (max-width: 63.99em) {
  .association-form__content {
    max-width: 748px;
    padding: 10px;
  }
}
@media (max-width: 47.99em) {
  .association-form__content {
    max-width: none;
    padding: 0;
  }
}

.association-form__required-field-container {
  margin-bottom: 15px;
}
@media (max-width: 47.99em) {
  .association-form__required-field-container {
    margin: 10px;
  }
}

.association-form__form-container {
  padding: 20px 18px;
  border: solid 1px #C7D7D7;
  background-color: #FFF;
  margin-bottom: 40px;
}
@media (max-width: 63.99em) {
  .association-form__form-container {
    padding: 18px 10px;
  }
}
@media (max-width: 47.99em) {
  .association-form__form-container {
    padding: 13px 10px;
    margin-top: 30px;
    border-left: none;
    border-right: none;
  }
}

.association-form__add-another-linkage-type {
  margin-top: 14px;
}
@media (max-width: 47.99em) {
  .association-form__add-another-linkage-type {
    margin-top: 19px;
    margin-bottom: 4px;
  }
}

.association-form__linkage-periods {
  padding: 15px 10px;
  background-color: #F7F7F7;
  margin-top: 10px;
  border: solid 1px #C7D7D7;
}

.association-form__linkage-periods-title {
  color: #494949;
  font-size: 16px;
  font-weight: bold;
}

.association-form__linkages-by-type {
  border-bottom: 1px solid #DBDBDB;
}

.association-form__linkages-by-type-header {
  display: flex;
  align-items: center;
  margin: 16px 0;
}
@media (max-width: 47.99em) {
  .association-form__linkages-by-type-header {
    flex-direction: column-reverse;
  }
}

.association-form__linkage-type-field {
  width: 372px;
}
@media (max-width: 63.99em) {
  .association-form__linkage-type-field {
    width: 50%;
  }
}
@media (max-width: 47.99em) {
  .association-form__linkage-type-field {
    width: 100%;
  }
}

.association-form__remove-linkage-type {
  margin-left: 19px;
}
@media (max-width: 47.99em) {
  .association-form__remove-linkage-type {
    align-self: flex-end;
    margin-bottom: 16px;
  }
}

.association-form__stop-date-notice {
  font-size: 14px;
  color: #4A4A4A;
  margin-bottom: 12px;
}

.association-form__linkage-period {
  margin-bottom: 10px;
}
@media (max-width: 63.99em) {
  .association-form__linkage-period {
    margin-bottom: 18px;
  }
}

.association-form__linkage-period-index {
  font-weight: 600;
}

.association-form__disabled-linkage-stop-date {
  font-size: 13px;
  font-style: italic;
  color: #9B9B9B;
  height: 32px;
  line-height: 16px;
  margin-top: 2px;
}

.association-form__add-another-period {
  margin-bottom: 12px;
}
@media (max-width: 63.99em) {
  .association-form__add-another-period {
    margin-bottom: 16px;
  }
}

.association-form__membership-information {
  margin-top: 24px;
}

.association-form__membership-information-title {
  color: #494949;
  font-size: 16px;
  font-weight: 600;
}

.association-form__membership-information-rows {
  margin-top: 17px;
}

.association-form__membership-information-row {
  margin-bottom: 20px;
}
.association-form__membership-information-row:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 1px solid #DBDBDB;
}

.association-smart-input-option {
  width: 100%;
  height: 70px;
  padding: 15px 20px;
  box-sizing: border-box;
  font-size: 14px;
  color: #5C5050;
  background-color: #FFF;
  box-shadow: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #DADADA;
  cursor: pointer;
}
.association-smart-input-option:hover {
  background-color: rgba(19, 151, 172, 0.07);
}
.association-smart-input-option:active, .association-smart-input-option.association-smart-input-option_is-active {
  background-color: rgb(244, 245, 247);
}

.association-smart-input-option__name {
  font-weight: 700;
  margin-bottom: 5px;
}

.associations-page {
  padding: 0 20px 20px 20px;
}
@media (max-width: 63.99em) {
  .associations-page {
    padding: 0;
  }
}
.associations-page_padding_0 {
  padding: 0;
}

.associations-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 110px 20px 90px;
  background-color: #FFFFFF;
  border-top: solid 1px rgba(199, 215, 215, 0.43);
  border-bottom: solid 1px rgba(199, 215, 215, 0.43);
}

.associations-page__empty-icon {
  width: 34px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/assets/images/themes/green/icons/associations.svg");
  margin-bottom: 15px;
}

.associations-page__empty-title {
  text-align: center;
  font-size: 25px;
  color: #1297AC;
}

.benefits-linking-rules {
  padding-bottom: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.benefits-linking-rules__cards-container {
  display: flex;
  flex-direction: column;
  width: 65%;
  margin-bottom: 20px;
  box-sizing: border-box;
}
@media (max-width: 81.24em) {
  .benefits-linking-rules__cards-container {
    width: 100%;
    padding: 0 20px;
  }
}
@media (max-width: 47.99em) {
  .benefits-linking-rules__cards-container {
    padding: 0;
  }
}

.benefits-linking-rules__card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: #FFFFFF;
  border: 1px solid #C8D8D8;
  font-size: 14px;
}

.benefits-linking-rules__card-header {
  display: flex;
  margin-bottom: 10px;
}

.benefits-linking-rules__card-title {
  color: #4A4A4A;
  margin-right: auto;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-transform: uppercase;
}

.benefits-linking-rules__card-section {
  display: flex;
}
@media (max-width: 47.99em) {
  .benefits-linking-rules__card-section {
    flex-direction: column;
  }
}

.benefits-linking-rules__card-section-description {
  width: 350px;
  margin-right: 15px;
  color: #5E5E5E;
  font-style: italic;
}
@media (max-width: 47.99em) {
  .benefits-linking-rules__card-section-description {
    margin-bottom: 20px;
  }
}

.benefits-linking-rules__card-section-last-updated {
  color: #5E5E5E;
  font-style: italic;
}

.benefits-linking-rules__card-section-list {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.benefits-linking-rules__card-section-row {
  display: flex;
  align-items: center;
  flex: 1;
  margin-bottom: 15px;
}
@media (max-width: 47.99em) {
  .benefits-linking-rules__card-section-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .benefits-linking-rules__card-section-row:not(.benefits-linking-rules__card-section-row_margin-bottom_15) {
    margin-bottom: 40px;
  }
}
.benefits-linking-rules__card-section-row_margin-bottom_15 {
  margin-bottom: 15px;
}

.benefits-linking-rules__card-section-separator {
  height: 1px;
  width: 100%;
  margin-bottom: 15px;
  background-color: #C8D8D8;
}
.benefits-linking-rules__card-section-separator_margin-top_5 {
  margin-top: 5px;
}

.benefits-linking-rules__row-benefit {
  display: flex;
  flex: 1;
  margin-right: 20px;
}
@media (max-width: 47.99em) {
  .benefits-linking-rules__row-benefit {
    margin-bottom: 10px;
  }
}

.benefits-linking-rules__row-benefit-logo {
  width: 60px;
  margin-right: 10px;
}

.benefits-linking-rules__row-benefit-title {
  display: flex;
  flex-direction: column;
}

.benefits-linking-rules__row-benefit-name {
  color: #1297AC;
  font-weight: 700;
}

.benefits-linking-rules__row-benefit-description {
  color: #5E5E5E;
}

.benefits-linking-rules__row-info {
  display: flex;
  align-items: center;
  font-size: 13px;
  flex: 1;
}
@media (max-width: 47.99em) {
  .benefits-linking-rules__row-info {
    width: 70%;
  }
}

.benefits-linking-rules__row-type {
  display: flex;
  align-items: center;
  flex: 1;
  font-weight: 700;
  margin-right: 20px;
}
@media (max-width: 47.99em) {
  .benefits-linking-rules__row-type {
    flex: 2;
  }
}

.benefits-linking-rules__row-type-icon {
  height: 11px;
  width: 11px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: center;
}

.benefits-linking-rules__row-id {
  color: #4A4A4A;
  flex: 1;
}

.benefits-linking-rules__type-card-list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 15px;
  margin-bottom: 10px;
}
@media (max-width: 47.99em) {
  .benefits-linking-rules__type-card-list {
    margin-bottom: 20px;
  }
}

.benefits-linking-rules__type-card {
  width: 78px;
  height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 3px;
  border: 1px solid #999899;
  background: #FFFFFF;
}

.benefits-linking-rules__type-card-icon {
  height: 20px;
  width: 20px;
  margin: 20px 0 15px 0;
  background-repeat: no-repeat;
  background-position: center;
}

.benefits-linking-rules__type-card-name {
  color: #4A4A4A;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
}

.benefits-linking-rules__applicable-classes {
  display: flex;
}
@media (max-width: 47.99em) {
  .benefits-linking-rules__applicable-classes:not(.benefits-linking-rules__applicable-classes_flex-direction_row) {
    flex-direction: column;
  }
}
.benefits-linking-rules__applicable-classes_flex-direction_row {
  flex-direction: row;
}

.benefits-linking-rules__applicable-classes-description {
  width: 350px;
  margin-right: 10px;
  color: #5E5E5E;
}
@media (max-width: 47.99em) {
  .benefits-linking-rules__applicable-classes-description {
    width: auto;
    margin-bottom: 10px;
  }
}
.benefits-linking-rules__applicable-classes-description_margin-bottom_0 {
  margin-bottom: 0;
}

.benefits-linking-rules__applicable-classes-list {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.benefits-linking-rules__applicable-classes-item {
  flex: 1;
  margin-bottom: 10px;
}
.benefits-linking-rules__applicable-classes-item_margin-bottom_5 {
  margin-bottom: 5px;
}

.benefits-linking-rules__empty {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  background-color: #FFFFFF;
  min-height: 250px;
}
@media (min-width: 40.625em) {
  .benefits-linking-rules__empty_min-width_850 {
    min-width: 850px;
  }
}

.benefits-linking-rules__empty-icon {
  width: 48px;
  height: 45px;
  background: url("/assets/images/icons/coverage-linking-rules.svg") center center no-repeat;
  background-size: 100% 100%;
  margin-bottom: 20px;
}

.benefits-linking-rules__empty-icon-type-search {
  width: 48px;
  height: 45px;
  background: url("/assets/images/icons/search.svg") center center no-repeat;
  background-size: 100% 100%;
  margin-bottom: 20px;
}

.benefits-linking-rules__empty-title {
  font-size: 25px;
  text-align: center;
  color: #1297AC;
  margin-bottom: 10px;
}

.benefits-linking-rules__empty-text {
  font-size: 16px;
  color: #494949;
  text-align: center;
  margin-bottom: 25px;
}

.benefits-linking-rules-select-types-step {
  padding: 20px;
}

.benefits-linking-rules-select-types-step__title {
  color: #5E5E5E;
  font-weight: 600;
}

.benefits-linking-rules-select-types-step__text {
  color: #5E5E5E;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.benefits-linking-rules-select-types-step__type-list {
  margin-top: 10px;
}

.benefit-plan-option {
  border: 1px solid #D2DFDF;
  background-color: #FFF;
  margin-top: 12px;
}

.benefit-plan-option__row:not(:first-child) .benefit-plan-option__row-info::before {
  content: "";
  width: 23px;
  height: 10px;
}
.benefit-plan-option__row:not(:last-child) .benefit-plan-option__row-grid_has-bottom-border {
  border-bottom: 1px solid var(--color-light-blue);
}

.benefit-plan-option__row-info {
  margin: 0 15px 0 10px;
  display: flex;
  align-items: center;
}

.benefit-plan-option__row-grid {
  display: flex;
  width: 100%;
}

.benefit-step-per-type {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.benefit-step-per-type__old-table-wrapper {
  position: sticky;
  top: 0;
  z-index: 2;
}

.benefit-step-per-type__old-table-header-row {
  font-size: 18px;
  font-weight: 600;
  padding-left: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #EAEAEA;
  display: flex;
}

.benefit-step-per-type__old-table-button {
  margin-right: 33px;
}

.benefit-step-per-type__old-table-title {
  flex: 1;
}

.benefit-step-per-type__empty-table {
  background-color: #FFF;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-step-per-type__empty-table-text {
  color: #1297AC;
  font-size: 18px;
  text-align: center;
}

.benefit-step-per-type__select-table-title {
  font-size: 18px;
  font-weight: 600;
  margin-left: 20px;
  margin-top: 25px;
  margin-bottom: 15px;
}

.benefit-step-per-type__select-table {
  flex: 1;
  z-index: 1;
  height: 100%;
}

.benefit-step-per-type__old-table {
  overflow-y: auto;
  max-height: 40vh;
}

.benefits-setup-step {
  overflow: auto;
  height: 100%;
}

.benefits-setup-step__required-field-container {
  margin-bottom: 15px;
}

.benefits-setup-step__top-content {
  padding: 15px 40px 40px;
  max-width: 1200px;
}
@media (max-width: 63.99em) {
  .benefits-setup-step__top-content {
    padding: 15px 20px;
  }
}

.benefits-setup-step__products-title {
  font-weight: 600;
  font-size: 18px;
  display: flex;
}

.benefits-setup-step__product-list {
  margin-top: 5px;
}

.benefits-setup-step__title-error {
  font-weight: 400;
  font-size: 14px;
}

.benefits-setup-step__waiver-container {
  margin-top: 15px;
  margin-bottom: 25px;
  width: 50%;
}

.benefits-setup-step__benefits-table {
  margin-bottom: 100px;
  min-height: 400px;
}

.benefits-setup-step__benefits-table-title {
  padding-left: 40px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}
@media (max-width: 63.99em) {
  .benefits-setup-step__benefits-table-title {
    margin-top: 10px;
    padding-left: 20px;
  }
}

.benefits-step-header {
  display: block;
}

.benefits-step-header__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 71.875em) {
  .benefits-step-header__container {
    flex-direction: row;
    align-items: baseline;
  }
}

.benefits-step-header__title {
  display: flex;
  align-items: baseline;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
}
@media (min-width: 71.875em) {
  .benefits-step-header__title {
    padding-right: 10px;
  }
}
@media (max-width: 71.865em) {
  .benefits-step-header__title {
    margin-bottom: 5px;
  }
}

.benefits-step-header__title-text {
  font-family: "Montserrat", sans-serif;
}

.benefits-step-header__selected-count {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  padding-left: 3px;
}

.benefits-waiting-period-rules-table {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.benefits-waiting-period-rules-table::after {
  content: "";
  height: 50px;
  display: block;
}

.benefits-waiting-period-rules-table__header-container {
  top: 0;
  position: sticky;
  z-index: 3;
  flex-shrink: 0;
  background-color: #F8F8F8;
}

.benefits-waiting-period-rules-table__header {
  display: flex;
  padding: 15px 20px 13px 20px;
  background-color: #F8F8F8;
  border-bottom: solid thin #DADADA;
}
@media (max-width: 93.74em) {
  .benefits-waiting-period-rules-table__header {
    display: none;
  }
}
.benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__header {
  padding-right: 0;
}

.benefits-waiting-period-rules-table__header-plan-cell {
  display: flex;
  align-items: center;
  min-width: 300px;
  margin-right: 50px;
}
.benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__header-plan-cell {
  margin-right: 62px;
}

.benefits-waiting-period-rules-table__header-grid {
  display: grid;
  align-items: center;
  width: 100%;
  grid-template-columns: 2fr 2fr 2fr 1fr 1fr 1fr 35px;
  grid-column-gap: 12px;
  padding-left: 17px;
}
.benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__header-grid {
  grid-column-gap: 0;
  padding-left: 0;
}

.benefits-waiting-period-rules-table__header-text {
  color: #979797;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}
.benefits-waiting-period-rules-table__header-text_margin-right_5 {
  margin-right: 5px;
}
.benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__header-text {
  margin-left: 8px;
}

.benefits-waiting-period-rules-table__header-helptip-container {
  display: flex;
  align-items: center;
}

.benefits-waiting-period-rules-table__row-header {
  display: flex;
  align-items: center;
  padding: 8px 20px 7px;
  background-color: #EAEAEA;
  box-sizing: border-box;
  position: sticky;
  top: 44px;
  z-index: 4;
}
@media (max-width: 93.74em) {
  .benefits-waiting-period-rules-table__row-header {
    top: 0;
  }
}

.benefits-waiting-period-rules-table__row-header-title {
  font-weight: 700;
  font-size: 14px;
}

.benefits-waiting-period-rules-table__row-header-icon {
  width: 14px;
  height: 14px;
  margin-right: 7px;
  background-position: center center;
  background-repeat: no-repeat;
}

.benefits-waiting-period-rules-table__row {
  display: flex;
  padding: 7px 20px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #EAEAEA;
  min-height: 22px;
}
@media (max-width: 93.74em) {
  .benefits-waiting-period-rules-table__row {
    flex-direction: column;
    padding: 20px;
  }
}
@media (min-width: 93.75em) {
  .benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__row {
    padding: 0;
  }
}

.benefits-waiting-period-rules-table__benefit-card {
  display: flex;
  align-items: center;
  height: -moz-fit-content;
  height: fit-content;
  min-width: 300px;
  margin-right: 50px;
}
@media (max-width: 93.74em) {
  .benefits-waiting-period-rules-table__benefit-card {
    margin: 0 0 10px 0;
  }
}
@media (max-width: 47.99em) {
  .benefits-waiting-period-rules-table__benefit-card {
    min-width: 250px;
  }
}
.benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__benefit-card {
  padding: 7px 20px;
}
@media (max-width: 93.74em) {
  .benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__benefit-card {
    padding: 0 0 0 10px;
  }
}

.benefits-waiting-period-rules-table__benefit-info {
  display: flex;
  flex-direction: column;
  margin-right: auto;
}

.benefits-waiting-period-rules-table__benefit-name {
  color: #494949;
  font-size: 14px;
}
@media (max-width: 93.74em) {
  .benefits-waiting-period-rules-table__benefit-name {
    font-weight: 700;
  }
}

.benefits-waiting-period-rules-table__benefit-description {
  color: #979797;
  font-size: 14px;
}

.benefits-waiting-period-rules-table__rule-rows-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media (min-width: 93.75em) {
  .benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__rule-rows-container {
    border-left: 1px solid #F8F8F8;
  }
}

.benefits-waiting-period-rules-table__rule-row {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 1fr 1fr 1fr 35px;
  grid-column-gap: 12px;
  padding: 12px 0 7px 17px;
}
@media (max-width: 93.74em) {
  .benefits-waiting-period-rules-table__rule-row {
    grid-template-columns: repeat(3, 6fr) 22px;
    grid-template-rows: repeat(2, auto);
    grid-row-gap: 30px;
    padding: 20px 0;
  }
}
@media (max-width: 47.99em) {
  .benefits-waiting-period-rules-table__rule-row {
    grid-template-columns: repeat(2, 1fr) 22px;
    grid-template-rows: repeat(5, auto);
    grid-row-gap: 30px;
  }
}
.benefits-waiting-period-rules-table__rule-row_has-border-bottom {
  border-bottom: 1px solid #EAEAEA;
}
.benefits-waiting-period-rules-table__rule-row_padding-top-bottom_0 {
  padding-top: 0;
  padding-bottom: 0;
}
@media (min-width: 93.75em) {
  .benefits-waiting-period-rules-table__rule-row_padding-top-from-1500_0 {
    padding-top: 0;
  }
}
.benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__rule-row {
  background-color: #F8F8F8;
  gap: 1px;
  padding: 0;
}
@media (max-width: 93.74em) {
  .benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__rule-row {
    background-color: #FFFFFF;
    gap: 10px;
  }
}
@media (max-width: 47.99em) {
  .benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__rule-row {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-row-gap: 30px;
  }
}
@media (max-width: 93.74em) {
  .benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__rule-row_has-border-bottom {
    padding-bottom: 20px;
  }
}

.benefits-waiting-period-rules-table__rule-row-item {
  min-width: 0;
}
@media (min-width: 93.75em) {
  .benefits-waiting-period-rules-table__rule-row-item {
    margin-top: 5px;
  }
}
@media (max-width: 47.99em) {
  .benefits-waiting-period-rules-table__rule-row-item_grid-column-until-tablet_span-2 {
    grid-column: span 2;
  }
}

.benefits-waiting-period-rules-table__rule-row-actions {
  display: flex;
  justify-content: center;
}
@media (max-width: 93.74em) {
  .benefits-waiting-period-rules-table__rule-row-actions {
    grid-column: 4/5;
    grid-row: 1/3;
    margin-bottom: auto;
  }
}
@media (max-width: 47.99em) {
  .benefits-waiting-period-rules-table__rule-row-actions {
    grid-column: 3/4;
    grid-row: 1/5;
    margin-bottom: auto;
  }
}
.benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__rule-row-actions {
  justify-content: flex-start;
  margin-left: 5px;
}
@media (max-width: 93.74em) {
  .benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__rule-row-actions {
    padding: 10px 10px 0 0;
  }
}
@media (max-width: 47.99em) {
  .benefits-waiting-period-rules-table_is-editing .benefits-waiting-period-rules-table__rule-row-actions {
    justify-content: flex-end;
  }
}

.benefits-waiting-period-rules-table__grey-tag-container {
  display: flex;
  flex-wrap: wrap;
  padding-right: 20px;
  gap: 5px;
  font-size: 14px;
}

.benefits-waiting-period-rules-table__no-rules-container {
  width: 100%;
  display: flex;
  padding-left: 17px;
}
@media (max-width: 93.74em) {
  .benefits-waiting-period-rules-table__no-rules-container {
    padding: 20px 0 0 0;
  }
}

.benefits-waiting-period-rules-table__no-rules-text {
  display: flex;
  align-items: center;
  color: #979797;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  margin-right: auto;
}

.broker-agency-card {
  background-color: #FFF;
  border: 1px solid #D2DFDF;
  padding: 15px 20px;
}
.broker-agency-card_background-color_transparent {
  background-color: transparent;
}
.broker-agency-card_border_none {
  border: none;
}
.broker-agency-card_padding-top_0 {
  padding-top: 0;
}
.broker-agency-card_padding_10 {
  padding: 10px;
}

.broker-agency-card__remove {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.broker-agency-card__section {
  margin-bottom: 10px;
  font-size: 14px;
}
.broker-agency-card__section_type_info {
  background-color: #F7F7F7;
  border: 1px solid rgba(199, 215, 215, 0.43);
}
.broker-agency-card__section_margin-top_20 {
  margin-top: 20px;
}
.broker-agency-card__section_side-padding_10 {
  padding-left: 10px;
  padding-right: 10px;
}

.broker-agency-card__smart-input {
  width: 100%;
  height: 265px;
  box-sizing: border-box;
  background-color: #FFF;
  border-bottom: 1px solid #DADADA;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  color: #5C5050;
}
.broker-agency-card__smart-input:not(.broker-agency-card__smart-input_is-loading) {
  cursor: pointer;
}
.broker-agency-card__smart-input:not(.broker-agency-card__smart-input_is-loading):hover {
  background-color: rgba(19, 151, 172, 0.07);
}
.broker-agency-card__smart-input:not(.broker-agency-card__smart-input_is-loading):active, .broker-agency-card__smart-input:not(.broker-agency-card__smart-input_is-loading).broker-agency-card__smart-input_is-active {
  background-color: rgb(244, 245, 247);
}
.broker-agency-card__smart-input_height-medium {
  height: 250px;
}
.broker-agency-card__smart-input_height-small {
  height: 195px;
}
.broker-agency-card__smart-input_height_175 {
  height: 175px;
}

.broker-agency-card__smart-input-name {
  font-weight: bold;
  font-size: 16px;
}

.broker-agency-card__smart-input-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100px;
  padding: 15px 0;
}

.broker-agency-card__smart-input-empty-text {
  font-size: 20px;
  color: #1297AC;
  margin-bottom: 15px;
}

.cobra-period-table {
  border: 1px solid #EAEAEA;
}

.cobra-period-table__header {
  padding: 0 10px;
  background-color: #E7E7E7;
  overflow: hidden;
}

.cobra-period-table__body {
  padding: 0 10px;
  background-color: #F7F7F7;
  overflow: hidden;
}
.cobra-period-table__body:not(:last-child) {
  border-bottom: 1px solid #DBDBDB;
}

.commissions {
  padding: 15px 50px 70px;
}
@media (max-width: 63.99em) {
  .commissions {
    padding: 20px;
  }
}
.commissions_is-loading {
  padding-top: 60px;
}

.commissions__required-field-container {
  margin-bottom: 20px;
}

.commissions__header {
  margin-bottom: 20px;
}

.commissions__header-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.commissions__table {
  border: 1px solid #D2DFDF;
}
@media (min-width: 64em) {
  .commissions__table {
    max-width: 1200px;
  }
}

.commissions__table-header {
  height: 45px;
  background-color: rgba(234, 234, 235, 0.5);
  border-bottom: 1px solid #D2DFDF;
  padding-left: 20px;
  display: flex;
  align-items: center;
}

.commissions__table-row {
  background-color: #FFF;
  border-bottom: 1px solid #D2DFDF;
  font-size: 14px;
  padding: 20px 0;
}
.commissions__table-row:last-child {
  border-bottom: none;
}
.commissions__table-row_is-loading {
  height: 130px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.commissions__table-header-icon {
  height: 14px;
  width: 14px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

.commissions__table-header-title {
  font-weight: 600;
  font-size: 16px;
}

.commissions__name-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.commissions__name-container_is-disabled {
  color: #CCCCCC;
}
.commissions__name-container_is-disabled .commissions__name-label {
  color: #CCCCCC;
}

.commissions__name-label {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  color: #9B9B9B;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.commissions__broker-name {
  font-weight: bold;
}

.commissions__broker-checkbox-container {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  padding-top: 5px;
}

.commissions__table-loading-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}

.commissions__checkbox {
  height: 30px;
  margin: 20px 80px 0 20px;
  padding: 10px;
  background-color: #F8F8F8;
}

.commissions__commission-row {
  background-color: transparent;
  border-bottom: 1px solid #D2DFDF;
  font-size: 14px;
}
.commissions__commission-row:last-child {
  border-bottom: none;
}
.commissions__commission-row_is-loading {
  height: 130px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.commissions__commission-summary-section {
  background-color: #FFF;
  padding: 20px;
}

.commissions__commission-summary-row {
  background-color: #F7F7F7;
  padding: 10px;
  margin-top: 10px;
}

.commissions__carrier-commission-row {
  font-size: 14px;
  background-color: #F8F8F8;
  padding: 10px 10px 0 10px;
  margin: 10px 80px 0 20px;
}

.commissions-page {
  padding: 0 20px 20px 20px;
}
@media (max-width: 78.115em) {
  .commissions-page {
    padding: 0;
  }
}
.commissions-page_padding_0 {
  padding: 0;
}

.commissions-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 110px 20px 90px;
  background-color: #FFFFFF;
  border-top: solid 1px #C7D7D7;
  border-bottom: solid 1px #C7D7D7;
  gap: 10px;
}

.commissions-page__empty-icon {
  width: 44px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/assets/images/themes/green/icons/commissions.svg");
  margin-bottom: 15px;
}

.commissions-page__empty-title {
  text-align: center;
  font-size: 25px;
  color: #1297AC;
}
@media (max-width: 31.24em) {
  .commissions-page__empty-title {
    font-size: 21px;
  }
}

.commissions-page__empty-text {
  text-align: center;
  color: #5E5E5E;
  max-width: 550px;
}

.commissions-table {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.commissions-table__header {
  display: flex;
  align-items: center;
  height: 40px;
  padding-left: 20px;
  background-color: #EAEAEA;
  border: solid 1px #C7D7D7;
  box-sizing: border-box;
}

.commissions-table__header-title {
  margin-right: auto;
  font-weight: 600;
  color: #4A4A4A;
}

.commissions-table__header-icon {
  width: 14px;
  height: 14px;
  margin-right: 7px;
  background-position: center center;
  background-repeat: no-repeat;
}

.commissions-table__header-actions {
  display: flex;
  margin-right: 20px;
  font-weight: 600;
  font-size: 14px;
  color: #1297AC;
}

.commissions-table__mobile-actions {
  height: 50px;
  border: solid 1px #C7D7D7;
  border-top: none;
}

.commissions-table__content {
  border: solid 1px #C7D7D7;
  border-top: none;
}

.commissions-table__row {
  padding: 20px;
  background-color: #FFFFFF;
}
.commissions-table__row:not(:last-child) {
  border-bottom: solid 1px #C7D7D7;
}

.commissions-table__commission-history {
  margin-top: 20px;
}

.commissions-table__commission {
  background-color: #F8F8F8;
  padding: 10px;
}

.commissions-table__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 33px 20px;
  background-color: #FFFFFF;
  border: solid 1px #C7D7D7;
  border-bottom: none;
  border-top: none;
}

.commissions-table__empty-title {
  text-align: center;
  font-size: 25px;
  color: #1297AC;
  margin-bottom: 5px;
}
@media (max-width: 47.99em) {
  .commissions-table__empty-title {
    font-size: 21px;
  }
}

.commissions-table__empty-text {
  text-align: center;
  color: #494949;
}

.company-profile-step {
  overflow: auto;
  height: 100%;
}

.company-profile-step__inline-notification {
  margin-bottom: 20px;
}

.company-profile-step__required-field-container {
  margin-bottom: 15px;
}

.company-profile-step__content {
  padding: 15px 40px;
  max-width: 947px;
  margin: 0 auto;
}
@media (max-width: 63.99em) {
  .company-profile-step__content {
    padding: 15px 20px;
  }
}
.company-profile-step__content_horizontal-padding_12 {
  padding-left: 12px;
  padding-right: 12px;
}

.company-profile-step__section_margin-bottom_20 {
  margin-bottom: 20px;
}
.company-profile-step__section_margin-bottom_40 {
  margin-bottom: 40px;
}
.company-profile-step__section_margin-bottom_300 {
  margin-bottom: 300px;
}

.company-profile-step__section-header {
  display: flex;
  align-items: center;
  margin: 35px 0 15px 0;
}
.company-profile-step__section-header_margin-top_0 {
  margin-top: 0;
}
.company-profile-step__section-header_margin-top_15 {
  margin-top: 15px;
}
.company-profile-step__section-header_margin-bottom_5 {
  margin-bottom: 5px;
}
.company-profile-step__section-header_margin-top_20 {
  margin-top: 20px;
}

.company-profile-step__section-title {
  display: flex;
  font-weight: 600;
  font-size: 18px;
}
.company-profile-step__section-title_flex-direction_column {
  flex-direction: column;
}
.company-profile-step__section-title_flex_1 {
  flex: 1;
}

.company-profile-step__section-subtitle {
  margin-bottom: 15px;
  font-size: 15px;
}

.company-profile-step__title-error {
  font-weight: 400;
  font-size: 14px;
}

.company-profile-step__optional-label {
  font-weight: normal;
  color: #9B9B9B;
  margin-left: 5px;
}
.company-profile-step__optional-label_font-size_18 {
  font-size: 18px;
}

.company-profile-step__title-checkbox {
  margin-left: 15px;
  font-size: 14px;
  font-weight: normal;
}

.company-profile-step__remove-link {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.company-profile-step__radio-buttons-section {
  margin-top: 15px;
}

.company-profile-step__radio-option {
  margin-bottom: 10px;
  display: flex;
}

.company-profile-step__separator {
  width: 100%;
  height: 1px;
  opacity: 0.5;
  background-color: #5C5050;
}
.company-profile-step__separator_vertical-margins_20 {
  margin: 20px 0;
}

.company-profile-step__user-info-holder > .liquid-container,
.company-profile-step__user-info-holder > .liquid-container > .liquid-child {
  overflow: visible;
}

/**
 * 1. Needed because the field is surrounded by a liquid container. Without it,
 * the top and bottom borders will disappear on focus.
 */
.company-profile-step__ownership-detail-holder {
  margin: 1px 0 1px; /* [1] */
  width: 40%;
}

.company-profile-step__ownership-detail-field {
  height: 70px;
}

.company-profile-step__ownership-notification {
  padding-top: 10px;
}

.company-profile-step__ownership-notification-text {
  color: #5C5050;
}

.company-profile-step__contact-card {
  padding-bottom: 20px;
}

.company-profile-step__contact-card-content {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 22px 20px;
  border: solid 0.5px #C7D7D7;
  background-color: #FFF;
}

.company-profile-step__contact-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.company-profile-step__contact-validation-rules {
  padding: 10px 0;
}

.company-profile-step__contact-validation-rule {
  margin-left: 20px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
}

.company-profile-step__agency-card {
  margin-bottom: 20px;
}

.company-profile-step__association-card {
  margin-bottom: 20px;
}

.company-profile-step__additional-field-type {
  margin-bottom: 15px;
  margin-top: 15px;
  width: calc(25% - 7.5px);
}

.contact-type-history__contact-name {
  margin-top: 5px;
}

.contact-type-history__body {
  margin-top: 12px;
  background: white;
}
@media (max-width: 47.99em) {
  .contact-type-history__body {
    margin: 20px 0;
    padding: 0 5px;
  }
}

.contact-type-history__separator {
  height: 1px;
  background-color: #EAEAEA;
}
.contact-type-history__separator_hidden-last:last-child {
  height: 0;
}

.contact-type-history__contact-type-name {
  font-size: 16px;
  font-weight: bold;
}

.contact-type-history__no-available-dates {
  font-size: 14px;
  font-style: italic;
  color: rgba(204, 204, 204, 0.8);
}

.contact-type-history__small-screen-notice {
  padding: 40px 20px;
  text-align: center;
}

.create-employer-add-members {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.create-employer-add-members__title {
  color: #1297AC;
  font-size: 30px;
  font-weight: lighter;
}

.create-employer-add-members__subtitle {
  padding-top: 5px;
  padding-bottom: 15px;
  font-size: 16px;
}

.create-employer-members-table {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.create-employer-members-table__page-header {
  flex-shrink: 0;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #EAEAEA;
}
@media (max-width: 81.24em) {
  .create-employer-members-table__page-header {
    display: block;
  }
}
@media (min-width: 81.25em) {
  .create-employer-members-table__page-header {
    display: flex;
    align-items: center;
  }
}

.create-employer-members-table__page-header-left {
  flex: 1;
}

.create-employer-members-table__page-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  color: #1297AC;
  height: 60px;
}

.create-employer-members-table__page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 60px;
}

.create-employer-members-table__page-action {
  margin-right: 10px;
}
.create-employer-members-table__page-action:last-child {
  margin-right: 10px;
}

.create-employer-members-table__page-body {
  flex: 1;
  min-height: 0;
}

.create-employer-members-table__remove-button {
  display: block;
  height: 12px;
  width: 12px;
  background: var(--svg-x-red) center center no-repeat;
  background-size: 12px 12px;
  cursor: pointer;
  font-size: 0;
}
.create-employer-members-table__remove-button:hover {
  opacity: 0.7;
}

.create-employer-members-table__help-tip-section {
  padding-top: 5px;
  color: #5C5050;
}
.create-employer-members-table__help-tip-section:not(:last-child) {
  border-bottom: 1px solid rgba(210, 216, 216, 0.53);
  padding-bottom: 5px;
}

.create-employer-members-table__help-tip-item {
  padding-bottom: 5px;
}
.create-employer-members-table__help-tip-item_font_semi-bold {
  font-weight: 600;
}

.create-employer-members-table__page-note {
  min-height: 60px;
  background-color: #E1E7EF;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.create-employer-members-table__page-note-text {
  flex: 1;
  margin-right: 10px;
}

.create-employer-modal-fields {
  display: block;
}

.create-employer-modal-fields__field-container {
  margin: 1px 0 10px;
}

.create-employer-modal-fields__field {
  height: 70px;
}

.create-employer-modal-fields__required-notice {
  margin-bottom: 10px;
}

.create-oep-section {
  margin-bottom: 35px;
}

.create-oep-section__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.create-oep-section__subtitle {
  font-size: 14px;
  font-weight: 700;
  margin-top: 20px;
}

.create-oep-section__text {
  font-size: 14px;
  font-weight: 400;
}

.create-oep-section__text_margin-bottom_15 {
  margin-bottom: 15px;
}

.create-oep-section__type-radio-container {
  margin-bottom: 20px;
}

.create-oep-section__alert-container {
  width: 60%;
  margin-top: 24px;
}
@media screen and (max-width: 1024px) {
  .create-oep-section__alert-container {
    width: 80%;
  }
}

.create-termination-statement {
  display: block;
}

.create-termination-statement__ssn-title {
  font-size: 16px;
  font-weight: 600;
}

.create-termination-statement__ssn-example {
  font-size: 16px;
  margin-bottom: 15px;
}

.create-termination-statement__date-warning {
  padding-top: 15px;
}

.critical-icon {
  display: flex;
  align-items: center;
}
.critical-icon::before {
  content: "";
  margin-right: 8px;
  background-repeat: no-repeat;
  background-position: center;
  width: 15px;
  height: 17px;
  background-image: url("/assets/images/icons/critical.svg");
}

.directory-links {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  margin-bottom: 40px;
}
@media (min-width: 64em) {
  .directory-links {
    margin: 20px 20px 40px;
  }
}

.directory-links__header {
  display: flex;
  background-color: #FFF;
  height: 50px;
  align-items: center;
  padding: 0 20px;
  border-bottom: solid 1px #DBDBDB;
}
@media (max-width: 47.99em) {
  .directory-links__header {
    height: 45px;
    padding: 0 15px;
  }
}

.directory-links__product {
  width: 14px;
  height: 14px;
  margin-right: 10px;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.directory-links__product_type_medical {
  background-image: url("/assets/images/icons/coverage-types/medical.svg");
}
.directory-links__product_type_vision {
  background-image: url("/assets/images/icons/coverage-types/vision.svg");
}
.directory-links__product_type_dental {
  background-image: url("/assets/images/icons/coverage-types/dental.svg");
}

.disable-checkbox {
  height: 30px;
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFF;
  border: solid thin #D57F73;
  color: #D57F73;
  border-radius: 3px;
}
.disable-checkbox::after {
  content: "";
  background-image: var(--svg-x-sign-white);
}
.disable-checkbox::before {
  content: "";
  margin-right: 5px;
  width: 10px;
  height: 11px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--svg-x-red);
}
.disable-checkbox:focus, .disable-checkbox:hover {
  border: solid 1.5px #D57F73;
  font-weight: 600;
}
.disable-checkbox:active {
  border: solid thin #D57F73;
  font-weight: normal;
}
.disable-checkbox_is-checked {
  color: #FFF;
  border: 0;
  background-color: #D57F73;
}
.disable-checkbox_is-checked::before {
  background-image: var(--svg-x-sign-white);
}

.edit-commissions-page {
  padding: 16px 100px 30px;
}
@media (max-width: 78.115em) {
  .edit-commissions-page {
    padding: 20px 0 30px;
  }
}
.edit-commissions-page_is-error {
  padding: 16px 0 30px;
}

.edit-commissions-page__header {
  margin-bottom: 10px;
}
@media (max-width: 78.115em) {
  .edit-commissions-page__header {
    padding: 0 20px 5px 20px;
  }
}

.edit-commissions-page__header-text {
  color: #494949;
  margin-bottom: 5px;
}
.edit-commissions-page__header-text_is-bold {
  font-weight: bold;
}

.edit-commissions-table {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.edit-commissions-table__header {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  background-color: #EAEAEA;
  border: solid 1px #DBE6E6;
  box-sizing: border-box;
}

.edit-commissions-table__header-title {
  margin-right: auto;
  font-weight: 600;
  color: #4A4A4A;
}

.edit-commissions-table__header-icon {
  width: 14px;
  height: 14px;
  margin-right: 7px;
  background-position: center center;
  background-repeat: no-repeat;
}

.edit-commissions-table__content {
  border: solid 1px #DBE6E6;
  border-top: none;
}

.edit-commissions-table__row {
  padding: 20px;
  background-color: #FFFFFF;
}
.edit-commissions-table__row:not(:last-child) {
  border-bottom: solid 1px #DBE6E6;
}

.edit-commissions-table__commission-history {
  margin-top: 20px;
}

.edit-commissions-table__commission {
  font-size: 14px;
  background-color: #F8F8F8;
  padding: 15px 10px;
}
.edit-commissions-table__commission_background-color_transparent {
  background-color: transparent;
}

.edit-members-table {
  overflow: auto;
  background: white;
}

/**
 * 1. Align it with the text field bottom borders in the same row
 */
.edit-members-table__remove-button {
  height: 20px;
  width: 20px;
  background: var(--svg-x-red) center center no-repeat;
  background-size: 11px 11px;
  cursor: pointer;
  margin-top: 8px; /* 1 */
}
.edit-members-table__remove-button:hover {
  opacity: 0.7;
}

.employee-csr-notes__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #DAE6F7;
  min-height: 50px;
}

.employee-csr-notes__count {
  display: flex;
  justify-content: center;
  width: 13px;
  height: 13px;
  font-size: 10px;
  font-weight: 400;
  color: #FFF;
  background: #D57F73;
  border-radius: 10px;
}

.employee-csr-notes__title-section {
  display: flex;
  align-items: center;
}

.employee-csr-notes__title {
  font-weight: 700;
  font-size: 14px;
  padding: 15px 10px 15px 20px;
}

.employee-csr-notes__action {
  padding: 15px 20px;
}

.employee-csr-notes__body {
  background-color: #FFF;
}

.employee-csr-notes__row {
  padding-top: 23px;
  border-bottom: 1px solid #DADADA;
}

.employee-notes-header__header-action {
  height: 60px;
  width: 88px;
  background-color: #F3F3F3;
}
.employee-notes-header__header-action_width_50 {
  width: 50px;
}

.employee-notes-header__regular-search {
  width: 290px;
  height: 60px;
  background-color: #FFF;
  border-top: solid thin #EAEAEA;
}

.employee-notes-header__animated-search {
  height: 60px;
  width: 100px;
  width: 68px;
}

.employee-notes-header__mobile-header {
  display: flex;
  justify-content: flex-end;
  margin: 10px 12px 10px 0;
}

.employee-notes-header__refresh-container {
  background-color: #F3F3F3;
  width: 50px;
  height: 100%;
  right: 0;
}

.edit-task-status-dialog__content {
  height: 160px;
}

.edit-task-status-dialog__input {
  width: 320px;
  height: 70px;
}
@media (max-width: 47.99em) {
  .edit-task-status-dialog__input {
    width: 100%;
  }
}

.employee-detail {
  font-size: 14px;
  background-color: #FFFFFF;
}

.employee-detail__section-header {
  height: 50px;
  padding: 0 20px;
  border-top: 1px solid #C7D7D7;
  border-bottom: 1px solid #C7D7D7;
  display: flex;
  align-items: center;
}

.employee-detail__header-icon_is-dependent {
  height: 16px;
  width: 16px;
  margin-right: 5px;
  background: url("/assets/images/icons/dependents.svg") center center no-repeat;
}

.employee-detail__header-title {
  font-size: 16px;
  font-weight: 800;
}

.employee-detail__dependent-container:not(:last-child) {
  border-bottom: 1px solid #C7D7D7;
}

.employee-detail__gender-icon {
  width: 38px;
  height: 38px;
  margin-right: 20px;
}
.employee-detail__gender-icon_is-m {
  background: url("/assets/images/icons/dependent-male.svg") center center no-repeat;
}
.employee-detail__gender-icon_is-f {
  background: url("/assets/images/icons/dependent-female.svg") center center no-repeat;
}

.employee-status-help-tip {
  color: #4A4A4A;
  font-size: 13px;
  padding-top: 5px;
}
.employee-status-help-tip:not(:last-child) {
  border-bottom: 1px solid rgba(210, 216, 216, 0.53);
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.employee-status-help-tip__item {
  padding-bottom: 5px;
}

.employees-header-filter {
  height: auto;
  width: auto;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  margin: 10px 0;
  gap: 6px;
  border-left: solid 1px rgba(18, 151, 172, 0.1019607843);
  padding-left: 20px;
}

.employees-header-filter__title {
  color: #95989A;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  line-height: 18px;
  text-transform: uppercase;
}

.employer-invoice {
  display: flex;
  padding: 15px 20px;
  background-color: #F8F8F8;
}
@media (max-width: 69.99em) {
  .employer-invoice {
    flex-direction: column;
  }
}
.employer-invoice_is-paddingless {
  padding: 0;
}
.employer-invoice_flex-direction_column {
  flex-direction: column;
}

/**
 * 1. Use flex-basis 50% for the padding of the first card to be included in flex calculations.
 */
.employer-invoice__card {
  min-height: 230px;
  background-color: #FFF;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
@media (min-width: 70em) {
  .employer-invoice__card {
    flex: 1 1 50%;
  }
}
@media (min-width: 70em) {
  .employer-invoice__card_type_period-card {
    margin-right: 10px;
    height: 100%;
  }
}
@media (max-width: 69.99em) {
  .employer-invoice__card_type_period-card {
    margin-bottom: 10px;
  }
}
@media (max-width: 47.99em) {
  .employer-invoice__card_type_period-card {
    margin-bottom: 0;
  }
}
.employer-invoice__card_has-box-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.employer-invoice__card_min-height_190 {
  min-height: 190px;
}
.employer-invoice__card_min-height_0 {
  min-height: 0;
}
.employer-invoice__card_has-error-box {
  border: solid 1px #D57F73;
}
.employer-invoice__card_margin-bottom_40 {
  margin-bottom: 40px;
}
.employer-invoice__card_margin-right_0 {
  margin-right: 0;
}
.employer-invoice__card_margin-bottom_10 {
  margin-bottom: 10px;
}
.employer-invoice__card_flex_0 {
  flex: 0;
}

.employer-invoice__card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.employer-invoice__card-content_align_top {
  justify-content: flex-start;
}
.employer-invoice__card-content_type_period-card {
  padding: 20px 15px;
  justify-content: flex-start;
  align-items: flex-start;
}

.employer-invoice__refresh-container {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  padding-bottom: 25px;
}

.employer-invoice__info-text {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 20px;
}

.employer-invoice__input-field {
  height: 70px;
  width: 180px;
  margin-bottom: 20px;
}

.employer-invoice__empty-icon {
  flex-shrink: 0;
  margin-bottom: 15px;
  height: 50px;
  width: 45px;
  background: url("/assets/images/icons/empty-bills.svg") center center no-repeat;
}

.employer-invoice__hour-glass {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

.employer-invoice__empty-text {
  max-width: 375px;
  font-size: 25px;
  color: #1297AC;
  text-align: center;
}
.employer-invoice__empty-text_is-wide {
  max-width: 460px;
}

.employer-invoice__empty-description {
  margin-top: 10px;
  font-size: 14px;
  color: #494949;
}

.employer-invoice__header {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #CBDADA;
  height: 35px;
}
.employer-invoice__header_is-loading {
  padding-top: 20px;
  padding-left: 30px;
  border-bottom: none;
}

.employer-invoice__header-title {
  font-weight: 600;
  font-size: 16px;
  flex: 1;
}
.employer-invoice__header-title:not(.employer-invoice__header-title_is-loading)::before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  width: 10px;
  height: 10px;
  background: url("/assets/images/themes/green/icons/invoice.svg") center no-repeat;
  background-size: 10px 7px;
}

.employer-invoice__content {
  flex: 1;
  display: flex;
  padding: 10px 15px;
}

/**
 * 1. Use flex-basis 50% since the other cards have 50% flex-basis.
 */
@media (min-width: 70em) {
  .employer-invoice__payment-container {
    flex: 1 1 50%; /* 1 */
  }
}

.employer-invoice__info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 170px;
}

.employer-invoice__balance-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #CBDADA;
  padding: 20px 0 10px 15px;
}
.employer-invoice__balance-section_is-loading {
  border-left: none;
}

.employer-invoice__balance-title {
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  color: #9B9B9B;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.employer-invoice__balance-due {
  font-size: 30px;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 20px;
}

.employer-invoice__download-excel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.employer-invoice__download-excel-text {
  padding-top: 15px;
  padding-bottom: 10px;
}

.employer-invoice__balance-action {
  margin-bottom: 10px;
}

.enrollment-options-card {
  width: 565px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #FFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
  border-radius: 5px;
}
@media (max-width: 63.99em) {
  .enrollment-options-card {
    width: 100%;
  }
}

.enrollment-options-card__image {
  margin-top: 15px;
}

.enrollment-options-card__title {
  margin-top: 25px;
  font-size: 16px;
  font-weight: bold;
}

.enrollment-options-card__details {
  width: 500px;
  margin-top: 15px;
  font-size: 14px;
}

.enrollment-options-card__options-row {
  margin-top: 25px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.enrollment-options-card__options-container {
  width: 535px;
  display: flex;
}
.enrollment-options-card__options-container_type_manage-members {
  justify-content: center;
}

.enrollment-options-card__option {
  flex: 1;
  margin: 5px;
}
.enrollment-options-card__option_type_manage-members {
  flex: none;
  width: 265px;
}

.enrollment-options-card__image_type_enroll-members {
  background-image: url("/assets/images/icons/enroll-members.svg");
  height: 31px;
  width: 45px;
  background-repeat: no-repeat;
}

.error-info-icon {
  display: flex;
  align-items: center;
}
.error-info-icon::after {
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  background-image: url("/assets/images/icons/error-info.svg");
}

.expansion-panel {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.expansion-panel_is-error {
  border: 1px solid #D57F73;
}

.expansion-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  height: 50px;
  background-color: #FFFFFF;
}

.expansion-panel__header-title {
  color: #1297AC;
  font-size: 14px;
  font-weight: 600;
}

.expansion-panel__header-arrow::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 10px;
  background-size: 16px 10px;
  background-image: url("/assets/images/icons/arrow-down-grey-thin.svg");
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 200ms ease;
}

.expansion-panel__header-arrow_has-collapse-arrow::after {
  transform: rotate(180deg);
}

.invite-users-workflow {
  overflow: auto;
  height: 100%;
}

.invite-users-workflow__content {
  padding: 15px 40px;
  max-width: 947px;
  margin: 0 auto;
  margin-bottom: 30px;
}
@media (max-width: 63.99em) {
  .invite-users-workflow__content {
    padding: 15px 20px;
  }
}

.invite-users-workflow__section {
  padding: 15px 0;
}
.invite-users-workflow__section_padding-top_0 {
  padding-top: 0;
}

.invite-users-workflow__content-header {
  display: flex;
  align-items: center;
  margin: 15px 0 15px 0;
}

.invite-users-workflow__content-title {
  display: flex;
  font-weight: 600;
  font-size: 18px;
}

.invite-users-workflow__content-text {
  margin-bottom: 15px;
}

.invite-users-workflow__contact-update-warning {
  padding: 10px 0 20px;
}

.link-card {
  height: 65px;
  width: 100%;
  background-color: #FFF;
}
.link-card_is-loading {
  height: 94px;
}

.link-card__header {
  display: flex;
}

.link-card__link-type {
  flex: 1;
  color: #B1B1B1;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-size: 10px;
  margin-top: 10px;
  margin-left: 10px;
}

.link-card__unlink {
  margin-top: 10px;
  margin-right: 10px;
  font-size: 13px;
}

.link-card__link-title {
  margin: 6px 10px 0;
  color: #1297AC;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-card__link-title:hover {
  color: #0D7383;
}

.manage-benefits-fields {
  display: flex;
}
.manage-benefits-fields_fill_parent {
  width: 100%;
  height: 100%;
}

.manage-benefits-fields__trigger {
  display: flex;
  align-items: center;
}
.manage-benefits-fields__trigger_is-hoverable:hover .manage-benefits-fields__trigger-text {
  opacity: 0.8;
  color: #1297AC;
}

.manage-benefits-fields__popup {
  background-color: #FFF;
  border-radius: 5px;
  width: 330px;
}

.manage-benefits-fields__trigger-text {
  height: 20px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  color: #1297AC;
  font-size: 10px;
  position: relative;
  display: flex;
  align-items: center;
}

.manage-benefits-fields__popup-header {
  height: 40px;
  display: flex;
  padding: 0 10px;
  justify-content: flex-end;
}

/**
 * 1. The max height is the height of the screen excluding:
 *    - The empty space above the popup: 76px
 *    - The height of the header and the footer: 86px
 *    - Extra 18px to account for the horizontal scrollbar
 **/
.manage-benefits-fields__popup-body {
  overflow-y: auto;
  max-height: calc(100vh - 180px); /* 1 */
  padding: 20px;
}

.manage-benefits-fields__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;
  border-top: 1px solid #C7D7D7;
}

.manage-benefits-fields__footer-action {
  height: 25px;
}

.manage-benefits-fields__row {
  display: flex;
  justify-content: space-between;
  height: 45px;
  align-items: center;
}
.manage-benefits-fields__row:not(:last-child) {
  border-bottom: 1px solid #C7D7D7;
}

.manage-benefits-fields__row-text {
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  color: #4A4A4A;
}

.manage-benefits-fields__digit-selector {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}

.manage-benefits-fields__digit-selector-button {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #FFFFFF;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1297AC;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.manage-benefits-fields__digit-selector-button_is-disabled {
  background-color: #F1F1F1;
  color: #FFFFFF;
  pointer-events: none;
  box-shadow: none;
}

.manage-benefits-fields__digit-selector-number {
  width: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: #494949;
}

.manage-members-errors-notification {
  color: var(--color-dark-grey-2);
  width: 400px;
}

.manage-members-errors-notification__status {
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 5px;
}

.manage-members-errors-notification__description {
  margin-left: 5px;
  margin-bottom: 10px;
}
.manage-members-errors-notification__description_margin-bottom_5 {
  margin-bottom: 5px;
}

.manage-members-errors-notification__continue-action {
  margin-top: 10px;
  margin-bottom: 10px;
}

.manage-members-menu {
  display: flex;
}
.manage-members-menu_fill_parent {
  width: 100%;
  height: 100%;
}

.manage-members-menu__trigger {
  display: flex;
  align-items: center;
}
.manage-members-menu__trigger_is-hoverable:hover .manage-members-menu__trigger-text {
  opacity: 0.8;
  color: #1297AC;
}

.manage-members-menu__arrow-down {
  content: "";
  width: 8px;
  height: 6px;
  margin-left: 6px;
  background: url("/assets/images/icons/arrow-down-green-thin.svg") center no-repeat;
}

.manage-members-menu__arrow-up {
  content: "";
  width: 8px;
  height: 6px;
  margin-left: 6px;
  background: url("/assets/images/icons/arrow-down-green-thin.svg") center no-repeat;
  transform: rotate(-180deg);
  transition: transform 300ms linear;
}

.manage-members-menu__trigger-text-container {
  display: flex;
  align-items: center;
}

.manage-members-menu__trigger-text {
  height: 20px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  color: #1297AC;
  font-size: 10px;
  position: relative;
  display: flex;
  align-items: center;
}

.manage-members-menu__popup {
  width: 200px;
  padding-bottom: 10px;
  box-sizing: border-box;
  background-color: #FFF;
  border-radius: 3px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.28);
}

.manage-members-menu__popup-header {
  height: 40px;
  display: flex;
  justify-content: flex-end;
  padding: 0 15px;
  box-sizing: border-box;
}

.manage-members-menu__popup-item {
  height: 35px;
}

.manage-members-menu__popup-link {
  height: 100%;
  width: 100%;
  font-size: 14px;
  color: #4A4A4A;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
}
.manage-members-menu__popup-link:hover {
  background-color: #EDEDED;
}

.manage-members-page {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #FFF;
}

.manage-members-page__actions-row {
  margin-top: 20px;
}

.manage-members-page__actions-container {
  position: sticky;
  left: 15px;
}

.map-plans-renewals {
  display: block;
}

.map-plans-renewals__title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.map-plans-renewals__description {
  margin-bottom: 20px;
}

.map-plans-renewals__volume-amount-notification {
  margin-bottom: 20px;
}

.map-plans-renewals__table {
  display: block;
  border: 1px solid #D2DFDF;
}

.map-plans-renewals__table-rows-per-type {
  display: block;
}

.map-plans-renewals__table-row {
  display: flex;
  padding-left: 15px;
}
.map-plans-renewals__table-row_is-header {
  height: 45px;
  background-color: #EAEAEA;
}
.map-plans-renewals__table-row_is-type-header {
  height: 45px;
  background-color: #F4F4F4;
  border-top: 1px solid #D2DFDF;
  border-bottom: 1px solid #D2DFDF;
}
.map-plans-renewals__table-row_is-content {
  height: 60px;
  background-color: #FFF;
  border-bottom: 1px solid #D2DFDF;
}
.map-plans-renewals__table-row_is-content:last-child {
  border-bottom: none;
}
.map-plans-renewals__table-row_is-error {
  border: 1px solid var(--color-red);
}

.map-plans-renewals__table-cell {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.map-plans-renewals__text {
  flex: 1;
  overflow: hidden;
  max-height: 40px;
}
.map-plans-renewals__text_is-header {
  font-size: 11px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
}
.map-plans-renewals__text_color_green {
  color: #1297AC;
}
.map-plans-renewals__text_color_red {
  color: var(--color-red);
}
.map-plans-renewals__text_is-semi-bold {
  font-weight: 600;
}
.map-plans-renewals__text_is-required::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-bottom: 3px;
  background: url("/assets/images/icons/required-star.svg") center no-repeat;
}

.map-plans-renewals__dropdown {
  height: 100%;
  flex: 1;
  min-width: 0;
}

.map-plans-renewals__arrow {
  margin-right: 33px;
  width: 20px;
  height: 18px;
  background: url("/assets/images/themes/green/icons/arrow-right.svg") center no-repeat;
}

.member-display-field {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 14px;
  transition: background-color 300ms ease;
}
.member-display-field_is-error:not(.member-display-field_border_none) {
  border: 1px solid var(--color-red);
}
.member-display-field_is-purple:not(.member-display-field_border_none) {
  border: 1px solid var(--color-purple);
}
.member-display-field_border_none {
  border: none;
}
.member-display-field_is-disabled, .member-display-field_is-expandable {
  color: #9B9B9B;
}
.member-display-field_font-style_italic {
  font-style: italic;
}
.member-display-field_font-weight_semi-bold {
  font-weight: 600;
}
.member-display-field_font-size_16 {
  font-size: 16px;
}
.member-display-field_padding-left_0 {
  padding-left: 0;
}
.member-display-field_icon_date:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}
.member-display-field_icon_date:not(.member-display-field_is-error):before {
  background-image: url("/assets/images/icons/date.svg");
}
.member-display-field_icon_date.member-display-field_is-red:before {
  background-image: url("/assets/images/icons/date-red.svg");
}
.member-display-field_icon_date.member-display-field_is-purple:before {
  background-image: url("/assets/images/icons/date-purple.svg");
}
.member-display-field_cursor_pointer {
  cursor: pointer;
}
.member-display-field_error-color_default .member-display-field__value_color_red {
  color: var(--color-dark-grey-2);
}
.member-display-field_is-edited {
  background-color: #E3F4F6;
  animation: increase-background-color-opacity 300ms ease;
}
@keyframes increase-background-color-opacity {
  from {
    background-color: rgba(227, 244, 246, 0);
  }
  to {
    background-color: rgb(227, 244, 246);
  }
}
.member-display-field_background-color_green {
  background-color: #D0EED5;
}
.member-display-field_border-left_green {
  border-left: 5px solid #D0EED5;
}

.member-display-field__value {
  flex: 1;
  padding-right: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.member-display-field__value_color_red {
  color: var(--color-red);
}
.member-display-field__value_color_purple {
  color: var(--color-purple);
}

.member-display-field__placeholder {
  flex: 1;
  color: var(--color-light-grey-6);
}

.member-display-field__trigger-icon {
  width: 10px;
  height: 5px;
  margin-right: 10px;
  background: url("/assets/images/icons/arrow-down-grey-thin.svg") center no-repeat;
}

.member-display-field__edit-icon {
  width: 9px;
  height: 9px;
  margin-right: 10px;
  background: url("/assets/images/icons/pencil.svg") center no-repeat;
}

.member-display-field__view-icon {
  width: 17px;
  height: 10px;
  margin-right: 10px;
  background: url("/assets/images/icons/eye.svg") center no-repeat;
}

.member-display-field__clear-dropdown {
  margin-right: 6px;
  cursor: pointer;
}

.member-display-field__actions {
  margin-right: 10px;
}

.member-display-field__helptip-icon {
  width: 20px;
  height: 20px;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}
.member-display-field__helptip-icon_icon_red-discard {
  background-image: url("/assets/images/icons/red-discard.svg");
}
.member-display-field__helptip-icon_icon_white-discard {
  background-image: url("/assets/images/icons/white-discard.svg");
}
.member-display-field__helptip-icon_icon_green-restore {
  background-image: url("/assets/images/icons/green-restore.svg");
}
.member-display-field__helptip-icon_icon_white-restore {
  background-image: url("/assets/images/icons/white-restore.svg");
}

.member-display-field__helptip-text {
  height: 100%;
  display: flex;
  align-items: center;
  color: #FFF;
  font-size: 10px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

.members-card-table__card {
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
  background-color: #FFF;
  display: flex;
  align-items: center;
  border-color: #98B7B7;
}
.members-card-table__card:not(:last-child):not(.members-card-table__card_border_none) {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.members-card-table__card_border-color_light-grey {
  border-color: #F8F8F8;
}
.members-card-table__card_border_none {
  border: none;
}
.members-card-table__card_margin-bottom_10 {
  margin-bottom: 10px;
}
.members-card-table__card_has-box-shadow {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
}

.members-card-table__header {
  display: flex;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.members-card-table__field {
  flex: 1;
  font-size: 14px;
  color: #494949;
  padding: 0 5px;
}
.members-card-table__field_font-weight_semi-bold {
  font-weight: 600;
}
.members-card-table__field_font-style_italic {
  font-style: italic;
}
.members-card-table__field_flex_2 {
  flex: 2;
}
.members-card-table__field_is-label {
  color: #9B9B9B;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
}

.members-card-table__checkbox {
  width: 30px;
}

.member-field-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.member-field-box_has-border-right {
  border-right: 1px solid #EAEAEA;
}
.member-field-box_has-border-top {
  border-top: 1px solid #EAEAEA;
}
.member-field-box_has-border-bottom {
  border-bottom: 1px solid #EAEAEA;
}
.member-field-box_is-highlighted-light-blue {
  background-color: rgba(19, 151, 172, 0.05);
}
.member-field-box_is-highlighted-dark-blue {
  background-color: rgba(19, 151, 172, 0.15);
}
.member-field-box_is-highlighted-red {
  background-color: rgba(213, 127, 115, 0.2);
}
.member-field-box_is-highlighted-purple {
  background-color: rgba(102, 80, 160, 0.2);
}
.member-field-box_is-highlighted-grey {
  background-color: #F8F8F8;
}
.member-field-box_display_flex {
  display: flex;
}
.member-field-box_align-items_center {
  align-items: center;
}
.member-field-box_justify-content_center {
  justify-content: center;
}
.member-field-box_justify-content_space-between {
  justify-content: space-between;
}
.member-field-box_border-top-color_red {
  border-top-color: var(--color-red);
}
.member-field-box_border-top-color_purple {
  border-top-color: var(--color-purple);
}
.member-field-box_border-right-color_red {
  border-right-color: var(--color-red);
}
.member-field-box_border-right-color_purple {
  border-right-color: var(--color-purple);
}

.member-field-box__row-text-container {
  display: flex;
  align-items: center;
}

.member-field-box__description-text {
  padding-left: 10px;
  font-size: 14px;
  font-style: italic;
  color: #9B9B9B;
}

.member-field-box__not-available {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 14px;
  font-size: 14px;
  color: #9B9B9B;
}
.member-field-box__not-available_font-style_italic {
  font-style: italic;
}

.member-field-box__validation-error {
  position: absolute;
  right: 100%;
  top: 0;
  width: 12px;
  height: 12px;
  background: var(--svg-field-error) top right no-repeat;
  background-size: 12px 12px;
}
.member-field-box__validation-error_background_purple {
  background: url("/assets/images/icons/field-error-purple.svg") top right no-repeat;
}

.member-field-box__role-types {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  -moz-column-gap: 5px;
       column-gap: 5px;
  height: 100%;
  padding-left: 10px;
}

.members-empty-page {
  width: 100%;
  height: 100%;
  max-height: 500px;
  box-sizing: border-box;
  background-color: #F8F8F8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.members-empty-page_has-border-top {
  border-top: 1px solid var(--color-light-blue);
}

.members-empty-page__icon {
  width: 35px;
  height: 35px;
  background: url("/assets/images/icons/member.svg") center center no-repeat;
  background-size: 30px;
  margin-bottom: 20px;
}

.members-empty-page__text {
  margin-bottom: 24px;
  font-size: 25px;
  color: #1297AC;
  text-align: center;
}

.members-fields-header {
  height: 50px;
  width: 100%;
  display: flex;
  background-color: #FFF;
  border-bottom: 1px solid #EAEAEA;
  box-sizing: border-box;
  z-index: 1;
  position: sticky;
  top: 0;
}

.members-fields-header__item {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: sticky;
  left: 0;
}
.members-fields-header__item:not(:first-child) {
  border-left: 1px solid #EAEAEA;
}

.members-fields-header__title-container {
  position: sticky;
  left: 20px;
  top: 0;
  display: flex;
  align-items: center;
}

.members-fields-header__title {
  color: #5E5E5E;
  font-weight: 600;
  font-size: 16px;
}

.members-fields-header__button {
  width: auto;
  height: 20px;
  margin-left: 15px;
  padding: 0 5px;
  box-sizing: border-box;
  background-color: #EAEAEA;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  color: #1297AC;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.members-fields-header__button::before {
  content: "";
  margin-right: 5px;
  display: inline-block;
  width: 11px;
  height: 6px;
  background-position: center;
  background-repeat: no-repeat;
}
.members-fields-header__button_is-collapse::before {
  background-image: url("/assets/images/icons/collapse-arrows.svg");
}
.members-fields-header__button_is-expand::before {
  background-image: url("/assets/images/icons/expand-arrows.svg");
}

.members-file-setup {
  height: 100%;
  overflow: auto;
}

.members-file-setup__content {
  max-width: 902px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 15px auto 150px;
}
@media (max-width: 63.99em) {
  .members-file-setup__content {
    margin-top: 25px;
  }
}

.members-file-setup__required-field-container {
  margin-bottom: 15px;
}
@media (max-width: 63.99em) {
  .members-file-setup__required-field-container {
    margin-bottom: 25px;
  }
}

.members-file-setup__section {
  margin-bottom: 35px;
}

.members-file-setup__section-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.members-file-setup__section-title {
  color: #5A5A5A;
  font-size: 20px;
  font-weight: 600;
}

.members-file-setup__sub-section:not(:last-child) {
  margin-bottom: 30px;
}
.members-file-setup__sub-section_justify-content_space-between {
  display: flex;
  justify-content: space-between;
}

.members-file-setup__sub-section-header {
  margin-bottom: 10px;
  color: #5A5A5A;
  font-size: 14px;
}

.members-file-setup__sub-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #5A5A5A;
}
.members-file-setup__sub-section-title_display_flex {
  display: flex;
}
.members-file-setup__sub-section-title_font-size_14 {
  font-size: 14px;
}

.members-file-setup__white-box {
  background-color: #FFF;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.13);
}

.members-file-setup__white-box-content {
  padding: 20px;
}

.members-file-setup__white-box-text {
  font-size: 14px;
  margin-bottom: 15px;
}

.members-file-setup__input-field {
  height: 70px;
  width: 300px;
}
.members-file-setup__input-field_width_150 {
  width: 150px;
}

.members-file-setup__effective-date-section {
  margin-top: 5px;
  margin-left: 20px;
}

.members-file-setup__text-area {
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  -webkit-appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  background: #FFF;
  resize: none;
  height: 150px;
  padding: 8px;
  box-sizing: border-box;
  vertical-align: top;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.13);
  color: var(--color-dark-grey-2);
  width: 100%;
}
.members-file-setup__text-area_is-error {
  padding: 7px;
  border: 1px solid var(--color-red);
}
.members-file-setup__text-area:not(.members-file-setup__text-area_is-error):focus, .members-file-setup__text-area:not(.members-file-setup__text-area_is-error):hover {
  padding: 7px;
  border: 1px solid #056B7A;
}

.members-file-setup__info-card {
  background-color: #FFF;
  border: 1px solid #E8EFEF;
  box-sizing: border-box;
  align-items: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.members-file-setup__info-card:not(:last-child) {
  margin-right: 15px;
}

.members-file-setup__info-card-content {
  width: 100%;
  height: 100%;
  padding: 30px 15px 10px;
  box-sizing: border-box;
  color: #4A4A4A;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.members-file-setup__info-card-icon {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  margin-bottom: 20px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}
.members-file-setup__info-card-icon_download {
  background-image: url("/assets/images/themes/green/icons/download-circle.svg");
}
.members-file-setup__info-card-icon_split-columns {
  background-image: url("/assets/images/themes/green/icons/split-columns.svg");
}
.members-file-setup__info-card-icon_link {
  background-image: url("/assets/images/themes/green/icons/link.svg");
}

.members-file-setup__info-card-title {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.members-file-setup__info-card-title-text {
  font-weight: 700;
}

.members-file-setup__info-card-description {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.members-file-setup__info-card-button {
  width: 90%;
  min-width: 215px;
  height: 40px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 20px;
  margin-bottom: 20px;
  color: #FFF;
  font-size: 14px;
  background-color: #1297AC;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.members-file-setup__info-card-button:focus, .members-file-setup__info-card-button:hover {
  background-color: #0D7383;
}

.members-file-setup__help-tip {
  padding-left: 6px;
}

.members-file-setup__table {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.13);
}
.members-file-setup__table_margin-bottom_50 {
  margin-bottom: 50px;
}

.members-file-setup__table-header {
  width: 100%;
  height: 60px;
  padding: 0 20px 0 10px;
  box-sizing: border-box;
  background-color: #EAEAEA;
  display: flex;
  align-items: center;
}

.members-file-setup__table-header-nav {
  height: 100%;
  flex: 1;
}

.members-file-setup__table-header-nav-item {
  height: 100%;
  width: 135px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  color: #494949;
  cursor: pointer;
  text-transform: uppercase;
}
.members-file-setup__table-header-nav-item_width_compact {
  width: 105px;
}
.members-file-setup__table-header-nav-item:hover, .members-file-setup__table-header-nav-item_is-active {
  color: #1297AC;
}
.members-file-setup__table-header-nav-item:hover {
  background-color: #D7D7D7;
}

.members-file-setup__table-page {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 20px 0;
  background-color: #FFF;
}

.members-file-setup__table-page-columns-container {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 10px;
  display: flex;
}

.members-file-setup__table-column {
  flex: 1;
  box-sizing: border-box;
  padding: 5px 0;
}
.members-file-setup__table-column:not(:first-child) {
  padding-left: 20px;
}
.members-file-setup__table-column_has-border-right {
  border-right: 1px solid var(--color-light-blue);
}
.members-file-setup__table-column_flex_1 {
  flex: 1;
}
.members-file-setup__table-column_flex_2 {
  flex: 2;
}

.members-file-setup__table-column-title {
  color: #1297AC;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.members-file-setup__table-column-title_has-required-symbol {
  display: flex;
  gap: 3px;
}

.members-file-setup__table-column-content {
  box-sizing: border-box;
  font-size: 14px;
}
.members-file-setup__table-column-content_flex_1 {
  flex: 1;
}

.members-file-setup__table-notification {
  padding-bottom: 20px;
}

.members-file-setup__table-notification-text {
  color: #5A5A5A;
  font-size: 13px;
}

.members-file-setup__table-column-container {
  display: flex;
}

.members-file-setup__title-notification {
  padding-bottom: 20px;
}

.members-file-setup__copy-and-paste-title {
  color: #5A5A5A;
  font-size: 20px;
  font-weight: 600;
  flex: 1;
  margin-bottom: 2px;
}

.members-file-setup__table-footer {
  padding: 13px 22px 11px 10px;
  box-sizing: border-box;
  background-color: #E0EDEF;
  display: flex;
}

.member-file-setup__row-container {
  display: flex;
  gap: 3px;
}

.member-file-setup__notice {
  font-style: italic;
  color: var(--color-red);
}

.members-file-setup__table-footer-text {
  font-size: 14px;
  color: #5A5A5A;
}

.members-file-setup__single-plan {
  color: #5A5A5A;
  font-size: 14px;
  margin-bottom: 15px;
}

.members-file-setup__plan-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.members-file-setup__plan-title-description_margin-bottom_9 {
  margin-bottom: 9px;
}
.members-file-setup__plan-title-description_margin-bottom_14 {
  margin-bottom: 14px;
}

.members-file-setup__plans-table_has-border {
  border: 1px solid #1297AC;
  padding: 11px;
}

.members-file-setup__plans-table-header-cell {
  background-color: #EAEAEA;
  color: #5A5A5A;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 2px 10px;
}
.members-file-setup__plans-table-header-cell_is-border-green {
  border: 1px solid #1297AC;
}
.members-file-setup__plans-table-header-cell_is-single {
  width: 131px;
  height: 40px;
  margin-bottom: 6px;
  box-sizing: border-box;
}
.members-file-setup__plans-table-header-cell_flex-direction-column {
  flex-direction: column;
}

.members-file-setup__plans-table-entry-cell {
  background-color: #FFFFFF;
  color: #5A5A5A;
  font-weight: 400;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 2px 10px;
}
.members-file-setup__plans-table-entry-cell_is-single {
  width: 131px;
  height: 40px;
  border: 1px solid #1297AC;
  box-sizing: border-box;
}

.members-file-setup__multiple-plans {
  color: #5A5A5A;
  font-size: 14px;
  margin-bottom: 9px;
}

.members-file-setup__multiple-plans-container {
  display: flex;
  margin-top: 9px;
  margin-bottom: 34px;
  gap: 9px;
}

.members-file-setup__multiple-plans-section_margin-right_9 {
  margin-right: 9px;
}

.members-file-setup__multiple-plans-section-title {
  color: #1297AC;
  font-size: 10px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.members-file-setup__empty-cell-plans {
  color: #5A5A5A;
  font-size: 14px;
  margin-bottom: 15px;
}

.members-map-benefits {
  max-width: 815px;
  margin: 25px auto;
  padding: 0 15px;
  overflow: auto;
}
@media (max-width: 63.99em) {
  .members-map-benefits {
    margin: 35px 0;
    max-width: 100%;
  }
}

.members-map-benefits__is-upload-change-file {
  margin: 0 20px;
  padding: 20px 0;
}

.members-map-benefits__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}

.members-map-benefits__table-section:not(:last-child) {
  margin-bottom: 20px;
}

.members-map-benefits__table-row {
  display: flex;
  align-items: center;
}
.members-map-benefits__table-row_is-header {
  height: 45px;
  background-color: #EAEAEA;
}
.members-map-benefits__table-row_is-value {
  height: 55px;
  background-color: #FFF;
}
.members-map-benefits__table-row_is-value:not(:last-child) {
  border-bottom: 1px solid #DADADA;
}

.members-map-benefits__table-column {
  width: 50%;
  padding-left: 15px;
  padding-right: 10px;
  box-sizing: border-box;
}

.members-map-fields {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.members-map-fields__header {
  height: 65px;
  padding: 15px 20px 15px;
  background-color: #F4F4F4;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
@media (max-width: 63.99em) {
  .members-map-fields__header {
    padding-right: 15px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
  }
}

.members-map-fields__header-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
}

.members-map-fields__header-action {
  margin-left: 5px;
}

.members-map-fields__description {
  font-size: 16px;
  max-width: 850px;
  padding: 0 20px 20px;
}
@media (max-width: 63.99em) {
  .members-map-fields__description {
    padding-right: 15px;
    position: sticky;
    left: 0;
  }
}

.members-map-fields__table-container {
  flex: 1;
  display: flex;
  overflow: auto;
  padding-top: 1px;
}
@media (max-width: 63.99em) {
  .members-map-fields__table-container {
    overflow: unset;
  }
}

.members-map-fields__fields-container {
  width: 215px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #EAEAEA;
  padding: 20px 20px 0 15px;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: auto;
}
@media (max-width: 63.99em) {
  .members-map-fields__fields-container {
    width: 100%;
    height: 200px;
    flex-direction: row;
    padding-left: 20px;
    position: sticky;
    left: 0;
  }
  .members-map-fields__fields-container_is-large {
    height: 270px;
  }
}

.members-map-fields__fields-section {
  margin-bottom: 25px;
  box-sizing: border-box;
}
@media (max-width: 63.99em) {
  .members-map-fields__fields-section {
    flex: 1;
    margin-bottom: 15px;
  }
}

.members-map-fields__fields-section-title {
  padding-left: 20px;
  padding-bottom: 5px;
}
@media (max-width: 63.99em) {
  .members-map-fields__fields-section-title {
    height: 20px;
    display: flex;
    align-items: center;
  }
}

.members-map-fields__fields {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (max-width: 63.99em) {
  .members-map-fields__fields {
    height: calc(100% - 20px);
  }
}

.members-map-fields__field {
  display: flex;
  align-items: center;
  font-size: 16px;
  white-space: nowrap;
}
@media (max-width: 63.99em) {
  .members-map-fields__field {
    font-size: 14px;
  }
}

.members-map-fields__field-check-container {
  width: 20px;
  margin-bottom: auto;
  margin-top: 5px;
}

.members-map-fields__field-check-label {
  width: 160px;
  white-space: normal;
  overflow-wrap: break-word;
}

.members-map-fields__table {
  flex: 1;
}
@media (min-width: 64em) {
  .members-map-fields__table {
    overflow: auto;
  }
}

.members-map-fields__table-header {
  display: flex;
  position: sticky;
  top: 0;
}
@media (max-width: 63.99em) {
  .members-map-fields__table-header {
    top: 65px;
  }
}

.members-map-fields__table-error {
  width: 100%;
  height: 29px;
  position: sticky;
  left: 0;
  top: 65px;
}
@media (max-width: 63.99em) {
  .members-map-fields__table-error {
    top: 130px;
  }
}

.members-map-fields__table-content {
  display: block;
}

.members-map-fields__table-column {
  width: 260px;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: width 300ms ease;
}
.members-map-fields__table-column_is-header {
  border-right: 1px solid #EAEAEA;
}
.members-map-fields__table-column_is-mapping:not(:last-child) {
  border-right: 1px solid #EAEAEA;
}
.members-map-fields__table-column_width_large {
  width: 520px;
}

.members-map-fields__benefit-header-value {
  width: 260px;
}

.members-map-fields__one-plan-prompt-container {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 5px;
}

.members-map-fields__one-plan-prompt-text {
  flex: 1;
}

.members-map-fields__table-row {
  display: flex;
}

.members-map-fields__table-cell {
  width: 100%;
  height: 55px;
  font-size: 16px;
  padding: 0 15px;
  box-sizing: border-box;
  flex-shrink: 0;
  /**
   * This should be below has-border-top,
   * since it might affect it's color.
   */
}
@media (max-width: 63.99em) {
  .members-map-fields__table-cell {
    font-size: 14px;
  }
}
.members-map-fields__table-cell_is-mapping {
  height: 65px;
  padding: 1px 0 0;
  background-color: #FFF;
  position: relative;
}
.members-map-fields__table-cell_is-header {
  background-color: #EAEAEA;
  border-bottom: 1px solid #D2D8D8;
  display: flex;
  align-items: center;
  position: sticky;
  top: 65px;
  left: 0;
  z-index: 2;
}
@media (max-width: 63.99em) {
  .members-map-fields__table-cell_is-header {
    top: 130px;
  }
}
.members-map-fields__table-cell_has-prompt {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.members-map-fields__table-cell_is-value {
  background-color: #FFF;
  display: flex;
  align-items: center;
}
.members-map-fields__table-cell_color_grey {
  color: #B3B3B3;
}
.members-map-fields__table-cell_has-border-top {
  border-top: 1px solid #D2D8D8;
}
.members-map-fields__table-cell_is-error {
  border: solid 1px #D57F73;
  font-style: italic;
  color: #D57F73;
  font-size: 14px;
}
.members-map-fields__table-cell_is-highlighted {
  background-color: rgba(213, 127, 115, 0.1);
}
.members-map-fields__table-cell_has-error {
  top: 94px;
}
@media (max-width: 63.99em) {
  .members-map-fields__table-cell_has-error {
    top: 159px;
  }
}

.members-map-fields__table-cell-content {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.members-map-fields__column-action {
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 2;
}

.members-map-fields__column-headers-container {
  display: flex;
  position: sticky;
  top: 65px;
}

.members-map-members {
  margin: 0 150px 0 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
@media (max-width: 63.99em) {
  .members-map-members {
    margin-right: 20px;
  }
}

.members-map-members__header {
  margin-bottom: 20px;
}

.members-map-members__header-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.members-map-members__empty-state {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 0;
  margin: 20px;
}

.members-map-members__empty-state-icon {
  background-image: url("/assets/images/icons/main-menu/employee.svg");
  width: 34px;
  height: 36px;
  margin-bottom: 20px;
}

.members-map-members__empty-state-title {
  font-size: 25px;
  color: #1297AC;
  margin-bottom: 5px;
}

.members-map-members__empty-state-text {
  color: #5E5E5E;
  margin-bottom: 20px;
}

.members-map-members__empty-state-button {
  background-color: #1297AC;
  color: #FFFFFF;
  border-radius: 17.5px;
  padding: 10px 15px;
  font-weight: 600;
  font-size: 14px;
}

.members-change-summary {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.members-change-summary__empty-state {
  margin: 20px;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 350px;
}

.members-change-summary__empty-state-icon {
  background-image: url("/assets/images/icons/main-menu/employee.svg");
  width: 34px;
  height: 36px;
  margin-bottom: 20px;
}

.members-change-summary__empty-state-title {
  font-size: 25px;
  color: #1297AC;
  margin-bottom: 5px;
}

.members-change-summary__empty-state-text {
  color: #5E5E5E;
  margin-bottom: 25px;
}

.members-change-summary__empty-state-button {
  background-color: #1297AC;
  color: #FFFFFF;
  border-radius: 17.5px;
  padding: 10px 15px;
  font-weight: 600;
  font-size: 14px;
}

.members-change-summary__table-header {
  background-color: #EAEAEA;
  display: flex;
  justify-content: space-between;
}

.members-change-summary__table-header-search-bar {
  width: 290px;
  height: 60px;
  background-color: #FFFFFF;
  margin-left: auto;
}

.map-members-table__header {
  height: 55px;
  background-color: #EAEAEA;
  display: flex;
  align-items: center;
  padding: 0 20px 0 10px;
  margin-bottom: 15px;
}

.map-members-table__header-text {
  font-weight: 600;
  font-size: 14px;
  color: #494949;
  margin-right: auto;
}

.map-members-table__row-group {
  margin-bottom: 10px;
  border-bottom: 1px solid #D8E4E4;
}

.map-members-table__row {
  background-color: #FFF;
  padding: 20px;
  font-size: 14px;
  color: #5C5050;
  box-sizing: border-box;
  border: 1px solid #D8E4E4;
  border-bottom: none;
  transition: background-color 0.5s ease;
}
.map-members-table__row_is-discarded {
  background-color: rgba(213, 127, 115, 0.15);
}
.map-members-table__row_is-employee {
  border-left: 4px solid #1297AC;
  padding-left: 16px;
}
.map-members-table__row_is-matched-employee {
  border-left: 4px solid #1297AC;
  padding: 10px 25px 10px 16px;
  background-color: #EAEAEA;
}
.map-members-table__row_is-disabled {
  background-color: transparent;
}

.map-members-table__row-member-card {
  display: flex;
  flex-direction: column;
}
.map-members-table__row-member-card_is-matched-employee {
  flex-direction: row;
}

.map-members-table__row-name-and-tag {
  display: flex;
  justify-content: flex-start;
}

.map-members-table__row-name {
  font-size: 16px;
  font-weight: bold;
  margin-right: 12px;
}
.map-members-table__row-name_is-matched-employee {
  font-size: 14px;
}

.map-members-table__row-info {
  display: flex;
}
@media (max-width: 63.99em) {
  .map-members-table__row-info {
    flex-direction: column;
  }
  .map-members-table__row-info_is-matched-employee {
    flex-direction: row;
  }
}

.map-members-table__row-info-item {
  margin-right: auto;
}
@media (max-width: 63.99em) {
  .map-members-table__row-info-item {
    margin-bottom: 12px;
  }
  .map-members-table__row-info-item_is-matched-employee {
    margin-bottom: 0;
  }
}
.map-members-table__row-info-item_margin-right_40 {
  margin-right: 40px;
}

.map-members-table__row-mapped-text {
  display: flex;
  align-items: center;
  margin-left: auto;
  font-style: italic;
}

.map-members-table__row-arrow-right {
  width: 20px;
  height: 18px;
  background: url("/assets/images/themes/green/icons/arrow-right.svg") center no-repeat;
}
.map-members-table__row-arrow-right_is-disabled {
  background: url("/assets/images/themes/green/icons/arrow-right-grey.svg") center no-repeat;
}

.map-members-table__row-radio-button {
  font-weight: 600;
  font-size: 13px;
}

.map-members-table__row-new-member-notification {
  color: #5E5E5E;
}

.map-members-table__row-search-bar-title {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  color: #1297AC;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.map-members-table__row-disabled-text {
  font-style: italic;
}

.change-summary-table {
  font-size: 14px;
  color: #494949;
  padding: 0 20px 20px 20px;
}
@media (max-width: 81.24375em) {
  .change-summary-table {
    padding-top: 20px;
    min-width: auto;
  }
}

@media (max-width: 81.24375em) {
  .change-summary-table__header {
    display: none;
  }
}

.change-summary-table__header-text {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  padding: 15px 0 15px 16px;
  text-transform: uppercase;
  color: #4A4A4A;
}

.change-summary-table__row {
  display: flex;
  background-color: #FFFFFF;
  min-height: 150px;
  position: relative;
}
@media (max-width: 81.24375em) {
  .change-summary-table__row {
    flex-direction: column;
    min-height: auto;
  }
}
.change-summary-table__row_is-discarded {
  transition: background-color 0.5s ease;
  background-color: #F9ECEA;
}
.change-summary-table__row_has-no-changes {
  background-color: #EAEAEA;
  min-height: auto;
  flex-direction: row;
  padding: 10px 20px 10px 16px;
  border-left: solid 4px #1297AC;
}

.change-summary-table__row-separation {
  height: 1px;
  background-color: #9B9B9B;
}

.change-summary-table__row-info-section {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 320px;
  border-right: 1px solid #EAEAEA;
}
@media (max-width: 81.24375em) {
  .change-summary-table__row-info-section {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #EAEAEA;
  }
}

.change-summary-table__row-info-section-separator {
  height: 1px;
  background-color: #EAEAEA;
  background-clip: content-box;
  padding: 0 20px;
}

.change-summary-table__row-comparison-section {
  flex: 1;
}

.change-summary-table__row-margin-hider {
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  background-color: #EAEAEA;
}

.change-summary-table__member-card {
  padding: 10px 20px 20px 20px;
}
.change-summary-table__member-card_is-employee {
  border-left: solid 4px #1297AC;
  padding: 10px 20px 20px 16px;
}

.change-summary-table__member-card-info {
  display: flex;
}

.change-summary-table__member-card-title {
  font-size: 16px;
  font-weight: bold;
  color: #4A4A4A;
  margin-bottom: 18px;
}

.change-summary-table__row-options {
  display: flex;
  text-transform: capitalize;
  height: 15px;
  padding: 15px 20px;
}
@media (max-width: 81.24375em) {
  .change-summary-table__row-options {
    margin-top: 0;
    width: 270px;
  }
}

.change-summary-table__row-option {
  font-size: 12px;
  font-weight: 600;
  color: #1297AC;
}
.change-summary-table__row-option_is-discarded {
  color: #D57F73;
}
.change-summary-table__row-option_is-hidden {
  display: none;
}
.change-summary-table__row-option_flex_1 {
  flex: 1;
}
.change-summary-table__row-option_is-disabled {
  color: var(--color-dark-grey-2);
  pointer-events: none;
  opacity: 0.5;
}

.change-summary-table__field-comparison_is-discarded {
  transition: background-color 0.5s ease;
  background-color: #F9ECEA;
}

.change-summary-table__field-comparison-cell {
  display: flex;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
  min-height: 51px;
  border-bottom: 1px solid #EAEAEA;
  border-right: 1px solid #EAEAEA;
  line-height: 1;
}
.change-summary-table__field-comparison-cell_is-delete {
  font-style: italic;
  color: #9B9B9B;
}
.change-summary-table__field-comparison-cell_padding_0 {
  padding: 0;
}

.change-summary-table__field-name {
  font-size: 9px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  color: #9B9B9B;
}

.change-summary-table__field-comparison-missing-value {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #D57F73;
  color: #D57F73;
  font-style: italic;
  padding: 15px;
}

.change-summary-table__field-comparison-missing-icon {
  position: absolute;
  top: 0;
  right: 0;
  font-style: normal;
  display: flex;
  justify-content: center;
  height: 17px;
  width: 17px;
  background-color: #D57F73;
  color: #FFFFFF;
}

.change-summary-table__field-comparison-options {
  display: flex;
  margin-left: auto;
}
.change-summary-table__field-comparison-options_is-hidden {
  display: none;
}

.change-summary-table__field-comparison-option {
  color: #1297AC;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.change-summary-table__field-comparison-option_is-discarded {
  color: #D57F73;
}
.change-summary-table__field-comparison-option_is-hidden {
  display: none;
}

.change-summary-table__section_is-discarded {
  transition: background-color 0.5s ease;
  background-color: #F9ECEA;
}

.change-summary-table__section-header {
  background-color: rgba(180, 178, 178, 0.3);
  color: #9B9B9B;
  padding: 20px 0;
}

.change-summary-table__section-header-content {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
  width: 33.3333333333%;
  height: 14px;
  font-size: 9px;
  text-transform: uppercase;
  padding: 0 20px;
}
@media (max-width: 81.24375em) {
  .change-summary-table__section-header-content {
    width: 100%;
  }
}

.change-summary-table__section-header-title {
  font-family: "Montserrat", sans-serif;
}

.change-summary-table__member-info {
  display: flex;
}

.change-summary-table__member-info-title {
  margin-right: 45px;
}

.change-summary-table__member-info-name {
  font-weight: 700;
  color: #5C5050;
}

.change-summary-table__no-changes-text {
  font-style: italic;
  display: flex;
  align-items: center;
  margin-left: auto;
  color: #5C5050;
}

.members-processing-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 64em) {
  .members-processing-page_has-desktop-border-top {
    border-top: 1px solid #DADADA;
  }
}

.members-processing-page__content {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: flex-end;
}

.members-processing-page__footer {
  flex: 1;
}

.members-processing-page__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #1297AC;
  padding-bottom: 10px;
}

.members-processing-page__title {
  font-size: 42px;
  font-weight: 600;
}

.members-processing-page__sub-title {
  font-size: 25px;
}

.members-processing-page__description {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
}

.members-processing-page__loading-bar {
  height: 5px;
  width: 100%;
  animation: loading-bar 4s ease-out infinite;
}
.members-processing-page__loading-bar::before {
  content: "";
  display: block;
  width: 251px;
  height: 5px;
  background-color: #1297AC;
  border-radius: 32px;
}

@keyframes loading-bar {
  0% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(calc(100% - 221px));
  }
  100% {
    transform: translateX(-30px);
  }
}
.member-summary-card {
  background-color: #F8F8F8;
  border: 1px solid #EFEFEF;
  border-radius: 4.5px;
  box-sizing: border-box;
}
.member-summary-card_type-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
}
@media (max-width: 63.99em) {
  .member-summary-card_type-counter {
    padding: 20px 0;
  }
}

.member-summary-card__is-active {
  color: #1297AC;
}

.member-summary-card__is-pending {
  color: #FF9D2B;
}

.members-summary-header {
  width: 100%;
  height: 70px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-dark-grey-2);
  background-color: var(--color-light-grey-9);
  display: flex;
  align-items: center;
}

.members-summary-header__container {
  flex: 1;
  display: flex;
  padding: 15px 20px;
}
.members-summary-header__container_flex_1-5 {
  flex: 1.5;
}

.members-summary-header__name-item {
  flex: 1;
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.members-summary-header__count-item {
  display: flex;
  align-items: center;
  margin-right: 60px;
}

@media (max-width: 63.99em) {
  .members-summary-header_tablet-wrap {
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
}
@media (max-width: 63.99em) {
  .members-summary-header_tablet-wrap .members-summary-header__container:not(.members-summary-header_tablet-wrap .members-summary-header__container_is-empty) {
    flex: none;
    align-items: center;
    height: 70px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-light-blue);
  }
}
@media (max-width: 63.99em) {
  .members-summary-header_tablet-wrap .members-summary-header__container_is-empty {
    display: none;
  }
}
@media (min-width: 64em) {
  .members-summary-header_tablet-wrap .members-summary-header__container_flex_1-5 {
    flex: 1.5;
  }
}
@media (max-width: 63.99em) {
  .members-summary-header_tablet-wrap .members-summary-header__count-item {
    flex: 1;
  }
}

.map-benefits-table {
  max-width: 1200px;
}

.map-benefits-table__header {
  background-color: #EAEAEA;
  height: 46px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.map-benefits-table__header-text {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-size: 10px;
  color: #95989A;
}

.map-benefits-table__header-text_color_blue {
  color: #1297AC;
}

.map-benefits-table__row {
  background-color: #FFF;
  border-top: 1px solid #D2D8D8;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 16px;
  color: #4A4A4A;
  height: 60px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.map-benefits-table__row_is-discarded {
  background-color: rgba(213, 127, 115, 0.15);
}
.map-benefits-table__row_is-error {
  border: 1px solid var(--color-red);
}
@media (max-width: 73.115em) {
  .map-benefits-table__row {
    height: 120px;
  }
}

.map-benefits-table__row-arrow-right {
  width: 20px;
  height: 18px;
  background: url("/assets/images/themes/green/icons/arrow-right.svg") center no-repeat;
}

.map-benefits-table__actions {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.map-benefits-table__actions-discard {
  font-size: 13px;
  font-weight: 600;
  color: #D57F73;
}

.map-benefits-table__actions-restore {
  font-size: 13px;
  font-weight: 600;
  color: #1297AC;
  margin-left: 15px;
}

.map-benefits-table__click-restore {
  font-style: italic;
  font-weight: 13px;
  color: #95989A;
}

.class-memo-field {
  display: flex;
}
.class-memo-field_fill_parent {
  width: 100%;
  height: 100%;
}

.class-memo-field__trigger {
  display: flex;
  align-items: center;
}
.class-memo-field__trigger_is-hoverable:hover .class-memo-field__trigger-text {
  opacity: 0.8;
}
.class-memo-field__trigger_disabled {
  pointer-events: none;
}

.class-memo-field__trigger-text {
  height: 20px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  color: #1297AC;
  font-size: 10px;
  position: relative;
  display: flex;
  align-items: center;
}
.class-memo-field__trigger-text_disabled {
  color: #9B9B9B !important;
  font-style: italic;
}

.class-memo-field__popup-body {
  overflow-y: auto;
  max-height: calc(100vh - 210px);
  padding-left: 10px;
}
.class-memo-field__popup-body_text {
  font-size: 14px;
  color: #535353;
  padding: 0 10px 15px 10px;
}

.class-memo-field__popup {
  background-color: #FFF;
  border-radius: 3px;
  width: 200px;
}

.class-memo-field__popup-header {
  height: 40px;
  display: flex;
  padding: 0 10px;
  justify-content: flex-end;
}
.class-memo-field__popup-header_justify-content-start {
  justify-content: flex-start;
}

.waiting-period-rules-field {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-size: 14px;
}
.waiting-period-rules-field__text {
  color: #4A4A4A;
}
@media (min-width: 75em) {
  .waiting-period-rules-field__text {
    flex: 1;
  }
}
.waiting-period-rules-field__text_is-empty {
  color: #9B9B9B;
  font-style: italic;
}

.waiting-period-rules-class-memo-field {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-size: 14px;
}
.waiting-period-rules-class-memo-field__text {
  color: #4A4A4A;
  padding-right: 5px;
}
@media (min-width: 75em) {
  .waiting-period-rules-class-memo-field__text {
    flex: 1;
  }
}
.waiting-period-rules-class-memo-field__text_is-empty {
  color: #9B9B9B;
  font-style: italic;
}
.waiting-period-rules-class-memo-field__trigger {
  display: flex;
  align-items: center;
  min-width: -moz-max-content;
  min-width: max-content;
}
.waiting-period-rules-class-memo-field__trigger-text {
  height: 20px;
  color: #1297AC;
  font-weight: 600;
  position: relative;
  display: flex;
  align-items: center;
}
.waiting-period-rules-class-memo-field__popup {
  background-color: #FFF;
  border-radius: 3px;
  width: 200px;
}
.waiting-period-rules-class-memo-field__popup-header {
  height: 40px;
  display: flex;
  padding: 0 10px;
}
.waiting-period-rules-class-memo-field__popup-header_justify-content-end {
  justify-content: flex-end;
}
.waiting-period-rules-class-memo-field__popup-body {
  overflow-y: auto;
  max-height: calc(100vh - 210px);
  padding-left: 10px;
}
.waiting-period-rules-class-memo-field__popup-body_text {
  font-size: 14px;
  color: #535353;
  padding: 0 10px 15px 10px;
}

.notes-summary-table {
  height: 220px;
  overflow: hidden;
}
@media (max-width: 81.24em) {
  .notes-summary-table {
    height: 276px;
  }
}

.notes-summary-table__scrollable-content {
  height: 100%;
  transition: transform 400ms ease;
}

.partner-add-link-modal {
  display: block;
}

@media (max-width: 47.99em) {
  .partner-add-link-modal__links {
    padding-bottom: 10px;
  }
}

.partner-add-link-modal__item {
  margin-bottom: 20px;
}
@media (max-width: 47.99em) {
  .partner-add-link-modal__item {
    margin-bottom: 10px;
  }
}

.partner-comments {
  display: block;
}

.partner-comments__show-more {
  height: 35px;
  box-sizing: border-box;
  background-color: rgba(220, 237, 240, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #DADADA;
  cursor: pointer;
}
@media (max-width: 47.99em) {
  .partner-comments__show-more {
    height: 50px;
  }
}
.partner-comments__show-more:hover {
  opacity: 0.8;
}
.partner-comments__show-more:active {
  opacity: 1;
}

.partner-comments__content {
  background-color: #FFFFFF;
}
@media (min-width: 64em) {
  .partner-comments__content {
    padding: 0 20px;
  }
}
@media (max-width: 63.99em) {
  .partner-comments__content {
    padding: 0 10px;
  }
}

.partner-comments_is-loading .partner-comments__content {
  height: 110px;
}

.partner-comments__comment-box {
  padding: 15px 0;
  border-bottom: solid 1px #C7D7D7;
}
.partner-comments__comment-box_is-view-only:last-child {
  border-bottom: none;
}

.partner-comments__comment-form {
  padding-bottom: 20px;
}

.partner-comments__comment-form-title {
  color: #1297AC;
  display: block;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  padding: 17px 0 10px;
}

.partner-comments__comment-form-text-area {
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  -webkit-appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  background: #FFF;
  resize: none;
  width: 100%;
  height: 93px;
  border: solid 1px #DDE7E7;
  font-size: 13px;
  padding: 8px;
  box-sizing: border-box;
  transition: height 300ms ease;
  vertical-align: top;
}
.partner-comments__comment-form-text-area::-moz-placeholder {
  color: var(--color-light-grey-6);
  font-size: 13px;
  opacity: 1;
}
.partner-comments__comment-form-text-area::placeholder {
  color: var(--color-light-grey-6);
  font-size: 13px;
  opacity: 1;
}
.partner-comments__comment-form-text-area:focus {
  border-color: #056B7A;
}

.partner-comments__comment-form_is-minimized .partner-comments__comment-form-text-area {
  height: 45px;
}

.partner-comments__actions {
  display: flex;
  margin-top: 10px;
}
@media (max-width: 47.99em) {
  .partner-comments__actions {
    height: 50px;
    width: 100%;
    background-color: #FFF;
  }
}
@media (min-width: 48em) {
  .partner-comments__actions {
    align-items: center;
    justify-content: flex-end;
  }
}

@media (max-width: 47.99em) {
  .partner-comments__button {
    flex: 1;
  }
}
@media (min-width: 48em) {
  .partner-comments__button_is-secondary {
    margin-right: 20px;
  }
}

.plan-card-option {
  width: 100%;
  height: 130px;
  box-sizing: border-box;
  background-color: #FFF;
  padding: 20px 20px 10px;
  cursor: pointer;
}
.plan-card-option:hover {
  background-color: rgba(19, 151, 172, 0.07);
}
.plan-card-option:active, .plan-card-option.plan-card-option_is-active {
  background-color: rgb(244, 245, 247);
}
.plan-card-option_has-border-bottom {
  border-bottom: 1px solid #E3F4F6;
}
.plan-card-option_has-border-top {
  border-top: 1px solid;
  border-color: #DADADA;
}

.plan-card-option__benefit-card-info {
  display: flex;
  justify-content: flex-start;
}

.plan-card-option__carrier-logo {
  width: 100px;
  margin-right: 20px;
}

.plan-card-option__carrier-logo-img {
  width: 100px;
  max-height: 40px;
}

.plan-card-option__coverage-name {
  font-size: 16px;
  font-weight: 700;
  color: #5C5050;
}

.plan-card-option__carrier-name {
  font-size: 16px;
  color: #5C5050;
}

.plan-resources__product {
  width: 14px;
  height: 14px;
  margin-right: 7px;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.plan-resources__product_type_medical {
  background-image: url("/assets/images/icons/coverage-types/medical.svg");
}
.plan-resources__product_type_vision {
  background-image: url("/assets/images/icons/coverage-types/vision.svg");
}
.plan-resources__product_type_dental {
  background-image: url("/assets/images/icons/coverage-types/dental.svg");
}

.plan-resources__resource-added {
  width: 14px;
  height: 12px;
  background: url("/assets/images/icons/check.svg") center center no-repeat;
  background-size: auto 100%;
}

.plan-feature-smart-input-option {
  font-size: 14px;
  padding: 10px;
  color: #5C5050;
  background-color: #FFF;
  cursor: pointer;
}
.plan-feature-smart-input-option:hover {
  background-color: rgba(3, 79, 168, 0.2);
}

.prescription-formulary {
  background-color: #FFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  margin: 20px;
}
@media (max-width: 63.99em) {
  .prescription-formulary {
    margin: 20px 0;
  }
}

.probationary-periods-table {
  background-color: #FFF;
  padding: 0 20px;
}
@media (max-width: 47.99em) {
  .probationary-periods-table {
    padding: 0 10px;
  }
}
.probationary-periods-table:last-of-type {
  border-bottom: 1px solid #9AA9A9;
}

.probationary-periods-table__row {
  border-bottom: 1px solid #CBDADA;
}
.probationary-periods-table__row_border-bottom_none {
  border-bottom: none;
}

.probationary-periods-table__probation-name-container {
  height: 100%;
  width: 100%;
  display: flex;
}
@media (min-width: 87.5em) {
  .probationary-periods-table__probation-name-container {
    align-items: center;
  }
}
@media (max-width: 87.49em) {
  .probationary-periods-table__probation-name-container {
    flex-direction: column;
    justify-content: flex-end;
  }
}

.probationary-periods-table__probation-name {
  color: #9B9B9B;
  font-size: 10px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
}
@media (min-width: 87.5em) {
  .probationary-periods-table__probation-name_has-margin {
    margin-right: 15px;
  }
}
@media (max-width: 87.49em) {
  .probationary-periods-table__probation-name_has-margin {
    margin-bottom: 5px;
  }
}

.quoting-settings__header-container {
  height: 60px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
@media (min-width: 87.5em) {
  .quoting-settings__header-container {
    border-bottom: solid 1px #EAEAEA;
  }
}

.quoting-settings__header {
  background-color: #EAEAEA;
  height: 100%;
  width: 100%;
  display: flex;
  white-space: nowrap;
}
@media (max-width: 63.99em) {
  .quoting-settings__header {
    height: calc(100% + 17px);
    overflow-x: scroll;
    overflow-y: hidden;
  }
}

.quoting-settings__header-nav {
  height: 60px;
}

.quoting-settings__header-actions {
  display: flex;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
  gap: 25px;
}

.quoting-settings-field {
  background-color: #FFFFFF;
  margin-bottom: 10px;
  padding: 0 12px;
  box-sizing: border-box;
  border: solid 0.5px #C7D7D7;
  max-width: 1148px;
}
@media (max-width: 63.99em) {
  .quoting-settings-field {
    padding: 0 20px;
  }
}

.quoting-settings-field__subsection {
  margin-bottom: 15px;
}
.quoting-settings-field__subsection:not(:last-child) {
  border-bottom: solid 1px #98B7B7;
}

.quoting-settings-field__header {
  display: flex;
}

.quoting-settings-field__title {
  padding-top: 17px;
  flex: 1;
  font-weight: bold;
  font-size: 16px;
}
.quoting-settings-field__title_has-margin-bottom {
  margin-bottom: 15px;
}
.quoting-settings-field__title_is-disabled {
  color: #979797;
}

.quoting-settings-field__subtitle {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px;
}

.quoting-settings-field__description {
  margin-top: 7px;
  margin-bottom: 20px;
}
.quoting-settings-field__description_is-disabled {
  color: #979797;
  margin-bottom: 7px;
}

.quoting-settings-field__disabled-note {
  margin-bottom: 10px;
  color: #D57F73;
  font-style: italic;
}

.quoting-settings-field__toggle-switch {
  padding-top: 11px;
}

.quoting-settings-field__wrapper {
  max-width: 400px;
}

.renew-employer-manage-members {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.renew-employer-manage-members_is-centered {
  height: 100%;
  justify-content: center;
}

.renew-employer-manage-members__title {
  color: #1297AC;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 15px;
}

.radio-permissions {
  padding: 15px 0;
  padding-left: 3px;
}

.radio-permissions__radio {
  margin-top: 15px;
}
.radio-permissions__radio:first-child {
  margin-top: 0;
}

.selected-benefit-card {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  margin-bottom: 20px;
  background-color: #FFFFFF;
}

.selected-benefit-card__header {
  padding-left: 10px;
  height: 45px;
  background-color: #F4F4F4;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.selected-benefit-card__type-icon {
  height: 16px;
  width: 16px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

.selected-benefit-card__content {
  padding: 25px 20px 20px 20px;
}

.selected-benefit-card__setup-field {
  display: flex;
  font-weight: 600;
}

.selected-benefit-card__setup-label {
  margin-right: 8px;
}

.set-up-plan-details__top-grid {
  border: 1px solid #DADADA;
  background-color: #FFF;
  padding: 20px;
  display: flex;
  align-items: center;
}

.set-up-plan-details__top-grid-img {
  width: 100%;
  max-height: 90px;
}

.set-up-plan-details__top-grid-plan-name {
  font-weight: bold;
  font-size: 16px;
}

.set-up-plan-details__top-grid-carrier-name {
  font-size: 16px;
}

.set-up-plan-details__section:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #5C5050;
  opacity: 0.3;
  margin: 30px 0 20px;
}
.set-up-plan-details__section:first-of-type:before {
  background: none;
  margin: 20px 0 0;
}

.set-up-plan-details__section-content {
  box-sizing: border-box;
  max-width: 1135px;
  width: 100%;
}

.set-up-plan-details__section-title {
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.set-up-plan-details__title {
  flex: 1;
}

.set-up-plan-details__rates-table {
  border: 1px solid #DADADA;
  background-color: #FFF;
  padding: 10px 10px 0;
  margin-top: 15px;
}

.set-up-plan-details__screen-notice {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

.set-up-plan-details__content {
  overflow-y: auto;
}

.set-up-plan-details__empty-details {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 130px;
  margin-top: 15px;
  background: white;
  border: solid thin #C7D7D7;
}

.set-up-plan-details__empty-details-icon {
  margin-bottom: 13px;
  width: 22px;
  height: 22px;
}
.set-up-plan-details__empty-details-icon_type_life {
  width: 21px;
}

.set-up-plan-details__empty-details-text {
  font-size: 18px;
  color: #1297AC;
}

.set-up-plan-details__select-all-content {
  display: flex;
}

.set-up-plan-details__select-all-text {
  font-size: 14px;
  color: #4A4A4A;
  font-style: italic;
}

.set-up-plan-details__horizontal-border {
  width: 100%;
  height: 1px;
  background-color: #DADADA;
  margin-top: 21px;
}

.set-up-plan-details__section-title-container {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.set-up-plan-details__edi-title {
  display: flex;
  align-items: center;
}

.set-up-plan-details__edi-title-text {
  font-size: 16px;
  font-weight: 700;
  margin-right: 5px;
}

.set-up-plan-details__edi-title-count {
  font-style: italic;
  font-size: 14px;
}

.skip-members-card {
  width: 565px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #FFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
  border-radius: 5px;
  margin-top: 10px;
}
@media (max-width: 63.99em) {
  .skip-members-card {
    width: 100%;
  }
}

.skip-members-card__title {
  margin-top: 25px;
  font-size: 16px;
  font-weight: bold;
}

.skip-members-card__details {
  width: 500px;
  margin-top: 15px;
  font-size: 14px;
}

.skip-members-card__button-row {
  margin-top: 25px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.sub-employer-field-card {
  background-color: #FFF;
  border: 1px solid #CBDBDB;
  margin-bottom: 20px;
}
.sub-employer-field-card_border-color_red {
  border-color: var(--color-red);
}

.sub-employer-field-card__header {
  padding: 10px 20px;
  display: flex;
  align-items: center;
}
.sub-employer-field-card__header_has-border-bottom {
  border-bottom: 1px solid #CBDBDB;
}

.sub-employer-field-card__header-title {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.sub-employer-field-card__header-button {
  display: flex;
  align-items: center;
}

.sub-employer-field-card__content {
  margin: 10px 20px;
}

.sub-employer-field-card__content-header {
  display: flex;
  align-items: center;
}

.sub-employer-field-card__select-all-checkbox {
  flex: 1;
}

.sub-employer-field-card__select-all-checkbox-label {
  font-size: 14px;
  font-style: italic;
  color: #95989A;
  display: flex;
  align-items: center;
}

.sub-employer-field-card__show-hide-button {
  font-size: 14px;
  color: #95989A;
  display: flex;
  align-items: center;
}
.sub-employer-field-card__show-hide-button_has-collapse-arrow::after, .sub-employer-field-card__show-hide-button_has-expand-arrow::after {
  content: "";
  margin-left: 5px;
  display: inline-block;
  width: 10px;
  height: 18px;
  background: url("/assets/images/icons/collapse.svg") center no-repeat;
  background-size: 100%;
  transition: transform 200ms ease;
}
.sub-employer-field-card__show-hide-button_has-collapse-arrow::after {
  transform: rotate(180deg);
}

.sub-employer-field-card__sub-employer {
  margin-top: 15px;
}

.sub-employer-field-card__sub-employer-label {
  font-size: 14px;
  font-weight: 600;
  color: #5C5050;
  display: flex;
  align-items: center;
}

.subgroup-type {
  display: flex;
  flex-direction: column;
  margin: 0 20px 20px 20px;
}
.subgroup-type_no-side-margins {
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 63.99em) {
  .subgroup-type {
    margin: 0 0 20px 0;
  }
}

.subgroup-type__content {
  background-color: #FFFFFF;
  border-radius: 5px;
  padding: 20px 10px 0 10px;
}
@media (max-width: 63.99em) {
  .subgroup-type__content {
    padding: 20px 6px 0 6px;
  }
}

.subgroup-type__header {
  display: flex;
  justify-content: space-between;
}

.subgroup-type__header-title {
  font-weight: 600;
  margin-right: 15px;
  font-size: 16px;
}
@media (max-width: 63.99em) {
  .subgroup-type__header-title {
    margin-left: 4px;
  }
}

.subgroup-type__header-button-container {
  display: flex;
  justify-content: space-between;
  gap: 57px;
  padding-right: 10px;
}
@media (max-width: 63.99em) {
  .subgroup-type__header-button-container {
    gap: 27px;
  }
}

.subgroup-type__sub-header {
  background-color: #F8F8F8;
  border-radius: 4px;
  margin: 20px 0;
  padding: 10px 0 15px 0;
}

.subgroup-type__footer {
  display: flex;
  height: 45px;
}

.subgroup-type__subgroup {
  border-top: solid 1px #CBDADA;
  padding: 20px 0 10px 0;
}
.subgroup-type__subgroup:first-child {
  border-top: none;
  padding-top: 0;
}

.subgroup-type__last-updated,
.subgroup-type__created-by {
  color: #9B9B9B;
  font-style: italic;
  font-size: 13px;
}

.subgroup-type-form {
  color: #494949;
}

.subgroup-type-form__title {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #494949;
}

.subgroup-type-form__content {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
@media (max-width: 47.99em) {
  .subgroup-type-form__content {
    padding: 10px 20px 0;
  }
}

.subgroup-type-form__form-field {
  max-width: 308px;
}
@media (max-width: 47.99em) {
  .subgroup-type-form__form-field {
    width: 80%;
  }
}

.subgroup-type-form__bill-setup-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.subgroup-type-form__bill-setup-option {
  margin-bottom: 8px;
  font-size: 14px;
}
@media (max-width: 47.99em) {
  .subgroup-type-form__bill-setup-option:last-child {
    margin-bottom: 0;
  }
}

.subgroup-type-form__setup-subgroups-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.subgroup-type-form__setup-subgroups-subtitle {
  font-size: 14px;
  margin-bottom: 20px;
}
@media (max-width: 47.99em) {
  .subgroup-type-form__setup-subgroups-subtitle {
    margin-bottom: 16px;
  }
}

.subgroup-card {
  display: grid;
  grid-template-rows: 2fr;
  grid-template-columns: 10px auto;
  row-gap: 13px;
  -moz-column-gap: 10px;
       column-gap: 10px;
  grid-template-areas: "number content" ".      separator";
  padding-bottom: 10px;
}

.subgroup-card__number {
  grid-area: number;
  color: #5E5E5E;
  font-size: 16px;
  font-weight: 600;
  margin-top: 25px;
}

.subgroup-card__content {
  grid-area: content;
}

.subgroup-card__separator {
  grid-area: separator;
}

.subgroup-card__default-checkbox {
  font-size: 14px;
  color: #5E5E5E;
}

.subgroup-card__field_is-hidden {
  display: none;
}

.subgroup-card__carrier {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  margin-top: 10px;
}

.subgroup-view-carriers-modal__info {
  margin: 2px 0;
}
@media (max-width: 47.99em) {
  .subgroup-view-carriers-modal__info {
    margin: 20px 10px 10px 10px;
  }
}

.subgroup-view-carriers-modal__info-field {
  background-color: #FFFFFF;
  padding: 12px;
  margin-bottom: 10px;
}

.subgroup-view-carriers-modal__carriers-list-header-item {
  font-size: 10px;
  color: #9B9B9B;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

.suspension-option {
  display: flex;
  align-items: baseline;
}

.suspension-option__card {
  width: 100%;
  border: 1px solid #D2DFDF;
  background-color: #FFF;
  margin-top: 12px;
}

.task-documents {
  display: block;
}
.task-documents_has-bottom-margin {
  margin-bottom: 65px;
}

.task-documents__empty-state {
  box-sizing: border-box;
  height: 215px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 115px;
  background: center 50px url("/assets/images/icons/documents.svg") no-repeat;
  background-size: 35px 40px;
  background-color: #FFFFFF;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.39);
}

.task-documents__empty-state-description {
  padding-bottom: 25px;
}

.task-documents__list {
  border: solid thin #C7D7D7;
}
.task-documents__list_is-loading {
  height: 100px;
  background-color: #FFF;
}
.task-documents__list_no-border {
  border: none;
}
.task-documents__list_has-margin-top {
  margin-top: 15px;
}

.task-documents__document-row {
  box-sizing: border-box;
  background-color: #FFF;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: solid thin #C7D7D7;
}
.task-documents__document-row:last-child {
  border-bottom: none;
}
@media (max-width: 47.99em) {
  .task-documents__document-row {
    height: auto;
    min-height: 70px;
    align-items: center;
    padding: 10px 10px 5px;
  }
}

.task-documents__document-link-and-info-container {
  flex: 1;
  display: flex;
  width: 100%;
}
@media (max-width: 47.99em) {
  .task-documents__document-link-and-info-container {
    flex-direction: column;
  }
}

.task-documents__document-info-and-actions {
  display: flex;
  flex: 1;
}

.task-documents__remove-button {
  padding-left: 20px;
}

.task-documents__link {
  flex: 1;
  min-width: 0;
  display: flex;
  padding-right: 5px;
  margin-bottom: 3px;
}
@media (min-width: 48em) {
  .task-documents__link {
    align-self: center;
  }
}

.task-documents__add-document {
  margin-top: 24px;
}

.task-documents__shared-with {
  flex: 1;
  font-size: 14px;
  color: #4A4A4A;
}

.task-note-displayer {
  display: block;
}
@media (min-width: 48em) {
  .task-note-displayer {
    padding: 0 22px 20px;
  }
}

.task-note-displayer__title-container {
  height: 63px;
  display: flex;
}

.task-note-displayer__title {
  height: 100%;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  flex: 1;
}
@media (max-width: 47.99em) {
  .task-note-displayer__title {
    padding-left: 10px;
  }
}

.task-note-displayer__block {
  margin-bottom: 10px;
}

.task-note-displayer__block-header {
  display: flex;
  align-items: center;
  margin-top: 25px;
  margin-right: 10px;
}
@media (max-width: 47.99em) {
  .task-note-displayer__block-header {
    margin: 30px 10px 10px 10px;
  }
}

.task-note-displayer__block-title {
  flex: 1;
  color: #4A4A4A;
  font-size: 10px;
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

.task-note-displayer__block-content {
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.task-note-displayer__section {
  background-color: white;
  font-size: 14px;
  padding: 10px 10px 20px;
}
.task-note-displayer__section_has-box-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.task-note-displayer__modified-by {
  color: #9B9B9B;
  font-style: italic;
  margin-bottom: 5px;
}

.task-note-displayer__created-by {
  color: #9B9B9B;
  font-style: italic;
}

.tasks-notes-workflow-details {
  display: block;
  height: 100%;
}

.tasks-notes-workflow-details__link-container {
  padding-bottom: 10px;
}

.tasks-notes-workflow-details__unlink-button {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tasks-notes-workflow-details__title {
  font-weight: 600;
  font-size: 18px;
  margin-top: 15px;
}
.tasks-notes-workflow-details__title:first-child {
  margin-top: 0;
}

.tasks-notes-workflow-details__content-section {
  margin-top: 15px;
}

.tasks-notes-workflow-details__critical-question {
  margin-top: 20px;
  margin-bottom: 12px;
}

.tw-permissions {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}

.tw-permissions__description {
  margin-bottom: 30px;
  padding: 18px 18px 0 18px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.tw-permissions__description-title {
  font-weight: 600;
  margin-bottom: 5px;
}

.tw-permissions__description-numbers {
  display: flex;
}
.tw-permissions__description-numbers:before {
  content: "";
  width: 12px;
  height: 12px;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 5px;
  margin-top: 5px;
}
.tw-permissions__description-numbers_type_one {
  margin-bottom: 3px;
}
.tw-permissions__description-numbers_type_one:before {
  background-image: url("/assets/images/icons/check.svg");
}
.tw-permissions__description-numbers_type_two {
  margin-bottom: 3px;
}
.tw-permissions__description-numbers_type_two:before {
  background-image: url("/assets/images/icons/pencil.svg");
}
.tw-permissions__description-numbers_type_three:before {
  background-size: 90%;
  background-image: var(--svg-x-red);
}

.tw-permissions__table {
  flex: 1;
  min-height: 0;
}

.upload-document-modal__field {
  height: 70px;
}

.upload-document-modal__field-group {
  margin-bottom: 15px;
}

.upload-document-modal__remove-button {
  height: 35px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.upload-document-modal__warning {
  margin-top: 5px;
  margin-bottom: 10px;
}

.undo-employer-renewal {
  display: block;
  color: #494949;
}

.undo-employer-renewal__prompt {
  margin-top: 15px;
  margin-bottom: 20px;
}

.view-employees-list {
  width: 160px;
}

.view-employees-list__modal {
  width: 200px;
  background-color: #FFF;
  border-radius: 3px;
  position: absolute;
  z-index: 2;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  animation: employees-list__fade-in 300ms linear;
}

.view-employees-list__employee-name {
  margin-bottom: 2px;
}

.view-employee-list__copy-button-container {
  padding: 0 10px;
  margin-bottom: 14px;
}

.view-employee-list__eye-icon-container {
  padding-left: 5px;
  padding-bottom: 7px;
}
.view-employee-list__eye-icon-container .view-employees-list__eye-icon {
  cursor: pointer;
}

.view-employees-list__view-link {
  margin: 10px 0;
}

.view-employees-list__employees {
  max-height: 285px;
  overflow-y: scroll;
  padding-top: 13px;
  padding-left: 10px;
  margin-bottom: 9px;
  font-size: 13px;
}

.view-employees-list__eye-icon {
  background: url("/assets/images/icons/eye.svg") left center no-repeat;
  background-size: 15px 8px;
  height: 8px;
  width: 15px;
}

@keyframes employees-list__fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.view-member-details__plans {
  margin-top: 21px;
}

.view-member-details__coverage-type-group {
  margin-bottom: 23px;
}

.view-member-details__coverage-type {
  font-size: 10px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  color: #9B9B9B;
}

.view-member-details__plan {
  margin-top: 10px;
}

.workflow-error-card {
  width: 525px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #FFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
  border-radius: 5px;
  margin: 30px auto;
}
@media (max-width: 63.99em) {
  .workflow-error-card {
    width: calc(100% - 100px);
  }
}

.workflow-error-card__image {
  width: 46px;
  height: 46px;
  margin-top: 15px;
  margin-bottom: 12px;
  background-image: url("/assets/images/icons/x-red-circle.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.workflow-error-card__title {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 300;
  color: var(--color-red);
}

.workflow-error-card__subtitle {
  margin-top: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}

.workflow-error-card__options-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.workflow-error-card__options-details {
  font-size: 14px;
  margin-bottom: 15px;
}

.workflow-error-card__options-error-message {
  background-color: #EAEAEA;
  max-width: 400px;
  border-radius: 5px;
  font-size: 11px;
  padding: 8px;
}

.carrier-suspension-card {
  padding: 10px;
  background: #FFF;
}

.carrier-suspension-card__logo {
  width: 100%;
}

.carrier-suspension-card__name-container {
  display: flex;
  height: 100%;
  align-items: center;
}

.carrier-suspension-card__name {
  color: #5E5E5E;
  font-size: 14px;
  font-weight: 600;
}

.report-types {
  padding: 20px;
}

.report-types__category {
  font-size: 12px;
  color: #4A4A4A;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.report-types__report-section {
  margin-bottom: 20px;
  background: #FFFFFF;
  border-radius: 10px;
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
  display: flex;
}

.report-types__widgets {
  display: flex;
  gap: 25px;
  height: 90px;
  width: 100%;
}

.report-types__widget {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  background: #F8F8F8;
  border: 1px solid #1297AC;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
}
.report-types__widget:hover, .report-types__widget:focus {
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

.report-types__widget-count {
  color: #1297AC;
  font-size: 18px;
  font-weight: 700;
  min-height: 30px;
  display: flex;
  align-items: center;
}

.report-types__widget-type {
  font-size: 10px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: #4A4A4A;
}

.report-types__empty-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 20px 0;
}

.report-types__icon {
  background: url("/assets/images/icons/reporting.svg") center center no-repeat;
  background-size: 100% 100%;
  width: 25px;
  height: 20px;
  margin-bottom: 20px;
}

.report-types__empty-section-description {
  font-size: 23px;
  font-weight: 300;
  color: #1297AC;
  font-family: "Source Sans Pro", sans-serif;
}

.view-report-fields {
  display: block;
}

.view-report-fields__trigger {
  display: flex;
  align-items: center;
}
.view-report-fields__trigger_is-hoverable:hover .view-report-fields__trigger-text {
  opacity: 0.8;
}

.view-report-fields__trigger-text {
  font-size: 13px;
  color: #1297AC;
}

.view-report-fields__popup {
  background-color: #FFF;
  border-radius: 3px;
  width: 200px;
  padding: 20px;
}
.view-report-fields__popup_width_two-columns {
  width: 400px;
}
@media (max-width: 47.99em) {
  .view-report-fields__popup_width_two-columns {
    width: 280px;
  }
}

.view-report-fields__popup-body {
  overflow-y: auto;
  max-height: calc(100vh - 210px);
  font-size: 16px;
  color: #535353;
  padding-top: 20px;
}
.view-report-fields__popup-body_column-count_2 {
  -moz-column-count: 2;
       column-count: 2;
}

.edit-user-details {
  width: 100%;
}

.edit-user-details__account-info {
  display: flex;
  flex-direction: column;
  background-color: #FFF;
  padding: 20px 15px;
  border: 1px solid #DDE7E7;
}
@media (max-width: 47.99em) {
  .edit-user-details__account-info {
    margin-top: 20px;
  }
}

.edit-user-details__account-info-field {
  width: 100%;
  height: 70px;
}
.edit-user-details__account-info-field_margin-top_10 {
  margin-top: 10px;
}

.edit-user-details__mfa-card {
  background-color: #FFF;
  border: 1px solid #DDE7E7;
  padding: 20px;
  margin: 20px 0 10px;
}
@media (max-width: 47.99em) {
  .edit-user-details__mfa-card {
    margin: 10px 0 0;
  }
}

.edit-user-details__mfa-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.edit-user-details__mfa-card-title {
  font-weight: 700;
  font-size: 18px;
  flex: 1;
}

.edit-user-details__mfa-card-header-actions {
  display: flex;
  align-items: center;
}

.edit-user-details__mfa-card-header-refresh {
  height: 40px;
}

.edit-user-details__mfa-card-header-toggle-mfa {
  display: flex;
}

.edit-user-details__mfa-card-description {
  font-size: 16px;
  font-weight: 400;
}

.edit-user-details__mfa-card-grey-field {
  margin-top: 20px;
}

.edit-user-details__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.edit-user-details__empty-icon {
  width: 80px;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 20px;
}
.edit-user-details__empty-icon_type_user {
  height: 35px;
  background-size: auto 100%;
  background-image: url("/assets/images/icons/member.svg");
  background-repeat: no-repeat;
}

.edit-user-details__empty-title {
  text-align: center;
  font-size: 18px;
  color: #1297AC;
  margin-bottom: 10px;
}

.temporary-password-card {
  background-color: #FFF;
  border: 1px solid #DDE7E7;
  padding: 20px;
  margin: 20px 0 10px;
}
@media (max-width: 47.99em) {
  .temporary-password-card {
    margin: 10px 0 0;
  }
}

.temporary-password-card__header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.temporary-password-card__title {
  font-weight: 700;
  font-size: 18px;
  flex: 1;
}

.temporary-password-card__header-actions {
  display: flex;
  align-items: center;
}

.temporary-password-card__header-toggle {
  display: flex;
}

.temporary-password-card__description {
  font-size: 16px;
  font-weight: 400;
}

.temporary-password-card__grey-field {
  margin-top: 20px;
}

.temporary-password-card__footer-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}
@media (max-width: 23.4275em) {
  .temporary-password-card__footer-actions {
    justify-content: flex-start;
  }
}

.temporary-password-card__copy-action {
  position: relative;
}

.temporary-password-card__copied-tooltip {
  position: absolute;
  bottom: 100%;
  left: 35%;
  background-color: #393939;
  color: #FFF;
  padding: 8px 16px;
  border-radius: 2px;
  font-size: 14px;
  white-space: nowrap;
  margin-bottom: 10px;
  z-index: 1;
}
.temporary-password-card__copied-tooltip::before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  width: 11px;
  height: 8px;
  background: url("/assets/images/icons/white-check.svg") left center no-repeat;
}
.temporary-password-card__copied-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #393939;
}

.cdhp-amount-field {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-left: 4px;
}
.cdhp-amount-field_cursor_pointer {
  cursor: pointer;
}
.cdhp-amount-field_is-error {
  border: 1px solid var(--color-red);
}
.cdhp-amount-field_is-disabled {
  color: #9B9B9B;
}

.cdhp-amount-field__container {
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: solid 1px var(--color-light-grey-5);
  padding-top: 7px;
}

.cdhp-amount-field__value {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cdhp-amount-field__placeholder {
  flex: 1;
  color: var(--color-light-grey-6);
}

.cdhp-amount-field__edit-icon {
  width: 9px;
  height: 9px;
  background: url("/assets/images/icons/pencil.svg") center no-repeat;
}

.waiting-period-rules-infographic {
  display: flex;
  flex-direction: row;
  align-items: center;
}
@media (max-width: 47.99em) {
  .waiting-period-rules-infographic {
    flex-direction: column;
    align-items: flex-start;
  }
}

.waiting-period-rules-infographic__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 35px;
}
@media (max-width: 47.99em) {
  .waiting-period-rules-infographic__text {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

.waiting-period-rules-infographic__title {
  font-family: "Montserrat", sans-serif;
  color: #494949;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.waiting-period-rules-infographic__description {
  font-size: 14px;
  margin-top: 10px;
}

@media (max-width: 63.99em) {
  .waiting-period-rules-infographic__image-container {
    align-self: center;
  }
}

.waiting-period-rules-infographic__image {
  width: 554px;
  height: 97px;
  background-size: 554px 97px;
  background-image: url("/assets/images/waiting-period-rules-infographic-desktop.svg");
}
@media (max-width: 63.99em) {
  .waiting-period-rules-infographic__image {
    width: 300px;
    height: 93px;
    background-size: 300px 93px;
    background-image: url("/assets/images/waiting-period-rules-infographic-mobile.svg");
  }
}

.date-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 63.99em) {
  .date-filter {
    flex-direction: column;
  }
}

.date-filter__text {
  font-size: 14px;
}

.date-filter__container {
  display: flex;
}

.date-filter__button {
  font-size: 14px;
  color: #1397AC;
}
.date-filter__button:hover {
  text-decoration: underline;
}
.date-filter__button_is-disabled {
  color: #B0B0B0;
  pointer-events: none;
  cursor: default;
}

.date-filter__pipe {
  margin-left: 2px;
  margin-right: 2px;
  font-size: 14px;
  color: #B0B0B0;
}

.eligibility-history {
  height: 100%;
}

.eligibility-history__table {
  overflow: auto;
  height: calc(100% - 55px);
}
@media (max-width: 63.99em) {
  .eligibility-history__table {
    height: calc(100% - 85px);
  }
}

.eligibility-history__header {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: 10px;
  height: 55px;
  margin-left: 20px;
  margin-right: 20px;
}
@media (max-width: 63.99em) {
  .eligibility-history__header {
    height: 85px;
  }
}
@media (max-width: 47.99em) {
  .eligibility-history__header {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.eligibility-history__actions {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  height: 55px;
}

.eligibility-history__action {
  height: 100%;
}

.eligibility-history__title {
  color: #494949;
  font-weight: bold;
}

.eligibility-history__section {
  background-color: #FFF;
}

.eligibility-history__eligibilities-container {
  box-shadow: 4px 2px 4px 0 rgba(0, 0, 0, 0.12);
}

.eligibility-history__section-separator {
  height: 1px;
  background-color: #E8F6F8;
  margin: 0 20px;
}
@media (max-width: 47.99em) {
  .eligibility-history__section-separator {
    margin: 0 10px;
  }
}

.eligibility-history__separator {
  height: 1px;
  background-color: #B9CECE;
}

.documents-icon {
  min-width: 12px;
  min-height: 12px;
  margin-right: 10px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.documents-icon_type_file {
  background-image: url("/assets/images/themes/green/icons/document.svg");
}
.documents-icon_type_folder {
  background-image: url("/assets/images/icons/folder.svg");
}
.documents-icon_type_link {
  background-image: url("/assets/images/themes/green/icons/horizontal-link.svg");
}
.documents-icon_type_archive {
  background-image: url("/assets/images/themes/green/icons/archive.svg");
}
.documents-icon_type_attachment {
  margin-right: 5px;
  background-image: url("/assets/images/themes/green/icons/attachment.svg");
}
.documents-icon_type_lock {
  margin-right: 5px;
  background-image: url("/assets/images/themes/green/icons/lock.svg");
}
.documents-icon_type_arrow {
  margin: 0 10px;
  background-image: url("/assets/images/icons/arrow-right-short.svg");
}
.documents-icon_type_arrow-inverted {
  margin: 0 5px;
  background-image: url("/assets/images/icons/arrow-right-short.svg");
  transform: rotate(180deg);
}

:root {
  --folder-name-max-width: 0;
}

.folder-path {
  display: flex;
}

.folder-path__container {
  display: flex;
  align-items: center;
}

.folder-path__folder-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 5px;
  max-width: var(--folder-name-max-width);
  cursor: pointer;
}
.folder-path__folder-name_max-width_300 {
  max-width: 300px;
}
.folder-path__folder-name_font-weight_semibold {
  font-weight: 600;
}

.employee-profile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  height: 100%;
}

.employee-profile__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 50px;
}
@media (max-width: 81.24em) {
  .employee-profile__header {
    padding: 0 16px;
  }
}
@media (min-width: 81.25em) {
  .employee-profile__header {
    padding: 0 35px;
  }
}

.employee-profile__content {
  overflow: auto;
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 63.99em) {
  .employee-profile__content {
    padding: 20px 0;
  }
}
@media (min-width: 64em) and (max-width: 81.24em) {
  .employee-profile__content {
    padding: 20px 10px;
  }
}
@media (min-width: 81.25em) {
  .employee-profile__content {
    padding: 35px;
  }
}

.employee-profile__section {
  background-color: #FFF;
}
@media (max-width: 63.99em) {
  .employee-profile__section {
    border: 1px solid #C7D7D7;
    border-width: 1px 0;
  }
}
@media (min-width: 64em) {
  .employee-profile__section {
    border: 1px solid #C7D7D7;
  }
}

.employee-profile__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
  padding: 0 20px;
  background-color: #FFF;
  border-bottom: 1px solid var(--color-light-blue);
}
.employee-profile__section-header_justify-content_flex-start {
  justify-content: flex-start;
}

.employee-profile__section-header-buttons {
  display: flex;
  gap: 20px;
}

.employee-profile__section-header-dots-menu {
  height: 50px;
  width: 40px;
}

.employee-profile__section-header-title {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #494949;
}
.employee-profile__section-header-title:before {
  display: none;
  content: "";
  margin-right: 8px;
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.employee-profile__section-header-title_icon_contact:before {
  display: inline-block;
  width: 16px;
  height: 18px;
  background-image: url("/assets/images/icons/contact.svg");
}
.employee-profile__section-header-title_icon_documents:before {
  display: inline-block;
  width: 10px;
  height: 12px;
  background-image: url("/assets/images/icons/documents.svg");
}
.employee-profile__section-header-title_icon_user-info:before {
  display: inline-block;
  width: 16px;
  height: 18px;
  background-image: url("/assets/images/icons/self-service.svg");
}
.employee-profile__section-header-title_icon_salary:before {
  display: inline-block;
  width: 17px;
  height: 14px;
  background-image: url("/assets/images/icons/hand-holding-coin.svg");
}
.employee-profile__section-header-title_flex-1 {
  flex: 1;
}

.employee-error-card {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
}

.employee-error-card__header {
  height: 50px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid #C7D7D7;
}

.employee-error-card__header-title {
  position: relative;
  color: #494949;
  font-size: 16px;
  font-weight: 700;
}

.employee-error-card__header-icon {
  background-position: center center;
  background-repeat: no-repeat;
  margin-right: 8px;
}
.employee-error-card__header-icon_type_user-info {
  background-image: url("/assets/images/icons/self-service.svg");
  width: 16px;
  height: 18px;
}
.employee-error-card__header-icon_type_dependents {
  width: 16px;
  height: 10px;
  background-image: url("/assets/images/icons/dependents.svg");
}
.employee-error-card__header-icon_type_benefits {
  width: 12px;
  height: 16px;
  background: url("/assets/images/icons/benefits.svg") center no-repeat;
}
.employee-error-card__header-icon_type_beneficiaries {
  width: 20px;
  height: 12px;
  background-image: url("/assets/images/icons/beneficiaries.svg");
}

.employee-error-card__content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.employee-error-card__icon {
  width: 46px;
  height: 46px;
  background-image: url("/assets/images/icons/x-red-circle.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.employee-error-card__title {
  font-size: 20px;
  font-weight: 300;
  color: var(--color-red);
  margin-top: 20px;
  margin-bottom: 6px;
  font-family: "Montserrat", sans-serif;
}
@media (max-width: 63.99em) {
  .employee-error-card__title {
    font-size: 16px;
  }
}

.employee-error-card__subtitle {
  color: #4A4A4A;
  margin-bottom: 25px;
}

.benefits-waiting-periods-details {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.benefits-waiting-periods-details__header {
  color: #4A4A4A;
  background-color: #FFFFFF;
  border: 1px solid #C8D8D8;
  height: 37px;
  padding: 15px 20px;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "carrier-logo plan-info periods-count";
  align-items: center;
  gap: 10px;
}
@media (max-width: 31.24em) {
  .benefits-waiting-periods-details__header {
    align-items: start;
    height: auto;
    grid-template-areas: "carrier-logo  .   periods-count" "plan-info     .   .";
  }
}
.benefits-waiting-periods-details__carrier-logo {
  width: 100px;
  height: 37px;
  grid-area: carrier-logo;
}
.benefits-waiting-periods-details__plan-info {
  width: 100%;
  grid-area: plan-info;
}
.benefits-waiting-periods-details__plan-name {
  font-weight: bold;
  font-size: 15px;
}
.benefits-waiting-periods-details__carrier-name {
  font-size: 14px;
  color: #5E5E5E;
}
.benefits-waiting-periods-details__periods-count {
  width: 100%;
  font-size: 14px;
  grid-area: periods-count;
}
.benefits-waiting-periods-details__content {
  flex: 1;
}
.benefits-waiting-periods-details__table-header {
  display: grid;
  align-items: center;
  -moz-column-gap: 15px;
       column-gap: 15px;
  grid-template-columns: repeat(5, 1fr);
  height: 42px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #EAEAEA;
  border-bottom: 1px solid #D2D8D8;
}
@media (max-width: 47.99em) {
  .benefits-waiting-periods-details__table-header {
    display: none;
  }
}
.benefits-waiting-periods-details__table-header-text {
  display: flex;
  gap: 5px;
  color: #979797;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}
.benefits-waiting-periods-details__table {
  display: flex;
  flex-direction: column;
}
@media (max-width: 47.99em) {
  .benefits-waiting-periods-details__table {
    gap: 30px;
  }
}
.benefits-waiting-periods-details__table-row {
  display: grid;
  padding: 15px 20px;
  -moz-column-gap: 15px;
       column-gap: 15px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: "enrollment-reasons classes waiting-period-rule start-date stop-date";
  background-color: #FFFFFF;
  border-bottom: 1px solid #C8D8D8;
}
@media (max-width: 47.99em) {
  .benefits-waiting-periods-details__table-row {
    border-top: 1px solid #C8D8D8;
    grid-template-columns: 1fr 1fr;
    row-gap: 30px;
    grid-template-areas: "enrollment-reasons   enrollment-reasons" "classes              classes" "waiting-period-rule  waiting-period-rule" "start-date           stop-date";
  }
}
.benefits-waiting-periods-details__table-cell_is-enrollment-reasons {
  grid-area: enrollment-reasons;
}
.benefits-waiting-periods-details__table-cell_is-classes {
  grid-area: classes;
}
.benefits-waiting-periods-details__table-cell_is-waiting-period-rule {
  grid-area: waiting-period-rule;
}
.benefits-waiting-periods-details__table-cell_is-start-date {
  grid-area: start-date;
}
.benefits-waiting-periods-details__table-cell_is-stop-date {
  grid-area: stop-date;
}
.benefits-waiting-periods-details__grey-tag-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.benefits-edi-setup {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.benefits-edi-setup__header {
  color: #4A4A4A;
  background-color: #FFFFFF;
  border: 1px solid #C8D8D8;
  padding: 15px 20px;
}
.benefits-edi-setup__carrier-logo {
  width: 100px;
  height: 37px;
}
.benefits-edi-setup__plan-name {
  font-weight: bold;
  font-size: 15px;
}
.benefits-edi-setup__carrier-name {
  font-size: 14px;
  color: #5E5E5E;
}
.benefits-edi-setup__suspended {
  width: 100%;
  font-size: 14px;
  color: var(--color-red);
}
.benefits-edi-setup__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.benefits-edi-setup__category {
  gap: 10px;
  display: flex;
  flex-direction: column;
}
.benefits-edi-setup__category-title {
  font-weight: 600;
  font-size: 16px;
}
.benefits-edi-setup__plan {
  background-color: #FFFFFF;
  border: 1px solid #C8D8D8;
  padding: 15px 10px;
}

.benefits-eligible-classes-info-table {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media (max-width: 47.99em) {
  .benefits-eligible-classes-info-table {
    gap: 20px;
  }
}
.benefits-eligible-classes-info-table__header {
  color: #4A4A4A;
  background-color: #FFFFFF;
  border: 1px solid #C8D8D8;
  height: auto;
  padding: 15px 20px;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "carrier-logo plan-info classes-count";
  align-items: center;
  gap: 10px;
}
@media (max-width: 47.99em) {
  .benefits-eligible-classes-info-table__header {
    height: auto;
    grid-template-areas: "carrier-logo  plan-info   plan-info" "classes-count .           .";
  }
}
.benefits-eligible-classes-info-table__carrier-logo {
  width: 75px;
  height: 37px;
  grid-area: carrier-logo;
}
.benefits-eligible-classes-info-table__plan-info {
  width: 100%;
  grid-area: plan-info;
}
.benefits-eligible-classes-info-table__plan-name {
  font-weight: bold;
  font-size: 15px;
}
.benefits-eligible-classes-info-table__carrier-name {
  font-size: 14px;
  color: #5E5E5E;
}
.benefits-eligible-classes-info-table__classes-count {
  width: 100%;
  font-size: 14px;
  grid-area: classes-count;
}

.benefits-eligible-classes-info-table__class-based-rule-card-container {
  background-color: #FFF;
  border: 1px solid #C7D7D7;
  border-top: none;
}

.benefits-eligible-classes-info-table__class-based-rule-card-container-description {
  padding: 15px;
  padding-bottom: 20px;
}

.benefits-eligible-classes-info-table__class-based-rule-card-container-table {
  padding: 15px;
}
@media (max-width: 47.99em) {
  .benefits-eligible-classes-info-table__class-based-rule-card-container-table {
    padding: 0;
    border-top: 1px solid #C8D8D8;
  }
}

.waiting-period-rules-form-field {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid transparent;
}
.waiting-period-rules-form-field_is-focused:not(.waiting-period-rules-form-field_is-error) {
  border: 1px solid #1297AC;
}
.waiting-period-rules-form-field_has-active-border:not(.waiting-period-rules-form-field_is-error):hover, .waiting-period-rules-form-field_has-active-border:not(.waiting-period-rules-form-field_is-error):active {
  border: 1px solid #1297AC;
}
.waiting-period-rules-form-field_border-bottom_main-text-color:not(.waiting-period-rules-form-field_is-error) {
  border-bottom: 1px solid var(--color-dark-grey-2);
}
.waiting-period-rules-form-field_is-error {
  border: 1px solid var(--color-red);
}

.waiting-period-rules-form-field__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 10px 14px 10px;
  flex: 1;
}

.waiting-period-rules-form-field__label {
  color: #9B9B9B;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 10px 0;
}
.waiting-period-rules-form-field__label_color_red {
  color: var(--color-red);
}

.waiting-period-rules-form-field__input {
  width: 100%;
  flex: 1;
}

.waiting-period-rules-form-field__edit-icon-container {
  min-width: 20px;
  margin-left: 10px;
}

.waiting-period-rules-form-field__edit-icon {
  width: 9px;
  height: 9px;
  background: url("/assets/images/icons/pencil.svg") center no-repeat;
  background-size: 9px 9px;
  flex-shrink: 0;
}
.waiting-period-rules-form-field__edit-icon:hover {
  cursor: pointer;
  width: 12px;
  height: 12px;
  background-size: 12px 12px;
}

.waiting-period-rules-dialog-checkbox-list {
  margin-bottom: 20px;
}

.waiting-period-rules-dialog-checkbox-list__container {
  font-size: 14px;
  margin-right: 10px;
  margin-top: 5px;
}

@media (min-width: 48em) {
  .waiting-period-rules-dialog-checkbox-list__options {
    margin-left: 15px;
    -moz-column-count: var(--column-count);
         column-count: var(--column-count);
  }
}

.waiting-period-rules-dialog-checkbox-list__select-all-checkbox {
  color: #979797;
  font-style: italic;
}

.payment-add-delete {
  height: 100%;
}

.payment-add-delete__table {
  overflow: auto;
  height: calc(100% - 55px);
}
@media (max-width: 63.99em) {
  .payment-add-delete__table {
    height: calc(100% - 85px);
  }
}

.payment-add-delete__pads-container {
  box-shadow: 4px 2px 4px 0 rgba(0, 0, 0, 0.12);
}

.eligibility-adjustments {
  height: 100%;
}

.eligibility-adjustments__table {
  overflow: auto;
  height: calc(100% - 55px);
}
@media (max-width: 63.99em) {
  .eligibility-adjustments__table {
    height: calc(100% - 85px);
  }
}

.carrier-list-item {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 20px;
  border: none;
  box-sizing: border-box;
  overflow: hidden;
}
.carrier-list-item:hover:not(.carrier-list-item_is-active), .carrier-list-item:focus:not(.carrier-list-item_is-active) {
  background-color: #F2F6F7;
}
.carrier-list-item_is-active, .carrier-list-item_is-active:hover {
  background-color: #E3ECEE;
}

.carrier-list-item__logo {
  width: 75px;
  margin-right: 15px;
}

.carrier-list-item__logo-img {
  width: 100%;
  max-height: 50px;
}

.carrier-list-item__name {
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  flex: 1;
  color: #494949;
}

.carrier-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  height: 100%;
}
.carrier-view_no-carrier-selected {
  align-items: center;
  height: 60vh;
  padding: 55px;
  gap: 25px;
}

.carrier-view__empty-icon {
  width: 38px;
  height: 36px;
  background-image: url("/assets/images/icons/briefcase.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.carrier-view__text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}

.carrier-view__title {
  font-size: 25px;
  color: #1297AC;
  margin-bottom: 10px;
}

.carrier-view__description {
  color: #5E5E5E;
  font-size: 16px;
  line-height: 24px;
  max-width: 500px;
}
@media (max-width: 47.99em) {
  .carrier-view__description {
    max-width: 340px;
  }
}

.carrier-view__content {
  overflow: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 81.25em) {
  .carrier-view__content {
    padding: 20px 48px;
  }
}
@media (min-width: 48em) and (max-width: 81.24em) {
  .carrier-view__content {
    padding: 20px;
  }
}
@media (max-width: 47.99em) {
  .carrier-view__content {
    padding: 20px 0;
  }
}

.carrier-view__section {
  background-color: #FFF;
}
@media (max-width: 47.99em) {
  .carrier-view__section {
    border: 1px solid #C7D7D7;
    border-width: 1px 0;
  }
}
@media (min-width: 48em) {
  .carrier-view__section {
    border: 1px solid #C7D7D7;
  }
}

.carrier-view__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 14px;
  background-color: #FFF;
  border-bottom: 1px solid var(--color-light-blue);
}
@media (max-width: 47.99em) {
  .carrier-view__section-header {
    padding: 0 10px;
  }
}

.carrier-view__section-labels {
  color: #95989A;
}

.carrier-view__section-header-title {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #494949;
}
.carrier-view__section-header-title_type_edi-suspensions:before {
  content: "";
  height: 15px;
  width: 12px;
  margin-right: 10px;
  background: var(--svg-suspensions) left center no-repeat;
}
.carrier-view__section-header-title_type_carrier-classes:before {
  content: "";
  height: 12px;
  width: 12px;
  margin-right: 10px;
  background: url("/assets/images/icons/carrier-classes-and-subgroups.svg") left center no-repeat;
}
.carrier-view__section-header-title_type_plan-and-product-ids:before {
  content: "";
  height: 15px;
  width: 12px;
  margin-right: 10px;
  background: url("/assets/images/icons/heart.svg") left center no-repeat;
}

.carrier-view__section-header-action-buttons-container {
  display: flex;
  align-items: center;
}

.carrier-details {
  width: 100%;
}

.carrier-details-logo-and-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@media (max-width: 81.24em) {
  .carrier-details-carrier-logo {
    margin-right: 15px;
  }
}
@media (min-width: 48em) {
  .carrier-details-carrier-logo {
    width: 120px;
    height: 45px;
  }
}
@media (max-width: 47.99em) {
  .carrier-details-carrier-logo {
    width: 90px;
    height: 35px;
  }
}

.benefit-details-dialog {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media (max-width: 47.99em) {
  .benefit-details-dialog {
    gap: 20px;
  }
}

.benefit-details-dialog__header {
  color: #4A4A4A;
  background-color: #FFFFFF;
  border: 1px solid #C8D8D8;
  height: 65px;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.benefit-details-dialog__header_margin-sides_20 {
  margin-left: 20px;
  margin-right: 20px;
}

.benefit-details-dialog__content {
  border: 1px solid #C8D8D8;
}

.benefit-name-and-carrier {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.benefit-name-and-carrier__carrier-logo {
  max-width: 100px;
  max-height: 37px;
}

.benefit-name-and-carrier__plan-info {
  width: 100%;
}

.benefit-name-and-carrier__plan-name {
  font-weight: bold;
  font-size: 15px;
}

.benefit-name-and-carrier__carrier-name {
  font-size: 14px;
  color: #5E5E5E;
}

.label-with-description {
  display: flex;
}
.label-with-description_flex-direction_column {
  flex-direction: column;
}
.label-with-description_flex-wrap_wrap {
  flex-wrap: wrap;
}
.label-with-description_gap_5 {
  gap: 5px;
}
.label-with-description_margin-bottom_10 {
  margin-bottom: 10px;
}
.label-with-description_margin-bottom_5 {
  margin-bottom: 5px;
}
.label-with-description_in-header {
  display: block;
  min-width: 95px;
}
@media (min-width: 64em) {
  .label-with-description_in-header {
    align-self: flex-start;
  }
}
@media (max-width: 63.99em) {
  .label-with-description_in-header {
    line-height: 0.9;
  }
}

.label-with-description__label {
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  color: #95989A;
  cursor: text;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 10px;
  margin-right: 2px;
}
.label-with-description__label_display_block {
  display: block;
}

.label-with-description__description {
  cursor: text;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 12px;
  color: #95989A;
  font-style: italic;
  margin-top: -1px;
}

.plan-rates-error-state {
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
  padding: 20px 110px;
  gap: 20px;
}
@media (max-width: 47.99em) {
  .plan-rates-error-state {
    height: 280px;
    padding: 20px;
  }
}

.plan-rates-error-state__title {
  font-size: 25px;
  text-align: center;
  color: var(--color-red);
}

.plan-rates-error-state__description {
  font-size: 16px;
  text-align: center;
  color: #5E5E5E;
}

.setup-coverage-details {
  color: #494949;
}

.setup-coverage-details__title {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #494949;
}

.setup-coverage-details__content {
  overflow-y: scroll;
}

.setup-coverage-details__sections-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.setup-coverage-details__section {
  background-color: #FFF;
  border: 1px solid #C8D8D8;
}
@media (max-width: 47.99em) {
  .setup-coverage-details__section {
    border-left: none;
    border-right: none;
  }
}

.setup-coverage-details__section-header {
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #C8D8D8;
  box-sizing: border-box;
}
.setup-coverage-details__section-header_has-subtitle {
  height: auto;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  text-align: start;
}
.setup-coverage-details__section-header_is-loading {
  gap: 10px;
  padding: 15px 20px;
}

.setup-coverage-details__section-title {
  color: #4A4A4A;
  font-size: 18px;
  font-weight: 700;
}

.setup-coverage-details__section-subtitle {
  color: #4A4A4A;
  font-size: 16px;
}
@media (max-width: 47.99em) {
  .setup-coverage-details__section-subtitle {
    border-left: none;
    border-right: none;
    font-size: 14px;
  }
}

.setup-coverage-details__top-fields-header {
  padding: 10px 20px;
  border-bottom: 1px solid #C8D8D8;
  box-sizing: border-box;
}

.setup-coverage-details__top-fields-body {
  padding: 30px 20px;
}

.setup-coverage-details__carrier-logo {
  height: 40px;
}

.setup-coverage-details__carrier-logo-img {
  max-width: 120px;
}

.setup-coverage-details__plan-name {
  font-weight: 700;
  font-size: 18px;
}

.setup-coverage-details__fields {
  padding: 20px 20px 24px 20px;
}

.setup-coverage-details__field-loading {
  display: flex;
  align-items: center;
  height: 70px;
  width: 100%;
  padding: 10px;
  border: solid 1px #D8E4E4;
  box-sizing: border-box;
}

.setup-coverage-details__empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 112px;
  background: #FFF;
  padding: 15px;
}
.setup-coverage-details__empty-state_type_rates:before {
  content: "";
  display: block;
  margin-bottom: 13px;
  width: 14px;
  height: 21px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("/assets/images/icons/dollar-icon.svg");
}
.setup-coverage-details__empty-state_type_edi-setup:before {
  content: "";
  display: block;
  margin-bottom: 13px;
  width: 30px;
  height: 36px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: var(--svg-suspensions);
}

.setup-coverage-details__empty-state-icon {
  margin-bottom: 13px;
  width: 21px;
  height: 22px;
  background-repeat: no-repeat;
}

.setup-coverage-details__empty-state-text {
  font-size: 18px;
  color: #1297AC;
}

.rates-form {
  background-color: white;
  border: 1px solid #C8D8D8;
}
@media (max-width: 47.99em) {
  .rates-form_is-borderless-horizontal-on-mobile {
    border-right: 0;
    border-left: 0;
  }
}

.rates-form__header {
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #C8D8D8;
  box-sizing: border-box;
}

.rates-form__table-header {
  background-color: #F8F8F8;
}

.rates-form__table-header-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rates-form__header-label {
  font-family: "Montserrat", sans-serif;
  color: #1297AC;
  font-size: 10px;
  text-transform: uppercase;
}
.rates-form__header-label_is-required::after {
  content: "";
  margin-right: 4px;
  display: inline-block;
  background: url("/assets/images/icons/required-star.svg") center center no-repeat;
  height: 7px;
  width: 7px;
}

.rates-form__header-label-description {
  font-size: 12px;
  color: #9B9B9B;
  font-style: italic;
}
@media (min-width: 64em) {
  .rates-form__header-label-description {
    display: block;
  }
}

.rates-form__title {
  color: #4A4A4A;
  font-size: 18px;
  font-weight: 700;
}

.rates-form__option {
  background: white;
  border-bottom: solid 1px #C8D8D8;
}
.rates-form__option_border-bottom_none {
  border-bottom: none;
}

.rates-form__remove-container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  box-sizing: border-box;
}

.rates-form__remove {
  width: 30px;
  height: 30px;
  background: var(--svg-x-red) center center no-repeat;
  background-size: 10px 10px;
  transition: all 0.3s ease;
}
.rates-form__remove:hover {
  transform: scale(1.2);
}

.rates-form__add-another {
  color: #1297AC;
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
}
.rates-form__add-another:hover {
  text-decoration: underline;
}

.rates-form__empty-rates {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: white;
  padding: 15px;
}
.rates-form__empty-rates:before {
  content: "";
  display: block;
  margin-bottom: 13px;
  width: 14px;
  height: 21px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("/assets/images/icons/dollar-icon.svg");
}

.rates-form__empty-text {
  font-size: 18px;
  color: #1297AC;
}

.rates-form__empty-button {
  margin-top: 20px;
}

.add-coverages__total-results {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-shrink: 0;
}

.add-coverages__total-results-text {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 300;
  text-transform: uppercase;
  margin-right: 5px;
}

.add-coverages__total-results-count {
  margin-left: 2px;
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.add-coverages__type {
  display: block;
}

.add-coverages__type-container {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}

.add-coverages__type-header {
  position: sticky;
  top: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  background-color: #EAEAEA;
  padding: 0 10px;
  box-sizing: border-box;
  z-index: 3;
}
@media (max-width: 63.99em) {
  .add-coverages__type-header {
    top: 0;
  }
}

.add-coverages__type-icon {
  width: 14px;
  height: 14px;
  margin-right: 7px;
  background-position: center center;
  background-repeat: no-repeat;
}

.add-coverages__empty-type-text {
  font-style: italic;
  color: #95989A;
}

.add-coverages__type-content_is-empty {
  padding: 5px 20px;
}

.add-coverages__checkbox-and-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.add-coverages__plan-name-carrier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.add-coverages__plan-name {
  color: #1297AC;
  font-weight: bold;
}

.add-coverages__empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 360px;
  width: 100%;
  box-sizing: border-box;
  background-color: #FFF;
  padding: 45px;
  gap: 25px;
  border-top: 1px solid #EAEAEA;
}

.add-coverages__empty-icon {
  height: 36px;
  width: 40px;
  background-image: url("/assets/images/icons/heart.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}

.add-coverages__empty-text {
  color: #1297AC;
  font-size: 25px;
}
@media (max-width: 47.99em) {
  .add-coverages__empty-text {
    max-width: 260px;
  }
}

.add-coverages__table-top-content {
  display: flex;
  align-items: center;
}
.add-coverages__table-top-content_margin-left_10 {
  margin-left: 10px;
}
.add-coverages__table-top-content_margin-left_20 {
  margin-left: 20px;
}

.workflow-type-list {
  height: 100%;
  width: 300px;
  background-color: #FFF;
  display: flex;
  flex-direction: column;
}
@media (max-width: 47.99em) {
  .workflow-type-list {
    width: 100%;
  }
}

.workflow-type-list__sort-container {
  width: 100%;
  height: 60px;
  background-color: #F5F5F5;
  border-right: 1px solid #C8D8D8;
  z-index: 1;
  box-sizing: border-box;
}
@media (max-width: 47.99em) {
  .workflow-type-list__sort-container {
    background-color: #EAEAEA;
  }
}

.workflow-type-list__list {
  width: 100%;
  flex: 1;
  overflow-y: auto;
}
@media (min-width: 48em) {
  .workflow-type-list__list {
    box-sizing: border-box;
    border-right: 1px solid #C8D8D8;
  }
}

.workflow-type-list__list-item {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding: 20px 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #C8D8D8;
  cursor: pointer;
}
@media (max-width: 47.99em) {
  .workflow-type-list__list-item {
    height: 80px;
  }
}
.workflow-type-list__list-item:hover:not(.workflow-type-list__list-item_cursor_default) {
  background-color: #E8F6F8;
}
.workflow-type-list__list-item_cursor_default {
  cursor: default;
}
.workflow-type-list__list-item_background-color_blue {
  background-color: #E8F6F8;
}

.enrollment-reason-card {
  width: 100%;
  background-color: #FFF;
  border: 1px solid #C8D8D8;
}

.enrollment-reason-card__header {
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #C8D8D8;
}
@media (max-width: 47.99em) {
  .enrollment-reason-card__header {
    height: 100%;
    min-height: 55px;
  }
}

.enrollment-reason-card__header-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
}

.enrollment-reason-card__toggle-container {
  display: flex;
  align-items: center;
  -moz-column-gap: 5px;
       column-gap: 5px;
}

.enrollment-reason-card__edit-action {
  margin-right: 10px;
}

.enrollment-reason-card__body {
  font-size: 13px;
  padding: 20px;
}

.enrollment-reason-card__note {
  font-size: 13px;
  font-style: italic;
  padding-bottom: 20px;
}
.enrollment-reason-card__note_padding-bottom_0 {
  padding-bottom: 0;
}

.subgroups {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 5px;
}

.subgroups__item {
  margin-right: 5px;
  background-color: #EAEAEA;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}

.enrollment-reason-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
}
@media (max-width: 47.99em) {
  .enrollment-reason-form {
    gap: 25px;
    padding: 20px 0;
  }
}

.enrollment-reason-form__section {
  display: flex;
  flex-direction: column;
  border: 1px solid #C8D8D8;
}
@media (max-width: 47.99em) {
  .enrollment-reason-form__section {
    border-left: none;
    border-right: none;
  }
}

.enrollment-reason-form__section-header {
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #F5F5F5;
  border-bottom: 1px solid #C8D8D8;
  padding: 0 20px;
  box-sizing: border-box;
}

.enrollment-reason-form__section-header-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
}

.enrollment-reason-form__section-content {
  background-color: #FFF;
}
.enrollment-reason-form__section-content_padding_20 {
  padding: 20px;
}

.enrollment-reason-toggle-entry {
  width: 100%;
  padding: 15px 20px;
  box-sizing: border-box;
}
.enrollment-reason-toggle-entry:not(:last-child) {
  border-bottom: 1px solid #C8D8D8;
}

.enrollment-reason-toggle-entry__action-container {
  display: flex;
}

.enrollment-reason-toggle-entry__title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  margin: 0 5px 5px 0;
}

.enrollment-reason-toggle-entry__description {
  font-size: 16px;
  flex: 1;
}
.enrollment-reason-toggle-entry__description_margin-bottom_20 {
  margin-bottom: 20px;
}

.edit-coverages {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #F8F8F8;
}

.edit-coverages__actions-row {
  margin-top: 16px;
}

.edit-coverages__actions-container {
  position: sticky;
  left: 15px;
}

.coverage-form-field {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  border: 1px solid transparent;
}
.coverage-form-field_is-focused:not(.coverage-form-field_is-error):not(.coverage-form-field_is-warning) {
  border: 1px solid #1297AC;
}
.coverage-form-field_has-active-border:not(.coverage-form-field_is-error):not(.coverage-form-field_is-warning):hover, .coverage-form-field_has-active-border:not(.coverage-form-field_is-error):not(.coverage-form-field_is-warning):active {
  border: 1px solid #1297AC;
}
.coverage-form-field_border-bottom_main-text-color:not(.coverage-form-field_is-error):not(.coverage-form-field_is-warning) {
  border-bottom: 1px solid var(--color-dark-grey-2);
}
.coverage-form-field_border-right_light-grey {
  border-right: 1px solid #EAEAEA;
}
.coverage-form-field_is-error {
  border: 1px solid var(--color-red);
}
.coverage-form-field_is-warning {
  border: 1px solid #E39410;
}
.coverage-form-field_is-expandable {
  cursor: pointer;
}
@media (max-width: 47.99em) {
  .coverage-form-field_is-expandable {
    gap: 6px;
  }
}
@media (min-width: 48em) {
  .coverage-form-field_is-expandable {
    padding: 0 10px;
  }
}
.coverage-form-field_padding_10 {
  padding: 10px;
}
.coverage-form-field_padding-left_0 {
  padding-left: 0;
}
.coverage-form-field_padding-left_10 {
  padding-left: 10px;
}
.coverage-form-field_is-product-type {
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  font-size: 14px;
  font-weight: 700;
  gap: 0;
}
@media (min-width: 48em) {
  .coverage-form-field_is-product-type {
    padding-left: 10px;
  }
}
.coverage-form-field_is-plan {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
@media (min-width: 48em) {
  .coverage-form-field_is-plan {
    padding-left: 10px;
  }
}
.coverage-form-field_align-items_center {
  align-items: center;
}
.coverage-form-field_background-color_green {
  background-color: #F4FBFC;
}

.coverage-form-field__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 10px 14px 10px;
  flex: 1;
}

.coverage-form-field__input-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.coverage-form-field__label {
  color: #9B9B9B;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.coverage-form-field__placeholder {
  font-size: 14px;
  color: #95989A;
}

.coverage-form-field__not-available {
  font-size: 14px;
  color: #95989A;
}
@media (min-width: 48em) {
  .coverage-form-field__not-available {
    padding-left: 10px;
  }
}

.coverage-form-field__input {
  width: 100%;
  flex: 1;
  font-size: 14px;
}
.coverage-form-field__input_color_green {
  color: #1297AC;
}

.coverage-form-field__edit-icon {
  width: 9px;
  height: 9px;
  background: url("/assets/images/icons/pencil.svg") center no-repeat;
  background-size: 9px 9px;
  flex-shrink: 0;
}

.coverage-form-field__type-icon {
  width: 14px;
  height: 14px;
  margin-right: 7px;
  background-position: center center;
  background-repeat: no-repeat;
}

.coverage-form-field__carrier-logo {
  width: 40px;
}

.coverage-form-field__plan-and-carrier-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.edi-setup {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  background-color: #FFFFFF;
}

.edi-setup__section-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edi-setup__edi-title-text {
  font-size: 16px;
  font-weight: 700;
  margin-right: 5px;
}

.edi-setup__edi-title-count {
  font-style: italic;
  font-size: 14px;
}

.edi-setup__select-all-content {
  display: flex;
}

.edi-setup__select-all-text {
  font-style: italic;
  font-size: 14px;
}

.edi-setup__separator {
  width: 100%;
  height: 1px;
  background-color: #DADADA;
  margin-top: 21px;
}

.edi-setup__edi-record {
  border: 1px solid #D2DFDF;
  background-color: #FFF;
  margin-top: 12px;
}

.edi-setup__edi-record-row:not(:last-child) .edi-setup__edi-record-row-grid_has-bottom-border {
  border-bottom: 1px solid var(--color-light-blue);
}

.edi-setup__edi-record-row-info {
  padding: 0 20px 0 15px;
  display: flex;
  align-items: center;
}
@media (max-width: 47.99em) {
  .edi-setup__edi-record-row-info {
    padding: 0 10px 0 15px;
  }
}

.edi-setup__edi-record-row-grid {
  width: 100%;
}

.edi-setup__category-error-box {
  margin-left: 5px;
  margin-right: 5px;
}

.employee-tasks__header {
  box-sizing: border-box;
  height: 40px;
  background-color: #F3F3F3;
  border-bottom: solid 1px #F3F3F3;
}
@media (max-width: 63.99em) {
  .employee-tasks__header {
    height: 50px;
  }
}
@media (max-width: 47.99em) {
  .employee-tasks__header {
    height: 60px;
  }
}

.employee-tasks__table-top {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 40px;
  background-color: #FFF;
  border-bottom: solid 1px #C7D7D7;
}
.employee-tasks__table-top_padding-left_36 {
  padding-left: 36px;
}

.member-assign-plans-display-field {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 5px;
  box-sizing: border-box;
  font-size: 16px;
}
.member-assign-plans-display-field_border_red {
  border: 1px solid var(--color-red);
}
.member-assign-plans-display-field_is-disabled {
  color: #9B9B9B;
}
.member-assign-plans-display-field_is-disabled .member-assign-plans-display-field__container {
  border-bottom: none;
}

.member-assign-plans-display-field__error-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: var(--svg-field-error) center center no-repeat;
}

.member-assign-plans-display-field__container {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 100%;
  border-bottom: 1px solid var(--color-light-grey-5);
}
.member-assign-plans-display-field__container_padding-left_5 {
  padding-left: 5px;
}
.member-assign-plans-display-field__container_has-border-left {
  position: relative;
}
.member-assign-plans-display-field__container_has-border-left::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 1px;
  height: 28px;
  background-color: var(--color-light-grey-5);
}

.member-assign-plans-display-field__value {
  flex: 1;
  padding-right: 10px;
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.member-assign-plans-display-field__placeholder {
  flex: 1;
  color: var(--color-light-grey-6);
  padding: 1px 0;
}

.member-assign-plans-display-field__trigger-icon {
  width: 10px;
  height: 5px;
  margin-right: 10px;
  margin-top: 2px;
  background: url("/assets/images/icons/arrow-down-grey-thin.svg") center no-repeat;
}

.member-assign-plans-display-field__clear-dropdown {
  margin-right: 5px;
  margin-top: 4px;
  line-height: 18px;
  cursor: pointer;
}

/**
 * SHOULD NOT HAVE Z-INDEX
 */
.app {
  position: relative;
  height: 100%;
  max-width: 100%;
  width: 100vw;
  overflow: visible;
  background: var(--color-light-grey-4);
  color: #5C5050;
}

/**
 * Need to use id for ember-wormhole
 */
#app__modal {
  display: block;
}