funda-ui 4.7.624 → 4.7.625

package/publish/lib/esm/Chatbox/index.scss

@@ -1,966 +0,0 @@
-
-
-/*=================== Chatbox (Loading) =================*/
-.custom-chatbox-loader-container {
-    --custom-chatbox-loader-color: #b9caf7;
-    --custom-chatbox-loader-color2: #0d6efd;
-
-    
-    width: 130px;
-    text-align: start;
-
-    .custom-chatbox-loader {
-        height: 4px;
-        width: 100%;
-        --c: no-repeat linear-gradient(var(--custom-chatbox-loader-color2) 0 0);
-        background: var(--c), var(--c), var(--custom-chatbox-loader-color);
-        background-size: 60% 100%;
-        animation: loader-move 3s infinite;
-    }
-
-
-    @keyframes loader-move {
-        0% {
-            background-position: -150% 0, -150% 0
-        }
-
-        66% {
-            background-position: 250% 0, -150% 0
-        }
-
-        100% {
-            background-position: 250% 0, 250% 0
-        }
-    }
-}
-
-
-
-.custom-chatbox-mini-loader {
-    --custom-chatbox-miniloader-color: rgba(0,0,0,.5);
-
-    width: 15px;
-    height: 15px;
-    margin: .5rem;
-    margin-bottom: 0;
-    border: 3px dotted var(--custom-chatbox-miniloader-color);
-    border-radius: 50%;
-    display: inline-block;
-    position: relative;
-    box-sizing: border-box;
-    animation: mini-loader-spin 1s linear infinite;
-
-    @keyframes mini-loader-spin {
-        0% {
-            transform: rotate(0deg);
-        }
-
-        100% {
-            transform: rotate(360deg);
-        }
-
-    }
-}
-
-
-
-
-/*===================  Chatbox (Core) =================*/
-
-.custom-chatbox-circle {
-    --custom-chatbox-circle-color: #5A5EB9;
-    --custom-chatbox-circle-text: #fff;
-
-
-    position: fixed;
-    bottom: 30px;
-    right: 30px;
-    background: var(--custom-chatbox-circle-color);
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    color: var(--custom-chatbox-circle-text);
-    cursor: pointer;
-    box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.6), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    z-index: 1030;
-    text-align: center;
-    vertical-align: middle;
-    transition: .1s ease-in-out;
-
-    > span {
-        display: inline-block;
-        margin-top: 25%;
-    }
-
-    &:hover {
-        transform: scale(1.2);
-    }
-
-    svg {
-        width: 30px;
-        height: 30px;
-
-        path {
-            stroke: #fff;
-        }
-    }
-}
-
-
-.custom-chatbox-close {
-    --custom-chatbox-close-color: #333;
-    
-    padding: 20px;
-    position: fixed;
-    bottom: calc(100vh - 55px);
-    z-index: 1032;
-    right: -15px;
-    cursor: pointer;
-    border: none;
-    outline: none;
-    background: none;
-    transition-delay: 0.05s; /* Prevent real-time update of store displacement */
-
-    path {
-        fill: var(--custom-chatbox-close-color);
-    }
-
-    &:hover {
-        transform: scale(1.2);
-        path {
-            fill: #f00
-        }
-    }
-
-}
-
-
-.custom-chatbox-container {
-    --custom-chatbox-w: 600px;
-    --custom-chatbox-h: 100vh;
-    --custom-chatbox-bg: #fff;
-    --custom-chatbox-input-bg: #fff;
-    --custom-chatbox-default-txt-color: #333;
-    --custom-chatbox-default-btn-color: #fff;
-    --custom-chatbox-msg-bg: #eaeaea;
-    --custom-chatbox-msg-bg2: #d1e6f8;
-    --custom-chatbox-msg-border: #ddd;
-    --custom-chatbox-primary-color: #5A5EB9;
-    --custom-chatbox-gray-color: #adadad;
-    --custom-chatbox-primary-text: #333;
-    --custom-chatbox-disable-color: #ccc;
-    --custom-chatbox-stop-color: #f00;
-    --custom-chatbox-time-color:  #96a2c1;
-    --custom-chatbox-msg-dotted-loader-size: 15px;
-    --custom-chatbox-content-w: calc(100% - 50px);
-    --custom-chatbox-toolkit-btn-color: #f8f9fa;
-    --custom-chatbox-toolkit-btn-border-color: #e9ecef;
-    --custom-chatbox-toolkit-btn-active-color: #c2dfff;
-    --custom-chatbox-newchat-btn-color: #f8f9fa;
-    --custom-chatbox-newchat-btn-border-color: #e9ecef;
-    --custom-chatbox-toolkit-opt-color: #f8f9fa;
-    --custom-chatbox-toolkit-opt-border-color: #e9ecef;
-    --custom-chatbox-toolkit-opt-active-color: #c2dfff;
-    --custom-chatbox-toolkit-btn-radius: 20px;
-    --custom-chatbox-questions-bg: #f5f5f5;
-    --custom-chatbox-questions-hover-bg: #e9e9e9;
-    --custom-chatbox-content-html-elem-border-color: #ddd;
-    --custom-chatbox-content-html-elem-bg: rgba(0,0,0,.05);
-    --custom-balloon-border-radius: 0.35rem;
-    --custom-balloon-color: rgba(16, 16, 16, 0.95);
-    --custom-balloon-text-color: #fff;
-    --custom-balloon-font-size: 12px;
-    --custom-balloon-move: 4px; 
-    --custom-toolkit-select-options-container-min-w: 135px; 
-    --custom-toolkit-select-options-container-max-h: 300px; 
-
-    
-    
-    min-width: var(--custom-chatbox-w);
-    max-width: var(--custom-chatbox-w);
-    margin: auto;
-    background: var(--custom-chatbox-bg);
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    z-index: 1031;
-    height: var(--custom-chatbox-h);
-
-    /* disable popup */
-    &.popup-none {
-        position: relative;
-        bottom: auto;
-        right: auto;
-        box-shadow: none;
-    }
-
-    details {
-        font-style: italic;
-        margin: 0;
-        padding: 0;
-        font-size: 0.75rem;
-        margin-bottom: .5rem;
-        background: var(--custom-chatbox-msg-bg);
-        padding: .5rem;
-    }
-
-    summary {
-        cursor: pointer;
-        font-weight: bold;
-        color: var(--custom-chatbox-primary-color);
-        outline: none;
-    }
-
-    details[open] summary {
-        color: var(--custom-chatbox-primary-text);
-    }
-
-    h1 {
-        font-size: 1.35rem;
-    }
-    h2 {
-        font-size: 1.25rem;
-    }
-    h3 {
-        font-size: 1.125rem;
-    }
-
-    h4 {
-        font-size: 1rem;
-    }
-    h5 {
-        font-size: 0.875rem;
-    }
-    h6 {
-        font-size: 0.75rem;
-    }
-
-
-    /* message list */
-    .messages {
-        height: calc(100% - 125px);
-        overflow-y: auto;
-        margin-bottom: 10px;
-        font-size: 13px;
-        margin-right: 0;
-
-        img, svg, video, canvas, audio, iframe, embed, object {
-            display: inline;
-        }
-
-        &::-webkit-scrollbar {
-            width: 3px;
-        }
-    
-        &::-webkit-scrollbar-thumb {
-            background: rgba(0, 0, 0, 0.2);
-        }
-    
-
-        > div:not(.newchat-btn) {
-            margin: 5px 0;
-            padding: 3px 5px;
-            border-radius: 0.35rem;
-            position: relative;
-        }
-
-        p {
-            margin: 3px 0;
-        }
-
-        .qa-timestamp {
-            font-size: 0.75rem;
-            color: var(--custom-chatbox-time-color);
-            font-style: italic;
-            font-weight: normal;
-            display: block;
-            text-align: right;
-        }
-
-        .qa-name {
-            font-weight: bold;
-            color: var(--custom-chatbox-primary-color);
-
-            svg, img {
-                max-height: 15px;
-            }
-        }
-        .qa-content {
-            background: var(--custom-chatbox-msg-bg);
-            padding: .5rem;
-            border-radius: 0.35rem;
-            margin-top: .3rem;
-            display: inline-block;
-            text-align: start;
-
-
-            /* Custom HTML Styles */
-            .table-container {
-                overflow-x: auto;
-                margin-bottom: .5rem;
-
-                &::-webkit-scrollbar {
-                    height: 10px;
-                }
-            
-                &::-webkit-scrollbar-thumb {
-                    background: rgba(0, 0, 0, 0.2);
-                }
-
-                table {
-                    width: 100%;
-                    border-collapse: collapse;
-                    border-radius: 0.35rem;
-                    
-
-
-                    thead {
-                        background: var(--custom-chatbox-content-html-elem-bg);
-                        
-                        tr {
-                            white-space: nowrap;
-                        }
-                    }
-
-                    th, td {
-                        padding: .25rem;
-                        text-align: left;
-                        border: 1px solid var(--custom-chatbox-content-html-elem-border-color);
-                    }
-                }
-            }
-            
-
-        }
-
-
-        .request {
-            text-align: end;
-
-            .qa-content {
-                max-width: var(--custom-chatbox-content-w);
-                background: var(--custom-chatbox-msg-bg2);
-            }
-            
-        }
-        .reply {
-            text-align: start;
-
-            .qa-name {
-                display: flex;
-            }
-            
-            .qa-content {
-                width: var(--custom-chatbox-content-w);
-                background: transparent;
-                padding-top: 0;
-            }
-        }
-
-        .reply-waiting {
-            .qa-content {
-                
-            }
-        }
-
-        
-        /* copy button */
-        .copy-btn {
-            position: absolute;
-            left: calc(var(--custom-chatbox-content-w) - .7rem);
-            bottom: 0.5rem;
-            z-index: 1;
-            background: transparent;
-            border: none;
-            padding: 4px;
-            cursor: pointer;
-            opacity: 0.6;
-            transition: opacity 0.2s;
-
-            &:hover {
-                opacity: 1;
-            }
-        }
-        
-    }
-
-    /* dot loading */
-    .msg-dotted-loader-container {
-        font-weight: normal;
-        transform: translateY(-5px);
-        display: flex;
-        align-items: center;
-        margin-top: .4rem;
-        margin-left: .3rem;
-        color: var(--custom-chatbox-gray-color);
-    }
-    .msg-dotted-loader-text {
-        transform: translateY(-10%);
-    }
-    .msg-dotted-loader {
-        position: relative;
-        text-align: center;
-        display: inline-block;
-        width: calc(var(--custom-chatbox-msg-dotted-loader-size) * 1.5);
-        height: calc(var(--custom-chatbox-msg-dotted-loader-size) * 1.5);
-        margin-right: .1rem;
-    }
-    .msg-dotted-loader::after ,
-    .msg-dotted-loader::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: var(--custom-chatbox-msg-dotted-loader-size);
-        height: var(--custom-chatbox-msg-dotted-loader-size);
-        border-radius: 50%;
-        border: 2px var(--custom-chatbox-gray-color);
-        border-style: dotted solid dotted solid;
-        animation: turn-left 1.5s linear infinite;
-    }
-    .msg-dotted-loader::before {
-        left: calc(var(--custom-chatbox-msg-dotted-loader-size)/2/2 * -1);
-        top: calc(var(--custom-chatbox-msg-dotted-loader-size)/2/2 * -1);
-        width: calc(var(--custom-chatbox-msg-dotted-loader-size) + var(--custom-chatbox-msg-dotted-loader-size)/2);
-        height: calc(var(--custom-chatbox-msg-dotted-loader-size) + var(--custom-chatbox-msg-dotted-loader-size)/2);
-        border-style: dotted dotted solid solid;
-        animation: msg-dotted-loader-anim--turn-right 1.5s linear infinite;
-    }
-    @keyframes msg-dotted-loader-anim--turn-right {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-    @keyframes turn-left {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(-360deg);
-        }
-    }
-
-
-    /* control area */
-    .msgcontrol {
-        display: flex;
-        position: absolute;
-        bottom: 10px;
-        z-index: 1;
-        width: calc(100% - 40px);
-        border: 1px solid var(--custom-chatbox-gray-color);
-        border-radius: 0.35rem;
-        transition: all 0.3s ease;
-        background: var(--custom-chatbox-input-bg);
-
-        img, svg, video, canvas, audio, iframe, embed, object {
-            display: inline;
-        }
-
-        &.focus {
-            border-color: var(--custom-chatbox-primary-color);
-        }
-
-
-        .messageInput {
-            width: 100%;
-            border-radius: 4px;
-            font-size: 0.875rem;
-            border: none;
-            outline: none;
-            margin-bottom: 2.2rem;
-
-            &:focus,
-            &:focus-visible {
-                outline: none;
-                box-shadow: none;
-            }
-
-            .messageInput-control {
-                background: var(--custom-chatbox-input-bg);
-                padding: .5rem;
-                border-radius: 0.35rem;
-                width: 100%;
-                color: var(--custom-chatbox-default-txt-color);
-                resize: none;
-                max-height: 50vh;
-                border: none;
-                
-
-                &::-webkit-scrollbar {
-                    width: 3px;
-                }
-            
-                &::-webkit-scrollbar-thumb {
-                    background: rgba(0, 0, 0, 0.2);
-                }
-            
-                &:focus,
-                &:focus-visible {
-                    border-color: transparent;
-                    outline: none;
-                    box-shadow: none;
-                }
-            
-
-            }
-            
-        }
-
-        button {
-            padding: 6px;
-            border: none;
-            position: absolute;
-            background-color: var(--custom-chatbox-primary-color);
-            color: var(--custom-chatbox-default-btn-color);
-            border: 1px solid var(--custom-chatbox-primary-color);
-            border-radius: 50%;
-            cursor: pointer;
-            margin-left: .5rem;
-            min-width: 30px;
-            font-size: 0.875rem;
-            z-index: 2;
-            right: .4rem;
-            bottom: .3rem;
-            width: 40px;
-            height: 40px;
-            padding: 0;
-
-            path {
-                fill: var(--custom-chatbox-default-btn-color);
-            }
-
-            &:hover {
-                transform: scale(1.1);
-            }
-
-            &:disabled {
-                opacity: .7;
-            }
-
-            &.is-suspended {
-                background-color: var(--custom-chatbox-stop-color);
-                border-color: var(--custom-chatbox-stop-color);
-            }
-            
-        }
-
-    }
-
- 
-
-     /* loading */
-    .loading {
-        margin-top: 0;
-        height: 5px;
-        position: absolute;
-        bottom: 5px;
-        width: calc(100% - 40px);
-        z-index: 1;
-    }
-
-    /* new chat button */
-    .newchat-btn {
-        text-align: center;
-        position: absolute;
-        bottom: 115px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 1;
-        
-        > button {
-            padding: 3px 6px;
-            background-color: var(--custom-chatbox-newchat-btn-color);
-            border: 1px solid var(--custom-chatbox-newchat-btn-border-color);
-            border-radius: 20px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 0.8125rem;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-
-            img, svg, video, canvas, audio, iframe, embed, object {
-                display: inline;
-            }
-
-            &:hover {
-                transform: translateY(-2px);
-            }
-    
-        }
-    }
-
-
-
-    /* toolkit buttons */
-    .toolkit-btns {
-        display: flex;
-        position: absolute;
-        bottom: 15px;
-        margin-left: 5px;
-        z-index: 1;
-        flex-wrap: wrap;
-        gap: 8px;
-        justify-content: center;
-
-
-        button {
-            padding: 3px 6px;
-            background-color: var(--custom-chatbox-toolkit-btn-color);
-            border: 1px solid var(--custom-chatbox-toolkit-btn-border-color);
-            border-radius: var(--custom-chatbox-toolkit-btn-radius);
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 0.75rem;
-
-            
-            img, svg, video, canvas, audio, iframe, embed, object {
-                display: inline;
-            }
-
-
-            &:hover {
-                background-color: var(--custom-chatbox-toolkit-btn-border-color);
-                transform: translateY(-2px);
-            }
-
-            &.opt-active,
-            &.active {
-                background-color: var(--custom-chatbox-toolkit-btn-active-color);
-            }
-            
-            
-        }
-   
-    }
-
-    /* toolkit options */
-    @keyframes dropupAnimation {
-        from {
-            opacity: 0;
-            transform: translateY(10px);
-        }
-
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    .toolkit-select-wrapper {
-        position: relative;
-        display: inline-block;
-
-        .toolkit-select-btn {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            border: 1px solid var(--custom-chatbox-gray-color);
-            border-radius: var(--custom-chatbox-toolkit-btn-radius);
-            cursor: pointer;
-        }
-
-        .toolkit-select-arrow {
-            margin-left: 8px;
-            font-size: 10px;
-            transition: transform 0.2s ease;
-        }
-
-        .toolkit-select-arrow.active {
-            transform: rotate(180deg);
-        }
-        
-        .toolkit-select-options-container {
-            z-index: 1000;
-            width: 100%;
-            min-width: var(--custom-toolkit-select-options-container-min-w);
-            transform: translateY(-100%);
-        }
-    
-        .toolkit-select-options {
-            background-color: var(--custom-chatbox-toolkit-opt-color);
-            border: 1px solid var(--custom-chatbox-toolkit-opt-border-color);
-            border-radius: 4px;
-            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
-            margin-bottom: 10px;
-            max-height: var(--custom-toolkit-select-options-container-max-h);
-            min-width: var(--custom-toolkit-select-options-container-min-w);
-            overflow-y: auto;
-            animation: dropupAnimation 0.2s ease;
-
-            position: absolute;
-            bottom: 1rem;
-            left: 0;
-            right: 0;
-            display: none;
-            z-index: 1000;
-
-            &.active {
-                display: block;
-            }
-
-
-            &::-webkit-scrollbar {
-                width: 3px;
-            }
-        
-            &::-webkit-scrollbar-thumb {
-                background: rgba(0, 0, 0, 0.2);
-            }
-        }
-
-        .toolkit-select-option {
-            padding: 3px 6px;
-            cursor: pointer;
-            transition: background-color 0.2s ease;
-            font-size: 0.75rem;
-
-            &.cancel {
-                color: var(--custom-chatbox-gray-color);
-            }
-
-            &.selected:not(.cancel),
-            &:hover {
-                background-color: var(--custom-chatbox-toolkit-opt-active-color);
-            }
-        }
-
-    }
-
-
-    /* default questions */
-    .default-questions-title {
-        margin-bottom: .5rem;
-    }
-    .default-questions {
-        padding: 15px;
-        width: 100%;
-    }
-    
-    .default-question-item {
-        padding: .3rem 1rem;
-        margin-bottom: .2rem;
-        background-color: var(--custom-chatbox-questions-bg);
-        border-radius: 0.35rem;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        
-        &:hover {
-            background-color: var(--custom-chatbox-questions-hover-bg);
-        }
-
-        
-        &:last-child {
-            margin-bottom: 0;
-        } 
-
-    }
-    
-
-    /* Tooltip */
-    button[aria-label][data-balloon-pos] {
-        overflow: visible;
-    }
-    
-    [aria-label][data-balloon-pos] {
-        cursor: pointer;
-    }
-    
-    [aria-label][data-balloon-pos]:after {
-        opacity: 0;
-        pointer-events: none;
-        transition: all 0.18s ease-out 0.18s;
-        text-indent: 0;
-        font-weight: normal;
-        font-style: normal;
-        text-shadow: none;
-        font-size: var(--custom-balloon-font-size);
-        background: var(--custom-balloon-color);
-        border-radius: 2px;
-        color: var(--custom-balloon-text-color);
-        border-radius: var(--custom-balloon-border-radius);
-        content: attr(aria-label);
-        padding: .5em 1em;
-        position: absolute;
-        white-space: nowrap;
-        z-index: 10;
-    }
-    
-    [aria-label][data-balloon-pos]:before {
-        width: 0;
-        height: 0;
-        border: 5px solid transparent;
-        border-top-color: var(--custom-balloon-color);
-        opacity: 0;
-        pointer-events: none;
-        transition: all 0.18s ease-out 0.18s;
-        content: "";
-        position: absolute;
-        z-index: 10;
-    }
-    
-    [aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {
-        opacity: 1;
-        pointer-events: none;
-    }
-
-    [aria-label][data-balloon-pos][data-balloon-break]:after {
-        white-space: pre;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
-        white-space: pre-line;
-        word-break: break-word;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {
-        transition: none;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {
-        transform: translate(-50%, 0);
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before {
-        transform: translate(-50%, 0);
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {
-        left: 0;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {
-        left: 5px;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {
-        right: 0;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {
-        right: 5px;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after {
-        transform: translate(0, 0);
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before {
-        transform: translate(0, 0);
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
-        bottom: 100%;
-        transform-origin: top;
-        transform: translate(0, var(--custom-balloon-move));
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
-        margin-bottom: 10px;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {
-        left: 50%;
-        transform: translate(-50%, var(--custom-balloon-move));
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
-        top: 100%;
-        transform: translate(0, calc(var(--custom-balloon-move) * -1));
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
-        margin-top: 10px;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {
-        width: 0;
-        height: 0;
-        border: 5px solid transparent;
-        border-bottom-color: var(--custom-balloon-color);
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {
-        left: 50%;
-        transform: translate(-50%, calc(var(--custom-balloon-move) * -1));
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {
-        transform: translate(0, -50%);
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before {
-        transform: translate(0, -50%);
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
-        right: 100%;
-        top: 50%;
-        transform: translate(var(--custom-balloon-move), -50%);
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos="left"]:after {
-        margin-right: 10px;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
-        width: 0;
-        height: 0;
-        border: 5px solid transparent;
-        border-left-color: var(--custom-balloon-color);
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
-        left: 100%;
-        top: 50%;
-        transform: translate(calc(var(--custom-balloon-move) * -1), -50%);
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos="right"]:after {
-        margin-left: 10px;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
-        width: 0;
-        height: 0;
-        border: 5px solid transparent;
-        border-right-color: var(--custom-balloon-color);
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-length]:after {
-        white-space: normal;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-length="small"]:after {
-        width: 80px;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-length="medium"]:after {
-        width: 150px;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-length="large"]:after {
-        width: 260px;
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
-        width: 380px;
-    }
-    
-    @media screen and (max-width: 768px) {
-        [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
-            width: 90vw;
-        }
-    }
-    
-    [aria-label][data-balloon-pos][data-balloon-length="fit"]:after {
-        width: 100%;
-    }
-    
-
-}