/*!************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/Assets/Stylesheet/Styles.css ***!
  \************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap);
/*!****************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/Assets/Stylesheet/Styles.css (1) ***!
  \****************************************************************************************/
:root {
    --appstract-application-panel-height: 100vh;
    --appstract-activator-button-font-color: #ffffff;
    --appstract-activator-button-color: #4c008e;
    --appstract-activator-button-gradient-color: #380067;
    --appstract-activator-button-background: linear-gradient(90deg, rgba(76,0,142,1) 0%, rgba(56,0,103,1) 100%);
    --appstract-member-icon-background-color: #ededed;
    --appstract-member-online-icon-background-color: #08eaa8;
    --appstract-font-color: #212121;
    --appstract-notification-color: #e300a6;
    --appstract-overlay-background-color: rgba(0,0,0,.7);
    --appstract-panel-animation-time: 0.25s;
}

body.appstract-overlay-active { overflow:hidden !important; }
.appstract-application {  width:100%; max-width:42em; height:var(--appstract-application-panel-height); position:fixed; top:0; right:0; font-family: 'IBM Plex Sans',Arial,sans-serif; color:#212121; font-size:10px; font-weight: normal; font-style: normal; line-height: 20px; z-index:999999999999; }
    /*.appstract-application.appstract-panel-opening { animation: appstractAnimateApplicationBackgroundOpen var(--appstract-panel-animation-time) ease-out; }
    .appstract-application.appstract-panel-closing { animation: appstractAnimateApplicationBackgroundClose var(--appstract-panel-animation-time) ease-out; }*/

    .appstract-application.appstract-panel-opening > .appstract-panel { animation: appstractAnimateApplicationOpen var(--appstract-panel-animation-time) ease-out; }
    .appstract-application.appstract-panel-closing > .appstract-panel { animation: appstractAnimateApplicationClose var(--appstract-panel-animation-time) ease-out; }

/*@keyframes appstractAnimateApplicationBackgroundOpen {
    0% {
        background-color: rgba(0,0,0,0);
    }
    100% {
        background-color: var(--appstract-overlay-background-color);
    }
}

@keyframes appstractAnimateApplicationBackgroundClose {
    0% {
        background-color: var(--appstract-overlay-background-color);
    }
    100% {
        background-color: rgba(0,0,0,0);
    }
}*/

@keyframes appstractAnimateApplicationOpen {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes appstractAnimateApplicationClose {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

.appstract-application * { box-sizing: content-box; }
.appstract-application div:empty { display: inherit; }

.appstract-panel { width:calc(100% - 20px); max-width:42em; height:calc(var(--appstract-application-panel-height) - 20px); position:absolute; top:10px; right:10px; border-radius:10px; box-shadow: 0px 0px 7px rgba(0,0,0,.5); background-color:#fafafa; overflow-y: scroll; overscroll-behavior: none; scrollbar-width: none; }

    .appstract-panel::-webkit-scrollbar { display:none; }


/** Activator Container **/
.appstract-activator-container { font-family: 'IBM Plex Sans',Arial,sans-serif; color:#212121; font-size:10px; } 
.appstract-activator-button { padding:1em; border-radius:.4em; display: inline-block; background:#248bf5; color:#fff; cursor:pointer;  }
.appstract-activator-button:hover { background:#2439f5; }
.appstract-active-experience-members-container { height: 40px; padding: 0 0 0 20px; margin-left: auto; align-self: flex-end; display: inline-flex; flex-flow: column; justify-content: center; max-width: 1000px; overflow-y: visible; -ms-overflow-style: none; scrollbar-width: none; }
.appstract-active-experience-members-list { height: 4em; display: flex; justify-content: flex-end; align-items: center; align-content: center; min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; gap:10px; }
.appstract-active-experience-member { width: 30px; height: 30px; position: relative; border-radius: 50%; display: flex; color: #212121; background-color: var(--appstract-member-icon-background-color); text-align: center; align-items: center; align-content: center; justify-content: center; font-size: 12px; text-transform: uppercase; cursor: pointer; text-decoration:none; }
/* .appstract-active-experience-member:hover { border-color: #212121; text-decoration:none; } */
.appstract-active-experience-member.appstract-active-experience-member-online { background-color: var(--appstract-member-online-icon-background-color); }
/* .appstract-active-experience-member.appstract-active-experience-member-online::before { position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; border: 2px solid #fff; background: #08eaa8; border-radius: 50%; box-sizing: border-box; content: " "; } */


/** Close Panel Button **/ 
.appstract-close-button { width:20px; height:20px; position:absolute; top:25px; right:20px; z-index: 1; cursor:pointer; }
.appstract-close-button:empty { display:block; }

.appstract-close-button:after, .appstract-close-button:before { width: 2px; height: 20px; position: absolute; top: 0; left: 50%; background-color: #212121; content: " "; }
.appstract-close-button:before { transform:rotate(45deg); }
.appstract-close-button:after { transform:rotate(-45deg); }


/** Panel Header **/
.appstract-panel-header { height:30px; padding:20px; display:flex; position: relative; align-items:center; justify-content:center; gap:20px; background-color: #e3e1de; }
.appstract-panel-header-navigation-container { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap:5px; }
.appstract-panel-header-icon-container { width:40px; height:40px; }
.appstract-panel-header-icon-container[onclick] { cursor: pointer; }
.appstract-panel-header-icon { width:40px; height:40px; stroke:#212121; }
.appstract-panel-headline { font-weight:bold; font-size: 16px; }

.appstract-panel-header-go-back-button { width:40px; height:40px; cursor:pointer; }
.appstract-go-back-icon { width: 16px; height: 16px; padding:12px; transform: rotate(180deg); }

/** Panel Content **/
.appstract-panel-content { height: var(--appstract-application-panel-height); overflow-y: scroll; scrollbar-width: none; background-color: #fff; }
    .appstract-panel-content::-webkit-scrollbar { display:none; }
.appstract-panel-content.appstract-panel-content-header-footer { height: calc(var(--appstract-application-panel-height) - 170px); }
.appstract-panel-content.appstract-panel-content-header, .appstract-panel-content.appstract-panel-content-footer { height: calc(var(--appstract-application-panel-height) - 80px); }


.appstract-panel-content-grid { width: 100%; height: calc(var(--appstract-application-panel-height) - 90px); display: grid; grid-template-rows: [row1-start] 1fr [row1-end row2-start] 80px [row2-end]; grid-template-columns:[col1-start] 1fr [col1-end]; }

.appstract-current-experience-container { border-radius:4px 0 0 0; background-color:#fff; box-shadow: 0 10px 15px rgb(0 0 0 / 4%); position: relative; z-index: 1; grid-column: col1-start / col1-end; grid-row: row1-start / row2-end; }
.appstract-current-experience-loading { position: absolute; top:0; right:0; bottom:0; left:0; }

.appstract-experience-list-container { grid-column: col1-start / col1-end; grid-row: row1-start / row1-end; }
.appstract-experience-list-container .appstract-shared-experience { position: relative; left:5px; padding:0; border-color:transparent; background-color: transparent; box-shadow: none; }
.appstract-experience-list-container .appstract-shared-experience.appstract-current { border-color:#fff; box-shadow: 0 20px 30px rgb(0 0 0 / 4%); }
.appstract-experience-list-container .appstract-shared-experience.appstract-current:hover { border-color:#fff; }
.appstract-experience-list-container .appstract-shared-experience.appstract-current .appstract-shared-experience-members-container { position: relative; z-index: 2; background-color: #fff; }
.appstract-experience-list-container .appstract-shared-experience-members-container { padding:5px; }
.appstract-experience-list-container .appstract-shared-experience-members { left:-5px; }
.appstract-experience-list-container .appstract-shared-experience.appstract-shared-experience-has-notification::after { left:-4px; }

.appstract-experience-list-container > .appstract-icon-button-container { margin-top:10px; }

.appstract-profile-button-conatiner { grid-column: col1-start / col1-end; grid-row: row2-start / row2-end; padding:5px 0; display: flex; flex-direction: column; align-items: center; text-align: center; }

 
/** Panel Footer **/
.appstract-panel-footer { height: 80px; padding:0 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.appstract-panel-footer .appstract-button.appstract-button-with-icon { width:100%; }


/** On-boarding flow **/
.appstract-shared-shopping-icon-container { margin:20px 0; position: relative; text-align: center; }
.appstract-shared-shopping-icon { width:80px; height:80px; display: inline-block; fill:#212121; stroke:#212121; }
.appstract-shared-shopping-icon.appstract-shared-shopping-illustration { width:300px; height:300px; }
.appstract-shared-shopping-icon-image { width:calc(100% - 40px); height: 200px; margin:0 20px; object-fit: cover; }

.appstract-shared-experience-member-container {}
.appstract-shared-experience-member.appstract-shared-experience-member-large { width: 80px; height: 80px; margin: 40px auto; line-height: 80px; text-overflow: ellipsis; overflow: hidden; }



.appstract-shortcut-list {}
.appstract-shortcut-list-headline { font-size: 14px; }
.appstract-icon-and-text-button { display: flex; align-items: center; -moz-column-gap: 10px; column-gap: 10px; padding: 10px 0; font-size: 13px; line-height: 18px; width: 100%; cursor:pointer; text-decoration: none; }
.appstract-icon-and-text-button:hover { text-decoration: underline; }
.appstract-icon-and-text-button:hover .appstract-icon-and-text-button-icon-container { border-color:#212121; }
.appstract-icon-and-text-button-icon-container { width: 30px; height: 30px; position: relative; flex-shrink: 0; box-sizing: border-box; border-radius: 50%; border:2px solid #ddd; display: flex; align-items: center; justify-content: center; background: #ddd; }
.appstract-icon-and-text-button-icon { width: 16px; height: 16px; color: #212121; fill: #212121; }
.appstract-icon-and-text-button-label { color:#212121; }
.appstract-icon-and-text-button-interaction-message { display: none; width: max-content; position: absolute; bottom: -115%; left: -5px; z-index: 1; padding: 5px; box-shadow: 0 5px 15px rgb(0 0 0 / 10%); border: 1px solid #ededed; background: #fff; color:#212121; font-size: 10px; line-height: 14px;}
.appstract-animate-icon-and-text-button-interaction-message .appstract-icon-and-text-button-interaction-message { display: block; }

.appstract-share-experience-link-input { width:inherit; margin:0; padding:0; border:none; background-color: transparent; text-overflow: ellipsis; font-size: 13px; line-height: 18px; font-family:'IBM Plex Sans',Arial,sans-serif; }

.appstract-qr-headline { margin:15px 0 0; font-size:14px; text-align: center; }
.appstract-qr-headline + .appstract-qr-container { margin-top:5px; }
.appstract-qr-container { margin: 10px auto; display: flex; justify-content: center; }
.appstract-qr-code { width: 150px; display: inline-block; padding: 10px; border: 1px solid #333; }

/** Shared Experience List **/
.appstract-panel-content-experieces-list, 
.appstract-panel-footer-experieces-list { background-color: #e3e1de; }
.appstract-shared-experience-container { padding:0 20px; color:#727272; }
.appstract-shared-experience { margin-bottom: 10px; padding:5px; position: relative; border: 1px solid #F6F6F6; border-radius:4px; background-color:#F6F6F6; box-shadow: 0 20px 30px rgb(0 0 0 / 4%); cursor: pointer; -moz-column-gap: 10px; column-gap: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.appstract-shared-experience .appstract-dropdown-icon { fill:#212121; }
.appstract-shared-experience .appstract-shared-experience-menu-button:hover { border-color:#212121; }
.appstract-shared-experience:hover { background-color:#fff; border-color:#fff; }
.appstract-shared-experience.appstract-current { border-color:#727272; }
.appstract-shared-experience.appstract-current:hover { background-color:#fff; border-color:#727272; }
.appstract-shared-experience.appstract-shared-experience-has-notification,
.appstract-shared-experience.appstract-shared-experience-has-notification.appstract-current:hover { }
.appstract-shared-experience.appstract-shared-experience-has-notification::after {width:11px; height:11px; position: absolute; z-index:2; inset:50% auto auto -6px; transform: translateY(-50%); border-radius: 50%; background-color: var(--appstract-notification-color); content: " "; }
.appstract-shared-experience-members-container { width:70px; height: 70px;}
.appstract-shared-experience-members-container .appstract-shared-experience-member { position:absolute; bottom: 10%; left: 10%; }
.appstract-shared-experience-members-container .appstract-shared-experience-member:nth-child(2) { top: 10%; right: 10%; bottom: auto; left: auto; }
.appstract-shared-experience-members-container .appstract-shared-experience-member.appstract-shared-experience-member-alone { bottom: 50%; left:50%; transform: translate(-50%, 50%); }
.appstract-shared-experience-members { width:100%; height:100%; position:relative; }
.appstract-shared-experience-members-more-count { position: absolute; bottom:5%; right:10%; font-size: 13px; line-height: 36px; text-align: center; }

.appstract-shared-experience-member { width:36px; height:36px; position: relative; border-radius: 50%; background-color:var(--appstract-member-icon-background-color); font-size: 13px; line-height: 36px; text-align: center; text-transform: uppercase; box-shadow: 0 10px 15px rgb(0 0 0 / 4%); }
.appstract-shared-experience-member::after { position:absolute; inset: 0 0 0 0; border: 1px solid #fff; border-radius: 50%; content:""; }
.appstract-shared-experience-member.appstract-shared-experience-member-online { background-color: var(--appstract-member-online-icon-background-color); }

.appstract-shared-experience-description { width:calc(100% - 130px); }
.appstract-shared-experience-title { font-size: 15px; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.appstract-shared-experience-last-action { margin-top:2px; font-size: 10px; line-height: 13px; }
.appstract-shared-experience-menu { width:30px; position:relative; }
.appstract-shared-experience-menu-button { width:30px; height: 30px; box-sizing: border-box; padding: 4px; border-radius: 50%; border: 1px solid transparent; cursor: pointer; }
.appstract-shared-experience-menu-button:hover { border-color:#fff; }
.appstract-dropdown-icon { width:20px; height:20px; fill:#fff; }

.appstract-shared-experience-container .appstract-button { margin-top:20px; }
.appstract-shared-experience-container .appstract-button.appstract-button-with-icon { padding-left: 25px; gap:35px; }


/** Buttons **/ 
.appstract-button { padding:10px; box-sizing: border-box; background-color: #000; cursor:pointer; border-radius:10px; border: 1px solid #000; text-align: center; color:#fff; position:relative; }
.appstract-button:hover { background-color: #333; }
.appstract-button.appstract-button-with-icon { text-align: left; }
.appstract-button-with-icon { display:flex; align-items:center; justify-content:flex-start; gap:10px; }
/* .appstract-button-with-icon > .appstract-button-icon { width:30px; height:30px; stroke:#212121; } */
.appstract-button-with-icon > .appstract-button-icon { width:30px; height:30px; fill:#fff; }
.appstract-button-label { font-size: 16px; line-height: 30px; }

.appstract-button-list-container { margin:20px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

.appstract-icon-button-container { text-align: center; }
.appstract-icon-button { display: inline-flex; flex-direction: column; align-items: center; cursor:pointer; }
.appstract-icon-button:hover { }
.appstract-icon-button:hover .appstract-icon-button-icon {  filter: drop-shadow( 0px 0px 2px rgba(0, 0, 0, .3)); }
.appstract-icon-button:hover .appstract-icon-button-label {  text-decoration:underline; }
.appstract-icon-button-icon { width:50px; height:50px; padding:8px; border-radius: 50%; border:2px solid transparent; box-sizing: border-box; text-align: center; line-height: 46px; }
.appstract-icon-button-icon .appstract-button-icon { width:30px; height:30px; pointer-events: none; }
.appstract-icon-button-label { font-size: 12px; line-height: 17px; }

.appstract-button-cancel { color:#e82828; border: 1px solid #e82828; background-color:#fff; }
.appstract-button-cancel > .appstract-button-icon { stroke: #e82828; fill:#e82828; }
.appstract-button-cancel:hover { background-color:#fff; }

.appstract-button-secondary { color:#000; border: 1px solid #000; background-color:#fff; }
.appstract-button-secondary > .appstract-button-icon { stroke: #000; }
.appstract-button-secondary:hover { background-color:#fff; }
.appstract-speach-bubble .appstract-button-secondary { background-color: transparent; }

.appstract-button-small { height: 34px; padding:5px 10px; }
.appstract-button-small.appstract-button-with-icon > .appstract-button-icon.appstract-content-copy-icon { width:20px; height:20px; }
.appstract-button-small .appstract-icon-and-text-button-interaction-message { bottom:3px; right:10px; left:auto; }

.appstract-icon-button { }

.appstract-button-small.appstract-button-with-icon > .appstract-button-icon { width:24px; height:24px; }
.appstract-button-small.appstract-icon-button { width:34px; height:34px; }
.appstract-button-flex { flex: 1;}

/** Info text **/
.appstract-info-content-conmtainer { margin:20px; padding:15px; display: flex; gap: 10px; background-color: #fbf1c3; color:#81704A; border-radius:10px; }
.appstract-info-content-icon { width:25px; height:25px; flex: 0 0 25px; fill:#81704A; }
.appstract-info-content-text { font-size: 14px; line-height: 20px; margin-bottom:10px; }

/** Profile Button **/
.appstract-profile-button { display: inline-flex; flex-direction: column; align-items: center; cursor:pointer; }
.appstract-profile-button-icon { width:50px; height:50px; border-radius: 50%; border:2px solid #212121; background-color: #fff; box-sizing: border-box; text-align: center; line-height: 46px; text-transform: uppercase; }
.appstract-profile-button-label { margin-top:3px; font-size: 12px; line-height: 17px; }


/** Profile Form **/
.appstract-settings-form { padding:0 20px; color:#727272; }
.appstract-form-field-container { margin-bottom:15px; }
.appstract-form-field-container > .appstract-form-field { margin-top:10px; }
.appstract-form-field-container > .appstract-form-field:first-of-type { margin-top:0; }
.appstract-form-field-label { margin-bottom:10px; font-size: 14px; }
.appstract-form-field { width: 100%; padding:10px; border: 1px solid #000; border-radius:4px; box-sizing: border-box; background-color:#fff; font-size: 15px; line-height: 20px; }
.appstract-form-field:focus-visible { border: 1px solid #727272; outline: none; }
.appstract-form-field-error { border-color:#dc5252; }
.appstract-form-submit-button-container { margin-top:20px; }
.appstract-form-submit-button { margin-top:20px; }

 
/** Current Experience Panel **/
.appstract-current-experience-container { display: flex; flex-direction: column; }
.appstract-current-experience-header { height:65px; min-height: 65px; max-height: 65px; padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background-color: #413B31; }

.appstract-current-experience-header-menu-container { display: flex; gap: 10px; }
.appstract-current-experience-header-info-container { display: flex; flex: 1; gap: 10px;}

.appstract-current-experience-go-back-button { width:20px; height:35px; cursor:pointer; }
.appstract-current-experience-go-back-button .appstract-go-back-icon { width:15px; height: 15px; padding:10px 0 10px 10px; fill:#ffffff; }
.appstract-current-experience-description { max-width: 220px; flex-grow: 1; }
.appstract-current-experience-title { font-size: 16px; line-height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color:#fff; }
.appstract-current-experience-by-line { margin-top:2px; font-size: 12px; line-height: 14px; color:#979797; }

.appstract-current-experience-content { }
.appstract-current-experience-content.appstract-current-experience-content-no-footer { overflow-y: scroll; }
    .appstract-current-experience-content.appstract-current-experience-content-no-footer::-webkit-scrollbar { display:none; }

.appstract-current-experience-settings-panel { padding:20px 0; }
.appstract-current-experience-settings-panel .appstract-form-field { box-shadow: none; border: 1px solid #000; }
.appstract-current-experience-settings-panel .appstract-form-field:focus-visible { border: 1px solid #727272; outline: none; }

.appstract-current-experience-footer { margin: 0 20px; grid-column: col1-start / col1-end; grid-row: row3-start / row3-end; }

.appstract-shared-experience-basket-link-container { width:25px; display: inline-flex; }
.appstract-shared-experience-basket-link { width:25px; height:25px; display: inline-block; }
.appstract-basket-icon { width:25px; height: 25px; stroke:#fff; }


/** Current Experience Member List **/
.appstract-current-experience-member-list { padding:20px; }
.appstract-current-experience-member-list-member { margin-top: 10px; display:flex; align-items: center; gap: 10px; text-decoration: none; color:var(--appstract-font-color); }
.appstract-current-experience-member-list-member:first-child { margin-top:0; }
.appstract-current-experience-member-list-member-icon { width:30px; height:30px; font-size: 12px; line-height: 30px; }
.appstract-current-experience-member-list-member-name { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

.appstract-current-experience-add-more-members-container { margin:0 20px 20px; padding:20px 0 0; border-top:1px solid #ededed; }
.appstract-current-experience-add-more-members-container {}


.appstract-current-experience-content-headline-container { margin-bottom:15px; display: flex; align-items: center; gap:10px; }
.appstract-current-experience-content-headline-icon { width:30px; height:30px; stroke:#212121; }
.appstract-current-experience-content-headline-icon.appstract-new-members { width:24px; height:25px; margin:0 3px; }
.appstract-current-experience-content-headline-label { font-size: 14px; }


/** Text Content **/
.appstract-text-content { margin-bottom:20px; padding:0 20px; }
.appstract-headline { margin:0 0 10px; font-weight: bold; font-size: 25px; line-height: 30px; text-transform: none; }
.appstract-description { font-size: 16px; line-height: 23px; text-transform: none; }
.appstract-description .appstract-description-list:last-child { padding-bottom:0; }
.appstract-description-small { font-size: 13px; line-height: 20px; }
.appstract-error-description { color:#dc5252; }
.appstract-description-headline {}

.appstract-description-list { padding: 15px 0; display: flex; flex-direction: column; gap: 10px; }
.appstract-description-list-item { display: flex; align-items: flex-start; gap: 10px; }
.appstract-description-list-item-icon { height: 30px; width: 35px; flex: 0 0 35px; stroke: #212121; }
.appstract-description-list-item-text { flex: 1;}

/** Dropdown Menu **/
.appstract-shared-experience-drop-down-menu-backdrop { position: fixed; top:0; right:0; bottom:0; left:0; background-color: transparent; }
.appstract-shared-experience-drop-down-menu { min-width:200px; padding:5px; position:absolute; top:calc(100% + 10px); right:0; z-index: 1; border-radius: 4px; box-shadow: 0 25px 40px rgb(0 0 0 / 16%); background-color: #f7f7f7; }
.appstract-shared-experience-drop-down-menu-item { cursor: pointer; padding: 10px; margin: 0; display: flex; align-items: center; -moz-column-gap: 10px; column-gap: 10px; border-radius: 4px; }
.appstract-shared-experience-drop-down-menu-item:hover { background-color: #fff; }
.appstract-shared-experience-drop-down-menu-item-icon { display: block; min-width: 20px; width: 20px; height: 20px; flex-basis: 20px; stroke:#212121; fill:#212121; }
.appstract-shared-experience-drop-down-menu-item-label { font-size:14px; }


/** Message Panel **/
.appstract-messaging-container { height: calc(var(--appstract-application-panel-height) - 160px); display:flex; flex-direction: column; justify-content: space-between; }
.appstract-message-list-container { margin-bottom:10px; padding: 20px 20px 0; overflow-y: scroll; box-sizing: border-box; display: flex; flex-direction: column-reverse; scrollbar-width: none; }
    .appstract-message-list-container::-webkit-scrollbar { display:none; }
.appstract-message-list { }
.appstract-message-container { margin: 0 0 20px; display: flex; gap:20px; align-items: flex-end; }
.appstract-message-container.appstract-message-container-adjacent { margin-top:-15px; }
.appstract-message-container:hover .appstract-message-date { color:#727272; }
.appstract-message-container .appstract-shared-experience-member { box-shadow: none; }
.appstract-message-container .appstract-shared-experience-member-filler { width:36px; height:20px; }
.appstract-message-date { font-size: 12px; line-height: 14px; color:#abb4b4; }
.appstract-message-user {}
.appstract-message { font-size: 12px; line-height: 23px; color:#727272; }
.appstract-message-link,
.appstract-message-link:link { color:#727272; text-decoration: underline; }
.appstract-system-message { }
.appstract-chat-message-container {}
.appstract-chat-message-container .appstract-speach-bubble { font-size: 12px; line-height: 14px; color:#727272; }
.appstract-chat-message .appstract-speach-bubble { width: fit-content; position: relative; padding:10px; border-radius: 10px; font-size: 14px; line-height: 18px; background-color: #eee; }
.appstract-speach-bubble-not-confirmed { opacity:.5; }
.appstract-speech-bubble-share-button-container { margin-top:10px; display: flex; gap:10px; justify-content: space-between; }


.appstract-message-container .appstract-chat-message-container { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; }
.appstract-message-container.appstract-current-user-message .appstract-chat-message-container { align-items: flex-end; }

.appstract-message-container.appstract-system-message { display: block; text-align: center; }

.appstract-chat-message .appstract-speach-bubble::before, .appstract-chat-message .appstract-speach-bubble::after { bottom: -1px; content: ""; height: 10px; position: absolute; }
.appstract-chat-message.appstract-other-user-message .appstract-speach-bubble::before { border-bottom-right-radius:  0.8rem 0.7rem; border-left: 1rem solid #eee; left: -.35rem; transform: translate(0, -1px); }
.appstract-chat-message.appstract-other-user-message .appstract-speach-bubble::after { background-color: #fff; border-bottom-right-radius: .5rem; left: 20px; transform: translate(-30px, -2px); width:10px; }

.appstract-chat-message.appstract-current-user-message {}
.appstract-chat-message.appstract-current-user-message .appstract-speach-bubble { background-color: #248bf5; color:#fff; }
.appstract-chat-message.appstract-current-user-message .appstract-speach-bubble::before { border-bottom-left-radius: 0.8rem 0.7rem; border-right: 1rem solid #248bf5; right: -0.35rem; transform: translate(0, -0.1rem); }
.appstract-chat-message.appstract-current-user-message .appstract-speach-bubble::after { background-color: #fff; border-bottom-left-radius: 0.5rem; right: -40px; transform:translate(-30px, -2px); width: 10px; }


.appstract-product-message-container {}

.appstract-message-container .appstract-product-message-container { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; }
.appstract-message-container.appstract-current-user-message .appstract-product-message-container { align-items: flex-end; }
.appstract-message-container.appstract-current-user-message .appstract-product-mini-view { width:calc(100% - 56px); }

.appstract-product-mini-view { min-height: 70px; display: flex; position:relative; border: 1px solid #eee; border-radius: 5px; background: #eee; }
.appstract-product-mini-view-image-container { width: 70px; height:inherit; box-sizing: border-box; flex-grow: 0;flex-shrink: 0; }
.appstract-product-mini-view-image { width: 100%; height: 100%; border-radius: 5px 0 0 5px; display: block; -o-object-fit: cover; object-fit: cover; aspect-ratio: 1/1;  }
.appstract-product-mini-view-fallback-image-container { padding:15px; display: flex; align-items: center; background-color: #888; }
.appstract-product-mini-view-fallback-image { width:100%; height: 40px; display: block; color:#fff; }
.appstract-product-mini-view-info-container { padding:10px; }
.appstract-product-mini-view-info-title { font-size: 12px; line-height: 16px; }
.appstract-product-mini-view-info-link { margin-top: 5px; padding: 2px 5px; display: inline-block; border-radius: 2px; text-decoration: none; background: #000; color: #fff; }
.appstract-product-mini-view-info-link:hover { background-color: #333; color:#fff; }
.appstract-product-mini-view-action-indicator { width: 16px; height: 16px; position: absolute; inset: 0px auto auto 0px; border-radius: 2px 0 2px 0; background-color: #08eaa8; color: #212121; line-height: 16px; text-align: center; }


.appstract-message-authoring-container { width:100%; padding:0 20px 10px; position: relative; box-sizing: border-box; }

.appstract-message-area-container { display: grid; border-radius:25px; outline: 1px solid #979797; }
.appstract-message-area-container:after { content: attr(data-replicated-value) " "; white-space: pre-wrap; visibility: hidden; }
.appstract-message-area, .appstract-message-area-container:after { width:100%; max-height:120px; min-height: 20px; margin-top: 7px; margin-bottom: 10px; padding:5px 50px 5px 20px; display: block; box-sizing: border-box;  resize: none; font-size:16px; line-height:20px; font-family: 'IBM Plex Sans',Arial,sans-serif; color:#212121; overflow: hidden; grid-area: 1 / 1 / 2 / 2; border:none; }
.appstract-message-area:focus { border: none; outline: none; }
.appstract-message-submit-button { width: 39px; height: 39px; display: flex; justify-content: center; align-items: center; position: absolute; right: 25px; bottom: 14px; border-radius: 50%; background-color: #e3e1de; cursor:pointer;}
.appstract-send-message-icon  { width: 30px; height: 30px; stroke:#212121; }

/* Panel Loader for wait states */
.appstract-shared-experience-loader-container { width: 48px; height: 48px; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); }
.appstract-shared-experience-loader { width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; border: 3px solid; border-color: #212121 #212121 transparent; box-sizing: border-box; animation: rotation 1s linear infinite; }
.appstract-shared-experience-loader::after { content: ''; box-sizing: border-box; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px solid; border-color: transparent #888 #888; width: 24px; height: 24px; border-radius: 50%; animation: rotationBack 0.5s linear infinite; transform-origin: center center; }

@keyframes rotation {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
} 
    
@keyframes rotationBack {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(-360deg);
}
}

/* Slider Component */
.appstract-slider-component {}
.appstract-slider-container { width: 100%; display: grid; grid-auto-rows: minmax(100px, auto); gap: 4rem; overflow-x: scroll; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; }
.appstract-slider-container.appstract-slider-container-two-items {grid-template-columns: repeat(2, 100%);}
.appstract-slider-container.appstract-slider-container-three-items {grid-template-columns: repeat(3, 100%);}
.appstract-slider-container.appstract-slider-container-four-items {grid-template-columns: repeat(4, 100%);}
.appstract-slider-item { scroll-snap-align: start; }
.appstract-slider-indicator-container { margin: .5rem auto 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center; }
.appstract-slider-indicator { width: .7rem; height: .7rem; border-radius: 50%; background-color: #ddd; cursor: pointer; }
.appstract-slider-indicator-active { background-color:#212121; }

/* Appstract Global Container - used when no initiator on the website */
.appstract-container { position:fixed; inset:auto 20px 20px auto; font-family: 'IBM Plex Sans',Arial,sans-serif; color:#212121; z-index:999999999998; }
.appstract-global-activator-button { width:62px; height:62px; border-radius: 31px; position: relative; overflow: hidden; background:var(--appstract-activator-button-gradient-color); box-shadow: rgb(2 6 16 / 20%) 0px 2px 16px; cursor:pointer; transition: width .25s; }
.appstract-global-activator-button:hover, .appstract-global-activator-button.appstract-expanded { width:160px; background: var(--appstract-activator-button-background); } 
.appstract-global-activator-button-label { width: 85px; position: absolute; top: 50%; right: 50px; transform: translateY(-50%); font-size: 14px; font-weight: bold; line-height: 15px; color:transparent; text-transform: uppercase; transition: color .25s; user-select: none; }
.appstract-global-activator-button-notification-indicator { width:12px; height:12px; position:absolute; inset:2px 2px auto auto; border-radius: 50%; border:1px solid #fff; background-color:var(--appstract-notification-color); display: block !important; }
.appstract-global-activator-button:hover > .appstract-global-activator-button-label, .appstract-global-activator-button.appstract-expanded > .appstract-global-activator-button-label { color:var(--appstract-activator-button-font-color); }
.appstract-global-activator-button-icon { width:30px; height: 30px; position: absolute; top:50%; right: 16px; transform: translateY(-50%); stroke: var(--appstract-activator-button-font-color); fill: var(--appstract-activator-button-font-color); }
.appstract-experience-members { position:absolute; inset:auto 0 67px auto; }
.appstract-experience-members > .appstract-active-experience-member,
.appstract-experience-members > .appstract-shared-experience-members-more-count { width:19px; height:19px; font-size: 8px; line-height: 19px; position:absolute; inset:auto 0 0 auto; transform: translateX(0); transition: transform .25s .25s; }
.appstract-experience-members > .appstract-active-experience-member::after { position: absolute; inset: 0 0 0 0; border: 1px solid #fff; border-radius: 50%; content: ""; }
.appstract-experience-members > .appstract-active-experience-member:nth-child(2) { transform: translateX(-21px); }
.appstract-experience-members > .appstract-active-experience-member:nth-child(3) { transform: translateX(-42px); }
.appstract-experience-members > .appstract-active-experience-member:nth-child(4) { transform: translateX(-60px); }
.appstract-experience-members > .appstract-shared-experience-members-more-count { transform: translate(-78px, -2px); }


.appstract-experience-members[data-appstract-experience-members-count="4"] > .appstract-active-experience-member:nth-child(2) { transform: translateX(-14px); }
.appstract-experience-members[data-appstract-experience-members-count="4"] > .appstract-active-experience-member:nth-child(3) { transform: translateX(-28px); }
.appstract-experience-members[data-appstract-experience-members-count="4"] > .appstract-active-experience-member:nth-child(4) { transform: translateX(-42px); }

.appstract-experience-members[data-appstract-experience-members-count="4"]:hover > .appstract-active-experience-member:nth-child(2) { transform: translateX(-21px); }
.appstract-experience-members[data-appstract-experience-members-count="4"]:hover > .appstract-active-experience-member:nth-child(3) { transform: translateX(-42px); }
.appstract-experience-members[data-appstract-experience-members-count="4"]:hover > .appstract-active-experience-member:nth-child(4) { transform: translateX(-63px); }


.appstract-experience-members[data-appstract-experience-members-count="5"] > .appstract-active-experience-member:nth-child(2) { transform: translateX(-11px); }
.appstract-experience-members[data-appstract-experience-members-count="5"] > .appstract-active-experience-member:nth-child(3) { transform: translateX(-22px); }
.appstract-experience-members[data-appstract-experience-members-count="5"] > .appstract-active-experience-member:nth-child(4) { transform: translateX(-33px); }
.appstract-experience-members[data-appstract-experience-members-count="5"] > .appstract-active-experience-member:nth-child(5) { transform: translateX(-44px); }

.appstract-experience-members[data-appstract-experience-members-count="5"]:hover > .appstract-active-experience-member:nth-child(2) { transform: translateX(-21px); }
.appstract-experience-members[data-appstract-experience-members-count="5"]:hover > .appstract-active-experience-member:nth-child(3) { transform: translateX(-42px); }
.appstract-experience-members[data-appstract-experience-members-count="5"]:hover > .appstract-active-experience-member:nth-child(4) { transform: translateX(-63px); }
.appstract-experience-members[data-appstract-experience-members-count="5"]:hover > .appstract-active-experience-member:nth-child(5) { transform: translateX(-84px); }


.appstract-global-activator-button.appstract-animate { animation: animateActivatorButton 3s ease-out; animation-delay: 3s; }
.appstract-global-activator-button.appstract-animate > .appstract-global-activator-button-label { animation: animateActivatorButtonLabel 3s ease-out; animation-delay: 3s; }

@keyframes animateActivatorButton {
    0% {
        width: 62px;
    }
    20% {
        width:160px;
    }
    80% {
        width:160px;
    }
    100% {
        width:62px;
    }
}
@keyframes animateActivatorButtonLabel {
    0% {
        color: transparent;
    }
    20% {
        color:var(--appstract-activator-button-font-color);
    }
    80% {
        color:var(--appstract-activator-button-font-color);
    }
    100% {
        width:transparent;
    }
}

/* Shopify Dawn Specific styling */

body:has(.btn--scroll-top.is-visible) .appstract-container { bottom:110px; }


/* SHOPIFY Preview specific styling */

body:has(#PBarNextFrame) .appstract-container { bottom:80px; } 
/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/index.css ***!
  \*****************************************************************/
/* Main CSS entry point */
/* This file must have actual CSS content for styles.css to be generated */
/*!************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/Assets/Stylesheet/Styles.css ***!
  \************************************************************************************/
:root {
    --appstract-activator-button-font-color: #ffffff;
    --appstract-activator-button-color: rgb(10,10,10); 
    --appstract-activator-button-gradient-color: rgb(10,10,10);
    --appstract-activator-button-background: linear-gradient(90deg, rgb(10,10,10) 0%, rgb(10,10,10) 100%);
    --appstract-notification-color: rgb(238, 47, 83);
    --appstract-overlay-background-color: rgba(0,0,0,.5);
	--appstract-member-online-icon-background-color: #6A8B60;
	--appstract-member-icon-background-color: #CAA72F; 
} 

#shopify-section-cart-drawer:has(.drawer.drawer--active) ~ #appstract-activator-container > .appstract-container { z-index: 1; }

.appstract-application { color:#000; font-family: Montserrat,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; }
.appstract-panel { background-color: #E4E1DE; }
.appstract-product-mini-view { background-color: #F4F3EF; }
.appstract-product-mini-view-image { background-color: #fff; -o-object-fit: contain; object-fit: contain; }
.appstract-product-mini-view-info-link { background-color: #000; }

.appstract-product-mini-view-action-indicator { background-color: #6A8B60; color:#fff; }

.appstract-qr-code { background-color: #fff; }
.appstract-button { background-color: #000; color:#fff; }
.appstract-button:hover { background-color: #4f4744; }
.appstract-button-secondary:hover { background-color: #fff; }
.appstract-speach-bubble .appstract-button-secondary:hover { background-color: transparent; }

.appstract-button-cancel { color: #e82828; border: 1px solid #e82828; background-color: #fff; }
.appstract-button-secondary { color: #000; border: 1px solid #000; background-color: #fff; }

.appstract-settings-form { color:#000; }

.appstract-icon-and-text-button-icon-container { background-color: #F4F3EF; } 

.appstract-message-date { color:#8A8075; }
.appstract-shared-experience-member { color:#fff; }
.appstract-active-experience-member { color:#fff; }

.appstract-global-activator-button-icon { fill: none; }

.appstract-container { z-index: 999998; }
/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/index.css ***!
  \*****************************************************************/
/* Main CSS entry point */
/* This file must have actual CSS content for styles.css to be generated */