<div class="mk-ui-lib">
    
    <!-- Text Boxes -->
    <span class="mk-ui-lib-lbl">Text Field</span>
    <div class="mka-wrap">
        <input class="mka-textfield" type="text" placeholder="Placeholder">
    </div>

    <div class="mk-short-gap"></div>

    <div class="mka-wrap">
        <input class="mka-textfield mka-textfield--error" type="text" value="Error!">
        <span class="mka-textfield-error-msg">Something is wrong here</span>
    </div>
    

    <div class="mk-long-gap"></div>



    <!-- Textarea -->
    <span class="mk-ui-lib-lbl">Textarea</span>
    <div class="mka-wrap">
    <textarea class="mka-textarea" rows="10" placeholder="Placeholder"></textarea>
    </div>

    <div class="mk-long-gap"></div>



    <!-- Buttons -->
    <span class="mk-ui-lib-lbl">Buttons</span>
    <div class="mka-wrap">
        <input type="button" class="mka-button mka-button--blue mka-button--medium" value="Primary navigation">
    </div>
    <div class="mka-wrap">
        <input type="button" class="mka-button mka-button--gray mka-button--small" value="Primary navigation">
    </div>
    <div class="mka-wrap">
        <a href="#" class="mka-button mka-button--green mka-button--small mka-button--icon">Add New</a>
    </div>
    <div class="mka-wrap">
        <a href="#" class="mka-button mka-button--red mka-button--small">Remove</a>
    </div>
    <div class="mka-wrap">
        <a href="#" class="mka-button mka-button--darkgray mka-button--small mka-button--float">
            <svg width="10" height="10" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
                <line style="fill:none;stroke:#ffffff;stroke-width:3;stroke-miterlimit:10;" x1="0.8" y1="0.8" x2="15.2" y2="15.3"/>
                <line style="fill:none;stroke:#ffffff;stroke-width:3;stroke-miterlimit:10;" x1="15.2" y1="0.8" x2="0.8" y2="15.3"/>
            </svg>
        </a>
    </div>
    <div class="mka-wrap mka-button-wrap">
        <a href="#" class="mka-button mka-button--green mka-button--medium mka-button--progress">
            <span class="mka-button-icon">
                <svg class="mka-spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                   <circle class="mka-spinner-path" fill="none" stroke-width="7" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
                </svg>
            </span>
            Save Settings
        </a>
    </div>
    <div class="mka-wrap mka-button-wrap">
        <a href="#" class="mka-button mka-button--green mka-button--medium mka-button--success">
            <span class="mka-button-icon">
                <svg class="mka-spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                   <circle class="mka-spinner-path" fill="none" stroke-width="7" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
                </svg>
            </span>
            Save Settings
        </a>
    </div>
    
    <br><br>

    <div class="mka-wrap">
        <a href="#" class="mka-button mka-button--green mka-button--small mka-button--inline-icon">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
                <path style="fill:#ffffff;" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8C16,3.6,12.4,0,8,0z M12.6,9.1H9.1v3.4H6.9V9.1H3.4V6.9  h3.4V3.4h2.3v3.4h3.4V9.1z"/>
            </svg>
            Icon Button
        </a>
    </div>
    <div class="mka-wrap">
        <a href="#" class="mka-button mka-button--green mka-button--medium mka-button--inline-icon">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
                <path style="fill:#ffffff;" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8C16,3.6,12.4,0,8,0z M12.6,9.1H9.1v3.4H6.9V9.1H3.4V6.9  h3.4V3.4h2.3v3.4h3.4V9.1z"/>
            </svg>
            Icon Button
        </a>
    </div>


    <div class="mk-long-gap"></div>


    <!-- Select Box -->
    <span class="mk-ui-lib-lbl">Select Box</span>
    <div class="mka-wrap mka-select-wrap">
        <div class="mka-select">
            <input type="hidden" class="mka-select-box-value">
            <div class="mka-select-box">Primary navigation</div>
            <div class="mka-select-box-list-wrap mka-select-list-wrap">
                <div class="mka-select-list">
                    <span data-value="some-value" class="mka-select-list-item">Droid Sans</span>
                    <span data-value="some-value" class="mka-select-list-item">Wendy One</span>
                    <span data-value="some-value" class="mka-select-list-item">Open Sans</span>
                    <span data-value="some-value" class="mka-select-list-item">Droid Sans</span>
                    <span data-value="some-value" class="mka-select-list-item">Wendy One</span>
                    <span data-value="some-value" class="mka-select-list-item">Open Sans</span>
                    <span data-value="some-value" class="mka-select-list-item">Droid Sans</span>
                    <span data-value="some-value" class="mka-select-list-item">Wendy One</span>
                    <span data-value="some-value" class="mka-select-list-item">Open Sans</span>
                    <span data-value="some-value" class="mka-select-list-item">Droid Sans</span>
                    <span data-value="some-value" class="mka-select-list-item">Wendy One</span>
                    <span data-value="some-value" class="mka-select-list-item">Open Sans</span>
                    <span data-value="some-value" class="mka-select-list-item">Droid Sans</span>
                    <span data-value="some-value" class="mka-select-list-item">Wendy One</span>
                    <span data-value="some-value" class="mka-select-list-item">Open Sans</span>
                </div>
            </div>
        </div>
    </div>


    <div class="mk-long-gap"></div>


    <!-- Select Box -->
    <span class="mk-ui-lib-lbl">Search</span>
    <div class="mka-wrap mka-search-wrap">
        <div class="mka-search">
            <input type="text" class="mka-search-box">
            <span class="mka-search-icon-wrap">
                <span class="mka-search-icon"></span>
                <div class="mka-bubbling">
                    <span class="mka-bubbling-1">
                    </span>
                    <span class="mka-bubbling-2">
                    </span>
                    <span class="mka-bubbling-3">
                    </span>
                </div>
            </span>
        </div>
        <div class="mka-search-list mka-select-list-wrap">
            <div class="mka-select-list">
                <span class="mka-select-list-item">Droid Sans</span>
                <span class="mka-select-list-item">Wendy One</span>
                <span class="mka-select-list-item">Open Sans</span>
            </div>
        </div>
    </div>



    <div class="mk-long-gap"></div>



    <!-- Font -->
    <span class="mk-ui-lib-lbl">Font Field</span>
    <div class="mka-wrap mka-font-wrap">
        <div class="mka-font">
            <input type="text" class="mka-font-field">
            <span class="mka-font-icon-wrap">
                <span class="mka-font-icon"></span>
                <div class="mka-bubbling">
                    <span class="mka-bubbling-1"></span>
                    <span class="mka-bubbling-2"></span>
                    <span class="mka-bubbling-3"></span>
                </div>
            </span>
            <div class="mka-font-filter">
                <span data-value="all" class="mka-font-filter-selected">All</span>
                <div class="mka-font-filter-list">
                    <span data-value="all" class="mka-font-filter-item mka-font-filter-item--selected">All</span>
                    <span data-value="google-font" class="mka-font-filter-item mka-font-filter-item--google">Google Font</span>
                    <span data-value="typekit" class="mka-font-filter-item mka-font-filter-item--typekit">Typekit</span>
                    <span data-value="safe-fonts" class="mka-font-filter-item">Safe Fonts</span>
                </div>
            </div>
        </div>
        <div class="mka-font-list mka-select-list-wrap">
            <div class="mka-select-list">
                <span class="mka-select-list-item">Droid Sans</span>
                <span class="mka-select-list-item">Wendy One</span>
                <span class="mka-select-list-item">Open Sans</span>
            </div>
        </div>
    </div>


    <div class="mk-long-gap"></div>


    <!-- Upload -->
    <span class="mk-ui-lib-lbl">Upload</span>
    <div class="mka-wrap mka-upload-wrap">
        <div class="mka-upload">
            <input class="mka-textfield" type="text">
            <a href="#" class="mka-upload-btn">
                <span class="mka-upload-btn-icon"></span>
            </a>
        </div>
    </div>


    <div class="mk-long-gap"></div>


    <!-- Image Upload -->
    <span class="mk-ui-lib-lbl">Image Upload</span>
    <div class="mka-wrap mka-image-upload-wrap">
        <div class="mka-upload">
            <input class="mka-textfield" type="text" value="http://demos.artbees1.netdna-cdn.com/jupiter/wp-content/uploads/2017/01/minos.jpg" >
            <a href="#" class="mka-upload-btn">
                <span class="mka-upload-btn-icon"></span>
            </a>
            <span class="mka-image-upload-view-btn"></span>
        </div>
        <div class="mka-image-upload-view">
            <svg class="mka-spinner mka-image-upload-view-spinner" width="25px" height="25px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
               <circle class="mka-spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
            </svg>
        </div>
    </div>


    <div class="mk-long-gap"></div>


    <!-- Image Upload -->
    <span class="mk-ui-lib-lbl">Image Upload</span>
    <div class="mka-wrap mka-image-upload-wrap">
        <div class="mka-upload">
            <input class="mka-textfield" type="text" value="http://demos.artbees1.netdna-cdn.com/jupiter/wp-content/uploads/2015/12/jupiter-logo-footer.png" >
            <a href="#" class="mka-upload-btn">
                <span class="mka-upload-btn-icon"></span>
            </a>
            <span class="mka-image-upload-view-btn"></span>
        </div>
        <div class="mka-image-upload-view">
            <svg class="mka-spinner mka-image-upload-view-spinner" width="25px" height="25px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
               <circle class="mka-spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
            </svg>
        </div>
    </div>




    <div class="mk-long-gap"></div>



    <!-- Tip Info -->
    <span class="mk-ui-lib-lbl">
        Tip Info
        <div class="mka-wrap mka-tip-wrap">
            <a href="#" class="mka-tip">
                <span class="mka-tip-icon">
                    <span class="mka-tip-arrow"></span>
                </span>
                <span class="mka-tip-ripple"></span>
            </a>
            <div class="mka-tip-content">
                This value defines when Main Navigation should viewed as Responsive Navigation. Default is 1140px but if your Navigation items fits in header in smaller widths you can change this value. For example if you wish to view your website in iPad and see Main Navigtion as you see in desktop, then you should change this value to any size below 1020px. <a href="#">Learn More</a>
            </div>
        </div>
    </span>
    



    <div class="mk-long-gap"></div>



    <!-- Check Box -->
    <span class="mk-ui-lib-lbl">Check Box</span>
    <div class="mka-wrap mka-checkbox-wrap">
        <input class="mka-checkbox" type="checkbox" checked="checked">
        <div class="mka-checkbox-skin">
            <div class="mka-checkbox-bg"></div>
            <div class="mka-checkbox-bullet"></div>
            <div class="mka-checkbox-bullet-inactive"></div>
            <div class="mka-checkbox-ripple"></div>
        </div>
    </div>
    


    <div class="mk-long-gap"></div>



    <!-- Range -->
    <span class="mk-ui-lib-lbl">Range</span>
    <div class="mka-wrap mka-range-wrap">
        <div class="mka-range-bg">
            <input type="text" class="mka-range-val">
            <span class="mka-range-overlay-btn"></span>
            <span class="mka-range-btn"></span>
        </div>
        <div class="mka-range">
            <input type="range" class="mka-range-input" min="0" max="300" step="10" value="100"  >
        </div>
    </div>


    <div class="mk-long-gap"></div>


    <!-- Toggle -->
    <span class="mk-ui-lib-lbl">Toggle</span>
    <div class="mka-wrap mka-toggle-wrap">
        <div class="mka-toggle">
            <span class="mka-toggle-bullet">
                <span class="mka-toggle-bullet-inner"></span>
                <span class="mka-toggle-bullet-ripple"></span>
            </span>
            <input class="mka-toggle-input" type="hidden" value="false">
        </div>
    </div>


    <div class="mk-long-gap"></div>


    <!-- Options Box -->
    <span class="mk-ui-lib-lbl">Options Box</span>
    <div class="mka-wrap mka-options-wrap">
        <div class="mka-options">
            <div class="mka-options-item-wrap mka-options-item-wrap--active">
                <span class="mka-options-item">
                    Global
                </span>
                <span class="mka-options-item-ripple"></span>
            </div>
            <div class="mka-options-item-wrap">
                <span class="mka-options-item">
                    Custom
                </span>
                <span class="mka-options-item-ripple"></span>
            </div>
            <div class="mka-options-item-wrap">
                <span class="mka-options-item">
                    Yes
                </span>
                <span class="mka-options-item-ripple"></span>
            </div>
            <div class="mka-options-item-wrap">
                <span class="mka-options-item">
                    No
                </span>
                <span class="mka-options-item-ripple"></span>
            </div>
        </div>
    </div>



    <div class="mk-long-gap"></div>



    <!-- Options Box -->
    <span class="mk-ui-lib-lbl">Loading Spinners</span>
    <svg class="mka-spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
       <circle class="mka-spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
    </svg>
    <svg style="margin-left: 60px;" class="mka-spinner" width="25px" height="25px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
       <circle class="mka-spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
    </svg>



    <div class="mk-long-gap"></div>



    <!-- List Controls -->
    <span class="mk-ui-lib-lbl">List Controls</span>
    <div class="mka-wrap mka-clist-wrap">
        <div class="mka-clist">

            <div class="mka-clist-list">
                <div class="mka-clist-item">
                    <div class="mka-clist-item-inner">
                        <div class="mka-clist-item-content">
                            <span class="mka-clist-social-icon"></span>
                            <span class="mka-clist-social-title" data-key="twitter">Twitter</span>
                            <span class="mka-clist-social-url">http://www.flaticon.com/free-icon/envato_17484</span>
                        </div>
                        <div class="mka-clist-buttons">
                            <a href="#" class="mka-clist-edit">
                                <span class="mka-clist-edit-icon"></span>
                                <span class="mka-clist-edit-ripple"></span>
                            </a>
                            <a href="#" class="mka-clist-remove">
                                <span class="mka-clist-remove-icon"></span>
                                <span class="mka-clist-remove-ripple"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="mka-clist-item">
                    <div class="mka-clist-item-inner">
                        <div class="mka-clist-item-content">
                            <span class="mka-clist-social-icon"></span>
                            <span class="mka-clist-social-title" data-key="twitter">Twitter</span>
                            <span class="mka-clist-social-url">http://www.flaticon.com/free-icon/envato_17484</span>
                        </div>
                        <div class="mka-clist-buttons">
                            <a href="#" class="mka-clist-edit">
                                <span class="mka-clist-edit-icon"></span>
                                <span class="mka-clist-edit-ripple"></span>
                            </a>
                            <a href="#" class="mka-clist-remove">
                                <span class="mka-clist-remove-icon"></span>
                                <span class="mka-clist-remove-ripple"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="mka-clist-item">
                    <div class="mka-clist-item-inner">
                        <div class="mka-clist-item-content">
                            <span class="mka-clist-social-icon"></span>
                            <span class="mka-clist-social-title" data-key="twitter">Twitter</span>
                            <span class="mka-clist-social-url">http://www.flaticon.com/free-icon/envato_17484</span>
                        </div>
                        <div class="mka-clist-buttons">
                            <a href="#" class="mka-clist-edit">
                                <span class="mka-clist-edit-icon"></span>
                                <span class="mka-clist-edit-ripple"></span>
                            </a>
                            <a href="#" class="mka-clist-remove">
                                <span class="mka-clist-remove-icon"></span>
                                <span class="mka-clist-remove-ripple"></span>
                            </a>
                        </div>
                    </div>
                </div>

            </div>

            <a href="#" class="mka-clist-add">
                <span class="mka-clist-add-icon"></span>
                <span class="mka-clist-add-text">Add a New Network</span>
            </a>

            <div class="mka-clist-addbox mka-clist-addbox-clone">
                <div class="mka-clist-item-add-content">
                    <div class="mka-clist-social-list-wrap">
                        <span class="mka-clist-social-list-title">Network Name</span>
                        <div class="mka-wrap mka-select-wrap">
                            <div class="mka-select">
                                <input type="hidden" class="mka-select-box-value" value="Facebook">
                                <div class="mka-select-box">Facebook</div>
                                <div class="mka-select-box-list-wrap mka-select-list-wrap">
                                    <div class="mka-select-list">
                                        <span data-value="facebook" class="mka-select-list-item">Facebook</span>
                                        <span data-value="twitter" class="mka-select-list-item">Twitter</span>
                                        <span data-value="instagram" class="mka-select-list-item">Instagram</span>
                                        <span data-value="iinkedin" class="mka-select-list-item">LinkedIn</span>
                                        <span data-value="google plus" class="mka-select-list-item">Google Plus</span>
                                        <span data-value="whatsapp" class="mka-select-list-item">Whatsapp</span>
                                        <span data-value="500px" class="mka-select-list-item">500PX</span>
                                        <span data-value="picasa" class="mka-select-list-item">Picasa</span>
                                        <span data-value="vK" class="mka-select-list-item">VK</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mka-clist-social-url-wrap">
                        <span class="mka-clist-social-list-title">URL</span>
                        <input class="mka-textfield mka-clist-addbox-social-url" type="text">
                    </div>
                </div>
                <div class="mka-clist-item-add-buttons">
                    <a href="#" class="mka-clist-item-cancel-btn mka-button mka-button--darkgray mka-button--small mka-button--float">
                        <svg width="10" height="10" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
                            <line style="fill:none;stroke:#ffffff;stroke-width:3;stroke-miterlimit:10;" x1="0.8" y1="0.8" x2="15.2" y2="15.3"/>
                            <line style="fill:none;stroke:#ffffff;stroke-width:3;stroke-miterlimit:10;" x1="15.2" y1="0.8" x2="0.8" y2="15.3"/>
                        </svg>
                    </a>
                    <a href="#" class="mka-clist-item-apply-btn mka-button mka-button--green mka-button--small mka-button--float">
                        <svg width="18" height="18" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
                            <polyline style="fill:none;stroke:#ffffff;stroke-width:2;stroke-miterlimit:10;" points="2.5,7.3 5.7,10.6 12.7,3.6 "/>
                        </svg>
                    </a>
                </div>
            </div>

            <div class="mka-clist-item mka-clist-item-clone">
                <div class="mka-clist-item-inner">
                    <div class="mka-clist-item-content">
                        <span class="mka-clist-social-icon"></span>
                        <span class="mka-clist-social-title"></span>
                        <span class="mka-clist-social-url"></span>
                    </div>
                    <div class="mka-clist-buttons">
                        <a href="#" class="mka-clist-edit">
                            <span class="mka-clist-edit-icon"></span>
                            <span class="mka-clist-edit-ripple"></span>
                        </a>
                        <a href="#" class="mka-clist-remove">
                            <span class="mka-clist-remove-icon"></span>
                            <span class="mka-clist-remove-ripple"></span>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
    


    <div class="mk-long-gap"></div>



    <!-- Options Box -->
    <span class="mk-ui-lib-lbl">Modal</span>
    <div class="mka-wrap">
        <input type="button" class="mka-button mka-button--blue mka-button--medium mka-modal-warning-btn" value="Warning">
    </div>
    <div class="mka-wrap">
        <input type="button" class="mka-button mka-button--gray mka-button--medium  mka-modal-error-btn" value="Error">
    </div>
    <div class="mka-wrap">
        <input type="button" class="mka-button mka-button--green mka-button--medium  mka-modal-success-btn" value="Success">
    </div>
    <div class="mka-wrap">
        <input type="button" class="mka-button mka-button--green mka-button--medium  mka-modal-multistep-btn" value="Multistep">
    </div>
    <div class="mka-wrap">
        <input type="button" class="mka-button mka-button--blue mka-button--medium  mka-modal-callback-btn" value="Callback">
    </div>
    <div class="mka-wrap">
        <input type="button" class="mka-button mka-button--gray mka-button--medium  mka-modal-indefinite-btn" value="Indefinite Progress">
    </div>

    <div class="mk-long-gap"></div>

    <!-- Multi Select (Select Only + AJAX) -->
    <span class="mk-ui-lib-lbl">Multi Item Selector (Select Only + AJAX) </span>
    <div class="mka-wrap">
        <select class="mka-multiselect--select-only-ajax" name="" multiple="multiple">
            <option value="9">Glenna Reichert</option>
            <option value="7">Kurtis Weissnat</option>
            <option value="4" selected="selected">Patricia Lebsack</option>
        </select>
    </div>

    <div class="mk-long-gap"></div>

    <!-- Multi Select (Select Only + No AJAX) -->
    <span class="mk-ui-lib-lbl">Multi Item Selector (Select Only + No AJAX) </span>
    <div class="mka-wrap">
        <select class="mka-multiselect--select-only-no-ajax" name="" multiple="multiple">
            <option value="9">Glenna Reichert</option>
            <option value="7">Kurtis Weissnat</option>
            <option value="4" selected="selected">Patricia Lebsack</option>
        </select>
    </div>

    <div class="mk-long-gap"></div>

        <!-- Multi Select (Entry Adder + AJAX) -->
        <span class="mk-ui-lib-lbl">Multi Item Selector (Entry Adder + AJAX) </span>
        <div class="mka-wrap">
            <select class="mka-multiselect--entry-adder-ajax" name="" multiple="multiple">
                <option value="9">Glenna Reichert</option>
                <option value="7">Kurtis Weissnat</option>
                <option value="4" selected="selected">Patricia Lebsack</option>
            </select>
        </div>

    <div class="mk-long-gap"></div>

        <!-- Multi Select (Entry Adder + No AJAX) -->
        <span class="mk-ui-lib-lbl">Multi Item Selector (Entry Adder + No AJAX) </span>
        <div class="mka-wrap">
            <select class="mka-multiselect--entry-adder-no-ajax" name="" multiple="multiple">
                <option value="9">Glenna Reichert</option>
                <option value="7">Kurtis Weissnat</option>
                <option value="4" selected="selected">Patricia Lebsack</option>
            </select>
        </div>
                        
    <div class="mk-long-gap"></div>
</div>
