/*=================== 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-chatbox-voice-input-color: #ff4444;

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

        // Voice
        [class*="chatbox-voice-input-btn"] {
            border: none;
            right: 3.2rem;
            background: none;
            width: 40px;
            height: 40px;
            z-index: 4;
            pointer-events: all;

            /* Core: Disable the system popup menu during long press */
            -webkit-touch-callout: none;

            /* Disable text selection */
            -webkit-user-select: none;
            user-select: none;

            /* Core: Disable all default browser gestures to ensure touch events are passed directly to JS */
            touch-action: none;

            /* Remove the default tap highlight color on iOS for faster response perception */
            -webkit-tap-highlight-color: transparent;

            svg path {
                fill: var(--custom-chatbox-primary-text);
            }

            

        }

        [class*="chatbox-voice-input-btn-wrapper"] {
            
            &.active {
         
                > span {
                    border-radius: 50%;
                    margin-left: .5rem;
                    z-index: 3;
                    right: calc(40px + .4rem + .3rem);
                    bottom: .3rem;
                    position: absolute;
                    background-color: var(--custom-chatbox-primary-color);
                    width: 40px;
                    height: 40px;
                    display: block;
                    pointer-events: none;
                    background-color: var(--custom-chatbox-voice-input-color);
                    border-color: var(--custom-chatbox-voice-input-color);
                    animation: pulse 1.5s ease-in-out infinite;

                    &::after {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            border-radius: 50%;
                            border: 3px solid var(--custom-chatbox-voice-input-color);
                            animation: ripple 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
                        }
                }

                > button {
                    svg path {
                        fill: var(--custom-chatbox-msg-bg);
                    }
                }

            }
        }

        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.8;
                transform: scale(1.05);
            }
        }

        @keyframes ripple {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            100% {
                transform: scale(1.4);
                opacity: 0;
            }
        }


    }

 

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

}