/* v16.17.5 */
/*
 * Copyright (c) 2023 Texas Instruments. All rights reserved.
 */
/*
* ==========================================================================
* _polaris-variables.scss
*
* This file contains global-css core Sass variables that act as our style tokens
*
* Sass variables use the namespace prefix: `$polaris-`
* ==========================================================================
*/
/*
* --------------------------------------------------------------------------
* Deprecated - Color palette tokens
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Color palette tokens
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Common style tokens
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Typography tokens
* --------------------------------------------------------------------------
*/
/*
* Font stack definitions
*/
/*
* Root HTML and BODY tag values
*/
/*
* Font size cadence values
*/
/*
* Standard Paragraph font sizes
*/
/*
* Header tag font sizes
*/
/*
* Line height cadence values
*/
/*
* Font weight values
*/
/*
* --------------------------------------------------------------------------
* Spacing values variables
* --------------------------------------------------------------------------
*/
/*
* Base spacing cadence values
*/
/*
* Layout specific vertical spacing
*/
/*
* Layout specific vertical padding for containers
*/
/*
* Component/element specific spacing
*/
/*
* --------------------------------------------------------------------------
* Grid and layout variables
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Responsive breakpoints
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Animation variables
* --------------------------------------------------------------------------
*/
/*
* Animation easing types
*/
/*
* Animation timings
*/
/*
* --------------------------------------------------------------------------
* Icon size and color variables
* --------------------------------------------------------------------------
*/
/*
* Standard icon sizes
*/
/*
* Inline Icon and Text spacing
*/
/*
* Standard icon colors
*/
/*
* --------------------------------------------------------------------------
* svg icon uri paths
* --------------------------------------------------------------------------
*/
/*
* chevron-down icon path
*/
/*
* clock icon path
*/
/*
* close icon path
*/
/*
* filter icon path
*/
/*
* Missing image icon
*/
/*
* search icon path
*/
/*
* --------------------------------------------------------------------------
* svg icon uri
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Element Color Definitions
* [Deprecated] todo: remove and replace with theming variables
* We keep these here for now for legacy support until webcomponents areupdated
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Legacy grid and layout variables
* [Deprecated] todo: remove and replace with updated variables
* --------------------------------------------------------------------------
*/
/*
* ==========================================================================
* Import Polaris primary theme Sass alias variables
* ==========================================================================
*/
/*
* ==========================================================================
* _polaris.theme-primary-aliases.scss
*
* This file contains the main Polaris theme as SASS Aliases
*
* Sass alias variables for theming match the custom property names:
* `$pl-{role}-{property/rule}-{variation}`
*
* These can be used in projects in place of the custom properties, so that
* the default fallbacks are consistant and standardized with Global-css core
* ==========================================================================
*/
/*
* --------------------------------------------------------------------------
* Background Colors
* --------------------------------------------------------------------------
*/
/*
* Page background colors
*
* Used for base page background colors
*/
/*
* Section background colors
*
* Used for full width page content section
*/
/*
* Container background colors
*
* Used for boxes and containers of content such as cards, panels, tables
*/
/*
* --------------------------------------------------------------------------
* Text Colors
* --------------------------------------------------------------------------
*/
/*
* Common text colors
*/
/*
* Link text colors
*/
/*
* --------------------------------------------------------------------------
* Element Colors
* --------------------------------------------------------------------------
*/
/*
* UI element colors
*
* Used on main UI elements, such as buttons, form elements, etc.
*/
/*
* Form element colors
*
* Used on common form elements, inputs and buttons.
*/
/*
* Border colors
*
* Used on non-divider borders, such as text underlines, image borders, text inputs
*/
/*
* Divider colors
*
* Used on lines intended for content separation
*/
/*
* State colors
*
* Colors defined for specic element states: error, success, warning
*/
/*
* ==========================================================================
* _polaris.mixins.scss
*
* This file contains Polaris mixins
* Mixin namespacing uses a prefix with `mix-`
* ==========================================================================
*/
/* stylelint-disable declaration-no-important, function-calc-no-invalid, selector-max-universal */
/*
* --------------------------------------------------------------------------
* Common utility mixins
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Common helper functions
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Element first responsive breakpoint mixins
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Responsive placeholders for showing or hideing elements at breakpoints
* --------------------------------------------------------------------------
*/
/*
* Show only at specific viewport sizes
*/
/*
* Hide only at specific viewport sizes
*/
/*
* --------------------------------------------------------------------------
* Static 12 Column Grid
*
* This is the new polaris grid used for page template.
* These mixins will allow internal component grids to line up
* with the external page grid.
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Responsive 12 Column Grid
*
* This is to promote the static 12 column grid to become responsive
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Fluid Column Grid
*
* This is the responsive grid used for fluid width containers.
* they have no relation to the outside grid and are percentage based
* Used for ODT panels, etc.
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* Font size and spacing metrics mixins and plaeholders
*
* These apply font size / line heights adjustments to an element.
* --------------------------------------------------------------------------
*/
/*
* Header size, styles, and spacing placeholders
*/
/*
* Paragraph size, styles, and spacing placeholders
*/
/*
* --------------------------------------------------------------------------
* Focus styling
* --------------------------------------------------------------------------
*/
/*
* --------------------------------------------------------------------------
* CSS Shapes
* --------------------------------------------------------------------------
*/
/* stylelint-enable */
/*
* ==========================================================================
* _polaris.theme-primary.scss
*
* This file contains the main Polaris theme as CSS custom properties
*
* CSS Custom Properties for theming use the following namespace:
* `--pl-{role}-{property/rule}-{variation}`
*
* Additional documentation found here: (link to doc)
* ==========================================================================
*/
/*
* --------------------------------------------------------------------------
* CSS custom property definitions
* --------------------------------------------------------------------------
*/
:root {
  /*
  * --------------------------------------------------------------------------
  * Background Colors
  * --------------------------------------------------------------------------
  */
  /*
  * Page background colors
  *
  * Used for base page background colors
  */
  --pl-page-background-color-primary: #ffffff;
  --pl-page-background-color-secondary: #f7f7f7;
  /*
  * Section background colors
  *
  * Used for full width page content section
  */
  --pl-section-background-color-primary: linear-gradient(35deg, #f7f7f7 0%, #fafafa 100%);
  --pl-section-background-color-secondary: linear-gradient(35deg, #333333 35%, #555555 100%);
  --pl-section-background-color-tertiary: linear-gradient(35deg, #000000 0%, #333333 100%);
  --pl-section-background-color-accent: linear-gradient(35deg, #a40000 35%, #cc0000 100%);
  /*
  * Container background colors
  *
  * Used for boxes and containers of content such as cards, panels, tables
  */
  --pl-container-background-color-primary: #ffffff;
  --pl-container-background-color-primary-variant: #f7f7f7;
  --pl-container-background-color-secondary: #f7f7f7;
  --pl-container-background-color-secondary-variant: #e8e8e8;
  --pl-container-background-color-tertiary: #555555;
  --pl-container-background-color-tertiary-variant: #333333;
  /*
  * --------------------------------------------------------------------------
  * Text Colors
  * --------------------------------------------------------------------------
  */
  /*
  * Common text colors
  */
  --pl-text-color-primary: #555555;
  --pl-text-color-primary-contrast: #ffffff;
  --pl-text-color-secondary: #333333;
  --pl-text-color-secondary-contrast: #cccccc;
  --pl-text-color-accent: #cc0000;
  --pl-text-color-accent-contrast: #aaaaaa;
  --pl-text-color-disabled: #aaaaaa;
  --pl-text-color-disabled-contrast: #b9b9b9;
  /*
  * Link text colors
  */
  --pl-link-color-primary: #007c8c;
  --pl-link-color-primary-contrast: #ffffff;
  --pl-link-color-secondary: #333333;
  --pl-link-color-secondary-contrast: #ffffff;
  --pl-link-color-tertiary: #9bd7df;
  --pl-link-color-accent: #cc0000;
  --pl-link-color-accent-contrast: #ffffff;
  /*
  * --------------------------------------------------------------------------
  * Element Colors
  * --------------------------------------------------------------------------
  */
  /*
  * UI element colors
  *
  * Used on common UI elements.
  */
  --pl-element-color-primary-lighter: #ee0000;
  --pl-element-color-primary: #cc0000;
  --pl-element-color-primary-darker: #a40000;
  --pl-element-color-secondary-lighter: #999999;
  --pl-element-color-secondary: #555555;
  --pl-element-color-secondary-darker: #333333;
  --pl-element-color-tertiary-lighter: #9bd7df;
  --pl-element-color-tertiary: #007c8c;
  --pl-element-color-tertiary-darker: #00525d;
  --pl-element-color-disabled: #cccccc;
  --pl-element-color-disabled-variant: #e8e8e8;
  --pl-element-color-contrast: #ffffff;
  --pl-element-color-contrast-variant: #f7f7f7;
  --pl-element-color-contrast-disabled: #555555;
  --pl-element-color-contrast-disabled-variant: #999999;
  /*
  * Form element colors
  *
  * Used on common form elements, inputs and buttons.
  */
  --pl-input-element-color: #555555;
  --pl-input-element-color-disabled: #aaaaaa;
  --pl-input-text-color: #555555;
  --pl-input-text-color-disabled: #999999;
  --pl-input-border-color: #cccccc;
  --pl-input-border-color-disabled: #cccccc;
  --pl-input-border-color-focus: #555555;
  --pl-input-background-color: #ffffff;
  --pl-input-background-color-disabled: #e8e8e8;
  --pl-input-background-color-hover: #e8e8e8;
  --pl-button-primary-color: #cc0000;
  --pl-button-primary-color-hover: #ee0000;
  --pl-button-primary-color-active: #a40000;
  --pl-button-primary-text-color: #ffffff;
  --pl-button-primary-text-color-hover: #ffffff;
  --pl-button-primary-text-color-active: #ffffff;
  --pl-button-secondary-color: #cc0000;
  --pl-button-secondary-color-hover: #ee0000;
  --pl-button-secondary-color-active: #a40000;
  --pl-button-secondary-text-color: #cc0000;
  --pl-button-secondary-text-color-hover: #ffffff;
  --pl-button-secondary-text-color-active: #ffffff;
  --pl-button-tertiary-color: transparent;
  --pl-button-tertiary-color-hover: transparent;
  --pl-button-tertiary-color-active: transparent;
  --pl-button-tertiary-text-color: #007c8c;
  --pl-button-tertiary-text-color-hover: #007c8c;
  --pl-button-tertiary-text-color-active: #006774;
  --pl-button-reversed-color: #ffffff;
  --pl-button-reversed-color-hover: #ffffff;
  --pl-button-reversed-color-active: #e8e8e8;
  --pl-button-reversed-text-color: #ffffff;
  --pl-button-reversed-text-color-hover: #333333;
  --pl-button-reversed-text-color-active: #333333;
  --pl-button-disabled-color: #cccccc;
  --pl-button-disabled-color-reverse: #f7f7f7;
  /*
  * Border colors
  *
  * Used on non-divider borders, such as decorative underlines or image borders
  */
  --pl-border-color-primary: #cccccc;
  --pl-border-color-secondary: #333333;
  --pl-border-color-tertiary: #e8e8e8;
  --pl-border-color-accent: #cc0000;
  /*
  * Divider colors
  *
  * Used on lines intended for content separation
  */
  --pl-divider-color-primary: #cccccc;
  --pl-divider-color-primary-contrast: #999999;
  --pl-divider-color-secondary: #e8e8e8;
  --pl-divider-color-secondary-contrast: #555555;
  /*
  * State colors
  *
  * Colors defined for specic element states: error, success, warning
  */
  --pl-error-color: #cc0000;
  --pl-success-color: #37a145;
  --pl-warning-color: #ffa358;
}

/*
* ==========================================================================
* _polaris.theme-primary-aliases.scss
*
* This file contains the main Polaris theme as SASS Aliases
*
* Sass alias variables for theming match the custom property names:
* `$pl-{role}-{property/rule}-{variation}`
*
* These can be used in projects in place of the custom properties, so that
* the default fallbacks are consistant and standardized with Global-css core
* ==========================================================================
*/
/*
* --------------------------------------------------------------------------
* Background Colors
* --------------------------------------------------------------------------
*/
/*
* Page background colors
*
* Used for base page background colors
*/
/*
* Section background colors
*
* Used for full width page content section
*/
/*
* Container background colors
*
* Used for boxes and containers of content such as cards, panels, tables
*/
/*
* --------------------------------------------------------------------------
* Text Colors
* --------------------------------------------------------------------------
*/
/*
* Common text colors
*/
/*
* Link text colors
*/
/*
* --------------------------------------------------------------------------
* Element Colors
* --------------------------------------------------------------------------
*/
/*
* UI element colors
*
* Used on main UI elements, such as buttons, form elements, etc.
*/
/*
* Form element colors
*
* Used on common form elements, inputs and buttons.
*/
/*
* Border colors
*
* Used on non-divider borders, such as text underlines, image borders, text inputs
*/
/*
* Divider colors
*
* Used on lines intended for content separation
*/
/*
* State colors
*
* Colors defined for specic element states: error, success, warning
*/
.ti_myti-form-error, .ti_myti-form-error:hover {
  color: var(--pl-error-color, #cc0000);
  cursor: auto;
}

.ti_myti-dialog-action-text, .ti_myti-dialog-action-text:hover {
  color: var(--pl-text-color-primary, #555555);
  cursor: auto;
}

.ti_myti-dialog-action-buttons #settingsFormActionButtons {
  gap: 16px;
  display: flex;
  flex-direction: column;
  cursor: auto;
}
@media (min-width: 767px) {
  .ti_myti-dialog-action-buttons #settingsFormActionButtons {
    flex-direction: row;
  }
}

/*
* --------------------------------------------------------------------------
* Utilities
* --------------------------------------------------------------------------
*/
.ti_myti-gap-4 {
  gap: 16px;
}

.ti_myti-gap-6 {
  gap: 24px;
}

/*
* --------------------------------------------------------------------------
* Homepage Dashboard
* --------------------------------------------------------------------------
*/
.ti_myti-dashboard-banner {
  position: relative;
  z-index: 1;
  background-color: #333;
  margin-bottom: 48px;
  padding-top: 78px;
  padding-bottom: 32px;
  background-position: 100% 0%;
  background-repeat: no-repeat;
}

.ti_myti-dashboard-banner h1 {
  margin-bottom: 0;
  line-height: 40px;
  color: #fff;
}

.ti_myti-dashboard-banner-image {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-size: cover;
  background-position: right center;
}

.ti_myti-dashboard-section {
  padding-bottom: 24px;
}

.ti_myti-dashboard-sectiontitle {
  display: flex;
}

.ti_myti-dashboard-sectiontitle h2 {
  margin-top: 16px;
  margin-bottom: 8px;
}

.ti_myti-dashboard-sectiontitle ti-image {
  width: 64px;
  height: 64px;
  margin-right: 4px;
}

.ti_myti-dashboard-notifications {
  margin-bottom: -40px;
}

@media (max-width: 766px) {
  .ti_myti-dashboard-section {
    padding-bottom: 0;
  }
  .ti_myti-dashboard-notifications {
    margin-bottom: 24px;
  }
  .ti_myti-dashboard-banner {
    margin-bottom: 24px;
    padding-top: 132px;
  }
  .ti_myti-dashboard-banner .ti_myti-dashboard-banner-image {
    max-height: 100px;
  }
}
/*
* --------------------------------------------------------------------------
* For Desktop Only
* --------------------------------------------------------------------------
*/
@media (min-width: 766px) {
  .u-margin-horizontal-0-only-on-desktop {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .ti_p-col-card.mod-large {
    width: calc(74.99997% - 28px);
  }
}
/*
* --------------------------------------------------------------------------
* For Mobile Only
* --------------------------------------------------------------------------
*/
@media (max-width: 420px) {
  .u-margin-top-4-only-on-phone {
    margin-top: 1rem !important;
  }
  .u-margin-top-6-only-on-phone {
    margin-top: 1.5rem;
  }
  .u-margin-bottom-4-only-on-phone {
    margin-bottom: 1rem !important;
  }
  .u-margin-bottom-6-only-on-phone {
    margin-bottom: 1.5rem;
  }
  .mod-row-only-on-phone {
    flex-direction: row !important;
  }
  .mod-justify-start-only-on-phone {
    justify-content: flex-start !important;
  }
}
/*
* --------------------------------------------------------------------------
* API admin
* --------------------------------------------------------------------------
*/
.ti_myti-landing-pageHeader {
  margin-bottom: 24px;
}
@media (min-width: 767px) {
  .ti_myti-landing-pageHeader {
    margin-bottom: 32px;
  }
}

.ti_myti-suites-pageHeader {
  margin-bottom: 24px;
}
@media (min-width: 767px) {
  .ti_myti-suites-pageHeader {
    margin-bottom: 16px;
  }
}

.ti_myti-api-key ti-text-copy {
  width: 100%;
}
@media (min-width: 767px) {
  .ti_myti-api-key ti-text-copy {
    width: 30em;
  }
}
.ti_myti-api-key label {
  font-weight: bold;
  white-space: nowrap;
}

.ti_myti-api-key-data-container {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 32px;
}
.ti_myti-api-key-data-container .ti_myti-api-key-data {
  flex-grow: 1;
  width: 100%;
}
@media (min-width: 767px) {
  .ti_myti-api-key-data-container .ti_myti-api-key-data {
    width: auto;
    flex-grow: 0;
  }
}
.ti_myti-api-key-data-container .ti_myti-api-key-data-actions {
  flex-grow: 1;
  gap: 16px;
  display: flex;
  align-items: baseline;
}
.ti_myti-api-key-data-container .ti_myti-api-key-data-actions ti-button {
  margin-right: 0;
}
.ti_myti-api-key-data-container .ti_myti-api-key-data-actions ti-tooltip {
  top: 44px;
}
@media (min-width: 767px) {
  .ti_myti-api-key-data-container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ti_myti-api-key-data-container .ti_p-button-set ti-button {
    margin-bottom: 0;
  }
}

.ti_myti-api-key-data {
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 767px) {
  .ti_myti-api-key-data {
    flex-direction: row;
    align-items: center;
  }
}
.ti_myti-api-key-data label {
  font-weight: bold;
  white-space: nowrap;
}

.ti_myti-api-suite-new {
  font-size: 12px;
  font-weight: 600;
}
.ti_myti-api-suite-new-emphasis {
  color: var(--pl-text-color-accent, #cc0000);
}

.ti_myti-api-suite-card {
  margin-bottom: 48px;
}
@media (min-width: 767px) {
  .ti_myti-api-suite-card {
    margin-bottom: 24px;
    display: block;
    position: relative;
    padding: 32px;
    background-color: var(--pl-container-background-color-primary, #ffffff);
    color: var(--pl-text-color-primary, #555555);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.16), 0 4px 5px 0 rgba(0, 0, 0, 0.1), 0 1px 10px 0 rgba(0, 0, 0, 0.08);
  }
}
.ti_myti-api-suite-card-header {
  display: flex;
  column-gap: 32px;
  flex-direction: column;
}
@media (min-width: 767px) {
  .ti_myti-api-suite-card-header {
    flex-direction: row;
  }
}
.ti_myti-api-suite-card-title-description {
  margin-bottom: 24px;
}
@media (min-width: 767px) {
  .ti_myti-api-suite-card-title-description {
    margin-bottom: 16px;
  }
}
.ti_myti-api-suite-card-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.ti_myti-table-overflow-wrapper {
  width: 100%;
  overflow-x: auto;
}

.ti_myti-api-suite-table th {
  padding: 12px 24px;
}
.ti_myti-api-suite-table td {
  padding: 16px 24px;
  line-height: 16px;
}
.ti_myti-api-suite-table td.ti_myti-api-suite-table-cell-has-chip {
  padding-top: 12px;
  padding-bottom: 12px;
}
.ti_myti-api-suite-table td.ti_myti-api-suite-table-cell-has-edit-button {
  padding-top: 16px;
  padding-bottom: 14px;
}
.ti_myti-api-suite-table-apiName {
  white-space: nowrap;
}

.ti_myti-suites-apis-table-description {
  display: block;
  margin-bottom: 16px;
  line-height: 20px;
}

@media (min-width: 767px) {
  .ti_myti-suites-apis-table-description-has-action {
    margin-bottom: 12px;
  }
}

.ti_myti-suites-apis-table-action {
  display: inline-block;
  margin-bottom: 16px;
}
@media (min-width: 767px) {
  .ti_myti-suites-apis-table-action {
    margin-bottom: 32px;
  }
}

.ti_myti-api-suites-table tr:last-child td,
.ti_myti-api-suites-table td[rowspan] {
  border-color: var(--pl-divider-color-primary, #cccccc);
}

.ti_myti-api-settings-button {
  padding: 16px 8px 0;
  display: flex;
  align-items: flex-end;
}
@media (min-width: 767px) {
  .ti_myti-api-settings-button {
    padding-bottom: 8px;
  }
}

.api-settings-form ti-form-element {
  margin-bottom: 12px;
}
.api-settings-form ti-form-element input,
.api-settings-form ti-form-element select {
  width: calc(100% - 40px);
}
.api-settings-form ti-form-element .ti_myti-input-with-button {
  display: flex;
  align-items: center;
}
.api-settings-form ti-form-element .ti_myti-input-with-button ti-button {
  width: auto;
}

/*
* --------------------------------------------------------------------------
* Company account - Manage team page
* --------------------------------------------------------------------------
*/
.ti-company-manage-team-users td:last-child {
  text-align: right;
}

.ti-company-manage-team-user-permissions {
  border-top: 0;
}
.ti-company-manage-team-user-permissions table th, .ti-company-manage-team-user-permissions table td:not(:first-child) {
  text-align: center !important;
}
.ti-company-manage-team-user-permissions table td:first-child {
  background-color: #f7f7f7;
  width: 24% !important;
}
.ti-company-manage-team-user-permissions .ti-table-controller-scroll-container {
  border-top: 0 !important;
}
.ti-company-manage-team-user-permissions .ti-table-controller-scroll-container tbody tr > td {
  border-right: 1px solid #e8e8e8;
}

.ti-company-manage-team-title {
  margin-bottom: 0 !important;
}

@media (max-width: 765px) {
  .ti-company-manage-team-title {
    margin-bottom: 32px !important;
  }
  .ti-company-manage-team-invite-btn {
    width: 100%;
  }
}
.ti-company-manage-team-user-mobile {
  padding: 0 2px;
}
.ti-company-manage-team-user-mobile ti-card {
  height: auto;
}

.ti-company-manage-team-field-name::after {
  content: ":";
}

.ti-company-manage-team-error-text {
  color: var(--pl-error-color, #cc0000);
}

.ti-company-manage-team-actions span:not(:last-child)::after {
  content: "|";
  padding: 4px;
}

.ti-company-manage-team-edit ti-input {
  width: 100%;
}

/**
* --------------------------------------------------------------------------
* Notifications sidesheet content styles
* --------------------------------------------------------------------------
*/
.ti_p-notifications-sidesheet {
  position: relative;
}

.ti_p-notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  z-index: 2;
  top: -16px;
  margin: -16px -16px 0 -16px;
  padding: 16px 6px 16px 16px;
  border-bottom: 1px solid #e8e8e8;
  background-color: #fff;
}

@media (min-width: 766px) {
  .ti_p-notifications-header {
    padding-left: 32px;
    padding-right: 22px;
  }
}
.ti_p-notifications-header-title {
  margin-bottom: 0;
  font-size: 24px;
  line-height: 32px;
  margin-right: auto;
}

.ti_p-notifications-header-close {
  width: 40px;
  height: 40px;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.ti_p-notifications-header-close:hover {
  background-color: transparent;
}

.ti_p-notifications-body {
  padding-bottom: 64px;
}

@media (min-width: 766px) {
  .ti_p-notifications-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.ti_p-notifications-list {
  margin: 0;
  list-style: none;
}

.ti_p-notification {
  margin-bottom: 0;
}

.ti_p-notification:not(:last-of-type) {
  border-bottom: 1px solid #e8e8e8;
}

.ti_p-notification-content {
  position: relative;
  padding: 24px 0;
}

.ti_p-notification-title {
  display: flex;
  font-weight: 500;
  margin-bottom: 16px;
}

.ti_p-notification-title-text {
  margin-right: 16px;
}

.ti_p-notification-remove {
  margin-left: auto;
}

.ti_p-notification-details {
  margin-bottom: 16px;
}

.ti_p-notification-details > p:last-of-type {
  margin-bottom: 0;
}

.ti_p-notification-actions {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ti_p-notification-action {
  margin-bottom: 8px;
}

.ti_p-notification-action:not(:last-child) {
  margin-right: 8px;
  padding-right: 8px;
  border-right: 1px solid #ccc;
}

.ti_p-notification-date {
  color: #999;
}

.ti_p-notification-confirmation {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background-color: white;
  padding-inline: 24px;
}

.ti_p-notification-confirmation-actions ti-button:not(:last-of-type) {
  margin-right: 16px;
}

/**
* --------------------------------------------------------------------------
* Breadcrumb style
* --------------------------------------------------------------------------
*/
.ti_no-link-breadcrumb {
  display: block;
  padding: 0;
  white-space: nowrap;
  text-decoration: none;
  color: currentColor;
  font-size: 14px;
  line-height: 28px;
}