/*!
 * Bootstrap v2.0.4
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
@layer reset {
  /*
   * Reset CSS
   * Adapted from http://github.com/necolas/normalize.css
   * --------------------------------------------------
   */

  audio,
  canvas,
  video {
    display: inline-block;
  }

  /*
   * Prevents modern browsers from displaying 'audio' without controls
   * -------------------------
   */

  audio:not([controls]) {
    display: none;
  }

  /*
   * Base settings
   * -------------------------
   */

  html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  /* Focus states */
  a:focus {
    /* Default */
    outline: thin dotted #333;
    /* Webkit */
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }
  /* Hover & Active */
  a:hover,
  a:active {
    outline: 0;
  }

  /*
   * Prevents sub and sup affecting line-height in all browsers
   * -------------------------
   */

  sub,
  sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
  }
  sup {
    top: -0.5em;
  }
  sub {
    bottom: -0.25em;
  }

  /*
   * Img border in a's and image quality
   * -------------------------
   */

  img {
    /* Responsive images (ensure images don't scale beyond their parents) */
    max-width: 100%; /* Part 1: Set a maximum relative to the parent */
    height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */

    vertical-align: middle;
    border: 0;
  }

  /*
   * Forms
   * -------------------------
   */

  /* Font size in all browsers, margin changes, misc consistency */
  button,
  input,
  select,
  textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: middle;
  }
  button,
  input {
    line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet */
  }
  button::-moz-focus-inner,
  input::-moz-focus-inner {
    /* Inner padding and border oddities in FF3/4 */
    padding: 0;
    border: 0;
  }
  button,
  html input[type="button"], /* Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. */
  input[type="reset"],
  input[type="submit"] {
    -webkit-appearance: button; /* Corrects inability to style clickable `input` types in iOS. */
    cursor: pointer; /* Improves usability and consistency of cursor style between image-type `input` and others. */
  }
  label,
  select,
  button,
  input[type='button'],
  input[type='reset'],
  input[type='submit'],
  input[type='radio'],
  input[type='checkbox'] {
    cursor: pointer; /* Improves usability and consistency of cursor style between image-type `input` and others. */
  }
  input[type='search'] {
    /* Appearance in Safari/Chrome */
    box-sizing: content-box;
    -webkit-appearance: textfield;
  }
  input[type='search']::-webkit-search-decoration,
  input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none; /* Inner-padding issues in Chrome OSX, Safari 5 */
  }
  textarea {
    overflow: auto;
    vertical-align: top; /* Readability and alignment cross-browser */
  }
}

@layer base {
  /*
   * Typography
   * --------------------------------------------------
   */

  /*
   * Body text
   * -------------------------
   */

  p {
    margin: 0 0 10px; /* @baseLineHeight / 2*/
  }
  .lead {
    margin-bottom: 20px; /* @baseLineHeight */
    font-size: calc(var(--fontSizeBase) * 1.5);
    font-weight: 200;
    line-height: 30px; /* @baseLineHeight * 1.5 */
  }

  /*
   * Emphasis & misc
   * -------------------------
   */

  /* Ex: 14px base font * 85% = about 12px */
  small {
    font-size: 85%;
  }

  strong {
    font-weight: var(--fontWeightBold);
  }
  em {
    font-style: italic;
  }

  /*
   * Headings
   * -------------------------
   */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 10px /* @baseLineHeight / 2 */ 0;
    font-family: inherit;
    font-weight: bold;
    line-height: 20px; /* @baseLineHeight */
    color: inherit;
    text-rendering: optimizelegibility; /* Fix the character spacing for headings */

    /* help icons within headings */
  }
    :is(h1,h2,h3,h4,h5,h6) small {
      font-weight: normal;
      line-height: 1;
      color: var(--iconLight);
    }

  h1,
  h2,
  h3 {
    line-height: 40px; /* @baseLineHeight * 2 */
  }

  h1 {
    font-size: calc(var(--fontSizeBase) * 2.75);
  } /* ~38px */
  h2 {
    font-size: calc(var(--fontSizeBase) * 2.25);
  } /* ~32px */
  h3 {
    font-size: calc(var(--fontSizeBase) * 1.75);
  } /* ~24px */
  h4 {
    font-size: calc(var(--fontSizeBase) * 1.25);
  } /* ~18px */
  h5 {
    font-size: var(--fontSizeBase);
  }
  h6 {
    font-size: calc(var(--fontSizeBase) * 0.85);
  } /* ~12px */

  h1 small {
    font-size: calc(var(--fontSizeBase) * 1.75);
  } /* ~24px */
  h2 small {
    font-size: calc(var(--fontSizeBase) * 1.25);
  } /* ~18px */
  h3 small {
    font-size: var(--fontSizeBase);
  }
  h4 small {
    font-size: var(--fontSizeBase);
  }

  /*
   * Lists
   * --------------------------------------------------
   */

  /* Unordered and Ordered lists */
  ul,
  ol {
    padding: 0;
    margin: 0 0 10px /* @baseLineHeight / 2 */ 25px;
  }
  ul ul,
  ul ol,
  ol ol,
  ol ul {
    margin-bottom: 0;
  }
  li {
    line-height: 20px; /* @baseLineHeight */
  }

  /* Remove default list styles */
  ul.unstyled,
  ol.unstyled {
    margin-left: 0;
    list-style: none;
  }

  /* Single-line list items */
  ul.inline,
  ol.inline {
    margin-left: 0;
    list-style: none;
  }
    :is(ul.inline,ol.inline)  > li {
      display: inline-block;
      padding-left: 5px;
      padding-right: 5px;
    }

  /* Description Lists */
  dl {
    margin-bottom: 20px; /* @baseLineHeight */
  }
  dt,
  dd {
    line-height: 20px; /* @baseLineHeight */
  }
  dt {
    font-weight: var(--fontWeightBold);
  }
  dd {
    margin-left: 10px; /* @baseLineHeight / 2 */
  }

  /*
   * MISC
   * ----
   */

  /* Horizontal rules */
  hr {
    margin: 20px /* @baseLineHeight */ 0;
    border: 0;
    border-top: 1px solid var(--borderDefault);
    border-bottom: 1px solid var(--surfaceBackgroundDefault);
  }

  /* Blockquotes */
  blockquote {
    padding: 0 0 0 15px;
    margin: 0 0 20px; /* @baseLineHeight */
    border-left: 5px solid var(--borderDefault);
  }

    blockquote p {
      margin-bottom: 0;
      font-size: calc(var(--fontSizeBase) * 1.25);
      font-weight: 300;
      line-height: 1.25;
    }

  /* Quotes */
  q:before,
  q:after,
  blockquote:before,
  blockquote:after {
    content: '';
  }

  /*
   * OVERRIDES
   * ---------
   */

  small,
  .small {
    font-size: 0.9em;
  }

  code {
    display: inline-block;
    padding-left: 3px;
    padding-right: 3px;
    font-family: monospace;
    font-size: 90%;
    color: #474a54;
    border: 1px solid #cecece;
    border-radius: 3px;
    background-color: #eaeaea;
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0 0 10px 0;
    font-weight: normal;
    color: var(--colorTextDefault);
  }
  h1 {
    font-size: 29px;
  }
  h2 {
    font-size: 24px;
  }
  h3 {
    font-size: 22px;
  }
  h3 {
    font-size: 18px;
  }
  h5 {
    margin: 0 0 10px 0;
  }

  h1 sup {
    color: #9a9aad;
  }
}

@layer base {
  /*
   * Forms
   * --------------------------------------------------
   */

  /*
   * GENERAL STYLES
   * --------------
   */

  fieldset {
    padding: 0;
    margin: 0;
    border: 0;
  }

  /* Set font for forms */
  label,
  input,
  button,
  select,
  textarea {
    font-size: var(--fontSizeBase);
    font-weight: normal;
    line-height: 20px; /* @baseLineHeight */
  }

  input,
  button,
  select,
  textarea {
    font-family: var(
      --baseFontFamily
    ); /* And only set font-family here for those that need it (note the missing label element) */
  }

  /* Identify controls by their labels */
  label {
    display: block;
    margin-bottom: 5px;
  }

  /*
   * Form controls
   * -------------------------
   */

  /* Shared size and type resets */
  select,
  textarea {
    display: inline-block;
    height: 20px; /* @baseLineHeight */
    padding: 4px 6px;
    margin-bottom: 10px; /* @baseLineHeight / 2 */
    font-size: var(--fontSizeBase);
    line-height: 20px; /* @baseLineHeight */
    color: var(--colorTextMedium);
    border-radius: var(--borderRadiusMedium);
    vertical-align: middle;
  }

  /* Reset appearance properties for textual inputs and textarea */
  /* Declare width for legacy (can't be on input[type=*] selectors or it's too specific) */
  input,
  textarea {
    width: 206px; /* plus 12px padding and 2px border */
  }
  /* Reset height since textareas have rows */
  textarea {
    height: auto;
  }
  /* Everything else */
  textarea {
    background-color: var(--surfaceBackgroundDefault);
    border: 1px solid var(--borderDefault);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition:
      border linear 0.2s,
      box-shadow linear 0.2s;

    /* Focus state */
  }
    textarea:focus {
      border-color: var(--borderFocused);
      outline: 0;
    }

  /* Position radios and checkboxes better */
  input[type='radio'],
  input[type='checkbox'] {
    margin: 4px 0 0;
    line-height: normal;
  }

  /* Reset width of input images, buttons, radios, checkboxes */
  input[type='file'],
  input[type='image'],
  input[type='submit'],
  input[type='reset'],
  input[type='button'],
  input[type='radio'],
  input[type='checkbox'] {
    width: auto; /* Override of generic input selector */
  }

  /* Set the height of select and file controls to match text inputs */
  select,
  input[type='file'] {
    height: 32px;
    line-height: 32px;
  }

  /* Make select elements obey height by applying a border */
  select {
    width: 220px; /* default input width + 10px of padding that doesn't get applied */
    border: 1px solid var(--borderDefault);
    background-color: var(
      --surfaceBackgroundDefault
    ); /* Chrome on Linux and Mobile Safari need background-color */
  }

  /* Make multiple select elements height not fixed */
  select[multiple],
  select[size] {
    height: auto;
  }

  /* Focus for select, file, radio, and checkbox */
  select:focus,
  input[type='file']:focus,
  input[type='radio']:focus,
  input[type='checkbox']:focus {
    /* Default */
    outline: thin dotted #333;
    /* Webkit */
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }

  /*
   * Placeholder
   * -------------------------
   */

  /* Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector */
    :is(input,textarea)::placeholder {
      color: var(--colorTextLight);
    }

  /*
   * CHECKBOXES & RADIOS
   * -------------------
   */

  /* Indent the labels to position radios/checkboxes as hanging */
  .radio,
  .checkbox {
    min-height: 20px; /* @baseLineHeight */ /* clear the floating input if there is no label text */
    padding-left: 20px;
  }
  .radio input[type='radio'],
  .checkbox input[type='checkbox'] {
    float: left;
    margin-left: -20px;
  }

  /* Move the options list down to align with labels */
  .controls > .radio:first-child,
  .controls > .checkbox:first-child {
    padding-top: 5px; /* has to be padding because margin collapses */
  }

  /* Radios and checkboxes on same line */
  /* TODO v3: Convert .inline to .control-inline */
  .radio.inline,
  .checkbox.inline {
    display: inline-block;
    padding-top: 5px;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .radio.inline + .radio.inline,
  .checkbox.inline + .checkbox.inline {
    margin-left: 10px; /* space out consecutive inline controls */
  }

  /* Grid style input sizes */
  input[class*='span'],
  select[class*='span'],
  textarea[class*='span'] {
    float: none;
    margin-left: 0;
  }

  /*
   * DISABLED STATE
   * --------------
   */

  /* Disabled and read-only inputs */
  input[disabled],
  select[disabled],
  textarea[disabled],
  input[readonly],
  select[readonly],
  textarea[readonly] {
    cursor: not-allowed;
    background-color: var(--formBackgroundDisabled);
  }
  /* Explicitly reset the colors here */
  input[type='radio'][disabled],
  input[type='checkbox'][disabled],
  input[type='radio'][readonly],
  input[type='checkbox'][readonly] {
    background-color: transparent;
  }

  /*
   * FORM FIELD FEEDBACK STATES
   * --------------------------
   */

  /* HTML5 invalid states */
  textarea:focus:invalid,
  select:focus:invalid {
    color: #b94a48;
    border-color: #ee5f5b;
  }
    :is(textarea:focus:invalid,select:focus:invalid):focus {
      border-color: darken(#ee5f5b, 10%);
      box-shadow: 0 0 6px lighten(#ee5f5b, 20%);
    }

  /*
   * OVERRIDES
   * ---------
   */
      :is(form .actions):before,:is(form .actions):after {
        display: table;
        content: '';
        line-height: 0;
      }
      :is(form .actions):after {
        clear: both;
      }
    form .msg {
      display: none;
    }
    form input[type='file'] {
      line-height: inherit;
      height: auto;
    }

  /* Remove up/down buttons from <input type=number> */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    display: none;
    margin: 0;
  }

  /* Override Bootstrap */
  select,
  textarea {
    padding: 4px 12px; /* Small input padding */
    color: var(--colorTextDefault);
    border: 1px solid var(--formBorder);
    border-radius: var(--baseInputBorderRadius);
    box-shadow: none;
    transition: none;
  }

    :is(select,textarea):focus {
      border-color: var(--borderFocused);
      box-shadow: none !important;
      outline: 0 !important;
      transition: none;
    }

    :is(select,textarea):invalid:focus {
      color: var(--colorTextDefault);
      border: 1px solid var(--borderFocused);
    }

  select {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
  }
}

@layer base {
  /*
   * Tables
   * --------------------------------------------------
   */

  /*
   * BASELINE STYLES
   * ---------------
   */

  .table {
    width: 100%;
    margin-bottom: 20px; /* @baseLineHeight */
    border-collapse: collapse;

    /* Cells */
  }
    .table th,.table td {
      padding: 8px;
      line-height: 20px; /* @baseLineHeight */
      text-align: left;
      vertical-align: top;
      border-top: 1px solid var(--borderDefault);
    }

    .table th {
      font-weight: var(--fontWeightBold);
    }

    /* Bottom align for column headings */
    .table thead th {
      vertical-align: bottom;
    }

    /* Remove top border from thead by default */
    .table caption + thead tr:first-child th,.table caption + thead tr:first-child td,.table colgroup + thead tr:first-child th,.table colgroup + thead tr:first-child td,.table thead:first-child tr:first-child th,.table thead:first-child tr:first-child td {
      border-top: 0;
    }

  /*
   * BORDERED VERSION
   * ----------------
   */

  .table-bordered {
    border: 1px solid var(--borderDefault);
    border-collapse: separate; /* Done so we can round those corners! */
    border-spacing: 0;
    border-left: 0;

    border-radius: var(--baseBorderRadius);
  }
    .table-bordered th,.table-bordered td {
      border-left: 1px solid var(--borderDefault);
    }

    .table-bordered th {
      padding-top: 4px;
      padding-bottom: 4px;
      line-height: 23px;
      font-weight: normal;
      background-color: var(--bgTableHeaderDefault);
    }

    /* Prevent a double border */
    .table-bordered caption + thead tr:first-child th,.table-bordered caption + tbody tr:first-child th,.table-bordered caption + tbody tr:first-child td,.table-bordered colgroup + thead tr:first-child th,.table-bordered colgroup + tbody tr:first-child th,.table-bordered colgroup + tbody tr:first-child td,.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td {
      border-top: 0;
    }
    /* For first th/td in the first row in the first thead or tbody */
    .table-bordered thead:first-child tr:first-child > th:first-child,.table-bordered tbody:first-child tr:first-child > td:first-child,.table-bordered tbody:first-child tr:first-child > th:first-child {
      border-top-left-radius: var(--baseBorderRadius);
    }
    /* For last th/td in the first row in the first thead or tbody */
    .table-bordered thead:first-child tr:first-child > th:last-child,.table-bordered tbody:first-child tr:first-child > td:last-child,.table-bordered tbody:first-child tr:first-child > th:last-child {
      border-top-right-radius: var(--baseBorderRadius);
    }
    /* For first th/td (can be either) in the last row in the last thead, tbody, and tfoot */
    .table-bordered thead:last-child tr:last-child > th:first-child,.table-bordered tbody:last-child tr:last-child > td:first-child,.table-bordered tbody:last-child tr:last-child > th:first-child,.table-bordered tfoot:last-child tr:last-child > td:first-child,.table-bordered tfoot:last-child tr:last-child > th:first-child {
      border-bottom-left-radius: var(--baseBorderRadius);
    }
    /* For last th/td (can be either) in the last row in the last thead, tbody, and tfoot */
    .table-bordered thead:last-child tr:last-child > th:last-child,.table-bordered tbody:last-child tr:last-child > td:last-child,.table-bordered tbody:last-child tr:last-child > th:last-child,.table-bordered tfoot:last-child tr:last-child > td:last-child,.table-bordered tfoot:last-child tr:last-child > th:last-child {
      border-bottom-right-radius: var(--baseBorderRadius);
    }

    /* Clear border-radius for first and last td in the last row in the last tbody for table with tfoot */
    .table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
      border-bottom-left-radius: 0;
    }
    .table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
      border-bottom-right-radius: 0;
    }

    /* Special fixes to round the left border on the first td/th */
    .table-bordered caption + thead tr:first-child th:first-child,.table-bordered caption + tbody tr:first-child td:first-child,.table-bordered colgroup + thead tr:first-child th:first-child,.table-bordered colgroup + tbody tr:first-child td:first-child {
      border-top-left-radius: var(--baseBorderRadius);
    }
    .table-bordered caption + thead tr:first-child th:last-child,.table-bordered caption + tbody tr:first-child td:last-child,.table-bordered colgroup + thead tr:first-child th:last-child,.table-bordered colgroup + tbody tr:first-child td:last-child {
      border-top-right-radius: var(--baseBorderRadius);
    }

  /*
   * HOVER EFFECT
   * ------------
   * Placed here since it has to come after the potential zebra striping
   */
      :is(.table-hover tbody) tr:hover > td,:is(.table-hover tbody) tr:hover > th {
        background-color: #fafbfb;
      }
}

/*
 * Utility classes
 * --------------------------------------------------
 */

/* Toggling content */
.hide {
  display: none !important;
}
.show {
  display: block;
}

.clear {
  clear: both;
}

@layer base {
  #nocss {
    display: none;
  }

  /*
   * Body reset
   * -------------------------
   */

  body {
    margin: 0;
    font-family: var(--baseFontFamily);
    font-size: var(--fontSizeBase);
    line-height: 20px; /* @baseLineHeight */
    color: var(--colorTextDefault);
    background-color: var(--surfaceBackgroundMedium);
    height: 100%;

    /* The following line does two things:
    1) disables scroll elasticity for the native app web view (can also be done in cocoa)
    2) fixes issue where quickly scrolling an overflow auto element would try to scroll the body
    both in the app, and in browsers (chrome)
    */
    overflow: hidden;
  }

    body.app-is-loading {
      background: var(--surfaceBackgroundMedium);
    }

  /* Some features we want to launch to Elastic employees first */
  .closeio-employee-only {
    display: none !important;
  }
  body.closeio-employee .closeio-employee-only {
    display: inherit !important;
  }

  /*
   * Links
   * -------------------------
   */

  a {
    color: var(--colorLinkDefault);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

  a:hover,
  a:focus {
    color: var(--colorLinkHover);
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

  /**
  Standardize the outline appearance across browsers / platforms
  e.g. the desktop app natively has Electron's orange outline color.
  */
  a:focus-visible,
  button:focus-visible,
  div:focus-visible {
    outline: 2px solid
      color-mix(in srgb, var(--colorBrandBlue) 50%, transparent);
  }

  /*
   * Misc
   * -------------------------
   */

  hr {
    border-top-color: #ccc;
    border-bottom-color: transparent;
  }

  .error {
    color: var(--failurePrimaryColor);
  }
  .success {
    color: darkgreen;
  }

  /* TODO check for similarities with ActivityOverviewScreen/ActivityCharts/index.module.css */
  .sortable-ghost {
    border: dotted 1px #888 !important;
    opacity: 0.6;
  }
    .sortable-ghost * {
      visibility: hidden;
    }

  /*
   * Layout
   * -------------------------
   */

  #main,
  #main > .container {
    width: 100%;
    height: 100%;
  }

  .container {
    display: flex;
    flex-direction: column;
  }

    .container .content-area-wrap {
      display: flex;
      flex-direction: row;
      flex: 1 1 auto;
      overflow: hidden; /* necessary for Firefox scrolling to work */
    }

      :is(.container .content-area-wrap) .content-area {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        background: var(--surfaceBackgroundMedium);
        min-width: 0;
        position: relative;
      }

        :is(:is(.container .content-area-wrap) .content-area) .top-shadow {
          position: relative;
          display: flex;
          flex-direction: column;
          width: 100%;
          flex: 0 0 auto;
          box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.05);
        }

        :is(:is(.container .content-area-wrap) .content-area) .app-top {
          flex: 0 0 auto;
        }

        :is(:is(.container .content-area-wrap) .content-area) .app-content {
          display: flex;
          flex-direction: column;
          flex: 1 1 auto;
          position: relative;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch; /* for iPad */
          overscroll-behavior-y: none; /* prevent scroll bounce on Safari */
          height: 100%;
          padding: 24px;
        }
      :is(:fullscreen .container) .content-area-wrap {
        top: 0;
      }
        :is(:is(:fullscreen .container) .content-area-wrap) .content-area {
          left: 0;
        }
}


      :is(:is(.page-search .list-keyboard-navigable) tr,:is(.page-search .list-keyboard-navigable) .item)  > :first-child {
        position: relative;
      }.active:is(:is(.page-search .list-keyboard-navigable) tr,:is(.page-search .list-keyboard-navigable) .item) {
        outline: none;
      }:is(.active:is(:is(.page-search .list-keyboard-navigable) tr,:is(.page-search .list-keyboard-navigable) .item) > :first-child):before {
            content: '';
            width: 2px;
            background: var(--colorIconInformational);
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
          }:is(.page-search .list-leads) .loader {
      margin-top: 5px;
    }:is(.page-search .list-leads) table {
      border: none;
      margin-bottom: 10px;
      table-layout: fixed;
      font-size: 13px;
    }:is(:is(.page-search .list-leads) table) td {
        cursor: pointer;
        background: var(--bgTableCellDefault);
      }.lead-link:is(:is(:is(.page-search .list-leads) table) td) {
          color: var(--colorLinkDefault);
        }.numeric:is(:is(:is(.page-search .list-leads) table) td) {
          text-align: right;
        }:is(:is(:is(.page-search .list-leads) table) td)  > .users-loading {
          color: #777;
        }:is(:is(.page-search .list-leads) table) td,:is(:is(.page-search .list-leads) table) th {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        border-color: var(--borderLight);
      }:is(:is(.page-search .list-leads) table) th {
        border-bottom: solid 1px var(--borderDefault);
      }:is(:is(:is(.page-search .list-leads) table) tr):first-child td {
          border-top-width: 0;
        }:is(:is(:is(.page-search .list-leads) table) tr) td:first-child,:is(:is(:is(.page-search .list-leads) table) tr) th:first-child {
          /* overwrite bootstrap defaults */
          border-left: none;
          border-radius: 0 !important;
        }:is(:is(.page-search .list-leads) table) th:not(.contact-buttons),:is(:is(.page-search .list-leads) table) td:not(.contact-buttons) {
        padding-right: 16px;
        padding-left: 16px;
      }:is(:is(.page-search .list-leads) table) td:not(.contact-buttons) {
        padding-top: 6px;
        padding-bottom: 6px;
      }/* Contact buttons styling for email/phone icons */:is(:is(.page-search .list-leads) table) td.contact-buttons,:is(:is(.page-search .list-leads) table) th.contact-buttons {
        padding: 0;
        font-size: 0; /* collapse whitespace between btns */
        text-overflow: clip !important;
        overflow: visible;
        white-space: nowrap;
      }:is(:is(:is(.page-search .list-leads) table) td.contact-buttons,:is(:is(.page-search .list-leads) table) th.contact-buttons) .call,:is(:is(:is(.page-search .list-leads) table) td.contact-buttons,:is(:is(.page-search .list-leads) table) th.contact-buttons) .email {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          position: relative;
          vertical-align: top;
          width: 16px;
          text-align: center;
          height: 32px;
          padding: 0 12px;
          color: var(--colorTextMedium);
          font-size: 12.25px;
          line-height: 32px;
        }:is(:is(:is(:is(.page-search .list-leads) table) td.contact-buttons,:is(:is(.page-search .list-leads) table) th.contact-buttons) .call,:is(:is(:is(.page-search .list-leads) table) td.contact-buttons,:is(:is(.page-search .list-leads) table) th.contact-buttons) .email) svg {
            width: 14px;
            height: 14px;
          }.inactive:is(:is(:is(:is(.page-search .list-leads) table) td.contact-buttons,:is(:is(.page-search .list-leads) table) th.contact-buttons) .call,:is(:is(:is(.page-search .list-leads) table) td.contact-buttons,:is(:is(.page-search .list-leads) table) th.contact-buttons) .email) {
            color: #ccc;
          }:is(:is(:is(.page-search .list-leads) table) td.contact-buttons,:is(:is(.page-search .list-leads) table) th.contact-buttons) .email {
          border-right: solid 1px var(--borderLight);
          color: var(--colorTextMedium);
        }:is(:is(:is(:is(.page-search .list-leads) table) td.contact-buttons,:is(:is(.page-search .list-leads) table) th.contact-buttons) a.call,:is(:is(:is(.page-search .list-leads) table) td.contact-buttons,:is(:is(.page-search .list-leads) table) th.contact-buttons) a.email):hover {
            background-color: var(--surfaceBackgroundDefault);
            color: var(--colorLinkDefault);
            -webkit-text-decoration: none;
            text-decoration: none;
          }:is(:is(:is(:is(.page-search .list-leads) table) td.contact-buttons,:is(:is(.page-search .list-leads) table) th.contact-buttons) a.call,:is(:is(:is(.page-search .list-leads) table) td.contact-buttons,:is(:is(.page-search .list-leads) table) th.contact-buttons) a.email):active {
            box-shadow:
              inset 0 2px 4px rgba(0, 0, 0, 0.15),
              0 1px 2px rgba(0, 0, 0, 0.05);
          }:is(:is(:is(.page-search .list-leads) table) th.contact-buttons) .call,:is(:is(:is(.page-search .list-leads) table) th.contact-buttons) .email {
          height: 32px;
          line-height: 32px;
        }:is(:is(.page-search .list-leads) table) th {
        font-weight: var(--fontWeightBold);
        font-size: 14px;
        line-height: 24px;
        background-image: none;
      }:is(:is(.page-search .list-leads) table) .sortable {
        --sorting-space: 12px;

        cursor: pointer;
      }.is-narrow:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value {
            padding-right: 0;
          }:is(.is-narrow:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::before,:is(.is-narrow:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::after {
              display: none;
            }.is-narrow:is(:is(:is(.page-search .list-leads) table) .sortable):hover .sortable-value {
              /* Make space for sort arrows. */
              padding-right: var(--sorting-space);
            }:is(.is-narrow:is(:is(:is(.page-search .list-leads) table) .sortable):hover .sortable-value)::before,:is(.is-narrow:is(:is(:is(.page-search .list-leads) table) .sortable):hover .sortable-value)::after {
                display: block;
              }.is-narrow.is-sortingAsc:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value {
              /* Make space for sort arrows. */
              padding-right: var(--sorting-space);
            }:is(.is-narrow.is-sortingAsc:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::after {
                display: block;
              }:is(.is-narrow.is-sortingAsc:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::before {
                display: none;
              }.is-narrow.is-sortingDesc:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value {
              /* Make space for sort arrows. */
              padding-right: var(--sorting-space);
            }:is(.is-narrow.is-sortingDesc:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::after {
                display: none;
              }:is(.is-narrow.is-sortingDesc:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::before {
                display: block;
              }/* If sorting in descending order, centerize the downwards arrow and hide the other one. */:is(.is-sortingAsc:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::before {
              display: none;
            }:is(.is-sortingAsc:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::after {
              top: 10px;
            }/* If sorting in ascending order, centerize the upwards arrow and hide the other one. */:is(.is-sortingDesc:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::before {
              top: 10px;
            }:is(.is-sortingDesc:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::after {
              display: none;
            }:is(:is(.is-sortingAsc:is(:is(:is(.page-search .list-leads) table) .sortable),.is-sortingDesc:is(:is(:is(.page-search .list-leads) table) .sortable),:is(:is(:is(.page-search .list-leads) table) .sortable):hover) .sortable-value)::before {
              border-top-color: #111;
            }:is(:is(.is-sortingAsc:is(:is(:is(.page-search .list-leads) table) .sortable),.is-sortingDesc:is(:is(:is(.page-search .list-leads) table) .sortable),:is(:is(:is(.page-search .list-leads) table) .sortable):hover) .sortable-value)::after {
              border-bottom-color: #111;
            }:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value {
          display: block;
          position: relative;
          padding-right: 12px; /* Make space for sort arrows. */

          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;

          /* Sort arrows. before */
        }:is(:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::before,:is(:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::after {
            content: '';
            position: absolute;
            right: 0;
            display: inline-block;
            width: 0;
            height: 0;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
          }:is(:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::before {
            top: 13px;
            border-top: 4px solid var(--colorIconLight);
          }:is(:is(:is(:is(.page-search .list-leads) table) .sortable) .sortable-value)::after {
            top: 7px;
            border-bottom: 4px solid var(--colorIconLight);
          }


  .opportunities-page .pull-right {
    float: right;
  }.opportunities-page .hint-box {
    margin-bottom: 20px;
    background-color: var(--bgCardLight);
    border: 1px solid var(--borderDefault);
    border-radius: var(--baseBorderRadius);
    margin-top: 25px;
    padding: 10px 20px;
  }:is(.opportunities-page .hint-box) h3 span {
      color: #3790b9;
    }:is(.opportunities-page .hint-box) a.grey-link {
      color: var(--colorTextDefault);
      border-bottom: dotted 1px var(--borderDefault);
    }:is(:is(.opportunities-page .hint-box) a.grey-link):hover {
        -webkit-text-decoration: none;
        text-decoration: none;
      }.opportunities-page .filters {
    display: flex;
    margin-bottom: 10px;
  }.clearfix:is(.opportunities-page .filters):before,.clearfix:is(.opportunities-page .filters):after {
        display: table;
        content: '';
        line-height: 0;
      }.clearfix:is(.opportunities-page .filters):after {
        clear: both;
      }:is(.opportunities-page .filters) .filter {
      margin-right: 4px;
    }.groupByFilter:is(:is(.opportunities-page .filters) .filter),.sortByFilter:is(:is(.opportunities-page .filters) .filter) {
        display: inline-block;
      }:is(.opportunities-page .filters) .divider-left {
      line-height: 1;
      border-left: solid 1px var(--borderDefault);
      display: inline-block;
      margin-left: 5px !important;
      padding-left: 8px;
    }:is(.opportunities-page .filters) .pull-right {
      margin-left: auto;
    }.opportunities-page .opportunities-page-filter-message {
    margin-bottom: 20px;
  }:is(.opportunities-page .opportunities) h4 {
      margin-top: 20px;
    }:is(.opportunities-page .opportunities) .table-wrapper {
      position: relative;

      /* use this to position the "..." button inside the last column header */
      /* but do it this way instead of sticking the element inside the <th> */
      /* so that the dropdown isn't cut off inside the <th> overflow: hidden; */
    }:is(:is(.opportunities-page .opportunities) .table-wrapper) .customize-columns {
        position: absolute;
        top: 6px;
        right: 5px;
      }.opportunities-page .opportunities {

    --tableBorderRadius: 4px;
  }:is(:is(.opportunities-page .opportunities) .table) th:nth-child(1) {
        width: 30%;
      }:is(:is(.opportunities-page .opportunities) .table) small {
        color: var(--colorTextMedium);
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }:is(.opportunities-page .opportunities) .table {
      border-radius: var(--tableBorderRadius);
      margin-bottom: 25px;
      table-layout: fixed;
    }:is(:is(.opportunities-page .opportunities) .table) td,:is(:is(.opportunities-page .opportunities) .table) th {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }:is(.opportunities-page .opportunities) .table-bordered thead:first-child tr:first-child > th:first-child,:is(.opportunities-page .opportunities) .table-bordered tbody:first-child tr:first-child > td:first-child,:is(.opportunities-page .opportunities) .table-bordered tbody:first-child tr:first-child > th:first-child {
      border-top-left-radius: var(--tableBorderRadius);
    }:is(.opportunities-page .opportunities) .table-bordered thead:first-child tr:first-child > th:last-child,:is(.opportunities-page .opportunities) .table-bordered tbody:first-child tr:first-child > td:last-child,:is(.opportunities-page .opportunities) .table-bordered tbody:first-child tr:first-child > th:last-child {
      border-top-right-radius: var(--tableBorderRadius);
    }:is(.opportunities-page .opportunities) .progress {
      position: relative;
      overflow: hidden;
      height: 20px;
      border: solid 1px var(--borderDefault);
      margin: 0;
      background-image: none;
      background: var(--bgDefaultMuted);
      box-shadow: none;
    }:is(:is(.opportunities-page .opportunities) .progress) .bar {
        width: 0%;
        height: 100%;
        float: left;
        background: var(--bgInformational);
        box-shadow: none;
        box-sizing: border-box;
      }:is(:is(.opportunities-page .opportunities) .progress) span {
        font-size: 12px;
        line-height: 15px;
        font-weight: var(--fontWeightBold);
        display: block;
        position: absolute;
        text-align: center;
        background: rgba(255, 255, 255, 0.8);
        color: var(--colorTextNeutralBlack);
        border-radius: 4px;
        left: 50%;
        width: 36px;
        margin: 2px 0 0 -18px;
      }/* clearfix copied from bootstrap */:is(:is(.opportunities-page .opportunities) .value-boxes):before,:is(:is(.opportunities-page .opportunities) .value-boxes):after {
        display: table;
        content: '';
        line-height: 0;
      }:is(:is(.opportunities-page .opportunities) .value-boxes):after {
        clear: both;
      }:is(.opportunities-page .opportunities) .value-boxes {

      background: var(--bgInformationalMuted);
      color: var(--colorTextDefault);
      line-height: 1.4;
      border-radius: 8px;
      margin: 0 0 5px 0;
    }:is(:is(.opportunities-page .opportunities) .value-boxes) .value-box {
        float: left;
        min-width: 210px;
      }.first:is(:is(:is(.opportunities-page .opportunities) .value-boxes) .value-box) {
          width: 170px;
        }:is(:is(.opportunities-page .opportunities) .value-boxes) .value-box {
        padding: 10px;
        font-size: 1.2em;
      }:is(:is(:is(.opportunities-page .opportunities) .value-boxes) .value-box) strong {
          font-weight: normal;
          font-size: 1.2em;
        }.first:is(:is(:is(.opportunities-page .opportunities) .value-boxes) .value-box) strong {
          font-size: 3.3em;
          line-height: 1;
          padding-left: 3px;
        }:is(:is(.opportunities-page .opportunities) .value-boxes) .value-box {
        white-space: nowrap;
      }:is(:is(:is(.opportunities-page .opportunities) .value-boxes) .value-box) .annualized {
          border-top: 1px dotted var(--colorIconLight);
          margin-top: 5px;
        }.top:is(:is(.opportunities-page .opportunities) .value-boxes) {
        background: var(--bgDefault);
        border-radius: 8px;
      }


  .reporting h2 {
    margin: 10px 0 5px;
  }

.reporting h3 {
    line-height: 25px;
    margin: 5px 0;
    border-bottom: dotted 1px var(--borderDefault);
  }

.reporting caption {
    text-align: left; /* overriding browser default center for table captions */
  }

:is(.reporting .filters) select {
      margin: 0;
    }

:is(.reporting .filters) .filter {
      display: inline-block;
    }

.reporting .box {
    margin: 10px 0 15px 0;
    vertical-align: top;
  }

:is(.reporting .box) a {
      -webkit-text-decoration: none;
      text-decoration: none;
      color: #06a;
    }

:is(.reporting .box) table {
      border-collapse: separate;
      border-spacing: 1px;
    }

:is(:is(.reporting .box) table) td {
        font-size: 2.8em;
        color: var(--colorTextDefault);
        text-align: center;
        line-height: 100%;
      }

:is(:is(.reporting .box) table) td,:is(:is(.reporting .box) table) th {
        border-right: dotted 1px #bbb;
        vertical-align: top;
      }

:is(:is(.reporting .box) table) td:last-child,:is(:is(.reporting .box) table) th:last-child {
        border: none;
      }

:is(.reporting .box) h3 > a {
      color: inherit;
    }

.custom-reporting .faux-select-wrapper {
    position: relative;
  }

:is(.custom-reporting .faux-select-wrapper) select {
      opacity: 0;
    }

:is(.custom-reporting .faux-select-wrapper) .faux-select {
      display: block;
      position: absolute;
      top: 0;
      /** important is needed otherwise the colors do not change when
      switching between dark and light mode due to the inline styles */
      color: var(--colorTextDefault) !important;
      padding-left: 8px;
      box-sizing: border-box;
      border: 1px solid var(--borderDefault);
      border-radius: 5px;
      background: var(--formBackground);
      pointer-events: none;
      overflow: hidden;
    }

:is(:is(.custom-reporting .faux-select-wrapper) .faux-select):active {
        border-color: var(--borderActive);
      }

:is(:is(.custom-reporting .faux-select-wrapper) .faux-select)::before {
        content: '▾';
        float: right;
        margin-right: 5px;
        color: var(--colorIconDefault);
      }

.custom-reporting .highcharts-scrollbar-button,.custom-reporting .highcharts-scrollbar-arrow {
    display: none;
  }

.custom-reporting h1 {
    display: inline-block;
  }

/* charts */

:is(.custom-reporting .highcharts-container) .highcharts-background {
      fill: transparent;
    }

:is(.custom-reporting .highcharts-container) .highcharts-grid path {
      stroke: var(--colorTextLight);
      stroke-dasharray: 1, 2;
    }

:is(:is(.custom-reporting .highcharts-container) .highcharts-series) path {
        opacity: 0.6;
      }

:is(:is(.custom-reporting .highcharts-container) .highcharts-series) rect {
        stroke-width: 0;
      }

:is(.custom-reporting .highcharts-container) .highcharts-axis text {
      font-size: 13px;
    }

:is(.custom-reporting .highcharts-container) .highcharts-axis-title,:is(.custom-reporting .highcharts-container) .highcharts-legend-navigation,:is(.custom-reporting .highcharts-container) .highcharts-breadcrumbs-button.highcharts-button-pressed text {
      /** highcharts styles this with inline styles 🫠 */
      color: var(--colorTextDefault) !important;
      fill: var(--colorTextDefault) !important;
    }

:is(.custom-reporting .highcharts-container) .highcharts-axis-labels text {
      /** highcharts styles this with inline styles 🫠 */
      color: var(--colorTextMedium) !important;
      fill: var(--colorTextMedium) !important;
    }

:is(.custom-reporting .highcharts-container) .highcharts-legend-item text,:is(.custom-reporting .highcharts-container) .highcharts-drilldown-axis-label,:is(.custom-reporting .highcharts-container) .highcharts-drilldown-axis-label span,:is(.custom-reporting .highcharts-container) path.highcharts-legend-nav-active,:is(.custom-reporting .highcharts-container) .highcharts-breadcrumbs-button.highcharts-button-normal text {
      /** highcharts styles this with inline styles 🫠 */
      color: var(--colorLinkDefault) !important;
      fill: var(--colorLinkDefault) !important;
    }

:is(:is(.custom-reporting .highcharts-container) .highcharts-legend-item text,:is(.custom-reporting .highcharts-container) .highcharts-drilldown-axis-label,:is(.custom-reporting .highcharts-container) .highcharts-drilldown-axis-label span,:is(.custom-reporting .highcharts-container) path.highcharts-legend-nav-active,:is(.custom-reporting .highcharts-container) .highcharts-breadcrumbs-button.highcharts-button-normal text):hover {
        color: var(--colorLinkHover) !important;
        fill: var(--colorLinkHover) !important;
      }

:is(.custom-reporting .highcharts-container) .highcharts-markers path {
      stroke: var(--colorGray02);
      stroke-width: 1px;
    }

:is(.custom-reporting .highcharts-container) .highcharts-tooltip > span > p.links {
      text-align: center;
      margin-top: 10px;
      margin-bottom: 5px;
    }

.custom-reporting .chart {
    min-width: 310px;
    margin: 0 auto;
  }

.custom-reporting select:focus {
    outline: 0;
    border: solid 1px #aabbd3;
  }

.custom-reporting .form {
    margin: 15px 0 15px 0;
  }

:is(:is(.custom-reporting .form) form) ul {
        margin: 0;
        list-style-type: none;
      }

:is(.custom-reporting .form) .big-field {
      width: 33.3%;
      margin: 0;
      float: left;
      box-sizing: border-box;
    }

:is(:is(.custom-reporting .form) .big-field) label {
        font-size: 18px;
        color: var(--colorTextMedium);
        font-weight: normal;
        margin: 0 6px 0 0;
        float: left;
        line-height: 49px;
        cursor: default;
      }

:is(:is(.custom-reporting .form) .big-field) .form-field {
        overflow: hidden;
        position: relative;
      }

:is(:is(:is(.custom-reporting .form) .big-field) .form-field) select {
          height: 50px;
          width: 100%;
          margin-bottom: 3px;
        }

:is(:is(:is(.custom-reporting .form) .big-field) .form-field) .faux-select-wrapper .faux-select {
          width: 100% !important;
        }

:is(:is(:is(.custom-reporting .form) .big-field) .form-field)  > .faux-select-wrapper .faux-select {
          font-size: 18px !important;
        }

:is(:is(:is(.custom-reporting .form) .big-field) .form-field) select {
          opacity: 0;
        }

:is(:is(:is(.custom-reporting .form) .big-field) .form-field) select[name='filter'],:is(:is(:is(.custom-reporting .form) .big-field) .form-field) input[name='interval'] {
          display: block;
          width: 100%;
          box-sizing: border-box;
          margin: 0;
          font-size: 12px;
          line-height: 14px;
          height: 28px;
          min-height: 28px;
          color: var(--colorTextDefault);
        }

:is(:is(:is(.custom-reporting .form) .big-field) .form-field) .small-field {
          position: relative;
          padding-left: 20px;
        }

:is(:is(:is(:is(.custom-reporting .form) .big-field) .form-field) .small-field)::before {
            content: '';
            display: block;
            border: solid 1px var(--borderDefault);
            width: 9px;
            height: 17px;
            position: absolute;
            left: 10px;
            top: -3px;
            z-index: 0;
            border-width: 0 0 1px 1px;
          }

:is(.custom-reporting .form) .big-field {

      padding-left: 19px;
    }

.field-y:is(:is(.custom-reporting .form) .big-field) {
        padding-left: 0;
      }

.custom-reporting .secondary-params {
    float: right;
    clear: left;
  }

:is(.custom-reporting .secondary-params) select,:is(.custom-reporting .secondary-params) input[type='text'] {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 0;
      height: 27px;
      min-height: 27px;
      font-size: 13px;
    }

:is(.custom-reporting .secondary-params) .field {
      float: right;
      margin-right: 5px;
    }

.field-transform_y:is(:is(.custom-reporting .secondary-params) .field) {
        width: 90px;
        margin-right: 4px;
      }

.custom-reporting .chart-border {
    padding: 5px 0 20px 0;
    background: var(--surfaceBackgroundDefault);
    border: solid 1px var(--borderDefault);
    border-radius: 6px;
  }

:is(.custom-reporting .chart-border) .secondary-params {
      margin: 1px;
    }

:is(.custom-reporting .chart-border) .chart,:is(.custom-reporting .chart-border) .chart-big-msg {
      clear: both;
      padding: 10px 10px 0 10px;
      height: 400px;
    }

:is(.custom-reporting .chart-border) .chart-big-msg {
      clear: both;
      font-size: 90px;
      /* TODO: find a proper way to darken the color or define a color in the DS */
      color: rgb(237, 237, 237);
      text-align: center;
      height: 400px;
      line-height: 370px;
    }

:is(:is(.custom-reporting .chart-border) .chart-big-msg) div {
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
      }

:is(:is(.custom-reporting .chart-border) .chart-big-msg) p {
        line-height: 1;
        font-size: 13px;
        color: #999;
        margin-top: 25px;
      }

:is(.custom-reporting .chart-tools) a {
      margin: 2px 5px 0 8px;
      float: right;
      color: #a8a8a8;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: var(--spacing-4);
    }

.custom-reporting .summary {
    margin-top: 28px;
    color: #888;
    font-size: 28px;
  }

:is(.custom-reporting .summary) .summary-metric {
      font-size: 40px;
      color: #555;
    }

.custom-reporting .table {
    margin-top: 15px;
    width: auto;
    min-width: 300px;
  }

:is(.custom-reporting .table) th,:is(.custom-reporting .table) td {
      font-weight: normal;
      color: var(--colorTextDefault);
      font-size: 18px;
      line-height: 15px;
      padding-right: 30px;
    }

.metric:is(:is(.custom-reporting .table) th,:is(.custom-reporting .table) td) {
        text-align: right;
        padding-right: 8px;
        padding-left: 30px;
      }

.metric:is(:is(.custom-reporting .table) th,:is(.custom-reporting .table) td) .transform {
          display: block;
          color: var(--colorTextMedium);
          font-size: 12px;
          line-height: 14px;
        }

.textcenter:is(:is(.custom-reporting .table) th,:is(.custom-reporting .table) td) {
        text-align: center;
        padding-right: 8px;
      }

:is(:is(.custom-reporting .table) tr.aggregate) td,:is(:is(.custom-reporting .table) tr.aggregate) th {
        font-size: 22px;
        line-height: 24px;
      }

.metric:is(:is(:is(.custom-reporting .table) tr.aggregate) td,:is(:is(.custom-reporting .table) tr.aggregate) th) {
          font-size: 24px;
        }

:is(.custom-reporting .table) td {
      background: var(--surfaceBackgroundDefault);
    }

:is(.custom-reporting .table) th {
      line-height: 30px;
    }

.inbox-page {
  --inboxHeaderPlusPaddings: 81px;

  display: flex;
  min-height: 100%;
}.inbox-page.clearfix:before,.inbox-page.clearfix:after {
      display: table;
      content: '';
      line-height: 0;
    }.inbox-page.clearfix:after {
      clear: both;
    }@media screen and (min-width: 768px) {.inbox-page {
    max-height: 100%;
}
  }.inbox-page .inbox-content {
    flex: 1;
    min-width: 0;
  }.inbox-page .upcoming-meetings {
    flex: 0 0 0%;
    margin: -24px -24px -24px 24px;
    z-index: 102; /* same as popover */
  }/* Action buttons like Archive, etc. (for both overall list and single item in expanded mode) *//* are hidden by default and then shown below based on which "view" is active. */.inbox-page .action {
    display: none;
    margin-right: 5px;
  }.inbox-page .inbox-only,.inbox-page .future-only,.inbox-page .archive-only {
    display: none;
  }.inbox-page.view-inbox .action-archive,.inbox-page.view-inbox .action-archive-selected {
      display: inline-block;
    }.inbox-page.view-inbox .inbox-only {
      display: inherit;
    }.inbox-page.view-archive .action-inbox,.inbox-page.view-archive .action-inbox-selected {
      display: inline-block;
    }.inbox-page.view-archive .archive-only {
      display: inherit;
    }.inbox-page.view-future .action-inbox,.inbox-page.view-future .action-inbox-selected,.inbox-page.view-future .action-archive,.inbox-page.view-future .action-archive-selected,.inbox-page.view-future .follow-up-view {
      display: inline-block;
    }.inbox-page.view-future .future-only {
      display: inherit;
    }.inbox-page .follow-up-view {
    margin-left: 0;
  }.inbox-page .prefix {
    vertical-align: 9px;
    padding-right: 2px;
  }.inbox-page .inbox-scroller {
    overflow-y: auto;
    margin: 0 calc(-1 * var(--spacing-16));
    max-height: calc(100% - var(--inboxHeaderPlusPaddings));
  }@media screen and (min-width: 768px) {.inbox-page .inbox-scroller {
      margin: 0 calc(-1 * var(--spacing-24));
  }
    }@media screen and (max-width: 767px) {.inbox-page .inbox-scroller {
      padding-top: calc(var(--inboxHeaderPlusPaddings) + var(--spacing-4));
  }

      .shrink:is(.inbox-page .inbox-scroller) {
        max-height: calc(
          100% - calc(var(--inboxHeaderPlusPaddings) + var(--spacing-48))
        );
      }
    }.inbox-page .big-msg {
    border-bottom: 1px solid var(--borderDefault);
    margin: 0 calc(var(--spacing-24) * -1);
    background: var(--surfaceBackgroundDefault);
    text-align: center;
    padding: 40px 0;
    min-height: 110px;
  }:is(.inbox-page .big-msg) h3 {
      margin: 0;
    }:is(.inbox-page .big-msg) p {
      color: var(--colorTextLight);
      margin: 0;
    }/* Reuse the same div/elements for the big initial loader (&.big-msg) *//* and the infinity scroll loader, and style them differently. */.inbox-page .results-loader {
    margin: var(--spacing-12) var(--spacing-16);
  }.big-msg:is(.inbox-page .results-loader) {
      margin: 0;
    }.big-msg:is(.inbox-page .results-loader) .loader-text {
        display: block;
        font-weight: normal;
        color: var(--colorTextMedium);
        font-size: 18px;
        line-height: 40px;
      }.inbox-page .big-msg .loader {
    vertical-align: baseline;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(
      to right,
      var(--surfaceBackgroundDefault) 10%,
      var(--borderDefault) 42%
    );
    position: relative;
    animation: loader 0.8s infinite linear;
  }:is(.inbox-page .big-msg .loader):before {
      width: 50%;
      height: 50%;
      background: var(--surfaceBackgroundDefault);
      border-radius: 100% 0 0 0;
      position: absolute;
      top: 0;
      left: 0;
      content: '';
    }:is(.inbox-page .big-msg .loader):after {
      background: var(--surfaceBackgroundDefault);
      width: 80%;
      height: 80%;
      border-radius: 50%;
      content: '';
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }.inbox-page {
  @keyframes loader {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* Char counter used in the inbox (replying to SMS) */
}:is(.inbox-page .item-type-incoming_sms) .char-counter {
      color: var(--colorTextLight);
      margin-left: 10px;
      line-height: 20px;
      vertical-align: -1px;
      display: inline-block;
    }.exceeded:is(:is(.inbox-page .item-type-incoming_sms) .char-counter) {
        color: var(--colorTextDanger);
      }.inbox-page.hide-edit-controls .check-all,.inbox-page.hide-edit-controls .action:not(.followup-date) {
      display: none !important;
    }.inbox-page.hide-edit-controls .results-loader {
      border-radius: 7px;
    }

@media print {
  * {
    text-shadow: none !important;
    color: #000 !important; /* Black prints faster */
    background: transparent !important;
    box-shadow: none !important;
  }

  a,
  a:visited {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  html,
  body {
    overflow: visible !important;
    height: auto !important;
  }

  .top-shadow,
  .LeftNav,
  .TopNav,
  .app-top,
  .reporting .filters,
  .opportunities-page .filters,
  .LeadOverview__AddMissing {
    display: none !important;
  }

  /* Mobile sets the position. */
  #main,
  #main > .container {
    height: auto !important;
    position: static !important;
  }

  /* Mobile sets that margin. */
  .container .content-area-wrap .content-area {
    margin-left: 0 !important;
  }

  .container .content-area-wrap .content-area .app-content {
    max-width: none !important;
    height: auto !important;
  }

  .content-area-wrap .content-area {
    border: 0 !important;
  }

  .app-content {
    position: static !important;
  }

  .search-main-inner {
    padding-right: 20px !important;
  }

  .opportunities-page .opportunities .value-boxes {
    border: 0 !important;
  }
}

.loader {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 2px;
  vertical-align: -3px;
  background-position: center center;
  background-repeat: no-repeat;
}.loader.fullscreen {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px;
  }

@media screen and (max-width: 767px) {
  .list-view > .page-search {
    max-width: 100vw;
    margin: 0;
    position: relative;
    box-sizing: border-box;
  }

    :is(.list-view > .page-search) .loader {
      margin: 15px 0 0 15px;
    }

    :is(.list-view > .page-search) .list-leads {
      margin-top: 0;
      max-width: 100vw;
      overflow-x: auto;
      margin-bottom: 10px;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
    }

      :is(:is(.list-view > .page-search) .list-leads) .table {
        min-width: 100%;
        width: auto;
        border-radius: 0;
        border: 0;
        margin: 0;
      }

        :is(:is(:is(.list-view > .page-search) .list-leads) .table) th,:is(:is(:is(.list-view > .page-search) .list-leads) .table) td {
          border-radius: 0;
        }

          :is(:is(:is(:is(.list-view > .page-search) .list-leads) .table) th,:is(:is(:is(.list-view > .page-search) .list-leads) .table) td):first-child {
            border-left: 0;
          }

    :is(.list-view > .page-search) .btn-dialer {
      display: none;
    }

    :is(.list-view > .page-search) .row,:is(.list-view > .page-search) .search-main {
      margin: 0;
    }

    :is(.list-view > .page-search) .search-main-inner {
      min-height: calc(100vh - 150px);
      padding: 0;
      box-sizing: border-box;
    }
}

@media screen and (max-width: 767px) {
  .inbox-page {
    /* TODO: this needs to be added because it's removed from .app-content at
       the same breakpoint. Other views are wrapped in <Screen/> which overrides
       that padding. Preferably the inbox page is also wrapped in Screen once
       more has been Reactized. */
    padding: 0 var(--spacing-16) 0;
  }

    .inbox-page .action {
      margin: 0;
    }

    .inbox-page .no-results,.inbox-page .results-loader.big-msg {
      border-left: 0;
      border-right: 0;
      border-radius: 0;
    }

    .inbox-page .no-results {
      margin: 0 calc(-1 * var(--spacing-16));
    }

    .inbox-page .results-loader.big-msg {
      margin: 0;
      width: 100%;
    }
      .inbox-page.hide-edit-controls .item:first-child {
        border-radius: 0;
      }

      .inbox-page.hide-edit-controls .results-loader.big-msg {
        border-top: none;
      }
}

@media screen and (max-width: 767px) {
    body #main,body #main > .container {
      position: fixed;
      top: 0;
      left: 0;
    }

    body .container {
      min-width: 100vw;
    }
        :is(:is(body .container) .content-area-wrap) .content-area {
          margin-left: -100vw;
          overflow-x: auto;
        }

          :is(:is(:is(body .container) .content-area-wrap) .content-area) .app-content {
            padding: 0;
            max-width: 100vw;
          }

      /* All of the pages below aren't responsive and hence need a min-width. */
      :is(body .container) .opportunities-page,:is(body .container) .reporting,:is(body .container) .audit-log,:is(body .container) .DialerCallingMultipleLeadsScreenWrapper {
        margin: 0;
        padding: 20px;
        min-width: 960px;
        box-sizing: border-box;
      }

      :is(body .container) .DialerCallingMultipleLeadsScreenWrapper {
        padding: 0;
      }

      :is(body .container) .settingsGlobalStyles {
        min-width: 720px;
      }
}

/**
 * This file contains ALL static styles. If an entry point imports
 * `css/style.css` it does not need to import `css/base.css`.
 */

/**
 * The styles below need to be audited and migrated
 * - Reset and base level styles should go in `base.css`
 * - Feature specific styles should be moved to the respective components
 */

/* NOTE: any changes to the header height on narrow screens needs an
   equivalent change to the opportunity pipeline mobile menu, since it has
   a hardcoded offset */

.AppHeader_header_464 {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  padding-left: var(--spacing-24);
  padding-right: var(--spacing-24);
  border-bottom: 1px solid var(--borderDefault);
  background-color: var(--surfaceBackgroundDefault);
}

@media screen and (max-width: 767px) {

.AppHeader_header_464 {
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-12); /* To line up with avatar */
}
  }

/* account for padding on general app screen and settings pages to spread full-width */
.AppHeader_eatGlobalPadding_8e7 {
  margin-top: calc(-1 * var(--spacing-24));
  margin-left: calc(-1 * var(--spacing-24));
  margin-right: calc(-1 * var(--spacing-24));
}
@media screen and (max-width: 767px) {
.AppHeader_eatGlobalPadding_8e7 {
    margin-top: calc(-1 * var(--spacing-16));
    margin-right: calc(-1 * var(--spacing-16));
    margin-left: calc(-1 * var(--spacing-16));
}

    .AppHeader_eatGlobalPadding_8e7 .AppHeader_hasBreadcrumbs_105 {
      margin-top: calc(-1 * var(--spacing-20));
    }
  }

.AppHeader_inner_ed8 {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  flex-wrap: wrap;
  row-gap: var(--spacing-12);
}

.AppHeader_isCompact_502:not(.AppHeader_hasAbsoluteTabs_b0f) .AppHeader_inner_ed8 {
    padding-bottom: var(--spacing-16);
  }

.AppHeader_hasAbsoluteTabs_b0f:not(.AppHeader_isCompact_502) .AppHeader_inner_ed8 {
    padding-bottom: 40px;
  }

/* leave even more room for tabs if there is a titleSub passed as well */

.AppHeader_hasAbsoluteTabs_b0f.AppHeader_isCompact_502 .AppHeader_inner_ed8 {
    padding-bottom: 50px;
  }

.AppHeader_hasFlowTabs_184 .AppHeader_inner_ed8 {
    padding-bottom: 0 !important;
  }

.AppHeader_isCompact_502:not(.AppHeader_hasBreadcrumbs_105) .AppHeader_inner_ed8 {
    padding-top: var(--spacing-16);
  }

.AppHeader_hasAbsoluteTabs_b0f:not(.AppHeader_hasBreadcrumbs_105) .AppHeader_inner_ed8 {
    padding-top: var(--spacing-12);
  }

.AppHeader_hasBreadcrumbs_105 .AppHeader_inner_ed8 {
    padding-bottom: 18px;
    padding-top: 18px;
  }

.AppHeader_marginBottom_845 {
  margin-bottom: var(--spacing-24);
}

@media screen and (max-width: 767px) {

.AppHeader_marginBottom_845 {
    margin-bottom: var(--spacing-16);
}
  }

/* only used in the pipelines view */
/* TODO: smaller sizing for all headings on narrow screens? */
.AppHeader_fullScreen_0dd {
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
  flex-shrink: 0;
}
.AppHeader_fullScreen_0dd .AppHeader_inner_ed8 {
    padding-top: 8px;
    padding-bottom: 8px;
  }
@media screen and (min-width: 1120px) {
.AppHeader_fullScreen_0dd {
    padding-left: 24px;
    padding-right: 24px;
}

    .AppHeader_fullScreen_0dd .AppHeader_inner_ed8 {
      padding-top: 24px;
      padding-bottom: 24px;
    }
  }
@media screen and (max-width: 767px) {
.AppHeader_fullScreen_0dd {
    padding-right: 12px; /* To line up with avatar */
}
  }

.AppHeader_title_e4d {
  flex: 1;
  margin: 0;
  min-width: 120px;
  white-space: nowrap;

  /* HACK: If TitleButton is wrapped in a select, we need to target a div that
     wraps the button in order to keep it from filling the width. Otherwise the
     popover is not positioned relative to the correct element. */
}

.AppHeader_title_e4d[aria-expanded] {
    display: flex;
    max-width: 100%;
  }

.AppHeader_hasBreadcrumbs_105 .AppHeader_title_e4d {
    margin-top: 12px;
  }

.AppHeader_actions_9b9 {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.AppHeader_breadcrumbsWrap_6e8 {
  position: absolute;
  z-index: 1;
  top: 13px;
  left: 0;
}

.AppHeader_tabsWrap_7ac {
  position: absolute;
  z-index: 1;
  bottom: -1px;
  left: 0;
  right: 0;
}

.AppHeader_titleSub_776 {
  display: block;
  color: var(--colorTextLight);
  font-size: 14px;
  line-height: 20px;
  margin-top: 4px;
  /* reset wrapping for title subtitle */
  white-space: normal;
}

.AppHeader_secondaryHeader_09d {
  /* Emulate a border so height isn't affected
     and border collapses when content height is 0 */
  box-shadow: 0px -1px 0px 0px var(--borderDefault);

  /* Adjust for main header padding */
  margin-left: calc(-1 * var(--spacing-24));
  margin-right: calc(-1 * var(--spacing-24));
}

@media screen and (max-width: 767px) {

.AppHeader_secondaryHeader_09d {
    margin-left: calc(-1 * var(--spacing-16));
    margin-right: calc(-1 * var(--spacing-12));
}
  }

@media screen and (min-height: 480px) {

.AppHeader_sticky_2dd {
    position: sticky;
    top: 0;
    z-index: var(
      --stickyHeaderZIndex
    ); /* on top of ActivityCharts__chartBoxInfo */
}
  }

.AppHeader_titleButton_2d1.AppHeader_titleButton_2d1 {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-12);
  border-radius: 16px;
  max-width: 100%;

  /* eat into left padding so text is aligned with edge of page */
  margin-left: calc(-1 * var(--spacing-12));
}

.AppHeader_titleButtonContents_c2c {
  max-width: 100%;
}

.AppHeader_titleButtonContents_c2c.AppHeader_withCaret_b8b {
    /* Leave space for the caret */
    max-width: calc(100% - 20px);
  }

.AppHeader_titleButtonContents_c2c {

  /* Firefox has a UI bug where it show ellipsis even when it has */
  /* enough space to display the whole name. */
  /* i.e. "Test" displays as "Te..." */
  /* Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1881220 */
  @-moz-document url-prefix() {
    max-width: calc(100% - 19px);
  }
}

.AppHeader_headingText_4be {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.AppHeader_caret_fac {
  width: 14px;
  height: 14px;
  margin-left: 6px;
}

.AppHeader_primaryActions_b39 {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.AppHeader_primaryActionsWithPadding_3e6 {
  padding-right: var(--spacing-8);
}

.AppHeader_secondaryActions_aa2 {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding-left: var(--spacing-8);
}

.BtnGroup > .Btn.MoreButton {
  /* When it's in a ButtonGroup, we want to add border radius on right. Even though MoreButton
     is the last element of a group in the UI, in the DOM, the dropdown is inserted after it */
  border-top-right-radius: var(--baseBorderRadius);
  border-bottom-right-radius: var(--baseBorderRadius);
}

.EmptyState_main_ca3 {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--surfaceBackgroundDefault);
  box-sizing: border-box;
}

.EmptyState_hasPadding_93a {
  padding: calc(3vw + 3vh);
}

.EmptyState_hasBorder_92d {
  border: 1px solid var(--borderDefault);
  border-radius: var(--baseBorderRadius);
  box-shadow: var(--panelShadow);
}

.EmptyState_fillHeight_943 {
  height: 100%;
}

:is(.EmptyState_centerGradient_c57,.EmptyState_bottomGradient_c43)::before {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    clip-path: polygon(0% 45px, 100% 0, 100% 100%, 0% 100%);
  }

.EmptyState_centerGradient_c57::before {
  height: 65%;
  background: linear-gradient(
    180deg,
    var(--colorGradientEmptyStateStart) -8%,
    var(--colorGradientEmptyStateEnd) 20%
  );
}

.EmptyState_bottomGradient_c43::before {
  height: 18%;
  background: linear-gradient(
    180deg,
    var(--colorGradientEmptyStateStart) -30%,
    var(--colorGradientEmptyStateEnd) 100%
  );
}

.EmptyState_graphic_1a9.EmptyState_graphic_1a9 {
  position: relative;
  margin-bottom: var(--spacing-24);
}

.EmptyState_graphic_1a9.EmptyState_graphic_1a9 svg {
    height: 150px;
    width: auto;
    vertical-align: bottom;
  }

.EmptyState_graphic_1a9.EmptyState_graphic_1a9.EmptyState_svgAutoHeight_7ad svg {
      height: auto;
    }

.EmptyState_icon_1ff {
  position: relative;
  margin-bottom: var(--spacing-24);
  background-color: var(--bgDefault);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.EmptyState_icon_1ff svg {
    width: 48px;
    height: 48px;
    vertical-align: bottom;
  }

.EmptyState_icon_1ff.EmptyState_small_2ef {
    height: 64px;
    width: 64px;
  }

.EmptyState_icon_1ff.EmptyState_small_2ef svg {
      width: 32px;
      height: 32px;
    }

.EmptyState_danger_0a2 {
  background-color: var(--failureBackgroundColor);
  color: var(--failurePrimaryColor);
}

.EmptyState_textContainer_ea4 {
  position: relative;
  text-align: center;
  max-width: 520px;
}

.EmptyState_heading_baa {
  font-size: 24px;
  margin: 0;
  line-height: 2;
}

.EmptyState_heading_baa.EmptyState_small_2ef {
    font-size: 16px;
    font-weight: 700;
  }

.EmptyState_text_351 {
  font-size: 14px;
  margin-bottom: 24px;
  text-wrap: balance;
}

.EmptyState_text_351.EmptyState_faded_5ef {
    color: var(--colorTextLight);
  }

.EmptyState_link_d9a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  white-space: nowrap;
  color: inherit;
}

label.RadioGroup_LabelWithBorder_label_385 {
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 7px;
  border: 1px solid var(--borderDefault);
}label.RadioGroup_LabelWithBorder_label_385:hover {
    border-color: var(--borderHover);
  }label.RadioGroup_LabelWithBorder_label_385.isSelected {
    background: var(--bgActiveMuted);
    border-color: var(--borderFocused);
  }

.RadioGroup_RadioButton_input_758 {
  display: none;
}

.RadioGroup_RadioButton_button_975 {
  position: relative;
  color: var(--colorTextDefault);
}

.RadioGroup_RadioButton_button_975 .Btn__icon {
    color: var(--colorIconLight);
  }

.RadioGroup_RadioButton_button_975.isSelected {
    color: var(--colorTextDefault);
  }

.RadioGroup_RadioButton_button_975.isSelected .Btn__icon {
      color: var(--colorIconDefault);
    }

label.RadioGroup_RadioItem_label_9ee {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

label.RadioGroup_RadioItem_label_9ee.RadioGroup_RadioItem_positionLeft_9b9 {
    justify-content: flex-start;
  }

label.RadioGroup_RadioItem_label_9ee.RadioGroup_RadioItem_positionCenter_977 {
    width: 100%;
    justify-content: center;
  }

input[type='radio'].RadioGroup_RadioItem_radio_1c5 {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 14px 0 0;
  flex: 0 0 auto;
}

input.RadioGroup_RadioItem_radio_1c5.RadioGroup_RadioItem_alignTop_c51[type='radio'] {
    align-self: baseline;
    margin-top: var(--spacing-4);
  }

.RadioGroup_RadioItem_labelContainer_b41 {
  flex: 0 1 auto;
}

.TileSelect_wrapper_085 {
  --options-gap: 15px; /* keep in sync w/ OPTIONS_GAP in ./index.js */
  --options-pointer-width: 10px; /* keep in sync w/ OPTIONS_POINTER_WIDTH in ./index.js */

  /* Pointer sits to the left of the options when stacked */
}

.TileSelect_wrapper_085.TileSelect_stacked_394.TileSelect_withPointer_fa1 {
    position: relative;
    padding-left: 20px;
  }

.TileSelect_options_7c4 {
  display: flex;
  column-gap: var(--options-gap);
}

.TileSelect_stacked_394 .TileSelect_options_7c4 {
    flex-direction: column;
    row-gap: var(--options-gap);
  }

.TileSelect_optionsLine_3c4 {
  position: relative;
  margin: 20px 0;
  border-bottom: 1px solid var(--borderDefault);
}

.TileSelect_stacked_394 .TileSelect_optionsLine_3c4 {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    height: 100%;
    border-bottom: none;
    border-right: 1px solid var(--borderDefault);
  }

.TileSelect_optionsPointer_f21 {
  position: absolute;
}

.TileSelect_optionsPointer_f21::before,.TileSelect_optionsPointer_f21::after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    bottom: -1px;
  }

.TileSelect_optionsPointer_f21::before {
    z-index: 1;
    border-bottom: var(--options-pointer-width) solid var(--borderDefault);
    border-right: var(--options-pointer-width) solid transparent;
    border-left: var(--options-pointer-width) solid transparent;
  }

.TileSelect_optionsPointer_f21::after {
    z-index: 2;
    left: 2px;
    border-bottom: calc(var(--options-pointer-width) - 2px) solid
      var(--surfaceBackgroundDefault);
    border-right: calc(var(--options-pointer-width) - 2px) solid transparent;
    border-left: calc(var(--options-pointer-width) - 2px) solid transparent;
  }

:is(.TileSelect_stacked_394 .TileSelect_optionsPointer_f21)::before,:is(.TileSelect_stacked_394 .TileSelect_optionsPointer_f21)::after {
      left: 0;
      bottom: initial;
    }

:is(.TileSelect_stacked_394 .TileSelect_optionsPointer_f21)::before {
      border: initial;
      border-bottom: var(--options-pointer-width) solid transparent;
      border-top: var(--options-pointer-width) solid transparent;
      border-left: var(--options-pointer-width) solid var(--borderDefault);
    }

:is(.TileSelect_stacked_394 .TileSelect_optionsPointer_f21)::after {
      top: 2px;
      border: initial;
      border-bottom: calc(var(--options-pointer-width) - 2px) solid transparent;
      border-top: calc(var(--options-pointer-width) - 2px) solid transparent;
      border-left: calc(var(--options-pointer-width) - 2px) solid
        var(--surfaceBackgroundDefault);
    }

.TileSelect_input_a56 {
  display: none;
}

.TileSelect_horizontalRadioOptionLabel_463 {
  padding: 12px 16px;
  flex: 1;
  margin: 0;
}

.TileSelect_centered_3f4 .TileSelect_horizontalRadioOptionLabel_463 {
    text-align: center;
  }

.TileSelect_optionHeading_378 {
  margin-bottom: 8px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.TileSelect_centered_3f4 .TileSelect_optionHeading_378 {
    justify-content: center;
  }

.Slideable_main_37b {
  transition: height 200ms var(--standardCurve);
}.Slideable_main_37b:not(.Slideable_isExpanded_25c) {
    overflow: hidden;
  }

.AsyncSelect_AsyncSelect_container_2f5 {
  width: 100%;
}

.AsyncSelect_AsyncSelect_inputContainer_ce6 {
  position: relative;
}

.AsyncSelect_AsyncSelect_icons_d83 {
  /* Position to the right side of the input, and give a form color background
   * so text that overflows behind the controls will not mix with them.
   */
  position: absolute;
  right: 5px;
  top: 1px;
  bottom: 1px;
  background-color: var(--formBackground);
  border-radius: var(--baseInputBorderRadius);

  display: flex;
  flex-direction: row;
  align-items: center;
}

/* The <Loader /> component has a 2px right margin on it, this is causing
 * layout shift when the loader is replaced with the search / dropdown icon.
 *
 * This corrects for that.
 */
.AsyncSelect_AsyncSelect_loader_3f0 {
  padding: 0 6px;
}

.AsyncSelect_AsyncSelect_popover_f39 {
  --popoverBorderRadius: 7px;

  background-color: var(--bgPopover);
  border-radius: var(--popoverBorderRadius);
  border: 1px solid var(--borderDefault);
  box-shadow: var(--shadowLevel3);

  z-index: var(--zindexOverlays);

  display: none;
  flex-direction: column;
}

.AsyncSelect_AsyncSelect_popover_f39.AsyncSelect_AsyncSelect_open_473 {
    display: flex;
  }

.AsyncSelect_AsyncSelect_menu_cdd {
  flex: 1;
  overflow: auto;
}

.AsyncSelect_AsyncSelect_menu_cdd ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

.AsyncSelect_AsyncSelect_menu_cdd li {
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

.AsyncSelect_AsyncSelect_footer_94e {
  border-top: 1px solid var(--borderDefault);
}

.AsyncSelect_AsyncSelect_selectItem_bd1 {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
  /* nonstandard vertical padding. 4px makes items too tall, 2px is too tight :) */
  padding: 6px var(--spacing-8);
}

.AsyncSelect_AsyncSelect_highlighted_b6c {
  background-color: var(--bgMenuItemHover);
}

.AsyncSelect_AsyncSelect_disabled_a24 {
  cursor: not-allowed;
  opacity: var(--disabledOpacity);
}

.AsyncSelect_AsyncSelect_groupSeparator_8a1 {
  display: flex;
  flex-direction: row;
  padding: var(--spacing-8);
  /* item padding + checkbox width + gap */
  padding-left: calc(var(--spacing-12));
}

.AsyncSelect_AsyncSelect_groupSeparator_8a1.AsyncSelect_AsyncSelect_hasDivider_d7c {
    border-top: 1px solid var(--borderDefault);
    margin-top: var(--spacing-8);
  }

.AsyncSelect_AsyncSelect_groupSeparator_8a1.AsyncSelect_AsyncSelect_noTitle_617 {
    margin-top: 0;
  }

.AsyncSelect_AsyncSelect_checkIcon_ebe {
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.AsyncSelect_AsyncSelect_footerItem_c4b {
  cursor: pointer;
}

.HighlightText_mark_042 {
  color: var(--colorTextNeutralBlack);
}

.HighlightText_yellow_32d {
  background-color: var(--bgHighlightMatch);
}

.HighlightText_yellow_32d.HighlightText_active_bea {
    background-color: var(--bgHighlightMatchSelected);
  }

.UserAvatar_avatarContainer_297 {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 0;
  border-radius: 50%;
  overflow: hidden;
  font-weight: var(--fontWeightBold);
  background: var(--surfaceBackgroundDefault);
}

.UserAvatar_avatarContainer_297.UserAvatar_xxx-small_95c {
    width: 12px;
    height: 12px;
    font-size: 5px;
    line-height: 9px;
  }

.UserAvatar_avatarContainer_297.UserAvatar_mini_080 {
    width: 16px;
    height: 16px;
    font-size: 7.25px;
    line-height: 9px;
  }

.UserAvatar_avatarContainer_297.UserAvatar_x-small_14a {
    width: 20px;
    height: 20px;
    font-size: 9px;
    line-height: 9px;
  }

.UserAvatar_avatarContainer_297.UserAvatar_small_919 {
    width: 24px;
    height: 24px;
    font-size: 10px;
    line-height: 9px;
  }

.UserAvatar_avatarContainer_297.UserAvatar_medium_8a1 {
    width: 32px;
    height: 32px;
    font-size: 12px;
    line-height: 14px;
  }

.UserAvatar_avatarContainer_297.UserAvatar_large_5de {
    width: 40px;
    height: 40px;
    font-size: 16px;
    line-height: 19px;
  }

.UserAvatar_avatar_b4b {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.UserAvatar_avatar_b4b:after {
    border-radius: 50%;
  }

.UserAvatar_border_0e9 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--colorFillTransparent10);
  position: absolute;
  z-index: var(--userAvatarZIndex);
}

.UserAvatar_image_06e {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border-radius: 50%;
}

.UserAvatar_initials_682 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fontWeightBold);
  letter-spacing: 0.05em;
  position: absolute;
  top: 0;
  left: 0;
}

.UserAvatar_initials_682.UserAvatar_red_b2b {
    color: var(--colorFillAvatarRed);
    background-color: var(--colorBgAvatarRed);
  }

.UserAvatar_initials_682.UserAvatar_green_9d4 {
    color: var(--colorFillAvatarGreen);
    background-color: var(--colorBgAvatarGreen);
  }

.UserAvatar_initials_682.UserAvatar_gold_5ff {
    color: var(--colorFillAvatarGold);
    background-color: var(--colorBgAvatarGold);
  }

.UserAvatar_initials_682.UserAvatar_blue_c0b {
    color: var(--colorFillAvatarBlue);
    background-color: var(--colorBgAvatarBlue);
  }

.UserAvatar_initials_682.UserAvatar_cyan_06c {
    color: var(--colorFillAvatarCyan);
    background-color: var(--colorBgAvatarCyan);
  }

.UserAvatar_initials_682.UserAvatar_purple_e6c {
    color: var(--colorFillAvatarPurple);
    background-color: var(--colorBgAvatarPurple);
  }

.UserAvatar_initials_682.UserAvatar_orange_8a6 {
    color: var(--colorFillAvatarOrange);
    background-color: var(--colorBgAvatarOrange);
  }

.UserAvatar_initials_682.UserAvatar_teal_a3f {
    color: var(--colorFillAvatarTeal);
    background-color: var(--colorBgAvatarTeal);
  }

.UserAvatar_initials_682.UserAvatar_magenta_5d8 {
    color: var(--colorFillAvatarMagenta);
    background-color: var(--colorBgAvatarMagenta);
  }

.UserAvatar_initials_682.UserAvatar_gray_dc5 {
    color: var(--colorFillAvatarGray);
    background-color: var(--colorBgAvatarGray);
  }

.UserAvatar_userAvatarAndNameWrapper_9e3 {
  display: flex;
  align-items: center;
  max-width: 100%;
}

.UserAvatar_userNameWrapper_cb3 {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.UserStatusAvatar_wrap_29e {
  --avatarSize: 40px;

  /* TODO [darkmode] "special" grey here. Also see calling/UserStatusAvatar */
  --coachingListenColor: var(--colorGray20);

  position: relative;
  width: var(--avatarSize);
  height: var(--avatarSize);
}

.UserStatusAvatar_wrap_29e::before {
    content: '';
    position: absolute;
    display: block;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: var(--avatarSize);
    height: var(--avatarSize);
    border-radius: 50%;
    border: 2px solid var(--fillSuccess);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.255, 1.28);
    transform: scale(0.5);
  }

.UserStatusAvatar_wrap_29e.UserStatusAvatar_hasStatusRing_6cd::before {
    transform: scale(1);
  }

.UserStatusAvatar_wrap_29e.UserStatusAvatar_coaching-listen_922::before {
      border-color: var(--coachingListenColor);
    }

.UserStatusAvatar_wrap_29e.UserStatusAvatar_coaching-whisper_b2f::before {
      border-color: var(--fillActive);
    }

.UserStatusAvatar_imgWrap_ed5 {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(var(--avatarSize) - 8px);
  height: calc(var(--avatarSize) - 8px);
  border-radius: 50%;
  background-color: var(--surfaceBackgroundDefault);
}

.UserStatusAvatar_isUnavailable_cb4 .UserStatusAvatar_imgWrap_ed5 .UserStatusAvatar_img_802 {
    opacity: 0.5;
  }

.UserStatusAvatar_img_802 {
  transition: opacity 0.4s ease;
  width: calc(var(--avatarSize) - 8px);
  height: calc(var(--avatarSize) - 8px);
  border-radius: 50%;
}

.UserStatusAvatar_svgFallback_8b6 {
  color: var(--coachingListenColor);
}

.UserStatusAvatar_statusIcon_f23 {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colorIconNeutralWhite);
  border: 2px solid var(--surfaceBackgroundDefault);
  width: 20px;
  height: 20px;
  border-radius: 10px;
  box-sizing: border-box;
}

.UserStatusAvatar_statusIcon_f23.UserStatusAvatar_regular-call_2af,.UserStatusAvatar_statusIcon_f23.UserStatusAvatar_power-call_c71,.UserStatusAvatar_statusIcon_f23.UserStatusAvatar_coaching-barge_59a {
    background-color: var(--fillSuccess);
  }

.UserStatusAvatar_statusIcon_f23.UserStatusAvatar_predictive-call_185 {
    background-color: var(--fillWarn);
  }

.UserStatusAvatar_statusIcon_f23.UserStatusAvatar_coaching-listen_922 {
    background-color: var(--coachingListenColor);
  }

.UserStatusAvatar_statusIcon_f23.UserStatusAvatar_coaching-whisper_b2f {
    background-color: var(--fillActive);
  }

.AvatarGroup_group_78c {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.AvatarGroup_avatarWrapper_b56 {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 12px;
  border-radius: 8px;
}

.AvatarGroup_avatarWrapper_b56.AvatarGroup_mini_351 {
    height: 20px;
  }

.AvatarGroup_avatarWrapper_b56.AvatarGroup_x-small_28a {
    height: 24px;
  }

.AvatarGroup_avatarWrapper_b56.AvatarGroup_small_5fe {
    height: 28px;
  }

/* Add full width to last child so children don't overflow container */

.AvatarGroup_avatarWrapper_b56.AvatarGroup_fixSizing_7a5.AvatarGroup_mini_351:last-child {
        width: 20px;
      }

.AvatarGroup_avatarWrapper_b56.AvatarGroup_fixSizing_7a5.AvatarGroup_x-small_28a:last-child {
        width: 24px;
      }

.AvatarGroup_avatarWrapper_b56.AvatarGroup_fixSizing_7a5.AvatarGroup_small_5fe:last-child {
        width: 28px;
      }

.AvatarGroup_imgWrap_22d {
  position: absolute;
  width: 16px;
  border: 2px solid var(--surfaceBackgroundLight);
  background-color: var(--surfaceBackgroundLight);
  opacity: 1;
  z-index: 1;
  border-radius: 50%;
}

.AvatarGroup_rest_6d6 {
  display: block;
}

.AvatarGroup_rest_6d6.AvatarGroup_mini_351 {
    margin-left: var(--spacing-8);
  }

.AvatarGroup_rest_6d6.AvatarGroup_x-small_28a,.AvatarGroup_rest_6d6.AvatarGroup_small_5fe {
    box-sizing: border-box;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
    border-radius: 50%;
    background-color: var(--gray-90);
    color: var(--white);
  }

.AvatarGroup_rest_6d6.AvatarGroup_x-small_28a {
    width: 24px;
    height: 24px;
    font-size: 8px;
  }

.AvatarGroup_rest_6d6.AvatarGroup_small_5fe {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

.ImageOrFallback_image_cef {
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.ImageOrFallback_imageLoaded_e8e {
  border-radius: var(--baseBorderRadius);
  visibility: visible;
}

.ImageOrFallback_fallback_c8b {
  display: flex;

  /* removes the element from the flow, preventing the letter to be underlined when used inside a link */
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: var(--fontWeightBold);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  color: var(--colorFillAvatarGray);
}

.ImageOrFallback_fallbackCircle_d60 {
  border-radius: 100%;
  border: 1px solid var(--colorFillTransparent10);
  background: var(--surfaceBackgroundDefault);
  background-color: var(--colorBgAvatarGray);
}

.ImageOrFallback_fallbackIcon_3f9 {
  width: 70%;
  height: 70%;
}

.LeadAvatar_avatarContainer_b16 {
  position: relative;
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
          user-select: none;
}.LeadAvatar_avatarContainer_b16 * {
    box-sizing: border-box;
  }.LeadAvatar_avatarContainer_b16.LeadAvatar_mini_7d3 {
    width: 16px;
    height: 16px;
    font-size: 8px;
    line-height: 8px;
  }.LeadAvatar_avatarContainer_b16.LeadAvatar_small_1db {
    width: 20px;
    height: 20px;
    font-size: 10px;
    line-height: 10px;
  }.LeadAvatar_avatarContainer_b16.LeadAvatar_medium_6fc {
    width: 32px;
    height: 32px;
    font-size: 12px;
    line-height: 12px;
  }.LeadAvatar_avatarContainer_b16.LeadAvatar_large_0ed {
    width: 48px;
    height: 48px;
    font-size: 18px;
    line-height: 24px;
  }

.FileDropzone_dropzone_865 {
  display: block;
  width: 100%;
}

.AttachmentTiles_tiles_a94 {
  --attachmentTileWidth: 334px;

  width: 100%;
  display: grid;
  gap: 8px;
}

@media screen and (min-width: 768px) {

.AttachmentTiles_tiles_a94 {
    grid-template-columns: repeat(auto-fill, var(--attachmentTileWidth));
}
  }

.AttachmentTiles_errorBox_660 {
  position: relative;
  margin: 8px 0 0 0;
  padding: 14px 38px 14px 16px;
  background-color: #fbe6e8;
  border: 1px solid var(--borderDefault);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  font-size: 13px;
}

.AttachmentTiles_errorBox_660 button {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    opacity: 0.25;
    transition: opacity 0.2s ease-in;
  }

/* TODO: Possibly create a button variant for such cases (icon button within colorful background) */

.AttachmentTiles_errorBox_660 button:hover,.AttachmentTiles_errorBox_660 button:active,.AttachmentTiles_errorBox_660 button:focus-visible,.AttachmentTiles_errorBox_660 button:active:hover {
    opacity: 1;
    background-color: transparent;
  }

.AttachmentIcon_icon_14b {
  display: grid;
  place-content: center;
  width: var(--size, 16px);
  height: var(--size, 16px);
  min-width: var(--size, 16px);
  min-height: var(--size, 16px);
}.AttachmentIcon_icon_14b svg {
    width: 100%;
    height: 100%;
  }

.AttachmentTiles_AttachmentTile_tile_b15 {
  --iconSize: 16px;
  --fileSizeWidth: 70px;
  --attachmentTileHeight: 32px;
  --attachmentTileSpacing: 8px;

  position: relative;
  overflow: hidden;
  display: flex;
  max-width: 100%;
  width: 100%;
  column-gap: var(--attachmentTileSpacing);
  align-items: center;
  height: var(--attachmentTileHeight);
  padding-left: var(--attachmentTileSpacing);
  box-sizing: border-box;
  border: 1px solid var(--borderDefault);
  background: var(--bgCardBase);
  border-radius: var(--borderRadiusMedium);
  box-shadow: var(--shadowLevel1);
  color: var(--colorTextDefault);
  transition: border-color 0.2s ease-out;
}

.AttachmentTiles_AttachmentTile_tile_b15:hover {
    border-color: var(--borderHover);
  }

.AttachmentTiles_AttachmentTile_tile_b15:hover,.AttachmentTiles_AttachmentTile_tile_b15:visited,.AttachmentTiles_AttachmentTile_tile_b15:focus {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

div.AttachmentTiles_AttachmentTile_tile_b15 {
  cursor: default;
}

.AttachmentTiles_AttachmentTile_errorIcon_47b {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--iconSize);
  height: var(--iconSize);
  border-radius: 3px;
  color: var(--failurePrimaryColor);
}

.AttachmentTiles_AttachmentTile_actions_b2b {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 auto;
  width: 30px;
  height: 30px;
}

.AttachmentTiles_AttachmentTile_loading_905 .AttachmentTiles_AttachmentTile_actions_b2b {
    color: var(--colorTextLight);
  }

.AttachmentTiles_AttachmentTile_actions_b2b svg {
    width: var(--iconSize);
    height: var(--iconSize);
  }

.AttachmentTiles_AttachmentTile_actions_b2b span {
    /* flex fixes vertical line-height bug */
    display: flex;
  }

.AttachmentTiles_AttachmentTile_actions_b2b button {
    width: 24px;
    height: 24px;
    padding: 0;
  }

.FileDropzone_DropArea_droparea_f69 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  border: 2px dashed #999;
  color: #777;
  font-size: 16px;
}.FileDropzone_DropArea_droparea_f69.FileDropzone_DropArea_draggingOver_34e {
    border-color: var(--colorLinkDefault);
    color: var(--colorLinkDefault);
  }.FileDropzone_DropArea_droparea_f69[hidden] {
    display: none;
  }

.AttachmentsPicker_attachmentsContainer_b8f {
  max-height: 140px;
  overflow: hidden auto;
  background: var(--surfaceBackgroundMedium);
}

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

.AttachmentCards_wrapper_7ea *,.AttachmentCards_wrapper_7ea *:before,.AttachmentCards_wrapper_7ea *:after {
    box-sizing: inherit;
  }

.AttachmentCards_cards_220 {
  /* keep in sync with ./index.js */
  --attachmentCardWidth: 164px;

  display: grid;
  grid-template-columns: repeat(auto-fit, var(--attachmentCardWidth));
  gap: var(--spacing-8);
}

.AttachmentCards_cards_220.AttachmentCards_justify-start_679 {
    justify-content: flex-start;
  }

.AttachmentCards_cards_220.AttachmentCards_justify-end_5ec {
    justify-content: flex-end;
  }

.AttachmentCards_mediaPlayerColumn_56b {
  /* make the audio player always span a whole row */
  grid-column: 1 / -1;
  max-width: 1024px;
}

.AttachmentThumbnail_thumbnail_34d {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: 0.3s opacity linear;
  z-index: 0;
}.AttachmentThumbnail_thumbnail_34d.AttachmentThumbnail_loaded_06f {
    opacity: 1;
  }

.AttachmentCards_AttachmentCard_card_314 {
  --iconSize: 24px;

  /* flex forces the card to collapse in height */
  display: flex;
  position: relative;
  width: var(--attachmentCardWidth);
  border: 1px solid var(--borderLight);
  border-radius: 7px;
  background: var(--colorBgCardAttachmentDefault);
  overflow: hidden;
  cursor: pointer;
}

.AttachmentCards_AttachmentCard_card_314:hover,.AttachmentCards_AttachmentCard_card_314:visited,.AttachmentCards_AttachmentCard_card_314:focus {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.AttachmentCards_AttachmentCard_card_314:hover {
    background: var(--colorBgCardAttachmentHover);
    border-color: var(--borderDefault);
  }

.AttachmentCards_AttachmentCard_card_314:focus {
    border-color: var(--borderFocused);
    outline: none;
  }

.AttachmentCards_AttachmentCard_default_4d1:hover,.AttachmentCards_AttachmentCard_default_4d1:focus {
    background: var(--colorBgCardAttachmentHover);
  }

.AttachmentCards_AttachmentCard_thumbnail_12b {
  position: absolute;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  transition: 0.3s opacity linear;
  z-index: 0;
}

.AttachmentCards_AttachmentCard_thumbnail_12b.AttachmentCards_AttachmentCard_loaded_cfb {
    opacity: 1;
  }

.AttachmentCards_AttachmentCard_player_f79 {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  background-color: color-mix(in srgb, var(--colorBlack) 20%, transparent);
  opacity: 0;
  transition: 0.1s opacity linear;
  pointer-events: none;
}

.AttachmentCards_AttachmentCard_card_314:is(:hover,:focus) .AttachmentCards_AttachmentCard_player_f79 {
    opacity: 1;
  }

.AttachmentCards_AttachmentCard_playerIcon_75c svg {
    width: 40px;
    height: 40px;
  }

.AttachmentCards_AttachmentCard_playerIcon_75c {
  color: var(--colorWhite);
}

@keyframes AttachmentCards_AttachmentCard_skeleton_38d {
  0% {
    background-color: color-mix(
      in srgb,
      var(--colorTextDefault) 40%,
      transparent
    );
  }
  100% {
    background-color: color-mix(
      in srgb,
      var(--colorTextDefault) 70%,
      transparent
    );
  }
}

.AttachmentCards_AttachmentCard_content_365 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--spacing-16);
  justify-content: space-between;
  min-width: 0;
  padding: var(--spacing-8);
  position: relative;
  width: 100%;
  z-index: 1;
}

.AttachmentCards_AttachmentCard_content_365.AttachmentCards_AttachmentCard_shortContent_a29 {
    align-items: center;
    flex-direction: row;
    gap: var(--spacing-8);
  }

.AttachmentCards_AttachmentCard_content_365.AttachmentCards_AttachmentCard_hasThumbnail_875 {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.25) 50%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }

.AttachmentCards_AttachmentCard_card_314:is(:hover,:focus) .AttachmentCards_AttachmentCard_content_365.AttachmentCards_AttachmentCard_hasThumbnail_875 {
      /* Needs to remain a gradient for transition to work without flickering */
      /* Hexcode is from Figma. No matching token available for this color */
      background: linear-gradient(
        180deg,
        rgba(38, 46, 57, 0.7) 50%,
        rgba(38, 46, 57, 0.7) 100%
      );
    }

.AttachmentCards_AttachmentCard_content_365.AttachmentCards_AttachmentCard_hasThumbnail_875 {

    transition:
      0.1s opacity linear,
      0.1s background linear;
  }

.AttachmentCards_AttachmentCard_content_365.AttachmentCards_AttachmentCard_hasThumbnail_875:not(.AttachmentCards_AttachmentCard_loaded_cfb) {
      animation: AttachmentCards_AttachmentCard_skeleton_38d 0.5s infinite alternate;
    }

.AttachmentCards_AttachmentCard_icon_86f {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--iconSize);
  height: var(--iconSize);
  border-radius: 50%;
  color: #fff;
}

.AttachmentCards_AttachmentCard_icon_86f.AttachmentCards_AttachmentCard_imageIcon_eca {
    background: var(--closeBrightBlue);
  }

.AttachmentCards_AttachmentCard_icon_86f.AttachmentCards_AttachmentCard_videoIcon_0d3 {
    background: var(--successPrimaryColor);
  }

.AttachmentCards_AttachmentCard_icon_86f.AttachmentCards_AttachmentCard_audioIcon_198 {
    background: var(--warningPrimaryColor);
  }

.AttachmentCards_AttachmentCard_icon_86f.AttachmentCards_AttachmentCard_pdfIcon_225 {
    background: var(--failurePrimaryColor);
  }

.AttachmentCards_AttachmentCard_icon_86f.AttachmentCards_AttachmentCard_wordIcon_9ad {
    background: var(--colorBrandBlue);
  }

.AttachmentCards_AttachmentCard_icon_86f.AttachmentCards_AttachmentCard_excelIcon_155 {
    background: var(--successPrimaryColor);
  }

.AttachmentCards_AttachmentCard_icon_86f.AttachmentCards_AttachmentCard_defaultIcon_aa2 {
    background: var(--colorTextDefault);
  }

.AttachmentCards_AttachmentCard_svg_c62 {
  display: block;
  width: 10px;
  height: 10px;
}

.AttachmentCards_AttachmentCard_svg_c62 svg {
    display: block;
  }

.AttachmentCards_AttachmentCard_text_077 {
  /* flex fixes vertical line-height bug */
  display: flex;
  line-height: 16px;
  min-width: 0;
}

.AttachmentCards_AttachmentCard_text_077 span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.AttachmentCards_AttachmentCard_attachmentName_f45 {
  color: var(--colorTextDefault);
  font-size: var(--fontSizeTiny);
}

.AttachmentCards_AttachmentCard_attachmentName_f45.AttachmentCards_AttachmentCard_short_167 {
    font-size: var(--fontSizeSmall);
  }

.AttachmentCards_AttachmentCard_attachmentName_f45.AttachmentCards_AttachmentCard_withThumbnail_d02 {
    color: var(--colorTextNeutralWhite);
  }

.AttachmentCards_AttachmentCard_size_c95 {
  color: var(--colorTextLight);
  letter-spacing: 0.25px;
  font-size: 11px;
  font-weight: var(--fontWeightRegular);
  text-transform: uppercase;
}

.AttachmentCards_AttachmentCard_size_c95.AttachmentCards_AttachmentCard_short_167 {
    font-size: var(--fontSizeTiny);
  }

.AttachmentCards_AttachmentCard_size_c95.AttachmentCards_AttachmentCard_withThumbnail_d02 {
    color: var(--colorTextNeutralWhite);
  }

.DeletableList_item_e67 {
  display: flex;
  align-items: center;
  height: 36px;
  gap: var(--spacing-16);
}

.DeletableList_label_bed {
  flex: 1;
  word-break: break-all; /* Firefox fix */
  word-break: break-word;
}

.DeletableList_deleteBtn_d09 {
  color: var(--colorIconLight);
}

.KeystrokePicker_KeystrokePickerEmptyState_emptyState_090 {
  margin-top: 32px;
  overflow: hidden;
  cursor: default;
}

.KeystrokePicker_KeystrokePickerEmptyState_noAvailableItemsGraphic_4a5 svg {
    width: 37px;
  }

.KeystrokePicker_KeystrokePickerEmptyState_noMatchingItemsGraphic_000 svg {
    width: 64px;
  }

.KeystrokePicker_KeystrokePickerInlineWrapper_keystrokePicker_867 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.KeystrokePicker_KeystrokePickerInlineWrapper_keystrokePickerNoAvailableItems_045 {
  cursor: default;
}

.Default_default_b7b {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Default_defaultText_f11 {
  flex: 0 1 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px;
}

.Default_defaultTokenText_454 {
  flex: 0 1 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Default_defaultTokenRemove_503 {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--colorIconDefault);
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: 0.5;
}

.Default_defaultTokenRemove_503 span {
    width: 14px;
    height: 14px;
  }

:is(.Default_defaultTokenRemove_503 span) svg {
      display: block;
    }

.KeystrokePicker_KeystrokePickerInput_selectedTokens_5d0 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  box-sizing: border-box;
  max-height: 112px; /* Enough for three rows of tokens */
  margin: 0;
  padding: 6px 8px;
  gap: 4px;
  overflow-y: auto;
  border: 1px solid var(--borderDefault);
  border-radius: var(--baseInputBorderRadius);
  background-color: var(--formBackground);
  transition: background-color ease-in-out 150ms;
}

.KeystrokePicker_KeystrokePickerInput_selectedTokens_5d0:focus-within {
    border: solid 1px var(--formBorderFocused);
  }

.KeystrokePicker_KeystrokePickerInput_selectedTokens_5d0.KeystrokePicker_KeystrokePickerInput_withResetButton_c50 {
    padding-right: 36px;
  }

.KeystrokePicker_KeystrokePickerInput_selectedTokens_5d0.KeystrokePicker_KeystrokePickerInput_error_9de:not(.KeystrokePicker_KeystrokePickerInput_disabled_823) {
    border-color: var(--borderDanger);
  }

.KeystrokePicker_KeystrokePickerInput_selectedTokens_5d0 *,.KeystrokePicker_KeystrokePickerInput_selectedTokens_5d0 *::before,.KeystrokePicker_KeystrokePickerInput_selectedTokens_5d0 *::after {
    box-sizing: border-box;
  }

.KeystrokePicker_KeystrokePickerInput_searchInputContainer_96f {
  flex: 1 1 auto;
  margin-left: 2px;
}

.KeystrokePicker_KeystrokePickerInput_searchInput_cd1 {
  width: 100%;
  padding: 0;
  border: none !important;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  line-height: 24px;
}

.KeystrokePicker_KeystrokePickerInput_searchInput_cd1:focus {
    outline: none;
  }

.KeystrokePicker_KeystrokePickerInput_searchInput_cd1:disabled {
    visibility: hidden;
  }

.KeystrokePicker_KeystrokePickerInput_resetButton_b48 {
  position: absolute;
  top: 5px;
  right: 5px;
}

.KeystrokePicker_KeystrokePickerMenu_menu_826 {
  display: flex;
  flex-direction: column;
  /* Make sure that maxHeight supplied by JS is internal height only */
  box-sizing: content-box;

  /* But make sure that all children are sized by border-box */
}

.KeystrokePicker_KeystrokePickerMenu_menu_826 *,.KeystrokePicker_KeystrokePickerMenu_menu_826 *::before,.KeystrokePicker_KeystrokePickerMenu_menu_826 *::after {
    box-sizing: border-box;
  }

.KeystrokePicker_KeystrokePickerMenu_menu_826.KeystrokePicker_KeystrokePickerMenu_withBorder_8e8:not(.KeystrokePicker_KeystrokePickerMenu_empty_30b) {
      border-top: solid 1px var(--borderLight);
      border-bottom: solid 1px var(--borderLight);
    }

.KeystrokePicker_KeystrokePickerMenu_menuItem_c38 {
  cursor: pointer;
  border-bottom: solid 1px var(--borderLight);

  /* The :last-child selector can't be used because the list is virtualized
    and the item itself is wrapped in another div */
}

.KeystrokePicker_KeystrokePickerMenu_menuItem_c38.KeystrokePicker_KeystrokePickerMenu_isLastItem_997 {
    border-bottom: 0;
  }

.KeystrokePicker_KeystrokePickerMenu_menuItemSelected_7f5,
.KeystrokePicker_KeystrokePickerMenu_menuItemHighlighted_92d {
  background: var(--bgMenuItemHover);
}

.KeystrokePicker_KeystrokePickerMenu_menuItemDisabled_a43 {
  cursor: not-allowed;

  /* apply to children so as not to opacify border */
}

.KeystrokePicker_KeystrokePickerMenu_menuItemDisabled_a43 > * {
    opacity: 0.5;
  }

.KeystrokePicker_KeystrokePickerMenu_vanillaScrollContainer_a08 {
  flex: 1 1 auto;
  overflow-y: auto;
}

.Token_wrapper_cc5 {
  position: relative;
  width: fit-content;
  display: flex;
  align-items: center;
  max-width: 100%;
}

.Token_root_007 {
  /* TODO: consider moving to a global scope and share with other components */
  --tokenHeightMedium: 24px;

  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 0px var(--spacing-8);
  background-color: var(--bgTokenDefault);
  height: var(--tokenHeightMedium);
  border-radius: var(--tokenHeightMedium);
  white-space: nowrap;
  border: 1px solid transparent;
  color: var(--tokenTextColor);
  box-sizing: border-box;
  font-size: var(--fontSizeSmall);
  color: var(--colorTextDefault);
}

.Token_root_007.Token_withRemoveButton_325 {
    padding-right: 28px;
  }

.Token_root_007:focus,.Token_root_007:focus-visible:not(.Token_disabled_8ab) {
    outline: none;
    box-shadow: 0px 0px 0px 2px var(--borderFocused);
  }

.Token_root_007.Token_danger_c9d {
    background-color: var(--bgTokenDanger);
    color: var(--colorTextDanger);
  }

.Token_root_007.Token_danger_c9d:hover {
      background-color: var(--bgTokenDangerHover);
    }

.Token_root_007.Token_danger_c9d:active {
      background-color: var(--bgTokenDangerPressed);
    }

.Token_root_007.Token_danger_c9d:focus,.Token_root_007.Token_danger_c9d:focus-visible:not(.Token_disabled_8ab) {
      outline: none;
      box-shadow: 0px 0px 0px 2px var(--borderDangerMuted);
    }

.Token_root_007.Token_secondary_cdb {
    background-color: var(--bgDefaultMuted);
  }

.Token_root_007.Token_secondary_cdb:focus,.Token_root_007.Token_secondary_cdb:focus-visible:not(.Token_disabled_8ab) {
      outline: none;
      box-shadow: 0px 0px 0px 2px var(--borderDefault);
    }

.Token_root_007.Token_disabled_8ab {
    opacity: 0.7;
    cursor: not-allowed;
  }

.Token_interactive_1e5 {
  cursor: pointer;
}

.Token_interactive_1e5:hover:not(.Token_disabled_8ab) {
    background-color: var(--bgTokenHover);
  }

.Token_interactive_1e5:active:not(.Token_disabled_8ab) {
    background-color: var(--bgTokenPressed);
  }

:is(.Token_interactive_1e5 .Token_secondary_cdb):hover:not(.Token_disabled_8ab) {
      background-color: var(--bgDefaultMutedHover);
    }

:is(.Token_interactive_1e5 .Token_secondary_cdb):active:not(.Token_disabled_8ab) {
      background-color: var(--bgDefaultMutedPressed);
    }

.Token_removeButtonWrapper_cc4 {
  position: absolute;
  right: var(--spacing-4);
  top: 0.5px;
}

.Token_draggableTokenWrapper_e62 {
  display: flex;
  align-items: center;
  z-index: 2;
  max-width: 100%;
  /* keep in sync with --tokenHeightMedium */
  border-radius: 24px;
}

.Token_draggableTokenWrapper_e62.Token_draggable_144 .Token_root_007 {
      cursor: grab;
    }

.Token_draggableTokenWrapper_e62.Token_draggable_144 {

    touch-action: none;
  }

.Token_draggableTokenWrapper_e62.Token_draggable_144.Token_dragging_8ca .Token_root_007 {
        cursor: grabbing;
      }

.Token_draggableTokenWrapper_e62.Token_draggable_144.Token_dragging_8ca {
      box-shadow: var(--shadowLevel2);
    }


  @media screen and (min-width: 768px) {

.modules_responsive_hideForMedium_a9b {
    display: none !important;
}
  }

@media screen and (max-width: 1119px) {

.modules_responsive_showForLarge_0c4 {
    display: none !important;
}
  }

.AppFilterBar_container_ea5 {
  flex: 0 0 auto;
  position: relative;
  height: var(--appFilterBarHeight);
  max-height: var(--appFilterBarHeight);
  overflow-y: hidden;
  transition: max-height 0.2s;
}

.AppFilterBar_containerClosed_181 {
  max-height: 0;
}

.AppFilterBar_main_1e6 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-12);
  box-sizing: border-box;
  height: var(--appFilterBarHeight);

  overflow-x: scroll;
  scrollbar-width: none;
  --ms-overflow-style: none;
}

.AppFilterBar_main_1e6::-webkit-scrollbar {
    display: none;
  }

/* Matches medium.down conditional rendering (so with no Column wrapper) */

@media screen and (max-width: 1119px) {

.AppFilterBar_main_1e6 {
    gap: var(--spacing-4);
}
  }

/* Matches large.up conditional rendering (so with Column wrapper) */

@media screen and (min-width: 1120px) {

.AppFilterBar_main_1e6 {
    justify-content: space-between;
    gap: var(--spacing-12);

    /* By default, flex items won't shrink
     beyond their minimum content size, possibly overflowing the parent.
     We can change that by explicitly setting no minimum width. */
}
    .AppFilterBar_main_1e6 > * {
      min-width: 0;
    }
  }

.AppFilterBar_column_ed1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-4);

  /* By default, flex items won't shrink
     beyond their minimum content size, possibly overflowing the parent.
     We can change that by explicitly setting no minimum width. */
}

@media screen and (min-width: 1120px) {

.AppFilterBar_column_ed1 {
    min-width: 0;
}

    .AppFilterBar_column_ed1 > * {
      min-width: 0;
    }
  }

.AppFilterBar_divider_b65 {
  background: var(--colorFillTransparent10);
  height: 20px;
  margin: 0 var(--spacing-8);
  width: 1px;
}

.MultiSortBySelect_buttonContainer_765 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 4px;
}

.MultiSortBySelect_button_5ce {
  flex: 1 0 auto;
  margin: 4px;
}

.MultiSortBySelect_popoverActions_c82 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--surfaceBackgroundDefault);
}

.MultiSortBySelect_anotherSortFieldButton_657:disabled,.MultiSortBySelect_anotherSortFieldButton_657:disabled:hover {
    border: none;
  }

.MultiSortBySelect_SortFieldsList_sortField_c79 {
  display: flex;
  align-items: center;
  padding: 6px 7px 6px 10px;
}

@media screen and (min-width: 768px) {
      .MultiSortBySelect_SortFieldsList_sortField_c79:hover .MultiSortBySelect_SortFieldsList_dragHandle_63a {
        display: flex;
      }

        :is(.MultiSortBySelect_SortFieldsList_sortField_c79:hover .MultiSortBySelect_SortFieldsList_dragHandle_63a) + .MultiSortBySelect_SortFieldsList_sortFieldNumber_e9f {
          display: none;
        }
  }

.MultiSortBySelect_SortFieldsList_sortFieldNumber_e9f {
  width: 16px;
  margin: 0 8px;
  line-height: 16px;
  text-align: center;
}

.MultiSortBySelect_SortFieldsList_sortFieldLabelWrapper_b4e {
  position: relative;
  width: 198px;
}

@media screen and (max-width: 767px) {

.MultiSortBySelect_SortFieldsList_sortFieldLabelWrapper_b4e {
    width: 140px;
}
  }

.MultiSortBySelect_SortFieldsList_directionButtons_f04 {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);

  /* needs to be within .directButtons to properly override ButtonGroup specificity */
}

.MultiSortBySelect_SortFieldsList_directionButtons_f04 .MultiSortBySelect_SortFieldsList_directionButton_cbb {
    width: 72px;
    height: 28px;
    border: 2px solid var(--borderDefault);
    border-radius: 3px;
    font-size: 11px;
    font-weight: var(--fontWeightBold);
  }

.MultiSortBySelect_SortFieldsList_active_54d:is(.MultiSortBySelect_SortFieldsList_directionButtons_f04 .MultiSortBySelect_SortFieldsList_directionButton_cbb) {
      border-color: var(--borderActive);
    }

.MultiSortBySelect_SortFieldsList_dragHandle_63a {
  display: none;
  align-items: center;
  margin: 0 8px;
  cursor: grab;
}

.MultiSortBySelect_SortFieldsList_dragHandle_63a svg {
    width: 16px;
  }

.Loader_FullScreenLoader_container_e0f {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* TODO [darkmode] overlay alias? */
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--colorTextNeutralWhite);
  font-size: 22px;
  flex-direction: column;
}

.Loader_FullScreenLoader_loadingIcon_c36 {
  display: block;
  margin-bottom: 20px;
}

.Loader_FullScreenLoader_loadingIcon_c36 svg {
    width: 40px;
    height: 40px;
  }

.Card_card_dd2 {
  background: var(--bgCardBase);
  border: 1px solid var(--borderDefault);
  border-radius: 7px;
  box-shadow: var(--shadowLevel1);
  transition: box-shadow linear 0.3s;
}.Card_card_dd2:hover:not(.Card_fixed_8a3) {
    box-shadow: var(--shadowLevel2);
    background: var(--bgCardHover);
    border-color: var(--borderHover);
  }.Card_card_dd2.Card_shadowLevel1_42a {
    /* No shadow */
  }.Card_card_dd2.Card_shadowLevel2_600 {
    /* No shadow */
  }.Card_card_dd2.Card_shadowLevel3_d1c {
    box-shadow: var(--shadowLevel3);
  }.Card_card_dd2.Card_shadowLevel4_1d3 {
    box-shadow: var(--shadowLevel4);
  }.Card_card_dd2:focus-within:not(.Card_fixed_8a3) {
    border-color: transparent;
  }.Card_card_dd2.Card_border-solid_b28 {
    border-style: solid;
  }.Card_card_dd2.Card_border-dashed_e1b {
    border-style: dashed;
  }.Card_card_dd2.Card_defaultBorderColor_201:focus-within {
    border-color: var(--borderDefault);
  }.Card_card_dd2.Card_disabled_7b7 {
    opacity: var(--disabledOpacity);
    background: var(--surfaceBackgroundMedium);
    cursor: not-allowed;
  }.Card_card_dd2.Card_disabled_7b7:hover {
    background: var(--surfaceBackgroundMedium);
    box-shadow: var(--shadowLevel1);
  }

.WistiaVideoPlayerModal_root_ffe {
  /* The base z-index for the video player needs to be higher than modals */
  --videoPlayerZ: calc(var(--zindexModal) + 40);
  --videoPlayerOverlayZ: calc(var(--videoPlayerZ) + 20);

  --headerHeight: var(--spacing-48);
  --gutter: var(--spacing-12);
  --safeTop: calc(var(--gutter) + var(--headerHeight));
  --insetGutterSide: calc(var(--gutter) + var(--spacing-32) + var(--spacing-4));

  /* Safe area padding with  gap between the pagination buttons and the renderer */
  --insetPadding: var(--safeTop) var(--insetGutterSide) var(--gutter)
    var(--insetGutterSide);

  /* Safe area padding flush with the pagination buttons */
  --flushPadding: var(--safeTop) var(--gutter) var(--gutter) var(--gutter);
}

@media screen and (min-width: 768px) {

.WistiaVideoPlayerModal_root_ffe {
    --headerHeight: var(--spacing-64);
    --gutter: var(--spacing-32);
}
  }

.WistiaVideoPlayerModal_root_ffe {

  z-index: var(--videoPlayerZ);
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: color-mix(in srgb, transparent 25%, var(--colorGray90));
}

.WistiaVideoPlayerModal_content_d47 {
  display: grid;
  overflow: hidden;
  outline: none;
  height: 100%;
  width: 100%;
}

.WistiaVideoPlayerModal_content_d47  > * {
    grid-area: 1 / 1;
  }

.WistiaVideoPlayerModal_renderer_ea5 {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--insetPadding);
}

.WistiaVideoPlayerModal_renderer_ea5:empty {
    display: none;
  }

.WistiaVideoPlayerModal_player_a9c {
  width: 100%;
  max-width: 1280px;
  height: 100%;
  display: grid;
  place-items: center;
}

.WistiaVideoPlayerModal_Overlay_root_928 {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  /* vh/vw included as a fallback because safe viewport units are not supported in Electron 19 */
  height: 100svh;
  width: 100svw;
  z-index: calc(var(--fileViewerOverlayZ) + 1);
  pointer-events: none;
  overflow: hidden;
}

.WistiaVideoPlayerModal_Overlay_header_0a7 {
  box-sizing: border-box;
  pointer-events: auto;
  height: var(--headerHeight, var(--spacing-64));
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-8);
  padding: 0 var(--spacing-8);

  background-color: color-mix(in srgb, transparent 10%, var(--colorBlack));
}

@media screen and (min-width: 768px) {

.WistiaVideoPlayerModal_Overlay_header_0a7 {
    padding: 0 var(--spacing-16);
    background-color: color-mix(in srgb, transparent 70%, var(--colorBlack));
}
  }

.WistiaVideoPlayerModal_Overlay_spacer_609 {
  display: block;
}

.WistiaVideoPlayerModal_Overlay_actions_ff9 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-4);
}

@media screen and (min-width: 768px) {

.WistiaVideoPlayerModal_Overlay_actions_ff9 {
    gap: var(--spacing-8);
}
  }

.Button_OAuthButton_parent_87d {
  display: inline-flex;
  padding: 0 !important;
}

.Button_OAuthButton_text_73a {
  font-size: 14px;
  line-height: var(--spacing-16);
  color: var(--colorTextDefault);
  border-radius: 0 var(--spacing-16) var(--spacing-16) 0;
  margin: 0;
  padding: 6px var(--spacing-16) 6px var(--spacing-4);
}

.Button_OAuthButton_text_73a.Button_OAuthButton_bold_d78 {
    font-weight: var(--fontWeightBold);
  }

.Button_OAuthButton_button_a6b {
  display: grid;
  grid-template-columns: 36px min-content;
  align-items: center;
}

.Button_OAuthButton_button_a6b.Button_OAuthButton_fullWidth_0ef {
    grid-template-columns: 36px 1fr;
    width: 100%;
  }

.Button_OAuthButton_button_a6b .Button_OAuthButton_icon_210 {
    position: unset;
  }

.Button_OAuthButton_button_a6b.Button_OAuthButton_dark_0be .Button_OAuthButton_text_73a {
      color: var(--colorTextNeutralWhite);
      padding: 6px var(--spacing-16) 6px var(--spacing-8);
    }

.Button_OAuthButton_button_a6b.Button_OAuthButton_dark_0be.Button_OAuthButton_google_a33 .Button_OAuthButton_text_73a {
        background: #4285f4;
      }

.Button_OAuthButton_button_a6b.Button_OAuthButton_dark_0be.Button_OAuthButton_microsoft_573 .Button_OAuthButton_text_73a {
        background: #2f2f2f;
      }

.Button_OAuthButton_button_a6b.Button_OAuthButton_dark_0be.Button_OAuthButton_zoom_1b5 {
      /* No styles */
    }

.Button_OAuthButton_button_a6b.Button_OAuthButton_dark_0be.Button_OAuthButton_calendly_913 {
      /* No styles */
    }

.Button_OAuthButton_centered_b43.Button_OAuthButton_button_a6b {
    display: flex;
    justify-content: center;
  }

.Button_OAuthButton_large_bb3 {
  border-radius: 100px !important;
}

.Button_OAuthButton_large_bb3 .Button_OAuthButton_button_a6b {
    height: 44px;
  }

:is(.Button_OAuthButton_large_bb3 .Button_OAuthButton_button_a6b) .Button_OAuthButton_text_73a {
      border-radius: 0 100px 100px 0;
      font-weight: var(--fontWeightBold);
      font-size: 16px;
      line-height: 130%;
    }

:is(.Button_OAuthButton_large_bb3 .Button_OAuthButton_button_a6b) .Button_OAuthButton_icon_210 svg {
      width: 24px;
      height: 24px;
    }

.Form_hiddenSubmit_19a {
  /*
    We can't use "display: none" as implicit form submit would NOT work in Safari if there is a readonly element.
    See https://stackoverflow.com/questions/47559991/html-form-onsubmit-fails-to-fire-on-certain-browsers-with-hidden-submit-button-a
  */
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -3000px;
}

.Form_fetcherForm_2c9 {
  /* base form have 20px of bottom margin */
  margin: 0;
}

.CustomField_field_a2e {
  display: flex;
  place-items: center;
  font-size: 14px;
  line-height: 16px;
  color: var(--colorTextDefault);
  max-width: 100%;
}
.CustomField_fieldNameAndDescription_633 {
  flex: 0 1 100%;
  overflow: hidden;
  padding: 12px;
}
.CustomField_fieldName_ac9 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.CustomField_fieldDescription_b18 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--gray-50);
}
.CustomField_fieldType_fb9 {
  flex: 0 0 180px; /* Wide enough for every field type */
  white-space: nowrap;
  padding: 12px;
}
.CustomField_fieldSelectedIndicator_2e7 {
  flex: 0 0 16px;
  padding: 12px 16px 8px;
  width: 16px;
}
.CustomField_fieldSelectPrompt_8d3 {
  visibility: hidden;
}
.CustomField_fieldIsHighlighted_a50 .CustomField_fieldSelectPrompt_8d3 {
    visibility: visible;
  }
.CustomField_fieldSelectPrompt_8d3 {
  flex: 0 0 16px;
  padding: 12px 16px 8px;
  width: 16px;
}

.PresetDateRangePicker_panel {
  padding: 0 22px 11px;
}
.PresetDateRangePicker_button {
  position: relative;
  height: 100%;
  text-align: center;
  background: 0 0;
  border: 2px solid #00a699;
  color: #00a699;
  padding: 4px 12px;
  margin-right: 8px;
  font: inherit;
  font-weight: 700;
  line-height: normal;
  overflow: visible;
  box-sizing: border-box;
  cursor: pointer;
}
.PresetDateRangePicker_button:active {
  outline: 0;
}
.PresetDateRangePicker_button__selected {
  color: #fff;
  background: #00a699;
}
.SingleDatePickerInput {
  display: inline-block;
  background-color: #fff;
}
.SingleDatePickerInput__withBorder {
  border-radius: 2px;
  border: 1px solid #dbdbdb;
}
.SingleDatePickerInput__rtl {
  direction: rtl;
}
.SingleDatePickerInput__disabled {
  background-color: #f2f2f2;
}
.SingleDatePickerInput__block {
  display: block;
}
.SingleDatePickerInput__showClearDate {
  padding-right: 30px;
}
.SingleDatePickerInput_clearDate {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  padding: 10px;
  margin: 0 10px 0 5px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.SingleDatePickerInput_clearDate__default:focus,
.SingleDatePickerInput_clearDate__default:hover {
  background: #dbdbdb;
  border-radius: 50%;
}
.SingleDatePickerInput_clearDate__small {
  padding: 6px;
}
.SingleDatePickerInput_clearDate__hide {
  visibility: hidden;
}
.SingleDatePickerInput_clearDate_svg {
  fill: #82888a;
  height: 12px;
  width: 15px;
  vertical-align: middle;
}
.SingleDatePickerInput_clearDate_svg__small {
  height: 9px;
}
.SingleDatePickerInput_calendarIcon {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 0 5px 0 10px;
}
.SingleDatePickerInput_calendarIcon_svg {
  fill: #82888a;
  height: 15px;
  width: 14px;
  vertical-align: middle;
}
.SingleDatePicker {
  position: relative;
  display: inline-block;
}
.SingleDatePicker__block {
  display: block;
}
.SingleDatePicker_picker {
  z-index: 1;
  background-color: #fff;
  position: absolute;
}
.SingleDatePicker_picker__rtl {
  direction: rtl;
}
.SingleDatePicker_picker__directionLeft {
  left: 0;
}
.SingleDatePicker_picker__directionRight {
  right: 0;
}
.SingleDatePicker_picker__portal {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.SingleDatePicker_picker__fullScreenPortal {
  background-color: #fff;
}
.SingleDatePicker_closeButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2;
}
.SingleDatePicker_closeButton:focus,
.SingleDatePicker_closeButton:hover {
  color: darken(#cacccd, 10%);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.SingleDatePicker_closeButton_svg {
  height: 15px;
  width: 15px;
  fill: #cacccd;
}
.DayPickerKeyboardShortcuts_buttonReset {
  background: 0 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
}
.DayPickerKeyboardShortcuts_buttonReset:active {
  outline: 0;
}
.DayPickerKeyboardShortcuts_show {
  width: 33px;
  height: 26px;
  position: absolute;
  z-index: 2;
}
.DayPickerKeyboardShortcuts_show::before {
  content: '';
  display: block;
  position: absolute;
}
.DayPickerKeyboardShortcuts_show__bottomRight {
  bottom: 0;
  right: 0;
}
.DayPickerKeyboardShortcuts_show__bottomRight::before {
  border-top: 26px solid transparent;
  border-right: 33px solid #00a699;
  bottom: 0;
  right: 0;
}
.DayPickerKeyboardShortcuts_show__bottomRight:hover::before {
  border-right: 33px solid #008489;
}
.DayPickerKeyboardShortcuts_show__topRight {
  top: 0;
  right: 0;
}
.DayPickerKeyboardShortcuts_show__topRight::before {
  border-bottom: 26px solid transparent;
  border-right: 33px solid #00a699;
  top: 0;
  right: 0;
}
.DayPickerKeyboardShortcuts_show__topRight:hover::before {
  border-right: 33px solid #008489;
}
.DayPickerKeyboardShortcuts_show__topLeft {
  top: 0;
  left: 0;
}
.DayPickerKeyboardShortcuts_show__topLeft::before {
  border-bottom: 26px solid transparent;
  border-left: 33px solid #00a699;
  top: 0;
  left: 0;
}
.DayPickerKeyboardShortcuts_show__topLeft:hover::before {
  border-left: 33px solid #008489;
}
.DayPickerKeyboardShortcuts_showSpan {
  color: #fff;
  position: absolute;
}
.DayPickerKeyboardShortcuts_showSpan__bottomRight {
  bottom: 0;
  right: 5px;
}
.DayPickerKeyboardShortcuts_showSpan__topRight {
  top: 1px;
  right: 5px;
}
.DayPickerKeyboardShortcuts_showSpan__topLeft {
  top: 1px;
  left: 5px;
}
.DayPickerKeyboardShortcuts_panel {
  overflow: auto;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  padding: 22px;
  margin: 33px;
  text-align: left;
}
.DayPickerKeyboardShortcuts_title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.DayPickerKeyboardShortcuts_list {
  list-style: none;
  padding: 0;
  font-size: 14px;
}
.DayPickerKeyboardShortcuts_close {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 2;
}
.DayPickerKeyboardShortcuts_close:active {
  outline: 0;
}
.DayPickerKeyboardShortcuts_closeSvg {
  height: 15px;
  width: 15px;
  fill: #cacccd;
}
.DayPickerKeyboardShortcuts_closeSvg:focus,
.DayPickerKeyboardShortcuts_closeSvg:hover {
  fill: #82888a;
}
.CalendarDay {
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}
.CalendarDay:active {
  outline: 0;
}
.CalendarDay__defaultCursor {
  cursor: default;
}
.CalendarDay__default {
  border: 1px solid #e4e7e7;
  color: #484848;
  background: #fff;
}
.CalendarDay__default:hover {
  background: #e4e7e7;
  border: 1px solid #e4e7e7;
  color: inherit;
}
.CalendarDay__hovered_offset {
  background: #f4f5f5;
  border: 1px double #e4e7e7;
  color: inherit;
}
.CalendarDay__outside {
  border: 0;
  background: #fff;
  color: #484848;
}
.CalendarDay__outside:hover {
  border: 0;
}
.CalendarDay__blocked_minimum_nights {
  background: #fff;
  border: 1px solid #eceeee;
  color: #cacccd;
}
.CalendarDay__blocked_minimum_nights:active,
.CalendarDay__blocked_minimum_nights:hover {
  background: #fff;
  color: #cacccd;
}
.CalendarDay__highlighted_calendar {
  background: #ffe8bc;
  color: #484848;
}
.CalendarDay__highlighted_calendar:active,
.CalendarDay__highlighted_calendar:hover {
  background: #ffce71;
  color: #484848;
}
.CalendarDay__selected_span {
  background: #66e2da;
  border: 1px double #33dacd;
  color: #fff;
}
.CalendarDay__selected_span:active,
.CalendarDay__selected_span:hover {
  background: #33dacd;
  border: 1px double #33dacd;
  color: #fff;
}
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
  background: #00a699;
  border: 1px double #00a699;
  color: #fff;
}
.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
  background: #b2f1ec;
  border: 1px double #80e8e0;
  color: #007a87;
}
.CalendarDay__hovered_span:active {
  background: #80e8e0;
  border: 1px double #80e8e0;
  color: #007a87;
}
.CalendarDay__blocked_calendar,
.CalendarDay__blocked_calendar:active,
.CalendarDay__blocked_calendar:hover {
  background: #cacccd;
  border: 1px solid #cacccd;
  color: #82888a;
}
.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:active,
.CalendarDay__blocked_out_of_range:hover {
  background: #fff;
  border: 1px solid #e4e7e7;
  color: #cacccd;
}
.CalendarDay__hovered_start_first_possible_end {
  background: #eceeee;
  border: 1px double #eceeee;
}
.CalendarDay__hovered_start_blocked_min_nights {
  background: #eceeee;
  border: 1px double #e4e7e7;
}
.CalendarMonth {
  background: #fff;
  text-align: center;
  vertical-align: top;
  -webkit-user-select: none;
  user-select: none;
}
.CalendarMonth_table {
  border-collapse: collapse;
  border-spacing: 0;
}
.CalendarMonth_verticalSpacing {
  border-collapse: separate;
}
.CalendarMonth_caption {
  color: #484848;
  font-size: 18px;
  text-align: center;
  padding-top: 22px;
  padding-bottom: 37px;
  caption-side: initial;
}
.CalendarMonth_caption__verticalScrollable {
  padding-top: 12px;
  padding-bottom: 7px;
}
.CalendarMonthGrid {
  background: #fff;
  text-align: left;
  z-index: 0;
}
.CalendarMonthGrid__animating {
  z-index: 1;
}
.CalendarMonthGrid__horizontal {
  position: absolute;
  left: 9px;
}
.CalendarMonthGrid__vertical {
  margin: 0 auto;
}
.CalendarMonthGrid__vertical_scrollable {
  margin: 0 auto;
  overflow-y: scroll;
}
.CalendarMonthGrid_month__horizontal {
  display: inline-block;
  vertical-align: top;
  min-height: 100%;
}
.CalendarMonthGrid_month__hideForAnimation {
  position: absolute;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}
.CalendarMonthGrid_month__hidden {
  visibility: hidden;
}
.DayPickerNavigation {
  position: relative;
  z-index: 2;
}
.DayPickerNavigation__horizontal {
  height: 0;
}
.DayPickerNavigation__verticalDefault {
  position: absolute;
  width: 100%;
  height: 52px;
  bottom: 0;
  left: 0;
}
.DayPickerNavigation__verticalScrollableDefault {
  position: relative;
}
.DayPickerNavigation_button {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.DayPickerNavigation_button__default {
  border: 1px solid #e4e7e7;
  background-color: #fff;
  color: #757575;
}
.DayPickerNavigation_button__default:focus,
.DayPickerNavigation_button__default:hover {
  border: 1px solid #c4c4c4;
}
.DayPickerNavigation_button__default:active {
  background: #f2f2f2;
}
.DayPickerNavigation_button__disabled {
  cursor: default;
  border: 1px solid #f2f2f2;
}
.DayPickerNavigation_button__disabled:focus,
.DayPickerNavigation_button__disabled:hover {
  border: 1px solid #f2f2f2;
}
.DayPickerNavigation_button__disabled:active {
  background: 0 0;
}
.DayPickerNavigation_button__horizontalDefault {
  position: absolute;
  top: 18px;
  line-height: 0.78;
  border-radius: 3px;
  padding: 6px 9px;
}
.DayPickerNavigation_leftButton__horizontalDefault {
  left: 22px;
}
.DayPickerNavigation_rightButton__horizontalDefault {
  right: 22px;
}
.DayPickerNavigation_button__verticalDefault {
  padding: 5px;
  background: #fff;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  display: inline-block;
  text-align: center;
  height: 100%;
  width: 50%;
}
.DayPickerNavigation_nextButton__verticalDefault {
  border-left: 0;
}
.DayPickerNavigation_nextButton__verticalScrollableDefault {
  width: 100%;
}
.DayPickerNavigation_svg__horizontal {
  height: 19px;
  width: 19px;
  fill: #82888a;
  display: block;
}
.DayPickerNavigation_svg__vertical {
  height: 42px;
  width: 42px;
  fill: #484848;
}
.DayPickerNavigation_svg__disabled {
  fill: #f2f2f2;
}
.DayPicker {
  background: #fff;
  position: relative;
  text-align: left;
}
.DayPicker__horizontal {
  background: #fff;
}
.DayPicker__verticalScrollable {
  height: 100%;
}
.DayPicker__hidden {
  visibility: hidden;
}
.DayPicker__withBorder {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.07);
  border-radius: 3px;
}
.DayPicker_portal__horizontal {
  box-shadow: none;
  position: absolute;
  left: 50%;
  top: 50%;
}
.DayPicker_portal__vertical {
  position: initial;
}
.DayPicker_focusRegion {
  outline: 0;
}
.DayPicker_calendarInfo__horizontal,
.DayPicker_wrapper__horizontal {
  display: inline-block;
  vertical-align: top;
}
.DayPicker_weekHeaders {
  position: relative;
}
.DayPicker_weekHeaders__horizontal {
  margin-left: 9px;
}
.DayPicker_weekHeader {
  color: #757575;
  position: absolute;
  top: 62px;
  z-index: 2;
  text-align: left;
}
.DayPicker_weekHeader__vertical {
  left: 50%;
}
.DayPicker_weekHeader__verticalScrollable {
  top: 0;
  display: table-row;
  border-bottom: 1px solid #dbdbdb;
  background: #fff;
  margin-left: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.DayPicker_weekHeader_ul {
  list-style: none;
  margin: 1px 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 14px;
}
.DayPicker_weekHeader_li {
  display: inline-block;
  text-align: center;
}
.DayPicker_transitionContainer {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}
.DayPicker_transitionContainer__horizontal {
  transition: height 0.2s ease-in-out;
}
.DayPicker_transitionContainer__vertical {
  width: 100%;
}
.DayPicker_transitionContainer__verticalScrollable {
  padding-top: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow-y: scroll;
}
.DateInput {
  margin: 0;
  padding: 0;
  background: #fff;
  position: relative;
  display: inline-block;
  width: 130px;
  vertical-align: middle;
}
.DateInput__small {
  width: 97px;
}
.DateInput__block {
  width: 100%;
}
.DateInput__disabled {
  background: #f2f2f2;
  color: #dbdbdb;
}
.DateInput_input {
  font-weight: 200;
  font-size: 19px;
  line-height: 24px;
  color: #484848;
  background-color: #fff;
  width: 100%;
  padding: 11px 11px 9px;
  border: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 2px solid transparent;
  border-left: 0;
  border-radius: 0;
}
.DateInput_input__small {
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 0.2px;
  padding: 7px 7px 5px;
}
.DateInput_input__regular {
  font-weight: auto;
}
.DateInput_input__readOnly {
  -webkit-user-select: none;
  user-select: none;
}
.DateInput_input__focused {
  outline: 0;
  background: #fff;
  border: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 2px solid #008489;
  border-left: 0;
}
.DateInput_input__disabled {
  background: #f2f2f2;
  font-style: italic;
}
.DateInput_screenReaderMessage {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.DateInput_fang {
  position: absolute;
  width: 20px;
  height: 10px;
  left: 22px;
  z-index: 2;
}
.DateInput_fangShape {
  fill: #fff;
}
.DateInput_fangStroke {
  stroke: #dbdbdb;
  fill: transparent;
}
.DateRangePickerInput {
  background-color: #fff;
  display: inline-block;
}
.DateRangePickerInput__disabled {
  background: #f2f2f2;
}
.DateRangePickerInput__withBorder {
  border-radius: 2px;
  border: 1px solid #dbdbdb;
}
.DateRangePickerInput__rtl {
  direction: rtl;
}
.DateRangePickerInput__block {
  display: block;
}
.DateRangePickerInput__showClearDates {
  padding-right: 30px;
}
.DateRangePickerInput_arrow {
  display: inline-block;
  vertical-align: middle;
  color: #484848;
}
.DateRangePickerInput_arrow_svg {
  vertical-align: middle;
  fill: #484848;
  height: 24px;
  width: 24px;
}
.DateRangePickerInput_clearDates {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  padding: 10px;
  margin: 0 10px 0 5px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.DateRangePickerInput_clearDates__small {
  padding: 6px;
}
.DateRangePickerInput_clearDates_default:focus,
.DateRangePickerInput_clearDates_default:hover {
  background: #dbdbdb;
  border-radius: 50%;
}
.DateRangePickerInput_clearDates__hide {
  visibility: hidden;
}
.DateRangePickerInput_clearDates_svg {
  fill: #82888a;
  height: 12px;
  width: 15px;
  vertical-align: middle;
}
.DateRangePickerInput_clearDates_svg__small {
  height: 9px;
}
.DateRangePickerInput_calendarIcon {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 0 5px 0 10px;
}
.DateRangePickerInput_calendarIcon_svg {
  fill: #82888a;
  height: 15px;
  width: 14px;
  vertical-align: middle;
}
.DateRangePicker {
  position: relative;
  display: inline-block;
}
.DateRangePicker__block {
  display: block;
}
.DateRangePicker_picker {
  z-index: 1;
  background-color: #fff;
  position: absolute;
}
.DateRangePicker_picker__rtl {
  direction: rtl;
}
.DateRangePicker_picker__directionLeft {
  left: 0;
}
.DateRangePicker_picker__directionRight {
  right: 0;
}
.DateRangePicker_picker__portal {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.DateRangePicker_picker__fullScreenPortal {
  background-color: #fff;
}
.DateRangePicker_closeButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2;
}
.DateRangePicker_closeButton:focus,
.DateRangePicker_closeButton:hover {
  color: darken(#cacccd, 10%);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.DateRangePicker_closeButton_svg {
  height: 15px;
  width: 15px;
  fill: #cacccd;
}

/**
 * Overwrites
 */

.Calendar {
  --colorBgCalendarDefault: var(--bgPopover);
  --calendarSpacing: 2px;
}

.Calendar .CalendarMonthGrid,.Calendar .DayPicker,.Calendar .CalendarMonth {
    background: var(--colorBgCalendarDefault);
  }

.Calendar .CalendarMonth_caption {
    color: var(--colorTextDefault);
  }

.Calendar .CalendarDay {
    /* react-dates subtracts 1 from the height */
    padding: var(--calendarSpacing) 0 calc(var(--calendarSpacing) - 1px);
  }

.Calendar .CalendarDay__selected,.Calendar .CalendarDay__hovered_span,.Calendar .CalendarDay__selected_span {
    color: var(--colorTextDefault);
    border: none;
    background: var(--colorBgCalendarDefault);
  }

:is(.Calendar .CalendarDay__selected,.Calendar .CalendarDay__hovered_span,.Calendar .CalendarDay__selected_span):hover {
      color: var(--colorTextDefault);
      border: none;
      background: var(--colorBgCalendarDefault);
    }

:is(.Calendar .CalendarDay__selected,.Calendar .CalendarDay__hovered_span,.Calendar .CalendarDay__selected_span) .CalendarDay__dayWrapper {
      background: var(--bgActiveMuted);
    }

:is(.Calendar .CalendarDay__selected,.Calendar .CalendarDay__hovered_span,.Calendar .CalendarDay__selected_span) .CalendarDay__dayWrapper--singleDate {
      background: none;
    }

.Calendar .CalendarDay__dayWrapper {
    display: flex;
    height: 100%;
    padding: 0 var(--calendarSpacing);
  }

.Calendar .CalendarDay__day {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    border-radius: 50%;
  }

.Calendar .CalendarDay__today .CalendarDay__day {
    border: 2px solid var(--borderDefault);
  }

.Calendar .CalendarDay__default {
    color: var(--colorTextDefault);
    border: none;
    background: var(--colorBgCalendarDefault);
  }

.CalendarDay__outside:is(.Calendar .CalendarDay__default) {
      color: var(--colorTextLight);
    }

.CalendarDay__blocked_out_of_range:is(.Calendar .CalendarDay__default) {
      color: color-mix(in srgb, var(--colorTextDefault) 20%, transparent);
    }

:is(.Calendar .CalendarDay__default):hover {
      border: none;
      background: var(--colorBgCalendarDefault);
    }

:is(.Calendar .CalendarDay__default):hover .CalendarDay__day {
      border-radius: 50%;
      background: var(--bgMenuItemHover);
    }

:is(.Calendar .CalendarDay__selected,.Calendar .CalendarDay__selected_end) .CalendarDay__day,.CalendarDay__blocked_out_of_range:is(.Calendar .CalendarDay__selected,.Calendar .CalendarDay__selected_end):hover .CalendarDay__day {
      color: var(--colorTextNeutralWhite);
      background: var(--bgActive);
    }

:is(.Calendar .CalendarDay__selected,.Calendar .CalendarDay__selected_end):hover .CalendarDay__day {
        background: color-mix(in srgb, #000 5%, var(--bgActive));
      }

:is(.Calendar .CalendarDay__hovered_span:hover,.Calendar .CalendarDay__selected_span:hover) .CalendarDay__day {
      background: color-mix(in srgb, #000 5%, var(--bgActiveMuted));
    }

:is(.Calendar .CalendarDay__selected_start) .CalendarDay__dayWrapper {
      border-top-left-radius: 50%;
      border-bottom-left-radius: 50%;
      padding-left: 0;
      margin-left: var(--calendarSpacing);
    }

:is(.Calendar .CalendarDay__selected_start) .CalendarDay__dayWrapper--startDateOnly,:is(.Calendar .CalendarDay__selected_start) .CalendarDay__dayWrapper--singleDate {
      background: none;
    }

:is(.Calendar .CalendarDay__selected_start) .CalendarDay__dayWrapper--startDateHoveredSpan {
      background: var(--bgActiveMuted);
    }

:is(.Calendar .CalendarDay__selected_end,.Calendar .CalendarDay__hovered_span:hover) .CalendarDay__dayWrapper {
      border-top-right-radius: 50%;
      border-bottom-right-radius: 50%;
      padding-right: 0;
      margin-right: var(--calendarSpacing);
    }

.Calendar .CalendarDay__blocked_out_of_range {
    color: color-mix(in srgb, var(--colorTextDefault) 20%, transparent);
  }

:is(.Calendar .CalendarDay__blocked_out_of_range):hover .CalendarDay__day {
        color: inherit;
        background: var(--colorBgCalendarDefault);
      }

.CalendarDay__selected_span:is(.Calendar .CalendarDay__blocked_out_of_range) .CalendarDay__day {
        color: inherit;
        background: var(--bgActiveMuted);
      }

.CalendarDay__selected_span:is(.Calendar .CalendarDay__blocked_out_of_range):hover .CalendarDay__day {
          color: inherit;
          background: var(--bgActiveMuted);
        }

:is(.CalendarDay__selected:is(.Calendar .CalendarDay__blocked_out_of_range),.CalendarDay__selected_end:is(.Calendar .CalendarDay__blocked_out_of_range)) .CalendarDay__day {
        color: var(--colorTextNeutralWhite);
        background: var(--bgActive);
      }

:is(.CalendarDay__selected:is(.Calendar .CalendarDay__blocked_out_of_range),.CalendarDay__selected_end:is(.Calendar .CalendarDay__blocked_out_of_range)):hover .CalendarDay__day {
          color: var(--colorTextNeutralWhite);
          background: var(--bgActive);
        }

.Calendar .CalendarMonth_caption {
    padding: 0 0 14px;
  }

.Calendar .CalendarMonth_table {
    margin-top: 25px;
  }

.Calendar .DayPicker_weekHeader {
    top: 34px;
    text-transform: uppercase;
  }

:is(.Calendar .DayPicker_weekHeader) small {
      display: block;
      color: var(--colorTextLight);
      font-size: 11px;
      font-weight: var(--fontWeightBold);
    }

.Calendar .DayPicker_transitionContainer {
    transition: none;
  }

.PillTab_pillTab_a35 {
  --pillTabLabelColor: var(--colorLinkDefault);
  --pillTabLabelHoverColor: var(--colorLinkDefault);
  --pillTabLabelActiveColor: var(--colorWhite);
  --pillTabLabelDisabledColor: var(--colorLinkDefault);

  --pillTabIconColor: var(--colorLinkDefault);
  --pillTabIconHoverColor: var(--colorLinkDefault);
  --pillTabIconActiveColor: var(--colorWhite);
  --pillTabIconDisabledColor: var(--colorLinkDefault);

  --pillTabBackgroundHoverColor: var(--bgActiveMuted);
  --pillTabBackgroundActiveColor: var(--bgActive);
}.PillTab_pillTab_a35.PillTab_tertiary_2fe {
    --pillTabLabelColor: var(--colorTextMedium);
    --pillTabLabelHoverColor: var(--colorTextDefault);
    --pillTabLabelActiveColor: var(--colorTextDefault);
    --pillTabLabelDisabledColor: var(--colorTextLight);

    --pillTabIconColor: var(--colorIconLight);
    --pillTabIconHoverColor: var(--colorIconDefault);
    --pillTabIconActiveColor: var(--colorIconDefault);
    --pillTabIconDisabledColor: var(--colorIconDefault);

    --pillTabBackgroundHoverColor: var(--bgButtonDefaultHover);
    --pillTabBackgroundActiveColor: var(--bgDefault);
  }.PillTab_pillTab_a35 {

  display: flex;
  font-size: var(--fontSizeSmall);
  line-height: var(--line);
  gap: var(--spacing-4);
  align-items: center;
  padding: var(--spacing-4) var(--spacing-8);
  border: none;
  border-radius: 12px;
  background-color: transparent;
  white-space: nowrap;
}.PillTab_pillTab_a35 .PillTab_label_d4e {
    color: var(--pillTabLabelColor);
  }.PillTab_pillTab_a35 svg {
    color: var(--pillTabIconColor);
  }.PillTab_pillTab_a35.PillTab_selected_df6 {
    background-color: var(--pillTabBackgroundActiveColor);
  }.PillTab_pillTab_a35.PillTab_selected_df6 .PillTab_label_d4e {
      color: var(--pillTabLabelActiveColor);
    }.PillTab_pillTab_a35.PillTab_selected_df6 svg {
      color: var(--pillTabIconActiveColor);
    }:is(.PillTab_pillTab_a35:not([aria-disabled='true']):hover:not(.PillTab_primary_070.PillTab_selected_df6),.PillTab_pillTab_a35:not([aria-disabled='true']):focus:not(.PillTab_selected_df6)) .PillTab_label_d4e {
        color: var(--pillTabLabelHoverColor);
      }:is(.PillTab_pillTab_a35:not([aria-disabled='true']):hover:not(.PillTab_primary_070.PillTab_selected_df6),.PillTab_pillTab_a35:not([aria-disabled='true']):focus:not(.PillTab_selected_df6)) svg {
        color: var(--pillTabIconHoverColor);
      }.PillTab_pillTab_a35:not([aria-disabled='true']):hover:not(.PillTab_primary_070.PillTab_selected_df6) {
      background-color: var(--pillTabBackgroundHoverColor);
    }.PillTab_pillTab_a35[aria-disabled='true'] {
    opacity: 0.5;
  }.PillTab_pillTab_a35[aria-disabled='true'] .PillTab_label_d4e {
      color: var(--pillTabLabelDisabledColor);
    }.PillTab_pillTab_a35[aria-disabled='true'] svg {
      color: var(--pillTabIconDisabledColor);
    }

.Breadcrumbs_breadcrumbs_847 {
  margin: 0;
  display: flex;
}

.Breadcrumbs_crumb_547 {
  display: flex;
}

.Breadcrumbs_crumb_547:not(:last-child)::after {
    content: '/';
    display: flex;
    margin: 0 10px;
    color: var(--borderDefault);
  }

.Breadcrumbs_link_974 {
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
  appearance: none;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--colorTextLight);
}

.Breadcrumbs_link_974:hover {
    color: var(--colorTextDefault);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.Breadcrumbs_link_974:focus {
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.Breadcrumbs_icon_8fa {
  margin-right: 6px;
}

.Breadcrumbs_icon_8fa svg {
    width: 14px;
  }

/*Styles for skip links*/
.modules_utils_visuallyHiddenFocusable_947 {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.modules_utils_visuallyHiddenFocusable_947:focus-visible {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    z-index: 100000;
  }

.DotSeparator_dotSeparator_ce0 {
  -webkit-user-select: none;
          user-select: none;
  display: inline-block;
  color: var(--colorIconLight);
}

/* "Login As" - Striped overlay */
html:has(body.login_as)::before {
  --login-as-stripe-color: rgba(255, 0, 0, 0.025);
  --login-as-stripe-size: 150px;

  content: '';
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: var(--zindexLoginAsOverlay);
  pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    var(--login-as-stripe-color),
    var(--login-as-stripe-color) var(--login-as-stripe-size),
    transparent var(--login-as-stripe-size),
    transparent calc(var(--login-as-stripe-size) * 2)
  );
}

/* Dark mode variant with higher opacity */
html[data-color-mode='dark']:has(body.login_as)::before {
  --login-as-stripe-color: rgba(255, 0, 0, 0.07);
}

/* Top & bottom banners */
body.login_as::before,
body.login_as::after {
  /* Using a special whitespace character between "Login" and "As" to have more "between phrase" spacing */
  content: 'Login As • Login As • Login As • Login As • Login As • Login As • Login As • Login As • Login As';
  position: fixed;
  width: 100vw;
  pointer-events: none;
  z-index: var(--zindexLoginAsOverlay);
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 5px;
  word-spacing: 30px;
  color: rgba(255, 0, 0, 0.4);
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(255, 0, 0, 0.15);
  padding: 0 15px;
}

/* Top banner */
body.login_as::before {
  top: 0;
}

/* Bottom banner */
body.login_as::after {
  bottom: 0;
}

@keyframes InlineProgressIndicator_dotBounce_495 {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
}

.InlineProgressIndicator_dots_633 {
  display: flex;
  align-items: center;
  gap: 3px;
}

.InlineProgressIndicator_dot_d84 {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation: InlineProgressIndicator_dotBounce_495 1.2s ease-in-out infinite;
}

.InlineProgressIndicator_dot_d84:nth-child(1) {
  background-color: var(--colorBrandBlue);
  animation-delay: 0s;
}

.InlineProgressIndicator_dot_d84:nth-child(2) {
  background-color: var(--colorBrandGreen);
  animation-delay: 0.2s;
}

.InlineProgressIndicator_dot_d84:nth-child(3) {
  background-color: var(--colorBrandGold);
  animation-delay: 0.4s;
}

.User_user_5f7 {
  display: flex;
  place-items: center;
  height: 55px;
  font-size: 14px;
  line-height: 20px;
  color: var(--colorTextDefault);
}

.User_user_5f7.User_inactive_2f4 {
    color: var(--colorTextLight);
  }

.User_userAvatar_43d {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Set express dims to avoid jank on image load */
  width: 48px;
  height: 100%;
}

.User_inactive_2f4 .User_userAvatar_43d {
    opacity: 50%;
  }

.User_userNameAndEmail_8dc {
  flex: 0 1 100%;
  overflow: hidden;
}

.User_userName_042 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.User_userEmail_39a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--colorTextLight);
}

.User_userEnterPrompt_124 {
  flex: 0 0 auto;
  position: relative;
  top: 2px;
  margin: 0 16px 0 12px;
  visibility: hidden;
}

.User_userHighlighted_6df .User_userEnterPrompt_124 {
    visibility: visible;
  }

.User_userTokenAvatarAndName_e93 {
  display: flex;
  gap: 4px;
}

.User_userTokenAvatar_e07 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Set express dims to avoid jank on image load */
  width: 16px;
  height: 16px;
}

.User_userTokenName_ab8 {
  flex: 0 1 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 16px;
}

.Group_group_4c4 {
  display: flex;
  place-items: center;
  height: 55px;
  font-size: 14px;
  line-height: 20px;
  color: var(--colorTextDefault);
}

.Group_group_4c4.Group_inactive_218 {
    color: var(--colorTextLight);
  }

.Group_groupAvatar_497 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Set express dims to avoid jank on image load */
  width: 48px;
  height: 100%;
}

.Group_inactive_218 .Group_groupAvatar_497 {
    opacity: 50%;
  }

.Group_groupTextContent_40e {
  display: flex;
  flex: 0 1 100%;
  justify-content: space-between;
}

.Group_groupNameAndCount_8db {
  flex: 0 1 auto;
}

.Group_groupName_b40 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Group_groupMemberCount_54e {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--colorTextLight);
}

.Group_groupEnterPrompt_80a {
  flex: 0 0 auto;
  position: relative;
  top: 2px;
  margin: 0 16px 0 12px;
  visibility: hidden;
}

.Group_groupHighlighted_835 .Group_groupEnterPrompt_80a {
    visibility: visible;
  }

.Group_groupTokenAvatarAndName_f80 {
  display: flex;
  gap: 4px;
}

.Group_groupTokenAvatar_a67 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Set express dims to avoid jank on image load */
  width: 16px;
  height: 16px;
}

.Group_groupTokenName_072 {
  flex: 0 1 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 16px;
}

.Group_groupTokenRemove_a51 {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--colorIconDefault);
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: 0.5;
}

.Group_groupTokenRemove_a51 span {
    width: 14px;
    height: 14px;
  }

:is(.Group_groupTokenRemove_a51 span) svg {
      display: block;
    }

.FilterHeader_wrapper_eda {
  align-items: center;
  display: flex;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
}

.FilterHeader_wrapper_eda.FilterHeader_noMargin_ada {
    margin-bottom: 0;
  }

.FilterHeader_search_cb2 {
  flex: 1;
}

@media screen and (min-width: 768px) {

.FilterHeader_search_cb2 {
    flex: 0;
    min-width: 278px;
}
  }

.FilterHeader_extras_dd0 {
  margin-left: auto;
}

.InlinePromo {
  --padding: 24px;
  --maxWidth: 780px;
  --illustrationWidth: 200px;

  background: var(--bgDefault);
  position: relative;
}

.InlinePromo.has-border {
    border-bottom: 1px solid var(--borderDefault);
  }

.InlinePromo.has-info-background {
    background: var(--bgInformationalMuted);
  }

.InlinePromo__content {
  display: flex;
  max-width: var(--maxWidth);
  align-items: flex-start;
}

.InlinePromo.centered .InlinePromo__content {
    margin: 0 auto;
  }

.InlinePromo__close {
  position: absolute;
  margin: calc(var(--padding) / 2) calc(var(--padding) / 2) 0 0;
  padding: calc(var(--padding) / 2);
  cursor: pointer;
  top: 0;
  right: var(--padding);
  color: var(--colorIconLight);
}

.InlinePromo__body {
  padding: var(--padding);
}

.InlinePromo__heading {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.InlinePromo__badge {
  margin-left: 12px;
}

.InlinePromo__cta {
  margin-top: 16px;
  display: grid;
  grid-template-columns: max-content max-content;
  grid-gap: var(--padding);
  align-items: center;
}

.InlinePromo__ctaSubtitle {
  margin-top: 8px;
}

.InlinePromo__illustration {
  align-self: flex-end;
  margin-right: calc(var(--padding) * 2);
  line-height: 0;
}

.InlinePromo__illustration svg {
    width: var(--illustrationWidth);
  }

/* Mobile */
@media screen and (max-width: 767px) {
  .InlinePromo__illustration {
    display: none;
  }

  .InlinePromo__title {
    font-size: 18px;
  }

  .InlinePromo__content {
    padding: var(--spacing-24) var(--spacing-16);
    display: flex;
    flex-direction: row-reverse;
  }

  .InlinePromo__body {
    padding: 0 var(--spacing-8) 0 0;
  }

  .InlinePromo__close {
    margin: 0;
    padding: 0;
    position: static;
  }
}


/*# sourceMappingURL=https://srcmaps.close.com/srcmaps/entry-9a8b795a.ff46440b33b7e7fc8cc6-b99ed093b379af540cf3dcf3a5d8cf0b.js.map*/