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,email,gmail,print,copy" (For print: you can use "print:{targetClass/Id}" to print specific element. Example: print:#print or print:.print)
 - Attribute : data-display="icon, text, both"

    Type - Dropdown:
    <div id="an-social-share-dropdown">
        <button id="an-social-share-trigger" class="an-social-share-button" type="button">
           <span>{share-text}e</span>
        </button>
        <ul id="an-social-share" data-display="{icon/text/both}" data-share="{network-separated-coma}" class="an-social-share-list"></ul>
    </div>

    Type - Inline:
    <div id="an-social-share" data-display="{icon/text/both}" data-share="{network-separated-coma}">
        <div class="an-social-share-title">
            <span>{share-text}</span>
        </div>
    </div>

    Type - Modal:
    <button id="an-social-share-trigger" class="an-social-share-button" type="button">
        <span>{share-text}</span>
    </button>
    <div id="an-social-share-modal">
        <div class="an-social-share-modal-content">
            <div class="an-social-share-modal-header">
                <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-display="{icon/text/both}" data-share="{network-separated-coma}"></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)
