#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 */
}
.container .content-area-wrap .content-area {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: var(--surfaceBackgroundMedium);
  min-width: 0;
  position: relative;
}
.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);
}
.container .content-area-wrap .content-area .app-top {
  flex: 0 0 auto;
}
.container .content-area-wrap .content-area .app-top .active-call,
.container .content-area-wrap .content-area .app-top .error-message {
  /* See active-call.less for nested styles for active call bar */
  font-size: 16px;
  line-height: 37px;
  padding: 0 20px;
}
.container .content-area-wrap .content-area .app-top .error-message {
  background: var(--bgDangerMuted);
  color: var(--colorTextDanger);
  border-bottom: 1px solid var(--borderDangerMuted);
}
.container .content-area-wrap .content-area .app-top .error-message .Btn {
  margin-top: 4px;
}
.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;
}
/* For pages that don't include the full app layout, such as login, register, etc. */
.external {
  box-sizing: border-box;
  padding: 35px;
}

.page-search .list-keyboard-navigable tr.active > :first-child:before {
  width: 2px;
}
.page-search .list-leads .loader {
  margin-top: 5px;
}
.page-search .list-leads table {
  border: none;
  margin-bottom: 10px;
  table-layout: fixed;
  font-size: 13px;
}
.page-search .list-leads table td {
  cursor: pointer;
  background: var(--bgTableCellDefault);
}
.page-search .list-leads table td.lead-link {
  color: var(--colorLinkDefault);
}
.page-search .list-leads table td.numeric {
  text-align: right;
}
.page-search .list-leads table td > .users-loading {
  color: #777;
}
.page-search .list-leads table td,
.page-search .list-leads table th {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-color: var(--borderLight);
}
.page-search .list-leads table th {
  border-bottom: solid 1px var(--borderDefault);
}
.page-search .list-leads table tr:first-child td {
  border-top-width: 0;
}
.page-search .list-leads table tr td:first-child,
.page-search .list-leads table tr th:first-child {
  /* overwrite bootstrap defaults */
  border-left: none;
  border-radius: 0 !important;
}
.page-search .list-leads table th:not(.contact-buttons),
.page-search .list-leads table td:not(.contact-buttons) {
  padding-right: 16px;
  padding-left: 16px;
}
.page-search .list-leads table td:not(.contact-buttons) {
  padding-top: 6px;
  padding-bottom: 6px;
}
.page-search .list-leads table th {
  font-weight: var(--fontWeightBold);
  font-size: 14px;
  line-height: 24px;
  background-image: none;
}
.page-search .list-leads table .sortable {
  --sorting-space: 12px;
  cursor: pointer;
  /* If sorting in descending order, centerize the downwards arrow and hide the other one. */
  /* If sorting in ascending order, centerize the upwards arrow and hide the other one. */
}
.page-search .list-leads table .sortable.is-narrow .sortable-value {
  padding-right: 0;
}
.page-search .list-leads table .sortable.is-narrow .sortable-value::before,
.page-search .list-leads table .sortable.is-narrow .sortable-value::after {
  display: none;
}
.page-search .list-leads table .sortable.is-narrow:hover .sortable-value {
  /* Make space for sort arrows. */
  padding-right: var(--sorting-space);
}
.page-search .list-leads table .sortable.is-narrow:hover .sortable-value::before,
.page-search .list-leads table .sortable.is-narrow:hover .sortable-value::after {
  display: block;
}
.page-search .list-leads table .sortable.is-narrow.is-sortingAsc .sortable-value {
  /* Make space for sort arrows. */
  padding-right: var(--sorting-space);
}
.page-search .list-leads table .sortable.is-narrow.is-sortingAsc .sortable-value::after {
  display: block;
}
.page-search .list-leads table .sortable.is-narrow.is-sortingAsc .sortable-value::before {
  display: none;
}
.page-search .list-leads table .sortable.is-narrow.is-sortingDesc .sortable-value {
  /* Make space for sort arrows. */
  padding-right: var(--sorting-space);
}
.page-search .list-leads table .sortable.is-narrow.is-sortingDesc .sortable-value::after {
  display: none;
}
.page-search .list-leads table .sortable.is-narrow.is-sortingDesc .sortable-value::before {
  display: block;
}
.page-search .list-leads table .sortable.is-sortingAsc .sortable-value::before {
  display: none;
}
.page-search .list-leads table .sortable.is-sortingAsc .sortable-value::after {
  top: 10px;
}
.page-search .list-leads table .sortable.is-sortingDesc .sortable-value::before {
  top: 10px;
}
.page-search .list-leads table .sortable.is-sortingDesc .sortable-value::after {
  display: none;
}
.page-search .list-leads table .sortable.is-sortingAsc .sortable-value::before,
.page-search .list-leads table .sortable.is-sortingDesc .sortable-value::before,
.page-search .list-leads table .sortable:hover .sortable-value::before {
  border-top-color: #111;
}
.page-search .list-leads table .sortable.is-sortingAsc .sortable-value::after,
.page-search .list-leads table .sortable.is-sortingDesc .sortable-value::after,
.page-search .list-leads table .sortable:hover .sortable-value::after {
  border-bottom-color: #111;
}
.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 */
}
.page-search .list-leads table .sortable .sortable-value::before,
.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;
}
.page-search .list-leads table .sortable .sortable-value::before {
  top: 13px;
  border-top: 4px solid var(--colorIconLight);
}
.page-search .list-leads table .sortable .sortable-value::after {
  top: 7px;
  border-bottom: 4px solid var(--colorIconLight);
}

.settingsGlobalStyles .phone-settings .phone-settings-alert {
  display: none;
}
.settingsGlobalStyles .phone-settings ul.list {
  margin-left: 0px;
}
.settingsGlobalStyles .phone-settings ul.list li {
  list-style: none;
  margin-top: 10px;
}
.settingsGlobalStyles .phone-settings h4 {
  line-height: 26px;
  /* 17.5px from Bootstrap */
  width: 402px;
}
.settingsGlobalStyles .phone-settings p {
  width: 402px;
  margin-bottom: 25px;
}
.settingsGlobalStyles .phone-settings hr {
  margin-top: 30px;
  margin-bottom: 30px;
  border-top-color: rgba(0, 0, 0, 0.1);
}
.settingsGlobalStyles .phone-settings .popover {
  width: 500px;
}
.settingsGlobalStyles .phone-settings .popover p {
  width: auto;
}
.settingsGlobalStyles .phone-settings label {
  margin-top: 5px;
}
.settingsGlobalStyles .phone-settings .hangup-recording-upload {
  position: relative;
}
.settingsGlobalStyles .phone-settings .hangup-recording-upload input[type='file'] {
  height: auto;
  line-height: 1;
}
.settingsGlobalStyles .phone-settings .group-numbers-empty-state:not(:empty) {
  margin-bottom: 16px;
}
.settingsGlobalStyles .phone-settings .microcopy {
  font-size: 13px;
  color: var(--colorTextMedium);
}
.settingsGlobalStyles .phone-settings .loading {
  margin-top: 20px;
  display: none;
}
.settingsGlobalStyles .phone-settings .phone-number {
  width: 400px;
  border: solid 1px var(--borderDefault);
  border-radius: 7px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
  padding: 0;
}
.settingsGlobalStyles .phone-settings .phone-number:hover {
  box-shadow: var(--shadowLevel2);
}
.settingsGlobalStyles .phone-settings .phone-number .phoneLabelAndNumber {
  display: flex;
  gap: 6px;
  height: 20px;
  align-items: center;
}
.settingsGlobalStyles .phone-settings .phone-number .phoneLabelAndNumber .phoneLabel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  color: #303030;
  /* Heading/H5 */
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
}
.settingsGlobalStyles .phone-settings .phone-number .phoneLabelAndNumber .phoneNumber {
  color: #303030;
  /* UI / Base - Regular */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}
.settingsGlobalStyles .phone-settings .phone-number .phoneNumberSpace {
  flex-grow: 1;
}
.settingsGlobalStyles .phone-settings .phone-number .js-navigate-to-edit {
  cursor: pointer;
}
.settingsGlobalStyles .phone-settings .phone-number:hover .edit-link,
.settingsGlobalStyles .phone-settings .phone-number:hover .edit-label,
.settingsGlobalStyles .phone-settings .phone-number:hover .edit-page-icon {
  display: inline-block !important;
}
.settingsGlobalStyles .phone-settings .phone-number .header {
  height: 45px;
  border-bottom: solid 1px var(--borderDefault);
  padding: 0 16px;
  margin-bottom: 0;
  border-radius: 4px 4px 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.settingsGlobalStyles .phone-settings .phone-number .header h5 {
  display: inline;
  margin-bottom: 0;
}
.settingsGlobalStyles .phone-settings .phone-number .header .edit-label,
.settingsGlobalStyles .phone-settings .phone-number .header .edit-page-icon,
.settingsGlobalStyles .phone-settings .phone-number .header .delete-number {
  outline: 0;
  color: #bbb;
  position: relative;
  /* for each vertical icon position tweaks without affecting header height */
}
.settingsGlobalStyles .phone-settings .phone-number .header .edit-label:hover,
.settingsGlobalStyles .phone-settings .phone-number .header .edit-page-icon:hover,
.settingsGlobalStyles .phone-settings .phone-number .header .delete-number:hover {
  color: #777;
}
.settingsGlobalStyles .phone-settings .phone-number .header .delete-number-disabled {
  color: #d8d8d8;
}
.settingsGlobalStyles .phone-settings .phone-number .header .edit-label,
.settingsGlobalStyles .phone-settings .phone-number .header .edit-page-icon {
  display: none;
  margin: 0 5px;
  top: 1px;
  /* tweak icon position */
}
.settingsGlobalStyles .phone-settings .phone-number .no-config {
  font-size: 13px;
  padding: 16px;
}
.settingsGlobalStyles .phone-settings .phone-number .config {
  border-radius: 0 0 7px 7px;
  padding: 16px;
}
.settingsGlobalStyles .phone-settings .phone-number .config > div:not(:last-child) {
  margin-bottom: 12px;
}
.settingsGlobalStyles .phone-settings .phone-number .config > div,
.settingsGlobalStyles .phone-settings .phone-number .config > div h6 {
  color: #303030;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}
.settingsGlobalStyles .phone-settings .phone-number .config > div h6 {
  margin: 2px 0 0 0;
  display: inline-block;
}
.settingsGlobalStyles .phone-settings .phone-number .config > div .enable-link {
  margin-left: 3px;
}
.settingsGlobalStyles .phone-settings .phone-number .config > div .edit-link {
  display: none;
  margin-left: 5px;
  color: #bbb;
}
.settingsGlobalStyles .phone-settings .phone-number .config > div .edit-link:hover {
  color: #777;
}
.settingsGlobalStyles .phone-settings .phone-number .config > div > p {
  margin-bottom: 5px;
}
.settingsGlobalStyles .phone-settings .phone-number .config > div.group-number-members {
  display: flex;
  align-items: center;
}
.settingsGlobalStyles .phone-settings .phone-number .config > div.group-number-members .pic {
  display: inline-block;
  vertical-align: -5px;
}
.settingsGlobalStyles .phone-settings .phone-number .config > div.group-number-members .pic:first-of-type {
  margin-left: 3px;
}
.settingsGlobalStyles .phone-settings .phone-number .config > div.sms-mms-disabled-warning {
  margin-top: 3px;
}
.settingsGlobalStyles .phone-settings .phone-number .config > div.byoc-info {
  margin-top: 3px;
}
.settingsGlobalStyles .phone-settings .phone-number em {
  font-style: normal;
  font-weight: normal;
  margin-left: 5px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.settingsGlobalStyles .phone-settings .phone-number audio {
  margin: 0 10px 5px 10px;
  width: calc(100% - 20px);
}

.label-append {
  margin-left: 5px;
  font-style: normal;
  font-weight: normal;
  color: var(--colorTextMedium);
}
.no-permission-modal-header {
  border-bottom: 0;
}
.no-permission-modal-footer {
  border-top: 0;
}
.settingsGlobalStyles {
  /* TODO: use component when migrating the screen to React */
  /* adapted from http://css-tricks.com/css3-progress-bars/ */
}
.settingsGlobalStyles h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--fontWeightBold);
}
.settingsGlobalStyles h3 + p {
  color: var(--gray-50);
}
.settingsGlobalStyles .manage-organizations li {
  line-height: 30px;
}
.settingsGlobalStyles .manage-organizations .leave {
  margin: -5px 0 0 15px;
}
.settingsGlobalStyles .org-settings {
  position: relative;
}
.settingsGlobalStyles .org-settings .integration-links .table {
  width: auto;
}
.settingsGlobalStyles .org-settings .integration-links .add-button {
  margin-bottom: 10px;
}
.settingsGlobalStyles .audio-level {
  position: relative;
  margin: 6px 0;
  background: #999;
  border-radius: 12px;
  padding: 1px;
  width: 220px;
}
.settingsGlobalStyles .audio-level .meter {
  height: 12px;
  position: relative;
  background: var(--surfaceBackgroundDefault);
  border-radius: 12px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.settingsGlobalStyles .audio-level .meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.settingsGlobalStyles .audio-level .yellow > span {
  background-color: #ff3;
  background-image: linear-gradient(#ff3, #cc3);
}
.settingsGlobalStyles .audio-level .red > span {
  background-color: #ff0;
  background-image: linear-gradient(#f99, #f33);
}
.settingsGlobalStyles .audio-level .green > span {
  background-color: #6f6;
  background-image: linear-gradient(#6f6, #393);
}
.settingsGlobalStyles .audio-volume input[type='range'] {
  margin-top: -4px;
  margin-bottom: 6px;
  width: 220px;
}
.settingsGlobalStyles .audio-volume input[type='range'] input[type='range'] {
  -webkit-appearance: none !important;
  background: red;
  height: 4px;
  background-color: #ccc;
  border: 1px solid #999;
  border-radius: 12px;
}
.settingsGlobalStyles .audio-volume input[type='range'] input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  height: 16px;
  width: 16px;
  border: 1px solid #999;
  box-shadow: 0 0 3px #000;
  border-radius: 14px;
  background-color: white;
}
.settingsGlobalStyles .audio-adjust {
  display: none;
}
.settingsGlobalStyles .audio-adjust label {
  font-weight: normal;
}
.settingsGlobalStyles .audio-adjust input {
  margin-top: -4px;
}
.sortable-dragging {
  border-radius: 5px;
  border: solid 1px #ccc;
}

.opportunities-page .filters {
  display: flex;
  margin-bottom: 10px;
}
.opportunities-page .filters .filter {
  margin-right: 4px;
}
.opportunities-page .filters .filter.groupByFilter,
.opportunities-page .filters .filter.sortByFilter {
  display: inline-block;
}
.opportunities-page .filters .divider-left {
  display: inline-block;
  margin-left: 5px !important;
  padding-left: 8px;
}
.opportunities-page .filters .pull-right {
  margin-left: auto;
}
.opportunities-page .opportunities-page-filter-message {
  margin-bottom: 20px;
}
.opportunities-page .opportunities {
  --tableBorderRadius: 4px;
}
.opportunities-page .opportunities h4 {
  margin-top: 20px;
}
.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; */
}
.opportunities-page .opportunities .table-wrapper .customize-columns {
  position: absolute;
  top: 6px;
  right: 5px;
}
.opportunities-page .opportunities .table {
  border-radius: var(--tableBorderRadius);
  margin-bottom: 25px;
  table-layout: fixed;
}
.opportunities-page .opportunities .table th:nth-child(1) {
  width: 30%;
}
.opportunities-page .opportunities .table small {
  color: var(--colorTextMedium);
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opportunities-page .opportunities .table td,
.opportunities-page .opportunities .table th {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.opportunities-page .opportunities .table-bordered thead:first-child tr:first-child > th:first-child,
.opportunities-page .opportunities .table-bordered tbody:first-child tr:first-child > td:first-child,
.opportunities-page .opportunities .table-bordered tbody:first-child tr:first-child > th:first-child {
  border-top-left-radius: var(--tableBorderRadius);
}
.opportunities-page .opportunities .table-bordered thead:first-child tr:first-child > th:last-child,
.opportunities-page .opportunities .table-bordered tbody:first-child tr:first-child > td:last-child,
.opportunities-page .opportunities .table-bordered tbody:first-child tr:first-child > th:last-child {
  border-top-right-radius: var(--tableBorderRadius);
}
.opportunities-page .opportunities .progress {
  position: relative;
  border: solid 1px var(--borderDefault);
  margin: 0;
  background-image: none;
  background: var(--bgDefaultMuted);
  box-shadow: none;
}
.opportunities-page .opportunities .progress .bar {
  background: var(--bgInformational);
  box-shadow: none;
}
.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;
}
.opportunities-page .opportunities .value-boxes {
  /* clearfix copied from bootstrap */
  *zoom: 1;
  background: var(--bgInformationalMuted);
  color: var(--colorTextDefault);
  line-height: 1.4;
  border-radius: 8px;
  margin: 0 0 5px 0;
}
.opportunities-page .opportunities .value-boxes:before,
.opportunities-page .opportunities .value-boxes:after {
  display: table;
  content: '';
  line-height: 0;
}
.opportunities-page .opportunities .value-boxes:after {
  clear: both;
}
.opportunities-page .opportunities .value-boxes .value-box {
  float: left;
  min-width: 210px;
  padding: 10px;
  font-size: 1.2em;
  white-space: nowrap;
}
.opportunities-page .opportunities .value-boxes .value-box.first {
  width: 170px;
}
.opportunities-page .opportunities .value-boxes .value-box strong {
  font-weight: normal;
  font-size: 1.2em;
}
.opportunities-page .opportunities .value-boxes .value-box.first strong {
  font-size: 3.3em;
  line-height: 1;
  padding-left: 3px;
}
.opportunities-page .opportunities .value-boxes .value-box .annualized {
  border-top: 1px dotted var(--colorIconLight);
  margin-top: 5px;
}
.opportunities-page .opportunities .value-boxes.top {
  background: var(--bgDefault);
  border-radius: 8px;
}

.faux-select-wrapper {
  position: relative;
}
.faux-select-wrapper select {
  opacity: 0;
}
.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;
}
.faux-select-wrapper .faux-select:active {
  border-color: var(--borderActive);
}
.faux-select-wrapper .faux-select::before {
  content: '▾';
  float: right;
  margin-right: 5px;
  color: var(--colorIconDefault);
}
.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 */
}
.reporting .filters select {
  margin: 0;
}
.reporting .filters .filter {
  display: inline-block;
}
.reporting .box {
  margin: 10px 0 15px 0;
  vertical-align: top;
}
.reporting .box a {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #06a;
}
.reporting .box table {
  border-collapse: separate;
  border-spacing: 1px;
}
.reporting .box table td {
  font-size: 2.8em;
  color: var(--colorTextDefault);
  text-align: center;
  line-height: 100%;
}
.reporting .box table td,
.reporting .box table th {
  border-right: dotted 1px #bbb;
  vertical-align: top;
}
.reporting .box table td:last-child,
.reporting .box table th:last-child {
  border: none;
}
.reporting .box h3 > a {
  color: inherit;
}
.email-reporting .box table {
  width: 100%;
  table-layout: fixed;
}
.custom-reporting {
  /* charts */
}
.custom-reporting .highcharts-scrollbar-button,
.custom-reporting .highcharts-scrollbar-arrow {
  display: none;
}
.custom-reporting h1 {
  display: inline-block;
}
.custom-reporting .highcharts-container .highcharts-background {
  fill: transparent;
}
.custom-reporting .highcharts-container .highcharts-grid path {
  stroke: var(--colorTextLight);
  stroke-dasharray: 1, 2;
}
.custom-reporting .highcharts-container .highcharts-series path {
  opacity: 0.6;
}
.custom-reporting .highcharts-container .highcharts-series rect {
  stroke-width: 0;
}
.custom-reporting .highcharts-container .highcharts-axis text {
  font-size: 13px;
}
.custom-reporting .highcharts-container .highcharts-axis-title,
.custom-reporting .highcharts-container .highcharts-legend-navigation,
.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;
}
.custom-reporting .highcharts-container .highcharts-axis-labels text {
  /** highcharts styles this with inline styles 🫠 */
  color: var(--colorTextMedium) !important;
  fill: var(--colorTextMedium) !important;
}
.custom-reporting .highcharts-container .highcharts-legend-item text,
.custom-reporting .highcharts-container .highcharts-drilldown-axis-label,
.custom-reporting .highcharts-container .highcharts-drilldown-axis-label span,
.custom-reporting .highcharts-container path.highcharts-legend-nav-active,
.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;
}
.custom-reporting .highcharts-container .highcharts-legend-item text:hover,
.custom-reporting .highcharts-container .highcharts-drilldown-axis-label:hover,
.custom-reporting .highcharts-container .highcharts-drilldown-axis-label span:hover,
.custom-reporting .highcharts-container path.highcharts-legend-nav-active:hover,
.custom-reporting .highcharts-container .highcharts-breadcrumbs-button.highcharts-button-normal text:hover {
  color: var(--colorLinkHover) !important;
  fill: var(--colorLinkHover) !important;
}
.custom-reporting .highcharts-container .highcharts-markers path {
  stroke: var(--colorGray02);
  stroke-width: 1px;
}
.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;
}
.custom-reporting .form form {
  margin: 0;
}
.custom-reporting .form form ul {
  margin: 0;
  list-style-type: none;
}
.custom-reporting .form .big-field {
  width: 33.3%;
  margin: 0;
  float: left;
  box-sizing: border-box;
  padding-left: 19px;
}
.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;
}
.custom-reporting .form .big-field .form-field {
  overflow: hidden;
  position: relative;
}
.custom-reporting .form .big-field .form-field select {
  height: 50px;
  width: 100%;
  margin-bottom: 3px;
}
.custom-reporting .form .big-field .form-field .faux-select-wrapper .faux-select {
  width: 100% !important;
}
.custom-reporting .form .big-field .form-field > .faux-select-wrapper .faux-select {
  font-size: 18px !important;
}
.custom-reporting .form .big-field .form-field select {
  opacity: 0;
}
.custom-reporting .form .big-field .form-field select[name='filter'],
.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);
}
.custom-reporting .form .big-field .form-field .small-field {
  position: relative;
  padding-left: 20px;
}
.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;
}
.custom-reporting .form .big-field.field-y {
  padding-left: 0;
}
.custom-reporting .secondary-params {
  float: right;
  clear: left;
}
.custom-reporting .secondary-params select,
.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;
}
.custom-reporting .secondary-params .field {
  float: right;
  margin-right: 5px;
}
.custom-reporting .secondary-params .field.field-transform_y {
  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;
}
.custom-reporting .chart-border .secondary-params {
  margin: 1px;
}
.custom-reporting .chart-border .chart,
.custom-reporting .chart-border .chart-big-msg {
  clear: both;
  padding: 10px 10px 0 10px;
  height: 400px;
}
.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: #ededed;
  text-align: center;
  height: 400px;
  line-height: 370px;
}
.custom-reporting .chart-border .chart-big-msg div {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.custom-reporting .chart-border .chart-big-msg p {
  line-height: 1;
  font-size: 13px;
  color: #999;
  margin-top: 25px;
}
.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;
}
.custom-reporting .summary .summary-metric {
  font-size: 40px;
  color: #555;
}
.custom-reporting .table {
  margin-top: 15px;
  width: auto;
  min-width: 300px;
}
.custom-reporting .table th,
.custom-reporting .table td {
  font-weight: normal;
  color: var(--colorTextDefault);
  font-size: 18px;
  line-height: 15px;
  padding-right: 30px;
}
.custom-reporting .table th.metric,
.custom-reporting .table td.metric {
  text-align: right;
  padding-right: 8px;
  padding-left: 30px;
}
.custom-reporting .table th.metric .transform,
.custom-reporting .table td.metric .transform {
  display: block;
  color: var(--colorTextMedium);
  font-size: 12px;
  line-height: 14px;
}
.custom-reporting .table th.textcenter,
.custom-reporting .table td.textcenter {
  text-align: center;
  padding-right: 8px;
}
.custom-reporting .table tr.aggregate td,
.custom-reporting .table tr.aggregate th {
  font-size: 22px;
  line-height: 24px;
}
.custom-reporting .table tr.aggregate td.metric,
.custom-reporting .table tr.aggregate th.metric {
  font-size: 24px;
}
.custom-reporting .table td {
  background: var(--surfaceBackgroundDefault);
}
.custom-reporting .table th {
  line-height: 30px;
}
/* Sortable table styles */
.by-status th.sortable {
  cursor: pointer;
  position: relative;
}
.by-status th.sortable:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.by-status th .sort-icon {
  float: right;
  margin-left: 5px;
  font-family: 'Arial';
  /* Handles good look of the icon */
}
.by-status th .sort-icon.asc {
  transform: rotate(180deg);
}

.inbox-page {
  --inboxHeaderPlusPaddings: 81px;
  display: flex;
  min-height: 100%;
  /* 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. */
  /* Reuse the same div/elements for the big initial loader (&.big-msg) */
  /* and the infinity scroll loader, and style them differently. */
  /* Char counter used in the inbox (replying to SMS) */
}
@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 */
}
.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));
  }
  .inbox-page .inbox-scroller.shrink {
    max-height: calc(100% - calc(var(--inboxHeaderPlusPaddings) + var(--spacing-48)));
  }
}
.inbox-page .inbox-list .item {
  overflow: hidden;
  border-bottom: 1px solid var(--borderDefault);
  cursor: pointer;
}
.inbox-page .inbox-list .item:has(> .expanded) {
  display: block;
  padding: var(--spacing-16);
  background: var(--surfaceBackgroundMedium);
  overflow: initial;
  cursor: initial;
}
.inbox-page .inbox-list .item:has(> .expanded) .loader {
  padding: var(--spacing-8);
}
.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;
}
.inbox-page .big-msg h3 {
  margin: 0;
}
.inbox-page .big-msg p {
  color: var(--colorTextLight);
  margin: 0;
}
.inbox-page .results-loader {
  margin: var(--spacing-12) var(--spacing-16);
}
.inbox-page .results-loader.big-msg {
  margin: 0;
}
.inbox-page .results-loader.big-msg .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;
}
.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: '';
}
.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;
}
@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.inbox-page .item-type-incoming_sms .char-counter {
  color: var(--colorTextLight);
  margin-left: 10px;
  line-height: 20px;
  vertical-align: -1px;
  display: inline-block;
}
.inbox-page .item-type-incoming_sms .char-counter.exceeded {
  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;
}

.bulk-upload .lead-importer-stepper-standalone {
  margin: -20px -20px 20px -20px;
  /* remove top, left, right margins so it's "conntected" to the UI */
}
.bulk-upload p.error {
  font-weight: var(--fontWeightBold);
}
.bulk-upload .pull-left {
  max-width: 25%;
}
.bulk-upload .pull-left.first {
  max-width: 65%;
  margin-right: 7%;
}
.bulk-upload .form-and-info .form label[for='attachment'] {
  display: none;
}
.bulk-upload .form-and-info .form li.field-attachment {
  margin-bottom: 16px;
}
.bulk-upload .form-and-info .form form {
  margin-bottom: 0;
}
.bulk-upload .form-and-info .form textarea {
  width: 360px;
  height: 80px;
}
.bulk-upload .form-and-info .pull-left {
  width: 40%;
  max-width: 600px;
}
.bulk-upload .form-and-info .tips {
  margin-top: 20px;
}
.bulk-upload .support-note {
  clear: both;
}
.bulk-upload h3 {
  font-weight: var(--fontWeightBold);
  border-bottom: dotted 1px #bbb;
  line-height: 24px;
}
.bulk-upload input[type='file'] {
  margin-top: 15px;
}
.bulk-upload .loading {
  margin-top: 20px;
  display: none;
}
.bulk-upload .analyzed {
  display: none;
}
.bulk-upload .lead-data {
  display: none;
}
.bulk-upload .lead-data li {
  display: none;
}
.bulk-upload .cols-description li {
  list-style-type: circle;
}
.bulk-upload .not-recognized {
  color: darkred;
}
.bulk-upload .table-horizontally-striped thead th:nth-child(odd),
.bulk-upload .table-horizontally-striped tbody th:nth-child(odd),
.bulk-upload .table-horizontally-striped thead td:nth-child(odd),
.bulk-upload .table-horizontally-striped tbody td:nth-child(odd) {
  background-color: var(--surfaceBackgroundMedium);
}
.bulk-upload .import-preview-container {
  overflow: auto;
  margin-bottom: 16px;
}
.bulk-upload .import-preview-container::-webkit-scrollbar {
  -webkit-appearance: active;
}
.bulk-upload .import-preview-container::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
}
.bulk-upload .import-preview-container::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.5);
}
.bulk-upload .import-preview-container::-webkit-scrollbar-thumb:hover,
.bulk-upload .import-preview-container::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.6);
}
.bulk-upload .import-preview-container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 1px 1px 0 #eee, inset 0 5px 11px white;
}
.bulk-upload table.import-preview {
  margin-bottom: 4px;
  width: auto;
  max-width: none;
}
.bulk-upload table.import-preview .header-wrapper {
  min-width: 150px;
  white-space: nowrap;
  /* weird */
}
.bulk-upload table.import-preview .header-wrapper p {
  font-weight: normal;
}
.bulk-upload table.import-preview .header-wrapper span.selector-title {
  font-weight: var(--fontWeightBold);
}
.bulk-upload table.import-preview .header-wrapper label.checkbox {
  padding-right: 8px;
}
.bulk-upload table.import-preview th {
  background-color: #dff0d8;
}
.bulk-upload table.import-preview th:nth-child(odd) {
  background-color: #dff0d8;
}
.bulk-upload table.import-preview td.error {
  font-weight: var(--fontWeightBold);
  background-color: #ffeeee;
}
.bulk-upload table.import-preview th.warning {
  background-color: #f2dede;
}
.bulk-upload table.import-preview th.warning select {
  border: 1px solid #f66;
}
.bulk-upload table.import-preview th:nth-child(odd).warning {
  background-color: #f2dede;
}
.bulk-upload table.import-preview th:nth-child(odd).warning select {
  border: 1px solid #f66;
}
.bulk-upload table.import-preview .skip {
  color: #999;
  background-color: var(--surfaceBackgroundMedium);
}
.bulk-upload table.import-preview .skip:nth-child(odd) {
  background-color: #f3f3f3;
}
.bulk-upload .extra-info {
  width: 375px;
  float: right;
}
.bulk-upload .dupe-warning {
  font-weight: var(--fontWeightBold);
  color: darkred;
}
.bulk-upload .table-wrapper {
  max-height: 294px;
  overflow-y: auto;
  padding-right: 15px;
}
.bulk-upload .table-wrapper .table td {
  text-align: center;
}
.bulk-upload .table-wrapper .table td:first-child {
  text-align: left;
}
.bulk-upload .table-wrapper .table td.success {
  color: darkgreen;
}
.bulk-upload .table-wrapper .table td.fail {
  color: darkred;
}
/*
@media (max-width: 1200px) {
  .bulk-upload .extra-info {
    float: left;
    margin: 10px 0 0;
    min-width: 600px;
  }
}
*/

:fullscreen {
  /* override stuff from scaffolding.less */
}
:fullscreen .hide-in-full-screen {
  display: none;
}
:fullscreen .container .content-area-wrap {
  top: 0;
}
:fullscreen .container .content-area-wrap .content-area {
  left: 0;
}

.drag-to-sort-container {
  position: relative;
}
.drag-to-sort-container .drag-to-sort-handle-wrapper {
  position: absolute;
  opacity: 0;
  left: -21px;
  padding-right: 5px;
  cursor: move;
  height: 30px;
}
.drag-to-sort-container .drag-to-sort-handle-wrapper .drag-to-sort-handle {
  cursor: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  padding: 5px;
  margin-top: 5px;
  font-size: 8px;
  vertical-align: middle;
  outline: none;
  border-radius: 50%;
  background: white;
  border: solid 1px #eaeaea;
  color: #808080;
}
.drag-to-sort-container .drag-to-sort-handle-wrapper.sorting {
  opacity: 0 !important;
}
.drag-to-sort-container:only-child .drag-to-sort-handle-wrapper {
  display: none;
}
.drag-to-sort-container.hover .drag-to-sort-handle-wrapper,
.drag-to-sort-container.sortable-chosen .drag-to-sort-handle-wrapper {
  opacity: 1;
}
.drag-to-sort-container.sortable-ghost {
  opacity: var(--disabledOpacity);
}

/**
 * Setup a --fillDataVisCategorical semantic token that
 * always uses the first color, but will use other colors
 * if within an element with a data-vis-categorical attribute.
 */
:root {
  --fillDataVisCategorical: var(--fillDataVisCategorical1);
}
:root [data-vis-categorical='1'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical1);
}
:root [data-vis-categorical='2'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical2);
}
:root [data-vis-categorical='3'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical3);
}
:root [data-vis-categorical='4'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical4);
}
:root [data-vis-categorical='5'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical5);
}
:root [data-vis-categorical='6'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical6);
}
:root [data-vis-categorical='7'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical7);
}
:root [data-vis-categorical='8'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical8);
}
:root [data-vis-categorical='9'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical9);
}
:root [data-vis-categorical='10'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical10);
}
:root [data-vis-categorical='11'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical11);
}
:root [data-vis-categorical='12'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical12);
}
:root [data-vis-categorical='13'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical13);
}
:root [data-vis-categorical='14'] {
  --fillDataVisCategorical: var(--fillDataVisCategorical14);
}

@media screen and (max-width: 767px) {
  .list-view > .page-search {
    max-width: 100vw;
    margin: 0;
    position: relative;
    box-sizing: border-box;
  }
  .list-view > .page-search .loader {
    margin: 15px 0 0 15px;
  }
  .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;
  }
  .list-view > .page-search .list-leads .table {
    min-width: 100%;
    width: auto;
    border-radius: 0;
    border: 0;
    margin: 0;
  }
  .list-view > .page-search .list-leads .table th,
  .list-view > .page-search .list-leads .table td {
    border-radius: 0;
  }
  .list-view > .page-search .list-leads .table th:first-child,
  .list-view > .page-search .list-leads .table td:first-child {
    border-left: 0;
  }
  .list-view > .page-search .btn-dialer {
    display: none;
  }
  .list-view > .page-search .row,
  .list-view > .page-search .search-main {
    margin: 0;
  }
  .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 .inbox-list .item {
    border-left: none;
    border-right: none;
  }
  .inbox-page .inbox-list .item:last-child {
    border-radius: 0;
  }
  .inbox-page .inbox-list .item:has(> .expanded) {
    padding: var(--spacing-12) 0;
  }
  .inbox-page .inbox-list .item.active > :first-child:before {
    content: none;
  }
  .inbox-page .inbox-list .item.checked:not(.expanded) {
    border-bottom-color: var(--borderActiveMuted);
  }
  .inbox-page .inbox-list .item.checked:not(.expanded) > div {
    background-color: var(--bgActiveMuted);
  }
  .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;
    /* All of the pages below aren't responsive and hence need a min-width. */
  }
  body .container .content-area-wrap .content-area {
    margin-left: -100vw;
    overflow-x: auto;
  }
  body .container .content-area-wrap .content-area .app-content {
    padding: 0;
    max-width: 100vw;
  }
  body .container .opportunities-page,
  body .container .reporting,
  body .container .audit-log,
  body .container .DialerCallingMultipleLeadsScreenWrapper {
    margin: 0;
    padding: 20px;
    min-width: 960px;
    box-sizing: border-box;
  }
  body .container .DialerCallingMultipleLeadsScreenWrapper {
    padding: 0;
  }
  body .container .settingsGlobalStyles {
    min-width: 720px;
  }
}

/*!
 * 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 {
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  nav,
  section {
    display: block;
  }
  audio,
  canvas,
  video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
  }
  audio:not([controls]) {
    display: none;
  }
  html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  a:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }
  a:hover,
  a:active {
    outline: 0;
  }
  sub,
  sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
  }
  sup {
    top: -0.5em;
  }
  sub {
    bottom: -0.25em;
  }
  img {
    /* Responsive images (ensure images don't scale beyond their parents) */
    max-width: 100%;
    /* Part 1: Set a maximum relative to the parent */
    width: auto\9;
    /* IE7-8 need help adjusting responsive images */
    height: auto;
    /* Part 2: Scale the height according to the width, otherwise you get stretching */
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
  }
  #map_canvas img,
  .google-maps img {
    max-width: none;
  }
  button,
  input,
  select,
  textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: middle;
  }
  button,
  input {
    *overflow: visible;
    line-height: normal;
  }
  button::-moz-focus-inner,
  input::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
  button,
  html input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
  }
  label,
  select,
  button,
  input[type='button'],
  input[type='reset'],
  input[type='submit'],
  input[type='radio'],
  input[type='checkbox'] {
    cursor: pointer;
  }
  input[type='search'] {
    box-sizing: content-box;
    -webkit-appearance: textfield;
  }
  input[type='search']::-webkit-search-decoration,
  input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }
  textarea {
    overflow: auto;
    vertical-align: top;
  }
  @media print {
    * {
      text-shadow: none !important;
      color: #000 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    a,
    a:visited {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }
    a[href]:after {
      content: ' (' attr(href) ')';
    }
    abbr[title]:after {
      content: ' (' attr(title) ')';
    }
    .ir a:after,
    a[href^='javascript:']:after,
    a[href^='#']:after {
      content: '';
    }
    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;
    }
  }
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 32px;
  box-sizing: border-box;
}
@layer base {
  body {
    margin: 0;
    font-family: -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--colorTextDefault);
    background-color: var(--surfaceBackgroundMedium);
  }
  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;
  }
  .img-rounded {
    border-radius: 6px;
  }
  .img-polaroid {
    padding: 4px;
    background-color: var(--surfaceBackgroundDefault);
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  .img-circle {
    border-radius: 500px;
  }
}
@layer base {
  p {
    margin: 0 0 10px;
  }
  .lead {
    margin-bottom: 20px;
    font-size: 21px;
    font-weight: 200;
    line-height: 30px;
  }
  small {
    font-size: 85%;
  }
  strong {
    font-weight: var(--fontWeightBold);
  }
  em {
    font-style: italic;
  }
  cite {
    font-style: normal;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 10px 0;
    font-family: inherit;
    font-weight: bold;
    line-height: 20px;
    color: inherit;
    text-rendering: optimizelegibility;
  }
  h1 small,
  h2 small,
  h3 small,
  h4 small,
  h5 small,
  h6 small {
    font-weight: normal;
    line-height: 1;
    color: var(--iconLight);
  }
  h1,
  h2,
  h3 {
    line-height: 40px;
  }
  h1 {
    font-size: 38.5px;
  }
  h2 {
    font-size: 31.5px;
  }
  h3 {
    font-size: 24.5px;
  }
  h4 {
    font-size: 17.5px;
  }
  h5 {
    font-size: 14px;
  }
  h6 {
    font-size: 11.9px;
  }
  h1 small {
    font-size: 24.5px;
  }
  h2 small {
    font-size: 17.5px;
  }
  h3 small {
    font-size: 14px;
  }
  h4 small {
    font-size: 14px;
  }
  ul,
  ol {
    padding: 0;
    margin: 0 0 10px 25px;
  }
  ul ul,
  ul ol,
  ol ol,
  ol ul {
    margin-bottom: 0;
  }
  li {
    line-height: 20px;
  }
  ul.unstyled,
  ol.unstyled {
    margin-left: 0;
    list-style: none;
  }
  ul.inline,
  ol.inline {
    margin-left: 0;
    list-style: none;
  }
  ul.inline > li,
  ol.inline > li {
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    padding-left: 5px;
    padding-right: 5px;
  }
  dl {
    margin-bottom: 20px;
  }
  dt,
  dd {
    line-height: 20px;
  }
  dt {
    font-weight: var(--fontWeightBold);
  }
  dd {
    margin-left: 10px;
  }
  .dl-horizontal {
    *zoom: 1;
  }
  .dl-horizontal:before,
  .dl-horizontal:after {
    display: table;
    content: '';
    line-height: 0;
  }
  .dl-horizontal:after {
    clear: both;
  }
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
  hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--borderDefault);
    border-bottom: 1px solid var(--surfaceBackgroundDefault);
  }
  abbr[title],
  abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted var(--borderDefault);
  }
  abbr.initialism {
    font-size: 90%;
    text-transform: uppercase;
  }
  blockquote {
    padding: 0 0 0 15px;
    margin: 0 0 20px;
    border-left: 5px solid var(--borderDefault);
  }
  blockquote p {
    margin-bottom: 0;
    font-size: 17.5px;
    font-weight: 300;
    line-height: 1.25;
  }
  q:before,
  q:after,
  blockquote:before,
  blockquote:after {
    content: '';
  }
  address {
    display: block;
    margin-bottom: 20px;
    font-style: normal;
    line-height: 20px;
  }
}
@layer base {
  form {
    margin: 0 0 20px;
  }
  fieldset {
    padding: 0;
    margin: 0;
    border: 0;
  }
  label,
  input,
  button,
  select,
  textarea {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
  }
  input,
  button,
  select,
  textarea {
    font-family: -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  }
  label {
    display: block;
    margin-bottom: 5px;
  }
  select,
  textarea,
  .GlobalInput {
    display: inline-block;
    height: 20px;
    padding: 4px 6px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--colorTextMedium);
    border-radius: 7px;
    vertical-align: middle;
  }
  input,
  textarea {
    width: 206px;
  }
  textarea {
    height: auto;
  }
  textarea,
  .GlobalInput {
    background-color: var(--surfaceBackgroundDefault);
    border: 1px solid var(--borderDefault);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border linear .2s, box-shadow linear .2s;
  }
  textarea:focus,
  .GlobalInput:focus {
    border-color: var(--borderFocused);
    outline: 0;
    outline: thin dotted \9;
    /* IE6-9 */
  }
  input[type='radio'],
  input[type='checkbox'] {
    margin: 4px 0 0;
    *margin-top: 0;
    /* IE7 */
    margin-top: 1px \9;
    /* IE8-9 */
    line-height: normal;
  }
  input[type='file'],
  input[type='image'],
  input[type='submit'],
  input[type='reset'],
  input[type='button'],
  input[type='radio'],
  input[type='checkbox'] {
    width: auto;
  }
  select,
  input[type='file'] {
    height: 32px;
    /* In IE7, the height of the select element cannot be changed by height, only font-size */
    *margin-top: 4px;
    /* For IE7, add top margin to align select with labels */
    line-height: 32px;
  }
  select {
    width: 220px;
    border: 1px solid var(--borderDefault);
    background-color: var(--surfaceBackgroundDefault);
  }
  select[multiple],
  select[size] {
    height: auto;
  }
  select:focus,
  input[type='file']:focus,
  input[type='radio']:focus,
  input[type='checkbox']:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }
  input::placeholder,
  textarea::placeholder {
    color: var(--colorTextLight);
  }
  .radio,
  .checkbox {
    min-height: 20px;
    padding-left: 20px;
  }
  .radio input[type='radio'],
  .checkbox input[type='checkbox'] {
    float: left;
    margin-left: -20px;
  }
  .controls > .radio:first-child,
  .controls > .checkbox:first-child {
    padding-top: 5px;
  }
  .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;
  }
  .input-mini {
    width: 60px;
  }
  .input-small {
    width: 90px;
  }
  .input-medium {
    width: 150px;
  }
  .input-large {
    width: 210px;
  }
  .input-xlarge {
    width: 270px;
  }
  .input-xxlarge {
    width: 530px;
  }
  input[class*="span"],
  select[class*="span"],
  textarea[class*="span"],
  .row-fluid input[class*="span"],
  .row-fluid select[class*="span"],
  .row-fluid textarea[class*="span"] {
    float: none;
    margin-left: 0;
  }
  .row-fluid input[class*='span'],
  .row-fluid select[class*='span'],
  .row-fluid textarea[class*='span'] {
    display: inline-block;
  }
  input,
  textarea {
    margin-left: 0;
  }
  .controls-row [class*='span'] + [class*='span'] {
    margin-left: 20px;
  }
  input.span12,
  textarea.span12 {
    width: 926px;
  }
  input.span11,
  textarea.span11 {
    width: 846px;
  }
  input.span10,
  textarea.span10 {
    width: 766px;
  }
  input.span9,
  textarea.span9 {
    width: 686px;
  }
  input.span8,
  textarea.span8 {
    width: 606px;
  }
  input.span7,
  textarea.span7 {
    width: 526px;
  }
  input.span6,
  textarea.span6 {
    width: 446px;
  }
  input.span5,
  textarea.span5 {
    width: 366px;
  }
  input.span4,
  textarea.span4 {
    width: 286px;
  }
  input.span3,
  textarea.span3 {
    width: 206px;
  }
  input.span2,
  textarea.span2 {
    width: 126px;
  }
  input.span1,
  textarea.span1 {
    width: 46px;
  }
  .controls-row {
    *zoom: 1;
  }
  .controls-row:before,
  .controls-row:after {
    display: table;
    content: '';
    line-height: 0;
  }
  .controls-row:after {
    clear: both;
  }
  .controls-row [class*="span"],
  .row-fluid .controls-row [class*="span"] {
    float: left;
  }
  .controls-row .checkbox[class*='span'],
  .controls-row .radio[class*='span'] {
    padding-top: 5px;
  }
  input[disabled],
  select[disabled],
  textarea[disabled],
  input[readonly],
  select[readonly],
  textarea[readonly] {
    cursor: not-allowed;
    background-color: var(--formBackgroundDisabled);
  }
  input[type='radio'][disabled],
  input[type='checkbox'][disabled],
  input[type='radio'][readonly],
  input[type='checkbox'][readonly] {
    background-color: transparent;
  }
  .control-group.warning .control-label,
  .control-group.warning .help-block,
  .control-group.warning .help-inline {
    color: #c09853;
  }
  .control-group.warning .checkbox,
  .control-group.warning .radio,
  .control-group.warning input,
  .control-group.warning select,
  .control-group.warning textarea {
    color: #c09853;
  }
  .control-group.warning input,
  .control-group.warning select,
  .control-group.warning textarea {
    border-color: #c09853;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  }
  .control-group.warning input:focus,
  .control-group.warning select:focus,
  .control-group.warning textarea:focus {
    border-color: #a47e3c;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
  }
  .control-group.error .control-label,
  .control-group.error .help-block,
  .control-group.error .help-inline {
    color: #b94a48;
  }
  .control-group.error .checkbox,
  .control-group.error .radio,
  .control-group.error input,
  .control-group.error select,
  .control-group.error textarea {
    color: #b94a48;
  }
  .control-group.error input,
  .control-group.error select,
  .control-group.error textarea {
    border-color: #b94a48;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  }
  .control-group.error input:focus,
  .control-group.error select:focus,
  .control-group.error textarea:focus {
    border-color: #953b39;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
  }
  .control-group.success .control-label,
  .control-group.success .help-block,
  .control-group.success .help-inline {
    color: #468847;
  }
  .control-group.success .checkbox,
  .control-group.success .radio,
  .control-group.success input,
  .control-group.success select,
  .control-group.success textarea {
    color: #468847;
  }
  .control-group.success input,
  .control-group.success select,
  .control-group.success textarea {
    border-color: #468847;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  }
  .control-group.success input:focus,
  .control-group.success select:focus,
  .control-group.success textarea:focus {
    border-color: #356635;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
  }
  .control-group.info .control-label,
  .control-group.info .help-block,
  .control-group.info .help-inline {
    color: #3a87ad;
  }
  .control-group.info .checkbox,
  .control-group.info .radio,
  .control-group.info input,
  .control-group.info select,
  .control-group.info textarea {
    color: #3a87ad;
  }
  .control-group.info input,
  .control-group.info select,
  .control-group.info textarea {
    border-color: #3a87ad;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  }
  .control-group.info input:focus,
  .control-group.info select:focus,
  .control-group.info textarea:focus {
    border-color: #2d6987;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
  }
  .GlobalInput:focus:invalid,
  textarea:focus:invalid,
  select:focus:invalid {
    color: #b94a48;
    border-color: #ee5f5b;
  }
  .GlobalInput:focus:invalid:focus,
  textarea:focus:invalid:focus,
  select:focus:invalid:focus {
    border-color: #e9322d;
    box-shadow: 0 0 6px #f8b9b7;
  }
  .form-actions {
    padding: 19px 20px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-top: 1px solid #e5e5e5;
    *zoom: 1;
  }
  .form-actions:before,
  .form-actions:after {
    display: table;
    content: '';
    line-height: 0;
  }
  .form-actions:after {
    clear: both;
  }
  .help-block,
  .help-inline {
    color: #455367;
  }
  .help-block {
    display: block;
    margin-bottom: 10px;
  }
  .help-inline {
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    vertical-align: middle;
    padding-left: 5px;
  }
  input.search-query {
    padding-right: 14px;
    padding-right: 4px \9;
    padding-left: 14px;
    padding-left: 4px \9;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    border-radius: 15px;
  }
  .form-search input,
  .form-inline input,
  .form-horizontal input,
  .form-search textarea,
  .form-inline textarea,
  .form-horizontal textarea,
  .form-search select,
  .form-inline select,
  .form-horizontal select,
  .form-search .help-inline,
  .form-inline .help-inline,
  .form-horizontal .help-inline {
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-search .hide,
  .form-inline .hide,
  .form-horizontal .hide {
    display: none;
  }
  .form-search label,
  .form-inline label,
  .form-search .btn-group,
  .form-inline .btn-group {
    display: inline-block;
  }
  .form-search .radio,
  .form-search .checkbox,
  .form-inline .radio,
  .form-inline .checkbox {
    padding-left: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-search .radio input[type='radio'],
  .form-search .checkbox input[type='checkbox'],
  .form-inline .radio input[type='radio'],
  .form-inline .checkbox input[type='checkbox'] {
    float: left;
    margin-right: 3px;
    margin-left: 0;
  }
  .control-group {
    margin-bottom: 10px;
  }
  legend + .control-group {
    margin-top: 20px;
    -webkit-margin-top-collapse: separate;
  }
  .form-horizontal .control-group {
    margin-bottom: 20px;
    *zoom: 1;
  }
  .form-horizontal .control-group:before,
  .form-horizontal .control-group:after {
    display: table;
    content: '';
    line-height: 0;
  }
  .form-horizontal .control-group:after {
    clear: both;
  }
  .form-horizontal .control-label {
    float: left;
    width: 160px;
    padding-top: 5px;
    text-align: right;
  }
  .form-horizontal .controls {
    *display: inline-block;
    *padding-left: 20px;
    margin-left: 180px;
    *margin-left: 0;
  }
  .form-horizontal .controls:first-child {
    *padding-left: 180px;
  }
  .form-horizontal .help-block {
    margin-bottom: 0;
  }
  .form-horizontal input + .help-block,
  .form-horizontal select + .help-block,
  .form-horizontal textarea + .help-block {
    margin-top: 10px;
  }
  .form-horizontal .form-actions {
    padding-left: 180px;
  }
}
@layer base {
  .table {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
  }
  .table th,
  .table td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--borderDefault);
  }
  .table th {
    font-weight: var(--fontWeightBold);
  }
  .table thead th {
    vertical-align: bottom;
  }
  .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;
  }
  .table-bordered {
    border: 1px solid var(--borderDefault);
    border-collapse: separate;
    border-spacing: 0;
    border-left: 0;
    border-radius: 3px;
  }
  .table-bordered th,
  .table-bordered td {
    border-left: 1px solid var(--borderDefault);
  }
  .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;
  }
  .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: 3px;
  }
  .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: 3px;
  }
  .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: 3px;
  }
  .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: 3px;
  }
  .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;
  }
  .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: 3px;
  }
  .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: 3px;
  }
  .table-hover tbody tr:hover > td,
  .table-hover tbody tr:hover > th {
    background-color: #fafbfb;
  }
}
.dropup,
.dropdown {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: var(--surfaceBackgroundDefault);
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}
.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
.collapse.in {
  height: auto;
}
.close {
  float: right;
  font-size: 20px;
  font-weight: var(--fontWeightBold);
  line-height: 20px;
  color: var(--colorTextDefault);
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
.close:hover,
.close:focus {
  color: var(--colorTextDefault);
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  filter: alpha(opacity=40);
}
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.progress {
  overflow: hidden;
  height: 20px;
  margin-bottom: 20px;
  background-color: #f7f7f7;
  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.progress .bar {
  width: 0%;
  height: 100%;
  color: var(--surfaceBackgroundDefault);
  float: left;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #0e90d2;
  background-image: linear-gradient(to bottom, #149bdf, #0480be);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  transition: width 0.6s ease;
}
.progress .bar + .bar {
  box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);
}
.progress-striped .bar {
  background-color: #149bdf;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}
.progress.active .bar {
  animation: progress-bar-stripes 2s linear infinite;
}
.progress-danger .bar,
.progress .bar-danger {
  background-color: #dd514c;
  background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
}
.progress-danger.progress-striped .bar,
.progress-striped .bar-danger {
  background-color: #ee5f5b;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-success .bar,
.progress .bar-success {
  background-color: #5eb95e;
  background-image: linear-gradient(to bottom, #62c462, #57a957);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);
}
.progress-success.progress-striped .bar,
.progress-striped .bar-success {
  background-color: #62c462;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-info .bar,
.progress .bar-info {
  background-color: #4bb1cf;
  background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);
}
.progress-info.progress-striped .bar,
.progress-striped .bar-info {
  background-color: #5bc0de;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-warning .bar,
.progress .bar-warning {
  background-color: #faa732;
  background-image: linear-gradient(to bottom, #fbb450, #f89406);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
}
.progress-warning.progress-striped .bar,
.progress-striped .bar-warning {
  background-color: #fbb450;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.hide {
  display: none;
}
.show {
  display: block;
}
.invisible {
  visibility: hidden;
}
.affix {
  position: fixed;
}
/* Override Bootstrap variables – keep in sync with globals.css */
@media print {
  a[href]:after {
    content: '';
  }
  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;
  }
}
#nocss {
  display: none;
}
/* email/phone icons in old (text-based) search results table */
table td.contact-buttons .call,
table th.contact-buttons .call,
table td.contact-buttons .email,
table th.contact-buttons .email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
table td.contact-buttons .call svg,
table th.contact-buttons .call svg,
table td.contact-buttons .email svg,
table th.contact-buttons .email svg {
  width: 14px;
  height: 14px;
}
@layer base {
  body {
    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);
  }
  .clear {
    clear: both;
  }
  .hide {
    display: none !important;
  }
  .textcenter {
    text-align: center;
  }
  .closeio-employee-only {
    display: none !important;
  }
  body.closeio-employee .closeio-employee-only {
    display: inherit !important;
  }
  ul.noui {
    margin-left: 0;
    list-style-type: none;
  }
  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;
  }
  hr {
    border-top-color: #ccc;
    border-bottom-color: transparent;
  }
  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;
  }
  /**
  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);
  }
  .error {
    color: var(--failurePrimaryColor);
  }
  .success {
    color: darkgreen;
  }
  form .help-block {
    color: var(--failurePrimaryColor);
  }
  form .actions {
    *zoom: 1;
  }
  form .actions:before,
  form .actions:after {
    display: table;
    content: '';
    line-height: 0;
  }
  form .actions:after {
    clear: both;
  }
  form .msg {
    display: none;
  }
  form.form-horizontal .control-group {
    margin-bottom: 0;
  }
  form input[type='file'] {
    line-height: inherit;
    height: auto;
  }
  .editable-model-view .edit-side {
    display: none;
  }
  .editable-model-view.editing .view-side {
    display: none;
  }
  .editable-model-view.editing .edit-side {
    display: block;
  }
  body.login_as .content-area {
    background: #fee !important;
  }
  h1 sup {
    color: #9a9aad;
  }
  .hint-box {
    margin-bottom: 20px;
    background-color: var(--bgCardLight);
    border: 1px solid var(--borderDefault);
    border-radius: var(--baseBorderRadius);
    margin-top: 25px;
    padding: 10px 20px;
  }
  .hint-box h3 span {
    color: #3790b9;
  }
  .hint-box a.grey-link {
    color: var(--colorTextDefault);
    border-bottom: dotted 1px var(--borderDefault);
  }
  .hint-box a.grey-link:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
  }
  .sortable-ghost {
    border: dotted 1px #888 !important;
    opacity: 0.6;
  }
  .sortable-ghost * {
    visibility: hidden;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    display: none;
    margin: 0;
  }
  .inline-help-icon {
    width: 16px;
    height: 16px;
    margin-top: -2px;
    margin-left: 3px;
    padding: 0;
    display: inline-block;
    font-size: 13px;
    color: var(--colorTextMedium);
  }
  .inline-help-icon:hover {
    color: var(--colorTextDefault);
  }
  .divider-left {
    border-left: solid 1px var(--borderDefault);
    padding-left: 6px;
    margin-left: 6px;
    line-height: 1;
  }
  .table-bordered th {
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 23px;
    font-weight: normal;
    background-color: var(--bgTableHeaderDefault);
  }
  table th.sorting-asc::before,
  table th.sorting-desc::before {
    float: right;
    font-family: 'Arial';
    position: relative;
    right: -2px;
  }
  table th.sorting-asc::before {
    /*content: '▲';*/
    /*content: '▴';*/
    content: '▾';
    top: 1px;
    transform: rotate(180deg);
  }
  table th.sorting-desc::before {
    /*content: '▼';*/
    content: '▾';
  }
  .saved-search-modal-form input[name='query'],
  .saved-search-modal-form input[name='name'] {
    width: calc(100% - 12px);
    max-width: 500px;
  }
  .saved-search-modal-form .field-shared_with {
    display: none;
  }
  .saved-search-delete {
    position: relative;
    top: 5px;
    color: #bd362f;
  }
  .BtnGroup.customize-columns {
    float: right;
  }
  .BtnGroup.customize-columns .header {
    border-bottom: solid 1px #ddd;
    padding: 7px;
    background: #f3f3f3;
  }
  .BtnGroup.customize-columns .header h4 {
    margin: 0;
    font-size: 16px;
  }
  .BtnGroup.customize-columns ul {
    list-style-type: none;
    margin: 0;
    max-height: 315px;
    overflow-y: scroll;
    padding: 5px 10px;
  }
  .BtnGroup.customize-columns .actions {
    padding: 5px;
    border-top: solid 1px #ddd;
  }
  .list-keyboard-navigable tr > :first-child,
  .list-keyboard-navigable .item > :first-child {
    position: relative;
  }
  .list-keyboard-navigable tr.active,
  .list-keyboard-navigable .item.active {
    outline: none;
  }
  .list-keyboard-navigable tr.active > :first-child:before,
  .list-keyboard-navigable .item.active > :first-child:before {
    content: '';
    width: 2px;
    background: var(--colorIconInformational);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
  }
  table td.contact-buttons,
  table th.contact-buttons {
    padding: 0;
    font-size: 0;
    text-overflow: clip !important;
    overflow: visible;
    white-space: nowrap;
  }
  table td.contact-buttons .call,
  table th.contact-buttons .call,
  table td.contact-buttons .email,
  table th.contact-buttons .email {
    display: inline-block;
    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;
  }
  table td.contact-buttons .call.inactive,
  table th.contact-buttons .call.inactive,
  table td.contact-buttons .email.inactive,
  table th.contact-buttons .email.inactive {
    color: #ccc;
  }
  table td.contact-buttons .email,
  table th.contact-buttons .email {
    border-right: solid 1px var(--borderLight);
    color: var(--colorTextMedium);
  }
  table td.contact-buttons a.call:hover,
  table th.contact-buttons a.call:hover,
  table td.contact-buttons a.email:hover,
  table th.contact-buttons a.email:hover {
    background-color: var(--surfaceBackgroundDefault);
    color: var(--colorLinkDefault);
    -webkit-text-decoration: none;
    text-decoration: none;
  }
  table td.contact-buttons a.call:active,
  table th.contact-buttons a.call:active,
  table td.contact-buttons a.email:active,
  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);
  }
  table th.contact-buttons .call,
  table th.contact-buttons .email {
    height: 32px;
    line-height: 32px;
  }
  select,
  textarea,
  .GlobalInput {
    padding: 4px 12px;
    color: var(--colorTextDefault);
    border: 1px solid var(--formBorder);
    border-radius: var(--baseInputBorderRadius);
    box-shadow: none;
    transition: none;
  }
  select:focus,
  textarea:focus,
  .GlobalInput:focus {
    border-color: var(--borderFocused);
    box-shadow: none !important;
    outline: 0 !important;
    transition: none;
  }
  select:invalid:focus,
  textarea:invalid:focus,
  .GlobalInput:invalid:focus {
    color: var(--colorTextDefault);
    border: 1px solid var(--borderFocused);
  }
  select {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
  }
}

.OpenInApp_title_dbe {
  margin: 32px 0;
}

.OpenInApp_panel_ca5 {
  text-align: center;
}

.OpenInApp_desc_dca {
  color: var(--colorTextLight);
  margin: 16px 0;
}

.OpenInApp_container_b4f {
  max-width: 850px;
  padding: 8px;
  text-align: center;
  margin: auto;
}

.OpenInApp_logo_5d6 {
  display: block;
  width: 48px;
  margin: 40px auto;
}

.OpenInApp_panel_be8 {
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--borderDefault);
  border-radius: 3px;
  background: var(--surfaceBackgroundDefault);
}

.ErrorPage_image_0ed {
  width: 150px;
}

/* 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 */
}
  }

.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);
}
  }

/* account for padding on general app screen and settings pages to spread full-width */
.AppHeader_spreadForApp_66b,
.AppHeader_spreadForSettings_61b {
  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_spreadForApp_66b,
.AppHeader_spreadForSettings_61b {
    margin-top: calc(-1 * var(--spacing-16));
    margin-right: calc(-1 * var(--spacing-16));
    margin-left: calc(-1 * var(--spacing-16));
    padding-right: var(--spacing-12); /* To line up with avatar */
}

    :is(.AppHeader_spreadForApp_66b,.AppHeader_spreadForSettings_61b) .AppHeader_hasBreadcrumbs_105 {
      margin-top: calc(-1 * var(--spacing-20));
    }
  }

/* 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_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: 18px;
  }

.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;
}

.BulkWorkflowManageModal_BulkWorkflowManageModal_loader_7d4 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.BulkWorkflowManageModal_BulkWorkflowManageModal_inlineLoader_21f {
  padding-left: var(--spacing-16);
}

.BulkWorkflowManageModal_BulkWorkflowManageModal_notice_67e {
  padding: 16px;
}

.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;
  }

.Collapsible_container_cbc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  position: relative;
  overflow: hidden;
}

.Collapsible_container_cbc.Collapsible_rounded_760 {
    border-radius: 7px;
    border: 1px solid var(--borderLight);
  }

.Collapsible_header_23f {
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
  padding: var(--spacing-12);
  align-self: stretch;
  cursor: pointer;
  z-index: 1;
}

.Collapsible_header_23f.Collapsible_noPadding_0ed {
    padding: 0;
  }

.Collapsible_header_23f.Collapsible_default_495 {
    background: var(--surfaceBackgroundLight);
  }

.Collapsible_header_23f.Collapsible_light_3b3 {
    background: var(--bgCardBase);
  }

.Collapsible_header_23f.Collapsible_transparent_668 {
    background: transparent;
  }

.Collapsible_header_23f.Collapsible_disabled_9bd {
    cursor: default;
  }

.Collapsible_header_23f.Collapsible_disabled_9bd .Collapsible_icon_5b7 {
      /* TODO [darkmode] one-off implementation of disabled icon */
      opacity: 0.3;
    }

.Collapsible_header_23f.Collapsible_default_495:hover:not(.Collapsible_disabled_9bd):not(.Collapsible_noHover_54b),.Collapsible_header_23f.Collapsible_transparent_668:hover:not(.Collapsible_disabled_9bd):not(.Collapsible_noHover_54b) {
      background: var(--bgDefaultMuted);
    }

.Collapsible_header_23f.Collapsible_light_3b3:hover:not(.Collapsible_disabled_9bd):not(.Collapsible_noHover_54b) {
      background: var(--bgCardLight);
    }

.Collapsible_header_23f .Collapsible_icon_5b7 {
    color: var(--colorIconDefault);
    transition: transform 100ms var(--standardCurve);
  }

.Collapsible_rotate90_65e:is(.Collapsible_header_23f .Collapsible_icon_5b7) {
      transform: rotate(90deg);
    }

.Collapsible_rotate180_e9f:is(.Collapsible_header_23f .Collapsible_icon_5b7) {
      transform: rotate(180deg);
    }

.Collapsible_slideable_f73 {
  align-self: stretch;
}

.Collapsible_content_4c3 {
  box-sizing: border-box;
  background: var(--surfaceBackgroundDefault);
}

.Collapsible_content_4c3.Collapsible_default_495  > * + * {
      border-top: 1px solid var(--borderLight);
    }

.Collapsible_content_4c3.Collapsible_transparent_668 {
    background: transparent;
  }

.Collapsible_section_826 {
  padding: var(--spacing-12);
}

.Collapsible_actions_797 {
  position: absolute;
  z-index: 1;
  right: var(--spacing-12);
  top: var(--spacing-12);
  margin-top: -1px;
}

.Collapsible_divider_b99 {
  border-top: 1px solid var(--borderLight);
  width: 100%;
}

.Collapsible_card_e9a {
  border: 1px solid var(--borderLight);
  border-radius: var(--activityBorderRadius);
  margin: 0 var(--spacing-12);
  overflow: hidden;
}

.ExpandableQuery_trigger_464 {
  display: inline;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  color: var(--gray-50);
}
/* TODO - remove code selector, required due to .bulk-edit-modal code rule in search.less */
code.ExpandableQuery_query_c68 {
  margin-top: 16px;
  background: var(--surfaceBackgroundDefault);
  padding: 8px 12px;
  color: var(--gray-50);
  word-break: break-all;
  display: block;
  max-height: 90px;
  overflow-y: auto;
}

.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: 1px;
  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;
}

.WorkflowSelect_input_600.WorkflowSelect_inputLarge_614 {
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
}

.Icon_RichIcon_richIcon_f7d {
  --richIconMediumSize: 28px;
  --richIconSmallSize: 24px;
  --richIconMiniSize: 16px;
  --richIconMicroSize: 14px;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_medium_06f {
    height: var(--richIconMediumSize);
    width: var(--richIconMediumSize);
  }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_small_89c {
    height: var(--richIconSmallSize);
    width: var(--richIconSmallSize);
  }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_mini_90a {
    height: var(--richIconMiniSize);
    width: var(--richIconMiniSize);
  }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_micro_c79 {
    height: var(--richIconMicroSize);
    width: var(--richIconMicroSize);
  }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_gray_0fa:not(.Icon_RichIcon_inverted_bec) {
      color: var(--colorRichIconGray);
      background-color: var(--bgRichIconGray);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_red_d5f:not(.Icon_RichIcon_inverted_bec) {
      background-color: var(--bgRichIconRed);
      color: var(--colorRichIconRed);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_orange_cb0:not(.Icon_RichIcon_inverted_bec) {
      color: var(--colorRichIconOrange);
      background-color: var(--bgRichIconOrange);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_gold_2fa:not(.Icon_RichIcon_inverted_bec) {
      color: var(--colorRichIconGold);
      background-color: var(--bgRichIconGold);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_green_f43:not(.Icon_RichIcon_inverted_bec) {
      color: var(--colorRichIconGreen);
      background-color: var(--bgRichIconGreen);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_teal_215:not(.Icon_RichIcon_inverted_bec) {
      color: var(--colorRichIconTeal);
      background-color: var(--bgRichIconTeal);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_cyan_bac:not(.Icon_RichIcon_inverted_bec) {
      color: var(--colorRichIconCyan);
      background-color: var(--bgRichIconCyan);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_blue_663:not(.Icon_RichIcon_inverted_bec) {
      color: var(--colorRichIconBlue);
      background-color: var(--bgRichIconBlue);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_purple_34d:not(.Icon_RichIcon_inverted_bec) {
      color: var(--colorRichIconPurple);
      background-color: var(--bgRichIconPurple);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_magenta_b48:not(.Icon_RichIcon_inverted_bec) {
      color: var(--colorRichIconMagenta);
      background-color: var(--bgRichIconMagenta);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_inverted_bec {
    background-color: var(--bgInvertedRichIcon);
    border: 1px solid var(--borderDefault);
  }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_inverted_bec.Icon_RichIcon_gray_0fa {
      color: var(--colorInvertedRichIconGray);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_inverted_bec.Icon_RichIcon_red_d5f {
      color: var(--colorInvertedRichIconRed);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_inverted_bec.Icon_RichIcon_orange_cb0 {
      color: var(--colorInvertedRichIconOrange);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_inverted_bec.Icon_RichIcon_gold_2fa {
      color: var(--colorInvertedRichIconGold);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_inverted_bec.Icon_RichIcon_green_f43 {
      color: var(--colorInvertedRichIconGreen);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_inverted_bec.Icon_RichIcon_teal_215 {
      color: var(--colorInvertedRichIconTeal);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_inverted_bec.Icon_RichIcon_cyan_bac {
      color: var(--colorInvertedRichIconCyan);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_inverted_bec.Icon_RichIcon_blue_663 {
      color: var(--colorInvertedRichIconBlue);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_inverted_bec.Icon_RichIcon_purple_34d {
      color: var(--colorInvertedRichIconPurple);
    }.Icon_RichIcon_richIcon_f7d.Icon_RichIcon_inverted_bec.Icon_RichIcon_magenta_b48 {
      color: var(--colorInvertedRichIconMagenta);
    }

.WorkflowSteps_more_b66 {
  align-items: center;
  color: var(--colorTextLight);
  display: flex;
  font-size: var(--fontSizeSmall);
  height: 20px;
  -webkit-user-select: none;
          user-select: none;
}

.WorkflowSteps_small_429 {
  font-size: var(--fontSizeTiny);
  height: 16px;
}

.WorkflowSteps_large_84e {
  height: 24px;
}

.WorkflowSteps_xLarge_dbc {
  height: 32px;
}

.WorkflowSelect_WorkflowSelectItem_details_dd0 {
  overflow: hidden;
  white-space: nowrap;
}

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

.WorkflowSelect_WorkflowSelectItem_workflowItemColumn_fba {
  align-items: center;
  display: flex;
  text-align: right;
}

.BulkWorkflowManageModal_BulkWorkflowManageForm_content_f51 {
  padding: var(--spacing-16);
}

.PromptAutoRecordCallsModal_promptIcon_432 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--bgDangerMuted);
}

.PromptAutoRecordCallsModal_promptHeading_404 {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.PromptAutoRecordCallsModal_promptText_838 {
  margin: 0;
  font-size: 13px;
  color: var(--colorTextLight);
  text-align: center;
}

.PromptAutoRecordCallsModal_tosText_9b5 {
  font-size: 13px;
}

.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;
}

.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c {
  background: var(--bgButtonDefaultEnabled);
  border: none;
  border-top: 1px solid var(--borderDefault);
  box-sizing: border-box;
  display: block;
  padding: 0;
  text-align: left;
  width: 100%;
}.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:active,.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:hover,.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:focus {
    -webkit-text-decoration: none;
    text-decoration: none;
  }.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:hover,.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:focus {
    color: currentColor;
  }.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:active {
    background-color: var(--colorFillTransparent05);

    /* Compensate for UIText not supporting currentColor. When active, it should move from light to the default */
    --colorTextLight: var(--colorTextDefault);
  }.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c svg {
    color: var(--colorIconLight);
  }.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:active :is(.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c svg) {
      color: var(--colorIconDefault);
    }

.UnsupportedPlatform_content_b59 {
  text-align: center;
  width: 100%;
}

.UnsupportedPlatform_content_b59.UnsupportedPlatform_isPopover_271 {
    border: 1px solid var(--borderLight);
    border-radius: var(--baseBorderRadius);
  }

.UnsupportedPlatform_footer_2b6 {
  display: block;
  position: relative;
  text-align: center;
  background-color: var(--bgCardLight);
  border-top: 1px solid var(--borderLight);
  padding: var(--spacing-16);
}

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

:is(.UnsupportedPlatform_footer_2b6:hover,.UnsupportedPlatform_footer_2b6:focus) .UnsupportedPlatform_footerAction_af0 {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.UnsupportedPlatform_footer_2b6::after {
    content: '\2192'; /* Represents &rarr; */
    display: flex;
    position: absolute;
    top: 0;
    /* 5px because bottom padding is 5px larger than the top one and we want this aligned between question and action */
    bottom: 5px;
    right: 25px;
    align-items: center;
    font-size: 20px;
    color: #bbb;
  }

.UnsupportedPlatform_footerQuestion_cea {
  margin-bottom: 5px;
  color: #666;
}

.UnsupportedPlatform_footerAction_af0 {
  margin-bottom: 0;
  font-size: 18px;
  color: #222;
}

.UnsupportedPlatform_logo_7ee {
  margin: 0 auto;
  width: var(--spacing-48);

  /* Prevents the svg from taking up additional vertical space, keeping it at 48px instead of 53px */
}

.UnsupportedPlatform_logo_7ee svg {
    display: block;
  }

/**
 * TODO: port to CSS modules.
 * We cannot right now because certain subcomponents (Contact and Info) depend
 * on some styles here (changes to call status)
 */
/* wrapper applied by both active_call_bar_view and active_dialer_view */
.CallBarWrapper {
  --callBarTransition: 250ms cubic-bezier(0.77, 0, 0.175, 1);
  --callBarButtonSize: 28px;

  position: relative;
}
.CallBarWrapper:not(:last-child):not(:only-child) {
    margin-bottom: 2px;
  }
.CallBarWrapper::after {
    pointer-events: none;
    content: '';
    display: block;
    position: absolute;
    top: 4px; /* do not overlap top border */
    left: 0;
    right: 0;
    bottom: 1px; /* do not overlap bottom border */
    background-color: var(--surfaceBackgroundDefault);
    opacity: 0;
    transition: opacity 0.5s;
  }
.CallBarWrapper.is-fadingOut::after {
    opacity: 1;
  }
.CallBarWrapper.is-fadingIn::after {
    opacity: 0;
  }

.CallBar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-height: 60px; /* = 8px + 24px + 4px + 16px + 4px */
  padding-bottom: 4px;
  border-top: 1px solid var(--borderDefault);
  background-color: var(--surfaceBackgroundDefault);
}

.CallBar::before {
    content: ' ';
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--borderDefault);
    transition: background-color var(--callBarTransition);
  }

.CallBar--pending::after {
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
  right: -28px;
  width: calc(100% + 28px);
  height: 4px;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.15) 100%
  );
  background-size: 28px 100%;
  animation: pendingBar 500ms linear infinite;
}
@keyframes pendingBar {
  0% {
    transform: translate(-28px, 0);
  }
  100% {
    transform: none;
  }
}

.CallBar--active::before {
    background-color: var(--fillSuccess);
  }

.CallBar--active.is-dialer::before {
    background-color: var(--fillInformational);
  }

.CallBar--rejected::before,.CallBar--rejected.is-dialer::before {
    background-color: var(--failurePrimaryColor);
  }

.CallBar--closed.is-dialer::before {
  background-color: var(--borderDefault);
}

/* TODO: only used in ActiveDialerBar.
   that component doesn't have its own styles (yet)
   possibly namespace on CallBar, or see why it's needed */
.CallBar__inner {
  display: flex;
  width: 100%;
  height: 60px;
}

.CallBar__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 0;
  margin-bottom: 4px; /* *8px* + 24px + 4px + 16px + *8px* */
  margin: 0 12px;
  flex-grow: 1;
  min-width: 0; /* hack for ellipsis inside flex-child */
}

.CallBar_StatusText_statusText_33c {
  color: var(--colorTextDefault);
  line-height: 32px;
  align-self: center;
  display: flex;
  align-items: center;
  margin-right: 16px;
  white-space: nowrap;
}

.CallBar_StatusText_multiline_71b {
  flex-direction: column;
  line-height: 1.3;
  text-align: right;
}

.CallBar_StatusText_failed_3b3 {
  color: var(--failurePrimaryColor);
}

.CallBar_StatusText_transferredTo_dc0 {
  display: flex;
  align-items: center;
  margin-left: var(--spacing-4);
  gap: var(--spacing-4);
}

.CallBar_StatusText_subText_ac4 {
  color: var(--colorTextDefault);
}

.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);
  }

.ObserverCallBar_CoachList_list_0fa {
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 8px;
  margin: 0 8px;
}

.InfoPopover_content_723 {
  padding: 22px;
  box-sizing: border-box;
  color: var(--colorTextDefault);
}

.InfoPopover_content_723.InfoPopover_default_69a {
    max-width: 320px;
    width: 320px;
  }

.InfoPopover_content_723.InfoPopover_large_fee {
    max-width: 380px;
    width: 380px;
  }

.InfoPopover_header_904 {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fontWeightBold);
}

.InfoPopover_p_ac5 {
  font-size: 14px;
  line-height: 20px;
  color: var(--colorTextMedium);
}

.InfoPopover_action_da2 {
  display: flex;
  align-items: center;
  margin-top: 16px;
}

.InfoPopover_helpLink_e9d {
  flex-grow: 1;
  text-align: right;
}

.InfoPopover_xButton_fc5 {
  position: absolute;
  top: 16px;
  right: 16px;
}

.ObserverCallBar_IntroducePromo_list_e36 {
  list-style: none;
  margin: 12px 0;
}

.ObserverCallBar_IntroducePromo_item_c59 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 6px 0;
}

.ObserverCallBar_IntroducePromo_icon_851 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  color: var(--bgLight);
  margin-right: 10px;
}

.ObserverCallBar_IntroducePromo_icon_851.ObserverCallBar_IntroducePromo_listen_aca {
    /* TODO [darkmode] special case */
    background-color: var(--borderHover);
  }

.ObserverCallBar_IntroducePromo_icon_851.ObserverCallBar_IntroducePromo_whisper_293 {
    background-color: var(--bgInformational);
  }

.ObserverCallBar_IntroducePromo_icon_851.ObserverCallBar_IntroducePromo_barge_f15 {
    background-color: var(--bgSuccess);
  }

.ObserverCallBar_IntroducePromo_icon_851 svg {
    width: 10px;
  }

.ObserverCallBar_IntroducePromo_text_260 {
  margin-left: 4px;
  color: var(--colorTextLight);
}

.ObserverCallBar_InviteUser_item_98d {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ObserverCallBar_InviteUser_invitedBadgeWrapper_cff {
  flex: none;
}

.ObserverCallBar_InviteUser_statusIconWrapper_261 {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.ObserverCallBar_InviteUser_emptyState_a6e {
  padding: var(--spacing-4);
  box-sizing: border-box;
  color: var(--colorTextLight);
  font-weight: 600;
  text-align: center;
}

.CallBar__infoLoader {
  margin: auto 0;
  align-self: center;

  /* Override loader's more-specific margin property. */
}

.CallBar__infoLoader.loader {
    margin-right: 0;
  }

/* TODO: See if this is needed */
.CallBar--closed.is-dialer .CallBar__contact {
  color: var(--colorTextDefault);
}

.CallBar__actionHint {
  margin: auto 0 auto 20px;
}

.CallBar__actionHintCopy {
  display: block;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.CallBar__activeUsers {
  display: flex;
  padding: 0 6px 0 3px;
  height: 18px;
  align-items: center;
  font-size: 11px;
  border: 1px solid var(--borderDefault);
  background-color: #eee;
}

.CallBar__activeUsersIcon {
  float: none;
  margin-top: -2px;
  margin-left: 0;
  width: 18px;
  font-size: 13px;
}

.CallBar__callCoaching {
  display: grid;
  grid-template-columns: auto auto 1px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.CallBar__callCoaching::after {
    content: '';
    display: block;
    height: 32px;
    padding-right: 8px;
    border-right: 1px solid var(--borderDefault);
  }

/* status text / actions */
.CallBar__actions {
  color: var(--colorTextDefault);
  line-height: 32px;
  align-self: center;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-left: 1px solid var(--borderDefault);
  padding-left: 7px;
  margin-right: 8px;

  /* properly align button inside anonymous span (DialerSettingsPopover adds one) */
}
.CallBar__actions  > * {
    margin: 0 8px;
  }
.CallBar__actions  > span {
    display: flex;
  }

.CallBar__actions .CallBar__actions.is-alone {
  border-left-width: 0;
}

.CallBar__help {
  margin-left: 10px;
  vertical-align: 1px;
}

.CallBar__helpIcon {
  cursor: pointer;
  display: inline-block;
}

.CallBar__helpIcon:hover {
    color: var(--gray-80);
  }

.CallBar__duration {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* misc */
.CallBar__actionButton,
.CallBar__closeButton,
.CallBar__pauseDialerButton,
.CallBar__redialButton,
.CallBar__resetButton,
.CallBar__reconnectButton,
.CallBar__resumeButton,
.CallBar__backToSmartViewButton,
.CallBar__backToPreviewButton {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: calc(var(--callBarButtonSize) / 2);
  fill: #fff;
  color: #fff;
  padding: 0;
  outline: 0;
  height: var(--callBarButtonSize);
}
:is(.CallBar__actionButton,.CallBar__closeButton,.CallBar__pauseDialerButton,.CallBar__redialButton,.CallBar__resetButton,.CallBar__reconnectButton,.CallBar__resumeButton,.CallBar__backToSmartViewButton,.CallBar__backToPreviewButton) svg {
    width: 14px;
    transition:
      transform var(--callBarTransition),
      fill var(--callBarTransition);
  }

.CallBar__loader {
  margin-left: 14px;
  margin-right: 14px;
}

.CallBar__loader.is-interactive {
    cursor: pointer;
  }

.CallBar__actionButton {
  transition:
    background-color 200ms,
    width var(--callBarTransition);
}

.CallBar__actionButtonText {
  overflow: hidden;
  white-space: nowrap;
  margin-left: 12px;
}

.CallBar__actionButton--hangUp {
  justify-content: center;
  width: var(--callBarButtonSize);
  background-color: var(--bgDanger);
}

.CallBar__actionButton--hangUp:hover {
    background-color: color-mix(in srgb, #000 10%, var(--bgDanger));
  }

/* Disabled as-in we just clicked it and it cannot be clicked again. */

.CallBar__actionButton--hangUp:disabled {
    opacity: 0.5;
  }

/* Disabled as-in we cannot hang up now. */

.CallBar__actionButton--hangUp.is-disabled {
    background-color: color-mix(in srgb, var(--bgDanger) 50%, transparent);
  }

.CallBar__actionButton--hangUp svg {
    transform: rotate(135deg);
  }

.CallBar__actionButton--answer,
.CallBar__actionButton--callBack {
  padding: 0 14px 0 8px;
}

.CallBar__actionButton--answer {
  background-color: var(--fillSuccess);
  color: var(--colorTextNeutralInvert);
}

.CallBar__actionButton--answer:hover {
    background-color: color-mix(in srgb, #000 10%, var(--fillSuccess));
  }

.CallBar__actionButton--callBack {
  width: 108px;
  color: var(--colorTextDefault);
  fill: var(--colorTextDefault);
  background-color: var(--surfaceBackgroundDefault);
  border: 1px solid var(--borderDefault);
}

.CallBar__actionButton--callBack:hover {
    background-color: var(--bgDefaultMuted);
  }

.CallBar__pauseDialerButton {
  background-color: transparent;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  margin-right: 6px;
  color: var(--colorTextDefault);
}

.CallBar__pauseDialerButton svg {
    width: 24px;
    height: 24px;
  }

.CallBar__closeButton {
  background-color: transparent;
  width: 16px;
  height: 16px;
  color: var(--colorIconLight);
}

.CallBar__closeButton svg {
    width: 16px;
  }

.CallBar__closeButton:hover {
    color: var(--colorIconDefault);
  }

.CallBar__redialButton,
.CallBar__resetButton,
.CallBar__reconnectButton,
.CallBar__resumeButton,
.CallBar__backToSmartViewButton,
.CallBar__backToPreviewButton {
  padding: 0 10px;
  color: var(--colorTextDefault);
  background-color: transparent;
  border: 1px solid var(--borderLight);
}

.CallBar__resetButtonIcon {
  margin-right: 8px;
}

.CallBar__resetButtonIcon svg {
    width: 12px;
    height: 12px;
  }

.CallBar__resumeButton {
  min-width: 126px; /* Match Call Next Lead button. */
}

.CallBar__redialButton,
.CallBar__reconnectButton {
  fill: var(--colorTextDefault);
}

.CallBar__redialButtonIcon,
.CallBar__reconnectButtonIcon {
  margin-right: 6px;
  margin-top: 3px;
}

.CallBar__backToSmartViewButton,
.CallBar__backToPreviewButton {
  align-self: flex-start;
  margin: auto 0;
}

.CallBar__backToPreviewButton {
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden {
  display: none;
}

.components_NextCallButton_nextCallButton_0cc {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: calc(var(--callBarButtonSize) / 2);
  color: #fff;
  outline: 0;
  height: var(--callBarButtonSize);

  overflow: hidden;
  position: relative;
  z-index: 0;
  padding: 0 10px;
  background-color: var(--fillInformational);
}.components_NextCallButton_nextCallButton_0cc:hover {
    background-color: color-mix(in srgb, #000 10%, var(--fillInformational));
  }.components_NextCallButton_nextCallButton_0cc::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1; /* Sit below text but above the background. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: var(--colorLinkDefault);
  }.components_NextCallButton_nextCallButton_0cc.components_NextCallButton_isProgressing_265::after {
      width: 100%;
      transition: width 5s linear;
    }.components_NextCallButton_nextCallButton_0cc.components_NextCallButton_isDisabled_6a4 {
    pointer-events: none;
  }.components_NextCallButton_nextCallButton_0cc.components_NextCallButton_isDisabled_6a4,.components_NextCallButton_nextCallButton_0cc.components_NextCallButton_isDisabled_6a4:hover {
      cursor: default;
      background-color: #cfeaf6;
    }

.components_Contact_contactRow_e93 {
  display: flex;
  min-height: 24px; /* 8px + *24px* + 4px + 16px + 8px */
  margin-bottom: 4px; /* 8px + 24px + *4px* + 16px + 8px */
  align-items: center;
}

.components_Contact_contactName_f00 {
  display: flex;
  align-items: center;
  min-width: 0; /* to allow flex child text overflow */
}

.components_Contact_phoneLabel_53b {
  line-height: 1;
  margin-left: 8px;
}

.components_Contact_truncate_ebe {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.components_Contact_contactIcon_fee {
  color: var(--colorTextMedium);
  margin-right: 8px;
}

.components_Contact_leadRow_d10 {
  align-items: center;
  display: flex;
  line-height: 16px;
}

.components_Contact_leadIcon_48b {
  margin-right: 8px;
}

.components_Contact_leadName_68d {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 16px;
}

.components_Contact_leadName_68d:not(a) {
    color: var(--gray-40);
  }

.components_Contact_leadStatus_18e {
  margin-left: 8px;
}

.components_Contact_leadAction_591 {
  padding: 4px 0;
  cursor: pointer; /* no href */
}

.components_Contact_leadSeparator_6b9 {
  font-weight: var(--fontWeightBold);
  padding: 0 8px;
}

.components_Contact_transferredFrom_3a5 {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.components_Contact_transferredFromIcon_8e4 {
  line-height: 1;
}

.components_Contact_transferredFromIcon_8e4 svg {
    vertical-align: middle;
    width: 12px;
    height: 12px;
  }

.components_Contact_transferredFromAvatar_a18 {
  margin: 0 8px;
  flex-shrink: 0;
}

.components_DialerUpsellText_container_5eb {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.DialerUpsellPopover {
  text-align: left;
  max-width: 325px;
  width: 325px;
}

.DialerUpsellPopover__header {
  margin-top: 7px;
  margin-bottom: 15px;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fontWeightBold);
}

.DialerUpsellPopover__separator {
  margin: 0 0 16px;
  border-top-color: #e5e5e5;
  border-bottom: 0 none;
}

.DialerUpsellPopover__copy {
  margin-bottom: 16px;
}

.DialerUpsellPopover__copy.is-last {
    margin-bottom: 7px;
  }

.DialerUpsellPopover__powerDialerCallingImageWrapper {
  display: block;
  position: relative;
  height: 0;
  padding-bottom: 13.4%;
  box-sizing: border-box;
  border-radius: 3px;
  border: 12px solid #f7f7f7;
  background-color: #f7f7f7;
}

.DialerUpsellPopover__powerDialerCallingImage {
  position: absolute;
  width: 100%;
}

.DialerUpsellPopover__helpLink {
  display: block;
  margin: 5px 0;
  text-align: left;
}

.CallBar__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  flex: 0 0 60px;
  line-height: 1;
  border-right: 1px solid var(--borderDefault);
  padding: 8px 0;
  transition:
    color var(--callBarTransition),
    fill var(--callBarTransition);

  --color: var(--colorIconLight);
  --fill: --color;

  color: var(--color);
}

.CallBar__info svg {
    color: var(--fill);
  }

.CallBar__info--predictiveDialer .CallBar__infoText {
  color: var(--colorTextDefault);
}

.CallBar__infoImg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}

.CallBar__infoImg  > svg {
    width: 20px;
    height: 20px;
  }

.CallBar__infoImg--hungUp {
  margin: auto;
}

.CallBar__infoImg--hungUp svg {
    transform: rotate(135deg);
  }

.CallBar__infoImg--paused {
  margin: auto;
}

.CallBar__infoImg--paused svg {
    width: 24px;
    height: 24px;
  }
.CallBar__infoImg--predictiveDialer svg {
  color: var(--warningPrimaryColor);
  width: 24px;
  height: 24px;
}

.CallBar__infoText {
  line-height: 16px;
  font-size: 12px;
  font-weight: var(--fontWeightBold);
  text-transform: uppercase;
}
/**
 * Icon colors for Call states
 * NOTE: these are dependent on the class name(s) of the parent CallBar.
 * TODO: decouple from parent styles
 */
.CallBar--active .CallBar__info {
  --color: var(--colorTextSuccess);
  --fill: var(--fillSuccess);
}

.CallBar--active.is-dialer .CallBar__info {
  --color: var(--colorTextInformational);
  --fill: var(--fillInformational);
}

.CallBar--paused.is-dialer .CallBar__info {
  --color: var(--colorTextDefault);
  --fill: var(--colorIconDefault);
}

.CallBar--rejected .CallBar__info,
.CallBar--rejected.is-dialer .CallBar__info {
  --color: var(--colorTextDanger);
  --fill: var(--fillDanger);
}

.CallBar--closed.is-dialer .CallBar__info {
  --color: var(--colorIconLight);
  --fill: var(--colorIconLight);
}

.components_CallQualityIndicator_icon_8c2 {
  cursor: pointer;
  --color: var(--fillDanger);
  display: grid;
  place-content: center;
  height: 100%;
}

.components_CallQualityIndicator_container_34c {
  text-align: center;
  max-width: 280px;
}

/**
 * This is a custom button implementation to account for subtle size and content
 * differences in the call bar. It's possible this could be replaced with a normal
 * button atom, but it would need to account for new use cases. Alternatively,
 * the call bar design could be updated to more align with other buttons.
 */
.CallBarButton_button_37d {
  --transition: var(--callBarTransition, 250ms cubic-bezier(0.77, 0, 0.175, 1));
  --size: 28px;
  --svgSize: 14px;
  --bgColor: transparent;
  --bgColorHover: var(--bgButtonDefaultHover);
  --bgPressed: var(--bgButtonDefaultPressed);
  --colorFocus: var(--colorBlue20);
  --color: var(--colorTextDefault);

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: var(--spacing-12);

  height: var(--size);
  min-width: var(--size);
  margin: 0;
  padding: 0 var(--spacing-8);
  border: none;
  border-radius: calc(var(--size) / 2);
  color: var(--color);
  background: var(--bgColor);
  transition:
    background-color 200ms,
    width var(--transition);
}
.CallBarButton_button_37d svg {
    fill: var(--color);
    display: block;
    transition:
      transform var(--transition),
      fill var(--transition);
    width: var(--svgSize);
    height: var(--svgSize);
  }
.CallBarButton_button_37d:hover {
    background: var(--bgColorHover);
  }
.CallBarButton_button_37d:focus-visible {
    outline-color: var(--colorFocus);
  }
.CallBarButton_button_37d:active,.CallBarButton_button_37d:active:hover {
      background-color: var(--bgPressed);
    }
.CallBarButton_button_37d[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
.CallBarButton_button_37d.CallBarButton_default_97d {
    --svgSize: 20px;
    --size: 40px;
  }
.CallBarButton_button_37d.CallBarButton_success_2b8,.CallBarButton_button_37d.CallBarButton_danger_aa3 {
    /* TODO: This can be changed to --color if UIText is given a way to force white */
    --colorTextDefault: var(--white);
  }
.CallBarButton_button_37d.CallBarButton_bordered_b0a {
    --bgColor: var(--surfaceBackgroundDefault);
    border: 1px solid var(--borderDefault);
  }
.CallBarButton_button_37d.CallBarButton_success_2b8 {
    --bgColor: var(--fillSuccess);
    --bgColorHover: color-mix(in srgb, #000 10%, var(--fillSuccess));
  }
.CallBarButton_button_37d.CallBarButton_danger_aa3 {
    --bgColor: var(--fillDanger);
    --bgColorHover: color-mix(in srgb, #000 10%, var(--fillDanger));
  }

.CallBarButton_text_fe9 {
  padding-right: 6px;
}

.CallBarButton_hangUp_b19.CallBarButton_disallowed_8f9.CallBarButton_danger_aa3 {
    --bgColor: color-mix(in srgb, var(--fillDanger) 50%, transparent);
    --bgColorHover: var(--bgColor);
  }

.CallBarButton_hangUp_b19 svg {
    transform: rotate(135deg);
  }

.CallRecordingToggle_base_990 {
  --badgeWidthStart: 40px;
  --horizontalPadding: 8px;
  --badgeWidthFull: calc(91px + var(--horizontalPadding) * 2);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  transition: width 200ms;
}

.CallRecordingToggle_base_990.CallRecordingToggle_statusInitial_265,.CallRecordingToggle_base_990.CallRecordingToggle_statusStarting_c7b {
    width: var(--badgeWidthStart);
  }

.CallRecordingToggle_base_990.CallRecordingToggle_statusRecording_5ca,.CallRecordingToggle_base_990.CallRecordingToggle_statusPausing_abe {
    width: var(--badgeWidthFull);
  }

:is(.CallRecordingToggle_base_990.CallRecordingToggle_statusRecording_5ca,.CallRecordingToggle_base_990.CallRecordingToggle_statusPausing_abe) .CallRecordingToggle_indicator_0ba {
      background-color: var(--bgDangerMuted);
      border-color: var(--bgDangerMuted);
    }

:is(.CallRecordingToggle_base_990.CallRecordingToggle_statusRecording_5ca,.CallRecordingToggle_base_990.CallRecordingToggle_statusPausing_abe) .CallRecordingToggle_separator_cad {
      background-color: var(--borderDangerMuted);
    }

:is(.CallRecordingToggle_base_990.CallRecordingToggle_statusRecording_5ca,.CallRecordingToggle_base_990.CallRecordingToggle_statusPausing_abe) .CallRecordingToggle_indicatorStatusText_65e {
      color: var(--colorTextDanger);
    }

.CallRecordingToggle_base_990.CallRecordingToggle_statusPaused_dd2,.CallRecordingToggle_base_990.CallRecordingToggle_statusResuming_095,.CallRecordingToggle_base_990.CallRecordingToggle_statusInitializing_f4b {
    width: var(--badgeWidthFull);
  }

:is(.CallRecordingToggle_base_990.CallRecordingToggle_statusPaused_dd2,.CallRecordingToggle_base_990.CallRecordingToggle_statusResuming_095,.CallRecordingToggle_base_990.CallRecordingToggle_statusInitializing_f4b) .CallRecordingToggle_indicator_0ba {
      background-color: var(--bgLightMuted);
      border-color: var(--borderLight);
    }

:is(.CallRecordingToggle_base_990.CallRecordingToggle_statusPaused_dd2,.CallRecordingToggle_base_990.CallRecordingToggle_statusResuming_095,.CallRecordingToggle_base_990.CallRecordingToggle_statusInitializing_f4b) .CallRecordingToggle_separator_cad {
      background-color: var(--borderDefault);
    }

:is(.CallRecordingToggle_base_990.CallRecordingToggle_statusPaused_dd2,.CallRecordingToggle_base_990.CallRecordingToggle_statusResuming_095,.CallRecordingToggle_base_990.CallRecordingToggle_statusInitializing_f4b) .CallRecordingToggle_indicatorStatusText_65e {
      color: var(--colorTextLight);
    }

.CallRecordingToggle_startRecordingButton_c64 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.CallRecordingToggle_startRecordingButton_c64:hover {
    background-color: var(--bgButtonBorderlessHover);
  }

.CallRecordingToggle_startRecordingButton_c64:active {
    background-color: var(--bgButtonBorderlessPressed);
  }

.CallRecordingToggle_indicator_0ba {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 91px;
  height: 32px;
  padding: 0 var(--spacing-4) 0 var(--spacing-8);
  border-radius: 100px;
  box-sizing: border-box;
  border: 1px solid transparent;
  animation: CallRecordingToggle_fadeIn_583 300ms forwards;
}

.CallRecordingToggle_indicatorStatusText_65e {
  font-size: 11px;
  font-weight: 600;
}

.CallRecordingToggle_separator_cad {
  display: block;
  flex: none;
  width: 1px;
  height: 12px;
  margin-right: var(--spacing-4);
  margin-left: var(--spacing-12);
}

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

.CallRecordingToggle_ackContent_9c6 {
  color: var(--colorTextLight);
}

.CallRecordingToggle_ackContent_9c6 p {
    margin: 0;
    margin-bottom: var(--spacing-8);
  }

/* TODO: Small icon buttons should be 24px in size. Remove this once it's fixed */
.CallRecordingToggle_loaderIconWrapper_fdf {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
}

.CallRecordingToggle_recordingDot_ffe {
  display: block;
  position: relative;
  width: 12px;
  height: 12px;
}

.CallRecordingToggle_recordingDot_ffe::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    background-color: var(--colorIconLight);
  }

.CallRecordingToggle_recordingPulse_69e::after {
    background-color: var(--fillDanger);
    animation: CallRecordingToggle_pulseDotOpacity_730 1s infinite alternate;
  }

@keyframes CallRecordingToggle_fadeIn_583 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes CallRecordingToggle_pulseDotOpacity_730 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.3;
  }
}

.DialpadPopover_dialpad_97a {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  color: var(--colorTextDefault);
}

.DialpadPopover_dialpad_97a .DialpadPopover_button_a9f {
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;

    height: 50px;
    border: 1px solid var(--borderDefault);
    border-radius: 7px;
    padding-top: 10px;
  }

:is(.DialpadPopover_dialpad_97a .DialpadPopover_button_a9f):hover {
      background-color: var(--bgButtonDefaultHover);
    }

:is(.DialpadPopover_dialpad_97a .DialpadPopover_button_a9f) .DialpadPopover_key_2ea {
      font-size: 24px;
      line-height: 24px;
      font-weight: 700;
    }

.DialpadPopover_isPressed_d4a:is(.DialpadPopover_dialpad_97a .DialpadPopover_button_a9f) {
      background-color: var(--bgActive);
      border-color: var(--bgActive);
      color: var(--white);
      --colorTextLight: var(--white); /* Force UI text to white */
    }

.DialpadPopover_message_1ef {
  margin-top: var(--spacing-4);
  grid-column: span 3;
  display: flex;
  padding: var(--spacing-8);
  gap: var(--spacing-8);
  background-color: var(--bgLightMuted);
  color: var(--colorTextMedium);
}

.MicrophoneToggle_toggle_bd7 {
  display: grid;
  place-content: center;
  cursor: pointer;
  /* Only show one SVG (muted/unmuted) and swap on hover */
}

.MicrophoneToggle_toggle_bd7.MicrophoneToggle_isMuted_844:not(:hover) .MicrophoneToggle_iconUnmuted_6df,.MicrophoneToggle_toggle_bd7.MicrophoneToggle_isMuted_844:hover .MicrophoneToggle_iconMuted_494,.MicrophoneToggle_toggle_bd7:not(.MicrophoneToggle_isMuted_844):not(:hover) .MicrophoneToggle_iconMuted_494,.MicrophoneToggle_toggle_bd7:not(.MicrophoneToggle_isMuted_844):hover .MicrophoneToggle_iconUnmuted_6df {
    display: none;
  }

.MicrophoneToggle_iconUnmuted_6df g path {
    fill: var(--fillSuccess);
    clip-path: inset(calc((1 - var(--level, 0)) * 100%) 0% 0% 0%);
  }

.MicrophoneToggle_mutedPopover_dca {
  text-align: center;
  max-width: 280px;
}

.TransferCallPopover_userItem_ba3 {
  display: flex;
  gap: var(--spacing-8);
  width: 100%;
  align-items: center;
  height: 28px;
  padding: 0 var(--spacing-16);
  box-sizing: border-box;
  cursor: pointer;
}

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

.TransferCallPopover_popoverContent_91a {
  padding: var(--spacing-4) 0;
}

.TransferCallPopover_statusIconWrapper_fb3 {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.TransferCallPopover_numberItem_fb3 {
  display: flex;
  gap: var(--spacing-8);
  height: 44px;
  padding: 0 var(--spacing-16);
  box-sizing: border-box;
  cursor: pointer;
}

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

.TransferCallPopover_numberIconWrapper_471 {
  flex: none;
  align-self: flex-start;
  width: 16px;
  height: 16px;
  padding-top: 6px;
}

.TransferCallPopover_numberInfo_6b2 {
  flex: 1;
  display: flex;
  max-width: 250px;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.TransferCallPopover_numberInfoWrapper_6c0 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 16px;
}

.TransferCallPopover_groupHeading_8ef {
  /* Since this component is a custom made popover wannabe select/dropdown */
  /* I'm not reusing DropdownMenu.Subtitle which has a different spacing. */
  /* This is the same padding as Select minimal group heading. */
  padding: 4px 32px 6px 12px;
  box-sizing: border-box;
}

.TransferCallPopover_emptyState_475 {
  padding: var(--spacing-4);
  box-sizing: border-box;
  color: var(--colorTextLight);
  font-weight: 600;
  text-align: center;
}

.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;
  }

.DialerSettingsButton_dialerSettingsButton_d17 {
  --orange: #fbb963;

  cursor: pointer;
  outline: 0;
  display: inline-flex;
  position: relative;
  height: 28px;
  padding: 0 var(--spacing-12) 0 0;
  align-items: center;
  color: var(--colorTextDefault);
  border: 1px solid var(--borderDefault);
  border-radius: 14px;
  background-color: var(--bgButtonDefaultEnabled);
}

.DialerSettingsButton_dialerSettingsButton_d17::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid var(--colorTextDefault);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    line-height: 1;
    margin-left: 6px;
    margin-right: 2px;
    vertical-align: middle;
  }

.DialerSettingsButton_predictiveIcon_2ed {
  display: inline-block;
  padding: 1px var(--spacing-20) 1px var(--spacing-8);
  color: var(--white);
  border-radius: 14px 0 0 14px;
  background-color: var(--bgDefault);
}

.DialerSettingsButton_predictiveIcon_2ed.DialerSettingsButton_isOn_23d {
    background-color: var(--orange);
  }

.DialerSettingsButton_predictiveIcon_2ed svg {
    width: 14px;
    height: 14px;
    margin-top: 6px;
  }

.DialerSettingsButton_avatarOptions_5a7 {
  position: relative;
  margin-left: -12px;
  box-sizing: border-box;
  display: inline-block;
  z-index: 1;
  font-size: 9px;
  text-align: center;
  color: var(--white);
  padding: 3px;
  width: auto;
  padding-left: var(--spacing-12);
  color: var(--colorTextDefault);
  font-size: 14px;
  font-weight: var(--fontWeightBold);
  border-radius: 13px;
  background-color: var(--bgButtonDefaultEnabled);
}

.DialerSettingsButton_avatarOptions_5a7::after {
    display: none;
  }

.DialerSettingsButton_avatarOptions_5a7::before {
    right: -2px;
  }

.DialerSettingsButton_avatarText_b84 {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  margin-left: -2px;
}

.DialerSettingsButton_avatarImgWrapper_101 {
  box-sizing: border-box;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: baseline;
  padding-right: var(--spacing-8);
  border-radius: 13px;
  margin-left: -12px;
  padding-top: 1px;
}

.DialerSettingsButton_avatarImgWrapper_101.DialerSettingsButton_hasRest_a7c {
    padding-right: 0;
    margin-right: -4px; /* needed to offset AvatarGroup's Rest spacing */
  }

.DialerSettingsPopover {
  max-width: 310px;
  width: 310px;
  padding: 0;
  text-align: left;
  border-radius: 3px;
}

.DialerSettingsPopover__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fontWeightBold);
}

.DialerSettingsPopover__separator {
  margin: 0 -14px 16px; /* eat through parent horizontal padding 14px */
  border-top-color: var(--borderDefault);
  border-bottom: 0 none;
}

.DialerSettingsPopover__subHeader {
  margin-bottom: 5px;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fontWeightBold);
}

.DialerSettingsPopover__toggler {
  display: flex;
  align-items: flex-start;
}

.DialerSettingsPopover__togglerCopy {
  cursor: pointer;
  margin-bottom: 0;
  flex: 1;
  font-size: 13px;
  line-height: 16px;
  color: #555;
}

.DialerSettingsPopover__togglerToggle {
  margin-top: -5px;
  margin-left: 10px;
  padding-top: 0;
}

.DialerSettingsPopover__callerIdSelect {
  margin-top: 15px;
  margin-bottom: 5px;
  border-radius: 3px;
}

.DialerSettingsPopover__helpLink {
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 14px;
}

.DialerSettingsPopover__helpLink.is-last {
  margin-bottom: 5px; /* Popover has bottom padding 9px -> total spacing 14px */
}

.DialerSettingsPopover__promo {
  margin-bottom: 16px;
  padding: 14px;
  color: var(--colorTextDefault);
  background-color: #ebf6fa;
}

.DialerSettingsPopover__promoLabel {
  vertical-align: text-bottom;
  font-size: 10px;
  text-transform: uppercase;
}

.DialerSettingsPopover__promoParagraph {
  font-size: 13px;
  line-height: 16px;
  margin-bottom: 10px;
}

.DialerSettingsPopover__linkCopy {
  font-size: 13px;
  cursor: pointer;
  font-weight: normal;
}

.DialerSettingsPopover__invitesUnavailable {
  font-size: 13px;
  font-weight: normal;
  color: #999;
}

.CallerIdSelect {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  height: 52px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid var(--formBorder);
  background-color: var(--surfaceBackgroundDefault);
  box-shadow: rgba(0, 0, 0, 0.05) 0 1px 3px 0;
}

.CallerIdSelect--disabled {
  cursor: not-allowed;
  background-color: #eee;
}

.CallerIdSelect--disabled .CallerIdSelect__pickerPhone {
    cursor: not-allowed;
    background-color: var(--formBackground);
  }

.CallerIdSelect__picker {
  position: relative;
  margin-right: var(--spacing-12); /* offset picker from the right edge a bit */
  flex: 1;
}

.CallerIdSelect__pickerCurrent {
  color: var(--colorTextDefault);
  font-size: 16px;
}

.CallerIdSelect__label {
  color: #666;
  font-size: 12px;

  /* Makes sure truncation occurs for longer strings */
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.CallerIdSelect__pickerSelect {
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background-color: transparent;

  /* No outline, we style the select our own way. */
}

.CallerIdSelect__pickerSelect:focus {
    outline: none;
  }

.CallerIdSelect__copy {
  display: flex;
  align-items: stretch;
  flex: 0 1 auto;
  border-radius: 0 5px 5px 0;
  border-left: 1px solid var(--formBorder);
  background: var(--formBackground);
}

.CallerIdSelect__copyButton {
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  min-width: 38px; /* Prevents layout shift before the icon loads */
  padding: 0 12px 0 10px;
  align-items: center;
  line-height: 0;
}

.CallerIdSelect__pickerPhone {
  pointer-events: none; /* Let clicks pass throught to the underlying select */
  position: absolute;
  z-index: 1; /* Put the phone box just above the select */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 0; /* Let the label inside it truncate https://css-tricks.com/flexbox-truncated-text/ */
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: 5px;
  background-color: var(--formBackground);
}

.CallerIdSelect__pickerPhone::before,.CallerIdSelect__pickerPhone::after {
    content: '';
    display: inline-block;
    position: absolute;
    right: 2px;
    width: 0;
    height: 0;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
  }

.CallerIdSelect__pickerPhone::before {
    top: 19px;
    border-bottom: 5px solid #555;
  }

.CallerIdSelect__pickerPhone::after {
    top: 26px;
    border-top: 5px solid #555;
  }

.PredictiveDialingNotSupportedModal_listItem_0d8 {
  padding: var(--spacing-4) 0;
  box-sizing: border-box;
}

.UpgradePlanModal_content_350 {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  gap: var(--spacing-12);
  margin: auto;
  padding: var(--spacing-16);
  align-items: center;
  text-align: center;
}

.RequestPausePopover {
  max-width: 194px;
  padding: 15px;
}

.RequestPausePopover__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fontWeightBold);
}

.RequestPausePopover__cta {
  margin-bottom: 8px;
}

.RequestPausePopover__copy {
  margin-bottom: 12px;
}

.RequestPausePopover__dangerCopy {
  color: var(--colorTextDanger);
  margin-bottom: 0;
}

.components_DialerStats_buttonWrapper_2b6 {
  display: flex;
  margin-top: auto;

  /* offset button padding so arrow is aligned */
  /* see https://github.com/closeio/close-ui/issues/1132 */
}.components_DialerStats_buttonWrapper_2b6  > * {
    margin: -6px 0 -6px -6px;
  }

.FailedCallsToPredictiveDialerUpsell {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 32px;
  padding-left: 74px;
  align-items: center;
  line-height: 32px;
  background-color: var(--closeLightBlue);

  box-shadow:
    inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
    0 1px 1px 0 rgba(0, 0, 0, 0.05);
}

.FailedCallsToPredictiveDialerUpsell__copy {
  flex: 1;
}

.FailedCallsToPredictiveDialerUpsell__cta {
  margin-left: 10px;
}

.FailedCallsToPredictiveDialerUpsell__rejectedIcon {
  margin-right: 8px;
}

.FailedCallsToPredictiveDialerUpsell__rejectedIcon svg {
    fill: var(--colorTextDanger);
    width: 15px;
  }

.FailedCallsToPredictiveDialerUpsell__dismissBtn {
  margin-left: auto;
  margin-right: 8px;
  padding: 0;
  line-height: 1;
  border: 0 none;
  background: transparent;
  opacity: 0.3;
}

.ObserverCallBar_user_dc0 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 60px;
  border-right: 1px solid var(--borderDefault);
}

.ObserverCallBar_ListenWhisperBargeGroupButton_group_441 {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, auto);
  background-color: var(--surfaceBackgroundDark);
  border-radius: 20px;
  padding: 7px;
  margin: 10px 16px 10px 8px;
}

.ObserverCallBar_ListenWhisperBargeGroupButton_group_441.ObserverCallBar_ListenWhisperBargeGroupButton_loading_370 {
    opacity: 0.8;
  }

/* fix specificity issues with RadioGroup#LabelWithBorder */

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label) {
    background-color: transparent;
    border: 2px solid transparent;
    font-size: 13px;
    line-height: 16px;
    padding: 3px 8px 3px 12px;
    border-radius: 13px;
    box-shadow: none;
  }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):hover,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):active,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label).isSelected,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25:is(label) {
      background-color: var(--surfaceBackgroundDefault);
    }

.ObserverCallBar_ListenWhisperBargeGroupButton_listen_129:is(label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):hover,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):active,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label).isSelected,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25:is(label)) {
        color: var(--colorTextLight);
        /* TODO [darkmode] special case */
        border-color: var(--borderHover);
      }

.ObserverCallBar_ListenWhisperBargeGroupButton_whisper_a9d:is(label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):hover,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):active,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label).isSelected,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25:is(label)) {
        border-color: var(--borderInformational);
        color: var(--fillInformational);
      }

.ObserverCallBar_ListenWhisperBargeGroupButton_barge_5f5:is(label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):hover,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):active,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label).isSelected,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25:is(label)) {
        border-color: var(--borderSuccess);
        color: var(--colorTextSuccess);
      }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25.ObserverCallBar_ListenWhisperBargeGroupButton_listen_129:is(label) {
        background-color: color-mix(
          in srgb,
          var(--colorTextLight) 10%,
          transparent
        );
      }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25.ObserverCallBar_ListenWhisperBargeGroupButton_whisper_a9d:is(label) {
        background-color: var(--bgInformationalMuted);
      }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25.ObserverCallBar_ListenWhisperBargeGroupButton_barge_5f5:is(label) {
        background-color: var(--bgSuccessMuted);
      }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label).isSelected .Btn__icon,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label) .Btn__icon {
      color: inherit;
      width: 14px !important;
      height: 14px !important;
      margin: 5px 8px;
    }

.RestrictionMessageContainer_RestrictionMessage_root_c3f {
  font-size: var(--fontSizeSmall);
  width: auto;
}

.RestrictionMessageContainer_RestrictionMessage_expanded_b1e .RestrictionMessageContainer_RestrictionMessage_expandableBody_04c {
  display: block;
}

/* TODO: Remove these js-restriction-message styles after V1 Modal is no longer needed */
.modal-body.js-restriction-message .RestrictionMessageContainer_RestrictionMessage_modal_100,
.modal-body .js-restriction-message .RestrictionMessageContainer_RestrictionMessage_modal_100 {
  margin: calc(-1 * var(--modalBodyPadding)); /* Remove V1 Modal padding */
}

.modal-body .js-restriction-message:not(:last-child) .RestrictionMessageContainer_RestrictionMessage_modal_100 {
  margin-bottom: var(--modalBodyPadding);
  border-bottom-width: 1px;
}

.RestrictionMessageContainer_RestrictionMessage_modal_100,
.RestrictionMessageContainer_RestrictionMessage_modalStart_235,
.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe {
  padding: 0;
  margin: 0;
  border-radius: 0;
  border-width: 0;
}

:is(.RestrictionMessageContainer_RestrictionMessage_modal_100,.RestrictionMessageContainer_RestrictionMessage_modalStart_235,.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe):is(.RestrictionMessageContainer_RestrictionMessage_modal_100,.RestrictionMessageContainer_RestrictionMessage_modalStart_235,.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe) .RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85 {
    margin: 0;
    background-color: var(--white);
  }

:is(.RestrictionMessageContainer_RestrictionMessage_modal_100,.RestrictionMessageContainer_RestrictionMessage_modalStart_235,.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe):is(.RestrictionMessageContainer_RestrictionMessage_modal_100,.RestrictionMessageContainer_RestrictionMessage_modalStart_235,.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe) .RestrictionMessageContainer_RestrictionMessage_footer_a23,:is(.RestrictionMessageContainer_RestrictionMessage_modal_100,.RestrictionMessageContainer_RestrictionMessage_modalStart_235,.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe):is(.RestrictionMessageContainer_RestrictionMessage_modal_100,.RestrictionMessageContainer_RestrictionMessage_modalStart_235,.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe) .RestrictionMessageContainer_RestrictionMessage_title_d5f {
    padding: 14px;
  }

:is(.RestrictionMessageContainer_RestrictionMessage_modal_100,.RestrictionMessageContainer_RestrictionMessage_modalStart_235,.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe):is(.RestrictionMessageContainer_RestrictionMessage_modal_100,.RestrictionMessageContainer_RestrictionMessage_modalStart_235,.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe) .RestrictionMessageContainer_RestrictionMessage_footer_a23 {
    padding-top: 0;
  }

:is(.RestrictionMessageContainer_RestrictionMessage_modal_100,.RestrictionMessageContainer_RestrictionMessage_modalStart_235,.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe):is(.RestrictionMessageContainer_RestrictionMessage_modal_100,.RestrictionMessageContainer_RestrictionMessage_modalStart_235,.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe) .RestrictionMessageContainer_RestrictionMessage_title_d5f {
    padding-bottom: 0;
  }

:is(.RestrictionMessageContainer_RestrictionMessage_modal_100,.RestrictionMessageContainer_RestrictionMessage_modalStart_235,.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe):is(.RestrictionMessageContainer_RestrictionMessage_modal_100,.RestrictionMessageContainer_RestrictionMessage_modalStart_235,.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe) .RestrictionMessageContainer_RestrictionMessage_usersListCaption_1fa {
    padding: 4px 14px 14px 14px;
  }

.RestrictionMessageContainer_RestrictionMessage_modalStart_235 {
  border-bottom-width: 1px;
}

.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe {
  border-top-width: 1px;
}

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

.RestrictionMessageContainer_RestrictionMessage_expandableBody_04c {
  display: none;
  color: var(--colorTextDefault);
}

.RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85.RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85 {
    margin: 10px -15px;
  }

.RestrictionMessageContainer_RestrictionMessage_usersList_b4d {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

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

.RestrictionMessageContainer_RestrictionMessage_userRow_c6e:last-child {
    border-bottom: 1px solid var(--borderDefault);
  }

.RestrictionMessageContainer_RestrictionMessage_avatarCell_cfc,
.RestrictionMessageContainer_RestrictionMessage_nameCell_0b8,
.RestrictionMessageContainer_RestrictionMessage_phoneCell_f88,
.RestrictionMessageContainer_RestrictionMessage_emailCell_c05 {
  padding: 5px 5px;
}

.RestrictionMessageContainer_RestrictionMessage_nameCell_0b8 {
  font-weight: var(--fontWeightBold);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.RestrictionMessageContainer_RestrictionMessage_avatarCell_cfc {
  padding-left: 15px;
  width: 25px;
  box-sizing: content-box;
}

.RestrictionMessageContainer_RestrictionMessage_emailCell_c05 {
  width: 33%;
  padding-right: 15px;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.RestrictionMessageContainer_RestrictionMessage_phoneCell_f88 {
  width: 33%;
}

.RestrictionMessageContainer_RestrictionMessage_footer_a23 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

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

.RestrictionMessageContainer_RestrictionMessage_footerBtn_d6f {
  margin-right: 15px;
}

.RestrictionMessageContainer_RestrictionMessage_footerLink_dbf {
  line-height: 30px;
}

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

.EmailSendAsSelect_identity_96b {
  display: flex;
  white-space: nowrap;
}

.EmailSendAsSelect_avatar_79c {
  margin-right: 8px;
  align-self: center;
  flex: 0 0 auto;
}

.EmailSendAsSelect_name_865 {
  font-size: var(--fontSizeSmall);
  margin-right: 6px;
}

.EmailSendAsSelect_email_24f {
  overflow: hidden;
  text-overflow: ellipsis;
}

.EmailSendAsSelect_loaderContainer_4c6 {
  display: flex;
  padding: 0 8px;
  align-items: center;
  height: 32px; /* match height of small select */
}

.UserSelect_button_98d {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.UserSelect_button_98d.UserSelect_isDisabled_595 {
    pointer-events: none;
  }

/* equivalent of Btn__text in regular Button atoms */
.UserSelect_buttonLabel_326 {
  overflow: hidden;
  text-overflow: ellipsis;
}

.UserSelect_userSelectLabel_0b4 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.UserSelect_groupMemberCount_cec {
  display: inline-block;
  font-size: 12px;
  color: var(--colorTextLight);
  margin-left: 8px;
  align-self: end;
}

.WorkflowSubscriptionModal_FormSection_section_160 {
  padding: var(--modalBodyPadding);
  border-top: 1px solid var(--borderDefault);
  margin-top: -1px;
}

.WorkflowSubscriptionModal_OptionalAutomatedExceptionLabel_warningIcon_ec3 {
  fill: var(--bgWarn);
}

.BulkWorkflowSubscribeModal_BulkWorkflowSubscribeForm_fromToColumns_02f {
  display: flex;
  flex-wrap: wrap;
}

.BulkWorkflowSubscribeModal_BulkWorkflowSubscribeForm_fromToColumns_02f  > * {
    flex: 1 0 calc(50% - var(--modalBodyPadding) * 2);
  }

.BulkWorkflowSubscribeModal_BulkWorkflowSubscribeForm_loaderContainer_991 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0px;
  border-top: 1px solid var(--borderDefault);
  margin-top: -1px;
}

.BulkWorkflowSubscribeModal_BulkWorkflowSubscribeForm_fullWidth_bf2 {
  flex: 1 0 calc(100% - var(--modalBodyPadding) * 2);
}

/* TODO: identical to WorkflowSubscriptionForm */
.BulkWorkflowSubscribeModal_BulkWorkflowSubscribeForm_fieldText_80b {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 0; /* To match the height of the select */
}

.ContentLoader_contentLoader_879 {
  min-height: 50px;
}

.ContentLoader_content_658 {
  transition: all 200ms var(--standardCurve);
}

.ContentLoader_active_1f6 {
  position: relative;
}

.ContentLoader_active_1f6 .ContentLoader_content_658 {
    opacity: 0;
    pointer-events: none;
    height: 0;
  }

.ContentLoader_spinnerWrapper_6b9 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  color: var(--colorIconLight);
}

.ContentLoader_spinner_94c {
  margin-right: 5px;
}

.BulkEmailPreviewControls_main_484 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  white-space: nowrap;
  border-bottom: 1px solid var(--borderDefault);
}

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

.BulkEmailPreviewControls_totalIcon_7e6 {
  margin-right: 8px;
  color: var(--gray-50);
}

.BulkEmailPreviewControls_nav_7ed {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 8px;
  /* The icons in the nav are baked at 24px height with whitespace included, however we
     want our base nav height to be 16px. Pull them into place with a neg v margin. */
  margin: -3px 0;
}

.BulkEmailPreviewControls_toFrom_6e2 {
  background: var(--surfaceBackgroundMedium);
  padding: 0 16px;
}

.BulkEmailPreviewControls_to_0e6,
.BulkEmailPreviewControls_from_ca7 {
  padding: 8px 0;
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 40px 1fr;
}

:is(.BulkEmailPreviewControls_to_0e6,.BulkEmailPreviewControls_from_ca7):not(:last-child) {
    border-bottom: solid 1px var(--borderLight);
  }

.UnsubscribeWarning_warningIcon_0d5 {
  color: var(--bgWarn);
}

.ToDetails_main_56f {
  background: var(--surfaceBackgroundLight);
  padding: var(--spacing-8) var(--spacing-12);
}

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

.ToDetails_to_46f {
  display: grid;
  grid-gap: var(--spacing-8);
  grid-template-columns: var(--spacing-48) 1fr auto;
  white-space: nowrap;
}

.ToDetails_emailNamePair_eb6 {
  display: grid;
  grid-row-gap: var(--spacing-4);
  grid-auto-flow: row;
}

.ToDetails_ToDetailsEmailRecipients_to_cd4 {
  display: grid;
  grid-gap: var(--spacing-8);
  grid-template-columns: var(--spacing-48) 1fr auto;
  white-space: nowrap;
}

.ToDetails_ToDetailsEmailRecipients_emailNamePair_785 {
  display: grid;
  grid-row-gap: var(--spacing-4);
  grid-auto-flow: row;
}

.ToDetails_ToDetailsLabel_label_11e {
  width: var(--spacing-48);
}

.ToDetails_ToDetailsUserInformation_userInfo_78e {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ToDetails_ToDetailsUserInformation_userInfoIcon_a32 {
  color: var(--gray-50);
}

.ToDetails_ToDetailsUserInformation_warningContainer_557 {
  width: 14px;
  display: flex;
  align-items: center;
}

.ToDetails_ToDetailsLeadName_leadName_97c {
  color: var(--gray-50);
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.ToDetails_ToDetailsLeadName_name_1e1 {
  max-width: 160px;
  text-overflow: ellipsis;
  line-height: 0;
  overflow: hidden;
  white-space: nowrap;
}

.WorkflowStepItem_item_37a {
  --focusedBorderShadow: 0 0 3px var(--borderFocused);
  --focusedBorderColor: var(--borderFocused);

  border-bottom: 1px solid var(--borderDefault);
}

.WorkflowStepItem_item_37a:last-child {
    border: none;
  }

.WorkflowStepItem_item_37a.WorkflowStepItem_sent_2e2 {
    color: var(--colorIconLight);
    background: var(--surfaceBackgroundMedium);
  }

.WorkflowStepItem_divider_7af {
  --dividerBg: var(--borderDefault);

  display: block;
  height: 2px;
  background: var(--dividerBg);
  border-style: solid;
  border-color: var(--borderDefault);
  border-width: 1px 0;
}

.WorkflowStepItem_isExpandable_95f .WorkflowStepItem_header_345 {
    cursor: pointer;
  }

.WorkflowStepItem_header_345 {
  display: flex;
  align-items: center;
  padding: var(--spacing-12);
  box-sizing: border-box;
  border: 1px solid transparent;

  cursor: default;
}

.WorkflowStepItem_header_345:focus {
    outline: none;
    border: 1px solid var(--focusedBorderColor);
    box-shadow: var(--focusedBorderShadow);
  }

.WorkflowStepItem_isDeleted_0f5 {
  position: relative;
}

.WorkflowStepItem_isDeleted_0f5::after {
    content: ' ';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--colorTextMedium);
  }

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

.WorkflowStepItem_check_25f {
  margin-right: var(--spacing-4);
}

.WorkflowStepItem_toggle_04d {
  display: flex;
  transition: transform 200ms var(--standardCurve);
}

.WorkflowStepItem_toggle_04d.WorkflowStepItem_isExpanded_a5a {
    transform: rotate(90deg);
  }

.WorkflowStepItem_handle_154 {
  opacity: 0.3;
  line-height: 0;
}

.WorkflowStepItem_handle_154.WorkflowStepItem_sent_2e2 {
    opacity: 0.9;
  }

.WorkflowStepItem_isExpandable_95f .WorkflowStepItem_handle_154 {
    opacity: 1;
  }

.WorkflowStepItem_stepNumber_6b2 {
  min-width: 16px;
  opacity: 0.5;
  display: flex;
  justify-content: center;
}

.WorkflowStepItem_nameItem_6bb {
  overflow: hidden;
  gap: var(--spacing-8);
  flex: 1;
  display: flex;
  align-items: center;
}

.WorkflowStepItem_date_8ab {
  font-size: 90%;
  white-space: nowrap;
}

.WorkflowStepItem_clockIcon_af4 {
  vertical-align: middle;
  margin: -8px -8px -7px -8px; /* center vertically */
}

.WorkflowStepItem_svgIcon_4d7 {
  vertical-align: text-bottom;
  display: inline-block;
  color: var(--colorIconLight);
}

.WorkflowStepItem_delayExtendedHeader_a3a {
  display: block;
  font-weight: var(--fontWeightBold);
}

.WorkflowStepItem_bodyContainer_cb7 {
  padding: var(--spacing-4) var(--spacing-16) var(--spacing-24)
    var(--spacing-16);
}

.WorkflowStepItem_fixedWidthLabel_f2c {
  width: 50px;
}

.WorkflowStepItem_reply_9cf {
  margin-right: var(--spacing-4);
  vertical-align: baseline;
}

.WorkflowStepItem_bodyTitle_fc3 {
  font-weight: var(--fontWeightBold);
  margin-bottom: var(--spacing-16);
}

.WorkflowStepItem_delayDetails_819 {
  color: var(--colorTextLight);
}

.WorkflowStepItem_required_ae9 {
  margin-left: var(--spacing-8);
  line-height: 1;
}

.WorkflowStepItem_deletedIcon_85f {
  margin: 0 6px;
}

.WorkflowStepItem_call_341,
.WorkflowStepItem_task_9b5,
.WorkflowStepItem_setLeadStatus_781 {
  display: flex;
}

.WorkflowStepItem_skippedTag_4a5 {
  min-width: 80px;
  line-height: 0;
}

.WorkflowStepItem_attachmentsWrapper_a89 {
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--borderDefault);
}

.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);
    }

.TemplateInput_Reference_reference_085 {
  align-items: center;
  background-color: var(--bgInformationalMuted);
  border-radius: 3px;
  color: var(--colorTextInformational);
  display: inline-flex;
  font-size: var(--fontSizeSmall);
  height: 16px;
  justify-content: center;
  padding: 0 2px;
}

.TemplateInput_Reference_reference_085.TemplateInput_Reference_noBackground_ef3 {
    background-color: transparent;
  }

.TemplateInput_Reference_token_3d4 [role='button'] {
  background-color: var(--bgInformationalMuted);
}

:is(.TemplateInput_Reference_token_3d4 [role='button']) .TemplateInput_Reference_reference_085 {
    background-color: transparent;
    padding: 0;
  }


  .Enrich_enrichIcon_136,.Enrich_enrichIcon_136 svg {
    width: 16px;
    height: 16px;
  }

.HTMLIframe_HTMLRealIframe_frame_c48 {
  margin: 0;
  white-space: pre-wrap;
  border: 0;
  width: 100%;
  height: 20px;
  background: transparent;
  /* https://stackoverflow.com/a/69671458/1493544 */
  color-scheme: normal;
}.HTMLIframe_HTMLRealIframe_frame_c48.HTMLIframe_HTMLRealIframe_isLoading_e60 {
    opacity: 0;
    pointer-events: none;
  }

.HTMLIframe_HTMLTextIframe_frame_8f8 {
  font-size: 13px;
}

.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: 3px;
  box-shadow: var(--shadowLevel1);
  color: var(--colorTextDefault);
}

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

.AttachmentTiles_AttachmentTile_tile_b15:focus {
    /* TODO: possibly a lil nice blue border */
  }

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);
}

.TruncateHeight_wrapper_56c {
  box-sizing: border-box;
  position: relative;
  align-self: stretch;
}

.TruncateHeight_content_7d2 {
  position: relative;
  overflow: hidden;
  transition: height 200ms var(--standardCurve);
}

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

.TruncateHeight_gradient_46e {
  pointer-events: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: min(50px, 50%);
  background: linear-gradient(
    to top,
    var(--surfaceBackgroundDefault) 0,
    transparent 100%
  );
}

.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);
  }

.CallButton_callButton_9b4 {
  vertical-align: baseline; /* Make it nicely aligned when inlined in text. */
}

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

.WorkflowStepItem_RunAsPreviewAvatar_icon_1a8 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--borderDefault);
  color: var(--colorIconLight);
}

.WorkflowStepItem_RunAsPreviewAvatar_icon_1a8 svg {
    width: 10px;
    height: 10px;
  }

.WorkflowStepItem_RunAsPreviewAvatar_helpCircleIcon_4f9 {
  display: flex;
  color: var(--colorIconLight);
}

.WorkflowStepItem_RunAsPreviewAvatar_helpCircleIcon_4f9 svg {
    width: 18px;
    height: 18px;
  }

.WorkflowSubscriptionModal_WorkflowsLoadingModalBody_loaderContainer_bf0 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.Screen {
  padding: 0 !important; /* overwrite .app-content 20px padding */
}.Screen.is-fullHeight  > div:not(.dockedElement) {
      display: flex;
      width: 100%;
    }


  @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;
}


  .AISearchNotes_generatedNotesStyles_574 p {
    font-weight: 700;
    font-size: 14px;
    color: var(----colorTextDefault);
  }.AISearchNotes_generatedNotesStyles_574 ul {
    color: var(--colorTextMedium);
  }

.FilterTokensBar_main_da4 {
  border-bottom: 1px solid var(--borderDefault);
  background-color: var(--surfaceBackgroundDefault);
}

.FilterTokensBar_linkToOldPage_432 {
  color: var(--gray-40);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.FilterTokensBar_controls_a3b {
  background: var(--surfaceBackgroundDefault);
  height: 40px;
  box-sizing: border-box;
}

.FilterTokensBar_filtersContainer_88d {
  width: 100%;
  flex: 0 0 auto;
}

.FilterTokensBar_filtersContainer_88d.FilterTokensBar_hidden_c0b {
    display: none;
  }


  /* Badge height is higher than line-height when button is small. *//* This is to make sure the badge is vertically centered. */.FilterTokensBar_Buttons_filtersButton_ea4 .Btn__text {
    display: flex;
    gap: var(--spacing-8);
  }.FilterTokensBar_Buttons_filtersButton_ea4 svg {
    transform: rotate(0);
    transition: transform 0.1s ease-in;
  }.FilterTokensBar_Buttons_filtersButton_ea4.FilterTokensBar_Buttons_open_86a svg {
      transform: rotate(90deg);
    }

.FilterTokensBar_MatchBar_matchBarContainer_146 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-8) var(--spacing-16);
  border-top: 1px solid var(--borderDefault);
  border-bottom: 1px solid var(--borderLight);
  background-color: var(--bgLightMuted);
  font-size: var(--fontSizeSmall);
}

.FilterTokensBar_MatchBar_matchBarContainer_146.FilterTokensBar_MatchBar_withMinWidth_297 {
    /* So filters can be horizontally scrollable on smaller screens rather than taking */
    /* a lot of space vertically */
    min-width: 600px;
  }

.FilterTokensBar_MatchBar_matchBar_581 {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.FilterTokensBar_MatchBar_triggerMatchBarRow_866 {
  display: flex;
  gap: var(--spacing-4);
  flex-direction: row;
  align-items: center;

  /* match height of inputs within to ensure consistent height regardless of if there are inputs or not */
  min-height: var(--inputHeightSmall);
}

.FilterTokensBar_MatchSelect_wrapper_1eb {
  max-width: 100px;
}

.FilterTokensBar_MatchSelect_item_e7b {
  display: grid;
  row-gap: 4px;
  max-width: 160px;
  margin: 2px 0;
}

.FilterTokensBar_MatchSelect_label_7f1 {
  font-size: 14px;
  line-height: 16px;
}

.FilterTokensBar_MatchSelect_description_31f {
  color: var(--colorTextLight);
}

.FilterTokensBar_MatchSelect_description_31f,
.FilterTokensBar_MatchSelect_legend_d79 {
  font-size: 13px;
  line-height: 16px;
}

.Operator_operator_2ec {
  font-size: 9px;
  color: var(--colorTextMedium);
  display: inline-block;
  background: var(--bgDefault);
  padding: 0px 8px;
  border-radius: 16px;
  text-transform: uppercase;
  font-weight: var(--fontWeightBold);
  line-height: 16px;
}.Operator_operator_2ec.Operator_token_b69 {
    font-size: 10px;
    color: var(--colorTextDefault);
  }

.FilterTokensBar_MultiRowTokensDisplay_controls_47a {
  height: 40px;
  box-sizing: border-box;
}

.FilterTokensBar_MultiRowTokensDisplay_controls_47a.FilterTokensBar_MultiRowTokensDisplay_withExtraContent_7b0 {
    justify-content: space-between;
  }

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

.FilterTokensBar_MultiRowTokensDisplay_controls_47a.FilterTokensBar_MultiRowTokensDisplay_withExtraContent_7b0 {
      height: auto;
      gap: 12px;
      justify-content: start;
      padding-top: var(--spacing-8);
      padding-bottom: var(--spacing-8);
  }
    }

.FilterTokensBar_MultiRowTokensDisplay_scrollContainer_9ac {
  display: flex;
  flex-direction: column;
  overflow: auto;
  scrollbar-width: none;
}

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

.Token_name_b18 {
  display: flex;
}

.Token_filterToken_d49 {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  align-items: center;
}

.Token_truncate_0d2 {
  display: block;
  max-width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.Token_badge_030 {
  line-height: 0;
}

.OpportunityStatusLabel_dot_622 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.OpportunityStatusLabel_dot_622.OpportunityStatusLabel_active_478 {
    background-color: var(--colorGold20);
  }

.OpportunityStatusLabel_dot_622.OpportunityStatusLabel_won_dc2 {
    background-color: var(--colorGreen20);
  }

.OpportunityStatusLabel_dot_622.OpportunityStatusLabel_lost_22b {
    background-color: var(--bgDefault);
  }

.OpportunityStatusLabel_statusLabel_507 {
  max-width: 275px;
}

.TokenType_graphicalTokens_value_c5f {
  --max-width: 150px;

  font-weight: var(--fontWeightBold);
  max-width: var(--max-width);
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}

.TokenType_graphicalTokens_dateTimeCustomWidth_8bd > .TokenType_graphicalTokens_value_c5f {
  --max-width: 250px;
}

.FilterTokensBar_FilterGroup_group_348 {
  --height: 28px;
  --itemMargin: 2px 0 2px 8px;
}

.FilterTokensBar_FilterGroup_matchSelect_ab1 {
  margin: var(--itemMargin);
  height: 28px;
  display: flex;
  align-items: center;
}

.FilterTokensBar_FilterGroup_tokens_205 {
  display: flex;
  flex-wrap: wrap;

  /* When the group has other groups, we change the flex direction to column and */
  /* add a pseudo-element besides every inner group for showing a tree-like UI. */
}

.FilterTokensBar_FilterGroup_tokens_205.FilterTokensBar_FilterGroup_nested_49f {
    flex-direction: column;
    width: 100%;
  }

.FilterTokensBar_FilterGroup_tokens_205.FilterTokensBar_FilterGroup_nested_49f .FilterTokensBar_FilterGroup_group_348 {
      position: relative;
      margin-left: 16px;
      padding-left: 29px;
      border-left: 1px solid var(--borderDefault);
      box-sizing: border-box;
    }

:is(.FilterTokensBar_FilterGroup_tokens_205.FilterTokensBar_FilterGroup_nested_49f .FilterTokensBar_FilterGroup_group_348):last-of-type {
        border-left: 1px solid transparent;
      }

:is(.FilterTokensBar_FilterGroup_tokens_205.FilterTokensBar_FilterGroup_nested_49f .FilterTokensBar_FilterGroup_group_348)::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -1px;
        height: 24px;
        width: 20px;
        border-left: 1px solid var(--borderDefault);
        border-bottom: 1px solid var(--borderDefault);
      }

.FilterTokensBar_FilterGroup_break_474 {
  flex-basis: 100%;
  height: 0;
}

.FilterTokensBar_FilterGroup_tokenWrapper_632 {
  margin: var(--itemMargin);
  display: flex;
  align-items: center;
}

.FilterTokensBar_FilterGroup_addBtn_aa8,
.FilterTokensBar_FilterGroup_inlineButtons_0e5,
.FilterTokensBar_FilterGroup_groupOperator_359 {
  height: var(--height);
  display: flex;
  align-items: center;
  margin: var(--itemMargin);
}

.FilterTokensBar_FilterGroup_lastTokenWrapper_c54 {
  display: flex;
  align-items: center;
}

.FilterTokensBar_FilterGroup_queryOperator_42c {
  height: var(--height);
  display: flex;
  align-items: center;
  margin-right: 8px;
}

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

.FilterTokensBar_FilterGroup_tokensContainer_158 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.FilterTokensBar_FilterGroup_group_348:hover  > .FilterTokensBar_FilterGroup_addGroupBtn_797 {
    opacity: 1;
  }

.FilterTokensBar_FilterGroup_tokensContainer_158:hover  > .FilterTokensBar_FilterGroup_inlineButtons_0e5,.FilterTokensBar_FilterGroup_tokensContainer_158:hover  > .FilterTokensBar_FilterGroup_tokens_205 > .FilterTokensBar_FilterGroup_lastTokenWrapper_c54 > .FilterTokensBar_FilterGroup_inlineButtons_0e5,.FilterTokensBar_FilterGroup_tokensContainer_158:hover  > .FilterTokensBar_FilterGroup_tokens_205 > .FilterTokensBar_FilterGroup_inlineButtons_0e5 {
    opacity: 1;
  }

:is(.FilterTokensBar_FilterGroup_tokensContainer_158:hover > .FilterTokensBar_FilterGroup_inlineButtons_0e5,.FilterTokensBar_FilterGroup_tokensContainer_158:hover > .FilterTokensBar_FilterGroup_tokens_205 > .FilterTokensBar_FilterGroup_lastTokenWrapper_c54 > .FilterTokensBar_FilterGroup_inlineButtons_0e5,.FilterTokensBar_FilterGroup_tokensContainer_158:hover > .FilterTokensBar_FilterGroup_tokens_205 > .FilterTokensBar_FilterGroup_inlineButtons_0e5)  > .FilterTokensBar_FilterGroup_removeGroupBtn_872 {
      opacity: 0.25;
    }

.FilterTokensBar_FilterGroup_addGroupBtn_797,
.FilterTokensBar_FilterGroup_inlineButtons_0e5,
.FilterTokensBar_FilterGroup_removeGroupBtn_872 {
  transition: opacity 200ms var(--standardCurve);
  opacity: 0;
}

:is(.FilterTokensBar_FilterGroup_addGroupBtn_797,.FilterTokensBar_FilterGroup_inlineButtons_0e5,.FilterTokensBar_FilterGroup_removeGroupBtn_872):hover {
    opacity: 1 !important;
  }

.FilterTokensBar_FilterGroupTitle_groupTitle_500 {
  line-height: 28px;
  display: flex;
  align-items: center;
  justify-items: start;
  flex: 0 0 auto;
}.FilterTokensBar_FilterGroupTitle_groupTitle_500  > span {
    color: var(--colorTextMedium);
  }.FilterTokensBar_FilterGroupTitle_groupTitle_500:first-child::first-letter {
    text-transform: uppercase;
  }

.FilterTokensBar_Group_group_39f {
  display: flex;
  font-size: 13px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: var(--spacing-4);
}.FilterTokensBar_Group_group_39f .FilterTokensBar_Group_minWidth_71d {
    /* So filters can be horizontally scrollable on smaller screens rather than taking */
    /* a lot of space vertically */
    min-width: 600px;
  }

.SearchResultsLimit_root_c82 {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex-shrink: 0;
  padding: 0 var(--spacing-8);
}

.SearchResultsLimit_root_c82.SearchResultsLimit_withIcon_ed9 {
    padding: 0;
  }

.SearchResultsLimit_popoverContent_49a {
  padding: var(--spacing-12);
  position: relative;
}

.SearchResultsLimit_clearButtonContainer_60f {
  position: absolute;
  right: var(--spacing-12);
  top: var(--spacing-12);
}

.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;
  }

.ResultsTitle_title_464 {
  display: flex;
}

.ResultsTitle_nonSavedTitle_df2 {
  color: var(--colorTextMedium);
}

.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;
  }

.Tabs_tabs_a5a {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid var(--borderDefault);
}

.Tabs_tabs_a5a:not(.Tabs_fitted_177) {
    justify-content: flex-start;
    grid-template-columns: min-content;
    gap: var(--spacing-20);
  }

.Tabs_tab_b33 {
  display: block;
}

.Tabs_tabButton_ec0 {
  position: relative;
  display: flex;
  align-items: center;
  appearance: none;
  background: none;
  border: none;
  white-space: nowrap;
  padding: 0 0 10px;
  color: var(--colorTextLight);
}

.Tabs_fitted_177 .Tabs_tabButton_ec0 {
    width: 100%;
    justify-content: center;
  }

.Tabs_tabButton_ec0::after {
    content: '';
    position: absolute;
    display: block;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 1px;
    background-color: transparent;
  }

.Tabs_tabButton_ec0.Tabs_active_8ca,.Tabs_tabButton_ec0:hover {
    outline: none;
    color: var(--colorTextDefault);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

:is(.Tabs_tabButton_ec0.Tabs_active_8ca,.Tabs_tabButton_ec0:hover) .Tabs_badge_74e,:is(.Tabs_tabButton_ec0.Tabs_active_8ca,.Tabs_tabButton_ec0:hover) .Tabs_icon_24c {
      color: var(--colorTextDefault);
    }

/* reset focus styles when tab is a link */

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

.Tabs_tabButton_ec0.Tabs_active_8ca::after {
    background-color: var(--colorTextDefault);
  }

.Tabs_tabButton_ec0:not(.Tabs_active_8ca):hover::after {
    background-color: var(--borderHover);
  }

.Tabs_badgeWrap_2c2 {
  margin-left: 6px;
  vertical-align: bottom;
  min-width: 1em;
  line-height: 1;
}

/* This is essentially the `outlined` variant of Badge, but we're using
   BaseBadge instead so we can apply different active/inactive styles */
.Tabs_badge_74e {
  border-color: var(--bgDefaultMuted);
  color: var(--colorTextLight);
  background-color: var(--bgDefaultMuted);
}


  .SmartViewSelect_button_8e5.SmartViewSelect_isDisabled_53e {
    pointer-events: none;
  }.SmartViewSelect_button_8e5 svg {
    width: 16px;
    height: 16px;
  }

.CallDirectionFilter_button_07f {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  border-radius: 7px;
}

.CallDirectionFilter_button_07f .Btn__text {
    flex: 1;
  }

.CallDirectionFilter_button_07f.CallDirectionFilter_isDisabled_c10 {
    pointer-events: none;
  }

.CallDirectionFilter_button_07f svg {
    width: 16px;
    height: 16px;
  }

.CallDirectionFilter_label_be4 label {
    margin: 0;
  }


  .DurationFilter_label_8da label {
    margin: 0;
  }

.DurationFilter_operatorSelect_b56 {
  width: 110px;
}

.DurationFilter_operatorSelect_b56.DurationFilter_compact_b57 {
    flex: 1;
    width: auto;
  }

.DurationFilter_durationInputContainer_f43 {
  position: relative;
}

.DurationFilter_durationInput_603 {
  width: 120px;
}

.DurationFilter_durationInput_603.DurationFilter_compact_b57 {
    flex: 1;
    width: auto;
  }

.DurationFilter_minutesLabel_b94 {
  pointer-events: none;
  position: absolute;
  right: 8px;
  text-align: right;
  top: 6px;
}

.ActivitiesFilters_HasRecordingFilter_recordingToggle_261 {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: var(--spacing-8);
  justify-content: space-between;
}

.ActivitiesFilters_HasRecordingFilter_recordingToggleText_62d {
  align-items: center;
  display: flex;
  gap: var(--spacing-4);
  flex: 1;
}

.ActivitiesFilters_HasRecordingFilter_hintIcon_7d0 {
  margin: 0;
}

.ActivitiesFilters_HasRecordingFilter_withOutline_4a2 {
  border-radius: 7px;
  border: 1px solid var(--borderDefault);
  min-height: 40px;
  padding: var(--spacing-12);
}

.subcomponents_HelpText_addIcon_85d {
  color: var(--colorLinkDefault);
}

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

.subcomponents_PhraseInput_phraseText_9db {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subcomponents_PhraseInput_phraseInput_922 {
  background-color: var(--surfaceBackgroundDefault);
  border: none;
  color: var(--colorTextDefault);
  height: 24px;
  flex: 1;
  font-size: var(--fontSizeSmall);
  line-height: 16px;
  min-width: 250px;
}

.subcomponents_PhraseInput_phraseInput_922:focus {
    outline: none;
  }

.subcomponents_PhraseInput_phraseInput_922::placeholder {
    color: var(--colorTextLight);
  }

.subcomponents_PhraseInput_phraseInput_922:disabled {
    background-color: var(--formBackgroundDisabled);
  }

.PhraseSearchInput_inputWrapper_fb5 {
  background-color: var(--surfaceBackgroundDefault);
  border: 1px solid var(--borderLight);
  border-radius: 7px;
  box-sizing: border-box;
  display: flex;
  min-height: 42px;
  padding: var(--spacing-8) var(--spacing-12);
  gap: 8px;
}

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

.PhraseSearchInput_operatorWrapper_a11 {
  text-align: center;
  width: 100px;
}

.PhraseSearchInput_disabledWrapper_64d {
  background-color: var(--formBackgroundDisabled);
}


  .SmartViewFilter_label_784 label {
    margin: 0;
  }

.SmartViewFilter_fullWidthTrigger_d67 {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}

.SmartViewFilter_fullWidthTrigger_d67 .Btn__text {
    flex: 1;
  }


  .TalkTimeFilter_label_d56 label {
    margin-bottom: 0;
  }

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

.TalkTimeFilter_operatorSelect_e64 {
  width: 160px;
}

.TalkTimeFilter_operatorSelect_e64.TalkTimeFilter_compact_42c {
    flex: 1;
    width: auto;
  }

.TalkTimeFilter_talkTimeInputContainer_c80 {
  position: relative;
}

.TalkTimeFilter_talkTimeInput_a1b {
  width: 55px;
}

.TalkTimeFilter_talkTimeInput_a1b.TalkTimeFilter_compact_42c {
    flex: 1;
    width: auto;
  }

.TalkTimeFilter_percentageLabel_729 {
  pointer-events: none;
  position: absolute;
  right: 8px;
  text-align: right;
  top: 50%;
  transform: translateY(-50%);
}


  .UserOrGroupFilter_label_30e label {
    margin: 0;
  }

.UserOrGroupFilter_fullWidthTrigger_764 {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}

.UserOrGroupFilter_fullWidthTrigger_764  > span {
    flex: 1;
  }

.ConversationsFilters_wrapper_cfe {
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-16) var(--spacing-20);
  box-sizing: border-box;
  background-color: var(--surfaceBackgroundMedium);
}

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

.ConversationsFilters_wrapper_cfe {
    padding: 0;
}
  }

.ConversationsFilters_filtersCountBadge_604 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--white);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
  background-color: var(--colorLinkDefault);
  font-size: 11px;
  margin: 0 5px 0 -5px;
}

.ConversationsFilters_popoverContainer_3d3 label {
    margin: 0;
  }

.ConversationsHistory_container_282 {
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-20);
  box-sizing: border-box;
}

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

.ConversationsHistory_container_282 {
    padding: 0;
}
  }

.ConversationsHistory_list_188 {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-16);
}

.ConversationsHistory_list_188:not(.ConversationsHistory_isEmpty_853)::before {
    content: '';
    display: block;
    position: absolute;
    margin: 0 0 0 17px;
    height: 100%;
    width: 1px;
    background: var(--borderDefault);
  }

@media screen and (max-width: 767px) {
    .ConversationsHistory_list_188::before {
      display: none;
    }
  }

.ConversationsHistory_conversationSkeleton_9bc {
  position: relative;
  overflow: hidden;
  max-width: 800px;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
}

.ConversationsHistory_conversationSkeletonActivityIcon_acd {
  background-color: var(--surfaceBackgroundMedium);
}

.ConversationsHistory_converationSkeletonContent_459 {
  flex: 1;
  background-color: var(--surfaceBackgroundDefault);
  border-radius: var(--activityBorderRadius);
}

.ConversationsHistory_filterTrayButton_f07 {
  position: relative;
}

.ConversationsHistory_appliedFiltersBadge_e6f {
  pointer-events: none;
  display: flex;
  position: absolute;
  right: 0;
  bottom: -2px;
  border-radius: 50%;
  border: 2px solid var(--white);
}

.LiveCallsFilters_wrapper_184 {
  background-color: var(--surfaceBackgroundDefault);
  border-bottom: 1px solid var(--borderDefault);
}.LiveCallsFilters_wrapper_184.LiveCallsFilters_compact_da4 {
    background-color: unset;
  }

.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);
  }.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);
  }

.UpcomingMeetings_UpcomingMeetingCard_root_10d {
  display: block;
}

.UpcomingMeetings_UpcomingMeetingCard_root_10d.UpcomingMeetings_UpcomingMeetingCard_loading_82a {
    opacity: 0.5;
  }

/* override link styling */

.UpcomingMeetings_UpcomingMeetingCard_root_10d,.UpcomingMeetings_UpcomingMeetingCard_root_10d:hover,.UpcomingMeetings_UpcomingMeetingCard_root_10d:focus {
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.UpcomingMeetings_UpcomingMeetingCard_dash_e3b {
  border-radius: 7px;
  background-color: var(--colorBgMeetingBar);
  width: 6px;
}

.UpcomingMeetings_UpcomingMeetingCard_dash_e3b.UpcomingMeetings_UpcomingMeetingCard_past_f4b {
    background-color: var(--borderDefault);
  }

.UpcomingMeetings_UpcomingMeetingCard_dash_e3b.UpcomingMeetings_UpcomingMeetingCard_loading_82a {
    background-color: var(--bgSkeleton);
  }

.UpcomingMeetings_UpcomingMeetingCard_title_975 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.UpcomingMeetings_UpcomingMeetingCard_leadName_b9d {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.UpcomingMeetings_UpcomingMeetingCard_plusMore_6f6 {
  white-space: nowrap;
}

.UpcomingMeetings_UpcomingMeetingCard_badge_29d {
  color: var(--colorTextBadgeMeetingMuted);
  background-color: var(--colorBgBadgeMeetingMuted);
}

.ConversationsLive_skeleton_callsSection_7d7 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.ConversationsLive_skeleton_meetingsSidebar_3ec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 320px;
}

/* Shared in Wrapper and HoverActions */
.Activity_root_8f6 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  position: relative;
}

.Activity_inner_dad {
  display: flex;
}

.Activity_card_a8e {
  flex: 1;
  min-width: 0;
}

@media screen and (min-width: 768px) {
    .Activity_iconWrapper_c21 + .Activity_card_a8e {
      margin-left: var(--spacing-12);
    }
  }

@media screen and (max-width: 767px) {
  .Activity_iconWrapper_c21 {
    display: none;
  }
}

.Activity_isCollapsed_527 .Activity_iconWrapper_c21 {
    padding: 0 10px;
  }

.Activity_promoWithIcon_fa3 {
  /* width of icon section plus left margin of card */
  margin-left: calc(31px + var(--spacing-12));
}

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

.Activity_promoWithIcon_fa3 {
    margin-left: 0;
}
  }

/**
 * Use this global class when you need a component within an Activity to have this behavior:
 * hidden by default, visible when Activity is hovered, and visible always on mobile.
 */
.showOnActivityHover {
  visibility: hidden;
}
@media screen and (max-width: 767px) {
.showOnActivityHover {
    visibility: visible;
}
  }
.Activity:hover .showOnActivityHover {
    visibility: visible;
  }

.ActivityCard_root_6e4 {
  position: relative;
  border-radius: var(--activityBorderRadius);
  border: 1px solid var(--borderDefault);
  background: var(--bgCardBase);
  overflow: hidden;
}@media screen and (max-width: 767px) {.ActivityCard_root_6e4 {
    border-radius: 0;
    border-left: 0 none;
    border-right: 0 none;
}
  }.ActivityCard_root_6e4.ActivityCard_transparent_4fa {
    background: transparent;
    border: none;
  }


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

.Activity_TimeAgo_link_0cc {

  text-wrap: nowrap;
}

.Activity_TimeAgo_link_0cc time {
    color: var(--colorTextLight);
  }

.Activity_TimeAgo_link_0cc.Activity_TimeAgo_removeDash_c77 time {
      border-bottom: none;
    }

.Activity_TimeAgo_link_0cc.Activity_TimeAgo_noPointer_0c8 {
    cursor: text;
  }

.Activity_TimeAgo_link_0cc.Activity_TimeAgo_noPointer_0c8 time {
      cursor: inherit;
    }

.Activity_TimeAgo_link_0cc.Activity_TimeAgo_dashed_e7b {
    /* Using the verbose syntax here because the shorthand syntax doesn't work in Safari */
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--borderHover);
  }

.Activity_TimeAgo_link_0cc.Activity_TimeAgo_dashed_e7b:hover,.Activity_TimeAgo_link_0cc.Activity_TimeAgo_dashed_e7b:focus {
      -webkit-text-decoration: underline;
      text-decoration: underline;
      text-decoration-style: solid;
      text-decoration-color: var(--borderHover);
    }

.Activity_TimeAgo_noWrap_ec6:scope {
  text-wrap: nowrap;
}

.LeadActivities_LeadActivityList_list_ab9 {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--spacing-8);
  flex-basis: fit-content;
  min-width: 0;
  min-height: 0;
  padding-top: var(--spacing-8);
  background: var(--surfaceBackgroundMedium);
}

.LeadActivities_LeadActivityList_list_ab9.LeadActivities_LeadActivityList_hasLoaded_97b::before {
    content: '';
    margin: var(--spacing-8) 0 0 17px;
    height: calc(100% - var(--spacing-48));
    width: 1px;
    position: absolute;
    background: var(--borderDefault);
  }

.login_as .LeadActivities_LeadActivityList_list_ab9 {
    background-color: var(--colorLoginAsSurface);
  }

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

.LeadActivities_LeadActivityList_list_ab9 {
    /* Needed to fully align the icons of activities with the page header */
    margin-left: -3px;

    padding: var(--spacing-12) var(--spacing-24);
}

    .LeadActivities_LeadActivityList_list_ab9 .LeadActivities_LeadActivityList_withQuickViews_acc {
      padding-top: 0;
    }
  }

@media screen and (max-width: 767px) {
    .LeadActivities_LeadActivityList_list_ab9.LeadActivities_LeadActivityList_hasLoaded_97b::before {
      margin: var(--spacing-8) 0 0 25px;
    }
  }

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

.LeadActivities_LeadActivityList_iconSkeleton_5c6 {
  margin: 7px 0 0 3px;
  background: var(--surfaceBackgroundMedium);
}

.LeadActivities_LeadActivityList_summarySkeleton_197 {
  display: flex;
  justify-content: center;
  height: var(--leadLayoutSidebarHeaderHeight);
  background-color: var(--bgCardBase);
  border-bottom: 1px solid var(--borderDefault);
}

.QuickViewBar_wrapper_a69 {
  position: sticky;
  top: var(--leadLayoutHeaderHeight);
  z-index: var(--leadLayoutZIndex);
}

.QuickViewBar_root_b93 {
  background-color: var(--bgCardBase);
  position: relative;
}

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

.QuickViewBar_root_b93 {
    display: flex;
    justify-content: flex-start;
    padding: var(--spacing-8) var(--spacing-24);
}
  }

.login_as .QuickViewBar_root_b93 {
    background-color: var(--colorLoginAsSurface);;
  }

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

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

.QuickViewBar_inner_f0b {
    align-items: center;
    flex-basis: var(--activityMaxWidth);
    flex-direction: row;
    gap: var(--spacing-8);
    justify-content: space-between;
}
  }

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

.QuickViewBar_inner_f0b {
    flex-basis: var(--activityMaxWidthLargeScreens);
}
  }

.QuickViewBar_left_83c {
  border-bottom: 1px solid var(--borderDefault);
  overflow-x: auto;
  padding: var(--spacing-8) var(--spacing-16);
}

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

.QuickViewBar_left_83c {
    border: none;
    overflow-x: unset;
    padding: 0;
}
  }

.QuickViewBar_right_eae {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: flex-end;
  padding: var(--spacing-8) var(--spacing-16);
  gap: var(--spacing-8);
}

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

.QuickViewBar_right_eae {
    padding: 0;
}
  }

.QuickViewBar_filterButton_653 {
  border-radius: 50%;
  position: relative;
}

.QuickViewBar_filterButton_653:hover .QuickViewBar_filterIndicator_415 {
      border-color: var(--bgButtonDefaultHover);
    }

.QuickViewBar_filterIndicator_415 {
  background-color: var(--bgActive);
  border-radius: 50%;
  border: 2px solid var(--bgCardBase);
  height: 8px;
  pointer-events: none;
  position: absolute;
  right: 3px;
  top: 3px;
  width: 8px;
}

.QuickViewBar_filtersBar_dbd {
  align-items: center;
  background-color: var(--surfaceBackgroundLight);
  border-bottom: 1px solid var(--borderDefault);
  box-sizing: border-box;
  display: flex;
  height: 0;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: height 250ms ease-in-out;
  padding: 0 var(--spacing-24);
}

.QuickViewBar_filtersBar_dbd.QuickViewBar_expandedFiltersBar_617 {
    height: 40px;
    border-top: 1px solid var(--borderLight);
  }

.QuickViewBar_filtersBarInner_83b {
  align-items: center;
  display: grid;
  gap: var(--spacing-8);
  grid-template-columns: 1fr auto;
}

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

.QuickViewBar_filtersBarInner_83b {
    align-items: center;
    flex-basis: var(--activityMaxWidth);
    flex-direction: row;
    justify-content: space-between;
}
  }

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

.QuickViewBar_filtersBarInner_83b {
    flex-basis: var(--activityMaxWidthLargeScreens);
}
  }

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

.QuickViewBar_caret_b33 {
  position: absolute;
  bottom: -16px;
  right: 7px;
  width: 16px;
  height: 16px;
}

.QuickViewBar_caret_b33 {
    animation: fadeIn 250ms;
  }

:is(.QuickViewBar_caret_b33 svg) polygon {
      fill: var(--bgCardMedium);
      stroke: var(--borderDefault);
      stroke-width: 1px;
    }

:is(.QuickViewBar_caret_b33 svg) line {
      stroke: var(--bgCardMedium);
      stroke-width: 2px;
    }

.SidebarCard_sectionContainer_218 {
  background: var(--bgDefaultMuted);
  border-radius: 7px;
  border: 1px solid var(--borderDefault);
}

.SidebarCard_sectionContainer_218 svg {
    opacity: 0.5;
    transition: opacity 0.2s ease;
  }

.SidebarCard_expanded_48e svg {
    opacity: 1;
  }

.SidebarCard_SidebarCardFormErrors_formError_5d6 {
  background-color: var(--bgDangerMuted);
  color: var(--colorTextDanger);
  font-size: var(--fontSizeSmall);
}.SidebarCard_SidebarCardFormErrors_formError_5d6 ul {
    margin-bottom: 0;
  }

.SidebarCard_SidebarCardFormFooter_footer_6b3 {
  background-color: var(--bgCardMedium);
  border-radius: 0 0 7px 7px;
}

.SidebarCard_SidebarCardHeader_header_6e5 {
  background-color: var(--bgDefaultMuted);
  padding: 0 var(--spacing-8) 0 0;
  border-radius: 7px 7px 0 0;
}

.SidebarCard_SidebarCardHeader_header_6e5.SidebarCard_SidebarCardHeader_collapsed_d57 {
    border-radius: 7px;
  }

:is(.SidebarCard_SidebarCardHeader_opportunityIcon_8dc svg path):nth-child(1) {
    fill: var(--colorIconDuotoneFillGold);
  }

:is(.SidebarCard_SidebarCardHeader_opportunityIcon_8dc svg path):nth-child(2) {
    fill: var(--colorIconDuotoneStrokeGold);
  }

:is(.SidebarCard_SidebarCardHeader_aboutIcon_f8f svg path):nth-child(1) {
    fill: var(--colorIconDuotoneFillBlue);
  }

:is(.SidebarCard_SidebarCardHeader_aboutIcon_f8f svg path):nth-child(2) {
    fill: var(--colorIconDuotoneStrokeBlue);
  }

:is(.SidebarCard_SidebarCardHeader_contactIcon_2e7 svg path):nth-child(1) {
    fill: var(--colorIconDuotoneFillCyan);
  }

:is(.SidebarCard_SidebarCardHeader_contactIcon_2e7 svg path):nth-child(2) {
    fill: var(--colorIconDuotoneStrokeCyan);
  }

:is(.SidebarCard_SidebarCardHeader_taskIcon_743 svg path):nth-child(1) {
    fill: var(--colorIconDuotoneFillRed);
  }

:is(.SidebarCard_SidebarCardHeader_taskIcon_743 svg path):nth-child(2) {
    fill: var(--colorIconDuotoneStrokeRed);
  }

:is(.SidebarCard_SidebarCardHeader_customObjectIcon_cc1 svg path):nth-child(1) {
    fill: var(--colorIconDuotoneFillPurple);
  }

:is(.SidebarCard_SidebarCardHeader_customObjectIcon_cc1 svg path):nth-child(2) {
    fill: var(--colorIconDuotoneStrokePurple);
  }

:is(.SidebarCard_SidebarCardHeader_customFieldIcon_361 svg path):nth-child(1) {
    fill: var(--colorIconDuotoneFillGreen);
  }

:is(.SidebarCard_SidebarCardHeader_customFieldIcon_361 svg path):nth-child(2) {
    fill: var(--colorIconDuotoneStrokeGreen);
  }

.SidebarCard_SidebarCardHeader_headerTitleBtn_c89 {
  min-width: 0px;
  flex-grow: 1;

  position: relative;

  /* ensure headers have consistent height regardless of whether there are buttons */

  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-12);
  min-height: 24px;
  display: block;
}

.SidebarCard_SidebarCardHeader_headerTitleBtn_c89:hover .SidebarCard_SidebarCardHeader_chevron_7b4 {
      color: var(--colorIconDefault);
    }

.SidebarCard_SidebarCardHeader_chevron_7b4 {
  transition: transform 0.2s ease;
  color: var(--colorIconLight);
}

.SidebarCard_SidebarCardHeader_chevron_7b4 svg {
    width: 14px;
    height: 14px;
  }

.SidebarCard_SidebarCardHeader_chevron_7b4.SidebarCard_SidebarCardHeader_expanded_dbf {
    transform: rotate(90deg);
  }

.SidebarCard_SidebarCardHeader_searchWrap_7c5 {
  position: absolute;
  z-index: -1;
  /* total height of input: 32px, header: 34px */
  left: 0;
  right: -8px;
  opacity: 0;
  transform: scale(1, 1);
  transform-origin: right;
  transition: all 100ms ease-in-out;
}

.SidebarCard_SidebarCardHeader_searchWrap_7c5 .SidebarCard_SidebarCardHeader_headerSearch_2f8:focus {
    background-color: var(--surfaceBackgroundDark);
    border: 0;
  }

.SidebarCard_SidebarCardHeader_searchWrap_7c5.SidebarCard_SidebarCardHeader_isSearching_4d0 {
    z-index: 1;
    opacity: 1;
    transform: scale(1, 1);
  }

.SidebarCard_SidebarCardItemsList_list_d9c {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: var(--borderDefault);
  border-radius: 7px;
}

.SidebarCard_SidebarCardItemsList_showMore_2ff {
  background: var(--bgDefaultMuted);
  border-radius: 0 0 6px 6px;
  color: var(--colorTextLight);
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: 12px;
  padding: var(--spacing-8) var(--spacing-12);
  text-align: left;
}

.SidebarCard_SidebarCardItemsList_showMore_2ff:hover,.SidebarCard_SidebarCardItemsList_showMore_2ff:active {
    background: var(--bgDefaultMutedHover);
    color: var(--colorTextDefault);
  }

.SidebarCard_SidebarCardItemEmptyState_card_559 {
  background-color: var(--bgCardBase);
  border-top: 1px solid var(--borderDefault);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.SidebarCard_SidebarCardItemWrapper_root_010 {
  background-color: var(--bgCardBase);
  scroll-margin-bottom: var(--spacing-16);
  scroll-margin-top: var(--spacing-48);
}

/* The last item of the list must have a border-radius, but it has a wrapper
   when it's sortable, so we need to take that into account. */
.SidebarCard_SidebarCardItemWrapper_root_010:is(:last-child > .SidebarCard_SidebarCardItemWrapper_hasWrapper_b38,:not(.SidebarCard_SidebarCardItemWrapper_hasWrapper_b38):last-child) {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
  }

/* Add a 4px gap between items when the card is expanded */
.SidebarCard_SidebarCardItemWrapper_expanded_3eb:is(:not(:last-child) > .SidebarCard_SidebarCardItemWrapper_hasWrapper_b38,:not(.SidebarCard_SidebarCardItemWrapper_hasWrapper_b38):not(:last-child)) {
    border-bottom: var(--spacing-4) solid var(--borderLight);
  }
.SidebarCard_SidebarCardItemWrapper_expanded_3eb:is(:not(:last-child) > .SidebarCard_SidebarCardItemWrapper_hasWrapper_b38,:not(.SidebarCard_SidebarCardItemWrapper_hasWrapper_b38):not(:last-child))::after {
      content: '';
      display: block;
      border-bottom: 1px solid var(--borderDefault);
    }


/* Temporarily disable focus ring until we address #15770, #15771, and #15888
.focusRing {
  border: 1px solid var(--borderFocused);

  &.hasError {
    border: 1px solid var(--borderDanger);
  }
}

.focusWithin:focus-within {
  outline: none;
  border: 1px solid var(--borderFocused);
}
*/

.SidebarCard_SidebarCardItemWrapper_withPointer_39d {
  cursor: pointer;
}

.SidebarCard_SidebarCardItemWrapper_withPointer_39d:hover {
    background-color: var(--bgCardLight);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
  }

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

.SidebarCard_SidebarCardSectionHeader_header_94e {
  border-top: 1px solid var(--borderLight);
  background-color: var(--bgLightMuted);
  /* Header gets 34px if you pass buttons as children, but if there are buttonless
   * headers, we still want all of them to have consistent height.
   */
  min-height: 34px;
  display: flex;
  align-items: center;
}

.SidebarCard_SidebarCardSortableItemsList_sortableItem_72b {
  position: relative;
  isolation: isolate;
}.SidebarCard_SidebarCardSortableItemsList_sortableItem_72b .SidebarCard_SidebarCardSortableItemsList_dragHandle_f9f {
    display: flex;
    /* we use opacity to show or hide the handle when hovering over it
     since it's absolute positioned with a -50% left offset */
    opacity: 0;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(var(--cardHeaderHeight) / 2);
    left: 0;
    transform: translate(-50%, -50%);
    cursor: grab;
    padding: var(--spacing-4);
    border-radius: var(--borderRadiusMedium);
    color: var(--colorIconLight);
    background-color: var(--bgLightMuted);
    border: 1px solid var(--borderDefault);
    box-shadow: var(--shadowLevel2);
    z-index: 10;
    /* Prevents the page from scrolling when being dragged */
    /* This is especially useful for touch devices */
    /* To prevent the mobile device from interpreting the drag */
    /* as a scroll event and scrolling as normal */
    touch-action: none;
  }.SidebarCard_SidebarCardSortableItemsList_sortableItem_72b.SidebarCard_SidebarCardSortableItemsList_sortingDisabled_bd8 .SidebarCard_SidebarCardSortableItemsList_dragHandle_f9f {
      display: none;
    }.SidebarCard_SidebarCardSortableItemsList_sortableItem_72b.SidebarCard_SidebarCardSortableItemsList_isDragging_8cf {
    z-index: 1;
  }@media (hover: hover) {
    @media screen and (min-width: 768px) {
        .SidebarCard_SidebarCardSortableItemsList_sortableItem_72b:hover .SidebarCard_SidebarCardSortableItemsList_dragHandle_f9f {
          opacity: 1;
        }
      .SidebarCard_SidebarCardSortableItemsList_sortableItem_72b .SidebarCard_SidebarCardSortableItemsList_dragHandle_f9f:hover {
        opacity: 1;
      }
    }
  }

.LeadOpportunities_LeadOpportunityStatusIndicator_indicator_546 {
  width: 4px;
  height: 60px;
  border-radius: 4px;
}.LeadOpportunities_LeadOpportunityStatusIndicator_indicator_546.LeadOpportunities_LeadOpportunityStatusIndicator_active_e32 {
    background-color: var(--colorGold20);
  }.LeadOpportunities_LeadOpportunityStatusIndicator_indicator_546.LeadOpportunities_LeadOpportunityStatusIndicator_won_160 {
    background-color: var(--bgSuccess);
  }.LeadOpportunities_LeadOpportunityStatusIndicator_indicator_546.LeadOpportunities_LeadOpportunityStatusIndicator_lost_8c6 {
    background-color: var(--bgDefault);
  }.LeadOpportunities_LeadOpportunityStatusIndicator_indicator_546.LeadOpportunities_LeadOpportunityStatusIndicator_skeleton_330 {
    background-color: var(--bgSkeleton);
  }

.LeadHeader_root_923 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;

  padding: var(--spacing-12) var(--spacing-24);
}

.LeadHeader_mainContent_542 {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-grow: 1;
  margin: auto;
}

.LeadHeader_leadStatusWrapper_e60 {
  display: inline-block;
}

.ActivityActions_ActivityActionButton_largeIconButtons_946 {
  width: 40px;
  height: 40px;
}

.ActivityActions_ActivityActionButton_mediumIconButtons_b1f {
  width: 32px;
  height: 32px;
}

.ActivityActions_ActivityActionButton_customActivitiesLoader_873 {
  margin: 0 auto;
}

.LeadLayout_root_5c1 {
  height: 100%;
  display: flex;
  flex-direction: column;

  --leadLayoutHeaderHeight: 80px;
  --leadLayoutSidebarHeaderHeight: 48px;
  --leadLayoutZIndex: 11;
  --leadLayoutSidebarMaxHeight: 100dvh - var(--topNavHeight) -
    var(--leadLayoutHeaderHeight);
}

.LeadLayout_columns_7c1 {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 1fr;
  box-sizing: border-box;
}

.LeadLayout_columns_7c1.LeadLayout_hasSidebar_69c {
    /**
     * 1279 down:
     * - Fixed sidebar width
     * - Fluid main column with a min-width
    */
    grid-template-columns: 348px minmax(612px, 1fr);
    transition: grid-template-columns 0.3s ease;

    /**
     * 1280 up:
     * - Sidebar fluid with a max-width
     * - Main column filling the rest of the space
    */
  }

@media (min-width: 1280px) {

.LeadLayout_columns_7c1.LeadLayout_hasSidebar_69c {
      grid-template-columns: clamp(348px, 33%, 400px) minmax(0, 1fr);
  }
    }

/**
     * 1600 up:
     * - Sidebar starts at 412px with a max-width of 480 at 1680px
     * - Main column filling the rest of the space
    */

@media (min-width: 1600px) {

.LeadLayout_columns_7c1.LeadLayout_hasSidebar_69c {
      grid-template-columns: clamp(400px, 35%, 460px) minmax(0, 1fr);
  }
    }

.LeadLayout_mainHeader_bb9 {
  grid-row: 1;
  grid-column: 1 / 3;
  box-sizing: border-box;
  border-bottom: 1px solid var(--borderDefault);
  background-color: var(--surfaceBackgroundDefault);

  display: flex;
  justify-content: center;

  position: sticky;
  top: 0;
  z-index: var(--leadLayoutZIndex);
  height: var(--leadLayoutHeaderHeight);
}

.login_as .LeadLayout_mainHeader_bb9 {
    background-color: var(--colorLoginAsSurface);
  }

/* Adds danger styles to action buttons (login as) */

.login_as .LeadLayout_mainHeader_bb9 .Btn {
    background-color: var(--colorLoginAsButton);
    border-color: var(--colorLoginAsButtonBorder);
  }

.LeadLayout_mainColumn_ceb {
  display: flex;
  flex-direction: column;
  grid-row: 2;
  grid-column: 2;
  min-height: 0;
}

.LeadLayout_sidebarHeader_1df {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 0 var(--spacing-24);
  background-color: var(--surfaceBackgroundDefault);
  border-bottom: 1px solid var(--borderDefault);
  flex: 0 0 var(--leadLayoutSidebarHeaderHeight);
}

.login_as .LeadLayout_sidebarHeader_1df {
    background-color: var(--colorLoginAsSurface);
  }

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

.LeadLayout_sidebar_77c {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--borderDefault);

  position: sticky;
  top: var(--leadLayoutHeaderHeight);
  max-height: calc(var(--leadLayoutSidebarMaxHeight));
  z-index: var(--leadLayoutZIndex);
}

.LeadLayout_sidebarContent_d13 {
  background: var(--surfaceBackgroundDefault);
  flex: 1;
}

.login_as .LeadLayout_sidebarContent_d13 {
    background-color: var(--colorLoginAsSurface);
  }

.LeadLayout_sidebarScroller_485 {
  max-height: calc(
    var(--leadLayoutSidebarMaxHeight) - var(--leadLayoutSidebarHeaderHeight) -
      var(--leadLayoutSidebarBetaBannerHeight)
  );
  overscroll-behavior-y: contain;
}

.LeadScreenV2_MobileLeadLayout_root_054 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  position: relative;
  background-color: var(--surfaceBackgroundDefault);
}

.LeadScreenV2_MobileLeadLayout_header_bb4 {
  background-color: var(--surfaceBackgroundDefault);
}

.LeadScreenV2_MobileLeadLayout_tabs_404 {
  position: sticky;
  z-index: var(--stickyHeaderZIndex);
  top: 0;
  background-color: var(--surfaceBackgroundDefault);
  padding-top: var(--spacing-8);
}

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

.LeadScreenV2_MobileLeadLayout_tabContent_c3c[hidden] {
    display: none;
  }

.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;
  }

.LeadSuggestionSkeleton_container_d6f {
  border-radius: var(--baseInputBorderRadius);
  border: 1px solid var(--borderDefault);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.LeadSuggestionSkeleton_header_2e2 {
  align-items: center;
  background-color: var(--bgTableCellDefault);
  border-radius: var(--baseInputBorderRadius) var(--baseInputBorderRadius) 0 0;
  display: flex;
  gap: var(--spacing-16);
  justify-content: space-between;
  padding: var(--spacing-8) var(--spacing-16);
}

.LeadSuggestionSkeleton_header_2e2:only-child {
    border-radius: var(--baseInputBorderRadius);
  }

.LeadSuggestionSkeleton_contactContainer_010 {
  background-color: var(--surfaceBackgroundLight);
  border-top: 1px solid var(--borderDefault);
  border-radius: 0 0 var(--baseInputBorderRadius) var(--baseInputBorderRadius);
  box-sizing: border-box;
  padding: var(--spacing-12) var(--spacing-16);
}

.PotentialLeadsSummary_summaryCardContainer_7f6 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  position: sticky;
  top: var(--spacing-16);
}

.PotentialLeadsSummary_summaryCard_497 {
  background-color: var(--bgCardBase);
  border: 1px solid var(--borderDefault);
  border-radius: var(--baseInputBorderRadius);
  height: fit-content;
  min-width: 280px;
  padding: var(--spacing-16);
}

.PotentialLeadsSummary_summaryFooter_c1c {
  background-color: var(--bgCardBase);
  border-top: 1px solid var(--borderDefault);
  box-sizing: border-box;
  box-shadow: 0px -8px 12px -12px rgba(0, 0, 0, 0.25);
  bottom: 0;
  display: flex;
  gap: var(--spacing-8);
  justify-content: space-between;
  left: 0;
  padding: var(--spacing-16) var(--spacing-24);
  position: sticky;
  width: 100%;
}

._user-_app-reporting-sent-emails_component_loading_9e1 {
  opacity: 0.5;
}

.DockedAIAssistant_root_f9b {
  position: fixed;
  bottom: var(--spacing-24);
  right: var(--spacing-24);
  z-index: var(--zindexDockedElement);
}

.NoMemberships_page_273 {
  margin: auto;
  max-width: 560px;
  text-align: center;
  padding: 160px 8px 0 8px;
}

.NoMemberships_title_c56 {
  font-size: 24px;
  font-weight: 300;
}

.NoMemberships_section_bc4 {
  color: var(--colorTextMedium);
  margin: 8px 0 32px;
  font-size: 16px;
}

.NoMemberships_logo_c6b {
  display: inline-block;
  width: 136px;
  margin-bottom: 24px;
}

.NoMemberships_phone_ce1 {
  white-space: nowrap;
}

.DockedConversations_list_df7 {
  /* Float the container at the bottom of the screen, independent of scroll
   * height. */
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;

  /* Since this div floats over everything else it will swallow an click events
   * when conversations are expanded. But we want users to be able to interact
   * with contents that are behind the list, if they are not also behind a
   * conversation.
   *
   * NOTE: This means we can't make this div horizontally scrollable. I'm not
   *       sure if there's a good way to work around that. Perhaps making the
   *       height some value like 40, turning on pointer events, and requiring
   *       scrolling to take place down there?
   */
  pointer-events: none;

  z-index: var(--zindexFloatingUI);

  display: flex;
  flex-direction: row;

  align-items: flex-end;

  /* If we find a way to make the list container scrollable we'll have to
   * exchange this justify-content for another approach --
   * justify-content: flex-end doesn't work with scrolling. */
  justify-content: flex-end;

  padding-right: var(--spacing-32);
}

.DockedConversations_container_8e1 {
  /* Pointer-events cascades. Turn it back on for conversation containers. */
  pointer-events: auto;

  border: 1px solid var(--borderDefault);
  border-top-left-radius: var(--borderRadiusMedium);
  border-top-right-radius: var(--borderRadiusMedium);
  background-color: var(--bgLight);
  box-shadow: var(--shadowLevel3);

  width: 400px;

  margin-left: var(--spacing-12);

  /* Clip border radius */
  overflow: hidden;

  transition: all 200ms var(--easeInOutQuad);
  transition-property: width, border-color, background-color;
}

.DockedConversations_container_8e1.DockedConversations_minimized_6e8 {
    width: 240px;
  }

.DockedConversations_container_8e1.DockedConversations_minimized_6e8.DockedConversations_hasUnread_8de {
      border-color: var(--borderActive);
      background-color: var(--bgActiveMuted);
    }

.DockedConversations_header_0f8 {
  cursor: pointer;
}

.DockedConversations_header_0f8:hover {
    background-color: var(--bgLightHover);
  }

.DockedConversations_header_0f8.DockedConversations_hasUnread_8de:hover {
      background-color: initial;
    }

.DockedConversations_header_0f8 a {
    text-decoration-color: var(--borderHover);
  }

.DockedConversations_header_0f8 .DockedConversations_lineHeightContainer_48b {
    line-height: 16px;
  }

.DockedConversations_unreadIndicator_c5c {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background-color: var(--fillActive);
  border-radius: 50%;
}

.DockedConversations_body_14c {
  height: calc(min(480px, 80vh));

  display: flex;
  flex-direction: column;

  transition: height 200ms var(--easeInOutQuad);
}

.DockedConversations_body_14c.DockedConversations_minimized_6e8 {
    height: 0;
  }

.DockedConversations_form_b1a {
  margin: 0;
}

.DockedConversations_scroll_42e {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-12);
  scrollbar-width: thin;

  flex: 1;

  overflow-y: auto;

  /* experimental: match scrollbar color to CustomScroller styling. */
}

.DockedConversations_scroll_42e::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
  }

.DockedConversations_scroll_42e {
  scrollbar-color: rgba(0, 0, 0, 0.4) transparent;

  /* scroll + justify-content: flex-end does not work correctly. So instead I
   * set a margin of `auto` on the first child so that the content is forced
   * to the bottom of the container when the messages do not fill up the height
   */
}

.DockedConversations_scroll_42e > :first-child {
    margin-top: auto;
  }

.DockedConversations_input_943 {
  flex: 1;
  margin: 0;
  resize: none;
}

.MessageActions_actionsContainer_f57 {
  display: flex;
  gap: var(--spacing-8);
  visibility: hidden;
}.MessageActions_actionsContainer_f57.MessageActions_forceVisibility_6df {
    visibility: visible;
  }

/**
 * TODO: currently some duplication here between this and Content.module.css
 *
 * Content is rich text content rendered by Prosemirror, View is rich text rendered
 * without Prosemirror, but we need to support much of the same formatting/CSS.
 */
.RawRichTextViewer_viewer_392 {
  width: 100%;
  outline: none;
}
.RawRichTextViewer_viewer_392.RawRichTextViewer_preserveWhiteSpaces_c6c {
    white-space: pre-wrap;
  }
.RawRichTextViewer_viewer_392  > p:last-child,.RawRichTextViewer_viewer_392 ul:last-child,.RawRichTextViewer_viewer_392 ol:last-child {
    margin-bottom: 0;
  }
.RawRichTextViewer_viewer_392 ol > li {
    list-style-type: decimal;
  }
:is(.RawRichTextViewer_viewer_392 ol > li) ol > li {
      list-style-type: lower-alpha;
    }
:is(:is(.RawRichTextViewer_viewer_392 ol > li) ol > li) ol > li {
        list-style-type: lower-roman;
      }
.RawRichTextViewer_viewer_392 ul > li {
    list-style-type: disc;
  }
:is(.RawRichTextViewer_viewer_392 ul > li) ul > li {
      list-style-type: circle;
    }
:is(:is(.RawRichTextViewer_viewer_392 ul > li) ul > li) ul > li {
        list-style-type: square;
      }
.RawRichTextViewer_viewer_392 p,.RawRichTextViewer_viewer_392  > ul {
    margin-bottom: var(--spacing-8);
  }
:is(.RawRichTextViewer_viewer_392 blockquote,.RawRichTextViewer_viewer_392 li),:is(.RawRichTextViewer_viewer_392 blockquote,.RawRichTextViewer_viewer_392 li) p {
      font-size: inherit;
      font-style: inherit;
      font-weight: inherit;
      line-height: inherit;
      margin-bottom: 0;
    }
.RawRichTextViewer_viewer_392 blockquote {
    color: var(--gray-50);
  }
.RawRichTextViewer_viewer_392 mark {
    background-color: var(--bgHighlightMatchSelected);
  }
.RawRichTextViewer_viewer_392 a {
    overflow-wrap: anywhere;
  }
/* #region Mention plugin */
.RawRichTextViewer_viewer_392 [data-type='mention'] {
    color: var(--colorLinkDefault);
  }
/* #endregion */
/* #region BackgroundColor */
/**
     * These colors must match the keys in HighlightColorKey!
     * They should also be styled consistently with the named color class names
     * in the color picker menu
     */
.RawRichTextViewer_viewer_392 [data-highlight-color='bgRed'] {
    background-color: var(--colorBgRichTextHighlightRed);
  }
.RawRichTextViewer_viewer_392 [data-highlight-color='bgYellow'] {
    background-color: var(--colorBgRichTextHighlightYellow);
  }
.RawRichTextViewer_viewer_392 [data-highlight-color='bgGreen'] {
    background-color: var(--colorBgRichTextHighlightGreen);
  }
.RawRichTextViewer_viewer_392 [data-highlight-color='bgBlue'] {
    background-color: var(--colorBgRichTextHighlightBlue);
  }
.RawRichTextViewer_viewer_392 [data-highlight-color='bgPurple'] {
    background-color: var(--colorBgRichTextHighlightPurple);
  }

.Message_messageContainer_184 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.Message_messageContainer_184.Message_gapless_e0f {
    gap: 0;
  }

.Message_messageContainer_184:hover .showOnMessageHover {
      visibility: visible;
    }

.Message_messageContainer_184.Message_clickable_de1 .Message_avatar_a79 {
      cursor: pointer;
    }

.Message_messageContainer_184.Message_clickable_de1 .Message_message_a1e {
      cursor: pointer;
    }

.Message_incoming_53f:is(.Message_messageContainer_184.Message_clickable_de1 .Message_message_a1e):hover {
          border-color: var(--borderDefault);
        }

.Message_sms_e64 .Message_outgoing_8f3:is(.Message_messageContainer_184.Message_clickable_de1 .Message_message_a1e):hover {
            border-color: var(--borderSmsMutedHover);
          }

.Message_whatsapp_bf0 .Message_outgoing_8f3:is(.Message_messageContainer_184.Message_clickable_de1 .Message_message_a1e):hover {
            border-color: var(--borderWhatsAppMutedHover);
          }

.Message_messageContainer_184.Message_outgoing_8f3 .Message_metaRow_066 {
      justify-content: flex-end;
      padding-right: var(--spacing-24);
    }

.Message_messageContainer_184.Message_incoming_53f .Message_metaRow_066 {
      justify-content: flex-start;
      padding-left: var(--spacing-24);
    }

.Message_message_a1e {
  max-width: 80%;
  border-radius: var(--activityBorderRadius);
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid transparent;
  transition:
    background-color 1.5s ease,
    box-shadow 1.5s ease;
}

.Message_message_a1e.Message_incoming_53f {
    background-color: var(--bgCardBase);
    border-color: var(--borderLight);
  }

.Message_message_a1e.Message_incoming_53f.Message_highlighted_8ed {
      /* Do not show a transition to the focused color. */
      transition: none;
      background-color: var(--bgActiveMuted);
      box-shadow: 0 0 0 4px var(--bgActiveMuted);
    }

.Message_sms_e64 .Message_message_a1e.Message_outgoing_8f3 {
      background-color: var(--colorBgActivitySMSMuted);
      border-color: var(--borderSmsMuted);
    }

.Message_whatsapp_bf0 .Message_message_a1e.Message_outgoing_8f3 {
      background-color: var(--colorBgActivityWhatsAppMuted);
      border-color: var(--borderWhatsAppMuted);
    }

.Message_message_a1e.Message_outgoing_8f3.Message_highlighted_8ed {
      /* Do not show a transition to the focused color. */
      transition: none;
      background-color: var(--bgActiveMuted);
      border-color: transparent;
      box-shadow: 0 0 0 4px var(--bgActiveMuted);
    }

.Message_message_a1e p {
    margin-bottom: 0;
  }

.Message_avatar_a79 {
  align-self: flex-end;
}

.Message_divider_217 {
  background-color: var(--borderLight);
  display: flex;
  flex: 1;
  height: 1px;
}

.Message_attachmentContainer_5dc {
  width: 80%;
}

.Message_metaRow_066 {
  align-items: center;
  display: flex;
  height: 16px;
  gap: var(--spacing-8);
  opacity: 1;
  transition:
    opacity 200ms var(--standardCurve),
    height 200ms var(--standardCurve);
}

.Message_metaRow_066.Message_hidden_860 {
    height: 0;
    opacity: 0;
  }

.CallBlockedModal_InboundCallBlockedModal_arrowCircle_553 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--surfaceBackgroundDefault);
  border-radius: 50%;
}

.DoNotShowAgainTodayCheckbox_DoNotShowAgainTodayCheckbox_138 {
  margin-bottom: 0;
}

.DoNotShowAgainTodayCheckbox_DoNotShowAgainTodayCheckbox__inputControl_529[type='checkbox'] {
  margin: 0 8px 3px 0;
}

.JoinableCallBar_bar_f05 {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 8px;
  background-color: #edf6e8;
  padding: 4px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.JoinableCallBar_avatar_59d {
  transform: scale(0.8);
}

.JoinableCallBar_info_f47 {
  display: flex;
  align-items: center;
  color: var(--colorTextMedium);
}

.JoinableCallBar_bullet_439 {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--colorTextMedium);
  margin: 0 8px;
}

.JoinableCallBar_actions_e1b {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
}

.TopBar_contentCentered_5db {
  display: flex;
  align-items: center;
  justify-content: center;
}

.TopBar_container_d12 {
  --topBarHeight: 40px;

  flex: 0 0 auto;
  line-height: 16px;
  font-size: 14px;
  text-align: center;
  z-index: 5; /* above expanded search input */
  overflow: hidden;
  white-space: nowrap;
  height: 0;
  transition: height 200ms var(--accelerationCurve);
}

.TopBar_container_d12.TopBar_warning_526 {
    background-color: var(--bgWarn);
    color: var(--colorTextNeutralBlack);
  }

.TopBar_container_d12.TopBar_info_35f {
    background-color: var(--bgInformational);
    color: var(--colorTextNeutralWhite);
  }

.TopBar_container_d12.TopBar_danger_211 {
    background-color: var(--bgDanger);
    color: var(--colorTextNeutralWhite);
  }

.TopBar_container_d12.TopBar_dangerMuted_171 {
    background-color: var(--bgDangerMuted);
    color: var(--colorTextDanger);
  }

.TopBar_container_d12.TopBar_visible_589 {
    min-height: var(--topBarHeight);
  }

.TopBar_container_d12.TopBar_visible_589 .TopBar_content_a12 {
      margin-top: 0;
    }

.TopBar_container_d12 .TopBar_content_a12 {
    margin-top: calc(var(--topBarHeight) * -1);
    transition: margin-top 200ms var(--accelerationCurve);
    flex: 1;
    min-height: var(--topBarHeight);
    padding: 0px 16px;
    line-height: var(--topBarHeight);
  }

.TopBar_container_d12 .TopBar_symbol_620 {
    line-height: 16px;
    display: inline-block;
    font-size: 8px;
    padding: 0 7px;
    opacity: 0.2;
    vertical-align: middle;
    font-style: normal;
  }

.TopBar_container_d12 a {
    color: inherit;
    font-weight: var(--fontWeightBold);
    -webkit-text-decoration: none;
    text-decoration: none;
    vertical-align: middle;
  }

:is(.TopBar_container_d12 a):hover,:is(.TopBar_container_d12 a):active,:is(.TopBar_container_d12 a):focus {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.TopBar_container_d12 .TopBar_close_db4 {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    float: right;
    font-size: 20px;
    font-weight: var(--fontWeightBold);
    line-height: var(--topBarHeight);
    color: #000;
    opacity: 0.2;
    -webkit-appearance: none;
  }

.TopBar_danger_211:is(.TopBar_container_d12 .TopBar_close_db4) {
      color: var(--colorIconNeutralWhite);
      opacity: 1;
      font-weight: 100;
      margin-top: -2px; /* used to align the close button with the text without bold font */
    }

.TopBar_container_d12 .TopBar_text_8e6 {
    text-overflow: ellipsis;
    display: inline-block;
    /* leave 180px space for CTA "See details" button + exit button in the topbar */
    max-width: calc(100% - 180px);
    overflow: hidden;
  }

.TopBar_noCTA_c2d:is(.TopBar_container_d12 .TopBar_text_8e6) {
      max-width: none;
    }


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

.AccountDisconnectedBarContainer_topBarMobile_1a3 {
    height: auto;
}
  }

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

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

.AccountDisconnectedBarContainer_container_fe6 {
    align-items: flex-start;
    padding-top: var(--spacing-12);
    gap: var(--spacing-12);
}
  }

.AccountDisconnectedBarContainer_textWrapper_1f9 {
  display: flex;
  white-space: normal;
  text-align: left;
}

.AccountDisconnectedBarContainer_btnWrapper_338 {
  min-height: var(--topBarHeight);
  padding: 0 var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
}

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

.AccountDisconnectedBarContainer_btnWrapper_338 {
    min-height: 0;
    align-self: flex-end;
    padding: 0 0 var(--spacing-12) 0;
    flex-grow: 1;
    justify-content: flex-end;
}
  }

.AccountDisconnectedBarContainer_contactSupportBtn_aa6.AccountDisconnectedBarContainer_contactSupportBtn_aa6 {
    background-color: transparent;
    color: var(--colorTextNeutralWhite);
    border-color: var(--colorTextNeutralWhite);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.AccountDisconnectedBarContainer_link_bc7.AccountDisconnectedBarContainer_link_bc7 {
    display: flex;
    align-items: center;
  }

.AccountDisconnectedBarContainer_link_bc7.AccountDisconnectedBarContainer_link_bc7:hover {
      -webkit-text-decoration: none;
      text-decoration: none;
    }

/*
   For now these stylings are only used on `AccountDisconnectedBar`
   If you need to copy these to any other component,
   it's better to create a new <Button> theme */

.AccountDisconnectedBarContainer_contactSupportBtn_aa6.AccountDisconnectedBarContainer_contactSupportBtn_aa6:hover {
      background-color: var(--colorTextNeutralWhite);
      color: var(--colorBrandRed);
      border-color: var(--colorTextNeutralWhite);
    }

.AccountDisconnectedBarContainer_contactSupportBtn_aa6.AccountDisconnectedBarContainer_contactSupportBtn_aa6:focus:not(:hover),.AccountDisconnectedBarContainer_contactSupportBtn_aa6.AccountDisconnectedBarContainer_contactSupportBtn_aa6:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--colorTextNeutralWhite) 50%, transparent);
      border-color: color-mix(in srgb, #000 8%, var(--colorTextNeutralWhite));
      color: var(--colorTextDanger);
      background-color: var(--colorTextNeutralWhite);
    }

.AccountDisconnectedBarContainer_contactSupportBtn_aa6.AccountDisconnectedBarContainer_contactSupportBtn_aa6:disabled {
      opacity: 0.7;
    }

.PlanCancellationAlertBanner_banner_308 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

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

.AppErrorBar_container_259 {
  --colorLinkDefault: currentColor;
  --colorLinkHover: currentColor;
}



  /* make modal a little bigger */@media (min-width: 820px) {.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 {
    width: 810px;
}
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 h4 {
    margin-bottom: 6px;
    font-size: 16px;
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 dl {
    margin-top: 0;
  }:is(.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 dl):last-child {
      margin-bottom: 0;
    }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 dt,.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 dd {
    font-size: 13px;
    line-height: 23px;
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 dt {
    width: 110px;
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 dd {
    margin-left: 118px;
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .text-muted {
    font-weight: normal;
    font-size: 11px;
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .KeyboardShortcutsModal_KeyboardShortcutsModal_key_c01 {
    display: inline-block;
    min-width: 8px;
    margin-right: 3px;
    padding: 0 3px;
    border-radius: 2px;
    border: solid 1px var(--bgDefault);
    box-shadow: 1px 1px 0 var(--bgDefault);
    background-color: var(--bgDefault);
    color: var(--colorTextDefault);
    font-size: 12px;
    font-weight: normal;
    line-height: 15px;
    text-align: center;
  }:is(.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .KeyboardShortcutsModal_KeyboardShortcutsModal_key_c01):last-child {
      margin-right: 0;
    }:is(.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .KeyboardShortcutsModal_KeyboardShortcutsModal_halfWidth_357):first-child {
      margin: 0 0 20px 0;
    }/* stack columns when on narrow screens *//* keyboard shortcuts don't apply on mobile but whatever */@media (min-width: 820px) {.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .KeyboardShortcutsModal_KeyboardShortcutsModal_halfWidth_357 {
      width: calc(50% - 20px);
  }

      :is(.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .KeyboardShortcutsModal_KeyboardShortcutsModal_halfWidth_357):first-child {
        margin: 0 20px 0 0;
      }
    }

.LeftNav {
  --leftNavSpacing: var(--spacing-12);

  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  /* color used for all items as default, except on TopNav (username and org selector) */
  color: var(--colorGray20);
  flex: 0 0 100%;
  min-width: 224px;
  width: 17.5vw;
  max-width: var(--leftNavWidth);
  font-size: var(--fontSizeBase);
  -webkit-font-smoothing: antialiased;
  background-color: var(--bgNavSidebar);
  border-right: 1px solid var(--borderNavSidebar);
  z-index: 101; /* behind popover backdrop and filter sidebar */
}

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

.LeftNav {
    z-index: 1005; /* behind .TopBar */
}
  }

.LeftNav ::-webkit-scrollbar {
    width: 3px;
  }

.LeftNav ::-webkit-scrollbar-track {
    background-color: var(--bgNavSidebar);
  }

.LeftNav ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
  }

.login_as .LeftNav {
    background-color: var(--colorBgLoginAsLeftNav);
    color: var(--loginAsColor);
  }

/* This rule must only contain the `font-size` property. */

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

@media (max-color:2147477350) and (max-width: calc(var(--desktopWidth) + 40px)) {

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

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

@media (color:2147477350) and (max-width: calc(var(--desktopWidth) + 40px)) {

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

@media screen and (min-width: 768px) {
    .LeftNav.is-collapsed {
      min-width: 64px;
      width: 64px;
      max-width: 4.375vw;
    }

      .LeftNav.is-collapsed .LeftNav__addButton {
        display: none;
      }
  }

.LeftNav__wrapper {
  display: flex;
  flex: 0 0 auto;
}

@media print {

.LeftNav__wrapper {
    display: none;
}
  }

:fullscreen .LeftNav__wrapper {
    display: none;
  }

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

.LeftNav__wrapper {
    min-width: var(--leftNavWidth);
    width: 100vw;
    margin-top: 56px;
    transform: translateX(-100%);
    transition: transform 200ms;
}

    .LeftNav__wrapper.visible {
      transform: none;
    }
  }

.LeftNav__backdrop {
  display: none;
}

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

.LeftNav__backdrop {
    display: block;
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1005;
}
  }

.LeftNav__addButton {
  height: 14px;
  width: 14px;
  color: var(--colorIconLight);
  transition: color 50ms ease-in-out;
}

.login_as .LeftNav__addButton {
    color: color-mix(in srgb, #000 40%, var(--loginAsColor));
  }

.LeftNav__addButton  > button {
    height: 14px;
  }

.LeftNav__addButton:hover {
    color: var(--colorWhite);
  }

.login_as .LeftNav__addButton:hover {
      color: var(--loginAsColor);
    }

.Menu_menu_c10 {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  background-color: inherit;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.Menu_menuList_6f5,
.Menu_menuSublist_3a1 {
  list-style: none;
  margin: 0;
}

.Menu_menuList_6f5 {
  padding: var(--spacing-16) 0;
}

.Menu_menuListBottom_ecc {
  position: sticky;
  bottom: 0;
  background-color: inherit;
}

.Menu_menuListBottom_ecc::before {
    content: '';
    display: block;
    border-top: 1px solid var(--colorGray70);
    left: var(--spacing-12);
    position: absolute;
    right: var(--spacing-12);
    top: 0;
  }

.Menu_menuListSticky_8a6 {
  box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.15);
}

.Menu_menuItem_ca1 {
  --extraContentSize: var(--spacing-20);
  font-weight: var(--fontWeightBold);
}

.Menu_menuItem_ca1:not(:last-of-type) {
    margin-bottom: 1px;
  }

.Menu_menuItem_ca1  > .Menu_menuList_6f5 {
    margin-top: 1px;
    padding-bottom: 0;
    padding-top: 0;
  }

:is(.Menu_menuItem_ca1 > .Menu_menuList_6f5) .Menu_menuItem_ca1 {
      font-size: var(--fontSizeSmall);
      font-weight: 400;
      margin-bottom: 0;
      color: var(--colorGray30);
    }

.login_as :is(:is(.Menu_menuItem_ca1 > .Menu_menuList_6f5) .Menu_menuItem_ca1) {
        color: color-mix(in srgb, #000 20%, var(--loginAsColor));
      }

.Menu_isActive_a3e:is(:is(.Menu_menuItem_ca1 > .Menu_menuList_6f5) .Menu_itemLink_91f) .Menu_itemLinkContent_7f5 {
        font-weight: var(--fontWeightBold);
        background-color: transparent;
      }

:is(.Menu_isActive_a3e:is(:is(.Menu_menuItem_ca1 > .Menu_menuList_6f5) .Menu_itemLink_91f) .Menu_itemLinkContent_7f5):hover {
          background-color: var(--bgNavSidebarMenuitemHover);
        }

.login_as :is(.Menu_isActive_a3e:is(:is(.Menu_menuItem_ca1 > .Menu_menuList_6f5) .Menu_itemLink_91f) .Menu_itemLinkContent_7f5):hover {
            background-color: var(--loginAsHover);
          }

:is(.Menu_menuItem_ca1 > .Menu_menuList_6f5) .Menu_itemLinkContent_7f5 {
      border-radius: 24px;
      color: var(--colorGray40);
      padding: 2px var(--leftNavSpacing);
    }

:is(.Menu_menuItem_ca1 > .Menu_menuList_6f5) .Menu_itemIcon_549 {
      color: var(--colorIconLight);
    }

:is(.Menu_menuItemContent_bc9:hover,.Menu_menuItemContent_bc9 .Menu_itemLink_91f.Menu_isActive_a3e) .Menu_itemLinkContent_7f5 {
      background-color: var(--bgNavSidebarMenuitemActive);
    }

.Menu_hasExtraContent_d10 {
  position: relative;

  /**
    * It's necessary to add extra padding when `hasExtraContent` to
    * make sure menu item labels can't go "under" the `extra` content.
    */
}

.Menu_hasExtraContent_d10 .Menu_itemLinkContent_7f5 {
    padding-right: calc(var(--leftNavSpacing) + var(--extraContentSize));
  }

.Menu_menuItemExtraContent_00c {
  align-items: center;
  display: flex;
  height: var(--extraContentSize);
  justify-content: center;
  position: absolute;
  right: calc(var(--leftNavSpacing) * 2);
  top: 50%;
  transform: translateY(-50%);
  width: var(--extraContentSize);
}

.Menu_itemButton_46c {
  width: 100%;
  outline-offset: -2px;
}

.Menu_itemButton_46c,
.Menu_itemLink_91f {
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  padding-left: var(--leftNavSpacing);
  padding-right: var(--leftNavSpacing);
}

:is(.Menu_itemButton_46c,.Menu_itemLink_91f),:is(.Menu_itemButton_46c,.Menu_itemLink_91f):hover,:is(.Menu_itemButton_46c,.Menu_itemLink_91f):active,:is(.Menu_itemButton_46c,.Menu_itemLink_91f):focus {
    color: currentColor;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.Menu_isActive_a3e:is(.Menu_itemButton_46c,.Menu_itemLink_91f) .Menu_itemLinkContent_7f5 {
    color: var(--colorWhite);
  }

.Menu_isActive_a3e:is(.login_as :is(.Menu_itemButton_46c,.Menu_itemLink_91f)) .Menu_itemLinkContent_7f5,:is(.login_as :is(.Menu_itemButton_46c,.Menu_itemLink_91f)):hover:not(.Menu_isActive_a3e) .Menu_itemLinkContent_7f5 {
      color: var(--loginAsColor);
      background-color: var(--loginAsHover);
    }

.Menu_itemLinkContent_7f5 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px var(--leftNavSpacing);
  border-radius: 32px;
}

.Menu_itemIcon_549 {
  width: var(--spacing-16);
  height: var(--spacing-16);
  margin-right: 11px;
  flex-shrink: 0;
  position: relative;
}

.Menu_itemIcon_549.Menu_itemIconWithCount_333.Menu_single_d15 svg {
        clip-path: path('M0 16H16V9C11.0294 9 7 4.97056 7 0H0V16Z');
      }

.Menu_itemIcon_549.Menu_itemIconWithCount_333.Menu_single_d15 .Menu_count_168 {
        text-indent: 1px;
      }

.Menu_itemIcon_549.Menu_itemIconWithCount_333.Menu_double_fef svg {
        clip-path: path('M0 16H16V9H9C4.02944 9 0 4.97056 0 0V16Z');
      }

.Menu_itemIcon_549.Menu_itemIconWithCount_333.Menu_double_fef .Menu_count_168 {
        width: 23px;
      }

.Menu_itemIcon_549.Menu_itemIconWithCount_333.Menu_triple_7d9 svg {
        clip-path: path('M15.9999 9H-1.09673e-05L-6.10352e-05 16H15.9999V9Z');
      }

.Menu_itemIcon_549.Menu_itemIconNotification_5e0 svg {
      clip-path: path('M0 16H16V9C11.0294 9 7 4.97056 7 0H0V16Z');
    }

.Menu_itemBadge_b17 {
  margin-left: auto;

  /* override menuItem line-height so badge is centered */
  line-height: 0;
}

.Menu_collapseText_fcc {
  color: var(--colorGray40);
}

.Menu_collapseIcon_ce5,
.Menu_itemExternalIcon_299 {
  display: flex;
  color: var(--colorGray60);
  margin-left: auto;
}

:is(.Menu_collapseIcon_ce5,.Menu_itemExternalIcon_299) svg {
    width: 14px;
    height: 14px;
  }

.login_as :is(.Menu_collapseIcon_ce5,.Menu_itemExternalIcon_299) {
    color: var(--loginAsColor);
    opacity: 0.5;
  }

.Menu_itemPopover_1a6 {
  width: 220px;
  padding: var(--spacing-4) 0;
}

.Menu_itemPopover_1a6 .Menu_menuList_6f5 {
    padding: 0;
    line-height: 0;
  }

.Menu_itemPopover_1a6 .Menu_menuItem_ca1 {
    font-weight: 400;
  }

.Menu_itemPopover_1a6 .Menu_itemIcon_549 {
    display: none;
  }

.Menu_itemPopover_1a6 .Menu_itemSubtitle_e52,.Menu_itemPopover_1a6 .Menu_itemLink_91f {
    padding: 6px var(--spacing-24) 6px var(--spacing-16);
  }

.Menu_itemPopover_1a6 .Menu_itemLink_91f {
    line-height: 16px;
  }

:is(.Menu_itemPopover_1a6 .Menu_itemLink_91f):hover {
      background-color: var(--bgMenuItemHover);
    }

:is(.Menu_itemPopover_1a6 .Menu_itemLink_91f):hover:not(.Menu_isActive_a3e) .Menu_itemLinkContent_7f5,.Menu_isActive_a3e:is(.Menu_itemPopover_1a6 .Menu_itemLink_91f) .Menu_itemLinkContent_7f5 {
      color: currentColor;
      background-color: transparent;
    }

.Menu_itemPopover_1a6 .Menu_itemLinkContent_7f5 {
    padding: 0;
  }

.Menu_itemPopover_1a6 .Menu_itemSubtitle_e52 {
    margin: 0;
    font-size: var(--fontSizeBase);
    font-weight: var(--fontWeightBold);
    line-height: 16px;
  }

@media screen and (max-width: 767px) {
  .Menu_menuCollapse_771 {
    display: none;
  }
}

@media screen and (min-width: 768px) {
    .is-collapsed .Menu_itemIcon_549 {
      margin: 0;
      flex-shrink: initial;
    }

    .is-collapsed .Menu_collapseIcon_ce5 {
      margin: 1px 0;
    }

    .is-collapsed .Menu_menuItem_ca1 {
      margin-bottom: 0;
    }

    .is-collapsed .Menu_itemLinkContent_7f5 {
      justify-content: center;
      padding: var(--spacing-8) var(--leftNavSpacing);
    }

    .is-collapsed .Menu_itemText_79f,.is-collapsed .Menu_itemExternalIcon_299,.is-collapsed .Menu_collapseText_fcc {
      display: none;
    }

    .is-collapsed .Menu_collapseIcon_ce5 {
      transform: scaleX(-1);
    }

    .is-collapsed .Menu_menuItemExtraContent_00c {
      display: none;
    }
}

.Menu_count_168 {
  color: var(--colorWhite);
  background-color: var(--colorBrandGreen);
  padding: 2px var(--spacing-4) 0 var(--spacing-4);
  min-width: var(--spacing-16);
  height: var(--spacing-16);
  display: block;
  text-align: center;
  font-size: 9px;
  line-height: 12px;
  font-weight: var(--fontWeightBold);
  border-radius: 8px;
  position: absolute;
  top: calc(-1 * var(--spacing-8));
  right: calc(-1 * var(--spacing-8));
  box-sizing: border-box;
}

.Menu_notificationIcon_9d9 {
  background-color: var(--colorBrandGreen);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
  top: -7px;
  right: -7px;
  box-sizing: border-box;
}

.Menu_aiAssistantButton_a78 {
  margin: 0 var(--spacing-12);
  width: calc(100% - var(--spacing-24));
  padding: var(--spacing-12);
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  border-radius: 32px;
  color: var(--colorWhite);
  height: 32px;
  margin-bottom: 1px;
}

.Menu_aiAssistantButton_a78:hover {
    background-color: var(--bgNavSidebarMenuitemHover);
  }

.Menu_aiAssistantButton_a78:active {
    background-color: var(--bgNavSidebarMenuitemActive);
  }

.Menu_aiAssistantButton_a78:focus-visible {
    outline: 2px solid
      color-mix(in srgb, var(--colorBrandBlue) 50%, transparent);
  }

.Menu_aiAssistantButtonText_5a4 {
  font-weight: var(--fontWeightMedium);
  font-size: var(--fontSizeBase);
}

.Menu_aiAssistantShortcutKeys_5b1 {
  color: var(--colorTextLight);
  font-weight: var(--fontWeightBold);
  margin-left: auto;
}

.is-collapsed .Menu_hideWhenCollapsed_d42 {
    display: none;
  }

.Menu_tooltipContent_201 {
  display: flex;
  flex-direction: column;
  background: var(--colorBgTooltip);
}

.SmartViewList_root_e13 {
  padding: 0 0 24px 0;
  flex-grow: 1;
  box-shadow: inset 0 1px 0 0 var(--colorGray70);
}

.SmartViewList_header_d16 {
  display: flex;
  column-gap: 16px;
  margin: 18px var(--spacing-24);
}

.SmartViewList_title_46a {
  color: var(--colorGray30);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.25px;
  font-weight: var(--fontWeightBold);
  text-transform: uppercase;
}

.SmartViewList_smartViewIcon_626,
.SmartViewList_searchIcon_22f {
  color: var(--colorGray40);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 50ms ease-in-out;
  width: 14px;
  height: 14px;
  outline-offset: 0px;
}

:is(.SmartViewList_smartViewIcon_626,.SmartViewList_searchIcon_22f):hover {
    color: var(--colorWhite);
  }

.SmartViewList_login_as_97d :is(.SmartViewList_smartViewIcon_626,.SmartViewList_searchIcon_22f) {
    color: var(--loginAsColor);
    opacity: 0.5;
  }

:is(.SmartViewList_login_as_97d :is(.SmartViewList_smartViewIcon_626,.SmartViewList_searchIcon_22f)):hover {
      opacity: 1;
    }

.SmartViewList_smartViewIconWrapper_f17 {
  width: 14px;
  height: 14px;
}

/* In Firefox, a dotted outline is visible in active state for some reason.
   * This is a workaround to remove it.
   */

.SmartViewList_smartViewIcon_626:not(:focus-visible),.SmartViewList_smartViewIcon_626:not(:focus) {
    outline: none;
  }

.SmartViewList_smartViewIcon_626:hover {
    color: var(--colorWhite);
  }

.SmartViewList_smartViewIconActive_d62 > span {
  color: var(--colorWhite);
}

.SmartViewList_searchBox_ec8 {
  position: relative;
  margin: var(--spacing-12) var(--spacing-16);
}

.SmartViewList_searchBoxInput_24a[type='search'] {
  color: var(--colorWhite);
  background: rgba(255, 255, 255, 0.1);
  outline: 0;
  border: 0;
  border-radius: 7px;
  margin: 0;
  padding: 0 30px;
  font-size: var(--fontSizeBase);
  height: 28px;
  box-shadow: none;
  box-sizing: border-box;
  width: 100%;
}

.SmartViewList_searchBoxInput_24a[type='search']:focus {
    box-shadow: none !important; /* !important needed to override input[type='search']'s box-shadow from styles.less */
  }

.SmartViewList_searchBoxSearchIcon_29e,
.SmartViewList_searchBoxClearIcon_709 {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--colorGray40);
}

:is(.SmartViewList_searchBoxSearchIcon_29e,.SmartViewList_searchBoxClearIcon_709) svg {
    width: 14px;
    height: 14px;
  }

.SmartViewList_login_as_97d :is(.SmartViewList_searchBoxSearchIcon_29e,.SmartViewList_searchBoxClearIcon_709) {
    color: var(--loginAsColor);
    opacity: 0.5;
  }

:is(.SmartViewList_login_as_97d :is(.SmartViewList_searchBoxSearchIcon_29e,.SmartViewList_searchBoxClearIcon_709)):hover {
      opacity: 1;
    }

.SmartViewList_searchBoxSearchIcon_29e {
  left: var(--spacing-8);
}

.SmartViewList_searchBoxClearIcon_709 {
  cursor: pointer;
  right: var(--spacing-8);
  transition: color 50ms ease-in-out;
}

.SmartViewList_searchBoxClearIcon_709:hover {
    color: var(--colorWhite);
  }

.SmartViewList_list_39a {
  margin: calc(-1 * var(--spacing-4)) 0 0 0;
  list-style: none;
}

.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07 {
    cursor: grabbing;
  }

:is(.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07) .SmartViewList_link_f90 {
      pointer-events: none;
    }

:is(.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07) .SmartViewList_link_f90:hover {
      background-color: transparent;
    }

:is(:is(.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07) .SmartViewList_link_f90:hover) .SmartViewList_editButton_f0c,:is(:is(.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07) .SmartViewList_link_f90:hover) .SmartViewList_unpinButton_386,:is(:is(.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07) .SmartViewList_link_f90:hover) .SmartViewList_dragger_79c {
        display: none;
      }

:is(:is(.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07) .SmartViewList_link_f90:hover) .SmartViewList_bullet_98e {
        display: flex;
      }

.SmartViewList_list_39a.SmartViewList_listIsDragging_fb9 a {
      pointer-events: none;
    }

.SmartViewList_item_bb8 {
  font-size: var(--fontSizeTiny);
  line-height: 16px;
}

.SmartViewList_bullet_98e,
.SmartViewList_dragger_79c {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-12);
  opacity: 0.5;
}

:is(.SmartViewList_bullet_98e,.SmartViewList_dragger_79c) svg {
    width: var(--spacing-16);
    height: var(--spacing-16);
  }

.SmartViewList_emoji_3f7 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: var(--spacing-16);
  height: var(--spacing-16);
  line-height: 16px;
  letter-spacing: 0;
  margin-right: var(--spacing-8);
  font-size: var(--fontSizeSmall);

  /* On retina, emoji's resolution is much better */
  /* so we display it with a bigger font-size */
}

@media (min-resolution: 2dppx) {

.SmartViewList_emoji_3f7 {
    font-size: 16px;
    margin-left: 0;
    margin-right: var(--spacing-12);
}
  }

.SmartViewList_dragger_79c {
  display: none;
  cursor: grab;
}

.SmartViewList_link_f90 {
  display: flex;
  align-items: center;
  padding-left: var(--leftNavSpacing);
  padding-right: var(--leftNavSpacing);
}

.SmartViewList_link_f90,.SmartViewList_link_f90:hover,.SmartViewList_link_f90:focus,.SmartViewList_link_f90:active {
    color: var(--colorGray30);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.SmartViewList_login_as_97d :is(.SmartViewList_link_f90,.SmartViewList_link_f90:hover,.SmartViewList_link_f90:focus,.SmartViewList_link_f90:active) {
      color: var(--loginAsColor);
    }

.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4 {
    background-color: var(--colorGray80);
  }

:is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) .SmartViewList_editButton_f0c,:is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) .SmartViewList_unpinButton_386,:is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) .SmartViewList_dragger_79c {
      display: flex;
    }

:is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) .SmartViewList_bullet_98e {
      display: none;
    }

/* Prevent sorting the list while searching */

:is(.SmartViewList_root_e13.SmartViewList_isSearching_ad8 :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4)) .SmartViewList_editButton_f0c,:is(.SmartViewList_root_e13.SmartViewList_isSearching_ad8 :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4)) .SmartViewList_unpinButton_386,:is(.SmartViewList_root_e13.SmartViewList_isSearching_ad8 :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4)) .SmartViewList_bullet_98e {
        display: flex;
      }

:is(.SmartViewList_root_e13.SmartViewList_isSearching_ad8 :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4)) .SmartViewList_dragger_79c {
        display: none;
      }

.login_as :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) {
      background-color: var(--loginAsHover);
    }

.SmartViewList_link_f90.SmartViewList_linkActive_200 .SmartViewList_linkContent_cb4 {
    font-weight: var(--fontWeightBold);
    color: var(--colorWhite);
  }

:is(.SmartViewList_link_f90.SmartViewList_linkActive_200 .SmartViewList_linkContent_cb4) .SmartViewList_bullet_98e {
      opacity: 1;
    }

.SmartViewList_login_as_97d :is(.SmartViewList_link_f90.SmartViewList_linkActive_200 .SmartViewList_linkContent_cb4) {
      color: var(--loginAsColor);
    }

.SmartViewList_linkContent_cb4 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-4) var(--leftNavSpacing);
  border-radius: 24px;
}

.SmartViewList_text_64e {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.SmartViewList_unpinButton_386,
.SmartViewList_editButton_f0c {
  display: none;
  margin-left: var(--spacing-8);
  width: var(--spacing-16);
  height: var(--spacing-16);
  color: var(--colorIconNeutralWhite);
  opacity: 0.5;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: opacity 200ms;
}

:is(.SmartViewList_unpinButton_386,.SmartViewList_editButton_f0c) svg {
    width: var(--spacing-16);
    height: var(--spacing-16);
  }

:is(.SmartViewList_unpinButton_386,.SmartViewList_editButton_f0c):hover {
    opacity: 1;
  }

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

.SmartViewList_unpinButton_386,
.SmartViewList_editButton_f0c {
    display: flex;
}
  }

.SmartViewList_noResults_ee3 {
  color: var(--colorGray40);
  font-size: 13px;
  padding: 0 calc(var(--leftNavSpacing) * 2);
}

.SmartViewList_emptyState_014 {
  font-size: var(--fontSizeSmall);
  line-height: 16px;
  padding: 0 calc(var(--leftNavSpacing) * 2);
  color: var(--colorGray40);
  margin-bottom: var(--spacing-16);
}

.SmartViewList_emptyStateLink_462 {
  color: currentColor;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  transition: color 50ms ease-in-out;
}

.SmartViewList_emptyStateLink_462:hover {
    color: var(--colorWhite);
  }

.SmartViewList_showAll_21e {
  cursor: pointer;
  margin-left: calc((var(--leftNavSpacing) * 2) + 28px);
  font-size: var(--fontSizeTiny);
  font-weight: var(--fontWeightBold);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.SmartViewList_mark_5c6 {
  background: var(--colorGray70);
  color: var(--colorWhite);
}

.SmartViewList_skeletonTree_81c {
  list-style: none;
  margin: var(--spacing-16) var(--spacing-24);
}

.SmartViewList_skeleton_ab5 {
  display: grid;
  grid-template-columns: var(--spacing-12) 1fr;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-12);
}

@media screen and (min-width: 768px) {
    .SmartViewList_is-collapsed_9dc .SmartViewList_title_46a,.SmartViewList_is-collapsed_9dc .SmartViewList_text_64e,.SmartViewList_is-collapsed_9dc .SmartViewList_showAll_21e,.SmartViewList_is-collapsed_9dc .SmartViewList_emptyState_014 {
      display: none;
    }

    .SmartViewList_is-collapsed_9dc .SmartViewList_header_d16 {
      margin: 0;
      cursor: pointer;
    }

      :is(.SmartViewList_is-collapsed_9dc .SmartViewList_header_d16):hover .SmartViewList_searchIcon_22f {
        opacity: 1;
      }

    .SmartViewList_is-collapsed_9dc .SmartViewList_searchIcon_22f {
      padding: 18px var(--spacing-24) 18px;
      margin: 1px auto;
    }

    .SmartViewList_is-collapsed_9dc .SmartViewList_link_f90 {
      justify-content: center;
    }
        :is(.SmartViewList_is-collapsed_9dc .SmartViewList_link_f90):hover .SmartViewList_unpinButton_386,:is(.SmartViewList_is-collapsed_9dc .SmartViewList_link_f90):hover .SmartViewList_editButton_f0c {
          display: none;
        }

    .SmartViewList_is-collapsed_9dc .SmartViewList_dragger_79c,.SmartViewList_is-collapsed_9dc .SmartViewList_bullet_98e {
      margin: 0;
    }
}

.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);
}

.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;
}

.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;
    }

.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);
    }

.SavedSearchSharedWithKeystrokePicker_SavedSearchSharedWithKeystrokePickerTabs_tabsContainer_dbc {
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid var(--borderLight);
}

.ProfileDropdown {
  position: sticky;
  top: 0;
  z-index: 3;
}

.TopNav .ProfileDropdown {
    display: none;
  }

@media screen and (max-width: 767px) {
    .LeftNav .ProfileDropdown {
      display: none;
    }

    .TopNav .ProfileDropdown {
      display: block;
    }
        :is(:is(.TopNav .ProfileDropdown) .ProfileDropdown__opener),:is(:is(.TopNav .ProfileDropdown) .ProfileDropdown__opener):hover {
          background-color: transparent;
          padding: var(--spacing-8);
          border: 0;
        }

      :is(.TopNav .ProfileDropdown) .ProfileDropdown__info,:is(.TopNav .ProfileDropdown) .ProfileDropdown__infoSkeleton {
        display: none;
      }

      :is(.TopNav .ProfileDropdown) .ProfileDropdown__avatar {
        border-radius: var(--baseBorderRadius);
        width: var(--spacing-40);
        height: var(--spacing-40);
      }
  }

.ProfileDropdown__opener {
  align-items: center;
  display: flex;
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  border: 0;
  outline: 0;
  width: 100%;
  background: var(--bgNavSidebarProfilemenuDefault);
  color: var(--colorGray10);
}

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

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

.ProfileDropdown__opener:not([disabled]):hover,.ProfileDropdown__opener:not([disabled]):focus {
    background-color: var(--bgNavSidebarMenuitemHover);
  }

:is(.ProfileDropdown__opener:not([disabled]):hover,.ProfileDropdown__opener:not([disabled]):focus),:is(.ProfileDropdown__opener:not([disabled]):hover,.ProfileDropdown__opener:not([disabled]):focus) .ProfileDropdown__organization {
      color: var(--colorWhite);
    }

.login_as .ProfileDropdown__opener {
    background-color: var(--colorMagenta70);
    color: var(--colorMagenta10);
  }

:is(.login_as .ProfileDropdown__opener) .ProfileDropdown__organization {
      color: var(--colorMagenta30);
    }

:is(.login_as .ProfileDropdown__opener):hover,:is(.login_as .ProfileDropdown__opener):focus {
      background-color: var(--colorMagenta60);
      color: var(--colorWhite);
    }

:is(:is(.login_as .ProfileDropdown__opener):hover,:is(.login_as .ProfileDropdown__opener):focus) .ProfileDropdown__organization {
        color: var(--colorGray30);
      }

/* This is the "down arrow" for the ProfileDropdown */

.ProfileDropdown__opener::after {
    content: '';
    position: relative;
    right: 0;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: currentColor;
    margin: auto var(--spacing-12) auto auto;
  }

.ProfileDropdown__opener--loading:is(.ProfileDropdown__opener::after) {
      /*
      * Modify the border-color to make the "down arrow" invisible on
      * mobile. We do this instead of removing it from the flow in
      * order to preserve the positioning of everything, regardless
      * of visibility.
      */
      border-top-color: transparent;

      /*
      * We don't want to preserve the positioning of the "down arrow"
      * on desktop, so we remove it from the flow altogether.
      */
    }

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

.ProfileDropdown__opener--loading:is(.ProfileDropdown__opener::after) {
        display: none;
    }
      }

.ProfileDropdown__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.ProfileDropdown__avatar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ProfileDropdown__organization {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--fontSizeSmall);
  line-height: 16px;
  color: var(--colorGray40);

  max-width: 100%;
  transition: opacity 50ms ease-in-out;
}

.ProfileDropdown__infoSkeleton {
  display: none;
}

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

.ProfileDropdown__infoSkeleton {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    justify-content: center;
    padding-right: var(--spacing-20);
    width: 100%;
}
  }

.ProfileDropdown__name {
  font-size: var(--fontSizeSmall);
  line-height: 16px;
  font-weight: var(--fontWeightBold);
}

.ProfileDropdown__organizationName,
.ProfileDropdown__name {
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.is-collapsed .ProfileDropdown__opener {
    justify-content: center;
    padding: var(--spacing-12) 0;
  }

:is(.is-collapsed .ProfileDropdown__opener)::after {
      display: none;
    }

.is-collapsed .ProfileDropdown__info,.is-collapsed .ProfileDropdown__infoSkeleton {
    display: none;
  }

.is-collapsed .ProfileDropdown__avatar {
    margin: 0;
  }

.ProfilePopover_ProfilePopover_ProfilePopover_36b {
  min-width: 240px;
  max-width: 240px;
  box-sizing: border-box;
  padding: var(--spacing-12) 0;
}

.ProfilePopover_ProfilePopover_ProfilePopover_36b.ProfilePopover_ProfilePopover_fullWidth_bd5 {
    max-width: none;
  }

.ProfilePopover_ProfilePopover_ProfilePopover_36b.ProfilePopover_ProfilePopover_hasFooter_018 {
    padding-bottom: 0;
  }

.ProfilePopover_ProfilePopover_selectContainer_223 {
  box-sizing: border-box;
  padding: 0 var(--spacing-12) var(--spacing-8) var(--spacing-12);
}

/* fix specificity for profile links using UnstyledButton */
.ProfilePopover_ProfilePopover_link_4f8 {
  align-items: center;
  box-sizing: border-box;
  color: currentColor;
  cursor: pointer;
  display: flex;
  font-size: var(--fontSizeBase);
  gap: var(--spacing-8);
  line-height: 16px;
  margin: 0;
  padding: var(--spacing-8) var(--spacing-16);
  width: 100%;
}
.ProfilePopover_ProfilePopover_link_4f8:hover,.ProfilePopover_ProfilePopover_link_4f8:active {
    background-color: var(--bgMenuItemHover);
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }
.ProfilePopover_ProfilePopover_link_4f8 svg {
    display: block;
    height: var(--spacing-16);
    width: var(--spacing-16);
  }

.ProfilePopover_ProfilePopover_separator_572 {
  border-bottom: none;
  border-top-color: var(--borderDefault);
  margin: var(--spacing-8) 0;
}

.ProfilePopover_ProfilePopover_openApp_939 {
  align-items: center;
  background-color: var(--bgTableCellHover);
  border-top: 1px solid var(--borderDefault);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  display: flex;
  margin-top: var(--spacing-8);
}

.ProfilePopover_ProfilePopover_openAppLink_523 {
  display: flex;
  align-items: center;
  padding: var(--spacing-12) 15px;
  flex-grow: 1;
}

.ProfilePopover_ProfilePopover_openAppLink_523,.ProfilePopover_ProfilePopover_openAppLink_523:hover {
    color: inherit;
  }

.ProfilePopover_ProfilePopover_openAppLink_523 svg {
    display: block;
    width: var(--spacing-16);
    height: var(--spacing-16);
    margin-right: var(--spacing-8);
  }

@keyframes SupportSessionRecording_blinkAnimation_185 {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.SupportSessionRecording_container_ec4 {
  display: flex;
  color: var(--gray-05);
  line-height: var(--spacing-16);
}

.SupportSessionRecording_widget_407 {
  cursor: pointer;
  border-radius: 50px 0 0 50px;
  background-color: var(--gray-90);
  padding: var(--spacing-8);
  display: flex;
  align-items: center;
}

.SupportSessionRecording_recordIcon_402 {
  animation: SupportSessionRecording_blinkAnimation_185 1s infinite;
  margin: 0 var(--spacing-8);
}

.SupportSessionRecording_stopBtn_434 {
  border-radius: 0 50px 50px 0;
  padding-left: var(--spacing-16);
  background-color: var(--gray-90);
  padding: var(--spacing-8);
}

.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;
}

.statuspagebar-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  line-height: 30px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
  box-shadow: inset 0 0 3px 0 rgba(100, 69, 69, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: var(--successPrimaryColor);
}

.statuspagebar-icon-minor {
  background: var(--warningPrimaryColor);
}

.statuspagebar-icon-maintenance {
  background: var(--closeBrightBlue);
}

.statuspagebar-icon-major,
.statuspagebar-icon-critical {
  background: var(--failurePrimaryColor);
}

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

.SupportForm_headerDesc_bf9 {
  line-height: 20px;
}

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

.SupportForm_upper_8eb {
  border-bottom: 1px solid var(--borderDefault);
  display: grid;
  gap: var(--spacing-4);
  padding: 0 var(--spacing-12) var(--spacing-12) var(--spacing-12);
}

.SupportForm_root_f1f {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.SupportForm_inputSubject_878 {
  border: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  font-weight: var(--fontWeightBold);
  height: auto;
  padding: 0;
  width: 100%;
}

.SupportForm_inputSubject_878:focus {
    outline: none;
    box-shadow: none !important;
  }

.SupportForm_inputBody_c83 {
  border: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  min-height: 100px;
  padding: 0;
  resize: none;
  width: 100%;
}

.SupportForm_inputBody_c83:focus {
    box-shadow: none !important;
  }

.SupportForm_sessionRecordingAttachment_30a {
  color: var(--colorBrandGreen);
}

.SupportForm_Attachment_container_9ab {
  align-items: center;
  background-color: var(--bgCardBase);
  border: 1px solid var(--borderDefault);
  border-radius: var(--baseInputBorderRadius);
  display: flex;
  gap: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-8);
  position: relative;
}

.SupportForm_Attachment_container_9ab:hover {
    box-shadow: var(--shadowLevel2);
  }

.SupportForm_Attachment_containerError_faa {
  border-color: var(--failurePrimaryColor);
}

.SupportForm_Attachment_icon_c55 {
  display: inline-block;
}

.SupportForm_Attachment_name_477 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.SupportForm_Attachment_error_f1e {
  align-items: center;
  color: var(--failurePrimaryColor);
  display: flex;
  margin-right: 5px;
}

.SupportForm_Attachment_delete_9e8 {
  align-items: center;
  cursor: pointer;
  display: flex;
}

.SupportForm_Attachment_delete_9e8:hover {
    color: var(--gray-80);
  }

.SupportForm_Attachment_progress_6b4 {
  border-radius: 0;
  height: 100%;
  left: 0;
  mix-blend-mode: saturation;
  opacity: 0.5;
  position: absolute;
  width: 100%;
}

.SupportForm_Attachment_progress_6b4::-webkit-progress-bar {
    background-color: var(--bgDefault);
  }

.SupportForm_Attachment_progress_6b4::-webkit-progress-value {
    background-color: var(--bgLight);
  }

.SearchBox_searchBox_be8 {
  position: relative;
}

.SearchBox_textarea_28e {
  height: 40px;
  resize: none;
  padding: 9px;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
  width: 100%;
}

.SearchBox_backdrop_5e2 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
}

.SearchBox_showTopNav_290 {
  top: 56px;
}

@layer atom {
  .SearchBox_SearchInput_searchBox_9d2 {
    --inputHeightSmall: 38px;
    --inputLineHeight: 16px;
    --itemSidePadding: 12px;
    --iconHeight: 16px;
    --iconSmallHeight: 14px;
    --gap: 8px;
    --verticalPadding: var(--spacing-8);
    --fadeInOutTransition: opacity 100ms var(--standardCurve);
    --extraSpaceForScroll: 4px;

    position: relative;
    z-index: 1; /* ensure search box sits in front of backdrop */
    width: 100%;
    max-width: 500px;
    border: 1px solid transparent;
    background: var(--bgSearchEnabled);
    border-radius: var(--baseInputBorderRadius);
    box-sizing: border-box;
  }

    @media screen and (max-width: 767px) {
  .SearchBox_SearchInput_searchBox_9d2 {
      width: 100%;
  }
    }

    .SearchBox_SearchInput_searchBox_9d2:hover {
      background: var(--bgSearchHover);
    }
      .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_hasKeyboardShortcut_af5:hover .SearchBox_SearchInput_keyboardShortcut_2d3 {
        opacity: 1;
      }

    .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFullWidth_8fe {
      width: 100%;
      max-width: 700px;
    }

      .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFullWidth_8fe .SearchBox_SearchInput_clearButton_54c {
        /* Add extra room for possible scroll */
        right: calc(var(--itemSidePadding) + var(--extraSpaceForScroll));
      }
      .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_hasClearButton_d01 .SearchBox_SearchInput_clearButton_54c {
        opacity: 1;
        pointer-events: initial;
      }

    .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 {
      border-color: var(--borderDefault);
      background: var(--bgSearchActive);
      position: absolute;
    }

      .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 .SearchBox_SearchInput_textarea_a5e {
        white-space: unset;
        max-height: 90vh;
        overflow: auto;
        border-right: 0 solid !important;
        padding-right: calc(
          var(--itemSidePadding) + var(--iconHeight) +
            var(--extraSpaceForScroll) + var(--gap)
        );
      }

      @media screen and (max-width: 767px) {
        .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70.SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 {
          width: 100vw;
          max-width: unset;
          left: -48px;
          position: absolute;
        }

        .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 .SearchBox_SearchInput_searchBoxInputWrapper_d07 {
          display: flex;
          gap: 4px;
          padding: var(--verticalPadding) var(--spacing-16);
        }

          :is(.SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 .SearchBox_SearchInput_searchBoxInputWrapper_d07) button {
            margin-top: var(--verticalPadding);
            align-self: flex-start;
          }

        .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 .SearchBox_SearchInput_textareaWrapper_43d {
          border: 1px solid var(--borderLight) !important;
        }

        .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 .SearchBox_SearchInput_textarea_a5e {
          padding-right: calc(
            var(--itemSidePadding) + var(--itemSidePadding) + 16px
          );
          border-right: 0 solid !important;
        }

        .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 .SearchBox_SearchInput_clearButton_54c {
          top: calc((var(--inputHeightSmall) + 2px - var(--iconHeight)) / 2);
        }
      }
    .SearchBox_SearchInput_searchBox_9d2:has(textarea:read-only) {
      background-color: var(--formBackgroundDisabled);
    }

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

  .SearchBox_SearchInput_searchIcon_50c {
    position: absolute;
    margin-top: calc((var(--inputHeightSmall) - var(--iconHeight)) / 2);
    margin-left: 12px;
    color: var(--colorTextMedium);
    pointer-events: none;
  }

  .SearchBox_SearchInput_clearButton_54c {
    top: calc((var(--inputHeightSmall) - var(--iconSmallHeight)) / 2);
    right: var(--itemSidePadding);
    position: absolute;
    cursor: pointer;
    color: var(--colorTextMedium);
    opacity: 0;
    pointer-events: none;
    transition: var(--fadeInOutTransition);
  }

  .SearchBox_SearchInput_keyboardShortcut_2d3 {
    position: absolute;
    top: calc((var(--inputHeightSmall) - var(--iconSmallHeight)) / 2);
    right: 8px;
    display: grid;
    align-self: center;
    grid-auto-flow: column;
    gap: 4px;
    margin-right: 8px;
    pointer-events: none;
    opacity: 0;
    transition: var(--fadeInOutTransition);
  }

  .SearchBox_SearchInput_textareaWrapper_43d {
    width: 100%;
    position: relative;
    border: 1px solid transparent;
    border-radius: var(--baseInputBorderRadius);
    overflow: hidden;
  }

  .SearchBox_SearchInput_textarea_a5e {
    min-height: var(--inputHeightSmall);
    max-height: var(--inputHeightSmall);
    resize: none;
    padding: calc((var(--inputHeightSmall) - var(--inputLineHeight)) / 2) 0;
    /* make space for search icon and align with items */
    padding-left: calc(var(--iconHeight) + var(--itemSidePadding) + var(--gap));
    border: none;
    outline: none;
    /* we want to shrink the textarea (to make space for the clear button)
     but still fucus when user clicks the textarea */
    border-right: calc(var(--itemSidePadding) + var(--iconHeight) + var(--gap))
      solid;
    border-color: transparent !important;
    line-height: var(--inputLineHeight);
    letter-spacing: 0.25px;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    word-break: normal;
    white-space: nowrap;
    width: 100%;
    margin: 0;
    background: transparent;
    overflow: hidden;
  }

    .SearchBox_SearchInput_textarea_a5e:focus {
      background: transparent;
      box-shadow: none !important; /* default textarea styles */
    }
}

.SearchBox_SearchDropdown_dropdown_9ca {
  display: none;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  box-shadow: var(--shadowLevel3);
  background: var(--surfaceBackgroundDefault);
  border-top: 1px solid var(--borderDefault);
  box-sizing: border-box;
  border-radius: 0 0 var(--baseInputBorderRadius) var(--baseInputBorderRadius);
  max-height: calc(100vh - 58px); /* 58px = 48px top offset + 10px slack */
  overflow-y: auto;
}

.SearchBox_SearchDropdown_dropdown_9ca.SearchBox_SearchDropdown_isOpen_4c2 {
    display: block;
  }

.SearchBox_SearchDropdown_group_2d9 {
  border-top: 1px solid var(--borderDefault);
  border-bottom: 1px solid var(--borderDefault);
  margin: 12px 0;
  padding: 12px 0;
}

.SearchBox_SearchDropdown_group_2d9:first-child,.SearchBox_SearchDropdown_group_2d9 + .SearchBox_SearchDropdown_group_2d9 {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }

.SearchBox_SearchDropdown_group_2d9:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }

.SearchBox_SearchDropdown_groupTitle_1b9 {
  color: var(--gray-50);
  font-size: 11px;
  font-weight: var(--fontWeightBold);
  text-transform: uppercase;
  padding: 5px 15px;
  -webkit-user-select: none;
          user-select: none;
}

.SearchBox_Result_item_27e {
  display: flex;
  align-items: center;
  color: var(--colorTextMedium);
  padding: 7px 15px;
  cursor: pointer;
}

.SearchBox_Result_item_27e:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--colorTextMedium);
  }

.SearchBox_Result_item_27e:active,.SearchBox_Result_item_27e.SearchBox_Result_isHighlighted_843:active {
    background: var(--bgActiveMuted);
  }

.SearchBox_Result_item_27e.SearchBox_Result_isHighlighted_843 {
    background: var(--bgMenuItemHover);
    color: var(--colorTextDefault);
  }

.SearchBox_Result_item_27e.SearchBox_Result_isHighlighted_843 .SearchBox_Result_itemEnterIcon_25e {
      opacity: 1;
    }

.SearchBox_Result_item_27e.SearchBox_Result_isHighlighted_843 .SearchBox_Result_itemSearchIcon_8bc {
      color: var(--colorIconDefault);
    }

.SearchBox_Result_item_27e.SearchBox_Result_isHighlighted_843 .SearchBox_Result_itemAdditionalInfo_750 {
      display: inline;
    }

.SearchBox_Result_item_27e.SearchBox_Result_isHighlighted_843 .SearchBox_Result_aiSuggestionIcon_d6e {
      color: var(--fillActive);
    }

.SearchBox_Result_itemSearchIcon_8bc {
  color: var(--colorIconLight);
  margin-right: 12px;
}

.SearchBox_Result_aiSuggestionIcon_d6e {
  color: var(--fillActive);
}

.SearchBox_Result_itemEnterIcon_25e {
  opacity: 0;
  color: var(--colorTextMedium);
  margin-left: 12px;
}

.SearchBox_Result_itemTitle_ab2 {
  font-size: 14px;
  flex: 1;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 12px;
}

.SearchBox_Result_itemTitle_ab2 mark {
    font-style: normal;
    font-weight: var(--fontWeightBold);
    background: none;
    color: var(--colorTextDefault);
  }

.SearchBox_Result_leadInfo_e2d {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 40%;
  font-size: 12px;
}

.SearchBox_Result_leadInfoIcon_167 {
  line-height: 1;
}

.SearchBox_Result_itemAdditionalInfo_750 {
  font-size: 12px;
  margin-left: 8px;
  color: #767676;
  display: none;
  line-height: 1;
}

.SearchBox_Result_itemAdditionalInfo_750 mark {
    color: inherit;
  }

.SearchBox_Result_itemIcon_b5d {
  line-height: normal;
  margin: 0 4px;
  vertical-align: bottom;
}

.SearchBox_Result_badge_f00 {
  margin-left: 8px;
  line-height: 1;
  align-self: center;
}

.TopNav {
  display: flex;
  background-color: var(--surfaceBackgroundDefault);
  height: var(--topNavHeight);
  width: 100%;
  border-bottom: 1px solid var(--borderLight);
  color: var(--colorTextMedium);
  padding-left: 8px;
  box-sizing: border-box;
  z-index: 103; /* in front of LeftNav */
}

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

.TopNav {
    z-index: 1010; /* in front of .LeftNav & mobile ActivityActions */
}
  }

:fullscreen .TopNav {
    display: none;
  }

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

.TopNav {
    background-color: color-mix(in srgb, #000 20%, var(--bgNavSidebar));
    padding: 0;
}

    .login_as .TopNav {
      background-color: var(--colorLoginAsSurface);
    }

    .TopNav .TopNav--light {
      background-color: var(--surfaceBackgroundDefault);
      box-shadow: none;
    }

    .TopNav .TopNav__mobileMenuOpener {
      color: var(--colorIconNeutralWhite);
      display: block;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8px 4px;
      box-sizing: border-box;
    }

    .TopNav .TopNav__navigation,.TopNav .TopNav__buttons {
      display: none;
    }
  }

.TopNav__mobileMenuOpener {
  display: none;
}

.TopNav__navigation {
  display: flex;
  padding: 8px 8px 8px 0;
}

.TopNav__navigationButton {
  cursor: pointer;
  width: 40px;
  height: 40px;
  padding: 12px;
  box-sizing: border-box;
}

.TopNav__navigationButton:hover {
    color: var(--colorTextDefault);
    background: rgba(0, 0, 0, 0.05);
    border-radius: 20px;
  }

.TopNav__navigationButton--forward {
  transform: scaleX(-1);
}

.TopNav__buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 8px;
  margin: 8px;
  align-items: center;
  justify-items: center;
}

.TopNav_searchBoxContainer_9a8 {
  flex: 1 0;
  margin: 8px 0;
  position: relative;
  z-index: 4; /* above lead page stuff, but below modals */
}.TopNav_searchBoxContainer_9a8:first-child {
    margin-left: 16px;
  }

/* Pulse opacity between 100% and 50%, with a short pause at each extreme. */
@keyframes Popover_pulseOpacity_ffc {
  0% {
    opacity: 100%;
  }

  10% {
    opacity: 100%;
  }

  90% {
    opacity: 50%;
  }

  100% {
    opacity: 50%;
  }
}

.Popover_connected_634 {
}

.Popover_notReadyToConnect_c97 {
  opacity: 50%;
}

.Popover_connecting_ce2 {
  animation-name: Popover_pulseOpacity_ffc;
  animation-duration: 0.75s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.Popover_failed_5d4 {
  color: var(--colorTextDanger);
}

.SupportedPlan_popoverContent_148 {
  width: 320px;
  max-width: 320px;
}

.SupportedPlan_header_43b {
  margin: -8px -14px; /* remove popover standard margin */
}

.CallingPermission_PermissionCard_recordingDescription_26b {
  /* Set min height so layout shift is smooth when Slideable is rendered */
  min-height: 32px;
}

.CallingPermission_PermissionCard_recordingAckText_5b3 {
  font-size: 13px;
  line-height: 20px;
  text-align: justify;
  color: var(--colorTextLight);
}

.CallingCard_container_e9e {
  background-color: var(--bgCardLight);
  border: 1px solid var(--borderLight);
  border-radius: var(--baseBorderRadius);
  text-align: center;
}

.CallingCard_iconContainer_ff9 {
  border: 1px solid transparent;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.CallingCard_iconContainer_ff9.CallingCard_light_301 {
    background-color: var(--bgCardBase);
    border-color: var(--borderLight);
  }

.CallingCard_iconContainer_ff9.CallingCard_dark_74f {
    background-color: var(--surfaceBackgroundDark);
  }

.CallServiceStatus_container_130 {
  background-color: var(--bgWarn);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;

  text-align: center;
}

.CallServiceStatus_container_130.CallServiceStatus_loading_172 {
    background-color: var(--surfaceBackgroundDark);
  }

.CallServiceStatus_text_8d3 {
  color: var(--colorTextNeutralBlack);
  font-weight: var(--fontWeightBold);
}

.AudioSettings_controlsGrid_6b8 {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  grid-gap: var(--spacing-8);
}

.AudioSettings_controlsGrid_6b8 label {
    /* Every label will start a new row, so we don't have to fill rows with spacer elements. */
    grid-column-start: 1;
    margin: 0;
    color: var(--colorTextMedium);
  }

.AudioSettings_microphoneIndicator_300 {
  grid-column-start: 2;
}

.AudioSettings_warnIcon_613 {
  color: var(--failurePrimaryColor);
}

.MicrophoneLevelIndicator_microphoneLevelIndicator_d7a {
  display: flex;
  width: 100%;
  gap: 1px;
}

.MicrophoneLevelIndicator_microphoneLevelIndicatorStep_ee5 {
  flex: 1;
  height: 4px;
  background-color: var(--colorGray20);
  transition: background-color 300ms cubic-bezier(0.19, 1, 0.22, 1);
}

.MicrophoneLevelIndicator_microphoneLevelIndicatorStep_ee5.MicrophoneLevelIndicator_active_8bd {
    background-color: var(--fillSuccess);
  }

.AutoRecordCallsToggle_acknowledge_4c5 {
  /* eat through the padding of the popover body and the margin to the divider */
  margin: 0 calc(var(--spacing-16) * -1) calc(var(--spacing-16) * -1);
  background-color: var(--surfaceBackgroundMedium);
}

.CallingPermission_NotificationCard_card_900 {
  border: 1px solid var(--borderLight);
  background-color: var(--bgCardLight);
  border-radius: var(--baseBorderRadius);
}

.CallingPermission_NotificationCard_request_6db {
  border-color: var(--borderInformationalMuted);
  background-color: var(--bgInformationalMuted);
}

.CallingPermission_NotificationCard_denied_be5 {
  border-color: var(--borderDangerMuted);
  background-color: var(--bgDangerMuted);
  color: var(--colorTextDanger);
}

.v2_container_ab5 {
  display: flex;
  flex-direction: row;
}

.v2_inputWrapper_16a {
  flex: 1;
}

.v2_input_f40 {
  border-top-left-radius: var(--baseInputBorderRadius);
  border-bottom-left-radius: var(--baseInputBorderRadius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid var(--borderDefault);
}

.v2_input_f40:focus {
    border-color: var(--borderFocused);
  }

.v2_copy_1a4 {
  align-items: center;
  border-top-right-radius: var(--baseInputBorderRadius);
  border-bottom-right-radius: var(--baseInputBorderRadius);
  border-color: var(--borderDefault);
  border-style: solid;
  border-width: 1px 1px 1px 0;
  display: flex;
  justify-content: center;
  width: 40px;

  /* copied from button */
}

.v2_copy_1a4:hover {
    background: var(--surfaceBackgroundDark);
    color: var(--colorTextDefault);
    cursor: pointer;
  }

.SupportedPlan_NoNumbersAlert_illustration_b79 {
  width: 42px;
}

.SupportedPlan_NoNumbersAlert_container_a8e {
  border-radius: var(--baseBorderRadius);
  background-color: var(--bgActiveMuted);
  text-align: center;
}

.SupportedPlan_DialNumberFooter_container_d22 {
  background-color: var(--bgCardLight);
  border-top: 1px solid var(--borderLight);
}

.DialNumber_form_6fa {
  margin: 0;
}

.SupportForm_SupportFormFooter_bottom_9f9 {
  background-color: var(--bgLightMuted);
  border-top: 1px solid var(--borderLight);
  display: flex;
  gap: var(--spacing-8);
  justify-content: flex-end;
  padding: var(--spacing-12);
}

.SupportMenu_SupportFormMenu_root_823 {
  border-radius: var(--popoverBorderRadius);
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  max-width: 376px;
  overflow: hidden;
}

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

.SupportMenu_SupportFormMenu_form_663 {
  overflow-y: scroll;
}

.SupportMenu_SupportMenu_list_3fa {
  margin: var(--spacing-8) 0;
}

.SupportMenu_SupportMenu_separator_9a5 {
  background-color: var(--borderLight);
  border: none;
  height: 1px;
  margin: var(--spacing-8) 0;
  width: 100%;
}

.SupportMenu_SupportMenuItem_root_b55 {
  align-items: center;
  background-color: transparent;
  box-sizing: border-box;
  border: none;
  color: currentColor;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  font-size: 14px;
  gap: var(--spacing-8);
  line-height: 16px;
  margin: 0;
  padding: 8px 16px;
  text-align: left;
  width: 100%;
  -webkit-user-select: none;
          user-select: none;
}

.SupportMenu_SupportMenuItem_root_b55:hover,.SupportMenu_SupportMenuItem_root_b55:focus,.SupportMenu_SupportMenuItem_root_b55:active {
    outline: none;
    background-color: var(--bgMenuItemHover);
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

:is(.SupportMenu_SupportMenuItem_root_b55:hover,.SupportMenu_SupportMenuItem_root_b55:focus,.SupportMenu_SupportMenuItem_root_b55:active) .SupportMenu_SupportMenuItem_alert_0e9:after {
      border-color: var(--bgMenuItemHover);
    }

:is(.SupportMenu_SupportMenuItem_root_b55:hover,.SupportMenu_SupportMenuItem_root_b55:focus,.SupportMenu_SupportMenuItem_root_b55:active) .SupportMenu_SupportMenuItem_external_eaa {
      opacity: 1;
    }

.SupportMenu_SupportMenuItem_root_b55 svg {
    display: block;
    height: 16px;
    width: 16px;
  }

.SupportMenu_SupportMenuItem_alert_0e9 {
  position: relative;
}

.SupportMenu_SupportMenuItem_alert_0e9:after {
    background-color: var(--colorLinkDefault);
    border: 2px solid var(--surfaceBackgroundDefault);
    border-radius: 50%;
    content: ' ';
    display: block;
    height: 8px;
    position: absolute;
    right: -4px;
    top: -4px;
    width: 8px;
  }

.SupportMenu_SupportMenuItem_external_eaa {
  color: var(--colorIconLight);
  opacity: 0;
}

.NotetakerRecordingToggle_base_ba2 {
  --badgeWidth: 91px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: var(--badgeWidth);
}

.NotetakerRecordingToggle_base_ba2.NotetakerRecordingToggle_statusRecording_ed2 .NotetakerRecordingToggle_indicator_210 {
      background-color: var(--colorBgMessageMeeting);
      border-color: var(--colorBgMessageMeeting);
    }

.NotetakerRecordingToggle_base_ba2.NotetakerRecordingToggle_statusRecording_ed2 .NotetakerRecordingToggle_separator_7c0 {
      background-color: var(--colorBorderMessageMeeting);
    }

.NotetakerRecordingToggle_base_ba2.NotetakerRecordingToggle_statusRecording_ed2 .NotetakerRecordingToggle_indicatorStatusText_2a0 {
      color: var(--colorBgBadgeMeeting);
    }

.NotetakerRecordingToggle_base_ba2.NotetakerRecordingToggle_statusPaused_c85 .NotetakerRecordingToggle_indicator_210 {
      background-color: var(--bgLightMuted);
      border-color: var(--borderLight);
    }

.NotetakerRecordingToggle_base_ba2.NotetakerRecordingToggle_statusPaused_c85 .NotetakerRecordingToggle_separator_7c0 {
      background-color: var(--borderDefault);
    }

.NotetakerRecordingToggle_base_ba2.NotetakerRecordingToggle_statusPaused_c85 .NotetakerRecordingToggle_indicatorStatusText_2a0 {
      color: var(--colorTextLight);
    }

.NotetakerRecordingToggle_indicator_210 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--badgeWidth);
  height: 32px;
  padding: 0 var(--spacing-4) 0 var(--spacing-8);
  border-radius: 100px;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.NotetakerRecordingToggle_indicatorStatusText_2a0 {
  font-size: 11px;
  font-weight: 600;
}

.NotetakerRecordingToggle_separator_7c0 {
  display: block;
  flex: none;
  width: 1px;
  height: 12px;
  margin-right: var(--spacing-4);
  margin-left: var(--spacing-12);
}

.elements_MeetingBarNotetakerStatus_container_771 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

/* Custom divider styles. In this context the Divider component collapses and isn't visible */
.elements_MeetingBarNotetakerStatus_divider_2db {
  width: 1px;
  height: 32px;
  background-color: var(--dividerColor);
}

.elements_MeetingReminderBar_root_1a3 {
  --dividerColor: var(--colorBorderMessageMeeting);

  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr min-content;
  align-items: center;
  font-size: var(--fontSizeBase);
  position: relative;
  width: 100%;
  height: 100%;
  container: bar / inline-size;

  border-top: 1px solid var(--colorBorderMessageMeeting);
  border-bottom: 1px solid var(--colorBorderMessageMeeting);
  color: var(--colorTextDefault);
  background-color: var(--colorBgMessageMeeting);
}

.elements_MeetingReminderBar_root_1a3.elements_MeetingReminderBar_inProgress_883 {
    --dividerColor: var(--borderDefault);
    background-color: var(--surfaceBackgroundDefault);
    border-top: none;
    border-bottom: 2px solid var(--colorBgMeetingBar);
  }

.elements_MeetingReminderBar_closeButton_1c7 {
  box-sizing: border-box;
  align-self: start;
  padding-top: var(--spacing-12);
  padding-right: var(--spacing-12);
}

@container bar (min-width: 500px) {

.elements_MeetingReminderBar_closeButton_1c7 {
    align-self: center;
    padding-top: 0;
    padding-right: var(--spacing-24);
}
  }

.elements_MeetingReminderBar_inner_1c3 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  height: 100%;
}

@container bar (min-width: 500px) {

.elements_MeetingReminderBar_inner_1c3 {
    align-items: center;
    flex-direction: row;
    padding: 0;
}
  }

.elements_MeetingReminderBar_meetingTime_dbf {
  box-sizing: border-box;
  display: flex;
  gap: var(--spacing-8);
  padding: var(--spacing-12) var(--spacing-16) 0 var(--spacing-16);
}

@container bar (min-width: 500px) {

.elements_MeetingReminderBar_meetingTime_dbf {
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-right: 1px solid var(--dividerColor);
    padding-top: 0;
    padding-right: var(--spacing-24);
}
  }

.elements_MeetingReminderBar_content_235 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;

  padding: var(--spacing-12) var(--spacing-16);
  gap: var(--spacing-16);
}

@container bar (min-width: 500px) {

.elements_MeetingReminderBar_content_235 {
    align-items: center;
    flex-direction: row;
}
  }

.elements_MeetingReminderBar_details_cf9 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

@container bar (min-width: 500px) {

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

.elements_MeetingReminderBar_innerDetails_c5c {
  box-sizing: border-box;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.elements_MeetingReminderBar_desc_230 {
  color: var(--colorTextDefault);
  flex-shrink: 0;
}

.elements_MeetingReminderBar_desc_230:hover {
    color: var(--colorTextDefault);
  }

.elements_MeetingReminderBar_notResponded_2b3 {
  flex-shrink: 0;
}

.elements_MeetingReminderBar_leadName_4ce {
  color: var(--colorTextLight);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


  .UpcomingMeetingReminderBars_UpcomingMeetingReminderBars_root_d9c div + div > div {
    border-top: none;
  }

.TaskReminder_SnoozeButton_root_f2a {
  min-width: 200px;
}

.TaskReminder_SnoozeButton_header_456 {
  padding: 0 16px;
}

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

@container message (max-width: 500px) {

.TaskReminder_SnoozeButton_hideOnSmall_3a8 {
    display: none;
}
  }

.TaskReminder_SnoozeButton_showOnSmall_2dc {
  display: none;
}

@container message (max-width: 500px) {

.TaskReminder_SnoozeButton_showOnSmall_2dc {
    display: flex;
}
  }

.TaskReminder_TaskReminder_root_55e {
  container: taskReminder / inline-size;
}

:is(.TaskReminder_TaskReminder_root_55e + .TaskReminder_TaskReminder_root_55e)  > div {
    border-top: none;
  }

.TaskReminder_TaskReminder_inner_c68 {
  display: grid;
  gap: var(--spacing-24);
  grid-template-columns: auto 1fr;
}

@container message (max-width: 500px) {

.TaskReminder_TaskReminder_inner_c68 {
    align-items: flex-start;
    gap: var(--spacing-16);
    grid-template-columns: 1fr;
}
  }

.TaskReminder_TaskReminder_left_297 {
  align-items: center;
  border-right: 1px solid var(--colorBorderMessageTask);
  display: flex;
  padding-right: var(--spacing-24);
}

@container message (max-width: 500px) {

.TaskReminder_TaskReminder_left_297 {
    border-right: none;
    padding-right: 0;
}
  }

.TaskReminder_TaskReminder_icon_7ea {
  color: var(--colorIconDefault);
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}

.TaskReminder_TaskReminder_actions_ca0 {
  display: flex;
  gap: var(--spacing-16);
}

@container message (max-width: 500px) {

.TaskReminder_TaskReminder_actions_ca0 {
    flex-direction: row-reverse;
    gap: var(--spacing-8);
}
  }

.TaskReminder_TaskReminder_desc_154 {
  color: var(--colorTextLight);
}

.TaskReminder_TaskReminder_desc_154:hover {
    color: var(--colorTextLight);
  }

.UpcomingTaskReminderBars_UpcomingTaskReminderBars_showMore_e7c {
  background: var(--bgLight);
  color: var(--colorTextMedium);
  cursor: pointer;
  display: block;
  padding: var(--spacing-4);
  text-align: center;
  width: 100%;
}

.UsageNotice_main_b55 {
  display: flex;
  align-items: center;
  height: 72px;
  background: var(--closeLightBlue);
  padding: 16px 24px;
  box-sizing: border-box;
}

.UsageNotice_left_2c0 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.UsageNotice_right_a5e {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.UsageNotice_title_e55 {
  font-size: 16px;
  font-weight: var(--fontWeightBold);
  line-height: 1;
  margin: 0 0 4px 0;
}

.UsageNotice_text_bfe {
  font-size: 14px;
  line-height: 20px;
}

.UsageNotice_or_b32 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 12px;
  font-weight: var(--fontWeightBold);
  text-transform: uppercase;
  line-height: 16px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  margin: 0 var(--spacing-16);
}

.UsageNotice_close_430 {
  cursor: pointer;
  margin-left: 16px;
}

.UsageNotice_close_430:hover {
    color: var(--colorLinkDefault);
  }

.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;
  }
}

.ConnectedAccountsModal_loader_6ad {
  display: block;
  margin: auto;
  padding: 80px;
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_container_77e {
  margin: -15px; /* eat default modal padding */
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_option_f51 {
  padding: 15px;
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_calendar_bce,
.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_loader_751 {
  margin-top: 8px;
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_loader_751 {
  padding: 16px 0;
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_error_7a7 {
  margin-top: 24px;
}

.ConnectedAccountsModal_StepRevokeOthers_radios_810 {
  margin-top: var(--spacing-24);
}

.ConnectedAccountsModal_StepRevokeOthers_radio_06d {
  margin-top: var(--spacing-4);
}

.ConnectedAccountsModal_StepRevokeOthers_separator_7c6 {
  margin: var(--spacing-16) 0;
}

.ConnectedAccountsScreen_AccountListHeader_header_dc1 {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  background: var(--surfaceBackgroundMedium);
}

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

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


.ConnectedAccountsScreen_AccountListUpsell_content_c4d {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

.ConnectedAccountsScreen_AccountListUpsell_ctas_1a3 {
  margin-top: 24px;
}

.ConnectedAccountsScreen_AccountListUpsell_learnMore_cac {
  margin-left: 8px;
}

.ConnectedAccountsModal_StepSelectConnectedAccountTypeContainer_radioGroup_048 {
  margin: -15px;
  background: var(--surfaceBackgroundDark);
}

.ConnectedAccountsModal_ConnectedAccountRadioItem_item_95e {
  --contentPadding: 12px 21px 12px 16px;
  background: var(--surfaceBackgroundDefault);
}

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

.ConnectedAccountsModal_ConnectedAccountRadioItem_header_485 {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  grid-gap: 15px;
  align-items: center;
  padding: var(--contentPadding);
  margin: 0;
  cursor: pointer;
}

.ConnectedAccountsModal_ConnectedAccountRadioItem_icon_5fc {
  width: 32px;
  height: 32px;
}

.ConnectedAccountsModal_ConnectedAccountRadioItem_title_6f5 {
  font-weight: var(--fontWeightBold);
  font-size: 16px;
  line-height: 20px;
}

.ConnectedAccountsModal_ConnectedAccountRadioItem_description_f6a {
  font-size: 14px;
  line-height: 20px;
  color: var(--colorTextMedium);
}

input[type='radio'].ConnectedAccountsModal_ConnectedAccountRadioItem_radio_7cd {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.ConnectedAccountsModal_ConnectedAccountRadioItem_content_3fd {
  padding: var(--contentPadding);
  border-top: 1px solid var(--borderLight);
  line-height: 20px;
}

.ConnectedAccountsModal_CustomEmailForm_form_676 {
  margin-bottom: 0;
}

.LeadScreen_promoStyles_promo_918 {
  margin-bottom: 24px;
  border-radius: var(--baseBorderRadius);
  border: 1px solid var(--borderDefault);
}

.LeadScreen_promoStyles_promo_918:empty {
    display: none;
  }

.LeadScreen_promoStyles_microsoftPromo_a4d {
  border-radius: var(--baseBorderRadius);
  border: 1px solid var(--borderDefault);
}

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

.NewLeadModalContainer_inputs_7e0 {
  display: grid;
  grid-template-columns: 1fr;
}

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

.NewLeadModalContainer_inputs_7e0 {
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
  }

.NewLeadModalContainer_companyName_4a7 {
  overflow: hidden;
  white-space: nowrap;
  display: block;
  max-width: 260px;
  text-overflow: ellipsis;
  font-weight: var(--fontWeightBold);
}

.NewLeadModalContainer_details_c55 {
  height: 40px;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.NewLeadModalContainer_dividerText_ec6 {
  background-color: var(--surfaceBackgroundDefault);
  padding: 0 var(--spacing-16);
}

.ScrollDisclosure_box_724 {
  position: relative;
}

.ScrollDisclosure_box_724::before,.ScrollDisclosure_box_724::after {
    position: absolute;
    z-index: 1;
    content: '';
    transition: box-shadow 0.1s ease;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

.ScrollDisclosure_box_724.ScrollDisclosure_wrapsTable_68f {
    box-shadow: var(--tableShadow);
    border-radius: calc(var(--tableBorderRadius) - 1px);
  }

.ScrollDisclosure_box_724.ScrollDisclosure_hasOverflow_26f {
    overflow: hidden;
  }

.ScrollDisclosure_overflowsLeft_a33::before {
  box-shadow: 14px 0 12px -12px rgba(0, 0, 0, 0.1) inset;
}

.ScrollDisclosure_overflowsRight_fcf::after {
  box-shadow: -14px 0 12px -12px rgba(0, 0, 0, 0.1) inset;
}

.ScrollDisclosure_inner_c8a {
  transform: translate3d(0, 0, 0);
}

.ScrollDisclosure_hasOverflow_26f .ScrollDisclosure_inner_c8a {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

.NextLead_key_b5a {
  min-width: 8px;
  padding: 0 var(--spacing-4);
  color: var(--gray-10);
  border-radius: 3px;
  background-color: var(--gray-60);
  line-height: 16px;
  font-size: 13px;
  font-weight: normal;
}

.NextLead_tipText_2d4 {
  color: var(--colorTextNeutralWhite);
}

.NextLead_wrapper_1c1 {
  z-index: var(--zindexFloatingUI);

  --nextLeadBorderRadius: 50px;
  /* without hover support we want to display an expanded version all the time */
  width: 300px;
  display: flex;
}

@media (max-width: 480px) {

.NextLead_wrapper_1c1 {
    display: none;
}
  }

@media (hover: hover) {
    @media (max-width: 480px) {

.NextLead_wrapper_1c1 {
      display: none;
}
    }

.NextLead_wrapper_1c1 {

    width: 52px;
    transition: width 0.2s ease-in-out;
    flex-direction: column-reverse;
    pointer-events: none;
}

    .NextLead_wrapper_1c1:hover {
      width: 250px;
    }

      .NextLead_wrapper_1c1:hover .NextLead_container_e86 {
        gap: var(--spacing-16);
      }

      .NextLead_wrapper_1c1:hover .NextLead_content_eb2,.NextLead_wrapper_1c1:hover .NextLead_previousBtn_7c9,.NextLead_wrapper_1c1:hover .NextLead_contactName_d93,.NextLead_wrapper_1c1:hover .NextLead_listLink_939 {
        opacity: 1;
      }

      .NextLead_wrapper_1c1:hover .NextLead_dismissWrapper_c0a {
        display: flex;
      }
  }

.NextLead_content_eb2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
  gap: var(--spacing-4);
}

@media (hover: hover) {

.NextLead_content_eb2 {
    opacity: 0;
}
  }

.NextLead_container_e86 {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
  padding: var(--spacing-8);

  background-color: var(--colorBgNextLead);
  border-top-left-radius: var(--nextLeadBorderRadius);
  border-bottom-left-radius: var(--nextLeadBorderRadius);

  color: var(--gray-05);
}

@media (hover: hover) {

.NextLead_container_e86 {
    gap: 0;
    padding: 0;
    justify-content: flex-end;
    border-radius: var(--nextLeadBorderRadius);
    pointer-events: auto;
}
  }

.NextLead_dismissWrapper_c0a {
  display: flex;
}

@media (hover: hover) {

.NextLead_dismissWrapper_c0a {
    display: none;
    justify-content: flex-end;
    padding-bottom: var(--spacing-16);
    pointer-events: auto;

    /* Small hack to make a click on the empty space above NextLead to collapse the button */
}
    .NextLead_dismissWrapper_c0a:focus {
      pointer-events: none;
    }
  }

@media (hover: none) {

.NextLead_dismissBtn_455::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 0;
    height: 60%;
    border-left: 1px solid var(--gray-40);
}
  }

.NextLead_dismissBtn_455 {
  position: relative;
  padding: var(--spacing-8) var(--spacing-16);

  background-color: var(--colorBgNextLead);
  color: var(--gray-05);
  border-top-right-radius: var(--nextLeadBorderRadius);
  border-bottom-right-radius: var(--nextLeadBorderRadius);
}

@media (hover: hover) {

.NextLead_dismissBtn_455 {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    border-radius: var(--nextLeadBorderRadius);
    padding: var(--spacing-8);
    margin-right: var(--spacing-8);
}
  }

.NextLead_contactWrapper_99c {
  max-width: 100%;
  line-height: 16px;
}

.NextLead_contactName_d93,
.NextLead_listLink_939 {
  color: var(--gray-10);
  font-size: 13px;

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

@media (hover: hover) {

.NextLead_contactName_d93,
.NextLead_listLink_939 {
    opacity: 0;
}
  }

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

.NextLead_listLink_939 {
  max-width: 100%;
  line-height: 16px;
  font-weight: 400;
}

@media (hover: hover) {
    .NextLead_listLink_939:hover {
      color: var(--gray-10);
    }
  }

.NextLead_arrowBtn_d91 {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  outline: none;
}

.NextLead_arrowBtn_d91:disabled {
    color: var(--gray-40);
    cursor: not-allowed;
  }

@media (hover: hover) {

.NextLead_arrowBtn_d91 {
    width: 52px;
    height: 52px;
}

    .NextLead_arrowBtn_d91:hover:enabled {
      color: var(--white);
    }
  }

@media (hover: hover) {

.NextLead_previousBtn_7c9 {
    opacity: 0;
}
  }

.CommandPaletteModal_CommandPaletteInput_input_1de {
  border: none;
  width: auto;
  font-size: var(--headingSizeLarge);
  background-color: var(--surfaceBackgroundDefault);
  padding: var(--spacing-24) var(--spacing-16);
  outline: none !important;
}

.CommandPaletteModal_CommandPaletteInput_input_1de::placeholder {
  color: var(--colorTextLight);
}

.CommandPaletteModal_CommandPaletteItem_item_f61 {
  align-items: center;
  color: var(--colorTextMedium);
  content-visibility: auto;
  cursor: pointer;
  display: flex;
  font-size: var(--fontSizeBase);
  gap: var(--spacing-16);
  line-height: var(--spacing-16);
  padding: var(--spacing-16);
}

.CommandPaletteModal_CommandPaletteItem_highlighted_92d {
  background: var(--surfaceBackgroundDark);
  color: var(--colorTextDefault);
}

.CommandPaletteModal_CommandPaletteItem_labels_93b {
  flex: 1;
  flex-wrap: wrap;
  display: flex;
  gap: 0 var(--spacing-8);
}

.CommandPaletteModal_CommandPaletteItem_sublabel_7cf {
  color: var(--colorTextLight);
  font-size: var(--fontSizeSmall);
}

.CommandPaletteModal_CommandPaletteItem_icon_28f {
  height: var(--spacing-16);
  width: var(--spacing-16);
}

.CommandPaletteModal_CommandPalette_overlay_f14 {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
  z-index: var(--zindexCommandPalette);
}

.CommandPaletteModal_CommandPalette_overlayClickHandler_d1e {
  position: absolute;
  inset: 0;
}

.CommandPaletteModal_CommandPalette_commandPalette_f92 {
  --commandPaletteMaxHeight: min(75vh, 600px);
  background: var(--surfaceBackgroundDefault);
  border-radius: var(--modalBorderRadius);
  border: 1px solid var(--borderLight);
  box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1);
  filter: drop-shadow(var(--shadowLevel4));
  max-height: var(--commandPaletteMaxHeight);
  max-width: 640px;
  min-height: 100px;
  min-width: 100px;
  overflow: hidden;
  position: relative;
  width: 100%;
  will-change: filter;
}

.CommandPaletteModal_CommandPalette_input_b82 {
  border: none;
  width: auto;
  font-size: var(--headingSizeLarge);
  background-color: var(--surfaceBackgroundDefault);
  padding: var(--spacing-8);
  outline: none !important;
}

.CommandPaletteModal_CommandPalette_list_d71 {
  --commandPaletteInputHeight: 68px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(
    var(--commandPaletteMaxHeight) - var(--commandPaletteInputHeight)
  );
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding-bottom: var(--spacing-8);
  border-top: 1px solid var(--borderLight);
}

.CommandPaletteModal_CommandPalette_empty_684 {
  font-size: var(--fontSizeBase);
  padding: var(--spacing-16);
  color: var(--colorTextMedium);
  line-height: var(--spacing-16);
}

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

.PlanPriceComparison_item_39d {
  display: grid;
  grid-template-columns: 104px 1fr 120px;
  grid-gap: 24px;
  align-items: center;
  padding: var(--spacing-16) 0;
  font-size: 14px;
}

.PlanPriceComparison_item_39d:first-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

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

.PlanPriceComparison_item_39d {
    display: block;

    /* Plan label. Those are UITexts, not accepting className
       this is easiest way to style them. */
}
    .PlanPriceComparison_item_39d span:nth-child(1) {
      display: block;
    }

    /* Plan name */
    .PlanPriceComparison_item_39d span:nth-child(2) {
      display: block;
      margin: var(--spacing-8) 0;
    }

    .PlanPriceComparison_item_39d .PlanPriceComparison_price_557 {
      text-align: left;
    }
  }

.PlanPriceComparison_price_557 {
  text-align: right;
}

.ChangePlanModal_insetSection_69a {
  margin: -16px -16px 0;
  padding: 16px;
  background-color: var(--surfaceBackgroundDark);
}

.ChangePlanModal_insetSection_69a.ChangePlanModal_downgrade_3dc {
    background-color: var(--bgDangerMuted);
  }

.ChangePlanModal_insetSection_69a.ChangePlanModal_bare_ba3 {
    margin-bottom: -15px;
  }

.ChangePlanModal_heading_1f6 {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: var(--fontWeightBold);
  line-height: 20px;
}

.ChangePlanModal_copy_bb8 {
  margin-bottom: var(--spacing-16);
  font-size: 14px;
  line-height: 20px;
}

.ChangePlanModal_copy_bb8.ChangePlanModal_bare_ba3 {
    margin-bottom: 0;
  }

.ChangePlanModal_features_6be {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px 16px;
}

.ChangePlanModal_featuresItem_ea7 {
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 16px;
}

.ChangePlanModal_limitsItem_7b0 {
  display: grid;
  grid-template-columns: 24px 220px auto;
  align-items: center;
  font-size: 13px;
  line-height: 16px;
  margin-bottom: 8px;
}

.ChangePlanModal_limitsItem_7b0.ChangePlanModal_isFullWidth_fe5 {
    grid-template-columns: 24px auto;
  }

.ChangePlanModal_limitsItemTooltip_3f2 {
  padding-bottom: 3px;
  border-bottom: 1px dashed var(--gray-40);
}

.ChangePlanModal_limitsCurrent_08a:after {
    content: ' ';
  }

.ChangePlanModal_limitsExtra_6c8 {
  color: var(--colorTextMedium);
}

.ChangePlanModal_icon_bf0 {
  display: flex;
  margin-right: 8px;
}

.ChangePlanModal_icon_bf0 svg {
    width: 16px;
    height: 16px;
    fill: var(--fillSuccess);
  }

.ChangePlanModal_icon_bf0.ChangePlanModal_danger_a6d svg {
    color: var(--fillDanger);
  }

.ChangePlanModal_icon_bf0.ChangePlanModal_warning_fcc svg {
    fill: var(--fillWarn);
  }

.ChangePlanModal_UpperLimitModal_body_7ee {
  border-bottom-left-radius: var(--modalBorderRadius);
  border-bottom-right-radius: var(--modalBorderRadius);
  overflow: hidden;
}

._user_route_lowerRightScreenWrapper_52d {
  /* By not using fixed, each child can be in a different stacking context */
  position: absolute;
  right: 32px;
  bottom: 32px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--spacing-12);
}

._user_route_lowerRightScreenWrapper_52d._user_route_withDockedConversations_249 {
    bottom: 64px;
  }

/* Gives each child a default z-index that can easily be overriden */
:where(._user_route_lowerRightScreenWrapper_52d > *) {
  z-index: var(--zindexOverlays);
}


/*# sourceMappingURL=https://srcmaps.close.com/srcmaps/entry-9a8b795a.7d24f645f3f10e673f8e-6c4a0947e80edbfd6d12c7ea052583d9.js.map*/