By default we set prefix to empty.
If you set the prefix in your custom Sass file, Add data-prefix="{your-prefix}" to the html tag based on your prefix in your custom Sass file. (ex: data-prefix="bs-").
This will help you to add custom prefix to the inline style in all html tags (ex: <span style="color: var(--color);"> to <span style="color: var(--bs-color);">)..

/* ==  Toggle Theme - Structure == */
    Default: <div class="toggle-theme"></div>
    Colored: <div class="toggle-theme toggle-colored"></div>

/* ==  Radio Box (Input[type=radio]) Structure == */
    <div class="radio-box">
        <!-- Radio Box - image -->
        <div class="box">
            <input type="radio" name="{input:name}" id="{input:id-image}" value="{input:value}" class="form-check-input">
            <label for="{input:id-image}" class="form-check-label">
                <div class="form-check-radio"></div>
                {Label}
                <div class="form-check-content">
                <img src="{path/to/img}" alt="{alt}" class="form-check-image">
                </div>
                <p class="form-check-description">
                {Description}
                </p>
            </label>
        </div>
        <!-- Radio Box - text -->
        <div class="box">
            <input type="radio" name="{input:name}" id="{input:id-text}" value="{input:value}" class="form-check-input">
            <label for="{input:id-text}" class="form-check-label">
                <div class="form-check-radio"></div>
                {Label}
                <div class="form-check-content">
                $3/month
                </div>
                <p class="form-check-description">
                {Description}
                </p>
            </label>
        </div>
    </div>

/* ==  Circular Progress - Structure == */
Note: Data Progress Color only support variable color name (blue, indigo, etc) or theme color name (primary, secondary, etc)
    <div class="circular-progress">
        <div class="progress-circle" role="progressbar" aria-label="Basic example" data-progress-value="{value(1-100)}" data-progress-color="{color-name(primary, blue, etc)}">
            <span class="progress-value">{value}%</span>
        </div>
        <span class="progress-text">{text}</span>
    </div>

/* ==  Typed Text Animation - Structure == */
    /* Version 1 */
    Can use variable class, add it to .typing-text (ex: typing-text text-green). To enable border, add class .typing-border to .text-value
    <div class="typing-text">
        <span class="typing text-intro">I'm a</span>
        <span class="typing text-value" data-typing-text="{value-multiple-separated-coma}" data-typing-time="{value-millisecond}"></span>
        </div>
    </div>
    /* Version 2 */
    Can use in any html tag, add class .an-typed to the html tag (ex: <h1 class="an-typed">). To enable cursor, add data-typing-cursor="true" to the html tag.
    <div class="an-typed" data-typing-period="{value-millisecond}" data-typing-text="{value-multiple-separated-coma}" data-typing-cursor="{true/false}" />

/* ==  Preloader - Structure == */
 ------- Available class options--------
 - Animation: fade, flip-x, flip-y, spin, spin-reverse, pulse, bounce
 - Icon (Boxicon): bx bx-loader, bx bx-loader-alt, bx bx-loader-circle
    or any other icon pack you want to use
 - Image: image url

    Type - Icon:
    <div class="preloader">
        <div class="loader-wrap" data-label="{loading-text}">
            <i class="{boxicons-icon-class} {animation-class}"></i>
        </div>
    </div>

    Type - Image:
    <div class="preloader">
        <div class="loader-wrap" data-label="{loading-text}">
            <img src="{path/to/img}" alt="{alt}" class="logo-loader {animation-class}">
        </div>
    </div>

/* ==  Social Share - Structure == */
    Social Share css & js file must be included in your project.
 ------- Available class options--------
 - Network : data-share="facebook,twitter,pinterest,linkedin,whatsapp,telegram,line,skype,threads,email,gmail,print,copy"
 (For print: you can use "print:{targetClass/Id}" to print specific element. Example: print:#print or print:.print)

    <div class="an-share" data-align="{start/center/end/justify}">

        Type - Inline:
        <div class="inline-share">
            <div id="an-social-share" data-share="{network-separated-coma}" data-display="{icon/text/both}" data-icon-background="{true/false}" data-share-theme="{native/colorful}" data-style="{rounded/square/circle}" data-size="{small/medium/large}" data-copy-title="{Auto Generated by current document title}">
                <!-- Add class "has-icon-title" on .an-social-share-title to show share icon -->
                <div class="an-social-share-title">
                    <span>{share-text}</span>
                </div>
            </div>
        </div>

        Type - Dropdown:
        <div id="an-social-share-dropdown">
            <button id="an-social-share-trigger" class="an-social-share-button" type="button">
                <!-- Add class "has-icon-title" on .an-social-share-title to show share icon -->
                <span class="an-social-share-title">{share-text}e</span>
            </button>
            <ul id="an-social-share" class="an-social-share-list" data-share="{network-separated-coma}" data-display="{icon/text/both}" data-icon-background="{true/false}" data-share-theme="{native/colorful}" data-style="{rounded/square/circle}" data-size="{small/medium/large}" data-copy-title="{Auto Generated by current document title}"></ul>
        </div>

        Type - Modal:
        <button id="an-social-share-trigger" class="an-social-share-button" type="button">
                <!-- Add class "has-icon-title" on .an-social-share-title to show share icon -->
                <span class="an-social-share-title">{share-text}e</span>
        </button>
        <div id="an-social-share-modal">
            <div class="an-social-share-modal-content">
                <div class="an-social-share-modal-header">
                    <!-- Add class "has-icon-title" on .an-social-share-title to show share icon -->
                    <h4 class="an-social-share-title">{share-text}</h4>
                    <button type="button" class="an-social-share-close" aria-label="Close"></button>
                </div>
                <div class="an-social-share-modal-body">
                    <div id="an-social-share" data-share="{network-separated-coma}" data-display="{icon/text/both}" data-icon-background="{true/false}" data-share-theme="{native/colorful}" data-style="{rounded/square/circle}" data-size="{small/medium/large}" data-copy-title="{Auto Generated by current document title}"></div>
                </div>
            </div>
        </div>

    </div>

/* ==  User Info - Detection == */
    Add script on footer or before closing body tag:
    <script src="{path/to/js/user-detection.min.js}"></script>
    Use jQuery:
    <script>
        $(document).ready(function() {
            ANDetection();
        });
    </script>
    Use Vanilla JS:
    <script>
        window.onload = function() {
            ANDetection();
        };
    </script>
    Usage:
    Add attribute on html element:
    - browser = data-browser (Will return browser name. E.g: Chrome/Firefox/Opera/Safari/Edge, etc)
    - os = data-os (Will return os name. E.g: Windows/MacOS/Linux/Android/iOS, etc)
    - device = data-device (Will return device name. E.g: Desktop/Mobile/Tablet)
    - ip = data-ip (Will return ip address)
    - country = data-country (Will return country name, code, code ISO, capital, tld and call. E.g: Indonesia, ID, IDN, Jakarta, .id, +62)
    - state = data-state (Will return state name and code. E.g: Jakarta, JKT)
    - city = data-city (Will return city name. E.g: Jakarta) *Indonesia only
    - district = data-district (Will return district name. E.g: Kebayoran Baru) *Indonesia only
    - timezone = data-timezone (Will return timezone name. E.g: Asia/Jakarta)
    - currency = data-currency (Will return currency code and name. E.g: IDR, Indonesian Rupiah)
    - language = data-language (Will return language code and name. E.g: id, Indonesian)
    - latitude = data-latitude (Will return latitude)
    - longitude = data-longitude  (Will return longitude)
    - org = data-org (Will return organization name)
    - asn = data-asn (Will return asn number)
